:root { color-scheme: light; --blue: #287eb7; --navy: #102238; --text: #434b52; --line: #dde4e9; --soft: #f4f7f9; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 1rem/1.65 system-ui, sans-serif; color: var(--text); background: #fff; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: var(--blue); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #147ab9; outline-offset: 4px; }
section { scroll-margin-top: 105px; }
.wrap { width: min(1200px, calc(100% - 3rem)); margin-inline: auto; }
.skip, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { z-index: 9; inset: 1rem auto auto 1rem; width: auto; height: auto; padding: .5rem; background: white; clip-path: none; }
.pilot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .3rem max(1.5rem, calc((100vw - 1200px) / 2)); background: var(--navy); color: white; font-size: .78rem; }
.pilot a { color: #d2eeff; text-underline-offset: 3px; }
.navigation { --nav-height: 74px; --nav-color: #43505b; --nav-accent: #185c87; position: sticky; z-index: 3; top: 0; background: #fff; box-shadow: 0 2px 8px #12243314; }
.navigation[data-theme-ready] { transition: background-color .28s ease, box-shadow .28s ease; }
.navigation[data-overlay=true] { margin-block-end: calc(-1 * var(--nav-height)); }
.navigation[data-overlay=true]:not([data-scrolled=true]) { --nav-color: #f2f7fb; --nav-accent: #a7dfff; background: #0b1c2dc9; box-shadow: 0 1px #d2e9fc26; backdrop-filter: blur(12px); }
.nav-row { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-height); gap: 1rem; }
.brand { flex: 0 0 auto; padding: .22rem .5rem; margin-inline-start: -.5rem; border-radius: .35rem; }
.brand-filters { position: absolute; }
.brand img { width: clamp(145px, 18vw, 185px); height: auto; object-fit: contain; object-position: left center; }
.navigation[data-overlay=true]:not([data-scrolled=true]) .brand img { filter: url("#logo-on-dark"); }
.navigation[data-overlay=true]:not([data-scrolled=true]) :is(.brand, .menu-button):focus-visible { outline-color: #a7dfff; }
.navigation nav { display: flex; flex-wrap: wrap; gap: clamp(.7rem, 2.2vw, 2rem); }
.navigation nav a { color: var(--nav-color); text-decoration: none; font-size: .82rem; text-transform: uppercase; white-space: nowrap; }
.navigation[data-theme-ready] nav a { transition: color .28s ease; }
.navigation nav a:hover, .navigation nav a[aria-current=location] { color: var(--nav-accent); text-decoration: underline; text-underline-offset: .25em; }
.menu-button { display: none; min-height: 44px; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: .35rem; background: white; color: var(--navy); }
.navigation[data-overlay=true]:not([data-scrolled=true]) .menu-button { color: #f2f7fb; background: #10223870; border-color: #d2e9fc70; }
#loading { padding-block: 4rem; }
.hero { position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center; min-height: clamp(35rem, 88svh, 61rem); background: #213a50; color: #fff; text-align: center; }
.hero > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #08172645, #0817269e 70%, #08172675); }
.hero-copy { padding: 6.75rem 1.25rem 6rem; width: min(980px, 100%); }
.hero h1 { width: fit-content; margin: 0 auto; padding: .8rem clamp(.45rem, 2.5vw, 2.25rem); border-block: 1px solid #ffffffaf; font-size: clamp(1.75rem, 3.15vw, 3.25rem); line-height: 1.17; font-weight: 520; letter-spacing: .015em; text-wrap: balance; }
.hero p { margin: 1.5rem auto 0; max-width: 48rem; font-size: clamp(1rem, 1.8vw, 1.4rem); text-wrap: balance; }
.carousel-controls { position: absolute; bottom: 1.25rem; display: flex; align-items: center; justify-content: center; gap: clamp(.25rem, 1.5vw, .75rem); max-width: calc(100% - 1rem); }
.carousel-controls button { flex: 0 0 auto; color: #fff; background: #102238bc; border: 1px solid #ffffff9e; border-radius: 50%; width: 2.75rem; height: 2.75rem; font-size: 1.4rem; line-height: 1; }
.carousel-controls button:hover { background: #102238; }
.carousel-controls button:focus-visible { outline-color: white; outline-offset: 2px; }
#slide-rotation { font-size: 1rem; }
#slide-steps { display: flex; flex-wrap: wrap; justify-content: center; }
#slide-steps button { position: relative; width: clamp(1.75rem, 5vw, 2.25rem); padding: 0; border: 0; background: none; }
#slide-steps button::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: .65rem; height: .65rem; border: 1px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); }
#slide-steps button[aria-pressed=true]::after { background: white; }
.section { padding-block: clamp(2.8rem, 6vw, 5.8rem); text-align: center; }
.section-title { margin: 0 auto 1.6rem; color: var(--navy); font-weight: 450; line-height: 1.2; font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; }
.section-title::after { content: ''; display: block; margin: 1rem auto 0; width: 4.2rem; height: 2px; background: var(--blue); }
.intro { max-width: 65rem; margin: 0 auto 2.3rem; font-size: 1.13rem; }
#about { scroll-margin-top: 74px; }
.about-cta { background: #176b9e; color: white; }
.about-cta-row { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 4vw, 3rem); padding-block: clamp(1.5rem, 3vw, 2.65rem); }
.about-cta h2 { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.25; }
.about-cta p { margin: .45rem 0 0; max-width: 58rem; line-height: 1.55; }
.about-contact-link { flex: 0 0 auto; background: var(--navy); border: 1px solid #e6f5ff55; border-radius: .4rem; color: white; padding: .7rem 1.15rem; font-weight: 650; text-decoration: none; }
.about-contact-link:hover { background: #203953; }
.about-contact-link:focus-visible { outline-color: white; }
.about-section { padding-block: clamp(2rem, 5vw, 4.65rem); }
#about-title { margin: 0 0 clamp(1.5rem, 3vw, 2.4rem); font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--navy); line-height: 1.13; overflow-wrap: anywhere; }
#about-title::after, .about-intro h3::after { content: ''; display: block; width: 3.5rem; height: 2px; margin-block-start: .75rem; background: var(--blue); }
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.35rem, 4vw, 3rem); align-items: start; }
.about-grid > :only-child { grid-column: 1 / -1; }
.about-overview img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: .25rem; }
.about-overview:only-child img { max-width: 40rem; }
.about-intro { margin-block-start: 1.35rem; }
.about-intro:first-child { margin-block-start: 0; }
.about-intro h3 { margin: 0 0 .85rem; color: var(--navy); font-size: clamp(1.25rem, 2.15vw, 1.6rem); }
.about-intro h3::after { width: 2.25rem; margin-block-start: .55rem; }
.about-grid p { margin: 0 0 .75rem; white-space: pre-line; overflow-wrap: anywhere; }
.about-grid p:last-child { margin-bottom: 0; }
@font-face { font-family: 'Bootstrap Icons'; src: url('vendor/bootstrap-icons/fonts/bootstrap-icons.woff2') format('woff2'); font-display: block; }
.about-panel-icon, .about-chevron { font: normal 1.2rem/1 'Bootstrap Icons'; }
.about-panels { border-block-end: 1px solid #c8dce9; }
.about-panels details { border-block-start: 1px solid #c8dce9; scroll-margin-top: 90px; }
.about-panels details[open] { border-block-start-color: var(--blue); }
.about-panels summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.45rem; padding: .65rem .7rem; color: var(--navy); cursor: pointer; font-weight: 680; list-style: none; overflow-wrap: anywhere; }
.about-panels summary:hover, .about-panels details[open] summary { color: #185c87; }
.about-panels summary::-webkit-details-marker { display: none; }
.about-panel-label { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.about-panel-icon { flex: 0 0 auto; width: 1.3rem; color: #2379ad; }
#collapse-One .about-panel-icon::before { content: '\f4e1'; }
#collapse-Two .about-panel-icon::before { content: '\f1f6'; }
#collapse-Three .about-panel-icon::before { content: '\f3e5'; }
#collapse-Four .about-panel-icon::before { content: '\f3e6'; }
.about-chevron { flex: 0 0 auto; font-size: .85rem; color: #2379ad; }
.about-chevron::before { content: '\f282'; }
.about-panels details[open] .about-chevron { transform: rotate(180deg); }
.about-panel-copy { padding: 0 .7rem 1.1rem 2.75rem; }
.about-stat-band { border-block-start: 2px solid var(--blue); background: var(--navy); color: #d7e8f4; }
.statistics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1rem; padding-block: clamp(1.3rem, 3.5vw, 2.35rem); text-align: center; }
.statistics > div + div { border-inline-start: 1px solid #b5d7ec40; }
.statistic-number { display: block; color: white; font-size: clamp(1.65rem, 4vw, 2.6rem); line-height: 1.3; font-variant-numeric: tabular-nums; }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.service-images { display: grid; grid-template: minmax(0, 1fr) / repeat(3, minmax(0, 1fr)); block-size: clamp(6.5rem, 18.75vw, 25rem); margin-block-start: clamp(2rem, 5vw, 4.75rem); background: var(--navy); }
.service-images:empty { display: none; }
.service-images img { width: 100%; height: 100%; object-fit: cover; }
.service { border: 1px solid var(--line); padding: 2rem clamp(.8rem, 2vw, 1.5rem); }
.service-icon { display: grid; grid-template-columns: repeat(2, .57rem); justify-content: center; align-content: center; gap: .2rem; width: 3.75rem; height: 3.75rem; margin: 0 auto; border-radius: 50%; background: var(--blue); }
.service-icon span { border: 1px solid #fff; border-radius: .1rem; aspect-ratio: 1; }
.service h3 { font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.3; font-weight: 500; margin: 1.15rem 0 .8rem; color: var(--navy); }
.service ul { list-style: none; padding: 0; margin: 0; }
.service li { padding: .43rem .2rem; }
.service li + li { border-top: 1px dotted #9daeb9; }
.service-description { margin: .2rem 0 0; font-size: .9rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.button-link { display: inline-block; margin-top: 1.7rem; padding: .55rem 1.15rem; border: 1px solid var(--blue); text-decoration: none; }
.profile-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.75rem); padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); border-inline-start: 4px solid var(--blue); border-radius: .6rem; background: var(--soft); text-align: start; }
.profile-panel h3 { margin: 0; color: var(--navy); font-size: 1.25rem; }
.profile-panel p { margin: .25rem 0 0; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.profile-actions .button-link { margin: 0; min-height: 44px; padding: .55rem .9rem; border-radius: .35rem; color: #185c87; font-weight: 650; }
.profile-actions .profile-primary { background: #185c87; border-color: #185c87; color: white; }
.profile-actions .button-link:hover { text-decoration: underline; }
.clients { background: var(--soft); }
.client-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .9rem; }
.client-card { display: grid; align-content: center; justify-items: center; gap: .55rem; min-height: 7.5rem; margin: 0; padding: .65rem .45rem; border: 1px solid var(--line); border-radius: .45rem; background: white; }
.client-card img { width: 100%; height: 68px; object-fit: contain; }
.client-card figcaption { color: var(--navy); font-size: .82rem; font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-weight: 650; font-size: .78rem; margin: 0 0 .2rem; }
.gallery { padding-bottom: 0; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; margin: 1.7rem .75rem 0; }
.filters button { padding: .65rem .85rem; border: 1px solid var(--line); color: #495760; background: #fff; font-size: .78rem; text-transform: uppercase; }
.filters button[aria-pressed=true] { color: #116494; border-color: var(--blue); background: #eff8fc; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--soft); }
.project { position: relative; display: grid; align-items: end; width: 100%; min-width: 0; min-height: 8rem; aspect-ratio: 4/3; border: 0; padding: 0; overflow: hidden; background: #253f54; color: white; text-align: left; }
.project img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .22s; }
.project:hover img, .project:focus-visible img { transform: scale(1.045); }
.project span { z-index: 1; width: 100%; padding: 1.45rem .65rem .5rem; line-height: 1.3; font-weight: 550; overflow-wrap: anywhere; background: linear-gradient(transparent, #0b1d2cd9); }
.contact-section {
  color: #edf5fb;
  background: linear-gradient(120deg, #071929df, #0e2b43c9 52%, #081b2de8), url("source/site/contact-bg.jpg") center 46% / cover no-repeat, var(--navy);
}
.contact-section .section-title { color: white; }
.contact-section .section-title::after { background: #78c7f4; }
.contact-intro { max-width: 35rem; margin: 0 auto clamp(2rem, 5vw, 4rem); color: #e1eef7; }
.contact-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; max-width: 61rem; margin-inline: auto; text-align: start; }
.contact-info, .contact-form { min-width: 0; }
.contact-grid h3 { margin: 0 0 .85rem; color: white; font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.3; }
.contact-grid address { display: grid; gap: .55rem; font-style: normal; }
.contact-grid address strong { margin-bottom: .2rem; font-size: 1.05rem; }
.contact-detail { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr); gap: .7rem; overflow-wrap: anywhere; }
.contact-detail span { color: #d5e7f4; font-size: .875rem; }
.contact-section a, .site-footer a { color: #d6edff; text-underline-offset: .18em; }
.contact-section :focus-visible, .site-footer :focus-visible { outline-color: #bee8ff; }
.contact-actions, .contact-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; }
.contact-actions { margin-top: 1rem; }
.contact-section .contact-action, .contact-form button { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
.contact-section .contact-action { padding-inline: .05rem; }
.contact-form button { padding: .55rem 1rem; border: 1px solid #c1e6ff; border-radius: .3rem; color: #102238; background: #c1e6ff; }
.contact-section .contact-action:hover, .contact-form button:not(:disabled):hover { text-decoration: underline; }
.contact-form button:disabled { opacity: .75; cursor: wait; }
.contact-form { display: grid; gap: .85rem; border-inline-start: 1px solid #c2e2f459; padding-inline-start: clamp(1.5rem, 5vw, 4rem); }
.contact-form h3, .contact-form p { margin: 0; }
.contact-form p { color: #e1eef7; font-size: .875rem; }
.contact-form [data-state=error] { color: #ffd6c8; }
.contact-form [data-state=sent], .contact-form [data-state=preview], .contact-form [data-state=queued] { color: #d3f9e4; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.contact-form label { display: grid; gap: .3rem; font-size: .875rem; font-weight: 650; }
.contact-form input, .contact-form textarea { display: block; min-width: 0; width: 100%; min-height: 44px; padding: .45rem .6rem; border: 1px solid #b1c9dc; border-radius: .3rem; background: #091b2ec9; color: #fff; color-scheme: dark; font-size: 1rem; }
.contact-form textarea { resize: vertical; }
@media (max-width: 760px) {
  .contact-grid { max-width: 35rem; grid-template-columns: minmax(0, 1fr); }
  .contact-form { border-inline-start: 0; border-top: 1px solid #c2e2f459; padding-inline-start: 0; padding-top: 1.5rem; }
}
@media (max-width: 400px) { .contact-fields { grid-template-columns: minmax(0, 1fr); } }
.site-footer { padding-block: 1.1rem; background: #0c1b2c; color: white; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem 1.3rem; }
.site-footer p { margin: 0; font-size: .9rem; }
.site-footer p span { display: block; color: #c9dce9; font-size: .8rem; }
.social-links { display: flex; gap: .5rem; }
.social-links a, .back-to-top { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; text-decoration: none; }
.social-links a { border: 1px solid #d6edff55; }
.social-links a:hover { background: #d6edff22; }
.footer-icon { font: normal 1.15rem/1 'Bootstrap Icons'; }
.facebook-icon::before { content: '\f344'; }
.linkedin-icon::before { content: '\f472'; }
.up-icon::before { content: '\f148'; }
.back-to-top { position: fixed; z-index: 2; inset-inline-end: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); color: white; background: var(--navy); border: 1px solid #d6edff80; box-shadow: 0 3px 12px #10223840; }
.back-to-top:hover { background: #185c87; }
@media (max-width: 1360px) { .social-links { margin-inline-end: 3rem; } }
dialog { width: min(780px, calc(100% - 2rem)); max-height: 90dvh; overflow: auto; padding: 0; border: 0; color: var(--navy); }
dialog::backdrop { background: #091725df; }
dialog .close { position: absolute; right: .65rem; top: .65rem; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 50%; width: 2.75rem; height: 2.75rem; font-size: 1.5rem; line-height: 1; }
dialog img { width: 100%; height: auto; max-height: 63dvh; object-fit: contain; background: #132535; }
.dialog-copy { padding: .8rem 1.2rem; }
.dialog-copy h2 { margin: 0; }
.dialog-copy p:last-child { margin-bottom: 0; }
#project-dialog-summary { white-space: pre-line; }
.project-navigation { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .65rem 1rem; border-top: 1px solid var(--line); }
.project-navigation button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: .35rem; background: #fff; color: #185c87; font-size: 1.45rem; line-height: 1; }
.project-navigation button:hover { background: var(--soft); }
#project-position { min-width: 4rem; text-align: center; font-size: .88rem; font-variant-numeric: tabular-nums; }
@media (max-width: 850px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 630px) {
  .wrap { width: calc(100% - 1.5rem); }
  .pilot { padding-inline: .75rem; }
  .navigation { --nav-height: 62px; }
  .hero { min-height: clamp(28rem, 70svh, 39rem); }
  .menu-button { display: block; }
  .navigation nav { --nav-color: #43505b; --nav-accent: #185c87; display: none; position: absolute; inset: 100% 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; padding: .75rem; background: #fff; box-shadow: 0 3px 5px #223b5029; }
  .navigation nav[data-open=true] { display: grid; }
  .navigation nav a { display: flex; align-items: center; min-height: 44px; padding: .25rem .65rem; border-radius: .35rem; }
  .navigation nav a[aria-current=location] { background: var(--soft); }
  #about { scroll-margin-top: 62px; }
  .about-cta-row { flex-direction: column; align-items: flex-start; }
  .about-grid, .services-grid { grid-template-columns: 1fr; }
  .statistics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statistics > div:nth-child(odd) { border-inline-start: 0; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .client-card img { height: 54px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }