/* Also Coffee Co — homepage layout + components (ported from the design-system UI kit, with audit refinements) */

/* ---------- Buttons ---------- */
.also-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--font-body);font-weight:var(--fw-bold);border:0;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;line-height:1;transition:transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.also-btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}
.also-btn--primary:hover{background:var(--btn-primary-bg-hover);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md)}
.also-btn--secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text)}
.also-btn--secondary:hover{background:var(--btn-secondary-bg-hover);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md)}
.also-btn--ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.also-btn--ghost:hover{background:rgba(113,66,48,.06);transform:translateY(var(--hover-lift))}
.also-btn--md{padding:.8em 1.4em;font-size:1rem;min-height:46px}
.also-btn--lg{padding:1em 1.9em;font-size:1.08rem;min-height:52px}
.also-btn--full{width:100%}
.also-btn:active{transform:scale(var(--press-scale))}
.also-btn :where(svg,i){width:1.1em;height:1.1em}

/* Inline icon sizing */
.also-ic{width:1.25em;height:1.25em;display:inline-block;vertical-align:middle;flex:none}

/* ---------- Announcement + header ---------- */
.also-announce{background:var(--acc-ink-deep);color:var(--acc-cream);font-size:var(--fs-small);padding:.55rem max(1rem,calc((100% - 1330px) / 2));display:flex;align-items:center}
.also-announce__item{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}
.also-announce .sep{opacity:.45}
.also-header{position:sticky;top:0;z-index:60;background:rgba(253,244,230,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.also-header__bar{display:flex;align-items:center;gap:1.5rem;padding-block:1.15rem .95rem}
.also-logo{display:flex;align-items:center;margin-top:5px}
.also-logo img{height:27px;width:auto;display:block}
.also-desktop-nav{display:flex;gap:1.8rem;flex:1;justify-content:center}
.also-desktop-nav a{color:var(--text-body);text-decoration:none;font-weight:var(--fw-semibold);font-size:.98rem;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.also-desktop-nav a .also-ic{width:1.05em;height:1.05em;color:var(--accent)}
.also-desktop-nav a:hover{color:var(--accent)}
.also-header__actions{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.also-header__actions a{color:var(--text-body);text-decoration:none;font-weight:var(--fw-semibold);font-size:.95rem;display:inline-flex;align-items:center;gap:.4rem;min-height:44px}
.also-cartcount{background:var(--accent);color:var(--acc-cream);border-radius:var(--radius-pill);font-size:.72rem;font-weight:700;padding:.05rem .45rem}
.also-mobile-nav{display:none;background:none;border:0;cursor:pointer;color:var(--accent);min-height:44px;min-width:44px;align-items:center;justify-content:center}
/* .also-drawer legacy accordion rules removed — see overlay panel at end of file */

/* ===== Desktop mega menu — the coffee concierge ===== */
.also-desktop-nav .has-mega .also-ic:last-child{transition:transform .25s var(--ease-out)}
.also-desktop-nav .has-mega[aria-expanded="true"]{color:var(--accent)}
.also-desktop-nav .has-mega[aria-expanded="true"] .also-ic:last-child{transform:rotate(180deg)}
.also-megascrim{position:fixed;inset:0;background:rgba(40,21,13,.34);z-index:55;opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out),visibility .3s}
.also-megascrim.is-open{opacity:1;visibility:visible}
.also-mega{position:absolute;top:100%;left:0;right:0;z-index:61;background:linear-gradient(180deg,#fff 0%,var(--acc-base) 100%);border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid var(--border);box-shadow:0 40px 70px -28px rgba(64,33,21,.42);padding:clamp(1.6rem,2.4vw,2.6rem) 0 clamp(1.4rem,2.2vw,2.2rem);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility .3s}
.also-mega.is-open{opacity:1;visibility:visible;transform:none}
.also-mega__grid{display:grid;grid-template-columns:1.05fr 1fr 1.05fr;gap:clamp(1.1rem,1.8vw,2rem);align-items:stretch}
/* hero card */
.also-mega__hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(260px,26vw,340px);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;background:var(--acc-surface);isolation:isolate}
.also-mega__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease-out)}
.also-mega__hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(40,21,13,0) 34%,rgba(40,21,13,.78))}
.also-mega__hero:hover img{transform:scale(1.06)}
.also-mega__hero-body{display:flex;flex-direction:column;gap:.3rem;padding:clamp(1.1rem,1.6vw,1.6rem);color:var(--acc-cream)}
.also-mega__hero-eyebrow{font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--acc-blue-pale)}
.also-mega__hero-title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1.05;letter-spacing:-.015em}
.also-mega__hero-copy{color:rgba(253,244,230,.85);font-size:.95rem;line-height:1.45;max-width:34ch}
.also-mega__cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;font-weight:700;color:var(--acc-cream)}
.also-mega__cta .also-ic{transition:transform .2s var(--ease-out)}
.also-mega__hero:hover .also-mega__cta .also-ic{transform:translateX(3px)}
/* equipment column */
.also-mega__label{display:block;font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.also-mega__equip{display:flex;flex-direction:column}
.also-mega__equiplist{display:flex;flex-direction:column;gap:.25rem}
.also-mega__eq{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-radius:var(--radius-md);text-decoration:none;color:var(--text-strong);font-weight:600;font-size:1rem;border:1px solid transparent;transition:background .18s var(--ease-out),border-color .18s,box-shadow .18s}
.also-mega__eq .also-mega__eqic{color:var(--accent);flex:none}
.also-mega__eqname{flex:1}
.also-mega__eq > .also-ic{color:var(--acc-clay);width:1.05em;height:1.05em;transition:transform .18s var(--ease-out)}
.also-mega__eq:hover,.also-mega__eq.is-active{background:#fff;border-color:var(--border);box-shadow:var(--shadow-sm)}
.also-mega__eq:hover > .also-ic,.also-mega__eq.is-active > .also-ic{transform:translateX(3px);color:var(--accent)}
.also-mega__equipfoot{display:flex;align-items:center;gap:.45rem;margin:.9rem 0 0;color:var(--text-muted);font-size:.85rem}
.also-mega__equipfoot .also-ic{color:var(--accent);width:1.05em;height:1.05em;flex:none}
/* preview panel */
.also-mega__preview{display:flex;flex-direction:column;background:linear-gradient(160deg,#fff,var(--acc-base));border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.2rem,1.7vw,1.7rem);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.also-mega__preview::before{content:"";position:absolute;top:-40%;right:-20%;width:220px;height:220px;background:radial-gradient(circle,rgba(147,187,207,.3),transparent 70%);pointer-events:none}
.also-mega__preview-eyebrow{font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--acc-mocha);position:relative}
.also-mega__preview-grind{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.45rem,1.1rem + 1vw,1.95rem);line-height:1.05;color:var(--text-strong);margin:.15em 0 .3em;position:relative}
.also-mega__preview-note{margin:0;color:var(--text-muted);font-size:.92rem;line-height:1.5;min-height:2.9em;position:relative}
.also-mega__preview-bags{display:flex;gap:.7rem;margin:1rem 0 0;position:relative}
.also-mega__preview-bags img{width:auto;height:76px;filter:drop-shadow(0 8px 14px rgba(64,33,21,.2))}
.also-mega__preview-reassure{display:flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1rem;color:var(--text-strong);font-weight:600;font-size:.85rem;position:relative}
.also-mega__preview-reassure .also-ic{color:var(--acc-leaf);width:1.1em;height:1.1em;stroke-width:2.6;flex:none}
/* foot */
.also-mega__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 2.5rem;flex-wrap:wrap;margin-top:clamp(1.3rem,2vw,1.9rem);padding-top:clamp(1.1rem,1.7vw,1.6rem);border-top:1px solid var(--border)}
.also-mega__routinerow{display:flex;gap:.4rem;flex-wrap:wrap}
.also-mega__routinerow a{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:80px;padding:.6rem .3rem;border-radius:var(--radius-md);text-decoration:none;color:var(--text-strong);font-weight:600;font-size:.82rem;transition:background .18s var(--ease-out),transform .18s,box-shadow .18s}
.also-mega__routinerow a:hover{background:#fff;transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.also-mega__bag{display:flex;align-items:flex-end;justify-content:center;height:66px}
.also-mega__bag img{height:100%;width:auto;filter:drop-shadow(0 6px 10px rgba(64,33,21,.18))}
.also-mega__more{display:flex;gap:1.4rem;flex-wrap:wrap}
.also-mega__more a{display:inline-flex;align-items:center;gap:.45rem;color:var(--text-body);text-decoration:none;font-weight:600;font-size:.92rem;transition:color .18s var(--ease-out)}
.also-mega__more a .also-ic{color:var(--accent);width:1.1em;height:1.1em}
.also-mega__more a:hover{color:var(--accent)}
@media (max-width:860px){.also-mega,.also-megascrim{display:none!important}}
@media (prefers-reduced-motion:reduce){.also-mega,.also-megascrim,.also-mega__hero img{transition:none}}

/* ---------- Hero ---------- */
.also-hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 18%, var(--acc-base) 0%, var(--acc-surface) 55%, var(--acc-sand-deep) 100%);min-height:clamp(620px,90vh,940px);display:flex;flex-direction:column;align-items:center}
.also-hero__head{position:relative;z-index:3;padding-top:clamp(2rem,5vh,4rem);text-align:center}
.also-hero-title{font-size:clamp(2.9rem,.5rem + 10vw,8.5rem);line-height:.9;letter-spacing:-.035em;margin:.08em 0 0;color:var(--text-strong);text-shadow:0 2px 0 rgba(253,244,230,.5)}
.also-hero__scene{position:relative;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;margin-top:clamp(-2.5rem,-4vh,-1rem)}
.also-hero__plinthwrap{position:relative;width:min(940px,95vw);z-index:4}
.also-hero__plinth{position:relative;width:100%;display:block;filter:drop-shadow(0 40px 50px rgba(64,33,21,.32))}
.also-hero__contact{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:62%;height:12%;background:radial-gradient(ellipse at center,rgba(64,33,21,.28),transparent 72%);filter:blur(10px)}
.also-glow{position:absolute;border-radius:50%;filter:blur(12px);z-index:1;pointer-events:none}
.also-chip{position:absolute;display:inline-flex;align-items:center;gap:.5rem;background:var(--surface-card);color:var(--text-strong);font-weight:700;font-size:.85rem;padding:.55rem .95rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-lift);white-space:nowrap;z-index:6}
.also-chip [data-lucide]{color:var(--accent)}
.also-hero__foot{position:relative;z-index:7;text-align:center;max-width:640px;padding-bottom:clamp(2rem,5vh,3.5rem)}
.also-hero__foot p{font-size:var(--fs-lead);color:var(--text-muted);margin:0 auto 1.4rem}
.also-hero__ctas{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.also-hero__fog{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(120% 80% at 50% 40%,transparent 60%,rgba(64,33,21,.06) 100%),linear-gradient(to bottom,transparent 80%,var(--acc-base) 100%)}
.also-flow{position:absolute;inset:0;width:100%;height:100%}

/* ---------- Marquee ticker ---------- */
.also-marquee{overflow:hidden;display:flex}
.also-marquee--dark{background:var(--acc-ink-deep);color:var(--acc-cream)}
.also-marquee--blue{background:var(--acc-blue);color:var(--acc-ink-deep)}
.also-marquee-track{display:flex;flex-wrap:nowrap;align-items:center;animation:also-scroll linear infinite;will-change:transform}
.also-marquee-track span.itm{display:inline-flex;align-items:center;gap:.7rem;padding:.85rem 0;white-space:nowrap;font-weight:700;font-size:.95rem}
.also-marquee-track .mdot{margin:0 1.6rem;opacity:.4}
@keyframes also-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Animated shape divider ---------- */
.also-divider{position:relative;height:90px;overflow:hidden;line-height:0}
.also-divider svg{position:absolute;top:0;left:0;width:200%;height:100%}
.also-divider-layer{animation:also-divider-drift linear infinite;will-change:transform}
@keyframes also-divider-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Values band ---------- */
.also-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2.5vw,2.5rem)}
.also-value{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:center;text-align:left}
.also-value__ic{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;padding:.6rem;border-radius:var(--radius-md);color:var(--accent);box-shadow:var(--shadow-xs);margin:0;font-size:1.45rem;grid-column:1;grid-row:1 / span 2;align-self:center}
.also-main .also-section.also-section--tight{padding-block:clamp(1.75rem,1rem + 2.2vw,3.25rem)}
.also-section--tight .also-band-head{margin-bottom:var(--space-lg)}
.also-value h3{margin:0;font-size:var(--fs-h4);line-height:1.15;grid-column:2;grid-row:1;align-self:end}
.also-value p{margin:0;color:var(--text-muted);font-size:var(--fs-small);grid-column:2;grid-row:2;align-self:start}

/* ---------- Routine builder ---------- */
.also-routine{position:relative;background:#fff;overflow:hidden}
.also-routine__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.also-routine__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.also-routine__veil{position:absolute;inset:0;background:linear-gradient(180deg,#fff 0%,#fff 13%,rgba(255,255,255,.85) 30%,rgba(255,255,255,.85) 70%,#fff 87%,#fff 100%)}
.also-routine-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.5rem,4vw,3.75rem);align-items:start}
/* ---- Left intro (premium redesign) ---- */
.also-routine__intro{position:relative;max-width:35rem}
.also-routine__glow{position:absolute;z-index:-1;left:-14%;top:-24%;width:130%;height:155%;pointer-events:none;background:radial-gradient(50% 44% at 32% 33%,rgba(255,234,201,.95),rgba(250,231,203,.42) 42%,rgba(253,244,230,0) 74%);filter:blur(4px)}
.also-routine__eyebrow,.also-routine__eyebrow .also-ic{color:var(--accent)}
.also-routine__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(2.15rem,1.1rem+3.3vw,3.5rem);line-height:1.03;letter-spacing:var(--ls-tight);color:var(--acc-ink-deep);margin:.3em 0 .34em;max-width:15ch}
.also-routine__title em{font-style:italic;color:var(--acc-primary)}
.also-routine__lead{font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:42ch;margin:0 0 1.7rem}
.also-routine__benefits{list-style:none;margin:0 0 1.9rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.5rem}
.also-routine__benefits li{display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:1rem;color:var(--acc-ink);line-height:1.2}
.also-routine__benefits .ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-pill);background:#fff;color:var(--accent);box-shadow:var(--shadow-xs);border:1px solid var(--border)}
.also-routine__benefits .ic .also-ic{width:1.08em;height:1.08em}
.also-routine__cta{position:relative;overflow:hidden;box-shadow:var(--shadow-product)}
.also-routine__cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);transition:left .6s var(--ease-out);pointer-events:none}
.also-routine__cta:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.also-routine__cta:hover::after{left:135%}
.also-routine__trust{display:flex;align-items:center;gap:.55rem;margin-top:1.15rem;flex-wrap:wrap;font-size:var(--fs-small);color:var(--text-muted)}
.also-routine__trust .stars{display:inline-flex;gap:.12rem;line-height:0}
.also-routine__trust .stars .also-ic{width:1.05em;height:1.05em;fill:var(--rating);stroke:var(--rating)}
.also-routine__trust .txt strong{color:var(--text-strong);font-weight:700}
/* staggered benefit reveal */
.also-reveal.is-in .also-routine__benefits li{animation:also-fade-rise var(--dur-reveal) var(--ease-out) both}
.also-reveal.is-in .also-routine__benefits li:nth-child(1){animation-delay:.06s}
.also-reveal.is-in .also-routine__benefits li:nth-child(2){animation-delay:.14s}
.also-reveal.is-in .also-routine__benefits li:nth-child(3){animation-delay:.22s}
.also-reveal.is-in .also-routine__benefits li:nth-child(4){animation-delay:.30s}
@keyframes also-fade-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* product still-life scene */
.also-routine__scene{position:relative;width:100%;aspect-ratio:2.1/1;margin:clamp(1.2rem,2.5vw,2rem) 0 0;pointer-events:none}
.also-routine__scene .rl{position:absolute;display:block;height:auto}
.also-routine__scene .rl-beans{left:4%;bottom:-14px;width:83%;z-index:1;filter:drop-shadow(0 10px 12px rgba(40,21,13,.16))}
.also-routine__scene .rl-pouch{left:2%;bottom:-4px;width:30%;z-index:2;transform:rotate(-7deg);transform-origin:bottom center;filter:drop-shadow(0 20px 24px rgba(40,21,13,.24))}
.also-routine__scene .rl-cup{left:25%;bottom:-10px;width:48%;z-index:4;filter:drop-shadow(0 22px 28px rgba(40,21,13,.30))}
.also-steam{position:absolute;left:40%;bottom:59%;width:80px;height:140px;z-index:3}
.also-steam i{position:absolute;bottom:0;width:18px;height:90px;border-radius:60% 60% 45% 45%;background:linear-gradient(to top,rgba(120,88,68,0),rgba(120,88,68,.55),rgba(120,88,68,0));filter:blur(9px);animation:also-steam 4.2s ease-in-out infinite}
.also-steam i:nth-child(1){left:6px;animation-delay:-.6s}
.also-steam i:nth-child(2){left:29px;height:112px;animation-delay:-2s}
.also-steam i:nth-child(3){left:52px;animation-delay:-3.3s}
@keyframes also-steam{0%{opacity:0;transform:translateY(18px) scaleY(.8)}30%{opacity:1}100%{opacity:0;transform:translateY(-54px) scaleY(1.35)}}
@media (prefers-reduced-motion:reduce){.also-steam{display:none}.also-reveal.is-in .also-routine__benefits li{animation:none}.also-moment.m-in,.also-pcard.m-in{animation:none}.also-reveal.is-in .also-jstep,.also-reveal.is-in .also-journey::before{animation:none}}
/* edge-scene is desktop-only; in-flow scene is mobile-only */
.also-routine__scene--edge{display:none}
/* desktop: anchor still-life to the PAGE's left edge, in the margin beside the text, bleeding off-page */
@media (min-width:921px){
  .also-routine__intro>.also-routine__scene{display:none}
  .also-routine__scene--edge-r{left:auto;right:0;transform:translate(76%,-50%)}
}
/* left still-life: proper desktop only (hidden on tablet/mobile), right edge pinned to the
   container edge so it bleeds off-page and never sits behind the text column */
