/* ============================================
   Radtak Solutions — brand overrides
   Loads AFTER styles.css. Template look intact,
   only the brand accent + a few additions.
   ============================================ */

/* ---- Text logo (zap + wordmark) ---- */
.logo-site {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-site .logo-mark {
    display: inline-flex;
    flex-shrink: 0;
}

.logo-site .logo-mark svg {
    width: 34px;
    height: 34px;
}

.logo-site .logo-text {
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    color: #17453B;
    letter-spacing: 0.08em;
}

footer .footer-logo .logo-text {
    color: #17453B;
}

.offcanvas-menu .logo-site .logo-text {
    color: var(--white);
}

/* ---- Mega-ish dropdown: group labels + two columns ---- */
.sub-menu .sub-menu-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-400);
    padding: 10px 16px 4px;
    white-space: nowrap;
}

.sub-menu.sub-menu-wide {
    min-width: 480px;
    display: flex;
    flex-wrap: wrap;
}

.sub-menu.sub-menu-wide .sub-menu-col {
    flex: 1 1 50%;
    min-width: 220px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ---- Hero trust bar (text marquee instead of logo marquee) ---- */
.infiniteSlide_partner .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 600;
    color: var(--neutral-500);
    white-space: nowrap;
}

/* Dot separators removed — the marquee gap carries the rhythm on its own. */

/* ---- Quote block inside the dark statistic section ---- */
.radtak-quote {
    border-left: 3px solid var(--brand);
    padding-left: 24px;
    margin-top: 56px;
}

.radtak-quote .quote-text {
    font-size: 20px;
    line-height: 32px;
    color: var(--neutral-200);
    margin-bottom: 16px;
}

.radtak-quote .quote-cite {
    font-size: 14px;
    color: var(--neutral-400);
    font-weight: 600;
}

/* ---- Section link (e.g. "Read the case studies →") ---- */
.radtak-link-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    margin-top: 24px;
}

.radtak-link-more:hover {
    color: var(--brand);
}

.section-statistic .radtak-link-more {
    color: var(--white);
}

.section-statistic .radtak-link-more:hover {
    color: var(--brand);
}

/* ---- Who-its-for / use-case cards reuse ---- */
.radtak-card-grid .process-card {
    height: 100%;
}

.radtak-card-grid .features-item {
    height: 100%;
    background: var(--white);
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.04);
}

.sub-menu .sub-menu-col {
    list-style: none;
}

.sub-menu .sub-menu-inner {
    list-style: none;
    padding: 0;
    margin: 0;
}



/* Arrow icons inside links should be plain inline icons, never tiles */
.radtak-link-more .icon,
.process-card .bot .radtak-link-more .icon {
    width: auto;
    height: auto;
    font-size: 18px;
    color: inherit;
    background: none;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}


/* ============================================
   Brand accents (Radtak Brand Book v2.0)
   Template light layout kept; red -> orange
   #F0763A, mint #9FE6AC for small details.
   ============================================ */

:root {
    --brand: #F0763A;
}

