/* ═══════════════════════════════════════════════
   SAMAHAT TAIBAH GROUP — Colorblind-safe green × amber theme
   ═══════════════════════════════════════════════
   Why this palette
   ────────────────
   The brand keeps its green, but the palette is chosen so the two
   brand colours never have to be told apart by HUE alone.

   Measured under CIEDE2000 with the Viénot (1999) deficiency models:
   the original green #1e5941 + gold #b08d46 pair collapsed to ΔE00 22.7
   under protanopia — and its HUE difference (ΔH*) fell to 1.0, i.e. gone.
   Protanopes saw one muddy olive/brown tone. Protan and deutan viewers
   also perceived that deep green as near-black, so the brand colour
   disappeared for them entirely.

   This theme therefore separates the two brand colours by LIGHTNESS and
   CHROMA, which colour vision deficiency preserves, rather than by hue:
     · PRIMARY = very dark forest green  (dark end of the scale)
     · ACCENT  = bright amber            (light end of the scale)
   A very dark green against a bright amber keeps a large lightness gap
   (ΔL* ≈ 40 under protanopia) instead of a hue gap that would vanish.

   Because hue carries no information here, every element that MEANS
   something also carries a second, non-colour cue:
     · Active vs Exploring sectors → solid vs DASHED top rule + ✓ / ◇
     · Form errors → ⚠ text + a thick left edge on the field
   Contrast targets: body text ≥ 4.5:1, large text and UI edges ≥ 3:1
   (WCAG 2.1 AA). The official crest keeps its own artwork colours.
   ═══════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* warm neutrals — the company profile's dark green / gold / neutral range */
    --bg: #faf9f5; --bg-alt: #f1efe7; --surface: #ffffff;
    --text: #131a16; --text-2: #3b4640; --text-3: #586058; --text-inv: #ffffff;

    /* primary — very dark forest green (the dark end of the scale) */
    --primary: #1b5c43;
    --primary-d: #0b2a20;
    --primary-l: #2f7d5c;
    --primary-50: #e9f2ee;

    /* accent — bright amber (the light end); --accent-ink is the readable text weight */
    --accent: #c98a1f;
    --accent-d: #b7791f;        /* amber for graphics/edges ON LIGHT backgrounds (3:1+) */
    --accent-l: #eeb050;
    --accent-ink: #7a4e0a;
    --accent-50: #fdf5e6;

    /* status */
    --danger: #ffb4a2;          /* readable on the dark contact panel */
    --focus: #2f7d5c;

    --border: #ded8cb; --border-light: #eae5d9;
    --r: 16px; --r-sm: 10px;
    --sh-1: 0 1px 3px rgba(11, 42, 32, 0.05);
    --sh-2: 0 4px 20px rgba(11, 42, 32, 0.08);
    --sh-3: 0 12px 40px rgba(11, 42, 32, 0.12);
    --sh-glow: 0 0 40px rgba(27, 92, 67, 0.15);
    --hero-gradient: linear-gradient(135deg, #061a13 0%, #0b2a20 45%, #10402f 100%);
}

html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg); color: var(--text); line-height: 1.65;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
section[id] { scroll-margin-top: 92px; }
img { max-width: 100%; }
a { color: inherit; }

/* Visible keyboard focus — a 3:1 indicator on both light and dark panels */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* on the dark green panels the dark green ring disappears, so switch to amber */
.hero :focus-visible, .quote-band :focus-visible,
.contact-section :focus-visible, footer :focus-visible { outline-color: var(--accent-l); }

/* ════════ NAV ════════ */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 999;
    transition: all .35s cubic-bezier(.4, 0, .2, 1);
}
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-light); box-shadow: var(--sh-1);
}
.nav-inner {
    max-width: 1320px; margin: 0 auto; padding: 0 2rem;
    display: flex; align-items: center; height: 72px; gap: 1.25rem;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
.brand img {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--accent); background: var(--surface);
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand-txt .b-name { font-size: .95rem; font-weight: 800; letter-spacing: .3px; color: var(--primary-d); }
.brand-txt .b-sub { font-size: .62rem; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-3); }

