/*=============================================
    CTA — browning
    Widget: classes/widgets/CTA/cta.php

    A rounded navy card, inset from the page edges, holding a heading, a short
    lead, a check-marked list and a gold button on one side, with a photo on
    the other.

    SIZING — everything is vw.
    `--cta-u` is one design pixel expressed in vw, so a value lifted straight
    off the mockup is written as calc(var(--cta-u) * 52). Re-pointing --cta-u
    at a different design canvas in a media query rescales the whole section at
    once; only the values a designer would genuinely redraw (type sizes and
    padding on phones) are restated per breakpoint.

        desktop  1440 canvas -> 100/1440 = 0.06944vw   fluid, no cap
        tablet   1024 canvas -> 1px                    design size, 768-1024
        mobile    375 canvas -> clamp(1px, .26667vw, 1.28px)

    Only the desktop unit is a bare vw figure. A vw unit pegged to a narrower
    canvas is exact at one width and wrong everywhere else in its range — the
    1024 unit renders at 76% by the time the query reaches 768, which is small
    enough to read as broken. Below the desktop range the unit is therefore
    pinned (tablet) or clamped (mobile) so the design never renders smaller than
    it was drawn. See the breakpoints at the end of the file.

    There is no maximum width and no px freeze at the top end: the card fills
    whatever Elementor container it is dropped into, and every value inside it
    keeps tracking the viewport, so a 2560 screen renders the section
    proportionally larger rather than the 1440 design in a fixed-size box.

    GUTTERS — the space left of the card always equals the space right of it at
    every width, because .cta sets padding-inline: one value feeds both sides
    and no later rule can set one without the other.

    SPACING — the column gap is not its own number. --cta-gap points at
    --cta-card-pad, so the space between the copy and the photo is always the
    same as the space around them; restating the padding at a breakpoint moves
    the gap with it and there is no second value to keep in step.

    Sizing sits on the same 1440 canvas and the same breakpoints as hero.css,
    service.css and why-us.css, so the sections scale together.

    Palette is declared on .cta rather than :root — hero.css owns the global
    tokens and is only loaded on pages that use the hero, so this section has
    to stand on its own.
    Loaded only where the widget is used (get_style_depends).
=============================================*/

.cta {
    /* one design pixel, 1440 canvas */
    --cta-u: 0.06944vw;

    /* palette — every one of these is also an Elementor control */
    --cta-navy: #142535;
    --cta-ink: #ffffff;
    --cta-body: rgba(255, 255, 255, .78);
    --cta-accent: #e8b64a;
    --cta-accent-ink: #1c3244;

    /* layout */
    --cta-pad-y: calc(var(--cta-u) * 80);
    --cta-pad-x: calc(var(--cta-u) * 40);
    /* The lighter pool sits low and left of centre, exactly as drawn; the
       linear layer underneath keeps the top and bottom edges dark. Held in a
       property rather than written straight onto the card so the Clear
       Built-in Gradient control can set it to `none` — a background colour
       picked in the panel writes background-color, which would otherwise sit
       under these layers and never show. */
    --cta-card-wash:
        radial-gradient(76% 120% at 12% 62%, rgba(46, 96, 130, .9) 0%, rgba(24, 54, 78, 0) 64%),
        linear-gradient(180deg, #10222f 0%, #16334a 55%, #0e1f2e 100%);

    --cta-card-pad: calc(var(--cta-u) * 64);
    --cta-card-radius: calc(var(--cta-u) * 36);
    /* deliberately not a number of its own — see SPACING above */
    --cta-gap: var(--cta-card-pad);
    --cta-media-w: calc(var(--cta-u) * 592);
    --cta-media-ratio: 1.35;
    /* distance the photo travels in on entrance; flipped for a left photo */
    --cta-media-from: calc(var(--cta-u) * 34);

    /* type scale */
    --cta-title-size: calc(var(--cta-u) * 52);
    --cta-text-size: calc(var(--cta-u) * 18);
    --cta-item-size: calc(var(--cta-u) * 15);
    --cta-btn-size: calc(var(--cta-u) * 18);

    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* split so the two gutters can never drift apart: one value feeds both
       sides, and no later rule can set one without the other */
    padding-block: var(--cta-pad-y);
    padding-inline: var(--cta-pad-x);
}

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

/* ============ Card ============ */
.cta__card {
    position: relative;
    /* no max-width: the card takes the full width of its Elementor container,
       and the gutters either side come from .cta's padding-inline */
    padding: var(--cta-card-pad);
    border-radius: var(--cta-card-radius);
    background-color: var(--cta-navy);
    background-image: var(--cta-card-wash);
    color: var(--cta-ink);
    overflow: hidden;
}

.cta__inner {
    display: flex;
    align-items: center;
    gap: var(--cta-gap);
}

/* the copy column takes whatever the photo leaves, rather than both halving
   on a narrow laptop */
.cta__content {
    flex: 1 1 auto;
    min-width: 0;
}

.cta__media {
    position: relative;
    /* allowed to shrink, never to grow: in a container too narrow for the
       design width the column gives ground instead of overflowing the row,
       which would push the copy past the card's padding */
    flex: 0 1 var(--cta-media-w);
    max-width: var(--cta-media-w);
}

/* photo on the left: swap the visual order only, so the DOM keeps the heading
   before the image for screen readers and for mobile stacking */
.cta--media-left .cta__media {
    order: 0;
    --cta-media-from: calc(var(--cta-u) * -34);
}

.cta--media-left .cta__content {
    order: 1;
}

.cta--align-top .cta__inner {
    align-items: flex-start;
}

.cta--align-bottom .cta__inner {
    align-items: flex-end;
}

/* ============ Figure ============ */
.cta__figure {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cta-media-ratio);
    overflow: hidden;
    border-radius: calc(var(--cta-u) * 20);
}

