@layer components {

	/* --- header ----------------------------------------------------
	   Sticky frosted bar on every page (Jarv, 14 Oct 2026): paper at 90%
	   with a blur, so the page shows through softly. Coral dot, then the
	   name (900); Work | About (700); the coral Contact button. Under 700px
	   wide, Work and About move into the full-screen menu behind the
	   three-line button. Nothing in it fades or moves on scroll. */

	.site-header {
		position: sticky; top: 0; z-index: 40;
		height: calc(env(safe-area-inset-top, 0px) + var(--head-h));
		padding: env(safe-area-inset-top, 0px) var(--gut) 0;
		display: flex; align-items: center; justify-content: space-between;
		background: color-mix(in srgb, var(--bg) 90%, transparent);   /* the page's own paper */
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	/* The name, with the coral dot before it (Jarv, 21 Oct 2026). The dot is the
	   illustration's coral with a light printed speckle; decorative, so the link
	   is still read as just the name. */
	.site-header__name {
		display: inline-flex; align-items: center; gap: 10px;
		font-weight: 900; font-size: var(--t-nav); letter-spacing: -0.01em; color: var(--c-ink);
		transition: opacity 0.2s ease;
	}
	.site-header__name::before {
		content: ""; flex: none; width: 12px; height: 12px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cfilter id='p' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.9 1.3'/%3E%3CfeComposite in='SourceGraphic' operator='in'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23e4613e' filter='url(%23p)'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.site-header__name:hover { opacity: 0.7; }

	.site-nav { display: flex; align-items: center; gap: 24px; }

	.site-nav__link {
		position: relative; font-size: var(--t-nav); font-weight: 700; color: var(--c-ink);
		transition: opacity 0.2s ease;
	}
	.site-nav__link::after { content: ""; position: absolute; inset: -12px -8px; }   /* 44px tap target */
	.site-nav__link:hover { opacity: 0.7; }
	/* a fine upright line between Work and About, in the gap */
	.site-nav__link + .site-nav__link::before {
		content: ""; position: absolute; left: -12px; top: 50%; width: 1px; height: 18px; margin-top: -9px;
		background: color-mix(in srgb, var(--c-ink) 30%, transparent); pointer-events: none;
	}

	/* Contact: the coral contact button (see "Buttons") */
	.site-header .site-nav__contact { height: 44px; padding: 0 18px; font-size: var(--t-nav); }   /* the header size wins over the general button size */

	/* The menu button: phones only. Its three lines are the illustration's ink
	   lines; on open the outer two cross and the middle one fades. */
	.menu-btn { display: none; }

	/* --- buttons ------------------------------------------------------
	   Ink for everything except getting in touch, which is coral with a
	   light printed speckle (Jarv, 22 Oct 2026). All at 700. */

	.btn, .btn-contact {
		position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
		border: 0; border-radius: 3px; font-size: 15px; font-weight: var(--w-button); line-height: 1.2;
		cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
	}
	.btn { background: var(--c-ink); color: var(--c-paper); }
	.btn:hover { background: var(--c-ink-hover); }
	.btn--ghost { background: none; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
	.btn--ghost:hover { background: var(--c-ink); color: var(--c-paper); }
	.btn-contact { background: var(--speckle) 0 0 / 160px 160px, var(--c-coral); color: var(--c-white); }
	.btn-contact:hover { background-color: var(--c-coral-hover); }
	.btn-contact:focus-visible { outline-color: var(--c-ink); }
	.band--dark .btn-contact:focus-visible { outline-color: var(--c-paper); }

	@media (max-width: 699px) {
		.site-nav { gap: 12px; }
		.site-nav__link { display: none; }
		.site-header .site-nav__contact { display: none; }   /* phones: Contact lives in the menu; the button was too big and distracting in the bar (Jarv, 24 Oct 2026) */
		.menu-btn {
			display: inline-grid; place-items: center; position: relative;
			width: 44px; height: 44px; margin-right: -6px; padding: 0; border: 0; background: none; cursor: pointer;
		}
		.menu-btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; border-radius: 3px; }
		.menu-btn span {
			position: absolute; left: 9px; width: 26px; height: 4px; border-radius: 3px; background: var(--c-ink);
			transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease, top 0.35s cubic-bezier(0.65, 0, 0.35, 1);
		}
		.menu-btn span:nth-child(1) { top: 12px; }
		.menu-btn span:nth-child(2) { top: 20px; width: 20px; }   /* a shorter middle line, as in the art */
		.menu-btn span:nth-child(3) { top: 28px; }
		.menu-open .menu-btn span:nth-child(1) { top: 20px; transform: rotate(45deg); }
		.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
		.menu-open .menu-btn span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
	}

	/* --- the full-screen menu (phones) --------------------------------
	   The ink band with its grain; the three items centred, a separator
	   only between them. The words fade up in turn: opacity only. */

	.site-menu {
		position: fixed; inset: 0; z-index: 35;
		display: grid; place-items: center;
		padding: calc(env(safe-area-inset-top, 0px) + var(--head-h) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 32px);
		background: var(--grain-ink) var(--c-ink);
		overflow-y: auto; overscroll-behavior: contain;
		visibility: hidden; opacity: 0;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}
	.menu-open .site-menu { visibility: visible; opacity: 1; transition: opacity 0.3s ease, visibility 0s; }
	.site-menu nav { width: 100%; max-width: 420px; }
	.site-menu ul { text-align: center; }
	.site-menu li + li { border-top: 1px solid var(--divider-on-ink); }
	.site-menu a {
		display: block; padding: 20px 0; color: var(--c-paper);
		font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
		opacity: 0; transition: opacity 0.3s ease;
	}
	.menu-open .site-menu a { opacity: 1; }
	.menu-open .site-menu li:nth-child(1) a { transition-delay: 0.08s; }
	.menu-open .site-menu li:nth-child(2) a { transition-delay: 0.14s; }
	.menu-open .site-menu li:nth-child(3) a { transition-delay: 0.2s; }
	.menu-open .site-menu a[aria-current="page"] { opacity: 0.55; }   /* the page you're on */
	.site-menu a:focus { outline: none; }
	.site-menu a:focus-visible { outline: 2px solid var(--c-paper); outline-offset: 4px; }
	.menu-open .site-header .site-nav__contact { visibility: hidden; }   /* the menu's last item repeats it */
	.menu-open { overflow: hidden; }   /* only on <html>: on <body> it would unpin the sticky header */
	@media (min-width: 700px) { .site-menu { display: none; } }

	@media (prefers-reduced-motion: reduce) {
		.site-header__name, .site-nav__link, .btn, .btn-contact,
		.menu-btn span, .site-menu, .site-menu a { transition: none !important; }
	}

	/* --- generic band furniture -------------------------------------- */

	.band__title { margin-block-end: var(--space-s); }
	.band__lede { color: var(--fg-muted); margin-block-end: var(--space-l); }

	.lede p {
		font-size: var(--step-1);
		color: var(--fg-muted);
	}
	.lede p + p { margin-block-start: var(--space-s); }

	/* --- prose --------------------------------------------------------- */

	.prose h2 {
		font-size: var(--step-2);
		margin-block-start: var(--space-xl);
		margin-block-end: var(--space-s);
	}
	.prose > h2:first-child { margin-block-start: 0; }

	.prose h3 {
		font-size: var(--step-0);
		font-weight: 650;
		margin-block-start: var(--space-m);
		margin-block-end: var(--space-2xs);
	}

	.prose p { margin-block-end: var(--space-s); }
	.prose h3 + p { color: var(--fg-muted); }

	/* --- animation slot ------------------------------------------------ */

	.slot {
		aspect-ratio: 21 / 6;
		background: var(--ink-100);
		display: grid;
		place-items: center;
		color: var(--fg-muted);
		font-size: var(--step--1);
	}

	/* --- FAQ ------------------------------------------------------------ */

	.faq { display: grid; }

	.faq__item {
		border-block-start: 1px solid var(--rule);
		padding-block: var(--space-s);
	}
	.faq__item:last-child { border-block-end: 1px solid var(--rule); }

	.faq__q { font-size: var(--step-0); font-weight: 650; }
	.faq__a { color: var(--fg-muted); margin-block-start: var(--space-2xs); }

	.faq__label {
		font-size: var(--step--1);
		color: var(--fg-muted);
		margin-block-start: var(--space-l);
		margin-block-end: var(--space-2xs);
	}

	/* --- related -------------------------------------------------------- */

	.rel-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-m);
	}

	.rel {
		border: 1px solid var(--rule);
		padding: var(--space-m);
		display: grid;
		gap: var(--space-2xs);
		text-decoration: none;
	}
	.rel:hover { border-color: var(--fg); }
	.rel__t { font-weight: 650; }
	.rel__d { font-size: var(--step--1); color: var(--fg-muted); }

	/* --- contact form (Contact Form 7) ------------------------------------
	   As the prototype (docs/prototype/contact-paper.html). CF7's own stylesheet
	   is dequeued in functions.php; this is the whole of its styling. The form's
	   fields are set in the CF7 admin (see docs/CONTACT-FORM.md). */

	.wpcf7 form { display: grid; gap: 20px; }
	.wpcf7 .hidden-fields-container { display: none; }   /* CF7's hidden inputs; would otherwise take a row of the grid */
	.wpcf7 .screen-reader-response {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
	}
	.cf-pair { display: grid; gap: 20px; }
	@media (min-width: 640px) { .cf-pair { grid-template-columns: 1fr 1fr; } }
	.cf-field { display: grid; gap: 8px; align-content: start; }   /* a neighbour's error note mustn't push this label down */
	.cf-field label { font-size: 15px; line-height: normal; font-weight: 500; color: var(--c-ink); }
	.cf-field .opt { font-weight: 400; color: var(--c-muted); }
	.wpcf7-form-control-wrap { position: relative; display: block; }
	.wpcf7 input:not([type="submit"]):not([type="hidden"]), .wpcf7 select, .wpcf7 textarea {
		display: block; width: 100%; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c-ink) 35%, transparent); border-radius: 5px;
		background: var(--c-white); color: var(--c-ink);
		font: 400 16px/1.4 var(--font-text);   /* 16px: phones don't zoom in on focus */
	}
	.wpcf7 textarea { height: 160px; resize: vertical; }   /* CF7 sets ten rows; this keeps the prototype's height */
	.wpcf7 select {
		appearance: none; padding-right: 40px; cursor: pointer;
		background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b2a5e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
	}
	.wpcf7 input:focus-visible, .wpcf7 select:focus-visible, .wpcf7 textarea:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 1px; border-color: var(--c-ink); }

	/* Send message: the coral contact button */
	.wpcf7 .wpcf7-submit {
		min-height: 50px; padding: 0 24px; border: 0; border-radius: 3px;
		background: var(--speckle) 0 0 / 160px 160px, var(--c-coral); color: var(--c-white);
		font: 700 17px/1 var(--font-text); cursor: pointer; transition: background-color 0.2s ease;
	}
	.wpcf7 .wpcf7-submit:hover { background-color: var(--c-coral-hover); }
	.wpcf7 .wpcf7-submit:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
	.wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }
	.cf-send { position: relative; display: flex; align-items: center; }
	/* "Sending…" (contact.js): three shapes and the word, beside the button.
	   Hidden unless Contact Form 7 is sending, and then only after 0.3s, so a
	   quick send never flickers. They hop in motion.css. CF7's own spinner goes. */
	/* The spam honeypot (inc/antispam.php): visually hidden in the standard
	   way (clipped to nothing, out of the form's grid), so it takes no space and
	   is never seen. aria-hidden and tabindex -1 in the markup keep it from
	   screen readers and the keyboard; bots still fill it in. */
	.cf-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.wpcf7 .wpcf7-spinner { display: none; }
	/* phones: just under the button, floating, so it takes no room while hidden;
	   wider screens: beside the button */
	.sending { position: absolute; top: calc(100% + 14px); left: 0; display: inline-flex; align-items: center; gap: 8px; opacity: 0; visibility: hidden; }
	@media (min-width: 640px) { .sending { position: static; margin-left: 18px; } }
	.sending img { display: block; width: 24px; height: 24px; }
	.sending__word { margin-left: 4px; font-size: 15px; color: var(--c-muted); }
	.wpcf7 form.submitting .sending { opacity: 1; visibility: visible; transition: opacity 0.2s ease 0.3s, visibility 0s linear 0.3s; }

	/* A field left empty or wrong: its outline turns coral, with a short note under it.
	   The note sits in the 20px gap below the field rather than pushing things down:
	   CF7 removes it as the visitor leaves the field, and if that moved the Send
	   button mid-click, the click would miss. */
	.wpcf7 .wpcf7-not-valid { border-color: var(--c-coral) !important; }
	.wpcf7-not-valid-tip { position: absolute; top: 100%; left: 0; padding-top: 2px; color: var(--c-coral-hover); font-size: 13px; line-height: 17px; font-weight: 600; white-space: nowrap; }
	.wpcf7-response-output { margin: 0; padding: 16px 20px; border-radius: 5px; border: 1px solid var(--c-coral); background: var(--c-white); color: var(--c-ink); font-size: 16px; line-height: 1.45; }
	.wpcf7-response-output:empty, .wpcf7 form.init .wpcf7-response-output { display: none; }
	/* Sent: the form gives way to the thank-you, as the prototype */
	.wpcf7 form.sent > :not(.wpcf7-response-output):not(.hidden-fields-container) { display: none; }
	.wpcf7 form.sent .wpcf7-response-output {
		padding: 20px; border-color: color-mix(in srgb, var(--c-ink) 35%, transparent); font-size: 18px;
	}
	@media (prefers-reduced-motion: reduce) { .wpcf7 .wpcf7-submit { transition: none; } }

	/* --- closing call to action and footer ----------------------------
	   Both on paper with its grain, the same on every page (Jarv, 28 Oct 2026:
	   was ink; the bottom of the homepage was all blue). A keyline between them. */

	.cta-band { padding: 64px var(--gut); background: var(--grain) var(--c-paper); }
	.cta-band__title {
		margin: 0 0 20px; color: var(--c-ink);
		font-size: var(--t-band); line-height: 1.1; letter-spacing: -0.024em;
	}
	.cta-band__body { max-width: 720px; margin: -4px 0 24px; color: var(--c-muted); font-size: 18px; line-height: 1.42; }
	.cta-band__btn { margin-top: 20px; }   /* 40px under the heading, as the prototype */

	.site-footer {
		padding: 0 var(--gut) calc(env(safe-area-inset-bottom, 0px) + 32px);
		background: var(--grain) var(--c-paper); color: var(--c-muted);
	}
	/* the keyline: inset to the text margins, like the lines between the services */
	.site-footer::before { content: ""; display: block; height: 1px; margin-bottom: 24px; background: rgba(27, 42, 94, 0.2); }
	.site-footer p { max-width: none; font-size: var(--t-small); line-height: 1.42; }

	@media (min-width: 1024px) {
		.cta-band { padding: 96px var(--gut); }
		.cta-band__body { font-size: 22px; }
		.cta-band .cta-band__btn { min-height: 50px; padding: 0 22px; font-size: 17px; }
		.site-footer p { font-size: 16px; }
	}

	/* --- button row --------------------------------------------------- */

	.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

	@media (min-width: 1024px) {
		.btns .btn { min-height: 50px; padding: 0 22px; font-size: 17px; }
	}

	/* --- client logo grid ----------------------------------------------
	   Cells with light dividers between them (none on the outer edges), each
	   logo about half its cell's width. The files keep their optical balance
	   from the original artboards, so every logo is drawn at the same scale.
	   Two across on phones, four on desktop. Shown white on the ink band. */

	.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
	.logo {
		aspect-ratio: 465 / 256; display: grid; place-items: center;
		border-right: 1px solid var(--divider-on-ink); border-bottom: 1px solid var(--divider-on-ink);
	}
	.logo:nth-child(2n) { border-right: 0; }
	.logo:nth-last-child(-n + 2) { border-bottom: 0; }
	.logo img { width: 51%; height: auto; aspect-ratio: 116 / 64; filter: brightness(0) invert(1); }   /* dark logo files shown white */

	@media (min-width: 1024px) {
		.logo-grid { grid-template-columns: repeat(4, 1fr); }
		.logo:nth-child(2n) { border-right: 1px solid var(--divider-on-ink); }
		.logo:nth-child(4n) { border-right: 0; }
		.logo:nth-last-child(-n + 2) { border-bottom: 1px solid var(--divider-on-ink); }
		.logo:nth-last-child(-n + 4) { border-bottom: 0; }
	}

	/* --- project card ----------------------------------------------------
	   Homepage Selected work and the Work page. A frame with soft corners, a
	   square picture inset in it, then the name, a line about the project and
	   its services. The link sits on the name; its ::before covers the whole
	   card, so the card is one click. */

	.work-card {
		position: relative; display: flex; flex-direction: column; height: 100%;
		padding: 12px 12px 20px; border-radius: 5px;
		background: var(--grain) #fbfbf9; box-shadow: 0 1px 0 color-mix(in srgb, var(--c-ink) 6%, transparent);
	}
	.work-card__pic { display: block; overflow: hidden; border-radius: 3px; }   /* clips the hover zoom */
	.work-card__pic img { width: 100%; height: auto; aspect-ratio: var(--ar, 1); object-fit: cover; }   /* --ar: the Work page sets each card's shape */
	.work-card__pic--todo {   /* a card picture still to come */
		display: grid; place-items: center; aspect-ratio: var(--ar, 1); padding: 16px; text-align: center;
		background: color-mix(in srgb, var(--c-ink) 6%, transparent); color: var(--c-muted); font-size: var(--t-small);
	}
	.work-card__name {
		padding: 16px 6px 0; color: var(--c-ink);
		font-size: 22px; font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance;
	}
	.work-card__name a::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
	.work-card__name a:focus-visible { outline: none; }
	.work-card:has(.work-card__name a:focus-visible) { outline: 2px solid var(--c-ink); outline-offset: 3px; }
	.work-card__line { max-width: none; padding: 8px 6px 0; color: var(--c-muted); font-size: var(--t-body); line-height: 1.42; letter-spacing: -0.005em; }
	.work-card__tags { max-width: none; margin-top: auto; padding: 14px 6px 0; color: var(--c-muted); font-size: 13px; line-height: 1.42; letter-spacing: -0.005em; }

	/* Hover (Jarv, 15 Oct 2026): the picture zooms gently to 103%. Mouse only,
	   never with reduced motion. */
	@media (hover: hover) and (prefers-reduced-motion: no-preference) {
		.work-card__pic img { transition: transform 0.4s ease; }
		.work-card:hover .work-card__pic img { transform: scale(1.03); }
	}

	/* --- responsive ------------------------------------------------------- */

	@media (max-width: 860px) {
		.rel-grid { grid-template-columns: 1fr; }
	}

	/* --- cookie choice (inc/analytics.php, assets/js/consent.js) ---------
	   A paper card over the bottom of the screen, so nothing on the page
	   moves when it appears. Accept and Decline look the same on purpose:
	   saying no must be as easy as saying yes. */

	.consent {
		position: fixed; z-index: 60; left: var(--gut); right: var(--gut);
		bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
		display: grid; gap: 14px; max-width: 640px; margin-inline: auto; padding: 18px 20px;
		background: var(--c-paper); color: var(--c-ink); border-radius: 6px;
		box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-ink) 14%, transparent), 0 12px 32px color-mix(in srgb, var(--c-ink) 22%, transparent);
	}
	.consent[hidden] { display: none; }
	.consent__text { max-width: none; margin: 0; font-size: 15px; line-height: 1.45; }
	.consent__text a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
	.consent__text strong { font-weight: 700; }
	.consent__btns { display: flex; gap: 10px; }
	.consent__btns .btn { flex: 1 1 0; justify-content: center; font-family: inherit; }
	@media (min-width: 640px) {
		.consent { grid-template-columns: 1fr auto; align-items: center; gap: 20px; }
		.consent__btns .btn { flex: none; }
	}

	/* "Cookie settings" and "Privacy", small, under the footer text */
	.site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; }
	.site-footer__link {
		padding: 0; border: 0; background: none; color: var(--c-ink); cursor: pointer;
		font: inherit; font-size: var(--t-small); text-decoration: none;
		transition: opacity 0.2s ease;
	}
	.site-footer__link:hover { opacity: 0.7; }   /* no underline; dims a little on hover, like the header links (Jarv, 24 Oct 2026) */
	/* a fine upright line between them, in the gap, like Work | About in the header */
	.site-footer__link + .site-footer__link { position: relative; }
	.site-footer__link + .site-footer__link::before {
		content: ""; position: absolute; left: -10px; top: 50%; width: 1px; height: 14px; margin-top: -7px;
		background: rgba(27, 42, 94, 0.3); pointer-events: none;
	}
	.site-footer__link:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
	@media (min-width: 1024px) { .site-footer__link { font-size: 16px; } }
}