/* ================================================================
   EBR & Co — Main Stylesheet (v1 + light premium polish)
   Brand: Redefining Trade, Building Legacy
   Palette: navy #1F2A6B · teal #20A19A · green #6FBC4D
   Brand gradients (priority order): 1 blue · 2 navy→teal · 3 teal→green · 4 lime→green
   ================================================================ */

/* -------------------- 1. Tokens -------------------- */
:root {
    --c-navy:        #1F2A6B;
    --c-navy-deep:   #161E50;
    --c-navy-soft:   #2C3A85;
    --c-teal:        #20A19A;
    --c-teal-soft:   #3DC1B4;
    --c-green:       #6FBC4D;
    --c-ink:         #14193A;
    --c-text:        #2A2F4A;
    --c-muted:       #6B7280;
    --c-border:      #ECEEF6;
    --c-bg:          #FFFFFF;
    --c-bg-alt:      #F6F8FB;
    --c-bg-mint:     #E8F4F2;

    /* Brand gradients — priority order (1 = primary, used most).
       Matches the brochure gradient guidelines: blue · navy→teal · teal→green · lime→green */
    --g1a: #1B8FD6; --g1b: #2A3A8E;   /* 1 · blue            */
    --g2a: #243079; --g2b: #1E9C84;   /* 2 · navy → teal     */
    --g3a: #1FA3B4; --g3b: #57B85B;   /* 3 · teal → green    */
    --g4a: #C3DA2E; --g4b: #5BB75A;   /* 4 · lime → green    */

    --grad-1: linear-gradient(135deg, var(--g1a) 0%, var(--g1b) 100%);
    --grad-2: linear-gradient(135deg, var(--g2a) 0%, var(--g2b) 100%);
    --grad-3: linear-gradient(135deg, var(--g3a) 0%, var(--g3b) 100%);
    --grad-4: linear-gradient(135deg, var(--g4a) 0%, var(--g4b) 100%);

    /* Primary brand gradient = gradient 1 (blue) */
    --grad-brand:   linear-gradient(120deg, var(--g1a) 0%, var(--g1b) 100%);
    --grad-brand-v: linear-gradient(180deg, var(--g1a) 0%, var(--g1b) 100%);

    --font-head: "Sora", "Helvetica Neue", Arial, sans-serif;
    --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 24px;

    /* Refined multi-layer shadows */
    --shadow-sm: 0 1px 2px rgba(20,25,58,.04), 0 1px 3px rgba(20,25,58,.05);
    --shadow:    0 4px 12px rgba(20,25,58,.06), 0 12px 28px rgba(20,25,58,.07);
    --shadow-lg: 0 10px 24px rgba(20,25,58,.08), 0 28px 56px rgba(20,25,58,.10);

    --container: 1200px;
    --ease: cubic-bezier(.2,.8,.2,1);
}

/* -------------------- 2. Reset -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-navy); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--c-teal); }
ul { padding-left: 1.1rem; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--c-teal); color: #fff; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--c-navy);
    margin: 0 0 .55em;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.02em;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 3.8rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); letter-spacing: -.02em; font-weight: 600; line-height: 1.15; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); letter-spacing: -.015em; }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1em; text-align: justify; }

.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%); height: 1px; width: 1px;
    overflow: hidden; padding: 0; position: absolute !important;
    word-wrap: normal !important;
}
.skip-link { position: absolute; left: -9999px; top: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 9999; border-radius: 8px; }

/* -------------------- 3. Layout helpers -------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.section   { padding: clamp(4rem, 8.5vw, 6.5rem) 0; }
.section--alt { background: var(--c-bg-alt); }
.section--navy {
    background:
        radial-gradient(circle at 0% 0%, rgba(32,161,154,.22) 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(111,188,77,.14) 0%, transparent 55%),
        var(--c-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.section--navy::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none;
    opacity: .85;
}
.section--navy > * { position: relative; z-index: 1; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--mint { background: var(--c-bg-mint); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-teal);
    padding: .4rem .9rem;
    background: rgba(32,161,154,.1);
    border-radius: 999px;
    margin-bottom: 1.1rem;
}
.eyebrow--light { background: rgba(255,255,255,.12); color: #C5F2EE; }
.eyebrow--bar {
    background: none; padding: 0;
    position: relative; padding-top: 16px;
}
.eyebrow--bar::before {
    content: ""; position: absolute; left: 0; top: 0;
    width: 80px; height: 4px; border-radius: 2px;
    background: var(--grad-brand);
}

.lead { font-size: clamp(1.05rem, 1.4vw, 1.18rem); color: var(--c-muted); max-width: 60ch; line-height: 1.7; }
.lead--light { color: rgba(255,255,255,.85); }

.grad-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -------------------- 4. Buttons -------------------- */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .9rem 1.5rem;
    border-radius: 999px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .005em;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
    border: 1.5px solid transparent;
    cursor: pointer;
    line-height: 1;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Light sweep that wipes across solid buttons on hover */
