/* ── 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;
    }

    .navbar-mobile-sticky {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        padding: 0.875rem 1rem;
        background: #fff;
        border-top: 1px solid rgba(0, 55, 67, 0.1);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        gap: 0.625rem;
    }

    .navbar-mobile-sticky a {
        flex: 1;
        text-align: center;
        padding: 0.8rem 0.5rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.82rem;
        text-decoration: none;
        white-space: nowrap;
    }

    .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;
}

.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;
    }
}

.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;
}

.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.4rem;
        position: absolute;
        bottom: 0.625rem;
        left: 0;
    }

    .svc-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #c8e4e7;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background 0.2s, transform 0.2s;
    }

    .svc-dot.is--active {
        background: #003943;
        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;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #00b7bf, #FFC800);
    border-radius: 100px;
    animation: progress-grow 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes progress-grow {
    from {
        width: 0;
    }

    to {
        width: 65%;
    }
}

/* 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;
}

/* ---- 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: larger tap targets */
    .navbar-mobile-sticky a {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
}

/* ── 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: 3rem;
    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: 3rem;
    height: 3rem;
    background: #edf5f4;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.25rem;
    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: 1.25rem;
    line-height: 1.35;
}

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

/* ── 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 {
    padding: 0.75rem 1.5rem;
    background: #02b7bf;
    color: #fff;
    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 {
    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; }
.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 0.5rem !important; }
.svp-final-split-sub { color: #4a6670; line-height: 1.6; 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;
    }
}

/* Contact form anchor — offset for the sticky navbar so the heading isn't hidden
   when arriving via the navbar "Contact" link or a /#contact deep link. */
#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;
}