/* ===========================================================================
   as400-fleet.css — AS/400 Growth Enablement fleet sales landing page
   ---------------------------------------------------------------------------
   Scoped styles for template-facades-as400-fleet.php. Congruent with the
   liminalarc-rb design system (assets/modern/styles.css): shared `--color`
   custom properties, "leo" / "brandon-grotesque" Typekit families, the
   `.la-container` wrapper, and the canonical .btn-orange button.

   Mirrors the site's section grammar:
     - Eyebrow  = brandon-grotesque .78rem / 700 / .18em uppercase.
     - Section H2 = leo clamp(1.85rem, 4.5vw, 2.7rem) / 500, max-width 66.67%
       (per homepage "Our Approach" .transform-section h2 / .transform-key-text).
     - Lede = leo 1.1rem / line-height 1.6 / max-width 66.67% / --text-muted.
     - Flat, border-based, typographic — NO drop shadows. "Why Us" uses the
       border-top divider row of .fa-why-card; steps use the .fa-lc-card dark
       card with a bottom-right watermark numeral (per .fa-lc-card::before).
     - The Trap list is a 2-column grid (per homepage .clients-accordion).
     - The closing CTA reuses the facade #cta-learning section verbatim.
   Section rhythm: hero(navy) · trap(light) · approach(teal) · why(white)
     · start(navy) · faq(light) · cta-learning(bright-blue).
   =========================================================================== */

/* ── Shared section chrome ─────────────────────────────────────────────────
   Consistent vertical rhythm: every body-section transition reads as the same
   total gap. Flat transitions = --flat top + --flat bottom. Wave transitions
   split that same gap across (wave-exit margin-top + wave + wave-enter top), so
   the wave "counts" as part of the spacing rather than adding to it. */
.as4-trap,
.as4-approach,
.as4-why,
.as4-faq {
	padding-block: clamp(3.5rem, 5.5vw, 5rem); /* --flat: matches the site's ~5rem section padding (#pa-expertise, #fa-why) */
}
/* Sections a wave flows INTO from above (Approach ← Trap wave, Why ← Approach
   wave): reduced top so the incoming wave supplies part of the entry space —
   wave-entered-top + wave margin-top + wave height ≈ the flat 2×5rem gap. */
.as4-approach,
.as4-why { padding-top: clamp(2.75rem, 4vw, 3.5rem); }
/* Why Us + Common Questions are both light with no divider between them, so they
   read as one continuous surface — tighten that seam. FAQ keeps a generous
   bottom into the (color-changing) CTA. */
.as4-why { padding-bottom: clamp(2.5rem, 3.5vw, 3.25rem); }
.as4-faq {
	padding-top: clamp(2rem, 3vw, 2.75rem);
	padding-bottom: clamp(4rem, 6vw, 6rem);
}

/* Light textured sections (site-standard noise-tile over --light-gray):
   Trap, Why Us / Legacy Systems, and Common Questions. */
.as4-trap,
.as4-legacy-band {
	background: linear-gradient(rgba(251, 251, 251, 0.2), rgba(251, 251, 251, 0.2)), url("psd_assets/noise-tile.png") repeat, var(--light-gray);
}
/* Why Us + Common Questions sit transparent on the shared .as4-legacy-band so the
   band's single noise surface (and the mountain over it) reads continuously. */
.as4-trap,
.as4-why,
.as4-faq { color: var(--gray); }
/* Our Approach — dark-teal band, bracketed by wave dividers (wave into it lives
   at the bottom of Trap; wave out of it lives at the bottom of Approach). */
.as4-approach {
	background-color: var(--dark-teal);
	color: hsla(0, 0%, 100%, 0.85);
}
/* Bottom padding on the wave-terminated sections is carried by the wave's
   margin-top (see wave rules), so the flat color reads before the wave. */
.as4-trap,
.as4-approach { padding-bottom: 0; }

/* Navy section (Our Approach): white heading + light subhead/lede. */
.as4-approach h2 { color: var(--white); }
.as4-approach .fa-case-intro,
.as4-approach .fa-case-intro em { color: var(--white); }

/* Light sections: dark-navy headings (per #fa-case h2 / .fa-case-intro). */
.as4-trap h2,
.as4-why h2,
.as4-why h3,
.as4-faq h2 { color: var(--dark-navy); }
.as4-why .as4-eyebrow { color: var(--dark-teal); }

