/* next/pages/contact.css: page block for /contact-us/ (route "contact", templates/contact.php).
   Loaded by that template only, after next/site.css (next/page-css.php). Every rule is scoped to
   body.dgn-page[data-page="contact"] (KIT 9): .dgn-page is printed only by rebuilt templates, so the
   old /contact-us/ body, printed under the new chrome with the same data-page, is never restyled.
   Kit classes and tokens only; no new colours.

   The contact form is Elementor Pro's own markup (page 2038, widget abad4bf), printed unchanged. It is
   dressed here with the kit form rules (KIT 8 "Field", "Controls", "Errors": .dgn-label, .dgn-input,
   the gold focus ring, text errors) by aiming at Elementor's own classes. Elementor's CSS still loads
   on this route (the form's scripts need Elementor); the strongest rule it has for this widget is
   .elementor-2038 .elementor-element.elementor-element-abad4bf .elementor-field-group
   .elementor-field:not(.elementor-select-wrapper) (0,6,0, the white field background), so every field
   rule below is (0,7,1) or more. No !important. */

/* ---------- hero: H1, the Support Zone and FAQ rows left; the form card right ---------- */
body.dgn-page[data-page="contact"] .dgn-ct-hero .dgn-hero__card{align-self:start;min-width:0}
body.dgn-page[data-page="contact"] .dgn-ct-hero .dgn-hero__bot{max-width:640px}
body.dgn-page[data-page="contact"] .dgn-ct-routes{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--dgn-line2)}
body.dgn-page[data-page="contact"] .dgn-ct-route{display:flex;flex-direction:column;align-items:flex-start;padding:24px 0 26px;border-bottom:1px solid var(--dgn-line)}
body.dgn-page[data-page="contact"] .dgn-ct-route .dgn-tag{white-space:normal}
body.dgn-page[data-page="contact"] .dgn-ct-route__h{margin-top:12px;font-family:var(--dgn-fd);font-stretch:92%;font-weight:800;font-size:22px;line-height:1.2;letter-spacing:-.005em;color:#fff;text-wrap:balance}
body.dgn-page[data-page="contact"] .dgn-ct-route p:not(.dgn-tag){margin-top:8px;font-size:15px;line-height:1.65;color:#c6c6ce;text-wrap:pretty}
body.dgn-page[data-page="contact"] .dgn-ct-route p.dgn-ct-route__d{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--dgn-muted)}
body.dgn-page[data-page="contact"] .dgn-ct-route__go{margin-top:18px}
body.dgn-page[data-page="contact"] .dgn-ct-status{margin-top:22px;padding-left:14px;border-left:2px solid rgba(251,191,36,.55);font-size:13.5px;line-height:1.6;color:var(--dgn-muted);text-wrap:pretty}
body.dgn-page[data-page="contact"] .dgn-ct-status a{font-weight:600;color:var(--dgn-gold);text-decoration:underline;text-decoration-color:rgba(251,191,36,.4);text-underline-offset:3px}
body.dgn-page[data-page="contact"] .dgn-ct-status a:is(:hover,:focus){color:var(--dgn-gold);text-decoration-color:currentColor}
/* the trust row sits under the form card, as home puts its tabs under its card */
body.dgn-page[data-page="contact"] .dgn-ct-side .dgn-trust{margin-top:34px;max-width:none}

/* the form card: the hero card look (.dgn-proofcard), a heading, then the form */
body.dgn-page[data-page="contact"] .dgn-ct-card{padding:22px 30px 30px}
body.dgn-page[data-page="contact"] .dgn-ct-card__h{margin-top:24px;font-family:var(--dgn-fd);font-stretch:86%;font-weight:800;font-size:clamp(28px,2.4vw,36px);line-height:1.02;letter-spacing:-.015em;color:#fff}
body.dgn-page[data-page="contact"] .dgn-ct-card__p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--dgn-muted);text-wrap:pretty}
body.dgn-page[data-page="contact"] .dgn-ct-form{margin-top:24px;color:var(--dgn-text);font-family:var(--dgn-fb)}

