/* Closing CTA band + registered offices, ported from the iapp-marketing
   WordPress theme (assets/style.css section 23). Everything is scoped to
   .ft-cta-band so the dark .footer-v2 panels below are untouched.

   The band is deliberately light: it is the one white section at the top of an
   otherwise dark footer, exactly as on the reference design. */

.ft-cta-band {
    /* the reference footer runs a violet gradient where the rest of the site
       uses brand blue */
    --ft-accent: #6156fb;
    --ft-accent-2: #8e61fa;
    --ft-grad: linear-gradient(90deg, #4151fb 0%, #8e61fa 100%);
    --ft-ink: #0d1526;
    --ft-muted: #5c6779;
    --ft-line: #e6eaf1;
    --ft-white: #ffffff;

    position: relative;
    /* own stacking context: the aura and the wordmark sit at z-index -1, i.e.
       above this background but below the copy */
    isolation: isolate;
    overflow: hidden;
    /* a soft violet wash top and bottom, easing back to white through the
       middle where the headline/button sit, so the band reads as a colour
       block rather than flat white without losing text contrast */
    background: linear-gradient(180deg, #f4f2ff 0%, #ffffff 30%, #ffffff 70%, #f6f3ff 100%);
    color: var(--ft-muted);
    font-size: 14px;
    text-align: center;
}

/* soft tint behind the closing CTA, keeps the white from going flat */
.ft-cta-band .ft-aura {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58% 42% at 50% 6%, rgba(97, 86, 251, 0.09) 0%, transparent 72%),
        radial-gradient(80% 46% at 50% 98%, rgba(97, 86, 251, 0.05) 0%, transparent 74%);
}

/* two soft, slowly-drifting gradient orbs for extra depth behind the hero
   copy — blurred well past the point of reading as shapes, just ambient
   colour motion so the white band doesn't feel static */
.ft-cta-band .ft-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    will-change: transform;
}

.ft-cta-band .ft-orb--1 {
    top: -60px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(97, 86, 251, 0.22) 0%, transparent 70%);
    animation: ft-orb-float-a 15s ease-in-out infinite;
}

.ft-cta-band .ft-orb--2 {
    top: 30%;
    right: -100px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(142, 97, 250, 0.18) 0%, transparent 70%);
    animation: ft-orb-float-b 19s ease-in-out infinite;
}

@keyframes ft-orb-float-a {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(36px, 24px) scale(1.12);
    }
}

@keyframes ft-orb-float-b {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-30px, -26px) scale(1.08);
    }
}

.ft-cta-band .ft-container {
    max-width: 1472px;
    margin-inline: auto;
    padding-inline: 24px;
    width: 100%;
}

/* ---------- centred CTA ---------- */

.ft-cta-band .ft-hero {
    position: relative;
    padding-block: clamp(52px, 6vw, 96px);
    border-bottom: 1px solid var(--ft-line);
}

/* oversized wordmark sitting behind the CTA as a watermark.
   It owns transform for the vertical centring, so the idle drift keyframe has
   to restate translateY(-50%) rather than compose with it. */
.ft-cta-band .ft-wordmark {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    z-index: -1;
    margin: 0;
    transform: translateY(-50%);
    animation: ft-wordmark-drift 16s ease-in-out infinite;
    will-change: transform;
    font-size: clamp(140px, 30vw, 460px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(13, 21, 38, 0.06);
    user-select: none;
    pointer-events: none;
}

@keyframes ft-wordmark-drift {
    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-52%) scale(1.02);
    }
}

.ft-cta-band .ft-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ft-cta-band .ft-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ft-accent);
}

/* rules on both sides, since the whole band is centred; they draw themselves
   outward once the eyebrow is revealed */
.ft-cta-band .ft-eyebrow::before,
.ft-cta-band .ft-eyebrow::after {
    content: "";
    width: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
    transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s;
}

.ft-cta-band .ft-eyebrow.is-visible::before,
.ft-cta-band .ft-eyebrow.is-visible::after {
    width: 28px;
}