/* ── Wave dividers (in-flow, full-bleed) ───────────────────────────────────
   Bracket the navy Our Approach band. The section's bottom gap lives on the
   wave's margin-top so the flat color reads first, then the wave sits flush to
   the section's bottom edge (fill = the NEXT section's color). */
.as4-wave {
	display: block;
	width: 100%;
	height: clamp(40px, 3.5vw, 56px);
	margin-bottom: -1px; /* kill any sub-pixel seam with the next section */
	vertical-align: bottom;
}
/* margin-top + wave height + the next section's reduced top ≈ the flat gap. */
.as4-trap .as4-wave,
.as4-approach .as4-wave { margin-top: clamp(3.25rem, 5vw, 4.5rem); }

/* Noise-textured wave (Approach → Why Us): the same light-noise surface as the
   section below, clipped to the wave shape via a mask so there's no flat-white
   band between the teal band and the textured section. */
.as4-wave--noise {
	background: linear-gradient(rgba(251, 251, 251, 0.2), rgba(251, 251, 251, 0.2)), url("psd_assets/noise-tile.png") repeat, var(--light-gray);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2083.3 160' preserveAspectRatio='none'%3E%3Cpath d='M1696.45,103.68c-154.83,3.96-272.75-6.6-306.69-9.85-65.95-6.33-127.83-15.12-160.12-19.71-33.49-4.76-63.63-9.43-89.46-13.64-46.5-7.57-78.99-13.63-91.6-15.92C950.11,26.7,730.63-2.81,495.57.22,370.41,1.83,200.62,13.18,0,54.41v665.62h2083.3V65.49c-149.77,25.79-281.12,35.48-386.86,38.18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2083.3 160' preserveAspectRatio='none'%3E%3Cpath d='M1696.45,103.68c-154.83,3.96-272.75-6.6-306.69-9.85-65.95-6.33-127.83-15.12-160.12-19.71-33.49-4.76-63.63-9.43-89.46-13.64-46.5-7.57-78.99-13.63-91.6-15.92C950.11,26.7,730.63-2.81,495.57.22,370.41,1.83,200.62,13.18,0,54.41v665.62h2083.3V65.49c-149.77,25.79-281.12,35.48-386.86,38.18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* ── Hero ──────────────────────────────────────────────────────────────
   Top padding clears the fixed announce bar + sticky nav (≈130px), matching
   #fa-hero / #pa-hero in rb-nav.css; without it the eyebrow collides with
   the nav. */
.as4-hero {
	background-color: var(--dark-navy);
	color: var(--white);
	padding-top: calc(5.5rem + 90px);
	padding-bottom: clamp(5rem, 7vw, 7rem); /* generous, matches the wave-transition gap into a divider */
	position: relative;
	overflow: hidden;
}
/* Right-positioned, edge-masked hero graphic over the navy — same treatment as
   the homepage #hero::before (image built to the same 1.685 aspect). */
.as4-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	--la-content-width: calc(min(100vw, 1720px) - 2 * clamp(1.5rem, 9.9vw, 9rem));
	--hero-image-w: min(calc(var(--la-content-width) * 1.52), 1178px);
	--hero-image-h: calc(var(--hero-image-w) / 1.685);
	background-image: url("/wp-content/themes/liminalarc-rb/assets/images/rebrand-images/as400-hero.webp");
	background-repeat: no-repeat;
	background-size: var(--hero-image-w) var(--hero-image-h);
	/* Anchor so the truck frame's right edge (92.3% into the composite) lands on
	   the container's right content edge — flush with the end of the "CONTACT"
	   nav item on the 12-col grid. The mesh to its right bleeds off and is faded
	   by the right side of the mask so its edge dissolves rather than hard-cutting. */
	background-position: right calc(max((100vw - 1720px)/2, 0px) + clamp(1.5rem, 9.9vw, 9rem) - .092 * var(--hero-image-w)) top 2.25rem;
	/* Two masks intersected: the photo rectangle stays fully opaque (hard edges),
	   while the mesh dissolves on the right (past the photo) and at the bottom
	   (from the photo's lower edge down to where the composite ends). The bottom
	   stop is derived from the image geometry so it tracks the photo edge exactly:
	   photo bottom = 2.25rem top offset + 83.8%·imageH  (imageH = width / 1.685). */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 10%, #000 90.5%, transparent 96.5%),
		linear-gradient(to bottom, #000 calc(2.25rem + 0.497 * var(--hero-image-w)), transparent calc(2.25rem + 0.545 * var(--hero-image-w)));
	mask-image:
		linear-gradient(to right, transparent 0%, #000 10%, #000 90.5%, transparent 96.5%),
		linear-gradient(to bottom, #000 calc(2.25rem + 0.497 * var(--hero-image-w)), transparent calc(2.25rem + 0.545 * var(--hero-image-w)));
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	pointer-events: none;
	z-index: 0;
}
.as4-hero > * { position: relative; z-index: 1; }

.as4-hero h1 {
	font-family: "leo", sans-serif;
	font-size: clamp(2.2rem, 4.4vw, 4.2rem); /* match homepage #hero h1 */
	font-weight: 500;
	line-height: 1.08;
	color: var(--white);
	margin: 0 0 1.5rem;
	max-width: 70%;
}

.as4-hero-sub {
	font-family: "leo", sans-serif;
	font-size: 1.15rem;
	line-height: 1.65;
	color: hsla(0, 0%, 100%, 0.85);
	margin: 0 0 2rem;
	max-width: 60%;
}

@media (max-width: 1100px) {
	.as4-hero { padding-top: calc(5rem + 80px); }
}

@media (max-width: 1024px) {
	.as4-hero h1,
	.as4-hero-sub { max-width: 100%; }
}

/* At ≤991 the right-side masked graphic has no room beside the copy, so — exactly
   like the homepage #hero — the hero photo becomes a full-bleed background (mask
   off) with a navy scrim (::after) over it to keep the left-aligned text legible.
   Uses the truck photo lifted out of the composite (no mesh frame). */
@media (max-width: 991px) {
	.as4-hero {
		min-height: 600px;
		isolation: isolate;
		/* Tighter than the desktop clearance — just enough to clear the sticky
		   announce bar + nav — so the headline rides up instead of floating low. */
		padding-top: calc(3rem + 58px);
		padding-bottom: clamp(3rem, 8vw, 5rem);
	}
	.as4-hero::before {
		background: url("/wp-content/themes/liminalarc-rb/assets/images/rebrand-images/as400-hero-mobile.webp") 28% 24% / cover no-repeat;
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 1;
	}
	.as4-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(90deg, rgba(6, 41, 53, 0.9) 0%, rgba(6, 41, 53, 0.55) 42%, rgba(6, 41, 53, 0.12) 78%, rgba(6, 41, 53, 0) 100%),
			linear-gradient(180deg, rgb(6, 41, 53) 0%, rgb(6, 41, 53) 5%, rgba(6, 41, 53, 0.5) 42%, rgba(6, 41, 53, 0.78) 75%, rgba(6, 41, 53, 0.97) 100%),
			linear-gradient(rgba(108, 224, 181, 0.06) 1px, transparent 1px) 24px 24px / 48px 48px,
			linear-gradient(90deg, rgba(108, 224, 181, 0.06) 1px, transparent 1px) 24px 24px / 48px 48px;
		pointer-events: none;
		z-index: 0;
	}
}

/* ── Growth Enablement variant — industry-agnostic hiker art ─────────────────
   Sibling page template-facades-as400-growth.php shares this stylesheet but
   uses its own imagery (the .as4-hero--growth modifier on its hero + the
   as400-growth-* asset files). The fleet page keeps the semi-truck imagery
   defined above; only the background image (and mobile crop position) change. */
.as4-hero.as4-hero--growth::before {
	background-image: url("/wp-content/themes/liminalarc-rb/assets/images/rebrand-images/as400-growth-hero.webp");
}
@media (max-width: 991px) {
	.as4-hero.as4-hero--growth::before {
		background: url("/wp-content/themes/liminalarc-rb/assets/images/rebrand-images/as400-growth-hero-mobile.webp") 4% 50% / cover no-repeat;
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 1;
	}
}

/* ── Eyebrow (per .fa-hero-eyebrow-label / .pa-hero-eyebrow) ────────────── */
.as4-eyebrow {
	font-family: "brandon-grotesque", sans-serif;
	font-size: 0.75rem; /* match homepage .exp-eyebrow */
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--dark-teal);
	margin: 0 0 1.25rem;
	line-height: 1;
}

.as4-eyebrow--ondark { color: var(--bright-yellow); }

/* ── Section headings + lede (per homepage "Our Approach") ─────────────── */
.as4-trap h2,
.as4-approach h2,
.as4-why h2,
.as4-faq h2 {
	font-family: "leo", sans-serif;
	font-size: clamp(1.85rem, 4.5vw, 2.7rem);
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 1.5rem;
	max-width: 66.67%;
}

/* Where an italic subhead sits directly under the title (Our Approach, Why Us),
   pull it in tight so the pair reads as one unit rather than two separated lines. */
.as4-approach h2,
.as4-why h2 { margin-bottom: 0.5rem; }

.as4-lead {
	font-family: "leo", sans-serif;
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0 0 2.5rem;
	max-width: 66.67%;
}

/* Our Approach is the only dark text-section now — soften its lede to match rb. */
.as4-approach .as4-lead { color: hsla(0, 0%, 100%, 0.82); }

@media (max-width: 991px) {
	.as4-trap h2,
	.as4-approach h2,
	.as4-why h2,
	.as4-faq h2,
	.as4-lead { max-width: 100%; }
}

/* ── CTA row + secondary arrow link ────────────────────────────────────── */
.as4-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-top: 0.5rem;
}

