/* ==========================================================================
   Fire Safety Compliance — Online Training
   Brand: EB Garamond headings, Inter body, orange #F15D36.
   Matches the site hero (full-bleed photo + dark overlay + orange pill CTA).
   ========================================================================== */

/* Tokens live on :root, not on .fsc-course. The section pages render their
   shortcodes inside Elementor page content, where there is no .fsc-course
   ancestor, so scoping them to that class left every var() unresolved and
   silently dropped the container width, fonts and brand colours. Declaring
   custom properties applies no styling by itself, so this stays safe to load
   site wide. */
:root {
	--fsc-orange: #F15D36;
	--fsc-orange-dk: #d8461f;
	--fsc-ink: #2C2C2C;
	--fsc-black: #111111;
	--fsc-grey: #5E5E5E;
	--fsc-border: #E4E4E4;
	--fsc-soft: #FBFBFB;
	--fsc-red-soft: #FEF7F5;
	--fsc-serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--fsc-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--fsc-radius: 14px;

	/* The site grid. Elementor containers here run full width with 6% side
	   padding and cap their inner content at 1560px. Mirroring both keeps every
	   fsc block on the same vertical lines as the header, footer and the rest
	   of the site, at every viewport. */
	--fsc-max: 1560px;
	--fsc-gutter: 6vw;

	/* Height of the site's fixed header, used by anything that sticks. */
	--fsc-header-h: 136px;

	/* Space under a section heading. 0.7rem was far too tight under a 2.4rem
	   serif when the gap above the heading is 3.4rem. */
	--fsc-h2-gap: clamp(1.15rem, 2vw, 1.75rem);
}

/* The site's own containers drop to roughly 5% below Elementor's 767px mobile
   breakpoint, so follow them rather than holding 6% and sitting proud of every
   other block on the page. */
@media (max-width: 767px) {
	:root { --fsc-gutter: 5vw; }
}

.fsc-course {
	font-family: var(--fsc-sans);
	color: var(--fsc-ink);
	line-height: 1.65;
	overflow-x: clip;
}

.fsc-course *,
.fsc-course *::before,
.fsc-course *::after { box-sizing: border-box; }

/* One shared container geometry for every fsc block, on the course template
   and on the Elementor section pages alike. */
.fsc-wrap,
.fsc-hero__inner,
.fsc-secthero__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--fsc-max) + 2 * var(--fsc-gutter));
	margin-inline: auto;
	padding-inline: var(--fsc-gutter);
}

.fsc-course h2 {
	font-family: var(--fsc-serif);
	color: var(--fsc-orange);
	font-weight: 600;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 var(--fsc-h2-gap);
	text-wrap: balance;
}

/* A standfirst is part of the heading unit, so it stays tight underneath and
   the generous gap moves below it instead. */
.fsc-course h2 + .fsc-section__sub { margin-top: calc(0.6rem - var(--fsc-h2-gap)); }

