@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Barlow+Condensed:wght@400;500;600;700;800;900&display=swap');

:root {
    --navy: #00194C;
    --ink: #00194C;
    --teal: #00194C;
    --paper: #f3f6f7;
    --line: #dbe3e7
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px
}

body {
    margin: 0;
    color: var(--ink);
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 16px
}

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

button,
input {
    font: inherit
}

button,
a,
input {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

img {
    display: block;
    width: 100%;
    object-fit: cover
}

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

h1,
h2,
h3 {
    font-family: Manrope, Arial, sans-serif
}

p {
    line-height: 1.75;
    color: #627481
}

.wrap {
    max-width: 1280px;
    margin: auto;
    padding: 0 52px
}

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px
}

.eyebrow:before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--teal)
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 17px 25px;
    background: var(--teal);
    color: white;
    border: 1px solid var(--teal);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transition: .2s
}

.btn:hover {
    background: #00194C;
    transform: translateY(-2px)
}

.btn.light {
    background: transparent;
    border-color: #a3b5be
}

.btn.white {
    background: white;
    color: var(--navy);
    border-color: white
}

.topbar {
    background: var(--navy);
    color: #ccdae0;
    font-size: 12px
}

.topbar .wrap {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px
}

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

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

.logo {
    width: 139px;
    height: 64px;
    object-fit: contain
}

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

.navlinks a:hover {
    color: var(--teal)
}

.phone {
    border-left: 1px solid var(--line);
    padding-left: 25px;
    font-weight: 700;
    font-size: 15px
}

.phone small {
    display: block;
    font-size: 11px;
    color: #71838e;
    letter-spacing: 1px;
    margin-bottom: 6px
}

.menu {
    display: none;
    border: 0;
    background: var(--paper);
    padding: 10px;
    font-size: 22px
}

.hero {
    background: var(--navy);
    color: white;
    position: relative;
    min-height: 680px;
    overflow: hidden
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.13fr;
    min-height: 680px
}

.hero-copy {
    padding: 82px 32px 115px 0;
    position: relative;
    z-index: 2
}

.hero h1 {
    font-size: clamp(45px, 5.1vw, 70px);
    line-height: 1.09;
    letter-spacing: -3.5px;
    font-weight: 500
}

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

.hero p {
    color: #b9ccd5;
    max-width: 330px;
    font-size: 15px;
    margin: 25px 0 32px
}

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

.hero-image {
    position: absolute;
    left: 51%;
    right: 0;
    top: 0;
    bottom: 0;
    background: url('assets/architecture.jpg') center/cover
}

.hero-image:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #00194C 0%, transparent 30%), linear-gradient(0deg, #00194C99, transparent 55%)
}

.project-label {
    position: absolute;
    bottom: 115px;
    right: 52px;
    z-index: 3;
    border-left: 2px solid #00194C;
    padding-left: 20px
}

.project-label small {
    font-size: 11px;
    letter-spacing: 2px;
    color: #b2d5de
}

.project-label h3 {
    font-size: 25px;
    margin: 8px 0
}

.project-label span {
    font-size: 14px;
    color: #c6dce3
}

.hero-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #ffffff25;
    padding: 22px 0
}

.hero-bottom .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: 1px
}

.pager {
    display: flex;
    align-items: center;
    gap: 15px
}

.pager i {
    display: block;
    width: 80px;
    height: 2px;
    background: #ffffff55
}

.pager i:before {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background: #00194C
}

.ticker {
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 30px 0;
    gap: 20px;
    font-size: 14px;
    font-weight: 600
}

.ticker span {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center
}

.ticker b {
    font-weight: 400;
    color: var(--teal);
    font-size: 20px
}

.section {
    padding: 100px 0
}

.about {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 95px;
    align-items: center
}

.about-visual {
    position: relative;
    padding: 0 32px 32px 0
}

.about-visual img {
    height: 430px;
    border-radius: 3px;
    object-position: top
}

.experience {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--teal);
    color: white;
    padding: 24px 32px;
    max-width: 205px
}

.experience strong {
    display: block;
    font-size: 64px;
    font-family: Manrope;
    line-height: 1;
    font-weight: 500
}

.experience span {
    display: block;
    font-size: 14px;
    margin-top: 12px;
    line-height: 1.5
}

h2 {
    font-size: clamp(32px, 3.3vw, 46px);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -1.8px
}

h2 em {
    color: var(--teal);
    font-style: normal
}

.about p {
    margin: 24px 0;
    font-size: 15px
}

.about-values {
    display: flex;
    border-top: 1px solid var(--line);
    padding: 24px 0;
    gap: 32px;
    font-size: 13px;
    font-weight: 600
}

.textlink {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--teal);
    padding-bottom: 7px
}

.projects {
    background: var(--paper)
}

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

.section-heading h2 {
    max-width: 640px
}

.project-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 40px)/3);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 18px
}

.project-card {
    scroll-snap-align: start
}

.gallery-controls {
    display: flex;
    gap: 10px;
    margin-top: 18px
}

.gallery-controls button {
    border: 1px solid #b9cbd4;
    background: white;
    padding: 10px 18px;
    border-radius: 3px;
    font-size: 13px;
    color: var(--navy)
}

.project-card {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--navy);
    height: 420px;
    border-radius: 4px
}

.project-card img {
    height: 100%;
    transition: transform .6s
}

.project-card:hover img {
    transform: scale(1.045)
}

.project-card:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #00194Ce8, transparent 65%)
}

.project-card .info {
    position: absolute;
    bottom: 26px;
    left: 26px;
    right: 20px;
    color: white;
    z-index: 1
}

.project-card .info small {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c1d9de
}

.project-card h3 {
    font-size: 23px;
    font-weight: 500;
    margin-top: 9px
}

.project-card .tag {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    background: white;
    color: var(--navy);
    font-size: 11px;
    padding: 8px 12px;
    border-radius: 2px
}

.project-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #cad7de;
    padding: 28px 0 16px;
    font-size: 17px
}

.project-extra span {
    font-size: 13px;
    color: #758590
}

.impact {
    background: var(--navy);
    color: white
}

.impact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 85px;
    align-items: center
}

.impact p {
    color: #b8cbd4;
    margin-top: 22px;
    max-width: 550px
}

.numbers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.numbers strong {
    font-size: 76px;
    font-weight: 400;
    letter-spacing: -4px
}

.numbers strong sup {
    color: #00194C;
    font-size: 34px
}

.numbers span {
    display: block;
    color: #c0d3da;
    font-size: 14px;
    margin-top: 7px
}

.faq-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 85px
}

.faq-intro p {
    margin: 22px 0 30px
}

.faq-intro .call {
    border-top: 1px solid var(--line);
    padding-top: 26px
}

.call small {
    display: block;
    color: #75858e;
    font-size: 13px;
    margin-bottom: 10px
}

.call a {
    font-size: 26px;
    font-weight: 500
}

details {
    border-bottom: 1px solid var(--line)
}

details:first-child {
    border-top: 1px solid var(--line)
}

summary {
    list-style: none;
    cursor: pointer;
    padding: 23px 40px 23px 0;
    font-size: 16px;
    font-weight: 600;
    position: relative
}

summary::-webkit-details-marker {
    display: none
}

summary:after {
    content: '+';
    position: absolute;
    right: 5px;
    top: 18px;
    color: var(--teal);
    font-size: 26px;
    font-weight: 400
}

details[open] summary:after {
    content: '−'
}

details[open] summary {
    color: var(--teal)
}

details p {
    padding: 0 35px 25px 0;
    font-size: 14px
}

.contact {
    padding: 65px 0;
    background: #e8f4f5
}

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

.contact h2 {
    font-size: 48px
}

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

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

label {
    font-size: 13px;
    font-weight: 600
}

input:not([type=checkbox]) {
    width: 100%;
    border: 1px solid #c4d9de;
    background: white;
    padding: 15px;
    border-radius: 3px;
    margin-top: 9px;
    outline: none
}

input:focus {
    border-color: var(--teal)
}

.consent {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    margin: 17px 0
}

.consent a {
    text-decoration: underline
}

.contact .btn {
    width: 100%
}

footer {
    background: var(--navy);
    color: white;
    padding: 64px 0 0
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr .7fr .8fr 1fr;
    gap: 45px
}

.footer-logo {
    background: white;
    width: 145px;
    padding: 9px;
    border-radius: 3px;
    margin-bottom: 22px
}

.footer-grid p {
    color: #b6cbd4;
    font-size: 13px
}

.footer-grid h3 {
    font-size: 15px;
    margin-bottom: 23px;
    font-weight: 600
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 13px;
    font-size: 13px;
    color: #b6cbd4
}

.footer-links a:hover {
    color: white
}

