/*
 * Agama — design system
 * =====================
 * Global CSS. Loaded on the front end and inside the block editor.
 *
 * CLASS NAMING — every later brief follows this.
 *   block    .agama-card
 *   element  .agama-card__title
 *   modifier .agama-card--featured
 *   state    .is-revealed  .is-active   (state classes are not prefixed)
 * Do not introduce a second convention.
 *
 * TOKENS
 * All design values come from theme.json. The alias layer below exists only so
 * component rules stay readable — it never introduces a new value. If you need a
 * value that is not aliased here, add it to theme.json first, not to a rule.
 *
 * CONTRAST RULE — enforced, not advisory.
 * `accent` (olive #7C805A, 3.94:1) and `accent-warm` (terracotta #9A6A47, 4.44:1)
 * FAIL WCAG AA against `base`. They are decorative only: rules, eyebrows on dark
 * grounds, fills that carry dark text. Never body text, never link text.
 * Text and links use `ink`, `ink-soft` or `accent-deep`.
 *
 * CONTENTS
 *   1. Alias layer
 *   2. Base + type rhythm
 *   3. Links
 *   4. Buttons
 *   5. Layout + section rhythm
 *   6. Cards
 *   7. Media ratio helpers
 *   8. Focus
 *   9. Motion — reveal, stagger, hover, scroll state
 *  10. Reduced motion
 *  11. Staron colour library
 *  12. Staron mega menu
 *  13. Site sections — hero, figures, process
 *  14. Header
 *  15. Extended motion
 *  16. Editorial layout system (redesign)
 *  17. Polish — colour hierarchy, header, off-canvas
 *  18. Client spec — timeline, pending tiles, trusted row, nav CTA
 *  19. Fit + hero rebalance
 *  20. Site-wide motion layer
 *  21. Header — logo only, wider nav rhythm
 *  22. Motion corrections
 *  23. Responsive — phone
 *  24. Scroll-assembled hero
 */

/* ---------------------------------------------------------------------------
 * 1. Alias layer
 * ------------------------------------------------------------------------- */

:root {
	--agama-base: var(--wp--preset--color--base);
	--agama-surface: var(--wp--preset--color--surface);
	--agama-line: var(--wp--preset--color--line);
	--agama-ink-muted: var(--wp--preset--color--ink-muted);
	--agama-ink-soft: var(--wp--preset--color--ink-soft);
	--agama-ink: var(--wp--preset--color--ink);
	--agama-accent: var(--wp--preset--color--accent);
	--agama-accent-deep: var(--wp--preset--color--accent-deep);
	--agama-accent-warm: var(--wp--preset--color--accent-warm);

	--agama-font-display: var(--wp--preset--font-family--display);
	--agama-font-body: var(--wp--preset--font-family--body);

	--agama-fs-xs: var(--wp--preset--font-size--xs);
	--agama-fs-sm: var(--wp--preset--font-size--sm);
	--agama-fs-base: var(--wp--preset--font-size--base);
	--agama-fs-lg: var(--wp--preset--font-size--lg);
	--agama-fs-xl: var(--wp--preset--font-size--xl);
	--agama-fs-xxl: var(--wp--preset--font-size--xxl);
	--agama-fs-xxxl: var(--wp--preset--font-size--xxxl);
	--agama-fs-display: var(--wp--preset--font-size--display);

	--agama-radius: var(--wp--custom--radius);
	--agama-radius-lg: var(--wp--custom--radius-lg);
	/* Deliberately tighter than the theme.json token, which produced ~145px of
	   padding at each end of every section — nearly 300px between two of them. */
	--agama-section-y: clamp(3rem, 2rem + 3.5vw, 5.5rem);
	--agama-gutter: var(--wp--custom--gutter);
	--agama-measure: var(--wp--custom--container-narrow);

	--agama-tracking-caps: var(--wp--custom--tracking-caps);
	--agama-tracking-wide: var(--wp--custom--tracking-wide);
	--agama-lh-tight: var(--wp--custom--line-height--tight);
	--agama-lh-snug: var(--wp--custom--line-height--snug);
	--agama-lh-body: var(--wp--custom--line-height--body);

	--agama-shadow-sm: var(--wp--custom--shadow--sm);
	--agama-shadow-md: var(--wp--custom--shadow--md);
	--agama-shadow-lg: var(--wp--custom--shadow--lg);

	--agama-ease: var(--wp--custom--ease);
	--agama-t-fast: var(--wp--custom--duration--fast);
	--agama-t-base: var(--wp--custom--duration--base);
	--agama-t-slow: var(--wp--custom--duration--slow);

	/* Component-level, not in theme.json: the card lift duration the Staron
	   brief specifies. Sits between --t-base (320ms) and --t-slow (600ms). */
	--agama-t-lift: 400ms;

	/* Reveal tuning. --agama-stagger-step is read by motion.js as well. */
	--agama-reveal-shift: 1rem;
	--agama-stagger-step: 60ms;
}

/* ---------------------------------------------------------------------------
 * 2. Base + type rhythm
 * ------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Playfair Display is a variable face (400–700), so headings can carry real
   weight. Synthesis stays off: a faked bold ruins a high-contrast display face. */
h1, h2, h3, h4, h5, h6,
.agama-display {
	font-family: var(--agama-font-display);
	font-weight: 500;
	font-synthesis-weight: none;
	line-height: var(--agama-lh-tight);
	text-wrap: balance;
	letter-spacing: -0.01em;
}

h4, h5, h6 {
	line-height: var(--agama-lh-snug);
}

p,
li {
	text-wrap: pretty;
}

/* Optical sizing for the hero. Patterns opt in; not a default. */
.agama-display--hero {
	font-size: var(--agama-fs-display);
	line-height: 0.98;
	letter-spacing: -0.02em;
}

/* Small uppercase label above a heading. */
.agama-eyebrow {
	display: block;
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-wide);
	color: var(--agama-ink-muted);
}

/* Olive is legible at this size only as a non-text-carrying accent mark. */
.agama-eyebrow--accent {
	color: var(--agama-accent-deep);
}

.agama-lead {
	font-size: var(--agama-fs-lg);
	line-height: var(--agama-lh-body);
	color: var(--agama-ink-soft);
}

.agama-muted {
	color: var(--agama-ink-muted);
}

/*
 * Constrain prose to a readable measure inside a wide container.
 *
 * The !important is deliberate and unavoidable. WordPress core ships:
 *
 *   .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
 *       margin-left: auto !important; margin-right: auto !important;
 *   }
 *
 * so every child of a constrained group is force-centred. Elements whose
 * max-width matches the container are unaffected, which is why headings looked
 * fine — but every narrower lead paragraph was shunted into the middle of the
 * page and read as broken alignment. Physical properties are used here to match
 * core's own declaration head-on.
 */
.agama-measure {
	max-width: var(--agama-measure);
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Letterspaced small caps — product codes, spec labels. */
.agama-code {
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-caps);
	color: var(--agama-ink-muted);
}

.agama-rule {
	border: 0;
	border-top: 1px solid var(--agama-line);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 3. Links
 * ------------------------------------------------------------------------- */

/* Underline-draw. Uses background-size rather than a pseudo-element so it works
   across line wraps. Not applied globally — patterns opt in with .agama-link. */
.agama-link {
	color: var(--agama-ink);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size var(--agama-t-base) var(--agama-ease),
		color var(--agama-t-fast) var(--agama-ease);
	padding-bottom: 0.08em;
}

.agama-link:hover,
.agama-link:focus-visible {
	background-size: 100% 1px;
	color: var(--agama-accent-deep);
}

/* Persistent underline that retracts instead — for links inside body copy. */
.agama-link--reverse {
	background-size: 100% 1px;
}

.agama-link--reverse:hover,
.agama-link--reverse:focus-visible {
	background-size: 0% 1px;
}

/* ---------------------------------------------------------------------------
 * 4. Buttons
 * ------------------------------------------------------------------------- */

/*
 * Two ways to use these:
 *   1. A plain <a class="agama-btn agama-btn--primary"> inside a pattern.
 *   2. Add "agama-btn agama-btn--primary" as an Additional CSS Class on a core
 *      Button block. The rule targets the inner .wp-block-button__link, which
 *      out-specifies Blocksy's own button styling without !important.
 *
 * Blocksy also styles buttons from its Customizer (buttonColor / buttonTextColor
 * are already set to our tokens), so unstyled core buttons are on-brand too.
 * Reach for these classes when a section needs a specific variant.
 */

.agama-btn,
.agama-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625em;
	position: relative;
	overflow: hidden;
	padding: 0.9em 1.9em;
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: var(--agama-tracking-caps);
	border: 1px solid transparent;
	border-radius: var(--agama-radius);
	cursor: pointer;
	transition: background-color var(--agama-t-base) var(--agama-ease),
		border-color var(--agama-t-base) var(--agama-ease),
		color var(--agama-t-base) var(--agama-ease),
		transform var(--agama-t-base) var(--agama-ease),
		box-shadow var(--agama-t-base) var(--agama-ease);
}

/* Sheen. A single pass of light across the face on hover. */
.agama-btn:not(.wp-block-button)::before,
.agama-btn > .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		100deg,
		transparent 20%,
		rgba(251, 250, 244, 0.18) 50%,
		transparent 80%
	);
	pointer-events: none;
}

.agama-btn:not(.wp-block-button):hover::before,
.agama-btn > .wp-block-button__link:hover::before {
	transform: translateX(100%);
	transition: transform var(--agama-t-slow) var(--agama-ease);
}

/*
 * When the class sits on a core Button block, the WRAPPER is div.wp-block-button
 * and the styled element is the inner <a>. Without this the wrapper also picked
 * up the padding, border and background — which is what produced the ghost
 * button's full-width underline and the doubled arrow.
 */
.agama-btn.wp-block-button {
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}

/* Primary — accent-deep, the AA-safe accent. Never olive. */
.agama-btn--primary,
.agama-btn--primary > .wp-block-button__link {
	background-color: var(--agama-accent-deep);
	color: var(--agama-base);
}

.agama-btn--primary:hover,
.agama-btn--primary:focus-visible,
.agama-btn--primary > .wp-block-button__link:hover,
.agama-btn--primary > .wp-block-button__link:focus-visible {
	background-color: var(--agama-ink);
	color: var(--agama-base);
	box-shadow: var(--agama-shadow-md);
}

/* Secondary — hairline outline that fills on hover. */
.agama-btn--secondary,
.agama-btn--secondary > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--agama-ink);
	color: var(--agama-ink);
}

.agama-btn--secondary:hover,
.agama-btn--secondary:focus-visible,
.agama-btn--secondary > .wp-block-button__link:hover,
.agama-btn--secondary > .wp-block-button__link:focus-visible {
	background-color: var(--agama-ink);
	color: var(--agama-base);
}

/* Ghost — text only, rule appears beneath on hover. */
.agama-btn--ghost,
.agama-btn--ghost > .wp-block-button__link {
	background-color: transparent;
	border-color: transparent;
	border-bottom-color: var(--agama-line);
	border-radius: 0;
	padding-inline: 0;
	padding-bottom: 0.7em;
	color: var(--agama-ink);
}

.agama-btn--ghost:hover,
.agama-btn--ghost:focus-visible,
.agama-btn--ghost > .wp-block-button__link:hover,
.agama-btn--ghost > .wp-block-button__link:focus-visible {
	border-bottom-color: var(--agama-ink);
	color: var(--agama-ink);
}

/* On a dark ground, primary inverts. */
.agama-btn--on-dark,
.agama-btn--on-dark > .wp-block-button__link {
	background-color: var(--agama-base);
	color: var(--agama-ink);
}

.agama-btn--on-dark:hover,
.agama-btn--on-dark > .wp-block-button__link:hover {
	background-color: var(--agama-accent);
	color: var(--agama-ink);
}

/* Arrow nudge. Add alongside any variant. */
.agama-btn--arrow:not(.wp-block-button)::after,
.agama-btn--arrow > .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	transition: transform var(--agama-t-base) var(--agama-ease);
}

.agama-btn--arrow:not(.wp-block-button):hover::after,
.agama-btn--arrow > .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
 * 5. Layout + section rhythm
 * ------------------------------------------------------------------------- */

.agama-section {
	padding-block: var(--agama-section-y);
}

.agama-section--tight {
	padding-block: calc(var(--agama-section-y) * 0.55);
}

.agama-section--flush-top {
	padding-block-start: 0;
}

.agama-section--flush-bottom {
	padding-block-end: 0;
}

.agama-section--surface {
	background-color: var(--agama-surface);
	padding-inline: clamp(1.5rem, 4vw, 3.5rem);
	border-radius: var(--agama-radius);
}

.agama-section--dark {
	background-color: var(--agama-ink);
	color: var(--agama-base);
	padding-inline: clamp(1.5rem, 4vw, 3.5rem);
	border-radius: var(--agama-radius);
}

/* Give the closing band real vertical rhythm — heading, supporting line and
   button were running together. */
.agama-section--dark > h2 {
	margin-block: 0.35rem 0.9rem;
}

.agama-section--dark > p + .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

.agama-section--dark h1,
.agama-section--dark h2,
.agama-section--dark h3,
.agama-section--dark h4,
.agama-section--dark h5,
.agama-section--dark h6 {
	color: var(--agama-base);
}

/* Olive on ink measures only 3.90:1, which fails AA even for a small label —
   so the eyebrow on a dark ground uses the light neutral instead. Olive stays
   available on dark for rules and non-text marks, where contrast is not a
   legibility question. */
.agama-section--dark .agama-eyebrow {
	color: var(--agama-line);
}

.agama-section--dark .agama-rule {
	border-top-color: rgba(251, 250, 244, 0.16);
}

/* Hairline separator between stacked sections. */
.agama-section--ruled {
	border-block-start: 1px solid var(--agama-line);
}

/* Two PLAIN sections stacked together produced ~2x the intended gap. Collapse
   that seam only — a section that changes ground (surface/dark/ruled) still
   needs its own padding, or the tint runs straight into the next heading. */
.agama-section:not(.agama-section--surface):not(.agama-section--dark):not(.agama-section--ruled)
	+ .agama-section:not(.agama-section--surface):not(.agama-section--dark):not(.agama-section--ruled) {
	padding-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * 6. Cards
 * ------------------------------------------------------------------------- */

.agama-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--agama-base);
	border: 1px solid var(--agama-line);
	border-radius: var(--agama-radius);
	overflow: hidden;
	transition: transform var(--agama-t-lift) var(--agama-ease),
		box-shadow var(--agama-t-lift) var(--agama-ease),
		border-color var(--agama-t-lift) var(--agama-ease);
}

.agama-card:hover,
.agama-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--agama-shadow-md);
	border-color: var(--agama-line);
}

/* Media sits flush to the card's top edge. */
.agama-card__media {
	position: relative;
	overflow: hidden;
	background-color: var(--agama-surface);
}

.agama-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--agama-t-slow) var(--agama-ease);
}

.agama-card:hover .agama-card__media img {
	transform: scale(1.03);
}

.agama-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--40);
}

.agama-card__title {
	font-family: var(--agama-font-display);
	font-size: var(--agama-fs-lg);
	font-weight: 400;
	line-height: var(--agama-lh-snug);
	margin: 0;
}

/* A linked card title picked up Blocksy's global link colour, so a card with a
   destination looked a different colour from one without. The whole card is the
   affordance — the title should read identically either way. */
.agama-card__title a,
.agama-card__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--agama-t-fast) var(--agama-ease);
}

.agama-card:hover .agama-card__title a,
.agama-card:hover .agama-card__link {
	color: var(--agama-accent-deep);
}

.agama-section--dark .agama-card:hover .agama-card__link {
	color: var(--agama-accent);
}

.agama-card__meta {
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-caps);
	color: var(--agama-ink-muted);
}

/* Stretched link — makes the whole card clickable while keeping one real <a>
   in the markup for screen readers and keyboard users. */
.agama-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Small uppercase pill. Olive fill carrying ink text passes contrast. */
.agama-badge {
	display: inline-block;
	padding: 0.35em 0.7em;
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-caps);
	background-color: var(--agama-accent);
	color: var(--agama-ink);
	border-radius: var(--agama-radius);
}

/* max-content + the margin reset are load-bearing: core forces
   `margin-left/right: auto !important` on every constrained child, which
   stretched the ribbon into a full-width bar across the top of each card
   instead of a pill. */
.agama-badge--ribbon {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-start: var(--wp--preset--spacing--30);
	inset-inline-end: auto;
	width: max-content;
	max-width: calc(100% - 2 * var(--wp--preset--spacing--30));
	margin: 0 !important;
	z-index: 2;
}

/* ---------------------------------------------------------------------------
 * 7. Media ratio helpers
 * ------------------------------------------------------------------------- */

.agama-ratio {
	position: relative;
	display: block;
	overflow: hidden;
}

.agama-ratio > img,
.agama-ratio > video,
.agama-ratio > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.agama-ratio--1x1 { aspect-ratio: 1 / 1; }
.agama-ratio--4x3 { aspect-ratio: 4 / 3; }
.agama-ratio--3x2 { aspect-ratio: 3 / 2; }
.agama-ratio--16x9 { aspect-ratio: 16 / 9; }
.agama-ratio--3x4 { aspect-ratio: 3 / 4; }
.agama-ratio--4x5 { aspect-ratio: 4 / 5; }

/* ---------------------------------------------------------------------------
 * 8. Focus
 * ------------------------------------------------------------------------- */

/* Visible for keyboard users, absent for mouse users. accent-deep is the only
   accent that clears AA, so it is the focus colour. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--agama-accent-deep);
	outline-offset: 3px;
	border-radius: var(--agama-radius);
}

.agama-section--dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--agama-accent);
}

/* Skip link is only visible once focused. */
.agama-skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 9. Motion
 * ------------------------------------------------------------------------- */

/*
 * The hidden-before-reveal state is gated behind .agama-js, which a tiny
 * blocking script in <head> adds. Without JavaScript the class is never added
 * and every [data-reveal] element renders normally — content is never trapped
 * invisible by a script that failed to load.
 *
 * motion.js adds .is-revealed. See inc/patterns.php for the full API.
 */

.agama-js [data-reveal] {
	opacity: 0;
	transform: translateY(var(--agama-reveal-shift));
	transition: opacity var(--agama-t-slow) var(--agama-ease),
		transform var(--agama-t-slow) var(--agama-ease);
	transition-delay: calc(var(--i, 0) * var(--agama-stagger-step));
	will-change: opacity, transform;
}

.agama-js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Variants: pick the direction the element arrives from. */
.agama-js [data-reveal="left"] { transform: translateX(calc(var(--agama-reveal-shift) * -1)); }
.agama-js [data-reveal="right"] { transform: translateX(var(--agama-reveal-shift)); }
.agama-js [data-reveal="scale"] { transform: scale(0.97); }
.agama-js [data-reveal="fade"] { transform: none; }

.agama-js [data-reveal="left"].is-revealed,
.agama-js [data-reveal="right"].is-revealed,
.agama-js [data-reveal="scale"].is-revealed { transform: none; }

/* Generic hover lift for anything that is not a card. */
.agama-lift {
	transition: transform var(--agama-t-lift) var(--agama-ease),
		box-shadow var(--agama-t-lift) var(--agama-ease);
}

.agama-lift:hover,
.agama-lift:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--agama-shadow-md);
}

/* Scroll state. motion.js sets .is-scrolled on <html> past the threshold.
   Blocksy owns sticky positioning — this only supplies the state flag. */
.is-scrolled [data-sticky-shrink] {
	box-shadow: var(--agama-shadow-sm);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	transition: box-shadow var(--agama-t-base) var(--agama-ease),
		backdrop-filter var(--agama-t-base) var(--agama-ease);
}

/* Count-up figures hold their box so the layout does not jump while counting. */
[data-count-up] {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 10. Reduced motion
 * ------------------------------------------------------------------------- */

/*
 * Kills motion outright rather than softening it. Reveal elements are forced
 * visible, so nothing depends on an observer that motion.js will not start.
 */
@media (prefers-reduced-motion: reduce) {
	.agama-js [data-reveal],
	.agama-js [data-reveal].is-revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.agama-btn:not(.wp-block-button)::before,
	.agama-btn > .wp-block-button__link::before {
		display: none;
	}

	.agama-card:hover,
	.agama-card:focus-within,
	.agama-lift:hover,
	.agama-lift:focus-within {
		transform: none;
	}

	.agama-card:hover .agama-card__media img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 11. Staron colour library
 * ---------------------------------------------------------------------------
 * Modifiers on the existing card, not a second card system. .agama-card already
 * supplies the border, 2px radius, hover lift (translateY(-4px), shadow bloom,
 * 400ms, --agama-ease) and flush-top media that this section needs.
 * ------------------------------------------------------------------------- */

/* --- Swatch ------------------------------------------------------------- */

.agama-swatch {
	display: block;
	width: 100%;
	background-color: var(--agama-surface);
}

.agama-colour-card .agama-swatch,
.agama-colour-card .wp-block-post-featured-image {
	margin: 0;
}

/* The swatch fills the card top edge-to-edge, ratio locked so a grid of 43
   cards is perfectly regular regardless of what the client uploads. */
.agama-colour-card .wp-block-post-featured-image img,
.agama-colour-card .agama-swatch img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/*
 * Placeholder. Deliberately NOT a flat fill of the approximate hex — a tinted
 * square reads as the product, and on a surfaces site that means a client
 * orders the wrong material. The tint is a faint wash behind an explicit
 * label, so the tile always reads as missing rather than as the colour.
 */
.agama-swatch--placeholder {
	position: relative;
	display: grid;
	place-items: center;
	background-color: var(--agama-surface);
	background-image:
		linear-gradient(135deg, rgba(32, 34, 27, 0.035) 25%, transparent 25%, transparent 50%,
			rgba(32, 34, 27, 0.035) 50%, rgba(32, 34, 27, 0.035) 75%, transparent 75%);
	background-size: 12px 12px;
	border-bottom: 1px solid var(--agama-line);
}

.agama-swatch--placeholder[style*="--agama-swatch-tint"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--agama-swatch-tint);
	opacity: 0.14;
}

.agama-swatch__label {
	position: relative;
	z-index: 1;
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-caps);
	color: var(--agama-ink-muted);
	background-color: var(--agama-base);
	border: 1px solid var(--agama-line);
	border-radius: var(--agama-radius);
	padding: 0.4em 0.7em;
}

/* --- Colour card -------------------------------------------------------- */

.agama-colour-card .agama-card__body,
.agama-colour-card .wp-block-group {
	gap: 0.3rem;
}

/* Collection name in the serif face; code in the sans, small, letterspaced,
   muted. ink-muted, never olive — olive fails AA as text. */
.agama-colour-card__code {
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-caps);
	color: var(--agama-ink-muted);
}

/* A colour with no code yet shows nothing rather than an empty gap. */
.agama-colour-card__code:empty {
	display: none;
}

.agama-colour-card[hidden] {
	display: none !important;
}

/* --- Grids -------------------------------------------------------------- */

.agama-colour-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

.agama-collection-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Core's constrained layout adds margin-block-start to every child, which
   knocks grid items out of alignment with each other. */
.agama-collection-grid > *,
.agama-colour-grid > * {
	margin-block: 0 !important;
	height: 100%;
}

/* Body fills the remaining height so every card's border ends on the same line. */
.agama-card__body {
	flex: 1 1 auto;
}

/* --- Filter bar --------------------------------------------------------- */

.agama-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--agama-line);
}

.agama-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agama-filter__chip {
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-caps);
	color: var(--agama-ink-soft);
	background-color: transparent;
	border: 1px solid var(--agama-line);
	border-radius: var(--agama-radius);
	padding: 0.55em 1em;
	cursor: pointer;
	transition: background-color var(--agama-t-fast) var(--agama-ease),
		border-color var(--agama-t-fast) var(--agama-ease),
		color var(--agama-t-fast) var(--agama-ease);
}

.agama-filter__chip:hover {
	border-color: var(--agama-ink-muted);
}

.agama-filter__chip[aria-pressed="true"] {
	background-color: var(--agama-ink);
	border-color: var(--agama-ink);
	color: var(--agama-base);
}

.agama-filter__search {
	flex: 1 1 14rem;
	min-width: 0;
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-sm);
	color: var(--agama-ink);
	background-color: var(--agama-base);
	border: 1px solid var(--agama-line);
	border-radius: var(--agama-radius);
	padding: 0.7em 0.9em;
}

.agama-filter__count {
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-caps);
	color: var(--agama-ink-muted);
	margin: 0;
}

/* --- Empty state -------------------------------------------------------- */

.agama-empty-state {
	grid-column: 1 / -1;
	padding: var(--wp--preset--spacing--50);
	text-align: center;
	color: var(--agama-ink-muted);
	background-color: var(--agama-surface);
	border: 1px dashed var(--agama-line);
	border-radius: var(--agama-radius);
}

/* --- Single colour ------------------------------------------------------ */

.agama-colour-single__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.agama-colour-single__spec {
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-caps);
	color: var(--agama-ink-soft);
	border: 1px solid var(--agama-line);
	border-radius: var(--agama-radius);
	padding: 0.45em 0.8em;
}

/* ---------------------------------------------------------------------------
 * 12. Staron mega menu
 * ---------------------------------------------------------------------------
 * Blocksy Pro is not installed, so this styles Blocksy's existing sub-menu
 * markup into a multi-column panel. The menu items stay real WordPress menu
 * items the client edits in Appearance -> Menus.
 * ------------------------------------------------------------------------- */