/* ---------- HERO ---------- */
.fsc-hero {
	position: relative;
	background: #1c1c1c;
	color: #fff;
	isolation: isolate;
}
.fsc-hero.has-img::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--fsc-hero-img);
	background-size: cover;
	background-position: center;
	z-index: -2;
}
.fsc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(15,12,10,0.86) 0%, rgba(20,15,12,0.72) 42%, rgba(20,15,12,0.42) 100%);
	z-index: -1;
}
.fsc-hero__inner {
	/* Inline padding and max-width come from the shared container rule above. */
	padding-block: clamp(1rem, 3vw, 1.6rem) clamp(2.4rem, 5vw, 3.6rem);
}
.fsc-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	font-size: 0.82rem;
	padding: 1.1rem 0 1.8rem;
	color: rgba(255,255,255,0.72);
}
.fsc-crumbs a { color: rgba(255,255,255,0.72); text-decoration: none; }
.fsc-crumbs a:hover { color: #fff; }
.fsc-crumbs span { opacity: 0.5; }

.fsc-hero__grid { max-width: 720px; }
.fsc-eyebrow {
	font-family: var(--fsc-sans);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--fsc-orange);
	margin: 0 0 0.9rem;
}
.fsc-hero__title {
	font-family: var(--fsc-serif);
	font-weight: 600;
	color: #fff;
	font-size: clamp(2.4rem, 6vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	text-wrap: balance;
}
.fsc-hero__promise {
	font-size: clamp(1.05rem, 2vw, 1.28rem);
	color: rgba(255,255,255,0.9);
	max-width: 44ch;
	margin: 0 0 1.8rem;
}

/* facts strip */
.fsc-facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.9rem;
	padding: 0;
}
.fsc-facts li {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.6rem 0.95rem;
	background: rgba(255,255,255,0.09);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 10px;
	backdrop-filter: blur(4px);
}
.fsc-facts__k {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,0.65);
}
.fsc-facts__v { font-size: 0.95rem; font-weight: 600; color: #fff; }

.fsc-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 1.6rem;
}
.fsc-price { display: flex; flex-direction: column; }
.fsc-price__amount { font-family: var(--fsc-serif); font-size: 2.1rem; font-weight: 600; color: #fff; line-height: 1; }
.fsc-price__vat { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 0.2rem; }

/* ---------- BUTTONS ---------- */
.fsc-btns { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.fsc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--fsc-sans);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1;
	padding: 0.95rem 1.7rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.fsc-btn span { transition: transform 0.18s cubic-bezier(0.22,1,0.36,1); }
.fsc-btn:hover span { transform: translateX(3px); }
/* Every button colour is doubled up on its own class. Elementor's global link
   rule is `.elementor-kit-6 a` (specificity 0,1,1), which beats a single class,
   so a plain `.fsc-btn--ghost` lost its colour and inherited Elementor's dark
   link ink instead. Two classes (0,2,0) win without resorting to !important. */
.fsc-btn.fsc-btn--primary {
	background: var(--fsc-orange);
	color: #fff;
	box-shadow: 0 10px 24px -12px rgba(241,93,54,0.85);
}
.fsc-btn.fsc-btn--primary:hover { background: var(--fsc-orange-dk); transform: translateY(-2px); color: #fff; }

/* Ghost on dark: the two heroes and the closing CTA band. The fill cannot be
   near transparent or the label vanishes wherever the photograph is bright. */
.fsc-btn.fsc-btn--ghost {
	background: rgba(12,10,9,0.34);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	border-color: rgba(255,255,255,0.72);
}
.fsc-btn.fsc-btn--ghost:hover { background: #fff; color: var(--fsc-ink); border-color: #fff; transform: translateY(-2px); }

/* Ghost on light: the sticky price card. Never gets the photo scrim, which
   would render as a grey slab on white. */
.fsc-btn.fsc-btn--ghost-dark { background: transparent; color: var(--fsc-ink); border-color: rgba(44,44,44,0.38); }
.fsc-btn.fsc-btn--ghost-dark:hover { background: var(--fsc-ink); color: #fff; border-color: var(--fsc-ink); transform: translateY(-2px); }
.fsc-btn--block { width: 100%; justify-content: center; }

/* ---------- APPROVAL STRIP ---------- */
.fsc-approvals { background: var(--fsc-black); color: #fff; }
/* flex-start, not center: when the pills wrap to a second row the label must stay
   aligned to the first row rather than drifting to the middle of the whole block. */
.fsc-approvals .fsc-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.8rem 1.4rem; padding-block: 1rem; }
/* 0.6 white on the near black band left this small tracked label at roughly
   3.5:1, which read as almost invisible.
   The padding and transparent border mirror the pill box exactly, so the label
   text sits on the same line as the text inside the pills. */
.fsc-approvals__lead {
	margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.82);
	padding: 0.35rem 0; border: 1px solid transparent;
}
.fsc-approvals__list { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 0.5rem; margin: 0; padding: 0; }
.fsc-approvals__list li {
	font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
	padding: 0.35rem 0.85rem; border: 1px solid rgba(255,255,255,0.28); border-radius: 999px;
}

/* ---------- LAYOUT ---------- */
.fsc-layout {
	display: grid;
	grid-template-columns: minmax(0,1fr) 340px;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	padding-block: clamp(2.6rem, 6vw, 4.5rem);
}
.fsc-section { margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.fsc-section:last-child { margin-bottom: 0; }
.fsc-section__sub { color: var(--fsc-grey); margin: 0 0 1.3rem; max-width: 65ch; }
.fsc-prose { max-width: 68ch; }
.fsc-prose p { margin: 0 0 1rem; }
.fsc-prose p:last-child { margin-bottom: 0; }

/* tick lists */
.fsc-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.fsc-ticks--two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.7rem 1.6rem; }
.fsc-ticks li { position: relative; padding-left: 2rem; }
.fsc-ticks li::before {
	content: "";
	position: absolute; left: 0; top: 0.15em;
	width: 1.25rem; height: 1.25rem; border-radius: 999px;
	background: var(--fsc-red-soft);
	border: 1.5px solid var(--fsc-orange);
}
.fsc-ticks li::after {
	content: "";
	position: absolute; left: 0.42rem; top: 0.38em;
	width: 0.32rem; height: 0.6rem;
	border: solid var(--fsc-orange); border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* modules */
.fsc-modules { list-style: none; counter-reset: none; margin: 0; padding: 0; border-top: 1px solid var(--fsc-border); }
.fsc-modules li {
	display: flex; align-items: center; gap: 1rem;
	padding: 0.85rem 0.2rem;
	border-bottom: 1px solid var(--fsc-border);
}
.fsc-modules__n { font-family: var(--fsc-serif); font-size: 1.05rem; color: var(--fsc-orange); font-weight: 600; min-width: 1.8rem; }
.fsc-modules__name { flex: 1; font-weight: 500; }
.fsc-modules__pass {
	font-size: 0.74rem; font-weight: 600; color: var(--fsc-orange);
	background: var(--fsc-red-soft); padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap;
}

/* steps */
.fsc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); }
.fsc-steps li { display: flex; gap: 0.9rem; padding: 1.2rem; background: var(--fsc-soft); border: 1px solid var(--fsc-border); border-radius: var(--fsc-radius); }
.fsc-steps__n {
	flex: none; width: 2.2rem; height: 2.2rem; border-radius: 999px;
	background: var(--fsc-orange); color: #fff; font-weight: 700;
	display: grid; place-items: center; font-size: 1rem;
}
.fsc-steps li strong { display: block; margin-bottom: 0.2rem; font-size: 1.02rem; }
.fsc-steps li p { margin: 0; font-size: 0.9rem; color: var(--fsc-grey); }

/* FAQs */
.fsc-faqs { border-top: 1px solid var(--fsc-border); }
.fsc-faq { border-bottom: 1px solid var(--fsc-border); }
.fsc-faq summary {
	cursor: pointer; list-style: none;
	padding: 1.05rem 2.4rem 1.05rem 0; position: relative;
	font-weight: 600; font-size: 1.05rem; color: var(--fsc-ink);
}
.fsc-faq summary::-webkit-details-marker { display: none; }
.fsc-faq summary::after {
	content: "+"; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; color: var(--fsc-orange); font-weight: 400; transition: transform 0.2s ease;
}
.fsc-faq[open] summary::after { content: "\2013"; }
.fsc-faq__a { padding: 0 0 1.1rem; color: var(--fsc-grey); max-width: 68ch; }
.fsc-faq__a p { margin: 0 0 0.7rem; }

/* ---------- ASIDE ---------- */
/* The site header is position:fixed and 136px tall on desktop, so a 100px
   offset parked the price card underneath it. Clear the header, plus air. */
.fsc-aside { position: sticky; top: calc(var(--fsc-header-h) + 1.25rem); display: grid; gap: 1.2rem; }
.fsc-card {
	border: 1px solid var(--fsc-border); border-radius: var(--fsc-radius);
	padding: 1.5rem; background: #fff; box-shadow: 0 18px 40px -30px rgba(0,0,0,0.4);
}
.fsc-card__price { font-family: var(--fsc-serif); font-size: 2.3rem; font-weight: 600; color: var(--fsc-ink); margin: 0; line-height: 1; display: flex; align-items: baseline; gap: 0.5rem; }
.fsc-card__price span { font-family: var(--fsc-sans); font-size: 0.78rem; font-weight: 500; color: var(--fsc-grey); text-transform: uppercase; letter-spacing: 0.08em; }
.fsc-card__inc { margin: 0.3rem 0 1.2rem; font-size: 0.85rem; color: var(--fsc-grey); }
.fsc-card .fsc-btn { margin-bottom: 0.6rem; }
.fsc-card__facts { list-style: none; margin: 1.1rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--fsc-border); display: grid; gap: 0.55rem; font-size: 0.88rem; }
.fsc-card__facts strong { color: var(--fsc-ink); font-weight: 600; }
.fsc-card__facts li { color: var(--fsc-grey); }
.fsc-team { padding: 1.3rem 1.5rem; background: var(--fsc-red-soft); border-radius: var(--fsc-radius); }
.fsc-team p { margin: 0 0 0.5rem; font-size: 0.92rem; color: var(--fsc-ink); }
.fsc-team a { color: var(--fsc-orange); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.fsc-team a:hover { text-decoration: underline; }

/* ---------- COMPLIANCE ---------- */
.fsc-compliance { background: var(--fsc-soft); border-top: 1px solid var(--fsc-border); padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.fsc-compliance h2 { color: var(--fsc-ink); font-size: clamp(1.4rem,2.6vw,1.9rem); margin-bottom: 1.2rem; }
/* Two columns. At the 1560px wrap a single column ran to roughly 160 characters
   a line, which is more than twice a comfortable measure. */
.fsc-compliance__box {
	background: #fff; border: 1px solid var(--fsc-border); border-radius: var(--fsc-radius); padding: clamp(1.3rem, 3vw, 2rem);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.8rem); align-items: start;
}
/* Two classes, not one: the Elementor kit's h3 rule wins against a single class
   and turns this back into a large serif heading. */
.fsc-compliance__box .fsc-compliance__subhead {
	margin: 0 0 1rem; font-family: var(--fsc-sans, inherit); font-size: 0.78rem; line-height: 1.4;
	text-transform: uppercase; letter-spacing: 0.12em; color: var(--fsc-grey); font-weight: 600;
}
.fsc-compliance__box p { margin: 0 0 0.9rem; font-size: 0.92rem; color: var(--fsc-grey); max-width: 62ch; }
.fsc-compliance__box p:last-child { margin-bottom: 0; }
.fsc-compliance__warn { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.fsc-compliance__warn li { position: relative; padding-left: 1.6rem; font-size: 0.9rem; color: var(--fsc-ink); max-width: 62ch; }
.fsc-compliance__link { margin: 1.2rem 0 0; font-size: 0.9rem; }
.fsc-compliance__link a { color: var(--fsc-orange); font-weight: 600; }

/* Divider follows the layout: a rule between the columns on desktop, above the
   second block once they stack. */
@media (min-width: 901px) {
	.fsc-compliance__terms { border-left: 1px dashed var(--fsc-border); padding-left: clamp(1.4rem, 3vw, 2.8rem); }
}
@media (max-width: 900px) {
	.fsc-compliance__box { grid-template-columns: 1fr; gap: 1.4rem; }
	.fsc-compliance__terms { border-top: 1px dashed var(--fsc-border); padding-top: 1.4rem; }
}
.fsc-compliance__warn li::before { content: "!"; position: absolute; left: 0; top: 0; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--fsc-orange); color: #fff; font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; }

/* ---------- RELATED ---------- */
.fsc-related { padding-block: clamp(2.6rem, 6vw, 4rem); }
.fsc-related h2 { margin-bottom: 1.6rem; }
.fsc-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 1.2rem; }
.fsc-rcard {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	border: 1px solid var(--fsc-border); border-radius: var(--fsc-radius); overflow: hidden; background: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fsc-rcard:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -28px rgba(0,0,0,0.45); }
.fsc-rcard__img { aspect-ratio: 16/10; background: var(--fsc-red-soft) var(--fsc-rimg) center/cover no-repeat; }
.fsc-rcard__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.fsc-rcard__cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fsc-orange); font-weight: 600; }
.fsc-rcard__title { font-family: var(--fsc-serif); font-size: 1.25rem; font-weight: 600; color: var(--fsc-ink); line-height: 1.15; }
.fsc-rcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 0.6rem; }
.fsc-rcard__price { font-weight: 700; color: var(--fsc-ink); }
.fsc-rcard__go { color: var(--fsc-orange); font-weight: 600; font-size: 0.88rem; }

