@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ============================================================
   FONTS — Helvetica Neue LT Pro
   ============================================================ */
@font-face {
    font-family: "Helvetica Neue Heavy";
    src: url('../fonts/helvetica-neue-lt-pro/HelveticaNeueLTW0585Heavy.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Helvetica Neue Light";
    src: url('../fonts/helvetica-neue-lt-pro/HelveticaNeueLTW0545Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Helvetica Neue Roman";
    src: url('../fonts/helvetica-neue-lt-pro/HelveticaNeueLTW0555Roman.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --abs-blackish: #201E1F;
    --abs-aqua: #5B95A9;
    --abs-white: #FFFFFF;
    --abs-lightest-gray: #FAFAFA;
    --abs-light-gray-e6: #E6E6E6;
    --abs-light-gray-d9: #D9D9D9;
    --abs-text-dark: #222222;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #fff;
    font-family: "Helvetica Neue Roman", "DM Sans", Arial, sans-serif;
    color: var(--abs-blackish);
    overflow-x: hidden;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* ============================================================
   HEADER — All Boats Service Center
   Figma: 1920 × 80, blackish bg, hanging oval logo
   ============================================================ */
.absHeader {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: var(--abs-blackish);
    z-index: 200;
}

.absHeaderInner {
    position: relative;
    height: 80px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.absHeaderNav {
    display: flex;
    align-items: center;
    gap: 48px;
}
.field-error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
    text-align: left;
}
.error_field {
    border: 1px solid red !important;
}
.iti{
    /* border: none; */
    width: 100%;
}
/* make room for the country flag so it doesn't overlap the placeholder */
input.phoneInput,
.absRsvpField.phoneInput {
    padding-left: 52px !important;
}
.absHeaderNav a {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0;
    transition: opacity 0.2s ease;
}

.absHeaderNav a:hover {
    opacity: 0.7;
    color: #fff;
}

/* Hanging oval logo (center, overlaps below the bar) */
.absHeaderLogo {
    position: absolute;
    left: 50%;
    top: calc(50% + 28px);
    transform: translate(-50%, -50%);
    width: 190px;
    height: 120px;
    z-index: 3;
}

.absHeaderLogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.absHeaderRight {
    display: flex;
    align-items: center;
    gap: 32px;
}

.absHeaderContact {
    text-align: right;
    line-height: 1;
}

.absHeaderContact .absCallLabel {
    display: block;
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-aqua);
    letter-spacing: 0;
}

.absHeaderContact .absCallNumber {
    display: block;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.48px;
    margin-top: 2px;
    transition: opacity 0.2s ease;
}

.absHeaderContact .absCallNumber:hover {
    color: #fff;
    opacity: 0.85;
}

.absHeaderSearch {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: opacity 0.2s ease;
}

.absHeaderSearch:hover {
    opacity: 0.7;
}

/* Mobile hamburger */
.absHamburger {
    background: none;
    border: none;
    width: 28px;
    height: 20px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
}

.absHamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.25s ease;
}

/* ============================================================
   FOOTER — All Boats Service Center
   Figma: 1920 × 520, left 2/3 light, right 1/3 blackish
   ============================================================ */
.absFooter {
    position: relative;
    width: 100%;
    background-color: var(--abs-lightest-gray);
    overflow: hidden;
}

.absFooterMain {
    display: grid;
    grid-template-columns: 2fr 1fr;
    min-height: 456px;
}
.left-sm-footer{
    margin-left: 160px;
    margin-right: 160px;
    border-top: 1px solid var(--abs-light-gray-e6);
}
.left-sm-footer ul{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 17px 0;
}
.left-sm-footer ul .footer-bottom-item{
    position: relative;
    padding-right: 30px;
}
.footer-bottom-item + .footer-bottom-item::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 15px;
    background-color: var(--abs-light-gray-e6);
}
.right-sm-footer{
    background-color: var(--abs-blackish);
}
.bottom-footer{
    display: grid;
    grid-template-columns: 2fr 1fr;
}
/* --- LEFT 2/3 (light bg) --- */
.absFooterLeft {
    background-color: var(--abs-lightest-gray);
    padding: 64px 160px 0 160px;
    display: flex;
    gap: 24px;
    align-items: start;
}
.absFooterColWrapper{
    display: flex;
    width: 55%;
}
.absFooterBrand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    padding-top: 0;
    width: 45%;
}

.absFooterLogo {
    width: 190px;
    height: 120px;
}

.absFooterLogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.absFooterAddress {
    margin-top: 24px;
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    text-decoration: underline;
    text-align: center;
}

.absFooterAddress:hover {
    color: var(--abs-blackish);
}

.absFooterPhone {
    display: inline-block;
    margin-top: 18px;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    color: var(--abs-aqua);
    letter-spacing: -0.64px;
    text-align: center;
}

.absFooterPhone:hover {
    color: var(--abs-aqua);
    opacity: 0.85;
}

.absFooterCol {
    padding-top: 8px;
    width: 50%;
}

.absFooterColHead {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--abs-blackish);
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 24px;
}

.absFooterLinks li {
    margin-bottom: 16px;
}

.absFooterLinks li:last-child {
    margin-bottom: 0;
}

.absFooterLinks a {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    transition: color 0.2s ease;
}

.absFooterLinks a:hover {
    color: var(--abs-aqua);
}

/* --- RIGHT 1/3 (dark bg) --- */
.absFooterRight {
    background-color: var(--abs-blackish);
    padding: 90px 60px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.absFooterHeading {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 48px;
    line-height: 52px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.96px;
    margin-bottom: 16px;
}

.absFooterSub {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    max-width: 360px;
    margin: 0 auto 28px;
}

.absFooterForm {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 28px;
}

.absFooterInput {
    width: 100%;
    height: 48px;
    background-color: #fff;
    border: 1px solid var(--abs-light-gray-e6);
    padding: 0 56px 0 20px;
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    outline: none;
}

.absFooterInput::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.absFooterInput:focus {
    border-color: var(--abs-aqua);
}

.absFooterSubmit {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: var(--abs-blackish);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.absFooterSubmit:hover {
    color: var(--abs-aqua);
}

.absFooterSocial {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.absFooterSocial a {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background-color: var(--abs-aqua);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: opacity 0.2s ease;
}

.absFooterSocial a:hover {
    opacity: 0.8;
    color: #fff;
}

/* --- Bottom bar --- */
.absFooterBottom {
    border-top: 1px solid var(--abs-light-gray-e6);
    padding: 24px 80px;
    background-color: var(--abs-lightest-gray);
    width: 66.6667%;
}

.absFooterPolicy {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    opacity: 0.6;
    text-align: right;
    margin: 0;
}

/* ============================================================
   HEADER / FOOTER — RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
    .absHeaderInner {
        padding: 0 40px;
    }

    .absHeaderNav {
        gap: 28px;
    }

    .absFooterLeft {
        padding: 56px 40px;
    }

    .absFooterRight {
        padding: 80px 40px;
    }

    .absFooterBottom {
        padding: 24px 40px;
    }
}

@media (max-width: 991px) {
    .mobileHeader {
        display: block;
    }

    .absHeader {
        display: none;
        height: 64px;
    }

    .absHeaderInner {
        height: 64px;
        padding: 0 20px;
    }

    .absHeaderNav,
    .absHeaderContact .absCallLabel {
        display: none;
    }

    .absHamburger {
        display: flex;
    }

    .absHeaderLogo {
        width: 130px;
        height: 80px;
        top: calc(50% + 18px);
    }

    .absHeaderContact .absCallNumber {
        font-size: 18px;
        line-height: 24px;
    }

    .absHeaderRight {
        gap: 18px;
    }

    /* Footer stacks */
    .absFooterMain {
        grid-template-columns: 1fr;
    }

    .absFooterLeft {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
        padding: 48px 24px;
    }

    .absFooterBrand,
    .absFooterCol {
        text-align: center;
    }

    .absFooterRight {
        padding: 56px 24px;
    }

    .absFooterHeading {
        font-size: 36px;
        line-height: 40px;
    }

    .absFooterBottom {
        width: 100%;
        padding: 20px 24px;
    }

    .absFooterPolicy {
        text-align: center;
    }
}

@media (max-width: 575px) {
    .absHeaderInner {
        padding: 0 16px;
    }

    .absHeaderLogo {
        width: 110px;
        height: 70px;
    }

    .absHeaderContact .absCallNumber {
        font-size: 16px;
    }

    .absFooterHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .absFooterPhone {
        font-size: 28px;
        line-height: 32px;
    }
}

/* ============================================================
   HOME PAGE — All Boats Service Center
   Figma: node 4002:961
   ============================================================ */

/* Shared shell + utilities (page-scoped via abs* prefix) */
.absContainer {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 60px;
}

.absSection {
    background-color: #fff;
}

/* Pill buttons */
.absBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    border-radius: 24px;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.absBtnAqua {
    background-color: var(--abs-aqua);
    color: #fff;
    border-color: var(--abs-aqua);
}

.absBtnAqua:hover {
    background-color: #4a7e90;
    border-color: #4a7e90;
    color: #fff;
}

.absBtnOutlineWhite {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
}

.absBtnOutlineWhite:hover {
    background-color: #fff;
    color: var(--abs-blackish);
}

.absBtnDarkOutline {
    background-color: transparent;
    color: var(--abs-blackish);
    border-color: var(--abs-blackish);
}

.absBtnDarkOutline:hover {
    background-color: var(--abs-blackish);
    color: #fff;
}

/* Eyebrow-style "view all" link with arrow */
.absViewAll {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: var(--abs-aqua);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: opacity 0.2s ease;
}

.absViewAll:hover {
    color: var(--abs-aqua);
    opacity: 0.8;
}

/* ============================================================
   HERO
   ============================================================ */
.absHero {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
}

.absHero img.absHeroImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.absHeroOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(32, 30, 31, 0.55) 0%, rgba(32, 30, 31, 0.35) 100%);
}

