:root { --wine:#4b1828; --wine-2:#7b2944; --gold:#bd9250; --ink:#28191e; --cream:#f6eddf; --paper:#fffdf9; --muted:#706267; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.landing-header { position:sticky; z-index:20; top:0; height:88px; display:flex; align-items:center; justify-content:space-between; padding:12px clamp(20px,5vw,72px); border-bottom:1px solid #e9ddd0; background:rgba(255,253,249,.94); backdrop-filter:blur(14px); }
.landing-header img { width:180px; max-height:60px; object-fit:contain; }
.header-cta,.primary { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; background:var(--wine); color:#fff; font-weight:850; }
.header-cta.delivery-cta { border:1px solid var(--wine); background:transparent; color:var(--wine); }
.landing-header-actions { display:flex; align-items:center; gap:10px; }
.store-gate { min-height:calc(100dvh - 88px); display:grid; place-items:center; padding:clamp(46px,8vw,100px) clamp(20px,7vw,110px); background:radial-gradient(circle at 20% 18%,#f1dfc6 0,transparent 28%),radial-gradient(circle at 82% 78%,#ead5bc 0,transparent 30%),linear-gradient(135deg,#fffdf9,#f7eee3); }
.store-gate-inner { width:min(900px,100%); text-align:center; }
.store-gate h1 { margin:12px 0 15px; color:var(--wine); font-family:Georgia,serif; font-size:clamp(3rem,7vw,6rem); line-height:.96; letter-spacing:-.04em; }
.store-gate-inner>p { max-width:650px; margin:0 auto 38px; color:var(--muted); font-size:clamp(1.05rem,1.8vw,1.25rem); line-height:1.55; }
.store-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.store-card { min-height:210px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:30px; border:1px solid #dfcdbb; border-radius:24px; background:rgba(255,255,255,.9); box-shadow:0 18px 50px rgba(59,27,36,.09); text-align:left; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.store-card:hover { transform:translateY(-3px); border-color:var(--wine); box-shadow:0 24px 58px rgba(59,27,36,.14); }
.store-card>span { color:var(--wine-2); font-size:.74rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.store-card>strong { margin:7px 0 28px; color:var(--wine); font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.2rem); }
.store-card>small { width:100%; display:flex; align-items:center; justify-content:space-between; padding-top:18px; border-top:1px solid #eaded2; color:var(--wine); font-size:.95rem; font-weight:850; }
.store-card b { font-size:1.2rem; }
.start-section { padding:clamp(52px,7vw,92px) clamp(20px,7vw,110px) clamp(64px,8vw,110px); background:radial-gradient(circle at 78% 12%,#f1dfc6 0,transparent 30%),linear-gradient(135deg,#fffdf9,#f7eee3); }
.start-heading { max-width:900px; margin:0 auto 42px; text-align:center; }
.start-heading h1 { margin:12px 0 16px; color:var(--wine); font-family:Georgia,serif; font-size:clamp(2.8rem,6vw,5.8rem); line-height:.97; letter-spacing:-.04em; }
.start-heading p { margin:0; color:var(--muted); font-size:clamp(1.05rem,1.8vw,1.28rem); line-height:1.55; }
.choice-grid { width:min(1180px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.choice-card { overflow:hidden; display:flex; flex-direction:column; border:1px solid #e3d2c1; border-radius:26px; background:#fff; box-shadow:0 20px 55px rgba(59,27,36,.1); }
.choice-image { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; background:#f2e8da; }
.choice-copy { flex:1; display:flex; flex-direction:column; padding:clamp(22px,3vw,34px); }
.choice-tag { color:var(--wine-2); font-size:.74rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.choice-copy h2 { margin:10px 0 10px; color:var(--wine); font-family:Georgia,serif; font-size:clamp(1.75rem,3vw,2.65rem); line-height:1.04; }
.choice-copy p { margin:0 0 24px; color:var(--muted); line-height:1.55; }
.choice-action { margin-top:auto; min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 24px; border:2px solid var(--wine); border-radius:999px; background:var(--wine); color:#fff; font-size:1rem; font-weight:900; text-align:center; box-shadow:0 14px 28px rgba(75,24,40,.16); }
.choice-action-outline { background:var(--wine); color:#fff; box-shadow:0 14px 28px rgba(75,24,40,.16); }
.choice-card { transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.choice-card:has(.choice-action:hover) { border-color:rgba(75,24,40,.45); transform:translateY(-2px); }
.landing-hero { min-height:calc(100dvh - 88px); display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.86fr); gap:clamp(34px,6vw,92px); align-items:center; padding:clamp(52px,8vw,110px) clamp(20px,7vw,110px); background:radial-gradient(circle at 75% 35%,#f1dfc6 0,transparent 34%),linear-gradient(135deg,#fffdf9,#f7eee3); }
.eyebrow { color:var(--wine-2); font-size:.78rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow.light { color:#e9c88e; }
.hero-copy h1 { max-width:760px; margin:14px 0 20px; color:var(--wine); font-family:Georgia,serif; font-size:clamp(3.1rem,7vw,6.9rem); line-height:.94; letter-spacing:-.045em; }
.hero-copy>p { max-width:650px; margin:0; color:var(--muted); font-size:clamp(1.05rem,1.8vw,1.35rem); line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:32px 0; }
.primary { min-height:58px; padding:0 28px; }
.secondary { min-height:58px; display:inline-flex; align-items:center; padding:0 18px; color:var(--wine); font-weight:800; }
.hero-copy ul { display:flex; flex-wrap:wrap; gap:10px 24px; margin:0; padding:0; list-style:none; color:var(--muted); }
.hero-copy li::before { content:"✓"; margin-right:8px; color:#1f7a50; font-weight:900; }
.hero-visual { position:relative; min-height:560px; display:grid; place-items:center; }
.hero-main { width:min(100%,620px); aspect-ratio:4/5; border-radius:30px; object-fit:cover; box-shadow:0 36px 90px rgba(59,27,36,.2); }
.visual-note { position:absolute; left:-24px; bottom:42px; max-width:260px; padding:18px 20px; border:1px solid rgba(189,146,80,.45); border-radius:18px; background:rgba(255,253,249,.94); box-shadow:0 18px 50px rgba(50,22,31,.14); }
.visual-note strong,.visual-note span { display:block; }
.visual-note strong { color:var(--wine); }
.visual-note span { margin-top:5px; color:var(--muted); font-size:.9rem; line-height:1.45; }
.experience { padding:clamp(70px,9vw,130px) clamp(20px,7vw,110px); }
.experience-intro { max-width:850px; }
.experience h2 { margin:12px 0 40px; color:var(--wine); font-family:Georgia,serif; font-size:clamp(2.3rem,5vw,4.6rem); line-height:1; }
.experience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.experience article { min-height:250px; padding:30px; border:1px solid #e7d8c8; border-radius:22px; background:#fff; }
.experience article>span { color:var(--gold); font-weight:900; }
.experience h3 { margin:56px 0 10px; color:var(--wine); font-size:1.35rem; }
.experience p { margin:0; color:var(--muted); line-height:1.6; }
.builder-callout { margin:0 clamp(20px,7vw,110px) 90px; padding:clamp(34px,5vw,66px); display:flex; align-items:center; justify-content:space-between; gap:30px; border-radius:28px; background:var(--wine); color:#fff; }
.builder-callout h2 { margin:8px 0; font-family:Georgia,serif; font-size:clamp(2.2rem,4vw,4rem); }
.builder-callout p { margin:0; color:#eadce0; }
.builder-callout>a { flex:0 0 auto; min-height:56px; display:inline-flex; align-items:center; padding:0 26px; border-radius:999px; background:#fff; color:var(--wine); font-weight:900; }
footer { min-height:120px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px clamp(20px,7vw,110px); border-top:1px solid #e9ddd0; color:var(--muted); }
footer img { width:150px; }
@media (max-width:900px) { .choice-grid,.store-grid { grid-template-columns:1fr; } .landing-hero { grid-template-columns:1fr; } .hero-visual { min-height:440px; } .hero-main { max-height:620px; } .visual-note { left:10px; } .experience-grid { grid-template-columns:1fr; } .experience article { min-height:190px; } .experience h3 { margin-top:34px; } .builder-callout { align-items:flex-start; flex-direction:column; } }
@media (max-width:600px) { .landing-header { height:76px; padding-right:8px; padding-left:8px; gap:6px; } .landing-header img { width:min(120px,29vw); } .landing-header-actions { gap:5px; } .header-cta { min-height:40px; padding:0 7px; font-size:.68rem; white-space:nowrap; } .store-gate { min-height:calc(100dvh - 76px); padding-top:34px; } .store-gate h1 { font-size:clamp(2.75rem,14vw,4rem); } .store-gate-inner>p { margin-bottom:26px; } .store-card { min-height:160px; padding:22px; border-radius:20px; } .store-card>strong { margin-bottom:18px; } .start-section { padding-top:40px; } .start-heading { margin-bottom:28px; } .start-heading h1 { font-size:clamp(2.45rem,12vw,3.6rem); } .choice-card { border-radius:20px; } .choice-image { aspect-ratio:4/3; } .choice-action { width:100%; } .landing-hero { padding-top:44px; } .hero-copy h1 { font-size:clamp(3rem,15vw,4.5rem); } .hero-actions { align-items:stretch; flex-direction:column; } .hero-actions a { width:100%; } .hero-visual { min-height:390px; } .hero-main { aspect-ratio:1/1.15; } .visual-note { right:10px; bottom:18px; max-width:none; } footer { align-items:flex-start; flex-direction:column; } }