.section-hero .content-wrap .title-icon .box {
    background: linear-gradient(180deg, #E0662E 0%, #F0763A 100%);
    box-shadow: 0px 3.44px 5.57px 0px rgba(0, 0, 0, 0.09), 0px 22.91px 37.08px 0px rgba(240, 118, 58, 0.16), 0px 76px 123px 0px rgba(240, 118, 58, 0.05), 0px 5.05px 8.18px 0px rgba(240, 118, 58, 0.1), 0px 16.98px 27.47px 0px rgba(240, 118, 58, 0.05), 0px 56px 83px 0px rgba(240, 118, 58, 0.25), 0px 14px 34px 0px rgba(240, 118, 58, 0.25), 0px 1px 2px 0px rgba(240, 118, 58, 0.4);
}

.process-card .icon {
    background: linear-gradient(180deg, #E0662E 0%, #F0763A 100%);
    box-shadow: 0px 3.44px 5.57px 0px rgba(0, 0, 0, 0.09), 0px 22.91px 37.08px 0px rgba(240, 118, 58, 0.16), 0px 76px 123px 0px rgba(240, 118, 58, 0.05), 0px 5.05px 8.18px 0px rgba(240, 118, 58, 0.1), 0px 16.98px 27.47px 0px rgba(240, 118, 58, 0.05), 0px 56px 83px 0px rgba(240, 118, 58, 0.25), 0px 14px 34px 0px rgba(240, 118, 58, 0.25), 0px 1px 2px 0px rgba(240, 118, 58, 0.4), 0px -3px 0px 0px rgba(0, 0, 0, 0.06) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6) inset;
}

.features-center {
    background: linear-gradient(180deg, #E0662E 0%, #F0763A 100%) !important;
}

.tf-switch-check:checked {
    background: linear-gradient(180deg, #E0662E 0%, #F0763A 100%) !important;
}

/* Mint details */
.radtak-quote {
    border-left-color: #F0763A;
}


/* ---- Real lockup images ---- */
.logo-site .logo-img {
    height: 26px;
    width: auto;
    display: block;
}

footer .footer-logo .logo-img {
    height: 34px;
}

.offcanvas-menu .logo-site .logo-img {
    height: 24px;
}

/* ---- Hero background video + readability scrim ---- */
.section-hero .hero-image {
    overflow: hidden;
    /* iOS Safari mishandles fixed attachment; also breaks video layering */
    background-attachment: scroll;
    /* Poster frame as the backstop: if the video element never renders
       (blocked autoplay, failed load, data saver), the hero still shows
       the same artwork rather than an empty box. */
    background-image: url(../images/section/hero-video-poster.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #0D211E;
}

/* Explicitly cover the hero box so the video fills the rounded frame */
.section-hero .hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
}

/* When iOS refuses autoplay (Low Power Mode, or a blocked gesture), Safari
   paints its native play button over the hero, which reads as a broken embed.
   The poster frame still shows, so suppress the chrome and let it sit as a
   still image instead. */
.section-hero .hero-bg-video::-webkit-media-controls,
.section-hero .hero-bg-video::-webkit-media-controls-panel,
.section-hero .hero-bg-video::-webkit-media-controls-start-playback-button,
.section-hero .hero-bg-video::-webkit-media-controls-play-button,
.section-hero .hero-bg-video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0;
}

.section-hero .hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Track the image's own radius rather than hard-coding 40px: styles.css
       drops it to 24px on mobile, and a mismatch exposes the dark art
       underneath at the corners. */
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(247, 250, 248, 0.82) 0%, rgba(247, 250, 248, 0.55) 48%, rgba(247, 250, 248, 0.80) 100%);
}

/* ---- Hero: vertically centered content (badge/pill removed) ---- */
.section-hero .container {
    position: relative;
    min-height: calc(100vh - 16px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-hero .content-wrap {
    padding: 120px 0;
    width: 100%;
}

@media (max-width: 991px) {
    .section-hero .container {
        min-height: auto;
    }
    .section-hero .content-wrap {
        padding: 140px 0 100px;
    }
}

/* Mobile: scale the header wordmark down so it doesn't dominate the bar */
@media (max-width: 767px) {
    .logo-site .logo-img {
        height: 20px;
    }
}

/* ---- Inner page helpers ---- */
.radtak-bullets {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.radtak-bullets li {
    position: relative;
    padding-left: 28px;
    color: var(--neutral-300);
    line-height: 26px;
}

.radtak-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
}

/* Inner-page hero: image backdrop + readable scrim */
.section-hero.v2 {
    min-height: unset;
}

.section-hero.v2 .container {
    min-height: unset;
}

.section-hero.v2 .content-wrap {
    padding: 190px 0 110px;
}

.section-hero.v2 .hero-image {
    background-image: url(../images/section/hero-1.jpg);
    background-attachment: scroll;
}

.section-hero.v2 .hero-image::after {
    background: linear-gradient(180deg, rgba(247, 250, 248, 0.93) 0%, rgba(247, 250, 248, 0.80) 55%, rgba(247, 250, 248, 0.95) 100%);
}

/* Inner-hero eyebrow gets the template's pill treatment */
.section-hero.v2 .heading-sub {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 99px;
    background: var(--white);
    color: var(--brand);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
}

.section-hero.v2 .heading-sub::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
}

.section-hero.v2 .title {
    margin-bottom: 24px;
}

.section-hero.v2 .text {
    max-width: 720px;
    margin: 0 auto;
}

.statistic-item .statistic-number {
    display: flex;
    gap: 4px;
    align-items: baseline;
}

.statistic-item .statistic-number .number {
    font-size: 56px;
    line-height: 1.1;
    font-weight: 600;
}

.statistic-item .statistic-number .prefix {
    font-size: 40px;
    font-weight: 600;
}

.section-contact .contact-item.justify-content-center {
    display: inline-flex;
}

/* ---- Solutions problem cards ---- */
.radtak-problem-card .radtak-whatwedo {
    border-top: 1px solid var(--neutral-200);
    padding-top: 20px;
}

.radtak-problem-card .radtak-whatwedo .label {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 8px;
}

/* ---- Case study cards ---- */
.radtak-case-card .radtak-case-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 12px;
}