.absHeroContent {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 24px;
}

.absHeroContent h1 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 80px;
    line-height: 80px;
    font-weight: 700;
    letter-spacing: -1.6px;
    color: #fff;
}

.absHeroContent .absBtn {
    margin-top: 40px;
}

/* ============================================================
   SHOWCASE — New / Pre-Owned (two large cards with overlay text)
   Figma: cards 720x680 each, 240px side margins, overlap hero by -80px
   ============================================================ */
.absShowcase {
    padding: 0;
    position: relative;
}
.brand-slider .item {
    position: relative;
    padding-top: 45%;
}
.brand-slider .item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.brand-slider .item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.slider-btn {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}
.slider-content h3 {
    color: var(--white, #FFF);
    text-align: center;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: 80px; 
    letter-spacing: -1.6px;
}
.slider-content p {
    color: var(--white, #FFF);
    text-align: center;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}
.brand-slider .owl-prev {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 3;
}
.brand-slider .owl-nav{
    display: block !important;
}
.brand-slider .owl-next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 3;
}
.absShowcaseGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1440px;
    margin: 80px auto 0;
    position: relative;
    z-index: 5;
}

.absShowcaseCard {
    position: relative;
    width: 100%;
    height: 680px;
    overflow: hidden;
}

.absShowcaseImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.absShowcaseGradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background: linear-gradient(180deg, rgba(32, 30, 31, 0) 0%, rgba(32, 30, 31, 0.75) 100%);
}

.absShowcaseContent {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 64px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

.absShowcaseContent h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #fff;
    margin: 0 0 28px;
}

/* ============================================================
   SELL BANNER — full-width strip (contained 1440px inner)
   ============================================================ */
.absSellBanner {
    padding: 24px 0 80px;
    background-color: #fff;
}

.absSellBannerWrap {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    height: 200px;
    overflow: hidden;
    background-color: #4a7e90;
}

.absSellBannerImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.absSellBannerOverlay {
    position: absolute;
    inset: 0;
    background-color: rgba(74, 126, 144, 0.85);
}

.absSellBannerInner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 0 80px;
}

.absSellBannerInner h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 48px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.96px;
    color: #fff;
    margin: 0;
}

/* ============================================================
   NEW ARRIVALS
   ============================================================ */
.absArrivals {
    padding: 90px 0 100px;
    background-color: #fff;
}

.absArrivalsHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 20px;
}

.absArrivalsHead h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--abs-blackish);
    margin: 0;
}

.absArrivalsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.absArrivalCard {
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.arrivalImageWrapepr {
    position: relative;
    padding-top: 64%;
    display: block;
}
.arrivalImageWrapepr img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.absArrivalImg {
    width: 100%;
    height: 292px;
    object-fit: cover;
}

.absArrivalInfo {
    border: 1px solid var(--abs-light-gray-d9);
    border-top: none;
    padding: 20px;
}

.absArrivalInfo h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    letter-spacing: -0.36px;
    color: var(--abs-blackish);
    margin: 0 0 10px;
}

.absArrivalPrice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.absArrivalPrice .absPrice {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    line-height: 25px;
    font-weight: 700;
    color: var(--abs-aqua);
}

.absArrivalPrice .absDivider {
    width: 1px;
    height: 15px;
    background-color: #808080;
}

.absArrivalPrice .absMonthly {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 25px;
    color: rgba(0, 0, 0, 0.6);
}

.absArrivalSpecs {
    border-top: 1px solid var(--abs-light-gray-d9);
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 0;
}

.absArrivalSpecs .absSpec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-family: "Helvetica Neue Light", sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--abs-blackish);
    position: relative;
}

.absArrivalSpecs .absSpec:first-child {
    padding-left: 0;
}

.absArrivalSpecs .absSpec + .absSpec::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background-color: #808080;
}

.absArrivalSpecs i {
    font-size: 14px;
    color: var(--abs-blackish);
    opacity: 0.7;
}

/* ============================================================
   SERVICES — 2 full-bleed tiles with overlay text
   ============================================================ */
.absServices {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.absServiceTile {
    position: relative;
    width: 100%;
    height: 720px;
    overflow: hidden;
}

.absServiceTile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.absServiceTileGradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(32, 30, 31, 0) 0%, rgba(32, 30, 31, 0.92) 75%);
}

.absServiceTileContent {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 2;
    padding: 0 36px;
    text-align: center;
    color: #fff;
}

.absServiceTileContent h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: #fff;
    margin: 0 0 12px;
}

.absServiceTileContent p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    margin: 0 auto;
    max-width: 320px;
    opacity: 0.95;
}

/* ============================================================
   FEATURES — Financing / News / Events row
   ============================================================ */
.absFeatures {
    padding: 60px 0;
    background-color: #fff;
}

.absFeaturesRow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

.absFeatureItem {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 40px;
    position: relative;
}

.absFeatureItem + .absFeatureItem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 96px;
    background-color: var(--abs-light-gray-d9);
}

.absFeatureIcon {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-color: var(--abs-blackish);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.absFeatureText h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: var(--abs-blackish);
    margin: 0 0 4px;
}

.absFeatureText p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0;
}

/* ============================================================
   PROMOTION — full-width banner with carousel controls
   ============================================================ */
.absPromo {
    position: relative;
    width: 100%;
    height: 720px;
    overflow: hidden;
}

.absPromoImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.absPromoOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(32, 30, 31, 0.45) 0%, rgba(32, 30, 31, 0.6) 100%);
}

.absPromoContent {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
}

.absPromoContent h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 80px;
    line-height: 80px;
    font-weight: 700;
    letter-spacing: -1.6px;
    color: #fff;
    margin: 0 0 28px;
}

.absPromoContent .absPromoSub {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    margin: 0 0 32px;
}

.absPromoArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 3;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.absPromoArrow:hover {
    opacity: 1;
}

.absPromoPrev {
    left: 40px;
}

.absPromoNext {
    right: 40px;
}

.absPromoDots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
    display: flex;
    gap: 10px;
    z-index: 3;
}

.absPromoDots span {
    width: 24px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.2s ease;
}

.absPromoDots span.active {
    background-color: #fff;
}

/* ============================================================
   ABOUT — Expert Care (image left + text right)
   ============================================================ */
.absAbout {
    padding: 100px 0;
    background-color: #fff;
}

.absAboutGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.absAboutImg {
    width: 100%;
    height: 680px;
    object-fit: cover;
}

.absAboutText {
    max-width: 560px;
}

.absAboutText h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 48px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.96px;
    color: var(--abs-blackish);
    margin: 0 0 24px;
}

.absAboutText .absAboutLead {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--abs-blackish);
    margin: 0 0 20px;
}

.absAboutText p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0 0 16px;
}

.absAboutText .absBtn {
    margin-top: 16px;
}

/* ============================================================
   HOME PAGE — RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
    .absContainer {
        padding: 0 40px;
    }

    .absHeroContent h1 {
        font-size: 64px;
        line-height: 68px;
    }

    .absPromoContent h2 {
        font-size: 56px;
        line-height: 60px;
    }

    .absShowcaseCard {
        height: 540px;
    }

    .absServiceTile {
        height: 600px;
    }

    .absAboutImg {
        height: 560px;
    }
}

@media (max-width: 991px) {
    .absContainer {
        padding: 0 24px;
    }

    .absHero {
        height: 600px;
    }

    .absHeroContent h1 {
        font-size: 48px;
        line-height: 52px;
        letter-spacing: -0.96px;
    }

    .absShowcaseGrid {
        grid-template-columns: 1fr;
        margin: 0 auto;
        max-width: 100%;
    }

    .absShowcaseCard {
        height: 460px;
    }

    .absShowcaseContent {
        bottom: 40px;
    }

    .absShowcaseContent h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .absSellBanner {
        padding: 16px 0 56px;
    }

    .absSellBannerWrap {
        height: auto;
    }

    .absSellBannerInner {
        flex-direction: column;
        gap: 20px;
        padding: 40px 24px;
    }

    .absSellBannerInner h2 {
        font-size: 32px;
        line-height: 36px;
        text-align: center;
    }

    .absArrivals {
        padding: 60px 0;
    }

    .absArrivalsHead h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .absArrivalsGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .absServices {
        grid-template-columns: repeat(2, 1fr);
    }

    .absServiceTile {
        height: 480px;
    }

    .absServiceTileContent h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .absFeatures {
        padding: 48px 0;
    }

    .absFeaturesRow {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 320px;
    }

    .absFeatureItem {
        padding: 0;
        justify-content: flex-start;
        gap: 20px;
    }

    .absFeatureItem + .absFeatureItem::before {
        display: none;
    }

    .absFeatureText h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .absPromo {
        height: 520px;
    }

    .absPromoContent h2 {
        font-size: 40px;
        line-height: 44px;
    }

    .absAbout {
        padding: 64px 0;
    }

    .absAboutGrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .absAboutImg {
        height: 420px;
    }

    .absAboutText h2 {
        font-size: 32px;
        line-height: 36px;
    }
}

@media (max-width: 575px) {
    .absHero {
        height: 480px;
    }

    .absHeroContent h1 {
        font-size: 36px;
        line-height: 40px;
    }

    .absShowcaseCard {
        height: 380px;
    }

    .absShowcaseContent h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .absArrivalsGrid {
        grid-template-columns: 1fr;
    }

    .absArrivalsHead {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .absServices {
        grid-template-columns: 1fr;
    }

    .absServiceTile {
        height: 340px;
    }

    .absServiceTileContent {
        bottom: 36px;
        padding: 0 24px;
    }

    .absServiceTileContent h3 {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .absServiceTileContent p {
        font-size: 15px;
        line-height: 22px;
    }

    .absPromo {
        height: 420px;
    }

    .absPromoContent h2 {
        font-size: 30px;
        line-height: 34px;
    }

    .absPromoArrow {
        display: none;
    }

    .absAboutImg {
        height: 320px;
    }

    .absAboutText h2 {
        font-size: 26px;
        line-height: 30px;
    }
}

/* ============================================================
   SHARED — Banner Hero (used by Blog, Events, Event Detail)
   ============================================================ */
