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

:root {
    --red:#ef3e36;
    --red-dark:#d92e28;
    --blue:#1786c8;
    --blue-dark:#105a8b;
    --green:#16a34a;
    --yellow:#f7c928;
    --navy:#153b5d;
    --text:#29455d;
    --muted:#657b8d;
    --pale:#f7fafc;
    --white:#fff;
    --border:#e2ebf1;
    --shadow:0 14px 34px rgba(21,59,93,.10)
}

html {
    scroll-behavior:smooth
}

body {
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:var(--white);
    line-height:1.6
}

a {
    text-decoration:none;
    color:inherit
}

.page-width {
    width:min(1180px,calc(100% - 48px));
    margin:auto
}

.site-header {
    height:96px;
    background:var(--white);
    border-bottom:1px solid var(--border);
    position:relative;
    z-index:100
}

.header-inner {
    width:min(1180px,calc(100% - 48px));
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.brand img {
    display:block;
    width:180px;
    height:86px;
    object-fit:contain
}

.nav {
    display:flex;
    align-items:center;
    gap:30px
}

.nav>a:not(.nav-call) {
    font-size:14px;
    font-weight:800;
    color:var(--navy);
    padding:35px 0 31px;
    position:relative
}

.nav>a:not(.nav-call):after {
    content:"";
    position:absolute;
    bottom:25px;
    left:0;
    width:0;
    height:3px;
    background:var(--red);
    transition:.2s
}

.nav>a.active,.nav>a:not(.nav-call):hover {
    color:var(--red)
}

.nav>a.active:after,.nav>a:not(.nav-call):hover:after {
    width:100%
}

.nav-call {
    padding:12px 19px;
    background:var(--red);
    color:var(--white);
    font-size:14px;
    font-weight:800;
    border-radius:4px;
    transition:.2s
}

.nav-call:hover,.button:hover {
    transform:translateY(-2px)
}

.menu-button {
    display:none;
    border:0;
    background:none;
    width:40px;
    height:40px
}

.menu-button span {
    display:block;
    width:27px;
    height:3px;
    background:var(--navy);
    margin:5px auto
}

.hero {
    height:570px;
    position:relative;
    overflow:hidden;
    background:var(--white)
}

.hero-image {
    position:absolute;
    inset:0;
    background:url("../images/BACK.png") center right/cover no-repeat
}

.hero-inner {
    width:min(1180px,calc(100% - 48px));
    height:100%;
    margin:auto;
    position:relative;
    display:flex;
    align-items:center
}

.hero-copy {
    width:47%;
    max-width:550px
}

.eyebrow,.section-kicker {
    font-size:12px;
    letter-spacing:2.2px;
    font-weight:900;
    color:var(--red);
    margin-bottom:14px
}

.eyebrow span {
    display:inline-block;
    width:24px;
    height:4px;
    background:var(--yellow);
    vertical-align:middle;
    margin-right:8px
}

.hero h1 {
    font-size:58px;
    line-height:1.03;
    color:var(--navy);
    letter-spacing:-2px;
    margin-bottom:20px
}

.hero h1 strong {
    color:var(--red);
    font-weight:900
}

.hero-text {
    font-size:18px;
    color:var(--muted);
    max-width:520px;
    margin-bottom:28px
}

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

.button {
    display:inline-block;
    padding:13px 22px;
    border-radius:4px;
    font-weight:800;
    transition:.2s
}

.button-red {
    background:var(--red);
    color:var(--white)
}

.button-red:hover {
    background:var(--red-dark)
}

.button-white {
    background:var(--white);
    color:var(--navy);
    border:1px solid var(--border)
}

.values {
    background:var(--white);
    position:relative
}

.values-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    box-shadow:var(--shadow);
    transform:translateY(-24px);
    background:var(--white)
}

.value {
    padding:25px 27px;
    display:flex;
    align-items:center;
    gap:17px;
    border-right:1px solid var(--border);
    border-top:4px solid
}

.value:last-child {
    border-right:0
}

.value-red {
    border-top-color:var(--red)
}

.value-blue {
    border-top-color:var(--blue)
}

.value-green {
    border-top-color:var(--green)
}

.value-symbol {
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:19px;
    font-weight:900;
    background:var(--pale)
}

.value-red .value-symbol {
    color:var(--red)
}

