@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ============================================================
   Hampton Watercraft & Marine — HOME PAGE CSS
   Design: Figma node 1:2
   Fonts: Holland Title AT (local), Segoe UI (local), Amiri (Google)
   ============================================================ */

/* --- Local @font-face --- */
@font-face {
    font-family: 'bold-segoe-ui';
    src: url('../fonts/segoe-ui/bold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'regular-segoe-ui';
    src: url('../fonts/segoe-ui/regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'holland';
    src: url('../fonts/Holland/holland.ttf') format('truetype');
    font-display: swap;
}

/* --- Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a:hover {
    text-decoration: none;
}

:root {
    /* Colours (Figma tokens) */
    --navy: #000525;
    --white: #FFFFFF;
    --tan: #7A693B;
    --maroon: #7D1317;
    --text-gray: #3D3E42;
    --slate: #6E8DA6;
    --f7: #F7F7F7;
    --d9: #D9D9D9;
    --blackish: #1B2026;
    --anchor-gray: #79797B;

    /* Legacy aliases (kept for compatibility) */
    --blue: #042C65;
    --blackish-blue: #000B1B;

    /* Font stacks */
    --bold-segoe-ui: 'bold-segoe-ui', 'Segoe UI', system-ui, sans-serif;
    --regular-segoe-ui: 'regular-segoe-ui', 'Segoe UI', system-ui, sans-serif;
    --holland: 'holland', Georgia, serif;
    --amiri: 'Amiri', Georgia, serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #fff;
    font-family: var(--regular-segoe-ui);
    color: var(--text-gray);
    overflow-x: hidden;
    line-height: 1.5;
}

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

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

ul {
    list-style: none;
}

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

.iti {
    width: 100% !important;
    max-width: 100% !important;
}

.field-error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}