.footer-links a {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.footer-links a::before {
    content: "";
    display: inline-block;
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.newsletter {
    display: flex;
    margin-top: 18px
}

.newsletter input:not([type=checkbox]) {
    margin: 0;
    border: 1px solid #00194C;
    background: transparent;
    color: white;
    min-width: 0;
    border-radius: 3px 0 0 3px
}

.newsletter button {
    border: 0;
    background: var(--teal);
    color: white;
    font-size: 12px;
    padding: 0 15px;
    border-radius: 0 3px 3px 0
}

.copyright {
    margin-top: 50px;
    border-top: 1px solid #ffffff20;
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 11px;
    color: #a3bdc9
}

.copyright a {
    margin-left: 15px
}

.cookie[hidden] {
    display: none
}

.cookie {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 40;
    background: white;
    border: 1px solid var(--line);
    box-shadow: 0 7px 30px #00194C20;
    padding: 18px;
    max-width: 370px;
    border-radius: 5px;
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 12px
}

.cookie button {
    border: 0;
    background: var(--navy);
    color: white;
    padding: 10px 12px;
    border-radius: 3px
}

.cookie a {
    text-decoration: underline
}

.form-status {
    font-size: 13px;
    margin-top: 10px;
    color: var(--navy)
}

:focus-visible {
    outline: 3px solid #00194C;
    outline-offset: 4px
}

@media(min-width:1500px) {
    .hero-image {
        left: 50%
    }
}

@media(max-width:1050px) {
    .wrap {
        padding: 0 30px
    }

    .phone {
        display: none
    }

    .navlinks {
        gap: 22px
    }

    .about {
        gap: 50px
    }

    .project-grid {
        grid-auto-columns: calc((100% - 20px)/2)
    }

    .impact-grid,
    .faq-grid,
    .contact-grid {
        gap: 40px
    }

    .footer-grid {
        gap: 25px
    }

    .hero h1 {
        font-size: 59px
    }
}

@media(max-width:720px) {
    .wrap {
        padding: 0 22px
    }

    .topbar .wrap {
        padding-top: 9px;
        padding-bottom: 9px
    }

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

    .nav {
        height: 78px
    }

    .logo {
        width: 118px;
        height: 55px
    }

    .menu {
        display: block
    }

    .navlinks {
        display: none;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        background: white;
        padding: 25px;
        box-shadow: 0 15px 20px #0001
    }

    .navlinks.open {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    .hero,
    .hero-grid {
        min-height: 820px
    }

    .hero-grid {
        display: block
    }

    .hero-copy {
        padding: 46px 0 0
    }

    .hero h1 {
        font-size: 49px;
        letter-spacing: -2.5px
    }

    .hero p {
        font-size: 14px;
        max-width: 280px
    }

    .hero-image {
        left: 0;
        top: 430px;
        bottom: 60px;
        background-position: center
    }

    .hero-image:after {
        background: linear-gradient(180deg, #00194C, transparent 35%), linear-gradient(0deg, #00194C99, transparent 70%)
    }

    .project-label {
        bottom: 95px;
        left: 22px;
        right: 20px
    }

    .project-label h3 {
        font-size: 23px
    }

    .hero-bottom .wrap {
        font-size: 10px
    }

    .hero-bottom {
        padding: 20px 0
    }

    .ticker {
        grid-template-columns: 1fr 1fr;
        padding: 22px 0;
        gap: 20px 5px
    }

    .ticker span {
        font-size: 12px;
        justify-content: flex-start
    }

    .section {
        padding: 62px 0
    }

    .about,
    .impact-grid,
    .faq-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .about-visual {
        max-width: 440px
    }

    .about-visual img {
        height: 340px
    }

    .experience {
        padding: 20px 24px
    }

    .experience strong {
        font-size: 50px
    }

    .eyebrow {
        font-size: 11px;
        margin-bottom: 18px
    }

    h2 {
        font-size: 34px;
        letter-spacing: -1.4px
    }

    .about-values {
        gap: 18px;
        font-size: 12px
    }

    .section-heading {
        display: block
    }

    .section-heading .textlink {
        margin-top: 24px
    }

    .project-grid {
        grid-auto-columns: 88%
    }

    .project-card,
    .project-card:last-child {
        height: 370px;
        grid-column: auto
    }

    .project-extra {
        font-size: 15px
    }

    .numbers {
        border-top: 1px solid #ffffff20;
        padding-top: 25px
    }

    .numbers strong {
        font-size: 62px
    }

    .faq-grid {
        gap: 32px
    }

    .contact {
        padding: 55px 0
    }

    .contact h2 {
        font-size: 34px
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px 25px
    }

    .footer-grid>div:first-child,
    .footer-grid>div:last-child {
        grid-column: 1/-1
    }

    .copyright {
        flex-direction: column;
        line-height: 1.6
    }

    .copyright a {
        margin: 0 15px 0 0
    }

    .cookie {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: unset
    }

    .form-fields {
        gap: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        transition: none !important
    }
}



:root {
    --navy: #172321;
    --ink: #202a27;
    --teal: #00194C;
    --paper: #edf0ed;
    --line: #d4dbd5
}

body {
    background: #fafbf8
}

h1,
h2,
h3 {
    font-weight: 400
}

.topbar {
    display: none
}

.wrap {
    max-width: 1440px;
    padding-left: 70px;
    padding-right: 70px
}

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: 1px solid #ffffff30;
    color: white
}

.nav {
    height: 110px
}

.logo {
    width: 144px;
    filter: brightness(0) invert(1)
}

.navlinks {
    font-size: 13px;
    font-weight: 500;
    gap: 35px
}

.phone {
    border: 1px solid #ffffff50;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500
}

.phone small {
    color: #ffffffa0;
    font-size: 9px
}

.hero,
.hero-grid {
    min-height: 850px;
    height: 94vh;
    max-height: 1100px
}

.hero-grid {
    grid-template-columns: 1fr;
    position: relative;
    z-index: 2
}

.hero-image {
    left: 0;
    background-image: url('assets/project-0.jpg');
    background-position: center 55%
}

.hero-image:after {
    background: linear-gradient(90deg, #00194Ccb, transparent 85%), linear-gradient(0deg, #00194Cc9, transparent 40%)
}

.hero-copy {
    padding: 230px 0 150px;
    width: 85%
}

.hero .eyebrow {
    font-size: 11px;
    color: #ecf5f2;
    letter-spacing: 3px
}

.hero h1 {
    font-size: clamp(60px, 7.7vw, 70px);
    line-height: .99;
    letter-spacing: -5px;
    font-weight: 400
}

.hero h1 em {
    font-family: Georgia, serif;
    color: white;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -5px
}

.hero p {
    margin: 25px 0;
    max-width: 400px;
    color: #e5ece7;
    line-height: 1.6;
    font-size: 14px
}

.hero .btn {
    background: white;
    color: var(--ink);
    border-color: white;
    border-radius: 0;
    padding: 15px 23px;
    font-size: 12px
}

.hero .btn.light {
    background: transparent;
    color: white;
    border-color: #ffffff70
}

.project-label {
    right: 70px;
    bottom: 138px;
    border-left: 0;
    text-align: right;
    padding: 0
}

.project-label small {
    color: #d9e7e0;
    font-size: 10px
}

.project-label h3 {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 28px
}

.hero-bottom {
    padding: 26px 0;
    background: #00194C40;
    backdrop-filter: blur(12px)
}

.hero-bottom .wrap {
    font-size: 11px
}

.hero .hero-seal {
    position: absolute;
    right: 70px;
    top: 40%;
    z-index: 3;
    border: 1px solid #ffffff80;
    border-radius: 50%;
    width: 118px;
    height: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-13deg);
    font-size: 11px;
    letter-spacing: 2px;
    color: white;
    background: #00194C30;
    backdrop-filter: blur(5px)
}

.hero-seal strong {
    font: italic 35px Georgia;
    letter-spacing: -1px;
    margin: 5px 0
}

.ticker {
    position: relative;
    margin-top: -1px;
    background: #fafbf8;
    padding: 35px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.ticker b {
    font-size: 15px
}

.section {
    padding: 110px 0
}

.eyebrow:before {
    width: 18px
}

.eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 500
}

h2 {
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -2.5px
}

h2 em {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--ink);
    letter-spacing: -2.5px
}

.about {
    grid-template-columns: 1fr 1.06fr;
    gap: 100px;
    align-items: start
}

.about-visual {
    padding: 45px 65px 0 0
}

.about-visual:before {
    content: '20';
    position: absolute;
    top: -35px;
    right: 0;
    font: 170px/1 Manrope, Arial;
    color: #d8e3de;
    z-index: 0;
    letter-spacing: -15px
}

.about-visual img {
    height: 510px;
    position: relative;
    z-index: 1;
    border-radius: 160px 0 0 0
}

.experience {
    z-index: 2;
    right: 0;
    bottom: 35px;
    background: var(--ink);
    padding: 25px 30px
}

.experience strong {
    font: italic 48px Georgia
}

.experience span {
    font-size: 12px
}

.about p {
    font-size: 14px;
    margin: 24px 0;
    line-height: 1.85
}

.about-values {
    font-size: 11px;
    gap: 20px
}

.textlink {
    font-size: 12px;
    font-weight: 500
}

.projects {
    background: #e9eeea
}

.section-heading {
    align-items: end;
    gap: 70px
}

.section-heading h2 {
    max-width: 800px
}

.project-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 45px 60px;
    overflow: visible;
    scroll-snap-type: none;
    padding-top: 15px
}

.project-card {
    background: transparent;
    height: 560px;
    overflow: visible;
    border-radius: 0
}

.project-card:nth-child(even) {
    height: 430px;
    margin-top: 110px
}

.project-card:nth-child(n+5) {
    display: none
}


.project-card img {
    height: calc(100% - 80px);
    border-radius: 2px;
    object-position: center
}

.project-card:hover img {
    transform: scale(1.015)
}

.project-card:after {
    display: none
}

.project-card .info {
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--ink);
    padding: 22px 0 0;
    border-top: 0
}

.project-card .info small {
    color: #71827a;
    font-size: 9px;
    letter-spacing: 1.5px
}

.project-card h3 {
    font-size: 22px;
    margin-top: 7px;
    font-weight: 500
}

.project-card .tag {
    top: 16px;
    left: 16px;
    background: #ffffffed;
    font-size: 9px;
    letter-spacing: 1px;
    padding: 9px 13px;
    text-transform: uppercase
}

.gallery-controls {
    justify-content: center;
    margin-top: 40px
}

.gallery-controls button {
    background: transparent;
    padding: 15px 30px;
    font-size: 12px;
    border: 1px solid #81948a;
    border-radius: 0
}

.project-extra {
    display: none
}

.impact {
    background: #00194C;
    padding: 75px 0;
    position: relative;
    overflow: hidden
}

.impact:before {
    content: 'DİSA';
    position: absolute;
    bottom: -38px;
    left: -15px;
    font: 200px/1 Manrope;
    letter-spacing: -15px;
    color: #ffffff09;
    pointer-events: none
}

.impact .eyebrow:before {
    background: white
}

.impact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 85px
}

.impact h2 {
    font-size: 40px
}

.impact p {
    font-size: 13px;
    color: #d8e9e5;
    line-height: 1.8
}

.numbers {
    gap: 40px;
    border-left: 1px solid #ffffff45;
    padding-left: 55px
}

.numbers strong {
    font: 82px/1 Manrope;
    font-weight: 400;
    letter-spacing: -5px
}

.numbers strong sup {
    color: #def1e7;
    font-family: Georgia;
    font-style: italic
}

.numbers span {
    color: #d8e9e5;
    font-size: 12px
}

.faq-grid {
    grid-template-columns: .85fr 1.15fr;
    gap: 100px
}

.faq-intro p {
    font-size: 14px
}

.faq-intro .call {
    margin-top: 45px
}

.call a {
    font-family: Georgia;
    font-size: 30px
}

.faq-grid details {
    border-color: #ccd6ce
}

.faq-grid summary {
    font-size: 14px;
    font-weight: 500;
    padding: 28px 40px 28px 0
}

.faq-grid details p {
    font-size: 13px;
    line-height: 1.9
}

.contact {
    background: #202d29;
    color: white;
    padding: 90px 0;
    position: relative
}

.contact .eyebrow {
    color: #b9d4c9
}

.contact h2 {
    font-size: 48px
}

.contact h2 em {
    color: #c7ded4
}

