@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    --navy: #101b4b;
    --ink: #102b3b;
    --red: #dc202b;
    --orange: #fa5728;
    --muted: #65727c;
    --pale: #f3f6f7;
    --line: #dfe5e8
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Arial,Helvetica,sans-serif;
    color: var(--ink);
    line-height: 1.6;
    background: #fff
}

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

button, input, select, textarea {
    font: inherit
}

button, a, input, textarea, select {
    outline-offset: 5px
}

img {
    max-width: 100%;
    display: block
}

h1, h2, h3, p {
    margin: 0
}

h1, h2, h3 {
    line-height: 1.12;
    letter-spacing: -.045em
}

h1 {
    font-size: clamp(42px,5.2vw,76px)
}

h2 {
    font-size: clamp(30px,3.1vw,44px)
}

h3 {
    font-size: 23px
}

p {
    color: var(--muted)
}

.wrap {
    width: min(1240px,88%);
    margin: auto
}

.topbar {
    background: var(--navy);
    color: #cbd3e6;
    font-size: 11px;
    letter-spacing: 1.2px;
    padding: 8px 0
}

    .topbar .wrap {
        display: flex;
        justify-content: space-between
    }

header {
    background: white;
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line)
}

.nav {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

    .brand img {
        width: 70px;
        height: 51px;
        object-fit: contain
    }

    .brand b {
        font-size: 17px;
        line-height: 1.1;
        display: block;
        letter-spacing: -.6px;
        color: var(--navy)
    }

    .brand small {
        display: block;
        letter-spacing: 3.3px;
        font-size: 9px;
        margin-top: 7px
    }

.navlinks {
    display: flex;
    gap: 27px;
    align-items: center;
    font-size: 13px;
    font-weight: 600
}

    .navlinks a.active {
        color: var(--red)
    }

    .navlinks a:not(.button) {
        padding: 12px 0;
        border-bottom: 2px solid transparent
    }

    .navlinks a.active {
        border-color: var(--red)
    }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    background: var(--red);
    color: white;
    padding: 14px 23px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--red);
    border-radius: 3px;
    cursor: pointer;
    transition: .2s
}

    .button:hover {
        background: #b91825;
        transform: translateY(-2px)
    }

    .button.light {
        background: white;
        color: var(--ink);
        border-color: #d3dbe0
    }

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

.menu {
    display: none;
    background: none;
    border: 0;
    font-size: 24px
}

.hero {
    min-height: 610px;
    position: relative;
    background: var(--navy);
    overflow: hidden;
    color: white;
    display: flex;
    align-items: center
}

    .hero:before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(5,24,41,.93),rgba(5,24,41,.68) 42%,rgba(5,24,41,.03) 78%),url('assets/hero.png') center/cover
    }

    .hero .wrap {
        position: relative;
        padding: 76px 0
    }

.eyebrow {
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: var(--red);
    margin-bottom: 17px
}

.hero .eyebrow {
    color: #ffad91
}

.hero h1 {
    max-width: 670px
}

    .hero h1 em {
        font-style: normal;
        color: #ff7857
    }

.hero p {
    max-width: 510px;
    color: #d5dfe5;
    font-size: 16px;
    margin: 24px 0 30px
}

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

.hero .outline {
    color: white;
    border-color: #a5b3bc
}

.hero-bottom {
    display: flex;
    gap: 32px;
    margin-top: 48px;
    font-size: 12px;
    color: #d7e0e6
}

    .hero-bottom span:before {
        content: '✓';
        color: #ff8764;
        margin-right: 9px
    }

.hero-label {
    position: absolute;
    right: 0;
    bottom: 35px;
    font-size: 10px;
    letter-spacing: 2px;
    color: white
}

.section {
    padding: 80px 0
}

    .section.pale {
        background: var(--pale)
    }

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 35px;
    margin-bottom: 34px
}

    .section-heading p {
        max-width: 390px;
        font-size: 14px
    }

.grid {
    display: grid;
    gap: 22px
}

.four {
    grid-template-columns: repeat(4,1fr)
}

.three {
    grid-template-columns: repeat(3,1fr)
}

.two {
    grid-template-columns: repeat(2,1fr)
}

.service-card {
    background: white;
    border: 1px solid var(--line);
    transition: .25s;
    position: relative
}

    .service-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 35px #142d4210
    }

.picture {
    height: 180px;
    object-fit: cover;
    width: 100%;
    background: #dce5e9
}

