@import url('https://fonts.googleapis.com/css2?family=Gantari:wght@400;700;800;900&family=Archivo:wght@400;900&family=Inter:wght@400;700&display=swap');

/* =================================================================
   CAUSEWAY MARINA — style.css

   BASE CSS FIRST, ALL RESPONSIVE LAST.
   1. common      2. header / nav   3. mega menu / mobile menu
   4. footer      5. home page      6. service page
   7. storage page   8. slips page   9. parts page
   10. about page   11. careers page   12. events page
   13. event detail page   14. faq page
   15. contact page   16. status pages   17. rentals page
   (add one numbered region per page here as it's built —
   see STRUCTURE-GUIDE.md §5)
   LAST. RESPONSIVE

   Every @media rule in the whole site lives in the RESPONSIVE half at
   the bottom — one block per breakpoint, never opened twice.

   Design frame: Figma "Madis Home" 4002:961 — 1920 wide.
   Shell math: page content runs 240 → 1680 = 1440 wide, so
     .cwm-shell      = max-width 1480 + 20px side padding → 1440 content.
   The footer is the one section on a different gutter: 200 → 1720 =
   1520 wide (Figma's own divider line is exactly 1520px), so
     .cwm-shell-wide = max-width 1560 + 20px side padding → 1520 content.

   Font note: Figma's "h4" eyebrow style is Acumin Pro Bold, an Adobe
   font with no free web equivalent. Archivo — already used by the
   Figma footer's newsletter form — stands in for it everywhere.
   ================================================================= */

/* ============================== */
/* 1. common css starts here      */
/* ============================== */

/* ---- reset / defaults ---- */
* {
    box-sizing: border-box;
}

/* Clip stray overflow on <html> only. Adding overflow-x to <body> as
   well makes body a second scroll container whose content box can
   lose the scrollbar width, quietly shrinking anything that measures
   against it (Owl sizes the hero slider from its own width). The
   sections that overflow on purpose — .cwm-tiles' -2px gutter row,
   .cwm-split — carry their own overflow:hidden, so body doesn't
   need it. */
html {
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    color: #01080F;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    /* flow-space stand-in for the fixed header (100px in Figma) */
    padding-top: 100px;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease;
}

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

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
}

button {
    font-family: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* ---- icons & images always read as clickable ---- */
/* Applies even with no link and no click handler. Add every new     */
/* media-wrapper class here — never a one-off cursor: pointer.       */
img,
svg,
i[class*="fa-"],
.cwm-tile__media,
.cwm-split__media,
.cwm-hero__media,
.cwm-heroInt__media,
.cwm-whyChoose__media,
.cwm-featureCard__media,
.cwm-heroPhoto,
.cwm-benefits__media,
.cwm-strip__item,
.cwm-partsSplit__media,
.cwm-aboutHero,
.cwm-story__media,
.cwm-locCard__media,
.cwm-careersHero__media,
.cwm-eventCard__media,
.cwm-contact__hero,
.cwm-contactLoc__media {
    cursor: pointer;
}

/* ---- shells ---- */
/* Two gutters exist in this design — see the header comment above. */
.cwm-shell {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 20px;
}

.cwm-shell-wide {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Storage (and the pages that follow it) run a narrower 1280 column:
   Figma pads those frames by 320 instead of 240. */
.cwm-shell-narrow {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Contact runs a 1360 column (Figma pads that frame by 280) */
.cwm-shell-contact {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- grid gutter overrides ---- */
/* Figma's tile wall is 4 x 477px with 4px between and NO outer
   gutter, which is exactly a -2px row margin + 2px column padding.
   Per STRUCTURE-GUIDE.md §6 gotcha 2 this row must never be given
   width:100% — it relies on Bootstrap's width:auto + negative
   margins to expand past its container by the gutter. */
.cwm-row-4 {
    margin-left: -2px;
    margin-right: -2px;
}

.cwm-row-4>[class*="col-"] {
    padding-left: 2px;
    padding-right: 2px;
}

/* Figma's card rows sit on a 40px gutter with no outer gutter — same
   trick at -20px. Never give this row width:100% either. */
.cwm-row-40 {
    margin-left: -20px;
    margin-right: -20px;
}

.cwm-row-40>[class*="col-"] {
    padding-left: 20px;
    padding-right: 20px;
}

/* ---- typography ---- */
.cwm-h1 {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 900;
    font-size: 56px;
    line-height: 56px;
    letter-spacing: 1.12px;
    text-transform: uppercase;
}

.cwm-h2 {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.cwm-h3 {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 32px;
}

.cwm-h5 {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 29px;
}

.cwm-subheader {
    margin: 0;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    /* Figma's Acumin Pro box is 19px tall; Archivo's `normal` gives 17
       and drifts the sections below it, so pin it. */
    line-height: 19px;
    letter-spacing: 1.92px;
    text-transform: uppercase;
}

.cwm-p {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.cwm-p-large {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
}

/* ---- colour helpers ---- */
.cwm-white {
    color: #FFFFFF;
}

.cwm-blackish {
    color: #01080F;
}

.cwm-navy {
    color: #002541;
}

.cwm-navy2 {
    color: #003F6C;
}

.cwm-aqua {
    color: #0381C1;
}

.cwm-gold {
    color: #FFB32E;
}

/* ---- buttons ---- */
/* Figma lays these out to fixed widths (176 / 220). The 27px side
   padding reproduces those widths from the label itself; the
   min-width keeps short labels honest. */
.cwm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    height: 48px;
    padding: 0 27px;
    border-radius: 4px;
    font-family: 'Gantari', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.cwm-btn--outline {
    border: 1px solid #FFFFFF;
    background: transparent;
    color: #FFFFFF;
}

.cwm-btn--outline:hover {
    background: #FFFFFF;
    color: #002541;
}

/* Figma sizes the Parts CTAs to 180 */
.cwm-btn--w180 {
    min-width: 180px;
}

/* About's CTAs are pinned to 140, tighter than the shared padding */
.cwm-btn--w140 {
    width: 140px;
    min-width: 0;
    padding: 0 16px;
}

.cwm-btn--outlineGold {
    border: 1px solid #FFB32E;
    background: transparent;
    color: #FFFFFF;
}

.cwm-btn--outlineGold:hover {
    background: #FFB32E;
    color: #002541;
}

.cwm-btn--outlineNavy {
    border: 1px solid #002541;
    background: transparent;
    color: #002541;
}

.cwm-btn--outlineNavy:hover {
    background: #002541;
    color: #FFFFFF;
}

.cwm-btn--navy {
    background: #002541;
    color: #FFFFFF;
}

.cwm-btn--navy:hover {
    background: #003F6C;
    color: #FFFFFF;
}

/* ---- form validation states (added for the CMS form pipeline) ----
   forms.js writes messages into `.field-error#error_<fieldId>` and adds the
   `error_field` class to the offending input. Class names match forms.js. */

.field-error {
    display: block;
    margin-top: 6px;
    font-family: 'Gantari', sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #C0392B;
}

.field-error:empty {
    margin-top: 0;
}

.error_field {
    border-color: #C0392B !important;
}

input.error_field::placeholder,
textarea.error_field::placeholder {
    color: #C0392B;
}

.honeypot {
    display: none !important;
}

/* .cwm-contactForm and .cwm-applyForm are flex columns with align-items:center,
   so an error div shrinks to its text and looks centred. Stretch it and keep
   the message left-aligned under its field. */
.cwm-contactForm .field-error,
.cwm-applyForm .field-error {
    width: 100%;
    align-self: stretch;
    text-align: left;
}

/* These forms are flex columns with a gap, so a bare error slot would count as
   its own flex item and add an extra gap per field - that is what pushed the
   contact card to 590px against Figma's 580. Each field and its slot now sit
   in a group, so the form has one flex item per field and the gap rhythm is
   exactly the design's. */
.cwm-contactForm__group,
.cwm-applyForm__group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cwm-contactForm__group .field-error,
.cwm-applyForm__group .field-error {
    margin-top: 6px;
}

.cwm-contactForm__group .field-error:empty,
.cwm-applyForm__group .field-error:empty {
    margin-top: 0;
}

/* The reCAPTCHA API injects an extra element into the form container at
   runtime (the submit button carries .g-recaptcha). As a flex item it took a
   whole 12px gap, which is what made the contact card render 592px against
   Figma's 580. Anything that is not one of our own children is taken out of
   the flex flow so it cannot affect the rhythm. */
.cwm-contactForm > :not(.cwm-contactForm__group):not(button):not(.cwm-form__msg):not(input),
.cwm-applyForm > :not(.cwm-applyForm__group):not(button):not(.cwm-form__msg):not(input):not(.cwm-applyForm__file),
.cwm-form > :not(.cwm-form__group):not(button):not(.cwm-form__msg):not(input) {
    position: absolute;
}

/* ---- intl-tel-input: country flag picker on .phoneInput ----
   The plugin wraps the input in a .iti container, which defaults to
   inline-block and would collapse the full-width form fields. */
.iti {
    width: 100%;
    display: block;
}

.iti__flag-container {
    z-index: 3;
}

.iti .cwm-form__input,
.iti .cwm-contactForm__input,
.iti .cwm-applyForm__input {
    width: 100%;
    padding-left: 52px;
}

.iti__country-list {
    font-family: 'Gantari', sans-serif;
    font-size: 14px;
    color: #01080F;
    text-align: left;
    border-radius: 4px;
}

.iti__selected-flag {
    border-radius: 4px 0 0 4px;
}

/* ============================== */
/* 2. header / nav css starts here */
/* ============================== */

.cwm-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    height: 100px;
    background: #FFFFFF;
    border-bottom: 1px solid #E6E6E6;
}

.cwm-header__shell {
    position: relative;
    /* containing block for the dropdown panels (§4) */
    height: 100%;
    display: flex;
    align-items: center;
}

.cwm-header__logo {
    display: block;
    width: 220px;
    flex-shrink: 0;
}

.cwm-header__logo img {
    width: 100%;
    height: auto;
}

/* Figma does not space-between these — the nav + phone sit as one
   right-anchored group (nav 929→1410, phone 1530→1680), so the group
   is pushed right and carries the 120px gap internally. */
.cwm-header__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 120px;
}

.cwm-nav {
    display: flex;
    align-items: center;
    gap: 56px;
}

.cwm-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gantari', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    color: #01080F;
    white-space: nowrap;
}

.cwm-nav__link:hover,
.cwm-nav__link.is-open {
    color: #0381C1;
}

.cwm-nav__chevron {
    width: 12px;
    height: 6px;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.cwm-nav__link.is-open .cwm-nav__chevron {
    transform: rotate(180deg);
}

.cwm-header__call {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
}

.cwm-header__call-label {
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-header__call-number {
    font-family: 'Gantari', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 34px;
    /* Figma's two-line block measures 58px = 24 + 34 */
    color: #003F6C;
}

/* ---- burger (mobile only) ---- */
.cwm-header__burger {
    display: none;
    margin-left: auto;
    width: 28px;
    height: 20px;
    flex-direction: column;
    justify-content: space-between;
}

.cwm-header__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #002541;
    border-radius: 2px;
}

/* ============================== */
/* 3. mega menu / mobile menu css starts here */
/* ============================== */

/* Narrow single-column dropdowns (320x220, no columns or photos) —
   children of the width-constrained shell per §4, right-anchored so
   they track the right-anchored nav at every width.
   Anchoring gotcha: `right` is measured from the shell's PADDING
   edge, so each value below is Figma's own gap to the 1680 content
   edge PLUS the shell's 20px side padding.
     Service  panel right edge 1490 → 1680-1490 = 190 + 20 = 210
     Company  panel right edge 1631 → 1680-1631 =  49 + 20 =  69
   The Service trigger was later relabelled "Service/Winterize"; the
   panel is left-aligned to that trigger, so its offset grows by the
   extra "/WINTERIZE" text (93px in Gantari 700 16px): 210 + 93 = 303. */
.cwm-megamenu {
    position: absolute;
    /* the shell's content box stops at 99px (header is 100 tall incl.
       its 1px bottom border), so nudge past the border to land on 100 */
    top: calc(100% + 1px);
    width: 320px;
    /* Figma's frame is 320x220 INCLUDING the two 1px rules, so the
       padding is 36/38 rather than 37/39: 1+36+144+38+1 = 220. */
    padding: 36px 40px 38px;
    background: #FFFFFF;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
    display: none;
    z-index: 20;
}

.cwm-megamenu.is-open {
    display: block;
}

.cwm-megamenu--service {
    right: 303px;
}

.cwm-megamenu--company {
    right: 69px;
}

.cwm-megamenu__link {
    display: block;
    width: 240px;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-megamenu__link+.cwm-megamenu__link {
    margin-top: 16px;
    /* 40px Figma pitch − 24px line-height */
}

.cwm-megamenu__link:hover {
    color: #0381C1;
}

/* ---- mobile drawer ---- */
.cwm-mobileMenu {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
}

.cwm-mobileMenu.is-open {
    visibility: visible;
    pointer-events: auto;
}

.cwm-mobileMenu__overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 8, 15, .6);
    opacity: 0;
    transition: opacity .3s ease;
}

.cwm-mobileMenu.is-open .cwm-mobileMenu__overlay {
    opacity: 1;
}

.cwm-mobileMenu__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    max-width: 88%;
    height: 100%;
    background: #FFFFFF;
    padding: 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
}

.cwm-mobileMenu.is-open .cwm-mobileMenu__panel {
    transform: translateX(0);
}

.cwm-mobileMenu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E6E6E6;
}

.cwm-mobileMenu__logo {
    display: block;
    width: 160px;
}

.cwm-mobileMenu__logo img {
    width: 100%;
    height: auto;
}

.cwm-mobileMenu__close {
    font-size: 24px;
    line-height: 1;
    color: #002541;
}

.cwm-mobileMenu__nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.cwm-mobileMenu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid #E6E6E6;
    font-family: 'Gantari', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    color: #01080F;
    text-align: left;
}