.contact p {
    color: #b1c3b9
}

.contact form {
    background: #ffffff07;
    padding: 32px;
    border: 1px solid #ffffff25
}

.contact input:not([type=checkbox]) {
    border: 0;
    border-bottom: 1px solid #6e8178;
    background: transparent;
    color: white;
    padding: 16px 0;
    border-radius: 0;
    font-size: 14px
}

.contact input::placeholder {
    color: #a5b9ad
}

.contact .consent {
    color: #bbc9c1
}

.contact .btn {
    border-radius: 0;
    background: #e1ece5;
    color: #00194C;
    border-color: #e1ece5
}

.contact .form-status {
    color: #ccdcd3
}

.contact h3 {
    font-weight: 400
}

.contact-grid {
    gap: 100px
}

footer {
    background: #15201c;
    padding-top: 70px
}

.footer-grid {
    gap: 50px
}

.footer-logo {
    background: transparent;
    padding: 0;
    filter: brightness(0) invert(1);
    border-radius: 0
}

.footer-grid p,
.footer-links {
    color: #a6b9af;
    font-size: 12px
}

.footer-grid h3 {
    font-size: 12px;
    font-weight: 500
}

.newsletter input:not([type=checkbox]) {
    border-color: #52655a;
    border-radius: 0;
    font-size: 12px
}

.newsletter button {
    border-radius: 0;
    background: #507166
}

.copyright {
    color: #879d90
}

.cookie {
    border-radius: 0;
    font-size: 11px
}

.cookie button {
    border-radius: 0
}

.services-section {
    padding: 0 0 100px
}

.services-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 35px
}

.services-head p {
    max-width: 300px;
    font-size: 13px
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.service-tile {
    height: 270px;
    position: relative;
    overflow: hidden;
    background: #00194C;
    border-radius: 3px
}

.service-tile img {
    height: 100%;
    opacity: .75;
    transition: transform .5s
}

.service-tile:hover img {
    transform: scale(1.06)
}

.service-tile:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #00194Cf0, transparent)
}

.service-tile div {
    position: absolute;
    bottom: 25px;
    left: 22px;
    right: 15px;
    color: white;
    z-index: 1
}

.service-tile small {
    font-size: 10px;
    color: #cbd9ce;
    display: block;
    margin-bottom: 10px
}

.service-tile h3 {
    font-size: 17px;
    font-weight: 400
}

.float-contact {
    position: fixed;
    right: 0;
    top: 48%;
    z-index: 30;
    writing-mode: vertical-rl;
    background: #00194C;
    color: white;
    padding: 18px 13px;
    font-size: 11px;
    letter-spacing: 2px
}

@media(min-width:1600px) {
    .hero-copy {
        padding-top: 260px
    }

    .hero-image {
        left: 0
    }
}

@media(max-width:1050px) {
    .wrap {
        padding-left: 35px;
        padding-right: 35px
    }

    .hero-copy {
        width: 95%;
        padding-top: 200px
    }

    .hero h1 {
        font-size: 84px
    }

    .hero .hero-seal {
        right: 35px;
        width: 95px;
        height: 95px;
        top: 55%
    }

    .project-label {
        right: 35px
    }

    .navlinks {
        gap: 20px
    }

    .about {
        gap: 50px
    }

    .about-visual {
        padding-right: 40px
    }

    .project-grid {
        gap: 35px
    }

    .project-card {
        height: 480px
    }

    .project-card:nth-child(even) {
        height: 380px;
        margin-top: 80px
    }

    .faq-grid,
    .contact-grid {
        gap: 45px
    }

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

    .numbers {
        padding-left: 35px;
        gap: 20px
    }

    .numbers strong {
        font-size: 65px
    }

    .impact-grid {
        gap: 35px
    }

    .footer-grid {
        gap: 25px
    }
}