.error_field {
    outline: 1px solid red !important;
    border-color: red;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#notify_message {
    /* padding: 10px; */
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    font-family: trade-gothic-next;
    max-height: 80px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #0e0d0d;
    margin-bottom: 0;
    z-index: 10;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.hwmH1 {
    font-family: var(--holland);
    font-size: 100px;
    font-weight: 400;
    line-height: 80px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hwmH2 {
    font-family: var(--holland);
    font-size: 56px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hwmH2White {
    color: var(--wt, #FFF);
    font-family: var(--holland);
    font-size: 56px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hwmH4 {
    font-family: var(--amiri);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.hwmH5 {
    font-family: var(--bold-segoe-ui);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.hwmPara {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.addressPara {
    text-decoration: underline;
}

.whitePara {
    color: var(--wt, #FFF);
    font-family: var(--regular-segoe-ui);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

/* --- Colour helpers --- */
.hwmNavyText {
    color: var(--navy);
}

.hwmTanText {
    color: var(--tan);
}

.hwmWhiteText {
    color: var(--white);
}

.hwmGrayText {
    color: var(--text-gray);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.hwmBtnPrimary,
.hwmBtnMaroon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 4px;
    font-family: var(--holland);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
}

.hwmBtnPrimary {
    background-color: var(--navy);
    color: var(--white);
    border: 2px solid rgba(122, 105, 59, 0.6);
}

.hwmBtnPrimary:hover {
    background-color: #0a1245;
    border-color: rgba(122, 105, 59, 0.9);
    color: var(--white);
}

/* ============================================================
   HEADER
   ============================================================ */
.hwmHeader {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    background-color: var(--white);
    height: 80px;
    box-shadow: 0 4px 20px rgba(0, 5, 37, 0.2);
}

.hwmHeaderInner {
    height: 80px;
    padding: 0 6.25%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
}

/* --- Left nav --- */
.hwmNav {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
}

.hwmNavLink {
    font-family: var(--holland);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: var(--navy);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.hwmNavLink:hover {
    color: var(--maroon);
}

.hwmBrandLogoWrap {
    max-width: 200px;
    margin-bottom: 40px;
}

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

/* --- Centered logo (site-logo.png is already the full maroon-ribbon badge) --- */
.hwmLogo {
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    display: block;
    z-index: 20;
    line-height: 0;
    filter: drop-shadow(0 4px 10px rgba(0, 5, 37, 0.18));
}

.hwmLogo img {
    height: 96px;
    width: 100%;
    max-width: 350px;
    object-fit: contain;
}

/* --- Right cluster --- */
.hwmHeaderRight {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
    justify-content: flex-end;
}


.hwmHeaderLoc {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}

.hwmHeaderLocLabel {
    font-family: var(--amiri);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--navy);
    text-align: right;
    margin-bottom: 6px;
}

.hwmHeaderLocPhone {
    font-family: var(--holland);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: var(--navy);
    transition: color 0.2s ease;
}

.hwmHeaderLocPhone:hover {
    color: var(--maroon);
}

/* --- Locations Dropdown --- */
.hwmHeaderLocDropdown {
    position: relative;
    display: inline-block;
}

.hwmHeaderLocDropdownToggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 6px 0;
}

.hwmHeaderLocArrow {
    color: var(--navy);
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.hwmHeaderLocDropdownToggle:hover .hwmHeaderLocArrow {
    color: var(--maroon);
}

.hwmHeaderLocDropdown.active .hwmHeaderLocArrow {
    transform: rotate(180deg);
    color: var(--maroon);
}

.hwmHeaderLocDropdownMenu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 280px;
    background-color: var(--white);
    border: 1px solid rgba(0, 5, 37, 0.08);
    border-radius: 0px 0 8px 8px;
    box-shadow: 0 10px 30px rgba(0, 5, 37, 0.08);
    padding: 8px 20px;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hwmHeaderLocDropdown.active .hwmHeaderLocDropdownMenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hwmHeaderLocDropdownItem {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hwmHeaderLocDropdownItem:not(:last-child) {
    border-bottom: 1px solid rgba(0, 5, 37, 0.06);
}

/* ============================================================
   HWM SECONDARY LOCATIONS BAR (Unique Class Names & Full Responsiveness)
   ============================================================ */
/* .hwmSecondaryLocBar {
    background-color: var(--navy, #000525);
    padding: 7px 3.5%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 5, 37, 0.15);
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
}

.hwmSubLocBarInner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.hwmSubLocBarGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-shrink: 1;
    min-width: 0;
}

.hwmSubLocBarSpacer {
    flex: 0 1 240px;
    min-width: 100px;
    display: block;
}

.hwmSubLocBarItem {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.hwmSubLocBarIcon {
    color: var(--tan, #7A693B);
    font-size: 12px;
    flex-shrink: 0;
}

.hwmSubLocBarDetails {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
}

.hwmSubLocBarName {
    font-family: var(--amiri, Georgia, serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white, #FFFFFF);
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.hwmSubLocBarName:hover {
    color: var(--tan, #7A693B);
    text-decoration: none;
}

.hwmSubLocBarSub {
    font-family: var(--regular-segoe-ui, sans-serif);
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    color: var(--slate, #6E8DA6);
    margin-left: 2px;
}

.hwmSubLocBarPhone {
    font-family: var(--holland, Georgia, serif);
    font-size: 14px;
    color: var(--tan, #7A693B);
    transition: color 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.hwmSubLocBarPhone:hover {
    color: var(--white, #FFFFFF);
    text-decoration: none;
}

.hwmSubLocBarDivider {
    width: 1px;
    height: 14px;
    background-color: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
} */

/* =========================================================
   SECONDARY LOCATION BAR
   ========================================================= */

.hwmSecondaryLocBar {
    width: 100%;
    background: #03082b;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(197, 166, 78, 0.35);
    position: relative;
    z-index: 10;
}

.hwmSubLocBarInner {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
}

.hwmSubLocBarItem {
    min-width: 0;
    min-height: 68px;
    padding: 11px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    position: relative;
    text-align: left;
}

/* Subtle separator between locations */
.hwmSubLocBarItem + .hwmSubLocBarItem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
}

/* Gold location icon */
.hwmSubLocBarIcon {
    flex: 0 0 auto;
    color: #c5a64e;
    font-size: 14px;
    margin-top: -1px;
}

/* Location content */
.hwmSubLocBarDetails {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

/* Main location name */
.hwmSubLocBarName {
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.35px;
    line-height: 1.2;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Marina name */
.hwmSubLocBarSub {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.72);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Phone */
.hwmSubLocBarPhone {
    margin-top: 3px;
    color: #c5a64e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15px;
    line-height: 1.2;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Hover states */
.hwmSubLocBarName:hover,
.hwmSubLocBarSub:hover {
    color: #c5a64e;
    text-decoration: none;
}

.hwmSubLocBarPhone:hover {
    color: #ffffff;
    text-decoration: none;
}

.hwmSubLocBarPhonePlaceholder {
    cursor: default;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

/* ============================================================
   MOBILE HEADER LOCATION DROPDOWN
   ============================================================ */
.mobileHeaderRightGroup {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobileLocDropdownWrap {
    position: relative;
}

.mobileLocDropdownBtn {
    background-color: var(--navy, #000525);
    color: var(--white, #FFFFFF);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 6px 12px;
    font-family: var(--amiri, Georgia, serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobileLocDropdownBtn:hover {
    background-color: #0a1245;
}

.mobileLocDropdownBtn .mobileLocIcon {
    color: var(--tan, #7A693B);
    font-size: 12px;
}

.mobileLocDropdownBtn .mobileLocArrow {
    font-size: 10px;
    transition: transform 0.3s ease;
    color: var(--tan, #7A693B);
}

.mobileLocDropdownBtn.active .mobileLocArrow {
    transform: rotate(180deg);
}

.mobileLocDropdownMenu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 270px;
    background-color: var(--navy, #000525);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 5, 37, 0.3);
    padding: 10px 14px;
    z-index: 1050;
}

.mobileLocDropdownItem {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobileLocDropdownItem:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobileLocTitle {
    font-family: var(--amiri, Georgia, serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--white, #FFFFFF);
    text-transform: uppercase;
    text-decoration: none;
}

.mobileLocTitle:hover {
    color: var(--tan, #7A693B);
    text-decoration: none;
}

.mobileLocSub {
    font-family: var(--regular-segoe-ui, sans-serif);
    font-size: 10px;
    font-weight: 400;
    text-transform: none;
    color: var(--slate, #6E8DA6);
    display: block;
}

.mobileLocPhone {
    font-family: var(--holland, Georgia, serif);
    font-size: 14px;
    color: var(--tan, #7A693B);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mobileLocPhone:hover {
    color: var(--white, #FFFFFF);
    text-decoration: none;
}

.hwmSubMenuPhone {
    font-family: var(--holland, Georgia, serif);
    font-size: 14px;
    color: var(--tan, #7A693B);
    display: block;
    margin-top: 2px;
    text-decoration: none;
}


.hwmHeaderMore {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--holland);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--navy);
    transition: color 0.2s ease;
}

.hwmHeaderMore:hover {
    color: var(--maroon);
}

.hwmHeaderBurger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 16px;
}

.hwmHeaderBurger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--navy);
    border-radius: 1px;
    transition: background-color 0.2s ease;
}

.hwmHeaderMore:hover .hwmHeaderBurger span {
    background-color: var(--maroon);
}

/* ============================================================
   FOOTER
   ============================================================ */
.hwmFooter {
    background-color: var(--white);
    width: 100%;
}

/* --- Top: newsletter (left) + image (right) --- */
.hwmFooterTop {
    display: flex;
    width: 100%;
    min-height: 520px;
    padding: 0 6.04%;
}

.hwmNewsletter {
    flex: 1 1 50%;
    background-color: var(--f7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
}

.hwmNewsletterInner {
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.hwmNewsletter .hwmH2 {
    margin-bottom: 16px;
}

.hwmNewsletter .hwmPara {
    margin-bottom: 40px;
}

.hwmNewsletterForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.hwmNewsletterForm .hwmBtnPrimary {
    min-width: 120px;
}

.hwmNewsletterInput {
    width: 100%;
    max-width: 400px;
    height: 48px;
    border: 1px solid var(--d9);
    border-radius: 4px;
    background-color: var(--white);
    padding: 12px 18px;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--blackish);
    outline: none;
    transition: border-color 0.2s ease;
}

.hwmNewsletterInput::placeholder {
    color: rgba(27, 32, 38, 0.6);
}

.hwmNewsletterInput:focus {
    border-color: var(--navy);
}

.hwmFooterImage {
    flex: 1 1 50%;
    overflow: hidden;
    position: relative;
}

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

/* --- Middle navy panel --- */
.hwmFooterMid {
    background-color: var(--navy);
    margin: 0 6.04%;
    padding: 60px 56px 72px;
}

.hwmFooterMidInner {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.hwmFooterBrand {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hwmFooterLogo {
    display: block;
    max-width: 400px;
    margin: 0 auto 36px auto;
}

.hwmFooterLogo img {
    height: 90px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.hwmFooterPhones {
    width: 100%;
    margin-bottom: 36px;
}

.hwmFooterPhoneLabel {
    font-family: var(--amiri);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin-top: 16px;
}

.hwmFooterPhoneLabel:first-child {
    margin-top: 0;
}

.hwmFooterPhone {
    display: block;
    font-family: var(--holland);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--white);
    margin-top: 4px;
    transition: opacity 0.2s ease;
}

.hwmFooterPhone:hover {
    color: var(--white);
    opacity: 0.85;
}

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

.hwmFooterSocial a {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(122, 105, 59, 0.60);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
    transition: all 0.25s ease;
}

.hwmFooterSocial a:hover {
    background-color: var(--white);
    color: var(--navy);
}

/* --- Footer link columns --- */
.hwmFooterCols {
    width: 60%;
    display: flex;
    gap: 40px;
}

.hwmFooterCol {
    width: calc(100% / 3);
}

.hwmFooterCol {
    max-width: 200px;
    margin: 0 auto;
}

.hwmFooterCol .hwmH4 {
    margin-bottom: 16px;
}

.hwmFooterLinks li {
    margin-bottom: 6px;
}

.hwmFooterLinks li a {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--white);
    transition: opacity 0.2s ease;
}

.hwmFooterLinks li a:hover {
    color: var(--white);
    opacity: 0.7;
}

/* --- Policy strip --- */
.hwmFooterPolicy {
    padding: 32px 24px;
    text-align: center;
    background-color: var(--white);
}

.hwmFooterPolicy p {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
}

.footerBottom {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
}

.footerBottom li {
    position: relative;
}

.footerBottom *:not(:first-child)::after {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 1px;
    background-color: #3D3E42;
}

.footerBottomLink {
    color: #3D3E42;
    text-align: center;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.footerBottomLink:hover {
    color: #3D3E42;
}

/* ============================================================
   HERO
   ============================================================ */
.hwmHero {
    position: relative;
    min-height: 450px;
    padding-top: 37%;
}

.hwmHeroLocationPage {
    position: relative;
    min-height: 600px;
    padding-top: 42%;
}

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

.hwmHeroOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg, rgba(0, 5, 37, 0.00) 0%, #000525 100%);
}

.ss-event {
    background: linear-gradient(to left,
            rgba(0, 5, 37, 0.6) 0%,
            rgba(0, 5, 37, 1) 100%) !important;
}

.hwmHeroInner {
    position: absolute;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hwmHeroBtn {
    margin-top: 40px;
    align-self: flex-start;
}

/* --- Hero background video (home) --- */
.hwmHeroVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* --- Hero collage variant (Sell/Trade): heading left, 3 stacked photos right --- */
.hwmHeroCollage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 0;
}

.hwmHeroCollageLeft {
    background-color: var(--navy);
    position: relative;
    overflow: hidden;
}

.hwmHeroCollageLeft::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.45) 0%, rgba(0, 5, 37, 0.85) 100%);
}

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

.hwmHeroCollageStack {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    height: 100%;
}

.hwmHeroCollageStack img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hwmHero--collage .hwmHeroInner {
    width: 50%;
    justify-content: center;
}

/* ============================================================
   INTRO + CTA CARDS + BRAND GRID
   ============================================================ */
.hwmIntro {
    position: relative;
    background-color: var(--navy);
    padding: 100px 0 0;
    overflow: hidden;
}

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

.hwmIntroOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.7) 0%, rgba(0, 5, 37, 0.95) 100%);
}

.hwmIntroInner {
    position: relative;
    z-index: 2;
}

/* --- Intro head (heading + paragraph) --- */
.hwmIntroHead {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 240px;
    align-items: flex-start;
    padding: 0 14.58%;
    margin-bottom: 60px;
}

.hwmIntroHead .hwmPara {
    max-width: 720px;
}

/* --- 3 CTA cards row --- */
.hwmCtaCards {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.hwmCtaCard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 140px;
    padding: 0 32px;
    border-radius: 4px;
    transition: all 0.25s ease;
    color: var(--white);
    text-align: left;
}

.hwmCtaCard:hover {
    border: 2px solid #2a2d30;
    color: var(--white);
}

.hwmCtaCardIcon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.hwmCtaCardText {
    font-family: var(--amiri);
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
}

/* --- Brand grid (6 cards) --- */
.hwmBrandGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0 6.04%;
    padding-bottom: 0;
}

.hwmBrandCard {
    position: relative;
    background-color: var(--navy);
    overflow: hidden;
    aspect-ratio: 560 / 720;
}

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

.hwmBrandCard::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.00) 0%, #000525 100%);
}

.hwmBrandCardBody {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    left: 0;
    bottom: 40px;
    z-index: 2;
    padding-left: 40px;
    padding-right: 40px
}

.hwmBrandCardBody p {
    color: white !important;
}

.hwmBrandHeroBody p {
    color: white !important;
}


.hwmBrandWordmark {
    display: block;
    font-family: var(--holland);
    font-size: 48px;
    line-height: 1;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 32px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hwmBrandWordmark--tiara {
    font-style: italic;
    letter-spacing: 4px;
}

.hwmBrandWordmark--whaler {
    font-size: 38px;
    letter-spacing: 5px;
}

.hwmBrandWordmark--keywest {
    font-size: 44px;
    letter-spacing: 4px;
}

.hwmBrandWordmark--navan {
    font-size: 50px;
    letter-spacing: 6px;
    font-weight: 700;
}

.hwmBrandWordmark--brig {
    font-size: 54px;
    letter-spacing: 8px;
}

.hwmBrandWordmark--yamaha {
    font-size: 44px;
    letter-spacing: 5px;
    color: #cc0000;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hwmBrandCardBody .hwmPara {
    max-width: 380px;
    opacity: 0.85;
}

/* ============================================================
   NEW ARRIVALS
   ============================================================ */
.hwmArrivals {
    background-color: var(--white);
    padding: 100px 0;
}

.hwmArrivalsInner {
    padding: 0 0 0 3%;
}

.hwmArrivalsHead {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 240px;
    align-items: flex-start;
    padding: 0 8.54%;
    margin-bottom: 56px;
}

.hwmArrivalsHead .hwmPara {
    max-width: 720px;
}

.hwmArrivalsCarouselWrap {
    position: relative;
    padding: 0 0 0 32px;
}

/* --- Carousel arrows (circular navy w/ white chevron, per Figma) --- */
.hwmArrivalsBtn {
    position: absolute;
    top: calc(629px / 2);
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 80px;
    border-radius: 4px;
    background-color: var(--navy);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 5, 37, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hwmArrivalsBtn:hover {
    background-color: var(--maroon);
    transform: translateY(-50%) scale(1.05);
}

.hwmArrivalsPrev {
    left: -27px;
}

.hwmArrivalsNext {
    right: 2%;
}

/* --- Arrival card --- */
.hwmArrivalCard {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
}

.hwmArrivalImg {
    position: relative;
    width: 100%;
    aspect-ratio: 520 / 360;
    overflow: hidden;
}

.hwmArrivalImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hwmArrivalCard:hover .hwmArrivalImg img {
    transform: scale(1.04);
}

.hwmArrivalPlay {
    position: absolute;
    right: 16px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 160px;
    height: 48px;
    padding: 0 18px;
    background-color: #7A693B;
    border: none;
    outline: none;
    border-radius: 4px;
    color: var(--white);
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hwmArrivalPlay img {
    background-color: #FFFFFF33;
    border-radius: 50%;
    width: 32px !important;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hwmArrivalPlay:hover {
    background-color: var(--navy);
    border-color: var(--white);
}

.hwmArrivalInfo {
    padding: 24px 40px 16px;
    background-color: #F7F7F7;
    flex: 1;
    margin-top: 4px;
    height: 100%;
    max-height: 240px;
}

.arrival-title-wrapper {
    height: 86px;
}

.hwmArrivalStatus {
    color: #79797B;
    font-family: var(--amiri);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.hwmArrivalTitle {
    color: #000525;
    font-family: var(--holland);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.hwmArrivalPrice {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
}

.boatInfoList {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 32px;
    width: fit-content;
}

.boatInfoText {
    color: var(--Text-Gray, #3D3E42);
    font-family: "Segoe UI";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.boatInfoList li {
    position: relative;
}

.boatInfoList li:not(:first-child)::after {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #79797B;
    width: 2px;
    height: 15px;
}

.actualPrice {
    color: #7D1317;
    font-family: var(--holland);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    text-transform: uppercase;
}

.monthlyPrice {
    color: #7A693B;
    font-family: "Segoe UI";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.hwmArrivalSpec {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
}

.hwmArrivalBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: var(--holland);
    background-color: var(--navy);
    text-align: center;
    padding: 12px 16px;
    font-size: 18px;
    color: #FFF;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
}

.hwmArrivalBtn:hover {
    color: var(--white);
}

.hwmArrivalsFoot {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

.hwmBtnMaroon {
    background-color: var(--maroon);
    color: var(--white);
    border: none;
}

.hwmBtnMaroon:hover {
    background-color: #8d171b;
    color: var(--white);
}


/* ============================================================
   SERVICE GRID (dedicated, replaces .hwmArrivals reuse on Service page)
   ============================================================ */
.hwmServiceGrid {
    background-color: var(--white);
    padding: 100px 6.04%;
}

.hwmServiceGridHead {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 240px;
    align-items: flex-start;
    padding: 0 8.54%;
    margin-bottom: 56px;
}

.hwmServiceGridHead .hwmPara {
    max-width: 720px;
}

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

.hwmServiceGridCard {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    transition: transform 0.25s ease;
}

.hwmServiceGridCard:hover {
    transform: translateY(-4px);
}

.hwmServiceGridImg {
    width: 100%;
    aspect-ratio: 520 / 360;
    overflow: hidden;
    margin-bottom: 24px;
}

.hwmServiceGridImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hwmServiceGridCard:hover .hwmServiceGridImg img {
    transform: scale(1.04);
}

.hwmServiceGridTitle {
    font-family: var(--holland);
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 12px;
}

.hwmServiceGridDesc {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
}

/* ============================================================
   SERVICE CENTERS + STORAGE OPTIONS
   ============================================================ */
.hwmServiceStorage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.hwmServiceCard {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

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

.hwmServiceCardOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.40) 60%, #000525 100%);
}

.hwmServiceCardBody {
    position: absolute;
    z-index: 2;
    padding: 0 15px;
    max-width: 600px;
    bottom: 12%;
    left: 8%;
}

.hwmServiceCardBody .hwmH2 {
    margin-bottom: 32px;
}

/* ============================================================
   OUR MARINAS
   ============================================================ */
.hwmMarinas {
    background-color: var(--navy);
    padding: 100px 0 0;
}

.hwmMarinasInner {
    padding: 0;
}

.hwmMarinasHead {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 240px;
    align-items: flex-start;
    padding: 0 14.58%;
    margin-bottom: 60px;
}

.hwmMarinasHead .hwmPara {
    max-width: 720px;
}

.hwmMarinaGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 0 6.04%;
}

.hwmMarinaCard {
    position: relative;
    background-color: var(--navy);
    overflow: hidden;
    aspect-ratio: 560 / 720;
}

.hwmMarinaCard::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50%;
    width: 100%;
    opacity: 0.8;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.00) 0%, #000525 100%);
}

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

.hwmMarinaBody {
    position: absolute;
    left: 5%;
    bottom: 48px;
    padding: 0 15px;
    z-index: 2;
    max-width: 380px;
}

.hwmMarinaBody .hwmH4 {
    font-family: var(--holland);
    font-size: 40px;
    line-height: 32px;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* ============================================================
   CTA BAR (Get Financing / Sell-Trade / Contact)
   ============================================================ */
.hwmCtaBar {
    background-color: var(--white);
    padding: 80px 13.02%;
}

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

.hwmCtaBarItem {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 120px;
    background-color: var(--white);
    border-radius: 4px;
    transition: all 0.25s ease;
    color: var(--navy);
}


.hwmCtaBarIcon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    transition: filter 0.25s ease;
}


.hwmCtaBarText {
    font-family: var(--amiri);
    color: #000525;
    font-family: Amiri;
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
}


/* ============================================================
   INTERIOR PAGES — Service / Sell-Trade
   Page-specific patterns layered on top of the home utilities.
   ============================================================ */



/* Dark CTA strip directly below hero (Service) */
.hwmHeroCta {
    background-color: var(--navy);
    min-height: 200px;
    padding: 24px 12.5%;
    display: flex;
    align-items: flex-start;
}


.hwmHero.hwmHeroPage .hwmHeroInner {
    position: absolute;
    left: 13%;
    top: 50%;
    padding: 0 15px;
    transform: translateY(-50%);
}



.hwmHero.hwmHeroPage .hwmHeroInnerCentered {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0 15px;
    transform: translate(-50%, -50%);
    text-align: center;
}

.hwmBreadcrumb {
    font-family: var(--regular-segoe-ui);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--white);
    opacity: 0.8;
    margin-bottom: 24px;
}

.hwmHeroBreadcrumb {
    position: absolute;
    top: 14px;
    left: 14.58%;
    z-index: 3;
    margin: 0;
}

.hwmHeroSub {
    margin-top: 32px;
}

.hwmHeroDesc {
    margin-top: 16px;
    opacity: 0.9;
}

.hwmHero .hwmHeroBtn {
    margin-top: 32px;
}

.hwmMt-16 {
    margin-top: 16px;
}

/* --- Generic 50/50 split section --- */
.hwmSplit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 40px 10.42%;
    width: 100%;
}

.hwmSplit--dark {
    background-image: url("../images/service/service-img-3.jpg");
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hwmSplit--dark::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background-color: #000525CC;
    width: 100%;
    height: 100%;
}

.hwmSplit--dark * {
    position: relative;
    z-index: 2;
}


.hwmSplit--light {
    background-color: var(--white);
}

.hwmSplitImg {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.hwmSplitImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hwmSplitBody {
    max-width: 600px;
}

.hwmSplitBody .hwmH2 {
    margin-bottom: 24px;
}

.hwmSplitBody .hwmPara {
    margin-bottom: 28px;
}

.hwmSplit--dark .hwmSplitBody .hwmPara {
    opacity: 0.9;
}

/* --- 3-column card grid (Our Services) --- */
.hwmCardGrid {
    display: grid;
    gap: 30px;
    padding: 0 12.5%;
}

.hwmCardGrid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.hwmCardItem {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hwmCardItemImg {
    position: relative;
    padding-top: 66%;
    flex-shrink: 0;
}

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

.hwmCardItemBody {
    background-color: var(--f7);
    padding: 32px;
    flex: 1;
}

.hwmCardItemIcon {
    width: 38px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 16px;
    display: block;
}

.hwmCardTitle {
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Bold paragraph utility */
.hwmParaBold {
    font-family: var(--bold-segoe-ui);
    font-weight: 700;
}

/* --- Horizontal gallery carousel (Mercury Award images) --- */
/*
 * .hwmServiceGrid has padding: 100px 6.04% on each side.
 * Negative margin-right pulls the gallery flush to the right viewport edge.
 * -6.04vw of right padding / 87.92% content width = -6.87% of content width.
 */
.hwmGallery {
    padding-top: 56px;
    margin-right: -6.87%;
    overflow: hidden;
}

.hwmAwardCarousel {
    width: 100%;
}

.hwmGalleryItem {
    position: relative;
    padding-top: 43%;
}

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

/* --- Travel Lift (dark section, centered head, 2 images) --- */
.hwmTravelLift {
    background-color: var(--navy);
    padding: 100px 6.04%;
}

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

.hwmTravelLiftHead .hwmH2 {
    margin-bottom: 20px;
}

.hwmTravelLiftHead .hwmPara {
    opacity: 0.85;
}

.hwmTravelLiftGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1500px;
    margin: 0 auto;
}

.hwmTravelLiftItem {
    position: relative;
    aspect-ratio: 720 / 480;
    overflow: hidden;
    border-radius: 4px;
    display: block;
}

.hwmTravelLiftItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hwmTravelLiftPlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}


.hwmTravelLiftItem:hover .hwmTravelLiftPlay {
    background-color: transparent;
}

/* --- Brand logo strip --- */
.hwmLogoStrip {
    background-color: var(--white);
    padding: 60px 6.04%;
}

.hwmLogoStripInner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px 100px;
    max-width: 1240px;
    margin: 0 auto;
}

.hwmLogoStripItem {
    font-family: var(--holland);
    font-size: 36px;
    line-height: 1;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--navy);
}

.hwmLogoStripImg {
    height: 64px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
}

/* --- Steps section (How It Works) --- */
.hwmSteps {
    background-color: var(--f7);
    padding: 80px 6.04%;
}

.hwmStepsHead {
    text-align: center;
    margin-bottom: 56px;
}

.hwmStepsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    max-width: 1552px;
    margin: 0 auto;
    position: relative;
}

.hwmStepItem {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.hwmStepNum {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--tan);
    color: var(--white);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--holland);
    font-size: 20px;
    line-height: 1;
}

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

.hwmStepBody .hwmH4 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 10px;
}

/* --- Reasons (Why sell/trade — dark bg with 2x2 grid) --- */
.hwmReasons {
    position: relative;
    background-color: var(--navy);
    padding: 100px 6.04%;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
}

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

.hwmReasonsOverlay {
    position: absolute;
    inset: 0;
    background: #000525B3;
    opacity: 0.7;
}

.hwmReasonsInner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    max-width: 1588px;
    margin: 0 auto;
    align-items: flex-start;
}

.hwmReasonsHead .hwmH2 {
    margin-bottom: 32px;
}

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

.hwmReason {
    padding-left: 24px;
    border-left: 2px solid rgba(255, 255, 255, 0.25);
}

.hwmReason .hwmH4 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 12px;
}

.hwmReason .hwmPara {
    opacity: 0.85;
}

/* --- Form section (Request Service / Submit Boat) --- */
.hwmFormSection {
    padding: 100px 6.04%;
}

.hwmFormSection--dark {
    background-color: var(--navy);
}

.hwmFormSection--light {
    background-color: var(--white);
}

.hwmFormGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1050px;
    margin: 0 auto;
    align-items: flex-start;
}

.hwmFormInfo .hwmH2 {
    margin-bottom: 16px;
}

.hwmContactBlock {
    margin-top: 32px;
}

.hwmContactBlock .hwmH4 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 6px;
}

.hwmContactPhone {
    display: block;
    font-family: var(--holland);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 6px;
    transition: opacity 0.2s ease;
}

.hwmContactPhone:hover {
    color: var(--white);
    opacity: 0.85;
}

.hwmContactPhone--dark {
    color: var(--navy);
}

.hwmContactPhone--dark:hover {
    color: var(--navy);
}

.hwmFormCard {
    padding: 32px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 5, 37, 0.08);
}

.hwmField {
    margin-bottom: 16px;
}

.hwmFieldRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hwmInput {
    width: 100%;
    height: 48px;
    border: 1px solid var(--d9);
    border-radius: 4px;
    background-color: var(--white);
    padding: 0 18px;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--blackish);
    outline: none;
    transition: border-color 0.2s ease;
}

select.hwmInput {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%),
        linear-gradient(135deg, var(--navy) 50%, transparent 50%);
    background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
    cursor: pointer;
}

.hwmInput::placeholder {
    color: rgba(27, 32, 38, 0.6);
}

.hwmInput:focus {
    border-color: var(--navy);
}

.hwmInput--textarea {
    height: 96px;
    padding: 12px 18px;
    resize: vertical;
    line-height: 24px;
}

.hwmRadioLabel {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
    margin: 4px 0 12px;
}

.hwmRadioGroup {
    display: flex;
    gap: 32px;
    margin-bottom: 16px;
}

.hwmRadio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    color: var(--text-gray);
    margin: 0;
}

.hwmRadio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #7A693B;
    cursor: pointer;
}

.hwmFormSubmit {
    margin-top: 8px;
    min-width: 160px;
}

.hwmBtnPrimary.hwmFormSubmit {
    min-width: 160px;
    align-self: center;
    margin-top: 16px;
}

/* ============================================================
   INTERIOR PAGES — Contact
   ============================================================ */


.hwmHero.hwmHeroPage--split .hwmHeroInner {
    display: grid;
    grid-template-columns: 1fr minmax(420px, 520px);
    gap: 80px;
    align-items: center;
    padding: 0 8.54%;
}

.contact-banner-content .hwmHeroBody {
    max-width: unset;
}

.hwmHeroBody {
    max-width: 680px;
}

.hwmHeroForm {
    background-color: var(--f7);
    border: 1px solid var(--d9);
    border-radius: 4px;
    padding: 40px 40px 32px;
    width: 100%;
}

.hwmHeroFormTitle {
    text-align: center;
    color: var(--tan);
    margin-bottom: 28px;
}

.hwmHeroForm .hwmField:last-of-type {
    margin-bottom: 24px;
}

.hwmHeroFormSubmit {
    display: flex;
    justify-content: center;
}

/* --- Locations section --- */
.hwmLocations {
    background-color: var(--navy);
    padding: 100px 0 120px;
    margin-bottom: 80px;
}

.hwmLocationsHead {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 120px;
    align-items: flex-start;
    padding: 0 14.58%;
    margin-bottom: 56px;
}

.hwmLocationsHead .hwmPara {
    max-width: 720px;
}

.hwmLocationGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 0 6.04%;
}

.hwmLocationCard {
    display: flex;
    flex-direction: column;
}

.hwmLocationMedia {
    position: relative;
    aspect-ratio: 560 / 720;
    overflow: hidden;
    border-radius: 4px;
}

.hwmLocationMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hwmLocationMediaOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0) 35%, rgba(0, 5, 37, 0.92) 100%);
}

.hwmLocationMediaInfo {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 24px;
    max-width: 380px;
    z-index: 2;
}

.hwmLocationName {
    font-family: var(--holland);
    font-size: 36px;
    line-height: 36px;
    letter-spacing: 0.5px;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.hwmLocationServices {
    font-family: var(--bold-segoe-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--white);
}

.hwmLocationDetails {
    padding: 28px 8px 0;
}

.hwmLocationRow {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.hwmLocationRow svg {
    flex-shrink: 0;
    margin-top: 4px;
}

.hwmLocationRow--phone svg {
    margin-top: 8px;
}

.hwmLocationAddress {
    color: var(--white);
    text-decoration: underline;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
}

.hwmLocationAddress:hover {
    color: var(--white);
    opacity: 0.85;
}

.hwmLocationPhoneLink {
    font-family: var(--holland);
    font-size: 32px;
    line-height: 32px;
    color: var(--tan);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hwmLocationPhoneLink:hover {
    color: var(--tan);
    opacity: 0.85;
}

.hwmLocationHoursStack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hwmLocationHours strong {
    display: block;
    font-family: var(--bold-segoe-ui);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
}

.hwmLocationHours span {
    display: block;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
}

/* ============================================================
   INTERIOR PAGES — Financing
   ============================================================ */

/* --- Service hero: fade image into the dark CTA strip below --- */
.hwmHero.hwmHeroPage--service .hwmHeroOverlay {
    background: linear-gradient(180deg,
            rgba(0, 5, 37, 0.25) 0%,
            rgba(0, 5, 37, 0.45) 25%,
            rgba(0, 5, 37, 0.7) 45%,
            var(--navy) 70%,
            var(--navy) 100%);
}

/* --- Hero split: title left / description right --- */
.hwmHero.hwmHeroPage--finance .hwmHeroOverlay {
    background: linear-gradient(180deg,
            rgba(0, 5, 37, 0.25) 0%,
            rgba(0, 5, 37, 0.45) 25%,
            rgba(0, 5, 37, 0.7) 45%,
            var(--navy) 70%,
            var(--navy) 100%);
}

.hwmHero.hwmHeroPage--finance .hwmHeroInner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.hwmHeroDescBlock {
    max-width: 560px;
}

.hwmHeroDescLabel {
    font-family: var(--bold-segoe-ui);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 16px;
}

/* --- Why Finance section --- */
.hwmWhy {
    background-color: var(--white);
    padding: 100px 6.04%;
}

.hwmWhyHead {
    text-align: center;
    margin-bottom: 56px;
}

.hwmWhyHead .hwmH2 {
    max-width: 900px;
    margin: 0 auto;
}

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

.hwmWhyItem {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hwmWhyItemIcon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--tan);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.hwmWhyItem p {
    color: #000525;
    font-family: var(--regular-segoe-ui);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
}

.hwmWhyFoot {
    display: flex;
    justify-content: center;
}

/* --- Stat + Calculator section --- */
.hwmStatCalc {
    position: relative;
    overflow: hidden;
    background-color: var(--navy);
    margin-bottom: 80px;
}

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

.hwmStatCalcOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 5, 37, 0.85) 0%, rgba(0, 5, 37, 0.4) 100%);
}

.hwmStatCalcInner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    padding: 120px 16.54%;
}

.hwmStat {
    color: var(--white);
    font-family: var(--holland);
    font-size: 80px;
    line-height: 72px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    max-width: 520px;
}

.hwmCalc {
    background-color: var(--f7);
    border: 1px solid var(--d9);
    border-radius: 4px;
    padding: 40px;
    max-width: 520px;
    width: 100%;
    margin-left: auto;
    box-shadow: 0 4px 20px rgba(0, 5, 37, 0.12);
}

.hwmCalcTitle {
    text-align: center;
    color: var(--navy);
    margin-bottom: 28px;
}

.hwmCalcSubmit {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}


/* ============================================================
   BUTTONS — TAN VARIANT
   ============================================================ */
.hwmBtnTan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 4px;
    background-color: var(--tan);
    color: var(--white);
    border: 2px solid rgba(122, 105, 59, 0.6);
    min-width: 160px;
    font-family: var(--holland);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
}

.hwmBtnTan:hover {
    background-color: #8a7944;
    border-color: var(--tan);
    color: var(--white);
}

