/* =========================================================
   Components — nav, buttons, links, cards, footer, placeholders
   ========================================================= */

/* Honeypot — visually + assistive-tech hidden, but still in the DOM and
 * focusable for bots that scrape every input. Server-side handler treats
 * any non-empty value as a bot signal. Avoids `display: none` because some
 * bots skip those; avoids `visibility: hidden` because some bots auto-fill
 * those too. Off-screen position is the most reliable. */
.mona-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	pointer-events: none !important;
}
.mona-hp input {
	position: absolute !important;
	left: -9999px !important;
}

/* ---------- Buttons & links ---------- */
.link-arrow {
	display: inline-flex; align-items: center; gap: .5em;
	font-weight: 500;
	font-size: .95rem;
	padding: .25em 0;
	border-bottom: 1px solid currentColor;
	transition: gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow .arrow {
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .3s var(--ease);
}
.link-arrow:hover { color: var(--accent-deep); gap: .8em; }
.link-arrow:hover .arrow { transform: rotate(-15deg); }

.arrow-circle {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid currentColor;
	display: inline-grid; place-items: center;
	font-size: 1rem;
	transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.arrow-circle:hover { transform: rotate(-15deg); }

.btn {
	position: relative;
	display: inline-flex; align-items: center; gap: .5em;
	padding: .9em 1.25em;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: -0.005em;
	border: 1px solid var(--ink);
	border-radius: 999px;
	color: var(--ink);
	background: transparent;
	transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
	cursor: pointer;
}
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn:hover .arrow { transform: rotate(-15deg); }

.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Navigation — Seas-style pill ---------- */
.site-header { position: relative; z-index: 100; }

.nav-shell {
	position: fixed; top: 0; left: 0; right: 0;
	/* Was z-index 100, but the mobile-menu is z 9100 — meaning when the
	 * menu opened, the nav-pill (and the burger) disappeared behind it,
	 * leaving no way to close the menu other than clicking a link. Bumped
	 * above the menu so the burger stays clickable and the brand stays
	 * visible. The menu still covers the page content, just not the nav. */
	z-index: 9200;
	display: flex; justify-content: center;
	padding: clamp(.85rem, 1.5vw, 1.4rem) var(--gutter);
	pointer-events: none;
	transition: padding .4s var(--ease);
}
.nav-shell > * { pointer-events: auto; }

/* TOP STATE — wide editorial masthead.
   Sits flush with the page edges, transparent with a fine hairline beneath.
   No pill, no shadow. Wordmark larger, links spaced, all breathing.
   This is the default state on page load (before any scroll).             */
.nav-pill {
	display: flex; align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	width: 100%;
	max-width: var(--maxw);
	padding: 1rem 0;
	border-radius: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	box-shadow: 0 0 0 -14px rgba(20, 22, 22, 0); /* zero-shadow placeholder so transition has a 'from' value */
	backdrop-filter: blur(0px) saturate(1);
	-webkit-backdrop-filter: blur(0px) saturate(1);
	will-change: max-width, padding, border-radius, background-color, box-shadow, backdrop-filter;
	/* Single shared timing function across every animated property — gives the
	   bar a single coherent motion arc instead of multiple slightly-out-of-sync
	   transitions. cubic-bezier(.4, .14, .26, 1) is the slow-then-quick "premium"
	   curve used by Linear / Stripe / Resend. */
	transition:
		max-width      .65s cubic-bezier(.4, .14, .26, 1),
		padding        .55s cubic-bezier(.4, .14, .26, 1),
		border-radius  .55s cubic-bezier(.4, .14, .26, 1),
		background     .45s cubic-bezier(.4, .14, .26, 1),
		border-color   .45s cubic-bezier(.4, .14, .26, 1),
		box-shadow     .55s cubic-bezier(.4, .14, .26, 1),
		backdrop-filter .45s cubic-bezier(.4, .14, .26, 1),
		-webkit-backdrop-filter .45s cubic-bezier(.4, .14, .26, 1),
		gap            .45s cubic-bezier(.4, .14, .26, 1);
}
/* Wordmark slightly more prominent in masthead state */
.nav-shell:not(.is-scrolled) .np-brand-text {
	font-size: 1.2rem;
	letter-spacing: -0.04em;
}
.np-brand-text {
	transition: font-size .55s cubic-bezier(.4, .14, .26, 1), letter-spacing .55s cubic-bezier(.4, .14, .26, 1);
}
/* The trailing dot replaces the old TM mark — animates with the wordmark */
.np-brand-dot {
	display: inline-block;
	color: var(--accent);
	margin-left: .03em;
	transition: color .35s cubic-bezier(.4, .14, .26, 1);
}

/* SCROLLED STATE — floating pill.
   Use a NUMERIC max-width target (not `max-content`) so the browser can
   smoothly interpolate the width — `max-content` is intrinsic and doesn't
   animate. The clamp keeps it pill-sized across viewports. */
.nav-shell.is-scrolled .nav-pill {
	max-width: clamp(580px, 64vw, 800px);
	padding: .7rem 1.1rem .7rem 1.4rem;
	border-radius: 999px;
	background: rgba(247, 247, 245, .75);
	border: 1px solid rgba(20, 22, 22, .08);
	border-bottom-color: rgba(20, 22, 22, .08);
	box-shadow: 0 8px 32px -14px rgba(20, 22, 22, .18);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	gap: clamp(1rem, 2.5vw, 2rem);
}

.np-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding-right: .3rem;
}
.np-brand-text {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	color: var(--ink);
	display: inline-block;
	white-space: nowrap;
}
.np-brand-text sup {
	font-family: var(--font-mono);
	font-size: .5em;
	margin-left: .25em;
	letter-spacing: 0;
	color: var(--muted);
	font-weight: 400;
	top: -.8em;
	position: relative;
}

.np-links {
	display: flex;
	gap: clamp(.9rem, 2vw, 1.6rem);
	list-style: none;
	margin: 0; padding: 0;
	font-size: .88rem;
	font-weight: 500;
	text-transform: lowercase;
	letter-spacing: -0.005em;
}
.np-links a,
.np-links .np-menutrig {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	position: relative;
	padding: .3em 0;
	color: var(--ink);
	transition: color .3s var(--ease);
	font-weight: 500;
}
.np-links a::after,
.np-links .np-menutrig::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: .1em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .35s var(--ease);
}
.np-links a:hover::after,
.np-links a.is-active::after,
.np-has-menu.is-open .np-menutrig::after,
.np-links .np-menutrig:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.np-caret {
	font-size: .55em;
	opacity: .6;
	transition: transform .3s var(--ease);
	margin-left: .1em;
}
.np-has-menu.is-open .np-caret { transform: rotate(180deg); }