.btn--accent::after,
.btn--primary::after {
    content: "";
    position: absolute; top: 0; left: -120%;
    width: 70%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg);
    transition: left .6s var(--ease);
    z-index: -1;
    pointer-events: none;
}
.btn--accent:hover::after,
.btn--primary:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
    .btn--accent::after, .btn--primary::after { display: none; }
}
.btn--primary { background: var(--c-navy); color: #fff; }
.btn--primary:hover { background: var(--c-navy-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--accent { background: var(--c-teal); color: #fff; }
.btn--accent:hover { background: var(--c-teal-soft); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--c-navy); border-color: var(--c-navy); }
.btn--ghost:hover { background: var(--c-navy); color: #fff; }
.btn--white { background: #fff; color: var(--c-navy); }
.btn--white:hover { background: var(--c-bg-mint); color: var(--c-navy); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline-white:hover { background: #fff; color: var(--c-navy); }

/* -------------------- 5. Header / Nav -------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: background .25s, border-color .25s, box-shadow .25s;
}
.site-header.is-scrolled {
    background: #fff;
    border-bottom-color: var(--c-border);
    box-shadow: 0 2px 12px rgba(20,25,58,.06);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem;
    gap: 1.25rem;
    max-width: var(--container);
    margin: 0 auto;
}
.site-logo img { height: 50px; width: auto; }
.primary-nav { display: flex; align-items: center; gap: 1.75rem; }
.primary-nav .nav-menu {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 1.75rem;
}
.primary-nav .nav-menu a {
    font-family: var(--font-head);
    color: var(--c-navy);
    font-weight: 500;
    font-size: .95rem;
    padding: .35rem 0;
    position: relative;
}
.primary-nav .nav-menu a::after {
    content: ""; position: absolute; left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: var(--grad-brand);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
}
.primary-nav .nav-menu a:hover::after,
.primary-nav .nav-menu .current-menu-item > a::after,
.primary-nav .nav-menu .current_page_item > a::after { transform: scaleX(1); }
.nav-cta { padding: .7rem 1.15rem; }

.nav-toggle {
    display: none;
    width: 42px; height: 42px;
    border-radius: 10px;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    background: var(--c-bg-alt);
}
.nav-toggle span {
    width: 22px; height: 2px; background: var(--c-navy);
    transition: transform .3s var(--ease), opacity .25s;
    border-radius: 2px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 920px) {
    .nav-toggle { display: inline-flex; }
    .primary-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        background: #fff; border-bottom: 1px solid var(--c-border);
        flex-direction: column; gap: 0;
        padding: 0 1.5rem;
        max-height: 0; overflow: hidden;
        transition: max-height .35s var(--ease), padding .3s ease;
    }
    .primary-nav.is-open { max-height: 700px; padding: 1rem 1.5rem 1.5rem; }
    .primary-nav .nav-menu { flex-direction: column; gap: 0; width: 100%; }
    .primary-nav .nav-menu li { width: 100%; }
    .primary-nav .nav-menu a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--c-border); }
    .nav-cta { width: 100%; justify-content: center; margin-top: .85rem; }
}

/* -------------------- 6. Hero -------------------- */
.hero {
    position: relative;
    background: var(--c-navy-deep);
    color: #fff;
    overflow: hidden;
    padding: clamp(5.5rem, 12vw, 9rem) 0 clamp(4.5rem, 10vw, 8rem);
}
/* Image + gradient overlay layer. Overlay gradients are stacked ON TOP of the
   photo within the same layer so the photo stays readably dark. */
.hero__media {
    position: absolute; inset: -6%;
    background:
      linear-gradient(135deg, rgba(22,30,80,.82) 0%, rgba(31,42,107,.72) 55%, rgba(32,161,154,.45) 100%),
      radial-gradient(circle at 20% 0%, rgba(32,161,154,.4) 0%, transparent 60%),
      url("../img/brand-family.jpg") center / cover no-repeat;
    transform: scale(1.08);
}
.hero__dots {
    content: "";
    position: absolute; inset: -4%;
    background-image:
      radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.5px);
    background-size: 28px 28px;
    opacity: .7;
    pointer-events: none;
}
.hero__inner { 
    position: relative; 
    /* Removed max-width to allow perfect left-alignment with the rest of the site's container */
}
.hero h1 { color: #fff; margin-bottom: 1.25rem; }
.hero h1 .grad-text {
    background: linear-gradient(90deg, #6FE3D9 0%, #C9F26B 50%, #6FE3D9 100%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: heroGradShift 7s linear infinite;
}
@keyframes heroGradShift {
    to { background-position: 220% center; }
}

/* Hero text staggered entrance on load */
@keyframes heroTextUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}
.hero__inner--animate > * {
    opacity: 0;
    animation: heroTextUp .85s var(--ease) forwards;
}
.hero__inner--animate > .hero__bar  { animation-delay: .10s; }
.hero__inner--animate > h1          { animation-delay: .26s; }
.hero__inner--animate > p           { animation-delay: .44s; }
.hero__inner--animate > .hero__ctas { animation-delay: .60s; }
@media (prefers-reduced-motion: reduce) {
    .hero h1 .grad-text { animation: none; }
    .hero__inner--animate > * { opacity: 1; transform: none; animation: none; }
    .hero__media { animation: none; transform: scale(1.08); }
    .hero__bar { animation: none; }
}
.hero p { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: rgba(255,255,255,.85); max-width: 60ch; margin-bottom: 2.25rem; line-height: 1.65; }
.hero__ctas { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero__bar {
    width: 92px; height: 5px; border-radius: 3px;
    background: var(--grad-brand);
    margin-bottom: 1.5rem;
    transform-origin: left center;
    animation: heroBarDraw .9s var(--ease) .35s both;
}
@keyframes heroBarDraw {
    from { transform: scaleX(0); opacity: 1; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* -------------------- 7. Stats strip -------------------- */
.stats {
    background: #fff;
    margin-top: -3.5rem; position: relative; z-index: 5;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.25rem 1.25rem;
}
.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}
.stats__num {
    font-family: var(--font-head);
    font-size: clamp(2.1rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .4rem;
    letter-spacing: -.02em;
}
.stats__lbl {
    font-family: var(--font-head);
    font-size: .82rem;
    font-weight: 500;
    color: var(--c-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
}
@media (max-width: 720px) {
    .stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------- 8. Two-col / Section header -------------------- */
.section-head { max-width: 760px; margin: 0 auto 3.25rem; text-align: center; }
.section-head p { text-align: center; }
.section-head--left { text-align: left; margin: 0 0 2.75rem; }
.section-head--left p { text-align: left; }
.section-head h2 { margin-bottom: 1rem; }

/* In-page conversion band — closes a page with a clear next step
   instead of leaving the global footer CTA to do all the work. */
.cta-band { max-width: 720px; margin: 0 auto; text-align: center; }
.cta-band h2 { margin-bottom: .9rem; }
.cta-band p { text-align: center; margin: 0 auto 1.75rem; max-width: 58ch; }
.cta-band__actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

.two-col {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; } }

.about-visual {
    margin: 2.25rem 0 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(22, 30, 80, .14);
}
.about-visual img {
    display: block;
    width: 100%;
    height: clamp(220px, 26vw, 320px);
    object-fit: cover;
}
.about-visual--wide {
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}
.about-visual--wide img {
    height: clamp(280px, 34vw, 440px);
}

/* -------------------- 9. Card grids -------------------- */
.cards {
    display: grid;
    gap: 1.5rem;
}
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) {
    .cards--3, .cards--4, .cards--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .cards--3, .cards--4, .cards--6 { grid-template-columns: 1fr; }
}

.card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.75rem;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    height: 100%;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(32,161,154,.3); }
.card__icon {
    width: 50px; height: 50px;
    border-radius: 14px;
    background: var(--c-bg-mint);
    color: var(--icon-c, var(--c-teal));
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1.1rem;
    transition: background .3s var(--ease), color .3s var(--ease);
}
.card:hover .card__icon {
    background: var(--grad-3);
    color: #fff;
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { color: var(--c-navy); margin-bottom: .45rem; font-size: 1.18rem; }
.card p { color: var(--c-muted); margin: 0; font-size: .95rem; line-height: 1.65; }

.card--soft { background: var(--c-bg-alt); border-color: transparent; }
.card--mint { background: var(--c-bg-mint); border-color: transparent; }

.card--bordered {
    border-top: 4px solid var(--c-navy);
}

/* -------------------- 10. Brand cards -------------------- */
.brand-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
    text-align: center;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    height: 100%;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.brand-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(32,161,154,.3); }

/* Logo container — fixed height so cards align even with different logo ratios */
.brand-card__logo {
    height: 56px;
    margin-bottom: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    padding: 0 1rem;
}
.brand-card__logo img {
    max-height: 44px;
    max-width: 70%;
    width: auto; height: auto;
    object-fit: contain;
    transition: transform .35s var(--ease);
}
.brand-card:hover .brand-card__logo img { transform: scale(1.04); }

/* Text fallback when no logo exists yet */
.brand-card__name {
    font-family: var(--font-head);
    font-size: 1.55rem; font-weight: 700;
    color: var(--c-navy);
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    text-align: center;
}
.brand-card--agency .brand-card__name { color: var(--c-teal); }

.brand-card__cat {
    font-family: var(--font-head);
    font-size: .78rem;
    color: var(--c-teal);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: inline-block;
    padding: .35rem .8rem;
    background: var(--c-bg-mint);
    border-radius: 999px;
    align-self: center;
}
.brand-card--agency .brand-card__cat {
    background: rgba(31,42,107,.08);
    color: var(--c-navy);
}
.brand-card p { color: var(--c-muted); font-size: .92rem; margin: 0; line-height: 1.65; }

/* Per-brand Instagram links (top-right of card) */
.brand-card__social {
    position: absolute;
    top: .85rem; right: .85rem;
    display: flex; gap: .4rem;
    z-index: 4;
}
.brand-card__ig {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .35rem;
    width: 34px; height: 34px;
    border-radius: 999px;
    background: var(--c-bg-alt);
    color: var(--c-navy);
    border: 1px solid var(--c-border);
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.brand-card__ig svg { width: 17px; height: 17px; }
.brand-card__ig--labeled {
    width: auto;
    padding: 0 .7rem 0 .55rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .72rem;
}
.brand-card__ig:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    /* Instagram brand gradient */
    background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
}

/* -------------------- 11. Timeline -------------------- */
.timeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    align-items: start;
    position: relative;
    margin-top: 2.5rem;
    padding-top: .5rem;
}
/* Single flowing dashed connector running through every pill's centre */
.timeline::before {
    content: ""; position: absolute;
    left: 8.5%; right: 8.5%; top: 26px; height: 2px;
    background-image: linear-gradient(90deg, var(--c-teal) 50%, transparent 50%);
    background-size: 16px 2px;
    animation: timelineFlow 1s linear infinite;
    opacity: .6;
    z-index: 0;
}
@keyframes timelineFlow {
    0% { background-position: 0 0; }
    100% { background-position: 16px 0; }
}

.timeline__step {
    text-align: center;
    position: relative; z-index: 1;
    transition: transform .3s var(--ease);
    padding: 0 .25rem;
}
.timeline__step:hover { transform: translateY(-3px); }

.timeline__year {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-soft) 100%);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font-size: .9rem;
    margin-bottom: 1.1rem;
    letter-spacing: .015em;
    /* white halo against the line + drop shadow + subtle inner depth */
    box-shadow:
        0 0 0 5px #fff,
        0 8px 18px rgba(31,42,107,.22),
        inset 0 -2px 4px rgba(0,0,0,.12);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.timeline__step:hover .timeline__year {
    background: var(--grad-4);
    transform: scale(1.06);
    box-shadow:
        0 0 0 5px #fff,
        0 10px 24px rgba(32,161,154,.35),
        inset 0 -2px 4px rgba(0,0,0,.08);
}

/* "Current" milestone variant — already highlighted with gradient */
.timeline__step--current .timeline__year {
    background: var(--grad-4);
    box-shadow:
        0 0 0 5px #fff,
        0 10px 22px rgba(32,161,154,.32),
        inset 0 -2px 4px rgba(0,0,0,.08);
}
.timeline__step--current .timeline__year::before {
    /* subtle pulsing ring */
    content: ""; position: absolute; inset: -8px;
    border: 2px solid var(--c-teal);
    border-radius: 999px;
    opacity: .35;
    animation: ebr-pulse 2.4s var(--ease) infinite;
}
@keyframes ebr-pulse {
    0%   { transform: scale(1);    opacity: .4; }
    70%  { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}

.timeline__step h4 {
    color: var(--c-navy);
    font-size: 1rem;
    margin-bottom: .35rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
}
.timeline__step p {
    font-size: .88rem;
    color: var(--c-muted);
    margin: 0 auto;
    line-height: 1.6;
    text-align: center;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 980px) {
    .timeline { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
    .timeline::before { display: none; }
    .timeline__step p { max-width: 22ch; }
}
@media (max-width: 600px) {
    .timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .timeline__step--current .timeline__year::before { animation: none; }
    .timeline::before { animation: none; }
}

/* -------------------- 12. Verticals cards -------------------- */
.verticals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.vertical {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vertical:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.vertical__logo {
    height: 48px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vertical__logo img {
    max-height: 44px;
    max-width: 220px;
    width: auto; height: auto;
    object-fit: contain;
    object-position: center center;
    transition: transform .35s var(--ease);
}
.vertical:hover .vertical__logo img { transform: scale(1.03); }
.vertical h3 { font-size: 1.65rem; margin-bottom: .25rem; letter-spacing: -.02em; }
.vertical__type {
    display: block;
    text-align: center;
    font-family: var(--font-head);
    font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--c-teal);
    margin-bottom: 1rem;
    font-weight: 600;
}
.vertical__est { display: block; }
.vertical__meta {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: 1.1rem;
}
.tag {
    background: var(--c-bg-mint);
    color: var(--c-navy);
    font-family: var(--font-head);
    font-size: .75rem;
    font-weight: 600;
    padding: .4rem .8rem;
    border-radius: 999px;
    letter-spacing: .04em;
}
@media (max-width: 720px) { .verticals { grid-template-columns: 1fr; } }

/* -------------------- 13. Leadership -------------------- */
.leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.leader {
    background: #fff;
    padding: 0;
    border-radius: var(--radius);
    text-align: left;
    box-shadow:
        0 1px 2px rgba(0,0,0,.10),
        0 14px 32px rgba(0,0,0,.18);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    display: flex; flex-direction: column;
}
.leader::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--grad-brand);
    z-index: 2;
    transform-origin: left;
    transform: scaleX(.45);
    transition: transform .45s var(--ease);
}
.leader:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 8px rgba(0,0,0,.12),
        0 28px 56px rgba(0,0,0,.26);
}
.leader:hover::before { transform: scaleX(1); }

.leader__head {
    padding: 2.25rem 2rem 1.5rem;
    display: flex; align-items: center; gap: 1.5rem;
}
.leader__avatar {
    width: 120px; height: 120px;
    border-radius: 24px;
    background:
        radial-gradient(120% 100% at 100% 100%, rgba(32,161,154,.55) 0%, transparent 55%),
        linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 60%, var(--c-navy-soft) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 700; font-size: 2.2rem;
    letter-spacing: -.02em;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 18px rgba(15,23,64,.28),
        inset 0 -2px 4px rgba(255,255,255,.06),
        inset 0 1px 0 rgba(255,255,255,.08);
}
.leader__avatar::before {
    /* Logo dot motif behind the initials when no photo is set */
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23ffffff' opacity='.13'><circle cx='50' cy='8' r='2'/><circle cx='78' cy='22' r='2'/><circle cx='92' cy='50' r='2'/><circle cx='78' cy='78' r='2'/><circle cx='50' cy='92' r='2'/><circle cx='22' cy='78' r='2'/><circle cx='8' cy='50' r='2'/><circle cx='22' cy='22' r='2'/></g></svg>");
    background-size: 110%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
.leader__avatar > span { position: relative; z-index: 1; }
/* When a photo is dropped in, it covers the whole avatar area */
.leader__avatar img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: inherit;
    z-index: 2;
    display: block;
}
/* Subtle inner ring on photos to harmonize with the navy initial state */
.leader__avatar.has-photo::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(15,23,64,.08);
    z-index: 3;
    pointer-events: none;
}

.leader__head-text { flex: 1 1 auto; min-width: 0; }
.leader h4 {
    color: var(--c-navy);
    margin: 0 0 .35rem;
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: -.015em;
}
.leader__role {
    color: var(--c-teal);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0;
    display: inline-flex; align-items: center; gap: .5rem;
}
.leader__role::before {
    content: "";
    width: 18px; height: 2px;
    background: var(--c-teal);
    border-radius: 2px;
}

.leader__divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-border) 12%, var(--c-border) 88%, transparent);
    margin: 0 2rem;
}

.leader__body {
    padding: 1.5rem 2rem 2.25rem;
    flex-grow: 1;
}
.leader__body p {
    color: var(--c-muted);
    font-size: .95rem;
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 880px) {
    .leaders { grid-template-columns: 1fr; }
    .leader__head { padding: 1.5rem 1.5rem 1rem; }
    .leader__divider { margin: 0 1.5rem; }
    .leader__body { padding: 1.2rem 1.5rem 1.75rem; }
}

/* -------------------- 14. Pull quote -------------------- */
.pullquote {
    background: var(--c-navy);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 5vw, 3.5rem);
    position: relative;
    overflow: hidden;
}
.pullquote::before {
    content: "“"; position: absolute; top: -2rem; left: 1.5rem;
    font-family: var(--font-head);
    font-size: 12rem; line-height: 1;
    color: rgba(255,255,255,.06);
}
.pullquote blockquote {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(1.3rem, 2.4vw, 1.65rem);
    line-height: 1.42;
    font-weight: 500;
    max-width: 760px;
    position: relative;
    letter-spacing: -.015em;
}
.pullquote cite {
    display: block;
    font-style: normal;
    margin-top: 1.5rem;
    font-family: var(--font-body);
    font-size: .95rem;
    color: rgba(255,255,255,.7);
}
.pullquote cite strong { color: #fff; font-weight: 600; }

/* -------------------- 15. Checklist -------------------- */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
    position: relative;
    padding: .65rem 0 .65rem 2.1rem;
    color: var(--c-text);
    font-size: 1rem;
    border-bottom: 1px dashed var(--c-border);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--grad-3);
    background-image: var(--grad-3), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 10 18 20 6'/></svg>");
    background-size: cover, 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 2px 6px rgba(32,161,154,.25);
}

/* Icon list — compact feature list with a per-item icon chip */
.icon-list { list-style: none; padding: 0; margin: 0; }
.icon-list li {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 0;
    border-bottom: 1px dashed var(--c-border);
}
.icon-list li:last-child { border-bottom: 0; }
.icon-list__icon {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--c-bg-mint);
    color: var(--c-teal);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(32,161,154,.10);
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.icon-list li:hover .icon-list__icon { background: var(--grad-3); color: #fff; transform: translateY(-1px); }
.icon-list__icon svg { width: 19px; height: 19px; }
.icon-list__label {
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--c-ink);
    font-size: .98rem;
    line-height: 1.4;
    transition: color .25s var(--ease);
}
.icon-list li:hover .icon-list__label { color: var(--c-navy); }

/* Pill tags (e.g. "Our Commitment") */
.tag-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 0;
    margin: .75rem 0 0;
}
.tag-list li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: var(--c-navy);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: .55rem 1.05rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .85rem;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tag-list li:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tag-list li::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--grad-3);
    flex: none;
}
/* Mobile: one tag per line for a clean, even stack */
@media (max-width: 580px) {
    .tag-list { flex-direction: column; align-items: flex-start; }
}