.absBanner {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
}

.absBanner .absBannerImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.absBanner .absBannerOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(32, 30, 31, 0.55) 0%, rgba(32, 30, 31, 0.45) 100%);
}

.absBannerContent {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
}

.absBannerContent h1 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 64px;
    line-height: 68px;
    font-weight: 700;
    letter-spacing: -1.28px;
    color: #fff;
    margin: 0;
}

/* ============================================================
   SHARED — Breadcrumb
   ============================================================ */
.absCrumb {
    padding: 18px 0;
    background-color: #fff;
}

.absCrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.absCrumb li {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: rgba(32, 30, 31, 0.6);
}

.absCrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: rgba(32, 30, 31, 0.4);
}

.absCrumb a {
    color: rgba(32, 30, 31, 0.6);
    transition: color 0.2s ease;
}

.absCrumb a:hover {
    color: var(--abs-aqua);
}

.absCrumb li.is-active {
    color: var(--abs-blackish);
}

/* ============================================================
   BLOG LISTING PAGE
   ============================================================ */
.absBlogTabs {
    padding: 32px 0 16px;
    background-color: #fff;
}

.absBlogTabsRow {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 40px;
}

.absBlogTab {
    background: none;
    border: none;
    padding: 8px 0 12px;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--abs-blackish);
    position: relative;
    cursor: pointer;
    transition: color 0.2s ease;
}

.absBlogTab:hover {
    color: var(--abs-aqua);
}

.absBlogTab.is-active {
    color: var(--abs-aqua);
}

.absBlogTab.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 24px;
    height: 2px;
    background-color: var(--abs-aqua);
}

.absBlogList {
    padding: 40px 0 100px;
    background-color: #fff;
}

.absBlogGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    row-gap: 60px;
}

.absBlogCardImg {
    width: 100%;
    height: 360px;
    object-fit: cover;
    background-color: var(--abs-light-gray-d9);
}

.absBlogCardCat {
    margin-top: 22px;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--abs-aqua);
}

.absBlogCard h3 {
    margin: 8px 0 12px;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.48px;
    color: var(--abs-blackish);
}

.absBlogCard p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    opacity: 0.85;
}

/* ============================================================
   BLOG DETAIL PAGE
   ============================================================ */
.absBlogDetail {
    padding: 24px 0 90px;
    background-color: #fff;
}

.absBlogDetailGrid {
    display: grid;
    grid-template-columns: 1.85fr 1fr;
    gap: 80px;
    align-items: start;
}

.absArticleImg {
    width: 100%;
    height: 480px;
    object-fit: cover;
    background-color: var(--abs-light-gray-d9);
    margin-bottom: 32px;
}

.absArticleTitle {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--abs-blackish);
    margin: 0 0 14px;
}

.absArticleMeta {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--abs-aqua);
    margin: 0 0 28px;
}
.absArticleBody h1, h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 30px;
    line-height: 34px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--abs-blackish);
    margin-bottom: 15px;
}

.absArticleBody h3, h4, h5, h6 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--abs-blackish);
    margin-bottom: 15px;
}
.absArticleBody p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0 0 22px;
}

.absSidebarTitle {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.48px;
    color: var(--abs-blackish);
    margin: 0 0 24px;
}

.absSimilarList {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.absSimilarCard img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-color: var(--abs-light-gray-d9);
}

.absSimilarCard p {
    margin: 12px 0 0;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: -0.36px;
    color: var(--abs-blackish);
}

/* ============================================================
   EVENTS LISTING PAGE
   ============================================================ */
.absEventsList {
    padding: 60px 0 90px;
    background-color: #fff;
}

.absEventsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 56px;
}

.absEventCard img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    background-color: var(--abs-light-gray-d9);
}

.absEventCard h3 {
    margin: 18px 0 6px;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--abs-blackish);
}

.absEventCard .absEventDate {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--abs-aqua);
}

/* ============================================================
   EVENT DETAIL PAGE
   ============================================================ */
.absEventTop {
    padding: 18px 0 56px;
    background-color: #fff;
}

.absEventTopRow {
    position: relative;
}

.absEventTopImg {
    width: 100%;
    height: 400px;
    object-fit: cover;
    background-color: var(--abs-light-gray-d9);
}

.absEventInfoCard {
    position: absolute;
    right: 24px;
    bottom: -40px;
    width: 360px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    background-color: var(--abs-blackish);
    color: #fff;
    padding: 28px 32px;
    gap: 24px;
}

.absEventInfoLabel {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 8px;
}

.absEventInfoCard h4 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.44px;
    color: #fff;
    margin: 0 0 4px;
}

.absEventInfoCard p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    margin: 0;
}

.absEventBody {
    padding: 70px 0 24px;
    background-color: #fff;
    max-width: 760px;
}

.absEventBody h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: var(--abs-blackish);
    margin: 0 0 16px;
}

.absEventBody p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0 0 28px;
}

.absEventActions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 70px;
}

.absEventGallery {
    padding: 0 0 80px;
    background-color: #fff;
}

.absEventGallery h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.48px;
    color: var(--abs-blackish);
    margin: 0 0 24px;
}

.absEventGalleryRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.absEventGalleryRow img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    background-color: var(--abs-light-gray-d9);
}

.absEventInventory {
    padding: 60px 0 80px;
    background-color: #fff;
}

.absEventInventory h2 {
    text-align: center;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: var(--abs-blackish);
    margin: 0 0 40px;
}

.absEventInventoryGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* RSVP form */
.absRsvpForm {
    padding: 24px 0 100px;
    background-color: #fff;
}

.absRsvpInner {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.absRsvpInner h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: var(--abs-blackish);
    margin: 0 0 28px;
}

.absRsvpField {
    display: block;
    width: 100%;
    height: 48px;
    background-color: #fff;
    border: 1px solid var(--abs-light-gray-e6);
    border-radius: 4px;
    padding: 0 16px;
    margin-bottom: 14px;
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    outline: none;
    transition: border-color 0.2s ease;
}

.absRsvpField:focus {
    border-color: var(--abs-aqua);
}

textarea.absRsvpField {
    height: 110px;
    padding: 14px 16px;
    resize: vertical;
}

.absRsvpForm .absBtn {
    margin-top: 14px;
    min-width: 180px;
}

/* ============================================================
   SERVICE / SERVICE DETAIL PAGES — pixel-matched to Figma
   ============================================================ */

/* Hero banner taller variant for Service pages (600px in Figma) */
.absBanner.is-tall {
    height: 600px;
}

.absBanner.is-tall .absBannerContent h1 {
    font-size: 80px;
    line-height: 88px;
    letter-spacing: -1.6px;
    margin: 0 0 32px;
}

/* Centered section header (title + optional subtitle) */
.absSectionHead {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 56px;
}

.absSectionHead h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--abs-blackish);
    margin: 0 0 18px;
}

.absSectionHead p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    opacity: 0.85;
    margin: 0;
}

/* "Best Care" intro — full-bleed light bg, text left + image right */
.absSvcIntro {
    background-color: var(--abs-lightest-gray);
    padding: 80px 0;
}

.absSvcIntroGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
}

.absSvcIntroText h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--abs-blackish);
    margin: 0 0 24px;
    max-width: 520px;
}

.absSvcIntroText p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0 0 32px;
    max-width: 540px;
}

.absSvcIntroImg {
    width: 100%;
    height: 480px;
    object-fit: cover;
    background-color: var(--abs-light-gray-d9);
}

/* Core services — alternating image/text rows */
.absSvcCore {
    padding: 90px 0 100px;
    background-color: #fff;
}

.absSvcRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 60px;
}

.absSvcRow:last-child {
    margin-bottom: 0;
}

.absSvcRow.is-reverse .absSvcRowImg {
    order: 2;
}

.absSvcRowImg {
    width: 100%;
    height: 480px;
    object-fit: cover;
    background-color: var(--abs-light-gray-d9);
}

.absSvcRowText h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--abs-blackish);
    margin: 0 0 20px;
}

.absSvcRowText p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0 0 18px;
}

/* Bullet list with aqua dot */
.absBulletList {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

.absBulletList li {
    position: relative;
    padding-left: 22px;
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: var(--abs-blackish);
    margin-bottom: 6px;
}

.absBulletList li strong {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-weight: 700;
}

.absBulletList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--abs-aqua);
}

.absSvcRowActions {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
}

.absLearnMore {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--abs-aqua);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.absLearnMore:hover {
    color: var(--abs-aqua);
    opacity: 0.8;
}

/* Why Choose + Parts Advantage — two 800px panels side by side */
.absWhyParts {
    background-color: var(--abs-blackish);
    padding: 0;
}

.absWhyPartsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 1600px;
    margin: 0 auto;
}

.absWhyPartsCell {
    padding: 90px 80px;
    color: #fff;
    position: relative;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.absWhyPartsCell.is-left {
    background-color: var(--abs-blackish);
}

.absWhyPartsCell.is-right {
    background-color: var(--abs-aqua);
    position: relative;
    overflow: hidden;
}

.absWhyPartsCell h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #fff;
    margin: 0 0 32px;
    max-width: 520px;
}

.absWhyPartsCell.is-right h3 {
    font-size: 64px;
    line-height: 72px;
    letter-spacing: -1.28px;
    margin-bottom: 24px;
}