.card-body {
    padding: 25px
}

    .card-body h3 {
        font-size: 20px;
        margin-bottom: 12px
    }

    .card-body p {
        font-size: 13px
    }

.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    font-size: 11px;
    color: var(--red);
    font-weight: 700
}

.icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: white;
    font-size: 24px;
    margin-top: -48px;
    position: relative;
    margin-bottom: 20px;
    border: 4px solid white;
    border-radius: 50%
}

.strip {
    background: var(--navy);
    color: white;
    padding: 32px 0
}

    .strip .grid > div {
        border-right: 1px solid #ffffff30;
        padding-left: 20px
    }

    .strip strong {
        font-size: 22px;
        display: block;
        letter-spacing: -.5px
    }

    .strip span {
        font-size: 11px;
        color: #c3cce0
    }

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center
}

.about-photo {
    height: 430px;
    width: 100%;
    object-fit: cover
}

.about-visual {
    position: relative
}

.stamp {
    position: absolute;
    bottom: -16px;
    right: -18px;
    background: var(--navy);
    color: white;
    padding: 24px;
    font-size: 16px;
    line-height: 1.5;
    border: 8px solid white
}

.copy p {
    margin: 22px 0;
    font-size: 15px
}

.ticks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 25px 0;
    font-size: 13px
}

    .ticks span:before {
        content: '✓';
        color: var(--red);
        margin-right: 10px
    }

.project {
    border-bottom: 1px solid var(--line);
    padding-bottom: 22px
}

    .project .picture {
        height: 230px
    }

    .project .tag {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        color: var(--red);
        margin: 20px 0 8px
    }

    .project h3 {
        margin-bottom: 9px
    }

    .project p {
        font-size: 13px
    }

.note {
    font-size: 13px;
    color: var(--muted);
    margin-top: 24px
}

.sector-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px
}

    .sector-strip a {
        border: 1px solid var(--line);
        padding: 17px 23px;
        font-size: 13px;
        background: white
    }

.cta {
    padding: 57px 0;
    background: #ecf2f5;
    border-top: 1px solid var(--line)
}

    .cta .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px
    }

    .cta p {
        margin-top: 12px;
        font-size: 14px
    }

footer {
    background: #0b2134;
    color: white;
    padding: 60px 0 20px
}

    footer .grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
        gap: 45px
    }

    footer h4 {
        font-size: 12px;
        margin: 0 0 18px
    }

    footer p, footer a {
        font-size: 13px;
        color: #b5c2cd
    }

    footer a {
        display: block;
        margin: 9px 0
    }

    footer .brand {
        background: white;
        padding: 12px;
        width: max-content;
        border-radius: 3px;
        margin-bottom: 20px
    }

        footer .brand b {
            font-size: 14px
        }

        footer .brand img {
            width: 50px
        }

.copyright {
    border-top: 1px solid #ffffff20;
    margin-top: 40px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #a4b4c0
}

.float-chat {
    position: fixed;
    right: 24px;
    bottom: 24px;
    background: #117c58;
    color: white;
    z-index: 25;
    border-radius: 30px;
    padding: 12px 20px;
    font-size: 12px;
    box-shadow: 0 6px 20px #0002
}

.page-hero {
    background: var(--navy);
    color: white;
    padding: 65px 0 70px;
    position: relative
}

    .page-hero .eyebrow {
        color: #ff957b
    }

    .page-hero h1 {
        font-size: clamp(40px,5vw,64px);
        max-width: 850px
    }

    .page-hero p {
        max-width: 640px;
        margin-top: 20px;
        color: #c6d1e1
    }

.breadcrumb {
    font-size: 11px;
    color: #bcc9dc;
    margin-bottom: 28px
}

.detail {
    padding: 40px;
    border: 1px solid var(--line);
    background: white;
    scroll-margin-top: 120px
}

    .detail .number {
        font-size: 12px;
        color: var(--red);
        margin-bottom: 25px;
        display: block
    }

    .detail p {
        margin: 20px 0
    }

    .detail ul {
        padding-left: 18px;
        color: var(--muted);
        font-size: 14px;
        line-height: 2
    }

.filterbar {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap
}

    .filterbar button {
        background: white;
        border: 1px solid var(--line);
        padding: 10px 20px;
        cursor: pointer;
        font-size: 12px
    }

        .filterbar button.active {
            background: var(--navy);
            color: white
        }

.contact-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px
}

