/* =============================================================================
 * PILTA design layer
 * -----------------------------------------------------------------------------
 * Everything the locked design system needs that theme.json cannot express:
 * the sticky header, the gold swipe, the horizons divider, the editorial
 * ledger rows, the band rhythm, and a real mobile nav.
 *
 * RULES OBSERVED HERE
 *   1. Colour comes from theme.json presets only:
 *      var(--wp--preset--color--teal | gold | ivory | deep | ink | body |
 *                                     muted | lift)
 *      No literal colour value appears in this file except inside the two
 *      decorative SVG data URIs, which have to carry their own fill.
 *   2. Type comes from theme.json presets only:
 *      family  var(--wp--preset--font-family--logotype | display | sans)
 *      size    var(--wp--preset--font-size--micro | small | base | md | lg |
 *                                            xl | xxl | display | hero)
 *   3. Decorative art is CSS, never a raw HTML block. Both SVGs render on
 *      ::before pseudo-elements, so they are decorative by construction and
 *      carry no text for assistive technology to announce.
 *
 * SECTIONS
 *   1. Local variables
 *   2. Document behaviour and focus
 *   3. Sticky header and logotype
 *   4. Gold swipe
 *   5. Horizons sun-dot divider
 *   6. Band rhythm (ivory / lift / deep)
 *   7. Editorial rows: ledger, steps, tiles, plates
 *   8. Type helpers: eyebrows, tags, links, quotes, on-deep text
 *   9. Mobile nav under 900px
 *  10. Breakpoints
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Local variables
 * Structure only. Colour values are derived from the theme.json presets with
 * color-mix so the locked palette stays the single source of truth.
 * -------------------------------------------------------------------------- */
:root {
	--pilta-container: 1180px;
	--pilta-gutter: 40px;
	--pilta-gutter-narrow: var(--wp--preset--spacing--lg, 24px);
	/* Section rhythm comes from theme.json.
	   Ryan 2026-07-30: the comp's 112/72 read far too airy in the browser.
	   Tightened to 72/48 at the token source, so every band moved at once.
	   This rules workbook G-row construction; record it back to the register. */
	--pilta-rhythm: var(--wp--preset--spacing--section, 72px);
	--pilta-hinge: var(--wp--preset--spacing--hinge, 48px);
	--pilta-row-gap: 28px;
	--pilta-nav-break: 900px;
	--pilta-radius-plate: 4px;
	--pilta-radius-control: 3px;

	--pilta-hair: color-mix(in srgb, var(--wp--preset--color--teal) 16%, transparent);
	--pilta-hair-reverse: color-mix(in srgb, var(--wp--preset--color--ivory) 14%, transparent);
	--pilta-elevation: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);

	--pilta-header-veil: color-mix(in srgb, var(--wp--preset--color--stone) 94%, transparent); /* GROUND RE-RULED 2026-08-31: stone */

	/* Dark-ground secondary text. Ivory mixes only, never a grey. */
	--pilta-on-deep-strong: color-mix(in srgb, var(--wp--preset--color--ivory) 85%, transparent);
	--pilta-on-deep-muted: color-mix(in srgb, var(--wp--preset--color--ivory) 68%, transparent);
	--pilta-on-deep-fine: color-mix(in srgb, var(--wp--preset--color--ivory) 62%, transparent);
}

/* Legacy fallback for browsers without color-mix. Same locked tokens,
   expressed as rgba so nothing collapses to transparent. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	:root {
		--pilta-hair: rgba(37, 74, 86, 0.16);
		--pilta-hair-reverse: rgba(247, 241, 236, 0.14);
		--pilta-elevation: 0 1px 2px rgba(19, 47, 55, 0.08);
		--pilta-header-veil: rgba(247, 241, 236, 0.94);
		--pilta-on-deep-strong: rgba(247, 241, 236, 0.85);
		--pilta-on-deep-muted: rgba(247, 241, 236, 0.68);
		--pilta-on-deep-fine: rgba(247, 241, 236, 0.62);
	}
}

/* -----------------------------------------------------------------------------
 * 2. Document behaviour and focus
 * -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	/* Anchor targets must clear the sticky header. */
	scroll-padding-top: 96px;
}

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

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* Tabular figures for anything that reads as data. */
.pilta-data {
	font-variant-numeric: tabular-nums lining-nums;
}

/* -----------------------------------------------------------------------------
 * 3. Sticky header and logotype
 * Apply .pilta-header to the header template part wrapper.
 * -------------------------------------------------------------------------- */
.pilta-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: transparent; /* the veil rides ::before, see below */
	border-bottom: 1px solid var(--pilta-hair);
}

/* The veil (stone 94% + blur) lives on a pseudo-element, NOT on the header:
   backdrop-filter turns its element into the CONTAINING BLOCK for fixed
   descendants, and core's mobile menu overlay (position:fixed; inset:0) was
   being trapped inside the 72px bar (measured 375x72, content scrolling
   inside it) - 2026-09-08 mobile re-verify. z-index:-1 keeps the pseudo
   under the bar's content but inside the header's stacking context. */
.pilta-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--pilta-header-veil);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* THE ELEMENT THAT STICKS IS THE TEMPLATE-PART WRAPPER. .pilta-header is
   sticky INSIDE header.wp-block-template-part, a wrapper exactly its own
   height, so it never had room to move: measured top -700 at scrollY 700
   on 2026-09-08 (the header had silently never stuck). header.wp-block-
   template-part is unique to the site header (the footer part is <footer>),
   so no :has() is needed and the landmark stays intact. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Without backdrop-filter the veil would read as a smear, so go solid. */
@supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
	.pilta-header::before {
		background-color: var(--wp--preset--color--stone);
	}
}

.admin-bar header.wp-block-template-part,
.admin-bar .pilta-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part,
	.admin-bar .pilta-header {
		top: 46px;
	}
}

/* The logotype word. Newsreader 500 tracked caps, lockups only.
   Horizontal lockup tracking .3em, stacked or reversed lockup .34em.
   The trailing letter-space is optically compensated with padding. */
.pilta-logotype {
	font-family: var(--wp--preset--font-family--logotype);
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	padding-left: 0.05em;
	line-height: 1.1;
}

.pilta-logotype--stacked {
	letter-spacing: 0.34em;
	padding-left: 0.05em;
}

.pilta-header .pilta-logotype {
	color: var(--wp--preset--color--teal);
}

/* Mark artwork sits beside the word in the lockup. */
.pilta-lockup-mark img {
	display: block;
	height: auto;
}

/* -----------------------------------------------------------------------------
 * 4. Gold swipe
 * A hand-painted stroke painted BEHIND two to four pivot words of a display
 * headline. Apply .pilta-swipe to an inline span or mark inside the heading.
 *
 * Content rule, not a CSS rule: a maximum of one swipe per page.
 *
 * isolation:isolate makes the element its own stacking context, so the
 * negative z-index pseudo-element lands above the element background and
 * below the words, and can never drop behind a section background image.
 * -------------------------------------------------------------------------- */
.pilta-swipe {
	position: relative;
	isolation: isolate;
	display: inline-block;
	white-space: nowrap;
	padding-inline: 0.08em;
	background-color: transparent;
	color: inherit;
}

.pilta-swipe::before {
	content: "";
	position: absolute;
	left: -3%;
	top: 8%;
	width: 106%;
	height: 88%;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2056'%20preserveAspectRatio='none'%3E%3Cpath%20d='M6%2014%20L288%206%20Q297%2020%20291%2029%20L294%2042%20L10%2050%20Q3%2036%208%2028%20Z'%20fill='%23c88a2e'%20opacity='.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: -1;
	pointer-events: none;
}

/* Ivory at .18 for deep teal grounds. The modifier is for any dark ground,
   the descendant rule keeps a swipe inside a deep band from ever going gold. */
.pilta-swipe--reverse::before,
.pilta-band--deep .pilta-swipe::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2056'%20preserveAspectRatio='none'%3E%3Cpath%20d='M6%2014%20L288%206%20Q297%2020%20291%2029%20L294%2042%20L10%2050%20Q3%2036%208%2028%20Z'%20fill='%23F7F1EC'%20opacity='.18'/%3E%3C/svg%3E");
}

/* If the pivot words are marked up with the core highlight format the browser
   default mark styling has to be neutralised. */
mark.pilta-swipe {
	background: transparent;
	color: inherit;
}

/* -----------------------------------------------------------------------------
 * 5. Horizons sun-dot divider
 * Apply .pilta-hdivider to an empty core group or spacer. The art is a
 * pseudo-element, so it is decorative by construction and exposes no content.
 * -------------------------------------------------------------------------- */
.pilta-hdivider {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 0;
}