.radtak-case-card .radtak-case-meta {
    font-size: 14px;
    color: var(--neutral-400);
    margin-bottom: 20px;
}

.radtak-case-card p {
    margin-bottom: 12px;
}

/* Quote block on light surfaces */
.radtak-quote-light {
    margin-top: 0;
    border-left: 3px solid #F0763A;
}

.radtak-quote-light .quote-text {
    font-size: 16px;
    line-height: 26px;
    color: var(--neutral-500);
    font-style: italic;
}

.radtak-quote-light .quote-cite {
    color: var(--neutral-400);
    font-size: 13px;
}

/* ---- Why Radtak: featured option ---- */
.radtak-alt-featured {
    border: 2px solid var(--brand);
}

.radtak-alt-featured .title {
    color: var(--brand);
}

/* ---- Numbered list (contact "what happens next") ---- */
.radtak-numlist {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.radtak-numlist li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
    color: var(--neutral-500);
    line-height: 24px;
}

.radtak-numlist li span {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Role subtitle inside dark heading */
.radtak-role {
    font-size: 18px;
    font-weight: 500;
    color: var(--brand);
}

/* ---- Pattern section: numbered steps (dark surface) ----
   Case studies "The Pattern Across Every Engagement" used a plain
   8px-dot bullet list (.radtak-bullets) at body-copy size, which read as
   small and throwaway next to the display heading beside it. This gives
   each step a proper brand-orange numeral badge, a bold title, and a
   supporting line — same numbered-circle language as .radtak-numlist on
   the contact page, sized up for this dark hero section. */
.radtak-pattern-steps {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 24px;
}

.radtak-pattern-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.radtak-pattern-step:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.radtak-pattern-step .num {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #E0662E 0%, #F0763A 100%);
    box-shadow: 0px -3px 0px 0px rgba(0, 0, 0, 0.15) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset;
}

.radtak-pattern-step .step-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 6px;
}

.radtak-pattern-step .step-text {
    font-size: 15px;
    line-height: 24px;
    color: var(--neutral-400);
}

