/* ==========================================================================
   EVOPURE COLLECTION — the focused collection page (evopure-collection.php). Rebuild 2026-09-23.
   This file LAYS OUT existing components; it does not restyle them:
     selector .evo-var / .evo-var__btn (chrome.css) · price .evo-sub__prices / .evo-sub__first + coral .evo-addons__pill (pdp.css) ·
     buttons .evo-btn / .evo-btn--onnavy / .evo-link (chrome.css) · accordion .evo-faq (blocks.css) · trust band .evo-usp + quiz band
     .evo-quizband + goal cards .evo-goal (chrome.css "HOMEPAGE COMPONENTS") · product rail [evo_bestsellers] · Blog Card 32439 · motion.css.
   Rhythm (pages.css tokens): hero SLEEP WASH → shop WHITE → inside SAND → wave → proof + quiz NAVY → flipped wave → pairs WHITE →
   journal PAGE → faq WHITE → goals PAGE → footer wave. Never the same tone twice running; sand once; navy once.
   ┌──────────────────────── EDIT HERE ────────────────────────┐ */
.evo-col {
	--evo-col-max: 1320px;                                   /* the homepage / PDP content width */
	--evo-col-x: var(--evo-gutter, clamp(16px, 4vw, 56px));  /* the site gutter (16px on phones) */
	--evo-sec: clamp(64px, 7vw, 112px);                      /* section padding  = pages.css --evo-sec   */
	--evo-sec-s: clamp(40px, 4.6vw, 72px);                   /* short padding    = pages.css --evo-sec-s */
	--evo-col-gap: 20px;                                     /* grid gap = the homepage goal grid */
	--evo-col-wash: color-mix(in srgb, var(--evo-pillar-light, #DACDC6) 50%, #FFFFFF);   /* the collection wash = its pillar light at 50% in white (Sleep: #DCEEEC, approved) */
	--evo-col-hero-bg: var(--evo-col-wash);
	--evo-col-sand: var(--e-global-color-sand, #ECE5D8);
	--evo-col-card-h: clamp(380px, 31vw, 440px);             /* wide card + tile min height, desktop */
	/* tokens the reused PDP components read (the same values pdp.css declares on the PDP body) */
	--evo-pdp-caps: var(--e-global-typography-subheadcaps-font-family, "neue-haas-grotesk-display"), "Helvetica Neue", Arial, sans-serif;
	--evo-pdp-outline: 1px; --evo-pdp-ring: 1.5px; --evo-pdp-ease: var(--evo-ease, cubic-bezier(.22, .61, .36, 1));
	--evo-control-h: 44px; --evo-cta-h: 48px; --evo-active-radius: var(--evo-radius-sig, 8px);
	--evo-pillar-dark: var(--e-global-color-organicdark, #73463C); --evo-pillar-on: var(--e-global-color-white, #FFFFFF);
	display: block; width: 100%; max-width: none; margin: 0; padding: 0; background: var(--evo-page); color: var(--evo-charcoal); overflow-x: clip;
}
/* pillar tones (the same values pdp.css uses for the PDP buy box). The PAGE's pillar sets three roles, one pillar per page (the navy band stays navy):
     --evo-col-wash   it BUILDS: hero, What's inside, the white card's band. = the pillar light at 50% in white, or the brand wash where one is set.
     --evo-col-voice  it SPEAKS: the headline, caps labels, the open accordion row, link text on hover.
     --evo-col-dark   it FILLS: Best seller pill, accordion markers, hover fills + underlines (--evo-col-on = the text on that fill).
   Sleep / Relief / Balance: voice = fill = the pillar dark. Flow (brand rule "navy speaks, ochre warms"): voice = navy, fill = ochre with navy on it. */
.evo-col[data-pillar] { --evo-col-dark: var(--evo-pillar-dark); --evo-col-voice: var(--evo-pillar-dark); --evo-col-on: var(--evo-pillar-on); }
.evo-col[data-pillar="sleep"]   { --evo-col-wash: #DCEEEC; }      /* Sleep Light #B8DCD9 at 50% in white */
.evo-col[data-pillar="flow"]    { --evo-col-wash: #BCDFCF; --evo-col-voice: var(--evo-navy); }      /* Flow Light #78BF9E at 50% in white; ochre fills only */
.evo-col[data-pillar="relief"]  { --evo-col-wash: #F7E4DD; }      /* the brand Relief wash */
.evo-col[data-pillar="organic"] { --evo-col-wash: #EEE8E0; }      /* the brand Organic wash (Balance) */
.evo-col [data-pillar="sleep"],   .evo-col[data-pillar="sleep"]   { --evo-pillar-dark: var(--e-global-color-sleepdark, #6B6682);   --evo-pillar-on: #FFFFFF; --evo-pillar-light: var(--e-global-color-sleeplight, #B8DCD9); }
.evo-col [data-pillar="flow"],    .evo-col[data-pillar="flow"]    { --evo-pillar-dark: var(--e-global-color-flowdark, #CE9B41);    --evo-pillar-on: var(--e-global-color-navy, #1D293B); --evo-pillar-light: var(--e-global-color-flowlight, #78BF9E); }
.evo-col [data-pillar="relief"],  .evo-col[data-pillar="relief"]  { --evo-pillar-dark: var(--e-global-color-reliefdark, #86363E);  --evo-pillar-on: #FFFFFF; --evo-pillar-light: var(--e-global-color-relieflight, #FAC1BD); }
.evo-col [data-pillar="organic"], .evo-col[data-pillar="organic"] { --evo-pillar-dark: var(--e-global-color-organicdark, #73463C); --evo-pillar-on: #FFFFFF; --evo-pillar-light: var(--e-global-color-organiclight, #DACDC6); }
.evo-col [data-pillar="evolabs"], .evo-col[data-pillar="evolabs"] { --evo-pillar-dark: var(--e-global-color-evolabs, #213165);     --evo-pillar-on: #FFFFFF; --evo-pillar-light: color-mix(in srgb, var(--evo-evolabs) 30%, #FFFFFF); }
@media (max-width: 600px) { .evo-col { --evo-col-x: 16px; } }      /* phones: 16px gutters */
/* └───────────────────────────────────────────────────────────┘ */

.evo-col *, .evo-col *::before, .evo-col *::after { box-sizing: border-box; }
.evo-col-in { width: 100%; max-width: var(--evo-col-max); margin: 0 auto; padding: 0 var(--evo-col-x); }
.evo-col p { margin: 0; }
.evo-col img { display: block; max-width: 100%; height: auto; }
.evo-col figure { margin: 0; }
.evo-col .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.evo-col a:focus-visible, .evo-col select:focus-visible { outline: 1.5px solid var(--evo-navy); outline-offset: 3px; }
.evo-col button:focus:not(:focus-visible), .evo-col a:focus:not(:focus-visible) { outline: 0; }      /* rings are for the keyboard only: a mouse click never draws one */

/* section heads = the homepage section head (New Spirit via the kit's h2, clamp 30 → 44, centred) */
.evo-col-head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 clamp(28px, 3vw, 44px); text-align: center; }
body[class*="elementor-kit-"] .evo-col .evo-col-title { margin: 0; font-family: "new-spirit", var(--e-global-typography-primary-font-family), serif; font-weight: 700; font-style: italic; font-size: clamp(30px, 2.9vw, 44px); line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; color: var(--evo-navy); }
.evo-col-lede { max-width: 34em; font-family: var(--e-global-typography-lead-font-family), sans-serif; font-weight: var(--e-global-typography-lead-font-weight, 400); font-size: var(--e-global-typography-lead-font-size, 18px); line-height: 1.5; color: var(--evo-charcoal); text-wrap: pretty; }
.evo-col-textlink { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 5px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; color: var(--evo-navy); font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w, 600); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; text-decoration: none; }      /* = .evo-link, for a plain <a> */
.evo-col-textlink::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--evo-ico-arrow) center / 16px 16px no-repeat; mask: var(--evo-ico-arrow) center / 16px 16px no-repeat; transition: transform var(--evo-t-hover) var(--evo-ease); }
.evo-col-textlink:hover::after, .evo-col-textlink:focus-visible::after { transform: translateX(5px); }
/* SLEEP COLOUR DOWN THE PAGE: text-link underlines turn the page's dark on hover (the label stays navy) */
.evo-col-textlink, .evo-col .evo-link .elementor-button, .evo-col-ed__more { transition: background-image var(--evo-t-hover) var(--evo-ease); }
.evo-col-textlink:is(:hover, :focus-visible), .evo-col .evo-link .elementor-button:is(:hover, :focus-visible), .evo-col-ed__more:is(:hover, :focus-visible) { background-image: linear-gradient(var(--evo-col-dark), var(--evo-col-dark)) !important; }
.evo-col-foot { margin-top: clamp(24px, 2.4vw, 36px) !important; text-align: center; }
/* pills read in the site's caps voice (as the card offer pill and tags) */
.evo-col .evo-addons__pill { font-family: var(--evo-pdp-caps); text-transform: uppercase; }
/* the selector as links (goal chips): layout only, the look is .evo-var__btn */
.evo-col a.evo-var__btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ================================================================ 1. HERO — the Sleep wash, edge to edge */
.evo-col-hero { background: var(--evo-col-hero-bg); padding: clamp(20px, 2vw, 28px) 0 var(--evo-sec); }
.evo-col-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
.evo-col-crumb { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(20px, 2.4vw, 36px); font-family: var(--evo-pdp-caps); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--evo-slate); }
.evo-col-crumb a { color: var(--evo-slate); text-decoration: none; transition: color var(--evo-t-hover) var(--evo-ease); }
.evo-col-crumb a:hover { color: var(--evo-navy); }
.evo-col-crumb [aria-current] { color: var(--evo-col-voice); }
.evo-col-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
/* the homepage hero's own size (50.4px at 1440 / 36px at 390, line-height 1.12): the collection never outranks the homepage */
body[class*="elementor-kit-"] .evo-col .evo-col-hero__title { margin: 0; font-family: "new-spirit", var(--e-global-typography-primary-font-family), serif; font-style: italic; font-size: clamp(36px, 3.5vw, 50.4px); line-height: 1.12; letter-spacing: -.005em; color: var(--evo-col-voice); }
.evo-col-hero__l1 { display: block; font-weight: 700; }
.evo-col-hero__l2 { display: block; font-weight: 300; }
.evo-col-hero__intro { max-width: 34em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: var(--evo-charcoal); font-weight: var(--e-global-typography-text-font-weight, 300); }
.evo-col-hero__goals { margin-top: 4px; }
.evo-col-hero__goals .evo-var__btn { white-space: nowrap; }
/* phones: the chips are ONE sideways row (no wrap), snapping, no scrollbar, running to both screen edges like the homepage goal row */
@media (max-width: 767px) {
	.evo-col-hero__goals { align-self: stretch; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		width: calc(100% + 2 * var(--evo-col-x)); max-width: none; margin-inline: calc(-1 * var(--evo-col-x)); padding: 0 var(--evo-col-x); scroll-padding-inline: var(--evo-col-x); }
	.evo-col-hero__goals::-webkit-scrollbar { display: none; }
	.evo-col-hero__goals .evo-var__btn { flex: none; scroll-snap-align: start; }
}
.evo-col-hero__trust { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--evo-charcoal); }
.evo-col-stars { color: var(--evo-navy); font-size: 14px; letter-spacing: .22em; }
.evo-col-hero__media { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 520px; overflow: hidden; border-radius: 0 24px 0 0; background: var(--evo-page); }      /* landscape, the signature corner at media size (24px) */
.evo-col-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--evo-col-focus, 50% 50%); }
@media (max-width: 1024px) {
	.evo-col-hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	.evo-col-crumb { margin-bottom: 0; }
	.evo-col-hero__media { order: -1; grid-row: 2; }
	.evo-col-hero__copy { grid-row: 3; }
}

/* ================================================================ 2. TOOLBAR — one segmented control (the selector), count, sort */
.evo-col-shop { background: var(--evo-white); padding: var(--evo-sec-s) 0 var(--evo-sec); }
.evo-col-bar { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; margin: 0 0 24px; }
.evo-col-seg { flex-wrap: nowrap; }      /* two separate selector buttons, the selector's own 8px gap: selected = navy + corner, hover = the pillar */
.evo-col-seg .evo-var__btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.evo-col-count { font-size: 14px; color: var(--evo-slate); }
.evo-col-sort { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.evo-col-sort span { font-family: var(--evo-pdp-caps); font-weight: var(--evo-caps-w, 600); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--evo-navy); }
.evo-col-sort select { height: var(--evo-control-h); min-width: 200px; padding: 0 40px 0 14px; border: 1px solid var(--evo-navy); border-radius: 0; background: var(--evo-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231D293B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; -webkit-appearance: none; appearance: none; font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: 14px; color: var(--evo-navy); cursor: pointer; }
@media (max-width: 700px) {
	.evo-col-seg { width: 100%; }
	.evo-col-seg .evo-var__btn { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
	.evo-col-sort select { min-width: 0; width: 176px; }
}

/* ================================================================ 3. WIDE CARDS — the surface follows the image; 2-up, uniform heights
   GREY (the product image was shot on the Cool Wash, #E7EAEB): the card IS that grey, so photo and card are one surface.
   LIGHT (a white image or a transparent PNG): a white card with a hairline; the pack sits on a soft band of the collection's wash.
   The surface is detected per image (evo_col_image_profile) or set per product ("Collection card" box), so a new image switches it by itself. */
.evo-col-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--evo-col-gap); }
@media (max-width: 1100px) { .evo-col-grid { grid-template-columns: 1fr; } }      /* below 1100 a 2-up card is too narrow for one-line strengths + actions */
.evo-wcard, .evo-ctile { min-width: 0; min-height: var(--evo-col-card-h); border-radius: 0; }
.evo-wcard { display: grid; grid-template-columns: 42% minmax(0, 1fr); overflow: hidden; background: var(--evo-wash); transition: border-radius var(--evo-t-hover) var(--evo-ease); }
.evo-wcard:hover, .evo-wcard:has(:focus-visible) { border-radius: 0 var(--evo-radius-card) 0 0; }      /* the signature corner: hover only, top-right only */
.evo-wcard--light { background: var(--evo-white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--evo-navy) 10%, transparent); }
.evo-wcard__media { position: relative; display: block; overflow: hidden; container-type: size; }
.evo-wcard--light .evo-wcard__media { background: linear-gradient(to bottom, transparent 0, transparent 34%, var(--evo-col-wash) 34%); }      /* the soft band the pack stands in */
.evo-wcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; transition: transform var(--evo-t-section) var(--evo-ease); }
/* FIT: the pack itself (its measured box inside the image) is scaled to 75% of the panel height, capped at 92% of the panel width, and centred.
   Only the image's empty background ever leaves the panel, never the pack. */
.evo-wcard.is-fit .evo-wcard__media img {
	--h: min(calc(75cqh / var(--fh)), calc(92cqw / (var(--fw) * var(--ar))));
	inset: auto; left: calc(50cqw - var(--h) * var(--ar) * var(--cx)); top: calc(50cqh - var(--h) * var(--cy)); width: calc(var(--h) * var(--ar)); height: var(--h); max-width: none; object-fit: fill;
}
.evo-wcard--light .evo-wcard__media img { mix-blend-mode: multiply; }      /* a white background drops out into the band */
@media (hover: hover) { .evo-wcard:hover .evo-wcard__media img { transform: scale(1.03); } }
.evo-wcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: clamp(22px, 2.2vw, 32px) clamp(20px, 2.2vw, 32px) clamp(22px, 2.2vw, 30px) 4px; }
.evo-wcard--light .evo-wcard__body { padding-left: 12px; }
.evo-wcard__meta { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.evo-wcard__format { font-family: var(--evo-pdp-caps); font-weight: var(--evo-caps-w, 600); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--evo-col-voice); }
.evo-col .evo-wcard__best { background: var(--evo-col-dark); color: var(--evo-col-on); }      /* coral is for money only; "Best seller" speaks the page's pillar */
body[class*="elementor-kit-"] .evo-col .evo-wcard__title { margin: 0; font-family: "new-spirit", var(--e-global-typography-primary-font-family), serif; font-weight: 700; font-style: italic; font-size: clamp(22px, 1.75vw, 26px); line-height: 1.1; color: var(--evo-navy); }
.evo-wcard__title a { color: inherit; text-decoration: none; }
.evo-wcard__desc { display: block; margin-top: 6px; font-family: var(--evo-pdp-caps); font-style: normal; font-weight: var(--evo-caps-w, 600); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: var(--evo-charcoal); }
.evo-wcard__benefit { font-size: 15px; line-height: 1.5; color: var(--evo-charcoal); font-weight: var(--e-global-typography-text-font-weight, 300); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evo-wcard__ing { font-size: 13px; line-height: 1.45; color: var(--evo-slate); }
.evo-wcard__buy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; margin-top: auto; padding-top: 6px; }
.evo-wcard__var { flex-wrap: nowrap; }
.evo-wcard__var .evo-var__btn { white-space: nowrap; }
.evo-wcard__price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.evo-wcard__price [hidden] { display: none !important; }
.evo-wcard__then { flex-basis: 100%; margin-top: 0 !important; white-space: nowrap; }
.evo-wcard__buy { align-items: stretch; }
.evo-wcard__buy > :not(.evo-wcard__actions) { align-self: flex-start; }
.evo-wcard__actions { display: flex; flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }      /* Add to bag at the body's full width, Learn more centred beneath: side by side the pair needs ~336px, a 2-up card body has ~320 */
.evo-wcard__add { width: 100%; white-space: nowrap; }
.evo-wcard__more { align-self: center; }
.evo-wcard__add.is-busy { opacity: .7; pointer-events: none; }
.evo-wcard__add:disabled { opacity: .45; pointer-events: none; }
/* CARD HOVER (the product-card rule, chrome.css .evo-pcard): hovering ANYWHERE on the card, or keyboard focus inside it, puts Add to bag into
   the button's own hover state (outline + arrow + corner), in step with the card's corner */
@media (hover: hover) {
	.evo-wcard:hover .evo-wcard__add:not(:disabled) { border-radius: 0 var(--evo-radius-sig) 0 0 !important; background: transparent !important; border-color: var(--evo-navy) !important; color: var(--evo-navy) !important; }
	.evo-wcard:hover .evo-wcard__add:not(:disabled)::after { opacity: 1; transform: none; }
}
.evo-wcard:has(:focus-visible) .evo-wcard__add:not(:disabled) { border-radius: 0 var(--evo-radius-sig) 0 0 !important; background: transparent !important; border-color: var(--evo-navy) !important; color: var(--evo-navy) !important; }
.evo-wcard:has(:focus-visible) .evo-wcard__add:not(:disabled)::after { opacity: 1; transform: none; }
.evo-wcard__msg { font-size: 13px; color: var(--evo-navy); }
.evo-wcard__msg:empty { display: none; }
.evo-wcard__msg a { color: var(--evo-navy); text-decoration: underline; }
@media (max-width: 560px) {
	.evo-wcard { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
	.evo-wcard__media { aspect-ratio: 4 / 3; }
	.evo-wcard__body, .evo-wcard--light .evo-wcard__body { padding: 4px 20px 24px; }
}
/* BUNDLE TILE = the homepage goal card (chrome.css .evo-goal: image, title, arrow-in-circle, corner, CARD HOVER), filling a card slot. + the coral money pill. */
.evo-col-grid > .evo-goal { height: 100%; min-height: var(--evo-col-card-h); }
.evo-col-grid > .evo-goal .elementor-image-box-wrapper { position: relative; }
.evo-col-grid > .evo-goal .elementor-image-box-img { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }      /* out of flow: the tile takes the row's height, it never sets it */
.evo-col-grid > .evo-goal .elementor-image-box-title { font-size: clamp(24px, 2vw, 30px) !important; right: 72px; text-wrap: balance; }
.evo-ctile__pill { position: absolute; left: 18px; bottom: 19px; z-index: 1; }      /* on the arrow's line, bottom-left */
/* a pack shot on a plain ground (the bundle hero JPGs): the image ground fills the tile, the packs sit low and right of centre at ~74% of the
   tile height, clear of the title (same measured-box fit as the cards). A photo simply fills the tile (cover), as the goal cards do. */
.evo-col-grid > .evo-goal.is-fit .elementor-image-box-img { container-type: size; }
.evo-col-grid > .evo-goal.is-fit .elementor-image-box-img img {
	--h: min(calc(74cqh / var(--fh)), calc(78cqw / (var(--fw) * var(--ar))));
	position: absolute; left: calc(56cqw - var(--h) * var(--ar) * var(--cx)) !important; top: calc(58cqh - var(--h) * var(--cy)) !important; width: calc(var(--h) * var(--ar)) !important; height: var(--h) !important; max-width: none; object-fit: fill;
}
.evo-col-grid > .evo-goal.is-light .elementor-image-box-img { background: var(--evo-white); }
.evo-col-grid > .evo-goal.is-light .elementor-image-box-img img { mix-blend-mode: multiply; }
@media (max-width: 560px) {      /* phones, one column: the tile keeps the goal card's own 4:3 (at a card's ~680px height the packs would float in empty grey) */
	.evo-col-grid { grid-auto-rows: auto; }
	.evo-col-grid > .evo-goal { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
}
/* typographic tiles (quiz / subscribe / strength) */
.evo-ctile { display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--evo-wash); transition: border-radius var(--evo-t-hover) var(--evo-ease); }
.evo-ctile:hover, .evo-ctile:focus-within { border-radius: 0 var(--evo-radius-card) 0 0; }
.evo-ctile__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px clamp(24px, 2.6vw, 40px) clamp(24px, 2.6vw, 36px); }
.evo-ctile__line { font-family: "new-spirit", var(--e-global-typography-primary-font-family), serif; font-style: italic; font-weight: 700; font-size: clamp(24px, 2vw, 30px); line-height: 1.12; color: var(--evo-navy); text-wrap: balance; }
@media (max-width: 560px) { .evo-ctile { min-height: 0; } }
.evo-col-empty { padding: 40px 0; font-size: 16px; }

/* ================================================================ 4. WHAT'S INSIDE — split, the shared accordion */
.evo-col-inside { background: var(--evo-col-wash); padding: var(--evo-sec) 0; }      /* the pillar wash builds (not sand) */
.evo-col-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.evo-col-split__aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--evo-header-h, 76px) + 32px); }
.evo-col-split__aside .evo-col-lede { font-size: 17px; }
.evo-col-split__pic { margin-top: 12px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0 var(--evo-radius-card) 0 0; }
.evo-col-split__pic img { width: 100%; height: 100%; object-fit: cover; }
.evo-col-ing__name { display: block; }
.evo-col-ing__lead { display: block; margin-top: 4px; font-family: var(--e-global-typography-text-font-family), sans-serif; font-weight: var(--e-global-typography-text-font-weight, 300); font-size: 14px; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--evo-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.evo-faq__item.is-open .evo-col-ing__lead { white-space: normal; opacity: 0; height: 0; margin: 0; }
.evo-col-ings .evo-faq__btn > span { min-width: 0; }
.evo-col-ing__in { margin-top: 12px !important; font-size: 14px; }
.evo-col-ing__in span { display: block; margin-bottom: 4px; font-family: var(--evo-pdp-caps); font-weight: var(--evo-caps-w, 600); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--evo-slate); }
.evo-col-ing__in a { color: var(--evo-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; transition: color var(--evo-t-hover) var(--evo-ease); }
.evo-col-ing__in a:is(:hover, :focus-visible) { color: var(--evo-col-voice); text-decoration-color: var(--evo-col-dark); }
.evo-col-ing__in span { color: var(--evo-col-voice); }
/* the shared accordion on this page speaks the page's dark: ring + mark, the open row, the hover fill (blocks.css .evo-faq, colours only) */
.evo-col .evo-faq__mark { box-shadow: inset 0 0 0 1.5px var(--evo-col-dark); }
.evo-col .evo-faq__mark::before, .evo-col .evo-faq__mark::after { background: var(--evo-col-dark); }
.evo-col .evo-faq__item.is-open .evo-faq__mark { background: var(--evo-col-dark); }
.evo-col .evo-faq__item.is-open .evo-faq__mark::before, .evo-col .evo-faq__item.is-open .evo-faq__mark::after { background: var(--evo-col-on); }
.evo-col .evo-faq__item.is-open .evo-faq__btn { color: var(--evo-col-voice) !important; }
@media (hover: hover) {
	.evo-col .evo-faq__btn:hover .evo-faq__mark { background: var(--evo-col-dark); }
	.evo-col .evo-faq__btn:hover .evo-faq__mark::before, .evo-col .evo-faq__btn:hover .evo-faq__mark::after { background: var(--evo-col-on); }
}
.evo-col .evo-faq .evo-faq__btn:focus:not(:focus-visible) { outline: 0; }
@media (max-width: 900px) {
	.evo-col-split { grid-template-columns: 1fr; }
	.evo-col-split__aside { position: static; }
	.evo-col-split__pic { aspect-ratio: 16 / 9; }
}

/* ================================================================ 5. PROOF + QUIZ — one navy band between two waves */
.evo-col-wave { position: relative; z-index: 3; line-height: 0; }
.evo-col-wave:not(.evo-col-wave--out) .evo-wave-clip { background: linear-gradient(to bottom, var(--evo-col-wash) 0, var(--evo-col-wash) 72%, var(--evo-navy) 72%, var(--evo-navy) 100%); }      /* rises out of What's inside (the wash) */
.evo-col-proof { background: var(--evo-navy); color: var(--evo-page); padding: var(--evo-sec-s) 0; margin: -1px 0; }
.evo-col-proof__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.evo-col-proof .evo-usp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* the trust band on navy: the same component, colours inverted (disc = navy-soft, words = the page tone) */
.evo-usp--onnavy .evo-usp__item .elementor-image-box-img { background: var(--evo-navy-soft) !important; color: var(--evo-page); }
.evo-usp--onnavy .evo-usp__item .elementor-image-box-img svg { width: 28px; height: 28px; }
.evo-usp--onnavy .evo-usp__item .elementor-image-box-title { color: var(--evo-page) !important; }
.evo-usp--onnavy .evo-usp__item .elementor-image-box-description { color: color-mix(in srgb, var(--evo-page) 74%, transparent) !important; }
.evo-col-quiz { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(12px, 2vw, 32px) 0; text-align: center; }
.evo-col-quiz .evo-quizband__head .elementor-heading-title { font-family: var(--e-global-typography-funchead-font-family), sans-serif; font-weight: var(--e-global-typography-funchead-font-weight, 600); font-size: var(--e-global-typography-funchead-font-size, 22px); letter-spacing: var(--e-global-typography-funchead-letter-spacing, .1em); text-transform: uppercase; line-height: 1.2; color: var(--evo-page); }
.evo-col-quiz .evo-quizband__sub p { color: color-mix(in srgb, var(--evo-page) 82%, transparent); font-size: 16px; line-height: 1.5; }
.evo-col-quiz .evo-quizband__copy { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1300px) {      /* below 1300 the three trust items need the full width to keep their titles on one line */
	.evo-col-proof__grid { grid-template-columns: 1fr; }
	.evo-col-proof .evo-usp__grid { gap: 28px 12px; }
}
@media (max-width: 600px) { .evo-col-proof .evo-usp__grid { grid-template-columns: 1fr !important; } .evo-col-quiz .evo-btn { width: 100%; } }

/* ================================================================ 6. PAIRS WELL WITH — the homepage rail, as is */
.evo-col-pairs { background: var(--evo-white); padding: var(--evo-sec-s) 0 var(--evo-sec); }
.evo-col-pairs .evo-best { --evo-best-per: 3; }
@media (min-width: 1025px) {
	.evo-col-pairs .evo-best__nav { display: none; }      /* three cards fit: nothing to scroll */
	.evo-col-pairs .evo-pcard { flex-basis: calc((100% - 2 * var(--evo-best-gap)) / 3); }      /* the rail's basis assumes 4 gaps (4.4 cards); three cards + two gaps = the full container */
}
@media (max-width: 1024px) { .evo-col-pairs .evo-best { --evo-best-per: 2.2; } }
@media (max-width: 600px) { .evo-col-pairs .evo-best { --evo-best-per: 1.25; } }

/* ================================================================ 8. JOURNAL — the journal's own Blog Card */
.evo-col-read { background: var(--evo-page); padding: var(--evo-sec) 0; }
.evo-col-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .evo-col-posts { grid-template-columns: 1fr; gap: 28px; } }
.evo-col-post { min-width: 0; display: flex; }
.evo-col-post > .elementor, .evo-col-post > .elementor > .e-con { flex: 1 1 auto; height: 100%; }      /* equal-height cards, as the journal grid */

/* ================================================================ 9. FAQ + EDITORIAL */
.evo-col-faq { background: var(--evo-white); padding: var(--evo-sec) 0; }
.evo-col-split--faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
@media (max-width: 900px) { .evo-col-split--faq { grid-template-columns: 1fr; } }
.evo-col-ed { max-width: 760px; margin: clamp(48px, 5vw, 80px) auto 0; padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid var(--evo-line); }
.evo-col-ed__text { font-size: 16px; line-height: 1.7; color: var(--evo-charcoal); font-weight: var(--e-global-typography-text-font-weight, 300); max-height: calc(2 * 1.7em); overflow: hidden; position: relative; transition: max-height var(--evo-t-section) var(--evo-ease); }
.evo-col-ed__text::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.7em; background: linear-gradient(to bottom, transparent, var(--evo-white)); transition: opacity var(--evo-t-section) var(--evo-ease); }
.evo-col-ed.is-open .evo-col-ed__text::after { opacity: 0; }
.evo-col-ed__text p { margin: 0 0 1em; }
.evo-col-ed__more { margin: 12px 0 0; padding: 0 0 4px; border: 0; border-radius: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; color: var(--evo-navy); cursor: pointer; font-family: var(--evo-pdp-caps); font-weight: var(--evo-caps-w, 600); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.evo-col-ed__guide { margin-top: 24px !important; }

/* ================================================================ 10. OTHER GOALS — the homepage goal cards; the pillar hover is THIS page only (.evo-goal--pillar) */
.evo-col-goals { background: var(--evo-page); padding: var(--evo-sec) 0; }
.evo-col .evo-col-goals__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.evo-col .evo-col-goals__grid .elementor-image-box-wrapper { height: auto; }      /* cards are exactly their 4:3 image (no row stretch) */
.evo-goal--pillar .elementor-image-box-img { position: relative; }
.evo-goal--pillar .elementor-image-box-img::after { content: ""; position: absolute; inset: 0; background: var(--evo-pillar-light); mix-blend-mode: multiply; opacity: 0; transition: opacity var(--evo-t-hover) var(--evo-ease); pointer-events: none; }
.evo-goal--pillar:hover .elementor-image-box-img::after, .evo-goal--pillar:has(a:focus-visible) .elementor-image-box-img::after { opacity: .55; }
@media (max-width: 1024px) { .evo-col .evo-col-goals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* MOTION (this page only): the site motion layer (evopure-brand) is 24px / 600ms; the page moves like the homepage reveal (home.css): 16px, 600ms, the
   brand ease, 60ms stagger (collection.js sets data-stagger="60"). The site-wide layer is untouched. */
html.evo-motion .evo-col .evo-fade-up:not(.is-in) { transform: translate3d(0, 16px, 0); }
html.evo-motion .evo-col .evo-fade-up { transition: opacity 600ms var(--evo-ease), transform 600ms var(--evo-ease); transition-delay: var(--evo-delay, 0ms); }

@media (prefers-reduced-motion: reduce) { .evo-wcard, .evo-ctile, .evo-wcard__media img, .evo-col-ed__text, .evo-goal--pillar .elementor-image-box-img::after, .evo-col-ing__in a { transition: none !important; } }