@media (min-width: 1000px) {
	/*
	 * The panel anchors to the Staron menu item itself. A previous attempt used
	 * `position: static` here, which made the absolutely-positioned sub-menu
	 * resolve against a far ancestor — the panel then ran straight off the right
	 * edge of the screen and Metallic, Terrazzo, Eclipse and All colours were
	 * unreachable. Anchoring to the item and capping the width keeps it on screen
	 * at any viewport.
	 */
	.agama-mega {
		position: relative;
	}

	.agama-mega.ct-active > .sub-menu,
	.agama-mega:hover > .sub-menu,
	.agama-mega:focus-within > .sub-menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(9rem, 1fr));
		gap: 0.1rem 1.5rem;
		width: max-content;
		max-width: min(34rem, calc(100vw - 3rem));
		padding: 1.25rem 1.5rem;
		background-color: var(--agama-base);
		border: 1px solid var(--agama-line);
		border-radius: var(--agama-radius);
		box-shadow: var(--agama-shadow-md);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		/* Nudge left so a wide panel never clips the viewport edge. */
		inset-inline-start: 50%;
		translate: -50% 0;
	}

	.agama-mega > .sub-menu > li > a {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding-block: 0.5rem;
		padding-inline: 0.6rem;
		border-radius: var(--agama-radius);
		white-space: nowrap;
	}

	.agama-mega > .sub-menu > li > a:hover {
		background-color: var(--agama-surface);
	}

	/* "All colours" closes the list — give it a rule above and full width. */
	.agama-mega > .sub-menu > li:last-child {
		grid-column: 1 / -1;
		margin-block-start: 0.4rem;
		padding-block-start: 0.5rem;
		border-block-start: 1px solid var(--agama-line);
	}

	.agama-mega > .sub-menu > li:last-child > a {
		font-weight: 600;
	}

	/* Colour chip beside a collection name — only rendered when a real term
	   image exists. No coloured <div> guesses. */
	.agama-mega__chip {
		flex: 0 0 auto;
		width: 1.75rem;
		height: 1.75rem;
		object-fit: cover;
		border: 1px solid var(--agama-line);
		border-radius: var(--agama-radius);
	}
}

@media (prefers-reduced-motion: reduce) {
	.agama-filter__chip,
	.agama-colour-card {
		transition: none !important;
	}
}

/* --- Single colour layout ----------------------------------------------- */

.agama-colour-single__layout {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (min-width: 800px) {
	.agama-colour-single__layout {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}

	/* The swatch stays in view while the spec column scrolls. */
	.agama-colour-single__media {
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
}

.agama-colour-single__media img,
.agama-colour-single__media .agama-swatch {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--agama-line);
	border-radius: var(--agama-radius);
}

.agama-colour-single__info > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.agama-colour-single__info h1 {
	font-size: var(--agama-fs-xxxl);
	margin: 0;
}

.agama-colour-single__content {
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (prefers-reduced-motion: reduce) {
	.agama-colour-single__media {
		position: static;
	}
}

/* ---------------------------------------------------------------------------
 * 13. Site sections — hero, figures, process
 * ------------------------------------------------------------------------- */

.agama-hero {
	padding-block: calc(var(--agama-section-y) * 0.85) var(--agama-section-y);
}

.agama-hero .agama-display--hero {
	margin-block: 0.15em 0.3em;
}

/*
 * Editorial images are capped by VIEWPORT height, not just ratio. A 4:5 ratio
 * on a 620px column resolves to ~775px tall, which dwarfed the text beside it
 * and left a large dead gap under the buttons. Capping to a share of the
 * viewport keeps the pair balanced at any width.
 */
.agama-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 62vh;
	object-fit: cover;
	border-radius: var(--agama-radius);
}

.agama-section .wp-block-columns > .wp-block-column > .wp-block-image img {
	max-height: 58vh;
	object-fit: cover;
	border-radius: var(--agama-radius);
}

/* Both hero columns share a baseline instead of floating independently. */
.agama-hero__grid {
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

/* --- Figures strip ------------------------------------------------------- */

.agama-stat__num {
	font-family: var(--agama-font-display);
	font-size: var(--agama-fs-xxxl);
	font-weight: 400;
	line-height: 1;
	margin: 0 0 0.25em;
	color: var(--agama-ink);
}

.agama-stat__label {
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-caps);
	color: var(--agama-ink-muted);
	margin: 0;
}

/* --- Process steps ------------------------------------------------------- */

.agama-step__num {
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	font-weight: 600;
	letter-spacing: var(--agama-tracking-wide);
	color: var(--agama-accent-deep);
	margin: 0 0 0.9rem;
	padding-block-end: 0.9rem;
	border-block-end: 1px solid var(--agama-line);
}

/* --- Section heads ------------------------------------------------------- */

/* Consistent rhythm between an eyebrow, its heading and the grid below. */
.agama-section > .agama-eyebrow + h2 {
	margin-block: 0.4rem 0;
}

.agama-section > h2 + .wp-block-columns,
.agama-section > h2 + .wp-block-group,
.agama-section > .agama-lead + .wp-block-group {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Cards used outside the colour library still get flush-top media. */
.agama-card > .wp-block-image {
	margin: 0;
}

.agama-card > .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--agama-t-slow) var(--agama-ease);
}

.agama-card:hover > .wp-block-image img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.agama-card:hover > .wp-block-image img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 14. Header
 * ---------------------------------------------------------------------------
 * Blocksy's header builder lives in a nested Customizer structure that is not
 * safely scriptable, so its LOOK is set here against the real markup. The
 * structure, menu and logo all stay editable in the Customizer as normal.
 * ------------------------------------------------------------------------- */

/*
 * TRANSPARENT AT TOP, SOLID ON SCROLL.
 *
 * Blocksy paints the header background on the ROW:
 *
 *   [data-header*="type-1"] header.ct-header [data-row*="middle"] {
 *       background-color: var(--theme-palette-color-8);   // #FFFFFF
 *       --height: 120px;
 *   }
 *
 * That is (0,3,0) AND it sits in ct-main-styles-inline-css, printed after this
 * stylesheet — so an equally-specific rule loses. The leading `body` takes us to
 * (0,3,1) and wins on merit rather than with !important.
 */
body[data-header] header.ct-header [data-row],
body[data-header] header.ct-header [data-row*="middle"] {
	background-color: transparent;
	--height: 84px;
	transition: background-color var(--agama-t-base) var(--agama-ease);
}

/*
 * Sticky, but only while Blocksy's own sticky is off. Blocksy stamps
 * [data-sticky] on the header when its Customizer setting is enabled, so if the
 * client turns that on this rule stands down rather than running two sticky
 * implementations against each other.
 */
/*
 * #header, not header.ct-header. Blocksy declares
 *
 *   #header { position: relative; z-index: 50 }
 *
 * with an ID — (1,0,0) — which outranks any class-and-element selector we can
 * write. This rule was `header.ct-header:not([data-sticky])` at (0,2,1) and so
 * lost silently: the header was never sticky at all, it just scrolled away with
 * the page. Matching on the same ID takes us to (1,2,1) and wins on merit.
 *
 * The ID also keeps the off-canvas panel out of it — it shares the .ct-header
 * class but has id="offcanvas".
 */
#header.ct-header:not([data-sticky]) {
	position: sticky;
	top: 0;
	z-index: 100;
	border-block-end: 1px solid transparent;
	transition: box-shadow var(--agama-t-base) var(--agama-ease),
		border-color var(--agama-t-base) var(--agama-ease);
}

/* motion.js adds .is-scrolled to <html> past 24px. */
.is-scrolled #header.ct-header:not([data-sticky]) {
	border-block-end-color: var(--agama-line);
	box-shadow: var(--agama-shadow-sm);
}

/*
 * Opaque once scrolled, not a blurred veil. At 85% the page showed through
 * hard enough that the header stopped reading as a fixed bar — over the dark
 * hero especially, where a light photograph sliding under it kept changing the
 * apparent colour of the nav. Solid base also drops the backdrop-filter, which
 * was repainting a blur on every scroll frame for no remaining benefit.
 */
.is-scrolled body[data-header] header.ct-header [data-row],
.is-scrolled body[data-header] header.ct-header [data-row*="middle"] {
	background-color: var(--agama-base);
}

/* Logo mark and wordmark sit side by side, not stacked. */
header.ct-header .site-branding {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.7rem;
}

header.ct-header .site-logo-container img {
	display: block;
	width: auto;
	height: 40px;
}

/* Wordmark — tightened and slightly smaller so it reads as a mark, not a headline. */
header.ct-header .site-title,
header.ct-header .site-title a {
	font-family: var(--agama-font-body);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--agama-ink);
	text-decoration: none;
}

header.ct-header .site-title a:hover {
	color: var(--agama-accent-deep);
}

/* Navigation — smaller, wider-tracked, quieter until hovered. */
header.ct-header .menu .ct-menu-link {
	font-family: var(--agama-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--agama-ink-soft);
	transition: color var(--agama-t-fast) var(--agama-ease);
}

header.ct-header .menu > li > .ct-menu-link,
header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
	position: relative;
	padding-block: 0.35em;
}

/* Underline grows from the left on hover and stays for the current page. */
header.ct-header .menu > li > .ct-menu-link::after,
header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link::after {
	content: "";
	position: absolute;
	inset-inline: 0 auto;
	inset-block-end: 0;
	width: 0;
	height: 1px;
	background-color: currentColor;
	transition: width var(--agama-t-base) var(--agama-ease);
}

header.ct-header .menu > li:hover > .ct-menu-link::after,
header.ct-header .menu > li:focus-within > .ct-menu-link::after,
header.ct-header .menu > li:hover > .ct-sub-menu-parent > .ct-menu-link::after,
header.ct-header .menu > li.current-menu-item > .ct-menu-link::after,
header.ct-header .menu > li.current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link::after {
	width: 100%;
}

header.ct-header .menu > li:hover > .ct-menu-link,
header.ct-header .menu > li.current-menu-item > .ct-menu-link,
header.ct-header .menu > li.current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link {
	color: var(--agama-ink);
}

/* Sub-menu links sit inside the mega panel and need the normal case back. */
header.ct-header .sub-menu .ct-menu-link {
	font-size: 0.8125rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--agama-ink-soft);
	padding-block: 0.5em;
}

header.ct-header .sub-menu .ct-menu-link:hover {
	color: var(--agama-ink);
}

@media (prefers-reduced-motion: reduce) {
	header.ct-header .menu > li > .ct-menu-link::after,
	header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link::after {
		transition: none;
	}
}

/* --- Clickable cards ----------------------------------------------------- */

/*
 * A card containing .agama-card__link is entirely clickable via the stretched
 * pseudo-element, so it must LOOK clickable too — an image and a title with no
 * affordance reads as static content, which is exactly the complaint that
 * prompted this.
 */
.agama-card:has(.agama-card__link) {
	cursor: pointer;
}

.agama-card:has(.agama-card__link) .agama-card__title::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.4em;
	opacity: 0;
	transform: translateX(-0.25em);
	transition: opacity var(--agama-t-base) var(--agama-ease),
		transform var(--agama-t-base) var(--agama-ease);
}

.agama-card:has(.agama-card__link):hover .agama-card__title::after,
.agama-card:has(.agama-card__link):focus-within .agama-card__title::after {
	opacity: 1;
	transform: translateX(0);
}

/* Keyboard users get the ring on the card, not just the hidden link. */
.agama-card:focus-within {
	outline: 2px solid var(--agama-accent-deep);
	outline-offset: 3px;
}

.agama-card__link:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.agama-card:has(.agama-card__link) .agama-card__title::after {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * 15. Extended motion
 * ---------------------------------------------------------------------------
 * Everything here is additive and every rule is cancelled by the
 * prefers-reduced-motion block at the end of this section.
 * ------------------------------------------------------------------------- */

/* --- Hero entrance: children arrive in sequence on load, not on scroll --- */

.agama-js .agama-hero [data-reveal] > * {
	opacity: 0;
	transform: translateY(0.75rem);
	animation: agama-rise 0.9s var(--agama-ease) forwards;
	animation-delay: calc(var(--agama-stagger-step) * var(--n, 0) + 120ms);
}

.agama-js .agama-hero [data-reveal] > *:nth-child(1) { --n: 0; }
.agama-js .agama-hero [data-reveal] > *:nth-child(2) { --n: 1; }
.agama-js .agama-hero [data-reveal] > *:nth-child(3) { --n: 2; }
.agama-js .agama-hero [data-reveal] > *:nth-child(4) { --n: 3; }
.agama-js .agama-hero [data-reveal] > *:nth-child(5) { --n: 4; }

@keyframes agama-rise {
	to {
		opacity: 1;
		transform: none;
	}
}

/* The hero image resolves from a slight scale rather than sliding. */
.agama-js .agama-hero__media {
	overflow: hidden;
	border-radius: var(--agama-radius);
}

.agama-js .agama-hero__media img {
	animation: agama-settle 1.4s var(--agama-ease) forwards;
}

@keyframes agama-settle {
	from { opacity: 0; transform: scale(1.06); }
	to   { opacity: 1; transform: none; }
}

/* --- Mega menu panel transition ------------------------------------------ */

@media (min-width: 1000px) {
	.agama-mega > .sub-menu {
		transform-origin: top center;
		transition: opacity var(--agama-t-fast) var(--agama-ease),
			translate var(--agama-t-base) var(--agama-ease);
	}

	.agama-mega.ct-active > .sub-menu,
	.agama-mega:hover > .sub-menu,
	.agama-mega:focus-within > .sub-menu {
		animation: agama-panel 0.28s var(--agama-ease);
	}

	@keyframes agama-panel {
		from { opacity: 0; translate: -50% -6px; }
		to   { opacity: 1; translate: -50% 0; }
	}

	/* Panel items cascade in behind it. */
	.agama-mega.ct-active > .sub-menu > li,
	.agama-mega:hover > .sub-menu > li,
	.agama-mega:focus-within > .sub-menu > li {
		animation: agama-rise 0.4s var(--agama-ease) backwards;
	}

	.agama-mega > .sub-menu > li:nth-child(1)  { animation-delay: 40ms; }
	.agama-mega > .sub-menu > li:nth-child(2)  { animation-delay: 70ms; }
	.agama-mega > .sub-menu > li:nth-child(3)  { animation-delay: 100ms; }
	.agama-mega > .sub-menu > li:nth-child(4)  { animation-delay: 130ms; }
	.agama-mega > .sub-menu > li:nth-child(5)  { animation-delay: 160ms; }
	.agama-mega > .sub-menu > li:nth-child(6)  { animation-delay: 190ms; }
	.agama-mega > .sub-menu > li:nth-child(7)  { animation-delay: 220ms; }
	.agama-mega > .sub-menu > li:nth-child(8)  { animation-delay: 250ms; }
	.agama-mega > .sub-menu > li:nth-child(n+9) { animation-delay: 280ms; }
}

/* --- Parallax ------------------------------------------------------------ */

/* motion.js writes --p (-1 … 1) as the element crosses the viewport. */
[data-parallax] {
	will-change: transform;
}

[data-parallax] img {
	transform: translate3d(0, calc(var(--p, 0) * 1.8rem), 0) scale(1.06);
	transition: transform 90ms linear;
}

/* --- Section headings ---------------------------------------------------- */

/* Eyebrow gets a short rule that draws in with the section. */
.agama-eyebrow {
	position: relative;
}

.agama-js [data-reveal] .agama-eyebrow::after,
.agama-js .agama-eyebrow[data-reveal]::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 1px;
	margin-inline-start: 0.8em;
	vertical-align: middle;
	background-color: currentColor;
	opacity: 0.4;
	transition: width 0.7s var(--agama-ease) 0.15s;
}

.agama-js [data-reveal].is-revealed .agama-eyebrow::after,
.agama-js .agama-eyebrow[data-reveal].is-revealed::after {
	width: 2.5rem;
}

/* --- Figures ------------------------------------------------------------- */

.agama-stat__num {
	transition: color var(--agama-t-base) var(--agama-ease);
}

/* --- Links --------------------------------------------------------------- */

.ct-footer a,
.agama-card__meta a {
	transition: color var(--agama-t-fast) var(--agama-ease);
}

/* --- Reduced motion: cancel ALL of the above ----------------------------- */

@media (prefers-reduced-motion: reduce) {
	.agama-js .agama-hero [data-reveal] > *,
	.agama-js .agama-hero__media img,
	.agama-mega > .sub-menu,
	.agama-mega > .sub-menu > li {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	[data-parallax] img {
		transform: none !important;
		transition: none !important;
	}

	.agama-js [data-reveal] .agama-eyebrow::after,
	.agama-js .agama-eyebrow[data-reveal]::after {
		transition: none;
		width: 2.5rem;
	}
}

/* ---------------------------------------------------------------------------
 * 16. Editorial layout system  (redesign)
 * ---------------------------------------------------------------------------
 * The earlier layout kept every section inside one 1280px column and drew a
 * hairline box around every card. That reads as a template. This section adds
 * the primitives an editorial build actually needs: true full-bleed bands,
 * asymmetric splits, an index list, and borderless image tiles.
 *
 * Full-bleed uses core's own `alignfull`, which is EXEMPT from
 * `.is-layout-constrained > :where(:not(.alignfull))` and therefore escapes the
 * max-width without any 100vw arithmetic. Blocksy's content wrapper
 * (.ct-container-full) carries no width rules, so alignfull genuinely reaches
 * the viewport edge. An earlier hand-rolled 100vw attempt broke the layout;
 * this is the supported route.
 * ------------------------------------------------------------------------- */

:root {
	--agama-inner: 1320px;
	--agama-pad: clamp(1.25rem, 5vw, 5rem);
	--agama-fs-hero: clamp(2.75rem, 1rem + 7.2vw, 7rem);
	--agama-rule: 1px solid var(--agama-line);
}

/* Inner measure for anything inside a bleed band. */
.agama-inner {
	max-width: var(--agama-inner);
	margin-inline: auto !important;
	padding-inline: var(--agama-pad);
	width: 100%;
}

/* Bands own their vertical rhythm; the page no longer double-pads. */
.agama-band {
	padding-block: clamp(3.5rem, 2rem + 5vw, 7.5rem);
}

.agama-band--tight { padding-block: clamp(2rem, 1rem + 3vw, 4rem); }
.agama-band--flush { padding-block: 0; }
.agama-band--ink { background-color: var(--agama-ink); color: var(--agama-base); }
.agama-band--surface { background-color: var(--agama-surface); }
.agama-band--rule { border-block-start: var(--agama-rule); }

.agama-band--ink h1,
.agama-band--ink h2,
.agama-band--ink h3 { color: var(--agama-base); }

.agama-band--ink .agama-eyebrow { color: var(--agama-line); }
.agama-band--ink .agama-muted { color: color-mix(in srgb, var(--agama-base) 62%, transparent); }

/* --- Hero ---------------------------------------------------------------- */

.agama-hero2 {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: end;
	min-height: min(82vh, 780px);
	padding-block: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 4vw, 4.5rem);
}

@media (min-width: 900px) {
	.agama-hero2 {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
	}
}

.agama-hero2__title {
	font-size: var(--agama-fs-hero) !important;
	line-height: 0.94;
	letter-spacing: -0.03em;
	margin-block: 0.15em 0.45em;
	max-width: 14ch;
}

.agama-hero2__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: 70vh;
	object-fit: cover;
}

/* --- Asymmetric split ---------------------------------------------------- */

.agama-split2 {
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.agama-split2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.agama-split2--flip > *:first-child { order: 2; }
}

.agama-split2 img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --- Index list (services, process) -------------------------------------- */

.agama-index { border-block-start: var(--agama-rule); }

.agama-index__row {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: 0 clamp(1rem, 3vw, 2.5rem);
	align-items: start;
	padding-block: clamp(1.5rem, 3vw, 2.75rem);
	border-block-end: var(--agama-rule);
	transition: background-color var(--agama-t-base) var(--agama-ease),
		padding-inline var(--agama-t-base) var(--agama-ease);
}

@media (min-width: 900px) {
	.agama-index__row { grid-template-columns: 5rem minmax(0, 5fr) minmax(0, 7fr); }
	.agama-index__row:hover { padding-inline: 1rem; background-color: var(--agama-surface); }
	.agama-band--ink .agama-index__row:hover { background-color: rgba(251, 250, 244, 0.05); }
}

.agama-index__num {
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--agama-ink-muted);
	padding-block-start: 0.45em;
	margin: 0;
}

.agama-index__title {
	font-family: var(--agama-font-display);
	font-size: clamp(1.35rem, 0.9rem + 1.4vw, 2.1rem);
	font-weight: 400;
	line-height: 1.1;
	margin: 0;
}

.agama-index__body {
	margin: 0;
	color: var(--agama-ink-muted);
	max-width: 46ch;
}

.agama-band--ink .agama-index { border-block-start-color: rgba(251, 250, 244, 0.18); }
.agama-band--ink .agama-index__row { border-block-end-color: rgba(251, 250, 244, 0.18); }
.agama-band--ink .agama-index__num { color: color-mix(in srgb, var(--agama-base) 55%, transparent); }

/* --- Borderless tiles ---------------------------------------------------- */

.agama-tiles {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.agama-tiles--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }

.agama-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	background: none;
	border: 0;
	border-radius: 0;
}

.agama-tile__media {
	position: relative;
	overflow: hidden;
	background-color: var(--agama-surface);
	margin: 0;
}

.agama-tile__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 900ms var(--agama-ease), filter 900ms var(--agama-ease);
}

.agama-tiles--2 .agama-tile__media img { aspect-ratio: 3 / 2; }

.agama-tile:hover .agama-tile__media img { transform: scale(1.045); }

.agama-tile__title {
	font-family: var(--agama-font-display);
	font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.5rem);
	font-weight: 400;
	line-height: 1.15;
	margin: 0;
}

.agama-tile__title a { color: inherit; text-decoration: none; }

.agama-tile__meta {
	margin: 0;
	font-size: var(--agama-fs-sm);
	color: var(--agama-ink-muted);
	max-width: 42ch;
}

/* Stretched link + arrow affordance. */
.agama-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.agama-tile__title::after {
	content: "\2197";
	display: inline-block;
	margin-inline-start: 0.35em;
	opacity: 0;
	transform: translate(-0.2em, 0.2em);
	transition: opacity var(--agama-t-base) var(--agama-ease),
		transform var(--agama-t-base) var(--agama-ease);
}

.agama-tile:hover .agama-tile__title::after,
.agama-tile:focus-within .agama-tile__title::after {
	opacity: 0.55;
	transform: none;
}

.agama-tile:focus-within { outline: 2px solid var(--agama-accent-deep); outline-offset: 6px; }
.agama-tile__link:focus-visible { outline: none; }

/* --- Figures ------------------------------------------------------------- */