.pilta-hdivider::before {
	content: "";
	display: block;
	width: 340px;
	max-width: 100%;
	height: 44px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20340%2044'%3E%3Cline%20x1='0'%20y1='22'%20x2='118'%20y2='22'%20stroke='%23254A56'%20stroke-width='1.6'/%3E%3Cline%20x1='222'%20y1='22'%20x2='340'%20y2='22'%20stroke='%23254A56'%20stroke-width='1.6'/%3E%3Cline%20x1='126'%20y1='22'%20x2='146'%20y2='22'%20stroke='%23c88a2e'%20stroke-width='2.6'/%3E%3Cline%20x1='194'%20y1='22'%20x2='214'%20y2='22'%20stroke='%23c88a2e'%20stroke-width='2.6'/%3E%3Ccircle%20cx='170'%20cy='22'%20r='12'%20fill='none'%20stroke='%23254A56'%20stroke-width='1.8'/%3E%3Ccircle%20cx='170'%20cy='22'%20r='7'%20fill='none'%20stroke='%23c88a2e'%20stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Reversed divider for deep grounds is not part of the locked set. If one is
   ever needed it gets its own ruling first. */

/* -----------------------------------------------------------------------------
 * 6. Band rhythm
 * Alternating ivory and lift grounds, 112px standard, 72px hinge after the
 * hero divider. Elevation is hairlines, never a floating card.
 * -------------------------------------------------------------------------- */
.pilta-band {
	padding-top: var(--pilta-rhythm);
	padding-bottom: var(--pilta-rhythm);
}

/* GROUND RE-RULED 2026-08-31 (Ryan, closes Workbook queue 11): the page ground
   is Warm Stone #f4f1ea. The class NAME stays pilta-band--ivory because it is
   baked into every page's post_content; its VALUE is the stone preset. Ivory
   remains in the palette as the light-ink role (text on deep, focus rings). */
.pilta-band--ivory {
	background-color: var(--wp--preset--color--stone);
}

.pilta-band--lift {
	background-color: var(--wp--preset--color--lift);
}

.pilta-band--deep {
	background-color: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--ivory);
}

/* The hinge: the short top pad used by the section that follows the hero
   divider, so the divider and the sentence under it read as one move. */
.pilta-band--hinge {
	padding-top: var(--pilta-hinge);
}

/* Image band between chapters.
   Ryan 2026-07-30, third and final form: NO CROP. Both cropped versions
   failed for the same reason: this artwork is a BOUNDED papercut vignette
   with a torn-paper edge on all four sides. The top edge is always visible,
   so any cut edge reads as broken, not as a crop. The artwork's own ground
   is the page ivory, so shown whole and centred it reads as printed on the
   page, and the band needs no clipping, no cover-fit and no position tuning.
   Width caps at 1440 (the 2688 asset stays sharp to DPR 1.8; a 5376 tier
   exists in the srcset for retina), so ultrawides get margins, not a mural. */
/* Ryan 2026-07-30: the band is not a separate chapter, it is the opening
   image OF the What-we-do section. So: no hairlines, the SAME lift ground as
   the ledger it introduces, and the flow gap to the ledger is closed below,
   so band and section read as one surface. Display cap 960px keeps it a
   featured illustration rather than a wall, and the 2688 asset stays sharp
   past DPR 2.5 at that size. */
.pilta-band--image {
	background-color: var(--wp--preset--color--lift);
	padding-block: 56px 8px;
}

/* Specificity matches core's .wp-block-image.alignfull img { width:100% },
   which otherwise wins and stretches the art to the viewport again; this
   file loads after block-library, so the tie resolves here. */
.wp-block-image.pilta-band--image img,
.pilta-band--image img {
	display: block;
	width: min(100%, 960px);
	height: auto;
	margin-inline: auto;
}

/* Close the flow gap so the lift ground runs unbroken from the artwork into
   WHAT WE DO. !important because the gap arrives via WordPress's emitted
   layout CSS, which this file cannot out-specify politely. */
.pilta-band--image + .pilta-band {
	margin-block-start: 0 !important;
}

/* =============================================================================
   THE HERO. Rebuilt 2026-07-30 as NORMAL DOCUMENT FLOW.

   Post-mortem of the previous six attempts, kept so nobody repeats them: the
   hero was built as a hand-positioned poster (absolutely positioned art,
   viewport-scaled size steps, per-breakpoint pixel constants, a layout mode
   switch). Every constant was a promise about a viewport that some other
   viewport broke: text pinned to the screen edge on wide, giant voids on
   small, art drifting against text everywhere. Ordinary sites never have this
   problem because they never do this.

   THE SYSTEM NOW
   1. ONE centred container. .pilta-hero-grid is an ordinary child of the
      constrained section, so WordPress centres it at 1180px exactly like the
      nav. Wide screens get symmetric margins for free.
   2. The art is a FLOW ITEM. .pilta-sunrise is an empty box with
      aspect-ratio 674/638 (the sun SVG's own ratio) at a FIXED width per
      layout, not a viewport-scaled one. The browser positions it.
   3. The full-width horizon lines hang off the sun's own box at fixed
      PERCENTAGES (top 58.865% = 375.56/638, height 18.406% = 117.43/638,
      from Scripts/dawnburst_svg.py). Percentages of the same box the sun
      paints in scale for free, so the seam is exact at ANY size with zero
      variables and zero calc chains.
   4. One breakpoint, 1200px, shared with the nav collapse: below it the hero
      is a vertical stack, at or above it a two-column grid (text left, sun
      right). No other layout rules exist.
   ========================================================================== */
.pilta-hero {
	position: relative;
	/* Clips the 200vw line strip. clip, not hidden: it cannot create a new
	   scroll container. */
	overflow: clip;
	/* Ryan 2026-07-30: nav-to-eyebrow gap cut 75%. Measured 70px total =
	   44px here + 24px margin-block-start on <main> (root blockGap) + 2px
	   glyph leading. A negative margin here does NOT work: WordPress's flow
	   layout CSS resets margin-block on container children, which silently
	   zeroed it (probed, computed margin-top was 0). So this file trims its
	   own share to 16px and the main rule below removes main's share, scoped
	   to pages whose content starts with the hero. Net gap ~18px. */
	padding-top: 16px;
	padding-bottom: 64px;
}

/* Only pages that OPEN with the hero (the homepage) lose main's top margin;
   interior pages keep their normal rhythm. */
.wp-site-blocks > main:has(> .pilta-hero:first-child),
.wp-site-blocks > main:has(> .wp-block-post-content > .pilta-hero:first-child) {
	margin-block-start: 0;
}

/* --- the sun + full-width lines ----------------------------------------- */
.pilta-sunrise {
	position: relative;
	isolation: isolate;
	aspect-ratio: 674 / 638;
	width: min(320px, 82%);
	margin: 40px auto 8px;
	pointer-events: none;
}

.pilta-sunrise::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/PILTA-dawnburst-sun.svg") center / contain no-repeat;
}

/* The lines. A 200vw strip centred on the sun box covers the viewport no
   matter where the sun sits; the section clips the excess. It paints at
   z-index -1 inside the sunrise's own stacking context, so the sun's ivory
   backing masks it behind the disk and the seam uses one rasteriser. */
.pilta-sunrise::after {
	content: "";
	position: absolute;
	top: 58.865%;
	height: 18.406%;
	left: 50%;
	width: 200vw;
	margin-left: -100vw;
	background: url("../img/PILTA-dawnburst-lines.svg") 0 0 / 100% 100% no-repeat;
	z-index: -1;
}

/* --- text ---------------------------------------------------------------- */
.pilta-hero-head,
.pilta-hero-follow {
	max-width: 620px;
}

.pilta-hero-head p,
.pilta-hero-follow p {
	max-width: 480px;
}

.pilta-hero-head .pilta-eyebrow--micro {
	max-width: none;
}

/* --- desktop: two columns ------------------------------------------------ */
@media (min-width: 1200px) {
	.pilta-hero-grid {
		display: grid;
		grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
		column-gap: 48px;
	}

	.pilta-hero-head {
		grid-column: 1;
		grid-row: 1;
	}

	/* Sun spans rows 1-2, so row 3 (the follow copy) cannot start until the
	   whole sun box has been laid out: the copy clears the lines by
	   construction, not by a tuned number. Fixed width: art does not scale
	   with the viewport, wide screens get whitespace like every normal site. */
	.pilta-sunrise {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
		justify-self: end;
		width: min(458px, 100%);
		/* Ryan 2026-07-30: halve the headline-to-lines gap. The lines sit at
		   58.865% of this box, so raising the box raises them: 34px -> -18px
		   moves the line band up 52px (gap ~104 -> ~52). The negative margin
		   rides into the section's 44px top padding, so nothing clips, and
		   row sizing shrinks with the margin box, so the copy below moves up
		   by the same amount and its clearance from the lines is unchanged.
		   Stacked (<1200px) has its own margin and is untouched. */
		margin: -18px 0 0;
	}

	.pilta-hero-follow {
		grid-column: 1;
		grid-row: 3;
		/* Pull the copy up toward the lines. Safe: the offset is against the
		   FIXED 458px sun (lines end 77.3% down = 334px in), and it only eats
		   the empty air below them. */
		margin-top: -44px;
	}
}

/* Old hooks, retired 2026-07-30. Kept as dead-safe no-ops in case a stale
   copy of the pattern is still saved in the database. */
.pilta-hero-art,
.pilta-hero-lane {
	display: none;
}

/* -----------------------------------------------------------------------------
 * 7. Editorial rows
 * Hairline rules and a fixed measure. These are rows, not cards. The boxed
 * card grid was reviewed out.
 * -------------------------------------------------------------------------- */

/* 7a. The five letters ledger. Grid is 96 / 184 / 1fr with a 61px gold
   initial. Children in order: initial, name, sentence. */
.pilta-ledger-row {
	display: grid;
	grid-template-columns: 96px 184px 1fr;
	gap: var(--pilta-row-gap);
	align-items: baseline;
	/* Ryan 2026-07-30: ledger vertical spacing halved, 34 -> 17. */
	padding-top: 17px;
	padding-bottom: 17px;
	border-top: 1px solid var(--pilta-hair);
}

.pilta-ledger-row > * {
	margin-block: 0;
}

/* Closes the ledger. Falls to the modifier when the row is not the last
   child of its container. */
