/* ==========================================================================
   MEDISOL POINT LTD. — stylesheet
   Palette derived from the company logo (green mark, navy type, accent dots)
   ========================================================================== */

:root {
    --green:        #2fa84f;
    --green-dark:   #1e8a3d;
    --green-light:  #5cc776;
    --cyan:         #17b8d4;
    --purple:       #5a2d8c;
    --red:          #e63946;

    --navy:         #0c2233;
    --navy-2:       #143349;
    --navy-3:       #1d4460;

    --ink:          #14212e;
    --body:         #5b6b7a;
    --muted:        #8497a6;
    --line:         #e4eaef;
    --bg:           #ffffff;
    --bg-soft:      #f4f8fa;
    --bg-soft-2:    #eef4f7;

    --radius:       18px;
    --radius-sm:    12px;
    --radius-lg:    28px;

    /* Layered shadows read as real elevation rather than a single blur. */
    --shadow-sm:    0 1px 2px rgba(12, 34, 51, .04), 0 3px 10px rgba(12, 34, 51, .05);
    --shadow:       0 2px 6px rgba(12, 34, 51, .04), 0 14px 40px rgba(12, 34, 51, .09);
    --shadow-lg:    0 4px 12px rgba(12, 34, 51, .06), 0 30px 70px rgba(12, 34, 51, .14);
    --ring:         0 0 0 3px rgba(47, 168, 79, .35), 0 0 0 5px rgba(255, 255, 255, .9);

    --ease:         cubic-bezier(.22, 1, .36, 1);
    --header-h:     84px;

    --font-head:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Header is static now, so it never covers an anchor target. */
    scroll-padding-top: 20px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--body);
    background: var(--bg);
    overflow-x: hidden;
    overflow-x: clip;
}

img { max-width: 100%; display: block; }
a   { color: var(--green); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--green-dark); }
ul  { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 .6em;
    font-weight: 700;
    letter-spacing: -.02em;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1.1rem; }

::selection { background: var(--green); color: #fff; }

/* ---------- Focus & skip link ---------- */
:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: 6px;
}
.section-dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.contact-panel :focus-visible {
    box-shadow: 0 0 0 3px rgba(92, 199, 118, .6), 0 0 0 5px rgba(12, 34, 51, .9);
}
.skip-link {
    position: fixed; top: 10px; left: 50%; z-index: 10000;
    transform: translate(-50%, -160%);
    padding: 12px 24px; border-radius: 100px;
    background: var(--ink); color: #fff;
    font-family: var(--font-head); font-weight: 600; font-size: .9rem;
    box-shadow: var(--shadow-lg);
    transition: transform .3s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

.container {
    width: min(1200px, 100% - 40px);
    margin-inline: auto;
}

/* Visible to screen readers only. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.icon    { width: 22px; height: 22px; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 13px; height: 13px; }

/* ---------- Scroll progress ---------- */
.scroll-progress {
    position: fixed; inset: 0 auto auto 0;
    height: 3px; width: 0;
    background: linear-gradient(90deg, var(--green), var(--cyan));
    z-index: 999;
    transition: width .1s linear;
}

/* No preload overlay: content that is already painted should never be hidden
   behind a splash screen — it reads as the page loading a second time. */

/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--green);
    --btn-fg: #fff;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 30px;
    border: 0; border-radius: 100px;
    background: var(--btn-bg); color: var(--btn-fg);
    font-family: var(--font-head); font-weight: 600; font-size: .95rem;
    letter-spacing: .01em; cursor: pointer;
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
}
.btn::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .7s var(--ease);
}
.btn:hover { transform: translateY(-3px); color: var(--btn-fg); box-shadow: 0 14px 30px rgba(47,168,79,.32); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(-1px); }
.btn .icon { transition: transform .3s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }

.btn-sm      { padding: 10px 22px; font-size: .88rem; }
.btn-outline { --btn-bg: transparent; --btn-fg: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.btn-outline:hover { --btn-bg: #fff; --btn-fg: var(--navy); box-shadow: 0 14px 30px rgba(0,0,0,.25); }
.btn-dark    { --btn-bg: var(--navy); }
.btn-dark:hover { box-shadow: 0 14px 30px rgba(12,34,51,.3); }
.btn-ghost   { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; }

/* ---------- Topbar ---------- */
.topbar {
    background: var(--navy);
    color: rgba(255,255,255,.72);
    font-size: .82rem;
    position: relative; z-index: 60;
}
.topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; min-height: 42px; flex-wrap: wrap;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-link, .topbar-social {
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,.72);
}
.topbar-link:hover, .topbar-social:hover { color: var(--green-light); }
.topbar-link .icon { color: var(--green); }
.topbar-note { color: rgba(255,255,255,.45); }

/* ---------- Header ---------- */
/* Static header — scrolls away with the page (no longer sticky). */
.site-header {
    position: relative; z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; min-height: var(--header-h);
}
.brand-logo { height: 40px; width: auto; transition: transform .4s var(--ease); }
.brand:hover .brand-logo { transform: scale(1.04); }

.main-nav { display: flex; align-items: center; gap: 34px; }
.nav-list { display: flex; align-items: center; gap: 30px; }
.nav-link {
    position: relative;
    font-family: var(--font-head); font-weight: 600; font-size: .94rem;
    color: var(--ink); padding: 6px 0;
}
.nav-link::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--green), var(--cyan));
    transform: scaleX(0); transform-origin: right;
    transition: transform .4s var(--ease);
}
.nav-link:hover, .nav-link.is-active { color: var(--green); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-close { display: none; }

.nav-toggle {
    display: none; width: 46px; height: 46px;
    border: 0; border-radius: 12px; background: var(--bg-soft);
    cursor: pointer; padding: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--ink); transition: transform .35s var(--ease), opacity .25s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
    position: fixed; inset: 0; z-index: 98;
    background: rgba(12,34,51,.55);
    backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero {
    position: relative;
    min-height: min(88vh, 780px);
    display: grid;
    overflow: hidden;
    background: var(--navy);
}
/* Slides and the dot rail share one grid cell, so the hero is exactly as tall
   as its tallest slide (never collapsing) and every slide fills it. */
.hero-slides { grid-area: 1 / 1; display: grid; width: 100%; }
.hero > .container { grid-area: 1 / 1; align-self: end; z-index: 5; }
.hero-slide {
    grid-area: 1 / 1;
    position: relative;
    display: grid; align-content: center;
    opacity: 0; visibility: hidden;
    /* Cross-dissolve: opacity eases over 1.4s; visibility flips to hidden only
       after the fade finishes (0s delayed), so a slide never blinks out. */
    transition: opacity 1.4s cubic-bezier(.45, 0, .15, 1), visibility 0s linear 1.4s;
    will-change: opacity;
}
.hero-slide.is-active {
    opacity: 1; visibility: visible;
    transition: opacity 1.4s cubic-bezier(.45, 0, .15, 1), visibility 0s;
    z-index: 2;   /* the incoming slide fades in on top of the outgoing one */
}
.hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    /* One continuous, gentle zoom that runs on every slide the whole time.
       Because it never starts or stops when the active slide changes, there is
       no transform snap during the crossfade — that snap was the jarring part. */
    transform: scale(1.06);
    animation: kenBurns 20s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes kenBurns {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(-2%, -1.5%, 0); }
}
.hero-veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(8,24,38,.94) 0%, rgba(8,24,38,.78) 42%, rgba(8,24,38,.35) 100%),
        radial-gradient(900px 500px at 85% 15%, rgba(47,168,79,.28), transparent 65%);
}
.hero-grid-lines {
    position: absolute; inset: 0; opacity: .25;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 30% 50%, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 30% 50%, #000, transparent 78%);
}

