/* Style variation A5 'Field Light': overrides on top of direction-a.css. Maps to theme.json styles/a5-field-light.json plus section-style choices.
 * ------------------------------------------------------------------------------------------------------
 * Photography-led and airy. The page sits on a paper-and-white canvas; real photos carry the depth that
 * A gets from dark colour fields. Text sits on white panels that overlap the photos (LionVolt layering),
 * or beside a photo that dissolves into white. Only the video hero and the footer stay dark.
 *
 * What changes relative to A (everything else is inherited from direction-a.css):
 *   §1  presets             new gradient + shadow presets (settings.color.gradients, settings.shadow.presets)
 *   §2  canvas              main Group = paper/ink; the site background stays navy-950 behind header + footer
 *   §3  section styles      new light section styles: section-white, section-paper, section-ice
 *   §4  light elements      buttons, links, eyebrows, headings inside the light section styles
 *   §5  header              glass pill turns to light glass once .is-scrolled (and when the menu is open)
 *   §6+ block styles        re-skinned for light (same names as A), plus four new ones:
 *        core/columns "overlap" · core/image "photo" + "photo-band" · core/cover "field-fade" ·
 *        core/html trace divider (.trace-rule)
 * Colours are tokens only; translucent values are color-mix() of a token with transparent.
 * Rules inside light sections are scoped with :where(...) so they keep A's specificity and win by order;
 * the hero and the footer are never touched and keep A's dark styling.
 */

/* =========================================================================
   1. Presets (theme.json settings.color.gradients / settings.shadow.presets)
   ========================================================================= */
:root {
	/* product stage behind the space-module cut-out */
	--wp--preset--gradient--ice-glow: radial-gradient(ellipse 60% 56% at 50% 50%, var(--wp--preset--color--white) 0%, var(--wp--preset--color--paper) 55%, var(--wp--preset--color--ice) 100%);
	/* how-it-works schematic cards */
	--wp--preset--gradient--diagram-light: radial-gradient(ellipse 70% 70% at 50% 50%, color-mix(in srgb, var(--wp--preset--color--ice) 70%, var(--wp--preset--color--white)) 0%, var(--wp--preset--color--white) 78%);
	/* closing CTA: white over the copy, dissolving into the field photo on the end side */
	--wp--preset--gradient--field-fade: linear-gradient(90deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 44%, color-mix(in srgb, var(--wp--preset--color--white) 78%, transparent) 52%, color-mix(in srgb, var(--wp--preset--color--white) 28%, transparent) 62%, transparent 74%);
	--wp--preset--gradient--field-fade-tablet: linear-gradient(90deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 56%, color-mix(in srgb, var(--wp--preset--color--white) 78%, transparent) 63%, color-mix(in srgb, var(--wp--preset--color--white) 28%, transparent) 73%, transparent 86%);
	--wp--preset--gradient--field-fade-vertical: linear-gradient(180deg, transparent 0, transparent 8rem, color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent) 14rem, var(--wp--preset--color--white) 18.5rem);
	/* panels that overlap photos, and small floating cards */
	--wp--preset--shadow--panel: 0 36px 70px -36px color-mix(in srgb, var(--wp--preset--color--ink) 38%, transparent), 0 2px 8px color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
	--wp--preset--shadow--soft: 0 16px 36px -22px color-mix(in srgb, var(--wp--preset--color--ink) 34%, transparent);
}
/* WordPress utility class for the gradient preset on the Cover overlay */
.has-field-fade-gradient-background { background: var(--wp--preset--gradient--field-fade) !important; }

/* =========================================================================
   2. Canvas: the main Group is paper (template: core/group "main", backgroundColor paper)
   ========================================================================= */
.site-main {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	--eyebrow-dot: var(--wp--preset--color--signal-deep);
	--hiw-accent: var(--wp--preset--color--signal-deep);
}
/* the hero keeps A's dark accents */
.is-style-hero-deep { --eyebrow-dot: var(--wp--preset--color--signal-bright); --hiw-accent: var(--wp--preset--color--signal-bright); }
::selection { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }

/* =========================================================================
   3. Light section styles (theme.json styles.variations: section-white / -paper / -ice)
   ========================================================================= */
.is-style-section-white,
.is-style-section-paper,
.is-style-section-ice { color: var(--wp--preset--color--ink); }
.is-style-section-white { background-color: var(--wp--preset--color--white); }
.is-style-section-paper { background-color: var(--wp--preset--color--paper); }
.is-style-section-ice { background-color: var(--wp--preset--color--ice); }

/* Headings: navy display type, ink for card-level h3 */
:is(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--navy); }
:is(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) h3 { color: var(--wp--preset--color--ink); }
/* A's "section-label" heading (the eyebrow look on an H2) is frost for navy; ink on the light styles */
:is(.is-style-section-white, .is-style-section-paper, .is-style-section-ice) .wp-block-heading.section-label { color: var(--wp--preset--color--ink); }

