/* ==========================================================================
   PAN child theme — styles
   --------------------------------------------------------------------------
   Tokens come from theme.json (--wp--preset--*, --wp--custom--*), which is
   the Seal DNA copied out of the vault's Personal-Brand/Design System.
   This file does two jobs only:
     1. point Blocksy's own variables at those tokens, so the header, footer
        and Blocksy's components match the blocks;
     2. style the handful of PAN surfaces blocks can't express on their own —
        the seal ground, cards, icon wells, the eyebrow, the brass rule and
        the scroll reveal — and, since v0.2, the scenes, readout and doors of
        the chosen homepage (section 3). Patterns apply these by class, so the
        saved block markup stays plain and never trips the editor's validator.
   Loaded after Blocksy's main stylesheet but BEFORE its inline Customizer CSS,
   which Blocksy prints later in <head> — so overriding a Customizer rule needs
   higher specificity, not a later position (the header rules in section 3).
   ========================================================================== */

/* ---------- 1. Blocksy → Seal DNA -------------------------------------- */

/* 🔴 Blocksy's Customizer CSS sets its own :root font stack, 1290px container and
   h1–h6 sizes, and prints AFTER this file — so plain :root / h1 rules here lost.
   Measured 14 Sep: body text was the system font (Inter loaded, never used), the
   hero h1 was Blocksy's 40px/700 and the header sat 45px outside the content edge.
   Variables Blocksy also sets are defined on body instead (inheritance beats :root
   whatever the order); heading rules carry body for one more point of specificity.
   Both spellings survive the editor, which rewrites body to its canvas wrapper. */

:root {
	--theme-block-max-width: 760px;
	--theme-block-wide-max-width: 1200px;
	--theme-border-radius: var(--wp--custom--radius--md);
	--theme-button-border-radius: var(--wp--custom--radius--md);
}

body {
	--theme-font-family: var(--wp--preset--font-family--inter);
	--theme-font-size: var(--wp--preset--font-size--body);
	--theme-line-height: 1.62;
	--theme-normal-container-max-width: 1200px;
}

body :is(h1, h2, h3, h4, h5, h6),
body .site-title {
	--theme-font-family: var(--wp--preset--font-family--newsreader);
}

body h1 { --theme-font-size: var(--wp--preset--font-size--hero); --theme-font-weight: 500; --theme-line-height: 1.02; --theme-letter-spacing: -0.005em; }
body h2 { --theme-font-size: var(--wp--preset--font-size--title); --theme-font-weight: 600; --theme-line-height: 1.1; }
body h3 { --theme-font-size: var(--wp--preset--font-size--subhead); --theme-font-weight: 600; --theme-line-height: 1.15; }

:focus-visible {
	outline: 2px solid var(--wp--preset--color--seal-bright);
	outline-offset: 2px;
}

/* Line icons for CSS to draw with mask-image, so an icon takes the colour of the text it sits in
   (background: currentColor). Stroke drawings on a 24px grid, as the theme's other icons. */
:root {
	--pan-icon-risk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8.8 8.8l6.4 6.4M15.2 8.8l-6.4 6.4'/%3E%3C/svg%3E");
	--pan-icon-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 21.6 20.2H2.4z'/%3E%3Cpath d='M12 10v4.2M12 17.3v.2'/%3E%3C/svg%3E");
	--pan-icon-safe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.8 12.4l2.9 2.9 5.6-6'/%3E%3C/svg%3E");
	--pan-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.4v5.6M12 16.5v.2'/%3E%3C/svg%3E");
	--pan-icon-look: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E");
	--pan-icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--pan-icon-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
	--pan-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--pan-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19.5 6v5.5c0 4.6-3.2 8.2-7.5 9.5-4.3-1.3-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M8.8 12.2l2.3 2.3 4.3-4.6'/%3E%3C/svg%3E");
}

/* Header lockup — the PAN seal roundel beside the name, drawn the way the PAN
   kit draws it (live Newsreader text, brass outer ring, faint bone inner ring),
   because the exported seal images all carry the family "JB" monogram. Replace
   with an image logo once a PAN-monogram seal is exported from the Design System. */
.site-branding .site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.site-branding .site-title a::before {
	content: "PAN";
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--seal-deep);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.02em;
	box-shadow:
		inset 0 0 0 1px rgba(194, 161, 77, 0.6),
		inset 0 0 0 6px var(--wp--preset--color--seal-deep),
		inset 0 0 0 7px rgba(241, 236, 223, 0.3);
}

/* On a phone the full name wrapped to two lines beside the roundel (13 Sep). */
@media (max-width: 720px) {
	.site-branding .site-title { font-size: 1.1875rem; line-height: 1.2; }
	.site-branding .site-title a { gap: 0.625rem; }
	.site-branding .site-title a::before { width: 40px; height: 40px; font-size: 13px; }
}

