/* ==========================================================================
   Contact Us page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40000567:26698 "CONTACT US"). Uses the --hr-* tokens declared
   globally in layout-revamp.css.

   NOTE: .cta-hero below reproduces the same "Innerpage-hero" component the
   Speakers pages use (.spk-hero in speakers-revamp.css), differing only in
   the banner asset. Worth extracting into one shared partial + rule set
   once a third page needs it.
   ========================================================================== */

/* Teal banner spanning the breadcrumb hero and fading out below it, from
   Figma's own "Gathering Detail Page" Innerpage-hero fill checked in as
   about-revamp/hero-banner.svg - the same shared asset the About page uses,
   at its natural 424px height.

   The SVG export rather than the earlier contact-hero-banner.png: the PNG has
   a transparent background, so flattening it composites the teal onto black
   and the banner reads far darker (and 704px too tall) against the design.
   The vector keeps its alpha, and also carries Figma's dark radial vignette
   and fine white grain. preserveAspectRatio="none" is set on the asset so it
   stretches to the viewport width. */
.contact-revamp {
    position: relative;
    /* cream-500, not cream-400: this page's Figma palette has no cream-400 in
       it at all, and the FAQ band (frame 40003108:111190) carries no fill of
       its own, so the page colour is what shows through there. */
    background: var(--hr-cream-500) var(--cta-hero-bg) no-repeat top center;
    background-size: 100% 424px;
}
.cta-accent { color: var(--hr-yellow-400); }

.iti__flag-container {
    padding-inline-start: 0 !important;
}

/* Figma's angular corner wedges inside the Innerpage-hero instance: two
   DISTINCT vectors, "Pattern-01" (left, 305.329x160.658) and "Pattern-02"
   (right, 305.29x204.731, mix-blend-mode: overlay), each carrying its own
   cream(#f9f7ea)-to-transparent gradient at 10% fill-opacity baked into the
   asset. This page previously rendered one shared flourish mirrored across
   both sides, which is a different shape entirely. Same pair, same geometry
   as .abt-hero-decor in about-revamp.css.

   Both are anchored to the hero's bottom edge - Pattern-01's own y=95.03 +
   160.658 lands on 255.69, i.e. flush with the 256px band - so they stay
   correctly placed when the band shortens at the tablet/mobile breakpoints
   and get clipped from the top rather than drifting off the baseline.

   The slight blur softens the vector edges to match how the wedges read in
   Figma's own render, where the 10% gradient dissolves into the teal rather
   than showing a hard diagonal. */
.cta-hero-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 256px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.cta-hero-decor img {
    position: absolute;
    bottom: 0;
    max-width: none;
    filter: blur(1.5px);
}
.cta-hero-decor-left {
    left: 0;
    width: 305.329px;
    height: 160.658px;
}
.cta-hero-decor-right {
    right: 0;
    width: 305.29px;
    height: 204.731px;
    mix-blend-mode: overlay;
}
/* RTL keeps each pattern on its own visual side by flipping the pair, so the
   composition mirrors with the text direction instead of the taller wedge
   always sitting on the right. */
[dir="rtl"] .cta-hero-decor-left { left: auto; right: 0; transform: scaleX(-1); }
[dir="rtl"] .cta-hero-decor-right { right: auto; left: 0; transform: scaleX(-1); }
/* No responsive height on the band, unlike .abt-hero-decor: .cta-hero is a
   flat 256px at every width here (About's hero shrinks to 200/160px, and its
   decor has to track that to stay flush with the bottom edge). Only the wedge
   widths scale, so they keep their proportion of the hero rather than
   swallowing a phone-width viewport. */
@media (max-width: 767.98px) {
    .cta-hero-decor-left { width: 190px; height: 100px; }
    .cta-hero-decor-right { width: 190px; height: 128px; }
}

/* Top-bar overlay (Figma node 40001286:68844): a dark scrim across the 132px
   band the fixed header sits in, holding at 50% for the header's own height
   and then fading out. It darkens the pattern above so the white nav stays
   legible where the teal gradient is at its lightest, and sits between the
   decor pattern (z-index 0, earlier in the DOM) and the hero content
   (.cta-hero-inner, z-index 1). */
.cta-topbar-overlay {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 132px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(28, 26, 12, .5) 0%,
        rgba(28, 26, 12, .5) 38%,
        rgba(28, 26, 12, 0) 100%);
}
@media (max-width: 991.98px) { .cta-topbar-overlay { height: 110px; } }
@media (max-width: 767.98px) { .cta-topbar-overlay { height: 96px; } }

/* Shared diamond primitive: a square turned 45deg.

   Figma draws this the same way everywhere it appears - a 20px square centred
   in its own 28.284px (20 * sqrt(2)) slot, so adjacent diamonds' rotated tips
   meet exactly on the slot boundary. The margin reproduces that slot without
   an extra wrapper per diamond.

   Both geometry rules live here rather than on one caller: the hero divider
   used to fall through to a 14px base while the quick-contact cluster set
   20px, so the two runs of the same component rendered at different sizes and
   with different spacing. Callers now vary only by colour, matching
   .abt-diamond in about-revamp.css. */
.cta-diamond {
    width: 20px;
    height: 20px;
    margin-inline: 4.142px;
    transform: rotate(45deg);
    background: var(--hr-cream-500);
    flex-shrink: 0;
}
.cta-diamond-amber { background: var(--hr-yellow-500); }

/* ---------- Hero / breadcrumb ---------- */
.cta-hero {
    position: relative;
    height: 256px;
    display: flex;
    align-items: flex-end;
    padding: 0 160px 24px;
}
.cta-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    width: 100%;
    margin-inline: auto;
}
.cta-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.cta-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    color: var(--hr-cream-500);
    text-transform: uppercase;
}
/* Full strength per Figma's Breadcrumb component - only font weight marks the
   current crumb, there is no resting opacity on the others. Full note in
   press-releases-revamp.css. */
