/*
 * IDAD Foundation  -  Theme CSS v3.0
 * Elite spacing, precise margins, LMH structure
 * Colors driven by CSS vars from customizer (inc/customizer.php)
 */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300&display=swap');

/* ============================================================
   RESET & BASE
============================================================ */
*, *:before, *:after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: none; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: #fff; }
body {
    font-family: 'Lato', Arial, Verdana, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #193946;
}
form { margin: 0; padding: 0; }
img { border: 0; max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { font-family: 'Lato', Arial, Verdana, sans-serif; }
h1 { margin: 0 0 24px 0; font-size: 72px; line-height: 76px; font-weight: 900; }
h2 { margin: 0 0 20px 0; font-size: 40px; line-height: 46px; font-weight: 900; letter-spacing: 0.5px; }
h3 { margin: 0 0 16px 0; font-size: 26px; line-height: 32px; font-weight: 900; }
h4 { margin: 0 0 12px 0; font-size: 20px; line-height: 26px; font-weight: 700; }
p { margin: 0 0 28px 0; }
p:last-child { margin: 0; }
a { transition: 0.25s ease; color: #4bb7d6; text-decoration: none; }
a:hover, a:focus { color: #4bb7d6; text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
nav ul { margin: 0; padding: 0; list-style: none; }
button { font-family: 'Lato', Arial, Verdana, sans-serif; cursor: pointer; }

/* ============================================================
   ACCESSIBILITY
============================================================ */
.visually-hidden,
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
a#skip, a#skip:hover {
    position: absolute; left: 0; top: -500px;
    width: 1px; height: 1px; overflow: hidden;
    padding: 12px 24px; background: #193946;
    display: block; color: #fff; font-weight: 700;
}
a#skip:active, a#skip:focus {
    position: fixed; width: auto; height: auto;
    top: 10px; left: 10px; z-index: 99999;
}

/* ============================================================
   UTILITY CLASSES
============================================================ */
.large-text  { font-size: 26px; line-height: 34px; font-weight: 300; }
.credits     { font-size: 13px; line-height: 18px; color: #acacac; }
.eyebrow     { font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.7); margin: 0 0 16px 0; }
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

/* ============================================================
   LAYOUT  -  section wrapper
   max-width 1470px, padding 0 60px (generous, elite feel)
============================================================ */
.section > div {
    max-width: 1470px;
    margin: 0 auto;
    padding: 0 60px;
    position: relative;
}
.section.grey       { background: #e5e5e5; }
.section.blue       { background: #4bb7d6; }
.section.dark       { background: #193946; }
.section.gutter > div        { padding-top: 80px;  padding-bottom: 80px;  }
.section.medium-gutter > div { padding-top: 100px; padding-bottom: 100px; }
.section.large-gutter > div  { padding-top: 120px; padding-bottom: 120px; }
.section.slim > div          { padding-top: 50px;  padding-bottom: 50px;  }

/* Section headers */
.section-header { text-align: center; margin: 0 auto 80px auto; }
.section-header h2 {
    margin: 0;
    font-size: 40px; line-height: 46px;
    text-transform: uppercase; letter-spacing: 1px; font-weight: 900;
}
.section-header.left        { text-align: left; }
.section-header.small       { margin: 0 0 40px 0; }
.section-header.small h2    { font-size: 28px; line-height: 34px; }
.section-header.medium      { max-width: 900px; }

/* Section footers */
.section-footer              { margin: 70px 0 0 0; color: #525151; }
.section-footer.split        { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.section-footer.top-border   { border-top: solid 1px #dadada; padding: 48px 0 0 0; }

/* HR */
hr { border: none; font-size: 0; line-height: 0; margin: 48px 0; }

/* ============================================================
   SOCIAL LINKS
============================================================ */
.social-links                { list-style: none; margin: 0; padding: 0; font-size: 28px; line-height: 28px; }
.social-links li             { display: inline-block; margin: 0 8px; }
.social-links a              { color: #434343; text-decoration: none; position: relative; top: 0; transition: 0.25s ease; }
.social-links a:hover        { color: #4bb7d6; top: -4px; text-decoration: none; }

/* ============================================================
   ACTION LINK  -  uppercase arrow CTA
============================================================ */
.action-link {
    font-size: 15px; line-height: 20px; font-weight: 900;
    padding-right: 22px; position: relative; display: inline-block;
    text-transform: uppercase; letter-spacing: 1.5px;
    text-decoration: none; color: #193946;
}
.action-link:after {
    font-family: 'Font Awesome 6 Free'; content: "\f054"; font-weight: 900;
    position: absolute; top: 1px; right: 0; transition: 0.25s ease;
}
.action-link.green { color: #69AA55; }
.action-link.blue  { color: #4BB7D6; }
.action-link.white { color: #fff; }
.action-link:hover, .action-link:focus                   { color: #4bb7d6 !important; text-decoration: none; }
.action-link.blue:hover, .action-link.blue:focus         { color: #00394a; }
.action-link:hover:after, .action-link:focus:after       { right: -6px; }

/* ============================================================
   BUTTON
============================================================ */
.btn {
    display: inline-block; padding: 15px 32px;
    font-size: 13px; line-height: 18px; font-family: 'Lato', Arial, sans-serif;
    background: #8e3168; font-weight: 900; text-transform: uppercase;
    letter-spacing: 2px; text-decoration: none; border: none;
    color: #fff; cursor: pointer; transition: 0.25s ease;
}
.btn:hover, .btn:focus { background: #4bb7d6; color: #fff; text-decoration: none; }

/* ============================================================
   HEADER  -  two-bar, fixed, exact LMH
============================================================ */
#header {
    position: fixed;
    top: 0; right: 0; left: 0;
    transition: 0.5s ease;
    z-index: 1000;
}
#header .section > div { max-width: 100%; padding: 0 60px; }

/* Upper bar */
/* Upper bar  -  exact LMH:
   text left (free-floating), form floated right with email+submit */
/* ================================================================
   UPPER BAR - original working v3 CSS (exact LMH)
================================================================ */
#header .upper { background: #193946; }
#header .upper > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#header .upper form {
    display: flex;
    align-items: center;
}
#header .upper form p {
    color: #e5e5e5;
    font-size: 13px;
    margin: 0 18px 0 0;
    line-height: 40px;
    white-space: nowrap;
}
#header .upper form [type="email"] {
    background: #e5e5e5;
    border: none;
    font-size: 13px;
    color: #333;
    padding: 0 12px;
    height: 40px;
    width: 200px;
    outline: none;
    font-family: 'Lato', Arial, sans-serif;
}
#header .upper form [type="email"]::placeholder { color: #888; }
#header .upper form [type="submit"] {
    background: #8e3168;
    color: #fff;
    border: none;
    height: 40px;
    padding: 0 20px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Lato', Arial, sans-serif;
}
#header .upper form [type="submit"]:hover { background: #4bb7d6; }
@media (max-width: 768px) { #header .upper { display: none; } }
/* Lower nav bar */
#header .lower > div {
    height: 120px;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Logo */
#header .logo {
    position: absolute; top: 50%; left: 60px;
    transform: translateY(-50%);
    transition: 0.5s ease;
    text-decoration: none;
}
#header .logo img    { max-height: 72px; width: auto; display: block; }
#header .logo .site-name {
    display: block; font-size: 22px; font-weight: 900;
    color: #193946; line-height: 1.15; text-decoration: none;
    letter-spacing: -0.3px;
}
#header .logo .site-tag {
    display: block; font-size: 10px; font-weight: 400;
    color: #888; text-transform: uppercase;
    letter-spacing: 0.12em; margin-top: 4px;
}

/* Primary nav */
#header .primary-nav {
    position: absolute; bottom: 0; right: 60px;
    transition: 0.5s ease;
}
#header .primary-nav a { color: #00394a; text-decoration: none; }
#header .primary-nav > ul > li {
    float: left; margin-left: 2px; position: relative;
}
#header .primary-nav > ul > li > a {
    display: block; position: relative;
    font-size: 13px; line-height: 20px;
    padding: 18px 40px 18px 18px;
    text-transform: uppercase; letter-spacing: 1.2px;
    font-weight: 900; transition: 0.3s ease;
    white-space: nowrap;
}
#header .primary-nav > ul > li > a:before {
    position: absolute; content: "";
    left: 0; right: 0; top: 0;
    height: 4px; background: #4BB7D6;
    opacity: 0; transition: 0.3s ease;
}
#header .primary-nav > ul > li:hover > a:before,
#header .primary-nav > ul > li.active > a:before  { opacity: 1; }
#header .primary-nav > ul > li:hover > a,
#header .primary-nav > ul > li.active > a          { background: #f5f5f5; }
#header .primary-nav > ul > li.menu-item-has-children > a:after {
    font-family: 'Font Awesome 6 Free'; content: "\f078"; font-weight: 900;
    color: #4BB7D6; position: absolute; top: 18px; right: 14px;
    font-size: 10px;
}

/* Dropdown */
#header .primary-nav > ul > li > .sub-menu {
    position: absolute; top: 100%; left: 0;
    background: #f0f0f0;
    padding: 16px 24px 28px 24px;
    min-width: 220px;
    opacity: 0; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
#header .primary-nav > ul > li:hover > .sub-menu,
#header .primary-nav > ul > li:focus-within > .sub-menu,
#header .primary-nav > ul > li.active > .sub-menu {
    opacity: 1; pointer-events: all; transform: translateY(0);
}
#header .primary-nav > ul > li > .sub-menu > li > a {
    display: block; padding: 10px 36px 10px 0;
    font-size: 14px; line-height: 20px;
    color: #193946; position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
#header .primary-nav > ul > li > .sub-menu > li:last-child > a { border-bottom: none; }
#header .primary-nav > ul > li > .sub-menu > li > a:after {
    font-family: 'Font Awesome 6 Free'; content: "\f054"; font-weight: 900;
    color: #4BB7D6; position: absolute;
    top: 50%; right: 0; transform: translateY(-50%);
    font-size: 11px; transition: 0.2s ease;
}
#header .primary-nav > ul > li > .sub-menu > li > a:hover { text-decoration: underline; color: #193946; }
#header .primary-nav > ul > li > .sub-menu > li > a:hover:after { right: -5px; }
/* Sub-sub menu */
#header .primary-nav > ul > li > .sub-menu > li > .sub-menu {
    padding: 6px 0 0 20px;
}
#header .primary-nav > ul > li > .sub-menu > li > .sub-menu > li > a {
    display: block; padding: 6px 20px 6px 12px;
    font-size: 13px; color: #555; position: relative;
    border-bottom: none;
}
#header .primary-nav > ul > li > .sub-menu > li > .sub-menu > li > a:before {
    content: ""; position: absolute; width: 6px; height: 6px;
    background: #33691E; border-radius: 50%; left: 0; top: 12px;
}
#header .primary-nav > ul > li > .sub-menu > li > .sub-menu > li > a:after { content: none; }
#header .primary-nav > ul > li > .sub-menu > li > .sub-menu > li > a:hover { text-decoration: underline; }

/* Donate button */
#header .primary-nav > ul > li.donate { margin-left: 16px; }
#header .primary-nav > ul > li.donate > a {
    background: #4bb7d6; color: #fff !important;
    padding-left: 24px; padding-right: 24px;
}
#header .primary-nav > ul > li.donate > a:before,
#header .primary-nav > ul > li.donate > a:after { display: none !important; }
#header .primary-nav > ul > li.donate > a:hover { background: #00394a; }

/* Secondary nav */
#header .secondary-nav {
    position: absolute; top: 0; right: 60px;
    height: 48px; display: flex; align-items: center;
    font-size: 12px; line-height: 20px;
    color: #666; font-weight: 400;
}
#header .secondary-nav > ul { display: flex; align-items: center; }
#header .secondary-nav > ul > li { display: flex; align-items: center; }
#header .secondary-nav > ul > li + li { border-left: 1px solid #d8d8d8; }
#header .secondary-nav > ul > li > a {
    padding: 0 14px; color: #555; text-decoration: none;
    font-size: 12px; transition: color 0.2s;
    white-space: nowrap;
}
#header .secondary-nav > ul > li > a:hover { color: #193946; text-decoration: underline; }
#header .secondary-nav > ul > li.search > a:before {
    font-family: 'Font Awesome 6 Free'; content: "\f002"; font-weight: 900;
    display: inline-block; vertical-align: middle;
    margin-right: 6px; font-size: 13px;
}

