/* Precision Measurement Technology - extracted stylesheet */
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --dark-blue: #1B3D5F;
    --light-blue: #DDE5EE;
    --light-bg: #F4F8FA;
    --white: #FFFFFF;
    --text: #1B3D5F;
    --muted: #878787;
    --border: #DCE8ED
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 68px
}

body {
    font-family: "Inter",Arial,sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.5;
    overflow-x: hidden
}

img {
    max-width: 100%
}

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

button, input, textarea {
    font-family: inherit
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 68px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(27,61,95,.08);
    z-index: 1000;
    transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease
}

.header-inner {
    position: relative;
    z-index: 2;
    width: min(1400px,calc(100% - 60px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.logo, .main-nav {
    position: relative;
    z-index: 2
}

.logo img, .footer-logo img {
    display: block;
    width: 175px;
    height: auto;
    transition: filter .4s ease
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 100%
}

.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center
}

.nav-trigger, .nav-link {
    border: 0;
    background: none;
    color: var(--dark-blue);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.nav-link::before,
.nav-trigger::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    right: -14px;
    height: 34px;
    transform: translateY(-50%) scale(.9);
    border-radius: 999px;
    background: rgba(27, 61, 95, .08);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    z-index: -1;
    pointer-events: none;
}

.nav-link:hover::before,
.nav-link.nav-active::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.nav-trigger {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px
}

    .nav-item:hover .nav-trigger::before,
    .nav-trigger.nav-active::before {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    .nav-trigger::after {
        content: "";
        width: 5px;
        height: 5px;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .25s ease
    }

.nav-item.open .nav-trigger::after {
    transform: rotate(225deg) translateY(-1px)
}


.dropdown-panel {
    position: fixed;
    top: 68px;
    left: 0;
    width: 100%;
    padding: 38px 0;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease,transform .25s ease,visibility .25s ease;
    box-shadow: 0 20px 50px rgba(27,61,95,.07)
}

.nav-item.open .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.nav-item:hover .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Suppresses any dropdown opening during the brief window
   right after load, while fonts/images can still shift the
   nav's layout under a stationary cursor and cause a hover
   match that was never really intended. main.js removes
   this class once things have settled. */

header.no-flash .nav-item:hover .dropdown-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: none !important;
}

/* Also hard-disable every other transition on the header
   itself during that same window — any property (border,
   background, the pill's shape/position) settling into its
   first real value should snap there instantly, never
   animate, since there's nothing meaningful to animate FROM
   yet. */

header.no-flash,
header.no-flash *,
header.no-flash *::before,
header.no-flash *::after {
    transition: none !important;
}

.nav-item:hover .nav-trigger::after {
    transform: rotate(225deg) translateY(-1px);
}

.dropdown-inner {
    width: min(1200px,calc(100% - 60px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 70px
}

.dropdown-intro span {
    display: block;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase
}

.dropdown-intro h3 {
    max-width: 350px;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -.025em
}

.dropdown-intro p {
    max-width: 350px;
    margin-top: 15px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7
}

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

.dropdown-link {
    padding: 16px 18px;
    border-top: 1px solid var(--border);
    transition: background .25s ease,padding-left .25s ease
}

    .dropdown-link:nth-child(3), .dropdown-link:nth-child(4) {
        border-bottom: 1px solid var(--border)
    }

    .dropdown-link:hover {
        padding-left: 24px;
        background: var(--light-bg)
    }

    .dropdown-link strong {
        display: block;
        margin-bottom: 4px;
        font-size: 13px;
        font-weight: 500
    }

    .dropdown-link span {
        color: var(--muted);
        font-size: 11px
    }

/* =========================================
   TRANSPARENT HEADER OVER HERO

   The header itself stays fully transparent.
   A pill-shaped glass panel starts out sized
   just to fit the nav links (always readable,
   since it brings its own light backdrop no
   matter what sits behind it in the hero). As
   the page scrolls, a second block — the dark-
   blue logo badge — grows in from the left edge
   at the same time the nav panel grows into a
   full-height bar; the two meet with no seam,
   forming one continuous full-width, full-height
   bar split into a dark-blue half (logo, always
   white on it) and a white half (nav).
========================================= */

@media (min-width: 901px) {

    header.header-transparent {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom-color: transparent;
    }

    /* Light gray by default (floating over the hero, or over
       the dark-blue badge below once expanded) — brightness(0)
       crushes the logo to solid black, then invert(96%) lifts
       it to ~#F4F4F4, matching --light-bg rather than stark
       white. The products.php "light-hero" override cancels
       this for its own plain unscrolled state, but never for
       the expanded badge. */
    header.header-transparent .logo img {
        filter: brightness(0) invert(96%);
    }

    header.header-transparent .logo-badge {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: calc(100% + 1px);
        background: var(--dark-blue);
        border-radius: 0 0 0 40px;
        opacity: 0;
        transition: opacity .4s ease;
        z-index: 1;
        pointer-events: none;
    }

    header.header-transparent.is-scrolled .logo-badge {
        opacity: 1;
    }

    header.header-transparent .nav-pill {
        position: absolute;
        top: 50%;
        left: 0;
        width: 0;
        height: 48px;
        transform: translateY(-50%);
        border-radius: 999px;
        background: rgba(255,255,255,.62);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 6px 24px rgba(27,61,95,.1);
        pointer-events: none;
        z-index: 1;
        transition:
            left .5s cubic-bezier(.22,1,.36,1),
            width .5s cubic-bezier(.22,1,.36,1),
            background .3s ease,
            box-shadow .3s ease,
            /* Faster than the dropdown panel's own .25s reveal
               (below), so the pill has already reached full
               header height by the time the panel becomes
               visible — otherwise the panel's edge shows above
               a pill that's still mid-grow, reading as a gap
               under the nav. */
            border-radius .15s ease,
            height .15s ease,
            top .15s ease,
            transform .15s ease;
    }

    header.header-transparent.is-scrolled .nav-pill {
        top: 0;
        /* height:100% alone falls 1px short here: the pill's
           containing block is the header's padding box, which
           excludes the header's own 1px border — leaving a
           hairline gap above the dropdown panel just below it. */
        height: calc(100% + 1px);
        transform: none;
        /* Square now — the rounded cap lives on the logo
           badge's left edge instead, since this bar sits
           flush against it with no seam in between. */
        border-radius: 0;
        background: rgba(255,255,255,.78);
        box-shadow: none;
        border-bottom: 1px solid rgba(27,61,95,.08);
    }
}

@media (max-width: 900px) {
    .nav-pill {
        display: none;
    }
}

.hero {
    position: relative;
    height: 725px;
    /*min-height: 720px;*/
    background: var(--dark-blue);
    color: var(--white);
    overflow: visible
}

.hero-inner {
    width: min(1400px,calc(100% - 60px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2
}

.hero-copy {
    position: relative;
    z-index: 5;
    width: 52%;
    /*padding-top: 35px*/
}

.eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--light-blue);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase
}

.hero h1 {
    max-width: 680px;
    /*font-size: clamp(58px,6.5vw,94px);*/
    font-size:72px;
    line-height: .94;
    font-weight: 300;
    letter-spacing: -.06em
}

    .hero h1 span {
        display: block
    }

.hero-description {
    max-width: 480px;
    margin-top: 27px;
    color: rgba(255,255,255,.67);
    font-size: 14px;
    line-height: 1.75
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 21px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    transition: background .25s ease,color .25s ease,border .25s ease,transform .25s ease
}

    .button:hover {
        transform: translateY(-2px)
    }

.button-primary {
    background: var(--light-blue);
    color: var(--dark-blue)
}

    .button-primary:hover {
        background: var(--white)
    }

.button-secondary {
    color: var(--white);
    border-color: rgba(255,255,255,.28)
}

    .button-secondary:hover {
        background: rgba(255,255,255,.07);
        border-color: rgba(255,255,255,.55)
    }

.hero-image {
    position: absolute;
    top: 0;
    right: -5vw;
    width: 60%;
    height: 100%;
    background-image: linear-gradient(90deg,var(--dark-blue) 0%,rgba(27,61,95,.82) 8%,rgba(27,61,95,0) 32%),url("../images/Edit3.jpg");
    background-size: cover;
    background-position: center 100%;
    mask-image: linear-gradient(90deg,transparent 0%,black 18%,black 100%);
    -webkit-mask-image: linear-gradient(90deg,transparent 0%,black 18%,black 100%);
    opacity: 0.9
}

/* =========================================================
   HERO EARLY ADOPTER
========================================================= */

.hero-early-adopter {
    position: absolute;
    left: 50%;
    bottom: -82px;
    width: min(1400px, calc(100% - 60px));
    transform: translateX(-50%);
    background: #fff;
    z-index: 100;
    box-shadow: 0 18px 45px rgba(27,61,95,.08);
    box-sizing: border-box;
}

.hero-early-main {
    min-height: 164px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 60px;
    padding: 30px 42px;
    box-sizing: border-box;
}

.hero-early-adopter-content {
    max-width: 760px;
}

.hero-early-adopter-label {
    display: block;
    margin-bottom: 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
}

.hero-early-adopter h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -.04em;
    color: var(--dark-blue);
}

.hero-early-adopter p {
    max-width: 620px;
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted);
}


/* BUTTON */

.hero-early-adopter-link {
    min-width: 220px;
    min-height: 52px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: var(--dark-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    transition: background .25s ease;
}

    .hero-early-adopter-link:hover {
        background: #064666;
    }

.hero-early-arrow {
    font-size: 18px;
    transition: transform .25s ease;
}

.hero-early-adopter-link:hover .hero-early-arrow {
    transform: translateX(5px);
}


/* =========================================================
   HOVER EXPANSION
========================================================= */

.hero-early-expanded {
    position: absolute;
    left: 0px;
    bottom: 100%;
    width: calc(100% + 0px);
    height: 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    overflow: hidden;
    opacity: 0;
    background: #fff;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    box-sizing: border-box;
    transition: height .55s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}


/* HOVER */

.hero-early-adopter:hover .hero-early-expanded {
    height: 280px;
    opacity: 1;
}


/* BILD */

.hero-early-image {
    height: 280px;
    overflow: hidden;
}

    .hero-early-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.05);
        transition: transform .7s ease;
    }

.hero-early-adopter:hover .hero-early-image img {
    transform: scale(1);
}


/* EXTRA TEXT */

.hero-early-extra {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--light-bg);
}

    .hero-early-extra span {
        display: block;
        margin-bottom: 15px;
        color: var(--dark-blue);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .hero-early-extra p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.7;
    }

