/* ==========================================================================
   Motomarine v3 — Base
   Reset, typography, prose, eyebrow label, logo, container & section helpers.
   ========================================================================== */

/* --- Reset --- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--muted);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin: 0;
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* No browser focus ring on a click, but keyboard focus must stay visible */
a:focus,
button:focus,
.cs-btn:focus,
[tabindex]:focus {
    outline: 0;
}
a:focus-visible,
button:focus-visible,
.cs-btn:focus-visible,
[tabindex]:focus-visible,
.cs-input:focus-visible,
.cs-select:focus-visible,
.cs-textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* A red ring disappears on the dark surfaces, so those get a white one */
.bg-dark a:focus-visible,
.bg-dark button:focus-visible,
.cs-footer a:focus-visible,
.cs-footer button:focus-visible,
.cs-header--overlay a:focus-visible,
.cs-header--dark a:focus-visible,
.cs-hero a:focus-visible,
.cs-banner a:focus-visible {
    outline-color: var(--white);
}

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

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    color: var(--primary-hover);
}

button {
    font-family: inherit;
}

/* --- Headings (Yantramanav 700) --- */
h1,
h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.h1,
.h2 {
    font-family: var(--font-heading);
    color: var(--heading);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: 0.1px;
}
h1, .h1 {
    font-size: var(--h1);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
}
h2, .h2 {
    font-size: var(--h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}
h3,
.h3 {
    font-size: var(--h3);
}
h4,
.h4 {
    font-size: var(--h4);
    margin-bottom: 12px;
}
h5,
.h5 {
    font-size: var(--h5);
    letter-spacing: 0;
}
h6,
.h6 {
    font-size: var(--h6);
    letter-spacing: 0;
}

/* --- Prose --- */
p {
    margin: 0 0 16px;
}
p:last-child {
    margin-bottom: 0;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.7;
}
@media (max-width: 767px) {
    .lead {
        font-size: 15px;
        line-height: 1.65;
    }
}

/* --- Eyebrow label --- */
.head-label,
small.head-label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--primary-ink);
    margin-bottom: 14px;
    line-height: 1;
}

/* Section title cluster (eyebrow + heading + intro) */
.cs-section-head {
    margin-bottom: 40px;
}
.cs-section-head.text-center {
    text-align: center;
}
.cs-section-head.text-center .head-label {
    justify-content: center;
}
.cs-section-head.text-center .lead,
.cs-section-head.text-center p {
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
}

/* --- Logo (shared atom: header, footer, styleguide) --- */
.cs-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--secondary);
}
.cs-logo i {
    color: var(--primary);
    font-size: 1.5rem;
}
.cs-logo:hover {
    color: var(--secondary);
}
.cs-logo {
    flex: 0 0 auto;
}
.cs-logo__img {
    flex: 0 0 auto;
    height: 28px;
    width: auto;
    max-width: none;
    display: block;
}
.cs-logo__img--light {
    display: none;
}

/* --- Social icon row (shared atom: top bar, footer, team) --- */
.cs-social {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cs-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--light-bg);
    color: var(--heading);
    font-size: 16px;
    transition: var(--transition);
    border-radius: 4px;
}
.cs-social a i {
    display: flex;
    line-height: 1;
}
.cs-social a:hover {
    background: var(--primary);
    color: var(--white);
}

/* --- Container helpers (work alongside Bootstrap grid .container) --- */
.cs-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 15px;
}
/* Wide Bootstrap gutters (g-lg-5) need 24px of container padding to stay inside the viewport */
@media (min-width: 992px) {
    .cs-container {
        padding-inline: 24px;
    }
}
.cs-container--wide {
    max-width: var(--container-wide);
}
.cs-container--narrow {
    max-width: var(--container-narrow);
}