.agama-figures {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.agama-figure__num {
	font-family: var(--agama-font-display);
	font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.02em;
	margin: 0 0 0.4rem;
}

.agama-figure__label {
	margin: 0;
	font-size: var(--agama-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-wide);
	color: var(--agama-ink-muted);
}

.agama-band--ink .agama-figure__label { color: color-mix(in srgb, var(--agama-base) 60%, transparent); }

/* --- Section heads ------------------------------------------------------- */

.agama-head {
	display: grid;
	gap: clamp(1rem, 2vw, 2rem);
	margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
	.agama-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

.agama-head__title {
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem) !important;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0.25em 0 0;
	max-width: 20ch;
}

.agama-head__aside {
	margin: 0;
	color: var(--agama-ink-muted);
	max-width: 42ch;
}

.agama-band--ink .agama-head__aside { color: color-mix(in srgb, var(--agama-base) 65%, transparent); }

@media (prefers-reduced-motion: reduce) {
	.agama-tile__media img,
	.agama-index__row,
	.agama-tile__title::after {
		transition: none !important;
		transform: none !important;
	}
}

/* --- Flow rhythm inside the redesign containers --------------------------- */

/*
 * These groups use layout type "default" (flow), and core's flow spacing does
 * not reach their children here — headings were colliding with the paragraphs
 * directly beneath them. Explicit and predictable beats inherited-and-absent.
 */
.agama-hero2 > * > * + *,
.agama-split2 > * > * + *,
.agama-pagehead > * + *,
.agama-band--ink .agama-inner > * > * + * {
	margin-block-start: 1.15rem;
}

.agama-hero2 > * > .wp-block-buttons,
.agama-split2 > * > .wp-block-buttons,
.agama-pagehead > .wp-block-buttons {
	margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

/* The eyebrow hugs the heading it introduces. */
.agama-hero2 .agama-eyebrow + .agama-hero2__title,
.agama-split2 .agama-eyebrow + .agama-head__title,
.agama-pagehead .agama-eyebrow + .agama-hero2__title {
	margin-block-start: 0.35rem;
}

/* Lead paragraph needs air under a large display heading. */
.agama-hero2__title + .agama-lead,
.agama-head__title + .agama-muted,
.agama-head__title + .agama-lead {
	margin-block-start: clamp(1.1rem, 2vw, 1.75rem);
}

/* Give the intro text column more room — 5fr was forcing three-line wraps. */
@media (min-width: 900px) {
	.agama-split2 { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

/* Page headers get breathing room above and below. */
.agama-pagehead {
	padding-block: clamp(3rem, 5vw, 6rem) clamp(1.5rem, 3vw, 3rem);
}

.agama-pagehead .agama-hero2__title {
	font-size: clamp(2.25rem, 1.2rem + 4vw, 4.5rem) !important;
	max-width: 18ch;
}

/* Index titles align to the section head above them. */
@media (min-width: 900px) {
	.agama-index__row { grid-template-columns: 3.5rem minmax(0, 6fr) minmax(0, 6fr); }
}

/* --- Redesign refinements ------------------------------------------------- */

/* The figures band was mostly empty space. Tighten it and let the numerals
   carry the weight. */
.agama-band--ink .agama-figures { align-items: end; }

.agama-band--tight { padding-block: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }

/* Last index row closes on the band edge rather than leaving a stranded rule. */
.agama-index__row:last-child { border-block-end: 0; }

/* Staron pages still use the older section wrapper — keep its rhythm in step
   with the new bands so the two systems do not read differently. */
.agama-section { padding-block: clamp(3.5rem, 2rem + 5vw, 7.5rem); }

.agama-section > .agama-eyebrow + h2 { margin-block: 0.35rem 0; }

/* --- Sticky header: unblock it -------------------------------------------- */

/*
 * Blocksy ships `body { overflow-x: hidden }`. Per spec, when one axis is not
 * `visible` the other computes to `auto` — so that single declaration turns
 * <body> into a scroll container, and `position: sticky` on the header then
 * anchors to BODY rather than the viewport. The header scrolls away with the
 * page and the stickiness silently does nothing.
 *
 * `overflow-x: clip` contains horizontal overflow exactly the same way but does
 * NOT establish a scroll container, so sticky works. overflow-y is pinned back
 * to visible so nothing re-triggers the same behaviour.
 */
body {
	overflow-x: clip;
	overflow-y: visible;
}

/* Nothing between <body> and the header may clip or transform, or sticky dies
   again for the same reason. */
#main-container {
	overflow: visible;
}

/* --- Off-canvas panel: DO NOT inherit header styling --------------------- */

/*
 * Blocksy renders the mobile panel as:
 *
 *   <div id="offcanvas" class="ct-panel ct-header" …>
 *
 * It carries the SAME `ct-header` class as the real header. An unscoped
 * `.ct-header { position: sticky }` therefore landed on the panel too and beat
 * Blocksy's `.ct-panel { position: fixed }` on specificity — which is why the
 * burger button appeared to do nothing: the panel was being laid out in flow
 * instead of as a fixed overlay.
 *
 * Every header rule above is scoped to `header.ct-header`. This is belt and
 * braces so the panel can never pick those styles up again.
 */
#offcanvas.ct-panel {
	position: fixed;
	z-index: 999;
}

#offcanvas.ct-panel,
#offcanvas.ct-panel [data-row] {
	background-color: transparent;
}


/* --- Overflow containment -------------------------------------------------- */

/*
 * Grid and flex children default to `min-width: auto`, which refuses to shrink
 * below their content. On narrow screens that pushed the layout wider than the
 * viewport — and because body clips horizontally, the overflow was invisible
 * except that the right-hand end of the header (including the burger button)
 * was pushed off-screen and clipped. Hence "the burger does nothing": it was
 * never on screen to click.
 */
.agama-hero2,
.agama-split2,
.agama-tiles,
.agama-figures,
.agama-head,
.agama-index__row,
.agama-hero2 > *,
.agama-split2 > *,
.agama-head > *,
.agama-index__row > *,
.agama-tile,
.agama-tile > * {
	min-width: 0;
}

.agama-band,
.agama-inner {
	box-sizing: border-box;
	max-width: 100%;
}

.agama-inner {
	max-width: min(var(--agama-inner), 100%);
}

/* Long unbroken strings must never widen the page. */
.agama-hero2__title,
.agama-head__title,
.agama-tile__title,
.agama-index__title {
	overflow-wrap: break-word;
}

/* Images never exceed their column. */
.agama-band img,
.agama-inner img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * 17. Polish pass — colour hierarchy, header, off-canvas
 * ------------------------------------------------------------------------- */

/*
 * COLOUR HIERARCHY
 *
 * `ink-muted` (#6F7061) measures 4.82:1 — technically AA, but it is an
 * olive-grey and it was carrying almost all secondary text on the site. The
 * result read washed out and slightly dirty against the warm ground.
 *
 * Secondary text now uses INK at reduced alpha instead. It stays in the same
 * warm family as the headings, reads considerably crisper, and lands around
 * 8:1 rather than 4.8:1. `ink-muted` is kept for genuinely tertiary marks —
 * eyebrows, meta, codes — where its lightness is the point.
 */
:root {
	--agama-body: color-mix(in srgb, var(--agama-ink) 82%, transparent);
	--agama-secondary: color-mix(in srgb, var(--agama-ink) 68%, transparent);
	--agama-tertiary: color-mix(in srgb, var(--agama-ink) 52%, transparent);
	--agama-on-ink: color-mix(in srgb, var(--agama-base) 74%, transparent);
	--agama-on-ink-dim: color-mix(in srgb, var(--agama-base) 52%, transparent);
}

body { color: var(--agama-body); }

.agama-muted,
.agama-tile__meta,
.agama-index__body,
.agama-head__aside,
.agama-lead {
	color: var(--agama-secondary);
}

.agama-eyebrow,
.agama-code,
.agama-figure__label,
.agama-index__num,
.agama-colour-card__code {
	color: var(--agama-tertiary);
}

.agama-band--ink .agama-muted,
.agama-band--ink .agama-head__aside,
.agama-band--ink .agama-index__body,
.agama-band--ink .agama-lead { color: var(--agama-on-ink); }

.agama-band--ink .agama-eyebrow,
.agama-band--ink .agama-figure__label,
.agama-band--ink .agama-index__num { color: var(--agama-on-ink-dim); }

/* --- Header polish -------------------------------------------------------- */

header.ct-header .site-title,
header.ct-header .site-title a { color: var(--agama-ink); }

/* Blocksy's stock burger is three plain bars. Tighten it and give it a real
   hover, so it reads as a control rather than an icon dropped in. */
header.ct-header .ct-header-trigger .ct-icon,
header.ct-header .ct-toggle .ct-icon {
	transition: transform var(--agama-t-base) var(--agama-ease),
		opacity var(--agama-t-fast) var(--agama-ease);
}

header.ct-header .ct-header-trigger:hover .ct-icon { transform: scale(1.08); }

header.ct-header .ct-header-trigger,
header.ct-header .ct-toggle {
	color: var(--agama-ink);
	border-radius: var(--agama-radius);
}

/* --- Off-canvas panel ----------------------------------------------------- */

/*
 * Blocksy defaults the panel to rgba(18,21,25,.98) — a cold blue-black that has
 * nothing to do with this palette — and sets the links in heavy sans. Both are
 * replaced here with the brand ink and the display face.
 */
#offcanvas.ct-panel .ct-panel-inner,
#offcanvas.ct-panel .ct-panel-content {
	background-color: var(--agama-ink) !important;
}

#offcanvas.ct-panel .ct-panel-inner {
	width: min(30rem, 92vw);
	box-shadow: -24px 0 60px -30px rgba(20, 17, 15, 0.7);
}

#offcanvas .ct-panel-content-inner {
	padding: clamp(1.5rem, 6vw, 2.75rem);
}

#offcanvas .mobile-menu .ct-menu-link {
	font-family: var(--agama-font-display) !important;
	font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.4rem) !important;
	font-weight: 400 !important;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--agama-base) !important;
	padding-block: 0.5rem;
	transition: color var(--agama-t-fast) var(--agama-ease),
		padding-inline-start var(--agama-t-base) var(--agama-ease);
}

#offcanvas .mobile-menu > ul > li {
	border-block-end: 1px solid rgba(251, 250, 244, 0.14);
}

#offcanvas .mobile-menu > ul > li:last-child { border-block-end: 0; }

#offcanvas .mobile-menu .ct-menu-link:hover,
#offcanvas .mobile-menu .ct-menu-link:focus-visible {
	color: var(--agama-accent);
	padding-inline-start: 0.5rem;
}

/* Sub-menu (Staron collections) sits quieter than the top level. */
#offcanvas .mobile-menu .sub-menu .ct-menu-link {
	font-family: var(--agama-font-body) !important;
	font-size: 1rem !important;
	color: var(--agama-on-ink) !important;
	padding-block: 0.35rem;
}

#offcanvas .ct-toggle-close {
	color: var(--agama-base);
	transition: transform var(--agama-t-base) var(--agama-ease),
		opacity var(--agama-t-fast) var(--agama-ease);
}

#offcanvas .ct-toggle-close:hover { transform: rotate(90deg); }

/* Menu items cascade in behind the panel. */
body[data-panel*="in"] #offcanvas.active .mobile-menu > ul > li {
	animation: agama-rise 0.5s var(--agama-ease) backwards;
}

body[data-panel*="in"] #offcanvas.active .mobile-menu > ul > li:nth-child(1) { animation-delay: 90ms; }
body[data-panel*="in"] #offcanvas.active .mobile-menu > ul > li:nth-child(2) { animation-delay: 140ms; }
body[data-panel*="in"] #offcanvas.active .mobile-menu > ul > li:nth-child(3) { animation-delay: 190ms; }
body[data-panel*="in"] #offcanvas.active .mobile-menu > ul > li:nth-child(4) { animation-delay: 240ms; }
body[data-panel*="in"] #offcanvas.active .mobile-menu > ul > li:nth-child(5) { animation-delay: 290ms; }
body[data-panel*="in"] #offcanvas.active .mobile-menu > ul > li:nth-child(n+6) { animation-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
	body[data-panel*="in"] #offcanvas.active .mobile-menu > ul > li,
	#offcanvas .ct-toggle-close,
	header.ct-header .ct-header-trigger .ct-icon {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

/* --- Capped tile grid (home) --------------------------------------------- */

/*
 * On a phone, nine project tiles is a very long scroll before the visitor
 * reaches anything else. The homepage grid is capped to three and the
 * "View all projects" button carries them through to /projects/, which still
 * lists the full set.
 *
 * Hidden with `display: none` rather than visibility so the tiles leave the
 * accessibility tree too — a screen-reader user gets the same three plus the
 * link, not nine items they cannot see referenced by a "view all" button.
 */
/*
 * Four, then the button — at every width, not just on phones. A home page
 * section is a route into the full set, not the full set itself.
 */
.agama-tiles--capped > .agama-tile:nth-child(n + 5) {
	display: none;
}

.agama-viewall {
	margin-block-start: clamp(1.75rem, 4vw, 2.75rem);
}

/* Desktop shows every tile, so the button reads as a route onward rather than
   a "there is more hidden" affordance. */
@media (min-width: 801px) {
	.agama-viewall {
		margin-block-start: clamp(2rem, 3vw, 3rem);
	}
}

/* ---------------------------------------------------------------------------
 * 18. Client spec — timeline, pending tiles, trusted row, nav CTA
 * ------------------------------------------------------------------------- */

/* --- Process as a timeline ------------------------------------------------ */

.agama-timeline { position: relative; border-block-start: 0; }

.agama-timeline .agama-index__row {
	position: relative;
	border-block-end: 0;
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* The spine. */
.agama-timeline::before {
	content: "";
	position: absolute;
	inset-block: 1.9rem 1.9rem;
	inset-inline-start: 1.1rem;
	width: 1px;
	background-color: var(--agama-line);
}

@media (min-width: 900px) {
	.agama-timeline::before { inset-inline-start: 1.6rem; }
}

.agama-timeline .agama-index__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border-radius: 50%;
	background-color: var(--agama-base);
	border: 1px solid var(--agama-line);
	color: var(--agama-secondary);
	transition: background-color var(--agama-t-base) var(--agama-ease),
		border-color var(--agama-t-base) var(--agama-ease),
		color var(--agama-t-base) var(--agama-ease);
}

@media (min-width: 900px) {
	.agama-timeline .agama-index__num { width: 3.2rem; height: 3.2rem; }
}

.agama-timeline .agama-index__row:hover .agama-index__num {
	background-color: var(--agama-ink);
	border-color: var(--agama-ink);
	color: var(--agama-base);
}

.agama-timeline .agama-index__row:hover { background-color: transparent; padding-inline: 0; }

.agama-band--surface .agama-timeline .agama-index__num { background-color: var(--agama-surface); }

/* --- Tiles awaiting photography ------------------------------------------- */

.agama-tile__media--pending {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	margin: 0;
	background-color: var(--agama-surface);
	background-image: linear-gradient(135deg, rgba(32, 34, 27, 0.035) 25%, transparent 25%,
		transparent 50%, rgba(32, 34, 27, 0.035) 50%, rgba(32, 34, 27, 0.035) 75%, transparent 75%);
	background-size: 12px 12px;
	border: 1px dashed var(--agama-line);
	font-size: var(--agama-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--agama-tracking-caps);
	color: var(--agama-tertiary);
}

/* --- Trusted by ----------------------------------------------------------- */

.agama-logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 1px;
	background-color: var(--agama-line);
	border: 1px solid var(--agama-line);
	margin-block-end: clamp(1rem, 2vw, 1.5rem);
}

.agama-logos__item {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem) 1rem;
	text-align: center;
	background-color: var(--agama-surface);
	font-family: var(--agama-font-display);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	color: var(--agama-secondary);
	transition: background-color var(--agama-t-base) var(--agama-ease),
		color var(--agama-t-base) var(--agama-ease);
}

.agama-logos__item:hover { background-color: var(--agama-base); color: var(--agama-ink); }

/* --- Header CTA ----------------------------------------------------------- */

@media (min-width: 1000px) {
	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link {
		background-color: var(--agama-accent-deep);
		color: var(--agama-base);
		padding: 0.7em 1.2em;
		border-radius: var(--agama-radius);
		margin-inline-start: 0.6rem;
		transition: background-color var(--agama-t-base) var(--agama-ease);
	}

	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link::after { display: none; }

	header.ct-header .menu > li.agama-nav-cta:hover > a.ct-menu-link,
	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link:focus-visible {
		background-color: var(--agama-ink);
		color: var(--agama-base);
	}
}

#offcanvas .mobile-menu > ul > li.agama-nav-cta > .ct-menu-link {
	color: var(--agama-accent) !important;
}

@media (prefers-reduced-motion: reduce) {
	.agama-timeline .agama-index__num,
	.agama-logos__item,
	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link { transition: none !important; }
}

/* ---------------------------------------------------------------------------
 * 19. Fit + hero rebalance
 * ------------------------------------------------------------------------- */

/*
 * Nine top-level items plus a CTA overflowed Blocksy's header row, which
 * collapsed the tail into a "More" dropdown and buried Contact and Get a Quote.
 * Tightening the nav metrics buys back the width so every item stays visible.
 */
@media (min-width: 1000px) {
	header.ct-header .menu > li > .ct-menu-link,
	header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
		font-size: 0.6875rem;
		letter-spacing: 0.06em;
		padding-inline: 0.55rem;
	}

	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link {
		padding: 0.65em 1em;
		margin-inline-start: 0.35rem;
	}

	header.ct-header .site-title,
	header.ct-header .site-title a { font-size: 1rem; }

	header.ct-header .site-logo-container img { height: 34px; }
}

@media (min-width: 1280px) {
	header.ct-header .menu > li > .ct-menu-link,
	header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
		font-size: 0.75rem;
		padding-inline: 0.7rem;
	}
}

/*
 * The client headline is 48 characters. At 14ch it broke into four lines and
 * pushed the whole hero out of balance with the image beside it.
 */
.agama-hero2__title {
	max-width: 20ch;
	font-size: clamp(2.5rem, 1rem + 5.4vw, 5rem) !important;
	line-height: 0.98;
}

/* Long CTA labels were forcing the buttons to stack. */
.agama-hero2 .wp-block-buttons {
	flex-wrap: wrap;
	gap: 0.75rem;
}

.agama-hero2 .agama-btn > .wp-block-button__link {
	font-size: 0.6875rem;
	padding: 0.9em 1.5em;
}

/* ---------------------------------------------------------------------------
 * 20. Site-wide motion layer
 * ------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

/* --- Heading word reveal -------------------------------------------------- */

/*
 * motion.js wraps each word in .agama-w > .agama-w__i. The outer span clips,
 * the inner one rises — so words appear to lift out of the line rather than
 * fading in place.
 */
.agama-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.agama-js [data-reveal] .agama-w__i {
	display: inline-block;
	transform: translateY(105%);
	transition: transform 0.85s var(--agama-ease);
	transition-delay: calc(var(--w, 0) * 45ms);
}

.agama-js [data-reveal].is-revealed .agama-w__i {
	transform: none;
}

/* A split heading must not double-animate with its parent's fade. */
.agama-js [data-reveal] :is(h1, h2):has(.agama-w) {
	opacity: 1;
}

/* --- Image wipe ----------------------------------------------------------- */

/*
 * Editorial images resolve with a clip wipe plus a slow settle, rather than a
 * plain fade. Reads considerably more deliberate.
 */
.agama-js [data-reveal] .wp-block-image,
.agama-js [data-reveal] .agama-tile__media,
.agama-js .agama-tile[data-reveal] .agama-tile__media {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s var(--agama-ease);
}

.agama-js [data-reveal].is-revealed .wp-block-image,
.agama-js [data-reveal].is-revealed .agama-tile__media,
.agama-js .agama-tile[data-reveal].is-revealed .agama-tile__media {
	clip-path: inset(0 0 0 0);
}

.agama-js [data-reveal] .wp-block-image img,
.agama-js [data-reveal] .agama-tile__media img {
	transform: scale(1.08);
	transition: transform 1.4s var(--agama-ease);
}

.agama-js [data-reveal].is-revealed .wp-block-image img,
.agama-js [data-reveal].is-revealed .agama-tile__media img {
	transform: none;
}

/* Hover zoom still owns the tile once it has settled. */
.agama-tile.is-revealed:hover .agama-tile__media img { transform: scale(1.045); }

/* --- Timeline draws in ---------------------------------------------------- */

.agama-timeline::before { background-color: transparent; }

.agama-timeline::after {
	content: "";
	position: absolute;
	inset-block-start: 1.9rem;
	inset-inline-start: 1.1rem;
	width: 1px;
	height: calc((100% - 3.8rem) * var(--progress, 0));
	background-color: var(--agama-ink);
	opacity: 0.35;
	transition: height 180ms linear;
}

@media (min-width: 900px) {
	.agama-timeline::after { inset-inline-start: 1.6rem; }
}

/* Ghost rail behind the drawn line. */
.agama-timeline {
	background-image: linear-gradient(var(--agama-line), var(--agama-line));
	background-repeat: no-repeat;
	background-size: 1px calc(100% - 3.8rem);
	background-position: 1.1rem 1.9rem;
}

@media (min-width: 900px) {
	.agama-timeline { background-position: 1.6rem 1.9rem; }
}

/* --- Buttons + links ------------------------------------------------------ */

.agama-btn > .wp-block-button__link,
.agama-btn {
	will-change: transform;
}

.agama-btn:not(.wp-block-button):active,
.agama-btn > .wp-block-button__link:active { transform: translateY(1px); }

/* --- Reduced motion: cancel the whole layer ------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.agama-js [data-reveal] .agama-w__i,
	.agama-js [data-reveal].is-revealed .agama-w__i {
		transform: none !important;
		transition: none !important;
	}

	.agama-w { overflow: visible; }

	.agama-js [data-reveal] .wp-block-image,
	.agama-js [data-reveal] .agama-tile__media,
	.agama-js [data-reveal] .wp-block-image img,
	.agama-js [data-reveal] .agama-tile__media img {
		clip-path: none !important;
		transform: none !important;
		transition: none !important;
	}

	.agama-timeline::after { transition: none; height: calc(100% - 3.8rem); }
}

/* CTA sat flush to the header's top and bottom edges because Blocksy stretches
   menu links to the full row height. Centre it and let its own padding define
   the button instead. */
@media (min-width: 1000px) {
	header.ct-header .menu > li.agama-nav-cta {
		display: flex;
		align-items: center;
	}

	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link {
		align-self: center;
		line-height: 1;
		padding: 0.85em 1.25em;
	}
}

/*
 * Nine items plus a CTA is a genuinely wide navigation. Blocksy measures the
 * row and collapses the overflow into a "More" dropdown — which buried Contact
 * and Get a Quote. Rather than shortening the client's labels, the wordmark
 * stands down in the band where space is tightest; the logo mark still carries
 * the brand, and the full lockup returns on wider screens.
 */
@media (min-width: 1000px) and (max-width: 1379px) {
	header.ct-header .site-title { display: none; }

	header.ct-header .menu > li > .ct-menu-link,
	header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
		font-size: 0.65rem;
		letter-spacing: 0.045em;
		padding-inline: 0.4rem;
	}

	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link {
		padding: 0.8em 0.9em;
		margin-inline-start: 0.25rem;
	}
}

@media (min-width: 1380px) {
	header.ct-header .menu > li > .ct-menu-link,
	header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
		font-size: 0.6875rem;
		padding-inline: 0.5rem;
	}
}

/* Blocksy gives menu links `height: 100%` so they fill the row and stay
   clickable edge to edge. For the CTA that made the button span the entire
   header height; it needs its own intrinsic height to read as a button. */
@media (min-width: 1000px) {
	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link {
		height: auto;
		min-height: 0;
		align-self: center;
	}
}

/* ---------------------------------------------------------------------------
 * 21. Header — logo only, wider nav rhythm
 * ------------------------------------------------------------------------- */

/*
 * The wordmark is retired from the header; the mark carries the brand alone.
 * The company name is not lost to assistive tech or search — the logo link's
 * alt text is "Agama Fabrications & Designs logo", so it is still announced and
 * still indexed.
 *
 * Dropping it frees roughly 250px, which is what pays for the wider spacing
 * between nav items below without pushing Blocksy into its "More" collapse.
 */
header.ct-header .site-title { display: none; }

header.ct-header .site-logo-container img { height: 42px; }

@media (min-width: 1000px) {
	header.ct-header .menu > li > .ct-menu-link,
	header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
		padding-inline: 0.95rem;
	}

	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link {
		padding: 0.85em 1.35em;
		margin-inline-start: 0.9rem;
	}
}

@media (min-width: 1380px) {
	header.ct-header .menu > li > .ct-menu-link,
	header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
		font-size: 0.75rem;
		padding-inline: 1.15rem;
	}

	header.ct-header .site-logo-container img { height: 46px; }
}

/*
 * Spacing scales with available width rather than being one fixed value:
 * generous on wide screens as intended, tighter in the band where nine items
 * plus a CTA would otherwise trip Blocksy's "More" collapse.
 */
@media (min-width: 1000px) and (max-width: 1199px) {
	header.ct-header .menu > li > .ct-menu-link,
	header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
		font-size: 0.625rem;
		letter-spacing: 0.05em;
		padding-inline: 0.45rem;
	}

	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link {
		padding: 0.8em 0.85em;
		margin-inline-start: 0.35rem;
	}

	header.ct-header .site-logo-container img { height: 34px; }
}

@media (min-width: 1200px) and (max-width: 1379px) {
	header.ct-header .menu > li > .ct-menu-link,
	header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
		font-size: 0.6875rem;
		letter-spacing: 0.06em;
		padding-inline: 0.7rem;
	}

	header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link {
		margin-inline-start: 0.6rem;
	}
}

/* ---------------------------------------------------------------------------
 * 22. Motion corrections
 * ------------------------------------------------------------------------- */

/*
 * FIGURES — fade, never lift.
 *
 * The three figures are a single horizontal line of data. Revealing them with a
 * staggered translateY meant that mid-transition each sat at a different height
 * (measured: 13.2px / 16px / 16px), so the row read as misaligned while it
 * animated. They now fade in place and share one baseline at every frame.
 */