.value-blue .value-symbol {
    color:var(--blue)
}

.value-green .value-symbol {
    color:var(--green)
}

.value h3 {
    font-size:17px;
    color:var(--navy);
    margin-bottom:2px
}

.value p {
    font-size:13px;
    color:var(--muted)
}

.welcome {
    padding:72px 0 95px
}

.welcome-grid {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:90px;
    align-items:center
}

.welcome-copy h2,.section-heading h2,.community-copy h2,.contact-band h2 {
    font-size:42px;
    line-height:1.12;
    color:var(--navy);
    letter-spacing:-1px;
    margin-bottom:22px
}

.welcome-copy h2 em,.section-heading h2 em,.community-copy h2 em {
    font-style:normal;
    color:var(--red)
}

.welcome-copy>p:not(.section-kicker) {
    color:var(--muted);
    margin-bottom:16px
}

.text-link {
    display:inline-block;
    color:var(--red);
    font-weight:900;
    margin-top:9px
}

.text-link span {
    margin-left:6px
}

.welcome-visual {
    min-height:380px;
    display:flex;
    align-items:center;
    justify-content:center
}

.logo-panel {
    position:relative;
    right:auto;
    top:auto;
    width:390px;
    background:var(--white);
    box-shadow:var(--shadow);
    padding:30px 32px 0;
    text-align:center;
    border:1px solid var(--border)
}

.logo-panel img {
    width:220px;
    height:190px;
    object-fit:contain
}

.panel-line {
    width:50px;
    height:4px;
    background:var(--red);
    margin:12px auto 15px
}

.logo-panel p {
    font-size:19px;
    font-weight:800;
    line-height:1.45;
    color:var(--navy);
    margin-bottom:25px
}

.mini-card {
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:calc(100% + 64px);
    margin-left:-32px;
    padding:17px 22px;
    background:var(--white);
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    border-left:4px solid;
    border-top:1px solid var(--border);
    text-align:left
}

.mini-card strong {
    min-width:48px;
    font-size:20px;
    line-height:1
}

.mini-card span {
    font-size:12px;
    font-weight:800;
    color:var(--navy)
}

.mini-red {
    border-left-color:var(--red)
}

.mini-red strong {
    color:var(--red)
}

.mini-yellow {
    border-left-color:var(--yellow)
}

.mini-yellow strong {
    color:#b78a00
}

.services {
    padding:90px 0;
    background:var(--pale)
}

.section-heading {
    display:grid;
    grid-template-columns:1fr .75fr;
    gap:70px;
    align-items:end;
    margin-bottom:42px
}

.section-heading h2 {
    margin:0
}

.section-heading>p {
    color:var(--muted);
    padding-bottom:4px
}

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

.service-card {
    position:relative;
    background:var(--white);
    padding:29px 27px 26px;
    border:1px solid var(--border);
    border-top:5px solid;
    min-height:265px;
    transition:.25s
}

.service-card:hover {
    transform:translateY(-6px);
    box-shadow:var(--shadow)
}

.service-card.red {
    border-top-color:var(--red)
}

.service-card.blue {
    border-top-color:var(--blue)
}

.service-card.green {
    border-top-color:var(--green)
}

.service-card.yellow {
    border-top-color:var(--yellow)
}

.service-number {
    font-size:11px;
    font-weight:900;
    color:#9aabba
}

.service-mark {
    font-size:15px;
    margin:16px 0 12px
}

.red .service-mark {
    color:var(--red)
}

.blue .service-mark {
    color:var(--blue)
}

.green .service-mark {
    color:var(--green)
}

.yellow .service-mark {
    color:var(--yellow)
}

.service-card h3 {
    font-size:19px;
    line-height:1.25;
    color:var(--navy);
    margin-bottom:11px
}

.service-card p {
    font-size:14px;
    color:var(--muted);
    padding-right:8px
}

.card-arrow {
    position:absolute;
    right:25px;
    bottom:20px;
    font-size:22px;
    color:var(--navy)
}

.community {
    padding:90px 0;
    background:var(--navy);
    color:var(--white);
    position:relative;
    overflow:hidden
}

.community:after {
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border:55px solid rgba(255,255,255,.035);
    border-radius:50%;
    right:-110px;
    top:-120px
}