.as4-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: "brandon-grotesque", sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bright-green);
	text-decoration: none;
	transition: gap 0.2s ease;
}

.as4-arrow-link:hover,
.as4-arrow-link:focus-visible { gap: 1rem; color: var(--bright-green); }

.as4-arrow-link .as4-arrow { font-size: 1.1em; }

/* ── The Trap — 2-column pain list (per homepage .clients-accordion) ───── */
.as4-pain-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-auto-flow: column;
	grid-template-rows: repeat(3, auto);
	column-gap: 3rem;
	margin: 2.5rem 0;
}

.as4-pain {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1.25rem;
	align-items: center;
	padding: 1.5rem 0;
	border-top: 1.5px solid rgba(14, 77, 100, 0.18);
}

/* Close the bottom of each column (item 3 = end of col 1, item 6 = end of col 2). */
.as4-pain:nth-child(3),
.as4-pain:nth-child(6) { border-bottom: 1.5px solid rgba(14, 77, 100, 0.18); }

.as4-pain p {
	font-family: "leo", sans-serif;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--dark-navy);
	margin: 0;
}

.as4-pain-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem; /* fixed box so every glyph is optically centered on the same footprint */
	color: var(--light-green); /* #4abd92 */
	font-size: 1.5rem;
	line-height: 1;
}
/* Optical size normalization — some glyphs sit small in the em box. */
.as4-pain-icon .bi-diagram-2-fill { font-size: 1.3em; }
/* Custom filled-lightbulb SVG (filled bulb + white filament detail). */
.as4-pain-svg { display: block; width: 1.25rem; height: 1.5rem; } /* viewBox is 15×18 → keep that aspect */