.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-link {
    border: none; background: transparent; padding: .5rem .9rem;
    border-radius: 100px; color: var(--text-3); font-size: .83rem; font-weight: 500;
    cursor: pointer; transition: all .2s; position:relative; text-decoration: none;
    white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: var(--primary-50); }
.navbar.scrolled .nav-link.active { color: #fff; background: var(--primary); }

/* transparent navbar over dark hero → light text */
.navbar:not(.scrolled) .brand-txt .b-name { color: #fff; }
.navbar:not(.scrolled) .brand-txt .b-sub { color: rgba(255, 255, 255, 0.62); }
.navbar:not(.scrolled) .nav-link { color: rgba(255, 255, 255, 0.88); }
.navbar:not(.scrolled) .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.navbar:not(.scrolled) .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.18); }
.navbar:not(.scrolled) .hamburger span { background: #fff; }

.btn-nav {
    padding: .5rem 1.2rem; font-size: .8rem; border-radius: 100px;
    background: var(--accent); color: var(--primary-d); font-weight: 700;
    text-decoration: none; transition: all .25s; white-space: nowrap;
    box-shadow: 0 2px 10px rgba(201, 138, 31, 0.35);
}
.btn-nav:hover { background: var(--accent-l); transform: translateY(-1px); }

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; transition: all .3s; border-radius: 2px; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 1080px) {
    .btn-nav { display: none; }
}
@media (max-width: 860px) {
    .js .nav-links {
        display: none; position: absolute; top: 72px; left: 0; right: 0;
        background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px);
        flex-direction: column; padding: 1rem 2rem; border-bottom: 1px solid var(--border); gap: 4px;
    }
    .js .nav-links.open { display: flex; }
    .js .hamburger { display: block; }
    .nav-inner { padding: 0 1.25rem; }
    /* no-JS fallback: render the menu as a static panel instead of a dead hamburger button */
    html:not(.js) .nav-inner { flex-wrap: wrap; height: auto; padding-top: .75rem; padding-bottom: .75rem; }
    html:not(.js) .nav-links {
        display: flex; position: static; width: 100%; margin-left: 0;
        flex-direction: column; gap: 2px; padding: .75rem 1rem;
        background: rgba(255, 255, 255, 0.98); border: 1px solid var(--border-light); border-radius: var(--r-sm);
    }
    /* inside the light mobile panel, force dark text even when hero is behind */
    .navbar:not(.scrolled) .nav-links .nav-link { color: var(--text-3); }
    .navbar:not(.scrolled) .nav-links .nav-link:hover { color: var(--text); background: var(--primary-50); }
    .navbar:not(.scrolled) .nav-links .nav-link.active { color: #fff; background: var(--primary); }
}

/* ════════ HERO ════════ */
.hero {
    min-height: 100vh; display: flex; align-items: center; position: relative;
    background: var(--hero-gradient);
    overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'%3E%3Cpath d='M0 0h80v80H0z'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-orb {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: .18;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}
.hero-orb.o1 { width: 600px; height: 600px; top: -200px; right: -100px; }
.hero-orb.o2 { width: 400px; height: 400px; bottom: -100px; left: 10%; background: radial-gradient(circle, var(--primary-l) 0%, transparent 70%); }
.hero-orb.o3 { width: 300px; height: 300px; top: 20%; left: -80px; background: radial-gradient(circle, var(--accent-l) 0%, transparent 70%); }

.hero-inner {
    max-width: 1320px; margin: 0 auto; padding: 8rem 2rem 4rem; width: 100%;
    position: relative; z-index: 1; display: grid;
    grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: center;
}
@media (max-width: 860px) {
    .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 2.5rem; padding-top: 7rem; }
}

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(238, 176, 80, 0.14); border: 1px solid rgba(238, 176, 80, 0.38);
    padding: .35rem 1rem; border-radius: 100px; font-size: .78rem;
    font-weight: 600; color: var(--accent-l); letter-spacing: .5px; margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-l); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; color: #fff;
    line-height: 1.12; margin-bottom: 1.25rem; letter-spacing: -1px;
}
.hero h1 .gtext {
    display: inline-block;
    background: linear-gradient(120deg, #f5bd5e, var(--accent-l));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero .subtitle {
    font-size: clamp(.95rem, 1.5vw, 1.12rem); color: rgba(255, 255, 255, .82);
    max-width: 560px; line-height: 1.75; margin-bottom: 2rem; font-weight: 300;
}
@media (max-width: 860px) { .hero .subtitle { margin: 0 auto 2rem; } }

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 860px) { .hero-actions { justify-content: center; } }