.contact-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--line)
}

    .contact-item b {
        font-size: 13px
    }

    .contact-item p {
        font-size: 14px;
        margin-top: 8px
    }

form {
    background: var(--pale);
    padding: 35px
}

label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 16px
}

input, select, textarea {
    display: block;
    border: 1px solid #cdd7df;
    background: white;
    border-radius: 2px;
    padding: 12px;
    width: 100%;
    margin-top: 8px;
    color: var(--ink)
}

textarea {
    min-height: 120px;
    resize: vertical
}

form h3 {
    margin-bottom: 25px
}

form .grid {
    gap: 15px
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: normal;
    color: var(--muted)
}

    .check input {
        width: 16px;
        margin: 3px 0
    }

.status {
    margin-top: 15px;
    font-size: 13px
}

.map {
    width: 100%;
    height: 330px;
    border: 0;
    margin-top: 35px
}

.map-empty {
    background: var(--pale);
    padding: 50px;
    text-align: center;
    margin-top: 35px
}

.step {
    border-top: 2px solid var(--red);
    padding-top: 24px
}

    .step b {
        font-size: 12px;
        color: var(--red)
    }

    .step h3 {
        margin: 15px 0
    }

    .step p {
        font-size: 14px
    }

.admin-banner {
    padding: 15px;
    background: #fff0df;
    font-size: 13px
}

.hidden {
    display: none !important
}

.skip {
    position: absolute;
    left: -9999px
}

    .skip:focus {
        left: 10px;
        top: 10px;
        background: white;
        z-index: 100;
        padding: 15px
    }

@media(min-width:1500px) {
    .hero {
        min-height: 680px
    }
}