/* Reframe pull-quote — mirrors the practice-area .pa-bio-quote (leo italic,
   1.5rem, line-height 1.5) but in dark-teal so it reads on the light band. */
.as4-callout {
	font-family: "leo", sans-serif;
	font-style: italic;
	font-size: clamp(1.3rem, 2.3vw, 1.5rem);
	line-height: 1.5;
	color: var(--dark-teal);
	margin: 3rem 0 0;
	max-width: none;
}
.as4-callout em { font-style: italic; }

/* On phones the full-italic pull-quote gets hard to read, so it goes roman and
   a bit smaller — only the pivot line ("We take a different approach.") stays
   italic for emphasis. */
@media (max-width: 767px) {
	.as4-callout {
		font-style: normal;
		font-size: 1.05rem;
		line-height: 1.65;
	}
}

/* Collapse to one column at 991 — the same breakpoint the Approach / Customer
   Results / FAQ grids collapse at, so the whole page goes single-column together. */
@media (max-width: 991px) {
	.as4-pain-list {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
	}
	.as4-pain:nth-child(3) { border-bottom: none; }
	.as4-pain:last-child { border-bottom: 1.5px solid rgba(14, 77, 100, 0.18); }
}

/* ── Our Approach — facade lifecycle cards (.fa-lc-card) in their native
   translucent-on-dark style: accent eyebrow + rule, white serif title, muted
   lede, and the big faded watermark numeral. Phase-1 accent = yellow (not the
   default orange), per the ERP playbook reference. ── */
