/* ================================================================
   Apple-style scroll pages (history.html, customers.html)
   .ms-history is the shared scope class, so nothing leaks into the
   rest of the Bootstrap site. .ms-customers adds the segment grid.
   ================================================================ */

.ms-history {
    --mh-paper: #ffffff;
    --mh-ink: #1d1d1f;
    --mh-ink-dim: #6e6e73;
    --mh-night: #000000;
    --mh-night-ink: #f5f5f7;
    --mh-night-dim: #86868b;
    --mh-gold: #c9a84c;
    --mh-crimson: #8b0000;
    --mh-ease: cubic-bezier(0.16, 1, 0.3, 1);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--mh-paper);
    color: var(--mh-ink);
    overflow-x: hidden;
}

/* style.css sets "font-family: 'Lexend' !important" on body and headings,
   so !important here is the only way to hold the system font on this page. */
.ms-history,
.ms-history h1,
.ms-history h2,
.ms-history h3,
.ms-history p,
.ms-history li,
.ms-history a,
.ms-history span,
.ms-history figcaption {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.ms-history .mh-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 22px;
}

/* ---- Chapters ------------------------------------------------ */

.ms-history .mh-chapter {
    padding: clamp(72px, 11vw, 150px) 0;
    text-align: center;
}

.ms-history .mh-chapter--dark {
    background: var(--mh-night);
    color: var(--mh-night-ink);
}

.ms-history .mh-chapter--dark .mh-copy,
.ms-history .mh-chapter--dark .mh-eyebrow {
    color: var(--mh-night-dim);
}

/* ---- Type ---------------------------------------------------- */
/* Tracking is size-specific: large type gets negative, small gets positive. */

.ms-history .mh-eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mh-ink-dim);
    margin: 0 0 18px;
}

.ms-history .mh-year {
    display: block;
    font-size: clamp(3.25rem, 13vw, 8.5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.92;
    margin: 0 0 clamp(14px, 2vw, 26px);
    color: var(--mh-gold);
}

.ms-history .mh-title {
    font-size: clamp(1.75rem, 4.6vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.026em;
    line-height: 1.08;
    margin: 0 auto clamp(16px, 2vw, 24px);
    max-width: 18ch;
    color: inherit;
}

.ms-history .mh-copy {
    font-size: clamp(1.0625rem, 1.55vw, 1.3125rem);
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--mh-ink-dim);
    max-width: 40ch;
    margin: 0 auto;
}

/* ---- Photography --------------------------------------------- */

.ms-history .mh-figure {
    margin: clamp(38px, 6vw, 76px) 0 0;
}

.ms-history .mh-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: clamp(10px, 1.6vw, 20px);
}

.ms-history .mh-caption {
    margin: 16px 0 0;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: var(--mh-ink-dim);
}

.ms-history .mh-chapter--dark .mh-caption {
    color: var(--mh-night-dim);
}

/* ---- Hero ---------------------------------------------------- */

.ms-history .mh-hero {
    padding: clamp(80px, 13vw, 170px) 0 clamp(60px, 9vw, 120px);
}

.ms-history .mh-hero .mh-year {
    font-size: clamp(4rem, 17vw, 11rem);
}

.ms-history .mh-hero .mh-title {
    max-width: 16ch;
}

.ms-history .mh-rule {
    width: 1px;
    height: clamp(48px, 7vw, 88px);
    margin: clamp(34px, 5vw, 60px) auto 0;
    background: linear-gradient(to bottom, var(--mh-gold), transparent);
}

/* ---- Stats --------------------------------------------------- */

.ms-history .mh-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(30px, 4.5vw, 56px) 20px;
    margin-top: clamp(44px, 6vw, 74px);
}

.ms-history .mh-stat-num {
    display: block;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--mh-gold);
}

.ms-history .mh-stat-label {
    display: block;
    margin-top: 10px;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: var(--mh-night-dim);
}