@media(max-width:1000px) {
    .navlinks {
        gap: 15px
    }

    .brand b {
        font-size: 14px
    }

    .navlinks .button {
        display: none
    }

    .four {
        grid-template-columns: repeat(2,1fr)
    }

    .split {
        gap: 35px
    }

    .hero-label {
        display: none
    }

    footer .grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:700px) {
    .wrap {
        width: 89%
    }

    .topbar .wrap span:last-child {
        display: none
    }

    .nav {
        height: 76px
    }

    .menu {
        display: block
    }

    .navlinks {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        background: white;
        padding: 25px;
        flex-direction: column;
        align-items: stretch;
        box-shadow: 0 20px 25px #0001
    }

        .navlinks.open {
            display: flex
        }

        .navlinks .button {
            display: flex
        }

    .hero {
        min-height: 640px
    }

        .hero:before {
            background: linear-gradient(90deg,#071a2be6,#071a2b85),url('assets/hero.png') 65% center/cover
        }

        .hero .wrap {
            padding: 55px 0
        }

        .hero h1 {
            font-size: 46px
        }

    .hero-bottom {
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 30px
    }

    .section {
        padding: 52px 0
    }

    .section-heading {
        display: block
    }

        .section-heading p, .section-heading .button {
            margin-top: 20px
        }

    .split, .three, .two, .contact-grid {
        grid-template-columns: 1fr
    }

    .four {
        gap: 14px
    }

    .card-body {
        padding: 20px 15px
    }

        .card-body h3 {
            font-size: 18px
        }

    .picture {
        height: 145px
    }

    .strip .grid {
        gap: 24px
    }

    .strip strong {
        font-size: 18px
    }

    .strip .grid > div {
        padding-left: 0
    }

    .about-photo {
        height: 320px
    }

    .split {
        gap: 45px
    }

    .cta .wrap {
        display: block
    }

    .cta .actions {
        margin-top: 25px
    }

    footer .grid {
        gap: 30px
    }

    .brand small {
        letter-spacing: 2px
    }

    .copyright {
        display: block
    }

        .copyright span {
            display: block;
            margin-bottom: 8px
        }

    .detail {
        padding: 28px
    }

    .contact-grid {
        gap: 30px
    }

    form {
        padding: 24px
    }

    .float-chat {
        right: 16px;
        bottom: 16px
    }

    .project .picture {
        height: 220px
    }

    .page-hero {
        padding: 45px 0
    }

    .hero p {
        font-size: 15px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important
    }
}

/* Photographic inner-page banners and shared outline icon system. */
.page-hero{isolation:isolate;overflow:hidden;background:#101b4b}
.page-hero:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(90deg,rgba(7,23,43,.95) 0%,rgba(10,28,49,.82) 45%,rgba(10,28,49,.34) 100%),var(--page-hero-image);background-size:cover;background-position:center,center 48%}
.page-hero .wrap{position:relative}.page-hero p{color:#e0e7ee}.page-hero .breadcrumb{color:#d4deea}
.outline-icon{width:28px;height:28px;flex-shrink:0;display:block}
.approach-icon{display:flex;align-items:center;justify-content:space-between;color:var(--red);margin-bottom:22px}.approach-icon .outline-icon{width:42px;height:42px}
.sector-strip a{display:flex;align-items:center;gap:14px;transition:border-color .2s,background .2s}.sector-strip a>.outline-icon{color:var(--red)}.sector-strip a>span:last-child{margin-left:auto}.sector-strip a:hover{background:#fff7f5;border-color:var(--red)}
.footer-socials{display:flex;align-items:center;gap:12px;margin-top:23px}footer .footer-socials a,.footer-socials .social-pending{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;border:1px solid #ffffff45;border-radius:50%;color:#e0e8ef}.footer-socials .outline-icon{width:19px;height:19px}footer .footer-socials a:hover{color:white;background:var(--red);border-color:var(--red)}.footer-socials .social-pending{opacity:.65;cursor:default}
@media(max-width:700px){.page-hero:before{background-image:linear-gradient(90deg,rgba(7,23,43,.94),rgba(10,28,49,.65)),var(--page-hero-image);background-position:center,65% center}.sector-strip{display:grid;grid-template-columns:1fr;width:100%}.sector-strip a{padding:17px 20px}.approach-icon .outline-icon{width:36px;height:36px}}


/* Apply Inter consistently to all pages and native form controls. */
*, *::before, *::after {
    font-family: 'Inter', sans-serif !important;
}


/* Readable legal pages, matching the shared brand typography. */
.legal-content{max-width:880px}.legal-intro{font-size:18px;line-height:1.8;margin-bottom:35px}.legal-content>section{padding:27px 0;border-top:1px solid var(--line);scroll-margin-top:110px}.legal-content>section h2{font-size:24px;letter-spacing:-.025em;margin-bottom:16px}.legal-content>section p{font-size:15px;line-height:1.85;margin:12px 0}.legal-content p a{color:var(--red);text-decoration:underline;text-underline-offset:3px}.legal-next{background:var(--pale);padding:30px;margin-top:25px}.legal-next p{margin:12px 0 22px}@media(max-width:700px){.legal-intro{font-size:16px}.legal-content>section h2{font-size:22px}.copyright>span:last-child{line-height:2}}

/* Outline icons for the four engineering commitments. */
.strip .strip-item{display:flex;align-items:center;gap:16px;padding-right:16px}
.strip .strip-item>.outline-icon{width:38px;height:38px;color:#fff;flex:0 0 38px}
.strip .strip-copy{min-width:0}.strip .strip-copy span{display:block;margin-top:6px;line-height:1.6}
@media(min-width:1001px) and (max-width:1200px){.strip .strip-item{gap:11px;padding-left:10px}.strip strong{font-size:19px}.strip .strip-item>.outline-icon{width:32px;height:32px;flex-basis:32px}}
@media(max-width:700px){.strip .strip-item{align-items:flex-start;flex-direction:column;gap:13px}.strip .strip-item>.outline-icon{width:32px;height:32px;flex-basis:32px}}

/* Background-only hero slideshow; foreground content stays stationary. */
.hero-slides{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.2s ease-in-out}
.hero-slide.is-active{opacity:1}
.hero:before{z-index:1;background:linear-gradient(90deg,rgba(5,24,41,.93),rgba(5,24,41,.68) 42%,rgba(5,24,41,.12) 78%);pointer-events:none}
.hero .wrap{z-index:2}
@media(max-width:700px){.hero-slide{object-position:65% center}.hero:before{background:linear-gradient(90deg,#071a2be6,#071a2b85)}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* Mobile quick navigation and single-column service cards. */
.mobile-bottom-nav{display:none}
@media(max-width:700px){
 .topbar{display:none}
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 .services-grid{grid-template-columns:minmax(0,1fr);gap:22px}
 .services-grid .service-card{width:100%}
 .services-grid .picture{height:210px}
 .services-grid .card-body{padding:25px}
 .mobile-bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;z-index:40;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 24px #102b3b12;padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px))}
 .mobile-bottom-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:4px 2px 9px;color:#667988;font-size:11px;font-weight:500;line-height:1.4}
 .mobile-bottom-nav .outline-icon{width:27px;height:27px;stroke-width:1.55}
 .mobile-bottom-nav a.active{color:var(--red);font-weight:700}
 .mobile-bottom-nav a.active:after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:3px;background:currentColor;border-radius:3px}
 .mobile-bottom-nav a:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:4px}
 .float-chat{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

/* About: collaborative engineering team. */
.team-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:center}
.team-visual{margin:0;position:relative;overflow:hidden;border-radius:4px;background:var(--navy)}
.team-visual>img{width:100%;height:530px;object-fit:cover;object-position:82% center}
.team-visual figcaption{position:absolute;bottom:0;left:0;right:0;padding:48px 26px 24px;background:linear-gradient(transparent,rgba(7,23,43,.94));color:#fff;font-size:18px;font-weight:600;line-height:1.5}
.team-visual figcaption span{display:block;margin-top:8px;font-size:10px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#c6d2dc}
.team-copy>h3{font-size:30px}.team-copy>p{font-size:14px;margin:20px 0;line-height:1.8}
.team-roles{margin:24px 0 30px}.team-roles article{display:flex;gap:17px;padding:18px 0;border-top:1px solid var(--line)}
.team-role-icon{flex:0 0 42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--red);background:#fff;border:1px solid var(--line);border-radius:8px}
.team-role-icon .outline-icon{width:24px;height:24px}.team-roles h4{font-size:15px;line-height:1.4;margin:0 0 7px}.team-roles p{font-size:13px;line-height:1.7}
@media(max-width:1000px){.team-layout{gap:30px}.team-visual>img{height:570px}}
@media(max-width:700px){.team-layout{grid-template-columns:1fr;gap:30px}.team-visual>img{height:360px}.team-visual figcaption{font-size:16px;padding:45px 20px 20px}.team-copy>h3{font-size:27px}}
/* Light architectural CTA banner with space reserved for the hard-hat image. */
.cta{position:relative;background-color:#eff5f8;background-image:linear-gradient(90deg,#eff5f8 0%,rgba(239,245,248,.95) 42%,rgba(239,245,248,.18) 78%,rgba(239,245,248,0) 100%),url('/assets/cta-engineering-branded.png');background-repeat:no-repeat;background-size:cover,auto 100%;background-position:center,right center}
.cta .wrap{position:relative;padding-right:170px;gap:26px}
.cta .wrap>div:first-child{flex:1;min-width:0}
.cta .actions{flex-shrink:0}
@media(max-width:1200px){.cta .wrap{padding-right:145px;flex-wrap:wrap}.cta .wrap>div:first-child{flex-basis:100%}.cta .actions{margin-top:0}}
@media(max-width:700px){.cta{padding:42px 0 160px;background-size:cover,auto 220px;background-position:center,right bottom;background-image:linear-gradient(180deg,#eff5f8 0%,rgba(239,245,248,.98) 50%,rgba(239,245,248,.15) 100%),url('/assets/cta-engineering-branded.png')}.cta .wrap{padding-right:0}.cta .actions{margin-top:24px}}


/* Client testimonials: sample copy awaits approved client feedback. */
.testimonials-section{background:#f3f6f8;border-top:1px solid var(--line)}
.testimonial-disclosure{font-size:12px;line-height:1.6;margin:-12px 0 28px;color:#65727c}
.testimonial-card{margin:0;background:white;border:1px solid var(--line);border-radius:5px;padding:30px;display:flex;flex-direction:column;box-shadow:0 8px 28px #102b3b04}
.testimonial-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px}.testimonial-top>svg{width:38px;height:38px;color:var(--red)}.testimonial-top>span{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#65727c;border:1px solid var(--line);padding:4px 8px;border-radius:3px}
.testimonial-card h3{font-size:22px;line-height:1.25;letter-spacing:-.025em}
.testimonial-card blockquote{margin:18px 0 26px;flex:1}.testimonial-card blockquote p{font-size:14px;line-height:1.85;color:#566573}
.testimonial-card figcaption{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:22px}.testimonial-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f3f6f8;color:var(--navy)}.testimonial-avatar .outline-icon{width:23px;height:23px}.testimonial-card figcaption strong{display:block;font-size:12px;font-weight:600}.testimonial-card figcaption small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
@media(max-width:1000px) and (min-width:701px){.testimonial-card{padding:22px}.testimonial-card h3{font-size:19px}.testimonial-card figcaption{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){.testimonial-card{padding:27px}.testimonial-disclosure{margin-top:-8px}.testimonial-grid{gap:18px}}