/* =====================================================================
   Ontario Page CSS
   File: /public/css/cryptoTax/ontario/ontario.css
   Notes:
   - Keeps your existing hero styles unchanged
   - Adds / updates the Crypto Taxation section
   - Uses "Aeonik TRIAL" as requested (with safe fallbacks)
   ===================================================================== */

/* =========================================================
   HERO — Ontario
   ========================================================= */

.tp-hero-ontario {
    position: relative;
    color: #ffffff;

    /* SKY background */
    background-image: url("/css/cryptoTax/ontario/images/sky.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    min-height: 110vh;
    padding: 72px 0 40px;
    overflow: hidden;
}

/* White strap line across the hero */
.tp-hero-ontario::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 19%;
    height: 70%;
    background-image: url("/css/cryptoTax/ontario/images/whitemiddlestrap.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

/* optional: subtle dark overlay for contrast (keep very light) */
.tp-hero-ontario::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(2, 6, 23, 0.05),
        rgba(2, 6, 23, 0.18)
    );
    pointer-events: none;
    z-index: 0;
}

.tp-hero-inner {
    position: relative;
    z-index: 3; /* above strap & buildings */
    max-width: var(--grid-max, 1250px);
    margin-inline: auto;
    padding-inline: calc(var(--grid-side-gap, 48px) + 32px);
    padding-top: 16px;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
}

/* Left copy block */
.tp-hero-copy {
    max-width: 520px;
    margin-top: -25px;
}

.tp-hero-title {
    font-weight: 700 !important;
    font-family: "Aeonik bold";
    font-size: 63px;
    line-height: 1.04;
    margin: 0 0 18px;
    white-space: normal;
}

/* keep first phrase on one line (if you wrap it in <span class="tp-hero-title-keep">) */
.tp-hero-title-keep {
    white-space: nowrap;
}

/* if you are using spans per line */
.tp-hero-title span {
    display: block;
}

.tp-hero-subtitle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.7;
    max-width: 740px;
    margin-bottom: 10px;
}

/* Star icon image */
.tp-hero-star {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    margin-top: 2px;
    display: inline-block;
    object-fit: contain;
}

/* CTA button in hero (reuses your pill button class if any) */
.tp-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 12px;
    background-color: #ffffff;
    border: 2px solid #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;

    /* ✅ REQUIRED */
    color: #00737c;
}

.tp-hero-cta:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #00737c;
}

.tp-hero-cta-icon {
    width: 26px;
    height: 26px;
    display: inline-block;
    border-radius: 5px;
    padding: 4px;
    object-fit: contain;
    margin-right: -4px;
}