.hero-inner { position: relative; z-index: 3; padding: 120px 0 140px; max-width: 720px; }
.hero-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 18px 8px 10px; border-radius: 100px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff; font-size: .82rem; font-weight: 600;
    font-family: var(--font-head); letter-spacing: .06em; text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.hero-kicker .dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 0 4px rgba(47,168,79,.25);
    animation: dotPulse 2s infinite;
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(47,168,79,.3); }
    50%      { box-shadow: 0 0 0 9px rgba(47,168,79,0); }
}
/* Only the first slide carries the <h1>; the rest use <p> with the same look. */
.hero-title {
    color: #fff; margin: 24px 0 18px; text-wrap: balance;
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.12;
    letter-spacing: -.025em;
}
.hero-title .accent {
    background: linear-gradient(100deg, var(--green-light), var(--cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-text { color: rgba(255,255,255,.78); font-size: 1.06rem; max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Slide content eases in and out with the slide (transition, not a one-way
   animation), so the outgoing text fades away smoothly instead of snapping. */
.hero-slide .hero-anim {
    opacity: 0; transform: translateY(30px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.hero-slide.is-active .hero-anim { opacity: 1; transform: translateY(0); }
/* Stagger only on entry; on exit everything fades together. */
.hero-slide.is-active .hero-anim:nth-child(1) { transition-delay: .25s; }
.hero-slide.is-active .hero-anim:nth-child(2) { transition-delay: .38s; }
.hero-slide.is-active .hero-anim:nth-child(3) { transition-delay: .51s; }
.hero-slide.is-active .hero-anim:nth-child(4) { transition-delay: .64s; }
@keyframes heroUp { to { opacity: 1; transform: translateY(0); } }

.hero-dots {
    position: relative; z-index: 4;
    margin-bottom: 42px;
    display: flex; gap: 12px;
}
.hero-dot {
    width: 34px; height: 4px; border-radius: 4px; border: 0; padding: 0;
    background: rgba(255,255,255,.28); cursor: pointer;
    position: relative; overflow: hidden;
    transition: width .4s var(--ease), background .3s;
}
.hero-dot.is-active { width: 60px; background: rgba(255,255,255,.35); }
.hero-dot.is-active::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--green), var(--cyan));
    transform-origin: left;
    animation: dotFill 7s linear forwards;
}
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-scroll {
    position: absolute; right: 34px; bottom: 40px; z-index: 4;
    color: rgba(255,255,255,.6); font-size: .74rem; letter-spacing: .18em;
    text-transform: uppercase; writing-mode: vertical-rl;
    display: flex; align-items: center; gap: 14px;
}
.hero-scroll::after {
    content: ''; width: 1px; height: 56px;
    background: linear-gradient(rgba(255,255,255,.5), transparent);
    animation: scrollLine 2s infinite;
}
@keyframes scrollLine { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- Page banner (inner pages) ---------- */
.page-banner {
    position: relative; overflow: hidden;
    padding: 130px 0 110px;
    background: var(--navy);
    text-align: center;
}
.page-banner-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .75; transform: scale(1.06);
    animation: bannerFloat 18s ease-in-out infinite alternate;
}
@keyframes bannerFloat { from { transform: scale(1.06) translateY(0); } to { transform: scale(1.14) translateY(-14px); } }
.page-banner::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(8,24,38,.72), rgba(8,24,38,.88)),
        radial-gradient(700px 300px at 50% 0%, rgba(47,168,79,.3), transparent 70%);
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; margin-bottom: 14px; animation: heroUp .8s var(--ease) both .1s; }
.breadcrumb {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
    color: rgba(255,255,255,.6); font-size: .9rem;
    animation: heroUp .8s var(--ease) both .25s;
}
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb a:hover { color: var(--green-light); }
.breadcrumb span { color: var(--green-light); }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 8vw, 110px) 0; position: relative; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--navy); color: rgba(255,255,255,.72); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }

.section-head { max-width: 660px; margin-bottom: 54px; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-head); font-weight: 700; font-size: .78rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--green);
    margin-bottom: 14px;
}
.eyebrow::before {
    content: ''; width: 26px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--green), var(--cyan));
}
.section-head.center .eyebrow::after {
    content: ''; width: 26px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--green));
}
.section-dark .eyebrow { color: var(--green-light); }
.section-title { margin-bottom: 14px; text-wrap: balance; }
.section-sub { font-size: 1.03rem; margin: 0; }