.pilta-ledger-row:last-child,
.pilta-ledger-row--last {
	border-bottom: 1px solid var(--pilta-hair);
}

.pilta-ledger-initial {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1;
	color: var(--wp--preset--color--gold);
}

.pilta-ledger-row p {
	max-width: 600px;
}

/* 7b. Numbered process steps. */
.pilta-step {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 22px;
	padding-top: 22px;
	padding-bottom: 22px;
	border-top: 1px solid var(--pilta-hair);
}

.pilta-step > * {
	margin-block: 0;
}

.pilta-step-number {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--wp--preset--color--gold);
	line-height: 1.6;
}

/* 7c. Image plates. Corners 4px, hairline border, near-zero elevation.
   Nothing floats. */
.pilta-plate {
	border-radius: var(--pilta-radius-plate);
	overflow: hidden;
	border: 1px solid var(--pilta-hair);
	box-shadow: var(--pilta-elevation);
}

.pilta-plate img {
	display: block;
	width: 100%;
	height: auto;
}

.pilta-plate--4x5 img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.pilta-plate--4x3 img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* 16:9 for wide group shots (Ryan 2026-09-24: How we work, "Working with
   your team." media 388 is a 16:9 frame; the 4:3 rail cut the two end
   people). Same plate chrome; the ratio matches the source, so nothing is
   cropped on either axis. */
.pilta-plate--16x9 img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* 7d. Industry tiles. A plate, a tag, a name, a sentence. No box. */
.pilta-tile {
	background-color: transparent;
}

.pilta-tile .pilta-tile-plate {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--pilta-hair);
	border-radius: var(--pilta-radius-plate);
}

/* -----------------------------------------------------------------------------
 * 8. Type helpers
 * Hybrid caps register: tracked uppercase is only ever used for eyebrows,
 * stamps, lockup sublines and category tags. Nav, buttons, forms and body
 * stay sentence case.
 * -------------------------------------------------------------------------- */
.pilta-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	line-height: 1.4;
	/* Only shows when an eyebrow is set to underline in the editor (Ryan 9/27). */
	text-underline-offset: 0.35em;
}

/* 11px caps track at .18em. Used for the hero eyebrow, category tags and
   lockup sublines. */
.pilta-eyebrow--micro,
.pilta-tag,
.pilta-subline {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.5;
}

.pilta-eyebrow--micro,
.pilta-tag {
	color: var(--wp--preset--color--gold);
}

.pilta-subline {
	color: var(--pilta-on-deep-muted);
}

/* Text link with the gold underline. Sentence case. */
.pilta-tlink {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--teal);
	border-bottom: 1px solid var(--wp--preset--color--gold);
	padding-bottom: 2px;
	text-decoration: none;
}

.pilta-tlink:hover {
	color: var(--wp--preset--color--ink);
}

/* Display quote. Cormorant 600 italic is display quotes only. */
.pilta-quote {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-style: italic;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.2;
	color: var(--wp--preset--color--ivory);
	max-width: 960px;
	margin-inline: auto;
}

/* The 64 by 2 gold rule above a quote. */
.pilta-rule {
	width: 64px;
	height: 2px;
	background-color: var(--wp--preset--color--gold);
	border: 0;
	margin: 0 auto 40px;
}

/* Secondary text on deep teal. Ivory mixes only. */
.pilta-on-deep-strong {
	color: var(--pilta-on-deep-strong);
}

.pilta-on-deep-muted {
	color: var(--pilta-on-deep-muted);
}

.pilta-on-deep-fine {
	color: var(--pilta-on-deep-fine);
}

.pilta-hairline-reverse {
	border-top: 1px solid var(--pilta-hair-reverse);
}

.pilta-hairline {
	border-top: 1px solid var(--pilta-hair);
}

/* -----------------------------------------------------------------------------
 * 9. Mobile nav under 900px
 * The comp deliberately shipped no mobile menu. This supplies one.
 *
 * Primary route: the core Navigation block with overlayMenu set to "mobile".
 * Core breaks that overlay at 600px, which is too low for five nav items plus
 * a call to action, so these rules move the break to 900px. Core's own view
 * script does the opening and closing, so the menu needs no theme JavaScript.
 *
 * Fallback route: a core Details block carrying .pilta-disclosure-nav, which
 * needs no JavaScript at all. Styles for it are at the end of this section.
 *
 * assets/js/nav.js is a small courtesy only: it closes the open menu after a
 * same-page anchor link is used. The menu works without it.
 * -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
	/* Hide the inline nav. Specificity has to clear core's own
	   :not(.hidden-by-default):not(.is-menu-open) rule. */
	.pilta-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Show the disclosure button. */
	.pilta-header .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media (min-width: 900px) {
	.pilta-header .wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: none;
	}
}

.pilta-header .wp-block-navigation__responsive-container-open,
.pilta-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--teal);
	background: transparent;
	border: 0;
	padding: 6px;
	cursor: pointer;
}

.pilta-header .wp-block-navigation__responsive-container-open svg,
.pilta-header .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* The open overlay. Ivory ground, sentence case, hairline separated rows. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--teal);
	padding: 24px var(--pilta-gutter-narrow) 48px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 12px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-top: 1px solid var(--pilta-hair);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-top: 16px;
	padding-bottom: 16px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	/* Nav is sentence case. A caps nav is a violation. */
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--teal);
}

/* A call to action button inside the overlay keeps its shape. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
	width: 100%;
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--pilta-hair);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link {
	display: inline-block;
	width: auto;
	border-radius: var(--pilta-radius-control);
	text-transform: none;
}

/* Fallback route: core Details block as the mobile disclosure.
   Zero JavaScript. Only shown below the nav break. */
.pilta-disclosure-nav {
	width: 100%;
}

.pilta-disclosure-nav > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--base);
	/* Sentence case, no caps. */
	text-transform: none;
	color: var(--wp--preset--color--teal);
	padding: 8px 0;
}

.pilta-disclosure-nav > summary::-webkit-details-marker {
	display: none;
}

.pilta-disclosure-nav > summary::marker {
	content: "";
}

.pilta-disclosure-nav[open] > summary {
	border-bottom: 1px solid var(--pilta-hair);
	margin-bottom: 8px;
}

.pilta-disclosure-nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.pilta-disclosure-nav .wp-block-navigation-item {
	width: 100%;
	border-top: 1px solid var(--pilta-hair);
}

.pilta-disclosure-nav .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-top: 16px;
	padding-bottom: 16px;
	font-size: var(--wp--preset--font-size--md);
	text-transform: none;
}

@media (min-width: 900px) {
	.pilta-disclosure-nav {
		display: none;
	}
}

