/* Falcon - About (Elementor page 1318) - "Who we are" intro section - issue #9
   Loaded as a file by ftt-core.php (wp_enqueue_scripts, page 1318 only). Keep page 1318's Elementor Custom CSS field
   empty so these rules are not loaded twice. Keep it ASCII-only and backslash-free.
   Scope: the "who" block is Elementor element 3b8a295e (class .elementor-element-3b8a295e); the aside inside it is
   6a5922c8 and carries the existing kit class falcon-wm (g-8688442). The Falcon line art is injected into the aside and
   drawn on scroll by the existing site snippet 5973 (`.falcon-wm`), which shows a static filled mark under
   prefers-reduced-motion and adds nothing without JS.
   Round 2 (Iggy, 14 Oct): single-colour heading, no top rule, aside boxed in sand with the falcon behind it.
   Round 3: intro statement (50b4567b) moved into the block under the heading; Yesteryear drop cap (font enqueued
   by ftt-core.php from Google Fonts). */

/* No rule above the section. */
.elementor .elementor-element-3b8a295e { border-block-start: 0; }

/* Two-column grid: heading with the intro statement under it on the left, the body spanning both rows on the right.
   Below 768px (split-row goes to one column) the block stacks in DOM order (heading, statement, body). */
.elementor .elementor-element-3b8a295e > p.statement {
	align-self: start;
	margin-block-start: 8px;
	font-size: clamp(1.4rem, 1.9vw, 1.75rem);
	line-height: 1.35;
}
@media (min-width: 768px) {
	.elementor .elementor-element-3b8a295e { grid-template-rows: auto 1fr; }
	.elementor .elementor-element-3b8a295e > h2 { grid-column: 1; grid-row: 1; }
	.elementor .elementor-element-3b8a295e > p.statement { grid-column: 1; grid-row: 2; }
	.elementor .elementor-element-3b8a295e > .index-stack { grid-column: 2; grid-row: 1 / span 2; }
}

/* Display heading: the hero title's Newsreader, one colour (navy). */
.elementor .elementor-element-3b8a295e h2 {
	font-family: Newsreader, var(--font-heading), serif;
	font-weight: 400;
	font-size: clamp(3.5rem, 6.4vw, 6.25rem);
	line-height: .95;
	letter-spacing: -.015em;
	color: var(--dark-back);
	text-wrap: balance;
}
.elementor .elementor-element-3b8a295e h2 em { font-style: inherit; font-weight: inherit; color: inherit; }

/* Drop cap on the opening paragraph; the letter stays real text in reading order. */
.elementor .elementor-element-3b8a295e p.body-lg::first-letter {
	float: left;
	font-family: Yesteryear, Newsreader, var(--font-heading), serif;
	font-style: normal;
	font-weight: 400;
	font-size: 5.4em;
	line-height: .78;
	margin: -.4em -.04em -.1em 0;
	color: var(--icon-why);
}

/* Services: a real ul list with a custom compass-star marker. list-style stays non-"none" so Safari keeps list semantics;
   the marker image is presentational and not announced. */
.elementor .elementor-element-3b8a295e span.body-lg { display: block; }
.elementor .elementor-element-3b8a295e ul {
	margin: 0;
	padding: 24px 0 0 1.5em;
	border-block-start: 1px solid #11254726;
	columns: 2;
	column-gap: 48px;
	list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 14 14'%3E%3Cpath d='M7 0 8.5 5.5 14 7 8.5 8.5 7 14 5.5 8.5 0 7 5.5 5.5Z' fill='%2382224c'/%3E%3C/svg%3E") outside;
}
.elementor .elementor-element-3b8a295e li {
	break-inside: avoid;
	padding: 0 0 12px .45em;
	font-size: 1.1rem;
	line-height: 1.4;
}

/* Aside: a sand-coloured panel with a clear gold star and the Falcon drawn behind the text. */
.elementor .elementor-element-3b8a295e p.body-sm {
	position: relative;
	margin-block-start: 16px;
	padding: 28px 30px 28px 4rem;
	border: 0;
	background: var(--surface-sand, #f2eada);
	font-family: Newsreader, var(--font-heading), serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--dark-back);
}
.elementor .elementor-element-3b8a295e p.body-sm::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-inline-start: 1.5rem;
	top: 33px;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 .4 8.5 5.5 13.6 7 8.5 8.5 7 13.6 5.5 8.5.4 7 5.5 5.5Z' fill='%23ffc64b' stroke='%23b8860b' stroke-width='.7' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Falcon behind the aside text (z-index -1 inside the panel's own stacking context, so it sits under the words). */
.elementor .elementor-element-3b8a295e p.body-sm.falcon-wm .falcon-wm__art {
	z-index: -1;
	inset-inline-start: auto;
	inset-inline-end: -14px;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	width: auto;
	height: min(150%, 240px);
	aspect-ratio: 1;
	color: #c8a465;
	opacity: .45;
}
.elementor .elementor-element-3b8a295e p.body-sm.falcon-wm .falcon-wm__art .s { stroke-width: 4; }

@media (max-width: 1024px) {
	.elementor .elementor-element-3b8a295e ul { columns: 1; }
}
@media (max-width: 767px) {
	.elementor .elementor-element-3b8a295e h2 { font-size: clamp(2.9rem, 13vw, 3.6rem); }
	.elementor .elementor-element-3b8a295e p.body-lg::first-letter { font-size: 3.9em; }
	/* Stacked layout: the statement sits directly above this paragraph, so make room for the raised drop cap. */
	.elementor .elementor-element-3b8a295e .index-stack > p.body-lg:first-child { margin-block-start: 36px; }
	.elementor .elementor-element-3b8a295e p.body-sm { font-size: 1.1rem; padding: 24px 20px 24px 3.4rem; }
	.elementor .elementor-element-3b8a295e p.body-sm::before { inset-inline-start: 1.1rem; top: 29px; width: 20px; height: 20px; }
	.elementor .elementor-element-3b8a295e p.body-sm.falcon-wm .falcon-wm__art { height: min(120%, 200px); width: auto; inset-inline-end: -24px; opacity: .4; }
}
