:root {--blue: #45a1ee; --navy: #061944; --ink: #101d39; --muted: #68758a; --pale: #f0f4fb; --line: #dbe2ee;}
* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin: 0; font: 16px/1.65 Arial,Helvetica,sans-serif; color: var(--ink); background: #fff;}
a {color: inherit; text-decoration: none;}
button {cursor: pointer; font: inherit;}
img {display: block; width: 100%; object-fit: cover;}
button,a {outline-offset: 5px;}
a:focus-visible,button:focus-visible {outline: 3px solid #ffba3a;}
.button {display: inline-flex; justify-content: center; align-items: center; background: var(--button-bg,#061944); color: #fff; border: 0; padding: 17px 26px; min-height: 54px; font-size: 14px; font-weight: 700; transition: background .2s,transform .2s;}
.button:hover {filter: brightness(.9); transform: translateY(-2px);}
.underlink {display: inline-block; border-bottom: 1px solid currentColor; padding: 7px 0; font-size: 14px; font-weight: 700;}
.underlink:hover {color: var(--blue);}
.eyebrow {display: block; font-size: 12px; letter-spacing: 2px; font-weight: 700; color: var(--blue);}
h1,h2,h3,p {margin-top: 0;}
h1 {font-size: clamp(52px,6.3vw,92px); letter-spacing: -4px; line-height: 1.03; margin-bottom: 28px; font-weight: 800;}
h2 {font-size: clamp(36px,4vw,56px); letter-spacing: -2.1px; line-height: 1.12; margin: 20px 0 26px;}
h3 {font-size: 30px; line-height: 1.17; letter-spacing: -1px;}
p {margin-bottom: 24px;}
.hero {display: grid; grid-template-columns: 1fr 1fr; min-height: 655px; background: var(--pale);}
.hero-left {padding: 80px 9% 35px 11%; display: flex; flex-direction: column; align-items: start; position: relative; overflow: hidden;}
.hero-left .eyebrow {margin-bottom: 34px;}
.hero h1 {font-size: clamp(50px,5.8vw,86px);}
h1 span {color: var(--blue);}
.hero-left p {font-size: 18px; line-height: 1.7; color: var(--muted);}
.hero-actions {display: flex; gap: 25px; align-items: center; margin-top: 14px;}
.hero-signature {display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 1px; width: 100%; border-top: 1px solid #cbd5e6; margin-top: auto; padding-top: 24px; color: var(--muted);}
.hero-photo {position: relative; overflow: hidden;}
.hero-photo img {position: absolute; height: 100%; object-position: 55% center;}
.hero-photo:after {content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#041b58bb,transparent 60%); pointer-events: none;}
.image-tag {position: absolute; bottom: 40px; right: 38px; color: white; z-index: 2; text-align: right; line-height: 1;}
.image-tag b {display: block; font-size: 110px; letter-spacing: -8px;}
.image-tag span {font-size: 12px; letter-spacing: 3px; display: block; margin-top: 12px;}
.brand-band {display: flex; justify-content: space-between; gap: 20px; background: var(--blue); color: white; padding: 27px 5.5%; font-size: 14px; letter-spacing: 2px; font-weight: 700;}
.brand-band span+span {border-left: 1px solid #ffffff60; padding-left: 45px;}
.section {padding: 95px 5.5%; max-width: 1550px; margin: auto;}
.section-heading {display: flex; justify-content: space-between; align-items: center; gap: 35px; margin-bottom: 24px;}
.section-heading h2 {margin-bottom: 16px;}
.service-grid {display: grid; grid-template-columns: repeat(3,1fr); gap: 22px;}
.service-grid article {padding: 34px; background: var(--pale); border-top: 2px solid var(--blue); transition: background .2s,transform .2s; display: flex; flex-direction: column; align-items: start;}
.service-grid article:hover {background: #e7efff; transform: translateY(-4px);}
.card-index {font-size: 12px; letter-spacing: 1.5px; color: var(--blue); font-weight: bold; display: block; margin-bottom: 38px;}
.service-grid h3 {margin-bottom: 24px;}
.service-grid p {color: var(--muted); font-size: 16px;}
.service-grid .underlink {margin-top: auto; color: var(--blue);}
.gallery-feature {display: grid; grid-template-columns: .85fr 1.15fr; min-height: 490px; background: var(--pale); color: var(--ink);}
.gallery-feature-copy {padding: 75px 12%;}
.gallery-feature-copy .eyebrow {color: var(--blue);}
.gallery-feature-copy p {color: var(--muted); max-width: 330px;}
.gallery-feature-image {position: relative; overflow: hidden; min-height: 400px;}
.gallery-feature-image img {height: 100%; position: absolute; transition: transform .6s;}
.gallery-feature-image:hover img {transform: scale(1.025);}
.about-teaser {display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center;}
.about-teaser>div+div {max-width: 480px; font-size: 20px;}
.about-teaser p {color: var(--muted);}
.cta {padding: 60px 5.5%; background: var(--blue); color: white; display: flex; align-items: center; justify-content: space-between; gap: 30px;}
.cta .eyebrow {color: #c3d6ff;}
.cta h2 {margin-bottom: 0;}
.page-intro {padding: 75px 5.5% 60px; background: var(--pale); border-bottom: 1px solid var(--line);}
.page-intro h1 {font-size: clamp(50px,6vw,82px); margin: 30px 0 25px;}
.page-intro p {color: var(--muted); max-width: 590px; font-size: 18px; margin: 0;}
.service-page {padding-bottom: 75px;}
.wide-photo {margin: 0 5.5% 80px; height: 430px; position: relative;}
.wide-photo img {height: 100%; object-position: center 45%;}
.gallery-section {padding-top: 45px;}
.gallery-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 34px;}
#gallery-count {font-size: 14px; color: var(--muted);}
.gallery-grid {display: grid; grid-template-columns: repeat(2,1fr); gap: 26px;}
.gallery-card {position: relative; border: 0; padding: 0; background: var(--button-bg,#061944); color: #fff; text-align: left; overflow: hidden;}
.gallery-card>img {height: 365px; transition: transform .5s;}
.gallery-card:hover>img {transform: scale(1.025);}
.gallery-card-body {display: block; padding: 25px 28px;}
.gallery-card-body small {display: block; font-size: 12px; letter-spacing: 1.5px; color: #fff; text-transform: uppercase;}
.gallery-card-body strong {display: block; font-size: 23px; line-height: 1.3; margin-top: 8px;}
.expand {position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 44px; height: 44px; background: var(--button-bg,#061944); color: #fff; font-size: 28px;}
.gallery-disclaimer {font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); margin: 35px 0 0; padding-top: 20px;}
.about-layout {display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center;}
.about-photo {position: relative; height: 520px;}
.about-photo img {height: 100%;}
.about-copy p {color: var(--muted);}
.about-copy h2 {font-size: 42px;}
.contact-section {display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px;}
.contact-heading p {color: var(--muted);}
.contact-grid {display: grid; gap: 15px;}
.contact-grid button {background: var(--button-bg,#061944); border: 1px solid var(--line); padding: 28px; display: flex; align-items: center; gap: 24px; text-align: left; color: #fff; transition: filter .2s;}
.contact-grid button:hover {filter: brightness(.9);}
.contact-symbol {height: 52px; width: 52px; flex-shrink: 0; background: transparent; color: #fff; display: grid; place-items: center; font-size: 28px; font-weight: bold;}
.contact-grid h3 {font-size: 22px; margin-bottom: 7px;}
.contact-grid p {font-size: 14px; color: #fff; margin: 0; overflow-wrap: anywhere;}
.contact-action {margin-left: auto; color: #fff; font-weight: 700; font-size: 14px;}
footer {background: #fff; padding: 50px 5.5% 25px;}
.footer-top {display: flex; align-items: center; gap: 40px; padding-bottom: 45px;}
.footer-top p {color: var(--muted); font-size: 14px; margin: 0;}
.footer-cta {margin-left: auto; font-size: 22px; font-weight: bold; border-bottom: 1px solid var(--line);}
.footer-bottom {border-top: 1px solid var(--line); padding-top: 25px; display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; gap: 30px;}
.footer-bottom nav {display: flex; gap: 24px;}
.footer-bottom a:hover {color: var(--blue);}
#toast {position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background: var(--navy); color: white; padding: 20px 28px; max-width: 90%; width: max-content; box-shadow: 0 5px 35px #0003; z-index: 50; font-size: 14px;}
dialog {max-width: 1000px; width: 90vw; max-height: 90vh; padding: 25px; background: #fff; color: var(--ink); border: 0; overflow: auto;}
dialog::backdrop {background: #03102dee; backdrop-filter: blur(6px);}
dialog>img {max-height: 70vh; width: 100%; object-fit: contain;}
.close {position: sticky; top: 0; display: block; margin: 0 0 15px auto; background: var(--button-bg,#061944); color: #fff; border: 0; width: 40px; height: 40px; font-size: 28px;}
.lightbox-bottom {display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px;}
.lightbox-bottom p {margin: 0; font-size: 14px; text-align: center;}
.lightbox-bottom button {border: 1px solid var(--button-bg,#061944); background: var(--button-bg,#061944); color: #fff; font-size: 28px; width: 44px; height: 44px; flex-shrink: 0;}
.lightbox-bottom button:disabled {opacity: .3; cursor: default;}
.modal-open {overflow: hidden;}
@media (min-width:1650px) {
.hero-left {padding-left: 15%;}
.hero {min-height: 750px;}
}
@media (max-width:1100px) {
.hero {min-height: 630px;}
.hero-left {padding-top: 65px;}
.hero h1 {font-size: 62px;}
.hero-actions {gap: 15px;}
.hero-signature {flex-direction: column; gap: 7px;}
.brand-band span+span {padding-left: 25px;}
.service-grid article {padding: 26px;}
.service-grid h3 {font-size: 26px;}
.contact-section {gap: 35px;}
.about-copy h2 {font-size: 34px;}
}
@media (max-width:800px) {
.header-contact {margin-left: auto; min-height: 44px; padding: 11px 16px;}
.hero {grid-template-columns: 1fr; min-height: 0;}
.hero-left {padding: 52px 6% 30px;}
.hero-left .eyebrow {margin-bottom: 25px;}
.hero h1 {font-size: clamp(51px,9vw,72px); letter-spacing: -2.5px;}
.hero-left p {font-size: 17px;}
.hero-signature {flex-direction: row; margin-top: 45px;}
.hero-photo {min-height: 370px;}
.image-tag b {font-size: 80px;}
.brand-band {padding: 24px 6%; font-size: 12px; gap: 15px; flex-wrap: wrap;}
.brand-band span+span {padding-left: 15px;}
.brand-band span:last-child {display: none;}
.section {padding: 60px 6%;}
.section-heading {display: block; margin-bottom: 30px;}
.section-heading>.underlink {margin-top: 0;}
.service-grid {grid-template-columns: 1fr;}
.service-grid article {padding: 30px;}
.card-index {margin-bottom: 25px;}
.service-grid h3 br {display: none;}
.service-grid p {max-width: 500px;}
.gallery-feature {grid-template-columns: 1fr;}
.gallery-feature-copy {padding: 55px 6%;}
.gallery-feature-image {min-height: 340px;}
.about-teaser {grid-template-columns: 1fr; gap: 10px;}
.about-teaser>div+div {font-size: 18px;}
.cta {padding: 45px 6%; align-items: start; flex-direction: column; gap: 25px;}
.cta h2 {font-size: 36px;}
.page-intro {padding: 50px 6%;}
.page-intro h1 {font-size: clamp(48px,8vw,68px); letter-spacing: -2.5px;}
.page-intro p {font-size: 17px;}
.wide-photo {height: 330px; margin-bottom: 55px;}
.gallery-card>img {height: 280px;}
.gallery-card-body {padding: 20px;}
.gallery-card-body strong {font-size: 20px;}
.gallery-toolbar {flex-wrap: wrap;}
.about-layout {grid-template-columns: 1fr; gap: 40px;}
.about-photo {height: 380px;}
.contact-section {grid-template-columns: 1fr; gap: 25px;}
.footer-top {flex-wrap: wrap; gap: 25px; padding-bottom: 30px;}
.footer-cta {margin-left: 0; width: max-content; font-size: 20px;}
.footer-bottom {flex-wrap: wrap; gap: 18px;}
.footer-bottom nav {gap: 20px; flex-wrap: wrap;}
.lightbox-bottom p {font-size: 13px;}
dialog {padding: 16px;}
}
@media (max-width:500px) {
.hero-photo {min-height: 300px;}
.hero-signature {font-size: 11px;}
.brand-band span:nth-child(3) {display: none;}
.hero-actions {gap: 23px;}
.hero-actions>.button {padding: 16px 20px;}
.gallery-grid {grid-template-columns: 1fr;}
.gallery-card>img {height: 300px;}
.contact-grid button {padding: 22px; gap: 16px;}
.contact-action {display: none;}
.contact-grid p {font-size: 14px;}
.footer-top p {width: 100%;}
.image-tag {right: 25px; bottom: 28px;}
}
@media (prefers-reduced-motion:reduce) {
html {scroll-behavior: auto;}
* {transition: none !important;}
}
[data-text] {white-space: pre-line;}
.contact-symbol svg {width: 28px; height: 28px;}
.gallery-grid {grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px;}
.gallery-card.photo-only {aspect-ratio: 1; border: 0;}
.gallery-card.photo-only>img {height: 100%; width: 100%; object-fit: cover;}
.gallery-card.photo-only .expand {opacity: 0; transition: opacity .2s;}
.gallery-card.photo-only:hover .expand,.gallery-card.photo-only:focus-visible .expand {opacity: 1;}
.load-more-wrap {text-align: center; margin-top: 38px;}
#gallery-status {font-size: 14px; color: var(--muted); margin: 18px 0;}
.load-more-wrap button:disabled {opacity: .6; cursor: wait;}
@media (max-width:600px) {
.gallery-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px;}
.gallery-card.photo-only .expand {width: 30px; height: 30px; right: 10px; top: 10px; font-size: 23px; opacity: 1;}
.gallery-toolbar {align-items: start;}
}
.editing-preview [data-text],.editing-preview [data-image],.editing-preview [data-link] {cursor: pointer;}
.editing-preview [data-text]:hover,.editing-preview [data-image]:hover {outline: 2px dashed #ffb638; outline-offset: 4px;}
.editing-preview .edit-selected {outline: 3px solid #ffb638; outline-offset: 4px;}
/* One shared header definition for every page. */
:root { --header-bg:#45a1ee; --header-text:#000; --button-bg:#061944; --button-text:#fff; --logo-height:58px; }
body > header { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; height:84px; min-height:0; padding:0 5.5%; background:var(--header-bg); color:var(--header-text); border-bottom:1px solid rgba(0,0,0,.14); }
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; line-height:1.1; }
.brand strong { font-size:30px; font-weight:900; letter-spacing:-1.5px; }
.brand-dot { color:inherit; }
.brand > [data-brand=secondary] { font-size:13px; font-weight:700; letter-spacing:2px; }
.brand.has-logo > [data-brand] { display:none; }
.business-logo { display:block; width:auto; height:min(var(--logo-height),62px); max-width:85px; object-fit:contain; background:none; padding:0; }
.brand > .logo-name { font-size:19px; font-weight:800; letter-spacing:-.3px; white-space:nowrap; }
body > header nav { display:flex; align-items:center; margin-left:auto; gap:0; font-size:14px; font-weight:700; }
body > header nav a { display:flex; align-items:center; justify-content:center; position:relative; padding:9px 18px; min-height:36px; border-left:1px solid rgba(0,0,0,.22); }
body > header nav a:first-child { border-left:0; }
body > header nav a:hover { background:rgba(255,255,255,.28); }
body > header nav a[aria-current=page] { background:rgba(255,255,255,.34); }
body > header nav a[aria-current=page]:after { content:''; position:absolute; bottom:0; left:18px; right:18px; height:2px; background:currentColor; }
body > header .header-contact { min-height:42px; padding:12px 18px; font-size:14px; border:1px solid rgba(255,255,255,.45); white-space:nowrap; }
.menu { display:none; }
footer .business-logo { background:none; padding:0; max-width:82px; height:72px; }
footer .brand { gap:14px; }
footer .brand > .logo-name { font-size:20px; }
@media(max-width:1150px) {
 body > header { padding:0 4%; gap:15px; }
 body > header nav a { padding:9px 13px; }
 .brand > .logo-name { font-size:18px; }
}
@media(max-width:1000px) {
 body > header { height:76px; padding:0 5%; gap:14px; }
 .business-logo { height:54px; max-width:54px; }
 body > header .header-contact { margin-left:auto; }
 .menu { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:44px; height:44px; background:var(--button-bg,#061944); color:#fff; border:1px solid var(--button-bg,#061944); padding:9px; flex-shrink:0; }
 .menu span { display:block; width:23px; height:2px; background:currentColor; transition:transform .15s; }
 .menu[aria-expanded=true] span:first-child { transform:translateY(4px) rotate(45deg); }
 .menu[aria-expanded=true] span:last-child { transform:translateY(-4px) rotate(-45deg); }
 body > header nav { display:none; position:absolute; top:100%; left:0; right:0; margin:0; padding:8px 5% 14px; border-top:1px solid rgba(0,0,0,.2); border-bottom:1px solid rgba(0,0,0,.2); background:var(--header-bg); box-shadow:0 10px 22px rgba(6,25,68,.1); }
 body > header nav.open { display:flex; flex-direction:column; align-items:stretch; }
 body > header nav a { width:100%; justify-content:flex-start; padding:15px 12px; min-height:50px; border-left:0; border-bottom:1px solid rgba(0,0,0,.22); }
 body > header nav a:last-child { border-bottom:0; }
 body > header nav a[aria-current=page]:after { left:0; right:auto; top:12px; bottom:12px; width:3px; height:auto; }
}
@media(max-width:500px) {
 body > header { height:70px; gap:10px; }
 .business-logo { height:48px; max-width:48px; }
 .brand > .logo-name { font-size:17px; }
 body > header .header-contact { display:none; }
 .menu { margin-left:auto; }
 .hero h1 { font-size:clamp(44px,10vw,58px); line-height:1.1; }
 .hero-actions { flex-wrap:wrap; }
 .hero-signature { flex-wrap:wrap; gap:10px; }
 .contact-grid button { min-width:0; }
 .contact-grid button > div { min-width:0; }
 .footer-cta { overflow-wrap:anywhere; }
}
.hero > div, .section > div, .service-grid article, .contact-grid, .about-layout > div { min-width:0; }
body { overflow-wrap:break-word; }
h1 > [data-text] { color:var(--ink); }
:focus-visible { outline-offset:4px; }
.business-logo { filter:brightness(0); }

/* Shared control states; photo buttons retain their original images. */
.menu:hover,.close:hover,.lightbox-bottom button:not(:disabled):hover {filter:brightness(.9);}
.button:active,.menu:active,.close:active,.contact-grid button:active,.lightbox-bottom button:not(:disabled):active {filter:brightness(.8);}