.np-has-menu { position: relative; }
.np-dropdown {
	position: absolute;
	top: calc(100% + 18px); left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 230px;
	/* Dropdown always dark — strong contrast against the page in either mode. */
	background: #0C0D0D;
	color: #F5F5F4;
	border-radius: 22px;
	padding: .8rem .55rem;
	display: flex; flex-direction: column;
	box-shadow: 0 24px 48px -14px rgba(0, 0, 0, .4);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.np-dropdown a {
	padding: .6em 1em;
	color: #F5F5F4;
	border-radius: 12px;
	font-size: .88rem;
	font-weight: 500;
	text-transform: lowercase;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	transition: background .25s var(--ease), color .25s var(--ease);
}
.np-dropdown a small {
	color: rgba(245, 245, 244, .45);
	font-size: .7em;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.np-dropdown a:hover { background: rgba(245, 245, 244, .08); color: var(--accent); }
.np-dropdown a::after { display: none; }

.np-has-menu.is-open .np-dropdown {
	opacity: 1;
	pointer-events: all;
	transform: translateX(-50%) translateY(0);
}

.np-right {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-shrink: 0;
	margin-left: auto;
}

/* Lang toggle — minimal CY/EN text */
.lang {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .04em;
	text-transform: lowercase;
	gap: .4em;
}
.lang button {
	min-width: 24px;
	min-height: 24px;
	padding: .4em .4em;
	color: var(--muted);
	transition: color .3s var(--ease);
	font: inherit;
	text-transform: lowercase;
}
.lang button.is-on { color: var(--ink); font-weight: 500; }
.lang .slash { color: var(--muted-2); }

/* Dark toggle — pill dot switch */
.np-theme {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .7rem .45rem .35rem;
	min-height: 24px;
	background: transparent;
	font-family: var(--font-mono);
	font-size: .7rem;
	text-transform: lowercase;
	color: var(--ink);
	border-radius: 999px;
}
.np-theme-pill {
	position: relative;
	display: inline-block;
	width: 32px;
	height: 18px;
	border-radius: 999px;
	background: rgba(20, 22, 22, .15);
	flex-shrink: 0;
	transition: background .3s var(--ease);
}
.np-theme-dot {
	position: absolute;
	top: 50%;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ink);
	transform: translateY(-50%);
	transition: left .3s var(--ease), background .3s var(--ease);
	pointer-events: none;
}

.np-burger {
	display: none;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--bg);
	align-items: center;
	justify-content: center;
}
.np-burger span {
	display: block;
	width: 14px; height: 1px;
	background: currentColor;
	position: relative;
}
.np-burger span::before,
.np-burger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 14px; height: 1px;
	background: currentColor;
}
.np-burger span::before { top: -4px; }
.np-burger span::after  { top:  4px; }

