/* ── Visually hidden ─────────────────────────────────────────────────────────
   Text that belongs to the accessible name and to crawlers, but not on screen —
   used to tell eight identical "Learn More" / "Get Started" buttons apart.

   lp2_webflow.css defines .sr-only as {width:1px;position:absolute;overflow:hidden},
   which leaves the height unbounded, so a few words become a 1px-wide vertical
   ribbon that can still overlap what is under it. This file loads after it, so
   the full clip wins. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Meet the Team section ───────────────────────────────────────────────── */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.team-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1.5px solid #edf5f4;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.team-card:hover {
    box-shadow: 0 8px 24px rgba(0, 57, 67, 0.08);
    transform: translateY(-3px);
}

.team-photo {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.25rem;
    display: block;
    border: 2.5px solid #DEF1F2;
}

.team-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #003943;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.team-role {
    font-size: 0.7rem;
    color: #02b7bf;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-bio {
    font-size: 0.8125rem;
    color: #4a6670;
    line-height: 1.65;
    margin: 0;
    text-align: left;
}

@media screen and (max-width: 1199px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }

    .team-card {
        padding: 1.25rem 1rem;
    }

    .team-bio {
        display: none;
    }
}

/* === Custom Cursor === */
*,
*::before,
*::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 0L0 17.07L4.28 12.64L7.42 19.17L9.89 18.07L6.73 11.5L12.74 11.5Z' fill='%23FFC800' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 0 0, auto;
}

/* === Pointer cursor for all clickable elements === */
a,
a *,
button,
button *,
[role="button"],
[role="button"] *,
[type="submit"],
[type="button"],
label[for],
select,
summary,
.w-inline-block,
.w-inline-block *,
.w-tab-link,
.w-tab-link *,
.w-dropdown-toggle,
.w-dropdown-toggle *,
.accordion_toggle,
.accordion_toggle *,
.button,
.button *,
.link_cover,
.breadcrumb_link,
.brand,
.brand *,
.navbar_nav-link,
.navbar_nav-link *,
.navbar_nav-link_text-wrapper,
.navbar_nav-link_text-wrapper *,
.navbar_dropdown-link,
.navbar_dropdown-link *,
.navbar_dropdown_header_text,
.navbar_dropdown_header_text *,
.navbar_list-item a,
.navbar_list-item a *,
.navbar_claim,
.navbar_claim *,
.menu-button,
.menu-button * {
    cursor: pointer !important;
}

/* === Head style block 0 === */
.wf-force-outline-none[tabindex="-1"]:focus {
    outline: none;
}

/* === Head style block 1 === */
.nav-line {
    opacity: 0;
}


/* === Head style block 4 === */
.whatruns-iframe-container-701 {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 99999999999;
    width: 400px;
    height: 287px;
    padding: 0px;
    margin: 0px;
    background: white;
    border-radius: 10.6px;
    box-shadow: 0px 1.8px 14px 0.6px rgba(0, 0, 0, 0.20);
    max-height: 500px;
}

.whatruns-iframe-container-701 iframe {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    border: 0px;
    border-radius: 8px;
}

/* === Body style block 0 === */
/* Media Query: Styles for screens up to and including 1280px */
@media (max-width: 1280px) {
    .values_grid {
        grid-template-columns: 1fr;

    }

    .values_inner-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .values_image {
        /* This is the rule to hide the element */
        display: none !important;
        /* The !important flag is optional but recommended here 
       to ensure this hiding rule overrides any default 
       `display: block` or `display: flex` applied elsewhere. */
    }
}

/* Target screens with a maximum width of 1280px */
@media (max-width: 1200px) {

    /* Rule 1: Collapse .promise_grid to 1 column */
    .promise_grid {
        /* Assuming .promise_grid is the grid container */
        grid-template-columns: 1fr;
    }

}

/* === Body style block 1 === */
/* Make text look crisper and more legible in all browsers */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
    outline: 0.125rem solid #4d65ff;
    outline-offset: 0.125rem;
}

/* Set color style to inherit */
.inherit-color * {
    color: inherit;
}

/* Get rid of top margin on first element in any rich text element */
.w-richtext> :not(div):first-child,
.w-richtext>div:first-child> :first-child {
    margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
    margin-bottom: 0 !important;
}


/* Make sure containers never lose their center alignment */
.container-medium,
.container-small,
.container-large {
    margin-right: auto !important;
    margin-left: auto !important;
}

/* 
Make the following elements inherit typography styles from the parent and not have hardcoded values. 
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
*/

/* Apply "..." after 3 lines of text */
.text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* These classes are never overwritten */
.hide {
    display: none !important;
}

@media screen and (max-width: 991px) {

    .hide,
    .hide-tablet {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .hide-mobile-landscape {
        display: none !important;
    }
}

@media screen and (max-width: 479px) {
    .hide-mobile {
        display: none !important;
    }
}

.margin-0 {
    margin: 0rem !important;
}

.padding-0 {
    padding: 0rem !important;
}

.spacing-clean {
    padding: 0rem !important;
    margin: 0rem !important;
}

.margin-top {
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
}

.padding-top {
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
}

.margin-right {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
}

.padding-right {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
}

.margin-bottom {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}

.padding-bottom {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}

.margin-left {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
}

.padding-left {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
}

.margin-horizontal {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
}

.padding-horizontal {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.margin-vertical {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}

.padding-vertical {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}

/* === Body style block 2 === */
/* Fixed 16px root at all widths to match complexlaw.co.uk (1rem = 16px).
   Previously this used fluid rem scaling (18px > 1920px, calc() below) which
   made text render larger than complexlaw on wide monitors. */
html {
    font-size: 100%;
}

h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
    color: #FFC800;
    font-style: italic;
}

:is(h1, h2, h3, h4, h5, h6, p, blockquote, .footer_link) {
    display: flow-root;
}

:is(h1, h2, h3, h4, h5, h6, p, blockquote, .footer_link)::before {
    content: "";
    display: table;
    margin-bottom: calc(-0.5lh + 0.34em);
}

:is(h1, h2, h3, h4, h5, h6, p, blockquote, .footer_link)::after {
    content: "";
    display: table;
    margin-bottom: calc(-0.5lh + 0.38em);
}

::selection {
    background-color: #02b7bf;
    /* The background color for the highlighted text */
    color: white;
    /* The text color for the highlighted text */
}

.tag em {
    color: #FFC800;
    font-style: normal;
}

.facts_item em {
    font-style: normal;
}

.container-large> :first-child {
    margin-top: 0;
}

.container-full> :first-child {
    margin-top: 0;
}

/* Red Style (2nd, 6th, 10th, 14th, etc.) */
.team_wider-team_item:nth-child(4n + 2) .faces_item {
    background-color: var(--colors--red--lightest);
    border-color: var(--colors--red--lighter);
}

/* Yellow Style (3rd, 7th, 11th, 15th, etc.) */
.team_wider-team_item:nth-child(4n + 3) .faces_item {
    background-color: var(--colors--yellow--lightest);
    border-color: var(--colors--yellow--lighter);
}

/* Blue Style (4th, 8th, 12th, 16th, etc.) */
.team_wider-team_item:nth-child(4n + 4) .faces_item {
    background-color: var(--colors--blue--lightest);
    border-color: var(--colors--blue--lighter);
}

/* Red Style (2nd, 6th, 10th, 14th, etc.) */
.faces_item:nth-child(4n + 2) {
    background-color: var(--colors--red--lightest);
    border-color: var(--colors--red--lighter);
}

/* Yellow Style (3rd, 7th, 11th, 15th, etc.) */
.faces_item:nth-child(4n + 3) {
    background-color: var(--colors--yellow--lightest);
    border-color: var(--colors--yellow--lighter);
}

/* Blue Style (4th, 8th, 12th, 16th, etc.) */
.faces_item:nth-child(4n + 4) {
    background-color: var(--colors--blue--lightest);
    border-color: var(--colors--blue--lighter);
}

.accordion_toggle:hover>.accordion_icon {
    /* Change the border style on hover */
    border-style: dashed !important;
    background: red;
}

@keyframes marquee-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes marquee-right {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.accordion:after {
    content: "";
    display: block;
    position: absolute;
    /* POSITIONING: Starts at 50% from the left (creating the empty space) */
    left: -50vw;
    top: -1px;
    /* DIMENSIONS AND COLOR */
    width: 150vw;
    /* <-- Use % relative to the parent's width */
    height: 1px;
    background-color: var(--color--misc--border);
}

/* BASE STATE: Default anchor is at the BOTTOM (for 'Grow Up' and 'Shrink Down') */
.accordion_toggle::before {
    content: "";
    display: block;
    position: absolute;
    left: -50vw;
    /* Default Anchor: BOTTOM */
    bottom: 0;
    top: unset;
    width: 150vw;
    height: 0%;
    background-color: transparent;
    transition: all 0.3s ease-out;
    z-index: -1;
}

/* HOVER AND FOCUS STATE: Grows to full height */
.accordion_toggle:hover::before,
.accordion_toggle:focus::before {
    height: 100%;
    background-color: var(--colors--paper--shade-10);
    outline: none;
    /* Optional: only if you have a custom focus style */
}

/* .from-top CLASS: Overrides the anchor to the TOP (for 'Grow Down' and 'Shrink Up') */
.accordion_toggle.from-top::before {
    /* New Anchor: TOP */
    top: 0;
    bottom: unset;
}


.accordion_toggle:hover .accordonion_icon {
    border-style: dashed;
}


.facts_item:last-child {
    border: 0;
}

.facts_item:not(:last-child):after {
    content: "";
    display: block;
    position: absolute;

    /* POSITIONING: Starts at 50% from the left (creating the empty space) */
    left: 0;
    bottom: -1px;

    /* DIMENSIONS AND COLOR */
    width: 100vw;
    /* <-- Use % relative to the parent's width */
    height: 1px;
    background-color: var(--color--misc--border);
    ;
}

@media (max-width: 991px) {
    .facts_item:not(:last-child):after {
        /* POSITIONING: Starts at 50% from the left (creating the empty space) */
        left: -2rem;
    }
}

/* Width */
.toc::-webkit-scrollbar {
    width: 4px;
}

/* Track */
.toc::-webkit-scrollbar-track {
    background: #CCCCCC;
    border-radius: 100px;
}

/* Handle */
.toc::-webkit-scrollbar-thumb {
    background: #868686;
    border-radius: 0px;
}

/* Handle Hover */
.toc::-webkit-scrollbar-thumb:hover {
    background: #868686;
}

/* Large: Ideal for multi-column layouts or wide-set hero sections */
[max-width="large"] {
    max-width: 100ch;
    width: 100%;
    margin-inline: auto;
    /* Centers the container */
}

/* Medium: The "Goldilocks" zone for long-form articles and blog posts */
[max-width="medium"] {
    max-width: 75ch;
    width: 100%;
    margin-inline: auto;
}

/* Small: Perfect for asides, narrow callouts, or dense technical notes */
[max-width="small"] {
    max-width: 45ch;
    width: 100%;
    margin-inline: auto;
}

.quiz_questions_list {
    display: none;
}

.quiz_questions_list:first-child {
    display: flex;
}

.quiz_questions_list.is--visible {
    display: flex;
}

.quiz_questions_list.is--not-visible {
    display: none;
}

[data-quiz="results"].is--not-visible {
    display: none;
}

[data-quiz="results"].is--visible {
    display: flex;
}

/* Hide the default SVG when the parent link is hovered */
.learn_sidebar_link:hover .learn_sidebar_link_svg {
    display: none;
}

/* Show the hover-state SVG when the parent link is hovered */
.learn_sidebar_link:hover .learn_sidebar_link_svg.is--hover {
    display: block;
}

.article-table th,
.article-table td {
    vertical-align: top;
    text-align: left;
    /* Optional: usually looks better with top-alignment */
}

.article-table th,
.article-table td {
    min-width: 150px;
    /* vertical-align: top; (from our previous step) */
}

.article-table tr:nth-child(even) {
    background-color: var(--colors--paper--shade-10);
}

/* 1. THE CONTAINER: Prevents bleed and fixes Chrome mask bugs */
.learn_card {
    position: relative;
    overflow: hidden;
    /* Creates a new stacking context to prevent blur during scale */
    isolation: isolate;
    /* Fixes a bug where border-radius + overflow: hidden breaks in Safari/Chrome during zoom */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 2. THE IMAGE: Base state and rendering quality */
.learn_card .image_cover {
    /* Smoothing & Sharpness */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;

    /* Transition: Apply here so it zooms OUT smoothly too */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);

    /* Force GPU acceleration to keep it sharp */
    will-change: transform;
    transform: translateZ(0) scale(1.001);
    /* Starts slightly above 1 to avoid the 'jump' to sharp */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 3. THE HOVER: The actual scale effect */
.learn_card:hover .image_cover {
    /* Scale 1.1 + translateZ(0) to maintain 3D layer sharpness */
    transform: scale(1.1) translateZ(0);

    /* Extra 'Force Sharp' Hack */
    filter: blur(0);
    -webkit-filter: blur(0);
}

/* Example Styles */
.is--correct {
    background-color: #d4edda !important;
    /* Green */
    border-color: #28a745 !important;
}

.is--incorrect {
    background-color: #f8d7da !important;
    /* Red */
    border-color: #dc3545 !important;
}

/* Optional: style the disabled next button */
button[data-quiz="next"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    display: none;
}

/* === Body style block 3 === */
@media (hover: hover) {

    /* --- Styles for .card on mouse hover --- */
    .card:has(.card_link):hover [data-card-border] {
        color: rgba(0, 0, 0, 0.4);
        animation: dash-move 0.2s linear infinite;
    }

    /* --- Styles for .button on mouse hover --- */
    .button:hover [data-button-border] {
        animation: dash-move 0.2s linear infinite;
    }
}

/* The @keyframes can remain outside the media query 
   because they are just definitions, not applied styles.
*/
@keyframes dash-move {
    to {
        stroke-dashoffset: -8;
    }
}


/* 2. Button Hover: Conditional Padding Change and Icon Reveal */
/* This applies styles ONLY if .button is hovered AND it contains a .button_icon */
.button:has(.button_icon):hover {
    padding-left: calc(1.5rem - 0.575rem);
    padding-right: calc(1.5rem - 0.575rem);
}

/* 3. Button Hover: Reveal Icon */
/* This applies to the .button_icon ONLY if its parent .button is hovered */
.button:has(.button_icon):hover .button_icon {
    width: 1.15rem;
    opacity: 1;
}

/* 2. Button Hover: Conditional Padding Change and Icon Reveal */
/* This applies styles ONLY if .button is hovered AND it contains a .button_icon */
[data-wf--button--variant="base-primary---large"]:has(.button_icon):hover {
    padding-left: calc(2.3rem - 0.575rem);
    padding-right: calc(2.3rem - 0.575rem);
}

/* 3. Button Hover: Reveal Icon */
/* This applies to the .button_icon ONLY if its parent .button is hovered */
[data-wf--button--variant="base-primary---large"]:has(.button_icon):hover .button_icon {
    width: 1.15rem;
    opacity: 1;
}



.card p,
h1,
h3,
h4,
h5,
h6 {
    color: var(--colors--aqua--darker);
}

.nav-line {
    opacity: 0;
}


@media screen and (max-width: 991px) {
    .navbar_inner-wrapper {
        overflow-y: auto;
        overflow-x: hidden;
        /* Explicitly guarantees no horizontal scroll */

        /* 2. Hide the scrollbar in Firefox */
        scrollbar-width: none;

        /* 3. Hide the scrollbar in Edge/IE (Less common, but good for completeness) */
        -ms-overflow-style: none;

        /* Ensure the height is constrained, otherwise, it won't scroll */
        /* Example: Using the height calculation from previous interaction */
        height: calc(100svh - 5rem);
    }

    /* 4. Hide the scrollbar in WebKit browsers (Chrome, Safari, newer Opera) */
    .navbar_inner-wrapper::-webkit-scrollbar {
        display: none;
        width: 0;
        /* Ensures no scrollbar space is reserved */
        height: 0;
    }
}

/* === Body style block 4 === */
/* Media Query: Styles for screens up to and including 1280px */
@media (max-width: 1280px) {
    .values_grid {
        grid-template-columns: 1fr;

    }

    .values_inner-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .values_image {
        /* This is the rule to hide the element */
        display: none !important;
        /* The !important flag is optional but recommended here 
       to ensure this hiding rule overrides any default 
       `display: block` or `display: flex` applied elsewhere. */
    }
}

/* Target screens with a maximum width of 1280px */
@media (max-width: 1200px) {

    /* Rule 1: Collapse .promise_grid to 1 column */
    .promise_grid {
        /* Assuming .promise_grid is the grid container */
        grid-template-columns: 1fr;
    }

}

/* === Bureaucracy brand overrides === */
.heading-style-hero em {
    color: #FFC800;
    font-style: italic;
}

/* Responsive hero heading — keep "Your guide through the" on one line */
@media screen and (max-width: 991px) {
    .heading-style-hero {
        font-size: clamp(1.5rem, 5.5vw, 3.5rem);
    }
}

/* === Car Animation (from vw_bureaucracy) === */

/* Nudge keyframe: drives car from left edge to right edge, always visible */
@keyframes nudge {
    0% {
        left: 0;
    }

    100% {
        left: 10%;
    }
}

/* Apply the animation to .car.running */
.running {
    animation: nudge 10s linear infinite alternate;
    will-change: left;
}

/* Road/scenery background */
.slider-bg1 {
    background: none;
}

/* Height for the slider area */
.slider-height {
    height: auto;
}

/* Car image positioning */
.car-img {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.car-img .car {
    position: relative;
    left: 0;
    width: 70%;
}

.car-img .car img {
    width: 100%;
    max-width: 100%;
}

/* === Pricing Grid === */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

@media (max-width: 991px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* === Dashboard Grid === */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
    padding: 2rem;
}

@media (max-width: 767px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem;
    }
}

/* === YouTube Video Grid === */
.youtube-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.youtube-video-card {
    border-radius: 16px;
    overflow: hidden;
    background: #f5f5f5;
}

.youtube-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

@media (max-width: 991px) {
    .youtube-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* === Pricing Card === */
.pricing-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.pricing-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.pricing-card .title,
.modal .title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--colors--aqua--darkest, #00095E);
}

.pricing-card .accent,
.modal .accent {
    color: #FFC800;
}

.pricing-card .subtitle {
    font-size: 1rem;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

.pricing-card .price-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.pricing-card .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pricing-card .price-label {
    font-size: 0.95rem;
    color: #666;
}

.pricing-card .price-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--colors--aqua--darkest, #00095E);
}

.pricing-card .price-amount--child {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--colors--aqua--darkest, #00095E);
}

.pricing-card .price-original {
    font-size: 0.95rem;
    font-weight: 500;
    color: #999;
    text-decoration: line-through;
    margin-right: 0.35rem;
}

.pricing-card .discount-label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e8a500;
    font-style: italic;
    margin-top: 0.25rem;
}

.pricing-card .points,
.modal .points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pricing-card .points li,
.modal .points li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
}

.pricing-card .points li::before,
.modal .points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #FFC800;
    font-weight: 700;
}

