/* Statement band — the declaration: headline column beside a stage card.
   The band's own background lives here and NOT in the shared "Section
   background" control, which every section widget on the published pages
   uses: this wash belongs to this module alone. */

.srweb .srw-statement { position: relative; }
/* The wash and the grid texture are painted behind the content. */
.srweb .srw-statement > .wrap { position: relative; z-index: 1; }

/* ---------- the band ---------- */
.srweb .srw-statement--light {
	background:
		radial-gradient(760px 520px at 84% 4%, rgba(34,211,238,.20), transparent 62%),
		radial-gradient(620px 460px at 2% 92%, rgba(249,115,22,.11), transparent 60%),
		radial-gradient(1100px 700px at 50% 120%, rgba(36,67,120,.10), transparent 70%),
		linear-gradient(172deg, #ffffff 0%, #f6f9fd 52%, #eef4fb 100%);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}
.srweb .srw-statement--ink {
	color: #fff;
	background:
		radial-gradient(700px 420px at 80% 8%, rgba(34,211,238,.16), transparent 62%),
		radial-gradient(560px 360px at 4% 100%, rgba(249,115,22,.09), transparent 62%),
		linear-gradient(160deg, var(--c-ink) -20%, var(--c-ink-deep) 60%);
	border-top: 1px solid rgba(255,255,255,.10);
	border-bottom: 1px solid rgba(255,255,255,.10);
}
/* A very faint ruling: it gives the flat wash some texture without drawing
   anything on top of the text. The mask fades it out towards the edges. */
.srweb .srw-statement--grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .5;
	background-image:
		linear-gradient(rgba(36,67,120,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(36,67,120,.045) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(1000px 620px at 62% 40%, #000, transparent 72%);
	mask-image: radial-gradient(1000px 620px at 62% 40%, #000, transparent 72%);
}
.srweb .srw-statement--ink.srw-statement--grid::before {
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}

/* ---------- the two columns ---------- */
.srweb .srw-st-grid {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: clamp(2rem, 4.5vw, 4.4rem);
	align-items: center;
}
.srweb .srw-st-grid--solo { grid-template-columns: minmax(0, 1fr); }
.srweb .srw-st-copy { min-width: 0; }

/* ---------- the declaration ---------- */
/* A class, not a tag, because the headline level is an editor's choice. */
.srweb .srw-st-h {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.1rem, 4.2vw, 3.5rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	color: var(--c-ink);
	/* base.css caps h1 at 30ch; this headline sets its own measure by column. */
	max-width: none;
	margin: var(--sp-md) 0;
}
.srweb .srw-st-h em { font-style: normal; color: var(--c-accent); }
.srweb .srw-st-take {
	font-size: clamp(1.02rem, 1.35vw, 1.18rem);
	line-height: 1.6;
	color: var(--c-text);
	max-width: 34ch;
	margin: 0;
	padding-top: var(--sp-md);
	border-top: 1px solid var(--c-border);
}
.srweb .srw-st-cta { margin: var(--sp-lg) 0 0; }

/* ---------- the stage card ---------- */
.srweb .srw-st-stage {
	display: grid;
	grid-template-columns: minmax(150px, .52fr) minmax(0, 1fr);
	gap: clamp(1.2rem, 2.6vw, 2.2rem);
	align-items: center;
	padding: clamp(1.2rem, 2.4vw, 2rem);
	border-radius: var(--r-xl);
	border: 1px solid var(--c-border);
	background: #fff;
	box-shadow: 0 26px 60px rgba(20,29,55,.11), 0 2px 6px rgba(20,29,55,.05);
}
.srweb .srw-st-stage--solo { grid-template-columns: minmax(0, 1fr); }
.srweb .srw-st-device { position: relative; margin: 0; min-width: 0; }
.srweb .srw-st-device img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 34px rgba(20,29,55,.18));
}
.srweb .srw-st-panel { min-width: 0; }

.srweb .srw-st-lead {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.15rem, 1.75vw, 1.45rem);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--c-ink);
	margin: 0 0 .9rem;
	padding-bottom: .9rem;
	border-bottom: 1px dashed var(--c-border);
}

/* ---------- the numbered facts ---------- */
.srweb .srw-st-facts { list-style: none; display: grid; margin: 0; padding: 0; }
.srweb .srw-st-fact {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0 clamp(.9rem, 2vw, 1.5rem);
	padding: clamp(.85rem, 1.7vw, 1.15rem) 0;
	border-bottom: 1px dashed var(--c-border);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--c-text);
}
.srweb .srw-st-fact:last-child { border-bottom: 0; padding-bottom: 0; }
/* Rows with no numeral keep the text column, so a half-numbered list stays
   aligned; a list with no numerals at all drops the empty column. */