/* Value-proposition icon cards */
.value-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.value-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(32,161,154,.3); }
.value-card--wide { grid-column: 1 / -1; }
.value-card__icon {
    flex: none;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--c-bg-mint);
    color: var(--c-teal);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .3s var(--ease), color .3s var(--ease);
}
.value-card:hover .value-card__icon { background: var(--grad-3); color: #fff; }
.value-card__icon svg { width: 20px; height: 20px; }
.value-card__label {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--c-navy);
    font-size: .92rem;
    line-height: 1.35;
}
@media (max-width: 520px) { .value-grid { grid-template-columns: 1fr; } }

/* -------------------- 16. Contact -------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
    background: var(--c-bg-mint);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
}
.contact-card h3 { color: var(--c-teal); margin-bottom: 1rem; }
/* On a mint section the card needs contrast so it reads as a card, not an indent */
.section--mint .contact-card { background: #fff; box-shadow: var(--shadow-sm); }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(32,161,154,.18);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .country {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--c-teal);
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .3rem;
    display: block;
}
.contact-list .addr {
    font-style: normal;
    color: var(--c-navy);
    opacity: .78;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
}
.contact-list .num {
    color: var(--c-navy);
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 500;
    transition: color .2s var(--ease);
}
.contact-list .num:hover { color: var(--c-teal); }

.form {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow-sm);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form__field { display: block; margin-bottom: 1rem; }
.form__field label {
    display: block;
    font-family: var(--font-head);
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-navy);
    margin-bottom: .4rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.form__field input,