.pricing-card .more {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.pricing-card .more[hidden] {
    display: none;
}

.pricing-card .more p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}

.pricing-card .actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
}

.pricing-card .actions .cta,
.pricing-card .actions .readmore {
    width: 100%;
}

.pricing-card .cta,
.modal .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: #FFC800;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s ease;
    border: none;
    cursor: pointer;
}

.pricing-card .cta:hover,
.modal .cta:hover {
    background-color: #e6b400;
    transform: translateY(-1px);
}

.pricing-card .readmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    background: transparent;
    color: var(--colors--aqua--darkest, #00095E);
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid currentColor;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pricing-card .readmore:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Modal overlay */
.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
}

.modal-overlay[hidden] {
    display: none !important;
}

.modal {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    max-width: 520px !important;
    width: 100% !important;
    position: relative !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
    animation: modal-in 0.25s ease !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: none !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    color: #666 !important;
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background-color 0.2s !important;
}

.modal-close:hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
    color: #333 !important;
}

/* Included in the price */
.modal .includes-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--colors--aqua--darkest, #00095E);
    margin: 0 0 0.75rem 0;
}

/* Modal mobile responsive */
@media (max-width: 575px) {
    .modal-overlay {
        padding: 1rem !important;
        align-items: center !important;
    }

    .modal {
        max-width: 100% !important;
        max-height: 90vh !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        width: auto !important;
        margin: 1rem;
    }

    .modal .title {
        font-size: 1.25rem !important;
    }

    .modal .includes-heading {
        font-size: 1rem !important;
    }

    .modal .points li {
        font-size: 0.9rem !important;
    }
}

/* === Footer partner widgets side-by-side === */
.footer_partners {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.footer_partners .footer_partners_item {
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .footer_partners {
        flex-direction: column;
    }
}

/* === Webflow base dropdown toggle (missing from extracted CSS) === */
/* Only the essential display toggle — other base styles are handled by lp2_webflow.css */
.w-dropdown-toggle {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.w-dropdown-toggle:focus {
    outline: 0;
}

.w-dropdown-list {
    display: none;
}

.w-dropdown-list.custom--open {
    display: block !important;
    height: auto !important;
}



/* Fix for Mega Menu width and positioning */
@media screen and (min-width: 992px) {

    /* Untrap absolute positioning */
    .navbar_nav.w-nav-menu {
        transform: none !important;
        position: static !important;
    }

    .navbar_inner-wrapper,
    .navbar_list,
    .navbar_list-item {
        position: static !important;
    }

    .navbar_nav-link_dropdown.is--mega-menu .w-dropdown-list {
        position: absolute !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Ensure inner mega menu container spans the required width */
    .w-dropdown-list.custom--open .navbar_nav-link_dropdown-list.is--mega-menu {
        width: 100% !important;
    }
}

/* === Navigation Hover Cursor === */
/* Ensure all interactive navbar elements show a pointer cursor on hover */
.navbar_nav-link,
.w-dropdown-toggle,
.navbar_dropdown-link,
.navbar_dropdown_header_text,
.navbar_dropdown_header,
.brand,
.menu-button,
.navbar_claim .button {
    cursor: pointer !important;
}

.navbar_dropdown-link.is--feature {
    font-size: 0.78rem;
    color: #6b8a8e;
    cursor: default !important;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

/* Remove grey background in mobile nav bar dropdown */
@media screen and (max-width: 991px) {
    .w-dropdown-list {
        background-color: transparent !important;
    }
}

/* Force desktop dropdown lists to have height so they don't spill out of their white containers */
@media screen and (min-width: 992px) {

    .w-dropdown-list.custom--open .navbar_dropdown_colleciton,
    .w-dropdown-list.custom--open .navbar_dropdown-list {
        height: auto !important;
        display: block !important;
    }
}

.navbar_actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-login-link {
    padding: 0.5rem 1rem;
    color: var(--colors--aqua--darker, #003943);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 8px;
    border: 1.5px solid var(--colors--aqua--darker, #003943);
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.navbar-login-link:hover {
    background-color: var(--colors--aqua--darker, #003943);
    color: #fff;
}

.navbar-cta-accent {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.1rem;
    background-color: #FFC800;
    color: #003943 !important;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(255, 200, 0, 0.35);
}

.navbar-cta-accent:hover {
    background-color: #e6b400;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 200, 0, 0.45);
}

/* Mobile sticky CTA bar */
.navbar-mobile-sticky {
    display: none;
}

.is--service-page .navbar-mobile-sticky {
    display: none !important;
}

@media screen and (max-width: 991px) {
    .navbar-login-link {
        display: none;
    }

    /* The sticky bar sits above the phone's own browser chrome, so every pixel
       it takes is page the visitor cannot see. Slimmed down: it still reads as
       the primary action without eating the bottom of the screen. */
    .navbar-mobile-sticky {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        padding: 0.55rem 0.9rem;
        background: #fff;
        border-top: 1px solid rgba(0, 55, 67, 0.1);
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.07);
        gap: 0.5rem;
    }

    .navbar-mobile-sticky a {
        flex: 1;
        text-align: center;
        padding: 0.6rem 0.5rem;
        border-radius: 7px;
        font-weight: 600;
        font-size: 0.78rem;
        line-height: 1.25;
        text-decoration: none;
        white-space: nowrap;
    }

    /* Login is the smaller of the two: most visitors here do not have an
       account yet, and it kept exactly half the bar. */
    .navbar-mobile-sticky .mobile-login {
        flex: 0 0 34%;
    }

    .navbar-mobile-sticky .mobile-login {
        background: transparent;
        border: 1.5px solid #003943;
        color: #003943;
    }

    .navbar-mobile-sticky .mobile-signup {
        background: #FFC800;
        color: #003943;
        box-shadow: 0 2px 8px rgba(255, 200, 0, 0.3);
    }
}

.stats-strip {
    background: #003943;
    padding: 1.5rem 0;
}

.stats-strip_grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.stats-strip_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 2.5rem;
    text-align: center;
}

.stats-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}

.stats-star {
    color: #FFC800;
    font-size: 1.2rem;
}

.stats-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    white-space: nowrap;
}

/* Compliance qualifier under the success-rate figure. Dimmer than the label so
   it reads as a footnote rather than a second stat. */
.stats-qualifier {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    line-height: 1.3;
}

.stats-strip_divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

@media screen and (max-width: 767px) {
    .stats-strip_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .stats-strip_divider {
        display: none;
    }

    .stats-strip_item {
        padding: 0.75rem 1rem;
    }

    /* Two-up columns are too narrow to hold the longer labels on one line. */
    .stats-label {
        white-space: normal;
    }
}

.sp-quotes-section {
    background: transparent;
    padding-top: 3.5rem;
    padding-bottom: 4rem;
}

.sp-quotes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.sp-quotes-rating {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.sp-stars {
    color: #00b67a;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

.sp-rating-text {
    font-size: 0.875rem;
    color: #3a5258;
}

.sp-trustpilot-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #003943;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.15s;
}

.sp-trustpilot-link:hover {
    opacity: 0.7;
}

.sp-trustpilot-logo {
    height: 20px;
    width: auto;
    object-fit: contain;
}

/* Quote grid — 3 columns */
.sp-quotes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* Quote card */
.sp-quote-card {
    background: #f8f6f1;
    border-radius: 18px;
    padding: 1.5rem;
    border: 1px solid rgba(0, 55, 67, 0.07);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sp-quote-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0, 55, 67, 0.09);
}

/* Featured middle card — slightly elevated */
.sp-quote-card--featured {
    background: #003943;
    border-color: transparent;
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 55, 67, 0.18);
}

.sp-quote-card--featured:hover {
    transform: translateY(-9px);
}

.sp-quote-card--featured .sp-quote-text,
.sp-quote-card--featured .sp-quote-name,
.sp-quote-card--featured .sp-quote-visa {
    color: #fff !important;
}

.sp-quote-card--featured .sp-quote-stars {
    color: #FFC800;
}

.sp-quote-card--featured .sp-quote-avatar {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.sp-quote-stars {
    color: #00b67a;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.sp-quote-text {
    font-size: 0.875rem;
    color: #3a5258;
    line-height: 1.7;
    margin: 0;
    flex: 1;
    font-style: italic;
}

.sp-quote-author {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 55, 67, 0.07);
}

.sp-quote-card--featured .sp-quote-author {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.sp-quote-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #003943, #00b7bf);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-quote-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #003943;
    line-height: 1.2;
}

.sp-quote-flag {
    font-style: normal;
}

.sp-quote-visa {
    font-size: 0.73rem;
    color: #6b8a8e;
    margin-top: 0.1rem;
}

@media screen and (max-width: 768px) {
    .sp-quotes-grid {
        grid-template-columns: 1fr;
    }

    .sp-quote-card--featured {
        transform: none;
    }

    .sp-quotes-header {
        flex-direction: column;
        align-items: flex-start;
    }
}


.svc-section {
    background: transparent;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* 3-col grid, wraps to 2 then 1 */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* Card base */
.svc-card {
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem;
    border: 1px solid rgba(0, 55, 67, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 55, 67, 0.1);
}

/* Top meta: complexity + timeline */
.svc-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.svc-complexity {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.svc-complexity--simple {
    background: #e0f5f0;
    color: #00695c;
}

.svc-complexity--moderate {
    background: #fff3cd;
    color: #92650a;
}

.svc-complexity--complex {
    background: #fde8e8;
    color: #b91c1c;
}

.svc-timeline {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #6b8a8e;
    font-weight: 500;
}

/* Title + who */
.svc-card-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #003943 !important;
    margin: 0 0 0.75rem !important;
    line-height: 1.3 !important;
}

.svc-card-for {
    font-size: 0.82rem;
    color: #4a6d72;
    line-height: 1.55;
    margin: 0 0 0.85rem;
    /* The grid already makes every card in a row the same height, but the
       description was the only part free to vary, so a three-line one pushed
       its own price block and buttons below its neighbours'. Letting it absorb
       the spare height instead lines the prices and both buttons up across the
       row. .svc-card-desc has had this; .svc-card-for is what the card macro
       actually renders. */
    flex: 1 0 auto;
}

.svc-card-desc {
    font-size: 0.82rem;
    color: #4a6d72;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    flex: 1;
}

/* Dashboard features list */
.svc-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.svc-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #3a5258;
    line-height: 1.4;
}

.svc-features li svg {
    color: #00878e;
    flex-shrink: 0;
}

/* Price block */
.svc-price-block {
    border-top: 1px solid rgba(0, 55, 67, 0.08);
    padding-top: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.svc-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.svc-price-label {
    font-size: 0.78rem;
    color: #6b8a8e;
}

.svc-price-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.svc-price-original {
    font-size: 0.75rem;
    color: #aab8ba;
    text-decoration: line-through;
}

.svc-price-amount {
    font-size: 0.95rem;
    font-weight: 700;
    color: #003943;
}

/* Individual services section — larger text */
#individual_services .svc-card-title {
    font-size: 1.2rem !important;
}

#individual_services .svc-card-for {
    font-size: 0.95rem;
}

#individual_services .svc-price-label {
    font-size: 0.9rem;
}

#individual_services .svc-price-original {
    font-size: 0.87rem;
}

