/* Section rhythm.
 *
 * Nine section roots each set their own vertical padding: 4.5rem twice,
 * clamp(4rem, 7vw, 6.5rem) twice, clamp(4rem, 6.5vw, 6rem), clamp(2.5rem, 5vw,
 * 4.5rem), 2rem, and a two-value clamp on the course-application copy block.
 *
 * Unlike the hero numbers, these are not all drift. Two genuinely different
 * intents are mixed in: full sections that carry a heading and a grid, and
 * compact ones -- the contact map, the application copy block -- that sit tight
 * against what precedes them. The token layer already has a name for each.
 *
 * Full sections take --omega-section-y, compact ones --omega-section-y-compact.
 * Which is which is a judgement, so each is listed rather than pattern-matched.
 *
 * The list has to name every page-level section root, because a root that is not
 * on it does not fall back to nothing -- it falls back to the frozen legacy rule
 * at style.css:18576, which pads every <section> element 3.5rem/2.8rem. That is
 * silent: the section still looks padded, just on the old fixed numbers, so a
 * root left off this list drifts away from the rest of the site without ever
 * looking broken. Add new page section roots here when you create them.
 *
 * Roots deliberately left off, because they set their own vertical padding for a
 * reason: .omega-contact-main-section (2rem top, 0 bottom, so the form card meets
 * the block below it), .omega-careers-final-section and .omega-contact-map-section
 * (compact), .omega-clients-logos-section and the two Google reviews sections
 * (already on the token in their own component styles).
 *
 * .omega-sitemap-section is left alone: its padding is all four sides, not
 * vertical rhythm, so it is a different property doing a different job.
 *
 * .omega-section used to shrink to a flat 4rem below 992px and 3rem below 768px,
 * which its five sibling roots never did -- the same section was tighter on a
 * tablet than the page next to it. The clamp already lands between those two
 * numbers at both widths, so the overrides are gone and every root on the list
 * now shares one curve. */
.omega-section,
.omega-about-section,
.omega-adult-group-section,
.omega-adult-individual-section,
.omega-adult-language-section,
.omega-adult-language-final-section,
.omega-adults-section,
.omega-certificate-section,
.omega-certificate-language-section,
.omega-child-group-section,
.omega-child-individual-section,
.omega-child-language-section,
.omega-children-section,
.omega-clients-audience-section,
.omega-clients-partnerships-section,
.omega-contact-faq-section,
.omega-contact-final-section,
.omega-contact-topics-section,
.omega-corporate-section,
.omega-home-section,
.omega-product-section {
    padding: var(--omega-section-y) 0;
}

.omega-contact-map-section {
    padding: var(--omega-section-y-compact) 0;
}

/* Hero vertical spacing, unified.
 *
 * AGENTS.md already says the hero root exclusively owns hero vertical page
 * spacing. Seven roots each owned it with a different number: 3rem, 3.5rem twice,
 * 3.75rem, 4.5rem, and two clamps topping out at 4.25/4.5rem. Same drift as the
 * gap and the column tracks.
 *
 * clamp(2.5rem, 4.5vw, 4.5rem) spans the observed range and is responsive, which
 * the four fixed values were not -- they gave a phone the same hero padding as a
 * 1440px desktop.
 *
 * Scoped to the seven roots that actually declared padding. The other eight heroes
 * take theirs from .omega-hub-hero or from nothing at all, and giving them padding
 * here would change pages this has no business touching -- the mistake the hero
 * gap rule made before it was scoped. */
.omega-adult-individual-hero,
.omega-certificate-hero,
.omega-child-group-hero,
.omega-child-individual-hero,
.omega-child-language-hero,
.omega-page-hero,
.omega-product-hero {
    padding: clamp(2.5rem, 4.5vw, 4.5rem) 0;
}

.omega-page-hero {
    background: #f5fbfa;
}

.omega-page-hero h1 {
    font-size: clamp(2.4rem, 4.8vw, 3.75rem);
    line-height: 1.08;
    margin-bottom: var(--omega-space-4);
}

.omega-page-hero-subtitle {
    font-size: var(--omega-text-h4);
    font-weight: 500;
    color: var(--omega-navy-800);
    margin-bottom: var(--omega-space-3);
}

.omega-page-hero-description {
    color: var(--omega-text-muted);
    font-size: var(--omega-text-body);
    line-height: 1.8;
    margin-bottom: var(--omega-space-5);
}