.agama-js .agama-figures > [data-reveal] {
	transform: none !important;
	transition: opacity 0.7s var(--agama-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.agama-js .agama-figures > [data-reveal].is-revealed { opacity: 1; }

.agama-figures { align-items: start; }

/*
 * SERVICES / PROCESS INDEX — stop animating layout.
 *
 * The hover animated `padding-inline`, which forces a layout pass on every
 * frame and reads as stutter. The inset is now drawn by a pseudo-element that
 * only ever changes opacity and transform — both compositor-only — so the row
 * highlight is smooth.
 */
.agama-index__row {
	position: relative;
	transition: none;
	padding-inline: 0;
}

.agama-index__row::before {
	content: "";
	position: absolute;
	inset: 0 -1rem;
	z-index: -1;
	background-color: var(--agama-surface);
	opacity: 0;
	transform: scaleX(0.98);
	transform-origin: left center;
	transition: opacity var(--agama-t-base) var(--agama-ease),
		transform var(--agama-t-base) var(--agama-ease);
	pointer-events: none;
}

@media (min-width: 900px) {
	.agama-index__row:hover::before { opacity: 1; transform: none; }
}

/* On a tinted band the highlight must be the lighter ground, not the same one. */
.agama-band--surface .agama-index__row::before { background-color: var(--agama-base); }
.agama-band--ink .agama-index__row::before { background-color: rgba(251, 250, 244, 0.06); }

/* The title nudges instead of the box resizing — transform only. */
.agama-index__title,
.agama-index__body {
	transition: transform var(--agama-t-base) var(--agama-ease);
}

@media (min-width: 900px) {
	.agama-index__row:hover .agama-index__title { transform: translateX(6px); }
}

/* Rows reveal with a shorter, gentler cascade so a four-row list settles fast. */
.agama-js .agama-index > [data-reveal] {
	transition: opacity 0.55s var(--agama-ease), transform 0.55s var(--agama-ease);
	transition-delay: calc(var(--i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
	.agama-index__row::before,
	.agama-index__title,
	.agama-index__body,
	.agama-js .agama-figures > [data-reveal] {
		transition: none !important;
		transform: none !important;
	}
}

/*
 * Core applies `margin-block-start: var(--theme-content-spacing)` to every flow
 * child. Inside a GRID container that margin lands on the grid items and knocks
 * them out of alignment with each other — measured 18.4px on the 2nd and 3rd
 * figure, which is why the third sat lower than the other two.
 *
 * The colour grids were already immunised; these newer grids were not. Applied
 * to all of them at once so the next grid added does not repeat it.
 */
.agama-figures > *,
.agama-tiles > *,
.agama-logos > *,
.agama-index > *,
.agama-collection-grid > *,
.agama-colour-grid > * {
	margin-block: 0 !important;
}

/* Figures share one baseline; nothing should end-align them into disagreement. */
.agama-figures,
.agama-band--ink .agama-figures {
	align-items: start;
}

/* ---------------------------------------------------------------------------
 * 23. Responsive — phone
 * ------------------------------------------------------------------------- */

/*
 * Parallax scales the image to 1.06 so it has room to move. At 100% width that
 * is 106% of the column, which pushed the page ~5–9px wider than the viewport
 * and produced a horizontal scroll on phones. The figure clips it.
 */
[data-parallax] {
	overflow: hidden;
}

/* Nothing may exceed the viewport, whatever a transform does inside it. */
img,
video,
figure,
iframe {
	max-width: 100%;
}

/* --- Word-reveal must not clip descenders -------------------------------- */

/*
 * .agama-w clips its inner span so words can rise out of the line. With the
 * display face at a tight line-height the clip box sat ON the baseline, so
 * descenders (p, g, y) and whole final lines were being cut off — visible on
 * "Premium Surface Solutions", "premium surfaces." and "from concept to
 * completion".
 *
 * Padding extends the clip box below the baseline; the negative margin takes
 * the space back so line spacing is unchanged.
 */
.agama-w {
	padding-block-end: 0.18em;
	margin-block-end: -0.18em;
	padding-inline-end: 0.04em;
	margin-inline-end: -0.04em;
}

/* --- Phone --------------------------------------------------------------- */

@media (max-width: 899px) {
	/* Tight display line-heights collide once the type wraps to 3–4 lines. */
	.agama-hero2__title,
	.agama-head__title {
		line-height: 1.06;
		letter-spacing: -0.015em;
	}

	.agama-hero2__title { max-width: none; }
	.agama-head__title { max-width: none; }

	.agama-hero2 {
		min-height: 0;
		padding-block: clamp(2rem, 8vw, 3rem) clamp(2rem, 6vw, 3rem);
		gap: clamp(1.75rem, 6vw, 2.5rem);
	}

	.agama-hero2__media img { max-height: 52vh; }

	/*
	 * The index row is a 3-part grid. On a narrow screen the body was landing in
	 * the 4rem number column and wrapping one word per line. Placed explicitly:
	 * number and title on row 1, body beneath the title.
	 */
	.agama-index__row {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		row-gap: 0.5rem;
		padding-block: 1.5rem;
	}

	.agama-index__num   { grid-column: 1; grid-row: 1; padding-block-start: 0.15em; }
	.agama-index__title { grid-column: 2; grid-row: 1; }
	.agama-index__body  { grid-column: 2; grid-row: 2; max-width: none; }

	.agama-timeline::before,
	.agama-timeline::after,
	.agama-timeline { background-position: 0.85rem 1.9rem; }
	.agama-timeline::before,
	.agama-timeline::after { inset-inline-start: 0.85rem; }
	.agama-timeline .agama-index__num { width: 1.8rem; height: 1.8rem; }

	/* Long CTA labels overflowed their button. */
	.wp-block-buttons { flex-direction: column; align-items: flex-start; }

	.agama-btn > .wp-block-button__link {
		width: 100%;
		text-align: center;
		justify-content: center;
		font-size: 0.6875rem;
		padding: 1em 1.1em;
		white-space: normal;
	}

	/* One figure per row reads better than an orphaned third. */
	.agama-figures { grid-template-columns: 1fr; gap: 1.5rem; }

	/* Section heads stack; the aside is supporting text, not a column. */
	.agama-head { gap: 0.75rem; }

	/* Two tiles per row at phone width is too cramped for a 4:3 image. */
	.agama-tiles,
	.agama-tiles--2 { grid-template-columns: 1fr; }

	/* :not(--flush) matters: this rule is later in the file than
	   `.agama-band--flush { padding-block: 0 }` and equally specific, so
	   without it the flush hero silently regains vertical padding on
	   phones — which showed as a strip of ink below the hero. */
	.agama-band:not(.agama-band--flush) { padding-block: clamp(2.5rem, 9vw, 4rem); }
	.agama-inner { padding-inline: clamp(1.15rem, 5vw, 2rem); }
}

@media (max-width: 599px) {
	.agama-hero2__title { font-size: clamp(2rem, 1rem + 6vw, 2.75rem) !important; }
	.agama-pagehead .agama-hero2__title { font-size: clamp(1.9rem, 1rem + 5.5vw, 2.5rem) !important; }
	.agama-head__title { font-size: clamp(1.6rem, 1rem + 4vw, 2.2rem) !important; }
	.agama-figure__num { font-size: clamp(2.25rem, 1.5rem + 4vw, 3rem); }
}

@media (max-width: 899px) {
	/*
	 * Swatches are simple squares — two per row stays perfectly legible and
	 * halves the scroll for a 43-colour library. Product and project tiles stay
	 * one-up because their 4:3 photography needs the width.
	 */
	.agama-colour-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.85rem;
	}

	.agama-colour-card .agama-card__body { padding: 0.85rem; }
	.agama-colour-card .agama-card__title { font-size: 1rem; }
	.agama-badge--ribbon {
		inset-block-start: 0.5rem;
		inset-inline-start: 0.5rem;
		font-size: 0.625rem;
		padding: 0.3em 0.55em;
	}

	/* Filter bar stacks cleanly and the search reaches full width. */
	.agama-filter { gap: 0.75rem; }
	.agama-filter__search { flex: 1 1 100%; }
	.agama-filter__count { flex: 1 1 100%; }

	/* Buttons share one width so a column of them reads as a set. A lone
	   view-all is not a set — it stays the width of its own label. */
	.agama-btn.wp-block-button { width: 100%; }
	.agama-viewall .agama-btn.wp-block-button { width: auto; }
}

@media (max-width: 420px) {
	.agama-colour-grid { gap: 0.7rem; }
	.agama-filter__chip { font-size: 0.625rem; padding: 0.5em 0.75em; }
}

/*
 * Belt-and-braces horizontal clip at the document level.
 *
 * `body` was already clipped, but the scroll container is <html>, so a
 * transformed descendant (the hero image, scaled 1.08 pre-reveal and 1.06 by
 * parallax) still grew the document's scroll width by ~9px and produced a
 * sideways drag on phones. Transforms contribute to scrollable overflow even
 * when they do not affect layout.
 *
 * `clip` rather than `hidden`: hidden would make <html> a scroll container and
 * break the sticky header again, exactly as it did on <body> earlier.
 */
html {
	overflow-x: clip;
}

/* Clip the scale at its own container as well, so nothing depends solely on the
   document-level guard. */
.agama-hero2__media,
.agama-split2 > *,
.wp-block-image {
	overflow: clip;
}

@media (max-width: 899px) {
	/* Stacked tiles need a clear break between them, or one card's caption
	   reads as the next card's heading. */
	.agama-tiles,
	.agama-tiles--2 { gap: 2.25rem; }

	.agama-tile { padding-block-end: 2.25rem; border-block-end: 1px solid var(--agama-line); }
	.agama-tile:last-child { padding-block-end: 0; border-block-end: 0; }

	/* Colour swatch cards keep their own card border — no extra rule. */
	.agama-colour-grid .agama-tile,
	.agama-colour-card { padding-block-end: 0; border-block-end: 0; }

	.agama-band--surface .agama-tile { border-block-end-color: rgba(32, 34, 27, 0.1); }

	/* Contact columns stack with real separation. */
	.agama-inner .wp-block-columns { gap: 2rem; }
}

/* ---------------------------------------------------------------------------
 * 24. Scroll-assembled hero
 * ---------------------------------------------------------------------------
 * The section is tall; the stage inside it is sticky and one viewport high. As
 * the tall section scrolls past, the stage stays put and the canvas scrubs.
 * ------------------------------------------------------------------------- */

.agama-hero-scroll {
	position: relative;
	height: 230vh;
	padding: 0;
	background-color: var(--agama-ink);
}

.agama-hero-scroll__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: clip;
	display: grid;
	place-items: end start;
	isolation: isolate;
}

/* Poster: the only thing visible without JS, and the base layer beneath the
   canvas while frames load. */
.agama-hero-scroll__poster {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.agama-hero-scroll__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.agama-hero-scroll__canvas {
	position: absolute;
	inset: 0;
	/* A canvas is a replaced element: with `inset: 0` and auto width it keeps its
	   300x150 intrinsic box in the corner instead of stretching. The explicit
	   100% is what makes it fill the stage. */
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: opacity 600ms var(--agama-ease);
}

/* Only once enough frames are decoded does the canvas take over from the
   poster — otherwise the hero would flash empty on a slow connection. */
.agama-hero-scroll.is-ready .agama-hero-scroll__canvas {
	opacity: 1;
}

/* Scrim: the copy sits over a photograph, so it needs a guaranteed ground.
   Darkest at the bottom-left where the text lives. */
.agama-hero-scroll__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(20, 21, 17, 0.82) 0%, rgba(20, 21, 17, 0.45) 38%, rgba(20, 21, 17, 0.05) 68%, transparent 100%),
		linear-gradient(to right, rgba(20, 21, 17, 0.55) 0%, rgba(20, 21, 17, 0.12) 45%, transparent 75%);
}

.agama-hero-scroll__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	padding-block: clamp(2.5rem, 6vw, 5rem);
	color: var(--agama-base);
}

.agama-hero-scroll__inner > * + * {
	margin-block-start: 1.15rem;
}

.agama-hero-scroll .agama-eyebrow {
	color: color-mix(in srgb, var(--agama-base) 72%, transparent);
}

.agama-hero-scroll__title {
	color: var(--agama-base) !important;
	font-size: clamp(2.25rem, 1rem + 4.6vw, 4.75rem) !important;
	line-height: 1.02;
	letter-spacing: -0.025em;
	max-width: 17ch;
	margin-block: 0.3rem 0 !important;
	text-wrap: balance;
}

.agama-hero-scroll__lead {
	color: color-mix(in srgb, var(--agama-base) 82%, transparent);
	font-size: var(--agama-fs-lg);
	line-height: var(--agama-lh-body);
	max-width: 46ch;
}

/* A light-on-dark outline button to pair with the solid one. */
.agama-btn--ghost-light > .wp-block-button__link {
	background-color: transparent;
	border-color: color-mix(in srgb, var(--agama-base) 55%, transparent);
	color: var(--agama-base);
}

.agama-btn--ghost-light > .wp-block-button__link:hover,
.agama-btn--ghost-light > .wp-block-button__link:focus-visible {
	background-color: var(--agama-base);
	border-color: var(--agama-base);
	color: var(--agama-ink);
}

/* The copy settles as the assembly completes: --hero-progress is written by
   hero-scroll.js, 0 at the top of the pin to 1 at the end. */
.agama-js .agama-hero-scroll__inner {
	transform: translateY( calc( (1 - var(--hero-progress, 0)) * 1.25rem ) );
	opacity: calc( 0.55 + var(--hero-progress, 0) * 0.45 );
	transition: transform 120ms linear, opacity 120ms linear;
}

@media (max-width: 899px) {
	.agama-hero-scroll { height: 190vh; }

	.agama-hero-scroll__stage::after {
		background: linear-gradient(to top,
			rgba(20, 21, 17, 0.88) 0%, rgba(20, 21, 17, 0.55) 42%,
			rgba(20, 21, 17, 0.12) 72%, transparent 100%);
	}

	.agama-hero-scroll__title { max-width: none; }
}

/*
 * Reduced motion: no pin, no scrub. The section collapses to a single viewport
 * showing the finished room, and the copy sits at full strength.
 */
@media (prefers-reduced-motion: reduce) {
	.agama-hero-scroll { height: auto; }

	.agama-hero-scroll__stage {
		position: static;
		height: min(88svh, 720px);
	}

	.agama-js .agama-hero-scroll__inner {
		transform: none;
		opacity: 1;
		transition: none;
	}

	.agama-hero-scroll__canvas { transition: none; }
}

/* Without JS the section must not be 230vh of poster. */
html:not(.agama-js) .agama-hero-scroll { height: auto; }
html:not(.agama-js) .agama-hero-scroll__stage { position: static; height: min(88svh, 720px); }

/* --- Hero sits under the header ------------------------------------------ */

/*
 * The header is sticky in normal flow, so it occupied its own band above the
 * hero and the full-bleed image started 84px down. Pulling the hero up by the
 * header height lets the transparent header overlay it, which is the whole
 * point of making it transparent.
 */
.entry-content > .agama-hero-scroll:first-child {
	margin-block-start: -84px;
}

@media (max-width: 999px) {
	.entry-content > .agama-hero-scroll:first-child { margin-block-start: -70px; }
}

/* Header copy must survive a dark photograph until the visitor scrolls away. */
body.has-dark-hero:not(.is-scrolled) header.ct-header .site-title a,
.has-dark-hero html:not(.is-scrolled) header.ct-header .site-title a {
	color: var(--agama-base);
}

html:not(.is-scrolled) body.has-dark-hero header.ct-header .site-title,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .site-title a,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .menu > li > .ct-menu-link,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-toggle,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger {
	color: var(--agama-base);
}

/* The logo mark is solid black artwork — invert it rather than leave it
   invisible against the hero. */
html:not(.is-scrolled) body.has-dark-hero header.ct-header .site-logo-container img {
	filter: invert(1) brightness(1.6);
}

html:not(.is-scrolled) body.has-dark-hero header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link {
	background-color: var(--agama-base);
	color: var(--agama-ink);
}

html:not(.is-scrolled) body.has-dark-hero header.ct-header {
	border-block-end-color: transparent;
}

/* Everything above reverts the moment the header gains its solid background. */
html.is-scrolled body.has-dark-hero header.ct-header .site-logo-container img {
	filter: none;
}

/* Keep the whole hero block inside one viewport. */
.agama-hero-scroll__inner > .wp-block-buttons {
	margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 900px) {
	.agama-hero-scroll__title { font-size: clamp(2.25rem, 0.9rem + 3.9vw, 4.25rem) !important; }
	.agama-hero-scroll__lead { font-size: var(--agama-fs-base); }
}

/*
 * Blocksy pads the content area (--theme-content-vertical-spacing, 60px) above
 * the first block. With the hero pulled up under the header that padding still
 * sat between them, leaving a cream strip and pushing the hero 61px down. Zero
 * it on hero pages only, so every other page keeps its normal breathing room.
 */
body.has-dark-hero #main > .ct-container-full,
body.has-dark-hero #main > [data-vertical-spacing] {
	padding-block-start: 0;
}

body.has-dark-hero .entry-content > .agama-hero-scroll:first-child {
	margin-block-start: calc(-1 * var(--header-h, 84px));
}

/* --- Hero copy sits lower -------------------------------------------------- */

/*
 * Copy pulled down toward the bottom edge, and the lead paragraph is gone, so
 * the eyebrow / title / buttons read as one tight block against the floor of
 * the frame rather than floating in the middle of it.
 */
.agama-hero-scroll__inner {
	padding-block: 0 clamp(1.75rem, 3.5vw, 3.25rem);
}

.agama-hero-scroll__title {
	margin-block: 0.25rem 0 !important;
}

.agama-hero-scroll__inner > .wp-block-buttons {
	margin-block-start: clamp(1.1rem, 2vw, 1.6rem);
}

@media (max-width: 899px) {
	.agama-hero-scroll__inner { padding-block-end: clamp(1.5rem, 6vw, 2.5rem); }
}

/* ---------------------------------------------------------------------------
 * 25. Phone hero — media band, not a full-bleed crop
 * ---------------------------------------------------------------------------
 * The phone sequence is a 990x902 render, very nearly square. Filling a 9:19.5
 * handset with it edge to edge would throw away well over half the width, and
 * the composition it throws away is the part that reads as a room.
 *
 * So on phones the stage stops being a full viewport of cropped photograph. It
 * becomes two stacked rows: the sequence at its own aspect ratio across the
 * full width, and the copy on the section's ink ground beneath it. The stage is
 * shorter than the viewport; the ink below it is the section's own background,
 * so the pin still reads as one continuous dark field.
 * ------------------------------------------------------------------------- */

@media (max-width: 899px) {

	.agama-hero-scroll {
		height: 165vh;
	}

	/* Height comes from the rows now, so the sticky box is only as tall as it
	   needs to be. Sticky does not require a fixed height — only a top offset. */
	.agama-hero-scroll__stage {
		height: auto;
		min-height: 0;
		grid-template-columns: 100%;
		grid-template-rows: auto auto;
		place-items: stretch;
	}

	/* Canvas, poster and scrim all occupy row 1 — stacked, not absolute, so the
	   row can take its height from the media's own ratio. */
	.agama-hero-scroll__canvas,
	.agama-hero-scroll__poster,
	.agama-hero-scroll__stage::after {
		position: relative;
		inset: auto;
		grid-row: 1;
		grid-column: 1;
	}

	.agama-hero-scroll__canvas,
	.agama-hero-scroll__poster {
		width: 100%;
		/* Height must go back to auto or it would resolve against the grid row,
		   which is itself sized by this element. */
		height: auto;
		/*
		 * The phone sequence's own shape. Section 42 supersedes this for the
		 * full-bleed layout the phone hero uses now — it makes the canvas fill
		 * the stage instead — but the ratio stays correct here so the banded
		 * layout still works if that section is ever removed.
		 */
		aspect-ratio: 1080 / 1920;
	}

	.agama-hero-scroll__poster img {
		height: 100%;
	}

	/* Only a footer of shade now: the copy has left the image, so the scrim is
	   there to seat the picture against the ink, not to carry text. */
	.agama-hero-scroll__stage::after {
		background: linear-gradient(to top,
			rgba(20, 21, 17, 0.55) 0%, rgba(20, 21, 17, 0.14) 22%, transparent 46%);
	}

	.agama-hero-scroll__inner {
		grid-row: 2;
		grid-column: 1;
		padding-block: 1.5rem 2.25rem;
		/* Same content spacing again, and here it put a band of hero ink below
		   the white panel — inside the stage, so it read as part of the gap. */
		margin-block-end: 0;
	}

	.agama-hero-scroll__title {
		font-size: clamp(1.95rem, 0.85rem + 4.4vw, 2.9rem) !important;
	}

	.agama-hero-scroll__inner > .wp-block-buttons {
		margin-block-start: 1.35rem;
	}
}

/* Without JS there is no canvas, so row 1 would collapse to nothing and the
   poster alone must carry the band. */
@media (max-width: 899px) {
	html:not(.agama-js) .agama-hero-scroll__stage { height: auto; }
}

/* ---------------------------------------------------------------------------
 * 26. Phone hero copy on white
 * ---------------------------------------------------------------------------
 * The copy left the photograph in section 25, which put it on the hero's ink
 * ground — and the band immediately below the hero is `agama-band--ink` too.
 * Two ink surfaces meeting with no seam read as one undifferentiated dark-olive
 * mass, so the hero's own copy stopped looking like the hero.
 *
 * Putting the copy block on base separates the two: picture, white, then the
 * ink band. Every colour set for light-on-dark in the sections above has to be
 * inverted here, buttons included.
 * ------------------------------------------------------------------------- */

@media (max-width: 899px) {

	.agama-hero-scroll__inner {
		background-color: var(--agama-base);
		color: var(--agama-ink);
		padding-block: 1.75rem 2.5rem;
	}

	.agama-hero-scroll .agama-eyebrow {
		color: var(--agama-ink-muted);
	}

	.agama-hero-scroll__title {
		color: var(--agama-ink) !important;
	}

	/* --on-dark is a light fill meant to read against a photograph; on base it
	   would be an almost invisible off-white slab. Back to the solid ink fill. */
	.agama-hero-scroll .agama-btn--on-dark > .wp-block-button__link {
		background-color: var(--agama-ink);
		border-color: var(--agama-ink);
		color: var(--agama-base);
	}

	.agama-hero-scroll .agama-btn--on-dark > .wp-block-button__link:hover,
	.agama-hero-scroll .agama-btn--on-dark > .wp-block-button__link:focus-visible {
		background-color: var(--agama-accent-deep);
		border-color: var(--agama-accent-deep);
		color: var(--agama-base);
	}

	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link {
		border-color: color-mix(in srgb, var(--agama-ink) 30%, transparent);
		color: var(--agama-ink);
	}

	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link:hover,
	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link:focus-visible {
		background-color: var(--agama-ink);
		border-color: var(--agama-ink);
		color: var(--agama-base);
	}

	/*
	 * The settle moves to the children, and loses its fade. On the desktop
	 * overlay it animates the whole block, which was fine when the block was
	 * transparent — here it would fade the white panel itself. Moving it to the
	 * children fixes that but leaves the copy at 0.55 alpha at rest, which on
	 * base is a real contrast loss: the button labels in particular fall below
	 * AA. Only the translate survives.
	 */
	.agama-js .agama-hero-scroll__inner {
		transform: none;
		opacity: 1;
	}

	.agama-js .agama-hero-scroll__inner > * {
		transform: translateY( calc( (1 - var(--hero-progress, 0)) * 0.9rem ) );
		transition: transform 120ms linear;
	}
}

/* ---------------------------------------------------------------------------
 * 27. Hero/stats seam, and the burger over a transparent header
 * ------------------------------------------------------------------------- */

/*
 * The stats band is `agama-band--tight`, so it opens with its own top padding.
 * Under a dark hero on desktop that padding is invisible — ink meeting ink. On
 * phones the hero now ends in a white panel, which turned the same padding into
 * a stray dark strip between the copy and the first figure. Only the phone case
 * needs closing; the desktop band keeps its breathing room.
 */
/*
 * The band keeps its own top padding — the figures need air above them. What
 * had to go was the GAP between the two sections (a margin, dealt with below),
 * not the band's internal rhythm.
 */

/*
 * Blocksy's burger is three <rect>s in an SVG with no fill attribute, and its
 * own stylesheet fills them from --theme-icon-color rather than currentColor.
 * Setting `color` on the button — which is what the dark-hero block above does
 * — therefore does nothing to the bars. Both are set here so the icon follows
 * the header state whichever property Blocksy is reading.
 */
html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger {
	--theme-icon-color: var(--agama-base);
}

html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-icon,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-icon rect {
	fill: var(--agama-base);
}

html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-label {
	color: var(--agama-base);
}

/* Scrolled — the header is solid base now, so the icon goes back to ink. */
html.is-scrolled header.ct-header .ct-header-trigger {
	--theme-icon-color: var(--agama-ink);
}

html.is-scrolled header.ct-header .ct-header-trigger .ct-icon,
html.is-scrolled header.ct-header .ct-header-trigger .ct-icon rect {
	fill: var(--agama-ink);
}

/*
 * Bands are full-bleed sections and are meant to butt against each other. Core
 * gives every top-level block a 24px block gap, which between two ink bands
 * showed as a sliver of page background — a cream line across an otherwise
 * continuous dark run. Closing it here rather than per-pair, since no band
 * anywhere wants a gap of page background above it.
 */
.entry-content > .agama-band + .agama-band {
	margin-block-start: 0;
}

/*
 * ...and the trailing half. Measured rather than assumed: the visible strip of
 * page background between the hero and the stats band was the HERO's 25.5px
 * margin-bottom (Blocksy's --theme-content-spacing), not a margin-top on the
 * band, so zeroing only the top left the gap exactly where it was.
 */
.entry-content > .agama-band {
	margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
 * 28. Services, process and tiles — compact
 * ---------------------------------------------------------------------------
 * All four of these sections were single-column stacks: four full-width index
 * rows for services, four more for process, eight full-width product tiles and
 * a set of project tiles. On a phone that is thousands of pixels of scroll to
 * read about twelve short things.
 *
 * They become grids. The block markup does not change at all — these sections
 * stay exactly as editable as they were — only the way the same elements are
 * laid out.
 * ------------------------------------------------------------------------- */

/* --- Services / process: ghost numerals ----------------------------------- */

/*
 * No boxes. Each item is opened by a hairline rule and backed by an oversized
 * numeral that acts as texture rather than information — the readable number is
 * the shape it makes, not the digits. Services outlines the numeral, process
 * fills it, which keeps two structurally identical sections from reading as the
 * same section twice.
 *
 * Markup is untouched: this is the same .agama-index__row / __num / __title /
 * __body the blocks have always produced.
 */

.agama-index {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
	gap: 0 clamp(1.5rem, 3vw, 3rem);
	border-block-start: 0;
}

.agama-index__row,
.agama-timeline .agama-index__row {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: clamp(1.4rem, 2.6vw, 2rem) 0 clamp(1.5rem, 3vw, 2.5rem);
	border: 0;
	border-block-start: 1px solid var(--agama-line);
	overflow: clip;
}

/* The wash belonged to a boxed row. Here the numeral does the reacting. */
.agama-index__row::before {
	display: none;
}

/*
 * In flow above the title, not absolutely behind it. Behind was the nicer idea
 * and it is what the sketch showed, but in a four-up column there is no width
 * to clear a 5rem numeral: the body copy ran straight through the digits. It
 * keeps the scale and the ghosting, and loses only the overlap.
 */
.agama-index__num {
	position: static;
	margin: 0 0 0.2rem;
	padding: 0;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--agama-font-display);
	font-size: clamp(2.6rem, 1.9rem + 2.2vw, 4.25rem);
	line-height: 0.74;
	letter-spacing: -0.03em;

	/* Outlined: transparent fill, hairline stroke. */
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--agama-ink) 26%, transparent);
	pointer-events: none;
	transition: -webkit-text-stroke-color var(--agama-t-base) var(--agama-ease),
		color var(--agama-t-base) var(--agama-ease);
}

/* Process fills its numerals instead of outlining them. */
.agama-timeline .agama-index__num {
	color: color-mix(in srgb, var(--agama-ink) 17%, transparent);
	-webkit-text-stroke: 0;
}

.agama-index__row:hover .agama-index__num {
	-webkit-text-stroke-color: color-mix(in srgb, var(--agama-accent) 70%, transparent);
}

.agama-timeline .agama-index__row:hover .agama-index__num {
	color: color-mix(in srgb, var(--agama-accent) 38%, transparent);
}

.agama-index__title {
	margin-block: 0 !important;
	font-size: var(--agama-fs-lg);
}

.agama-index__body {
	margin-block: 0;
	max-width: 32ch;
	font-size: var(--agama-fs-sm);
	color: var(--agama-ink-muted);
}

/* On ink the stroke has to lighten or the numeral disappears. */
.agama-band--ink .agama-index__num {
	-webkit-text-stroke-color: rgba(251, 250, 244, 0.28);
}

.agama-band--ink .agama-timeline .agama-index__num {
	color: rgba(251, 250, 244, 0.13);
}

/* The spine ran down a single column of rows, and there is no single column
   now. It is drawn three ways — a ::before rail, a ::after progress line
   scrubbed by motion.js, and a background gradient ghost on the element — so
   all three have to go, not just the one. */
.agama-timeline::before,
.agama-timeline::after {
	display: none;
}

.agama-timeline {
	background-image: none;
}

@media (max-width: 899px) {
	.agama-index {
		grid-template-columns: 1fr 1fr;
		gap: 0 clamp(0.9rem, 3vw, 1.4rem);
	}

	.agama-index__row,
	.agama-timeline .agama-index__row {
		padding: 1rem 0 1.25rem;
		gap: 0.25rem;
	}

	.agama-index__num {
		font-size: 2.4rem;
	}

	.agama-index__title {
		font-size: var(--agama-fs-base);
	}

	.agama-index__body { font-size: var(--agama-fs-xs); }
}

/* --- Tiles: two per row on phones ----------------------------------------- */