@media(max-width:720px) {
    .wrap {
        padding-left: 24px;
        padding-right: 24px
    }

    .nav {
        height: 85px
    }

    .logo {
        width: 120px
    }

    .menu {
        background: #ffffff18;
        color: white;
        border: 1px solid #ffffff50;
        padding: 8px 12px
    }

    .navlinks {
        top: 85px;
        color: var(--ink);
        background: #fafbf8
    }

    .hero,
    .hero-grid {
        height: 830px;
        min-height: 830px;
        max-height: none
    }

    .hero-copy {
        padding-top: 180px;
        width: 100%
    }

    .hero h1 {
        font-size: 61px;
        line-height: 1.02;
        letter-spacing: -3px
    }

    .hero h1 em {
        letter-spacing: -3px
    }

    .hero p {
        font-size: 13px;
        max-width: 280px;
        margin-top: 23px
    }

    .hero .eyebrow {
        font-size: 9px;
        letter-spacing: 1.3px
    }

    .hero-image {
        top: 0;
        bottom: 0;
        left: 0;
        background-position: 58% center
    }

    .hero-image:after {
        background: linear-gradient(90deg, #00194Cd9, #00194C55), linear-gradient(0deg, #00194Cbf, transparent)
    }

    .hero .hero-seal {
        top: auto;
        bottom: 165px;
        right: 25px;
        width: 90px;
        height: 90px;
        font-size: 9px
    }

    .hero-seal strong {
        font-size: 29px
    }

    .project-label {
        left: 24px;
        bottom: 115px;
        right: auto;
        text-align: left
    }

    .project-label h3 {
        font-size: 23px
    }

    .project-label small {
        font-size: 9px
    }

    .project-label span {
        font-size: 12px
    }

    .hero-bottom .wrap {
        font-size: 8px;
        letter-spacing: .7px
    }

    .hero .actions {
        gap: 9px
    }

    .hero .btn {
        font-size: 11px;
        padding: 14px 17px
    }

    .ticker {
        gap: 22px 10px;
        padding: 30px 0
    }

    .ticker span {
        font-size: 9px;
        letter-spacing: .5px
    }

    .section {
        padding: 70px 0
    }

    .about {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .about-visual {
        padding: 20px 40px 0 0;
        max-width: unset
    }

    .about-visual img {
        height: 390px;
        border-radius: 110px 0 0 0
    }

    .about-visual:before {
        font-size: 135px;
        top: -35px;
        letter-spacing: -12px
    }

    .experience {
        bottom: 30px;
        max-width: 175px;
        padding: 20px
    }

    .experience strong {
        font-size: 40px
    }

    .experience span {
        font-size: 11px
    }

    h2 {
        font-size: 40px;
        letter-spacing: -2px
    }

    h2 em {
        letter-spacing: -2px
    }

    .about p {
        font-size: 13px
    }

    .about-values {
        font-size: 10px;
        gap: 15px
    }

    .services-section {
        padding-bottom: 65px
    }

    .services-head {
        display: block
    }

    .services-head p {
        margin-top: 20px
    }

    .services-grid {
        gap: 10px
    }

    .service-tile {
        height: 235px
    }

    .service-tile div {
        left: 15px;
        bottom: 20px
    }

    .service-tile h3 {
        font-size: 14px
    }

    .service-tile small {
        font-size: 9px
    }

    .section-heading {
        margin-bottom: 35px
    }

    .section-heading h2 {
        font-size: 38px
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-top: 0
    }

    .project-card,
    .project-card:nth-child(even) {
        height: 440px;
        margin-top: 0
    }

    .project-card img {
        height: calc(100% - 75px)
    }

    .project-card h3 {
        font-size: 20px
    }

    .project-card .info {
        padding-top: 17px
    }

    .gallery-controls {
        margin-top: 30px
    }

    .impact-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .impact h2 {
        font-size: 35px
    }

    .impact {
        padding: 60px 0
    }

    .numbers {
        border-left: 0;
        border-top: 1px solid #ffffff45;
        padding: 30px 0 0
    }

    .numbers strong {
        font-size: 74px
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .faq-intro .call {
        margin-top: 25px
    }

    .faq-grid summary {
        font-size: 14px;
        padding: 25px 35px 25px 0
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .contact h2 {
        font-size: 39px
    }

    .contact {
        padding: 65px 0
    }

    .contact form {
        padding: 23px
    }

    .form-fields {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .contact input:not([type=checkbox]) {
        padding: 10px 0
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px
    }

    .copyright {
        font-size: 10px
    }

    .float-contact {
        display: none
    }
}



:root {
    --navy: #00194C;
    --ink: #00194C;
    --teal: #00194C;
    --paper: #edf1f2;
    --line: #c9d5d8
}

body {
    font-family: 'Space Grotesk', Arial, sans-serif;
    background: #fff
}

h1,
h2,
h3,
.numbers strong,
.experience strong {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -.02em
}

h1 em,
h2 em {
    font-family: inherit;
    font-style: normal;
    letter-spacing: inherit;
    color: var(--teal)
}

h2 {
    font-size: 48px;
    line-height: .96;
    font-weight: 700
}

h3 {
    font-weight: 600
}

.wrap {
    max-width: 1500px;
    padding-left: 65px;
    padding-right: 65px
}

header {
    left: 25px;
    right: 25px;
    top: 22px;
    background: white;
    color: var(--ink);
    border: 0;
    border-radius: 0
}

.nav {
    height: 85px;
    padding: 0 35px;
    max-width: none
}

.logo {
    filter: none;
    width: 125px
}

.navlinks {
    font-size: 13px;
    gap: 35px
}

.phone {
    border: 0;
    border-left: 1px solid #b9cdd2;
    padding: 0 0 0 25px;
    font-family: 'Space Grotesk';
    font-size: 13px
}

.phone small {
    color: #70888e;
    font-size: 9px
}

.hero,
.hero-grid {
    height: 900px;
    min-height: 900px;
    max-height: none;
    background: #e9eef0
}

.hero-grid {
    z-index: 2
}

.hero-copy {
    padding-top: 160px;
    width: 75%;
    padding-bottom: 120px
}

.hero .eyebrow {
    color: var(--ink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px
}

.hero h1 {
    font-size: clamp(100px, 11.5vw, 70px);
    font-weight: 800;
    color: var(--ink);
    line-height: .8;
    letter-spacing: -.025em
}

.hero h1 em {
    color: #00194C;
    text-shadow: 2px 2px white
}

.hero p {
    color: #00194C;
    font-size: 13px;
    line-height: 1.8;
    max-width: 340px;
    margin-top: 27px
}

.hero-image {
    left: 37%;
    top: 132px;
    bottom: 65px;
    right: 0;
    background-position: center;
    background-image: url('assets/project-0.jpg')
}

.hero-image:after {
    background: linear-gradient(90deg, #e9eef0 0%, #e9eef070 12%, transparent 35%), linear-gradient(0deg, #00194Ca0, transparent 35%)
}

.hero .btn {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
    font-size: 12px;
    padding: 15px 22px
}

.hero .btn.light {
    background: #ffffffc9;
    color: var(--ink);
    border-color: #a2b5be
}

.hero-bottom {
    padding: 23px 0;
    background: var(--ink);
    border: 0;
    color: white;
    backdrop-filter: none
}

.hero-bottom .wrap {
    font-size: 10px
}

.hero .hero-seal {
    border: 0;
    border-radius: 0;
    background: #00194C;
    color: white;
    backdrop-filter: none;
    transform: rotate(0deg);
    top: auto;
    bottom: 123px;
    right: 65px;
    width: 110px;
    height: 110px;
    letter-spacing: 1px
}

.hero-seal strong {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0
}

.project-label {
    right: 210px;
    bottom: 147px;
    color: white
}

.project-label h3 {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-size: 35px;
    line-height: 1
}

.project-label small {
    font-size: 9px
}

.project-label span {
    font-size: 12px
}

.ticker {
    background: white;
    padding: 28px 0;
    text-transform: none;
    font-size: 12px;
    letter-spacing: 0
}

.ticker b {
    font-size: 20px
}

.section {
    padding: 95px 0
}

.eyebrow {
    font-family: 'Space Grotesk';
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px
}

.about {
    grid-template-columns: 1.15fr 1fr;
    gap: 95px;
    align-items: center
}

.about-visual {
    padding: 0 40px 65px 0
}

.about-visual:before {
    content: 'DİSA';
    top: auto;
    bottom: -25px;
    left: 0;
    right: auto;
    font: 800 140px/.8 'Barlow Condensed';
    color: #e4edef;
    letter-spacing: -4px
}

.about-visual img {
    height: 450px;
    border-radius: 0;
    object-position: center
}

.experience {
    bottom: 35px;
    right: 0;
    background: var(--teal);
    padding: 25px;
    width: 170px
}

.experience strong {
    font-size: 75px;
    line-height: .8;
    font-weight: 700
}

.experience span {
    font-size: 11px
}

.about p {
    font-size: 14px
}

.about-values {
    font-size: 11px;
    padding-top: 20px;
    gap: 22px
}

.textlink {
    font-size: 12px;
    font-weight: 600
}

.services-section {
    padding: 10px 0 95px
}

.services-head h2 {
    font-size: 48px
}

.services-head p {
    font-size: 14px;
    max-width: 330px
}

.services-grid {
    gap: 0;
    border-top: 1px solid #b9c9cf
}

.service-tile {
    height: 310px;
    border-radius: 0;
    border-right: 2px solid white
}

.service-tile img {
    opacity: .9
}

.service-tile div {
    left: 25px;
    bottom: 30px
}

.service-tile h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1
}

.service-tile small {
    font-size: 10px
}

.projects {
    background: #00194C;
    color: white
}

.projects .eyebrow {
    color: #82cbd3
}

.projects h2 em {
    color: #00194C
}

.projects .textlink {
    color: white
}

.section-heading h2 {
    max-width: 820px
}

.project-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    align-items: start
}

.project-card {
    height: 405px;
    background: transparent
}

.project-card:nth-child(even) {
    height: 405px;
    margin-top: 0
}

.project-card:first-child {
    grid-column: 1/-1;
    height: 680px;
    margin-bottom: 15px
}

.project-card:first-child img {
    height: 100%;
    max-height: 590px;
    object-position: 50% 65%
}

.project-card img {
    border-radius: 0;
    height: calc(100% - 75px)
}

.project-card .info {
    color: white;
    padding: 20px 0 0;
    bottom: 0
}

.project-card h3 {
    font-size: 25px;
    line-height: 1
}

.project-card:first-child h3 {
    font-size: 25px
}

.project-card .info small {
    color: #99b9c3;
    font-size: 9px
}

.project-card .tag {
    background: #00194C;
    color: white;
    border-radius: 0;
    font-size: 9px
}

.gallery-controls button {
    color: white;
    border-color: #577780;
    background: transparent;
    font-size: 12px
}

.impact {
    background: #00194C;
    padding: 65px 0
}

.impact:before {
    display: none
}

.impact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px
}

.impact h2 {
    font-size: 48px;
    line-height: .95
}

.impact p {
    color: #e4f6f9;
    font-size: 13px
}

.numbers strong {
    font-family: 'Barlow Condensed';
    font-size: 110px;
    font-weight: 600;
    letter-spacing: -3px
}

.numbers strong sup {
    font-family: inherit;
    font-style: normal;
    font-size: 45px
}

.numbers span {
    font-size: 12px;
    color: white
}

.faq-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 90px
}

.faq-grid h2 {
    font-size: 48px
}

.faq-grid summary {
    font-size: 15px;
    font-weight: 500
}

.faq-grid details p {
    font-size: 14px
}

.faq-intro p {
    font-size: 14px
}

.call a {
    font-family: 'Barlow Condensed';
    font-size: 42px;
    font-weight: 600
}

.contact {
    background: #e9eff0;
    color: var(--ink);
    padding: 90px 0
}

.contact h2 {
    font-size: 62px
}

.contact h2 em {
    color: var(--teal)
}

.contact .eyebrow {
    color: #527780
}

.contact p {
    color: #607983
}

.contact form {
    background: white;
    border: 0;
    padding: 35px
}

.contact h3 {
    font-family: 'Space Grotesk';
    font-size: 17px !important;
    font-weight: 500
}

.contact label {
    font-size: 12px
}

.contact input:not([type=checkbox]) {
    color: var(--ink);
    border-color: #bacbd2
}

.contact input::placeholder {
    color: #7a9099
}

.contact .consent {
    color: #52717a
}

.contact .btn {
    background: var(--ink);
    color: white;
    border-color: var(--ink)
}

.contact .form-status {
    color: #52717a
}

footer {
    background: #00194C
}

.footer-logo {
    filter: brightness(0) invert(1)
}

.footer-grid h3 {
    font-family: 'Space Grotesk';
    font-size: 13px
}

.newsletter button {
    background: var(--teal)
}

.float-contact {
    background: #00194C;
    color: white
}

.copyright {
    color: #a3bbc4
}

.footer-grid p,
.footer-links {
    color: #afc4cb;
    font-size: 12px
}

@media(min-width:1600px) {
    .hero-copy {
        padding-top: 175px
    }

    .hero-image {
        left: 37%
    }
}

@media(max-width:1050px) {
    .wrap {
        padding-left: 35px;
        padding-right: 35px
    }

    .nav {
        padding: 0 25px
    }

    .navlinks {
        gap: 22px
    }

    .hero,
    .hero-grid {
        height: 850px;
        min-height: 850px
    }

    .hero h1 {
        font-size: 130px
    }

    .hero-copy {
        width: 90%;
        padding-top: 180px
    }

    .hero-image {
        left: 35%
    }

    .hero .hero-seal {
        right: 35px
    }

    .project-label {
        right: 170px
    }

    .about {
        gap: 45px
    }

    .about-visual img {
        height: 420px
    }

    h2 {
        font-size: 55px
    }

    .project-card:first-child {
        height: 590px
    }

    .project-card:first-child img {
        max-height: 500px
    }

    .project-card,
    .project-card:nth-child(even) {
        height: 360px
    }

    .project-card h3 {
        font-size: 25px
    }

    .impact h2 {
        font-size: 40px
    }

    .numbers strong {
        font-size: 90px
    }

    .contact-grid {
        gap: 45px
    }

    .contact h2 {
        font-size: 52px
    }
}

@media(max-width:720px) {
    .wrap {
        padding-left: 24px;
        padding-right: 24px
    }

    header {
        left: 12px;
        right: 12px;
        top: 12px
    }

    .nav {
        height: 72px;
        padding: 0 18px
    }

    .logo {
        width: 105px
    }

    .menu {
        background: transparent;
        border: 1px solid #bdd0d6;
        color: var(--ink);
        padding: 6px 11px
    }

    .navlinks {
        top: 72px;
        left: 0;
        right: 0;
        background: white
    }

    .hero,
    .hero-grid {
        height: 840px;
        min-height: 840px
    }

    .hero-copy {
        padding-top: 132px;
        width: 100%
    }

    .hero .eyebrow {
        font-size: 8px;
        letter-spacing: 1.2px
    }

    .hero h1 {
        font-size: 94px;
        line-height: .82;
        letter-spacing: -2px
    }

    .hero h1 em {
        letter-spacing: -2px
    }

    .hero p {
        font-size: 12px;
        line-height: 1.6;
        max-width: 280px;
        color: #00194C;
        margin-top: 20px
    }

    .hero .btn {
        font-size: 10px;
        padding: 13px 15px
    }

    .hero-image {
        top: 440px;
        bottom: 62px;
        left: 24px;
        right: 0;
        background-position: center
    }

    .hero-image:after {
        background: linear-gradient(0deg, #00194Cba, transparent 70%)
    }

    .hero .hero-seal {
        right: 22px;
        bottom: 105px;
        width: 85px;
        height: 85px;
        font-size: 8px
    }

    .hero-seal strong {
        font-size: 33px
    }

    .project-label {
        left: 40px;
        right: 115px;
        bottom: 123px
    }

    .project-label h3 {
        font-size: 25px
    }

    .project-label small {
        font-size: 8px
    }

    .project-label span {
        font-size: 10px
    }

    .hero-bottom {
        padding: 23px 0
    }

    .hero-bottom .wrap {
        font-size: 8px;
        letter-spacing: .3px
    }

    .ticker {
        padding: 25px 0;
        gap: 20px 10px
    }

    .ticker span {
        font-size: 10px
    }

    .section {
        padding: 65px 0
    }

    h2 {
        font-size: 49px;
        line-height: .98;
        letter-spacing: -1px
    }

    h2 em {
        letter-spacing: -1px
    }

    .about {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .about-visual {
        padding: 0 35px 55px 0
    }

    .about-visual img {
        height: 320px;
        border-radius: 0
    }

    .about-visual:before {
        font-size: 115px;
        bottom: -16px;
        letter-spacing: -2px
    }

    .experience {
        padding: 20px;
        width: 135px;
        bottom: 25px
    }

    .experience strong {
        font-size: 61px
    }

    .experience span {
        font-size: 10px
    }

    .about p {
        font-size: 13px
    }

    .about-values {
        font-size: 10px;
        gap: 12px
    }

    .services-section {
        padding-bottom: 65px
    }

    .services-head h2 {
        font-size: 43px
    }

    .services-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3px
    }

    .service-tile {
        height: 230px;
        border: 0
    }

    .service-tile div {
        left: 15px;
        bottom: 23px
    }

    .service-tile h3 {
        font-size: 25px
    }

    .service-tile small {
        font-size: 8px
    }

    .section-heading h2 {
        font-size: 46px
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .project-card:first-child {
        grid-column: auto;
        height: 440px;
        margin: 0
    }

    .project-card:first-child img {
        height: calc(100% - 75px);
        max-height: none
    }

    .project-card,
    .project-card:nth-child(even) {
        height: 410px;
        margin: 0
    }

    .project-card:first-child h3,
    .project-card h3 {
        font-size: 31px
    }

    .impact-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .impact h2 {
        font-size: 43px
    }

    .impact p {
        font-size: 13px
    }

    .numbers strong {
        font-size: 100px
    }

    .numbers span {
        font-size: 11px
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .faq-grid h2 {
        font-size: 67px
    }

    .faq-grid summary {
        font-size: 14px
    }

    .faq-grid details p {
        font-size: 13px
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .contact h2 {
        font-size: 48px
    }

    .contact form {
        padding: 25px
    }

    .contact {
        padding: 65px 0
    }

    .footer-grid {
        gap: 35px
    }

    .copyright {
        font-size: 10px
    }
}


.hero h1 {
    font-family: Manrope, Arial, sans-serif
}

.hero h3 {
    font-family: Manrope, Arial, sans-serif
}

.hero {
    background: var(--navy);
    color: white;
    position: relative;
    min-height: 680px;
    overflow: hidden
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.13fr;
    min-height: 680px
}

.hero-copy {
    padding: 82px 32px 115px 0;
    position: relative;
    z-index: 2
}

.hero h1 {
    font-size: clamp(45px, 5.1vw, 70px);
    line-height: 1.09;
    letter-spacing: -3.5px;
    font-weight: 500
}

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

.hero p {
    color: #b9ccd5;
    max-width: 330px;
    font-size: 15px;
    margin: 25px 0 32px
}

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

.hero-image {
    position: absolute;
    left: 51%;
    right: 0;
    top: 0;
    bottom: 0;
    background: url('assets/architecture.jpg') center/cover
}

.hero-image:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #00194C 0%, transparent 30%), linear-gradient(0deg, #00194C99, transparent 55%)
}

.project-label {
    position: absolute;
    bottom: 115px;
    right: 52px;
    z-index: 3;
    border-left: 2px solid #00194C;
    padding-left: 20px
}

.project-label small {
    font-size: 11px;
    letter-spacing: 2px;
    color: #b2d5de
}

.project-label h3 {
    font-size: 25px;
    margin: 8px 0
}

.project-label span {
    font-size: 14px;
    color: #c6dce3
}

.hero-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #ffffff25;
    padding: 22px 0
}

.hero-bottom .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: 1px
}

.pager {
    display: flex;
    align-items: center;
    gap: 15px
}

.pager i {
    display: block;
    width: 80px;
    height: 2px;
    background: #ffffff55
}

.pager i:before {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background: #00194C
}

@media(min-width:1500px) {
    .hero-image {
        left: 50%
    }
}

@media(max-width:1050px) {
    .hero h1 {
        font-size: 59px
    }
}

@media(max-width:720px) {

    .hero,
    .hero-grid {
        min-height: 820px
    }

    .hero-grid {
        display: block
    }

    .hero-copy {
        padding: 46px 0 0
    }

    .hero h1 {
        font-size: 49px;
        letter-spacing: -2.5px
    }

    .hero p {
        font-size: 14px;
        max-width: 280px
    }

    .hero-image {
        left: 0;
        top: 430px;
        bottom: 60px;
        background-position: center
    }

    .hero-image:after {
        background: linear-gradient(180deg, #00194C, transparent 35%), linear-gradient(0deg, #00194C99, transparent 70%)
    }

    .project-label {
        bottom: 95px;
        left: 22px;
        right: 20px
    }

    .project-label h3 {
        font-size: 23px
    }

    .hero-bottom .wrap {
        font-size: 10px
    }

    .hero-bottom {
        padding: 20px 0
    }
}

.hero,
.hero-grid {
    min-height: 850px;
    height: 94vh;
    max-height: 1100px
}

.hero-grid {
    grid-template-columns: 1fr;
    position: relative;
    z-index: 2
}

.hero-image {
    left: 0;
    background-image: url('assets/project-0.jpg');
    background-position: center 55%
}

.hero-image:after {
    background: linear-gradient(90deg, #00194Ccb, transparent 85%), linear-gradient(0deg, #00194Cc9, transparent 40%)
}

.hero-copy {
    padding: 230px 0 150px;
    width: 85%
}

.hero .eyebrow {
    font-size: 11px;
    color: #ecf5f2;
    letter-spacing: 3px
}

.hero h1 {
    font-size: clamp(60px, 7.7vw, 112px);
    line-height: .99;
    letter-spacing: -5px;
    font-weight: 400
}

.hero h1 em {
    font-family: Georgia, serif;
    color: white;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -5px
}

.hero p {
    margin: 25px 0;
    max-width: 400px;
    color: #e5ece7;
    line-height: 1.6;
    font-size: 14px
}

.hero .btn {
    background: white;
    color: var(--ink);
    border-color: white;
    border-radius: 0;
    padding: 15px 23px;
    font-size: 12px
}

.hero .btn.light {
    background: transparent;
    color: white;
    border-color: #ffffff70
}

.project-label {
    right: 70px;
    bottom: 138px;
    border-left: 0;
    text-align: right;
    padding: 0
}

.project-label small {
    color: #d9e7e0;
    font-size: 10px
}

.project-label h3 {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 28px
}

.hero-bottom {
    padding: 26px 0;
    background: #00194C40;
    backdrop-filter: blur(12px)
}

.hero-bottom .wrap {
    font-size: 11px
}

.hero .hero-seal {
    position: absolute;
    right: 70px;
    top: 40%;
    z-index: 3;
    border: 1px solid #ffffff80;
    border-radius: 50%;
    width: 118px;
    height: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-13deg);
    font-size: 11px;
    letter-spacing: 2px;
    color: white;
    background: #00194C30;
    backdrop-filter: blur(5px)
}

.hero-seal strong {
    font: italic 35px Georgia;
    letter-spacing: -1px;
    margin: 5px 0
}

@media(min-width:1600px) {
    .hero-copy {
        padding-top: 260px
    }

    .hero-image {
        left: 0
    }
}

@media(max-width:1050px) {
    .hero-copy {
        width: 95%;
        padding-top: 200px
    }

    .hero h1 {
        font-size: 84px
    }

    .hero .hero-seal {
        right: 35px;
        width: 95px;
        height: 95px;
        top: 55%
    }

    .project-label {
        right: 35px
    }
}

@media(max-width:720px) {

    .hero,
    .hero-grid {
        height: 830px;
        min-height: 830px;
        max-height: none
    }

    .hero-copy {
        padding-top: 180px;
        width: 100%
    }

    .hero h1 {
        font-size: 61px;
        line-height: 1.02;
        letter-spacing: -3px
    }

    .hero h1 em {
        letter-spacing: -3px
    }

    .hero p {
        font-size: 13px;
        max-width: 280px;
        margin-top: 23px
    }

    .hero .eyebrow {
        font-size: 9px;
        letter-spacing: 1.3px
    }

    .hero-image {
        top: 0;
        bottom: 0;
        left: 0;
        background-position: 58% center
    }

    .hero-image:after {
        background: linear-gradient(90deg, #00194Cd9, #00194C55), linear-gradient(0deg, #00194Cbf, transparent)
    }

    .hero .hero-seal {
        top: auto;
        bottom: 165px;
        right: 25px;
        width: 90px;
        height: 90px;
        font-size: 9px
    }

    .hero-seal strong {
        font-size: 29px
    }

    .project-label {
        left: 24px;
        bottom: 115px;
        right: auto;
        text-align: left
    }

    .project-label h3 {
        font-size: 23px
    }

    .project-label small {
        font-size: 9px
    }

    .project-label span {
        font-size: 12px
    }

    .hero-bottom .wrap {
        font-size: 8px;
        letter-spacing: .7px
    }

    .hero .actions {
        gap: 9px
    }

    .hero .btn {
        font-size: 11px;
        padding: 14px 17px
    }
}

.hero h1 {
    color: white;
    text-transform: none;
    text-shadow: none
}

.hero h1 em {
    text-shadow: none
}

.hero .hero-seal {
    border: 1px solid #ffffff80;
    background: #00194C30;
    border-radius: 50%;
    backdrop-filter: blur(5px);
    transform: rotate(-13deg);
    top: 40%;
    bottom: auto;
    width: 118px;
    height: 118px
}

.project-label {
    color: white
}

.hero h1 em {
    font-family: Georgia, serif;
    font-style: italic
}

.hero-seal strong {
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 400
}

.hero .hero-image {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

@media(max-width:1050px) {
    .hero .hero-seal {
        top: 55%;
        width: 95px;
        height: 95px
    }
}

@media(max-width:720px) {
    .hero .hero-seal {
        top: auto;
        bottom: 165px;
        width: 90px;
        height: 90px
    }

    .project-label {
        right: 20px
    }
}


.hero {
    background: #172321;
    isolation: isolate
}

.hero .hero-grid {
    background: transparent !important;
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit
}

.hero .hero-image {
    position: absolute;
    inset: 0;
    background: url('assets/project-0.jpg') center 55%/cover no-repeat;
    z-index: 0
}

.hero .hero-image:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 25, 22, .78), rgba(8, 25, 22, .22) 70%), linear-gradient(0deg, rgba(8, 25, 22, .65), transparent 45%)
}

.hero .hero-copy {
    background: transparent;
    width: min(85%, 1050px);
    position: relative;
    z-index: 2
}

.hero h1 {
    color: #fff !important;
    line-height: 1.04;
    font-weight: 400
}

.hero h1 em {
    color: #fff !important;
    font-weight: 400
}

.hero p {
    color: #e3ece7 !important
}

.hero .eyebrow {
    color: #ecf5f2 !important
}

.hero .project-label {
    z-index: 3
}

.hero .hero-seal {
    z-index: 3
}

.hero .hero-bottom {
    z-index: 3;
    background: rgb(3 137 166)
}

@media(max-width:720px) {
    .hero .hero-copy {
        width: 100%;
        padding-top: 150px
    }

    .hero h1 {
        font-size: 58px;
        letter-spacing: -2.5px
    }

    .hero h1 em {
        letter-spacing: -2.5px
    }

    .hero .hero-image {
        background-position: 58% center
    }

    .hero .hero-image:after {
        background: linear-gradient(90deg, rgba(8, 25, 22, .83), rgba(8, 25, 22, .42)), linear-gradient(0deg, rgba(8, 25, 22, .65), transparent 50%)
    }
}


.hero h1,
.hero h1 em {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important
}

.hero h1 {
    font-size: clamp(56px, 6.6vw, 65px) !important;
    line-height: 1.02 !important
}

.hero .project-label h3 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-style: normal !important;
    font-size: 29px;
    font-weight: 600
}

.hero .hero-seal strong {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 600
}

.hero p {
    font-family: 'Poppins', Arial, sans-serif
}

@media(max-width:1050px) {
    .hero h1 {
        font-size: 74px !important
    }
}

@media(max-width:720px) {
    .hero h1 {
        font-size: 51px !important;
        line-height: 1.03 !important
    }

    .hero .project-label h3 {
        font-size: 23px
    }
}

/* Dynamic admin content */
.disa-slide {
    position: absolute;
    inset: 0;
    display: none
}

.disa-slide.is-active {
    display: block
}

.hero .disa-slide .hero-image {
    background-size: cover;
    background-repeat: no-repeat
}

.pager button {
    background: transparent;
    border: 1px solid #ffffff60;
    color: white;
    padding: 4px 10px
}

.empty-projects {
    color: #c8dce3;
    grid-column: 1/-1
}

.numbers {
    flex-wrap: wrap;
    gap: 25px
}

.service-tile {
    min-width: 0
}

.contact button:disabled,
.newsletter button:disabled {
    opacity: .6;
    cursor: wait
}

.disa-page {
    padding-top: 145px;
    min-height: 70vh
}

.disa-content h1 {
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1.1;
    margin-bottom: 32px
}

.disa-content h2 {
    font-size: 38px;
    margin: 35px 0 20px
}

.disa-detail-image {
    max-height: 650px;
    object-fit: cover;
    margin: 25px 0
}

.disa-rich-text {
    line-height: 1.8;
    margin: 25px 0
}

.disa-rich-text p {
    margin-bottom: 18px
}

.disa-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 30px 0
}

.disa-card img {
    height: 260px;
    object-fit: cover
}

.disa-card h3 {
    font-size: 30px;
    margin: 15px 0
}

.disa-rich-text img {
    max-width: 100%;
    height: auto
}

@media(max-width:720px) {
    .disa-card-grid {
        grid-template-columns: 1fr
    }

    .disa-page {
        padding-top: 110px
    }
}

/* Subtle interaction motion; scroll entrances are enhanced by JavaScript. */
.service-tile img,
.project-card img,
.disa-card img {
    transition: transform .65s cubic-bezier(.22, 1, .36, 1)
}

.service-tile,
.project-card,
.disa-card {
    overflow: hidden
}

@media(hover:hover) and (pointer:fine) {

    .service-tile:hover img,
    .project-card:hover img,
    .disa-card:hover img {
        transform: scale(1.035)
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important
    }
}

.numbers strong [data-count-value] {
    display: inline;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0
}

/* Directional scroll entrances: initialized only when JavaScript supports motion. */
html,
body {
    overflow-x: clip
}

.disa-reveal-waiting {
    opacity: 0
}

@media(prefers-reduced-motion:reduce) {
    .disa-reveal-waiting {
        opacity: 1
    }
}

/* Shared header navigation sizing. */
.navlinks {
    font-family: 'PT Sans', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    gap: 28px
}

.navlinks a {
    line-height: 1.4;
    white-space: nowrap
}

@media(min-width:721px) and (max-width:1100px) {
    .navlinks {
        font-size: 16px;
        gap: 20px
    }
}

@media(max-width:720px) {
    .navlinks {
        font-size: 18px;
        gap: 22px
    }
}

/* Activity labels below the hero. */
.ticker span {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5
}

.ticker b {
    font-size: 22px
}

@media(max-width:720px) {
    .ticker span {
        font-size: 14px
    }

    .ticker b {
        font-size: 20px
    }
}

/* FAQ readability on the homepage. */
.faq-grid summary {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5
}

.faq-grid details p {
    font-size: 16px;
    line-height: 1.85
}

@media(max-width:720px) {
    .faq-grid summary {
        font-size: 17px
    }

    .faq-grid details p {
        font-size: 15px
    }
}

/* Keep the long FAQ heading within narrow screens. */
@media(max-width:720px) {
    .faq-grid {
        min-width: 0
    }

    .faq-grid>div {
        min-width: 0
    }

    .faq-grid h2 {
        font-size: clamp(38px, 11.5vw, 58px);
        line-height: 1.05;
        letter-spacing: -1px
    }

    .faq-grid summary {
        padding-right: 30px;
        overflow-wrap: anywhere
    }

    .faq-grid details p {
        padding-right: 0
    }

    .faq-grid summary:after {
        right: 0
    }
}

/* More compact contact typography on phones. */
@media(max-width:720px) {
    .contact h2 {
        font-size: clamp(32px, 9.5vw, 40px);
        line-height: 1.08
    }

    .contact p {
        font-size: 13px;
        line-height: 1.8
    }

    .contact h3 {
        font-size: 16px !important
    }

    .contact label {
        font-size: 11px
    }

    .contact input:not([type=checkbox]) {
        font-size: 13px
    }

    .contact .btn {
        font-size: 12px;
        padding: 15px 16px
    }
}

/* Simplified footer on mobile. */
@media(max-width:720px) {

    .footer-navigation,
    .footer-newsletter,
    .copyright>span:last-child {
        display: none
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 0
    }
}

.footer-credit {
    text-align: center;
    margin-top: 18px;
    font-size: 12px;
    color: #bfd3da
}

.footer-credit a:hover {
    color: white
}

@media(max-width:720px) {
    footer .footer-grid {
        text-align: center
    }

    footer .footer-logo {
        margin-left: auto;
        margin-right: auto
    }

    footer .copyright {
        justify-content: center;
        text-align: center
    }

    footer .footer-credit {
        margin-top: 16px
    }
}

@media(max-width:720px) {
    footer .copyright {
        padding: 20px 0 0;
        gap: 0
    }

    footer .footer-credit {
        margin-top: 8px;
        padding-bottom: 20px;
        line-height: 1.5
    }
}

/* Consistent homepage proportions for mobile screens. */
@media(max-width:720px) {
    .homepage .wrap {
        padding-left: 22px;
        padding-right: 22px
    }

    .homepage .section,
    .homepage .contact {
        padding: 44px 0
    }

    .homepage .eyebrow {
        font-size: 9px;
        letter-spacing: 1.7px;
        margin-bottom: 18px
    }

    .homepage main h2,
    .homepage .services-head h2,
    .homepage .section-heading h2,
    .homepage .impact h2,
    .homepage .faq-grid h2,
    .homepage .contact h2 {
        font-size: clamp(30px, 9vw, 38px);
        line-height: 1.08;
        letter-spacing: -.7px
    }

    .homepage main h2 em {
        letter-spacing: inherit
    }

    .homepage .hero,
    .homepage .hero-grid {
        height: 710px;
        min-height: 710px;
        max-height: none
    }

    .homepage .hero .hero-copy {
        padding: 128px 0 0;
        width: 100%
    }

    .homepage .hero h1 {
        font-size: clamp(40px, 12vw, 50px) !important;
        line-height: 1.04 !important;
        letter-spacing: -1.5px
    }

    .homepage .hero h1 em {
        letter-spacing: -1.5px
    }

    .homepage .hero p {
        font-size: 13px;
        max-width: 290px;
        margin: 20px 0
    }

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

    .homepage .hero .btn {
        font-size: 12px;
        padding: 13px 16px;
        min-height: 44px
    }

    .homepage .hero .hero-seal {
        width: 72px;
        height: 72px;
        right: 22px;
        bottom: 105px;
        font-size: 7px
    }

    .homepage .hero-seal strong {
        font-size: 25px
    }

    .homepage .project-label {
        left: 22px;
        right: 110px;
        bottom: 105px;
        text-align: left
    }

    .homepage .project-label h3 {
        font-size: 21px;
        line-height: 1.15
    }

    .homepage .project-label span {
        font-size: 10px
    }

    .homepage .hero-bottom {
        padding: 18px 0
    }

    .homepage .ticker {
        padding: 22px 0;
        gap: 16px 12px
    }

    .homepage .ticker span {
        font-size: 13px;
        gap: 8px;
        line-height: 1.45
    }

    .homepage .ticker b {
        font-size: 18px;
        flex-shrink: 0
    }

    .homepage .about,
    .homepage .impact-grid,
    .homepage .faq-grid,
    .homepage .contact-grid {
        gap: 28px;
        min-width: 0
    }

    .homepage .about-visual {
        padding: 0 25px 40px 0
    }

    .homepage .about-visual img {
        height: 260px
    }

    .homepage .about-visual:before {
        font-size: 85px
    }

    .homepage .experience {
        width: 115px;
        padding: 16px;
        bottom: 15px
    }

    .homepage .experience strong {
        font-size: 45px
    }

    .homepage .about p,
    .homepage .services-head p,
    .homepage .impact p {
        font-size: 13px;
        line-height: 1.8
    }

    .homepage .about-values {
        flex-wrap: wrap;
        font-size: 11px;
        gap: 10px 16px
    }

    .homepage .services-section {
        padding-bottom: 44px
    }

    .homepage .services-head p {
        margin-top: 18px
    }

    .homepage .services-grid {
        gap: 8px
    }

    .homepage .service-tile {
        height: 190px
    }

    .homepage .service-tile div {
        left: 12px;
        right: 12px;
        bottom: 18px
    }

    .homepage .service-tile h3 {
        font-size: 21px;
        line-height: 1.1;
        overflow-wrap: anywhere
    }

    .homepage .service-tile small {
        font-size: 8px
    }

    .homepage .section-heading {
        margin-bottom: 26px
    }

    .homepage .project-grid {
        gap: 24px;
        grid-template-columns: minmax(0, 1fr)
    }

    .homepage .project-card,
    .homepage .project-card:nth-child(even),
    .homepage .project-card:first-child {
        height: 330px;
        margin: 0
    }

    .homepage .project-card img,
    .homepage .project-card:first-child img {
        height: 255px
    }

    .homepage .project-card h3,
    .homepage .project-card:first-child h3 {
        font-size: 26px;
        line-height: 1.1
    }

    .homepage .gallery-controls {
        margin-top: 24px
    }

    .homepage .impact-grid>div {
        min-width: 0
    }

    .homepage .numbers {
        padding-top: 22px;
        gap: 18px;
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .homepage .numbers strong {
        font-size: clamp(52px, 16vw, 66px);
        letter-spacing: -2px;
        line-height: 1.05
    }

    .homepage .numbers strong sup {
        font-size: .45em
    }

    .homepage .numbers>div>span {
        font-size: 10px;
        line-height: 1.5;
        margin-top: 10px
    }

    .homepage .faq-intro .call {
        margin-top: 22px;
        padding-top: 22px
    }

    .homepage .faq-grid summary {
        font-size: 16px;
        padding-top: 22px;
        padding-bottom: 22px
    }

    .homepage .faq-grid details p {
        font-size: 14px;
        line-height: 1.85
    }

    .homepage .contact form {
        padding: 22px
    }

    .homepage .contact input:not([type=checkbox]) {
        min-height: 44px
    }

    .homepage footer {
        padding-top: 44px
    }

    .homepage footer .copyright {
        margin-top: 30px
    }

    .homepage .cookie {
        padding: 12px;
        gap: 10px;
        font-size: 10px
    }

    .homepage .cookie button {
        min-height: 40px;
        padding: 10px 12px;
        flex-shrink: 0
    }
}

@media(max-width:360px) {
    .homepage .wrap {
        padding-left: 18px;
        padding-right: 18px
    }

    .homepage main h2,
    .homepage .services-head h2,
    .homepage .section-heading h2,
    .homepage .impact h2,
    .homepage .faq-grid h2,
    .homepage .contact h2 {
        font-size: 29px
    }

    .homepage .hero h1 {
        font-size: 40px !important
    }

    .homepage .service-tile {
        height: 170px
    }

    .homepage .service-tile h3 {
        font-size: 19px
    }

    .homepage .ticker span {
        font-size: 12px
    }

    .homepage .project-label h3 {
        font-size: 19px
    }
}

.project-swipe-hint {
    display: none
}

@media(max-width:720px) {
    .homepage .project-swipe-hint {
        display: block;
        color: #bdd0d6;
        font-size: 11px;
        margin-bottom: 16px
    }

    .homepage .project-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 88%;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        padding: 0 0 16px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #00194C #ffffff20
    }

    .homepage .project-grid .project-card {
        display: block;
        grid-column: auto;
        scroll-snap-align: start;
        min-width: 0;
        margin: 0;
        height: 330px
    }

    .homepage .project-grid .project-card img {
        height: 250px
    }

    .homepage .project-grid .project-card h3 {
        font-size: 24px
    }

    .homepage .projects .gallery-controls {
        display: none
    }
}

.drawer-close,
.menu-backdrop {
    display: none
}

@media(max-width:720px) {
    body.menu-open {
        overflow: hidden
    }

    body.menu-open header {
        z-index: 100
    }

    header .navlinks,
    .inner-page header .navlinks {
        display: flex;
        position: fixed;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: min(82vw, 330px);
        height: 100dvh;
        margin: 0;
        padding: 90px 28px 30px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24px;
        background: white;
        color: var(--ink);
        box-shadow: -10px 0 30px #0002;
        z-index: 102;
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .35s cubic-bezier(.22, 1, .36, 1), visibility .35s;
        overflow-y: auto
    }

    header .navlinks.open {
        transform: translateX(0);
        visibility: visible
    }

    .drawer-close {
        display: block;
        position: absolute;
        right: 22px;
        top: 22px;
        width: 44px;
        height: 44px;
        border: 1px solid #bdd0d6;
        background: white;
        color: var(--ink);
        font-size: 27px
    }

    .menu-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        border: 0;
        background: #00194C88;
        z-index: 99;
        padding: 0
    }
}

@media(prefers-reduced-motion:reduce) {
    header .navlinks {
        transition: none
    }
}

.drawer-brand {
    display: none
}

@media(max-width:720px) {

    header .navlinks,
    .inner-page header .navlinks {
        padding-top: 28px;
        gap: 24px
    }

    .drawer-brand {
        display: block;
        width: 100%;
        padding: 0 0 26px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--line)
    }

    .drawer-brand>a {
        display: block;
        width: 145px;
        margin: 10px 0 22px
    }

    .drawer-brand img {
        width: 145px;
        height: 65px;
        object-fit: contain
    }

    .drawer-socials {
        display: flex;
        gap: 9px;
        flex-wrap: wrap
    }

    .drawer-socials a,
    .drawer-socials span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid #dbe5e8;
        border-radius: 50%;
        color: var(--teal);
        background: #f4f8f9
    }

    .drawer-socials a:hover {
        background: var(--teal);
        color: white
    }

    .drawer-socials .social-unavailable {
        color: #8da3ad
    }
}