/* Search form */
#header .search-form {
    position: absolute; top: 14px; right: 60px;
    width: 320px; opacity: 0; pointer-events: none; transition: 0.4s ease;
}
#header .search-form [type="text"] {
    display: block; width: 100%;
    padding: 8px 36px 8px 0;
    border: none; border-bottom: 2px solid #193946;
    font-size: 14px; line-height: 20px;
    background: transparent; outline: none;
    font-family: 'Lato', sans-serif;
}
#header .search-form [type="submit"] {
    position: absolute; top: 6px; right: 0;
    font-size: 16px; line-height: 22px;
    background: none; padding: 0; margin: 0;
    border: none; width: 24px; text-align: center; cursor: pointer;
}
#header .search-form .close {
    position: absolute; left: -28px; top: 6px;
    font-size: 16px; padding: 0; border: none;
    background: none; cursor: pointer; color: #666;
}
#header.search-active .search-form  { opacity: 1; pointer-events: all; }
#header.search-active .secondary-nav { opacity: 0; pointer-events: none; }

/* Toggle / mobile */
#header .toggle-menu {
    position: absolute; bottom: 24px; right: 20px;
    display: none; color: #193946;
    background: none; border: none; cursor: pointer; padding: 0;
}
#header .toggle-menu > div { display: inline-block; width: 30px; height: 22px; }
#header .toggle-menu > div span {
    display: block; width: 30px; height: 3px;
    margin-bottom: 6px; background: #193946;
    transition: 0.3s ease; border-radius: 2px;
}

/* Page body padding */
#page { padding-top: 160px; min-width: 320px; overflow-x: hidden; }
body.admin-bar #header { top: 32px; }

/* ============================================================
   MOBILE MENU
============================================================ */
#mobile-menu {
    width: 280px; position: fixed; right: -280px; top: 0;
    height: 100%; background: #fff;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transition: right 0.3s ease; z-index: 1001;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}
#mobile-menu .nav { padding: 64px 32px 40px 32px; }
#mobile-menu .close {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; cursor: pointer;
    font-size: 22px; color: #193946; padding: 8px; line-height: 1;
}
#mobile-menu .primary-nav > ul > li > a {
    display: block; padding: 14px 0;
    font-size: 15px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px;
    color: #193946; text-decoration: none;
    border-bottom: 1px solid #eee;
}
#mobile-menu .primary-nav > ul > li + li { }
#mobile-menu .primary-nav > ul > li .sub-menu { padding: 6px 0 6px 20px; }
#mobile-menu .primary-nav > ul > li .sub-menu li a {
    display: block; padding: 8px 0;
    font-size: 14px; font-weight: 400;
    color: #444; text-decoration: none;
    border-bottom: none; text-transform: none; letter-spacing: 0;
}
#mobile-menu .primary-nav > ul > li .sub-menu li a:hover { color: #193946; }
#mobile-menu .secondary-nav {
    margin: 24px 0 0 0; padding: 24px 0 0 0;
    border-top: 1px solid #eee;
}
#mobile-menu .secondary-nav > ul > li > a {
    display: block; padding: 10px 0;
    font-size: 13px; color: #666; text-decoration: none;
}
body.mobile-menu #mobile-menu { right: 0; }
body.mobile-menu #page        { right: 280px; transition: right 0.3s ease; }

/* ============================================================
   HERO  -  full bleed, dramatic
============================================================ */
#hero {
    background: #193946 no-repeat center 35%;
    background-size: cover;
    position: relative;
}
#hero:before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 100%);
}
#hero .content {
    padding: 160px 0 320px 0;
    max-width: 700px;
    position: relative; z-index: 1;
}
#hero strong {
    display: block;
    font-size: 72px; line-height: 76px;
    color: #fff; font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
}
#hero hr {
    margin: 32px 0; height: 10px;
    background: #FDD835; border: none;
    width: 80px;
}
#hero a:not(.action-link) { color: rgba(255,255,255,0.85); text-decoration: none; }
#hero a:not(.action-link):hover { color: #fff; }
#hero .cta-label {
    font-size: 13px; font-weight: 900; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(255,255,255,0.9);
}
#hero .cta-label a { color: rgba(255,255,255,0.9); border-bottom: 2px solid rgba(255,255,255,0.4); padding-bottom: 2px; }
#hero .cta-label a:hover { color: #fff; border-bottom-color: #FDD835; text-decoration: none; }

/* ============================================================
   HERO FEATURE PANEL  -  overlaps hero, white box
============================================================ */
.hero-feature {
    padding: 80px 90px;
    background: #fff;
    display: flex; flex-wrap: wrap; align-items: center;
    position: relative; top: -180px; margin-bottom: -180px;
    box-shadow: 0 4px 40px rgba(0,0,0,0.10);
}
.hero-feature .photo { width: 50%; }
.hero-feature .photo img { display: block; width: 100%; }
.hero-feature .content { width: 50%; padding: 0 0 0 80px; }
.hero-feature h2 {
    margin: 0 0 20px 0;
    font-size: 36px; line-height: 42px;
    text-transform: uppercase; font-weight: 900;
    color: #193946;
}
.hero-feature hr {
    margin: 32px 0; height: 10px;
    background: #33691E; width: 80px; border: none;
}
.hero-feature .large-text { margin-bottom: 20px; }
.hero-feature p { font-size: 17px; line-height: 27px; color: #444; margin-bottom: 20px; }

/* ============================================================
   IMPACT TILES  -  exact LMH: 56px stat, 10px colored border
============================================================ */
.impact-section { padding: 80px 0 60px 0; }
.impact-section .section-header.small { margin: 0 0 48px 0; }

.impact-tiles {
    display: flex; flex-wrap: wrap;
    margin: 0 -28px -60px -28px;
}
.impact-tiles > div {
    width: 33.3333%;
    padding: 0 28px 60px 28px;
    display: flex;
}
.impact-tiles > div > div {
    background: #fff;
    box-shadow: 0 2px 24px rgba(0,0,0,0.10);
    width: 100%;
    display: flex; flex-direction: column;
}
.impact-tiles .photo { flex-shrink: 0; }
.impact-tiles .photo img {
    display: block; width: 100%;
    border-bottom: solid 10px #4BB7D6;
    aspect-ratio: 4/3; object-fit: cover;
}
.impact-tiles .content {
    padding: 32px 44px 44px 44px;
    text-align: center; flex-grow: 1;
    display: flex; flex-direction: column; align-items: center;
}
.impact-tiles em {
    display: block;
    font-weight: 900; font-size: 56px; line-height: 62px;
    color: #4BB7D6;
    text-transform: uppercase; letter-spacing: 1px;
    margin: 0 0 12px 0; font-style: normal;
}
.impact-tiles .content p {
    font-size: 16px; line-height: 25px;
    color: #193946; margin: 0;
}

/* ============================================================
   JOIN TEAM BANNER
============================================================ */
.join-team-banner { background: #193946; }
.join-team-banner > div { padding-top: 140px; padding-bottom: 80px; }

.join-team-section { position: relative; }
.join-team-section .container { position: relative; z-index: 1; }
.join-team-section .content { max-width: 420px; }
.join-team-section h2 {
    margin: 0 0 16px 0;
    font-size: 40px; line-height: 46px;
    text-transform: uppercase; letter-spacing: 1px;
    font-weight: 900; color: #fff;
}
.join-team-section > .container > .content > p {
    font-size: 17px; line-height: 27px;
    color: rgba(255,255,255,0.75); margin-bottom: 32px;
}
.join-team-section h3 {
    margin: 32px 0 16px 0;
    font-size: 13px; line-height: 18px;
    text-transform: uppercase; letter-spacing: 2px;
    color: rgba(255,255,255,0.5); font-weight: 700;
}

/* Slideshow */
.join-team-section .slider {
    position: absolute; top: -140px; bottom: -80px;
    right: 0; width: calc(100% - 520px);
    z-index: 0; overflow: hidden;
}
.join-team-section .slide {
    position: absolute; inset: 0;
    background: no-repeat center center; background-size: cover;
    opacity: 0; transition: opacity 1.4s ease;
}
.join-team-section .slide.is-active { opacity: 1; }

/* Position cards */
.position-cards {
    display: flex; flex-wrap: wrap;
    margin: 0 -6px 28px -6px;
    max-width: 700px;
}
.position-cards > div {
    width: 33.3333%;
    padding: 0 6px 12px 6px;
    display: flex;
}
.position-cards > div > div {
    background: #193946;
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    padding: 22px 22px 88px 22px;
    position: relative;
    width: 100%;
    transition: border-color 0.2s;
}
.position-cards > div > div:hover { border-color: rgba(255,255,255,0.3); }
.position-cards .title {
    display: block; font-weight: 700;
    font-size: 15px; line-height: 21px;
    color: #fff; margin: 0 0 6px 0;
}
.position-cards .location {
    display: block; font-size: 13px;
    color: rgba(255,255,255,0.55); line-height: 18px;
}
.position-cards .action {
    position: absolute; left: 22px; bottom: 22px; margin: 0;
}
.position-cards .action:before {
    position: absolute; content: "";
    width: 64px; height: 8px;
    background: #FDD835; top: -26px; left: 0;
}

/* ============================================================
   NEWS BANNER
============================================================ */
.news-banner { position: relative; overflow: hidden; }
.news-banner:before {
    position: absolute; content: "";
    top: 320px; right: -10000px; bottom: 0; left: -10000px;
    background: #4bb7d6;
}
.news-banner > div { padding-top: 80px; padding-bottom: 80px; }
.news-banner .section-header.small { margin-bottom: 48px; }

.news-tiles {
    display: flex; flex-wrap: wrap;
    margin: 0 -16px -60px -16px;
}
.news-tiles > div {
    width: 25%; padding: 0 16px 60px 16px; display: flex;
}
.news-tiles > div > div {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    width: 100%; display: flex; flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.news-tiles > div > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.news-tiles .photo a {
    display: block;
    background: no-repeat center center; background-size: cover;
    padding-bottom: 68%;
    border-bottom: solid 10px #8E3168;
    transition: opacity 0.25s ease;
}
.news-tiles .photo a:hover { opacity: 0.92; }
.news-tiles .photo img { display: none; }
.news-tiles .content {
    padding: 24px 24px 72px 24px;
    position: relative; flex-grow: 1;
}
.news-tiles .category {
    display: block; margin: 0 0 10px 0;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px;
    color: #8E3168;
}
.news-tiles .title {
    font-size: 15px; line-height: 22px;
    font-weight: 700; color: #193946;
    margin: 0 0 12px 0; display: block;
}
.news-tiles .action {
    position: absolute; left: 24px; bottom: 24px;
}

/* ============================================================
   VISION / VIDEO BANNER
============================================================ */
.video-banner {
    background: #33691E no-repeat center center;
    background-size: cover; position: relative; overflow: hidden;
}
.video-banner:before {
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,0.25);
}
.video-banner .content {
    padding: 120px 60px; max-width: 800px;
    margin: 0 auto; position: relative; z-index: 1;
    font-size: 38px; line-height: 48px;
    font-weight: 300;
    text-transform: uppercase; letter-spacing: 1px;
    text-align: center; color: #fff;
}
.video-banner .content strong {
    display: inline; color: #FDD835;
    font-weight: 900;
}
.video-banner .content p { margin: 0; color: #fff; }

/* ============================================================
   FOOTER  -  exact LMH proportions
============================================================ */
#footer { border-top: solid 10px #69aa55; font-size: 16px; line-height: 22px; }
#footer .headline {
    display: block; margin: 0 0 18px 0; color: #333;
    text-transform: uppercase; letter-spacing: 2px;
    font-weight: 900; font-size: 12px;
}

/* Upper */
/* Footer matches LMH: grey bg, green top border, dark nav text */
#footer { border-top: 8px solid #33691E; }
#footer .upper { background: #e5e5e5; }
#footer .upper > div { padding-top: 72px; padding-bottom: 88px; }
#footer .upper a { color: #193946; text-decoration: none; }
#footer .upper a:hover { text-decoration: underline; color: #33691E; }
#footer .lower { background: #fff; border-top: 1px solid #ddd; }

/* Container: right (nav cols) then left (newsletter/social)  -  flex row-reverse like LMH */
#footer .upper .container {
    display: flex; flex-wrap: wrap;
    flex-direction: row-reverse; gap: 0;
}
#footer .upper .left  { width: 28%; padding: 0 72px 0 0; }
#footer .upper .right { width: 72%; display: flex; flex-wrap: wrap; gap: 0; }
#footer .upper .right > div { width: 25%; padding: 0 40px 0 0; }

/* Nav link lists */
#footer .upper .links { list-style: none; margin: 0; padding: 0; }
#footer .upper .links > li + li { margin-top: 12px; }
#footer .upper .links > li > a {
    font-weight: 900; text-transform: uppercase;
    letter-spacing: 1px; font-size: 13px;
}
#footer .upper .links > li > ul {
    margin: 10px 0 32px 0; padding: 0; list-style: none;
}
#footer .upper .links > li > ul > li + li { margin-top: 8px; }
#footer .upper .links > li > ul > li > a {
    font-size: 14px; font-weight: 400; color: #555;
}
#footer .upper .links > li > ul > li > a:hover { color: #193946; }