/* =========================================================================
   4. Elements inside light sections (links, focus, eyebrows, buttons)
   ========================================================================= */
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) a { color: var(--wp--preset--color--navy); }
.site-main :focus-visible { outline-color: var(--wp--preset--color--navy); }
.site-main .is-style-hero-deep :focus-visible { outline-color: var(--wp--preset--color--frost); }
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) .is-style-eyebrow { color: var(--wp--preset--color--ink); }

/* Primary: navy pill, white text */
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) .wp-block-button__link {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--navy-800);
	background-color: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--white);
}
/* Outline: navy hairline */
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: color-mix(in srgb, var(--wp--preset--color--navy) 45%, transparent);
	background: transparent;
	color: var(--wp--preset--color--navy);
}
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--navy);
	background: color-mix(in srgb, var(--wp--preset--color--navy) 6%, transparent);
	color: var(--wp--preset--color--navy);
}
/* Arrow: navy text link */
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) .wp-block-button.is-style-arrow > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--navy) 35%, transparent);
}
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) .wp-block-button.is-style-arrow > .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--navy); text-decoration-color: currentColor; }
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice, .is-style-field-fade) .wp-block-button.is-style-arrow > .wp-block-button__link.has-mono-font-family { color: var(--wp--preset--color--navy); }

/* Section header: [ 0N ] · Eyebrow ------ */
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice) .section-head__intro { color: var(--wp--preset--color--slate); }
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice) .chapter-mark .is-style-index { color: var(--wp--preset--color--navy); }
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice) .chapter-mark .wp-block-separator { border-top-color: var(--wp--custom--line--light); }

/* =========================================================================
   5. Header: dark glass over the film (A), light glass once scrolled or when the menu is open
   ========================================================================= */
/* the light glass is a near-opaque derived white, so it reads as crisp white over film and photos
   (settings.custom.glass.light at 0.78 turns grey-lavender over dark footage under the blur) */
.site-header { --a5-glass-light: color-mix(in srgb, var(--wp--preset--color--white) 92%, transparent); }
.site-header .custom-logo-link { position: relative; }
/* the colour lockup (logo-color.webp) cross-fades in over the white one */
.site-header .custom-logo-link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/logo-color.webp") center / contain no-repeat;
	opacity: 0;
	pointer-events: none;
	transition: opacity calc(var(--wp--custom--motion--duration) * 0.4) var(--wp--custom--motion--ease);
}
.site-header .custom-logo { transition: width calc(var(--wp--custom--motion--duration) * 0.4) var(--wp--custom--motion--ease), height calc(var(--wp--custom--motion--duration) * 0.4) var(--wp--custom--motion--ease), opacity calc(var(--wp--custom--motion--duration) * 0.4) var(--wp--custom--motion--ease); }
.site-header.is-scrolled .custom-logo-link::after,
.has-modal-open .site-header .custom-logo-link::after { opacity: 1; }
.site-header.is-scrolled .custom-logo,
.has-modal-open .site-header .custom-logo { opacity: 0; }

.site-header.is-scrolled .wp-block-site-logo {
	background-color: var(--a5-glass-light);
	border-color: var(--wp--custom--line--light);
	box-shadow: var(--wp--preset--shadow--soft);
}
.site-header .is-style-glass-pill::before { transition: background-color calc(var(--wp--custom--motion--duration) * 0.4) var(--wp--custom--motion--ease), border-color calc(var(--wp--custom--motion--duration) * 0.4) var(--wp--custom--motion--ease); }
.site-header.is-scrolled .is-style-glass-pill::before,
.has-modal-open .site-header .is-style-glass-pill::before {
	border-color: var(--wp--custom--line--light);
	background-color: var(--a5-glass-light);
	box-shadow: var(--wp--preset--shadow--soft);
}
.site-header.is-scrolled .site-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
.site-header.is-scrolled .site-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--navy); background-color: color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent); }
.site-header.is-scrolled .is-style-glass-pill .wp-block-button__link,
.has-modal-open .site-header .is-style-glass-pill .wp-block-button__link { border-color: var(--wp--preset--color--navy); background-color: transparent; color: var(--wp--preset--color--navy); }
.site-header.is-scrolled .is-style-glass-pill .wp-block-button__link:hover,
.has-modal-open .site-header .is-style-glass-pill .wp-block-button__link:hover { border-color: var(--wp--preset--color--navy); background-color: color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent); color: var(--wp--preset--color--navy); }
.site-header.is-scrolled :focus-visible,
.has-modal-open .site-header :focus-visible { outline-color: var(--wp--preset--color--navy); }