/* ---- Customer segments (customers.html) ---------------------- */

/* The H1 here is a long keyword-bearing sentence, so it needs more
   room per line than the short history headlines. */
.ms-customers .mh-hero .mh-title {
    max-width: 22ch;
    font-size: clamp(1.6rem, 3.5vw, 2.9rem);
}

.ms-history .mh-segments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(34px, 4.5vw, 58px) clamp(28px, 4vw, 54px);
    margin-top: clamp(44px, 6vw, 76px);
    text-align: left;
}

.ms-history .mh-segment h3 {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.28;
    margin: 0 0 10px;
    color: inherit;
}

.ms-history .mh-segment p {
    font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
    line-height: 1.55;
    color: var(--mh-ink-dim);
    margin: 0;
    max-width: 46ch;
}

.ms-history .mh-chapter--dark .mh-segment p {
    color: var(--mh-night-dim);
}

/* ---- Tag grid (customer types) ------------------------------- */

.ms-history .mh-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(38px, 5vw, 60px);
    padding: 0;
    list-style: none;
}

/* Liquid glass. The depth comes from the layered inset shadows, not from
   backdrop-filter - so it still reads correctly over a plain background.
   backdrop-filter uses the shorthand form; url(#svg-filter) references are
   Firefox-only and render as nothing in Chrome and Safari. */
.ms-history .mh-tags li {
    position: relative;
    padding: 12px 22px;
    border: 0;
    border-radius: 980px;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    color: var(--mh-ink);
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 5px 14px rgba(0, 0, 0, 0.06),
        inset 2px 2px 0.5px -2px rgba(0, 0, 0, 0.42),
        inset -2px -2px 0.5px -2px rgba(0, 0, 0, 0.36),
        inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.2),
        inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.2),
        inset 0 0 4px 3px rgba(0, 0, 0, 0.04),
        inset 0 0 2px 1px rgba(0, 0, 0, 0.03),
        0 0 10px rgba(255, 255, 255, 0.5);
    transition: transform 0.3s var(--mh-ease), box-shadow 0.3s var(--mh-ease);
}

/* Light catching the top edge of the material */
.ms-history .mh-tags li::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 58%);
    pointer-events: none;
}

.ms-history .mh-tags li:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.1),
        inset 2px 2px 0.5px -2px rgba(0, 0, 0, 0.45),
        inset -2px -2px 0.5px -2px rgba(0, 0, 0, 0.4),
        inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.24),
        inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.24),
        inset 0 0 4px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 2px 1px rgba(0, 0, 0, 0.03),
        0 0 14px rgba(255, 255, 255, 0.6);
}

/* ---- Supplier logos ------------------------------------------ */

.ms-history .mh-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    align-items: center;
    gap: clamp(26px, 3.5vw, 46px);
    margin-top: clamp(40px, 5vw, 64px);
}

.ms-history .mh-logos img {
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: 0 auto;
    display: block;
    filter: grayscale(1);
    opacity: 0.62;
    transition: opacity 0.3s var(--mh-ease), filter 0.3s var(--mh-ease);
}

.ms-history .mh-logos img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* ---- Closing + button ---------------------------------------- */

.ms-history .mh-closing .mh-title {
    max-width: 20ch;
}

/* Same glass treatment as the pills, but sitting on black - so the inset
   highlights are white instead of black. Stays gold-filled to keep the
   call to action prominent. */
.ms-history .mh-btn {
    position: relative;
    display: inline-block;
    margin-top: clamp(30px, 4vw, 46px);
    padding: 16px 38px;
    border-radius: 980px;
    background: var(--mh-gold);
    color: #1d1d1f;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-decoration: none;
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.35),
        0 10px 26px rgba(0, 0, 0, 0.3),
        inset 3px 3px 0.5px -3px rgba(255, 255, 255, 0.85),
        inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.4),
        inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.55),
        inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.25),
        inset 0 0 6px 4px rgba(255, 255, 255, 0.1),
        0 0 18px rgba(201, 168, 76, 0.28);
    transition: transform 0.3s var(--mh-ease), filter 0.3s var(--mh-ease),
        box-shadow 0.3s var(--mh-ease);
}

