/* Contact page: option cards, form layout with contact details, next steps; also the result and thank-you pages. */
.sec-flush{border-top:0;padding-top:0}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.opt-grid-2{grid-template-columns:repeat(2,1fr)}
.opt{display:flex;flex-direction:column;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:border-color .2s,transform .2s}
.opt:hover{border-color:var(--accent);transform:translateY(-2px)}
.opt svg.ico{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:1.5;margin-bottom:22px}
.opt h3{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:8px}
.opt p{flex:1}
.opt .go{display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:600;margin-top:22px}
.opt .go svg{width:14px;height:14px}

/* Layout with grid areas: the heading (head) is its own grid item so the form and the info column start in the same row
   and are aligned at the top. The gap between heading and form comes from the margin of the h2 only (row gap 0).
   The info column is stretched to the height of the form (flex column) and the map grows with it (min-height 240px),
   so the bottom edges line up. Up to 900px: one column in the order head, form, aside. */
.ct-layout{display:grid;grid-template-columns:1.3fr .85fr;grid-template-areas:"head ." "form aside";gap:0 40px;align-items:start}
.ct-head{grid-area:head}
.ct-head .h2{margin-bottom:28px}
.ct-form{grid-area:form}
.ct-aside{grid-area:aside;align-self:stretch;display:flex;flex-direction:column}
.ct-layout .contact-form{box-shadow:none;border:1px solid var(--line)}
.info-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.info-row:first-child{padding-top:0}
.info-row:last-child{border-bottom:0;padding-bottom:0}
.info-row svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:none;margin-top:2px}
.info-row small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.info-row a,.info-row span{font-size:15px}
.info-row a:hover{color:var(--accent)}
.map-ph{flex:1 0 auto;min-height:240px;border-radius:6px;margin-top:18px}
.map-ph img{position:absolute;inset:0} /* the image fills the growing box but does not decide its height */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps3 .outline-num{font-size:40px;margin-bottom:16px}

/* Result and thank-you pages */
.contact-result .result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.contact-result .checks{max-width:640px}

@media (max-width:900px){
  .ct-layout{grid-template-columns:1fr;grid-template-areas:"head" "form" "aside";gap:0}
  .ct-aside{margin-top:32px}
  .opt-grid,.opt-grid-2,.steps3{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .opt-grid,.opt-grid-2,.steps3{grid-template-columns:1fr}
}