@media (min-width:1200px){
  .also-routine__scene--edge{display:block;position:absolute;left:auto;right:calc(100% - max(24px,(100vw - 1330px)/2));top:50%;width:clamp(460px,34vw,700px);margin:0;transform:translateY(-50%);z-index:0;pointer-events:none}
}
.also-routine__panel{background:var(--surface-card);border-radius:var(--radius-xl);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--shadow-md);border:1px solid var(--border)}
.also-routine__plan{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0 1.2rem}
.also-planrow{display:flex;align-items:center;gap:1rem;padding:.65rem .8rem;border-radius:var(--radius-lg);background:var(--surface-raised);text-decoration:none;color:inherit;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s var(--ease-out)}
.also-planrow:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:#fff}
.also-planrow__img{width:58px;height:58px;flex:none;border-radius:var(--radius-md);overflow:hidden;background:var(--acc-surface);box-shadow:var(--shadow-xs)}
.also-planrow__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease-out)}
.also-planrow:hover .also-planrow__img img{transform:scale(1.09)}
.also-planrow__body{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.also-planrow .lab{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--accent)}
.also-planrow .nm{font-weight:700;color:var(--text-strong);font-size:1.06rem;line-height:1.12}
.also-planrow .desc{font-size:var(--fs-small);color:var(--text-muted);line-height:1.2}
.also-planrow__meta{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-weight:700;white-space:nowrap}
.also-planrow__meta .price{color:var(--text-strong)}
.also-planrow__meta .also-ic{color:var(--accent);transition:transform .25s var(--ease-out)}
.also-planrow:hover .also-planrow__meta .also-ic{transform:translateX(3px)}

/* ---------- Range / product cards ---------- */
.also-range-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.also-pcard{position:relative;display:flex;flex-direction:column;background:var(--surface-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.also-pcard:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-lift)}
.also-pcard__well{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.also-well--sand{background:linear-gradient(160deg,var(--acc-surface),var(--acc-sand-deep))}
.also-well--blue{background:linear-gradient(160deg,var(--acc-blue-pale),var(--acc-blue-soft))}
.also-well--clay{background:linear-gradient(160deg,var(--acc-clay-soft),var(--acc-clay))}
.also-well--cream{background:linear-gradient(160deg,#fff,var(--acc-surface))}
.also-well--bluePale{background:linear-gradient(160deg,#fff,var(--acc-blue-pale))}
.also-pcard__img{width:76%;height:76%;object-fit:contain;filter:drop-shadow(var(--shadow-product));transition:transform var(--dur-slow) var(--ease-spring)}
.also-pcard:hover .also-pcard__img{transform:translateY(-8px) scale(1.05) rotate(-1deg)}
.also-pcard__badge{position:absolute;top:14px;left:14px;z-index:2;font-size:var(--fs-micro);font-weight:700;padding:.25rem .6rem;border-radius:var(--radius-pill)}
.also-badge--clay{background:var(--acc-clay);color:var(--acc-ink-deep)}
.also-badge--blue{background:var(--acc-blue);color:var(--acc-ink-deep)}
.also-badge--best{background:var(--acc-primary);color:var(--acc-cream)}
.also-pcard__heart{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:var(--radius-pill);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--surface-card);color:var(--text-muted);box-shadow:var(--shadow-xs);transition:transform var(--dur-fast) var(--ease-spring),color var(--dur-fast)}
.also-pcard__heart.on{color:#C0392B;transform:scale(1.1)}
.also-pcard__body{padding:var(--space-md);display:flex;flex-direction:column;gap:.5rem;flex:1}
.also-pcard__rate{display:flex;align-items:center;gap:.4rem;color:var(--rating);font-size:.78rem}
.also-pcard__rate .cnt{color:var(--text-muted);font-weight:600}
.also-pcard__name{margin:0;font-size:var(--fs-h4)}
.also-pcard__desc{margin:.1rem 0 0;color:var(--text-muted);font-size:var(--fs-small)}
.also-strength{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--text-muted);font-weight:600}
.also-strength .pips{display:inline-flex;gap:3px}
.also-strength .pip{width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
.also-strength .pip.on{background:var(--accent)}
.also-pcard__meta{font-size:.78rem;color:var(--text-muted);font-weight:600;display:flex;align-items:center;gap:.4rem}
.also-sizes{display:flex;gap:.35rem;margin-top:.15rem}
.also-sizes button{flex:1;padding:.4rem 0;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:.8rem;color:var(--text-strong);background:transparent;border:1.5px solid var(--border-strong);transition:all var(--dur-fast) var(--ease-out)}
.also-sizes button.on{color:var(--acc-cream);background:var(--accent);border-color:var(--accent)}
.also-pcard__pricerow{display:flex;align-items:baseline;justify-content:space-between;margin-top:.35rem;gap:.4rem;flex-wrap:wrap}
.also-price .from{font-size:.78rem;color:var(--text-muted);font-weight:500}
.also-price .amt{font-size:1.2rem;font-weight:700;color:var(--text-strong)}
.also-price .per{font-size:.78rem;color:var(--text-muted)}
.also-save{display:inline-flex;align-items:center;gap:.3rem;background:var(--acc-blue-soft);color:var(--acc-ink-deep);font-size:.72rem;font-weight:700;padding:.25rem .55rem;border-radius:var(--radius-pill)}

/* Cross-sell */
.also-xsell{margin-top:var(--space-xl);background:var(--surface-raised);border-radius:var(--radius-xl);padding:clamp(1.25rem,2.5vw,2rem);display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.also-xsell__txt{flex:1;min-width:220px}
.also-xsell__bags{display:flex;gap:.4rem}
.also-xsell__bags img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(var(--shadow-sm))}

/* ---------- Moments ---------- */
.also-moments-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
/* tighter routine->moments transition */
.also-main .also-routine.also-section{padding-bottom:clamp(2.33rem, 1.33rem + 4vw, 4.67rem)}
.also-main .also-section.also-moments-sec{padding-top:clamp(2.33rem, 1.33rem + 4vw, 4.67rem)}
/* moments filter/search toolbar */
.also-mfilter{display:flex;flex-direction:column;align-items:center;gap:.85rem;margin-bottom:.85rem}
.also-msearch{position:relative;display:flex;align-items:center;width:min(380px,100%)}
.also-msearch .also-ic{position:absolute;left:.95rem;width:1.05em;height:1.05em;color:var(--text-muted);pointer-events:none}
.also-msearch input{width:100%;padding:.74rem 1rem .74rem 2.75rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:#fff;color:var(--text-strong);font-family:var(--font-body);font-size:1rem;box-shadow:var(--shadow-xs);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.also-msearch input::placeholder{color:var(--text-muted)}
.also-msearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--acc-blue-pale)}
.also-mchips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.also-mchip{font-family:var(--font-body);font-weight:700;font-size:.9rem;line-height:1;padding:.55rem 1.05rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:#fff;color:var(--text-body);cursor:pointer;transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out),transform .15s var(--ease-out)}
.also-mchip:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.also-mchip.is-on{background:var(--accent);color:var(--acc-cream);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.also-mcount{text-align:center;font-size:var(--fs-small);color:var(--text-muted);font-weight:600;margin:0 0 var(--space-lg)}
.also-mempty{text-align:center;color:var(--text-muted);font-size:var(--fs-lead);padding:var(--space-xl) 0 var(--space-md)}
.also-moment{text-decoration:none}
.also-moment.m-in{animation:also-fade-rise .4s var(--ease-out) both}
/* range: best-brewed-as dropdown filter */
.also-brewfilter{display:flex;justify-content:center;margin:0 0 var(--space-lg)}
.also-brewdd{position:relative}
.also-brewbtn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:.72rem 1.25rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:#fff;color:var(--text-body);cursor:pointer;box-shadow:var(--shadow-xs);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.also-brewbtn:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.also-brewbtn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--acc-blue-pale)}
.also-brewbtn__lab{color:var(--text-muted)}
.also-brewbtn__txt{color:var(--accent);font-weight:700}
.also-brewbtn .also-ic{width:1.05em;height:1.05em;color:var(--text-muted);transition:transform .2s var(--ease-out)}
.also-brewdd[data-open="true"] .also-brewbtn .also-ic{transform:rotate(180deg)}
.also-brewmenu{position:absolute;top:calc(100% + .55rem);left:50%;transform:translateX(-50%);width:330px;max-width:92vw;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:.45rem;margin:0;list-style:none;z-index:50}
.also-brewmenu__opt{display:flex;align-items:center;gap:.7rem;padding:.62rem .7rem;border-radius:var(--radius-md);cursor:pointer;color:var(--text-strong);transition:background .15s var(--ease-out)}
.also-brewmenu__opt:hover{background:var(--acc-surface)}
.also-brewmenu__opt .tick{flex:none;display:flex;width:1.15em;height:1.15em;color:var(--accent);opacity:0}
.also-brewmenu__opt .tick .also-ic{width:100%;height:100%}
.also-brewmenu__opt.is-on .tick{opacity:1}
.also-brewmenu__opt.is-on .lab{color:var(--accent);font-weight:700}
.also-brewmenu__opt .lab{flex:1;font-weight:600;font-size:1rem;white-space:nowrap}
.also-brewmenu__opt .mic{flex:none;display:flex;color:var(--text-strong)}
.also-brewic{display:block}
.also-brewempty{text-align:center;color:var(--text-muted);font-size:var(--fs-lead);padding:var(--space-lg) 0}
.also-pcard.m-in{animation:also-fade-rise .4s var(--ease-out) both}
/* ---- social proof (reviews redesign) ---- */
.also-proof{position:relative;overflow:hidden}
.also-proof::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 50% at 50% 40%,rgba(255,255,255,.55),rgba(255,255,255,0) 72%)}
.also-proof .also-container{position:relative}
.also-proof__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:1040px;margin:0 auto clamp(2.4rem,4vw,3.6rem)}
.also-proof__stats .stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;padding:0 1rem}
.also-proof__stats .stat+.stat{border-left:1px solid var(--acc-border-strong)}
.also-proof__stats .n{font-family:var(--font-display);font-weight:var(--fw-display-black);font-size:clamp(1.9rem,1.2rem+1.9vw,2.8rem);line-height:1;color:var(--acc-ink-deep);display:inline-flex;align-items:center;gap:.28rem}
.also-proof__stats .n .also-ic{width:.72em;height:.72em;fill:var(--rating);stroke:var(--rating)}
.also-proof__stats .n .cnt{font-style:normal;font-variant-numeric:tabular-nums}
.also-proof__stats .l{font-size:var(--fs-small);color:var(--text-muted);font-weight:600;max-width:18ch}
.also-proof__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1rem,1.8vw,1.4rem)}
.also-story{background:#fff;border-radius:var(--radius-xl);padding:clamp(1.4rem,2.2vw,1.9rem);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.95rem;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.also-story:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.also-story--featured{grid-row:1/3;position:relative;overflow:hidden;padding:clamp(1.9rem,3vw,2.7rem);justify-content:center;gap:1.4rem}
.also-story--featured .also-story__who{margin-top:.2rem}
.also-story--featured::before{content:"\201C";position:absolute;top:-.12em;right:.02em;font-family:var(--font-display);font-weight:700;font-size:11rem;line-height:1;color:var(--acc-clay-soft);opacity:.5;pointer-events:none}
.also-story__stars{display:inline-flex;gap:.14rem;line-height:0}
.also-story__stars .also-ic{width:1em;height:1em;fill:var(--rating);stroke:var(--rating)}
.also-story__q{font-family:var(--font-display);font-weight:600;font-size:1.12rem;line-height:1.4;color:var(--acc-ink-deep);margin:0;position:relative}
.also-story--featured .also-story__q{font-size:clamp(1.35rem,1.05rem+1.1vw,1.9rem);line-height:1.32;max-width:20ch}
.also-story__who{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.also-story__ava{flex:none;width:46px;height:46px;border-radius:var(--radius-pill);color:var(--acc-ink-deep);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.15rem;box-shadow:var(--shadow-xs)}
.also-story__meta{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.also-story__meta strong{color:var(--text-strong);font-size:1rem;line-height:1.2}
.also-story__meta em{font-style:normal;color:var(--text-muted);font-size:.85rem;line-height:1.3}
.also-story__drinks{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.also-story__drinks .lbl{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--text-muted);margin-right:.15rem}
.also-story__drinks i{font-style:normal;background:var(--acc-surface);border:1px solid var(--acc-border);border-radius:var(--radius-pill);padding:.24rem .65rem;font-size:.78rem;font-weight:700;color:var(--accent)}
.also-proofimg{position:relative;margin:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);min-height:230px}
.also-proofimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.also-proofimg:hover img{transform:scale(1.05)}
.also-proofimg figcaption{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:.4rem;background:rgba(253,244,230,.94);color:var(--acc-ink-deep);font-size:.8rem;font-weight:700;padding:.38rem .8rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm)}
.also-proofimg figcaption .also-ic{width:1em;height:1em;color:var(--accent)}
.also-proof__badges{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:clamp(2.4rem,4vw,3.4rem) 0 0;padding:0}
.also-proof__badges li{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--acc-border);border-radius:var(--radius-pill);padding:.55rem 1.05rem;font-weight:600;font-size:var(--fs-small);color:var(--acc-ink);box-shadow:var(--shadow-xs)}
.also-proof__badges .also-ic{width:1.05em;height:1.05em;color:var(--accent)}
.also-proof__plat{text-align:center;margin:1.3rem 0 0;color:var(--text-muted);font-size:var(--fs-small)}
.also-proof__plat strong{color:var(--text-strong)}
.also-proof__plat b{color:var(--text-strong);font-weight:700}
.also-proof__cta{display:flex;justify-content:center;margin-top:clamp(1.6rem,2.6vw,2.2rem)}
.also-reveal.is-in .also-proof__stats .stat{animation:also-fade-rise .55s var(--ease-out) both}
.also-reveal.is-in .also-proof__stats .stat:nth-child(2){animation-delay:.08s}
.also-reveal.is-in .also-proof__stats .stat:nth-child(3){animation-delay:.16s}
.also-reveal.is-in .also-proof__stats .stat:nth-child(4){animation-delay:.24s}
.also-reveal.is-in .also-proof__grid>*{animation:also-fade-rise .6s var(--ease-out) both}
.also-reveal.is-in .also-proof__grid>*:nth-child(2){animation-delay:.12s}
.also-reveal.is-in .also-proof__grid>*:nth-child(3){animation-delay:.2s}
.also-reveal.is-in .also-proof__grid>*:nth-child(4){animation-delay:.28s}
.also-reveal.is-in .also-proof__grid>*:nth-child(5){animation-delay:.36s}
@media (max-width:760px){
  .also-proof__stats{grid-template-columns:repeat(2,1fr);gap:1.3rem .5rem;margin-bottom:2rem}
  .also-proof__stats .stat+.stat{border-left:0}
  .also-proof__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
  .also-proof__grid>*{scroll-snap-align:center}
  .also-story--featured{grid-row:auto}
  .also-proofimg{min-height:280px}
}
.also-moment{position:relative;color:var(--acc-cream);border-radius:var(--radius-xl);overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-lg);box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.also-moment:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.also-moment__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.also-moment:hover .also-moment__img{transform:scale(1.07)}
.also-moment__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(40,21,13,.86) 8%,rgba(40,21,13,.35) 50%,rgba(40,21,13,.1) 100%)}
.also-moment__ic{position:absolute;top:16px;left:16px;width:48px;height:48px;border-radius:var(--radius-pill);background:rgba(253,244,230,.92);color:var(--acc-primary);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.also-moment__c{position:relative;z-index:2}
.also-moment__lab{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.also-moment__line{margin:.4rem 0 .8rem;font-family:var(--font-display);font-size:var(--fs-h4);line-height:1.18}
.also-moment__tag{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.9rem;background:var(--acc-blue);color:var(--acc-ink-deep);padding:.35rem .8rem;border-radius:var(--radius-pill)}

/* ---------- How it works ---------- */
.also-how{background:var(--acc-primary);color:var(--acc-cream);position:relative;overflow:hidden}
.also-how h2,.also-how h3{color:var(--acc-cream)}
.also-how::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(62% 54% at 50% 44%,rgba(255,240,220,.13),rgba(255,240,220,0) 72%)}
.also-main .also-how.also-section{padding-block:clamp(2.4rem,4.2vw,4.2rem)}
.also-how .also-band-head{margin-bottom:var(--space-lg)}
.also-how .also-container{position:relative;z-index:1}
.also-how .also-band-head p.also-how__lead{color:rgba(253,244,230,.86);font-size:var(--fs-lead);line-height:1.55;max-width:52ch;margin:.5rem auto 0}
/* subscription journey */
.also-journey{list-style:none;margin:clamp(1rem,2vw,1.75rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,2rem);position:relative}
.also-journey::before{content:"";position:absolute;top:clamp(60px,7vw,84px);left:12.5%;right:12.5%;height:2px;transform-origin:left center;background:repeating-linear-gradient(90deg,rgba(253,244,230,.36) 0 9px,transparent 9px 20px);z-index:0}
.also-jstep{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem}
.also-jstep:not(:last-child)::after{content:"";position:absolute;top:clamp(60px,7vw,84px);right:-.35rem;width:8px;height:8px;border-top:2px solid rgba(253,244,230,.55);border-right:2px solid rgba(253,244,230,.55);transform:translate(50%,-50%) rotate(45deg);z-index:1}
.also-jstep__tile{position:relative;width:clamp(120px,14vw,168px);aspect-ratio:1;border-radius:var(--radius-pill);overflow:hidden;border:4px solid rgba(253,244,230,.9);box-shadow:0 20px 44px rgba(0,0,0,.34);background:var(--acc-mocha)}
.also-jstep__tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease-out)}
.also-jstep:hover .also-jstep__tile img{transform:scale(1.06)}
.also-jstep__n{position:absolute;top:4px;right:4px;width:34px;height:34px;border-radius:var(--radius-pill);background:var(--acc-cream);color:var(--acc-primary);font-family:var(--font-display);font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);z-index:2}
.also-jstep__body{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.also-jstep__title{margin:0;font-size:var(--fs-h4);font-family:var(--font-display);color:var(--acc-cream)}
.also-jstep__copy{margin:0;color:rgba(253,244,230,.76);font-size:var(--fs-small);line-height:1.5;max-width:26ch}
.also-how__trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem 1.75rem;margin:clamp(2.6rem,5vw,4rem) auto 0}
.also-how__ticks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.5rem;margin:0;padding:0}
.also-how__ticks li{display:inline-flex;align-items:center;gap:.45rem;color:var(--acc-cream);font-weight:600;font-size:var(--fs-small)}
.also-how__ticks .also-ic{width:1.1em;height:1.1em;color:var(--acc-blue)}
.also-how__rating{display:inline-flex;align-items:center;gap:.5rem;color:var(--acc-cream);font-weight:700;font-size:var(--fs-small)}
.also-how__rating .stars{display:inline-flex;gap:.1rem;line-height:0}
.also-how__rating .stars .also-ic{width:1.05em;height:1.05em;fill:var(--rating);stroke:var(--rating)}
.also-how__cta{display:flex;justify-content:center;margin:clamp(1.7rem,3vw,2.5rem) 0 0}
.also-reveal.is-in .also-journey::before{animation:also-linegrow .9s var(--ease-out) .15s both}
.also-reveal.is-in .also-jstep{animation:also-fade-rise .6s var(--ease-out) both}
.also-reveal.is-in .also-jstep:nth-child(1){animation-delay:.1s}
.also-reveal.is-in .also-jstep:nth-child(2){animation-delay:.24s}
.also-reveal.is-in .also-jstep:nth-child(3){animation-delay:.38s}
.also-reveal.is-in .also-jstep:nth-child(4){animation-delay:.52s}
@keyframes also-linegrow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes also-linegrow-v{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
/* subscription journey — vertical on mobile */
@media (max-width:640px){
  .also-journey{grid-template-columns:1fr;gap:0;max-width:400px;margin-inline:auto}
  .also-journey::before{top:44px;bottom:44px;left:40px;right:auto;width:2px;height:auto;transform-origin:center top;background:repeating-linear-gradient(180deg,rgba(253,244,230,.36) 0 9px,transparent 9px 20px)}
  .also-jstep{flex-direction:row;align-items:flex-start;text-align:left;gap:1.1rem;padding:.85rem 0}
  .also-jstep__body{align-items:flex-start;flex:1;gap:.25rem}
  .also-jstep__tile{width:80px;flex:none}
  .also-jstep__n{width:26px;height:26px;font-size:.9rem}
  .also-jstep:not(:last-child)::after{display:none}
  .also-jstep__title{font-size:1.2rem;margin-top:.1rem}
  .also-jstep__copy{max-width:none}
  .also-reveal.is-in .also-journey::before{animation-name:also-linegrow-v}
}
@media (prefers-reduced-motion:reduce){
  .also-moment.m-in,.also-pcard.m-in,.also-reveal.is-in .also-jstep,.also-reveal.is-in .also-journey::before,.also-reveal.is-in .also-routine__benefits li,.also-reveal.is-in .also-proof__stats .stat,.also-reveal.is-in .also-proof__grid>*,.also-faqx details[open] p{animation:none!important}
}

/* offer pill (used on Find Your Coffee page) */
.also-offer{display:inline-flex;align-items:center;gap:.5rem;background:var(--acc-blue-soft);color:var(--acc-ink-deep);font-weight:700;font-size:.9rem;padding:.5rem .9rem;border-radius:var(--radius-pill);margin-bottom:1rem}

/* ---------- FAQ ---------- */
/* ---- FAQ: editorial help centre ---- */
.also-faqsec{position:relative;overflow:hidden}
.also-faqsec::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 50% at 42% 38%,rgba(255,255,255,.5),rgba(255,255,255,0) 72%)}
.also-faqsec .also-container{position:relative}
.also-faqx{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,3.5vw,4rem);align-items:start}
.also-faqx__left{position:sticky;top:96px;display:flex;flex-direction:column;gap:clamp(1.2rem,2vw,1.6rem)}
.also-faqx__head h2{font-size:var(--fs-h2);margin:.3em 0 .25em;max-width:15ch}
.also-faqx__intro{color:var(--text-muted);line-height:1.6;max-width:44ch;margin:0}
.also-faqx__img{position:relative;margin:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:16/9}
.also-faqx__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.also-faqx__img:hover img{transform:scale(1.04)}
.also-faqx__img figcaption{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:.4rem;background:rgba(253,244,230,.94);color:var(--acc-ink-deep);font-size:.8rem;font-weight:700;padding:.38rem .8rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm)}
.also-faqx__img figcaption .also-ic{width:1em;height:1em;color:var(--accent)}
.also-faqx__trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem}
.also-faqx__trust li{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:var(--fs-small);color:var(--acc-ink)}
.also-faqx__trust .also-ic{flex:none;width:1.1em;height:1.1em;color:var(--accent)}
.also-faqx__trust li.star .also-ic{fill:var(--rating);stroke:var(--rating)}
.also-faqx__support{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:clamp(1.3rem,2vw,1.7rem);display:flex;flex-direction:column;gap:.55rem;box-shadow:var(--shadow-sm)}
.also-faqx__support .ic{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--acc-blue-pale);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:.2rem}
.also-faqx__support h3{margin:0;font-size:var(--fs-h4)}
.also-faqx__support p{margin:0;color:var(--text-muted);font-size:var(--fs-small);line-height:1.5}
.also-faqx__support .rt strong{color:var(--text-strong)}
.also-faqx__support .also-btn{align-self:flex-start;margin-top:.5rem}
.also-faqx__glabel{display:flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:700;color:var(--accent);margin:0 0 .75rem}
.also-faqx__glabel .also-ic{width:1.2em;height:1.2em}
.also-faqx__group+.also-faqx__group{margin-top:clamp(1.5rem,2.4vw,2.1rem)}
.also-faqx details{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.also-faqx details+details{margin-top:.65rem}
.also-faqx details:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--border-strong)}
.also-faqx summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.35rem;font-weight:700;color:var(--text-strong);font-size:1.03rem;min-height:58px}
.also-faqx summary::-webkit-details-marker{display:none}
.also-faqx summary .chev{flex:none;display:flex;width:1.2em;height:1.2em;color:var(--accent);transition:transform .32s var(--ease-out)}
.also-faqx details[open] summary .chev{transform:rotate(180deg)}
.also-faqx details p{margin:0;padding:0 1.35rem 1.2rem;color:var(--text-muted);line-height:1.6;max-width:60ch}
.also-faqx details[open] p{animation:also-fade-rise .35s var(--ease-out) both}
.also-faqx__cta{margin-top:clamp(1.7rem,2.8vw,2.4rem);background:linear-gradient(160deg,var(--acc-surface),var(--acc-sand-deep));border-radius:var(--radius-xl);padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;align-items:center;justify-content:space-between;gap:1.1rem;flex-wrap:wrap;box-shadow:var(--shadow-sm)}
.also-faqx__cta h3{margin:0 0 .2em;font-size:var(--fs-h4)}
.also-faqx__cta p{margin:0;color:var(--text-muted);font-size:var(--fs-small)}
@media (max-width:920px){
  .also-faqx{display:flex;flex-direction:column;gap:1.3rem}
  .also-faqx__left,.also-faqx__right{display:contents}
  .also-faqx__head{order:1}
  .also-faqx__img{order:2}
  .also-faqx__trust{order:3}
  .also-faqx__group{order:4}
  .also-faqx__support{order:5}
  .also-faqx__cta{order:6;margin-top:.3rem}
  .also-faqx__group+.also-faqx__group{margin-top:0}
}