/* ---------- 2. Sections ------------------------------------------------ */

/* margin-block: 0 — sections butt together. Without it Blocksy's flow margin
   leaves a 25–26px strip of page background between two coloured sections
   (measured 13 Sep between "How it works" and "Why PAN"). */
.pan-section {
	margin-block: 0;
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

.pan-section > * { margin-left: auto; margin-right: auto; }

/* Two plain sections in a row share one background, so their paddings would
   stack into a double gap. The second gives up its top padding. */
.pan-section:not(.pan-seal-ground, .pan-on-bone, .pan-on-surface, .pan-scene, .pan-room, .pan-daylight) + .pan-section:not(.pan-seal-ground, .pan-on-bone, .pan-on-surface, .pan-scene, .pan-room, .pan-daylight) {
	padding-top: 0;
}

.pan-on-bone { background: var(--wp--preset--color--bone); }
.pan-on-surface { background: var(--wp--preset--color--surface); }

.pan-narrow { max-width: 760px; }
.pan-wide { max-width: 1200px; }

/* ---------- Seal ground: navy → cyan with the faint dot texture --------- */

.pan-seal-ground {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(150deg, var(--wp--preset--color--seal-deep) 40%, var(--wp--preset--color--seal-mid) 65%, var(--wp--preset--color--seal-bright) 100%);
	color: var(--wp--preset--color--bone);
}

/* The texture fades in towards the bright corner, as the kit does — so the
   text, which sits on the deep side, never competes with it. */
.pan-seal-ground::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.28) 1.1px, transparent 1.6px);
	background-size: 9px 9px;
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(150deg, transparent 48%, #000);
	mask-image: linear-gradient(150deg, transparent 48%, #000);
}

.pan-seal-ground :where(h1, h2, h3, h4, p) { color: var(--wp--preset--color--bone); }
.pan-seal-ground .pan-lead { color: var(--wp--preset--color--seal-label); }

.pan-hero { padding-top: clamp(4.5rem, 12vw, 8.5rem); padding-bottom: clamp(4.5rem, 12vw, 8.5rem); }
.pan-hero h1 { max-width: 15ch; }
.pan-hero .pan-lead { max-width: 38rem; }

/* ---------- Type accents ----------------------------------------------- */

.pan-eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: var(--wp--custom--eyebrow--weight);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--custom--brass-800);
	margin-bottom: 0.875rem;
}

/* WordPress's flow spacing gives a heading a top margin of 1.5em of its OWN size:
   ~90px between an eyebrow and its section title, 135px above the hero line
   (measured 14 Sep). A title directly under its eyebrow sits tight instead. */
.pan-eyebrow + .wp-block-heading { margin-block-start: 0; }

/* The eyebrow is brass everywhere, as Seal DNA draws it. Until 14 Sep it was blue on light
   grounds, because no brass passed AA there, so every light section read blue-on-beige:
   blue eyebrow, blue links, navy heading. On light grounds it is now brass-800 (#735C25,
   5.4:1 on bone, 5.9:1 on paper), the design system's AA-clean brass for small text; on the
   navy grounds it is the brighter brass (5.0:1 and up). */
.pan-seal-ground .pan-eyebrow { color: var(--wp--preset--color--brass); }

/* One emphasised word in a light-ground headline, typed as italics in the editor: deep brass,
   headline sizes only (brass-700 is 4.1–4.5:1, AA for large text). Scenes and rooms use the
   brighter brass (section 3). */
body :where(h1, h2) em {
	font-style: italic;
	font-weight: 500;
	color: var(--wp--custom--brass-700);
}

.pan-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
}

/* The 40 × 2px brass rule under a headline, drawn by CSS so the heading
   block's saved markup stays a plain heading. */
.pan-ruled::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 1.125rem;
	background: var(--wp--preset--color--brass);
}

.has-text-align-center.pan-ruled::after { margin-left: auto; margin-right: auto; }

/* ---------- Cards ------------------------------------------------------ */

.pan-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 1.5rem;
	margin-top: 2.25rem;
}

/* Blocksy gives every child of a flow group a bottom margin
   (:is(.is-layout-flow, .is-layout-constrained) > *). Inside a grid that margin
   shortens the stretched item, so cards in one row end at different heights.
   Measured 13 Sep: 26px short. The grid gap does the spacing here instead. */
.pan-card-grid > *,
.pan-steps > * {
	margin-block: 0;
}

