/* A quieter finish, built around Yasmin’s existing type, palette and jasmine. */
:root{--radius:12px;--line:#153f3033;--shadow:0 10px 28px #102e240b}
body{background:var(--cream)}
p{text-wrap:pretty}
::selection{background:#dfc995;color:var(--deep)}
.header{max-width:1440px;margin-inline:auto;width:calc(100% - 48px);border-color:#153f3021;border-radius:12px;box-shadow:0 3px 15px #173d2e06,inset 0 1px 0 #fff}
.header.is-scrolled{box-shadow:0 6px 24px #173d2e12,inset 0 1px 0 #fff}
@supports(backdrop-filter:blur(1px)){
 .header{background:#fffdf6d9;backdrop-filter:blur(20px) saturate(1.12);-webkit-backdrop-filter:blur(20px) saturate(1.12)}
 .header.is-scrolled{background:#fffdf6eb}
}
.header-cta{min-height:46px;border-radius:6px;background:transparent;letter-spacing:.1px}
.header-cta::after{content:none}
.nav-more-menu{border-radius:8px;box-shadow:0 10px 24px #102e2414}
.nav-more-menu a:hover{color:#785423}
.button{border-radius:6px;box-shadow:none;gap:18px;transition:background .2s,border-color .2s}
.button::after{content:'→';font-size:18px;transition:transform .25s}
.button:hover{transform:none}
.button:active,.header-cta:active{transform:translateY(1px)}
.text-link{text-decoration:none;border-bottom:1px solid currentColor}
.hero-visual{border-radius:12px}
.hero h1 em{color:#4d664d}
.hero-stamp{box-shadow:0 4px 16px #102e241a,inset 0 1px 0 #fff;transform:rotate(4deg);width:130px;height:130px}
.hero-stamp em{white-space:nowrap;font-size:20px}
.image-note{border-radius:5px;background:#143b2be6;padding:8px 11px;letter-spacing:.8px}
.hero-bottom{letter-spacing:1.1px}
.ticker{padding-block:20px;letter-spacing:1.25px}
.ticker b{font-size:0;width:13px;height:18px;background:url('flower.svg') center/contain no-repeat;opacity:.85}

/* Give each kind of content its own rhythm instead of repeating raised cards. */
.day-grid{gap:26px}
.day-card{border:0;border-top:1px solid #153f3059;border-bottom:1px solid #153f3033;border-radius:0;box-shadow:none;min-height:350px;padding:30px 24px 28px;background:transparent;color:var(--ink);transition:background .25s}
.day-card.lunch{background:var(--green);color:var(--cream);border-color:var(--green);border-radius:10px;padding-inline:32px}
.day-card::after{content:none}
.day-card h3{font-size:38px;margin:24px 0 20px}
.day-card p{font-size:16px;line-height:1.7}
.day-card .card-link{display:inline-flex;align-items:center;gap:20px;font-size:13px;padding:22px 0 3px}
.day-card .card-link::after{content:'→';font-size:20px;font-weight:400;transition:transform .25s}
.day-card:hover{transform:none;box-shadow:none}
.day-card .eyebrow{letter-spacing:1.2px}
.split-feature{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;gap:0}
.split-feature figure{border-radius:12px;overflow:hidden}
.split-copy{padding:32px 12px 32px 60px}
.split-copy p:not(.eyebrow){font-size:16px;line-height:1.75}
.split-feature figcaption{border-radius:5px;background:#fffdf6e8;box-shadow:none}
.mom-feature{background:#e7eadf;border-block:1px solid #153f3026}
.mom-inner{padding-block:64px}
.feature-card{border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}
.feature-card figure{border-radius:12px;overflow:hidden}
.feature-card>div{padding:27px 0 0}
.feature-card p{font-size:16px;line-height:1.75}
.feature-card:hover{transform:none;box-shadow:none}
.green-card{background:var(--green);border-radius:12px;color:var(--cream)}
.green-card>div{padding:36px}
.green-card .card-link{font-size:13px}
.green-card img{width:56px;filter:none;opacity:.9}

/* The original botanical mark makes the supporting surfaces specific to Yasmin’s. */
.cta-band{background:var(--deep);isolation:isolate}
.cta-band::before{content:'';position:absolute;z-index:-1;right:12%;top:-55px;width:230px;height:300px;background:url('flower.svg') center/contain no-repeat;opacity:.2;transform:rotate(-16deg);pointer-events:none}
.cta-band>.shell{position:relative}
.cta-band .button.light{background:#f7f2e8;color:var(--green)}
.lunch-section,.green-story{background:var(--green)}
.quote-panel{background:var(--deep)}
.section-nav{border:1px solid var(--line);border-radius:6px;background:#fffdf68c;box-shadow:none;backdrop-filter:none}
.section-nav a{font-size:14px}
.sauce-grid article{border-radius:8px;background:#e7eadf;border-color:#153f3026}
.sauce-grid article:nth-child(2){background:#efdfd3;border-color:#153f3026}
.sauce-grid article:nth-child(3){background:#dce6d1;border-color:#153f3026}
.sauce-grid article:nth-child(4){background:#eee2c6;border-color:#153f3026}
.sauce-grid small{font-size:11px;letter-spacing:.65px}
.pairing-strip{border-radius:6px;border-left:2px solid #a58b50;background:#ede7d8}
.status-panel{border-radius:8px;background:#e7eadf;box-shadow:none}
.story-portrait>div{background:#e7eadf}
.advantage-grid{gap:34px 30px}
.advantage-grid article,.advantage-grid article:nth-child(2),.advantage-grid article:nth-child(5){background:transparent;border:0;border-top:1px solid #153f3059;border-radius:0;padding:26px 0 0}
.advantage-grid p{font-size:16px;line-height:1.75}
.advantage-grid h3{margin-top:22px}
.model-status{border-radius:5px}
.art-card{border-radius:8px;box-shadow:none;background:#fffdf6;border-color:#153f3029}
.art-card .art-open>div{padding:24px}
.art-card h2{font-size:28px;line-height:1.15}
.art-expand{border-radius:5px}
.gallery-note{border-radius:6px}
footer{background:#efecdf}
.footer-brand::before{content:'';display:block;width:30px;height:39px;margin-bottom:18px;background:url('flower.svg') center/contain no-repeat}
.footer-nav a{text-underline-offset:5px}
.footer-nav a:hover{text-decoration:underline}

@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .button:hover::after,.day-card:hover .card-link::after{transform:translateX(4px)}
 .feature-card:hover figure img,.art-card:hover img{transform:scale(1.018)}
}
@media(prefers-reduced-motion:no-preference){
 .reveal.is-visible{animation:editorial-arrive .38s cubic-bezier(.2,.7,.2,1) both}
 .hero-copy{animation:editorial-arrive .4s cubic-bezier(.2,.7,.2,1) both}
 .hero-visual,.hero-stamp{animation:none}
 @keyframes editorial-arrive{from{transform:translateY(8px)}to{transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){
 .button:hover,.button:active,.header-cta:active,.day-card:hover,.feature-card:hover,.feature-card:hover figure img,.art-card:hover img{transform:none!important}
}
@media(min-width:851px) and (max-width:1100px){
 .header{gap:18px;padding-inline:20px}
 .header nav{gap:16px}
 .header-cta{padding-inline:15px}
 .day-card{padding-inline:20px}
 .day-card.lunch{padding-inline:24px}
 .day-card h3{font-size:33px}
 .split-copy{padding:28px 0 28px 36px}
}
@media(max-width:850px){
 .header{width:calc(100% - 32px)}
 .mobile-nav>summary{font-size:14px;min-height:44px}
 .header-cta{font-size:13px;min-height:44px}
 .split-copy{padding:34px 6px 0}
 .day-grid{gap:18px}
 .day-card{padding-inline:18px}
 .day-card.lunch{padding-inline:22px}
 .day-card h3{font-size:30px}
 .day-card p{font-size:15px}
 .feature-card>div{padding:25px 0 0}
 .green-card>div{padding:30px}
}
@media(max-width:600px){
 .header{width:calc(100% - 24px);border-radius:10px}
 .header-cta{padding:10px 13px;font-size:12px;min-height:44px}
 .mobile-nav>summary{font-size:14px;min-height:44px}
 .hero-copy{padding-top:24px}
 .hero h1{font-size:clamp(55px,15.9vw,80px);margin-block:21px 24px;line-height:1.02}
 .hero .actions{gap:22px}
 .hero-stamp{width:112px;height:112px;font-size:9px}
 .hero-stamp em{font-size:18px}
 .hero-visual{border-radius:10px}
 .hero-bottom{margin-top:28px}
 .button,.text-link{font-size:13px}
 .image-note{font-size:10px;right:12px;bottom:12px}
 .ticker{gap:12px 18px;line-height:1.7}
 .ticker b{width:11px;height:15px}
 .day-grid{gap:22px}
 .day-card,.day-card.lunch{padding:27px 22px;min-height:0}
 .day-card.morning,.day-card.chai{padding-inline:4px;border-bottom:0}
 .day-card h3{font-size:37px;margin:20px 0 16px}
 .day-card p{font-size:16px;line-height:1.7}
 .day-card .card-link{margin-top:15px;padding-top:0}
 .split-copy{padding:30px 2px 0}
 .split-copy h2{font-size:40px}
 .split-copy p:not(.eyebrow),.feature-card p{font-size:16px}
 .mom-inner{padding-block:32px 44px}
 .feature-grid{gap:28px}
 .feature-card>div{padding-top:23px}
 .green-card>div{padding:29px}
 .cta-band::before{width:170px;height:220px;right:-30px;top:auto;bottom:-40px;opacity:.16}
 .section-nav{padding:10px 16px;gap:0 22px}
 .section-nav a{min-height:44px;font-size:13px}
 .advantage-grid{gap:28px}
 .advantage-grid article{padding-top:24px}
 .sauce-grid article{padding:23px 17px}
 .sauce-grid small{font-size:10px}
 .footer-brand::before{width:25px;height:33px;margin-bottom:16px}
}