/* ===================================================================
   MCE GULF CONTRACTING — Design System
   Identity: the brand's own dot-grid mark, carried through as the
   site's signature motif (hero texture, section markers, card hover,
   footer texture) rather than generic decoration.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    /* Color */
    --navy:        #0A1F3D;
    --navy-2:      #123564;
    --blue:        #1B5FAA;
    --blue-bright: #2E86E8;
    --sky:         #EEF4FC;
    --paper:       #FFFFFF;
    --ink:         #15233B;
    --slate:       #5C6B80;
    --slate-light: #8C99AC;
    --line:        #E1E8F0;
    --amber:       #C97B1F;
    --amber-light: #FBEFDD;
    --green-ok:    #1E8E5A;
    --red-err:     #C73838;

    /* Type */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Layout */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(10,31,61,0.06);
    --shadow-md: 0 8px 28px rgba(10,31,61,0.10);
    --shadow-lg: 0 20px 60px rgba(10,31,61,0.18);
    --ease: cubic-bezier(.22,.61,.36,1);
    --header-h: 84px;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); line-height: 1.18; letter-spacing: -0.01em; }

/* ── DOT-GRID SIGNATURE MOTIF ────────────────────────────────
   The literal mark from the company logo, reused as the site's
   recurring texture — hero backdrops, footer, card-hover accents. */