.omega-page-hero-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--omega-space-3);
    padding: 0;
    margin: 0 0 var(--omega-space-6);
    list-style: none;
}

.omega-page-hero-highlights li {
    display: flex;
    align-items: flex-start;
    gap: var(--omega-space-2);
    padding: 0.85rem var(--omega-space-4);
    background: rgba(var(--omega-teal-rgb), 0.08);
    border: 1px solid rgba(var(--omega-teal-rgb), 0.12);
    border-radius: var(--omega-radius-md);
    color: var(--omega-navy-800);
    font-weight: 500;
}

.omega-page-hero-highlights li::before {
    content: "•";
    color: var(--omega-teal-600);
    font-size: var(--omega-text-h4);
    line-height: 1;
}

/* The actions cluster: a wrapping row of CTAs. Used in heroes, closing CTAs and
   cards alike, which is why it is not scoped to any of them.

   .omega-public-hero-actions joins the list here rather than getting a hero-scoped
   rule of its own. Each page's own -actions class turned out to be used twice in
   its markup -- once in the hero and once further down the page -- so folding it
   into a hero-scoped base silently removed display:flex from the second use.
   Verified: it changed rendering on pages that were never touched.

   Per-page rules still own their own align-items and margin-top, which genuinely
   differ (1.5rem vs 1.6rem, stretch vs center). Unifying those changes pixels and
   is a design decision, not a refactor. */
/* Hero copy column. Unlike the actions cluster, this class is used exactly once
   per page and only inside a hero, so it is safe as a bare rule. min-width: 0 stops
   the copy column from refusing to shrink below its content in the hero grid --
   six pages had already discovered they needed it and declared it locally. */
.omega-public-hero-copy {
    min-width: 0;
}

/* Hero layout row. Also one use per page, always inside a hero.

   Only align-items lives here. display is deliberately left to the page: twelve
   heroes use grid and the home page uses flex, so there is no shared value, and
   the column tracks and gaps genuinely differ (0.7fr / 0.72fr / 0.78fr, 22rem vs
   24rem, 5rem vs 6rem gaps). Those are drift rather than intent, but unifying them
   moves pixels, so it is a design decision and not part of this refactor. */
.omega-public-hero-layout {
    align-items: center;
}

/* Hero grid gap, unified.
 *
 * Twelve heroes declared their own: six already at clamp(2rem, 5vw, 5rem), and
 * five near-misses -- 5.5rem, 6rem twice, 6.5rem twice -- that nobody chose, they
 * just drifted. Those five now use the common value.
 *
 * Scoped to the roots that actually lay out with CSS grid. The hub pages, the FAQ,
 * clients, careers, terms and the home page put omega-public-hero-layout on a
 * Bootstrap .row, which spaces itself with gutters and has no gap at all. A bare
 * gap rule gave 31 of those elements spacing they never had, on pages this change
 * has no business touching -- caught by the snapshot, not by reading the diff.
 *
 * AboutUs keeps clamp(1rem, 3vw, 3rem). At 3rem against 5rem it is too far from
 * the others to be drift; that reads as a deliberately tighter hero, and guessing
 * otherwise would be a design change wearing a refactor's clothes. */
.omega-adults-hero-inner,
.omega-adult-language-hero-grid,
.omega-adult-group-hero-grid,
.omega-adult-individual-hero-layout,
.omega-certificate-language-hero-inner,
.omega-children-hero-inner,
.omega-child-language-hero-grid,
.omega-child-group-hero-layout,
.omega-child-individual-hero-layout,
/* NOT .omega-certificate-hero-inner. Every root above is a two-child hero -- copy plus a
   media column -- so column tracks and a column gap are what they want. The certificate
   exam hero is not built that way: it has three children (breadcrumb, copy, facts), no
   image at all, and its own sheet lays it out as a single centred column with
   justify-items: center. Listing it here gave it a second track with nothing to put in
   it, so the copy sat in the right half and the breadcrumb floated in an empty left one.
   Verified across all eleven: ten have a media child, this one has none. */