@media (max-width: 767px) {
    .radtak-pattern-step .num {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    .radtak-pattern-step .step-title {
        font-size: 18px;
    }
}

/* Card grid: equal heights */
.radtak-card-grid > [class*="col-"] {
    display: flex;
}

.radtak-card-grid .features-item {
    width: 100%;
}

/* ---- Missing Bootstrap utility ----
   This template's trimmed Bootstrap build never shipped `.h-100`, even
   though the markup uses it in 16 places across the site (case studies,
   about, index, solutions, contact, etc.) to make card rows match height.
   Without this rule the class is a no-op: cards just shrink to their own
   copy length, which is why equal-height card rows have been uneven. */
.h-100 {
    height: 100% !important;
}

/* ---- Another missing utility ----
   Same story as .h-100: `.mt-32` is used on 5 hero CTA rows (automation
   audit, ai-automation, consulting, custom-software, managed-it) but this
   build's spacing scale skips straight from .mt-30 to nothing — .mt-32
   was never defined. Result: zero gap between the hero paragraph and the
   button row, which reads as cramped/"busy" no matter how the buttons
   themselves are spaced. */
.mt-32 {
    margin-top: 32px !important;
}

/* ---- Hero dual-button rows: less cramped ----
   11px between two full-size pill buttons (each with its own drop shadow)
   reads as tight/busy. A bit more air lets each button's shadow breathe
   without overlapping its neighbor. */
.section-hero .content-wrap .bot-btns {
    gap: 18px;
}

/* ---- Process cards: align descriptions across uneven titles ----
   .content .title has no reserved height, so a two-line title (e.g.
   "Opportunity identification") pushes its divider and description down
   while single-line neighbors stay high — descriptions end up starting
   at different vertical positions across the row. Reserving two lines'
   worth of height keeps every card's divider/description at the same Y
   regardless of title length. 116px = 48px line-height * 2 + 20px
   padding-bottom, matching this component's fixed 36px/48px title type. */
.process-card .content .title {
    min-height: 116px;
    display: flex;
    align-items: flex-start;
}

/* ---- "How It Starts" step meta pill ----
   Small brand-tinted tag for a duration/format detail next to the STEP
   badge — adds a second color note beyond the orange icon tile, and a
   concrete detail (how long, what format) alongside the step count. */
.radtak-step-meta {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px 7px;
    border-radius: 99px;
    background: rgba(240, 118, 58, 0.10);
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* Ensure link arrows never inherit card icon tile styling */
.features-item .radtak-link-more .icon,
.radtak-problem-card .radtak-link-more .icon {
    width: auto;
    height: auto;
    font-size: 16px;
    color: inherit;
    background: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    display: inline;
}

/* ---- Four-column footer ---- */
footer .footer-main {
    padding-bottom: 48px;
}

footer .footer-col-title {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neutral-400);
    margin-bottom: 20px;
}

footer .footer-col-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer .footer-col-links li {
    margin-bottom: 12px;
}

footer .footer-col-links a,
footer .footer-col-links span {
    color: var(--primary);
    font-size: 15px;
}

footer .footer-col-links a:hover {
    color: var(--brand);
}

footer .footer-social {
    display: flex;
    gap: 10px;
}

footer .footer-social .social-item {
    width: 36px;
    height: 36px;
}

footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    footer .footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

/* Footer social: horizontal row, compact */
footer .tf-social-1.footer-social {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

footer .tf-social-1.footer-social a {
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    width: auto;
}

/* ============================================
   Sticky header: pill starts wide, shrinks on scroll
   ============================================ */
.tf-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding-top: 32px;
    margin-bottom: 0;
    transition: padding-top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.tf-header .header-inner {
    pointer-events: auto;
    /* expanded state — roughly double the resting width */
    max-width: min(1320px, calc(100% - 64px)) !important;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition:
        max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.45s ease,
        box-shadow 0.45s ease;
}

/* scrolled: contract to the resting pill size */
.tf-header.header-scrolled {
    padding-top: 16px;
}

.tf-header.header-scrolled .header-inner {
    max-width: 807px !important;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 8px 28px rgba(13, 33, 30, 0.14);
}

/* keep hero clear of the fixed header */
.section-hero .content-wrap {
    padding-top: 200px;
}

@media (max-width: 991px) {
    .tf-header {
        padding-top: 20px;
    }

    .tf-header .header-inner {
        max-width: calc(100% - 32px) !important;
        margin-left: auto;
        margin-right: auto;
        /* styles.css sets 32px left padding, which pushes the wordmark well
           inboard of the pill's left edge while the right side only has 8px
           (the round CTA/burger fills it). Tighten the left so the logo sits
           optically balanced against the button. */
        padding-left: 20px;
    }

    .tf-header.header-scrolled .header-inner {
        max-width: calc(100% - 32px) !important;
    }
}

/* ---- Nav links spread apart at top, draw together on scroll ---- */
.tf-header .nav-menu-main {
    gap: 72px;
    transition: gap 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.tf-header.header-scrolled .nav-menu-main {
    gap: 24px;
}

@media (max-width: 1199px) {
    .tf-header .nav-menu-main {
        gap: 40px;
    }
}


/* ---- CTA: vertically centre the form card against the left column ----
   .col-left is height:100% with space-between, so it must keep stretching.
   Only the form column is centred, via align-self on the card itself. */
.section-contact .row > .col-lg-6:last-child {
    display: flex;
    align-items: center;
}

.section-contact .form-contact {
    width: 100%;
}

@media (max-width: 991.98px) {
    .section-contact .row > .col-lg-6:last-child {
        display: block;
    }
}

/* ---- Footer address: keep it to two lines ----
   The column is narrow enough that "Suite 300" wrapped, orphaning "300".
   A non-breaking space binds it, and a slightly tighter measure keeps
   the street line intact. */
footer .footer-col-links .footer-address {
    font-size: 14px;
    line-height: 22px;
    display: inline-block;
}

/* ---- Contact page: align "Other Ways to Reach Us" with the form ----
   The form column is taller, so the right column started at the top and
   read as floating high. Centre it against the form on desktop only. */
.section-contact-form .row {
    align-items: center;
}

@media (max-width: 991.98px) {
    .section-contact-form .row {
        align-items: stretch;
    }
    .section-contact-form .ps-lg-4 {
        margin-top: 40px;
    }
}

/* ---- Footer logo: alternate lockup runs wider, so hold the height ---- */
footer .footer-logo .logo-img {
    height: 34px;
    width: auto;
}

/* ---- Contact page: "Other Ways to Reach Us" card ----
   Mirrors .form-contact so the two columns read as a matched pair
   instead of a card next to loose text. */
.radtak-contact-card {
    padding: 40px;
    border-radius: 40px;
    background-color: var(--neutral-100);
    box-shadow:
        0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294),
        0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843),
        0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset,
        0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
    margin-bottom: 24px;
}

/* Two lines per entry: icon sits beside the label, value underneath. */
.radtak-contact-card .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    margin: 0;
    border-top: 1px solid var(--neutral-200);
}