.absWhyList {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
}

.absWhyList li {
    position: relative;
    padding-left: 36px;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
}

.absWhyList li span {
    display: block;
    font-family: "Helvetica Neue Roman", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}

.absWhyList li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--abs-aqua);
    font-size: 18px;
}

.absWhyPartsCell.is-right p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 36px;
    max-width: 520px;
}

/* Service Detail intro paragraph */
.absSvcDetailIntro {
    padding: 70px 0 40px;
    background-color: #fff;
}

.absSvcDetailIntro p {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
}

/* Request Service form (override) — rounded pill fields, narrow column */
.absRsvpForm.is-svc {
    padding: 70px 0 80px;
    background-color: #fff;
    border-top: 1px solid var(--abs-light-gray-e6);
}

.absRsvpForm.is-svc .absRsvpInner {
    max-width: 520px;
}

.absRsvpForm.is-svc .absRsvpInner h2 {
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -0.8px;
    margin-bottom: 32px;
}

.absRsvpForm.is-svc .absRsvpField {
    border-radius: 24px;
    border-color: var(--abs-light-gray-d9);
    padding: 0 22px;
    height: 48px;
    font-size: 16px;
    margin-bottom: 16px;
}

.absRsvpForm.is-svc textarea.absRsvpField {
    height: 96px;
    padding: 14px 22px;
    border-radius: 18px;
}

.absRsvpForm.is-svc .absBtn {
    min-width: 120px;
    margin-top: 8px;
}

/* Service FAQs — Q/A blocks with horizontal dividers */
.absFaq {
    padding: 70px 0 90px;
    background-color: #fff;
    border-top: 1px solid var(--abs-light-gray-e6);
}

.absFaq .absSectionHead h2 {
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -0.8px;
}

.absFaqList {
    max-width: 1050px;
    margin: 0 auto;
    border-top: 1px solid var(--abs-light-gray-e6);
}

.absFaqItem {
    padding: 28px 0;
    border-bottom: 1px solid var(--abs-light-gray-e6);
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: var(--abs-blackish);
}

.absFaqItem h4,
.absFaqItem .absFaqQ {
    display: inline;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    color: var(--abs-blackish);
}

.absFaqItem p {
    margin: 0;
    display: inline;
    color: var(--abs-blackish);
    opacity: 0.85;
}

/* ============================================================
   PARTS / ABOUT / FINANCING PAGES
   ============================================================ */

/* Banner extensions — eyebrow + subtitle */
.absBannerEyebrow {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    margin: 0 0 12px;
    opacity: 0.95;
}

.absBannerSub {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    margin: 18px auto 28px;
    max-width: 720px;
}

/* About hero eyebrow (between H1 and sub) */
.absBannerEyebrowAlt {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    color: #fff;
    margin: 20px 0 8px;
}

/* Banner inside breadcrumb-style top link (above hero on About/Financing) */
.absHeroCrumb {
    position: absolute;
    top: 16px;
    left: 60px;
    z-index: 3;
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    opacity: 0.85;
}

.absHeroCrumb a {
    color: #fff;
}

/* Full-width image banner (no overlay text) — Financing hero */
.absImageBanner {
    width: 100%;
    height: 460px;
    overflow: hidden;
}

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

/* Authorized Brands logo grid */
.absBrands {
    padding: 70px 0 90px;
    background-color: #fff;
}

.absBrandsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}

.absBrandBox {
    height: 160px;
    border: 1px solid var(--abs-light-gray-e6);
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.absBrandBox img {
    max-width: 70%;
    max-height: 80px;
    object-fit: contain;
}

/* Financing 3-feature row with check icons */
.absFinFeatures {
    padding: 70px 0 60px;
    background-color: #fff;
}

.absFinFeaturesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 60px;
}

.absFinFeature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.absFinFeatureIcon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--abs-aqua);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.absFinFeatureText {
    flex: 1;
}

.absFinFeature h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--abs-blackish);
    margin: 0 0 10px;
}

.absFinFeature p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: var(--abs-blackish);
    opacity: 0.85;
    margin: 0;
}

/* Financing Why Finance banner — aqua bg, title L + body R */
.absFinWhy {
    background-color: var(--abs-aqua);
    padding: 90px 0;
    color: #fff;
}

.absFinWhyGrid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: flex-start;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 60px;
}

.absFinWhy h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #fff;
    margin: 0;
}

.absFinWhy h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
}

.absFinWhy p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 28px;
    max-width: 620px;
}

/* Payment Calculator banner with image bg */
.absFinCalc {
    position: relative;
    width: 100%;
    min-height: 720px;
    overflow: hidden;
    background-color: var(--abs-blackish);
}

.absFinCalc .absFinCalcImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.absFinCalcInner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: 100px 60px;
}

.absFinStat {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 80px;
    line-height: 80px;
    font-weight: 700;
    letter-spacing: -1.6px;
    color: #fff;
    margin: 0;
}

.absCalcCard {
    background-color: #fff;
    padding: 48px 40px;
    border-radius: 4px;
    max-width: 520px;
    width: 100%;
}

.absCalcCard h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.48px;
    color: var(--abs-blackish);
    margin: 0 0 28px;
    text-align: center;
}

.absCalcCard .absRsvpField {
    border-radius: 4px;
    border-color: var(--abs-light-gray-d9);
    padding: 0 18px;
    height: 48px;
    margin-bottom: 16px;
}

.absCalcCard .absBtn {
    display: block;
    margin: 14px auto 0;
    min-width: 160px;
}

/* About CTA banner — "Stop By and Say Hello" — full-bleed dark teal w/ image */
.absCtaBanner {
    position: relative;
    width: 100%;
    min-height: 520px;
    overflow: hidden;
    background-color: #486a76;
    color: #fff;
    padding: 110px 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.absCtaBannerImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.absCtaBannerInner {
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin: 0 auto;
}

.absCtaBannerInner h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #fff;
    margin: 0 0 20px;
}

.absCtaBannerInner p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    margin: 0 auto 28px;
    max-width: 760px;
}

/* About — "Meet the Team" quote with left vertical aqua bar */
.absQuote {
    position: relative;
    padding-left: 24px;
    margin: 24px 0;
    font-family: "Helvetica Neue Roman", sans-serif;
    font-style: italic;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
}

.absQuote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background-color: var(--abs-aqua);
}

/* Parts — Expert Guidance split panel (dark text L + image R) */
.absExpertGuidance {
    width: 100%;
    background-color: var(--abs-blackish);
}

.absExpertGuidanceGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 520px;
}

.absExpertGuidanceText {
    padding: 90px 80px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.absExpertGuidanceText h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #fff;
    margin: 0 0 28px;
    max-width: 520px;
}

.absExpertGuidanceText p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 32px;
    max-width: 520px;
}

.absExpertGuidanceImg {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
}

/* ============================================================
   PARTS / ABOUT / FINANCING — RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .absImageBanner {
        height: 320px;
    }

    .absBrandsGrid,
    .absFinFeaturesGrid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 24px;
    }

    .absBrandBox {
        height: 120px;
    }

    .absFinWhyGrid,
    .absFinCalcInner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 56px 24px;
    }

    .absFinWhy {
        padding: 0;
    }

    .absFinWhy h2 {
        font-size: 28px;
        line-height: 36px;
    }

    .absFinStat {
        font-size: 44px;
        line-height: 50px;
    }

    .absCtaBanner {
        padding: 56px 24px;
        min-height: auto;
    }

    .absCtaBannerInner h2 {
        font-size: 30px;
        line-height: 36px;
    }

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

    .absExpertGuidanceGrid {
        grid-template-columns: 1fr;
    }

    .absExpertGuidanceText {
        padding: 48px 32px;
    }

    .absExpertGuidanceText h3 {
        font-size: 26px;
        line-height: 32px;
    }

    .absExpertGuidanceImg {
        min-height: 320px;
        height: 320px;
    }

    .absCalcCard {
        padding: 32px 24px;
    }
}

@media (max-width: 575px) {
    .absImageBanner {
        height: 220px;
    }

    .absFinStat {
        font-size: 34px;
        line-height: 40px;
    }
}

/* ============================================================
   BLOG / EVENTS — RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .absBanner {
        height: 280px;
    }

    .absBannerContent h1 {
        font-size: 44px;
        line-height: 48px;
    }

    .absBlogGrid,
    .absEventsGrid {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 40px;
    }

    .absBlogCardImg {
        height: 280px;
    }

    .absEventCard img {
        height: 260px;
    }

    .absBlogDetailGrid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .absArticleImg {
        height: 320px;
    }

    .absArticleTitle {
        font-size: 30px;
        line-height: 36px;
    }

    .absEventTopImg {
        height: 320px;
    }

    .absEventInfoCard {
        position: static;
        width: 100%;
        margin-top: 24px;
    }

    .absEventBody h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .absEventGalleryRow {
        grid-template-columns: repeat(2, 1fr);
    }

    .absEventInventoryGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1199px) {
    .absSvcIntroGrid,
    .absSvcRow {
        padding: 0 40px;
        gap: 56px;
    }

    .absWhyPartsCell {
        padding: 70px 48px;
    }

    .absWhyPartsCell.is-right h3 {
        font-size: 52px;
        line-height: 60px;
    }

    .absBanner.is-tall .absBannerContent h1 {
        font-size: 64px;
        line-height: 72px;
    }
}

@media (max-width: 991px) {
    .absBanner.is-tall {
        height: 460px;
    }

    .absBanner.is-tall .absBannerContent h1 {
        font-size: 44px;
        line-height: 52px;
        margin-bottom: 24px;
    }

    .absSvcIntroGrid,
    .absSvcRow,
    .absWhyPartsGrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .absSvcIntroGrid,
    .absSvcRow {
        padding: 0 24px;
    }

    .absSvcRow.is-reverse .absSvcRowImg {
        order: 0;
    }

    .absSvcIntroImg,
    .absSvcRowImg {
        height: 280px;
    }

    .absSvcIntro {
        padding: 48px 0 56px;
    }

    .absSvcCore {
        padding: 56px 0 56px;
    }

    .absSvcRow {
        margin-bottom: 56px;
    }

    .absSvcIntroText h2,
    .absSvcRowText h3 {
        font-size: 28px;
        line-height: 36px;
    }

    .absWhyPartsCell {
        padding: 56px 32px;
        min-height: auto;
    }

    .absWhyPartsCell h3 {
        font-size: 28px;
        line-height: 36px;
    }

    .absWhyPartsCell.is-right h3 {
        font-size: 40px;
        line-height: 44px;
    }

    .absSectionHead {
        margin-bottom: 36px;
    }

    .absSectionHead h2,
    .absRsvpForm.is-svc .absRsvpInner h2,
    .absFaq .absSectionHead h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .absSvcDetailIntro {
        padding: 48px 0 24px;
    }

    .absRsvpForm.is-svc {
        padding: 56px 0;
    }

    .absFaq {
        padding: 56px 0;
    }
}

@media (max-width: 575px) {
    .absBanner {
        height: 220px;
    }

    .absBannerContent h1 {
        font-size: 32px;
        line-height: 36px;
    }

    .absBlogTabsRow {
        gap: 6px 20px;
    }

    .absBlogTab {
        font-size: 13px;
    }

    .absBlogCard h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .absBlogCardImg,
    .absEventCard img {
        height: 220px;
    }

    .absArticleImg {
        height: 220px;
    }

    .absEventTopImg {
        height: 240px;
    }

    .absEventGalleryRow {
        grid-template-columns: 1fr;
    }

    .absEventInventoryGrid {
        grid-template-columns: 1fr;
    }
}

/* --- Hero (slim variant) --- */
.yswHeroSlim {
    height: 480px;
}

