/* Cogenture — component styles ported from the approved design canvas.
   Tokens live in theme.json; this file is the component layer only. */

:root {
	--cog-ease: cubic-bezier(.2, .6, .3, 1);
}

/* ───────────────────────────── buttons ───────────────────────────── */

.cog-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	padding: 14px 26px;
	text-decoration: none;
	transition: transform .18s var(--cog-ease), box-shadow .18s var(--cog-ease);
}

.cog-btn:hover { transform: translateY(-1px); text-decoration: none; }

.cog-btn--primary {
	background: var(--wp--preset--gradient--button);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--button);
}

.cog-btn--secondary {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
}

.cog-btn--login {
	background: transparent;
	color: var(--wp--preset--color--on-dark-high);
	border: 1px solid rgba(255, 255, 255, .24);
	font-size: 13.5px;
	padding: 10px 18px;
}

/* On a dark section the secondary button inverts. */
.cog-section--dark .cog-btn--secondary {
	color: var(--wp--preset--color--on-dark-high);
	border-color: rgba(255, 255, 255, .24);
}

/* ───────────────────────────── type helpers ───────────────────────────── */

.cog-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}

.cog-section--dark .cog-eyebrow { color: #6F86A0; }

.cog-lede {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.65;
	color: var(--wp--preset--color--body);
}

.cog-section--dark .cog-lede { color: var(--wp--preset--color--on-dark); }

/* ───────────────────────────── sections ───────────────────────────── */

.cog-section { padding-block: var(--wp--preset--spacing--60); }
.cog-section--tint { background: var(--wp--preset--color--tint); border-block: 1px solid #E7EEF6; }
.cog-section--dark { background: var(--wp--preset--gradient--hero); color: var(--wp--preset--color--on-dark); }
.cog-section--dark :is(h1, h2, h3) { color: var(--wp--preset--color--white); }

/* ───────────────────────────── cards ───────────────────────────── */

.cog-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--gradient--card);
	padding: 28px;
}

.cog-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--wp--preset--color--tint-strong);
	border: 1px solid #DCE8F5;
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}

/* ───────────────────────────── header ───────────────────────────── */

.cog-header {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 28px;
	padding-block: 26px;
}

.cog-header__logo img { height: 40px; width: auto; display: block; }
.cog-header__spacer { flex: 1 1 0; }

.cog-header__nav {
	display: flex;
	gap: 34px;
	font-size: 14px;
	font-weight: 500;
	flex-shrink: 0;
}

.cog-header__nav a { color: var(--wp--preset--color--on-dark); text-decoration: none; }
.cog-header__nav a:hover { color: #fff; }
.cog-header__nav .current-menu-item a {
	color: #fff;
	border-bottom: 2px solid var(--wp--preset--color--blue);
	padding-bottom: 3px;
}

.cog-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

@media (max-width: 1100px) {
	.cog-header { flex-wrap: wrap; gap: 16px; }
	.cog-header__spacer { display: none; }
	.cog-header__nav { order: 3; width: 100%; gap: 22px; flex-wrap: wrap; }
	.cog-header__actions { margin-left: auto; }
}

/* ───────────────────────────── footer ───────────────────────────── */

.cog-footer { background: var(--wp--preset--color--ink-deep); color: var(--wp--preset--color--on-dark); }

.cog-footer__top {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr;
	gap: 64px;
	align-items: start;
	padding: 60px 0 44px;
}

.cog-footer__logo img { height: 104px; width: auto; display: block; margin-left: -12px; }

.cog-footer__links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	padding-top: 34px;
	border-top: 1px solid rgba(255, 255, 255, .10);
}

/* The certification block, at the artboard's scale: the marks are set in the
   display face, which carries its own tracking. */
.cog-cert {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(14 * var(--u, 1px)) calc(20 * var(--u, 1px));
	margin-top: calc(18 * var(--u, 1px));
	max-width: calc(200 * var(--u, 1px));
}
.cog-cert__mark {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: -.03em;
	font-size: calc(17 * var(--ut, 1px));
	font-weight: 600;
	color: #8AA0B8;
}