/* ---------- END CTA ---------- */
/* Closing CTA, deliberately light. The site footer now opens with its own dark
   CTA band, and this sitting directly above it produced two black rows back to
   back reading as one heavy slab with two competing asks. A warm panel separates
   them, and keeps the course specific buy action that the generic footer CTA
   does not replace (it matters most on mobile, where the price card is no longer
   sticky). Heading colour is inherited from .fsc-course h2. */
.fsc-endcta {
	background: var(--fsc-red-soft);
	border-top: 1px solid var(--fsc-border);
	color: var(--fsc-ink);
}
.fsc-endcta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; padding-block: clamp(2.4rem, 5vw, 3.4rem); }
.fsc-endcta h2 { margin-bottom: 0.4rem; }
.fsc-endcta p { margin: 0; color: var(--fsc-grey); max-width: 46ch; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
	.fsc-layout { grid-template-columns: 1fr; }
	.fsc-aside { position: static; order: 2; }
}
@media (max-width: 560px) {
	.fsc-facts li { flex: 1 1 calc(50% - 0.6rem); }
	.fsc-hero__cta { align-items: flex-start; flex-direction: column; }
	.fsc-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.fsc-course *, .fsc-course *::before, .fsc-course *::after { transition: none !important; }
	.fsc-btn:hover, .fsc-rcard:hover { transform: none; }
}