.cta-breadcrumb a,
.cta-breadcrumb span:not(.cta-breadcrumb-sep) { opacity: 1; }
.cta-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease;
}
.cta-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
.cta-breadcrumb-current { font-weight: 700; opacity: 1 !important; }
.cta-breadcrumb-sep {
    width: 1px;
    height: 16px;
    background: rgba(249, 247, 234, .5);
}
.cta-hero-divider { display: none; }
@media (min-width: 1200px) {
    /* Fixed-width group pinned to the row's right end, with the line bleeding
       past the 1600px inner box to the true viewport edge. */
    .cta-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 300px;
        margin-inline-end: calc(-160px - max(0px, (100vw - 1920px) / 2));
    }
    .cta-hero-divider-line {
        flex: 1 1 auto;
        height: 1px;
        background: rgba(249, 247, 234, .5);
        /* The last diamond's own 4.142px slot margin supplies the gap now, so
           the extra 4px offset here would double it. */
        margin-inline-start: 0;
    }
}
/* Full-bleed hairline closing the hero. */
.cta-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}

/* ---------- Main: form + quick contact ---------- */
/* Transparent: the wrapper's gradient continues into this section's top. */
.cta-main {
    position: relative;
    padding: 100px 160px 80px;
}
.cta-main-inner {
    max-width: 1600px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 760fr) minmax(0, 760fr);
    gap: 80px;
    align-items: start;
}
.cta-form-col h1 {
    font-size: 56px;
    line-height: 72px;
    font-weight: 700;
    color: var(--hr-brown-500);
    margin: 0 0 48px;
}

/* ---------- Form ---------- */
.cta-form { display: flex; flex-direction: column; gap: 24px; }
.cta-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.cta-field { display: flex; flex-direction: column; gap: 8px; }
.cta-field label {
    font-size: 16px;
    line-height: 24px;
    color: #49473d;
    margin: 0;
}
.cta-required { color: #ee3b33; }
.cta-field input,
.cta-field textarea,
.cta-field select {
    width: 100%;
    background: rgba(236, 230, 211, .4);
    border: 0;
    border-radius: 8px;
    padding: 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-900);
    outline: none;
}
.cta-field input,
.cta-field select { height: 56px; }
.cta-field textarea { min-height: 160px; resize: vertical; }
.cta-field input::placeholder,
.cta-field textarea::placeholder { color: var(--hr-brown-300); opacity: .5; }

/* Stand-in placeholder for First Name / Last Name / Email - the same treatment
   the gatherings search pill uses (.sml-search-placeholder). An <input> clips
   to its own content box, and that clip cropped the tails of the Arabic hint
   along its baseline; a sibling element layered over the field is not subject
   to it. The blade renders the span already carrying .is-hidden when the field
   comes back with old() input, so it never flashes on load; the page script
   toggles the class on every `input` event after that.

   inset:0 plus the input's own 16px padding rather than a measured offset - the
   span shares the field's box, its font and its 24px line box, so the hint and
   typed text land on the same baseline by construction, in either direction.
   Colour and opacity match ::placeholder above so the swapped fields are
   indistinguishable from the ones still using the native attribute. */
.cta-field-input { position: relative; display: block; }
.cta-placeholder {
    position: absolute;
    inset: 0;
    padding: 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-300);
    opacity: .5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Clicks belong to the field underneath. */
    pointer-events: none;
}
.cta-placeholder.is-hidden { display: none; }
.cta-field input:focus,
.cta-field textarea:focus,
.cta-field select:focus { box-shadow: 0 0 0 2px rgba(0, 109, 98, .25); }

/* Figma's DOWN icon (40003103:27409): a stroked chevron, 1.5px with round caps
   and joins, #66655C - not the solid wedge a pair of gradients draws. Exported
   as field-chevron.svg and shared with the phone field's arrow below, so the
   form's two dropdowns carry the same mark. */
.cta-field select {
    appearance: none;
    cursor: pointer;
    padding-inline-end: 44px;
    background-image: url("../images/contact-revamp/field-chevron.svg");
    background-size: 11.5px 6.5px;
    background-position: right 16px center;
    background-repeat: no-repeat;
}
/* One symmetric mark now, so RTL only changes which edge it hangs off - no
   more swapping a pair of offsets and no more crossed wedges. */
[dir="rtl"] .cta-field select { background-position: left 16px center; }

/* ---------- Phone: intl-tel-input ---------- */
/* The dial-code <select> that used to sit in a .cta-phone wrapper is gone,
   replaced by intl-tel-input v17. The plugin wraps #cta_phone in a .iti div and
   overlays its own flag + dial-code box on the input's leading edge, so the
   field keeps the plain .cta-field input styling (fill, radius, 56px height,
   focus ring) and only the plugin's own chrome is restyled below. */
.contact-revamp .iti { display: block; width: 100%; }

/* The plugin writes an inline padding-left at init, measured from the flag
   box's width at that moment. Once Almarai swaps in, "+974" renders wider than
   the fallback font it measured against and the first digits slide underneath
   it - so pin both sides to fixed values comfortably wider than any dial code.
   Physical properties, not logical ones, to match the inline style being
   overridden. One pair covers both layouts: the field is LTR either way (see
   the rule below). */
.contact-revamp .iti input#cta_phone {
    /*padding-left: 144px !important;*/
    padding-right: 16px !important;
    /* app.css carries a global `[dir=rtl] input[type=tel] { direction: rtl }`
       (line ~10980). A direct declaration beats both the direction:ltr this
       input inherits from .iti and its own dir="ltr" attribute - attribute-
       mapped direction sits in the presentational-hint layer, which any author
       rule outranks - so the digits kept running right-to-left. Restated here,
       where the selector is specific enough to win. */
    direction: ltr;
}