.form__field select,
.form__field textarea {
    width: 100%;
    padding: .9rem 1rem;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    font: inherit;
    color: var(--c-ink);
    background: #fff;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
    outline: none;
    border-color: var(--c-teal);
    box-shadow: 0 0 0 4px rgba(32,161,154,.12);
}
.form__field textarea { min-height: 150px; resize: vertical; }

/* Custom select styling — reset native UI (esp. Safari) + add a chevron */
.form__field select,
.job-filters__field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231F2A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px 9px;
    cursor: pointer;
}
/* Remove the dotted focus ring Firefox draws on selects */
.form__field select:-moz-focusring,
.job-filters__field select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--c-ink);
}
.form__field select::-ms-expand,
.job-filters__field select::-ms-expand { display: none; }

.form__honey { position: absolute; left: -9999px; }
.form__notice {
    padding: 1rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: .95rem;
    font-family: var(--font-head);
    font-weight: 500;
}
.form__notice--ok { background: var(--c-bg-mint); color: var(--c-teal); border: 1px solid rgba(32,161,154,.3); }
.form__notice--err { background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; }
@media (max-width: 580px) { .form__row { grid-template-columns: 1fr; } }

/* -------------------- 17. Footer CTA -------------------- */
.footer-cta {
    background: var(--grad-2);
    color: #fff;
    padding: clamp(2.75rem, 6vw, 3.5rem) 0;
}
.footer-cta__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.footer-cta__text h2 { color: #fff; margin: .25rem 0 0; max-width: 30ch; }
.footer-cta .btn { background: #fff; color: var(--c-navy); }
.footer-cta .btn:hover { background: var(--c-navy); color: #fff; }
@media (max-width: 720px) {
    .footer-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* -------------------- 18. Footer -------------------- */
.site-footer {
    background: var(--c-navy-deep);
    color: rgba(255,255,255,.78);
    margin-top: 0;
}
.site-footer__grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 2.5rem;
    padding: 4rem 1.5rem 2.75rem;
}
.site-footer__brand img { width: 200px; margin-bottom: 1.25rem; height: auto; filter: brightness(0) invert(1); }
.site-footer__brand p { color: rgba(255,255,255,.7); max-width: 38ch; font-size: .95rem; line-height: 1.7; }
.site-footer__regions { color: #fff !important; }
.site-footer__social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.site-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.site-footer__social a svg { width: 17px; height: 17px; }
.site-footer__social a:hover {
    transform: translateY(-2px);
    border-color: transparent;
    background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
}
.site-footer__social a[aria-label*="LinkedIn"]:hover { background: #0A66C2; }
.site-footer h4 { color: #fff; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.2rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: .65rem; font-size: .95rem; }
.site-footer ul a { color: rgba(255,255,255,.78); transition: color .2s, padding .2s; display: inline-block; }
.site-footer ul a:hover { color: var(--c-teal-soft); padding-left: 3px; }
.site-footer__contact .lbl {
    display: block;
    font-family: var(--font-head);
    font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--c-teal-soft);
    margin-bottom: .2rem;
}
.site-footer__contact a { font-family: var(--font-head); font-weight: 500; }
.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.25rem 0;
    font-size: .85rem;
}
.site-footer__bottom-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
.site-footer__bottom p { margin: 0; color: rgba(255,255,255,.55); }
.site-footer__bottom .tagline { font-family: var(--font-head); color: var(--c-teal-soft); }
@media (max-width: 880px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem 2rem; }
}

/* -------------------- 19. Page header (inner pages) -------------------- */
.page-header {
    background:
      linear-gradient(135deg, rgba(22,30,80,.95) 0%, rgba(31,42,107,.86) 70%, rgba(32,161,154,.55) 100%),
      var(--c-navy-deep);
    color: #fff;
    padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(3.25rem, 6.5vw, 4.75rem);
    position: relative;
    overflow: hidden;
}
.page-header::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.5px);
    background-size: 28px 28px;
    opacity: .7;
}
.page-header__inner { position: relative; max-width: 800px; }
.page-header h1 { color: #fff; margin-bottom: .85rem; }
.page-header p { color: rgba(255,255,255,.85); font-size: clamp(1.05rem, 1.4vw, 1.18rem); max-width: 60ch; margin: 0; line-height: 1.65; }
.page-header__bar {
    width: 92px; height: 5px; border-radius: 3px;
    background: var(--grad-brand);
    margin-bottom: 1.5rem;
}

/* Brand-family banner — floats up into the page-header band so it reads as a
   deliberate hero visual rather than being jammed against it. */
.brand-family-section { padding-top: 0; }
.brand-family {
    margin: clamp(-4.5rem, -5vw, -2.5rem) 0 0;
    position: relative;
    z-index: 2;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(20, 25, 58, .22);
}
.brand-family img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) {
    .brand-family { margin-top: -2rem; }
}

/* -------------------- 20. Service / Industry / Category blocks -------------------- */
.service-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 2.25rem 1.85rem;
    border-top: 4px solid var(--c-navy);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-top-color .3s var(--ease);
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-top-color: var(--c-teal); }
.service-card__num {
    font-family: var(--font-head);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--c-teal);
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: -.025em;
}
.industry-card {
    background: var(--c-bg-alt);
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius);
    border-top: 4px solid var(--c-navy);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.industry-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.industry-card h4 { color: var(--c-navy); margin-bottom: .35rem; font-size: 1rem; }
.industry-card p { font-size: .88rem; color: var(--c-muted); margin: 0; line-height: 1.6; }
.industry-card__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* Careers — job filter bar */
.job-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 2rem;
}
.job-filters__field { display: flex; flex-direction: column; min-width: 200px; }
.job-filters__field label {
    font-family: var(--font-head);
    font-size: .75rem;
    font-weight: 600;
    color: var(--c-navy);
    margin-bottom: .4rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.job-filters__field select {
    padding: .75rem 2.75rem .75rem 1rem;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    font: inherit;
    color: var(--c-ink);
    background-color: #fff;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.job-filters__field select:focus {
    outline: none;
    border-color: var(--c-teal);
    box-shadow: 0 0 0 4px rgba(32,161,154,.12);
}
.job-filters__reset { padding: .7rem 1.1rem; font-size: .85rem; }
.job-filters__count {
    flex: 1 1 100%;
    margin: 0;
    font-size: .85rem;
    color: var(--c-muted);
}
.job-filters__empty { margin-top: .5rem; }
@media (max-width: 580px) {
    .job-filters__field { min-width: 0; flex: 1 1 100%; }
}

/* Category cards (Services page) — image at top */
.categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 980px) { .categories { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .categories { grid-template-columns: 1fr; } }

.category {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 0;
    display: flex; flex-direction: column;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.category:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(32,161,154,.28);
}
.category__image {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-mint);
}

/* Photo variant — when a real product photo is provided */
.category__image--photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
    display: block;
}
.category:hover .category__image--photo img { transform: scale(1.05); }
.category__image--photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(15,23,64,.18) 100%);
    pointer-events: none;
}

/* Icon variant — branded gradient with logo dot motif and a category icon */
.category__image--icon {
    background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 50%, var(--c-teal) 100%);
}
.category__image--icon::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23ffffff' opacity='.5'><circle cx='50' cy='6' r='2.6'/><circle cx='72' cy='11' r='2.6'/><circle cx='89' cy='28' r='2.6'/><circle cx='94' cy='50' r='2.6'/><circle cx='89' cy='72' r='2.6'/><circle cx='72' cy='89' r='2.6'/><circle cx='50' cy='94' r='2.6'/><circle cx='28' cy='89' r='2.6'/><circle cx='11' cy='72' r='2.6'/><circle cx='6' cy='50' r='2.6'/><circle cx='11' cy='28' r='2.6'/><circle cx='28' cy='11' r='2.6'/></g></svg>");
    background-size: 240px;
    background-position: 130% center;
    background-repeat: no-repeat;
    opacity: .14;
    pointer-events: none;
}
.category__image--icon::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 25% 80%, rgba(111,188,77,.18), transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(32,161,154,.22), transparent 55%);
    pointer-events: none;
}
.category__image--icon > svg {
    width: 64px; height: 64px;
    color: rgba(255,255,255,.95);
    position: relative; z-index: 2;
    transition: transform .4s var(--ease);
    stroke-width: 1.5;
    fill: none;
}
.category:hover .category__image--icon > svg {
    transform: scale(1.08);
}
.category__body { padding: 1.6rem 1.7rem 1.85rem; flex-grow: 1; }
.category__icon {
    /* When there is no image, the icon serves as the visual anchor */
    width: 50px; height: 50px;
    border-radius: 14px;
    background: var(--c-bg-mint);
    color: var(--c-teal);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1.1rem;
    transition: background .3s var(--ease), color .3s var(--ease);
}
.category:hover .category__icon { background: var(--grad-3); color: #fff; }
.category--has-image .category__icon { display: none; }
.category h3 { font-size: 1.18rem; margin-bottom: .4rem; line-height: 1.25; }
.category p { color: var(--c-muted); margin: 0; font-size: .94rem; line-height: 1.65; }

/* -------------------- 20a. Brand strip (scrolling logos) -------------------- */
.brand-strip-section {
    padding: clamp(3.25rem, 6vw, 4.75rem) 0;
}
.brand-strip-section .section-head { margin-bottom: 2.5rem; }

.brand-strip {
    overflow: hidden;
    position: relative;
    padding: 1.25rem 0;
}
.brand-strip__track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 4rem;
    animation: ebr-brand-strip 38s linear infinite;
    will-change: transform;
}
.brand-strip:hover .brand-strip__track { animation-play-state: paused; }

