/**
 * Wins Transport - Component Styles
 * Button and Typography components from Figma design system
 */

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide demo sections */
.component-demo {
    display: none !important;
}

/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */

/* Typography Base - Satoshi Font Family */
.wt-text {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #030712; /* Text 950 */
}

/* Font Sizes with Line Heights and Letter Spacing */

/* Display 2XL - 72px */
.wt-text--display-2xl {
    font-size: 72px;
    line-height: 1.24;
    letter-spacing: -1.44px;
}

/* Display XL - 60px */
.wt-text--display-xl {
    font-size: 60px;
    line-height: 1.2;
    letter-spacing: -1.2px;
}

/* Display LG - 48px */
.wt-text--display-lg {
    font-size: 48px;
    line-height: 1.24;
    letter-spacing: -0.96px;
}

/* Display MD - 36px */
.wt-text--display-md {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.72px;
}

/* Display SM - 30px */
.wt-text--display-sm {
    font-size: 30px;
    line-height: 1.24;
}

/* Text XL - 24px */
.wt-text--xl {
    font-size: 24px;
    line-height: 1.32;
}

/* Text LG - 20px */
.wt-text--lg {
    font-size: 20px;
    line-height: 1.48;
}

/* Text MD - 18px */
.wt-text--md {
    font-size: 18px;
    line-height: 1.54;
}

/* Text Base - 16px */
.wt-text--base {
    font-size: 16px;
    line-height: 1.5;
}

/* Text SM - 14px */
.wt-text--sm {
    font-size: 14px;
    line-height: 1.42;
}

/* Text XS - 12px */
.wt-text--xs {
    font-size: 12px;
    line-height: 1.5;
}

/* Text 2XS - 10px */
.wt-text--2xs {
    font-size: 10px;
    line-height: 1.4;
}

/* Text 3XS - 8px */
.wt-text--3xs {
    font-size: 8px;
    line-height: 1.5;
}

/* Font Weights */
.wt-text--light {
    font-weight: 300;
}

.wt-text--regular {
    font-weight: 400;
}

.wt-text--medium {
    font-weight: 500;
}

.wt-text--bold {
    font-weight: 700;
}

.wt-text--black {
    font-weight: 900;
}

