/* Contact page.
 *
 * Ported from Work/Website1/components/sections/Contact.module.css.
 *
 * Every class carries a `contact-` prefix, for the reason recorded at the top
 * of dienst.css: CSS Modules hashed these names per file, so `.hero`, `.card`
 * and `.form` were safe there and are far too generic as global CSS. The
 * declarations are otherwise unchanged, so this file can be diffed against the
 * module to prove the port.
 */

.contact-page { background: var(--paper); }
.contact-breadcrumbs { align-items: center; color: var(--ink-muted); display: flex; flex-wrap: wrap; font-size: .78rem; gap: .55rem; margin: 0 auto; max-width: 1300px; padding: 1.2rem 4.5vw 0; }
.contact-breadcrumbs a:hover { color: var(--green-deep); }
.contact-breadcrumbs span:last-child { color: var(--ink); font-weight: 650; }

.contact-hero { margin: 0 auto; max-width: 1300px; padding: clamp(2.5rem,5vw,4.5rem) 4.5vw clamp(2rem,4vw,3rem); }
.contact-eyebrow,.contact-kicker { color: var(--green-deep); font-size: .78rem; font-weight: 750; letter-spacing: .12em; margin: 0 0 .7rem; text-transform: uppercase; }
.contact-hero h1 { font-size: clamp(2.2rem,5vw,4rem); font-weight: 550; letter-spacing: -.05em; line-height: 1.04; margin: 0; max-width: 15ch; }
.contact-rule { background: #83c12d; display: block; height: 4px; margin: 1.4rem 0; width: 74px; }
.contact-lead { color: var(--ink-muted); font-size: clamp(1rem,1.3vw,1.14rem); line-height: 1.62; margin: 0; max-width: 60ch; }

.contact-channels { display: grid; gap: 1rem; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 2.6rem auto 0; max-width: 1300px; }
.contact-channels a { align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: .8rem; display: grid; gap: .2rem 1rem; grid-template-columns: auto 1fr; padding: 1.4rem; transition: border-color 180ms ease,transform 180ms ease; }
.contact-channels a:hover { border-color: var(--green); transform: translateY(-2px); }
.contact-channels svg { color: var(--green-deep); grid-row: span 3; height: 22px; width: 22px; }
.contact-channels small { color: var(--ink-muted); font-size: .76rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.contact-channels strong { font-size: 1.1rem; font-weight: 680; letter-spacing: -.02em; }
.contact-channels p { color: var(--ink-muted); font-size: .88rem; line-height: 1.5; margin: .35rem 0 0; }

.contact-body { background: var(--mist); border-top: 1px solid var(--line); margin-top: clamp(2.5rem,5vw,4rem); padding: clamp(3rem,6vw,5.5rem) 4.5vw; }
.contact-body-inner { display: grid; gap: clamp(2rem,4vw,4rem); grid-template-columns: minmax(0,1.25fr) minmax(300px,.85fr); margin: 0 auto; max-width: 1300px; }
.contact-form-panel h2,.contact-details h2,.contact-services h2 { font-size: clamp(1.6rem,2.8vw,2.4rem); font-weight: 560; letter-spacing: -.04em; line-height: 1.08; margin: 0 0 .9rem; }
.contact-form-panel > p { color: var(--ink-muted); line-height: 1.6; margin: 0 0 1.8rem; max-width: 55ch; }

.contact-form { background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; display: grid; gap: 1.1rem; padding: clamp(1.4rem,2.5vw,2.2rem); }
.contact-field { display: grid; gap: .4rem; }
.contact-field-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
.contact-form label { font-size: .84rem; font-weight: 660; }
.contact-form label span { color: var(--ink-muted); font-weight: 500; }
.contact-form input,.contact-form select,.contact-form textarea { background: var(--paper); border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); font: inherit; font-size: .95rem; padding: .7rem .8rem; width: 100%; }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible { border-color: var(--green); }
.contact-consent { align-items: flex-start; display: grid; gap: .7rem; grid-template-columns: auto 1fr; }
.contact-consent input { height: 18px; margin-top: .15rem; width: 18px; }
.contact-consent label { color: var(--ink-muted); font-size: .86rem; font-weight: 500; line-height: 1.5; }
.contact-submit { align-items: center; background: var(--ink); border: 0; border-radius: 999px; color: white; cursor: pointer; display: inline-flex; font: inherit; font-size: .93rem; font-weight: 680; gap: .7rem; justify-content: center; justify-self: start; min-height: 52px; padding: .8rem 1.6rem; }
.contact-submit:hover { background: #1c3329; }
.contact-form-note { color: var(--ink-muted); font-size: .82rem; line-height: 1.55; margin: 0; }
.contact-form-note a { color: var(--green-deep); font-weight: 650; }

.contact-details { align-self: start; display: grid; gap: 1rem; position: sticky; top: 2rem; }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; }
.contact-card h3 { align-items: center; display: flex; font-size: .78rem; font-weight: 750; gap: .5rem; letter-spacing: .1em; margin: 0 0 .9rem; text-transform: uppercase; }
.contact-card h3 svg { color: var(--green-deep); height: 17px; width: 17px; }
.contact-card address { font-size: 1rem; font-style: normal; line-height: 1.65; }
.contact-card address a { color: var(--green-deep); font-weight: 650; }
.contact-meta { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.contact-meta li { color: var(--ink-muted); display: flex; font-size: .9rem; gap: .5rem; justify-content: space-between; }
.contact-meta span { color: var(--ink); font-weight: 650; }

.contact-services { margin: 0 auto; max-width: 1300px; padding: clamp(3rem,6vw,5rem) 4.5vw; }
.contact-services > p { color: var(--ink-muted); line-height: 1.6; margin: 0 0 2rem; max-width: 60ch; }
.contact-service-links { border-top: 1px solid var(--line); display: grid; }
.contact-service-links a { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: auto 1fr auto; min-height: 82px; padding: 1rem .2rem; transition: color 180ms ease,padding 180ms ease; }
.contact-service-links a:hover { color: var(--green-deep); padding-left: .7rem; }
.contact-service-links a > svg:first-child { color: var(--green-deep); }
.contact-service-links a > svg:last-child { height: 19px; width: 19px; }
.contact-service-links strong { display: block; font-size: 1rem; font-weight: 680; }
.contact-service-links small { color: var(--ink-muted); display: block; font-size: .78rem; margin-top: .2rem; }

/* Form outcome and validation.
 *
 * Not in the CSS Module this file was ported from: the React build had no form
 * backend, so it had nothing to report. These classes belong to the handler in
 * inc/contact-form.php (D-027) and are the only part of this file that is not a
 * copy of Contact.module.css.
 *
 * The honeypot is hidden with position/opacity rather than display:none or
 * hidden - a bot that skips fields their own CSS hides is a well-known trick,
 * and this one is meant to be filled in. */
.contact-honeypot { height: 0; left: -9999px; opacity: 0; overflow: hidden; position: absolute; width: 0; }
.contact-form-alert { background: #fdf2f2; border: 1px solid #e4b8b8; border-radius: .6rem; color: #7a2222; display: grid; font-size: .9rem; gap: .35rem; line-height: 1.55; padding: 1rem 1.1rem; }
.contact-form-alert strong { font-weight: 700; }
.contact-form-alert p { margin: 0; }
.contact-field-error { color: #a32a2a; font-size: .82rem; line-height: 1.45; margin: 0; }
.contact-consent .contact-field-error { grid-column: 2; }
.contact-form input[aria-invalid="true"],.contact-form textarea[aria-invalid="true"] { border-color: #c05a5a; }

.contact-form-success { align-items: start; background: var(--paper); border: 1px solid var(--green); border-radius: 1rem; display: grid; gap: 1rem; grid-template-columns: auto 1fr; padding: clamp(1.4rem,2.5vw,2.2rem); }
.contact-form-success > svg { color: var(--green-deep); height: 26px; width: 26px; }
.contact-form-success strong { display: block; font-size: 1.15rem; font-weight: 680; letter-spacing: -.02em; }
.contact-form-success p { color: var(--ink-muted); line-height: 1.6; margin: .5rem 0 0; }
.contact-form-success a { color: var(--green-deep); font-weight: 650; }

@media (max-width: 980px) {
  .contact-body-inner { grid-template-columns: 1fr; }
  .contact-details { position: static; }
  .contact-channels { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .contact-breadcrumbs,.contact-hero,.contact-body,.contact-services { padding-left: 1rem; padding-right: 1rem; }
  .contact-field-row { grid-template-columns: 1fr; }
  .contact-submit { width: 100%; }
}