@media (max-width: 899.98px) {
	/* Optional companion class for a desktop-only inline nav. */
	.pilta-nav-desktop {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * 10. Breakpoints
 * Preset font sizes are emitted by core with !important, so responsive type
 * steps have to answer in kind.
 * -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	:root {
		--pilta-gutter: var(--pilta-gutter-narrow);

		/* The locked construction is a 40px side padding that narrows to 24px on
		   mobile. The 40px comes from theme.json styles.spacing.padding, which
		   core emits as the two custom properties below, and
		   useRootPaddingAwareAlignments derives the alignfull negative margins
		   from the same pair. Overriding them here moves the gutter and the
		   full-bleed math together, which setting a padding directly would not.
		   Without this the 40px gutter survives all the way down to 320px. */
		--wp--style--root--padding-left: var(--pilta-gutter-narrow);
		--wp--style--root--padding-right: var(--pilta-gutter-narrow);
	}

	/* Hero drops one step, 61 to 49. */
	.pilta-hero h1 {
		font-size: var(--wp--preset--font-size--display) !important;
	}

	/* Section headlines drop one step, 49 or 39 to 31. Only headings that are
	   actually set to those two steps are touched, so a smaller subhead is
	   never enlarged on a narrow screen. */
	.pilta-band h2.has-display-font-size,
	.pilta-band h2.has-xxl-font-size {
		font-size: var(--wp--preset--font-size--xl) !important;
	}

	.pilta-quote {
		font-size: var(--wp--preset--font-size--xl) !important;
	}

	.pilta-ledger-row {
		grid-template-columns: 64px 1fr;
		gap: 20px;
	}

	.pilta-ledger-row > :last-child {
		grid-column: 2;
	}

	.pilta-ledger-initial {
		font-size: var(--wp--preset--font-size--xxl) !important;
	}

	.pilta-hero-head p,
	.pilta-hero-follow p {
		max-width: none;
	}
}

/* The lower step. Under 400px the hero headline drops to the 31px step.
   Measured 2026-07-28 with Playwright at a 390px viewport: at the 39px step
   the pivot phrase "when you need it." rendered 354px wide inside a 327px
   column, pushing body scrollWidth to 404 and clipping the page. .pilta-swipe
   is white-space:nowrap by design (a swipe broken across two lines is a brand
   violation), so the type steps down instead of the mark wrapping.
   31px keeps it on the locked 1.25 ladder. */
/* The pivot phrase "when you need it." carries the swipe and is
   white-space:nowrap by design, so it cannot break. Measured widths of that
   phrase: 445px at the 49px step, 354px at 39px, 281px at 31px. The column is
   viewport minus gutters. Step the headline where the phrase stops fitting.

   The previous breakpoint was max-width:399.98px, which never fired on a
   412px-wide phone (media queries measure the layout viewport, scrollbar
   included), so the headline stayed at 49px and ran 88px off screen. */
@media (max-width: 520px) {
	.pilta-hero h1 {
		font-size: var(--wp--preset--font-size--xxl) !important;
	}
}

@media (max-width: 440px) {
	.pilta-hero h1 {
		font-size: var(--wp--preset--font-size--xl) !important;
	}

	.pilta-ledger-initial {
		font-size: var(--wp--preset--font-size--xl) !important;
	}
}

/* Guard: whatever the step, the swipe can never be the thing that overflows. */
.pilta-hero h1 {
	max-width: 100%;
}

.pilta-swipe {
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   12. Footer  (header/footer parts authored after the shell pass)
   The theme.json link colour is teal, which is unreadable on the deep-teal
   footer ground. Links there use the locked ivory mixes instead.
   --------------------------------------------------------------------------- */
.pilta-footer a {
	color: var(--pilta-on-deep-strong);
	text-decoration: none;
}

.pilta-footer a:hover,
.pilta-footer a:focus {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
}

.pilta-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pilta-footer__links li {
	margin-block-end: 8px;
}

.pilta-footer__rule {
	border: 0;
	border-top: 1px solid var(--pilta-on-deep-fine);
	margin-block: 48px 40px;
	opacity: 0.4;
}

.pilta-footer__legal,
.pilta-footer__note,
.pilta-footer__promise {
	color: var(--pilta-on-deep-fine);
}

.pilta-footer__word {
	margin-block-start: 4px;
}

/* 2026-09-24 (Ryan): the Contact column's paragraph took core's block gap
   while the two link lists beside it reset their margin to 0, so its content
   sat 16px lower than its siblings. Same start line for all three columns. */
.pilta-footer__contact {
	margin-block-start: 8px; /* the lists start 8px under their label */
}

/* Sticky header veil. The part carries .pilta-header. */
.pilta-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* background + backdrop-filter intentionally NOT here: they live on
	   .pilta-header::before (containing-block trap, see the rule above). */
	border-bottom-color: var(--pilta-hairline, rgba(37, 74, 86, 0.16));
}

.pilta-header__bar {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   13. Mobile overflow guard
   The header bar is a nowrap flex row (lockup + nav + CTA). Below the nav
   breakpoint its min-content width was wider than a 390px viewport, which
   pushed the whole document sideways. Let the row shrink, drop the header CTA
   into the overlay menu on small screens, and stop the hero art from adding
   width of its own.
   --------------------------------------------------------------------------- */
html,
body {
	overflow-x: clip;
	max-width: 100%;
	/* Cormorant Garamond ships old-style figures; the approved renders had lining
	   figures (they were Georgia until 2026-09-24), so keep numerals lining sitewide. */
	font-variant-numeric: lining-nums;
}

.pilta-header__bar {
	min-width: 0;
	flex-wrap: nowrap;
}

.pilta-header__bar > * {
	min-width: 0;
}

.pilta-lockup {
	flex: 0 1 auto;
	min-width: 0;
}

@media (max-width: 900px) {
	/* the overlay menu carries the CTA; a second one here only overflows */
	.pilta-header__cta {
		display: none;
	}

	.pilta-header__bar {
		justify-content: space-between;
	}
}



/* ---------------------------------------------------------------------------
   14. Mobile fixes, measured
   Playwright at 375px: body scrollWidth 404 vs viewport 375.
   Two causes, both fixed here.
     a) .pilta-header__cta{display:none} lost to core's
        .wp-block-buttons-is-layout-flex{display:flex} (0,2,0 beats 0,1,0).
        Matched on specificity rather than reaching for !important.
     b) .pilta-swipe carries white-space:nowrap (from the comp), so
        "when you need it." could not wrap and measured 354px inside a
        327px column. The hero step drops instead of the swipe breaking,
        because a swipe split across two lines is a brand violation.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.pilta-header .pilta-header__cta,
	.pilta-header__cta.wp-block-buttons {
		display: none;
	}
}

/* The hero steps live in section 7 with the rest of the breakpoint ladder.
   Nothing to add here: the <400px step was corrected in place there. */

/* ---------------------------------------------------------------------------
   15. Nav collapse breakpoint
   Found in the 2026-07-30 width sweep: eight nav items plus the CTA need
   roughly 800px, but core/navigation only swaps to its overlay at 600px. So
   between ~900 and ~1200 the full nav rendered and wrapped onto two lines.
   Force the overlay earlier. Uses the core responsive-container classes
   rather than a custom menu, so the block keeps its own a11y behaviour.
   --------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.pilta-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.pilta-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
   16. Button states — mint action colour (Ryan 2026-08-31, queue row 10)
   The action colour is mint-600 #2ea87c with a teal-900 #0d2025 label
   (5.60:1), from the Workbook §02 mint ramp. Reserved for CTAs/interactive
   fills ONLY — nothing else on the site wears mint, which is what makes it
   read as actionable. Teal and gold fills were both rejected (blend with
   text/accents), so states must stay in the mint: press feedback is a
   brightness step, never a colour flip. The focus ring is a double ring
   (ivory inner, deep outer) so it reads on the ivory page ground and on
   the deep contact bands alike.
   --------------------------------------------------------------------------- */
.wp-element-button {
	transition: filter 120ms ease, color 120ms ease;
}

/* Ryan 2026-08-31: hover flips the LABEL to gold-500 #ECAD4E (the ruled
   hover token). Measured 1.52:1 against the mint fill — a deliberate
   low-contrast flash on a transient state, per the owner's call. */
.wp-element-button:hover {
	filter: brightness(0.94);
	color: var(--wp--preset--color--gold-500);
}

.wp-element-button:active {
	filter: brightness(0.9);
}

.wp-element-button:focus-visible {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 2px var(--wp--preset--color--ivory), 0 0 0 4px var(--wp--preset--color--deep);
}

/* ---------------------------------------------------------------------------
   17. Homepage hero exit gap (Ryan 2026-08-31)
   Ryan: shrink the space between the hero's "How we work" link and the next
   section by 50%. Measured painted gap was 145px (hero pb 64 + hinge band
   pt 48 + internal margins); the pair below removes 72px, landing ~73px.
   Scoped to the homepage so interior page heroes keep the standard rhythm.
   --------------------------------------------------------------------------- */
.home .pilta-hero {
	padding-bottom: 28px;
}

.home .pilta-hero + .pilta-band {
	padding-top: 12px;
}


/* =============================================================================
   18. HOMEPAGE V2 BUILD (2026-08-31) - from the ruled workshop mock
   (Website/PILTA-Homepage-Comp-v2.html). White hero ground, papercut swipe,
   services grid, trust wall, quotes trio, insights split, founder band,
   ruled placeholder slots. Later rules override earlier ones at equal
   specificity, which is how the hero/swipe overrides work without touching
   the sections above.
   ========================================================================== */

/* Bands stack FLUSH inside page content: the root block gap otherwise opens
   a body-ground strip between adjacent sections (visible wherever neighbours
   differ - Ryan flagged it around the white trust band 2026-09-01). */
.wp-block-post-content > section {
	margin-block-start: 0;
}

/* Hero ground: WHITE (Ryan 8/31). The sun art switches to the white-backed
   variant so the disk's opaque backing keeps masking the horizon lines. */
.pilta-hero {
	background-color: var(--wp--preset--color--white);
}

.pilta-sunrise::before {
	background-image: url("../img/PILTA-dawnburst-sun-white.svg");
}

/* Gold highlight: papercut ripped strip replaces the brushstroke (Workbook
   S04B, ruled 8/31). Shadow is a SCREEN-SPACE CSS drop-shadow on the
   pseudo-element, never an SVG filter: a filter rasterizes inside the
   stretched 300x56 viewBox and pixelates (standing rule). */
.pilta-swipe::before {
	left: -2.5%;
	top: 6%;
	width: 104%;
	height: 92%;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2056%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20transform%3D%22rotate%28-1.1%20150%2028%29%22%3E%3Cpath%20d%3D%22M3.0%206.2%20L3.2%206.3%20L3.7%206.4%20L4.4%206.4%20L5.3%206.4%20L6.4%206.4%20L7.8%206.6%20L9.4%206.6%20L11.3%206.5%20L13.3%205.8%20L15.6%204.7%20L18.2%203.8%20L20.9%202.9%20L23.9%204.2%20L27.1%207.7%20L30.6%209.0%20L34.2%208.2%20L37.9%208.2%20L41.6%208.8%20L45.3%209.6%20L48.9%2010.5%20L52.6%2011.0%20L56.3%2011.1%20L60.0%2011.1%20L63.6%2011.0%20L67.3%209.9%20L71.0%207.7%20L74.7%207.5%20L78.3%209.1%20L82.0%2010.0%20L85.7%2010.2%20L89.4%2010.3%20L93.0%2010.2%20L96.7%2010.4%20L100.4%2010.8%20L104.1%2010.5%20L107.7%209.6%20L111.4%209.3%20L115.1%209.5%20L118.8%209.9%20L122.4%2010.3%20L126.1%2010.5%20L129.8%2010.6%20L133.5%2010.3%20L137.1%209.8%20L140.8%209.4%20L144.5%209.3%20L148.2%208.8%20L151.8%208.1%20L155.5%207.1%20L159.2%206.0%20L162.9%206.0%20L166.5%207.3%20L170.2%208.0%20L173.9%208.0%20L177.6%206.8%20L181.2%204.3%20L184.9%204.3%20L188.6%206.9%20L192.3%207.2%20L195.9%205.3%20L199.6%205.0%20L203.3%206.5%20L207.0%206.6%20L210.6%205.5%20L214.3%205.2%20L218.0%205.7%20L221.7%206.7%20L225.3%208.2%20L229.0%208.9%20L232.7%208.6%20L236.4%208.3%20L240.0%208.1%20L243.7%208.0%20L247.4%208.1%20L251.1%207.3%20L254.7%205.7%20L258.4%205.9%20L262.1%208.0%20L265.8%208.7%20L269.4%208.1%20L272.9%207.7%20L276.1%207.6%20L279.1%207.8%20L281.8%208.4%20L284.4%208.5%20L286.7%208.2%20L288.7%206.6%20L290.6%203.8%20L292.2%204.0%20L293.6%207.3%20L294.7%208.9%20L295.6%208.8%20L296.3%208.9%20L296.8%209.2%20L297.0%209.3%20L298.6%2019.0%20L295.8%2028.0%20L298.0%2038.0%20L297.0%2048.5%20L296.8%2048.7%20L296.3%2049.2%20L295.6%2049.4%20L294.7%2049.4%20L293.6%2049.3%20L292.2%2049.2%20L290.6%2049.1%20L288.7%2049.0%20L286.7%2048.9%20L284.4%2048.9%20L281.8%2049.1%20L279.1%2049.6%20L276.1%2049.4%20L272.9%2048.5%20L269.4%2048.2%20L265.8%2048.4%20L262.1%2048.9%20L258.4%2049.5%20L254.7%2049.4%20L251.1%2048.5%20L247.4%2048.2%20L243.7%2048.5%20L240.0%2048.5%20L236.4%2048.4%20L232.7%2048.1%20L229.0%2047.8%20L225.3%2047.4%20L221.7%2047.1%20L218.0%2047.1%20L214.3%2047.3%20L210.6%2047.5%20L207.0%2047.7%20L203.3%2047.3%20L199.6%2046.5%20L195.9%2047.5%20L192.3%2050.4%20L188.6%2050.3%20L184.9%2047.1%20L181.2%2045.3%20L177.6%2045.1%20L173.9%2045.0%20L170.2%2045.0%20L166.5%2045.0%20L162.9%2044.9%20L159.2%2044.7%20L155.5%2044.3%20L151.8%2044.4%20L148.2%2044.7%20L144.5%2044.9%20L140.8%2044.8%20L137.1%2046.2%20L133.5%2049.1%20L129.8%2050.2%20L126.1%2049.6%20L122.4%2048.1%20L118.8%2045.8%20L115.1%2045.2%20L111.4%2046.1%20L107.7%2046.6%20L104.1%2046.7%20L100.4%2046.9%20L96.7%2047.4%20L93.0%2047.9%20L89.4%2048.5%20L85.7%2048.7%20L82.0%2048.6%20L78.3%2048.7%20L74.7%2048.9%20L71.0%2049.3%20L67.3%2049.7%20L63.6%2049.9%20L60.0%2049.9%20L56.3%2049.7%20L52.6%2049.4%20L48.9%2049.5%20L45.3%2050.1%20L41.6%2050.1%20L37.9%2049.5%20L34.2%2049.7%20L30.6%2050.7%20L27.1%2051.2%20L23.9%2051.2%20L20.9%2050.9%20L18.2%2050.2%20L15.6%2049.8%20L13.3%2049.7%20L11.3%2049.7%20L9.4%2049.8%20L7.8%2049.8%20L6.4%2049.5%20L5.3%2051.1%20L4.4%2054.6%20L3.7%2054.6%20L3.2%2051.2%20L3.0%2049.4%20L0.7%2038.0%20L4.3%2028.0%20L2.2%2019.0%20Z%22%20fill%3D%22%23c88a2e%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	filter: drop-shadow(0.5px 2.4px 2px rgba(20, 48, 52, 0.34));
}

/* The dark-ground ivory variant keeps the old brushstroke until re-formed. */

/* Thesis headline holds one line down to 1080px. */
.pilta-thesis-line {
	font-size: clamp(31px, 3.4vw, 49px);
	white-space: nowrap;
}

/* The display preset's utility class (.has-display-font-size, a fixed 49px)
   carries !important, so the clamp above never applied. With the longer 9/27
   headline that clipped the line at 1081-1180px. Apply the clamp at this
   specificity inside the one-line range only; tablets and phones keep their
   existing sizes and wrap as before. */
@media (min-width: 1081px) {
	.pilta-thesis-line.has-display-font-size {
		font-size: clamp(31px, 3.4vw, 49px) !important;
	}
}

@media (max-width: 1080px) {
	.pilta-thesis-line {
		white-space: normal;
	}
}

/* Deep-band text rules (brand book: dark-ground secondary text = ivory mixes
   ONLY; headings ivory; hairlines reversed). Ryan 2026-09-01: services band
   went deep - these rules are written for ANY deep band. */
.pilta-band--deep .wp-block-heading {
	color: var(--wp--preset--color--ivory);
}

.pilta-band--deep p.has-body-color {
	/* the preset utility carries !important, so this must too */
	color: var(--pilta-on-deep-strong) !important;
}

.pilta-band--deep .pilta-svcgrid,
.pilta-band--deep .pilta-svc {
	border-color: var(--pilta-hair-reverse);
}

.pilta-band--deep .pilta-slot {
	border-color: rgba(247, 241, 236, 0.35);
	color: var(--pilta-on-deep-fine);
}

.pilta-band--deep .pilta-tlink {
	color: var(--wp--preset--color--ivory);
}

/* On the gold-500 hover fill, flip text dark for legibility. */
.pilta-band--deep .pilta-svc:hover .wp-block-heading {
	color: var(--wp--preset--color--ink);
}

.pilta-band--deep .pilta-svc:hover p.has-body-color {
	color: var(--wp--preset--color--body) !important;
}

.pilta-band--deep .pilta-svc:hover .pilta-slot {
	border-color: rgba(19, 47, 55, 0.35);
	color: var(--wp--preset--color--body);
}

/* --- services grid: hairline-ruled tiles, not floating cards --------------- */
.pilta-svcgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--pilta-hairline, rgba(37, 74, 86, 0.16));
	border-left: 1px solid var(--pilta-hairline, rgba(37, 74, 86, 0.16));
}