.brand-strip__item {
    flex-shrink: 0;
    height: 40px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 .75rem;
    opacity: 1;
    transition: transform .3s var(--ease);
}
.brand-strip__item:hover {
    transform: scale(1.12);
}
.brand-strip__item img {
    max-height: 30px;
    max-width: 140px;
    width: auto; height: auto;
    object-fit: contain;
}
.brand-strip__link { display: inline-flex; align-items: center; line-height: 0; }

/* Al Ayed is a two-line lockup (wordmark + "Industrial" subtitle), so the main
   word reads a touch smaller than a single-line logo at the same height — a
   small bump over the 44px default evens it out without dominating the row. */
.brand-card__logo img[src*="al-ayed-hoses"] { max-height: 52px; max-width: 82%; }
.brand-strip__item img[src*="al-ayed-hoses"] { max-height: 68px; max-width: 290px; }
/* Cello is a compact square tile and Marki has generous artwork whitespace, so
   both read small at the 44px default — size them up to match the other cards. */
.brand-card__logo img[src*="cello"] { max-height: 56px; max-width: 90%; }
.brand-card__logo img[src*="marki"] { max-height: 60px; max-width: 92%; }
/* Same compensation in the scrolling home strip. */
.brand-strip__item img[src*="cello"] { max-height: 40px; }
.brand-strip__item img[src*="marki"] { max-height: 48px; max-width: 180px; }
/* Al Ayed is enlarged and wide, so it crowds the next logo at the loop seam —
   add breathing room on its trailing side only. */
.brand-strip__item:has(img[src*="al-ayed-hoses"]) { margin-right: 3rem; }

/* Edge fades — match the section background so logos feather in/out */
.brand-strip::before,
.brand-strip::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.brand-strip::before { left: 0; background: linear-gradient(90deg, var(--c-bg) 0%, transparent 100%); }
.brand-strip::after  { right: 0; background: linear-gradient(-90deg, var(--c-bg) 0%, transparent 100%); }
.section--alt .brand-strip::before { background: linear-gradient(90deg, var(--c-bg-alt) 0%, transparent 100%); }
.section--alt .brand-strip::after  { background: linear-gradient(-90deg, var(--c-bg-alt) 0%, transparent 100%); }
.section--mint .brand-strip::before { background: linear-gradient(90deg, var(--c-bg-mint) 0%, transparent 100%); }
.section--mint .brand-strip::after  { background: linear-gradient(-90deg, var(--c-bg-mint) 0%, transparent 100%); }

@keyframes ebr-brand-strip {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .brand-strip__track { animation: none; }
    .brand-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 720px) {
    .brand-strip__track { gap: 2rem; animation-duration: 28s; }
    .brand-strip__item { height: 34px; padding: 0 .4rem; }
    .brand-strip__item img { max-height: 24px; max-width: 110px; }
    .brand-strip__item img[src*="al-ayed-hoses"] { max-height: 52px; max-width: 210px; }
    .brand-strip::before, .brand-strip::after { width: 60px; }
}

/* -------------------- 21. Light scroll fade-in -------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--delay, 0ms);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* -------------------- 22b. Interactive: 3D tilt -------------------- */
[data-tilt] {
    will-change: transform;
    transform-style: preserve-3d;
}

/* -------------------- 22c. Interactive: brand-card hover reveal -------------------- */
.brand-card {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    justify-content: center;
}
/* The social row is absolutely positioned (top .85rem, 34px tall), so cards
   that have one need padding to keep a wide logo from running into it.
   Padding rather than a margin on the logo — content is centred, so a margin
   would only shift it by half. */
.brand-card:has(.brand-card__social) { padding-top: 3.5rem; }
.brand-card__reveal {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.4rem 1.5rem 1.6rem;
    background: linear-gradient(160deg, rgba(32,161,154,.96), rgba(31,42,107,.96));
    transform: translateY(101%);
    opacity: 0;
    transition: transform .42s var(--ease), opacity .42s var(--ease);
    pointer-events: none;
}
.brand-card__reveal p {
    color: #fff;
    font-size: .92rem;
    line-height: 1.6;
    margin: 0;
}
.brand-card:hover .brand-card__reveal,
.brand-card:focus-within .brand-card__reveal {
    transform: translateY(0);
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .brand-card__reveal { transition: none; }
}

