/* =============================================================
   /contact (views/landing/contact.php), on the landing design system (landing.css section 6).
   Page classes are .ct-*; the shared .lp-* classes are used as they are.
   Bands: Kaura head with the contact list (email as the flat Kuusi row) · Jäkälä form · Kuusi CTA.
   ============================================================= */

/* ---------- head ---------- */
.ct-hero { padding-bottom: clamp(64px, 7vw, 116px); }
.ct-hero__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 5vw, 96px); align-items: end; margin-bottom: clamp(40px, 4.4vw, 68px); }
.ct-hero__head .lp-lead { margin: 0; max-width: 30em; }
.ct-h1 { margin: 0; font: 700 clamp(60px, 9vw, 140px)/.92 var(--lp-display); letter-spacing: -.05em; color: var(--kuusi); text-wrap: balance; }
.ct-h1::after { content: "." / ""; }

/* ---------- the contact list: the price list's rows, email first and solid Kuusi ---------- */
.ct-list { margin: 0; border-top: 1px solid rgba(31,77,71,.2); }
.ct-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 10px 32px; align-items: center; padding: 30px 28px; border-bottom: 1px solid rgba(31,77,71,.2); }
.ct-row__k { font: 700 clamp(22px, 1.9vw, 28px)/1.1 var(--lp-display); letter-spacing: -.02em; color: var(--kuusi); }
.ct-row__why { display: block; margin-top: 8px; max-width: 16em; font: 500 15.5px/1.4 var(--lp-body); letter-spacing: 0; color: var(--muted); }
.ct-row dd { margin: 0; }
.ct-row__v { font: 700 clamp(34px, 4.6vw, 72px)/1 var(--lp-display); letter-spacing: -.04em; color: var(--kuusi); overflow-wrap: anywhere; }
.ct-row__v--mid { font-size: clamp(26px, 2.8vw, 42px); letter-spacing: -.03em; }
.ct-row__v a { color: inherit; text-decoration: underline; text-decoration-thickness: .055em; text-underline-offset: .14em; text-decoration-color: rgba(31,77,71,.28); transition: text-decoration-color .2s; }
.ct-row__v a:hover { text-decoration-color: currentColor; }
.ct-row__v--mid a { text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.ct-row__n { display: flex; align-items: flex-start; gap: 10px; font: 500 16.5px/1.45 var(--lp-body); color: var(--yo); }
.ct-row__n svg { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--kuusi); }
.ct-row.is-mail { margin-top: -1px; border-radius: 24px; border-bottom-color: transparent; background: var(--kuusi); color: var(--kaura); padding-top: clamp(34px, 3.4vw, 52px); padding-bottom: clamp(34px, 3.4vw, 52px);
    box-shadow: 0 40px 60px -42px rgba(20,35,31,.6); }
.ct-row.is-mail .ct-row__k, .ct-row.is-mail .ct-row__v, .ct-row.is-mail .ct-row__n, .ct-row.is-mail .ct-row__n svg { color: var(--kaura); }
.ct-row.is-mail .ct-row__why { color: var(--on-kuusi-2); }
.ct-row.is-mail .ct-row__v a { text-decoration-color: rgba(241,243,242,.4); }
.ct-row.is-mail .ct-row__v a:hover { text-decoration-color: currentColor; }
.ct-row.is-mail :focus-visible { outline-color: var(--kaura); }
.ct-row__n--mail { flex-direction: column; align-items: flex-start; gap: 16px; }
.ct-row__when { display: flex; align-items: flex-start; gap: 10px; }
.ct-copy { height: 44px; padding: 0 18px; font-size: 15.5px; }
/* the phone: one plain body-size line under the list (no call hours; email is the way in) */
.ct-phone { margin: 22px 0 0; padding: 0 28px; font: 500 17px/1.5 var(--lp-body); color: var(--muted); }
.ct-phone a { display: inline-block; padding: 10px 0; margin-left: 4px; color: var(--kuusi); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(31,77,71,.35); }
.ct-phone a:hover { text-decoration-color: currentColor; }
.ct-row.is-mail .ct-copy { color: var(--kaura); border-color: rgba(241,243,242,.42); }
.ct-row.is-mail .ct-copy:hover, .ct-copy.is-done { border-color: var(--kaura); }

/* ---------- the form ---------- */
.ct-form-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 112px); align-items: start; }
.ct-form-head { position: sticky; top: calc(var(--navh) + 40px); }
.ct-form-head__link { margin: 26px 0 0; font-size: 16.5px; }
.ct-form { position: relative; padding: clamp(26px, 3vw, 44px); border-radius: 28px; background: var(--pinta); box-shadow: 0 40px 70px -50px rgba(20,35,31,.45); }
.ct-form__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.ct-form .lp-field > input, .ct-form .lp-field > textarea { background: #FFFEFA; }
.ct-form .lp-field > label span { color: var(--muted); }
.ct-form__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }
.ct-form__req { margin: 0; font: 500 15px/1.45 var(--lp-body); color: var(--muted); }
.ct-form .lp-btn { cursor: pointer; }
/* the honeypot: off screen for people, still in the form for bots (no inline style, CSP-safe) */
.ct-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- breakpoints ---------- */
@media (max-width: 1023px) {
    .ct-hero__head, .ct-form-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .ct-form-head { position: static; }
    .ct-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 22px; }
    .ct-row.is-mail { padding-top: 30px; padding-bottom: 30px; }
    .ct-row__why { max-width: none; }
    .ct-phone { padding: 0 22px; }
}
@media (max-width: 639px) {
    .ct-form__pair { grid-template-columns: minmax(0, 1fr); }
    .ct-form { padding: 22px 18px; border-radius: 22px; }
    .ct-form__go .lp-btn { width: 100%; }
    .ct-row__v { font-size: clamp(30px, 9.4vw, 40px); }
    .ct-row__v--mid { font-size: 26px; }
}