/* Navigation text color. */
.navlinks,
.navlinks>a,
.drawer-close {
    color: #00194C
}

.navlinks>a:hover,
.navlinks>a:focus-visible {
    color: #00194C
}

.drawer-socials a,
.drawer-socials span,
.drawer-socials .social-unavailable {
    color: #00194C
}

.drawer-socials a:hover {
    background: #00194C;
    color: white
}

/* Shared Disa brand palette. */
:root {
    --navy: #00194C;
    --ink: #00194C;
    --teal: #00194C;
    --line: #dce2ec
}

body,
p {
    color: #00194C
}

h2 em,
.eyebrow,
.ticker b,
.textlink,
details[open] summary {
    color: #00194C
}

.hero-image:after,
.hero .hero-image:after {
    background: linear-gradient(90deg, #00194Cc9, transparent 85%), linear-gradient(0deg, #00194Caa, transparent 45%)
}

.hero h1,
.hero h1 em,
.hero p,
.hero .eyebrow,
.hero .project-label,
.hero-bottom,
.hero-seal {
    color: white
}

.impact,
footer {
    background: #00194C
}

.impact h2,
.impact h2 em,
.impact .eyebrow,
.impact p,
.impact .numbers,
footer p,
footer a,
footer h3 {
    color: white
}

.experience,
.tag,
.float-contact {
    background: #00194C;
    color: white
}

.contact {
    background: #eef1f7
}

.btn:hover {
    background: #00194C
}

@media(max-width:720px) {
    .hero .hero-image:after {
        background: linear-gradient(90deg, #00194Cbb, #00194C44), linear-gradient(0deg, #00194C99, transparent 50%)
    }
}

/* Two-tone heading accents. */
h2 em,
.eyebrow:before,
.ticker b {
    color: #0389A6
}

.eyebrow:before {
    background: #0389A6
}

h2 em {
    color: #0389A6
}

.projects h2 em {
    color: #0389A6
}

.impact h2 {
    color: white
}

.about h2 em,
.services-head h2 em,
.section-heading h2 em,
.faq-grid h2 em,
.contact h2 em {
    color: #0389A6
}

/* Light background for the project section; retain contrast on photo cards. */
.projects {
    background: #f4f6f9
}

.projects h2,
.projects .eyebrow,
.projects .section-heading,
.projects .project-card {
    color: #00194C
}

.projects h2 em {
    color: #0389A6
}

.projects .project-swipe-hint {
    color: #5a6e7c;
    font-size: 13px
}

.projects .project-card {
    overflow: visible !important;
    height: auto !important;
    background: transparent !important;
}

.projects .project-card:first-child {
    height: auto !important;
}

.projects .project-card img {
    height: 340px !important;
    max-height: none !important;
    border-radius: 4px !important;
    object-fit: cover !important;
}

.projects .project-card:first-child img {
    height: 560px !important;
    max-height: 560px !important;
}

.projects .project-card .info {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 18px 0 12px !important;
    overflow: visible !important;
}

.projects .project-card .info,
.projects .project-card h3 {
    color: #00194C !important;
    transition: color .2s ease;
    line-height: 1.25 !important;
    padding-bottom: 6px !important;
    overflow: visible !important;
}

.projects .project-card:hover h3 {
    color: #0389A6 !important
}

.projects .project-card .info small {
    display: block;
    margin-bottom: 4px;
    color: #0389A6 !important;
    font-weight: 600;
    letter-spacing: 1.5px
}

.projects .project-card .tag {
    background: #00194C;
    color: white
}

.projects .gallery-controls button {
    color: #00194C;
    border-color: #00194C;
    background: white
}

.projects .gallery-controls button:hover {
    background: #00194C;
    color: white
}

.homepage .projects .gallery-controls {
    display: flex;
}

.projects .all-projects-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border: 1px solid #00194C;
    background: #fff;
    color: #00194C;
    font-size: 12px;
    transition: background .2s ease, color .2s ease;
}

.projects .all-projects-link:hover,
.projects .all-projects-link:focus-visible {
    background: #00194C;
    color: #fff;
}

@media(max-width:720px) {
    .projects .project-card img,
    .projects .project-card:first-child img {
        height: 250px !important;
        max-height: 250px !important;
    }
}

/* Site-wide Poppins typography. */
body,
body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.h1):not(.h2):not(.h3) {
    font-family: 'Poppins', Arial, sans-serif !important
}

