@charset "utf-8";
/* ==========================================================================
   SunRight Solar — Get a Quote (/get-a-quote/) and Contact (/contact/)

   The two calmest pages on the site. Everything here is subordinate to one
   thing: a form that a stranger can complete on a phone, in a hurry, with one
   thumb, possibly using a screen reader, possibly with JavaScript switched
   off. So the fields are large, the focus ring is loud, colour is never the
   only signal, and nothing animates that a visitor has to wait for.

   No decorative flourish is added that the product pages do not already have.
   These pages read as the same family, one notch quieter.

     Page head       copy beside the form (quote) or the photograph (contact)
     Form kit        card, steps, fields, choices, consent, errors
     Quote page      what happens next, why homeowners choose SunRight Solar
     Contact page    contact methods, message layout
     Closers         inline phone link inside the shared dark CTA

   PROMOTE: the whole "Form kit" block below (.form-card, .sform, .fstep,
   .fgroup, .fields, .field, .choices, .choice, .consent, .req) is a generic
   form system, not page furniture. Any future page carrying a form — a
   newsletter block, a careers application, a service-area check — needs it.
   Move it to main.css §11e when a third form appears.

   PROMOTE: .media-frame--sixteen belongs beside .media-frame--band /
   --band-wide / --tall in main.css §11b. It is only here because those live
   in main.css and this build may not touch it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page head

   Quieter than .page-head on the product pages: one radial wash instead of
   two, and no photograph bleeding off the viewport edge. On /get-a-quote/ the
   form card is the hero and takes the right-hand column outright.
   -------------------------------------------------------------------------- */
.form-head {
  position: relative;
  padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
  background:
    radial-gradient(58% 64% at 2% 0%, var(--sky-100), transparent 66%),
    var(--white);
}

.form-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
}
.form-head__copy { min-width: 0; }
.form-head h1 { max-width: 15ch; margin-top: .85rem; }
.form-head__lead { margin-top: 1.4rem; }

.form-head__form,
.form-head__media { min-width: 0; }
.form-head__media .media-frame { border-radius: var(--r-2xl); box-shadow: var(--shadow-md); }

/* The one surviving trust marker. The approved line carried three items; two
   of them were an SAA claim SunRight Solar cannot make and a response-time
   placeholder, and both are gone rather than replaced. */
.marks {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.6rem;
}
.marks .chip { white-space: normal; }

/* --------------------------------------------------------------------------
   Form kit — card
   -------------------------------------------------------------------------- */
.form-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
}
/* A hairline of the brand sunrise across the top edge, so the card reads as
   the page's one primary object without needing a coloured fill. */
.form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-cta);
}

.sform { min-width: 0; }

/* Confirmation, shown in place of the form after a successful submission
   (?sent=1). Same card, so the page does not jump. */
.sform-done { display: grid; gap: .85rem; justify-items: start; padding-block: clamp(.5rem, 2vw, 1.25rem); }
.sform-done:focus { outline: none; }
.sform-done__mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-pill);
  background: var(--grad-cta);
  color: var(--ink);
}
.sform-done__mark .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.2; }
.sform-done__title { font-size: var(--step-3); line-height: 1.25; color: var(--ink); }
.sform-done p { color: var(--body); max-width: 46ch; }

/* --------------------------------------------------------------------------
   Form kit — error summary

   Present in the served HTML but empty, so CSS hides it and a screen reader
   ignores it. forms.js writes into it on a failed submit; because it is a
   live region that already exists, the insertion is announced. With
   JavaScript off it stays empty for ever and the browser reports constraint
   violations itself.
   -------------------------------------------------------------------------- */
.sform__alert {
  margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
  padding: 1rem 1.15rem;
  border: 1.5px solid var(--orange-600);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  background: #fff7f2;
  color: var(--body);
  font-size: .9375rem;
  line-height: 1.6;
}
.sform__alert:empty { display: none; }
.sform__alert:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sform__alert strong {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--orange-700);
}
.sform__alert ul { list-style: disc; padding-left: 1.15rem; }
.sform__alert li + li { margin-top: .3rem; }
.sform__alert a { color: var(--orange-700); text-decoration: underline; text-underline-offset: .2em; }
.sform__alert a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Form kit — steps and groups

   fieldset needs min-width:0 explicitly. Its UA default is min-content, which
   at 320px lets a long option label push the whole card wider than the
   viewport.
   -------------------------------------------------------------------------- */