.yswHeroSlim .yswHeroOverlay {
    background: rgba(4, 44, 101, 0.62);
}

.jrnHeroSub {
    max-width: 880px;
    margin-top: 20px;
}

/* --- Top Entry --- */
.jrnTop {
    padding: 90px 0;
    background-color: #fff;
}

.jrnTopImageWrap {
    position: relative;
    width: 100%;
    padding-top: 68%;
    border-radius: 4px;
    overflow: hidden;
}

.jrnTopImageWrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jrnTopText {
    max-width: 560px;
    margin-left: auto;
}

.jrnTopText .yswH2 {
    margin-top: 8px;
}

/* --- Entries --- */
.jrnEntries {
    padding: 80px 0 110px;
    border-top: 1px solid var(--ysw-e6);
    background-color: #fff;
}

.jrnEntriesHead {
    margin-bottom: 28px;
}

.jrnTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 36px;
    margin-bottom: 52px;
}

.jrnTab {
    position: relative;
    background: none;
    border: none;
    padding: 0 0 10px;
    cursor: pointer;
    font-family: "Mona Sans", sans-serif;
    font-size: 20px;
    line-height: 32px;
    color: var(--ysw-slate);
    transition: color 0.2s ease;
    font-variation-settings: 'wght' 320, 'wdth' 125;
}

.jrnTab:hover {
    color: var(--ysw-blue);
}

.jrnTab.active {
    color: var(--ysw-blue);
}

.jrnTab.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    background-color: var(--ysw-blue);
}

/* --- Article cards --- */
.jrnGrid [class*="col-"] {
    margin-bottom: 56px;
}

.jrnCardImgWrap {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 54.55%;
    border-radius: 8px;
    overflow: hidden;
}

.jrnCardImgWrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.jrnCard:hover .jrnCardImgWrap img {
    transform: scale(1.05);
}

.jrnCardCat {
    margin-top: 24px;
}

.jrnCardTitle {
    margin-top: 6px;
    margin-bottom: 10px;
}

.jrnCard .yswArrowLink {
    margin-top: 18px;
}

/* --- Journal responsive --- */
@media (max-width: 991px) {
    .yswHeroSlim {
        height: 400px;
    }

    .jrnTop {
        padding: 64px 0;
    }

    .jrnTopImageWrap {
        margin-bottom: 40px;
    }

    .jrnTopText {
        max-width: 100%;
        margin-left: 0;
    }

    .jrnEntries {
        padding: 56px 0 24px;
    }

    .jrnGrid [class*="col-"] {
        margin-bottom: 44px;
    }
}

@media (max-width: 575px) {
    .yswHeroSlim {
        height: 360px;
    }

    .jrnTop {
        padding: 48px 0;
    }

    .jrnEntries {
        padding: 48px 0 8px;
    }

    .jrnTabs {
        gap: 14px 24px;
        margin-bottom: 36px;
    }

    .jrnTab {
        font-size: 18px;
    }
}

/* ============================================================
   JOURNAL ENTRY PAGE — CSS
   Design: Figma node 47:832
   Reuses: header, footer, typography & button utilities
   ============================================================ */

/* --- Hero image --- */
.jreHero {
    width: 100%;
    line-height: 0;
}

.jreHero img {
    width: 100%;
    height: 720px;
    object-fit: cover;
    display: block;
}

/* --- Article --- */
.jreArticle {
    padding: 70px 0 120px;
    background-color: #fff;
}

.jreArticleInner {
    max-width: 1120px;
    margin: 0 auto;
}

.jreCategory {
    margin-top: 14px;
}

.jreLead {
    margin-top: 34px;
}

.jreDivider {
    height: 1px;
    background-color: var(--ysw-e6);
    border: none;
    margin: 40px 0;
}

/* --- Article body (prose) --- */
.jreBody h3 {
    font-family: "Mona Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ysw-blue);
    margin: 32px 0 14px;
    font-variation-settings: 'wght' 600, 'wdth' 125;
}

.jreBody>h3:first-child {
    margin-top: 0;
}

.jreBody p {
    font-family: "Mona Sans", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--ysw-slate);
    margin-bottom: 16px;
    font-variation-settings: 'wght' 400, 'wdth' 100;
}

.jreBody ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 16px;
}

.jreBody li {
    font-family: "Mona Sans", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--ysw-slate);
    margin-bottom: 8px;
    font-variation-settings: 'wght' 400, 'wdth' 100;
}

.jreBody li:last-child {
    margin-bottom: 0;
}

.jreBody strong {
    font-weight: 700;
    color: var(--ysw-slate);
    font-variation-settings: 'wght' 700, 'wdth' 100;
}

/* --- Shop With Confidence CTA --- */
.jreCta {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 56px;
}

.jreCtaImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jreCtaOverlay {
    position: absolute;
    inset: 0;
    background-color: rgba(4, 44, 101, 0.8);
}

.jreCtaContent {
    position: relative;
    z-index: 2;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;
    padding: 60px 24px;
}

/* --- Journal Entry responsive --- */
@media (max-width: 991px) {
    .jreHero img {
        height: 420px;
    }

    .jreArticle {
        padding: 48px 0 72px;
    }

    .jreCtaContent {
        min-height: 380px;
    }
}

@media (max-width: 575px) {
    .jreHero img {
        height: 280px;
    }

    .jreArticle {
        padding: 40px 0 56px;
    }

    .jreBody h3 {
        font-size: 18px;
    }

    .jreCtaContent {
        min-height: 320px;
        gap: 22px;
    }

    .jreCtaContent .yswBtnOutlineWhite {
        width: 100%;
        max-width: 320px;
    }
}

/* ============================================================
   EVENT DETAILS PAGE — CSS
   Design: Figma node 56:1610
   Reuses: header, footer, listing cards, currency toggle, shared
           form block, brand wordmark, typography & buttons
   ============================================================ */

/* --- Hero card --- */
.evtHero {
    padding: 80px 0 0;
    background-color: #fff;
}

.evtHeroCard {
    position: relative;
    width: 100%;
    height: 680px;
    border-radius: 16px;
    overflow: hidden;
}

.evtHeroImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evtHeroOverlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 11, 27, 0.4);
}