.srweb .srw-st-tx { grid-column: 2; }
.srweb .srw-st-facts--plain .srw-st-fact { grid-template-columns: minmax(0, 1fr); }
.srweb .srw-st-facts--plain .srw-st-tx { grid-column: 1; }
/* A ghost numeral: it counts the facts without competing with them for
   attention, the same figure the Grant Program page uses. */
.srweb .srw-st-n {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(2.2rem, 3.6vw, 3.1rem);
	line-height: .86;
	letter-spacing: -.04em;
	/* NOT tabular-nums: Barlow's tabular digits run ~20% wider than its
	   proportional ones, which widens the numeral column and pushes the fact
	   text off the measure the mockup sets. The numerals are two digits each,
	   so they line up on their own. */
	font-variant-numeric: normal;
	color: #d8e4f4;
}

/* ---------- the ink band repaints everything it inherits ---------- */
.srweb .srw-statement--ink .eyebrow { color: var(--c-glow); }
.srweb .srw-statement--ink .srw-st-h { color: #fff; }
/* Pure orange loses too much contrast on deep blue; this warm tint holds. */
.srweb .srw-statement--ink .srw-st-h em { color: #ffba8b; }
.srweb .srw-statement--ink .srw-st-take { color: rgba(233,241,251,.86); border-top-color: rgba(255,255,255,.16); }
.srweb .srw-statement--ink .srw-st-stage {
	border-color: rgba(255,255,255,.14);
	background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(34,211,238,.03));
	box-shadow: 0 26px 60px rgba(0,0,0,.35);
}
.srweb .srw-statement--ink .srw-st-device img { filter: drop-shadow(0 26px 44px rgba(0,0,0,.5)); }
.srweb .srw-statement--ink .srw-st-lead { color: #fff; border-bottom-color: rgba(255,255,255,.16); }
.srweb .srw-statement--ink .srw-st-fact { color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.12); }
.srweb .srw-statement--ink .srw-st-n { color: rgba(255,255,255,.20); }
.srweb .srw-statement--ink :is(b, strong) { color: #fff; }
.srweb .srw-statement--ink :is(.srw-st-take, .srw-st-fact) a { color: #fff; border-bottom-color: var(--c-glow); }
.srweb .srw-statement--ink :is(.srw-st-take, .srw-st-fact) a:hover { color: var(--c-glow); }
.srweb .srw-statement--ink :is(a, button):focus-visible { outline-color: var(--c-glow); }

/* ---------- wider screens ---------- */
/* Once the two columns fit side by side the design gives the photo more room
   and the card more padding. Written as :not(--solo) so a card with no photo
   keeps its single column here. */
/* The mockup turns the wide card on at 900, not at 901. Exactly 900px is the
   one width where the difference shows: there the outer grid has already
   stacked and the mockup still gives the card its wide split and its larger
   padding, which is 85px of section height. Same edge here. */
@media (min-width: 900px) {
	.srweb .srw-st-stage { padding: clamp(1.6rem, 3vw, 2.4rem); }
	.srweb .srw-st-stage:not(.srw-st-stage--solo) {
		grid-template-columns: minmax(190px, .7fr) minmax(0, 1fr);
	}
}

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
	.srweb .srw-st-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 2.6rem); }
}
/* Stops just short of 900 so it does not take the card back off the wide split
   the block above just gave it at that exact width. */