/* The phone field stays LTR on the Arabic page: flag and dial code on the
   left, digits running left-to-right after them. A phone number is LTR data
   whichever language frames it, and mirroring the component pushed the dial
   code to the far right where it read as part of the Arabic sentence rather
   than as the start of the number.

   One declaration on the wrapper does the whole job. Every rule in the vendor
   stylesheet is written in physical left/right terms, so under direction:ltr
   they all apply exactly as they do on the English page - no rule above or
   below needs an RTL twin, and the logical margins resolve the same way too.
   Only the surrounding label and error text stay right-aligned with the rest
   of the form. */
[dir="rtl"] .contact-revamp .iti { direction: ltr; }

/* Flag box: transparent over the input's own fill (the vendor default is a 5%
   black wash), closed by the same hairline the dial-code select used to draw.
   The :hover wash from the vendor sheet is left in place as click feedback. */
.contact-revamp .iti--separate-dial-code .iti__selected-flag {
    /* Fixed width, so the 144px input padding above is a guaranteed 16px clear
       of the divider instead of a guess at how wide flag + dial code + arrow
       happen to render. Left to shrink-to-fit it measured 119px in a fallback
       font but ~140px once Almarai swapped in - wider than the padding, which
       is what put the placeholder underneath the flag box. 128px holds the
       longest four-digit dial code at Almarai's metrics with room to spare. */
    /*width: 128px;*/
    background: transparent;
    padding: 0 14px;
    border-inline-end: 1px solid rgba(102, 101, 92, .3);
}
.contact-revamp .iti__selected-dial-code {
    margin-left: 0;
    margin-inline-start: 8px;
    font-size: 16px;
    color: var(--hr-brown-900);
}

/* The vendor arrow is a 4px grey triangle. This swaps in the same
   field-chevron.svg the Topic select uses, so both dropdowns in the form carry
   the same mark; the asset is symmetrical, so RTL needs no variant. */
.contact-revamp .iti__arrow {
    width: 11.5px;
    height: 6.5px;
    border: 0;
    margin-left: 0;
    /* auto, not a fixed gap: the flag box is a fixed width, so this pins the
       chevron to its trailing edge whatever the dial code's own width. */
    margin-inline-start: auto;
    background-image: url("../images/contact-revamp/field-chevron.svg");
    background-size: 11.5px 6.5px;
    background-position: center;
    background-repeat: no-repeat;
}
.contact-revamp .iti__arrow--up { border: 0; transform: rotate(180deg); }

/* app.css lifts every .iti--allow-dropdown field to z-index:1500 so its
   nested country dropdown can clear registration modals elsewhere on the
   site - but the phone field here uses `dropdownContainer: document.body`
   (contact-us.blade.php), so its dropdown already lives outside .iti
   entirely and that elevation does nothing for it except sit permanently
   above the mobile nav's offcanvas menu (z-index 1040/1045), poking through
   whenever the menu was opened. Drop it back to normal stacking. */
.contact-revamp .iti--allow-dropdown {
    z-index: auto;
}

/* Country dropdown, pulled onto the form's own palette. */
.contact-revamp .iti__country-list {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(28, 26, 12, .18);
    max-height: 240px;
}
.contact-revamp .iti__country { padding: 8px 16px; font-size: 15px; }
.contact-revamp .iti__country.iti__highlight { background-color: rgba(236, 230, 211, .6); }
.contact-revamp .iti__dial-code { color: var(--hr-brown-300); }

.cta-error { font-size: 14px; line-height: 20px; color: #ee3b33; }

/* Client-side validation state, applied by the inline validator on
   contact-us.blade.php. Declared after the :focus rules and repeated for
   :focus so an invalid field keeps its red ring while the visitor is fixing
   it, instead of the teal focus ring painting over the error. The ring is a
   box-shadow rather than a border because these controls are border:0 by
   design and a border would shift their layout. */
.cta-field .cta-invalid,
.cta-field .cta-invalid:focus { box-shadow: 0 0 0 2px rgba(238, 59, 51, .45); }
/* The Topic field is select2 now (x-front.select): the ring above lands on the
   hidden source <select>, which select2 keeps visually hidden rather than
   display:none, so the box-shadow itself never paints. Mirror it onto the
   rendered pill instead. */
.cta-field select.cta-invalid + .ba-select2-container .select2-selection { box-shadow: 0 0 0 2px rgba(238, 59, 51, .45); }
.cta-consent.cta-invalid { color: #ee3b33; }
/* The consent error is a child of .cta-form (gap: 24px) rather than of a
   .cta-field (gap: 8px), so pull it back to the tighter field spacing. */
.cta-consent + .cta-error { margin-top: -16px; }

.cta-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-500);
    margin: 0;
    cursor: pointer;
}
/* Figma "Rectangle 25811": a 16x16 square, 1px #dddac7 hairline, no fill and
   no radius - which accent-color on a native checkbox cannot produce, so the
   control is unstyled and redrawn. Offsets match the design's own row: the box
   sits at y=4 in a 24px line, 8px before the label (frame 40003108:111087). */
.cta-consent input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 4px 0 0;
    flex-shrink: 0;
    border: 1px solid #dddac7;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
/* Figma specs only the empty box. The tick is an inline data URI rather than
   an asset because the project's three existing check icons (tick-icon.svg,
   prefer-tick.svg, done-check.svg) are all circular badges, not a bare mark,
   and a ::after glyph is unreliable on <input> in Firefox. Swap in a designed
   asset here if one turns up. */