/* Responsive Typography */
@media (max-width: 768px) {
    .wt-text--display-2xl {
        font-size: 48px;
        letter-spacing: -0.96px;
    }

    .wt-text--display-xl {
        font-size: 42px;
        letter-spacing: -0.84px;
    }

    .wt-text--display-lg {
        font-size: 36px;
        letter-spacing: -0.72px;
    }

    .wt-text--display-md {
        font-size: 30px;
        letter-spacing: -0.6px;
    }

    .wt-text--display-sm {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .wt-text--display-2xl {
        font-size: 36px;
        letter-spacing: -0.72px;
    }

    .wt-text--display-xl {
        font-size: 32px;
        letter-spacing: -0.64px;
    }

    .wt-text--display-lg {
        font-size: 28px;
        letter-spacing: -0.56px;
    }

    .wt-text--display-md {
        font-size: 24px;
        letter-spacing: -0.48px;
    }

    .wt-text--display-sm {
        font-size: 20px;
    }
}

/* ============================================
   HEADER NAVIGATION
   ============================================ */

.wt-header {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.wt-header__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px 112px;
}

.wt-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo */
.wt-header__logo {
    flex-shrink: 0;
    width: 105px;
    height: 32px;
}

.wt-header__logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Navigation */
.wt-header__nav {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.wt-header__nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wt-header__nav-link {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    text-decoration: none;
    transition: color 0.2s ease;
}

.wt-header__nav-link:hover,
.wt-header__nav-link--active {
    color: #FF4405;
}

/* Contact Info */
.wt-header__contact {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wt-header__contact-info {
    text-align: center;
    padding-bottom: 4px;
}

.wt-header__phone {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #181D27;
    margin: 0;
}

.wt-header__hours {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    margin: 0;
}

/* Mobile Menu Toggle */
.wt-header__menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #181D27;
}

.wt-header__menu-toggle svg {
    width: 24px;
    height: 24px;
}

/* Mobile Menu */
.wt-header__mobile-menu {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 999;
}

.wt-header__mobile-menu.is-open {
    display: block;
}

.wt-header__mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wt-header__mobile-nav-item {
    margin-bottom: 16px;
}

.wt-header__mobile-nav-link {
    display: block;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #181D27;
    text-decoration: none;
    padding: 12px 0;
    transition: color 0.2s ease;
}

.wt-header__mobile-nav-link:hover,
.wt-header__mobile-nav-link--active {
    color: #FF4405;
}

.wt-header__mobile-contact {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.wt-header__mobile-cta {
    margin-top: 16px;
}

/* Responsive Styles */

/* Tablet Large - 1024px and below */
@media (max-width: 1024px) {
    .wt-header__container {
        padding: 14px 24px;
    }

    /* Hide navigation links at 1024px */
    .wt-header__nav-links {
        display: none;
    }

    /* Show contact info */
    .wt-header__contact {
        display: flex;
        gap: 16px;
    }

    .wt-header__contact-info {
        display: block;
        text-align: center;
    }

    .wt-header__phone {
        font-size: 24px;
        line-height: 32px;
    }

    .wt-header__hours {
        font-size: 16px;
        line-height: 24px;
    }

    /* Keep hamburger menu hidden at 1024px */
    .wt-header__menu-toggle {
        display: none;
    }

    .wt-header__nav {
        flex: 0;
    }
}

/* Tablet - 768px (same as 1024px) */
@media (max-width: 768px) {
    /* Layout remains the same as 1024px */
    /* Logo | Phone + Hours + Button */
}

/* Mobile - 425px and below */
@media (max-width: 425px) {
    .wt-header__container {
        padding: 14px 16px;
    }

    /* Hide CTA button on mobile - Multiple selectors for maximum specificity */
    .wt-header .wt-header__contact .wt-button.wt-header__cta,
    .wt-header a.wt-button--primary.wt-header__cta,
    a.wt-button.wt-button--lg.wt-header__cta,
    .wt-header__contact > .wt-header__cta {
        display: none !important;
    }

    /* Rest of the layout remains the same as tablet */
    /* Logo | Phone + Hours (NO Button) */
}

/* ============================================
   BUTTON COMPONENTS
   ============================================ */

/* Base Button Styles */
.wt-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-sizing: border-box;
}

.wt-button:focus {
    outline: 2px solid #FF4405;
    outline-offset: 2px;
}

/* Button Sizes */
.wt-button--2xl {
    padding: 16px 22px;
    font-size: 18px;
    line-height: 28px;
    border-radius: 10px;
    gap: 8px;
}

.wt-button--xl {
    padding: 12px 18px;
    font-size: 16px;
    line-height: 24px;
    border-radius: 8px;
    gap: 6px;
}

.wt-button--lg {
    padding: 10px 16px;
    font-size: 16px;
    line-height: 24px;
    border-radius: 8px;
    gap: 6px;
}

/* Primary Button */
.wt-button--primary {
    background-color: #FF4405;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0px 0px 0px 1px inset rgba(10, 13, 18, 0.18),
        0px -2px 0px 0px inset rgba(10, 13, 18, 0.05),
        0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.wt-button--primary:hover {
    background-color: #E63D04;
    transform: translateY(-1px);
    box-shadow:
        0px 0px 0px 1px inset rgba(10, 13, 18, 0.18),
        0px -2px 0px 0px inset rgba(10, 13, 18, 0.05),
        0px 2px 4px 0px rgba(16, 24, 40, 0.08);
}

.wt-button--primary:active {
    background-color: #CC3504;
    transform: translateY(0);
}

/* Secondary Button */
.wt-button--secondary {
    background-color: #FFFFFF;
    color: #BC1B06;
    border: 1px solid #FF9C66;
    box-shadow:
        0px 0px 0px 1px inset rgba(10, 13, 18, 0.18),
        0px -2px 0px 0px inset rgba(10, 13, 18, 0.05),
        0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.wt-button--secondary:hover {
    background-color: #FFF5F0;
    border-color: #FF8040;
    transform: translateY(-1px);
    box-shadow:
        0px 0px 0px 1px inset rgba(10, 13, 18, 0.18),
        0px -2px 0px 0px inset rgba(10, 13, 18, 0.05),
        0px 2px 4px 0px rgba(16, 24, 40, 0.08);
}

.wt-button--secondary:active {
    background-color: #FFE8DC;
    transform: translateY(0);
}

.wt-button--secondary .wt-button__icon {
    width: 20px;
    height: 20px;
}

.wt-button--secondary.wt-button--2xl .wt-button__icon {
    width: 24px;
    height: 24px;
}

/* Disabled Button */
.wt-button--disabled,
.wt-button:disabled {
    background-color: #F5F5F5;
    color: #A4A7AE;
    border: 1px solid #E9EAEB;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    cursor: not-allowed;
    pointer-events: none;
}

.wt-button--disabled:hover,
.wt-button:disabled:hover {
    transform: none;
    background-color: #F5F5F5;
}

/* Link Button */
.wt-button--link {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    color: #181D27;
    font-size: 16px;
    line-height: 24px;
}

.wt-button--link:hover {
    color: #FF4405;
    transform: none;
    box-shadow: none;
}

.wt-button--link.wt-button--selected {
    color: #FF4405;
}

/* Button Icon */
.wt-button__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.wt-button__icon svg {
    width: 100%;
    height: 100%;
}

/* Button Text Padding */
.wt-button__text {
    padding: 0 2px;
    white-space: nowrap;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .wt-button--2xl {
        padding: 14px 20px;
        font-size: 17px;
        line-height: 26px;
    }

    .wt-button--xl {
        padding: 11px 16px;
        font-size: 15px;
        line-height: 22px;
    }

    .wt-button--lg {
        padding: 9px 14px;
        font-size: 15px;
        line-height: 22px;
    }
}

@media (max-width: 480px) {
    .wt-button--2xl {
        padding: 12px 18px;
        font-size: 16px;
        line-height: 24px;
    }

    .wt-button--xl {
        padding: 10px 14px;
        font-size: 14px;
        line-height: 20px;
    }

    .wt-button--lg {
        padding: 8px 12px;
        font-size: 14px;
        line-height: 20px;
    }
}

/* Touch Target Optimization (44px minimum for mobile) */
@media (pointer: coarse) {
    .wt-button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Loading State */
.wt-button--loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.wt-button--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #FFFFFF;
    animation: wt-button-spin 0.6s linear infinite;
}

.wt-button--secondary.wt-button--loading::after {
    border-color: rgba(188, 27, 6, 0.3);
    border-top-color: #BC1B06;
}

@keyframes wt-button-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Full Width Button */
.wt-button--full-width {
    width: 100%;
}

/* Button Group */
.wt-button-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.wt-button-group--vertical {
    flex-direction: column;
}

@media (max-width: 768px) {
    .wt-button-group {
        gap: 10px;
    }

    .wt-button-group--mobile-stack {
        flex-direction: column;
    }

    .wt-button-group--mobile-stack .wt-button {
        width: 100%;
    }
}

/* ============================================
   HERO SECTION
   ============================================ */

/* Hero Container */
.wt-hero {
    width: 100%;
}

.wt-hero__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 112px;
}

/* Quote Section */
.wt-hero__quote-section {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    width: 100%;
    max-width: 630px;
    min-width: 343px;
}

.wt-hero__heading-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    width: 100%;
}

.wt-hero__quote-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.wt-hero__main-heading {
    text-align: center;
    color: #181D27;
}

.wt-hero__subheading {
    text-align: center;
    color: #535862;
    max-width: 480px;
}

/* Actions and Reviews Wrapper */
.wt-hero__actions-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
}

.wt-hero__actions {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Reviews Section */
.wt-hero__reviews {
    display: flex;
    gap: 16px;
    align-items: center;
}

.wt-hero__reviews-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wt-hero__reviews-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wt-hero__rating-number {
    color: #414651;
}

.wt-hero__reviews-count {
    color: #535862;
}

/* Featured Vehicles Section */
.wt-hero__featured-vehicles {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 936px;
    min-width: 296px;
    isolation: isolate;
}

/* ============================================
   BADGE COMPONENT
   ============================================ */

.wt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 12px;
    border-radius: 16px;
    border: 1px solid transparent;
    position: relative;
}

.wt-badge__icon {
    flex-shrink: 0;
}

.wt-badge span {
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
}

/* Badge Purple Variant */
.wt-badge--purple {
    background-color: #F4F3FF;
    border-color: #D9D6FE;
}

.wt-badge--purple span {
    color: #5925DC;
}

/* Badge Success Variant */
.wt-badge--success {
    background-color: #ECFDF3;
    border-color: #ABEFC6;
}

.wt-badge--success span {
    color: #067647;
}

/* ============================================
   AVATAR GROUP
   ============================================ */

.wt-avatar-group {
    display: flex;
}

.wt-avatar-group__avatars {
    display: flex;
    align-items: flex-start;
    padding: 0 12px 0 0;
}

.wt-avatar {
    width: 40px;
    height: 40px;
    border-radius: 200px;
    position: relative;
    margin-right: -12px;
    border: 1.5px solid #FFFFFF;
    overflow: hidden;
}

.wt-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 0.75px solid rgba(0, 0, 0, 0.08);
    border-radius: 200px;
    pointer-events: none;
}