.cta__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* a free crop drops the forced ratio and lets the image set its own height */
.cta--ratio-free .cta__figure {
    aspect-ratio: auto;
}

.cta--ratio-free .cta__figure img {
    height: auto;
}

/* ============ Title ============ */
.cta__title {
    margin: 0 0 calc(var(--cta-u) * 18);
    font-size: var(--cta-title-size);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--cta-ink);
}

/* ============ Copy ============ */
.cta__text {
    margin: 0 0 calc(var(--cta-u) * 26);
    /* the design breaks this line after "picks up"; the copy column is wider
       than that, so the wrap comes from here rather than from the column */
    max-width: calc(var(--cta-u) * 500);
    font-size: var(--cta-text-size);
    line-height: 1.55;
    color: var(--cta-body);
}

.cta__text p {
    margin: 0 0 1em;
}

.cta__text p:last-child {
    margin-bottom: 0;
}

/* ============ Checklist ============ */
.cta__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--cta-u) * 14);
    margin: 0 0 calc(var(--cta-u) * 36);
    padding: 0;
    list-style: none;
}

.cta__item {
    display: flex;
    align-items: center;
    gap: calc(var(--cta-u) * 14);
    font-size: var(--cta-item-size);
    font-weight: 500;
    line-height: 1.4;
    color: var(--cta-ink);
}

/* an item is only a link when a row was given one; it should read as the same
   line of text either way, so only the hover marks it out */
.cta__item-link {
    color: inherit;
    text-decoration: none;
}

.cta__item-link:hover,
.cta__item-link:focus {
    color: var(--cta-accent);
}

.cta__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(var(--cta-u) * 24);
    color: var(--cta-ink);
}

.cta__item-icon svg {
    width: 100%;
    height: auto;
    fill: none;
    stroke: currentColor;
}

.cta__item-icon i {
    font-size: calc(var(--cta-u) * 18);
    line-height: 1;
}

/* ============ Button ============ */
.cta__actions {
    display: flex;
}

.cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--cta-u) * 10);
    padding: calc(var(--cta-u) * 19) calc(var(--cta-u) * 34);
    border: 0;
    border-radius: calc(var(--cta-u) * 6);
    background: var(--cta-accent);
    font-size: var(--cta-btn-size);
    font-weight: 600;
    line-height: 1;
    color: var(--cta-accent-ink);
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.cta__btn:hover,
.cta__btn:focus {
    background: var(--cta-ink);
    color: var(--cta-accent-ink);
    transform: translateY(calc(var(--cta-u) * -2));
}

.cta__btn svg {
    width: calc(var(--cta-u) * 16);
    height: calc(var(--cta-u) * 16);
    fill: currentColor;
}

.cta__btn i {
    font-size: calc(var(--cta-u) * 15);
    line-height: 1;
}