/* (Final CTA relocated into the footer — see Footer below) */
/* Cost-reality callout in the range section (context, not a price list) */
.also-costnote{max-width:600px;margin:1.9rem auto 2.25rem;padding:1.1rem 1.5rem 1.25rem;background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);text-align:center}
.also-costnote>strong{display:block;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h4);color:var(--text-strong);margin-bottom:.7rem}
.also-costnote__stats{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem 1.7rem;color:var(--text-body);font-size:var(--fs-body)}
.also-costnote__stats b{font-weight:var(--fw-bold);color:var(--accent)}
.also-costnote__foot{display:block;margin-top:.7rem;color:var(--text-muted);font-size:var(--fs-small)}
.also-btn--cream{background:var(--acc-cream);color:var(--acc-ink-deep)}
.also-btn--cream:hover{background:#fff;transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md)}
/* ---- newsletter offer card ---- */
/* ================= FOOTER (premium closing experience) ================= */
.also-footer{position:relative;overflow:hidden;background:var(--acc-ink-deep);color:var(--acc-cream);padding-block:clamp(3rem,6vw,5.5rem) var(--space-lg)}
.also-footer__depth{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.also-footer__glow{position:absolute;border-radius:50%;filter:blur(70px)}
.also-footer__glow--a{top:-10%;left:6%;width:520px;height:520px;background:radial-gradient(circle,rgba(255,214,170,.15),transparent 68%)}
.also-footer__glow--b{bottom:-14%;right:2%;width:600px;height:600px;background:radial-gradient(circle,rgba(147,187,207,.13),transparent 70%)}
.also-footer__grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.also-footer__inner{position:relative;z-index:1}

/* -- closing CTA -- */
.also-footcta{text-align:center;max-width:660px;margin:0 auto clamp(2.4rem,5vw,3.8rem);padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid rgba(253,244,230,.12)}
.also-footcta__leaf{display:inline-block;width:48px;height:48px;margin-bottom:.9rem;background:var(--acc-cream);-webkit-mask:var(--leaf-mask) center/contain no-repeat;mask:var(--leaf-mask) center/contain no-repeat}
.also-footcta__kicker{display:block;font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--acc-blue-pale);margin-bottom:.6rem}
.also-footcta__title{color:var(--acc-cream);font-size:var(--fs-h1);max-width:16ch;margin:0 auto .4em;text-wrap:balance}
.also-footcta__sub{color:rgba(253,244,230,.78);font-size:var(--fs-lead);line-height:1.55;max-width:54ch;margin:0 auto}
.also-footcta__ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.7rem}
.also-footcta__trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 0;margin:1.8rem 0 0;padding:0;color:rgba(253,244,230,.72);font-size:var(--fs-small);font-weight:600}
.also-footcta__trust li{display:inline-flex;align-items:center;gap:.4rem}
.also-footcta__trust li+li::before{content:"·";margin:0 .8em;color:rgba(253,244,230,.4)}
.also-footcta__trust li.star .also-ic{width:1.05em;height:1.05em;fill:var(--rating);stroke:var(--rating)}

/* -- newsletter offer card (centrepiece) -- */
.also-nlcard{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.6rem,3.2vw,3.2rem);align-items:center;background:linear-gradient(150deg,#fff 0%,var(--acc-base) 55%,var(--acc-surface) 100%);color:var(--acc-ink);border:1px solid rgba(255,255,255,.55);border-radius:var(--radius-2xl);padding:clamp(1.8rem,3.6vw,3.2rem);box-shadow:0 30px 70px -20px rgba(0,0,0,.55);margin-bottom:clamp(2.6rem,5vw,4.2rem);overflow:hidden;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.also-nlcard::before{content:"";position:absolute;top:-45%;right:-8%;width:360px;height:360px;background:radial-gradient(circle,rgba(147,187,207,.30),transparent 70%);pointer-events:none}
.also-nlcard:hover{transform:translateY(-4px);box-shadow:0 42px 92px -22px rgba(0,0,0,.6)}
.also-nlcard__body{position:relative}
.also-nlcard__eyebrow{display:inline-flex;align-items:center;gap:.45em;font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent)}
.also-nlcard__eyebrow .also-ic{width:1.15em;height:1.15em}
.also-nlcard__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.7rem,1.2rem + 1.9vw,2.6rem);line-height:1.05;letter-spacing:-.015em;color:var(--acc-ink-deep);margin:.4em 0 .35em}
.also-nlcard__pct{color:var(--accent)}
.also-nlcard__copy{margin:0 0 1.2rem;color:var(--text-muted);font-size:var(--fs-body);line-height:1.55;max-width:46ch}
.also-nlcard__ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem}
.also-nlcard__ticks li{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:var(--fs-small);color:var(--acc-ink)}
.also-nlcard__ticks .also-ic{flex:none;width:1.05em;height:1.05em;color:var(--accent);stroke-width:2.4}
.also-nlcard__panel{position:relative}
.also-nlcard__form{display:flex;flex-direction:column;gap:.7rem}
.also-nlcard__input{width:100%;padding:1rem 1.3rem;border-radius:var(--radius-pill);border:1.5px solid var(--acc-border-strong);background:#fff;color:var(--text-strong);font-family:var(--font-body);font-size:1.02rem;min-height:56px;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.also-nlcard__input::placeholder{color:var(--text-muted)}
.also-nlcard__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--acc-blue-pale)}
.also-nlcard__btn{width:100%;justify-content:center}
.also-nlcard__fine{display:block;margin:.9rem 0 0;color:var(--text-muted);font-size:.83rem;line-height:1.45;text-align:center}
.also-nlcard__ok{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:.9rem 0 0;color:var(--accent);font-weight:700;font-size:.92rem;text-align:center}
.also-nlcard__ok[hidden]{display:none}
.also-nlcard__ok .also-ic{width:1.1em;height:1.1em;stroke-width:2.6}

/* -- link columns -- */
.also-foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem);padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid rgba(253,244,230,.12)}
.also-foot-col h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.05rem;letter-spacing:-.01em;margin:0 0 .9rem;color:var(--acc-cream)}
.also-foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.also-foot-col a{color:rgba(253,244,230,.72);text-decoration:none;font-size:.95rem;transition:color .18s var(--ease-out),padding-left .18s var(--ease-out)}
.also-foot-col a:hover{color:var(--acc-cream);padding-left:3px}

/* -- social -- */
.also-foot-social{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1.6rem,3vw,2.2rem) 0}
.also-foot-social__head{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.2rem,1rem + .8vw,1.65rem);color:var(--acc-cream)}
.also-foot-social__links{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.7rem;margin:0;padding:0}
.also-foot-social__links a{position:relative;color:rgba(253,244,230,.82);text-decoration:none;font-weight:600;font-size:.98rem}
.also-foot-social__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:var(--acc-blue);transition:right .28s var(--ease-out)}
.also-foot-social__links a:hover{color:var(--acc-cream)}
.also-foot-social__links a:hover::after{right:0}

/* -- payment & assurances -- */
.also-foot-assure{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:clamp(1.4rem,2.6vw,2rem) 0;border-top:1px solid rgba(253,244,230,.12)}
.also-foot-assure__badges{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.7rem;margin:0;padding:0}
.also-foot-assure__badges li{display:inline-flex;align-items:center;gap:.5rem;color:rgba(253,244,230,.68);font-size:.85rem;font-weight:600}
.also-foot-assure__badges .also-ic{width:1.05em;height:1.05em;color:var(--acc-blue)}
.also-foot-pay{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.also-foot-pay li{font-size:.72rem;font-weight:700;letter-spacing:.02em;color:rgba(253,244,230,.72);border:1px solid rgba(253,244,230,.22);border-radius:6px;padding:.34rem .58rem;background:rgba(253,244,230,.04)}

/* -- base -- */
.also-foot-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;padding-top:clamp(1.4rem,2.6vw,2rem);border-top:1px solid rgba(253,244,230,.12)}
.also-foot-base__logo{height:26px;width:auto;opacity:.92}
.also-foot-base__copy{color:rgba(253,244,230,.55);font-size:.82rem}
.also-foot-base__legal{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.also-foot-base__legal a{color:rgba(253,244,230,.6);text-decoration:none;font-size:.82rem;transition:color .18s var(--ease-out)}
.also-foot-base__legal a:hover{color:var(--acc-cream)}
.also-foot-credit{margin:1.1rem 0 0;text-align:center;color:rgba(253,244,230,.34);font-size:.76rem;letter-spacing:.02em}
.also-foot-credit a{color:rgba(253,244,230,.5);text-decoration:none;transition:color .18s var(--ease-out)}
.also-foot-credit a:hover{color:var(--acc-cream)}

@media (max-width:860px){
  .also-nlcard{grid-template-columns:1fr;gap:1.5rem}
  .also-foot-cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .also-nlcard__ticks{grid-template-columns:1fr}
  .also-foot-social{flex-direction:column;align-items:flex-start;gap:.7rem}
  .also-foot-assure{flex-direction:column;align-items:flex-start}
  .also-foot-base{flex-direction:column;align-items:flex-start;text-align:left}
  .also-footcta__trust{gap:.4rem 1.2rem}
  .also-footcta__trust li+li::before{content:none;margin:0}
}
@media (prefers-reduced-motion:reduce){
  .also-nlcard,.also-foot-col a,.also-foot-social__links a::after{transition:none}
}

/* ---------- Cart toast ---------- */
.also-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140%);background:var(--acc-ink-deep);color:var(--acc-cream);padding:.9rem 1.4rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);font-weight:600;z-index:200;transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-base);display:flex;gap:.6rem;align-items:center;opacity:0;visibility:hidden}
.also-toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}