/*
 * This reverses an earlier call that one tile per row was the phone layout,
 * on the grounds that two 4:3 images side by side were too cramped. Two up is
 * cramped; eight full-bleed tiles in a column is worse, and the tile only has
 * to carry a name and one line.
 */
@media (max-width: 899px) {
	.agama-tiles,
	.agama-tiles--2 {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem clamp(0.6rem, 2vw, 0.9rem);
	}

	.agama-tiles .agama-tile__media img,
	.agama-tiles--2 .agama-tile__media img {
		aspect-ratio: 4 / 3;
	}

	.agama-tile__title { font-size: var(--agama-fs-base); }
	.agama-tile__meta  { font-size: var(--agama-fs-xs); }
}

/* ---------------------------------------------------------------------------
 * 29. Trusted-by logo marquee
 * ---------------------------------------------------------------------------
 * Full-bleed, edge to edge, so it reads as a band of logos passing rather than
 * a boxed list. It sits outside .agama-inner for that reason — only the eyebrow
 * above it is held to the content column.
 * ------------------------------------------------------------------------- */

.agama-marquee {
	display: flex;
	width: 100%;
	overflow: hidden;
	margin-block-start: clamp(1.25rem, 3vw, 2rem);

	/* Fade both ends so logos enter and leave instead of being cut off. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

@keyframes agama-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.agama-marquee__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	padding-inline-end: clamp(2.5rem, 6vw, 5.5rem);
	animation: agama-marquee-scroll var(--agama-marquee-duration, 30s) linear infinite;
	will-change: transform;
}

/* Reading a logo is easier when it holds still. */
.agama-marquee:hover .agama-marquee__track,
.agama-marquee:focus-within .agama-marquee__track {
	animation-play-state: paused;
}

.agama-marquee__item {
	margin: 0;
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--agama-font-display);
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.6rem);
	color: var(--agama-ink-muted);
	transition: color var(--agama-t-base) var(--agama-ease);
}

.agama-marquee__item:hover { color: var(--agama-ink); }

/*
 * Once real logo files land, each item becomes an Image block instead of a
 * paragraph. These rules mean that swap needs no CSS change: the image is
 * capped to the band height and desaturated so a set of mismatched brand
 * colours still reads as one row.
 */
.agama-marquee__item img,
.agama-marquee .wp-block-image img {
	display: block;
	width: auto;
	height: clamp(1.6rem, 1.1rem + 1.6vw, 2.75rem);
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter var(--agama-t-base) var(--agama-ease),
		opacity var(--agama-t-base) var(--agama-ease);
}

.agama-marquee .wp-block-image {
	margin: 0;
	flex: 0 0 auto;
}

.agama-marquee .wp-block-image:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* No infinite motion for anyone who has asked for none — the full set is still
   present and readable, it simply sits still. */
@media (prefers-reduced-motion: reduce) {
	.agama-marquee__track {
		animation: none;
	}

	.agama-marquee {
		overflow-x: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 30. Services and process — tighter, quieter
 * ---------------------------------------------------------------------------
 * Section 28 turned both stacks into four-up grids, which fixed the scroll.
 * What it left behind is a height problem of a different kind: a 4.25rem ghost
 * numeral above every cell, inside a band padded to 7.5rem top and bottom, for
 * four items that carry one line of copy each. The numerals outweigh the words
 * they label.
 *
 * So the numeral stops being a display element and goes back to being a label:
 * small, tracked, aligned to the hairline that opens each cell. The height that
 * frees up comes out of the band rather than being redistributed.
 *
 * The two sections still have to read as two sections. Services keeps the bare
 * numeral on a rule; process puts the same numeral in a chip on a connecting
 * line, which is what a sequence looks like and what a list of capabilities
 * does not.
 *
 * Markup is untouched again — every selector here already exists in the blocks.
 * Band padding is reached with :has(), so no wrapper class has to be added to
 * content that lives in the database.
 * ------------------------------------------------------------------------- */

/* --- The band stops being mostly air -------------------------------------- */

.agama-band:has(> .agama-inner > .agama-index) {
	padding-block: clamp(2.75rem, 1.75rem + 3vw, 4.75rem);
}

.agama-band:has(> .agama-inner > .agama-index) .agama-head {
	margin-block-end: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

.agama-band:has(> .agama-inner > .agama-index) .agama-head__title {
	font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem) !important;
	max-width: 18ch;
}

/* --- Grid: four narrow columns, generous gutters --------------------------- */

.agama-index {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 0 clamp(1.25rem, 2.5vw, 2.75rem);
}

.agama-index__row,
.agama-timeline .agama-index__row {
	gap: 0.4rem;
	padding: clamp(0.85rem, 1.4vw, 1.1rem) 0 clamp(1rem, 1.8vw, 1.5rem);
	border-block-start: 1px solid var(--agama-line);
	transition: border-block-start-color var(--agama-t-base) var(--agama-ease);
}

.agama-index__row:hover,
.agama-timeline .agama-index__row:hover {
	border-block-start-color: var(--agama-ink);
}

/* --- The numeral is a label again ----------------------------------------- */

/*
 * Undoing section 28's display treatment explicitly rather than editing it in
 * place: the outlined numeral is still the right idea at a size that has room
 * for a stroke, and other sections may yet want it.
 */
.agama-index__num,
.agama-timeline .agama-index__num {
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	color: var(--agama-ink-muted);
	-webkit-text-stroke: 0;
	margin: 0;
	transition: color var(--agama-t-base) var(--agama-ease);
}

.agama-index__row:hover .agama-index__num,
.agama-timeline .agama-index__row:hover .agama-index__num {
	color: var(--agama-accent-deep);
	-webkit-text-stroke: 0;
}

.agama-index__title {
	font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem) !important;
	line-height: 1.15;
}

.agama-index__body {
	font-size: var(--agama-fs-sm);
	line-height: 1.5;
	max-width: 30ch;
}

/* --- Process: a sequence, not a second list -------------------------------- */

/*
 * The chip sits on the cell's own top rule and a connector runs from it to the
 * next one, so the four steps read left to right as one line with four stops.
 * The connector is drawn per row and suppressed on the last, which means it
 * survives any number of steps and any wrap onto a second line.
 */
.agama-timeline .agama-index__row {
	border-block-start: 0;
	padding-block-start: 0;
	gap: 0.55rem;
}

.agama-timeline .agama-index__num {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--agama-line);
	border-radius: 50%;
	background-color: var(--agama-base);
	letter-spacing: 0.04em;
	transition: background-color var(--agama-t-base) var(--agama-ease),
		border-color var(--agama-t-base) var(--agama-ease),
		color var(--agama-t-base) var(--agama-ease);
}

.agama-band--surface .agama-timeline .agama-index__num {
	background-color: var(--agama-surface);
}

.agama-timeline .agama-index__row:hover .agama-index__num {
	background-color: var(--agama-ink);
	border-color: var(--agama-ink);
	color: var(--agama-base);
}

.agama-timeline .agama-index__row::after {
	content: "";
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: 2.5rem;
	inset-inline-end: calc(clamp(1.25rem, 2.5vw, 2.75rem) * -1);
	height: 1px;
	background-color: var(--agama-line);
	pointer-events: none;
}

.agama-timeline .agama-index__row:last-child::after {
	display: none;
}

/* --- On ink ---------------------------------------------------------------- */

.agama-band--ink .agama-index__row,
.agama-band--ink .agama-timeline .agama-index__row {
	border-block-start-color: rgba(251, 250, 244, 0.18);
}

.agama-band--ink .agama-index__row:hover {
	border-block-start-color: var(--agama-base);
}

.agama-band--ink .agama-index__num,
.agama-band--ink .agama-timeline .agama-index__num {
	color: var(--agama-on-ink-dim);
	-webkit-text-stroke: 0;
}

.agama-band--ink .agama-timeline .agama-index__num {
	background-color: var(--agama-ink);
	border-color: rgba(251, 250, 244, 0.28);
}

.agama-band--ink .agama-timeline .agama-index__row::after {
	background-color: rgba(251, 250, 244, 0.18);
}

/* --- Phone: two up, connector off ------------------------------------------ */

/*
 * Two columns means every second chip would trail a connector into the gutter
 * and every wrap would start a line that goes nowhere. The chips alone still
 * number the steps.
 */
@media (max-width: 899px) {
	.agama-index {
		grid-template-columns: 1fr 1fr;
		gap: 0 clamp(0.9rem, 3vw, 1.4rem);
	}

	.agama-index__row,
	.agama-timeline .agama-index__row {
		padding: 0.75rem 0 1rem;
		gap: 0.35rem;
	}

	.agama-index__num {
		font-size: var(--agama-fs-xs);
	}

	.agama-timeline .agama-index__num {
		width: 1.75rem;
		height: 1.75rem;
	}

	.agama-timeline .agama-index__row::after {
		display: none;
	}

	.agama-index__title {
		font-size: var(--agama-fs-base) !important;
	}

	.agama-index__body {
		font-size: var(--agama-fs-xs);
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * 31. Trusted-by marquee — real logos
 * ---------------------------------------------------------------------------
 * The wordmark placeholders are gone; these are the clients' own lockups. That
 * swap brings a problem the text version did not have: the six marks are not
 * one shape. Woodstyles and Elalan are wide horizontal wordmarks, Craneburg,
 * Woodscope and Trustwood stack a mark above the name, and ITB is a square
 * diamond with no wordmark at all. Scaled to a single height — which is what
 * section 29 does — the wide ones bulk out to five times the width of the
 * diamond, and the stacked ones spend their height on the mark and render the
 * company name too small to read.
 *
 * So height stops being uniform and becomes per-logo: one base height, and a
 * multiplier on each mark that trades a little geometric consistency for the
 * optical kind. The numbers are eyeballed against each other rather than
 * derived — there is no formula for "these read as the same size", and the
 * aspect ratios are too far apart for area-matching to land.
 * ------------------------------------------------------------------------- */

.agama-marquee {
	--agama-logo-h: clamp(1.6rem, 1.1rem + 1.6vw, 2.75rem);
}

.agama-marquee__item img,
.agama-marquee .wp-block-image img {
	height: calc(var(--agama-logo-h) * var(--agama-logo-scale, 1));
}

/* Wide wordmarks come down; stacked lockups and the bare mark go up. */
.agama-marquee__item--woodstyles { --agama-logo-scale: 0.8; }
.agama-marquee__item--elalan     { --agama-logo-scale: 0.95; }
.agama-marquee__item--trustwood  { --agama-logo-scale: 1.15; }
.agama-marquee__item--itb        { --agama-logo-scale: 1.2; }
.agama-marquee__item--woodscope  { --agama-logo-scale: 1.4; }
.agama-marquee__item--craneburg  { --agama-logo-scale: 1.4; }

/*
 * A figure is not a paragraph. The item class was carrying display-font and
 * font-size rules that meant something when it wrapped text and now only risk
 * adding stray line-height around the image.
 */
.agama-marquee__item.wp-block-image {
	display: flex;
	align-items: center;
	font-size: 0;
	line-height: 0;
}

/*
 * The stacked lockups are taller than the wide ones, so the band has to clear
 * the tallest of them rather than the average, or the marquee crops its own
 * logos at the largest viewport.
 */
.agama-marquee {
	align-items: center;
	min-height: calc(var(--agama-logo-h) * 1.4);
}

/* ---------------------------------------------------------------------------
 * 32. Marquee — one line, hard edges
 * ---------------------------------------------------------------------------
 * Two corrections to how the logo row was built.
 *
 * First, alignment. Section 31 gave each logo its own height, and because each
 * figure was only as tall as the image inside it, every logo also defined its
 * own box. Six boxes of six heights, each centred against its neighbours,
 * produce a row that steps up and down rather than sitting on a line. The fix
 * separates the two jobs: every item now gets an identical slot, tall enough
 * for the tallest lockup, and the per-logo scale only sizes the artwork inside
 * that fixed slot. Same box everywhere, centred in it — one line.
 *
 * The scales are also pulled in toward 1. Section 31 spread them 0.8–1.4 for
 * optical balance, but past a certain spread "optically balanced" stops being
 * distinguishable from "misaligned", which is what it looked like. The stacked
 * lockups still get room; they just no longer tower.
 *
 * Second, the soft edges. Section 29 masked both ends with a gradient so logos
 * faded in and out. It reads as blur rather than as motion, so the mask goes
 * and the ends are cut clean. Nothing else about the loop changes: the track is
 * still duplicated and still travels its own width, so the seam stays seamless
 * without the fade hiding it.
 * ------------------------------------------------------------------------- */

/* --- Hard edges ------------------------------------------------------------ */

.agama-marquee {
	-webkit-mask-image: none;
	mask-image: none;
}

/* --- One slot height for every logo ---------------------------------------- */

.agama-marquee__track {
	align-items: center;
}

.agama-marquee__item.wp-block-image {
	/* The slot: identical for all six, sized to clear the tallest lockup —
	   which is now ITB at 1.4, so the slot has to exceed that or max-height
	   below silently crops it back down. */
	height: calc(var(--agama-logo-h) * 1.45);
	display: flex;
	align-items: center;
	justify-content: center;
}

.agama-marquee__item img,
.agama-marquee .wp-block-image img {
	/* The artwork: tuned per logo, but always centred in the slot above. */
	height: calc(var(--agama-logo-h) * var(--agama-logo-scale, 1));
	width: auto;
	max-height: 100%;
	object-fit: contain;
}

/* Tighter spread than section 31 — enough to balance, not enough to read as
   a broken line. */
.agama-marquee__item--woodstyles { --agama-logo-scale: 0.85; }
.agama-marquee__item--elalan     { --agama-logo-scale: 0.95; }
.agama-marquee__item--trustwood  { --agama-logo-scale: 1.1; }
.agama-marquee__item--woodscope  { --agama-logo-scale: 1.25; }
.agama-marquee__item--craneburg  { --agama-logo-scale: 1.25; }

/* The diamond is the one mark with no wordmark beside it, so height alone
   understates it — a square at the wordmarks' height reads as half their size.
   It gets the top of the range and still sits smallest. */
.agama-marquee__item--itb        { --agama-logo-scale: 1.4; }

/* The band clears the slot, not the tallest image, now that they are the same
   thing. */
.agama-marquee {
	min-height: calc(var(--agama-logo-h) * 1.45);
}

/*
 * Safety net for the above. The parallax attribute is applied by a PHP filter
 * that the marquee now opts out of, but the block markup lives in the database
 * and can be rebuilt by hand in the editor. If a logo ever reaches the page
 * carrying the attribute anyway, it still must not scale — a 1.06 upscale on
 * artwork this small is visible as softness, which is the whole reason these
 * are excluded.
 */
.agama-marquee [data-parallax] img,
.agama-marquee__item img {
	transform: none;
	will-change: auto;
}

/* ---------------------------------------------------------------------------
 * 33. Marquee — the clone must not inherit block-gap
 * ---------------------------------------------------------------------------
 * The second pass of logos sat about 13px below the first, then jumped back
 * into line when the loop restarted.
 *
 * The cause is an interaction between the flow layout and the cloned track.
 * WordPress gives every flow child a block-gap margin and then cancels it on
 * the last one — `:where(.is-layout-flow) > :last-child { margin-block-end: 0 }`.
 * In the markup the theme actually ships there is exactly one track, so it is
 * both first and last child and carries no margin at all. marquee.js then
 * appends the duplicate at runtime, the original stops being :last-child, and
 * it silently gains a 1.5em (25.5px) bottom margin that was never in the CSS
 * anyone wrote.
 *
 * That margin then becomes vertical displacement because the band centres its
 * children: `align-items: center` centres each track's MARGIN box, not its
 * border box, so a track with 25.5px hanging off the bottom has its logos
 * pushed 12.75px up — precisely half — while the clone, with no margin, sits
 * centred. Hence one row on the line and one below it, alternating forever.
 *
 * Block-gap is meaningless here regardless: the two tracks are side-by-side
 * flex items in a row, and the only vertical position either should have is
 * centred. So the margins go, and the fix holds however many tracks the script
 * ends up appending.
 * ------------------------------------------------------------------------- */

.agama-marquee > *,
.agama-marquee > .agama-marquee__track {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
 * 34. Tile arrow — a shape, not a character
 * ---------------------------------------------------------------------------
 * On iOS the tile's diagonal arrow rendered as a full-colour emoji. On macOS it
 * rendered as the thin monochrome glyph it was meant to be.
 *
 * Nothing platform-specific was written; the difference is font fallback.
 * `.agama-tile__title` uses the display stack — "Instrument Serif", Georgia,
 * "Times New Roman", serif — and none of those carry U+2197 NORTH EAST ARROW.
 * A missing glyph sends the browser down its own fallback chain, and the two
 * chains do not agree: macOS reaches a monochrome symbol face (Apple Symbols,
 * STIX) before anything else that has the character, while iOS ships far fewer
 * text faces and lands on Apple Color Emoji. Same CSS, same character, two
 * completely different pictures — and it only showed on phones because the
 * arrow appears on :focus-within, which is what a tap produces.
 *
 * U+FE0E would ask for text presentation and mostly works, but "mostly" is the
 * problem: it is still a request that a font somewhere must be able to honour.
 * So the arrow stops being a character. An inline SVG mask filled with
 * currentColor renders identically on every platform, inherits the text colour
 * exactly as the glyph did, and scales with the type because it is sized in em.
 * The only thing it no longer does is depend on a font.
 * ------------------------------------------------------------------------- */

:root {
	/* Two strokes: the shaft, and the head. Stroke colour is irrelevant — a
	   mask reads alpha, and the fill comes from background-color below. */
	--agama-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 18.4 5.6'/%3E%3Cpath d='M9.4 5.6h9v9'/%3E%3C/svg%3E");
}

.agama-tile__title::after {
	content: "";
	width: 0.95em;
	height: 0.95em;
	vertical-align: -0.06em;
	background-color: currentColor;
	-webkit-mask: var(--agama-arrow-ne) center / contain no-repeat;
	mask: var(--agama-arrow-ne) center / contain no-repeat;
}

/*
 * Belt and braces for the arrows that are still characters. U+2192 is not an
 * emoji-presentation codepoint so it has never been reported wrong, but it sits
 * in the same display stack with the same missing-glyph exposure. Asking for
 * text presentation costs nothing and is ignored where it is not needed.
 */
.agama-btn--arrow:not(.wp-block-button)::after,
.agama-btn--arrow > .wp-block-button__link::after,
.agama-card:has(.agama-card__link) .agama-card__title::after {
	font-variant-emoji: text;
}

/* ---------------------------------------------------------------------------
 * 35. Home page — September revisions
 * ---------------------------------------------------------------------------
 * Client-requested, in one pass: a smaller hero title, the process band on a
 * warm beige, the trusted-by band reversed to white logos on ink, and the
 * product categories two to a row. Every selector here targets a structure that
 * exists only on the home page, so no other page moves.
 * ------------------------------------------------------------------------- */

:root {
	/*
	 * Beige, derived rather than invented. The palette's surface is too close to
	 * base to read as a colour of its own — it reads as "slightly off-white" —
	 * so it is warmed with the terracotta accent. Staying inside the palette
	 * keeps the new band from looking imported from a different site.
	 */
	--agama-beige: color-mix(in srgb, var(--agama-surface) 88%, var(--agama-accent-warm));
}

/* --- Hero title: a size down ------------------------------------------------ */

/*
 * The title had four competing size rules across sections 19–27, two of them
 * !important. Rather than edit each, one rule at higher specificity settles it
 * — roughly a quarter smaller at every width.
 */
.agama-hero-scroll .agama-hero-scroll__title {
	font-size: clamp(1.75rem, 0.8rem + 2.9vw, 3.25rem) !important;
}

@media (max-width: 899px) {
	.agama-hero-scroll .agama-hero-scroll__title {
		font-size: clamp(1.6rem, 0.8rem + 3.4vw, 2.2rem) !important;
	}
}

/* --- Process on beige ------------------------------------------------------ */

.agama-band:has(> .agama-inner > .agama-timeline) {
	background-color: var(--agama-beige);
}

/* The step chips are filled with the band colour so the connector line reads
   as passing behind them; on beige they must be beige too, or each chip sits
   in an off-white disc. */
.agama-band:has(> .agama-inner > .agama-timeline) .agama-timeline .agama-index__num {
	background-color: var(--agama-beige);
	border-color: color-mix(in srgb, var(--agama-ink) 22%, transparent);
}

.agama-band:has(> .agama-inner > .agama-timeline) .agama-timeline .agama-index__row::after {
	background-color: color-mix(in srgb, var(--agama-ink) 18%, transparent);
}

/* --- Trusted by: white logos on the footer's ink ------------------------- */

/*
 * First built on the olive accent, then moved to ink at the client's request so
 * it matches the footer. Same token as .agama-footer, so the two cannot drift.
 */
.agama-band:has(> .agama-marquee) {
	background-color: var(--agama-ink);
}

/* The eyebrow's short rule uses currentColor, so this recolours both. Same dim
   tone as the eyebrows on the site's other ink bands. */
.agama-band:has(> .agama-marquee) .agama-eyebrow {
	color: var(--agama-on-ink-dim);
}

/*
 * brightness(0) collapses every opaque pixel to black and invert(1) turns that
 * black to white: a one-colour reversed logo from whatever colours the file
 * had. It relies on the logo's background being transparent — true for all six
 * now that ITB's diamond fill has been cut out of its file, which is why that
 * logo needed an asset change and the rest did not.
 *
 * Section 29 greyed the logos and brought colour back on hover. Colour has no
 * meaning in a one-colour row, so hover only lifts the opacity.
 */
.agama-band .agama-marquee .wp-block-image img,
.agama-band .agama-marquee__item img {
	filter: brightness(0) invert(1);
	opacity: 0.88;
}

.agama-band .agama-marquee .wp-block-image:hover img {
	filter: brightness(0) invert(1);
	opacity: 1;
}

/* --- What we offer: two per row, one on phones ----------------------------- */

/*
 * The home page's category grid is the only capped grid that is not also the
 * two-up project grid, which is what the :not() keys on. Capping still shows
 * four, so two per row gives exactly two rows on desktop, then the button.
 *
 * Images go to 3:2 at this width, as the project tiles already do — at 4:3 two
 * half-width tiles stand nearly 500px tall and the section doubles in height.
 */
.agama-tiles.agama-tiles--capped:not(.agama-tiles--2) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2.5vw, 2rem);
}

.agama-tiles.agama-tiles--capped:not(.agama-tiles--2) .agama-tile__media img {
	aspect-ratio: 3 / 2;
}

@media (max-width: 899px) {
	.agama-tiles.agama-tiles--capped:not(.agama-tiles--2) {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.agama-tiles.agama-tiles--capped:not(.agama-tiles--2) .agama-tile__media img {
		aspect-ratio: 4 / 3;
	}

	.agama-tiles.agama-tiles--capped:not(.agama-tiles--2) .agama-tile__title {
		font-size: clamp(1.15rem, 1rem + 0.8vw, 1.35rem);
	}

	.agama-tiles.agama-tiles--capped:not(.agama-tiles--2) .agama-tile__meta {
		font-size: var(--agama-fs-sm);
	}
}

/* ---------------------------------------------------------------------------
 * 36. Site footer
 * ---------------------------------------------------------------------------
 * Markup from inc/footer.php, printed on blocksy:footer:before, with Blocksy's
 * own copyright row restyled underneath as the bottom bar.
 *
 * Ink, like the call-to-action band that closes most pages, so the page ends in
 * one dark block rather than dark, then cream, then a copyright line. A hairline
 * marks where the band stops and the footer starts.
 * ------------------------------------------------------------------------- */

.agama-footer {
	background-color: var(--agama-ink);
	color: color-mix(in srgb, var(--agama-base) 72%, transparent);
	border-block-start: 1px solid rgba(251, 250, 244, 0.12);
	padding-block: clamp(3rem, 2rem + 3vw, 4.75rem) clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
	font-size: var(--agama-fs-sm);
	line-height: 1.65;
}

.agama-footer__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.agama-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.agama-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
}

/* The same one-colour reversal the client logos use: the logo file is dark on
   transparent, and here it has to read on ink. */
.agama-footer__logo {
	display: inline-block;
	color: var(--agama-base);
	font-family: var(--agama-font-display);
	font-size: var(--agama-fs-lg);
	text-decoration: none;
}

.agama-footer__logo img {
	display: block;
	width: auto;
	height: clamp(3rem, 2.5rem + 1.5vw, 3.75rem);
	filter: brightness(0) invert(1);
}

.agama-footer__tagline {
	margin: 1.1rem 0 0;
	max-width: 32ch;
}

.agama-footer__cta {
	display: inline-block;
	margin-block-start: 1.35rem;
	padding: 0.7em 1.25em;
	border: 1px solid rgba(251, 250, 244, 0.35);
	border-radius: 999px;
	color: var(--agama-base);
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--agama-t-base) var(--agama-ease),
		border-color var(--agama-t-base) var(--agama-ease),
		color var(--agama-t-base) var(--agama-ease);
}

.agama-footer__cta:hover,
.agama-footer__cta:focus-visible {
	background-color: var(--agama-base);
	border-color: var(--agama-base);
	color: var(--agama-ink);
}

/* Labels match the site's eyebrows: small, tracked, quiet. */
.agama-footer__label {
	margin: 0 0 0.75rem;
	font-size: var(--agama-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--agama-base) 48%, transparent);
}

.agama-footer__text + .agama-footer__label {
	margin-block-start: 1.6rem;
}

.agama-footer__text {
	margin: 0;
	font-style: normal;
}

.agama-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.45rem;
}

.agama-footer a:not(.agama-footer__cta):not(.agama-footer__logo) {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: color var(--agama-t-base) var(--agama-ease),
		background-size var(--agama-t-base) var(--agama-ease);
}

.agama-footer a:not(.agama-footer__cta):not(.agama-footer__logo):hover,
.agama-footer a:not(.agama-footer__cta):not(.agama-footer__logo):focus-visible {
	color: var(--agama-base);
	background-size: 100% 1px;
}

/* --- Blocksy's copyright row, as the bottom bar ------------------------------ */

/*
 * Blocksy paints each footer row from its own Customizer variables, so the row
 * as well as the footer element needs the ink background, or the bar comes
 * out as a cream strip under a dark footer.
 */