.radtak-contact-card .contact-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.radtak-contact-card .contact-item:last-child {
    padding-bottom: 0;
}

/* Icon chip — gives the glyph a container so it reads as deliberate. */
.radtak-contact-card .contact-item > .icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(240, 118, 58, 0.10);
    color: var(--brand);
    font-size: 16px;
    line-height: 1;
}

.radtak-contact-card .contact-item .content {
    padding-top: 2px;
}

.radtak-contact-card .contact-item .title {
    margin-bottom: 2px;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--neutral-500);
}

.radtak-contact-card .contact-item .text {
    font-size: 16px;
    line-height: 24px;
    color: var(--primary);
}

.radtak-contact-card .contact-item .text a {
    color: var(--primary);
}

.radtak-contact-card .contact-item .text a:hover {
    color: var(--brand);
}

@media (max-width: 991.98px) {
    .radtak-contact-card {
        padding: 32px;
    }
}

/* ---- Inner-page CTA contact row ----
   Each item used to be centred on its own, so the icons landed at
   different x-positions. One centred column, items left-aligned inside
   it, keeps every icon on a shared edge. */
.radtak-cta-contacts {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
}

.radtak-cta-contacts .contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}

.radtak-cta-contacts .contact-item > .icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    color: var(--brand);
    font-size: 28px;
}

.radtak-cta-contacts .contact-item .content,
.radtak-cta-contacts .contact-item .text {
    margin: 0;
}


/* ---- Address line breaks on mobile ----
   styles.css:521 kills every <br> under 991px. That's the right call for
   decorative headline breaks, but it also collapses the postal address into
   "Suite 300Austin, TX 78752". Restore the break only where it carries
   meaning: street line vs city/state/ZIP. */
@media (max-width: 991px) {
    .contact-item .text br,
    .footer-col-links .footer-address br,
    .radtak-contact-card .text br {
        display: inline;
    }
}