/* Contact-only overrides; keep last so shared mobile typography stays independent. */
.contact > footer > .contact-whatsapp {
  box-sizing:border-box;
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:10px;
  border:1px solid currentColor;
  border-radius:50%;
  color:inherit;
}
.contact > footer > .contact-whatsapp svg { display:block; width:22px; height:22px; flex:none; }
.contact > footer > .contact-whatsapp:hover { background:#ffffff26; }
.contact > footer > .contact-whatsapp:focus-visible { outline:2px solid currentColor; outline-offset:3px; }

@media (max-width:799px) {
  .contact.section {
    --contact-field-fill:var(--cream);
    --contact-field-line:#697268;
    justify-content:flex-start;
    gap:clamp(8px,1.2dvh,12px);
    padding-top:clamp(10px,1.8dvh,16px);
  }
  .contact > div,
  .contact > form,
  .contact > footer { flex-shrink:0; }
  .contact > div:first-child { margin-top:auto; }
  .contact h2,
  .contact h2 span {
    color:#fff;
    margin:0;
    font-size:clamp(28px,min(8vw,4.4dvh),40px);
    line-height:1.04;
  }
  .contact > div > .eyebrow { margin:0 0 6px; font-size:11px; line-height:14px; }
  .contact > div > p:not(.eyebrow),
  .contact .contact-number,
  .contact .form-title { display:none; }
  .contact > form {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    width:100%;
    min-width:0;
    max-width:none;
    margin:0 0 auto;
    padding:0;
  }
  .contact .form-row,
  .contact .contact-routing {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    min-width:0;
    gap:8px;
    margin:0;
  }
  .contact form label.contact-field {
    position:relative;
    display:block;
    min-width:0;
    margin:0;
  }
  /* Persistent inset labels also work for autofill and programmatic interest changes. */
  .contact .contact-field-label {
    position:absolute;
    z-index:1;
    top:6px;
    left:10px;
    right:10px;
    color:#485349;
    font-size:12px;
    font-weight:600;
    line-height:16px;
    letter-spacing:-.015em;
    pointer-events:none;
  }
  .contact .contact-field > :is(input,select,textarea) {
    box-sizing:border-box;
    display:block;
    width:100%;
    min-width:0;
    height:56px;
    min-height:56px;
    padding:24px 10px 7px;
    border:0;
    border-bottom:1px solid var(--contact-field-line);
    border-radius:8px 8px 0 0;
    background:var(--contact-field-fill);
    color:var(--ink);
    font-size:16px;
    font-weight:400;
    line-height:24px;
  }
  .contact .contact-field > textarea {
    resize:vertical;
  }
  .contact .contact-field > input:not([type=tel])::placeholder,
  .contact .contact-field > textarea::placeholder { color:transparent; font-size:0; }
  .contact .contact-field:focus-within .contact-field-label { color:var(--green); }
  .contact .contact-field > :is(input,select,textarea):focus {
    outline:2px solid var(--green);
    outline-offset:2px;
    border-bottom-color:var(--green);
    box-shadow:inset 0 -1px var(--green);
  }
  .contact form > .button {
    box-sizing:border-box;
    justify-self:start;
    justify-content:center;
    width:fit-content;
    min-width:0;
    max-width:100%;
    min-height:56px;
    margin:0;
    padding:14px 22px;
    border-radius:8px;
    font-size:16px;
    line-height:1.25;
    box-shadow:none;
    transform:none;
  }
  .contact .form-status {
    min-width:0;
    margin:0;
    color:var(--ink);
    font-size:14px;
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  .contact form > .button > span { font-size:24px; line-height:1; }
  .contact .form-status[hidden] { display:none; }
  .contact > footer {
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    align-items:center;
    margin-top:0;
    padding:6px var(--mobile-gutter) max(6px,env(safe-area-inset-bottom));
    gap:4px 8px;
  }
  .contact > footer > .contact-whatsapp { grid-column:2; grid-row:1; margin:0; }
  .contact > footer > div {
    grid-column:1;
    grid-row:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-width:0;
    gap:0 8px;
    font-size:12px;
    line-height:1.4;
  }
  .contact > footer > div a { min-height:44px; overflow-wrap:anywhere; }
  .contact > footer > p { grid-column:1/-1; margin:0; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
  .contact > footer a:focus-visible { outline-color:var(--cream); }
}

@media (min-width:390px) and (max-width:799px) and (min-height:850px) {
  .contact h2,.contact h2 span { font-size:clamp(36px,10vw,44px); }
  .contact .contact-field-label { font-size:13px; }
  .contact .contact-field > :is(input,select,textarea) { font-size:18px; }
  .contact form > .button { font-size:18px; }
}

@media (max-width:799px) and (max-height:700px) {
  /* Keep all six controls full-size; reclaim space from copy and gutters instead. */
  .contact.section { gap:6px; padding-top:10px; }
  .contact h2,.contact h2 span { font-size:22px; line-height:1.02; }
  .contact > div > .eyebrow { margin-bottom:4px; font-size:10px; line-height:12px; }
  .contact > form,
  .contact .form-row,
  .contact .contact-routing { gap:5px; }
}