@media (max-width: 1023px) {
	.site-header.is-scrolled .site-nav .wp-block-navigation__responsive-container-open,
	.has-modal-open .site-header .site-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--ink); }
	.site-header.is-scrolled .site-nav .wp-block-navigation__responsive-container-open:hover,
	.has-modal-open .site-header .site-nav .wp-block-navigation__responsive-container-open:hover { background-color: color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent); }
	/* the menu overlay is paper with the light contour lines */
	.has-modal-open .site-nav .wp-block-navigation__responsive-container {
		background-color: var(--wp--preset--color--paper);
		background-image: url('../svg/contours-light.svg');
	}
	.has-modal-open .site-nav .wp-block-navigation__container { border-top-color: var(--wp--custom--line--light); }
	.has-modal-open .site-nav .wp-block-navigation-item { border-bottom-color: var(--wp--custom--line--light); }
	.has-modal-open .site-header .site-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--navy); }
	.has-modal-open .site-header .site-nav .wp-block-navigation-item__content:hover { background: none; color: var(--wp--preset--color--ink); }
}

/* While the header still sits over the video hero it keeps A's dark glass; it turns light once the
   hero has scrolled out from under it. theme.js sets .is-over-film for that, the same in every
   browser (Firefox didn't re-apply a CSS-only version, a style query on a scroll-driven property). */
html:not(.has-modal-open) .site-header.is-scrolled.is-over-film .wp-block-site-logo { border-color: var(--wp--custom--line--dark); background-color: var(--wp--custom--glass--dark); box-shadow: none; }
html:not(.has-modal-open) .site-header.is-scrolled.is-over-film .custom-logo-link::after { opacity: 0; }
html:not(.has-modal-open) .site-header.is-scrolled.is-over-film .custom-logo { opacity: 1; }
html:not(.has-modal-open) .site-header.is-scrolled.is-over-film .is-style-glass-pill::before { border-color: var(--wp--custom--line--dark); background-color: var(--wp--custom--glass--dark); box-shadow: none; }
html:not(.has-modal-open) .site-header.is-scrolled.is-over-film .site-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--frost); }
html:not(.has-modal-open) .site-header.is-scrolled.is-over-film .site-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--white); background-color: color-mix(in srgb, var(--wp--preset--color--frost) 10%, transparent); }
html:not(.has-modal-open) .site-header.is-scrolled.is-over-film .site-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--white); }
html:not(.has-modal-open) .site-header.is-scrolled.is-over-film .is-style-glass-pill .wp-block-button__link { border-color: color-mix(in srgb, var(--wp--preset--color--frost) 60%, transparent); background-color: transparent; color: var(--wp--preset--color--white); }
html:not(.has-modal-open) .site-header.is-scrolled.is-over-film .is-style-glass-pill .wp-block-button__link:hover { border-color: var(--wp--preset--color--white); background-color: color-mix(in srgb, var(--wp--preset--color--frost) 12%, transparent); color: var(--wp--preset--color--white); }
html:not(.has-modal-open) .site-header.is-scrolled.is-over-film :focus-visible { outline-color: var(--wp--preset--color--frost); }

/* =========================================================================
   6. Decorative seismic trace as a section divider (core/html, aria-hidden)
   ========================================================================= */
.trace-rule {
	height: 2.5rem;
	color: var(--wp--preset--color--signal);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--ink) 16%, var(--wp--preset--color--ink) 84%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--ink) 16%, var(--wp--preset--color--ink) 84%, transparent 100%);
}
.trace-rule svg { width: 100%; height: 100%; }
.trace-rule.is-flipped svg { transform: scaleX(-1); }
[class*="is-style-section-"].is-layout-constrained > .trace-rule + * { margin-block-start: var(--wp--preset--spacing--60); }

/* =========================================================================
   7. Image styles: "photo" (rounded, crisp) and "photo-band" (full-bleed strip)
   ========================================================================= */
.wp-block-image.is-style-photo { overflow: hidden; border-radius: var(--wp--custom--radius--medium); }
.wp-block-image.is-style-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
/* margin-block only: the inline margins come from .has-global-padding > .alignfull (full bleed) */
.wp-block-image.is-style-photo-band { position: relative; overflow: hidden; margin-block: 0; }
.wp-block-image.is-style-photo-band img {
	width: 100%;
	height: clamp(22rem, 10rem + 34vw, 44rem);
	object-fit: cover;
	object-position: 50% 42%;
}
/* Additional classes: "is-slim" (a lower band) and "focus-low" (crop to the lower part of the frame:
   the lunar terrain below the horizon, so the band never repeats tile 03's Earth-rise; core/image has
   no focal point, so a class stands in) */
.wp-block-image.is-style-photo-band.is-slim img { height: clamp(18rem, 8rem + 26vw, 32rem); }
.wp-block-image.is-style-photo-band.focus-low img { object-position: 50% 88%; }
/* Additional class "overlap-up": the next block rides up over the photo band */
.is-layout-constrained > .overlap-up {
	position: relative;
	z-index: 1;
	margin-block-start: calc(var(--wp--preset--spacing--80) * -1);
}