/* Newsletter widget */
#footer .newsletter { margin: 0 0 48px 0; }
#footer .newsletter .headline { color: #8E3168; }
#footer .newsletter form {
    background: #fff; padding: 8px 8px 8px 12px;
    position: relative; display: flex;
}
#footer .newsletter input[type="email"] {
    flex: 1; font-size: 15px; line-height: 20px;
    padding: 8px 0; border: none; outline: none;
    background: transparent; min-width: 0;
    font-family: 'Lato', sans-serif;
}
#footer .newsletter input[type="email"]::placeholder { color: #aaa; }
#footer .newsletter button {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    color: #fff; background: #8E3168;
    margin: 0; padding: 0; border: none; cursor: pointer;
    transition: 0.25s ease; font-size: 15px;
}
#footer .newsletter button:hover { background: #4bb7d6; }

/* Social links */
#footer .social { }
#footer .social .social-links { font-size: 24px; }
#footer .social .social-links li { margin: 0 6px 0 0; }
#footer .social .social-links a { color: #555; }
#footer .social .social-links a:hover { color: #4BB7D6; top: -3px; }

/* Lower */
#footer .lower { font-size: 13px; line-height: 18px; color: #888; }
#footer .lower > div {
    padding-top: 24px; padding-bottom: 24px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
#footer .lower .copyright { color: #888; }
#footer .lower ul { list-style: none; margin: 0; padding: 0; display: flex; }
#footer .lower li {
    border-left: 1px solid #ccc;
    padding: 0 16px; display: inline-block;
}
#footer .lower li:first-child { border-left: none; padding-left: 0; }
#footer .lower a { color: #888; text-decoration: none; }
#footer .lower a:hover { text-decoration: underline; }