.wt-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* ============================================
   STAR RATING
   ============================================ */

.wt-star-rating {
    display: flex;
    gap: 4px;
    align-items: center;
}

.wt-star-rating__star {
    flex-shrink: 0;
}

/* ============================================
   VEHICLE CARD
   ============================================ */

.wt-vehicle-card {
    width: 296px;
    background: #FFFFFF;
    border-radius: 24px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow:
        0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
        0px 54px 15px 0px rgba(0, 0, 0, 0),
        0px 34px 14px 0px rgba(0, 0, 0, 0.01),
        0px 19px 12px 0px rgba(0, 0, 0, 0.03),
        0px 9px 9px 0px rgba(0, 0, 0, 0.04),
        0px 2px 5px 0px rgba(0, 0, 0, 0.05);
}

/* Z-index layering for depth effect */
.wt-vehicle-card:nth-child(1) {
    z-index: 3;
}

.wt-vehicle-card:nth-child(2) {
    z-index: 2;
}

.wt-vehicle-card:nth-child(3) {
    z-index: 1;
}

/* Card inner container */
.wt-vehicle-card > div:first-child {
    padding: 8px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Image wrapper */
.wt-vehicle-card__image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Image */
.wt-vehicle-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 16px;
}

/* Badge positioning on image */
.wt-vehicle-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Card info container */
.wt-vehicle-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Card info inner wrapper */
.wt-vehicle-card__info > div {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    width: 100%;
}

/* Title wrapper */
.wt-vehicle-card__info > div > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

/* Title */
.wt-vehicle-card__title {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #181D27;
    width: 100%;
    margin: 0;
}

/* Features container */
.wt-vehicle-card__features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* ============================================
   CHECK ITEM
   ============================================ */

.wt-check-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.wt-check-item__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

.wt-check-item > div {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wt-check-item__text {
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #535862;
    width: 100%;
    margin: 0;
}

/* ============================================
   BUTTON VARIANTS - Hero Specific
   ============================================ */

.wt-button--secondary-red {
    background: #FFFFFF;
    color: #BC1B06;
    border: 1px solid #FF9C66;
}

.wt-button--secondary-red:hover {
    background: #FFF5F0;
}

/* ============================================
   CAR CARD (Vehicles Section)
   Extended version of wt-vehicle-card with pricing and CTA
   ============================================ */

.wt-car-card {
    width: 296px;
    background: #FFFFFF;
    border-radius: 24px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow:
        0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
        0px 54px 15px 0px rgba(0, 0, 0, 0),
        0px 34px 14px 0px rgba(0, 0, 0, 0.01),
        0px 19px 12px 0px rgba(0, 0, 0, 0.03),
        0px 9px 9px 0px rgba(0, 0, 0, 0.04),
        0px 2px 5px 0px rgba(0, 0, 0, 0.05);
}

/* Card inner container */
.wt-car-card > div:first-child {
    padding: 8px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Image wrapper */
.wt-car-card__image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Image */
.wt-car-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 16px;
}

/* Badge positioning on image */
.wt-car-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Badge variant - Indigo (for Self-Drive) */
.wt-badge--indigo {
    background-color: #EEF4FF;
    border-color: #C7D7FE;
}

.wt-badge--indigo span {
    color: #3538CD;
}

/* Car info container */
.wt-car-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Car info inner wrapper */
.wt-car-card__info > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Car info content wrapper */
.wt-car-card__info-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    width: 100%;
}

/* Car name and description wrapper */
.wt-car-card__name-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    width: 100%;
}

/* Car title */
.wt-car-card__title {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #181D27;
    width: 100%;
    margin: 0;
}

/* Car description */
.wt-car-card__description {
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #535862;
    width: 100%;
    margin: 0;
}

.wt-car-card__description-label {
    font-weight: 500;
}

.wt-car-card__description-text {
    font-weight: 400;
}