.hero-pillars {
    display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.25rem;
}
@media (max-width: 860px) { .hero-pillars { justify-content: center; } }
.hero-pillars span {
    font-size: .7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .26);
    padding: .32rem .9rem; border-radius: 100px; background: rgba(255, 255, 255, .06);
}

.btn {
    display: inline-flex; align-items: center; gap: 8px; padding: .8rem 1.9rem;
    border-radius: 100px; font-size: .88rem; font-weight: 600; text-decoration: none;
    transition: all .3s cubic-bezier(.4, 0, .2, 1); cursor: pointer; border: none;
}
.btn-primary { background: var(--accent); color: var(--primary-d); box-shadow: 0 4px 15px rgba(201, 138, 31, 0.3); }
.btn-primary:hover { background: var(--accent-l); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(201, 138, 31, 0.4); }
.btn-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); }

.hero-logo-wrap { display: flex; justify-content: center; align-items: center; }
.hero-logo {
    width: min(360px, 100%); aspect-ratio: 1; border-radius: 50%;
    border: 3px solid rgba(238, 176, 80, 0.38); padding: 14px;
    box-shadow: 0 0 80px rgba(201, 138, 31, 0.15), 0 0 40px rgba(0, 0, 0, 0.2);
    animation: logoFloat 6s ease-in-out infinite;
    background: rgba(255, 255, 255, 0.05);
}
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ════════ SECTIONS ════════ */
.section { padding: 5rem 2rem; }
.section-alt { background: var(--bg-alt); }
.container { max-width: 1320px; margin: 0 auto; }

/* section header */
.sh {
    display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 2rem;
    padding-bottom: 1rem; border-bottom: 2px solid var(--border-light);
}
.sh-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; color: var(--primary-d); line-height: 1.1; }

.sec-lead {
    font-size: 1.02rem; color: var(--text-2); line-height: 1.85;
    max-width: 900px; margin-bottom: 2.5rem;
}
.sec-lead strong { color: var(--primary); }
.sec-note {
    font-size: .85rem; color: var(--text-3); margin-top: 1.5rem; line-height: 1.7;
    max-width: 900px;
}
.sub-head { display: flex; align-items: center; gap: 1rem; margin: 3.25rem 0 1.5rem; }
.sub-head h3 { font-size: 1.2rem; font-weight: 700; color: var(--primary-d); white-space: nowrap; }
.sub-head::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

/* scroll-reveal — elements are hidden ONLY while the html.js class is present, which the head
   watchdog guarantees is removed if script.js never runs. Without JS the content stays visible. */
.reveal { transition: all .7s cubic-bezier(.4, 0, .2, 1); }
.js .reveal { opacity: 0; transform: translateY(30px); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ════════ ABOUT ════════ */
.about-intro { margin-bottom: 3rem; }
.about-intro .ai-main { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 760px) { .about-intro .ai-main { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.about-intro .ai-logo {
    width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--primary); box-shadow: var(--sh-glow); flex-shrink: 0;
}
.about-intro .ai-text h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--primary-d); margin-bottom: .9rem; line-height: 1.35; }
.about-intro .ai-text p { color: var(--text-3); font-size: .95rem; line-height: 1.85; margin-bottom: .7rem; }
.about-intro .ai-text strong { color: var(--primary); }