/* A service card opens on a small night scene holding that service's own drawing, the same one
   its page opens with, so the card and the page it leads to look like one thing. Until 14 Sep
   these were six identical white boxes with a 22px icon each ("the cards are dull"). The drawing
   is a Custom HTML block (edit as HTML); the whole card is the link. */
.pan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--depth--elev-1);
	transition:
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard),
		box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-card > * { margin-top: 0; margin-bottom: 0; padding-inline: 1.5rem; }
.pan-card > .pan-card-art { padding-inline: 0; }
.pan-card .wp-block-heading { margin-top: 1.35rem; font-size: 1.5rem; text-wrap: balance; }
.pan-card p { margin-top: 0.6rem; color: var(--wp--preset--color--ink-2); }
.pan-card > p:not(.pan-more) { margin-bottom: 1.1rem; }

.pan-card-art {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	height: 11.5rem;
	overflow: hidden;
	background-color: var(--wp--preset--color--night);
	border-bottom: 1px solid rgba(194, 161, 77, 0.4);
}

.pan-card-art::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;
	background: radial-gradient(ellipse 70% 85% at 78% 30%, rgba(7, 168, 173, 0.34), rgba(12, 91, 158, 0.2) 50%, transparent 78%);
}

.pan-card-art::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 1px, transparent 1.5px);
	background-size: 9px 9px;
	-webkit-mask-image: linear-gradient(120deg, transparent 35%, rgba(0, 0, 0, 0.6));
	mask-image: linear-gradient(120deg, transparent 35%, rgba(0, 0, 0, 0.6));
}

.pan-card-art .pan-motif { width: auto; height: 9.75rem; max-width: 82%; }

/* The "Learn more →" line sits on the card floor. */
.pan-card p.pan-more {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-block: 0.9rem 1.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--seal-mid);
}

.pan-card .pan-more a { text-decoration: none; }
.pan-card .pan-more a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pan-card:focus-within { box-shadow: 0 0 0 2px var(--wp--preset--color--seal-bright), var(--wp--custom--depth--elev-2); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pan-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--wp--custom--depth--elev-3);
	}
}

/* ---------- Steps ------------------------------------------------------ */

/* Each number sits in a small seal (deep navy, brass ring, bone numeral: the header roundel at
   step size) and, four across, a brass thread runs from one seal to the next. Until 14 Sep the
   numbers were brass digits over a hairline, the quietest thing on the page. Numbers are CSS
   counters, so adding, removing or reordering a step renumbers it. */
.pan-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	margin-top: 2.5rem;
	counter-reset: pan-step;
}

@media (min-width: 600px) {
	.pan-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	.pan-steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pan-steps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pan-step {
	position: relative;
	counter-increment: pan-step;
}

.pan-step::before {
	content: counter(pan-step);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--seal-deep);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.375rem;
	line-height: 1;
	box-shadow:
		inset 0 0 0 1px rgba(194, 161, 77, 0.8),
		inset 0 0 0 5px var(--wp--preset--color--seal-deep),
		inset 0 0 0 6px rgba(241, 236, 223, 0.3),
		var(--wp--custom--depth--elev-2);
}

@media (min-width: 960px) {
	.pan-steps:is(:has(> :nth-child(4):last-child), :has(> :nth-child(3):last-child)) > .pan-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1.625rem;
		left: 3.25rem;
		right: -2rem;
		height: 1px;
		background: rgba(194, 161, 77, 0.75);
	}
}

/* A plain set: alternatives rather than a sequence. A brass rule instead of a number, and no
   connector between them — a numbered, joined row reads as "do 1, then 2, then 3". Declared
   after the rules it overrides, so equal specificity resolves this way round. */
.pan-steps--plain > .pan-step::before {
	content: "";
	width: 2.75rem;
	height: 3px;
	margin-bottom: 1.1rem;
	border-radius: 2px;
	background: var(--wp--preset--color--brass);
	box-shadow: none;
}

@media (min-width: 960px) {
	.pan-steps--plain:is(:has(> :nth-child(4):last-child), :has(> :nth-child(3):last-child)) > .pan-step:not(:last-child)::after {
		content: none;
	}
}

.pan-step p { margin: 0; color: var(--wp--preset--color--ink-2); }

/* ---------- Portrait --------------------------------------------------- */

/* A brass hairline frame set behind the photo, offset down and right, like a print in a mat. */
.wp-block-image.pan-portrait {
	position: relative;
	isolation: isolate;
	margin: 0 1rem 1rem 0;
}

.wp-block-image.pan-portrait::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 1rem -1rem -1rem 1rem;
	border: 1px solid rgba(194, 161, 77, 0.7);
	border-radius: var(--wp--custom--radius--lg);
}

.wp-block-image.pan-portrait img {
	display: block;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--elev-3);
}