/* Features container */
.wt-car-card__features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Price section */
.wt-car-card__price {
    background: #F5F7F6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 16px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

.wt-car-card__price-label {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #535862;
    width: 100%;
    margin: 0;
}

.wt-car-card__price-amount {
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 38px;
    color: #FF4405;
    width: 100%;
    margin: 0;
}

/* CTA Button */
.wt-car-card__cta {
    background: #FF4405;
    border-radius: 16px;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    box-shadow:
        0px 0px 0px 1px inset rgba(10, 13, 18, 0.18),
        0px -2px 0px 0px inset rgba(10, 13, 18, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
    display: block;
}

.wt-car-card__cta:hover {
    background: #E62E05;
    text-decoration: none;
}

.wt-car-card__cta-inner {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    width: 100%;
}

.wt-car-card__cta-text-padding {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    flex-shrink: 0;
}

.wt-car-card__cta-text {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    white-space: nowrap;
    margin: 0;
}

/* ============================================
   VEHICLES SECTION
   ============================================ */

.wt-vehicles-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    padding: 96px 0;
    width: 100%;
}

.wt-vehicles-section__container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    max-width: 1280px;
    padding: 0 32px;
    width: 100%;
    flex-shrink: 0;
}

.wt-vehicles-section__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.wt-vehicles-section__heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.wt-vehicles-section__title {
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.72px;
    color: #181D27;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

.wt-vehicles-section__subtitle {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.48;
    color: #535862;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

/* ============================================
   VEHICLES GRID (Same as Hero Featured Vehicles)
   ============================================ */

.wt-vehicles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

/* ============================================
   AREAS WE SERVE SECTION
   ============================================ */

.wt-areas-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    padding: 96px 0;
    width: 100%;
}

.wt-areas-section__header {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    max-width: 1280px;
    padding: 0 32px;
    width: 100%;
    flex-shrink: 0;
}

.wt-areas-section__header-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.wt-areas-section__heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    max-width: 768px;
    width: 100%;
    flex-shrink: 0;
}

.wt-areas-section__heading-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