body {
    font-weight: 400
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
.hero h1,
.hero h1 *,
.hero h1 em,
.hero .project-label h3,
.project-label h3,
.page-banner h1,
.page-banner h1 *,
.section-heading h2,
.section-heading h2 *,
.services-head h2,
.services-head h2 *,
.impact h2,
.impact h2 *,
.faq-grid h2,
.faq-grid h2 *,
.contact h2,
.contact h2 *,
.service-tile h3,
.project-card h3,
.listing-card h3,
.detail-aside h2,
.faq-sidebar h2,
.contact-info h2,
.message-form h2,
.visit-box h3,
.principles h3,
.disa-content h1,
.disa-content h2,
.disa-card h3,
.big-caption,
.numbers strong,
.experience strong,
.call a,
.project-extra {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-style: normal;
    overflow: visible !important;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.22 !important;
    padding-bottom: 3px;
    overflow: visible !important;
}

.hero h1 {
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
    line-height: 1.08 !important;
    padding-bottom: 6px !important;
}

.hero h1 em {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important
}

.navlinks,
.navlinks>a {
    font-size: 16px !important;
    font-weight: 500 !important
}

/* Navigation Dropdown */
.nav-item.has-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 12px 0
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: inherit;
    transition: color .2s;
    text-decoration: none
}