#individual_services .svc-price-amount {
    font-size: 1.1rem;
}

.svc-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #00695c;
    background: #e0f5f0;
    padding: 0.2rem 0.5rem;
    border-radius: 100px;
    width: fit-content;
}

/* Actions */
.svc-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.svc-cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    background: #003943;
    color: #fff;
    font-weight: 700;
    font-size: 0.83rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    text-align: center;
}

.svc-cta-primary:hover {
    background: #004f5e;
    transform: translateY(-1px);
    color: #fff;
}

.svc-cta-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.83rem;
    color: #003943;
    text-decoration: none;
    font-weight: 600;
    padding: 0.65rem 1rem;
    border: 1.5px solid rgba(0, 57, 67, 0.2);
    border-radius: 10px;
    transition: background 0.2s, border-color 0.2s, color 0.15s;
}

.svc-cta-secondary:hover {
    background: rgba(0, 57, 67, 0.05);
    border-color: rgba(0, 57, 67, 0.35);
    color: #003943;
}

/* Responsive */
@media screen and (max-width: 1100px) {
    .svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.svc-filter-tabs {
    display: none;
}

.svc-carousel-btn {
    display: none;
}

@media screen and (max-width: 600px) {
    .svc-filter-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-bottom: 1rem;
        margin-bottom: 0.5rem;
    }

    .svc-filter-tab {
        padding: 0.45rem 0.875rem;
        border-radius: 20px;
        border: 1.5px solid #DEF1F2;
        background: #fff;
        color: #4a6670;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.18s, color 0.18s, border-color 0.18s;
        white-space: nowrap;
    }

    .svc-filter-tab.is--active {
        background: #003943;
        color: #fff;
        border-color: #003943;
    }

    .svc-carousel-wrap {
        position: relative;
        padding-bottom: 3rem;
    }

    .svc-grid {
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 1rem;
        padding-bottom: 0.5rem;
    }

    .svc-grid::-webkit-scrollbar {
        display: none;
    }

    .svc-card {
        flex: 0 0 calc(100vw - 5rem);
        scroll-snap-align: start;
        max-width: 100%;
    }

    .svc-carousel-btn {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: #fff;
        border: 1.5px solid #DEF1F2;
        color: #003943;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: background 0.18s, opacity 0.2s;
        box-shadow: 0 2px 8px rgba(0, 57, 67, 0.1);
    }

    .svc-carousel-btn:hover {
        background: #f0f9f9;
    }

    .svc-carousel-btn.is--prev {
        right: 3.25rem;
    }

    .svc-carousel-btn.is--next {
        right: 0;
    }

    .svc-carousel-dots {
        display: flex;
        gap: 0;
        position: absolute;
        /* Offsets pull back the 9px of padding added to each dot below, so the
           dots sit exactly where they did when they were bare 6px circles. */
        bottom: 1px;
        left: -9px;
    }

    .svc-dot {
        /* 6px is the dot you see; the button is 24px so it clears the minimum
           tap target. content-box sizing keeps the padding outside the 6px,
           and background-clip keeps the paint inside it — the border-radius
           shrinks with the clip, so the visible dot stays a circle. */
        width: 6px;
        height: 6px;
        padding: 9px;
        box-sizing: content-box;
        border-radius: 50%;
        background: #c8e4e7;
        background-clip: content-box;
        border: none;
        cursor: pointer;
        transition: background 0.2s, transform 0.2s;
    }

    .svc-dot.is--active {
        background: #003943;
        /* The shorthand above resets background-clip, which would paint the
           whole 24px tap target instead of just the 6px dot. */
        background-clip: content-box;
        transform: scale(1.3);
    }
}




.hero.is--home.hero-v2 {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: transparent;
    overflow-x: clip;
    position: relative;
}

/* Decorative background blob — hidden for uniform background */
.hero-v2_bg-blob {
    display: none;
}

/* Hero block container — clean, no glassmorphism */
.hero-v2_block {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    position: relative;
    z-index: 1;
}

/* Two-column grid */
.hero-v2_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* ---- LEFT SIDE ---- */
.hero-v2_left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Social proof pill */
.hero-v2_pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    background: rgba(0, 55, 67, 0.06);
    border: 1px solid rgba(0, 55, 67, 0.12);
    border-radius: 100px;
    font-size: 0.82rem;
    color: #003943;
    width: fit-content;
}

.pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00b7bf;
    flex-shrink: 0;
    animation: pill-pulse 2s ease-in-out infinite;
}

@keyframes pill-pulse {

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

    50% {
        opacity: 0.6;
        transform: scale(1.3);
    }
}

/* Headline — left aligned override */
.hero-v2_headline {
    text-align: left !important;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}

/* Subheadline */
.hero-v2_sub {
    font-size: 1rem;
    line-height: 1.7;
    color: #3a5258;
    max-width: 46ch;
    margin: 0;
}

/* CTA row */
.hero-v2_ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: #FFC800;
    color: #003943;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(255, 200, 0, 0.4);
    white-space: nowrap;
}

.hero-cta-primary:hover {
    background: #e6b400;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 200, 0, 0.45);
}

.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.875rem 1.5rem;
    background: transparent;
    color: #003943;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    border: 1.5px solid rgba(0, 55, 67, 0.25);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
    white-space: nowrap;
}

.hero-cta-secondary:hover {
    border-color: #003943;
    background: rgba(0, 55, 67, 0.04);
}

/* Human support line */
.hero-v2_human-support {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #3a5258;
    margin: 0;
    font-weight: 500;
}

.hero-v2_human-support svg {
    flex-shrink: 0;
}

/* Trust row */
.hero-v2_trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: #3a5258;
}

.trust-logo {
    height: 18px;
    width: auto;
    object-fit: contain;
    filter: grayscale(0.2);
}

.trust-sep {
    width: 1px;
    height: 14px;
    background: rgba(0, 55, 67, 0.2);
}

.trust-text strong {
    color: #003943;
}

/* ---- RIGHT SIDE ---- */
.hero-v2_right {
    position: relative;
    min-height: 460px;
}

/* Main dashboard card */
.hero-dash-card {
    background: #fff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 55, 67, 0.12), 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 55, 67, 0.07);
    position: relative;
    z-index: 2;
}

/* Card header */
.hero-dash-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.hero-dash-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #003943, #00b7bf);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-dash-meta {
    flex: 1;
}

.hero-dash-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: #003943;
    line-height: 1.2;
}

.hero-dash-visa {
    font-size: 0.75rem;
    color: #6b8a8e;
    margin-top: 0.1rem;
}

.hero-dash-badge {
    padding: 0.25rem 0.625rem;
    background: #e6faf4;
    color: #00875a;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 100px;
    border: 1px solid #b3ead6;
}

/* Progress bar */
.hero-dash-progress {
    margin-bottom: 1.25rem;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #3a5258;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.progress-pct {
    color: #003943;
    font-weight: 700;
}

.progress-track {
    height: 7px;
    background: #e8f0f1;
    border-radius: 100px;
    overflow: hidden;
}

/* Animates transform, not width. Growing `width` re-runs layout on every frame
   of the 1.4s fill — Lighthouse flags it as a non-composited animation, and it
   now runs on the home page plus all nine service heroes. scaleX on a
   full-width bar is the same picture, done on the compositor.
   transform-origin pins it to the left so it grows rightwards, and the
   gradient is sized to the final 65% so scaling does not stretch the colours. */
.progress-fill {
    height: 100%;
    width: 65%;
    background: linear-gradient(90deg, #00b7bf, #FFC800);
    border-radius: 100px;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    animation: progress-grow 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes progress-grow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .progress-fill {
        animation: none;
        transform: scaleX(1);
    }
}

/* Timeline steps */
.hero-dash-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hero-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    position: relative;
}

.hero-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 12px;
    top: calc(0.6rem + 24px);
    width: 1px;
    height: calc(100% - 0.6rem);
    background: #e0eaeb;
}

.step-icon-wrap {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.step-icon-wrap.done {
    background: #003943;
}

.step-icon-wrap.active {
    background: #FFC800;
}

.step-icon-wrap.pending {
    background: #fff;
    border: 1.5px solid #d0e0e2;
}

/* Pulse ring for active step */
.step-pulse-ring {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #003943;
    display: block;
    position: relative;
}

.step-pulse-ring::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #FFC800;
    animation: step-pulse 1.8s ease-out infinite;
}

@keyframes step-pulse {
    0% {
        opacity: 0.8;
        transform: scale(0.8);
    }

    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

.step-body {
    flex: 1;
    padding-top: 0.1rem;
}

.step-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #003943;
    line-height: 1.2;
}

.is-pending .step-title {
    color: #9ab0b3;
}

.step-meta {
    font-size: 0.72rem;
    color: #9ab0b3;
    margin-top: 0.1rem;
}

.step-meta.active-text {
    color: #00875a;
    font-weight: 600;
}

/* Floating notification card */
.hero-notif-card {
    position: absolute;
    bottom: -1.5rem;
    left: -2rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    box-shadow: 0 8px 32px rgba(0, 55, 67, 0.12);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    z-index: 4;
    min-width: 240px;
    animation: float-notif 3s ease-in-out infinite;
}

@keyframes float-notif {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.notif-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #003943, #00b7bf);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-body {
    flex: 1;
}

.notif-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: #003943;
    line-height: 1;
}

.notif-msg {
    font-size: 0.72rem;
    color: #3a5258;
    margin-top: 0.15rem;
}

.notif-time {
    font-size: 0.65rem;
    color: #9ab0b3;
    white-space: nowrap;
}

/* Floating stat cards */
.hero-stat-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.6rem 0.875rem;
    box-shadow: 0 6px 24px rgba(0, 55, 67, 0.1);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-top-right {
    top: -1.25rem;
    right: -1.5rem;
    animation: float-notif 3.5s ease-in-out 0.5s infinite;
}

.stat-bottom-left {
    bottom: 3rem;
    right: -1.75rem;
    animation: float-notif 4s ease-in-out 1s infinite;
}

.stat-icon {
    opacity: 0.7;
}

.stat-num {
    font-size: 1rem;
    font-weight: 800;
    color: #003943;
    line-height: 1;
}

.stat-label {
    font-size: 0.68rem;
    color: #6b8a8e;
    margin-top: 0.1rem;
    white-space: nowrap;
}

.stat-disclaimer {
    font-size: 0.68rem;
    color: #9ab0b3;
    margin-top: 0.15rem;
    white-space: nowrap;
    font-weight: 400;
}