/* ============================================================
   INTERIOR PAGES — Parts
   ============================================================ */


.hwmHero.hwmHeroPage--parts .hwmHeroOverlay {
    background: linear-gradient(90deg, var(--navy) 0%, rgba(0, 5, 37, 0.4) 100%);
}

.hwmHero.hwmHeroPage--parts .hwmHeroInner {
    justify-content: center;
    align-items: flex-start;
}

.hwmHero.hwmHeroPage--parts .hwmHeroSubLabel {
    margin-top: 32px;
    max-width: 720px;
}

/* --- Inspection list (Parts) --- */
.hwmInspectList {
    list-style: disc;
    padding-left: 22px;
    margin-top: 16px;
}

.hwmInspectList li {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
    margin-bottom: 8px;
}

.hwmInspectList li strong {
    font-family: var(--bold-segoe-ui);
    font-weight: 700;
    color: var(--text-gray);
}

/* --- Browse Parts Categories grid --- */
.hwmCategories {
    background-color: var(--white);
    padding: 100px 6.04%;
}

.hwmCategoriesHead {
    text-align: center;
    margin-bottom: 56px;
}

.hwmCategoriesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    max-width: 1520px;
    margin: 0 auto;
}

.hwmCategoryCard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hwmCategoryImg {
    position: relative;
    width: 100%;
    aspect-ratio: 484 / 280;
    overflow: hidden;
    border-radius: 4px;
}

.hwmCategoryImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hwmCategoryCard:hover .hwmCategoryImg img {
    transform: scale(1.04);
}

.hwmCategoryImg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0) 0%, rgba(0, 5, 37, 0.7) 100%);
    pointer-events: none;
}

.hwmCategoryName {
    position: absolute;
    left: 24px;
    bottom: 20px;
    z-index: 2;
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--white);
    text-transform: uppercase;
    margin: 0;
}

.hwmCategoryDesc {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
    margin: 0;
}

/* --- Callout strip (We Can Get It For You) --- */
.hwmCallout {
    background-color: var(--f7);
    padding: 50px 6.04%;
}

.hwmCalloutInner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.hwmCalloutInner .hwmH2 {
    margin-bottom: 16px;
}

/* --- Ordering Parts (navy bg, info + form) --- */
.hwmOrderParts {
    background-color: var(--navy);
    padding: 100px 6.04%;
}

.hwmOrderPartsInner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1050px;
    margin: 0 auto;
    align-items: flex-start;
}

.hwmOrderPartsInfo .hwmH2 {
    margin-bottom: 20px;
}

.hwmOrderPartsInfo .hwmPara {
    opacity: 0.9;
    margin-bottom: 36px;
    max-width: 460px;
}

.hwmOrderLoc {
    margin-bottom: 24px;
}

.hwmOrderLocLabel {
    font-family: var(--amiri);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 6px;
}

.hwmOrderLocPhone {
    display: block;
    font-family: var(--holland);
    font-size: 40px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 6px;
    transition: opacity 0.2s ease;
}

.hwmOrderLocPhone:hover {
    color: var(--white);
    opacity: 0.85;
}

.hwmOrderLocAddress {
    display: inline-block;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
    text-decoration: underline;
}

.hwmOrderLocAddress:hover {
    color: var(--white);
    opacity: 0.85;
}

.hwmOrderForm {
    width: 100%;
    max-width: 440px;
    margin-left: auto;
}

.hwmOrderForm .hwmField {
    margin-bottom: 14px;
}

.hwmOrderFormSubmit {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

/* ============================================================
   INTERIOR PAGES — About
   ============================================================ */

.hwmHero.hwmHeroPage--about .hwmHeroOverlay {
    background: linear-gradient(180deg, rgba(0, 5, 37, 0) 0%, var(--navy) 100%);
}

.hwmHero.hwmHeroPage--about .hwmHeroInner {
    justify-content: center;
    align-items: flex-start;
}

.hwmHero.hwmHeroPage--about .hwmH1 {
    max-width: 900px;
}

.hwmHero.hwmHeroPage--about .hwmHeroBtn {
    margin-top: 40px;
}

/* --- About hero secondary panel (navy, sits directly below hero) --- */
.hwmAboutSubHero {
    background-color: var(--navy);
    padding: 80px 14.58% 100px;
    margin-bottom: 40px;
}

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

.hwmAboutSubHero .hwmH2 {
    max-width: 500px;
}

.hwmAboutSubHeroLabel {
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 16px;
}

.hwmAboutSubHero .hwmPara {
    color: var(--white);
    opacity: 0.9;
    max-width: 720px;
}

/* --- About culture/quote — extra typography helpers --- */
.hwmSubhead {
    font-family: var(--amiri);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--tan);
    margin: 16px 0 24px;
}

.hwmCultureList {
    padding-left: 0;
    margin-top: 16px;
    margin-bottom: 28px;
    list-style: disc;
    margin-left: 24px;
}

.hwmCultureList li {
    position: relative;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
    margin-bottom: 8px;
}


.hwmCultureList li strong {
    font-family: var(--bold-segoe-ui);
    font-weight: 700;
    color: var(--text-gray);
}

.hwmQuote {
    position: relative;
    padding-left: 24px;
    margin: 24px 0;
    font-family: var(--regular-segoe-ui);
    font-size: 18px;
    font-style: italic;
    line-height: 28px;
    color: var(--navy);
    max-width: 560px;
}

.hwmQuote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background-color: var(--tan);
}

.hwmQuote em {
    display: block;
    font-style: italic;
    font-size: 18px;
    line-height: 28px;
    margin-top: 8px;
    color: var(--navy);
    font-weight: 400;
}


/* ============================================================
   INTERIOR PAGES — Live Cams / Videos / Staff
   ============================================================ */

/* --- Hero button row (Staff) --- */
.hwmHeroBtnRow {
    position: absolute;
    left: 50%;
    bottom: -24px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 3;
    width: max-content;
    max-width: 100%;
    padding: 0 16px;
    flex-wrap: wrap;
}


/* --- Live Cams: 2-up grid in navy section --- */
.hwmCams {
    background-color: var(--navy);
    padding: 0 12.92% 100px;
    margin-top: -80px;
    z-index: 2;
    margin-bottom: 80px;
}

.hwmCamsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}

.hwmCamCard {
    position: relative;
}

.hwmCamCard::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
}

.hwmCamMedia {
    position: relative;
    padding-top: 56%;
    overflow: hidden;
    cursor: pointer;
    background-color: #1a1f3a;
    margin-bottom: 16px;
    min-height: 400px;
}

.hwmCamMedia .camMedia {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hwmCamCard:hover .hwmCamMedia img {
    transform: scale(1.03);
}

.hwmCamPlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding-left: 4px;
    border: none;
    outline: none;
    background: transparent;
    z-index: 5;
}

.hwmCamTitle {
    font-family: var(--holland);
    font-size: 32px;
    line-height: 36px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--white);
    margin: 0;
}

/* --- Videos: filter tabs + grid --- */
.hwmVideoFilters {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.hwmVideoFilter {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--holland);
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--white);
    transition: color 0.2s ease;
}

.hwmVideoFilter--active {
    color: var(--tan);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hwmVideoFilter:hover {
    color: var(--tan);
}

.hwmVideos {
    background-color: var(--navy);
    padding: 80px 11.46% 100px;
    margin-top: -150px;
    margin-bottom: 80px;
}

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

/* ---- Videos Loader ---- */
.hwmVideosLoader {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    gap: 20px;
}

.hwmVideosSpinner {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--tan);
    border-radius: 50%;
    animation: hwmSpin 0.8s linear infinite;
}

@keyframes hwmSpin {
    to { transform: rotate(360deg); }
}

.hwmVideosLoaderText {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.3px;
}

.hwmVideosError {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 0;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
}


.hwmVideoCard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;
}

.hwmVideoThumb {
    position: relative;
    aspect-ratio: 440 / 280;
    background-color: #c4c4c4;
    overflow: hidden;
}

.hwmVideoThumb iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hwmVideoThumb .hwmVideoMedia {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hwmVideoThumbPlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: none;
    outline: none;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background-color 0.2s ease;
}

.hwmVideoCard:hover .hwmVideoThumbPlay {
    background-color: var(--white);
}

.hwmVideoTitle {
    font-family: var(--bold-segoe-ui);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--white);
    margin: 0;
}

/* --- Staff: section heading with rules + card grid --- */
.hwmStaff {
    background-color: var(--white);
    padding: 100px 6.04% 0;
}

.hwmStaff:last-of-type {
    padding-bottom: 100px;
}

.hwmStaffSectionHead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    max-width: 1520px;
    margin: 0 auto 56px;
}

.hwmStaffRule {
    flex: 1 1 0;
    height: 1px;
    background-color: var(--anchor-gray);
    max-width: 320px;
    min-width: 40px;
}

.hwmStaffSectionHead .hwmH2 {
    flex: 0 0 auto;
    margin: 0;
}

.hwmStaffGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 400px));
    justify-content: center;
    gap: 64px;
    max-width: 1520px;
    margin: 0 auto;
}

.hwmStaffCard {
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
}

.hwmStaffImg {
    position: relative;
    padding-top: 125%;
}

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

.hwmStaffName {
    margin: 24px 0 4px;
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--navy);
    text-transform: uppercase;
}

.hwmStaffTitle {
    margin: 0;
    font-family: var(--bold-segoe-ui);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--text-gray);
}

/* ---------- Staff detail modal ---------- */
.hwmStaffModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
}

.hwmStaffModal.isOpen {
    display: block;
}

.hwmStaffModalOverlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 5, 37, 0.55);
}

.hwmStaffModalDialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: min(92%, 940px);
    max-height: 90vh;
    background-color: var(--white);
    box-shadow: 0 24px 64px rgba(0, 5, 37, 0.3);
    overflow: hidden;
}

.hwmStaffModalImg {
    flex: 0 0 40%;
    background-color: rgba(217, 217, 217, 0.6);
}

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

.hwmStaffModalBody {
    flex: 1 1 auto;
    padding: 56px 56px 56px 48px;
    overflow-y: auto;
}

.hwmStaffModalClose {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: 32px;
    line-height: 1;
    color: var(--anchor-gray);
    cursor: pointer;
    z-index: 2;
}

.hwmStaffModalClose:hover {
    color: var(--navy);
}

.hwmStaffModalName {
    margin: 0 0 12px;
    font-family: var(--holland);
    font-size: 42px;
    line-height: 1.05;
    color: var(--navy);
    text-transform: uppercase;
}

.hwmStaffModalMeta {
    margin: 0 0 24px;
    font-family: var(--bold-segoe-ui);
    font-size: 18px;
    line-height: 28px;
    color: var(--text-gray);
}

.hwmStaffModalMeta .hwmStaffModalPost {
    font-weight: 600;
}

.hwmStaffModalMeta .hwmStaffModalSep {
    margin: 0 8px;
    color: var(--anchor-gray);
}

.hwmStaffModalMeta .hwmStaffModalLocation {
    color: var(--anchor-gray);
}

.hwmStaffModalPhone {
    display: inline-block;
    margin: 0 0 24px;
    font-family: var(--holland);
    font-size: 30px;
    letter-spacing: 1px;
    color: var(--tan);
    text-decoration: none;
}

.hwmStaffModalPhone:hover {
    color: var(--tan);
    text-decoration: underline;
}

.hwmStaffModalBio {
    margin: 0;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 28px;
    color: var(--text-gray);
    overflow: auto;
    max-height: calc(300px - 60px);
    height: 100%;
}

.hwmStaffModalBio::-webkit-scrollbar {
    width: 4px;
}

.hwmStaffModalBio::-webkit-scrollbar-thumb {
    background-color: var(--navy);
}

body.hwmModalOpen {
    overflow: hidden;
}


/* ============================================================
   INTERIOR PAGES — Blog / Events
   ============================================================ */

/* --- 40px Holland navy utility (Figma "Listing Title") --- */
.hwmH3Listing {
    font-family: var(--holland);
    font-size: 40px;
    line-height: normal;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--navy);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* --- Listing filters (blog/events) --- */
.hwmListFilters {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 56px 12.92% 56px;
    flex-wrap: wrap;
}

.hwmListFilter {
    background: none;
    border: none;
    padding: 0 0 6px;
    cursor: pointer;
    font-family: var(--amiri);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--navy);
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease;
}

.hwmListFilter--active {
    color: var(--maroon);
    border-bottom-color: var(--maroon);
}

.hwmListFilter:hover {
    color: var(--maroon);
}

/* --- Article grid (blog 2-col / events 3-col) --- */
.hwmArticleGrid {
    display: grid;
    gap: 72px 64px;
    padding: 0 12.92% 100px;
}

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

.hwmArticleGrid--3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 32px;
    padding: 0 12.29% 100px;
}

.hwmArticleCard {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.home-brand-description * {
    color: var(--white) !important;
    font-family: var(--regular-segoe-ui) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.scrolled-para::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hwmArticleCardImg {
    width: 100%;
    aspect-ratio: 680 / 363;
    background-color: #c4c4c4;
    overflow: hidden;
}

.hwmArticleGrid--3 .hwmArticleCardImg {
    aspect-ratio: 440 / 235;
}

.hwmArticleCardImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hwmArticleCard:hover .hwmArticleCardImg img {
    transform: scale(1.03);
}

.hwmArticleCard .hwmH4 {
    margin: 8px 0 0;
}

.hwmArticleCard .hwmH3Listing {
    margin: 0;
}

.hwmArticleCard .hwmPara {
    margin: 0;
}

/* --- Blog detail --- */
.hwmDetailCrumb {
    padding: 24px 6.04% 0;
    font-family: var(--regular-segoe-ui);
    font-size: 14px;
    line-height: 20px;
    color: var(--anchor-gray);
}

.hwmBlogDetail {
    padding: 40px 6.04% 100px;
}

.hwmBlogDetailInner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 80px;
    max-width: 1640px;
    margin: 0 auto;
    align-items: flex-start;
}

.hwmBlogMain {
    min-width: 0;
}

.hwmBlogMainImg {
    width: 100%;
    aspect-ratio: 1000 / 500;
    background-color: #c4c4c4;
    margin-bottom: 40px;
    overflow: hidden;
}

.hwmBlogMainImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hwmBlogMeta {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: rgba(61, 62, 66, 0.6);
    margin: 16px 0;
    text-transform: uppercase;
}

.hwmBlogBody h1,
.hwmBlogBody h2 {
    font-family: var(--holland);
    font-size: 45px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.hwmBlogBody h3,
.hwmBlogBody h4,
.hwmBlogBody h5,
.hwmBlogBody h6 {
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--navy);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hwmBlogBody p {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
    margin-bottom: 16px;
}

.hwmBlogBody p:last-child {
    margin-bottom: 0;
}

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

.hwmBlogSidebarTitle {
    margin: 0 0 8px;
}

.hwmSimilarCard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.hwmSimilarImg {
    width: 100%;
    aspect-ratio: 360 / 200;
    background-color: #c4c4c4;
    overflow: hidden;
}

.hwmSimilarImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hwmSimilarTitle {
    margin: 0;
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--navy);
    text-transform: uppercase;
}

/* ============================================================
   INTERIOR PAGES — Event Detail
   ============================================================ */

/* --- Centered hero variant --- */
.hwmHero.hwmHeroPage--center .hwmHeroInner {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hwmHero.hwmHeroPage--center .hwmH1,
.hwmHero.hwmHeroPage--center .hwmPara {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.hwmHero.hwmHeroPage--center .hwmHeroSub {
    margin-top: 24px;
}

.hwmHero.hwmHeroPage--center .hwmHeroBtn {
    margin-top: 32px;
    align-self: center;
    min-width: 300px;
}

/* --- Event meta row (Where / When / About) --- */
.hwmEventMeta {
    background-color: var(--f7);
    padding: 64px 10.42%;
}

.hwmEventMetaInner {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 80px;
    max-width: 1520px;
    margin: 0 auto;
    align-items: flex-start;
}

.hwmEventMetaLabel {
    font-family: var(--amiri);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1.2px;
    color: var(--tan);
    text-transform: uppercase;
    margin-bottom: 24px;
}

.hwmEventMetaValue {
    font-family: var(--holland);
    font-size: 56px;
    line-height: 48px;
    color: var(--navy);
    text-transform: uppercase;
    margin: 0 0 16px;
}

/* --- Event features: image + heading + copy, 2x2 --- */
.hwmEventFeatures {
    padding: 80px 10.42%;
}

.hwmEventFeaturesGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 80px;
    row-gap: 56px;
    max-width: 1520px;
    margin: 0 auto;
}

.hwmEventFeatureImg {
    width: 100%;
    aspect-ratio: 720 / 440;
    background-color: #c4c4c4;
    overflow: hidden;
    margin-bottom: 24px;
}

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

.hwmEventFeatureItem .hwmH3Listing {
    margin: 0 0 16px;
}

.hwmEventFeaturesFoot {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

/* --- Event brands strip --- */
.hwmEventBrands {
    background-color: var(--f7);
    padding: 80px 6.04%;
    text-align: center;
}

.hwmEventBrandsHead {
    margin-bottom: 40px;
}

.hwmEventBrandsGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
}

.hwmEventBrandsItem {
    height: 100px;
    background-color: var(--d9);
}

/* --- Event featured inventory horizontal scroll (reuse hwmArrivalCard) --- */
.hwmEventInventory {
    padding: 100px 0 80px;
}

.hwmEventInventoryHead {
    padding: 0 6.04%;
    max-width: 1800px;
    margin: 0 auto 32px;
}

.hwmEventInventoryStrip {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.hwmEventInventoryTrack {
    display: flex;
    gap: 24px;
    padding-left: 116px;
    width: 100%t;
}

.hwmEventInventoryTrack .hwmArrivalImg {
    position: relative;
    padding-top: 45%;
}

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

.brand-page-slider .owl-nav button {
    font-size: 50px !important;
    line-height: 50px;
    margin-top: -11px;
}

.brand-page-slider .owl-nav button span {
    font-size: 50px !important;
    line-height: 50px;
    margin-top: -11px;
}

.brand-page-slider .owl-nav .owl-prev {
    position: absolute;
    top: calc(629px / 2);
    transform: translateY(-50%);
    z-index: 5 !important;
    width: 48px;
    height: 80px;
    border-radius: 4px;
    background-color: var(--navy) !important;
    color: var(--white) !important;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 5, 37, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease;
    left: -70px !important;
}

.brand-page-slider .owl-nav .owl-next {
    position: absolute;
    top: calc(629px / 2);
    transform: translateY(-50%);
    z-index: 5 !important;
    width: 48px;
    height: 80px;
    border-radius: 4px;
    background-color: var(--navy) !important;
    color: var(--white) !important;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 5, 37, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease;
    right: 50px !important;
}

/* --- Event gallery: full-bleed 3x2 grid --- */
.hwmEventGallery {
    width: 100%;
}

.hwmEventGalleryGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.hwmEventGalleryItem {
    aspect-ratio: 638 / 397;
    overflow: hidden;
    padding: 2px;
}

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

/* --- Event hero: solid navy background (per Figma) --- */
.hwmHeroPage--event {
    min-height: 600px;
}

.hwmHeroPage--event .hwmHeroInner {
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    padding: 0 15px !important;
    transform: translate(-50%, -50%) !important;
    text-align: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* --- Event inventory carousel (Owl) — reuse arrival arrows --- */
.hwmEventInventory .hwmArrivalsCarouselWrap {
    padding: 0 6.04%;
}

.hwmEventInventory .hwmArrivalsPrev {
    left: 40px;
}

.hwmEventInventory .hwmArrivalsNext {
    right: 40px;
}

/* Equal-height cards: stretch Owl stage/items so every card matches the tallest */
.hwmEventCarousel.owl-carousel .owl-stage {
    display: flex;
}

.hwmEventCarousel.owl-carousel .owl-item {
    display: flex;
    flex: 0 0 auto;
}

.hwmEventCarousel .hwmArrivalCard {
    height: 100%;
    width: 100%;
}


/* ============================================================
   INTERIOR PAGES — Brand / Storage / Custom Hull Graphics
   ============================================================ */

/* --- Hero variant: brand (logo left, body right, dark bg) --- */
.hwmHero.hwmHeroPage--brand {
    background-color: var(--navy);
}

.hwmHero.hwmHeroPage--brand .hwmHeroOverlay {
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.35) 0%, var(--navy) 100%);
}

.hwmHero.hwmHeroPage--brand .hwmHeroInner {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 80px;
    align-items: center;
}

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

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

.hwmBrandHeroBody .hwmBrandHeroLabel {
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--tan) !important;
    text-transform: uppercase;
    margin: 16px 0;
}

.hwmBrandHeroBtns {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Tan promotion strip --- */
.hwmPromoStrip {
    background-color: var(--tan);
    padding: 48px 6.04%;
    text-align: center;
}

.hwmPromoStrip p {
    font-family: var(--bold-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--white);
    margin: 0;
}

/* --- Model section (Tiara series + 2x3 grid) --- */
.hwmModels {
    background-color: var(--white);
    padding: 100px 6.04%;
    text-align: center;
}

.hwmModelsHead {
    margin-bottom: 32px;
}

.hwmModelsTabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.hwmModelsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1620px;
    margin: 0 auto;
}

.hwmModelCard {
    position: relative;
    aspect-ratio: 460 / 240;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background-color: #c4c4c4;
}

.hwmModelCard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hwmModelCard:hover img {
    transform: scale(1.04);
}

.hwmModelCard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0) 0%, rgba(0, 5, 37, 0.65) 100%);
    pointer-events: none;
}