/* Group block style "panel": the white card that rides over a photo band (proof section head) */
.wp-block-group.is-style-panel {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--panel);
}

.overlap-up > .wp-block-group.is-style-panel { max-width: 46rem; }

/* A grades documentary photos towards navy ("graded" block style + contextual grade). Field Light
   keeps them natural: warm field light is the point. Same selector list as A, scoped to light sections. */
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice) :is(
	.wp-block-image.is-style-graded,
	.wp-block-image.is-style-frame,
	.is-style-careers .wp-block-media-text__media,
	.is-style-news-grid .wp-block-post-featured-image,
	.is-style-proof-card .wp-block-image,
	.wp-block-image.is-style-product-glow:not(.is-cutout)
)::before { opacity: 0; }
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice) :is(
	.wp-block-image.is-style-graded,
	.wp-block-image.is-style-frame,
	.is-style-careers .wp-block-media-text__media,
	.is-style-news-grid .wp-block-post-featured-image,
	.is-style-proof-card .wp-block-image,
	.wp-block-image.is-style-product-glow:not(.is-cutout)
) img { filter: none; }

/* =========================================================================
   8. Columns style "overlap": a white panel over a large photo (origin, track record)
   ========================================================================= */
.wp-block-columns.is-style-overlap { gap: 0; padding-top: 0; border-top: 0; }
.is-style-overlap > .overlap__panel {
	position: relative;
	z-index: 1;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--panel);
}
.is-style-overlap .wp-block-image.is-style-photo img { aspect-ratio: 3 / 2; }
@media (min-width: 1101px) {
	.wp-block-columns.is-style-overlap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
	.is-style-overlap > .overlap__media { grid-column: 1 / span 9; grid-row: 1; }
	.is-style-overlap > .overlap__panel { grid-column: 8 / -1; grid-row: 1; }
	.is-style-overlap.is-reversed > .overlap__media { grid-column: 4 / -1; }
	.is-style-overlap.is-reversed > .overlap__panel { grid-column: 1 / span 5; }
}
@media (max-width: 1100px) {
	/* tablet and phone: the photo runs the full width, the panel rides up over its lower edge */
	.wp-block-columns.is-style-overlap { display: grid; grid-template-columns: minmax(0, 1fr); }
	.wp-block-columns.is-style-overlap > .overlap__media { grid-column: 1; grid-row: 1; }
	.wp-block-columns.is-style-overlap > .overlap__panel { grid-column: 1; grid-row: 2; margin: calc(var(--wp--preset--spacing--70) * -1) var(--wp--preset--spacing--50) 0; }
}
@media (max-width: 781px) {
	.wp-block-columns.is-style-overlap > .overlap__panel { margin: calc(var(--wp--preset--spacing--60) * -1) var(--wp--preset--spacing--30) 0; padding: var(--wp--preset--spacing--40); }
}

/* =========================================================================
   9. Mission / origin (innoseis/statement)
   ========================================================================= */
:where(.is-style-section-white, .is-style-section-paper) .statement__lead { color: var(--wp--preset--color--navy); }
:where(.is-style-section-white, .is-style-section-paper) .statement__text p { color: var(--wp--preset--color--slate); }
.statement__origin.is-style-overlap { margin-block-start: var(--wp--preset--spacing--70); }

/* =========================================================================
   10. Stats (innoseis/stats): field photo band + the stat grid as a white panel over it
   ========================================================================= */
:where(.is-style-section-paper) .is-style-stat-grid {
	gap: 1px;
	border: 0;
	border-radius: var(--wp--custom--radius--medium);
	overflow: hidden;
	background-color: var(--wp--preset--color--ice);
	box-shadow: var(--wp--preset--shadow--panel);
}
:where(.is-style-section-paper) .is-style-stat-grid > .stat { gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--40); border: 0; background-color: var(--wp--preset--color--white); }
@media (max-width: 600px) { :where(.is-style-section-paper) .is-style-stat-grid > .stat { padding: var(--wp--preset--spacing--30); } }
:where(.is-style-section-paper) .stat__value { color: var(--wp--preset--color--navy); }
:where(.is-style-section-paper) .stat__label { color: var(--wp--preset--color--slate); }
.is-style-section-paper.is-layout-constrained > .stat__footnote { margin-block-start: var(--wp--preset--spacing--30); }
:where(.is-style-section-paper) .stat__footnote .wp-block-button.is-style-arrow > .wp-block-button__link { text-decoration-color: color-mix(in srgb, var(--wp--preset--color--navy) 35%, transparent); }

/* =========================================================================
   11. Problem (innoseis/comparison)
   ========================================================================= */