/* ---- Hero v3 mockup (home page) — mirrors the client dashboard ----
   individual_services.html still uses the v2 step-list mockup above, so
   everything v3-specific is hv3-prefixed and the float-position overrides
   are scoped to .hero-v2_right.is--v3. */

/* Visa journey (horizontal dots) */
.hv3-journey {
    margin-bottom: 1.1rem;
}

.hv3-journey-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #3a5258;
    margin-bottom: 0.7rem;
}

.hv3-journey-track {
    display: flex;
    justify-content: space-between;
    position: relative;
}

/* Connecting line behind the dots */
.hv3-journey-track::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e0eaeb;
}

.hv3-jstep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    /* Shrinkable below the label's own width — otherwise five nowrap
       labels set the card's minimum width and overflow small screens. */
    min-width: 0;
    position: relative;
    z-index: 1;
}

.hv3-jdot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hv3-jdot.done {
    background: #003943;
}

.hv3-jdot.active {
    background: #FFC800;
}

.hv3-jdot.pending {
    background: #fff;
    border: 1.5px solid #d0e0e2;
}

.hv3-jlabel {
    font-size: 0.62rem;
    font-weight: 600;
    color: #003943;
    white-space: nowrap;
    /* Backstop for very narrow tracks: clip rather than overflow. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.is-pending .hv3-jlabel {
    color: #9ab0b3;
    font-weight: 500;
}

/* Current task */
.hv3-task {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: #f0f9f9;
    border: 1px solid rgba(0, 183, 191, 0.25);
    border-radius: 12px;
    padding: 0.625rem 0.75rem;
    margin-bottom: 1.1rem;
}

.hv3-task-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(0, 57, 67, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hv3-task-body {
    flex: 1;
    min-width: 0;
}

.hv3-task-kicker {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #00959c;
}

.hv3-task-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #003943;
    line-height: 1.2;
    margin-top: 0.1rem;
}

.hv3-task-chip {
    font-size: 0.68rem;
    font-weight: 700;
    color: #8a6d00;
    background: #fff6d6;
    border: 1px solid #f0dd9a;
    border-radius: 100px;
    padding: 0.25rem 0.55rem;
    white-space: nowrap;
}

/* Payments */
.hv3-pay {
    margin-bottom: 1.1rem;
}

.hv3-pay-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3a5258;
    margin-bottom: 0.5rem;
}

.hv3-pay-total {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b8a8e;
}

.hv3-pay-chips {
    display: flex;
    gap: 0.5rem;
}

.hv3-pay-chip {
    flex: 1;
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
    border: 1px solid #e0eaeb;
    background: #fff;
    min-width: 0;
}

.hv3-pay-amt {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    color: #003943;
    line-height: 1.1;
}

.hv3-pay-state {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    margin-top: 0.15rem;
    white-space: nowrap;
}

.hv3-pay-chip.is-paid {
    background: #e6faf4;
    border-color: #b3ead6;
}

.hv3-pay-chip.is-paid .hv3-pay-state {
    color: #00875a;
}

.hv3-pay-chip.is-due {
    background: #fff6d6;
    border-color: #f0dd9a;
}

.hv3-pay-chip.is-due .hv3-pay-state {
    color: #8a6d00;
}

.hv3-pay-chip.is-later .hv3-pay-state {
    color: #9ab0b3;
}

/* Carlos ask-bar */
.hv3-carlos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e0eaeb;
    border-radius: 100px;
    padding: 0.45rem 0.45rem 0.45rem 0.8rem;
    background: #fbfdfd;
    /* Leaves the bottom-right corner free for the floating stat card;
       the v3 mockup is denser than v2, which had whitespace there. */
    margin-right: 6rem;
}

