/* Contact page (slug: contact) — split brand panel + Gravity Form.
   Mirrors the request-catalog layout so the two form pages read as a pair.
   The form markup is Gravity Forms', so the field styling below targets .gform_*
   rather than our own classes. */

  .ct{ display:grid; grid-template-columns:0.92fr 1.08fr; min-height:calc(100vh - var(--header-h)); }

  /* ---- left brand / photo panel ---- */
  .ct-aside{ position:relative; overflow:hidden; color:#fff; display:flex; }
  .ct-aside .media{ position:absolute; inset:0; }
  .ct-aside .media img{ width:100%; height:100%; object-fit:cover; }
  .ct-aside .scrim{ position:absolute; inset:0; background:linear-gradient(160deg, rgba(8,48,95,.82) 0%, rgba(7,20,34,.86) 100%); }
  .ct-aside .inner{ position:relative; z-index:2; padding:clamp(40px,5vw,72px); display:flex; flex-direction:column; justify-content:center; gap:26px; max-width:560px; }
  .ct-aside h1{ font-family:var(--seapro-display); font-weight:800; text-transform:uppercase; color:#fff; line-height:.96; letter-spacing:.01em; font-size:clamp(40px,5vw,68px); margin:0; }
  .ct-aside h1 em{ font-style:normal; color:var(--blue-bright); }
  .ct-aside .sub{ color:rgba(255,255,255,.82); font-size:clamp(16px,1.4vw,19px); max-width:46ch; }

  .ct-dealer-cta{ align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
    font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:13px;
    color:#fff; background:var(--accent); padding:14px 24px; border-radius:4px; transition:background .15s; }
  .ct-dealer-cta:hover{ background:var(--blue-bright); }

  /* ---- right form panel ---- */
  .ct-form-wrap{ background:#fff; padding:clamp(40px,5vw,72px) clamp(24px,5vw,84px); display:flex; flex-direction:column; justify-content:center; }
  .ct-form-head .eyebrow{ margin-bottom:10px; }
  .ct-form-head h2{ font-family:var(--seapro-display); font-weight:700; text-transform:uppercase; font-size:clamp(30px,3.4vw,44px); line-height:1; margin:0; }
  .ct-form-head p{ color:var(--ink-soft); margin:14px 0 0; max-width:52ch; }
  .ct-form-head a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

  .ct-form{ margin-top:30px; max-width:620px; width:100%; }

  /* ---- Gravity Forms skin ----
     Selectors are prefixed with .ct-form so nothing here leaks onto the other
     Gravity Forms across the site (dealer portal, warranty, spiff, etc.). */
  .ct-form .gform_wrapper.gravity-theme .gfield_label,
  .ct-form .gform_wrapper .gfield_label{ font-family:var(--head); font-weight:600; text-transform:uppercase;
    letter-spacing:.08em; font-size:12px; color:var(--ink); margin-bottom:8px; }
  .ct-form .gform_wrapper .gfield_required{ color:var(--blue); }

  .ct-form .gform_wrapper input[type=text],
  .ct-form .gform_wrapper input[type=email],
  .ct-form .gform_wrapper input[type=tel],
  .ct-form .gform_wrapper input[type=url],
  .ct-form .gform_wrapper select,
  .ct-form .gform_wrapper textarea{
    width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
    background:var(--mist); border:1px solid var(--line); border-radius:4px;
    padding:13px 14px; transition:border-color .15s, background .15s; }
  .ct-form .gform_wrapper input:focus,
  .ct-form .gform_wrapper select:focus,
  .ct-form .gform_wrapper textarea:focus{ outline:none; background:#fff; border-color:var(--accent); }
  .ct-form .gform_wrapper textarea{ min-height:150px; resize:vertical; }

  .ct-form .gform_wrapper .gform_footer{ margin-top:26px; padding:0; }
  /* (0,1,2) so Elementor's kit rule `.elementor-kit-N button` cannot repaint it —
     see the Elementor Kit defence note in site.css. */
  body .ct-form .gform_wrapper .gform_footer input[type=submit],
  body .ct-form .gform_wrapper .gform_footer button{
    background:var(--accent); color:#fff; font-family:var(--head); font-weight:700;
    text-transform:uppercase; letter-spacing:.1em; font-size:13px;
    padding:15px 34px; border:0; border-radius:4px; cursor:pointer; transition:background .15s; }
  body .ct-form .gform_wrapper .gform_footer input[type=submit]:hover,
  body .ct-form .gform_wrapper .gform_footer button:hover{ background:var(--blue-bright); }

  .ct-form .gform_wrapper .gform_validation_errors,
  .ct-form .gform_wrapper .gfield_validation_message{
    font-family:var(--head); font-size:13px; border-radius:4px; }
  .ct-form .gform_confirmation_message{ font-family:var(--head); font-size:17px; color:var(--ink);
    background:var(--mist); border-left:3px solid var(--accent); padding:22px 24px; border-radius:4px; }

  .ct-form-fallback{ background:var(--mist); border-left:3px solid var(--accent); padding:22px 24px; border-radius:4px; }
  .ct-form-fallback p{ margin:0 0 8px; color:var(--ink-soft); }
  .ct-form-fallback p:last-child{ margin-bottom:0; }
  .ct-form-fallback a{ color:var(--accent); text-decoration:underline; }

  @media (max-width:900px){
    .ct{ grid-template-columns:1fr; }
    .ct-aside{ min-height:44vh; }
    .ct-aside .inner{ max-width:none; }
  }

  /* ---- Profile Builder skin (Dealer Registration) ----
     Same panel as the Contact page, but this form is Profile Builder's, not
     Gravity Forms', so it needs its own field selectors. Scoped to .ct-form so
     the other Profile Builder forms across the dealer portal are untouched.
     PB renders each field as an <li class="wppb-form-field">. */
  .ct-form--wppb .wppb-user-forms{ margin:0; padding:0; }
  .ct-form--wppb ul{ list-style:none; margin:0; padding:0; }
  .ct-form--wppb li.wppb-form-field{ margin:0 0 18px; list-style:none; }
  .ct-form--wppb li.wppb-form-field > br{ display:none; }
  .ct-form--wppb label{
    display:block; font-family:var(--head); font-weight:600; text-transform:uppercase;
    letter-spacing:.08em; font-size:12px; color:var(--ink); margin-bottom:8px; }
  .ct-form--wppb .wppb-required{ color:var(--blue); margin-left:3px; }

  .ct-form--wppb input[type=text],
  .ct-form--wppb input[type=email],
  .ct-form--wppb input[type=tel],
  .ct-form--wppb input[type=password],
  .ct-form--wppb select,
  .ct-form--wppb textarea{
    width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
    background:var(--mist); border:1px solid var(--line); border-radius:4px;
    padding:13px 14px; transition:border-color .15s, background .15s; }
  .ct-form--wppb input:focus,
  .ct-form--wppb select:focus,
  .ct-form--wppb textarea:focus{ outline:none; background:#fff; border-color:var(--accent); }
  .ct-form--wppb textarea{ min-height:120px; resize:vertical; }

  /* Honeypot is a spam trap — it must stay hidden. */
  .ct-form--wppb li.wppb-form-field[class*="honeypot"],
  .ct-form--wppb .wppb-honeypot{ display:none !important; }

  /* Checkbox rows ("Send these credentials via email") read as inline. */
  .ct-form--wppb input[type=checkbox]{ width:auto; margin-right:8px; }
  .ct-form--wppb input[type=checkbox] + label,
  .ct-form--wppb label > input[type=checkbox]{ display:inline-block; }

  /* Submit — (0,1,2) so Elementor's kit cannot repaint it. */
  body .ct-form--wppb input[type=submit],
  body .ct-form--wppb button[type=submit]{
    background:var(--accent) !important; color:#fff !important;
    font-family:var(--head) !important; font-weight:700 !important;
    text-transform:uppercase !important; letter-spacing:.1em !important; font-size:13px !important;
    padding:15px 34px !important; border:0 !important; border-radius:4px !important;
    cursor:pointer; transition:background .15s; width:auto; }
  body .ct-form--wppb input[type=submit]:hover,
  body .ct-form--wppb button[type=submit]:hover{ background:var(--blue-bright) !important; }

  .ct-form--wppb .wppb-error, .ct-form--wppb .wppb-form-error{
    font-family:var(--head); font-size:13.5px; border-radius:4px;
    background:var(--mist); border-left:3px solid var(--accent); padding:14px 16px; color:var(--ink); }
  .ct-form--wppb .wppb-success{
    font-family:var(--head); font-size:16px; color:var(--ink);
    background:var(--mist); border-left:3px solid var(--accent); padding:20px 22px; border-radius:4px; }
  .ct-form--wppb .wppb-description-delimiter{
    font-family:var(--body); font-size:13px; color:var(--ink-soft); margin-top:6px; }

  /* ---- .ct--top : brand panel for LONG forms ----
     The default .ct-aside centres its copy, which suits Contact's short form.
     On a tall form (dealer registration runs to 11 fields) the row is much
     taller than the viewport, so centring pushed the headline far down the
     page. Pin the copy near the top and let it follow the scroll instead. */
  .ct--top .ct-aside .inner{
    justify-content:flex-start;
    padding-top:clamp(40px,6vw,72px);
    position:sticky;
    top:calc(var(--header-h, 84px) + 28px);
    align-self:flex-start;
  }

  /* ---- Gravity Forms: section headings + sub-labels ----
     The dealership inquiry form (GF #7) groups fields under "Contact
     Information" / "Dealership Information" and uses sub-labels beneath
     multi-part Name and Address fields. Contact's form has neither, so these
     were unstyled. */
  .ct-form .gform_wrapper .gsection{
    border-bottom:1px solid var(--line); margin:34px 0 22px; padding-bottom:10px; }
  .ct-form .gform_wrapper .gsection:first-child{ margin-top:0; }
  .ct-form .gform_wrapper .gsection_title{
    font-family:var(--seapro-display); font-weight:800; text-transform:uppercase;
    letter-spacing:.02em; font-size:19px; color:var(--ink); margin:0; }
  .ct-form .gform_wrapper .ginput_complex label,
  .ct-form .gform_wrapper .gform_fileupload_rules,
  .ct-form .gform_wrapper .gfield_description{
    font-family:var(--body); font-weight:400; text-transform:none;
    letter-spacing:0; font-size:13px; color:var(--ink-soft); margin-top:6px; }