/* ==========================================================================
   Contact — the details column and the Gravity Form.
   Only stock Gravity Forms classes are targeted, so the form can be rebuilt
   in wp-admin without touching this stylesheet.
   ========================================================================== */

.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:start}
.contact-grid > *{min-width:0}

/* The left column runs longer than the form, so the form tracks the scroll on
   laptop and desktop only. Below 1081px the layout is single-column and sticky
   would trap the form on screen, so it stays off for tablet and mobile. */
@media (min-width:1081px){
  .contact-form-col{position:sticky;top:112px}
}

/* The details column pins under the header on a tall desktop window. No
   "reveal" class on it: that applies transform:translateY(), and a transformed
   element creates a containing block which breaks sticky. */
@media (min-width:900px) and (min-height:720px){
  .contact-aside{
    position:sticky;
    top:calc(var(--header-h) + 24px);
    align-self:start;
  }
}

/* ------------------------------------------------------- detail cards --- */

.contact-cards{display:grid;gap:14px;margin-top:30px}

.contact-card{
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 22px;background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--espresso);
  border-radius:var(--radius);
}
.contact-card svg{
  width:22px;height:22px;flex:0 0 22px;margin-top:2px;
  fill:none;stroke:var(--espresso);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.contact-card-label{
  margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.contact-card-value{
  margin:0;font-family:var(--font-serif);font-size:20px;line-height:1.35;
  color:var(--espresso);
}
.contact-card-value a{color:var(--espresso);text-decoration:none}
.contact-card-value a:hover{text-decoration:underline}
.contact-card-value span{display:block;font-family:var(--font-sans);font-size:15px;color:var(--muted)}

/* The phone card doubles as the primary call-to-action on a phone. */
.contact-card--call{background:var(--espresso);border-color:var(--espresso)}
.contact-card--call svg{stroke:#fff}
.contact-card--call .contact-card-label{color:rgba(255,255,255,.62)}
.contact-card--call .contact-card-value,
.contact-card--call .contact-card-value a{color:#fff}
.contact-card--call .contact-card-value span{color:rgba(255,255,255,.72)}

/* auto-fit so a single card fills the row rather than sitting in a half-width
   column with dead space beside it. */
@media (min-width:720px){
  .contact-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}

/* --------------------------------------------------------------- form --- */

/* The approved design carries no "* indicates required fields" line, but the
   sentence is genuinely useful to a screen-reader user, so it is taken out of
   the visual layout rather than out of the page. */
.gform_wrapper.gravity-theme .gform_required_legend{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.gform_wrapper.gravity-theme{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px;box-shadow:var(--shadow);
}
.gform_wrapper.gravity-theme .gform_fields{
  display:grid;grid-template-columns:repeat(12,1fr);gap:22px;
}
.gform_wrapper.gravity-theme .gfield{grid-column:span 12;min-width:0}
.gform_wrapper.gravity-theme .gfield--width-half{grid-column:span 6}
.gform_wrapper.gravity-theme .gfield--width-full{grid-column:span 12}

.gform_wrapper.gravity-theme .gfield_label{
  display:block;margin-bottom:8px;
  font-size:12.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-deep);
}
.gform_wrapper.gravity-theme .gfield_required,
.gform_wrapper.gravity-theme .gfield_required_asterisk{color:var(--green);margin-left:4px}

.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea{
  width:100%;font:inherit;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
  padding:13px 15px;transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
}
.gform_wrapper.gravity-theme textarea{min-height:150px;resize:vertical}

/* Replace the browser's default select chevron with our own. CSS only — the
   Gravity Forms markup and classes are untouched. */
.gform_wrapper.gravity-theme select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:48px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006747' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5 12 16l7-6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:19px 19px;
  transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease,background-position .22s ease;
}
.gform_wrapper.gravity-theme select::-ms-expand{display:none}
.gform_wrapper.gravity-theme select:hover{background-position:right 15px center}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus{
  outline:0;background-color:var(--white);border-color:var(--green);
  box-shadow:0 0 0 4px rgba(0,103,71,.12);
}
.gform_wrapper.gravity-theme .gfield_description{
  margin-top:7px;font-size:13px;color:var(--muted);
}
.gform_wrapper.gravity-theme .gform_footer{margin-top:26px}
.gform_wrapper.gravity-theme .gform_button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 32px;border:0;border-radius:999px;cursor:pointer;
  background:var(--green);color:var(--white);
  font-family:var(--font-sans);font-size:13.5px;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 10px 24px rgba(0,103,71,.22);
  transition:background-color .25s ease,transform .25s ease;
}
.gform_wrapper.gravity-theme .gform_button:hover{background:var(--green-mid);transform:translateY(-2px)}

/* Validation and confirmation states, in the same language as the rest. */
.gform_wrapper.gravity-theme .gform_validation_errors{
  margin:0 0 24px;padding:16px 20px;border:0;border-left:3px solid #b3261e;
  border-radius:0 var(--radius) var(--radius) 0;background:#fdf0ef;box-shadow:none;
}
.gform_wrapper.gravity-theme .gform_validation_errors h2{
  margin:0;font-family:var(--font-sans);font-size:14px;font-weight:900;
  letter-spacing:.04em;color:#8c1d18;
}
.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea{border-color:#b3261e;background:#fffafa}
.gform_wrapper.gravity-theme .gfield_validation_message{
  margin-top:8px;padding:0;border:0;background:none;
  font-size:13px;font-weight:700;color:#8c1d18;
}
.gform_confirmation_wrapper{
  padding:26px 28px;border-left:3px solid var(--green);
  border-radius:0 var(--radius) var(--radius) 0;background:var(--green-soft);
  font-size:17px;color:var(--ink);
}

@media (max-width:1080px){
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:36px}
}

@media (max-width:520px){
  .gform_wrapper.gravity-theme{padding:24px}
  .gform_wrapper.gravity-theme .gfield--width-half{grid-column:span 12}
}