/* ---------- Quick info strip ---------- */
.info-strip {
    position: relative; z-index: 6;
    margin-top: -68px;
}
.info-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    background: #fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.info-card {
    display: flex; align-items: center; gap: 18px;
    padding: 34px 30px;
    position: relative;
    transition: background .35s var(--ease);
}
.info-card + .info-card { border-left: 1px solid var(--line); }
.info-card:hover { background: var(--bg-soft); }
.info-card-icon {
    width: 54px; height: 54px; border-radius: 16px; flex: none;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    box-shadow: 0 10px 22px rgba(47,168,79,.3);
    transition: transform .45s var(--ease);
}
.info-card:nth-child(2) .info-card-icon { background: linear-gradient(135deg, var(--cyan), #0b7f96); box-shadow: 0 10px 22px rgba(23,184,212,.3); }
.info-card:nth-child(3) .info-card-icon { background: linear-gradient(135deg, var(--purple), #3a1c5c); box-shadow: 0 10px 22px rgba(90,45,140,.3); }
.info-card:hover .info-card-icon { transform: rotate(-8deg) scale(1.06); }
.info-card h2 { margin: 0 0 3px; font-size: 1rem; font-weight: 700; }
.info-card p  { margin: 0; font-size: .9rem; line-height: 1.55; }
.info-card a  { color: var(--body); }
.info-card a:hover { color: var(--green); }

/* ---------- Service cards ---------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 26px;
}
.service-card {
    position: relative; overflow: hidden;
    color: var(--body);           /* the whole card may be a link */
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
    display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: transparent; }
/* The service artwork is a collage of the brands we carry for that vertical,
   so it is fitted rather than cropped. */
.service-media {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    background: linear-gradient(140deg, #f7fbfc 0%, #eaf2f6 100%);
    border-bottom: 1px solid var(--line);
}
.service-media-img {
    position: absolute; inset: 16px 18px 26px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    transition: transform 1.1s var(--ease);
}
.service-card:hover .service-media-img { transform: scale(1.06); }
.service-media::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 0%, rgba(47,168,79,.09), transparent 62%);
    opacity: 0; transition: opacity .5s;
}
.service-card:hover .service-media::after { opacity: 1; }
/* Lifted out of the media box (which clips) and hung over its edge from
   the body instead, so it is never cut off. */
.service-icon {
    position: relative; z-index: 2;
    width: 54px; height: 54px; border-radius: 16px;
    margin: -52px 0 16px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    box-shadow: 0 12px 26px rgba(47,168,79,.35);
    transition: transform .5s var(--ease);
}
.service-card:hover .service-icon { transform: translateY(-4px) rotate(-8deg); }
.service-body { padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.service-body h3 { font-size: 1.14rem; margin-bottom: 10px; transition: color .3s; }
.service-card:hover .service-body h3 { color: var(--green); }
.service-body p { font-size: .93rem; margin-bottom: 18px; flex: 1; }
.service-more {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-head); font-weight: 600; font-size: .88rem;
    color: var(--green); align-self: flex-start;
}
.service-more .icon { transition: transform .35s var(--ease); }
.service-more:hover .icon { transform: translateX(5px); }
.service-index {
    position: absolute; top: 10px; right: 18px; z-index: 2;
    font-family: var(--font-head); font-weight: 800; font-size: 2.4rem;
    color: rgba(20,33,46,.10); line-height: 1;
    transition: color .4s;
}
.service-card:hover .service-index { color: rgba(47,168,79,.28); }

/* ---------- Service detail rows ---------- */
.service-detail {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 70px); align-items: center;
    padding: clamp(40px, 5vw, 60px) 0;
    scroll-margin-top: 120px;
}
.service-detail:nth-child(even) .service-detail-media { order: 2; }
.service-detail-media { position: relative; }
.service-detail-media .frame {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    aspect-ratio: 4 / 3; box-shadow: var(--shadow);
    background: linear-gradient(140deg, #ffffff 0%, #e9f1f5 100%);
    border: 1px solid var(--line);
}
.service-detail-media .frame > div {
    position: absolute; inset: 32px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    transition: transform 1.2s var(--ease);
}
.service-detail-media:hover .frame > div { transform: scale(1.07); }
.service-detail-media .badge {
    position: absolute; right: -12px; bottom: -14px;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #fff; border-radius: 20px; padding: 16px 22px;
    font-family: var(--font-head); font-weight: 700; font-size: .85rem;
    box-shadow: 0 18px 36px rgba(47,168,79,.35);
    display: flex; align-items: center; gap: 10px;
}
.check-list { display: grid; gap: 12px; margin: 22px 0 28px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; }
.check-list .icon {
    width: 22px; height: 22px; padding: 4px; border-radius: 50%;
    background: rgba(47,168,79,.12); color: var(--green); margin-top: 3px;
}
.section-dark .check-list .icon { background: rgba(255,255,255,.12); color: var(--green-light); }

/* ---------- About / split ---------- */
.split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 70px); align-items: center;
}
.about-collage { position: relative; padding-bottom: 40px; }
.about-collage .img-a, .about-collage .img-b {
    border-radius: var(--radius-lg); overflow: hidden;
    background-size: cover; background-position: center;
    box-shadow: var(--shadow);
}
.about-collage .img-a { aspect-ratio: 4 / 3.2; }
.about-collage .img-b {
    position: absolute; right: -6%; bottom: 0;
    width: 46%; aspect-ratio: 1; border: 8px solid #fff;
    animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.about-collage .exp-badge {
    position: absolute; left: -10px; top: 26px;
    background: var(--navy); color: #fff;
    border-radius: 20px; padding: 18px 22px; text-align: center;
    box-shadow: var(--shadow-lg);
}
.about-collage .exp-badge strong {
    display: block; font-family: var(--font-head); font-size: 1.9rem; line-height: 1;
    background: linear-gradient(100deg, var(--green-light), var(--cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-collage .exp-badge span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); }

/* ---------- Stats ---------- */
.stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 20px; margin-top: 10px;
}
.stat {
    text-align: center; padding: 30px 16px;
    border-radius: var(--radius); background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    transition: transform .45s var(--ease), background .4s, border-color .4s;
}
.stat:hover { transform: translateY(-8px); background: rgba(255,255,255,.09); border-color: rgba(92,199,118,.4); }
.stat-num {
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1;
    background: linear-gradient(100deg, var(--green-light), var(--cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 10px; }
.section-soft .stat { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.section-soft .stat-label { color: var(--muted); }

/* ---------- Partners ---------- */
.partner-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
}
.partner-tile {
    display: grid; place-items: center;
    aspect-ratio: 4 / 3; padding: 18px;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    position: relative; overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s;
}
.partner-tile::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(47,168,79,.08), rgba(23,184,212,.08));
    opacity: 0; transition: opacity .4s;
}
.partner-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.partner-tile:hover::before { opacity: 1; }
.partner-logo {
    display: block; width: 100%; height: 100%;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    filter: grayscale(1) contrast(.9); opacity: .72;
    transition: filter .45s, opacity .45s, transform .45s var(--ease);
}
.partner-tile:hover .partner-logo { filter: none; opacity: 1; transform: scale(1.05); }
.partner-name {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 8px; text-align: center;
    font-family: var(--font-head); font-size: .76rem; font-weight: 600;
    color: #fff; background: linear-gradient(transparent, rgba(12,34,51,.85));
    transform: translateY(100%); transition: transform .4s var(--ease);
}
.partner-tile:hover .partner-name { transform: translateY(0); }

/* Marquee strip */
.marquee { overflow: hidden; position: relative; padding: 10px 0; }
.marquee::before, .marquee::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg-soft), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-soft), transparent); }
.marquee-on-white::before { background: linear-gradient(90deg, var(--bg), transparent); }
.marquee-on-white::after  { background: linear-gradient(270deg, var(--bg), transparent); }
.marquee-track { display: flex; gap: 72px; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
    width: 230px; height: 105px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    filter: grayscale(1) contrast(1.15); opacity: .85;
    transition: filter .4s, opacity .4s, transform .4s var(--ease);
}
.marquee-item:hover { filter: none; opacity: 1; transform: scale(1.06); }

/* ---------- Clients ---------- */
/* Copy on the left, logo slider on the right. */
.clients-split { grid-template-columns: 1fr 1.05fr; align-items: center; }
/* A grid column will not shrink below its content's width by default, and the
   slider's content is every slide side by side — so each new client page made
   the column wider, squeezing the copy beside it. */
.clients-split > * { min-width: 0; }

.client-slider {
    position: relative; overflow: hidden;
    border-radius: var(--radius-lg);
    background: #fff; box-shadow: var(--shadow);
    border: 1px solid var(--line);
}
.client-track { display: flex; transition: transform .8s var(--ease); }
.client-slide { min-width: 100%; }

/* One page of logos: 3 across, 2 down — bigger cells read better than a
   denser grid of the same width. */
.client-logos {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: var(--line);
}
.client-logos li {
    display: grid; place-items: center;
    aspect-ratio: 4 / 3; padding: 14px;
    background: #fff;
    transition: background .35s var(--ease);
}
.client-logos li:hover { background: var(--bg-soft); }
.client-logos img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: grayscale(1); opacity: .85;
    transition: filter .4s, opacity .4s, transform .4s var(--ease);
}
.client-logos li:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* /clients: every logo at once, in colour, with the name always shown —
   on a page of its own there is room for both, unlike the slider. */
.client-group + .client-group { margin-top: 64px; }
.client-group-title {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 22px; padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 1.35rem;
}
.client-group-count {
    padding: 2px 11px; border-radius: 999px;
    font-size: .8rem; font-weight: 700;
    color: #fff; background: var(--green);
}
.client-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}
.client-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm); overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s;
}
.client-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.client-card-logo { display: block; aspect-ratio: 3 / 2; padding: 10px 14px 0; }
.client-card-logo img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform .45s var(--ease);
}
.client-card:hover .client-card-logo img { transform: scale(1.05); }
.client-card-name {
    margin-top: auto; padding: 10px 12px 14px;
    text-align: center; line-height: 1.35;
    font-family: var(--font-head); font-size: .8rem; font-weight: 600;
    color: var(--navy-3);
}