/* ---------- Flow lines (hero backdrop) ---------- */
.also-flow-line{animation:also-drift 20s linear infinite}
@keyframes also-drift{from{transform:translateX(0)}to{transform:translateX(130px)}}
.also-chip{animation:also-bob 5s ease-in-out infinite}
.also-chip:nth-of-type(2){animation-delay:-1.6s}.also-chip:nth-of-type(3){animation-delay:-3.1s}
@keyframes also-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- Responsive ---------- */
/* small-laptop / tablet-landscape: keep nav + mega but reclaim header width */
@media (max-width:1150px){
  .hide-lg{display:none!important}
  .also-header__bar{gap:1rem}
  .also-desktop-nav{gap:1.05rem}
  .also-desktop-nav a{font-size:.92rem;gap:.35rem}
  .also-desktop-nav a .also-ic{width:.95em;height:.95em}
}
.also-header__actions .also-btn{white-space:nowrap}
@media (max-width:1024px){
  .also-mega__grid{grid-template-columns:1fr 1fr;gap:1.1rem}
  .also-mega__preview{grid-column:1 / -1;flex-direction:row;align-items:center;gap:1.4rem}
  .also-mega__preview-bags{margin:0 0 0 auto}
  .also-mega__preview-reassure{margin-top:0}
}
@media (max-width:920px){
  .also-routine-grid,.also-footer-grid{grid-template-columns:1fr}
  .also-range-grid,.also-values-grid,.also-moments-grid{grid-template-columns:repeat(2,1fr)}
  .also-desktop-nav,.also-header__actions .hide-sm{display:none!important}
  .also-mobile-nav{display:inline-flex}
}
@media (max-width:560px){
  .also-range-grid,.also-values-grid,.also-moments-grid,.also-footer-cols{grid-template-columns:1fr}
  .also-routine__benefits{grid-template-columns:1fr;gap:.7rem}
  .also-routine__scene{max-width:360px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .also-marquee-track,.also-flow-line,.also-chip,.also-float,.also-divider-layer,.also-hero__carousel-track{animation:none!important}
  .also-hero [data-depth]{transform:none!important}
}

/* ===== v1.1 refinements (audit pass) ===== */

/* Type rhythm */
.also-eyebrow{margin-bottom:var(--space-2xs)}
.also-band-head{text-align:center;max-width:48ch;margin:0 auto var(--space-xl)}
.also-band-head h2{font-size:var(--fs-h2);margin:.35em 0 .25em}
/* values headline wants room for its two-sentence break (see .also-brk) */
#valgrid .also-band-head{max-width:min(92vw,720px)}
.also-band-head p{color:var(--text-muted)}

/* Header bits */
.also-iconlink{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;background:var(--surface-card);border-radius:50%;box-shadow:var(--shadow-xs);border:1px solid var(--border);color:var(--text-strong);transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.also-iconlink:hover{background:var(--acc-surface);box-shadow:var(--shadow-sm)}
.also-iconlink .also-ic{width:1.35em;height:1.35em}
.also-cartlink{position:relative}
.also-cartcount{position:relative;top:-8px;left:-6px}
.also-cartcount.is-empty{display:none}
.also-announce .also-ic{width:1.05em;height:1.05em;vertical-align:-2px;opacity:.85}

/* Hero: depth + commanding scale + own padding */
.also-hero{perspective:1400px;padding-block:0;min-height:clamp(680px,92vh,1000px)}
.also-hero [data-depth]{will-change:transform}
.also-hero-title{font-size:clamp(3rem,.4rem + 10.5vw,9rem)}
.also-hero__scene{position:relative}
.also-hero__offer{display:inline-flex;align-items:center;gap:.5rem;margin:1rem auto 0;background:var(--surface-card);color:var(--text-strong);font-weight:700;font-size:.95rem;padding:.55rem 1.1rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm)}
.also-hero__offer .also-ic{color:var(--accent)}
.also-chip .also-ic{color:var(--accent)}

/* Product card: PDP-linked well + hover-reveal pill + linked name + contrast */
a.also-pcard__well{text-decoration:none;cursor:pointer}
.also-pcard__peek{position:absolute;left:50%;bottom:12px;transform:translate(-50%,14px);opacity:0;display:inline-flex;align-items:center;gap:.4rem;background:rgba(40,21,13,.86);color:var(--acc-cream);font-size:.8rem;font-weight:700;padding:.4rem .8rem;border-radius:var(--radius-pill);white-space:nowrap;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);pointer-events:none}
.also-pcard__peek .also-ic{width:1em;height:1em}
.also-pcard:hover .also-pcard__peek{opacity:1;transform:translate(-50%,0)}
.also-pcard__name a{color:inherit;text-decoration:none}
.also-pcard__name a:hover{color:var(--accent)}
.also-pcard__rate .stars{color:#9A5E1F;letter-spacing:1px}
.also-strength .lab{font-weight:600}
.also-strength .word{font-weight:600;color:var(--text-strong)}
.also-strength .pip{background:var(--acc-clay-soft)}
.also-strength .pip.on{background:var(--accent)}
.also-save .also-ic{width:1em;height:1em;color:var(--accent)}

/* Deepen the two washed-out wells so every bag pops */
.also-well--cream{background:linear-gradient(160deg,var(--acc-surface),var(--acc-sand-deep))}
.also-well--bluePale{background:linear-gradient(160deg,var(--acc-blue-pale),var(--acc-blue-soft))}

/* Routine plan rows: mini wells + price */
.also-planrow__well{width:48px;height:56px;flex:none;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-xs)}
.also-planrow__well img{width:34px;height:auto;object-fit:contain;filter:drop-shadow(var(--shadow-sm))}
.also-planrow{box-shadow:var(--shadow-xs)}
.also-routine__price{color:var(--text-muted);font-size:var(--fs-small);margin:0}
.also-routine__price strong{color:var(--text-strong)}

/* Marquee icon size */
.also-marquee-track .itm .also-ic{width:1.05em;height:1.05em}

/* Prose (pages/posts) + newsletter msg */
.also-prose{font-size:var(--fs-body);color:var(--text-body);line-height:var(--lh-body)}
.also-prose :where(h2,h3){margin-top:1.4em}
.also-prose a{color:var(--accent)}
.also-news__msg{margin:.6rem 0 0;color:var(--acc-cream);font-weight:600}

