.contact { padding-block: var(--s-5) var(--s-8); }
.contact__breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
.contact-hero { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--glass-2); border-radius: var(--r-lg); overflow: hidden; }
.contact-hero__copy { padding: clamp(1.5rem, 4vw, 4rem); align-self: center; }
.contact-hero h1 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); max-width: 17ch; margin-block: var(--s-4); text-wrap: balance; }
.contact__lede { max-width: 45ch; color: var(--forest-2); line-height: 1.8; margin-bottom: var(--s-5); }
.contact-hero__photo { position: relative; min-height: 300px; }
.contact-hero__photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; }
.contact-hero__photo figcaption { position: absolute; bottom: var(--s-4); left: var(--s-4); color: var(--paper); background: var(--forest); padding: var(--s-2) var(--s-3); font: 0.7rem var(--font-mono); letter-spacing: 0.08em; }
.contact-product { display: flex; align-items: center; gap: var(--s-5); border: 1px solid var(--hairline); background: var(--paper); padding: var(--s-5); border-radius: var(--r-md); margin-top: var(--s-6); }
.contact-product img { flex: 0 0 88px; object-fit: cover; border-radius: var(--r-sm); }
.contact-product h2 { font-size: var(--text-lg); margin-block: var(--s-2); }
.contact-product p:last-child { color: var(--forest-2); font-size: var(--text-sm); }
.contact-product > .tlink { margin-left: auto; flex-shrink: 0; }
.contact-channels { padding-block: var(--s-8); }
.contact__section-heading { max-width: 650px; margin-bottom: var(--s-6); }
.contact h2 { text-wrap: balance; }
.contact__section-heading h2, .contact-visit h2, .contact-help h2 { margin-block: var(--s-3); }
.contact__section-heading > p:last-child, .contact-visit__info > p:not(.label), .contact-help p:last-child { color: var(--forest-2); line-height: 1.8; }
.contact-channels__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--paper); }
.contact-card--messenger { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.contact-card__icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--glass-2); border-radius: 50%; font-size: 1.3rem; margin-bottom: var(--s-5); }
.contact-card--messenger .contact-card__icon { color: var(--forest); }
.contact-card h3 { font-size: var(--text-lg); margin-block: var(--s-3); }
.contact-card--messenger h3, .contact-card--messenger .label { color: inherit; }
.contact-card > p:not(.label) { line-height: 1.8; font-size: var(--text-sm); margin-bottom: var(--s-5); }
.contact-card > .btn, .contact-card > .contact-card__detail, .contact-card > .contact-card__pending { margin-top: auto; }
.contact-card__detail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-top: var(--s-3); overflow-wrap: anywhere; font-size: var(--text-sm); }
.contact-card .contact-card__pending { padding-top: var(--s-3); margin-bottom: 0; opacity: 0.85; }
.contact__sample { display: inline-block; background: var(--glass-2); color: var(--forest-2); padding: 2px 7px; border-radius: var(--r-sm); font-size: 0.7rem; font-weight: 400; }
.contact__placeholder-note { color: var(--forest-3); font-size: var(--text-xs); margin-top: var(--s-4); line-height: 1.7; }
.contact-visit { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 5vw, 5rem); padding-block: var(--s-7) var(--s-8); border-top: 1px solid var(--hairline); scroll-margin-top: 100px; }
.contact-visit__info { min-width: 0; align-self: center; }
.contact-visit__details { margin-block: var(--s-5); }
.contact-visit__details > div { padding-block: var(--s-4); border-bottom: 1px solid var(--hairline-soft); }
.contact-visit__details dt { color: var(--forest-3); font-size: var(--text-xs); margin-bottom: var(--s-2); }
.contact-visit__details dd { line-height: 1.8; overflow-wrap: anywhere; }
.contact-visit__details a { text-decoration: underline; text-underline-offset: 4px; }
.contact-map { align-self: stretch; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--glass-2); }
.contact-map iframe { display: block; width: 100%; min-height: 360px; flex: 1; border: 0; }
.contact-map__footer { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--paper); border-top: 1px solid var(--hairline); font-size: var(--text-sm); }
.contact-help { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); padding: clamp(1.5rem, 3vw, 3rem); border-radius: var(--r-lg); background: var(--glass-2); }
.contact-help > div { max-width: 650px; }
.contact-help .btn { flex-shrink: 0; }
.contact a:focus-visible { outline: 3px solid var(--ochre); outline-offset: 5px; }
@media (max-width: 1000px) {
  .contact-channels__grid { gap: var(--s-3); }
  .contact-visit { gap: var(--s-6); }
}
@media (max-width: 760px) {
  .contact-hero, .contact-visit, .contact-channels__grid { grid-template-columns: minmax(0, 1fr); }
  .contact-hero h1 { max-width: 100%; }
  .contact-hero__photo { min-height: 230px; }
  .contact-channels { padding-block: var(--s-7); }
  .contact-card { padding: var(--s-5); }
  .contact-card__icon { margin-bottom: var(--s-4); }
  .contact-help { align-items: flex-start; flex-direction: column; gap: var(--s-5); }
  .contact-product { flex-wrap: wrap; gap: var(--s-4); }
  .contact-product > div { flex: 1; min-width: 160px; }
  .contact-product > .tlink { margin-left: 0; }
  .contact-map iframe { height: 300px; min-height: 300px; flex: none; }
}