.omega-corporate-hero-inner {
    gap: clamp(2rem, 5vw, 5rem);
    /* Column tracks, unified.
     *
     * Twelve heroes had twelve different definitions -- first track 0.92fr to 1fr,
     * media minimum 18rem to 24rem, media maximum 0.7fr to 1.08fr. No two matched.
     * Nobody picks 0.94fr over 0.95fr on purpose; this is drift.
     *
     * 1fr for the copy, because there is no reason a hero's text column should be
     * asked to be narrower than its share. 22rem is the most common media minimum
     * (four of twelve). 0.8fr is near the median of the twelve ratios, which range
     * from 0.70 to 1.17 -- close to what certificate-language and adults-hub
     * already use, and it keeps the media column from crowding the copy.
     *
     * This one changes hero proportions on every page listed above. It is the only
     * change in the hero work that is a judgement rather than a measurement. */
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.8fr);
}

.omega-page-hero-actions,
.omega-public-hero-actions,
.omega-hero-actions,
.omega-final-cta-actions,
.omega-card-actions,
.omega-contact-direct-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--omega-space-3);
}

.omega-section-header {
    margin-bottom: var(--omega-space-6);
}

.omega-section-header h2 {
    margin-bottom: var(--omega-space-3);
}

.omega-section-header p {
    margin-bottom: 0;
    color: var(--omega-text-muted);
    line-height: 1.75;
}

.omega-section-intro {
    margin-bottom: var(--omega-space-6);
}

.omega-section-intro h2 {
    margin-bottom: var(--omega-space-3);
}

.omega-section-intro p,
.omega-section-supporting {
    margin-bottom: 0;
    color: var(--omega-text-muted);
    line-height: 1.75;
}

.omega-check-list,
.omega-bullet-list {
    display: grid;
    gap: var(--omega-space-3);
}

.omega-check-list {
    padding: 0;
    margin: var(--omega-space-6) 0 0;
    list-style: none;
}

.omega-check-list-hero {
    margin-top: var(--omega-space-5);
}

.omega-check-list li {
    display: flex;
    gap: var(--omega-space-3);
    align-items: flex-start;
}

.omega-check-list i {
    color: var(--omega-teal-600);
    margin-top: var(--omega-space-1);
}

.omega-bullet-list {
    margin: 0;
    padding-left: var(--omega-space-5);
    color: var(--omega-text-muted);
}

.omega-inline-link {
    display: inline-flex;
    align-items: center;
    gap: var(--omega-space-2);
    margin-top: var(--omega-space-4);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

.omega-inline-link i {
    transition: transform var(--omega-duration-base) ease;
}

.omega-inline-link:hover i,
.omega-inline-link:focus i {
    transform: translateX(3px);
}

.omega-language-card,
.omega-guidance-card,
.omega-contact-card,
.omega-form-card,
.omega-map-frame,
.omega-legal-card,
.omega-hub-side-card,
.omega-trust-card,
.omega-routing-card,
.omega-course-card,
.omega-faq-item,
.omega-final-cta {
    background: var(--omega-surface-page);
    border: 1px solid var(--omega-border);
    box-shadow: var(--omega-shadow-card);
}

.omega-language-card,
.omega-guidance-card,
.omega-contact-card,
.omega-form-card,
.omega-hub-side-card,
.omega-trust-card,
.omega-routing-card,
.omega-course-card,
.omega-final-cta,
.omega-legal-card {
    border-radius: var(--omega-radius-lg);
}

.omega-map-frame,
.omega-faq-item {
    border-radius: var(--omega-radius-md);
}

.omega-language-card,
.omega-guidance-card,
.omega-contact-card,
.omega-form-card,
.omega-hub-side-card,
.omega-trust-card,
.omega-routing-card,
.omega-course-card {
    padding: var(--omega-card-padding);
}

.omega-language-card-eduport,
.omega-trust-card-eduport {
    border: 1px solid var(--omega-border);
    border-radius: var(--omega-radius-lg);
    transition: transform var(--omega-duration-base) ease, box-shadow var(--omega-duration-base) ease, border-color var(--omega-duration-base) ease;
}

.omega-language-card-eduport:hover,
.omega-trust-card-eduport:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--omega-teal-rgb), 0.18);
    box-shadow: 0 20px 40px rgba(var(--omega-navy-rgb), 0.08);
}

.omega-language-card h3,
.omega-guidance-card h2,
.omega-decision-card h3,
.omega-trust-card h3,
.omega-routing-card h3,
.omega-course-card h3,
.omega-hub-side-card h2 {
    margin-bottom: var(--omega-space-3);
}