.ft-cta-band .ft-cta-title {
    max-width: 22ch;
    margin: 0 0 18px;
    font-size: clamp(32px, 5vw, 66px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ft-ink);
}

/* the one italic note in an otherwise geometric type system */
.ft-cta-band .ft-cta-title em {
    font-style: italic;
    font-weight: 800;
    color: var(--ft-accent);
}

.ft-cta-band .ft-cta-sub {
    max-width: 52ch;
    margin: 0 auto 30px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ft-muted);
}

/* ---------- strategy button ---------- */

.ft-cta-band .ft-btn-strategy {
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 14px 65px 14px 30px;
    border: 1px solid transparent;
    border-radius: 100px;
    background-color: transparent;
    background-image: var(--ft-grad);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 17px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    animation: ft-btn-pulse 2.6s ease-in-out infinite;
}

/* a soft ring that breathes outward, drawing the eye to the primary action
   without being loud about it — paused on hover so it doesn't fight the
   deliberate hover choreography below */
@keyframes ft-btn-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(97, 86, 251, 0.32);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(97, 86, 251, 0);
    }
}

.ft-cta-band .ft-btn-strategy:hover {
    animation-play-state: paused;
}

/* light sweeping across the pill on hover, clipped by the border radius */
.ft-cta-band .ft-btn-strategy::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.34) 50%, transparent 62%);
    background-size: 240% 100%;
    background-position: 150% 0;
    transition: background-position 0.85s ease;
}

.ft-cta-band .ft-btn-strategy:hover::after,
.ft-cta-band .ft-btn-strategy:focus-visible::after {
    background-position: -60% 0;
}

.ft-cta-band .ft-btn-strategy .btn-text {
    position: relative;
    z-index: 2;
}

.ft-cta-band .ft-btn-strategy .icon-circle {
    z-index: 2;
    background-color: #000;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.4s ease;
}

.ft-cta-band .ft-btn-strategy .icon-circle svg path {
    transition: fill 0.4s ease;
}

/* the label padding and the disc swap sides together */
.ft-cta-band .ft-btn-strategy:hover {
    background-image: none;
    background-color: #000;
    border-color: #000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    padding: 14px 30px 14px 65px;
    color: #fff;
}

.ft-cta-band .ft-btn-strategy:hover .icon-circle {
    right: calc(100% - 55px);
    background-color: #fff;
}

.ft-cta-band .ft-btn-strategy:hover .icon-circle svg path {
    fill: #000;
}

/* ---------- quick contact row, pipe-separated ---------- */

.ft-cta-band .ft-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 26px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
}

.ft-cta-band .ft-quick li {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 0;
    color: var(--ft-muted);
}

.ft-cta-band .ft-quick li:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 14px;
    background: var(--ft-line);
}

/* style.css sets `footer li a { color: #2d2d43 }` — restated here so the row
   keeps the reference colours */
footer .ft-cta-band .ft-quick a {
    color: var(--ft-ink);
    font-weight: 600;
    margin-bottom: 0;
    text-decoration: none;
    transition: color 0.26s ease;
}

footer .ft-cta-band .ft-quick a:hover,
footer .ft-cta-band .ft-quick a:focus-visible {
    color: var(--ft-accent);
}

/* ---------- global presence: office switcher over the globe ----------
   One block for what used to be two renderings of the same four offices: the
   static cards that sat here, and the "Explore Our Global Presence" map
   section on testimonials.blade.php. The tab list on the left drives one panel
   per office on the right; the panels share a single grid cell, so the stage
   keeps the height of the tallest address and nothing shifts as they swap. */

.ft-cta-band .ft-presence {
    padding-top: clamp(40px, 4.6vw, 74px);
    padding-bottom: clamp(40px, 4.6vw, 74px);
}

.ft-cta-band .ft-presence-head {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ft-cta-band .ft-presence-title {
    max-width: 24ch;
    margin: 0 0 14px;
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--ft-ink);
}

.ft-cta-band .ft-presence-title em {
    font-style: italic;
    font-weight: 800;
    color: var(--ft-accent);
}

.ft-cta-band .ft-presence-sub {
    max-width: 62ch;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ft-muted);
}

