/* Peptide Works -- /contact-us/ .
 *
 * Visual only, and scoped to hook classes added to the page's existing
 * containers. The page keeps its template, its structure and its widgets; the
 * form is still Gravity Forms, the FAQ is still Elementor's nested accordion.
 * Undo by removing this stylesheet.
 */

/* ---- the dead space at the top -------------------------------------------
 * The hero ended with 60px of padding and the section under it began with
 * another 80px, so 140px of nothing sat between the intro line and the first
 * real content -- the single worst thing about the page at a glance. The
 * decorative shapes float in that gap, which is presumably why it was left. */
body.page-id-184 .pw-contact-hero > .e-con-inner{padding-bottom:18px;}
body.page-id-184 .pw-contact-main > .e-con-inner{padding-top:34px;}

/* ---- the form, in a card -------------------------------------------------
 * It sat on the page background with nothing holding it, beside a large image
 * card -- so the two halves of the same row read as unrelated. Same card
 * treatment as the rest of the redesign: white, hairline border, 16px radius. */
body.page-id-184 .pw-contact-formcol{
  background:#FFFFFF;border:1px solid rgba(22,25,27,0.11);border-radius:16px;
  padding:clamp(20px,2.4vw,32px) !important;
}
body.page-id-184 .pw-contact-formcol .elementor-heading-title{margin-top:0;}

/* Gravity Forms here is LEGACY markup (`gform_legacy_markup_wrapper
   gform-theme--no-framework`), not the modern `gravity-theme`. Selectors written
   against gravity-theme match nothing and fail silently -- the fields kept their
   bare underline styling and it looked like the CSS had not deployed.
   Checked on the page rather than assumed from the Gravity Forms version. */
body.page-id-184 .pw-contact-formcol .gform_wrapper ul.gform_fields{display:flex;flex-wrap:wrap;gap:16px 20px;margin:0;padding:0;}
body.page-id-184 .pw-contact-formcol .gform_wrapper li.gfield{margin:0 !important;padding:0 !important;flex:1 1 100%;}
body.page-id-184 .pw-contact-formcol .gform_wrapper li.gfield.gf_left_half,
body.page-id-184 .pw-contact-formcol .gform_wrapper li.gfield.gf_right_half{flex:1 1 calc(50% - 10px);}
body.page-id-184 .pw-contact-formcol .gform_wrapper .gfield_label{
  display:block;font-size:12.5px !important;font-weight:600 !important;color:#4A544D !important;margin:0 0 6px !important;}
body.page-id-184 .pw-contact-formcol .gform_wrapper input[type=text],
body.page-id-184 .pw-contact-formcol .gform_wrapper input[type=email],
body.page-id-184 .pw-contact-formcol .gform_wrapper input[type=tel],
body.page-id-184 .pw-contact-formcol .gform_wrapper select,
body.page-id-184 .pw-contact-formcol .gform_wrapper textarea{
  width:100% !important;box-sizing:border-box;
  border:1px solid rgba(22,25,27,0.18) !important;border-radius:10px !important;
  padding:10px 12px !important;font-size:14.5px !important;line-height:1.4;
  background:#FFFFFF !important;color:#16191B;}
body.page-id-184 .pw-contact-formcol .gform_wrapper textarea{min-height:120px;resize:vertical;}
body.page-id-184 .pw-contact-formcol .gform_wrapper input:focus,
body.page-id-184 .pw-contact-formcol .gform_wrapper select:focus,
body.page-id-184 .pw-contact-formcol .gform_wrapper textarea:focus{
  outline:2px solid #1D5C2C;outline-offset:1px;border-color:rgba(29,92,44,0.5) !important;}
body.page-id-184 .pw-contact-formcol .gform_wrapper .gform_footer{padding:8px 0 0 !important;margin:0 !important;}

/* ---- the contact photo ---------------------------------------------------
 * The photo is a background-image on the column itself, not an <img>, so the
 * overlay text sat on top of it as separate widgets. Those are deleted; the
 * column keeps the picture.
 *
 * min-height is insurance, not decoration: the column's 743px came entirely
 * from the flex row stretching it to match the form beside it. With its widgets
 * gone it has no content of its own, and anything that stops the row stretching
 * -- a wrap at a narrow width, a future edit -- would collapse it to nothing and
 * the photo would silently vanish. */
body.page-id-184 .pw-contact-infocol{
  min-height:420px;
  border-radius:16px;                      /* was 8px -- match the form card */
  box-shadow:0 18px 40px -24px rgba(22,25,27,0.45), 0 2px 8px -4px rgba(22,25,27,0.18);
}

/* ---- FAQ -----------------------------------------------------------------
 * Carried over from the accordion the product and hub pages already use: hairline
 * rules between items, no boxes, question in ink rather than green, and the
 * open/closed marker on the right. Elementor's nested accordion is a <details>
 * element, so most of this is resetting its summary chrome. */
body.page-id-184 .pw-contact-faq > .e-con-inner{padding-top:clamp(34px,4vw,56px);padding-bottom:clamp(34px,4vw,56px);}
body.page-id-184 .pw-contact-faq .elementor-heading-title{margin:0;}

body.page-id-184 .pw-contact-faq-cols{gap:clamp(20px,3vw,44px);}
body.page-id-184 .pw-contact-faq .e-n-accordion{border-top:1px solid rgba(22,25,27,0.12);}
body.page-id-184 .pw-contact-faq .e-n-accordion-item{border-bottom:1px solid rgba(22,25,27,0.12);}
body.page-id-184 .pw-contact-faq .e-n-accordion-item-title{
  padding:15px 0 !important;background:none !important;border:0 !important;
  font-size:15.5px !important;font-weight:600 !important;color:#16191B !important;
  line-height:1.35 !important;}
body.page-id-184 .pw-contact-faq .e-n-accordion-item-title:hover{color:#1D5C2C !important;}
body.page-id-184 .pw-contact-faq .e-n-accordion-item-title-text{white-space:normal;}
body.page-id-184 .pw-contact-faq .e-n-accordion-item[open] .e-n-accordion-item-title{color:#16191B !important;}
body.page-id-184 .pw-contact-faq .e-n-accordion-item > .e-con{padding:0 0 16px !important;}
body.page-id-184 .pw-contact-faq .e-n-accordion-item p{
  margin:0;font-size:14.5px;line-height:1.6;color:#3C443E;max-width:70ch;}

@media (max-width:700px){
  /* Half-width fields stay side by side on a phone otherwise -- measured at
     164px each inside a 390px card, which is too narrow to type a country into. */
  body.page-id-184 .pw-contact-formcol .gform_wrapper li.gfield.gf_left_half,
  body.page-id-184 .pw-contact-formcol .gform_wrapper li.gfield.gf_right_half{flex:1 1 100%;}
  body.page-id-184 .pw-contact-formcol{padding:18px !important;}
  /* Two FAQ columns become one; side by side they were ~180px wide. */
  body.page-id-184 .pw-contact-faq-cols{gap:0;}
}