/*
 * Contact page (Phase G) — breadcrumbs (.breadcrumbs), Hero (.page-hero,
 * .category-hero-art) and .actions/.button/.text-link are reused from
 * product-pages.css/components.css — nothing here duplicates those
 * selectors. The Hero reverted to that same shared dark .page-hero pattern
 * (matching About/History/Foundation) after a brief light-Hero redesign;
 * since .page-hero/.category-hero-art already live in product-pages.css,
 * which this page already loads, reusing them directly needed no CSS here
 * at all — unlike the page-scoped-duplication precedent used for .contact/
 * .contact-channels in about-page.css/foundation-page.css (that precedent
 * exists only because .contact is *also* reused with a different, lighter
 * treatment on the product-template pages; .page-hero has no such
 * conflicting reuse anywhere, so straight reuse is the correct approach here).
 *
 * Card treatment: the site has no single dedicated ".card" component.
 * The bordered-box style used here for the three info cards mirrors the
 * existing pattern already used for small content cards elsewhere
 * (.expertise-grid article / .pillars-grid article in about-page.css /
 * foundation-page.css: padding + 1px var(--color-line) border, no shadow).
 * The form card additionally uses the existing --shadow-soft token (already
 * defined in variables.css, currently used for decorative machine mockups
 * in pages.css) to read as the visually "elevated" primary action on the
 * page, exactly as the approved reference calls for — no new shadow value
 * was invented.
 */

.contact-columns{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:var(--space-4);
background:var(--color-mist)
}

.contact-info{
display:flex;
flex-direction:column;
gap:var(--space-3)
}
.info-card{
padding:26px;
background:#fff;
border:1px solid var(--color-line);
border-radius:var(--radius-sm)
}
.info-icon{
color:var(--color-teal-dark)
}
.info-card h3{
margin-top:16px;
font-size:18px
}
.info-card p{
margin-top:8px;
color:var(--color-muted);
font-size:14px
}
.info-card p a{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--color-text)
}
.info-card p a:hover{
color:var(--color-teal-dark)
}
.info-icon-sm{
display:inline-flex;
flex-shrink:0;
color:var(--color-teal-dark)
}

.contact-form-card{
padding:34px;
background:#fff;
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
box-shadow:var(--shadow-soft)
}

/* Contact form — field/label/input treatment mirrors the existing
   .field/.field label/.filter-input pattern already established in
   css/products-overview.css (not loaded on this page), so the form reads as
   the same design system rather than a one-off. */
.contact-form{
display:grid;
margin-top:var(--space-4);
gap:var(--space-3)
}
.field{
display:flex;
flex-direction:column;
gap:8px
}
.field label{
color:var(--color-muted);
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.4px;
text-transform:uppercase
}
.field-optional{
text-transform:none;
letter-spacing:0;
font-weight:500
}
.form-input{
padding:14px 16px;
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
background:var(--color-paper);
color:var(--color-text);
font:var(--text-base) var(--font-sans)
}
.form-textarea{
resize:vertical
}
.form-input:focus-visible{
outline:3px solid var(--color-teal-dark);
outline-offset:2px
}
.contact-form .button{
justify-self:start
}
/* Honeypot: visually hidden and out of the tab order/accessibility tree
   (see the HTML comment above it), not display:none — some spam bots skip
   fields hidden that way, which defeats the point. */
.hp-field{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
left:-9999px
}

/* Find Us on Map — full-width section below the two-column layout. A fixed
   iframe height (rather than a padding-bottom aspect-ratio box) is enough
   here: unlike a video, the map doesn't need a preserved aspect ratio, just
   a readable, responsive area. */
.contact-map-section>p{
margin-top:12px;
color:var(--color-muted)
}
.contact-map-section .text-link{
display:inline-block;
margin-top:16px
}
.map-embed{
width:100%;
height:420px;
margin-top:var(--space-4);
overflow:hidden;
border-radius:var(--radius-sm)
}
.map-embed iframe{
display:block;
width:100%;
height:100%;
border:0
}

@media (max-width:780px){
.contact-columns{
grid-template-columns:1fr
}
.contact-form .button{
justify-self:stretch
}
.map-embed{
height:320px
}
}