.as4-approach .fa-lc-rail {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 2.5rem;
}

/* Accent order: green · blue · yellow. */
.as4-approach .fa-lc-phase-1 { --fa-lc-accent: var(--light-green); }  /* #4abd92 */
.as4-approach .fa-lc-phase-2 { --fa-lc-accent: var(--bright-blue); }  /* #3499e7 */
.as4-approach .fa-lc-phase-3 { --fa-lc-accent: var(--bright-yellow); }

/* Content-driven height — the AS/400 phase copy is brief, so drop the default
   330px floor and let the cards hug their copy (grid keeps them equal). */
.as4-approach .fa-lc-card { min-height: 0; }
/* Bigger card titles to match the reference's visual weight (base is 1.45rem). */
.as4-approach .fa-lc-card-title { font-size: 1.8rem; }
/* …but that reads chunky on a phone, so ease it back once the cards stack full-width. */
@media (max-width: 767px) {
	.as4-approach .fa-lc-card-title { font-size: 1.5rem; }
}

/* Slightly stronger watermark numeral on the teal cards. */
.as4-approach .fa-lc-card::before { opacity: 0.11; }

/* The Approach CTA follows the cards (which have no bottom margin), so it
   needs its own top margin to match the ~2rem the other CTAs get from the
   bottom margin of their preceding copy. */
.as4-approach .as4-cta-row { margin-top: 2rem; }

/* Italic subhead under the section headline (reuses facade .fa-case-intro). */
.as4-approach .fa-case-intro,
.as4-why .fa-case-intro { margin-bottom: 1.5rem; font-weight: 500; }

/* Give the CTA room below the cards (it was crowding them). */
.as4-approach .as4-cta-row { margin-top: 2.75rem; }

/* CTA styled like the practice-area bio link: navy fill, italic Leo, yellow
   arrow. Default hover is dark-teal — invisible on this teal band — so hover to
   dark-green (matches .btn-outline-light.pa-bio-link on #pa-expertise). */
.as4-approach .btn-outline-light:hover { background: var(--dark-green); color: var(--white); }

@media (max-width: 991px) {
	.as4-approach .fa-lc-rail { grid-template-columns: 1fr; }
}

/* ── Why Us — facade case-study result cards (reuses .fa-case-result) ───── */
/* "Customer Results" label above the cards (reuses .fa-case-label). Why Us is a
   light noise section here, so the label reads dark-teal (not the dark-section white). */
.as4-why .fa-case-label { color: var(--dark-teal); }
.as4-why-cards { margin-top: 0; }

/* Per Jess: give the Why Us heading + subhead more presence than the shared
   section scale (this page only — intentionally larger than the matching
   headings elsewhere). */
.as4-why h2 { font-size: clamp(2.2rem, 5.2vw, 3.3rem); }
.as4-why .fa-case-intro { font-size: clamp(1.35rem, 2.8vw, 1.9rem); }

/* Mountain rising from the bottom of Why Us / Customer Results — same treatment
   as the practice page's .pa-mountain-band: the "Why It Works" range scaled up and
   pushed below the fold so only the peaks show, luminosity-blended at low opacity. */
.as4-legacy-band { position: relative; isolation: isolate; }
.as4-legacy-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("psd_assets/facades/Why%20it%20Works%20Mountain.webp") no-repeat 45% -190px/205% auto;
	mix-blend-mode: luminosity;
	opacity: 0.15;
	/* The range crests near the headline and its slopes carry down through Common
	   Questions, dissolving over a long, gradual fade across the lower half. */
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
	mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
	pointer-events: none;
	z-index: 0;
}
@media (max-width: 991px) {
	.as4-legacy-band::before { background: url("psd_assets/facades/Why%20it%20Works%20Mountain.webp") no-repeat 35% -2%/280% auto; }
}
@media (max-width: 767px) {
	.as4-legacy-band::before { background: url("psd_assets/facades/Why%20it%20Works%20Mountain.webp") no-repeat 42% -3%/380% auto; }
}
.as4-legacy-band > * { position: relative; z-index: 1; }
/* "Customer Results" divider line (the .fa-case-label::after rule) — dev's default
   #e3e7e9 is invisible on this ground, so give it a visible teal-gray. */
