/* =========================================================
   LEVEL TEN — contact page
   ========================================================= */
.contact-hero { padding: 132px 0 40px; }
.contact-hero .lead { max-width: 600px; margin-top: 22px; }
@media (max-width: 980px){ .contact-hero { padding-top: 112px; } }

.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 4vw, 64px); align-items: start; padding-bottom: var(--section-y); }
@media (max-width: 920px){ .contact-grid { grid-template-columns: 1fr; gap: 44px; } }

/* Left: form card */
.contact-form-card { background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 3.4vw, 44px); box-shadow: var(--shadow-sm); }
.contact-form-card h3 { font-size: calc(22px * var(--scale)); color: var(--ink); letter-spacing: -0.025em; }
.contact-form-card .sub { font-size: 14px; color: var(--mute); margin-top: 7px; }
.cform { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.cfield { display: flex; flex-direction: column; gap: 7px; }
.cfield label { font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.cfield label .req { color: var(--accent); }
.cform .field { width: 100%; }
.cform textarea.field { resize: vertical; min-height: 120px; font-family: var(--sans); line-height: 1.5; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px){ .cform-row { grid-template-columns: 1fr; } }
.cform select.field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6A72' stroke-width='2.2' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 44px; cursor: pointer; }
.cform .btn { justify-content: center; margin-top: 4px; }
.cform-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--mute); line-height: 1.45; }
.cform-consent input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.cform-consent a { color: var(--ink); }
.cform-success { display: none; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 8px; }
.cform-success.show { display: flex; }
.cform-success .ok { width: 54px; height: 54px; border-radius: 50%; background: rgba(63,191,134,.14); border: var(--hair) solid rgba(63,191,134,.34); color: var(--green); display: inline-flex; align-items: center; justify-content: center; }
.cform-success .ok svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cform-success h4 { font-size: 20px; color: var(--ink); }
.cform-success p { font-size: 14px; color: var(--mute); max-width: 320px; }

/* Right: contact methods */
.contact-methods { display: flex; flex-direction: column; gap: 12px; }
.cmethod { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.cmethod:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.cmethod .cm-ic { width: 48px; height: 48px; flex: none; border-radius: 13px; background: var(--accent-soft); border: var(--hair) solid var(--accent-line); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.cmethod .cm-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cmethod .cm-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmethod .cm-t .k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-2); font-weight: 700; }
.cmethod .cm-t .v { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -0.02em; }
.cmethod .cm-arrow { margin-left: auto; color: var(--mute-2); transition: transform .25s var(--ease), color .25s var(--ease); }
.cmethod:hover .cm-arrow { color: var(--accent); transform: translate(2px, -2px); }

/* Assurance tiles */
.contact-assure { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px){ .contact-assure { grid-template-columns: 1fr; } }
.cassure { padding: 18px 20px; background: var(--bg-2); border: var(--hair) solid var(--line); border-radius: var(--radius); }
.cassure .k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-2); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cassure .k svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cassure .v { display: block; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 18px; letter-spacing: -0.02em; margin-top: 6px; }
.cassure .d { display: block; font-size: 12.5px; color: var(--mute); margin-top: 3px; }

/* Client login banner */
.client-login { margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; background: var(--night); color: var(--night-ink); border-radius: var(--radius); }
.client-login .cl-t strong { font-family: var(--display); font-weight: 700; font-size: 16px; color: #fff; letter-spacing: -0.02em; }
.client-login .cl-t p { font-size: 12.5px; color: var(--night-mute); margin-top: 3px; }
.client-login .cl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--accent); color: #fff; border-radius: var(--btn-radius); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .25s var(--ease), transform .25s var(--ease); }
.client-login .cl-btn:hover { background: var(--accent-press); transform: translateY(-1px); }
@media (max-width: 520px){ .client-login { flex-direction: column; align-items: flex-start; } }

/* Book a call (Cal.com) */
.booking { border-top: var(--hair) solid var(--line); }
.booking .section-head { max-width: 620px; margin-bottom: 28px; }
.booking-card { position: relative; background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; min-height: 720px; }
.cal-embed { position: relative; z-index: 1; width: 100%; min-height: 720px; background: transparent; }
/* Fallback sits behind the embed; the Cal.com iframe paints over it when it loads */
.cal-fallback { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 40px; }
.cal-fallback .cf-ic { width: 60px; height: 60px; border-radius: 16px; background: var(--accent-soft); border: var(--hair) solid var(--accent-line); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.cal-fallback .cf-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cal-fallback h4 { font-size: 21px; color: var(--ink); letter-spacing: -0.025em; }
.cal-fallback p { font-size: 14px; color: var(--mute); max-width: 360px; }

/* --- Contact: hero aside (methods + client login) --- */
.contact-aside { display: flex; flex-direction: column; gap: 12px; }
/* --- Contact: form + booking side by side --- */
.contact-form-col, .booking-col { display: flex; flex-direction: column; }
.contact-col-head, .booking-head { margin-bottom: 18px; }
.contact-col-head h3 { font-family: var(--display); font-size: calc(22px * var(--scale)); color: var(--ink); letter-spacing: -0.025em; margin: 10px 0 8px; }
.contact-col-head p { font-size: 14px; color: var(--mute); }
.contact-form-col .contact-form-card { flex: 1 1 auto; }
.contact-form-col .cform { margin-top: 0; }
/* Keep both column heads the same height so the cards line up */
@media (min-width: 921px){ .contact-col-head, .booking-head { min-height: 96px; } }
.booking-head { margin-bottom: 18px; }
.booking-head h3 { font-family: var(--display); font-size: calc(22px * var(--scale)); color: var(--ink); letter-spacing: -0.025em; margin: 10px 0 8px; }
.booking-head p { font-size: 14px; color: var(--mute); }
.booking-col .booking-card { flex: 1 1 auto; min-height: 640px; }
.booking-col .cal-embed { min-height: 640px; }
@media (max-width: 920px){ .booking-col .booking-card, .booking-col .cal-embed { min-height: 600px; } }