.client-nav { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.client-nav button {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    background: var(--line); cursor: pointer; transition: all .35s var(--ease);
}
.client-nav button.is-active { width: 30px; border-radius: 6px; background: linear-gradient(90deg, var(--green), var(--cyan)); }

/* ---------- Feature cards (why us / mission) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.feature-card {
    padding: 34px 28px; border-radius: var(--radius);
    background: #fff; border: 1px solid var(--line);
    position: relative; overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.feature-card::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--green), var(--cyan));
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s var(--ease);
}
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.feature-card:hover::after { transform: scaleX(1); }
.feature-icon {
    width: 58px; height: 58px; border-radius: 18px; margin-bottom: 20px;
    display: grid; place-items: center; color: var(--green);
    background: rgba(47,168,79,.1);
    transition: transform .5s var(--ease), background .4s, color .4s;
}
.feature-card:hover .feature-icon { background: var(--green); color: #fff; transform: rotate(-8deg); }
.feature-card h3 { font-size: 1.12rem; }
.feature-card p { font-size: .94rem; margin: 0; }

/* ---------- Membership list ---------- */
.membership-list { display: grid; gap: 14px; }
.membership-list li {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px; border-radius: var(--radius-sm);
    background: #fff; border: 1px solid var(--line);
    font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--ink);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.membership-list li:hover { transform: translateX(8px); box-shadow: var(--shadow-sm); }
.membership-list .icon {
    width: 32px; height: 32px; padding: 7px; flex: none; border-radius: 50%;
    background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff;
}

/* ---------- Quote / CTA band ---------- */
.cta-band {
    position: relative; overflow: hidden;
    padding: clamp(56px, 7vw, 90px) 0;
    background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
    color: rgba(255,255,255,.75);
}
.cta-band::before, .cta-band::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(10px);
}
.cta-band::before {
    width: 420px; height: 420px; top: -180px; right: -80px;
    background: radial-gradient(circle, rgba(47,168,79,.35), transparent 68%);
    animation: floatBlob 12s ease-in-out infinite;
}
.cta-band::after {
    width: 340px; height: 340px; bottom: -160px; left: -60px;
    background: radial-gradient(circle, rgba(23,184,212,.3), transparent 68%);
    animation: floatBlob 15s ease-in-out infinite reverse;
}
@keyframes floatBlob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-30px) scale(1.12); } }
.cta-inner {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    gap: 34px; flex-wrap: wrap;
}
.cta-inner h2 { color: #fff; margin-bottom: 8px; }
.cta-inner p  { margin: 0; max-width: 560px; }

/* ---------- Quote block (testimonial style) ---------- */
.quote-block {
    position: relative; text-align: center; max-width: 760px; margin-inline: auto;
    padding: 40px 20px 0;
}
.quote-block .icon-quote {
    width: 54px; height: 54px; margin: 0 auto 20px;
    color: var(--green); opacity: .85;
}
.quote-block blockquote {
    margin: 0; font-family: var(--font-head); font-weight: 600;
    font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1.45; color: var(--ink);
    text-wrap: balance;
}
.section-dark .quote-block blockquote { color: #fff; }
.quote-block cite { display: block; margin-top: 18px; font-style: normal; color: var(--muted); font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 4vw, 50px); align-items: start; }
.contact-panel {
    background: linear-gradient(160deg, var(--navy), var(--navy-2));
    color: rgba(255,255,255,.72);
    border-radius: var(--radius-lg); padding: 40px 34px;
    position: relative; overflow: hidden;
}
.contact-panel::after {
    content: ''; position: absolute; width: 300px; height: 300px; right: -120px; bottom: -140px;
    background: radial-gradient(circle, rgba(47,168,79,.35), transparent 65%);
    animation: floatBlob 14s ease-in-out infinite;
}
.contact-panel h2 { color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.contact-list { display: grid; gap: 24px; position: relative; z-index: 2; margin-top: 26px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list .ci {
    width: 46px; height: 46px; flex: none; border-radius: 14px;
    display: grid; place-items: center; color: #fff;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
    transition: background .4s, transform .4s var(--ease);
}
.contact-list li:hover .ci { background: var(--green); transform: rotate(-8deg); }
.contact-list h3 { margin: 0 0 4px; color: #fff; font-family: var(--font-head); font-size: .93rem; }
.contact-list p, .contact-list a, .contact-list address {
    margin: 0; font-size: .92rem; color: rgba(255,255,255,.68); line-height: 1.6; font-style: normal;
}
.contact-list a:hover { color: var(--green-light); }

.form-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 42px);
    box-shadow: var(--shadow-sm);
}
.form-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.req { color: var(--green); }
.form-note {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 18px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.55;
}
.form-note .icon { color: var(--green); margin-top: 3px; }
/* Honeypot — off-screen rather than display:none so bots still fill it. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { position: relative; margin-bottom: 20px; }
.field label {
    display: block; margin-bottom: 8px;
    font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--ink);
}
.field input, .field textarea, .field select {
    width: 100%; padding: 14px 16px;
    font-family: var(--font-body); font-size: .95rem; color: var(--ink);
    background: var(--bg-soft); border: 1.5px solid transparent;
    border-radius: var(--radius-sm); outline: none;
    transition: border-color .3s, background .3s, box-shadow .3s;
}
.field textarea { min-height: 132px; resize: vertical; }
.field select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
}
.field input:focus, .field textarea:focus, .field select:focus {
    background: #fff; border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(47,168,79,.12);
}
.field.has-error input, .field.has-error textarea { border-color: var(--red); box-shadow: 0 0 0 4px rgba(230,57,70,.1); }
.field-error { color: var(--red); font-size: .82rem; margin-top: 6px; display: block; }

.alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 20px; border-radius: var(--radius-sm);
    margin-bottom: 24px; font-size: .93rem;
    animation: heroUp .5s var(--ease) both;
}
.alert-success { background: rgba(47,168,79,.1);  color: var(--green-dark); border: 1px solid rgba(47,168,79,.25); }
.alert-error   { background: rgba(230,57,70,.08); color: #b3242f;           border: 1px solid rgba(230,57,70,.22); }
.alert .icon { flex: none; margin-top: 2px; }

.map-embed {
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow); line-height: 0; border: 8px solid #fff;
}
.map-embed iframe { width: 100%; height: 440px; border: 0; filter: grayscale(.3) contrast(1.05); transition: filter .5s; }
.map-embed:hover iframe { filter: none; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--navy); color: rgba(255,255,255,.62); padding-top: clamp(56px, 7vw, 88px); overflow: hidden; }
.footer-glow {
    position: absolute; width: 520px; height: 520px; top: -260px; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(47,168,79,.22), transparent 66%);
    pointer-events: none;
}
.footer-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1.5fr; gap: 40px;
    padding-bottom: 54px;
}
.footer-logo { height: 34px; background: #fff; padding: 8px 12px; border-radius: 10px; margin-bottom: 20px; }
.footer-text { font-size: .93rem; }
.footer-title { color: #fff; font-size: 1.02rem; margin-bottom: 20px; position: relative; padding-bottom: 12px; }
.footer-title::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--green), var(--cyan));
}
.footer-links li { margin-bottom: 11px; }
.footer-links a {
    display: flex; align-items: center; gap: 9px;
    color: rgba(255,255,255,.62); font-size: .92rem;
    transition: color .3s, transform .35s var(--ease);
}
.footer-links a .icon { color: var(--green); opacity: .8; }
.footer-links a:hover { color: #fff; transform: translateX(6px); }
.footer-contact li { display: flex; gap: 13px; margin-bottom: 18px; font-size: .92rem; line-height: 1.6; }
.footer-contact .icon { color: var(--green); margin-top: 4px; }
.footer-contact a { color: rgba(255,255,255,.62); }
.footer-contact a:hover { color: var(--green-light); }
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.footer-social a {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center; color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    transition: all .4s var(--ease);
}
.footer-social a:hover { background: var(--green); color: #fff; transform: translateY(-4px); border-color: transparent; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.09); padding: 22px 0; position: relative; z-index: 2; }
.footer-bottom-inner { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .86rem; }
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--green-light); }

/* ---------- Floating action cluster ---------- */
.floating-actions {
    position: fixed; right: 24px; bottom: 24px; z-index: 90;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.fab {
    position: relative;
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 50%;
    color: #fff; box-shadow: var(--shadow-lg);
    transition: transform .4s var(--ease), background .3s, opacity .4s, visibility .4s;
}
.fab:hover { color: #fff; transform: translateY(-4px); }
.fab-top {
    background: rgba(12,34,51,.92);
    backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transform: translateY(12px);
}
.fab-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fab-top:hover { background: var(--ink); }
.fab-call { background: linear-gradient(135deg, var(--green), var(--green-dark)); }
.fab-pulse {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--green);
    animation: ringPulse 2.2s infinite;
}
.fab-label {
    position: absolute; right: calc(100% + 12px); white-space: nowrap;
    padding: 7px 14px; border-radius: 100px;
    background: var(--ink); color: #fff;
    font-family: var(--font-head); font-size: .8rem; font-weight: 600;
    opacity: 0; transform: translateX(8px); pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.fab-call:hover .fab-label { opacity: 1; transform: translateX(0); }
@keyframes ringPulse {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(1.6); opacity: 0;  }
}

/* ==========================================================================
   HERO TRUST BAR
   ========================================================================== */
.hero-trust {
    display: flex; flex-wrap: wrap; gap: 10px 30px;
    margin-top: 34px; padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.16);
    max-width: 620px;
}
.hero-trust li {
    display: flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,.82); font-size: .88rem;
    font-family: var(--font-head); font-weight: 500;
}
.hero-trust .icon { color: var(--green-light); width: 18px; height: 18px; }

/* ==========================================================================
   INDUSTRIES
   ========================================================================== */
/* Three columns keeps the six sectors on two complete rows — no orphan cells. */
.industry-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden;
}
.industry-card {
    position: relative; overflow: hidden;
    padding: 38px 30px; background: #fff;
    transition: background .45s var(--ease);
}
.industry-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(var(--green), var(--cyan));
    transform: scaleY(0); transform-origin: top;
    transition: transform .5s var(--ease);
}
.industry-card:hover { background: var(--bg-soft); }
.industry-card:hover::before { transform: scaleY(1); }
.industry-icon {
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: 20px;
    display: grid; place-items: center;
    color: var(--green); background: rgba(47,168,79,.1);
    transition: transform .5s var(--ease), background .4s, color .4s;
}
.industry-card:hover .industry-icon { background: var(--green); color: #fff; transform: rotate(-8deg) scale(1.05); }
.industry-card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.industry-card p  { font-size: .9rem; margin: 0; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    position: relative;
}
.process-grid::before {
    content: ''; position: absolute; left: 8%; right: 8%; top: 34px; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 8px, transparent 8px 16px);
}
.process-step { position: relative; z-index: 2; text-align: center; }
.process-no {
    width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 22px;
    display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 800; font-size: 1.15rem;
    color: #fff; background: linear-gradient(140deg, var(--navy-2), var(--navy-3));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
    transition: transform .5s var(--ease), background .4s, border-color .4s;
}
.process-step:hover .process-no {
    background: linear-gradient(140deg, var(--green), var(--green-dark));
    border-color: transparent; transform: translateY(-6px) rotate(-6deg);
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 10px; }
.process-step p  { font-size: .91rem; margin: 0; }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-list { max-width: 860px; margin-inline: auto; display: grid; gap: 14px; }
.faq-item {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm); overflow: hidden;
    transition: box-shadow .4s var(--ease), border-color .4s;
}
.faq-item.is-open { box-shadow: var(--shadow); border-color: transparent; }
.faq-q {
    width: 100%; display: flex; align-items: center; gap: 18px;
    padding: 22px 24px; border: 0; background: none; cursor: pointer;
    font-family: var(--font-head); font-weight: 600; font-size: 1rem;
    color: var(--ink); text-align: left; line-height: 1.45;
}
.faq-q:hover { color: var(--green); }
.faq-mark {
    margin-left: auto; flex: none;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--green); background: rgba(47,168,79,.1);
    transition: transform .45s var(--ease), background .35s, color .35s;
}
.faq-item.is-open .faq-mark { transform: rotate(135deg); background: var(--green); color: #fff; }
.faq-a {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .45s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 24px 24px; font-size: .95rem; }

/* ==========================================================================
   PULL QUOTE / CALLOUT
   ========================================================================== */
.callout {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 24px 26px; border-radius: var(--radius-sm);
    background: rgba(47,168,79,.07);
    border-left: 3px solid var(--green);
    font-size: .96rem;
}
.callout .icon { color: var(--green); flex: none; margin-top: 3px; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Footer membership badges ---------- */
.footer-badges { display: grid; gap: 9px; margin: 22px 0 0; }
.footer-badges li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.5);
}
.footer-badges .icon { color: var(--green); margin-top: 4px; }
.footer-credit { color: rgba(255,255,255,.45); }
.site-footer address { font-style: normal; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: transform, opacity; }
.reveal[data-reveal="up"]    { transform: translateY(46px); }
.reveal[data-reveal="down"]  { transform: translateY(-40px); }
.reveal[data-reveal="left"]  { transform: translateX(-56px); }
.reveal[data-reveal="right"] { transform: translateX(56px); }
.reveal[data-reveal="zoom"]  { transform: scale(.9); }
.reveal[data-reveal="flip"]  { transform: perspective(900px) rotateY(-14deg) translateY(30px); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
    .info-cards  { grid-template-columns: 1fr; }
    .info-card + .info-card { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 940px) {
    :root { --header-h: 70px; }

    .topbar-inner { justify-content: center; min-height: 0; padding: 8px 0; }
    .topbar-left  { gap: 16px; flex-wrap: wrap; justify-content: center; }
    .topbar-note  { display: none; }

    .nav-toggle { display: flex; }
    .main-nav {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 99;
        width: min(330px, 86vw);
        flex-direction: column; align-items: stretch;
        gap: 0; padding: 88px 28px 34px;
        background: #fff;
        box-shadow: -20px 0 60px rgba(12,34,51,.16);
        transform: translateX(105%);
        transition: transform .5s var(--ease);
        overflow-y: auto;
    }
    .main-nav.is-open { transform: translateX(0); }
    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-list li { border-bottom: 1px solid var(--line); }
    .nav-link { display: block; padding: 16px 2px; font-size: 1.02rem; }
    .nav-link::after { display: none; }
    .nav-link.is-active { color: var(--green); }
    .nav-cta { margin-top: 26px; justify-content: center; }
    .nav-close {
        display: block; position: absolute; top: 20px; right: 22px;
        width: 42px; height: 42px; border: 0; border-radius: 12px;
        background: var(--bg-soft); color: var(--ink);
        font-size: 1.8rem; line-height: 1; cursor: pointer;
    }
    /* staggered nav item entrance */
    .main-nav.is-open .nav-list li { animation: navIn .45s var(--ease) both; }
    .main-nav.is-open .nav-list li:nth-child(1) { animation-delay: .08s; }
    .main-nav.is-open .nav-list li:nth-child(2) { animation-delay: .14s; }
    .main-nav.is-open .nav-list li:nth-child(3) { animation-delay: .2s;  }
    .main-nav.is-open .nav-list li:nth-child(4) { animation-delay: .26s; }
    .main-nav.is-open .nav-list li:nth-child(5) { animation-delay: .32s; }
    @keyframes navIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

    .split, .contact-grid, .clients-split { grid-template-columns: 1fr; }
    .service-detail { grid-template-columns: 1fr; }
    .service-detail:nth-child(even) .service-detail-media { order: 0; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
    .process-grid::before { display: none; }
    .industry-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-scroll { display: none; }
    .hero-inner { padding: 90px 0 120px; }
    .about-collage { padding-bottom: 60px; }
}

@media (max-width: 620px) {
    body { font-size: 15px; }
    .container { width: min(1200px, 100% - 32px); }
    .hero { min-height: min(62vh, 560px); }
    .hero-inner { padding: 74px 0 110px; }
    .hero-text { font-size: .98rem; }
    .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
    .hero-dots { margin-bottom: 62px; }   /* clears the overlapping info strip */
    .info-strip { margin-top: -44px; }
    .info-card { padding: 24px 22px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom-inner { justify-content: center; text-align: center; }
    .cta-inner { flex-direction: column; align-items: flex-start; }
    .page-banner { padding: 84px 0 70px; }
    .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .client-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .about-collage .img-b { width: 52%; right: 0; }
    .about-collage .exp-badge { padding: 14px 16px; left: 0; }
    .service-detail-media .badge { right: 10px; padding: 12px 16px; font-size: .78rem; }
    .map-embed iframe { height: 320px; }
    .floating-actions { right: 16px; bottom: 16px; gap: 10px; }
    .fab { width: 48px; height: 48px; }
    .fab-label { display: none; }
    .marquee-item { width: 150px; height: 70px; }
    .marquee-track { gap: 40px; }
    .client-slider { max-width: 100%; }
    .client-logos { grid-template-columns: repeat(2, 1fr); }
    .client-logos li { padding: 14px; }
    .process-grid { grid-template-columns: 1fr; gap: 28px; text-align: left; }
    .process-step { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; text-align: left; }
    .process-no { width: 54px; height: 54px; margin: 0; border-radius: 16px; grid-row: span 2; }
    .process-step h3 { margin-bottom: 6px; align-self: center; }
    .process-step p { grid-column: 2; }
    .industry-grid { grid-template-columns: 1fr; }
    .industry-card { padding: 28px 24px; }
    .faq-q { padding: 18px 18px; font-size: .95rem; gap: 12px; }
    .faq-a p { padding: 0 18px 20px; }
    .hero-trust { gap: 8px 20px; margin-top: 26px; padding-top: 20px; }
    .hero-trust li { font-size: .82rem; }
}

@media (max-width: 400px) {
    .stats { grid-template-columns: 1fr; }
    .topbar { font-size: .76rem; }
}

/* ==========================================================================
   Brand pages — /brands and /brands/{slug}
   ========================================================================== */

/* Detail pages get a shorter banner than the section landing pages. */
.page-banner-sm { min-height: 260px; }

.lead { font-size: 1.08rem; line-height: 1.7; color: var(--ink); }

.brand-head {
    display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start;
}
.brand-mark {
    display: grid; place-items: center;
    padding: 26px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.brand-mark img { max-width: 100%; height: auto; }
.brand-intro > * + * { margin-top: 16px; }

/* Prints only for a principal whose authorisation MEDISOL has confirmed. */
.brand-auth {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(47, 168, 79, .1); color: var(--green-dark);
    font-family: var(--font-head); font-size: .84rem; font-weight: 600;
}
.brand-auth .icon { flex: 0 0 auto; }

.brand-footnote {
    margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
    font-size: .86rem; color: var(--muted);
}
.brand-footnote a { color: var(--body); }

/* Logo-less principals still need a legible tile until artwork arrives. */
.partner-logo-text {
    display: grid; place-items: center; padding: 10px; text-align: center;
    font-family: var(--font-head); font-size: .95rem; font-weight: 700;
    color: var(--navy-3); filter: none; opacity: .85;
    background: none;
}
.partner-count {
    position: absolute; top: 10px; right: 10px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(12, 34, 51, .07);
    font-family: var(--font-head); font-size: .68rem; font-weight: 600;
    color: var(--body); letter-spacing: .02em;
}


@media (max-width: 780px) {
    .brand-head { grid-template-columns: 1fr; gap: 26px; }
    .brand-mark { max-width: 240px; }
}

/* Which address to use for what — the brochure prints three. */
.ci-note {
    display: block; margin-top: 2px;
    font-family: var(--font-head); font-size: .72rem; font-weight: 500;
    letter-spacing: .04em; color: var(--muted);
}

/* ==========================================================================
   Catalog — /products, /products/{category}, /products/{category}/{slug}
   Data-dense pages, so the treatment tightens here: smaller radii, hairline
   rules instead of heavy shadows, tabular figures wherever numbers align.
   ========================================================================== */

.center { text-align: center; }

.link-arrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-head); font-size: .88rem; font-weight: 600;
    color: var(--green-dark); text-decoration: none;
}
.link-arrow .icon { transition: transform .3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

.block-title {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 16px; font-size: 1.05rem; color: var(--ink);
}
.block-title .icon { color: var(--green); flex: 0 0 auto; }

/* Where content the client has not written yet would otherwise leave a hole.
   Says what we will do about it instead of pretending the data exists. */
.empty-note {
    padding: 20px 22px; border-radius: var(--radius-sm);
    background: var(--bg-soft); border: 1px dashed var(--line);
}
.empty-note p { margin: 0 0 12px; font-size: .94rem; }
.empty-note p:last-child { margin-bottom: 0; }

/* ---------- Category grid ---------- */
.cat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px;
}
.cat-card {
    position: relative; display: flex; gap: 16px; align-items: flex-start;
    padding: 24px 26px; background: #fff; text-decoration: none;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.cat-icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 10px;
    background: rgba(47, 168, 79, .1); color: var(--green-dark);
}
.cat-card-service .cat-icon { background: rgba(23, 184, 212, .12); color: #0d7f94; }
.cat-body { display: block; min-width: 0; }
.cat-title {
    display: block; font-family: var(--font-head); font-weight: 700;
    font-size: 1.02rem; line-height: 1.3; color: var(--ink);
    padding-right: 40px;   /* clears the count chip */
}
.cat-text { display: block; margin-top: 7px; font-size: .9rem; line-height: 1.6; color: var(--body); }
.cat-count-chip {
    position: absolute; top: 22px; right: 22px;
    min-width: 30px; padding: 3px 9px; border-radius: 999px; text-align: center;
    background: var(--bg-soft-2); color: var(--navy-3);
    font-family: var(--font-head); font-size: .78rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cat-count-service { background: rgba(23, 184, 212, .12); color: #0d7f94; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }

.cat-intro { max-width: 720px; margin-bottom: 34px; }
.cat-count {
    margin-top: 14px; font-family: var(--font-head); font-size: .82rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.cat-count strong { color: var(--green-dark); font-variant-numeric: tabular-nums; }

/* ---------- Product grid ---------- */
.product-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px;
}
.product-card {
    display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.product-card-media {
    position: relative; display: block; aspect-ratio: 4 / 3;
    background-size: cover; background-position: center; background-color: var(--bg-soft-2);
}
.product-card-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(12, 34, 51, .30), transparent 55%);
}
.product-flag {
    position: absolute; top: 12px; left: 12px; z-index: 1;
    padding: 4px 10px; border-radius: 999px;
    background: var(--green); color: #fff;
    font-family: var(--font-head); font-size: .68rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
}
.product-card-body { display: block; padding: 18px 20px 20px; }
.product-card-title {
    display: block; font-family: var(--font-head); font-weight: 700;
    font-size: .99rem; line-height: 1.35; color: var(--ink);
}
.product-card-text {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 8px; font-size: .88rem; line-height: 1.6; color: var(--body);
}
.product-card-brand {
    display: inline-block; margin-top: 12px;
    font-family: var(--font-head); font-size: .72rem; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Product detail ---------- */
.product-detail { padding-top: 40px; }
.breadcrumb-inline { margin-bottom: 28px; font-size: .84rem; color: var(--muted); }
.breadcrumb-inline a { color: var(--body); text-decoration: none; }
.breadcrumb-inline a:hover { color: var(--green-dark); }

.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.product-media img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.product-media-note { margin-top: 10px; font-size: .8rem; color: var(--muted); }

.product-cat {
    display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px;
    background: rgba(47, 168, 79, .1); color: var(--green-dark); text-decoration: none;
    font-family: var(--font-head); font-size: .74rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.product-info h1 { margin: 0 0 12px; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; }
.product-sub { margin: 0 0 12px; font-size: 1rem; color: var(--muted); }
.product-body { margin-top: 14px; }
.product-brand { margin-top: 14px; font-size: .92rem; }

/* The manufacturer's own site. Deliberately quieter than the quotation
   button beside it: it leads off our domain, so it is an option rather than
   the next step. The arrow marks that it opens a new tab, which the link
   also states for a screen reader. */
.product-brand-link { margin-top: 8px; font-size: .9rem; }
.product-brand-link a {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--muted); text-decoration: none;
    transition: color .3s;
}
.product-brand-link a:hover { color: var(--green); }
.product-brand-link a:hover span { text-decoration: underline; }
.product-brand-link .icon-xs { opacity: .7; }

.product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

.product-assurances { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.product-assurances li {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 11px; font-size: .9rem; color: var(--body);
}
.product-assurances .icon { color: var(--green); flex: 0 0 auto; margin-top: 3px; }

/* ---------- Specifications ---------- */
.spec-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 44px; }
.spec-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table th, .spec-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 44%; font-family: var(--font-head); font-weight: 600; color: var(--body); }
.spec-table td { color: var(--ink); font-variant-numeric: tabular-nums; }
.spec-unit { color: var(--muted); font-size: .86em; }

/* ---------- Company catalogs ----------
   The same two downloads under every product, so they read as the company's
   catalogs rather than as this instrument's datasheet: a quiet strip below the
   specifications, not a second call to action competing with the quotation
   button at the top of the page. */
.catalog-downloads { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.catalog-downloads-intro { max-width: 640px; margin: 0 0 20px; font-size: .94rem; }
.catalog-download-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px;
}
.catalog-download-list a {
    display: flex; align-items: flex-start; gap: 14px; height: 100%;
    padding: 18px 20px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--ink); text-decoration: none;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.catalog-download-list a:hover {
    transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--green);
}
.catalog-download-icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(47, 168, 79, .1); color: var(--green-dark);
}
/* flex-basis 0, not auto: on a narrow screen the row wraps the size chip
   underneath instead of pushing the whole text block to its own line. */
.catalog-download-text { flex: 1 1 0; min-width: 0; }
.catalog-download-title {
    display: block; font-family: var(--font-head); font-weight: 600; font-size: .98rem;
}
.catalog-download-list a:hover .catalog-download-title { color: var(--green-dark); }
.catalog-download-note { display: block; margin-top: 5px; font-size: .86rem; color: var(--muted); }
.catalog-download-meta {
    flex: 0 0 auto; font-family: var(--font-head); font-size: .74rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- Services ---------- */
.svc-intro { max-width: 720px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.svc-card {
    padding: 28px 30px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.svc-icon {
    display: grid; place-items: center; width: 50px; height: 50px;
    margin-bottom: 18px; border-radius: 12px;
    background: rgba(47, 168, 79, .1); color: var(--green-dark);
}
.svc-card h3 { margin: 0 0 10px; font-size: 1.08rem; color: var(--ink); }
.svc-card p { font-size: .92rem; margin-bottom: 16px; }

/* Numbered because a validation engagement really does run in this order. */
.scope-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px;
}
.scope-item {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 24px 26px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.scope-no {
    font-family: var(--font-head); font-size: .96rem; font-weight: 800;
    color: var(--green); font-variant-numeric: tabular-nums; flex: 0 0 auto;
    padding-top: 2px;
}
.scope-item h3 { margin: 0 0 6px; font-size: 1rem; color: var(--ink); }
.scope-item p { margin: 0; font-size: .9rem; }

.deliverables { margin-top: 44px; max-width: 720px; }

@media (max-width: 900px) {
    .product-layout { grid-template-columns: 1fr; gap: 32px; }
    .spec-columns { gap: 32px; }
}
@media (max-width: 620px) {
    .cat-card { padding: 20px; }
    .cat-title { padding-right: 34px; }
    .cat-count-chip { top: 18px; right: 18px; }
    .product-actions .btn { width: 100%; justify-content: center; }
    /* The size chip drops under the title rather than squeezing it. */
    .catalog-download-list a { flex-wrap: wrap; }
    .catalog-download-meta { width: 100%; padding-left: 52px; }
}

/* Placeholder panel used until the client supplies product photography.
   A tinted ground with the category icon — clearly a placeholder, rather than
   a borrowed photo that would read as a picture of the actual instrument. */
.product-card-media-empty {
    display: grid; place-items: center;
    background: linear-gradient(150deg, var(--bg-soft) 0%, var(--bg-soft-2) 100%);
}
.product-card-media-empty::after { display: none; }
.product-placeholder { display: grid; place-items: center; color: var(--green); opacity: .34; }
.product-placeholder .icon { width: 54px; height: 54px; stroke-width: 1.2; }

.product-placeholder-lg {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: linear-gradient(150deg, var(--bg-soft) 0%, var(--bg-soft-2) 100%);
}
.product-placeholder-lg .icon { width: 96px; height: 96px; stroke-width: 1; }

/* ==========================================================================
   Product illustrations — custom line art where there is no photograph yet
   ========================================================================== */
.il { width: 100%; height: 100%; display: block; }
.il .ln { stroke: var(--green); }
.il .ik { stroke: var(--navy-3); }
.il .sc { fill: var(--navy); }
.il .fl { fill: var(--green); opacity: .12; }
.il .dt { fill: var(--green); }
.il .dt-fill { fill: #fff; }
/* Strokes that are drawn as fills need the line colour without a fill. */
.il .fl-line { stroke: var(--green); opacity: .5; }
.il .sc-line { stroke: var(--navy-3); }

/* Card panel: the drawing sits centred on the tinted placeholder ground. */
.product-illus {
    display: block; width: 74%; max-width: 200px;
    opacity: .92;
    transition: transform .5s var(--ease);
}
.product-card:hover .product-illus { transform: translateY(-3px) scale(1.03); }

/* Detail page: larger, framed like the photo would be. */
.product-illus-lg {
    display: grid; place-items: center;
    aspect-ratio: 4 / 3; padding: 8%;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: linear-gradient(150deg, var(--bg-soft) 0%, var(--bg-soft-2) 100%);
}
.product-illus-lg .il { max-width: 320px; }

/* Category + principal chips above a product title. */
.product-eyebrows { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.product-eyebrows .product-cat { margin-bottom: 0; }
.product-brand-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 999px; text-decoration: none;
    background: var(--navy); color: #fff;
    font-family: var(--font-head); font-size: .74rem; font-weight: 700;
    letter-spacing: .04em;
    transition: background .3s;
}
.product-brand-chip .icon { color: var(--green-light); }
.product-brand-chip:hover { background: var(--navy-2); }

/* ==========================================================================
   Gallery — /gallery and /gallery/{event}
   ========================================================================== */

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

.gallery-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; color: inherit; text-decoration: none;
    transition: transform .35s, box-shadow .35s, border-color .35s;
}
.gallery-card:hover {
    transform: translateY(-6px);
    border-color: transparent; box-shadow: var(--shadow);
}

.gallery-card-media {
    position: relative; display: block;
    aspect-ratio: 16 / 11; overflow: hidden;
    background: linear-gradient(150deg, var(--bg-soft) 0%, var(--bg-soft-2) 100%);
}
.gallery-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gallery-card:hover .gallery-card-media img { transform: scale(1.06); }

/* An event with no photographs yet. A tinted mark rather than an empty frame,
   which reads as an image that failed to load. */
.gallery-card-blank { display: grid; place-items: center; height: 100%; color: var(--green); opacity: .35; }
.gallery-card-blank .icon { width: 46px; height: 46px; }

.gallery-card-count {
    position: absolute; right: 12px; bottom: 12px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(12, 34, 51, .78); color: #fff;
    font-family: var(--font-head); font-size: .76rem; font-weight: 700;
    backdrop-filter: blur(3px);
}

.gallery-card-body { display: block; padding: 22px 24px 24px; }
.gallery-card-meta {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 9px;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--green);
}
.gallery-card-meta span + span { color: var(--muted); }
.gallery-card-title {
    display: block; font-family: var(--font-head); font-weight: 700;
    font-size: 1.12rem; color: var(--ink); line-height: 1.35;
}
.gallery-card-text {
    display: block; margin-top: 8px; font-size: .92rem; color: var(--body);
}
.gallery-card-more {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
    font-family: var(--font-head); font-size: .84rem; font-weight: 700; color: var(--green);
}
.gallery-card:hover .gallery-card-more .icon { transform: translateX(4px); }
.gallery-card-more .icon { transition: transform .3s; }

/* ---------- One event ---------- */

.event-head { max-width: 760px; margin-bottom: 44px; }
.event-meta {
    display: flex; flex-wrap: wrap; gap: 10px 22px;
    list-style: none; margin: 0 0 18px; padding: 0;
    font-size: .88rem; color: var(--muted);
}
.event-meta li { display: inline-flex; align-items: center; gap: 7px; }
.event-meta .icon { color: var(--green); }
.event-body { margin-top: 14px; }

.photo-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.photo-tile { margin: 0; }
.photo-link {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 4 / 3; border-radius: var(--radius-sm);
    background: var(--bg-soft);
}
.photo-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.photo-link:hover img { transform: scale(1.07); }

.photo-zoom {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(12, 34, 51, .45); color: #fff;
    opacity: 0; transition: opacity .3s;
}
.photo-link:hover .photo-zoom,
.photo-link:focus-visible .photo-zoom { opacity: 1; }
.photo-zoom .icon { width: 30px; height: 30px; }

.photo-tile figcaption { margin-top: 9px; font-size: .86rem; color: var(--muted); }

/* ---------- Lightbox ---------- */
/* Progressive enhancement: without JavaScript every tile is a plain link to the
   full image, which the browser opens on its own. */
.lightbox {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    padding: 4vh 4vw;
    background: rgba(8, 20, 30, .93);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
    max-width: 100%; max-height: 82vh;
    border-radius: var(--radius-sm); box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}
.lightbox-caption {
    margin-top: 16px; text-align: center; color: #cfe0ec; font-size: .92rem;
    max-width: 60ch;
}
.lightbox-figure { margin: 0; display: grid; justify-items: center; }
.lightbox-close,
.lightbox-nav {
    position: absolute; display: grid; place-items: center;
    width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
    transition: background .3s;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox-close { top: 18px; right: 18px; font-size: 1.5rem; line-height: 1; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-prev .icon { transform: rotate(180deg); }
body.lightbox-open { overflow: hidden; }


/* ==========================================================================
   Blog — /blog and /blog/{post}
   ========================================================================== */

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

.post-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; color: inherit; text-decoration: none;
    transition: transform .35s, box-shadow .35s, border-color .35s;
}
.post-card:hover {
    transform: translateY(-6px);
    border-color: transparent; box-shadow: var(--shadow);
}

.post-card-media {
    position: relative; display: block;
    aspect-ratio: 16 / 10; overflow: hidden;
    background: linear-gradient(150deg, var(--bg-soft) 0%, var(--bg-soft-2) 100%);
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.post-card:hover .post-card-media img { transform: scale(1.05); }
.post-card-blank { display: grid; place-items: center; height: 100%; color: var(--green); opacity: .35; }
.post-card-blank .icon { width: 42px; height: 42px; }

.post-card-topic {
    position: absolute; left: 14px; top: 14px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--green); color: #fff;
    font-family: var(--font-head); font-size: .74rem; font-weight: 700;
    letter-spacing: .03em;
}

.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.post-card-meta {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px;
    font-size: .78rem; color: var(--muted);
}
.post-card-title {
    display: block; font-family: var(--font-head); font-weight: 700;
    font-size: 1.12rem; color: var(--ink); line-height: 1.35;
}
.post-card-text { display: block; margin-top: 9px; font-size: .92rem; color: var(--body); }
.post-card-more {
    display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 16px;
    font-family: var(--font-head); font-size: .84rem; font-weight: 700; color: var(--green);
}
.post-card-more .icon { transition: transform .3s; }
.post-card:hover .post-card-more .icon { transform: translateX(4px); }

/* ---------- Topic chips ---------- */
.topic-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; justify-content: center; }
.topic-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 999px; text-decoration: none;
    border: 1px solid var(--line); background: #fff; color: var(--body);
    font-family: var(--font-head); font-size: .84rem; font-weight: 600;
    transition: border-color .3s, color .3s, background .3s;
}
.topic-chip:hover { border-color: var(--green); color: var(--green); }
.topic-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.topic-chip-n { opacity: .6; font-weight: 500; }

/* ---------- One article ---------- */
/* A measure, not the full container: prose past about 75 characters a line is
   measurably harder to come back to after a line break. */
.article { max-width: 760px; margin: 0 auto; }
.article-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
    list-style: none; margin: 0 0 26px; padding: 0;
    font-size: .88rem; color: var(--muted);
}
.article-meta li { display: inline-flex; align-items: center; gap: 7px; }
.article-meta .icon { color: var(--green); }

.article-cover { margin: 0 0 30px; }
.article-cover img {
    width: 100%; height: auto; border-radius: var(--radius); display: block;
}

/* A video posted on Facebook or YouTube, embedded in the article, in place of
   the cover image. Always 16:9 — see blog_video() for why it is not guessed —
   on the dark backing the player letterboxes a vertical clip against. */
.article-video {
    margin: 0 0 30px;
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); line-height: 0; background: var(--navy);
}
.article-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

.article-body { font-size: 1.02rem; line-height: 1.85; }
.article-body p { margin: 0 0 1.15em; }

.article-foot {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
    margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line);
}

/* ---------- Pager ---------- */
.pager {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    margin-top: 46px;
}
.pager-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--green);
}
.pager-back { transform: rotate(180deg); }
.pager-count { font-size: .86rem; color: var(--muted); }

/* ---------- Empty states ---------- */
/* /gallery and /blog before anything is published. Both pages stay reachable —
   they are linked from old shares — so they say what is coming rather than
   showing an empty grid. */
.empty-note {
    max-width: 520px; margin: 0 auto; text-align: center;
    padding: 44px 30px; border: 1px dashed var(--line); border-radius: var(--radius);
    background: var(--bg-soft);
}
.empty-note-icon {
    display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px;
    border-radius: 50%; background: rgba(47, 168, 79, .12); color: var(--green);
}
.empty-note-icon .icon { width: 28px; height: 28px; }
.empty-note h3 { margin: 0 0 8px; font-size: 1.2rem; }
.empty-note p { margin: 0; font-size: .95rem; }

.panel-empty-public {
    padding: 30px; text-align: center; color: var(--muted);
    border: 1px dashed var(--line); border-radius: var(--radius);
}

@media (max-width: 620px) {
    .gallery-grid,
    .post-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .article-foot { flex-direction: column; }
    .article-foot .btn { justify-content: center; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
}