/* =========================================================================
   dd-home.css — the homepage + the footer in ELEMENTOR's markup (13.10.2026)
   The approved homepage (dd-site.css) was written for its own markup (h2.dd-x, ul > li, small …). In Elementor every
   element is a container or a widget: the classes sit on the widget's wrapper and its text is inside
   (.elementor-widget-container > p / h2.elementor-heading-title). These rules give that markup the SAME look —
   compared section by section with the approved page (tools/home-sections.mjs). Loaded with dd-elementor.css.
   ========================================================================= */

/* a list that IS a Text Editor's content (the services list, the footer links): its class is on the widget — the list
   itself without the browser's bullets / indent, as the design's list (a list inside rich text keeps them) */
.elementor-widget-text-editor[class*="dd-"] > .elementor-widget-container > :is(ul, ol):only-child { list-style: none; margin: 0; padding: 0; }
/* a paragraph (Text Editor marked dd-t-p): its spacing is the widget's (the design's p rules, generated below) — the
   paragraph inside has none of its own (Elementor's "Paragraph Spacing" of the widget still wins) */
.elementor-widget-text-editor.dd-t-p > .elementor-widget-container > p:only-child { margin: 0; }
/* a design button with an arrow (span.dd-arrow inside its text): text + arrow side by side, as the design's button */
.elementor-widget-button.dd-btn .elementor-button-text { display: inline-flex; align-items: center; gap: .8em; }


/* ---------- FAQ (Nested Accordion; the approved .dd-faq-orig__item / summary / .dd-faq-orig__q / __icon) ----------
   the question's colour + size = Elementor's own accordion variables (the panel's "Title" colour / typography win; its size in
   the panel = var(--dd-faq-q, 20px): 20px, 18px up to 767px as approved — any value typed there replaces it);
   the plus circle is drawn on the row (the accordion's own icons are off) */