.pilta-svc {
	border-right: 1px solid var(--pilta-hairline, rgba(37, 74, 86, 0.16));
	border-bottom: 1px solid var(--pilta-hairline, rgba(37, 74, 86, 0.16));
	padding: 26px 24px;
}

.pilta-svc {
	transition: background-color 0.18s ease;
	/* Ryan 2026-08-31: image slots align across the row — text zone flexes,
	   the slot pins to the tile's bottom; equal widths + fixed aspect give
	   equal heights, so tops and bottoms line up across every row. */
	display: flex;
	flex-direction: column;
}

/* Hover highlight: gold-500 #ECAD4E — Ryan 2026-08-31, re-admitted from the
   ramps for HOVER USE ONLY (its P3-era dead-listing stands everywhere else).
   Ink on it: 7.15:1; body rides 4.18:1 for the transient state. */
.pilta-svc:hover {
	background-color: var(--wp--preset--color--gold-500);
}

.pilta-svc .pilta-svc-img {
	margin-top: auto;
	/* 2026-09-08: border-box so the placeholder <p> (24px padding) and the
	   loaded <figure> share ONE 16:10 box -> slot tops align in mixed rows
	   (measured 233.8 vs 215.8 before this line). */
	box-sizing: border-box;
	aspect-ratio: 16 / 10;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
}

.pilta-svc p.has-base-font-size {
	margin-top: 6px;
	margin-bottom: 18px;
}

/* Ledger rows (the gold 01/02/03 numeral rows on interior pages) carry a
   hairline rule above each row, sitewide — Ryan 2026-09-08, from the
   What-we-do sweep board (option C). The homepage system draws its rows
   with hairlines; these rows floated on whitespace alone. :has() = modern
   browsers; older ones simply keep the whitespace. */
.wp-block-post-content .wp-block-columns:has(> .wp-block-column > .pilta-ledger-initial) {
	border-top: 1px solid var(--pilta-hairline, rgba(37, 74, 86, 0.16));
	padding-top: 32px;
}

/* Loaded service photos (Ryan 2026-09-08, approved mapping): a core image
   block wearing the plate idiom (4px corners, hairline, near-zero elevation)
   in the SAME 16:10 box as the placeholder slot, pinned to the tile bottom.
   Square sources center-crop by ruling. */
.pilta-svc figure.pilta-svc-img {
	margin: auto 0 0;
}

.pilta-svc .pilta-svc-img img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.pilta-band--deep .pilta-svc .pilta-plate {
	border-color: var(--pilta-hair-reverse);
}

.pilta-band--deep .pilta-svc:hover .pilta-plate {
	border-color: rgba(19, 47, 55, 0.35);
}

/* Ryan 2026-09-08: "two columns on tablets; avoid one column until the size
   is too small". Three columns >=980 (above), two from the 980 layout step
   down to the 620 type step, one below 620 (phone reference = Galaxy S25).
   With nine tiles the two-column grid leaves one empty cell: ::after fills
   it with the same hairlines so the ruled grid closes cleanly. */
@media (max-width: 980px) {
	.pilta-svcgrid {
		grid-template-columns: repeat(2, 1fr);
	}

	.pilta-svcgrid::after {
		content: "";
		border-right: 1px solid var(--pilta-hairline, rgba(37, 74, 86, 0.16));
		border-bottom: 1px solid var(--pilta-hairline, rgba(37, 74, 86, 0.16));
	}

	.pilta-band--deep .pilta-svcgrid::after {
		border-color: var(--pilta-hair-reverse);
	}
}