:where(.is-style-section-paper) .is-style-comparison > .wp-block-column {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 28%, transparent);
	background-color: var(--wp--preset--color--white);
}
:where(.is-style-section-paper) .is-style-comparison > .wp-block-column p { color: var(--wp--preset--color--slate); }
:where(.is-style-section-paper) .is-style-comparison > .wp-block-column.is-style-highlight {
	border-top: 2px solid var(--wp--preset--color--signal-deep);
	background-color: var(--wp--preset--color--ice);
}
:where(.is-style-section-paper) .is-style-comparison > .wp-block-column.is-style-highlight p { color: var(--wp--preset--color--ink); }
:where(.is-style-section-paper) .compare__glyph { color: var(--wp--preset--color--navy); }
:where(.is-style-section-paper) .is-style-highlight .compare__glyph { color: var(--wp--preset--color--navy); }
:where(.is-style-section-paper) .compare__glyph .glyph-accent { stroke: var(--wp--preset--color--signal-deep); }
/* navy strokes at 0.75 keep >= 3:1 on white and ice (the CSS property overrides the SVG attribute) */
:where(.is-style-section-paper) .compare__glyph [stroke-opacity="0.6"] { stroke-opacity: 0.75; }

/* =========================================================================
   12. How it works (innoseis/steps)
   ========================================================================= */
:where(.is-style-section-paper) .step p:last-child { color: var(--wp--preset--color--slate); }
:where(.is-style-section-paper) .step__num { color: var(--wp--preset--color--navy); }
:where(.is-style-section-paper) .wp-block-group.is-style-diagram {
	border-color: var(--wp--custom--line--light);
	background: var(--wp--preset--gradient--diagram-light);
	color: var(--wp--preset--color--navy);
}
/* frame and secondary strokes: 0.45 / 0.6 navy fall below 3:1 on the ice-tinted card */
:where(.is-style-section-paper) .is-style-diagram .hiw [stroke-opacity="0.45"] { stroke-opacity: 0.72; }
:where(.is-style-section-paper) .is-style-diagram .hiw [stroke-opacity="0.6"] { stroke-opacity: 0.75; }
/* Duotone preset "navy-ice" (theme.json settings.color.duotone: navy-800, navy, ice, white). WordPress prints
   the SVG filter (carried at the end of <body>) and the filter rule; the geometry and the mono caption
   repeat A's "deep-navy" rules. Shadows land in navy-800 and brand navy, highlights in ice and white:
   a cool blueprint. Used for technical imagery (SEM, read-out board); documentary photos stay natural. */