.hwmModelCardSize {
    position: absolute;
    left: 24px;
    bottom: 20px;
    z-index: 2;
    font-family: var(--holland);
    font-size: 56px;
    line-height: 48px;
    color: var(--white);
    text-transform: uppercase;
    margin: 0;
}

/* --- Brand horizontal image strip (7 images full-width) --- */
.hwmBrandStrip {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.hwmBrandStripTrack {
    display: flex;
    width: max-content;
}

.hwmBrandStripItem {
    flex: 0 0 600px;
    height: 400px;
    overflow: hidden;
}

.hwmBrandStripItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Inventory section heading + buttons --- */
.hwmInventorySection {
    background-color: var(--white);
    padding: 80px 0 0;
    text-align: center;
}

.hwmInventoryHead {
    margin-bottom: 24px;
}

.hwmInventoryBtnRow {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

/* --- Hero centered button pair (Storage) --- */
.hwmHeroBtnPair {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    align-self: center;
}

.hwmHero.hwmHeroPage--center .hwmHeroBtnPair {
    align-self: center;
}

/* --- Storage "Ways to store" 2x2 grid --- */
.hwmWays {
    background-color: var(--white);
    padding: 100px 6.04%;
}

.hwmWaysHead {
    text-align: center;
    margin-bottom: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--d9);
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.hwmWaysGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
}

.hwmWayCard {
    display: flex;
    flex-direction: column;
}

.hwmWayCardImg {
    width: 100%;
    aspect-ratio: 640 / 400;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 32px;
}

.hwmWayCardImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hwmWayCardTitle {
    font-family: var(--holland);
    font-size: 40px;
    line-height: 32px;
    color: var(--navy);
    text-transform: uppercase;
    margin: 0 0 16px;
    letter-spacing: 0.5px;
}

/* --- Storage Locations dark section --- */
.hwmStorageLocs {
    background-color: var(--navy);
    padding: 100px 6.04%;
}

.hwmStorageLocsHead {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: flex-start;
    margin-bottom: 56px;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
}

.hwmStorageLocsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1680px;
    margin: 0 auto;
}

.hwmStorageLocCard {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.hwmStorageLocCardImg {
    position: relative;
    padding-top: 100%;
    margin-bottom: 32px;
}

.hwmStorageLocCardImg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hwmStorageLocCard:hover .hwmStorageLocCardImg img {
    transform: scale(1.04);
}

.hwmStorageLocCardTitle {
    font-family: var(--holland);
    font-size: 40px;
    line-height: 32px;
    color: var(--white);
    text-transform: uppercase;
    margin: 0 0 20px;
    letter-spacing: 0.5px;
}

.hwmStorageLocCardTag {
    font-family: var(--amiri);
    font-size: 24px;
    line-height: 32px;
    color: var(--tan);
    text-transform: uppercase;
    letter-spacing: -1.2px;
    margin: 0 0 24px;
}

.hwmStorageLocCardCapacity {
    font-family: var(--bold-segoe-ui);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--white);
    margin: 0 0 12px;
}

.hwmStorageLocCardDesc {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
    margin: 0;
}

/* --- Storage Quote section --- */
.hwmQuoteSection {
    position: relative;
    padding: 100px 12.5%;
    background-color: var(--navy);
    overflow: hidden;
}

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

.hwmQuoteOverlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 5, 37, 0.75);
}

.hwmQuoteInner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.hwmQuoteSection .hwmH2 {
    margin-bottom: 32px;
}

.hwmQuoteText {
    font-family: var(--regular-segoe-ui);
    font-style: italic;
    font-size: 22px;
    line-height: 36px;
    color: var(--white);
    padding-top: 24px;
    border-top: 2px solid var(--tan);
    max-width: 880px;
    margin: 0 auto;
}

/* --- Storage Request (light f7 bg variant of hwmOrderParts) --- */
.hwmOrderParts--light {
    background-color: var(--f7);
}

.hwmOrderParts--light .hwmH2,
.hwmOrderParts--light .hwmPara,
.hwmOrderParts--light .hwmOrderLocPhone {
    color: var(--navy);
}

.hwmOrderParts--light .hwmOrderLocAddress {
    color: var(--text-gray);
}

.hwmOrderParts--light .hwmOrderForm .hwmInput {
    background-color: var(--white);
}

/* --- Why Finance grid 4-col modifier --- */
.hwmWhyGrid--4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1620px;
    gap: 24px 40px;
}

/* --- Before / After tan section --- */
.hwmBeforeAfter {
    background-color: var(--tan);
    padding: 80px 6.04%;
    text-align: center;
}

.hwmBeforeAfterHead {
    color: var(--white);
    max-width: 1080px;
    margin: 0 auto 40px;
}

.hwmBeforeAfterHead .hwmH2 {
    color: var(--white);
    margin-bottom: 16px;
}

.hwmBeforeAfterHead .hwmPara {
    color: var(--white);
    opacity: 0.95;
}

.hwmBeforeAfterGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    max-width: 1500px;
    margin: 0 auto;
}

.hwmBaItem {
    position: relative;
    aspect-ratio: 720 / 520;
    overflow: hidden;
}

.hwmBaItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hwmBaLabel {
    position: absolute;
    left: 24px;
    top: 24px;
    z-index: 2;
    font-family: var(--holland);
    font-size: 40px;
    line-height: 32px;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.5px;
}


/* ============================================================
   INTERIOR PAGES — Location / FAQ
   ============================================================ */

/* --- Location hero (tall, full image, gradient overlay) --- */
.hwmHero.hwmHeroPage--loc {
    max-height: none;
}

.hwmHero.hwmHeroPage--loc .hwmHeroOverlay {
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.15) 18%, var(--navy) 100%);
}

.hwmHero.hwmHeroPage--loc .hwmHeroInner {
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 200px;
}

.hwmHero.hwmHeroPage--loc .hwmH4 {
    margin-top: 32px;
    max-width: 900px;
}

.hwmHero.hwmHeroPage--loc .hwmH5 {
    margin-top: 16px;
    max-width: 900px;
}

/* --- Info panels overlaying the hero bottom --- */
.hwmLocPanels {
    background-color: var(--navy);
    padding: 64px 0;
    position: relative;
    z-index: 2;
}

.hwmLocPanelsInner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
}

.hwmLocPanel {
    background-color: rgba(230, 230, 230, 0.1);
    padding: 32px 40px;
    color: var(--white);
    min-height: 320px;
    border-radius: 4px 0 0 4px;
}

.hwmLocPanel--map {
    background-color: rgba(230, 230, 230, 0.18);
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hwmLocPanel--map iframe {
    font-family: var(--holland);
    font-size: 56px;
    line-height: 48px;
    color: rgba(0, 5, 37, 0.4);
    text-transform: uppercase;
    width: 100%;
    min-height: 400px;
}

.hwmLocPanelGroup {
    margin-bottom: 20px;
}

.hwmLocPanelLabel {
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--white);
    text-transform: uppercase;
    margin: 0 0 4px;
}

.hwmLocPanelValue {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
    margin: 0;
}

.hwmLocPanelPhone {
    display: inline-block;
    font-family: var(--holland);
    font-size: 56px;
    line-height: 48px;
    color: var(--tan);
    text-transform: uppercase;
    text-decoration: none;
    margin: 4px 0 0;
}

.hwmLocPanelPhone:hover {
    color: var(--tan);
    opacity: 0.85;
}

/* ============================================================
   LOCATION DETAILS SECTION (ADDRESS -> HOURS -> MAP)
   ============================================================ */
.hwmLocationDetailsSection {
    background-color: var(--navy, #000525);
    padding: 70px 0 90px 0;
    color: var(--white);
    position: relative;
    z-index: 2;
}

.hwmLocAddressBox {
    text-align: center;
    margin-bottom: 50px;
}

.hwmLocMainTitle {
    font-family: var(--amiri, Georgia, serif);
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white, #FFFFFF);
    margin-bottom: 12px;
    text-align: center;
}

.hwmLocAddressText {
    font-family: var(--regular-segoe-ui, sans-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--white, #FFFFFF);
    margin: 0;
    letter-spacing: 0.5px;
}

.hwmLocHoursBox {
    margin-bottom: 50px;
}

.hwmLocHoursHeader {
    text-align: center;
    margin-bottom: 30px;
}

.hwmLocMapBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hwmLocMapCard {
    width: 100%;
    max-width: 480px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    margin: 0 auto;
}

.hwmLocMapCard iframe {
    width: 100%;
    height: 350px;
    border-radius: 4px;
    border: 0;
    display: block;
}

/* --- Hours section (navy bg, 3 card grid) --- */
.hwmHours {
    background-color: var(--navy);
    padding: 100px 0;
}

.hwmHoursHead {
    margin-bottom: 32px;
}

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

.hwmHoursCard {
    background-color: rgba(230, 230, 230, 0.07);
    border-radius: 4px;
    padding: 32px;
    color: var(--white);
}

.hwmHoursCardIcon {
    color: var(--tan);
    font-size: 22px;
    margin-bottom: 16px;
    display: block;
}

.hwmHoursCardTitle {
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--tan);
    text-transform: uppercase;
    margin: 0 0 16px;
}

.hwmHoursRow {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.hwmHoursRow>span:first-child {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
}

.hwmHoursRow>span:last-child {
    font-family: var(--bold-segoe-ui);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
    text-align: right;
}

/* --- Amenities section (f7 bg, 4 cards) --- */
.hwmAmenities {
    background-color: var(--f7);
    padding: 80px 6.04% 100px;
}

.hwmAmenitiesHead {
    text-align: center;
    margin-bottom: 56px;
}

.hwmAmenitiesHead .hwmPara {
    margin-top: 16px;
}

.hwmAmenitiesGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 24px;
    max-width: 1680px;
    margin: 0 auto;
}

/* Babylon / Post Place lists only two amenities, so keep the cards at their normal width */
.hwmAmenitiesGrid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 828px;
}

.hwmAmenityCard {
    display: flex;
    flex-direction: column;
}

.hwmAmenityImg {
    padding-top: 77%;
    background-color: #c4c4c4;
    position: relative;
}

.locationGalleryWrap {
    position: relative;
    padding-top: 57%;
}

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

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

.hwmAmenityImg .hwmAmenityIcon {
    position: absolute;
    left: 40px;
    bottom: -40px;
}

.hwmAmenityBody {
    background-color: var(--white);
    padding: 55px 30px 20px 30px;
    flex: 1;
}

.hwmAmenityIcon {
    color: var(--tan);
    font-size: 28px;
    margin-bottom: 16px;
}

.hwmAmenityTitle {
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--navy);
    text-transform: uppercase;
    margin: 0 0 12px;
}

.hwmAmenityDesc {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
    margin: 0;
}

/* --- Location 5-image strip (reuse pattern of hwmBrandStrip) --- */

.hwmLocStrip {
    margin: 4px 0 80px 0;
}

.hwmLocStrip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   INTERIOR PAGES — FAQ accordion
   ============================================================ */

.hwmFaqPage {
    padding: 80px 6.04% 100px;
    background-color: var(--white);
}

.hwmFaqHead {
    text-align: center;
    margin-bottom: 56px;
}

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

.hwmFaqSection {
    border-bottom: 1px solid var(--d9);
}

.hwmFaqSection>summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0;
    font-family: var(--amiri);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1.2px;
    color: var(--navy);
    text-transform: uppercase;
}

.hwmFaqSection>summary::-webkit-details-marker {
    display: none;
}

.hwmFaqSection>summary::after {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-family: var(--regular-segoe-ui);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    color: var(--navy);
}

.hwmFaqSection[open]>summary::after {
    content: '−';
}

.hwmFaqSectionBody {
    padding: 8px 30px 32px;
}

.hwmFaqItem {
    padding: 24px 0;
    border-bottom: 1px solid var(--d9);
}

.hwmFaqItem:last-child {
    border-bottom: none;
}

.hwmFaqQ,
.hwmFaqA {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
    margin: 0;
}

.hwmFaqQ {
    margin-bottom: 16px;
}

.hwmFaqMark {
    color: var(--tan);
}

.hwmFaqQ strong {
    font-family: var(--bold-segoe-ui);
    font-weight: 700;
    color: var(--text-gray);
}

/* ============================================================
   INTERIOR PAGES — Awards / Marina Facilities / Ship Store / Links
   ============================================================ */

/* --- Awards intro: 3-column icon row on navy --- */
.hwmIconRow {
    background-color: var(--navy);
    padding: 24px 6.04% 64px;
}

.hwmIconRowHead {
    text-align: center;
    margin-bottom: 56px;
}

.hwmIconRowGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    max-width: 1620px;
    margin: 0 auto;
}

.hwmIconRowItem {
    text-align: center;
    color: var(--white);
}

.hwmIconRowCircle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--tan);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 32px;
}

.hwmIconRowTitle {
    font-family: var(--amiri);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--white);
    margin: 0 0 16px;
}

.hwmIconRowItem .hwmPara {
    color: var(--white);
    max-width: 360px;
    margin: 0 auto;
}

/* --- Awards: navy section wrapping the 4x2 card grid --- */
.hwmAwards {
    background-color: var(--navy);
    padding: 24px 6.04% 100px;
}

.hwmAwards .hwmAmenitiesGrid {
    background-color: transparent;
}

/* --- Ship Store: product categories cards (3-col rounded cards) --- */
.hwmShipProducts {
    background-color: var(--f7);
    padding: 80px 9.17% 100px;
}

.hwmShipProductsHead {
    text-align: center;
    margin-bottom: 48px;
}

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

.hwmShipProductCard {
    background-color: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.hwmShipProductImg {
    width: 100%;
    aspect-ratio: 497 / 360;
    overflow: hidden;
}

.hwmShipProductImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hwmShipProductCard:hover .hwmShipProductImg img {
    transform: scale(1.04);
}

.hwmShipProductBody {
    padding: 32px;
}

.hwmShipProductLabel {
    font-family: var(--amiri);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1.2px;
    color: var(--tan);
    text-transform: uppercase;
    margin: 0 0 8px;
}

.hwmShipProductTitle {
    font-family: var(--holland);
    font-size: 40px;
    line-height: 32px;
    color: var(--navy);
    text-transform: uppercase;
    margin: 0 0 16px;
    letter-spacing: 0.5px;
}

.hwmShipProductDesc {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
    margin: 0;
}

/* --- Ship Store 4-image strip --- */
.hwmShipStrip {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}

.hwmShipStrip>div {
    aspect-ratio: 478 / 320;
    overflow: hidden;
}

.hwmShipStrip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Ship Store callout (navy bg with centered visit-us card) --- */
.hwmShipCallout {
    background-color: var(--navy);
    padding: 100px 6.04%;
    text-align: center;
}

.hwmShipCalloutHead {
    max-width: 800px;
    margin: 0 auto 32px;
}

.hwmShipCalloutHead .hwmH2 {
    color: var(--tan);
    margin-bottom: 24px;
}

.hwmShipCalloutHead .hwmPara {
    color: var(--white);
    opacity: 0.95;
}

.hwmShipCalloutBtn {
    margin: 0 0 56px;
    display: flex;
    justify-content: center;
}

.hwmShipCalloutCard {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 32px 40px;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
}

.hwmShipCalloutLabel {
    font-family: var(--amiri);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1.2px;
    color: var(--tan);
    text-transform: uppercase;
    margin: 0 0 12px;
}

.hwmShipCalloutSub {
    font-family: var(--bold-segoe-ui);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--white);
    margin: 0 0 12px;
}

.hwmShipCalloutAddr {
    display: block;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
    text-decoration: underline;
    margin: 0 0 16px;
}

.hwmShipCalloutAddr:hover {
    color: var(--white);
    opacity: 0.85;
}

.hwmShipCalloutPhone {
    display: block;
    font-family: var(--holland);
    font-size: 40px;
    line-height: 32px;
    color: var(--white);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.hwmShipCalloutPhone:hover {
    color: var(--white);
    opacity: 0.85;
}

/* --- Links page --- */
.hwmLinksPage {
    padding: 96px 6.04% 100px;
    background-color: var(--white);
}

.hwmLinksPageHead {
    text-align: center;
    margin-bottom: 56px;
}

.hwmLinksPageHead .hwmPara {
    margin-top: 16px;
}

.hwmLinksGroup {
    max-width: 1500px;
    margin: 0 auto 56px;
}

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

.hwmLinksGrid--center {
    grid-template-columns: minmax(0, 460px);
    justify-content: center;
}

.hwmLinkCard {
    background-color: var(--f7);
    padding: 32px;
    border-radius: 4px;
    min-height: 180px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background-color 0.2s ease;
}

.hwmLinkCard:hover {
    background-color: #eeece5;
    color: inherit;
}

.hwmLinkCardIcon {
    color: #7A693B;
    font-size: 32px;
    line-height: 1;
}

.hwmLinkCardTitle {
    font-family: var(--bold-segoe-ui);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--navy);
    text-transform: uppercase;
    margin: 0;
}