.section {
    padding: 120px 0
}

.section-inner {
    width: min(1200px,calc(100% - 60px));
    margin: 0 auto
}

.section-label {
    display: block;
    margin-bottom: 17px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase
}

.section h2 {
    max-width: 800px;
    color: var(--dark-blue);
    font-size: clamp(42px,5vw,68px);
    line-height: 1.01;
    font-weight: 300;
    letter-spacing: -.05em
}

.section p {
    color: var(--muted)
}

/* =========================
   THE CHALLENGE
========================= */


/* ========================================
   PROBLEM / THE CHALLENGE
======================================== */

.problem {
    position: relative;
    overflow: hidden;

    padding-top: 250px;
    padding-bottom: 140px;

    background: var(--light-bg);
    color: var(--dark-blue);
}

/* BACKGROUND VIDEO */

.problem-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;
    pointer-events: none;
}

/* Hide the native "paused" play button some browsers
   (Safari in particular) overlay on a video if autoplay
   is briefly interrupted — this is a silent background
   loop, it should never show playback controls. */

.problem-video::-webkit-media-controls,
.problem-video::-webkit-media-controls-start-playback-button,
.problem-video::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* LIGHT VIDEO OVERLAY */

.problem-video-overlay {
    position: absolute;
    inset: 0;

    background: var(--light-bg);
    opacity: .93;

    z-index: 1;
    pointer-events: none;
}

/* CENTERED CONTENT CONTAINER */

.problem-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding: 0 40px;

    box-sizing: border-box;
}

/* TWO-COLUMN GRID */

.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: start;
}

/* RIGHT (desktop): HEADING */

.problem-heading {
    min-width: 0;
    order: 2;
}

.problem-heading .section-label {
    display: block;
    margin-bottom: 24px;
}