/*=============================================
    Entrance animation
    Held at frame one by assets/css/reveal.css until scrolled into view.
=============================================*/
@media (prefers-reduced-motion: no-preference) {

    .cta--animated .cta__title,
    .cta--animated .cta__text,
    .cta--animated .cta__item,
    .cta--animated .cta__actions {
        animation: cta-fade-up .7s cubic-bezier(.22, 1, .36, 1) both;
    }

    .cta--animated .cta__title { animation-delay: .12s; }
    .cta--animated .cta__text { animation-delay: .20s; }
    .cta--animated .cta__item:nth-child(1) { animation-delay: .28s; }
    .cta--animated .cta__item:nth-child(2) { animation-delay: .34s; }
    .cta--animated .cta__item:nth-child(3) { animation-delay: .40s; }
    .cta--animated .cta__item:nth-child(n+4) { animation-delay: .46s; }
    .cta--animated .cta__actions { animation-delay: .54s; }

    /* the photo comes in from its own side rather than up with the copy */
    .cta--animated .cta__media {
        animation: cta-media-in .8s cubic-bezier(.22, 1, .36, 1) .06s both;
    }

    /* gentle continuous drift, opt-in via the Ambient Motion control */
    .cta--float .cta__media {
        animation:
            cta-media-in .8s cubic-bezier(.22, 1, .36, 1) .06s both,
            cta-drift 7s ease-in-out 1.2s infinite;
    }
}

@keyframes cta-fade-up {
    from { opacity: 0; transform: translateY(calc(var(--cta-u) * 26)); }
    to   { opacity: 1; transform: none; }
}

/* the offset is a variable so the photo always enters from the side it sits
   on; custom properties inside a keyframe resolve against the animated
   element, which inherits this from .cta */
@keyframes cta-media-in {
    from { opacity: 0; transform: translateX(var(--cta-media-from)); }
    to   { opacity: 1; transform: none; }
}

@keyframes cta-drift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(var(--cta-u) * -8)); }
}

/*=============================================
    Breakpoints
=============================================*/

/* Tablet — 1024 canvas.

   THE UNIT STOPS TRACKING THE VIEWPORT HERE, and that is the point. A
   1024-canvas vw unit is only 1 design px at exactly 1024 wide; this query runs
   all the way down to 768, where 0.09766vw is 0.75px and the whole tablet
   design lands at 76% — a 40px heading arriving as 30px. Pinning the unit to
   1px renders the tablet design at the size it was drawn at every width in the
   range; the layout still adapts, because the widths here are percentages
   rather than design pixels. */
@media (max-width: 1024px) {

    .cta {
        --cta-u: 1px;
        --cta-pad-y: calc(var(--cta-u) * 56);
        --cta-pad-x: calc(var(--cta-u) * 32);
        --cta-card-pad: calc(var(--cta-u) * 40);
        --cta-card-radius: calc(var(--cta-u) * 28);
        --cta-media-w: 100%;
        --cta-title-size: calc(var(--cta-u) * 40);
        --cta-text-size: calc(var(--cta-u) * 17);
        --cta-item-size: calc(var(--cta-u) * 16);
        --cta-btn-size: calc(var(--cta-u) * 17);
    }

    /* One column from 1024 down. Two columns cannot hold across this range: a
       photo wide enough to be worth showing left the copy under 240px at the
       bottom of the range, which is the layout breaking rather than adapting. */
    .cta__inner {
        flex-direction: column;
        align-items: stretch;
    }

    /* the heading leads once stacked, whichever side the photo takes on desktop
       — DOM order already has it first, so the order swap is simply dropped */
    .cta--media-left .cta__media,
    .cta--media-left .cta__content {
        order: 0;
    }

    .cta__media {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .cta__text {
        max-width: none;
    }
}

/* Mobile — 375 canvas, single column. The type sizes here are the mobile
   design, not the desktop scale shrunk, which at this canvas would put the
   heading near 140px.

   The unit stays fluid but bounded. Unclamped it would render the design at 85%
   on a 320 phone and at 205% at 767 — the first too small, the second absurd.
   Floored at 1px a small phone gets the design at the size it was drawn, and
   the ceiling lets a large phone step up a little without running away. */
@media (max-width: 767px) {

    .cta {
        --cta-u: clamp(1px, 0.26667vw, 1.28px);
        --cta-pad-y: calc(var(--cta-u) * 40);
        --cta-pad-x: calc(var(--cta-u) * 16);
        --cta-card-pad: calc(var(--cta-u) * 24);
        --cta-card-radius: calc(var(--cta-u) * 24);
        --cta-media-w: 100%;
        --cta-media-ratio: 1.2;
        --cta-title-size: calc(var(--cta-u) * 32);
        --cta-text-size: calc(var(--cta-u) * 16);
        --cta-item-size: calc(var(--cta-u) * 15);
        --cta-btn-size: calc(var(--cta-u) * 16);
    }

    .cta__btn {
        /* a full-width tap target reads as the section's one action. The row
           stays a flex container — the Alignment control writes display:flex
           at desktop and that rule applies at every width — so the button is
           stretched by its own width rather than by align-items */
        width: 100%;
        padding: calc(var(--cta-u) * 17) calc(var(--cta-u) * 24);
    }
}