.ft-cta-band .ft-presence-grid {
    /* offices stacked down the left, map alongside them: the column is capped
       rather than fluid so the cards keep a readable measure and the 2.5:1
       artwork gets the rest of the width */
    display: grid;
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 2.6vw, 44px);
    max-width: 1280px;
    margin: clamp(28px, 3.4vw, 52px) auto 0;
    text-align: left;
}

/* ---------- office cards ----------
   One card per office down the left. Where the pointer can hover, a card is
   collapsed to its header and opens its address and phone over the cards below
   (see the hover block further down); on touch they all stay open. */

.ft-cta-band .ft-offices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}


.ft-cta-band .ft-office {
    position: relative;
    padding: 14px 16px;
    border: 1px solid var(--ft-line);
    border-radius: 14px;
    background: linear-gradient(160deg, #ffffff 0%, #faf9ff 100%);
    box-shadow: 0 3px 14px rgba(13, 21, 38, 0.045);
    overflow: hidden;
    transition:
        border-color 0.3s ease,
        box-shadow 0.35s ease;
}

/* gradient rail that unrolls down the highlighted card, echoing the CTA
   button's gradient so the cards and the primary action read as one family */
.ft-cta-band .ft-office::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background-image: var(--ft-grad);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ft-cta-band .ft-office.is-active {
    border-color: transparent;
    box-shadow:
        0 12px 28px rgba(97, 86, 251, 0.13),
        0 2px 8px rgba(13, 21, 38, 0.05);
}

.ft-cta-band .ft-office.is-active::before {
    transform: scaleY(1);
}

.ft-cta-band .ft-office-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ft-cta-band .ft-office-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ft-cta-band .ft-office-country {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ft-ink);
}

.ft-cta-band .ft-office-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ft-muted);
}

/* the flag sits in a soft gradient badge instead of floating bare */
.ft-cta-band .ft-flag {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(97, 86, 251, 0.1), rgba(142, 97, 250, 0.14));
    transition:
        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        background 0.35s ease;
}

.ft-cta-band .ft-office.is-active .ft-flag {
    transform: scale(1.06);
    background: linear-gradient(135deg, rgba(97, 86, 251, 0.18), rgba(142, 97, 250, 0.24));
}

.ft-cta-band .ft-flag svg {
    display: block;
    width: 26px;
    height: 17px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(13, 21, 38, 0.1);
    transition: box-shadow 0.3s ease;
}

.ft-cta-band .ft-office.is-active .ft-flag svg {
    box-shadow: 0 0 0 1px rgba(97, 86, 251, 0.35);
}

/* style.css centres a broad sweep of copy at phone widths, which reaches
   these cards too — their heading stays left-aligned at every size */
footer .ft-cta-band .ft-office {
    text-align: left;
}

/* ---------- world map + markers ---------- */

.ft-cta-band .ft-presence-map {
    position: relative;
    /* marker labels sit beside their dot and the rightmost office is at 92% of
       the width, so they are allowed to run past the artwork's edge */
    overflow: visible;
    /* the artwork's own box, so the marker percentages the partial computes
       from latitude/longitude land where the projection puts them at any width */
    aspect-ratio: 1492 / 592;
}

.ft-cta-band .ft-map {
    display: block;
    width: 100%;
    height: 100%;
    /* the source SVG draws its dots in near-white, which all but disappears on
       this band — inverting them to near-black and easing the opacity back
       down gives a dot grid whose weight we actually control */
    filter: invert(1) opacity(0.28);
    pointer-events: none;
    user-select: none;
}

.ft-cta-band .ft-pin {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
}

.ft-cta-band .ft-pin-dot {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-image: var(--ft-grad);
    box-shadow:
        0 0 0 4px rgba(97, 86, 251, 0.14),
        0 2px 6px rgba(13, 21, 38, 0.2);
    transition:
        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.35s ease;
}

.ft-cta-band .ft-pin:hover .ft-pin-dot,
.ft-cta-band .ft-pin.is-active .ft-pin-dot {
    transform: scale(1.22);
    box-shadow:
        0 0 0 6px rgba(97, 86, 251, 0.2),
        0 3px 10px rgba(97, 86, 251, 0.4);
}