/* ==========================================================================
   Section landing pages + course grid + package (namespaced, safe globally)
   ========================================================================== */
/* Scrollbar aware full bleed width. Plain 100vw includes the scrollbar, which
   pushed this hero 7px wider than the document and shifted its text 6px left of
   every other element on the page. Measuring the scrollbar once on body keeps
   the breakout exactly viewport wide and on the site grid. */
body { --fsc-sbw: calc(100vw - 100%); --fsc-bleed: calc(100vw - var(--fsc-sbw, 0px)); }

.fsc-secthero {
	position: relative;
	width: var(--fsc-bleed, 100vw);
	margin-left: calc(50% - var(--fsc-bleed, 100vw) / 2);
	color: #fff;
	background: #1c1c1c;
	isolation: isolate;
	overflow: hidden;
}
.fsc-secthero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: var(--fsc-sh-img); background-size: cover; background-position: center;
}
.fsc-secthero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, rgba(15,12,10,0.85) 0%, rgba(20,15,12,0.68) 45%, rgba(20,15,12,0.42) 100%);
}
.fsc-secthero__inner {
	/* Inline padding and max-width come from the shared container rule, so the
	   hero text starts on the same line as the header logo and page content. */
	padding-block: clamp(3.4rem, 9vw, 6rem);
	font-family: var(--fsc-sans);
}
.fsc-secthero__eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; font-weight: 600; color: var(--fsc-orange); margin: 0 0 0.85rem; }
.fsc-secthero__title { font-family: var(--fsc-serif); font-weight: 600; color: #fff; font-size: clamp(2.5rem, 6vw, 4.2rem); line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 1.15rem; max-width: 16ch; text-wrap: balance; }
/* Held to a similar measure as the title so the eyebrow, headline and standfirst
   read as one column against the photograph rather than a stepped ragged block. */
.fsc-secthero__sub { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.55; color: rgba(255,255,255,0.92); max-width: 46ch; margin: 0 0 2rem; text-wrap: pretty; }
.fsc-secthero .fsc-btns { font-family: "Inter", sans-serif; }
.fsc-secthero .fsc-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.98rem; padding: 0.95rem 1.7rem; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.fsc-secthero .fsc-btn--primary { background: #F15D36; color: #fff; }
.fsc-secthero .fsc-btn--primary:hover { background: #d8461f; transform: translateY(-2px); }
.fsc-secthero .fsc-btn--ghost { background: rgba(12,10,9,0.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; border-color: rgba(255,255,255,0.72); }
.fsc-secthero .fsc-btn--ghost:hover { background: #fff; color: var(--fsc-ink); border-color: #fff; }

/* ==========================================================================
   Section page headings.
   These render inside Elementor page content, outside .fsc-course, so they need
   their own rule. Previously they carried inline styles in the page content,
   which meant they could not be restyled and drifted from the course pages
   (the package heading was rendering black instead of brand orange).
   ========================================================================== */
.fsc-sec { padding-top: clamp(2.6rem, 5vw, 4rem); }
.fsc-sec--last { padding-bottom: clamp(2.6rem, 5vw, 4rem); }

/* Two classes deep on purpose. Elementor's kit styles headings and paragraphs
   with `.elementor-kit-6 h2` / `p` (specificity 0,1,1), which beats a single
   class, so a plain `.fsc-sec__title` lost its colour and rendered black. */
.fsc-sec .fsc-sec__title,
.fsc-pkg .fsc-pkg__body h2 {
	font-family: var(--fsc-serif);
	color: var(--fsc-orange);
	font-weight: 600;
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 var(--fsc-h2-gap);
	text-wrap: balance;
}
/* Standfirsts belong to their heading, so they sit tight underneath. */
.fsc-sec .fsc-sec__title + .fsc-sec__intro,
.fsc-pkg .fsc-pkg__body h2 + .fsc-section__sub {
	margin-top: calc(0.6rem - var(--fsc-h2-gap));
}
.fsc-sec .fsc-sec__intro {
	color: var(--fsc-grey);
	max-width: 62ch;
	margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}

/* course grid */
.fsc-grid-wrap { --fsc-orange:#F15D36; --fsc-ink:#2C2C2C; --fsc-grey:#5E5E5E; --fsc-border:#E4E4E4; --fsc-red-soft:#FEF7F5; font-family:"Inter",sans-serif; color: var(--fsc-ink); }
.fsc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.4rem; }
.fsc-gcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--fsc-border); border-radius: 14px; overflow: hidden; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.fsc-gcard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(0,0,0,0.45); }
.fsc-gcard__img { aspect-ratio: 16/10; background: var(--fsc-red-soft) var(--fsc-gimg) center/cover no-repeat; position: relative; }
.fsc-gcard__badge { position: absolute; top: 0.7rem; left: 0.7rem; background: rgba(0,0,0,0.72); color:#fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.28rem 0.7rem; border-radius: 999px; }
.fsc-gcard__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.fsc-gcard__title { font-family:"EB Garamond",Georgia,serif; font-size: 1.4rem; font-weight: 600; line-height: 1.12; color: var(--fsc-ink); }
.fsc-gcard__desc { font-size: 0.9rem; color: var(--fsc-grey); line-height: 1.5; }
.fsc-gcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 0.7rem; border-top: 1px solid var(--fsc-border); }
.fsc-gcard__price { font-weight: 700; color: var(--fsc-ink); font-size: 1.02rem; }
.fsc-gcard__price small { font-weight: 500; color: var(--fsc-grey); font-size: 0.72rem; }
.fsc-gcard__go { color: var(--fsc-orange); font-weight: 600; font-size: 0.88rem; }
.fsc-grid-empty { padding: 2rem; text-align: center; color: #5E5E5E; border: 1px dashed #E4E4E4; border-radius: 14px; }

/* package deal */
.fsc-pkg { --fsc-orange:#F15D36; --fsc-ink:#2C2C2C; --fsc-grey:#5E5E5E; --fsc-border:#E4E4E4; --fsc-red-soft:#FEF7F5; --fsc-soft:#FBFBFB; font-family:"Inter",sans-serif; color: var(--fsc-ink); }
.fsc-pkg__grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: clamp(1.6rem,4vw,3rem); align-items: start; }
.fsc-pkg__intro { margin-bottom: clamp(2rem, 4vw, 3rem); }
.fsc-pkg__second { margin-top: 0.6rem; }
.fsc-pkg__list { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px solid var(--fsc-border); }
.fsc-pkg__list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--fsc-border); }
.fsc-pkg__list .n { font-weight: 500; }
.fsc-pkg__list .n span { display: block; font-size: 0.82rem; color: var(--fsc-grey); font-weight: 400; }
.fsc-pkg__list .p { color: var(--fsc-grey); font-size: 0.9rem; white-space: nowrap; }
.fsc-pkg__card { border: 1px solid var(--fsc-border); border-radius: 14px; padding: 1.6rem; background: #fff; box-shadow: 0 18px 40px -30px rgba(0,0,0,0.4); position: sticky; top: 100px; }
.fsc-pkg__save { display: inline-block; background: var(--fsc-red-soft); color: var(--fsc-orange); font-weight: 700; font-size: 0.82rem; padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 0.9rem; }
.fsc-pkg__was { color: var(--fsc-grey); text-decoration: line-through; font-size: 1rem; }
.fsc-pkg__now { font-family:"EB Garamond",Georgia,serif; font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--fsc-ink); margin: 0.2rem 0; }
.fsc-pkg__vat { font-size: 0.85rem; color: var(--fsc-grey); margin-bottom: 1.1rem; }
@media (max-width: 820px) { .fsc-pkg__grid { grid-template-columns: 1fr; } .fsc-pkg__card { position: static; } }