footer.ct-footer,
footer.ct-footer [data-row] {
	background-color: var(--agama-ink);
}

footer.ct-footer [data-row="bottom"] > .ct-container {
	border-block-start: 1px solid rgba(251, 250, 244, 0.12);
	padding-block: 1.25rem;
}

footer.ct-footer .ct-footer-copyright {
	color: color-mix(in srgb, var(--agama-base) 48%, transparent);
	font-size: var(--agama-fs-xs);
	letter-spacing: 0.02em;
}

/*
 * Blocksy's footer rule is `[data-footer*="type-1"] .ct-footer` — an attribute
 * and a class — which outranks a bare `footer.ct-footer`, so the bar stayed on
 * Blocksy's cream. One attribute more and it takes the ink.
 */
[data-footer] footer.ct-footer {
	background-color: var(--agama-ink);
}

/*
 * Blocksy also pads the content area 60px BELOW the last block — the bottom half
 * of the same spacing section 23 removes above the hero. On a page that ends in
 * an ink band that padding is a cream stripe between two dark blocks, which
 * reads as the page breaking rather than ending. Zero it only when the content
 * actually finishes on an ink band, so pages ending on cream keep their air
 * above the footer.
 */
#main > [data-vertical-spacing]:has(.entry-content > .agama-band--ink:last-child) {
	padding-block-end: 0;
}

/* The band's margin after it would open the same stripe by another route. */
.entry-content > .agama-band--ink:last-child {
	margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
 * 37. One content edge — the logo's
 * ---------------------------------------------------------------------------
 * The header and the page content were laid out by two different containers
 * that only agreed below about 1300px. Blocksy's header container is
 * 90vw wide up to 1280px; .agama-inner was 1320px including a 5vw (max 5rem)
 * gutter. On a 1440px laptop that put every heading 52px right of the logo,
 * and on a 1920px monitor 60px — close enough to look like a mistake rather
 * than a choice.
 *
 * Rather than tune our numbers until they happened to match theirs, the inner
 * measure now IS their container: same width variable, same max-width
 * variable. The content edge is the logo edge at every width by construction,
 * phones included (Blocksy narrows to 88vw there, and this follows), and it
 * keeps following if the container width is ever changed in the Customizer.
 *
 * The fallbacks are Blocksy's current values, for the case where its variables
 * are ever missing.
 * ------------------------------------------------------------------------- */

.agama-inner {
	width: var(--theme-container-width, 90vw);
	max-width: var(--theme-normal-container-max-width, 1280px);
	padding-inline: 0;
}

/* ---------------------------------------------------------------------------
 * 38. Hero — no scrim, and a header for a light picture
 * ---------------------------------------------------------------------------
 * The client asked for the shade over the hero video to go entirely. So the
 * stage's ::after (which carried the copy shade, and on phones the footer shade)
 * and ::before (the band under the navigation) are removed rather than zeroed:
 * no element, nothing to paint or composite on every scrub frame.
 *
 * That has a consequence for the header. Everything under "has-dark-hero" was
 * written for a dark photograph: logo inverted to white, white navigation, a
 * white "Get a quote" button. The current sequence is a pale room — a beige
 * ceiling runs under the whole header — and with the shade gone white on beige
 * is close to invisible. So over this hero the header keeps its normal ink
 * colours while it is transparent. The has-dark-hero class itself stays: the
 * layout rules that pull the hero up under the header still key on it.
 * ------------------------------------------------------------------------- */

.agama-hero-scroll__stage::after,
.agama-hero-scroll__stage::before {
	content: none;
}

html:not(.is-scrolled) body.has-dark-hero header.ct-header .site-title,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .site-title a,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .menu > li > .ct-menu-link,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-toggle,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-label {
	color: var(--agama-ink);
}

html:not(.is-scrolled) body.has-dark-hero header.ct-header .site-logo-container img {
	filter: none;
}

html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger {
	--theme-icon-color: var(--agama-ink);
}

html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-icon,
html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-icon rect {
	fill: var(--agama-ink);
}

html:not(.is-scrolled) body.has-dark-hero header.ct-header .menu > li.agama-nav-cta > a.ct-menu-link {
	background-color: var(--agama-accent-deep);
	color: var(--agama-base);
}

/*
 * Phones: the copy panel under the video lost its full width in section 37.
 * That section made .agama-inner the logo's container — 88vw wide, no padding —
 * which is right for every band whose background is on the band. This panel is
 * the one .agama-inner that paints its OWN background (white, section 26), so
 * narrowing it exposed the hero's ink ground as a dark strip down each side and
 * put the copy flush against the panel's edge.
 *
 * It goes back to full width, and gets the logo's line as padding instead:
 * the same container arithmetic, applied inside rather than around. The %
 * resolves against the stage, which is full-bleed.
 */
@media (max-width: 899px) {
	.agama-hero-scroll__inner.agama-inner {
		width: 100%;
		max-width: none;
		padding-inline: calc((100% - min(var(--theme-container-width, 88vw), var(--theme-normal-container-max-width, 1280px))) / 2);
	}
}

/*
 * Desktop copy, now that there is nothing between it and the picture.
 *
 * The copy was light-on-dark, written for the scrim. On the pale sequence with
 * no scrim, measured behind the title at the top of the pin: white at the
 * starting 0.55 fade came to about 2.2:1, and even at full strength the small
 * eyebrow stayed near 3:1. So it takes the ink treatment the phone panel and
 * the header already use — ink title and eyebrow, the solid ink button, an ink
 * outline for the secondary one — at full strength from the first frame.
 *
 * The settle keeps its movement and loses its fade: a copy block that starts
 * at 55% alpha is the first thing a visitor reads, and it cannot afford to be
 * faint. Same decision section 26 made for phones, for the same reason.
 */
@media (min-width: 900px) {
	.agama-hero-scroll__inner {
		color: var(--agama-ink);
	}

	.agama-js .agama-hero-scroll__inner {
		opacity: 1;
		transition: transform 120ms linear;
	}

	.agama-hero-scroll .agama-eyebrow {
		color: var(--agama-ink-soft);
	}

	.agama-hero-scroll__title {
		color: var(--agama-ink) !important;
	}

	.agama-hero-scroll .agama-btn--on-dark > .wp-block-button__link {
		background-color: var(--agama-ink);
		border-color: var(--agama-ink);
		color: var(--agama-base);
	}

	.agama-hero-scroll .agama-btn--on-dark > .wp-block-button__link:hover,
	.agama-hero-scroll .agama-btn--on-dark > .wp-block-button__link:focus-visible {
		background-color: var(--agama-accent-deep);
		border-color: var(--agama-accent-deep);
		color: var(--agama-base);
	}

	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link {
		border-color: color-mix(in srgb, var(--agama-ink) 45%, transparent);
		color: var(--agama-ink);
	}

	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link:hover,
	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link:focus-visible {
		background-color: var(--agama-ink);
		border-color: var(--agama-ink);
		color: var(--agama-base);
	}
}

/*
 * The one place ink on this picture fails is the final frame, where a dark
 * wooden coffee table sits directly behind the title — ink on walnut. A pale
 * halo held tight to the letterforms lifts the type off the table without
 * putting any shade on the picture itself: nothing is painted where there is
 * no text. It is the glyph-level alternative to the scrim that was removed.
 */
@media (min-width: 900px) {
	.agama-hero-scroll__title,
	.agama-hero-scroll .agama-eyebrow {
		text-shadow:
			0 0 1px rgba(251, 250, 244, 0.7),
			0 0 10px rgba(251, 250, 244, 0.7),
			0 0 26px rgba(251, 250, 244, 0.45);
	}
}

/*
 * Phones: white logo and burger while the header is transparent over the hero,
 * at the client's request. Desktop keeps the ink set above.
 *
 * brightness(0) invert(1) rather than the old invert(1) brightness(1.6): the
 * logo file is a grey mark over a black wordmark, and a plain invert turns the
 * grey into a second, dimmer grey. Collapsing to black first gives one flat
 * white for both parts. The burger is three SVG rects that Blocksy fills from
 * --theme-icon-color, so both the variable and the fill are set.
 */
@media (max-width: 899px) {
	html:not(.is-scrolled) body.has-dark-hero header.ct-header .site-logo-container img {
		filter: brightness(0) invert(1);
	}

	html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger,
	html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-label {
		--theme-icon-color: var(--agama-base);
		color: var(--agama-base);
	}

	html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-icon,
	html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-icon rect {
		fill: var(--agama-base);
	}

	header.ct-header .site-logo-container img {
		transition: filter var(--agama-t-base) var(--agama-ease);
	}
}

/*
 * Desktop, at the client's request: the hero title and the secondary hero
 * button in white. (The transparent-header white set that also lived here was
 * removed when the desktop header became solid — section 39.)
 *
 * They sit on a pale picture with the scrim gone, so each carries a soft ink
 * shadow held to the letterforms — the same glyph-level approach as the halo,
 * inverted for light type. It paints nothing where there is no text.
 */
@media (min-width: 900px) {
	/* Hero title — white, with the pale halo swapped for an ink shadow. */
	.agama-hero-scroll__title {
		color: var(--agama-base) !important;
		text-shadow:
			0 1px 2px rgba(20, 21, 17, 0.4),
			0 2px 22px rgba(20, 21, 17, 0.35);
	}

	/* "Discover our materials" — white outline and label. */
	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link {
		border-color: color-mix(in srgb, var(--agama-base) 80%, transparent);
		color: var(--agama-base);
		text-shadow: 0 1px 2px rgba(20, 21, 17, 0.4), 0 0 12px rgba(20, 21, 17, 0.3);
	}

	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link:hover,
	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link:focus-visible {
		background-color: var(--agama-base);
		border-color: var(--agama-base);
		color: var(--agama-ink);
		text-shadow: none;
	}
}

/* The eyebrow joins the title in white; its short rule uses currentColor and
   follows. The pale halo it carried for ink type becomes the ink shadow. */
@media (min-width: 900px) {
	.agama-hero-scroll .agama-eyebrow {
		color: var(--agama-base);
		text-shadow: 0 1px 2px rgba(20, 21, 17, 0.45), 0 0 12px rgba(20, 21, 17, 0.35);
	}
}

/* ---------------------------------------------------------------------------
 * 39. Desktop header — solid over the hero
 * ---------------------------------------------------------------------------
 * The client wants the desktop header solid from the first frame, not
 * transparent over the video. Solid means it now hides whatever it overlays, so
 * the arrangement that made transparency work is undone on desktop:
 *
 *   - the hero is no longer pulled up 84px beneath the header (section 19/23);
 *     it starts below it, so no part of the frame is permanently covered;
 *   - the pinned stage sticks just under the header instead of at the window
 *     top, and is the window minus the header tall, so the whole frame stays
 *     in view while it scrubs. hero-scroll.js reads the stage's sticky top and
 *     offsets its progress to match, so frame 1 starts moving on the first
 *     scroll rather than after an 85px dead zone.
 *
 * Header colours come from section 38's ink set, which is what a solid base
 * header wants. Phones are untouched: they keep the transparent header over
 * the video, with the white logo and burger.
 * ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	:root {
		--agama-header-h: 85px; /* 84px row + 1px border, measured */
	}

	html:not(.is-scrolled) body.has-dark-hero header.ct-header [data-row],
	html:not(.is-scrolled) body.has-dark-hero header.ct-header [data-row*="middle"] {
		background-color: var(--agama-base);
	}

	body.has-dark-hero .entry-content > .agama-hero-scroll:first-child {
		margin-block-start: 0;
	}

	.agama-hero-scroll__stage {
		top: var(--agama-header-h);
		height: calc(100svh - var(--agama-header-h));
	}
}

/* ---------------------------------------------------------------------------
 * 40. Hero product labels (desktop)
 * ---------------------------------------------------------------------------
 * Built and positioned by hero-scroll.js: a ring on the surface, a hairline
 * leader, and a two-line caption — the product in the site's tracked caps, what
 * it is in sentence case beneath. White with the same ink shadow as the hero
 * copy, since they sit on the picture with no scrim. The layer covers the stage
 * exactly as the canvas does, so the script's cover-transform coordinates land
 * on the right pixels.
 * ------------------------------------------------------------------------- */

.agama-hero-labels {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.agama-hero-labels[hidden] {
	display: none;
}

.agama-hero-labels__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 1px 2px rgba(20, 21, 17, 0.45));
}

.agama-hero-labels__lines line {
	stroke: rgba(251, 250, 244, 0.92);
	stroke-width: 1.25;
	stroke-linecap: round;
}

.agama-hero-labels__lines circle {
	fill: rgba(251, 250, 244, 0.22);
	stroke: var(--agama-base);
	stroke-width: 1.5;
}

.agama-hero-label {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0 0 0.55rem 0.35rem;
	color: var(--agama-base);
	text-decoration: none;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(20, 21, 17, 0.5), 0 0 14px rgba(20, 21, 17, 0.35);
	will-change: transform, opacity;
}

.agama-hero-label__name {
	font-family: var(--agama-font-body);
	font-size: clamp(0.72rem, 0.6rem + 0.25vw, 0.84rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}

.agama-hero-label__meta {
	font-family: var(--agama-font-body);
	font-size: clamp(0.78rem, 0.66rem + 0.25vw, 0.9rem);
	font-weight: 400;
	line-height: 1.3;
	color: color-mix(in srgb, var(--agama-base) 86%, transparent);
}

a.agama-hero-label:hover .agama-hero-label__name,
a.agama-hero-label:focus-visible .agama-hero-label__name {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

a.agama-hero-label:focus-visible {
	outline: 2px solid var(--agama-base);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Phones have their own tracked set now (section 42), so the layer shows there
   too — it used to be hidden because only the desktop render had one. */

/* ---------------------------------------------------------------------------
 * 41. "Get in touch" band — the site's section head
 * ---------------------------------------------------------------------------
 * The closing call-to-action band (patterns/cta-band.php, on 17 pages) was
 * set in the HERO scale: an 80px title with a larger lead paragraph stacked
 * beneath it. Every other section on the site opens with the section head —
 * eyebrow, a ~54px serif title on the left, the description in a muted column
 * on the right. Next to those the band read as a second hero at the bottom of
 * each page.
 *
 * It now takes the section-head measurements exactly (title sizing from
 * .agama-head__title, description from .agama-head__aside on ink) and the same
 * 7/5 split, with the button under the description in the right column. Done
 * in CSS rather than by editing the markup on 17 pages; the selector keys on
 * the band's own structure — an ink band whose reveal group holds a hero2 title
 * — which nothing else on the site has.
 * ------------------------------------------------------------------------- */

.agama-band--ink .agama-reveal:has(> .agama-hero2__title) > .agama-hero2__title {
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem) !important;
	line-height: 1.02;
	letter-spacing: -0.02em;
	max-width: 20ch;
	margin-block: 0.35rem 0 !important;
}

.agama-band--ink .agama-reveal:has(> .agama-hero2__title) > .agama-lead {
	font-size: var(--agama-fs-base);
	line-height: 1.6;
	max-width: 42ch;
	color: var(--agama-on-ink);
}

@media (min-width: 900px) {
	.agama-band--ink .agama-reveal:has(> .agama-hero2__title) {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: clamp(1rem, 2vw, 2rem);
		align-items: end;
	}

	.agama-band--ink .agama-reveal:has(> .agama-hero2__title) > .agama-eyebrow {
		grid-column: 1;
		grid-row: 1;
	}

	.agama-band--ink .agama-reveal:has(> .agama-hero2__title) > .agama-hero2__title {
		grid-column: 1;
		grid-row: 2;
	}

	.agama-band--ink .agama-reveal:has(> .agama-hero2__title) > .agama-lead {
		grid-column: 2;
		grid-row: 2;
		margin-block: 0 !important;
	}

	.agama-band--ink .agama-reveal:has(> .agama-hero2__title) > .wp-block-buttons {
		grid-column: 2;
		grid-row: 3;
		margin-block-start: clamp(1.25rem, 2vw, 1.75rem) !important;
	}
}

/* ---------------------------------------------------------------------------
 * 42. Phone hero — full-bleed, like the desktop one
 * ---------------------------------------------------------------------------
 * Section 25 made the phone hero a media band with the copy on a white panel
 * beneath it, because the phone render was a near-square crop that would have
 * lost the room if it filled a handset.
 *
 * The new phone render is portrait, made for this shape, and the client wants it
 * uncropped. Uncropped and stacked do not fit together: at 1080x1920 the band
 * alone is 693px on a 390px-wide phone, and with the copy panel under it the
 * sticky stage is taller than the screen — a pinned stage taller than the
 * viewport hides its own bottom. So the phone hero becomes what the desktop one
 * is: the sequence fills the stage, and the copy and the product labels sit over
 * it. Full height is shown; cover trims a little width at the sides, which is
 * the only way to fill a 19.5:9 screen with a 16:9-tall render.
 *
 * The copy therefore goes back to light-on-picture, mirroring the desktop set in
 * section 38/39 — including the ink shadow that replaced the scrim.
 * ------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.agama-hero-scroll__stage {
		height: 100svh;
		min-height: 0;
		grid-template-columns: 100%;
		grid-template-rows: 1fr;
		place-items: end start;
	}

	/* Back to layers in one cell, rather than the two stacked rows of §25. */
	.agama-hero-scroll__canvas,
	.agama-hero-scroll__poster {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		max-height: none;
		grid-row: auto;
		grid-column: auto;
	}

	.agama-hero-scroll__poster img {
		height: 100%;
	}

	.agama-hero-scroll__inner {
		position: relative;
		z-index: 3;
		grid-row: auto;
		grid-column: auto;
		align-self: end;
		background-color: transparent;
		color: var(--agama-base);
		padding-block: 0 clamp(1.75rem, 6vw, 2.75rem);
	}

	.agama-hero-scroll .agama-eyebrow,
	.agama-hero-scroll__title {
		color: var(--agama-base) !important;
		text-shadow: 0 1px 2px rgba(20, 21, 17, 0.45), 0 0 14px rgba(20, 21, 17, 0.35);
	}

	/* The secondary button was inked for the white panel; on the picture it is
	   the outlined light one again, as on desktop. */
	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link {
		background-color: transparent;
		border-color: color-mix(in srgb, var(--agama-base) 80%, transparent);
		color: var(--agama-base);
		text-shadow: 0 1px 2px rgba(20, 21, 17, 0.4);
	}

	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link:hover,
	.agama-hero-scroll .agama-btn--ghost-light > .wp-block-button__link:focus-visible {
		background-color: var(--agama-base);
		border-color: var(--agama-base);
		color: var(--agama-ink);
		text-shadow: none;
	}

	/* Captions are tighter on a phone: the picture is narrower and the copy sits
	   under them. Leaders and rings are finer to match the smaller type — at
	   desktop weight they read heavier than the captions they point from. */
	.agama-hero-label {
		padding-bottom: 0.35rem;
	}

	.agama-hero-label__name {
		font-size: 0.6rem;
		letter-spacing: 0.1em;
	}

	.agama-hero-label__meta {
		font-size: 0.66rem;
	}

	.agama-hero-labels__lines line {
		stroke-width: 0.8;
	}

	.agama-hero-labels__lines circle {
		stroke-width: 1;
	}
}

/* ---------------------------------------------------------------------------
 * 43. One design across pages — the home page's scale and edges
 * ---------------------------------------------------------------------------
 * The home page was rebuilt section by section; the inner pages kept earlier
 * decisions. A measured audit at 1440px (headings, body text, section edges on
 * twelve page types) found four systematic differences, fixed here by class so
 * every page that uses the pattern follows, with no page edited:
 *
 *   1. Page titles were 72px (.agama-pagehead) against the home page's 52–54px.
 *      They take the home section-title scale.
 *   2. The intro under a page title was 21.5px against 17px body text
 *      everywhere on the home page.
 *   3. Section titles written as plain headings (the Staron pages, Colours,
 *      Downloads, Contact, About) were 38.5px against 54px.
 *   4. The older .agama-section--surface/--dark sections are boxed: a 1280px
 *      rounded card with 56px padding, so the colour stopped short of the
 *      screen and the content started at 136px instead of the logo line. The
 *      home page uses full-width bands. They become bands — colour edge to edge
 *      via a clipped shadow, content back on the logo line — and the dark one,
 *      the sample call-to-action, takes the home "Get in touch" layout.
 * ------------------------------------------------------------------------- */

/* 1 + 3. Page titles and plain section titles: the section-head scale. */
.agama-pagehead .agama-hero2__title,
.entry-content > .agama-section > h1,
body.single-staron_colour h1.agama-display,
body.single-staron_colour .agama-section > h2,
.entry-content :is(.agama-section, .agama-band) h2.wp-block-heading:not([class*="agama-"]) {
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem) !important;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.agama-pagehead .agama-hero2__title,
.entry-content > .agama-section > h1 {
	max-width: 20ch;
}

/* 2. Intro text: home body size. */
.agama-pagehead .agama-lead,
.entry-content > .agama-section > .agama-lead {
	font-size: var(--agama-fs-base);
	line-height: 1.6;
}

/* 4. Boxed sections become full-width bands. The shadow paints the band colour
      out to the viewport edges and clip-path keeps it from spilling vertically;
      neither affects layout, so nothing scrolls sideways. */
.entry-content > .agama-section--surface,
.entry-content > .agama-section--dark {
	padding-inline: 0;
	border-radius: 0;
	clip-path: inset(0 -100vmax);
}

.entry-content > .agama-section--surface {
	box-shadow: 0 0 0 100vmax var(--agama-surface);
}

.entry-content > .agama-section--dark {
	box-shadow: 0 0 0 100vmax var(--agama-ink);
}

/* Full-width colour meeting full-width colour: no strip of page between. */
.entry-content > .agama-section + .agama-section--surface,
.entry-content > .agama-section + .agama-section--dark,
.entry-content > .agama-section--surface + .agama-section,
.entry-content > .agama-section--dark + .agama-section {
	margin-block-start: 0;
}

/* The dark call-to-action, laid out as the home "Get in touch" band (§41). */
.entry-content > .agama-section--dark > p:not(.agama-eyebrow) {
	font-size: var(--agama-fs-base);
	line-height: 1.6;
	max-width: 42ch;
	color: var(--agama-on-ink);
}

.entry-content > .agama-section--dark > h2 {
	max-width: 20ch;
}

@media (min-width: 900px) {
	.entry-content > .agama-section--dark:has(> h2) {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: clamp(1rem, 2vw, 2rem);
		align-items: end;
	}

	.entry-content > .agama-section--dark:has(> h2) > .agama-eyebrow {
		grid-column: 1;
		grid-row: 1;
	}

	.entry-content > .agama-section--dark:has(> h2) > h2 {
		grid-column: 1;
		grid-row: 2;
		margin-block: 0.35rem 0;
	}

	.entry-content > .agama-section--dark:has(> h2) > p:not(.agama-eyebrow) {
		grid-column: 2;
		grid-row: 2;
		margin-block: 0;
	}

	.entry-content > .agama-section--dark:has(> h2) > .wp-block-buttons {
		grid-column: 2;
		grid-row: 3;
		margin-block-start: clamp(1.25rem, 2vw, 1.75rem);
	}
}

/*
 * Three things the first screenshots of §43 showed on the Staron pages.
 *
 * These sections use WordPress's constrained layout, which gives every child
 * `margin-inline: auto !important`. In the call-to-action grid that centred the
 * narrow title inside its column instead of starting it on the logo line — so
 * the title and copy are pinned left with the same weight.
 *
 * Blocksy's content spacing leaves a margin between top-level blocks. Between
 * two full-width colours that shows as a strip of page background; the home
 * bands already have it removed (§27), the old sections did not.
 *
 * And a page ending on the dark section kept Blocksy's 60px bottom padding — a
 * cream stripe above the ink footer. §36 handled that for pages ending on an ink
 * band; this is the same rule for the older dark section.
 */
.entry-content > .agama-section--dark:has(> h2) > h2,
.entry-content > .agama-section--dark:has(> h2) > p:not(.agama-eyebrow),
.entry-content > .agama-section--dark:has(> h2) > .agama-eyebrow,
.entry-content > .agama-section--dark:has(> h2) > .wp-block-buttons {
	margin-inline: 0 !important;
	justify-self: start;
}

.entry-content > .agama-section--surface,
.entry-content > .agama-section--dark,
.entry-content > .agama-section:has(+ .agama-section--surface),
.entry-content > .agama-section:has(+ .agama-section--dark) {
	margin-block-end: 0;
}

#main > [data-vertical-spacing]:has(.entry-content > .agama-section--dark:last-child) {
	padding-block-end: 0;
}

/*
 * Pages ending on any full-width band — ink, surface, or the old sections made
 * full-width above — lose Blocksy's bottom padding. On an ink ending it was a
 * cream stripe above the footer (§36); on a surface ending (Contact) it is a
 * stripe of page colour between beige and ink, which reads as a gap just the
 * same. A page ending on plain page background is unaffected either way.
 */
#main > [data-vertical-spacing]:has(.entry-content > :is(.agama-band, .agama-section--surface, .agama-section--dark):last-child) {
	padding-block-end: 0;
}

.entry-content > :is(.agama-band, .agama-section--surface, .agama-section--dark):last-child {
	margin-block-end: 0;
}

/*
 * Staron colour pages are a PHP template with no page header, so the swatch sat
 * directly under the header while every other page opens with room above its
 * title. Same opening space as .agama-pagehead. And the section title there is
 * now at the section-head scale, so it gets the section head's space below it
 * rather than sitting on the colour grid.
 */
main.agama-colour-single > .ct-container > article.agama-section {
	padding-block-start: clamp(3rem, 5vw, 6rem);
}