/* Three plain promises under the story, each with a tick in a small navy roundel. */
ul.pan-promises {
	display: grid;
	gap: 0.8rem;
	margin: 1.75rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
	list-style: none;
}

.pan-promises li {
	position: relative;
	margin: 0;
	padding-left: 2.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--headline);
}

.pan-promises li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--seal-deep);
	box-shadow: inset 0 0 0 1px rgba(194, 161, 77, 0.7);
}

.pan-promises li::after {
	content: "";
	position: absolute;
	left: 0.375rem;
	top: calc(0.05em + 0.375rem);
	width: 0.75rem;
	height: 0.75rem;
	background: var(--wp--preset--color--bone);
	-webkit-mask: var(--pan-icon-tick) center / contain no-repeat;
	mask: var(--pan-icon-tick) center / contain no-repeat;
}

/* ---------- Signal: risk, caution, safe ---------------------------------
   STATE, never decoration (Seal DNA tokens/depth.css). Every use carries its icon AND a word:
   risk crimson and the terracotta button differ by hue alone, and a colour-blind visitor can't
   see hue. Terracotta means act; crimson means warn. Until 14 Sep risk was drawn in terracotta,
   and a three-way comparison "you couldn't tell what was wrong". */
.pan-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: fit-content;
	margin: 0;
	padding: 0.28rem 0.7rem 0.28rem 0.5rem;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	line-height: 1.25;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
}

.pan-badge::before {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: var(--pan-i) center / contain no-repeat;
	mask: var(--pan-i) center / contain no-repeat;
}

.is-risk { --pan-i: var(--pan-icon-risk); --pan-sig: var(--wp--custom--signal--risk); --pan-sig-tint: var(--wp--custom--signal--risk-tint); --pan-sig-edge: var(--wp--custom--signal--risk-edge); --pan-sig-dark: var(--wp--custom--signal--risk-on-dark); }
.is-caution { --pan-i: var(--pan-icon-caution); --pan-sig: var(--wp--custom--signal--caution); --pan-sig-tint: var(--wp--custom--signal--caution-tint); --pan-sig-edge: var(--wp--custom--signal--caution-edge); --pan-sig-dark: var(--wp--custom--signal--caution-on-dark); }
.is-safe { --pan-i: var(--pan-icon-safe); --pan-sig: var(--wp--custom--signal--safe); --pan-sig-tint: var(--wp--custom--signal--safe-tint); --pan-sig-edge: var(--wp--custom--signal--safe-edge); --pan-sig-dark: var(--wp--custom--signal--safe-on-dark); }

.pan-badge:is(.is-risk, .is-caution, .is-safe) {
	color: var(--pan-sig);
	background: var(--pan-sig-tint);
	border-color: var(--pan-sig-edge);
}

/* The same badge on a navy ground: the light signal colour on a faint wash of itself. */
:is(.pan-scene, .pan-room, .pan-familiar, .pan-phone, .pan-web-live, .pan-door-urgent) .pan-badge:is(.is-risk, .is-caution, .is-safe) {
	color: var(--pan-sig-dark);
	background: color-mix(in srgb, var(--pan-sig-dark) 12%, transparent);
	border-color: color-mix(in srgb, var(--pan-sig-dark) 38%, transparent);
}

/* ---------- Buttons on the seal ground --------------------------------- */

.pan-seal-ground .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--seal-deep);
}

.pan-seal-ground .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface);
}

.pan-seal-ground .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--bone);
	border: 1px solid rgba(244, 236, 216, 0.55);
}

/* ---------- Reveal on scroll — fails visible ---------------------------
   Only where the browser supports scroll-driven animation AND the visitor
   has not asked for less motion. Everywhere else the content is simply
   there: nothing is ever hidden waiting for a script.

   🔴 Movement only — never opacity. The first version faded from opacity 0,
   and a full-page capture (13 Sep) showed the services, steps and "Why PAN"
   sections BLANK: below the fold the scroll timeline sits at 0%, so anything
   that renders the whole page at once — screenshot tools, link previews,
   print — saw invisible content. A slide cannot hide anything. */