/* -------------------- 22d. Interactive: category showcase -------------------- */
.showcase {
    display: grid;
    grid-template-columns: .85fr 1.35fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: stretch;
}
.showcase__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
}
.showcase__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.05rem 1.1rem;
    background: transparent;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    color: var(--c-navy);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    letter-spacing: -.01em;
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.showcase__num {
    font-size: .8rem;
    font-weight: 700;
    color: var(--c-teal);
    opacity: .8;
    min-width: 1.75rem;
}
.showcase__label { flex: 1; }
.showcase__arrow {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.showcase__btn:hover,
.showcase__btn.is-active {
    background: var(--c-bg-mint);
    transform: translateX(4px);
}
.showcase__btn.is-active { color: var(--c-teal); }
.showcase__btn.is-active .showcase__num { opacity: 1; }
.showcase__btn:hover .showcase__arrow,
.showcase__btn.is-active .showcase__arrow {
    opacity: 1;
    transform: translateX(0);
}
.showcase__stage {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: clamp(320px, 40vw, 470px);
    box-shadow: 0 18px 45px rgba(22, 30, 80, .16);
    background: var(--c-bg-alt);
}
.showcase__panel {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .6s var(--ease), transform .8s var(--ease);
    pointer-events: none;
}
.showcase__panel.is-active {
    opacity: 1;
    transform: scale(1);
}
.showcase__panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.showcase__cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.5rem 1.75rem 1.5rem;
    background: linear-gradient(to top, rgba(15, 20, 55, .88) 0%, rgba(15, 20, 55, .45) 55%, transparent 100%);
    color: #fff;
    transform: translateY(12px);
    opacity: 0;
    transition: opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s;
}
.showcase__panel.is-active .showcase__cap {
    transform: translateY(0);
    opacity: 1;
}
.showcase__cap h3 {
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    margin: 0 0 .35rem;
}
.showcase__cap p {
    color: rgba(255,255,255,.85);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0;
    max-width: 46ch;
}
@media (max-width: 760px) {
    .showcase { grid-template-columns: 1fr; }
    .showcase__list { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .showcase__btn { width: auto; padding: .6rem .9rem; font-size: .95rem; }
    .showcase__arrow, .showcase__num { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .showcase__panel, .showcase__cap { transition: none; }
}

/* -------------------- 22e. Interactive: expanding accordion -------------------- */
/* Horizontal panels that open on hover/focus/tap. Only the open panel shows its
   copy, so it stays text-light — and the shape is deliberately different from the
   list+stage showcase so the two interactive sections don't read as twins. */
.accordion {
    display: flex;
    gap: .6rem;
    height: clamp(360px, 46vw, 460px);
}
.accordion__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    transition: flex-grow .55s var(--ease), background .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
    outline: none;
}
.accordion__item:not(.is-active):hover,
.accordion__item:not(.is-active):focus-visible { background: var(--c-bg-mint); }
.accordion__item.is-active {
    flex-grow: 4.4;
    border-color: transparent;
    box-shadow: 0 18px 45px rgba(22, 30, 80, .18);
    background:
      radial-gradient(circle at 82% 14%, rgba(32,161,154,.42) 0%, transparent 55%),
      linear-gradient(150deg, var(--c-navy-deep) 0%, var(--c-navy) 60%, var(--c-navy-soft) 100%);
}
.accordion__num {
    position: absolute;
    top: 1.3rem; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .85rem;
    color: var(--c-teal);
    transition: color .45s var(--ease), left .45s var(--ease), transform .45s var(--ease), opacity .45s var(--ease);
}
.accordion__item.is-active .accordion__num {
    left: clamp(1.5rem, 3vw, 2.5rem);
    transform: none;
    color: #fff;
    opacity: .65;
}
.accordion__title {
    position: absolute;
    bottom: 1.6rem; left: 50%;
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(.95rem, 1.3vw, 1.15rem);
    letter-spacing: -.01em;
    color: var(--c-navy);
    white-space: nowrap;
    transition: opacity .3s var(--ease);
}
.accordion__item.is-active .accordion__title { opacity: 0; }
.accordion__panel {
    position: absolute;
    left: clamp(1.5rem, 3vw, 2.5rem);
    right: clamp(1.5rem, 3vw, 2.5rem);
    bottom: clamp(1.75rem, 3vw, 2.5rem);
    max-width: 360px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s var(--ease) .14s, transform .5s var(--ease) .14s;
    pointer-events: none;
}
.accordion__item.is-active .accordion__panel { opacity: 1; transform: none; }
.accordion__icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-green) 100%);
    box-shadow: 0 12px 30px rgba(32,161,154,.35);
    margin-bottom: 1.1rem;
}
.accordion__icon svg { width: 28px; height: 28px; }
.accordion__panel h3 {
    color: #fff;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    margin: 0 0 .5rem;
    letter-spacing: -.02em;
}
.accordion__panel p {
    color: rgba(255,255,255,.84);
    font-size: .98rem;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 760px) {
    .accordion { flex-direction: column; height: auto; }
    .accordion__item { flex: none; min-height: 66px; }
    .accordion__item.is-active { min-height: 250px; }
    .accordion__num { top: 1.35rem; left: 1.4rem; transform: none; }
    .accordion__item.is-active .accordion__num { left: 1.4rem; }
    .accordion__title {
        writing-mode: horizontal-tb;
        transform: none;
        top: 1.2rem; bottom: auto;
        left: 3.6rem;
    }
    .accordion__panel { left: 1.5rem; right: 1.5rem; bottom: 1.6rem; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .accordion__item, .accordion__num, .accordion__title, .accordion__panel { transition: none; }
}

/* Scroll progress bar (under the sticky header) */
.scroll-progress {
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    pointer-events: none;
}
.scroll-progress__bar {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* Stat counters give a tiny pop when they finish counting */
.stats__num.is-counted { animation: countPop .4s var(--ease); }
@keyframes countPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .stats__num.is-counted { animation: none; }
}

/* -------------------- 22e. Interactive: footprint map -------------------- */
.footprint {
    display: grid;
    grid-template-columns: 1.35fr .95fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.footprint__map {
    position: relative;
    background:
      radial-gradient(circle at 50% 50%, rgba(32,161,154,.16), transparent 62%),
      linear-gradient(155deg, var(--c-navy-deep) 0%, #131a47 55%, #0f1438 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.footprint__map svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Affordance hint so the map reads as interactive */
.footprint__hint {
    position: absolute; left: 1.5rem; bottom: 1.15rem;
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-head); font-size: .72rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
    pointer-events: none;
}
.footprint__hint-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--c-teal-soft);
    box-shadow: 0 0 0 0 rgba(61,193,180,.5);
    animation: footprintHintDot 2s var(--ease) infinite;
}
@keyframes footprintHintDot {
    0%   { box-shadow: 0 0 0 0 rgba(61,193,180,.5); }
    70%  { box-shadow: 0 0 0 7px rgba(61,193,180,0); }
    100% { box-shadow: 0 0 0 0 rgba(61,193,180,0); }
}

.footprint__grid line { stroke: rgba(255,255,255,.06); stroke-width: 1; }

.footprint__link {
    stroke-dasharray: 5 6;
    opacity: .35;
    animation: footprintFlow 1.2s linear infinite;
    transition: stroke-width .3s var(--ease), opacity .3s var(--ease);
}
@keyframes footprintFlow { to { stroke-dashoffset: -22; } }
.footprint__link.is-active { opacity: .9; stroke-width: 2.6; }

/* Data packets travelling along each route */
.footprint__packet {
    fill: #fff;
    filter: drop-shadow(0 0 5px rgba(61,193,180,.9));
}

.footprint__node { cursor: pointer; }
.footprint__node:focus { outline: none; }
.footprint__halo { fill: rgba(32,161,154,.16); transition: fill .3s var(--ease); }
.footprint__node.is-active .footprint__halo { fill: rgba(61,193,180,.3); }
.footprint__dot {
    fill: #fff;
    filter: drop-shadow(0 0 6px rgba(32,161,154,.55));
    transition: fill .3s var(--ease);
}
.footprint__node.is-active .footprint__dot { fill: var(--c-teal-soft); }
.footprint__ring {
    fill: none; stroke: var(--c-teal-soft); stroke-width: 1.5;
    opacity: .28;
    transform-box: fill-box; transform-origin: center;
    /* Every node pulses gently and equally, signalling it's interactive. */
    animation: footprintIdle 2.8s ease-in-out infinite;
}
@keyframes footprintIdle {
    0%, 100% { transform: scale(.82); opacity: .14; }
    50%      { transform: scale(1.06); opacity: .42; }
}
.footprint__node:hover .footprint__ring,
.footprint__node.is-active .footprint__ring,
.footprint__node:focus-visible .footprint__ring {
    opacity: .7;
    animation: ebr-pulse 2s var(--ease) infinite;
}
.footprint__node:hover .footprint__dot { fill: var(--c-teal-soft); }
.footprint__pinlabel {
    fill: rgba(255,255,255,.6); font-family: var(--font-head); font-weight: 600;
    font-size: 13px;
    transition: opacity .3s var(--ease), fill .3s var(--ease);
}
.footprint__node.is-active .footprint__pinlabel { fill: #fff; }
.footprint__info { position: relative; }
.footprint__cards { position: relative; min-height: 190px; }
.footprint__card {
    position: absolute; inset: 0;
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.footprint__card.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* Prev / next navigation */
.footprint__nav {
    display: flex; align-items: center; gap: 1rem;
    margin-top: 1.5rem;
}
.footprint__navbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: #fff; color: var(--c-navy);
    cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), transform .25s var(--ease);
}
.footprint__navbtn svg { width: 20px; height: 20px; }
.footprint__navbtn:hover {
    background: var(--c-teal); color: #fff; border-color: var(--c-teal);
    transform: translateY(-2px);
}
.footprint__navbtn:focus-visible {
    outline: 2px solid var(--c-teal); outline-offset: 2px;
}
.footprint__nav-count {
    font-family: var(--font-head); font-weight: 600;
    font-size: .82rem; letter-spacing: .08em;
    color: var(--c-muted); min-width: 3ch; text-align: center;
}
.footprint__role {
    font-family: var(--font-head); font-size: .78rem; font-weight: 600;
    color: var(--c-teal); letter-spacing: .1em; text-transform: uppercase;
}
.footprint__card h3 {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: .35rem 0 .6rem;
    color: var(--c-navy); letter-spacing: -.02em;
}
.footprint__card p { color: var(--c-muted); line-height: 1.65; margin: 0; max-width: 42ch; }
@media (max-width: 760px) {
    .footprint { grid-template-columns: 1fr; }
    /* Map is decorative on mobile (cards stacked below) — no hover to hint at,
       and every card is already visible so prev/next isn't needed. */
    .footprint__hint,
    .footprint__nav { display: none; }
    /* Mobile: the map is decorative — show every market card stacked so the
       info never depends on hovering/tapping tiny SVG nodes. */
    .footprint__cards {
        min-height: 0;
        margin-top: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .footprint__card {
        position: static;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        background: #fff;
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        padding: 1.25rem 1.35rem;
        box-shadow: var(--shadow-sm);
    }
    .footprint__card p { max-width: none; }
    /* Larger pin labels so they stay legible when the SVG scales down */
    .footprint__pinlabel { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .footprint__link { animation: none; }
    .footprint__packet { display: none; }
    .footprint__ring { animation: none; opacity: .35; }
    .footprint__hint-dot { animation: none; }
    .footprint__node.is-active .footprint__ring { animation: none; }
    .footprint__card { transition: none; }
}

/* -------------------- 22e2. Scroll scene: sourcing → shelf -------------------- */
/* The section is tall; the inner layer sticks while you scroll, and JS sets
   --p (0 → 1) to scrub the first image into the end image. */
.scrollscene {
    --p: 0;
    position: relative;
    height: 240vh;                 /* scroll runway — more height = slower scrub */
    background: var(--c-navy-deep);
}
.scrollscene__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-navy-deep); /* fallback before images load */
}
.scrollscene__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    will-change: opacity, transform;
}
.scrollscene__img--first {
    opacity: calc(1 - var(--p));
    transform: scale(calc(1 + var(--p) * 0.14));
}
.scrollscene__img--end {
    opacity: var(--p);
    transform: scale(calc(1.14 - var(--p) * 0.14));
}
.scrollscene__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,20,56,.55) 0%, rgba(15,20,56,.25) 45%, rgba(15,20,56,.7) 100%);
}
.scrollscene__content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding: 0 1.5rem;
    max-width: 760px;
}
.scrollscene__title {
    color: #fff;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    line-height: 1.05;
    margin: .6rem 0 1rem;
}
.scrollscene__word { display: block; transition: opacity .3s var(--ease); }
.scrollscene__word--first { opacity: calc(1 - var(--p)); }
.scrollscene__word--end   { opacity: var(--p); color: var(--c-teal-soft); }
.scrollscene__sub {
    color: rgba(255,255,255,.85);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 48ch;
}
/* No scroll-scrub (reduced motion, or JS adds .is-static): collapse to a
   normal banner showing the finished "shelf" state. */
