/* Callout band — one strong statement on a brand-coloured background. */
.srweb .srw-callout { position: relative; overflow: hidden; padding: clamp(1.6rem, 3.5vw, 2.4rem); border-radius: var(--r-xl); color: #fff; background: linear-gradient(135deg, var(--c-ink-deep), var(--c-ink)); box-shadow: var(--sh-glass); }
.srweb .srw-callout::after { content: ""; position: absolute; right: 6%; top: -40%; width: 44%; height: 180%; background: radial-gradient(circle, rgba(34,211,238,.28), transparent 68%); pointer-events: none; }
.srweb .srw-callout-tag { position: relative; z-index: 1; display: inline-flex; font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-deep); background: var(--c-glow); padding: .4em .8em; border-radius: var(--r-pill); margin-bottom: 1rem; }
.srweb .srw-callout p { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.25; letter-spacing: -.01em; color: #fff; max-width: 34ch; margin: 0; }
.srweb .srw-callout em { font-style: normal; color: var(--c-glow); }
.srweb .srw-callout b, .srweb .srw-callout strong { color: #fff; }
.srweb .srw-callout .srw-callout-cite { font-family: var(--font-body); font-weight: 400; font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.72); margin-top: 1rem; max-width: 60ch; }

/* With a picture the band becomes two columns; without one nothing changes. */
/* Two zones: the statement keeps its natural width on the left, and the
   picture owns everything that remains — centered in it, so leftover space
   becomes symmetric breathing room instead of a gulf on one side. */
.srweb .srw-callout--media { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.srweb .srw-callout--media .srw-callout-body { min-width: 0; flex: 0 1 auto; }
.srweb .srw-callout--media .srw-callout-media { flex: 1 1 auto; display: flex; justify-content: center; }
.srweb .srw-callout-media { position: relative; z-index: 1; min-width: 0; }
/* A cutout floating on a dark band reads as pasted-on. Three things seat it:
   a soft brand-cyan glow behind it (the showcase light), a drop shadow that
   follows its silhouette (its weight), and a hard cap so it stays an
   illustration, not a hero. */
.srweb .srw-callout-media { position: relative; }
.srweb .srw-callout-media::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 130%; height: 130%; transform: translate(-50%, -50%); background: radial-gradient(ellipse 50% 50% at center, rgba(34,211,238,.16), transparent 70%); pointer-events: none; }
.srweb .srw-callout-media img { position: relative; display: block; width: auto; height: auto; max-width: min(340px, 100%); max-height: 320px; border-radius: 0; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .45)); }
/* The reserved slot has to read on a dark band, unlike the one on white sections. */
.srweb .srw-callout-media .srw-ph { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); }
@media (max-width: 720px) {
	.srweb .srw-callout--media { flex-direction: column; align-items: flex-start; }
}

/* The corner glow was tuned for a band that is all text: a soft halo in the
   empty right half. With media there, the halo sits right behind the picture
   and its edge reads as a botched gradient — so in that layout the band keeps
   only its base gradient, which is smooth from corner to corner. */
.srweb .srw-callout--media::after { content: none; }