.community-grid {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:85px;
    position:relative;
    z-index:2
}

.section-kicker.light {
    color:var(--yellow)
}

.community-copy h2 {
    color:var(--white)
}

.community-copy h2 em {
    color:#ff6c65
}

.community-copy>p:not(.section-kicker) {
    color:#d7e3eb;
    margin-bottom:26px
}

.community-list {
    background:var(--white);
    color:var(--text)
}

.community-row {
    display:flex;
    gap:20px;
    padding:24px 27px;
    border-bottom:1px solid var(--border)
}

.community-row:last-child {
    border-bottom:0
}

.circle {
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--white);
    font-size:12px;
    font-weight:900
}

.red-bg {
    background:var(--red)
}

.blue-bg {
    background:var(--blue)
}

.green-bg {
    background:var(--green)
}

.community-row h3 {
    font-size:18px;
    color:var(--navy);
    margin-bottom:3px
}

.community-row p {
    font-size:14px;
    color:var(--muted)
}

.contact-band {
    padding:68px 0;
    background:var(--white)
}

.contact-band-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px
}

.contact-band h2 {
    font-size:34px;
    margin-bottom:6px
}

.contact-band p:not(.section-kicker) {
    color:var(--muted)
}

.contact-actions {
    display:flex;
    align-items:center;
    gap:24px
}

.phone-link {
    display:flex;
    flex-direction:column;
    border-left:1px solid var(--border);
    padding-left:24px;
    white-space:nowrap
}

.phone-link small {
    font-size:10px;
    letter-spacing:1.5px;
    color:var(--muted);
    font-weight:900
}

.phone-link strong {
    font-size:18px;
    color:var(--navy)
}

.footer {
    background:#102e48;
    color:#d7e3eb
}

.footer-grid {
    display:grid;
    grid-template-columns:1.25fr .7fr 1fr;
    gap:70px;
    padding-top:52px;
    padding-bottom:38px
}

.footer-brand img {
    width:175px;
    height:125px;
    object-fit:contain;
    background:var(--white);
    margin-bottom:14px
}

.footer h3 {
    font-size:15px;
    color:var(--white);
    margin-bottom:13px
}

.footer p,.footer a {
    display:block;
    font-size:13px;
    color:#c7d6e1;
    margin-bottom:7px
}

.footer a:hover {
    color:var(--white)
}

.footer-brand p {
    max-width:350px
}

.footer-bottom {
    border-top:1px solid rgba(255,255,255,.12);
    padding:17px 0;
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:#8fa8ba
}

@media(max-width:950px) {
    .nav {
        gap:18px
    }
    .nav>a:not(.nav-call) {
        font-size:13px
    }
    .hero-copy {
        width:55%
    }
    .hero h1 {
        font-size:48px
    }
    .welcome-grid {
        gap:45px
    }
    .service-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .community-grid {
        gap:45px
    }
    .footer-grid {
        gap:35px
    }
}

@media(max-width:780px) {
    .site-header {
        height:82px
    }
    .header-inner {
        width:calc(100% - 32px)
    }
    .brand img {
        width:155px;
        height:72px
    }
    .menu-button {
        display:block
    }
    .nav {
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:82px;
        background:var(--white);
        padding:10px 20px 22px;
        box-shadow:0 12px 25px rgba(0,0,0,.12);
        flex-direction:column;
        align-items:stretch;
        gap:0
    }
    .nav.open {
        display:flex
    }
    .nav>a:not(.nav-call) {
        padding:13px 4px;
        border-bottom:1px solid var(--border)
    }
    .nav>a:not(.nav-call):after {
        display:none
    }
    .nav-call {
        text-align:center;
        margin-top:12px
    }
    .page-width,.hero-inner {
        width:calc(100% - 36px)
    }
    .hero {
        height:560px
    }
    .hero-image {
        background-position:60% center;
        opacity:.46
    }
    .hero-copy {
        width:68%
    }
    .values-grid {
        grid-template-columns:1fr;
        transform:translateY(-16px)
    }
    .value {
        border-right:0;
        border-bottom:1px solid var(--border)
    }
    .welcome-grid,.community-grid,.section-heading {
        grid-template-columns:1fr
    }
    .welcome-visual {
        min-height:390px
    }
    .logo-panel {
        right:10%;
    }
    .service-grid {
        grid-template-columns:1fr 1fr
    }
    .contact-band-inner {
        align-items:flex-start;
        flex-direction:column
    }
    .footer-grid {
        grid-template-columns:1fr 1fr
    }
    .footer-brand {
        grid-column:1/-1
    }
}

