/* 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}
#reviews{scroll-margin-top:24px}
.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 removed — "Roast date on every bag" is now a fifth <li> in
   .also-how__ticks. It was the only user of --rating outside the review stars,
   which is where the stray amber dot beside it came from. */
.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}
/* Newsletter: consent row, honeypot, and the on-screen welcome code.
   The code is shown in the panel rather than emailed because this install
   cannot send mail at all — see the header of inc/newsletter.php. That turned
   .also-nlcard__ok from one line into a small block, so it is re-laid-out as a
   column here (same specificity, later in the cascade, so it wins).
   Every [hidden] rule below is load-bearing: an author `display` beats the
   attribute, which is how the PDP once shipped a permanently visible
   "delivery frequency" row. */
.also-nlcard__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.also-nlcard__consent{display:flex;align-items:flex-start;gap:.6rem;margin:.15rem 0 .2rem;text-align:left;font-size:.85rem;line-height:1.45;color:var(--text-muted);cursor:pointer}
.also-nlcard__consent input{flex:none;width:1.15rem;height:1.15rem;margin-top:.12rem;accent-color:var(--accent);cursor:pointer}
.also-nlcard__form[hidden]{display:none}
.also-nlcard__ok{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:.9rem 0 0;text-align:center}
.also-nlcard__okhead{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:0;color:var(--accent);font-weight:700;font-size:.92rem}
.also-nlcard__code{margin:0}
.also-nlcard__code[hidden]{display:none}
.also-nlcard__code code{display:inline-block;padding:.55rem 1.15rem;border-radius:var(--radius-pill);border:1.5px dashed var(--acc-border-strong);background:#fff;color:var(--acc-ink-deep);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;font-weight:700;letter-spacing:.06em;-webkit-user-select:all;user-select:all}
.also-nlcard__okfine{margin:0;color:var(--text-muted);font-size:.83rem;line-height:1.45}
.also-nlcard__err{margin:.9rem 0 0;color:#B3261E;font-size:.86rem;line-height:1.45;text-align:center;font-weight:600}
.also-nlcard__err[hidden]{display:none}
/* Cookie consent banner.
   NOTE: these are .also-cookie*, NOT .also-cc* - the Coffee Calculator on the PDP
   already owns .also-cc, and naming the banner the same made its position:fixed
   leak onto the calculator, which then rendered viewport-wide and out of flow
   (a 1920px card inside a 1200px container). Do not rename these back.
   Bottom sheet rather than a full-screen modal: it must not block the page, and
   an interstitial that hides the content until you choose is itself a nudge
   toward "accept". [hidden] rules are load-bearing — an author `display` beats
   the attribute, and this element ships in the HTML on every page. */
.also-cookie{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;justify-content:center;padding:clamp(.6rem,2vw,1.2rem);pointer-events:none}
.also-cookie[hidden]{display:none}
.also-cookie__panel{pointer-events:auto;width:min(760px,100%);background:var(--surface-page,#fff);color:var(--acc-ink,#2A1A12);border:1px solid var(--acc-border-strong,rgba(40,21,13,.18));border-radius:var(--radius-xl,18px);box-shadow:0 24px 60px -18px rgba(20,10,5,.45);padding:clamp(1rem,2.4vw,1.5rem)}
.also-cookie__title{font-family:var(--font-display);font-size:clamp(1.05rem,.9rem + .5vw,1.3rem);margin:0 0 .35rem;color:var(--acc-ink-deep,#1E1008)}
.also-cookie__copy{margin:0 0 .9rem;font-size:.88rem;line-height:1.5;color:var(--text-muted)}
.also-cookie__copy a{color:inherit;text-decoration:underline}
.also-cookie__opts{display:grid;gap:.55rem;margin:0 0 .95rem;padding:.85rem;border-radius:var(--radius-lg,14px);background:var(--acc-base,rgba(40,21,13,.04))}
.also-cookie__opts[hidden]{display:none}
.also-cookie__opt{display:flex;align-items:flex-start;gap:.6rem;font-size:.85rem;line-height:1.45;color:var(--text-muted)}
.also-cookie__opt input{flex:none;width:1.1rem;height:1.1rem;margin-top:.1rem;accent-color:var(--accent)}
.also-cookie__opt strong{color:var(--acc-ink)}
.also-cookie__actions{display:flex;flex-wrap:wrap;gap:.55rem}
/* equal flex weight: refusing must be exactly as easy as accepting */
.also-cookie__btn{flex:1 1 auto;justify-content:center;min-width:9.5rem}
.also-cookie__btn[hidden]{display:none}
.also-cookie__btn--ghost{background:transparent;border:1.5px solid var(--acc-border-strong,rgba(40,21,13,.22));color:var(--acc-ink)}
.also-cookie__btn--ghost:hover{background:var(--acc-base,rgba(40,21,13,.06))}
.also-foot-base__ccbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.18em}
@media (max-width:560px){.also-cookie__btn{flex:1 1 100%}}

/* -- 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}
/* The count must be OUT OF FLOW. It was position:relative, which leaves it in the
   flex line, so .also-iconlink centred the icon AND the badge as a pair and the
   basket sat visibly left of centre the moment anything was added. top/left only
   nudged it afterwards, so the icon never recovered. Absolute keeps the basket
   dead centre in its circle whatever the count reads. */
.also-cartcount{
  position:absolute;top:-3px;right:-3px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.2rem;height:1.2rem;padding:0 .32rem;
  line-height:1;font-size:.7rem;
  border:2px solid var(--surface-page,#FDF4E6);
  box-sizing:border-box;pointer-events:none;
}
.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}
@media(max-width:899px){.also-hero-title .also-brandword-img{--also-word-filter:none;text-shadow:none}.also-hero-title .also-brandword-svg>g path{fill:#fff}}

/* -- 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(min-width:900px){.also-hero--video .also-hero__vsub{max-width:100%}}
@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(70%,880px);height:auto;z-index:6;pointer-events:none;transform:translate(-50%,155px);filter:drop-shadow(0 3px 2px rgba(30,16,8,.4)) drop-shadow(0 20px 18px rgba(30,16,8,.3))}
@media (max-width:899px){.also-hero__beans{width:min(96%,480px);transform:translate(-50%,22px)}}
/* 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:minmax(0,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;font-size:clamp(.7rem,3.4vw,.88rem);
    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(166%,620px);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}
}

/* ================================================================ *
 * The five value props — authoritative layout
 * ------------------------------------------------------------------
 * Supersedes the earlier .also-values-grid rules in this file (a 4-col
 * grid at ~L128, a 5-col override at ~L1331, then a flex-wrap centred
 * row at ~L1380 which won on source order and produced 4-across with a
 * fifth item stranded underneath).
 *
 * Client's spec: five across on desktop, three then two on tablet, and a
 * swipeable carousel on phones.
 * ================================================================ */
.also-values-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1rem,2vw,2rem);
  align-items:start;
  justify-content:initial;
  flex-wrap:initial;
}
.also-values-nav:not([hidden]){display:flex;align-items:center;justify-content:flex-end;gap:.65rem;margin-top:.65rem}
.also-values-nav>span{margin-right:auto;font-size:var(--fs-small);color:var(--text-muted)}
.also-values-nav .also-mcar-btn{width:44px;height:44px;flex:none}
.also-values-nav [data-values-dir="-1"] .also-ic{transform:rotate(180deg)}
.also-values-nav [aria-disabled="true"]{opacity:.4;cursor:default;box-shadow:none;transform:none;background:var(--surface-card);color:var(--accent)}
.also-values-nav button:focus-visible{outline:3px solid var(--acc-primary);outline-offset:3px}
.also-word-ring{position:relative;display:inline-block;margin-inline:.1em}
.also-word-ring svg{position:absolute;inset:-.35em -.3em;width:calc(100% + .6em);height:calc(100% + .7em);overflow:visible;pointer-events:none;fill:none;stroke:var(--acc-primary);stroke-width:8.5;stroke-linecap:round;stroke-linejoin:round}

/* Tablet: 3 + 2, with the pair centred. Six tracks with each item spanning two
   is the only way to centre an orphan row in CSS grid without magic numbers. */
@media (min-width:700px) and (max-width:1099px){
  .also-values-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .also-values-grid > *{grid-column:span 2}
  .also-values-grid > *:nth-child(4){grid-column:2 / span 2}
  .also-values-grid > *:nth-child(5){grid-column:4 / span 2}
}

/* Phones: a real carousel. contain:paint is required, not cosmetic — without
   it the tiles count toward the DOCUMENT's scrollable width and the whole page
   scrolls sideways as well as the strip. */
@media (max-width:699px){
  .also-values-grid{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    gap:.85rem;padding-bottom:.6rem;
    contain:paint;
    scrollbar-width:thin;
    align-items:stretch;
  }
  .also-values-grid::-webkit-scrollbar{height:5px}
  .also-values-grid::-webkit-scrollbar-thumb{background:rgba(113,66,48,.28);border-radius:99px}
  .also-values-grid > *{
    flex:0 0 76%;max-width:76%;scroll-snap-align:center;
    /* the cards were centre-stacked in the old mobile rule; a carousel needs
       them to read as separate cards, so give each one a surface */
    background:var(--surface-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:1rem .95rem;
  }
}

/* The proof grid was 1.4fr 1fr 1fr for a featured testimonial plus two photos.
   The invented testimonials are gone, so two photos were sitting in a
   three-column track and reading as a layout that had lost something. */
.also-proof__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:699px){
  .also-proof__grid{grid-template-columns:none}
}

/* .also-value is a two-track grid (icon | text). The text track was a bare 1fr,
   which floors at min-content, so the headings and sub-lines pushed out past
   their own tile and ran into the neighbouring one — the "overlapping" USPs.
   minmax(0,1fr) lets the track actually shrink. */
.also-value{grid-template-columns:auto minmax(0,1fr)}
.also-value h3,.also-value p{min-width:0;overflow-wrap:break-word}

/* ================================================================ *
 * Mobile audit fixes
 * ================================================================ */

/* .also-strength is a nowrap flex row (label · pips · word) inside a 142px
   product card on a phone — the word ("Balanced", "Very strong") was pushed
   24px outside the card. Let it wrap rather than overflow. */
.also-strength{flex-wrap:wrap;row-gap:.15rem}
.also-strength .word{min-width:0}

/* NOT a bug, recorded so it is not "fixed" later: .also-moment reports 428px of
   content in a 400px box, but the overflow is .also-moment__img at 456px — a
   deliberate cover-crop behind the caption. The caption itself is 149px and
   fits. Same story for .also-pcard__well. */

/* Touch targets. WCAG 2.5.8 asks for 24px minimum and 44px is the comfortable
   size; these were 34-38px and are all primary filters people tap repeatedly. */
@media (max-width:899px){
  .also-mchip{min-height:44px;padding-block:.55rem}
  .also-values-grid > * h3{font-size:1.02rem}
}

/* Sub-11px type. The 11.5px uppercase micro-labels are the house style and stay;
   these three were genuinely too small to read on a phone. */
@media (max-width:699px){
  .also-save{font-size:.75rem}
}

/* The newsletter consent box was an 18px hit area on a required field. */
.also-nlcard input[type="checkbox"],
.also-nlcard__consent input[type="checkbox"]{
  width:22px;height:22px;flex:none;accent-color:var(--accent);
}
.also-nlcard label:has(input[type="checkbox"]){min-height:44px;align-items:center}

/* Footer nav links were a 20px tap target stacked close together. The column
   class is .also-foot-col, not .also-footer-cols — the first attempt targeted a
   class that does not exist and changed nothing. */
@media (max-width:899px){
  .also-foot-col li a{display:inline-flex;align-items:center;min-height:40px}
}

/* Wishlist button on the product cards. */
.also-pcard__heart{min-width:44px;min-height:44px}

/* Disclosure line above the review cards. Renders only when real reviews do -
   see the $reviews block in front-page.php. Connected/incentivised reviewers
   have to be declared under the DMCC Act 2024. */
.also-proof__disclose{display:flex;align-items:flex-start;gap:.5rem;max-width:62ch;margin:0 auto 1.4rem;font-size:.82rem;line-height:1.5;color:var(--text-muted);text-align:left}
.also-proof__disclose svg{flex:0 0 auto;width:16px;height:16px;margin-top:.12rem;opacity:.7}

/* The USP overlap, actual cause. A flex-era rule at ~L1382 sets
   `white-space:nowrap` on the value text. The authoritative grid at ~L1930
   replaced the layout but not that rule, and the fix at ~L1984 (minmax(0,1fr)
   + overflow-wrap) cannot work while nowrap forbids wrapping at all - so
   "Know exactly when your coffee was roasted" ran straight into its neighbour
   on wide screens. Allow wrapping and the earlier fix does its job. */
.also-value h3,.also-value p{white-space:normal}

/* ================================================================ *
 * The five value props: full width on desktop, titles on one line
 * ----------------------------------------------------------------
 * Client 2026-08-18: "they need to span full width rather than be in the
 * container on desktop. The first title should never stack on two lines."
 *
 * Measured before changing anything: .also-container caps at 1440px, so on a
 * 1920 or 2560 monitor the row sat in 1344px with a lot of empty space either
 * side. And "Roast date on every bag" needs 184px on one line at the inherited
 * --fs-h4 (22.4px), while the text track was only ever 125-185px - so every
 * title wrapped, at every desktop width.
 *
 * Two fixes, because full bleed alone does not solve it: below ~1440 the
 * container was already near the viewport width, so the wrap is a type-size
 * problem, not a width problem.
 * ================================================================ */

/* 1100-1199 keeps the 3+2 arrangement rather than squeezing five across.
   Five columns here leaves ~124px of text track, which would need a 15px
   heading to fit on one line - smaller than body copy, which reads as a bug
   rather than a choice. */
@media (min-width:1100px) and (max-width:1279px){
  .also-values-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .also-values-grid > *{grid-column:span 2}
  .also-values-grid > *:nth-child(4){grid-column:2 / span 2}
  .also-values-grid > *:nth-child(5){grid-column:4 / span 2}
}

/* Full bleed. The band head stays in the container - only the row breaks out,
   so the centred heading above it is unaffected. overflow-x:clip on the section
   absorbs the scrollbar: 100vw counts the scrollbar width and the document does
   not, so without it a classic (non-overlay) scrollbar turns the break-out into
   a few px of horizontal page scroll. clip rather than hidden - hidden would
   make the section a scroll container and break position:sticky elsewhere. */
@media (min-width:1280px){
  #valgrid{overflow-x:clip}
  .also-values-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    max-width:none;
    margin-inline:calc(50% - 50vw);
    /* Tighter padding and gap than the page default at the narrow end. At 1280
       the clamp below has bottomed out at 16px, so the only way to buy the
       title room is column width - measured: this is what takes "Roast date on
       every bag" from overflowing its track to ~16px of headroom. */
    padding-inline:clamp(1rem,2vw,4rem);
    gap:clamp(1rem,1.6vw,2rem);
  }
}

/* One line, always. nowrap is only safe because the clamp guarantees the title
   fits the track it is given - an unfitted nowrap is what caused the overlap
   the client reported on 2026-08-14, where a leftover flex-era nowrap ran
   "Know exactly when your coffee was roasted" into its neighbour.
   Scoped to >=1100: below that the layout is a 1-col stack or a fixed-width
   carousel, where nowrap would overflow the item instead.
   The sub-line still wraps - it is a sentence, and it should. */
@media (min-width:1100px){
  .also-value h3{white-space:nowrap;font-size:clamp(1rem,1.25vw,1.4rem)}
}

/* The wave divider read as "a big thick line" on phones - 90px of band plus the
   section paddings either side. Slimmer on small screens; the shape survives. */
@media (max-width:640px){
  .also-divider{height:48px}
}