/* =========================================================================
   JO'S LIQUOR — DESIGN SYSTEM
   Single source of truth. Matched to the reference (eathungrytiger.com):
   rust-brown canvas, giant gold uppercase display type, hot-magenta accents,
   dotted dividers, pill buttons. Mirror these tokens into Bricks → Theme Styles
   so the canvas and the front end agree.
   ========================================================================= */

/* ---------- Self-hosted fonts (Clash Display = headings, Clash Grotesk = body) */
@font-face {
	font-family: 'Clash Display';
	src: url('../fonts/clash-display-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Clash Display';
	src: url('../fonts/clash-display-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Clash Grotesk';
	src: url('../fonts/clash-grotesk-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Clash Grotesk';
	src: url('../fonts/clash-grotesk-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Clash Grotesk';
	src: url('../fonts/clash-grotesk-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens */
:root {
	/* Palette (measured from reference) */
	--c-rust:        #823513;  /* primary canvas */
	--c-brown:       #402011;  /* footer / dark panels / divider base */
	--c-brown-dark:  #281006;  /* deepest brown */
	--c-gold:        #FAAE33;  /* headings, text on dark, buttons, accents */
	--c-gold-soft:   #FFC766;
	--c-amber:       #E0A23C;  /* warm ochre section bg (tradition / why) */
	--c-magenta:     #D1255C;  /* hot accent panels */
	--c-cream:       #F6E8D2;  /* light text alt */
	--c-ink:         #2A1408;  /* dark text on gold/amber */

	/* Semantic */
	--bg:            var(--c-rust);
	--fg:            var(--c-gold);
	--accent:        var(--c-magenta);

	/* Type */
	--font-display:  'Clash Display', 'Arial Narrow', Arial, sans-serif;
	--font-body:     'Clash Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	/* Fluid type scale */
	--fs-eyebrow:    clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
	--fs-body:       clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
	--fs-lead:       clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
	--fs-h3:         clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
	--fs-h2:         clamp(2.6rem, 1.4rem + 6vw, 7.5rem);
	--fs-display:    clamp(3.4rem, 1rem + 13vw, 13rem);

	/* Spacing scale (4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128) */
	--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem; --s-4: 1.5rem;
	--s-5: 2rem; --s-6: 3rem; --s-7: 4rem; --s-8: 6rem; --s-9: 8rem;

	/* Layout */
	--container:     1320px;
	--gutter:        clamp(1.25rem, 0.6rem + 3vw, 4rem);
	--section-y:     clamp(4rem, 2rem + 8vw, 9rem);

	/* Radii / borders */
	--r-pill:        999px;
	--r-card:        18px;
	--r-sm:          10px;

	/* Motion */
	--ease:          cubic-bezier(0.22, 1, 0.36, 1);
	--dur:           0.5s;

	/* Header */
	--header-h:      clamp(64px, 5vw, 88px);
}

/* ---------- Reset / base */
*, *::before, *::after { box-sizing: border-box; }

/* CRITICAL: Bricks / many parent themes set html { font-size: 62.5% } (1rem=10px),
   which shrinks every rem-based size to ~62.5% of intent. Force a 16px root so the
   whole type scale renders at the intended size. */
html {
	font-size: 100% !important; /* 1rem = 16px */
	-webkit-text-size-adjust: 100%;
	overflow-x: clip; /* NOT hidden — preserves sticky */
	scroll-behavior: smooth;
}
:root { font-size: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

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

/* The hidden attribute must always win, even over component display rules. */
[hidden] { display: none !important; }

/* Bricks may tag injected sections with .bricks-lazy-hidden; our sections use
   their own (GSAP) reveals, so never let that class hide content. */
.bricks-lazy-hidden { opacity: 1 !important; visibility: visible !important; }

/* CRITICAL mobile fix: Bricks `container` elements render with a fixed
   width:1100px (the content width), which does NOT shrink on small screens →
   content overflows the viewport on every page that uses a container. Force
   containers (and sections/blocks) to stay within the viewport. */
.brxe-container { width: 100% !important; max-width: 1100px; margin-inline: auto; }
/* Side gutters ONLY while the container fills the viewport (≤1100px). On wider
   desktops the container is already centred with side margins, so adding padding
   there would needlessly inset the content (e.g. the shop grid). */
@media (max-width: 1100px) {
	.brxe-container { padding-inline: var(--gutter); }
}
.brxe-section, .brxe-block { max-width: 100%; }
/* Let flex children shrink (Bricks sections/containers are flex) so long words /
   URLs can't force the layout wider than the screen. */
.brxe-container > *, .brxe-section > *, .brxe-block > * { min-width: 0; }
img, svg, video, iframe, table { max-width: 100%; }

a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
a:hover { opacity: 0.82; }

::selection { background: var(--c-magenta); color: #fff; }

:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; border-radius: 3px; }

/* ---------- Typography */
h1, h2, h3, .h-display {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.86;
	margin: 0 0 0.4em;
	color: var(--c-gold);
}

.h-display { font-size: var(--fs-display); }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1; }

p { margin: 0 0 1em; }
strong { font-weight: 600; }

.eyebrow,
.jos-eyebrow {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-gold);
	display: inline-block;
	margin: 0 0 var(--s-3);
}

.lead { font-size: var(--fs-lead); line-height: 1.4; }
.muted { opacity: 0.8; }

/* ---------- Layout helpers */
.jos-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.jos-container--wide { max-width: 1600px; }

.jos-section { padding-block: var(--section-y); position: relative; }
.jos-section--rust   { background: var(--c-rust); }
.jos-section--brown  { background: var(--c-brown); }
.jos-section--dark   { background: var(--c-brown-dark); }
.jos-section--amber  { background: var(--c-amber); color: var(--c-ink); }
.jos-section--amber h1, .jos-section--amber h2, .jos-section--amber h3 { color: var(--c-brown-dark); }
.jos-section--magenta{ background: var(--c-magenta); color: #fff; }
.jos-section--magenta h1, .jos-section--magenta h2, .jos-section--magenta h3 { color: #fff; }

/* ---------- Dotted divider (reference signature) */
.jos-divider-dots {
	height: 6px;
	width: 100%;
	background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
	background-size: 14px 6px;
	background-position: center;
	background-repeat: repeat-x;
	color: var(--c-gold);
	opacity: 0.85;
}

/* ---------- Buttons (pill) — matched to reference: solid gold, brown text,
   weight 500, near-zero tracking, compact. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.82rem;
	letter-spacing: 0;
	text-transform: uppercase;
	padding: 0.7em 1.6em;
	border-radius: var(--r-pill);
	border: 2px solid transparent;
	cursor: pointer;
	line-height: 1;
	min-height: 40px;
	transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); opacity: 1; }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--c-gold); color: var(--c-brown); }
.btn--primary:hover { background: var(--c-gold-soft); color: var(--c-brown); }

.btn--ghost { background: transparent; color: var(--c-gold); border-color: var(--c-gold); }
.btn--ghost:hover { background: var(--c-gold); color: var(--c-brown); }

.btn--dark { background: var(--c-brown-dark); color: var(--c-gold); }
.btn--dark:hover { background: #000; }

.btn--magenta { background: var(--c-magenta); color: #fff; }

/* ---------- Cards */
.jos-card {
	background: var(--c-brown);
	border-radius: var(--r-card);
	overflow: hidden;
	border: 1px solid rgba(250, 174, 51, 0.14);
}

/* =========================================================================
   HEADER
   3-col grid (hamburger/nav | logo | actions) keeps the logo centred.
   ========================================================================= */
.jos-topbar {
	background: var(--c-brown-dark);
	color: var(--c-gold);
	text-align: center;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0.55rem var(--gutter);
	width: 100%; /* fill Bricks' flex header section (don't shrink to content) */
}

/* Sticky header: Bricks wraps the header template in <header id="brx-header">,
   which is the direct child of the scrolling <body> — so the sticky must live
   on THAT wrapper, not on the inner section (which can't travel inside it). */
#brx-header {
	position: sticky;
	top: 0;
	z-index: 1000;
}

.jos-header {
	position: relative; /* #brx-header handles stickiness on the live site */
	z-index: 1000;
	background: var(--c-rust);
	border-bottom: none;
}
.jos-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--s-4);
	min-height: var(--header-h);
	padding-inline: var(--gutter);
	width: 100%;            /* fill Bricks' flex section (don't shrink to content) */
	max-width: 1600px;
	margin-inline: auto;
}
.jos-header__left  { display: flex; align-items: center; gap: var(--s-3); justify-self: start; }
.jos-header__center{ justify-self: center; }
.jos-header__right { display: flex; align-items: center; gap: var(--s-3); justify-self: end; }

.jos-logo { display: inline-flex; align-items: center; }
.jos-logo img { height: var(--logo-h, 56px); width: auto; }
.jos-logo__wordmark {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
	color: var(--c-gold);
	line-height: 0.9;
}

/* Desktop pill nav — solid gold pills with brown text (matches reference) */
.jos-nav { display: flex; align-items: center; gap: 0.4rem; }
.jos-nav a,
.jos-header__contact {
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.62em 1.15em;
	border-radius: var(--r-pill);
	border: 2px solid var(--c-gold);
	background: var(--c-gold);
	color: var(--c-brown);
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.jos-nav a:hover,
.jos-header__contact:hover,
.jos-nav .current-menu-item > a {
	background: var(--c-gold-soft);
	border-color: var(--c-gold-soft);
	color: var(--c-brown);
	opacity: 1;
	transform: translateY(-1px);
}

/* Cart + icon buttons */
.jos-iconbtn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: var(--r-pill);
	background: var(--c-gold); color: var(--c-ink);
	border: none; cursor: pointer;
	transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.jos-iconbtn:hover { transform: translateY(-2px); background: var(--c-gold-soft); }
.jos-iconbtn svg { width: 22px; height: 22px; }

.jos-cart-count {
	position: absolute; top: -4px; right: -4px;
	min-width: 20px; height: 20px; padding: 0 5px;
	display: none; align-items: center; justify-content: center;
	background: var(--c-magenta); color: #fff;
	font-family: var(--font-body); font-weight: 600; font-size: 0.7rem;
	border-radius: var(--r-pill); line-height: 1;
}
.jos-cart-count.is-filled { display: inline-flex; }

/* Hamburger (mobile only) */
.jos-burger {
	display: none;
	width: 48px; height: 48px; border-radius: var(--r-pill);
	background: transparent; border: 2px solid var(--c-gold); color: var(--c-gold);
	cursor: pointer; align-items: center; justify-content: center;
}
.jos-burger svg { width: 22px; height: 22px; }

/* Mobile nav overlay (body-level, full screen) */
.jos-mobnav {
	position: fixed; inset: 0; z-index: 1200;
	background: var(--c-rust);
	transform: translateX(100%);
	transition: transform var(--dur) var(--ease);
	display: flex; flex-direction: column;
	padding: calc(env(safe-area-inset-top) + 1.25rem) var(--gutter) 2rem;
	overflow-y: auto;
	visibility: hidden;
}
.jos-mobnav.is-open { transform: translateX(0); visibility: visible; }
.jos-mobnav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.jos-mobnav__close {
	width: 46px; height: 46px; border-radius: var(--r-pill);
	background: var(--c-gold); border: none; cursor: pointer; position: relative;
	font-size: 0; /* hide the × glyph — draw a crisp X instead */
	transition: background var(--dur) var(--ease);
}
.jos-mobnav__close:hover { background: var(--c-gold-soft); }
.jos-mobnav__close::before,
.jos-mobnav__close::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 18px; height: 2.5px; background: var(--c-ink); border-radius: 2px;
}
.jos-mobnav__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.jos-mobnav__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.jos-mobnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.jos-mobnav a {
	font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(2rem, 8vw, 3.2rem); letter-spacing: -0.01em; line-height: 1.05;
	color: var(--c-gold); padding: 0.2em 0;
}
.jos-mobnav__foot { margin-top: auto; padding-top: 2rem; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.jos-footer { background: var(--c-brown); color: var(--c-gold); padding-top: var(--s-7); overflow: hidden; }
.jos-footer__wordmark {
	font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
	letter-spacing: -0.02em; line-height: 0.82;
	font-size: clamp(3rem, 1rem + 14vw, 15rem);
	color: var(--c-gold);
	margin: 0 0 var(--s-6);
	padding-inline: var(--gutter);
	white-space: nowrap;
	/* The footer is a flex column with align-items:center; a nowrap wordmark wider
	   than the section inflates the cross-axis, which then mis-centers .jos-footer__cols
	   and __bar via their margin-inline:auto (pushing them off-screen on mobile).
	   Capping the box to 100% keeps the wordmark from blowing out that axis. */
	max-width: 100%;
}
.jos-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 1.4fr auto;
	gap: var(--s-5);
	padding-inline: var(--gutter);
	width: 100%; max-width: 1600px; margin-inline: auto;
	padding-bottom: var(--s-7);
}
.jos-footer__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.jos-footer a { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.jos-footer__nap { font-size: 0.82rem; letter-spacing: 0.06em; line-height: 1.8; text-transform: uppercase; font-weight: 600; }
.jos-footer__social { display: flex; gap: 0.6rem; justify-self: end; }
.jos-footer__license { font-size: 0.72rem; letter-spacing: 0.06em; opacity: 0.85; }

.jos-payments { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: var(--s-3); }
.jos-payments img { height: 26px; width: auto; border-radius: 4px; }

.jos-footer__bar {
	border-top: none;
	padding: var(--s-4) var(--gutter);
	width: 100%; max-width: 1600px; margin-inline: auto;
	display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
	font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.jos-footer .jos-divider-dots { color: var(--c-gold); margin-bottom: var(--s-3); }

/* =========================================================================
   AGE GATE
   ========================================================================= */
.jos-age-gate {
	position: fixed; inset: 0; z-index: 2000;
	background: var(--c-rust);
	display: flex; align-items: center; justify-content: center;
	padding: var(--gutter);
	text-align: center;
}
.jos-age-gate[hidden] { display: none; }
.jos-age-gate__panel { max-width: 540px; width: 100%; }
.jos-age-gate__logo { margin-bottom: var(--s-4); display: flex; justify-content: center; }
.jos-age-gate__logo img { height: 64px; width: auto; margin-inline: auto; }
.jos-age-gate__wordmark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 2rem; color: var(--c-gold); }
.jos-age-gate__eyebrow { font-size: var(--fs-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; }
.jos-age-gate__title { font-size: clamp(2.2rem, 1rem + 6vw, 4rem); }
.jos-age-gate__copy { max-width: 42ch; margin-inline: auto; }
.jos-age-gate__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin: var(--s-4) 0; }
.jos-age-gate__error { color: #fff; background: var(--c-magenta); display: inline-block; padding: 0.6em 1.2em; border-radius: var(--r-pill); font-weight: 600; }
.jos-age-gate__legal { font-size: 0.74rem; opacity: 0.8; }
.jos-age-gate__legal a { text-decoration: underline; }
body.jos-age-locked { overflow: hidden; }

/* =========================================================================
   CART DRAWER + TOASTS
   ========================================================================= */
.jos-drawer { position: fixed; inset: 0; z-index: 1500; visibility: hidden; }
.jos-drawer.is-open { visibility: visible; }
.jos-drawer__overlay {
	position: absolute; inset: 0; background: rgba(40, 16, 6, 0.6);
	opacity: 0; transition: opacity var(--dur) var(--ease);
}
.jos-drawer.is-open .jos-drawer__overlay { opacity: 1; }
.jos-drawer__panel {
	position: absolute; top: 0; right: 0; height: 100%;
	width: min(420px, 100%);
	background: var(--c-rust); color: var(--c-gold);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--dur) var(--ease);
	box-shadow: -20px 0 60px rgba(0,0,0,0.35);
}
.jos-drawer.is-open .jos-drawer__panel { transform: translateX(0); }
.jos-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-4) var(--s-3); }
.jos-drawer__title { font-size: 1.6rem; margin: 0; }
.jos-drawer__close { background: none; border: none; color: var(--c-gold); font-size: 2rem; line-height: 1; cursor: pointer; width: 44px; height: 44px; }
/* Body is a flex column that never scrolls itself — only the item list does, so
   the subtotal + buttons stay pinned and visible no matter how many items. */
.jos-drawer__body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 var(--s-4) var(--s-4); display: flex; flex-direction: column; }
.jos-drawer__body > .widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* WooCommerce mini-cart inside the drawer */
.jos-drawer .woocommerce-mini-cart {
	list-style: none; margin: 0 -2px 0 0; padding: 0;
	flex: 1 1 auto; min-height: 0; overflow-y: auto; /* the ONLY scroll area */
}
.jos-drawer .woocommerce-mini-cart__empty-message { padding: 2rem 0; opacity: 0.85; }
.jos-drawer .woocommerce-mini-cart-item {
	display: grid; grid-template-columns: 46px 1fr auto; gap: 0.7rem; align-items: center;
	padding: 0.6rem 0; border-bottom: 1px solid rgba(250,174,51,0.12);
	font-size: 0.85rem; line-height: 1.4;
}
.jos-drawer .woocommerce-mini-cart-item img { width: 46px; height: auto; border-radius: var(--r-sm); }
.jos-drawer .woocommerce-mini-cart-item a:not(.remove) { color: var(--c-gold); font-weight: 600; }
.jos-drawer a.remove {
	grid-row: 1 / 3; align-self: center; order: 3;
	width: 26px; height: 26px; border-radius: var(--r-pill);
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--c-brown-dark); color: var(--c-gold) !important; font-size: 1rem; text-decoration: none;
}
.jos-drawer .woocommerce-mini-cart__total {
	flex: none; /* pinned below the scrolling item list */
	display: flex; justify-content: space-between; padding: 0.9rem 0; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.06em; border-top: 2px solid var(--c-gold); margin-top: 0;
}
.jos-drawer .woocommerce-mini-cart__buttons {
	flex: none; /* always visible */
	display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding-top: 0.2rem;
}
.jos-drawer .woocommerce-mini-cart__buttons .button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0.95em 2.1em; border-radius: var(--r-pill); font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none;
}
.jos-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) { background: transparent; color: var(--c-gold); border: 2px solid var(--c-gold); }
.jos-drawer .woocommerce-mini-cart__buttons .button.checkout { background: var(--c-gold); color: var(--c-ink); }

