/* ==========================================================================
   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; }

.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); }

.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; }
    .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; }

.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; }

/* ---------- 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; }
}

/* 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; }

/* Download button: the file type and size sit under the label, so nobody
   clicks a download without knowing what arrives. The label and meta stack in
   their own column so the icon stays centred against both lines. */
.btn-download { align-items: center; }
.btn-stack {
    display: flex; flex-direction: column; align-items: flex-start;
    line-height: 1.25; text-align: left;
}
.btn-meta {
    margin-top: 2px;
    font-size: .68rem; font-weight: 600; letter-spacing: .07em;
    color: var(--muted); text-transform: uppercase;
}


/* ==========================================================================
   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); }


/* ==========================================================================
   Team — /team and the home page strip
   ========================================================================== */

/* The column count comes from PHP (team_columns()) as a data-cols attribute,
   not from auto-fill. auto-fill sizes tracks against a fixed maximum, so a
   small team left most of the row empty however the numbers were tuned.
   Deciding the count up front lets the cards stretch to fill the container at
   any team size: three people are three wide cards, not three narrow ones with
   600px of nothing beside them.

   Written out per count rather than as repeat(var(--n), …) — repeat() takes an
   integer literal, and a custom property (or worse, a min() around one) makes
   the whole declaration invalid and the grid collapses to a single 0px track. */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
/* One and two-card rows are capped and centred: split across the full 1200px
   container a card becomes 590px wide, and at 4:5 that is a 740px-tall
   portrait — the card stops reading as a card. Three and four across need no
   cap, since 1fr already lands them at sensible widths. */
.team-grid[data-cols="1"] { grid-template-columns: minmax(0, 380px); justify-content: center; }
.team-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; }
.team-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-grid + .team-group-title { margin-top: 68px; }

.team-group-title {
    display: flex; align-items: center; gap: 12px;
    font-size: .82rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 26px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
/* The headcount, so a department block reads as a group rather than a stray label. */
.team-group-title span {
    display: grid; place-items: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 999px;
    background: rgba(47,168,79,.12); color: var(--green-dark);
    font-size: .72rem; letter-spacing: 0;
}

.team-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.team-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

/* A fixed frame, so a phone snapshot and a studio headshot crop to the same
   card height — staff photos are never supplied at a consistent ratio.
   Slightly wider than tall: a 4:5 portrait made a 380px card 476px of photo
   before the name even started, and the row read as a wall of images rather
   than a set of cards. 5:4 keeps a head-and-shoulders crop comfortable while
   letting the text carry its share of the card. */
.team-photo {
    position: relative; overflow: hidden;
    aspect-ratio: 5 / 4;
    background: linear-gradient(150deg, var(--bg-soft) 0%, var(--bg-soft-2) 100%);
    display: grid; place-items: center;
}
.team-photo img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--ease);
}
.team-card:hover .team-photo img { transform: scale(1.06); }

/* No photograph yet: initials on the brand gradient, which reads as a
   deliberate placeholder rather than as a broken image. Sized as a share of the
   card so it fills the frame a photograph would have — a fixed 96px disc left
   most of the panel as empty gradient. */
.team-initials {
    font-family: var(--font-head);
    font-weight: 800; letter-spacing: .04em;
    color: #fff;
    /* A share of the frame rather than a fixed size, so it scales with the
       card. 42%, not the 52% the taller 4:5 frame took: in the shorter frame
       that left barely 50px of margin and the disc crowded the panel. */
    width: 42%; aspect-ratio: 1 / 1; border-radius: 50%;
    display: grid; place-items: center;
    font-size: clamp(1.5rem, 4.2cqw + .7rem, 2.8rem);
    /* Tinted rather than solid brand green: a row of cards with no photographs
       yet is otherwise three saturated discs shouting over the copy, and once
       real portraits arrive the placeholders should sit behind them, not
       compete. */
    background: linear-gradient(150deg, rgba(47,168,79,.15), rgba(23,184,212,.12));
    color: var(--green-dark);
    box-shadow: inset 0 0 0 1px rgba(47,168,79,.2);
}
/* Container query unit above needs a container to measure against. */
.team-photo { container-type: inline-size; }