.cwm-mobileMenu__chevron {
    width: 12px;
    height: 6px;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.cwm-mobileMenu__link.is-open .cwm-mobileMenu__chevron {
    transform: rotate(180deg);
}

.cwm-mobileMenu__sub {
    display: none;
    padding: 8px 0 8px 16px;
}

.cwm-mobileMenu__subLink {
    display: block;
    padding: 10px 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-mobileMenu__subLink:hover {
    color: #0381C1;
}

.cwm-mobileMenu__call {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

/* ============================== */
/* 4. footer css starts here      */
/* ============================== */

.cwm-footer {
    background: #002541;
    padding: 80px 0 16px;
    color: #FFFFFF;
}

/* ---- top band: logo + newsletter ---- */
.cwm-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.cwm-footer__logo {
    display: block;
    width: 307px;
    flex-shrink: 0;
}

.cwm-footer__logo img {
    width: 100%;
    height: auto;
}

.cwm-footer__news {
    width: 620px;
    flex-shrink: 0;
}

.cwm-footer__newsTitle {
    color: #FFFFFF;
}

.cwm-footer__form {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    margin-top: 20px;
    padding: 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
}

.cwm-footer__inputWrap {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 16px;
}

.cwm-footer__inputIcon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cwm-footer__input {
    flex: 1 0 0;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 23.2px;
    color: #FFFFFF;
}

.cwm-footer__input::placeholder {
    color: #FFFFFF;
    opacity: 1;
}

.cwm-footer__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 14px 28px;
    background: #0381C1;
    border-radius: 4px;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 15px;
    line-height: normal;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
}

.cwm-footer__submit:hover {
    background: #003F6C;
}

.cwm-footer__submit img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cwm-footer__formMsg {
    display: none;
    margin-top: 12px;
    font-family: 'Gantari', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #FFB32E;
}

.cwm-footer__formMsg.is-visible {
    display: block;
}

/* ---- mid band: addresses / socials / link columns ---- */
/* Genuinely asymmetric in Figma — the two addresses sit as a tight
   pair on the left (240px pitch) with the link columns pushed far
   right, so this is a bespoke flex split rather than an even
   Bootstrap row (§8.1 keeps display:flex/grid for exactly this). */
.cwm-footer__mid {
    display: flex;
    margin-top: 64px;
}

.cwm-footer__left {
    flex: 1 0 0;
    min-width: 0;
}

.cwm-footer__addresses {
    display: flex;
    gap: 40px;
}

.cwm-footer__address {
    width: 200px;
}

/* Figma lets "Marina / Waterfront" run past its 200px column rather
   than wrap to two lines. */
.cwm-footer__label {
    color: #FFFFFF;
    opacity: .4;
    white-space: nowrap;
}

.cwm-footer__addressText {
    margin-top: 8px;
}

.cwm-footer__phone {
    display: inline-block;
    margin-top: 8px;
    font-family: 'Gantari', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: normal;
    color: #FFB32E;
}

.cwm-footer__socials {
    display: flex;
    gap: 8px;
    margin-top: 52px;
}

.cwm-footer__social {
    display: block;
    width: 40px;
    height: 40px;
}

.cwm-footer__social img {
    width: 40px;
    height: 40px;
}

.cwm-footer__social:hover {
    opacity: .8;
}

.cwm-footer__right {
    width: 620px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

.cwm-footer__col {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cwm-footer__link {
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
}

.cwm-footer__link:hover {
    color: #FFB32E;
}

/* ---- bottom band ---- */
.cwm-footer__bottom {
    margin-top: 85px;
    padding-top: 16px;
    border-top: 1px solid #003F6C;
}

.cwm-footer__copy {
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: rgba(255, 255, 255, .4);
}

/* Required by the reCAPTCHA terms; not in the Figma footer, so it is styled to
   sit quietly with the copyright line rather than shout in plain white. */
.recaptcha-disclaimer {
    margin: 8px 0 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    color: rgba(255, 255, 255, .3);
}

.recaptcha-disclaimer a {
    color: rgba(255, 255, 255, .45);
    text-decoration: underline;
}

.cwm-footer__copy a {
    color: inherit;
    text-decoration: none;
}

.cwm-footer__copy a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* ============================== */
/* 5. home page css starts here   */
/* ============================== */

/* ---- hero ---- */
.cwm-hero {
    position: relative;
    height: 800px;
    overflow: hidden;
}

.cwm-hero__slider,
.cwm-hero__slider .owl-stage-outer,
.cwm-hero__slider .owl-stage,
.cwm-hero__slider .item {
    height: 100%;
}

.cwm-hero__media {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
}

.cwm-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The shell overlays the slider, so it must not swallow clicks meant
   for the carousel arrows sitting at the viewport edges. */
.cwm-hero__shell {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.cwm-hero__content {
    /* explicit width:100% — this is a flex-column child that feeds a
       width:680px block below; without it the max-width:100% clamp
       breaks once the column stacks (§ gotcha 1). */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: auto;
}

.cwm-hero .cwm-h1 {
    color: #FFFFFF;
}

.cwm-hero__text {
    width: 680px;
    max-width: 100%;
    margin-top: 24px;
    color: #FFFFFF;
}

.cwm-hero__btn {
    margin-top: 32px;
}

/* ---- hero carousel chrome ---- */
.cwm-hero__slider .owl-nav {
    margin: 0;
}

.cwm-hero__slider .owl-nav button.owl-prev,
.cwm-hero__slider .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 30px;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    z-index: 3;
}

.cwm-hero__slider .owl-nav button.owl-prev:hover,
.cwm-hero__slider .owl-nav button.owl-next:hover {
    background: none;
}

.cwm-hero__slider .owl-nav button.owl-prev {
    left: 0;
}

.cwm-hero__slider .owl-nav button.owl-next {
    right: 0;
}

.cwm-hero__slider .owl-nav img {
    width: 40px;
    height: 30px;
    display: block;
}

/* Figma ships one arrow asset and rotates it 180° for the prev side
   (Group 248 is the same artwork as Group 247, flipped). */
.cwm-hero__slider .owl-nav button.owl-prev img {
    transform: rotate(180deg);
}

/* Dots ride the same shell box as the hero copy so their right edge
   lands on the 1680 content edge exactly as in Figma. */
.cwm-hero__slider .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: right;
    line-height: 0;
    z-index: 3;
}

.cwm-hero__slider .owl-dots button.owl-dot {
    display: inline-block;
    margin: 0 0 0 10px;
}

.cwm-hero__slider .owl-dots button.owl-dot:first-child {
    margin-left: 0;
}

.cwm-hero__slider .owl-dots button.owl-dot span {
    width: 40px;
    height: 3px;
    margin: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .4);
}

.cwm-hero__slider .owl-dots button.owl-dot.active span,
.cwm-hero__slider .owl-dots button.owl-dot:hover span {
    background: #FFFFFF;
}

/* ---- split sections (boat rentals / about) ---- */
.cwm-split {
    padding: 80px 0;
    overflow: hidden;
}

.cwm-split__inner {
    display: flex;
    align-items: center;
    gap: 120px;
}

.cwm-split__inner--reverse {
    flex-direction: row-reverse;
}

.cwm-split__text {
    /* explicit width:100% so the 600px block still clamps once this
       column stacks at ≤1200 (§ gotcha 1) */
    width: 100%;
    max-width: 600px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.cwm-split__head {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.cwm-split__head .cwm-subheader {
    width: 100%;
    color: #0381C1;
}

.cwm-split__head .cwm-h2 {
    color: #002541;
}

.cwm-split__text .cwm-p {
    color: #01080F;
}

.cwm-split__copy {
    width: 100%;
}

.cwm-split__copy .cwm-p+.cwm-p {
    margin-top: 16px;
}

.cwm-split__btn--wide {
    min-width: 220px;
}

/* Storage page pairs Request Storage with a Reserve Online CTA */
.cwm-split__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.cwm-split__media {
    flex: 1 0 0;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
}

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

.cwm-split__media--h520 {
    height: 520px;
}

.cwm-split__media--h680 {
    height: 680px;
}

/* ---- services tile wall ---- */
.cwm-tiles {
    overflow: hidden;
    /* Figma continues the wall's 4px gutter under the last row —
       the About section starts at 2384, not 2380. */
    margin-bottom: 4px;
}

.cwm-tile {
    position: relative;
    display: block;
    height: 800px;
    overflow: hidden;
}

.cwm-tile__media {
    position: absolute;
    inset: 0;
}

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

/* Figma's gradient scrim: bottom 400px, transparent → #01080F at 88%,
   multiplied over the photo. */
.cwm-tile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 400px;
    background: linear-gradient(to bottom, rgba(1, 8, 15, 0) 0%, rgba(1, 8, 15, .88) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.cwm-tile__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 76px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

.cwm-tile__title {
    width: 360px;
    max-width: 100%;
    color: #FFFFFF;
}

.cwm-tile__text {
    width: 360px;
    max-width: 100%;
    margin-top: 16px;
    color: #FFFFFF;
}

.cwm-tile__link {
    width: 360px;
    max-width: 100%;
    margin-top: 24px;
    font-family: 'Gantari', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    color: #FFB32E;
}

.cwm-tile:hover .cwm-tile__link {
    color: #FFFFFF;
}

/* ============================== */
/* 6. service page css starts here */
/* ============================== */

/* ---- interior hero (600px, photo + navy scrim) ---- */
.cwm-heroInt {
    position: relative;
    height: 600px;
    overflow: hidden;
}

.cwm-heroInt__media {
    position: absolute;
    inset: 0;
}

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

.cwm-heroInt__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 37, 65, .8);
}

.cwm-heroInt__shell {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

.cwm-heroInt__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.cwm-heroInt .cwm-h1 {
    color: #FFFFFF;
}

.cwm-heroInt__btn,
.cwm-whyChoose__btn {
    min-width: 200px;
}

/* Storage hero: Request winter storage + Reserve Online side by side */
.cwm-heroInt__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.cwm-heroInt__text {
    width: 800px;
    max-width: 100%;
    color: #FFFFFF;
}

/* ---- why choose (half photo / half navy panel) ---- */
.cwm-whyChoose {
    display: flex;
    min-height: 720px;
}

.cwm-whyChoose__media {
    width: 50%;
    flex-shrink: 0;
}

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

.cwm-whyChoose__panel {
    width: 50%;
    flex-shrink: 0;
    background: #002541;
}

/* block layout, not flex-column: the trailing .cwm-btn would be
   stretched by the default align-items:stretch (see §7). */
.cwm-whyChoose__inner {
    padding: 94px 140px;
}

.cwm-whyChoose__title {
    width: 680px;
    max-width: 100%;
    margin-bottom: 42px;
    color: #FFFFFF;
}

.cwm-whyChoose__lists {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
}

/* 300px wide in Figma but allowed to shrink, so the two columns keep
   fitting as the panel narrows before the ≤1200 stack. */
.cwm-whyChoose__col {
    flex: 0 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.cwm-whyChoose__item img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.cwm-whyChoose__item p {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
}

/* Figma drops these rows to 14px — reproduced rather than normalised */
.cwm-whyChoose__item--sm p {
    font-size: 14px;
    line-height: 17px;
}

/* ---- additional services ---- */
/* Figma renders this band dark navy with translucent cards, not the light
   grey the first port used. */
.cwm-addServices {
    background: #002541;
    padding: 80px 0;
    overflow: hidden;
    /* this band and the footer are both #002541, so without a rule they read
       as one block - a white line marks where the section ends */
    border-bottom: 1px solid #FFFFFF;
}

.cwm-addServices__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
}

.cwm-addServices__head>* {
    width: 100%;
}

.cwm-addServices__head .cwm-subheader {
    color: #0381C1;
}

.cwm-addServices__head .cwm-h2 {
    color: #FFFFFF;
}

/* 40px vertical rhythm once the card row wraps; the negative margin
   on the row cancels it for the final row. */
.cwm-addServices__cards {
    margin-bottom: -40px;
}

.cwm-addServices__cards>[class*="col-"] {
    margin-bottom: 40px;
}

.cwm-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 31px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
}

.cwm-card__head {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.cwm-card__eyebrow {
    color: #0381C1;
}

.cwm-card__title {
    color: #FFFFFF;
}

.cwm-card__text {
    color: rgba(255, 255, 255, .8);
}

/* the gold-outline Reserve Online button sits bottom-right of the band */
.cwm-addServices__cta {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

/* ---- form section (SEO copy + enquiry form) ---- */
.cwm-formSection {
    border-top: 1px solid #D9D9D9;
    padding: 80px 0;
}

/* Figma centres the two 600px columns inside the 1440 shell rather
   than spreading them, leaving 60px either side. */
.cwm-formSection__inner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 120px;
}

.cwm-formSection__col {
    width: 100%;
    max-width: 600px;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.cwm-formSection__seo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.cwm-formSection__head {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.cwm-formSection__head .cwm-subheader {
    color: #0381C1;
}

.cwm-formSection__head .cwm-h2 {
    color: #002541;
}

.cwm-formSection__desc {
    color: rgba(1, 8, 15, .6);
}

/* ---- location line ---- */
.cwm-locations__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cwm-locations__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cwm-locations__text {
    display: flex;
    flex-direction: column;
}

.cwm-locations__addr {
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-locations__phone {
    font-family: 'Gantari', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 32px;
    color: #003F6C;
}

/* ---- enquiry form ---- */
.cwm-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.cwm-form__group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.cwm-form__label {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(1, 8, 15, .6);
}

.cwm-form__label--dark {
    color: #01080F;
}

.cwm-form__input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    outline: none;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-form__input::placeholder {
    color: rgba(1, 8, 15, .6);
    opacity: 1;
}

.cwm-form__input:focus {
    border-color: #0381C1;
}

.cwm-form__input--area {
    height: 96px;
    padding: 12px 16px;
    resize: vertical;
}

.cwm-form__inputWrap {
    position: relative;
    width: 100%;
}

.cwm-form__inputWrap .cwm-form__input {
    padding-right: 48px;
}

.cwm-form__icon {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 20px;
    height: 20px;
    /* it now opens the datepicker, so it has to read as clickable */
    cursor: pointer;
}

/* bootstrap-datepicker renders its dropdown at the end of <body>; keep it above
   the sticky header and the form's own stacking context. */
.datepicker.datepicker-dropdown {
    z-index: 1100 !important;
}

.cwm-form__submit {
    min-width: 120px;
}

.cwm-form__msg {
    display: none;
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #0381C1;
}

.cwm-form__msg.is-visible {
    display: block;
}


/* ---- boat service and storage pricing ---- */
.cwm-pricing {
    border-top: 1px solid #D9D9D9;
    padding: 80px 0;
}

.cwm-pricing__head {
    display: flex;
    align-items: flex-end;
    gap: 80px;
    margin-bottom: 48px;
}

.cwm-pricing__headCopy {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.cwm-pricing__headCopy > * {
    width: 100%;
}

.cwm-pricing__pdf {
    flex-shrink: 0;
}

.cwm-pricing__cols {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.cwm-pricing__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.cwm-priceBlock {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cwm-priceBlock__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cwm-priceBlock__title {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 32px;
    text-transform: uppercase;
    color: #002541;
}

.cwm-priceBlock__note {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #4B5563;
}

.cwm-priceBlock__body {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
}

/* overflow-clip keeps the header's grey fill inside the rounded corners */
.cwm-priceTable {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    overflow: hidden;
}

.cwm-priceTable__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: #F3F4F6;
}

.cwm-priceTable__th {
    flex: 1 1 0;
    min-width: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    color: #4B5563;
}

.cwm-priceTable__th--rate,
.cwm-priceTable__rate {
    flex: 0 0 140px;
    width: 140px;
    text-align: right;
}

.cwm-priceTable__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
}

.cwm-priceTable__row:last-child {
    border-bottom: 0;
}

.cwm-priceTable__service {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
}

/* the small square Figma puts before every service name */
.cwm-priceTable__mark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
}

.cwm-priceTable__rate {
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
}

.cwm-pricing__cta {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

/* ============================== */
/* 7. storage page css starts here */
/* ============================== */

/* Figma fixes this button at 260 even though its longer label needs
   more room than the shared 27px padding allows, so pin the width and
   tighten the padding rather than let the label push it wider. */
.cwm-heroInt__btn--w260 {
    width: 260px;
    min-width: 0;
    padding: 0 20px;
}

/* ---- split variants used from Storage onward ---- */
/* Storage splits two EVEN flexible columns rather than home's fixed
   600px text column beside a flexible image. */
.cwm-split__inner--even .cwm-split__text {
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
}

.cwm-split--tinted {
    background: #FAFAFA;
    border-top: 1px solid #E6E6E6;
}

.cwm-split__media--h400 {
    height: 400px;
}

/* ---- feature cards (image + title + copy) ---- */
.cwm-featureCards {
    border-top: 1px solid #E6E6E6;
    padding: 80px 0;
    overflow: hidden;
}

.cwm-featureCards__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 48px;
}

.cwm-featureCards__head .cwm-subheader {
    width: 600px;
    max-width: 100%;
    color: #0381C1;
}

.cwm-featureCards__head .cwm-h2 {
    color: #002541;
}

.cwm-featureCards__grid {
    margin-bottom: -40px;
}

.cwm-featureCards__grid>[class*="col-"] {
    margin-bottom: 40px;
}

.cwm-featureCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.cwm-featureCard__media {
    width: 100%;
    height: 240px;
    border-radius: 8px;
    overflow: hidden;
}

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

.cwm-featureCard__title {
    color: #002541;
}

.cwm-featureCard__text {
    width: 100%;
    color: #01080F;
}

/* ---- testimonial band ---- */
.cwm-testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 80px 200px;
    background: #002541;
    text-align: center;
}

.cwm-testimonial__icon {
    width: 40px;
    height: 36px;
    flex-shrink: 0;
}

.cwm-testimonial__quote {
    width: 960px;
    max-width: 100%;
    color: #FFFFFF;
}

.cwm-testimonial__name {
    color: #FFFFFF;
    opacity: .4;
}

/* ---- form section: even flexible columns (Storage onward) ---- */
.cwm-formSection__inner--fluid {
    justify-content: flex-start;
}

.cwm-formSection__inner--fluid>.cwm-formSection__col {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

/* ============================== */
/* 8. slips page css starts here  */
/* ============================== */

/* ---- full-bleed photo hero (no overlay copy on this page) ---- */
.cwm-heroPhoto {
    height: 600px;
    overflow: hidden;
}

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

/* ---- intro: heading left, copy + CTA right ---- */
.cwm-slipIntro {
    padding: 80px 0;
    overflow: hidden;
}

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

.cwm-slipIntro__headCol {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.cwm-slipIntro__headCol>* {
    width: 100%;
}

.cwm-slipIntro__headCol .cwm-subheader {
    color: #0381C1;
}

.cwm-slipIntro__title {
    color: #002541;
}

.cwm-slipIntro__copyCol {
    width: 740px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.cwm-slipIntro__copy {
    width: 100%;
}

.cwm-slipIntro__copy .cwm-p+.cwm-p {
    margin-top: 16px;
}

.cwm-slipIntro__btn {
    min-width: 200px;
}

/* ---- gallery filmstrip ---- */
/* Figma runs a row of photos at their natural aspect on a 400px
   height with 8px between, continuing past the viewport — an Owl
   autoWidth carousel (§10) rather than a clipped overflow row. */
.cwm-strip {
    overflow: hidden;
    /* Figma carries the strip's own 8px gutter along its bottom edge,
       so the benefits section starts at 1468, not 1460. */
    margin-bottom: 8px;
}

.cwm-strip__item {
    height: 400px;
    overflow: hidden;
}

/* Fancybox anchor wrapping each real gallery photo. It must be a block filling
   the tile, otherwise the img's height:100% has no resolved height to
   reference and the slide collapses. Placeholder slides stay unwrapped -
   there is no image to open. */
.cwm-strip__link {
    display: block;
    width: 100%;
    height: 100%;
}

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

.cwm-strip__item--w533 {
    width: 533px;
}

.cwm-strip__item--w578 {
    width: 578px;
}

.cwm-strip__item--w311 {
    width: 311px;
}

.cwm-strip__item--placeholder {
    background: #D9D9D9;
}

.cwm-strip__slider .owl-nav,
.cwm-strip__slider .owl-dots {
    display: none;
}

/* ---- marina benefits ---- */
.cwm-benefits {
    background: #FAFAFA;
    padding: 112px 0;
    overflow: hidden;
}

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

.cwm-benefits__headCopy {
    width: 800px;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.cwm-benefits__headCopy .cwm-subheader {
    color: #0381C1;
}

.cwm-benefits__title {
    width: 100%;
    color: #002541;
}

.cwm-benefits__intro {
    width: 500px;
    flex-shrink: 0;
    color: rgba(1, 8, 15, .8);
}

.cwm-benefits__content {
    display: flex;
    align-items: center;
    gap: 80px;
}

.cwm-benefits__media {
    position: relative;
    width: 640px;
    height: 560px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 32px;
}

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

.cwm-benefits__badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #002541;
    border-radius: 8px;
}

.cwm-benefits__badge img {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.cwm-benefits__badge span {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: #FFFFFF;
    white-space: nowrap;
}

.cwm-benefits__list {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cwm-benefit {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Figma's 98px card frame includes its 1px stroke, so 19 + 1px
       border gives the 20px inset Figma shows for the icon badge. */
    padding: 19px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 12px;
    box-shadow: 0 8px 16px 0 rgba(6, 42, 68, .08);
}

.cwm-benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: rgba(94, 187, 229, .24);
    border-radius: 50%;
}

.cwm-benefit__icon img {
    width: 24px;
    height: 24px;
}

.cwm-benefit__copy {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.cwm-benefit__title {
    width: 100%;
    color: #002541;
}

.cwm-benefit__text {
    width: 100%;
    color: rgba(1, 8, 15, .8);
}

/* ============================== */
/* 9. parts page css starts here  */
/* ============================== */

/* ---- intro: heading left, copy + CTA right ---- */
/* Figma draws this as two overlapping grid cells, but the result is
   simply a 520 heading and an 800 copy column 120 apart. */
/* Figma's intro and inventory frames are absolute siblings that
   overlap by 60px, so the intro's effective bottom padding is 20 —
   the real gap between the CTA and the image below is 100px. */
.cwm-partsIntro {
    padding: 80px 0 20px;
    overflow: hidden;
}

.cwm-partsIntro__inner {
    display: flex;
    align-items: flex-start;
    gap: 120px;
}

.cwm-partsIntro__title {
    width: 520px;
    flex-shrink: 0;
    color: #002541;
}

.cwm-partsIntro__copyCol {
    width: 800px;
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.cwm-partsIntro__copy {
    width: 100%;
}

.cwm-partsIntro__copy .cwm-p+.cwm-p {
    margin-top: 16px;
}

/* ---- inventory split (fixed 756 image, flexible copy) ---- */
.cwm-partsSplit {
    padding: 80px 0;
    overflow: hidden;
}

.cwm-partsSplit__inner {
    display: flex;
    align-items: center;
    gap: 120px;
}

.cwm-partsSplit__media {
    width: 756px;
    height: 480px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

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

.cwm-partsSplit__text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.cwm-partsSplit__text>.cwm-p {
    width: 100%;
}

.cwm-partsSplit__title {
    width: 100%;
    color: #002541;
}

/* ============================== */
/* 10. about page css starts here */
/* ============================== */

/* ---- page intro (breadcrumb + heading + copy + CTA) ---- */
.cwm-pageIntro {
    padding: 10px 0 64px;
}

.cwm-breadcrumb {
    margin: 0 0 50px;
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(1, 8, 15, .6);
}

.cwm-breadcrumb a:hover {
    color: #0381C1;
}

.cwm-pageIntro__title {
    width: 930px;
    max-width: 100%;
    margin-bottom: 24px;
    color: #002541;
}

.cwm-pageIntro__text {
    width: 930px;
    max-width: 100%;
    margin-bottom: 32px;
    color: #01080F;
}

/* ---- full-bleed banner ---- */
.cwm-aboutHero {
    height: 720px;
    overflow: hidden;
}

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

/* ---- story rows ---- */
/* Figma's padding is deliberately lopsided: 80/64 on the first row
   and 64/80 on the second, so the pair reads as one block. */
.cwm-story {
    padding: 80px 0 64px;
    overflow: hidden;
}

.cwm-story--flip {
    padding: 64px 0 80px;
}

.cwm-story__inner {
    display: flex;
    align-items: center;
    gap: 120px;
}

.cwm-story__inner--reverse {
    flex-direction: row-reverse;
}

.cwm-story__text {
    width: 600px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cwm-story__eyebrow {
    width: 560px;
    max-width: 100%;
    margin-bottom: 16px;
    color: #0381C1;
}

.cwm-story__title {
    width: 560px;
    max-width: 100%;
    margin-bottom: 24px;
    color: #002541;
}

.cwm-story__body {
    width: 100%;
    margin-bottom: 32px;
    color: #01080F;
}

.cwm-story__media {
    flex: 1 1 0;
    min-width: 0;
    height: 520px;
    border-radius: 12px;
    overflow: hidden;
}

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

/* ---- location cards ---- */
.cwm-locCards {
    border-top: 1px solid #D9D9D9;
    padding: 80px 0;
    overflow: hidden;
}

.cwm-locCards__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
    text-align: center;
}

.cwm-locCards__head .cwm-subheader {
    color: #0381C1;
}

.cwm-locCards__title {
    color: #002541;
}

.cwm-locCards__grid {
    margin-bottom: -40px;
}

.cwm-locCards__grid>[class*="col-"] {
    margin-bottom: 40px;
}

.cwm-locCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.cwm-locCard__media {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
}

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

.cwm-locCard__title {
    width: 100%;
    color: #002541;
}

.cwm-locCard__addr {
    width: 100%;
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #003F6C;
}

.cwm-locCard__tags {
    width: 100%;
    color: #01080F;
    opacity: .6;
}

/* ============================== */
/* 11. careers page css starts here */
/* ============================== */

/* ---- hero: copy in the shell, photo bleeding off the right edge ---- */
.cwm-careersHero {
    position: relative;
    min-height: 580px;
    padding-top: 10px;
}

.cwm-careersHero__media {
    position: absolute;
    top: 60px;
    right: 0;
    width: 960px;
    /* Never let the photo reach within 80px of the 600px copy column.
       700 = copy (600) + shell padding (20) + gap (80); the 50%+40 arm
       takes over once the shell starts centring above 1480. The plain
       calc() first is the fallback where min() is unsupported. */
    max-width: calc(100% - 700px);
    max-width: min(calc(50% + 40px), calc(100% - 700px));
    height: 520px;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
}

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

.cwm-careersHero__text {
    position: relative;
    z-index: 2;
    width: 600px;
    max-width: 100%;
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cwm-careersHero__title {
    width: 100%;
    margin-bottom: 24px;
    color: #002541;
}

.cwm-careersHero__kicker {
    width: 100%;
    margin-bottom: 28px;
    color: #0381C1;
}

.cwm-careersHero__body {
    width: 100%;
    margin-bottom: 40px;
    color: #01080F;
}

.cwm-careersHero__btn {
    width: 220px;
    min-width: 0;
    padding: 0 20px;
}

/* ---- available positions ---- */
.cwm-positions {
    padding: 80px 0 100px;
    overflow: hidden;
}

.cwm-positions__title {
    margin-bottom: 40px;
    text-align: center;
    color: #002541;
}

/* Figma centres a 480 + 40 + 480 pair rather than spreading them */
.cwm-positions__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.cwm-jobCard {
    width: 480px;
    max-width: 100%;
    /* Figma's 264px card frame includes its 1px stroke */
    padding: 35px 39px 36px;
    background: #FAFAFA;
    border: 1px solid #D9D9D9;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cwm-jobCard__head {
    width: 100%;
    margin-bottom: 26px;
}

.cwm-jobCard__role {
    margin: 0 0 4px;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    /* Archivo (standing in for Acumin Pro) needs ~405px for the longest
       role in Figma's 400px box, so it wraps to two lines and pushes the
       card 23px taller. This recovers the 5px and keeps Figma's card. */
    letter-spacing: -0.5px;
    color: #002541;
}

.cwm-jobCard__loc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #002541;
}

.cwm-jobCard__loc img {
    width: 13px;
    height: 16px;
    flex-shrink: 0;
}

.cwm-jobCard__desc {
    width: 176px;
    min-width: 0;
    padding: 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
}

/* ---- modals (application / job description) ---- */
.cwm-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    visibility: hidden;
    pointer-events: none;
}

.cwm-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.cwm-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 8, 15, .6);
    opacity: 0;
    transition: opacity .25s ease;
}

.cwm-modal.is-open .cwm-modal__overlay {
    opacity: 1;
}

.cwm-modal__dialog {
    position: relative;
    margin: 40px auto;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: #FFFFFF;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .25s ease, transform .25s ease;
}

.cwm-modal.is-open .cwm-modal__dialog {
    opacity: 1;
    transform: none;
}

.cwm-modal__dialog--apply {
    width: 560px;
    max-width: calc(100% - 40px);
    padding: 40px 80px 53px;
}

.cwm-modal__dialog--job {
    width: 1080px;
    max-width: calc(100% - 40px);
    /* Figma's gutters here are asymmetric — its rules run 56 to 1026 */
    padding: 40px 54px 40px 56px;
}

.cwm-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 14px;
    height: 14px;
    z-index: 2;
}

.cwm-modal__close img {
    width: 14px;
    height: 14px;
}

.cwm-modal__title {
    margin-bottom: 24px;
    text-align: center;
    color: #002541;
}

.cwm-modal__dialog--job .cwm-modal__title {
    margin-bottom: 8px;
}

/* the modal reuses .cwm-jobCard__head without .cwm-jobCard, which is
   where the card's centring lives — Figma centres this block too */
.cwm-modal__job {
    margin-bottom: 26px;
    text-align: center;
}

/* ---- application form ---- */
.cwm-applyForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cwm-applyForm__input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 1px;
    outline: none;
    font-family: 'Gantari', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-applyForm__input::placeholder {
    color: rgba(1, 8, 15, .6);
    opacity: 1;
}

.cwm-applyForm__input:focus {
    border-color: #0381C1;
}

/* Figma overlays the Upload Resume button on the left of a full-width
   field whose remaining space shows the chosen file name. */
.cwm-applyForm__file {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    border: 1px solid #D9D9D9;
    border-radius: 1px;
    background: #FFFFFF;
}

.cwm-applyForm__upload {
    width: 172px;
    min-width: 0;
    height: 48px;
    margin: -1px 0 -1px -1px;
    padding: 0 16px;
    border-radius: 0;
    cursor: pointer;
}

.cwm-applyForm__fileInput {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cwm-applyForm__fileName {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 16px;
    font-family: 'Gantari', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: rgba(1, 8, 15, .6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cwm-applyForm__submit {
    min-width: 120px;
    margin-top: 16px;
}

/* ---- job description modal ---- */
.cwm-jobInfo__meta {
    width: 480px;
    max-width: 100%;
    margin: 0 auto 34px;
    text-align: center;
    font-family: 'Gantari', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-jobInfo__meta span,
.cwm-jobInfo__meta strong {
    display: block;
}

.cwm-jobInfo__row {
    display: flex;
    /* without this the label stretches to the full row height and its
       right-aligned text no longer sits on the first line of the body */
    align-items: flex-start;
    gap: 40px;
    padding: 20px 0 40px;
    border-top: 1px solid #E6E6E6;
}

/* Figma starts the first row 30 below its rule rather than 20 */
.cwm-jobInfo__row:first-of-type {
    padding-top: 30px;
}

.cwm-jobInfo__row:last-of-type {
    padding-bottom: 0;
}

.cwm-jobInfo__label {
    width: 180px;
    flex-shrink: 0;
    text-align: right;
    color: #002541;
}

.cwm-jobInfo__body {
    width: 700px;
    max-width: 100%;
    flex-shrink: 1;
}

.cwm-jobInfo__body .cwm-p {
    margin-bottom: 16px;
    color: #01080F;
}

.cwm-jobInfo__list {
    list-style: disc;
    margin: 0;
    padding-left: 24px;
}

.cwm-jobInfo__list li {
    margin-bottom: 8px;
    font-family: 'Gantari', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

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

/* ============================== */
/* 12. events page css starts here */
/* ============================== */

.cwm-heroInt--h480 {
    height: 480px;
}

.cwm-heroInt__text--w880 {
    width: 880px;
}

/* ---- events grid ---- */
.cwm-events {
    padding: 80px 0;
    overflow: hidden;
}

.cwm-events__grid {
    margin-bottom: -40px;
}

.cwm-events__grid>[class*="col-"] {
    margin-bottom: 40px;
}

.cwm-eventCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* Every card is a grey CMS slot in Figma — reproduced as the flat
   #C4C4C4 fill rather than a stand-in photo. */
.cwm-eventCard__media {
    display: block;
    width: 100%;
    height: 320px;
    background: #C4C4C4;
    border-radius: 12px;
    overflow: hidden;
}

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

.cwm-eventCard__body {
    display: block;
}

.cwm-eventCard__title {
    display: block;
    margin-bottom: 5px;
    font-family: 'Gantari', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 29px;
    color: #01080F;
}

.cwm-eventCard__date {
    display: block;
    font-family: 'Gantari', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 29px;
    color: #0381C1;
}

.cwm-eventCard:hover .cwm-eventCard__title {
    color: #0381C1;
}

/* ============================== */
/* 13. event detail page css starts here */
/* ============================== */

/* the breadcrumb rides over the photo hero, so it turns white */
.cwm-heroPhoto--crumb {
    position: relative;
}

.cwm-heroPhoto__shell {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 2;
}

.cwm-breadcrumb--light {
    margin-bottom: 0;
    color: #FFFFFF;
}

.cwm-breadcrumb--light a:hover {
    color: #FFB32E;
}

/* ---- meta details bar ---- */
.cwm-metaBar {
    background: #002541;
    padding: 24px 0;
}

.cwm-metaBar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* The date cell is `white-space: nowrap`, so a long real-world range
       ("September 18, 2026 to September 25, 2026") is far wider than the
       Figma placeholder. Without wrapping here the four blocks pushed the
       page into a horizontal scroll between 1201px and 1280px, just above
       the breakpoint that used to introduce the wrap. */
    flex-wrap: wrap;
    gap: 24px;
}

.cwm-metaBar__block {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.cwm-metaBar__block>img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.cwm-metaBar__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cwm-metaBar__label {
    color: #0381C1;
}

.cwm-metaBar__value {
    font-family: 'Gantari', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 29px;
    color: #FFFFFF;
    white-space: nowrap;
}

.cwm-metaBar__divider {
    display: block;
    width: 1px;
    height: 40px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .16);
}

.cwm-metaBar__share {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.cwm-metaBar__shareLabel {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: .6;
    white-space: nowrap;
}

.cwm-metaBar__shareBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .16);
    border-radius: 99px;
}

.cwm-metaBar__shareBtn img {
    width: 16px;
    height: 16px;
}

.cwm-metaBar__shareBtn:hover {
    background: rgba(255, 255, 255, .32);
}

/* ---- event overview ---- */
/* Figma centres this pair inside the shell instead of spreading it */
.cwm-split__inner--center {
    justify-content: center;
}

.cwm-eventDetail__title {
    width: 100%;
    color: #002541;
}

.cwm-eventDetail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ============================== */
/* 14. faq page css starts here   */
/* ============================== */

.cwm-faq {
    padding: 10px 0 99px;
}

.cwm-faq__title {
    margin-top: 50px;
    margin-bottom: 24px;
    text-align: center;
    color: #002541;
}

/* Figma runs the accordion in a 1108 column centred in the shell */
.cwm-faq__col {
    width: 1108px;
    max-width: 100%;
    margin: 0 auto;
}

.cwm-faqGroup {
    border-bottom: 1px solid #E6E6E6;
    /* 39 + the 1px rule = Figma's 40px gap measured from the line */
    margin-bottom: 39px;
}

.cwm-faqGroup:last-child {
    margin-bottom: 0;
}

.cwm-faqGroup__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 0 16px 32px 0;
    text-align: left;
}

.cwm-faqGroup__title {
    font-family: 'Gantari', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 32px;
    color: #01080F;
}

.cwm-faqGroup__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cwm-faqGroup__icon img {
    width: 16px;
}

.cwm-faqGroup__plus {
    height: 16px;
}

.cwm-faqGroup__minus {
    display: none;
    height: 3px;
}

.cwm-faqGroup.is-open .cwm-faqGroup__plus {
    display: none;
}

.cwm-faqGroup.is-open .cwm-faqGroup__minus {
    display: block;
}

.cwm-faqGroup__panel {
    padding-bottom: 16px;
}

/* items are inset 29px inside the group column in Figma */
.cwm-faqItem {
    margin: 0 29px;
    /* 15 + the 1px rule = Figma's 152px item */
    padding-bottom: 15px;
    border-bottom: 1px solid #E6E6E6;
}

.cwm-faqItem+.cwm-faqItem {
    margin-top: 40px;
}

.cwm-faqItem:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cwm-faqItem__q {
    margin: 0 0 16px;
    font-family: 'Gantari', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-faqItem__a {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-faqItem__q span,
.cwm-faqItem__a span {
    color: #0381C1;
}

/* The answer is admin rich text, so it arrives wrapped in <p> (Froala always
   wraps, and an answer may run to several paragraphs). A block element right
   after the inline "A." label pushed the first line onto its own row, so the
   opening paragraph runs inline with the label and any following ones stay
   blocks. */
.cwm-faqItem__a > p {
    margin: 12px 0 0;
}

.cwm-faqItem__a > p:first-of-type {
    display: inline;
    margin: 0;
}

/* ============================== */
/* 15. contact page css starts here */
/* ============================== */

/* The enquiry card overlaps the bottom of the hero photo, so this
   section is a positioning context and must not clip it. */
.cwm-contact {
    position: relative;
    padding-bottom: 66px;
    border-bottom: 1px solid #E6E6E6;
}

.cwm-contact__hero {
    height: 600px;
    overflow: hidden;
}

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

.cwm-contact__shell {
    position: relative;
    /* padding, not a child margin: a collapsing top margin would move
       this positioning context and drag the absolute card with it */
    padding-top: 64px;
}

.cwm-contact__left {
    width: 600px;
    max-width: 100%;
}

.cwm-contact__title {
    width: 100%;
    margin-bottom: 24px;
    color: #002541;
}

.cwm-contact__text {
    width: 100%;
    margin-bottom: 40px;
    color: #01080F;
}

.cwm-contact__link {
    display: block;
    width: fit-content;
    font-family: 'Gantari', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    text-decoration: underline;
    color: #0381C1;
}

.cwm-contact__link:hover {
    color: #002541;
}

/* ---- floating enquiry card ---- */
.cwm-contact__card {
    position: absolute;
    top: -103px;
    right: 20px;
    z-index: 2;
    width: 600px;
    max-width: 100%;
    /* Figma's 580px card frame includes its 1px stroke */
    padding: 63px 99px 69px;
    background: #FAFAFA;
    border: 1px solid #D9D9D9;
    border-radius: 12px;
}

.cwm-contact__cardTitle {
    margin-bottom: 48px;
    text-align: center;
    color: #002541;
}

.cwm-contactForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cwm-contactForm__input {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    outline: none;
    font-family: 'Gantari', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-contactForm__input::placeholder {
    color: #01080F;
    opacity: .6;
}

.cwm-contactForm__input:focus {
    border-color: #0381C1;
}

.cwm-contactForm__submit {
    min-width: 120px;
    margin-top: 10px;
}

/* ---- locations ---- */
.cwm-contactLocs {
    padding: 118px 0 160px;
    overflow: hidden;
}

.cwm-contactLocs__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
}

.cwm-contactLoc {
    /* Figma: two 640px cards with an 80px gap = 1360, which is exactly the
       shell's content width. As a fixed width they could not shrink (flex
       items default to min-width:auto), so the second card wrapped below
       around 1240px. flex-basis:0 + min-width:0 lets the pair shrink together
       and stay side by side until the breakpoints stack them. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cwm-contactLoc__media {
    width: 100%;
    /* Figma sizes this by a 600/320 aspect rather than a fixed height */
    aspect-ratio: 600 / 320;
    border-radius: 12px;
    overflow: hidden;
}

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

.cwm-contactLoc__info {
    width: 400px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cwm-contactLoc__title {
    width: 100%;
    color: #01080F;
}

.cwm-contactLoc__addrRow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    white-space: nowrap;
}

.cwm-contactLoc__addr {
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-decoration: underline;
    color: #01080F;
}

.cwm-contactLoc__map {
    font-family: 'Gantari', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    text-decoration: underline;
    color: #0381C1;
}

.cwm-contactLoc__phone {
    font-family: 'Gantari', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 29px;
    color: #0381C1;
}

.cwm-contactLoc__hours {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.cwm-contactLoc__hours strong {
    font-weight: 700;
}

/* ============================== */
/* 16. status pages (thank you / 404) css starts here */
/* ============================== */
/* thank_you.hbs and error.hbs keep their original class names; these rules
   re-dress them with the Causeway type scale, colours and button styles. */

.breadcrumb-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 20px 0;
}

.breadcrumb-container .breadcrumb {
    /* Bootstrap gives .breadcrumb a grey pill background; the design's
       breadcrumbs sit on the page background. */
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Gantari', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #01080F;
}

.breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding-right: 8px;
    color: #0381C1;
}

.breadcrumb-container .breadcrumb-item a {
    color: #0381C1;
    text-decoration: none;
}

.breadcrumb-container .breadcrumb-item a:hover {
    text-decoration: underline;
}

.commonSection.firstSectionTopMargin {
    padding: 48px 0 96px;
}

.statusPagesInnerWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.thank-you-content-box {
    flex: 1 1 0;
    min-width: 0;
}

.commonSectionHeading {
    margin: 0 0 24px;
    font-family: 'Gantari', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 56px;
    text-transform: uppercase;
    color: #002541;
}

.commonPara {
    margin: 0 0 40px;
    font-family: 'Gantari', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #01080F;
}

.commonSectionLinkWrap {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* matches .cwm-btn / .cwm-btn--navy so the status pages use the same buttons */
.commonSectionLinkWrap .featured-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 56px;
    padding: 0 28px;
    font-family: 'Gantari', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    border: 2px solid #002541;
    background: #002541;
    color: #FFFFFF;
    transition: background .2s ease, color .2s ease;
}

.commonSectionLinkWrap .featured-btn:hover {
    background: #003F6C;
    border-color: #003F6C;
    color: #FFFFFF;
}

.commonSectionLinkWrap .featured-btn + .featured-btn {
    background: transparent;
    color: #002541;
}

.commonSectionLinkWrap .featured-btn + .featured-btn:hover {
    background: #002541;
    color: #FFFFFF;
}

.commonSectionImageWrapper {
    flex: 0 1 46%;
    max-width: 46%;
}

.commonSectionImageWrapper img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================== */
/* 17. rentals page css starts here */
/* ============================== */

/* ---- hero ---- */
.cwm-rentalsHero {
    position: relative;
    height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.cwm-rentalsHero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Figma lays an 80% navy wash over the photo so the copy stays legible */
.cwm-rentalsHero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 37, 65, .8);
}

.cwm-rentalsHero__shell {
    position: relative;
    z-index: 2;
}

.cwm-rentalsHero__content {
    width: 720px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.cwm-rentalsHero__title {
    margin: 0;
    color: #FFFFFF;
}

.cwm-rentalsHero__text {
    margin: 0;
    color: #FFFFFF;
}

/* ---- rental fleet grid ---- */
.cwm-rentals {
    padding: 80px 0;
}

/* 40px vertical rhythm once the card row wraps; the negative margin on the
   row cancels it for the final row (same pattern as the service cards). */
.cwm-rentals__grid {
    margin-bottom: -40px;
}

.cwm-rentals__grid > [class*="col-"] {
    margin-bottom: 40px;
}

.cwm-rentalCard {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background: #F7FBFD;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
}

.cwm-rentalCard__media {
    height: 320px;
    border-radius: 4px;
    overflow: hidden;
}

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

.cwm-rentalCard__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cwm-rentalCard__name {
    margin: 0;
    font-family: 'Gantari', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: normal;
    color: #002541;
}

.cwm-rentalCard__specs {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #01080F;
}

.cwm-rentalCard__specs img {
    flex-shrink: 0;
}

/* margin-top:auto pins the CTA to the card bottom so the buttons line up
   across a row even when a boat name wraps to two lines */
.cwm-rentalCard__cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: #0381C1;
    border-radius: 4px;
    font-family: 'Gantari', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
}

.cwm-rentalCard__cta:hover {
    background: #002541;
    color: #FFFFFF;
    text-decoration: none;
}

/* =================================================================
   RESPONSIVE — one block per breakpoint, largest → smallest.
   Never open a second @media for a breakpoint that already exists;
   append a "---- Page name ----" group inside the existing one.
   ================================================================= */

@media (max-width: 1440px) {

    /* ---- Home page ---- */
    .cwm-split__inner {
        gap: 80px;
    }

    /* ---- Service page ---- */
    .cwm-whyChoose__inner {
        padding: 80px;
    }

    /* ---- Slips page ---- */
    .cwm-benefits__media {
        width: 520px;
    }

    /* ---- Parts page ---- */
    .cwm-partsIntro__inner,
    .cwm-partsSplit__inner {
        gap: 80px;
    }

    .cwm-partsSplit__media {
        width: 600px;
    }

    /* ---- About page ---- */
    .cwm-story__inner {
        gap: 80px;
    }

    /* ---- Careers page ---- */

    /* ---- Event detail page ---- */
    .cwm-metaBar__value {
        font-size: 20px;
        line-height: 26px;
    }

    /* ---- Contact page ---- */
    .cwm-contact__card {
        width: 520px;
        padding: 48px 60px;
    }
}

@media (max-width: 1200px) {

    /* ---- Global ---- */
    .cwm-h1 {
        font-size: 44px;
        line-height: 46px;
    }

    .cwm-h2 {
        font-size: 32px;
        line-height: 34px;
    }

    .cwm-p-large {
        font-size: 18px;
        line-height: 26px;
    }

    /* ---- Header / nav ---- */
    .cwm-header__right {
        gap: 48px;
    }

    .cwm-nav {
        gap: 32px;
    }

    /* Panels are right-anchored to the shell, so their offsets have to
       be recomputed from the tightened nav above (gap 32, right gap
       48): nav is 409 wide, so its right edge sits 198px inside the
       shell's content edge. Service's trigger then leaves 94px of
       room → 94 + 20px shell padding = 114, plus 93px for the
       "/WINTERIZE" label suffix = 207.
       Company's trigger is only 99px from the nav's right edge, so a
       trigger-aligned panel would run 23px PAST the shell; it clamps
       flush to the content edge instead (20px = the shell padding,
       since `right` measures from the padding edge). */
    .cwm-megamenu--service {
        right: 207px;
    }

    .cwm-megamenu--company {
        right: 20px;
    }

    /* ---- Footer ---- */
    /* 900 + 620 no longer fits the 1160 shell, so the two halves wrap
       before the usual 991 step. */
    .cwm-footer__mid {
        flex-wrap: wrap;
        gap: 48px;
    }

    .cwm-footer__left,
    .cwm-footer__right {
        flex: 1 0 100%;
        width: 100%;
    }

    .cwm-footer__right {
        gap: 48px;
    }

    .cwm-footer__socials {
        margin-top: 32px;
    }

    .cwm-footer__bottom {
        margin-top: 48px;
    }

    /* ---- Home page ---- */
    /* The 600px text column plus a usable image no longer fit side by
       side once the shell drops under ~1200, so this stacks earlier
       than the usual 991 step (§6.3). */
    .cwm-split__inner,
    .cwm-split__inner--reverse {
        flex-direction: column;
        gap: 48px;
    }

    .cwm-split__text {
        max-width: 100%;
    }

    .cwm-split__media {
        width: 100%;
        flex: 0 0 auto;
    }

    .cwm-split__media--h520,
    .cwm-split__media--h680 {
        height: 480px;
    }

    .cwm-tile {
        height: 640px;
    }

    /* ---- Service page ---- */

    .cwm-pricing__head {
        gap: 40px;
    }

    .cwm-pricing__cols {
        gap: 32px;
    }
    .cwm-heroInt {
        height: 520px;
    }

    /* the two list columns no longer fit beside a half-width panel,
       so the section stacks before the usual 991 step (§6.3) */
    .cwm-whyChoose {
        flex-direction: column;
        min-height: 0;
    }

    .cwm-whyChoose__media,
    .cwm-whyChoose__panel {
        width: 100%;
    }

    .cwm-whyChoose__media {
        height: 420px;
    }

    .cwm-whyChoose__inner {
        padding: 64px 40px;
    }

    .cwm-whyChoose__title {
        width: 100%;
        margin-bottom: 32px;
    }

    /* two fixed 600px columns + a 120px gap exceed the shell here */
    .cwm-formSection__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
    }

    .cwm-formSection__col {
        max-width: 100%;
    }

    /* ---- Storage page ---- */
    .cwm-testimonial {
        padding: 72px 40px;
    }

    /* even columns keep fitting longer than fixed ones, but the form
       still needs the full width by here */
    .cwm-formSection__inner--fluid {
        flex-direction: column;
    }

    .cwm-formSection__inner--fluid>.cwm-formSection__col {
        flex: 0 0 auto;
        width: 100%;
    }

    .cwm-split__inner--even .cwm-split__text {
        flex: 0 0 auto;
        width: 100%;
    }

    /* ---- Slips page ---- */
    .cwm-heroPhoto {
        height: 480px;
    }

    /* the 740px copy column no longer fits beside the heading */
    .cwm-slipIntro__inner {
        flex-direction: column;
        gap: 32px;
    }

    .cwm-slipIntro__copyCol {
        width: 100%;
    }

    .cwm-benefits {
        padding: 80px 0;
    }

    .cwm-benefits__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .cwm-benefits__headCopy,
    .cwm-benefits__intro {
        width: 100%;
    }

    /* the fixed 640px image and the benefit list stop coexisting here */
    .cwm-benefits__content {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .cwm-benefits__media {
        width: 100%;
        height: 440px;
    }

    .cwm-benefits__list {
        flex: 0 0 auto;
    }

    /* ---- Parts page ---- */
    /* the fixed 520 + 800 columns stop fitting the shell here */
    .cwm-partsIntro__inner,
    .cwm-partsSplit__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .cwm-partsIntro__title,
    .cwm-partsIntro__copyCol {
        width: 100%;
    }

    .cwm-partsSplit__media {
        width: 100%;
        height: 420px;
    }

    .cwm-partsSplit__text {
        flex: 0 0 auto;
    }

    /* ---- About page ---- */
    .cwm-aboutHero {
        height: 520px;
    }

    /* the fixed 600px story column stops fitting beside its image */
    .cwm-story__inner,
    .cwm-story__inner--reverse {
        flex-direction: column;
        gap: 40px;
    }

    .cwm-story__text {
        width: 100%;
    }

    .cwm-story__media {
        flex: 0 0 auto;
        width: 100%;
    }

    /* ---- Careers page ---- */
    /* the 960px photo and the 600px copy column stop coexisting */
    .cwm-careersHero {
        min-height: 0;
        padding-bottom: 40px;
    }

    .cwm-careersHero__media {
        position: static;
        width: 100%;
        height: 380px;
        margin-top: 32px;
        border-radius: 12px;
    }

    .cwm-careersHero__text {
        width: 100%;
        margin-top: 32px;
    }

    .cwm-careersHero__body {
        margin-bottom: 32px;
    }

    .cwm-jobInfo__row {
        flex-direction: column;
        gap: 16px;
    }

    .cwm-jobInfo__label {
        width: 100%;
        text-align: left;
    }

    /* ---- Events page ---- */
    .cwm-heroInt--h480 {
        height: 440px;
    }

    .cwm-eventCard__media {
        height: 260px;
    }

    /* ---- Event detail page ---- */
    /* four meta blocks plus rules no longer fit one row */
    .cwm-metaBar__inner {
        justify-content: flex-start;
        gap: 24px 40px;
    }

    .cwm-metaBar__divider {
        display: none;
    }

    /* ---- Contact page ---- */
    /* the floating card stops fitting beside the intro copy, so it
       drops into flow beneath it */
    .cwm-contact {
        padding-bottom: 56px;
    }

    .cwm-contact__card {
        position: static;
        width: 100%;
        max-width: 600px;
        margin-top: 48px;
    }

    .cwm-contact__left {
        width: 100%;
    }

    .cwm-contactLocs {
        padding: 72px 0 96px;
    }

    .cwm-contactLocs__grid {
        gap: 48px;
    }

    .cwm-contactLoc {
        flex: 1 1 340px;
    }

    /* ---- Rentals page ---- */
    .cwm-rentalsHero {
        height: 440px;
    }
}

@media (max-width: 991px) {
    /* ---- Status pages ---- */
    .statusPagesInnerWrap {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .commonSectionLinkWrap {
        justify-content: center;
    }

    .commonSectionImageWrapper {
        flex: 0 1 auto;
        max-width: 420px;
    }

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


    /* ---- Global ---- */
    body {
        padding-top: 80px;
    }

    .cwm-h1 {
        font-size: 40px;
        line-height: 42px;
    }

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

    /* ---- Header / nav ---- */
    .cwm-header {
        height: 80px;
    }

    .cwm-header__right {
        display: none;
    }

    .cwm-header__burger {
        display: flex;
    }

    .cwm-header__logo {
        width: 180px;
    }

    /* ---- Mega menu / mobile menu ---- */
    .cwm-megamenu {
        display: none !important;
    }

    /* ---- Footer ---- */
    .cwm-footer {
        padding-top: 56px;
    }

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

    .cwm-footer__news {
        width: 100%;
    }

    .cwm-footer__mid {
        margin-top: 48px;
    }

    /* ---- Home page ---- */
    .cwm-hero,
    .cwm-hero__media {
        height: 700px;
    }

    .cwm-tile {
        height: 560px;
    }

    /* ---- Service page ---- */

    .cwm-pricing {
        padding: 56px 0;
    }

    /* two rate tables side by side stop being readable here */
    .cwm-pricing__cols {
        flex-direction: column;
        gap: 48px;
    }

    .cwm-pricing__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 32px;
    }

    .cwm-pricing__cta {
        margin-top: 32px;
    }

    .cwm-addServices__cta {
        justify-content: flex-start;
    }
    .cwm-heroInt {
        height: 480px;
    }

    .cwm-heroInt__content {
        gap: 32px;
    }

    .cwm-addServices,
    .cwm-formSection {
        padding: 56px 0;
    }

    /* ---- Storage page ---- */
    .cwm-featureCards {
        padding: 56px 0;
    }

    .cwm-featureCards__head {
        margin-bottom: 32px;
    }

    .cwm-testimonial {
        padding: 56px 24px;
    }

    /* ---- Slips page ---- */
    .cwm-heroPhoto {
        height: 420px;
    }

    .cwm-slipIntro {
        padding: 56px 0;
    }

    .cwm-benefits {
        padding: 56px 0;
    }

    .cwm-benefits__media {
        height: 360px;
    }

    .cwm-strip__item {
        height: 320px;
    }

    .cwm-strip__item--w533 {
        width: 427px;
    }

    .cwm-strip__item--w578 {
        width: 462px;
    }

    .cwm-strip__item--w311 {
        width: 249px;
    }

    /* ---- Parts page ---- */
    .cwm-partsIntro,
    .cwm-partsSplit {
        padding: 56px 0;
    }

    .cwm-partsSplit__media {
        height: 360px;
    }

    /* ---- About page ---- */
    .cwm-pageIntro {
        padding: 10px 0 48px;
    }

    .cwm-breadcrumb {
        margin-bottom: 32px;
    }

    .cwm-aboutHero {
        height: 400px;
    }

    .cwm-story {
        padding: 56px 0 40px;
    }

    .cwm-story--flip {
        padding: 40px 0 56px;
    }

    .cwm-story__media {
        height: 420px;
    }

    .cwm-locCards {
        padding: 56px 0;
    }

    .cwm-locCards__head {
        margin-bottom: 32px;
    }

    /* ---- Careers page ---- */
    .cwm-careersHero__media {
        height: 320px;
    }

    .cwm-positions {
        padding: 56px 0 72px;
    }

    .cwm-modal__dialog--job {
        padding: 40px 32px;
    }

    /* ---- Events page ---- */
    .cwm-heroInt--h480 {
        height: 400px;
    }

    .cwm-events {
        padding: 56px 0;
    }

    .cwm-eventCard__media {
        height: 240px;
    }

    .cwm-eventCard__title,
    .cwm-eventCard__date {
        font-size: 20px;
        line-height: 26px;
    }

    /* ---- Event detail page ---- */
    .cwm-metaBar {
        padding: 20px 0;
    }

    .cwm-metaBar__value {
        font-size: 18px;
        line-height: 24px;
        white-space: normal;
    }

    /* ---- FAQ page ---- */
    .cwm-faq {
        padding: 10px 0 72px;
    }

    .cwm-faqGroup__title {
        font-size: 24px;
        line-height: 30px;
    }

    /* ---- Contact page ---- */
    .cwm-contact__hero {
        height: 420px;
    }

    .cwm-contact__left {
        margin-top: 48px;
    }

    .cwm-contactLocs {
        padding: 56px 0 72px;
    }

    .cwm-contactLoc {
        flex: 1 1 100%;
        width: 100%;
    }

    /* ---- Rentals page ---- */
    .cwm-rentalsHero {
        height: 400px;
    }

    .cwm-rentals {
        padding: 56px 0;
    }

    .cwm-rentalCard__media {
        height: 280px;
    }
}

@media (max-width: 768px) {
    /* ---- Status pages ---- */
    .commonSection.firstSectionTopMargin {
        padding: 32px 0 64px;
    }

    .commonSectionHeading {
        font-size: 32px;
        line-height: 40px;
    }

    .commonPara {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 32px;
    }


    /* ---- Global ---- */
    .cwm-split {
        padding: 60px 0;
    }

    /* ---- Footer ---- */
    .cwm-footer__form {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .cwm-footer__inputWrap {
        padding: 8px 0 8px 16px;
    }

    .cwm-footer__submit {
        justify-content: center;
    }

    /* ---- Home page ---- */
    .cwm-hero,
    .cwm-hero__media {
        height: 600px;
    }

    .cwm-split__media--h520,
    .cwm-split__media--h680 {
        height: 360px;
    }

    /* ---- Service page ---- */

    .cwm-priceTable__head,
    .cwm-priceTable__row {
        padding: 14px 16px;
    }

    .cwm-priceBlock__title {
        font-size: 28px;
        line-height: 30px;
    }
    .cwm-heroInt {
        height: 440px;
    }

    .cwm-whyChoose__media {
        height: 320px;
    }

    .cwm-card {
        padding: 24px;
    }

    /* ---- Storage page ---- */
    .cwm-featureCard__media {
        height: 200px;
    }

    .cwm-split__media--h400 {
        height: 300px;
    }

    /* ---- Slips page ---- */
    .cwm-heroPhoto {
        height: 340px;
    }

    .cwm-benefits__media {
        height: 300px;
        padding: 24px;
    }

    .cwm-strip__item {
        height: 240px;
    }

    .cwm-strip__item--w533 {
        width: 320px;
    }

    .cwm-strip__item--w578 {
        width: 347px;
    }

    .cwm-strip__item--w311 {
        width: 187px;
    }

    /* ---- Parts page ---- */
    .cwm-partsSplit__media {
        height: 300px;
    }

    /* ---- About page ---- */
    .cwm-aboutHero {
        height: 320px;
    }

    .cwm-story__media {
        height: 340px;
    }

    .cwm-locCard__media {
        height: 240px;
    }

    /* ---- Careers page ---- */
    .cwm-careersHero__media {
        height: 260px;
    }

    .cwm-modal__dialog--apply {
        padding: 40px 32px;
    }

    /* ---- Events page ---- */
    .cwm-eventCard__media {
        height: 220px;
    }

    /* ---- Contact page ---- */
    .cwm-contact__hero {
        height: 340px;
    }

    .cwm-contact__card {
        padding: 40px 32px;
    }

    /* ---- Rentals page ---- */
    .cwm-rentalsHero {
        height: 360px;
    }

    .cwm-rentalCard {
        padding: 20px;
        gap: 20px;
    }
}

@media (max-width: 576px) {
    /* ---- Status pages ---- */
    .commonSectionLinkWrap .featured-btn {
        width: 100%;
        min-width: 0;
    }

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


    /* ---- Global ---- */
    .cwm-h1 {
        font-size: 32px;
        line-height: 36px;
    }

    .cwm-h2 {
        font-size: 24px;
        line-height: 28px;
    }

    .cwm-subheader {
        font-size: 14px;
        line-height: 17px;
        letter-spacing: 1.68px;
    }

    .cwm-split {
        padding: 48px 0;
    }

    /* ---- Footer ---- */
    .cwm-footer__logo {
        width: 220px;
    }

    .cwm-footer__addresses {
        flex-direction: column;
        gap: 32px;
    }

    .cwm-footer__address {
        width: 100%;
    }

    .cwm-footer__right {
        flex-direction: column;
        gap: 32px;
    }

    .cwm-footer__col {
        width: 100%;
    }

    /* ---- Home page ---- */
    .cwm-hero,
    .cwm-hero__media {
        height: 520px;
    }

    .cwm-hero__slider .owl-nav button.owl-prev,
    .cwm-hero__slider .owl-nav button.owl-next {
        display: none;
    }

    .cwm-hero__slider .owl-dots {
        text-align: center;
    }

    .cwm-split__media--h520,
    .cwm-split__media--h680 {
        height: 260px;
    }

    .cwm-tile {
        height: 480px;
    }

    .cwm-tile__body {
        bottom: 48px;
    }

    /* ---- Service page ---- */

    .cwm-priceTable__th--rate,
    .cwm-priceTable__rate {
        flex: 0 0 104px;
        width: 104px;
    }

    .cwm-priceTable__head,
    .cwm-priceTable__row {
        gap: 12px;
        padding: 12px 14px;
    }

    .cwm-priceTable__service {
        gap: 10px;
    }

    .cwm-priceBlock__title {
        font-size: 24px;
        line-height: 28px;
    }
    .cwm-heroInt {
        height: auto;
        padding: 56px 0;
    }

    .cwm-heroInt__content {
        gap: 24px;
    }

    .cwm-whyChoose__inner {
        padding: 48px 20px;
    }

    .cwm-whyChoose__lists {
        flex-direction: column;
        gap: 24px;
    }

    .cwm-whyChoose__col {
        flex: 1 1 auto;
    }

    .cwm-addServices__head {
        margin-bottom: 24px;
    }

    .cwm-locations__phone {
        font-size: 24px;
        line-height: 28px;
    }

    /* ---- Storage page ---- */
    .cwm-testimonial {
        padding: 48px 20px;
        gap: 16px;
    }

    .cwm-featureCard__media {
        height: 180px;
    }

    .cwm-split__media--h400 {
        height: 220px;
    }

    /* ---- Slips page ---- */
    .cwm-heroPhoto {
        height: 260px;
    }

    .cwm-benefits__media {
        height: 240px;
        padding: 20px;
    }

    .cwm-benefits__badge span {
        font-size: 16px;
        white-space: normal;
    }

    .cwm-benefit {
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .cwm-strip__item {
        height: 180px;
    }

    .cwm-strip__item--w533 {
        width: 240px;
    }

    .cwm-strip__item--w578 {
        width: 260px;
    }

    .cwm-strip__item--w311 {
        width: 140px;
    }

    /* ---- Parts page ---- */
    .cwm-partsSplit__media {
        height: 220px;
    }

    .cwm-partsIntro__inner,
    .cwm-partsSplit__inner {
        gap: 28px;
    }

    /* ---- About page ---- */
    .cwm-aboutHero {
        height: 240px;
    }

    .cwm-story__media {
        height: 240px;
    }

    .cwm-locCard__media {
        height: 200px;
    }

    .cwm-locCard__addr {
        font-size: 18px;
        line-height: 26px;
    }

    /* ---- Careers page ---- */
    .cwm-careersHero__media {
        height: 200px;
    }

    .cwm-positions__title {
        margin-bottom: 28px;
    }

    .cwm-positions__grid {
        gap: 24px;
    }

    .cwm-jobCard {
        padding: 27px 23px 28px;
    }

    .cwm-modal__dialog {
        margin: 20px auto;
        max-height: calc(100vh - 40px);
    }

    .cwm-modal__dialog--apply,
    .cwm-modal__dialog--job {
        padding: 40px 20px;
    }

    .cwm-applyForm__file {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        border: 0;
    }

    .cwm-applyForm__upload {
        width: 100%;
        margin: 0;
        border-radius: 1px;
    }

    .cwm-applyForm__fileName {
        padding: 8px 0 0;
    }

    /* ---- Events page ---- */
    .cwm-heroInt--h480 {
        height: auto;
    }

    .cwm-eventCard__media {
        height: 200px;
    }

    /* ---- Event detail page ---- */
    .cwm-metaBar__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .cwm-eventDetail__actions {
        width: 100%;
    }

    .cwm-eventDetail__actions .cwm-btn {
        flex: 1 1 100%;
    }

    /* ---- FAQ page ---- */
    .cwm-faqItem {
        margin: 0;
    }

    .cwm-faqGroup__head {
        padding-bottom: 24px;
    }

    .cwm-faqGroup {
        margin-bottom: 28px;
    }

    /* ---- Contact page ---- */
    .cwm-contact__hero {
        height: 240px;
    }

    .cwm-contact__card {
        padding: 32px 20px;
    }

    .cwm-contactLoc__addrRow {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        white-space: normal;
    }

    .cwm-contactLoc__info {
        width: 100%;
    }

    /* ---- Rentals page ---- */
    .cwm-rentalsHero {
        height: 320px;
    }

    .cwm-rentalCard__media {
        height: 220px;
    }

    .cwm-rentalCard__cta {
        padding: 14px 16px;
    }
}


/* =========================================================================
   Content refresh (Sept 2026)
   -------------------------------------------------------------------------
   New elements introduced by the SEO/AEO copy pass. Appended after the
   media queries above, so each rule that needs to change on small screens
   carries its own breakpoint here rather than relying on source order.
   ========================================================================= */

/* ---- hero: the homepage now has two primary CTAs side by side ---- */
.cwm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

.cwm-hero__actions .cwm-hero__btn {
    margin-top: 0;
}

/* ---- homepage "visit the right location" ---- */
.cwm-homeLocations {
    padding: 64px 0;
}

.cwm-homeLocations .cwm-h2 {
    margin-bottom: 24px;
}

.cwm-homeLocations .cwm-locations {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 64px;
    margin-bottom: 16px;
}

.cwm-homeLocations .cwm-p a {
    color: #0381C1;
    text-decoration: underline;
}

/* ---- "dates are requests, not confirmed bookings" note under date fields ---- */
.cwm-form__hint {
    margin-top: 8px;
    font-family: 'Gantari', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #4A5560;
}

/* ---- related-links line under each request form ---- */
.cwm-formSection__related {
    margin-top: 40px;
    text-align: center;
}

.cwm-formSection__related a {
    color: #0381C1;
    text-decoration: underline;
}

/* ---- rentals: "choose your boat" / "plan ahead" copy below the fleet ---- */
.cwm-rentals__info {
    max-width: 880px;
    margin: 56px auto 0;
}

.cwm-rentals__info .cwm-h2 {
    margin-bottom: 16px;
}

.cwm-rentals__info .cwm-p {
    margin-bottom: 32px;
}

.cwm-rentals__info .cwm-btn {
    margin-top: 8px;
}

/* ---- selects: the storage, slips and contact forms now use dropdowns, which
        inherit the text-input styling but need the native arrow re-added ---- */
select.cwm-form__input,
select.cwm-contactForm__input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2301080F' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

select.cwm-form__input:invalid,
select.cwm-contactForm__input:invalid {
    color: rgba(1, 8, 15, .6);
}

@media (max-width: 768px) {
    .cwm-hero__actions {
        gap: 12px;
    }

    .cwm-homeLocations {
        padding: 40px 0;
    }

    .cwm-homeLocations .cwm-locations {
        flex-direction: column;
        gap: 16px;
    }

    .cwm-rentals__info {
        margin-top: 40px;
    }
}