@keyframes pan-rise {
	from { transform: translateY(22px); }
	to   { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.pan-reveal {
			animation: pan-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}

/* ==========================================================================
   3. The mix (v0.2, 14 Sep 2026) — Porch Light scenes with the Glass Box
      readout. Concept: the "PAN Homepage Directions" artifact.
   ========================================================================== */

/* ---------- Header: the night-navy masthead ----------------------------
   Blocksy prints its Customizer CSS AFTER this file (measured 14 Sep: its inline
   <style> follows pan.css in <head>), so a rule of equal specificity here loses.
   Header rules therefore start from #header or #offcanvas. What sits in the header
   — the menu and the Enquire button — stays in Customizer → Header (scripts/
   setup-home.php lays it out); only the look lives here. */

#header [data-row] { background-color: var(--wp--preset--color--night); }
#header [data-device="desktop"] [data-row*="middle"] { --height: 84px; }

#header .site-title {
	--theme-font-weight: 500;
	--theme-link-initial-color: var(--wp--preset--color--bone);
	--theme-link-hover-color: var(--wp--preset--color--surface);
}

#header [data-id="menu"] > ul > li > a {
	--theme-font-size: 0.9375rem;
	--theme-font-weight: 500;
	--theme-text-transform: none;
	--theme-link-initial-color: var(--wp--preset--color--seal-label);
	--theme-link-hover-color: var(--wp--preset--color--bone);
	--theme-link-active-color: var(--wp--preset--color--bone);
}

/* 🔴 The dropdown. Blocksy colours a HOVERED or CURRENT link with its palette's navy
   (--theme-link-hover-color / --theme-link-active-color, set on :root) and paints the
   dropdown in palette headline navy — so on this dark header the item under the mouse and
   the page you're on both vanished (seen 14 Sep on the Websites page). Every state is set
   here, on the dropdown itself, so no link inherits a colour meant for a light header. */
#header [data-id="menu"] .sub-menu {
	--dropdown-width: 15.5rem; /* Blocksy's 200px wrapped "Secure devices & accounts" */
	--dropdown-background-color: var(--wp--preset--color--night);
	--dropdown-divider: 1px solid rgba(188, 211, 232, 0.12);
	padding: 0.35rem 0;
	border: 1px solid rgba(188, 211, 232, 0.16);
	box-shadow: 0 22px 48px rgba(3, 10, 40, 0.5);
}

#header [data-id="menu"] .sub-menu .ct-menu-link {
	--theme-font-size: 0.9375rem;
	--theme-font-weight: 500;
	--theme-link-initial-color: var(--wp--preset--color--seal-label);
	--theme-link-hover-color: var(--wp--preset--color--bone);
	--theme-link-active-color: var(--wp--preset--color--bone);
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

#header [data-id="menu"] .sub-menu li:is(:hover, :focus-within) > .ct-menu-link { background-color: rgba(188, 211, 232, 0.08); }
#header [data-id="menu"] .sub-menu li[class*="current-menu-"] > .ct-menu-link { box-shadow: inset 3px 0 0 var(--wp--preset--color--brass); }

#header [data-id="trigger"] {
	--theme-icon-color: var(--wp--preset--color--bone);
	--theme-icon-hover-color: var(--wp--preset--color--surface);
}

[data-header] #offcanvas.ct-panel .ct-panel-inner { background-color: var(--wp--preset--color--night); }

/* The phone menu has the same inheritance: its current page was navy on night navy. */
#offcanvas [data-id="mobile-menu"] {
	--theme-link-initial-color: var(--wp--preset--color--bone);
	--theme-link-hover-color: var(--wp--preset--color--surface);
	--theme-link-active-color: var(--wp--preset--color--brass); /* 6.5:1 on night navy */
	--theme-icon-color: var(--wp--preset--color--seal-label);
	--theme-icon-hover-color: var(--wp--preset--color--bone);
}

/* The header's one button (Blocksy's Button element, text and link in the Customizer). */
:is(#header, #offcanvas) [data-id="button"] .ct-button {
	--theme-button-background-initial-color: var(--wp--preset--color--terracotta);
	--theme-button-background-hover-color: var(--wp--custom--terracotta-hover);
	--theme-button-text-initial-color: var(--wp--preset--color--surface);
	--theme-button-text-hover-color: var(--wp--preset--color--surface);
	--theme-button-font-size: 0.9375rem;
	--theme-button-font-weight: 600;
	--theme-button-border-radius: var(--wp--custom--radius--md);
}

/* ---------- Scenes: night navy, lit from one edge -----------------------
   The hero and the closing enquiry. The light and the dot texture are both
   pseudo-elements, so the section stays one plain group in the editor. */

.pan-scene {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--wp--preset--color--night);
	color: var(--wp--preset--color--bone);
}

.pan-scene::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: -10%;
	pointer-events: none;
	background: radial-gradient(ellipse 55% 60% at 92% 40%, rgba(7, 168, 173, 0.40), rgba(12, 91, 158, 0.22) 45%, transparent 72%);
}

.pan-scene-left::before {
	background: radial-gradient(ellipse 55% 70% at 8% 55%, rgba(7, 168, 173, 0.34), rgba(12, 91, 158, 0.20) 45%, transparent 72%);
}