.problem-heading h2 {
    margin: 0;
    color: var(--dark-blue);

    font-size: clamp(42px, 4.5vw, 70px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -.045em;
}


/* LEFT (desktop): TEXT */

.problem-copy {
    min-width: 0;
    padding-top: 35px;
    order: 1;
}

/* CHALLENGE & APPROACH – SAME BODY TEXT */

.problem-copy > p,
.solution-content > p {
    max-width: 560px;
    margin: 0 0 22px;
    color: var(--dark-blue);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.8;
}

.problem-copy > p:last-of-type {
    margin-bottom: 0;
}

/* TRANSITION STATEMENT */

.problem-transition {
    margin-top: 42px;
    padding-top: 26px;

    border-top: 1px solid rgba(27, 61, 95, .2);
}

.problem-transition-label {
    display: block;
    margin-bottom: 16px;

    color: #69899A;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.problem-transition p {
    max-width: 560px;
    margin: 0;

    color: var(--dark-blue);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.035em;

    opacity: 0;
    transform: translateY(22px);
    filter: blur(10px);
    transition:
        opacity 1s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1),
        filter 1s cubic-bezier(.22, 1, .36, 1);
}

.problem-transition p.is-revealed {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* TABLET */

@media (max-width: 900px) {

    .problem {
        padding: 120px 0;
    }

    .problem-grid {
        gap: 48px;
    }

    .problem-heading h2 {
        font-size: clamp(38px, 5vw, 56px);
    }
}

/* MOBILE */

@media (max-width: 768px) {

    .problem {
        padding: 95px 0;
    }

    .problem-content {
        padding: 0 24px;
    }

    .problem-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .problem-heading {
        order: initial;
    }

    .problem-copy {
        order: initial;
    }

    .problem-heading .section-label {
        margin-bottom: 18px;
    }

    .problem-heading h2 {
        font-size: clamp(38px, 9vw, 52px);
    }

    .problem-copy {
        padding-top: 0;
    }

    .problem-copy > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .problem-transition {
        margin-top: 34px;
        padding-top: 24px;
    }

    .problem-transition p {
        font-size: 26px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .problem-video {
        display: none;
    }
}





.solution {
    position: relative;
    background: var(--light-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0;
}

.solution-scroll {
    width: 100%;
}

.solution-scroll > .section-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.solution-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
}

    .solution-header p {
        max-width: 560px;
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.8
    }

/* =========================================
   SOLUTION SIGNAL WAVE
   Visualizes the shift from vibration noise
   to a calm, compensated signal once "Our
   Approach" scrolls into view.
========================================= */

.solution-wave-wrap {
    width: 100%;
    max-width: 420px;
    margin: 22px 0 8px;
}

.solution-wave {
    display: block;
    width: 100%;
    height: 56px;
    overflow: visible;
}

.solution-wave-path {
    fill: none;
    stroke: var(--dark-blue);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The raw, disturbed measurement — present from
   the start, fading back as the clean signal
   beneath it is extracted. */

.solution-wave-path--noisy {
    stroke-width: 1.1;
    opacity: .55;
}

/* The pure signal we pull out of the noise —
   hidden at first, then drawn out in full,
   confident dark blue with a soft glow. */

.solution-wave-path--clean {
    stroke-width: 1.8;
    opacity: 0;
    filter: drop-shadow(0 2px 10px rgba(27,61,95,.28));
}

@media (max-width: 768px) {
    .solution-wave-wrap {
        display: none;
    }
}

/* Title */

.solution-title {
    overflow: visible;
}

.solution-title-first,
.solution-title-second {
    display: block;
}

.solution-title-second {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(6px);
    transition:
        opacity 1.4s cubic-bezier(.22, 1, .36, 1),
        transform 1.4s cubic-bezier(.22, 1, .36, 1),
        filter 1.4s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform, filter;
}

.solution-title-second.is-revealed {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* =========================================
   RESULT — DARK DATA PANEL
========================================= */

.solution-highlight {
    margin-top: 32px;
    opacity: 0;
    transform: translateY(40px);
    filter: blur(6px);
    transition:
        opacity 1.4s cubic-bezier(.22, 1, .36, 1) .4s,
        transform 1.4s cubic-bezier(.22, 1, .36, 1) .4s,
        filter 1.4s cubic-bezier(.22, 1, .36, 1) .4s;
    will-change: opacity, transform, filter;
}

.solution-highlight.is-revealed {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.solution-highlight-frame {
    position: relative;
    padding: 24px 30px 24px 34px;
    background: var(--dark-blue);
    overflow: hidden;
}

.solution-highlight-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--light-blue);
}

.solution-highlight-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: var(--light-blue);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.solution-highlight-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--light-blue);
    box-shadow: 0 0 0 3px rgba(221, 229, 238, .22);
    animation: solutionDotPulse 2.6s ease-in-out infinite;
}

@keyframes solutionDotPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(221, 229, 238, .22); }
    50% { box-shadow: 0 0 0 6px rgba(221, 229, 238, .07); }
}

.solution-header .solution-highlight p {
    margin: 0;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -.01em;
}

/* Responsive */

@media (max-width: 768px) {

    .solution {
        min-height: 0;
        padding: 90px 0;
    }

    .solution-scroll > .section-inner {
        padding: 0 24px;
    }

    .solution-header {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .solution-title-second,
    .solution-highlight,
    .solution-highlight-dot {
        transition: none !important;
        animation: none !important;
    }
}


/* Gleicher Abstand zwischen Label und Überschrift */

.problem-heading .section-label,
.solution-header .section-label {
    display: block;
    margin: 0 0 24px;
    line-height: 1.2;
}


/* =========================================
   METUBIQ TECHNOLOGY GALLERY
========================================= */

/* Existing technology section */

/* Abstand direkt oberhalb der Galerie entfernen */


/* =========================================
   TECHNOLOGY SECTION
========================================= */

.technology {
    position: relative;
    padding: 0;
    background: var(--white);
}

/* Gallery starts directly without white space */

.technology > .product-gallery {
    margin-top: 0;
}

/* =========================================
   TECHNOLOGY GALLERY
========================================= */


.product-gallery {
    position: relative;
    width: 100%;
    /* The fixed header reserves 68px via scroll-padding-top
       when jumping to this section by anchor — at a full
       100vh, that same 68px then spills the bottom of the
       section below the fold instead. */
    height: calc(100vh - 68px);
    overflow: hidden;
    isolation: isolate;

    font-family: "Inter", Arial, sans-serif;
    background: var(--dark-blue);
    color: var(--white);
}


/* Bilder ohne Zwischenräume */

.product-gallery__images {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
}

.product-gallery__item {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    cursor: pointer;

    will-change: flex-grow;
    transition: flex-grow 1.7s
        cubic-bezier(.19, 1, .22, 1);
}

.product-gallery__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    object-fit: cover;

    filter: brightness(.55) saturate(.85);

    transition: filter 1.5s
        cubic-bezier(.22, 1, .36, 1);
}