.cta-consent input:checked {
    background-color: var(--hr-green-500);
    border-color: var(--hr-green-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.9 8.5 9.4 3.8' fill='none' stroke='%23f9f7e9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}
.cta-consent input:focus-visible {
    outline: 2px solid var(--hr-green-500);
    outline-offset: 2px;
}
.cta-consent.cta-invalid input { border-color: #ee3b33; }
.cta-consent a { color: var(--hr-green-500); }

/* Same treatment as the footer's Subscribe button (.footer-revamp
   .hr-btn.hr-btn-primary in layout-revamp.css): the outset white rim with no
   bottom edge, and the inset highlight over the four-drop stack. Re-declared
   here rather than reaching for the shared .hr-btn primitives, matching how
   agenda-detail-revamp.css and summit-revamp.css scope their own copies.
   The hover glow is not duplicated - this button is added to the shared
   ::before lists in layout-revamp.css instead. */
.cta-submit {
    align-self: flex-start;
    position: relative;
    /* Keeps the glow's plus-lighter blending against the button's own fill
       rather than whatever sits behind it. */
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border: 2px outset #ffffff9c;
    border-bottom-width: 0;
    border-radius: 61px;
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow:
        inset 0 4px 6.1px rgba(255, 255, 255, .23),
        7px 63px 18px rgba(0, 0, 0, .02),
        2px 23px 14px rgba(0, 0, 0, .02),
        1px 10px 10px rgba(0, 0, 0, .03),
        0 3px 6px rgba(0, 0, 0, .03);
    transition: transform .2s ease, opacity .2s ease;
}
.cta-submit:hover { transform: translateY(-2px); }
.cta-submit:disabled { opacity: .7; cursor: default; transform: none; }

/* ---------- Quick contact card ---------- */
.cta-quick {
    background: linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, .5));
    /* Inset shadow rather than `border: 1px solid #fff`: overflow:hidden clips
       to the PADDING box, so a real border leaves a 1px strip that the
       full-bleed divider below can never reach. An inset shadow paints the same
       hairline without shrinking the padding box, letting the rule run to the
       card's true outer edge. */
    box-shadow: inset 0 0 0 1px #fff;
    border-radius: 30px;
    padding: 56px;
    overflow: hidden;
}
.cta-quick h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0 0 80px;
}
/* A single-column list (Figma frame 40001289:87173), not a 2x2 grid: each row
   is the diamond marker beside a label/value column, 36px between rows. */
.cta-quick-grid {
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.cta-quick-item { display: flex; align-items: center; gap: 24px; }
/* 24px in Figma, but measured from a cap-height box (text-box-trim) rather
   than a line box. A normal 16px/24px label carries ~7px of half-leading under
   its caps, so 17px here puts the value's line box 35px below the label's cap
   top - the design's own figure - without depending on text-box-trim, which
   only landed in Chrome 133 / Safari 18.4. */
.cta-quick-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 17px;
}
/* Figma wraps the address at 247px, after "Multaqa (Student Center),". */
.cta-quick-address { max-width: 247px; }
/* flex so the row's icon (where there is one) sits on the label's own line
   instead of stacking above it and pushing the value down. The socials row
   carries no icon and is a single text node, so the flex box changes nothing
   there. */
.cta-quick-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--hr-brown-700);
}
/* Sits inside .cta-quick-label, beside its text, rather than standing in for
   it - so the label's own 24px line box sets the row height and the icon just
   has to not stretch. Sized to the label's 20px cap rather than the SVG's
   intrinsic box, which differs per icon (Mail is 20x20, the pin 14x18). */
.cta-quick-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.cta-quick-value {
    font-size: 20px;
    line-height: 28px;
    color: var(--hr-brown-900);
    text-decoration: none;
}
a.cta-quick-value:hover { color: var(--hr-green-500); text-decoration: underline; }
/* Phone number and email address are LTR strings inside an otherwise RTL
   card. Left to the bidi algorithm, "+974 4454 0000" reorders to
   "0000 4454 974+" on the Arabic page, because the leading "+" is a neutral
   character that picks up the paragraph direction. isolate scopes each value
   so it renders exactly as written. Alignment needs no RTL rule: these are
   flex items in an align-items:flex-start column, so each box is only as wide
   as its own text and already hugs the card's start edge either way. */
.cta-quick-value-ltr { direction: ltr; unicode-bidi: isolate; }

/* Two overlapping squares — one filled, one outlined — rotated and skewed into
   the brand's diamond marker (drawn as shapes in Figma, not an exported
   asset). Same construction as the speaker page's session cards, in green. */
.cta-marker {
    position: relative;
    width: 58px;
    height: 61px;
    flex-shrink: 0;
}
.cta-marker-fill,
.cta-marker-outline {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(133.47deg) skewX(-3.05deg);
}
.cta-marker-fill {
    width: 21.33px;
    height: 21.33px;
    background: var(--hr-green-500);
}
.cta-marker-outline {
    width: 41.38px;
    height: 41.38px;
    border: .8px solid var(--hr-green-500);
}