.fstep,
.fgroup {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.fstep + .fstep,
.fstep + .consent,
.fields + .consent { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.fgroup { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.fgroup--spaced { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* <legend> ignores most display values in some engines, so the flex row lives
   on a span inside it rather than on the element itself. */
.fstep__legend,
.fgroup__legend {
  width: 100%;
  padding: 0;
  margin-bottom: .95rem;
}
.fstep__legend-inner,
.fgroup__legend-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
  min-width: 0;
}
.fstep__index {
  font-family: var(--font-num);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-700);
}
.fstep__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.fgroup__legend-inner {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
}

/* Required and optional are stated in words. Colour is never the only signal
   for anything on these pages, and that includes field status. */
.req {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Form kit — optional step, collapsed

   A native <details>, so it opens with JavaScript off and is keyboard
   operable for free.
   -------------------------------------------------------------------------- */
.fstep--optional {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--sky-25);
}
.fstep--optional > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: .85rem 1.1rem;
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-lg);
}
.fstep--optional > summary::-webkit-details-marker { display: none; }
.fstep--optional > summary:hover { background: var(--sky-50); }
.fstep--optional > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fstep--optional .fstep__title { font-size: var(--step-0); }
.fstep--optional[open] > summary { border-bottom: 1px dashed var(--line-strong); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.fstep__body { padding: 1.15rem 1.1rem 1.25rem; }

.fstep__mark {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: #fff;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.fstep__mark::before,
.fstep__mark::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: .65rem;
  height: 1.6px;
  border-radius: 2px;
  background: var(--navy-800);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease-out);
}
.fstep__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.fstep--optional[open] .fstep__mark { background: var(--sky-100); border-color: var(--navy-300); }
.fstep--optional[open] .fstep__mark::after { transform: translate(-50%, -50%) rotate(0); }

/* --------------------------------------------------------------------------
   Form kit — fields

   One column, always. The approved specification asks for fields that stack
   vertically with generous tap targets, and a single column is also the
   layout that cannot break: no pair can straddle the gutter at an awkward
   width, and nothing has to be re-measured when the card sits in a half-width
   grid column.
   -------------------------------------------------------------------------- */
.fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 1.9vw, 1.4rem);
}
.fields--spaced { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }

.field { min-width: 0; }
.field__label {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.field__control {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* 52px. Comfortably past the 44px touch target, and the 1rem type stops
     iOS zooming the page when the field takes focus. */
  min-height: 3.25rem;
  padding: .8rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field__control::placeholder { color: var(--muted); opacity: 1; }
.field__control:hover { border-color: var(--navy-300); }
/* The focus ring is deliberately heavier than the site default: on a form,
   knowing where you are matters more than restraint. */
.field__control:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(31, 94, 156, .12);
}
.field__control--area {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

/* Invalid state carries a border colour, a tinted ground, an exclamation mark
   and a sentence. Four signals, only one of them colour. */
.field.is-invalid .field__control,
.field__control[aria-invalid="true"] {
  border-color: var(--orange-600);
  background: #fff8f4;
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: .5rem 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--orange-700);
}
.field__error:empty { display: none; }
.field__error::before {
  content: "!";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--orange-600);
  color: #fff;
  font-family: var(--font-num);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Form kit — single-select choices

   Buttons rather than a dropdown, per the approved form specification. The
   radio itself stays in the document and stays focusable — it is simply
   invisible — so keyboard operation, arrow-key group navigation and screen
   reader semantics are the browser's native ones.
   -------------------------------------------------------------------------- */
.choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}
.choice {
  position: relative;
  display: flex;
  min-width: 0;
}
.choice input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.choice label {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  padding: .75rem .9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* The mark is a real radio shape, drawn rather than tinted, so a selected
   option is legible without relying on the colour of the card. */
.choice label::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: #fff;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.choice label:hover { border-color: var(--navy-300); background: var(--sky-25); }
.choice input:checked + label {
  border-color: var(--navy-800);
  background: var(--sky-25);
  box-shadow: inset 0 0 0 1px var(--navy-800);
}
.choice input:checked + label::before {
  border-color: var(--navy-800);
  background: var(--navy-800);
  box-shadow: inset 0 0 0 3px #fff;
}
.choice input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}
/* An unanswered group. The sentence beneath it does the explaining; this is
   only the second signal, never the first. */
