/* =====================================================================
 * Pillar — Contact page
 * Loaded only on pages using the "Pillar — Contact" template.
 *
 * Stockholm note: the theme forces heading colors (h1 #5d5d5d, h2 #393939)
 * and link color (a #E6AE48), overriding anything inherited. Headings below
 * therefore set their color with !important to win.
 *
 * Gravity Forms / HubSpot note: both render third-party markup with their
 * own stylesheets, so the field rules are written against the plugins' real
 * class names and use !important throughout.
 * ================================================================== */

/* ---- Stockholm header over the dark hero -------------------------------
   On DESKTOP the theme header starts transparent with DARK text and only
   turns solid white once scrolled — invisible over our dark hero. These
   rules turn the nav and logo white while the header is transparent, and
   hand control back to the theme the moment it adds `.scrolled`.

   IMPORTANT: scoped to >1000px only. Below that Stockholm swaps to its
   MOBILE header (breakpoint 1000px), which is a solid LIGHT bar — NOT
   transparent over the hero. Forcing the logo/hamburger white there makes
   them vanish (light on light), so on mobile we leave the theme's default
   dark header alone. */
@media (min-width:1001px){
  body.page-template-pillar-contact .page_header:not(.scrolled) .menu-item > a,
  body.page-template-pillar-contact .page_header:not(.scrolled) .menu-item > a:hover,
  body.page-template-pillar-contact .page_header:not(.scrolled) .q_menu .menu-item > a{
    color:#fff !important;
  }
  body.page-template-pillar-contact .page_header:not(.scrolled) img.normal{opacity:0 !important;}
  body.page-template-pillar-contact .page_header:not(.scrolled) img.light{opacity:1 !important;}
}

.pillar-contact-pg{
  --ink:      #161616;
  --dark:     #17130d;
  --accent:   #e6ae48;
  --muted:    #6b6b6b;
  --hair:     #e4e4e1;
  --field:    #d8d8d8;
  --maxw:     2400px;
  --pad:      96px;
}
.pillar-contact-pg *,.pillar-contact-pg *::before,.pillar-contact-pg *::after{box-sizing:border-box;margin:0;padding:0;}
.pillar-contact-pg{
  font-family:'Barlow',sans-serif;color:var(--ink);background:#fff;line-height:1.6;
  -webkit-font-smoothing:antialiased;width:100%;max-width:100%;overflow-x:hidden;
}
.pillar-contact-pg p{margin:0;}
.pct-display{
  font-family:'Barlow',sans-serif;font-weight:800;font-style:normal;
  line-height:.98;letter-spacing:-.035em;text-transform:none;
}

/* ---- 1 · HERO (dark band) ---------------------------------------------- */
.pct-hero{background:var(--dark);}
.pct-hero__inner{max-width:var(--maxw);margin:0 auto;padding:180px var(--pad) 170px;}
.pct-hero__eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin-bottom:34px;
}
.pillar-contact-pg .pct-hero__title{
  font-size:clamp(40px,5.4vw,80px);color:#fff!important;max-width:17ch;
}

/* ---- 2 · TWO-COLUMN BODY ----------------------------------------------- */
.pct-main{padding:120px 0 140px;}
.pct-main__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:120px;align-items:start;
}
/* With the newsletter column switched off, the form column keeps a sane
   measure instead of stretching the full page width. */
.pct-main__inner--single{grid-template-columns:minmax(0,760px);}
.pillar-contact-pg .pct-col__title{
  font-family:'Barlow',sans-serif;font-weight:800;font-size:clamp(28px,2.6vw,40px);
  line-height:1.05;letter-spacing:-.03em;color:var(--ink)!important;margin-bottom:22px;max-width:22ch;
}
.pct-col__lede,.pct-col__lede p{font-size:18px;line-height:1.7;color:var(--muted);max-width:52ch;}
.pct-col__lede{margin-bottom:28px;}
.pct-col__lede p + p{margin-top:16px;}

/* ---- Shared field styling (Gravity Forms + HubSpot) --------------------
   Labels are ink; the required asterisk is gold. */
.pct-form,
.pct-form .gform_wrapper{margin:0!important;padding:0!important;}
.pct-form .gform_wrapper .gform_fields{display:flex!important;flex-direction:column!important;gap:30px!important;}
.pct-form .gform_wrapper .gfield{margin:0!important;padding:0!important;}

.pct-form .gform_required_legend{
  font:400 14px 'Barlow'!important;color:var(--muted)!important;margin:0 0 30px!important;
}
.pct-form .gfield_label,
.pct-form legend.gfield_label,
.pct-form .hs-form-field > label{
  font:600 13px 'Barlow'!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--ink)!important;margin-bottom:14px!important;display:block!important;
}
.pct-form .gfield_required,
.pct-form .hs-form-required{color:var(--accent)!important;font-weight:600!important;}