/* The dot texture sits under the light and fades out before it reaches the words.
   Inset past the edges so the slow drift below never shows a border. */
.pan-scene::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -48px;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.24) 1.1px, transparent 1.6px);
	background-size: 9px 9px;
	-webkit-mask-image: linear-gradient(105deg, transparent 40%, rgba(0, 0, 0, 0.55) 90%);
	mask-image: linear-gradient(105deg, transparent 40%, rgba(0, 0, 0, 0.55) 90%);
}

.pan-scene-left::after {
	-webkit-mask-image: linear-gradient(255deg, transparent 40%, rgba(0, 0, 0, 0.55) 90%);
	mask-image: linear-gradient(255deg, transparent 40%, rgba(0, 0, 0, 0.55) 90%);
}

.pan-scene :where(h1, h2, h3, p) { color: var(--wp--preset--color--bone); }
.pan-scene .pan-lead { color: var(--wp--preset--color--seal-label); }

/* One brass word per scene headline — typed as ordinary italics in the editor.
   Headlines only: brass is never small text. On every navy ground, the brighter brass. */
:is(.pan-scene, .pan-room, .pan-seal-ground, .pan-familiar) :where(h1, h2, h3) em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--brass);
}

/* ---------- Porch Light hero ------------------------------------------- */

.pan-hero-porch {
	padding-top: clamp(3.5rem, 9vw, 6.5rem);
	padding-bottom: clamp(4rem, 10vw, 7.5rem);
	text-align: center;
}

.pan-hero-porch h1 { max-width: 14ch; margin-block-start: 0; text-wrap: balance; }
.pan-hero-porch .pan-lead { max-width: 36rem; text-wrap: balance; }

.pan-seal { display: block; width: clamp(92px, 10vw, 124px); height: auto; margin-bottom: 2rem; }
.pan-seal-disc { fill: var(--wp--preset--color--seal-deep); }

.pan-seal-ring {
	fill: none;
	stroke: var(--wp--preset--color--brass);
	stroke-width: 1.5;
	stroke-dasharray: 390; /* the circumference, 2π × 62 */
	transform: rotate(-90deg);
	transform-origin: 66px 66px;
}

.pan-seal-ring-inner { fill: none; stroke: rgba(241, 236, 223, 0.32); stroke-width: 1; }

.pan-seal-text {
	fill: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 30px;
	letter-spacing: 0.02em;
}

.pan-seal-est {
	fill: var(--wp--preset--color--brass);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 6.5px;
	font-weight: 600;
	letter-spacing: 0.24em;
}

/* The one call to action. Deep terracotta: white text on it is 5.6:1, where
   Seal DNA's brighter #C4652A fails AA. */
.wp-block-button.pan-cta > .wp-block-button__link {
	padding: 0.9rem 1.5rem;
	font-size: var(--wp--preset--font-size--body);
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--surface);
}

.wp-block-button.pan-cta > .wp-block-button__link:hover,
.wp-block-button.pan-cta > .wp-block-button__link:focus-visible {
	background-color: var(--wp--custom--terracotta-hover);
	color: var(--wp--preset--color--surface);
}

.pan-scene p.pan-trust {
	margin-top: 1.5rem;
	text-wrap: balance;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--seal-label);
	font-variant-numeric: tabular-nums;
}

/* ---------- The readout room ------------------------------------------- */

.pan-room {
	position: relative;
	isolation: isolate;
	background-color: var(--wp--preset--color--seal-deep);
	color: var(--wp--preset--color--bone);
	border-block: 1px solid rgba(194, 161, 77, 0.4);
}

.pan-room::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 1px, transparent 1.5px);
	background-size: 9px 9px;
	-webkit-mask-image: linear-gradient(150deg, transparent 55%, rgba(0, 0, 0, 0.5));
	mask-image: linear-gradient(150deg, transparent 55%, rgba(0, 0, 0, 0.5));
}

.pan-room-grid { gap: clamp(2rem, 6vw, 5rem); align-items: flex-start; }
.pan-room :where(h2) { font-size: clamp(1.875rem, 3.2vw, 2.625rem); color: var(--wp--preset--color--bone); text-wrap: balance; }
.pan-room :where(p) { color: var(--wp--preset--color--seal-label); }
.pan-room .pan-eyebrow { color: var(--wp--preset--color--brass); }

/* The count of answers the browser gave, large, under the words: the page's one number. It's an
   HTML block, hidden until pan-live.js has a real count to put in it. */
.pan-room p.pan-room-stat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1.25rem;
	max-width: 30rem;
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--custom--depth--on-seal-edge);
}

.pan-room p.pan-room-stat[hidden] { display: none; }