/* ════════ VISION MISSION PHILOSOPHY ════════ */
.vm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 940px) { .vm-grid { grid-template-columns: 1fr; } }
.vm-card {
    position: relative; overflow: hidden; border-radius: var(--r);
    padding: 2.5rem 2rem; background: var(--surface); border: 1px solid var(--border);
    transition: all .3s; box-shadow: var(--sh-1);
}
.vm-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}
.vm-card:hover { box-shadow: var(--sh-3); transform: translateY(-4px); }
.vm-card .vm-icon { font-size: 2.4rem; margin-bottom: 1rem; display: block; }
.vm-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--primary-d); margin-bottom: .6rem; }
.vm-card p { color: var(--text-3); font-size: .92rem; line-height: 1.85; }

/* ════════ VALUES ════════ */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .values-grid { grid-template-columns: 1fr; } }
.val-card {
    text-align: center; padding: 1.75rem 1.25rem; border-radius: var(--r);
    background: var(--surface); border: 1px solid var(--border);
    transition: all .3s; box-shadow: var(--sh-1);
}
.val-card:hover { border-color: var(--primary); box-shadow: var(--sh-glow); transform: translateY(-4px); }
.val-card .vi {
    width: 52px; height: 52px; border-radius: 14px; margin: 0 auto .65rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-50, #eef3ee); color: var(--primary-d);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.val-card .vi .ic, .val-card .vi svg { width: 24px; height: 24px; }
.val-card:hover .vi { background: var(--primary); color: #fff; transform: scale(1.08) rotate(-5deg); }
.val-card .vl { font-weight: 700; font-size: .95rem; color: var(--primary-d); }

/* ════════ QUOTE BAND ════════ */
.quote-band {
    background: var(--hero-gradient); padding: 5.5rem 2rem;
    position: relative; overflow: hidden;
}
.quote-band::before {
    content: ''; position: absolute; top: -40%; right: -10%; width: 500px; height: 500px;
    border-radius: 50%; background: radial-gradient(circle, rgba(238, 176, 80, 0.12), transparent 70%);
}
.quote-band blockquote {
    max-width: 950px; margin: 0 auto; text-align: center; position: relative;
    font-family: Georgia, 'Times New Roman', serif; font-style: italic;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 400;
    line-height: 1.5; color: #fff; letter-spacing: .2px;
}
.quote-band blockquote::before {
    content: '“'; display: block; font-size: 4.5rem; line-height: .4;
    color: var(--accent-l); margin-bottom: 1.75rem;
}
.quote-band cite {
    display: block; text-align: center; margin-top: 1.75rem; position: relative;
    font-style: normal; font-size: .72rem; letter-spacing: 4px;
    text-transform: uppercase; color: var(--accent-l); font-weight: 600;
}

/* ════════ HOW WE CREATE VALUE / MODEL ════════ */
.model-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 980px) { .model-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .model-steps { grid-template-columns: 1fr; } }
.model-step {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 2rem 1.75rem; box-shadow: var(--sh-1);
    transition: all .3s;
}
.model-step:hover { box-shadow: var(--sh-3); transform: translateY(-4px); border-color: var(--primary-l); }
.model-step .ms-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--primary-50); color: var(--primary); border: 1.5px solid var(--primary-l);
    font-size: 1rem; font-weight: 800; margin-bottom: 1.1rem;
    transition: all .3s;
}
.model-step:hover .ms-num { background: var(--primary); color: #fff; border-color: var(--primary); }
.model-step h3 { font-size: 1rem; font-weight: 700; color: var(--primary-d); margin-bottom: .5rem; line-height: 1.35; }
.model-step p { font-size: .86rem; color: var(--text-3); line-height: 1.75; }
@media (min-width: 981px) {
    .model-step::after {
        content: '→'; position: absolute; top: 50%; right: -22px; transform: translateY(-50%);
        color: var(--accent-ink); font-size: 1.25rem; font-weight: 700;
        background: var(--bg-alt); width: 26px; text-align: center; line-height: 1;
    }
    .model-step:nth-child(3n)::after { display: none; }
}

/* ════════ SECTORS ════════ */
.sector-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 980px) { .sector-groups { grid-template-columns: 1fr; } }
.sector-group {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 2rem; box-shadow: var(--sh-1);
    /* the DARKEST green carries this marker, so the gap against the amber rule below
       is a lightness gap (ΔE00 38.5 under protanopia), not a hue gap that would vanish */
    border-top: 4px solid var(--primary-d);
}
/* "Exploring" is marked by a DASHED rule as well as a lighter colour, so the
   distinction survives for anyone who cannot separate the two hues. */
