:root {
    --ink: #0c1a3a;
    --ink2: #16294f;
    --sig: #ff5a1f;
    --sigd: #e2470e;
    --paper: #f4f6fa;
    --white: #fff;
    --line: #dce2ec;
    --mute: #5b6783;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --w: 1160px
}

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

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

html {
    background: #fff
}

body {
    font: 400 1rem/1.6 "IBM Plex Sans", system-ui, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased
}

/* perforated-panel pattern: full strength at both edges, gone by one third of the way in */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 fill=%22none%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22%3E%3Cg stroke=%22%23162a52%22%3E%3Ccircle cx=%2248%22 cy=%2216%22 r=%229%22/%3E%3Ccircle cx=%2248%22 cy=%2216%22 r=%224%22/%3E%3Ccircle cx=%2216%22 cy=%2248%22 r=%229%22/%3E%3Ccircle cx=%2216%22 cy=%2248%22 r=%224%22/%3E%3C/g%3E%3Cg stroke=%22%23ff5a1f%22%3E%3Cpolygon points=%2216,4 18.7,9.5 24.5,7.5 22.5,13.3 28,16 22.5,18.7 24.5,24.5 18.7,22.5 16,28 13.3,22.5 7.5,24.5 9.5,18.7 4,16 9.5,13.3 7.5,7.5 13.3,9.5%22/%3E%3Cpolygon points=%2248,36 50.7,41.5 56.5,39.5 54.5,45.3 60,48 54.5,50.7 56.5,56.5 50.7,54.5 48,60 45.3,54.5 39.5,56.5 41.5,50.7 36,48 41.5,45.3 39.5,39.5 45.3,41.5%22/%3E%3C/g%3E%3C/svg%3E") center top/64px 64px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 33.33%, transparent 66.67%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0, transparent 33.33%, transparent 66.67%, #000 100%);
    opacity: .22;
    animation: fade 1.6s var(--ease) both
}

h1,
h2,
h3 {
    font-family: "Archivo", "Arial Narrow", sans-serif;
    font-stretch: 78%;
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.01em
}

h1,
.h1 {
    font-size: clamp(2.8rem, 7vw, 5.4rem)
}

h2 {
    font-size: clamp(2rem, 4.4vw, 3.2rem)
}

h3 {
    font-size: 1.35rem;
    font-stretch: 90%
}

a {
    color: inherit
}

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

:focus-visible {
    outline: 2px solid var(--sig);
    outline-offset: 3px
}

.wrap {
    max-width: var(--w);
    margin: auto;
    padding-inline: 24px
}

section {
    padding-block: clamp(64px, 9vw, 120px)
}

.lead {
    font-size: 1.15rem;
    color: var(--mute);
    max-width: 46ch;
    margin-top: 20px
}

.bar {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    z-index: 60;
    background: var(--sig);
    transform: scaleX(var(--s, 0));
    transform-origin: left
}

/* header */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #191f4f;
    color: #fff;
    transition: box-shadow .4s
}

header.on {
    box-shadow: 0 10px 28px #191f4f40
}

.nav {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 72px;
    transition: height .4s var(--ease)
}

header.on .nav {
    height: 60px
}

.logo {
    display: block;
    line-height: 0
}

.logo img {
    height: 40px;
    width: auto;
    transition: height .4s var(--ease)
}

header.on .logo img {
    height: 34px
}

.nav nav {
    display: flex;
    gap: 26px;
    margin-inline-start: auto
}

.nav nav a {
    text-decoration: none;
    font-size: .95rem;
    position: relative;
    padding-block: 6px
}

.nav nav a::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--sig);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease)
}

.nav nav a:hover::after {
    transform: scaleX(1)
}

/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 99px;
    padding: 14px 26px;
    font: 600 .98rem inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    background: var(--sig);
    color: #fff;
    transition: transform .35s var(--ease), background .3s, box-shadow .35s
}

.btn:hover {
    background: var(--sigd);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px #ff5a1f40
}

.btn.ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--ink)
}

.btn.ghost:hover {
    background: var(--ink);
    color: #fff;
    box-shadow: none
}

.btn.sm {
    padding: 9px 20px
}

/* cover image */
.cover {
    position: relative;
    height: clamp(460px, calc(100svh - 72px), 860px);
    overflow: hidden;
    padding: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 88%, transparent 100%)
}

.cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 55%;
    animation: settle 2.8s var(--ease) both
}