/* halo that keeps pinging out of the open office's marker */
.ft-cta-band .ft-pin::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--ft-accent);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.ft-cta-band .ft-pin.is-active::after {
    animation: ft-pin-ping 2.4s ease-out infinite;
}

@keyframes ft-pin-ping {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(3.6);
    }
}

/* Hidden everywhere by default — the script fills it in and toggles
   .is-open on every viewport, but it only actually gets a `display` (inside
   the max-width:560px block below) at phone widths. Without this base rule
   it's a bare, unstyled <div> the rest of the time, so as soon as anything
   was ever activated once, its innerHTML would just sit there rendered as
   plain content under the map on desktop too. */
.ft-cta-band .ft-mobile-card {
    display: none;
}

/* the full card a marker opens on hover/tap/is-active — flag, address, phone,
   not just the country name. Anchored to whichever side of its dot has room,
   via the .ft-pin--left/--right/--flip-v modifiers the script adds once it
   knows where the dot actually sits in the viewport. */
.ft-cta-band .ft-pin-card {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: max-content;
    max-width: 240px;
    padding: 12px 14px;
    border: 1px solid var(--ft-line);
    border-radius: 12px;
    background: var(--ft-white);
    box-shadow: 0 14px 30px rgba(13, 21, 38, 0.14);
    text-align: left;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ft-cta-band .ft-pin:hover .ft-pin-card,
.ft-cta-band .ft-pin:focus-within .ft-pin-card,
.ft-cta-band .ft-pin.is-active .ft-pin-card {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.ft-cta-band .ft-pin-card .ft-flag {
    width: 34px;
    height: 34px;
}

.ft-cta-band .ft-pin-card .ft-flag svg {
    width: 20px;
    height: 13px;
}

.ft-cta-band .ft-pin-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ft-cta-band .ft-pin-card-body strong {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ft-ink);
}

.ft-cta-band .ft-pin-card-addr {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ft-muted);
}

.ft-cta-band .ft-pin-card-tel {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ft-accent);
}

/* markers past the map's right/bottom edge would push their card outside the
   viewport opening rightward/downward — flip to the opposite side instead */
.ft-cta-band .ft-pin--left .ft-pin-card {
    left: auto;
    right: calc(100% + 10px);
    transform: translateY(-50%) translateX(6px);
}

.ft-cta-band .ft-pin--left.ft-pin.is-active .ft-pin-card,
.ft-cta-band .ft-pin--left.ft-pin:hover .ft-pin-card,
.ft-cta-band .ft-pin--left.ft-pin:focus-within .ft-pin-card {
    transform: translateY(-50%) translateX(0);
}

.ft-cta-band .ft-pin--flip-v .ft-pin-card {
    top: auto;
    bottom: 0;
}

/* the headline travels a little further than the copy around it */
footer .ft-cta-band .ft-cta-title.footer-reveal {
    transform: translateY(30px);
}

/* the pill scales in rather than sliding, so it reads as one object — and the
   transition is spelled out so the hover choreography keeps its own timing */
footer .ft-cta-band .ft-btn-strategy.footer-reveal {
    transform: translateY(18px) scale(0.96);
    transition:
        opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
        padding 0.4s ease,
        background-color 0.4s ease,
        background-image 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

footer .ft-cta-band .ft-cta-title.footer-reveal.is-visible,
footer .ft-cta-band .ft-btn-strategy.footer-reveal.is-visible {
    transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 992px) {
    /* map above, offices two-up beneath it, once the pair stacks */
    .ft-cta-band .ft-presence-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .ft-cta-band .ft-presence-map {
        order: -1;
    }

    .ft-cta-band .ft-offices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* two-up under the map: the reserved height above is for the single
           column beside it, and would only leave a hole here */
        min-height: 0;
    }
}