.elementor-widget-n-accordion.dd-faq-orig__list { --n-accordion-title-font-size: 20px; --n-accordion-title-normal-color: var(--dd-brick); --n-accordion-title-hover-color: var(--dd-brick); --n-accordion-title-active-color: var(--dd-brick); }
.dd-faq-orig__list .e-n-accordion { display: flex; flex-direction: column; gap: 0; }
.dd-faq-orig__list .e-n-accordion-item { margin: 0 0 19.5px; border: 0; } /* (WordPress: between the items = the accordion's "Space between items", 19.5px — the panel's value) */
.dd-faq-orig__list .e-n-accordion-item-title { list-style: none; display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 53px; padding: 0; border: 0; background: none; cursor: pointer; font-weight: 700; }
.dd-faq-orig__list .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.dd-faq-orig__list .e-n-accordion-item-title-header { flex: 0 1 auto; }
.dd-faq-orig__list .e-n-accordion-item-title-text { margin: 0; background: #E5E5E5; border-radius: 72px 72px 0 72px; padding: 7.2px 14.4px; line-height: 1.85; font-weight: 700; letter-spacing: normal; color: var(--n-accordion-title-normal-color); }
.dd-faq-orig__list .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--n-accordion-title-hover-color, var(--n-accordion-title-normal-color)); }
.dd-faq-orig__list .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text { color: var(--n-accordion-title-active-color, var(--n-accordion-title-normal-color)); }
.dd-faq-orig__list .e-n-accordion-item-title-icon { display: none; }
.dd-faq-orig__list .e-n-accordion-item-title::after { content: ""; flex: none; width: 28.8px; height: 28.8px; border-radius: 50%; background: var(--dd-navy) linear-gradient(#E5E5E5, #E5E5E5) center / 12px 2.4px no-repeat; transition: transform .4s ease, background-color .3s; }
.dd-faq-orig__list .e-n-accordion-item:not([open]) .e-n-accordion-item-title::after { background-image: linear-gradient(#E5E5E5, #E5E5E5), linear-gradient(#E5E5E5, #E5E5E5); background-size: 12px 2.4px, 2.4px 12px; background-position: center, center; background-repeat: no-repeat; }
.dd-faq-orig__list .e-n-accordion-item[open] .e-n-accordion-item-title::after { background-color: var(--dd-brick); transform: rotate(45deg); background-image: linear-gradient(#E5E5E5, #E5E5E5), linear-gradient(#E5E5E5, #E5E5E5); background-size: 12px 2.4px, 2.4px 12px; background-position: center, center; background-repeat: no-repeat; }
.dd-faq-orig__list .e-n-accordion-item-title:focus-visible { outline: 3px solid var(--dd-brick); outline-offset: 3px; border-radius: 40px; }
.dd-faq-orig__list .e-n-accordion-item > .e-con.dd-faq-orig__a { display: block; padding: 0; border: 0; overflow: hidden; }
:where(.elementor .dd-form--footer .elementor-field-type-acceptance label, .elementor .dd-form--footer .elementor-field-type-acceptance a):not(.dd-z.dd-z.dd-z z z z z z z z z z z z z z z z z z z z z) { color: inherit; }
/* (the prototype has no Elementor CSS: the same use of the size variable as Elementor's own accordion) */
:where(body:not([class*="elementor-kit-"])) .dd-faq-orig__list .e-n-accordion-item-title-text { font-size: var(--n-accordion-title-font-size); }
@media (max-width: 767px) { .elementor-widget-n-accordion.dd-faq-orig__list { --n-accordion-title-font-size: 18px; --dd-faq-q: 18px; } .dd-faq-orig__list .e-n-accordion-item-title-text { line-height: 1.5; } }


/* a list item (dd-t-li Text Editor): its text runs inline after the item marker (::before — the check mark), as in an <li> */
.elementor-widget.dd-t-li > .elementor-widget-container { display: inline; }
/* (a widget's max width from the design — --dd-max-w, see editable-css.mjs — through Elementor's own cap of a widget in a container;
   a widget whose Width is set in the panel keeps Elementor's rules: elementor-widget__width-*) */
.elementor.elementor :is(.dd-hero, .dd-wall, .dd-projects, .dd-interest, .dd-ring, .dd-clients, .dd-about, .dd-services, .dd-process, .dd-reviews, .dd-advs, .dd-gets2, .dd-whysec, .dd-book, .dd-community2, .dd-faq-orig, .dd-articles, .dd-run, .dd-footer) > .elementor-widget:not([class*="elementor-widget__width-"]), .elementor.elementor :is(.dd-hero, .dd-wall, .dd-projects, .dd-interest, .dd-ring, .dd-clients, .dd-about, .dd-services, .dd-process, .dd-reviews, .dd-advs, .dd-gets2, .dd-whysec, .dd-book, .dd-community2, .dd-faq-orig, .dd-articles, .dd-run, .dd-footer) .e-con > .elementor-widget:not([class*="elementor-widget__width-"]) { max-width: var(--dd-max-w, 100%); }
/* the red "run" section (16.10.2026): the running sentence is as wide as its text (the prototype's inline-block h2), so the whole
   sentence travels across the screen — the 100% cap is Elementor's base rule, not a panel choice; the width = Advanced → Width: Inline */
.elementor.elementor .e-con > .elementor-widget.dd-run__line { max-width: none; }
/* (the theme — Astra — makes <b> / <strong> a fixed 700; the approved page has the browser's own "bolder than its parent":
   a heading of 600 with <b> = 900. Same weight (0,0,1), loaded after the theme) */
:where([class*="dd-"]) :is(b, strong) { font-weight: bolder; }
/* (the theme — Astra — styles every <blockquote>: padding, a side border, italic, 1.2em, its own colour; the approved page has the browser's own
   blockquote. Restored inside the design's content, same weight (0,0,1), loaded after the theme — the design's rules win) */
:where([class*="dd-"]) blockquote { margin-block: 1em; margin-inline: 40px; padding: 0; border: 0; font-style: normal; font-size: inherit; color: inherit; }
/* (the theme makes <small> 80%; the approved page has the browser's own "smaller") */
:where([class*="dd-"]) small { font-size: smaller; }
/* (on phones Elementor makes every container wrap — its default --flex-wrap-mobile; the approved boxes never wrap unless the design
   says so: that default only, for the homepage / footer (0,2,0) — a wrap set by the design or in the panel wins) */
:where(.dd-hero, .dd-wall, .dd-projects, .dd-interest, .dd-ring, .dd-clients, .dd-about, .dd-services, .dd-process, .dd-reviews, .dd-advs, .dd-gets2, .dd-whysec, .dd-book, .dd-community2, .dd-faq-orig, .dd-articles, .dd-run, .dd-footer, .dd-hero .e-con, .dd-wall .e-con, .dd-projects .e-con, .dd-interest .e-con, .dd-ring .e-con, .dd-clients .e-con, .dd-about .e-con, .dd-services .e-con, .dd-process .e-con, .dd-reviews .e-con, .dd-advs .e-con, .dd-gets2 .e-con, .dd-whysec .e-con, .dd-book .e-con, .dd-community2 .e-con, .dd-faq-orig .e-con, .dd-articles .e-con, .dd-run .e-con, .dd-footer .e-con):not(.dd-z.dd-z) { --flex-wrap-mobile: nowrap; }
/* ---------- the footer revealed underneath (Theme Builder footer: its location wrapper takes no box, so the footer is sticky against the page, as approved) ---------- */
.elementor-location-footer { display: contents; }
/* (WordPress: the page content above it = the prototype's .dd-page — one layer over the footer it slides off) */
body > .elementor:not(.elementor-location-header):not(.elementor-location-footer):has(~ .elementor-location-footer) { position: relative; z-index: 1; }
/* ---------- the forms (Form widget; the approved .dd-form / .dd-form__row / .dd-field / .dd-consent) ----------
   layout = Elementor's own: each field's "Column Width" (33% · 100% from tablet), the form's Columns / Rows Gap (14px) */
.dd-form--home .elementor-field-group:not(.elementor-field-type-acceptance):not(.e-form__buttons) { display: block; }
:where(.elementor .dd-form--home .elementor-field-group > .elementor-field-label):not(.dd-z.dd-z.dd-z z z z z z z z z z z z z z z z z z z z z) { display: block; font-size: .92rem; margin: 0 0 6px; padding: 0; color: inherit; font-weight: 400; line-height: 1.7; }
.dd-form--home .elementor-field-group .elementor-field-textual { width: 100%; min-height: 54px; padding: 10px 16px; border-radius: 12px; border: 1.5px solid rgb(255 255 255 / .55); background: rgb(255 255 255 / .08); color: inherit; font: inherit; font-size: 1em; line-height: 1.7; }
.dd-form--home .elementor-field-textual::placeholder { color: rgb(255 255 255 / .7); }
.dd-form--home .elementor-field-type-acceptance .elementor-field-subgroup, .dd-form--home .elementor-field-type-acceptance .elementor-field-option { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; line-height: 1.55; margin: 0; width: 100%; }
.dd-form--home .elementor-field-type-acceptance .elementor-field-option label { color: inherit; font: inherit; }
.dd-form--home .elementor-field-type-acceptance input { width: 20px; height: 20px; flex: none; margin: 3px 0 0; accent-color: var(--dd-navy); }
.dd-form--home .elementor-form-fields-wrapper > .dd-note { flex: 0 0 calc(100% - 14px); margin: 0 7px 13.44px; } /* (the prototype's note only — no such note in WordPress) */
.dd-form--home .e-form__buttons { justify-content: flex-start; }
:where(.elementor .dd-form--home .elementor-button):not(.dd-z.dd-z.dd-z z z z z z z z z z z z z z z z z z z z z) { display: inline-flex; align-items: center; justify-content: center; gap: .8em; min-height: 54px; padding: .65em 1.7em; border-radius: 999px; border: 1.5px solid transparent; font: inherit; font-size: clamp(1rem, .95rem + .25vw, 1.2rem); font-weight: 700; line-height: 1.2; background: var(--dd-navy); color: #fff; }
.dd-form--home .elementor-button[disabled] { opacity: .6; cursor: not-allowed; }
.dd-footer .dd-form--home .elementor-field-textual, .dd-form--footer .elementor-field-textual { border-color: color-mix(in srgb, var(--dd-cream) 40%, transparent); }
:where(.elementor .dd-form--footer .elementor-button):not(.dd-z.dd-z.dd-z z z z z z z z z z z z z z z z z z z z z z) { background: var(--dd-brick); }
/* (the prototype has no Elementor CSS: the same form layout as Elementor's own — field widths, the 14px gaps) */
:where(body:not([class*="elementor-kit-"])) .dd-form--home .elementor-form-fields-wrapper { display: flex; flex-wrap: wrap; margin: 0 -7px; }
:where(body:not([class*="elementor-kit-"])) .dd-form--home .elementor-field-group { padding: 0 7px; margin: 0 0 14px; box-sizing: border-box; }
:where(body:not([class*="elementor-kit-"])) .dd-form--home .elementor-col-33 { width: 33.333%; }
:where(body:not([class*="elementor-kit-"])) .dd-form--home .elementor-col-100 { width: 100%; }
@media (max-width: 899px) { :where(body:not([class*="elementor-kit-"])) .dd-form--home .elementor-col-33 { width: 100%; } .dd-form--home .e-form__buttons .elementor-button { width: 100%; } }