.cover .wrap {
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: none;
    margin: 0;
    padding-inline: clamp(20px, 3.2vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: center
}

/* the title plate: a frosted glass tube that extrudes out of a pipe cross-section */
.plate {
    display: flex;
    align-items: center;
    --h: 148px;
    gap: 28px;
    width: fit-content;
    max-width: 100%;
    height: var(--h);
    padding: 12px 56px 12px 12px;
    border-radius: 99px;
    color: #fff;
    background: #191f4fb8;
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: inset 0 0 0 1px #ffffff2e;
    animation: extrude 1.5s var(--ease) .35s both
}

.pg {
    flex: none;
    width: calc(var(--h) - 24px);
    height: calc(var(--h) - 24px);
    border-radius: 50%;
    background: #fff;
    padding: 4px
}

.pg .spin {
    transform-origin: center;
    animation: spin 60s linear infinite
}

.pt {
    animation: fade .9s var(--ease) 1.05s both
}

.cover h1 {
    line-height: 0
}

.cover h1 img {
    display: block;
    width: clamp(190px, 19vw, 290px);
    height: auto;
    margin-left: 15px
}

.cover p {
    margin-top: 70px;
    font: 500 clamp(.95rem, 1.35vw, 1.2rem) "IBM Plex Sans", sans-serif;
    color: #d3dcf3
}

@keyframes settle {
    from {
        transform: scale(1.07)
    }
}

@keyframes extrude {
    from {
        clip-path: inset(0 calc(100% - var(--h)) 0 0 round 99px)
    }

    to {
        clip-path: inset(0 0 0 0 round 99px)
    }
}

/* hero */
.hero:not(.go) *,
.hero {
    padding-block: clamp(40px, 7vw, 96px) 72px;
    overflow: hidden
}

.hero .wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center
}

.hero .h1 .ln {
    display: block;
    overflow: hidden
}

.hero .h1 .ln span {
    display: block;
    animation: rise 1s var(--ease) both;
    animation-delay: calc(var(--d)*120ms + 200ms)
}

.hero .lead,
.hero .cta {
    animation: fade 1s var(--ease) .75s both
}

.cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 34px
}

.stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
    aspect-ratio: 1;
    max-width: 520px;
    margin-inline: auto;
    width: 100%
}

.stage img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 24px 48px #0c1a3a24
}

.stage img:nth-child(1) { object-position: center 52% }
.stage img:nth-child(2) { object-position: center 50% }
.stage img:nth-child(3) { object-position: center 50% }
.stage img:nth-child(4) { object-position: center 48% }

.cell {
    transform-box: fill-box;
    transform-origin: center;
    animation: pop .8s var(--ease) calc(var(--i, 0)*70ms) both
}

@keyframes pop {
    from {
        opacity: 0;
        transform: scale(.55)
    }
}

@keyframes rise {
    from {
        transform: translateY(105%)
    }
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(14px)
    }
}

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

/* ticker */
.tick {
    background: var(--ink);
    color: #c9d3ea;
    padding-block: 18px;
    overflow: hidden;
    white-space: nowrap
}

.tick div {
    display: inline-flex;
    gap: 56px;
    padding-inline-end: 56px;
    animation: slide 50s linear infinite
}

.tick:hover div {
    animation-play-state: paused
}

@keyframes slide {
    to {
        transform: translateX(-50%)
    }
}

[dir=rtl] .tick div {
    animation-direction: reverse
}

/* reveal */
.rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: calc(var(--d, 0)*80ms)
}

.rv.in {
    opacity: 1;
    transform: none
}

/* products */
.head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 36px
}

.tools {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center
}

.tabs {
    position: relative;
    display: flex;
    gap: 4px;
    background: #fff;
    padding: 5px;
    border-radius: 99px;
    box-shadow: inset 0 0 0 1px var(--line)
}

.tabs button {
    position: relative;
    z-index: 1;
    font: 500 .9rem inherit;
    font-family: inherit;
    border: 0;
    background: none;
    padding: 8px 16px;
    border-radius: 99px;
    cursor: pointer;
    color: var(--mute);
    transition: color .3s
}

.tabs button[aria-pressed=true] {
    color: #fff
}

.tabs i {
    position: absolute;
    z-index: 0;
    top: 5px;
    bottom: 5px;
    border-radius: 99px;
    background: var(--ink);
    transition: left .45s var(--ease), width .45s var(--ease)
}

input,
select,
textarea {
    font: inherit;
    color: #0c1a3a;
    caret-color: #0c1a3a;
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color .3s, box-shadow .3s
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--sig);
    box-shadow: 0 0 0 4px #ff5a1f22
}

#q {
    width: 220px;
    border-radius: 99px
}

::placeholder {
    color: #7b86a1;
    opacity: 1
}

option {
    color: #0c1a3a
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px
}

.card {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    text-align: start;
    border: 1px solid var(--line);
    cursor: pointer;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px #0c1a3a17;
    border-color: transparent
}

.card svg {
    width: 92px;
    height: 92px;
    transition: transform .8s var(--ease)
}

.card:hover svg {
    transform: scale(1.1)
}

.card .cell {
    animation: none
}

.card p {
    color: var(--mute);
    font-size: .93rem
}