/* Burger animates to an X when the mobile menu is open, so the user has
 * an obvious "close" affordance. JS sets aria-expanded="true" on click;
 * CSS does the rest. The middle bar fades out, top + bottom rotate to cross.
 * Transitions match the menu fade so the open/close motion feels coherent. */
.np-burger span,
.np-burger span::before,
.np-burger span::after {
	transition: transform .35s var(--ease), opacity .25s var(--ease), top .3s var(--ease);
}
.np-burger[aria-expanded="true"] span {
	background: transparent;
}
.np-burger[aria-expanded="true"] span::before {
	top: 0;
	transform: rotate(45deg);
}
.np-burger[aria-expanded="true"] span::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Mobile menu — adapts to the current theme.
 * Was previously inverted (background: var(--ink), color: var(--bg)) which
 * gave a dark menu in light mode and a light menu in dark mode. That clashed
 * with the still-visible nav-pill above and made the bg flash to the opposite
 * tone on open. Using var(--bg) for background and var(--ink) for text means
 * the menu now MATCHES the page mode and the transition is seamless. */
.mobile-menu {
	position: fixed; inset: 0;
	/* Sits above the floating chat widget (z 9000) so when the menu is
	 * open, the burger / chat-trigger don't overlay it. Was z-99 — chat
	 * widget was above the menu in z order, which trapped clicks at the
	 * bottom-right corner. */
	z-index: 9100;
	background: var(--bg);
	color: var(--ink);
	display: flex; flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .4s var(--ease), visibility 0s linear .4s;
	gap: .2em;
}
.mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	/* When opening: visibility flips immediately so transition-end of
	 * opacity finds an interactive subtree. */
	transition: opacity .4s var(--ease), visibility 0s linear 0s;
}
.mobile-menu a {
	font-family: var(--font-display);
	font-size: clamp(2rem, 8vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	padding: .1em 0;
	color: var(--ink);
}
.mobile-menu a:hover { color: var(--accent); }
/* Mobile menu lang toggle inherits page-mode colours. .lang button has its
 * own border / accent rules in components.css that already use var() tokens,
 * so they adapt cleanly with no overrides needed here. */

/* ---------- Footer ----------
   Footer is ALWAYS dark — gives the page a consistent foot regardless of
   which mode the user is in. Hardcoded so it doesn't flip on dark mode. */
.footer {
	background: #0C0D0D;
	color: #F5F5F4;
	padding: 6rem 0 2rem;
	border-radius: 30px 30px 0 0;
	margin-top: 6rem;
}
.footer .wrap { max-width: var(--maxw); }
.footer a { color: #F5F5F4; transition: color .3s var(--ease); }
.footer a:hover { color: var(--accent); }

.foot-cta {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 2rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid rgba(245, 245, 244, .12);
	flex-wrap: wrap;
}
.foot-cta-text {
	font-family: var(--font-display);
	font-size: clamp(3rem, 9vw, 9rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: .9;
	text-transform: lowercase;
	max-width: 10ch;
}
.foot-cta-text .arrow {
	display: inline-block;
	transform: translateY(-.05em);
	transition: transform .4s var(--ease);
}
.foot-cta a:hover .foot-cta-text .arrow { transform: rotate(-15deg) translateY(-.05em); }

.foot-cta-side {
	text-align: right;
	font-family: var(--font-mono);
	font-size: .8rem;
	color: rgba(245, 245, 244, .6);
	text-transform: lowercase;
	display: grid;
	gap: .5em;
}

.foot-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2.5rem;
	padding: 4rem 0 3rem;
}
.foot-grid h5,
.foot-grid .foot-col-label {
	font-family: var(--font-mono);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .05em;
	text-transform: lowercase;
	/* Higher contrast on the always-dark footer — was --muted-2 (too low). */
	color: rgba(245, 245, 244, .65);
	margin: 0 0 1.5rem;
}
.foot-grid ul {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	gap: .35em;
	font-size: .95rem;
}
.foot-grid ul a {
	display: inline-block;
	padding: .2em 0;
	min-height: 24px;
}
.foot-brand { max-width: 34ch; }
.foot-brand p {
	color: rgba(245, 245, 244, .55);
	font-size: .95rem;
	line-height: 1.55;
}

.foot-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(245, 245, 244, .12);
	font-family: var(--font-mono);
	font-size: .7rem;
	color: rgba(245, 245, 244, .65); /* WCAG: bumped from .5 → .65 to pass 4.5:1 against the dark footer bg */
	gap: 1.5rem;
	flex-wrap: wrap;
	text-transform: lowercase;
}
/* Footer links — the surrounding text is now .65 alpha. Lighthouse needs
 * either ≥3:1 contrast between link colour and surrounding text, OR a
 * non-colour distinguisher (underline, weight). Underline on hover/focus
 * isn't enough — the static state must be distinguishable too. So we
 * underline always, with a subtle muted underline-offset that matches
 * the editorial rhythm without being shouty. */
.foot-bottom a {
	color: rgba(245, 245, 244, .92);
	text-decoration: underline;
	text-decoration-color: rgba(245, 245, 244, .35);
	text-underline-offset: .25em;
	text-decoration-thickness: 1px;
	transition: text-decoration-color .25s var(--ease), color .25s var(--ease);
}
.foot-bottom a:hover,
.foot-bottom a:focus-visible {
	text-decoration-color: rgba(245, 245, 244, .9);
}

/* Moon phase widget */
.moon-widget {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--font-mono);
	font-size: .7rem;
	color: rgba(245, 245, 244, .7);
	text-transform: lowercase;
}
.moon-widget svg { width: 18px; height: 18px; display: block; }
.moon-widget .moon-phase-name { color: rgba(245, 245, 244, .5); }