@media (max-width: 620px) {
	.pilta-svcgrid {
		grid-template-columns: 1fr;
	}

	.pilta-svcgrid::after {
		content: none;
	}
}

/* --- trust wall ------------------------------------------------------------ */
.pilta-logowall {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.pilta-logowall .wp-block-image.pilta-logoimg {
	box-sizing: border-box;
	/* Ryan 2026-09-01: the band is WHITE so the white-backed logo files blend
	   straight into the ground - no card chrome. */
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 14px;
	margin: 0;
}

.pilta-logoimg img {
	max-height: 96px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Per-logo optical trims (Ryan 2026-09-01): +30% Yondr, +20% OxyTurf,
   -15% Mars, -15% LumeNXT (width-bound, so the cap is width). */
.pilta-logo-yondr img {
	max-height: 125px;
}

.pilta-logo-oxyturf img {
	max-height: 115px;
}

.pilta-logo-mars img {
	max-height: 82px;
}

.pilta-logo-lumenxt img {
	max-width: 85%;
}

.pilta-logoslot {
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 1px dashed rgba(37, 74, 86, 0.28);
	border-radius: 4px;
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 8px;
}

@media (max-width: 980px) {
	.pilta-logowall {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Ryan 2026-09-28: "center copy with image above" - the stats sit centred under
   the logo wall, each figure centred over its label. */
.pilta-statrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 40px;
	padding-top: 28px;
	border-top: 1px solid var(--pilta-hairline, rgba(37, 74, 86, 0.16));
}

.pilta-statrow .pilta-stat {
	text-align: center;
}

.pilta-stat .pilta-stat-k {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--teal);
	font-variant-numeric: tabular-nums lining-nums;
}

.pilta-stat .pilta-stat-l {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	margin-top: 2px;
}

/* --- testimonials trio ----------------------------------------------------- */
.pilta-quotes3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px;
}

.pilta-q .pilta-q-rule {
	width: 40px;
	height: 2px;
	background: var(--wp--preset--color--gold);
	margin-bottom: 18px;
}

/* QUOTE TYPE RULED 2026-09-01 (Ryan, board B): Newsreader 400 italic, brand
   teal, 28px (= the 31 step optically tuned for Newsreader's larger fit).
   Applies to ALL quotes site-wide - Cormorant's quote role is retired. */
.pilta-q .pilta-q-text {
	font-family: var(--wp--preset--font-family--logotype); /* the Newsreader stack */
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--teal-600); /* one ramp step lighter, Ryan 2026-09-01 */
	font-size: 28px;
	line-height: 1.42;
}

.pilta-q .pilta-q-who {
	margin-top: 18px;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
}

/* Testimonial names: semibold, the weight they rendered at before Inter Bold was
   added for the What we do labels (9/27); <strong> would otherwise pick up 700. */
.pilta-q-who strong {
	font-weight: 600;
}

.pilta-q .pilta-q-who span {
	color: var(--wp--preset--color--muted);
}

/* Ryan 2026-09-28: the company logo under each name and title. The wide
   wordmarks (ALOM, True Talk Advisors) share one height; the Mars Petcare
   blue plate runs taller so the three read at a similar weight. */
.pilta-q .pilta-q-logo {
	margin: 16px 0 0;
}

.pilta-q .pilta-q-logo img {
	display: block;
	height: 30px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	object-position: left center;
}

.pilta-q .pilta-q-logo--plate img {
	height: 48px; /* a solid plate carries more weight than line wordmarks */
}

@media (max-width: 980px) {
	.pilta-quotes3 {
		grid-template-columns: 1fr;
	}
}

/* --- how-we-work steps ----------------------------------------------------- */
.pilta-hsteps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px;
}

.pilta-hstep .pilta-hstep-n {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--gold);
	font-variant-numeric: tabular-nums lining-nums;
}

.pilta-hstep h3 {
	margin-top: 8px;
}

.pilta-hstep p.has-base-font-size {
	margin-top: 6px;
}

@media (max-width: 980px) {
	.pilta-hsteps {
		grid-template-columns: 1fr;
	}
}

/* --- how-we-work band: "What PILTA is" figure ---------------------------
   The BD guide's p1-s1 drawing (Ryan 2026-09-27, numerals removed so they do
   not read as the three steps above). Two image blocks: the guide's wide
   drawing at content width with the guide panel's hairline and radius, and
   the guide's own phone drawing, alignfull, edge to edge at 600px and below.
   One shows at a time. */
.pilta-embed-fig img {
	display: block;
	width: 100%;
	height: auto;
}

.pilta-embed-fig--wide img {
	border: 1px solid rgba(37, 74, 86, 0.16);
	border-radius: 4px;
}

.pilta-embed-fig--narrow {
	display: none;
}

@media (max-width: 600px) {
	.pilta-embed-fig--wide {
		display: none;
	}

	.pilta-embed-fig--narrow {
		display: block;
	}
}

/* --- ruled placeholder slots ----------------------------------------------- */
.pilta-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 1px dashed rgba(37, 74, 86, 0.28);
	border-radius: 4px;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 1.6;
	padding: 24px;
}

.pilta-slot--tall {
	min-height: 340px;
}

.pilta-slot--portrait {
	aspect-ratio: 4 / 5;
}

.pilta-slot-43 {
	aspect-ratio: 4 / 3;
	/* 2026-09-24: border-box keeps the 24px padding INSIDE the 4:3 box, so a
	   slot and a .pilta-plate--4x3 image in the same row share one footprint
	   (Industries tile 07 beside tile 08; Learning 10). */
	box-sizing: border-box;
}

/* An empty column (Industries row three keeps its third cell empty so the
   tile widths stay equal) must leave no row gap once core stacks columns. */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:empty {
		display: none;
	}
}

/* --- insights split -------------------------------------------------------- */
.pilta-insplit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
}

.pilta-colhead {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.pilta-feedrow {
	padding: 18px 0;
	border-bottom: 1px solid var(--pilta-hairline, rgba(37, 74, 86, 0.16));
}

.pilta-feed .wp-block-post-template > li:first-child .pilta-feedrow,
.pilta-feed .wp-block-query .pilta-feedrow:first-child {
	border-top: 1px solid var(--pilta-hairline, rgba(37, 74, 86, 0.16));
}

.pilta-feedrow .wp-block-post-title {
	font-weight: 500;
}

.pilta-feedrow .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.pilta-feedrow time {
	display: inline-block;
	margin-top: 6px;
}

.pilta-iggrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.pilta-igslot {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed rgba(37, 74, 86, 0.28);
	border-radius: 4px;
	color: var(--wp--preset--color--muted);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
}

@media (max-width: 980px) {
	.pilta-insplit {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

/* --- founder band ---------------------------------------------------------- */
.pilta-founder {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 56px;
	align-items: start;
}

.pilta-founder .pilta-founder-quote {
	font-family: var(--wp--preset--font-family--logotype);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--teal-600); /* one ramp step lighter, Ryan 2026-09-01 */
	font-size: 28px;
	line-height: 1.45;
}

/* Phones (<=620, reference Galaxy S25 360x780): quotes step one rung down to
   25px — Ryan 2026-09-08 (board option B; 28px ran ~4 words a line). Applies
   to the two 28px quote surfaces: testimonials and the founder statement.
   Placed AFTER both 28px rules on purpose: equal specificity, source order wins. */
@media (max-width: 620px) {
	.pilta-q .pilta-q-text,
	.pilta-founder .pilta-founder-quote {
		font-size: 25px;
	}
}

/* Every other quote surface, current and future (blog posts included). */
.wp-block-quote,
.pilta-quote {
	font-family: var(--wp--preset--font-family--logotype);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--teal-600); /* one ramp step lighter, Ryan 2026-09-01 */
}

@media (max-width: 980px) {
	.pilta-founder {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------------
 * 11. BD Manager guide integration (2026-09-16)
 * How we work: the 4D rows become image plate | numeral | text.
 * What we do: the comparison table and the "Who PILTA works with" band.
 * Breakpoints are the file's own two steps: 980 (layout) and 620 (the Galaxy
 * S25 phone reference). Colour comes from the theme.json presets only.
 *
 * SPECIFICITY NOTE: core's columns CSS carries !important on flex-wrap and
 * flex-basis, and the width attribute writes flex-basis as an INLINE style, so
 * every stacking override below needs both !important and a class chain that
 * beats `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column`.
 * -------------------------------------------------------------------------- */

/* --- 4D rows -------------------------------------------------------------- */

/* The plate composes with .pilta-plate (4px corners, hairline, near-zero
   elevation). The drawings are line art already sitting on the lift ground;
   the background is insurance so no band colour can show through. Margins are
   pinned to zero so the plate's top lands exactly on the numeral's top. */
figure.pilta-4d-plate {
	background: var(--wp--preset--color--lift);
	margin-top: 0;
	margin-bottom: 0;
}

/* Rows stack one step earlier than core's 782 so the 34/10/56 split never
   squeezes the drawing below a legible width. DOM order is image, numeral,
   text, which is the ruled stacking order. */
@media (max-width: 980px) {
	.wp-block-columns.pilta-4d-row {
		flex-wrap: wrap !important;
	}

	.wp-block-post-content .wp-block-columns.pilta-4d-row > .wp-block-column {
		flex-basis: 100% !important;
	}

	.pilta-4d-row > .wp-block-column:first-child {
		max-width: 420px;
	}
}

/* Work: / Result: - the guide's two ledger lines under each phase paragraph.
   One step down from the row's md body so they read as a record, not prose. */
.pilta-4d-ledger {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
}

.pilta-4d-ledger strong {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.pilta-4d-ledger + .pilta-4d-ledger {
	margin-block-start: 6px;
}

/* Shadow org chart notes: the label is a block run-in head, so the guide's own
   sentence-case wording carries without a colon being invented for it. */
.pilta-4d-note {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.7;
}

.pilta-4d-note strong {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin-bottom: 2px;
}

/* Shared caption under the four rows. !important on the margin because the
   block-gap rule WordPress prints inline has the same specificity and its
   position in the cascade depends on enqueue order. */
.pilta-4d-caption {
	color: var(--wp--preset--color--muted);
	margin-block-start: var(--wp--preset--spacing--lg) !important;
}

/* --- quotes ---------------------------------------------------------------
   .pilta-quote already carries the ruled quote face and colour higher up in
   this file (Newsreader 400 italic, teal-600). Only the size was missing: the
   2026-09-01 ruling is 28px, stepping to 25px below 620 like every other quote
   surface. !important and last position are both required to beat the legacy
   `xl !important` override inside the 980 block above, which predates the
   ruling and is now the only thing that would size this class. */
.pilta-quote {
	font-size: 28px !important;
	line-height: 1.42;
}

/* F4 (audit 2026‑09‑16): the quote wore core's left rule, which is not the
   site's device. The homepage marks a quote with a 40×2 gold bar above it
   (.pilta-q .pilta-q-rule); this is the same bar, so every quote surface
   reads as one system. Face, size and colour are untouched, and no
   quotation marks are added to the copy. The two-class selector beats
   core's .wp-block-quote without reaching for !important. */
.wp-block-quote.pilta-quote {
	border-left: 0;
	padding-left: 0;
}

.pilta-quote::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--wp--preset--color--gold);
	margin-bottom: 16px;
}

.pilta-quote cite {
	display: block;
	margin-top: 18px;
	font-family: var(--wp--preset--font-family--sans);
	font-style: normal;
	/* 600, the weight these names have always rendered at: 700 only became real when
	   Inter Bold was added for the What we do labels (9/27). */
	font-weight: 600;
	font-size: 14px;
	font-variant: normal;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink);
}