.fstep.is-invalid .choice label,
.fgroup.is-invalid .choice label {
  border-color: var(--orange-600);
  background: #fff8f4;
}

/* --------------------------------------------------------------------------
   Form kit — consent
   -------------------------------------------------------------------------- */
.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem .85rem;
  align-items: start;
}
.consent input {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: .1rem 0 0;
  appearance: none;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.consent input::before {
  content: "";
  width: .68rem;
  height: .36rem;
  border-left: 2.5px solid var(--navy-950);
  border-bottom: 2.5px solid var(--navy-950);
  transform: rotate(-45deg) scale(0);
  transition: transform .18s var(--ease-out);
}
.consent input:hover { border-color: var(--navy-300); }
.consent input:checked { background: var(--grad-cta); border-color: transparent; }
.consent input:checked::before { transform: rotate(-45deg) scale(1); }
.consent input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.consent.is-invalid input { border-color: var(--orange-600); background: #fff8f4; }
.consent__text {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-size: .9375rem;
  line-height: 1.6;
}
.consent__text label { display: inline; cursor: pointer; color: var(--ink); font-weight: 600; }
.consent__note { display: inline; color: var(--muted); }
.consent__note a { color: var(--navy-700); text-decoration: underline; text-underline-offset: .2em; }
.consent__note a:hover { color: var(--navy-900); }
.consent .field__error { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Form kit — honeypot, submit, privacy line

   The trap is pulled off-screen rather than display:none, because a bot that
   parses CSS skips a hidden input and fills a positioned one. It carries
   aria-hidden and tabindex="-1", so no visitor and no assistive technology
   ever reaches it.
   -------------------------------------------------------------------------- */
.sform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sform__foot {
  display: grid;
  gap: 1rem;
  justify-items: start;
  margin-top: clamp(1.5rem, 2.6vw, 2rem);
  padding-top: clamp(1.25rem, 2.2vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.sform__privacy {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Get a Quote — what happens after you submit
   -------------------------------------------------------------------------- */
.next-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 2.8vw, 2.25rem) clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.next-step {
  min-width: 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.next-step__index {
  display: block;
  margin-bottom: .8rem;
  font-family: var(--font-num);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sun-600);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .next-step__index {
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.next-step__lead,
.reason__lead {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.next-step__text,
.reason p { font-size: var(--step--1); line-height: 1.7;
  max-width: 40rem;
}

/* --------------------------------------------------------------------------
   Get a Quote — why homeowners choose SunRight Solar

   Three points, not the approved four: the SAA accreditation claim is
   removed and nothing is substituted for it. An exact count, so the columns
   are set explicitly and the last row can never be left with a hole.
   -------------------------------------------------------------------------- */

.reasons__banner { margin-top: clamp(2.25rem, 3.5vw, 3rem); }

.reasons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 2.8vw, 2.25rem) clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
}
.reason {
  min-width: 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.reasons__more { margin-top: clamp(1.75rem, 2.8vw, 2.5rem); }

/* --------------------------------------------------------------------------
   Contact — contact methods

   The phone number is the largest single element on the page, because the
   approved CTA table makes tap-to-call the primary contact action here. The
   column count comes from PHP, from the number of cards config actually
   produces, so an unset address can never leave an empty grid track.
   -------------------------------------------------------------------------- */
.contact-methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.contact-method {
  min-width: 0;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.contact-method--phone {
  border-color: transparent;
  background: linear-gradient(165deg, #fff 52%, #fff7ee);
  box-shadow: var(--shadow-md);
}
.contact-method__label {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-method__value {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .2s var(--ease);
}
.contact-method__value:hover { color: var(--orange-700); }
.contact-method__value--email {
  font-size: clamp(1.0625rem, 3.4vw, 1.5rem);
  letter-spacing: -0.012em;
}
.contact-method__disc {
  display: grid;
  place-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--grad-cta);
  color: var(--navy-900);
  transition: transform .3s var(--ease-out);
}
.contact-method__disc .icon { width: 1.25rem; height: 1.25rem; }
.contact-method__value:hover .contact-method__disc { transform: scale(1.04); }
.contact-method__meta {
  display: block;
  margin-top: .55rem;
  font-family: var(--font-num);
  font-size: .9375rem;
  color: var(--muted);
  letter-spacing: .02em;
}
.contact-method__address {
  font-style: normal;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--body);
}
.contact-method .link-arrow { margin-top: .9rem; }

.contact-hours {
  display: grid;
  gap: .3rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.contact-hours > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1rem;
  font-size: .875rem;
}
.contact-hours dt { color: var(--muted); }
.contact-hours dd { font-family: var(--font-num); font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   Contact — message layout

   The same aside-plus-content shape as the shared FAQ grid, so the page
   reads as part of the system rather than as a one-off.
   -------------------------------------------------------------------------- */
.msg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}
.msg__aside,
.msg__form { min-width: 0; }
.msg__aside h2 { max-width: 12ch; }
.msg__redirect {
  margin-top: clamp(1.5rem, 2.6vw, 2rem);
  font-size: var(--step--1);
  color: var(--body);
}
.msg__redirect .link-arrow { margin-inline: .2rem; }

/* --------------------------------------------------------------------------
   Closers

   /get-a-quote/ ends on a phone number rather than a button: the approved CTA
   table sets both onward actions there as text links, because the page has
   exactly one primary action and it is the form.
   -------------------------------------------------------------------------- */
.final-cta__line a { color: var(--gold-300); text-decoration-color: rgba(255, 212, 77, .5); }
.final-cta__line a:hover { color: #fff; text-decoration-color: currentColor; }
.phone-inline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 212, 77, .45);
}
.phone-inline:hover { border-bottom-color: currentColor; }
/* Scoped through .final-cta__copy so it outranks main.css's `.final-cta p`,
   whose margin shorthand would otherwise reset the negative top margin. */
.final-cta__copy .final-cta__spoken {
  margin: -1.75rem 0 0;
  font-family: var(--font-num);
  font-size: .9375rem;
  letter-spacing: .02em;
  color: var(--on-dark-faint);
}

/* ==========================================================================
   Breakpoints

   Every block below overrides a base rule of equal specificity, so it must
   stay after the base rules. Do not move anything above this line.
   ========================================================================== */

/* Narrow phones — the submit button takes the full card width rather than
   sitting in a short row that a thumb has to aim at. */
@media (max-width: 480px) {
  .sform__foot { justify-items: stretch; }
  .sform__foot .btn { width: 100%; }
}

/* Two-up choices. Four options become 2x2 and three options stay stacked
   until there is room for all three, so neither ever leaves a hole. */
@media (min-width: 440px) {
  .choices--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 560px) {
  .choices--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
  .contact-methods { grid-template-columns: repeat(var(--cols-md, 2), minmax(0, 1fr)); }
}

@media (min-width: 820px) {
  .next-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .msg { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
  .msg__aside {
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
    align-self: start;
  }
}

@media (min-width: 1024px) {
  /* /get-a-quote/ — copy top left, photograph beneath it, form card holding
     the whole right-hand column. Document order is copy, form, photograph, so
     a keyboard reaches the form immediately after the introduction. */
  .form-head__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    align-items: start;
    column-gap: clamp(2.5rem, 4.5vw, 4.5rem);
    row-gap: clamp(2rem, 3vw, 3rem);
  }
  .form-head__copy  { grid-column: 1; grid-row: 1; }
  .form-head__form  { grid-column: 2; grid-row: 1 / span 2; }
  .form-head__media { grid-column: 1; grid-row: 2; }

  /* /contact/ — a plain two-up. There is no form in this head. */
  .form-head__grid--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    align-items: center;
  }
  .form-head__grid--split .form-head__media { grid-column: 2; grid-row: 1; }
}

@media (min-width: 1100px) {
  .contact-methods { grid-template-columns: repeat(var(--cols-lg, 2), minmax(0, 1fr)); }
}

/* Wide desktop. The quote form has room for a slightly roomier card and the
   photograph beneath the copy can take a taller crop. */
@media (min-width: 1280px) {
  .form-card { padding: clamp(2rem, 2.4vw, 2.75rem); }
  /* One ratio at every width; the file is 8:5. */
}

/* Coarse pointers. Every interactive target on these pages is at least 44px:
   the fields and choice cards already are, and the consent checkbox grows a
   hit area with a pseudo-element so the box itself does not change size. */
@media (pointer: coarse) {
  .consent input::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
  .choice label { min-height: 3.5rem; }
  .contact-method__value { padding-block: .15rem; }
}