body.single-staron_colour .agama-section > h2 {
	margin-block: 0.35rem clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------------------------------------------------------------------------
 * 44. Staron page headers, and headers that carry an image
 * ---------------------------------------------------------------------------
 * The Staron pages open with an .agama-section rather than the .agama-pagehead
 * the other pages use, and measured against Projects they were off three ways:
 *
 *   - 164px from header to eyebrow, against 132px: the section's 104px band
 *     padding instead of the page header's 72px.
 *   - 82px from eyebrow to title, against 20px: the flow layout's gap is 1.5em,
 *     and em on a 54px title is 81px.
 *   - The title centred at 470px instead of starting at 80px: constrained
 *     layout gives children `margin-inline: auto !important`, and §43 gave the
 *     title a 20ch max-width for it to centre inside.
 */
.entry-content > .agama-section:first-child {
	padding-block-start: clamp(3rem, 5vw, 6rem);
}

.entry-content > .agama-section > .agama-eyebrow + h1,
.entry-content > .agama-section > .agama-eyebrow + h2 {
	margin-block-start: 0.35rem;
}

.entry-content > .agama-section > h1,
.entry-content > .agama-section > h2 {
	margin-inline: 0 !important;
}

.entry-content > .agama-section > h1 + .agama-lead {
	margin-block-start: clamp(1.1rem, 2vw, 1.75rem);
}

/*
 * Product pages now put the image beside the header text (text left, image
 * right, as the home "Who we are" section does), inside the page header. The
 * header's own bottom padding was sized for a title and a line of lead, so it
 * takes a full band's worth once it holds a picture.
 */
.agama-pagehead:has(> .agama-split2) {
	padding-block-end: clamp(3.5rem, 2rem + 5vw, 7.5rem);
}

.agama-pagehead .agama-split2 .agama-reveal > * + * {
	margin-block-start: 1.15rem;
}

.agama-pagehead .agama-split2 .agama-eyebrow + .agama-hero2__title {
	margin-block-start: 0.35rem;
}

/* A section title followed by content (the colour grids on the Staron pages)
   gets the section head's space below it rather than sitting on the grid. The
   dark call-to-action keeps its own grid spacing — its rule is more specific. */
.entry-content > .agama-section > .agama-eyebrow + h2 {
	margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------------------------------------------------------------------------
 * 45. Contact form
 * ---------------------------------------------------------------------------
 * Markup from inc/contact-form.php. Labels above fields, one column on phones
 * and two for the short fields on desktop; the form is held to a readable
 * measure rather than the full container. Errors are in words beside the field
 * as well as colour, so they do not rely on colour alone.
 * ------------------------------------------------------------------------- */

.agama-form {
	--agama-form-error: #a1311f;
	max-width: 56rem;
	margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

.agama-form__grid {
	display: grid;
	gap: 1.4rem clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.agama-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.agama-field--full { grid-column: 1 / -1; }
}

.agama-field[hidden] {
	display: none;
}

.agama-field__label {
	display: block;
	margin-block-end: 0.45rem;
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-sm);
	font-weight: 500;
	color: var(--agama-ink);
}

.agama-field__optional {
	font-weight: 400;
	color: var(--agama-ink-muted);
}

.agama-field__optional[hidden] {
	display: none;
}

.agama-field__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 3rem;
	padding: 0.7rem 0.9rem;
	font: inherit;
	font-size: max(16px, var(--agama-fs-base)); /* 16px+ stops iOS zooming on focus */
	line-height: 1.45;
	color: var(--agama-ink);
	background-color: var(--agama-base);
	border: 1px solid color-mix(in srgb, var(--agama-ink) 22%, transparent);
	border-radius: var(--agama-radius);
	transition: border-color var(--agama-t-base) var(--agama-ease),
		box-shadow var(--agama-t-base) var(--agama-ease);
}

.agama-field__input::placeholder {
	color: color-mix(in srgb, var(--agama-ink-muted) 70%, transparent);
}

textarea.agama-field__input {
	resize: vertical;
}

select.agama-field__input {
	appearance: none;
	padding-inline-end: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--agama-ink) 50%), linear-gradient(135deg, var(--agama-ink) 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

.agama-field__input:hover {
	border-color: color-mix(in srgb, var(--agama-ink) 40%, transparent);
}

.agama-field__input:focus {
	outline: none;
	border-color: var(--agama-accent-deep);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--agama-accent-deep) 22%, transparent);
}

.agama-field__input[aria-invalid="true"] {
	border-color: var(--agama-form-error);
}

.agama-field__input[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--agama-form-error) 20%, transparent);
}

.agama-field__hint,
.agama-field__error {
	margin: 0.4rem 0 0;
	font-size: var(--agama-fs-xs);
	line-height: 1.45;
}

.agama-field__hint {
	color: var(--agama-ink-muted);
}

.agama-field__error {
	color: var(--agama-form-error);
	font-weight: 500;
}

.agama-field__hint[hidden],
.agama-field__error[hidden] {
	display: none;
}

.agama-field__suggest {
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--agama-accent-deep);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Honeypot: off-screen, not display:none, which some bots detect and skip. */
.agama-form__trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.agama-form__summary {
	margin-block-end: 1.75rem;
	padding: 1rem 1.25rem;
	border-inline-start: 3px solid var(--agama-form-error);
	background-color: color-mix(in srgb, var(--agama-form-error) 7%, var(--agama-base));
}

.agama-form__summary:focus {
	outline: 2px solid var(--agama-form-error);
	outline-offset: 2px;
}

.agama-form__summary-title {
	margin: 0 0 0.4rem;
	font-weight: 600;
	color: var(--agama-form-error);
}

.agama-form__summary ul {
	margin: 0;
	padding-inline-start: 1.1rem;
}

.agama-form__summary a {
	color: var(--agama-ink);
}

.agama-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.5rem;
	margin-block-start: 1.75rem;
}

.agama-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3rem;
	padding: 0.85rem 1.6rem;
	font-family: var(--agama-font-body);
	font-size: var(--agama-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--agama-base);
	background-color: var(--agama-ink);
	border: 1px solid var(--agama-ink);
	border-radius: var(--agama-radius);
	cursor: pointer;
	transition: background-color var(--agama-t-base) var(--agama-ease);
}

.agama-form__submit::after {
	content: "\2192";
	font-variant-emoji: text;
}

.agama-form__submit:hover,
.agama-form__submit:focus-visible {
	background-color: var(--agama-accent-deep);
	border-color: var(--agama-accent-deep);
}

.agama-form__submit[disabled] {
	cursor: progress;
	opacity: 0.7;
}

.agama-form__privacy {
	margin: 0;
	font-size: var(--agama-fs-xs);
	color: var(--agama-ink-muted);
}

@media (max-width: 699px) {
	.agama-form__submit {
		width: 100%;
		justify-content: center;
	}
}

.agama-form-success {
	max-width: 56rem;
	margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	border-inline-start: 3px solid var(--agama-accent-deep);
	background-color: var(--agama-base);
}

.agama-form-success:focus {
	outline: none;
}

.agama-form-success__title {
	margin: 0 0 0.5rem;
	font-family: var(--agama-font-display);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.15;
	color: var(--agama-ink);
}

.agama-form-success p:last-child {
	margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
 * 46. Less space between the header and a page's title
 * ---------------------------------------------------------------------------
 * Measured at 1440px, the title sat 132px below the header on most pages: 60px
 * of Blocksy's content-area padding plus the page header's own 72px. On the
 * product pages it was 181px, because the text was centred against its taller
 * image. Blocksy's padding goes wherever a page opens with its own header, and
 * the header's opening space is roughly halved — about 52px on desktop, 32px on
 * phones — the same on every kind of page.
 * ------------------------------------------------------------------------- */

#main > [data-vertical-spacing]:has(.entry-content > :first-child:is(.agama-band--flush, .agama-section)) {
	padding-block-start: 0;
}

.agama-pagehead,
.entry-content > .agama-section:first-child,
main.agama-colour-single > .ct-container > article.agama-section {
	padding-block-start: clamp(2rem, 1rem + 2.5vw, 3.5rem);
}

/* Product headers: text starts at the top beside the image, not centred on it. */
.agama-pagehead .agama-split2 {
	align-items: start;
}

/* A plain section title straight after its eyebrow inside a band (the Contact
   page's "Send us a message") had the flow layout's 1.5em gap — about 80px at
   the section-title size. Same 0.35rem the section heads use everywhere else. */
.agama-band .agama-inner > .agama-eyebrow + h2.wp-block-heading:not([class*="agama-"]) {
	margin-block-start: 0.35rem;
}

/* ---------------------------------------------------------------------------
 * 47. One section rhythm on every page
 * ---------------------------------------------------------------------------
 * Measured at 1440px, the space between one section's content and the next
 * ranged from 96px to 250px, because sections carried five different paddings:
 * 104px standard bands, 52px "tight" strips, the 71px compact services/process
 * bands, a page header's 43px, and Staron sections collapsed to 0.
 *
 * Every section now uses the same padding, top and bottom, so the distance
 * from content to the next section's content is identical everywhere. The one
 * exception is where a page opens: the space under the site header stays at
 * §46's smaller value, as requested. The compact services/process sections keep
 * their smaller rows and type; only the space around them changes.
 *
 * !important because the variants being replaced are themselves spread across
 * earlier sections at several specificities; this is the single source now.
 * ------------------------------------------------------------------------- */

:root {
	--agama-section-space: clamp(3.5rem, 2rem + 5vw, 7.5rem);
	--agama-page-top: clamp(2rem, 1rem + 2.5vw, 3.5rem);
}

.entry-content > .agama-band:not(.agama-band--flush),
.entry-content > .agama-section {
	padding-block: var(--agama-section-space) !important;
}

/* A page header band is flush; its inner header carries the spacing. */
.entry-content > .agama-band--flush > .agama-pagehead {
	padding-block: var(--agama-page-top) var(--agama-section-space) !important;
}

/* A page that opens on a section rather than a header band (the Staron pages). */
.entry-content > .agama-section:first-child {
	padding-block-start: var(--agama-page-top) !important;
}

/* The home hero is full-bleed video, not a padded section. */
.entry-content > .agama-hero-scroll {
	padding-block: 0 !important;
}

/* Stray first/last-child margins would add to the padding unevenly. */
.entry-content > .agama-band > .agama-inner > :first-child,
.entry-content > .agama-section > :first-child,
.entry-content > .agama-band--flush > .agama-pagehead > :first-child {
	margin-block-start: 0 !important;
}

.entry-content > .agama-band > .agama-inner > :last-child,
.entry-content > .agama-section > :last-child,
.entry-content > .agama-band--flush > .agama-pagehead > :last-child {
	margin-block-end: 0 !important;
}

/* Sections butt directly against each other: the padding above is the only
   space between them. WordPress's 1.5em block gap was still adding 26px where
   an older .agama-section met another section or a band. */
.entry-content > .agama-band,
.entry-content > .agama-section {
	margin-block: 0 !important;
}

/* Back link at the top of a product or project page, above the eyebrow and
   title: small, and set a little apart from the eyebrow it sits over. */
.agama-backlink {
	font-size: var(--agama-fs-sm);
}

.agama-pagehead .agama-split2 .agama-reveal > .agama-backlink + * {
	margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
}

/* ---------------------------------------------------------------------------
 * 48. The numbers strip stays a strip
 * ---------------------------------------------------------------------------
 * §47 gave every section the same padding, which turned the figures band under
 * the hero (and on About) from a slim strip into a 300px block, with 70px
 * numerals. It is a strip of three facts, not a section: slim padding again,
 * and numerals at about half the size so they read as figures, not headlines.
 * ------------------------------------------------------------------------- */

.entry-content > .agama-band:has(.agama-figures) {
	padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem) !important;
}

.agama-figures .agama-figure__num {
	font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.75rem) !important;
	line-height: 1 !important;
}

.agama-figures .agama-figure__label {
	margin-block-start: 0.45rem;
}

/* ---------------------------------------------------------------------------
 * 49. Phone header solid from the start; readable menu arrows
 * ---------------------------------------------------------------------------
 * The phone header now matches desktop (§39): solid, sticky, ink logo and
 * burger, with the hero starting below it rather than under it. The pinned
 * video sticks just under the header and is the screen minus the header tall,
 * so no part of the frame is hidden behind it.
 *
 * The Staron dropdown arrow in the phone menu was dark olive on the menu's
 * near-black panel — about 1.3:1 — so it was effectively invisible and only
 * showed when a tap briefly highlighted it. It is light now, and the button
 * gets a 44px tap area instead of the icon's 15px.
 * ------------------------------------------------------------------------- */

@media (max-width: 899px) {
	:root {
		--agama-header-h: 85px;
	}

	html:not(.is-scrolled) body.has-dark-hero header.ct-header [data-row],
	html:not(.is-scrolled) body.has-dark-hero header.ct-header [data-row*="middle"] {
		background-color: var(--agama-base);
	}

	html:not(.is-scrolled) body.has-dark-hero header.ct-header .site-logo-container img {
		filter: none;
	}

	html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger,
	html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-label {
		--theme-icon-color: var(--agama-ink);
		color: var(--agama-ink);
	}

	html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-icon,
	html:not(.is-scrolled) body.has-dark-hero header.ct-header .ct-header-trigger .ct-icon rect {
		fill: var(--agama-ink);
	}

	body.has-dark-hero .entry-content > .agama-hero-scroll:first-child {
		margin-block-start: 0;
	}

	.agama-hero-scroll__stage {
		top: var(--agama-header-h);
		height: calc(100svh - var(--agama-header-h));
	}
}

#offcanvas .ct-toggle-dropdown-mobile {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	margin-inline-end: -14px;
	--theme-icon-color: color-mix(in srgb, var(--agama-base) 75%, transparent);
}

#offcanvas .ct-toggle-dropdown-mobile svg,
#offcanvas .ct-toggle-dropdown-mobile svg path {
	fill: color-mix(in srgb, var(--agama-base) 75%, transparent);
}

#offcanvas .ct-toggle-dropdown-mobile:hover svg,
#offcanvas .ct-toggle-dropdown-mobile:hover svg path,
#offcanvas .ct-toggle-dropdown-mobile[aria-expanded="true"] svg,
#offcanvas .ct-toggle-dropdown-mobile[aria-expanded="true"] svg path {
	fill: var(--agama-base);
}

/* ---------------------------------------------------------------------------
 * 50. A page title and its content, on the same background
 * ---------------------------------------------------------------------------
 * On Products and Download Center the page title and the grid under it are two
 * sections on the same cream, so §47 put a full section's space on each side
 * of the boundary — 208px between the intro line and the first product. With
 * no colour change to mark a new section, that read as a gap rather than a
 * break. The content now follows its title at the page-top spacing instead
 * (about 52px on desktop, 32px on phones). Where the content sits on a
 * coloured band (Projects, Contact) the full space stays: there it marks a
 * real change of section.
 * ------------------------------------------------------------------------- */

.entry-content > .agama-band--flush:has(> .agama-pagehead) + :is(.agama-band:not(.agama-band--surface):not(.agama-band--ink), .agama-section:not(.agama-section--surface):not(.agama-section--dark)) {
	padding-block-start: 0 !important;
}

.entry-content > .agama-band--flush:has(> .agama-pagehead):has(+ :is(.agama-band:not(.agama-band--surface):not(.agama-band--ink), .agama-section:not(.agama-section--surface):not(.agama-section--dark))) > .agama-pagehead {
	padding-block-end: var(--agama-page-top) !important;
}

/* ---------------------------------------------------------------------------
 * 51. Home: four sections, four designs
 * ---------------------------------------------------------------------------
 * The home page ran products and projects through the same photo-tile grid, so
 * the two read as one long list, and services and process shared the numbered
 * index rows. Following the redesign concept:
 *
 *   What We Do      → a bordered 2×2 panel of capabilities (no numerals)
 *   Recent Projects → a photo mosaic, captions over the image
 *
 * Products and process keep the numbered rows they had: on review those two
 * read better in the original treatment, so only these two changed.
 *
 * Only a class was added to each container; the content is untouched.
 * ------------------------------------------------------------------------- */

/* --- What We Do: bordered panel ------------------------------------------ */

.agama-feats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background-color: var(--agama-line);
	border: 1px solid var(--agama-line);
}

.agama-feats .agama-index__row {
	display: block;
	margin: 0;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background-color: var(--agama-surface);
	border: 0;
}

.agama-feats .agama-index__num {
	display: none;                       /* the panel reads as capabilities, not a ranking */
}

.agama-feats .agama-index__title {
	margin-block: 0 0.5rem;
	font-size: var(--agama-fs-md);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.agama-feats .agama-index__body {
	margin: 0;
	max-width: 34ch;
	color: var(--agama-ink-soft);
}

@media (max-width: 899px) {
	.agama-feats {
		grid-template-columns: 1fr;
	}

	.agama-mosaic {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.agama-mosaic {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * 52. Staron pages: the colour range follows its title
 * ---------------------------------------------------------------------------
 * §50 collapsed the doubled space where a page header band is followed by
 * content on the same background. The Staron pages are built from sections
 * rather than a header band, so they kept 208px between the collection title
 * and "Colour range" — with no colour change to mark it, a gap, not a break.
 * Any two uncoloured sections in a row now sit at the page-top spacing.
 * ------------------------------------------------------------------------- */

.entry-content > .agama-section:not(.agama-section--surface):not(.agama-section--dark) + .agama-section:not(.agama-section--surface):not(.agama-section--dark) {
	padding-block-start: var(--agama-page-top) !important;
}

/* That section's own heading block then carries the whole space above it. */
.entry-content > .agama-section--flush-bottom {
	padding-block-end: var(--agama-page-top) !important;
}

/* ---------------------------------------------------------------------------
 * 53. Sinks & bowls: the model range
 * ---------------------------------------------------------------------------
 * Specification cards, not swatches: a model code, what it is, which range it
 * belongs to and its internal dimensions. Same grid rhythm and the same filter
 * bar as the colour library, so the two pages behave alike.
 * ------------------------------------------------------------------------- */

.agama-sink-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--agama-line);
	border: 1px solid var(--agama-line);
}

.agama-sink-card {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	background-color: var(--agama-base);
	transition: background-color var(--agama-t-base) var(--agama-ease);
}

.agama-sink-card:hover {
	background-color: var(--agama-surface);
}

.agama-sink-card__code {
	margin: 0;
	font-family: var(--agama-font-display);
	font-size: var(--agama-fs-lg);
	line-height: 1;
	color: var(--agama-ink);
}

.agama-sink-card__name {
	margin: 0;
	font-size: var(--agama-fs-md);
	font-weight: 500;
}

.agama-sink-card__meta {
	margin: 0;
	font-size: var(--agama-fs-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--agama-ink-soft);
}

.agama-sink-card__size {
	margin: 0.35rem 0 0;
	font-size: var(--agama-fs-sm);
	color: var(--agama-ink-soft);
	font-variant-numeric: tabular-nums;
}

/* An unpublished dimension is stated as such, never guessed. */
.agama-sink-card__size--none {
	font-style: italic;
	color: color-mix(in srgb, var(--agama-ink-soft) 75%, transparent);
}

/* ---------------------------------------------------------------------------
 * 54. Download centre
 * ---------------------------------------------------------------------------
 * A list of documents, not a grid of cards: title and description on the left,
 * file size and the download link on the right, so a specifier can scan the
 * titles down one edge. Nothing is embedded — the PDFs are links, so the page
 * itself stays light no matter how many documents are added.
 * ------------------------------------------------------------------------- */

.agama-dl {
	border-block-start: 1px solid var(--agama-line);
}

.agama-dl__row {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: clamp(1rem, 3vw, 3rem);
	align-items: baseline;
	padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border-block-end: 1px solid var(--agama-line);
}

.agama-dl__title {
	grid-column: 1;
	margin: 0;
	font-size: var(--agama-fs-md);
}

.agama-dl__desc {
	grid-column: 1;
	margin: 0.4rem 0 0;
	max-width: 58ch;
	color: var(--agama-ink-soft);
}

.agama-dl__meta {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: var(--agama-fs-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--agama-ink-soft);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.agama-dl__action {
	grid-column: 2;
	grid-row: 2;
	margin: 0.4rem 0 0;
	text-align: end;
	white-space: nowrap;
}

@media (max-width: 599px) {
	.agama-dl__row {
		grid-template-columns: 1fr;
	}

	.agama-dl__meta,
	.agama-dl__action {
		grid-column: 1;
		grid-row: auto;
		text-align: start;
	}
}

/* ---------------------------------------------------------------------------
 * 55. Six projects on desktop, four on phones
 * ---------------------------------------------------------------------------
 * The mosaic's lead tile takes two columns and two rows, which leaves the
 * third row holding a single project beside empty space. Six fills that row
 * exactly. Phones show one project per row, where four is already a long
 * scroll, so the cap stays at four there.
 * ------------------------------------------------------------------------- */

/* §55's six-up cap is superseded by §60: four projects at every width. */

/* ---------------------------------------------------------------------------
 * 56. One type scale for the whole site
 * ---------------------------------------------------------------------------
 * Measured across nine pages, headings and body text had drifted apart: page
 * titles 52–54px, section headings both 40px and 54px depending on which rule
 * won, body copy 15px in tiles and 17px in rows. Every page now uses the same
 * four sizes, and the home hero is larger than a page title, as the one place
 * the name of the company has to carry a full screen.
 *
 *   hero title     clamp(2.75rem … 5.5rem)   88px at 1440
 *   page title     clamp(2.25rem … 3.4rem)   54px
 *   section title  clamp(1.75rem … 2.5rem)   40px
 *   lead           1.0625rem                 17px
 *   body           1.0625rem                 17px
 * ------------------------------------------------------------------------- */

:root {
	--agama-title-page: clamp(2.25rem, 1.5rem + 2.6vw, 3.4rem);
	--agama-title-section: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
	--agama-text-body: 1.0625rem;
}

/* The home hero, and only the home hero, runs large. */
body.home .agama-hero-scroll .agama-hero2__title,
body.home .agama-hero__title,
.agama-hero-scroll .agama-hero2__title {
	font-size: clamp(2.75rem, 1.5rem + 5.2vw, 5.5rem) !important;
	line-height: 0.95;
}

/* Every page title, on every page. */
.agama-pagehead .agama-hero2__title,
.entry-content > * h1,
main h1.agama-hero2__title {
	font-size: var(--agama-title-page) !important;
	max-width: 22ch;
}

/* Every section heading, including the ones in the ink call-to-action bands
   that were using the page-title size. */
.agama-head__title,
.entry-content h2,
.agama-band--ink .agama-hero2__title,
.agama-section > h2,
body.single-staron_colour .agama-section > h2 {
	font-size: var(--agama-title-section) !important;
	line-height: 1.04;
}

/* Intro paragraphs and body copy: one size each. */
.agama-lead {
	font-size: var(--agama-text-body);
}

.agama-index__body,
.agama-tile__meta,
.agama-card__meta,
.agama-muted,
.agama-dl__title,
.agama-head__aside,
.agama-sink-card__name {
	font-size: var(--agama-text-body);
}

/* The hero heading carries its own class, and the call-to-action bands use an
   h2 with the page-title class — both were missed by the selectors above. */
.agama-hero-scroll__title,
.agama-hero__title {
	font-size: clamp(2.75rem, 1.5rem + 5.2vw, 5.5rem) !important;
	line-height: 0.95;
}

h2.agama-hero2__title {
	font-size: var(--agama-title-section) !important;
}

/* Earlier sections set these at higher specificity than §56 could reach, so the
   scale is restated here at matching weight: the hero at the size the home page
   needs, and the call-to-action headings as the section headings they are. */
.agama-hero-scroll .agama-hero-scroll__title {
	font-size: clamp(2.75rem, 1.5rem + 5.2vw, 5.5rem) !important;
	line-height: 0.95;
}

.agama-band--ink .agama-reveal:has(> h2.agama-hero2__title) > h2.agama-hero2__title,
.entry-content .agama-band h2.agama-hero2__title,
.entry-content .agama-section h2.agama-hero2__title {
	font-size: var(--agama-title-section) !important;
}

@media (max-width: 899px) {
	.agama-hero-scroll .agama-hero-scroll__title {
		font-size: clamp(2rem, 1.2rem + 4.4vw, 2.9rem) !important;
	}
}

/* Staron pages set their section headings through .entry-content > .agama-section
   > h2, and the phone breakpoint had two different heading sizes. Both restated
   here so the scale holds on every page and at every width. */
.entry-content > .agama-section > h2,
.entry-content > .agama-band > .agama-inner > .agama-head .agama-head__title {
	font-size: var(--agama-title-section) !important;
	line-height: 1.04;
}

@media (max-width: 899px) {
	.agama-head__title,
	.entry-content h2,
	.entry-content > .agama-section > h2,
	h2.agama-hero2__title {
		font-size: var(--agama-title-section) !important;
	}

	.agama-pagehead .agama-hero2__title,
	.entry-content > * h1 {
		font-size: var(--agama-title-page) !important;
	}
}

/* Staron's plain section headings are matched by a high-specificity selector
   (.entry-content :is(.agama-section, .agama-band) h2.wp-block-heading:not([class*="agama-"])),
   which outranked §56. Restated at the same weight, at both widths. */
.entry-content :is(.agama-section, .agama-band) h2.wp-block-heading:not([class*="agama-"]),
body.single-staron_colour .agama-section > h2 {
	font-size: var(--agama-title-section) !important;
}

@media (max-width: 899px) {
	.entry-content :is(.agama-section, .agama-band) h2.wp-block-heading:not([class*="agama-"]),
	body.single-staron_colour .agama-section > h2 {
		font-size: var(--agama-title-section) !important;
	}

	/* These two are page titles, not section titles. */
	body.single-staron_colour h1.agama-display,
	.entry-content > .agama-section > h1 {
		font-size: var(--agama-title-page) !important;
	}
}

/* Model cards now carry the product image above the code. */
.agama-sink-card__media {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	margin-block-end: 0.85rem;
	background-color: var(--agama-surface);
	overflow: hidden;
}

.agama-sink-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;          /* the source shots sit on white */
	transition: transform var(--agama-t-base) var(--agama-ease);
}

.agama-sink-card:hover .agama-sink-card__media img {
	transform: scale(1.03);
}

.agama-sink-card__code {
	font-size: var(--agama-fs-md);
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
 * 57. SIBU finishes
 * ---------------------------------------------------------------------------
 * A swatch library rather than a specification list: the finish fills the card,
 * with its name and line underneath. Denser columns than the sinks range,
 * because there are 184 of them.
 * ------------------------------------------------------------------------- */

.agama-sibu-grid {
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.agama-sibu-card__media {
	aspect-ratio: 1 / 1;
	margin-block-end: 0.7rem;
	background-color: var(--agama-surface);
}

.agama-sibu-card__media img {
	object-fit: cover;                 /* a swatch is a texture: fill the tile */
	mix-blend-mode: normal;
}

.agama-sibu-card .agama-sink-card__name {
	font-size: var(--agama-fs-sm);
	letter-spacing: 0.01em;
}

.agama-sibu-card .agama-sink-card__meta {
	font-size: var(--agama-fs-xs);
}

.agama-badge {
	display: inline-block;
	margin-inline-start: 0.4rem;
	padding: 0.1rem 0.4rem;
	border-radius: 2px;
	background-color: var(--agama-accent, var(--agama-ink));
	color: var(--agama-base);
	font-size: var(--agama-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * 58. Filtered-out cards must actually disappear
 * ---------------------------------------------------------------------------
 * The filter hides a card by setting the hidden attribute, which relies on the
 * browser's [hidden] { display: none } rule. §53 gave .agama-sink-card
 * display:flex, which is a stronger rule than that UA default, so on the sinks
 * and SIBU pages every card stayed on screen: the chips changed the count but
 * nothing moved. Restated here so hiding wins over the card's own display.
 * ------------------------------------------------------------------------- */

.agama-sink-grid > [hidden],
.agama-sibu-grid > [hidden],
.agama-colour-grid > [hidden],
.agama-sink-card[hidden],
.agama-sibu-card[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 59. Card galleries, and images that are not cropped
 * ---------------------------------------------------------------------------
 * A model with more than one view (Staron® ships a plan and a section) becomes
 * a scroll-snap strip: swipe on touch, arrows on a pointer. The media box is
 * 4:3 and the image is contained rather than cropped, so nothing is cut off the
 * bottom of a drawing or a bowl.
 * ------------------------------------------------------------------------- */

.agama-sink-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
}

.agama-gallery__track {
	display: flex;
	inline-size: 100%;
	block-size: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.agama-gallery__track::-webkit-scrollbar {
	display: none;
}

.agama-gallery__slide {
	flex: 0 0 100%;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;               /* never crop a technical drawing */
	scroll-snap-align: center;
}

.agama-gallery__nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: 1px solid var(--agama-line);
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--agama-base) 88%, transparent);
	color: var(--agama-ink);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--agama-t-fast) var(--agama-ease);
}

.agama-sink-card:hover .agama-gallery__nav,
.agama-gallery__nav:focus-visible {
	opacity: 1;
}

.agama-gallery__nav[disabled] {
	opacity: 0 !important;
	pointer-events: none;
}

.agama-gallery__nav--prev { inset-inline-start: 0.4rem; }
.agama-gallery__nav--next { inset-inline-end: 0.4rem; }

.agama-gallery__count {
	position: absolute;
	inset-block-end: 0.4rem;
	inset-inline-end: 0.5rem;
	margin: 0;
	padding: 0.1rem 0.4rem;
	border-radius: 2px;
	background-color: color-mix(in srgb, var(--agama-ink) 72%, transparent);
	color: var(--agama-base);
	font-size: var(--agama-fs-xs);
	font-variant-numeric: tabular-nums;
}

/* Touch devices have no hover, so the arrows stay visible there. */
@media (hover: none) {
	.agama-gallery__nav {
		opacity: 1;
	}
}

/* SIBU swatches are textures: filling the tile is right for them. */
.agama-sibu-card__media img {
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * 60. Recent projects on the home page
 * ---------------------------------------------------------------------------
 * The section carries the same tile classes as the Projects page, so the way
 * to make it match is to style nothing here and let those rules apply: 3:2
 * photograph, caption underneath in ink, two per row. The only difference is
 * how many are shown — four, with the button leading to the rest.
 * ------------------------------------------------------------------------- */

.agama-tiles--capped > .agama-tile:nth-child(n + 5) {
	display: none;
}

/* On a mouse or trackpad the strip should not scroll under the pointer — a
   stray wheel or two-finger nudge was sliding the image sideways. The arrows
   still move it, because scrollTo works on an element with hidden overflow.
   Touch keeps native scrolling, which is what makes swiping work. */
.agama-gallery__track {
	overflow-x: hidden;
	overscroll-behavior-x: contain;
}

/* Touch devices get native scrolling back, which is what swiping is. */
@media (hover: none), (pointer: coarse) {
	.agama-gallery__track {
		overflow-x: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 61. Lightbox
 * ---------------------------------------------------------------------------
 * A product image opens full screen at its original size, with the model's
 * other views one arrow, swipe or arrow-key away. Escape or the backdrop
 * closes it, and focus returns to the card that opened it.
 * ------------------------------------------------------------------------- */

.agama-sink-card__media.is-zoomable {
	cursor: zoom-in;
}

.agama-sink-card__media.is-zoomable:focus-visible {
	outline: 2px solid var(--agama-ink);
	outline-offset: 3px;
}

.agama-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 2rem);
	padding: clamp(1rem, 4vw, 3rem);
	background-color: rgb(12 13 10 / 0.92);
	animation: agama-lightbox-in 180ms var(--agama-ease);
}

.agama-lightbox[hidden] {
	display: none;
}

@keyframes agama-lightbox-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.agama-lightbox__figure {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin: 0;
	max-block-size: 100%;
	min-width: 0;
}

.agama-lightbox__img {
	max-inline-size: 100%;
	max-block-size: 78vh;
	object-fit: contain;
	background-color: var(--agama-base);
	border-radius: 2px;
}

.agama-lightbox__caption {
	margin: 0;
	max-width: 60ch;
	text-align: center;
	font-size: var(--agama-fs-sm);
	color: color-mix(in srgb, var(--agama-base) 80%, transparent);
}

.agama-lightbox__nav,
.agama-lightbox__close {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid color-mix(in srgb, var(--agama-base) 35%, transparent);
	border-radius: 50%;
	background-color: transparent;
	color: var(--agama-base);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--agama-t-fast) var(--agama-ease);
}

.agama-lightbox__nav:hover,
.agama-lightbox__close:hover {
	background-color: color-mix(in srgb, var(--agama-base) 18%, transparent);
}

.agama-lightbox__nav--prev { grid-column: 1; }
.agama-lightbox__nav--next { grid-column: 3; }

.agama-lightbox__nav[hidden] {
	visibility: hidden;
	display: grid;              /* keep the columns from collapsing */
}

.agama-lightbox__close {
	position: absolute;
	inset-block-start: clamp(0.75rem, 2vw, 1.5rem);
	inset-inline-end: clamp(0.75rem, 2vw, 1.5rem);
}

.agama-lightbox__count {
	position: absolute;
	inset-block-end: clamp(0.75rem, 2vw, 1.5rem);
	inset-inline: 0;
	margin: 0;
	text-align: center;
	font-size: var(--agama-fs-sm);
	color: color-mix(in srgb, var(--agama-base) 70%, transparent);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 599px) {
	.agama-lightbox {
		grid-template-columns: 1fr;
		padding-inline: 0.75rem;
	}

	.agama-lightbox__nav {
		position: absolute;
		inset-block-start: 50%;
		transform: translateY(-50%);
	}

	.agama-lightbox__nav--prev { inset-inline-start: 0.5rem; }
	.agama-lightbox__nav--next { inset-inline-end: 0.5rem; }
	.agama-lightbox__figure { grid-column: 1; }
}

/* ---------------------------------------------------------------------------
 * 62. Recent projects
 * ---------------------------------------------------------------------------
 * The mosaic from the redesign concept: columns of 2fr 1fr 1fr over two rows,
 * so the lead project fills the left half and four more sit in a 2×2 beside
 * it, separated by hairline gaps. Names sit over the photographs.
 *
 * Phones take one project per row instead — those short, wide cells turn a
 * kitchen into a strip at that width.
 * ------------------------------------------------------------------------- */

.agama-mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: repeat(2, clamp(11rem, 17vw, 16rem));
	gap: 3px;
}

/* Five projects make the composition; the button leads to the rest. The
   earlier four-item cap (.agama-tiles--capped) is overridden here. */
.agama-mosaic.agama-tiles--capped > .agama-tile:nth-child(5),
.agama-mosaic > .agama-tile:nth-child(5) {
	display: block;
}

.agama-mosaic > .agama-tile:nth-child(n + 6) {
	display: none;
}

.agama-mosaic > .agama-tile {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--agama-surface);
}

/* The lead project fills the left column across both rows. */
.agama-mosaic > .agama-tile:nth-child(1) {
	grid-row: span 2;
}

.agama-mosaic .agama-tile__media {
	position: absolute;
	inset: 0;
	margin: 0;
	aspect-ratio: auto;
}

.agama-mosaic .agama-tile__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--agama-t-slow, 600ms) var(--agama-ease);
}