.omega-language-card h3,
.omega-decision-card h3,
.omega-trust-card h3,
.omega-routing-card h3,
.omega-course-card h3 {
    font-size: var(--omega-text-subheading);
}

.omega-language-card p,
.omega-guidance-card p,
.omega-decision-card p,
.omega-trust-card p,
.omega-routing-card p,
.omega-course-card p,
.omega-final-cta p,
.omega-contact-card p,
.omega-hub-lead {
    color: var(--omega-text-muted);
    line-height: 1.75;
}

.omega-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--omega-space-6);
    padding: var(--omega-space-7);
}

.omega-final-cta {
    background: var(--omega-surface-page);
    border-color: rgba(var(--omega-teal-rgb), 0.12);
}

.omega-final-cta-card {
    background: var(--omega-navy-800);
    border-color: transparent;
}

.omega-final-cta-card,
.omega-final-cta-card h2,
.omega-final-cta-card p {
    color: var(--omega-text-on-inverse);
}

.omega-final-cta-card .btn-outline-white,
.omega-final-cta-card .btn-outline-primary {
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--omega-text-on-inverse);
}

.omega-final-cta-card .btn-outline-white:hover,
.omega-final-cta-card .btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--omega-text-on-inverse);
}

.omega-hub-page {
    overflow: clip;
}

.omega-hub-hero {
    padding: 4.5rem 0 var(--omega-space-10);
}

/*
 * This rule is the only hero title styling on the site that actually applies, and the
 * reason it works is that it lives in this file rather than in a component's .razor.css.
 *
 * SeoH1.razor renders the <h1> for every public page and has no .razor.css of its own, so
 * the element carries NO scope attribute. CSS isolation rewrites a page's
 * `.omega-adults-hero h1` into `.omega-adults-hero h1[b-abc123]`, which cannot match an
 * element that has no such attribute. Every one of those rules is therefore dead, and the
 * titles fall through to Bootstrap's `h1, .h1` in style.css -- 45px at desktop, against the
 * 57-73px the stylesheets ask for.
 *
 * The stylesheets were written on 2026-05-09; SeoH1 arrived on 2026-07-13 and silently
 * turned them off. Nothing errors, nothing warns, and the pages simply render smaller.
 *
 * Switching them back on is one global rule here -- `.omega-public-hero h1 { font-size:
 * var(--omega-text-display) }` -- and it grows desktop titles by about 51%. That is a
 * visible change on roughly twenty page types, so it ships on its own rather than inside a
 * cleanup. Until then the per-page rules have been collapsed onto the token, so the switch
 * is a one-line change rather than twenty.
 */
/*
 * Hero titles, switched back on.
 *
 * The per-page rules could never match -- SeoH1.razor renders the <h1> and has no
 * .razor.css, so the element carries no scope attribute and every
 * `.omega-x-hero h1[b-hash]` rule missed it. Since 2026-07-13 the titles have fallen
 * through to Bootstrap's `h1, .h1`: 45px at desktop where the stylesheets asked for 57
 * to 73. This rule lives in a global sheet, so it has no scope attribute to match and
 * reaches the element.
 *
 * Three pages do not use the omega-public-hero root and are named explicitly rather
 * than left inconsistent: the consultation and course-application intros, and the
 * sitemap hero.
 *
 * line-height and margin are here too, not just font-size. The dead rules set those as
 * well, so turning on the size alone would give a 68px title Bootstrap's 1.2 leading
 * and default margins -- bigger, and worse than before.
 *
 * Specificity is (0,1,1) against Bootstrap's (0,0,1), and this file loads after
 * style.css, so it wins on both counts. Page rules that legitimately want a different
 * title size can still override with ::deep, which is the mechanism the per-page rules
 * should have used in the first place.
 */
.omega-public-hero h1,
.omega-consultation-intro h1,
.omega-course-application-intro h1,
.omega-sitemap-hero h1 {
    margin: var(--omega-space-3) 0 var(--omega-space-5);
    font-size: var(--omega-text-display);
    line-height: var(--omega-leading-tight);
}

.omega-hub-hero h1 {
    font-size: clamp(2.6rem, 4.5vw, 4rem);
    line-height: 1.08;
    margin-bottom: var(--omega-space-4);
}