/* Buildings wrapper – push image further down */
.tp-hero-buildings-wrap {
    position: absolute;
    inset-inline: 0;
    bottom: -27%;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.tp-hero-buildings {
    width: 100vw;
    max-width: none;
    height: auto;
    display: block;
}

/* ------------------- Tablet & Mobile ------------------- */
@media (max-width: 991.98px) {
    .tp-hero-ontario {
        padding: 72px 0 24px;
    }

    .tp-hero-inner {
        padding-inline: 16px;
        padding-top: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .tp-hero-copy {
        max-width: 100%;
        margin-top: -25px;
    }

    .tp-hero-title {
        font-size: 40px;
        white-space: normal;
    }

    .tp-hero-title span {
        display: block;
    }

    .tp-hero-subtitle {
        font-size: 10px;
        max-width: 100%;
    }

    .tp-hero-star {
        width: 28px;
        height: 28px;
    }

    .tp-hero-ontario::before {
        top: 22%;
        height: 60%;
        background-size: 140% auto;
    }

    .tp-hero-buildings-wrap {
        bottom: -2%;
    }

    .tp-hero-buildings {
        width: 100vw;
    }
}

/* ------------------- Small Mobile ------------------- */
@media (max-width: 575.98px) {
    .tp-hero-ontario {
        min-height: 50vh;
        padding: 73px 0 40px;
    }

    .tp-hero-copy {
        margin-top: -60px;
    }

    .tp-hero-title {
        font-size: 34px;
    }

    .tp-hero-ontario::before {
        top: 38%;
        height: 58%;
        background-size: 170% auto;
    }

    .tp-hero-buildings-wrap {
        bottom: -50px;
    }

    .tp-hero-buildings {
        width: 100vw;
    }
}

/* ------------------- Extra large screens ------------------- */
@media (min-width: 1440px) {
    .tp-hero-ontario {
        padding-top: 96px;
    }

    .tp-hero-inner {
        padding-inline: calc(var(--grid-side-gap, 48px) - 106px);
        padding-top: 24px;
    }

    .tp-hero-copy {
        margin-top: 16px;
        margin-left: -100px;
        max-width: 680px;
    }

    .tp-hero-title {
        font-size: 76px;
        font-weight: 750;
        line-height: 1.03;
    }

    .tp-hero-subtitle {
        font-size: 13px;
        max-width: 860px;
        margin-bottom: 14px;
    }
}

/* ------------------- Large screens (1200px+) like your snippet ------------------- */
@media (min-width: 1200px) {
    .tp-hero-ontario {
        min-height: 100vh;
        padding-top: 80px;
        background-size: cover;
        background-position: center 30%;
    }

    .tp-hero-ontario::before {
        top: 29%;
    }

    .tp-hero-inner {
        max-width: 1300px;
        padding-top: 0;
        padding-left: 8%;
    }

    .tp-hero-copy {
        max-width: 600px;
        margin-top: -20px;
    }

    .tp-hero-title {
        font-size: 55px;
        line-height: 1.05;
        margin-bottom: 24px;
        font-weight: 800 !important;
    }

    .tp-hero-subtitle {
        font-size: 15px;
        line-height: 1.6;
        max-width: 700px;
        margin-bottom: 32px;
    }

    .tp-hero-star {
        width: 55px;
        height: 55px;
    }

    .tp-hero-cta {
        padding: 3px 7px;
        font-size: 16px;
        color: #00737c; /* ✅ keep */
    }

    .tp-hero-cta-icon {
        width: 32px;
        height: 32px;
    }

    .tp-hero-buildings-wrap {
        bottom: -27%;
    }

    .tp-hero-buildings {
        width: 100%;
        max-width: none;
    }
}

/* =========================================================
   Ontario — Crypto Taxation section
   Background: linear-gradient(270deg, #E8FCFF -21.11%, #FFF 51.09%, #E8FCFF 123.3%);
   Font: Aeonik TRIAL
   ========================================================= */

.tp-taxation-ontario {
    position: relative;
    padding: 44px 0 0px;
    background: linear-gradient(
        270deg,
        #e8fcff -21.11%,
        #fff 51.09%,
        #e8fcff 123.3%
    );
    overflow: hidden;
    font-family: "Aeonik regular";
}

/* soft corner glow / pattern */
.tp-taxation-ontario::before {
    content: "";
    position: absolute;
    right: -220px;
    bottom: -220px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(0, 146, 130, 0.12),
        rgba(0, 146, 130, 0) 70%
    );
    pointer-events: none;
}

.tp-taxation-inner {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 44px;
    align-items: start;
}

/* ---------------- Left content ---------------- */
.tp-taxation-left {
    padding-right: 14px;
}

.tp-taxation-title {
    font-weight: 700 !important;
    font-size: 42px;
    line-height: 120%;
    letter-spacing: -2%;
    font-family: "Aeonik bold";

    background: linear-gradient(90deg, #1d8990 -14.92%, #00d1e2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tp-taxation-title::after {
    content: "";
    display: block;
    width: 128px;
    height: 2px;
    border-radius: 999px;
    margin-top: 12px;
    background: linear-gradient(90deg, #1d8990 -14.92%, #00d1e2 100%);
}

.tp-taxation-desc {
    font-family: "Aeonik regular";
    font-size: 14.5px;
    line-height: 1.8;
    color: rgba(11, 27, 42, 0.75);
    max-width: 560px;
    margin: 0 0 22px;
}

/* Learn more button */
.tp-taxation-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-radius: 10px;
    background: #00737c;
    color: #fff;
    text-decoration: none;
    font-family: "Aeonik regular";
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 14px 34px rgba(0, 125, 112, 0.18);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.tp-taxation-btn:hover {
    background: #1d8990;
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(0, 125, 112, 0.22);
}

.tp-taxation-btn .tp-taxation-btn-arrow {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.tp-taxation-btn .tp-taxation-btn-arrow svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* ---------------- Right side feature list ---------------- */
.tp-taxation-right {
    display: grid;
    gap: 18px;
    padding-left: 6px;
}

.tp-taxation-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 14px;
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.tp-taxation-item:hover {
    background: rgba(255, 255, 255, 0.65);
    transform: translateY(-1px);
}

/* icon bubble */
.tp-taxation-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    /* background: rgba(0, 146, 130, 0.1); */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tp-taxation-ico img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

/* titles and text */
.tp-taxation-item-title {
    margin: 0 0 4px;
    font-family: "Aeonik regular";
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.4;

    /* ✅ Gradient text (left -> right) */
    background: linear-gradient(90deg, #1d8990 0%, #00d1e2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.tp-taxation-item-desc {
    margin: 0;
    font-family: "Aeonik regular";
    font-size: 13px;
    line-height: 1.6;
    color: rgba(11, 27, 42, 0.7);
    max-width: 440px;
}

/* Divider line under section (like screenshot bottom stroke) */
.tp-taxation-divider {
    margin-top: 52px;
    height: 1px;
    background: #1d8990;
    width: 84%;
    margin-left: 8%;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px) {
    .tp-taxation-ontario {
        padding: 16px 0 0px;
    }

    .tp-taxation-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 0 18px;
    }

    .tp-taxation-title {
        font-size: 32px;
    }

    .tp-taxation-desc {
        max-width: 100%;
    }

    .tp-taxation-right {
        padding-left: 0;
    }

    .tp-taxation-item {
        padding: 10px 10px;
    }
}

@media (max-width: 575.98px) {
    .tp-taxation-title {
        font-size: 29px;
    }

    .tp-taxation-ico {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

    .tp-taxation-ico img {
        width: 18px;
        height: 18px;
    }
}

/* =========================================================
   Ontario — Crypto Tax Services section 
   ========================================================= */

.tp-services-ontario {
    position: relative;
    padding: 78px 0;
    background: linear-gradient(
        270deg,
        #e8fcff -21.11%,
        #fff 51.09%,
        #e8fcff 123.3%
    );
    overflow: hidden;
}

.tp-services-inner {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 2px;
}

/* FULL CARD (must cover BOTH left + map like your 2nd image) */
.tp-services-card {
    border-radius: 16px;
    background: linear-gradient(270deg, #d4fbff 0%, #fff 50%, #dafafd 100%);
    box-shadow: 0 22px 60px rgba(16, 24, 40, 0.1);
    overflow: hidden;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    min-height: 520px;
}

/* LEFT SIDE */
.tp-services-left {
    padding: 34px 94px 34px 38px;
}

.tp-services-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 8px;
    font-family:
        "Aeonik regular",
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #00737c;
    background: linear-gradient(90deg, #86d1d6 17%, #eef6f8 97%);
}

.tp-services-title {
    font-weight: 700 !important;
    font-size: 42px;
    line-height: 120%;
    letter-spacing: -2%;
    font-family: "Aeonik bold";

    background: linear-gradient(90deg, #1d8990 -14.92%, #00d1e2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tp-services-underline {
    width: 136px;
    height: 2px;
    background: linear-gradient(90deg, #1a8c95 -22.5%, #49d8e1 100%);
    margin: 10px 0 18px;
}

.tp-services-list {
    margin: 0 0 22px;
    padding-left: 18px;
    display: grid;
    gap: 12px;

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(11, 27, 42, 0.78);
}

.tp-services-list li::marker {
    color: rgba(11, 27, 42, 0.55);
}

/* CTA */
.tp-services-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 9px 24px;
    border-radius: 10px;
    background: #00737c;
    color: #fff;
    text-decoration: none;

    font-family: "Aeonik regular";

    font-weight: 800;
    font-size: 16px;

    box-shadow: 0 18px 44px rgba(0, 115, 124, 0.2);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.tp-services-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 56px rgba(0, 115, 124, 0.24);
}

.tp-services-cta-ico {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

/* RIGHT SIDE (MAP PANEL) */
.tp-services-right {
    position: relative;
    padding: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* This is the teal rotated “below shadow/vector” feeling */
.tp-services-map {
    position: relative;
    width: 113%;
    height: 107%;
    min-height: 520px;

    border-radius: 16px;
    overflow: hidden;

    /* teal panel behind map */
    background: linear-gradient(266deg, #aff1f7 3.83%, #98dbe0 96.17%);

    /* angled left side like screenshot */
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 26%);
}

/* vector-below-map.png */
.tp-services-map-vector {
    position: absolute;
    inset: 0;
    width: 135%;
    height: 135%;
    object-fit: cover;
    opacity: 0.75;
    transform: rotate(-45deg) scale(1.12);
    transform-origin: center;
    pointer-events: none;
}

/* map.png */
.tp-services-map-img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 82%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
    z-index: 2;
}

/* ===================== Responsive ===================== */

@media (max-width: 991.98px) {
    .tp-services-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .tp-services-right {
        padding: 18px;
    }

    .tp-services-map {
        min-height: 360px;
        clip-path: none; /* keep clean on mobile */
        border-radius: 16px;
    }

    .tp-services-title {
        font-size: 34px;
    }
}

@media (max-width: 575.98px) {
    .tp-services-left {
        padding: 26px 18px;
    }

    .tp-services-title {
        font-size: 30px;
    }

    .tp-services-list {
        font-size: 11px;
    }

    .tp-services-cta {
        width: 100%;
        justify-content: center;
    }
}

/* vector fills the box fully */
.tp-services-map-vector {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: left center !important;

    transform: none !important;
    opacity: 1 !important;
    z-index: 1;
    pointer-events: none;
}

/* map stays above */
.tp-services-map-img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 82%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
    z-index: 2;
}
/* ✅ Make the right map area touch the card edge (no gap) */
.tp-services-right {
    padding: 0 !important; /* remove the inner gap */
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

/* ✅ Map panel must fill the full right column */
.tp-services-map {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px;

    /* keep rounded only on the outer right corners */
    border-radius: 0 16px 16px 0;
    overflow: hidden;

    background: transparent !important;
    clip-path: none !important;

    transform: none !important; /* remove translate if you added */
}

/* ✅ Vector must cover full panel */
.tp-services-map-vector {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transform: none !important;
}

/* Optional: keep map centered */
.tp-services-map-img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 82%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
    z-index: 2;
}

/* Mobile: full rounded corners */
@media (max-width: 991.98px) {
    .tp-services-map {
        border-radius: 16px;
        min-height: 360px;
    }
}
/* ✅ Make the whole section + card a bit taller */
.tp-services-ontario {
    padding: 1px 0; /* was 78px */
}

.tp-services-card {
    min-height: 600px; /* was 520px */
}

/* ✅ Make map side match the taller card */
.tp-services-map {
    min-height: 600px; /* was 520px */
}

/* ✅ Optional: give left content a little more breathing space */
.tp-services-left {
    padding: 44px 38px 44px 44px; /* was 34px... */
}

/* ✅ Optional: slightly increase list spacing for better tall look */
.tp-services-list {
    gap: 14px; /* was 12px */
    margin-bottom: 26px; /* was 22px */
}

/* Mobile keep clean */
@media (max-width: 991.98px) {
    .tp-services-ontario {
        padding: 0px 0;
    }
    .tp-services-card {
        min-height: auto;
    }
    .tp-services-map {
        min-height: 420px;
    } /* was 360px */
}
/* ✅ Move ONLY vector-below-map.png a little LEFT (map stays same) */
.tp-services-map {
    position: relative;
}

.tp-services-map-vector {
    object-fit: cover !important;

    width: calc(100% + 28px) !important;
    height: 100% !important;

    top: 0 !important;
    bottom: 0 !important;

    transform: none !important;
    opacity: 1 !important;
    z-index: 1;
    pointer-events: none;
}

/* ✅ map.png stays exactly same */
.tp-services-map-img {
    z-index: 2;
}
/* ✅ Make RIGHT (map) side wider but keep same card width */
.tp-services-card {
    grid-template-columns: 0.85fr 1.15fr !important; /* was 1.05fr 0.95fr */
}

/* Optional: give the map container a tiny extra stretch */
.tp-services-right {
    width: 100%;
}
.tp-services-map {
    width: 100% !important;
    height: 100% !important;
}
/* ✅ ONLY move map.png a little RIGHT (everything else same) */
.tp-services-map-img {
    transform: translateX(26px); /* change 24px -> 12/18/30 if needed */
}
/* =========================================================
   Ontario — Who We Support Section
   ========================================================= */

.tp-support-ontario {
    margin-top: 40px;
    position: relative;
    padding: 74px 0 72px;
    overflow: hidden;

    /* main bg as requested */
    background: linear-gradient(
        270deg,
        #e8fcff -21.11%,
        #fff 51.09%,
        #e8fcff 123.3%
    );
}

.tp-support-inner {
    position: relative;
    z-index: 2;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.tp-support-title {
    font-weight: 700 !important;
    font-size: 42px;
    line-height: 120%;
    letter-spacing: -2%;
    font-family: "Aeonik bold";

    background: linear-gradient(90deg, #1d8990 -14.92%, #00d1e2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tp-support-subtitle {
    margin: 1px 1px 2px;
    max-width: 920px;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: black;
    text-align: center;
}

/* Grid */
.tp-support-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* Card */
.tp-support-card {
    position: relative;
    background: transparent;
    border-radius: 14px;
    padding: 26px 18px 18px;
    text-align: left;
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.08);
}

/* Gradient stroke like SVG (1px) */
.tp-support-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px; /* stroke width */
    background: linear-gradient(135deg, #1a8c95 0%, #49d8e1 100%);
    pointer-events: none;

    /* punch out the center so only border remains */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.tp-support-card-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 33px;
    height: 33px;
    object-fit: contain;
    z-index: 5; /* ensure above border */

    background: rgba(228, 232, 235, 0.95);
    padding: 6px; /* ✅ slightly bigger cover area */
    border-radius: 12px;

    box-shadow: 0 10px 26px rgba(16, 24, 40, 0.1);
}

/* Titles + text */
.tp-support-card-title {
    margin: 10px 0 8px;
    font-family: "Aeonik regular";
    font-weight: 700;
    font-size: 14px;
    color: #00737c; /* requested */
}

.tp-support-card-desc {
    margin: 0;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
    color: #141414; /* requested */
}

/* Decorative vectors */
.tp-support-vector {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.tp-support-vector-left {
    left: -10px;
    bottom: 7px;
    width: 320px;
    max-width: 45vw;
    opacity: 0.95;
}

.tp-support-vector-right {
    right: -12px;
    top: -30px;
    width: 819px;
    max-width: 78vw;
    opacity: 0.95;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .tp-support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .tp-support-ontario {
        padding: 52px 0 58px;
        margin-top: 0px !important;
    }

    .tp-support-title {
        font-size: 28px;
    }
    .tp-support-subtitle {
        font-size: 10px;
    }

    .tp-support-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tp-support-card {
        padding: 24px 16px 16px;
    }
}
.tp-support-subtitle {
    margin: 0 auto !important;
    max-width: 100%;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;

    font-size: 15px;
    line-height: 1.4;
    color: #141414;
    text-align: center;

    white-space: nowrap; /* ✅ one line */
    overflow: visible; /* ✅ no cut */
    text-overflow: clip; /* ✅ no dots */

    position: relative;
    z-index: 5;
}
/* keep subtitle tight (no gap below) */
.tp-support-subtitle {
    margin: 0 0px !important; /* remove your 1px margins */
    max-width: 920px;
}

/* add spacing only before cards */
.tp-support-grid {
    margin-top: 35px; /* controls the gap from subtitle to cards */
}
/* =========================================================
   Ontario — Cities We Serve (card grid like screenshot)
   ========================================================= */

.tp-cities-ontario {
    position: relative;
    padding: 86px 0 92px;
    color: #fff;
    overflow: hidden;

    /* ✅ use buildings image */
    background-image: url("/css/cryptoTax/ontario/images/citiesWE-serve/bg-.jpg");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    margin-top: -6px;
}

.tp-cities-ontario::before {
    content: "";
    position: absolute;
    inset: 0;

    /* ✅ keep your exact dark-blue feel + slight highlight */
    background: linear-gradient(
        0deg,
        rgba(43, 61, 91, 0.64) 0%,
        rgba(43, 61, 91, 0.64) 100%
    );
    backdrop-filter: blur(44px);
    z-index: 0;
}

.tp-cities-inner {
    position: relative;
    z-index: 1;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 24px;
}

.tp-cities-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 26px;
}

.tp-cities-heading {
    max-width: 560px;
}

.tp-cities-title {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.15;
    font-weight: 700 !important;
    font-size: 47px;
    line-height: 120%;
    letter-spacing: -2%;
    font-family: "Aeonik bold";
}

.tp-cities-subtext {
    margin: 0;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.9;
}

/* CTA like your tp-services-cta vibe */
.tp-cities-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #ffffff;
    color: #00737c;
    text-decoration: none;
    font-family: "Aeonik regular";
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.tp-cities-cta:hover {
    background: #f9fafb;
    color: #00737c;
}

.tp-cities-cta-ico {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

/* 4 column grid */
.tp-cities-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* card */
.tp-city-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 16px 16px;
    border-radius: 10px;
    text-decoration: none;

    background: #0405173d;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.tp-city-card:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

.tp-city-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tp-city-small {
    font-family: "Aeonik regular";
    font-size: 14px;
    opacity: 0.9;
    color: #ffffff;
}

.tp-city-name {
    font-family: "Aeonik regular";
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
}

/* arrow circle */
.tp-city-arrow {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.tp-city-arrow-icon {
    width: 20px;
    height: 20px;
    display: block;

    /* make your BLUE arrow look WHITE by default */
    filter: brightness(0) invert(1);
    transition: filter 0.18s ease;
}

/* hover: white pill + BLUE arrow */
.tp-city-card:hover .tp-city-arrow {
    transform: translateX(4px);
    background: #ffffff;
    border-color: #ffffff;
}

.tp-city-card:hover .tp-city-arrow-icon {
    filter: none; /* show original blue */
}

/* responsive */
@media (max-width: 1199.98px) {
    .tp-cities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .tp-cities-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .tp-cities-title {
        font-size: 32px;
    }
}

@media (max-width: 575.98px) {
    .tp-cities-grid {
        grid-template-columns: 1fr;
    }
    .tp-cities-title {
        font-size: 28px;
    }
}
/* =========================================
   Tax Partners — 5 Step Slider (Ontario)
   ========================================= */

.tp-five-steps {
    background: linear-gradient(
        270deg,
        #e8fcff -21.11%,
        #fff 51.09%,
        #e8fcff 123.3%
    );
    padding: 70px 0 30px;
}

.tp-five-steps-inner {
    max-width: 1300px; /* keep same feel as your other section cards */
    margin: 0 auto;
    padding: 0 20px;
}

/* viewport */
.tp-five-steps-viewport {
    overflow: hidden;
    position: relative;
}

/* track */
.tp-five-steps-track {
    display: flex;
    transform: translateX(0);
    transition: transform 0.8s ease-in-out;
}

/* card */
.tp-five-step-card {
    flex: 0 0 100%;
    box-sizing: border-box;
    position: relative;

    border-radius: 20px;
    background: linear-gradient(270deg, #d4fbff 0%, #fff 50%, #dafafd 100%);
    /* box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08); */

    padding: 30px 24px 28px;
}

/* top right vector */
.tp-five-step-vector {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px; /* was 240px */
    max-width: 47%;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    border-radius: 20px;
}

/* 2 column layout */
.tp-five-step-grid {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: flex-start;
}

/* vertical divider */
.tp-five-step-grid::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #00737c; /* requested divider color */
    opacity: 0.35;
}

/* center dot */
.tp-five-step-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #00737c;
    box-shadow: 0 8px 18px rgba(0, 115, 124, 0.25);
}

/* pill */
.tp-five-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 8px;
    font-family: "Aeonik regular";
    font-weight: 600;
    font-size: 16px;
    color: #00737c;
    background: linear-gradient(90deg, #86d1d6 17%, #eef6f8 97%);
}

/* title gradient */
.tp-five-title {
    font-weight: 700 !important;
    font-size: 42px;
    line-height: 120%;
    letter-spacing: -2%;
    font-family: "Aeonik bold";

    background: linear-gradient(90deg, #1d8990 -14.92%, #00d1e2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* divider under title */
.tp-five-title-divider {
    display: inline-block;
    height: 2px;
    background: #00737c;
    border-radius: 2px;
    margin-bottom: 14px; /* was 18px */
    width: 105px; /* was 120px */
}

/* list */
.tp-five-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    font-size: 14.5px; /* was 16px */
    gap: 10px;
    line-height: 1.6;
    color: #141414; /* requested black */
}

.tp-five-list li {
    list-style: disc;
}

.tp-five-link {
    color: inherit;
}

.tp-five-list li.is-active .tp-five-link {
    color: #1d8990; /* requested green */
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* right side */
.tp-five-step-label {
    margin: 8px 0 10px;
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 800;
    color: #1d8990;
    text-transform: uppercase;
}

.tp-five-step-title {
    margin: 0 0 10px;
    font-size: 24px; /* was 26px */
    font-weight: 900;
    line-height: 1.2;

    background: linear-gradient(90deg, #1d8990 -14.92%, #00d1e2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tp-five-step-text {
    margin: 0;
    font-size: 14.5px; /* was 16px */
    line-height: 1.65;
    color: #141414;
    max-width: 560px;
}

/* dots */
.tp-five-steps-dots {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.tp-five-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 115, 124, 0.35);
    background: rgba(0, 115, 124, 0.15);
    cursor: pointer;
    padding: 0;
    transition:
        transform 0.2s ease,
        width 0.2s ease,
        background-color 0.2s ease;
}

.tp-five-dot.is-active {
    width: 28px;
    background: #00737c;
    border-color: #00737c;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 991.98px) {
    .tp-five-step-card {
        padding: 28px 20px 24px;
    }
    .tp-five-step-grid {
        grid-template-columns: 1fr;
        row-gap: 22px;
    }
    .tp-five-step-grid::before,
    .tp-five-step-dot {
        display: none;
    }

    .tp-five-title {
        font-size: 30px;
    }
    .tp-five-list {
        font-size: 14px;
        gap: 10px;
    }
    .tp-five-step-title {
        font-size: 22px;
    }
    .tp-five-step-text {
        font-size: 14px;
    }
}
/* =========================================================
   Ontario — Why Choose Tax Partners
   ========================================================= */

.tp-why-ontario {
    position: relative;
    padding: 40px 0 34px;
    background: linear-gradient(
        270deg,
        #e8fcff -21.11%,
        #fff 51.09%,
        #e8fcff 123.3%
    );
    overflow: hidden;
}

/* decorative vector */
.tp-why-vector {
    position: absolute;
    left: -16px;
    bottom: -52px;
    width: 120px;
    max-width: 10vw;
    opacity: 0.95;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* ✅ allow the vector to overflow outside the section */
.tp-why-ontario {
    overflow: visible !important; /* was hidden */
    position: relative;
}

/* ✅ also make sure parent wrappers don’t clip it */
.tp-why-inner {
    overflow: visible !important;
}

/* ✅ keep vector above all layers */
.tp-why-vector {
    z-index: 999 !important;
}

.tp-why-inner {
    position: relative;
    z-index: 1;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 46px;
    align-items: center;
}

/* LEFT */
.tp-why-title {
    font-weight: 700 !important;
    font-size: 42px;
    line-height: 120%;
    letter-spacing: -2%;
    font-family: "Aeonik bold";

    background: linear-gradient(90deg, #1d8990 -14.92%, #00d1e2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tp-why-desc {
    margin: 0 0 16px;
    max-width: 560px;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(11, 27, 42, 0.75);
}

/* keep your existing CTA style, only adjust spacing */
.tp-why-cta {
    margin-top: 10px;
}

/* RIGHT GRID */
.tp-why-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* CARD */
.tp-why-card {
    position: relative;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(0, 115, 124, 0.22);
    border-radius: 12px;
    padding: 26px 18px 20px;
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
    backdrop-filter: blur(10px);
    min-height: 140px;
}

.tp-why-ico {
    position: absolute;
    left: 110px;
    width: 32px; /* was 28px */
    height: 32px;
    top: -14px; /* adjust for bigger size */
    padding: 6px;
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.12);
}

.tp-why-card-title {
    margin: 10px 0 6px;
    font-family: "Aeonik regular";
    font-weight: 500 !important;
    font-size: 16px;
    line-height: 1.35;
    color: #00747c; /* requested */
}

.tp-why-card-text {
    margin: 0;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 13px; /* slightly bigger */
    line-height: 1.65;
    color: rgba(11, 27, 42, 0.72);
}

/* divider line like screenshot */
.tp-why-divider {
    margin-top: 54px;
    height: 1px;
    background: rgba(29, 137, 144, 0.8);
    width: 84%;
    margin-left: 8%;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .tp-why-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .tp-why-title {
        font-size: 32px;
    }
}

@media (max-width: 575.98px) {
    .tp-why-title {
        font-size: 28px;
    }
    .tp-why-right {
        grid-template-columns: 1fr;
    }
    .tp-why-card {
        min-height: auto;
    }
}
/* ================= Mobile adjustments ================= */
@media (max-width: 991.98px) {
    .tp-why-ontario {
        padding: 70px 0 44px;
    }
    .tp-why-inner {
        align-items: start;
        gap: 26px;
    }
    .tp-why-card {
        min-height: 130px;
    }
}

@media (max-width: 575.98px) {
    .tp-why-card {
        padding: 22px 16px 18px;
        min-height: auto;
    }
}
/* =========================================================
   Ontario — Maximizing Crypto Tax Efficiency
   ========================================================= */

.tp-maximize-ontario {
    position: relative;
    padding: 1px 0 35px;
    background: linear-gradient(
        270deg,
        #e8fcff -21.11%,
        #fff 51.09%,
        #e8fcff 123.3%
    );
    overflow: hidden;
}

.tp-maximize-inner {
    max-width: 1330px;
    margin: 0 auto;
    padding: 0 18px;
}

.tp-maximize-card {
    border-radius: 16px;
    background: linear-gradient(270deg, #d4fbff 0%, #fff 50%, #dafafd 100%);
    /* box-shadow: 0 22px 60px rgba(16, 24, 40, 0.1); */
    overflow: hidden;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    min-height: 520px;
}

/* LEFT */
.tp-maximize-left {
    padding: 34px 40px 34px 36px;
    font-family: "Aeonik regular";
}

.tp-maximize-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    color: #00737c;
    background: linear-gradient(90deg, #86d1d6 17%, #eef6f8 97%);
}

.tp-maximize-title {
    font-weight: 700 !important;
    font-size: 43px;
    line-height: 120%;
    letter-spacing: -2%;
    font-family: "Aeonik bold";

    background: linear-gradient(90deg, #1d8990 -14.92%, #00d1e2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tp-maximize-desc {
    margin: 0 0 18px;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(11, 27, 42, 0.75);
    max-width: 560px;
}

/* MINI CARD GRID */
.tp-maximize-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 560px;
}

.tp-maximize-mini {
    position: relative;
    border-radius: 12px;
    /* background: rgba(255, 255, 255, 0.55); */
    border: 1px solid rgba(0, 115, 124, 0.2);
    padding: 18px 16px 16px;
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
    backdrop-filter: blur(10px);
    min-height: 132px;
}

.tp-maximize-mini-ico {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: #e1f6f7;
    padding: 7px;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.12);
}

.tp-maximize-mini-title {
    margin: 18px 0 6px;
    font-family: "Aeonik regular";
    font-weight: 500 !important;
    font-size: 16px;
    line-height: 1.35;
    color: #00747c; /* requested */
}

.tp-maximize-mini-text {
    margin: 0;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(11, 27, 42, 0.78);
}

/* CTA spacing (reuse tp-services-cta styles) */
.tp-maximize-cta {
    margin-top: 18px;
}

/* RIGHT IMAGE */
.tp-maximize-right {
    position: relative;
    overflow: hidden;
}

.tp-maximize-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===================== Responsive ===================== */
@media (max-width: 991.98px) {
    .tp-maximize-ontario {
        padding: 66px 0 60px;
    }

    .tp-maximize-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .tp-maximize-right {
        min-height: 320px;
    }

    .tp-maximize-left {
        padding: 26px 18px 22px;
    }

    .tp-maximize-title {
        font-size: 32px;
    }

    .tp-maximize-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .tp-maximize-title {
        font-size: 28px;
    }

    .tp-maximize-right {
        min-height: 260px;
    }

    .tp-maximize-cta {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   Ontario — Section 10: Frequently Asked Questions
   Matches screenshot (+ / -), active gradient card, numbering
   ========================================================= */

.tp-faq-ontario {
    position: relative;
    padding: 8px 0 50px;
    overflow: hidden;

    background: linear-gradient(
        270deg,
        #e8fcff -21.11%,
        #fff 51.09%,
        #e8fcff 123.3%
    );
}

.tp-faq-inner {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 24px;
}

.tp-faq-title {
    text-align: center;
    font-weight: 700 !important;
    font-size: 43px;
    line-height: 120%;
    letter-spacing: -2%;
    font-family: "Aeonik bold";

    background: linear-gradient(90deg, #1d8990 -14.92%, #00d1e2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tp-faq-list {
    display: grid;
    gap: 10px;
}

/* base item */
.tp-faq-item {
    position: relative;
    border-bottom: 1px solid rgba(0, 115, 124, 0.22);
    padding-bottom: 10px;
}

/* remove divider under open card (like screenshot) */
.tp-faq-item.is-open {
    border-bottom-color: transparent;
    padding-bottom: 0;
}

/* button row */
.tp-faq-btn {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 14px 10px;
    cursor: pointer;

    display: grid;
    grid-template-columns: 52px 1fr 44px;
    gap: 10px;
    align-items: center;

    text-align: left;
}

.tp-faq-num {
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: rgba(17, 24, 39, 0.45);
}

.tp-faq-q {
    font-family: "Aeonik regular";
    font-weight: 500 !important;
    font-size: 16px;
    line-height: 1.35;
    color: #00747c; /* requested */
}

.tp-faq-icon {
    justify-self: end;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;

    font-size: 22px;
    font-weight: 500;
    color: rgba(79, 70, 229, 0.55); /* subtle like screenshot */
    background: transparent;
}

/* PANEL */
.tp-faq-panel {
    padding: 0 10px 14px 62px; /* aligns with question start */
}

/* open state = gradient card */
.tp-faq-item.is-open .tp-faq-btn,
.tp-faq-item.is-open .tp-faq-panel {
    background: linear-gradient(270deg, #d4fbff 0%, #fff 50%, #dafafd 100%);
}

/* rounded card wrapper effect */
.tp-faq-item.is-open .tp-faq-btn {
    border-radius: 16px 16px 0 0;
    padding: 16px 14px;
}

.tp-faq-item.is-open .tp-faq-panel {
    border-radius: 0 0 16px 16px;
    padding: 0 14px 18px 66px;
}

.tp-faq-answer {
    margin-top: 2px;
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 12.5px;
    line-height: 1.7;
    color: #000; /* requested */
}

/* responsive */
@media (max-width: 991.98px) {
    .tp-faq-ontario {
        padding: 64px 0 70px;
    }
    .tp-faq-title {
        font-size: 30px;
        margin-bottom: 22px;
    }
    .tp-faq-btn {
        grid-template-columns: 42px 1fr 40px;
        padding: 12px 8px;
    }
    .tp-faq-panel {
        padding-left: 52px;
    }
    .tp-faq-item.is-open .tp-faq-panel {
        padding-left: 56px;
    }
}

@media (max-width: 575.98px) {
    .tp-faq-title {
        font-size: 26px;
    }
    .tp-faq-q {
        font-size: 13px;
    }
    .tp-faq-answer {
        font-size: 12px;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* =========================================================
   Ontario — Crypto Tax Services Section (MOBILE ONLY)
   - 0 top/bottom padding
   - Stack: points first, map below (no side-by-side)
   ========================================================= */
@media (max-width: 575.98px) {
    /* section padding top/bottom = 0 */
    .tp-services-ontario {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* if inner wrapper also has padding, flatten it on mobile */
    .tp-services-ontario .tp-services-inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* card should become a single column layout */
    .tp-services-ontario .tp-services-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 0px !important;
    }

    /* Make RIGHT (map) appear AFTER the points */
    .tp-services-ontario .tp-services-left {
        order: 1;
    }
    .tp-services-ontario .tp-services-right {
        order: 2;
    }

    /* left / right full width */
    .tp-services-ontario .tp-services-left,
    .tp-services-ontario .tp-services-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* keep list in top section, nice spacing */
    .tp-services-ontario .tp-services-list {
        margin: 10px 0 0 !important;
        padding-left: 18px; /* keeps bullets aligned on mobile */
    }

    /* map block full width + controlled height */
    .tp-services-ontario .tp-services-map {
        width: 100% !important;
        margin-top: 8px !important;
        display: block !important;
    }

    /* map image responsive */
    .tp-services-ontario .tp-services-map-img {
        width: 75% !important;
        height: auto !important;
        display: block !important;
    }

    /* vector should not force side spacing */
    .tp-services-ontario .tp-services-map-vector {
        max-width: 100% !important;
        height: auto !important;
    }
}
/* ===== Ontario Services CTA (MOBILE ONLY) ===== */
@media (max-width: 575.98px) {
    .tp-services-ontario .tp-services-cta {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        gap: 8px !important;
        width: 99% !important; /* keep nice full width on mobile */
        max-width: 74% !important;
        min-height: auto !important;
        margin-top: 15px !important;
    }

    .tp-services-ontario .tp-services-cta-ico {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
    }

    .tp-services-ontario .tp-services-cta span {
        font-size: 11px !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
    }
}
/* =========================================================
   Ontario — 5 Step Slider (MOBILE ONLY tighter)
   - section top/bottom margin/padding: 0
   - reduce card height + internal spacing
   - reduce all text sizes
   ========================================================= */
@media (max-width: 575.98px) {
    /* section spacing */
    .tp-five-steps {
        padding-top: 20px !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .tp-five-steps-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* card compact */
    .tp-five-step-card {
        padding: 16px 14px 14px !important;
        border-radius: 16px !important;
        min-height: auto !important;
    }

    /* vector smaller so it doesn't eat height */
    .tp-five-step-vector {
        width: 220px !important;
        max-width: 58% !important;
        opacity: 0.95 !important;
    }

    /* grid + spacing tighter */
    .tp-five-step-grid {
        row-gap: 14px !important;
        column-gap: 14px !important;
    }

    /* pill smaller */
    .tp-five-pill {
        padding: 6px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* title smaller */
    .tp-five-title {
        font-size: 24px !important;
        line-height: 1.18 !important;
        letter-spacing: 0 !important;
        margin: 8px 0 8px !important;
    }

    .tp-five-title-divider {
        width: 78px !important;
        margin-bottom: 10px !important;
        height: 2px !important;
    }

    /* list smaller + tighter */
    .tp-five-list {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        gap: 7px !important;
        padding-left: 16px !important;
        margin: 0 !important;
    }

    /* right side smaller */
    .tp-five-step-label {
        margin: 2px 0 6px !important;
        font-size: 10px !important;
        letter-spacing: 0.14em !important;
    }

    .tp-five-step-title {
        font-size: 16px !important;
        margin: 0 0 6px !important;
        line-height: 1.2 !important;
    }

    .tp-five-step-text {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* dots smaller + less margin */
    .tp-five-steps-dots {
        margin-top: 10px !important;
        gap: 8px !important;
    }

    .tp-five-dot {
        width: 9px !important;
        height: 9px !important;
    }

    .tp-five-dot.is-active {
        width: 22px !important;
    }
}
/* =========================================================
   Ontario — Why Choose (MOBILE ONLY)
   - 0 top/bottom padding
   - CTA width less
   - icon slightly right
   ========================================================= */
@media (max-width: 575.98px) {
    /* 0 padding top/bottom */
    .tp-why-ontario {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* keep inner spacing a bit tight */
    .tp-why-inner {
        padding-top: 25px !important;
        padding-bottom: 0 !important;
    }

    /* CTA: make it smaller width (not full width) */
    .tp-why-ontario .tp-why-cta.tp-services-cta {
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;

        padding: 8px 12px !important;
        gap: 8px !important;
        border-radius: 12px !important;

        font-size: 12px !important;
        max-width: 78% !important; /* ✅ button width less */
        white-space: normal !important;
    }

    .tp-why-ontario .tp-why-cta.tp-services-cta span {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .tp-why-ontario .tp-why-cta .tp-services-cta-ico {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
    }

    /* move icon a little right on mobile */
    .tp-why-ontario .tp-why-ico {
        left: 150px !important; /* was 110px; adjust 115/125 if needed */
    }
}
/* =========================================================
   Ontario — Maximizing Crypto Tax Efficiency (MOBILE ONLY)
   - 0 top/bottom padding
   - smaller typography
   - CTA same compact size as above section CTA
   ========================================================= */
@media (max-width: 575.98px) {
    /* 0 padding top/bottom */
    .tp-maximize-ontario {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .tp-maximize-inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* card spacing a bit tighter */
    .tp-maximize-left {
        padding: 18px 16px 16px !important; /* was 26px.. */
    }

    /* smaller heading + text */
    .tp-maximize-badge {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
    }

    .tp-maximize-title {
        font-size: 26px !important; /* was 28px on mobile */
        line-height: 1.15 !important;
        margin-bottom: 8px !important;
    }

    .tp-maximize-desc {
        font-size: 12px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }

    /* mini cards tighter + smaller text */
    .tp-maximize-grid {
        gap: 10px !important;
        margin-top: 12px !important;
    }

    .tp-maximize-mini {
        padding: 16px 14px 12px !important;
        min-height: auto !important;
    }

    .tp-maximize-mini-ico {
        width: 30px !important;
        height: 30px !important;
        padding: 6px !important;
        top: -12px !important;
    }

    .tp-maximize-mini-title {
        font-size: 13px !important;
        margin-top: 16px !important;
        margin-bottom: 4px !important;
    }

    .tp-maximize-mini-text {
        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    /* CTA: same compact sizing as above section CTA */
    .tp-maximize-ontario .tp-maximize-cta.tp-services-cta {
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;

        padding: 8px 12px !important;
        gap: 8px !important;
        border-radius: 12px !important;

        max-width: 78% !important; /* smaller width */
        margin-top: 12px !important;
    }

    .tp-maximize-ontario .tp-maximize-cta .tp-services-cta-ico {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
    }

    .tp-maximize-ontario .tp-maximize-cta span {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    /* right image shorter on small screens */
    .tp-maximize-right {
        min-height: 220px !important; /* was 260px */
    }
}
/* =========================================================
   Ontario — FAQ (MOBILE ONLY)
   - 0 top/bottom padding (0 0)
   - tighter button row
   ========================================================= */
@media (max-width: 575.98px) {
    /* section spacing = 0 */
    .tp-faq-ontario {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* inner wrapper spacing tighter */
    .tp-faq-inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* title tighter */
    .tp-faq-title {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
        font-size: 24px !important; /* slightly smaller */
    }

    /* each item less bottom gap */
    .tp-faq-item {
        padding-bottom: 6px !important;
    }

    /* button row smaller + less padding */
    .tp-faq-btn {
        padding: 10px 8px !important; /* was 14px 10px */
        grid-template-columns: 36px 1fr 34px !important;
        gap: 8px !important;
    }

    .tp-faq-num {
        font-size: 11px !important;
    }

    .tp-faq-q {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .tp-faq-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 18px !important;
    }

    /* answer panel tighter */
    .tp-faq-panel {
        padding: 0 8px 10px 44px !important;
    }

    .tp-faq-item.is-open .tp-faq-panel {
        padding: 0 10px 12px 48px !important;
    }

    .tp-faq-answer {
        font-size: 11.5px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 575.98px) {
    img.dividers {
        width: 100%;
        margin: 37px auto;
    }
}
/* =========================================================
   Ontario — ALL CTA unify (MOBILE ONLY)
   Matches "Why Choose" CTA sizing:
   - same height/padding/width/icon/text for:
     Schedule A Free Initial Consultation
     Book Free Consultation
   ========================================================= */
@media (max-width: 575.98px) {
    /* ✅ Base preset for all CTAs used in this page */
    .tp-hero-ontario .tp-hero-cta,
    .tp-services-ontario .tp-services-cta,
    .tp-cities-ontario .tp-hero-cta,
    .tp-why-ontario .tp-services-cta,
    .tp-maximize-ontario .tp-services-cta,
    .tp-taxation-ontario .tp-taxation-btn {
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 8px 12px !important;
        gap: 8px !important;
        border-radius: 12px !important;

        font-size: 12px !important;
        line-height: 1.25 !important;

        max-width: 78% !important; /* ✅ same as your Why Choose CTA */
        white-space: normal !important;
        min-height: auto !important;
    }

    /* ✅ Text inside buttons */
    .tp-hero-ontario .tp-hero-cta span,
    .tp-services-ontario .tp-services-cta span,
    .tp-cities-ontario .tp-hero-cta span,
    .tp-why-ontario .tp-services-cta span,
    .tp-maximize-ontario .tp-services-cta span,
    .tp-taxation-ontario .tp-taxation-btn span {
        font-size: 11px !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
    }

    /* ✅ Icon sizing – hero CTA icon */
    .tp-hero-ontario .tp-hero-cta .tp-hero-cta-icon,
    .tp-cities-ontario .tp-hero-cta .tp-hero-cta-icon {
        width: 16px !important;
        height: 16px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        flex: 0 0 16px !important;
        margin-right: 0 !important;
    }

    /* ✅ Icon sizing – services/why/maximize CTA icon */
    .tp-services-ontario .tp-services-cta .tp-services-cta-ico,
    .tp-why-ontario .tp-services-cta .tp-services-cta-ico,
    .tp-maximize-ontario .tp-services-cta .tp-services-cta-ico {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
    }

    /* ✅ Taxation button (has svg arrow) make arrow same compact feel */
    .tp-taxation-ontario .tp-taxation-btn {
        padding: 8px 12px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }

    .tp-taxation-ontario .tp-taxation-btn .tp-taxation-btn-arrow {
        width: 18px !important;
        height: 18px !important;
    }

    /* Optional: If any CTA becomes full width due to other rules, force it not to */
    .tp-services-ontario .tp-services-cta,
    .tp-why-ontario .tp-services-cta,
    .tp-maximize-ontario .tp-services-cta,
    .tp-hero-ontario .tp-hero-cta,
    .tp-cities-ontario .tp-hero-cta,
    .tp-taxation-ontario .tp-taxation-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* =========================================================
   Ontario — 5 Steps: Scroll-driven (Fruitful-style)
   Paste at END of ontario.css
   ========================================================= */

.tp-five-steps {
    /* adjust if your navbar is sticky/fixed */
    --tp-five-sticky-top: 90px;
    position: relative;
}

/* Desktop only: pin + scroll progress drives steps */
@media (min-width: 992px) {
    .tp-five-steps {
        /* height will be set by JS; keep safe fallback */
        min-height: 100vh;
    }

    .tp-five-steps-inner {
        position: sticky;
        top: var(--tp-five-sticky-top);
        height: calc(100vh - var(--tp-five-sticky-top));
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .tp-five-steps-viewport {
        overflow: hidden;
    }

    .tp-five-steps-track {
        will-change: transform;
    }
}

/* Optional: smoother dot click feel */
.tp-five-dot {
    outline: none;
}
.tp-five-dot:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 115, 124, 0.25);
    border-radius: 999px;
}
/* =========================================================
   Ontario — 5 Step Slider: TALLER CARDS (JS-safe)
   Paste at END of ontario.css
   - keeps your scroll/sticky JS behavior
   - increases card height + spacing
   ========================================================= */

/* Desktop / large screens: make each slide/card feel taller */
@media (min-width: 992px) {
    .tp-five-steps-viewport {
        /* give viewport more vertical room so the card can be taller */
        min-height: 78vh;
    }

    .tp-five-step-card {
        /* ✅ main height boost */
        min-height: 560px; /* try 520 / 560 / 600 */
        padding: 44px 34px 38px; /* more breathing space */
        border-radius: 22px;
    }

    /* space inside the 2-column grid */
    .tp-five-step-grid {
        column-gap: 64px;
        row-gap: 24px;
        align-items: start;
    }

    /* slightly increase divider span so it doesn't look cramped */
    .tp-five-step-grid::before {
        top: 18px;
        bottom: 18px;
        opacity: 0.35;
    }

    /* keep dot centered nicely in taller card */
    .tp-five-step-dot {
        width: 12px;
        height: 12px;
    }

    /* make headings feel balanced for the taller card */
    .tp-five-title {
        margin-top: 14px;
        margin-bottom: 14px;
        line-height: 1.18;
    }

    .tp-five-title-divider {
        margin-bottom: 18px;
    }

    .tp-five-list {
        gap: 12px;
        font-size: 15px;
        line-height: 1.7;
        max-width: 560px;
    }

    .tp-five-step-label {
        margin-top: 10px;
        margin-bottom: 12px;
    }

    .tp-five-step-title {
        font-size: 26px;
        margin-bottom: 12px;
        line-height: 1.22;
    }

    .tp-five-step-text {
        font-size: 15px;
        line-height: 1.75;
        max-width: 520px;
    }

    /* vector: keep it looking premium in taller card */
    .tp-five-step-vector {
        width: 440px;
        max-width: 52%;
    }
}

/* =========================================================
   Ontario — 5 Step Slider: move content slightly DOWN (desktop)
   Paste at END of ontario.css
   ========================================================= */
@media (min-width: 992px) {
    /* Option A (recommended): add a bit more top padding */
    .tp-five-step-card {
        padding-top: 66px !important; /* was 44px in your last block */
    }

    /* If you still feel content is "up", nudge the inner grid down a bit */
    .tp-five-step-grid {
        margin-top: 20px !important; /* small, clean push */
    }
}

/* =========================================================
   Ontario — Services Map (Google iframe)
   ========================================================= */

.tp-services-map--iframe {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    min-height: 600px; /* match your taller card */
    overflow: hidden;
    border-radius: 0 16px 16px 0; /* desktop: only outer right corners */
    background: #e8fcff;
    margin-left: 25%;
}

.tp-services-map-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Mobile: full rounded corners + shorter height */
@media (max-width: 991.98px) {
    .tp-services-map--iframe {
        border-radius: 16px;
        min-height: 420px;
    }
}
/* ================================
   MOBILE ONLY — hide the 5 dots
   (covers Owl / Slick / Swiper)
   ================================ */
@media (max-width: 768px) {
    /* Owl Carousel dots */
    .owl-dots,
    .owl-theme .owl-dots,
    .owl-carousel .owl-dots {
        display: none !important;
    }

    /* Slick slider dots */
    .slick-dots {
        display: none !important;
    }

    /* Swiper pagination dots */
    .swiper-pagination,
    .swiper-pagination-bullets {
        display: none !important;
    }

    /* Generic "dots" classes (just in case) */
    .dots,
    .slider-dots,
    .carousel-dots,
    .pagination-dots {
        display: none !important;
    }
}

/* =========================================================
   FIX: Maximize card height must NOT grow with image
   ========================================================= */

/* Desktop/tablet: keep a fixed card height, image crops inside */
.tp-maximize-card {
    height: 790px; /* ✅ fixed height (was min-height) */
    align-items: stretch;
}

/* Right column should not be sized by the image */
.tp-maximize-right {
    position: relative;
    overflow: hidden;
    min-height: 0; /* ✅ important for grid children */
}

/* Image should NOT affect layout — just fill the box */
.tp-maximize-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* ✅ crop inside fixed space */
    display: block;
}

/* If you want the image a bit “contained” (less crop), use this instead:
.tp-maximize-img { object-fit: contain; background:#e8fcff; }
*/

/* ------------------- Responsive overrides ------------------- */
@media (max-width: 991.98px) {
    .tp-maximize-card {
        height: auto; /* ✅ allow natural height when stacked */
    }

    .tp-maximize-right {
        min-height: 320px; /* keep your current mobile/tablet feel */
    }
}

@media (max-width: 575.98px) {
    .tp-maximize-right {
        min-height: 260px; /* your existing rule */
    }
}

/* Your “smaller mobile right image shorter” rule still works */
@media (max-width: 575.98px) {
    .tp-maximize-right {
        min-height: 220px !important;
    }
}