/* MadinaDates — homepage design system (colours, type scale, sections, cards, motion). Shared by every page. */
:root{
  --olive:#818c66; --olive-dark:#6a7452; --olive-light:#b3bf95;
  --gold:#c9a96a; --gold-light:#ead8a8;
  --cream:#faf9f5; --beige:#f3ebe5; --sage:#f2f2ec;
  --ink:#1c1c1a; --text:#4b4b47; --muted:#76766f; --line:#e4e0d8; --field:#d6d2c9;
  --wa:#25d366; --err:#a5443a;
  /* type scale — one size per role, used everywhere */
  --fs-display:clamp(44px,6.4vw,84px);  /* hero headline */
  --fs-h2:clamp(32px,3.6vw,44px);       /* section titles */
  --fs-h3:clamp(24px,2.2vw,28px);       /* sub-titles: date names, form & basket titles, gift tiles */
  --fs-h4:22px;                          /* card names, prices, quotes */
  --fs-num:40px;                         /* decorative numbers 01–04 */
  --fs-lead:16px;                        /* intro paragraphs */
  --fs-body:15px;                        /* normal text, inputs */
  --fs-small:13px;                       /* card text, notes */
  --fs-nav:12px;                         /* menu, buttons, top bar */
  --fs-label:11px;                       /* eyebrows, labels, taglines */
  --fs-micro:10px;                       /* badges */
  --pad:clamp(80px,9vw,120px);   /* the same vertical space for every section */
  --max:1180px;                  /* the same content width for every section */
  --split:1080px;                /* the same width for every two-column section */
  --card:260px;                  /* the same width for every product card */
  --gap:28px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--ink);background:var(--cream);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
.ph img,.logo img,.loader-mark img,.modal-box img,.fb-photo,.media img{display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
section{scroll-margin-top:68px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

/* ================= shared section system ================= */
.sec{padding:var(--pad) 0;position:relative}
.bg-cream{background:var(--cream)} .bg-beige{background:var(--beige)} .bg-sage{background:var(--sage)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 56px}
.eyebrow{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--olive)}
.h2{font-family:'Playfair Display SC',serif;font-weight:400;font-size:var(--fs-h2);line-height:1.15;color:var(--ink);margin-top:14px}
.lead{font-size:var(--fs-lead);line-height:1.75;color:var(--text);font-weight:300;margin-top:18px}
.small{font-size:var(--fs-small);line-height:1.7;color:var(--text)}

/* drawn ornament under every title */
.orn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;height:10px}
.orn::before,.orn::after{content:"";height:1px;width:0;background:var(--gold);transition:width 1.1s var(--ease) .35s}
.orn i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg) scale(0);transition:transform .7s var(--ease) .2s}
.in .orn::before,.in .orn::after,.orn.in::before,.orn.in::after{width:48px}
.in .orn i,.orn.in i{transform:rotate(45deg) scale(1)}
.orn-left{justify-content:flex-start}
.orn-left::before{display:none}