.evtHeroContent {
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.evtHeroContent .yswEyebrow {
    opacity: 1;
    margin-bottom: 8px;
}

.evtHeroInfo {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 2;
    width: 420px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.evtHeroInfoRow {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 28px;
}

.evtHeroInfoRow:not(:last-child) {
    border-bottom: 1px solid var(--ysw-e6);
}

.evtHeroInfoIcon {
    font-size: 22px;
    color: var(--ysw-blue);
    flex-shrink: 0;
}

.evtHeroInfoLabel {
    font-family: "Mona Sans", sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ysw-blue);
    opacity: 0.6;
    font-variation-settings: 'wght' 400, 'wdth' 125;
}

.evtHeroInfoValue {
    font-family: "Mona Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ysw-blackish-blue);
    font-variation-settings: 'wght' 600, 'wdth' 125;
}

/* --- Event intro --- */
.evtIntro {
    padding: 80px 0 0;
    background-color: #fff;
}

.evtIntroInner {
    max-width: 1080px;
}

/* --- Brands Represented --- */
.evtBrands {
    padding: 70px 0 90px;
    background-color: #fff;
}

.evtBrandsRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.evtBrandsHeading {
    max-width: 420px;
    flex-shrink: 0;
}

.evtBrandLogos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.evtBrandBox {
    width: 220px;
    height: 128px;
    border: 1px solid var(--ysw-e6);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.evtBrandBox img {
    max-height: 38px;
    max-width: 80%;
    width: auto;
    object-fit: contain;
}

.evtBrandBox .yswBrandWordmark {
    font-size: 22px;
    text-align: center;
}

/* --- Photo strip --- */
.evtPhotoStrip {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.evtPhotoStrip::-webkit-scrollbar {
    display: none;
}

.evtPhotoTrack {
    display: flex;
    gap: 4px;
    width: max-content;
}

.evtPhotoItem {
    flex: 0 0 600px;
}

.evtPhotoItem img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

/* --- Yachts Featured --- */
.evtFeatured {
    padding: 100px 0 110px;
    background-color: #fff;
}

.evtFeaturedHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
}

.evtListingGrid [class*="col-"] {
    margin-bottom: 56px;
}

/* --- Event info cards (above form) --- */
.evtInfoCards {
    display: flex;
    gap: 20px;
    margin-bottom: 56px;
}

.evtInfoCard {
    flex: 1;
    background-color: #fff;
    border: 1px solid var(--ysw-e6);
    border-radius: 8px;
    padding: 26px 32px;
}

.evtInfoLabel {
    margin-bottom: 10px;
}

.evtInfoValue {
    font-family: "Mona Sans", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--ysw-slate);
    font-variation-settings: 'wght' 400, 'wdth' 100;
}

@media (max-width: 1500px) {
    .absContactIntroText h1 {
        font-size: 60px !important;
        line-height: 70px !important;
    }
    .slider-content h3 {
        font-size: 56px;
        line-height: 65px;
    }
}
@media (max-width: 1200px) {
    .absAboutGrid {
        gap: 40px;
    }
    .absAboutText h2 {
        font-size: 38px;
        line-height: 44px;
    }
    .absFeatureText h3 {
        font-size: 22px;
    }
    .slider-content {
        top: 30%;
    }
    .slider-content h3 {
        font-size: 45px;
        line-height: 55px;
    }
    .slider-btn {
        bottom: 30px;
    }
}

/* --- Event Details responsive --- */
@media (max-width: 991px) {
    .evtHero {
        padding: 40px 0 0;
    }

    .evtHeroCard {
        height: 480px;
    }

    .evtHeroContent {
        left: 32px;
        top: 32px;
        transform: none;
    }

    .evtHeroInfo {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
    }

    .evtIntro {
        padding: 56px 0 0;
    }

    .evtBrands {
        padding: 48px 0 64px;
    }

    .evtBrandsRow {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .evtBrandsHeading {
        max-width: 100%;
    }

    .evtPhotoItem {
        flex-basis: 440px;
    }

    .evtPhotoItem img {
        height: 360px;
    }

    .evtFeatured {
        padding: 64px 0 24px;
    }

    .evtListingGrid [class*="col-"] {
        margin-bottom: 44px;
    }
}

@media (max-width: 575px) {
    .evtHeroCard {
        height: 440px;
    }

    .evtHeroContent {
        left: 20px;
        right: 20px;
    }

    .evtHeroInfoRow {
        padding: 14px 18px;
        gap: 12px;
    }

    .evtHeroInfoValue {
        font-size: 17px;
    }

    .evtIntro {
        padding: 44px 0 0;
    }

    .evtBrands {
        padding: 40px 0 48px;
    }

    .evtBrandBox {
        width: 100%;
    }

    .evtPhotoItem {
        flex-basis: 280px;
    }

    .evtPhotoItem img {
        height: 260px;
    }

    .evtFeatured {
        padding: 48px 0 8px;
    }

    .evtFeaturedHead {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 36px;
    }

    .evtInfoCards {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 44px;
    }
}

/* ============================================================
   EVENTS & CONTACT PAGES — CSS
   Designs: Figma nodes 56:1157 (Events) / 61:2348 (Contact)
   Reuses: header, footer, hero shell, journal card grid (.jrn*),
           shared form inputs, typography & button utilities
   ============================================================ */

/* --- Shared 600px hero banner --- */
.yswHeroBanner {
    height: 600px;
}

.yswHeroBanner .yswHeroOverlay {
    background: rgba(4, 44, 101, 0.5);
}

/* --- Events list --- */
.evtsList {
    padding: 80px 0 110px;
    background-color: #fff;
}

/* --- Contact form --- */
.cntForm {
    padding: 90px 0 100px;
    background-color: var(--ysw-lightest-blue);
}

.cntFormInner {
    max-width: 740px;
    margin: 0 auto;
    text-align: center;
}

.cntFormHeading {
    margin-top: 6px;
}

.cntFormSub {
    max-width: 740px;
    margin: 18px auto 0;
}

.cntFormFields {
    margin-top: 36px;
    text-align: left;
}

.cntSelect {
    cursor: pointer;
}

.cntFormFoot {
    text-align: center;
    margin-top: 8px;
}

.cntFormFoot .yswBtnPrimary {
    padding-left: 40px;
    padding-right: 40px;
}

/* --- Contact locations --- */
.cntLocations {
    padding: 100px 0 110px;
    background-color: #fff;
}

.cntLocHead {
    max-width: 860px;
    margin: 0 auto 56px;
    text-align: center;
}

.cntLocHead .yswH2 {
    margin-top: 6px;
}

.cntLocHeadText {
    max-width: 740px;
    margin: 16px auto 0;
}

.cntLocGrid {
    display: flex;
    gap: 40px;
}

.cntLocCard {
    flex: 1;
    min-width: 0;
}

.cntLocImgWrap {
    position: relative;
    width: 100%;
    padding-top: 58.82%;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.cntLocImgWrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cntLocInfo {
    border: 1px solid var(--ysw-e6);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 40px 48px;
}

.cntLocInfo .yswH2 {
    margin-top: 4px;
}

.cntLocInfo .yswFormPhone {
    margin-top: 10px;
}

.cntLocHours {
    margin-top: 22px;
}

.cntLocHoursLabel {
    font-family: "Mona Sans", sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ysw-blue);
    opacity: 0.6;
    margin-bottom: 4px;
    font-variation-settings: 'wght' 400, 'wdth' 125;
}
.privacy-policy-pt{
    padding-top: 145px;
}
.privacy_content h2, h3, h4 {
    padding: 10px 0;
}
/* --- Events & Contact responsive --- */
@media (max-width: 991px) {
    .yswHeroBanner {
        height: 440px;
    }

    .evtsList {
        padding: 56px 0 24px;
    }

    .cntForm {
        padding: 56px 0 64px;
    }

    .cntLocations {
        padding: 64px 0 72px;
    }

    .cntLocGrid {
        flex-direction: column;
        gap: 40px;
    }
}

@media (max-width: 575px) {
    .yswHeroBanner {
        height: 340px;
    }

    .evtsList {
        padding: 44px 0 8px;
    }

    .cntForm {
        padding: 44px 0 56px;
    }

    .cntLocations {
        padding: 48px 0 56px;
    }

    .cntLocInfo {
        padding: 32px 28px;
    }
}

/* ============================================================
   CONTACT PAGE — page-specific
   ============================================================ */
.absContactHero {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.absContactHeroImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.absContactIntro {
    padding: 80px 0 100px;
    background-color: #fff;
}

.absContactIntroGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 60px;
}

.absContactIntroText {
    padding-top: 24px;
}

.absContactIntroText h1 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 80px;
    line-height: 80px;
    font-weight: 700;
    letter-spacing: -1.6px;
    color: var(--abs-blackish);
    margin: 0 0 40px;
    max-width: 600px;
}

.absContactIntroText p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0;
    max-width: 600px;
}

.absContactFormCard {
    background-color: var(--abs-blackish);
    padding: 56px 48px;
    color: #fff;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-top: -260px;
    position: relative;
    z-index: 3;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.absContactFormCard h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: #fff;
    text-align: center;
    margin: 0 0 32px;
}

.absContactFormCard .absRsvpField {
    border-radius: 24px;
    border-color: var(--abs-light-gray-d9);
    padding: 0 22px;
    height: 48px;
    margin-bottom: 16px;
}

.absContactFormCard textarea.absRsvpField {
    height: 96px;
    padding: 14px 22px;
    border-radius: 18px;
}

.absContactFormCard .absBtn {
    display: block;
    margin: 14px auto 0;
    min-width: 160px;
}

.absContactLocation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    padding: 0 0 100px;
    background-color: #fff;
}

.absContactMap {
    width: 100%;
    height: 520px;
    /* background-color: #c4c4c4; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.absContactMap iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
}
.absContactMapLabel {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 80px;
    line-height: 80px;
    font-weight: 700;
    letter-spacing: -1.6px;
    color: rgba(0, 0, 0, 0.2);
}

.absContactLocationText {
    padding: 60px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.absContactLocationText h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 48px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.96px;
    color: var(--abs-blackish);
    margin: 0 0 24px;
}

.absContactAddress {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0 0 24px;
}

.absContactPhone {
    display: inline-block;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: var(--abs-aqua);
    margin-bottom: 28px;
}

.absContactPhone:hover {
    color: var(--abs-aqua);
    opacity: 0.85;
}

.absContactHours h4 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--abs-blackish);
    margin: 0 0 4px;
}

.absContactHours p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0;
}

@media (max-width: 1199px) {
    .absContactIntroText h1 {
        font-size: 56px;
        line-height: 60px;
    }

    .absContactFormCard {
        padding: 40px 36px;
        margin-top: -200px;
    }
}

@media (max-width: 991px) {
    .absContactHero {
        height: 360px;
    }

    .absContactIntro {
        padding: 48px 0 56px;
    }

    .absContactIntroGrid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 24px;
    }

    .absContactIntroText {
        padding-top: 0;
        order: 2;
    }

    .absContactFormCard {
        margin-top: -120px;
        margin-left: auto;
        margin-right: auto;
        max-width: 520px;
        padding: 32px 24px;
        order: 1;
    }

    .absContactIntroText h1 {
        font-size: 40px;
        line-height: 44px;
        letter-spacing: -0.8px;
        margin-bottom: 24px;
    }

    .absContactLocation {
        grid-template-columns: 1fr;
        padding: 0 0 56px;
    }

    .absContactMap {
        height: 320px;
    }

    .absContactMapLabel {
        font-size: 48px;
        line-height: 48px;
    }

    .absContactLocationText {
        padding: 32px 24px;
        text-align: center;
    }

    .absContactLocationText h2 {
        font-size: 32px;
        line-height: 36px;
    }
}

@media (max-width: 575px) {
    .absContactIntroText h1 {
        font-size: 30px;
        line-height: 34px;
    }

    .absContactPhone {
        font-size: 26px;
        line-height: 32px;
    }

    .absContactFormCard h3 {
        font-size: 24px;
        line-height: 28px;
    }
}

/* ============================================================
   SELL / TRADE PAGE — page-specific
   ============================================================ */
.absSellIntro {
    padding: 90px 0 80px;
    background-color: #fff;
}

.absSellIntroInner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.absSellIntroInner h1 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 48px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.96px;
    color: var(--abs-blackish);
    margin: 0 0 24px;
    max-width: 600px;
}