/* Gradient overlay */

.product-gallery__item::after {
    content: "";
    position: absolute;
    inset: 15% 0 0;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(27, 61, 95, .2) 35%,
        rgba(0, 25, 43, .92) 100%
    );

    opacity: .7;
    pointer-events: none;
    transition: opacity .6s ease;
}

/* Hover and keyboard interaction */


/* Bilder expandieren beim Hover */

@media (hover: hover) and (pointer: fine) {

    .product-gallery__item:hover {
        flex-grow: 5;
    }

    .product-gallery__item:hover .product-gallery__image {
        filter: brightness(.88) saturate(.95);
    }

    /* Spotlight: the rest of the row dims a little
       further while one image is hovered. */

    .product-gallery__images:has(.product-gallery__item:hover)
    .product-gallery__item:not(:hover) .product-gallery__image {
        filter: brightness(.38) saturate(.7);
    }

    .product-gallery__item:hover::after {
        opacity: 1;
    }

    /* Text erst nach der Expansion einblenden */
    .product-gallery__item:hover .product-gallery__content {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;

    transition:
        opacity .9s ease,
        transform .9s ease,
        visibility 0s linear;
}
}


/* Nur bei echter Tastatur-Navigation expandieren */

.product-gallery__item:focus-visible,
.product-gallery__item:has(:focus-visible) {
    flex-grow: 5;
}

.product-gallery__item:focus-visible .product-gallery__content,
.product-gallery__item:has(:focus-visible) .product-gallery__content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Content */

.product-gallery__content {
    position: absolute;
    z-index: 2;

    left: 38px;
    bottom: 195px;
    width: 360px;
    max-width: none;
    right: auto;

    color: var(--white);

    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 12px, 0);
    pointer-events: none;

    /* Beim Verlassen sofort ausblenden */
    transition:
        opacity .12s ease,
        transform .12s ease,
        visibility 0s linear .12s;
}