.omega-hub-lead {
    font-size: var(--omega-text-h4);
}

.omega-hub-body {
    color: var(--omega-text-muted);
    line-height: 1.8;
    margin-bottom: 0;
}

.omega-hub-hero-adults {
    background: var(--omega-surface-mint);
}

.omega-hub-hero-corporate {
    background: var(--omega-surface-neutral);
}

.omega-hub-hero-about {
    background: var(--omega-surface-mint);
}

.omega-hub-hero-contact {
    background: var(--omega-surface-peach);
}

.omega-hub-hero-faq {
    background: var(--omega-surface-neutral);
}

.omega-hub-hero-clients {
    background: var(--omega-surface-neutral);
}

.omega-hub-hero-legal {
    background: var(--omega-surface-neutral);
}

.omega-hub-side-card {
    background: var(--omega-surface-page);
}

.omega-guidance-card-accent {
    background: #fff5f1;
}

.omega-hub-side-card-corporate,
.omega-hub-side-card-about {
    background: var(--omega-surface-mint);
}

.omega-hub-side-card-contact {
    background: var(--omega-surface-peach);
}

.omega-hub-side-card-faq {
    background: var(--omega-surface-neutral);
}

.omega-hub-side-card-clients,
.omega-hub-side-card-blog,
.omega-hub-side-card-legal {
    background: var(--omega-surface-neutral);
}

.omega-routing-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--omega-space-4);
    border-radius: 14px;
    background: rgba(var(--omega-teal-rgb), 0.10);
    color: var(--omega-teal-600);
    font-size: var(--omega-icon-md);
}

.omega-faq-item,
.omega-map-frame {
    overflow: hidden;
}

.omega-faq {
    display: grid;
    gap: var(--omega-space-4);
}

.omega-faq-item .accordion-button {
    font-family: 'Raleway', sans-serif;
    font-size: var(--omega-text-h4);
    font-weight: 700;
    color: var(--omega-navy-800);
    background: var(--omega-surface-page);
    box-shadow: none;
}

.omega-faq-item .accordion-button:not(.collapsed) {
    background: rgba(var(--omega-teal-rgb), 0.06);
    color: var(--omega-navy-800);
}

.omega-faq-item .accordion-body {
    color: var(--omega-text-muted);
    line-height: 1.75;
}

.omega-contact-direct-list {
    display: grid;
    gap: var(--omega-space-4);
}

.omega-contact-direct-list a {
    display: inline-flex;
    align-items: center;
    gap: var(--omega-space-3);
    color: var(--omega-navy-800);
}

.omega-contact-direct-list a i {
    color: var(--omega-teal-600);
}

/* Flat, not a fade. The gradient ran from the brand teal to the ramp's 800 step
   across the card, but nothing about the content changes between one corner and
   the other, so the fade was decoration that said nothing. It also hard-coded
   both teals as literals; the flat fill uses the token. */
.omega-contact-card-primary {
    background: var(--omega-teal-600);
    border-color: transparent;
}

.omega-contact-card-primary,
.omega-contact-card-primary h3,
.omega-contact-card-primary p,
.omega-contact-card-primary a {
    color: var(--omega-text-on-inverse);
}