.pilta-quote cite strong {
	font-weight: 600;
}

/* --- comparison table ------------------------------------------------------
   The table scrolls inside its own figure. The page never scrolls sideways:
   640px is the narrowest width at which three columns stay readable, which is
   the same minimum the guide sets on its own copy of this table. */
figure.pilta-compare {
	overflow-x: auto;
	margin-block-start: var(--wp--preset--spacing--lg) !important;
	margin-bottom: 0;
}

.pilta-compare table {
	min-width: 640px;
	border-collapse: collapse;
	table-layout: fixed;
}

.pilta-compare table th,
.pilta-compare table td {
	border: 0;
	border-bottom: 1px solid var(--pilta-hair);
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.55;
	color: var(--wp--preset--color--body);
	word-break: normal;
}

/* Header row is an eyebrow, not a heading. No zebra anywhere. */
.pilta-compare table thead th {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	border-bottom-color: var(--wp--preset--color--teal);
}

.pilta-compare table thead th:first-child {
	width: 24%;
}

.pilta-compare table thead th:nth-child(2) {
	width: 42%;
}

.pilta-compare table thead th:last-child {
	width: 34%;
}

.pilta-compare table tbody td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* The PILTA column reads as the positive column in MINT (Ryan 2026-09-24:
   "The PILTA text side of the How PILTA compares chart needs to use the MINT
   green"). Mint stays a fill, never a text colour on a light ground (mint on
   lift is 2.9:1): the header cell takes the solid mint fill with the teal-900
   label (the CTA pairing, 5.6:1); the body cells take mint at 10% over lift
   behind a 2px mint rule on the column's left edge; body text is unchanged.
   The first background-color is the fallback where color-mix is missing. */
.pilta-compare table tr > *:last-child {
	background-color: var(--wp--preset--color--lift);
	background-color: color-mix(in srgb, var(--wp--preset--color--mint) 10%, var(--wp--preset--color--lift));
	border-left: 2px solid var(--wp--preset--color--mint);
}

.pilta-compare table thead th:last-child {
	background-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--teal-900);
}

.pilta-compare table tbody tr:last-child th,
.pilta-compare table tbody tr:last-child td {
	border-bottom: 0;
}

/* --- who PILTA works with: prospect card ---------------------------------- */
figure.pilta-prospect-plate {
	background: var(--wp--preset--color--lift);
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 980px) {
	.wp-block-columns.pilta-prospect {
		flex-wrap: wrap !important;
	}

	.wp-block-post-content .wp-block-columns.pilta-prospect > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --- size and stage: ruler, axis labels, four bands ------------------------ */
figure.pilta-ruler,
figure.pilta-portraits {
	margin-top: 0;
	margin-bottom: 0;
}

.pilta-ruler img,
.pilta-portraits img {
	display: block;
	width: 100%;
	height: auto;
}

/* The ruler's gold ticks sit at 6.5 / 33.2 / 60.3 / 85.8 / 100% of the artwork.
   The five label columns are 16 / 32 / 24 / 20 / 8%, which centres each label
   at 8 / 32 / 60 / 82 / 96% - within four points of its tick at every width. */
.wp-block-columns.pilta-axis {
	margin-block-start: 6px !important;
	margin-bottom: 0;
}

.pilta-axis .wp-block-column {
	text-align: center;
}

.pilta-axis p {
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.06em;
}

/* F1 (audit 2026‑09‑16): at 360 this row used to wrap and strand "$200M+"
   at the container's left edge, under "Pre-revenue" — the top of the scale
   reading as if it sat at the bottom. One row, one step smaller: the
   columns keep their tick percentages, so "Early commercial" wraps inside
   its own column and every label stays over its own tick. */
@media (max-width: 620px) {
	.wp-block-columns.pilta-axis {
		flex-wrap: nowrap !important;
	}

	.pilta-axis p {
		font-size: 10px !important;
		letter-spacing: 0;
	}

	/* "$200M+" is one unbreakable token and its tick column is only 8%, so
	   at 280px it stacked into three lines. Give that column the room here
	   and take it from "Early commercial", which has the most slack; the
	   other three keep their tick percentages. nowrap guarantees it. */
	.wp-block-post-content .pilta-axis > .wp-block-column:nth-child(2) {
		flex-basis: 24% !important;
	}

	.wp-block-post-content .pilta-axis > .wp-block-column:last-child {
		flex-basis: 16% !important;
	}

	.pilta-axis > .wp-block-column:last-child p {
		white-space: nowrap;
	}
}

/* Two bands per row down to the 620 phone step, one below it - "avoid one
   column until the size is too small" (Workbook G2). Core stacks every columns
   block at 782, so the two-up shape has to be re-asserted above 620. */
@media (min-width: 621px) {
	.wp-block-columns.pilta-stage {
		flex-wrap: nowrap !important;
	}

	.wp-block-post-content .wp-block-columns.pilta-stage > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}

.pilta-stage > .wp-block-column {
	border-top: 1px solid var(--pilta-hair);
	padding-top: 20px;
}

.pilta-stage-range {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gold);
}

.pilta-stage ul {
	margin-block-start: 12px;
	padding-left: 1.1em;
}

.pilta-stage li {
	margin-bottom: 8px;
	line-height: 1.55;
	font-size: var(--wp--preset--font-size--base);
}

.pilta-stage li strong {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* --- Who PILTA works with: stage cards and "We help with" tags (Ryan 2026-09-27)
   Four stage cards read left to right, two at the 980 step, one below 620. The
   tags are a core list block (className pilta-chips): mint with deep-teal text,
   4.67:1 (Ryan 9/27; gold text on mint was 1.02:1, unreadable). */
.pilta-stagecards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 48px;
	row-gap: 40px;
}

.pilta-stagecard {
	border-top: 1px solid var(--pilta-hair);
	padding-top: 20px;
}

/* WordPress's flow layout gives every block after the first a top margin; in
   this grid that pushed cards 2-4 down 24px. Zero it at higher specificity. */
.pilta-stagecards > .pilta-stagecard {
	margin-block: 0;
}

.pilta-stagecard > * {
	margin-block: 0;
}

.pilta-stagecard .pilta-stage-range {
	margin-top: 6px;
}

.pilta-stagecard .pilta-stage-line {
	margin-top: 12px;
	line-height: 1.55;
}

.pilta-stagecard .pilta-chips-label {
	margin-top: 18px;
}

.pilta-chips {
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pilta-chips li {
	margin: 0;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--deep);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

@media (max-width: 980px) {
	.pilta-stagecards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.pilta-stagecards {
		grid-template-columns: 1fr;
	}
}

/* --- "When to bring us in": six icon cards (Ryan 2026-09-27, option A) ------
   Deep-teal cards with gold titles and icons and a 3px lift on hover (none under
   reduced motion). Three across, two at the 980 step, one below 620. A modifier
   class on each card (pilta-signal--launch, --systems, --compliance, --people,
   --capital, --turnaround) sets its line icon, drawn for PILTA on a 24px grid. */
.pilta-signals {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.pilta-signals > .pilta-signal {
	margin-block: 0;
}

.pilta-signal {
	background: var(--wp--preset--color--deep);
	border-radius: 6px;
	outline: 1px solid transparent;
	padding: 28px 28px 30px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
}

.pilta-signal:hover {
	transform: translateY(-3px);
	outline-color: var(--wp--preset--color--gold-500);
	box-shadow: 0 12px 26px rgba(13, 32, 37, 0.22);
}

.pilta-signal::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: 50%;
	background-color: rgba(200, 138, 46, 0.16);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px;
}

.pilta-signal h4 {
	color: var(--wp--preset--color--gold);
	letter-spacing: 0.01em;
}

.pilta-signal p {
	margin-block-start: 8px;
	line-height: 1.6;
	color: #dce5e3;
}

.pilta-signal--launch::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23c88a2e%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.5%202.5%202.5%209.5l8.2%203.8%203.8%208.2%207-19Z%27%2F%3E%3Cpath%20d%3D%27M21.5%202.5%2010.7%2013.3%27%2F%3E%3C%2Fsvg%3E");
}