/* ---------- Placeholders (fallback for missing images) ---------- */
.ph {
	position: relative;
	background: var(--bg-alt);
	overflow: hidden;
	display: grid;
	place-items: center;
	color: var(--muted);
	border: 0;
}
.ph::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 30% 30%, rgba(20, 22, 22, .08), transparent 60%),
		radial-gradient(ellipse at 70% 70%, rgba(178, 74, 38, .12), transparent 55%);
}
.ph::after {
	content: "";
	position: absolute; inset: 0;
	background-image: repeating-linear-gradient(45deg, transparent 0 9px, rgba(20, 22, 22, .035) 9px 10px);
	pointer-events: none;
}
.ph-label {
	position: relative; z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .4em 1em;
	background: rgba(20, 22, 22, .75);
	color: #F5F5F4; /* always near-white — bg pill is fixed dark */
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: .62rem;
	letter-spacing: .05em;
	text-transform: lowercase;
	-webkit-backdrop-filter: blur(6px); /* iOS Safari < 18 needs prefix */
	backdrop-filter: blur(6px);
}
.ph-label::before { content: "✧"; color: var(--accent); }

/* Themed placeholder tiles */
.ph.ph-forest { background: var(--forest); }
.ph.ph-forest::before { background: radial-gradient(ellipse at 30% 40%, rgba(245, 245, 244, .08), transparent 65%); }
.ph.ph-forest .ph-label { background: rgba(245, 245, 244, .18); color: #fff; }

.ph.ph-terra { background: #A8492A; }
.ph.ph-terra::before { background: radial-gradient(ellipse at 40% 40%, rgba(255, 230, 210, .2), transparent 70%); }
.ph.ph-terra .ph-label { background: rgba(20, 22, 22, .5); color: #fff; }

.ph.ph-putty { background: #B3AE9B; }
.ph.ph-putty::before { background: radial-gradient(ellipse at 60% 40%, rgba(255, 250, 230, .2), transparent 70%); }

.ph.ph-ink { background: #0E0D0C; }
.ph.ph-ink::before { background: radial-gradient(ellipse at 30% 40%, rgba(216, 107, 70, .18), transparent 70%); }
.ph.ph-ink .ph-label { background: rgba(245, 245, 244, .15); color: #fff; }

.ph.ph-ochre { background: #C99547; }
.ph.ph-ochre::before { background: radial-gradient(ellipse at 60% 30%, rgba(255, 248, 220, .3), transparent 70%); }

/* ---------- Seas-style portfolio cards ---------- */
.seas-card {
	position: relative;
	display: block;
	border-radius: 18px;
	overflow: hidden;
	color: inherit;
}
.seas-card .ph,
.seas-card .cover-image {
	position: absolute;
	inset: 0;
	border-radius: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.seas-card::after {
	content: "";
	position: absolute; inset: 0;
	/* Two-stop scrim — title sits at the top, meta + timecode at the
	 * bottom, image breathes through the middle. Both ends are dense
	 * enough to hold white text against any image content (worked
	 * example: the 'mark — personal training' card sits on a near-
	 * black-with-bright-highlights image; weak scrim was letting the
	 * highlights bleed through and obliterate the title). */
	background: linear-gradient(
		180deg,
		rgba(20, 22, 22, .65) 0%,
		rgba(20, 22, 22, .15) 22%,
		rgba(20, 22, 22, .15) 60%,
		rgba(20, 22, 22, .55) 80%,
		rgba(20, 22, 22, .85) 100%
	);
	pointer-events: none;
	z-index: 1;
}
.seas-card .seas-inner {
	position: absolute; inset: 0;
	z-index: 2;
	padding: clamp(1.2rem, 2vw, 1.8rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #fff;
	font-family: var(--font-sans);
}
.seas-card .seas-top {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: lowercase;
	/* Half-pixel shadow as a safety net for any local bright spots
	 * (faces, white props, sky highlights) that the gradient lets
	 * through. Doesn't make the text feel heavy on dark images. */
	text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.seas-card .seas-top .arrow-circle {
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
	width: 38px; height: 38px;
	font-size: .85rem;
}
.seas-card:hover .seas-top .arrow-circle {
	background: var(--accent);
	border-color: var(--accent);
	transform: rotate(-15deg);
}
.seas-card .seas-bot {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: .68rem;
	color: rgba(255, 255, 255, .92); /* was .75 — washed out on busy images */
	text-transform: lowercase;
	letter-spacing: .02em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.seas-card .seas-bot .tag {
	display: inline-flex;
	align-items: center;
	gap: .4em;
}
.seas-card .seas-bot .tag::before {
	content: "○";
	color: rgba(255, 255, 255, .75); /* was .5 */
	font-size: .85em;
}
.seas-card .seas-bot .year {
	font-weight: 500;
	color: rgba(255, 255, 255, 1); /* full white — most-glanced datum */
}
.seas-card .seas-bot .timecode {
	color: rgba(255, 255, 255, .8); /* was .55 — too dim, hard to read on busy images */
	margin-left: auto;
}

/* Flat-colour cards (no image — use themed ph class) */
.seas-card.flat .seas-top .arrow-circle {
	border-color: currentColor;
	color: inherit;
}

/* ---------- Hover-loop video on portfolio cards ---------- */
/* The video element acts as the card visual itself — sits paused on its first
   frame as the static, plays on hover. Poster (featured image) shows briefly
   while metadata loads.

   On has-loop cards we ALSO render an <img class="cover-image loop-fallback">
   underneath the video. iOS Safari and some Android browsers don't render the
   <video> poster reliably when the element has no src (we lazy-load via
   data-src), so without the img fallback those cards appeared as empty boxes
   on mobile — particularly vertical reels. The img sits at z-index 1 and the
   video at z-index 2, so the video covers the img once it loads. */
.seas-card .loop-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%; /* match the still-image rule — favour subject heads */
	pointer-events: none;
	z-index: 2;
	/* Subtle scale-up on hover for a touch of life */
	transition: transform .55s var(--ease);
}
.seas-card.has-loop:hover .loop-video {
	transform: scale(1.02);
}
.seas-card.has-loop .loop-fallback {
	z-index: 1;
	transition: transform .55s var(--ease);
}
.seas-card.has-loop:hover .loop-fallback {
	transform: scale(1.02);
}
/* Vertical 9:16 loop video on a 4:3 / 16:9 card — show top portion only,
 * never zoom into mid-frame torso. Apply data-orientation="vertical" on
 * the card or its parent stack to opt in. */
.seas-card[data-loop-orient="vertical"] .loop-video,
.seas-card.is-vertical-loop .loop-video {
	object-position: center 18%;
}

/* ---------- FAQ accordion (uses native <details>/<summary>) ---------- */
.faq-section {
	max-width: var(--maxw);
	margin: clamp(4rem, 8vw, 7rem) auto;
	padding: 0 var(--gutter);
}
.faq-head {
	margin-bottom: 2.5rem;
	max-width: 56ch;
}
.faq-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -0.035em;
	text-transform: lowercase;
	line-height: 1;
	margin: 0 0 1rem;
}
.faq-intro {
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--muted);
	letter-spacing: -0.005em;
	margin: 0;
}
.faq-list {
	border-top: 1px solid var(--hairline);
}
.faq-item {
	border-bottom: 1px solid var(--hairline);
}
.faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 1.4rem 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 2rem;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.1rem, 1.5vw, 1.25rem);
	letter-spacing: -0.015em;
	color: var(--ink);
	transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-deep); }
.faq-toggle {
	font-family: var(--font-mono);
	font-size: 1.2rem;
	color: var(--muted);
	transition: transform .3s var(--ease), color .25s var(--ease);
	flex-shrink: 0;
}
.faq-item[open] .faq-toggle {
	transform: rotate(45deg);
	color: var(--accent);
}
.faq-a {
	padding: 0 0 1.6rem;
	max-width: 64ch;
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.65;
}
.faq-a p { margin: 0 0 1em; }
.faq-a p:last-child { margin-bottom: 0; }

.faq-more {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hairline);
}

/* Dark mode tweaks */
body.dark .faq-item summary:hover { color: var(--accent); }

/* About page — entity paragraph (opening summary) */
.ab-entity {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.ab-entity-lede {
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	line-height: 1.55;
	color: var(--ink);
	margin: 0 0 4rem;
	max-width: 65ch;
	letter-spacing: -0.01em;
	border-left: 2px solid var(--accent);
	padding-left: 1.5rem;
}
.ab-entity-lede strong { font-weight: 600; }

/* Homepage clients grid */
.who-we-work-with .clients-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--hairline);
}
.who-we-work-with .clients-col h4 {
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--accent);
	margin: 0 0 1rem;
}
.who-we-work-with .clients-col p {
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--ink);
	margin: 0;
	letter-spacing: -0.005em;
}
@media (max-width: 860px) {
	.who-we-work-with .clients-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Welsh hint — first-visit tooltip pointing at the CY toggle ---------- */
.welsh-hint {
	position: fixed;
	z-index: 200;
	transform: translate(-50%, -8px);
	background: var(--ink);
	color: var(--bg);
	padding: .7rem 2.4rem .7rem 1rem;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .02em;
	text-transform: lowercase;
	box-shadow: 0 14px 40px -14px rgba(20, 22, 22, .5);
	opacity: 0;
	transition: opacity .4s var(--ease), transform .4s var(--ease);
	pointer-events: none;
	white-space: nowrap;
}
.welsh-hint.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
/* Small pointer nub on top */
.welsh-hint::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 10px; height: 10px;
	background: var(--ink);
	border-radius: 2px;
}
.welsh-hint-arrow {
	display: inline-block;
	margin-left: .3em;
	color: var(--accent);
	animation: welshHintBob 1.4s ease-in-out infinite;
}
@keyframes welshHintBob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}
.welsh-hint-close {
	position: absolute;
	right: .35rem;
	top: 50%;
	transform: translateY(-50%);
	width: 28px; height: 28px;
	border-radius: 50%;
	background: rgba(245, 245, 244, .12);
	color: rgba(245, 245, 244, .7);
	font-size: 1rem;
	font-weight: 400;
	display: grid;
	place-items: center;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.welsh-hint-close:hover {
	background: rgba(245, 245, 244, .22);
	color: var(--bg);
}

/* Hide hint entirely on very small screens — layout is too cramped. */
@media (max-width: 560px) {
	.welsh-hint { display: none; }
}

/* ---------- Skip link (WCAG 2.2 bypass block) ---------- */
.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 10000;
	padding: .85em 1.2em;
	background: var(--ink);
	color: var(--bg);
	font-family: var(--font-mono);
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: lowercase;
	border-radius: 999px;
	text-decoration: none;
	transition: top .2s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
	top: 1rem;
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
#mona-main:focus { outline: none; }

/* ---------- 404 + search (shared page layout) ---------- */
.sec-404, .sec-search { padding-top: clamp(7rem, 12vw, 12rem); padding-bottom: clamp(5rem, 10vw, 9rem); }
.err-h1, .search-h1 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(3rem, 10vw, 8.5rem);
	letter-spacing: -.03em;
	line-height: .9;
	max-width: 14ch;
	margin-top: 1.5rem;
}
.err-h1 .accent-italic,
.search-h1 .accent-italic {
	font-family: var(--font-accent-serif);
	font-style: italic;
	font-weight: 300;
	color: var(--accent-deep);
}
.err-lede, .search-lede { margin-top: 2rem; max-width: 58ch; }
.err-actions {
	margin-top: 2.5rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
.err-search, .search-form-block {
	margin-top: 3.5rem;
	max-width: 48rem;
}
.err-search-label, .search-form-label {
	display: block;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: .75rem;
}
.err-search-row, .search-form-row {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--ink);
	transition: border-color .2s var(--ease), padding .2s var(--ease);
}
/* Keyboard focus: thicken/colour the underline to make focus visible
   without spilling an outline onto the whole row. WCAG 2.4.7. */
