/* ==========================================================================
   Cdech — Elementor / Solace bridge layer.   GENERATED — do not hand-edit.
   Values are copied mechanically from the original design system
   (cdech-design.css) so they cannot drift from it. This file only re-points
   those design rules at the DOM Elementor and the Solace header/footer
   builder actually produce.
   ========================================================================== *//* ---- 1. reach the real text element inside Elementor heading/text widgets ---- */.about-content-title .elementor-heading-title { font-family: 'Cinzel', serif !important; font-size: clamp(48px, 6vw, 72px) !important; margin-bottom: 24px !important; background: linear-gradient(to bottom, #ffb347 0%, #e37027 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: drop-shadow(0 0 20px rgba(255,179,71,0.2)) !important; }
.hero-subtitle p, .hero-subtitle .elementor-widget-container { font-size: clamp(18px, 3vw, 24px) !important; color: rgba(237, 231, 218, 0.7) !important; margin-bottom: 48px !important; max-width: 768px !important; margin-left: auto !important; margin-right: auto !important; line-height: 1.6 !important; }
.hero-title .elementor-heading-title { font-family: 'Cinzel', serif !important; font-size: clamp(40px, 8vw, 65px) !important; margin-bottom: 24px !important; letter-spacing: -0.02em !important; background: linear-gradient(to bottom, #ffb347 0%, #e37027 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: drop-shadow(0 0 30px rgba(255,179,71,0.25)) !important; text-shadow: 0 0 60px rgba(227,112,39,0.15) !important; }
.page-hero-eyebrow .elementor-heading-title { font-family: 'Cinzel', serif !important; font-size: 13px !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: rgba(255,179,71,0.7) !important; margin-bottom: 16px !important; }
.page-hero-subtitle p, .page-hero-subtitle .elementor-widget-container { font-size: 18px !important; color: rgba(237,231,218,0.65) !important; line-height: 1.6 !important; }
.page-hero-title .elementor-heading-title { font-family: 'Cinzel', serif !important; font-size: clamp(36px, 6vw, 58px) !important; margin-bottom: 20px !important; background: linear-gradient(to bottom, #ffb347 0%, #e37027 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: drop-shadow(0 0 20px rgba(255,179,71,0.2)) !important; }
.section-title .elementor-heading-title { font-family: 'Cinzel', serif !important; font-size: clamp(40px, 6vw, 60px) !important; margin-bottom: 16px !important; text-align: center !important; background: linear-gradient(to bottom, #ffb347 0%, #e37027 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: drop-shadow(0 0 20px rgba(255,179,71,0.2)) !important; }
/* ---- 2. Elementor Pro forms, buttons, nav + header CTA ---- */.elementor-field-group > label.elementor-field-label { color: #ffb347 !important; margin-bottom: 8px !important; font-size: 14px !important; letter-spacing: 0.1em !important; }
.elementor-field-group .elementor-field-textual { background: rgba(14,14,17,0.5) !important; border: 1px solid rgba(227,112,39,0.5) !important; color: #ede7da !important; padding: 12px 16px !important; font-family: 'Open Sans', sans-serif !important; font-size: 16px !important; transition: all 0.3s !important; border-radius: 0 8px 0 8px !important; }
.elementor-field-group .elementor-field-textual:focus { outline: none !important; border-color: rgba(255,179,71,0.7) !important; box-shadow: 0 0 10px rgba(255,179,71,0.2), inset 0 0 10px rgba(255,179,71,0.075) !important; }
.elementor-field-group textarea.elementor-field-textual { min-height: 150px !important; resize: vertical !important; }
.elementor-field-type-submit .elementor-button, .e-form__buttons button.elementor-button { position: relative !important; width: 100% !important; background: linear-gradient(to right, #e37027, #ffb347) !important; color: white !important; border: none !important; padding: 16px 32px !important; font-size: 16px !important; border-radius: 8px !important; font-family: 'Cinzel', serif !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer !important; overflow: hidden !important; transition: all 0.3s !important; box-shadow: 0 8px 32px rgba(227,112,39,0.4) !important; margin-top: 24px !important; }
.elementor-field-type-submit .elementor-button:hover, .e-form__buttons button.elementor-button:hover { transform: scale(1.02) !important; }
.elementor-field-type-submit .elementor-button::before, .e-form__buttons button.elementor-button::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to right, #ffb347, #e37027) !important; opacity: 0 !important; transition: opacity 0.5s !important; }
.elementor-field-type-submit .elementor-button:hover::before, .e-form__buttons button.elementor-button:hover::before { opacity: 1 !important; }
.elementor-field-type-submit .elementor-button > *, .e-form__buttons button.elementor-button > * { position: relative !important; z-index: 1 !important; }
.elementor-element-8a301e8 .elementor-button { position: relative !important; background: linear-gradient(to right, #e37027, #ffb347) !important; color: white !important; border: none !important; padding: 10px 32px !important; font-size: 18px !important; border-radius: 8px !important; font-family: 'Cinzel', serif !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; cursor: pointer !important; overflow: hidden !important; transition: all 0.3s !important; box-shadow: 0 0 30px rgba(227,112,39,0.5) !important; }
.elementor-element-8a301e8 .elementor-button:hover { transform: scale(1.1) !important; }
.elementor-element-8a301e8 .elementor-button::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to right, #ffb347, #e37027) !important; opacity: 0 !important; transition: opacity 0.5s !important; }
.elementor-element-8a301e8 .elementor-button:hover::before { opacity: 1 !important; }
.elementor-element-8a301e8 .elementor-button-content-wrapper { position: relative !important; z-index: 1 !important; }
.elementor-element-ee1b375 .elementor-button { position: relative !important; background: transparent !important; color: #ffb347 !important; border: 1px solid #ffb347 !important; padding: 10px 32px 10px 30px !important; font-size: 18px !important; border-radius: 8px !important; font-family: 'Cinzel', serif !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; cursor: pointer !important; overflow: hidden !important; transition: all 0.3s !important; box-shadow: 0 0 20px rgba(255,179,71,0.3), inset 0 0 0 0px #ffb347 !important; }
.elementor-element-ee1b375 .elementor-button:hover { transform: scale(1.1) !important; background: rgba(255, 179, 71, 0.2) !important; color: white !important; box-shadow: inset 0 0 60px rgba(255,179,71,0.4), 0 0 40px rgba(255,179,71,0.6) !important; }
.cdech-footer .footer-brand p { color: rgba(237, 231, 218, 0.6) !important; line-height: 1.6 !important; }
.cdech-footer .footer-links h4 { font-family: 'Cinzel', serif !important; font-size: 18px !important; color: #ffb347 !important; margin-bottom: 16px !important; }
.cdech-footer .footer-links ul, .cdech-footer .footer-links li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.cdech-footer .footer-links a { color: rgba(237, 231, 218, 0.6) !important; text-decoration: none !important; display: block !important; margin-bottom: 8px !important; transition: color 0.3s !important; }
.cdech-footer .footer-links a:hover { color: #ffb347 !important; }
.cdech-footer .footer-bottom { padding-top: 32px !important; border-top: 1px solid rgba(255,179,71,0.1) !important; text-align: center !important; color: rgba(237, 231, 218, 0.6) !important; font-size: 14px !important; }
.cdech-footer .footer-logo { height: 90px !important; width: auto !important; display: block !important; margin-bottom: 16px !important; }
/* ---- 3. remaining widget bridges ---- */.value-card .elementor-heading-title { font-family: 'Cinzel', serif !important; color: #ffb347 !important; font-size: 18px !important; margin-bottom: 8px !important; }
.value-card .elementor-widget-text-editor p { color: rgba(237,231,218,0.6) !important; font-size: 14px !important; line-height: 1.6 !important; }
.quote-note .elementor-widget-container { color: rgba(237,231,218,0.65) !important; font-size: 14px !important; line-height: 1.6 !important; }
.contact-detail a, .contact-detail .elementor-heading-title a { color: inherit !important; text-decoration: none !important; transition: color 0.3s !important; }
.contact-detail a:hover, .contact-detail .elementor-heading-title a:hover { color: #ffb347 !important; }
#contact .contact-form-wrapper, .contact-form-wrapper { max-width: 1024px !important; margin-left: auto !important; margin-right: auto !important; }
.elementor-field-group select option { background: #1a1218 !important; }
.wrapper { background: #0e0e11; }
/* ---- 4. header chrome ----
   The original markup is a bare <nav>: position:fixed, 80px tall, blurred, with a
   1280px inner container. Solace builds the header from component slots instead,
   so the same properties are applied to the equivalent HFG elements. design.css's
   own bare nav rule is neutralised to .cdech-legacy-nav because BOTH Solace header
   rows are <nav> elements and fixing them would stack them on top of each other. */header.header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 50; }
body.admin-bar header.header { top: 32px; }
@media screen and (max-width: 782px) {body.admin-bar header.header { top: 46px; }
}
/* Header bar. Background and bottom border now read Solace's own Customizer variables
   (--bgcolor / --rowbwidth / --rowbcolor, emitted on .header-main from the row settings), so
   Appearance > Customize > Header > Main row controls them again. The design values are kept as
   the var() fallbacks, so nothing changes unless the Customizer is actually used. The blur and
   glow have no Customizer equivalent and stay fixed here. *//* ---- 5. Elementor structural fixes ----
   An .elementor-widget-html holding hand-authored design markup is a flex item
   with no width of its own, so it shrink-wraps and its inner max-width +
   margin:auto centring has no full-width box to resolve against. */.elementor-widget-html, .elementor-widget-html > .elementor-widget-container { width: 100%; }
.elementor-element-6c97d03 > .e-con-inner { justify-content: center !important; }
#services, #process, #about, #portfolio, #quote-section, #hero-anchor { position: relative; overflow: hidden; }
/* The Solace row wrapper ships flex-wrap:wrap; with three slots it wraps the CTA
   onto a second line (and, because align-items:stretch only stretches within a
   flex LINE, the slots then stop filling the 80px bar). The original nav never
   wraps — it is one 80px row — so wrapping is disabled and the centre slot is
   allowed to shrink instead (min-width:0 is required for a flex item to shrink
   below its content width). *//* ---- 6. nav-measurements ----
   Measured against the original at the same viewport: logo 207x56, the six links
   total 729px, CTA 172x40, all inside a 1280px container with 24px side padding.
   The Solace menu <ul> ships flex-wrap:wrap, so once the slots are sized the last
   two links drop to a second line; the original <ul> is nowrap. The CTA is 40px
   because in the original it is a stretch flex child of the 80px bar with 20px
   top/bottom margins — stated explicitly here since the HFG nesting is deeper. *//* ---- 7. decorative absolute layers ----
   In the original these divs (.hero-bg, .services-bg, .about-bg, .glow-orb,
   .wood-texture, .page-hero-bg ...) are position:absolute; inset:0 children of
   their <section>. In Elementor each one lives inside an .elementor-widget-html
   wrapper, and Elementor gives that wrapper position:relative — which makes it
   the containing block, so inset:0 resolves against a 0-height wrapper and the
   layer collapses to nothing. Neutralising the wrapper lets the layer resolve
   against its section again, exactly as in the original. */.elementor-widget-html.cdech-layer, .elementor-widget-html.cdech-layer > .elementor-widget-container {
  display: contents !important;
}
/* ---- 8. nav <ul> spacing ----
   The Solace menu adds ~120px of li margin/padding the original does not have
   (original: six links total 729px, <ul> exactly 728px). Left in, the <ul>
   overflows its slot and rides over the logo. *//* ---- 9. footer-font ----
   The footer sits outside .elementor, so it inherits the Solace theme's DM Sans
   instead of the design's body font. The original footer is Open Sans throughout
   (headings are Cinzel, handled above). */.cdech-footer, .cdech-footer p, .cdech-footer a, .cdech-footer li, .cdech-footer span, .cdech-footer .footer-bottom {
  font-family: 'Open Sans', sans-serif !important;
}
.cdech-footer h1, .cdech-footer h2, .cdech-footer h3, .cdech-footer h4 { font-family: 'Cinzel', serif !important; }
/* ---- 10. About body copy ----
   .about-text / .about-text-secondary sit on text-editor widgets, so the class is
   on the wrapper and the real <p> needs the values directly. */.about-text p { font-size: 20px !important; color: rgba(237, 231, 218, 0.7) !important; line-height: 1.6 !important; margin-bottom: 24px !important; }
.about-text-secondary p { font-size: 18px !important; color: rgba(237, 231, 218, 0.6) !important; line-height: 1.6 !important; margin-bottom: 24px !important; }
.cdech-footer * { font-family: 'Open Sans', sans-serif; }
.cdech-footer h1, .cdech-footer h2, .cdech-footer h3, .cdech-footer h4 { font-family: 'Cinzel', serif !important; }
/* ---- 11. section content wrappers ----
   Two wrappers in the original carry their width as an inline style rather than a
   class, so there is no design-CSS rule to reuse. Values are taken verbatim from
   the source markup:
     FAQ section    <div class="relative z-10" style="max-width:900px; margin:0 auto">
     Quote section  <div class="relative z-10" style="max-width:860px; margin:0 auto; padding:96px 24px"> *//* the quote section's own heading sits tighter than the default section title *//* ---- 11b. section content wrappers ----
   These wrappers carry their width as an inline style in the original rather than
   a class, so there is no design rule to reuse. Values copied from the source:
     What Guides the Work  max-width:1000px; margin:0 auto
     New Business          max-width:900px;  margin:0 auto; text-align:center
     FAQ                   max-width:860px;  margin:0 auto
     Quote section         max-width:860px;  margin:0 auto; padding:96px 24px */.cdech-w1000 { max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important; }
.cdech-w900c { max-width: 900px  !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
.cdech-w860 { max-width: 860px  !important; margin-left: auto !important; margin-right: auto !important; }
.cdech-w860q { max-width: 860px  !important; margin-left: auto !important; margin-right: auto !important; }
/* the quote heading sits tighter than a default section title (inline margin-bottom:8px) */.cdech-w860q .section-title .elementor-heading-title { margin-bottom: 8px !important; }
/* ---- 12. images that rely on inline styles in the original ----
   In the source markup the service-card photo carries
     style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover"
   inline. WordPress strips inline style attributes when saving HTML-widget
   content, so the photo fell back to static flow at its natural aspect ratio —
   a portrait shot then forced the whole grid row to ~813px instead of ~501px.
   Stated as a rule here so it cannot be stripped again. */.service-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
/* ---- 13. line-height baseline ----
   The original stylesheet leaves line-height at the browser default (normal)
   everywhere except the handful of rules that state 1.6 / 1.7 explicitly. Both
   the Solace theme and Elementor impose ~1.5-1.6 globally, which inflated every
   heading and card (service card 531 instead of 501, value card 173 instead of
   132, and so on). :where() carries zero specificity, so every explicit design
   line-height still wins over this baseline. */body { line-height: normal; }
:where(.elementor, .cdech-footer) h1, .cdech-footer) h2, .cdech-footer) h3, .cdech-footer) h4, .cdech-footer) h5, .cdech-footer) h6, .cdech-footer) p, .cdech-footer) span, .cdech-footer) a, .cdech-footer) li, .cdech-footer) summary, .cdech-footer) label, .cdech-footer) button { line-height: normal; }
/* ---- 14. Elementor widget gap ----
   Elementor puts a 20px gap between the widgets inside every container. The
   original has no such gap — spacing comes from each element's own margin — so it
   inflated cards (value-card 173 instead of 132). Cleared inside containers whose
   layout the design owns; Elementor's gap still applies everywhere else. */.value-card, .hero-content, .about-container > *, .contact-details, .contact-detail, .quote-form-card, .page-hero-content, .process-container {
  --gap: 0px; --grid-gap: 0px;
}
.value-card { gap: 0 !important; }
.page-hero-content, .hero-content { gap: 0 !important; }
/* the hero content block shrink-wraps in the original rather than filling the row */.hero-content { width: auto !important; }
/* ---- 15. flex-direction baseline ----
   In the original these are plain flex rows (CSS default direction). Elementor
   containers default to column via --flex-direction, so once the redundant
   Elementor direction setting was removed they collapsed into a stack. */.hero-buttons, .contact-details, .contact-detail { flex-direction: row !important; }
.hero-buttons { flex-wrap: wrap !important; gap: 24px !important; justify-content: center !important; }
.contact-details { flex-wrap: wrap !important; gap: 48px !important; justify-content: center !important; }
.contact-detail { align-items: center !important; gap: 12px !important; }
/* ---- 16. contact-detail sizing ----
   Each .contact-detail is a content-width flex item in the original; Elementor's
   e-con-full sets width:100%, which stacked them one per line. */.contact-detail { width: auto !important; flex: 0 0 auto !important; }
.contact-info { margin-top: 64px !important; text-align: center !important; }
/* ---- 17. contact-detail typography ----
   In the original these are plain text nodes inside .contact-detail, so they use
   the body font. Here they are Elementor heading widgets, which picked up the
   global Cinzel heading style (uppercase, letter-spaced) and overlapped. */.contact-detail, .contact-detail a, .contact-detail span, .contact-detail .elementor-heading-title, .contact-detail .elementor-heading-title a {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  white-space: nowrap !important;
}
.contact-detail, .contact-detail .elementor-heading-title { color: rgba(237, 231, 218, 0.6) !important; }
.contact-detail svg { width: 20px !important; height: 20px !important; color: #ffb347 !important; flex-shrink: 0 !important; }
.contact-detail .elementor-widget-html { width: auto !important; }
/* ---- 18. theme .footer-content collision ----
   Solace ships its own .footer-content class with max-width:1215px and 32px block
   padding. Same class name as the design's footer grid, so it capped the footer
   at 1215px and added vertical padding the original does not have. *//* ---- 19. inline section padding from the original ----
   Both of these sections carry style="padding-top:32px" inline in the source,
   overriding the 96px top padding their own id rule sets. */#contact { padding-top: 32px !important; }
#portfolio { padding-top: 32px !important; }
/* ---- 20. heading line-height ----
   The design states no line-height on its headings, so they use the browser
   default (normal, ~1.15). The theme forces line-height:1, which made every
   heading slightly short. */.hero-title .elementor-heading-title, .section-title .elementor-heading-title, .page-hero-title .elementor-heading-title, .page-hero-eyebrow .elementor-heading-title, .about-content-title .elementor-heading-title, .value-card .elementor-heading-title {
  line-height: normal !important;
}
/* ---- 21. margin collapsing ----
   Elementor containers are flex, so a first child's top margin no longer collapses
   out the way it does through the original's plain block wrappers. */.contact-info > *:first-child { margin-top: 0 !important; }
/* Portfolio grid wrapper: <div class="relative z-10" style="max-width:1280px; margin:0 auto"> */.cdech-w1280 { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; }
/* The Portfolio/Home bottom CTA section is full-bleed; only its content is capped
   at 860px (source: <div class="relative z-10" style="max-width:860px; margin:0 auto">). */.cdech-quote-section > * { max-width: 860px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
.cdech-quote-section > .cdech-layer { max-width: none !important; width: auto !important; }
/* footer link rhythm: the design leaves line-height at the default */.cdech-footer .footer-links a, .cdech-footer .footer-links li, .cdech-footer .footer-bottom { line-height: normal !important; }
/* Quote page: the source wraps the form card in
   .quote-page-wrapper { max-width:860px; margin:0 auto; padding:96px 24px }
   with an inline padding-top:16px, and the hero carries an inline padding-top:150px. */.cdech-quote-page-wrap { max-width: 860px !important; margin-left: auto !important; margin-right: auto !important; }
.cdech-hero-pt150 { padding-top: 150px !important; }
#quote-section .cdech-quote-page-wrap { margin-top: 16px !important; margin-bottom: 96px !important; }
/* ---- 22. quote-note link ----
   The source sets this inline: <a href="mailto:..." style="color:#ffb347;">.
   WordPress strips inline style attributes from HTML/text widgets, so the link
   fell back to the default link colour. */.quote-note a { color: #ffb347 !important; text-decoration: none !important; }
.quote-note a:hover { color: #ffb347 !important; text-decoration: underline !important; }
/* ================= ROUND 2 FIXES ================= *//* ---- 23. Elementor background lazy-load ----
   Elementor ships:
     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *
       { background-image: none !important; }
   The descendant * blanks EVERY background image inside the 4th and later top-level
   containers until JS adds .e-lazyloaded — which never happened here, so .process-bg,
   .about-bg, .wood-texture and the glow orbs were permanently invisible. The experiment
   is now disabled; this restores the layers even if it is ever switched back on. *//* (removed: a revert-layer reset that wiped .wood-texture and the particle gradients;
   Elementor's lazy-load is opted out per-container with .e-no-lazyload instead) */.services-bg { background-image: linear-gradient(to bottom, #0e0e11, #1a1218, #0e0e11) !important; }
.process-bg { background-image: linear-gradient(to bottom, #0e0e11, #1a1218, #0e0e11) !important; }
.about-bg { background-image: linear-gradient(to bottom, #0e0e11, #1a1218) !important; }
.glow-orb-1 { background-image: radial-gradient(circle, #e37027 0%, transparent 70%) !important; }
.glow-orb-2 { background-image: radial-gradient(circle, #ffb347 0%, transparent 70%) !important; }
.glow-orb-3 { background-image: radial-gradient(circle, #e37027 0%, transparent 70%) !important; }
.glow-orb-4 { background-image: radial-gradient(circle, #ffb347 0%, transparent 70%) !important; }
.glow-orb-5 { background-image: radial-gradient(circle, #8b5e3c 0%, transparent 70%) !important; }
.glow-orb-6 { background-image: radial-gradient(circle, #e37027 0%, transparent 70%) !important; }
.hero-overlay-radial { background-image: radial-gradient(circle at center, transparent 0%, rgba(14,14,17,0.6) 50%, rgba(14,14,17,1) 100%) !important; }
.hero-overlay-gradient { background-image: linear-gradient(to bottom, rgba(14,14,17,0.8), rgba(26,21,32,0.6), rgba(14,14,17,0.8)) !important; }
.hero-bottom-fade { background-image: linear-gradient(to top, #0e0e11, transparent) !important; }
.timeline-line { background-image: linear-gradient(to bottom, #8b5e3c, #ffb347, #8b5e3c) !important; }
.hero-divider-line { background-image: linear-gradient(to right, transparent, #ffb347, #e37027, #ffb347, transparent) !important; }
.hero-divider-glow { background-image: radial-gradient(ellipse at center top, rgba(255,179,71,0.55), rgba(227,112,39,0.25) 45%, transparent 78%) !important; }
.process-texture { background-image: repeating-linear-gradient(45deg, #8b5e3c 0px, #8b5e3c 2px, transparent 2px, transparent 10px) !important; }
.portfolio-vignette { background-image: radial-gradient(circle at center, transparent 20%, rgba(14,14,17,0.8) 100%) !important; }
.portfolio-overlay { background-image: linear-gradient(to top, rgba(227,112,39,0.9), rgba(14,14,17,0.5), transparent) !important; }
/* ---- 24. hero photo on the inner pages ----
   .page-hero-photo lands on Elementor's image-widget WRAPPER, so the <img> inside kept
   its natural size (1584px) and sat centred with dark bands either side. The design
   intends those properties on the image itself. */.page-hero-photo img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
}
/* ---- 25. custom-select double caret ----
   Elementor draws its own caret SVG; the design's .cs-trigger draws one too, so an
   enhanced field showed two arrows. */.elementor-select-wrapper.cs-enhanced .select-caret-down-wrapper, .cs-enhanced .select-caret-down-wrapper, .custom-select ~ .select-caret-down-wrapper, .elementor-field-group:has(.custom-select) .select-caret-down-wrapper { display: none !important; }
/* ---- 26. gradient crossfade must not cover the label ----
   These buttons render their label as a bare text node (no wrapping <span>), so it
   cannot be lifted with z-index. isolation:isolate makes the button its own stacking
   context, which lets the ::before overlay sit at z-index:-1 — above the button's own
   background but below its text. */.elementor-element-8a301e8 .elementor-button, .elementor-field-type-submit .elementor-button, .e-form__buttons button.elementor-button { isolation: isolate !important; }
.elementor-element-8a301e8 .elementor-button::before, .elementor-field-type-submit .elementor-button::before, .e-form__buttons button.elementor-button::before { z-index: -1 !important; }
/* ---- 27. "View Full Portfolio" colour ----
   Raw <a> inside an HTML widget; the theme's link colour was winning over the design. */.portfolio-cta-btn, .portfolio-cta-btn:link, .portfolio-cta-btn:visited, .portfolio-cta-btn:hover, .portfolio-cta-btn span, .portfolio-cta-btn svg {
  color: #fff !important; stroke: currentColor !important;
}
/* ---- 28. process cards are not links ----
   The design sets cursor:pointer on .process-card, but these four steps do not link
   anywhere, so the pointer was misleading. */.process-card, .process-card * { cursor: default !important; }
/* ---- 29. hero button icons ----
   The mockups use two specific stroke-drawn feather icons. Font Awesome's solid
   equivalents looked wrong (filled, dark), so the exact source paths are drawn here
   as currentColor masks — they now match the artwork and inherit the text colour. */.elementor-element-8a301e8 .elementor-button::after, .elementor-element-ee1b375 .elementor-button::after {
  content: ''; display: inline-block; flex-shrink: 0; background-color: currentColor;
  position: relative; z-index: 1;
}
.elementor-element-8a301e8 .elementor-button::after { width: 20px; height: 20px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; }
.elementor-element-ee1b375 .elementor-button::after { width: 20px; height: 20px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") no-repeat center / contain; }
/* ===== SECTION 30: about image overlays =====
   In the mockup .about-image-lighting / .about-image-vignette are children of
   .about-image-wrapper. Here .about-image-wrapper is an Elementor image widget,
   which cannot take children, so the two overlays are rendered as pseudo-elements
   on the wrapper itself. Same geometry, same paint order, same values. */.about-image-wrapper { isolation: isolate; }
.about-image-wrapper::before, .about-image-wrapper::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.about-image-wrapper::before { background: linear-gradient(to right, transparent, rgba(255,179,71,0.1), rgba(227,112,39,0.2)); mix-blend-mode: overlay; }
.about-image-wrapper::after { background: radial-gradient(ellipse at center, transparent 30%, rgba(14,14,17,0.7) 100%); }
/* ===== SECTION 31: footer column alignment =====
   Solace ships `.site-footer .footer-content { align-items: center }` (0,2,0),
   which out-specifies the design's `.footer-content` grid and vertically centres
   the three footer columns, so the two <h4> headings no longer share a baseline.
   The design leaves align-items at its default (stretch). *//* ===== SECTION 32: native Elementor rebuild — Portfolio =====
   The portfolio grid is now real Elementor containers + image/heading/text/gallery
   widgets, so every tile is editable in the editor. These rules re-point the design's
   markup-specific selectors at the DOM Elementor produces. *//* filter pills are Elementor button widgets */.filter-pill { width:auto !important; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; line-height:0 !important; }
.filter-pill .elementor-button { font-family:'Cinzel',serif !important; font-size:13px !important; letter-spacing:.1em !important; text-transform:uppercase !important; padding:10px 22px !important; border:1px solid rgba(255,179,71,.4) !important; border-radius:30px !important; color:rgba(237,231,218,.7) !important; background:rgba(20,18,20,.55) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); cursor:pointer !important; transition:all .3s !important; box-shadow:none !important; line-height:1 !important; }
.filter-pill .elementor-button:hover, .filter-pill.active .elementor-button { color:#0e0e11 !important; background:linear-gradient(to right,#e37027,#ffb347) !important; box-shadow:0 0 20px rgba(255,179,71,.4) !important; }
/* the grid itself */.portfolio-grid.e-con { display:grid !important; }
/* each tile *//* NOTE: no !important on display — the filter script sets inline display:none, and an
   !important declaration would beat the inline style and break filtering. */.portfolio-item.e-con { display:block; padding:0 !important; }
.portfolio-item > .elementor-widget-image { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important; z-index:0; }
.portfolio-item .elementor-widget-image img { width:100% !important; height:100% !important; object-fit:cover !important; display:block; transition:transform .7s; }
.portfolio-item:hover .elementor-widget-image img { transform:scale(1.1); }
.portfolio-item::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle at center, transparent 20%, rgba(14,14,17,0.8) 100%); opacity:.6; }
.portfolio-item::after { z-index:4; }
.portfolio-item > .portfolio-overlay { position:absolute !important; inset:0 !important; z-index:2; width:auto !important; max-width:none !important; padding:24px !important; }
.portfolio-item .portfolio-gallery { display:none !important; }
.portfolio-gallery-hint { z-index:3; }
.portfolio-overlay > .portfolio-category { margin-bottom:12px !important; line-height:normal !important; }
.portfolio-category p { margin:0 !important; }
.portfolio-title .elementor-heading-title { font-family:'Cinzel',serif !important; font-size:24px !important; color:#ede7da !important; text-shadow:0 2px 10px rgba(0,0,0,0.5); line-height:1.2 !important; }
.portfolio-overlay > .portfolio-title { margin-bottom:0 !important; }
/* ===== SECTION 33: native Elementor rebuild — Home page =====
   Our Craft cards, Featured Work, Our Process, the FAQ (Elementor Accordion),
   the trust bar, the project counter, the View Full Portfolio button and the
   quote note are now real Elementor containers + widgets. These rules re-point
   the design's markup-specific selectors at the DOM Elementor produces.
   NOTE: no !important on `display` for anything a script toggles inline. *//* ---- Our Craft: service cards ---- */.services-grid.e-con { display: grid !important; }
.service-card.e-con { padding: 0 !important; }
.service-media.e-con { display: block; padding: 0 !important; }
.service-media > .elementor-widget-image, .service-media > .elementor-widget-html { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
.service-media img { display: block; }
.service-body.e-con { display: block; }
.service-body > .elementor-widget { margin-bottom: 0 !important; width: 100% !important; }
.service-eyebrow { margin-bottom: 8px !important; }
.service-title { margin-bottom: 10px !important; }
.service-title .elementor-heading-title { font-family: 'Cinzel', serif !important; font-size: 26px !important; color: inherit !important; text-shadow: 0 0 20px rgba(255,179,71,0.5); line-height: 1.2 !important; }
/* ---- Our Process: timeline ---- */.process-timeline.e-con { display: block; padding: 0 !important; }
.process-step.e-con { gap: 170px !important; padding: 0 !important; }
.process-spacer.e-con { flex: 1; padding: 0 !important; }
.process-card.e-con { flex: 1; display: block; padding: 32px !important; }
.process-card > .elementor-widget { margin-bottom: 0 !important; width: 100% !important; }
.process-step-title { margin-bottom: 12px !important; }
.process-step-title .elementor-heading-title { font-family: 'Cinzel', serif !important; font-size: 32px !important; color: inherit !important; text-shadow: 0 0 20px rgba(255,179,71,0.5); line-height: 1.2 !important; }
.process-step > .process-number { width: 64px !important; height: 64px !important; margin: 0 !important; flex: 0 0 auto; }
@media (max-width: 768px) {.process-step.e-con { flex-direction: column !important; gap: 0 !important; }
.process-step > .process-number { position: static !important; transform: none !important; margin: 0 auto 16px !important; }
.process-spacer.e-con { display: none; }
}
/* ---- FAQ: Elementor Accordion widget ---- *//* ---- Trust bar ---- */.trust-bar.e-con { display: block; padding: 28px 24px !important; }
.trust-bar-inner.e-con { gap: 40px !important; padding: 0 !important; }
.trust-item.e-con { gap: 10px !important; width: auto !important; padding: 0 !important; }
.trust-item > .elementor-widget { margin-bottom: 0 !important; width: auto !important; }
.trust-icon { line-height: 0; flex: 0 0 auto; }
.trust-icon svg { width: 22px; height: 22px; color: #ffb347; display: block; }
/* ---- Project counter ---- */.project-counter.e-con { align-self: center; width: auto !important; gap: 8px !important; padding: 32px 56px !important; border: 1px solid rgba(255,179,71,0.25); border-radius: 0 14px 0 14px; background: linear-gradient(to bottom, rgba(26,21,32,0.6), rgba(14,14,17,0.6)); }
.project-counter > .elementor-widget { margin-bottom: 0 !important; width: auto !important; }
.project-count-num { font-family: 'Cinzel', serif; font-size: clamp(48px, 8vw, 72px); line-height: 1; background: linear-gradient(to bottom, #ffb347 0%, #e37027 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.project-count-label { font-family: 'Cinzel', serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; color: rgba(237,231,218,0.7); }
/* ---- View Full Portfolio button ---- */.portfolio-cta.e-con { display: block; text-align: center; padding: 0 !important; }
.portfolio-cta-btn { display: inline-block !important; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; line-height: 0 !important; }
.portfolio-cta-btn .elementor-button { position: relative; background: linear-gradient(to right, #e37027, #ffb347) !important; color: #fff !important; border: none !important; padding: 14px 40px !important; font-size: 16px !important; border-radius: 8px !important; font-family: 'Cinzel', serif !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; display: inline-flex !important; align-items: center; gap: 12px; cursor: pointer; overflow: hidden; transition: all 0.3s; box-shadow: 0 8px 32px rgba(227,112,39,0.4) !important; line-height: 1.4 !important; }
.portfolio-cta-btn .elementor-button:hover { transform: scale(1.05); }
/* ---- text widgets whose design rule assumes a bare element ---- */.service-eyebrow p, .service-description p, .process-number p, .process-step-description p, .trust-label p, .project-count-num p, .project-count-label p, .quote-note p { margin: 0 !important; }
/* icons on the View Full Portfolio button, drawn as CSS masks of the mockup's own SVGs */.portfolio-cta-btn .elementor-button::before { content: ''; width: 20px; height: 20px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") center/contain no-repeat; }
.portfolio-cta-btn .elementor-button::after { content: ''; width: 20px; height: 20px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat; }
/* the FAQ question text lives in an <a> inside .elementor-tab-title *//* ===== SECTION 34: restore the design's own widget spacing =====
   Section 33 zeroes Elementor's 20px inter-widget margin with
   `.service-body > .elementor-widget { margin-bottom:0 !important }` (0,2,0). The design's
   own `.service-title { margin-bottom:10px }` is only (0,1,0), so it lost even with
   !important and the card text ran together. These restate the design values at (0,2,0). */.service-body > .service-eyebrow { margin-bottom: 8px !important; }
.service-body > .service-title { margin-bottom: 10px !important; }
.process-card > .process-step-title { margin-bottom: 12px !important; }
/* ===== SECTION 35: make everything visible inside the Elementor editor =====
   The design hides .reveal / .reveal-left / .reveal-right at opacity 0 until an
   IntersectionObserver adds .is-visible. That observer does not fire inside the editor's
   preview iframe, so cards and tiles were invisible while editing. Front end unaffected. */body.elementor-editor-active .reveal, body.elementor-editor-active .reveal-left, body.elementor-editor-active .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; }
/* show each tile's photo set as a small clickable strip, editor only, so the Gallery
   widget can be selected on the canvas instead of only from the Structure panel */body.elementor-editor-active .portfolio-item .portfolio-gallery { display: block !important; position: absolute; left: 8px; right: 8px; top: 8px; max-height: 44px; overflow: hidden; z-index: 6; opacity: .9; }
/* pin the hover overlay open as a bottom band while editing, so the cover Image widget
   underneath stays clickable on the canvas instead of being covered by the overlay */body.elementor-editor-active .portfolio-item .portfolio-overlay { opacity: 1 !important; top: auto !important; height: auto !important; }
body.elementor-editor-active .portfolio-item .portfolio-gallery img { border: 1px solid rgba(255,179,71,0.5); }
/* ===== SECTION 36: file-upload field on the shared Quote Request form =====
   Elementor renders a bare <input type="file">, which is a white OS-styled control.
   These rules give it the same dark, orange-bordered treatment as the other inputs
   and turn the "Choose Files" button into the design's gold gradient pill. */.elementor-field-type-upload input[type="file"] {
  width: 100% !important;
  background: rgba(14,14,17,0.5) !important;
  border: 1px solid rgba(227,112,39,0.5) !important;
  border-radius: 0 8px 0 8px !important;
  color: rgba(237,231,218,0.7) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  height: auto !important;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: all 0.3s;
}
.elementor-field-type-upload input[type="file"]:hover { border-color: rgba(255,179,71,0.7) !important; }
.elementor-field-type-upload input[type="file"]:focus {
  outline: none !important;
  border-color: rgba(255,179,71,0.7) !important;
  box-shadow: 0 0 10px rgba(255,179,71,0.2), inset 0 0 10px rgba(255,179,71,0.075) !important;
}
.elementor-field-type-upload input[type="file"]::file-selector-button {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0e0e11;
  background: linear-gradient(to right, #e37027, #ffb347);
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  margin-right: 14px;
  cursor: pointer;
  transition: box-shadow 0.3s;
}
.elementor-field-type-upload input[type="file"]::file-selector-button:hover { box-shadow: 0 0 16px rgba(255,179,71,0.5); }
.elementor-field-type-upload input[type="file"]::-webkit-file-upload-button {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0e0e11;
  background: linear-gradient(to right, #e37027, #ffb347);
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  margin-right: 14px;
  cursor: pointer;
}
/* the small helper line under the upload field (an HTML field in the form, so it stays editable) */.upload-hint {
  margin: 8px 0 0 !important;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(237,231,218,0.45);
}
.elementor-field-group-upload_hint { padding-top: 0 !important; }
/* ===== SECTION 37: reCAPTCHA v3 badge placement =====
   Google's floating badge is fixed at bottom-right with z-index 1, which puts it under the
   sticky mobile CTA bar on phones. Lift it clear on small screens and raise its stacking so it
   is never buried. Keeping the badge visible is what satisfies Google's attribution requirement,
   so it must not simply be hidden. */.grecaptcha-badge { z-index: 60 !important; }
@media (max-width: 768px) {.grecaptcha-badge { bottom: 84px !important; }
}
/* ===== SECTION 38: hide the reCAPTCHA badge, show the disclosure instead =====
   Google permits hiding the floating badge provided the site displays a reCAPTCHA disclosure.
   As of 2 April 2026 Google removed the Privacy Policy / Terms of Use references from the badge
   and advises sites to remove them too, so the line is just 'This site is protected by reCAPTCHA.'
   The text lives in an HTML field inside each form, so it stays editable in Elementor.
   NOTE: use visibility, not display:none — Google's script measures the badge, and display:none
   has been reported to interfere with it. Section 37's placement rules are now moot but harmless,
   and keep the badge correctly positioned if it is ever un-hidden. */.grecaptcha-badge { visibility: hidden !important; }
.elementor-field-group-recaptcha_notice { order: 99; width: 100% !important; padding: 0 !important; margin-top: 16px !important; }
.recaptcha-notice { margin: 0 !important; text-align: center; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(237,231,218,0.32); }
/* ===== SECTION 39: Elementor Theme Builder header + footer =====
   Replaces the Solace HFG bridge rules that were removed in the theme migration.
   Header template: elementor_library 216  |  Footer template: elementor_library 217
   Structure:  nav.cdech-navbar > div.nav-container > [site-logo .cdech-logo]
               [nav-menu .cdech-nav] [button .cdech-nav-cta]
   Everything below targets Elementor's own stable classes, so it survives a theme swap. *//* --- header bar --- */.cdech-navbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 50 !important; background: rgba(14, 14, 17, 0.95) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(255, 179, 71, 0.2) !important; box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 0 20px rgba(255,179,71,0.1) !important; }
.nav-container.e-con { max-width: 100% !important; }
/* --- logo --- */.cdech-logo { align-self: center !important; display: flex !important; align-items: center !important; }
.cdech-logo a { display: flex !important; align-items: center !important; height: 56px !important; }
.cdech-logo img { height: 56px !important; width: auto !important; max-width: 260px !important; object-fit: contain !important; display: block !important; }
/* --- primary menu --- */.cdech-nav { display: flex !important; align-items: stretch !important; --nav-menu-icon-size: 32px; }
/* --- hamburger + mobile dropdown --- *//* --- Start a Project CTA --- */.cdech-nav-cta { display: flex !important; align-items: center !important; flex: 0 0 auto !important; }
.cdech-nav-cta .elementor-button { position: relative !important; overflow: hidden !important; isolation: isolate !important; background: linear-gradient(to right, #e37027, #ffb347) !important; background-image: linear-gradient(to right, #e37027, #ffb347) !important; color: #ffffff !important; border: none !important; padding: 0 24px !important; border-radius: 8px !important; font-family: 'Cinzel', serif !important; font-size: 14px !important; letter-spacing: 0.1em !important; font-weight: 400 !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 8px !important; transition: all 0.3s !important; box-shadow: 0 0 20px rgba(255, 179, 71, 0.4) !important; margin-left: 16px !important; height: 40px !important; align-self: center !important; text-decoration: none !important; box-sizing: border-box !important; }
.cdech-nav-cta .elementor-button:hover { transform: scale(1.05) !important; box-shadow: 0 0 20px rgba(255, 179, 71, 0.4) !important; }
.cdech-nav-cta .elementor-button::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to right, #ffb347, #e37027) !important; opacity: 0 !important; transition: opacity 0.5s !important; z-index: -1 !important; border-radius: 8px !important; }
.cdech-nav-cta .elementor-button:hover::before { opacity: 1 !important; }
.cdech-nav-cta .elementor-button .elementor-button-content-wrapper { display: flex !important; align-items: center !important; gap: 8px !important; position: relative !important; z-index: 1 !important; }
.cdech-nav-cta .elementor-button::after { content: '' !important; display: inline-block; flex-shrink: 0; width: 16px; height: 16px; background-color: currentColor; position: relative; z-index: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; }
/* Below the tablet breakpoint the nav collapses to the hamburger and the CTA is hidden,
   exactly as the mockup does at its own 1100px cutover. */@media (max-width: 1100px) {.cdech-nav-cta { display: none !important; }
}
/* --- footer --- */.cdech-footer { position: relative !important; }
.cdech-footer::before { content: ''; position: absolute; inset: 0; opacity: 0.06; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238b5e3c' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.cdech-footer > .e-con-inner, .cdech-footer > .footer-container, .cdech-footer .footer-container { position: relative !important; z-index: 10 !important; max-width: 100% !important; }
.footer-logo-wrap img { height: 90px !important; width: auto !important; max-width: 100% !important; display: block !important; margin-bottom: 16px !important; object-fit: contain !important; }
.cdech-footer .footer-links .elementor-icon-list-items { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.cdech-footer .footer-links .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.cdech-footer .footer-links .elementor-icon-list-item > a, .cdech-footer .footer-links .elementor-icon-list-item > span { display: block !important; margin-bottom: 8px !important; padding: 0 !important; color: rgba(237, 231, 218, 0.6) !important; text-decoration: none !important; transition: color 0.3s !important; }
.cdech-footer .footer-links .elementor-icon-list-item > a:hover, .cdech-footer .footer-links .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: #ffb347 !important; }
.cdech-footer .footer-links .elementor-icon-list-text { color: inherit !important; }
.cdech-footer .footer-links h4.elementor-heading-title { font-family: 'Cinzel', serif !important; font-size: 18px !important; color: #ffb347 !important; margin-bottom: 16px !important; }
.cdech-footer .footer-bottom { width: 100% !important; }
.cdech-footer .footer-bottom p { margin: 0 !important; }
/* --- 39a. fixes found on first render --- *//* The WordPress admin bar is fixed at the top for logged-in users; the site header has to sit under it. */body.admin-bar .cdech-navbar { top: 32px !important; }
@media screen and (max-width: 782px) {body.admin-bar .cdech-navbar { top: 46px !important; }
}
/* --- 39b. breakpoint behaviour ---
   Elementor collapses the menu to the hamburger with a display:none rule at the tablet
   breakpoint. The desktop rules above carry !important (they have to, to beat Elementor's
   own nav-menu CSS), so the collapse has to be restated here with !important as well or the
   full horizontal menu keeps rendering on phones.
   Cutover is 1200px: at 1201px the bar needs logo 207 + menu ~700 + CTA 222 = ~1130px and
   has 1153px of room. The link padding tracks the viewport so it never overflows above that. */@media (max-width: 1200px) {.cdech-nav-cta { display: none !important; }
.cdech-nav { justify-content: flex-end !important; align-items: center !important; }
}
/* --- 39c. the bar is a single row at every width --- */.nav-container.e-con { flex-wrap: nowrap !important; }
.nav-container.e-con > .cdech-logo { flex: 0 1 auto !important; min-width: 0 !important; }
/* --- 39d. mobile dropdown panel ---
   Elementor's own dropdown positioning lives in a stylesheet that is regenerated for custom
   breakpoints; rather than depend on it, the panel is pinned here to the bottom edge of the
   fixed bar, which is what the mockup does (.nav-links.open, top:80px, left/right 0).
   Elementor's JS writes inline top/left/width, so these need !important. Open/closed state is
   read from the aria-hidden attribute Elementor toggles. *//* --- 39e. containing block for the dropdown ---
   Elementor widgets and containers are position:relative, so an absolutely positioned dropdown
   would resolve left/right against the 48px toggle. Both wrappers go static below the cutover
   so the panel resolves against the fixed bar and spans it edge to edge, as the mockup does. */@media (max-width: 1200px) {.cdech-nav, .nav-container.e-con { position: static !important; }
}
/* ===== SECTION 40: hero background is a native Image widget =====
   The hero photo used to live inside an HTML widget together with its two overlays, which
   meant swapping the picture required editing markup. It is now an Elementor Image widget
   carrying the .hero-bg class, so it is swappable from the editor; the two overlay divs the
   mockup nests inside .hero-bg (.hero-overlay-radial, .hero-overlay-gradient) become
   pseudo-elements, because a widget cannot take children. Paint order is ::before (radial),
   img, ::after (gradient), so both pseudo-elements carry an explicit z-index. */.hero-bg { position: absolute !important; inset: 0 !important; z-index: 0 !important; padding: 0 !important; margin: 0 !important; width: auto !important; }
.hero-bg img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 0.9 !important; will-change: transform, opacity; z-index: 0 !important; max-width: none !important; }
.hero-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at center, transparent 0%, rgba(14,14,17,0.6) 50%, rgba(14,14,17,1) 100%); }
.hero-bg::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(14,14,17,0.8), rgba(26,21,32,0.6), rgba(14,14,17,0.8)); }
/* ===== SECTION 41: non-Elementor templates (404, search, blog) =====
   Hello Elementor renders these through main#content.site-main, straight under <body>, with no
   hero to sit beneath the fixed bar. Without a top offset the first heading lands behind the
   header. Elementor-built pages carry .elementor-page on <body> and are excluded, because their
   own full-bleed heroes are meant to run under the bar. */body:not(.elementor-page) > main.site-main { max-width: 1280px !important; margin: 0 auto !important; padding: 152px 24px 96px !important; min-height: 60vh; }
body:not(.elementor-page) > main.site-main h1, body:not(.elementor-page) > main.site-main h2, body:not(.elementor-page) > main.site-main h3 { font-family: 'Cinzel', serif; color: #ffb347; margin-bottom: 16px; }
body:not(.elementor-page) > main.site-main p, body:not(.elementor-page) > main.site-main li { color: rgba(237, 231, 218, 0.7); line-height: 1.6; }
body:not(.elementor-page) > main.site-main a { color: #ffb347; }
body:not(.elementor-page) > main.site-main input[type=search], body:not(.elementor-page) > main.site-main input[type=text] { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,179,71,0.25); border-radius: 8px; color: #ede7da; padding: 12px 16px; }
/* ===== SECTION 42: mobile menu polish =====
   The hamburger was sitting at the BOTTOM of the 80px bar, not centred: .cdech-nav is a column
   flex container, so the 'justify-content: flex-end' added in 39b to push it right was pushing it
   down instead. Forcing flex-direction: row makes flex-end mean right and align-items mean
   vertically centred, which is what was intended.
   The toggle is also given a real target (44x44 gold-outlined square) with a hover/open state, and
   the panel items get the same animated gradient underline the desktop links use. */@media (max-width: 1200px) {.cdech-nav { flex-direction: row !important; align-items: center !important; }
}
/* ===== SECTION 43: link colours + mobile CTA bar hover =====
   Hello Elementor's reset.css is no longer enqueued (see mu-plugins/cdech-theme-tweaks.php), so
   a link the design does not colour would fall through to the browser's own #0000EE blue. The
   design's convention is that links take their context's colour, so that is restated here at
   (0,0,1) - weak enough that every author rule still wins, strong enough to beat the UA sheet. */a { color: inherit; }
/* The sticky mobile CTA bar had no hover state of its own and was picking one up from the theme
   reset (a:hover { color:#336 }). Call Now now warms to gold; Get a Quote keeps its white label
   and gains the CTA glow. */.mobile-cta-bar .mobile-cta-btn { transition: color 0.3s, background 0.3s, box-shadow 0.3s; }
.mobile-cta-bar .mobile-cta-call:hover, .mobile-cta-bar .mobile-cta-call:focus-visible, .mobile-cta-bar .mobile-cta-call:active { color: #ffb347; background: rgba(255, 179, 71, 0.16); }
.mobile-cta-bar .mobile-cta-call:hover svg, .mobile-cta-bar .mobile-cta-call:focus-visible svg, .mobile-cta-bar .mobile-cta-call:active svg { stroke: #ffb347; }
.mobile-cta-bar .mobile-cta-quote:hover, .mobile-cta-bar .mobile-cta-quote:focus-visible, .mobile-cta-bar .mobile-cta-quote:active { color: #ffffff; box-shadow: 0 0 22px rgba(255, 179, 71, 0.45); }
/* Hello's reset also supplied heading sizes; the fallback templates (404, search) need their own. */body:not(.elementor-page) > main.site-main h1 { font-size: 40px; }
body:not(.elementor-page) > main.site-main h2 { font-size: 30px; }
body:not(.elementor-page) > main.site-main h3 { font-size: 24px; }
/* ===== SECTION 44: FAQ - Elementor Nested Accordion =====
   The FAQ used Elementor's legacy Accordion widget, which the editor now flags as deprecated and
   which animated with jQuery slideUp/slideDown (the visible stutter). It is now the Nested
   Accordion widget, which renders native <details>/<summary> - the same elements the mockup used -
   and animates with the Web Animations API. Section 33's .elementor-accordion rules no longer
   match anything and were removed. */.faq-list .e-n-accordion { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.faq-list details.e-n-accordion-item { border: 1px solid rgba(255, 179, 71, 0.25) !important; border-radius: 0 10px 0 10px !important; background: linear-gradient(to bottom right, rgba(26,21,32,0.9), rgba(14,14,17,0.9)) !important; padding: 4px 24px !important; transition: border-color 0.3s !important; }
.faq-list details.e-n-accordion-item[open] { border-color: rgba(255, 179, 71, 0.55) !important; }
.faq-list summary.e-n-accordion-item-title { list-style: none !important; cursor: pointer !important; padding: 20px 0 !important; font-family: 'Cinzel', serif !important; font-size: 17px !important; color: #ede7da !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; border: 0 !important; background: none !important; transition: color 0.3s !important; }
.faq-list summary.e-n-accordion-item-title::-webkit-details-marker { display: none !important; }
.faq-list summary.e-n-accordion-item-title:hover { color: #ffb347 !important; }
.faq-list .e-n-accordion-item-title-header { flex: 1 1 auto !important; min-width: 0 !important; }
.faq-list .e-n-accordion-item-title-text { font-family: 'Cinzel', serif !important; font-size: 17px !important; color: inherit !important; line-height: 1.35 !important; }
/* The mockup draws its own + marker and rotates it to an x; Elementor's icon slots are left empty. */.faq-list summary.e-n-accordion-item-title::after { content: '+' !important; color: #ffb347 !important; font-size: 22px !important; font-weight: 300 !important; line-height: 1 !important; flex-shrink: 0 !important; transition: transform 0.3s !important; }
.faq-list details.e-n-accordion-item[open] > summary.e-n-accordion-item-title::after { transform: rotate(45deg) !important; }
.faq-list .faq-answer { padding: 0 0 22px !important; }
/* Elementor gives the nested accordion's content container a 1px #d5d8dc default border. */.faq-list .faq-answer { border: 0 !important; background: none !important; box-shadow: none !important; }
.faq-list .faq-answer p { color: rgba(237, 231, 218, 0.7) !important; line-height: 1.7 !important; margin: 0 !important; }

/* ===== SECTION 45: header nav = Elementor Pro Mega Menu =====
   The Nav Menu widget was replaced by the Mega Menu widget so Portfolio can carry a real dropdown
   built from containers. Markup is completely different, so section 39's nav rules were removed:
     .cdech-nav > nav.e-n-menu > .e-n-menu-wrapper > ul.e-n-menu-heading > li.e-n-menu-item
        > div.e-n-menu-title[.e-current|.e-anchor] > a.e-n-menu-title-container > span.e-n-menu-title-text
        > div.e-n-menu-content   (dropdown panel, Portfolio only)
   Menu items now live in the widget, NOT in Appearance > Menus. */
.cdech-nav { display: flex !important; align-items: stretch !important; }
.cdech-nav > nav.e-n-menu, .cdech-nav .e-n-menu-wrapper { display: flex !important; align-items: stretch !important; height: 100% !important; }
.cdech-nav ul.e-n-menu-heading { display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; white-space: nowrap !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; height: 100% !important; }
/* static li so the dropdown resolves against the nav, not the single item */
.cdech-nav li.e-n-menu-item { display: flex !important; align-items: stretch !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; }
.cdech-nav .e-n-menu-title { display: flex !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.cdech-nav a.e-n-menu-title-container { position: relative !important; display: flex !important; align-items: center !important; padding: 0 clamp(14px, 1.7vw, 24px) !important; font-family: 'Cinzel', serif !important; font-size: 14px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: rgba(237, 231, 218, 0.7) !important; text-decoration: none !important; background: none !important; border: 0 !important; transition: all 0.5s !important; }
.cdech-nav .e-n-menu-title-text { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; }
.cdech-nav .e-n-menu-title:hover a.e-n-menu-title-container, .cdech-nav a.e-n-menu-title-container:hover, .cdech-nav a.e-n-menu-title-container:focus, .cdech-nav .e-n-menu-title.e-current a.e-n-menu-title-container, .cdech-nav .e-n-menu-title.e-active a.e-n-menu-title-container { color: #ffb347 !important; background: none !important; }
.cdech-nav a.e-n-menu-title-container::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 50% !important; top: auto !important; right: auto !important; transform: translateX(-50%) !important; width: 0 !important; height: 1px !important; background: linear-gradient(to right, #e37027, #ffb347, #e37027) !important; box-shadow: 0 0 8px rgba(255, 179, 71, 0.5) !important; transition: width 0.5s ease-out !important; border: 0 !important; opacity: 1 !important; }
.cdech-nav .e-n-menu-title:hover a.e-n-menu-title-container::after, .cdech-nav .e-n-menu-title.e-current a.e-n-menu-title-container::after, .cdech-nav .e-n-menu-title.e-active a.e-n-menu-title-container::after { width: 80% !important; }
/* Elementor draws the dropdown at top:0 of the nav; drop it to the bottom edge of the bar. */
.cdech-nav .e-n-menu-content { top: 100% !important; z-index: 60 !important; }

/* ---- 45a. the Portfolio mega panel ----
   Card icons are CSS masks of the same feather-style artwork the rest of the site uses (see 29),
   drawn on .cdech-mega-card::before. They are decoration with no editable content; the title,
   subtitle, link and the whole footer bar are native widgets. To change an icon, swap the mask
   URL on the matching .cdech-mega-card--<slug> rule. */
.cdech-mega-wrap.e-con, .cdech-mega.e-con { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
/* Elementor gives the dropdown container a white default background. */
.cdech-mega-wrap.e-con { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; }
.cdech-mega { background: linear-gradient(to bottom, #14141a, #0e0e11) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 179, 71, 0.25) !important; border-bottom: 1px solid rgba(255, 179, 71, 0.25) !important; box-shadow: 0 24px 50px rgba(0,0,0,0.6), 0 0 30px rgba(255,179,71,0.06) !important; }
.cdech-mega-grid.e-con { max-width: 1280px !important; margin: 0 auto !important; }
/* --- category cards --- */
.cdech-mega-card.e-con { position: relative !important; border: 1px solid rgba(255, 179, 71, 0.18) !important; border-radius: 0 10px 0 10px !important; background: linear-gradient(to bottom right, rgba(26,21,32,0.75), rgba(14,14,17,0.75)) !important; text-align: center !important; cursor: pointer !important; overflow: hidden !important; transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s, background 0.35s !important; }
.cdech-mega-card.e-con:hover { border-color: rgba(255, 179, 71, 0.65) !important; transform: translateY(-4px) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 22px rgba(255,179,71,0.16) !important; background: linear-gradient(to bottom right, rgba(38,27,22,0.9), rgba(20,16,20,0.9)) !important; }
.cdech-mega-card::before { content: '' !important; display: block; width: 38px; height: 38px; margin: 0 auto 14px; background-color: #ffb347; transition: transform 0.35s, background-color 0.35s; }
.cdech-mega-card:hover::before { transform: scale(1.08) translateY(-1px); background-color: #ffc46b; }
.cdech-mega-card--kitchens::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") no-repeat center / contain; }
.cdech-mega-card--refacing::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") no-repeat center / contain; }
.cdech-mega-card--closets::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E") no-repeat center / contain; }
.cdech-mega-card--built-ins::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18'/%3E%3C/svg%3E") no-repeat center / contain; }
.cdech-mega-card-title, .cdech-mega-card-title h4 { font-family: 'Cinzel', serif !important; font-size: 15px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #ffb347 !important; margin: 0 0 6px !important; transition: color 0.35s !important; }
.cdech-mega-card-sub, .cdech-mega-card-sub p { font-family: 'Open Sans', sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; color: rgba(237, 231, 218, 0.6) !important; margin: 0 !important; }
.cdech-mega-card:hover .cdech-mega-card-sub p { color: rgba(237, 231, 218, 0.85) !important; }
/* --- footer bar --- */
.cdech-mega-footer.e-con { position: relative !important; border-top: 1px solid rgba(255, 179, 71, 0.14) !important; background: linear-gradient(to right, rgba(227,112,39,0.16), rgba(227,112,39,0.06) 55%, rgba(255,179,71,0.03)) !important; }
.cdech-mega-footer > .e-con-inner, .cdech-mega-footer { max-width: 100% !important; }
.cdech-mega-footer-text.e-con { position: relative !important; padding-left: 46px !important; flex: 1 1 auto !important; min-width: 0 !important; }
.cdech-mega-footer-text::before { content: '' !important; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-color: #ffb347; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") no-repeat center / contain; }
.cdech-mega-foot-title, .cdech-mega-foot-title h4 { font-family: 'Cinzel', serif !important; font-size: 16px !important; color: #ede7da !important; margin: 0 0 2px !important; }
.cdech-mega-foot-sub, .cdech-mega-foot-sub p { font-family: 'Open Sans', sans-serif !important; font-size: 13px !important; color: rgba(237, 231, 218, 0.55) !important; margin: 0 !important; }
.cdech-mega-btn { flex: 0 0 auto !important; }
.cdech-mega-btn .elementor-button { position: relative !important; overflow: hidden !important; isolation: isolate !important; display: flex !important; align-items: center !important; gap: 10px !important; background: linear-gradient(to right, #e37027, #ffb347) !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; padding: 14px 28px !important; font-family: 'Cinzel', serif !important; font-size: 14px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: 0 8px 26px rgba(227,112,39,0.35) !important; transition: all 0.3s !important; }
.cdech-mega-btn .elementor-button:hover { transform: scale(1.04) !important; }
.cdech-mega-btn .elementor-button::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to right, #ffb347, #e37027) !important; opacity: 0 !important; transition: opacity 0.5s !important; z-index: -1 !important; border-radius: 8px !important; }
.cdech-mega-btn .elementor-button:hover::before { opacity: 1 !important; }
.cdech-mega-btn .elementor-button .elementor-button-content-wrapper { display: flex !important; align-items: center !important; gap: 10px !important; position: relative !important; z-index: 1 !important; }
.cdech-mega-btn .elementor-button::after { content: '' !important; width: 17px; height: 17px; flex-shrink: 0; background-color: currentColor; position: relative; z-index: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ---- 45b. corrections found on first render ----
   1. Elementor uses ::before on every container for its background-overlay feature, and that rule
      carries position:absolute; inset:0. The card icon inherited it and pinned itself to the top
      left instead of sitting in the column flow, so it has to be forced back to static.
   2. The footer bar spans the viewport but its CONTENT has to line up with the 1280px card grid.
   3. Elementor's submenu caret is hidden - the mockup's nav has no carets. */
.cdech-mega-card::before { position: static !important; inset: auto !important; align-self: center !important; flex: 0 0 auto !important; }
.cdech-mega-card.e-con { padding: 30px 18px 28px !important; }
.cdech-mega-footer.e-con { padding-left: max(24px, calc((100% - 1280px) / 2 + 24px)) !important; padding-right: max(24px, calc((100% - 1280px) / 2 + 24px)) !important; }
.cdech-nav .e-n-menu-title .e-n-menu-dropdown-icon, .cdech-nav .e-n-menu-title-container > svg, .cdech-nav .e-n-menu-title-container .e-n-menu-icon { display: none !important; }

/* ---- 45c. responsive ----
   Elementor collapses the mega menu by driving .e-n-menu-wrapper's display from the custom
   property --n-menu-wrapper-display, which the toggle flips to flex when aria-expanded=true.
   The desktop layout rules therefore must NOT force display on that element below the cutover,
   or the menu can never close. Desktop-only rules are fenced into a min-width query and the
   mobile panel is rebuilt to look like the one the Nav Menu widget used to produce. */
@media (min-width: 1201px) {
  .cdech-nav .e-n-menu-wrapper { display: flex !important; align-items: stretch !important; height: 100% !important; }
  .cdech-nav ul.e-n-menu-heading { flex-direction: row !important; align-items: stretch !important; height: 100% !important; }
}
@media (max-width: 1200px) {
  .cdech-nav > nav.e-n-menu { position: static !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; height: 100% !important; }
  .cdech-nav .e-n-menu-wrapper { display: var(--n-menu-wrapper-display, none) !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; z-index: 60 !important; flex-direction: column !important; align-items: stretch !important; height: auto !important; max-height: 80vh !important; overflow-y: auto !important; background: rgba(14, 14, 17, 0.98) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 179, 71, 0.2) !important; border-radius: 0 0 14px 14px !important; padding: 8px 16px 18px !important; box-shadow: 0 20px 40px rgba(0,0,0,0.55), 0 0 24px rgba(255,179,71,0.08) !important; }
  .cdech-nav ul.e-n-menu-heading { flex-direction: column !important; align-items: stretch !important; height: auto !important; width: 100% !important; }
  .cdech-nav li.e-n-menu-item { display: block !important; width: 100% !important; }
  .cdech-nav li.e-n-menu-item + li.e-n-menu-item { border-top: 1px solid rgba(255, 179, 71, 0.1) !important; }
  .cdech-nav .e-n-menu-title { display: block !important; }
  .cdech-nav a.e-n-menu-title-container { justify-content: center !important; text-align: center !important; padding: 14px 0 !important; }
  .cdech-nav a.e-n-menu-title-container::after { bottom: 6px !important; }
  .cdech-nav .e-n-menu-title:hover a.e-n-menu-title-container::after, .cdech-nav .e-n-menu-title.e-current a.e-n-menu-title-container::after, .cdech-nav .e-n-menu-title.e-active a.e-n-menu-title-container::after { width: 44% !important; }
  .cdech-nav .e-n-menu-toggle { display: flex !important; align-self: center !important; margin-left: auto !important; width: 44px !important; height: 44px !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 1px solid rgba(255, 179, 71, 0.28) !important; border-radius: 8px !important; background: rgba(255, 179, 71, 0.06) !important; transition: all 0.3s !important; }
  .cdech-nav .e-n-menu-toggle:hover, .cdech-nav .e-n-menu-toggle:focus, .cdech-nav .e-n-menu-toggle[aria-expanded="true"] { border-color: rgba(255, 179, 71, 0.8) !important; background: rgba(255, 179, 71, 0.14) !important; box-shadow: 0 0 14px rgba(255, 179, 71, 0.25) !important; }
  .cdech-nav .e-n-menu-toggle span { padding: 0 !important; }
  .cdech-nav .e-n-menu-toggle svg { width: 24px !important; height: 24px !important; fill: #ffb347 !important; }
  /* the Portfolio panel drops inline under its own item instead of spanning the bar */
  .cdech-nav .e-n-menu-content { position: static !important; }
  .cdech-mega { border-radius: 0 0 10px 10px !important; border-bottom: 0 !important; box-shadow: none !important; background: transparent !important; }
  .cdech-mega-grid.e-con { grid-template-columns: repeat(2, 1fr) !important; padding: 14px 0 !important; }
  .cdech-mega-card.e-con { padding: 20px 10px 18px !important; }
  .cdech-mega-card::before { width: 30px; height: 30px; margin-bottom: 10px; }
  .cdech-mega-footer.e-con { flex-direction: column !important; align-items: stretch !important; text-align: center !important; padding: 16px 0 4px !important; }
  .cdech-mega-footer-text.e-con { padding-left: 0 !important; align-items: center !important; }
  .cdech-mega-footer-text::before { display: none !important; }
  .cdech-mega-btn .elementor-button { justify-content: center !important; }
}

/* The panel sits over the hero; at 97% opacity the hero heading ghosted through it, so the
   background is solid. The bar above it keeps its translucency + blur. */

/* ---- 45d. whole-card click target ----
   Elementor's container Link setting does not render an anchor here, so the card title carries
   the link and its ::after is stretched over the whole card - the standard 'stretched link'
   pattern. Keeps one anchor per card for screen readers and needs no JavaScript. */
.cdech-mega-card.e-con { position: relative !important; }
.cdech-mega-card-title a { color: inherit !important; text-decoration: none !important; }
.cdech-mega-card-title a::after { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; }

/* ---- 45e. the nav link must fill its cell ----
   Elementor gives a.e-n-menu-title-container align-self:center, so the anchor was only as tall as
   its text (19px) inside an 80px bar. Two visible consequences: the hover underline is drawn at
   the anchor's bottom edge, so it sat just under the wording instead of on the bar's bottom edge;
   and only that 19px strip was clickable, so a click a few pixels above or below the text landed
   on the list item and did nothing. Stretching the anchor to the full cell fixes both at once. */
@media (min-width: 1201px) {
  .cdech-nav a.e-n-menu-title-container { align-self: stretch !important; height: 100% !important; }
}
@media (max-width: 1200px) {
  .cdech-nav a.e-n-menu-title-container { align-self: stretch !important; width: 100% !important; }
}

/* ---- 45f. the WHOLE card is the click target ----
   45d stretched the title anchor's ::after with inset:0 expecting it to resolve against the card,
   but Elementor's own base CSS carries `.elementor-widget { position: relative }`. That makes the
   HEADING WIDGET the nearest positioned ancestor, so the overlay only ever covered the title line
   and a click had to land on the wording. Making the card's widget wrappers static hands the
   containing block back to .cdech-mega-card, whose padding box is the visible card. */
.cdech-mega-card.e-con > .elementor-widget, .cdech-mega-card-title, .cdech-mega-card-sub { position: static !important; }
.cdech-mega-card.e-con { position: relative !important; }
.cdech-mega-card-title a { position: static !important; }
.cdech-mega-card-title a::after { content: '' !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; inset: 0 !important; z-index: 3 !important; }

/* ---- 45g. mobile: centre the hamburger, and let Portfolio be tapped open ----
   Two separate bugs, both below the 1200px cutover.

   1. The toggle sat on the BOTTOM edge of the 80px bar. Elementor's own base rule is
      `.elementor-widget-n-menu .e-n-menu { display:flex; flex-direction: column }`, and 45c's
      `justify-content: flex-end` (meant to push the toggle right) therefore pushed it DOWN the
      column instead. This is the same trap 42 hit on .cdech-nav, one level deeper. Forcing the
      row direction makes flex-end mean right and align-items:center mean vertically centred.
   2. The dropdown caret was hidden at every width by 45b, which is right on desktop (the panel
      opens on hover) but leaves a phone with no visible sign that Portfolio expands. It comes
      back below the cutover as a 44x44 tap target pinned to the right of the row; Elementor
      swaps its own up/down artwork off aria-expanded, so nothing here forces `display` on the
      two icon spans. Tapping anywhere else on the row is handled by cdech-mega-mobile in
      cdech-effects.js. */
@media (max-width: 1200px) {
  .cdech-nav > nav.e-n-menu { flex-direction: row !important; }
  .cdech-nav .e-n-menu-title { position: relative !important; }
  .cdech-nav .e-n-menu-title .e-n-menu-dropdown-icon {
    display: flex !important; position: absolute !important;
    right: 2px !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 44px !important; height: 44px !important;
    align-items: center !important; justify-content: center !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    background: none !important; cursor: pointer !important; z-index: 2 !important;
  }
  .cdech-nav .e-n-menu-title .e-n-menu-dropdown-icon span { align-items: center !important; justify-content: center !important; }
  .cdech-nav .e-n-menu-title .e-n-menu-dropdown-icon svg { width: 13px !important; height: 13px !important; fill: #ffb347 !important; transition: fill 0.3s !important; }
  .cdech-nav .e-n-menu-title:hover .e-n-menu-dropdown-icon svg, .cdech-nav .e-n-menu-title.e-active .e-n-menu-dropdown-icon svg { fill: #ffc46b !important; }
}

/* ---- 45h. the mega panel must wrap its own text ----
   45's `.cdech-nav ul.e-n-menu-heading { white-space: nowrap }` keeps the DESKTOP BAR on one
   line, but white-space inherits, and the dropdown panel is a descendant of that same <ul>.
   Desktop never showed it (the cards are 308px wide and the copy fits), but on a phone the
   cards are ~168px and every subtitle ran straight off the edge. */
.cdech-nav .e-n-menu-content, .cdech-nav .e-n-menu-content * { white-space: normal !important; }