/* ================= buttons & fields ================= */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 34px;font-size:var(--fs-nav);letter-spacing:.2em;text-transform:uppercase;background:var(--olive);color:#fff;border:1px solid var(--olive);transition:background .3s,border-color .3s,color .3s,transform .3s;text-align:center}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn:hover{background:var(--olive-dark);border-color:var(--olive-dark)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.98)}
.btn-block{width:100%}
.btn-outline-light{background:transparent;border-color:#fff;color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-outline-dark{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline-dark:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.select{width:100%;height:44px;padding:0 38px 0 14px;font-size:var(--fs-small);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c1c1a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid var(--field);border-radius:2px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s}
.select:hover,.select:focus{outline:none;border-color:var(--olive)}
.static-sel{height:44px;display:flex;align-items:center;padding:0 14px;font-size:var(--fs-small);border:1px dashed var(--field);color:var(--text);background:var(--sage)}
.field{display:block;width:100%;padding:16px 0 12px;font-size:var(--fs-body);border:none;border-bottom:1px solid var(--field);background:transparent;color:var(--ink);border-radius:0;transition:border-color .25s}
.field::placeholder{color:var(--muted)}
.field:focus{outline:none;border-bottom-color:var(--olive)}
select.field{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c1c1a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center;cursor:pointer;padding-right:24px}
textarea.field{resize:vertical;min-height:84px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.label{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--text);line-height:1.5;cursor:pointer}
.check input{margin-top:4px;accent-color:var(--olive);width:15px;height:15px;flex:none}
.form-msg{font-size:var(--fs-small);margin-top:14px;color:var(--olive-dark);display:none}
.form-msg.err{color:var(--err)}
.form-msg.show{display:block;animation:fadeUp .4s var(--ease)}

/* ================= images ================= */
.ph{position:relative;overflow:hidden;background:linear-gradient(160deg,#efe7de 0%,#d8c6b4 100%)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .4s}
.ph img.missing{opacity:0}
.ph-dark{background:linear-gradient(135deg,#2b3528,#141813 60%,#2a1d14)}
.ph-warm{background:linear-gradient(150deg,#8a6a4c,#46301f)}
.ph-green{background:linear-gradient(150deg,#3a5440,#1d2e22)}

/* ================= loader (logo intro) ================= */
.loader{position:fixed;inset:0;z-index:200;background:var(--cream);display:flex;align-items:center;justify-content:center;transition:opacity .7s var(--ease),visibility .7s}
.loader.done{opacity:0;visibility:hidden}
.loader-mark{position:relative;width:128px;height:128px}
.loader-mark img{width:100%;height:100%;animation:popIn 1s var(--ease) both}
.loader-ring{position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(201,169,106,.25);border-top-color:var(--gold);animation:spin 1.3s linear infinite}
@keyframes popIn{from{opacity:0;transform:scale(.72) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================= top bar & header ================= */
.topbar{background:var(--olive);color:#fff;text-align:center;font-size:var(--fs-nav);letter-spacing:.14em;text-transform:uppercase;padding:10px 16px}
.topbar a{text-decoration:underline;text-underline-offset:3px;margin-left:12px}
.header{position:sticky;top:0;z-index:50;background:rgba(250,249,245,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .4s}
.header.scrolled{box-shadow:0 8px 30px rgba(40,35,25,.08)}
.header .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:84px;max-width:none;padding:0 clamp(20px,4vw,64px);transition:height .4s var(--ease)}
.header.scrolled .wrap{height:66px}
.header{--nav-gap:clamp(22px,calc(1.7vw + 4px),44px)}
.nav{display:flex;gap:var(--nav-gap);align-items:center}
/* the two sides mirror each other around the logo: same width, same distance from the logo,
   links spread evenly across each side (5 on the left, 4 + basket on the right) */
.header{--logo-gap:clamp(30px,3.2vw,60px);--nav-w:clamp(0px,calc(30vw + 120px),680px)}
.nav-left,.nav-right{justify-content:space-between;width:100%;max-width:calc(var(--nav-w) + var(--logo-gap))}
.nav-left{justify-self:end;padding-right:var(--logo-gap)}
.nav-right{justify-self:start;padding-left:var(--logo-gap)}
.nav a{font-size:var(--fs-nav);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--olive);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.logo{display:block;width:65px;height:65px;transition:width .4s var(--ease),height .4s var(--ease),transform .7s var(--ease)}
.logo img{width:100%;height:100%;display:block}
.logo:hover{transform:rotate(-10deg) scale(1.06)}
.header.scrolled .logo{width:53px;height:53px}
.cart-btn{position:relative;display:inline-flex;align-items:center}
.cart-btn::after{display:none}
.cart-count{position:absolute;top:-10px;right:-10px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--olive);color:#fff;font-size:10px;line-height:18px;text-align:center;font-weight:500}
.cart-count.bump{animation:bump .5s var(--ease)}
.cart-btn.bump svg{animation:wiggle .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.5)}}
@keyframes wiggle{25%{transform:rotate(-12deg)}75%{transform:rotate(10deg)}}
.burger{display:none;width:40px;height:40px;align-items:center}
.mobile-cart{display:none;justify-self:end}

.drawer{position:fixed;inset:0;z-index:80;pointer-events:none}
.drawer-bg{position:absolute;inset:0;background:rgba(20,20,18,.4);opacity:0;transition:opacity .35s}
.drawer-panel{position:absolute;top:0;left:0;bottom:0;width:min(330px,86vw);background:var(--cream);transform:translateX(-100%);transition:transform .45s var(--ease);padding:26px 28px 40px;display:flex;flex-direction:column;overflow:auto}
.drawer.open{pointer-events:auto}
.drawer.open .drawer-bg{opacity:1}
.drawer.open .drawer-panel{transform:none}
.drawer-panel .logo{margin:0 0 18px}
.drawer-panel a.dl{padding:15px 0;border-bottom:1px solid var(--line);font-size:var(--fs-small);letter-spacing:.15em;text-transform:uppercase;opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .4s var(--ease)}
.drawer.open a.dl{opacity:1;transform:none}
.drawer-close{position:absolute;top:22px;right:22px;font-size:28px;line-height:1}

/* ================= hero ================= */
.hero{position:relative;min-height:max(640px,calc(100svh - 120px));display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:#141813}
.hero-bg{position:absolute;inset:-4%;animation:kenburns 20s ease-in-out infinite alternate}
.hero-bg img{filter:brightness(.6);object-position:center 45%}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.45) 100%);z-index:1;pointer-events:none}
@keyframes kenburns{from{transform:scale(1.1) translate(-1.5%,-1%)}to{transform:scale(1) translate(1%,1%)}}
.particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.particles span{position:absolute;bottom:-20px;left:var(--l);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#f6e6b8 0%,rgba(201,169,106,.5) 40%,rgba(201,169,106,0) 70%);opacity:0;animation:rise var(--t) linear var(--d) infinite}
@keyframes rise{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}85%{opacity:.5}100%{transform:translate(var(--x),-112vh);opacity:0}}
.hero-inner{position:relative;z-index:2;padding:80px 20px 110px;max-width:960px}
.hero-logo{width:84px;height:84px;margin:0 auto 26px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.hero .eyebrow{color:var(--olive-light);letter-spacing:.3em;font-weight:600}
.hero h1{font-family:'Playfair Display SC',serif;font-weight:400;font-size:var(--fs-display);line-height:1.1}
.mask{display:block;overflow:hidden;padding:0 .1em .08em}
.mask>span{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease) var(--d,0s)}
.shimmer{font-style:italic;background:linear-gradient(100deg,#fff 0%,#fff 38%,var(--gold-light) 50%,#fff 62%,#fff 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6.5s ease-in-out 2.4s infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-60% 0}}
.hero p{margin-top:28px;font-size:calc(var(--fs-lead) + 2px);font-weight:300;opacity:.92}
.hero-ctas{margin-top:50px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-ctas .btn{min-width:214px}
.h-up{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
body.loaded .h-up{opacity:1;transform:none}
body.loaded .mask>span{transform:none}
.scroll-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:var(--fs-micro);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.scroll-cue i{display:block;width:1px;height:52px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--gold-light);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{to{top:110%}}

/* ================= marquee ================= */
.marquee{background:var(--olive);color:#fff;overflow:hidden;padding:20px 0;position:relative}
.marquee-track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:'Playfair Display SC',serif;font-size:var(--fs-h4);letter-spacing:.04em;padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:52px}
.marquee span::after{content:"✦";color:var(--gold-light);font-size:14px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ================= scroll reveal ================= */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease) calc(var(--i,0) * 90ms),transform 1s var(--ease) calc(var(--i,0) * 90ms)}
.reveal.in{opacity:1;transform:none}
.wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease)}
.wipe img{transform:scale(1.18);transition:transform 1.8s var(--ease),opacity .4s}
.wipe.in{clip-path:inset(0 0 0 0)}
.wipe.in img{transform:scale(1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ================= product cards (one size everywhere) ================= */
.grid{display:grid;grid-template-columns:repeat(var(--cols),var(--card));gap:var(--gap);justify-content:center}
.cols-4{--cols:4} .cols-3{--cols:3} .cols-2{--cols:2}
.card{background:#fff;border:1px solid var(--line);padding:20px 20px 22px;display:flex;flex-direction:column;text-align:center;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s,opacity 1s var(--ease)}
.card:hover{transform:translateY(-8px);border-color:var(--olive);box-shadow:0 26px 50px rgba(60,58,40,.14)}
.card:hover .media img{transform:scale(1.07)}
.card .media{aspect-ratio:4/5;width:100%}
.badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--olive);color:#fff;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;font-weight:500}
.badge.gold{background:var(--gold)}
.badge-inline{position:static;align-self:center;display:flex;align-items:center;gap:10px;background:none;color:var(--olive);padding:0;font-weight:500}
.badge-inline::before,.badge-inline::after{content:"";width:22px;height:1px;background:var(--gold)}
.badge-inline + .card-name{margin-top:18px}
.card-name{font-family:'Playfair Display SC',serif;font-weight:400;font-size:var(--fs-h4);line-height:1.2;margin-top:22px}
.card-tag{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--olive);margin-top:8px}
.card-desc{font-size:var(--fs-small);color:var(--text);line-height:1.65;margin-top:14px}
.card-foot{margin-top:auto;padding-top:20px}
.card-order{border-top:1px solid var(--line);padding-top:18px;text-align:left;margin-bottom:16px}
.card-order:last-child{margin-bottom:0}
.card-order .label{font-size:var(--fs-micro)}
.weight-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.weight-row .label{margin:0}
.weight-val{font-size:var(--fs-small);font-weight:500;color:var(--ink)}

/* ================= know your dates (alternating rows) ================= */
.dates{padding:var(--pad) 0 0;background:var(--beige)}
.dates .sec-head{margin-bottom:var(--pad)}
.date-row{display:grid;grid-template-columns:1fr 1fr;min-height:540px;overflow:hidden}
.date-row .media{position:relative;min-height:540px;background-color:#eef0f3}
.date-row .media img{position:absolute;inset:0}
.date-row:hover .media img{transform:scale(1.04)}
.date-text{display:flex;flex-direction:column;justify-content:center;padding:72px clamp(28px,7vw,120px);position:relative}
.date-row.light{background:var(--cream)}
.date-row.alt{background:var(--beige)}
.date-row.alt .media{order:2}
.date-num{font-family:'Playfair Display',serif;font-style:italic;font-size:var(--fs-num);line-height:1;color:var(--gold);opacity:.55}
.date-title{font-family:'Playfair Display SC',serif;font-weight:400;font-size:calc(var(--fs-h3) + 6px);line-height:1.15;letter-spacing:.3em;margin-top:18px;opacity:0;transition:letter-spacing 1.6s var(--ease) .2s,opacity 1.2s var(--ease) .2s}
.date-text.in .date-title{letter-spacing:.08em;opacity:1}
.date-sub{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--olive);margin-top:10px;font-weight:500}
.date-rule{width:0;height:1px;background:var(--gold);margin-top:22px;transition:width 1.2s var(--ease) .5s}
.date-text.in .date-rule{width:64px}
.date-desc{font-size:var(--fs-lead);line-height:1.9;font-weight:300;color:var(--text);margin-top:22px;max-width:560px}
.date-link{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;margin-top:30px;padding-bottom:6px;font-size:var(--fs-nav);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--olive-dark);border-bottom:1px solid currentColor}
.date-link svg{transition:transform .4s var(--ease)}
.date-link:hover svg{transform:translateX(6px)}

/* ================= two-column sections (one size everywhere) ================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;max-width:var(--split);margin:0 auto}
.split .media{aspect-ratio:4/5;width:100%;box-shadow:0 30px 60px rgba(40,35,25,.14)}
.split.rev .media{order:2}
.split-info .h2{margin-top:14px}
.split-info .lead{margin-top:20px}
.step{margin-top:22px}
.split-info .btn{margin-top:32px}
.sig-price{color:var(--olive);font-weight:500;font-size:var(--fs-h4);margin-top:16px;display:flex;align-items:baseline;gap:12px}
.sig-price small{font-size:var(--fs-label);color:var(--text);letter-spacing:.12em;font-weight:400}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:30px 0 34px;padding-top:28px;border-top:1px solid var(--line)}
.pillar h4{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);margin-bottom:8px}
.feature-note{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);padding:16px 18px;margin-top:24px}
.feature-note h5{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--olive);font-weight:500;margin-bottom:4px}
.feature-note p{font-size:var(--fs-small);color:var(--text);line-height:1.6}
.feature-note svg{flex:none;margin-top:3px}

/* signature gallery */
.gallery{position:relative}
.thumbs{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;z-index:3}
.thumbs button{width:60px;height:60px;padding:0;border:2px solid rgba(255,255,255,.7);transition:border-color .3s,transform .3s}
.thumbs button.active,.thumbs button:hover{border-color:#fff;transform:translateY(-3px)}
.gallery .media img.swap{animation:swapIn .6s var(--ease)}
@keyframes swapIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
#sigMsg{width:100%;border:1px solid var(--field);background:#fff;padding:12px 14px;font-size:var(--fs-small);min-height:64px;resize:vertical;margin-top:12px}
#sigMsg:focus{outline:none;border-color:var(--olive)}

/* ================= gift collections ================= */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:var(--split);margin:0 auto}
.tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.tile .ph{position:absolute;inset:0}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(25,20,15,.72),rgba(25,20,15,.05) 60%);z-index:1;transition:opacity .5s}
.tile:hover .ph img{transform:scale(1.07)}
.tile-label{position:absolute;left:28px;right:28px;bottom:26px;z-index:2;color:#fff}
.tile-label b{display:block;font-family:'Playfair Display SC',serif;font-style:italic;font-weight:400;font-size:var(--fs-h3);line-height:1.2}
.tile-label small{display:inline-flex;gap:10px;align-items:center;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;margin-top:8px;opacity:.85}
.tile-label small::after{content:"→";transition:transform .4s var(--ease)}
.tile:hover .tile-label small::after{transform:translateX(8px)}
.tile-label::before{content:"";display:block;width:0;height:1px;background:var(--gold-light);margin-bottom:14px;transition:width .6s var(--ease)}
.tile:hover .tile-label::before{width:56px}

/* ================= promise strip ================= */
.promise{padding:26px 0}
.promise-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--split);margin:0 auto}
.feat{text-align:center;padding:4px 16px;position:relative}
.feat+.feat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:#d6d6cb;transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease) calc(var(--i,0) * 150ms + .2s)}
.promise.in .feat+.feat::before{transform:scaleY(1)}
.feat b{display:block;font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:var(--fs-num);color:var(--gold);line-height:1}
.feat span{display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;margin-top:6px;line-height:1.4}

/* ================= registration & forms ================= */
.perks{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.perk{background:#fff;border:1px solid var(--line);padding:16px;transition:transform .4s var(--ease),border-color .3s}
.perk:hover{transform:translateY(-4px);border-color:var(--olive)}
.perk h5,.reward h5{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--olive);font-weight:500;display:flex;gap:6px;align-items:center}
.perk p{font-size:var(--fs-small);color:var(--text);margin-top:6px;line-height:1.6}
.reward{margin-top:18px;background:var(--sage);border:1px solid var(--line);padding:18px;display:flex;gap:16px;align-items:center}
.reward p{font-size:var(--fs-small);color:var(--text);margin-top:3px;line-height:1.55}
.reward svg{animation:float 3.5s ease-in-out infinite;flex:none}
@keyframes float{50%{transform:translateY(-5px)}}
.form-card{background:#fff;padding:40px 38px 36px;box-shadow:0 26px 60px rgba(50,40,30,.12)}
.form-card h3{text-align:center;font-family:'Playfair Display SC',serif;font-style:italic;font-weight:400;font-size:var(--fs-h3)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
.seg button{height:42px;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--field);background:#fff;transition:all .3s}
.seg button.on{border-color:var(--olive);background:var(--sage);color:var(--olive-dark);font-weight:600}
.form-card .checks{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.form-card .check a{color:var(--olive-dark);text-decoration:underline}
.form-card .btn{margin-top:26px}
.form-card .alt{text-align:center;font-size:var(--fs-small);margin-top:16px;color:var(--text)}
.form-card .alt a{text-decoration:underline;font-weight:600;color:var(--ink)}
#companyField{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
#companyField>div{overflow:hidden}
#companyField.show{grid-template-rows:1fr}
.corp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.corp-actions .btn{margin-top:0}

/* ================= farm banner (parallax) ================= */
.farm{position:relative;overflow:hidden;min-height:clamp(520px,40vw,780px);padding:48px 0;display:flex;align-items:center}
.farm-bg{position:absolute;left:0;right:0;top:-6%;bottom:-6%;will-change:transform}
/* plate stays in view on the right; the photo slowly breathes (zoom + drift) */
.farm-bg img{object-position:75% center;transform-origin:70% 50%;animation:farmDrift 22s ease-in-out infinite alternate}
@keyframes farmDrift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.6%,-1%)}}
.farm::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 45%,rgba(255,255,255,0) 60%);background-size:250% 100%;animation:farmSheen 9s ease-in-out infinite}
@keyframes farmSheen{0%,35%{background-position:120% 0}100%{background-position:-120% 0}}
.farm-card{position:relative;z-index:2;max-width:420px;background:rgba(250,249,245,.94);padding:42px 42px;box-shadow:0 26px 50px rgba(0,0,0,.16)}
.farm-card p{font-size:var(--fs-body);color:var(--text);line-height:1.75;margin-top:16px}

/* ================= feedback ================= */
/* dark, softly blurred photo backdrop with outlined review cards */
.feedback{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.feedback::before{content:"";position:absolute;inset:-40px;background:var(--fb-bg,url(../images/hero.jpg)) center/cover no-repeat;filter:blur(12px) brightness(.3) saturate(.8)}
.feedback::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(28,28,26,.1),rgba(28,28,26,.55))}
.feedback > .wrap{position:relative;z-index:1}
.feedback .eyebrow{color:var(--gold)}
.feedback .h2{color:#fff}
.feedback .lead{color:rgba(255,255,255,.75)}
.fb-stage{position:relative;max-width:780px;margin:0 auto}
.fb-card{overflow:hidden;touch-action:pan-y;cursor:grab;transition:height .7s var(--ease)}
.fb-card:active{cursor:grabbing}
.fb-track{display:flex;align-items:flex-start;transition:transform .9s var(--ease)}
.fb-slide{flex:0 0 100%;min-width:0;display:flex;padding:56px 72px 6px;user-select:none}
.fb-box{position:relative;flex:1;border:1.5px solid rgba(255,255,255,.85);border-radius:28px;padding:78px 52px 40px;text-align:center;background:rgba(255,255,255,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;opacity:.35;transform:scale(.95);transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s}
.fb-slide.on .fb-box{opacity:1;transform:none}
.fb-avatar{position:absolute;top:-48px;left:50%;transform:translateX(-50%);width:96px;height:96px;border-radius:50%;background:var(--olive);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display SC',serif;font-size:40px;border:4px solid #fff;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.fb-quote{font-weight:300;font-size:calc(var(--fs-lead) + 1px);line-height:1.85;color:rgba(255,255,255,.95);white-space:pre-line;max-width:560px}
.fb-photo{width:240px;max-width:100%;aspect-ratio:12/5;object-fit:cover;border-radius:12px;margin-top:22px;border:1px solid rgba(255,255,255,.35)}
.fb-stars{color:var(--gold);font-size:24px;letter-spacing:7px;margin-top:26px;line-height:1}
.fb-who{font-size:var(--fs-body);color:#fff;margin-top:14px;letter-spacing:.04em}
.fb-src{display:flex;align-items:center;gap:6px;font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px}
.fb-arrow{position:absolute;top:calc(50% + 25px);width:46px;height:46px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;transform:translateY(-50%);z-index:3;transition:background .3s,border-color .3s}
.fb-arrow svg{stroke:#fff}
.fb-arrow:hover{background:#fff;border-color:#fff}
.fb-arrow:hover svg{stroke:var(--ink)}
.fb-prev{left:0}.fb-next{right:0}
.fb-dots{display:flex;gap:12px;justify-content:center;margin-top:30px}
.fb-dots button{width:30px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.fb-dots button i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.fb-dots button.on i{animation:progress var(--fb-time,5s) linear forwards}
.fb-dots.paused button.on i{animation-play-state:paused}
@keyframes progress{to{transform:scaleX(1)}}

/* ================= checkout ================= */
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:var(--split);margin:0 auto;align-items:start}
.co-card{background:#fff;padding:36px 34px;box-shadow:0 20px 50px rgba(50,40,30,.09)}
.co-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.co-title h3{font-family:'Playfair Display SC',serif;font-style:italic;font-weight:400;font-size:var(--fs-h3);display:flex;gap:10px;align-items:center}
.co-title a{font-size:var(--fs-label);letter-spacing:.14em;color:var(--olive);text-transform:uppercase;font-weight:500;display:flex;gap:6px;align-items:center;white-space:nowrap}
.items{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.item{border:1px solid var(--line);padding:16px;display:grid;grid-template-columns:64px 1fr auto;gap:14px;transition:border-color .3s;animation:fadeUp .45s var(--ease)}
.item:hover{border-color:var(--olive)}
.item .ph{width:64px;height:64px}
.item h4{font-size:var(--fs-small);font-weight:600;line-height:1.4}
.item .meta{font-size:var(--fs-small);color:var(--text);margin-top:3px}
.item .note{font-size:var(--fs-small);color:var(--olive);margin-top:6px;display:flex;gap:5px;align-items:center}
.item .price-tag{font-size:var(--fs-small);font-weight:600;white-space:nowrap}
.item-ctrl{grid-column:2/4;display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.qty{display:flex;border:1px solid var(--field)}
.qty button{width:30px;height:30px;font-size:var(--fs-body);transition:background .2s}
.qty button:hover{background:var(--sage)}
.qty span{width:34px;height:30px;font-size:var(--fs-small);display:flex;align-items:center;justify-content:center;border-left:1px solid var(--field);border-right:1px solid var(--field);font-weight:600}
.remove{font-size:var(--fs-small);text-decoration:underline;display:flex;gap:5px;align-items:center}
.empty{text-align:center;padding:40px 16px;color:var(--text);font-size:var(--fs-body);border:1px dashed var(--field)}
.empty .btn{margin-top:18px}
.promo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.promo input{min-width:0;height:44px;border:1px solid var(--field);padding:0 14px;font-size:var(--fs-small)}
.promo input:focus{outline:none;border-color:var(--olive)}
.promo button{height:44px;padding:0 20px;border:1px solid var(--ink);font-size:var(--fs-label);letter-spacing:.16em;transition:all .3s}
.promo button:hover{background:var(--ink);color:#fff}
.promo-msg{font-size:var(--fs-small);margin-top:6px;min-height:16px;color:var(--olive-dark)}
.md-summary{background:var(--beige);border:1px solid #e3d8cf;padding:18px 20px;margin-top:8px}
.sum-row{display:flex;justify-content:space-between;font-size:var(--fs-small);color:var(--text);padding:6px 0}
.sum-row b{color:var(--ink);font-weight:600}
.sum-row .green{color:var(--olive);font-weight:600}
.sum-total{border-top:1px solid #d9cdc2;margin-top:8px;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--fs-lead);font-weight:600}
.sum-total span:last-child{color:var(--olive);white-space:nowrap}
.sum-alt{display:flex;justify-content:space-between;font-size:var(--fs-small);color:var(--text);margin-top:6px}
.sum-info{font-size:var(--fs-small);color:var(--olive-dark);margin-top:10px}
.ship-bar{height:4px;background:#e2d6cb;margin-top:8px;overflow:hidden}
.ship-bar i{display:block;height:100%;background:var(--olive);transition:width .8s var(--ease)}
.co-back{display:flex;justify-content:center;gap:6px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-label);letter-spacing:.14em;color:var(--olive);text-transform:uppercase;font-weight:500;text-decoration:underline}
.co-sec{font-size:var(--fs-label);letter-spacing:.16em;color:var(--olive);text-transform:uppercase;font-weight:500;margin-top:24px}
.co-sec.rule{border-top:1px solid var(--line);margin-top:30px;padding-top:16px}
.pay{display:block;background:var(--beige);border:1px solid #e3d8cf;padding:16px 18px;margin-top:12px;cursor:pointer;transition:border-color .3s,background .3s}
.pay:has(input:checked){border-color:var(--olive);background:#efe5dc}
.pay-head{display:flex;gap:12px;align-items:center;font-size:var(--fs-body);font-weight:500}
.pay input{accent-color:var(--olive);width:16px;height:16px}
.pay p{font-size:var(--fs-small);color:var(--text);margin:6px 0 0 28px;line-height:1.55}
.co-card .btn{margin-top:36px}
.secure{font-size:var(--fs-small);text-align:center;margin-top:14px;color:var(--text);display:flex;gap:6px;justify-content:center;align-items:center}

/* ================= footer ================= */
.footer{padding:64px 0 24px;text-align:center;background:var(--cream);border-top:1px solid var(--line)}
.footer .logo{width:72px;height:72px;margin:0 auto}
.footer .about{max-width:760px;margin:20px auto 0;font-size:var(--fs-lead);color:var(--text);line-height:1.65}
.socials{display:flex;justify-content:center;gap:18px;margin-top:18px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease)}
.socials a:hover{background:var(--olive);border-color:var(--olive);transform:translateY(-4px)}
.socials a:hover svg{fill:#fff;stroke:#fff}
.socials a:hover svg.ig{fill:none;stroke:#fff}
.socials a:hover svg.ig .dot{fill:#fff;stroke:none}
.contacts{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin-top:24px;font-size:var(--fs-body);color:var(--text)}
.contacts a{display:flex;gap:7px;align-items:center;transition:color .25s}
.contacts a:hover{color:var(--olive)}
.contacts .sep{color:#bbb}
.footer hr{border:none;border-top:1px solid var(--line);max-width:var(--max);margin:28px auto 20px}
.copy{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}

/* ================= floating, toast, modal ================= */
.wa-float{position:fixed;right:28px;bottom:28px;width:60px;height:60px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:60;transition:transform .3s var(--ease)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa);animation:pulse 2.6s ease-out infinite;z-index:-1}
.wa-float:hover{transform:scale(1.08)}
@keyframes pulse{from{transform:scale(1);opacity:.55}to{transform:scale(1.7);opacity:0}}
.fly{position:fixed;z-index:120;width:16px;height:16px;border-radius:50%;background:var(--olive);box-shadow:0 0 0 4px rgba(129,140,102,.25);pointer-events:none;transition:transform .85s cubic-bezier(.5,-.35,.65,1),opacity .85s}
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,30px);background:var(--ink);color:#fff;font-size:var(--fs-small);letter-spacing:.04em;padding:14px 22px;opacity:0;pointer-events:none;transition:all .4s var(--ease);z-index:90;display:flex;gap:14px;align-items:center;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:var(--olive-light);text-decoration:underline;white-space:nowrap}
.modal{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;background:rgba(20,20,18,.5);padding:20px}
.modal.show{display:flex;animation:fadeUp .35s var(--ease)}
.modal-box{background:var(--cream);max-width:440px;width:100%;padding:44px 36px;text-align:center}
.modal-box img{width:72px;height:72px;margin:0 auto 18px}
.modal-box h3{font-family:'Playfair Display SC',serif;font-style:italic;font-weight:400;font-size:var(--fs-h3)}
.modal-box p{font-size:var(--fs-body);color:var(--text);margin-top:14px}
.modal-box .btn{margin-top:26px}

/* ================= responsive ================= */
@media (max-width:1560px){.nav a{font-size:11px;letter-spacing:.12em}}
@media (max-width:1400px){.header{--nav-gap:18px}}
@media (max-width:1300px){.header{--nav-gap:16px}.nav a{font-size:10.5px;letter-spacing:.08em}}
@media (max-width:1180px){.cols-4{--cols:2}}
@media (max-width:1180px){
  .nav-left,.nav-right{display:none}
  .burger,.mobile-cart{display:flex}
  .header .wrap{padding:0 20px}
  .header .wrap{height:72px}
}
@media (max-width:960px){
  .cols-3{--cols:2}
  .split,.co-grid{grid-template-columns:minmax(0,520px);justify-content:center;gap:44px}
  .split.rev .media{order:0}
  .fb-slide{padding:56px 60px 6px}
  .fb-box{padding:74px 32px 36px}
  .date-row{grid-template-columns:1fr;min-height:0}
  .date-row .media{min-height:0;aspect-ratio:16/10}
  .date-row.alt .media{order:0}
  .date-text{padding:52px 32px 60px}
}
@media (max-width:620px){
  :root{--card:minmax(0,340px);--fs-lead:15px;--fs-h4:20px;--fs-num:34px}
  .grid{--cols:1!important}
  .wrap{padding:0 16px}
  .topbar{font-size:10px;letter-spacing:.08em}
  .topbar a{display:inline-block;margin:4px 0 0 6px}
  .hero-ctas .btn{width:100%}
  .hero-logo{width:68px;height:68px}
  .tiles{grid-template-columns:1fr}
  .promise-grid{grid-template-columns:1fr 1fr}
  .promise-grid .feat:nth-child(3)::before{display:none}
  .promise-grid .feat{padding:10px 8px}
  .pillars,.perks,.row2{grid-template-columns:1fr}
  .row2{gap:0}
  .farm{display:block;min-height:0;padding:0 0 40px;background:#dfe5cf}
  .farm-bg{position:relative;top:auto;bottom:auto;height:auto;aspect-ratio:16/10;transform:none!important}
  .farm-bg img{object-position:72% center}
  .farm::after{display:none}
  .farm-card{margin-top:-48px;padding:34px 26px}
  .form-card,.co-card{padding:30px 22px}
  .fb-slide{padding:52px 4px 6px}
  .fb-box{padding:66px 20px 30px;min-height:0;border-radius:22px}
  .fb-avatar{width:84px;height:84px;top:-42px;font-size:34px}
  .fb-arrow{width:40px;height:40px;top:auto;bottom:-62px;transform:none}
  .fb-prev{left:calc(50% - 120px)}.fb-next{right:calc(50% - 120px)}
  .contacts{flex-direction:column;align-items:center}
  .contacts .sep{display:none}
  .wa-float{right:16px;bottom:16px;width:54px;height:54px}
  .marquee span{font-size:17px;gap:36px;padding:0 18px}
  .date-text{padding:40px 20px 48px}
  .d-br{display:none}
  .date-desc{font-size:var(--fs-body)}
}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.h-up{opacity:1;transform:none}
  .wipe{clip-path:none}.wipe img{transform:none}
  .mask>span{transform:none}
  .orn::before,.orn::after{width:48px}.orn i{transform:rotate(45deg)}
  .date-title{opacity:1;letter-spacing:.08em}.date-rule{width:64px}
  .loader,.particles,.scroll-cue{display:none}
  .shimmer{color:#fff;background:none}
}