.dropdown-arrow {
    width: 9px;
    height: 6px;
    transition: transform .25s ease;
    opacity: .75;
    flex-shrink: 0
}

.nav-item.has-dropdown:hover .dropdown-arrow,
.nav-item.has-dropdown:focus-within .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
    color: #0389A6
}

.nav-item.has-dropdown:hover .dropdown-toggle,
.nav-item.has-dropdown:focus-within .dropdown-toggle {
    color: #0389A6
}

.dropdown-menu {
    position: absolute;
    top: calc(100% - 4px);
    left: -12px;
    min-width: 190px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 14px 35px rgba(0, 25, 76, .15);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s cubic-bezier(.16, 1, .3, 1), transform .22s cubic-bezier(.16, 1, .3, 1), visibility .22s;
    z-index: 1000;
    border: 1px solid rgba(0, 25, 76, .08);
    pointer-events: none
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px
}

.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto
}

.dropdown-menu a {
    display: block;
    padding: 11px 22px;
    color: #00194C !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    text-decoration: none;
    transition: background .18s, color .18s, padding-left .18s;
    white-space: nowrap;
    line-height: 1.4
}

.dropdown-menu a:hover {
    background: #f0f7f9;
    color: #0389A6 !important;
    padding-left: 26px
}

@media(max-width:720px) {
    .nav-item.has-dropdown {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0
    }

    .dropdown-toggle {
        width: 100%;
        justify-content: space-between
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 6px 0 6px 14px;
        background: transparent;
        min-width: 0;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
        border-left: 2px solid #0389A6;
        margin-top: 8px;
        pointer-events: auto
    }

    .dropdown-menu::before {
        display: none
    }

    .dropdown-menu a {
        padding: 8px 10px;
        font-size: 15px !important;
        color: #00194C !important
    }
}