.cta-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: rgba(51, 115, 159, .06);
    transition: background-color .2s ease;
}
a.cta-social:hover { background: rgba(51, 115, 159, .16); }
.cta-social i {
    display: block;
    width: 24px;
    height: 24px;
    background: var(--hr-blue-500);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Amber cluster + rule closing the card. Figma draws the rule (Line 26) at
   the card's full 760px width while the cluster starts at the 56px padding
   edge, so the row bleeds -56px each side and the cluster pads that back.
   -56px lands exactly on the card's outer edge because the white hairline is
   an inset box-shadow rather than a real border, leaving padding box and
   border box the same size. */
.cta-quick-divider {
    position: relative;
    display: flex;
    align-items: center;
    margin: 80px -56px 0;
}
.cta-quick-divider-cluster {
    position: relative;
    display: flex;
    flex-shrink: 0;
    padding-inline-start: 56px;
}
/* Absolute, not a flex-grow segment to the right of the cluster: Figma's Line
   26 runs the card's full width and the diamonds sit ON it, rather than the
   rule starting where the cluster ends. They're opaque, so no seam shows. */
.cta-quick-divider-line {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: rgba(217, 133, 0, .5);
}

/* ---------- Map ---------- */
.cta-map {
    position: relative;
    margin-top: 40px;
}
/* Containing block for the blur band, matching the illustration exactly, and
   clipping the few px it deliberately overhangs by. */
.cta-map-media {
    position: relative;
    overflow: hidden;
}
.cta-map-image {
    display: block;
    width: 100%;
    height: auto;
}
/* Figma's "Rectangle 25812" over the map's lower half: a backdrop blur plus a
   near-vertical cream wash, which softens the illustration as it runs off the
   bottom of the section instead of ending on a hard edge.

   Anchored to the bottom so the wash always meets the map's lower edge, and
   sized as a share of the illustration rather than in px. The map is
   width:100% / height:auto, so it is 680/1920 = 35.4% of the viewport width
   tall - a fixed 260px band is 38% of it at 1920 but swallows the whole thing
   by ~768px. 260/680 keeps that 38% at every width.

   189deg is Figma's own CSS export, not the 181.598deg the design-context tool
   reports. That figure is the angle in Figma's normalised unit-square space;
   scaling it by the rect's real 2043x345 box turns a 1.6deg tilt into 9.4deg
   (atan(0.0279 * 2043 / (0.9996 * 345))), which rounds to the 189deg here.
   A CSS gradient angle is physical, so 189deg holds the design's tilt at any
   viewport width - 181.598deg would have rendered all but vertical. */
.cta-map-blur {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 38.235%;
    pointer-events: none;
    background: linear-gradient(189deg, rgba(249, 247, 233, 0) 28.49%, rgba(249, 247, 233, .18) 86.48%);
    -webkit-backdrop-filter: blur(7.35px);
    backdrop-filter: blur(7.35px);
}
/* The "Multaqa" road sign (Figma node 40001286:68777). Every number below is
   that node's own geometry, expressed as a fraction of the map so the sign
   scales with the illustration: the 550x335 frame sits at x=91.14 / y=345
   inside the 1920x680 map (frame 40001286:68775), which puts the sign board's
   left edge on the map's 160px gutter and runs the posts off the bottom edge
   exactly - 345 + 335 = 680.

   clamp() keeps the design's 28.646% share of the map width down to 260px, at
   which point the type would stop being legible; below 576px the sign drops
   out of the overlay entirely (see the responsive block). */
.cta-map-card {
    position: absolute;
    inset-inline-start: 4.747%;
    bottom: 0;
    width: clamp(260px, 28.646%, 550px);
    aspect-ratio: 550 / 335;
    /* Lets the type and button below size in cqw, so they track the sign
       rather than staying at their 1920px sizes as it scales down. */
    container-type: inline-size;
}
.cta-map-card-sign {
    display: block;
    width: 100%;
    height: 100%;
}
/* Figma's "Frame 2147239143": x=126.758 y=123.242, 306x76 within the 550x335
   sign - the copy and the button, centred against each other. Logical inset so
   the Arabic layout puts the copy on the right and the button on the left; the
   artwork itself is near enough symmetrical to need no mirroring. */
.cta-map-card-body {
    position: absolute;
    inset-inline-start: 23.047%;
    top: 36.789%;
    width: 55.636%;
    height: 22.687%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4%;
    /* Figma gives #F9F7EA for both text styles - that is --hr-cream-500, not
       the near-white --hr-cream-50 this used to inherit. */
    color: var(--hr-cream-500);
}
/* The px value in each pair is the fallback for browsers without container
   query units; the clamp() that follows wins wherever cqw resolves. */
.cta-map-card-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    gap: clamp(2px, .727cqw, 4px);
    min-width: 0;
}
.cta-map-card-kicker {
    font-size: 16px;
    font-size: clamp(11px, 2.909cqw, 16px);
    line-height: 1.5;
}
.cta-map-card-copy strong {
    font-weight: 700;
    font-size: 32px;
    font-size: clamp(20px, 5.818cqw, 32px);
    line-height: 1.25;
}
/* Rebuilt from the button the SVG export used to carry, so it can be a real
   link: 56px disc, white at 20%, and the three-drop-plus-inner shadow stack
   Figma reuses across the site's primary buttons (cf. .hr-btn-primary). */
.cta-map-card-arrow {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 61px;
    border: 1.5px solid transparent;
    background: rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, .03),
        1px 10px 10px rgba(0, 0, 0, .03),
        2px 23px 14px rgba(0, 0, 0, .02),
        inset 0 4px 6.1px rgba(255, 255, 255, .23);
    transition: background-color .2s ease, transform .2s ease;
}
/* The rim is a vertical gradient, not a flat colour, so it can't be a border.
   Painted as a ring: a gradient-filled pseudo-element masked down to its own
   1.5px padding band. Stops converted from the export's paint23, whose y axis
   runs bottom-to-top and starts 1.65px above the disc. */
.cta-map-card-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1.5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .75) -3%, rgba(101, 104, 111, .39) 24%, #fff 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.cta-map-card-arrow:hover { background: rgba(255, 255, 255, .34); transform: scale(1.05); }
.cta-map-card-arrow:focus-visible { outline: 2px solid var(--hr-cream-50); outline-offset: 3px; }
.cta-map-card-arrow img {
    width: 24px;
    width: clamp(16px, 4.364cqw, 24px);
    height: auto;
}
[dir="rtl"] .cta-map-card-arrow img { transform: scaleX(-1); }