.product-gallery__label {
    display: block;
    margin-bottom: 14px;

    color: var(--light-blue);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.product-gallery__content h3 {
    max-width: 460px;
    margin: 0 0 15px;

    color: var(--white);
    font-size: clamp(25px, 2.8vw, 39px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.product-gallery .product-gallery__content p {
    max-width: 360px;
    margin: 0 0 18px;

    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.75;
}

.product-gallery__link {
    display: inline-block;
    padding-bottom: 5px;

    border-bottom: 1px solid rgba(221,229,238,.65);
    color: var(--light-blue);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-decoration: none;
}

.product-gallery__link:hover {
    color: var(--white);
    border-color: var(--white);
}

/* Central product */



/* =========================================
   METUWLI PRODUCT CARD
========================================= */

.product-gallery__product {
    position: absolute;
    z-index: 5;
    bottom: 28px;
    left: 50%;

    transform: translateX(-50%) scale(1);

    display: flex;
    align-items: center;
    gap: 16px;

    width: max-content;
    max-width: calc(100% - 40px);
    padding: 14px 20px;

    background: transparent;/*rgba(27, 61, 95, 0.25);*/

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /*border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0px;*/

    color: var(--white);
    text-decoration: none;

    text-shadow: 0 2px 14px rgba(0, 20, 35, 0.7);
    /*box-shadow: 0 12px 35px rgba(0, 20, 35, 0.18);*/

    cursor: pointer;
    pointer-events: auto;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        background .3s ease,
        box-shadow .3s ease;
}

/* Card hover */

.product-gallery__product:hover {
    transform: translateX(-50%) scale(1.03);
    background: transparent; /*rgba(27, 61, 95, 0.35);*/
    /*box-shadow: 0 18px 45px rgba(0, 20, 35, 0.3);*/
}

/* Product image */

.product-gallery__product-image {
    display: block;
    width: 85px;
    height: 100px;
    flex-shrink: 0;
    object-fit: contain;

    filter: drop-shadow(
        0 8px 16px rgba(0, 20, 35, 0.45)
    );
}

/* Product information */

.product-gallery__product-label {
    display: block;
    margin-bottom: 7px;

    color: var(--light-blue);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.product-gallery__product-info h3 {
    margin: 0 0 6px;

    color: var(--white);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -.035em;
}

.product-gallery .product-gallery__product-info p {
    margin: 0 0 11px;

    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    line-height: 1.6;
}

/* Explore text */

.product-gallery__product-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    padding-right: 0;

    color: var(--light-blue);
    border-bottom: 1px solid var(--light-blue);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;

    transition:
        color .3s ease,
        border-color .3s ease,
        padding-right .3s ease;
}

/* Explore text hover */

.product-gallery__product:hover .product-gallery__product-link {
    color: var(--white);
    border-color: var(--white);
    padding-right: 6px;
}

/* Arrow animation */

.product-gallery__arrow {
    display: inline-block;

    transition: transform .3s ease;
}

.product-gallery__product:hover .product-gallery__arrow {
    transform: translateX(6px);
}

/* Keyboard focus */

.product-gallery__product:focus-visible {
    outline: 2px solid var(--light-blue);
    outline-offset: 4px;
}

/* =========================================
   ACTIVE GALLERY ITEM ON TOUCH
========================================= */

@media (hover: none) and (pointer: coarse) {

    .product-gallery__item.is-active {
        flex-grow: 5;
    }

    .product-gallery__item.is-active .product-gallery__image {
        filter: brightness(.88) saturate(.95);
    }

    .product-gallery__item.is-active::after {
        opacity: 1;
    }

    .product-gallery__item.is-active .product-gallery__content {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .product-gallery__product,
    .product-gallery__arrow,
    .product-gallery__product-link {
        transition: none;
    }
}



/* Tablet */

@media (max-width: 900px) {
    .product-gallery__content {
        left: 24px;
        right: 18px;
        bottom: 175px;
    }

    .product-gallery__content h3 {
        font-size: 27px;
    }
}

/* Mobile */

@media (max-width: 600px) {

    .product-gallery {
        height: 510px;
    }

    .product-gallery__content {
        left: 16px;
        right: 12px;
        bottom: 165px;
    }

    .product-gallery__label {
        font-size: 9px;
        margin-bottom: 9px;
    }

    .product-gallery__content h3 {
        font-size: 22px;
    }

    .product-gallery .product-gallery__content p {
        font-size: 11px;
        line-height: 1.6;
    }

    .product-gallery__product {
        bottom: 20px;
        gap: 12px;
        max-width: calc(100% - 30px);
    }

    .product-gallery__product-image {
        width: 70px;
        height: 90px;
    }

    .product-gallery__product-label {
        font-size: 8px;
    }

    .product-gallery__product-info h3 {
        font-size: 18px;
    }

    .product-gallery .product-gallery__product-info p {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-gallery__item,
    .product-gallery__image,
    .product-gallery__content,
    .product-gallery__item::after {
        transition: none;
    }
}





/* METUWLI CARD – BRAND COLORS */


.product-gallery__product {
    background: transparent;
    color: var(--dark-blue);
    text-shadow: none;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.product-gallery__product:hover {
    background: transparent;
    transform: translateX(-50%) scale(1.03);
}


/* METUWLI – TYPOGRAPHY MATCHING GALLERY */

/* Small label */
.product-gallery__product-label {
    color: var(--light-blue);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Headline */
.product-gallery__product-info h3 {
    color: var(--white);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.035em;
}

/* Description */
.product-gallery .product-gallery__product-info p {
    color: rgba(255, 255, 255, .8);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
}

/* Explore link */
.product-gallery__product-link {
    color: var(--light-blue);
    border-bottom-color: var(--light-blue);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
}

/* Hover */
.product-gallery__product:hover .product-gallery__product-link {
    color: var(--white);
    border-bottom-color: var(--white);
}




/* CHALLENGE → APPROACH TRANSITION */

.problem {
    overflow: visible;
}

.problem-transition {
    position: relative;
    z-index: 5;
}

.problem-transition p {
    will-change: transform, opacity, filter;
}

/* Verhindert, dass das Hintergrundvideo
   über die Challenge-Sektion hinausragt */

.problem-video,
.problem-video-overlay {
    clip-path: inset(0);
}

@media (prefers-reduced-motion: reduce) {
    .problem-transition p {
        transition: none !important;
    }
}



/* =========================================
   COMPANY SECTION
   ========================================= */

.company {
    background: var(--light-bg);
    padding-top: 90px;
}

/* Wide image on top */

.company-image {
    position: relative;
    width: 100%;
    height: min(440px, 52vh);
    overflow: hidden;
    margin-bottom: 65px;
}

.company-image img {
    display: block;
    width: 100%;
    height: calc(100% + 100px);
    object-fit: cover;
    object-position: center 0%;

    /* Keep existing parallax effect */
    transform: translateY(var(--parallax-y, -50px)) scale(1);
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.company-image:hover img {
    transform: translateY(var(--parallax-y, -50px)) scale(1.025);
}

.company-image-label {
    position: absolute;
    top: 28px;
    left: 32px;
    z-index: 2;
    color: var(--white);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.company-image-heading-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 90px 32px 26px;
    background: linear-gradient(to top, rgba(27, 61, 95, .6), rgba(27, 61, 95, 0));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    mask-image: linear-gradient(to top, black 35%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 35%, transparent 100%);
}

h2.company-image-heading {
    margin: 0;
    max-width: 800px;
    color: var(--white);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.02;
    font-weight: 300;
    letter-spacing: -.04em;
}

/* Text left, funding right */

.company-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .65fr);
    gap: 100px;
    align-items: start;
}

.company-copy {
    max-width: 680px;
}

.company-intro {
    margin-bottom: 17px !important;
    color: var(--dark-blue) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.company-copy p {
    margin-bottom: 17px;
    font-size: 14px;
    line-height: 1.75;
}

/* Company facts */

.company-facts {
    margin-top: 30px;
    border-top: 1px solid var(--border);
}

.company-fact {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.company-fact strong {
    color: var(--dark-blue);
    font-size: 12px;
    font-weight: 600;
}

.company-fact span {
    color: var(--muted);
    font-size: 12px;
}

/* Funding column */

.company-funding {
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.company-funding-label {
    display: block;
    margin-bottom: 28px;

    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.company-funding-logo img {
    display: block;
    width: 100%;
    max-width: 350px;
    height: auto;
    object-fit: contain;
}

.company-funding-logo + .company-funding-logo {
    margin-top: 28px;
}

.company-funding-logo--small img {
    max-width: 150px;
}

/* =========================================
   COMPANY – RESPONSIVE
   ========================================= */

@media (max-width: 768px) {

    .company-image {
        height: 240px;
        margin-bottom: 40px;
    }

    .company-image img {
        height: 100%;
        transform: none;
        will-change: auto;
    }

    .company-image:hover img {
        transform: none;
    }

    .company-image-label {
        top: 18px;
        left: 20px;
    }

    .company-image-heading-wrap {
        padding: 46px 20px 18px;
    }

    .company-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .company-copy {
        max-width: 100%;
    }

    .company-funding {
        margin-top: 0;
        padding-top: 24px;
    }

    .company-funding-logo img {
        max-width: 260px;
    }

    .company-fact {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 14px;
    }
}

@media (max-width: 480px) {

    .company-image {
        height: 200px;
    }

    .company-fact {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* =========================================================
   AWARDS
========================================================= */

.awards {
    background: var(--white);
    padding-top: 60px;
}

.awards-header {
    margin-bottom: 80px;
}

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

.award-item {
    display: block;
    text-align: center;
    text-decoration: none;
}

.award-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
}

.award-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(27, 61, 95, .08) 0%, rgba(27, 61, 95, .03) 45%, transparent 72%);
}

.award-image img {
    position: relative;
    max-width: 85%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(27, 61, 95, .18));
    transition: transform .35s ease;
}

.award-item:hover .award-image img {
    transform: translateY(-4px);
}

.award-image-placeholder {
    position: relative;
    color: rgba(27, 61, 95, .45);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}

@media (max-width: 768px) {

    .awards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }
}

@media (max-width: 480px) {

    .awards-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .award-image {
        height: 90px;
    }
}

.news {
    background: var(--white)
}

.news-header {
    margin-bottom: 60px
}

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

.news-card {
    background: var(--white);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: transform .3s ease,box-shadow .3s ease
}

    .news-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(27,61,95,.07)
    }

.news-image {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: var(--light-blue)
}

    .news-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .55s ease
    }

.news-card:hover .news-image img {
    transform: scale(1.05)
}

.news-overlay {
    position: absolute;
    inset: 0;
    background: rgba(27,61,95,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .25s ease
}

.news-card:hover .news-overlay {
    opacity: 1
}

.news-content {
    padding: 24px
}

.news-date {
    display: block;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase
}

.news-content h3 {
    margin-bottom: 10px;
    color: var(--dark-blue);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -.02em
}

.news-content p {
    font-size: 12px;
    line-height: 1.65
}

.events {
    background: var(--dark-blue);
    color: var(--white)
}

.events-inner {
    width: min(1200px,calc(100% - 60px));
    margin: 0 auto;
    padding: 120px 0
}

.events-header {
    display: grid;
    grid-template-columns: 1fr .6fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 65px
}

.events .section-label {
    color: var(--light-blue)
}

.events h2 {
    margin: 0;
    color: var(--white);
    font-size: clamp(44px,5vw,68px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -.05em
}

.events-header > p {
    margin: 0;
    color: rgba(255,255,255,.6);
    font-size: 13px;
    line-height: 1.7
}

.events-list {
    border-top: 1px solid rgba(255,255,255,.17)
}

.event-item {
    display: grid;
    grid-template-columns: 75px 1fr 150px 200px;
    gap: 25px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.17);
    align-items: center;
    transition: padding .25s ease,background .25s ease;
    /*color: inherit;
    text-decoration: none;
    cursor: pointer;*/
}

    .event-item:hover {
        padding-left: 12px;
        padding-right: 12px;
        background: rgba(255,255,255,.035)
    }

.event-date {
    color: var(--light-blue);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .11em
}

.event-name {
    color: var(--white);
    font-size: 16px;
    font-weight: 500
}

.event-location {
    color: rgba(255,255,255,.48);
    font-size: 12px
}

.contact {
    background: var(--white)
}

.contact-grid {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 80px
}

.contact-copy h2 {
    max-width: 500px
}

.contact-copy p {
    max-width: 450px;
    margin-top: 27px;
    font-size: 14px;
    line-height: 1.8
}

.contact-details {
    margin-top: 35px
}

.contact-detail {
    padding: 14px 0;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 25px;
    font-size: 12px
}

    .contact-detail:last-child {
        border-bottom: 1px solid var(--border)
    }

    .contact-detail span:first-child {
        color: var(--muted)
    }

    .contact-detail span:last-child {
        color: var(--dark-blue);
        font-weight: 500
    }

.contact-detail a {
        color: var(--dark-blue);
        font-weight: 500;
        text-decoration: none;
        transition: opacity .25s ease;
    }

 .contact-detail a:hover {
            opacity: .6;
        }

.contact-form {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 17px
}

.form-group {
    display: flex;
    flex-direction: column
}

    .form-group.full {
        grid-column: 1/-1
    }

    .form-group label {
        margin-bottom: 7px;
        color: var(--dark-blue);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase
    }

    .form-group input, .form-group textarea {
        width: 100%;
        padding: 13px 14px;
        background: var(--light-bg);
        border: 1px solid var(--border);
        outline: none;
        color: var(--dark-blue);
        font-size: 12px;
        transition: border .2s ease
    }

        .form-group input:focus, .form-group textarea:focus {
            border-color: var(--dark-blue)
        }

    .form-group textarea {
        min-height: 140px;
        resize: vertical
    }

.contact-form .button {
    margin-top: 3px;
    border: 0;
    cursor: pointer
}


/* =========================================
   CONTACT FORM FEEDBACK
========================================= */

.contact-form .contact-feedback {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-width: 0;
    padding: 14px 18px;
    margin: 0;

    border: 1px solid transparent;
    border-radius: 4px;
}

/* Icon */

.contact-feedback-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 24px;
    height: 24px;

    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
}

/* Text */

.contact-feedback > div {
    min-width: 0;
}

.contact-feedback strong {
    display: block;
    margin: 0 0 3px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.contact .contact-feedback p {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    color: inherit;
}

/* Success */

.contact-feedback-success {
    background: #EAF5F0;
    border-color: #C7E5D5 !important;
    color: #205C43;
}

.contact-feedback-success .contact-feedback-icon {
    background: #D1EBDD;
    color: #205C43;
}

/* Error */

.contact-feedback-error {
    background: #FFF1EF;
    border-color: #F2D0CA !important;
    color: #8A3428;
}

.contact-feedback-error .contact-feedback-icon {
    background: #F7DAD5;
    color: #8A3428;
}

/* Mobile */

@media (max-width: 600px) {
    .contact-form .contact-feedback {
        padding: 12px 14px;
        gap: 10px;
    }
}


footer {
    padding: 60px 0 30px;
    background: var(--dark-blue);
    color: var(--white)
}

.footer-inner {
    width: min(1200px,calc(100% - 60px));
    margin: 0 auto
}

.footer-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding-bottom: 45px;
    border-bottom: 1px solid rgba(255,255,255,.14)
}

.footer-links {
    display: flex;
    gap: 28px;
    color: rgba(255,255,255,.62);
    font-size: 11px
}

.footer-links-break {
    display: none;
}

    .footer-links a {
        transition: color .2s ease
    }

        .footer-links a:hover {
            color: var(--white)
        }

.footer-bottom {
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.38);
    font-size: 12px
}

@media(max-width:1100px) {
    .main-nav {
        gap: 21px
    }

    .hero-copy {
        width: 58%
    }

    .hero-image {
        width: 68%
    }

    .company-grid {
        gap: 50px
    }
}

@media(max-width:900px) {

    html {
        scroll-padding-top: 0;
        /* Native smooth-scroll to an in-page anchor can land
           short on long jumps (e.g. #events, #contact) if
           anything above the target reflows mid-animation —
           an instant jump always lands exactly on target. */
        scroll-behavior: auto;
    }

      header {
        height: 70px;
        position: relative;
        overflow: visible;
        z-index: 1000;
    }

    .header-inner {
        position: relative;
        width: calc(100% - 40px);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: visible;
    }

    .main-nav {
        display: none
    }

    .dropdown-panel {
        display: none
    }

    .hero {
        height: auto;
        min-height: 720px;
        padding: 145px 0 100px
    }

    .hero-inner {
        width: calc(100% - 40px);
        min-height: 530px
    }

    .hero-copy {
        width: 100%;
        padding-top: 0
    }

    .hero h1 {
        font-size: clamp(52px,14vw,82px)
    }

    .hero-image {
        width: 100%;
        opacity: .3;
        mask-image: none;
        -webkit-mask-image: none;
        background-image: linear-gradient(90deg,var(--dark-blue) 0%,rgba(27,61,95,.55) 100%),url("/images/IMG_0640.JPG")
    }

    .section {
        padding: 95px 0
    }

    .section-inner {
        width: calc(100% - 40px)
    }

    .problem {
        padding-top: 100px
    }

    .problem-grid, .solution-header, .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .news-grid {
        grid-template-columns: 1fr
    }

    .company-grid {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .company-image {
        aspect-ratio: 16/9
    }

    .events-inner {
        width: calc(100% - 40px);
        padding: 95px 0
    }

    .events-header {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .event-item {
        grid-template-columns: 85px 1fr 25px
    }

    .event-location {
        display: none
    }

    .footer-top {
        flex-direction: column;
        gap: 35px
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 18px
    }

    .footer-links-break {
        display: block;
        flex-basis: 100%;
        width: 0;
        height: 0;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px
    }
}


@media(max-width:600px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch
    }

    .button {
        width: 100%
    }

    .company-fact {
        grid-template-columns: 1fr;
        gap: 4px
    }

    .news-image {
        height: 210px
    }

    .events h2 {
        font-size: 52px
    }

    .event-item {
        gap: 12px;
        padding: 20px 0
    }

    .event-name {
        font-size: 14px
    }

    .contact-detail {
        flex-direction: column;
        gap: 4px
    }
}

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-submit-area {
    margin-top: 3px;
}

.contact-privacy-note {
    margin: 12px 0 0;
    max-width: 420px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.6;
}

    .contact-privacy-note a {
        color: var(--dark-blue);
        text-decoration: underline;
        text-underline-offset: 2px;
    }





/* =========================================
   METUBIQ HOME – MOBILE OPTIMIZATION
   Smartphones up to 600px
========================================= */

@media (max-width: 600px) {

    /* GENERAL */

    .section {
        padding: 68px 0;
    }

    .section-inner,
    .hero-inner,
    .events-inner,
    .footer-inner {
        width: calc(100% - 40px);
    }

    .section h2 {
        font-size: clamp(34px, 9vw, 44px);
        line-height: 1.08;
        letter-spacing: -.045em;
    }

    /* HERO */


/* HERO – MORE SPACE FOR PRODUCT IMAGE */

.hero {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 118px 0 0;
    overflow: hidden;

    background-color: #1B3D5F;
    background-image:
        linear-gradient(
            to bottom,
            rgba(27, 61, 95, 0.65) 0%,
            rgba(27, 61, 95, 1) 10%,
            rgba(27, 61, 95, 1) 25%,
            rgba(27, 61, 95, .35) 55%,
            rgba(27, 61, 95, .15) 100%
        ),
        url("../images/Edit3.jpg");

background-size: 100% 100%, auto 90%;
background-position: center, -285px -170px;
background-repeat: no-repeat;
}


.hero-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 40px);
    height: auto;
    min-height: 0;
    display: block;
    padding-bottom: 240px;
}


    .hero-copy {
        position: relative;
        z-index: 5;
        width: 100%;
        padding: 0;
    }

    .hero .eyebrow {
        max-width: 300px;
        margin-bottom: 18px;
        font-size: 9px;
        line-height: 1.6;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(38px, 10vw, 52px);
        line-height: 1.02;
        letter-spacing: -.055em;
        overflow-wrap: anywhere;
    }

    .hero-description {
        margin-top: 22px;
        font-size: 13px;
        line-height: 1.65;
    }

    .hero-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 28px;
    }

    .hero-actions .button {
        width: 100%;
        min-height: 48px;
    }





/* HERO IMAGE – FULL BLEED WITH SOFT FADE */




/* HERO IMAGE – FULL WIDTH, SOFT BLUE OVERLAY */

.hero-image {
    position: absolute;
  display: none;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    transform: none;

    background-image:
        linear-gradient(
            to bottom,
            rgba(27, 61, 95, .88) 0%,
            rgba(27, 61, 95, .78) 22%,
            rgba(27, 61, 95, .58) 45%,
            rgba(27, 61, 95, .28) 75%,
            rgba(27, 61, 95, .12) 100%
        ),
        url("../images/Edit3.jpg");

    background-size: cover;
    background-position: 45% center;
    background-repeat: no-repeat;

    opacity: 1;
    mask-image: none;
    -webkit-mask-image: none;
    pointer-events: none;
}






    /* EARLY ADOPTER – COMPACT, NO HOVER */

    .hero-early-adopter {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        box-shadow: none;
        background: var(--white);
    }

    .hero-early-main {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        min-height: 0;
        padding: 32px 20px;
    }

    .hero-early-adopter h2 {
        font-size: 31px;
        line-height: 1.1;
    }

    .hero-early-adopter p {
        font-size: 12px;
        line-height: 1.7;
    }

    .hero-early-adopter-link {
        width: 100%;
        min-width: 0;
        min-height: 48px;
    }

    .hero-early-expanded,
    .hero-early-adopter:hover .hero-early-expanded {
        display: none;
    }

    /* CHALLENGE */

    .problem {
        padding: 72px 0;
    }

    .problem-content {
        padding: 0 20px;
    }

    .problem-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .problem-heading h2 {
        font-size: 44px;
    }

    .problem-copy {
        padding-top: 0;
    }

    .problem-copy > p {
        margin-bottom: 16px;
        font-size: 13px;
        line-height: 1.75;
    }

    /* Transition statement remains visible and static */

    .problem-transition {
        display: block;
        position: static;
        margin-top: 28px;
        padding-top: 22px;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .problem-transition p {
        position: static;
        font-size: 23px;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }

    /* OUR APPROACH – NO LONG STICKY SCROLL */

    .solution {
        height: auto !important;
        padding: 72px 0 !important;
    }

    .solution-scroll {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        overflow: visible;
        display: block;
    }

    .solution-scroll > .section-inner {
        padding: 0 20px;
    }

    .solution-header {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .solution-title {
        font-size: clamp(36px, 9vw, 46px);
    }

    .solution-content > p {
        font-size: 13px;
        line-height: 1.75;
    }

    .solution-highlight {
        margin-top: 25px;
    }

    .solution-header .solution-highlight p {
        font-size: 14px;
    }

    /* TECHNOLOGY – STACKED IMAGE CARDS */

    .product-gallery {
        height: auto;
        overflow: visible;
        background: var(--dark-blue);
    }

    .product-gallery__images {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 0;
    }

    .product-gallery__item {
        flex: none !important;
        width: 100%;
        height: 240px;
        cursor: default;
    }

    .product-gallery__image {
        width: 100%;
        height: 100%;
        filter: brightness(.65) saturate(.85);
    }

    .product-gallery__item::after {
        opacity: 1;
    }

    .product-gallery__content,
    .product-gallery__item.is-active .product-gallery__content {
        left: 20px;
        right: 20px;
        bottom: 20px;
        width: auto;
        max-width: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    .product-gallery__label {
        margin-bottom: 8px;
        font-size: 9px;
    }

    .product-gallery__content h3 {
        margin-bottom: 8px;
        font-size: 23px;
        line-height: 1.12;
    }

    .product-gallery .product-gallery__content p {
        margin-bottom: 10px;
        font-size: 11px;
        line-height: 1.5;
    }

    .product-gallery__product {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        max-width: none;
        padding: 24px 20px;
        gap: 18px;
        background: var(--dark-blue);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .product-gallery__product:hover {
        transform: none;
    }

    .product-gallery__product-image {
        width: 72px;
        height: 90px;
    }

    /* COMPANY */

    .company-image {
        aspect-ratio: 4 / 3;
    }

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

    .company-copy p {
        font-size: 13px;
        line-height: 1.75;
    }

    .company-facts {
        margin-top: 26px;
    }

    .company-fact {
        grid-template-columns: 1fr;
        gap: 4px;
    }


  
  

/* EVENTS – MOBILE STACKED INFORMATION */

.events {
    overflow: hidden;
}

.events-inner {
    width: calc(100% - 40px);
    padding: 68px 0;
}

.events-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.events h2 {
    font-size: 42px;
}

.events-list {
    width: 100%;
    min-width: 0;
}

.event-item {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 18px;
    row-gap: 6px;
    align-items: start;
    min-width: 0;
    padding: 24px 0;
}

.event-logo {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 74px;
    min-width: 0;
    align-self: center;
}

.event-logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.event-date {
    grid-column: 2;
    grid-row: 1;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .05em;
    overflow-wrap: anywhere;
}

.event-name {
    grid-column: 2;
    grid-row: 2;
    font-size: 17px;
    line-height: 1.3;
}

.event-location {
    grid-column: 2;
    grid-row: 3;
    display: block !important;
    position: static;
    width: auto;
    min-width: 0;
    height: auto;
    visibility: visible !important;
    opacity: .75 !important;
    transform: none;
    font-size: 12px;
    line-height: 1.5;
    color: #DDE5EE;
    overflow-wrap: anywhere;
}

.event-item:hover {
    padding-left: 0;
    padding-right: 0;
}


  
  
  

    /* CONTACT */

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

    .contact-form {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contact-form .form-group {
        grid-column: 1 / -1;
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px;
        min-height: 48px;
    }

    .form-group textarea {
        min-height: 140px;
    }

    .contact-detail {
        flex-direction: column;
        gap: 5px;
    }

    .contact-submit-area {
        width: 100%;
    }

    .contact-submit-area .button {
        width: 100%;
    }
}



/* =========================================
   MOBILE HEADER NAVIGATION
========================================= */

/* Hidden on desktop */

.mobile-menu-toggle,
.mobile-nav {
    display: none;
}

@media (max-width: 900px) {

    .header-inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .main-nav {
        display: none;
    }

    /* Burger button */

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;

        width: 44px;
        height: 44px;
        padding: 0;
        margin-left: auto;

        border: 0;
        background: transparent;
        cursor: pointer;
        z-index: 1002;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: #1B3D5F;
        border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease;
    }

    /* Burger transforms into X */

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Dropdown panel */

    .mobile-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;

        padding: 16px 20px 26px;
        background: rgba(27, 61, 95, .92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 18px 30px rgba(0, 20, 35, .25);
        border-top: 1px solid rgba(255, 255, 255, .08);

        max-height: calc(100dvh - 75px);
        overflow-y: auto;
        z-index: 1001;
    }

    .mobile-nav.is-open {
        display: block;
    }

    .mobile-nav-link {
        display: block;
        padding: 17px 0;
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .mobile-nav-row {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .mobile-nav-row .mobile-nav-link {
        flex: 1;
        border-bottom: 0;
    }

    /* Submenu arrow */

    .mobile-submenu-toggle {
        position: relative;
        width: 48px;
        min-width: 48px;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .mobile-submenu-toggle span {
        position: absolute;
        top: 19px;
        left: 17px;

        width: 10px;
        height: 10px;

        border-right: 2px solid #FFFFFF;
        border-bottom: 2px solid #FFFFFF;

        transform: rotate(45deg);
        transition: transform .25s ease;
    }

    .mobile-submenu-toggle.is-open span {
        transform: rotate(225deg);
    }

    /* Submenu content */

    .mobile-submenu {
        display: none;
        padding: 8px 0 14px 16px;
        background: rgba(255, 255, 255, .04);
    }

    .mobile-submenu.is-open {
        display: block;
    }

    .mobile-submenu a,
    .mobile-nav-disabled {
        display: block;
        padding: 12px 0;
        color: #DDE5EE;
        font-size: 13px;
        line-height: 1.5;
        text-decoration: none;
    }

    .mobile-nav-disabled {
        opacity: .5;
    }
}