.pct-form .gform-field-label--type-sub{
  font:400 15px 'Barlow'!important;letter-spacing:0!important;text-transform:none!important;
  color:#9a9a9a!important;margin-bottom:0!important;
}
.pct-form .gform_wrapper .ginput_complex{display:flex!important;gap:34px!important;}
.pct-form .gform_wrapper .ginput_complex > span{flex:1 1 0!important;min-width:0!important;}

/* Underline inputs */
.pct-form input[type="text"],
.pct-form input[type="email"],
.pct-form input[type="tel"],
.pct-form .hs-input[type="email"],
.pct-form .hs-input[type="text"]{
  width:100%!important;border:none!important;border-bottom:1px solid var(--field)!important;
  border-radius:0!important;padding:10px 0!important;font:400 17px 'Barlow'!important;
  color:var(--ink)!important;background:transparent!important;box-shadow:none!important;outline:none!important;
}
.pct-form input[type="text"]:focus,
.pct-form input[type="email"]:focus,
.pct-form .hs-input[type="email"]:focus{border-bottom-color:var(--ink)!important;}
.pct-form input::placeholder,.pct-form textarea::placeholder{color:#9a9a9a!important;opacity:1!important;}

/* The message box is a full bordered box, not an underline */
.pct-form textarea,
.pct-form textarea.hs-input{
  width:100%!important;border:1px solid var(--field)!important;border-radius:0!important;
  padding:16px!important;font:400 17px 'Barlow'!important;color:var(--ink)!important;
  background:transparent!important;box-shadow:none!important;outline:none!important;
  min-height:190px!important;resize:vertical!important;display:block!important;
}
.pct-form textarea:focus{border-color:var(--ink)!important;}

/* Buttons — dark, uppercase, letterspaced */
.pct-form .gform_footer{margin:38px 0 0!important;padding:0!important;}
.pct-form .gform_button,
.pct-form input[type="submit"],
.pct-form .hs-button,
.pct-form input.hs-button{
  border:none!important;border-radius:0!important;cursor:pointer;
  font:600 14px 'Barlow'!important;letter-spacing:.16em!important;text-transform:uppercase!important;
  color:#fff!important;background:var(--ink)!important;padding:19px 42px!important;
  width:auto!important;min-width:0!important;box-shadow:none!important;transition:opacity .2s ease;
}
.pct-form .gform_button:hover,
.pct-form .hs-button:hover{opacity:.82;}

/* Gravity validation / confirmation messages, kept on-brand */
.pct-form .gform_wrapper .validation_message,
.pct-form .gform_wrapper .gfield_validation_message{
  font:400 13px 'Barlow'!important;color:#c0392b!important;background:transparent!important;
  border:none!important;padding:6px 0 0!important;margin:0!important;
}
.pct-form .gform_wrapper .gform_validation_errors{
  border:1px solid #e0c3bd!important;background:#fdf4f2!important;border-radius:0!important;
  box-shadow:none!important;padding:16px 20px!important;
}
.pct-form .gform_wrapper .gform_validation_errors h2{
  font:600 15px 'Barlow'!important;color:#c0392b!important;margin:0!important;
}
.pct-form .gform_confirmation_message{
  font:400 18px/1.7 'Barlow'!important;color:var(--ink)!important;
}

/* ---- HubSpot newsletter -------------------------------------------------
   NOT STYLED HERE ON PURPOSE. The site's HubSpot embed
   (js-na2.hsforms.net/forms/embed/245582993.js) renders the newsletter inside
   a cross-origin iframe, so nothing in this stylesheet can reach its heading,
   fields, consent copy or button — those are controlled entirely in HubSpot
   (Marketing → Forms). The `.hs-*` selectors that remain in the shared field
   rules above are harmless no-ops kept only in case HubSpot is ever switched
   back to an inline (non-iframe) embed. We render no heading/intro of our own
   for this column so HubSpot's own title + description are not duplicated. */

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:1300px){
  .pillar-contact-pg{--pad:56px;}
  .pct-main__inner{gap:72px;}
  .pct-hero__inner{padding:150px var(--pad) 140px;}
}
@media (max-width:1000px){
  .pct-main{padding:80px 0 100px;}
  .pct-main__inner{grid-template-columns:1fr;gap:80px;}
  .pct-main__inner--single{grid-template-columns:1fr;}
  .pct-hero__inner{padding:130px var(--pad) 110px;}
  .pillar-contact-pg .pct-hero__title{max-width:100%;}
}
@media (max-width:780px){
  .pct-hero__inner{padding:120px var(--pad) 90px;}
  .pct-col__lede,.pct-col__lede p{font-size:17px;}
  .pct-form .gform_wrapper .ginput_complex{flex-direction:column!important;gap:30px!important;}
  .pct-form .gform_button,.pct-form .hs-button{width:100%!important;}
}