/* ========================================================================== Kleenify — design system Palette is drawn from the bottle itself: the olive of the logo disc, the gold of the collar, the off-white of the label. ========================================================================== */ :root{ --brand:#343e25; /* logo disc olive */ --emerald-900:#0b2318; --emerald-800:#102e20; --emerald-700:#17442f; --emerald-600:#1e5a3d; --emerald-400:#4b8a68; --gold:#c2a15c; /* fills, borders, and text on dark only (6.7:1 there) */ --gold-lt:#e4cf9c; /* gold text on dark surfaces — 10.8:1 */ --gold-dk:#9a7d3f; --gold-text:#7d642f; /* gold text on light surfaces — 5.3:1 on cream, 4.8:1 on sand */ --cream:#faf7f1; --sand:#f2ece0; --sand-dk:#e6ddcb; --ink:#16211a; --ink-soft:#4a564d; --ink-mute:#616e66; /* was #7c8880 — only 3.45:1 on cream, failed AA */ --paper:#fdfcf9; --line:rgba(22,33,26,.10); --line-lt:rgba(255,255,255,.14); --glass:rgba(253,252,249,.72); --glass-dk:rgba(11,35,24,.55); --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1); --wrap:1440px; --pad:clamp(18px,3.2vw,48px); --r-lg:28px; --r-md:18px; --r-sm:12px; --shadow-sm:0 2px 10px rgba(16,46,32,.06); --shadow-md:0 18px 50px -18px rgba(16,46,32,.28); --shadow-lg:0 50px 120px -40px rgba(11,35,24,.45); --nav-h:76px; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0} ul,ol{padding:0;list-style:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} img,picture,svg,canvas{display:block;max-width:100%} /* overlays below set their own `display`, which would otherwise beat the `hidden` attribute and leave invisible full-screen layers eating clicks */ [hidden]{display:none !important} a{color:inherit;text-decoration:none} :where(svg){fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} html{ scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px); /* Cormorant Garamond ships old-style figures by default: 4, 3, 7 and 9 sit below the baseline while 6 and 8 rise above it, so "4.8" reads as a small 4 next to a large 8. Lining figures give every digit the same cap height. Inherited, so this fixes prices, cart totals, the year seal and the step numbers in one place. Jost already uses lining figures — no effect there. */ font-variant-numeric:lining-nums; } body{ font-family:var(--sans); font-weight:300; font-size:clamp(15px,.42vw + 14px,16.5px); line-height:1.65; color:var(--ink); background:var(--cream); overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.is-locked{overflow:hidden} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:fixed;top:-100px;left:20px;z-index:200;background:var(--emerald-800);color:#fff;padding:12px 20px;border-radius:0 0 12px 12px;transition:top .25s} .skip-link:focus-visible{top:0} :focus-visible{outline:2px solid var(--emerald-600);outline-offset:3px;border-radius:4px} .wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto} /* ---------- type ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:11.5px;letter-spacing:.22em;text-transform:uppercase; font-weight:500;color:var(--emerald-600);margin-bottom:18px; } .eyebrow__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(194,161,92,.18)} .eyebrow--light{color:var(--gold-lt)} .sec-title{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,5.2vw,62px); line-height:1.06; letter-spacing:-.015em; } .sec-title em{font-style:italic;color:var(--emerald-600)} .sec-title--light{color:var(--paper)} .sec-title--light em{color:var(--gold-lt)} .sec-lead{max-width:56ch;margin-top:20px;color:var(--ink-soft);font-size:1.02rem} .sec-lead--light{color:rgba(250,247,241,.72)} .micro{font-size:12.5px;color:var(--ink-mute);margin-top:14px} .micro--center{text-align:center} .section{padding:clamp(72px,10vw,140px) 0;position:relative} .section--dark{background:var(--emerald-900);color:var(--paper)} .section--dark p{color:rgba(250,247,241,.74)} .sec-head{margin-bottom:clamp(40px,6vw,68px);max-width:760px} .sec-head--center{margin-inline:auto;text-align:center} .sec-head--center .sec-lead{margin-inline:auto} /* ---------- buttons ---------- */ .btn{ --btn-bg:var(--emerald-800); --btn-fg:var(--cream); position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 30px;border-radius:100px; font-size:13.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase; background:var(--btn-bg);color:var(--btn-fg); overflow:hidden;isolation:isolate; transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),color .35s; will-change:transform; } .btn svg{width:17px;height:17px;transition:transform .45s var(--ease-out)} .btn::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(120deg,var(--emerald-600),var(--emerald-400)); transform:translateY(101%);transition:transform .55s var(--ease-out); } .btn:hover::before{transform:translateY(0)} .btn:hover{box-shadow:var(--shadow-md)} .btn:hover svg{transform:translateX(4px)} .btn:active{transform:scale(.97)} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border:1px solid rgba(22,33,26,.2)} .btn--ghost::before{background:var(--emerald-800)} .btn--ghost:hover{--btn-fg:var(--cream);border-color:transparent} .btn--line{--btn-bg:transparent;--btn-fg:var(--ink);border:1px solid var(--line)} .btn--line::before{background:var(--ink)} .btn--line:hover{--btn-fg:var(--cream);border-color:transparent} .btn--gold{--btn-bg:linear-gradient(120deg,var(--gold-dk),var(--gold) 45%,var(--gold-lt));--btn-fg:#22200f} .btn--gold::before{background:linear-gradient(120deg,var(--gold-lt),var(--gold))} .btn--gold:hover{--btn-fg:#1a1808} .btn--sm{padding:12px 22px;font-size:12px} .btn--block{width:100%} .icon-btn{ position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%; color:var(--ink);transition:background .3s,color .3s,transform .3s var(--spring); } .icon-btn svg{width:20px;height:20px} .icon-btn:hover{background:rgba(22,33,26,.06);transform:translateY(-2px)} .cart-count{ position:absolute;top:2px;right:0;min-width:19px;height:19px;padding:0 5px; display:grid;place-items:center;border-radius:100px; background:var(--emerald-700);color:#fff;font-size:10.5px;font-weight:500;line-height:1; transition:transform .4s var(--spring),opacity .3s; } .cart-count[data-empty="true"]{opacity:0;transform:scale(.4)} .cart-count.is-bump{animation:bump .5s var(--spring)} @keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}} .chip-btn{ padding:8px 16px;border-radius:100px;border:1px solid var(--line); font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft); transition:.3s; } .chip-btn:hover,.chip-btn[aria-pressed="true"]{background:var(--emerald-800);color:var(--cream);border-color:transparent} /* ---------- loader ---------- */ .loader{ position:fixed;inset:0;z-index:300;display:grid;place-items:center; background:var(--emerald-900); transition:opacity .8s var(--ease),visibility .8s; } .loader.is-done{opacity:0;visibility:hidden} .loader__inner{display:grid;justify-items:center;gap:6px;position:relative} .loader__drop{width:44px;height:62px;color:var(--cream);animation:dropFall 1.8s var(--ease) infinite} .loader__drop-path{fill:var(--cream);stroke:none} @keyframes dropFall{ 0%{transform:translateY(-16px) scaleY(1.1);opacity:0} 35%{opacity:1} 60%{transform:translateY(6px) scaleY(.9);opacity:1} 75%,100%{transform:translateY(6px) scale(.2);opacity:0} } .loader__ripples{position:relative;height:26px;width:120px} .loader__ripples i{ position:absolute;left:50%;top:0;translate:-50% 0; width:70px;height:20px;border:1px solid rgba(250,247,241,.5);border-radius:50%; animation:ripple 1.8s var(--ease-out) infinite;opacity:0; } .loader__ripples i:nth-child(2){animation-delay:.16s} .loader__ripples i:nth-child(3){animation-delay:.32s} @keyframes ripple{ 0%,55%{transform:scale(.3);opacity:0} 70%{opacity:.8} 100%{transform:scale(1.8);opacity:0} } .loader__word{ font-family:var(--serif);font-size:30px;letter-spacing:.34em;color:var(--cream); text-indent:.34em;margin-top:4px; } .loader__bar{width:130px;height:1px;background:rgba(250,247,241,.2);margin-top:16px;overflow:hidden} .loader__bar span{display:block;height:100%;width:0;background:var(--gold-lt);transition:width .3s linear} /* ---------- nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:120;padding:14px var(--pad);transition:padding .5s var(--ease)} .nav__shell{ width:min(100%,var(--wrap));margin-inline:auto; display:flex;align-items:center;gap:24px; height:var(--nav-h);padding:0 12px 0 18px;border-radius:100px; background:transparent;border:1px solid transparent; transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s; } .nav.is-stuck{padding-top:10px} .nav.is-stuck .nav__shell{ background:var(--glass); border-color:rgba(22,33,26,.07); box-shadow:0 10px 40px -18px rgba(16,46,32,.3); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); } .nav__logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .nav__logo img{width:38px;height:auto} .nav__logo span{ font-family:var(--serif);font-size:23px;font-weight:500;letter-spacing:.06em; } .nav__links{display:flex;align-items:center;gap:4px;margin-left:auto;position:relative} .nav__link{ position:relative;padding:9px 15px;border-radius:100px; font-size:13.5px;letter-spacing:.03em;color:var(--ink-soft); transition:color .3s; } .nav__link:hover,.nav__link.is-active{color:var(--ink)} .nav__link.is-active::after{ content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0; width:4px;height:4px;border-radius:50%;background:var(--gold); } .nav__tools{display:flex;align-items:center;gap:2px;margin-left:8px} /* the nav floats above the open menu, so flip it light or the icons vanish */ .nav.is-menu-open .nav__shell{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} .nav.is-menu-open .nav__logo span, .nav.is-menu-open .icon-btn{color:var(--cream)} .nav.is-menu-open .icon-btn:hover{background:rgba(250,247,241,.14)} .nav.is-menu-open .burger span{background:var(--cream)} .nav.is-menu-open .cart-count{background:var(--gold);color:#22200f} /* flex, not grid: auto grid rows stretch to the 42px box and the two bars end up ~23px apart, so the "close" transform draws a chevron instead of an X */ .burger{ display:none;width:42px;height:42px; flex-direction:column;align-items:center;justify-content:center;gap:5px; } .burger span{display:block;width:19px;height:1.5px;background:var(--ink);transition:.4s var(--ease-out)} .burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)} /* ---------- mobile menu ---------- */ .mobile-menu{ position:fixed;inset:0;z-index:115;background:var(--emerald-900); display:flex;flex-direction:column;justify-content:center;padding:var(--pad); clip-path:circle(0% at calc(100% - 60px) 46px); transition:clip-path .8s var(--ease-out); } .mobile-menu.is-open{clip-path:circle(150% at calc(100% - 60px) 46px)} .mobile-menu__glow{position:absolute;inset:auto -20% -30% -20%;height:70%;background:radial-gradient(ellipse at 50% 100%,rgba(75,138,104,.35),transparent 70%)} .mobile-menu__links{display:grid;gap:6px;position:relative} .mobile-menu__links a{ font-family:var(--serif);font-size:clamp(34px,10vw,54px);color:var(--cream); display:block;padding:6px 0; opacity:0;transform:translateY(24px); transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .3s; } .mobile-menu.is-open .mobile-menu__links a{opacity:1;transform:none} .mobile-menu__links a:nth-child(1){transition-delay:.16s} .mobile-menu__links a:nth-child(2){transition-delay:.22s} .mobile-menu__links a:nth-child(3){transition-delay:.28s} .mobile-menu__links a:nth-child(4){transition-delay:.34s} .mobile-menu__links a:nth-child(5){transition-delay:.4s} .mobile-menu__links a:nth-child(6){transition-delay:.46s} .mobile-menu__links a:hover{color:var(--gold-lt)} .mobile-menu__foot{position:relative;margin-top:48px;display:grid;gap:6px;color:rgba(250,247,241,.74);font-size:14.5px} /* ========================================================================== HERO ========================================================================== */ .hero{ position:relative;min-height:100svh;display:flex;align-items:center; padding:calc(var(--nav-h) + 40px) 0 60px; overflow:hidden; background: radial-gradient(120% 90% at 78% 12%,#ffffff 0%,transparent 55%), radial-gradient(90% 70% at 10% 90%,rgba(75,138,104,.14) 0%,transparent 60%), linear-gradient(168deg,#fdfcf9 0%,var(--sand) 58%,#e8e2d4 100%); } .hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1} .hero__rays{position:absolute;inset:0;overflow:hidden;z-index:0;opacity:.55} .hero__rays i{ position:absolute;top:-30%;width:34vw;height:160%; background:linear-gradient(180deg,rgba(255,255,255,.9),transparent 70%); filter:blur(38px);transform-origin:top center; } .hero__rays i:nth-child(1){left:52%;rotate:14deg;animation:rayDrift 14s var(--ease) infinite alternate} .hero__rays i:nth-child(2){left:70%;rotate:-8deg;opacity:.6;animation:rayDrift 18s var(--ease) infinite alternate-reverse} .hero__rays i:nth-child(3){left:34%;rotate:22deg;opacity:.4;animation:rayDrift 22s var(--ease) infinite alternate} @keyframes rayDrift{from{transform:translateX(-3vw) scaleY(.95)}to{transform:translateX(3vw) scaleY(1.05)}} .hero__orb{position:absolute;border-radius:50%;filter:blur(60px);z-index:0} .hero__orb--a{width:38vw;height:38vw;right:-6vw;top:6vh;background:radial-gradient(circle,rgba(194,161,92,.22),transparent 68%)} .hero__orb--b{width:30vw;height:30vw;left:-8vw;bottom:-8vh;background:radial-gradient(circle,rgba(30,90,61,.16),transparent 68%)} .hero__grid{ position:relative;z-index:3; width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto; display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,60px);align-items:center; } .hero__title{ font-family:var(--serif);font-weight:300; font-size:clamp(52px,8.6vw,116px);line-height:.92;letter-spacing:-.03em; margin:6px 0 24px; } .hero__title .line{display:block} .hero__title .line--serif{ font-style:italic; background:linear-gradient(100deg,var(--emerald-700),var(--emerald-400) 45%,var(--gold-dk)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero__sub{max-width:44ch;font-size:clamp(15.5px,1.2vw,18px);color:var(--ink-soft)} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .hero__stats{display:flex;gap:clamp(20px,3vw,44px);margin-top:clamp(36px,5vw,58px);flex-wrap:wrap} .hero__stats dt{font-family:var(--serif);font-size:clamp(28px,3vw,38px);line-height:1;color:var(--emerald-700)} .hero__stats dd{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-top:8px} /* --- the 3D stage --- */ .hero__stage{position:relative;display:grid;place-items:center} .stage{ position:relative;width:100%;height:min(74vh,660px);perspective:1400px; /* Slot geometry — overridden per breakpoint below. The x values are percentages of the bottle box's own width, so the two sit apart with a clear gap rather than overlapping. */ --lead-x:-35%; --sup-x:-130%; --sup-scale:.62; } .stage__glow{ position:absolute;left:50%;top:50%;translate:-50% -50%; width:74%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.5) 38%,transparent 68%); filter:blur(20px); } /* Both bottles render at the SAME height and are told apart by transform only. The support slot scales *down* from that shared size — nothing is ever scaled up, so labels stay sharp in either slot, and swapping is a pure compositor animation with no layout work. */ .stage__bottle{ position:absolute;left:50%;top:50%; transform-style:preserve-3d; will-change:transform,filter,opacity; transition: transform 1.15s var(--ease-out), filter .9s var(--ease), opacity .9s var(--ease); } .stage__bottle .bottle3d{height:min(66vh,580px)} .stage__bottle.is-lead{ transform:translate(var(--lead-x),-50%) scale(1); z-index:2;opacity:1;filter:none; } /* -31% rather than -50% so the shrunken bottle's base still lines up with the lead's: half of the (1 − scale) height difference, added back downward. */ .stage__bottle.is-support{ transform:translate(var(--sup-x),-31%) scale(var(--sup-scale)); z-index:1;opacity:.92;filter:saturate(.94) brightness(1.02); } .stage__bottle.is-support .bottle3d{cursor:pointer} /* --- reusable 3D bottle --- */ .bottle3d{ /* .285 is the widest of the four bottle renders, so every face fills the box's full height with object-fit:contain and none get letterboxed */ position:relative;height:420px;aspect-ratio:var(--ar,.285); transform-style:preserve-3d; cursor:grab;touch-action:pan-y; --ry:0deg;--rx:0deg;--lift:0px; } .bottle3d:active{cursor:grabbing} .bottle3d__inner{ position:relative;width:100%;height:100%; transform-style:preserve-3d; transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .12s linear; } .bottle3d.is-eased .bottle3d__inner{transition:transform .9s var(--ease-out)} .bottle3d__face{ position:absolute;inset:0;display:grid;place-items:center; backface-visibility:hidden;-webkit-backface-visibility:hidden; } /* contain (not height:100%) so a face can never distort or overflow its box */ .bottle3d__face img{ width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 42px 34px rgba(16,40,28,.28)); } .bottle3d__face--back{transform:rotateY(180deg)} .bottle3d__sheen{ position:absolute;inset:6% 12%;border-radius:50% / 12%;pointer-events:none; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 47%,transparent 62%); opacity:var(--sheen,.35); transform:translateX(var(--sheen-x,0)); transition:opacity .4s; mix-blend-mode:screen; } /* ---------- marquee ---------- */ .marquee{ background:var(--emerald-900);color:rgba(250,247,241,.85); padding:16px 0;overflow:hidden;white-space:nowrap; } .marquee__track{display:inline-flex;align-items:center;gap:28px;animation:slide 34s linear infinite} .marquee span{font-size:12px;letter-spacing:.24em;text-transform:uppercase} .marquee i{color:var(--gold);font-style:normal;font-size:9px} @keyframes slide{to{transform:translateX(-50%)}} /* ========================================================================== PRODUCTS ========================================================================== */ .products{background:linear-gradient(180deg,var(--cream),var(--paper) 60%)} .tabs{position:relative;display:inline-flex;gap:2px;padding:5px;border-radius:100px;background:var(--sand);margin-bottom:44px} .tab{ position:relative;z-index:2;padding:10px 26px;border-radius:100px; font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft); transition:color .35s; } .tab.is-active{color:var(--cream)} .tabs__pill{ position:absolute;z-index:1;top:5px;left:5px;height:calc(100% - 10px); border-radius:100px;background:var(--emerald-800); transition:transform .55s var(--ease-out),width .55s var(--ease-out); } .bento{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)} .pcard{ position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,30px); align-items:center;padding:clamp(22px,2.6vw,36px); border-radius:var(--r-lg);overflow:hidden; background:var(--paper);border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .6s; } .pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent} .pcard.is-hidden{display:none} .pcard__aura{ position:absolute;inset:-40% -10% auto -10%;height:120%; background:radial-gradient(60% 55% at 22% 40%,rgba(75,138,104,.16),transparent 70%); opacity:0;transition:opacity .7s var(--ease);pointer-events:none; } .pcard--keratin .pcard__aura{background:radial-gradient(60% 55% at 22% 40%,rgba(194,161,92,.2),transparent 70%)} .pcard:hover .pcard__aura{opacity:1} .pcard__media{position:relative;z-index:2;display:grid;place-items:center;perspective:1100px;padding:6px 0} .pcard__media .bottle3d{height:clamp(230px,26vw,320px)} .pcard__body{position:relative;z-index:2;min-width:0} .pcard__top h3{font-family:var(--serif);font-size:clamp(25px,2.6vw,34px);font-weight:400;line-height:1.1} .pcard__claim{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--emerald-600);margin-top:8px} .pcard__desc{margin-top:16px;color:var(--ink-soft);font-size:14.6px} .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px} .chips li{ padding:6px 13px;border-radius:100px;background:var(--sand); font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft); } .pcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)} .pcard__actions{display:flex;gap:8px;flex-wrap:wrap} .price{font-family:var(--serif);font-size:clamp(28px,3vw,36px);line-height:1;display:flex;align-items:baseline;gap:6px} .price__cur{font-size:.5em;letter-spacing:.06em;color:var(--ink-mute);font-family:var(--sans)} .price small{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)} .price s{font-family:var(--sans);font-size:14px;color:var(--ink-mute);opacity:.7;margin-left:6px} .price--light{color:var(--paper)} .price--light .price__cur{color:rgba(250,247,241,.76)} .price--light s{color:rgba(250,247,241,.74)} .price--lg{font-size:42px;margin:16px 0 18px} .bundle{ grid-column:span 2;position:relative;overflow:hidden; display:grid;gap:14px;align-content:center; padding:clamp(30px,4vw,52px);border-radius:var(--r-lg); background: radial-gradient(90% 140% at 88% 10%,rgba(194,161,92,.24),transparent 60%), linear-gradient(120deg,var(--emerald-900),var(--emerald-700)); color:var(--paper); } .bundle__tag{ justify-self:start;padding:7px 15px;border-radius:100px; background:rgba(228,207,156,.16);border:1px solid rgba(228,207,156,.35); font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt); } .bundle h3{font-family:var(--serif);font-size:clamp(28px,3.4vw,42px);font-weight:300} /* direct child only — must not capture .price inside .bundle__row */ .bundle>p{max-width:52ch;color:rgba(250,247,241,.75);font-size:15px} .bundle__row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:8px} .bundle__shine{ position:absolute;top:-60%;left:-30%;width:40%;height:220%;rotate:18deg; background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent); animation:shineSweep 7s var(--ease) infinite;pointer-events:none; } @keyframes shineSweep{0%,72%{transform:translateX(0)}100%{transform:translateX(420%)}} /* ========================================================================== INGREDIENTS ========================================================================== */ .ingredients{background: radial-gradient(80% 60% at 80% 0%,rgba(30,90,61,.35),transparent 60%), var(--emerald-900); } .ing-switch{position:relative;display:inline-flex;padding:5px;border-radius:100px;background:rgba(250,247,241,.08);border:1px solid var(--line-lt);margin:0 auto 44px;left:50%;translate:-50% 0} .ing-switch__btn{position:relative;z-index:2;padding:10px 26px;border-radius:100px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(250,247,241,.76);transition:color .35s} .ing-switch__btn.is-active{color:var(--emerald-900)} .ing-switch__pill{position:absolute;z-index:1;top:5px;left:5px;height:calc(100% - 10px);border-radius:100px;background:var(--gold-lt);transition:transform .55s var(--ease-out),width .55s var(--ease-out)} .ing-rail{ display:flex;gap:18px;overflow-x:auto;padding:4px 4px 24px; scroll-snap-type:x mandatory;scrollbar-width:thin; scrollbar-color:rgba(228,207,156,.4) transparent; } .ing-rail::-webkit-scrollbar{height:4px} .ing-rail::-webkit-scrollbar-thumb{background:rgba(228,207,156,.4);border-radius:10px} .ing-set{display:flex;gap:18px} .ing-set[hidden]{display:none} .ing-card{ flex:0 0 clamp(230px,25vw,282px);scroll-snap-align:start; padding:28px 26px 30px;border-radius:var(--r-md); background:rgba(250,247,241,.05);border:1px solid var(--line-lt); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:transform .5s var(--ease-out),background .5s,border-color .5s; } .ing-card:hover{transform:translateY(-8px);background:rgba(250,247,241,.09);border-color:rgba(228,207,156,.4)} .ing-card__no{font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--gold-lt)} .ing-card h3{font-family:var(--serif);font-size:25px;font-weight:400;margin:12px 0 10px;color:var(--paper)} .ing-card p{font-size:14.5px;color:rgba(250,247,241,.78)} .benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;padding-top:48px;border-top:1px solid var(--line-lt)} .benefit{text-align:center;display:grid;justify-items:center;gap:4px} .benefit svg{width:38px;height:38px;color:var(--gold-lt);margin-bottom:10px} .benefit h4{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--paper)} .benefit p{font-size:13.5px;color:rgba(250,247,241,.74)} /* ========================================================================== HOW IT WORKS ========================================================================== */ .how{background:var(--paper)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,34px);position:relative} .steps::before{ content:"";position:absolute;top:38px;left:8%;right:8%;height:1px; background:repeating-linear-gradient(90deg,var(--sand-dk) 0 7px,transparent 7px 15px); } .step{position:relative;text-align:center;display:grid;justify-items:center} .step__ring{ width:76px;height:76px;border-radius:50%;display:grid;place-items:center; background:var(--paper);border:1px solid var(--sand-dk); box-shadow:0 0 0 8px var(--paper); transition:transform .5s var(--spring),border-color .5s,background .5s; } .step__ring svg{width:30px;height:30px;color:var(--emerald-600);transition:color .4s} .step:hover .step__ring{transform:translateY(-6px) scale(1.06);border-color:var(--gold);background:var(--emerald-800)} .step:hover .step__ring svg{color:var(--gold-lt)} .step__no{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);margin-top:22px} .step h3{font-family:var(--serif);font-size:24px;font-weight:400;margin:8px 0 8px} .step p{font-size:14px;color:var(--ink-soft);max-width:26ch} /* ========================================================================== RESULTS / COMPARE ========================================================================== */ .results{background:linear-gradient(180deg,var(--paper),var(--sand))} .results__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center} .results__list{display:grid;gap:16px;margin-top:32px} .results__list li{display:grid;grid-template-columns:110px 1fr 56px;align-items:center;gap:14px;font-size:13.5px} .results__list strong{font-weight:400;color:var(--ink-soft)} .results__list em{font-style:normal;font-family:var(--serif);font-size:19px;color:var(--emerald-700);text-align:right} .bar{height:4px;border-radius:100px;background:var(--sand-dk);overflow:hidden} .bar i{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--emerald-600),var(--gold));transition:width 1.5s var(--ease-out)} .is-inview .bar i{width:var(--v)} .compare{ position:relative;aspect-ratio:4/5;max-height:600px;border-radius:var(--r-lg);overflow:hidden; background:linear-gradient(160deg,#f7f3ea,#e9e2d3);border:1px solid var(--line); box-shadow:var(--shadow-md);cursor:ew-resize;user-select:none; } .compare__pane{position:absolute;inset:0} .compare__pane--after{clip-path:inset(0 0 0 var(--split,50%));background:linear-gradient(160deg,#fffdf8,#f3ede0)} .compare .strands{width:100%;height:100%} .compare__label{ position:absolute;bottom:18px;padding:7px 15px;border-radius:100px; font-size:11px;letter-spacing:.16em;text-transform:uppercase; background:rgba(253,252,249,.82);backdrop-filter:blur(8px);color:var(--ink-soft); } .compare__pane--before .compare__label{left:18px} .compare__pane--after .compare__label{right:18px;background:var(--emerald-800);color:var(--cream)} .compare__handle{ position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px; background:rgba(253,252,249,.9);translate:-50% 0;z-index:3; } .compare__handle span{ position:absolute;top:50%;left:50%;translate:-50% -50%; width:52px;height:52px;border-radius:50%; background:var(--paper);box-shadow:0 8px 26px rgba(16,46,32,.24); display:grid;place-items:center; } .compare__handle span::before,.compare__handle span::after{ content:"";position:absolute;width:0;height:0; border-block:5px solid transparent; } .compare__handle span::before{border-right:7px solid var(--emerald-700);left:12px} .compare__handle span::after{border-left:7px solid var(--emerald-700);right:12px} .shine-band{animation:bandDrift 6s var(--ease) infinite alternate} @keyframes bandDrift{from{transform:translateY(-24px)}to{transform:translateY(40px)}} /* ========================================================================== ABOUT ========================================================================== */ .about{overflow:hidden} .about__bg{ position:absolute;inset:0; background:radial-gradient(70% 60% at 18% 20%,rgba(30,90,61,.4),transparent 62%); } .about__grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center} .about__media{position:relative;display:grid;place-items:center;min-height:min(70vh,560px)} .about__card{ position:relative;width:min(60%,260px);padding:26px;border-radius:var(--r-lg); background:linear-gradient(160deg,rgba(250,247,241,.14),rgba(250,247,241,.04)); border:1px solid var(--line-lt);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); will-change:transform; } .about__card img{height:min(46vh,380px);width:auto;margin-inline:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.4))} .about__card--b{position:absolute;right:2%;bottom:4%;width:min(46%,196px);padding:18px} .about__card--b img{height:min(32vh,270px)} .about__seal{ position:absolute;left:0;top:8%;width:96px;height:96px;border-radius:50%; display:grid;place-items:center;text-align:center; border:1px solid rgba(228,207,156,.45);background:rgba(11,35,24,.6); font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt); backdrop-filter:blur(8px); } .about__seal b{font-family:var(--serif);font-size:20px;letter-spacing:.06em;display:block;margin-top:3px} .about__copy p{margin-top:16px;max-width:56ch} .about__copy .btn{margin-top:30px} /* ========================================================================== REVIEWS ========================================================================== */ .reviews{background:var(--cream)} /* The score, the stars and the count are three different kinds of text, so they get three treatments and a rule between the score and the meta — otherwise the 26px serif and the 14px sans just collide at mismatched baselines. The pill gives the group an edge to sit against. */ .rating-summary{ display:inline-flex;align-items:center;gap:13px;margin-top:26px; padding:11px 22px;border-radius:999px; background:var(--paper);border:1px solid var(--line); box-shadow:0 1px 2px rgba(22,33,26,.05); } .rating-summary .stars{font-size:17px;letter-spacing:.18em;line-height:1} .rating-summary strong{ font-family:var(--serif);font-size:30px;font-weight:500; line-height:1;letter-spacing:-.01em;color:var(--ink); } .rating-summary__meta{ padding-left:14px;border-left:1px solid var(--line); font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; line-height:1.45;color:var(--ink-mute); } .rating-summary__meta b{font-weight:600;font-size:14px;color:var(--ink)} /* Stars are graphics, not text: each review carries an sr-only "Rated N out of 5", so the 3:1 non-text threshold applies rather than 4.5:1. --gold-dk hits 3.8:1 on paper, which keeps them legible without going muddy brown. */ .stars{color:var(--gold-dk);letter-spacing:.14em;font-size:15px} .review-grid{columns:3;column-gap:clamp(18px,2.4vw,26px)} .review{ break-inside:avoid;margin-bottom:clamp(18px,2.4vw,26px); padding:30px 28px;border-radius:var(--r-md); background:var(--paper);border:1px solid var(--line); transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out); } .review:hover{transform:translateY(-7px);box-shadow:var(--shadow-md)} .review p{margin:14px 0 20px;font-size:15px;color:var(--ink-soft);font-style:italic;font-family:var(--serif);font-size:19px;line-height:1.5} .review footer{display:grid;gap:2px} .review b{font-weight:500;font-size:14px} .review span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)} /* ========================================================================== NEWSLETTER / CONTACT ========================================================================== */ .newsletter{background:var(--paper)} .news__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px)} .news__form{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;position:relative} .news__form input{ flex:1 1 260px;padding:16px 22px;border-radius:100px; background:var(--cream);border:1px solid var(--line); transition:border-color .3s,box-shadow .3s; } .news__form input:focus{outline:none;border-color:var(--emerald-600);box-shadow:0 0 0 4px rgba(30,90,61,.1)} .field-msg{flex-basis:100%;font-size:13px;min-height:20px;color:var(--emerald-600)} .field-msg.is-err{color:#b4443a} .news__contact{padding:clamp(28px,3vw,40px);border-radius:var(--r-lg);background:var(--cream);border:1px solid var(--line)} .news__contact h3{font-family:var(--serif);font-size:26px;font-weight:400;margin-bottom:20px} .contact-list{display:grid;gap:16px} .contact-list li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft)} .contact-list svg{width:19px;height:19px;color:var(--emerald-600);flex-shrink:0;margin-top:3px} .contact-list a:hover{color:var(--emerald-600)} .socials{display:flex;gap:10px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)} .socials a{ width:42px;height:42px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--line);color:var(--ink-soft); transition:.35s var(--ease-out); } .socials svg{width:19px;height:19px} .socials a:hover{background:var(--emerald-800);color:var(--cream);border-color:transparent;transform:translateY(-3px)} /* ========================================================================== FOOTER ========================================================================== */ .footer{background:var(--emerald-900);color:rgba(250,247,241,.72);padding:clamp(56px,7vw,84px) 0 28px} .footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,4vw,48px)} .nav__logo--foot{color:var(--paper)} .nav__logo--foot img{width:42px} .footer__brand p{margin-top:16px;max-width:34ch;font-size:14px} .footer__col{display:grid;gap:11px;align-content:start} .footer__col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:5px} .footer__col a{font-size:14px;transition:color .3s,transform .3s;width:fit-content} .footer__col a:hover{color:var(--paper);transform:translateX(3px)} .footer__bar{ display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line-lt); font-size:12.5px;color:rgba(250,247,241,.64); } /* ========================================================================== SEARCH ========================================================================== */ .search{position:fixed;inset:0;z-index:160;background:rgba(11,35,24,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:var(--pad);display:grid;align-content:start;opacity:0;transition:opacity .4s} .search.is-open{opacity:1} .search__close{position:absolute;top:24px;right:28px;font-size:34px;line-height:1;color:var(--cream);width:48px;height:48px} .search__inner{width:min(100%,720px);margin:min(18vh,140px) auto 0} .search input{ width:100%;padding:20px 6px;background:transparent;border:0;border-bottom:1px solid rgba(250,247,241,.3); font-family:var(--serif);font-size:clamp(26px,5vw,44px);color:var(--cream); } .search input::placeholder{color:rgba(250,247,241,.32)} .search input:focus{outline:none;border-bottom-color:var(--gold-lt)} .search__results{margin-top:28px;display:grid;gap:8px} .sresult{ display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:var(--r-sm); background:rgba(250,247,241,.05);border:1px solid var(--line-lt);color:var(--cream); cursor:pointer;text-align:left;width:100%;transition:.3s; } .sresult:hover{background:rgba(250,247,241,.11);transform:translateX(4px)} .sresult img{width:34px;height:56px;object-fit:contain} .sresult b{font-family:var(--serif);font-size:20px;font-weight:400;display:block} .sresult small{font-size:12px;color:rgba(250,247,241,.55)} .sresult span{margin-left:auto;font-size:14px;color:var(--gold-lt)} .search__empty{color:rgba(250,247,241,.5);font-size:14px;padding:10px 4px} /* ========================================================================== MODAL / DRAWER / CHECKOUT shared ========================================================================== */ .modal,.drawer,.checkout,.success{position:fixed;inset:0;z-index:170} .modal__scrim,.drawer__scrim,.checkout__scrim{ position:absolute;inset:0;background:rgba(11,35,24,.5); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;transition:opacity .5s var(--ease); } .is-open .modal__scrim,.is-open .drawer__scrim,.is-open .checkout__scrim{opacity:1} .modal__close{ position:absolute;top:16px;right:18px;z-index:6; width:42px;height:42px;border-radius:50%;font-size:26px;line-height:1; background:rgba(250,247,241,.9);color:var(--ink); display:grid;place-items:center;transition:.3s; } .modal__close:hover{background:var(--emerald-800);color:var(--cream);rotate:90deg} /* product modal */ /* Centred with transform alone — never combine the `translate` property with `transform`, they compose and the panel ends up shifted twice. */ .modal__panel{ position:absolute;left:50%;bottom:0; width:min(100% - 24px,1020px);max-height:94svh;overflow:auto; display:grid;grid-template-columns:.85fr 1.15fr; background:var(--paper);border-radius:var(--r-lg) var(--r-lg) 0 0; transform:translate(-50%,4%);opacity:0; transition:transform .6s var(--ease-out),opacity .5s; } .modal.is-open .modal__panel{opacity:1;transform:translate(-50%,0)} @media(min-width:900px){ .modal__panel{top:50%;bottom:auto;transform:translate(-50%,-46%);border-radius:var(--r-lg)} .modal.is-open .modal__panel{transform:translate(-50%,-50%)} } .modal__viewer{ position:relative;display:grid;place-items:center;padding:40px 20px 24px; background:radial-gradient(70% 60% at 50% 35%,#fff,var(--sand)); perspective:1200px; } .modal__glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 66%);filter:blur(16px)} .bottle3d--lg{height:min(46vh,420px)} .modal__viewer-tools{display:flex;gap:8px;margin-top:18px;position:relative;z-index:2} .modal__info{padding:clamp(26px,3vw,42px)} .modal__info h2{font-family:var(--serif);font-size:clamp(30px,3.4vw,42px);font-weight:400;line-height:1.06} .modal__desc{color:var(--ink-soft);font-size:15px;margin-bottom:26px} .field{margin-bottom:22px} .field--row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .field__label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:10px} .opt-row{display:flex;gap:8px;flex-wrap:wrap} .opt{ padding:11px 18px;border-radius:100px;border:1px solid var(--line); font-size:13px;color:var(--ink-soft);transition:.3s; } .opt small{display:block;font-size:11.5px;color:var(--ink-mute);letter-spacing:.08em} .opt.is-active{border-color:var(--emerald-700);background:var(--emerald-800);color:var(--cream)} .opt.is-active small{color:rgba(250,247,241,.7)} .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden} .qty button{width:42px;height:44px;font-size:17px;color:var(--ink-soft);transition:.25s} .qty button:hover{background:var(--sand);color:var(--ink)} .qty input{width:44px;height:44px;text-align:center;border:0;background:transparent;font-size:15px} .qty input:focus{outline:none} .stock{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-mute)} .stock i{width:7px;height:7px;border-radius:50%;background:#3f9c68;box-shadow:0 0 0 3px rgba(63,156,104,.18)} .modal__actions{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0} .modal__actions .btn{flex:1 1 170px} .acc{border-top:1px solid var(--line)} .acc details{border-bottom:1px solid var(--line)} .acc summary{ padding:16px 0;cursor:pointer;list-style:none; font-size:12.5px;letter-spacing:.12em;text-transform:uppercase; display:flex;align-items:center;justify-content:space-between; } .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"+";font-size:19px;color:var(--emerald-600);transition:transform .35s} .acc details[open] summary::after{transform:rotate(45deg)} .acc p{padding-bottom:18px;font-size:14px;color:var(--ink-soft)} /* cart drawer */ .drawer__panel{ position:absolute;top:0;right:0;bottom:0;width:min(100%,440px); display:flex;flex-direction:column;background:var(--paper); transform:translateX(100%);transition:transform .6s var(--ease-out); box-shadow:var(--shadow-lg); } .drawer.is-open .drawer__panel{transform:none} .drawer__head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--line)} .drawer__head h2{font-family:var(--serif);font-size:25px;font-weight:400} .drawer__head .modal__close{position:static;background:transparent} .drawer__body{flex:1;overflow:auto;padding:20px 26px} .drawer__foot{padding:22px 26px calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--cream)} .cart-empty{display:grid;justify-items:center;gap:14px;text-align:center;padding:56px 0;color:var(--ink-mute)} .cart-empty svg{width:46px;height:46px;opacity:.35} .cart-empty[hidden]{display:none} .cart-list{display:grid;gap:16px} .cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)} .cart-item:last-child{border-bottom:0} .cart-item__img{height:88px;display:grid;place-items:center;background:var(--sand);border-radius:var(--r-sm)} .cart-item__img img{height:76px;width:auto} .cart-item h4{font-family:var(--serif);font-size:19px;font-weight:400} .cart-item small{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)} /* .qty is inline-flex elsewhere; in a cart row it must break to its own line instead of flowing next to the inline size label */ .cart-item .qty{display:flex;width:fit-content;margin-top:8px;transform:scale(.85);transform-origin:left} .cart-item__right{display:grid;justify-items:end;gap:10px} .cart-item__price{font-family:var(--serif);font-size:19px} .cart-item__rm{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);transition:color .3s} .cart-item__rm:hover{color:#b4443a} .ship-note{ font-size:12.5px;color:var(--emerald-600);background:rgba(30,90,61,.07); padding:10px 14px;border-radius:var(--r-sm);margin-bottom:16px; } .totals{display:grid;gap:9px;margin-bottom:18px} .totals>div{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-soft)} .totals__grand{padding-top:11px;border-top:1px solid var(--line);color:var(--ink)} .totals__grand dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase} .totals__grand dd{font-family:var(--serif);font-size:25px} /* checkout */ .checkout__panel{ position:absolute;left:50%;bottom:0; width:min(100% - 20px,1000px);max-height:94svh;overflow:auto; display:grid;grid-template-columns:1.25fr .75fr; background:var(--paper);border-radius:var(--r-lg) var(--r-lg) 0 0; transform:translate(-50%,5%);opacity:0;transition:transform .6s var(--ease-out),opacity .5s; } .checkout.is-open .checkout__panel{opacity:1;transform:translate(-50%,0)} @media(min-width:900px){ .checkout__panel{top:50%;bottom:auto;transform:translate(-50%,-45%);border-radius:var(--r-lg)} .checkout.is-open .checkout__panel{transform:translate(-50%,-50%)} } .checkout__main{padding:clamp(26px,3vw,44px)} .crumbs{display:flex;gap:8px;margin-bottom:30px;flex-wrap:wrap} .crumbs li{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)} .crumbs li+li::before{content:"";width:18px;height:1px;background:var(--sand-dk)} .crumbs span{ width:25px;height:25px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--line);font-size:11.5px;transition:.4s; } .crumbs li.is-active{color:var(--ink)} .crumbs li.is-active span{background:var(--emerald-800);color:var(--cream);border-color:transparent} .crumbs li.is-done span{background:var(--gold);color:#22200f;border-color:transparent} .cstep{display:none} .cstep.is-active{display:block;animation:stepIn .5s var(--ease-out)} @keyframes stepIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .cstep h3{font-family:var(--serif);font-size:27px;font-weight:400;margin-bottom:22px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .input{margin-bottom:14px} .input label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:7px} .input label em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7} .input input,.input select{ width:100%;padding:14px 16px;border-radius:var(--r-sm); background-color:var(--cream);border:1px solid var(--line);transition:.3s; /* A native