.err-search-row:focus-within,
.search-form-row:focus-within {
	border-bottom-color: var(--accent, #0d6e6e);
	border-bottom-width: 2px;
	padding-bottom: 0;
}
.err-search-row input,
.search-form-row input {
	flex: 1;
	padding: .9em 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 1.05rem;
	outline: none;
}
.err-search-row input::placeholder,
.search-form-row input::placeholder {
	color: var(--muted-2);
}
.err-search-row button,
.search-form-row button {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	font-size: 1.1rem;
	margin-left: 1rem;
	align-self: center;
	transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.err-search-row button:hover,
.search-form-row button:hover {
	background: var(--ink);
	color: var(--bg);
	transform: rotate(-15deg);
}

.err-recent { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--hairline); }
.err-recent-lbl {
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1.5rem;
}
.err-recent-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
}
.err-recent-card {
	display: block;
	color: var(--ink);
	text-decoration: none;
}
.err-recent-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4/5;
	background: var(--forest);
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	transition: transform .5s var(--ease);
}
.err-recent-thumb-empty { background: linear-gradient(135deg, var(--forest), var(--accent-deep)); }
.err-recent-card:hover .err-recent-thumb { transform: scale(1.02); }
.err-recent-title {
	display: block;
	margin-top: .75rem;
	font-size: .95rem;
	font-weight: 500;
}