.dot-texture {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.55) 1.4px, transparent 1.6px);
    background-size: 17px 17px;
    opacity: 0.10;
    pointer-events: none;
}
.dot-texture.dark {
    background-image: radial-gradient(circle, rgba(10,31,61,0.55) 1.4px, transparent 1.6px);
}
.dot-mark {
    display: inline-grid;
    grid-template-columns: repeat(3, 5px);
    grid-template-rows: repeat(2, 5px);
    gap: 3px;
    margin-right: 10px;
    flex-shrink: 0;
}
.dot-mark span { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.dot-mark span:nth-child(6) { background: var(--amber); } /* one accent dot, like a status light */

/* ── EYEBROW / SECTION HEADER ────────────────────────────── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blue);
}
.eyebrow.on-dark { color: #BFD7F5; }
.eyebrow.on-dark .dot-mark span { background: #BFD7F5; }
.eyebrow.on-dark .dot-mark span:nth-child(6) { background: var(--amber); }

.section-header { max-width: 640px; margin-bottom: 52px; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; margin-top: 14px; }
.section-desc { color: var(--slate); font-size: 16px; margin-top: 14px; line-height: 1.8; }

.section { padding: 96px 0; }
.section.tight { padding: 64px 0; }
.section.bg-sky { background: var(--sky); }
.section.bg-navy { background: var(--navy); color: rgba(255,255,255,0.8); }
.section.bg-navy h2, .section.bg-navy h3 { color: var(--paper); }

/* ── TOP UTILITY BAR ─────────────────────────────────────── */
.top-bar { background: var(--navy); padding: 9px 0; font-size: 13px; }
.top-bar .inner { display: flex; justify-content: flex-end; gap: 26px; align-items: center; flex-wrap: wrap; }
.top-bar a { color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 7px; transition: color .2s; }
.top-bar a:hover { color: #fff; }
.top-bar i { font-size: 11px; }

/* ── HEADER / NAV ────────────────────────────────────────── */
.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 900;
    transition: box-shadow .25s;
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(10,31,61,0.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; gap: 24px; }
.logo-wrap { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-wrap img { height: 54px; width: auto; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; line-height: 1.25; }
.logo-text .co-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--navy); }
.logo-text .co-tag { font-family: var(--font-mono); font-size: 10px; color: var(--slate); letter-spacing: 0.04em; }

.main-nav ul { display: flex; gap: 2px; align-items: center; }
.main-nav a {
    display: block; padding: 10px 16px; font-size: 14.5px; font-weight: 500;
    color: var(--ink); border-radius: var(--radius-sm); transition: all .2s;
    white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active { color: var(--blue); background: var(--sky); }
.nav-cta {
    background: var(--blue); color: #fff !important; padding: 10px 20px;
    border-radius: var(--radius-sm); font-weight: 600 !important;
}
.nav-cta:hover { background: var(--navy-2); color: #fff !important; }
.hamburger { display: none; background: none; border: none; font-size: 22px; color: var(--navy); padding: 6px; }

@media (max-width: 860px) {
    .hamburger { display: block; }
    .main-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--paper); box-shadow: 0 14px 32px rgba(10,31,61,0.12);
        padding: 14px 24px 22px; border-top: 1px solid var(--line);
    }
    .main-nav.open { display: block; }
    .main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .main-nav a { padding: 12px 14px; }
    .nav-cta { text-align: center; margin-top: 8px; }
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px;
    padding: 13px 26px; border-radius: var(--radius-sm); transition: all .22s var(--ease);
    border: 1.5px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(27,95,170,0.28); }
.btn-primary:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27,95,170,0.34); }
.btn-outline { border-color: rgba(255,255,255,0.45); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-amber { background: var(--amber); color: #fff; box-shadow: 0 6px 18px rgba(201,123,31,0.3); }
.btn-amber:hover { background: #A8651A; transform: translateY(-2px); }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ── HERO SLIDER (home) ──────────────────────────────────────
   Slides are stacked with CSS grid rather than absolute positioning, so the
   hero auto-sizes to its tallest slide and needs no hard-coded height. */
.hero {
    position: relative; overflow: hidden;
    background: linear-gradient(125deg, var(--navy) 0%, var(--navy-2) 55%, var(--blue) 130%);
    color: #fff; padding: 84px 0 56px;
}

/* Background motion: a drifting dot field + a slowly floating glow */
@keyframes dotDrift  { to { background-position: 34px 34px; } }
@keyframes glowFloat {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(-70px, 60px) scale(1.18); }
}
.hero .dot-texture,
.page-banner .dot-texture { animation: dotDrift 16s linear infinite; }
.hero-glow {
    position: absolute; width: 720px; height: 720px; border-radius: 50%;
    background: radial-gradient(circle, rgba(46,134,232,0.30) 0%, transparent 65%);
    top: -220px; right: -140px; pointer-events: none;
    animation: glowFloat 18s ease-in-out infinite alternate;
}

/* With photos now behind the slides, keep the dot texture and glow subtle
   so they accent rather than compete with the imagery. */
.hero > .dot-texture { opacity: 0.05; z-index: 1; }
.hero > .hero-glow { opacity: 0.5; z-index: 1; }

.hero-slides { display: grid; position: relative; z-index: 1; }
.hero-slide {
    grid-area: 1 / 1;                       /* all slides share one cell */
    opacity: 0; visibility: hidden;
    transition: opacity .8s var(--ease), visibility .8s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

/* ── SLIDE BACKGROUND PHOTOS ─────────────────────────────────
   Each slide carries its own industrial photo, layered BEHIND a dark
   gradient so the white headline and body copy stay fully readable.
   The gradient is stronger on the left (where the text sits) and lighter
   on the right (where the photo shows through). A slow zoom (kenburns)
   keeps the hero feeling alive between slide transitions. */
.hero-photo {
    position: absolute; z-index: 0; overflow: hidden;
    grid-area: 1 / 1;
    /* Break out of the centered .container (width) AND past the hero's own
       top/bottom padding + the slider-nav below, so the photo fills the
       ENTIRE blue hero area with no strips. Top = -hero padding-top (84px).
       Bottom = -(padding-bottom 56 + nav margin 44 + nav height ~6) = -106px. */
    top: -84px; bottom: -106px;
    left: 50%; right: auto;
    width: 100vw;
    transform: translateX(-50%);
}
.hero-photo::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--photo);
    background-size: cover; background-position: center right;
    transform: scale(1.05);
    transition: transform 8s ease-out;
}
.hero-slide.is-active .hero-photo::before { transform: scale(1.14); }
/* Dark gradient overlay — keeps text legible over any photo */
.hero-photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(90deg,
            rgba(10,31,61,0.97) 0%,
            rgba(10,31,61,0.90) 32%,
            rgba(10,31,61,0.68) 60%,
            rgba(10,31,61,0.55) 100%),
        linear-gradient(0deg, rgba(10,31,61,0.55) 0%, rgba(10,31,61,0.15) 45%);
}
@media (prefers-reduced-motion: reduce) {
    .hero-photo::before, .hero-slide.is-active .hero-photo::before { transform: none; }
}
@media (max-width: 560px) {
    /* On phones the text spans full width, so darken the whole photo evenly */
    .hero-photo::after {
        background: linear-gradient(0deg, rgba(10,31,61,0.94) 0%, rgba(10,31,61,0.82) 100%);
    }
}