.wp-block-image.wp-duotone-navy-ice img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--medium);
	filter: url('#wp-duotone-navy-ice');
}
.wp-block-image.wp-duotone-navy-ice .wp-element-caption {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 1;
}
.wp-block-image.wp-duotone-navy-ice .wp-element-caption::before { content: ""; width: 1.5rem; height: 1px; background-color: var(--wp--preset--color--slate); }
:where(.is-style-section-paper) .is-style-proof-card .wp-element-caption { color: var(--wp--preset--color--slate); }
/* the duotone inside a proof card: card geometry (beats the "no grade" reset in §7) */
.is-style-proof-card .wp-block-image.wp-duotone-navy-ice img { aspect-ratio: 3 / 2; border-radius: 0; filter: url('#wp-duotone-navy-ice'); }
:where(.is-style-section-paper) .is-style-platform-strip li { border-color: var(--wp--custom--line--light); background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); }
:where(.is-style-section-paper) .is-style-platform-strip li::after { color: var(--wp--preset--color--slate); }
:where(.is-style-section-paper) .is-style-platform-strip li + li::before { color: var(--wp--preset--color--slate); }
:where(.is-style-section-paper) .is-style-platform-strip li:last-child { border-color: var(--wp--preset--color--navy); background-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
:where(.is-style-section-paper) .is-style-platform-strip li:last-child::after { color: var(--wp--preset--color--frost); }
/* the micrograph + platform row: a white inset with the light contour lines (A: navy inset) */
:where(.is-style-section-paper) .tech__platform.has-background {
	border: 1px solid var(--wp--custom--line--light);
	border-radius: var(--wp--custom--radius--medium);
	background-image: url('../svg/contours-light.svg');
}
:where(.is-style-section-paper) .tech__platform.has-background .wp-element-caption { color: var(--wp--preset--color--slate); }
:where(.is-style-section-paper) .tech__platform.has-background .wp-block-image.wp-duotone-navy-ice .wp-element-caption::before { background-color: var(--wp--preset--color--slate); }
:where(.is-style-section-paper) .tech__platform.has-background .is-style-platform-strip li { border-color: var(--wp--custom--line--light); background-color: var(--wp--preset--color--paper); }
:where(.is-style-section-paper) .tech__platform.has-background .is-style-platform-strip li:last-child { border-color: var(--wp--preset--color--navy); background-color: var(--wp--preset--color--navy); }
:where(.is-style-section-paper) .tech__platform.has-background .is-style-platform-strip li::after,
:where(.is-style-section-paper) .tech__platform.has-background .is-style-platform-strip li + li::before { color: var(--wp--preset--color--slate); }
:where(.is-style-section-paper) .tech__platform.has-background .is-style-platform-strip li:last-child::after { color: var(--wp--preset--color--frost); }

/* =========================================================================
   13. Products (innoseis/product-cards): paper cards on white, crisp photos
   ========================================================================= */
:where(.is-style-section-white) .is-style-product-card {
	border-color: var(--wp--custom--line--light);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--paper);
}
:where(.is-style-section-white) .product-card__body > p:not([class]) { color: var(--wp--preset--color--slate); }
:where(.is-style-section-white) .wp-block-image.is-style-product-glow { background: var(--wp--preset--gradient--ice-glow); }
:where(.is-style-section-white) .wp-block-image.is-style-product-glow img { -webkit-mask-image: none; mask-image: none; }
:where(.is-style-section-white) .wp-block-image.is-style-product-glow.is-cutout img { filter: drop-shadow(0 26px 30px color-mix(in srgb, var(--wp--preset--color--ink) 28%, transparent)); }
:where(.is-style-section-white) .wp-block-image.is-style-product-glow.is-photo { background: var(--wp--preset--color--paper); }
:where(.is-style-section-white) .wp-block-image.is-style-product-glow.is-photo img { --glow-zoom: 1; object-position: 50% 40%; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
/* Graviton: A's 6/6 split, the natural macro cropped in on the die (A's --glow-zoom hook) so the soft
   background stays at the edges */
:where(.is-style-section-white) .is-style-product-card.is-featured .is-style-product-glow.is-photo img { --glow-zoom: 1.32; object-position: 50% 58%; transform-origin: 51% 55%; }
:where(.is-style-section-white) .product-pair .wp-block-image.is-style-product-glow:not(.is-cutout) { background: var(--wp--preset--color--paper); }
/* A casts the pair photo navy with a ::before (same specificity as A, later file); Field Light keeps it natural */
:where(.is-style-section-white) .product-pair .wp-block-image.is-style-product-glow:not(.is-cutout)::before { opacity: 0; }
:where(.is-style-section-white) .product-pair .wp-block-image.is-style-product-glow:not(.is-cutout) img { filter: none; -webkit-mask-image: none; mask-image: none; }
/* phones: A turns the pair into a swipe row; its scrollbar in navy on the light hairline */
.is-style-section-white.is-layout-constrained > .product-pair.wp-block-columns.is-not-stacked-on-mobile { scrollbar-color: var(--wp--preset--color--navy) var(--wp--custom--line--light); }

/* Status chips: ice */
:where(.is-style-section-white) .is-style-status-chip { border-color: transparent; background-color: var(--wp--preset--color--ice); color: var(--wp--preset--color--navy); }
:where(.is-style-section-white) .is-style-status-chip::before { border-color: var(--wp--preset--color--navy); }
:where(.is-style-section-white) .is-style-status-chip.is-live::before { border-color: var(--wp--preset--color--navy); background-color: var(--wp--preset--color--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--navy) 18%, transparent); }
:where(.is-style-section-white) .wp-block-list.is-style-spec-rows { border-top-color: var(--wp--custom--line--light); color: var(--wp--preset--color--ink); }
:where(.is-style-section-white) .is-style-spec-rows li { border-bottom-color: var(--wp--custom--line--light); }

/* =========================================================================
   14. Applications (innoseis/application-tiles): a full-bleed photo strip with white panels
   ========================================================================= */