.absSellIntroInner p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0 0 36px;
    max-width: 820px;
}

.absSellAdvantage {
    padding: 80px 0;
    background-color: var(--abs-lightest-gray);
}

.absSellAdvantageInner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 60px;
}

.absSellAdvantageTitle {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 48px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.96px;
    color: var(--abs-blackish);
    text-align: center;
    margin: 0 0 56px;
}

.absSellAdvantageGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 40px;
}

.absSellAdvantageItem {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 400px;
}

.absSellAdvantageIcon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: var(--abs-aqua);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.absSellAdvantageText h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: var(--abs-blackish);
    margin: 0 0 8px;
}

.absSellAdvantageText p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0;
}

.absSellProcess {
    position: relative;
    width: 100%;
    min-height: 780px;
    overflow: hidden;
    background-color: var(--abs-blackish);
    padding: 90px 0;
    color: #fff;
    margin-top: 80px;
}

.absSellProcessImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}

.absSellProcessOverlay {
    position: absolute;
    inset: 0;
    background-color: rgba(32, 30, 31, 0.6);
}

.absSellProcessInner {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 60px;
}

.absSellProcessInner h2 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 48px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -0.96px;
    color: #fff;
    text-align: center;
    margin: 0 0 56px;
}

.absSellProcessGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}

.absSellProcessCard {
    position: relative;
    background-color: #fff;
    border: 1px solid var(--abs-light-gray-d9);
    border-radius: 8px;
    padding: 100px 40px 40px;
    min-height: 360px;
}

.absSellProcessNum {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--abs-aqua);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.48px;
    box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.absSellProcessCard h3 {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: var(--abs-blackish);
    margin: 0 0 18px;
}

.absSellProcessCard p {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0;
}

.absSellProcessFoot {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin: 0 0 24px;
}

.absSellProcessCta {
    text-align: center;
}

.absSellProcessCta .absBtn {
    min-width: 300px;
}

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

    .absSellProcessGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .absSellIntro {
        padding: 56px 0;
    }

    .absSellIntroInner {
        padding: 0 24px;
    }

    .absSellIntroInner h1 {
        font-size: 32px;
        line-height: 36px;
    }

    .absSellAdvantage {
        padding: 56px 0;
    }

    .absSellAdvantageInner {
        padding: 0 24px;
    }

    .absSellAdvantageTitle {
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 36px;
    }

    .absSellAdvantageGrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .absSellAdvantageText h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .absSellProcess {
        padding: 56px 0;
    }

    .absSellProcessInner {
        padding: 0 24px;
    }

    .absSellProcessInner h2 {
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 36px;
    }

    .absSellProcessGrid {
        grid-template-columns: 1fr;
    }

    .absSellProcessCard {
        padding: 90px 28px 28px;
        min-height: auto;
    }

    .absSellProcessNum {
        top: 28px;
        left: 28px;
    }

    .absSellProcessCard h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .absSellProcessCta .absBtn {
        min-width: 240px;
    }
}

/* ============================================================
   FAQ PAGE — page-specific
   ============================================================ */
.absFaqPage {
    padding: 24px 0 100px;
    background-color: #fff;
}

.absFaqPageCrumb {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: rgba(34, 34, 34, 0.6);
    margin-bottom: 56px;
}

.absFaqPageCrumb a {
    color: rgba(34, 34, 34, 0.6);
}

.absFaqPageCrumb a:hover {
    color: var(--abs-aqua);
}

.absFaqPageTitle {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 80px;
    line-height: 80px;
    font-weight: 700;
    letter-spacing: -1.6px;
    color: var(--abs-blackish);
    text-align: center;
    margin: 0 0 56px;
}

.absFaqCategory {
    max-width: 1108px;
    margin: 0 auto;
    border-bottom: 1px solid var(--abs-light-gray-e6);
}

.absFaqCategory:first-of-type {
    border-top: 1px solid var(--abs-light-gray-e6);
}

.absFaqCategoryHead {
    width: 100%;
    background: none;
    border: none;
    padding: 32px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.64px;
    color: var(--abs-blackish);
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
}

.absFaqCategoryHead:hover {
    color: var(--abs-aqua);
}

.absFaqCategoryHead i {
    font-size: 16px;
    color: var(--abs-blackish);
    transition: transform 0.2s ease;
}

.absFaqCategoryBody {
    display: none;
    padding: 8px 30px 40px;
}

.absFaqCategory.is-open .absFaqCategoryBody {
    display: block;
}

.absFaqQA {
    padding: 24px 0;
    border-top: 1px solid var(--abs-light-gray-e6);
}

.absFaqQA:first-child {
    border-top: none;
    padding-top: 0;
}

.absFaqQALine {
    font-family: "Helvetica Neue Roman", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--abs-blackish);
    margin: 0 0 16px;
}

.absFaqQALine:last-child {
    margin-bottom: 0;
}

.absFaqQA .absFaqQALine:first-child {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-weight: 700;
}

.absFaqQALabel {
    color: var(--abs-aqua);
    margin-right: 4px;
}

@media (max-width: 1600px) {
    .absFooterLeft {
        padding: 64px 120px 0 120px;
    }
    .left-sm-footer {
        margin-left: 120px;
        margin-right: 120px;
    }
}
@media (max-width: 1440px) {
    .absBanner.is-tall .absBannerContent h1 {
        font-size: 60px;
        line-height: 70px;
    }
    .absBanner.is-tall .absBannerContent h1 {
        font-size: 40px;
        line-height: 50px;
    }
    .absFooterLeft {
        padding: 64px 80px 0 80px;
    }
    .left-sm-footer {
        margin-left: 80px;
        margin-right: 80px;
    }
}
@media (max-width: 1200px) {
    .absFooterLeft {
        padding: 64px 50px 0 50px;
    }
    .left-sm-footer {
        margin-left: 50px;
        margin-right: 50px;
    }
}
@media (max-width: 991px) {
    .absFooterLeft {
        padding: 64px 20px 50px 20px;
        gap: 0px;
        flex-direction: column;
    }
    .right-sm-footer{
        display: none;
    }
    .bottom-footer {
        grid-template-columns: 1fr;
    }
    .left-sm-footer ul {
        justify-content: center;
    }
    .absFooterBrand{
        align-items: center;
        padding-bottom: 40px;
    }
    .absFooterColWrapper{
        flex-wrap: wrap;
    }
    .absFooterCol {
        width: 100%;
    }
    .absFooterBrand, .absFooterColWrapper{
        width: 100%;
    }
    .absFaqPage {
        padding: 24px 0 64px;
    }

    .absFaqPageTitle {
        font-size: 48px;
        line-height: 52px;
        margin-bottom: 32px;
    }

    .absFaqCategoryHead {
        font-size: 24px;
        line-height: 30px;
        padding: 24px 0;
    }

    .absFaqCategoryBody {
        padding: 4px 0 28px;
    }
}

@media screen and (max-width: 767px) {
    .slider-content h3 {
        font-size: 35px;
        line-height: 45px;
    }
    .brand-slider .item {
        position: relative;
        min-height: 350px;
    }
}

@media (max-width: 576px) {
    .left-sm-footer ul {
        flex-direction: column;
    }
    .left-sm-footer ul .footer-bottom-item {
        padding-right: 0;
        padding: 5px 0;
    }
    .footer-bottom-item + .footer-bottom-item::before {
        display: none;
    }
    .absFaqPageTitle {
        font-size: 36px;
        line-height: 40px;
    }

    .absFaqCategoryHead {
        font-size: 20px;
        line-height: 26px;
    }
    .slider-content h3 {
        font-size: 30px;
        line-height: 45px;
    }
}




/* ============================================================
   MENU restored from pre-merge master (mega menu + mobile menu)
   ============================================================ */
.navLinks {
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0;
    transition: opacity 0.2s ease;
}
.navLinks:hover {
    opacity: 0.7;
    color: #fff;
    cursor: pointer;
}

.searchWrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobileSearchWrapper {
    position: absolute;
    left: 0;
    top: 80px;
    z-index: 100;
    width: 100%;
    display: none;
}

.navSearchInput {
    display: none;
    padding: 11px 16px;
    color: #201E1F;
    font-family: "Helvetica Neue Roman";
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    outline: none;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    position: absolute;
    top: 84px;
    right: 20px;
    z-index: 210;
    width: 340px;
    max-width: calc(100vw - 40px);
}