/* Toasts */
.jos-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1600; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; }
.jos-toast {
	background: var(--c-brown-dark); color: var(--c-gold);
	border-left: 4px solid var(--c-magenta);
	padding: 0.9rem 1.2rem; border-radius: var(--r-sm);
	font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,0.35);
	transform: translateY(12px); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
	max-width: 320px;
}
.jos-toast.is-visible { transform: translateY(0); opacity: 1; }

/* =========================================================================
   RESPONSIVE — header collapses to hamburger ~900px (matches Bricks 'mobile')
   ========================================================================= */
@media (max-width: 900px) {
	:root { --logo-h: var(--logo-h-mobile, 40px); }
	.jos-nav,
	.jos-header__contact { display: none; }
	.jos-burger { display: inline-flex; }
	.jos-logo img { height: var(--logo-h-mobile, 40px); }
	.jos-footer__cols { grid-template-columns: 1fr 1fr; }
	.jos-footer__social { justify-self: start; }
	.jos-footer__bar { justify-content: flex-start; }
}
@media (max-width: 540px) {
	.jos-footer__cols { grid-template-columns: 1fr; }
	.jos-header__right .jos-header__contact { display: none; }
	/* Let the giant wordmark wrap on phones so it stays fully visible (not clipped). */
	.jos-footer__wordmark { white-space: normal; overflow-wrap: anywhere; line-height: 0.9; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Utility */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.is-clipped { overflow: hidden; }