.scrollscene.is-static { height: auto; }
.scrollscene.is-static .scrollscene__sticky { position: relative; height: clamp(420px, 70vh, 640px); }
.scrollscene.is-static .scrollscene__img--first { opacity: 0; }
.scrollscene.is-static .scrollscene__img--end { opacity: 1; transform: none; }
.scrollscene.is-static .scrollscene__word--first { display: none; }
.scrollscene.is-static .scrollscene__word--end { opacity: 1; }
@media (max-width: 600px) {
    .scrollscene { height: 200vh; }
}

/* -------------------- 22f. Interactive: process steps -------------------- */
.process {
    list-style: none; margin: 2.5rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    position: relative;
}
.process::before {
    content: ""; position: absolute;
    top: 60px; left: 12%; right: 12%; height: 2px;
    background-image: linear-gradient(90deg, var(--c-teal) 50%, transparent 50%);
    background-size: 14px 2px;
    animation: timelineFlow 1s linear infinite;
    opacity: .5; z-index: 0;
}
.process__step {
    position: relative; z-index: 1; text-align: center;
    display: flex; flex-direction: column; align-items: center;
    transition: transform .3s var(--ease);
}
.process__step:hover { transform: translateY(-5px); }
.process__num {
    font-family: var(--font-head); font-weight: 700; font-size: .8rem;
    color: var(--c-teal); letter-spacing: .1em; margin-bottom: .7rem;
}
.process__icon {
    width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--c-border);
    color: var(--c-teal); margin-bottom: 1.1rem;
    box-shadow: 0 0 0 6px var(--c-bg-alt), var(--shadow-sm);
    transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.process__icon svg { width: 28px; height: 28px; }
.process__step:hover .process__icon {
    background: var(--grad-4); color: #fff;
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 0 0 6px var(--c-bg-alt), 0 12px 24px rgba(32,161,154,.32);
}
.process__step h3 { font-size: 1.15rem; margin: 0 0 .4rem; color: var(--c-navy); letter-spacing: -.01em; }
.process__step p { color: var(--c-muted); font-size: .9rem; line-height: 1.55; margin: 0; max-width: 24ch; }
@media (max-width: 820px) {
    .process { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.25rem; }
    .process::before { display: none; }
}
@media (max-width: 460px) { .process { grid-template-columns: 1fr; } }

/* -------------------- 22g. Timeline scroll-progress fill -------------------- */
.timeline__progress {
    position: absolute;
    left: 8.5%; top: 25px; height: 4px; width: 83%;
    background: var(--grad-brand);
    border-radius: 3px;
    transform: scaleX(var(--tl-progress, 0));
    transform-origin: left center;
    box-shadow: 0 0 12px rgba(32,161,154,.5);
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 900px) { .timeline__progress { display: none; } }
@media (prefers-reduced-motion: reduce) { .timeline__progress { transform: scaleX(1); } }

/* -------------------- 22. Misc utilities -------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }
.flex-center { display: flex; align-items: center; justify-content: center; }

/* -------------------- 24. Gallery -------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}
.gallery-card {
    display: flex;
    flex-direction: column;
}
.gallery-card__trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.gallery-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--c-bg-alt);
}
.gallery-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
}
.gallery-card__trigger:hover .gallery-card__media img,
.gallery-card__trigger:focus-visible .gallery-card__media img { transform: scale(1.06); }
.gallery-card__badge {
    position: absolute; top: .75rem; right: .75rem;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: rgba(22,30,80,.72);
    color: #fff;
    font-family: var(--font-head); font-weight: 600; font-size: .78rem;
    backdrop-filter: blur(4px);
}
.gallery-card__badge svg { width: 14px; height: 14px; }
/* Hover overlay: caption snippet + read-more */
.gallery-card__overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: .75rem;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(15,20,56,.92) 0%, rgba(15,20,56,.55) 45%, rgba(15,20,56,0) 100%);
    opacity: 0;
    transition: opacity .35s var(--ease);
    text-align: left;
}
.gallery-card__trigger:hover .gallery-card__overlay,
.gallery-card__trigger:focus-visible .gallery-card__overlay { opacity: 1; }
.gallery-card__excerpt {
    color: rgba(255,255,255,.92);
    font-size: .92rem; line-height: 1.5;
    transform: translateY(8px);
    transition: transform .35s var(--ease);
}
.gallery-card__more {
    display: inline-flex; align-items: center; gap: .45rem;
    align-self: flex-start;
    font-family: var(--font-head); font-weight: 600; font-size: .9rem;
    color: #fff;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: var(--c-teal);
    transform: translateY(8px);
    transition: transform .35s var(--ease), background .25s var(--ease);
}
.gallery-card__more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.gallery-card__trigger:hover .gallery-card__excerpt,
.gallery-card__trigger:hover .gallery-card__more,
.gallery-card__trigger:focus-visible .gallery-card__excerpt,
.gallery-card__trigger:focus-visible .gallery-card__more { transform: none; }
.gallery-card__trigger:hover .gallery-card__more { background: var(--c-teal-soft); }
.gallery-card__trigger:hover .gallery-card__more svg { transform: translateX(3px); }
.gallery-card__meta { padding: 1rem .25rem 0; }
.gallery-card__date {
    font-family: var(--font-head); font-size: .76rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-teal);
}
.gallery-card__title {
    font-size: 1.15rem; margin: .3rem 0 0;
    color: var(--c-navy); letter-spacing: -.01em; line-height: 1.3;
}

/* Gallery modal / lightbox */
.gallery-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem);
}
.gallery-modal[hidden] { display: none; }
.gallery-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(12,16,44,.72);
    backdrop-filter: blur(4px);
    animation: galleryFade .25s var(--ease);
}
.gallery-modal__dialog {
    position: relative;
    width: min(960px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--c-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: galleryPop .3s var(--ease);
}
@keyframes galleryFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes galleryPop {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.gallery-modal__close {
    position: absolute; top: .9rem; right: .9rem; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: var(--c-navy);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.gallery-modal__close svg { width: 20px; height: 20px; }
.gallery-modal__close:hover { background: #fff; transform: rotate(90deg); }
.gallery-modal__close:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; }

.gallery-detail__media { display: grid; gap: .5rem; background: var(--c-navy-deep); }
.gallery-detail__media--single { grid-template-columns: 1fr; }
.gallery-detail__media--duo { grid-template-columns: 1fr 1fr; }
.gallery-detail__media--grid { grid-template-columns: 1fr 1fr; }
.gallery-detail__figure { margin: 0; overflow: hidden; }
.gallery-detail__media--single .gallery-detail__figure { aspect-ratio: 16 / 9; }
.gallery-detail__media--duo .gallery-detail__figure,
.gallery-detail__media--grid .gallery-detail__figure { aspect-ratio: 4 / 3; }
.gallery-detail__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-detail__text { padding: clamp(1.5rem, 3vw, 2.25rem); }
.gallery-detail__date {
    font-family: var(--font-head); font-size: .78rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--c-teal);
}
.gallery-detail__title {
    font-size: clamp(1.5rem, 3vw, 2rem); margin: .4rem 0 .8rem;
    color: var(--c-navy); letter-spacing: -.02em;
}
.gallery-detail__caption { color: var(--c-muted); line-height: 1.7; margin: 0; text-align: left; }
.gallery-detail__caption p { margin: 0 0 1em; text-align: left; color: inherit; line-height: inherit; }
.gallery-detail__caption p:last-child { margin-bottom: 0; }

body.gallery-open { overflow: hidden; }

/* Job details modal (Careers page — "View Details") */
.job-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem);
}
.job-modal[hidden] { display: none; }
.job-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(12,16,44,.72);
    backdrop-filter: blur(4px);
    animation: galleryFade .25s var(--ease);
}
.job-modal__dialog {
    position: relative;
    width: min(680px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--c-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: galleryPop .3s var(--ease);
    padding: clamp(1.75rem, 4vw, 2.75rem);
}
.job-modal__close {
    position: absolute; top: .9rem; right: .9rem; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: var(--c-bg-alt);
    color: var(--c-navy);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.job-modal__close svg { width: 20px; height: 20px; }
.job-modal__close:hover { background: var(--c-bg-mint); transform: rotate(90deg); }
.job-modal__close:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; }

.job-modal__head { padding-right: 2.5rem; margin-bottom: 1.25rem; }
.job-modal__head h3 { color: var(--c-navy); margin: 0 0 .4rem; }
.job-modal__meta {
    font-family: var(--font-head); font-weight: 600; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--c-teal); margin: 0;
}
.job-modal__desc h4 {
    color: var(--c-navy); font-size: .98rem; margin: 1.5rem 0 .5rem;
}
.job-modal__desc h4:first-child { margin-top: 0; }
.job-modal__desc p { color: var(--c-text); line-height: 1.7; margin: 0 0 .9rem; }
.job-modal__desc .checklist li { font-size: .95rem; padding: .55rem 0 .55rem 2.1rem; }
.job-modal__apply {
    margin-top: 1.75rem; padding-top: 1.5rem;
    border-top: 1px solid var(--c-border);
}
.job-modal__apply h4 { color: var(--c-navy); font-size: .98rem; margin: 0 0 .6rem; }
.job-modal__apply p { color: var(--c-muted); line-height: 1.6; margin: 0 0 1.1rem; }
.job-modal__subject { display: inline-block; margin-top: .25rem; font-size: .88rem; }
.job-modal__apply-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

