/* Mermaid Proteins ingredient shop: small brand layer on top of v2.css (the SESSION ZERO light shop).
   Same layout, type and components. Changes: Mermaid colours (Evergreen ink, Baltic accent, off-white paper),
   the Mermaid mark, cool photographs without the warm film tint, one product instead of two. */
:root{
  --paper:#F1F2E8; --paper-2:#E5E8D6; --stone:#D6DAC4; --ink:#002E2C; --espresso:#002E2C; --muted:#4F6665;
  --signal:#035E7B; --line:rgba(0,46,44,.14); --line-2:rgba(0,46,44,.28);
}
.hero__sub,.why__copy p,.steps p,.ing__lead,.origin__copy p:last-child,.faq details p{color:#2f4a48}
.btn:hover{background:var(--signal);color:#fff}
.top{background:rgba(241,242,232,.55)}
.top::before{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.08) 55%,rgba(255,255,255,0))}

/* mark: the real tail mark as a mask, name in the page font */
.mark{align-items:center;gap:.45em}
.mark b{font-weight:400}
.mark__ic{display:inline-block;width:1.35em;height:1.35em;background:currentColor;-webkit-mask:url(img/logo.png) center/contain no-repeat;mask:url(img/logo.png) center/contain no-repeat}

/* photographs: cool and natural, no sepia */
.photo img{filter:saturate(1) contrast(1.02)}
.hero__photo img{object-position:45% 72%}
[data-lead=capsule] .hero__photo img{object-position:50% 78%}
.stamp{letter-spacing:.14em}

/* two products (capsule added 30 Oct 2026): the capsule leads for the Type II ads (html[data-lead=capsule]), the powder for the rest */
.picks{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
.pick__fig{aspect-ratio:1/1}
.cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1040px}
[data-lead=powder] .pick--powder,[data-lead=powder] .card--powder{order:-1}
.hero__claim{margin:-4px 0 18px;max-width:46ch;font-size:.8rem;line-height:1.45;color:var(--muted)}

/* hero: bright Nordic harbour (2 Nov 2026, Leo); white stamp on a soft dark fade so it reads over the rocks */
.hero__photo::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.45),transparent)}
.hero__photo .stamp{text-shadow:0 1px 6px rgba(0,0,0,.5)}
.card__fig{aspect-ratio:4/3}
.ing__pack img{transform:rotate(0)}
.facts{grid-template-columns:repeat(3,1fr)}

/* skin against bone table (replaces the 45 dial) */
.mp-cmp{border:1px solid var(--line-2);background:#fff}
.mp-cmp__row{display:grid;grid-template-columns:.9fr 1fr 1.1fr;gap:12px;padding:16px 20px;border-top:1px solid var(--line);font-size:.95rem}
.mp-cmp__row:first-child{border-top:0}
.mp-cmp__row--h{font:500 .68rem/1.3 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);background:var(--paper)}
.mp-cmp__row>span:first-child{color:var(--muted)}
.mp-cmp__us{color:var(--ink);font-weight:500}
.mp-cmp__row--h .mp-cmp__us{color:var(--signal)}
@media(max-width:520px){.mp-cmp__row{grid-template-columns:1fr 1fr}.mp-cmp__row>span:first-child{grid-column:1/-1;font-size:.74rem}}

/* phones: a shorter photo so the hook, the jar and the price show on the first screen */
@media(max-width:860px){
  .hero{min-height:0}
  .hero__photo{min-height:0;aspect-ratio:16/9}
  .hero__copy{padding-top:24px}
}

/* footer: brand and tagline on the left, legal text and links on the right */
.foot{padding:clamp(40px,5vw,64px) 0 clamp(36px,4vw,52px)}
.foot .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:28px clamp(32px,7vw,120px);align-items:start}
.foot .mark{font-size:1.4rem;justify-self:start}
.foot__brand{display:grid;gap:12px;align-content:start}
.foot__tag{font:400 1rem/1.4 var(--sans);letter-spacing:0;text-transform:none;word-spacing:0;margin:0!important;opacity:.75}
.foot__legal{display:grid;gap:14px;max-width:62ch}
.foot__legal p{margin:0}
.foot .foot__supp{font-size:.82rem;line-height:1.55;opacity:.7;max-width:none}
.foot .foot__co{font-size:.82rem;opacity:.7}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:14px;border-top:1px solid rgba(241,242,232,.18);opacity:1!important}
.foot__links a{text-decoration:none;font-size:.82rem;opacity:.85}
.foot__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.foot .wrap{grid-template-columns:1fr}}

/* the pack is a product photograph (beige backdrop), so it fills its tile instead of floating as a cut-out */
.pick__fig::after,.card__fig::after{display:none}
.pick__fig>img,.card__fig>img{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:none;z-index:1}
.pick:hover .pick__fig>img,.card:hover .card__fig>img{transform:scale(1.02)}
.pick__fig,.card__fig{overflow:hidden;background:#EBD9C3}
.card__fig{aspect-ratio:1/1}
.ing__pack img{height:clamp(170px,20vw,250px);width:clamp(170px,20vw,250px);object-fit:cover;filter:none}
.sheet__fig img{object-fit:cover}