/* ===== Video hero (auto-activates when assets/lifestyle/hero-bg.mp4 exists) ===== */
.also-hero--video{position:relative;min-height:clamp(600px,92vh,920px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--acc-ink-deep);padding-block:0;perspective:none}
.also-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.also-hero__veil{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 95% at 50% 40%,rgba(124,66,31,.32),rgba(92,48,22,.50) 100%),radial-gradient(120% 90% at 50% 42%,rgba(40,21,13,.30),rgba(40,21,13,.72) 100%),linear-gradient(180deg,rgba(40,21,13,.55) 0%,rgba(40,21,13,.22) 38%,rgba(40,21,13,.82) 100%)}
.also-hero__vcontent{position:relative;z-index:2;max-width:920px;padding:clamp(3rem,8vh,6rem) var(--gutter);color:var(--acc-cream)}
.also-hero--video .also-eyebrow{justify-content:center;color:var(--acc-blue-pale)}
.also-hero--video .also-eyebrow .also-ic,.also-hero--video .also-hero__usps .also-ic{color:var(--acc-blue)}
/* Frosted, semi-transparent headline with depth (the video shows faintly through the letters) */
.also-hero--video .also-hero-title{font-size:clamp(2.9rem,.4rem + 10.5vw,8.5rem);line-height:.92;letter-spacing:-.03em;margin:.1em 0 .35em;color:rgba(253,244,230,.80);-webkit-text-stroke:1px rgba(253,244,230,.30);filter:drop-shadow(0 3px 16px rgba(0,0,0,.5))}
.also-hero__lead{font-size:var(--fs-lead);color:rgba(253,244,230,.93);max-width:48ch;margin:0 auto 1.6rem;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.also-hero--video .also-hero__ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.also-hero__offer.also-glass{margin:0 auto 1.4rem}
/* Frosted glass UI */
.also-glass{display:inline-flex;align-items:center;gap:.5rem;background:rgba(253,244,230,.14);color:var(--acc-cream);font-weight:700;padding:.55rem 1.1rem;border-radius:var(--radius-pill);border:1px solid rgba(253,244,230,.30);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.also-glass .also-ic{color:var(--acc-blue-soft)}
.also-btn--glass{background:rgba(253,244,230,.16);color:var(--acc-cream);border:1px solid rgba(253,244,230,.36);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.also-btn--glass:hover{background:rgba(253,244,230,.28);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-md)}
.also-hero__usps{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:center;margin:1.8rem 0 0;padding:0}
.also-hero__usps li{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:rgba(253,244,230,.9)}

/* ===== Hero composition: cup straddling the seam, USP carousel behind ===== */
.also-herowrap{position:relative;isolation:isolate}
.also-hero--video{align-items:flex-start}
.also-hero--video .also-hero__vcontent{position:relative;z-index:4;padding-top:clamp(2.5rem,7vh,5.5rem);padding-bottom:clamp(6rem,13vh,10rem)}
.also-herowrap .also-divider{position:relative;z-index:1;margin-top:-1px}
/* USP carousel sits on the cream, behind the cup */
.also-marquee--cream{background:var(--acc-base);color:var(--text-strong);position:relative;z-index:1}
.also-marquee--cream .itm{color:var(--text-muted)}
.also-marquee--cream .itm .also-ic{color:var(--accent)}
.also-marquee--cream .mdot{color:var(--border-strong)}
.also-marquee--cream .itm{padding-block:1.4rem}
/* The cup — base overlaps the carousel (which runs behind it); top overlaps the hero text */
.also-herowrap__cup{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:clamp(340px,50vw,680px);height:auto;z-index:3;pointer-events:none;filter:drop-shadow(0 26px 32px rgba(40,21,13,.42))}

/* ===== Animated headline ===== */
.also-hero--video .also-hero-title{font-variation-settings:"opsz" 144,"SOFT" 70,"WONK" 1;font-weight:600;line-height:.95;letter-spacing:-.025em;margin:.06em 0 .4em}
.also-hero-title .ln{display:block}
.also-hero-title .wd{display:inline-block}
.wd--accent{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;color:rgba(255,252,246,.96);padding-right:.04em}
.also-hero-title--anim .ln{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.also-hero-title--anim .wd{transform:translateY(116%);opacity:0;animation:also-word-rise .9s var(--ease-out) both;animation-delay:calc(var(--d,0)*90ms + 150ms);will-change:transform}
@keyframes also-word-rise{from{transform:translateY(116%);opacity:0}to{transform:translateY(0);opacity:1}}
.also-fade-in{opacity:0;animation:also-fade-up .85s var(--ease-out) both;animation-delay:calc(var(--d,0)*90ms + 150ms)}
@keyframes also-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.also-hero-title--anim .wd,.also-fade-in{animation:none!important;opacity:1!important;transform:none!important}}

@media (max-width:560px){
  .also-herowrap__cup{width:min(76vw,360px)}
}

/* ===== Scrollytelling hero: cup rests 2/3 on cream, lifts away on scroll ===== */
.also-heroscroll{position:relative}
.also-herostage{position:relative;min-height:clamp(620px,90vh,940px);overflow:hidden;background:var(--acc-base);isolation:isolate}
.hero-scrub .also-heroscroll{height:185vh}
.hero-scrub .also-herostage{position:sticky;top:0;height:100vh;min-height:600px}
.also-hero--video{display:block;height:100%;min-height:inherit;overflow:visible;background:transparent;padding:0;text-align:center}

/* split background: video wall (top) + cream counter (bottom) */
.also-hero__bg{position:absolute;top:0;left:0;right:0;height:58%;overflow:hidden;background:var(--acc-ink-deep);z-index:0}
.also-hero__bg .also-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.also-hero__bg .also-hero__veil{position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;background:rgba(224,180,140,.8)}
.also-hero__bg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(40,21,13,.34) 0%,rgba(40,21,13,.15) 26%,rgba(40,21,13,0) 46%),linear-gradient(180deg,rgba(40,21,13,0) 52%,rgba(40,21,13,.18) 64%,rgba(40,21,13,.46) 74%,rgba(40,21,13,.74) 82%,rgba(40,21,13,.92) 87%,#28150D 90%,#28150D 100%)}
.also-hero__shelf{position:absolute;left:0;right:0;bottom:0;height:44%;background:var(--acc-base);z-index:2}
.also-herostage .also-divider{position:absolute;top:calc(58% - 44px);left:0;right:0;z-index:3;margin:0}

/* headline over the video wall */
.also-hero--video .also-hero__vcontent{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;flex-direction:column;align-items:center;padding-top:clamp(2.5rem,12vh,8.5rem);padding-bottom:0;max-width:none}
.also-hero--video .also-eyebrow{justify-content:center;color:var(--acc-blue-pale)}
.also-hero__scrollhint{margin-top:1.1rem;color:rgba(253,244,230,.78);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.4rem}
.also-hero__scrollhint .also-ic{animation:also-bob 2.4s ease-in-out infinite}

/* reveal group on the cream counter (dark text) */
.also-hero__reveal{position:absolute;left:0;right:0;bottom:4.5%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:.85rem;text-align:center}
.also-hero__poplabel{color:var(--accent);margin-bottom:.2rem}
.also-hero__shelfhead{color:var(--text-strong);font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(1.3rem,.95rem + 1.25vw,1.9rem);line-height:1.05;letter-spacing:-.015em;margin:0 0 .3rem;max-width:none;white-space:nowrap;text-wrap:balance}
.also-hero__carousel{width:100%;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.also-hero__carousel-track{display:flex;gap:1.1rem;width:max-content;animation:also-scroll 55s linear infinite;will-change:transform}
.also-hero__carousel:hover .also-hero__carousel-track{animation-play-state:paused}
.also-microcard{flex:0 0 auto;width:210px;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;text-decoration:none;display:block;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.also-microcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.also-microcard__img{display:block;aspect-ratio:4/3;background:linear-gradient(150deg,var(--acc-clay),var(--acc-primary));overflow:hidden}
.also-microcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.also-microcard__name{display:block;font-family:var(--font-display);font-weight:600;color:var(--text-strong);padding:.55rem .85rem 0;font-size:1.05rem}
.also-microcard__price{display:block;color:var(--text-muted);font-size:.85rem;font-weight:600;padding:.05rem .85rem .7rem}
.also-hero__reveal .also-hero__offer{margin:0}
.also-hero__reveal .also-hero__lead{color:var(--text-muted);text-shadow:none;margin:0;max-width:48ch}
.also-hero__reveal .also-hero__ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.also-hero__reveal .also-hero__usps{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:center;list-style:none;margin:.2rem 0 0;padding:0}
.also-hero__reveal .also-hero__usps li{color:var(--text-strong);font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:.5rem}
.also-hero__reveal .also-hero__usps .also-ic{color:var(--accent)}
html:not(.hero-scrub) .also-hero__reveal{z-index:7}

/* scene: cup + products, 2/3 on the cream */
.also-hero__scene{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);z-index:5;width:min(1180px,96vw);display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.also-hero__cup{width:92%;height:auto;position:relative;z-index:2;transform:translateY(120px);filter:drop-shadow(0 30px 38px rgba(40,21,13,.5))}
.also-hero__packet--left,.also-hero__packet--right{position:absolute;bottom:calc(-7% + 100px);width:36%;height:auto;z-index:1;pointer-events:none}
.also-hero__packet--right{right:-22%;transform:translateX(135px) rotate(9deg)}
.also-hero__packet--left{left:-22%;transform:translateX(-150px) rotate(-9deg)}
/* Shorter laptop viewports (e.g. 15" MacBook Air in-browser ~800px): lift the headline + CTAs clear of the cups */
@media (min-width:900px) and (max-height:880px){
  .also-hero--video .also-hero__vcontent{padding-top:clamp(1rem,3vh,2.5rem)}
  .also-hero__ctas--top{margin-top:1rem}
  /* smaller cups + packaging so nothing clips on 15" laptop heights */
  .also-hero__scene{bottom:8%;width:min(1000px,84vw)}
  .also-hero__packet--left,.also-hero__packet--right{bottom:calc(-4% + 70px);width:33%}
  .also-hero__packet--right{right:-11%;transform:translateX(48px) rotate(9deg)}
  .also-hero__packet--left{left:-11%;transform:translateX(-48px) rotate(-9deg)}
}
/* shorter cream shelf: shrink the carousel so the shelf heading drops clear of the wave */
@media (min-width:900px) and (max-height:920px){
  .also-hero__reveal{gap:.55rem}
  .also-hero__shelfhead{font-size:clamp(1.2rem,.9rem + .9vw,1.55rem);margin-bottom:.15rem}
  .also-microcard{width:186px}
  .also-microcard__img{aspect-ratio:16/10}
}
@media (min-width:900px) and (max-height:760px){
  .also-hero__scene{bottom:5%;width:min(880px,76vw)}
  .also-hero__packet--left,.also-hero__packet--right{width:31%}
  .also-hero__packet--right{right:-8%;transform:translateX(32px) rotate(9deg)}
  .also-hero__packet--left{left:-8%;transform:translateX(-32px) rotate(-9deg)}
}

/* scrub-driven motion (JS sets --p on the stage) */
.hero-scrub .also-hero__reveal{opacity:calc((var(--p,0) - .5)*2.6);transform:translateY(calc((1 - var(--p,0))*36px));pointer-events:none}
.hero-scrub .also-hero__scene{opacity:calc(1 - var(--p,0)*1.8);transform:translate(-50%, calc(var(--p,0)*-40vh)) scale(calc(1 - var(--p,0)*.08))}
.hero-scrub .also-hero__scrollhint{opacity:calc(1 - var(--p,0)*4)}
.hero-scrub .also-hero-title{transform:translateY(calc(var(--p,0)*-2.5vh))}

/* Steam rising from the cup, drifting up behind the text + buttons */
.also-hero__smoke{position:absolute;bottom:72%;transform:translate(-50%,145px);z-index:1;width:1px;pointer-events:none}
.also-hero__smoke--left{left:28%}
.also-hero__smoke--right{left:71%}
.also-hero__smoke--right .also-smoke--1{animation-delay:-3.6s}
.also-hero__smoke--right .also-smoke--2{animation-delay:-1.5s}
.also-hero__smoke::before{content:"";position:absolute;left:50%;bottom:-50px;transform:translateX(-50%);width:300px;height:430px;background:radial-gradient(ellipse 46% 56% at 50% 78%,rgba(28,16,10,.20),rgba(28,16,10,.08) 45%,transparent 72%);filter:blur(10px);z-index:-1;pointer-events:none}
.also-smoke{position:absolute;left:50%;bottom:0;width:360px;max-width:none;height:469px;margin-left:-180px;transform-origin:50% 100%;opacity:0;will-change:transform,opacity,filter}
.also-smoke--1{animation:also-smoke-up 5.5s ease-in-out infinite;animation-delay:-2.2s}
.also-smoke--2{animation:also-smoke-up-flip 5.5s ease-in-out infinite;animation-delay:-4s}
.also-smoke--3{width:520px;height:678px;margin-left:-260px;animation:also-smoke-up 6.5s ease-in-out infinite;animation-delay:-1.4s}
@keyframes also-smoke-up{0%{transform:translateY(25px) scale(.6);opacity:0;filter:brightness(2.6) blur(3px)}14%{opacity:.245}74%{opacity:.205;filter:brightness(2.6) blur(7px)}100%{transform:translateY(-240px) scale(1.8) rotate(7deg);opacity:0;filter:brightness(2.6) blur(13px)}}
@keyframes also-smoke-up-flip{0%{transform:translateY(25px) scaleX(-1) scale(.6);opacity:0;filter:brightness(2.6) blur(3px)}14%{opacity:.245}74%{opacity:.205;filter:brightness(2.6) blur(7px)}100%{transform:translateY(-260px) scaleX(-1) scale(1.9) rotate(-7deg);opacity:0;filter:brightness(2.6) blur(13px)}}
@media (prefers-reduced-motion:reduce){.also-smoke{animation:none!important}.also-smoke--1{opacity:.215;transform:translateY(-90px) scale(1.25);filter:brightness(2.4) blur(8px)}.also-smoke--2,.also-smoke--3{display:none}}
.also-cycle{display:inline-block;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);color:inherit}
.also-cycle.is-out{opacity:0;transform:translateY(-.3em)}
@media (max-width:899px){.also-hero__smoke{display:none}}

/* Mobile / narrow: simple stacked hero over the video, no pin */
@media (max-width:899px){
  .also-herostage{min-height:0;background:var(--acc-ink-deep)}
  .also-hero--video{display:flex;flex-direction:column;align-items:center;gap:1.1rem;padding:clamp(5rem,16vw,7rem) var(--gutter) clamp(3rem,10vw,5rem)}
  .also-hero__bg{height:100%}
  .also-hero__shelf,.also-herostage .also-divider,.also-hero__scrollhint,.also-hero__packet{display:none}
  .also-hero--video .also-hero__vcontent,.also-hero__reveal,.also-hero__scene{position:relative;left:auto;bottom:auto;transform:none;opacity:1;width:100%;z-index:2}
  .also-hero__scene{width:min(72vw,320px);order:3}
  .also-hero__scene .also-hero__cup{width:100%}
  .also-hero__reveal{order:4}
  .also-hero__reveal .also-hero__lead,.also-hero__reveal .also-hero__usps li,.also-hero__shelfhead{color:rgba(253,244,230,.95)}
  .also-hero__shelfhead{white-space:normal}
  .also-hero__reveal .also-hero__offer{background:rgba(253,244,230,.14);color:var(--acc-cream);border:1px solid rgba(253,244,230,.3)}
  .also-hero-title{display:inline-block}
  .also-hero-title__sub{font-size:clamp(.7rem,2.4vw,1rem);margin-left:0;letter-spacing:.32em;padding-left:.32em}
}

/* ===== Headline: big display + small alt-font tagline tucked under-left ===== */
.also-hero--video .also-hero-title{display:inline-block;text-align:left;font-size:inherit;margin:.04em 0 0}
.also-hero-title__main{display:block;font-size:clamp(2.9rem,.4rem + 10.5vw,8.5rem);line-height:.9;letter-spacing:-.028em;padding:0 .16em}
.also-hero-title--anim .also-hero-title__main{overflow:hidden;padding-bottom:.26em;margin-bottom:-.22em}
.also-brk{display:none}
@media (min-width:768px){.also-brk{display:inline}}
/* longer 3-word headline: pull the main line down so it clears on one line */
.also-hero-title--long .also-hero-title__main{font-size:clamp(2rem,.3rem + 7vw,5.75rem);letter-spacing:-.03em}
/* "Also" picked out in the brand blue */
.also-brandword{font-style:italic;color:var(--acc-blue)}
.also-hero__head .also-brandword,.also-reveal .also-hero__head .also-brandword{color:#5f95af}
.also-hero-title__sub{display:block;text-align:center;font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:0.62em;font-size:clamp(1rem, .5rem + 1.7vw, 2rem);line-height:1;color:rgba(253,244,230,.85);margin-top:.45em;margin-left:0;padding-left:0.62em;-webkit-text-stroke:0;text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* CTAs sitting with the headline, over the video */
.also-hero__ctas--top{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.also-hero__ctas--top .also-btn{min-width:16rem}

/* ================= Mobile polish ================= */
/* hero: cups sit in flow above the shelf heading (cancel the desktop 120px drop) */
@media (max-width:899px){
  .also-hero__scene .also-hero__cup{transform:none}
  /* sub-line fits one line: smaller size, gentler tracking (placed last to win cascade) */
  .also-hero-title__sub{font-size:clamp(.78rem,3vw,1.05rem);letter-spacing:.24em;padding-left:.24em}
}
/* announce bar: one clean offer line instead of three cramped wraps */
@media (max-width:640px){
  .also-announce{padding-block:.6rem}
  .also-announce__item{display:none}
  .also-announce__item:last-child{display:inline-flex;white-space:nowrap}
}
/* moments: swipeable snap carousel instead of 12 stacked cards */
@media (max-width:560px){
  .also-moments-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;gap:.85rem;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) .6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .also-moments-grid::-webkit-scrollbar{display:none}
  .also-moments-grid .also-moment{scroll-snap-align:center;min-height:340px}
  .also-moments-sec .also-band-head p::after{content:" Swipe to explore →";color:var(--accent);font-weight:600}
}

/* ================= Client feedback — round 1 ================= */
/* 2. lighten the hero browns (warm espresso, not near-black) */
.also-hero__bg{background:#3A2115}
.also-hero__bg::after{background:linear-gradient(180deg,rgba(58,33,21,.34) 0%,rgba(58,33,21,.15) 26%,rgba(58,33,21,0) 46%),linear-gradient(180deg,rgba(58,33,21,0) 52%,rgba(58,33,21,.18) 64%,rgba(58,33,21,.46) 74%,rgba(58,33,21,.7) 82%,rgba(58,33,21,.9) 87%,#3A2115 90%,#3A2115 100%)}
.also-marquee--dark{background:#3A2115}
@media (max-width:899px){.also-herostage{background:#3A2115}}
/* 5. crisp headline — solid fill, no stroke, tight shadow */
.also-hero--video .also-hero-title{color:#FDF4E6;-webkit-text-stroke:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
/* 4. tagline: tighter tracking + ALSO pops (brighter blue, heavier, gentle glow) */
.also-hero-title__sub{letter-spacing:.3em;padding-left:.3em;color:rgba(253,244,230,.92)}
.also-hero-title__sub .also-brandword{font-weight:800;font-size:1.18em;color:#A9D2E8;text-shadow:0 0 16px rgba(147,187,207,.55)}
@media (max-width:899px){.also-hero-title__sub{letter-spacing:.22em;padding-left:.22em}}
/* 6. warm the routine section — kill the corporate white */
.also-routine__vid{filter:sepia(.32) saturate(1.05) brightness(.96)}
.also-routine__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,233,205,.5),rgba(253,244,230,.28) 55%,rgba(250,233,205,.45))}
/* 8. cups-per-bag tiles */
.also-costnote__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.15rem}
.also-costnote__stats .ct{display:flex;flex-direction:column;gap:.05rem;background:var(--acc-base);border:1px solid var(--border);border-radius:var(--radius-md);padding:.7rem .4rem;align-items:center}
.also-costnote__stats .ct b{font-family:var(--font-display);font-weight:var(--fw-display);font-size:1.3rem;color:var(--accent)}
.also-costnote__stats .ct i{font-style:normal;color:var(--text-muted);font-size:.88rem;font-weight:600}
/* 10. clay well: warm caramel instead of pink */
.also-well--clay{background:linear-gradient(160deg,#F2DDBE,#D9B285)}
/* 11. footer kicker: clearly brand blue */
.also-footcta__kicker{color:var(--acc-blue)}
/* 12. footer logo: exact SVG, tinted cream, no cropping */
.also-foot-base__logo{height:30px;width:auto;filter:brightness(0) invert(97%) sepia(12%) saturate(628%) hue-rotate(314deg) brightness(103%)}

/* ===== Feedback round 1b — decisive versions ===== */
/* hero: properly lighter warm espresso (not near-black) */
.also-hero__bg{background:#46281A}
.also-hero__bg .also-hero__veil{background:rgba(235,199,164,.62)}
.also-hero__bg::after{background:linear-gradient(180deg,rgba(70,40,26,.30) 0%,rgba(70,40,26,.12) 26%,rgba(70,40,26,0) 46%),linear-gradient(180deg,rgba(70,40,26,0) 52%,rgba(70,40,26,.16) 64%,rgba(70,40,26,.42) 74%,rgba(70,40,26,.66) 82%,rgba(70,40,26,.88) 87%,#46281A 90%,#46281A 100%)}
.also-marquee--dark{background:#46281A}
@media (max-width:899px){.also-herostage{background:#46281A}}
/* hero secondary button: cream (removes the blue-vs-blue mismatch entirely) */
.also-hero__ctas--top .also-btn--secondary{background:var(--acc-cream);color:var(--acc-ink-deep)}
.also-hero__ctas--top .also-btn--secondary:hover{background:#fff;color:var(--acc-ink-deep)}
/* routine section: warm sand, not corporate grey-white */
.also-routine__vid{filter:sepia(.5) saturate(1.18) brightness(.9)}
.also-routine__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(248,228,197,.74),rgba(250,233,205,.6) 55%,rgba(246,224,190,.72))}

/* ===== Feedback round 2 ===== */
/* Shop coffee back to the brand blue (matches Subscribe) */
.also-hero__ctas--top .also-btn--secondary{background:var(--acc-blue);color:var(--acc-ink-deep)}
.also-hero__ctas--top .also-btn--secondary:hover{background:var(--acc-blue-hover);color:var(--acc-ink-deep)}
/* hero video: genuinely lighter */
.also-hero__video{filter:brightness(1.24) saturate(1.05)}
.also-hero__bg{background:#54301C}
.also-hero__bg .also-hero__veil{background:rgba(240,208,172,.48)}
.also-hero__bg::after{background:linear-gradient(180deg,rgba(84,48,28,.26) 0%,rgba(84,48,28,.1) 26%,rgba(84,48,28,0) 46%),linear-gradient(180deg,rgba(84,48,28,0) 52%,rgba(84,48,28,.14) 64%,rgba(84,48,28,.4) 74%,rgba(84,48,28,.64) 82%,rgba(84,48,28,.88) 87%,#54301C 90%,#54301C 100%)}
.also-marquee--dark{background:#54301C}
@media (max-width:899px){.also-herostage{background:#54301C}}
/* headline: kill the soft/wonky variation axes — crisp serif */
.also-hero--video .also-hero-title{font-variation-settings:"opsz" 144;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
/* tagline: normal tracking + the logo's own "Also" lettering, gently breathing */
.also-hero-title__sub{letter-spacing:.12em;padding-left:.12em}
@media (max-width:899px){.also-hero-title__sub{letter-spacing:.1em;padding-left:.1em}}
.also-brandword-img{height:1.5em;width:auto;display:inline-block;vertical-align:-.34em;margin:0 .12em;animation:also-word-breathe 3.2s ease-in-out infinite alternate}
@keyframes also-word-breathe{from{transform:translateY(0);filter:drop-shadow(0 0 5px rgba(169,210,232,.3))}to{transform:translateY(-3px);filter:drop-shadow(0 0 16px rgba(169,210,232,.7))}}
@media (prefers-reduced-motion:reduce){.also-brandword-img{animation:none}}
/* routine section: pale blue (#E2F4FD), text tuned to match */
.also-routine{background:#E2F4FD}
.also-routine__vid{filter:none;opacity:.14}
.also-routine__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(226,244,253,.55),rgba(226,244,253,.35) 55%,rgba(226,244,253,.6))}
.also-routine__glow{background:radial-gradient(50% 44% at 32% 33%,rgba(255,255,255,.85),rgba(226,244,253,.4) 42%,rgba(226,244,253,0) 74%)}
.also-routine .also-eyebrow{color:#2A6FB0}
.also-routine__title em{color:#2A6FB0}
.also-routine__benefits .ic{color:#2A6FB0;border-color:#C3DBE7}

/* ===== Feedback round 3 ===== */
/* 1. hero: veil much lighter; legibility comes from a soft vignette behind the text, not a dark wash */
.also-hero__video{filter:brightness(1.32) saturate(1.06)}
.also-hero__bg .also-hero__veil{background:rgba(240,208,172,.26)}
.also-hero__bg::after{background:linear-gradient(180deg,rgba(84,48,28,.16) 0%,rgba(84,48,28,.05) 22%,rgba(84,48,28,0) 40%),linear-gradient(180deg,rgba(84,48,28,0) 55%,rgba(84,48,28,.12) 66%,rgba(84,48,28,.36) 75%,rgba(84,48,28,.6) 82%,rgba(84,48,28,.85) 87%,#54301C 90%,#54301C 100%)}
.also-hero--video .also-hero__vcontent::before{content:"";position:absolute;top:-4%;left:50%;transform:translateX(-50%);width:min(1150px,96vw);height:82%;background:radial-gradient(58% 60% at 50% 36%,rgba(58,31,17,.38),rgba(58,31,17,0) 72%);z-index:-1;pointer-events:none;filter:blur(8px)}
/* 2. routine: flat colour at both edges so the waves blend seamlessly */
.also-routine__bg::after{background:linear-gradient(180deg,#E2F4FD 0%,rgba(226,244,253,.5) 20%,rgba(226,244,253,.42) 62%,#E2F4FD 100%)}
.also-routine__scene--edge-r{display:none!important}
/* plan card: blue-tuned rows + lifestyle strip */
.also-planrow{background:linear-gradient(150deg,#F6FBFE,#E9F5FC);border:1px solid #D8EBF7}
.also-planrow:hover{background:#fff}
.also-planrow__body .lab{color:#2A6FB0}
.also-routine__snap{display:flex;gap:.65rem;margin:0 0 1.2rem}
.also-routine__snap img{width:33.33%;min-width:0;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.also-routine__snap img:nth-child(2){transform:translateY(-6px)}
/* 3. moments: cobloc-style full-bleed drag carousel on every screen */
.also-moments-grid{display:flex;grid-template-columns:none;grid-auto-flow:initial;grid-auto-columns:initial;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin:0 calc(50% - 50vw);padding:.4rem max(var(--gutter),calc(50vw - 660px)) 1.3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.also-moments-grid::-webkit-scrollbar{display:none}
.also-moments-grid:active{cursor:grabbing}
.also-moments-grid .also-moment{flex:0 0 clamp(280px,26vw,380px);scroll-snap-align:center;min-height:400px;user-select:none}
.also-moments-grid .also-moment__img{transition:none;will-change:transform;transform:scale(1.14)}
.also-mcar-nav{display:flex;justify-content:center;gap:.7rem;margin-top:1.1rem}
.also-mcar-btn{width:52px;height:52px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface-card);color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-xs);transition:background .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s}
.also-mcar-btn:hover{background:var(--accent);color:var(--acc-cream);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.also-mcar-btn .also-ic{width:1.25em;height:1.25em}
.also-mcar-btn[data-mdir="-1"] .also-ic{transform:rotate(180deg)}
/* 4. footer CTA: latte-art leaf + giant faint marquee headline */
.also-footcta__leafimg{width:54px;height:auto;margin-bottom:1rem;opacity:.96;filter:drop-shadow(0 4px 14px rgba(0,0,0,.25))}
.also-footcta__marquee{width:100vw;position:relative;left:50%;transform:translateX(-50%);overflow:hidden;margin:0 0 1.6rem;pointer-events:none}
.also-footcta__mtrack{display:flex;width:max-content;animation:also-footmq 60s linear infinite}
.also-footcta__mtrack span{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:600;font-size:clamp(3.2rem,7.5vw,6.4rem);line-height:1.15;letter-spacing:-.02em;white-space:nowrap;color:rgba(253,244,230,.14)}
.also-footcta__mtrack i{font-style:normal;margin:0 .4em;color:rgba(147,187,207,.28)}
@keyframes also-footmq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.also-footcta__mtrack{animation:none}}
@media (max-width:560px){.also-routine__snap img:nth-child(3){display:none}.also-routine__snap img{width:50%}}

/* ===== Feedback round 4 ===== */
/* latte leaf: dead centre */
.also-footcta__leafimg{display:block;margin:0 auto 1rem}
/* marquee: bigger + more visible (still soft) */
.also-footcta__mtrack span{font-size:clamp(4rem,8.5vw,7.8rem);color:rgba(253,244,230,.21)}
.also-footcta__mtrack i{color:rgba(147,187,207,.36)}
/* hero: brighter again — video leads, brighter text */
.also-hero__video{filter:brightness(1.5) saturate(1.08)}
.also-hero__bg .also-hero__veil{background:rgba(242,214,180,.15)}
.also-hero__bg::after{background:linear-gradient(180deg,rgba(84,48,28,.1) 0%,rgba(84,48,28,.03) 20%,rgba(84,48,28,0) 36%),linear-gradient(180deg,rgba(84,48,28,0) 56%,rgba(84,48,28,.1) 67%,rgba(84,48,28,.32) 75%,rgba(84,48,28,.58) 82%,rgba(84,48,28,.84) 87%,#54301C 90%,#54301C 100%)}
.also-hero--video .also-hero-title{color:#FFFDF7}
.also-hero-title__sub{color:rgba(255,253,247,.96)}
/* scrub needs a free-running track on desktop (snap stays on touch) */
@media (min-width:900px){.also-moments-grid{scroll-snap-type:none}}
/* brandword: deeper blue + constant dark shadow so it reads on the brighter video */
.also-brandword-img{animation:also-word-breathe2 3.2s ease-in-out infinite alternate;filter:drop-shadow(0 2px 9px rgba(46,22,10,.6))}
@keyframes also-word-breathe2{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.also-brandword-img{animation:none}}

/* ===== Feedback round 5: cream glow around the hero edges (matches header + body) ===== */
.also-hero__bg::after{background:
  linear-gradient(180deg,rgba(253,244,230,.6) 0%,rgba(253,244,230,.18) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.55) 0%,rgba(253,244,230,0) 14%,rgba(253,244,230,0) 86%,rgba(253,244,230,.55) 100%),
  linear-gradient(180deg,rgba(84,48,28,0) 58%,rgba(84,48,28,.1) 68%,rgba(84,48,28,.32) 76%,rgba(84,48,28,.58) 83%,rgba(84,48,28,.84) 88%,#54301C 91%,#54301C 100%)}
/* mobile keeps the simpler vertical fade (no cream side-glow on the dark stacked hero) */
@media (max-width:899px){
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(84,48,28,.12) 0%,rgba(84,48,28,0) 30%),linear-gradient(180deg,rgba(84,48,28,0) 55%,rgba(84,48,28,.35) 75%,rgba(84,48,28,.75) 88%,#54301C 100%)}
}
@media (max-width:899px){.also-hero--video .also-hero__vcontent::before{background:radial-gradient(62% 66% at 50% 40%,rgba(58,31,17,.46),rgba(58,31,17,0) 75%)}}

/* ===== Feedback round 6: natural video + brightness only; bottom band = light latte (halfway to cream) ===== */
.also-hero__bg .also-hero__veil{display:none}
.also-hero__video{filter:brightness(1.38) saturate(1.04)}
.also-hero__bg{background:#A89281}
.also-hero__bg::after{background:
  linear-gradient(180deg,rgba(253,244,230,.6) 0%,rgba(253,244,230,.18) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.5) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.5) 100%),
  linear-gradient(180deg,rgba(168,146,129,0) 58%,rgba(168,146,129,.28) 68%,rgba(168,146,129,.58) 77%,rgba(168,146,129,.85) 85%,#A89281 91%,#A89281 100%)}
.also-marquee--dark{background:#A89281;color:var(--acc-ink-deep)}
@media (max-width:899px){
  .also-herostage{background:#A89281}
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(168,146,129,0) 55%,rgba(168,146,129,.5) 80%,#A89281 96%)}
  .also-hero__reveal .also-hero__lead,.also-hero__reveal .also-hero__usps li,.also-hero__shelfhead{color:var(--acc-ink-deep)}
}

/* ===== Feedback round 7: seamless cream bottom (no visible band) + richer pour ===== */
.also-hero__video{filter:brightness(1.3) contrast(1.14) saturate(1.2)}
.also-hero__bg{background:var(--acc-base)}
.also-hero__bg::after{background:
  linear-gradient(180deg,rgba(253,244,230,.6) 0%,rgba(253,244,230,.18) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.5) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.5) 100%),
  linear-gradient(180deg,rgba(253,244,230,0) 56%,rgba(253,244,230,.3) 70%,rgba(253,244,230,.7) 84%,#FDF4E6 94%,#FDF4E6 100%)}
@media (max-width:899px){
  .also-herostage{background:var(--acc-base)}
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(253,244,230,0) 55%,rgba(253,244,230,.55) 80%,#FDF4E6 96%)}
}

/* ===== Feedback round 8: white shelf so the cream wave shows; cards defined on white ===== */
.also-hero__shelf{background:#fff}
.also-microcard{border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.also-microcard:hover{box-shadow:var(--shadow-md)}

/* ===== Feedback round 9: testimonial strip back to the rich subscription brown ===== */
.also-marquee--dark{background:var(--acc-primary);color:var(--acc-cream)}

/* ===== Feedback round 10 — consolidated client list ===== */

/* Darker pour: high-contrast grade deepens the coffee streams, keeps the scene bright */
.also-hero__video{filter:brightness(1.12) contrast(1.4) saturate(1.32)}

/* Footer: official cream workmark is already the right colour — drop the legacy tint */
.also-foot-base__logo{filter:none;height:30px;opacity:.96}

/* Cards no longer clipped at the bottom of the hero shelf */
.also-hero__reveal{bottom:6.5%}
.also-hero__carousel{padding-bottom:12px}

/* Packaging bleed restored on the right of the routine section */
.also-routine__panel{position:relative;z-index:2}
.also-routine__pack{display:none}
@media (min-width:1024px){
  .also-routine__pack{display:block;position:absolute;right:0;top:53%;bottom:auto;width:clamp(210px,16vw,285px);height:auto;z-index:1;transform:translate(36%,-50%) rotate(8deg);filter:drop-shadow(0 16px 22px rgba(40,21,13,.22));pointer-events:none}
}

/* Faint brand emblem watermark in light section backgrounds */
.also-hasemblem{position:relative}
.also-hasemblem>.also-container{position:relative;z-index:1}
.also-emblem-bg{position:absolute;width:clamp(190px,20vw,300px);height:auto;opacity:.06;z-index:0;pointer-events:none}
.also-emblem-bg--tl{top:7%;left:3.5%;transform:rotate(-8deg)}
.also-emblem-bg--br{right:4%;bottom:calc(9% + 560px);transform:rotate(9deg)}

/* Faint beans video behind "How the subscription works" — fades from the flat brown top & bottom */
.also-how__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.also-how__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;filter:grayscale(.15) sepia(.35) saturate(1.4) brightness(.68)}
.also-how__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--acc-primary) 0%,color-mix(in srgb,var(--acc-primary) 74%,transparent) 24%,color-mix(in srgb,var(--acc-primary) 58%,transparent) 50%,color-mix(in srgb,var(--acc-primary) 74%,transparent) 76%,var(--acc-primary) 100%)}
.also-how__emblem{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:clamp(170px,17vw,240px);height:auto;opacity:.07;z-index:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.also-how__vid{display:none}}

/* Point 11: make the "small moments shape big days" marquee clearly brand-blue */
.also-footcta__mtrack span{color:rgba(147,187,207,.28)}
.also-footcta__mtrack i{color:rgba(147,187,207,.5)}

/* ===== Feedback round 11: hero shelf + wave → brown (USP-bar colour); USP bar a step darker ===== */
.also-hero__shelf{background:#714230}
.also-hero__bg::after{background:
  linear-gradient(180deg,rgba(253,244,230,.6) 0%,rgba(253,244,230,.18) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.5) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.5) 100%),
  linear-gradient(180deg,rgba(113,66,48,0) 56%,rgba(113,66,48,.35) 70%,rgba(113,66,48,.75) 84%,#714230 93%,#714230 100%)}
/* shelf heading + cards read on brown */
.also-hero__reveal .also-hero__shelfhead{color:#FDF4E6}
.also-microcard{border-color:rgba(253,244,230,.18);box-shadow:0 20px 34px -16px rgba(20,10,4,.55)}
/* scrolling USP bar → slightly darker brown */
.also-marquee--dark{background:#5C3526;color:var(--acc-cream)}
/* mobile: below-video area brown too, heading cream */
@media (max-width:899px){
  .also-herostage{background:#714230}
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(113,66,48,0) 55%,rgba(113,66,48,.55) 80%,#714230 96%)}
  .also-hero__reveal .also-hero__shelfhead,.also-hero__reveal .also-hero__lead,.also-hero__reveal .also-hero__usps li{color:#FDF4E6}
}

/* ===== Feedback round 12: visible wave, cream video fade, darker pour, un-clipped shadows ===== */
/* video fade back to cream on desktop (kept brown on mobile where the below-video area is brown) */
.also-hero__bg::after{background:
  linear-gradient(180deg,rgba(253,244,230,.6) 0%,rgba(253,244,230,.18) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.5) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.5) 100%),
  linear-gradient(180deg,rgba(253,244,230,0) 56%,rgba(253,244,230,.3) 70%,rgba(253,244,230,.7) 84%,#FDF4E6 94%,#FDF4E6 100%)}
@media (max-width:899px){
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(113,66,48,0) 55%,rgba(113,66,48,.55) 80%,#714230 96%)}
}
/* pour darker via warm tonal shift (sepia+saturation), not global darkening — keeps the bg corners from crushing to a black blob */
.also-hero__video{filter:brightness(1.08) contrast(1.2) saturate(1.45) sepia(.32)}
/* microcard shadow no longer clipped by the carousel: contain it with padding + a softer shadow */
.also-hero__carousel{padding:12px 0 32px}
.also-microcard{box-shadow:0 14px 26px -12px rgba(20,10,4,.5)}

/* ===== Feedback round 12b: remove the clipped dark vignette behind the title; lean on the text shadow ===== */
.also-hero--video .also-hero__vcontent::before{display:none!important}
.also-hero--video .also-hero-title{filter:drop-shadow(0 2px 3px rgba(30,16,8,.55))}
.also-hero-title__sub{text-shadow:0 1px 4px rgba(30,16,8,.55)}

/* ===== Feedback round 12c: give Fraunces heading descenders room so bottoms aren't clipped ===== */
.also-band-head h2,.also-band-head h3,.also-hero__shelfhead,.also-routine__title,.also-footcta__title,.also-nlcard__title,.also-jstep__title,.also-faqx__head h2{padding-bottom:.14em}

/* ===== Feedback round 12d: soft cream lift over the video's dark top-left corner (desktop) ===== */
.also-hero__bg::after{background:
  radial-gradient(58% 52% at 16% 22%,rgba(253,244,230,.26),rgba(253,244,230,0) 70%),
  linear-gradient(180deg,rgba(253,244,230,.6) 0%,rgba(253,244,230,.18) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.5) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.5) 100%),
  linear-gradient(180deg,rgba(253,244,230,0) 56%,rgba(253,244,230,.3) 70%,rgba(253,244,230,.7) 84%,#FDF4E6 94%,#FDF4E6 100%)}
@media (max-width:899px){
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(113,66,48,0) 55%,rgba(113,66,48,.55) 80%,#714230 96%)}
}

/* ===== Feedback round 13: cream fade starts higher so the video melts into the cream band (no hard top edge) ===== */
.also-hero__bg::after{background:
  radial-gradient(58% 52% at 16% 22%,rgba(253,244,230,.26),rgba(253,244,230,0) 70%),
  linear-gradient(180deg,rgba(253,244,230,.6) 0%,rgba(253,244,230,.18) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.5) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.5) 100%),
  linear-gradient(180deg,rgba(253,244,230,0) 38%,rgba(253,244,230,.22) 46%,rgba(253,244,230,.55) 51%,rgba(253,244,230,.85) 55%,#FDF4E6 59%,#FDF4E6 100%)}
@media (max-width:899px){
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(113,66,48,0) 52%,rgba(113,66,48,.4) 72%,rgba(113,66,48,.8) 86%,#714230 96%)}
}

/* ===== Feedback round 14: keep the video visible; feather the wave's cream crest instead of washing the whole video ===== */
.also-hero__bg::after{background:
  radial-gradient(58% 52% at 16% 22%,rgba(253,244,230,.26),rgba(253,244,230,0) 70%),
  linear-gradient(180deg,rgba(253,244,230,.6) 0%,rgba(253,244,230,.18) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.5) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.5) 100%),
  linear-gradient(180deg,rgba(253,244,230,0) 52%,rgba(253,244,230,.18) 60%,rgba(253,244,230,.5) 64%,#FDF4E6 69%,#FDF4E6 100%)}
@media (max-width:899px){
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(113,66,48,0) 55%,rgba(113,66,48,.5) 78%,#714230 94%)}
}
/* soften the divider's cream crest so it melts into the video (no hard top line), wavy line stays crisp */
.also-herostage .also-divider{-webkit-mask:linear-gradient(180deg,transparent 0%,#000 50%);mask:linear-gradient(180deg,transparent 0%,#000 50%)}

/* ===== Feedback round 15: raise the brown wave/shelf so the empty cream gap shrinks ===== */
.also-hero__shelf{height:52%}
.also-herostage .also-divider{top:calc(50% - 44px)}
.also-hero__bg::after{background:
  radial-gradient(58% 52% at 16% 22%,rgba(253,244,230,.26),rgba(253,244,230,0) 70%),
  linear-gradient(180deg,rgba(253,244,230,.6) 0%,rgba(253,244,230,.18) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.5) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.5) 100%),
  linear-gradient(180deg,rgba(253,244,230,0) 40%,rgba(253,244,230,.2) 46%,rgba(253,244,230,.55) 49%,#FDF4E6 53%,#FDF4E6 100%)}
@media (max-width:899px){
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(113,66,48,0) 55%,rgba(113,66,48,.5) 78%,#714230 94%)}
}

/* ===== Feedback round 16: raise wave further + shorten scrub so the scrolled cream gap shrinks ===== */
.also-hero__shelf{height:56%}
.also-herostage .also-divider{top:calc(46% - 44px)}
.hero-scrub .also-heroscroll{height:100vh}
.also-hero__bg::after{background:
  radial-gradient(58% 52% at 16% 20%,rgba(253,244,230,.24),rgba(253,244,230,0) 68%),
  linear-gradient(180deg,rgba(253,244,230,.55) 0%,rgba(253,244,230,.16) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.45) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.45) 100%),
  linear-gradient(180deg,rgba(253,244,230,0) 34%,rgba(253,244,230,.25) 41%,rgba(253,244,230,.6) 44%,#FDF4E6 47%,#FDF4E6 100%)}
@media (max-width:899px){
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(113,66,48,0) 55%,rgba(113,66,48,.5) 78%,#714230 94%)}
}

/* ===== Feedback round 17 ===== */
/* 1. remove the divider mask (it revealed dark video through the crest = the "drop shadow") */
.also-herostage .also-divider{-webkit-mask:none!important;mask:none!important}
/* 2. much more gradual video→cream fade (no mask now, so the gradient does all the blending) */
.also-hero__bg::after{background:
  radial-gradient(58% 52% at 16% 20%,rgba(253,244,230,.2),rgba(253,244,230,0) 66%),
  linear-gradient(180deg,rgba(253,244,230,.5) 0%,rgba(253,244,230,.14) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.4) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.4) 100%),
  linear-gradient(180deg,rgba(253,244,230,0) 28%,rgba(253,244,230,.08) 37%,rgba(253,244,230,.24) 43%,rgba(253,244,230,.48) 48%,rgba(253,244,230,.72) 52%,rgba(253,244,230,.9) 55%,#FDF4E6 59%,#FDF4E6 100%)}
@media (max-width:899px){
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(113,66,48,0) 52%,rgba(113,66,48,.35) 72%,rgba(113,66,48,.75) 86%,#714230 96%)}
}
/* 3. bigger header logo */
.also-logo img{height:38px}
/* 4. hero "Also" logotype → white (was light blue) */
.also-brandword-img{filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(30,16,8,.5))!important}
/* 5. de-blur the title: stop forcing it onto a GPU layer + use text-shadow instead of a filter layer */
.also-hero-title--anim .wd{will-change:auto}
.hero-scrub .also-hero-title{transform:none}
.also-hero--video .also-hero-title{filter:none;-webkit-text-stroke:0;text-shadow:0 2px 4px rgba(30,16,8,.5),0 1px 2px rgba(30,16,8,.45)}

/* ===== Feedback round 18 ===== */
/* 1. subtitle "you Also need a coffee" gets the same crisp shadow as the main title */
.also-hero-title__sub{text-shadow:0 2px 4px rgba(30,16,8,.5),0 1px 2px rgba(30,16,8,.45)}
.also-brandword-img{filter:brightness(0) invert(1) drop-shadow(0 2px 4px rgba(30,16,8,.5)) drop-shadow(0 1px 2px rgba(30,16,8,.45))!important}
/* 2. "Also" floats more — bigger, livelier motion */
@keyframes also-word-float{0%{transform:translateY(4px) rotate(-1.2deg)}100%{transform:translateY(-9px) rotate(1.2deg)}}
.also-brandword-img{animation:also-word-float 2.3s ease-in-out infinite alternate!important}
/* 3. cream fade much lighter + more gradual so more of the coffee video shows */
.also-hero__bg::after{background:
  radial-gradient(58% 50% at 16% 20%,rgba(253,244,230,.14),rgba(253,244,230,0) 64%),
  linear-gradient(180deg,rgba(253,244,230,.42) 0%,rgba(253,244,230,.1) 8%,rgba(253,244,230,0) 18%),
  linear-gradient(90deg,rgba(253,244,230,.3) 0%,rgba(253,244,230,0) 13%,rgba(253,244,230,0) 87%,rgba(253,244,230,.3) 100%),
  linear-gradient(180deg,rgba(253,244,230,0) 20%,rgba(253,244,230,.03) 34%,rgba(253,244,230,.09) 42%,rgba(253,244,230,.18) 48%,rgba(253,244,230,.3) 53%,rgba(253,244,230,.44) 57%,rgba(253,244,230,.6) 61%,rgba(253,244,230,.76) 64%,rgba(253,244,230,.89) 66%,#FDF4E6 68%,#FDF4E6 100%)}
@media (max-width:899px){
  .also-hero__bg::after{background:linear-gradient(180deg,rgba(113,66,48,0) 55%,rgba(113,66,48,.4) 76%,rgba(113,66,48,.8) 88%,#714230 97%)}
}
/* 4. pour darker — aggressive tonal grade (near the CSS limit on this bright/backlit clip) */
.also-hero__video{filter:brightness(.78) contrast(1.55) saturate(1.42) sepia(.42)}
/* 5a. footer ambient glow no longer clipped at the top edge */
.also-footer__glow--a{top:4%;left:1%;width:460px;height:460px}
/* 5b. marquee descenders (g/y/p in "big days") no longer clipped */
.also-footcta__mtrack span{line-height:1.42}
.also-footcta__marquee{padding-bottom:.1em}

/* ===== New hero video (darker pour clip) — reset to a gentle grade ===== */
.also-hero__video{filter:contrast(1.05) saturate(1.06)}

/* ===== New cup overlay (v3) — slightly larger ===== */
.also-hero__cup{width:101%}
@media (max-width:899px){.also-hero__scene .also-hero__cup{width:108%}}

/* ===== Cups: 1/3 bigger + lifted up to overlap the wave ===== */
.also-hero__cup{width:135%;transform:translateY(-30px)}
@media (max-width:899px){.also-hero__scene .also-hero__cup{width:144%;transform:translateY(-10px)}}

/* ===== Cups: bigger + down 100px (from -30px → 70px) ===== */
.also-hero__cup{width:158%;transform:translateY(70px)}
@media (max-width:899px){.also-hero__scene .also-hero__cup{width:165%;transform:translateY(24px)}}

/* cups 5% bigger (158% -> 166%) */
.also-hero__cup{width:166%}
@media (max-width:899px){.also-hero__scene .also-hero__cup{width:173%}}

/* cups another 5% bigger (166% -> 174%) */
.also-hero__cup{width:174%}
@media (max-width:899px){.also-hero__scene .also-hero__cup{width:182%}}

/* cups: the img max-width:100% cap was ignoring every width increase — lift it, then set a real size */
.also-hero__cup{max-width:none;width:138%;transform:translateY(70px)}
@media (max-width:899px){.also-hero__scene .also-hero__cup{max-width:none;width:140%;transform:translateY(24px)}}

/* cups down 100px (70px -> 170px) */
.also-hero__cup{transform:translateY(200px)}
@media (max-width:899px){.also-hero__scene .also-hero__cup{transform:translateY(88px)}}

/* header logo: remove the downward nudge so it's vertically centred */
.also-logo{margin-top:0}

/* "How the subscription works": make the beans video stand out more (brighter + thinner overlay) */
.also-how__vid{opacity:.36;filter:grayscale(.1) sepia(.28) saturate(1.5) brightness(.9)}
.also-how__bg::after{background:linear-gradient(180deg,var(--acc-primary) 0%,color-mix(in srgb,var(--acc-primary) 66%,transparent) 22%,color-mix(in srgb,var(--acc-primary) 40%,transparent) 50%,color-mix(in srgb,var(--acc-primary) 66%,transparent) 78%,var(--acc-primary) 100%)}

/* values grid: 5 USPs on desktop only; ≤920px falls back to the responsive 2-col / 1-col rules */
@media(min-width:921px){.also-values-grid{grid-template-columns:repeat(5,1fr)}}

/* reverted to the previous hero video — restore the grade it had before the swap */
.also-hero__video{filter:brightness(.78) contrast(1.55) saturate(1.42) sepia(.42)}

/* ============================================================
   REFINEMENT PASS — client brief (2026-07-15)
   ============================================================ */

/* -- "also" brand word: colour switch (item 1) ---------------
   The animated "also" word is an SVG shown via a CSS filter.
   Switch its colour by changing ONE token below — no need to
   touch the hero markup or the breathing animation.
     White (matches hero title)   : brightness(0) invert(1)
     Brand light-blue (SVG native): none
   ------------------------------------------------------------ */
:root{--also-word-filter:drop-shadow(0 0 12px rgba(14,7,3,.62)) drop-shadow(0 2px 6px rgba(30,16,8,.55))} /* current = brand blue (SVG native #93BBCF) + dark halo so it lifts off the video. For white: brightness(0) invert(1) drop-shadow(0 0 12px rgba(14,7,3,.62)) drop-shadow(0 2px 6px rgba(30,16,8,.55)) */
.also-brandword-img{filter:var(--also-word-filter)!important}

/* -- Hero supporting line (item 1) -- */
.also-hero__vsub{margin:1.2rem auto .1rem;max-width:30ch;color:var(--acc-cream);font-size:clamp(1rem,.94rem + .4vw,1.16rem);line-height:1.45;font-weight:500;text-shadow:0 2px 14px rgba(20,10,4,.55)}
@media(max-width:560px){.also-hero__vsub{font-size:.98rem;max-width:26ch}}

/* -- Routine CTA bean scatter (item 5) -- */
.also-routine__ctawrap{position:relative;display:inline-block;padding-bottom:30px}
.also-routine__cta{position:relative;z-index:1}
.also-routine__beans{position:absolute;left:50%;bottom:-4px;width:min(300px,94%);height:auto;transform:translateX(-50%);opacity:.6;z-index:0;pointer-events:none}
@media(max-width:560px){.also-routine__beans{width:min(240px,90%);opacity:.5}}

/* -- "How far does a bag go?" dark-brown panel (item 10) -- */
.also-costnote{background:var(--acc-primary);border-color:rgba(255,255,255,.16)}
.also-costnote>strong{color:var(--acc-cream)}
.also-costnote__stats .ct{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.also-costnote__stats .ct b{color:var(--acc-blue)}
.also-costnote__stats .ct i{color:rgba(253,244,230,.82)}
.also-costnote__foot{color:rgba(253,244,230,.82)}

/* -- Subscription CTA hierarchy (item 9) -- */
.also-how__cta{flex-direction:column;gap:.8rem;align-items:center}
.also-how__ctahint{margin:0;color:var(--acc-cream);font-weight:600;font-size:1.06rem;max-width:36ch;line-height:1.4;text-align:center}
.also-how__ctaalt{margin:0;color:rgba(253,244,230,.74);font-size:.92rem}
.also-how__ctaalt a{color:var(--acc-cream);text-decoration:underline;text-underline-offset:2px}

/* -- Social proof: stories over stats (item 11) -- */
.also-proof__stats .n{font-size:clamp(1.55rem,1.05rem + 1.3vw,2.15rem)}
.also-story__q{font-size:1.2rem}
.also-story--featured .also-story__q{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.15rem)}

/* -- Value USPs: each card sizes to its content, centred, always single-line (no two-line stacking) -- */
.also-values-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:1.15rem clamp(1.4rem,3vw,2.6rem)}
.also-value{flex:0 0 auto}
.also-value h3,.also-value p{white-space:nowrap}
/* mobile: clean full-width left-aligned stack */
@media(max-width:560px){
  .also-values-grid{flex-direction:column;align-items:stretch;justify-content:flex-start}
}

/* -- Announce bar: 4 items, one row on wide screens, no mid-item wrap -- */
.also-announce{flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between}
.also-announce__item{flex:0 1 auto;white-space:nowrap}

/* ===== Hero: soften ONLY the cream gradient above the wave (wave stays crisp) ===== */
@media(min-width:900px){.also-hero__bg::after{filter:blur(3px)}}

/* ===== Header: swap the hard 1px border (shows as a dividing line over the hero on scroll) for a soft shadow ===== */
.also-header{border-bottom:0;box-shadow:0 6px 22px -10px rgba(40,21,13,.16)}

/* -- Coffee Calculator push line inside the dark "How far does a bag go?" panel -- */
.also-costnote__calc{display:block;margin-top:.8rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.15);color:var(--acc-cream);font-size:var(--fs-small);font-weight:600;line-height:1.45}
.also-costnote__calc .also-ic{width:1.05em;height:1.05em;vertical-align:-2px;margin-right:.4rem;color:var(--acc-blue)}

/* -- Routine: real coffee beans in the blue space below the stars (replaces the SVG scatter) -- */
.also-routine__beansfill{display:block;width:min(100%,440px);height:auto;margin:1.9rem 0 0;opacity:.97;pointer-events:none;user-select:none}
@media(max-width:920px){.also-routine__beansfill{display:none}}

/* -- Footer: real payment brand icons (replace the text badges) -- */
.also-foot-pay li{border:0;background:none;padding:0;line-height:0}
.also-foot-pay svg,.also-foot-pay img{display:block;height:28px;width:auto;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* ===== Responsive QA pass (desktop / tablet / mobile) ===== */
/* 1. The cups carry a downward translate for the desktop "table" composition. Below the desktop
      breakpoint there is no table, so that translate pushed them over the shelf heading. Reset it. */
@media (max-width:899px){.also-hero__scene .also-hero__cup{transform:none}}
/* 2. Tablet: the hero scene was capped at 320px (a mobile size), leaving the cups tiny in a wide hero. */
@media (max-width:899px){.also-hero__scene{width:min(72vw,520px)}}
/* 3. Tablet: centre the routine pouch/beans scene so it isn't left-heavy with dead space beside it. */
@media (min-width:561px) and (max-width:920px){.also-routine__scene{max-width:480px;margin-inline:auto}}

/* ===== Real bean imagery ===== */
/* Hero: pile of beans sitting in front of the cups, at their base. The Y offset mirrors the cup's
   own translate so the beans stay locked to the cups' base if the cup position is retuned. */
.also-hero__beans{position:absolute;left:50%;bottom:0;width:min(62%,780px);height:auto;z-index:6;pointer-events:none;transform:translate(-50%,185px);filter:drop-shadow(0 10px 16px rgba(30,16,8,.34))}
@media (max-width:899px){.also-hero__beans{width:min(86%,430px);transform:translate(-50%,10px)}}
/* Routine: centre the scatter below the reviews */
.also-routine__beansfill{margin:1.9rem auto 0}

/* ===== "Also" wordmark: letters drift apart, then come back together ===== */
/* The wordmark is now an inline SVG in 3 groups (A+l are one merged subpath in the source
   artwork, so they move as a unit; s and o move independently). Same duration on all three
   so they always rejoin in sync. The whole word keeps its existing float/bounce. */
.also-brandword-svg{overflow:visible}
.also-brandword-svg>g{transform-box:fill-box;transform-origin:center;will-change:transform}
@keyframes alw-drift-a{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-15px,-5px) rotate(-1.4deg)}}
@keyframes alw-drift-s{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(1px,9px) rotate(1.7deg)}}
@keyframes alw-drift-o{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(17px,-6px) rotate(2deg)}}
.also-brandword-svg .alw-a{animation:alw-drift-a 7s ease-in-out infinite}
.also-brandword-svg .alw-s{animation:alw-drift-s 7s ease-in-out infinite}
.also-brandword-svg .alw-o{animation:alw-drift-o 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.also-brandword-svg .alw-a,.also-brandword-svg .alw-s,.also-brandword-svg .alw-o{animation:none}}

/* ===== Routine: bean scatter fills the blue space directly below the reviews =====
   Absolutely positioned against .also-routine__intro so it takes NO layout space —
   the section keeps the height it had (which is set by the taller panel column). */
.also-routine__beansfill{display:block;position:absolute;left:50%;top:calc(100% + 7.375rem);transform:translateX(-50%);width:min(158%,880px);max-width:none;height:290px;object-fit:cover;object-position:center top;margin:0;z-index:0;opacity:.97;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,#000 68%,transparent 100%)}
@media (max-width:920px){.also-routine__beansfill{display:none}}

/* ===== "Also" hand-drawn circle: sketches on, holds, fades out slowly, repeats ===== */
/* path length measured at 1358 user units */
.alw-ring{stroke-dasharray:1358;stroke-dashoffset:0;animation:alw-sketch 7.5s ease-in-out infinite}
@keyframes alw-sketch{
  0%   {stroke-dashoffset:1358;opacity:.92}   /* undrawn */
  26%  {stroke-dashoffset:0;opacity:.92}      /* sketched around the word */
  58%  {stroke-dashoffset:0;opacity:.92}      /* hold */
  90%  {stroke-dashoffset:0;opacity:0}        /* slow fade out */
  100% {stroke-dashoffset:0;opacity:0}        /* reset while invisible */
}
@media (prefers-reduced-motion:reduce){.alw-ring{animation:none;stroke-dashoffset:0;opacity:.92}}

/* ===== Hero: card strip hidden at client request (markup kept so it can be switched back on) ===== */
.also-hero__reveal{display:none!important}
/* hero shelf now the darker brown of the USP strip so the two read as one band */
.also-hero__shelf{background:#5C3526}

/* new bean scatter renders at its own aspect (no crop/fade needed) */
.also-routine__beansfill{height:auto;object-fit:fill;-webkit-mask-image:none;mask-image:none}

/* ============================================================
   FINAL POLISH PASS (client feedback)
   ============================================================ */

/* 1. Hero "Also": word sits still — only the hand-drawn circle animates */
.also-brandword-img,.also-brandword-svg{animation:none!important}
.also-brandword-svg .alw-a,.also-brandword-svg .alw-s,.also-brandword-svg .alw-o{animation:none!important;transform:none!important}

/* 2. Sticky offer bar: announce + nav travel together and stay pinned */
.also-topbar{position:sticky;top:0;z-index:60}
.also-header{position:relative;top:auto;z-index:2}

/* 3. Mega menu → floating rounded panel, separated from the nav, modal-like */
.also-megascrim{background:rgba(40,21,13,.46);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.also-mega{left:50%;right:auto;top:calc(100% + 14px);width:min(1080px,94vw);
  transform:translateX(-50%) translateY(-10px);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(253,244,230,.98));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--radius-xl,22px);
  box-shadow:0 44px 90px -34px rgba(40,21,13,.55),0 12px 30px -18px rgba(40,21,13,.3);
  padding:clamp(1.4rem,2vw,2.2rem)}
.also-mega.is-open{transform:translateX(-50%) translateY(0)}
.also-mega > .also-container--wide{max-width:none;padding-inline:clamp(1.1rem,1.7vw,1.7rem)}

/* 4. Background logo: reverted to the original subtle full emblem (client: don't crop at the top) */

/* 6. Footer: drop the decorative glow so the dark brown stays consistent behind the heading */
.also-footer__glow{display:none}

/* 8. Laptop spacing: more generous vertical rhythm so 13–15" screens keep the premium feel */
.also-section{padding-block:clamp(3.1rem,1.7rem + 3vw,5rem)}
.also-band-head{margin-bottom:clamp(2rem,1.2rem + 1.6vw,3.2rem)}

/* Right-side background emblem — larger + bled off the right per client dev-tools mockup */
.also-emblem-bg--br{right:-9%;bottom:calc(5% + 610px);transform:rotate(9deg);width:clamp(190px,20vw,427px)}
/* clip only the horizontal bleed of the right emblem (keeps vertical visible = no top crop) */
.also-moments-sec{overflow-x:clip}

/* Left/top background emblem — larger + bled off the left per client dev-tools mockup */
.also-emblem-bg--tl{top:7%;left:-5.5%;transform:rotate(-8deg);width:clamp(190px,20vw,351px)}
/* clip horizontal bleed on BOTH emblem sections (values + moments); vertical stays visible = no top crop */
.also-hasemblem{overflow-x:clip}

/* Belonging line under the review stats */
.also-proof__belong{text-align:center;font-family:var(--font-display);font-weight:600;font-style:italic;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--acc-primary);margin:-1.2rem auto clamp(2rem,3vw,3rem);max-width:40ch}

/* ===== Hero packets: retuned for the 3D mockup bag (narrower/taller than the old flat art) ===== */
.also-hero__packet--left,.also-hero__packet--right{width:34%;bottom:calc(-2% + 100px)}
.also-hero__packet--right{right:-19%;transform:translateX(60px) rotate(9deg)}
.also-hero__packet--left{left:-19%;transform:translateX(-60px) rotate(-9deg) scaleX(-1)}
@media (max-width:1200px){
  .also-hero__packet--left,.also-hero__packet--right{width:31%}
  .also-hero__packet--right{right:-20%;transform:translateX(40px) rotate(9deg)}
  .also-hero__packet--left{left:-20%;transform:translateX(-40px) rotate(-9deg) scaleX(-1)}
}

/* Hero: hide the left packet for now (client wants it without) — markup kept */
.also-hero__packet--left{display:none}

/* ===== Hero packets: new 3D renders — doubled, half-bled off each edge, with cast shadow ===== */
.also-hero__packet{filter:drop-shadow(0 34px 38px rgba(16,8,3,.52)) drop-shadow(0 12px 16px rgba(16,8,3,.42)) drop-shadow(0 3px 5px rgba(16,8,3,.3))}
.also-hero__packet{transition:none}
.also-hero__packet--left{display:block;width:39%;left:-23%;right:auto;bottom:calc(-2% - 130px);transform:translateX(-200px) translateY(var(--pk-par,0px)) rotate(-4deg)}
.also-hero__packet--right{width:61%;left:auto;right:-36%;bottom:calc(-2% + 100px);transform:translateX(200px) translateY(var(--pk-par,0px)) rotate(-11deg)}
@media (max-width:1200px){
  .also-hero__packet--left{width:35.5%;left:-21%;bottom:calc(-2% - 140px);transform:translateX(-180px) translateY(var(--pk-par,0px)) rotate(-4deg)}
  .also-hero__packet--right{width:56%;right:-33%;bottom:calc(-2% + 50px);transform:translateX(180px) translateY(var(--pk-par,0px)) rotate(-11deg)}
}
@media (prefers-reduced-motion:reduce){.also-hero__packet{--pk-par:0px!important}}

/* ===== Product card: crossfade to the front-on bag on hover ===== */
.also-pcard__well{position:relative}
/* alt image sits exactly on top of the base one (same 76% box, centred) so the fade doesn't jump */
.also-pcard__img--alt{position:absolute;left:50%;top:50%;width:76%;height:76%;object-fit:contain;opacity:0;pointer-events:none;
  filter:drop-shadow(var(--shadow-product));transform:translate(-50%,-50%);
  transition:opacity .4s var(--ease-out,ease),transform var(--dur-slow) var(--ease-spring)}
.also-pcard__img:not(.also-pcard__img--alt){transition:transform var(--dur-slow) var(--ease-spring),opacity .4s var(--ease-out,ease)}
.also-pcard:hover .also-pcard__img--alt,.also-pcard:focus-within .also-pcard__img--alt{opacity:1;transform:translate(-50%,-50%) translateY(-8px) scale(1.05) rotate(-1deg)}
.also-pcard:hover .also-pcard__img:not(.also-pcard__img--alt),
.also-pcard:focus-within .also-pcard__img:not(.also-pcard__img--alt){opacity:0}
@media (prefers-reduced-motion:reduce){.also-pcard__img,.also-pcard__img--alt{transition:opacity .2s linear}}

/* ============================================================
   (8) Announce bar — below 1024px it wrapped to two rows on
   tablet and hid all but the last offer on mobile. It now
   cycles through all four on a single line.
   (19) Nav + breadcrumb hit areas raised toward 44px without
   changing the header's height (the round buttons are taller).
   ============================================================ */
@media (max-width:1023px){
  .also-announce{
    display:grid;grid-template-columns:1fr;justify-items:center;align-items:center;
    flex-wrap:nowrap;gap:0;min-height:1.6rem;padding-block:.62rem;
  }
  .also-announce__item{
    grid-area:1/1;display:inline-flex!important;white-space:nowrap;
    opacity:0;animation:also-ann-cycle 16s infinite;
  }
  .also-announce__item:nth-child(1){animation-delay:0s}
  .also-announce__item:nth-child(2){animation-delay:4s}
  .also-announce__item:nth-child(3){animation-delay:8s}
  .also-announce__item:nth-child(4){animation-delay:12s}
}
@keyframes also-ann-cycle{
  0%,1%   {opacity:0;transform:translateY(6px)}
  3%,22%  {opacity:1;transform:none}
  25%,100%{opacity:0;transform:translateY(-6px)}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){
  .also-announce__item{animation:none;opacity:0}
  .also-announce__item:last-child{opacity:1}
}

/* (19) bigger targets, same header height */
.also-desktop-nav a{padding-block:.62rem}
.also-breadcrumb a,
.also-breadcrumb{display:inline-block}
.also-breadcrumb a{padding-block:.45rem}

/* ============================================================
   Mobile hero pass (client feedback)
   ============================================================ */

/* the burger was the only header control without the round white chip */
/* NB: no `display` here. The burger is display:none by default and switched
   to inline-flex inside the mobile media query — setting display in this
   later block put it back on screen at desktop widths. */
.also-mobile-nav{
  align-items:center;justify-content:center;
  width:44px;height:44px;min-width:44px;
  background:var(--surface-card);border-radius:50%;
  box-shadow:var(--shadow-xs);border:1px solid var(--border);
  color:var(--text-strong);cursor:pointer;padding:0;
  transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.also-mobile-nav:hover{background:var(--acc-surface);box-shadow:var(--shadow-sm)}
.also-mobile-nav .also-ic{width:1.35em;height:1.35em}

@media (max-width:699px){
  /* The title is an inline-block with text-align:left — right on desktop,
     where it sits on one line and the block itself centres. On a phone it
     wraps to two lines and the text hugs the left edge, so centre it here. */
  .also-hero--video .also-hero-title,
  .also-hero-title--long .also-hero-title__main{text-align:center}

  /* headline + strapline, properly bigger */
  .also-hero-title--long .also-hero-title__main{font-size:clamp(2.7rem,.5rem + 9.4vw,3.6rem)}
  .also-hero-title__sub{
    font-size:clamp(1rem,.4rem + 3vw,1.35rem);
    letter-spacing:.34em;padding-left:.34em;
  }
  .also-hero__vsub{font-size:1.2rem;max-width:26ch;line-height:1.4}

  /* cups a touch bigger */
  .also-hero__scene .also-hero__cup{width:154%}

  /* Packaging: smaller, and pulled back on-screen so only the inner edge
     shows against each side. The scene is min(72vw,520px) here, so it is
     72vw on any phone — that is what these calcs lean on.
     right edge of the left bag  = -14vw (scene inset) + width + left
     giving ~52px of bag visible at each screen edge. */
  .also-hero__packet--left,
  .also-hero__packet--right{display:block;height:auto;bottom:-20px;z-index:1}
  /* the two renders have very different aspect ratios (760x1254 vs
     1000x1156), so equal widths give very unequal heights — the right bag
     ends up short and barely clears the fold. Widths are set per side to
     match their heights; the offsets keep ~52px of each on screen.
     offset = -14vw (scene inset) - width + 52px */
  .also-hero__packet--left{
    width:30vw;left:calc(-44vw + 52px);right:auto;
    transform:translateY(var(--pk-par,0px)) rotate(-7deg);
  }
  .also-hero__packet--right{
    width:40vw;right:calc(-54vw + 52px);left:auto;
    transform:translateY(var(--pk-par,0px)) rotate(7deg);
  }
}

@media (max-width:699px) and (prefers-reduced-motion:reduce){
  .also-hero__packet--left,.also-hero__packet--right{--pk-par:0px}
}

/* ============================================================
   Mobile: USP block centred, FAQ items one consistent width
   ============================================================ */

/* The USP cards were align-items:stretch, so each filled the row and the
   icon+text sat hard left. Sizing them to content and centring puts the
   block in the middle while the text inside stays left-aligned. */
@media (max-width:560px){
  .also-values-grid{align-items:center}
  .also-value{max-width:100%}
}

/* .also-faqx__left/__right use display:contents on small screens, so the
   groups become grid items of .also-faqx and inherited its .9fr/1.1fr
   tracks — the accordions came out 330px, 327px and 250px wide. */
@media (max-width:699px){
  .also-faqx{grid-template-columns:minmax(0,1fr)}
  .also-faqx__group{width:100%;max-width:none;min-width:0}
  .also-faqx details{width:100%}
}

/* The 5-across USP row fits on one line by only ~12px at 1440, so any copy
   change tips it to 4+1. Trim the column gap to buy headroom. */
@media (min-width:561px){
  .also-values-grid{column-gap:clamp(1.4rem,3vw,2.2rem)}
}

/* ============================================================
   Mobile pass: hero height + cups, USP alignment, routine
   section centring, steam
   ============================================================ */
@media (max-width:699px){

  /* 1. 181px of dead padding sat above the H1 (80px on the hero +
        101px on the content). Down to ~29px. */
  .also-hero--video{padding-top:clamp(1rem,4vw,1.75rem)}
  .also-hero--video .also-hero__vcontent{padding-top:clamp(.5rem,1.5vh,1rem)}

  /* 2. Bigger cups. The taller scene pushes the packets down, so lift
        them off the scene floor to keep their edges in frame. */
  .also-hero__scene .also-hero__cup{width:250%}
  .also-hero__packet--left,.also-hero__packet--right{bottom:22%}

  /* 3. Right packet swung 20deg anticlockwise (was +7). */
  .also-hero__packet--right{transform:translateY(var(--pk-par,0px)) rotate(-13deg)}

  /* 5. "How do you actually drink coffee?" — centre the whole block.
        The plan rows stay as rows: they are image / label / price. */
  .also-routine__intro{text-align:center}
  .also-routine__intro .also-eyebrow{justify-content:center}
  .also-routine__title,.also-routine__lead{margin-inline:auto}
  /* centre the list as a block, but keep the icons on one left edge —
     individually-centred rows gave a ragged icon column */
  .also-routine__benefits{width:max-content;max-width:100%;margin-inline:auto;justify-items:start;text-align:left}
  .also-routine__benefits li{justify-content:flex-start}
  .also-routine__trust{justify-content:center;text-align:center}
  .also-routine__panel>.also-eyebrow{justify-content:center}
  .also-routine__panel>h3,.also-routine__price{text-align:center}

  /* 6. The steam rises from a cup that only exists in the desktop
        scene, so on mobile it read as smoke off the beans. */
  .also-steam{display:none}
}

/* 4. USPs: one shared width so the icons line up on a common left
      edge, with the block itself centred. */
@media (max-width:560px){
  .also-values-grid{width:max-content;max-width:100%;margin-inline:auto;align-items:stretch}
}

/* ============================================================
   Mobile hero: typography + spacing pass
   ============================================================ */
@media (max-width:699px){
  /* exactly 50px between the header and the first line of hero text */
  .also-hero--video{padding-top:50px}
  .also-hero--video .also-hero__vcontent{padding-top:0}

  /* ~15-18% up on the three hero lines */
  .also-hero-title--long .also-hero-title__main{font-size:clamp(3rem,.6rem + 11vw,4.2rem)}
  .also-hero-title__sub{font-size:clamp(1.15rem,.45rem + 3.5vw,1.55rem)}
  .also-hero__vsub{font-size:1.375rem}

  /* close the gap under Shop coffee — the cup art carries transparent
     headroom, so the scene has to come up rather than the padding down */
  .also-hero__scene{margin-top:-7.5rem}

  /* beans scaled up to sit with the larger cups */
  .also-hero__beans{width:min(150%,560px);max-width:none}
}

/* ============================================================
   Mobile drawer — overlay panel (replaces the in-flow accordion)
   ============================================================ */
.also-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.also-drawer-scrim{
  position:fixed;inset:0;z-index:78;background:rgba(30,16,8,.44);
  opacity:0;transition:opacity var(--dur-base,.28s) var(--ease-out,ease);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.also-drawer-scrim.is-open{opacity:1}
.also-drawer-scrim[hidden]{display:none}

.also-drawer{position:fixed;inset:0;z-index:80;display:block}
.also-drawer[hidden]{display:none}

.also-drawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(92vw,384px);display:flex;flex-direction:column;
  background:var(--surface-card,#fff);
  box-shadow:-18px 0 46px rgba(30,16,8,.24);
  transform:translateX(100%);
  transition:transform var(--dur-base,.28s) var(--ease-out,cubic-bezier(.22,1,.36,1));
  will-change:transform;
}
.also-drawer.is-open .also-drawer__panel{transform:translateX(0)}

.also-drawer__top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.1rem .7rem;border-bottom:1px solid var(--border);flex:none;
}
.also-drawer__eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);
}
.also-drawer__close{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;min-width:40px;border-radius:50%;cursor:pointer;padding:0;
  background:var(--acc-surface);border:1px solid var(--border);color:var(--text-strong);
  transition:background var(--dur-fast,.15s) var(--ease-out,ease),transform var(--dur-fast,.15s) var(--ease-out,ease);
}
.also-drawer__close:hover{background:var(--acc-sand-deep,#F0E2CC)}
.also-drawer__close:active{transform:scale(.94)}
.also-drawer__close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* search */
.also-drawer__search{
  position:relative;display:flex;align-items:center;gap:.5rem;flex:none;
  margin:.85rem 1.1rem .2rem;padding:.15rem .15rem .15rem .8rem;
  background:var(--acc-surface);border:1.5px solid var(--border);border-radius:var(--radius-pill,999px);
  transition:border-color var(--dur-fast,.15s) var(--ease-out,ease);
}
.also-drawer__search:focus-within{border-color:var(--accent)}
.also-drawer__search > .also-ic{flex:none;color:var(--text-muted);width:1.05em;height:1.05em}
.also-drawer__search input[type=search]{
  flex:1;min-width:0;border:0;background:none;outline:none;padding:.62rem 0;
  font-family:var(--font-body);font-size:1rem;color:var(--text-strong);
}
.also-drawer__search input::-webkit-search-cancel-button{-webkit-appearance:none}
.also-drawer__search button{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:var(--acc-cream,#FDF4E6);
  transition:transform var(--dur-fast,.15s) var(--ease-out,ease)}
.also-drawer__search button:active{transform:scale(.94)}
.also-drawer__search button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* scrolling body */
.also-drawer__scroll{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:.4rem 1.1rem 1rem;
}
.also-drawer__sec{display:block;padding-block:.85rem;border-bottom:1px solid var(--border)}
.also-drawer__sec:last-of-type{border-bottom:0}
.also-drawer__label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:.55rem;
}

/* equipment picker */
.also-drawer__equip{display:flex;flex-direction:column;gap:.3rem}
.also-drawer__eq{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;
  padding:.55rem .6rem;border-radius:var(--radius-lg,14px);text-decoration:none;
  color:var(--text-strong);background:transparent;
  transition:background var(--dur-fast,.15s) var(--ease-out,ease);
}
.also-drawer__eq:hover,.also-drawer__eq:focus-visible{background:var(--acc-surface);outline:none}
.also-drawer__eqic{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:12px;
  background:var(--acc-blue-pale,#E2F4FD);color:var(--accent);
}
.also-drawer__eqtxt{display:flex;flex-direction:column;min-width:0}
.also-drawer__eqtxt .nm{font-weight:650;font-size:.98rem;line-height:1.2}
.also-drawer__eqtxt .gr{font-size:.8rem;color:var(--text-muted);line-height:1.3}
.also-drawer__eq > .also-ic{color:var(--text-muted);width:1em;height:1em}
.also-drawer__note{
  display:flex;align-items:flex-start;gap:.45rem;margin:.6rem 0 0;
  font-size:.82rem;line-height:1.4;color:var(--text-muted);
}
.also-drawer__note .also-ic{flex:none;color:var(--accent);margin-top:.15em;width:1em;height:1em}

/* coffee bags */
.also-drawer__bags{
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;
  margin-inline:-1.1rem;padding-inline:1.1rem;scroll-snap-type:x proximity;
}
.also-drawer__bags::-webkit-scrollbar{display:none}
.also-drawer__bags a{
  flex:none;width:74px;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  text-decoration:none;color:var(--text-strong);scroll-snap-align:start;
  padding:.5rem .25rem;border-radius:var(--radius-lg,14px);
  transition:background var(--dur-fast,.15s) var(--ease-out,ease);
}
.also-drawer__bags a:hover,.also-drawer__bags a:focus-visible{background:var(--acc-surface);outline:none}
.also-drawer__bag{
  display:flex;align-items:flex-end;justify-content:center;height:66px;
}
.also-drawer__bags img{width:auto;height:100%;display:block}
.also-drawer__bags .nm{font-size:.78rem;font-weight:600;text-align:center;line-height:1.2}

/* plain links */
.also-drawer__link{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.7rem;
  padding:.62rem .6rem;border-radius:var(--radius-lg,14px);
  text-decoration:none;color:var(--text-strong);font-weight:600;
  transition:background var(--dur-fast,.15s) var(--ease-out,ease);
}
.also-drawer__link:hover,.also-drawer__link:focus-visible{background:var(--acc-surface);outline:none}
.also-drawer__link .ic{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:10px;background:var(--acc-surface);color:var(--accent);
}
.also-drawer__link .ic .also-ic{width:1.05em;height:1.05em}
.also-drawer__link > .also-ic{color:var(--text-muted);width:1em;height:1em}
.also-drawer__link[aria-current=page]{background:var(--acc-blue-pale,#E2F4FD)}
.also-drawer__link[aria-current=page] .ic{background:#fff}
.also-drawer__bags a[aria-current=page]{background:var(--acc-blue-pale,#E2F4FD)}
.also-drawer__count{
  font-size:.72rem;font-weight:700;min-width:20px;height:20px;padding:0 .35rem;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--accent);color:var(--acc-cream,#FDF4E6);
}
.also-drawer__count.is-empty{display:none}

/* reassurance */
.also-drawer__usps{
  list-style:none;margin:1rem 0 0;padding:.85rem 0 0;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.45rem;
}
.also-drawer__usps li{
  display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--text-muted);
}
.also-drawer__usps .also-ic{flex:none;color:var(--accent);width:1em;height:1em}

/* pinned CTA */
.also-drawer__foot{
  flex:none;padding:.85rem 1.1rem calc(.85rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border);background:var(--surface-card,#fff);
}
.also-drawer__foot .also-btn{width:100%;justify-content:center}

body.also-drawer-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .also-drawer__panel{transition:none}
  .also-drawer-scrim{transition:none}
}
/* the panel is a phone/tablet surface only */
@media (min-width:900px){ .also-drawer,.also-drawer-scrim{display:none!important} }

/* "A COFFEE" sat hard under "…Also NEED" — line-height was 1, so the two
   tracked-out lines had no air between them. */
@media (max-width:699px){
  .also-hero-title__sub{line-height:1.55}
}