:where(.is-style-section-white) .is-style-app-tiles { gap: var(--wp--preset--spacing--20); }
:where(.is-style-section-white) .wp-block-cover.is-style-app-tile {
	min-height: clamp(34rem, 22rem + 16vw, 44rem);
	padding: var(--wp--preset--spacing--30);
	border-radius: 0;
	background-color: var(--wp--preset--color--paper);
}
:where(.is-style-section-white) .is-style-app-tile .wp-block-cover__background { opacity: 0; }
:where(.is-style-section-white) .is-style-app-tile .wp-block-cover__image-background { filter: none; }
:where(.is-style-section-white) .tile__index { border-color: transparent; background-color: var(--wp--preset--color--ice); color: var(--wp--preset--color--navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(.is-style-section-white) .tile__text {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
}
:where(.is-style-section-white) .tile__text p { color: var(--wp--preset--color--slate); }
:where(.is-style-section-white) .tile__text .wp-block-buttons { margin-top: var(--wp--preset--spacing--20); }
/* the focus ring sits inside the white panel, so it keeps 10:1 on any photo */
:where(.is-style-section-white) .is-style-app-tile:focus-within { outline: none; }
:where(.is-style-section-white) .is-style-app-tile:focus-within .tile__text { outline: 2px solid var(--wp--preset--color--navy); outline-offset: -6px; }
/* Additional class "focus-detail" (tile 04): the statement already shows this lab photo with the
   researcher, so the tile moves in on the apparatus (gold coils, brass adjuster). The focal point is the
   Cover's own object-position; the zoom uses the `scale` property so A's hover transform still composes. */
.is-style-app-tile.focus-detail .wp-block-cover__image-background { object-position: 66% 50%; scale: 2; transform-origin: 60% 96%; }

/* =========================================================================
   15. Proof (innoseis/proof-cards)
   ========================================================================= */
:where(.is-style-section-paper) .is-style-scroll-row { scrollbar-color: var(--wp--preset--color--navy) var(--wp--custom--line--light); }
:where(.is-style-section-paper) .is-style-scroll-row::-webkit-scrollbar-track { background-color: var(--wp--custom--line--light); }
:where(.is-style-section-paper) .is-style-scroll-row::-webkit-scrollbar-thumb { background-color: var(--wp--preset--color--navy); }
:where(.is-style-section-paper) .is-style-proof-card {
	border-color: var(--wp--custom--line--light);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--white);
}
:where(.is-style-section-paper) .proof-card__body p:last-child { color: var(--wp--preset--color--slate); }
/* the scroll arrow at the end of the chapter hairline: A's red, in the deep red that holds on white */
.is-style-section-paper.proof .chapter-mark::after { color: var(--wp--preset--color--signal-deep); }
:where(.is-style-section-paper) .proof-card__tag { border-color: transparent; background-color: var(--wp--preset--color--ice); color: var(--wp--preset--color--navy); }

/* =========================================================================
   16. Track record (innoseis/timeline)
   ========================================================================= */
:where(.is-style-section-paper) .track__body { color: var(--wp--preset--color--slate); }
.track__intro.is-style-overlap h2 { margin-bottom: var(--wp--preset--spacing--40); }
:where(.is-style-section-paper) .wp-block-list.is-style-timeline { border-top-color: color-mix(in srgb, var(--wp--preset--color--navy) 30%, transparent); }
:where(.is-style-section-paper) .is-style-timeline li { color: var(--wp--preset--color--slate); border-top-color: color-mix(in srgb, var(--wp--preset--color--navy) 30%, transparent); }
:where(.is-style-section-paper) .is-style-timeline li::before { border-color: var(--wp--preset--color--navy); background-color: var(--wp--preset--color--paper); }
:where(.is-style-section-paper) .is-style-timeline li.is-now::before { border-color: var(--wp--preset--color--signal-deep); background-color: var(--wp--preset--color--signal-deep); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--signal-deep) 18%, transparent); }
:where(.is-style-section-paper) .is-style-timeline strong { color: var(--wp--preset--color--ink); }
@media (max-width: 781px) {
	:where(.is-style-section-paper) .wp-block-list.is-style-timeline { border-left-color: color-mix(in srgb, var(--wp--preset--color--navy) 30%, transparent); }
}

/* =========================================================================
   17. Testimonials (innoseis/testimonials): white quote cards on ice
   ========================================================================= */
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice) .wp-block-quote.is-style-quote-card {
	border-color: transparent;
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
}
:where(.is-style-section-ice) .wp-block-quote.is-style-quote-card.is-featured { background-image: url('../svg/contours-light.svg'); }
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice) .is-style-quote-card p { color: var(--wp--preset--color--ink); }
:where(.is-style-section-white, .is-style-section-paper, .is-style-section-ice) .is-style-quote-card cite { border-top-color: var(--wp--custom--line--light); color: var(--wp--preset--color--slate); }

/* =========================================================================
   18. News (innoseis/news)
   ========================================================================= */
:where(.is-style-section-white) .is-style-news-grid .wp-block-post { border-bottom-color: var(--wp--custom--line--light); }
:where(.is-style-section-white) .is-style-news-grid .wp-block-post-date { color: var(--wp--preset--color--slate); }
:where(.is-style-section-white) .wp-block-post-title a { color: inherit; }
/* A zooms the lead thumbnail onto the die and casts its grey backdrop navy. Field Light keeps the zoom
   and treats this product shot like the other technical imagery: the navy-ice duotone (blueprint), in
   place of A's grade and cast. The two field photos beside it stay natural. */
:where(.is-style-section-white) .is-style-news-grid .wp-block-post:first-child .wp-block-post-featured-image img { filter: url('#wp-duotone-navy-ice'); }
:where(.is-style-section-white) .is-style-news-grid .wp-block-post:first-child .wp-block-post-featured-image::before { opacity: 0; }
:where(.is-style-section-white) .is-style-news-grid .wp-block-post:is(:hover, :focus-within) .wp-block-post-title a { text-decoration-color: color-mix(in srgb, var(--wp--preset--color--navy) 50%, transparent); }
@media (max-width: 781px) {
	:where(.is-style-section-white) .wp-block-post-template.is-style-news-grid { border-top-color: var(--wp--custom--line--light); }
}