.wt-areas-section__title {
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.72px;
    color: #181D27;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

.wt-areas-section__subtitle {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #535862;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

/* Region Row Container */
.wt-areas-section__region {
    display: flex;
    gap: 96px;
    align-items: center;
    max-width: 1280px;
    padding: 0 32px;
    width: 100%;
    flex-shrink: 0;
}

/* Region Content (left side on odd, right side on even) */
.wt-areas-section__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    flex-shrink: 0;
}

.wt-areas-section__region-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

.wt-areas-section__region-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

.wt-areas-section__region-title {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: #FF4405;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

.wt-areas-section__region-subtitle {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #535862;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

/* Testimonial Card */
.wt-areas-section__card {
    background: rgba(255, 68, 5, 0.06);
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
    padding: 32px;
    border-radius: 12px;
    width: 100%;
    flex-shrink: 0;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}

.wt-areas-section__card-quote {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

.wt-areas-section__card-text {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #535862;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

.wt-areas-section__card-attribution {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

.wt-areas-section__card-avatar-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex: 1;
    flex-shrink: 0;
}

.wt-areas-section__card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: #FFFFFF;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.wt-areas-section__card-author {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.wt-areas-section__card-author-name {
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 24px;
    color: #181D27;
    flex-shrink: 0;
    margin: 0;
    white-space: nowrap;
}

.wt-areas-section__card-author-title {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #535862;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

/* Region Image */
.wt-areas-section__image {
    flex: 1;
    aspect-ratio: 560 / 512;
    border-radius: 12px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.wt-areas-section__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================
   GET A QUOTE SECTION
   ============================================ */

/* Desktop - Default (1440px) */
.wt-quote-section {
    display: flex;
    gap: 100px;
    align-items: center;
    width: 100%;
}

.wt-quote-section__container {
    display: flex;
    flex-direction: column;
    gap: 64px;
    min-height: 770px;
    align-items: center;
    padding: 96px 0;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    flex-shrink: 0;
}

/* Content container */
.wt-quote-section__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    max-width: 1280px;
    padding: 0 32px;
    width: 100%;
    flex-shrink: 0;
}

/* Content inner */
.wt-quote-section__content > div {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

/* Heading and supporting text */
.wt-quote-section__heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    max-width: 768px;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
}

/* Title */
.wt-quote-section__title {
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.72px;
    color: #181D27;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

/* Subtitle */
.wt-quote-section__subtitle {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.48;
    color: #535862;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

/* Form container */
.wt-quote-section__form-container {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: flex-start;
    max-width: 1280px;
    padding: 0 32px;
    width: 100%;
    flex-shrink: 0;
}

/* Form */
.wt-quote-section__form {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow:
        0px 837px 234px 0px rgba(0, 0, 0, 0),
        0px 535px 214px 0px rgba(0, 0, 0, 0.01),
        0px 301px 181px 0px rgba(0, 0, 0, 0.05),
        0px 134px 134px 0px rgba(0, 0, 0, 0.09),
        0px 33px 74px 0px rgba(0, 0, 0, 0.1);
    width: 100%;
    flex-shrink: 0;
    overflow: visible;
}

/* JotForm iframe styling */
.wt-quote-section__form iframe {
    width: 100%;
    border: none;
    min-height: 420px;
}

/* ============================================
   RESPONSIVE - HERO SECTION
   ============================================ */

/* 768px and below */
@media (max-width: 768px) {
    .wt-hero__container {
        padding: 60px 24px;
    }

    .wt-hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .wt-hero__actions .wt-button {
        width: 100%;
    }
}

/* Mobile - 425px and below */
@media (max-width: 425px) {
    .wt-hero__container {
        padding: 60px 16px 0;
    }

    .wt-hero__quote-section {
        gap: 32px;
    }

    .wt-hero__quote-heading {
        gap: 8px;
    }

    /* Main heading size adjustment for mobile */
    .wt-hero__main-heading {
        font-size: 36px;
        line-height: 1.2;
        letter-spacing: -0.72px;
    }

    /* Subheading size adjustment for mobile */
    .wt-hero__subheading {
        font-size: 18px;
        line-height: 1.54;
    }

    /* Button adjustments for mobile */
    .wt-hero__actions .wt-button--2xl {
        padding: 12px 18px;
        font-size: 16px;
        line-height: 24px;
        border-radius: 8px;
        gap: 6px;
    }

    /* Phone icon size adjustment */
    .wt-hero__actions .wt-button__icon img {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   RESPONSIVE - GET A QUOTE SECTION
   ============================================ */

/* Tablet - 768px */
@media (max-width: 768px) {
    .wt-quote-section__container {
        padding: 64px 0;
        gap: 48px;
    }

    .wt-quote-section__content {
        padding: 0 32px;
        gap: 32px;
    }

    .wt-quote-section__heading {
        gap: 16px;
    }

    .wt-quote-section__title {
        font-size: 30px;
        line-height: 1.24;
        letter-spacing: 0;
    }

    .wt-quote-section__subtitle {
        font-size: 16px;
        line-height: 1.5;
    }

    .wt-quote-section__form-container {
        padding: 0 32px;
    }
}

/* Mobile - 320px to 425px */
@media (max-width: 425px) {
    .wt-quote-section__container {
        padding: 64px 0;
        gap: 48px;
    }

    .wt-quote-section__content {
        padding: 0 32px;
        gap: 32px;
    }

    .wt-quote-section__heading {
        gap: 16px;
    }

    .wt-quote-section__title {
        font-size: 30px;
        line-height: 1.24;
    }

    .wt-quote-section__subtitle {
        font-size: 16px;
        line-height: 1.5;
    }

    .wt-quote-section__form-container {
        padding: 0 32px;
    }

    .wt-quote-section__form iframe {
        min-height: 356px;
    }
}

/* ============================================
   RESPONSIVE - VEHICLES SECTION
   ============================================ */

/* Tablet - 768px */
@media (max-width: 768px) {
    .wt-vehicles-section {
        padding: 64px 0;
        gap: 48px;
    }

    .wt-vehicles-section__container {
        padding: 0 32px;
        gap: 32px;
    }

    .wt-vehicles-section__heading {
        gap: 16px;
    }

    .wt-vehicles-section__title {
        font-size: 30px;
        line-height: 1.24;
        letter-spacing: 0;
    }

    .wt-vehicles-section__subtitle {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* Mobile - 320px to 425px */
@media (max-width: 425px) {
    .wt-vehicles-section {
        padding: 64px 0;
        gap: 48px;
    }

    .wt-vehicles-section__container {
        padding: 0 32px;
        gap: 32px;
    }

    .wt-vehicles-section__heading {
        gap: 16px;
    }

    .wt-vehicles-section__title {
        font-size: 30px;
        line-height: 1.24;
    }

    .wt-vehicles-section__subtitle {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* ============================================
   RESPONSIVE - AREAS WE SERVE SECTION
   ============================================ */

/* Tablet - 768px */
@media (max-width: 768px) {
    .wt-areas-section {
        padding: 64px 0;
        gap: 48px;
    }

    .wt-areas-section__header {
        padding: 0 16px;
        gap: 32px;
    }

    .wt-areas-section__heading {
        gap: 16px;
    }

    .wt-areas-section__title {
        font-size: 30px;
        line-height: 1.24;
        letter-spacing: 0;
    }

    .wt-areas-section__subtitle {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Stack regions vertically */
    .wt-areas-section__region {
        flex-direction: column;
        gap: 32px;
        padding: 0 16px;
    }

    /* Center region headings on tablet */
    .wt-areas-section__region-heading {
        text-align: center;
    }

    .wt-areas-section__region-title,
    .wt-areas-section__region-subtitle {
        text-align: center;
    }

    /* Full width image and content */
    .wt-areas-section__image,
    .wt-areas-section__content {
        width: 100%;
    }
}

/* Mobile - 320px to 425px */
@media (max-width: 425px) {
    .wt-areas-section {
        padding: 64px 0;
        gap: 48px;
    }

    .wt-areas-section__header {
        padding: 0 16px;
        gap: 32px;
    }

    .wt-areas-section__heading {
        gap: 16px;
    }

    .wt-areas-section__title {
        font-size: 30px;
        line-height: 1.24;
    }

    .wt-areas-section__subtitle {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Stack regions vertically */
    .wt-areas-section__region {
        flex-direction: column;
        gap: 32px;
        padding: 0 16px;
    }

    /* Center region headings on mobile */
    .wt-areas-section__region-heading {
        text-align: center;
    }

    .wt-areas-section__region-title,
    .wt-areas-section__region-subtitle {
        text-align: center;
    }

    /* Full width image and content */
    .wt-areas-section__image,
    .wt-areas-section__content {
        width: 100%;
    }
}

/* ============================================
   FAQ SECTION
   ============================================ */

.wt-faq-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    padding: 96px 0;
    width: 100%;
}

.wt-faq-section__container {
    display: flex;
    gap: 64px;
    align-items: flex-start;
    max-width: 1280px;
    padding: 0 32px;
    width: 100%;
}

/* Heading Section */
.wt-faq-section__heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    flex: 1 1 0;
    max-width: 768px;
    min-width: 480px;
}

.wt-faq-section__heading-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.wt-faq-section__title {
    color: #181D27;
    margin: 0;
    width: 100%;
}

.wt-faq-section__subtitle {
    color: #535862;
    margin: 0;
    width: 100%;
    line-height: 28px; /* Override from 1.54 to match Figma */
}

/* FAQ Content */
.wt-faq-section__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 480px;
}

/* FAQ Item */
.wt-faq-section__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    width: 100%;
    background: transparent;
    border-radius: 16px;
}

.wt-faq-section__item.is-open {
    background: #F5F7F6;
}

.wt-faq-section__button {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    min-width: 320px;
}

/* Text Wrap */
.wt-faq-section__text-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 0;
}

.wt-faq-section__question {
    color: #181D27;
    margin: 0;
    width: 100%;
}

.wt-faq-section__item.is-open .wt-faq-section__question {
    color: #FF4405;
    font-weight: 700; /* Override from 500 to 700 when open */
}

.wt-faq-section__answer {
    color: #535862;
    margin: 0;
    width: 100%;
    display: none;
}

.wt-faq-section__item.is-open .wt-faq-section__answer {
    display: block;
}

/* Icon Wrap */
.wt-faq-section__icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2px 0 0 0;
    flex-shrink: 0;
}

.wt-faq-section__icon {
    width: 24px;
    height: 24px;
    overflow: hidden;
    flex-shrink: 0;
}

.wt-faq-section__icon--minus {
    display: none;
}

.wt-faq-section__icon--plus {
    display: block;
}

.wt-faq-section__item.is-open .wt-faq-section__icon--minus {
    display: block;
}

.wt-faq-section__item.is-open .wt-faq-section__icon--plus {
    display: none;
}

/* ============================================
   TESTIMONIAL SECTION
   ============================================ */

.wt-testimonial-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    padding: 96px 0;
    width: 100%;
    overflow: hidden;
}

.wt-testimonial-section__container {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: flex-start;
    max-width: 1280px;
    padding: 0 32px;
    width: 100%;
}

/* Header */
.wt-testimonial-section__header {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    max-width: 1280px;
    padding: 0 32px;
    width: 100%;
}

.wt-testimonial-section__heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    max-width: 768px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.wt-testimonial-section__title {
    color: #181D27;
    margin: 0;
    width: 100%;
}

.wt-testimonial-section__subtitle {
    color: #535862;
    margin: 0;
    width: 100%;
}

/* Content */
.wt-testimonial-section__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
}

.wt-testimonial-section__cards {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    width: 100%;
    position: relative;
}

/* Columns */
.wt-testimonial-section__column {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 0;
}

.wt-testimonial-section__column--1 {
    padding-top: 32px;
}

.wt-testimonial-section__column--3 {
    padding-top: 40px;
}

/* Card */
.wt-testimonial-section__card {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
    padding: 32px;
    width: 100%;
    background: rgba(255, 68, 5, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}

.wt-testimonial-section__quote {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.wt-testimonial-section__quote-text {
    color: #535862;
    margin: 0;
    width: 100%;
}

/* Attribution */
.wt-testimonial-section__attribution {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.wt-testimonial-section__avatar {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    flex-shrink: 0;
    background: #E0E0E0;
}

.wt-testimonial-section__author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 0;
}

.wt-testimonial-section__name {
    color: #181D27;
    margin: 0;
    width: 100%;
}

.wt-testimonial-section__role {
    color: #535862;
    margin: 0;
    width: 100%;
}

/* ============================================
   TESTIMONIAL SECTION - RESPONSIVE (TABLET & MOBILE)
   ============================================ */

@media (max-width: 768px) {
    .wt-testimonial-section {
        gap: 48px;
        padding: 64px 0;
    }

    .wt-testimonial-section__container {
        gap: 48px;
        padding: 0 16px;
    }

    /* Header */
    .wt-testimonial-section__header {
        gap: 32px;
        padding: 0 16px;
    }

    .wt-testimonial-section__heading {
        gap: 16px;
    }


    /* Cards - Single column on mobile */
    .wt-testimonial-section__cards {
        flex-direction: column;
        gap: 20px;
    }

    .wt-testimonial-section__column {
        gap: 20px;
    }

    .wt-testimonial-section__column--1,
    .wt-testimonial-section__column--3 {
        padding-top: 0;
    }

    /* Card */
    .wt-testimonial-section__card {
        gap: 32px;
        padding: 24px;
    }
}

/* ============================================
   CTA SECTION
   ============================================ */

.wt-cta-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    padding: 96px 0;
    width: 100%;
    background: #003a21;
}

.wt-cta-section__container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    max-width: 1280px;
    padding: 0 32px;
    width: 100%;
}

.wt-cta-section__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
}

.wt-cta-section__heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    max-width: 768px;
    text-align: center;
    width: 100%;
}

.wt-cta-section__title {
    color: #FFFFFF;
    margin: 0;
    width: 100%;
}

.wt-cta-section__subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    width: 100%;
    line-height: 30px; /* Override from 1.48 to match Figma */
}

/* Actions */
.wt-cta-section__actions {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Buttons */
.wt-cta-section__button {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
                0px 0px 0px 1px inset rgba(10, 13, 18, 0.18),
                0px -2px 0px 0px inset rgba(10, 13, 18, 0.05);
}

.wt-cta-section__button--secondary {
    background: #FFFFFF;
    border: 1px solid #ff9c66;
}

.wt-cta-section__button--secondary:hover {
    background: #f5f5f5;
}

.wt-cta-section__button--primary {
    background: #FF4405;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.wt-cta-section__button--primary:hover {
    background: #e03d04;
}

.wt-cta-section__button-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.wt-cta-section__button-text {
    white-space: nowrap;
    padding: 0 2px;
}

.wt-cta-section__button--secondary .wt-cta-section__button-text {
    color: #BC1B06;
}

.wt-cta-section__button--primary .wt-cta-section__button-text {
    color: #FFFFFF;
}

/* ============================================
   CTA SECTION - RESPONSIVE (TABLET & MOBILE)
   ============================================ */

@media (max-width: 768px) {
    .wt-cta-section {
        gap: 48px;
        padding: 64px 0;
    }

    .wt-cta-section__container {
        gap: 32px;
        padding: 0 16px;
    }

    .wt-cta-section__heading {
        gap: 16px;
    }

    .wt-cta-section__subtitle {
        line-height: 28px;
    }

    .wt-cta-section__actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .wt-cta-section__button {
        width: 100%;
    }
}

/* ============================================
   CONTACT SECTION
   ============================================ */

.wt-contact-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    padding: 96px 0;
    width: 100%;
}

.wt-contact-section__container {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    padding: 0 32px;
}

.wt-contact-section__content {
    display: flex;
    flex-direction: row;
    gap: 64px;
    align-items: flex-start;
    width: 100%;
}

.wt-contact-section__info {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: flex-start;
    flex: 1;
}

.wt-contact-section__heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

.wt-contact-section__title {
    color: #181D27;
    margin: 0;
    width: 100%;
}

.wt-contact-section__subtitle {
    color: #535862;
    margin: 0;
    width: 100%;
    line-height: 30px; /* Override from 1.48 to match Figma */
}

.wt-contact-section__cards {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
    width: 100%;
}

.wt-contact-section__card {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

.wt-contact-section__card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: #FFE6D5;
    border: 8px solid #FFF4ED;
}

.wt-contact-section__icon {
    width: 24px;
    height: 24px;
}

.wt-contact-section__card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    flex: 1;
}

.wt-contact-section__card-title {
    color: #181D27;
    margin: 0;
    width: 100%;
}

.wt-contact-section__card-description {
    color: #535862;
    margin: 0;
    width: 100%;
}

.wt-contact-section__card-link {
    color: #FF4405;
    margin: 0;
    width: 100%;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.wt-contact-section__card-link:hover {
    opacity: 0.8;
}

.wt-contact-section__map {
    flex: 1;
    width: 100%;
    height: 560px;
    border-radius: 12px;
    overflow: hidden;
}

.wt-contact-section__map iframe {
    display: block;
}

/* ============================================
   CONTACT SECTION - RESPONSIVE (TABLET & MOBILE)
   ============================================ */

@media (max-width: 768px) {
    .wt-contact-section {
        gap: 48px;
        padding: 64px 0;
    }

    .wt-contact-section__container {
        gap: 32px;
        padding: 0 16px;
    }

    .wt-contact-section__content {
        flex-direction: column;
        gap: 32px;
    }

    .wt-contact-section__info {
        gap: 32px;
    }

    .wt-contact-section__heading {
        gap: 12px;
    }

    .wt-contact-section__subtitle {
        line-height: 28px; /* 18px font-size × 1.54 line-height */
    }

    .wt-contact-section__cards {
        gap: 40px;
    }

    .wt-contact-section__card {
        gap: 16px;
    }

    .wt-contact-section__card-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border: 6px solid #FFF4ED;
    }

    .wt-contact-section__card-content {
        gap: 4px;
    }

    .wt-contact-section__map {
        height: 400px;
    }
}

/* ============================================
   FAQ SECTION - RESPONSIVE (TABLET & MOBILE)
   ============================================ */

@media (max-width: 768px) {
    .wt-faq-section {
        gap: 48px;
        padding: 64px 0;
    }

    .wt-faq-section__container {
        flex-direction: column;
        gap: 32px;
        padding: 0 16px;
    }

    /* Heading Section */
    .wt-faq-section__heading {
        gap: 16px;
        max-width: 100%;
        min-width: auto;
    }

    .wt-faq-section__heading-content {
        gap: 12px;
    }

    .wt-faq-section__subtitle {
        line-height: 1.54; /* Restore to default on mobile */
    }

    /* FAQ Content */
    .wt-faq-section__content {
        gap: 16px;
        min-width: auto;
    }

    /* FAQ Item */
    .wt-faq-section__item {
        padding: 20px;
    }

    .wt-faq-section__button {
        gap: 8px;
        min-width: auto;
    }

    /* Text Wrap */
    .wt-faq-section__text-wrap {
        gap: 8px;
    }

    .wt-faq-section__question {
        font-size: 18px;
        line-height: 1.54;
    }

    .wt-faq-section__answer {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* ============================================
   THANK YOU SECTION
   ============================================ */

.wt-thankyou-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 80px 112px;
    background-color: #FFFFFF;
}

.wt-thankyou-section__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 768px;
    width: 100%;
    text-align: center;
}

.wt-thankyou-section__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wt-thankyou-section__icon img {
    width: 100px;
    height: 100px;
    color: #10B981;
}

.wt-thankyou-section__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.wt-thankyou-section__heading {
    color: #181D27;
    text-align: center;
}

.wt-thankyou-section__subtitle {
    color: #181D27;
    text-align: center;
    max-width: 600px;
}

.wt-thankyou-section__description {
    color: #6B7280;
    text-align: center;
    max-width: 600px;
}

.wt-thankyou-section__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Tablet Breakpoint (768px) */
@media (max-width: 768px) {
    .wt-thankyou-section {
        padding: 64px 24px;
    }

    .wt-thankyou-section__container {
        gap: 32px;
    }

    .wt-thankyou-section__icon img {
        width: 80px;
        height: 80px;
    }
}

/* Mobile Breakpoint (425px) */
@media (max-width: 425px) {
    .wt-thankyou-section {
        padding: 48px 16px;
        min-height: calc(100vh - 150px);
    }

    .wt-thankyou-section__container {
        gap: 24px;
    }

    .wt-thankyou-section__icon img {
        width: 64px;
        height: 64px;
    }

    .wt-thankyou-section__content {
        gap: 12px;
    }

    .wt-thankyou-section__actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .wt-thankyou-section__button {
        width: 100%;
    }
}

/* ============================================
   404 ERROR SECTION
   ============================================ */

.wt-404-section {
    display: flex;
    flex-direction: column;
    gap: 96px;
    align-items: center;
    padding: 96px 0;
    background-color: #FFFFFF;
    min-height: calc(100vh - 200px);
}

.wt-404-section__container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    max-width: 1280px;
    width: 100%;
    padding: 0 32px;
    height: 768px;
}

.wt-404-section__content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-grow: 1;
    position: relative;
}

/* 404 Background Text */
.wt-404-section__background {
    position: absolute;
    left: 50%;
    top: 144px;
    transform: translateX(-50%);
    width: 880px;
    height: 356.4px;
    pointer-events: none;
    z-index: 0;
}

.wt-404-section__background-text {
    font-family: 'Satoshi', sans-serif;
    font-size: 400px;
    font-weight: 900;
    line-height: 1;
    color: #EEEEEE;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
}

/* Text Content */
.wt-404-section__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    max-width: 768px;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
}