.as4-why .fa-case-label::after { background: rgba(14, 77, 100, 0.2); }

.as4-why .fa-case-result { padding-bottom: 2.25rem; }

.as4-why .fa-case-result p {
	font-family: "leo", sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--gray);
}

.as4-why .fa-case-result strong {
	color: var(--dark-navy);
	font-weight: 500;
}

/* ── FAQ — table styled after the facade "Why It Works" list: question |
   answer columns with a divider and border-top rows, no checkmark bullets. ── */
/* Optically align the heading's round "C" with the questions' flat-stemmed
   letters below (the glyph boxes share the gutter; the C just insets ~2px). */
.as4-faq h2 { margin-left: -0.05em; }

.as4-faq-list { position: relative; margin-top: 2.5rem; }

/* One continuous vertical rule down the whole list at the question|answer
   boundary (rather than a separate segment per row). */
.as4-faq-list::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(34ch + 3rem);
	width: 1.5px;
	background: rgba(14, 77, 100, 0.2);
}

.as4-faq-item {
	display: grid;
	grid-template-columns: 34ch 1fr; /* tight enough to hug the questions; the answer column takes the rest. Fixed so the rule aligns. */
	column-gap: 3rem;
	align-items: start;
	padding: 1.75rem 0;
	border-top: 1.5px solid rgba(14, 77, 100, 0.2);
}

.as4-faq-item:last-child { border-bottom: 1.5px solid rgba(14, 77, 100, 0.2); }

/* Question = the .fa-why-card h3 title (leo 500, 1.45rem), dark-teal for hierarchy
   above the darker answer text. */
.as4-faq-item .as4-q {
	font-family: "leo", sans-serif;
	font-size: 1.45rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--dark-teal);
	margin: 0;
}

/* Answer = the .fa-why-card p description: italic leo, muted. The vertical rule
   is the single continuous line on .as4-faq-list (no per-row border). */
.as4-faq-item .as4-a {
	font-family: "leo", serif;
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin: 0;
	padding-left: 2.5rem;
	padding-right: 3rem; /* keep answers off the right edge (per .fa-why-card p) */
}

/* Collapse to one column at 991, in step with the rest of the page. */
@media (max-width: 991px) {
	.as4-faq-list::before { display: none; } /* no vertical rule when stacked */
	.as4-faq-item { grid-template-columns: 1fr; row-gap: 0.6rem; }
	.as4-faq-item .as4-a { padding-left: 0; padding-right: 0; }
}

/* ── Closing CTA — reuses the facade #cta-learning section. Only the extra
   supporting paragraph needs styling (facades don't carry one). ────────── */
#cta-learning .as4-cta-body {
	font-family: "leo", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
	color: hsla(0, 0%, 100%, 0.92);
	margin: 0 0 2rem;
	max-width: 46ch;
}

/* ── Booking modal ─────────────────────────────────────────────────────── */
.as4-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 1rem;
	overflow-y: auto;
}

.as4-modal[hidden] { display: none; }

body.as4-modal-lock { overflow: hidden; }

.as4-modal-scrim {
	position: fixed;
	inset: 0;
	background: rgba(6, 41, 53, 0.72);
}

.as4-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	margin: auto;
	background: var(--white);
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(6, 41, 53, 0.35);
	overflow: hidden;
	animation: as4-modal-in 0.2s ease;
}

@keyframes as4-modal-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

.as4-modal-head {
	background: var(--dark-teal);
	color: var(--white);
	padding: 1.75rem 2rem;
}

.as4-modal-head .as4-eyebrow {
	color: var(--bright-yellow);
	margin: 0 0 0.5rem;
}

.as4-modal-head h2 {
	font-family: "leo", sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.2;
	color: var(--white);
	margin: 0;
	max-width: none;
}

.as4-modal-close {
	position: absolute;
	top: 0.85rem;
	right: 1rem;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.9rem;
	line-height: 1;
	color: var(--white);
	background: transparent;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.as4-modal-close:hover,
.as4-modal-close:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.12);
}