/* =========================================================================
   19. Careers (innoseis/careers-band): the copy panel overlaps the team photo
   ========================================================================= */
:where(.is-style-section-paper) .is-style-careers .wp-block-media-text__media { border-radius: var(--wp--custom--radius--medium); }
:where(.is-style-section-paper) .is-style-careers .wp-block-media-text__content {
	position: relative;
	z-index: 1;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--panel);
}
:where(.is-style-section-paper) .is-style-careers .wp-block-media-text__content p:not(.is-style-eyebrow) { color: var(--wp--preset--color--slate); }
@media (min-width: 901px) {
	.wp-block-media-text.is-style-careers { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	:where(.is-style-section-paper) .is-style-careers .wp-block-media-text__content { align-self: end; margin: 0 0 calc(var(--wp--preset--spacing--60) * -1) calc(var(--wp--preset--spacing--80) * -1); }
	.is-style-careers .wp-block-media-text__media img { aspect-ratio: 3 / 2; }
}
@media (max-width: 900px) {
	/* matches core's stacked-on-mobile selector so the panel keeps its padding on phones */
	:where(.is-style-section-paper) .wp-block-media-text.is-style-careers > .wp-block-media-text__content { margin: calc(var(--wp--preset--spacing--60) * -1) var(--wp--preset--spacing--30) 0; padding: var(--wp--preset--spacing--40); }
}

/* =========================================================================
   20. Closing CTA (innoseis/cta-band): Cover style "field-fade"
   ========================================================================= */
.wp-block-cover.is-style-field-fade {
	min-height: clamp(32rem, 22rem + 20vw, 44rem);
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}
.is-style-field-fade .wp-block-cover__image-background { inset: 0 0 0 auto; width: 58%; object-position: 50% 58%; }
.is-style-field-fade .wp-block-cover__background { opacity: 1; }
.is-style-field-fade .cta__copy > * + * { margin-top: var(--wp--preset--spacing--40); }
.is-style-field-fade h2 { max-width: 7.5em; line-height: 1; letter-spacing: -0.045em; }
.is-style-field-fade .cta__sub { max-width: 22em; color: var(--wp--preset--color--slate); font-weight: 300; }
.is-style-field-fade .cta__copy > .wp-block-buttons { margin-top: var(--wp--preset--spacing--50); }
/* the lower version ("is-compact", e.g. on the Applications page) */
.cta-section.is-compact .wp-block-cover.is-style-field-fade { min-height: clamp(22rem, 15rem + 12vw, 30rem); padding-block: var(--wp--preset--spacing--60); }
.cta-section.is-compact .is-style-field-fade .cta__copy > .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }
@media (min-width: 782px) and (max-width: 1100px) {
	/* the image keeps its 58% (its edge stays under solid white); the white zone widens with the copy */
	.is-style-field-fade .has-field-fade-gradient-background { background: var(--wp--preset--gradient--field-fade-tablet) !important; }
}
@media (max-width: 781px) {
	.wp-block-cover.is-style-field-fade { align-items: flex-start; min-height: 0; padding-top: 18.5rem; }
	.is-style-field-fade .wp-block-cover__image-background { inset: 0 0 auto 0; width: 100%; height: 20rem; }
	.is-style-field-fade .has-field-fade-gradient-background { background: var(--wp--preset--gradient--field-fade-vertical) !important; }
	.cta-section.is-compact .wp-block-cover.is-style-field-fade { min-height: 0; padding-top: 12.5rem; padding-bottom: var(--wp--preset--spacing--50); }
	.cta-section.is-compact .is-style-field-fade .wp-block-cover__image-background { height: 14rem; }
}

/* =========================================================================
   21. Responsive refinements
   ========================================================================= */
@media (max-width: 1100px) {
	:where(.is-style-section-white) .wp-block-cover.is-style-app-tile { min-height: 32rem; }
}
@media (max-width: 781px) {
	.trace-rule { height: 2rem; }
	.wp-block-image.is-style-photo-band img { object-position: 58% 40%; }
	/* on narrow screens the whole frame height shows, so the terrain crop zooms in from the bottom edge */
	.wp-block-image.is-style-photo-band.focus-low img { object-position: 50% 100%; transform: scale(1.5); transform-origin: 50% 100%; }
	.wp-block-group.is-style-panel { padding: var(--wp--preset--spacing--40); }
}
@media (max-width: 600px) {
	:where(.is-style-section-white) .wp-block-cover.is-style-app-tile { min-height: 25rem; }
	:where(.is-style-section-white) .tile__text { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20); }
}