/* ---------- FAQ ----------
   Figma frame 40003108:111190: a 1920x824 band, 120px of padding top and
   bottom, two 740px columns 120px apart. Same two-column shape the Summit page
   builds in front/cms/summit/sections/faq.blade.php (.smt-faq), but rendering
   $faqs server-side rather than filling an empty accordion from JS. */
/* Bottom padding trimmed to 40px: the section now closes on the diamond rule
   below rather than on empty page, so the old 120px sat on top of the rule's
   own spacing as a visible gap. */
/* No top padding: .cta-main above already ends on 80px, and the section's own
   120px doubled that into a 200px void between the Send message button and this
   heading. 80px is the gap now.
   Bottom trimmed to 60px as well - with the column no longer padded out to a
   fixed 584px, 120px on top of that read as a large empty band between the last
   question and the dark footer band. */
/* 80px on top, matching .cta-main's own 80px bottom padding, so the diamond
   divider between them sits centred in the gap. It was 0: the divider's only
   air below was its own 20px padding against 100px above (80 + that 20), which
   read as the rule being tucked under the FAQ heading rather than separating
   the two sections. The 991.98px block below already gave the phone and tablet
   a 60px top; only the desktop step was missing. Same arrangement the gathering
   page has, where every .smt-diamond-divider sits between two sections that each
   carry 80-100px at that seam. */
.cta-faq { padding: 80px 160px 60px; }

/* Section break between the form and the FAQ, matching the gathering details
   page's .smt-diamond-divider. Full-bleed: it is a sibling of the sections, so
   it is not inside their 160px gutter, and only the 4.14px here keeps the first
   and last diamond's rotated points from being clipped by the viewport edge.

   .cta-diamond is cream-500 - right on the dark hero, invisible on this cream
   band - so the diamonds and the line are repainted #f3d9b0 (yellow-100), the
   same tone the gathering divider uses.

   gap 8.284px = 20 * (sqrt(2)-1): a rotated 20px square's point reaches 4.14px
   past its own box each side, so with no gap the five points overlap and read
   as one blob. The diamonds' own 4.142px inline margin is zeroed here so the
   gap alone spaces them. */
.cta-section-divider {
    display: flex;
    align-items: center;
    padding: 20px 4.14px;
}
.cta-section-divider-cluster { display: flex; align-items: center; flex-shrink: 0; gap: 8.284px; }
.cta-section-divider .cta-diamond { background: #f3d9b0; margin-inline: 0; }
.cta-section-divider-line { flex: 1 1 auto; height: 2px; background: #f3d9b0; }
@media (max-width: 767.98px) {
    /* Same trim as the gathering page: five 20px diamonds each side crowd a
       phone, so the outer two go and the rest scale down. */
    .cta-section-divider { padding-block: 0; }
    .cta-section-divider-cluster .cta-diamond:nth-child(n+4) { display: none; }
    .cta-section-divider .cta-diamond { width: 16px; height: 16px; }
    .cta-section-divider-cluster { gap: 6.627px; }
}

/* Same arrangement as the Annual Gathering page's FAQ. The title spans the row
   rather than sitting in a half column - that is what lets it hold ONE line at
   48px, where 740px forced the explicit break the artboard had.

Questions sit in the reading-FIRST position in both languages: left in
   English, right in Arabic. One template does both - in a grid with
   direction:rtl the first column IS the right one - so there is no [dir="rtl"]
   override to keep in step.

   .cta-faq-left is display:contents so its two remaining children - the heading
   and the card - become grid items in their own right, with no markup change. */
.cta-faq-inner {
    max-width: 1600px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 740fr) minmax(0, 740fr);
    column-gap: 120px;
    /* The h2 already carries 32px beneath it; a full 120px row gap on top of
       that left a visible empty band under the title. */
    row-gap: 8px;
    grid-template-areas:
        "head    head"
        "answers contact";
    align-items: start;
}
/* Its two children are placed by the grid above, so this wrapper carries no
   layout of its own. The old flex column with min-height:584px and the card
   pinned to its foot (margin-top:auto) went with it: the card now sits at the
   top of its own cell, level with the first question. */
.cta-faq-left { display: contents; }
.cta-faq-left h2 { grid-area: head; }
.cta-faq-help { grid-area: contact; }
.cta-faq-right { grid-area: answers; }
.cta-faq-left h2 {
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    color: var(--hr-brown-500);
    /* 32px, then 80px: the design's head block runs 0-208 and the card starts
       at 288 (frames 40003108:111192 / :111195). */
    margin: 0 0 32px;
}
/* "Questions" is yellow-500 here (#d98500), a step darker than the yellow-400
   .cta-accent carries elsewhere on the page. Scoped rather than changed on the
   shared class, since the form's own h1 accent was not part of this spec. */
.cta-faq-left h2 .cta-accent { color: var(--hr-yellow-500); }
/* Body Large/Regular - 24/32, not the 20px this had. */
.cta-faq-left > p {
    font-size: 24px;
    line-height: 32px;
    color: var(--hr-brown-300);
    margin: 0 0 80px;
}
/* The card's fill is a rotated radial gradient in Figma, which CSS cannot
   express; this is the same ramp as an axis-aligned ellipse - the matrix'
   radii work out to 850x312px about a centre 52px left and 50px above the
   740x292 box, hence the percentages. Stops are the design's own. */
.cta-faq-help {
    border-radius: 30px;
    padding: 42px 39px;
    background: radial-gradient(114.9% 106.8% at -7.1% -17.2%,
        #548aaf 0%, #2a6d9b 50%, #155f91 75%, #0b578c 87.5%, #005087 100%);
    color: var(--hr-cream-500);
}
.cta-faq-help h3 { font-size: 32px; line-height: 40px; font-weight: 700; margin: 0 0 24px; }
.cta-faq-help p { font-size: 20px; line-height: 28px; opacity: .7; margin: 0 0 32px; }
/* Figma instance 40003108:111199. 132x56 comes out of 24px/16px padding around
   a 16/24 bold label; the arrow child in the instance is hidden, so there is no
   icon. */
.cta-faq-help-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 16px 24px;
    border-radius: 61px;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid rgba(255, 255, 255, .1);
    color: var(--hr-cream-50);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-decoration: none;
    /* The shadow stack Figma reuses on every one of these translucent pills. */
    box-shadow:
        0 3px 6px rgba(0, 0, 0, .03),
        1px 10px 10px rgba(0, 0, 0, .03),
        2px 23px 14px rgba(0, 0, 0, .02),
        inset 0 4px 6.1px rgba(255, 255, 255, .23);
    transition: background-color .2s ease;
}
/* "Ellipse 262": a 100px white circle at 40%, blurred by an 18.55 std-dev
   Gaussian and blended plus-lighter, sitting just past the button's bottom
   edge so only the blur's upward bleed shows through overflow:hidden - a soft
   glow rising off the lower rim. Where plus-lighter is unsupported it falls
   back to a normal white blend, which is close enough. */
.cta-faq-help-btn::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-inline-start: -50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    filter: blur(18.55px);
    mix-blend-mode: plus-lighter;
    pointer-events: none;
}
.cta-faq-help-btn:hover { background: rgba(255, 255, 255, .34); color: var(--hr-cream-50); text-decoration: none; }

