/* =============================================================
   TONIC 180 — main.css  ·  v0.4.0 editorial rebuild
   Bright, airy, editorial. Oversized Prata display, generous
   whitespace, asymmetric layouts, scroll-driven motion.
   ============================================================= */

/* ---------- 1. Tokens ---------------------------------------- */
:root {
	--indigo: #293880;
	--sea:    #2979b8;
	--forest: #33583a;
	--elixir: #69b289;   /* Tonic The Elixirs brand green. */
	--elixir-dark: #55997a;  /* …and its hover/pressed shade. */
	--olive:  #677633;
	--ember:  #d55228;
	--amber:  #e19726;
	--petal:  #f195aa;

	--paper:  #f7f5f0;
	--paper-2:#ffffff;
	--ink:    #14161f;
	--ink-2:  #3a3f4d;
	--muted:  #8a8f9c;
	--line:   #e6e2d8;
	--hair:   rgba(20, 22, 31, .1);

	--font-display: "Prata", Georgia, serif;
	--font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;
	/* Headings + main nav. Falls back to Prata until the licensed Saol Display
	   files are dropped into assets/fonts/ (see @font-face below). */
	--font-title:   "SaolDisplay", "Prata", Georgia, serif;
	/* Brand accent face (Klim "Orelo" expanded cut) — footer slogan and the
	   other pulled-out phrases the brand sets apart from body copy. */
	--font-accent:  "OreloExpanded", "SaolDisplay", "Prata", Georgia, serif;

	/* ---- Header bar + mega-menu ----
	   Two styles only: blue everywhere except Tonic Digest, which is green.
	   The bar is the flat base colour and the dropdown carries an elliptical
	   bloom over that same base, matching the supplied reference. The ellipse's
	   vertical radius is exactly its distance to the panel's top edge, so the
	   panel meets the bar in precisely the bar's colour and the two read as one
	   surface whatever the panel's height. Base and bloom values sampled from
	   the reference screenshots. */
	--menu-blue:        #0e0c9e;
	--menu-blue-dark:   #0a0878;  /* pressed/hover shade for blue buttons */
	--menu-blue-glow:   #41b4fb;
	--menu-green:       #078e32;
	--menu-green-glow:  #00ff49;
	--menu-blue-panel:  radial-gradient(ellipse 48% 50% at 47% 50%, var(--menu-blue-glow) 0%, var(--menu-blue) 100%);
	--menu-green-panel: radial-gradient(ellipse 48% 50% at 47% 50%, var(--menu-green-glow) 0%, var(--menu-green) 100%);

	/* Homepage / Method blue wash — the branches band. */
	--blue-1: #246b84;
	--blue-2: #76bbcd;
	--blue-wash:  linear-gradient(135deg, var(--blue-1) 0%, var(--blue-2) 100%);

	/* Footer on the blue pages. Same two colours as the blue menu — its flat
	   bar shade and its bloom — laid out in the wash's existing left-to-right
	   diagonal rather than the menu's radial bloom, so footer and menu close
	   the page in one palette while keeping the footer's own shape. */
	--blue-footer-wash: linear-gradient(135deg, var(--menu-blue) 0%, var(--menu-blue-glow) 100%);

	/* Tonic The Elixirs keeps its own menu: a flat elixir-green bar opening
	   into the green-to-mint wash. The panel lays a first-colour veil over that
	   wash, fully opaque along its top edge and gone by 42%, so it meets the
	   bar in exactly the bar's colour and the join stays invisible whatever the
	   panel's height. Warm pink-to-amber footer beneath it. */
	--elixir-wash:  linear-gradient(135deg, var(--elixir) 0%, #9af7c0 100%);
	--elixir-panel: linear-gradient(180deg, var(--elixir) 0%, rgb(105 178 137 / 0) 42%), var(--elixir-wash);
	--elixir-footer-wash: linear-gradient(135deg, #f196ab 0%, #e29826 100%);

	/* Tonic Digest: deep green through to ember. The closing band and the
	   footer split one vertical run between them and meet at --digest-seam —
	   the run's colour at that boundary — so the join stays invisible however
	   tall either box gets. Seam sits ~40% along, where the band ends on a
	   desktop viewport. */
	--digest-green: #078e32;
	--digest-ember: #d55127;
	--digest-seam:  #59762e;

	--step--2: clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
	--step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem);
	--step-0:  clamp(1rem, 0.95rem + 0.28vw, 1.15rem);
	--step-1:  clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
	--step-2:  clamp(1.9rem, 1.55rem + 1.7vw, 2.9rem);
	--step-3:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
	--step-4:  clamp(3.4rem, 2.2rem + 6vw, 7.5rem);
	--step-5:  clamp(4rem, 2rem + 10vw, 11rem);

	--space:     clamp(1.15rem, 3vw, 2rem);
	--gutter:    clamp(1.5rem, 5vw, 6rem);
	--section:   clamp(3.25rem, 6vw, 6rem);
	--container: 1320px;
	--measure:   68ch;
	--radius:    0px;
	--title:     40px;
	--header-h:  112px;
	/* Top padding for pages with no hero for the fixed header to float over. */
	--header-clear: calc(var(--header-h) + var(--section) + 2rem);
	--ease:      cubic-bezier(.22, 1, .36, 1);
	--ease-io:   cubic-bezier(.65, 0, .35, 1);
}

/* ---------- 1b. Saol Display ----------------------------------
   Licensed (Klim Type Foundry). Only the four faces present in assets/fonts/
   are declared — a browser never downloads a face nothing asks for, but
   declaring one whose file is missing would 404. Add a block here if you add
   a weight. Headings and the main nav both render at weight 400.
   ------------------------------------------------------------- */
@font-face {
	font-family: "SaolDisplay";
	src: url("../fonts/SaolDisplay-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "SaolDisplay";
	src: url("../fonts/SaolDisplay-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "SaolDisplay";
	src: url("../fonts/SaolDisplay-LightItalic.ttf") format("truetype");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "SaolDisplay";
	src: url("../fonts/SaolDisplay-SemiboldItalic.ttf") format("truetype");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

/* ---------- 1c. Orelo Expanded --------------------------------
   Licensed accent face. Medium is the only cut supplied; woff2 first, otf
   as the fallback for anything that cannot take it.
   ------------------------------------------------------------- */
@font-face {
	font-family: "OreloExpanded";
	src: url("../fonts/OreloExpanded-Medium.woff2") format("woff2"),
	     url("../fonts/OreloExpanded-Medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---------- 1d. Love ------------------------------------------
   Script accent face, used for the second word of the Digest menu-section
   titles. Supplied as a single weight; the .eot that shipped with it is for
   IE ≤ 8 and is deliberately not wired up.
   ------------------------------------------------------------- */
@font-face {
	font-family: "Love";
	src: url("../fonts/Love.woff2") format("woff2"),
	     url("../fonts/Love.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ---------- 2. Base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: .01em;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 400; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.01em; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--indigo); color: #fff; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 4px; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--indigo); color: #fff; padding: .6rem 1.2rem; z-index: 200; }
.skip-link:focus { left: 0; }

/* ---------- 3. Layout primitives ------------------------------ */
.container { width: min(var(--container), 100% - 2 * var(--space)); margin-inline: auto; }
.container--narrow { max-width: 820px; }
.container--wide { width: min(1560px, 100% - 2 * var(--space)); }

.section { padding-block: var(--section); }
.section--center { text-align: center; }
/* For pages with no hero for the fixed header to float over. */
.section--offset { padding-top: var(--header-clear); }

.flow > * + * { margin-block-start: 1.1em; }
.measure { max-width: var(--measure); }

.eyebrow { display: inline-flex; align-items: center; gap: .8em; font-family: var(--font-body); font-weight: 500; font-size: var(--step--2); letter-spacing: .32em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.4rem; }
.eyebrow::before { content: ""; width: 2.4em; height: 1px; background: currentColor; opacity: .6; }
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: rgba(255,255,255,.85); }

.display { font-family: var(--font-title); font-size: var(--step-3); line-height: 1.02; letter-spacing: -.02em; }
.display--xl { font-size: var(--step-4); }

.section-head { max-width: 32ch; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

/* ---------- 4. Buttons ---------------------------------------- */
.btn { --btn-fg: var(--ink); --btn-bg: transparent; position: relative; display: inline-flex; align-items: center; gap: .8em; font-family: var(--font-body); font-size: var(--step--1); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: 1.05em 2.4em; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid currentColor; border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: color .5s var(--ease); isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.btn:hover { color: var(--btn-hover, var(--paper)); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
/* --indigo is an alias of --fill; several templates ask for it by that name.
   Without it they fall through to the bare .btn base, whose hover fill and
   hover text both resolve to --paper: an invisible button. */
.btn--fill, .btn--indigo { --btn-bg: var(--indigo); --btn-fg: #fff; border-color: var(--indigo); }
.btn--fill:hover, .btn--indigo:hover { --btn-hover: var(--indigo); color: var(--indigo); }
.btn--fill::before, .btn--indigo::before { background: #fff; }
.btn--dark:hover { color: var(--paper); }
.btn--dark::before { background: var(--ink); }
.btn--light { --btn-fg: #fff; }
.btn--light:hover { color: var(--ink); }
.btn--light::before { background: #fff; }
.btn--forest { --btn-bg: var(--forest); --btn-fg: #fff; border-color: var(--forest); }
.btn--forest:hover { color: var(--forest); }
.btn--forest::before { background: #fff; }
.btn--sm { padding: .6em 1.4em; letter-spacing: .14em; }
.btn--wide { width: 100%; justify-content: center; }

.link { position: relative; font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; padding-bottom: .3em; }
.link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 5. Promo bar --------------------------------------- */
.promo-bar { background: #fff; color: var(--ink); position: relative; z-index: 101; border-bottom: 1px solid var(--hair); }
.promo-bar__inner { width: min(var(--container), 100% - 2 * var(--space)); margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 4rem; padding-block: .65rem; }
.promo-bar__media img { height: 120px; width: auto; object-fit: contain; }
.promo-bar__text { margin: 0; text-align: left; }
.promo-bar__title { display: block; font-size: var(--step-0); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.promo-bar__sub { display: block; font-size: var(--step--1); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: .15rem; }
/* "Molecular Hydrogen" — breathes from the bar's ink up to glowing brand green
   and back, on a loop. The glow is text-shadow rather than a filter so it stays
   crisp on the white bar, and it is fully transparent at the ink end so the
   black phase is clean. */
.promo-bar__hl {
	color: var(--ink);
	font-weight: 500;
	animation: promo-hl-glow 3.2s var(--ease-io) infinite;
	will-change: color, text-shadow;
}
@keyframes promo-hl-glow {
	0%, 100% { color: var(--ink);    text-shadow: 0 0 0 rgb(105 178 137 / 0), 0 0 0 rgb(105 178 137 / 0); }
	50%      { color: var(--elixir); text-shadow: 0 0 10px rgb(105 178 137 / .75), 0 0 24px rgb(105 178 137 / .45); }
}
/* Reduced motion: stop the loop outright and hold the lit green. The global
   reduced-motion rule only shrinks animation-duration, which on an infinite
   animation cycles it thousands of times a second — a black/green flicker. */
@media (prefers-reduced-motion: reduce) {
	.promo-bar__hl { animation: none; color: var(--elixir); text-shadow: 0 0 10px rgb(105 178 137 / .55); }
}
.promo-bar .btn { --btn-fg: var(--ink); padding: .55em 1.4em; border-color: var(--ink); }
.promo-bar .btn::before { background: var(--ink); }
.promo-bar .btn:hover { color: #fff; }

/* ---------- 6. Header ------------------------------------------ */
/* The promo bar scrolls at the very top; the fixed header sits directly
   below it (offset by --promo-h, measured in JS) until the promo bar scrolls
   out of view, at which point JS sets --promo-h to 0 and the header pins to the
   top. Fallback offset keeps the header clear of the promo bar without JS. */
:root { --promo-h: 44px; }
.site-header { position: fixed; inset-block-start: var(--promo-h); inset-inline: 0; z-index: 100; color: #fff; transition: transform .5s var(--ease), color .5s var(--ease); }
/* Scrim: keeps white nav legible over bright hero imagery while transparent. */
.site-header::before { content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; background: linear-gradient(180deg, rgb(12 14 28 / .38), rgb(12 14 28 / 0)); opacity: 1; transition: opacity .5s var(--ease); pointer-events: none; }
.site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); opacity: 0; transition: opacity .5s var(--ease); box-shadow: 0 1px 0 var(--hair); }
.site-header.is-solid { color: #fff; }
.site-header.is-solid::before { opacity: 0; }
.site-header.is-solid::after { opacity: 1; background: var(--indigo); }
.site-header.is-pinned { inset-block-start: 0; }
.site-header.is-hidden { transform: translateY(-100%); }
.admin-bar .site-header { inset-block-start: calc(var(--promo-h) + 32px); }
.admin-bar .site-header.is-pinned { inset-block-start: 32px; }
.site-header__inner { width: min(var(--container), 100% - 2 * var(--space)); margin-inline: auto; min-height: var(--header-h); display: flex; align-items: center; gap: 2rem; }
/* Raised above the mobile menu overlay (.site-nav, fixed, later in the DOM),
   which otherwise painted its paper panel over the logo; the dark logo swap on
   .is-nav-open below depends on it being visible. */
.site-header__brand { margin-right: auto; position: relative; z-index: 1; }

.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.site-nav__list > .menu-item > a { position: relative; font-family: var(--font-title); font-weight: 400; font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; padding-block: .5rem; }
.site-nav__list > .menu-item > a::after { content: ""; position: absolute; left: 0; bottom: .1rem; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.site-nav__list > .menu-item:hover > a::after, .site-nav__list > .menu-item:focus-within > a::after { transform: scaleX(1); transform-origin: left; }

.site-nav .menu-item { position: relative; }
.site-nav .sub-menu { list-style: none; margin: 0; padding: 1.6rem 1.8rem; position: absolute; top: 100%; left: 50%; min-width: 250px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px rgb(20 22 40 / .16); opacity: 0; visibility: hidden; translate: -50% 10px; transition: opacity .4s var(--ease), translate .4s var(--ease), visibility .4s; }
.site-nav .sub-menu a { display: block; font-size: var(--step--1); letter-spacing: .02em; padding-block: .5rem; white-space: nowrap; color: var(--ink-2); transition: color .3s, padding .3s; }
.site-nav .sub-menu a:hover { color: var(--ink); padding-left: .5rem; }
.site-nav .menu-item:hover > .sub-menu, .site-nav .menu-item:focus-within > .sub-menu { opacity: 1; visibility: visible; translate: -50% 0; }

/* Mega-menu: the Method dropdown breaks out full-bleed with a gradient,
   matching the brand's mega-menu reference. Desktop only — the mobile
   breakpoint below reverts .sub-menu to a simple stacked list. */
@media (min-width: 961px) {
	/* Static parent so the mega-menu's containing block becomes .site-header
	   itself (fixed, therefore positioned). It then hangs off the header's
	   bottom edge and follows it through the pin/hide transitions, instead of
	   being pinned to a stale top offset. */
	.site-nav .menu-item-has-children { position: static; }
	.site-nav .menu-item-has-children > .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin: 0;
		/* Slides down from behind the header, so no sliver of hero shows
		   between the two while the panel fades in. */
		translate: 0 -10px;
		/* The panel is flush with the bar, so its shadow must only fall below
		   it. The inherited 0 30px 60px shadow blurred upward onto the bar and
		   drew a dark line along the join; a negative spread keeps the same
		   drop without any of it reaching above the panel's top edge. */
		box-shadow: 0 40px 60px -30px rgb(20 22 40 / .16);
		padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
		/* --mega-x is the trigger link's left edge, measured in JS. Falls back
		   to the gutter if JS hasn't run. */
		padding-inline-start: var(--mega-x, var(--gutter));
		/* Layered light sources over the indigo base: a cyan bloom low-centre,
		   a cooler blue glow bottom-left. Topmost layer paints first. */
		background:
			radial-gradient(58% 85% at 60% 120%, rgb(140 226 255 / .80) 0%, rgb(90 190 235 / .28) 42%, rgb(90 190 235 / 0) 68%),
			radial-gradient(46% 78% at 10% 96%, rgb(86 118 255 / .55) 0%, rgb(86 118 255 / 0) 66%),
			radial-gradient(120% 140% at 50% 130%, var(--sea) 0%, var(--indigo) 45%, var(--indigo) 100%);
		color: #fff;
		display: grid;
		grid-template-columns: repeat(3, max-content);
		grid-auto-flow: column;
		grid-template-rows: repeat(3, auto);
		gap: 1.4rem clamp(3rem, 6vw, 6rem);
		justify-content: start;
		align-content: start;
	}
	.site-nav .menu-item-has-children:hover > .sub-menu,
	.site-nav .menu-item-has-children:focus-within > .sub-menu { translate: 0 0; }

	/* Hovering anywhere in the header floods it with the mega-menu's top colour,
	   so bar and dropdown read as one continuous panel. Drop the hero scrim and
	   the hairline that would otherwise seam them apart. Excluded while the
	   mobile nav overlay is open, which is a paper surface. */
	.site-header:not(.is-nav-open):hover::before,
	.site-header:not(.is-nav-open):focus-within::before { opacity: 0; }
	.site-header:not(.is-nav-open):hover::after,
	.site-header:not(.is-nav-open):focus-within::after { opacity: 1; background: var(--indigo); box-shadow: none; }
	.site-nav .menu-item-has-children .sub-menu a {
		font-size: var(--step-0);
		letter-spacing: .02em;
		text-transform: none;
		color: rgba(255,255,255,.9);
		padding-block: .4rem;
	}
	.site-nav .menu-item-has-children .sub-menu a:hover { color: #fff; padding-left: 0; text-decoration: underline; text-underline-offset: 4px; }
}

.site-header__actions { display: flex; align-items: center; gap: .4rem; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; color: inherit; background: none; border: 0; cursor: pointer; }
.icon-btn--cart { position: relative; }
.cart-count { position: absolute; top: 6px; right: 4px; min-width: 17px; height: 17px; padding-inline: 4px; display: grid; place-items: center; font-size: .6rem; font-weight: 600; background: var(--petal); color: var(--ink); border-radius: 999px; opacity: 0; transform: scale(.4); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.cart-count.has-items { opacity: 1; transform: scale(1); }

/* A native <button>: strip the UA fill, border and padding (it rendered as a
   white bordered box on phones) and inherit colour, since buttons don't — the
   bars are currentColor, so they follow the header's white/ink like the cart. */
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 0; margin: 0; color: inherit; background: none; border: 0; border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
.nav-toggle__bar { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }

/* Submenu chevron, injected into parent items by JS. Hidden by default: on
   desktop the mega-menu opens on hover, so it only appears in the mobile menu
   (see the max-width: 960px block). 44px keeps it a comfortable tap target. */
.site-nav__expand { display: none; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; color: inherit; background: none; border: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
.site-nav__expand::before { content: ""; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--ease); }
.menu-item-has-children.is-open > .site-nav__expand::before { transform: translateY(2px) rotate(-135deg); }

@media (max-width: 960px) {
	.nav-toggle { display: inline-flex; }
	/* display: block, not flex: as a flex container the list was stretched to
	   the panel's height, so anything past the fold was clipped and the panel
	   never became scrollable (scrollHeight stayed equal to clientHeight).
	   As a block it scrolls natively; data-lenis-prevent on the element keeps
	   Lenis from swallowing the gesture while the page scroll is stopped. */
	.site-nav { position: fixed; inset: 0; background: var(--paper); color: var(--ink); padding: calc(var(--header-h) + 3rem) var(--gutter) 3rem; display: block; opacity: 0; visibility: hidden; translate: 0 -2%; transition: opacity .5s var(--ease), translate .5s var(--ease), visibility .5s; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.site-nav.is-open { opacity: 1; visibility: visible; translate: 0 0; }
	.site-nav__list { flex-direction: column; gap: 1.6rem; }
	.site-nav__list > .menu-item > a { font-size: var(--step-1); font-family: var(--font-display); letter-spacing: 0; text-transform: none; }
	.site-nav .sub-menu { position: static; opacity: 1; visibility: visible; translate: 0; box-shadow: none; background: none; padding: .8rem 0 0 1.2rem; min-width: 0; }

	/* Parent items collapse behind a chevron. The row is a 2-column grid so the
	   chevron sits beside the link while the submenu spans the full width below
	   it; the link itself stays a normal link, so tapping it still navigates. */
	.site-nav__list > .menu-item-has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .5rem; }
	.site-nav__list > .menu-item-has-children > .sub-menu { grid-column: 1 / -1; display: none; }
	/* opacity/visibility restated here rather than relying on the .site-nav
	   .sub-menu override above: the desktop rule starts the panel hidden, and if
	   only part of that cascade lands the submenu takes up its full height while
	   painting nothing — an expanded menu with a blank gap where the links are. */
	.site-nav__list > .menu-item-has-children.is-open > .sub-menu { display: block; opacity: 1; visibility: visible; translate: 0; position: static; }
	.site-nav__expand { display: grid; }
	.site-header.is-nav-open { color: var(--ink); }
	.site-header.is-nav-open::after { opacity: 1; background: var(--paper); }
	.nav-toggle.is-active .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
	.nav-toggle.is-active .nav-toggle__bar:nth-child(2) { opacity: 0; }
	.nav-toggle.is-active .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---------- 7. Brand lockup ------------------------------------ */
.brand-lockup { display: inline-flex; align-items: center; gap: .85rem; color: inherit; }
.brand-lockup__mark { flex: none; }
.brand-lockup__word { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.brand-lockup__name { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: .2em; margin-right: -.2em; }
.brand-lockup__num { font-size: .62rem; letter-spacing: .55em; margin: .3em -.55em 0 0; }
.custom-logo { max-height: 54px; width: auto; }

/* Image logo with dark/light state swap. The light logo carries every dark
   surface — hero imagery and the indigo sticky header alike. Only the mobile
   nav overlay, which is paper, needs the dark logo. */
.brand-lockup--img { position: relative; display: inline-block; line-height: 0; }
/* Qualified by .brand-lockup so we out-specify WooCommerce's
   `.woocommerce img, .woocommerce-page img { height: auto }` (0,1,1), which
   loads after this file and would otherwise blow the logo up to its natural
   271px on every shop page. */
.brand-lockup .brand-logo { height: 80px; width: auto; display: block; transition: opacity .4s var(--ease); margin-top: 24px; }
.brand-logo--dark { position: absolute; inset: 0; opacity: 0; }
.site-header.is-nav-open .brand-logo--light { opacity: 0; }
.site-header.is-nav-open .brand-logo--dark { opacity: 1; }
@media (max-width: 600px) { .brand-lockup .brand-logo { height: 48px; margin-top: 4px; } }
.site-footer .brand-logo--light { opacity: 1; }
.site-footer .brand-logo--dark { opacity: 0; }
.site-footer .brand-logo { height: 42px; }

/* ---------- 8. HERO -------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--ink); }
.hero__media { position: absolute; inset: -10% 0; z-index: 0; }
.hero__video, .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(12 14 28 / .45) 0%, rgb(12 14 28 / .2) 40%, rgb(12 14 28 / .55) 100%); }
.hero__inner { position: relative; z-index: 2; text-align: center; padding-inline: var(--space); }

.hero__seq { display: grid; place-items: center; min-height: 1.2em; margin-bottom: 1.5rem; }
.hero__word { grid-area: 1 / 1; font-family: var(--font-display); font-size: var(--step-5); line-height: 1; opacity: 0; filter: blur(12px); transform: scale(1.04); }
.hero__word.is-in { opacity: 1; filter: blur(0); transform: scale(1); transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease); }
.hero__word.is-out { opacity: 0; filter: blur(12px); transform: scale(.97); transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease); }
.hero__mark { grid-area: 1 / 1; opacity: 0; transform: scale(.8) rotate(-6deg); }
.hero__mark.is-in { opacity: 1; transform: scale(1) rotate(0); transition: opacity 1.1s var(--ease), transform 1.4s var(--ease); }
.hero__tagline { font-size: var(--step-1); font-weight: 300; letter-spacing: .04em; opacity: 0; transform: translateY(20px); }
.hero__tagline.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease) .2s, transform 1s var(--ease) .2s; }
.hero__cta { margin-top: 2.5rem; opacity: 0; transform: translateY(20px); }
.hero__cta.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease) .4s, transform 1s var(--ease) .4s; }

.hero__cue { position: absolute; left: 50%; bottom: 2.5rem; translate: -50% 0; z-index: 2; display: grid; gap: .6rem; justify-items: center; font-size: var(--step--2); letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.hero__cue::after { content: ""; width: 1px; height: 46px; background: linear-gradient(#fff, transparent); animation: cue-line 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue-line { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.no-js .hero__word:last-of-type, .no-js .hero__mark, .reduced-motion .hero__mark { opacity: 1; filter: none; transform: none; }
.no-js .hero__tagline, .no-js .hero__cta { opacity: 1; transform: none; }

/* ---------- 9. Statement --------------------------------------- */
.statement { padding-block: var(--section); }
/* balance evens out the line lengths so the statement never ends on a stub;
   the &nbsp; before "you." in the markup is the fallback where balance is
   unsupported, and guarantees the last word is never alone either way. */
.statement__text { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.32; letter-spacing: -.01em; max-width: 24ch; margin-inline: auto; text-align: center; text-wrap: balance; }
.statement__lede { margin-top: 1.75rem; max-width: 52ch; margin-inline: auto; text-align: center; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }

.rise-line { display: block; overflow: hidden; }
.rise-line > span { display: block; transform: translateY(110%); transition: transform .9s var(--ease); transition-delay: var(--rise-delay, 0s); }
.is-visible .rise-line > span { transform: translateY(0); }
.no-js .rise-line > span, .reduced-motion .rise-line > span { transform: none; }

/* ---------- 10. Philosophy pillars ----------------------------- */
.pillars__list { list-style: none; margin: 0; padding: 0; }
.pillars__item { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: baseline; padding-block: clamp(.7rem, 1.2vw, 1.05rem); border-bottom: 1px solid var(--hair); }
.pillars__item:first-child { border-top: 1px solid var(--hair); }
.pillars__num { font-family: var(--font-display); font-size: var(--step-1); color: var(--muted); }
.pillars__text { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; letter-spacing: -.01em; text-align: center; }

/* ---------- 11. Verticals — "our tools" card trio ------------- */
.verticals__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.vertical { display: block; }
.vertical__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--hair); color: #fff; }
.vertical__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
/* Same treatment as .branch: bottom-up scrim for legibility, over a flat 30%
   tint on the whole image. */
.vertical__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 40%, rgb(12 14 28 / .7)), rgb(12 14 28 / .30); pointer-events: none; }
/* gap matches the title-to-button span on the booking cards. */
.vertical__overlay { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.1rem; padding: clamp(1.4rem, 2.5vw, 2rem); }
.vertical__overlay .vertical__title { margin: 0; text-transform: uppercase; color: #fff; font-size: var(--step-1); }
.vertical__media:hover .btn { color: var(--ink); }
.vertical__media:hover .btn::before { transform: scaleX(1); transform-origin: left; }

/* ---------- 12b. Longevity booking grid ------------------------ */
.longevity { background: radial-gradient(72% 55% at 84% 80%, rgb(255 216 62 / .85) 0%, rgb(255 216 62 / 0) 62%),
		linear-gradient(168deg, #efa585 0%, #f0873a 40%, #f6a11f 70%, #f8c62b 100%); color: #fff; }
.longevity .display { color: #fff; }

.booking__grid { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
@media (min-width: 900px) { .booking__grid { grid-template-columns: repeat(3, 1fr); } }

/* The CTA is a sibling of the media link, not a child — an <a> may not nest
   inside another <a> — so the card positions it over the image. */
.booking-card { position: relative; }
.booking-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgb(255 255 255 / .25); }
.booking-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.booking-card:hover .booking-card__media img { transform: scale(1.06); }
/* Same overlay recipe as .branch / .vertical__media. */
.booking-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgb(12 14 28 / .7)), rgb(12 14 28 / .30); pointer-events: none; }
.booking-card__overlay { position: absolute; inset-inline: 0; inset-block-end: 5.8rem; z-index: 1; padding-inline: 1rem; }
/* Two classes so this beats the uniform --title size override at the foot of
   this file, which would otherwise render these headings at 40px. */
.booking-card__overlay .booking-card__title { margin: 0; color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: var(--step-1); line-height: 1.15; }
.booking-card__cta { position: absolute; inset-block-end: 1.3rem; left: 50%; translate: -50% 0; z-index: 2; }

/* ---------- 12c. Hover cards (Method / Digest / Elixirs) --------
   One component, three skins. .service-card is 4:5; .dish-card and
   .elixir-card are square. All three overlay their text on the photo and pin a
   CTA to the bottom; service + dish additionally reveal a detail block on
   hover/focus. */
.service-grid,
.dish-grid,
.elixir-grid { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
@media (min-width: 900px) {
	.service-grid,
	.dish-grid,
	.elixir-grid { grid-template-columns: repeat(3, 1fr); }

	/* The flavour count follows WooCommerce, so the elixir grid sizes tracks to
	   the cards and centres them: three still fill the row at the same width as
	   a fixed 3-up, while one or two sit centred instead of being stranded in an
	   empty three-column frame. */
	.elixir-grid {
		grid-template-columns: repeat(auto-fit, minmax(260px, 424px));
		justify-content: center;
	}
}

.service-card,
.dish-card,
.elixir-card { position: relative; }
.service-card__media,
.dish-card__media,
.elixir-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--hair); color: #fff; }
.dish-card__media,
.elixir-card__media { aspect-ratio: 1; }
.service-card__media img,
.dish-card__media img,
.elixir-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.service-card:hover .service-card__media img,
.dish-card:hover .dish-card__media img,
.elixir-card:hover .elixir-card__media img { transform: scale(1.06); }
.service-card__media::after,
.dish-card__media::after,
.elixir-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgb(12 14 28 / .78)), rgb(12 14 28 / .30); pointer-events: none; transition: background .5s var(--ease); }
.service-card:hover .service-card__media::after,
.dish-card:hover .dish-card__media::after,
.elixir-card:hover .elixir-card__media::after { background: linear-gradient(transparent 10%, rgb(12 14 28 / .85)), rgb(12 14 28 / .42); }
/* Dishes are lit, appetising food — lighten the scrim so the plates read. */
.dish-card__media::after { background: linear-gradient(transparent 48%, rgb(12 14 28 / .55)), rgb(12 14 28 / .16); }
.dish-card:hover .dish-card__media::after { background: linear-gradient(transparent 22%, rgb(12 14 28 / .72)), rgb(12 14 28 / .30); }
/* Two layers, two jobs. The flat tint dims the whole packshot — that is what
   reads as "dim", so it drops to a token 7%. The bottom gradient only exists
   to keep the white title + button legible against a white box, so it stays
   heavy; halving it too would make them unreadable. */
.elixir-card__media::after { background: linear-gradient(transparent 45%, rgb(12 14 28 / .62)), rgb(12 14 28 / .07); }
.elixir-card:hover .elixir-card__media::after { background: linear-gradient(transparent 30%, rgb(12 14 28 / .70)), rgb(12 14 28 / .12); }

/* 5.9rem over a 1.4rem CTA leaves the same 4.5rem span the booking cards use,
   so every card on the site has an identical title-to-button gap. */
.service-card__overlay,
.dish-card__overlay,
.elixir-card__overlay { position: absolute; inset-inline: 0; inset-block-end: 5.9rem; z-index: 1; padding-inline: clamp(1.1rem, 2vw, 1.6rem); text-align: center; }
/* Two classes to beat the uniform --title size override at the foot of this file. */
.service-card__overlay .service-card__title,
.dish-card__overlay .dish-card__title,
.elixir-card__overlay .elixir-card__title { margin: 0; color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: var(--step-1); line-height: 1.15; }

.elixir-card__eyebrow { display: block; margin-bottom: .5rem; font-size: var(--step--2); letter-spacing: .28em; text-transform: uppercase; color: rgb(255 255 255 / .75); }

/* 0fr -> 1fr animates the row's height without a hard-coded max-height, so the
   excerpt can be any length. The child needs min-height:0 + overflow:hidden. */
.service-card__reveal,
.dish-card__reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--ease), opacity .4s var(--ease); }
.service-card:hover .service-card__reveal,
.service-card:focus-within .service-card__reveal,
.dish-card:hover .dish-card__reveal,
.dish-card:focus-within .dish-card__reveal { grid-template-rows: 1fr; opacity: 1; }
.service-card__desc,
.dish-card__details { min-height: 0; overflow: hidden; margin-top: .7rem; font-size: var(--step--1); line-height: 1.55; color: rgb(255 255 255 / .85); }

.dish-card__desc { margin: 0; }
.dish-card__notes { margin: .6rem 0 0; font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.dish-card__links { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: var(--step--2); letter-spacing: .06em; text-transform: uppercase; }
.dish-card__links a { text-decoration: underline; text-underline-offset: 3px; color: #fff; }

.service-card__cta,
.dish-card__cta,
.elixir-card__cta { position: absolute; inset-block-end: 1.4rem; left: 50%; translate: -50% 0; z-index: 2; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.service-card__reveal,
	.dish-card__reveal { grid-template-rows: 1fr; opacity: 1; }
}

.reveal-img { position: relative; }
.reveal-img::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform-origin: right; transition: transform 1.1s var(--ease-io); z-index: 2; }
/* The observer adds .is-visible to the .reveal-img element itself; it also
   lands on an ancestor when one carries [data-reveal]. Match both — keying
   only on the ancestor leaves standalone .reveal-img covered forever. */
.reveal-img.is-visible::after,
.is-visible .reveal-img::after { transform: scaleX(0); }
.no-js .reveal-img::after, .reduced-motion .reveal-img::after { transform: scaleX(0); }

/* ---------- 12. Branches --------------------------------------- */
.branches { background: radial-gradient(ellipse 58% 92% at 50% 50%, #0f2444 0%, #17305c 26%, var(--indigo) 45%, var(--sea) 72%, #5fbce9 100%); color: #fff; }
.branches .display { color: #fff; }
.branches__grid { --branch-w: clamp(150px, 15vw, 210px); display: grid; gap: clamp(1.5rem, 6vw, 6rem); grid-template-columns: repeat(auto-fit, var(--branch-w)); justify-content: center; }
.branch { position: relative; display: block; width: var(--branch-w); aspect-ratio: 3 / 4; max-width: 100%; overflow: hidden; color: #fff; }
.branch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1s var(--ease); }
.branch:hover .branch__img { transform: scale(1.12); }
/* Bottom-up scrim for label legibility, over a flat 30% tint on the whole image. */
.branch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgb(12 14 28 / .7)), rgb(12 14 28 / .30); }
.branch__meta { position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 1; padding: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.branch__eyebrow { display: block; font-size: var(--step--2); letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.branch__name { display: block; font-size: var(--step-2); line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; }
.branch__cta { margin-top: 1.1rem; }

/* ---------- 13. Service rows (Method archive) ------------------ */
.service-row { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding-block: clamp(2rem, 4vw, 3.2rem); border-bottom: 1px solid var(--hair); position: relative; }
.service-row:first-child { border-top: 1px solid var(--hair); }
.service-row__index { font-family: var(--font-display); font-size: var(--step-1); color: var(--muted); }
.service-row__body { max-width: 62ch; }
.service-row__title { font-size: clamp(1.6rem, 1.1rem + 2vw, 3rem); margin-bottom: .2em; transition: transform .5s var(--ease); }
.service-row__desc { color: var(--ink-2); font-size: var(--step-0); transition: opacity .4s; }
.service-row__media { position: absolute; top: 50%; right: 10%; width: 280px; aspect-ratio: 4/5; translate: 0 -50%; opacity: 0; scale: .96; pointer-events: none; overflow: hidden; z-index: 5; box-shadow: 0 40px 80px rgb(20 22 40 /.25); transition: opacity .4s var(--ease), scale .4s var(--ease); }
.service-row__media img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 1024px) {
	.service-row:hover .service-row__title { transform: translateX(1.5rem); }
	.service-row:hover .service-row__media { opacity: 1; scale: 1; }
	.service-row:hover .service-row__desc { opacity: .3; }
}
.service-row__cta { white-space: nowrap; }
@media (max-width: 720px) { .service-row { grid-template-columns: auto 1fr; } .service-row__cta { grid-column: 2; justify-self: start; margin-top: 1rem; } }

/* ---------- 14. Card grids ------------------------------------- */
.card-grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem); }
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }

.card { display: flex; flex-direction: column; }
.card__media { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--paper-2); margin-bottom: 1.4rem; }
.card__media--square { aspect-ratio: 1; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__eyebrow { font-size: var(--step--2); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.card__title { font-size: var(--step-1); margin-bottom: .3em; }
.card__desc { font-size: var(--step--1); color: var(--ink-2); margin: 0 0 1rem; line-height: 1.6; }
.card__notes { font-size: var(--step--2); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.card__price { font-family: var(--font-display); font-size: var(--step-1); color: var(--forest); margin: 0 0 1.2rem; }
.card .btn { margin-top: auto; align-self: start; }

.order-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.order-links__item { font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line); padding: .5em 1.1em; transition: border-color .3s, color .3s; }
.order-links__item:hover { border-color: var(--olive); color: var(--olive); }

/* ---------- 15. Menu sections (Digest) ------------------------- */
.menu-section { padding-block: var(--section); }
/* Column, so the description stacks centred beneath the title rather than
   sitting alongside it. */
.menu-section__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); padding-bottom: 1.4rem; border-bottom: 1px solid var(--hair); }
.menu-section__title { font-size: var(--step-2); color: #000; }
/* Section titles run black throughout — the two words keep their different
   faces but no longer their different colours, so the accent reads as a change
   of voice rather than a second colour. Love is an all-caps display face whose
   caps sit taller in the em box than Prata's, so the accent word is scaled to
   bring the two cap heights level rather than to match nominal font-size. */
.menu-section__title-accent {
	font-family: "Love", var(--font-display), Georgia, serif;
	font-size: 1.12em;
	line-height: 1;
}
.menu-section__lede { max-width: 60ch; font-size: var(--step-0); line-height: 1.6; color: var(--ink); margin: 0; }

/* ---------- 16. Page heroes ------------------------------------ */
/* Top padding clears the fixed header, so tall hero copy can never slide
   underneath it. Content is bottom-aligned, so this only bites when it needs to. */
.page-hero { position: relative; min-height: 76vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; padding-block: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)) clamp(2rem, 5vw, 4rem); }
.page-hero--full { min-height: 100svh; }
.page-hero__bg { position: absolute; inset: -10% 0; z-index: 0; }
/* The homepage hero runs the logo animation rather than a still. The -10%
   overscan exists to give the parallax room to travel; with no parallax here it
   would only crop the clip, so the box matches the hero exactly. */
.home .page-hero__bg { inset: 0; }
.page-hero__bg img, .page-hero__video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* Hero video overlays the poster image and autoplays immediately on load;
   the poster covers only the brief first-frame buffer, so it's visible from
   the start (no fade). Reduced-motion visitors keep the still poster instead. */
.page-hero__video { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Reduced motion drops the decorative hero loops back to their still poster.
   The homepage is the exception: that clip is the brand's logo animation, not
   background texture, so it keeps playing — it is the point of the hero. */
@media (prefers-reduced-motion: reduce) {
	.page-hero__video[data-hero-video] { display: none; }
	.home .page-hero__video[data-hero-video] { display: block; }
}
/* About's team photo: anchor the top so the crop takes from the bottom. */
.page-template-page-about-us .page-hero__bg img { object-position: top; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(12 14 28 / .5) 0%, rgb(12 14 28 / .15) 45%, rgb(12 14 28 / .68) 100%); }
.page-hero .container { position: relative; z-index: 2; }
/* Kept out of the uniform --title override at the foot of this file, so page
   heroes keep their full display scale. */
.page-hero__title { font-size: var(--step-3); line-height: 1.02; margin: 0 0 .35em; }
/* Accent words set in Orelo Expanded inside a Prata heading ("The Elixirs",
   "Better"). The expanded cut is far wider than Prata at the same size and its
   caps sit shorter, so each accent carries its own size tuned to level the cap
   heights. Orelo ships as a single Medium, hence the explicit 500. */
.page-hero__title-accent,
.display__accent { font-family: var(--font-accent); font-weight: 500; }
/* nowrap: on narrow screens the title breaks as "Tonic / The Elixirs", never mid-accent. */
.page-hero__title-accent { color: var(--elixir); white-space: nowrap; }
.display__accent { color: #f196ab; } /* Specified value; --petal (#f195aa) is a hair off. */
/* Sits under the title, not above it. */
.page-hero__kicker { font-size: var(--step--1); letter-spacing: .3em; text-transform: uppercase; opacity: .9; margin: 0 0 1.6rem; }
/* Cycling kicker (Elixirs hero): the benefit lines run far longer than the
   standing tagline, so tracking eases off and the measure caps. Every line
   sits in the same grid cell — the box keeps the height of the longest, so
   nothing below it moves as they cross-fade. Without JS, or with reduced
   motion, the first line simply stays put. */
.page-hero__kicker--cycle { display: grid; max-width: 58ch; letter-spacing: .1em; line-height: 1.7; opacity: 1; color: var(--elixir); }
.page-hero__kicker-line { grid-area: 1 / 1; opacity: 0; transition: opacity .9s var(--ease); }
.page-hero__kicker-line.is-active { opacity: 1; }
.page-hero__lede { max-width: 54ch; font-size: var(--step-0); margin: 0 0 2.4rem; }

/* ---------- 17. Service single --------------------------------- */
/* These templates have no hero either — clear the fixed header. */
.service-single__layout, .product-single__layout { display: grid; gap: clamp(2rem, 6vw, 5rem); padding-block: var(--header-clear) var(--section); }
@media (min-width: 860px) { .service-single__layout, .product-single__layout { grid-template-columns: 1.05fr 1fr; align-items: start; } }
.service-single__media img, .product-single__media img { width: 100%; }
.service-single__title, .product-single__title { font-size: var(--step-3); }
.service-single__tagline { font-size: var(--step--1); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }

.benefit-list, .tick-list { list-style: none; padding: 0; margin: 2rem 0; }
.benefit-list li, .tick-list li { position: relative; padding-left: 2rem; margin-bottom: .7rem; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; }
.benefit-list li::before, .tick-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .9em; height: .5em; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }
/* Ticks read as ink (black) everywhere, matching the contact page. */
.woo-wrap .tick-list li::before { border-color: var(--ink); }

/* ---------- 18. Product single / accordions -------------------- */
.product-single__label { font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase; margin: 2rem 0 .8rem; }
.flavor-switch { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.8rem; }
.flavor-switch__opt { display: inline-flex; align-items: center; gap: .7em; border: 1px solid var(--line); padding: .7em 1.5em; font-family: var(--font-body); font-size: var(--step--1); color: var(--ink); background: #fff; cursor: pointer; border-radius: var(--radius); transition: border-color .3s, background .3s, color .3s; }
/* Radio affordance — the real <input> is the hidden native select. */
.flavor-switch__opt::before { content: ""; flex: none; width: .85em; height: .85em; border: 1px solid currentColor; border-radius: 50%; opacity: .55; transition: box-shadow .3s, opacity .3s; }
.flavor-switch__opt:hover { border-color: var(--elixir); }
.flavor-switch__opt.is-current { border-color: var(--elixir); color: var(--elixir); }
.flavor-switch__opt.is-current::before { opacity: 1; box-shadow: inset 0 0 0 .18em #fff, inset 0 0 0 1em currentColor; }

.accordion-set { margin-top: 2.5rem; border-top: 1px solid var(--hair); }
.accordion { border-bottom: 1px solid var(--hair); }
.accordion__summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; font-family: var(--font-display); font-size: var(--step-0); }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::after { content: "+"; font-size: 1.4em; line-height: 1; transition: transform .4s var(--ease); }
.accordion[open] .accordion__summary::after { transform: rotate(45deg); }
.accordion__panel { padding-bottom: 1.6rem; color: var(--ink-2); }
.accordion__panel ul { padding-left: 1.2rem; }

/* ---------- 19. About ------------------------------------------ */
/* Chapters stack centred: title above a narrow, centred column of copy. */
.about-chapter { padding-block: var(--section); border-bottom: 1px solid var(--hair); }
.about-chapter__grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); max-width: 68ch; margin-inline: auto; text-align: center; }
.about-chapter__title { font-size: var(--step-3); text-transform: uppercase; }
/* pretty reflows the closing lines so a paragraph never ends on a lone word
   ("are." sitting by itself under a full line). Unsupported browsers just wrap
   normally; the &nbsp; binding the last two words in the copy is the fallback
   that stops a single-word last line there too. */
.about-chapter__body { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.about-chapter__body p + p { margin-top: 1.2em; }

/* Origin story: warm sunrise gradient, LA to Riyadh. */
.about-chapter--origin {
	border-bottom: 0;
	color: #fff;
	background:
		radial-gradient(72% 55% at 84% 80%, rgb(255 216 62 / .85) 0%, rgb(255 216 62 / 0) 62%),
		linear-gradient(168deg, #efa585 0%, #f0873a 40%, #f6a11f 70%, #f8c62b 100%);
}
.about-chapter--origin .about-chapter__body { color: rgb(255 255 255 / .92); }

/* Digest's "Why Digest?" band: heading left, its copy right, tops aligned.
   align-items:start stops the default stretch from centring the heading
   against a taller paragraph. */
.why-grid { display: grid; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 860px) { .why-grid { grid-template-columns: 1fr 1.3fr; row-gap: clamp(2rem, 4vw, 3.5rem); } }
.why-grid__title { margin: 0; color: #fff; }
.why-grid__body { font-size: var(--step-1); line-height: 1.5; color: rgb(255 255 255 / .85); }
.why-grid__body p { margin: 0; }
.why-grid__body p + p { margin-top: 1.2em; }

.beliefs { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.beliefs li { padding: 1.5rem 0; border-top: 1px solid var(--hair); font-family: var(--font-display); font-size: var(--step-1); text-align: center; }

/* ---------- 20. Testimonials — SLIDER (no scrollbars) ---------- */
.testimonials { overflow: hidden; background: var(--paper-2); }
.testi { position: relative; max-width: 900px; margin-inline: auto; }
.testi__track { position: relative; }
.testi__slide { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(16px); visibility: hidden; transition: opacity .7s var(--ease), transform .7s var(--ease), visibility .7s; grid-area: 1 / 1; }
.testi__track { display: grid; }
.testi__slide.is-active { opacity: 1; transform: none; visibility: visible; }
.testi__quote { font-family: var(--font-display); font-size: clamp(1.1rem, 0.9rem + 1.1vw, 1.6rem); font-style: italic; line-height: 1.45; color: var(--ink); max-width: 34ch; }
.testi__quote p { margin: 0; }
.testi__cite { margin-top: 2rem; font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase; color: var(--olive); }
.testi__dots { display: flex; gap: .6rem; justify-content: center; margin-top: 3rem; }
.testi__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; padding: 0; cursor: pointer; transition: background .3s, transform .3s; }
.testi__dot.is-active { background: var(--indigo); border-color: var(--indigo); transform: scale(1.3); }
.testi__nav { display: flex; justify-content: space-between; position: absolute; inset-block-start: 35%; inset-inline: -1rem; pointer-events: none; }
.testi__arrow { pointer-events: auto; width: 48px; height: 48px; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; cursor: pointer; border-radius: 50%; transition: background .3s, color .3s, border-color .3s; }
.testi__arrow:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }
@media (max-width: 640px) { .testi__nav { display: none; } }

/* ---------- 21. Contact ---------------------------------------- */
.contact-layout { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.2fr 1fr; } }
.contact-form label { display: block; font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; margin-bottom: .4rem; color: var(--ink); }
.contact-form input, .contact-form textarea { width: 100%; font: inherit; padding: .9em 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; transition: border-color .3s; }
.contact-form input:focus, .contact-form textarea:focus { outline: 0; border-color: var(--indigo); }
.contact-form p { margin-bottom: 1.8rem; }
.hp-field { position: absolute; left: -9999px; }
.form-status { padding: 1em 1.4em; margin-bottom: 2rem; }
.form-status--ok { background: #ebf3ec; color: var(--forest); }
.form-status--err { background: #fbeae3; color: var(--ember); }
.contact-heading { font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin: 2.5rem 0 1rem; }
.contact-heading:first-child { margin-top: 0; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin-bottom: .9rem; }
.contact-list a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.contact-list a:hover { border-color: currentColor; }
.hours-table { width: 100%; max-width: 340px; border-collapse: collapse; }
.hours-table th { text-align: left; font-weight: 400; padding: .5rem 1.5rem .5rem 0; border-bottom: 1px solid var(--hair); }
.hours-table td { text-align: right; color: var(--muted); padding: .5rem 0; border-bottom: 1px solid var(--hair); }

/* ---------- 22. Footer ----------------------------------------- */
/* Matches the header's solid state (.site-header.is-solid::after). */
.site-footer { background: var(--indigo); color: rgba(255,255,255,.75); padding-block: var(--section) 3rem; }
.site-footer__inner { width: min(var(--container), 100% - 2 * var(--space)); margin-inline: auto; }
.site-footer__top { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: 1fr; margin-bottom: clamp(3rem, 7vw, 5rem); }
@media (min-width: 780px) { .site-footer__top { grid-template-columns: 1.5fr 2.5fr; } }
.site-footer__brand { color: #fff; text-align: center; }
/* Shrink the brand block to the slogan's own width (the slogan is the wider of
   the two and sets nowrap from 640px up) so centring the logo inside it lands
   the mark over the middle of the slogan rather than the middle of the column.
   fit-content, not max-content: max-content made the block's minimum width the
   whole unwrapped slogan, which grew the single-column grid track past the
   screen on phones and widened every page. fit-content caps at the space
   available. */
.site-footer__intro { width: fit-content; max-width: 100%; }
/* Single-column footer: centre the slogan under the logo too. */
@media (max-width: 779px) { .site-footer__intro { width: auto; text-align: center; } }
/* The 32ch measure was sized for the old two-sentence tagline; the slogan is
   one line. Kept wrappable below 640px, where nowrap would overflow. */
/* Orelo Expanded ships as a single Medium cut — state the weight so browsers
   pick it up instead of synthesising a bolder face from the body weight. */
.site-footer__tagline { margin-top: 1.5rem; font-family: var(--font-accent); font-weight: 500; font-size: var(--step-1); color: rgba(255,255,255,.9); line-height: 1.4; }
@media (min-width: 640px) { .site-footer__tagline { white-space: nowrap; } }
.footer-cols { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.footer-col__title { font-size: var(--step--2); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 1.2rem; }
.footer-col__list { list-style: none; padding: 0; margin: 0; }
.footer-col__list a { display: inline-block; padding-block: .35rem; color: rgba(255,255,255,.7); transition: color .3s; }
.footer-col__list a:hover { color: #fff; }
.site-footer__legal { padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--step--2); letter-spacing: .05em; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* ---------- 23. Scroll reveal system --------------------------- */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--reveal-delay, 0s); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal], .reduced-motion [data-reveal] { opacity: 1; transform: none; }

/* ---------- 24. WooCommerce ------------------------------------ */
.woo-wrap { padding-block: var(--section); }

/* ---------- Per-section header branding ----------
   Tonic The Elixirs owns the whole WooCommerce surface (shop, products, cart,
   checkout) and keeps its own elixir-green bar and green-to-mint dropdown;
   Tonic Digest takes the green bloom. Both hold the bar solid from the top —
   neither has a hero the see-through header can float over on every view. The
   blue bloom covers everywhere else (see the Blue block below). */
body.woocommerce-page .site-header,
body.page-template-page-tonic-digest .site-header { color: #fff; }
body.woocommerce-page .site-header::before,
body.page-template-page-tonic-digest .site-header::before { opacity: 0; }
body.woocommerce-page .site-header::after { opacity: 1; background: var(--elixir); box-shadow: none; }
body.page-template-page-tonic-digest .site-header::after { opacity: 1; background: var(--menu-green); box-shadow: none; }

@media (min-width: 961px) {
	body.woocommerce-page .site-header:not(.is-nav-open):hover::after,
	body.woocommerce-page .site-header:not(.is-nav-open):focus-within::after { background: var(--elixir); }
	body.woocommerce-page .site-nav .menu-item-has-children > .sub-menu { background: var(--elixir-panel); }

	body.page-template-page-tonic-digest .site-header:not(.is-nav-open):hover::after,
	body.page-template-page-tonic-digest .site-header:not(.is-nav-open):focus-within::after { background: var(--menu-green); }
	body.page-template-page-tonic-digest .site-nav .menu-item-has-children > .sub-menu { background: var(--menu-green-panel); }
}

/* Elixirs footer: warm pink-to-amber, across the whole WooCommerce surface. */
body.woocommerce-page .site-footer { background: var(--elixir-footer-wash); }

/* Elixirs hero sits higher than the standard bottom-aligned page hero, to lift
   the title and cycling kicker clear of the pack shot in the video. It stays
   bottom-aligned rather than centred so the copy keeps the darker half of the
   scrim behind it. */
body.woocommerce-shop .page-hero { padding-bottom: clamp(5rem, 15vh, 12rem); }
/* Raising the copy puts it across the middle of the hero, where the standard
   scrim is at its lightest (.15) — far too thin behind #69b289, which sits at
   almost the same luminance as the pale water footage. A second scrim runs
   left-to-right so the darkening lands behind the copy only and clears by the
   midline, leaving the footage bright where the pack shot actually plays. */
body.woocommerce-shop .page-hero::after {
	background:
		linear-gradient(90deg, rgb(12 14 28 / .62) 0%, rgb(12 14 28 / .42) 34%, rgb(12 14 28 / 0) 64%),
		linear-gradient(180deg, rgb(12 14 28 / .5) 0%, rgb(12 14 28 / .3) 45%, rgb(12 14 28 / .7) 100%);
}

/* Digest bands + footer: one vertical run, green above to ember at the very
   bottom of the page. .digest-band opens it flat, .digest-band--fade carries it
   to the seam, and the footer finishes it. */
.digest-band { background: var(--digest-green); color: #fff; }
.digest-band--fade { background: linear-gradient(180deg, var(--digest-green) 0%, var(--digest-seam) 100%); color: #fff; }
body.page-template-page-tonic-digest .site-footer {
	background: linear-gradient(180deg, var(--digest-seam) 0%, var(--digest-ember) 100%);
}

.single-product .woo-wrap { padding-top: calc(var(--header-clear) + var(--section)); }
/* PDP breathes wider than the 1320px editorial container. */
.single-product .container.woo-wrap { width: min(1560px, 100% - 2 * var(--space)); }
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error { border-top: 2px solid var(--elixir); background: var(--paper-2); padding: 1.1em 1.5em; margin-bottom: 2rem; list-style: none; }
.woocommerce-notices-wrapper .woocommerce-error { border-top-color: var(--ember); }
/* Woo prints a green checkmark glyph on the add-to-cart notice via its icon
   font (.woocommerce-message::before, content "\e015"). Drop it — the notice
   already reads as success. `body` takes us to (0,1,1) over Woo's (0,1,0).
   Info and error keep their icons. */
body .woocommerce-message::before { content: none; }
/* Woo reserves 3.5em of left padding for that icon; reclaim it. */
body .woocommerce-message { padding-left: 1.5em; }
.woo-wrap div.product { display: grid; gap: clamp(2rem,5vw,5rem); }
@media (min-width: 900px) { .woo-wrap div.product { grid-template-columns: 1.15fr 1fr; align-items: start; } .woo-wrap div.product .woocommerce-notices-wrapper { grid-column: 1/-1; } }
/* Woo floats the gallery and summary at 48% each — inside our grid that halves
   both columns. Out-specify (0,3,2 vs 0,2,2) and let the grid do the layout. */
.woo-wrap div.product div.images,
.woo-wrap div.product div.summary { float: none; width: 100%; }
.woo-wrap .product_title { font-size: var(--step-3); }
.woo-wrap .price { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); display: block; margin-bottom: 1.2rem; }
/* Woo paints the price #958e09 via `.woocommerce div.product p.price` (0,3,2).
   Qualify with .woo-wrap to reach (0,4,2). The variation price is a separate
   node that Woo injects after a flavour is chosen. */
.woocommerce .woo-wrap div.product p.price,
.woocommerce .woo-wrap div.product span.price,
.woo-wrap .woocommerce-variation-price .price { color: var(--ink); font-size: var(--step-1); }
.woo-wrap .woocommerce-product-details__short-description { color: var(--ink-2); }
/* Woo emits the attribute picker as a table; flatten it so the label sits
   above the flavor pills as in the wireframe. */
.woo-wrap table.variations,
.woo-wrap table.variations tbody,
.woo-wrap table.variations tr,
.woo-wrap table.variations th,
.woo-wrap table.variations td { display: block; width: 100%; }
.woo-wrap table.variations { border-collapse: collapse; margin-block: 1.6rem; }
.woo-wrap table.variations th.label { text-align: left; padding: 0 0 .9rem; }
.woo-wrap table.variations td { padding: 0; }
.woo-wrap table.variations label { font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--elixir); }
.woo-wrap table.variations select { width: 100%; font: inherit; padding: .9em 1em; border: 1px solid var(--line); background: #fff; margin-top: .5rem; }
/* Once JS has built the pills, the native select stays for the variations_form
   but is taken out of view (not out of the DOM). */
.woo-wrap table.variations select.is-enhanced { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
/* WooCommerce's `.woocommerce div.product form.cart .variations select`
   (0,4,3) sets min-width: 75%, which beats the width: 1px above; absolutely
   positioned, that 75% resolved against a wide box and pushed the product page
   ~400px past the right edge on desktop. Out-rank it for the size limits only. */
body.woocommerce .woo-wrap form.cart table.variations select.is-enhanced { min-width: 0; max-width: 1px; }
.woo-wrap .reset_variations { font-size: var(--step--2); color: var(--muted); }
.woo-wrap form.cart { display: flex; flex-wrap: wrap; gap: .8rem; margin-block: 1.4rem; }
.woo-wrap form.cart .woocommerce-variation { flex: 1 1 100%; }
.woo-wrap form.cart .qty { width: 5em; text-align: center; font: inherit; border: 1px solid var(--line); padding: .5em; }
/* − 1 + stepper. The number input keeps its own border when unenhanced; the
   stepper wraps it in one and strips the inner one plus the native spinners. */
.woo-wrap .quantity--stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line); }
.woo-wrap .quantity--stepper .qty { width: 3.2em; border: 0; padding: .5em 0; -moz-appearance: textfield; appearance: textfield; }
.woo-wrap .quantity--stepper .qty::-webkit-outer-spin-button,
.woo-wrap .quantity--stepper .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woo-wrap .qty-btn { border: 0; background: none; cursor: pointer; font: inherit; line-height: 1; padding: 0 .9em; color: var(--ink-2); transition: color .3s; }
.woo-wrap .qty-btn:hover { color: var(--elixir); }
.woo-wrap .single_add_to_cart_button, .woocommerce button.button, .wc-proceed-to-checkout .button, .woocommerce a.button, .woocommerce input.button { flex: 1; font-family: var(--font-body); font-size: var(--step--1); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: 1em 2.2em; background: var(--elixir); color: #fff; border: 1px solid var(--elixir); cursor: pointer; border-radius: var(--radius); transition: background .3s; }
.woocommerce button.button:hover, .woo-wrap .single_add_to_cart_button:hover, .wc-proceed-to-checkout .button:hover, .woocommerce a.button:hover { background: var(--elixir-dark); }
/* Woo paints its primary ("alt") buttons purple at (0,3,1). Scope to the body
   class, not .woo-wrap: cart and checkout are ordinary pages rendered through
   page.php, so they never get our wrapper. body.woocommerce-page reaches
   (0,3,2) and covers Add to Cart, Proceed to Checkout and Place Order alike. */
body.woocommerce-page button.button.alt,
body.woocommerce-page a.button.alt,
body.woocommerce-page input.button.alt,
body.woocommerce-page .checkout-button { background: var(--elixir); border-color: var(--elixir); color: #fff; }
body.woocommerce-page button.button.alt:hover,
body.woocommerce-page a.button.alt:hover,
body.woocommerce-page input.button.alt:hover,
body.woocommerce-page .checkout-button:hover { background: var(--elixir-dark); border-color: var(--elixir-dark); color: #fff; }
body.woocommerce-page button.button.alt.disabled { background: var(--muted); border-color: var(--muted); }
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 1em; border-bottom: 1px solid var(--line); text-align: left; }
.woocommerce table.shop_table img { width: 64px; }
.woocommerce .cart_totals h2, .woocommerce #order_review_heading { font-size: var(--step-1); margin-top: 2rem; }
.woocommerce form .form-row { margin-block: 1rem; }
.woocommerce form .form-row label { display: block; font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .3rem; color: var(--muted); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { width: 100%; font: inherit; padding: .8em 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.woocommerce ul.products { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); }
.woocommerce ul.products li.product img { aspect-ratio: 1; object-fit: cover; width: 100%; margin-bottom: 1rem; }
.woocommerce ul.products .woocommerce-loop-product__title { font-family: var(--font-display); font-size: var(--step-1); }
.woocommerce .star-rating { display: none; }

/* ---------- Standardized title size (site-wide) --------------- */
/* Every content heading renders at a uniform --title (40px). Placed
   last so it overrides the per-component sizes above. Micro-labels
   (footer/promo eyebrows) are intentionally excluded. */
h1, h2, h3, h4,
.display, .display--xl,
.vertical__title,
.branch__name,
.service-row__title,
.card__title,
.menu-section__title,
.about-chapter__title,
.service-single__title, .product-single__title,
.woo-wrap .product_title,
.woocommerce ul.products .woocommerce-loop-product__title {
	font-size: var(--title);
}

/* ---------- Blue: Home, Method, About Us, Contact ----------------
   These pages take the blue menu — flat --menu-blue bar opening into
   --menu-blue-panel's bloom — with --blue-footer-wash on the footer and
   --blue-wash on the homepage branches band. (Elixirs and Digest keep their own menus; see
   the per-section block above.) About/Contact are matched by page
   template, so they keep it if their slugs are renamed. Scoped by body class
   so Digest keeps green. Placed last so it outranks the flat --indigo fills
   declared earlier.
   --------------------------------------------------------------- */
.home .site-header.is-solid::after,
.post-type-archive-service .site-header.is-solid::after,
.single-service .site-header.is-solid::after,
.page-template-page-about-us .site-header.is-solid::after,
.page-template-page-contact .site-header.is-solid::after {
	background: var(--menu-blue);
}

/* Contact and the Method service pages have no hero, so the see-through header
   would float over the pale page as white text on a grey scrim. Hold it solid
   from the top instead, as Digest and Elixirs do. :not(.is-nav-open) leaves the
   mobile menu overlay on its own paper surface. */
.page-template-page-contact .site-header:not(.is-nav-open)::before,
.single-service .site-header:not(.is-nav-open)::before { opacity: 0; }
.page-template-page-contact .site-header:not(.is-nav-open)::after,
.single-service .site-header:not(.is-nav-open)::after { opacity: 1; background: var(--menu-blue); box-shadow: none; }

/* Kept inside the same breakpoint that introduces the hover behaviour. */
@media (min-width: 961px) {
	.home .site-header:not(.is-nav-open):hover::after,
	.home .site-header:not(.is-nav-open):focus-within::after,
	.post-type-archive-service .site-header:not(.is-nav-open):hover::after,
	.post-type-archive-service .site-header:not(.is-nav-open):focus-within::after,
	.single-service .site-header:not(.is-nav-open):hover::after,
	.single-service .site-header:not(.is-nav-open):focus-within::after,
	.page-template-page-about-us .site-header:not(.is-nav-open):hover::after,
	.page-template-page-about-us .site-header:not(.is-nav-open):focus-within::after,
	.page-template-page-contact .site-header:not(.is-nav-open):hover::after,
	.page-template-page-contact .site-header:not(.is-nav-open):focus-within::after {
		background: var(--menu-blue);
	}

	.home .site-nav .menu-item-has-children > .sub-menu,
	.post-type-archive-service .site-nav .menu-item-has-children > .sub-menu,
	.single-service .site-nav .menu-item-has-children > .sub-menu,
	.page-template-page-about-us .site-nav .menu-item-has-children > .sub-menu,
	.page-template-page-contact .site-nav .menu-item-has-children > .sub-menu {
		background: var(--menu-blue-panel);
	}
}

.home .site-footer,
.post-type-archive-service .site-footer,
.single-service .site-footer,
.page-template-page-about-us .site-footer,
.page-template-page-contact .site-footer {
	background: var(--blue-footer-wash);
}

/* "Find us in Riyadh" — replaces the deep radial navy with the same wash. */
.home .branches {
	background: var(--blue-wash);
}

/* ---------- Phones -----------------------------------------------
   Last in the file so it outranks the desktop-first rules above, including the
   standardised 40px title size.
   --------------------------------------------------------------- */
@media (max-width: 600px) {
	/* Promo bar: the desktop layout (4rem gaps, 120px pack shot, full-size
	   button) wrapped to four lines and stood ~150px tall. Compact row instead:
	   small pack shot, copy taking the free space, button kept on one line. */
	.promo-bar__inner { gap: .85rem; justify-content: space-between; padding-block: .5rem; }
	.promo-bar__media { flex: none; }
	.promo-bar__media img { height: 56px; }
	.promo-bar__text { flex: 1 1 auto; min-width: 0; }
	.promo-bar__title { font-size: var(--step--1); line-height: 1.3; }
	.promo-bar__sub { font-size: var(--step--2); line-height: 1.3; margin-top: .1rem; }
	.promo-bar .btn { flex: none; white-space: nowrap; font-size: var(--step--2); letter-spacing: .14em; padding: .65em .9em; }

	/* Elixirs hero: the desktop scrim darkens only the left ~64%, behind copy
	   that sits in the left column. Here the cycling kicker runs edge to edge,
	   so its right end was fading into the pale footage. Darken the whole
	   width through the copy band instead. */
	body.woocommerce-shop .page-hero::after {
		background: linear-gradient(180deg, rgb(12 14 28 / .6) 0%, rgb(12 14 28 / .7) 30%, rgb(12 14 28 / .78) 100%);
	}
}

/* ---------- Branch cards: fit the card, not the viewport ----------
   The cards sit at their 150px floor from phones right up to ~1000px wide, but
   the meta padding, the 40px title and the button are sized for the 210px
   desktop card, so "Get directions" spilled out of the card below ~1280px and
   "RIYADH" did too on tablets. Each card is a size container, and a narrow card
   scales its own contents (cqi = 1% of the card's width). Desktop-size cards
   don't match the query and are unchanged. Last in the file so it outranks the
   standardised title size. */
.branch { container-type: inline-size; }
@container (max-width: 199px) {
	.branch__meta { padding: 1.25rem .6rem; }
	.branch__eyebrow { letter-spacing: .16em; }
	.branch__name { font-size: clamp(1.3rem, 17cqi, 2rem); }
	.branch__cta { max-width: 100%; font-size: clamp(.62rem, 7.4cqi, .8rem); letter-spacing: .1em; padding: .7em .8em; }
}

/* ---------- Cart / checkout / account --------------------------
   These are commerce pages rather than Elixirs pages, so they take the site's
   blue menu and blue buttons instead of the elixir green the rest of the
   WooCommerce surface wears. Declared after the woocommerce-page rules above,
   which they tie with on specificity. The .alt duplicates below out-rank
   WooCommerce's own .alt button rules, which load after this file.
   --------------------------------------------------------------- */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .site-header::after {
	background: var(--menu-blue);
}

@media (min-width: 961px) {
	body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .site-header:not(.is-nav-open):hover::after,
	body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .site-header:not(.is-nav-open):focus-within::after {
		background: var(--menu-blue);
	}
	body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .site-nav .menu-item-has-children > .sub-menu {
		background: var(--menu-blue-panel);
	}
}

/* Return to shop, Update cart, Proceed to checkout, Place order. */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) a.button,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) button.button,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) input.button,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) a.button.alt,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) button.button.alt,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) input.button.alt,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .checkout-button {
	background: var(--menu-blue);
	border-color: var(--menu-blue);
	color: #fff;
}
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) a.button:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) button.button:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) input.button:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) a.button.alt:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) button.button.alt:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .checkout-button:hover {
	background: var(--menu-blue-dark);
	border-color: var(--menu-blue-dark);
}

/* Method treatment pages: Book Now matches the menu. Scoped to .single-service
   so the shared .btn--indigo (404 / blog "Back to home") keeps its indigo. */
.single-service .btn--indigo { --btn-bg: var(--menu-blue); --btn-fg: #fff; border-color: var(--menu-blue); }
.single-service .btn--indigo:hover { --btn-hover: var(--menu-blue); color: var(--menu-blue); }