/*
Theme Name: Safety Hub Consultants
Theme URI: https://safetyhubconsultants.co.ke
Author: Jake Nyakango
Author URI: https://github.com/jakenyakango
Description: Corporate website for Safety Hub Consultants Ltd — Environmental, Occupational Health & Safety Consultancy. Nairobi, Kenya.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Private
Tags: business, consultancy, ehs, kenya
*/

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --sh-forest:  #1e6b3a;
    --sh-mid:     #2d8653;
    --sh-light:   #3db87a;
    --sh-cream:   #f7f3ec;
    --sh-warm:    #e9e2d3;
    --sh-gold:    #c9a84c;
    --sh-dark:    #143322;
    --sh-text:    #1c1c1c;
    --sh-muted:   #5a6360;
    --sh-border:  #d4c9b4;
    --radius:     4px;
    --radius-md:  8px;
    --font-serif: 'DM Serif Display', serif;
    --font-sans:  'DM Sans', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: var(--sh-cream);
    color: var(--sh-text);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ─────────────────────────────────────────
   TYPOGRAPHY UTILITIES
───────────────────────────────────────── */
.serif { font-family: var(--font-serif); }

.section-label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sh-light);
    font-weight: 500;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--sh-light);
}

.section-h2 {
    font-family: var(--font-serif);
    font-size: 36px;
    color: var(--sh-forest);
    line-height: 1.15;
    margin-bottom: 16px;
}