.hv3-carlos-spark {
    color: #00b7bf;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.hv3-carlos-text {
    /* flex-grow from width:0 — an explicit zero width keeps this nowrap
       placeholder out of the card's intrinsic min-content, which otherwise
       sets a ~360px floor and overflows the phone layout. (min-width:0
       alone allows shrinking but still leaks the text's width into the
       grid track's min-content.) */
    flex: 1 1 0;
    width: 0;
    font-size: 0.72rem;
    color: #9ab0b3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hv3-carlos-send {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #003943;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The v2 float positions sat over empty step-list space; v3 fills the card,
   so both floats drop lower to overlap padding instead of content. */
.hero-v2_right.is--v3 .stat-bottom-left {
    bottom: 0.9rem;
}

.hero-v2_right.is--v3 .hero-notif-card {
    bottom: -2.4rem;
}

@media screen and (max-width: 991px) {

    /* The floating stat cards are hidden on mobile, so the ask-bar can take
       the full width again. */
    .hv3-carlos {
        margin-right: 0;
    }
}

@media screen and (max-width: 480px) {

    /* Journey labels sized to fit five-up inside a phone-width card. */
    .hv3-jlabel {
        font-size: 0.56rem;
    }
}

@media screen and (max-width: 360px) {

    /* On small phones the five journey labels get tight — drop to 4 columns
       by hiding the least informative middle step. */
    .hv3-jstep.is-pending:nth-child(3) {
        display: none;
    }
}

/* ---- MOBILE ---- */
@media screen and (max-width: 991px) {
    .hero.is--home.hero-v2 {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }

    .hero-v2_block {
        padding: 0;
        border-radius: 0;
    }

    .hero-v2_grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hero-v2_headline {
        font-size: clamp(1.9rem, 7vw, 2.8rem) !important;
    }

    .hero-v2_sub {
        max-width: 100%;
    }

    .hero-v2_right {
        min-height: auto;
    }

    .hero-notif-card {
        position: static;
        margin-top: 1rem;
        animation: none;
    }

    .hero-stat-card {
        display: none;
    }

    .hero-v2_bg-blob {
        display: none;
    }

    /* Space for mobile sticky CTA bar */
    body {
        padding-bottom: 76px;
    }

    /* Hide desktop navbar CTA — sticky bar handles both actions */
    .navbar-cta-accent {
        display: none;
    }

    /* Section padding: 5rem is too tall on tablet */
    .svc-section,
    .dash-value-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .sp-quotes-section {
        padding-top: 2.75rem;
        padding-bottom: 3rem;
    }

    /* Dashboard value header: left-align on mobile instead of centered */
    .dash-value-header {
        text-align: left;
        align-items: flex-start;
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 767px) {

    .svc-section,
    .dash-value-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .sp-quotes-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .svc-card {
        padding: 1.25rem;
    }

    .dvb-card {
        padding: 1.375rem;
    }

    .sp-quote-card {
        padding: 1.25rem;
    }

    .svc-cta-primary {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        min-height: 44px;
    }

    .hero-cta-primary,
    .hero-cta-secondary {
        padding: 0.875rem 1.5rem;
        min-height: 44px;
    }

    /* Stats strip stays 2-col but with tighter padding */
    .stats-strip_item {
        padding: 0.625rem 0.875rem;
    }
}


/* === Embedded social proof snippets === */

.svc-social-proof {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 0rem;
    justify-content: center;
}

.svc-proof-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #3a5258;
    font-weight: 500;
}

.svc-proof-sep {
    color: #c0d0d2;
    font-size: 0.8rem;
}

.midcta-proof {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #3a5258;
    margin: 0.875rem 0 0;
    font-weight: 500;
}

@media screen and (max-width: 767px) {
    .svc-social-proof {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .svc-proof-sep {
        display: none;
    }
}

/* ── Team CTA block ── */
.team-cta-block {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

/* ── Testimonials item image centering ── */
.testimonials_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.testimonials_item .service_image {
    display: block;
    margin: 0 auto;
}

.biz-section {
    background: transparent;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.biz-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 4rem;
    align-items: center;
}

/* Left column */
.biz-header {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.biz-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.875rem;
    background: var(--colors--aqua--lightest, #e3f0ff);
    border: 1px solid var(--colors--aqua--lighter, #d1e6ff);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--colors--aqua--darkest, #073558);
    width: fit-content;
}

.biz-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFC800;
    flex-shrink: 0;
}

.biz-heading {
    font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
    font-weight: 800 !important;
    color: var(--colors--aqua--darkest, #073558) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.biz-heading em {
    color: #FFC800 !important;
    font-style: italic;
}

.biz-sub {
    font-size: 0.95rem;
    color: var(--colors--aqua--darker, #0c609f);
    line-height: 1.75;
    max-width: 44ch;
    margin: 0;
}

.biz-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: #FFC800;
    color: #003943;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 10px;
    text-decoration: none;
    width: fit-content;
    transition: background 0.2s ease, transform 0.15s ease;
    box-shadow: 0 4px 16px rgba(255, 200, 0, 0.25);
}

.biz-cta:hover {
    background: #e6b400;
    transform: translateY(-1px);
    color: #003943;
}

/* Right: 2×2 cards */
.biz-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.125rem;
}

.biz-card {
    background: #fff;
    border: 1px solid var(--color--misc--border, #f1e8e2);
    border-radius: 16px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.biz-card:hover {
    background: var(--colors--paper--shade-10, rgba(203, 194, 188, 0.1));
    transform: translateY(-2px);
}

.biz-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: rgba(255, 200, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a6a00;
    flex-shrink: 0;
}

.biz-card-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--colors--aqua--darkest, #073558) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.biz-card-desc {
    font-size: 0.88rem;
    color: var(--colors--aqua--darker, #0c609f);
    line-height: 1.65;
    margin: 0;
}

/* Mobile */
@media screen and (max-width: 991px) {
    .biz-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .biz-sub {
        max-width: 100%;
    }

    .biz-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

@media screen and (max-width: 479px) {
    .biz-cards {
        grid-template-columns: 1fr;
    }

    .biz-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* ---- Small phone (≤479px) — stacked CTAs, tighter everything ---- */
@media screen and (max-width: 479px) {

    /* Stack hero CTAs into a column for narrow screens */
    .hero-v2_ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-cta-primary,
    .hero-cta-secondary {
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    /* Tighten trust row — hide separator between items */
    .trust-sep {
        display: none;
    }

    .hero-v2_trust {
        gap: 0.5rem 0.625rem;
    }

    /* Dashboard mockup: reduce inner padding */
    .hero-dash-card {
        padding: 1.125rem;
    }

    /* Slightly smaller headline on the narrowest phones */
    .hero-v2_headline {
        font-size: clamp(1.65rem, 8.5vw, 2.2rem) !important;
    }

    /* Stats strip: tighten for very narrow */
    .stats-strip_item {
        padding: 0.5rem 0.625rem;
    }

    .stats-num {
        font-size: 1.3rem;
    }

    .stats-label {
        font-size: 0.7rem;
    }

    /* Mobile sticky bar. This block used to enlarge the buttons again on the
       narrowest screens — exactly where the bar has least room to give. Kept
       in step with the 991px rule above so the bar is one size everywhere. */
    .navbar-mobile-sticky a {
        padding: 0.6rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ── Service pages: reduce vertical spacing ─────────────────────────────── */
.page-hero.is--service {
    padding-bottom: 3rem;
    position: relative;
    overflow: hidden;
}

.svc-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.svc-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg, rgba(0, 30, 40, 0.78) 55%, rgba(0, 30, 40, 0.45) 100%);
    z-index: 1;
}

.page-hero.is--service .container-large {
    position: relative;
    z-index: 2;
}

.page-hero.is--service.has--video .heading-style-x,
.page-hero.is--service.has--video h1 {
    color: #ffffff;
}

.page-hero.is--service.has--video>.container-large p,
.page-hero.is--service.has--video .paragraph {
    color: rgba(255, 255, 255, 0.88);
}

.page-hero.is--service.has--video .svc-trust-text,
.page-hero.is--service.has--video .svc-price-hint {
    color: rgba(255, 255, 255, 0.85);
}

.page-hero.is--service.has--video .svc-trust-sep {
    color: rgba(255, 255, 255, 0.4);
}

.page-hero.is--service.has--video .svc-trust-text strong,
.page-hero.is--service.has--video .svc-price-hint strong {
    color: #ffffff;
}

.page-hero.is--service.has--video .tag,
.page-hero.is--service.has--video .tag p {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.15);
}

.page-hero.is--service.has--video [data-wf--button--variant="base-secondary"] .button_label,
.page-hero.is--service.has--video [data-wf--button--variant="base-secondary"] .button_icon {
    color: #ffffff;
}

.svc-tp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
}

.svc-tp-stars {
    color: #00b67a;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.svc-tp-label {
    font-size: 0.85rem;
    color: #4a6670;
}

.svc-tp-label strong {
    color: #003943;
}

.quick-facts-strip {
    background: #f0f9f9;
    border-bottom: 1px solid #d6eef0;
    padding: 1.25rem 0;
}

.quick-facts-grid {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-fact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 2.5rem;
    flex: 1;
    justify-content: center;
}

.quick-fact_icon {
    color: #02b7bf;
    flex-shrink: 0;
}

.quick-fact_body {
    display: flex;
    flex-direction: column;
}

.quick-fact_value {
    font-size: 1rem;
    font-weight: 700;
    color: #003943;
    line-height: 1.2;
}

.quick-fact_label {
    font-size: 0.78rem;
    color: #4a6670;
    margin-top: 0.15rem;
}

.quick-facts-divider {
    width: 1px;
    height: 2.5rem;
    background: #c8e4e7;
    flex-shrink: 0;
}

@media screen and (max-width: 767px) {
    .quick-facts-grid {
        flex-direction: column;
        gap: 0.75rem;
    }

    .quick-facts-divider {
        display: none;
    }

    .quick-fact {
        padding: 0.25rem 1rem;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 767px) {

    /* Full screen hero on mobile */
    .page-hero.is--service {
        min-height: 100svh;
        display: flex;
        align-items: center;
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    /* Stronger overlay on mobile for readability */
    .svc-hero-overlay {
        background: rgba(0, 20, 30, 0.75);
    }

    /* Left-align all hero text */
    .page-hero.is--service .header-block,
    .page-hero.is--service h1,
    .page-hero.is--service .heading-style-x {
        text-align: left;
    }

    .page-hero.is--service>.container-large p {
        text-align: left;
    }

    /* Full-width stacked buttons */
    .page-hero.is--service .button-group {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .page-hero.is--service .button-group .button {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.5rem;
    }

    /* Trust row — stack neatly */
    .svc-hero-trust {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1.25rem;
    }

    .svc-trust-sep {
        display: none;
    }

    /* Price hint — smaller, full row */
    .svc-price-hint {
        font-size: 0.82rem;
        margin-top: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    /* Carlos button — JS handles positioning above sticky CTA */
}

.page-hero.is--service~.section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.page-hero.is--service~.section .facts_item {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media screen and (max-width: 991px) {
    .page-hero.is--service~.section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .page-hero.is--service~.section .facts_item {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}


/* ═══════════════════════════════════════════════════════════ */
/* Carlos AI Assistant – Landing Page Section                 */
/* ═══════════════════════════════════════════════════════════ */

.carlos-section {
    padding: 6rem 0;
    background: var(--colors--paper--shade-10, #f8f7f4);
    position: relative;
    overflow: hidden;
}

.carlos-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* ── Left: Info ── */
.carlos-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 1rem;
}

.carlos-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.12), rgba(2, 183, 191, 0.08));
    border: 1px solid rgba(255, 200, 0, 0.25);
    padding: 0.4rem 0.9rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--colors--aqua--darker, #0a3d3f);
    width: fit-content;
}

.carlos-heading {
    font-size: 2.5rem;
    line-height: 1.15;
    color: var(--colors--aqua--darker, #0a3d3f);
    margin: 0;
}

.carlos-heading em {
    color: #FFC800;
    font-style: italic;
}

.carlos-subtext {
    font-size: 1rem;
    line-height: 1.6;
    color: #4a5568;
    max-width: 480px;
}

/* ── Hint chips ── */
.carlos-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.carlos-hint-chip {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--colors--aqua--darker, #0a3d3f);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.carlos-hint-chip:hover {
    border-color: #FFC800;
    background: rgba(255, 200, 0, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── Right: Chat container ── */
.carlos-chat-container {
    background: #1a2332;
    border-radius: 1.25rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 650px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.carlos-chat-header {
    background: #151d2a;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.carlos-chat-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.carlos-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.15), rgba(255, 200, 0, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 200, 0, 0.2);
}

.carlos-chat-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #e2e8f0;
}

.carlos-chat-status {
    font-size: 0.7rem;
    color: #68d391;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.carlos-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #68d391;
    display: inline-block;
    animation: carlos-pulse 2s ease-in-out infinite;
}

@keyframes carlos-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ── Messages ── */
.carlos-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scroll-behavior: smooth;
}

.carlos-messages::-webkit-scrollbar {
    width: 4px;
}

.carlos-messages::-webkit-scrollbar-track {
    background: transparent;
}

.carlos-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 100px;
}

.carlos-msg {
    display: flex;
    gap: 0.6rem;
    max-width: 88%;
    animation: carlos-fadeIn 0.3s ease;
}

@keyframes carlos-fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carlos-msg-bot {
    align-self: flex-start;
}

.carlos-msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.carlos-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 200, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.carlos-msg-bubble {
    padding: 0.7rem 1rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    line-height: 1.55;
    word-break: break-word;
}

.carlos-msg-bot .carlos-msg-bubble {
    background: #222d3d;
    color: #cbd5e0;
    border-bottom-left-radius: 0.3rem;
}

.carlos-msg-user .carlos-msg-bubble {
    background: linear-gradient(135deg, #FFC800, #e6b400);
    color: #1a2332;
    border-bottom-right-radius: 0.3rem;
    font-weight: 500;
}

/* ── Typing animation ── */
.carlos-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.carlos-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFC800;
    opacity: 0.4;
    animation: carlos-bounce 1.2s ease-in-out infinite;
}

.carlos-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.carlos-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes carlos-bounce {

    0%,
    80%,
    100% {
        transform: scale(0.7);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Input ── */
.carlos-input-area {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #151d2a;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.carlos-input-area textarea {
    flex: 1;
    background: #222d3d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 0.65rem 1rem;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-family: inherit;
    resize: none;
    min-height: 44px;
    max-height: 100px;
    line-height: 1.4;
    outline: none;
    overflow-y: hidden;
    transition: border-color 0.2s;
}

.carlos-input-area textarea::placeholder {
    color: #4a5568;
}

.carlos-input-area textarea:focus {
    border-color: rgba(255, 200, 0, 0.4);
}

.carlos-input-area button[type="submit"] {
    width: 38px;
    height: 38px;
    border-radius: 0.65rem;
    background: #FFC800;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a2332;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.carlos-input-area button[type="submit"]:hover:not(:disabled) {
    background: #e6b400;
    transform: scale(1.05);
}

.carlos-input-area button[type="submit"]:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Disclaimer ── */
.carlos-disclaimer {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: #6b7a8d;
    line-height: 1.6;
    margin-top: 1.5rem;
    text-align: center;
}

.carlos-disclaimer a {
    color: #1a5276;
    text-decoration: underline;
    transition: color 0.2s;
}

.carlos-disclaimer a:hover {
    color: #0d3b5e;
}

/* ── Responsive ── */
@media screen and (max-width: 991px) {
    .carlos-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .carlos-section {
        padding: 4rem 0;
    }

    .carlos-heading {
        font-size: 2rem;
    }

    .carlos-chat-container {
        height: 540px;
    }
}

@media screen and (max-width: 479px) {
    .carlos-section {
        padding: 3rem 0;
    }

    .carlos-heading {
        font-size: 1.6rem;
    }

    .carlos-chat-container {
        height: 460px;
        border-radius: 1rem;
    }

    .carlos-hints {
        gap: 0.4rem;
    }

    .carlos-hint-chip {
        font-size: 0.72rem;
        padding: 0.4rem 0.75rem;
    }
}

/* ── Service pages: additional spacing ───────────────────────────────────── */
@media screen and (max-width: 991px) {
    .page-hero.is--service~.section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .page-hero.is--service~.section .facts_item {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}

/* ── Service hero: trust signals + price hint ────────────────────────────── */
.svc-hero-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.625rem;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: #4a6670;
}

.svc-trust-sep {
    color: #b0c4c8;
}

.svc-trust-text strong {
    color: #003943;
}

.svc-price-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: #4a6670;
    background: rgba(2, 183, 191, 0.07);
    border: 1px solid rgba(2, 183, 191, 0.22);
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
}

.svc-price-hint strong {
    color: #003943;
    font-size: 0.9375rem;
}

/* ── How It Works timeline ───────────────────────────────────────────────── */
.hiw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4.5rem;
}

.hiw-step {
    display: flex;
    flex-direction: column;
}

.hiw-step-top {
    display: flex;
    align-items: center;
    margin-bottom: 2.25rem;
}

.hiw-num {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #003943;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.hiw-connector {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, #DEF1F2, transparent);
    margin-left: 0.75rem;
}

.hiw-step:last-child .hiw-connector {
    display: none;
}

.hiw-icon {
    width: 3rem;
    height: 3rem;
    background: #edf5f4;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.hiw-title {
    font-size: 1rem;
    font-weight: 700;
    color: #003943;
    margin-bottom: 1.25rem;
    line-height: 1.35;
}

.hiw-desc {
    font-size: 0.9rem;
    color: #4a6670;
    line-height: 1.9;
    margin: 0;
}

/* ── USP 2x2 card grid ───────────────────────────────────────────────────── */
.usp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.usp-card {
    background: #fff;
    border: 1.5px solid #edf5f4;
    border-radius: 16px;
    padding: 1.75rem 2rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.usp-card:hover {
    box-shadow: 0 8px 32px rgba(0, 57, 67, 0.1);
    border-color: #02b7bf;
    transform: translateY(-3px);
}

.usp-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: #edf5f4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.125rem;
    transition: background 0.2s ease;
}

.usp-card:hover .usp-icon {
    background: #DEF1F2;
}

.usp-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #003943;
    margin-bottom: 0.625rem;
    line-height: 1.35;
}

.usp-desc {
    font-size: 0.9rem;
    color: #4a6670;
    line-height: 1.6;
    margin: 0;
}

/* margin:0 above is right for the usual one-paragraph card, but it leaves a
   second paragraph running straight into the first with no gap at all. */
.usp-desc + .usp-desc {
    margin-top: 0.75rem;
}

/* ── Visa comparison section ─────────────────────────────────────────────── */
.visa-compare-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.visa-compare-header {
    margin-bottom: 4rem;
}

.visa-compare-header .tag {
    margin-bottom: 1.25rem;
}

.visa-compare-header h2 {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.visa-compare-header p {
    margin-top: 0;
    font-size: 1rem;
    color: #4a6670;
}

.visa-compare_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.visa-compare_table th {
    padding: 1.25rem 2rem;
    text-align: center;
    background: #f0fafb;
    border-bottom: 2px solid #DEF1F2;
    color: #003943;
    font-weight: 600;
    font-size: 1rem;
}

.visa-compare_table th:first-child {
    text-align: left;
    background: transparent;
    border-bottom-color: transparent;
}

.visa-compare_table th.is--active {
    background: #003943;
    color: #fff;
    border-radius: 8px 8px 0 0;
    border-bottom-color: #003943;
}

.visa-compare_table td {
    padding: 1.125rem 2rem;
    border-bottom: 1px solid #edf5f4;
    color: #2d4a50;
    vertical-align: middle;
    line-height: 1.5;
}

.visa-compare_table td:first-child {
    color: #4a6670;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.visa-compare_table td:not(:first-child) {
    text-align: center;
}

.visa-compare_table tr:last-child td {
    border-bottom: none;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.vc-yes {
    color: #02b7bf;
    font-weight: 600;
}

.vc-no {
    color: #aabbbf;
    font-weight: 500;
}

.vc-cta {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: #003943;
    color: #fff !important;
    border-radius: 7px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s;
}

.vc-cta:hover {
    background: #02b7bf;
}

.vc-cta.is--secondary {
    background: transparent;
    color: #003943 !important;
    border: 1.5px solid #003943;
}

.vc-cta.is--secondary:hover {
    background: #003943;
    color: #fff !important;
}

/* ── Financial calculator ────────────────────────────────────────────────── */
.fin-calc {
    background: #f0fafb;
    border: 1.5px solid #DEF1F2;
    border-radius: 20px;
    padding: 3rem;
}

.fin-calc_toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 2.5rem;
}

.fin-calc_toggle {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    border: 1.5px solid #DEF1F2;
    background: #fff;
    color: #4a6670;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

.fin-calc_toggle.is--active {
    background: #003943;
    border-color: #003943;
    color: #fff;
}

.fin-calc_toggle:hover:not(.is--active) {
    border-color: #02b7bf;
    color: #003943;
}

.fin-calc_amount-label {
    font-size: 0.75rem;
    color: #4a6670;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.fin-calc_amount-value {
    font-size: 2.75rem;
    font-weight: 800;
    color: #003943;
    line-height: 1;
    display: block;
    margin: 0.375rem 0;
}

.fin-calc_amount-monthly {
    font-size: 1rem;
    color: #02b7bf;
    font-weight: 600;
}

.fin-calc_note {
    font-size: 0.8125rem;
    color: #4a6670;
    line-height: 1.65;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #DEF1F2;
}

/* ── Sticky bottom CTA ───────────────────────────────────────────────────── */
.sticky-cta {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 3rem));
    z-index: 9999;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.sticky-cta.is--visible {
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
}

.sticky-cta_inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.625rem 0.75rem 0.625rem 1.25rem;
    background: rgba(0, 57, 67, 0.88);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-radius: 100px;
    border: 1px solid rgba(2, 183, 191, 0.25);
    box-shadow: 0 8px 32px rgba(0, 57, 67, 0.35), 0 1px 0 rgba(255,255,255,0.06) inset;
    flex-wrap: nowrap;
}

.sticky-cta_text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sticky-cta_label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.sticky-cta_sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.sticky-cta_text .sticky-cta_label::after {
    content: '·';
    margin-left: 0.5rem;
    color: rgba(255,255,255,0.3);
}

.sticky-cta_actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sticky-cta_btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.125rem;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.sticky-cta_btn.is--primary {
    background: #02b7bf;
    color: #fff;
    box-shadow: 0 2px 10px rgba(2, 183, 191, 0.35);
}

.sticky-cta_btn.is--primary:hover {
    background: #01cdd6;
    box-shadow: 0 4px 16px rgba(2, 183, 191, 0.45);
}

.sticky-cta_btn.is--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.sticky-cta_btn.is--secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.sticky-cta_close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0.35rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.18s;
    margin-left: -0.25rem;
}

.sticky-cta_close:hover {
    color: #fff;
}

/* ── Lead magnet section ──────────────────────────────────────────────────── */
.testimonial-section {
    padding: 4rem 0;
    background: #f0f9f9;
}

.testimonial-card {
    max-width: 52rem;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem 3rem;
    box-shadow: 0 2px 24px rgba(0, 57, 67, 0.08);
    position: relative;
}

.testimonial-quote-mark {
    font-size: 6rem;
    line-height: 1;
    color: #02b7bf;
    opacity: 0.2;
    position: absolute;
    top: 1rem;
    left: 2rem;
    font-family: Georgia, serif;
}

.testimonial-body {
    font-size: 1.15rem;
    line-height: 1.75;
    color: #003943;
    margin: 0 0 1.75rem;
    padding-top: 1.5rem;
    font-style: italic;
    border: none;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.testimonial-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #003943;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.testimonial-name {
    font-weight: 700;
    color: #003943;
    font-size: 0.95rem;
}

.testimonial-detail {
    font-size: 0.8rem;
    color: #4a6670;
    margin-top: 0.1rem;
}

.testimonial-stars {
    color: #00b67a;
    font-size: 1rem;
    letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
    .testimonial-card {
        padding: 2rem 1.5rem;
    }
}

.lead-magnet-section {
    background: #003943;
    padding: 5rem 0;
}

.lead-magnet-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
}

.lead-magnet-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(2, 183, 191, 0.18);
    color: #02b7bf;
    border-radius: 20px;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.lead-magnet-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 0.875rem;
}

.lead-magnet-sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.65;
    margin-bottom: 2rem;
}

.lead-magnet-form {
    display: flex;
    gap: 0.625rem;
    max-width: 480px;
}

.lead-magnet-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s;
}

.lead-magnet-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.lead-magnet-input:focus {
    border-color: #02b7bf;
}

.lead-magnet-btn {
    /* Now an <a>, not a submit button — inline-flex so the vertical padding
       actually takes, and the underline off. */
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: #02b7bf;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.18s;
}

.lead-magnet-btn:hover {
    color: #fff;
}

.lead-magnet-btn:hover {
    background: #01a0a7;
}

.lead-magnet-note {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0.875rem;
}

.lead-magnet-success {
    display: none;
    align-items: center;
    gap: 0.75rem;
    color: #02b7bf;
    font-weight: 600;
    font-size: 1rem;
}

.lead-magnet-visual {
    width: 140px;
    height: 140px;
    background: rgba(2, 183, 191, 0.1);
    border-radius: 20px;
    border: 1.5px solid rgba(2, 183, 191, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Team scroll strip ───────────────────────────────────────────────────── */
.team-scroll-wrap {
    overflow: hidden;
    width: 100%;
    padding-bottom: 2.5rem;
}

.team-scroll-track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: team-scroll 35s linear infinite;
    align-items: flex-start;
}

.team-scroll-track:hover {
    animation-play-state: paused;
}

@keyframes team-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.team-scroll-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
}

.team-scroll-photo-wrap {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2.5px solid #DEF1F2;
    transition: border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.team-scroll-item:hover .team-scroll-photo-wrap,
.team-scroll-item.is--active .team-scroll-photo-wrap {
    border-color: #02b7bf;
    transform: scale(1.05);
}

.team-scroll-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-scroll-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #003943;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-family: inherit;
    text-align: center;
}

.team-scroll-item:hover .team-scroll-name,
.team-scroll-item.is--active .team-scroll-name {
    opacity: 1;
    transform: translateY(0);
}

.team-info-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
}

.team-info-panel.is--open {
    max-height: 180px;
    opacity: 1;
    margin-top: 1.5rem;
}

.team-info-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #f0fafb;
    border: 1.5px solid #DEF1F2;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}

.team-info-photo {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #DEF1F2;
    flex-shrink: 0;
}

.team-info-content {
    flex: 1;
    min-width: 0;
}

.team-info-name {
    font-size: 1rem;
    font-weight: 700;
    color: #003943;
    margin-bottom: 0.2rem;
}

.team-info-role {
    font-size: 0.75rem;
    font-weight: 700;
    color: #02b7bf;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.625rem;
}

.team-info-bio {
    font-size: 0.875rem;
    color: #4a6670;
    line-height: 1.6;
    margin: 0;
}

.team-info-close {
    background: none;
    border: none;
    color: #4a6670;
    cursor: pointer;
    padding: 0.25rem;
    flex-shrink: 0;
    align-self: flex-start;
    transition: color 0.18s;
}

.team-info-close:hover {
    color: #003943;
}

/* ── Renewal cross-link notice ───────────────────────────────────────────── */
.renewal-notice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: #f0fafb;
    border: 1.5px solid #DEF1F2;
    border-radius: 10px;
    padding: 0.875rem 1.25rem;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #4a6670;
    flex-wrap: wrap;
}

.renewal-notice a {
    color: #003943;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.renewal-notice a:hover {
    color: #02b7bf;
}

/* ── Responsive additions ────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
    .hiw-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 2.5rem;
    }

    .hiw-connector {
        display: none;
    }
}

@media screen and (max-width: 767px) {

    /* How It Works */
    .hiw-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .hiw-step {
        display: grid;
        grid-template-columns: 2.75rem 1fr;
        grid-template-rows: auto auto;
        column-gap: 0.875rem;
        row-gap: 0.2rem;
        align-items: start;
    }

    .hiw-step-top {
        grid-column: 1;
        grid-row: 1 / 3;
        margin-bottom: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 0.15rem;
    }

    .hiw-connector {
        display: none;
    }

    .hiw-num {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hiw-icon {
        display: none;
    }

    .hiw-title {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 0;
        padding-top: 0.25rem;
    }

    .hiw-desc {
        grid-column: 2;
        grid-row: 2;
        font-size: 0.85rem;
        color: #4a6670;
        line-height: 1.6;
        margin: 0;
    }

    /* USP grid — 2 columns on mobile */
    .usp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }

    .usp-card {
        padding: 1.25rem 1rem;
    }

    .usp-title {
        font-size: 0.875rem;
    }

    .usp-desc {
        font-size: 0.8rem;
    }

    /* Comparison table */
    .visa-compare_table {
        font-size: 0.8125rem;
    }

    .visa-compare_table th,
    .visa-compare_table td {
        padding: 0.625rem 0.75rem;
    }

    .visa-compare_table td:first-child {
        font-size: 0.75rem;
        white-space: normal;
    }

    /* Financial calculator */
    .fin-calc {
        padding: 1.5rem 1rem;
    }

    .fin-calc_toggles {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .fin-calc_toggle {
        font-size: 0.8rem;
        padding: 0.45rem 0.75rem;
    }

    .fin-calc_amount-value {
        font-size: 2rem;
    }

    /* Testimonial */
    .testimonial-card {
        padding: 1.75rem 1.25rem;
    }

    .testimonial-body {
        font-size: 1rem;
    }

    /* Lead magnet */
    .lead-magnet-card {
        grid-template-columns: 1fr;
    }

    .lead-magnet-visual {
        display: none;
    }

    .lead-magnet-form {
        flex-direction: column;
    }

    .lead-magnet-title {
        font-size: 1.375rem;
    }

    /* Sticky CTA */
    .sticky-cta {
        bottom: 0.75rem;
    }

    .sticky-cta_text {
        display: none;
    }

    .sticky-cta_inner {
        padding: 0.5rem 0.5rem 0.5rem 0.625rem;
        gap: 0.5rem;
    }

    .sticky-cta_btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.875rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   PRIVACY POLICY PAGE  (matches ComplexLaw styling)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────── */
.pp-hero {
    padding: 5rem 0 0;
}

.pp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.pp-breadcrumb__link {
    color: #003943;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.pp-breadcrumb__link:hover {
    color: #02b7bf;
}

.pp-breadcrumb__sep {
    color: #a0b5b9;
}

.pp-breadcrumb__current {
    color: #7a9499;
}

.pp-hero__title {
    font-family: "PT Serif (Custom)", 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 400;
    color: #003943;
    line-height: 1.15;
    margin: 0;
}

.pp-hero__title em {
    color: #00959c;
    font-style: italic;
}

.pp-hero__rule {
    width: 100%;
    height: 1px;
    background: #d6dfdf;
    margin-top: 2.5rem;
}

/* ── Body grid ─────────────────────────────────────────────────────── */
.pp-body {
    padding: 3.5rem 0 6rem;
}

.pp-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: start;
}

/* ── Sidebar / TOC ─────────────────────────────────────────────────── */
.pp-sidebar {
    position: sticky;
    top: 6rem;
}

.pp-toc__heading {
    font-family: "PT Serif (Custom)", 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 1.375rem;
    font-weight: 400;
    color: #003943;
    margin: 0 0 1.5rem;
    line-height: 1.3;
}

.pp-toc__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pp-toc__link {
    display: block;
    padding: 0.5rem 0 0.5rem 1rem;
    font-size: 0.9rem;
    color: #5a7a80;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
    line-height: 1.45;
}

.pp-toc__link:hover {
    color: #003943;
}

.pp-toc__link.is--active {
    color: #003943;
    font-weight: 600;
    border-left-color: #003943;
}

/* ── Sidebar CTA ───────────────────────────────────────────────────── */
.pp-sidebar-cta {
    margin-top: 2.5rem;
    background: #e8f6f7;
    border-radius: 12px;
    padding: 2rem 1.75rem;
    text-align: center;
}

.pp-sidebar-cta__title {
    font-family: "PT Serif (Custom)", 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #003943;
    margin: 0 0 1.25rem;
    line-height: 1.35;
}

.pp-sidebar-cta__title em {
    color: #00959c;
    font-style: italic;
}

.pp-sidebar-cta__btn {
    display: inline-block;
    padding: 0.7rem 1.75rem;
    border: 1.5px dashed #003943;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #003943;
    text-decoration: none;
    transition: all 0.25s ease;
    background: transparent;
}

.pp-sidebar-cta__btn:hover {
    background: #003943;
    color: #fff;
    border-color: #003943;
    border-style: solid;
}

/* ── Content area ──────────────────────────────────────────────────── */
.pp-content {
    max-width: 70ch;
    color: #3d5a61;
    font-size: 1rem;
    line-height: 1.75;
}

.pp-content p {
    margin: 0 0 1.25rem;
}

.pp-meta {
    font-size: 0.875rem;
    color: #7a9499;
    margin-bottom: 2.5rem !important;
}

.pp-section-heading {
    font-family: "PT Serif (Custom)", 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 1.65rem;
    font-weight: 400;
    color: #003943;
    margin: 3rem 0 1.25rem;
    line-height: 1.3;
    scroll-margin-top: 6rem;
}

.pp-content .pp-section-heading:first-of-type {
    margin-top: 2rem;
}

.pp-subheading {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #003943;
    margin: 2rem 0 0.75rem;
    line-height: 1.4;
}

.pp-link {
    color: #02b7bf;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.pp-link:hover {
    color: #00959c;
    text-decoration: underline;
}

.pp-list {
    margin: 0.75rem 0 1.5rem;
    padding-left: 1.5rem;
    list-style: disc;
}

.pp-list li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.pp-content strong {
    color: #003943;
    font-weight: 600;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .pp-grid {
        grid-template-columns: 260px 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 767px) {
    .pp-hero {
        padding: 3.5rem 0 0;
    }

    .pp-hero__title {
        font-size: 1.75rem;
    }

    .pp-hero__rule {
        margin-top: 1.75rem;
    }

    .pp-body {
        padding: 2rem 0 4rem;
    }

    .pp-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pp-sidebar {
        position: static;
        margin-bottom: 2.5rem;
    }

    .pp-toc__heading {
        font-size: 1.15rem;
    }

    .pp-toc__link {
        font-size: 0.85rem;
    }

    .pp-section-heading {
        font-size: 1.35rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   FAQ Accordion – ComplexLaw-inspired layout
   ═══════════════════════════════════════════════════════════════════ */

/* Search input in sidebar */
.faq-search {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d5d8db;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    color: #1a3a3a;
    background: #f5f5f0;
    margin-bottom: 1.25rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.faq-search::placeholder {
    color: #8a9a9a;
}

.faq-search:focus {
    border-color: #2a7f7f;
}

/* Category container spacing */
.faq-category+.faq-category {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0da;
}

/* Category heading in content area */
.faq-category-heading {
    font-family: "PT Serif (Custom)", 'PT Serif', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: #2a7f7f;
    margin: 0 0 0.25rem;
    padding-top: 0;
}

.faq-category-heading:first-child {
    padding-top: 0;
}

/* Single accordion item */
.faq-item {
    border-bottom: 1px solid #e0e0da;
}

.faq-item:last-child {
    border-bottom: none;
}

/* Toggle button */
.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #1a3a3a;
    line-height: 1.5;
    transition: color 0.2s ease;
}

.faq-toggle:hover {
    color: #2a7f7f;
}

/* Plus / minus icon */
.faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background: #8a9a9a;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-icon::before {
    /* horizontal line */
    top: 50%;
    left: 15%;
    width: 70%;
    height: 1.5px;
    transform: translateY(-50%);
}

.faq-icon::after {
    /* vertical line */
    left: 50%;
    top: 15%;
    width: 1.5px;
    height: 70%;
    transform: translateX(-50%);
}

.faq-item.is--open .faq-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.faq-item.is--open .faq-toggle {
    color: #2a7f7f;
}

/* Answer panel */
.faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer__inner {
    padding: 0 0 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4a5f5f;
}

.faq-answer__inner p {
    margin: 0;
}

/* No results message */
.faq-no-results {
    display: none;
    padding: 2rem 0;
    text-align: center;
    color: #8a9a9a;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
}

.faq-no-results.is--visible {
    display: block;
}

@media (max-width: 767px) {
    .faq-category-heading {
        font-size: 1.35rem;
    }

    .faq-toggle {
        font-size: 0.95rem;
        padding: 1rem 0;
    }
}

/* Business services — smaller service card images */
#type_of_services .service_item_image.is--dekstop {
    width: 7rem;
    height: 5rem;
}

#type_of_services .service_item_image.is--mobile {
    width: 5rem;
}

/* Business services — tighten gap between text and button */
#type_of_services .service_item-inner {
    aspect-ratio: auto;
}

#type_of_services .service_item-inner .margin-top-auto {
    margin-top: 1rem;
}

/* Business services — solid "Learn More" card buttons */
#type_of_services .service_item-inner .button {
    background-color: var(--colors--aqua--darkest, #003943);
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

#type_of_services .service_item-inner .button:hover {
    background-color: #00575f;
    transform: translateY(-1px);
}

#type_of_services .service_item-inner .button .button_label {
    color: #fff;
}

