/* ============================================================
   Hero with photo (.srw-hphoto)

   Its own class from the ground up, never .srw-hero: that one is the light
   page header of two published pages, and this hero is dark, two columns and
   full bleed. Sharing a selector would mean every change here landing on
   pages nobody asked to change.

   The vertical rhythm is deliberately NOT set on the <section>: the nav
   clearance lives on the inner grid, so the editor's "Space above / below"
   controls keep working instead of being silently overridden.
   ============================================================ */

/* The sweep around the photo animates an angle, and an angle only interpolates
   if the browser has been told what type it is — otherwise it jumps from 0 to
   360 with nothing in between. */
@property --srw-hp-ring {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.srweb .srw-hphoto {
	position: relative;
	overflow: hidden;
	/* Own stacking context, so the glow behind the copy (z-index:-1) cannot
	   slide underneath the page background. */
	isolation: isolate;
	color: #fff;

	/* The approved mockup does not paint this blue on the hero: it paints it on
	   a taller scene that runs from the top of the page down through the module
	   that follows, and the hero only ever shows the FIRST slice of it. Copying
	   the gradient at the hero's own height is what turned the bottom edge cyan
	   — the wash that belongs 660px lower was landing inside the hero.
	   So the gradient is painted at the scene's height and anchored to the top;
	   what shows through the hero is exactly the mockup's first slice.
	   --srw-hp-scene-extra is how much scene continues below the hero. */
	background-color: #08122b;
	background-image:
		radial-gradient(80% 46% at 50% 0%, rgba(34, 211, 238, .10), transparent 60%),
		radial-gradient(70% 40% at 8% 4%, rgba(36, 67, 120, .55), transparent 60%),
		radial-gradient(90% 38% at 50% 100%, rgba(34, 211, 238, .14), transparent 62%),
		linear-gradient(178deg, #0b1730 0%, var(--c-ink-deep) 42%, #0d2143 74%, #08122b 100%);
	background-size: 100% calc(100% + var(--srw-hp-scene-extra, 663px));
	background-position: 0 0;
	background-repeat: no-repeat;

	/* The header is 221px tall and the mockup starts its first line 33px under
	   it — the room the design actually leaves, not the 4.125rem the other
	   pages of this plugin use. Part of that 33px comes from the section
	   centring its own content, so the reserved strip itself is small. */
	--srw-hero-top: .5rem;
}

/* An orange ember off to the left: the button's own family, blurred out of
   recognition, so the blue does not read flat and the photo has something to
   answer on the other side. */
.srweb .srw-hphoto::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -34%;
	/* In the mockup the ember is placed at 34% of the SCENE, not of the hero, so
	   inside the hero it sits far lower than a plain 34% would put it — the warm
	   light falls beside the button, not beside the headline. */
	top: calc(.34 * (100% + var(--srw-hp-scene-extra, 663px)));
	width: min(56vw, 760px);
	aspect-ratio: 1.4 / 1;
	border-radius: 64%;
	background: radial-gradient(closest-side, rgba(249, 115, 22, .34) 0%, rgba(249, 115, 22, .13) 15%, transparent 153%);
	filter: blur(64px);
	/* "screen" lifts the blue instead of laying orange over it; painted normally
	   the same ember reads as a grey smudge. Safe to blend: the section is its
	   own stacking context (isolation above), so nothing below it is touched. */
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Fills the first screen and centres itself in it. */
.srweb .srw-hphoto--tall {
	display: grid;
	align-items: center;
	min-height: 100svh;
}

/* ---------- the two columns ---------- */
.srweb .srw-hphoto .srw-hp-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	align-items: center;
	gap: clamp(1.4rem, 3.4vw, 3.4rem);
	/* The site nav floats over the hero and reserves no height of its own, so
	   the first line of copy has to clear it from in here. */
	padding-top: calc(var(--srw-nav-h, 0px) + var(--srw-hero-top, 4.5rem));
	padding-bottom: clamp(2.4rem, 5vw, 4rem);
}

/* An editor who removes the photograph gets one column, not a column of copy
   next to an empty half. */
.srweb .srw-hphoto--solo .srw-hp-grid {
	grid-template-columns: minmax(0, 1fr);
}
.srweb .srw-hphoto--solo .srw-hp-copy {
	max-width: 72ch;
}

/* ---------- the copy ---------- */
.srweb .srw-hphoto .srw-hp-copy {
	display: grid;
	justify-items: start;
	min-width: 0;
	/* 612px — the mockup's 60ch measured on ITS body size (17px). Read as "ch"
	   here it came out 36px narrower, because this site's body is 16px, and the
	   lead broke "Bio-Techne" across two lines. Written as a length so the
	   column keeps the approved measure whatever the body size is. */
	max-width: 38.25rem;
}
.srweb .srw-hphoto .eyebrow { color: #fff; margin: 0; }
.srweb .srw-hphoto .eyebrow::before { background: var(--c-accent); }

.srweb .srw-hphoto .srw-hp-title {
	font-family: var(--font-display);
	font-weight: 700;
	color: #fff;
	font-size: clamp(2.2rem, 4vw, 3.7rem);
	/* 1, not 1.03: three lines of hero headline turn that 3% into 5px of drift
	   against the mockup. */
	line-height: 1;
	letter-spacing: -.035em;
	margin: clamp(.9rem, 1.6vw, 1.3rem) 0 clamp(1.1rem, 2vw, 1.6rem);
	max-width: none;
	text-wrap: balance;
}
/* Both marked words are marked, but not alike: if they shared a treatment they
   would compete and neither would lead. The claim takes the gradient — the
   scarce gesture. The product name takes flat colour from the same family:
   marked, and subordinate. */
/* ── The accent, only when an editor turns it on ───────────────────────────
   Without .srw-hp-title--glow the emphasised words simply inherit the
   headline's colour, which is the approved look: one white headline. Every
   rule below hangs off the modifier, so nothing here applies by default.   */
/* <em> and <i> stay semantic when the accent is off. */
/* base.css gives every .srweb h1 em a looping cyan shine. That is right for
   the pages built on the light ground, and wrong here: this headline is one
   flat white. Undone explicitly rather than by hoping a later rule wins —
   base.css is shared by five published pages and must not be edited. */
.srweb .srw-hphoto .srw-hp-title :is(em, i, .srw-nb) {
	font-style: normal;
	background: none;
	-webkit-text-fill-color: currentColor;
	color: inherit;
	animation: none;
}
.srweb .srw-hphoto .srw-hp-title :is(i, .srw-nb) { white-space: nowrap }
/* Same for the ® it carries: base.css hands it back the ink colour. */
.srweb .srw-hphoto .srw-hp-title sup.sr-reg,
.srweb .srw-hphoto .srw-hp-title :is(em, i, .srw-nb) sup.sr-reg {
	-webkit-text-fill-color: currentColor;
	color: inherit;
}

.srweb .srw-hphoto .srw-hp-title--glow em {
	font-style: normal;
	background-image: linear-gradient(96deg, #9fdcf1 0%, #35c6e6 45%, #f4a463 100%);
	background-size: 100% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	/* base.css gives h1 em a looping shine; one hero-length headline sweeping
	   forever is exactly the kind of movement this page does not want. */
	animation: none;
}
.srweb .srw-hphoto .srw-hp-title--glow :is(i, .srw-nb) {
	font-style: normal;
	color: #9fdcf1;
	white-space: nowrap;
}
/* Where the browser cannot clip a background to text, the words would come out
   invisible, so they fall back to flat cyan. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.srweb .srw-hphoto .srw-hp-title--glow em {
		background: none;
		-webkit-text-fill-color: currentColor;
		color: #9fdcf1;
	}
}
/* base.css hands the ® back its ink colour, which is right on white and
   invisible here. It takes the colour of the word it belongs to instead. */
.srweb .srw-hphoto .srw-hp-title--glow sup.sr-reg {
	-webkit-text-fill-color: #fff;
	color: #fff;
}
.srweb .srw-hphoto .srw-hp-title--glow :is(em, i, .srw-nb) sup.sr-reg {
	-webkit-text-fill-color: #9fdcf1;
	color: #9fdcf1;
}

.srweb .srw-hphoto .srw-hp-lead {
	font-size: clamp(.95rem, 1.06vw, 1.03rem);
	line-height: 1.65;
	color: rgba(223, 234, 248, .80);
	margin: 0 0 clamp(1rem, 1.8vw, 1.4rem);
	/* The column above already holds the measure. A second, narrower cap here
	   re-broke the lines the mockup had settled. */
	max-width: none;
}
.srweb .srw-hphoto .srw-hp-lead :is(b, strong) { color: #fff; font-weight: 700; }

/* The take-away, held by a rule instead of a box: it is one line of voice, not
   a card. */
.srweb .srw-hphoto .srw-hp-claim {
	font-family: var(--font-display);
	font-weight: 600;
	color: #fff;
	font-size: clamp(1.02rem, 1.2vw, 1.16rem);
	line-height: 1.46;
	margin: 0;
	padding-left: 1rem;
	border-left: 2px solid var(--c-glow);
	max-width: none;
	/* No text-wrap:pretty. It pulled a word down to keep the last line from
	   being short, and the approved three lines break elsewhere: "…to identify
	   practical / solutions." is what was signed off. */
	text-wrap: normal;
}

.srweb .srw-hphoto .srw-hp-cta { margin: clamp(1.4rem, 2.6vw, 2.1rem) 0 0; color: inherit; }
/* Two corrections the button needs on this ground, both scoped so the token and
   base.css stay untouched: the mockup's radius is 14px against --r-btn's 12,
   and a site-wide rule that hands 1.5 line-height to anything whose class
   contains "btn" — which catches the label inside — made the button 5px taller
   than the approved one. The label needs its own line, or it keeps the 1.5 and
   sets the button's height on its own as the tallest flex item. */
.srweb .srw-hphoto .srw-hp-cta .btn {
	border-radius: 14px;
	line-height: 1.2;
}
.srweb .srw-hphoto .srw-hp-cta .btn .btn-lbl { line-height: inherit; }
/* The prose link colour is dark ink, which disappears against this ground.
   Doubling .srweb raises the weight past the host theme's own anchor rules. */
.srweb.srweb .srw-hphoto .srw-hp-copy a:not(.btn) {
	color: #9fdcf1;
	border-bottom-color: rgba(34, 211, 238, .5);
}
.srweb.srweb .srw-hphoto .srw-hp-copy a:not(.btn):hover {
	color: #fff;
	border-bottom-color: #fff;
}

/* ---------- the partner strip ---------- */
/* It closes the column under the button: a reinforcement of the paragraph that
   already names them, never a competitor to the headline. */
.srweb .srw-hphoto .srw-hp-jv {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(1rem, 2vw, 1.6rem);
	justify-self: stretch;
	width: 100%;
	/* 30rem: the rule over the logos is as long as the mockup's, which stops
	   just past Bio-Techne instead of running on past it. */
	max-width: 30rem;
	margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0;
	padding-top: clamp(1.1rem, 2vw, 1.5rem);
	border-top: 1px solid rgba(255, 255, 255, .13);
}
/* Logos come in unrelated proportions, so the cap height per row — not the
   width — is what makes two of them weigh the same on the line. */
.srweb .srw-hphoto .srw-hp-jv-logo {
	display: block;
	width: auto;
	height: auto;
	/* The strip gives way as the window narrows, exactly as the mockup does it:
	   a mark of standard height follows the viewport (clamp(15px, 1.5vw, its own
	   height)), so it tops out at the configured height on a wide screen and
	   settles at 15px from roughly 1000px down. Held at a flat cap instead, the
	   two logos came out a quarter taller than approved on a tablet. */
	max-height: clamp(15px, 1.5vw, var(--srw-hp-logo-h, 19px));
	object-fit: contain;
	opacity: .72;
	transition: opacity var(--t-micro) var(--ease-out);
}
/* A mark taller than the standard one is not fluid in the mockup: it keeps its
   cap the whole way down and gives way once, on a tablet. */
.srweb .srw-hphoto .srw-hp-jv-logo--tall { max-height: var(--srw-hp-logo-h, 19px); }
@media (max-width: 820px) {
	.srweb .srw-hphoto .srw-hp-jv-logo--tall { max-height: min(var(--srw-hp-logo-h, 19px), 20px); }
}
.srweb .srw-hphoto .srw-hp-jv:hover .srw-hp-jv-logo { opacity: .95; }
.srweb .srw-hphoto .srw-hp-jv-sep {
	width: 1px;
	height: 1.15rem;
	background: rgba(255, 255, 255, .18);
	flex: none;
}
.srweb.srweb .srw-hphoto .srw-hp-jv-link {
	display: inline-flex;
	align-items: center;
	border-bottom: 0;
}
/* A partner whose artwork has not arrived yet: the name reads as a marker, not
   as a finished lock-up. */
.srweb .srw-hphoto .srw-hp-jv-ph {
	display: inline-flex;
	align-items: center;
	/* Same fluid height as the artwork it stands in for, so a strip that mixes a
	   logo with a pending name keeps one line. */
	height: clamp(15px, 1.5vw, var(--srw-hp-logo-h, 19px));
	padding: 0 .7em;
	border: 1px dashed rgba(255, 255, 255, .28);
	border-radius: var(--r-sm);
	font-family: var(--font-display);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(223, 234, 248, .6);
}

/* ---------- the photograph ---------- */
.srweb .srw-hphoto .srw-hp-fig {
	position: relative;
	margin: 0;
	min-width: 0;
	justify-self: stretch;
}
/* A rectangular photograph with no radius and no shadow sits on the band like
   a poster taped to it; the frame is what beds it into the blue. */
.srweb .srw-hphoto .srw-hp-photo {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	/* 18px, the mockup's own value — --r-xl is 22px on this site. */
	border-radius: 18px;
	box-shadow: 0 30px 70px rgba(6, 16, 40, .45);
	/* Two shadows, as in the mockup: the box-shadow beds the frame, the
	   drop-shadow is the deeper fall that keeps it from floating. */
	filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55));
}
/* ---------- the band the photograph sits on ----------
   What the mockup puts behind the picture is not a cyan glow but a darker blue
   band: it starts to the left of the figure, runs off the right edge of the
   window, and dips darkest right under the photo. That dip is what gives the
   frame something to be cut out against; a glow lit the same area instead and
   left the photograph floating on flat blue.

   Three pieces, exactly as the mockup builds them:
     · the band itself, a vertical gradient, masked so it dissolves at the top,
       the bottom and the left, and stays solid only against the right edge;
     · two hairlines, one per vertical edge (the left one is inside the fade, so
       what actually shows is the right one, against the window edge);
     · the well, an inner overlay that darkens the middle and closes the ends. */
.srweb .srw-hphoto .srw-hp-band {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	top: -15vh;
	bottom: -15vh;
	left: -17%;
	/* Bleeds to the window edge. The figure's right edge is the container's, so
	   what is left over is the gutter — plus half of whatever the container is
	   short of the viewport once its max width caps it. */
	right: calc(-1 * (max(0px, (100vw - var(--srw-wrap-max, 1200px)) / 2) + var(--srw-wrap-pad, 1.25rem)));
	background: linear-gradient(180deg, #080f22 0%, #0f2650 46%, #080f22 100%);
	/* Two masks at once: the usual fade top and bottom, and a second one down
	   the left. They intersect, so the band dissolves on three sides. */
	-webkit-mask-image:
		linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
		linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 11%, #000 30%);
	mask-image:
		linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
		linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 11%, #000 30%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
/* The two hairlines that frame the band. */
.srweb .srw-hphoto .srw-hp-band::before,
.srweb .srw-hphoto .srw-hp-band::after {
	content: "";
	position: absolute;
	top: 6%;
	bottom: 6%;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(34, 211, 238, .30), transparent);
}
.srweb .srw-hphoto .srw-hp-band::before { left: 0; }
.srweb .srw-hphoto .srw-hp-band::after { right: 0; }
/* The well: the blue drops away where the photograph rests, and the band closes
   at both ends. */
.srweb .srw-hphoto .srw-hp-band-in {
	position: absolute;
	inset: 0;
	display: block;
	background:
		radial-gradient(48% 42% at 48% 55%,
			rgba(6, 14, 32, .86) 0%, rgba(6, 14, 32, .42) 52%, transparent 78%),
		linear-gradient(180deg,
			rgba(8, 18, 42, .88) 0%, rgba(8, 18, 42, .42) 30%,
			rgba(8, 18, 42, .42) 70%, rgba(8, 18, 42, .88) 100%);
}
/* The sweep: a conic gradient masked down to the border, so it lights the rim
   without laying a second element over the picture. */
.srweb .srw-hphoto .srw-hp-fig--ring::after {
	content: "";
	position: absolute;
	inset: -3px;
	z-index: 3;
	pointer-events: none;
	border-radius: calc(var(--r-xl) + 3px);
	padding: 3px;
	background: conic-gradient(from var(--srw-hp-ring, 0deg),
		rgba(34, 211, 238, 0) 0deg 196deg,
		rgba(34, 211, 238, .92) 262deg,
		rgba(249, 115, 22, .78) 296deg,
		rgba(34, 211, 238, 0) 338deg 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: srwHpRing 8s linear infinite;
}
@keyframes srwHpRing { to { --srw-hp-ring: 360deg; } }
/* Less motion means the rim holds still — not that it disappears. */
@media (prefers-reduced-motion: reduce) {
	.srweb .srw-hphoto .srw-hp-fig--ring::after { animation: none; }
}

/* ---------- narrow ---------- */
@media (max-width: 1080px) {
	.srweb .srw-hphoto .srw-hp-grid {
		grid-template-columns: 1fr;
		gap: clamp(1.6rem, 4vw, 2.4rem);
		/* Stacked, the photo scales up and spills below its own box, so the row
		   needs more air than the column gap gives. */
		row-gap: clamp(2.4rem, 7vw, 3.4rem);
		padding-bottom: clamp(2rem, 5vw, 3rem);
	}
	/* The photo leads on a narrow screen: stacked below, it would be a full
	   scroll away from the headline it belongs to. And it fills the column, as
	   in the mockup — capped at 560px it sat as a small card in a wide band. */
	.srweb .srw-hphoto .srw-hp-fig {
		order: -1;
		justify-self: stretch;
		width: auto;
		max-width: none;
	}
	/* The fall under the picture pulls in: kept at full strength it smudged over
	   the copy beneath it. */
	.srweb .srw-hphoto .srw-hp-photo { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45)); }
	/* Stacked, the band and the copy share the same column. The band belongs to
	   the figure, so it is the copy that has to come forward — and the band
	   stops where the figure stops instead of running on under the headline. */
	.srweb .srw-hphoto .srw-hp-copy { position: relative; z-index: 3; }
	.srweb .srw-hphoto .srw-hp-band { bottom: 0; }
}
/* Between the tablet break and the desktop one the header drops to 110px while
   the mockup goes on reserving the same 128px strip it always did, so the hero
   needs more room here than the plugin's shared value gives it. And the room it
   needs is not a fixed amount: on top of that strip the mockup adds its own
   fluid top padding, clamp(1.6rem, 4vw, 2.6rem), which grows from 30.8px at the
   tablet break to 40.9px at the desktop one. Held at a flat 3.25rem the copy
   drifted from 3px too low at 769px to 7px too high at 1023px. Written against
   --srw-nav-h rather than against 110px so a change of header height moves the
   clearance instead of the design. */
@media (max-width: 63.9375em) and (min-width: 48.0625em) {
	.srweb .srw-hphoto {
		--srw-hero-top: calc(128px - var(--srw-nav-h, 110px) + clamp(1.6rem, 4vw, 2.6rem));
	}
}
@media (max-width: 48em) {
	/* On a phone the photo comes first, and 1.5rem left it touching the site's
	   logo. The bar is fixed, so the gap has to be part of the hero's own top. */
	.srweb .srw-hphoto { --srw-hero-top: 3.6rem; }
	/* A viewport-tall hero on a phone is mostly empty blue above the fold. */
	.srweb .srw-hphoto--tall { min-height: 0; }
}


/* ── The scene ─────────────────────────────────────────────────────────────
   Two modules that must read as one continuous space cannot each paint their
   own background: where one ends and the next begins there is a seam. The
   mockup wraps both in «.pc-escena», which carries the backdrop while the
   sections stay transparent — this is that wrapper, built by the page template
   (SRC_Pages::tree, key 'escena').

   It lives in this stylesheet because the scene is the hero's backdrop and the
   hero always opens it, so wherever the class exists this file is loaded. The
   hero drops its own background here; each other module inside the scene drops
   its own in its own stylesheet. Nothing below applies unless the class is
   present, so a hero used on its own is untouched. */
.srweb .srw-escena,
.elementor .srw-escena{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 46% at 50% 0%, rgba(34, 211, 238, .10), transparent 60%),
    radial-gradient(70% 40% at 8% 4%, rgba(36, 67, 120, .55), transparent 60%),
    radial-gradient(90% 38% at 50% 100%, rgba(34, 211, 238, .14), transparent 62%),
    linear-gradient(178deg, #0b1730 0%, #0e1d41 42%, #0d2143 74%, #08122b 100%);
}
/* Inside the scene the hero contributes no ground of its own. */
.srw-escena .srweb .srw-hphoto{ background: none }