.pilta-signal--systems::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23c88a2e%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203%2021%207.5%2012%2012%203%207.5Z%27%2F%3E%3Cpath%20d%3D%27M3%2012l9%204.5%209-4.5%27%2F%3E%3Cpath%20d%3D%27M3%2016.5l9%204.5%209-4.5%27%2F%3E%3C%2Fsvg%3E");
}

.pilta-signal--compliance::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23c88a2e%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.8%2019%205.6v5.6c0%204.6-3%208.3-7%209.9-4-1.6-7-5.3-7-9.9V5.6Z%27%2F%3E%3Cpath%20d%3D%27M8.8%2012.2l2.2%202.2%204.4-4.6%27%2F%3E%3C%2Fsvg%3E");
}

.pilta-signal--people::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23c88a2e%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M2.8%2020.5c0-3.5%202.8-6%206.2-6s6.2%202.5%206.2%206%27%2F%3E%3Cpath%20d%3D%27M15.6%204.9a3.4%203.4%200%200%201%200%206.3%27%2F%3E%3Cpath%20d%3D%27M17.6%2014.8c2.1.6%203.6%202.8%203.6%205.7%27%2F%3E%3C%2Fsvg%3E");
}

.pilta-signal--capital::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23c88a2e%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%276%27%20width%3D%2719%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.8%27%2F%3E%3Cpath%20d%3D%27M6.2%2012h.01M17.8%2012h.01%27%2F%3E%3C%2Fsvg%3E");
}

.pilta-signal--turnaround::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23c88a2e%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2012a8.5%208.5%200%201%200%202.5-6%27%2F%3E%3Cpath%20d%3D%27M3.5%203.5V8H8%27%2F%3E%3C%2Fsvg%3E");
}

@media (prefers-reduced-motion: reduce) {
	.pilta-signal,
	.pilta-signal:hover {
		transition: none;
		transform: none;
	}
}

@media (max-width: 980px) {
	.pilta-signals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.pilta-signals {
		grid-template-columns: 1fr;
	}
}

/* The phone step for the ruled quote, placed after the 28px rule above so the
   equal-specificity override wins on source order (handoff section 5). */
@media (max-width: 620px) {
	.pilta-quote {
		font-size: 25px !important;
	}
}

/* F8 (audit 2026‑09‑16): the /industries/ line is the whole replacement for
   the guide's six-industry field, and theme.json's global link style paints
   body links teal with no underline until hover, so nothing said it was a
   link. A persistent underline on this one paragraph; the hover stays the
   site's own (ink + underline) rather than inventing a link colour. */
.pilta-inline-link a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* F6 (audit 2026‑09‑16): below 620 the scroller clipped column two mid-word
   with no fade, no scrollbar and no hint, and the PILTA column sat entirely
   off screen. The table becomes one card per row instead — the guide's own
   copy carries tbl--stack for the same reason. Desktop is untouched. */
@media (max-width: 620px) {
	figure.pilta-compare {
		overflow-x: visible;
	}

	.pilta-compare table {
		min-width: 0;
		width: 100%;
		table-layout: auto;
	}

	.pilta-compare table thead {
		display: none;
	}

	.pilta-compare table tbody,
	.pilta-compare table tr,
	.pilta-compare table td {
		display: block;
		width: auto;
	}

	.pilta-compare table tr {
		border-top: 1px solid var(--pilta-hair);
		padding: 16px 0;
	}

	.pilta-compare table td {
		border-bottom: 0;
		padding: 0;
	}

	.pilta-compare table td + td {
		margin-top: 12px;
	}

	/* the PILTA answer is the answer: when the grid stacks, its lift ground
	   and hairline become a panel rather than a column edge, so the third
	   cell still reads as the one being argued for. */
	.pilta-compare table td:nth-child(3) {
		background-color: var(--wp--preset--color--lift);
		background-color: color-mix(in srgb, var(--wp--preset--color--mint) 10%, var(--wp--preset--color--lift));
		border: 1px solid var(--pilta-hair);
		border-radius: var(--pilta-radius-plate);
		padding: 12px;
	}

	/* the desktop rule that clears the last row's bottom border would otherwise
	   strip the last PILTA panel's bottom edge (audit 2026-09-24, F3). */
	.pilta-compare table tbody tr:last-child td:nth-child(3) {
		border-bottom: 1px solid var(--pilta-hair);
	}

	/* the hidden header comes back as a label over each cell */
	.pilta-compare table td:nth-child(2)::before {
		content: "How it usually works";
	}

	.pilta-compare table td:nth-child(3)::before {
		content: "PILTA";
	}

	.pilta-compare table td:nth-child(2)::before,
	.pilta-compare table td:nth-child(3)::before {
		display: block;
		font-family: var(--wp--preset--font-family--sans);
		font-weight: 600;
		font-size: 11px;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--wp--preset--color--gold);
		margin-bottom: 2px;
	}

	/* Ryan 2026-09-24 (mint PILTA column): the generated "PILTA" label takes
	   the desktop header cell's treatment, a solid mint strip with the
	   teal-900 label across the top of the tinted panel. Bleeds over the
	   panel's 12px padding; top corners follow the panel's inner curve. */
	.pilta-compare table td:nth-child(3)::before {
		margin: -12px -12px 10px;
		padding: 6px 12px;
		background-color: var(--wp--preset--color--mint);
		color: var(--wp--preset--color--teal-900);
		border-radius: 3px 3px 0 0;
	}
}

/* F2 (audit 2026‑09‑16): the six portraits shipped as one wide strip with the
   six seat names in a separate list below it, so nothing said which face was
   which. The guide pairs them — one portrait, one seat, per item — and so does
   this: six tiles, each a plate with its seat name under it. Laid out as a
   grid rather than flex so the row count is exact at every step; the columns
   block carries no width attributes, so nothing is left over to override. */
.wp-block-columns.pilta-buyers {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin-bottom: 0;
}

figure.pilta-buyer {
	background: var(--wp--preset--color--lift);
	margin-top: 0;
	margin-bottom: 0;
}

.pilta-buyers .wp-block-column > p {
	line-height: 1.45;
}

@media (max-width: 980px) {
	.wp-block-columns.pilta-buyers {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 620px) {
	.wp-block-columns.pilta-buyers {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -----------------------------------------------------------------------------
 * 19. Rulings 2026-09-24 (Ryan): footer seam, team split, Industries dropdown
 * -------------------------------------------------------------------------- */

/* Footer seam ("Yes fix footer"). Core's root block gap,
   :where(.wp-site-blocks) > * { margin-block-start: 24px }, sits between main
   and the footer part on EVERY page and shows the body's stone ground. It
   read as a 24px stone strip wherever a lift or white band meets the footer
   (Home and Case studies, and the six industry pages). The seam closes only
   there, so pages that end on stone keep their spacing exactly as it was.
   A deep last band (Join) is left as it is: closing it would merge that band
   into the deep footer, which is a separate call. */
.wp-site-blocks > main:has(> .wp-block-post-content > section:last-child:is(.has-lift-background-color, .pilta-band--lift, .has-white-background-color)) + footer.wp-block-template-part {
	margin-block-start: 0;
}

/* How we work, "Working with your team." (Ryan): two equal columns, the 16:9
   group photo under the eyebrow and heading on the left, the two paragraphs
   on the right. Stacks at the 980 layout step (core would hold the row down
   to 782 and squeeze the photo); the photo then runs the full width. Same
   specificity approach as the 4D rows (core's columns CSS is !important). */
@media (max-width: 980px) {
	.wp-block-columns.pilta-team-split {
		flex-wrap: wrap !important;
	}

	.wp-block-post-content .wp-block-columns.pilta-team-split > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Header Industries dropdown (Ryan): white panel instead of stone, hairline
   border, soft shadow, every name on ONE line. Desktop only: the inline nav
   exists from 1200 up (section 15 collapses it below), and :not(.is-menu-open)
   keeps the rules off the mobile overlay panel. The fill needs !important
   because the nav block's overlayBackgroundColor prints .has-stone-
   background-color (a preset utility with !important) on the submenu.
   min-width: the longest name, "Consumer products, CPG and apparel",
   measured 261.8px of text + 2 x 16px item padding + 2px border = 296px;
   320px leaves room for font-rendering variance, and nowrap guarantees the
   single line whatever the width. Specificity 0,6,0 beats core's open-state
   rule (0,5,0: min-width 200px) without !important. */
@media (min-width: 1200px) {
	.pilta-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--white) !important;
		border: 1px solid var(--pilta-hair);
		box-shadow: 0 12px 28px -10px rgba(19, 47, 55, 0.22), 0 1px 2px rgba(19, 47, 55, 0.08);
		min-width: 320px;
	}

	.pilta-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}