#type_of_services .service_item-inner .button .button_icon svg path {
    stroke: #fff;
}

#type_of_services .service_item-inner .button .button_svg-border {
    display: none;
}

/* ===== Business-services detail pages (svcd) ===== */
.svcd-hero {
    padding: 4rem 0 3.5rem;
}

.svcd-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
    align-items: center;
}

.svcd-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.svcd-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.875rem;
    background: var(--colors--aqua--lightest, #e3f0ff);
    border: 1px solid var(--colors--aqua--lighter, #d1e6ff);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--colors--aqua--darkest, #073558);
    width: fit-content;
}

.svcd-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFC800;
    flex-shrink: 0;
}

.svcd-hero-title {
    font-size: clamp(2rem, 4vw, 3.1rem) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    color: var(--colors--aqua--darkest, #073558) !important;
    margin: 0 !important;
}

.svcd-hero-title em {
    color: #FFC800 !important;
    font-style: italic;
}

.svcd-hero-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--colors--aqua--darker, #0c609f);
    margin: 0;
    max-width: 52ch;
}

.svcd-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.svcd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.svcd-btn--primary {
    background: #FFC800;
    color: #003943;
    box-shadow: 0 4px 16px rgba(255, 200, 0, 0.25);
}

.svcd-btn--primary:hover {
    background: #e6b400;
    transform: translateY(-1px);
    color: #003943;
}