.sector-group.exploring { border-top: 4px dashed var(--accent-d); }
.sg-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sg-head h3 { font-size: 1.12rem; font-weight: 700; color: var(--primary-d); }
.sg-badge {
    font-size: .62rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    background: var(--primary-d); color: #fff; padding: .28rem .75rem; border-radius: 100px;
}
.sg-badge.badge-exploring { background: var(--accent-50); color: var(--accent-ink); border: 1px solid var(--accent-d); }
.sector-items { display: flex; flex-direction: column; }
.sector-item {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: .9rem 0; border-bottom: 1px solid var(--border-light);
}
.sector-item:last-child { border-bottom: none; }
.sector-item .si-icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-50, #eef3ee); color: var(--primary-d);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.sector-item:hover .si-icon { transform: translateY(-2px) scale(1.06); box-shadow: var(--sh-glow); background: var(--primary); color: #fff; }
.sector-group.exploring .si-icon { background: var(--accent-50); color: var(--accent-ink); }
.sector-group.exploring .sector-item:hover .si-icon { background: var(--accent); color: var(--primary-d); box-shadow: 0 8px 25px rgba(201, 138, 31, .35); }
.sector-item .si-icon .ic, .sector-item .si-icon svg { width: 21px; height: 21px; }

/* Lucide icons — global sizing + alignment defaults */
.ic, svg.lucide { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.sg-badge { display: inline-flex; align-items: center; gap: .35rem; }
.sg-badge .ic, .sg-badge svg { width: 12px; height: 12px; }

/* Vision / Mission / Philosophy — tinted icon chips */
.vm-card .vm-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-50, #eef3ee); color: var(--primary);
    margin-bottom: 1rem; transition: all .3s;
}
.vm-card .vm-icon .ic, .vm-card .vm-icon svg { width: 27px; height: 27px; }
.vm-card:nth-child(2) .vm-icon { background: var(--accent-50); color: var(--accent-ink); }
.vm-card:nth-child(3) .vm-icon { background: #e8eef5; color: #33506b; }
.vm-card:hover .vm-icon { transform: translateY(-3px) rotate(-4deg); box-shadow: var(--sh-glow); }
.sector-item h4 { font-size: .95rem; font-weight: 700; color: var(--primary-d); margin-bottom: .15rem; }
.sector-item p { font-size: .84rem; color: var(--text-3); line-height: 1.65; }
.sg-note {
    margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--border-light);
    font-size: .82rem; color: var(--text-3); line-height: 1.7;
}
.sg-note strong { color: var(--accent-ink); }

/* ════════ PROJECTS ════════ */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 980px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .proj-grid { grid-template-columns: 1fr; } }
.proj-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    overflow: hidden; box-shadow: var(--sh-1); transition: all .35s;
}
.proj-card:hover { box-shadow: var(--sh-3); transform: translateY(-4px); }
.proj-img {
    height: 180px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: .4rem; position: relative; overflow: hidden;
    color: var(--text-3);
}
.proj-img.has-gallery {
    display: block; height: auto; padding: 0;
    background: var(--bg-alt); border-bottom: 1px solid var(--border-light);
}
.proj-img.has-gallery .pg-main {
    display: block; width: 100%; height: 180px; object-fit: cover;
}
.pg-thumbs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
}
.pg-thumbs img {
    display: block; width: 100%; height: 58px; object-fit: cover; border-radius: 4px;
    cursor: pointer; transition: opacity .2s;
}
.pg-thumbs img:hover { opacity: .82; }
.proj-img.has-mosaic {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
    height: auto; background: var(--bg-alt); border-bottom: 1px solid var(--border-light);
}
.proj-img.has-mosaic img {
    display: block; width: 100%; height: 116px; object-fit: cover; border-radius: 4px;
    cursor: pointer; transition: opacity .2s;
}
.proj-img.has-mosaic img:hover { opacity: .82; }
.proj-img.has-mosaic.quad { grid-template-columns: repeat(2, 1fr); }
.proj-meta li.scope { flex-direction: column; align-items: flex-start; gap: .25rem; }
.proj-meta li.scope b { text-align: left; font-weight: 600; line-height: 1.65; }