.ms-history .mh-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

.ms-history .mh-btn:hover {
    color: #1d1d1f;
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.08);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.38),
        0 16px 34px rgba(0, 0, 0, 0.34),
        inset 3px 3px 0.5px -3px rgba(255, 255, 255, 0.9),
        inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.42),
        inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.6),
        inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.26),
        inset 0 0 6px 4px rgba(255, 255, 255, 0.12),
        0 0 26px rgba(201, 168, 76, 0.4);
}

/* Feedback on press, not on release */
.ms-history .mh-btn:active {
    transform: translateY(0) scale(0.97);
    filter: brightness(0.94);
    transition-duration: 0.1s;
}

/* ---- Liquid metal upgrade ------------------------------------ */
/* Applied by ms-liquid-metal.js only when WebGL is available and motion
   is allowed. Without it the gold pill above stands on its own. */

.ms-history .mh-btn.is-metal {
    background: transparent;
    color: #e6e6e6;
    padding: 0;
    width: 190px;
    height: 56px;
    line-height: 56px;
    overflow: hidden;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 20px 12px rgba(0, 0, 0, 0.18),
        0 9px 9px rgba(0, 0, 0, 0.16),
        0 2px 5px rgba(0, 0, 0, 0.2);
}

.ms-history .mh-btn.is-metal::before {
    display: none;
}

.ms-history .mh-btn.is-metal:hover {
    color: #ffffff;
    filter: none;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 12px 6px rgba(0, 0, 0, 0.1),
        0 8px 5px rgba(0, 0, 0, 0.14),
        0 4px 4px rgba(0, 0, 0, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.22);
}

.ms-history .mh-btn__shader {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
}

/* The shader library sizes its own canvas, so force it to fill the pill */
.ms-history .mh-btn__shader canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: inherit !important;
}

/* Inset by 2px so a thin band of shader reads as a metal rim */
.ms-history .mh-btn__face {
    position: absolute;
    inset: 2px;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(180deg, #202020 0%, #000000 100%);
}

.ms-history .mh-btn__label {
    position: relative;
    z-index: 3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ---- Scroll reveal ------------------------------------------- */

.ms-history .mh-reveal {
    opacity: 0;
    transform: translateY(26px);
    will-change: opacity, transform;
}

.ms-history .mh-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.85s var(--mh-ease), transform 0.85s var(--mh-ease);
}

.ms-history .mh-reveal.is-in.mh-d1 { transition-delay: 0.08s; }
.ms-history .mh-reveal.is-in.mh-d2 { transition-delay: 0.16s; }
.ms-history .mh-reveal.is-in.mh-d3 { transition-delay: 0.24s; }

/* ---- Accessibility preferences ------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ms-history .mh-reveal,
    .ms-history .mh-reveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }

    .ms-history .mh-btn,
    .ms-history .mh-tags li,
    .ms-history .mh-logos img {
        transition: none;
    }

    /* Keep the depth, drop the movement */
    .ms-history .mh-btn:hover,
    .ms-history .mh-tags li:hover {
        transform: none;
    }
}

/* Glass depends on translucency, so make it solid when that is unwanted */
@media (prefers-reduced-transparency: reduce) {
    .ms-history .mh-tags li {
        background: #ffffff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 1px solid rgba(0, 0, 0, 0.3);
    }

    .ms-history .mh-btn {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .ms-history .mh-tags li::before,
    .ms-history .mh-btn::before {
        display: none;
    }
}

@media (prefers-contrast: more) {
    .ms-history .mh-copy { color: #3a3a3c; }
    .ms-history .mh-chapter--dark .mh-copy { color: #d8d8dc; }

    .ms-history .mh-tags li {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.55);
    }
}