/* ============================================================
   PAGE INTRO  -  inner page hero bands
============================================================ */
.page-intro {
    background: #193946 no-repeat center 40%;
    background-size: cover;
    font-size: 20px; line-height: 30px;
    color: #fff; position: relative;
}
.page-intro:before {
    position: absolute; content: ""; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
}
.page-intro .content {
    padding: 140px 0 280px 0;
    max-width: 640px; position: relative; z-index: 1;
}
.page-intro h1 {
    margin: 0 0 32px 0; padding: 0 0 32px 0;
    position: relative;
    font-size: 68px; line-height: 72px;
    color: #fff; font-weight: 900;
    text-transform: uppercase; letter-spacing: -1px;
}
.page-intro h1:after {
    position: absolute; content: "";
    left: 0; bottom: 0; width: 80px; height: 10px;
    background: #4BB7D6;
}
.page-intro p { font-size: 19px; line-height: 29px; color: rgba(255,255,255,0.85); margin: 0; }
.page-intro a { color: #fff; text-decoration: none; }
.page-intro a:hover { text-decoration: underline; }

/* Overlapping white content box */
.main-content-box {
    padding: 80px 90px;
    background: #fff;
    box-shadow: 0 4px 40px rgba(0,0,0,0.10);
}
.main-content-box.with-top-border { border-top: solid 10px #8e3168; }
.intro-callouts-box {
    padding: 64px 80px 88px 80px;
    background: #fff;
    position: relative; top: -200px; margin-bottom: -200px;
    box-shadow: 0 4px 40px rgba(0,0,0,0.10);
}

/* ============================================================
   ENTRY CONTENT  -  article body
============================================================ */
.entry-content { font-size: 17px; line-height: 28px; max-width: 800px; }
.entry-content h2 { font-size: 28px; line-height: 34px; text-transform: uppercase; margin: 40px 0 20px 0; letter-spacing: 0.3px; }
.entry-content h3 { font-size: 21px; line-height: 27px; margin: 32px 0 14px 0; }
.entry-content h4 { font-size: 17px; line-height: 24px; margin: 24px 0 10px 0; }
.entry-content p  { margin-bottom: 24px; }
.entry-content ul, .entry-content ol { margin: 0 0 24px 28px; }
.entry-content ul li { list-style: disc; margin-bottom: 8px; }
.entry-content ol li { list-style: decimal; margin-bottom: 8px; }
.entry-content a  { color: #4bb7d6; }
.entry-content a:hover { text-decoration: underline; }
.entry-content blockquote {
    margin: 32px 0 32px 32px; padding: 16px 24px;
    border-left: 5px solid #33691E;
    font-style: italic; font-size: 19px; line-height: 29px;
    color: #555; background: #f9f9f9;
}
.entry-content img { margin: 24px 0; max-width: 100%; }
.entry-content hr { margin: 40px 0; border-top: 1px solid #e5e5e5; }

/* ============================================================
   CALLOUT BOXES  -  What We Do style
============================================================ */
.callout-boxes {
    display: flex; flex-wrap: wrap;
    margin: 0 -20px -48px -20px;
    font-size: 36px; line-height: 42px;
    text-transform: uppercase; text-align: center;
    font-weight: 900;
}
.callout-boxes > div {
    display: flex; width: 33.3333%;
    padding: 0 20px 48px 20px;
}
.callout-boxes > div > a {
    display: flex; width: 100%; align-items: center; justify-content: center;
    background: no-repeat center center; background-size: cover;
    position: relative; border-bottom: solid 10px #4bb7d6;
    color: #fff; text-decoration: none; min-height: 320px; padding: 32px;
    transition: 0.3s ease;
}
.callout-boxes > div > a:before {
    position: absolute; content: ""; inset: 0;
    background: rgba(0,86,126,0.60); transition: 0.3s ease;
}
.callout-boxes > div > a:hover:before { background: rgba(0,86,126,0.80); }
.callout-boxes > div:nth-child(2) > a { border-bottom-color: #33691E; }
.callout-boxes > div:nth-child(2) > a:before { background: rgba(51,105,30,0.6); }
.callout-boxes > div:nth-child(2) > a:hover:before { background: rgba(51,105,30,0.8); }
.callout-boxes > div:nth-child(3) > a { border-bottom-color: #8e3168; }
.callout-boxes > div:nth-child(3) > a:before { background: rgba(82,17,55,0.6); }
.callout-boxes > div:nth-child(3) > a:hover:before { background: rgba(82,17,55,0.8); }
.callout-boxes span { width: 100%; position: relative; z-index: 1; }

/* ============================================================
   POSTS GRID  -  archive, news, blog
============================================================ */
.posts-grid { display: flex; flex-wrap: wrap; margin: 0 -20px; }
.posts-grid > div {
    width: 25%; padding: 0 20px 60px 20px; display: flex;
}
.posts-grid > div > article {
    background: #fff; width: 100%;
    box-shadow: 0 2px 20px rgba(0,0,0,0.10);
    position: relative;
    transition: transform 0.25s, box-shadow 0.25s;
}
.posts-grid > div > article:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}
.posts-grid .thumb a {
    display: block; background: no-repeat center center; background-size: cover;
    padding-bottom: 68%; border-bottom: solid 10px #8E3168;
}
.posts-grid .thumb img { display: none; }
.posts-grid .content { padding: 24px 24px 68px 24px; }
.posts-grid .date    { color: #8e3168; margin: 0 0 8px 0; font-size: 13px; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; }
.posts-grid h3       { margin: 0 0 12px 0; font-size: 16px; line-height: 24px; color: #193946; font-weight: 700; }
.posts-grid h3 a     { color: #193946; text-decoration: none; }
.posts-grid h3 a:hover { text-decoration: underline; }
.posts-grid .excerpt { font-size: 14px; line-height: 22px; color: #555; margin: 0; }
.posts-grid .categories {
    position: absolute; left: 24px; bottom: 24px; right: 24px;
    font-size: 13px; color: #b9b9b9; font-weight: 300;
}
.posts-grid .categories a { color: #4bb7d6; font-weight: 700; text-decoration: none; }

/* ============================================================
   PROFILES  -  team grid
============================================================ */
.profiles {
    display: flex; flex-wrap: wrap;
    margin: 0 -24px -56px -24px;
}
.profiles > div { width: 25%; padding: 0 24px 56px 24px; }
.profiles .photo { margin: 0 0 20px 0; overflow: hidden; }
.profiles .photo img { display: block; width: 100%; transition: transform 0.4s; }
.profiles > div:hover .photo img { transform: scale(1.04); }
.profiles h3 {
    margin: 0 0 6px 0; font-size: 19px; line-height: 24px;
    color: #4bb7d6; text-transform: uppercase; font-weight: 900;
}
.profiles .title-role { font-size: 14px; line-height: 20px; color: #666; margin: 0; }

/* ============================================================
   TEXT WITH PHOTO  -  50/50 split
============================================================ */
.text-with-photo {
    display: flex; flex-wrap: wrap; align-items: center;
    margin: 0 -40px;
}
.text-with-photo > div { width: 50%; padding: 0 40px; }
.text-with-photo h2 {
    font-size: 38px; line-height: 44px;
    text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 900; margin: 0 0 24px 0;
}
.text-with-photo > .photo img { display: block; width: 100%; }
.text-with-photo.swap { flex-direction: row-reverse; }

/* ============================================================
   STATS
============================================================ */
.stats {
    display: flex; flex-wrap: wrap; justify-content: center;
    margin: 0 -28px;
    font-size: 15px; line-height: 20px;
    font-weight: 700; text-transform: uppercase;
    color: #4bb7d6; text-align: center;
}
.stats > div { padding: 0 28px 64px 28px; }
.stats h3 { margin: 0 0 12px 0; font-size: 15px; line-height: 20px; font-weight: 900; color: #193946; }
.stats strong { display: block; font-size: 56px; line-height: 60px; font-weight: 900; margin-bottom: 8px; }
.stats em { display: block; font-style: normal; font-size: 20px; line-height: 26px; }
.stats .green  { color: #33691E; }
.stats .purple { color: #8e3168; }
.stats .yellow { color: #FDD835; }

/* ============================================================
   COLS  -  generic 2, 3, 4 column layouts
============================================================ */
.cols { display: flex; flex-wrap: wrap; margin: 0 -24px -48px -24px; }
.cols > div { width: 50%; padding: 0 24px 48px 24px; }
.cols.cols-3 > div { width: 33.3333%; }
.cols.cols-4 > div { width: 25%; }

/* ============================================================
   FEATURED STORY  -  news landing
============================================================ */
.featured-story {
    display: flex; flex-wrap: wrap;
    font-size: 22px; line-height: 32px;
    margin: 0 0 80px 0;
}
.featured-story > .photo { width: 55%; }
.featured-story > .photo img { display: block; width: 100%; }
.featured-story > .content { width: 45%; padding: 0 0 80px 72px; position: relative; }
.featured-story .label {
    margin: 0 0 20px 0; font-size: 13px; line-height: 18px;
    color: #8e3168; letter-spacing: 2px;
    text-transform: uppercase; font-weight: 900;
}
.featured-story h3 { font-size: 32px; line-height: 40px; font-weight: 900; margin: 0 0 20px 0; }
.featured-story h3 a { color: #193946; text-decoration: none; }
.featured-story h3 a:hover { text-decoration: underline; }
.featured-story .footer-actions {
    position: absolute; left: 72px; right: 0; bottom: 0;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between;
}

/* ============================================================
   MISSION / VISION BOX  -  about page
============================================================ */
.mission-vision-box {
    top: -200px; margin-bottom: -200px;
    font-size: 22px; line-height: 32px;
    font-weight: 300; text-align: center;
}
.mission-vision-box > .content { display: flex; flex-wrap: wrap; }
.mission-vision-box > .content > div { width: 50%; padding: 56px 88px; }
.mission-vision-box > .content > div:nth-child(2) { border-left: 1px solid #ddd; }
.mission-vision-box > .content > div:nth-child(2) h2 { color: #8e3168; }
.mission-vision-box h2 {
    margin: 0 0 24px 0;
    font-size: 36px; line-height: 42px;
    color: #33691E; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px;
}

/* ============================================================
   PUBLICATIONS GRID
============================================================ */
.publications-grid {
    display: flex; flex-wrap: wrap;
    margin: 0 -28px -56px -28px;
}
.publications-grid > div {
    width: 50%; padding: 0 28px 56px 28px;
}
.publications-grid > div > div {
    display: flex; flex-wrap: wrap; gap: 0;
}
.publications-grid .pub-cover { width: 28%; }
.publications-grid .pub-cover img {
    display: block; width: 100%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.publications-grid .pub-content { width: 72%; padding: 0 0 0 24px; }
.publications-grid h3 { font-size: 19px; line-height: 26px; font-weight: 900; margin: 0 0 10px 0; }
.publications-grid h3 a { color: #193946; text-decoration: none; }
.publications-grid h3 a:hover { text-decoration: underline; }
.publications-grid .pub-source { font-size: 14px; color: #666; margin: 0 0 12px 0; }
.publications-grid .pub-excerpt { font-size: 15px; line-height: 23px; color: #444; }

/* ============================================================
   ICON BLOCKS  -  Join Team page
============================================================ */
.icon-block {
    position: relative; padding: 0 0 0 88px;
    font-size: 15px; line-height: 24px;
}
.icon-block .icon {
    position: absolute; top: 0; left: 0;
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #33691E;
}
.icon-block h3 {
    margin: 0 0 8px 0; font-size: 22px; line-height: 28px;
    text-transform: uppercase; font-weight: 900; color: #193946;
}
.icon-block + .icon-block { margin-top: 40px; }
.icon-block.green h3 { color: #33691E; }
.icon-block.blue  h3 { color: #4bb7d6; }
.icon-block.yellow h3 { color: #FDD835; }
.icon-block.purple h3 { color: #8e3168; }

/* ============================================================
   TILE CALLOUT  -  dark box CTA
============================================================ */
.tile-callout {
    padding: 32px 40px; background: #193946;
}
.tile-callout h3 {
    color: #fff; margin: 0 0 10px 0;
    font-size: 24px; line-height: 30px;
    font-weight: 900; text-transform: uppercase;
}
.tile-callout a { color: #FDD835; }
.tile-callout a:hover { color: #fff; }

/* ============================================================
   SEARCH RESULTS
============================================================ */
.search-results-container { max-width: 840px; margin: 0 auto; }
.search-results-container > div + div {
    margin-top: 40px; padding-top: 40px;
    border-top: 1px solid #e3e3e3;
}
.search-results-container h2 a { color: #193946; text-decoration: none; }
.search-results-container h2 a:hover { text-decoration: underline; }

/* ============================================================
   PAGINATION
============================================================ */
.pagination { margin: 48px 0 0 0; }
.pagination .page-numbers {
    display: inline-block; min-width: 32px; text-align: center;
    text-decoration: none; color: #434343; background: #f0f0f0;
    font-size: 14px; line-height: 30px; padding: 0 8px;
    margin-right: 6px; transition: 0.2s;
}
.pagination .page-numbers.current { background: #8e3168; color: #fff; }
.pagination a:hover { background: #4bb7d6; color: #fff; }

/* ============================================================
   BREADCRUMBS
============================================================ */
.breadcrumbs {
    font-size: 13px; line-height: 18px;
    color: #888; margin: 0 0 40px 0;
}
.breadcrumbs a { color: #4bb7d6; text-decoration: none; font-weight: 700; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span + span:before { content: " / "; color: #bbb; margin: 0 4px; }

/* ============================================================
   FORMS  -  contact, newsletter
============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="number"],
select,
textarea {
    font-family: 'Lato', Arial, Verdana, sans-serif;
    font-size: 16px; line-height: 22px;
    padding: 12px 16px;
    border: 1px solid #ccc;
    outline: none; transition: border-color 0.2s;
    width: 100%; display: block;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus { border-color: #4bb7d6; }
input[type="submit"] {
    cursor: pointer; border-radius: 0;
    font-family: 'Lato', Arial, sans-serif;
}
select {
    background: #fff; border-radius: 0;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
label {
    display: block; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: #555; margin-bottom: 8px;
}
.form-row { margin: 0 0 24px 0; }
.form-row.half { display: flex; gap: 24px; }
.form-row.half > * { flex: 1; }

/* ============================================================
   CONTACT PAGE
============================================================ */
.contact-layout { display: flex; flex-wrap: wrap; gap: 80px; margin: 0; }
.contact-layout .contact-form { flex: 2; min-width: 0; }
.contact-layout .contact-info { flex: 1; min-width: 260px; }
.contact-info h3 { font-size: 18px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 16px 0; }
.contact-info p  { font-size: 16px; line-height: 26px; color: #444; margin-bottom: 24px; }
.contact-info a  { color: #4bb7d6; }

/* ============================================================
   SIDEBAR LAYOUT  -  blog single
============================================================ */
.sidebar-layout { display: flex; flex-wrap: wrap; gap: 80px; }
.sidebar-layout > .content { flex: 3; min-width: 0; }
.sidebar-layout > aside    { flex: 1; min-width: 260px; }
.widget { margin: 0 0 48px 0; }
.widget-title { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #193946; margin: 0 0 16px 0; }

/* ============================================================
   BUILDER PASSTHROUGH
============================================================ */
.builder-main { width: 100%; }
.is-builder-page .main-content-box,
.is-builder-page .intro-callouts-box { display: none; }
.elementor-section-boxed > .elementor-container {
    max-width: 1470px !important; padding: 0 60px;
}




/* OLD TIMELINE REMOVED */
/* ============================================================
   HISTORY TIMELINE  -  About Us page (mirrors LMH exactly)
============================================================ */
.timeline {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 -65px;
    font-size: 16px;
    line-height: 24px;
}
.timeline:before {
    position: absolute; content: "";
    top: 0; left: 50%; bottom: 0;
    width: 1px; background: #e0e0e0;
}
.timeline > .left { width: 50%; padding: 0 65px; }
.timeline > .right { width: 50%; padding: 0 65px; }
.timeline .box {
    position: relative;
    margin-bottom: 60px;
}
.timeline .box > div {
    background: #fff;
    padding: 40px 48px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    position: relative;
}
/* Year tag on the centre line */
.timeline .box h3.year {
    position: absolute;
    top: 32px;
    right: -130px;
    width: 115px;
    padding: 6px 0;
    background: #e5e5e5;
    font-size: 18px;
    line-height: 22px;
    font-weight: 900;
    color: #193946;
    text-align: center;
    z-index: 2;
}
.timeline .box h3.year:before {
    position: absolute; content: "";
    border: solid 20px transparent;
    border-width: 11px 14px;
    border-right-color: #e5e5e5;
    right: 100%; top: 50%;
    transform: translateY(-50%);
}
.timeline .box.right h3.year {
    right: auto;
    left: -130px;
}
.timeline .box.right h3.year:before {
    border-right-color: transparent;
    border-left-color: #e5e5e5;
    right: auto;
    left: 100%;
}
.timeline .box h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 900;
    text-transform: uppercase;
    color: #33691E;
    letter-spacing: 0.5px;
}
.timeline .photo img {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

/* Footer callout banner */
.footer-callout-banner {
    background: #193946;
}
.footer-callout-banner .section > div {
    padding-top: 80px;
    padding-bottom: 80px;
}
.footer-callout-banner a:hover { color: #FDD835; }

/* What We Do stats band programme link hover */
.programme-link-row a:hover span:first-child { color: #4bb7d6; }

@media (max-width: 900px) {
    .timeline { margin: 0; }
    .timeline:before { left: 0; }
    .timeline > .left,
    .timeline > .right { width: 100%; padding: 0 0 0 32px; }
    .timeline .box h3.year {
        position: static;
        display: inline-block;
        width: auto;
        padding: 4px 16px;
        margin-bottom: 16px;
        font-size: 15px;
    }
    .timeline .box h3.year:before { display: none; }
    .timeline .box.right h3.year { left: auto; }
}

@media (max-width: 600px) {
    .timeline > .left,
    .timeline > .right { padding: 0; }
    .timeline .box > div { padding: 28px 28px; }
}

/* ============================================================
   SUBNAV STRIP  -  contextual sub-page navigation
   Appears at the bottom of all sub-pages, LMH style
============================================================ */
.subnav-strip {
    background: #e5e5e5;
    border-top: 4px solid #33691E;
    padding: 0;
}
.subnav-strip__inner > div {
    padding-top: 0;
    padding-bottom: 0;
}
.subnav-strip ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.subnav-strip ul li a {
    display: block;
    padding: 22px 28px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #193946;
    text-decoration: none;
    border-bottom: 4px solid transparent;
    transition: 0.2s ease;
    white-space: nowrap;
}
.subnav-strip ul li a:hover {
    color: #33691E;
    border-bottom-color: #33691E;
    text-decoration: none;
}
.subnav-strip ul li.is-current a {
    color: #33691E;
    border-bottom-color: #33691E;
    background: rgba(51,105,30,0.06);
}

/* Program area sidebar */
.program-area-sidebar {
    position: sticky;
    top: 200px;
}

@media (max-width: 900px) {
    .subnav-strip ul {
        flex-direction: column;
    }
    .subnav-strip ul li a {
        padding: 14px 20px;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        border-left: 4px solid transparent;
    }
    .subnav-strip ul li.is-current a {
        border-left-color: #33691E;
        border-bottom-color: rgba(0,0,0,0.08);
    }
}

/* ============================================================
   BUILDER PAGE WRAP  -  Elementor / WPBakery full-width container
   Ensures pages edited with Elementor never appear blank and
   always sit correctly within the header/footer frame.
============================================================ */
.builder-page-wrap {
    width: 100%;
    min-height: 400px;
}
/* Elementor overrides  -  align with our max-width */
.builder-page-wrap .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1470px;
}
.builder-page-wrap .elementor-section-full_width > .elementor-container {
    max-width: 100%;
}
/* Remove double padding from Elementor top sections */
.builder-page-wrap > .elementor > .elementor-section:first-child {
    margin-top: 0;
}
/* Elementor uses its own font stack  -  enforce Lato */
.builder-page-wrap,
.builder-page-wrap h1,
.builder-page-wrap h2,
.builder-page-wrap h3,
.builder-page-wrap h4,
.builder-page-wrap p,
.builder-page-wrap a {
    font-family: 'Lato', Arial, Verdana, sans-serif;
}


/* ================================================================
   TIMELINE  -  About Us history (matches LMH exactly)
   Each entry: year (h3) | photo (optional) | title (h4) | text
================================================================ */
.timeline-entry {
    margin-bottom: 72px;
    padding-bottom: 72px;
    border-bottom: 1px solid #e0e0e0;
    max-width: 780px;
}
.timeline-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.timeline-year {
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #4bb7d6;
    margin: 0 0 20px 0;
}
.timeline-photo {
    margin-bottom: 24px;
}
.timeline-photo img {
    width: 100%;
    max-width: 600px;
    display: block;
}
.timeline-title {
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #193946;
    margin: 0 0 16px 0;
}
.timeline-text {
    font-size: 17px;
    line-height: 28px;
    color: #444;
    margin: 0;
}


/* ============================================================
   PROGRAMME ROW  -  What We Do text links (LMH style)
============================================================ */
.programme-row:hover span:first-child {
    color: #4bb7d6;
    text-decoration: underline;
}
.programme-row:hover { text-decoration: none !important; }

/* ============================================================
   LARGE EDITORIAL SECTIONS  -  About, What We Do body text
   Matches LMH's generous reading typography
============================================================ */
.editorial-intro {
    font-size: 22px;
    line-height: 36px;
    font-weight: 300;
    color: #193946;
    max-width: 780px;
}
.editorial-body {
    font-size: 18px;
    line-height: 31px;
    color: #444;
    max-width: 780px;
}

/* ============================================================
   SECTION LABEL  -  small teal/green eyebrow above headings
   Used on mission, vision, timeline labels
============================================================ */
.section-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #4bb7d6;
    margin: 0 0 16px 0;
    display: block;
}
.section-label.green { color: #33691E; }

/* ============================================================
   MISSION / VISION SECTION TYPOGRAPHY
============================================================ */
.mv-heading {
    font-size: 28px;
    line-height: 40px;
    font-weight: 300;
    color: #193946;
    margin: 0;
}

/* ============================================================
   TIMELINE TYPOGRAPHY (LMH style)
============================================================ */
.timeline-year-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #4bb7d6;
    margin: 0 0 24px 0;
}
.timeline-event-title {
    font-size: 15px;
    line-height: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #193946;
    margin: 0 0 16px 0;
}
.timeline-event-text {
    font-size: 17px;
    line-height: 28px;
    color: #444;
    margin: 0;
}

/* ================================================================
   READING COLUMN  -  narrow content width like LMH (~780px)
================================================================ */
.reading-col {
    max-width: 780px;
}
.lead-text {
    font-size: 22px;
    line-height: 36px;
    font-weight: 300;
    color: #193946;
    margin-bottom: 32px;
}

/* ================================================================
   ABOUT PAGE
================================================================ */
.about-section-alt { background: #f5f5f5; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.about-statement { font-size: 24px; line-height: 38px; font-weight: 300; color: #193946; margin: 0; }
.about-section-heading {
    font-size: 40px; line-height: 46px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px;
    color: #193946; margin: 0 0 64px 0;
    padding-bottom: 24px; border-bottom: 4px solid #33691E;
}

/* TIMELINE */
.timeline-entry {
    padding: 0 0 64px 0;
    margin-bottom: 64px;
    border-bottom: 1px solid #e5e5e5;
}
.timeline-entry.last { border-bottom: none; margin-bottom: 0; }
.timeline-year {
    font-size: 13px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 3px; color: #193946; margin: 0 0 20px 0;
}
.timeline-photo { margin: 0 0 28px 0; }
.timeline-photo img { width: 100%; display: block; }
.timeline-title {
    font-size: 15px; line-height: 20px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px;
    color: #193946; margin: 0 0 16px 0;
}
.timeline-text { font-size: 17px; line-height: 28px; color: #444; margin: 0; }

/* CTA BAND */
.about-cta-band { background: #193946; text-align: center; padding: 100px 60px; }
.about-cta-inner { max-width: 760px; margin: 0 auto; }
.cta-rule { width: 120px; height: 10px; background: #FDD835; border: none; margin: 0 auto 48px; }
.cta-statement {
    font-size: 36px; line-height: 46px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px;
    color: #fff; margin: 0 0 40px 0;
}
.cta-link { font-size: 13px !important; letter-spacing: 3px !important; }

/* ================================================================
   WHAT WE DO PAGE
================================================================ */
.wwd-content { font-size: 18px; line-height: 31px; }
.wwd-para { font-size: 18px; line-height: 31px; color: #444; margin-bottom: 32px; }
.wwd-callout {
    font-size: 20px; line-height: 34px; font-weight: 300;
    color: #193946; padding-left: 24px;
    border-left: 4px solid #4bb7d6;
}
.wwd-photo { margin: 48px 0; }
.wwd-photo img { width: 100%; display: block; }

/* Three programme text links  -  plain like LMH */
.wwd-programme-links { margin: 48px 0 0 0; border-top: 2px solid #193946; }
.wwd-programme-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 24px; line-height: 30px;
    font-weight: 900; text-transform: uppercase;
    color: #193946; text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
.wwd-programme-link::after {
    content: '92';
    font-size: 20px; color: #4bb7d6;
    flex-shrink: 0; margin-left: 24px;
}
.wwd-programme-link:hover { color: #4bb7d6; text-decoration: none; }

/* ================================================================
   WHERE WE WORK PAGE
================================================================ */
.wwwork-links { margin: 0; }
.wwwork-country-link {
    display: block;
    font-size: 28px; line-height: 36px;
    font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.5px; color: #193946;
    text-decoration: none;
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
    transition: color 0.2s, padding-left 0.2s;
}
.wwwork-country-link:hover {
    color: #4bb7d6; padding-left: 16px;
    text-decoration: none;
}


/* ================================================================
   JOIN OUR TEAM / WHO WE ARE PAGE
================================================================ */
.join-commitment-section { background: #f5f5f5; border-top: 1px solid #e5e5e5; }
.join-slider { background: #193946; }
.join-slider .slide {
    position: absolute; inset: 0;
    background: no-repeat center center; background-size: cover;
    opacity: 0; transition: opacity 0.8s ease;
}
.join-slider .slide.is-active { opacity: 1; }

.benefits-grid {
    display: flex; flex-wrap: wrap;
    margin: 0 -24px -48px -24px;
}
.benefit-card { width: 33.3333%; padding: 0 24px 48px 24px; }
.benefit-icon { font-size: 40px; margin-bottom: 20px; }
.benefit-title {
    font-size: 17px; line-height: 22px;
    font-weight: 900; text-transform: uppercase;
    color: #193946; letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}
.benefit-text { font-size: 16px; line-height: 26px; color: #555; margin: 0; }

/* ================================================================
   SUBNAV STRIP  -  fix: remove gap before footer
   The subnav strips were creating space between content and footer.
   Now they attach directly to the page  -  no bottom padding.
================================================================ */
.subnav-strip { margin-bottom: 0; }
nav.subnav-strip + #footer { margin-top: 0; }

/* ================================================================
   ABOUT US PAGE  -  pixel-perfect LMH layout
================================================================ */

/* 1. HERO */
.about-hero {
    position: relative;
    min-height: 560px;
    background: #193946 no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    padding-bottom: 200px; /* space for overlapping cards */
}
.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(25,57,70,0.15) 0%,
        rgba(25,57,70,0.55) 60%,
        rgba(25,57,70,0.75) 100%
    );
}
.about-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1470px;
    margin: 0 auto;
    padding: 0 60px;
}
.about-hero__content {
    max-width: 600px;
    padding-bottom: 48px;
}
.about-hero__content h1 {
    color: #fff;
    font-size: 68px;
    line-height: 72px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 20px 0;
}
.about-hero__content h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 8px;
    background: #FDD835;
    margin-top: 16px;
}
.about-hero__content p {
    color: rgba(255,255,255,0.9);
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
    margin: 0;
}

/* 2. MISSION + VISION CARDS  -  overlap hero, side by side */
.about-mv-wrap {
    background: #f5f5f5;
    padding-bottom: 0;
    margin-top: -180px; /* pull up to overlap hero */
    position: relative;
    z-index: 2;
}
.about-mv-inner {
    max-width: 1470px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    gap: 0;
}
.about-mv-card {
    flex: 1;
    background: #fff;
    padding: 56px 64px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.10);
}
.about-mv-card:first-child {
    border-right: 1px solid #e5e5e5;
}
.about-mv-card h2 {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #4bb7d6;
    margin: 0 0 20px 0;
}
.about-mv-card p {
    font-size: 20px;
    line-height: 32px;
    font-weight: 300;
    color: #193946;
    margin: 0;
}

/* 3. OUR HISTORY TIMELINE */
.about-history {
    background: #fff;
    padding: 100px 0;
}
.about-history__inner {
    max-width: 1470px;
    margin: 0 auto;
    padding: 0 60px;
}
.about-history__heading {
    font-size: 40px;
    line-height: 46px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #193946;
    margin: 0 0 80px 0;
    text-align: center;
}

/* Timeline container  -  two columns with centre spine */
.about-timeline {
    position: relative;
    padding: 0;
}
/* Centre vertical line */
.about-timeline__spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #e5e5e5;
    transform: translateX(-50%);
}

/* Each entry  -  flexbox row */
.about-timeline__entry {
    display: flex;
    align-items: flex-start;
    margin-bottom: 80px;
    position: relative;
}
.about-timeline__entry:last-child {
    margin-bottom: 0;
}

/* Photo takes 40% of width */
.about-timeline__photo {
    width: calc(50% - 60px);
    flex-shrink: 0;
}
.about-timeline__photo img {
    width: 100%;
    display: block;
}
.about-timeline__photo-placeholder {
    width: 100%;
    padding-bottom: 66%;
    background: #e5e5e5;
}

/* Year badge sits on the spine */
.about-timeline__year {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}
.about-timeline__year span {
    background: #e5e5e5;
    color: #193946;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 6px 14px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

/* Text side takes remaining width */
.about-timeline__text {
    flex: 1;
    min-width: 0;
    padding-top: 0;
}
.about-timeline__text h3 {
    font-size: 15px;
    line-height: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #4bb7d6;
    margin: 0 0 16px 0;
}
.about-timeline__text p {
    font-size: 16px;
    line-height: 26px;
    color: #444;
    margin: 0;
}

/* LEFT entry: photo LEFT | year | text RIGHT */
.about-timeline__entry--left {
    flex-direction: row;
}
.about-timeline__entry--left .about-timeline__photo {
    order: 1;
}
.about-timeline__entry--left .about-timeline__year {
    order: 2;
}
.about-timeline__entry--left .about-timeline__text {
    order: 3;
    padding-left: 0;
    padding-right: 40px;
}

/* RIGHT entry: text LEFT | year | photo RIGHT */
.about-timeline__entry--right {
    flex-direction: row;
}
.about-timeline__entry--right .about-timeline__text {
    order: 1;
    padding-left: 40px;
    padding-right: 0;
}
.about-timeline__entry--right .about-timeline__year {
    order: 2;
}
.about-timeline__entry--right .about-timeline__photo {
    order: 3;
}

/* RESPONSIVE */
@media (max-width: 960px) {
    .about-hero { padding-bottom: 320px; }
    .about-mv-inner { flex-direction: column; padding: 0 32px; }
    .about-mv-card { padding: 40px 32px; }
    .about-mv-card:first-child { border-right: none; border-bottom: 1px solid #e5e5e5; }
    .about-hero__content h1 { font-size: 44px; line-height: 50px; }

    .about-timeline__spine { display: none; }
    .about-timeline__entry,
    .about-timeline__entry--left,
    .about-timeline__entry--right {
        flex-direction: column;
        margin-bottom: 56px;
        padding-bottom: 56px;
        border-bottom: 1px solid #e5e5e5;
    }
    .about-timeline__photo,
    .about-timeline__entry--right .about-timeline__photo {
        width: 100%;
        order: 1;
        margin-bottom: 24px;
    }
    .about-timeline__year,
    .about-timeline__entry--right .about-timeline__year {
        order: 2;
        width: auto;
        justify-content: flex-start;
        padding: 0;
        margin-bottom: 16px;
    }
    .about-timeline__text,
    .about-timeline__entry--left .about-timeline__text,
    .about-timeline__entry--right .about-timeline__text {
        order: 3;
        padding: 0;
        width: 100%;
    }
    .about-history__inner { padding: 0 32px; }
}
@media (max-width: 600px) {
    .about-hero__inner { padding: 0 24px; }
    .about-hero__content h1 { font-size: 36px; line-height: 42px; }
    .about-history { padding: 60px 0; }
    .about-cta-band { padding: 60px 24px; }
    .cta-statement { font-size: 26px; line-height: 34px; }
}

/* ================================================================
   WHAT WE DO PAGE  -  pixel-perfect LMH layout
================================================================ */

/* 1. HERO */
.wwd-hero {
    position: relative;
    min-height: 560px;
    background: #193946 no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: flex-end;
}
.wwd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(25,57,70,0.10) 0%,
        rgba(25,57,70,0.60) 60%,
        rgba(25,57,70,0.80) 100%
    );
}
.wwd-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1470px;
    margin: 0 auto;
    padding: 0 60px;
}
.wwd-hero__content {
    max-width: 600px;
    padding: 0 0 80px 0;
}
.wwd-hero__content h1 {
    color: #fff;
    font-size: 68px;
    line-height: 72px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px 0;
}
.wwd-hero__content h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 8px;
    background: #FDD835;
    margin-top: 16px;
}
.wwd-hero__content p {
    color: rgba(255,255,255,0.90);
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
    margin: 0;
}

/* Shared container */
.wwd-container {
    max-width: 1470px;
    margin: 0 auto;
    padding: 0 60px;
}

/* 2. INTRO PARAGRAPH */
.wwd-intro-section {
    padding: 80px 0;
    background: #fff;
}
.wwd-intro-para {
    font-size: 20px;
    line-height: 34px;
    color: #193946;
    font-weight: 300;
    max-width: 900px;
    margin: 0;
}

/* 3 & 4. SPLIT SECTIONS  -  image + text side by side */
.wwd-split-section {
    padding: 80px 0;
    background: #fff;
}
.wwd-split-section--alt {
    background: #f5f5f5;
}
.wwd-split {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}
.wwd-split__photo {
    flex: 1;
    min-width: 0;
}
.wwd-split__photo img {
    width: 100%;
    display: block;
}
.wwd-split__photo-placeholder {
    width: 100%;
    padding-bottom: 70%;
    background: #e0e0e0;
}
.wwd-split__text {
    flex: 1;
    min-width: 0;
}
.wwd-split__text p {
    font-size: 17px;
    line-height: 28px;
    color: #444;
    margin-bottom: 24px;
}
.wwd-split__text p strong { color: #193946; }
.wwd-split__text p:last-child { margin-bottom: 0; }

/* 5. THREE PILLARS */
.wwd-pillars-section {
    padding: 80px 0;
    background: #fff;
    border-top: 1px solid #e5e5e5;
}
.wwd-pillars-heading {
    font-size: 28px;
    line-height: 36px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #193946;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 56px;
}
.wwd-pillars-heading span {
    color: #4bb7d6;
}
.wwd-pillar-cards {
    display: flex;
    gap: 0;
}
.wwd-pillar-card {
    flex: 1;
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
}
.wwd-pillar-card__bg {
    height: 280px;
    background: #193946 no-repeat center center;
    background-size: cover;
    position: relative;
    transition: transform 0.3s ease;
}
.wwd-pillar-card:hover .wwd-pillar-card__bg {
    transform: scale(1.03);
}
.wwd-pillar-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(25,57,70,0.45);
    transition: background 0.3s;
}
.wwd-pillar-card:hover .wwd-pillar-card__overlay {
    background: rgba(25,57,70,0.30);
}
.wwd-pillar-card__title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(to top, rgba(25,57,70,0.9) 0%, transparent 100%);
}

/* 6. EDITORIAL TWO COLUMNS */
.wwd-editorial-section {
    padding: 80px 0;
    background: #fff;
    border-top: 1px solid #e5e5e5;
}
.wwd-editorial-cols {
    display: flex;
    gap: 64px;
}
.wwd-editorial-col {
    flex: 1;
}
.wwd-editorial-col p {
    font-size: 17px;
    line-height: 28px;
    color: #444;
    margin: 0;
}

/* 7. CTA BAND */
.wwd-cta-band {
    background: #193946 url('') no-repeat center center;
    background-size: cover;
    padding: 120px 60px;
    text-align: center;
    position: relative;
}
.wwd-cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(25,57,70,0.75);
}
.wwd-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}
.wwd-cta-eyebrow {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #4bb7d6;
    margin: 0 0 24px 0;
}
.wwd-cta-statement {
    font-size: 40px;
    line-height: 50px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 40px 0;
}

/* RESPONSIVE */
@media (max-width: 960px) {
    .wwd-hero__content h1 { font-size: 44px; line-height: 50px; }
    .wwd-container { padding: 0 32px; }
    .wwd-split { flex-direction: column; gap: 32px; }
    .wwd-split--img-right .wwd-split__photo { order: -1; }
    .wwd-pillar-cards { flex-direction: column; }
    .wwd-pillar-card__bg { height: 220px; }
    .wwd-editorial-cols { flex-direction: column; gap: 32px; }
    .wwd-pillars-heading { font-size: 22px; }
}
@media (max-width: 600px) {
    .wwd-hero__inner { padding: 0 24px; }
    .wwd-hero__content { padding-bottom: 48px; }
    .wwd-hero__content h1 { font-size: 34px; line-height: 40px; }
    .wwd-intro-section { padding: 48px 0; }
    .wwd-split-section { padding: 48px 0; }
    .wwd-cta-band { padding: 72px 24px; }
    .wwd-cta-statement { font-size: 28px; line-height: 36px; }
}

/* ================================================================
   WHERE WE WORK PAGE  -  pixel-perfect LMH layout
================================================================ */

/* 1. HERO */
.wwwork-hero {
    position: relative;
    min-height: 480px;
    background: #193946 no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: flex-end;
}
.wwwork-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(25,57,70,0.10) 0%,
        rgba(25,57,70,0.55) 55%,
        rgba(25,57,70,0.80) 100%
    );
}
.wwwork-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1470px;
    margin: 0 auto;
    padding: 0 60px;
}
.wwwork-hero__content {
    max-width: 560px;
    padding-bottom: 160px;
}
.wwwork-hero__content h1 {
    color: #fff;
    font-size: 68px;
    line-height: 72px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px 0;
}
.wwwork-hero__content h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 8px;
    background: #FDD835;
    margin-top: 16px;
}
.wwwork-hero__content p {
    color: rgba(255,255,255,0.90);
    font-size: 19px;
    line-height: 29px;
    font-weight: 300;
    margin: 0;
}

/* 2. WHITE BOX + GRID  -  overlaps hero */
.wwwork-grid-wrap {
    background: #f5f5f5;
    margin-top: -120px;
    position: relative;
    z-index: 2;
    padding-bottom: 80px;
}
.wwwork-grid-inner {
    max-width: 1470px;
    margin: 0 auto;
    padding: 0 60px;
}

/* White box with intro text */
.wwwork-grid-intro {
    background: #fff;
    text-align: center;
    font-size: 19px;
    line-height: 30px;
    font-weight: 300;
    color: #193946;
    padding: 48px 80px;
    margin: 0 0 0 0;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}

/* 3x2 Card grid  -  exactly like LMH */
.wwwork-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #fff;
    padding: 32px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}
.wwwork-card {
    position: relative;
    display: block;
    text-decoration: none;
    background: #193946 no-repeat center center;
    background-size: cover;
    overflow: hidden;
    aspect-ratio: 4/3;
    transition: opacity 0.2s;
}
.wwwork-card:hover { opacity: 0.92; text-decoration: none; }
.wwwork-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(25,57,70,0.85) 0%,
        rgba(25,57,70,0.20) 60%,
        transparent 100%
    );
    transition: background 0.3s;
}
.wwwork-card:hover .wwwork-card__overlay {
    background: linear-gradient(
        to top,
        rgba(25,57,70,0.70) 0%,
        rgba(25,57,70,0.10) 60%,
        transparent 100%
    );
}
.wwwork-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
}
.wwwork-card__name {
    display: block;
    font-size: 18px;
    line-height: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

/* 4. CTA BAND */
.wwwork-cta-band {
    position: relative;
    background: #193946 no-repeat center center;
    background-size: cover;
    padding: 120px 60px;
    text-align: center;
}
.wwwork-cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(25,57,70,0.72);
}
.wwwork-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}
.wwwork-cta-eyebrow {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #4bb7d6;
    margin: 0 0 20px 0;
}
.wwwork-cta-statement {
    font-size: 40px;
    line-height: 50px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 40px 0;
}

/* RESPONSIVE */
@media (max-width: 960px) {
    .wwwork-hero__content h1 { font-size: 44px; line-height: 50px; }
    .wwwork-hero__content { padding-bottom: 200px; }
    .wwwork-grid-inner { padding: 0 32px; }
    .wwwork-grid-intro { padding: 32px 40px; }
    .wwwork-cards {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
    }
}
@media (max-width: 600px) {
    .wwwork-hero__inner { padding: 0 24px; }
    .wwwork-hero__content h1 { font-size: 36px; line-height: 42px; }
    .wwwork-cards { grid-template-columns: 1fr; }
    .wwwork-grid-intro { padding: 24px; font-size: 17px; }
    .wwwork-cta-band { padding: 72px 24px; }
    .wwwork-cta-statement { font-size: 26px; line-height: 34px; }
}


/* ================================================================
   JOIN OUR TEAM / WHO WE ARE PAGE  -  pixel-perfect LMH layout
================================================================ */

/* 1. HERO */
.jot-hero {
    position: relative;
    min-height: 480px;
    background: #193946 no-repeat center top;
    background-size: cover;
    display: flex;
    align-items: flex-end;
}
.jot-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(25,57,70,0.05) 0%, rgba(25,57,70,0.50) 60%, rgba(25,57,70,0.75) 100%);
}
.jot-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1470px;
    margin: 0 auto;
    padding: 0 60px;
}
.jot-hero__content {
    padding-bottom: 64px;
}
.jot-hero__content h1 {
    color: #fff;
    font-size: 68px;
    line-height: 72px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
.jot-hero__content h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 8px;
    background: #FDD835;
    margin-top: 16px;
}

/* Shared container */
.jot-container {
    max-width: 1470px;
    margin: 0 auto;
    padding: 0 60px;
}

/* 2. INTRO  -  text left + photo right */
.jot-intro-section {
    background: #fff;
    padding: 72px 0;
}
.jot-intro-layout {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}
.jot-intro-text {
    flex: 1;
    min-width: 0;
}
.jot-intro-text p {
    font-size: 17px;
    line-height: 28px;
    color: #444;
    margin: 0;
}
.jot-intro-photo {
    flex: 1;
    min-width: 0;
}
.jot-intro-photo img {
    width: 100%;
    display: block;
}

/* 3. EQUITY SECTION  -  teal header band */
.jot-equity-section {
    background: #fff;
    border-top: 1px solid #e5e5e5;
}
.jot-equity-header {
    background: #4bb7d6;
    padding: 32px 60px;
    text-align: center;
}
.jot-equity-header h2 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #193946;
    margin: 0;
}
.jot-equity-body {
    padding: 56px 0;
    max-width: 780px;
}
.jot-equity-body p {
    font-size: 17px;
    line-height: 28px;
    color: #444;
    margin: 0 0 20px 0;
}
.jot-country-label {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    margin: 32px 0 12px 0 !important;
}
.jot-county-link {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: #4bb7d6;
    text-decoration: none;
    margin-right: 16px;
}
.jot-county-link:hover { text-decoration: underline; }

/* 4. BENEFITS  -  no header band, plain h2 + grid */
.jot-benefits-section {
    background: #f5f5f5;
    padding: 0;
    border-top: 1px solid #e5e5e5;
}
.jot-benefits-header {
    padding: 48px 60px 0 60px;
    max-width: 1470px;
    margin: 0 auto;
}
.jot-benefits-header h2 {
    font-size: 28px;
    line-height: 34px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #193946;
    margin: 0 0 8px 0;
    padding-bottom: 16px;
    border-bottom: 3px solid #193946;
}
.jot-benefits-intro {
    font-size: 16px;
    line-height: 26px;
    color: #555;
    max-width: 780px;
    margin: 0 0 48px 0;
    padding-top: 24px;
}
.jot-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-bottom: 56px;
}
.jot-benefit-item {
    padding: 32px 40px;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    background: #fff;
}
.jot-benefit-item:nth-child(even) { border-right: none; }
.jot-benefit-item i {
    font-size: 28px;
    display: block;
    margin-bottom: 12px;
}
.jot-benefit-item h4 {
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px 0;
}
.jot-benefit-item p {
    font-size: 15px;
    line-height: 24px;
    color: #555;
    margin: 0;
}

/* 5. DEI SECTION */
.jot-dei-section {
    background: #fff;
    border-top: 1px solid #e5e5e5;
    padding: 0;
}
.jot-dei-header {
    max-width: 1470px;
    margin: 0 auto;
    padding: 56px 60px 40px 60px;
}
.jot-dei-header h2 {
    font-size: 28px;
    line-height: 34px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #193946;
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 3px solid #193946;
}
.jot-dei-layout {
    display: flex;
    align-items: flex-start;
    gap: 64px;
    padding-bottom: 72px;
}
.jot-dei-text {
    flex: 2;
    min-width: 0;
}
.jot-dei-text p {
    font-size: 17px;
    line-height: 28px;
    color: #444;
    margin: 0 0 20px 0;
}
.jot-dei-photo {
    flex: 1;
    min-width: 0;
}
.jot-dei-photo img { width: 100%; display: block; }

/* 6. TESTIMONIAL  -  teal band */
.jot-testimonial-section {
    background: #4bb7d6;
    padding: 80px 0;
}
.jot-testimonial-heading {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #193946;
    text-align: center;
    margin: 0 0 40px 0;
}
.jot-testimonial {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.jot-testimonial-quote {
    font-size: 20px;
    line-height: 33px;
    font-style: italic;
    font-weight: 300;
    color: #193946;
    margin: 0 0 24px 0;
    padding: 0;
    border: none;
}
.jot-testimonial-name {
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #193946;
    margin: 0 0 4px 0;
}
.jot-testimonial-role {
    font-size: 13px;
    color: rgba(25,57,70,0.7);
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 960px) {
    .jot-hero__content h1 { font-size: 44px; line-height: 50px; }
    .jot-container, .jot-benefits-header, .jot-dei-header { padding: 0 32px; }
    .jot-equity-header { padding: 24px 32px; }
    .jot-intro-layout, .jot-dei-layout { flex-direction: column; gap: 32px; }
    .jot-benefits-grid { grid-template-columns: 1fr; }
    .jot-benefit-item { border-right: none; }
}
@media (max-width: 600px) {
    .jot-hero__inner { padding: 0 24px; }
    .jot-hero__content h1 { font-size: 36px; line-height: 42px; }
    .jot-equity-header h2 { font-size: 18px; }
}


/* ================================================================
   JOIN OUR TEAM / WHO WE ARE v2  -  pixel-perfect LMH rebuild
================================================================ */
.jot-hero {
    position: relative; min-height: 480px;
    background: #193946 no-repeat center top; background-size: cover;
    display: flex; align-items: flex-end;
}
.jot-hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(25,57,70,0.0) 0%, rgba(25,57,70,0.45) 55%, rgba(25,57,70,0.75) 100%);
}
.jot-hero__inner {
    position: relative; z-index: 1; width: 100%;
    max-width: 1470px; margin: 0 auto; padding: 0 60px 56px 60px;
}
.jot-hero__inner h1 {
    color: #fff; font-size: 68px; line-height: 72px;
    font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin: 0;
}
.jot-hero__inner h1::after {
    content: ''; display: block; width: 80px; height: 8px;
    background: #FDD835; margin-top: 16px;
}

/* 2. WHITE BOX overlapping hero */
.jot-intro-wrap {
    background: #f5f5f5; margin-top: -60px; position: relative; z-index: 2; padding: 0 0 0 0;
}
.jot-intro-box {
    max-width: 1470px; margin: 0 auto; padding: 0 60px;
    background: #fff;
    display: flex; align-items: flex-start; gap: 64px;
    padding-top: 56px; padding-bottom: 56px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}
.jot-intro__text { flex: 1; min-width: 0; }
.jot-intro__text p { font-size: 17px; line-height: 28px; color: #444; margin: 0; }
.jot-intro__photo { flex: 1; min-width: 0; }
.jot-intro__photo img { width: 100%; display: block; }

/* 3. COMMITMENT TO EQUITY  -  plain white, centred heading */
.jot-equity { background: #f5f5f5; padding: 80px 0; }
.jot-equity__inner {
    max-width: 780px; margin: 0 auto; padding: 0 60px; text-align: center;
}
.jot-equity__inner h2 {
    font-size: 26px; line-height: 34px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px; color: #193946; margin: 0 0 32px 0;
}
.jot-equity__inner p { font-size: 16px; line-height: 27px; color: #444; margin: 0 0 16px 0; }
.jot-equity__county-links { margin-top: 28px; }
.jot-county-link {
    display: inline-block; font-size: 15px; font-weight: 700;
    color: #4bb7d6; text-decoration: none; margin: 0 8px;
    padding-bottom: 2px; border-bottom: 1px solid #4bb7d6;
}
.jot-county-link:hover { color: #193946; border-color: #193946; text-decoration: none; }

/* 4. BENEFITS  -  2 columns, plain, no borders */
.jot-benefits { background: #fff; padding: 80px 0; border-top: 1px solid #e5e5e5; }
.jot-benefits__inner { max-width: 1470px; margin: 0 auto; padding: 0 60px; }
.jot-benefits__inner > h2 {
    font-size: 28px; line-height: 34px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px; color: #193946;
    margin: 0 0 16px 0; padding-bottom: 16px; border-bottom: 3px solid #193946;
}
.jot-benefits__intro {
    font-size: 16px; line-height: 26px; color: #555;
    max-width: 780px; margin: 0 0 48px 0;
}
.jot-benefits__grid { display: flex; gap: 80px; }
.jot-benefits__col { flex: 1; }
.jot-benefit { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid #eee; }
.jot-benefit:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.jot-benefit h4 {
    font-size: 14px; line-height: 18px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px 0;
}
.jot-benefit p { font-size: 15px; line-height: 24px; color: #555; margin: 0; }

/* 5. DEI */
.jot-dei { background: #fff; padding: 80px 0; border-top: 1px solid #e5e5e5; }
.jot-dei__inner { max-width: 1470px; margin: 0 auto; padding: 0 60px; }
.jot-dei__inner > h2 {
    font-size: 28px; line-height: 34px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px; color: #193946;
    margin: 0 0 40px 0; padding-bottom: 16px; border-bottom: 3px solid #193946;
}
.jot-dei__layout { display: flex; align-items: flex-start; gap: 64px; }
.jot-dei__text { flex: 2; }
.jot-dei__text p { font-size: 16px; line-height: 27px; color: #444; margin: 0 0 16px 0; }
.jot-dei__photo { flex: 1; }
.jot-dei__photo img { width: 100%; display: block; }

/* 6. TESTIMONIALS  -  teal band */
.jot-testimonials { background: #4bb7d6; padding: 80px 0; }
.jot-testimonials__inner { max-width: 1470px; margin: 0 auto; padding: 0 60px; text-align: center; }
.jot-testimonials__inner h2 {
    font-size: 13px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 4px; color: #193946; margin: 0 0 40px 0;
}
.jot-testimonial { max-width: 780px; margin: 0 auto; }
.jot-testimonial blockquote {
    font-size: 20px; line-height: 33px; font-style: italic; font-weight: 300;
    color: #193946; margin: 0 0 24px 0; padding: 0; border: none;
}
.jot-testimonial__name {
    font-size: 14px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 1px; color: #193946; margin: 0 0 4px 0;
}
.jot-testimonial__role { font-size: 13px; color: rgba(25,57,70,0.7); margin: 0; }

/* RESPONSIVE  -  both pages */
@media (max-width: 960px) {
    .impact-hero__inner, .impact-section-container { padding: 0 32px; }
    .impact-hero__content h1 { font-size: 44px; line-height: 50px; }
    .impact-2stats { flex-direction: column; }
    .impact-2stat__tile { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .impact-coverage__cols, .impact-2stats-white { flex-direction: column; gap: 40px; }
    .impact-photo-text { flex-direction: column; }
    .impact-photo-text__photo { flex: 0 0 auto; width: 100%; max-width: 320px; }
    .impact-band { padding: 20px 32px; }
    .impact-band-body { padding: 40px 0; }

    .jot-hero__inner { padding: 0 32px 48px 32px; }
    .jot-hero__inner h1 { font-size: 44px; line-height: 50px; }
    .jot-intro-box { flex-direction: column; padding: 40px 32px; gap: 32px; }
    .jot-equity__inner, .jot-benefits__inner,
    .jot-dei__inner, .jot-testimonials__inner { padding: 0 32px; }
    .jot-benefits__grid { flex-direction: column; gap: 0; }
    .jot-dei__layout { flex-direction: column; }
}
@media (max-width: 600px) {
    .impact-hero__content h1 { font-size: 36px; line-height: 42px; }
    .impact-explore-cta { padding: 72px 24px; }
    .impact-explore-cta h2 { font-size: 26px; line-height: 34px; }
    .jot-hero__inner h1 { font-size: 36px; line-height: 42px; }
    .jot-testimonials { padding: 56px 0; }
}

/* Impact photo placeholder  -  maintains layout when no photo uploaded */
.impact-photo-placeholder {
    width: 100%;
    padding-bottom: 75%;
    background: #e5e5e5;
}

/* Fix photo-text layout  -  photo always 240px wide regardless */
.impact-photo-text {
    display: flex !important;
    align-items: flex-start !important;
    gap: 48px !important;
}
.impact-photo-text__photo {
    flex: 0 0 240px !important;
    width: 240px !important;
}
.impact-photo-text__photo img { width: 100%; display: block; }
.impact-photo-text__text { flex: 1 !important; min-width: 0 !important; }


/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 900px) {
    .impact-stat-item { width: 100%; margin-bottom: 48px; }
    .impact-influence-item { width: 100%; border-left: none; border-top: 1px solid #e5e5e5; padding: 24px 0 0 0; margin-bottom: 32px; }
    .benefit-card { width: 50%; }
    .wwd-programme-link { font-size: 18px; }
    .wwwork-country-link { font-size: 22px; }
    .about-statement { font-size: 20px; line-height: 32px; }
    .cta-statement { font-size: 28px; line-height: 38px; }
    .impact-spotlight-grid { flex-direction: column; }
}
@media (max-width: 600px) {
    .benefit-card { width: 100%; }
    .impact-stat-grid { margin: 0; }
    .impact-stat-item { padding: 0 0 48px 0; }
    .about-cta-band { padding: 60px 32px; }
}

/* ============================================================
   RESPONSIVE  -  1100px breakpoint (matches LMH exactly)
============================================================ */
@media only screen and (max-width: 1200px) {
    .hero-feature .content { padding: 0 0 0 56px; }
    .join-team-section .slider { width: calc(100% - 460px); }
}

@media only screen and (max-width: 1100px) {
    /* Switch to mobile header */
    body.mobile-menu #mobile-menu { right: 0; }
    body.mobile-menu #page        { right: 280px; transition: right 0.3s ease; }

    #header { top: -95px; box-shadow: 0 2px 16px rgba(0,0,0,0.15); padding: 40px 0 0 0; }
    #header .upper { display: none; }
    #header .logo  { top: 50%; transform: translateY(-50%); left: 24px; }
    #header .logo img { max-height: 56px; }
    #header .primary-nav  { display: none; }
    #header .secondary-nav { visibility: hidden; pointer-events: none; }
    #header .toggle-menu  { display: flex; align-items: center; }
    #header .section > div { padding: 0 24px; }
    #header .lower > div  { height: 72px; }
    #header .toggle-menu  { bottom: 20px; right: 24px; }

    #page { padding-top: 72px; }

    /* Hero */
    #hero .content { padding: 100px 0 240px 0; max-width: 100%; }
    #hero strong   { font-size: 48px; line-height: 52px; }

    /* Feature */
    .hero-feature { padding: 48px; top: -80px; margin-bottom: -80px; }
    .hero-feature .photo,
    .hero-feature .content { width: 100%; padding: 0; }
    .hero-feature .photo { margin: 0 0 36px 0; }

    /* Impact */
    .impact-tiles > div { width: 50%; }

    /* Join team */
    .join-team-section .slider { position: static; width: 100%; height: 280px; margin-top: 48px; }
    .join-team-section .slide  { height: 280px; }

    /* News */
    .news-tiles > div { width: 50%; }

    /* Posts grid */
    .posts-grid > div { width: 50%; }

    /* Profiles */
    .profiles > div { width: 33.3333%; }

    /* Callout boxes */
    .callout-boxes > div { width: 100%; }

    /* Footer */
    #footer .upper .left,
    #footer .upper .right { width: 100%; padding: 0; }
    #footer .upper .left  { margin-bottom: 48px; }
    #footer .upper .right { margin-bottom: -20px; }

    /* Main content box */
    .main-content-box    { padding: 56px; top: -100px; margin-bottom: -100px; }
    .intro-callouts-box  { padding: 48px 56px 64px; top: -100px; margin-bottom: -100px; }

    /* Cols */
    .cols.cols-4 > div { width: 50%; }

    /* Text with photo */
    .text-with-photo > div { width: 100%; padding: 0 40px; }
    .text-with-photo       { margin: 0; }

    /* Mission vision */
    .mission-vision-box > .content > div { width: 100%; padding: 40px 56px; }
    .mission-vision-box > .content > div:nth-child(2) { border-left: none; border-top: 1px solid #ddd; }

    /* Featured story */
    .featured-story > .photo,
    .featured-story > .content { width: 100%; }
    .featured-story > .content { padding: 32px 0 80px 0; }
    .featured-story .footer-actions { left: 0; }
}

@media only screen and (max-width: 900px) {
    .section > div { padding: 0 32px; }
    #header .section > div { padding: 0 20px; }

    .impact-tiles > div { width: 100%; }
    .news-tiles > div   { width: 100%; }
    .section-footer.split { display: block; text-align: center; }
    .section-footer.split > div + div { margin-top: 24px; }

    .position-cards > div { width: 50%; }

    #footer .upper .right > div { width: 50%; padding-bottom: 32px; }

    .cols > div,
    .cols.cols-3 > div { width: 100%; }

    .publications-grid > div { width: 100%; }
    .profiles > div { width: 50%; }
}

@media only screen and (max-width: 600px) {
    .section > div { padding: 0 24px; }

    h1 { font-size: 42px; line-height: 48px; }
    h2 { font-size: 28px; line-height: 34px; }

    #hero .content   { padding: 80px 0 200px 0; }
    #hero strong     { font-size: 36px; line-height: 42px; }

    .hero-feature { padding: 32px; }

    .join-team-banner > div { padding-top: 80px; padding-bottom: 60px; }

    .video-banner .content { padding: 80px 32px; font-size: 26px; line-height: 36px; }

    .page-intro .content { padding: 80px 0 160px 0; }
    .page-intro h1 { font-size: 38px; line-height: 44px; }

    .main-content-box { padding: 32px; }
    .intro-callouts-box { padding: 32px; }

    .posts-grid > div { width: 100%; }
    .profiles > div   { width: 50%; }
    .position-cards > div { width: 100%; }
    .callout-boxes > div  { width: 100%; }
    .cols.cols-4 > div    { width: 100%; }

    #footer .upper > div { padding-top: 48px; padding-bottom: 64px; }
    #footer .upper .right > div { width: 100%; padding-bottom: 24px; }

    .sidebar-layout { flex-direction: column; gap: 40px; }
    .contact-layout { flex-direction: column; gap: 40px; }
}

/* ================================================================
   IMPACT PAGE  -  exact LMH measurements
   Container: max-width 1100px centred (NOT full width)
   All measurements taken directly from LMH screenshot
================================================================ */

/* SHARED: centred container matching LMH content width */
.impact-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ---- 1. HERO ---- */
.impact-hero {
    position: relative;
    min-height: 520px;
    background: #193946 no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: flex-end;
}
.impact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(25,57,70,0.92) 0%,
        rgba(25,57,70,0.70) 45%,
        rgba(25,57,70,0.20) 100%
    );
}
.impact-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
}
.impact-hero__content {
    max-width: 480px;
    padding-bottom: 88px;
}
.impact-hero__content h1 {
    color: #fff;
    font-size: 64px;
    line-height: 68px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px 0;
}
.impact-hero__content h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 6px;
    background: #8e3168;
    margin-top: 14px;
}
.impact-hero__content p {
    color: rgba(255,255,255,0.88);
    font-size: 17px;
    line-height: 27px;
    font-weight: 300;
    margin: 0;
}

/* ---- 2. STAT TILES  -  dark navy, exactly 2 tiles ---- */
.impact-stats-dark {
    display: flex;
    background: #193946;
    justify-content: center;
}
.impact-stat-dark {
    flex: 1;
    padding: 80px 48px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.impact-stat-dark:last-child {
    border-right: none;
}
.impact-stat-dark__icon {
    font-size: 56px;
    color: rgba(255,255,255,0.50);
    margin-bottom: 24px;
    line-height: 1;
}
.impact-stat-dark h4 {
    font-size: 72px;
    line-height: 76px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 20px 0;
    font-family: 'Lato', Arial, sans-serif;
}
.impact-stat-dark p {
    font-size: 15px;
    line-height: 24px;
    color: rgba(255,255,255,0.72);
    margin: 0 auto;
    max-width: 380px;
}
.impact-stat-dark p strong {
    color: #fff;
    font-weight: 700;
}

/* ---- 3. COVERAGE AND REACH  -  dark navy ---- */
.impact-coverage-band {
    background: #193946;
    border-top: 1px solid rgba(255,255,255,0.10);
    padding: 72px 0;
}
.impact-coverage-band__label {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    margin: 0 0 48px 0;
}
.impact-coverage-band__cols {
    display: flex;
    gap: 48px;
}
.impact-coverage-band__col {
    flex: 1;
    text-align: center;
    padding: 0 24px;
}
.impact-coverage-band__icon {
    font-size: 64px;
    color: rgba(255,255,255,0.40);
    margin-bottom: 24px;
    line-height: 1;
}
.impact-coverage-band__col p {
    font-size: 16px;
    line-height: 26px;
    color: rgba(255,255,255,0.85);
    margin: 0;
}
.impact-coverage-band__col p strong {
    color: #fff;
}

/* ---- 4. GLOBAL INFLUENCE  -  yellow band + white body ---- */
.impact-influence__band {
    background: #FDD835;
    padding: 32px 48px;
    text-align: center;
}
.impact-influence__band h2 {
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #193946;
    margin: 0;
}
.impact-influence__body {
    background: #fff;
    padding: 80px 0;
    border-bottom: 1px solid #e5e5e5;
}
.impact-influence__cols {
    display: flex;
    gap: 0;
    width: 100%;
}
.impact-influence__col {
    flex: 1;
    text-align: center;
    padding: 0 48px;
    border-right: 1px solid #e8e8e8;
}
.impact-influence__col:last-child {
    border-right: none;
}
.impact-influence__icon {
    font-size: 56px;
    color: #FDD835;
    margin-bottom: 20px;
    line-height: 1;
}
.impact-influence__col h2 {
    font-size: 64px;
    line-height: 68px;
    font-weight: 900;
    color: #193946;
    margin: 0 0 16px 0;
}
.impact-influence__col p {
    font-size: 16px;
    line-height: 26px;
    color: #555;
    margin: 0 auto;
    max-width: 340px;
}
.impact-influence__col p strong {
    color: #193946;
}

/* ---- 5/6/7. FOCUS SECTIONS ---- */
.impact-focus-section {
    border-top: 1px solid #e5e5e5;
}
.impact-focus-band {
    padding: 32px 48px;
    text-align: center;
}
.impact-focus-band h2 {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}
.impact-focus-band--purple { background: #8e3168; }
.impact-focus-band--purple h2 { color: #fff; }
.impact-focus-band--green  { background: #33691E; }
.impact-focus-band--green h2  { color: #fff; }
.impact-focus-band--teal   { background: #4bb7d6; }
.impact-focus-band--teal h2   { color: #193946; }

.impact-focus-body {
    background: #fff;
    padding: 48px 0;
}

/* Photo + text row  -  photo LEFT, text RIGHT */
.impact-focus-row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
}
.impact-focus-row__photo {
    flex: 0 0 200px;
    width: 200px;
}
.impact-focus-row__photo img {
    width: 100%;
    display: block;
}
.impact-focus-row__placeholder {
    width: 100%;
    height: 160px;
    background: #e0e0e0;
}
.impact-focus-row__text {
    flex: 1;
    min-width: 0;
}
.impact-focus-row__text p {
    font-size: 15px;
    line-height: 26px;
    color: #444;
    margin: 0 0 14px 0;
}
.impact-focus-link {
    font-size: 12px;
    font-weight: 900;
    color: #4bb7d6;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.impact-focus-link:hover { text-decoration: underline; }

/* SPOTLIGHT CARDS */
.impact-spotlight-row {
    display: flex;
    gap: 16px;
}
.impact-spotlight-card {
    flex: 1;
    display: block;
    background: #193946;
    padding: 28px 32px;
    text-decoration: none;
    transition: background 0.2s;
}
.impact-spotlight-card:hover {
    background: #0e2530;
    text-decoration: none;
}
.impact-spotlight-card__label {
    display: block;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #4bb7d6;
    margin-bottom: 12px;
}
.impact-spotlight-card h3 {
    font-size: 15px;
    line-height: 22px;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
}

/* ---- 8. EDITORIAL ---- */
.impact-editorial {
    padding: 72px 0;
    background: #fff;
    border-top: 1px solid #e5e5e5;
}
.impact-editorial p {
    font-size: 16px;
    line-height: 27px;
    color: #444;
    margin: 0 0 20px 0;
}
.impact-editorial ul {
    padding-left: 20px;
    margin: 12px 0 20px;
}
.impact-editorial li {
    font-size: 15px;
    line-height: 25px;
    color: #444;
    margin-bottom: 6px;
}

/* ---- 9. BOTTOM CTA ---- */
.impact-explore-cta {
    position: relative;
    background: #193946 no-repeat center center;
    background-size: cover;
    padding: 120px 48px;
    text-align: center;
}
.impact-explore-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(25,57,70,0.75);
}
.impact-explore-cta__inner {
    position: relative;
    z-index: 1;
}
.impact-explore-cta h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 24px 0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 960px) {
    .impact-container { padding: 0 32px; }
    .impact-hero__inner { padding: 0 32px; }
    .impact-hero__content h1 { font-size: 44px; line-height: 50px; }
    .impact-stats-dark { flex-direction: column; }
    .impact-stat-dark { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 48px 32px; }
    .impact-coverage-band__cols { flex-direction: column; gap: 32px; }
    .impact-influence__cols { flex-direction: column; }
    .impact-influence__col { border-right: none; border-bottom: 1px solid #e8e8e8; padding: 32px 32px; }
    .impact-influence__col:last-child { border-bottom: none; }
    .impact-focus-row { flex-direction: column; }
    .impact-focus-row__photo { flex: 0 0 auto; width: 100%; max-width: 280px; }
    .impact-spotlight-row { flex-direction: column; }
}
@media (max-width: 600px) {
    .impact-hero__content h1 { font-size: 36px; line-height: 42px; }
    .impact-explore-cta { padding: 72px 24px; }
    .impact-explore-cta h2 { font-size: 24px; line-height: 32px; }
}