.omega-contact-card a {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

.omega-form-card .validation-message {
    display: block;
    margin-top: var(--omega-space-2);
}

/* Public form skin.
 *
 * One skin for the four public forms, keyed off the .omega-public-form hook class they
 * already carry (contact, consultation, course application, course waitlist). Each page
 * used to restate field, label, select, focus, error and submit rules in its own
 * .razor.css; those copies are deleted in favour of this block.
 *
 * Global rather than a .razor.css because fields are authored in four different files
 * with four different scope ids — a shared component's isolated sheet could only reach
 * them through ::deep, and only for markup it wraps. Two classes
 * (.omega-public-form .form-control) outrank the legacy sheet's one, so nothing here
 * needs !important.
 *
 * Deliberately NOT styled here: submit buttons. The waitlist form's hand-rolled
 * .omega-product-primary button must not be restyled, so the shared submit is an
 * opt-in class (.omega-public-form-submit) that pages put on their CtaButton. */
.omega-public-form .form-label {
    margin-bottom: var(--omega-space-1);
    color: var(--omega-navy-800);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.omega-public-form .form-control,
.omega-public-form .form-select {
    min-height: var(--omega-field-min-height);
    padding: 0.65rem 0.9rem;
    /* 16px so iOS does not zoom the page on focus. */
    font-size: var(--omega-text-body);
    color: var(--omega-text);
    background-color: var(--omega-surface-page);
    border-color: var(--omega-border-strong);
    border-radius: var(--omega-radius-sm);
    box-shadow: none;
}

.omega-public-form .form-control::placeholder {
    color: var(--omega-text-muted);
    opacity: 1;
}

.omega-public-form textarea.form-control {
    min-height: 8rem;
    resize: vertical;
}

.omega-public-form .form-control:focus,
.omega-public-form .form-select:focus {
    border-color: var(--omega-teal-600);
    box-shadow: 0 0 0 0.2rem rgba(var(--omega-teal-rgb), 0.12);
}

.omega-public-form .form-control.invalid,
.omega-public-form .form-select.invalid {
    border-color: var(--omega-danger-ink);
}

.omega-public-form .validation-message {
    display: block;
    margin-top: var(--omega-space-1);
    color: var(--omega-danger-ink);
    font-size: var(--omega-text-small);
}

/* Field groups: a two-column grid on desktop, one column on the phone.
   The gap token is the within-group rhythm; groups themselves are separated by
   the fieldset rule below. */
.omega-public-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--omega-field-gap);
}

.omega-public-form-wide {
    grid-column: 1 / -1;
}