/* Footer Copyright & Macroturk Credit Alignment */
.copyright {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-top: 45px !important;
    padding: 22px 0 25px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    font-size: 12px !important;
    color: #a3bdc9 !important
}

.footer-credit {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #a3bdc9 !important;
    display: inline-block !important
}

.footer-credit a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .2s ease !important
}

.footer-credit a:hover {
    color: #ffffff !important
}

@media(max-width:720px) {
    footer .copyright {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 20px 0 !important;
        text-align: center !important
    }

    .footer-credit {
        margin: 4px 0 !important
    }
}

@media(max-width: 720px) {
    .contact-grid {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}

/* ==========================================================================
   KOMPAKT VE İNCE İLETİŞİM ALANI
   ========================================================================== */
.contact {
    padding: 42px 0 !important;
}

.contact-grid {
    gap: 48px !important;
    align-items: center !important;
}

.contact h2 {
    font-size:48px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    margin: 8px 0 10px !important;
}

.contact p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-top: 8px !important;
    max-width: 480px !important;
}

.contact .eyebrow {
    margin-bottom: 6px !important;
    font-size: 11px !important;
}

.contact form {
    padding: 22px 26px !important;
}

.contact form h3 {
    font-size: 16.5px !important;
    margin-bottom: 12px !important;
}

.contact input:not([type=checkbox]) {
    padding: 9px 0 !important;
    font-size: 13.5px !important;
}

.contact .form-fields {
    gap: 14px !important;
}

.contact .consent {
    margin: 12px 0 14px !important;
    font-size: 11.5px !important;
}

.contact .btn {
    padding: 12px 20px !important;
    font-size: 13.5px !important;
}

@media(max-width: 720px) {
    .contact {
        padding: 34px 0 !important;
    }

    .contact-grid {
        gap: 26px !important;
    }

    .contact h2 {
        font-size: 23px !important;
    }

    .contact form {
        padding: 18px 16px !important;
    }
}

/* ==========================================================================
   SSS (SORULAR) ALANI: KÜÇÜLTÜLMÜŞ BAŞLIK VE DENGELİ ALAN
   ========================================================================== */
#sorular {
    padding: 65px 0 !important;
}

.faq-grid {
    gap: 60px !important;
    align-items: start !important;
}

.faq-grid h2 {
    font-size: 48px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px !important;
    margin: 12px 0 16px !important;
}

.faq-intro p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin: 12px 0 22px !important;
    color: #627481 !important;
}

.faq-intro .call {
    padding-top: 18px !important;
}

.faq-intro .call small {
    font-size: 11.5px !important;
    margin-bottom: 4px !important;
}

.faq-intro .call a {
    font-size: 28px !important;
    line-height: 1.2 !important;
}

.faq-grid summary {
    font-size: 16.5px !important;
    padding: 22px 35px 22px 0 !important;
}

.faq-grid details p {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
}

@media(max-width: 720px) {
    #sorular {
        padding: 45px 0 !important;
    }

    .faq-grid {
        gap: 32px !important;
    }

    .faq-grid h2 {
        font-size: 28px !important;
    }

    .faq-intro .call a {
        font-size: 24px !important;
    }
}

/* ==========================================================================
   FOOTER E-POSTA KUTUSU (BEYAZ)
   ========================================================================== */
.newsletter {
    display: flex !important;
    align-items: stretch !important;
    margin-top: 16px !important;
}

.newsletter input:not([type=checkbox]) {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #00194C !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    flex: 1 !important;
}

.newsletter input:not([type=checkbox])::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

.newsletter button {
    background: #0389A6 !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    border: 1px solid #0389A6 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}

.newsletter button:hover {
    background: #026d84 !important;
    border-color: #026d84 !important;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.footer-socials a,
.footer-socials span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    color: #fff;
    transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.footer-socials [data-network="instagram"] { --social-color: #d62976; --social-background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.footer-socials [data-network="facebook"] { --social-color: #1877f2; }
.footer-socials [data-network="youtube"] { --social-color: #ff0033; }
.footer-socials [data-network="twitter"] { --social-color: #151515; }
.footer-socials [data-network="linkedin"] { --social-color: #0a66c2; }

.footer-socials [data-network]:hover,
.footer-socials a:focus-visible {
    background: var(--social-background, var(--social-color));
    border-color: var(--social-color);
    color: #fff;
    opacity: 1;
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25), 0 0 12px var(--social-color);
}

.footer-socials a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.footer-socials .social-unavailable {
    opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
    .footer-socials [data-network] {
        transition: none;
    }

    .footer-socials [data-network]:hover,
    .footer-socials a:focus-visible {
        transform: none;
    }
}

footer .footer-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.footer-contact-row svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-top: 3px;
}

.footer-contact-row a,
.footer-contact-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.faq-grid summary,
.faq-list summary {
    transition: color .2s ease;
}

.faq-grid summary:hover,
.faq-grid summary:focus-visible,
.faq-list summary:hover,
.faq-list summary:focus-visible {
    color: #0389A6;
}

.faq-grid summary:hover::after,
.faq-grid summary:focus-visible::after,
.faq-list summary:hover::after,
.faq-list summary:focus-visible::after {
    color: #0389A6;
}

@media (prefers-reduced-motion: reduce) {
    .faq-grid summary,
    .faq-list summary {
        transition: none;
    }
}

.footer-contact-details {
    margin-top: 13px;
    display: grid;
    gap: 4px;
}

footer .footer-links a {
    transition: color .2s ease;
}

footer .footer-links a:hover,
footer .footer-links a:focus-visible {
    color: #38c9df;
}

footer .footer-contact-row,
.footer-contact-row a,
.footer-contact-row span {
    transition: color .2s ease;
}

footer .footer-contact-row:hover,
footer .footer-contact-row:hover a,
footer .footer-contact-row:hover span,
footer .footer-contact-row:focus-within,
footer .footer-contact-row:focus-within a {
    color: #38c9df;
}

@media (prefers-reduced-motion: reduce) {
    footer .footer-links a,
    footer .footer-contact-row,
    .footer-contact-row a,
    .footer-contact-row span {
        transition: none;
    }
}


/* Horizontal project gallery on all screen sizes. */
.homepage .projects .project-grid .project-card img {
    display: block;
    width: 100%;
    height: 340px !important;
    max-height: 340px !important;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 720px) {
    .homepage .projects .project-grid .project-card img {
        height: 250px !important;
        max-height: 250px !important;
    }
}

.homepage .projects .project-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 50px) / 3);
    gap: 25px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 15px 0 20px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #0389A6 #dce4ed;
    cursor: grab;
}
.homepage .projects .project-grid .project-card {
    display: block;
    grid-column: auto;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}
.homepage .projects .project-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}
.homepage .projects .project-grid.is-dragging a { cursor: grabbing; }
.homepage .projects .project-swipe-hint { display: block; }
@media (max-width: 1000px) {
    .homepage .projects .project-grid { grid-auto-columns: calc((100% - 25px) / 2); }
}
@media (max-width: 720px) {
    .homepage .projects .project-grid { grid-auto-columns: 88%; gap: 16px; }
}

.homepage .projects .featured-project {
    margin: 15px 0 40px;
}
.homepage .projects .featured-project .project-card {
    display: block;
    margin: 0;
}
.homepage .projects .featured-project .project-card img {
    display: block;
    width: 100%;
    height: 560px !important;
    max-height: 560px !important;
    object-fit: cover !important;
    object-position: center;
}
@media (max-width: 1000px) {
    .homepage .projects .featured-project .project-card img {
        height: 440px !important;
        max-height: 440px !important;
    }
}
@media (max-width: 720px) {
    .homepage .projects .featured-project .project-card img {
        height: 300px !important;
        max-height: 300px !important;
    }
}

.faq-intro .call a,
.faq-sidebar > a[href^="tel:"] {
    display: inline-block;
    transition: color .25s ease, transform .25s ease, text-shadow .25s ease;
}
.faq-intro .call a:hover,
.faq-intro .call a:focus-visible,
.faq-sidebar > a[href^="tel:"]:hover,
.faq-sidebar > a[href^="tel:"]:focus-visible {
    color: #0389A6;
    transform: translateY(-2px);
    text-shadow: 0 3px 12px rgba(3, 137, 166, .18);
}
@media (prefers-reduced-motion: reduce) {
    .faq-intro .call a,
    .faq-sidebar > a[href^="tel:"] {
        transition: none;
        transform: none;
    }
}

.ticker > span {
    transition: color .25s ease, transform .25s ease;
}
.ticker > span > b {
    display: inline-block;
    transition: transform .3s ease, color .25s ease;
}
.ticker > span:hover {
    color: #0389A6;
    transform: translateY(-3px);
}
.ticker > span:hover > b {
    color: #0389A6;
    transform: rotate(90deg) scale(1.2);
}
@media (prefers-reduced-motion: reduce) {
    .ticker > span,
    .ticker > span > b {
        transition: none;
    }
    .ticker > span:hover,
    .ticker > span:hover > b {
        transform: none;
    }
}