.hero-grid { display: grid; grid-template-columns: 1.25fr 0.95fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(32px, 4.6vw, 50px); font-weight: 700; margin: 18px 0 20px; }
.hero h1 em { color: #9FC6F2; font-style: normal; font-weight: 600; }
.hero p.lead { font-size: 17px; color: rgba(255,255,255,0.78); max-width: 490px; margin-bottom: 32px; line-height: 1.8; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* Staggered entrance as each slide takes over */
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-slide.is-active .hero-copy > *,
.hero-slide.is-active .hero-panel { animation: heroIn .75s var(--ease) both; }
.hero-slide.is-active .hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-slide.is-active .hero-copy > *:nth-child(2) { animation-delay: .14s; }
.hero-slide.is-active .hero-copy > *:nth-child(3) { animation-delay: .23s; }
.hero-slide.is-active .hero-copy > *:nth-child(4) { animation-delay: .32s; }
.hero-slide.is-active .hero-panel { animation-delay: .26s; }

/* Right-hand panel — different content on every slide */
.hero-panel { border-left: 1px solid rgba(255,255,255,0.18); padding-left: 36px; }
.hero-stats { display: flex; flex-direction: column; }
.hero-stat { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.hero-stat:last-child { border-bottom: none; }
.hero-stat .num { font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: #fff; }
.hero-stat .label { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 2px; }

.hero-list li {
    display: flex; align-items: center; gap: 10px; padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 14px; color: rgba(255,255,255,0.88);
}
.hero-list li:last-child { border-bottom: none; }
.hero-list li > i { color: #6EE7A8; font-size: 12px; flex-shrink: 0; }
.hero-list .ss-name { flex: 1; }
.hero-list .pill {
    font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 3px; white-space: nowrap;
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85);
}
.hero-list .pill.warn { background: rgba(232,160,58,0.22); color: #F3C98B; }

.hero-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hero-logo-chip {
    background: #fff; border-radius: 6px; padding: 9px 7px;
    display: flex; align-items: center; justify-content: center; min-height: 46px;
}
.hero-logo-chip img { width: 100%; height: auto; }

.hero-awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hero-award-tile {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px; padding: 18px 12px; text-align: center;
}
.hero-award-tile i { display: block; font-size: 20px; color: var(--amber); margin-bottom: 8px; }
.hero-award-tile span {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
    text-transform: uppercase; color: rgba(255,255,255,0.72);
}

/* Slider nav — the active bar fills to show autoplay progress */
.slider-nav { display: flex; gap: 10px; justify-content: center; margin-top: 44px; position: relative; z-index: 2; }
.slider-dot {
    position: relative; overflow: hidden; width: 38px; height: 4px; padding: 0;
    border: none; border-radius: 2px; background: rgba(255,255,255,0.24);
    cursor: pointer; transition: width .35s var(--ease), background .3s;
}
.slider-dot:hover { background: rgba(255,255,255,0.45); }
.slider-dot.is-active { width: 58px; background: rgba(255,255,255,0.28); }
@keyframes dotProgress { from { width: 0; } to { width: 100%; } }
.slider-dot.is-active::after {
    content: ''; position: absolute; inset: 0; width: 0;
    background: #fff; border-radius: 2px;
    animation: dotProgress var(--slide-ms, 6500ms) linear forwards;
}
.hero.is-paused .slider-dot.is-active::after { animation-play-state: paused; }

@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .hero-panel { border-left: none; border-top: 1px solid rgba(255,255,255,0.18); padding-left: 0; padding-top: 24px; }
    .hero-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
    .hero { padding: 56px 0 40px; }
    /* Keep the photo covering the hero's smaller mobile padding + nav */
    .hero-photo { top: -56px; bottom: -78px; }
    /* Every slide shares one grid cell, so the tallest one sets the hero's
       height. On a phone the panel pushed that past a full screen — drop it.
       Nothing is lost: the logos and service list both appear in the page
       sections below. */
    .hero-panel { display: none; }
    .hero p.lead { font-size: 15.5px; margin-bottom: 26px; }
    .slider-nav { margin-top: 32px; }
    .hero-btns .btn { width: 100%; justify-content: center; }
}

/* Motion here is decoration, not information — drop it if the visitor opts out.
   The slider still works; main.js also disables autoplay in that case. */
@media (prefers-reduced-motion: reduce) {
    .hero .dot-texture, .page-banner .dot-texture, .hero-glow { animation: none; }
    .hero-slide.is-active .hero-copy > *,
    .hero-slide.is-active .hero-panel { animation: none; }
    .slider-dot.is-active::after { animation: none; width: 100%; }
}

/* ── PAGE HERO (sub-pages — compact banner w/ breadcrumb) ── */
.page-banner {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff; padding: 64px 0 56px;
}
.page-banner .eyebrow { margin-bottom: 12px; }
.page-banner h1 { color: #fff; font-size: clamp(28px, 4vw, 40px); }
.page-banner p { color: rgba(255,255,255,0.72); margin-top: 12px; max-width: 560px; font-size: 15.5px; }
.breadcrumb-row { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; color: rgba(255,255,255,0.6); font-family: var(--font-mono); }
.breadcrumb-row a { color: rgba(255,255,255,0.85); }
.breadcrumb-row a:hover { text-decoration: underline; }

/* ── STATS STRIP ─────────────────────────────────────────── */
.stats-strip { background: var(--sky); border-bottom: 1px solid var(--line); padding: 40px 0; }
.stats-strip .grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stat-block .num { font-family: var(--font-mono); font-size: 32px; font-weight: 600; color: var(--navy); }
.stat-block .label { font-size: 13px; color: var(--slate); margin-top: 4px; }

/* ── CARDS: generic ──────────────────────────────────────── */
.card {
    position: relative; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-md); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
    overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(27,95,170,0.25); }
.card::after {
    content: ''; position: absolute; top: 10px; right: 10px; width: 30px; height: 22px;
    background-image: radial-gradient(circle, var(--blue) 1.3px, transparent 1.5px);
    background-size: 8px 8px; opacity: 0; transition: opacity .3s;
}
.card:hover::after { opacity: 0.45; }

/* Services overview (home) */
.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 22px; }

/* Variant for an odd card count (e.g. the 5 hydro-milling scopes): a plain
   4-column grid would strand the 5th card alone in a half-empty row. Flex with
   centred wrapping lays them out 3 + 2 so the block reads as intentional. */
.grid-services.flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.grid-services.flow > .card { flex: 1 1 300px; max-width: 360px; }

.service-card { padding: 30px 26px; }

/* Photo strip at the top of a service card. The card has 30px padding, so the
   image uses negative margins to sit flush against the card's top and sides,
   spanning full width above the icon. overflow:hidden on .card clips it to the
   rounded corners. */
.service-photo {
    margin: -30px -26px 22px;
    height: 180px; overflow: hidden;
    background: var(--sky);
}
.service-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s var(--ease);
}
.card:hover .service-photo img { transform: scale(1.06); }
.is-parent .service-photo { margin-bottom: 22px; }
@media (max-width: 560px) {
    .service-photo { height: 160px; }
}

.service-icon { width: 50px; height: 50px; background: var(--sky); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.service-icon i { font-size: 21px; color: var(--blue); }
.service-card h3 { font-size: 17px; margin-bottom: 8px; }
.service-card p { color: var(--slate); font-size: 14.5px; line-height: 1.75; }
.service-card .more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--blue); font-family: var(--font-mono); }

/* Why choose us */
.grid-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 28px; }
.why-item { display: flex; gap: 16px; align-items: flex-start; }
.why-icon { width: 44px; height: 44px; flex-shrink: 0; background: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.why-icon i { color: #fff; font-size: 17px; }
.why-item h4 { font-size: 15.5px; margin-bottom: 6px; }
.why-item p { font-size: 14px; color: var(--slate); line-height: 1.7; }

/* CEO message */
.ceo-block { display: grid; grid-template-columns: 0.85fr 2fr; gap: 56px; align-items: center; }
.ceo-photo {
    width: 200px; height: 200px; border-radius: 50%; margin: 0 auto 18px;
    background: linear-gradient(135deg, var(--blue), var(--navy));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 56px; font-weight: 700; color: #fff;
    box-shadow: var(--shadow-md);
}
.ceo-photo-col { text-align: center; }
.ceo-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy); }
.ceo-role { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; color: var(--blue); background: var(--sky); padding: 4px 12px; border-radius: 20px; margin-top: 6px; letter-spacing: 0.04em; }
.ceo-quote-mark { font-family: Georgia, serif; font-size: 72px; line-height: 0.5; color: var(--blue); opacity: 0.2; margin-bottom: 10px; }
.ceo-text p { color: var(--slate); font-size: 15.5px; line-height: 1.85; margin-bottom: 14px; }
.ceo-sig { font-family: var(--font-mono); font-size: 13px; color: var(--navy); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
@media (max-width: 760px) { .ceo-block { grid-template-columns: 1fr; gap: 30px; } }

/* ── AWARDS PAGE ─────────────────────────────────────────── */
.year-block { margin-bottom: 56px; }
.year-block:last-child { margin-bottom: 0; }
.year-row { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.year-badge {
    font-family: var(--font-mono); background: var(--navy); color: #fff; font-size: 18px; font-weight: 600;
    padding: 8px 20px; border-radius: var(--radius-sm); white-space: nowrap;
}
.year-rule { flex: 1; height: 1px; background: var(--line); }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 20px; }
.cert-card { cursor: zoom-in; }
/* Certificates are landscape scans of varying ratio — contain them on a light
   mat so none get cropped, unlike the old 3:4 cover placeholders. */
.cert-card img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
    background: var(--gray-50); padding: 10px;
}
.cert-placeholder {
    width: 100%; aspect-ratio: 4/3; background: linear-gradient(150deg, var(--sky), #DCE9F8);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.cert-placeholder i { font-size: 36px; color: var(--blue); opacity: 0.35; }
.cert-placeholder span { font-size: 11.5px; color: var(--slate); font-family: var(--font-mono); }
.cert-label { padding: 14px 14px; font-size: 13.5px; font-weight: 600; text-align: center; border-top: 1px solid var(--line); color: var(--navy); }
.cert-label .cert-sub {
    display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px;
    color: var(--slate); margin-top: 4px; line-height: 1.45;
}
.year-note { font-family: var(--font-mono); font-size: 12px; color: var(--slate-light); margin-top: 16px; }

/* ── SUB-SERVICE LIST (grouped under a parent service) ───── */
.service-card.is-parent { border-color: rgba(27,95,170,0.35); background: linear-gradient(180deg, #fff 0%, var(--sky) 100%); }
.subservice-list { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.subservice-list li {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 0;
    font-size: 13.5px; color: var(--ink); font-weight: 500;
}
.subservice-list li > i { font-size: 12px; color: var(--blue); width: 16px; flex-shrink: 0; }
.subservice-list .ss-name { margin-right: 2px; }
.sub-tag {
    display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--blue); background: rgba(27,95,170,0.10);
    padding: 3px 9px; border-radius: 4px; margin-bottom: 4px;
}

/* ── AUTOMATION + NO-MAN-ENTRY BADGES ────────────────────────
   Two distinct claims, so two distinct badges: automation applies to every
   hydro-milling scope, while no-man-entry is specific to reactor and
   vessel/tank cleaning. Keeping them separate avoids over-claiming. */
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.auto-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: #14724A; background: #E6F4ED; border: 1px solid #BFE3D0;
    padding: 4px 10px; border-radius: 4px;
}
.auto-badge i { font-size: 10px; }

.noentry-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: #8A4B00; background: var(--amber-light); border: 1px solid #EFD2A6;
    padding: 4px 10px; border-radius: 4px;
}
.noentry-badge i { font-size: 10px; }

/* Compact per-item tags inside the home page's hydro-milling sub-service list */
.ss-tag {
    font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}
.ss-tag.auto    { color: #14724A; background: #E6F4ED; border: 1px solid #BFE3D0; }
.ss-tag.noentry { color: #8A4B00; background: var(--amber-light); border: 1px solid #EFD2A6; }

.notice-strip {
    display: flex; align-items: center; gap: 18px;
    background: var(--navy); color: #fff;
    border-radius: var(--radius-md); padding: 22px 28px; margin-bottom: 36px;
    position: relative; overflow: hidden;
}
.notice-strip .ic {
    width: 46px; height: 46px; flex-shrink: 0; background: rgba(110,231,168,0.14);
    border: 1px solid rgba(110,231,168,0.3); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.notice-strip .ic i { color: #6EE7A8; font-size: 18px; }
.notice-strip .txt { position: relative; z-index: 1; }
.notice-strip strong {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: 15.5px; color: #fff; margin-bottom: 3px;
}
.notice-strip span { font-size: 14px; color: rgba(255,255,255,0.76); line-height: 1.65; }
@media (max-width: 560px) {
    .notice-strip { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
}

/* ── CLIENTS ─────────────────────────────────────────────── */
.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 18px; }
.client-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 140px; padding: 20px 16px; text-align: center; gap: 10px;
}

/* Logos are pre-normalized to an identical 3:1 canvas, so setting one width
   here renders every mark at a consistent optical size. Hidden until the
   file loads (js/main.js) — if a logo file is ever missing, the styled
   company name below shows instead and the card still looks finished. */
.client-card img.client-logo { display: none; width: 100%; max-width: 148px; height: auto; }

.client-card .client-name {
    font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy);
    line-height: 1.28; letter-spacing: -0.01em;
}
.client-card .client-code {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
    color: var(--slate); background: var(--sky); border: 1px solid var(--line);
    padding: 3px 10px; border-radius: 4px; white-space: nowrap;
}

.industries-list { display: flex; flex-wrap: wrap; gap: 12px; }
.industry-chip {
    font-family: var(--font-mono); font-size: 12.5px; color: var(--navy); background: var(--sky);
    border: 1px solid var(--line); padding: 8px 16px; border-radius: 20px;
}

.project-card { display: grid; grid-template-columns: 1fr 1.4fr; }
.project-card img { height: 100%; object-fit: cover; min-height: 220px; }
.project-info { padding: 28px; }
.project-info .tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--amber); text-transform: uppercase; letter-spacing: 0.05em; }
.project-info h3 { font-size: 19px; margin: 8px 0 10px; }
.project-info p { color: var(--slate); font-size: 14.5px; }
@media (max-width: 640px) { .project-card { grid-template-columns: 1fr; } .project-card img { min-height: 180px; } }

/* ── TESTIMONIALS ────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; }
.testi-card { padding: 28px 26px; }
.testi-stars { color: var(--amber); font-size: 13px; margin-bottom: 14px; letter-spacing: 2px; }
.testi-card p { font-size: 14.5px; color: var(--ink); line-height: 1.8; margin-bottom: 18px; font-style: italic; }
.testi-person { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--sky); color: var(--blue); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px; }
.testi-name { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.testi-role { font-size: 12px; color: var(--slate); }
.testi-note { font-size: 12.5px; color: var(--slate-light); font-family: var(--font-mono); margin-top: 18px; }

/* ── CTA BANNER ──────────────────────────────────────────── */
.cta-banner {
    position: relative; overflow: hidden; background: linear-gradient(120deg, var(--blue), var(--navy-2));
    border-radius: var(--radius-lg); padding: 52px 48px; display: flex; align-items: center; justify-content: space-between;
    gap: 28px; flex-wrap: wrap; color: #fff;
}
.cta-banner h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.cta-banner p { color: rgba(255,255,255,0.78); font-size: 14.5px; }

/* ── CONTACT PAGE ────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.contact-info-card { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 36px 32px; position: relative; overflow: hidden; }
.contact-info-card h3 { color: #fff; font-size: 19px; margin-bottom: 22px; }
.contact-line { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; font-size: 14px; color: rgba(255,255,255,0.82); }
.contact-line .ic { width: 36px; height: 36px; flex-shrink: 0; background: rgba(255,255,255,0.1); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.contact-line a { color: rgba(255,255,255,0.9); }
.contact-line a:hover { color: #fff; text-decoration: underline; }
.contact-person-block { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 18px; margin-top: 22px; }
.contact-person-block + .contact-person-block { margin-top: 14px; padding-top: 14px; }
.cp-name { font-weight: 600; font-size: 14px; color: #fff; }
.cp-role { font-family: var(--font-mono); font-size: 11.5px; color: #9FC6F2; margin-bottom: 6px; }
.social-row { display: flex; gap: 10px; margin-top: 26px; }
.social-row a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.social-row a:hover { background: var(--blue-bright); }

.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 7px; }
.field input, .field textarea, .field select {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 14.5px; color: var(--ink); transition: border-color .2s;
    background: var(--paper);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); }
.field textarea { resize: vertical; min-height: 120px; }
.form-msg { display: none; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; }
.form-msg.show { display: block; }
.form-msg.ok { background: #E6F4ED; color: var(--green-ok); }
.form-msg.err { background: #FBEAEA; color: var(--red-err); }
.hp-field { position: absolute; left: -9999px; opacity: 0; }
@media (max-width: 640px) { .contact-layout { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

.map-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); margin-top: 28px; }
.map-wrap iframe { width: 100%; height: 340px; border: 0; display: block; }

/* ── FOOTER ──────────────────────────────────────────────── */
footer { background: var(--navy); color: rgba(255,255,255,0.68); padding-top: 64px; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 48px; padding-bottom: 48px; position: relative; z-index: 1; }
.footer-logo-chip { background: #fff; display: inline-flex; padding: 12px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; }
.footer-logo-chip img { height: 46px; }
.footer-about { font-size: 13.5px; line-height: 1.85; color: rgba(255,255,255,0.6); max-width: 320px; }
.footer-col h4 { font-family: var(--font-display); font-size: 14.5px; color: #fff; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13.5px; color: rgba(255,255,255,0.62); display: flex; gap: 8px; align-items: center; transition: color .2s; }
.footer-col ul li a:hover { color: #fff; }
.footer-col ul li a i { font-size: 10px; color: var(--blue-bright); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12); padding: 18px 0; display: flex; justify-content: space-between;
    align-items: center; font-size: 12.5px; color: rgba(255,255,255,0.42); flex-wrap: wrap; gap: 8px; position: relative; z-index: 1;
}

/* ── LIGHTBOX ────────────────────────────────────────────── */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(10,15,25,0.92); z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.lightbox.show { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.6); }
.lb-close { position: absolute; top: 18px; right: 24px; width: 40px; height: 40px; background: rgba(255,255,255,0.15); border: none; border-radius: 50%; color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lb-close:hover { background: rgba(255,255,255,0.28); }

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 980px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .section { padding: 64px 0; }
    .stats-strip .grid4 { grid-template-columns: repeat(2,1fr); gap: 28px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .ceo-block { text-align: center; }
    .cta-banner { padding: 36px 26px; text-align: center; justify-content: center; }
    .project-card { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGES (Plant-Tech style: image left, content right)
   ══════════════════════════════════════════════════════════════ */
.svc-detail { padding: 72px 0; }
.svc-detail-grid {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 52px; align-items: start;
}
.svc-detail-media { position: relative; }
.svc-detail-media img {
    width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    display: block;
}
/* decorative dot-grid accent behind the image, echoing the brand mark */
.svc-detail-media::before {
    content: ''; position: absolute; left: -18px; top: -18px; width: 120px; height: 120px;
    background-image: radial-gradient(circle, rgba(27,95,170,0.25) 1.5px, transparent 1.6px);
    background-size: 14px 14px; z-index: -1; border-radius: 8px;
}
.svc-detail-eyebrow {
    font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--amber); margin-bottom: 12px;
}
.svc-detail h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; margin-bottom: 8px; }
.svc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
.svc-detail p { color: var(--slate); font-size: 15.5px; line-height: 1.85; margin-bottom: 16px; }
.svc-detail h2 {
    font-size: 20px; color: var(--navy); margin: 30px 0 14px;
    padding-bottom: 8px; border-bottom: 2px solid var(--sky);
}
.svc-points { list-style: none; margin: 4px 0 8px; }
.svc-points li {
    position: relative; padding-left: 30px; margin-bottom: 12px;
    font-size: 15px; color: var(--ink); line-height: 1.6;
}
.svc-points li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 1px; color: var(--green-ok); font-size: 13px;
}
.svc-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* "Other services" strip at the bottom of a detail page */
.svc-more { background: var(--sky); padding: 56px 0; border-top: 1px solid var(--line); }
.svc-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; margin-top: 28px; }
.svc-more-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 18px 18px; display: flex; align-items: center; gap: 12px;
    transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.svc-more-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(27,95,170,0.3); }
.svc-more-card i { color: var(--blue); font-size: 16px; width: 22px; flex-shrink: 0; }
.svc-more-card span { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.3; }

@media (max-width: 820px) {
    .svc-detail-grid { grid-template-columns: 1fr; gap: 32px; }
    .svc-detail-media { order: -1; }
}

/* Clickable service cards on the homepage: the whole card is an <a>. */
a.card-link { display: block; color: inherit; text-decoration: none; }
a.card-link .more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
    font-size: 13.5px; font-weight: 600; color: var(--blue); font-family: var(--font-mono); }
a.card-link:hover .more-link { gap: 10px; }
a.card-link:hover { text-decoration: none; }