/* Department, badged on the photograph. White pill so it reads on both the
   pale placeholder gradient and a dark photograph. */
.team-dept {
    position: absolute; top: 14px; left: 14px;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(255,255,255,.94); color: var(--ink);
    font-family: var(--font-head); font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(12,34,51,.12);
    backdrop-filter: blur(6px);
}

/* Body grows to fill the card so every card in a row is the same height, and
   the contact row sits on the baseline of all of them however long the bio. */
.team-body {
    flex: 1;
    display: flex; flex-direction: column;
    padding: 24px 26px 26px;
}
.team-name { font-size: 1.14rem; margin: 0 0 5px; }
.team-role {
    font-family: var(--font-head); font-size: .8rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--green);
    margin: 0;
}
.team-bio { font-size: .92rem; margin: 14px 0 0; }

/* In the card body rather than sliding over the photo on hover: reachable on a
   touch screen, visible to a keyboard, and it gives the card a base to sit on.
   margin-top:auto pins it to the bottom whatever the bio length. */
.team-links {
    display: flex; gap: 9px;
    margin-top: auto; padding-top: 20px;
}
.team-links a {
    width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--bg-soft); color: var(--body);
    border: 1px solid var(--line);
    transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.team-links a:hover {
    background: var(--green); border-color: var(--green); color: #fff;
    transform: translateY(-3px);
}

/* Empty state — /team before anyone is published. */
.team-empty {
    max-width: 560px; margin-inline: auto; text-align: center;
    padding: 48px 32px; border-radius: var(--radius);
    background: var(--bg-soft); border: 1px dashed var(--line);
}
.team-empty-icon {
    width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 20px;
    display: grid; place-items: center;
    background: rgba(47,168,79,.1); color: var(--green);
}
.team-empty-icon .icon { width: 30px; height: 30px; }
.team-empty p { font-size: .95rem; }

/* ---------- Home page strip ---------- */
/* Deliberately lighter than /team: a face, a name and a role, with the detail
   left on the page the strip links to. */
.team-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 22px;
}
.team-mini { text-align: center; }
.team-mini-photo {
    position: relative;
    width: clamp(104px, 14vw, 136px); aspect-ratio: 1 / 1;
    margin: 0 auto 16px;
    border-radius: 50%; overflow: hidden;
    display: grid; place-items: center;
    background: linear-gradient(150deg, var(--bg-soft) 0%, var(--bg-soft-2) 100%);
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line);
    transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}
.team-mini:hover .team-mini-photo {
    transform: translateY(-6px);
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--green), 0 18px 36px rgba(12,34,51,.14);
}
.team-mini-photo img { width: 100%; height: 100%; object-fit: cover; }
/* The strip's circle is the frame itself, so it overrides the card's
   percentage sizing and fills its parent outright. Solid brand green here,
   unlike the tint used on /team: at this size a pale disc has no presence, and
   there is only ever a handful of them in a row. */
.team-mini-photo .team-initials {
    width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #fff;
    box-shadow: none;
}
.team-mini-name { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: .98rem; }
.team-mini-role { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.team-mini a { color: inherit; }
.team-mini a:hover .team-mini-name { color: var(--green); }

/* data-cols carries the desktop count; these step it down as the viewport
   narrows. Only the counts that are actually too wide are overridden, so a
   two-person group stays two across on a tablet instead of being promoted. */
@media (max-width: 1080px) {
    .team-grid { gap: 22px; }
    .team-grid[data-cols="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .team-grid[data-cols="3"],
    .team-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    /* One column: below this a card is too narrow to read a bio in. */
    .team-grid,
    .team-grid[data-cols="2"],
    .team-grid[data-cols="3"],
    .team-grid[data-cols="4"] { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .team-body { padding: 20px 20px 22px; }
    .team-photo { aspect-ratio: 3 / 2; }
    .team-strip { grid-template-columns: repeat(2, 1fr); }
}