/* ═══════════════════════════════════════════════════════════════
   maarch* contact page — Figma 1:1294 · resources/design/contact/DESIGN-ANALYSIS.md
   02 form · 03 details band · 04 map  (y values below are page px at 1920)
   ═══════════════════════════════════════════════════════════════ */

.page-contact main > section { overflow-x: clip; }

/* ── 02 Form — photo bg (Figma 1:1295 covers page y 0–1080, section is 103–1073) ──
   "Get in touch" 300 64 tracking −3.2 @ (234,157) · "Name" 26 @ 265 · labels 15 tracking −.75 ·
   fields #fff: first/last 713×69 @ 334 (x 234 / 974) · email 1453×70 @ 479 · subject 1453×69 @ 625 ·
   message 1453×157 @ 779 · button #ff7376 260×46 r11 centred @ 981 ("Let’s Connect" 700 26) */
.ct-form { height: calc(970 * var(--u)); background: #6f88ad; overflow: hidden; }
.ct-form__bg { position: absolute; left: 0; top: calc(-103 * var(--u)); width: 100%; height: calc(1080 * var(--u)); object-fit: cover; }
.ct-form__inner {
    position: relative;
    z-index: 1;
    width: calc(1453 * var(--u));
    margin: 0 0 0 calc(234 * var(--u));
    padding-top: calc(54 * var(--u));
    color: var(--skin-white);
}
.ct-form__title { font-size: clamp(40px, 3.333vw, 64px); font-weight: 300; line-height: 1; letter-spacing: -0.05em; }

.ct-form__name { min-width: 0; margin: calc(44 * var(--u)) 0 0; padding: 0; border: 0; }
.ct-form__name legend { float: left; width: 100%; padding: 0; font-size: clamp(20px, 1.354vw, 26px); line-height: 1; letter-spacing: -0.05em; }
.ct-form__row { clear: both; display: grid; grid-template-columns: 713fr 713fr; column-gap: calc(27 * var(--u)); align-items: end; }
.ct-form__row .ct-field:first-child label { margin-left: calc(3 * var(--u)); }

.ct-field label {
    display: block;
    margin-top: calc(21 * var(--u));
    margin-bottom: calc(7 * var(--u));
    font-size: clamp(13px, .78125vw, 15px);
    line-height: 1;
    letter-spacing: -0.05em;
}
.ct-field--email label   { margin-top: calc(52 * var(--u)); margin-bottom: calc(9 * var(--u)); }
.ct-field--subject label { margin-top: calc(49 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.ct-field--message label { margin-top: calc(60 * var(--u)); margin-bottom: calc(10 * var(--u)); }

.ct-field input, .ct-field textarea {
    display: block;
    width: 100%;
    height: calc(69 * var(--u));
    min-height: 44px;
    padding: 0 20px;
    font: inherit;
    font-size: clamp(16px, .9375vw, 18px);
    color: #2e2e2e;
    background: var(--skin-white);
    border: 2px solid transparent;
    border-radius: 0;
    outline: none;
    transition: border-color .2s ease;
}
.ct-field--email input { height: calc(70 * var(--u)); }
.ct-field textarea { height: calc(157 * var(--u)); min-height: 120px; padding-top: 16px; resize: vertical; }
.ct-field input:focus, .ct-field textarea:focus { border-color: var(--skin-coral); }
.ct-field.is-invalid input, .ct-field.is-invalid textarea { border-color: var(--skin-coral); }
.ct-field__error { display: block; margin-top: 6px; font-size: 14px; color: var(--skin-white); background: rgba(255, 115, 118, .9); padding: 4px 8px; width: fit-content; }

.ct-form__actions { margin-top: calc(45 * var(--u)); text-align: center; }
.ct-form__btn {
    width: max(200px, calc(260 * var(--u)));
    height: max(44px, calc(46 * var(--u)));
    font: inherit;
    font-size: clamp(18px, 1.354vw, 26px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--skin-white);
    background: var(--skin-coral);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: background .2s ease;
}
.ct-form__btn:hover, .ct-form__btn:focus-visible { background: #f25d61; }
.ct-form__status { min-height: 1.4em; margin-top: 12px; font-size: 18px; font-weight: 500; }

/* Entrance (Figma: fields wipe in from the left, labels fade in, "Name" + button rise 76px) — once on load */
.ct-field input, .ct-field textarea { animation: ct-wipe .9s cubic-bezier(.526, -.009, .586, 1) both; }
.ct-field--half input { animation-timing-function: cubic-bezier(.319, 0, 0, .802); }
.ct-field label { animation: ct-fade .9s cubic-bezier(.885, .577, .5, 1) .2s both; }
.ct-form__name legend, .ct-form__btn { animation: ct-rise .9s cubic-bezier(.534, -.017, .457, .991) .1s both; }
@keyframes ct-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ct-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ct-rise { from { opacity: 0; translate: 0 calc(76 * var(--u)); } to { opacity: 1; translate: 0 0; } }

/* ── 03 Details band — coral 273h; 4 columns centred x 340.5 / 787.5 / 1194 / 1626.5;
      icons (66–84) centred at y 1166; text 500 32/1.23 tracking −1.6, block centred at y 1247 ── */
.ct-details { height: calc(273 * var(--u)); background: var(--skin-coral); color: var(--skin-white); }
.ct-details__list { position: relative; width: calc(1920 * var(--u)); height: 100%; margin: 0 auto; padding: 0; list-style: none; }
.ct-detail { position: absolute; top: calc(52 * var(--u)); display: flex; flex-direction: column; align-items: center; translate: -50% 0; text-align: center; }
.ct-detail--address { left: calc(340.5 * var(--u)); }
.ct-detail--phone   { left: calc(787.5 * var(--u)); }
.ct-detail--email   { left: calc(1194 * var(--u)); }
.ct-detail--hours   { left: calc(1626.5 * var(--u)); }
.ct-detail__icon { display: grid; place-items: center; height: calc(84 * var(--u)); }
.ct-detail__icon img { width: calc(var(--s) * var(--u)); height: auto; }
.ct-detail--address img { --s: 66; }
.ct-detail--phone img   { --s: 84; }
.ct-detail--email img   { --s: 77; }
.ct-detail--hours img   { --s: 78; }
.ct-detail__text {
    display: flex;
    align-items: center;
    min-height: calc(79 * var(--u));
    margin: 0;
    font-style: normal;
    font-size: clamp(18px, 1.667vw, 32px);
    font-weight: 500;
    line-height: 1.23;
    letter-spacing: -0.05em;
    white-space: nowrap;
    color: var(--skin-white);
}
a.ct-detail__text:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── 04 Map — static image (1:1313), links to Google Maps ── */
.ct-map__link { position: relative; display: block; }
.ct-map__link img { display: block; width: 100%; height: auto; }
.ct-map__cta {
    position: absolute;
    right: calc(40 * var(--u));
    bottom: calc(32 * var(--u));
    padding: 10px 18px;
    font-size: 15px;
    color: var(--skin-white);
    background: #2e2e2e;
    opacity: 0;
    transition: opacity .2s ease;
}
.ct-map__link:hover .ct-map__cta, .ct-map__link:focus-visible .ct-map__cta { opacity: 1; }

@media (max-width: 991.98px) {
    .ct-form { height: auto; padding: 56px 0 64px; }
    .ct-form__bg { top: 0; height: 100%; }
    .ct-form__inner { width: auto; margin: 0 var(--skin-gutter); padding: 0; }
    .ct-form__name { margin-top: 32px; }
    .ct-form__row { column-gap: 16px; }
    .ct-field label, .ct-field--email label, .ct-field--subject label, .ct-field--message label { margin: 20px 0 8px; }
    .ct-form__row .ct-field label { margin-left: 0; }
    .ct-field input, .ct-field--email input { height: 52px; }
    .ct-field textarea { height: 160px; }
    .ct-form__actions { margin-top: 32px; }
    .ct-details { height: auto; padding: 48px var(--skin-gutter); }
    .ct-details__list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; width: auto; }
    .ct-detail { position: static; translate: none; }
    .ct-detail__icon { height: 64px; }
    .ct-detail__icon img { width: 52px; }
    .ct-detail__text { min-height: 0; margin-top: 12px; font-size: 20px; white-space: normal; justify-content: center; }
    .ct-map__link img { height: 380px; object-fit: cover; object-position: 80% 50%; }
    .ct-map__cta { opacity: 1; right: 16px; bottom: 16px; }
}
@media (max-width: 575.98px) {
    .ct-form__row { grid-template-columns: 1fr; }
    .ct-details__list { grid-template-columns: 1fr; }
}