.svcd-btn--secondary {
    background: transparent;
    color: var(--colors--aqua--darkest, #073558);
    border: 1.5px solid rgba(0, 55, 67, 0.18);
}

.svcd-btn--secondary:hover {
    border-color: #003943;
    transform: translateY(-1px);
}

/* Hero visual */
.svcd-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
}

.svcd-visual-panel {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    background: linear-gradient(150deg, rgba(0, 183, 191, 0.16), rgba(255, 200, 0, 0.14));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 24px 70px rgba(0, 55, 67, 0.12);
}

.svcd-visual-icon {
    width: 120px;
    height: 120px;
    border-radius: 28px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00878e;
    box-shadow: 0 12px 36px rgba(0, 55, 67, 0.12);
}

.svcd-chip {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.55rem 0.85rem;
    box-shadow: 0 8px 28px rgba(0, 55, 67, 0.12);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #003943;
    white-space: nowrap;
}

.svcd-chip svg {
    color: #00878e;
    flex-shrink: 0;
}

.svcd-chip--1 {
    top: 1.5rem;
    left: -0.75rem;
    animation: float-notif 3.5s ease-in-out infinite;
}

.svcd-chip--2 {
    top: 46%;
    right: -1rem;
    animation: float-notif 4s ease-in-out 0.6s infinite;
}

.svcd-chip--3 {
    bottom: 1.5rem;
    left: 1rem;
    animation: float-notif 3.8s ease-in-out 1s infinite;
}

/* Sections */
.svcd-section {
    padding: 4rem 0;
}

.svcd-section--alt {
    background: var(--colors--paper--shade-10, rgba(203, 194, 188, 0.08));
}

.svcd-intro,
.svcd-faq-head {
    max-width: 60ch;
    margin: 0 auto 2.75rem;
    text-align: center;
}

.svcd-h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
    font-weight: 800 !important;
    color: var(--colors--aqua--darkest, #073558) !important;
    line-height: 1.2 !important;
    margin: 0 0 0.85rem !important;
}

.svcd-h2 em {
    color: #FFC800 !important;
    font-style: italic;
}

.svcd-lead {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--colors--aqua--darker, #0c609f);
    margin: 0;
}

/* Intro cards */
.svcd-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.svcd-card {
    background: #fff;
    border: 1px solid var(--color--misc--border, #f1e8e2);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.svcd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 55, 67, 0.08);
}

.svcd-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 183, 191, 0.12);
    color: #00878e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svcd-card:nth-child(2) .svcd-card-icon {
    background: rgba(255, 200, 0, 0.16);
    color: #8a6a00;
}

.svcd-card-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--colors--aqua--darkest, #073558) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.svcd-card-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--colors--aqua--darker, #0c609f);
    margin: 0;
}