body.job-modal-open { overflow: hidden; }
@media (max-width: 560px) {
    .job-modal__dialog { padding: 1.5rem; }
}

@media (max-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .gallery-grid { grid-template-columns: 1fr; }
    /* Touch devices can't hover — keep the overlay visible so the CTA is reachable. */
    .gallery-card__overlay { opacity: 1; background: linear-gradient(to top, rgba(15,20,56,.9) 0%, rgba(15,20,56,.35) 55%, rgba(15,20,56,0) 100%); }
    .gallery-card__excerpt, .gallery-card__more { transform: none; }
    .gallery-detail__media--duo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-card__media img,
    .gallery-card__overlay,
    .gallery-card__excerpt,
    .gallery-card__more,
    .gallery-modal__overlay,
    .gallery-modal__dialog { animation: none; transition: none; }
}

/* -------------------- 25. WhatsApp enquiry widget -------------------- */
:root { --wa-green: #25D366; --wa-green-dk: #128C7E; }
.wa-widget {
    position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 300;
    font-family: var(--font-body, inherit);
}
.wa-widget__launcher {
    position: relative;
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: var(--wa-green); color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(18,140,126,.4), 0 2px 6px rgba(0,0,0,.15);
    transition: transform .25s var(--ease), background .25s var(--ease);
    margin-left: auto;
}
.wa-widget__launcher:hover { background: var(--wa-green-dk); transform: scale(1.06); }
.wa-widget__launcher:focus-visible { outline: 3px solid rgba(37,211,102,.5); outline-offset: 3px; }
.wa-widget.is-open .wa-widget__launcher { transform: scale(.9); opacity: .85; }
.wa-widget__pulse {
    position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37,211,102,.55);
    animation: waPulse 2.4s var(--ease) infinite;
}
@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
    70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Nudge bubble */
.wa-widget__nudge {
    position: absolute; right: 0; bottom: 74px;
    width: min(280px, 76vw);
    background: #fff; color: var(--c-navy);
    border-radius: 16px 16px 4px 16px;
    box-shadow: var(--shadow);
    padding: .35rem;
    animation: waNudgeIn .35s var(--ease);
}
@keyframes waNudgeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wa-widget__nudge-body {
    display: block; width: 100%; text-align: left;
    border: 0; background: none; cursor: pointer;
    padding: .75rem .9rem; border-radius: 12px;
    transition: background .2s var(--ease);
}
.wa-widget__nudge-body:hover { background: var(--c-bg-alt); }
.wa-widget__nudge-title { display: block; font-family: var(--font-head); font-weight: 700; font-size: .95rem; margin-bottom: .15rem; }
.wa-widget__nudge-text { display: block; font-size: .84rem; color: var(--c-muted); line-height: 1.45; }
.wa-widget__nudge-close {
    position: absolute; top: -8px; right: -8px;
    width: 24px; height: 24px; border-radius: 50%;
    border: 0; background: var(--c-navy); color: #fff;
    font-size: 15px; line-height: 1; cursor: pointer;
    box-shadow: var(--shadow-sm);
}

/* Chat panel */
.wa-widget__panel {
    position: absolute; right: 0; bottom: 74px;
    width: min(360px, 90vw);
    max-height: min(560px, 76vh);
    display: flex; flex-direction: column;
    background: #ECE5DD;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 18px 50px rgba(20,25,58,.28);
    animation: waPanelIn .3s var(--ease);
}
/* The class rule above sets display:flex, which would override the HTML
   `hidden` attribute — restore it so close/open actually toggle visibility. */
.wa-widget__panel[hidden],
.wa-widget__nudge[hidden] { display: none; }
@keyframes waPanelIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.wa-widget__header {
    display: flex; align-items: center; gap: .65rem;
    padding: .85rem 1rem;
    background: var(--wa-green-dk); color: #fff;
}
.wa-widget__avatar {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.18); border-radius: 50%;
}
.wa-widget__heading { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.wa-widget__heading strong { font-family: var(--font-head); font-size: .98rem; }
.wa-widget__heading small { font-size: .74rem; opacity: .85; }
.wa-widget__close,
.wa-widget__restart {
    border: 0; background: none; color: #fff; cursor: pointer;
    display: inline-flex; padding: .25rem; border-radius: 6px;
    transition: background .2s var(--ease);
}
.wa-widget__close:hover,
.wa-widget__restart:hover { background: rgba(255,255,255,.15); }
/* [hidden] needs the explicit rule to beat the display above */
.wa-widget__restart[hidden] { display: none; }
.wa-widget__restart { opacity: .85; margin-right: -.35rem; }
.wa-widget__body {
    flex: 1; overflow-y: auto;
    padding: 1rem .85rem;
    display: flex; flex-direction: column; gap: .5rem;
    background-color: #ECE5DD;
    background-image: radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
    background-size: 18px 18px;
}
.wa-widget__foot { text-align: center; padding: .5rem; background: #f4efe9; }
.wa-widget__foot small { color: var(--c-muted); font-size: .7rem; }

/* Chat bubbles */
.wa-msg {
    max-width: 85%;
    padding: .6rem .8rem;
    border-radius: 12px;
    font-size: .88rem; line-height: 1.5;
    box-shadow: 0 1px 1px rgba(0,0,0,.06);
    animation: waMsgIn .25s var(--ease);
}
@keyframes waMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wa-msg--bot { align-self: flex-start; background: #fff; color: #111b21; border-top-left-radius: 3px; }
.wa-msg--user { align-self: flex-end; background: #D9FDD3; color: #111b21; border-top-right-radius: 3px; }
.wa-msg a.wa-cta { color: inherit; }

/* Choice chips */
.wa-choices { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; max-width: 90%; }
.wa-choice {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem .9rem;
    border: 1px solid var(--wa-green-dk);
    background: #fff; color: var(--wa-green-dk);
    border-radius: 999px; cursor: pointer;
    font-size: .86rem; font-weight: 600; font-family: var(--font-head);
    transition: background .2s var(--ease), color .2s var(--ease);
    text-align: left;
}
.wa-choice:hover { background: var(--wa-green-dk); color: #fff; }
.wa-flag { font-size: 1.05rem; }

/* Detail form */
.wa-form { align-self: stretch; display: flex; flex-direction: column; gap: .55rem; background: #fff; padding: .85rem; border-radius: 12px; border-top-left-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.wa-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .76rem; font-weight: 600; color: var(--c-navy); }
.wa-form input {
    padding: .55rem .65rem; font-size: .88rem;
    border: 1px solid var(--c-border); border-radius: 8px;
    background: var(--c-bg-alt); color: var(--c-text, #222); font-weight: 400;
}
.wa-form input:focus { outline: none; border-color: var(--wa-green-dk); background: #fff; }
.wa-form__submit {
    margin-top: .25rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .7rem 1rem;
    border: 0; border-radius: 999px;
    background: var(--wa-green); color: #fff;
    font-family: var(--font-head); font-weight: 600; font-size: .9rem;
    cursor: pointer;
    transition: background .2s var(--ease);
}
.wa-form__submit:hover { background: var(--wa-green-dk); }

/* Final WhatsApp CTA button */
.wa-cta {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: .55rem;
    padding: .6rem 1rem;
    background: var(--wa-green); color: #fff !important;
    border-radius: 999px;
    font-family: var(--font-head); font-weight: 700; font-size: .88rem;
    box-shadow: 0 4px 12px rgba(37,211,102,.35);
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.wa-cta:hover { background: var(--wa-green-dk); transform: translateY(-1px); }

@media (max-width: 420px) {
    .wa-widget__panel { width: 92vw; right: -4px; }
    .wa-widget__nudge { width: 78vw; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-widget__pulse, .wa-widget__panel, .wa-msg, .wa-widget__nudge { animation: none; }
}

/* Print niceties */
@media print {
    .site-header, .site-footer, .footer-cta, .nav-toggle, .wa-widget { display: none !important; }
}