.card small {
    margin-top: auto;
    color: var(--sigd);
    font-weight: 600
}

.empty {
    padding: 40px;
    color: var(--mute)
}

/* drawer + dialog */
dialog {
    border: 0;
    padding: 0;
    color: var(--ink)
}

dialog::backdrop {
    background: #0c1a3a66;
    backdrop-filter: blur(3px);
    animation: fadeb .4s both
}

@keyframes fadeb {
    from {
        opacity: 0
    }
}

#drawer {
    margin: 0 0 0 auto;
    height: 100%;
    max-height: 100%;
    width: min(560px, 100%);
    background: #fff;
    animation: slidein .5s var(--ease)
}

[dir=rtl] #drawer {
    margin: 0 auto 0 0
}

@keyframes slidein {
    from {
        transform: translateX(40px);
        opacity: 0
    }
}

.pad {
    padding: 32px;
    display: grid;
    gap: 22px
}

.x {
    position: absolute;
    inset: 14px 14px auto auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: var(--paper);
    cursor: pointer;
    font-size: 1.3rem;
    transition: transform .4s var(--ease)
}

.x:hover {
    transform: rotate(90deg)
}

.kv {
    display: grid;
    gap: 10px
}

.kv div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px
}

.kv span {
    color: var(--mute)
}

.kv b {
    text-align: end;
    font-weight: 600
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.chips span {
    background: var(--paper);
    border-radius: 99px;
    padding: 5px 12px;
    font-size: .85rem
}

.tbl {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: .9rem
}

th,
td {
    padding: 10px 14px;
    text-align: start;
    white-space: nowrap
}

th {
    background: var(--paper);
    font-weight: 600
}

tr+tr td {
    border-top: 1px solid var(--line)
}

#quote {
    margin: auto;
    width: min(520px, calc(100% - 32px));
    border-radius: 22px;
    animation: fade .5s var(--ease)
}

form {
    display: grid;
    gap: 14px
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.hp {
    position: absolute;
    left: -9999px
}

.msg {
    min-height: 1.4em;
    font-size: .93rem
}

.msg.err {
    color: #c4281c
}

.msg.ok {
    color: #14804a;
    font-weight: 600
}

/* selector */
.sel {
    background: #fff;
    border-radius: 24px;
    padding: clamp(24px, 4vw, 48px);
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(24px, 4vw, 56px);
    border: 1px solid var(--line)
}

.sel form {
    grid-template-columns: 1fr 1fr
}

.sel label {
    font-size: .85rem;
    color: var(--mute);
    display: grid;
    gap: 6px
}

.out {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-content: center
}

.out div {
    background: var(--paper);
    border-radius: 14px;
    padding: 18px;
    transition: transform .5s var(--ease)
}

.out div.bump {
    animation: pop .5s var(--ease)
}

.out b {
    display: block;
    font: 800 2.2rem "Archivo", sans-serif;
    font-stretch: 80%;
    line-height: 1
}

.out span {
    font-size: .85rem;
    color: var(--mute)
}

/* dark band */
.dark {
    background: var(--ink);
    color: #fff
}

.dark .lead {
    color: #aab6d3
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px
}

.stats b {
    display: block;
    font: 800 clamp(2.4rem, 5vw, 4rem) "Archivo", sans-serif;
    font-stretch: 78%;
    color: var(--sig);
    line-height: 1
}

.stats span {
    color: #aab6d3;
    font-size: .95rem
}

.steps {
    position: relative;
    margin-top: 56px;
    display: grid;
    gap: 0;
    max-width: none;
    --p: 0
}

.steps::before,
.steps::after {
    content: "";
    position: absolute;
    inset-inline-start: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #ffffff26
}

.steps::after {
    background: var(--sig);
    transform: scaleY(var(--p));
    transform-origin: top
}

.steps .step-item {
    position: relative;
    padding: 0 0 28px 44px;
    opacity: .4;
    transition: opacity .6s
}

[dir=rtl] .steps .step-item {
    padding: 0 44px 28px 0
}

.steps .step-item.on {
    opacity: 1
}

.steps .step-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: inset 0 0 0 2px #ffffff55;
    transition: .5s var(--ease)
}

.steps .step-item.on::before {
    background: var(--sig);
    box-shadow: 0 0 0 6px #ff5a1f33
}

.steps .step-item h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    line-height: 1.2
}