/* Search results list */
.search-results { margin-top: 3.5rem; display: grid; gap: 0; }
.search-result {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: baseline;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--hairline);
	text-decoration: none;
	color: var(--ink);
	transition: padding-left .3s var(--ease);
}
.search-result:hover { padding-left: 1rem; }
.search-result h2 {
	font-size: clamp(1.4rem, 2.8vw, 2rem);
	font-weight: 500;
	letter-spacing: -.025em;
	margin: 0;
}
.search-result .sr-type {
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
.search-result .sr-excerpt {
	grid-column: 1 / -1;
	margin-top: .5rem;
	color: var(--muted);
	max-width: 70ch;
	font-size: .95rem;
}
.search-empty { margin-top: 3rem; color: var(--muted); }

/* ---------- Social icons row (footer + contact) ---------- */
.mona-socials {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mona-socials li { margin: 0; padding: 0; }
.mona-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	transition: color .25s var(--ease), background .25s var(--ease), transform .35s var(--ease);
}
.mona-socials a:hover,
.mona-socials a:focus-visible {
	color: var(--accent);
	transform: translateY(-2px);
}
.mona-socials a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.mona-socials svg { display: block; }

/* Footer-specific tweaks — selectors bumped via .foot-grid prefix so they
   win the specificity battle against `.foot-grid ul` and `.foot-grid ul a`,
   which would otherwise force grid-stack + block-anchor styles. */
.foot-grid .foot-socials {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .9rem 0 0;
	padding: 0;
	list-style: none;
}
.foot-grid .foot-socials li {
	margin: 0;
	padding: 0;
}
.foot-grid .foot-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	border-radius: 999px;
	background: rgba(245, 245, 244, .06);
	color: rgba(245, 245, 244, .85);
	transition: color .25s var(--ease), background .25s var(--ease), transform .35s var(--ease);
}
.foot-grid .foot-socials a:hover,
.foot-grid .foot-socials a:focus-visible {
	background: rgba(245, 245, 244, .14);
	color: var(--accent);
	transform: translateY(-2px);
}
.foot-grid .foot-socials svg { display: block; }