@media(max-width:560px) {
    .page-width,.hero-inner {
        width:calc(100% - 30px)
    }
    .hero {
        height:590px
    }
    .hero-image {
        background-position:65% center;
        opacity:.30
    }
    .hero-copy {
        width:100%
    }
    .hero h1 {
        font-size:42px
    }
    .hero-text {
        font-size:16px
    }
    .hero-actions {
        gap:8px
    }
    .button {
        padding:12px 16px
    }
    .welcome {
        padding:55px 0 75px
    }
    .welcome-copy h2,.section-heading h2,.community-copy h2 {
        font-size:34px
    }
    .welcome-visual {
        min-height:auto;
        margin-top:15px
    }
    .logo-panel {
        position:relative;
        right:auto;
        width:100%;
        margin:0 auto;
        padding:25px 25px 0
    }
    .logo-panel img {
        width:180px;
        height:150px
    }
    .mini-card {
        width:calc(100% + 50px);
        margin-left:-25px;
        padding:16px 18px
    }
    .mini-red,.mini-yellow {
        left:auto;
        right:auto;
        top:auto;
        bottom:auto
    }
    .services,.community {
        padding:70px 0
    }
    .service-grid {
        grid-template-columns:1fr
    }
    .service-card {
        min-height:0
    }
    .section-heading {
        gap:12px
    }
    .community-grid {
        gap:35px
    }
    .community-list {
        margin-top:5px
    }
    .contact-actions {
        align-items:flex-start;
        flex-direction:column;
        gap:16px
    }
    .phone-link {
        border-left:0;
        padding-left:0
    }
    .footer-grid {
        grid-template-columns:1fr;
        gap:30px
    }
    .footer-brand {
        grid-column:auto
    }
    .footer-bottom {
        display:block;
        text-align:center
    }
    .footer-bottom span {
        display:block;
        margin:3px 0
    }
}

/* =========================================================
   WHO WE ARE - RIGHT PANEL FIX
========================================================= */

.welcome-visual {
    min-height: 420px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    align-content: center;
    justify-content: center;
    max-width: 460px;
    margin-left: auto;
}

.logo-panel {
    position: relative;
    right: auto;
    top: auto;
    grid-column: 1 / -1;
    width: 100%;
    padding: 28px 30px 24px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: center;
}

.logo-panel img {
    width: 210px;
    height: 175px;
    object-fit: contain;
}

.panel-line {
    width: 50px;
    height: 4px;
    margin: 12px auto 14px;
    background: var(--red);
}

.logo-panel p {
    margin: 0;
    color: var(--navy);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
}

.mini-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 82px;
    margin: 0;
    padding: 17px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    background: var(--white);
    border-top: 0;
    box-shadow: var(--shadow);
    text-align: left;
}

.mini-card strong {
    min-width: auto;
    font-size: 20px;
    line-height: 1;
}

.mini-card span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--navy);
}

.mini-red {
    border: 1px solid var(--border);
    border-top: 4px solid var(--red);
    border-right: 0;
}

.mini-red strong {
    color: var(--red);
}

.mini-yellow {
    border: 1px solid var(--border);
    border-top: 4px solid var(--yellow);
}

.mini-yellow strong {
    color: #b78a00;
}

@media (max-width: 780px) {
    .welcome-visual {
        width: 100%;
        max-width: 460px;
        min-height: auto;
        margin: 25px auto 0;
    }
    .logo-panel {
        right: auto;
    }
}

@media (max-width: 560px) {
    .welcome-visual {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }
    .logo-panel {
        grid-column: 1;
        width: 100%;
        padding: 24px 20px;
    }
    .logo-panel img {
        width: 180px;
        height: 150px;
    }
    .mini-card {
        width: 100%;
        min-height: 72px;
        margin: 0;
        padding: 15px 18px;
        justify-content: flex-start;
    }
    .mini-red {
        border-right: 1px solid var(--border);
    }
    .mini-yellow {
        border-top: 0;
        border-left: 1px solid var(--border);
    }
}