.dropdown-panel a.current { color: var(--orange-deep); background: #faf7f1; }

.inner-hero { position: relative; min-height: 370px; padding: 90px var(--pad); display: flex; align-items: flex-end; isolation: isolate; color: #fff; background: var(--navy); overflow: hidden; }
.inner-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: var(--inner-image) center/cover; }
.inner-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3,15,26,.92), rgba(3,15,26,.42) 65%, rgba(3,15,26,.2)); }
.inner-hero > div { width: min(100%, var(--max)); margin: auto; }
.inner-hero p { display: flex; align-items: center; gap: 10px; color: #c7d0d6; font: 800 9px "Manrope", sans-serif; letter-spacing: .15em; }
.inner-hero p a:hover { color: var(--orange); }
.inner-hero p span { color: var(--orange); }
.inner-hero h1 { margin: 15px 0 0; font: 800 clamp(50px, 6vw, 86px)/.98 "Manrope", sans-serif; letter-spacing: -.065em; text-transform: uppercase; }

.service-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(55px, 7vw, 105px); align-items: start; }
.service-cover { width: 100%; height: 475px; margin-bottom: 48px; object-fit: cover; }
.service-article h2 { margin: 15px 0 14px; color: var(--navy); font: 800 clamp(41px, 5vw, 68px)/1 "Manrope", sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.service-article h3 { margin: 0 0 28px; color: var(--orange-deep); font: italic 600 clamp(22px, 2.5vw, 33px)/1.25 "Playfair Display", serif; }
.service-article > p:not(.section-label) { color: var(--muted); font-size: 13px; line-height: 1.9; }
.service-article blockquote { position: relative; margin: 40px 0 0; padding: 34px 38px 34px 78px; color: var(--navy); background: var(--cream); border-left: 4px solid var(--orange); font: italic 600 25px/1.4 "Playfair Display", serif; }
.service-article blockquote::before { content: "“"; position: absolute; left: 27px; top: 18px; color: var(--orange); font: 600 59px "Playfair Display", serif; }

.service-sidebar { position: sticky; top: 25px; }
.service-sidebar > div { margin-bottom: 30px; }
.sidebar-search, .other-services { padding: 29px; background: var(--cream); }
.service-sidebar h3 { margin: 0 0 19px; color: var(--navy); font: 800 17px "Manrope", sans-serif; }
.sidebar-search label { height: 48px; padding: 0 14px; display: flex; align-items: center; background: #fff; border: 1px solid #ded9d0; }
.sidebar-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 11px; }
.sidebar-search label span { color: var(--orange-deep); font-size: 20px; }
.other-services ul { margin: 0; padding: 0; list-style: none; }
.other-services li { border-top: 1px solid #d9d3ca; }
.other-services li:last-child { border-bottom: 1px solid #d9d3ca; }
.other-services a { padding: 14px 0; display: flex; align-items: center; gap: 11px; color: #45515a; font-size: 11px; transition: color .2s, padding .2s; }
.other-services a span { color: var(--orange-deep); }
.other-services a:hover { padding-left: 5px; color: var(--orange-deep); }
.question-box { padding: 36px 32px; color: #fff; background: linear-gradient(rgba(7,22,36,.9), rgba(7,22,36,.9)), url('../assets/portfolio-5.webp') center/cover; }
.question-box > p { margin: 0; color: var(--orange); font: 800 9px "Manrope", sans-serif; letter-spacing: .15em; }
.question-box h3 { margin: 15px 0 10px; color: #fff; font-size: 23px; line-height: 1.22; }
.question-box > span { display: block; color: #aab6bf; font-size: 10px; line-height: 1.65; }
.question-box > a { margin-top: 25px; padding: 14px 15px; display: block; color: #fff; background: var(--orange); text-align: center; font: 800 12px "Manrope", sans-serif; }

.inner-contact { padding: 75px var(--pad); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; color: #fff; background: var(--orange); }
.inner-contact .section-label { color: var(--navy); }
.inner-contact h2 { margin: 13px 0 18px; font: 800 clamp(38px, 4.3vw, 61px)/1.02 "Manrope", sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.inner-contact > div > p:last-child { max-width: 550px; color: rgba(255,255,255,.84); font-size: 11px; line-height: 1.7; }
.inner-contact-form { padding: 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; background: rgba(255,255,255,.12); }
.inner-contact-form label span { margin-bottom: 7px; display: block; font: 800 8px "Manrope", sans-serif; letter-spacing: .1em; }
.inner-contact-form input { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.65); outline: 0; color: #fff; background: transparent; }
.inner-contact-form button { grid-column: 1/-1; min-height: 51px; padding: 0 18px; border: 0; display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--navy); font: 800 9px "Manrope", sans-serif; letter-spacing: .09em; }
.inner-contact-form button span { color: var(--orange); font-size: 17px; }
.inner-contact-form .form-result { grid-column: 1/-1; margin: 0; font-size: 10px; }
.inner-contact-form .form-result a { color: var(--navy); font-weight: 800; }

.services-listing > header { max-width: 850px; margin-bottom: 55px; }
.services-listing > header h2 { margin: 16px 0 0; color: var(--navy); font: 800 clamp(40px, 4.5vw, 64px)/1.05 "Manrope", sans-serif; letter-spacing: -.06em; }
.listing-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.listing-service-grid article { background: #fff; box-shadow: 0 15px 45px rgba(7,22,36,.08); }
.listing-service-grid article > a { height: 100%; display: flex; flex-direction: column; }
.listing-service-image { position: relative; height: 260px; display: block; overflow: hidden; }
.listing-service-image img { height: 100%; object-fit: cover; transition: transform .6s; }
.listing-service-image i { position: absolute; left: 18px; top: 18px; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--orange); font: normal 800 10px "Manrope", sans-serif; }
.listing-service-grid article:hover img { transform: scale(1.055); }
.listing-service-copy { padding: 29px; display: flex; flex: 1; flex-direction: column; }
.listing-service-copy h3 { margin: 0 0 12px; color: var(--navy); font: 800 22px "Manrope", sans-serif; }
.listing-service-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.listing-service-copy b { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; color: var(--navy); font: 800 8px "Manrope", sans-serif; letter-spacing: .1em; }
.listing-service-copy em { color: var(--orange-deep); font: normal 17px "DM Sans", sans-serif; }

.portfolio-facts { margin: 30px 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.portfolio-facts span { padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--navy); font: 700 10px "Manrope", sans-serif; }
.portfolio-listing-grid .listing-service-image i { width: auto; padding: 0 12px; }
.portfolio-listing-grid small { margin-bottom: 10px; color: var(--orange-deep); font: 800 8px "Manrope", sans-serif; letter-spacing: .12em; }

.about-page-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: end; }
.about-page-intro h2, .contact-details h2, .contact-page-form h2 { margin: 15px 0 0; color: var(--navy); font: 800 clamp(42px, 5vw, 69px)/1.02 "Manrope", sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.about-page-intro > div:last-child p { color: var(--muted); font-size: 12px; line-height: 1.85; }
.about-page-image { position: relative; height: 565px; margin: 75px 0; }
.about-page-image img { height: 100%; object-fit: cover; }
.about-page-image span { position: absolute; right: 0; bottom: 0; padding: 27px 35px; display: flex; align-items: center; gap: 15px; color: #fff; background: var(--orange); font: 800 9px "Manrope", sans-serif; letter-spacing: .12em; }
.about-page-image strong { font-size: 39px; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
.mission-grid article { padding: 43px; background: var(--cream); }
.mission-grid h3 { margin: 15px 0; color: var(--navy); font: 800 27px/1.2 "Manrope", sans-serif; }
.mission-grid article > p:last-child { color: var(--muted); font-size: 12px; line-height: 1.85; }

.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(55px, 7vw, 105px); align-items: start; }
.blog-card { margin-bottom: 35px; background: #fff; box-shadow: 0 14px 42px rgba(7,22,36,.08); }
.blog-card > a { display: grid; grid-template-columns: 330px 1fr; }
.blog-card img { height: 100%; min-height: 300px; object-fit: cover; }
.blog-card > a > span { padding: 38px; align-self: center; }
.blog-card small { color: var(--orange-deep); font: 800 8px "Manrope", sans-serif; letter-spacing: .11em; }
.blog-card h2 { margin: 14px 0; color: var(--navy); font: 800 27px/1.15 "Manrope", sans-serif; }
.blog-card p { color: var(--muted); font-size: 11px; line-height: 1.75; }
.blog-card b { margin-top: 20px; display: flex; justify-content: space-between; color: var(--navy); font: 800 8px "Manrope", sans-serif; letter-spacing: .1em; }
.blog-card em { color: var(--orange); font: normal 17px "DM Sans", sans-serif; }

.contact-page { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(60px, 8vw, 125px); }
.contact-details > p:not(.section-label) { color: var(--muted); font-size: 12px; line-height: 1.8; }
.contact-info-row { padding: 23px 0; display: grid; grid-template-columns: 45px 1fr; border-top: 1px solid var(--line); }
.contact-info-row:last-child { border-bottom: 1px solid var(--line); }
.contact-info-row > span { color: var(--orange-deep); font: 800 9px "Manrope", sans-serif; }
.contact-info-row small { margin-bottom: 7px; display: block; color: var(--muted); font: 800 8px "Manrope", sans-serif; letter-spacing: .11em; }
.contact-info-row p, .contact-info-row a { margin: 0; color: var(--navy); font: 700 12px/1.6 "Manrope", sans-serif; }
.contact-page-form { padding: 45px; background: var(--cream); }
.contact-page-form h2 { margin-bottom: 30px; font-size: clamp(36px, 4vw, 53px); }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-page-form label span { margin-bottom: 7px; display: block; color: var(--muted); font: 800 8px "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.contact-page-form input, .contact-page-form select, .contact-page-form textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #bbb8b0; outline: 0; background: transparent; resize: vertical; }
.contact-page-form input:focus, .contact-page-form select:focus, .contact-page-form textarea:focus { border-color: var(--orange); }
.message-field { margin-top: 24px; display: block; }
.contact-page-form > button { width: 180px; height: 52px; margin-top: 30px; padding: 0 18px; border: 0; display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--orange); font: 800 9px "Manrope", sans-serif; letter-spacing: .1em; }
.contact-page-form > button span { font-size: 17px; }
.contact-page-form .form-result { color: var(--muted); font-size: 10px; }
.contact-page-form .form-result a { color: var(--orange-deep); font-weight: 800; }
.map-frame { height: 430px; background: var(--navy); }
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.95); }

@media (max-width: 1050px) {
  .service-detail-layout { grid-template-columns: 1fr 285px; gap: 50px; }
  .listing-service-grid { grid-template-columns: 1fr 1fr; }
  .blog-card > a { grid-template-columns: 280px 1fr; }
}

@media (max-width: 820px) {
  .inner-hero { min-height: 300px; padding-top: 65px; padding-bottom: 60px; }
  .service-detail-layout { display: block; }
  .service-cover { height: 360px; }
  .service-sidebar { position: static; margin-top: 55px; }
  .inner-contact { grid-template-columns: 1fr; gap: 35px; }
  .listing-service-grid { grid-template-columns: 1fr; }
  .listing-service-image { height: 320px; }
  .about-page-intro, .mission-grid, .contact-page { grid-template-columns: 1fr; }
  .about-page-intro { gap: 35px; }
  .blog-layout { display: block; }
  .blog-layout .service-sidebar { margin-top: 55px; }
}

@media (max-width: 520px) {
  .inner-hero { min-height: 255px; }
  .inner-hero h1 { font-size: 43px; }
  .service-cover { height: 270px; margin-bottom: 35px; }
  .service-article blockquote { padding: 28px 25px 28px 55px; font-size: 21px; }
  .service-article blockquote::before { left: 17px; }
  .inner-contact { padding-top: 60px; padding-bottom: 60px; }
  .inner-contact-form { grid-template-columns: 1fr; padding: 25px; }
  .listing-service-image { height: 250px; }
  .portfolio-facts { grid-template-columns: 1fr; }
  .about-page-image { height: 390px; margin: 55px 0; }
  .about-page-image span { padding: 20px; }
  .mission-grid article { padding: 30px; }
  .blog-card > a { display: block; }
  .blog-card img { min-height: 0; height: 250px; }
  .blog-card > a > span { padding: 27px; display: block; }
  .contact-page-form { padding: 28px; }
  .contact-fields { grid-template-columns: 1fr; }
}