/* Contact page — bumped via .ct-left for specificity (ties with
   `.ct-left .contact-block a` and wins on source order). */
.ct-left .ct-socials {
	margin-top: .55rem;
	gap: .35rem;
}
.ct-left .ct-socials a {
	background: rgba(20, 22, 22, .04);
}
.ct-left .ct-socials a:hover,
.ct-left .ct-socials a:focus-visible {
	background: rgba(27, 191, 186, .12);
	color: var(--accent);
}
body.dark .ct-left .ct-socials a {
	background: rgba(245, 245, 244, .06);
}
body.dark .ct-left .ct-socials a:hover,
body.dark .ct-left .ct-socials a:focus-visible {
	background: rgba(27, 191, 186, .18);
}

/* =========================================================
   Password-protected portfolio gate. Branded version of WP's
   built-in post_password_required() form — same editorial
   register as the rest of the site (no generic WP styling).
   ========================================================= */
.pp-wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 9rem var(--gutter) 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
}
.pp-inner {
	max-width: 520px;
	width: 100%;
	text-align: center;
}
.pp-eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--muted-2);
	padding: .35em .9em;
	border: 1px solid var(--hairline);
	border-radius: 999px;
	margin-bottom: 2rem;
}
.pp-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(2rem, 4.5vw, 3rem);
	letter-spacing: -.03em;
	line-height: 1;
	margin: 0 0 1rem;
	text-transform: lowercase;
}
.pp-description {
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.55;
	max-width: 44ch;
	margin: 0 auto 2.5rem;
}
.pp-form {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	align-items: stretch;
	max-width: 360px;
	margin: 0 auto 2rem;
}
.pp-form .pp-intro {
	display: none; /* original WP intro paragraph is replaced by .pp-description above */
}
.pp-field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	text-align: left;
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--muted-2);
}
.pp-input {
	font: inherit;
	font-size: 1rem;
	font-family: var(--font-sans, inherit);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	padding: .75em 1em;
	border: 1px solid var(--hairline);
	border-radius: 8px;
	background: var(--bg, #fff);
	transition: border-color .2s var(--ease);
}
.pp-input:focus {
	outline: none;
	border-color: var(--ink);
}
.pp-submit {
	font-family: var(--font-mono);
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: lowercase;
	background: var(--ink);
	color: var(--bg, #fff);
	border: 1px solid var(--ink);
	padding: .85em 1.4em;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s var(--ease), border-color .2s var(--ease);
}
.pp-submit:hover,
.pp-submit:focus-visible {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
}
.pp-back {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--muted);
	text-decoration: none;
	transition: color .2s var(--ease);
}
.pp-back:hover,
.pp-back:focus-visible {
	color: var(--ink);
}

/* ==========================================================================
   YOAST BREADCRUMBS
   ========================================================================== */
.mona-breadcrumbs-wrap {
	position: relative;
	z-index: 10;
	/* Tightened from clamp(7.5rem, 10vw, 9rem) — that left a ~70px void
	 * between the nav and the breadcrumb. New value clears the fixed nav
	 * (~64-72px tall) with about 16-24px breathing room. The header.php
	 * inline hotfix uses !important to keep a single source of truth
	 * across all surfaces; this block matches so DevTools shows
	 * consistent values when inspecting. */
	padding-top: clamp(5rem, 7vw, 6rem);
	padding-bottom: 0.9rem;
	background: var(--bg);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	border-bottom: 1px solid var(--hairline);
}
.mona-breadcrumbs-wrap .container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.mona-breadcrumbs-wrap #breadcrumbs {
	margin: 0;
	color: var(--muted-2);
}
.mona-breadcrumbs-wrap a {
	color: var(--muted);
	text-decoration: none;
	font-weight: 500;
	transition: color .3s var(--ease);
}
.mona-breadcrumbs-wrap a:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mona-breadcrumbs-wrap .breadcrumb_last {
	color: var(--ink);
	font-weight: 600;
}