/* ---------- the Elementor Pro form, in kit form rules ---------- */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form{margin:0;padding:0}
/* Name and Email side by side; Message, Turnstile and the button full width */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-form-fields-wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin:0;padding:0}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-form-fields-wrapper>.elementor-field-group{grid-column:1/-1;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:9px;width:auto;max-width:none;min-width:0;margin:0;padding:0}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-form-fields-wrapper>:is(.elementor-field-group-name,.elementor-field-group-email){grid-column:auto}
/* labels: the kit label (.dgn-label) */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group>.elementor-field-label{display:block;margin:0;padding:0;font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:11px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:#d8d8de;cursor:pointer}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-required>.elementor-field-label::after{content:"Required";margin-left:10px;font-family:var(--dgn-fb);font-stretch:100%;font-weight:500;font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--dgn-dim)}
/* text fields: .dgn-input (48px, 10px radius, faint fill, gold focus ring) */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual{display:block;flex:none;width:100%;max-width:100%;height:48px;min-height:48px;margin:0;padding:0 16px;border:1px solid var(--dgn-line2);border-radius:10px;background:rgba(255,255,255,.03);box-shadow:none;color:var(--dgn-text);font:400 15px/1.4 var(--dgn-fb);letter-spacing:0;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group textarea.elementor-field.elementor-field-textual{height:auto;min-height:172px;padding:13px 16px;line-height:1.6;resize:vertical}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual::placeholder{color:#74747e;opacity:1}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual:hover{border-color:var(--dgn-line3)}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual:focus{border-color:var(--dgn-gold);box-shadow:0 0 0 3px rgba(251,191,36,.25);outline:0;background-color:rgba(255,255,255,.04);color:var(--dgn-text)}
/* browser autofill keeps the dark field */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual:-webkit-autofill{-webkit-text-fill-color:var(--dgn-text);caret-color:var(--dgn-text);-webkit-box-shadow:0 0 0 80px #111116 inset;box-shadow:0 0 0 80px #111116 inset;transition:background-color 99999s}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 80px #111116 inset,0 0 0 3px rgba(251,191,36,.25);box-shadow:0 0 0 80px #111116 inset,0 0 0 3px rgba(251,191,36,.25)}

/* errors (Elementor Pro adds .elementor-error and an inline .elementor-help-inline message): the
   kit rule, red only with text */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group.elementor-error .elementor-field.elementor-field-textual{border-color:var(--dgn-error)}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group.elementor-error .elementor-field.elementor-field-textual:focus{box-shadow:0 0 0 3px rgba(248,113,113,.25)}

/* form messages (sent / not sent), added by Elementor Pro after an AJAX submit */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-message{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;padding:14px 16px;border:1px solid var(--dgn-line2);border-left:2px solid var(--dgn-gold);border-radius:10px;background:rgba(255,255,255,.03);font:500 14px/1.55 var(--dgn-fb);letter-spacing:0;color:var(--dgn-text)}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-message::before{content:"";display:block;flex:none;width:16px;height:16px;margin:2px 0 0;background:center/16px 16px no-repeat;font-family:inherit}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form :is(.elementor-message-success,.form-message-success){border-color:rgba(74,222,128,.32);border-left-color:var(--dgn-prop);background:rgba(74,222,128,.06)}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form :is(.elementor-message-success,.form-message-success)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%234ade80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-message-danger{border-color:rgba(248,113,113,.3);border-left-color:var(--dgn-error);background:rgba(248,113,113,.05)}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-message-danger::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%23f87171' stroke-width='1.5'/%3E%3Cpath d='M8 4.6v4.2' stroke='%23f87171' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='.95' fill='%23f87171'/%3E%3C/svg%3E")}
/* the inline message under a field is a plain text error (.dgn-field__err) */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group .elementor-message.elementor-help-inline{display:block;margin:0;padding:0;border:0;border-radius:0;background:none;font:400 12.5px/1.5 var(--dgn-fb);color:var(--dgn-error)}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-group .elementor-message.elementor-help-inline::before{content:none}

/* Cloudflare Turnstile (added by the plugin's elementor-forms.js before the button): room reserved,
   so the button does not jump when the check loads */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .cf-turnstile{min-height:65px}

/* the button: the kit's gold button (.dgn-btn--gold), full width; it is this view's one solid gold
   button (the page's job is the message) */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-type-submit{margin-top:4px}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:100%;height:56px;min-height:56px;margin:0;padding:0 28px;border:0;border-radius:12px;background:var(--dgn-grad);color:var(--dgn-on-gold);box-shadow:0 12px 36px -16px rgba(251,191,36,.6),inset 0 1px 0 rgba(255,255,255,.55);font:600 15px/1.2 var(--dgn-fb);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .25s var(--dgn-ease),box-shadow .25s}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]:is(:hover,:focus){background:var(--dgn-grad);color:var(--dgn-on-gold)}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 18px 44px -16px rgba(251,191,36,.8),inset 0 1px 0 rgba(255,255,255,.6)}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]:is(:hover,:focus-visible)::after{left:130%}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]:focus-visible{outline:2px solid var(--dgn-gold);outline-offset:3px}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"][disabled]{cursor:progress;transform:none}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-button .elementor-button-content-wrapper{display:flex;align-items:center;justify-content:center;gap:10px}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-button .elementor-button-text{white-space:nowrap}