.proj-body { padding: 1.5rem; }
.proj-status {
    display: inline-block; background: var(--accent-50); color: var(--accent-ink);
    padding: .22rem .75rem; border-radius: 100px; font-size: .66rem; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: .7rem;
}
.proj-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--primary-d); margin-bottom: .3rem; }
.proj-meta { list-style: none; margin-top: .9rem; }
.proj-meta li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .5rem 0; border-bottom: 1px dashed var(--border-light);
}
.proj-meta li:last-child { border-bottom: none; }
.proj-meta li span {
    font-size: .72rem; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
    color: var(--text-3);
}
.proj-meta li b { font-size: .85rem; font-weight: 600; color: var(--text-2); text-align: right; }
.proj-note {
    margin-top: 2.25rem; background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--accent-d); border-radius: var(--r-sm);
    padding: 1.5rem 1.75rem; font-size: .87rem; line-height: 1.85; color: var(--text-2);
}
.proj-note strong { color: var(--primary-d); }

/* ════════ TEAM ════════ */
.team-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
    max-width: 1200px; margin: 0 auto;
}
@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    overflow: hidden; text-align: center; box-shadow: var(--sh-1); transition: all .35s;
}
.team-card:hover { box-shadow: var(--sh-3); transform: translateY(-4px); }
.team-card .tc-avatar.is-empty {
    background: var(--primary-50); border: 2px dashed var(--accent-ink); box-shadow: none;
}
.team-card .tc-avatar {
    width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
    margin: 1.75rem auto .9rem; border: 3px solid var(--primary-50);
    box-shadow: 0 4px 20px rgba(11, 42, 32, 0.18);
}
.team-card .tc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card .tc-name { font-size: 1.05rem; font-weight: 700; color: var(--primary-d); padding: 0 1rem; }
.team-card .tc-role {
    font-size: .74rem; color: var(--accent-ink); font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; padding: .4rem 1.25rem; line-height: 1.6;
}
.team-card .tc-email { padding: 0 1rem; margin-top: .1rem; }
.team-card .tc-email a {
    font-size: .8rem; color: var(--primary); text-decoration: none; word-break: break-all;
}
.team-card .tc-email a:hover { text-decoration: underline; }
.team-card .tc-desc {
    font-size: .85rem; color: var(--text-3); padding: 1rem 1.5rem 1.75rem;
    line-height: 1.75; text-align: left;
}

