/* Generic form styling — targets plain input/textarea/select/button markup so any
   form plugin's output (WPForms, Gravity, Fluent, CF7, Elementor Forms) inherits the
   design system automatically. Wrap third-party form output in .dd-form-wrap. */

.dd-form,.dd-form-wrap{background:#fff;border:1px solid var(--dd-border);border-radius:28px;padding:40px;display:grid;gap:22px}
.dd-form label{display:grid;gap:9px}
.dd-form .field-label{font-family:var(--dd-font-ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(21,18,15,.5)}

.dd-form input[type=text],
.dd-form input[type=email],
.dd-form input[type=tel],
.dd-form input:not([type]),
.dd-form select,
.dd-form textarea,
.dd-form-wrap input[type=text],
.dd-form-wrap input[type=email],
.dd-form-wrap input[type=tel],
.dd-form-wrap select,
.dd-form-wrap textarea{
  font-family:var(--dd-font-body);font-size:15px;color:var(--dd-ink);background:var(--dd-paper);
  border:1px solid var(--dd-border-input);border-radius:12px;padding:14px 16px;outline:none;width:100%;box-sizing:border-box
}
.dd-form textarea,.dd-form-wrap textarea{resize:vertical}
/* A <select> lays its own line box out slightly taller than a text input with the same
   padding, so "I am a" stood 2px proud of the fields above and below it. Pinned to the
   text inputs' computed height (14+14 padding + 19px line + 2px border); a select centres
   its text vertically, so the baseline still lines up. */
.dd-form select,.dd-form-wrap select{height:49px;padding-top:0;padding-bottom:0}
.dd-form input:focus,.dd-form select:focus,.dd-form textarea:focus,
.dd-form-wrap input:focus,.dd-form-wrap select:focus,.dd-form-wrap textarea:focus{
  border-color:var(--dd-signal-3);background:#fff
}
.dd-form button[type=submit],.dd-form-wrap button[type=submit],
.dd-form input[type=submit],.dd-form-wrap input[type=submit]{
  font-family:var(--dd-font-ui);font-size:15px;color:#fff;background:var(--dd-gradient);
  padding:16px;border-radius:999px;margin-top:6px;border:0;width:100%;cursor:pointer;transition:transform .25s var(--dd-ease)
}
.dd-form button[type=submit]:hover,.dd-form-wrap button[type=submit]:hover{transform:translateY(-2px)}

/* Per-plugin coverage — the generic input/select/textarea/button rules above already
   catch most of each plugin's actual fields, since they all render standard form
   elements; these add the field-group spacing and label/error treatment each plugin
   wraps around them, using each plugin's stable, documented CSS classes. */

/* WPForms */
.dd-form-wrap .wpforms-field{margin-bottom:20px}
.dd-form-wrap .wpforms-field-label{font-family:var(--dd-font-ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(21,18,15,.5);margin-bottom:9px;display:block}
.dd-form-wrap .wpforms-field-label-inline,.dd-form-wrap .wpforms-field-description{color:var(--dd-ink-soft);font-family:var(--dd-font-body)}
.dd-form-wrap .wpforms-field-required{color:var(--dd-signal-3)}
.dd-form-wrap .wpforms-submit-container{margin-top:6px}
.dd-form-wrap .wpforms-error{color:#c0392b;font-size:13px}

/* Contact Form 7 */
/* CF7 wraps every field in its own <p>. The export lays the same fields out as a grid with
   a 22px gap and no trailing space, so the wrapper margin matches that gap and the last one
   is trimmed — otherwise the card carried an extra 20px below the button and 2px less
   between each field. */
.dd-form-wrap .wpcf7-form p{margin:0 0 22px}
.dd-form-wrap .wpcf7-form p:last-of-type{margin-bottom:0}
.dd-form-wrap .wpcf7-form label{display:grid;gap:9px;font-family:var(--dd-font-ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(21,18,15,.5)}
.dd-form-wrap .wpcf7-not-valid-tip{color:#c0392b;font-size:13px;font-family:var(--dd-font-body);text-transform:none;letter-spacing:0}
.dd-form-wrap .wpcf7-response-output{border-radius:12px;font-family:var(--dd-font-body);margin-top:16px}

/* Fluent Forms */
.dd-form-wrap .ff-el-group{margin-bottom:20px}
.dd-form-wrap .ff-el-input--label label,.dd-form-wrap .fluentform label{font-family:var(--dd-font-ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(21,18,15,.5)}
.dd-form-wrap .fluentform .ff-btn-submit{font-family:var(--dd-font-ui);font-size:15px;color:#fff;background:var(--dd-gradient);padding:16px;border-radius:999px;border:0;width:100%}
.dd-form-wrap .fluentform .error{color:#c0392b;font-size:13px}

/* Gravity Forms */
.dd-form-wrap .gform_wrapper .gform_fields{display:grid;gap:20px}
.dd-form-wrap .gform_wrapper .gfield_label{font-family:var(--dd-font-ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(21,18,15,.5);display:block;margin-bottom:9px}
.dd-form-wrap .gform_wrapper .gform_footer{margin-top:6px}
.dd-form-wrap .gform_wrapper .gform_button{font-family:var(--dd-font-ui);font-size:15px;color:#fff;background:var(--dd-gradient);padding:16px;border-radius:999px;border:0;width:100%;cursor:pointer}
.dd-form-wrap .gform_wrapper .validation_message{color:#c0392b;font-size:13px}

.contact-info-list{display:grid;gap:1px;background:rgba(21,18,15,.12);border:1px solid rgba(21,18,15,.12);border-radius:20px;overflow:hidden}
.contact-info-row{background:var(--dd-paper);padding:22px 26px;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.contact-info-row .k{font-family:var(--dd-font-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(21,18,15,.45);flex:none}
.contact-info-row .v{font-family:var(--dd-font-grotesk);font-size:17px}

/* On a phone the card is 335px wide with 26px of padding either side, leaving 283px of
   room. "CORPORATE" plus its address needs 301px, so that one row wrapped its value onto a
   second line and stood 34px taller than its three neighbours — the approved design keeps
   all four rows identical, label left and value right on one line. The row stops wrapping
   and the value is allowed to shrink to the space that is left, which is enough for every
   address at every width down to 320px. */
@media (max-width:900px){
  .contact-info-row{flex-wrap:nowrap;gap:14px}
  .contact-info-row .v{min-width:0;text-align:right;font-size:clamp(13.5px,3.9vw,17px)}
}

/* ===========================================================================
   CONTACT PAGE — two-column composition
   QA (updated list, item 4): the export lays Contact out as a two-column grid,
   details on the left and the form on the right, not three stacked bands.

   Done in CSS rather than by re-composing the page, deliberately: the three
   widgets (page header, contact details, form) stay separate and separately
   editable in Elementor, and the Elementor document is untouched. Both render
   paths are covered — the Elementor one, where the sections sit inside
   .elementor, and the blueprint fallback, where they are direct children.
   =========================================================================== */
@media (min-width:901px){
  .dd-page-contact > .elementor,
  .dd-page-contact:has(> section.dd-container){
    display:grid;
    grid-template-columns:1fr 1fr;
    /* Three rows, the last flexible. The form card is taller than the heading and
       the details list stacked, and a spanning item distributes its extra height
       across the auto rows it spans — that pushed 111px of dead space between the
       lede and the details card. Spanning a flexible track instead sends the slack
       to the empty third row, so the left column keeps the export's 48px rhythm. */
    grid-template-rows:auto auto 1fr;
    column-gap:80px;
    align-items:flex-start;
    max-width:var(--dd-container-max);
    margin:0 auto;
    /* The page's top rhythm moves onto the grid so both columns start on the same
       line — in the export the form card's top edge is level with the heading. */
    padding:96px var(--dd-container-pad) 0;
    box-sizing:border-box;
  }
  .dd-page-contact > .elementor > * .dd-section-top,
  .dd-page-contact:has(> section.dd-container) > section.dd-section-top{padding-top:0}
  /* The sections now sit inside the page grid, so their own container must not
     apply a second max-width and a second gutter. */
  .dd-page-contact > .elementor > * > .dd-container,
  .dd-page-contact > .elementor .dd-container,
  .dd-page-contact:has(> section.dd-container) > section.dd-container{
    max-width:none;
    padding-left:0;
    padding-right:0;
  }
  /* header and details stack down the left, the form fills the right */
  .dd-page-contact > .elementor > *:nth-child(1),
  .dd-page-contact:has(> section.dd-container) > section:nth-child(1){grid-column:1;grid-row:1}
  .dd-page-contact > .elementor > *:nth-child(2),
  .dd-page-contact:has(> section.dd-container) > section:nth-child(2){grid-column:1;grid-row:2}
  .dd-page-contact > .elementor > *:nth-child(3),
  .dd-page-contact:has(> section.dd-container) > section:nth-child(3){grid-column:2;grid-row:1 / -1}
}

/* Below the grid breakpoint the export still collapses to one column but keeps
   the 80px grid gap between the details card and the form card. The theme's
   sections carry no vertical spacing of their own, so the two cards butted
   together. Measured at 390 and 768: export 80px, theme was 0px. */
@media (max-width:900px){
  /* .dd-page-flow .elementor-section.dd-elementor-section{margin:0} ties on
     specificity and loads later, so the section selector is named explicitly. */
  .dd-page-contact > .elementor > *:nth-child(3),
  .dd-page-contact > .elementor > .elementor-section.dd-elementor-section:nth-child(3),
  .dd-page-contact:has(> section.dd-container) > section:nth-child(3){margin-top:80px}

  /* Once the page is one column the lede has the full column to run in, and the export
     lets it — below 901px it releases every max-width. The theme was still holding the
     44ch desktop measure, so at tablet widths the paragraph wrapped roughly 185px early
     against the export. The measure is an inline style on the element, so this has to
     out-rank it; scoped to the Contact page, which is the page being matched. */
  .dd-page-contact .page-hero-intro,
  .dd-page-contact .dd-section-top p[style*="max-width"]{max-width:100% !important}
}

/* ---------------------------------------------------------------------------
   Contact Form 7 chrome.

   Everything CF7 places ahead of the first field is plumbing — the screen-reader
   live region, the hidden verification inputs and their wrapper — and none of it
   should ever paint. The empty bordered box the client reported directly above
   "FULL NAME" was one of these rendering with browser-default chrome, so each is
   pinned here rather than relying on CF7's own stylesheet being enqueued or on a
   particular CF7 version's markup:

     • up to CF7 5.7 the hidden inputs were emitted bare;
     • 5.8+ wraps them in an unclassed <div style="display:none">;
     • the screen-reader region is hidden by CF7's stylesheet, which a site can
       dequeue, and which is not loaded at all in the block editor preview.
   --------------------------------------------------------------------------- */
.dd-form-wrap input[type=hidden]{display:none!important}
.dd-form-wrap .wpcf7 form > div:not([class]),
.dd-form-wrap .wpcf7 form > div[style*="display:none"],
.dd-form-wrap .wpcf7 form > div[style*="display: none"]{display:none!important}
.dd-form-wrap .wpcf7 form > p:empty,
.dd-form-wrap .wpcf7 form > fieldset:empty,
.dd-form-wrap .dd-form > p:empty{display:none!important}
.dd-form-wrap .wpcf7-form-control-wrap{display:block}
.dd-form-wrap .screen-reader-response{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  border:0!important;white-space:nowrap!important
}

/* No control inside the card may fall back to the browser's own chrome — a
   default-styled input renders as exactly the sharp-cornered, thin-grey-bordered
   ~21px box in the QA screenshot. .dd-form already covered the untyped case;
   .dd-form-wrap did not, and neither covered the newer input types. */
.dd-form-wrap input:not([type]),
.dd-form-wrap input[type=url],
.dd-form-wrap input[type=number],
.dd-form-wrap input[type=search],
.dd-form-wrap input[type=date],
.dd-form-wrap input[type=password]{
  font-family:var(--dd-font-body);font-size:15px;color:var(--dd-ink);background:var(--dd-paper);
  border:1px solid var(--dd-border-input);border-radius:12px;padding:14px 16px;outline:none;width:100%;box-sizing:border-box
}

/* The native fallback form is already inside .dd-form-wrap, which paints the white
   card — so .dd-form must not paint a second one inside it. */
.dd-form-wrap .dd-form{background:none;border:0;border-radius:0;padding:0}
/* The response paragraph is present in the markup from the first paint, before
   there is any message to show. Giving it a border unconditionally rendered it
   as an empty box under the submit button (QA item 3). CF7 only hides it via
   its own stylesheet and only while the form carries .init/.submitting, so it
   still showed whenever that sheet was dequeued or JS had not initialised.
   Default to hidden and reveal it only once CF7 has set an outcome class. */
.dd-form-wrap .wpcf7 form .wpcf7-response-output{display:none}
.dd-form-wrap .wpcf7 form.sent .wpcf7-response-output,
.dd-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.dd-form-wrap .wpcf7 form.failed .wpcf7-response-output,
.dd-form-wrap .wpcf7 form.unaccepted .wpcf7-response-output,
.dd-form-wrap .wpcf7 form.payment-required .wpcf7-response-output,
.dd-form-wrap .wpcf7 form.spam .wpcf7-response-output,
.dd-form-wrap .wpcf7 form.aborted .wpcf7-response-output{
  display:block;
  margin:8px 0 0;border:1px solid var(--dd-border);border-radius:12px;padding:14px 16px;
  font-family:var(--dd-font-body);font-size:14px
}
.dd-form-wrap .wpcf7 form.sent .wpcf7-response-output{border-color:rgba(255,138,0,.5);background:rgba(255,138,0,.07)}
.dd-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.dd-form-wrap .wpcf7 form.failed .wpcf7-response-output{border-color:rgba(255,68,0,.5);background:rgba(255,68,0,.06)}
.dd-form-wrap .wpcf7-not-valid-tip{font-family:var(--dd-font-body);font-size:12.5px;color:var(--dd-signal-4);margin-top:6px}
.dd-form-wrap .wpcf7-spinner{margin:0 auto;display:block}

/* ---------------------------------------------------------------------------
   Enquiry outcome banner (contact-notice.js).

   Sits above <main> on the Contact page and reports the result of a Contact
   Form 7 submission where the visitor will actually see it — the form's own
   .wpcf7-response-output line above stays exactly as it is, directly under the
   Send button, for anyone still looking there.

   Nothing here is new design language. The card borrows the contact details
   card's 22px/26px padding and 17px Clash Grotesk, the section cards' 24px
   radius and hover shadow, and the two outcome tints already used by
   .wpcf7-response-output immediately above: brand orange for sent, the same
   --dd-signal-4 the field-level error tips use for a failure.
   =========================================================================== */
.dd-form-notice{padding-top:32px;scroll-margin-top:calc(var(--dd-header-height) + 24px)}
.dd-form-notice[hidden]{display:none}

.dd-form-notice-card{
  display:flex;align-items:flex-start;gap:14px;
  border:1px solid var(--dd-border);border-radius:var(--dd-radius-card-lg);
  padding:22px 26px;box-shadow:var(--dd-shadow-card-hover);
  font-family:var(--dd-font-grotesk);font-size:17px;line-height:1.45;color:var(--dd-ink);
  animation:ddnoticein .45s var(--dd-ease) both
}
.dd-form-notice-text{margin:0}

/* The mark is a 26px disc carrying a glyph, so the outcome reads before the sentence does. */
.dd-form-notice-mark{
  flex:none;width:26px;height:26px;border-radius:50%;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--dd-font-ui);font-size:14px;line-height:1;color:#fff
}
.dd-form-notice.is-sent .dd-form-notice-card{border-color:rgba(255,138,0,.5);background:rgba(255,138,0,.07)}
.dd-form-notice.is-sent .dd-form-notice-mark{background:var(--dd-gradient)}
.dd-form-notice.is-sent .dd-form-notice-mark::before{content:"\2713"}
.dd-form-notice.is-error .dd-form-notice-card{border-color:rgba(255,68,0,.5);background:rgba(255,68,0,.06)}
.dd-form-notice.is-error .dd-form-notice-mark{background:var(--dd-signal-4)}
.dd-form-notice.is-error .dd-form-notice-mark::before{content:"!"}

@keyframes ddnoticein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dd-form-notice-card{animation:none}
}

@media (max-width:900px){
  .dd-form-notice{padding-top:24px}
  .dd-form-notice-card{padding:18px 20px;font-size:16px;gap:12px}
}