/* FAQ (native details/summary, no JS) */
.svcd-faq {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.svcd-faq-item {
    background: #fff;
    border: 1px solid var(--color--misc--border, #f1e8e2);
    border-radius: 14px;
    padding: 0 1.5rem;
}

.svcd-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--colors--aqua--darkest, #073558);
}

.svcd-faq-item summary::-webkit-details-marker {
    display: none;
}

.svcd-faq-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.svcd-faq-icon::before,
.svcd-faq-icon::after {
    content: "";
    position: absolute;
    background: #00878e;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.svcd-faq-icon::before {
    top: 8px;
    left: 0;
    width: 18px;
    height: 2px;
}

.svcd-faq-icon::after {
    left: 8px;
    top: 0;
    width: 2px;
    height: 18px;
}

.svcd-faq-item[open] .svcd-faq-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.svcd-faq-a {
    padding: 0 0 1.35rem;
}

.svcd-faq-a p {
    font-size: 0.94rem;
    line-height: 1.7;
    color: var(--colors--aqua--darker, #0c609f);
    margin: 0;
}

/* Responsive */
@media screen and (max-width: 991px) {
    .svcd-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .svcd-hero-visual {
        order: -1;
        min-height: 300px;
    }

    .svcd-cards {
        grid-template-columns: 1fr;
    }

    .svcd-section {
        padding: 3rem 0;
    }
}

@media screen and (max-width: 479px) {
    .svcd-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .svcd-btn {
        justify-content: center;
    }

    .svcd-chip {
        font-size: 0.72rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Service-page template (svp-) — shared styles for the deep-dive single-service
   pages (Digital Nomad Visa, Non-Lucrative Visa, …). Brand palette only:
   navy #003943, teal #02b7bf, aqua tints — no red/yellow, no crests/seals.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. HERO */
.svp-hero { padding-bottom: 0; }
.svp-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3.5rem;
    align-items: stretch;
}
/* Left column: vertically balanced against the taller right visual */
.svp-hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Eyebrow → compact, left-aligned pill (base .tag stretches full-width in a column) */
.svp-hero-left .tag {
    align-self: flex-start;
    width: auto;
    min-height: 0;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem 0.4rem 0.5rem;
    background: #ffffff;
    border: 1px solid #d8e7e9;
    border-radius: 100px;
    box-shadow: 0 2px 10px rgba(0, 55, 67, 0.06);
    margin-bottom: 1.5rem;
}
.svp-hero-left .tag_slot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #eaf7f8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
}
.svp-hero-left .tag .paragraph {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #00757e;
}
/* Hero heading: tighter tracking, balanced wrapping for the large serif display */
.svp-hero-left h1 {
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin: 0 0 1.4rem;
}
.svp-hero-sub {
    color: #4a6670;
    font-size: 1.08rem;
    line-height: 1.7;
    margin: 0 0 1.9rem;
    max-width: 34rem;
}
.svp-disclosure {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #5c7178;
    margin: 1.25rem 0 1.5rem;
    max-width: 34rem;
}
.svp-disclosure::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 0.12rem;
    background-color: #9fb4b8;
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* Hero right visual — brand-only "stage" panel + dashboard card */
.svp-hero-right { position: relative; min-height: 460px; height: 100%; }
.svp-hero-stage {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(2,183,191,0.20), transparent 55%),
        linear-gradient(160deg, #eaf7f8 0%, #dff1f2 60%, #cfeaec 100%);
    overflow: hidden;
}
/* Lifestyle-warm variant (e.g. NLV) to differentiate from the remote-work hero */
.svp-hero-stage--lifestyle {
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(2,183,191,0.18), transparent 55%),
        linear-gradient(160deg, #f0f8f6 0%, #e2f2ee 55%, #d3ebe6 100%);
}
.svp-hero-stage::after {
    content: "";
    position: absolute;
    width: 220px; height: 220px; border-radius: 50%;
    right: -60px; bottom: -60px;
    background: radial-gradient(circle, rgba(0,135,142,0.16), transparent 70%);
}
.svp-hero-chip {
    position: absolute;
    top: 1.5rem; left: 1.5rem;
    display: flex; align-items: center; gap: 0.65rem;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 14px;
    padding: 0.65rem 0.9rem;
    box-shadow: 0 10px 30px rgba(0,55,67,0.12);
}
.svp-chip-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: rgba(2,183,191,0.14); color: #00878e;
    display: flex; align-items: center; justify-content: center;
}
.svp-chip-title { display: block; font-size: 0.82rem; font-weight: 700; color: #073558; line-height: 1.2; }
.svp-chip-sub { display: block; font-size: 0.72rem; color: #5c7178; }
.svp-hero-dash {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    max-width: calc(100% - 3rem);
    background: #fff;
    border: 1px solid #e6eef0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,55,67,0.16), 0 6px 16px rgba(0,55,67,0.06);
    padding: 1.1rem 1.15rem;
    z-index: 3;
}
.svp-dash-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.9rem; }
.svp-dash-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: #003943; color: #fff; font-weight: 700; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.svp-dash-meta { display: flex; flex-direction: column; margin-right: auto; }
.svp-dash-name { font-size: 0.85rem; font-weight: 700; color: #073558; line-height: 1.2; }
.svp-dash-visa { font-size: 0.72rem; color: #5c7178; }
.svp-dash-badge {
    font-size: 0.66rem; font-weight: 700; color: #00878e;
    background: rgba(2,183,191,0.12); padding: 0.2rem 0.5rem; border-radius: 100px;
}
.svp-dash-progress-label {
    display: flex; justify-content: space-between;
    font-size: 0.72rem; font-weight: 600; color: #4a6670; margin-bottom: 0.35rem;
}
.svp-dash-track { height: 6px; border-radius: 100px; background: rgba(0,55,67,0.10); overflow: hidden; }
.svp-dash-track span { display: block; width: 65%; height: 100%; border-radius: 100px; background: linear-gradient(90deg,#02b7bf,#00878e); }
.svp-dash-steps { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.svp-dash-steps li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; color: #5c7178; }
.svp-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #cdd9db; flex-shrink: 0; }
.svp-dash-steps li.is-done { color: #073558; }
.svp-dash-steps li.is-done .svp-dot { background: #02b7bf; border-color: #02b7bf; }
.svp-dash-steps li.is-active { color: #073558; font-weight: 600; }
.svp-dash-steps li.is-active .svp-dot { border-color: #02b7bf; background: #fff; box-shadow: 0 0 0 3px rgba(2,183,191,0.18); }

/* Slim 4-item stat strip */
.svp-stats {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.5rem 1.75rem;
    background: #fff;
    border: 1px solid #e6eef0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,55,67,0.05);
}
.svp-stat { display: flex; flex-direction: column; gap: 0.3rem; }
.svp-stat-value { font-size: 1.35rem; font-weight: 800; color: #073558; line-height: 1.1; }
.svp-stat-label { font-size: 0.78rem; color: #5c7178; line-height: 1.4; }
.svp-stat-div { width: 1px; height: 42px; background: #e6eef0; }

/* 2. THE FACTS (3-col) */
.svp-facts-band { background: #f2f9f9; }
.svp-facts3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.svp-facts3-card {
    background: #fff; border: 1px solid #e6eef0; border-radius: 16px;
    padding: 1.75rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.svp-facts3-emoji { font-size: 1.9rem; line-height: 1; }
.svp-facts3-title { font-size: 1.05rem !important; font-weight: 700 !important; color: #073558 !important; margin: 0 !important; }
.svp-facts3-desc { font-size: 0.9rem; color: #4a6670; line-height: 1.6; margin: 0; }

/* 3. ELIGIBILITY self-check */
.svp-selfcheck-card {
    max-width: 46rem; margin: 0 auto 2.5rem;
    background: #fff; border: 1px solid #e6eef0; border-radius: 16px; padding: 2rem;
}
.svp-selfcheck-lead { font-weight: 700; color: #073558; margin: 0 0 1rem; }
.svp-selfcheck-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.svp-selfcheck-list li { display: flex; align-items: flex-start; gap: 0.75rem; color: #33525b; line-height: 1.55; }
.svp-selfcheck-tick {
    width: 24px; height: 24px; min-width: 24px; border-radius: 7px; margin-top: 1px;
    background: rgba(2,183,191,0.12); color: #00878e;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.svp-selfcheck-note {
    font-size: 0.9rem; color: #4a6670; line-height: 1.6;
    background: #f2f9f9; border-radius: 12px; padding: 1rem 1.15rem;
}
.svp-selfcheck-note a { color: #00878e; font-weight: 600; }
.svp-compare-card { overflow: auto; padding: 0; }

/* 4. TIMELINE (vertical) */
.svp-timeline { list-style: none; margin: 3.5rem auto 0; padding: 0; max-width: 46rem; position: relative; }
.svp-tl-step { display: flex; gap: 1.5rem; padding-bottom: 2.25rem; position: relative; }
.svp-tl-step:last-child { padding-bottom: 0; }
.svp-tl-marker { position: relative; flex-shrink: 0; }
.svp-tl-num {
    width: 48px; height: 48px; border-radius: 12px;
    background: #003943; color: #fff; font-weight: 800; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center;
}
.svp-tl-step:not(:last-child) .svp-tl-marker::after {
    content: ""; position: absolute; left: 50%; top: 48px; bottom: -2.25rem;
    width: 2px; transform: translateX(-50%);
    background: linear-gradient(#cfe6e8, #eef6f6);
}
.svp-tl-title { font-size: 1.1rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: #073558 !important; margin: 0.4rem 0 0.65rem !important; }
.svp-tl-desc { color: #4a6670; line-height: 1.5; margin: 0; }

/* 6. Trust strip under testimonial */
.svp-trust-strip {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
    margin-top: 1.75rem; font-size: 0.9rem; color: #4a6670;
}
.svp-trust-strip strong { color: #073558; }
.svp-trust-dot { color: #b7c7ca; }

/* 8. FINAL split-screen */
.svp-final-split {
    display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0;
    border-radius: 20px; overflow: hidden; border: 1px solid #e6eef0;
    box-shadow: 0 20px 50px rgba(0,55,67,0.08);
}
.svp-final-split-left {
    background: linear-gradient(160deg, #003943, #00575f);
    color: #fff; padding: 2.75rem; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem;
}
.svp-final-split-eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7fd6db; font-weight: 700; }
.svp-final-split-price { font-size: 1.6rem; font-weight: 800; line-height: 1.25; }
.svp-final-split-price em { font-style: normal; font-weight: 500; font-size: 1rem; color: #c7e6e8; display: block; margin-top: 0.25rem; }
.svp-final-split-cta {
    align-self: flex-start; margin-top: 1.25rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: #02b7bf; color: #003943; font-weight: 700; font-size: 0.95rem;
    padding: 0.85rem 1.5rem; border-radius: 10px; text-decoration: none;
    transition: transform 0.15s ease, background 0.2s ease;
}
.svp-final-split-cta:hover { background: #04d0d9; transform: translateY(-1px); color: #003943; }
/* Only the price/CTA panel is present — the free-checklist panel is hidden while
   the per-service PDFs are unpublished (search show_free_checklist in the service
   templates). One column is the layout this card already uses below 991px, so the
   band is a known quantity rather than a half-width box with nothing beside it. */
.svp-final-split.is--solo { grid-template-columns: 1fr; }

.svp-final-split-right { background: #fff; padding: 2.75rem; }
.svp-final-split-title { font-size: 1.5rem !important; font-weight: 800 !important; color: #073558 !important; margin: 0.75rem 0 1rem !important; }
.svp-final-split-sub { color: #4a6670; line-height: 1.4; margin: 0 0 1.25rem; }

/* Lead-magnet form sits on a WHITE panel here — the base .lead-magnet-* styles
   assume the dark .lead-magnet-section, leaving the input white-on-white. */
.svp-final-split-right .lead-magnet-input {
    border-color: #cfdde1;
    background: #f6fafb;
    color: #073558;
}
.svp-final-split-right .lead-magnet-input::placeholder { color: #8aa0a8; }
.svp-final-split-right .lead-magnet-input:focus { border-color: #02b7bf; }
.svp-final-split-right .lead-magnet-note { color: #8aa0a8; }

/* Compliance band */
.svp-compliance-band { background: #eef4f5; border-top: 1px solid #dde8ea; padding: 1.75rem 0; }
.svp-compliance-band p { font-size: 0.78rem; line-height: 1.7; color: #5c7178; margin: 0; max-width: 62rem; }

/* Responsive */
@media screen and (max-width: 991px) {
    .svp-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .svp-hero-right { min-height: 360px; order: 2; }
    .svp-facts3-grid { grid-template-columns: 1fr; }
    .svp-final-split { grid-template-columns: 1fr; }
    .svp-stats { grid-template-columns: 1fr 1fr; }
    .svp-stats .svp-stat-div { display: none; }
}
@media screen and (max-width: 560px) {
    .svp-stats { grid-template-columns: 1fr; }
    .svp-final-split-left, .svp-final-split-right { padding: 2rem; }
}

/* === Mobile nav open state (see lp2_custom.js "Custom Vanilla Mobile Nav Toggle") ===
   The Webflow nav runtime never initialises on these pages, so the hamburger is bound
   manually in JS. The panel is revealed by this class rather than an inline style, so
   the desktop breakpoint is never affected. */
@media screen and (max-width: 991px) {
    .navbar_nav.w-nav-menu.is--mobile-open {
        display: flex !important;
    }
}

/* ── Footer: give the link side more of the row ──────────────────────────
   The Webflow default splits the footer 1fr/1fr and spaces the link columns
   48px apart, which left each column ~144px — narrower than the longest
   service names ("Non-Lucrative Visa Renewal" needs ~215px), so those entries
   wrapped onto a second line. Widening the link side and tightening the gap
   fits every entry on one line. Desktop only; below this the footer already
   collapses to a single column. */
@media screen and (min-width: 992px) {
    .footer_grid {
        grid-template-columns: 1fr 2fr;
    }

    /* 210px floor rather than Webflow's 135px: that is the width the longest
       service name needs, so a column can never be too narrow for its links.
       Still auto-fill, so the count drops from 3 to 2 on smaller desktops
       instead of squeezing three columns past the point where they wrap. */
    .footer_links {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        column-gap: 1.75rem;
    }
}

/* Contact form anchor — offset for the sticky navbar so the heading isn't hidden
   when arriving via a deep link to the form on /contact. */
#contact {
    scroll-margin-top: 6rem;
}

/* Custom checkbox/radio checked state — brand colours instead of Webflow's default
   #3898ec blue. (State is driven by lp2_custom.js; see "Custom checkbox / radio
   visual state".) The label wraps the input, so the whole row is clickable. */
.form_checkbox_element.w--redirected-checked {
    background-color: var(--colors--aqua--darkest, #003943) !important;
    border-color: var(--colors--aqua--darkest, #003943) !important;
}

.form_checkbox_element.w--redirected-focus {
    box-shadow: 0 0 0 3px rgba(2, 183, 191, 0.35) !important;
}

/* Make it obvious the whole opt-in row is a click target. */
.form_checkbox,
.w-checkbox.form_checkbox {
    cursor: pointer;
}

/* === Contact form validation states ===
   The submit control is an <a>, so native browser validation bubbles never fire.
   These styles back the manual per-field validation in block_contact_form.html. */
/* .form_input's base rule is `border: 1px #000`, which leaves border-style at its
   `none` default — so border-style has to be set here or the outline never paints. */
.form_input.has--error {
    border-style: solid !important;
    border-color: #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.04) !important;
}

.form_input.has--error:focus {
    border-style: solid !important;
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

.contact_form_item .field_error {
    display: none;
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: #dc2626;
}

/* Make the required marker read as meaningful rather than decorative. */
.contact_form_label .form_required {
    color: #dc2626;
    font-weight: 700;
}

/* Honeypot field for the public forms (see defs/def_rate_limit.py).
   Positioned off-screen rather than display:none — a bot that skips undisplayed
   inputs will still happily fill one it can find in the DOM. aria-hidden and
   tabindex="-1" on the input keep it out of screen readers and the tab order.

   The same declarations are repeated inline on each honeypot input on purpose.
   This file is cache-busted by hand (?v=NN in base.html), so a missed bump leaves
   visitors on a stale stylesheet — and a *visible* honeypot is not merely ugly:
   anything typed into it makes the server discard that submission as a bot. The
   inline copy means the field stays hidden even when this rule never arrives. */
.form_hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Summary error banner above the form actions. */
.error-message.w-form-fail {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: #b91c1c;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Navbar: make the links look clickable ──────────────────────────────
   The navbar ships with a .nav-line SVG under each link, meant to animate in
   on hover via GSAP. That animation never runs — the trigger attributes are
   absent from the rendered element and the line sits at opacity 0 permanently
   — so the only thing marking these as interactive was cursor:pointer, which
   you only find after the pointer is already on the link, and never on touch.

   A hover chip rather than an underline: the links were 16px tall with no
   padding at all, so this widens a genuinely small target as well as showing
   the hover. Done in CSS rather than by repairing the GSAP tween, so it
   cannot silently stop working the way the original did. */
.navbar_list {
    /* Was 24px. The links now carry their own padding either side, so the
       visible gap between two labels stays close to where it was. */
    gap: 5px;
}

.navbar_nav-link {
    /* Webflow pins height:1rem here, and with border-box that swallowed the
       padding whole — the target stayed 16px tall however much was added.
       Releasing the height is what actually makes the click area bigger:
       18px -> 44px, which is the size a finger reliably hits.

       Vertical padding is the generous one and horizontal is kept tight on
       purpose. The navbar already crowds the Login button around 1024px, and
       widening each link pushes the whole row further into it — 12px either
       side cost 68px across the bar, 9px costs 14px. */
    height: auto;
    padding: 12px 9px;
    border-radius: 9px;
    transition: background-color .15s ease, color .15s ease;
}

.navbar_nav-link:hover,
.navbar_nav-link:focus-visible {
    background-color: rgba(0, 71, 84, .08);
    color: #003943;
}

/* The chevron turning over says "this opens something" before the click, and
   the open menu keeps its chip so it stays obvious which one is showing once
   the pointer has moved down into the panel. */
.navbar_nav-link_dropdown_arrow {
    transition: transform .18s ease;
}

.navbar_nav-link:hover .navbar_nav-link_dropdown_arrow,
.w-dropdown.w--open .navbar_nav-link_dropdown_arrow {
    transform: rotate(180deg);
}

.w-dropdown.w--open .navbar_nav-link {
    background-color: rgba(0, 71, 84, .08);
    color: #003943;
}

/* Webflow collapses this navbar to the burger at 991px, but the row does not
   actually fit until about 1051px — so between 992px and there, the last link
   sits underneath the Login button. That is not new: at 992px the stock bar
   overlaps by 20px before any of the styling above is applied.

   The breakpoint itself is the real bug, and it cannot be moved from here: the
   mobile panel styling is 24 rules of Webflow CSS gated at max-width:991px, so
   showing the burger later would open a menu with no panel styles behind it.
   Moving it properly means changing the navbar's collapse breakpoint in
   Webflow and re-exporting.

   Until then, the links give back their horizontal padding across that band,
   which is enough to clear the button. The taller click target is untouched —
   only the width shrinks, and only between these two widths. */
@media screen and (min-width: 992px) and (max-width: 1100px) {
    .navbar_list {
        gap: 2px;
    }

    .navbar_nav-link {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* In the mobile menu, an opened dropdown painted straight over the links below
   it — tapping Services put Individuals/Businesses/Partners on top of Brand
   Ambassadors, Company and Resources.

   Webflow drops the *inner* .navbar_nav-link_dropdown-list to position:static
   for the mobile panel but leaves the panel itself, .navbar_dropdown, absolute
   as it is on desktop. Absolute means out of flow, so the links after it never
   moved down. Static puts it back in the flow and the list pushes the rest of
   the menu along, which is what an accordion is meant to do.

   Scoped to the collapsed menu: the desktop mega menu has to stay absolute or
   it would push the whole page down instead of overlaying it. */
@media screen and (max-width: 991px) {
    .navbar_dropdown.w-dropdown-list {
        position: static;
        width: 100%;
    }
}

/* In the collapsed menu the service lists were folded away to nothing, so
   Services opened to three category headers and a "View All" each — the
   fifteen actual services were in the DOM but their wrapper is held at
   height:0 by an inline style the accordion script sets and never releases.
   !important is the only way past an inline style; the alternative is
   repairing a script whose expand step does not appear to run.

   With them unfolded the list needed hierarchy: sitting flush left they read
   as one flat run of links rather than as the contents of the category above.
   They are indented to start under the category label, with a rule down the
   left, and the rows are tightened — fifteen links at the previous 42px each
   made for a lot of scrolling. */
@media screen and (max-width: 991px) {
    .navbar_dropdown_colleciton {
        height: auto !important;
        overflow: visible !important;
    }

    .navbar_dropdown-list {
        margin: 2px 0 14px 44px;
        padding-left: 14px;
        border-left: 2px solid var(--color--misc--border);
    }

    .navbar_dropdown-link {
        padding-top: 7px;
        padding-bottom: 7px;
        border-radius: 7px;
    }

    .navbar_dropdown-link:hover,
    .navbar_dropdown-link:focus-visible {
        background-color: rgba(0, 71, 84, .06);
    }
}

/* ── Carlos chat: phone sizing ──────────────────────────────────────────
   The composer was 13.6px, and iOS Safari zooms the whole page in whenever a
   focused field is under 16px — tap to type and the layout jumps. 16px is the
   threshold that stops it, and the horizontal padding comes in to pay for the
   extra character width. The send button goes up to 44px at the same time:
   38px is under the size a thumb reliably hits. */
@media screen and (max-width: 600px) {
    .carlos-input-area textarea {
        font-size: 16px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .carlos-input-area button[type="submit"] {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }
}

/* The collapsed menu panel is fixed at viewport height with overflow visible,
   so it never scrolled — it did not need to while every service list was
   folded shut. Unfolding them (above) makes the content taller than the phone,
   and without this everything past the fold is simply unreachable: the panel
   swallows the drag because it is fixed, and the page behind it cannot move
   either. overscroll-behavior stops that scroll chaining to the page once the
   list bottoms out. */
@media screen and (max-width: 991px) {
    .navbar_nav {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* The open menu started 32px below the header with nothing in the gap. The
   panel already pads itself by the header's height to clear it, and then the
   inner wrapper added its own top padding on top of that — a second clearance
   for a header that had already been cleared. The panel's own padding stays;
   the duplicate drops to a small breath so the first item is not welded to
   the header edge. */
@media screen and (max-width: 991px) {
    .navbar_inner-wrapper {
        padding-top: 0.75rem;
    }
}