/* ════════ PARTNERS & ALLIANCES ════════ */
.partners-wrap {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    padding: 2.5rem; box-shadow: var(--sh-1);
}
.partners-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.partner-item {
    background: var(--primary-50); border: 1px solid var(--border-light);
    padding: 1.2rem 1.6rem; border-radius: var(--r-sm); min-width: 140px;
    text-align: center; transition: all .25s;
}
.partner-item:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--sh-2); }
.partner-item .pi {
    width: 60px; height: 60px; margin: 0 auto .55rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-50, #eef3ee); color: var(--primary-d);
    border: 1px solid var(--border-light); transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.partner-item .pi .ic, .partner-item .pi svg { width: 27px; height: 27px; }
.partner-item:hover .pi { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-4px); box-shadow: var(--sh-glow); }
.partner-item .pe { font-size: .85rem; color: var(--primary-d); font-weight: 700; }
.partner-item:hover .pe { color: #fff; }

/* ════════ CONTACT ════════ */
.contact-section {
    background: var(--hero-gradient);
    border-radius: var(--r); padding: 4rem 3rem; color: #fff; position: relative; overflow: hidden;
}
.contact-section::before {
    content: ''; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px;
    border-radius: 50%; background: radial-gradient(circle, rgba(238, 176, 80, 0.1), transparent 70%);
}
.contact-section > * { position: relative; z-index: 1; }
.contact-section h2 { text-align: center; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; margin-bottom: .6rem; }
.cs-lead {
    text-align: center; color: rgba(255, 255, 255, .8); max-width: 680px;
    margin: 0 auto 2.5rem; font-size: .98rem; line-height: 1.75; font-weight: 300;
}

.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 980px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } }
.c-item {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
    padding: 1.5rem; border-radius: var(--r); text-align: center; transition: all .3s;
}
.c-item:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.c-item .ci {
    width: 46px; height: 46px; margin: 0 auto .6rem; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .1); color: var(--accent-l);
    border: 1px solid rgba(255, 255, 255, .16); transition: all .3s;
}
.c-item .ci .ic, .c-item .ci svg { width: 21px; height: 21px; }
.c-item:hover .ci { background: var(--accent); color: var(--primary-d); border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(201, 138, 31, .35); }
.c-item .cl {
    display: block; font-size: .64rem; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: rgba(255, 255, 255, .65); margin-bottom: .3rem;
}
.c-item .cv { font-size: .95rem; font-weight: 600; color: #fff; text-decoration: none; word-break: break-word; }
.c-item a.cv { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.c-item a.cv:hover { color: var(--accent-l); text-decoration-color: var(--accent-l); }

.contact-actions { text-align: center; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* Contact Form */
.contact-form {
    margin-top: 3rem; background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px);
    border-radius: var(--r); padding: 2.5rem; border: 1px solid rgba(255, 255, 255, .08);
}
.contact-form h3 { text-align: center; font-size: 1.4rem; font-weight: 700; margin-bottom: .3rem; }
.contact-form .cf-sub { text-align: center; opacity: .72; margin-bottom: 2rem; font-size: .95rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; margin-bottom: 0; }
.form-group:not(.form-row .form-group) { margin-bottom: 1.2rem; }
.form-group label {
    font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .85);
    margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .8px;
}
.form-group input, .form-group textarea {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 10px; padding: .75rem 1rem; color: #fff; font-size: .95rem;
    font-family: inherit; transition: all .25s; outline: none; width: 100%;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, .62); }