.section-lead {
    color: var(--sh-muted);
    font-size: 15px;
    max-width: 520px;
    line-height: 1.7;
    font-weight: 300;
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn-primary {
    background: var(--sh-gold);
    color: var(--sh-dark);
    padding: 13px 26px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
}
.btn-primary:hover { background: #e0bc5f; }

.btn-ghost {
    border: 1px solid rgba(255,255,255,.25);
    color: #c4d9ca;
    padding: 13px 26px;
    border-radius: var(--radius);
    font-size: 13px;
    letter-spacing: .02em;
    transition: all .2s;
    display: inline-block;
}
.btn-ghost:hover { border-color: rgba(255,255,255,.5); color: #fff; }

.btn-outline-light {
    border: 1px solid rgba(255,255,255,.2);
    color: #8aaa96;
    padding: 12px 28px;
    border-radius: var(--radius);
    font-size: 13px;
    display: inline-block;
    transition: all .2s;
    letter-spacing: .02em;
}
.btn-outline-light:hover { border-color: rgba(255,255,255,.5); color: #fff; }

.btn-dark {
    background: var(--sh-forest);
    color: #fff;
    padding: 13px 28px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    transition: background .2s;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
}
.btn-dark:hover { background: var(--sh-mid); }

/* ─────────────────────────────────────────
   TOP BAR
───────────────────────────────────────── */
.topbar {
    background: var(--sh-forest);
    color: #a8c5b0;
    font-size: 12px;
    padding: 7px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: .03em;
}
.topbar a { color: #a8c5b0; }
.topbar a:hover { color: #fff; }

/* ─────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────── */
.site-nav {
    background: var(--sh-cream);
    border-bottom: 1px solid var(--sh-border);
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-logo { padding: 16px 0; }

.logo-mark {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 36px;
    height: 36px;
    background: var(--sh-forest);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.logo-icon svg { width: 20px; height: 20px; fill: none; stroke: #52b788; stroke-width: 1.5; }

.logo-text .brand {
    font-size: 15px;
    font-weight: 500;
    color: var(--sh-forest);
    letter-spacing: .02em;
    line-height: 1.1;
    display: block;
}
.logo-text .sub {
    font-size: 10px;
    color: var(--sh-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    display: block;
}

/* Primary menu (registered via functions.php) */
.primary-menu {
    display: flex;
    align-items: center;
    gap: 0;
}
.primary-menu li { list-style: none; }
.primary-menu a {
    padding: 22px 16px;
    font-size: 13px;
    color: var(--sh-muted);
    letter-spacing: .02em;
    border-bottom: 2px solid transparent;
    transition: all .2s;
    display: block;
}
.primary-menu a:hover,
.primary-menu .current-menu-item a {
    color: var(--sh-forest);
    border-bottom-color: var(--sh-light);
}
.primary-menu .menu-cta a {
    background: var(--sh-forest);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius);
    border-bottom: none;
    margin-left: 12px;
}
.primary-menu .menu-cta a:hover { background: var(--sh-mid); }

/* Hamburger (mobile) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--sh-forest);
    border-radius: 2px;
    transition: all .3s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
    overflow: hidden;
}

.hero-left {
    background: var(--sh-forest);
    padding: 70px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.hero-left::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    border: 1px solid rgba(82,183,136,.15);
    pointer-events: none;
}
.hero-left::after {
    content: '';
    position: absolute;
    bottom: -40px; left: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    border: 1px solid rgba(82,183,136,.1);
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(82,183,136,.12);
    border: 1px solid rgba(82,183,136,.25);
    color: #7ecba1;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    width: fit-content;
    margin-bottom: 28px;
}
.hero-badge span {
    width: 6px; height: 6px;
    background: #52b788;
    border-radius: 50%;
    display: inline-block;
}

.hero-h1 {
    font-family: var(--font-serif);
    font-size: 46px;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 20px;
}
.hero-h1 em { color: #7ecba1; font-style: italic; }

.hero-sub {
    color: #8aaa96;
    font-size: 15px;
    line-height: 1.7;
    max-width: 380px;
    margin-bottom: 36px;
    font-weight: 300;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-creds {
    display: flex;
    gap: 16px;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-wrap: wrap;
}
.hero-cred .num {
    font-family: var(--font-serif);
    font-size: 28px;
    color: #fff;
    line-height: 1;
    display: block;
}
.hero-cred .lbl {
    font-size: 10px;
    color: #6b9477;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 3px;
    display: block;
}

.hero-right {
    background: var(--sh-warm);
    position: relative;
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c4b89a' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-card {
    background: #fff;
    border: 1px solid #d8d0c0;
    border-radius: var(--radius-md);
    padding: 28px 32px;
    width: 300px;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 32px rgba(30,107,58,.12);
}

.hero-card-icon {
    width: 44px; height: 44px;
    background: #eaf5ee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.hero-card-icon svg { width: 22px; height: 22px; stroke: var(--sh-mid); stroke-width: 1.5; fill: none; }

.hero-card-tag {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sh-light);
    font-weight: 500;
    margin-bottom: 8px;
}
.hero-card-title {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--sh-forest);
    margin-bottom: 8px;
    line-height: 1.3;
}
.hero-card-body { font-size: 12px; color: var(--sh-muted); line-height: 1.6; }
.hero-card hr { border: none; border-top: 1px solid #e8e0d0; margin: 16px 0; }
.hero-card-stats { display: flex; gap: 20px; }
.hero-card-stats .n {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--sh-forest);
    line-height: 1;
    display: block;
}
.hero-card-stats .l {
    font-size: 10px;
    color: var(--sh-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: block;
}

.hero-pills {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    white-space: nowrap;
}
.pill {
    background: #fff;
    border: 1px solid #d8d0c0;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 11px;
    color: var(--sh-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sh-light); }

/* ─────────────────────────────────────────
   CREDIBILITY STRIP
───────────────────────────────────────── */
.cred-strip {
    background: var(--sh-forest);
    padding: 18px 40px;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
.cred-strip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8aaa96;
    font-size: 12px;
    letter-spacing: .04em;
}
.cred-strip-item svg { width: 16px; height: 16px; stroke: #52b788; stroke-width: 1.5; fill: none; flex-shrink: 0; }

/* ─────────────────────────────────────────
   SECTIONS (common)
───────────────────────────────────────── */
.section-pad { padding: 72px 40px; }

/* ─────────────────────────────────────────
   SERVICES
───────────────────────────────────────── */
.services { background: #fff; padding: 72px 40px; }

.services-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 52px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e8e0d0;
}

.svc-card {
    background: #fff;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    transition: background .25s;
}
.svc-card:hover { background: var(--sh-forest); }
.svc-card:hover .svc-title { color: #fff; }
.svc-card:hover .svc-body  { color: #8aaa96; }
.svc-card:hover .svc-num   { color: rgba(255,255,255,.08); }
.svc-card:hover .svc-arrow { opacity: 1; }
.svc-card:hover .svc-icon  { background: rgba(82,183,136,.15); }

.svc-num {
    font-family: var(--font-serif);
    font-size: 48px;
    color: #f0ebe0;
    position: absolute;
    top: 16px; right: 20px;
    line-height: 1;
    transition: color .25s;
    user-select: none;
}

.svc-icon {
    width: 40px; height: 40px;
    background: #eaf5ee;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background .25s;
}
.svc-icon svg { width: 20px; height: 20px; stroke: var(--sh-mid); stroke-width: 1.5; fill: none; }

.svc-title {
    font-family: var(--font-serif);
    font-size: 17px;
    color: var(--sh-forest);
    margin-bottom: 10px;
    line-height: 1.3;
    transition: color .25s;
}
.svc-body { font-size: 12px; color: var(--sh-muted); line-height: 1.6; transition: color .25s; }
.svc-arrow {
    font-size: 18px;
    color: var(--sh-light);
    margin-top: 16px;
    display: block;
    opacity: 0;
    transition: opacity .25s;
}

/* ─────────────────────────────────────────
   WHY US
───────────────────────────────────────── */
.whyus {
    background: var(--sh-cream);
    padding: 72px 40px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center;
}

.why-points { margin-top: 36px; display: flex; flex-direction: column; gap: 20px; }

.why-point { display: flex; gap: 16px; align-items: flex-start; }

.why-dot {
    width: 32px; height: 32px;
    background: var(--sh-forest);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.why-dot svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; fill: none; }

.why-point h4 { font-size: 14px; font-weight: 500; color: var(--sh-forest); margin-bottom: 4px; }
.why-point p  { font-size: 13px; color: var(--sh-muted); line-height: 1.6; }

.why-right {
    background: var(--sh-forest);
    border-radius: var(--radius-md);
    padding: 44px 40px;
    position: relative;
    overflow: hidden;
}
.why-right::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(82,183,136,.1);
    pointer-events: none;
}

.why-right-label {
    color: #7ecba1;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.why-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: rgba(255,255,255,.06);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 28px;
}
.wstat { background: rgba(30,107,58,.5); padding: 24px 20px; text-align: center; }
.wstat .big {
    font-family: var(--font-serif);
    font-size: 40px;
    color: #fff;
    line-height: 1;
    display: block;
}
.wstat .sub {
    font-size: 11px;
    color: #6b9477;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 6px;
    display: block;
}

.why-badges-label { color: #6b9477; font-size: 12px; margin-bottom: 16px; letter-spacing: .04em; text-transform: uppercase; }
.why-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
    background: rgba(82,183,136,.1);
    border: 1px solid rgba(82,183,136,.2);
    color: #7ecba1;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 20px;
}

/* ─────────────────────────────────────────
   TEAM
───────────────────────────────────────── */
.team { background: #fff; padding: 72px 40px; }
.team-intro { text-align: center; margin-bottom: 52px; }
.team-intro .section-label { justify-content: center; }

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.team-card {
    background: var(--sh-cream);
    border: 1px solid #e0d8c8;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow .2s;
}
.team-card:hover { box-shadow: 0 8px 32px rgba(30,107,58,.1); }

.team-photo {
    height: 200px;
    background: linear-gradient(135deg, var(--sh-forest), var(--sh-mid));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 52px;
    color: rgba(255,255,255,.3);
    position: relative;
    overflow: hidden;
}
.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
.team-photo .initials { position: relative; z-index: 1; }

.team-info { padding: 24px 24px 28px; }
.team-name { font-family: var(--font-serif); font-size: 19px; color: var(--sh-forest); margin-bottom: 4px; }
.team-role { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sh-light); margin-bottom: 14px; }
.team-bio { font-size: 12px; color: var(--sh-muted); line-height: 1.6; margin-bottom: 16px; }
.team-creds { display: flex; flex-wrap: wrap; gap: 6px; }
.tcred { font-size: 10px; background: #eaf5ee; color: #2d6a4f; padding: 4px 10px; border-radius: 20px; letter-spacing: .04em; }

/* ─────────────────────────────────────────
   PROJECTS
───────────────────────────────────────── */
.projects { background: var(--sh-forest); padding: 72px 40px; }
.projects .section-label { color: #52b788; }
.projects .section-label::before { background: #52b788; }
.projects .section-h2 { color: #fff; }
.projects .section-lead { color: #8aaa96; }

.proj-intro {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
    margin-bottom: 44px;
}

.proj-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.06);
}

.proj-card {
    background: rgba(20,51,34,.4);
    padding: 28px 24px;
    border-top: 2px solid transparent;
    transition: all .25s;
}
.proj-card:hover { background: rgba(45,106,79,.3); border-top-color: var(--sh-light); }

.proj-sector { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #52b788; margin-bottom: 12px; }
.proj-title { font-family: var(--font-serif); font-size: 15px; color: #fff; line-height: 1.4; margin-bottom: 10px; }
.proj-client { font-size: 11px; color: #6b9477; }
.proj-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; font-size: 10px; color: #52b788; letter-spacing: .06em; text-transform: uppercase; }

.proj-more { text-align: center; margin-top: 36px; }

/* ─────────────────────────────────────────
   CONTACT
───────────────────────────────────────── */
.contact { background: var(--sh-warm); padding: 72px 40px; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* WPForms & CF7 override to match design */
.contact-form,
.wpcf7-form,
.wpforms-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-input,
input[type="text"].wpcf7-text,
input[type="email"].wpcf7-email,
input[type="tel"].wpcf7-tel,
select.wpcf7-select,
textarea.wpcf7-textarea,
.wpforms-field input,
.wpforms-field select,
.wpforms-field textarea {
    padding: 12px 16px;
    border: 1px solid var(--sh-border);
    background: #fff;
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--sh-text);
    outline: none;
    width: 100%;
    transition: border-color .2s;
}
.form-input:focus,
input[type="text"].wpcf7-text:focus,
input[type="email"].wpcf7-email:focus,
textarea.wpcf7-textarea:focus,
.wpforms-field input:focus {
    border-color: var(--sh-light);
}

textarea.form-input,
textarea.wpcf7-textarea,
.wpforms-field textarea { height: 120px; resize: none; }

input[type="submit"],
button[type="submit"],
.wpforms-submit,
.wpcf7-submit {
    background: var(--sh-forest);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .2s;
    text-align: left;
    align-self: flex-start;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.wpforms-submit:hover,
.wpcf7-submit:hover { background: var(--sh-mid); }

.contact-details { margin-top: 32px; }

.cdet-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--sh-border);
}
.cdet-item:last-child { border-bottom: none; }

.cdet-icon {
    width: 36px; height: 36px;
    background: var(--sh-forest);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cdet-icon svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 1.5; fill: none; }

.cdet-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--sh-muted); margin-bottom: 3px; display: block; }
.cdet-val   { font-size: 14px; color: var(--sh-forest); font-weight: 500; display: block; }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.site-footer { background: var(--sh-dark); padding: 56px 40px 0; }

/* 4-column grid */
.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 1fr 1.2fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Brand column */
.footer-brand p {
    font-size: 12px;
    color: #8aaa96;
    line-height: 1.7;
    max-width: 240px;
    margin: 14px 0 18px;
}
.footer-social { display: flex; gap: 10px; margin-bottom: 20px; }
.fsoc {
    width: 34px; height: 34px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b9477;
    font-size: 12px;
    font-weight: 500;
    transition: all .2s;
    text-decoration: none;
}
.fsoc:hover { background: rgba(61,184,122,.15); border-color: rgba(61,184,122,.35); color: #3db87a; }

/* NEMA badge */
.footer-nema-badge {
    display: inline-flex;
    flex-direction: column;
    background: rgba(61,184,122,.08);
    border: 1px solid rgba(61,184,122,.2);
    border-radius: 6px;
    padding: 10px 14px;
    margin-top: 4px;
}
.fnb-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #3db87a;
    margin-bottom: 3px;
}
.fnb-value { font-size: 12px; color: #a8c8b6; }

/* Nav columns */
.footer-col h4 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #52836a;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-col a {
    display: block;
    font-size: 13px;
    color: #7aaa90;
    margin-bottom: 10px;
    transition: color .2s;
    text-decoration: none;
}
.footer-col a:hover { color: #fff; }
.footer-cta-link {
    color: #3db87a !important;
    margin-top: 6px;
    font-size: 13px !important;
}

/* Contact column */
.footer-contact-list { display: flex; flex-direction: column; gap: 14px; }
.fc-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.fc-item svg {
    width: 14px; height: 14px;
    stroke: #3db87a;
    stroke-width: 1.5;
    fill: none;
    flex-shrink: 0;
    margin-top: 2px;
}
.fc-item a,
.fc-item span {
    font-size: 12px;
    color: #7aaa90;
    line-height: 1.5;
    text-decoration: none;
    transition: color .2s;
}
.fc-item a:hover { color: #fff; }

/* Credentials strip */
.footer-cred-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 0;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-cred-strip span {
    font-size: 11px;
    color: #4a7a5e;
    letter-spacing: .03em;
    padding: 0 16px;
}
.fcs-dot {
    width: 3px;
    height: 3px;
    background: #3d6b50;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    padding: 0 !important;
}

/* Bottom bar */
.footer-bottom {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.footer-bottom p { font-size: 11px; color: #4a7a5e; }

/* Responsive */
@media (max-width: 1200px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 768px) {
    .site-footer { padding: 40px 20px 0; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-cred-strip { gap: 8px; }
    .footer-cred-strip span { padding: 0 10px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

/* ─────────────────────────────────────────
   PAGE BANNER (inner pages)
───────────────────────────────────────── */
.page-banner {
    background: var(--sh-forest);
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
}
.page-banner p { color: #c8ddd1; }
.page-banner::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 300px; height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(82,183,136,.1);
    pointer-events: none;
}
.page-banner .section-label { color: #52b788; }
.page-banner .section-label::before { background: #52b788; }
.page-banner h1 {
    font-family: var(--font-serif);
    font-size: 42px;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 12px;
}
.page-banner p { color: #8aaa96; font-size: 15px; font-weight: 300; max-width: 560px; }

/* ─────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────── */
.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 72px 40px;
    background: #fff;
}
.about-intro-text .section-h2 { margin-bottom: 20px; }
.about-intro-text p { color: var(--sh-muted); font-size: 15px; line-height: 1.7; margin-bottom: 16px; }

.about-image-block {
    background: var(--sh-warm);
    border-radius: var(--radius-md);
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.about-image-block img { width: 100%; height: 100%; object-fit: cover; }
.about-image-block .placeholder {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--sh-muted);
    text-align: center;
    padding: 24px;
}

.mission-vision {
    background: var(--sh-cream);
    padding: 72px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.mv-card {
    background: #fff;
    border: 1px solid var(--sh-border);
    border-radius: var(--radius-md);
    padding: 32px 28px;
}
.mv-card .icon {
    width: 44px; height: 44px;
    background: #eaf5ee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.mv-card .icon svg { width: 22px; height: 22px; stroke: var(--sh-mid); stroke-width: 1.5; fill: none; }
.mv-card h3 { font-family: var(--font-serif); font-size: 20px; color: var(--sh-forest); margin-bottom: 12px; }
.mv-card p  { font-size: 13px; color: var(--sh-muted); line-height: 1.7; }

/* ─────────────────────────────────────────
   SERVICES PAGE (full list)
───────────────────────────────────────── */
.services-full { background: #fff; padding: 72px 40px; }
.services-full-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.svc-full-card {
    border: 1px solid var(--sh-border);
    border-radius: var(--radius-md);
    padding: 32px 28px;
    background: var(--sh-cream);
    transition: box-shadow .2s, border-color .2s;
}
.svc-full-card:hover { box-shadow: 0 4px 24px rgba(26,61,43,.08); border-color: var(--sh-light); }
.svc-full-card h3 { font-family: var(--font-serif); font-size: 20px; color: var(--sh-forest); margin-bottom: 12px; }
.svc-full-card p  { font-size: 13px; color: var(--sh-muted); line-height: 1.7; }

/* ─────────────────────────────────────────
   PROJECTS PAGE (full table)
───────────────────────────────────────── */
.projects-page { background: var(--sh-cream); padding: 72px 40px; }
.projects-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.filter-btn {
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 12px;
    border: 1px solid var(--sh-border);
    background: #fff;
    color: var(--sh-muted);
    cursor: pointer;
    transition: all .2s;
    font-family: var(--font-sans);
}
.filter-btn.active,
.filter-btn:hover {
    background: var(--sh-forest);
    color: #fff;
    border-color: var(--sh-forest);
}
.projects-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-md); overflow: hidden; }
.projects-table th { background: var(--sh-forest); color: #8aaa96; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 20px; text-align: left; }
.projects-table td { padding: 14px 20px; font-size: 13px; color: var(--sh-text); border-bottom: 1px solid var(--sh-border); }
.projects-table tr:last-child td { border-bottom: none; }
.projects-table tr:hover td { background: var(--sh-cream); }
.proj-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    background: #eaf5ee;
    color: var(--sh-mid);
    letter-spacing: .05em;
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero { grid-template-columns: 1fr; }
    .hero-right { min-height: 340px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .proj-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .whyus { grid-template-columns: 1fr; }
    .services-intro { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .about-intro { grid-template-columns: 1fr; }
    .mission-vision { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .services-full-grid { grid-template-columns: 1fr; }
    .proj-intro { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .topbar { padding: 7px 20px; font-size: 11px; flex-direction: column; gap: 4px; text-align: center; }
    .site-nav { padding: 0 20px; }
    .nav-toggle { display: flex; }
    .primary-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--sh-cream);
        flex-direction: column;
        border-top: 1px solid var(--sh-border);
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
        z-index: 200;
    }
    .primary-menu.open { display: flex; }
    .primary-menu a { padding: 14px 20px; border-bottom: none; border-bottom: 1px solid var(--sh-border); }
    .primary-menu .menu-cta a { margin: 12px 20px; border-radius: var(--radius); }
    .hero-left { padding: 40px 24px; }
    .hero-h1 { font-size: 32px; }
    .section-pad, .services, .whyus, .team, .projects, .contact, .services-full, .projects-page, .about-intro, .mission-vision { padding: 48px 20px; }
    .topbar { display: none; }
    .services-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .proj-grid { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .cred-strip { padding: 16px 20px; gap: 20px; }
    .form-row { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

/* ─────────────────────────────────────────
   LOGO IMAGE
───────────────────────────────────────── */
.site-logo {
    height: 48px;
    width: auto;
    display: block;
    /* The logo has a dark green bg — works on the cream nav */
    border-radius: 4px;
}

.footer-logo {
    height: 44px;
    width: auto;
    display: block;
    margin-bottom: 14px;
    border-radius: 4px;
}

/* ─────────────────────────────────────────
   HERO PHOTO (replaces pattern panel)
───────────────────────────────────────── */
.hero-right--photo {
    padding: 0;
    position: relative;
    overflow: hidden;
}

.hero-photo-img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Dark gradient at bottom so pills stay readable */
.hero-right--photo::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(20,51,34,.75), transparent);
    pointer-events: none;
}

/* Pills sit on top of the gradient */
.hero-right--photo .hero-pills {
    z-index: 2;
}
.hero-right--photo .hero-pills .pill {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.25);
    color: #fff;
    backdrop-filter: blur(6px);
}
.hero-right--photo .hero-pills .pill-dot {
    background: #52b788;
}

/* ─────────────────────────────────────────
   WHY US — FIELD PHOTO
───────────────────────────────────────── */
.why-field-photo {
    margin-top: 24px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.why-field-photo img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    border-radius: 6px;
}

.why-photo-caption {
    display: block;
    font-size: 11px;
    color: #6b9477;
    letter-spacing: .04em;
    margin-top: 8px;
    font-style: italic;
}

/* ─────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────── */

/* Intro split */
.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 72px 40px;
    background: #fff;
}
.about-intro-text p {
    color: var(--sh-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 16px;
}
.about-intro-stats {
    display: flex;
    gap: 32px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--sh-border);
    flex-wrap: wrap;
}
.ai-stat .num {
    font-family: var(--font-serif);
    font-size: 32px;
    color: var(--sh-forest);
    line-height: 1;
    display: block;
}
.ai-stat .lbl {
    font-size: 11px;
    color: var(--sh-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
    display: block;
}
.about-image-block {
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 420px;
}
.about-image-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Mission / Vision / Values */
.mission-vision {
    background: var(--sh-cream);
    padding: 72px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.mv-card {
    background: #fff;
    border: 1px solid var(--sh-border);
    border-radius: var(--radius-md);
    padding: 32px 28px;
}
.mv-card .icon {
    width: 44px;
    height: 44px;
    background: #eaf5ee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--sh-mid);
}
.mv-card .icon svg { width: 22px; height: 22px; }
.mv-card h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--sh-forest);
    margin-bottom: 12px;
}
.mv-card p { font-size: 13px; color: var(--sh-muted); line-height: 1.7; }

/* Why choose us — about page */
.about-why {
    background: #fff;
    padding: 72px 40px;
}
.about-why-header {
    max-width: 600px;
    margin-bottom: 48px;
}
.about-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.aw-card {
    background: var(--sh-cream);
    border: 1px solid var(--sh-border);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    transition: border-color .2s, box-shadow .2s;
}
.aw-card:hover {
    border-color: var(--sh-light);
    box-shadow: 0 4px 20px rgba(26,61,43,.07);
}
.aw-icon {
    width: 40px;
    height: 40px;
    background: #eaf5ee;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--sh-mid);
}
.aw-icon svg { width: 20px; height: 20px; }
.aw-card h4 {
    font-size: 15px;
    font-weight: 500;
    color: var(--sh-forest);
    margin-bottom: 10px;
}
.aw-card p { font-size: 13px; color: var(--sh-muted); line-height: 1.6; }

/* Quality objectives */
.about-quality {
    background: var(--sh-forest);
    padding: 72px 40px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: start;
}
.about-quality .section-label { color: #52b788; }
.about-quality .section-label::before { background: #52b788; }
.about-quality .section-h2 { color: #fff; }
.about-quality .section-lead { color: #8aaa96; }
.aq-right { display: flex; flex-direction: column; gap: 0; }
.aq-item {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    align-items: flex-start;
}
.aq-item:last-child { border-bottom: none; }
.aq-num {
    font-family: var(--font-serif);
    font-size: 28px;
    color: rgba(82,183,136,.35);
    line-height: 1;
    flex-shrink: 0;
    width: 36px;
}
.aq-item h4 { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 6px; }
.aq-item p  { font-size: 13px; color: #7a9e8a; line-height: 1.6; }

/* Timeline */
.about-timeline {
    background: var(--sh-cream);
    padding: 72px 40px;
}
.about-timeline .section-label { justify-content: flex-start; }
.timeline {
    position: relative;
    max-width: 800px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 68px;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--sh-border);
}
.tl-item {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 40px;
    position: relative;
}
.tl-item:last-child { margin-bottom: 0; }
.tl-year {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--sh-forest);
    font-weight: 500;
    width: 52px;
    flex-shrink: 0;
    padding-top: 2px;
    text-align: right;
}
.tl-dot {
    width: 12px;
    height: 12px;
    background: var(--sh-light);
    border-radius: 50%;
    border: 2px solid var(--sh-cream);
    flex-shrink: 0;
    margin-top: 5px;
    position: relative;
    z-index: 1;
}
/* The dot is rendered via ::before on tl-item for simplicity */
.tl-item::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--sh-light);
    border-radius: 50%;
    border: 2px solid var(--sh-cream);
    flex-shrink: 0;
    margin-top: 6px;
    position: relative;
    z-index: 1;
    display: block;
}
.tl-content {
    background: #fff;
    border: 1px solid var(--sh-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    flex: 1;
}
.tl-content h4 {
    font-size: 15px;
    font-weight: 500;
    color: var(--sh-forest);
    margin-bottom: 8px;
}
.tl-content p { font-size: 13px; color: var(--sh-muted); line-height: 1.6; }

/* CTA strip — shared by About and Services */
.about-cta {
    background: var(--sh-warm);
    padding: 72px 40px;
    text-align: center;
}
.about-cta-inner { max-width: 560px; margin: 0 auto; }
.about-cta h2 {
    font-family: var(--font-serif);
    font-size: 36px;
    color: var(--sh-forest);
    margin-bottom: 12px;
}
.about-cta p { color: var(--sh-muted); font-size: 15px; }

/* ─────────────────────────────────────────
   SERVICES PAGE
───────────────────────────────────────── */

/* Intro */
.svc-page-intro {
    background: #fff;
    padding: 64px 40px;
    border-bottom: 1px solid var(--sh-border);
}
.svc-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.svc-intro-creds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--sh-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.svc-cred-item {
    background: var(--sh-cream);
    padding: 28px 24px;
}
.sci-num {
    font-family: var(--font-serif);
    font-size: 36px;
    color: var(--sh-forest);
    line-height: 1;
    display: block;
    margin-bottom: 6px;
}
.sci-lbl {
    font-size: 12px;
    color: var(--sh-muted);
    line-height: 1.4;
    display: block;
}

/* Service detail cards */
.svc-full-list {
    background: var(--sh-cream);
    padding: 64px 40px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.svc-detail-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--sh-border);
}
.sdc-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    border-bottom: 1px solid var(--sh-border);
    background: #fff;
}
.sdc-num {
    font-family: var(--font-serif);
    font-size: 36px;
    color: #e8e0d0;
    line-height: 1;
    flex-shrink: 0;
    width: 44px;
}
.sdc-icon {
    width: 44px;
    height: 44px;
    background: #eaf5ee;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sh-mid);
}
.sdc-icon svg { width: 22px; height: 22px; }
.sdc-tag {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sh-light);
    margin-bottom: 4px;
}
.sdc-title {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--sh-forest);
    line-height: 1.2;
}
.sdc-body {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
}
.sdc-description {
    padding: 28px 32px;
    border-right: 1px solid var(--sh-border);
}
.sdc-description p {
    font-size: 14px;
    color: var(--sh-muted);
    line-height: 1.7;
    margin-bottom: 14px;
}
.sdc-description p:last-child { margin-bottom: 0; }
.sdc-details {
    padding: 28px 32px;
    background: var(--sh-cream);
}
.sdc-details h5 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sh-muted);
    margin-bottom: 14px;
}
.sdc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.sdc-list li {
    font-size: 13px;
    color: var(--sh-text);
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}
.sdc-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--sh-light);
    font-size: 11px;
}
.sdc-sectors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--sh-border);
}
.sdc-sectors span {
    font-size: 10px;
    background: #eaf5ee;
    color: var(--sh-mid);
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .04em;
}

/* Process steps */
.svc-process {
    background: #fff;
    padding: 72px 40px;
}
.svc-process .section-label { justify-content: center; }
.process-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
}
.ps-step {
    flex: 1;
    text-align: center;
    padding: 0 16px;
}
.ps-num {
    width: 48px;
    height: 48px;
    background: var(--sh-forest);
    border-radius: 50%;
    font-family: var(--font-serif);
    font-size: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.ps-content h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--sh-forest);
    margin-bottom: 8px;
}
.ps-content p { font-size: 12px; color: var(--sh-muted); line-height: 1.6; }
.ps-connector {
    width: 40px;
    height: 1px;
    background: var(--sh-border);
    flex-shrink: 0;
    margin-top: 24px;
}

/* ─────────────────────────────────────────
   RESPONSIVE — ABOUT & SERVICES
───────────────────────────────────────── */
@media (max-width: 1024px) {
    .about-intro        { grid-template-columns: 1fr; }
    .mission-vision     { grid-template-columns: 1fr; }
    .about-why-grid     { grid-template-columns: repeat(2, 1fr); }
    .about-quality      { grid-template-columns: 1fr; }
    .svc-intro-grid     { grid-template-columns: 1fr; }
    .svc-intro-creds    { grid-template-columns: repeat(2,1fr); }
    .sdc-body           { grid-template-columns: 1fr; }
    .sdc-description    { border-right: none; border-bottom: 1px solid var(--sh-border); }
    .process-steps      { flex-wrap: wrap; justify-content: center; }
    .ps-connector       { display: none; }
    .ps-step            { flex: 0 0 calc(33% - 16px); }
}

@media (max-width: 768px) {
    .about-intro, .mission-vision, .about-why,
    .about-quality, .about-timeline, .svc-page-intro,
    .svc-full-list, .svc-process { padding: 48px 20px; }
    .about-why-grid     { grid-template-columns: 1fr; }
    .svc-intro-creds    { grid-template-columns: 1fr; }
    .sdc-header         { padding: 20px; flex-wrap: wrap; }
    .sdc-description, .sdc-details { padding: 20px; }
    .ps-step            { flex: 0 0 calc(50% - 16px); }
    .timeline::before   { left: 60px; }
    .tl-year            { font-size: 13px; width: 44px; }
}

/* ─────────────────────────────────────────
   TEAM PAGE
───────────────────────────────────────── */

/* Credential strip */
.team-strip {
    background: var(--sh-forest);
    padding: 20px 40px;
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}
.ts-item { text-align: center; }
.ts-num {
    display: block;
    font-family: var(--font-serif);
    font-size: 22px;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}
.ts-lbl {
    display: block;
    font-size: 11px;
    color: #7ecba1;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* Profile section — alternating bg */
.team-profile {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    border-bottom: 1px solid var(--sh-border);
}
.team-profile--alt { background: var(--sh-cream); }
.team-profile:not(.team-profile--alt) { background: #fff; }

/* Photo column */
.tp-photo-col {
    padding: 48px 32px;
    border-right: 1px solid var(--sh-border);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.tp-photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 200px;
    margin: 0 auto;
}
.tp-initials {
    font-family: var(--font-serif);
    font-size: 48px;
    color: rgba(255,255,255,.35);
    letter-spacing: .02em;
}

/* Contact links */
.tp-contact { display: flex; flex-direction: column; gap: 10px; }
.tp-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--sh-muted);
    transition: color .2s;
    word-break: break-all;
}
.tp-contact-item:hover { color: var(--sh-forest); }
.tp-contact-item svg {
    width: 16px;
    height: 16px;
    stroke: var(--sh-light);
    stroke-width: 1.5;
    fill: none;
    flex-shrink: 0;
}

/* Registration badges */
.tp-registrations { display: flex; flex-direction: column; gap: 6px; }
.tp-reg-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--sh-muted);
    margin-bottom: 4px;
}
.tp-reg {
    font-size: 11px;
    background: #eaf5ee;
    color: var(--sh-mid);
    padding: 5px 10px;
    border-radius: 4px;
    line-height: 1.4;
    display: block;
}
.team-profile--alt .tp-reg { background: #fff; }

/* Content column */
.tp-content-col { padding: 48px 48px; }

.tp-summary {
    font-size: 15px;
    color: var(--sh-muted);
    line-height: 1.7;
    font-weight: 300;
    max-width: 640px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--sh-border);
}

/* Education */
.tp-education {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--sh-border);
}
.tp-education h4,
.tp-experience h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--sh-muted);
    margin-bottom: 14px;
}
.tp-education ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tp-education li { font-size: 13px; color: var(--sh-text); line-height: 1.5; padding-left: 14px; position: relative; }
.tp-education li::before { content: '·'; position: absolute; left: 0; color: var(--sh-light); font-size: 16px; line-height: 1.3; }
.tp-education li strong { color: var(--sh-forest); font-weight: 500; }
.tp-education li em { color: var(--sh-muted); font-style: normal; font-size: 12px; }

/* Experience */
.tp-exp-list { display: flex; flex-direction: column; gap: 20px; }
.tp-exp-item {
    padding: 18px 20px;
    background: var(--sh-cream);
    border-radius: var(--radius);
    border-left: 3px solid var(--sh-light);
}
.team-profile--alt .tp-exp-item { background: #fff; }
.tp-exp-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
    margin-bottom: 8px;
}
.tp-exp-role {
    font-size: 14px;
    font-weight: 500;
    color: var(--sh-forest);
}
.tp-exp-org {
    font-size: 13px;
    color: var(--sh-mid);
}
.tp-exp-date {
    font-size: 11px;
    color: var(--sh-muted);
    margin-left: auto;
}
.tp-exp-item > p {
    font-size: 13px;
    color: var(--sh-muted);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .team-profile { grid-template-columns: 240px 1fr; }
    .tp-content-col { padding: 40px 32px; }
}
@media (max-width: 768px) {
    .team-strip { padding: 20px; gap: 24px; }
    .team-profile { grid-template-columns: 1fr; }
    .tp-photo-col { border-right: none; border-bottom: 1px solid var(--sh-border); padding: 32px 20px; flex-direction: row; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
    .tp-photo { max-width: 100px; aspect-ratio: 1; flex-shrink: 0; }
    .tp-content-col { padding: 32px 20px; }
    .tp-exp-date { margin-left: 0; }
}

/* Powered by */
.footer-poweredby {
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.04);
}
.footer-poweredby span {
    font-size: 11px;
    color: #3d6b50;
    letter-spacing: .04em;
}
.footer-poweredby a {
    color: #52836a;
    text-decoration: none;
    transition: color .2s;
}
.footer-poweredby a:hover { color: #3db87a; }