/* the kit's arrow after the label (decorative: empty alt text where supported) */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-button .elementor-button-text:not(.elementor-form-spinner)::after{content:"\2192";content:"\2192" / "";display:inline-block;margin-left:10px;transition:transform .25s var(--dgn-ease)}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-button:is(:hover,:focus-visible) .elementor-button-text:not(.elementor-form-spinner)::after{transform:translateX(4px)}
/* the sending spinner Elementor Pro adds to the button: a kit ring in place of the icon font */
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-form-spinner{display:inline-flex;align-items:center}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-form-spinner i{display:none}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-form-spinner::before{content:"";display:block;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dgn-ct-spin .8s linear infinite}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-form-spinner:has(svg)::before{content:none}
body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-form-spinner svg{width:15px;height:15px;fill:currentColor;animation:dgn-ct-spin .8s linear infinite}
@keyframes dgn-ct-spin{to{transform:rotate(360deg)}}

/* the live "temporarily unavailable" line, when Elementor cannot render the form */
body.dgn-page[data-page="contact"] .dgn-ct-form .dg-contact-form-unavailable{padding:14px 16px;border:1px solid var(--dgn-line2);border-left:2px solid var(--dgn-gold);border-radius:10px;background:rgba(255,255,255,.03);font-size:14px;line-height:1.55;color:var(--dgn-text)}

/* ---------- self-service resources: four hairline columns, each one link ---------- */
body.dgn-page[data-page="contact"] .dgn-ct-res .dgn-lead a{color:var(--dgn-gold);text-decoration:underline;text-decoration-color:rgba(251,191,36,.4);text-underline-offset:3px}
body.dgn-page[data-page="contact"] .dgn-ct-res .dgn-lead a:is(:hover,:focus){color:var(--dgn-gold);text-decoration-color:currentColor}
body.dgn-page[data-page="contact"] .dgn-ct-res__cols{margin-top:14px}
body.dgn-page[data-page="contact"] .dgn-ct-res__n{display:block;margin-bottom:10px;font-family:var(--dgn-fd);font-stretch:72%;font-weight:850;font-size:44px;line-height:.9;color:transparent;-webkit-text-stroke:1px var(--dgn-gold);font-variant-numeric:tabular-nums}
body.dgn-page[data-page="contact"] .dgn-ct-res__c .dgn-h3{transition:color .2s}
body.dgn-page[data-page="contact"] .dgn-ct-res__c p{margin-bottom:10px}
/* the column's link covers the whole column, as each live card was one link */
body.dgn-page[data-page="contact"] .dgn-ct-res__go::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}
body.dgn-page[data-page="contact"] .dgn-ct-res__go:focus-visible{outline:2px solid var(--dgn-gold);outline-offset:4px}
body.dgn-page[data-page="contact"] .dgn-ct-res__c:hover .dgn-h3{color:var(--dgn-gold)}
body.dgn-page[data-page="contact"] .dgn-ct-res__c:hover .dgn-ct-res__go{border-bottom-color:var(--dgn-gold)}
body.dgn-page[data-page="contact"] .dgn-ct-res__c:hover .dgn-arr{transform:translateX(4px)}