.as4-modal-body {
	padding: 1.75rem 2rem 2rem;
}

/* ── Gravity Form inside the modal ─────────────────────────────────────── */
.as4-modal .gform_wrapper { margin: 0; }
.as4-modal .gform_heading,
.as4-modal .gform_required_legend { display: none; }
.as4-modal .gfield--type-hidden { display: none; }

.as4-modal .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}

.as4-modal .gfield_label {
	display: block;
	font-family: "brandon-grotesque", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dark-teal);
	margin-bottom: 0.4rem;
}

/* Required marker: our light-green (#4abd92), with a space before it so it
   reads "Label (Required)" rather than butting against the label text. */
.as4-modal .gfield_required { color: var(--light-green); }
.as4-modal .gfield_required::before { content: "\00a0"; }

.as4-modal .ginput_container input[type="text"],
.as4-modal .ginput_container input[type="email"],
.as4-modal .ginput_container input[type="tel"],
.as4-modal .ginput_container input[type="url"],
.as4-modal .ginput_container input[type="number"],
.as4-modal .ginput_container textarea,
.as4-modal .ginput_container select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(14, 77, 100, 0.25);
	border-radius: 5px;
	font-family: "leo", sans-serif;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--dark-navy);
	background: var(--white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.as4-modal .ginput_container textarea { min-height: 6.5rem; resize: vertical; }

.as4-modal .ginput_container input:focus,
.as4-modal .ginput_container textarea:focus,
.as4-modal .ginput_container select:focus {
	outline: none;
	border-color: var(--dark-teal);
	box-shadow: 0 0 0 3px rgba(14, 77, 100, 0.12);
}

.as4-modal .gfield_description {
	font-family: "leo", sans-serif;
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-top: 0.35rem;
}

.as4-modal .gform_footer {
	margin: 1.5rem 0 0;
	padding: 0;
}

/* Submit button — matches the site's .btn-orange. */
.as4-modal .gform_footer .gform_button,
.as4-modal .gform_button[type="submit"] {
	display: inline-block;
	background: var(--bright-orange);
	color: var(--white);
	font-family: "brandon-grotesque", sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 1rem 2.25rem;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.as4-modal .gform_button:hover,
.as4-modal .gform_button:focus-visible { opacity: 0.85; }

/* Validation */
.as4-modal .gfield_error input,
.as4-modal .gfield_error textarea,
.as4-modal .gfield_error select { border-color: var(--bright-orange); }

.as4-modal .gfield_validation_message,
.as4-modal .validation_message {
	font-family: "leo", sans-serif;
	font-size: 0.85rem;
	color: var(--bright-orange);
	margin-top: 0.35rem;
}

.as4-modal .gform_validation_errors {
	border: 1px solid rgba(244, 96, 54, 0.4);
	background: rgba(244, 96, 54, 0.06);
	border-radius: 6px;
	padding: 0.85rem 1rem;
	margin-bottom: 1.25rem;
}

.as4-modal .gform_confirmation_message {
	font-family: "leo", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--dark-navy);
}

/* Normalize control height — GF's gravity-theme renders the Name field's
   first/last sub-inputs much taller than the plain inputs. Higher specificity
   (extra .gform_wrapper) + box-sizing/height reset brings them in line.
   Excludes checkbox/radio so the consent box isn't bloated. */
.as4-modal .gform_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]),
.as4-modal .gform_wrapper .ginput_container select {
	box-sizing: border-box;
	padding: 0.6rem 0.85rem;
	min-height: 0;
	height: auto;
	line-height: 1.4;
}

/* Name field: put the First / Last sub-labels above their inputs, small. */
.as4-modal .ginput_container_name .name_first,
.as4-modal .ginput_container_name .name_last {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.3rem;
}

.as4-modal .ginput_container_name .gform-field-label--type-sub {
	margin: 0;
	font-family: "leo", sans-serif;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--text-muted);
}

/* Consent: checkbox and its message on one row. */
.as4-modal .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

.as4-modal .ginput_container_consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 0.25rem;
}

.as4-modal .ginput_container_consent label { margin: 0; }

@media (max-width: 600px) {
	.as4-modal { padding: 0; }
	.as4-modal-dialog { max-width: none; min-height: 100%; border-radius: 0; }
}