@media (max-width: 899.98px) {
	/* :not(--solo) again: this rule sits after the solo one, so without it a card
	   with only one half would grow a phantom second column here. */
	.srweb .srw-st-stage:not(.srw-st-stage--solo) { grid-template-columns: minmax(140px, .52fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
	/* The :not() is repeated here on purpose. Without it this rule is a class
	   short of the one in the 900px block above, which kept the card in two
	   columns all the way down to the narrowest phone — where the fact text
	   ends up two or three words per line. The mockup stacks here. */
	.srweb .srw-st-stage,
	.srweb .srw-st-stage:not(.srw-st-stage--solo) { grid-template-columns: minmax(0, 1fr); }
	/* Centred, as the mockup has it once the card stacks. The auto margins alone
	   do not do it inside Elementor: its own ".elementor-widget ... figure
	   {margin:0}" outweighs them, so the photo sat against the left edge. This
	   centres the grid item itself, which that rule does not touch. */
	.srweb .srw-st-device { max-width: 170px; margin-inline: auto; justify-self: center; }
}

/* ============================================================
   "Scene" band — the one the 2026 home actually uses.
   In the approved mockup this module has no background of its own:
   it shares one deep-blue scene with the hero above it, and the
   module simply sits on the lower part of that gradient. Here the
   hero is a separate widget, so the band has to paint its own
   slice of that scene. The values below are the colours measured
   on the mockup at 1440px, at the top, middle and bottom of the
   band, not an approximation of them:
       top    #0d1f42   ·   middle #0d2143   ·   bottom #08122b
   plus the cyan glow that the scene throws up from its bottom edge.
   The light and ink bands above are left exactly as they were:
   other pages may reach for them.
   ============================================================ */
.srweb .srw-statement--scene {
	color: rgba(223,234,248,.82);
	background:
		radial-gradient(90% 95.5% at 50% 100%, rgba(34,211,238,.14), transparent 62%),
		linear-gradient(178deg, #0d1f42 0%, #0d2143 35%, #08122b 100%);
}
/* The mockup gives this band its own vertical rhythm — more air below than
   above, because the scene closes here. Written against the "None" spacing
   step so the Layout control still wins whenever an editor picks a step. */
.srweb .srw-statement--scene.srw-pt-none { padding-top: clamp(2.6rem, 5vw, 4.2rem); }
.srweb .srw-statement--scene.srw-pb-none { padding-bottom: clamp(4rem, 8vw, 6.5rem); }
/* The faint ruling was drawn for the white band; over the scene the mockup
   switches it off. If an editor turns it on anyway, at least draw it in white. */
.srweb .srw-statement--scene.srw-statement--grid::before {
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}

/* ---------- what the scene repaints ---------- */
.srweb .srw-statement--scene .eyebrow { color: #fff; }
.srweb .srw-statement--scene .srw-st-h { color: #fff; }
/* Pure orange loses too much contrast on the deep blue; this is the warm
   tint the mockup uses here. */
.srweb .srw-statement--scene .srw-st-h em { color: #ffba8b; }
.srweb .srw-statement--scene .srw-st-take { color: rgba(223,234,248,.78); }
/* The card is glass over the scene, not a sheet of white paper. */
.srweb .srw-statement--scene .srw-st-stage {
	background: rgba(255,255,255,.045);
	border-color: rgba(255,255,255,.13);
	box-shadow: 0 30px 70px rgba(0,0,0,.34);
	-webkit-backdrop-filter: blur(14px) saturate(1.15);
	backdrop-filter: blur(14px) saturate(1.15);
}
.srweb .srw-statement--scene .srw-st-device img { filter: drop-shadow(0 26px 44px rgba(0,0,0,.5)); }
.srweb .srw-statement--scene .srw-st-lead { color: #fff; border-bottom-color: rgba(255,255,255,.16); }
.srweb .srw-statement--scene .srw-st-fact { color: rgba(223,234,248,.80); border-bottom-color: rgba(255,255,255,.12); }
.srweb .srw-statement--scene .srw-st-n { color: rgba(255,255,255,.20); }
.srweb .srw-statement--scene :is(b, strong) { color: #fff; }
.srweb .srw-statement--scene :is(.srw-st-take, .srw-st-fact) a { color: #fff; border-bottom-color: var(--c-glow); }
.srweb .srw-statement--scene :is(.srw-st-take, .srw-st-fact) a:hover { color: var(--c-glow); }
.srweb .srw-statement--scene :is(a, button):focus-visible { outline-color: var(--c-glow); }

/* ---------- the seam ----------
   The mockup draws a hairline where the hero ends and this band begins: it
   runs the width of the container, not the window, and fades out at both
   ends. It is not the shared "Hairline on top" control, which is a solid
   full-bleed line in the light border colour. It is pinned to the very top
   edge of the section, above its padding, which is where the mockup has it. */
.srweb .srw-st-seam {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
}
.srweb .srw-st-seam span {
	display: block;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%, rgba(255,255,255,.16) 14%,
		rgba(255,255,255,.16) 86%, transparent 100%);
}
/* On a light band the same seam has to be drawn in ink, or it is invisible. */
.srweb .srw-statement--light .srw-st-seam span {
	background: linear-gradient(90deg,
		transparent 0%, var(--c-border) 14%, var(--c-border) 86%, transparent 100%);
}

/* ---------- two spacings the mockup sets and base.css does not ---------- */
/* The eyebrow carries a bottom margin of its own and the headline already
   opens with one, so on this module the pair read 32px apart instead of the
   16px the mockup has. */
.srweb .srw-statement .eyebrow { margin-bottom: 0; }
/* The ghost numeral hangs slightly below the first line of its fact, so the
   two read as a pair rather than as a heading over a paragraph. */
.srweb .srw-st-n { padding-top: .28em; }


/* Inside a scene (see HeroPhoto/style.css) the backdrop belongs to the wrapper,
   so this band paints no ground of its own — otherwise its edge shows as a seam
   against the module above. Outside a scene nothing here applies. */
.srw-escena .srweb .srw-statement{ background: none }


/* The seam sits inside .wrap, which the section's top padding has already
   pushed down, so it has to climb back exactly that far to land on the
   boundary between the blocks instead of just above the eyebrow. The travel
   is read from a custom property the padding sets, so the two can never
   drift apart: change one and the other follows. */
.srweb .srw-statement { --srw-seam-lift: clamp(2.6rem, 5vw, 4.2rem); }
/* No lift: this seam is already anchored to the section's top edge. */