/* ---------- widths ---------- */
/* 1141-1599: the card column is only 459-504px wide, so the kit's equal trust cells wrapped
   "traders building wealth" onto a second line. Content-sized cells, tighter inner padding and none
   after the last cell keep all three on one line, as on home (review, 24 Sep) */
@media (min-width:1141px) and (max-width:1599px){
  body.dgn-page[data-page="contact"] .dgn-ct-side .dgn-trust>div{flex:1 1 auto;padding-right:12px}
  body.dgn-page[data-page="contact"] .dgn-ct-side .dgn-trust>div+div{padding-left:14px}
  body.dgn-page[data-page="contact"] .dgn-ct-side .dgn-trust>div:last-child{padding-right:0}
}
/* 1141-1239: below 504px the three still do not fit at 30px; the kit's phone sizes (26px) do */
@media (min-width:1141px) and (max-width:1239px){
  body.dgn-page[data-page="contact"] .dgn-ct-side .dgn-trust b{font-size:26px}
  body.dgn-page[data-page="contact"] .dgn-ct-side .dgn-trust small{font-size:12px}
}
@media (min-width:1600px){
  body.dgn-page[data-page="contact"] .dgn-ct-hero .dgn-hero__bot{max-width:680px}
  body.dgn-page[data-page="contact"] .dgn-ct-card{padding:24px 36px 34px}
  body.dgn-page[data-page="contact"] .dgn-ct-route__h{font-size:24px}
}
/* tablets and phones: the rows before the form (the live order), then the form card and the trust row */
@media (max-width:1140px){
  body.dgn-page[data-page="contact"] .dgn-ct-hero .dgn-hero__grid{grid-template-areas:"top" "bot" "card"}
  body.dgn-page[data-page="contact"] .dgn-ct-hero .dgn-hero__bot{max-width:720px}
  body.dgn-page[data-page="contact"] .dgn-ct-routes{margin-top:0}
  body.dgn-page[data-page="contact"] .dgn-ct-hero .dgn-hero__card{width:100%}
  body.dgn-page[data-page="contact"] .dgn-ct-side .dgn-trust{max-width:560px}
}
@media (max-width:720px){
  body.dgn-page[data-page="contact"] .dgn-ct-route{padding:20px 0 22px}
  body.dgn-page[data-page="contact"] .dgn-ct-route__h{font-size:20px}
  body.dgn-page[data-page="contact"] .dgn-ct-route p:not(.dgn-tag){font-size:14.5px}
  body.dgn-page[data-page="contact"] .dgn-ct-card{padding:16px 16px 20px}
  body.dgn-page[data-page="contact"] .dgn-ct-card__h{margin-top:18px}
  body.dgn-page[data-page="contact"] .dgn-ct-form{margin-top:20px}
  body.dgn-page[data-page="contact"] .dgn-ct-res__n{font-size:38px}
  /* phones: a button never shrinks below its label; when two do not fit side by side, each takes the full row */
  body.dgn-page[data-page="contact"] .dgn-cta-row .dgn-btn{min-width:-webkit-max-content;min-width:max-content}
}
@media (max-width:560px){
  body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-form-fields-wrapper{grid-template-columns:minmax(0,1fr);gap:18px}
  body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-form-fields-wrapper>:is(.elementor-field-group-name,.elementor-field-group-email){grid-column:1/-1}
}
/* the Turnstile check is 300px wide: keep it inside the card down to a 360px screen */
@media (max-width:400px){
  body.dgn-page[data-page="contact"] .dgn-ct-card{padding-left:12px;padding-right:12px}
}

/* Audit fix, 24 Sep 2026: iOS Safari zooms the page when a field under 16px takes focus (the viewport meta has no
   maximum-scale). On phones and touch screens every text-type field on this page is 16px; desktops keep 15px. */
@media (max-width:720px),(pointer:coarse){
  html body.dgn-page[data-page="contact"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]),select,textarea){font-size:16px !important}
}

/* ---------- reduced motion ---------- */
/* site.css already stops every animation and transition inside .dgn-main (the sending ring then shows
   as a still ring); this only drops the hover lift and the shimmer on the button */
@media (prefers-reduced-motion:reduce){
  body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]:is(:hover,:focus-visible){transform:none}
  body.dgn-page[data-page="contact"] .dgn-ct-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]::after{display:none}
}