/* ============================================================
   INTERIOR PAGES — Careers
   ============================================================ */

/* --- Tan outline button --- */
.hwmBtnTanOutline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 4px;
    background-color: transparent;
    color: var(--tan);
    border: 2px solid rgba(122, 105, 59, 0.6);
    min-width: 176px;
    font-family: var(--holland);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
}

.hwmBtnTanOutline:hover {
    background-color: var(--tan);
    color: var(--white);
    border-color: var(--tan);
}

/* --- Careers positions grid --- */
.hwmCareers {
    background-color: var(--white);
    padding: 80px 6.04% 100px;
}

.hwmCareersHead {
    text-align: center;
    margin-bottom: 56px;
}

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

.hwmCareerCard {
    background-color: var(--f7);
    border-radius: 2px;
    padding: 36px 32px;
    min-height: 264px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.hwmCareerCardTitle {
    font-family: var(--bold-segoe-ui);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--navy);
    margin: 0;
}

.hwmCareerCardLoc {
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-gray);
    margin: 0;
}

.hwmCareerCardLoc i {
    color: var(--tan);
    margin-right: 6px;
}

.hwmCareerCardBtns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    width: 100%;
}

.hwmCareerCardBtns .hwmBtnTanOutline,
.hwmCareerCardBtns .hwmBtnPrimary {
    min-width: 140px;
}

/* 404 page start here */

.commonSection {
    margin-bottom: 80px;
}

.commonSectionInnerWrap {
    display: flex;
    gap: 120px;
    max-width: calc(100% - 15%);
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.commonSectionTextWrapper {
    width: 50%;
    max-width: 600px;
}

.commonSectionImageWrapper {
    width: 50%;
}

.commonSectionImageWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commonSectionHeading {
    color: #222;
    text-align: center;
    font-family: var(--bold-segoe-ui);
    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: var(--regular-segoe-ui);
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    margin-bottom: 40px;
    margin-top: 40px;
}

.commonSectionLinkWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.featured-btn {
    color: #FFF;
    text-align: center;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
    background: #222;
    display: inline-block;
}

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

/* mobile nav css starts here */
.mobileLogoWrap {
    max-width: 240px;
}

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

.mobileHeaderInnerWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 25px;
}

.mobileHeader {
    background-color: #fff;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.25);
    display: none;
}

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

.burgerLine {
    background-color: #000;
    width: 40px;
    height: 2px;
    margin-bottom: 10px;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* the cross effect  */
.cross .lineOne {
    transform: rotate(45deg) translateY(15px);
}

.cross .lineThree {
    transform: rotate(-45deg) translateY(-17px);
}

.cross .lineTwo {
    opacity: 0;
}

.mobileSearchIconWrapper {
    cursor: pointer;
    max-width: 24px;
}

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

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

.mobileSearchBarWrapper {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 0 24px 16px 24px;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.25);
    display: none;
}

.mobileSearchBar {
    color: var(--Black);
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    width: 100%;
    outline: none;
    border-top: 1px solid var(--Black);
    border-left: 1px solid var(--Black);
    border-bottom: 1px solid var(--Black);
    border-right: 1px solid var(--Black);
    padding: 8px 24px;
}

.mobileSearchBarWrapper .formFieldWrap {
    position: relative;
}

.mobileSearchSuggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    max-height: 60vh;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid var(--Black);
    border-top: none;
    padding: 0;
}

.mobileSearchSuggestions.hidden {
    display: none !important;
}

.mobileSearchSuggestions a.focus-element {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid #e6e6e6;
    color: var(--Black);
    text-decoration: none;
}

.mobileSearchSuggestions a.focus-element:last-child {
    border-bottom: none;
}

.mobileSearchSuggestions .imgContainer {
    margin-right: 12px;
    flex: 0 0 auto;
}

