/* Contact page styles — Exterior Services LLC */

/* ══════════════════════════════════════════════════════════════════════════════
   CONTACT HERO — short headline band, no image (nav defaults to solid)
   ══════════════════════════════════════════════════════════════════════════════ */
.contact-hero {
  background: var(--char); color: var(--paper);
  padding: calc(var(--sp-8) + var(--sp-6)) var(--gutter) var(--sp-7);
  text-align: center;
}
.contact-hero__eyebrow { color: var(--green-lt); }
.contact-hero__h1 {
  margin-top: var(--sp-4);
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600;
  color: var(--paper);
}
.contact-hero__sub {
  margin-top: var(--sp-4);
  color: var(--mut-d); font-size: var(--fs-4); max-width: 44ch;
  margin-inline: auto; line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TWO-COLUMN CONTACT LAYOUT
   ══════════════════════════════════════════════════════════════════════════════ */
.contact-layout {
  margin-top: var(--sp-7);
  width: min(72rem, 100%); margin-inline: auto;
  display: grid; grid-template-columns: 2fr 3fr; gap: var(--sp-7);
  align-items: start;
}

/* LEFT — contact info */
.contact-info__label {
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--sp-2);
}
.contact-info__value {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-5); color: var(--ink);
  text-decoration: none;
  display: block;
}
.contact-info__value:hover { color: var(--green); }
.contact-info__block + .contact-info__block { margin-top: var(--sp-6); }
.contact-info__line {
  margin-top: var(--sp-1);
  color: var(--mut); font-size: var(--fs-2); line-height: 1.6;
}

/* RIGHT — estimate form */
.contact-form__head { margin-bottom: var(--sp-5); }
.contact-form__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-5); color: var(--ink);
}
.contact-form__sub {
  margin-top: var(--sp-2); color: var(--mut); font-size: var(--fs-2);
}
/* Scope filter — quiet, sits under the form intro */
.contact-form__note {
  margin-top: var(--sp-3);
  color: var(--mut); font-size: var(--fs-2);
  font-family: var(--font-display); font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FORM ELEMENTS — Direction B input styling
   ══════════════════════════════════════════════════════════════════════════════ */
.form__row { margin-top: var(--sp-4); }
.form__label {
  display: block;
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mut); margin-bottom: var(--sp-2);
}
.form__label span { color: var(--green); margin-left: 0.2em; }
.form__input {
  display: block; width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--font-sans); font-size: var(--fs-3); color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none; appearance: none;
}
.form__input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.form__input::placeholder { color: color-mix(in srgb, var(--ink) 30%, transparent); }
.form__select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-4) center; padding-right: var(--sp-7); }
.form__textarea { resize: vertical; min-height: 8rem; }
.form__submit { margin-top: var(--sp-6); width: 100%; justify-content: center; display: block; text-align: center; }

/* Netlify honeypot — hidden from all users */
.form__honeypot { display: none; }

/* Required field note */
.form__required-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-1); color: var(--mut);
}

/* ══════════════════════════════════════════════════════════════════════════════
   ALSO AVAILABLE — snow removal + landscape design (D9)
   These are the FIRST image slots on the contact page, so there was no existing
   figure/frame rule here to inherit — .frame, .shot and figcaption come from
   base.css; the grid and the block type below are new.

   No height and no aspect-ratio is set on these images on purpose. .shot
   carries object-fit: cover, which is inert without a constrained height, so
   each photograph renders UNCROPPED at its own natural ratio. The two frames
   are genuinely different shapes — 3:2 fleet, 16:9 terrace — and are left that
   way rather than cropped to fake a matched pair.
   ══════════════════════════════════════════════════════════════════════════════ */
.also {
  margin-top: var(--sp-7);
  width: min(72rem, 100%); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-7); row-gap: 0;
  align-items: start;
  /* four shared rows: figure · title · body · phone */
  grid-template-rows: auto auto auto auto;
}
/* Subgrid keeps the two titles (and bodies, and phone links) on the same line
   even though the photographs are different heights — the shorter 16:9 frame
   just leaves whitespace under itself instead of dragging its text up. This
   buys alignment WITHOUT cropping either photograph, which a matched
   aspect-ratio would have cost. Where subgrid is unsupported the blocks fall
   back to normal flow and simply stagger, which is still correct. */
.also__block {
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
}
/* No eyebrow above this section's title — drop the slot it would have sat in */
#also-available .sec__title { margin-top: 0; }

.also__title {
  margin-top: var(--sp-5);
  font-size: var(--fs-5); color: var(--ink);
}
.also__body {
  margin-top: var(--sp-3);
  color: var(--mut); font-size: var(--fs-3); line-height: 1.7;
}
.also__phone {
  /* justify-self keeps the hit area on the number itself — as a grid item the
     inline-block is blockified and would otherwise stretch the full column. */
  display: inline-block; justify-self: start; align-self: start;
  margin-top: var(--sp-4);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-4); color: var(--ink); text-decoration: none;
}
.also__phone:hover { color: var(--green); }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — ≤880px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .contact-hero { padding-top: calc(var(--sp-8) + var(--sp-4)); }
  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* Stacked: one column, so there is nothing to align across — drop the
     shared rows and let each block flow normally. */
  .also {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: var(--sp-6);
  }
  .also__block { grid-row: auto; display: block; }
}