/* --- Section rhythm --- */
.cs-section {
    padding: var(--section-y) 0;
}
.cs-section--tight {
    padding: var(--section-y-sm) 0;
}
.cs-section--hero {
    padding: 90px 0;
}
.cs-section--flush {
    padding: 0;
}
/* Two sections on the same background back to back: the second drops its top padding so the gap stays one rhythm */
main > .cs-section:not(.bg-lighter):not(.bg-dark):not(.cs-section--flush):not(.cs-crumbbar):not([class*="cs-section--gradient"]):not(.cs-cta-image):not(.cs-cta-fade) + .cs-section:not(.bg-lighter):not(.bg-dark):not(.cs-section--flush):not([class*="cs-section--gradient"]):not(.cs-cta-image):not(.cs-cta-fade),
main > .cs-section.bg-lighter:not(.cs-section--flush) + .cs-section.bg-lighter:not(.cs-section--flush),
main > .cs-section.bg-dark:not(.cs-section--flush) + .cs-section.bg-dark:not(.cs-section--flush) {
    padding-top: 0;
}
/* Visually hidden (screen readers only) */
.cs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.bg-lighter {
    background: var(--bg-light);
}
.bg-light {
    background: var(--light-bg);
}
.bg_light {
    background: var(--bg-light);
}
.bg-dark {
    background: var(--heading);
    color: rgba(255, 255, 255, .72);
}
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark .h3,
.bg-dark h4,
.bg-dark .h4,
.bg-dark h5,
.bg-dark .h5,
.bg-dark h6,
.bg-dark .h6 {
    color: var(--white);
}
.bg-dark p,
.bg-dark .cs-sechead p {
    color: rgba(255, 255, 255, .72);
}
.bg-dark .head-label {
    color: var(--primary-on-dark);
}
.bg-dark .cs-list li {
    color: rgba(255, 255, 255, .85);
}
.bg-secondary-dark {
    background: var(--secondary);
    color: var(--light);
}
.bg-secondary-dark h1,
.bg-secondary-dark h2,
.bg-secondary-dark h3,
.bg-secondary-dark .h3,
.bg-secondary-dark h4,
.bg-secondary-dark .h4,
.bg-secondary-dark h5,
.bg-secondary-dark .h5,
.bg-secondary-dark h6,
.bg-secondary-dark .h6 {
    color: var(--white);
}

/* --- Inline SVG line icons (Tabler, 24 grid, 1px stroke): stroke is currentColor so the color follows --primary --- */
.cs-svg {
    display: block;
    flex: 0 0 auto;
    color: var(--primary);
}
.cs-svg--white {
    color: var(--white);
}

/* --- Utilities --- */
.text-primary-c {
    color: var(--primary) !important;
}
.text-secondary-c {
    color: var(--secondary) !important;
}
.text-muted-c {
    color: var(--muted) !important;
}
.fw-600 {
    font-weight: 700 !important;
}
.fw-700 {
    font-weight: 700 !important;
}
.mb-0 {
    margin-bottom: 0 !important;
}
.mt-0 {
    margin-top: 0 !important;
}

/* --- Responsive type --- */
@media (max-width: 991px) {
    :root {
        --h1: 2.6875rem;
        --h2: 1.9375rem;
        --h3: 1.5625rem;
    }
    .cs-section {
        padding: var(--section-y-sm) 0;
    }
}
@media (max-width: 575px) {
    :root {
        --h1: 2.1875rem;
        --h2: 1.5625rem;
        --h3: 1.3125rem;
        --fs-body: 15px;
    }
}


/* Flush sections stay flush at every width (the small-screen .cs-section rule above would otherwise win on source order) */
.cs-section--flush {
    padding: 0;
}

/* --- Breadcrumb bar: a standalone row under the header on detail pages --- */
.cs-crumbbar {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.cs-crumbbar .cs-breadcrumb {
    margin: 0;
}
main > .cs-crumbbar + .cs-section > .cs-section:first-child,
main > .cs-crumbbar + .cs-section:not(.cs-section--flush) {
    padding-top: 40px;
}
@media (max-width: 767px) {
    main > .cs-crumbbar + .cs-section > .cs-section:first-child,
    main > .cs-crumbbar + .cs-section:not(.cs-section--flush) {
        padding-top: 28px;
    }
}

/* Skip link: off screen until it takes keyboard focus */
.cs-skip {
    position: fixed;
    top: 10px;
    left: 10px;
    /* Above the header and its top bar, which sit at 4990 */
    z-index: 9999;
    padding: 10px 18px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--heading);
    background: var(--white);
    box-shadow: rgba(0, 0, 0, .1) 0 0 5px 0, rgba(0, 0, 0, .1) 0 0 1px 0;
    transform: translateY(-300%);
}
.cs-skip:focus {
    color: var(--heading);
    transform: translateY(0);
}

/* Section with no bottom padding, for full-bleed strips that end the section */
.cs-section.cs-section--nobottom {
    padding-bottom: 0;
}