.pan-room-stat b {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: clamp(3.75rem, 7vw, 5.25rem);
	font-weight: 400;
	line-height: 0.9;
	color: var(--wp--preset--color--brass);
	font-variant-numeric: tabular-nums;
}

.pan-room-stat span { font-size: var(--wp--preset--font-size--body); line-height: 1.5; color: var(--wp--preset--color--seal-label); }

/* The readout is a lit glass panel on the navy, with a live marker. */
.pan-readout-panel {
	padding: 1.1rem clamp(1.1rem, 3vw, 1.75rem) 0.6rem;
	background: var(--wp--custom--depth--on-seal-fill);
	border: 1px solid var(--wp--custom--depth--on-seal-edge);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--depth--on-seal-lift);
}

.pan-readout-panel > * { margin: 0; }

.pan-room p.pan-readout-live {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-bottom: 0.8rem;
	font-size: var(--wp--custom--eyebrow--size);
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
}

.pan-readout-live::before {
	content: "";
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--wp--preset--color--seal-bright);
	box-shadow: 0 0 0 4px rgba(7, 168, 173, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
	.pan-readout-live::before { animation: pan-live 2.4s ease-in-out infinite; }
}

@keyframes pan-live { 50% { box-shadow: 0 0 0 7px rgba(7, 168, 173, 0.08); } }

.pan-readout {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	border-top: 1px solid rgba(244, 236, 216, 0.2);
}

.pan-readout > div:last-child { border-bottom: 0; }

/* A receipt, not a table: label, dotted leader, value. */
.pan-readout > div {
	display: grid;
	grid-template-columns: auto minmax(1.5rem, 1fr) auto;
	align-items: baseline;
	column-gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(244, 236, 216, 0.12);
}

.pan-readout > div::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	border-bottom: 1px dotted rgba(188, 211, 232, 0.4);
	transform: translateY(-0.3em);
}

.pan-readout dt { grid-column: 1; grid-row: 1; color: var(--wp--preset--color--seal-label); }

.pan-readout dd {
	grid-column: 3;
	grid-row: 1;
	margin: 0;
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--bone);
}

.pan-room p.pan-readout-foot { margin-top: 1rem; font-size: var(--wp--preset--font-size--caption); }

/* ---------- Daylight: the three doors ---------------------------------- */

.pan-daylight { background-color: var(--wp--preset--color--bone); }
.pan-daylight h2 { text-wrap: balance; }

.pan-doors {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: 2.25rem;
}

/* Three across or one — never two with the third left alone on a row. */
@media (min-width: 900px) {
	.pan-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pan-doors > *,
.pan-door > * { margin-block: 0; }

.pan-door {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	overflow: hidden;
	padding: 1.9rem 1.75rem 1.6rem;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--depth--elev-1);
	transition:
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard),
		box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

/* Seal DNA's premium edge: a 2px brass top rule, drawn in when a door is chosen. */
.pan-door::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--wp--preset--color--brass);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-decel);
}

.pan-door:is(:hover, :focus-within)::before { transform: none; }

/* The icon sits in a roundel with a brass hairline, echoing the seal. */
.wp-block-image.pan-door-icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 0 0.35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--seal-soft);
	box-shadow: inset 0 0 0 1px rgba(194, 161, 77, 0.55);
}

.wp-block-image.pan-door-icon img { width: 1.75rem; height: 1.75rem; }

.pan-door h3 { font-size: 1.625rem; }
.pan-door p { color: var(--wp--preset--color--ink-2); }
.pan-door p.pan-helps { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-3); }
.pan-door p.pan-door-link { display: flex; align-items: center; gap: 0.45rem; margin-top: auto; padding-top: 0.9rem; font-weight: 600; }
.pan-door p.pan-door-link a { color: var(--wp--preset--color--seal-mid); text-decoration: none; }

.pan-door p.pan-door-link::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: var(--wp--preset--color--seal-mid);
	-webkit-mask: var(--pan-icon-arrow) center / contain no-repeat;
	mask: var(--pan-icon-arrow) center / contain no-repeat;
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.pan-door:hover p.pan-door-link::after { transform: translateX(3px); }

/* The whole door is the link, so lifting it on hover tells the truth. */
.pan-door p.pan-door-link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pan-door:focus-within { box-shadow: 0 0 0 2px var(--wp--preset--color--seal-bright), var(--wp--custom--depth--elev-2); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pan-door:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--depth--elev-3); }
}

/* Something's gone wrong: a night scene of its own, lit from the corner, so it reads as
   different at a glance. */