.navSearchInput:focus {
    border-color: var(--abs-aqua, #5B95A9);
}

.mobileNavSearchInput {
    padding: 11px 14px;
    color: #191919;
    font-family: "Helvetica Neue Roman";
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    outline: none;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    width: 100%;
}

.mobileNavSearchInput:focus {
    border-color: var(--abs-aqua, #5B95A9);
}

/* ---- Search suggestions dropdown (shared) ---- */
.tt-suggestion {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 215;
}

.tt-suggestion.hidden {
    display: none;
}

/* Desktop: anchor under the floating search box, match its width */
.searchWrapper .tt-suggestion {
    position: absolute;
    top: 132px;
    right: 20px;
    left: auto;
    transform: none;
    width: 340px;
    max-width: calc(100vw - 40px);
    max-height: min(70vh, 520px);
}

/* Mobile: full-width panel directly below the input */
.mobileSearchWrapper {
    padding: 12px 16px;
    background: #201E1F;
}

.mobileSearchWrapper .tt-suggestion {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: 10px;
    max-height: calc(100vh - 170px);
}

/* Suggestion rows */
.tt-suggestion .focus-element {
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
}

.tt-suggestion .focus-element:last-child {
    border-bottom: none;
}

.tt-suggestion .inventorySearchResult {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    transition: background-color 0.15s ease;
}

.tt-suggestion .focus-element:hover .inventorySearchResult {
    background-color: #f6f9fb;
}

.tt-suggestion .imgContainer {
    flex: 0 0 72px;
    width: 72px;
    height: 54px;
    border-radius: 6px;
    overflow: hidden;
    background: #f2f2f2;
}

.tt-suggestion .imgContainer img {
    width: 72px !important;
    height: 54px;
    object-fit: cover;
    display: block;
}

.tt-suggestion .conetntSectionContainer {
    flex: 1 1 auto;
    min-width: 0;
}

.tt-suggestion .invTitle {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-suggestion .invPrice {
    font-size: 13px;
    line-height: 17px;
}

.tt-suggestion .invMiles,
.tt-suggestion .invStock {
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    color: #6b6b6b;
    margin-top: 2px;
}

.tt-suggestion .invMiles {
    margin-right: 8px;
}

.invTitle {
    color: #201E1F;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.invPrice {
    color: #5B95A9;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.invMiles {
    color: #201E1F;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.invStock {
    color: #201E1F;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}


/* mobile nav css starts here */
.mobileHeader {
    display: none;
    border-bottom: 1px solid rgba(125, 154, 175, 0.20);
    background: #201E1F;
    backdrop-filter: blur(10px);
    padding: 8px 24px;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    height: 80px;
}

.mobileNavBar {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.mobileHamburger {
    width: 40px;
    height: 80px;
    cursor: pointer;
}

.mobileHamburger:hover .top,
.mobileHamburger:hover .bottom {
    width: 60%;
}

.mobileHamburger:hover .middle {
    width: 100%;
}

.sideMobileLogoWrap {
    max-width: 150px;
}

.sideMobileLogoWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobileFavAndPhoneIcon {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 60px;
}

.sideMenuLinkList {
    list-style: none;
    padding: 40px 0;
}

.mobileSideMenu {
    width: 70vw;
    height: 100vh;
    background-color: #fff;
    padding: 40px 32px 120px 32px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow-y: auto;
    transition: all 0.4s;
    transform: translateX(-101%);
    box-shadow: 8px 0 20px rgba(0, 0, 0, 0.15);
}

.mobileSideMenuTogglerClass {
    transform: translateX(0);
}

.mobileBackArrowWrap {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}

.mobileBackArrow {
    max-width: 16px;
    cursor: pointer;
}

.mobileBackArrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobileBrandToggleBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.mobileSideMenuLink {
    font-family: "Helvetica Neue Roman";
    color: var(--Blackish, #201E1F) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 24px !important;
}

.mobileSideMenuLink:hover {
    color: var(--Blackish, #201E1F) !important;
}

.mobileSideMenu .sideMenuLinkList:not(:last-of-type) {
    border-bottom: 1px solid rgba(110, 141, 166, 0.2);
}

.mobileSideMenu .sideMenuLinkList li:not(:last-child) {
    margin-bottom: 32px;
}

.mobileBrandMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 65vw;
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    z-index: 9999;
    padding: 40px 30px 40px 5%;
    box-shadow: 8px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(-101%);
    transition: all 0.4s;
}

.mobileBrandTogglerClass {
    transform: translateX(0);
}

.mobileBrandArrowWrap {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}

.mobileBrandArrow {
    max-width: 16px;
    cursor: pointer;
}

.mobileBrandArrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobileLocationToggleBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobileLocationMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 65vw;
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    z-index: 9999;
    padding: 40px 30px 40px 5%;
    box-shadow: 8px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(-101%);
    transition: all 0.4s;
}

.mobileLocationTogglerClass {
    transform: translateX(0);
}

.mobileLocationArrowWrap {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}

.mobileLocationArrow {
    max-width: 16px;
    cursor: pointer;
}

.mobileLocationArrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.hamburger {
    width: 40px;
    cursor: pointer;
}

.line {
    display: block;
    height: 2px;
    background: #eee;
    margin: 10px 0;
    transition: all 0.35s ease;
}

.top,
.bottom {
    width: 100%;
}

.middle {
    width: 60%;
}

/* Hover animation */
.hamburger:hover .top,
.hamburger:hover .bottom {
    width: 60%;
}

.hamburger:hover .middle {
    width: 100%;
}

.sideMenuSocialIconsWrap {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.sideMenuSocialIcon {
    color: #5B95A9;
    font-size: 18px;
}

/* mobile nav css ends here */

/* mega menu css starts here */
.inventoryMegaMenu {
    position: fixed;
    z-index: 20;
    top: 80px;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 40px 0 60px 0;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.serviceMegaMenu {
    position: fixed;
    z-index: 20;
    top: 80px;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 40px 0 60px 0;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.inventoryMenuList {
    list-style: none;
}

.inventoryMenuList li {
    margin-bottom: 24px;
}

.inventoryMenuLink {
    font-family: "Helvetica Neue Roman";
    color: var(--Blackish, #201E1F);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.48px;
}

.inventoryMenuLink:hover {
    color: var(--Blackish, #201E1F);
}

.inventoryMenuCard {
    margin: 0 12px;
    position: relative;
}

.inventoryMenuCard::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 0%, rgba(17, 17, 17, 0.80) 100%);
    mix-blend-mode: multiply;
    width: 100%;
    height: 50%;
}

.inventoryMenuImageWrap {
    position: relative;
    padding-top: 58%;
}

.inventoryMenuImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventoryMenuCardContent {
    position: absolute;
    left: 5%;
    bottom: 16px;
    z-index: 2;
}

.inventoryMenuCardTitle {
    color: #FFF;
    font-family: "Helvetica Neue Heavy", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.64px;
}

.inventoryMenuLogoWrap {
    max-width: 207px;
}

.inventoryMenuLogoWrap img {
    width: 100%;
    object-fit: contain;
}

.closeInventoryIcon {
    position: absolute;
    top: 20px;
    right: 20px;
}

.closeInventoryIcon {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 4px;
}

.closeIconText {
    color: #7B7B7B;
    font-family: "Acumin Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.toggleResourcesMenu {
    position: relative;
}

.resourcesMegaMenu {
    position: absolute;
    left: 4%;
    top: 52px;
    background-color: #fff;
    padding: 32px 40px;
    min-width: 260px;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.resourcesMenuList {
    list-style: none;
}

.resourcesMenuList li {
    margin-bottom: 12px;
}

.resourcesMenuLink {
    font-family: "Helvetica Neue Roman";
    color: var(--Blackish, #201E1F) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 24px !important;
}

.resourcesMenuLink:hover {
    color: var(--Blackish, #201E1F) !important;
}

/* mega menu css ends here */

/* status pages (thank-you / 404) start here */
.commonSection {
    margin-bottom: 80px;
}
.firstSectionTopMargin {
    margin-top: 80px;
}
.commonSectionInnerWrap {
    display: flex;
    align-items: stretch;
    gap: 120px;
    max-width: calc(100% - 15%);
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}
.statusPagesInnerWrap {
    align-items: center;
}
.commonSectionTextWrapper,
.thank-you-content-box {
    width: 50%;
}
.thank-you-inner-box {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}
.statusPagesTextWrapper {
    text-align: center;
}
.commonSectionImageWrapper {
    width: 50%;
}
.commonSectionImageWrapper img,
.thank-you-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.commonSectionHeading {
    color: #222;
    text-align: center;
    font-family: "Noto Serif";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 6.4px;
    text-transform: uppercase;
}
.commonPara {
    color: #1E1E1E;
    text-align: center;
    font-family: 'acumin-light';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    margin-bottom: 40px;
    margin-top: 40px;
}
.commonSectionLinkWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.absBlogCardExcerpt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
@media (max-width: 991px) {
    .absSellAdvantageItem {
        max-width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .absContactMap iframe {
        min-height: unset;
    }
    .absContactIntroText h1 {
        font-size: 40px !important;
        line-height: 50px !important;
    }
    .absContactIntroText p, .absContactIntroText h1 {
        max-width: 100%;
        text-align: center;
    }
    .parts-brands{
        padding: 70px 0 0px 0 !important;
    }
    .privacy-policy-pt{
        padding-top: 80px;
    }
    .commonSectionInnerWrap {
        gap: 40px;
        flex-flow: column-reverse;
        max-width: 100%;
    }
    .firstSectionTopMargin {
        margin-top: 40px;
    }
    .commonSectionTextWrapper,
    .thank-you-content-box {
        width: 100%;
        max-width: 600px;
        padding-left: 25px;
        padding-right: 25px;
    }
    .commonSectionImageWrapper {
        width: 100%;
    }
    .commonSectionHeading {
        font-size: 26px;
        line-height: 34px;
        letter-spacing: 4px;
    }

    .mobileHeader {
        display: block;
    }
}
/* status pages (thank-you / 404) end here */