/* =========================================================
   CONTACT US PAGE
   Scope: contact_us.php
   ========================================================= */
:root {
  --contact-bg: #f5f1eb;
  --contact-paper: #fcfaf7;
  --contact-ink: #25211d;
  --contact-muted: #70675e;
  --contact-gold: #a9845d;
  --contact-gold-light: #dfbf9a;
  --contact-dark: #201d19;
  --contact-line: rgba(37, 33, 29, .16);
  --contact-serif: "Playfair Display", Georgia, serif;
  --contact-container: 1380px;
}

.contact-page,
.contact-page * { box-sizing: border-box; }
.contact-page { background: var(--contact-bg); color: var(--contact-ink); }
.contact-page main { overflow: clip; }
.contact-page img { display: block; max-width: 100%; }
.contact-page a { color: inherit; text-decoration: none; }
.contact-page .content-width { width: min(calc(100% - 64px), var(--max, var(--contact-container))); margin-inline: auto; }
.contact-kicker { margin: 0 0 18px; color: var(--contact-gold); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; }

.contact-hero { position: relative; display: flex; min-height: max(720px, 100svh); align-items: flex-end; overflow: hidden; background: var(--contact-dark); color: #fff; isolation: isolate; }
.contact-hero-media { position: absolute; inset: 0; z-index: 0; }
.contact-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: contactHeroImage 1.2s cubic-bezier(.2,.75,.2,1) both; }
.contact-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,17,14,.9) 0%, rgba(20,17,14,.66) 35%, rgba(20,17,14,.25) 70%, rgba(20,17,14,.1) 100%), linear-gradient(0deg, rgba(18,15,13,.65), transparent 56%, rgba(18,15,13,.25)); }
.contact-hero-content { position: relative; z-index: 2; display: flex; min-height: max(720px, 100svh); align-items: flex-end; justify-content: space-between; gap: 48px; padding-top: 160px; padding-bottom: clamp(68px, 8vh, 105px); }
.contact-hero-copy { width: min(100%, 940px); animation: contactHeroCopy .85s .12s cubic-bezier(.2,.75,.2,1) both; }
.contact-hero .contact-kicker { color: var(--contact-gold-light); }
.contact-hero h1 { margin: 0; font: 400 clamp(56px, 6vw, 104px)/.94 var(--contact-serif); letter-spacing: -.055em; text-wrap: balance; }
.contact-hero h1 span,
.contact-hero h1 em { display: block; }
.contact-hero h1 em { margin-top: 7px; color: var(--contact-gold-light); font-weight: 400; font-style: italic; }
.contact-hero-copy > p:last-child { max-width: 650px; margin: 28px 0 0; color: rgba(255,255,255,.8); font-size: clamp(14px, 1.08vw, 17px); line-height: 1.8; }
.contact-hero-badge { width: 220px; flex: 0 0 auto; padding: 19px 21px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(26,22,19,.38); backdrop-filter: blur(14px); text-align: center; }
.contact-hero-badge span { display: block; font-family: var(--contact-serif); font-size: 22px; }
.contact-hero-badge small { display: block; margin-top: 4px; color: rgba(255,255,255,.67); font-size: 8px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }

.contact-intro { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(360px,.8fr); gap: clamp(55px, 9vw, 150px); align-items: end; padding-top: clamp(95px, 10vw, 150px); }
.contact-intro h2,
.contact-map-copy h2 { margin: 0; font: 400 clamp(42px, 5vw, 76px)/1 var(--contact-serif); letter-spacing: -.048em; text-wrap: balance; }
.contact-intro-copy > p { margin: 0; color: var(--contact-muted); font-size: 14px; line-height: 1.9; }