.pan-door.pan-door-urgent {
	background:
		radial-gradient(ellipse 80% 70% at 100% 0%, rgba(7, 168, 173, 0.3), rgba(12, 91, 158, 0.16) 45%, transparent 75%),
		var(--wp--preset--color--night);
	border-color: var(--wp--preset--color--night);
	box-shadow: var(--wp--custom--depth--elev-2);
}

.pan-door-urgent .wp-block-image.pan-door-icon { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(194, 161, 77, 0.7); }
.pan-door-urgent h3 { color: var(--wp--preset--color--bone); }
.pan-door-urgent p,
.pan-door.pan-door-urgent p.pan-helps { color: var(--wp--preset--color--seal-label); }
.pan-door.pan-door-urgent p.pan-door-link a { color: var(--wp--preset--color--bone); }
.pan-door.pan-door-urgent p.pan-door-link::after { background: var(--wp--preset--color--brass); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pan-door.pan-door-urgent:hover { box-shadow: var(--wp--custom--depth--glow-brass), var(--wp--custom--depth--elev-3); }
}

/* ---------- Closing scene: the real enquiry form on a bone sheet ------- */

.pan-close { text-align: center; }
.pan-close h2 { max-width: 18ch; text-wrap: balance; }
.pan-close .pan-lead { max-width: 30rem; }

.pan-close .fluentform {
	max-width: 36rem;
	margin-top: 2.25rem;
	padding: clamp(1.25rem, 4vw, 2rem);
	text-align: left;
	background-color: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 18px 50px rgba(3, 10, 40, 0.35);
}

/* ---------- Fluent Forms, everywhere a form appears --------------------
   Its stylesheet loads after this one, so these rules either set its own
   variables (inherited, so order doesn't matter) or out-specify it. */

.fluentform {
	--fluentform-primary: var(--wp--preset--color--seal-mid);
	--fluentform-secondary: var(--wp--preset--color--ink);
	--fluentform-danger: var(--wp--custom--danger);
	--fluentform-border-color: var(--wp--custom--field-border);
	--fluentform-border-radius: var(--wp--custom--radius--md);
}

.fluentform.ff-default .ff-el-form-control {
	font-family: inherit;
	font-size: 1rem;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.fluentform.ff-default .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--seal-mid);
	box-shadow: 0 0 0 3px rgba(7, 168, 173, 0.35);
}

.fluentform.ff-default .ff-el-input--label label { font-weight: 600; color: var(--wp--preset--color--headline); }

/* Native ticks and radios at a size a thumb can find; a long label wraps beside its
   box, not back under it (seen at 390px on "Secure devices, accounts & migrations"). */
.fluentform.ff-default .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.fluentform.ff-default .ff-el-form-check-input {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.2em 0 0;
	accent-color: var(--wp--preset--color--seal-mid);
}

/* Choices as a row of chips: each option is a pill, the ticked ones filled. The native radio or
   checkbox stays visible inside its pill, so it still reads as a form control. */
.fluentform .ff-el-input--content:has(> .ff-el-form-check-inline) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.fluentform.ff-default .ff-el-form-check-inline { display: block; margin: 0; }

.fluentform.ff-default .ff-el-form-check-inline label.ff-el-form-check-label {
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.45rem 0.8rem;
	font-size: 0.9375rem;
	line-height: 1.3;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard), border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

.fluentform.ff-default .ff-el-form-check-inline label.ff-el-form-check-label:hover { border-color: var(--wp--preset--color--seal-mid); }
.fluentform.ff-default .ff-el-form-check-inline label.ff-el-form-check-label:has(input:checked) { background: var(--wp--preset--color--seal-soft); border-color: var(--wp--preset--color--seal-mid); }
.fluentform.ff-default .ff-el-form-check-inline .ff-el-form-check-input { width: 1rem; height: 1rem; margin: 0; }

.fluentform.ff-default .ff-btn-submit { padding: 0.8rem 1.6rem; font-size: 1rem; font-weight: 600; border-radius: var(--wp--custom--radius--md); }
.fluentform p.pan-form-note { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-3); }

/* ---------- Footer: the request receipt -------------------------------- */

.ct-footer-copyright .pan-receipt { display: block; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }

/* ---------- Motion for the mix — the still frame is the design ---------- */

@keyframes pan-breathe { to { transform: translateX(-3%) scale(1.05); } }
@keyframes pan-drift { to { transform: translate(45px, -27px); } }
@keyframes pan-close-ring { from { stroke-dashoffset: 110; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: no-preference) {
	.pan-scene::before { animation: pan-breathe 16s ease-in-out infinite alternate; }
	.pan-scene::after { animation: pan-drift 40s ease-in-out infinite alternate; }
	.pan-seal-ring { animation: pan-close-ring 2.4s var(--wp--custom--motion--ease-decel) 200ms both; }
}