.wt-404-section__heading {
    font-family: 'Satoshi', sans-serif;
    font-size: 60px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -1.2px;
    color: #181D27;
    text-align: center;
    width: 100%;
}

.wt-404-section__description {
    font-family: 'Satoshi', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.48;
    color: #535862;
    text-align: center;
    width: 100%;
}

/* Actions */
.wt-404-section__actions {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

/* Tablet Breakpoint (768px) */
@media (max-width: 768px) {
    .wt-404-section {
        padding: 64px 0;
        gap: 64px;
    }

    .wt-404-section__container {
        padding: 0 24px;
        height: auto;
        min-height: 600px;
    }

    .wt-404-section__background {
        width: 600px;
        height: 243px;
        top: 120px;
    }

    .wt-404-section__background-text {
        font-size: 280px;
    }

    .wt-404-section__heading {
        font-size: 48px;
        letter-spacing: -0.96px;
    }

    .wt-404-section__description {
        font-size: 18px;
    }
}

/* Mobile Breakpoint (425px) */
@media (max-width: 425px) {
    .wt-404-section {
        padding: 64px 0;
        gap: 64px;
    }

    .wt-404-section__container {
        padding: 0 16px;
        min-height: auto;
        height: auto;
        gap: 32px;
    }

    .wt-404-section__content {
        gap: 32px;
    }

    /* Hide 404 background text on mobile */
    .wt-404-section__background {
        display: none;
    }

    .wt-404-section__text {
        gap: 16px;
        max-width: 343px;
    }

    .wt-404-section__heading {
        font-size: 36px;
        letter-spacing: -0.72px;
    }

    .wt-404-section__description {
        font-size: 18px;
        line-height: 1.54;
    }

    .wt-404-section__actions {
        width: 100%;
    }

    .wt-404-section__actions .wt-button {
        width: 100%;
    }
}

/* ============================================
   PRIVACY POLICY PAGE
   ============================================ */

.wt-privacy-section {
    padding: 64px 0 96px;
    background: #FFFFFF;
}

.wt-privacy-section__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 80px;
}

