* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #222; font: 15px/1.65 "Open Sans", Arial, sans-serif; }
a { color: inherit; text-underline-offset: .25em; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #346fa7; outline-offset: 3px; }
header,.home-bar,footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem; padding: 1rem; }
header,.home-bar { border-block: 1px solid #e8e8e8; }
.brand { letter-spacing: .19em; font-size: 13px; text-decoration: none; }
.brand span { color: #666; font-weight: 300; }
nav { display: flex; justify-content: center; flex-wrap: wrap; }
nav a { padding: .55em 1em; text-decoration: none; font-size: .76rem; text-transform: uppercase; letter-spacing: .055em; }
nav a:hover,nav a[aria-current] { background: #eee; }
.hero { position: relative; max-width: 1200px; margin: auto; background: #e8e8e8; }
#featured { width: 100%; aspect-ratio: 1.92; display: block; object-fit: cover; }
h1 { text-align: center; margin: 2rem 1rem; font-size: clamp(1.5rem,4vw,2.3rem); font-weight: 400; letter-spacing: .15em; text-transform: uppercase; }
h1 small { font-size: .52em; color: #666; white-space: nowrap; }
.grid { width: min(94%, 1140px); margin: 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(.4rem,1.5vw,1rem); }
.cards a { text-align: center; text-decoration: none; }
.cards span { display: block; margin: .55rem; }
.pages,.back { margin: 2rem auto; text-align: center; }
.intro,.details { width: min(90%, 42rem); margin: 1.5rem auto; }
.intro { text-align: center; }
.eyebrow { letter-spacing: .15em; text-transform: uppercase; font-size: .75rem; }
.details h2 { font-weight: 400; }
.button { display: inline-block; padding: .65em 1em; border: 1px solid #222; text-decoration: none; }
footer { border-top: 1px solid #eee; margin-top: 2rem; color: #555; font-size: .85rem; }
dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 3rem clamp(3rem,8vw,7rem); border: 0; color: #fff; background: #151515; }
dialog[open] { display: grid; grid-template-rows: minmax(0,1fr) auto; place-items: center; }
dialog img { display: block; max-height: 100%; max-width: 100%; object-fit: contain; }
dialog p { margin: .3rem 0 0; }
dialog button { position: absolute; background: #333; color: #fff; border: 0; min-width: 44px; min-height: 44px; font-size: 1.6rem; }
dialog .close { top: .5rem; right: .5rem; }
dialog .prev { left: .25rem; top: calc(50% - 22px); }
dialog .next { right: .25rem; top: calc(50% - 22px); }
body:has(dialog[open]) { overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 640px) {
  #featured { aspect-ratio: 4/3; }
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cards { grid-template-columns: 1fr; }
  nav a { padding: .5em .7em; }
}

.hero-logo { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: clamp(145px, 30%, 350px); height: auto; pointer-events: none; }

.hero-fade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(0 0 0 / 55%); color: white; font: 26px/1 Arial, sans-serif; }
.slide-arrow:hover { background: rgb(0 0 0 / 75%); }
.slide-prev { left: clamp(.35rem, 2vw, 1.25rem); }
.slide-next { right: clamp(.35rem, 2vw, 1.25rem); }

.brand strong { font-weight: 750; }
.brand span { font-weight: 400; color: #626262; }
.home-bar { padding: 1.35rem 1rem; }
nav[aria-label="Main navigation"] a { min-height: 44px; display: inline-flex; align-items: center; letter-spacing: .13em; font-weight: 550; }
nav[aria-label="Main navigation"] a + a { border-left: 1px solid #dedede; }
nav a:hover { background: #f4f4f4; }
footer { flex-direction: column; gap: 0; margin-top: 3.5rem; padding: clamp(3.5rem,8vw,8rem) 1rem 1.2rem; }
body:has(.home-bar) footer { margin-top: 0; border-top: 0; }
.social { display: flex; gap: .45rem; margin-bottom: .4rem; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.social a:hover { background: #f1f1f1; }
.social img { width: 27px; height: 27px; object-fit: contain; opacity: .76; }
.footer-phone { color: #222; letter-spacing: .28em; font-size: 1rem; text-decoration: none; }
.footer-phone:hover { text-decoration: underline; }
.copyright { margin-top: clamp(2rem,5vw,4rem); font-size: .72rem; letter-spacing: .035em; color: #666; }
.inquiry { width: min(92%,44rem); margin: 2rem auto 0; padding: clamp(1rem,4vw,2rem); background: #fafafa; border: 1px solid #e6e6e6; border-radius: .5rem; }
.form-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 1.25rem; }
.form-fields label { font-weight: 600; min-width: 0; }
.form-fields label span { font-size: .75rem; color: #666; font-weight: 400; margin-left: .25em; }
.form-fields .wide { grid-column: 1 / -1; }
.form-fields input,.form-fields textarea { display: block; margin-top: .3rem; width: 100%; min-height: 44px; background: #fff; color: #222; border: 1px solid #c9c9c9; border-radius: .25rem; padding: .55rem .7rem; font: inherit; font-weight: 400; }
.form-fields textarea { resize: vertical; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 44px; padding: .65rem 1.1rem; border-radius: .25rem; background: #272727; color: #fff; font-weight: 600; }
.button:hover { background: #484848; }
.inquiry .button { margin-top: 1.25rem; }
.form-note { color: #555; font-size: .85rem; margin: .8rem 0 0; }
.contact-direct { text-align: center; margin: 1rem; }
@media (max-width: 640px) {
  nav[aria-label="Main navigation"] a + a { border-left: 0; }
  .form-fields { grid-template-columns: 1fr; }
}