.mobileSearchSuggestions .conetntSectionContainer .invTitle {
    font-family: Lexend;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

.mobileSearchSuggestions .conetntSectionContainer .invPrice,
.mobileSearchSuggestions .conetntSectionContainer .invMiles,
.mobileSearchSuggestions .conetntSectionContainer .invStock {
    font-family: Lexend;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    color: #555;
}

.mobileTopBar {
    background-color: #203A71;
    padding: 8px 24px;
}

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

.mobileLocationInfoWrap {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.mobilePhoneLocationWrap {
    color: var(--White);
    text-align: right;
    font-family: Lexend;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.mobileTopBarPhone {
    color: var(--White);
    font-family: Lexend;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.mobileTopBarPhone:hover {
    color: var(--White);
}

.mobileSelectStoreMenu {
    border: 1px solid #EEE;
    background: #FFF;
    width: 100%;
    max-width: 380px;
    padding: 15px 15px 30px 15px;
    position: absolute;
    transform: translateX(-100%);
    left: 0;
    transition: all 0.4s;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.25);
}

.toggleClassForMobieSelectStoreMenu {
    transform: translateX(0);
}

.mobileSelectedStoreTitle {
    color: var(--Navy, #283C5E);
    font-family: var(--regular-segoe-ui);
    font-size: 18px;
    font-style: normal;
    font-weight: 590;
    line-height: 24px;
    letter-spacing: 0.72px;
}

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

.mobileBackArrow {
    cursor: pointer;
}

.mobileSelectStoreAddressPara {
    color: var(--Black);
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.mobileSelectStorePhone {
    color: var(--Black);
    font-family: Lexend;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.mobileSelectStorePhone:hover {
    color: var(--Black);
}

.mobileSelectStoreHoursHeading {
    color: var(--Black, #000);
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
}

/* mobile nav css ends here */

/* mobile mega menu css starts here */
.mobileNavMegaMenu {
    position: sticky;
    left: 0;
    top: 120px;
    width: 100%;
    background-color: #fff;
    padding: 30px;
    z-index: 20;
    box-shadow: 0 0px 5px -10px rgba(0, 0, 0, 0.2);
    height: 90vh;
    overflow-y: auto;
    display: none;
}

/* close icon */
.mobileMenuCrossIcon {
    max-width: 14px;
    cursor: pointer;
}

/* wrapper */
.menuWrap {
    margin-top: 30px;
}

/* main menu links */

/* bottom links */
.menuBottomContainer {
    margin-top: 80px;
}






/* submenu top bar */
.mobileMenuTopBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.mainMenuIconWrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mainMenuIconText {
    color: var(--Red);
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.subMenuContentWrap {
    margin-top: 46px;
}

.subMenuHeading {
    color: #000525;
    font-family: var(--regular-segoe-ui);
    font-size: 22px;
    font-style: normal;
    font-weight: 590;
    line-height: 30px;
    letter-spacing: 0.44px;
}

.subMenuLink {
    padding: 12px 0;
}

.subMenuLinkText {
    color: var(--Black);
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.subMenuLinkText:hover {
    color: var(--Black);
}

/* Get Financing / Marine Insurance sit on their own at the foot of the Boat Sales panel,
   so they carry the same weight as the panel headings rather than the link lists. */
.subMenuLinkLarge {
    color: #000525;
    font-family: var(--regular-segoe-ui);
    font-size: 22px;
    font-style: normal;
    font-weight: 590;
    line-height: 30px;
    letter-spacing: 0.44px;
}

.subMenuLinkLarge:hover {
    color: #000525;
}

.mobileBoatsMenuCard {
    border: 1px solid #D9D9D9;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    height: 100%;
    min-height: 72px;
    background: rgba(0, 0, 0, 0.3);
}

.mobileBoatsMenuCard img {
    max-width: 88px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* brand logos */
.mobileLogoWrapper {
    border-radius: 2px;
    border: 1px solid #EEE;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    height: 80px;
}

.mobileLogoInnerWrap {
    max-width: 139px;
}

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

/* submenus hidden by default */
.submenu-boats,
.submenu-rentals,
.submenu-service,
.submenu-storage,
.submenu-resources {
    display: none;
}

.mobileMenuLinkList {
    list-style: none
}

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

.mobileMenuLargeLink {
    color: #000525;
    font-family: var(--regular-segoe-ui);
    font-size: 22px;
    font-style: normal;
    font-weight: 590;
    line-height: 30px;
    letter-spacing: 0.44px;
}

.mobileMenuLargeLink:hover {
    color: #000525;
}

.secondMobileMenuList {
    margin-top: 64px;
}

/* mobile mega menu css ends here */

/* mega menus css starts here */
.boatsSalesMegaMenu {
    background-color: #fff;
    padding: 38px 0 88px 0;
    position: fixed;
    left: 0;
    top: 82px;
    width: 100%;
    z-index: 15;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.25);
    display: none;
}

.boatSalesMenuList {
    list-style: none;
}

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

.megaMenuLink {
    color: var(--Navy, #000525);
    font-family: var(--regular-segoe-ui);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.megaMenuLink:hover {
    color: var(--Black);
}

.boatSalesSecondList {
    margin-top: 48px;
}


.boatSalesMenuCard {
    position: relative;
    margin: 0 2px;
    padding-top: 64%;
    margin-bottom: 4px;
    overflow: hidden;
}

.boatSalesMenuCard::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.00) 0%, #000525 100%);
}

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

.boatSalesMenuLogoWrap {
    position: absolute;
    left: 40px;
    bottom: 40px;
    max-width: 160px;
    z-index: 3;
}

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

.activeNavTab {
    position: relative;
}

.activeNavTab::after {
    content: '';
    position: absolute;
    bottom: -28px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--gold-color);
}

.desktopNavLinkList {
    display: flex;
    align-items: center;
    gap: 48px;
    list-style: none;
}

.boatSalesMenuCrossIcon {
    position: absolute;
    top: 16px;
    right: 5%;
    cursor: pointer;
}

.servicesMegaMenu {
    background-color: #fff;
    padding: 38px 0 80px 0;
    position: fixed;
    left: 0;
    top: 80px;
    width: 100%;
    z-index: 15;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.25);
    display: none;
}

.serviceMenuCard {
    padding: 0 2px;
}

.serviceMenuCardImageWrap {
    position: relative;
    padding-top: 74%;
    overflow: hidden;
}

.serviceMenuCardImageWrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 70%;
    width: 100%;
    opacity: 0.6;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.00) 0%, #000525 100%);
}

.servicePageSeparator {
    background-color: #000;
    margin-bottom: 64px;
}

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

.serviceMenuCardContentWrap {
    margin-top: 8px;
    position: absolute;
    left: 40px;
    bottom: 32px;
    z-index: 2;
}

.serviceMenuCardTitle {
    color: #fff;
    font-family: var(--regular-segoe-ui);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
}

.serviceMenuCrossIcon {
    position: absolute;
    top: 16px;
    right: 5%;
    cursor: pointer;
}

/* ============================================================
   LOCATIONS MEGA MENU (Desktop Mega Dropdown)
   ============================================================ */
.locationsMegaMenu {
    background-color: #fff;
    padding: 38px 0 80px 0;
    position: fixed;
    left: 0;
    top: 80px;
    width: 100%;
    z-index: 15;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.25);
    display: none;
}

.locationMenuCard {
    padding: 0 2px;
}

.locationMenuCardInnerWrap {
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.locationMenuCardInnerWrap:hover {
    transform: translateY(-4px);
}

.locationMenuCardImageWrap {
    position: relative;
    padding-top: 74%;
    overflow: hidden;
}

.locationMenuCardImageWrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 80%;
    width: 100%;
    opacity: 0.8;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.00) 0%, #000525 100%);
}

.locationMenuCardImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.locationMenuCardInnerWrap:hover .locationMenuCardImageWrap img {
    transform: scale(1.05);
}

.locationMenuCardContentWrap {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    right: 20px;
}

.locationMenuCardTitle {
    color: #fff;
    font-family: var(--amiri, Georgia, serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.locationMenuCardSub {
    color: var(--slate, #6E8DA6);
    font-family: var(--regular-segoe-ui, sans-serif);
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 6px;
}

.locationMenuCardPhone {
    color: var(--tan, #7A693B);
    font-family: var(--holland, Georgia, serif);
    font-size: 16px;
    margin-bottom: 0;
}

.locationMenuCrossIcon {
    position: absolute;
    top: 16px;
    right: 5%;
    cursor: pointer;
}

.selectStoreMenu {
    background-color: #fff;
    padding: 40px 50px 56px 50px;
    position: fixed;
    top: 80px;
    right: 0;
    min-width: 420px;
    z-index: 15;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
    display: none;
}

.selectStoreInnerMenu {
    text-align: center;
}


.selectedStoreStarPara img {
    width: 18px;
    height: 18px;
}

.selectedStoreStarName {
    font-weight: 600;
    color: #cfa548;
}



.modal-content {
    pointer-events: auto;
}

.specialBanner {
    background-color: #222222;
    padding: 22px 23px 8px 23px;
}

.specialBoatTitle {
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    text-transform: capitalize;
}

.selectedstoreName {
    color: #000525;
    text-align: center;
    font-family: var(--regular-segoe-ui);
    font-size: 18px;
    font-style: normal;
    font-weight: 590;
    line-height: 24px;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.selectedStoreAddress {
    color: var(--Black, #000);
    text-align: center;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.selectedStorePhoneNumber {
    color: var(--Black);
    text-align: center;
    font-family: var(--regular-segoe-ui);
    font-size: 24px;
    font-style: normal;
    font-weight: 590;
    line-height: 32px;
    letter-spacing: 0.48px;
    margin-top: 16px;
}

.selectedStorePhoneNumber:hover {
    color: var(--Black);
}

.selectedStoreInfoPara {
    color: var(--Black);
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
}

.changeSelectedLocationBtnWrap {
    margin-top: 40px;
}

.resourcesMegaMenu {
    position: fixed;
    right: 0;
    top: 80px;
    height: 100vh;
    background-color: #fff;
    padding: 56px 20px 20px 60px;
    z-index: 15;
    width: 320px;
    transition: all 0.4s;
    transform: translateX(100%);
}

.togglerClassForResourcesMenu {
    transform: translateX(0);
}

.resourcesBoldLinkList {
    list-style: none;
}

.resourcesBoldLink {
    font-family: var(--regular-segoe-ui);
    color: #000525;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.resourcesBoldLink:hover {
    color: #000525;
}

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

.resourcesLink {
    color: #000525;
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.resourceMenuHeading {
    color: #7A693B;
    font-family: Amiri;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.scrolled-para {
    max-height: 250px;
    height: 100%;
    overflow: auto;
}

/* mega menus css ends here */

/* Modal Detail Page Styles */
.modal-detail-hero {
    min-height: 680px;
    position: relative;
    overflow: hidden;
}

.modal-detail-hero .yswHeroImg {
    object-fit: cover;
    height: 100%;
    width: 100%;
    opacity: 0.95;
}

.modal-detail-hero .yswHeroOverlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.modal-detail-hero-content {
    max-width: 720px;
}

.modal-detail-badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modal-detail-hero-copy {
    max-width: 640px;
    margin: 24px 0 30px;
    line-height: 1.75;
}

.modal-detail-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.modal-detail-cta-btn,
.modal-detail-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

.modal-detail-cta-btn {
    background: #fff;
    color: #0f2147;
}

.modal-detail-cta-secondary {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.modal-detail-intro,
.modal-detail-specs,
.modal-detail-features,
.modal-detail-gallery,
.modal-detail-contact {
    padding: 80px 0;
}

.modal-detail-intro-grid,
.modal-detail-feature-grid,
.modal-detail-gallery-grid {
    display: grid;
    gap: 32px;
}

.modal-detail-intro-grid {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
}

.modal-detail-intro-copy .modal-detail-label,
.modal-detail-section-header .modal-detail-label {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(21, 101, 192, 0.1);
    color: #1565c0;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modal-detail-intro-title h2,
.modal-detail-section-header h2 {
    margin: 0 0 18px;
}

.modal-detail-intro-text p {
    margin-bottom: 18px;
    max-width: 680px;
}

.modal-detail-intro-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.modal-detail-intro-meta div {
    padding: 24px;
    background: #f8f9fc;
    border-radius: 20px;
}

.modal-detail-intro-meta strong {
    display: block;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #5b6278;
}

.modal-detail-intro-media {
    display: grid;
    gap: 24px;
}

.modal-detail-hero-logo {
    max-width: 240px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 33, 71, 0.08);
}

.modal-detail-hero-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.modal-detail-media-card img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 24px;
}

.modal-detail-media-summary {
    display: grid;
    gap: 12px;
}

.modal-detail-link {
    color: #1565c0;
    font-weight: 600;
    text-decoration: none;
}

.modal-detail-section-header {
    max-width: 920px;
    margin-bottom: 40px;
}

.modal-detail-spec-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 20px;
}

.modal-spec-card {
    background: #fff;
    padding: 28px 24px;
    border-radius: 24px;
    box-shadow: 0 14px 40px rgba(15, 33, 71, 0.06);
}

.spec-title {
    display: block;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #5b6278;
}

.modal-detail-features {
    background: #f8f9fc;
}

.modal-detail-feature-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.feature-card {
    padding: 32px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 14px 40px rgba(15, 33, 71, 0.05);
}

.feature-card h3 {
    margin-bottom: 16px;
}

.modal-detail-gallery-grid {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
}

.gallery-card {
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 33, 71, 0.08);
}

.gallery-card-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.gallery-card-copy {
    padding: 24px;
}

.modal-detail-contact-card {
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    border-radius: 24px;
    background: #0f2147;
    color: #fff;
}

.modal-detail-contact-card h2,
.modal-detail-contact-card p {
    margin: 0;
}

.modal-detail-contact-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.modal-detail-contact-actions .modal-detail-link,
.modal-detail-contact-actions .modal-detail-cta-btn {
    color: #fff;
}

.modal-detail-contact-actions .modal-detail-link {
    opacity: 0.9;
}

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

    .modal-detail-intro-grid,
    .modal-detail-feature-grid,
    .modal-detail-gallery-grid,
    .modal-detail-spec-grid {
        grid-template-columns: 1fr;
    }

    .modal-detail-intro-meta {
        grid-template-columns: 1fr;
    }

    .modal-detail-contact-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   MODEL DETAIL PAGE — CSS (OWYG Style)
   Clean, minimal design with black & white theme
   ============================================================ */

/* --- Hero Section --- */
.mdHero {
    position: relative;
    height: 600px;
    overflow: hidden;
}

.mdHeroImg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mdHeroContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    width: 90%;
}

.mdHeroLogo {
    max-height: 120px;
    width: auto;
    margin-bottom: 30px;
}



.mdBtnWhite {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 40px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-family: "Mona Sans", sans-serif;
}

.mdBtnWhite:hover {
    background: #fff;
    color: #000;
}

.mdBtnBlack {
    background: #000;
    border: 2px solid #000;
    color: #fff;
    padding: 12px 40px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-family: "Mona Sans", sans-serif;
    margin-right: 15px;
}

.mdBtnBlack:hover {
    background: #fff;
    color: #000;
}

.mdBtnOutlineBlack {
    background: transparent;
    border: 2px solid #000;
    color: #000;
    padding: 12px 40px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-family: "Mona Sans", sans-serif;
}

.mdBtnOutlineBlack:hover {
    background: #000;
    color: #fff;
}

/* --- Container --- */
.mdContainer {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- About Section --- */
.mdAbout {
    padding: 80px 0;
}


.mdAboutContent {
    max-width: 900px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    font-family: "Mona Sans", sans-serif;
}

.mdAboutCTA {
    text-align: center;
    margin-top: 40px;
}

/* --- Video/Features Section --- */
.mdFeatures {
    padding: 60px 0;
    background: #f8f9fa;
}

.mdFeatureTitle {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 50px;
    text-align: center;
    font-family: "Mona Sans", sans-serif;
}

.mdVideoWrap {
    position: relative;
    padding-top: 56.25%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.mdVideoWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mdFeatureCTA {
    text-align: center;
    margin-top: 30px;
}

/* --- Specifications Section --- */
.mdSpecs {
    padding: 80px 0;
}

.mdSpecsGrid {
    max-width: 1200px;
    margin: 0 auto;
}

.mdSpecCard {
    text-align: center;
    padding: 30px 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.mdSpecLabel {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #666;
    margin-bottom: 15px;
    font-family: "Mona Sans", sans-serif;
}

.mdSpecValue {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 0;
    font-family: "Mona Sans", sans-serif;
}

/* --- Gallery Section --- */
.mdGallery {
    padding: 60px 0;
    background: #fff;
}

.mdGalleryTitle {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
    font-family: "Mona Sans", sans-serif;
}

.mdGalleryItem {
    position: relative;
    padding-top: 75%;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.mdGalleryImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mdGalleryItem:hover .mdGalleryImg {
    transform: scale(1.05);
}

/* --- Virtual Tour Section --- */
.mdVirtualTour {
    padding: 80px 20px;
    background: #000;
    color: #fff;
    text-align: center;
    margin-top: 60px;
    border-radius: 16px;
}

.mdVirtualTitle {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-family: "Mona Sans", sans-serif;
}

.mdVirtualSubtitle {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 40px;
    font-family: "Mona Sans", sans-serif;
}

.mdVirtualText {
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto 40px;
    color: rgba(255, 255, 255, 0.8);
    font-family: "Mona Sans", sans-serif;
}

/* --- Listings Section --- */
.mdListings {
    padding: 80px 0;
}

.mdListingsPlaceholder {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.mdListingsText {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
    font-family: "Mona Sans", sans-serif;
}

/* --- Final CTA Section --- */
.mdCTA {
    padding: 80px 20px;
    background: #000;
    color: #fff;
    text-align: center;
    margin-top: 60px;
}

.mdCTATitle {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-family: "Mona Sans", sans-serif;
}

.mdCTASubtitle {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 40px;
    font-family: "Mona Sans", sans-serif;
}

.mdCTABtn {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 50px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-family: "Mona Sans", sans-serif;
}

.mdCTABtn:hover {
    background: #fff;
    color: #000;
}


/* ============================================
   MODEL DETAIL OWL CAROUSEL STYLES
   ============================================ */

.mdGalleryCarousel.owl-carousel {
    position: relative;
}

.mdGalleryCarousel .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.mdGalleryCarousel .owl-nav button {
    pointer-events: all;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: "Mona Sans", sans-serif;
}

.mdGalleryCarousel .owl-nav button:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}

.mdGalleryCarousel .owl-nav button.owl-prev {
    margin-left: -25px;
}

.mdGalleryCarousel .owl-nav button.owl-next {
    margin-right: -25px;
}

.mdGalleryCarousel .owl-nav button span {
    display: block;
    margin-top: -6px;
}

.mdGalleryCarousel .owl-stage-outer {
    overflow: hidden;
    border-radius: 8px;
}

.mdGalleryCarousel .item {
    padding: 0;
}

.mdGalleryCarousel .mdGalleryItem {
    margin: 0;
}

.serivce-header {
    position: relative;
    padding-top: 32%;
}

.blue-banne {
    background: #000525;
    height: 200px;
}

.service-overaly {
    background: linear-gradient(180deg, rgba(0, 5, 37, 0.00) 0%, #000525 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

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

.serivce-header .hwmHeroInner {
    position: absolute;
    left: 15%;
    bottom: 0;
    top: unset;
    transform: unset;
    z-index: 2;
    height: unset;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.convenient-bg {
    background: var(--f7, #F7F7F7);
}

.contactHero {
    min-height: 800px !important;
    background: linear-gradient(180deg, rgba(0, 5, 37, 0) 0%, #000525 100%),
            url('/assets/images/locations/8.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.contact-banner-content{
    max-width: calc(100% - 20%);
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 100px;
}
.contact-banner-content .hwmHeroBody{
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.contact-banner-content .hwmHeroForm{
    width: 40%;
}

.hwmLocationCard--shinnecock {
    order: 1;
}

.hwmLocationCard--eastport {
    order: 2;
}

.hwmLocationCard--smith-creek {
    order: 3;
}

.hwmLocationCard--babylon {
    order: 4;
}

.financing-banner-content {
    left: 50% !important;
    max-width: calc(100% - 25%);
    margin: 0 auto;
    width: 100%;
    transform: translate(-50%, -50%) !important;
}

.storage-content {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 47% !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.event-banner-content {
    max-width: 38% !important;
}

.loc-banner-content {
    max-width: 50%;
    width: 100%;
    top: unset !important;
    bottom: -120px !important;
    z-index: 2 !important;
    height: unset !important;

}

.brand-description {
    display: flex;
}

.brand-col-1 {
    width: 46%;
}

.brand-col-2 {
    width: 54%;
}

.brand-logo {
    max-width: 320px;
    width: 100%;
}

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

.privacy-policy-pt {
    padding-top: 50px;
}

.privacy_content h2,
.privacy_content h3,
.privacy_content h4 {
    padding: 18px 0;
}
.terms_content h2,
.terms_content h3,
.terms_content h4 {
    padding: 15px 0;
}
.terms_wrapper, .Privacy_policy_wrapper{
    padding-bottom: 70px;
}
.job-description-btn {
    cursor: pointer;
    color: var(--Tan1, #7A693B);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 4px;
    font-family: var(--holland);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #7A693B;
}
.job-description-btn:hover{
    background: #7D1317;
    color: #7A693B;
    border: 2px solid #7D1317;
}

@media (min-width: 1400px) {
    .hwmSubLocBarItem {
        min-height: 72px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .hwmSubLocBarName {
        font-size: 15px;
    }

    .hwmSubLocBarSub,
    .hwmSubLocBarPhone {
        font-size: 11.5px;
    }
}

@media (max-width: 1600px) {
    .event-banner-content {
        max-width: 50% !important;
    }

    .financing-banner-content {
        max-width: calc(100% - 18%);
    }

    .hwmSplit {
        padding: 40px 10.42%;
    }

    .hwmCardGrid {
        padding: 0 4.5%;
    }

    .hwmIntroHead,
    .hwmMarinasHead,
    .hwmArrivalsHead,
    .hwmServiceGridHead {
        gap: 100px;
    }

    .hwmHeaderInner {
        padding: 0 2%;
    }

    .hwmH1 {
        font-size: 80px;
    }

    .serivce-header .hwmHeroInner {
        bottom: -17%;
    }
}

@media (max-width: 1600px) {
    .hwmSubLocBarSub {
        display: none;
    }
    .hwmSubLocBarSpacer {
        flex: 0 1 200px;
        min-width: 80px;
    }
    .hwmSubLocBarGroup {
        gap: 12px;
    }
    .hwmSubLocBarPhone {
        font-size: 13px;
    }
    .hwmSubLocBarName {
        font-size: 12px;
    }
}

@media (max-width: 1440px) {
    .hwmSubLocBarSpacer {
        flex: 0 1 160px;
        min-width: 60px;
    }
    .hwmSubLocBarGroup {
        gap: 10px;
    }
    .hwmSubLocBarPhone {
        font-size: 13px;
    }
    .hwmSubLocBarName {
        font-size: 11px;
    }
    .contact-banner-content {
        max-width: calc(100% - 15%);
    }
    .loc-banner-content {
        max-width: 70%;
    }

    .hwmStorageLocsGrid {
        gap: 35px;
    }

    .hwmWaysGrid {
        gap: 40px;
    }

    .hwmStorageLocCardTitle {
        font-size: 30px;
    }

    .hwmWayCardTitle {
        font-size: 30px;
    }

    .storage-content {
        max-width: 70% !important;
    }

    .hwmLocationsHead {
        gap: 60px;
    }

    .hwmBlogBody h1,
    .hwmBlogBody h2 {
        font-size: 40px;
        line-height: 42px;
    }

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

    .hwmBlogMain .hwmH2 {
        font-size: 44px;
        line-height: 44px;
    }

    .hwmShipProductTitle {
        font-size: 30px;
    }

    .hwmShipProductLabel {
        font-size: 20px;
    }

    .hwmCtaBarText {
        font-size: 33px;
    }

    .hwmServiceCardBody {
        left: 4%;
    }

    .hwmH1 {
        font-size: 60px;
        line-height: 60px;
    }

    .hwmIntroHeadm,
    .hwmMarinasHead,
    .hwmArrivalsHead,
    .hwmServiceGridHead {
        gap: 40px;
    }

    .hwmArrivalTitle,
    .actualPrice {
        font-size: 32px;
    }

    .arrival-title-wrapper {
        height: 74px;
    }

    .hwmArrivalInfo {
        padding: 24px 25px 16px 25px;
    }

    .hwmHeaderInner {
        padding: 0 15px;
    }

    .hwmCtaBarInner {
        flex-wrap: wrap;
    }
}

@media (max-width: 1300px) {
    .contact-banner-content .hwmHeroBody{
        width: 50%;
    }
    .contact-banner-content .hwmHeroForm{
        width: 50%;
    }
    .brand-logo {
        max-width: 250px;
        width: 100%;
    }

    .hwmLogo img {
        max-width: 260px;
    }

    .hwmAmenitiesGrid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hwmFooterMidInner {
        gap: 40px;
    }

    .hwmNav{
        gap: 24px;
    }
}

/* ============================================================
   RESPONSIVE — ≤ 1200px
   ============================================================ */
@media (max-width: 1200px) {
    .hwmSubLocBarSpacer {
        flex: 0 1 120px;
        min-width: 40px;
    }
    .hwmSubLocBarSub {
        display: none;
    }
    .hwmSubLocBarGroup {
        gap: 8px;
    }
    .hwmSecondaryLocBar {
        padding: 6px 2%;
    }
    .hwmAboutSubHero {
        padding: 80px 8.58% 100px;
    }

    .brand-logo {
        max-width: 170px;
    }

    .event-banner-content {
        max-width: 70% !important;
    }

    .hwmVideos {
        padding: 80px 5.46% 100px;
    }

    .hwmVideosGrid {
        gap: 56px 20px;
    }

    .hwmWhyItem p {
        font-size: 18px;
    }

    .hwmWhyGrid {
        gap: 32px 25px;
    }

    .financing-banner-content {
        max-width: calc(100% - 7%);
    }

    .hwmCams {
        padding: 0px 3.92% 100px;
    }

    .hwmCamsGrid {
        gap: 20px;
    }

    .hwmLocationsHead {
        gap: 0;
    }

    .hwmBlogDetailInner {
        gap: 40px;
    }

    .hwmH2 {
        font-size: 38px;
    }

    .hwmBlogMain .hwmH2 {
        font-size: 38px;
    }

    .hwmBlogBody h1,
    .hwmBlogBody h2 {
        font-size: 35px;
        line-height: 38px;
    }

    .hwmArticleGrid {
        gap: 50px 50px;
        padding: 0 4% 100px;
    }

    .serivce-header {
        padding-top: 40%;
    }

    .hwmCardGrid {
        padding: 0;
    }

    .serivce-header .hwmHeroInner {
        left: 0;
        bottom: -36%;
        width: 100%;
        padding: 50px;
    }

    .hwmBrandCardBody {
        padding-left: 20px;
        padding-right: 20px;
    }

    .commonSectionInnerWrap {
        max-width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }

    .commonSectionInnerWrap {
        gap: 40px;
    }

    .hwmHeaderLocLabel {
        font-size: 10px;
    }

    .hwmHeaderInner {
        padding: 0 32px;
    }

    .hwmNavLink,
    .hwmHeaderLocPhone,
    .hwmHeaderMore {
        font-size: 18px;
    }

    .hwmHeaderRight {
        gap: 20px;
    }

    /* Hero */
    .hwmH1 {
        font-size: 76px;
        line-height: 76px;
    }

    /* Intro */
    .hwmIntroHead,
    .hwmArrivalsHead,
    .hwmMarinasHead,
    .hwmServiceGridHead {
        gap: 60px;
    }

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

    /* Contact / Financing — split heroes */
    .hwmHero.hwmHeroPage--split .hwmHeroInner,
    .hwmHero.hwmHeroPage--finance .hwmHeroInner {
        gap: 48px;
    }

    .hwmLocationsHead {
        gap: 60px;
    }

    .hwmStat {
        font-size: 64px;
        line-height: 60px;
    }

    .hwmHeaderInner {
        padding: 0 32px;
    }

    .hwmNav {
        gap: 20px;
    }


    .hwmNavLink,
    .hwmHeaderLocPhone,
    .hwmHeaderMore {
        font-size: 18px;
    }

    .hwmHeaderRight {
        gap: 14px;
    }

    /* Hero */
    .hwmH1 {
        font-size: 60px;
        line-height: 60px;
    }


    /* Intro */
    .hwmIntroHead,
    .hwmArrivalsHead,
    .hwmMarinasHead,
    .hwmServiceGridHead {
        gap: 60px;
    }

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

    .hwmServiceCardBody {
        padding: 80px 56px;
    }

    /* Contact / Financing — split heroes */
    .hwmHero.hwmHeroPage--split .hwmHeroInner,
    .hwmHero.hwmHeroPage--finance .hwmHeroInner {
        gap: 48px;
    }

    .hwmLocationsHead {
        gap: 60px;
    }

    .hwmStat {
        font-size: 64px;
        line-height: 60px;
    }

    .hwmHero.hwmHeroPage .hwmHeroInner {
        left: 5%;
    }

    .hwmStatCalcInner {
        padding: 120px 7.54%;
    }
    .contact-banner-content {
        gap: 50px;
    }
}

/* ============================================================
   RESPONSIVE — ≤ 991px (tablet)
   ============================================================ */
@media (max-width: 991px) {
    .hwmSecondaryLocBar {
        padding: 8px 12px;
        background-color: var(--navy, #000525);
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }
    .hwmSubLocBarInner {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 14px;
        width: 100%;
        min-width: 0;
    }
    .hwmSubLocBarSpacer {
        display: none;
    }
    .hwmSubLocBarGroup {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 14px;
    }
    .hwmSubLocBarSub {
        display: none;
    }
    .hwmSubLocBarDivider {
        display: none;
    }
    .hwmCareersGrid{
        grid-template-columns: repeat(2, 1fr);
    }
    .privacy-policy-pt {
        padding-top: 50px;
    }

    .hwmEventInventoryTrack {
        padding-left: 62px;
    }

    .brand-page-slider .owl-nav .owl-prev {
        left: -40px !important;
    }

    .brand-page-slider .owl-nav .owl-next {
        right: 20px !important;
    }

    .hwmBrandHeroBtns {
        justify-content: center;
    }

    .brand-logo {
        max-width: 170px;
        margin: 0 auto;
    }

    .brand-description {
        flex-wrap: wrap;
        gap: 40px;
        text-align: center;
    }

    .brand-col-1,
    .brand-col-2 {
        width: 100%;
    }

    .hwmHeader {
        display: none;
    }

    .mobileHeader {
        display: block;
    }

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

    .hwmLocPanelGroup {
        text-align: center;
    }

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

    .loc-banner-content {
        max-width: 100%;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .event-banner-content {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .parts-banner-contnt {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
        align-items: center !important;
        width: 70%;
    }

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

    .hwmIconRowGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

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

    .hwmSplit {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .sell-trade-contnet {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .hwmSplitBody {
        max-width: 100%;
        text-align: center;
    }

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

    .financing-banner-content {
        gap: 0 !important;
        max-width: 100%;
        grid-template-columns: 1fr !important;
        display: flex !important;
        gap: 40px !important;
    }

    .hwmHeroDescBlock {
        max-width: 100%;
    }

    .hwmHeroBody {
        max-width: 100%;
    }

    .hwmCtaBarInner {
        justify-content: center;
        gap: 0;
    }

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

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

    .hwmLocationName {
        font-size: 25px;
        line-height: 29px;
    }

    .hwmLocationsHead {
        grid-template-columns: 1fr !important;
        gap: 20px;
        text-align: center;
    }
    .contact-banner-content .hwmHeroBody {
        align-items: center;
        padding-top: 50px;
        text-align: center;
    }

    .contact-banner-content {
        flex-direction: column;
        padding-top: 0 !important;
        gap: 50px;
    }

    .contact-banner-content .hwmHeroForm, .contact-banner-content .hwmHeroBody {
        width: 100%;
    }

    .hwmStaffGrid {
        gap: 20px;
    }

    .hwmHeroBtnRow {
        flex-direction: column;
        position: static;
        transform: unset;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 50px;
    }

    .hwmH1 {
        font-size: 38px;
        line-height: 42px;
    }

    .hwmHero.hwmHeroPage .hwmHeroInner {
        left: 0%;
        text-align: center;
    }

    .hwmNewsletter,
    .hwmFooterImage {
        flex: 1 1 100%;
    }

    .hwmFooterTop {
        flex-wrap: wrap;
    }

    .hwmFooterMidInner {
        flex-direction: column;
    }

    .hwmFooterBrand,
    .hwmFooterCols {
        width: 100%;
        flex-direction: column;
    }

    .hwmFooterCol {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

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

    .hwmAboutSubHero .hwmH2 {
        max-width: 100%;
    }

    .hwmHero.hwmHeroPage--about .hwmHeroInner {
        align-items: center;
    }

    .mdHero {
        height: 500px;
    }

    .mdHeroLogo {
        max-height: 100px;
        margin-bottom: 20px;
    }

    .mdAbout,
    .mdSpecs {
        padding: 60px 0;
    }

    .mdGallery {
        padding: 40px 0;
    }

    .mdVirtualTour,
    .mdCTA {
        padding: 60px 20px;
        margin-top: 40px;
    }

    .mdVirtualTitle,
    .mdCTATitle {
        font-size: 28px;
    }

    .mdVirtualSubtitle,
    .mdCTASubtitle {
        font-size: 20px;
    }

    .hwmIntroHead,
    .hwmArrivalsHead,
    .hwmMarinasHead {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 24px;
        margin-bottom: 40px;
        text-align: center;
    }

    .hwmBrandGrid {
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
    }

    .hwmServiceCardBody {
        padding: 80px 15px;
        text-align: center;
    }

    .hwmServiceStorage {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        text-align: center;
    }

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

    .hwmServiceCardBody {
        padding: 0 20px;
        max-width: 100%;
        left: 0;
    }

    .hwmCtaCardText {
        font-size: 29px;
        line-height: 34px;
    }

    .hwmCtaCards {
        justify-content: center;
    }

    .hwmIntroHead .hwmPara {
        max-width: 100%;
    }

    .hwmStatCalcInner {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 40px;
        padding: 120px 7.54%;
    }

    .hwmCalc {
        max-width: 520px;
        width: 100%;
        margin: auto;
    }

    .hwmStat {
        font-size: 60px;
        margin: 0 auto;
        text-align: center;
    }

    .hwmOrderPartsInner {
        gap: 40px;
    }

    .hwmCategoriesGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .hwmInspectList li,
    .hwmCultureList li {
        list-style: none;
    }

    .hwmInspectList {
        padding-left: 0;
    }
}


@media only screen and (max-width: 768px) {
    .hwmStaffModalBio {
        overflow: unset;
        max-height: unset;
        height: unset;
    }
    .hwmStaffModalBody {
        overflow: unset;
    }

    .hwmSecondaryLocBar {
        padding: 8px 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }
    .hwmSubLocBarInner {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px 10px;
        width: 100%;
        min-width: 0;
    }
    .hwmSubLocBarGroup {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px 10px;
    }
    .hwmSubLocBarItem {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background-color: rgba(255, 255, 255, 0.06);
        padding: 4px 9px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        max-width: 100%;
        box-sizing: border-box;
    }
    .hwmSubLocBarName {
        font-size: 11px;
    }
    .hwmSubLocBarSub {
        display: none;
    }
    .hwmSubLocBarPhone {
        font-size: 12px;
    }
    .hwmSubLocBarDivider {
        display: none;
    }

    .hwmCareersGrid{
        grid-template-columns: 1fr;
    }
    .hwmMarinaBody {
        padding: 0 20px;
        max-width: 100%;
        left: 0;
    }
    .hwmMarinaBody .hwmH4 {
        font-size: 33px;
    }
    .hwmBrandCardBody .hwmPara {
        max-width: 100%;
    }
    .thank-you-content-box {
        width: 100%;
    }

    .firstSectionTopMargin {
        margin-top: 40px;
    }

    .commonSectionInnerWrap {
        gap: 40px;
        flex-flow: column-reverse;
    }

    .commonSectionTextWrapper {
        width: 100%;
        max-width: 600px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .commonSectionImageWrapper {
        width: 100%;
    }
    .hwmCultureList ul {
        padding-left: 0;
        margin: 0;
    }

    .hwmCultureList li {
        list-style: none;
    }

    .hwmHoursGrid,
    .hwmAmenitiesGrid {
        grid-template-columns: 1fr;
    }

    .hwmHours {
        padding: 0 0 50px 0;
    }

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

    .hull-sec {
        padding-bottom: 0 !important;
    }

    .hwmH2 {
        font-size: 37px;
        line-height: 40px;
    }

    .parts-banner-contnt {
        width: 90%;
    }

    .hwmWaysHead {
        margin-bottom: 30px;
    }

    .hwmWays {
        padding: 50px 6.04%;
    }

    .hwmOrderPartsInfo .hwmPara {
        max-width: 100%;
    }

    .hwmOrderFormSubmit {
        justify-content: center;
    }

    .hwmOrderForm {
        width: 100%;
        max-width: 100%;
    }

    .hwmStorageLocsHead {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .hwmWaysGrid,
    .hwmStorageLocsGrid {
        gap: 20px;
        text-align: center;
    }

    .hwmStorageLocsGrid,
    .hwmWaysGrid,
    .hwmOrderPartsInner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .storage-content {
        max-width: 85% !important;
    }

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

    .hwmMarinaBody {
        padding: 0 20px;
        max-width: 100%;
        text-align: center;
    }
    .hwmMarinaCard::after {
        height: 100%;
    }

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

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

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

    .hwmBlogMain .hwmH2 {
        font-size: 30px;
        line-height: 35px;
    }

    .hwmBlogBody h1,
    .hwmBlogBody h2 {
        font-size: 27px;
        line-height: 30px;
    }

    .hwmBlogBody h3,
    .hwmBlogBody h4,
    .hwmBlogBody h5,
    .hwmBlogBody h6 {
        font-size: 18px;
    }

    .hwmHero.hwmHeroPage .hwmHeroInnerCentered {
        width: 100%;
    }

    .hwmServiceGrid {
        padding: 50px 25px;
    }

    .hwmGallery {
        padding-top: 0;
    }

    .hwmCardGrid--3 {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .hwmCardGrid {
        padding: 0 0;
    }

    .hwmCtaCards {
        justify-content: center;
    }

    .modal-detail-hero {
        min-height: 560px;
    }

    .modal-detail-hero-copy {
        margin-bottom: 20px;
    }

    .modal-detail-cta-btn,
    .modal-detail-cta-secondary {
        width: 100%;
    }

    .modal-detail-intro {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .modal-detail-specs,
    .modal-detail-features,
    .modal-detail-gallery,
    .modal-detail-contact {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .hwmCardItemBody {
        text-align: center;
    }

    .hwmCardItemIcon {
        margin: 0 auto 20px auto;
    }

    .hwmStaffModalDialog {
        flex-direction: column;
        max-height: 88vh;
        overflow-y: auto;
    }

    .hwmStaffModalImg {
        flex: 0 0 auto;
        aspect-ratio: 16 / 10;
    }

    .hwmStaffModalBody {
        padding: 40px 24px 32px;
    }

    .hwmStaffModalName {
        font-size: 32px;
    }

    .hwmStaffModalPhone {
        font-size: 26px;
    }

}

/* ============================================================
   RESPONSIVE — ≤ 575px (mobile)
   ============================================================ */
@media (max-width: 576px) {
    .hwm-job-modal-section {
        padding: 15px 25px;
    }

    .brand-page-slider .owl-nav .owl-prev {
        left: 0 !important;
    }

    .brand-page-slider .owl-nav .owl-next {
        right: 0 !important;
    }

    .mobileLogoWrap {
        max-width: 150px;
    }

    .hwmLocPanel {
        padding: 32px 33px;
    }

    .hwmLocPanel--map iframe {
        min-height: 300px;
    }

    .hwmVideoTitle {
        text-align: center;
    }

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

    .hwmCategoryCard {
        text-align: center;
    }

    .hwmCategoryName {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    .storage-content {
        max-width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }

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

    .mdHero {
        height: 400px;
    }

    .mdHeroLogo {
        max-height: 80px;
        margin-bottom: 15px;
    }

    .mdBtnWhite,
    .mdBtnBlack,
    .mdBtnOutlineBlack {
        padding: 10px 30px;
        font-size: 12px;
        display: block;
        margin: 10px auto;
    }

    .mdAbout,
    .mdSpecs {
        padding: 40px 0;
    }

    .mdSpecCard {
        padding: 20px 15px;
    }

    .mdGallery {
        padding: 30px 0;
    }

    .mdGalleryTitle,
    .mdFeatureTitle {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .mdVirtualTour,
    .mdCTA {
        padding: 40px 15px;
        margin-top: 30px;
    }

    .mdVirtualTitle,
    .mdCTATitle {
        font-size: 24px;
    }

    .mdVirtualSubtitle,
    .mdCTASubtitle {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .mdCTABtn {
        padding: 12px 40px;
        font-size: 14px;
    }

    .hwmFormInfo {
        text-align: center;
    }

    .service-cards {
        text-align: center !important;
    }

    .hwmServiceGridHead .hwmPara {
        max-width: 100%;
    }

    .hwmHero.hwmHeroPage .hwmHeroInner {
        left: 0%;
        text-align: center;
    }

    .hwmCultureList li {
        list-style: none;
    }

    .hwmStatCalc {
        margin-bottom: 40px;
    }

    .hwmEventInventory {
        overflow: hidden;
    }

    .hwmEventInventory .hwmArrivalsCarouselWrap {
        padding: 0 0 0 32px;
    }

    .hwmEventInventory .hwmArrivalsPrev {
        left: 4px;
    }

    .hwmEventInventory .hwmArrivalsNext {
        right: 4px;
    }

    .hwmCams {
        padding: 0 24px 64px;
        margin-top: -40px;
        margin-bottom: 40px;
    }

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

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

    .hwmVideoFilters {
        gap: 20px;
    }

    .footerBottom {
        gap: 16px;
    }

    .footerBottom *:not(:first-child)::after {
        left: -8px;
    }

    .hwmVideos {
        padding: 48px 24px 64px;
        margin-bottom: 40px;
    }

    .hwmVideosGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }

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

    .hwmStaff:last-of-type {
        padding-bottom: 64px;
    }

    .hwmStaffSectionHead {
        gap: 16px;
        margin-bottom: 40px;
    }

    .hwmStaffRule {
        max-width: 120px;
    }

    .hwmStaffGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
    }

    .hwmStaffName {
        font-size: 18px;
    }

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

    .hwmListFilters {
        padding: 32px 24px;
        gap: 24px;
    }

    .hwmListFilter {
        font-size: 20px;
        line-height: 28px;
    }

    .hwmArticleGrid {
        padding: 0 24px 64px;
        gap: 48px 32px;
    }

    .hwmArticleGrid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
        padding: 0 24px 64px;
    }

    .hwmH3Listing {
        font-size: 32px;
        line-height: 30px;
    }

    .hwmBlogDetail {
        padding: 32px 24px 64px;
    }

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

    .hwmDetailCrumb {
        padding: 16px 24px 0;
    }

    .hwmEventMeta {
        padding: 48px 24px;
    }

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

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

    .hwmEventFeatures {
        padding: 48px 24px;
    }

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

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

    .hwmEventBrands {
        padding: 48px 24px;
    }

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

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

    .hwmEventInventoryHead {
        padding: 0 24px;
    }

    .hwmEventInventoryTrack {
        gap: 16px;
        padding: 0 24px;
    }

    .hwmHero.hwmHeroPage--brand .hwmHeroInner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hwmBrandLogo {
        max-width: 220px;
    }

    .hwmPromoStrip {
        padding: 32px 24px;
    }

    .hwmModels {
        padding: 64px 24px;
    }

    .hwmModelsGrid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

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

    .hwmBrandStripItem {
        flex: 0 0 400px;
        height: 280px;
    }

    .hwmInventorySection {
        padding: 56px 0 0;
    }

    .hwmWays {
        padding: 64px 24px;
    }

    .hwmWaysGrid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hwmWayCardTitle {
        font-size: 32px;
        line-height: 30px;
    }

    .hwmStorageLocs {
        padding: 64px 24px;
    }

    .hwmStorageLocsHead {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hwmStorageLocsGrid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hwmStorageLocCardTitle {
        font-size: 32px;
        line-height: 30px;
    }

    .hwmQuoteSection {
        padding: 64px 24px;
    }

    .hwmQuoteText {
        font-size: 18px;
        line-height: 28px;
    }

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

    .hwmBeforeAfter {
        padding: 56px 24px;
    }

    .hwmBeforeAfterGrid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

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


    .hwmLocPanels {
        padding: 40px 0;
    }

    .hwmLocPanelsInner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hwmLocPanel,
    .hwmLocPanel--map {
        border-radius: 4px;
        min-height: 240px;
    }

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

    .hwmHoursGrid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hwmAmenities {
        padding: 64px 24px;
    }

    .hwmAmenitiesGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
    }

    .hwmFaqPage {
        padding: 56px 24px 64px;
    }

    .hwmFaqSectionBody {
        padding: 4px 16px 24px;
    }

    .hwmFaqSection>summary {
        font-size: 20px;
        line-height: 28px;
    }

    .hwmIconRow {
        padding: 16px 24px 48px;
    }

    .hwmIconRowGrid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hwmAwards {
        padding: 16px 24px 64px;
    }

    .hwmShipProducts {
        padding: 56px 24px 72px;
    }

    .hwmShipProductsGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .hwmShipProductTitle {
        font-size: 32px;
        line-height: 30px;
    }

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

    .hwmShipCallout {
        padding: 64px 24px;
    }

    .hwmShipCalloutPhone {
        font-size: 32px;
    }

    .hwmLinksPage {
        padding: 40px 24px 72px;
    }

    .hwmLinksGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .hwmCareers {
        padding: 56px 24px 72px;
    }

    .hwmCareersGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hwmHeroCta {
        min-height: 0;
        padding: 24px;
    }

    .hwmHeaderInner {
        height: 72px;
        padding: 0 20px;
    }

    .hwmNav,
    .hwmHeaderLoc,
    .hwmHeaderLocDropdown {
        display: none;
    }

    .hwmLogo {
        position: static;
        transform: none;
        margin-right: auto;
    }

    .hwmLogo img {
        height: 56px;
    }

    .hwmHeaderRight {
        flex: 0 0 auto;
        gap: 0;
    }

    .hwmHeaderMore span:first-child {
        display: none;
    }

    /* Footer */
    .hwmFooterTop {
        flex-direction: column;
        min-height: 0;
        padding: 0;
    }

    .hwmFooterImage img {
        min-height: 360px;
        height: 360px;
    }

    .hwmNewsletter {
        padding: 56px 24px;
    }

    .hwmNewsletter .hwmH2 {
        font-size: 42px;
        line-height: 44px;
    }

    .hwmFooterMid {
        margin: 0;
        padding: 56px 32px;
    }

    .hwmFooterMidInner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hwmFooterCols {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .hwmFooterPhone {
        font-size: 32px;
    }

    .hwmFooterPolicy p {
        font-size: 14px;
        line-height: 22px;
    }

    .hwmH1 {
        font-size: 52px;
        line-height: 56px;
        text-align: center;
    }

    .hwmHeroInner {
        left: 0;
        width: 100%;
    }

    .hwmHeroBtn {
        align-self: center;
    }

    .hwmArrivalsHead .hwmPara {
        max-width: 100%;
    }

    .hwmHeroBtn {
        margin-top: 40px;
    }

    /* Intro */
    .hwmIntro {
        padding: 64px 0 0;
    }

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

    .hwmCtaCards {
        gap: 16px;
        margin-bottom: 56px;
    }

    .hwmCtaCard {
        height: 100px;
    }

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

    .hwmBrandGrid,
    .hwmMarinaGrid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 0;
    }

    .hwmBrandCard,
    .hwmMarinaCard {
        aspect-ratio: 4 / 5;
        min-height: 0;
    }

    .hwmBrandCardBody,
    .hwmMarinaBody {
        height: unset;
        padding: 32px 24px 24px;
    }

    .hwmMarinaBody {
        padding: 60px 24px 24px;
    }

    .hwmBrandWordmark {
        font-size: 30px;
        margin-bottom: 24px;
    }

    .hwmMarinaBody .hwmH4 {
        font-size: 30px;
        line-height: 28px;
        margin-bottom: 12px;
    }

    /* Arrivals */
    .hwmArrivals {
        padding: 64px 0;
    }

    .hwmArrivalsInner {
        padding: 0 24px;
    }

    .hwmArrivalsCarouselWrap,
    .hwmEventInventory .hwmArrivalsCarouselWrap {
        padding: 0;
    }

    .hwmArrivalsPrev,
    .hwmEventInventory .hwmArrivalsPrev {
        left: -8px;
    }

    .hwmArrivalsNext,
    .hwmEventInventory .hwmArrivalsNext {
        right: -8px;
    }

    /* Service + Storage */
    .hwmServiceStorage {
        grid-template-columns: 1fr;
    }

    .hwmServiceCard {
        min-height: 480px;
    }

    /* Marinas */
    .hwmMarinas {
        padding: 64px 0 0;
    }

    /* CTA Bar */
    .hwmCtaBar {
        padding: 48px 24px;
    }

    .hwmCtaBarItem {
        height: 100px;
        gap: 12px;
    }

    .hwmCtaBarIcon {
        width: 40px;
        height: 40px;
    }

    .hwmCtaBarText {
        font-size: 24px;
    }


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

    .hwmCardGrid {
        padding: 0 24px;
    }

    .hwmCardGrid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .hwmTravelLift,
    .hwmReasons,
    .hwmFormSection,
    .hwmSteps {
        padding: 64px 24px;
    }

    .hwmTravelLiftGrid {
        gap: 16px;
    }

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

    .hwmReasonsInner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hwmReasonsGrid {
        gap: 32px;
    }

    .hwmFormGrid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hwmLogoStripInner {
        gap: 24px 56px;
    }

    .hwmLogoStripItem {
        font-size: 28px;
    }

    .hwmHero.hwmHeroPage--split .hwmHeroInner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hwmHeroBody {
        max-width: 100%;
    }

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

    /* Locations stack */
    .hwmLocations {
        padding: 64px 0 80px;
        margin-bottom: 40px;
    }

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

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

    .hwmLocationName {
        font-size: 30px;
        line-height: 32px;
    }

    /* Financing hero */
    .hwmHero.hwmHeroPage--finance .hwmHeroInner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Why Finance */
    .hwmWhy {
        padding: 64px 24px;
    }

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

    /* Stat + Calculator */
    .hwmStatCalcInner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 64px 24px;
    }

    .hwmStat {
        font-size: 56px;
        line-height: 56px;
        max-width: 100%;
    }

    .hwmCalc {
        max-width: 100%;
        margin: 0 auto;
        padding: 32px;
    }


    .hwmAboutSubHero {
        padding: 48px 24px 64px;
        margin-bottom: 0;
    }

    .hwmAboutSubHeroInner {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .hwmAboutSubHero .hwmPara {
        max-width: 100%;
        text-align: center;
    }

    .hwmCategories {
        padding: 64px 24px;
    }

    .hwmCategoriesGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .hwmCallout {
        padding: 40px 24px;
    }

    .hwmOrderParts {
        padding: 64px 24px;
    }

    .hwmOrderPartsInner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

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

    .hwmOrderLocPhone {
        font-size: 32px;
    }

    .hwmHeader {
        height: 72px;
    }

    .hwmHeaderInner {
        height: 72px;
        padding: 0 20px;
    }

    .hwmNav,
    .hwmHeaderLoc,
    .hwmHeaderLocDropdown {
        display: none;
    }

    .hwmLogo {
        position: static;
        transform: none;
        margin-right: auto;
    }

    .hwmLogo img {
        height: 56px;
    }

    .hwmHeaderRight {
        flex: 0 0 auto;
        gap: 0;
    }

    .hwmHeaderMore span:first-child {
        display: none;
    }

    /* Footer */
    .hwmFooterTop {
        flex-direction: column;
        min-height: 0;
        padding: 0;
    }

    .hwmFooterImage img {
        min-height: 360px;
        height: 360px;
    }

    .hwmNewsletter {
        padding: 56px 24px;
    }

    .hwmNewsletter .hwmH2 {
        font-size: 42px;
        line-height: 44px;
    }

    .hwmFooterMid {
        margin: 0;
        padding: 56px 32px;
    }

    .hwmFooterMidInner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hwmFooterCols {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .hwmFooterPhone {
        font-size: 32px;
    }

    .hwmFooterPolicy p {
        font-size: 14px;
        line-height: 22px;
    }

    .hwmH1 {
        font-size: 52px;
        line-height: 56px;
    }

    .hwmHeroBtn {
        margin-top: 40px;
    }

    /* Intro */
    .hwmIntro {
        padding: 64px 0 0;
    }

    .hwmIntroHead,
    .hwmArrivalsHead,
    .hwmMarinasHead,
    .hwmServiceGridHead {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 24px;
        margin-bottom: 40px;
    }

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

    .hwmCtaCards {
        margin-bottom: 56px;
    }

    .hwmCtaCard {
        height: 100px;
    }

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

    .hwmBrandGrid,
    .hwmMarinaGrid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 0;
    }

    .hwmBrandCard,
    .hwmMarinaCard {
        aspect-ratio: 4 / 5;
        min-height: 0;
    }

    .hwmBrandCardBody,
    .hwmMarinaBody {
        height: 50%;
        padding: 32px 24px 24px;
    }

    .hwmMarinaBody {
        padding: 60px 24px 24px;
        left: 0;
        max-width: 100%;
        text-align: center;
    }

    .hwmBrandWordmark {
        font-size: 30px;
        margin-bottom: 24px;
    }

    .hwmMarinaBody .hwmH4 {
        font-size: 30px;
        line-height: 28px;
        margin-bottom: 12px;
    }

    /* Arrivals */
    .hwmArrivals {
        padding: 64px 0;
    }

    .hwmArrivalsInner {
        padding: 0 24px;
    }

    .hwmArrivalsCarouselWrap,
    .hwmEventInventory .hwmArrivalsCarouselWrap {
        padding: 0;
    }

    .hwmArrivalsPrev,
    .hwmEventInventory .hwmArrivalsPrev {
        left: -8px;
    }

    .hwmArrivalsNext,
    .hwmEventInventory .hwmArrivalsNext {
        right: -8px;
    }

    /* Arrows sat at calc(629px / 2) — half the *desktop* card height — which on
       phones lands on the condition + title. Anchor them to the middle of the card
       photo instead (aspect-ratio 520 / 360). Card width here is the wrap width
       (100vw minus the 24px inner padding each side) divided by the 1.05 Owl items,
       less the 20px Owl margin. */
    .hwmArrivals .hwmArrivalsBtn {
        top: calc((((100vw - 48px) / 1.05) - 20px) * 0.3462);
    }

    /* Service + Storage */
    .hwmServiceStorage {
        grid-template-columns: 1fr;
    }

    .hwmServiceCard {
        min-height: 480px;
    }

    .hwmServiceCardBody .hwmH2 {
        margin-bottom: 15px;
    }

    .hwmServiceCardBody {
        padding: 0 32px;
        max-width: 100%;
        left: 0;
        text-align: center;
    }

    /* Marinas */
    .hwmMarinas {
        padding: 64px 0 0;
    }

    /* CTA Bar */
    .hwmCtaBar {
        padding: 48px 24px;
    }

    .hwmCtaBarItem {
        height: 100px;
        gap: 12px;
    }

    .hwmCtaBarIcon {
        width: 40px;
        height: 40px;
    }

    .hwmCtaBarText {
        font-size: 24px;
    }

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

    .hwmCardGrid {
        padding: 0 24px;
    }

    .hwmCardGrid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .hwmCardItemImg {
        height: 200px;
    }

    .hwmTravelLift,
    .hwmReasons,
    .hwmFormSection,
    .hwmSteps {
        padding: 64px 24px;
    }

    .hwmTravelLiftGrid {
        gap: 16px;
    }

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

    .hwmReasonsInner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hwmReasonsGrid {
        gap: 32px;
    }

    .hwmFormGrid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hwmLogoStripInner {
        gap: 24px 56px;
    }

    .hwmLogoStripItem {
        font-size: 28px;
    }

    .hwmHero.hwmHeroPage--split .hwmHeroInner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hwmHeroBody {
        max-width: 100%;
    }

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

    /* Locations stack */
    .hwmLocations {
        padding: 64px 0 80px;
    }

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

    .hwmLocationGrid {
        grid-template-columns: 1fr;
        padding: 0 24px;
    }

    .hwmLocationName {
        font-size: 30px;
        line-height: 32px;
    }

    /* Financing hero */
    .hwmHero.hwmHeroPage--finance .hwmHeroInner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Why Finance */
    .hwmWhy {
        padding: 64px 24px;
    }

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

    /* Stat + Calculator */
    .hwmStatCalcInner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 64px 24px;
    }

    .hwmStat {
        font-size: 56px;
        line-height: 56px;
        max-width: 100%;
    }

    .hwmCalc {
        max-width: 100%;
        margin: 0 auto;
        padding: 32px;
    }

    .service-content .hwmWhiteText {
        color: black !important;
    }

    .service-content {
        position: relative !important;
        transform: unset !important;
        z-index: 1;
        padding: 50px 50px 0 50px;
        text-align: center;
    }

    .hwmIntroHead,
    .hwmArrivalsHead,
    .hwmMarinasHead {
        text-align: center;
    }

    .hwmIntroHead .hwmPara {
        max-width: 100%;
    }

    .mdGalleryCarousel .owl-nav button {
        width: 40px;
        height: 40px;
        font-size: 32px;
    }

    .mdGalleryCarousel .owl-nav button.owl-prev {
        margin-left: -20px;
    }

    .mdGalleryCarousel .owl-nav button.owl-next {
        margin-right: -20px;
    }

    .hwmSplitBody {
        max-width: 100%;
        text-align: center;
    }

    .hwmCtaBarInner {
        justify-content: center;
        align-items: center;
        gap: 0;
        flex-direction: column;
    }

    .scrolled-para {
        max-height: unset !important;
    }

    .hwmBrandCardBody .hwmPara {
        max-width: 100%;
        text-align: center;
    }

    .hwmBrandLogoWrap {
        margin: 0 auto 40px auto;
    }

    .arrival-title-wrapper {
        height: unset;
    }

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

    .hwmHero .hwmHeroBtn {
        margin-top: 16px;
    }

    .hwmHero {
        min-height: 600px;
    }

    .hwmCamPlay,
    .hwmVideoThumbPlay {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .hwmHero.hwmHeroPage--finance .hwmHeroInner {
        gap: 6px;
    }

    .hwmVideoFilters {
        gap: 16px;
    }

    .hwmVideoFilter {
        font-size: 16px;
    }

    .hwmVideosGrid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hwmStaffSectionHead {
        flex-direction: column;
        gap: 12px;
    }

    .hwmStaffRule {
        width: 100%;
        max-width: 200px;
    }

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

    .hwmListFilters {
        gap: 16px;
    }

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

    .hwmArticleGrid--2,
    .hwmArticleGrid--3 {
        grid-template-columns: 1fr;
    }

    .hwmH3Listing {
        font-size: 26px;
        line-height: 28px;
    }

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

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

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

    .hwmModelCardSize {
        font-size: 32px;
        line-height: 30px;
    }

    .hwmBrandStripItem {
        flex: 0 0 280px;
        height: 200px;
    }

    .hwmStorageLocCardTag {
        font-size: 20px;
        line-height: 28px;
    }

    .hwmWhyGrid--4 {
        grid-template-columns: 1fr;
    }

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


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

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

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

    .hwmShipCalloutPhone {
        font-size: 28px;
    }

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

    .hwmLinksGrid--center {
        grid-template-columns: 1fr;
    }

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

    .hwmHeaderInner {
        padding: 0 16px;
    }

    .hwmLogo img {
        height: 48px;
    }

    .hwmNewsletter .hwmH2 {
        font-size: 32px;
        line-height: 36px;
    }

    .hwmFooterMid {
        padding: 48px 24px;
    }

    .hwmFooterCols {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }

    .hwmFooterCol .hwmH4 {
        margin-bottom: 14px;
    }

    .hwmFooterPhoneLabel {
        font-size: 20px;
    }

    .hwmFooterPhone {
        font-size: 28px;
    }

    .hwmFooterPolicy {
        padding: 24px 16px;
    }

    .hwmFooterPolicy p {
        font-size: 13px;
        line-height: 20px;
    }


    .hwmH1 {
        font-size: 38px;
        line-height: 42px;
    }

    /* Sections */
    .hwmH2 {
        font-size: 32px;
        line-height: 36px;
    }

    .hwmIntro,
    .hwmArrivals {
        padding: 48px 0 0;
    }

    .hwmArrivals {
        padding-bottom: 56px;
    }

    .hwmMarinas {
        padding: 48px 0 0;
    }

    .hwmCtaCard {
        height: 88px;
    }

    .hwmCtaCardText {
        font-size: 22px;
    }

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

    .hwmMarinaCard {
        aspect-ratio: 3 / 4;
    }

    .hwmMarinaBody {
        padding: 28px 20px 20px;
    }

    .hwmMarinaBody {
        padding: 52px 20px 20px;
    }

    .hwmBrandWordmark {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .hwmMarinaBody .hwmH4 {
        font-size: 26px;
        line-height: 26px;
    }

    .hwmCtaBarItem {
        height: 88px;
    }

    .hwmCtaBarText {
        font-size: 22px;
    }

    .hwmArrivalsHead {
        padding: 0 16px;
    }

    .hwmArrivalsInner {
        padding: 0 16px;
    }

    .hwmArrivalInfo {
        padding: 20px 24px 14px;
        height: auto;
    }

    .hwmArrivalTitle {
        font-size: 30px;
        line-height: 28px;
        min-height: 0;
    }

    .hwmArrivalPrice {
        font-size: 24px;
    }

    .hwmBreadcrumb {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .hwmHeroSub {
        margin-top: 20px;
    }

    .hwmSplit,
    .hwmTravelLift,
    .hwmReasons,
    .hwmFormSection,
    .hwmSteps {
        padding: 20px 16px;
    }

    .hwmCardGrid {
        padding: 0 16px;
    }

    .hwmCardGrid--3 {
        grid-template-columns: 1fr;
    }

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

    .hwmReasonsGrid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hwmFormCard {
        padding: 24px;
    }

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

    .hwmLogoStripItem {
        font-size: 24px;
    }

    .hwmContactPhone {
        font-size: 22px;
    }

    .hwmHeroForm {
        padding: 24px 20px 20px;
    }

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

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

    .hwmLocationPhoneLink {
        font-size: 26px;
        line-height: 28px;
    }

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

    .hwmStat {
        font-size: 42px;
        line-height: 44px;
    }

    .hwmCalc {
        padding: 24px;
    }

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

    .hwmAboutSubHeroLabel {
        font-size: 18px;
    }

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

    .hwmCategoryName {
        font-size: 18px;
    }

    .hwmCalloutInner .hwmH2 {
        font-size: 32px;
        line-height: 36px;
    }

    .hwmOrderLocPhone {
        font-size: 28px;
    }

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

    .hwmHeaderInner {
        padding: 0 16px;
    }

    .hwmLogo img {
        height: 48px;
    }

    .hwmNewsletter .hwmH2 {
        font-size: 32px;
        line-height: 36px;
    }

    .hwmFooterMid {
        padding: 48px 24px;
    }

    .hwmFooterCols {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }

    .hwmFooterCol .hwmH4 {
        margin-bottom: 14px;
    }

    .hwmFooterPhoneLabel {
        font-size: 20px;
    }

    .hwmFooterPhone {
        font-size: 28px;
    }

    .hwmFooterPolicy {
        padding: 24px 16px;
    }

    .hwmFooterPolicy p {
        font-size: 13px;
        line-height: 20px;
    }


    .hwmH1 {
        font-size: 38px;
        line-height: 42px;
    }


    /* Sections */
    .hwmH2 {
        font-size: 32px;
        line-height: 36px;
    }

    .hwmIntro,
    .hwmArrivals {
        padding: 48px 0 0;
    }

    .hwmArrivals {
        padding-bottom: 56px;
    }

    .hwmMarinas {
        padding: 48px 0 0;
    }

    .hwmCtaCard {
        height: 88px;
    }

    .hwmCtaCardText {
        font-size: 22px;
    }

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

    .hwmMarinaCard {
        aspect-ratio: 3 / 4;
    }

    .hwmMarinaBody {
        padding: 28px 20px 20px;
    }

    .hwmMarinaBody {
        padding: 52px 20px 20px;
    }

    .hwmBrandWordmark {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .hwmMarinaBody .hwmH4 {
        font-size: 26px;
        line-height: 26px;
    }

    .hwmServiceCardBody {
        padding: 0 24px;
    }

    .hwmCtaBarItem {
        height: 88px;
    }

    .hwmCtaBarText {
        font-size: 22px;
    }

    .hwmArrivalsHead {
        padding: 0 16px;
    }

    .hwmArrivalsInner {
        padding: 0 16px;
    }

    .hwmArrivalInfo {
        padding: 20px 24px 14px;
        height: auto;
    }

    .hwmArrivalTitle {
        font-size: 22px;
        line-height: 28px;
        min-height: 0;
    }

    .hwmArrivalPrice {
        font-size: 24px;
    }


    .hwmBreadcrumb {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .hwmHeroSub {
        margin-top: 20px;
    }

    .hwmSplit,
    .hwmTravelLift,
    .hwmReasons,
    .hwmFormSection,
    .hwmSteps {
        padding: 20px 16px;
    }

    .hwmCardGrid {
        padding: 0 16px;
    }

    .hwmCardGrid--3 {
        grid-template-columns: 1fr;
    }

    .hwmCardItemImg {
        height: 220px;
    }

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

    .hwmReasonsGrid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hwmFormCard {
        padding: 24px;
    }

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

    .hwmLogoStripItem {
        font-size: 24px;
    }

    .hwmContactPhone {
        font-size: 22px;
    }

    .hwmHeroForm {
        padding: 24px 20px 20px;
    }

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

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

    .hwmLocationPhoneLink {
        font-size: 26px;
        line-height: 28px;
    }

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

    .hwmStat {
        font-size: 42px;
        line-height: 44px;
    }

    .hwmCalc {
        padding: 24px;
    }

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

    .mdGalleryCarousel .owl-nav button {
        width: 35px;
        height: 35px;
        font-size: 28px;
    }

    .mdGalleryCarousel .owl-nav button.owl-prev {
        margin-left: -10px;
    }

    .mdGalleryCarousel .owl-nav button.owl-next {
        margin-right: -10px;
    }

    .service-content {
        padding: 25px 25px 0 25px;
    }
}

@media (max-width: 480px) {
    .hwmSecondaryLocBar {
        padding: 6px 4px;
    }
    .hwmSubLocBarInner {
        gap: 5px 6px;
    }
    .hwmSubLocBarGroup {
        gap: 5px 6px;
    }
    .hwmSubLocBarItem {
        padding: 3px 7px;
        gap: 4px;
    }
    .hwmSubLocBarIcon {
        font-size: 10px;
    }
    .hwmSubLocBarName {
        font-size: 10px;
    }
    .hwmSubLocBarPhone {
        font-size: 11px;
    }
}

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

    .hwmSubLocBarItem {
        min-height: 65px;
        padding: 10px 18px;
    }

    /* Remove vertical separator from second column */
    .hwmSubLocBarItem:nth-child(2)::before,
    .hwmSubLocBarItem:nth-child(4)::before {
        display: none;
    }

    /* Add horizontal separator between rows */
    .hwmSubLocBarItem:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

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

    .hwmSubLocBarItem {
        min-height: 60px;
        padding: 9px 20px;
        justify-content: flex-start;
    }

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

    .hwmSubLocBarItem + .hwmSubLocBarItem {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hwmSubLocBarName {
        font-size: 14px;
    }

    .hwmSubLocBarSub,
    .hwmSubLocBarPhone {
        font-size: 11px;
    }

    .hwmSubLocBarIcon {
        width: 16px;
        text-align: center;
    }
}


/* ===== menu: full brand list + submenu affordances ===== */

/* The logo cards only cover the franchise lines, so the full list of makes we stock
   sits underneath them in both the desktop mega menu and the mobile Boat Sales panel. */
.megaMenuAllBrands {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #D9D9D9;
}

.megaMenuAllBrandsHeading,
.menuAllBrandsList + .megaMenuAllBrandsHeading {
    color: var(--Navy, #000525);
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.menuAllBrandsList {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.menuAllBrandsLink {
    color: var(--Black);
    font-family: var(--regular-segoe-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.menuAllBrandsLink:hover {
    color: var(--Black);
    text-decoration: underline;
}

/* Desktop shows them as one wrapping row so the mega menu does not grow a long column. */
.menuAllBrandsList--inline {
    display: flex;
    flex-wrap: wrap;
    column-gap: 32px;
    row-gap: 4px;
}

.menuAllBrandsList--inline li {
    margin-bottom: 8px;
}

/* A chevron marks the mobile links that open a panel instead of navigating, so it is
   obvious which entries have more behind them. */
.mobileMenuLinkList .hasSubmenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobileMenuLinkList .hasSubmenu::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: 16px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
}

/* ============================================================
   HOME BRAND CARDS RESPONSIVE (< 992px)
   ============================================================ */
@media (max-width: 991.98px) {
    /* Strictly hide brand descriptions on all screens < 992px */
    .home-brand-description {
        display: none !important;
    }

    /* Arranged in a balanced, neat 2-column grid across tablet and mobile */
    .hwmBrandGrid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 4% !important;
    }

    .hwmBrandGrid a {
        display: block;
        text-decoration: none;
    }

    /* Proportional landscape aspect-ratio instead of giant portrait banner */
    .hwmBrandCard {
        aspect-ratio: 16 / 10 !important;
        min-height: unset !important;
        height: auto !important;
        border-radius: 6px;
        overflow: hidden;
        position: relative;
        background-color: var(--navy, #000525);
    }

    /* Rich, smooth overlay so boat image shows nicely with high contrast for white logos */
    .hwmBrandCard::after {
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100% !important;
        background: linear-gradient(180deg, rgba(0, 5, 37, 0.2) 0%, rgba(0, 5, 37, 0.45) 45%, rgba(0, 5, 37, 0.8) 100%) !important;
        pointer-events: none;
    }

    /* Center brand content vertically and horizontally */
    .hwmBrandCardBody {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px 14px !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        text-align: center !important;
        z-index: 2;
    }

    /* Logo wrap: eliminate dead 40px desktop margin and center properly */
    .hwmBrandLogoWrap {
        max-width: 160px !important;
        max-height: 52px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hwmBrandLogoWrap img,
    .hwmBrandLogo {
        max-width: 100% !important;
        max-height: 48px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
        transition: transform 0.3s ease;
    }

    /* Subtle hover/active micro-animation */
    .hwmBrandCardImg {
        transition: transform 0.4s ease;
    }

    .hwmBrandCard:hover .hwmBrandCardImg,
    .hwmBrandCard:active .hwmBrandCardImg {
        transform: scale(1.04);
    }

    .hwmBrandCard:hover .hwmBrandLogoWrap img,
    .hwmBrandCard:hover .hwmBrandLogo {
        transform: scale(1.05);
    }
}

/* Mobile screens (phones ≤ 576px) */
@media (max-width: 575.98px) {
    .hwmBrandGrid {
        gap: 6px !important;
        padding: 0 12px !important;
    }

    .hwmBrandCard {
        aspect-ratio: 16 / 11 !important;
        border-radius: 4px;
    }

    .hwmBrandCardBody {
        padding: 12px 8px !important;
    }

    .hwmBrandLogoWrap {
        max-width: 125px !important;
        max-height: 40px !important;
        margin: 0 auto !important;
    }

    .hwmBrandLogoWrap img,
    .hwmBrandLogo {
        max-height: 36px !important;
    }
}

/* Extra small screens (≤ 360px) */
@media (max-width: 360px) {
    .hwmBrandGrid {
        gap: 4px !important;
        padding: 0 8px !important;
    }

    .hwmBrandCard {
        aspect-ratio: 4 / 3 !important;
    }

    .hwmBrandLogoWrap {
        max-width: 105px !important;
        max-height: 34px !important;
    }

    .hwmBrandLogoWrap img,
    .hwmBrandLogo {
        max-height: 30px !important;
    }
}

/* Ensure brand description is visible on large screens */
@media (min-width: 992px) {
    .home-brand-description {
        display: block !important;
    }
}