.wt-privacy-section__content {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #030712;
}

.wt-privacy-section__content h1 {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.24;
    letter-spacing: -0.96px;
    color: #030712;
    margin-bottom: 24px;
}

.wt-privacy-section__content h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.72px;
    color: #030712;
    margin-top: 48px;
    margin-bottom: 20px;
}

.wt-privacy-section__content h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.32;
    color: #030712;
    margin-top: 32px;
    margin-bottom: 16px;
}

.wt-privacy-section__content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #374151;
    margin-bottom: 16px;
}

.wt-privacy-section__content p strong {
    font-weight: 700;
    color: #030712;
}

.wt-privacy-section__content ul,
.wt-privacy-section__content ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.wt-privacy-section__content ul li,
.wt-privacy-section__content ol li {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #374151;
    margin-bottom: 8px;
}

.wt-privacy-section__content a {
    color: #4F46E5;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.wt-privacy-section__content a:hover {
    color: #4338CA;
}

.wt-privacy-section__content hr {
    border: none;
    border-top: 1px solid #E5E7EB;
    margin: 32px 0;
}

/* Tablet Breakpoint (768px) */
@media (max-width: 768px) {
    .wt-privacy-section {
        padding: 48px 0 64px;
    }

    .wt-privacy-section__container {
        padding: 0 40px;
    }

    .wt-privacy-section__content h1 {
        font-size: 36px;
        letter-spacing: -0.72px;
    }

    .wt-privacy-section__content h2 {
        font-size: 30px;
        margin-top: 40px;
    }

    .wt-privacy-section__content h3 {
        font-size: 20px;
        margin-top: 24px;
    }
}