/* REDUCER: When breadcrumbs are present, the hero doesn't need its
 * own nav buffer — the breadcrumb wrap above already provides it. */
.mona-breadcrumbs-wrap + .ab-hero,
.mona-breadcrumbs-wrap + .svc-head,
.mona-breadcrumbs-wrap + .pf-head,
.mona-breadcrumbs-wrap + .ct-wrap {
	padding-top: 2.25rem !important;
}

/* SUB-BRAND OVERRIDE: on /stori/, /hafn/, /core/, /boost/ the body canvas
 * is brand-specific (cream for Stori/Hafn; dark for Core/Boost) but the
 * breadcrumb wrap defaults to var(--bg) — the global cream — which then
 * shows as a mismatched cream strip on top of dark Boost/Core pages.
 * Making the wrap transparent + dropping the hairline lets it inherit
 * the brand canvas seamlessly. Link colours pick up currentColor so each
 * sub-brand's text colour drives the visible breadcrumb text. */
body.sb .mona-breadcrumbs-wrap {
	background: transparent;
	border-bottom: 0;
}
body.sb .mona-breadcrumbs-wrap #breadcrumbs,
body.sb .mona-breadcrumbs-wrap a {
	color: inherit;
	opacity: .65;
}
body.sb .mona-breadcrumbs-wrap a:hover,
body.sb .mona-breadcrumbs-wrap .breadcrumb_last {
	opacity: 1;
}
/* Portfolio single hero uses margin-top instead of padding */
.mona-breadcrumbs-wrap + .single-project .single-hero,
.mona-breadcrumbs-wrap + .single-hero {
	margin-top: 3rem !important;
}

/* The "Mobile Floating CTA" CSS block was removed when the duplicate
 * widget was deleted from footer.php — both .floating-cta and
 * .mona-chat were rendering on mobile, showing two competing
 * WhatsApp/contact buttons. The .mona-chat widget (in polish.css)
 * is the primary widget on every viewport. If a simpler mobile-only
 * contact bar is wanted again, restore the markup, JS enqueue, and
 * these styles from git history before this commit. */