.agama-mosaic > .agama-tile:hover .agama-tile__media img {
	transform: scale(1.04);
}

/* A wash over the photograph so the name reads on light and dark alike. */
.agama-mosaic > .agama-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgb(12 13 10 / 0.28);
	z-index: 1;
	transition: background-color var(--agama-t-base) var(--agama-ease);
}

.agama-mosaic > .agama-tile:hover::after {
	background-color: rgb(12 13 10 / 0.42);
}

/* The name sits centred in its tile, as in the concept.
   Flex rather than grid: this heading inherits a two-row grid template from
   the tiles rule above, which pinned the text to the upper row. */
.agama-mosaic .agama-tile__title {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-template-rows: none;
	margin: 0;
	padding: 1rem;
	text-align: center;
	color: var(--agama-base);
	font-family: var(--agama-font-body, inherit);
	font-size: var(--agama-fs-sm);
	letter-spacing: 0.14em;
	/* letter-spacing adds a trailing gap after the last letter, which throws the
	   centring off by that much; indenting by the same amount puts it back. */
	text-indent: 0.14em;
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgb(12 13 10 / 0.5);
}

.agama-mosaic .agama-tile__title a {
	color: inherit;
}

.agama-mosaic .agama-tile__meta {
	display: none;
}

.agama-mosaic .agama-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

@media (max-width: 899px) {
	.agama-mosaic {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-rows: auto;
		gap: clamp(1rem, 3vw, 1.5rem);
	}

	.agama-mosaic > .agama-tile,
	.agama-mosaic > .agama-tile:nth-child(1) {
		grid-row: span 1;
		aspect-ratio: 4 / 3;
	}

	/* One per row, four of them, with the name over the photograph. */
	.agama-mosaic.agama-tiles--capped > .agama-tile:nth-child(5),
	.agama-mosaic > .agama-tile:nth-child(n + 5) {
		display: none;
	}

	/* The name is centred here too, so a phone reads like the desktop grid. */
	.agama-mosaic > .agama-tile::after {
		inset: 0;
		block-size: auto;
		background-color: rgb(12 13 10 / 0.3);
		background-image: none;
	}

	.agama-mosaic .agama-tile__title {
		padding: 1.1rem;
		font-size: var(--agama-fs-base);
		letter-spacing: 0.12em;
		text-indent: 0.12em;
	}
}

/* ---------------------------------------------------------------------------
 * 63. Project pages: gallery and walkthrough
 * ---------------------------------------------------------------------------
 * A project page carries more than one photograph now, so the gallery gets an
 * even grid of 4:3 frames, and the walkthrough video sits centred at a sane
 * width rather than filling the band.
 * ------------------------------------------------------------------------- */

.agama-project-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.agama-project-gallery > .agama-tile {
	margin: 0;
	padding: 0;
}

.agama-project-gallery .agama-tile__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--agama-surface);
	cursor: zoom-in;
}

.agama-project-gallery .agama-tile__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--agama-t-slow, 600ms) var(--agama-ease);
}

.agama-project-gallery .agama-tile:hover .agama-tile__media img {
	transform: scale(1.03);
}

.agama-project-video {
	margin: 0;
	display: grid;
	place-items: center;
}

.agama-project-video video {
	inline-size: auto;
	max-inline-size: min(100%, 26rem);   /* the clip is portrait, shot on a phone */
	max-block-size: 70vh;
	border-radius: 2px;
	background-color: var(--agama-ink);
}

@media (max-width: 599px) {
	.agama-project-gallery {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * 64. Hero description on phones
 * ---------------------------------------------------------------------------
 * At 18px over four lines the description took 120px of a phone screen and
 * crowded the buttons under it. Smaller type and a tighter line height give
 * the photograph room without making it hard to read.
 * ------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.agama-hero-scroll__lead {
		font-size: 0.9375rem;
		line-height: 1.5;
	}
}

/* ---------------------------------------------------------------------------
 * 65. Typography to match the redesign concept
 * ---------------------------------------------------------------------------
 * Playfair Display for headings, DM Sans for everything else, at the concept's
 * sizes and weights:
 *
 *   hero title      64px, Playfair 700
 *   page title      44px, Playfair 500
 *   section title   40px, Playfair 500
 *   card title      15px, DM Sans 500
 *   lead / body     15–16px, DM Sans 300, generous line height
 *   small print     13px, DM Sans 300
 *   eyebrow         11px, DM Sans, 0.16em, uppercase
 *   buttons, nav    12–13px, DM Sans 500, 0.08–0.1em, uppercase
 *
 * Fluid where the concept is fixed, so the same proportions hold on a phone.
 * ------------------------------------------------------------------------- */

:root {
	--agama-title-page: clamp(2rem, 1.4rem + 2vw, 2.75rem);      /* 44px */
	--agama-title-section: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); /* 40px */
	--agama-text-body: 0.9375rem;                                 /* 15px */
}

/* --- Display: Playfair, with the concept's weights ----------------------- */

.agama-hero-scroll__title,
.agama-hero__title {
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	line-height: 1.02;
}

.agama-pagehead .agama-hero2__title,
.entry-content > * h1,
h2.agama-hero2__title,
.agama-head__title,
.entry-content h2,
.entry-content > .agama-section > h2 {
	font-weight: 500 !important;
	letter-spacing: -0.005em;
}

/* --- Body: DM Sans 300, as the concept sets it --------------------------- */

body,
.agama-lead,
.agama-index__body,
.agama-muted,
.agama-tile__meta,
.agama-card__meta,
.agama-measure,
.agama-head__aside,
.agama-dl__desc {
	font-weight: 300;
}

.agama-lead,
.agama-measure,
.entry-content p {
	line-height: 1.75;
}

.agama-index__body,
.agama-tile__meta,
.agama-card__meta,
.agama-sink-card__meta,
.agama-dl__desc {
	font-size: 0.8125rem;      /* 13px, the concept's supporting text */
	line-height: 1.6;
}

/* --- Eyebrows, buttons and nav ------------------------------------------ */

.agama-eyebrow {
	font-size: 0.6875rem;      /* 11px */
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wp-block-button__link,
.agama-btn > .wp-block-button__link,
.agama-viewall a,
header.ct-header .menu > li > a.ct-menu-link,
header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.wp-block-button__link,
.agama-btn > .wp-block-button__link {
	font-size: 0.8125rem;      /* 13px */
}

header.ct-header .menu > li > a.ct-menu-link,
header.ct-header .menu > li > .ct-sub-menu-parent > .ct-menu-link {
	font-size: 0.75rem;        /* 12px */
	letter-spacing: 0.1em;
}

/* Product and project card titles are DM Sans in the concept, not the serif. */
.agama-tile__title,
.agama-tile__title a,
.agama-sink-card__name,
.agama-dl__title {
	font-family: var(--agama-font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
}

/* The figures strip keeps the serif, as the concept's stats do. */
.agama-figure__num {
	font-family: var(--agama-font-display);
	font-weight: 700;
}

.agama-figure__label {
	font-size: 0.625rem;       /* 10px */
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 66. The concept's exact type scale
 * ---------------------------------------------------------------------------
 * §65 set the families and weights; this restates the sizes at the specificity
 * the earlier sections reach, so the numbers below are what actually renders.
 * Every value is taken from agama_fd_redesign.html:
 *
 *   hero title 64/700   hero desc 16/300/1.75   stat 28/700   stat label 10
 *   section title 40/500   contact title 44/500   body 15/300/1.8
 *   card name 15/500   card body 13/300/1.6   eyebrow 11/0.16em
 *   button 13/500/0.08em   nav 12/0.1em   field label 10/0.12em   input 14/300
 *
 * Fixed pixel sizes become clamps that land on the concept's value at 1440px
 * and step down on a phone.
 * ------------------------------------------------------------------------- */

/* --- Hero: 64px, weight 700 --------------------------------------------- */

.agama-hero-scroll .agama-hero-scroll__title,
.agama-hero-scroll__title,
.agama-hero__title {
	font-size: clamp(2.5rem, 1.6rem + 3.1vw, 4rem) !important;
	font-weight: 700 !important;
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.agama-hero-scroll__lead,
.agama-hero__lead {
	font-size: 1rem;           /* 16px */
	line-height: 1.75;
	font-weight: 300;
}

/* --- Figures strip: 28px numeral over a 10px label ----------------------- */

.agama-figures .agama-figure__num {
	font-size: clamp(1.375rem, 1rem + 0.9vw, 1.75rem) !important;
	font-weight: 700;
	line-height: 1 !important;
}

/* --- Headings ------------------------------------------------------------ */

.agama-band--ink .agama-reveal:has(> h2.agama-hero2__title) > h2.agama-hero2__title,
.entry-content .agama-band h2.agama-hero2__title,
.entry-content .agama-section h2.agama-hero2__title,
h2.agama-hero2__title {
	font-size: var(--agama-title-section) !important;
	line-height: 1.15;
}

/* The closing call-to-action is the concept's contact block: 44px. */
.agama-band--ink .agama-cta__title,
.entry-content .agama-cta__title,
.agama-contact__title {
	font-size: var(--agama-title-page) !important;
	line-height: 1.1;
}

/* --- Body copy: 15px / 1.8 / 300 ---------------------------------------- */

body,
.entry-content,
.agama-about__body,
.agama-measure {
	font-size: var(--agama-text-body);
	line-height: 1.8;
	font-weight: 300;
}

.agama-lead,
.agama-head__aside {
	font-size: 1rem;
	line-height: 1.75;
	font-weight: 300;
}

/* --- Numbered rows, process steps and feature blurbs --------------------- */

.agama-index__title,
.agama-step__name,
.agama-feature__title {
	font-family: var(--agama-font-body);
	font-size: 0.75rem;        /* 12px */
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.agama-index__body,
.agama-step__desc,
.agama-feature__body {
	font-size: 0.8125rem;      /* 13px */
	line-height: 1.6;
	font-weight: 300;
}

.agama-index__num,
.agama-step__num {
	font-family: var(--agama-font-display);
	font-weight: 700;
}

/* --- Forms: 10px labels over 14px fields -------------------------------- */

.agama-field__label,
.agama-form__summary-title,
.agama-footer__label {
	font-size: 0.625rem;       /* 10px */
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.agama-field__input,
.agama-form textarea,
.agama-form select {
	font-family: var(--agama-font-body);
	font-size: 0.875rem;       /* 14px */
	font-weight: 300;
}

.agama-field__hint,
.agama-form__privacy,
.agama-field__optional {
	font-size: 0.6875rem;      /* 11px */
	font-weight: 300;
}

.agama-form__submit,
.agama-form__submit-label {
	font-size: 0.75rem;        /* 12px */
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --- Footer -------------------------------------------------------------- */

/* Only the wordmark takes the serif: .agama-footer__brand wraps the tagline and
   the quote link too, and they are DM Sans in the concept. */
.agama-footer__logo {
	font-family: var(--agama-font-display);
	font-size: 1.125rem;       /* 18px */
}

.agama-footer__links a,
.agama-footer__text,
.agama-footer__tagline {
	font-size: 0.6875rem;      /* 11px */
	font-weight: 300;
}

.agama-footer__links a {
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --- Site title, when the header falls back to text --------------------- */

.site-title,
.site-title a {
	font-family: var(--agama-font-display);
	font-size: 1.375rem;       /* 22px */
	letter-spacing: 0.04em;
}

/* --- Buttons: the concept's 0.08em ------------------------------------- */

.wp-block-button__link,
.agama-btn > .wp-block-button__link,
.agama-viewall a {
	letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------------
 * 67. Restatement: the component sizes earlier sections outrank
 * ---------------------------------------------------------------------------
 * Eyebrows, card text and figure labels are .wp-block-paragraph; card and row
 * titles are .wp-block-heading. Both carry sizes from §§17–40 and from media
 * queries further down the file, at specificity the plain class selectors in
 * §§65–66 cannot reach. The concept's values are restated here as the last
 * word so they hold at every width.
 * ------------------------------------------------------------------------- */

.agama-eyebrow {
	font-size: 0.6875rem !important;   /* 11px */
	line-height: 1.4 !important;
	letter-spacing: 0.16em;
}

.agama-hero-scroll__lead,
.agama-hero__lead {
	font-size: 1rem !important;        /* 16px */
	line-height: 1.75 !important;
}

.agama-tile__title,
.agama-tile__title a,
.agama-sink-card__name,
.agama-dl__title {
	font-size: 0.9375rem !important;   /* 15px */
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.01em;
}

.agama-index__title,
.agama-feats .agama-index__title,
.agama-step__name,
.agama-feature__title {
	font-size: 0.75rem !important;     /* 12px */
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.agama-tile__meta,
.agama-card__meta,
.agama-sink-card__meta,
.agama-index__body,
.agama-step__desc,
.agama-feature__body,
.agama-dl__desc {
	font-size: 0.8125rem !important;   /* 13px */
	line-height: 1.6 !important;
	font-weight: 300;
}

.agama-figure__label {
	font-size: 0.625rem !important;    /* 10px */
	letter-spacing: 0.1em;
	line-height: 1.4 !important;
}

/* Project tile captions are the concept's gallery labels: 12px, tracked. */
.agama-mosaic__title,
.agama-project-tile__title {
	font-size: 0.75rem !important;
	letter-spacing: 0.12em;
	font-weight: 400 !important;
}

/* ---------------------------------------------------------------------------
 * 68. Prose: the concept's 15/1.8
 * ---------------------------------------------------------------------------
 * .agama-lead and .agama-measure carry the long-form copy. Earlier sections set
 * them at 17px/1.6; the concept's body is 15px/1.8 and its contact intro 15/1.7,
 * so both land on 15/1.8. The hero's own lead is restated afterwards because it
 * shares .agama-measure and the concept keeps it one step larger, at 16px.
 * ------------------------------------------------------------------------- */

.agama-lead,
.agama-measure,
.agama-head__aside,
.agama-muted {
	font-size: var(--agama-text-body) !important;   /* 15px */
	line-height: 1.8 !important;
	font-weight: 300;
}

/* The hero description: 16px on a desktop, and the smaller phone size that was
   asked for earlier — restated at this weight so it survives §§66–67. */
.agama-hero-scroll__lead,
.agama-hero__lead {
	font-size: 1rem !important;
	line-height: 1.75 !important;
}

@media (max-width: 899px) {
	.agama-hero-scroll__lead,
	.agama-hero__lead {
		font-size: 0.9375rem !important;
		line-height: 1.5 !important;
	}
}

/* The footer's quote link is a button, so it takes the concept's button type. */
.agama-footer__cta {
	font-family: var(--agama-font-body);
	font-size: 0.75rem;        /* 12px */
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.agama-footer__tagline,
.agama-footer__text {
	font-family: var(--agama-font-body);
}

/* ---------------------------------------------------------------------------
 * 69. Form controls: 14px, except where iOS would zoom
 * ---------------------------------------------------------------------------
 * The concept types its fields at 14px, which is a desktop mock. Safari zooms
 * the page whenever a focused field is under 16px, so the concept's size is
 * used from 900px up and the fields stay at 16px on a phone. Every control is
 * named with its tag, because the base rule at §37 is tag-qualified too.
 * ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	input.agama-field__input,
	select.agama-field__input,
	textarea.agama-field__input {
		font-size: 0.875rem;       /* 14px */
	}
}

@media (max-width: 899px) {
	input.agama-field__input,
	select.agama-field__input,
	textarea.agama-field__input {
		font-size: 16px;           /* below this, focusing a field zooms iOS */
	}
}

/* ---------------------------------------------------------------------------
 * 70. The last places the parent theme sets its own type
 * ---------------------------------------------------------------------------
 * The download centre renders Blocksy's page header, the Staron cards and sink
 * codes kept sizes from before the scale existed, and the submenus and footer
 * copyright were never brought in line. All of them take the concept's values.
 * ------------------------------------------------------------------------- */

.page-title,
.entry-title {
	font-family: var(--agama-font-display);
	font-size: var(--agama-title-page) !important;   /* 44px */
	font-weight: 500 !important;
	line-height: 1.1;
}

.page-description {
	font-size: var(--agama-text-body) !important;    /* 15px */
	line-height: 1.8;
	font-weight: 300;
}

/* Colour and material cards read as the concept's product names. */
.agama-card__link,
.agama-card__title,
.agama-colour-card__name {
	font-family: var(--agama-font-body) !important;
	font-size: 0.9375rem !important;                 /* 15px */
	font-weight: 500 !important;
	letter-spacing: 0.01em;
}

/* A product code is a tag, not a title: small, tracked, upper case. */
.agama-sink-card__code,
.agama-colour-card__code,
.agama-card__code {
	font-family: var(--agama-font-body) !important;
	font-size: 0.6875rem !important;                 /* 11px */
	font-weight: 400 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Submenu links match the top level at 12px. */
header.ct-header .sub-menu > li > a.ct-menu-link,
header.ct-header .sub-menu .ct-menu-link {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ct-footer-copyright,
.ct-footer-copyright p {
	font-size: 0.6875rem;                            /* 11px */
	font-weight: 300;
}

/* Badges are the concept's product tags, and Blocksy sizes its copyright from a
   customiser variable, so both are stated outright. */
.agama-badge {
	font-size: 0.625rem !important;                  /* 10px */
	font-weight: 500 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ct-footer-copyright,
.ct-footer-copyright p,
.ct-footer [data-column] .ct-footer-copyright {
	font-size: 0.6875rem !important;                 /* 11px */
}

/* The download rows' file meta is supporting text, like the card meta. */
.agama-dl__meta {
	font-size: 0.8125rem !important;                 /* 13px */
	line-height: 1.6 !important;
	font-weight: 300;
}