.steps p {
    color: #aab6d3;
    font-size: .95rem;
    margin: 0
}
.process-layout { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(340px,1.1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.step-item { cursor:default; }
.process-visual { position:sticky; top:110px; margin:56px 0 0; }
.process-visual .asset-placeholder { min-height:min(52vw,500px); aspect-ratio:4/3; }
.process-image-slots { display:grid; grid-template-columns:1fr; gap:12px; }
.process-image-slots.dual { grid-template-columns:1fr; }
.process-image-slots .asset-placeholder { min-height:190px; aspect-ratio:4/3; padding:16px; }
.process-image-photo { overflow:hidden; aspect-ratio:4/3; border:1px solid #ffffff26; border-radius:14px; background:#0c1a3a; }
.process-image-photo img { width:100%; height:100%; object-fit:cover; }
.process-visual figcaption { margin-top:14px; color:#aab6d3; font-weight:600; font-size:1.1rem; }
.process-visual.fade-left { animation:processFadeLeft .48s var(--ease) both; }
@keyframes processFadeLeft { from {opacity:.15; transform:translateX(32px)} to {opacity:1; transform:translateX(0)} }

/* Clearly marked media slots until MAPCO supplies approved photos and clips. */
.asset-placeholder {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 7px;
    min-height: 150px;
    padding: 22px;
    text-align: center;
    color: #aab6d3;
    border: 1px dashed #8d9bb8;
    border-radius: 14px;
    background: repeating-linear-gradient(135deg, #ffffff08 0 12px, #ffffff12 12px 24px);
}
.asset-placeholder b { color: var(--sig); font-size: .76rem; letter-spacing: .1em; }
.asset-placeholder span { font-size: .9rem; }
.process-image { min-height: 112px; margin: 12px 0 16px; opacity: .95; transition: opacity .5s, transform .5s; }
.steps .step-item.on .process-image { opacity: 1; transform: translateX(4px); }
.lab-background-placeholder,.contact-photo-placeholder { color: var(--ink); background: repeating-linear-gradient(135deg,#edf1f7 0 18px,#e2e8f1 18px 36px); }
.lab-background-placeholder { min-height: 210px; margin: 24px 0; }
.lab-hero { position:relative; display:flex; min-height:390px; align-items:center; overflow:hidden; }
.lab-hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lab-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0c1a3acc,#0c1a3a70 55%,#0c1a3a38); }
.lab-hero .ph1 { position:relative; z-index:1; width:min(var(--w),calc(100% - 48px)); margin-inline:auto; padding-block:56px; }
.lab-hero .h1,.lab-hero .lead { color:#fff; text-shadow:0 2px 14px #0c1a3a80; }
.quality-lab-photo { width:100%; max-height:340px; aspect-ratio:16/6; margin:24px 0; object-fit:cover; border-radius:14px; }
.contact-photo-placeholder { min-height: 190px; }
.contact-photo { display:block; width:100%; min-height:190px; aspect-ratio:4/3; object-fit:cover; border-radius:14px; }
.cover-content { z-index:2; }
.sizing-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
form[hidden],[hidden] { display:none !important; }
@media(max-width:860px){.process-layout{grid-template-columns:1fr}.process-visual{position:relative;top:auto;margin:20px 0}.process-visual .asset-placeholder{min-height:220px}}
@media(max-width:520px){.process-image-slots.dual{grid-template-columns:1fr}}

/* certs, faq, contact, footer */
.certs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px
}

.certs-home-preview { position: relative; margin-top: 36px; }
.certs-home {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 250px);
    max-height: 518px;
    overflow: hidden;
}
.certs-home .cert { height: 250px; display: flex; flex-direction: column; overflow: hidden; }
.certs-home .cert:nth-child(n+5) { opacity: .24; }
.certs-home .cert p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.certs-home .cert-actions { margin-top: auto; }
.certs-home-preview::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 268px 0 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--cert-fade, #fff) 92%);
}
.certs-home-more {
    position: absolute;
    z-index: 2;
    top: 393px;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    box-shadow: 0 6px 24px #0c1a3a30;
}
.certs-home-more:hover { transform: translate(-50%, -50%); }
@media (max-width: 900px) {
    .certs-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .certs-home .cert:nth-child(n+3) { opacity: .24; }
}
@media (max-width: 520px) {
    .certs-home { grid-template-columns: minmax(0, 1fr); }
    .certs-home .cert:nth-child(n+2) { opacity: .24; }
}

.cert {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    border: 1px solid var(--line)
}

.cert p {
    color: var(--mute);
    font-size: .9rem
}

.cert-actions { margin-top: 18px; }
.certificate-preview {
    position: relative;
    margin: auto;
    padding: 52px 18px 18px;
    width: fit-content;
    max-width: 96vw;
    max-height: 94vh;
    overflow: auto;
    border-radius: 18px;
    background: var(--paper);
    box-shadow: 0 24px 80px #07112866;
}
.certificate-preview img {
    display: block;
    max-width: min(92vw, 1050px);
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}
.certificate-preview-note { margin: 0; padding: 8px 12px; color: var(--mute); }
.certificate-preview .x { z-index: 1; }

.tag {
    display: inline-block;
    margin-top: 14px;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 99px;
    padding: 4px 12px;
    background: #e3f6ec;
    color: #14804a
}

.tag.expiring {
    background: #fff1d6;
    color: #9a6100
}

.tag.expired {
    background: #fde4e1;
    color: #c4281c
}

details {
    border-bottom: 1px solid var(--line);
    padding-block: 20px
}

summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px
}

summary::after {
    content: "+";
    font-size: 1.5rem;
    line-height: 1;
    transition: transform .4s var(--ease)
}

details[open] summary::after {
    transform: rotate(45deg)
}

details p {
    color: var(--mute);
    margin-top: 12px;
    max-width: 62ch;
    animation: fade .5s var(--ease)
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 5vw, 72px)
}

.info {
    display: grid;
    gap: 18px;
    margin-top: 28px
}

.info span {
    display: block;
    color: var(--mute);
    font-size: .85rem
}

footer {
    background: var(--ink);
    color: #aab6d3;
    padding-block: 36px;
    font-size: .9rem
}

footer .wrap {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

@media(max-width:860px) {

    .hero .wrap,
    .split,
    .sel {
        grid-template-columns: 1fr
    }

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

    .nav nav {
        display: none
    }

    .nav .btn {
        margin-inline-start: auto
    }
}

@media(max-width:860px) {
    .cover {
        height: clamp(420px, 66svh, 620px)
    }

    .cover .wrap {
        justify-content: flex-start;
        padding-top: 36px
    }

    .cover img {
        object-position: 62% center
    }

    .plate {
        --h: 112px;
        gap: 18px;
        padding-right: 30px
    }

    .cover h1 img {
        width: 170px
    }
}

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

    *,
    ::before,
    ::after {
        animation: none !important;
        transition: none !important
    }

    .rv {
        opacity: 1;
        transform: none
    }

    html {
        scroll-behavior: auto
    }
}

/* cover slideshow + centered title box */
.cover img.sl{transform:translateX(100%);z-index:0;animation:none;transition:transform 1.1s var(--ease);will-change:transform}
.cover .wrap{align-items:center;text-align:center;padding-inline:20px;z-index:10}
.tbox{display:grid;justify-items:center;gap:14px;padding:30px 46px;border-radius:26px;color:#fff;background:rgba(25, 31, 79, .38);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 0 0 1px #ffffff40;animation:fade 1s var(--ease) .4s both}
.cover .tbox img{position:static;inset:auto;width:clamp(180px, 20vw, 280px);height:auto;margin:0;animation:none;object-fit:contain}
.tline{font:600 clamp(.95rem, 1.5vw, 1.25rem) "IBM Plex Sans", sans-serif;color:#eef2fb}
.dots{position:absolute;z-index:11;left:50%;bottom:13%;transform:translateX(-50%);display:flex;gap:8px}
.dots i{position:relative;width:34px;height:3px;border-radius:3px;overflow:hidden;background:#ffffff59}
.dots i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.dots i.act::after{animation:fill 5s linear both}
@keyframes fill{to{transform:scaleX(1)}}
@media(max-width:860px){.cover .wrap{justify-content:center;padding-top:0}.tbox{padding:22px 28px}}
.cover img.sl:first-of-type{transform:none;z-index:1}

/* ---- sub-pages, vision, gallery, downloads, book viewer ---- */
.card{text-decoration:none;color:inherit}
footer a{color:inherit}
.ph1{padding-top:clamp(40px,6vw,80px);padding-bottom:28px}
.sec{padding-bottom:clamp(48px,6vw,80px)}
.back{display:inline-block;margin-bottom:18px;color:var(--mute);text-decoration:none;transition:color .3s,transform .4s var(--ease)}
.back:hover{color:var(--sig);transform:translateX(-4px)}
.pd{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding-block:clamp(40px,6vw,80px)}
.pd .kv{margin-top:28px}.pd .chips{margin-top:20px}.pd .cta{margin-top:30px}
.pdg{aspect-ratio:1;background:#fff;border-radius:50%;padding:12%;box-shadow:0 40px 90px #0c1a3a1c}
.pdg svg{width:100%;height:100%;overflow:visible}
.pdg .spin{transform-origin:center;animation:spin 90s linear infinite}
.mas{columns:300px;column-gap:16px}
.mas a{display:block;margin-bottom:16px;border-radius:16px;overflow:hidden;break-inside:avoid}
.mas img{width:100%;transition:transform .9s var(--ease)}
.mas a:hover img{transform:scale(1.05)}
#lb{background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0}
#lb[open]{display:grid;place-items:center}
#lb img{max-width:92vw;max-height:88vh;border-radius:12px;transition:opacity .25s}
#lb .x{inset:18px 18px auto auto;z-index:2}
.nv{position:absolute;top:50%;width:52px;height:52px;border-radius:50%;border:0;background:#ffffffe0;font-size:1.8rem;cursor:pointer;transform:translateY(-50%);transition:transform .3s var(--ease)}
.nv:hover{transform:translateY(-50%) scale(1.1)}
.nv.p{left:18px}.nv.n{right:18px}
.pl{display:grid;gap:20px;padding-bottom:80px}
.pc{display:flex;gap:28px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.pc:hover{box-shadow:0 22px 46px #0c1a3a17;transform:translateY(-4px)}
.pcv{flex:none;width:130px;aspect-ratio:.72;border-radius:8px;overflow:hidden;box-shadow:0 10px 24px #0c1a3a2a}
.pcv img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pc:hover .pcv img{transform:scale(1.06)}
.pc p{color:var(--mute);margin:6px 0 8px}.pc small{color:var(--mute)}.pc .cta{margin-top:16px}
.rd{padding-bottom:70px}
.rh{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.bk{position:relative;width:min(100%,980px);aspect-ratio:1.42;margin:28px auto 0;perspective:2400px;filter:drop-shadow(0 30px 40px #0c1a3a30);cursor:pointer}
.pb{position:absolute;top:0;width:50%;height:100%;background:#fff;overflow:hidden}
.pb.l{left:0}.pb.r{left:50%}.pb:empty{visibility:hidden}
.pb img,.leaf img{width:100%;height:100%;object-fit:contain;display:block}
.pb::after{content:"";position:absolute;inset:0;pointer-events:none}
.pb.l::after{background:linear-gradient(90deg,transparent 88%,#0c1a3a24)}
.pb.r::after{background:linear-gradient(270deg,transparent 88%,#0c1a3a24)}
.leaf{position:absolute;top:0;width:50%;height:100%;z-index:3;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.45,.05,.2,1)}
.leaf.f{left:50%;transform-origin:left}.leaf.b{left:0;transform-origin:right}
.leaf.f.go{transform:rotateY(-180deg)}.leaf.b.go{transform:rotateY(180deg)}
.leaf>div{position:absolute;inset:0;background:#fff;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf>.bk2{transform:rotateY(180deg)}
.bb{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.bb input{width:min(360px,50vw);padding:0;accent-color:var(--sig)}
.bb span{min-width:150px;text-align:center;color:var(--mute);font-size:.9rem}
.vis{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px)}
.vq{margin-top:22px;padding-inline-start:22px;border-inline-start:4px solid var(--sig);font:800 clamp(1.8rem,3.4vw,2.8rem)/1.1 "Archivo",sans-serif;font-stretch:80%}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:28px}
.vals div{border-top:1px solid var(--line);padding:16px 0}
.vals b{display:block}.vals span{color:var(--mute);font-size:.92rem}
.gs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gs a{border-radius:16px;overflow:hidden;aspect-ratio:4/3}
.gs img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gs a:hover img{transform:scale(1.07)}
@media(max-width:860px){.pd,.vis{grid-template-columns:1fr}.gs{grid-template-columns:1fr 1fr}.pc{flex-direction:column}.pdg{max-width:300px}}

/* ---- map, contact, quality ---- */
.fmap{position:relative;height:230px;margin-top:26px;border-radius:16px;overflow:hidden;background:#e7ecf4}
.cmap{position:relative;height:clamp(320px,48vw,480px);border-radius:22px;overflow:hidden;background:#e7ecf4;box-shadow:0 24px 60px #0c1a3a1a}
.fmap .leaflet-tile-pane,.cmap .leaflet-tile-pane{filter:grayscale(.45) contrast(.95)}
.nopin{position:absolute;z-index:500;left:12px;bottom:12px;background:#fff;color:var(--ink);border-radius:99px;padding:6px 14px;font-size:.85rem;box-shadow:0 6px 18px #0c1a3a30}
.fpin i{display:block;width:34px;height:34px;border-radius:50% 50% 50% 0;background:var(--sig);transform:rotate(-45deg);box-shadow:0 8px 16px #0c1a3a55;animation:drop .9s var(--ease) both}
.fpin i::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}
@keyframes drop{from{opacity:0;transform:translateY(-34px) rotate(-45deg)}}
.pinbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:14px}
.pinbar span{color:var(--mute);font-size:.9rem}.pinbar code{background:var(--paper);padding:4px 10px;border-radius:8px}
.pinbar input{width:260px}
.cg{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,72px)}
.cd{display:grid;gap:22px;align-content:start}
.cd span{display:block;color:var(--mute);font-size:.85rem}
.cd a:not(.btn){text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}
.cd a:not(.btn):hover{color:var(--sigd);border-color:var(--sig)}
@media(max-width:860px){.cg{grid-template-columns:1fr}.pinbar input{width:100%}}

/* keep the map's internal layers (Leaflet uses z-index up to 1000) below the header */
.fmap,.cmap{isolation:isolate;z-index:0}
header{z-index:1100}
.bar{z-index:1200}

/* ---- product photos (rule head was lost in the truncation; rebuilt) ---- */
.card .pimg {
    display: block;
    aspect-ratio: 4 / 3;
    margin: -24px -24px 0;              /* bleed to the card edges (.card padding is 24px) */
    overflow: hidden;
    background: #fff;
    border-radius: 17px 17px 0 0;
    border-bottom: 1px solid var(--line);
}
.card .pimg img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        transform: none;
        transition: transform .35s var(--ease);
    }
    .card:hover .pimg img { transform: scale(1.025); }
    .pdg.product-photo-stage {
        overflow: hidden;
        background: #fff;
    }
    .pdg.product-photo-stage .pd-photo {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        min-height: 340px;
        padding: 8px;
    }
    .pdg.product-photo-stage .pd-photo img {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 540px;
        object-fit: contain;
        object-position: center;
        transform: none;
    }
    @media (prefers-reduced-motion: reduce) {
        .card .pimg img { transition: none; }
    }

    /* Keep the video hidden until playback starts; show the dark cover background meanwhile. */
    .cover { background: #101a37; }
    .cover .cv { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
        z-index:0; opacity:0; pointer-events:none; transition:opacity .65s ease; }
        .cover .cv.ready { opacity:1; }
        .cover .wrap { position:relative; z-index:2; }
        @media (prefers-reduced-motion:reduce) { .cover .cv { transition:none; } }

        /* Partner logo ticker: scoped, equal-height marks, no distortions. */
        .partners-section {
            padding-top: 28px;
            text-align: center;
        }
        .partners-heading {
            margin: 0 0 18px;
            color: var(--ink);
            font: 700 clamp(1.35rem, 2.5vw, 2rem)/1.2 "Archivo", sans-serif;
            letter-spacing: -.02em;
        }
        [dir="rtl"] .partners-heading { direction: rtl; }
        .partners-heading { color: var(--sig); }
        .partner-ticker {
            position: relative;
            direction: ltr;
            padding: 12px 0;
            background: #0c1a3a;
            overflow: hidden;
        }
        .partner-ticker::before {
            content: "";
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 0;
            width: 100%;
            height: 100px;
            border-radius: 0;
            background: #fff;
            transform: translateY(-50%);
            pointer-events: none;
        }
        .partner-ticker .partner-track {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 0;
            width: max-content;
            padding: 0;
            animation: partner-slide 48s linear infinite;
            will-change: transform;
        }
        .partner-ticker .partner-set {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 20px;
            padding-right: 20px;
            animation: none; /* override the legacy .tick div animation */
        }
        .partner-ticker .partner-logo {
            box-sizing: border-box;
            display: flex;
            width: 180px;
            height: 94px;
            flex: 0 0 180px;
            align-items: center;
            justify-content: center;
            padding: 10px 14px;
            border-radius: 0;
            background: transparent;
            border: 0;
        }
        .partner-ticker .partner-logo img {
            display: block;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .partner-ticker:hover .partner-track,
.partner-ticker:focus-within .partner-track {animation-play-state: paused}
@keyframes partner-slide { to {transform: translateX(-50%)} }
@media (max-width:600px) {
    .partner-ticker .partner-set {gap: 12px; padding-right:12px}
    .partner-ticker .partner-logo {width:144px; height:80px; flex-basis:144px; padding:8px}
}
@media (prefers-reduced-motion: reduce) {
    .partner-ticker {overflow-x:auto}
    .partner-ticker .partner-track {animation:none; will-change:auto}
    .partner-ticker .partner-set[aria-hidden=true] {display:none}
}

/* product page: photo stage is a rounded rectangle, not the old round glyph disc */
.pdg.product-photo-stage { border-radius: 22px; padding: 0; aspect-ratio: auto; min-height: 340px; box-shadow: 0 30px 70px #0c1a3a1c; }

/* ---- cover: glass blur over the video + big centred title ---- */
.cover::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;   /* above photo/video, below .wrap (z 2) */
    -webkit-backdrop-filter: blur(3px) saturate(1.15); backdrop-filter: blur(3px) saturate(1.15);
    background: radial-gradient(ellipse at center, #0c1a3a33 0%, #0c1a3a73 100%);
}
/* the title only touches an element that opts in with class="ct": nothing else on the cover is restyled by it */
.cover .ct {
    display: block; margin: 0 auto; max-width: 16ch; text-wrap: balance; text-align: center; color: #fff;
    font: 900 clamp(2.4rem, 7vw, 5.6rem)/1.08 "Archivo", sans-serif; font-style: normal; font-stretch: 112%; letter-spacing: -.02em;
    text-shadow: 0 4px 34px #0c1a3a99;
}
.cover .ct em { font-style: normal; color: var(--sig); }      /* brand accent on the key words */
/* any headline text on the cover: upright, light, with the brand accent on emphasis */
.cover .wrap :is(h1, h2, h3, .h1), .cover .wrap :is(h1, h2, h3, .h1) * { font-style: normal; color: #fff; }
.cover .wrap :is(h1, h2, h3, .h1) :is(em, b, strong, mark, .acc) { color: var(--sig); font-style: normal; background: none; }

/* ---- cover headline: lines stack one above the other, nothing sits on top of anything else ---- */
.cover .wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 18px); }
.cover .wrap > * { position: relative !important; inset: auto !important; transform: none !important; grid-area: auto !important; }
.cover .wrap :is(h1, h2, .ct, .h1) {
    display: flex !important; flex-direction: column; align-items: center; gap: .08em;
    width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; margin: 0 auto;
}
.cover .wrap :is(h1, h2, .ct, .h1) > * {
    display: block !important; width: auto !important; height: auto !important; overflow: visible !important;
    white-space: normal; text-align: center; margin: 0 !important;
}
.cover .wrap :is(h1, h2, .ct, .h1) * { position: static !important; inset: auto !important; transform: none !important; animation: none !important; opacity: 1 !important; }
.cover .wrap p { margin-top: clamp(10px, 2vw, 24px); text-align: center; }   /* was 70px, which pushed it away from the title */

/* MAPCO livery headline: a clear white lead-in and a bold orange product line. */
.cover .wrap .cover-message {
    display: grid;
    justify-items: center;
    gap: clamp(10px, 1.6vw, 18px);
    width: min(100%, 1100px);
    text-align: center;
}
.cover .wrap .cover-message > p { margin: 0; }
.cover .wrap .cover-message h1 {
    display: grid !important;
    justify-items: center;
    gap: .04em;
    max-width: 100%;
    font: 600 clamp(1.35rem, 3.1vw, 2.6rem)/1.12 "Archivo", sans-serif;
    letter-spacing: -.025em;
    text-shadow: 0 3px 22px #0c1a3acc;
    animation: cover-title-in .8s cubic-bezier(.2,.7,.2,1) .12s both;
}
.cover .wrap .cover-title-top {
    display: block;
    color: #fff;
    font-size: .58em;
    font-weight: 400;
    letter-spacing: .02em;
}
.cover .wrap .cover-title-main {
    display: block;
    color: #ff542e;
    font-size: clamp(2.6rem, 8.2vw, 7rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
    animation: cover-title-in .95s cubic-bezier(.2,.7,.2,1) .28s both;
}
.cover .wrap .cover-title-period { color: #fff; }
.cover .wrap .cover-subtitle {
    max-width: 58ch;
    color: #f2f5fb;
    font-size: clamp(.95rem, 1.55vw, 1.25rem);
    line-height: 1.5;
    text-shadow: 0 2px 12px #0c1a3acc;
    animation: cover-subtitle-in .75s ease .55s both;
}
@keyframes cover-title-in {
    from { opacity: 0; transform: translateY(22px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes cover-subtitle-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .cover .wrap .cover-message h1,
    .cover .wrap .cover-title-main,
    .cover .wrap .cover-subtitle { animation: none; }
}
@media (max-width: 600px) {
    .cover .wrap .cover-title-main { font-size: clamp(2.35rem, 11vw, 4.2rem); }
    .cover .wrap .cover-message { gap: 12px; }
}
@media (min-width: 601px) {
    [dir="rtl"] .cover .wrap .cover-title-main {
        font-size: clamp(2.4rem, 6.2vw, 5.3rem);
        line-height: 1.28;
        letter-spacing: 0;
        padding-block: .08em;
    }
}
@media (max-width: 600px) {
    [dir="rtl"] .cover .wrap .cover-title-main {
        font-size: clamp(2rem, 9vw, 3.5rem);
        line-height: 1.3;
        letter-spacing: 0;
        padding-block: .08em;
    }
}

/* Keep contact form rows compact instead of stretching to fill the section. */
.cg form,
#contact form {
    align-content: start;
    gap: 14px;
}
.cg form input:not(.hp),
.cg form select,
#contact form input:not(.hp),
#contact form select {
    box-sizing: border-box;
    height: 48px;
    min-height: 48px;
    padding: 10px 14px;
}
.cg form textarea,
#contact form textarea {
    box-sizing: border-box;
    height: 132px;
    min-height: 132px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}
.cg form > .btn,
#contact form > .btn {
    justify-self: start;
    width: auto;
    height: 48px;
    min-height: 48px;
    padding: 12px 26px;
    white-space: nowrap;
}

/* Place the homepage contact form in the open space beside the contact details. */
#contact form {
    position: relative;
    top: 300px;
    margin-top: 0;
    gap: 16px;
}
#contact form input:not(.hp),
#contact form select {
    height: 52px;
    min-height: 52px;
}
#contact form textarea {
    height: 148px;
    min-height: 148px;
}
#contact form > .btn {
    height: 52px;
    min-height: 52px;
}