.omega-public-form-fieldset {
    display: grid;
    gap: var(--omega-space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.omega-public-form-fieldset + .omega-public-form-fieldset {
    margin-top: var(--omega-space-2);
    padding-top: var(--omega-space-5);
    border-top: 1px solid rgba(var(--omega-navy-rgb), 0.08);
}

/* The legend is a muted eyebrow, not a heading: the card header owns the heading
   role and the groups are labels inside it. */
.omega-public-form-fieldset legend {
    margin: 0 0 var(--omega-space-1);
    padding: 0;
    color: var(--omega-text-muted);
    font-family: var(--omega-font-heading);
    font-size: var(--omega-text-eyebrow);
    font-weight: 700;
    letter-spacing: var(--omega-tracking-eyebrow);
    text-transform: uppercase;
}

.omega-public-form-helper {
    margin: 0 0 var(--omega-space-2);
    color: var(--omega-text-muted);
    font-size: var(--omega-text-small);
    line-height: 1.55;
}

.omega-public-form-submit {
    width: 100%;
    min-height: 3.125rem;
    font-size: var(--omega-text-body);
}

.omega-public-form-promise {
    margin: var(--omega-space-2) 0 0;
    color: var(--omega-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
}

/* The optional-details disclosure: a native <details>, no script. The dashed teal
   row is the closed state; open, the summary reads as a group divider. */
.omega-public-form-details > summary {
    display: flex;
    gap: var(--omega-space-3);
    align-items: center;
    padding: 0.875rem var(--omega-space-4);
    border: 1px dashed rgba(var(--omega-teal-rgb), 0.45);
    border-radius: var(--omega-radius-md);
    background: var(--omega-teal-50);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--omega-duration-base) var(--omega-ease-standard), border-color var(--omega-duration-base) var(--omega-ease-standard);
}

.omega-public-form-details > summary::-webkit-details-marker {
    display: none;
}

.omega-public-form-details > summary:hover {
    background: var(--omega-surface-mint);
    border-color: var(--omega-teal-600);
}

.omega-public-form-details-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: var(--omega-radius-pill);
    background: rgba(var(--omega-teal-rgb), 0.10);
    color: var(--omega-teal-600);
    font-size: var(--omega-icon-xs);
}

.omega-public-form-details-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.omega-public-form-details-title {
    color: var(--omega-navy-800);
    font-family: var(--omega-font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
}

.omega-public-form-details-hint {
    color: var(--omega-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.omega-public-form-details-chevron {
    flex: none;
    color: var(--omega-teal-600);
    font-size: var(--omega-icon-xs);
    transition: transform var(--omega-duration-base) var(--omega-ease-standard);
}

.omega-public-form-details[open] > .omega-public-form-details-chevron,
.omega-public-form-details[open] > summary .omega-public-form-details-chevron {
    transform: rotate(180deg);
}

.omega-public-form-details-body {
    display: grid;
    gap: var(--omega-space-5);
    padding-top: var(--omega-space-5);
}

@media (max-width: 575.98px) {
    .omega-public-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .omega-public-form-wide {
        grid-column: auto;
    }
}

.omega-image-frame {
    display: block;
    margin: 0;
    overflow: hidden;
    border-radius: var(--omega-radius-sm);
    box-shadow: 0 18px 44px rgba(var(--omega-navy-rgb), 0.12);
}

.omega-image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform .5s ease;
}

[class*="hero-visual"] picture,
[class*="hero-media"] picture,
.omega-consultation-graphic picture,
.blog-hero-visual picture {
    display: contents;
}

.omega-image-frame:hover img,
.omega-image-frame:focus-within img {
    transform: scale(var(--omega-image-frame-hover-scale, 1.03));
}

.omega-legal-card {
    padding: var(--omega-space-7);
}

.omega-legal-richtext section + section {
    margin-top: var(--omega-space-7);
    padding-top: var(--omega-space-7);
    border-top: 1px solid var(--omega-border);
}

.omega-legal-richtext h2 {
    margin-bottom: var(--omega-space-3);
}

@media (prefers-reduced-motion: reduce) {
    .omega-image-frame img {
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 991.98px) {
    .omega-page-hero {
        padding: var(--omega-space-10) 0;
    }

    .omega-home-hero {
        padding-top: var(--omega-space-9);
    }

    .omega-final-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .omega-public-hero.omega-public-hero.omega-public-hero {
        min-height: auto;
        padding: var(--omega-space-6) 0;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-layout {
        min-height: auto;
        padding-top: 0;
        padding-bottom: 0;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-layout:has(.omega-public-hero-media) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        align-items: start;
    }

    /* display: contents exists only so the media can be reordered between the title
       and the lead. In a hero without media the layout row stays a Bootstrap flex
       .row, and dissolving the copy wrapper there drops the breadcrumb, title and
       lead into the row as siblings -- they render side by side instead of stacked.
       Scoped with :has to the media case, like the grid rule above. */
    .omega-public-hero.omega-public-hero .omega-public-hero-layout:has(.omega-public-hero-media) .omega-public-hero-copy {
        display: contents;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-copy > * {
        min-width: 0;
        grid-column: 1;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-copy > p,
    .omega-public-hero.omega-public-hero .omega-public-hero-copy > ul,
    .omega-public-hero.omega-public-hero .omega-public-hero-copy > [class*="actions"],
    .omega-public-hero.omega-public-hero .omega-public-hero-copy > [class*="highlights"],
    .omega-public-hero.omega-public-hero .omega-public-hero-copy > [class*="support"] {
        order: 2;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-media {
        --omega-public-hero-media-fit: cover;
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
        margin: var(--omega-space-5) 0 var(--omega-space-5);
        padding: 0;
        overflow: hidden;
        grid-column: 1;
        order: 1;
        border: 1px solid rgba(var(--omega-navy-rgb), 0.08);
        border-radius: var(--omega-radius-sm);
        background: #eef8f6;
        box-shadow: 0 14px 34px rgba(var(--omega-navy-rgb), 0.12);
        transform: none;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-media--contain {
        --omega-public-hero-media-fit: contain;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-media::before,
    .omega-public-hero.omega-public-hero .omega-public-hero-media::after {
        display: none;
        content: none;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-actions {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-actions .btn,
    .omega-public-hero.omega-public-hero .omega-public-hero-action {
        width: 100%;
        justify-content: center;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-media > :not(picture):not(img) {
        display: none;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-media picture {
        display: contents;
    }

    .omega-public-hero.omega-public-hero .omega-public-hero-media img {
        position: static;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: var(--omega-public-hero-media-fit);
        object-position: center;
        transform: none;
    }

    .omega-page-hero {
        padding: var(--omega-space-9) 0 var(--omega-space-6);
    }

    .omega-section-header,
    .omega-section-intro {
        margin-bottom: var(--omega-space-5);
    }

    .omega-hub-hero {
        padding: var(--omega-space-9) 0 var(--omega-space-6);
    }

    .omega-card-actions,
    .omega-final-cta-actions {
        flex-direction: column;
    }

    .omega-legal-card,
    .omega-form-card,
    .omega-contact-card {
        padding: var(--omega-space-5);
    }
}