/* The accordion column is a fixed 584px in the design - six 80px rows, 8px
   apart, with one of them open. Past that it scrolls rather than running the
   section taller than the artwork beside it. */
/* A CAP, not a fixed height. It has to be capped rather than left to the grid
   stretch: stretch would size the row to whichever column is taller, so a long
   FAQ list would simply lengthen the row and never scroll. 584px is the design's
   column height - six 80px rows 8px apart with one of them open - and anything
   past it scrolls.

   max-height rather than height, because a fixed one held the column open at
   584px even when the list was shorter: five questions come to 524px, so 60px
   of dead space sat under the last row. min-height:0 lets a grid item shrink
   below its content. */
.cta-faq-right {
    max-height: 584px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Reserve the gutter always, so opening an item that tips the list over
       584px doesn't reflow every row narrower. */
    scrollbar-gutter: stable;
    /* Keeps the scrollbar off the cards' rounded end edge. */
    padding-inline-end: 10px;
    scrollbar-width: thin;
    /* Same bar as the Annual Gathering page's FAQ (.smt-faq-col-right
       .faq-lists): the thumb takes the page's own accent, and the second
       value - the TRACK - stays transparent on purpose, so only the moving bar
       is coloured and the groove doesn't draw a rule down the side of the
       list. */
    scrollbar-color: var(--hr-yellow-400) transparent;
}
.cta-faq-right::-webkit-scrollbar { width: 6px; }
.cta-faq-right::-webkit-scrollbar-track { background: transparent; }
.cta-faq-right::-webkit-scrollbar-thumb {
    background: var(--hr-yellow-400);
    border-radius: 3px;
}

/* Closed and open are two different treatments in Figma, not one card with a
   colour swap (instances 40003108:111201 / :111202). Closed carries no border
   and Figma's own fill is #f9f7e9 under a 2% black wash, which resolves to
   #f4f2e4 - the same value the open card then uses for its border. */
.cta-faq-item {
    background: #f4f2e4;
    border: 0;
    border-radius: 24px;
    margin-bottom: 8px;
    overflow: hidden;
}
/* app.css:1596/1607 - Bootstrap squares off the first item's top corners and
   the last item's bottom corners to --bs-accordion-border-radius (6px) so a
   stacked accordion reads as one block. These items are separate cards 8px
   apart, so all four corners keep the design's 24px. Both selectors match
   Bootstrap's (0,2,0) and win on order, this sheet loading after app.css. */
.cta-faq-item:first-of-type,
.cta-faq-item:last-of-type {
    border-radius: 24px;
}
.cta-faq-item:has(.accordion-button:not(.collapsed)) {
    background: #fbfaf0;
    border: 2px solid #f4f2e4;
}
.cta-faq-item .accordion-button {
    background: none;
    border: 0;
    box-shadow: none;
    gap: 24px;
    padding: 24px;
    text-align: start;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #49473d;
}
/* 24px of bottom padding would leave a 24px gap to the body; the design has
   16px between the question row and the answer. */
.cta-faq-item .accordion-button:not(.collapsed) { color: var(--hr-yellow-400); padding-bottom: 16px; }
/* Bootstrap's chevron is a background-image on ::after, which lets Figma's own
   exported buttons drop straight in - disc fill, gradient rim and chevron in
   one asset, rather than three CSS approximations of them. (The rim is a
   vertical gradient: white at 20% along the bottom, #65686F at 39% three
   quarters up, white at 75% along the top.)

   Each export is a 60x72 canvas with the 32x32 disc at 12,3 and its drop
   shadows filling the rest. Painting the whole canvas would force the header
   row to 72px, so the box stays 32px and the background is offset to crop to
   the disc; the shadows the crop discards are re-declared below in CSS. The
   inner highlight is not, because it falls inside the disc and survives.

   The active-state rule has to repeat every shared declaration Bootstrap
   overrides - it swaps in --bs-accordion-btn-active-icon and applies
   --bs-accordion-btn-icon-transform. */
