/* =============================================================
   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;

	--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;
}

/* ---------- 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; }
.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; }
.site-header__brand { margin-right: auto; }

.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;
		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); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; }
.nav-toggle__bar { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }

@media (max-width: 960px) {
	.nav-toggle { display: inline-flex; }
	.site-nav { position: fixed; inset: 0; background: var(--paper); color: var(--ink); padding: calc(var(--header-h) + 3rem) var(--gutter) 3rem; display: flex; opacity: 0; visibility: hidden; translate: 0 -2%; transition: opacity .5s var(--ease), translate .5s var(--ease), visibility .5s; overflow-y: auto; }
	.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; }
	.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); }
.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; }
.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); }
}

.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: var(--olive); }
.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; }
.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; }
@media (prefers-reduced-motion: reduce) { .page-hero__video[data-hero-video] { display: none; } }
/* 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; }
/* 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; }
.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; }
.about-chapter__body { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.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; }
/* The 32ch measure was sized for the old two-sentence tagline; the slogan is
   one line. Kept wrappable below 640px, where nowrap would overflow. */
.site-footer__tagline { margin-top: 1.5rem; font-family: var(--font-display); 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): a solid elixir-green bar, dropdown and hover all the same green so
   they read as one panel. Tonic Digest wears the darker forest bar + dropdown,
   lifting to elixir green on hover. Everywhere else stays indigo. */
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(--forest); 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); }

	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(--forest); }
	body.page-template-page-tonic-digest .site-nav .menu-item-has-children > .sub-menu { background: var(--forest); }
}

.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%); }
.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);
}