.form-group input:focus, .form-group textarea:focus {
    border-color: var(--accent-l); background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 3px rgba(238, 176, 80, .25);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit { text-align: center; margin-top: 1.5rem; }
.form-submit .btn { min-width: 200px; font-size: 1rem; padding: .85rem 2.5rem; }

/* Validation errors — the thick left edge and the ⚠ text carry the meaning,
   so the state is never signalled by colour alone. */
.form-group.has-error input, .form-group.has-error textarea {
    border-color: var(--danger); border-left-width: 4px;
    background: rgba(255, 180, 162, 0.1); box-shadow: 0 0 0 3px rgba(255, 180, 162, 0.16);
}
.form-error { font-size: .78rem; font-weight: 600; color: var(--danger); margin-top: .35rem; display: none; align-items: center; gap: .3rem; }
.form-error .ic, .form-error svg { width: 13px; height: 13px; }
.form-group.has-error .form-error { display: flex; }

/* Spinner — dark green on the amber button, matching the button's own text colour */
.btn-spinner { display: inline-flex; align-items: center; gap: .5rem; }

/* Button icons — inherit the button's own colour in every state */
.btn .ic, .btn svg.lucide { width: 17px; height: 17px; }
.btn-primary .ic, .btn-primary svg.lucide { color: inherit; }
.btn-ghost .ic, .btn-ghost svg.lucide { color: inherit; }
.btn:disabled .ic { display: none; }

/* Team card email icon */
.team-card .tc-email a { display: inline-flex; align-items: center; gap: .35rem; }
.team-card .tc-email .ic, .team-card .tc-email svg { width: 13px; height: 13px; }

/* Hero pillars + back-to-top icon polish */
.hero-pillars span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-pillars .ic, .hero-pillars svg { width: 13px; height: 13px; color: var(--accent-l); }
.btt .ic, .btt svg.lucide { width: 20px; height: 20px; }

/* Project status chip icons */
.proj-status { display: inline-flex; align-items: center; gap: .35rem; }
.proj-status .ic, .proj-status svg { width: 12px; height: 12px; }

/* No-JS / pre-icon fallback: an empty [data-lucide] i element renders nothing, so keep
   the chip backgrounds (they carry the visual weight) even before Lucide swaps in. */
i[data-lucide]:not(.ic-size-set) { display: inline-flex; }

/* prefers-reduced-motion: honour the existing convention */
@media (prefers-reduced-motion: reduce) {
    .sector-item .si-icon, .vm-card .vm-icon, .val-card .vi, .partner-item .pi, .c-item .ci { transition: none; }
}
.btn-spinner .spinner {
    width: 18px; height: 18px; border: 2.5px solid rgba(11, 42, 32, .25);
    border-top-color: var(--primary-d); border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Success message */
.form-success { text-align: center; padding: 2rem; display: none; animation: fadeUp .5s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.form-success .fs-icon {
    width: 72px; height: 72px; margin: 0 auto .8rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-50, #eef3ee); color: var(--primary);
}
.form-success .fs-icon .ic, .form-success .fs-icon svg { width: 36px; height: 36px; }
.form-fail .fs-icon { background: rgba(255, 180, 162, .18); color: var(--danger); }
.form-fail .fs-icon .ic, .form-fail .fs-icon svg { width: 30px; height: 30px; }
.form-success h4 { font-size: 1.3rem; font-weight: 700; margin-bottom: .3rem; }
.form-success p { opacity: .78; font-size: .95rem; margin-bottom: 1.25rem; }
.form-success.show { display: block; }
.form-fail .fs-icon { font-size: 2.5rem; }
.form-fail p strong { color: var(--accent-l); }
.form-fail .btn { min-width: 190px; margin: 0 .3rem .6rem; padding: .6rem 1.4rem; font-size: .85rem; }
.contact-form form.hidden { display: none; }

/* ════════ FOOTER ════════ */
footer { background: var(--primary-d); color: #fff; padding: 3.5rem 2rem 2rem; }
.footer-inner { max-width: 1320px; margin: 0 auto; }
.footer-top {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
    padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand img {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(238, 176, 80, .55); margin-bottom: .9rem;
}
.footer-brand .fb-name { font-size: 1rem; font-weight: 800; display: block; }
.footer-brand .fb-sub {
    font-size: .66rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--accent-l); display: block; margin-top: .2rem;
}
.footer-brand .fb-desc { font-size: .85rem; opacity: .68; margin-top: .9rem; line-height: 1.75; max-width: 380px; }
.footer-col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-l); margin-bottom: 1rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { padding: .3rem 0; font-size: .88rem; opacity: .78; transition: opacity .2s; }
.footer-col ul li:hover { opacity: 1; }
.footer-col ul li a { text-decoration: none; color: #fff; }
.footer-col ul li a:hover { text-decoration: underline; }
.footer-bottom { text-align: center; padding-top: 1.5rem; font-size: .8rem; opacity: .65; }
.fb-sep { margin: 0 .4rem; }

/* ════════ BACK TO TOP ════════ */
.btt {
    position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px;
    background: var(--primary); color: #fff; border: none; border-radius: 50%;
    font-size: 1.2rem; cursor: pointer; box-shadow: var(--sh-2);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: all .3s; z-index: 99;
}
.btt.show { opacity: 1; pointer-events: auto; }
.btt:hover { background: var(--primary-d); transform: translateY(-3px); box-shadow: var(--sh-3); }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 600px) {
    .section { padding: 3.5rem 1rem; }
    .hero-inner { padding: 6rem 1.25rem 3rem; }
    .sh { flex-wrap: wrap; }
    .contact-section { padding: 2.5rem 1.5rem; }
    .contact-form { padding: 1.75rem 1.25rem; }
    .partners-wrap { padding: 1.75rem 1.25rem; }
}