/* Mobile Breakpoint (425px) */
@media (max-width: 425px) {
    .wt-privacy-section {
        padding: 32px 0 48px;
    }

    .wt-privacy-section__container {
        padding: 0 16px;
    }

    .wt-privacy-section__content h1 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .wt-privacy-section__content h2 {
        font-size: 24px;
        margin-top: 32px;
        margin-bottom: 16px;
    }

    .wt-privacy-section__content h3 {
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    .wt-privacy-section__content p,
    .wt-privacy-section__content ul li,
    .wt-privacy-section__content ol li {
        font-size: 14px;
    }
}

/* ============================================
   FOOTER COMPONENT
   ============================================ */

.wt-footer {
    background-color: #1a150a;
    padding: 48px 0;
}

.wt-footer__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.wt-footer__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.wt-footer__logo-wrap {
    width: 160px;
    flex-shrink: 0;
}

.wt-footer__logo {
    height: 32px;
    width: auto;
    display: block;
}

.wt-footer__nav {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-shrink: 0;
}

.wt-footer__link {
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.wt-footer__link:hover {
    opacity: 0.8;
}

.wt-footer__copyright {
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
    width: 180px;
    flex-shrink: 0;
    margin: 0;
}

/* Tablet/Mobile Breakpoint (768px and below) */
@media (max-width: 768px) {
    .wt-footer__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .wt-footer__nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 32px;
        width: 100%;
    }

    .wt-footer__link {
        text-align: left;
        justify-self: start;
    }

    .wt-footer__copyright {
        width: 100%;
        text-align: left;
        padding-top: 16px;
    }
}

/* Mobile Breakpoint (425px) */
@media (max-width: 425px) {
    .wt-footer {
        padding: 48px 0;
    }

    .wt-footer__container {
        padding: 0 16px;
    }

    .wt-footer__logo {
        height: 32px;
    }
}