@media (max-width: 900px) {
	.cog-footer__top { grid-template-columns: 1fr; gap: 40px; }
	.cog-footer__links { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* ───────────────────────────── spec table ───────────────────────────── */

.cog-spec { width: 100%; border-collapse: collapse; }
.cog-spec th,
.cog-spec td { text-align: left; font-size: 13.5px; padding: 13px 0; border-bottom: 1px solid var(--wp--preset--color--line-soft); vertical-align: top; }
.cog-spec th { width: 42%; font-weight: 400; color: var(--wp--preset--color--muted); }
.cog-spec td { color: #10284A; }

/* ───────────────────────────── motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cog-btn { transition: none; }
}

/* ═══════════════════════ ported design sections ═══════════════════════
   The artboards are drawn at 1440px. A ported section is wrapped in
   .cog-stage, which establishes a container and defines --u as one design
   pixel. Every length inside the section is expressed in --u, so the section
   is identical to the artboard at 1440 and scales proportionally below it. */

.cog-stage {
	container-type: inline-size;
	/* 1 design px = 1/1440 of the container, and never more than 1px: the
	   artboard scales down on narrow screens and stops at its drawn size on
	   wide ones, so a 24" monitor gets more page, not bigger type. */
	--u: min(1px, (100cqw / 1440));
	--ut: var(--u);             /* body-type unit — floored at narrow widths */
	--ud: var(--u);             /* display-type unit — floored more gently */
	width: 100%;
	margin-inline: auto;
	position: relative;
}

/* ── full-bleed sections, contained content ──────────────────────────
   The stage spans the window so every section's background, panel and rule
   runs edge to edge. Inside it the ported 1440 canvas is released to the
   full width as well, which leaves the artboard's own 1280 wrappers — they
   already centre themselves — as the content container: 1280px on a wide
   screen, proportional below 1440. Only the hero keeps a fixed 1440 box,
   because its leader lines and callouts are drawn on those coordinates. */
.cog-stage [style*="width: calc(1440"],
.cog-stage [style*="width:calc(1440"] { width: 100% !important; }

.cog-stage--hero .cog-hero-stage {
	width: calc(1440 * var(--u));
	margin-inline: auto;
}

/* Below the artboard width the whole section scales, so nothing reflows out
   of position. Under 700px the absolute layout stops being readable, and the
   section switches to the stacked treatment defined per-section. */


/* ── hero motion, exactly as drawn ── */
@keyframes cog-ring-pulse {
	0%   { transform: scale(0.62); opacity: 0.5; }
	100% { transform: scale(1.55); opacity: 0; }
}
/* The float has two forms. On the home hero the render is positioned at
   left:50% and carries its own centring, so its drift has to preserve the
   -50%; everywhere else the render is centred by its flex parent and the
   drift is purely vertical. Using one keyframe for both threw the section
   heroes 180px to the left of their rings. */
@keyframes cog-drift {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(calc(-8 * var(--u))); }
}
@keyframes cog-drift-centred {
	0%, 100% { transform: translate(calc(-50% - 6 * var(--u)), 0); }
	50%      { transform: translate(calc(-50% - 6 * var(--u)), calc(-9 * var(--u))); }
}
@keyframes cog-blip {
	0%, 100% { opacity: 0.3; }
	50%      { opacity: 1; }
}

/* The ring and halo are drawn at a different size on each artboard — 470 on
   the home hero, 400 on Cx-Log1.1, 380 elsewhere — so the stage carries its
   own values and these are the home page's. */
.cog-stage {
	--ring: 470;
	--ring-top: calc(258 * var(--u));
	--ring-alpha: 0.55;
}

.cog-stage .ring,
.cog-stage .halo {
	position: absolute;
	left: 50%;
	top: var(--ring-top);
	width: calc(var(--ring) * var(--u));
	height: calc(var(--ring) * var(--u));
	margin-left: calc(var(--ring) * var(--u) / -2);
	margin-top: calc(var(--ring) * var(--u) / -2);
	border-radius: 50%;
}

.cog-stage .ring {
	border: 1px solid rgba(22, 196, 193, var(--ring-alpha));
	animation: cog-ring-pulse 5s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.cog-stage .halo {
	border: 1px solid rgba(22, 196, 193, 0.16);
	background: radial-gradient(closest-side, rgba(22, 196, 193, 0.07), transparent 72%);
}

.cog-stage .float { animation: cog-drift 8s ease-in-out infinite; }
.cog-stage .float[style*="position: absolute"],
.cog-stage .float[style*="position:absolute"] { animation-name: cog-drift-centred; }
.cog-stage .pulse { animation: cog-blip 2.4s ease-in-out infinite; }
.cog-stage .lead  { stroke: rgba(150, 180, 214, 0.38); stroke-width: 1; }

.cog-stage .mono { font-family: var(--wp--preset--font-family--mono); }
.cog-stage .disp { font-family: var(--wp--preset--font-family--display); letter-spacing: -0.03em; }
.cog-stage .card { border: 1px solid #E4EDF7; border-radius: calc(16 * var(--u)); background: linear-gradient(180deg, #FBFDFF, #fff); }

/* The ported markup carries its own type and colour; stop the block theme's
   element styles from overriding it. */
/* The block theme must not restyle ported markup: the artboard's own classes
   below carry the type. Only the browser/theme defaults are neutralised. */
.cog-stage :is(h1, h2, h3, h4) { margin: 0; }
.cog-stage p { margin: 0; }

/* ── the artboard's utility classes, at design scale ── */
.cog-stage .eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: calc(11 * var(--ut));
	letter-spacing: .22em;
	color: #8CA0B8;
	text-transform: none;
}
.cog-stage .h2 {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: -.03em;
	font-size: calc(42 * var(--ud));
	font-weight: 600;
	color: #092747;
	line-height: 1.1;
	margin: calc(14 * var(--u)) 0 0;
}
.cog-stage .lede {
	font-size: calc(17 * var(--ut));
	line-height: 1.65;
	color: #45607F;
}
.cog-stage .ph { color: #C0392B; }
.cog-stage .k {
	font-size: calc(13.5 * var(--ut)); color: #5F7188;
	padding: calc(13 * var(--u)) 0; border-bottom: 1px solid #EDF3F9;
	width: 42%; vertical-align: top;
}
.cog-stage .v {
	font-size: calc(13.5 * var(--ut)); color: #10284A;
	padding: calc(13 * var(--u)) 0; border-bottom: 1px solid #EDF3F9; vertical-align: top;
}
/* Cx-Log1.1 draws its specification table with a narrower key column. */
.cog-stage--k40 .k { width: 40%; }
.cog-stage img { display: block; }

/* The artboard inherits the browser's default line-height; the block theme
   sets 1.65 globally, which stretched every ported block that does not state
   its own. Reset it here so inheritance matches the artboard exactly. */
/* The artboard inherits the browser defaults: 16px and normal line-height.
   The block theme sets 14.5px / 1.65 on body, which every ported element
   without its own font-size was picking up. Restore the artboard's base. */
.cog-stage { line-height: normal; font-size: calc(16 * var(--ut)); }
.cog-stage .lede { line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
	.cog-stage .ring,
	.cog-stage .float,
	.cog-stage .pulse { animation: none; }
}

/* ── phone: the 1440 stage becomes unreadable, so stack it ── */


/* Hero buttons — the design's exact treatment, with the labels and links
   still coming from Cogenture settings. */
.cog-stage .cog-hero-btn {
	display: inline-block;
	font-size: calc(15 * var(--ut));
	font-weight: 600;
	border-radius: calc(999 * var(--u));
	text-decoration: none;
	line-height: 1.2;
	transition: transform .18s var(--cog-ease);
}
.cog-stage .cog-hero-btn:hover { transform: translateY(calc(-1 * var(--u))); text-decoration: none; }

.cog-stage .cog-hero-btn--primary {
	background: linear-gradient(180deg, #1689C9, #0C6496);
	color: #fff;
	padding: calc(15 * var(--u)) calc(30 * var(--u));
	box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(12, 100, 150, 0.4);
}

.cog-stage .cog-hero-btn--secondary {
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #E7EEF7;
	padding: calc(14 * var(--u)) calc(28 * var(--u));
}

/* A full-bleed section: the block theme's root padding is suppressed so a
   ported 1440 artboard renders at its drawn width. */
.cog-bleed { padding-inline: 0 !important; }
.cog-bleed > .wp-block-group__inner-container { max-width: none; padding-inline: 0; }

/* ── ported footer ── */
.cog-footer-wrap { background: #092747; }
.cog-stage--footer { background: #092747; overflow: hidden; }
.cog-stage--footer a:hover { color: #fff !important; }



/* ── header: the nav sits on the same dark panel as the hero, with no seam ── */
.wp-site-blocks > * + * { margin-block-start: 0; }
.cog-header-wrap { background: #04101F; }
.cog-header__logo img,
.wp-block-site-logo img {
	height: 40px;
	width: 211px;            /* the horizontal lockup is 2653 x 503 */
	max-width: none;
	display: block;
}

/* ── ported navigation ── */
.cog-stage--nav { position: relative; z-index: 5; }
.cog-stage--nav a { transition: color .15s ease; }
.cog-stage--nav a:hover { color: #fff; }



/* The dark panel runs from the top of the navigation to the foot of the hero,
   with the design's glow and grid behind both. */
.cog-header-wrap,
.cog-section--dark.cog-bleed { background: #04101F; }
.cog-stage--hero { overflow: visible; }

/* The backdrop layers are decorative and must never sit above the content. */
.cog-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cog-stage--hero > *:not(.cog-deco) { position: relative; z-index: 1; }

/* ── ported closing CTA: same dark panel as the footer, with its glow ── */
.cog-cta-wrap { background: #092747; }
.cog-stage--cta { background: #092747; overflow: hidden; }
.cog-stage--cta a:hover { opacity: .92; }



/* ── ported page body ── */
.cog-hero-wrap { background: #04101F; }
.cog-stage--body { background: #FFFFFF; }
.cog-stage--body a:hover { opacity: .9; }

/* Ported sections own their own layout; the block theme must not re-space them. */
.cog-bleed > .wp-block-group__inner-container > .wp-block-html,
.cog-bleed > .wp-block-html { margin: 0; }
.cog-stage > *:first-child { margin-top: 0; }



/* ── artboard animations, under the names the ported markup calls for ──
   The hero rings use the class-scoped versions above; these are the inline
   ones: the travelling packets and the sweeping dash on the signal path in
   "Sense. Connect. Analyse. Decide.", and the alias names the artboard uses. */
@keyframes packet {
	0%   { offset-distance: 0%;   opacity: 0; }
	8%   { opacity: 1; }
	92%  { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}
@keyframes sweep { to { stroke-dashoffset: -300; } }
@keyframes ring  { 0% { transform: scale(0.62); opacity: .5; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes blip  { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ── full-width diagram SVGs scale with the stage ──
   They carry the artboard's pixel dimensions as attributes, which would
   otherwise hold them at 1440 while everything around them scales — that is
   what pulled the hero's leader lines away from their callouts below 1440.
   Icons (18, 26, 15) keep their intrinsic size, scaled by --u inline. */
.cog-stage svg[width="1440"],
.cog-stage svg[width="1280"],
.cog-stage svg[width="640"] {
	width: 100%;
	height: auto;
	display: block;
}
.cog-stage svg[width="1440"] { height: 100%; }

/* ═══════════════════════ responsive behaviour ═══════════════════════
   The stage is the 1440 artboard scaled to its container, so geometry never
   needs a breakpoint: --u stays a pure fraction of the container width and
   nothing can overflow it. What does not survive pure scaling is type — at
   1024 a 16px line would render at 11px — so a second unit, --ut, carries a
   floor. Layout rules below only handle the places where the artboard's
   arrangement stops working: absolute coordinate systems and wide grids. */

/* ── type floors (geometry is untouched) ── */
@media (max-width: 1280px) { .cog-stage { --ut: min(1px, max((100cqw / 1440), 0.82px)); --ud: min(1px, max((100cqw / 1440), 0.80px)); } }
@media (max-width: 1024px) { .cog-stage { --ut: min(1px, max((100cqw / 1440), 0.85px)); --ud: min(1px, max((100cqw / 1440), 0.70px)); } }
/* Below 900 the layout is stacked and fluid, so the page unit can take a
   floor too — otherwise every box, icon tile and gap would keep shrinking
   while the type stayed put. The 1440 canvas is freed at the same time so
   the floored unit cannot push the page wider than the viewport. */
@media (max-width: 900px)  { .cog-stage { --u: min(1px, max((100cqw / 1440), 0.85px)); --ut: min(1px, max((100cqw / 1440), 0.90px)); --ud: min(1px, (100cqw / 1440));              } }
@media (max-width: 560px)  { .cog-stage { --u: 0.92px;                    --ut: 0.95px;                    --ud: min(1px, max((100cqw / 1440), 0.52px)); } }


/* Below 900 the artboard proportions are abandoned for a stacked layout, so
   spacing has to come off the type unit rather than the shrinking page unit. */
@media (max-width: 900px) {
	.cog-stage [style*="max-width: calc(1280"],
	.cog-stage [style*="max-width:calc(1280"],
	.cog-stage [style*="max-width: calc(1020"],
	.cog-stage [style*="max-width:calc(1020"] {
		max-width: 100% !important;
		padding-inline: calc(24 * var(--ut)) !important;
		box-sizing: border-box;
	}
	.cog-stage [style*="padding: calc(96"],
	.cog-stage [style*="padding:calc(96"] { padding-block: calc(56 * var(--ut)) !important; }
	.cog-stage [style*="padding: calc(100"] { padding-block: calc(56 * var(--ut)) calc(16 * var(--ut)) !important; }
}

/* ── grids ── */
/* Figure rows (four headline numbers). On the artboard each cell's padding is
   tuned to its position in a row of four, so the generic 2-up / 1-up rules
   leave them ragged. Below 1024 they become an even 2 x 2 at every width. */
@container (max-width: 1024px) {
	.cog-stage div.cog-figures { grid-template-columns: repeat(2, 1fr) !important; }
	.cog-stage div.cog-figures > div {
		padding: calc(20 * var(--ut)) calc(12 * var(--ut)) calc(20 * var(--ut)) calc(20 * var(--ut)) !important;
		border-right: 0 !important;
		min-width: 0;
	}
	.cog-stage div.cog-figures > div:nth-child(odd) { padding-left: 0 !important; }
	.cog-stage div.cog-figures--rules > div:nth-child(odd) { border-right: 1px solid #E4EDF7 !important; }
	.cog-stage div.cog-figures--rules > div:nth-child(-n+2) { border-bottom: 1px solid #E4EDF7; }
}
@container (max-width: 1024px) {
	.cog-stage [style*="repeat(4, 1fr)"],
	.cog-stage [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
	.cog-stage [style*="grid-template-columns: 0.84fr"] { grid-template-columns: 1fr !important; row-gap: calc(40 * var(--ut)) !important; }
}
@container (max-width: 768px) {
	.cog-stage [style*="repeat(3, 1fr)"],
	.cog-stage [style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
	.cog-stage [style*="1.25fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
	.cog-stage [style*="display: flex"][style*="gap: calc(60"] { flex-wrap: wrap !important; }
}
@container (max-width: 560px) {
	.cog-stage [style*="repeat(4, 1fr)"],
	.cog-stage [style*="repeat(4,1fr)"],
	.cog-stage [style*="repeat(2, 1fr)"],
	.cog-stage [style*="repeat(2,1fr)"],
	.cog-stage [style*="1.25fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
	.cog-stage--hero [style*="display: flex"],
	.cog-stage--hero [style*="display:flex"],
	.cog-stage--body [style*="display: flex"],
	.cog-stage--body [style*="display:flex"],
	.cog-stage--cta [style*="display: flex"],
	.cog-stage--cta [style*="display:flex"],
	.cog-stage--footer [style*="display: flex"],
	.cog-stage--footer [style*="display:flex"] { flex-wrap: wrap !important; }
}

/* ── hero: the absolute stage becomes a stack ── */
@container (max-width: 900px) {
	.cog-stage--hero .cog-hero-stage {
		width: 100% !important;
		height: auto !important;
		padding: 0 calc(24 * var(--ut)) calc(20 * var(--ut));
		box-sizing: border-box;
	}
	.cog-stage--hero .cog-hero-stage > svg,
	.cog-stage--hero .ring,
	.cog-stage--hero .halo { display: none; }
	.cog-stage--hero .cog-hero-stage > img {
		position: static !important;
		width: min(78%, calc(420 * var(--ut))) !important;
		margin: 0 auto;
		animation: none;
		transform: none !important;
	}
	.cog-stage--hero .cog-hero-callout {
		position: static !important;
		left: auto !important; top: auto !important;
		width: auto !important;
		max-width: min(calc(420 * var(--ut)), 100%);
		margin: calc(26 * var(--ut)) auto 0;
		text-align: center !important;
	}
	.cog-stage--hero .cog-hero-stage > .mono { display: none; }   /* the dimension marker */
}

/* ── section 01, the signal path: absolute coordinates become a grid ──
   The animated path is drawn between four points on a 1280 canvas; once the
   cards no longer sit on those points the drawing has nothing to connect, so
   it goes and the four steps stand on their own. */
@container (max-width: 900px) {
	.cog-stage--body [style*="height: calc(290"] {
		position: static !important;
		height: auto !important;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: calc(32 * var(--ut));
		margin-top: calc(36 * var(--ut)) !important;
	}
	.cog-stage--body [style*="height: calc(290"] > svg { display: none; }
	.cog-stage--body [style*="height: calc(290"] > div {
		position: static !important;
		left: auto !important; top: auto !important;
		width: auto !important;
	}
}
@container (max-width: 560px) {
	.cog-stage--body [style*="height: calc(290"] { grid-template-columns: 1fr; }
}

/* ── navigation ── */
@container (max-width: 1024px) {
	.cog-stage--nav > div { flex-wrap: wrap !important; row-gap: calc(16 * var(--ut)) !important; }
	.cog-stage--nav > div > div[style*="flex: 1 1 0"],
	.cog-stage--nav > div > div[style*="flex:1 1 0"] { display: none !important; }
	.cog-stage--nav > div > div[style*="gap: calc(34"],
	.cog-stage--nav > div > div[style*="gap:calc(34"] {
		order: 3; width: 100%; justify-content: center;
		flex-wrap: wrap !important; flex-shrink: 1 !important;
		column-gap: calc(22 * var(--ut)) !important; row-gap: calc(10 * var(--ut)) !important;
	}
}
/* (the phone bar is laid out by the mobile-navigation rules below: logo,
   one call to action, menu button — all on a single line) */

/* ── footer ──
   Four link columns and the address block. 1024: the address takes a row of
   its own and the links go two-up. 768: two columns of links stay, stacked
   under each other. 560: everything in one column, legal row unwrapped. */
@container (max-width: 1024px) {
	.cog-stage--footer [style*="1.25fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; row-gap: calc(40 * var(--ut)) !important; }
	.cog-stage--footer [style*="repeat(4,1fr)"],
	.cog-stage--footer [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; row-gap: calc(32 * var(--ut)) !important; }
}
@container (max-width: 768px) {
	.cog-stage--footer [style*="1.25fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
/* Touch sizes: the link lists trade their 10-unit gap for padding on each
   link, so every footer link is a ~28px target rather than a 16px one. */
@container (max-width: 900px) {
	.cog-stage--footer [style*="flex-direction:column"][style*="gap:calc(10"] { gap: 0 !important; }
	.cog-stage--footer [style*="flex-direction:column"][style*="gap:calc(10"] > a { padding-block: 6px; }
}
@container (max-width: 560px) {
	.cog-stage--footer [style*="1.25fr 1fr 1fr"],
	.cog-stage--footer [style*="repeat(4,1fr)"],
	.cog-stage--footer [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
	.cog-stage--footer img { margin-left: 0 !important; height: calc(84 * var(--ut)) !important; }
	.cog-stage--footer [style*="align-items:center"][style*="gap:calc(26"] { flex-direction: column; align-items: flex-start !important; row-gap: calc(12 * var(--ut)); }
	.cog-stage--footer [style*="flex-grow:1"] { display: none !important; }
}
@media (max-width: 900px) {
	.cog-stage--footer [style*="width:calc(1280"],
	.cog-stage--footer [style*="width: calc(1280"],
	.cog-stage--nav [style*="width:calc(1280"],
	.cog-stage--nav [style*="width: calc(1280"] {
		width: 100% !important;
		max-width: 100% !important;
		padding-inline: calc(24 * var(--ut)) !important;
		box-sizing: border-box;
	}
}

/* ── closing CTA ── */
@container (max-width: 768px) {
	.cog-stage--cta [style*="display: flex"] { flex-wrap: wrap !important; row-gap: calc(28 * var(--ut)) !important; }
	.cog-stage--cta [style*="flex-grow: 1"] { display: none !important; }
}

/* ═══════════════════════ mobile navigation ═══════════════════════
   Below 900 the six links collapse behind a menu button. Both calls to
   action stay on the bar — signing in and talking to someone are the two
   things a phone visitor is most likely to want — and the login link is
   repeated inside the panel once the bar is too narrow to hold it.

   No script: a hidden checkbox holds the open state, so the menu works
   before any JavaScript loads and keeps working if none does. */

.cog-menu-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cog-burger,
.cog-menu-panel { display: none; }

@media (max-width: 900px) {
	/* the inline link row gives way to the button */
	.cog-stage--nav > div > div[style*="gap: calc(34"],
	.cog-stage--nav > div > div[style*="gap:calc(34"],
	.cog-stage--nav > div > div[style*="flex: 1 1 0"],
	.cog-stage--nav > div > div[style*="flex:1 1 0"] { display: none !important; }

	.cog-stage.cog-stage--nav > div {
		flex-wrap: nowrap !important;
		justify-content: space-between;
		gap: calc(12 * var(--ut)) !important;
		padding-inline: calc(24 * var(--ut));
		box-sizing: border-box;
	}

	.cog-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0 10px;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 0.24);
		border-radius: 12px;
		cursor: pointer;
		flex-shrink: 0;
	}
	.cog-burger span {
		display: block;
		height: 1.5px;
		background: #DCE7F3;
		border-radius: 2px;
		transition: transform .22s var(--cog-ease), opacity .18s linear;
	}
	.cog-burger:focus-visible { outline: 2px solid #1689C9; outline-offset: 2px; }

	.cog-menu-toggle:checked ~ div .cog-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
	.cog-menu-toggle:checked ~ div .cog-burger span:nth-child(2) { opacity: 0; }
	.cog-menu-toggle:checked ~ div .cog-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

	.cog-menu-panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .26s var(--cog-ease);
		position: relative;
		z-index: 5;
	}
	.cog-menu-toggle:checked ~ .cog-menu-panel { grid-template-rows: 1fr; }

	.cog-menu-panel > a {
		display: block;
		overflow: hidden;
		min-height: 0;
		font-size: calc(16 * var(--ut));
		font-weight: 500;
		color: #DCE7F3;
		text-decoration: none;
		padding: 0 calc(24 * var(--ut));
		line-height: 0;
		opacity: 0;
		/* the rule belongs to the open state: a border still takes height in a
		   collapsed row, which would leave a sliver of panel showing */
		border-top: 0 solid rgba(255, 255, 255, 0.08);
		transition: line-height .26s var(--cog-ease), padding .26s var(--cog-ease), opacity .2s linear;
	}
	.cog-menu-toggle:checked ~ .cog-menu-panel > a {
		line-height: calc(52 * var(--ut));
		border-top-width: 1px;
		opacity: 1;
	}
	.cog-menu-panel > a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
	.cog-menu-panel__login { color: #9FC3D6 !important; }
}

/* On a phone the bar carries the primary call to action only; the login
   link is in the panel, where it has room for a full-size tap target. */
@media (max-width: 560px) {
	.cog-stage--nav > div > div[style*="gap: calc(14"] > a:first-child,
	.cog-stage--nav > div > div[style*="gap:calc(14"] > a:first-child { display: none !important; }
	/* !important: the 900px rule for every max-width:1280 block sets 24 with !important */
	.cog-stage.cog-stage--nav > div { padding-inline: calc(18 * var(--ut)) !important; }
	/* the bar holds a logo, one call to action and the menu button; the pill
	   gives up its generous desktop padding so all three fit on one line */
	.cog-stage--nav img { height: calc(30 * var(--ut)) !important; }
	.cog-stage--nav > div > div[style*="gap: calc(14"] > a,
	.cog-stage--nav > div > div[style*="gap:calc(14"] > a {
		font-size: calc(13 * var(--ut)) !important;
		padding: calc(11 * var(--ut)) calc(16 * var(--ut)) !important;
		white-space: nowrap;
	}
}
@media (min-width: 561px) {
	.cog-menu-panel__login { display: none !important; }
}

/* ═════════════════ inner pages: the stacked layout ═════════════════
   The section pages are drawn on the same 1440 grid as the home page, so
   they need the same treatment below 900: two-column splits become one
   column, the hero's media well stops being a fixed-height box, and rows
   built out of fixed-width flex items are allowed to wrap. */

@container (max-width: 900px) {
	/* every two-track split the artboards use */
	.cog-stage--body [style*="grid-template-columns:1fr 1fr"],
	.cog-stage--body [style*="grid-template-columns: 1fr 1fr"],
	.cog-stage--body [style*="grid-template-columns:1fr 1.4fr"],
	.cog-stage--body [style*="grid-template-columns: 1fr 1.4fr"],
	.cog-stage--body [style*="grid-template-columns:1.15fr"],
	.cog-stage--body [style*="grid-template-columns:1.25fr 0.75fr"],
	.cog-stage--body [style*="grid-template-columns:0.8fr 1.2fr"],
	.cog-stage--body [style*="grid-template-columns:0.9fr 1.1fr"],
	.cog-stage--body [style*="grid-template-columns: 0.9fr 1.1fr"],
	.cog-stage--hero [style*="grid-template-columns:1fr 1fr"],
	.cog-stage--hero [style*="grid-template-columns: 1fr 1fr"] {
		grid-template-columns: 1fr !important;
		row-gap: calc(40 * var(--ut)) !important;
	}

	.cog-stage--body [style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

	/* the hero's media well, and the framed figures in the body */
	.cog-stage--hero [style*="height: calc(460"],
	.cog-stage--hero [style*="height:calc(460"],
	.cog-stage--hero [style*="height: calc(500"],
	.cog-stage--hero [style*="height:calc(500"],
	.cog-stage--hero [style*="height: calc(440"],
	.cog-stage--hero [style*="height:calc(440"],
	.cog-stage--body [style*="height:calc(440"],
	.cog-stage--body [style*="height:calc(400"],
	.cog-stage--body [style*="height:calc(360"],
	.cog-stage--body [style*="height:calc(320"],
	.cog-stage--body [style*="height:calc(300"] {
		height: auto !important;
		min-height: calc(220 * var(--ut));
		padding-block: calc(24 * var(--ut));
	}

	/* rows of fixed-width cards wrap instead of running off the page */
	.cog-stage--body [style*="display:flex"]:not([style*="flex-direction"]),
	.cog-stage--body [style*="display: flex"]:not([style*="flex-direction"]),
	.cog-stage--cta [style*="display:flex"]:not([style*="flex-direction"]) {
		flex-wrap: wrap !important;
	}
	.cog-stage--body [style*="flex-shrink:0"] { flex-shrink: 1 !important; max-width: 100%; }
}

@container (max-width: 900px) {
	/* Grid items default to min-width:auto, so a fixed-width render inside
	   one keeps the whole column wider than the page. */
	.cog-stage [style*="grid-template-columns"] > * { min-width: 0; }
	.cog-stage--hero img,
	.cog-stage--body img { max-width: 100% !important; height: auto !important; }
}

/* Small phones: the bar tightens rather than wraps — the logo, one call to
   action and the menu button stay on one line down to 320. */
@media (max-width: 440px) {
	.cog-stage.cog-stage--nav > div {
		padding-inline: calc(14 * var(--ut)) !important;
		gap: calc(8 * var(--ut)) !important;
	}
	.cog-stage--nav img { height: calc(26 * var(--ut)) !important; }
	.cog-stage--nav > div > div[style*="gap: calc(14"],
	.cog-stage--nav > div > div[style*="gap:calc(14"] { gap: calc(8 * var(--ut)) !important; }
	.cog-stage--nav > div > div[style*="gap: calc(14"] > a,
	.cog-stage--nav > div > div[style*="gap:calc(14"] > a {
		font-size: calc(12 * var(--ut)) !important;
		padding: calc(10 * var(--ut)) calc(13 * var(--ut)) !important;
	}
	.cog-burger { width: 40px; padding-inline: 9px; }
}
/* 320-class phones: the three still need ~20px more, so the lockup gives it. */
@media (max-width: 359px) {
	.cog-stage--nav img { height: calc(22 * var(--ut)) !important; }
	.cog-stage.cog-stage--nav > div { padding-inline: calc(12 * var(--ut)) !important; }
}

/* Panels butt against each other. The block editor's default gap would
   otherwise open 24px of page background between the hero, the body and the
   closing call to action — a seam the artboards do not have. */
.cog-bleed + .cog-bleed,
.wp-block-post-content > .cog-bleed { margin-block-start: 0 !important; }
.wp-block-post-content > .cog-bleed:first-child { margin-block-start: 0 !important; }

/* ═══════════════════════ navigation dropdowns ═══════════════════════
   The six top-level links keep the artboard's row exactly — each is wrapped
   in a flex item of its own size, so nothing moves. A section with children
   reveals them on hover or keyboard focus; no script, and the panel is taken
   out of flow so it cannot affect the bar's height. */

.cog-nav-item { position: relative; display: flex; align-items: center; }
.cog-nav-item > a { color: inherit; text-decoration: none; }
.cog-nav-item--has-menu > a::after {
	content: "";
	display: inline-block;
	width: calc(5 * var(--ut));
	height: calc(5 * var(--ut));
	margin-left: calc(7 * var(--ut));
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(calc(-1 * var(--ut))) rotate(45deg);
	opacity: .65;
	transition: transform .18s var(--cog-ease), opacity .18s linear;
}
.cog-nav-item--has-menu:hover > a::after,
.cog-nav-item--has-menu:focus-within > a::after { opacity: 1; }

.cog-nav-drop {
	position: absolute;
	top: 100%;
	left: calc(-14 * var(--ut));
	z-index: 40;
	min-width: calc(224 * var(--ut));
	padding: calc(8 * var(--ut)) 0;
	margin-top: calc(14 * var(--ut));
	background: #0A1B30;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: calc(12 * var(--ut));
	box-shadow: 0 calc(22 * var(--ut)) calc(48 * var(--ut)) rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(-6 * var(--ut)));
	transition: opacity .16s linear, transform .18s var(--cog-ease), visibility .16s;
}
/* a hover bridge across the gap, so the pointer can reach the panel */
.cog-nav-item--has-menu::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0; right: 0;
	height: calc(16 * var(--ut));
}
.cog-nav-item--has-menu:hover .cog-nav-drop,
.cog-nav-item--has-menu:focus-within .cog-nav-drop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.cog-nav-drop a {
	display: block;
	padding: calc(9 * var(--ut)) calc(16 * var(--ut));
	font-size: calc(13.5 * var(--ut));
	font-weight: 500;
	line-height: 1.35;
	color: #A9C0D6;
	text-decoration: none;
	white-space: nowrap;
}
.cog-nav-drop a:hover,
.cog-nav-drop a:focus-visible { color: #fff; background: rgba(255, 255, 255, .06); }

/* the last two sections open to the left so the panel stays on the page */
.cog-nav-item--has-menu:nth-last-child(-n+2) .cog-nav-drop { left: auto; right: calc(-14 * var(--ut)); }

/* below 900 the bar is a menu button, so the hover panels play no part */
@media (max-width: 900px) { .cog-nav-drop { display: none; } }

/* ═══════════════════════ the enquiry form ═══════════════════════
   The design draws this as empty boxes; these are the same boxes, working.
   Every value below is the artboard's: 46 high, 1px #D9E4F0, 9 radius, a
   10px mono label 8 above, two columns with a 20 gutter. */

.cog-form { font-family: var(--wp--preset--font-family--body); }

.cog-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(20 * var(--u, 1px));
}
.cog-form__field--wide { grid-column: span 2; }

.cog-form__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: calc(10 * var(--ut, 1px));
	letter-spacing: .14em;
	color: #8CA0B8;
}
.cog-form__field.is-error .cog-form__label { color: #C0392B; }

.cog-form__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: calc(46 * var(--u, 1px));
	margin-top: calc(8 * var(--u, 1px));
	padding: 0 calc(14 * var(--u, 1px));
	border: 1px solid #D9E4F0;
	border-radius: calc(9 * var(--u, 1px));
	background: #fff;
	font-family: inherit;
	font-size: calc(14 * var(--ut, 1px));
	color: #10284A;
	transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.cog-form__input {
	height: calc(130 * var(--u, 1px));
	padding: calc(12 * var(--u, 1px)) calc(14 * var(--u, 1px));
	line-height: 1.6;
	resize: vertical;
}
select.cog-form__input {
	appearance: none;
	padding-right: calc(38 * var(--u, 1px));
	background-image: linear-gradient(45deg, transparent 50%, #8CA0B8 50%),
	                  linear-gradient(135deg, #8CA0B8 50%, transparent 50%);
	background-position: right calc(18 * var(--u, 1px)) center, right calc(13 * var(--u, 1px)) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
.cog-form__input:focus {
	outline: none;
	border-color: #0F6FA6;
	box-shadow: 0 0 0 3px rgba(12, 100, 150, .16);
}
.cog-form__field.is-error .cog-form__input { border-color: #C0392B; }

.cog-form__error {
	margin: calc(6 * var(--u, 1px)) 0 0;
	font-size: calc(12 * var(--ut, 1px));
	color: #C0392B;
}

.cog-form__actions {
	display: flex;
	align-items: center;
	gap: calc(16 * var(--u, 1px));
	margin-top: calc(26 * var(--u, 1px));
	flex-wrap: wrap;
}
.cog-form__submit {
	border: 0;
	cursor: pointer;
	background: #0F6FA6;
	color: #fff;
	font-family: inherit;
	font-size: calc(15 * var(--ut, 1px));
	font-weight: 600;
	padding: calc(14 * var(--u, 1px)) calc(28 * var(--u, 1px));
	border-radius: calc(999 * var(--u, 1px));
	transition: transform .18s var(--cog-ease), box-shadow .18s var(--cog-ease), background .15s ease;
}
.cog-form__submit:hover { background: #0A5880; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(12, 100, 150, .3); }
.cog-form__submit:focus-visible { outline: 2px solid #092747; outline-offset: 3px; }

.cog-form__small {
	margin: 0;
	font-size: calc(12.5 * var(--ut, 1px));
	line-height: 1.5;
	color: #8CA0B8;
	max-width: 38ch;
}

.cog-form__note {
	margin: 0 0 calc(22 * var(--u, 1px));
	padding: calc(14 * var(--u, 1px)) calc(18 * var(--u, 1px));
	border-radius: calc(10 * var(--u, 1px));
	font-size: calc(14 * var(--ut, 1px));
	line-height: 1.55;
}
.cog-form__note--ok  { background: #EAF7F0; border: 1px solid #BFE5D2; color: #14623C; }
.cog-form__note--bad { background: #FDEEEC; border: 1px solid #F2C6C0; color: #A32E1F; }

/* The honeypot is for machines; it must be reachable by neither eye nor
   screen reader, which is why it is moved off-canvas rather than hidden. */
.cog-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 700px) {
	.cog-form__grid { grid-template-columns: 1fr; }
	.cog-form__field--wide { grid-column: span 1; }
	.cog-form__input { height: 46px; font-size: 16px; }   /* 16 stops iOS zooming on focus */
	textarea.cog-form__input { height: 140px; }
	.cog-form__label { font-size: 10px; }
	.cog-form__submit { width: 100%; font-size: 15px; padding: 15px 28px; }
}

/* ─────────────────────────────────────────────────────────────
   Documents — the card, and the panel it opens into.

   This lives outside .cog-stage, so it is measured in real pixels
   rather than artboard units: it is interface, not artwork.
   ───────────────────────────────────────────────────────────── */

.cog-doc {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 20px 22px;
	border: 1px solid #DCE6F2;
	border-radius: 14px;
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
}
.cog-doc + .cog-doc { margin-top: 12px; }
.cog-doc__meta { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.cog-doc__kind { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8CA0B8; }
.cog-doc__title { font-size: 16px; font-weight: 600; color: #10284A; }
.cog-doc__note { font-size: 13px; color: #6F86A0; }
.cog-doc__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cog-doc__cta {
	appearance: none;
	cursor: pointer;
	display: inline-block;
	border: 1px solid #0F6FA6;
	background: #0F6FA6;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 22px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .18s var(--cog-ease), box-shadow .18s var(--cog-ease), background .15s ease;
}
.cog-doc__cta:hover { background: #0A5880; border-color: #0A5880; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(12, 100, 150, .28); }
.cog-doc__cta:focus-visible { outline: 2px solid #092747; outline-offset: 3px; }
.cog-doc__cta--ghost { background: transparent; color: #10284A; border-color: #C8D6E6; }
.cog-doc__cta--ghost:hover { background: #F3F7FC; border-color: #A9BFD6; box-shadow: none; }
.cog-doc__cta--solid { background: #0F6FA6; color: #fff; border-color: #0F6FA6; }

/* ── the panel ─────────────────────────────────────────────── */

html.cog-doc-open { overflow: hidden; }

.cog-doc-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 48px);
	font-family: var(--wp--preset--font-family--body);
}
.cog-doc-modal[hidden] { display: none; }
.cog-doc-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 20, 38, .72);
	backdrop-filter: blur(3px);
	animation: cog-doc-fade .18s ease both;
}
@keyframes cog-doc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cog-doc-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.cog-doc-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(980px, 100%);
	max-height: min(92vh, 1000px);
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(6, 20, 38, .45);
	animation: cog-doc-rise .22s var(--cog-ease) both;
}
.cog-doc-modal:not(.is-reading) .cog-doc-modal__panel { width: min(520px, 100%); }

.cog-doc-modal__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border-bottom: 1px solid #E4EBF4;
	background: #0B1E33;
}
.cog-doc-modal__head h2 { margin: 0; font-size: 16px; font-weight: 600; color: #fff; flex: 1; min-width: 0; }
.cog-doc-modal__x {
	appearance: none;
	border: 0;
	background: rgba(255, 255, 255, .1);
	color: #D6E3F1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.cog-doc-modal__x:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.cog-doc-modal__x:focus-visible { outline: 2px solid #1689C9; outline-offset: 2px; }

.cog-doc-modal__body { overflow: auto; }
.cog-doc-modal__body[data-cog-pane="view"] { flex: 1; min-height: 60vh; background: #4A5A6B; overflow: hidden; }
.cog-doc-modal__body iframe { display: block; width: 100%; height: 100%; min-height: 60vh; border: 0; }
.cog-doc-modal__body--form,
.cog-doc-modal__body--done { padding: 24px 24px 28px; }
.cog-doc-modal__lede { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #526780; }

.cog-doc__field { display: block; margin-bottom: 14px; }
.cog-doc__field > span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8CA0B8; }
.cog-doc__field > span i { color: #0F6FA6; font-style: normal; }
.cog-doc__field input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 46px;
	margin-top: 7px;
	padding: 0 14px;
	border: 1px solid #D9E4F0;
	border-radius: 9px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: #10284A;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cog-doc__field input:focus { outline: 0; border-color: #0F6FA6; box-shadow: 0 0 0 3px rgba(12, 100, 150, .16); }
.cog-doc__field.has-error input { border-color: #C0392B; }
.cog-doc__field.has-error > span { color: #C0392B; }
.cog-doc__err { display: block; margin-top: 5px; font-size: 12px; font-style: normal; color: #C0392B; }
.cog-doc__err:empty { display: none; }

.cog-doc__legal { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: #7C90A6; }
.cog-doc__legal a { color: #0F6FA6; }
.cog-doc__status { margin: 14px 0 0; font-size: 13px; color: #526780; }
.cog-doc__status:empty { display: none; }
.cog-doc__status.is-bad { color: #A32E1F; }
.cog-doc-form button[type="submit"] { margin-top: 18px; width: 100%; }
.cog-doc-form button[disabled] { opacity: .6; cursor: progress; }

.cog-doc__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
	.cog-doc-modal { padding: 0; }
	.cog-doc-modal__panel { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
	.cog-doc-modal__body[data-cog-pane="view"],
	.cog-doc-modal__body iframe { min-height: 0; height: 100%; }
	.cog-doc__field input { font-size: 16px; }   /* 16 stops iOS zooming on focus */
	.cog-doc { padding: 16px 18px; }
	.cog-doc__actions { width: 100%; }
	.cog-doc__cta { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.cog-doc-modal__scrim,
	.cog-doc-modal__panel { animation: none; }
	.cog-doc__cta:hover { transform: none; }
}


/* The hero's decoration must never take a click.

   The rings are absolutely positioned in the product stage and the pulse
   animation scales them past it — the stage is overflow:visible, so mid-pulse a
   ring sweeps up across the call-to-action row and swallows the click. The
   buttons were unreachable with a mouse while remaining perfectly valid links,
   which is why it looked like a styling problem rather than a hit-testing one. */
.cog-stage .ring,
.cog-stage .halo,
.cog-stage--hero .cog-hero-stage > svg,
.cog-stage .float { pointer-events: none; }