@media (max-width: 767px) {
    .ft-cta-band .ft-btn-strategy {
        font-size: 15px;
        padding: 12px 58px 12px 24px;
    }

    .ft-cta-band .ft-btn-strategy:hover {
        padding: 12px 24px 12px 58px;
    }

    .ft-cta-band .ft-btn-strategy .icon-circle {
        width: 40px;
        height: 40px;
    }

    .ft-cta-band .ft-btn-strategy:hover .icon-circle {
        right: calc(100% - 50px);
    }
}

@media (max-width: 560px) {
    /* The map used to be hidden at phone widths, back when the office list
       carried its own copy of every address/phone — now that the list is
       just names and the map (or tapping a list card, which opens the same
       marker card — see the script) is the ONLY way to reach that info, it
       has to stay visible everywhere, small as it renders. */
    .ft-cta-band .ft-offices {
        grid-template-columns: minmax(0, 1fr);
    }

    .ft-cta-band .ft-quick,
    .ft-cta-band .ft-quick li {
        gap: 10px;
    }

    .ft-cta-band .ft-quick li:not(:last-child)::after {
        display: none;
    }

    .ft-cta-band .ft-wordmark {
        -webkit-text-stroke-width: 0.75px;
    }

    /* The left/right/above/below-the-dot positioning is tuned for a wide
       desktop map; the phone map is barely 140px tall, sitting right above
       the office list, so ANY anchor-to-the-dot placement ends up either
       clipped by the map's own edge or spilling onto the list below it, or
       (once detached and fixed to the viewport instead) up to four
       identically-positioned copies painting over each other at once if
       more than one was ever visible together. The per-marker card is
       simplest just switched off here entirely — display:none removes it
       from layout AND paint, no exceptions — and .ft-mobile-card (a single
       element the script fills in from whichever marker is active, see
       below) is the one and only detail card at this width. */
    .ft-cta-band .ft-pin-card {
        display: none !important;
    }

    .ft-cta-band .ft-mobile-card {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 20;
        display: none;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
        border: 1px solid var(--ft-line);
        border-radius: 14px;
        background: var(--ft-white);
        box-shadow: 0 16px 34px rgba(13, 21, 38, 0.18);
        text-align: left;
    }

    .ft-cta-band .ft-mobile-card.is-open {
        display: flex;
    }

    .ft-cta-band .ft-mobile-card .ft-flag {
        width: 34px;
        height: 34px;
    }

    .ft-cta-band .ft-mobile-card .ft-flag svg {
        width: 20px;
        height: 13px;
    }

    .ft-cta-band .ft-mobile-card .ft-pin-card-body {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .ft-cta-band .ft-mobile-card .ft-pin-card-body strong {
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--ft-ink);
    }

    .ft-cta-band .ft-mobile-card .ft-pin-card-addr {
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--ft-muted);
    }

    .ft-cta-band .ft-mobile-card .ft-pin-card-tel {
        font-size: 13px;
        font-weight: 600;
        color: var(--ft-accent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ft-cta-band .ft-wordmark {
        animation: none;
    }

    /* switching offices genuinely changes what is readable, so the state
       stays — only the motion around it goes */
    .ft-cta-band .ft-office::before,
    .ft-cta-band .ft-pin-dot,
    .ft-cta-band .ft-pin-card {
        transition: none;
    }

    .ft-cta-band .ft-office.is-active .ft-flag {
        transform: none;
    }

    .ft-cta-band .ft-pin.is-active::after {
        animation: none;
    }

    .ft-cta-band .ft-btn-strategy::after {
        display: none;
    }

    .ft-cta-band .ft-btn-strategy {
        animation: none;
    }

    .ft-cta-band .ft-orb--1,
    .ft-cta-band .ft-orb--2 {
        animation: none;
    }

    /* reveal targets are hidden by default, so they must be released here
       rather than merely having their transition removed */
    footer .ft-cta-band .footer-reveal,
    footer .ft-cta-band .ft-cta-title.footer-reveal,
    footer .ft-cta-band .ft-btn-strategy.footer-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ft-cta-band .ft-eyebrow::before,
    .ft-cta-band .ft-eyebrow::after {
        width: 28px;
        transition: none;
    }
}