.cta-faq-item .accordion-button::after,
.cta-faq-item .accordion-button:not(.collapsed)::after {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    /* Logical, because Bootstrap pushes its chevron with a physical
       margin-left:auto that lands on the wrong side in Arabic. */
    margin-inline-start: auto;
    border: 0;
    /* The box is square and the artwork is a circle, so the shadows below
       would be cast off the corners without this. */
    border-radius: 50%;
    background-color: transparent;
    background-image: url("../images/contact-revamp/faq-toggle.svg");
    background-size: 60px 72px;
    background-position: -12px -3px;
    background-repeat: no-repeat;
    /* filter0_dddi in both exports, converted: box-shadow's blur radius is
       twice feGaussianBlur's stdDeviation, so 3/5/7 become 6/10/14. The two
       further shadows Figma lists (7px 63px 18px and 4px 40px 16px) are at
       zero alpha and paint nothing. The inner white highlight is not repeated
       here - it sits inside the disc and is already in the asset. */
    box-shadow:
        0 3px 6px rgba(0, 0, 0, .03),
        1px 10px 10px rgba(0, 0, 0, .03),
        2px 23px 14px rgba(0, 0, 0, .02);
}
/* The open export already points up, so Bootstrap's rotate has to go. */
.cta-faq-item .accordion-button:not(.collapsed)::after {
    background-image: url("../images/contact-revamp/faq-toggle-open.svg");
    transform: none;
}

.cta-faq-item .accordion-body {
    padding: 0 24px 24px;
    font-size: 16px;
    line-height: 24px;
    /* !important because app.css:13415 carries a bare, global
       `.accordion-body { color: white !important }` from the old dark theme,
       which no ordinary selector can outrank. Two !important declarations are
       resolved on specificity, and this one is (0,2,0) against its (0,1,0).
       .summit-revamp .faq-lists .accordion-body does the same thing for the
       same reason. Colour is the design's own #66655c (node 40003103:27452). */
    color: var(--hr-brown-300) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .cta-hero, .cta-main, .cta-faq { padding-inline: 40px; }
    .cta-main-inner { gap: 48px; }
    /* column-gap, not the gap shorthand: that would reset the 8px row-gap set
       above and put the empty band back under the title. */
    .cta-faq-inner { column-gap: 60px; }
}
@media (max-width: 991.98px) {
    /* Scaled by width alone the map gets very short and thin - 272px tall at
       768px wide, 133px at 375px - and the illustration reads as a sliver.
       Below 992px it takes a fixed height and crops instead, which zooms in,
       and object-position pins the crop to the illustration's bottom edge so
       the sign still lands on the map rather than on empty ground. */
    .cta-map-image {
        height: 440px;
        object-fit: cover;
        object-position: center bottom;
    }
    /* The design's 160px gutter is a desktop measure; once the page is a single
       column the sign reads better centred. inset-inline:0 + margin-inline:auto
       rather than a translate, so it centres the same way in both directions -
       inset-inline-start:50% resolves to right:50% in Arabic and a fixed
       translateX would push it the wrong way. The 550px frame's own gutters are
       symmetrical (68.89px each side), so centring it centres the board too. */
    .cta-map-card {
        inset-inline: 0;
        margin-inline: auto;
    }
    /* Figma's responsive text styles for the sign (Utility/Caption/Regular and
       Body/Body Medium/Bold), taken down a step from their 12px / 20px-28px.
       Plain px, so they take over from the cqw clamps the desktop sizing uses.
       The two lines close up from both ends: the flex gap goes to 0, and the
       title's line box from 28px to 24px, which is 1px less half-leading above
       its caps on top of that. */
    .cta-map-card-copy { gap: 0; }
    .cta-map-card-kicker { font-size: 11px; font-weight: 400; line-height: normal; }
    .cta-map-card-copy strong { font-size: 18px; font-weight: 700; line-height: 24px; }
    .cta-main { padding-top: 60px; }
    .cta-main-inner { grid-template-columns: 1fr; }
    .cta-form-col h1 { font-size: 36px; line-height: 48px; margin-bottom: 32px; }
    .cta-quick { padding: 32px; }
    .cta-quick h2 { margin-bottom: 40px; }
    /* Bleed follows the card's own padding, which drops to 32px here. */
    .cta-quick-divider { margin: 40px -32px 0; }
    .cta-quick-divider-cluster { padding-inline-start: 32px; }
    .cta-faq { padding-top: 60px; padding-bottom: 60px; }
    /* Single column, with the help card moved below the accordion. It lives
       inside .cta-faq-left in the markup, so display:contents dissolves that
       wrapper and lets all four blocks order themselves against each other as
       siblings - no restructuring, and the two-column DOM stays intact. */
    .cta-faq-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .cta-faq-left { display: contents; }
    .cta-faq-left h2 {
        order: 1;
        font-size: 32px;
        line-height: 44px;
        text-align: center;
        margin-bottom: 16px;
    }
    .cta-faq-left > p {
        order: 2;
        text-align: center;
        margin-bottom: 40px;
    }
    .cta-faq-right { order: 3; }
    .cta-faq-help { order: 4; margin-top: 40px; }
}
@media (max-width: 767.98px) {
    .cta-hero, .cta-main, .cta-faq { padding-inline: 16px; }
    /* One breadcrumb size site-wide on the phone, taken from the Events
       listing (.evt-breadcrumb in events-revamp.css): 12px type, 8px gaps, a
       12px separator. Replaces the fluid 13-20px clamp this page carried. */
    .cta-breadcrumb { font-size: 12px; gap: 8px; }
    .cta-breadcrumb-sep { height: 12px; }
    .cta-map-image { height: 400px; }
}
@media (max-width: 575.98px) {
    .cta-form-row { grid-template-columns: 1fr; }
    .cta-map-image { height: 340px; }
}