.contact-directory { padding-top: clamp(90px, 9vw, 138px); padding-bottom: clamp(100px, 10vw, 155px); }
.contact-directory > h2 { margin: 0 0 clamp(72px, 8vw, 118px); font-size: clamp(30px, 3vw, 48px); font-weight: 700; line-height: 1; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.contact-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(70px, 10vw, 165px); align-items: start; }
.contact-directory-column { display: flex; min-width: 0; flex-direction: column; gap: clamp(46px, 5.2vw, 78px); }
.contact-directory-item { position: relative; min-width: 0; padding: 0; }
.contact-directory-item h3 { margin: 0 0 22px; font-size: clamp(16px, 1.25vw, 21px); font-weight: 800; line-height: 1.25; letter-spacing: .025em; text-transform: uppercase; }
.contact-directory-item p,
.contact-directory-item a { display: inline-block; max-width: 620px; margin: 0; color: #302a25; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.65; letter-spacing: .04em; }
.contact-directory-item a { transition: color .25s ease, transform .25s ease; }
.contact-directory-item a:hover { color: var(--contact-gold); transform: translateX(4px); }
.contact-directory-item::before { content: ""; position: absolute; top: 2px; left: -18px; width: 5px; height: 5px; border-radius: 50%; background: var(--contact-gold); opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .25s ease; }
.contact-directory-item:hover::before { opacity: 1; transform: scale(1); }

.contact-map-section { padding: clamp(90px, 9vw, 145px) 0; background: var(--contact-paper); }
.contact-map-wrap { display: grid; grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.contact-map-copy > p:not(.contact-kicker) { max-width: 560px; margin: 26px 0 0; color: var(--contact-muted); font-size: 14px; line-height: 1.88; }
.contact-map-actions { margin-top: 32px; }
.contact-button { display: inline-flex; align-items: center; gap: 11px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--contact-gold); color: #fff !important; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; transition: transform .28s ease, background .28s ease; }
.contact-button:hover { transform: translateY(-4px); background: var(--contact-dark); }
.contact-map-frame { min-height: 610px; overflow: hidden; border-radius: 18px; background: #ddd4c8; box-shadow: 0 28px 70px rgba(40,32,26,.14); }
.contact-map-frame iframe { display: block; width: 100%; height: 610px; border: 0; filter: saturate(.72) contrast(.94); }

.contact-page a:focus-visible { outline: 2px solid var(--contact-gold); outline-offset: 4px; }
@keyframes contactHeroImage { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } }
@keyframes contactHeroCopy { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1120px) {
  .contact-map-wrap { grid-template-columns: 1fr 1.25fr; }
  .contact-hero-badge { display: none; }
}

@media (max-width: 820px) {
  .contact-page .content-width { width: min(calc(100% - 40px), var(--max, var(--contact-container))); }
  .contact-hero,
  .contact-hero-content { min-height: 780px; }
  .contact-hero-content { padding-top: 145px; padding-bottom: 64px; }
  .contact-hero-overlay { background: linear-gradient(90deg, rgba(20,17,14,.83), rgba(20,17,14,.35)), linear-gradient(0deg, rgba(18,15,13,.76), transparent 62%, rgba(18,15,13,.3)); }
  .contact-hero h1 { font-size: clamp(50px, 10vw, 72px); }
  .contact-intro,
  .contact-map-wrap { grid-template-columns: 1fr; }
  .contact-intro { gap: 30px; padding-top: 90px; }
  .contact-directory-grid { gap: 45px; }
  .contact-directory-column { gap: 50px; }
  .contact-map-frame { min-height: 500px; }
  .contact-map-frame iframe { height: 500px; }
}

@media (max-width: 560px) {
  .contact-page .content-width { width: calc(100% - 28px); }
  .contact-hero,
  .contact-hero-content { min-height: 700px; }
  .contact-hero-content { padding-top: 130px; padding-bottom: 48px; }
  .contact-hero h1 { font-size: 47px; line-height: .98; }
  .contact-hero-copy > p:last-child { margin-top: 22px; font-size: 13px; line-height: 1.72; }
  .contact-intro h2,
  .contact-map-copy h2 { font-size: 39px; }
  .contact-directory { padding-top: 78px; padding-bottom: 82px; }
  .contact-directory > h2 { margin-bottom: 56px; font-size: 29px; }
  .contact-directory-grid { grid-template-columns: 1fr; gap: 42px; }
  .contact-directory-column { gap: 36px; }
  .contact-directory-column + .contact-directory-column { padding-top: 6px; }
  .contact-directory-item { padding: 0 0 30px; border-bottom: 1px solid var(--contact-line); }
  .contact-directory-column:last-child .contact-directory-item:last-child { padding-bottom: 0; border-bottom: 0; }
  .contact-directory-item h3 { margin-bottom: 14px; font-size: 16px; }
  .contact-directory-item p,
  .contact-directory-item a { font-size: 14px; }
  .contact-map-section { padding: 78px 0; }
  .contact-map-frame { min-height: 390px; border-radius: 12px; }
  .contact-map-frame iframe { height: 390px; }
  .contact-button { width: 100%; justify-content: center; }
}

@media (hover: none) {
  .contact-directory-item a:hover { transform: none; }
  .contact-directory-item::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero-media img,
  .contact-hero-copy { animation: none; }
  .contact-directory-item a,
  .contact-button { transition: none; }
}