/* * Caring4Humanitarians — the CSS Elementor cannot express. * * Rules here are deliberately low-specificity single classes so that anything * set through an Elementor control (colour, spacing, typography, background) * still wins. If a rule ever needs `!important`, it belongs in the reference * design instead — or the widget should be styled through its own controls. * * Section order follows the homepage. * * No @font-face here: the live reference also declares Inter / Cormorant * Garamond by name only and lets the OS supply the faces. Shipping WOFF2 * copies bloated Slow-4G LCP without matching production. */ /* ---------------------------------------------------------------- 1. base */ /* * Elementor puts a 20px gap between everything in a container * (`--gap: var(--widgets-spacing, 20px)`). The reference has no such gap, and at * roughly 60-100px per section it was the single largest source of extra page * height. Zeroing the fallback leaves gaps that are set deliberately on a * container untouched: those write `--gap` directly. */ .elementor .elementor-element { --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; } /* * The converter wraps every run of copy in a text-editor widget, which renders a *

. Where the reference used an inline element (``) * or relied on the wrapper for spacing, that paragraph's own block margins are * extra height the reference never had — and they accumulate down a section, * pushing everything below out of alignment. A widget holding a single paragraph * therefore contributes no margin of its own; spacing comes from the widget, as * the reference intended. */ .elementor-widget-text-editor > p:only-child, .elementor-widget-text-editor > .elementor-widget-container > p:only-child { margin-top: 0; margin-bottom: 0; } .elementor-widget-heading h1, .elementor-widget-heading h2, .elementor-widget-heading h3, .elementor-widget-heading h4 { margin-top: 0; } body { font-family: var(--c4h-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* These base rules only apply where no ported page stylesheet is in charge — those pages carry the reference's own typography. */ body:not(.c4h-page-css) .elementor h1, body:not(.c4h-page-css) .elementor h2 { font-family: var(--c4h-serif); } body:not(.c4h-page-css) .elementor h3, body:not(.c4h-page-css) .elementor h4 { font-family: var(--c4h-sans); } /* Reference: `h1,h2,h3,h4 { color: var(--secondary) }`. */ body:not(.c4h-page-css) .elementor h1, body:not(.c4h-page-css) .elementor h2, body:not(.c4h-page-css) .elementor h3, body:not(.c4h-page-css) .elementor h4 { color: #1f1f1f; } /* `p { max-width: 65ch }` in the reference: keeps measure comfortable without touching any Elementor width control. */ body:not(.c4h-page-css) .elementor p { max-width: 65ch; } .elementor .e-con > .e-con-inner > .elementor-widget p, .elementor [class*="-center"] p, .elementor .elementor-widget-text-editor.section-subtitle p { margin-left: inherit; } /* Centered blocks in the reference also centre their measure. */ .section-header.center p, .elementor-widget-text-editor[class*="center"] p { margin-left: auto; margin-right: auto; } .accent-text { color: var(--c4h-accent, #b85c4f); } /* A native Elementor text-editor inserts a paragraph and stretches to the full flex-row width. The reference badge is content-sized, with its 13px text on a 22.1px line; normalize the widget wrapper rather than replacing the editable text widget with hand-written markup. */ /* Live hero CTA sits flush left under the copy. Elementor stretches the Button widget to the full 620px CTA column; .btn's text-align:center then visually centers the intrinsic . Shrink the widget and left-align. */ .hero-cta-group > .elementor-widget-button, .hero-cta-group > .btn { width: auto !important; max-width: 100% !important; align-self: flex-start !important; text-align: left !important; justify-content: flex-start !important; } .hero-layout > .hero-badge { align-self: stretch !important; flex: 0 0 auto !important; width: 100% !important; } .hero-layout > .hero-badge > p { margin: 0 !important; line-height: 23.8px !important; } @media (max-width: 767px) { .hero-layout > .hero-badge { align-self: flex-start !important; width: fit-content !important; /* The original keeps whitespace around its inline SVG; Elementor's single paragraph tokenizes that gap slightly narrower, so preserve the measured outer badge width without touching the editable copy. */ padding-right: 18.65625px !important; } .hero-layout > .hero-badge > p { line-height: 22.1px !important; } /* Method hero: its badge sits inside an extra native Elementor container, so the homepage direct-child selector above cannot govern its box model. */ body.page-id-42 .hero-layout, body.page-id-50 .hero-layout { transform: translateY(4px) !important; } body.page-id-42 .hero-badge, body.page-id-50 .hero-badge { align-self: flex-start !important; width: fit-content !important; padding-right: 7.859375px !important; } body.page-id-42 .hero-badge > p, body.page-id-50 .hero-badge > p { line-height: 22.1px !important; } body.page-id-42 #home .hero-actions, body.page-id-50 #home .hero-actions { align-items: stretch !important; } body.page-id-42 .hero-actions .elementor-widget-button, body.page-id-42 .hero-actions .elementor-button, body.page-id-50 .hero-actions .elementor-widget-button, body.page-id-50 .hero-actions .elementor-button { width: 100% !important; } body.page-id-42 .hero-actions .elementor-button, body.page-id-50 .hero-actions .elementor-button { display: flex !important; box-sizing: border-box; justify-content: center; } body.page-id-42 .hero-actions .elementor-button-text, body.page-id-50 .hero-actions .elementor-button-text { white-space: normal !important; } } /* * My Approach hero — regular iPhone above-the-fold. * Page CSS locks height:100svh + overflow:hidden, which clips the primary CTA * on short viewports (SE / Safari chrome). Compact the stack and never clip. */ @media (max-width: 767px) { body.page-id-42 .elementor .elementor-element.hero, body.page-id-50 .elementor .elementor-element.hero { height: auto !important; min-height: 0 !important; align-items: flex-start !important; padding-top: calc(var(--c4h-nav-height, 80px) + 8px) !important; padding-bottom: 28px !important; overflow: visible !important; } body.page-id-42 .elementor .elementor-element.hero-badge, body.page-id-50 .elementor .elementor-element.hero-badge { margin-bottom: 6px !important; } body.page-id-42 .elementor .elementor-element.hero h1 .elementor-heading-title, body.page-id-50 .elementor .elementor-element.hero h1 .elementor-heading-title { font-size: clamp(1.35rem, 6vw, 1.75rem) !important; line-height: 1.08 !important; } body.page-id-42 .elementor .elementor-element.hero-media, body.page-id-50 .elementor .elementor-element.hero-media { width: 100% !important; max-width: 100% !important; margin: 0 0 12px !important; align-self: stretch !important; } body.page-id-42 .elementor .elementor-element.hero-media video, body.page-id-42 .elementor .elementor-element.hero-media img, body.page-id-42 .elementor .elementor-element.hero-media .elementor-widget-container video, body.page-id-42 .elementor .elementor-element.hero-media .elementor-widget-container img, body.page-id-42 .elementor .elementor-element.hero-media .elementor-widget-video, body.page-id-42 .elementor .elementor-element.hero-media .elementor-wrapper, body.page-id-50 .elementor .elementor-element.hero-media video, body.page-id-50 .elementor .elementor-element.hero-media img, body.page-id-50 .elementor .elementor-element.hero-media .elementor-widget-container video, body.page-id-50 .elementor .elementor-element.hero-media .elementor-widget-container img, body.page-id-50 .elementor .elementor-element.hero-media .elementor-widget-video, body.page-id-50 .elementor .elementor-element.hero-media .elementor-wrapper { max-height: none !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; } body.page-id-42 .elementor .elementor-element.hero-quote, body.page-id-50 .elementor .elementor-element.hero-quote { margin-top: 8px !important; padding-left: 14px !important; } body.page-id-42 .elementor .elementor-element.hero-quote p, body.page-id-42 .elementor .elementor-element.hero-quote .elementor-widget-container p, body.page-id-50 .elementor .elementor-element.hero-quote p, body.page-id-50 .elementor .elementor-element.hero-quote .elementor-widget-container p { font-size: 0.9375rem !important; line-height: 1.28 !important; } body.page-id-42 .elementor .elementor-element.hero-actions, body.page-id-50 .elementor .elementor-element.hero-actions { gap: 8px !important; margin-top: 8px !important; } body.page-id-42 .hero-actions .elementor-button, body.page-id-50 .hero-actions .elementor-button { padding: 11px 16px !important; min-height: 0 !important; line-height: 1.25 !important; font-size: 0.9375rem !important; } body.page-id-42 .hero-actions .elementor-button-content-wrapper, body.page-id-50 .hero-actions .elementor-button-content-wrapper { gap: 8px !important; } } /* Extra-short phones / Safari chrome open: keep video + primary CTA in view. */ @media (max-width: 767px) and (max-height: 700px) { body.page-id-42 .elementor .elementor-element.hero, body.page-id-50 .elementor .elementor-element.hero { padding-top: calc(var(--c4h-nav-height, 80px) + 4px) !important; padding-bottom: 20px !important; } body.page-id-42 .elementor .elementor-element.hero-media, body.page-id-50 .elementor .elementor-element.hero-media { width: 100% !important; max-width: 100% !important; margin: 0 0 8px !important; } body.page-id-42 .elementor .elementor-element.hero-media video, body.page-id-42 .elementor .elementor-element.hero-media img, body.page-id-42 .elementor .elementor-element.hero-media .elementor-widget-container video, body.page-id-42 .elementor .elementor-element.hero-media .elementor-widget-container img, body.page-id-50 .elementor .elementor-element.hero-media video, body.page-id-50 .elementor .elementor-element.hero-media img, body.page-id-50 .elementor .elementor-element.hero-media .elementor-widget-container video, body.page-id-50 .elementor .elementor-element.hero-media .elementor-widget-container img { max-height: none !important; } body.page-id-42 .elementor .elementor-element.hero h1 .elementor-heading-title, body.page-id-50 .elementor .elementor-element.hero h1 .elementor-heading-title { font-size: clamp(1.25rem, 5.6vw, 1.6rem) !important; } body.page-id-42 .hero-actions .elementor-button, body.page-id-50 .hero-actions .elementor-button { padding: 10px 14px !important; font-size: 0.875rem !important; } } /* Method page: default section padding 96px is too tall on phones. */ @media (max-width: 767px) { body.page-id-42 .elementor section.elementor-element, body.page-id-50 .elementor section.elementor-element { padding-top: 48px !important; padding-bottom: 48px !important; } body.page-id-42 .elementor section.elementor-element.process-section, body.page-id-50 .elementor section.elementor-element.process-section, body.page-id-42 .elementor section.elementor-element:has(.process-grid), body.page-id-50 .elementor section.elementor-element:has(.process-grid) { padding-top: 40px !important; padding-bottom: 40px !important; } body.page-id-42 .elementor .elementor-element.process-card, body.page-id-42 .elementor .elementor-element.tool-card, body.page-id-50 .elementor .elementor-element.process-card, body.page-id-50 .elementor .elementor-element.tool-card { padding: 24px !important; } body.page-id-42 .elementor .elementor-element.process-grid, body.page-id-50 .elementor .elementor-element.process-grid { gap: 16px !important; } } @media (min-width: 768px) { /* Home session cards are source flex rows: the Font Awesome glyph paints from a zero-width slot followed by a 16px gap. Preserve the editable Icon and content containers rather than replacing either with HTML. */ body.page-id-41 #sessions .session-item { flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; } body.page-id-41 #sessions .session-item > .elementor-widget-icon { width: 0 !important; height: 18px !important; flex: 0 0 0 !important; align-self: flex-start !important; margin-top: 2px !important; overflow: visible !important; } body.page-id-41 #sessions .session-item > .elementor-widget-icon svg { width: 18px !important; height: 18px !important; } /* The live source retains the unused Font Awesome slots but its glyphs are not painted. Elementor otherwise renders both its SVG and the inherited Font Awesome pseudo-element, producing the visible duplicate icons. */ body.page-id-41 #sessions .session-item > .elementor-widget-icon::before { content: none !important; } body.page-id-41 #sessions .session-item > .elementor-widget-icon .elementor-icon { display: none !important; } body.page-id-41 #sessions .session-item > .e-con { width: auto !important; min-width: 0 !important; flex: 1 1 0 !important; margin-top: 0 !important; transform: translateY(1px); } /* The Field cards use the same icon-and-copy row on desktop. */ body.page-id-45 #sessions .session-item { flex-direction: row !important; align-items: flex-start !important; } body.page-id-45 #sessions .session-item > .elementor-widget-icon { width: 18px !important; height: auto !important; flex: 0 0 auto !important; margin-top: 2px; } body.page-id-45 #sessions .session-item > .elementor-widget-icon.fa-comments, body.page-id-45 #sessions .session-item > .elementor-widget-icon.fa-laptop, body.page-id-45 #sessions .session-item > .elementor-widget-icon.fa-language { width: 22.5px !important; } body.page-id-45 #sessions .session-item > .e-con { width: auto !important; min-width: 0 !important; flex: 1 1 0 !important; } /* The desktop Field package cards use the same compact feature and button typography as their reference counterparts. */ body.page-id-45 #packages .package-features .elementor-icon-list-item, body.page-id-45 #packages .package-features .elementor-icon-list-text { font-size: 15px !important; line-height: 25.5px !important; } body.page-id-45 #packages .package-card .elementor-button { font-size: 16px !important; line-height: 27.2px !important; } body.page-id-45 #contact .elementor-widget-text-editor > p { line-height: 28.9px !important; } } @media (max-width: 767px) { /* Field packages retain their smaller 15/25.5px feature rows and 16px email buttons. The Home package typography is deliberately larger and must not leak into this three-card Field variant. */ body.page-id-45 #packages .package-features .elementor-icon-list-item, body.page-id-45 #packages .package-features .elementor-icon-list-text { font-size: 15px !important; line-height: 25.5px !important; } body.page-id-45 #packages .package-card .elementor-button { font-size: 16px !important; line-height: 27.2px !important; } /* At the live mobile viewport only the final Field question wraps to the 89px title row. */ body.page-id-45 #faq .elementor-accordion-item:nth-child(4) .elementor-tab-title { height: 89px !important; min-height: 89px !important; } body.page-id-45 #contact .elementor-widget-text-editor > p { line-height: 28.9px !important; } /* Field hero: retain the source's final 4.36px mobile reserve so all following section anchors start on their measured reference positions. */ body.page-id-45 #home { min-height: 1288.9296875px !important; height: 1288.9296875px !important; } body.page-id-45 #sessions .section-subtitle > p { line-height: 28.9px !important; } body.page-id-45 #packages .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } /* In the source these two CTA margins collapse. Elementor containers are flex boxes, so leaving both margins active introduces a second 34px gap. Keep native widgets and explicitly restore the source's full-width flow. */ body.page-id-43 .hero-badge, body.page-id-51 .hero-badge { align-self: flex-start !important; width: fit-content !important; padding-right: 5.203125px !important; } /* The reference's mobile grid aligns each content column 1.75px below its outer layout box. Elementor otherwise places both direct containers at the grid origin. */ body.page-id-43 .hero-layout > .elementor-element, body.page-id-51 .hero-layout > .elementor-element { transform: translateY(1.75px); } body.page-id-43 .hero-badge p, body.page-id-51 .hero-badge p { line-height: 25.5px !important; } body.page-id-43 #home .hero-actions, body.page-id-51 #home .hero-actions { align-items: stretch !important; margin-top: 0 !important; } body.page-id-43 #home .hero-actions .elementor-widget-button, body.page-id-43 #home .hero-actions .elementor-button, body.page-id-51 #home .hero-actions .elementor-widget-button, body.page-id-51 #home .hero-actions .elementor-button { width: 100% !important; } body.page-id-43 #home .hero-actions .elementor-button, body.page-id-51 #home .hero-actions .elementor-button { display: flex !important; box-sizing: border-box; justify-content: center; } body.page-id-43 #home .hero-actions .elementor-button-text, body.page-id-51 #home .hero-actions .elementor-button-text { white-space: normal !important; } } @media (min-width: 768px) { .final-cta .hero-actions { flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 14px !important; } .final-cta .hero-actions .elementor-widget-button, .final-cta .hero-actions .elementor-button { width: auto !important; } .final-cta .hero-actions .elementor-button { display: flex !important; } } /* On phones the local Inter subset is slightly narrower than the live font file. This measured tracking restores the legal copy's source line count; the opening and trailing reserves mirror the normal-flow legal template. */ @media (max-width: 767px) { body.page-id-183 .c4h-page-top, body.page-id-48 .c4h-page-top, body.page-id-53 .c4h-page-top, body.page-id-54 .c4h-page-top { padding: 120px 24px 98px !important; } body.page-id-183 .content-block, body.page-id-48 .content-block, body.page-id-53 .content-block, body.page-id-54 .content-block { letter-spacing: 0.014em; } body.page-id-53 .content-block { letter-spacing: 0.016em; } body.page-id-48 .c4h-page-top { padding-bottom: 77px !important; } body.page-id-48 .content-block { letter-spacing: normal; } /* The Spanish imprint has the same native source flow as the English imprint: added tracking creates an extra line, while the template keeps a 77px trailing reserve before its footer. */ body.page-id-54 .c4h-page-top { padding-bottom: 77px !important; } body.page-id-54 .content-block { letter-spacing: normal; } } /* Shift section: Elementor turns inline source elements into full text-editor blocks. Restore the reference widths and line boxes on those editable widgets so the section keeps its source rhythm. */ @media (min-width: 768px) { .shift-content > .section-label { margin-top: 5px !important; } .shift-content > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } .shift-content > .shift-lead { margin-left: 112px !important; margin-right: 112px !important; } .shift-content > .shift-quote { margin-left: 12px !important; margin-right: 12px !important; } .shift-content > .shift-body-intro { margin-left: 52px !important; margin-right: 52px !important; } .shift-content > .shift-body-intro > p { letter-spacing: -0.04em; } .shift-content > .shift-close { margin-left: 32px !important; margin-right: 32px !important; } .shift-content > .shift-close > p { letter-spacing: -0.03em; } .shift-content > .shift-benefits-grid { margin-top: 8px !important; min-height: 276.796875px !important; } .shift-content > .shift-close { margin-top: 8px !important; } .shift-content > .shift-cta { margin-left: 32px !important; margin-right: 32px !important; } .shift-content > .shift-cta > p { margin: 0 !important; line-height: 28.9px !important; } } @media (max-width: 767px) { /* About: source margins collapse through ordinary blocks; Elementor's flex containers retain them. Match the source line boxes at the widgets. */ #about .section-header > .section-label { margin-top: 5px !important; } #about .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } #about .section-header > .section-title { margin-bottom: 0 !important; } #about .credibility-item > .elementor-widget-text-editor > p { margin: 0 !important; font-size: 16px !important; line-height: 27.2px !important; } /* Shift: Elementor turns every sibling into a div, so the source selector `.shift-rule:first-of-type` no longer identifies the first divider. Keep the existing divider widget and restore its source order explicitly. */ .shift-content > .shift-rule:nth-child(5) { order: 2 !important; } .shift-content > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } .shift-content > .shift-body-intro > p { letter-spacing: -0.04em; } .shift-content > .shift-benefits-grid { min-height: 561.59375px !important; } .shift-content > .shift-quote > p { letter-spacing: 1.5px; } .shift-content > .shift-cta > p { margin: 0 !important; line-height: 27.2px !important; } /* Note: the source uses an inline label and a 27.2px signature line. Keep their native Elementor text-editor widgets, but remove the inherited 30.6px wrapper line box that otherwise adds 5px to the card. */ .note-text > .section-label { margin-top: 5px !important; } .note-text > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } .note-text > .note-signature > p { margin: 0 !important; line-height: 27.2px !important; } /* Confidentiality: same native widgets as the source, with Elementor's inherited body line-height removed at the individual text-editor level. */ .confidential-inner > .section-label { margin-top: 5px !important; } .confidential-inner > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } .confidential-inner > .elementor-widget-text-editor:not(.section-label):not(.section-subtitle) > p { margin: 0 !important; font-size: 17px !important; line-height: 28.9px !important; } .confidential-points { height: 225.4921875px !important; } } /* Elementor's icon-list omits the five-pixel row gap present in the source grid. Restoring it also keeps the CTA at its reference y-position. */ .hero-recognition .elementor-icon-list-item + .elementor-icon-list-item { margin-top: 5px !important; } /* The source credibility note is one horizontal flex row. Elementor's container defaults it back to a column at mobile, which adds 50px and moves the editable text below its circle. */ .hero-credibility { flex-direction: row !important; align-items: flex-start !important; } .hero-credibility > .elementor-widget-text-editor { flex: 1 1 0 !important; width: auto !important; } /* The reference resolves a visible fade-up element to its natural position. Elementor's copied runtime rule left it translated by -15px on desktop, producing both the wrong hero geometry and an invented-looking animation. */ .fade-up.visible, .fade-up.visible.elementor-invisible, .elementor-invisible.fade-up.visible { transform: none !important; opacity: 1 !important; visibility: visible !important; animation: none !important; } /* Reference: hero copy is visible immediately; only below-fold bands fade in. Leaving hero at opacity:0 until JS runs makes LCP wait on the interaction script and tanks Lighthouse paint metrics. */ .hero .fade-up, .hero.fade-up { transform: none !important; opacity: 1 !important; visibility: visible !important; transition: none !important; } /* Desktop source: the recognition lead is the first row of the same bordered list. The Elementor importer necessarily keeps its text-editor and icon-list as separate editable widgets; compose those two widgets back into the source geometry without replacing either with raw HTML. */ @media (min-width: 768px) { .hero-recognition-panel { position: relative !important; display: block !important; height: 175.84375px !important; margin-bottom: 24px !important; border: 0 !important; background: transparent !important; } .hero-recognition-panel > .hero-recognition-lead { position: absolute !important; top: 17px !important; left: 21px !important; z-index: 1; width: auto !important; } .hero-recognition-panel > .hero-recognition-lead > p { margin: 0 !important; line-height: 18.84375px !important; } .hero-recognition-panel > .hero-recognition { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 175.84375px !important; margin: 0 !important; padding: 46.84375px 20px 16px !important; } .hero-recognition-panel > .hero-recognition .elementor-icon-list-item + .elementor-icon-list-item { margin-top: 8px !important; } } /* Doors: preserve the Elementor heading/text-editor widgets, but give their inner paragraphs the reference line boxes instead of Elementor's inherited 30.6px body line-height. */ .doors-grid .door-label > p { margin: 0 !important; line-height: 20.4px !important; } .doors-grid .door > .elementor-widget-text-editor:not(.door-label):not(.door-felt):not(.door-cta) > p { margin: 0 0 12px !important; font-size: 16px !important; line-height: 26.4px !important; } .doors-grid .door-felt > p { margin: 0 !important; font-size: 16px !important; line-height: 26.4px !important; } .doors-grid .door-cta > p { margin: 0 !important; line-height: 25.5px !important; } @media (min-width: 768px) { /* The local Inter rasterization is just wide enough to create a third line in the door copy. This is the measured source text advance, scoped to the affected editable paragraphs only. */ .doors-grid .door > .elementor-widget-text-editor:not(.door-label):not(.door-felt):not(.door-cta) > p { letter-spacing: -0.02em; } /* Block margins collapse in the source; Elementor's flex container keeps both margins. The resulting 49.82px is removed at the grid wrapper. */ .doors-grid { margin-top: -1.8203125px !important; } } @media (max-width: 767px) { /* Same margin-collapse difference on the stacked Doors layout. The cards themselves already match; only the Elementor flex wrapper adds 61.656px. */ .doors-grid { margin-top: -13.65625px !important; } } :root { --c4h-accent: #b85c4f; --c4h-accent-rgb: 184, 92, 79; --c4h-accent-hover: #a44639; --c4h-accent-on-dark: #e9a492; --c4h-border: #e8e0d8; --c4h-nav-height: 80px; } @media (max-width: 767px) { :root { --c4h-nav-height: 80px; } } /* --------------------------------------------------------- 2. fixed header */ .c4h-header { position: fixed; top: 0; left: 0; right: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s; /* HFE's imported responsive controls are stored in the template JSON but Elementor does not regenerate its cached template CSS during CLI import. Keep the source dimensions explicit until an editor save regenerates it. */ min-height: 81px !important; padding: 0 32px !important; } .c4h-header.is-scrolled { border-bottom-color: var(--c4h-border); box-shadow: 0 2px 8px rgba(31, 31, 31, 0.04); } /* The header is out of flow, so the first section carries its height. */ body:not(.elementor-editor-active) .c4h-page-top { padding-top: var(--c4h-nav-height); } /* Legal pages have the reference's deliberately generous 160px opening gap. Elementor's imported Container padding otherwise wins over the generic page-top rule and places their heading underneath the fixed header. */ @media (min-width: 768px) { body.page-id-183 .c4h-page-top, body.page-id-48 .c4h-page-top, body.page-id-53 .c4h-page-top, body.page-id-54 .c4h-page-top { padding-top: 157.2px !important; padding-bottom: 136px !important; } /* Text Editor widgets isolate the native blocks that are adjacent in the source. Restore its paragraph rhythm where a native 16px margin would otherwise have collapsed, then offset list-to-heading pairs where it would not. Scoped to legal documents, whose imported source is raw text. */ body.page-id-183 .content-block > .elementor-widget-text-editor:has(> p):has(+ .elementor-widget-text-editor > :is(p, ul, ol)), body.page-id-48 .content-block > .elementor-widget-text-editor:has(> p):has(+ .elementor-widget-text-editor > :is(p, ul, ol)), body.page-id-53 .content-block > .elementor-widget-text-editor:has(> p):has(+ .elementor-widget-text-editor > :is(p, ul, ol)), body.page-id-54 .content-block > .elementor-widget-text-editor:has(> p):has(+ .elementor-widget-text-editor > :is(p, ul, ol)) { margin-bottom: 16px; } body.page-id-183 .content-block > .elementor-widget-text-editor:has(> :is(ul, ol)):has(+ .elementor-widget-heading) > :is(ul, ol), body.page-id-48 .content-block > .elementor-widget-text-editor:has(> :is(ul, ol)):has(+ .elementor-widget-heading) > :is(ul, ol), body.page-id-53 .content-block > .elementor-widget-text-editor:has(> :is(ul, ol)):has(+ .elementor-widget-heading) > :is(ul, ol), body.page-id-54 .content-block > .elementor-widget-text-editor:has(> :is(ul, ol)):has(+ .elementor-widget-heading) > :is(ul, ol) { margin-bottom: -8px; } /* Imprints begin directly with a heading; the source's first heading has no preceding top margin. Their one list-to-heading collapse is 4px tighter than the longer privacy documents. */ body.page-id-48 .content-block > .elementor-widget-heading:first-child h2, body.page-id-54 .content-block > .elementor-widget-heading:first-child h2 { margin-top: 0; } body.page-id-48 .content-block > .elementor-widget-text-editor:has(> :is(ul, ol)):has(+ .elementor-widget-heading) > :is(ul, ol), body.page-id-54 .content-block > .elementor-widget-text-editor:has(> :is(ul, ol)):has(+ .elementor-widget-heading) > :is(ul, ol) { margin-bottom: -12px; } } .c4h-logo { display: block; line-height: 0; } .c4h-logo img { display: block; max-height: 56px; width: auto; } @media (max-width: 767px) { .c4h-logo img { /* Method/About/Legal paint the same source image inside this deliberately narrow, tall mobile box. */ width: 179.859375px !important; height: 58px !important; max-height: none; } .c4h-logo { width: 179.859375px !important; height: 58px !important; } /* The homepage uses the compact 65px reference bar. */ body.home .c4h-header { min-height: 65px !important; } body.home .c4h-logo, body.home .c4h-logo img { width: 178.375px !important; height: 43.984375px !important; } /* The Field page keeps the taller bar but its compact logo treatment. */ body.page-id-45 .c4h-logo, body.page-id-45 .c4h-logo img { width: 179.53125px !important; height: 44.28125px !important; } /* The source's plain flow retains these two text reserves. Elementor's separate Text Editor wrappers drop them, shortening #shift by 57.64px. */ body.page-id-41 #shift .shift-body-intro { padding-bottom: 29.75px; } body.page-id-41 #shift .shift-close { padding-bottom: 27.890625px; } /* Keep the About portrait at its real photo ratio (1068×1600). A previous pixel-match forced a landscape crop (~279px tall) from wrong HTML width/height attrs (2400×2047) on a portrait file — that squashed Sara. */ #about .about-images, #about .about-portrait { height: auto !important; } #about .about-portrait img { width: 100% !important; height: auto !important; aspect-ratio: 1068 / 1600 !important; object-fit: cover !important; object-position: center top !important; } } /* The bar is one 80px row: the menu must not wrap onto a second line. */ .c4h-nav-menu .hfe-nav-menu, .c4h-nav-menu ul.hfe-nav-menu { flex-wrap: nowrap; } .c4h-header-right { flex-shrink: 0; } /* These are real Elementor Shortcode/Button widgets used only after the mobile HFE drawer opens. They must never participate in the desktop flex row, otherwise they consume its free space and cover the navigation. */ .c4h-mobile-drawer-langs, .c4h-mobile-drawer-cta { display: none !important; } /* HFE otherwise gives both immediate header children a full-row basis, which wraps the menu below the logo at mobile widths and makes the bar 103px high. */ .c4h-header > .c4h-logo { flex: 0 0 auto; width: auto; } .c4h-header > .c4h-header-right { flex: 0 0 auto; width: auto; margin-left: auto; } @media (max-width: 767px) { .c4h-header { min-height: 81px !important; padding: 0 24px !important; gap: 0 !important; } } /* Reference shows nav links and the CTA only from 1180px up. */ @media (min-width: 1180px) { /* The source keeps its 1200px nav frame, with a 48px inner gutter. The Elementor header has no intermediate container, so reproduce it here. */ body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-header { padding-inline: max(48px, calc((100vw - 1200px) / 2 + 48px)) !important; } /* Home and Contact belong to the mobile drawer; the three middle links form the desktop navigation in the reference. */ .c4h-nav-menu .hfe-nav-menu > li:first-child, .c4h-nav-menu .hfe-nav-menu > li:last-child { display: none; } /* HFE's cached template CSS otherwise restores its panel defaults (18px, 15px vertical padding). The reference uses compact 15px navigation text centered in the fixed 80px bar. */ .c4h-nav-menu .hfe-nav-menu .hfe-menu-item { position: relative !important; font-size: 15px !important; line-height: 25.5px !important; letter-spacing: normal !important; padding: 0 !important; color: var(--text-secondary, #5a5a5a) !important; transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .c4h-nav-menu .hfe-nav-menu .hfe-menu-item:hover, .c4h-nav-menu .hfe-nav-menu .hfe-menu-item:focus, .c4h-nav-menu .hfe-nav-menu > .current-menu-item > .hfe-menu-item, .c4h-nav-menu .hfe-nav-menu > .current_page_item > .hfe-menu-item { color: var(--text-primary, #1f1f1f) !important; } /* Match Astro `.nav-link::after` exactly: 2px accent bar that grows width 0→100% (HFE underline is a 3px full-width opacity/scale pointer). */ .c4h-nav-menu .hfe-nav-menu .menu-item.parent a.hfe-menu-item::before, .c4h-nav-menu .hfe-nav-menu .hfe-menu-item::before { content: none !important; display: none !important; opacity: 0 !important; border: 0 !important; background: none !important; transform: none !important; } .c4h-nav-menu .hfe-nav-menu .menu-item.parent a.hfe-menu-item::after, .c4h-nav-menu .hfe-nav-menu .hfe-menu-item::after { content: '' !important; display: block !important; position: absolute !important; bottom: -4px !important; top: auto !important; left: 0 !important; right: auto !important; width: 0 !important; max-width: none !important; height: 2px !important; background: var(--accent, #b85c4f) !important; background-color: var(--accent, #b85c4f) !important; border: 0 !important; border-radius: 0 !important; opacity: 1 !important; transform: none !important; transition: width 0.3s !important; z-index: 2 !important; pointer-events: none !important; } .c4h-nav-menu .hfe-nav-menu .menu-item.parent a.hfe-menu-item:hover::after, .c4h-nav-menu .hfe-nav-menu .menu-item.parent a.hfe-menu-item:focus::after, .c4h-nav-menu .hfe-nav-menu .menu-item.parent a.hfe-menu-item.highlighted::after, .c4h-nav-menu .hfe-nav-menu .menu-item.current-menu-item.parent a.hfe-menu-item::after, .c4h-nav-menu .hfe-nav-menu .menu-item.current_page_item.parent a.hfe-menu-item::after, .c4h-nav-menu .hfe-nav-menu .hfe-menu-item:hover::after, .c4h-nav-menu .hfe-nav-menu .hfe-menu-item:focus::after { width: 100% !important; height: 2px !important; bottom: -4px !important; left: 0 !important; opacity: 1 !important; transform: none !important; } /* The source centers these three links in the space between logo and CTA. HFE otherwise treats them as part of the right-aligned controls block. */ .c4h-header-standard .c4h-nav-menu { position: absolute !important; left: calc(50% - 259.4375px) !important; } .c4h-header-standard > .c4h-header-right { position: static !important; } body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-nav-menu { position: absolute !important; left: calc(50% - 253px) !important; } body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-header > .c4h-header-right { position: static !important; gap: 76px !important; margin-right: -15px; } /* Elementor's Button widget has a 15px inherited line box. The source CTA is a 50px flex button with its 15px label on a 25.5px line. */ body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-nav-cta { flex: 0 0 177.625px !important; width: 177.625px !important; } body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-nav-cta .elementor-button { display: flex !important; align-items: center; justify-content: center; box-sizing: border-box !important; width: 100% !important; height: 49.5px !important; min-height: 0 !important; padding: 12px 24px !important; line-height: 25.5px !important; } /* Intrinsic width so EN/ES labels keep real 12×24 padding (live ES ~350px; a fixed 320px crushed the longer Spanish label to ~3px side inset). */ .c4h-header-standard .c4h-nav-cta { flex: 0 0 auto !important; width: auto !important; } .c4h-header-standard .c4h-nav-cta .elementor-button { display: flex !important; align-items: center; justify-content: center; width: auto !important; height: 49.5px !important; min-height: 0 !important; padding: 12px 24px !important; line-height: 25.5px !important; white-space: nowrap !important; /* White on #b85c4f is 4.48:1 — 0.02 under AA. Slightly darker fill. */ background-color: #a85548 !important; } .c4h-header-standard .c4h-nav-cta .elementor-button-text { font-weight: 600 !important; } .c4h-nav-cta .elementor-button-content-wrapper { gap: 10px !important; } .c4h-lang-switch .c4h-lang-links { display: inline-flex; align-items: center; gap: 10px; } .c4h-lang-switch a { box-sizing: border-box; width: 26px; height: 25.59375px; padding: 4px !important; } .c4h-lang-switch a + a { margin-left: 24px !important; } /* The legal reference exposes Home/Contact but omits the Method link. */ body.page-id-183 .c4h-nav-menu .hfe-nav-menu > li:first-child, body.page-id-183 .c4h-nav-menu .hfe-nav-menu > li:last-child, body.page-id-48 .c4h-nav-menu .hfe-nav-menu > li:first-child, body.page-id-48 .c4h-nav-menu .hfe-nav-menu > li:last-child, body.page-id-53 .c4h-nav-menu .hfe-nav-menu > li:first-child, body.page-id-53 .c4h-nav-menu .hfe-nav-menu > li:last-child, body.page-id-54 .c4h-nav-menu .hfe-nav-menu > li:first-child, body.page-id-54 .c4h-nav-menu .hfe-nav-menu > li:last-child { display: list-item; } body.page-id-183 .c4h-nav-menu .hfe-nav-menu > li:nth-child(3), body.page-id-48 .c4h-nav-menu .hfe-nav-menu > li:nth-child(3), body.page-id-53 .c4h-nav-menu .hfe-nav-menu > li:nth-child(3), body.page-id-54 .c4h-nav-menu .hfe-nav-menu > li:nth-child(3) { display: none; } } @media (max-width: 1179px) { .c4h-nav-cta { display: none; } /* The four legal routes intentionally retain their desktop-width header on a phone. The reference lets its remaining controls overflow to the right; only the logo and compact booking CTA are visible in the viewport. */ body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-header > .c4h-logo, body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-header > .c4h-logo img { flex: 0 0 227px !important; width: 227px !important; height: 56px !important; } body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-header { flex-wrap: nowrap !important; align-items: center !important; } body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-header > .c4h-header-right { flex: 0 0 auto !important; width: auto !important; margin-left: 0 !important; flex-wrap: nowrap !important; } body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-nav-cta { display: block !important; flex: 0 0 177.625px !important; width: 177.625px !important; } body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-nav-cta .elementor-button { display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 49.5px !important; padding: 12px 24px !important; } body:is(.page-id-183, .page-id-48, .page-id-53, .page-id-54) .c4h-nav-cta .elementor-button-icon { display: none !important; } /* Source order on a phone is flags then the hamburger, even though the desktop HFE menu has to sit before the language switcher. */ .c4h-header-right .c4h-lang-switch { order: 1; } .c4h-header-right .c4h-nav-menu { order: 2; } /* The reference uses 44px tap targets, with flags immediately adjacent to the menu control. HFE otherwise leaves a 20px container gap and gives its 22px icon no hit-area. */ .c4h-header-right { gap: 0 !important; } .c4h-lang-links { display: flex; align-items: center; gap: 10px; } .c4h-lang-switch .c4h-lang-links { gap: 10px; } .c4h-lang-switch a { box-sizing: border-box; width: 29px; height: 25.59375px; padding: 4px !important; } .c4h-lang-switch a { display: block; height: 26px; padding: 4px !important; line-height: 18px; } .c4h-lang-switch img.emoji { margin: 0 !important; } .c4h-nav-menu .hfe-nav-menu__toggle { display: flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; } .c4h-nav-menu .hfe-nav-menu__toggle svg { width: 20px !important; height: 20px !important; } /* HFE changes this nav into its mobile dropdown. The old selector hid this very panel even after HFE added `.menu-is-active`, leaving only “Menu”. */ .c4h-nav-menu .hfe-nav-menu__layout-horizontal:not(.menu-is-active) { display: none; } .c4h-nav-menu .hfe-nav-menu__layout-horizontal.menu-is-active { display: block !important; position: fixed !important; /* The source drawer begins 15px below the 65px header, preserving its dark transition strip. An explicit viewport height avoids Elementor's `height:auto` rule collapsing the fixed panel to its 64px padding. */ top: 80px !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: auto !important; height: calc(100vh - 80px) !important; padding: 32px 24px !important; background: #FAF8F5 !important; z-index: 999 !important; overflow-y: auto !important; } .c4h-nav-menu .hfe-nav-menu__layout-horizontal.menu-is-active > .hfe-nav-menu { display: flex !important; width: 100% !important; height: auto !important; flex-direction: column !important; gap: 0 !important; } .c4h-nav-menu .hfe-nav-menu__layout-horizontal.menu-is-active .hfe-menu-item { display: block !important; padding: 12px 0 !important; background: transparent !important; border-bottom: 1px solid var(--c4h-border) !important; font-size: 1.25rem !important; font-weight: 500 !important; line-height: 34px !important; color: #1F1F1F !important; } .c4h-nav-menu .hfe-nav-menu__layout-horizontal.menu-is-active .hfe-nav-menu > li { margin-bottom: 23px !important; background: transparent !important; } /* HFE supplies a framed window-close icon, unlike the source's bare ×. The interaction remains HFE's accessible toggle; this only matches its paint. */ .c4h-nav-menu .hfe-nav-menu__toggle.hfe-active-menu svg { display: none !important; } .c4h-nav-menu .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon::before { content: '×'; display: block; font-family: Inter, sans-serif; font-size: 24px; font-weight: 300; line-height: 20px; } .c4h-mobile-drawer-langs, .c4h-mobile-drawer-cta { display: none !important; } body:has(.c4h-nav-menu .menu-is-active) .c4h-mobile-drawer-langs { display: block !important; position: fixed !important; top: 535px !important; left: 36px !important; z-index: 1000 !important; margin: 0 !important; } .c4h-mobile-drawer-langs .c4h-lang-links { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-size: 20px; line-height: 20px; } .c4h-mobile-drawer-langs .c4h-lang-sep { width: 4.48px; text-align: center; } .c4h-mobile-drawer-langs .c4h-lang-links a { display: block; height: 28px; padding: 4px !important; line-height: 20px; } .c4h-mobile-drawer-langs img.emoji { width: 20px !important; height: 20px !important; margin: 0 !important; } body:has(.c4h-nav-menu .menu-is-active) .c4h-mobile-drawer-cta { display: block !important; position: fixed !important; top: 628px !important; left: 24px !important; right: 24px !important; z-index: 1000 !important; margin: 0 !important; } body:has(.c4h-nav-menu .menu-is-active) .c4h-mobile-drawer-cta .elementor-button { display: flex !important; align-items: center; justify-content: center; min-height: 58px !important; padding: 16px 24px !important; } } .c4h-lang-switch { display: flex; align-items: center; gap: 6px; font-size: 1.125rem; line-height: 1; } .c4h-lang-switch a { opacity: 0.55; transition: opacity 0.3s; text-decoration: none; } .c4h-lang-switch a:hover, .c4h-lang-switch a.is-current { opacity: 1; } .c4h-lang-sep { color: #8a8a8a; } /* ----------------------------------------------------------- 3. buttons */ @keyframes c4h-pulse-cta { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 16px rgba(var(--c4h-accent-rgb), 0.25), 0 0 0 0 rgba(var(--c4h-accent-rgb), 0.28); } 50% { transform: translateY(-1px) scale(1.012); box-shadow: 0 7px 22px rgba(var(--c4h-accent-rgb), 0.36), 0 0 0 5px rgba(var(--c4h-accent-rgb), 0); } } .btn-pulse .elementor-button { animation: c4h-pulse-cta 1.8s ease-in-out infinite; will-change: transform, box-shadow; } .elementor-button { white-space: nowrap; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s, box-shadow 0.3s; } /* Reference `.btn` rules target the anchor. The converter applies their button controls to Elementor's anchor; letting the copied CSS style the outer widget as well creates a second coloured, padded button box. */ .elementor .elementor-widget-button.btn, .elementor .elementor-widget-button.btn-primary, .elementor .elementor-widget-button.btn-secondary, .elementor .elementor-widget-button.btn-ghost { display: block !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Elementor Free accepts no inline SVG string in its icon control: it prints the SVG as a class name. The accordion needs only the source's plus mark. */ .faq-list .elementor-accordion-icon { display: none !important; } .faq-list .elementor-tab-title { position: relative; padding-right: 42px !important; } .faq-list .elementor-tab-title::after { content: '+'; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); font-size: 1.55rem; font-weight: 400; line-height: 1; color: var(--accent, #b85c4f); } .faq-list .elementor-tab-title.elementor-active::after { content: '−'; } .btn-primary .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--c4h-accent-rgb), 0.35); } .btn-secondary .elementor-button:hover { background-color: rgba(var(--c4h-accent-rgb), 0.18); transform: translateY(-2px); } /* The contact section in the reference inverts its secondary CTA copy against the terracotta background. Elementor's global secondary button colour is applied directly to the nested anchor, so this needs the same final scope. */ .final-cta .btn-secondary .elementor-button, .final-cta .btn-secondary .elementor-button-text, .final-cta .btn-secondary .elementor-button-icon, .final-cta .btn-secondary .elementor-button-icon svg, .final-cta .btn-secondary .elementor-button-icon svg path { color: #fff !important; fill: currentColor !important; stroke: currentColor !important; } /* Live uses a light white ring; the global btn-secondary accent border was winning on the Elementor . Keep the ring clearly white and readable. */ .final-cta .btn-secondary .elementor-button { background: transparent !important; border-style: solid !important; border-width: 2px !important; border-color: #fff !important; color: #fff !important; } .final-cta .btn-secondary .elementor-button:hover, .final-cta .btn-secondary .elementor-button:focus { background: rgba(255, 255, 255, 0.14) !important; border-color: #fff !important; color: #fff !important; } /* Final CTA primary is a white pill on terracotta — label/icon must stay accent (never white), including :hover, or the text disappears. */ .final-cta .btn-primary .elementor-button { background: #fff !important; color: var(--accent, #b85c4f) !important; } .final-cta .btn-primary .elementor-button-text, .final-cta .btn-primary .elementor-button-icon, .final-cta .btn-primary .elementor-button-icon svg, .final-cta .btn-primary .elementor-button-icon svg path { color: var(--accent, #b85c4f) !important; fill: currentColor !important; stroke: currentColor !important; } .final-cta .btn-primary .elementor-button:hover, .final-cta .btn-primary .elementor-button:focus { background: var(--bg-primary, #fdfdfc) !important; color: var(--accent-hover, #a44639) !important; } .final-cta .btn-primary .elementor-button:hover .elementor-button-text, .final-cta .btn-primary .elementor-button:hover .elementor-button-icon, .final-cta .btn-primary .elementor-button:hover .elementor-button-icon svg, .final-cta .btn-primary .elementor-button:hover .elementor-button-icon svg path, .final-cta .btn-primary .elementor-button:focus .elementor-button-text, .final-cta .btn-primary .elementor-button:focus .elementor-button-icon, .final-cta .btn-primary .elementor-button:focus .elementor-button-icon svg, .final-cta .btn-primary .elementor-button:focus .elementor-button-icon svg path { color: var(--accent-hover, #a44639) !important; fill: currentColor !important; stroke: currentColor !important; } @media (prefers-reduced-motion: reduce) { .btn-pulse .elementor-button { animation: none; } } /* -------------------------------------------------------------- 4. hero */ .hero { overflow-x: hidden; overflow-y: visible; } /* Native sections default to a row when they are flex containers; Elementor defaults every imported container to a column. This changes the hero's vertical centring by ~40px and also stacks its credibility icon above copy. */ @media (min-width: 768px) { /* The Method hero has two native Button widgets. Elementor defaults their parent to a column, whereas the reference keeps them on one baseline. */ body.page-id-42 .hero-layout { transform: translateY(2px) !important; } body.page-id-50 .hero-layout { transform: translateY(1px) !important; } body.page-id-42 #home .hero-actions, body.page-id-50 #home .hero-actions { flex-direction: row !important; align-items: center !important; gap: 14px !important; /* Match method-en.css / live (20px). The previous -21px pulled the CTAs up over the hero media caption. */ margin-top: 20px !important; } body.page-id-50 #home .hero-actions { margin-top: 20px !important; } /* About uses the same two native Button widgets as the reference. Elementor imports their parent as a column, which adds a complete button row to the hero. Keep the real widgets, but restore the reference's horizontal flow. */ body.page-id-43 .hero-layout, body.page-id-51 .hero-layout { transform: translateY(0) !important; } body.page-id-51 .hero-layout { transform: translateY(9px) !important; } body.page-id-43 #home .hero-actions, body.page-id-51 #home .hero-actions { flex-direction: row !important; align-items: center !important; gap: 14px !important; margin-top: -30px !important; transform: translateY(16px); } body.page-id-43 #home .hero-badge, body.page-id-51 #home .hero-badge { transform: translateY(-15px); } body.page-id-43 #home h1, body.page-id-51 #home h1 { transform: translateY(-13px); } body.page-id-43 #home .hero-media, body.page-id-51 #home .hero-media { transform: translateY(3px); } body.page-id-43 #home .hero-actions .elementor-widget-button, body.page-id-43 #home .hero-actions .elementor-button, body.page-id-51 #home .hero-actions .elementor-widget-button, body.page-id-51 #home .hero-actions .elementor-button { width: auto !important; } body.page-id-43 #home .hero-actions .elementor-button, body.page-id-51 #home .hero-actions .elementor-button { display: flex !important; width: 100% !important; align-items: center; justify-content: center; } body.page-id-43 #home .hero-actions .btn-primary, body.page-id-51 #home .hero-actions .btn-primary { width: 349px !important; } body.page-id-43 #home .hero-actions .btn-secondary, body.page-id-51 #home .hero-actions .btn-secondary { width: 173px !important; } body.page-id-51 #home .hero-actions .btn-primary { width: 383.2px !important; } body.page-id-51 #home .hero-actions .btn-secondary { width: 180.5px !important; } body.page-id-42 #home .hero-actions .elementor-widget-button, body.page-id-42 #home .hero-actions .elementor-button, body.page-id-50 #home .hero-actions .elementor-widget-button, body.page-id-50 #home .hero-actions .elementor-button { width: auto !important; } .hero { flex-direction: row !important; } .hero-credibility { flex-direction: row !important; } .hero-layout { transform: translateY(-15px) !important; } .hero-badge p { line-height: 23.8px !important; } } /* Elementor's Image widget preserves the original 2:3 intrinsic image size unless it is explicitly told to fill this square reference portrait frame. */ .why-portrait .elementor-widget-image, .why-portrait .elementor-widget-image img { height: 100%; } .why-portrait .elementor-widget-image img { width: 100%; object-fit: cover; } /* Elementor's container pseudo-element is absolute by default. The source's statement quote uses it as a real block before the editable paragraph, so keeping it absolute removes 56px from the card and changes every following grid row. Relative offsets restore the grid's source alignment without fighting the reveal transform on these native containers. */ body.page-id-43 .statement-card, body.page-id-51 .statement-card { display: block !important; top: auto; } body.page-id-43 .statement-card::before, body.page-id-51 .statement-card::before { position: static !important; } body.page-id-43 .statement-inner > .fade-up.stagger-1, body.page-id-51 .statement-inner > .fade-up.stagger-1 { position: relative; top: auto; height: 262.171875px !important; } @media (max-width: 767px) { /* The statement's second source row wraps onto an additional mobile line. Preserve its natural mobile height instead of the desktop grid measure. */ body.page-id-43 .statement-inner > .fade-up.stagger-1, body.page-id-51 .statement-inner > .fade-up.stagger-1 { height: 355.765625px !important; } body.page-id-51 .statement-inner > .fade-up.stagger-1 { height: 428.359375px !important; } /* The local Inter bundle is a fraction wider in these long mobile blocks. Tune each source paragraph only until it regains its measured line count. */ body.page-id-43 .bio-copy > .milestone:nth-child(1) p, body.page-id-51 .bio-copy > .milestone:nth-child(1) p, body.page-id-51 .bio-copy > .milestone:nth-child(4) p { letter-spacing: -0.02em; } body.page-id-43 .bio-copy > .milestone:nth-child(2) p, body.page-id-51 .bio-copy > .milestone:nth-child(2) p { letter-spacing: -0.01em; } body.page-id-43 .bio-copy > .milestone:nth-child(3) p, body.page-id-51 .bio-copy > .milestone:nth-child(3) p, body.page-id-51 .bio-copy > .milestone:nth-child(5) p { letter-spacing: -0.015em; } /* These two English source paragraphs cross a line-wrap boundary with the local Inter file. This measured tracking restores their source line count. */ body.page-id-43 .bio-copy > .milestone:nth-child(4) p, body.page-id-43 .bio-copy > .milestone:nth-child(5) p { letter-spacing: -0.03em; } body.page-id-43 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:nth-child(3) p, body.page-id-43 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:nth-child(5) p, body.page-id-51 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:nth-child(3) p, body.page-id-51 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:nth-child(5) p { letter-spacing: -0.01em; } body.page-id-43 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:nth-child(4) p, body.page-id-51 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:nth-child(4) p { letter-spacing: -0.025em; } body.page-id-51 .bio-copy > .milestone:nth-child(5) p { letter-spacing: -0.02em; } body.page-id-51 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:nth-child(2) p { letter-spacing: -0.015em; } body.page-id-51 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:nth-child(5) p { letter-spacing: -0.02em; } body.page-id-43 .final-cta .elementor-widget-text-editor p, body.page-id-51 .final-cta .elementor-widget-text-editor p { letter-spacing: -0.01em; } /* These Elementor containers retain a small empty trailing flex row on English/Spanish mobile. Constrain the photo grid to the measured box; leave the following bio-section height:auto so content (not a stale pixel height) defines the gap before Why Me. */ body.page-id-43 .photo-grid-section { height: 717.9140625px !important; } body.page-id-51 .photo-grid-section { height: 753.90625px !important; } body.page-id-43 .photo-grid-section + .bio-section, body.page-id-51 .photo-grid-section + .bio-section { height: auto !important; min-height: 0 !important; } body.page-id-43 .why-section, body.page-id-51 .why-section { height: auto !important; min-height: 0 !important; } /* About Me mobile: tighten space from "Why this work" copy into bio image. */ body.page-id-43 .elementor section.elementor-element, body.page-id-51 .elementor section.elementor-element { padding-top: 48px !important; padding-bottom: 48px !important; } body.page-id-43 .elementor .elementor-element.statement-inner, body.page-id-51 .elementor .elementor-element.statement-inner { padding-top: 28px !important; padding-bottom: 16px !important; } body.page-id-43 .elementor section.elementor-element.bio-section, body.page-id-51 .elementor section.elementor-element.bio-section { padding-top: 28px !important; padding-bottom: 48px !important; } body.page-id-43 .elementor .elementor-element.bio-layout, body.page-id-51 .elementor .elementor-element.bio-layout { gap: 20px !important; } body.page-id-43 .elementor section.elementor-element.photo-grid-section, body.page-id-51 .elementor section.elementor-element.photo-grid-section { padding-top: 40px !important; padding-bottom: 40px !important; } body.page-id-43 .statement-inner > .fade-up.stagger-1, body.page-id-51 .statement-inner > .fade-up.stagger-1 { height: auto !important; min-height: 0 !important; } /* The Spanish reference resolves several long mobile passages against the system sans face. Retain the editable Elementor text, while matching the source line breaks and the source photo widget's presentation box. */ body.page-id-51 #home { height: 1125.7421875px !important; } body.page-id-51 #home p, body.page-id-51 #story .bio-copy > .milestone:nth-child(3) p, body.page-id-51 .photo-grid-section .section-title-block p, body.page-id-51 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:nth-child(4) p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } body.page-id-51 .photo-collage, body.page-id-51 .photo-collage > .elementor-widget-image { height: 181.5234375px !important; } } /* Elementor's text-editor default line height (30.6px) overrides the reference's 1.7 rhythm (28.288px) inside the five bio milestones. That creates an extra 97.7px in this one grid and pushes the complete page. */ body.page-id-43 .bio-copy .elementor-widget-text-editor p, body.page-id-51 .bio-copy .elementor-widget-text-editor p { line-height: 1.7 !important; } /* The locally bundled Inter has a fractionally wider word fit than the reference font in this one paragraph. A very small tracking correction restores its reference five-line measure without changing its copy. */ body.page-id-43 .bio-copy > .milestone:nth-child(2) .elementor-widget-text-editor p, body.page-id-51 .bio-copy > .milestone:nth-child(2) .elementor-widget-text-editor p { letter-spacing: -0.015em; } /* In normal document flow the reference collapses the title's 56px bottom margin with the collage's 32px top margin. Elementor's flex container does not collapse margins; this measured margin restores the same final gap. */ body.page-id-43 .photo-grid-section .section-title-block, body.page-id-51 .photo-grid-section .section-title-block { margin-bottom: 18.7890625px !important; } /* Match the reference's three-line measure for the opening paragraph in the second biography block. The remaining paragraphs already have the same line count, so this is deliberately limited to the first editable widget. */ body.page-id-43 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:first-child p, body.page-id-51 .photo-grid-section + .bio-section .bio-copy > .elementor-widget-text-editor:first-child p { letter-spacing: -0.025em; } /* The short testimonial has no source "Read more" row. Elementor's injected helper must not reserve a line, and its author widgets belong side by side as in the reference instead of becoming a stacked container. */ body.page-id-43 .testimonial-readmore:not(.is-visible), body.page-id-51 .testimonial-readmore:not(.is-visible) { display: none !important; } body.page-id-43 .testimonial-author, body.page-id-51 .testimonial-author { flex-direction: row !important; align-items: center !important; } body.page-id-43 .testimonial-author > .e-con, body.page-id-51 .testimonial-author > .e-con { width: auto !important; min-width: 0; flex: 1 1 0; } .hero-badge { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); } .hero-badge .elementor-widget-icon { line-height: 1; } .hero-badge svg { width: 1em; height: 1em; color: var(--c4h-accent-on-dark); } .hero-recognition-panel { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* The reference marks each row with a haloed dot; the icon-list icon carries the colour, the halo is the part Elementor has no control for. */ .hero-recognition .elementor-icon-list-icon svg { border-radius: 50%; box-shadow: 0 0 0 3px rgba(var(--c4h-accent-rgb), 0.35); } /* The source list supplies its own `li::before` dot. Do not reserve a second Elementor icon column when the native icon control is intentionally empty. */ .hero-recognition .elementor-icon-list-icon:empty, .package-features .elementor-icon-list-icon:empty { display: none; } /* The reference's About portrait uses inline radius/shadow values. Those styles belong on Elementor's generated , not the outer image widget. */ .elementor .about-images { margin-left: auto !important; margin-right: auto !important; } .elementor .about-images .elementor-widget-image.about-portrait img { border-radius: 16px !important; box-shadow: 0 16px 48px rgba(31, 31, 31, 0.08) !important; } /* About / Method hero-media: keep the live 4:3 frame at every viewport. Elementor flex containers can stretch the Image widget; lock ratio on the and keep the widget from absorbing leftover flex height. */ .hero-media > .elementor-widget-image { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; flex: 0 0 auto !important; align-self: stretch !important; overflow: hidden !important; } .hero-media > .elementor-widget-image img, .hero-media img { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; object-position: center center !important; } /* Elementor's hosted-video widget inserts an aspect-ratio wrapper between the source `.video-bg` class and the actual

, so the page CSS that styles .presence-circle span never hits — kit gray (#5A5A5A) wins instead of the white label/ring. */ .presence-circle { border-color: rgba(255, 255, 255, 0.45) !important; color: rgba(255, 255, 255, 0.86) !important; } .presence-circle .elementor-widget-text-editor, .presence-circle .elementor-widget-text-editor > p, .presence-circle .elementor-widget-text-editor > .elementor-widget-container > p, .presence-circle > p, .presence-circle span { margin: 0 !important; font-size: 0.64rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.22em !important; color: rgba(255, 255, 255, 0.86) !important; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important; } .wellbeing-reveal.revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .wellbeing-reveal { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------- 7. shift */ .shift-benefit-card { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .benefit-number p { font-family: var(--c4h-serif); font-size: 1.5rem; color: var(--c4h-accent-on-dark); margin-bottom: 8px; } /* ---------------------------------------------------------- 8. video band */ .note-video { border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgba(31, 31, 31, 0.08); } /* ------------------------------------------------------ 9. confidentiality */ .confidential-point p { display: flex; align-items: flex-start; gap: 12px; color: rgba(255, 255, 255, 0.9); font-size: 1rem; max-width: 640px; } .confidential-point .icon { color: var(--c4h-accent-on-dark); font-weight: 700; } /* ------------------------------------------------------- 10. credibility */ .icon-circle { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--c4h-accent-rgb), 0.09); margin: 0 auto 20px; } .icon-circle svg, .credibility-icon { width: 34px; height: 34px; fill: none; stroke: var(--c4h-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .icon-circle .elementor-widget-image.credibility-icon img { width: 42px !important; height: 42px !important; display: block; } .credibility-item { text-align: center; } .credibility-item p { max-width: 34ch; margin-inline: auto; } /* -------------------------------------------------------- 11. testimonials */ .testimonial-quote-icon p { font-family: var(--c4h-serif); font-size: 3rem; line-height: 1; color: rgba(var(--c4h-accent-rgb), 0.28); margin-bottom: 8px; } .testimonial-author { display: flex; align-items: center; gap: 14px; margin-top: auto; } .testimonial-avatar p { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--c4h-accent-rgb), 0.14); color: var(--c4h-accent); font-weight: 600; margin: 0; } .testimonial-author-info h4 { font-size: 0.9375rem; margin: 0; } .testimonial-author-info p { font-size: 0.8125rem; color: #8a8a8a; margin: 0; } .featured-testimonial { border-color: rgba(var(--c4h-accent-rgb), 0.35); } /* Extra testimonials stay collapsed until the toggle is pressed. `.e-con` sets `display` on the container, so the selector has to match that specificity. */ .e-con.testimonial-card.is-extra { display: none; } .is-expanded .e-con.testimonial-card.is-extra { display: var(--display, flex); } /* ----------------------------------------------------------- 12. packages */ .package-card { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s; } .package-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(31, 31, 31, 0.08); } .package-card.featured { border-color: var(--c4h-accent); box-shadow: 0 16px 48px rgba(var(--c4h-accent-rgb), 0.12); } /* Elementor's widget wrappers inherit its 1.7 line-height from an 18px container. The source applies the same ratio after each element's own font size, so carry that typographic context through the native widgets. */ .elementor .package-badge, .elementor .package-badge p { line-height: 1.7; } .elementor .package-sessions, .elementor .package-sessions p, .elementor .package-list-label, .elementor .package-list-label p, .elementor .package-bestfor, .elementor .package-bestfor p { line-height: 1.7; } .elementor .package-card .elementor-button { width: 100%; padding: 16px 32px !important; font-size: 18px !important; line-height: 30.6px !important; } .package-price sup, .package-price span { font-size: 1.25rem; font-weight: 500; } .elementor .package-features .elementor-icon-list-item, .elementor .package-features .elementor-icon-list-text { font-size: 17px !important; line-height: 28.9px !important; } /* The card CTA always sits at the bottom edge of the card. */ .package-card > .e-con-inner > .elementor-widget-button, .package-card > .elementor-widget-button { margin-top: auto; } /* --------------------------------------------------------------- 13. FAQ */ .faq-list .elementor-accordion-item { border-left: 0; border-right: 0; border-top: 0; } .faq-list .elementor-tab-title { padding: 24px 42px 24px 0 !important; font-weight: 500 !important; line-height: normal !important; min-height: 72px; } /* The reference's FAQ button uses a 17px normal line box. Elementor's 18px title makes the two medium questions wrap at phone width and inflates the entire section, so style the editable title node directly. */ .faq-list .elementor-tab-title .elementor-accordion-title { font-size: 17px !important; font-weight: 500 !important; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; line-height: normal !important; } /* The source's normal-flow header excludes the last heading margin. Elementor puts those widgets in a flex container, so mirror that flow only here. */ #faq .section-header { padding-top: 5px; } #faq .section-header .section-label, #faq .section-header .section-label p { line-height: 1.7; } #faq .section-header .section-title { margin-bottom: 0 !important; } .faq-list .elementor-tab-content { padding: 0 0 22px; border: 0; } /* The typed line and its cursor are inline parts of one heading widget. */ .whirlwind-headline .before-written { display: block; color: rgba(255, 255, 255, 0.7); } .whirlwind-headline .written-lines { font-style: italic; opacity: 0.92; } .whirlwind-headline .typed-cursor { display: inline-block; margin-left: 2px; color: rgba(255, 255, 255, 0.85); font-weight: 300; } /* ---------------------------------------------------------- 14. whirlwind */ .whirlwind-headline { text-align: center; } .before-written { color: rgba(255, 255, 255, 0.7); } .typed-cursor { animation: c4h-blink 1s steps(2, start) infinite; color: var(--c4h-accent-on-dark); } @keyframes c4h-blink { to { visibility: hidden; } } /* The phrase list is copy, so it stays an editable widget — just not visible. */ .whirlwind-phrases { display: none; } /* The soft light bloom in the final CTA is a pseudo element. */ .final-cta::before { content: ''; position: absolute; top: -50%; left: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); pointer-events: none; } .final-cta { overflow: hidden; text-align: center; } /* Method-page quote bands are built from native Text Editor widgets. The source uses ordinary block flow: Elementor's default flex sizing otherwise collapses both the quote mark and the editable quotation into intrinsic widths, changing the typeface, wrapping, and section height. */ .quote-band > .container { display: block !important; } .quote-band .quote-band-icon, .quote-band .elementor-widget-text-editor:not(.quote-band-icon) { display: block !important; width: 100% !important; } .quote-band .quote-band-icon { margin: 0 auto 12px !important; text-align: center; } .quote-band .elementor-widget-text-editor:not(.quote-band-icon) > p, .quote-band .elementor-widget-text-editor:not(.quote-band-icon) > .elementor-widget-container > p { max-width: 860px; margin: 0 auto !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(1.75rem, 4vw, 3rem) !important; line-height: 1.25 !important; /* Kit primary is accent (#B85C4F); quote body copy is page black like live. */ color: var(--text-primary, #1f1f1f) !important; font-style: italic; text-align: center; } /* Keep the two editable Method CTA buttons in the source's full-row flow. Elementor otherwise lets the anchor shrink to its intrinsic width, which changes both wrapping and the resulting bridge height. */ .cta-bridge .elementor-widget-button, .cta-bridge .elementor-button { width: 100% !important; } .cta-bridge .elementor-button { display: flex !important; box-sizing: border-box; justify-content: center; } .cta-bridge .elementor-button-content-wrapper { min-width: 0; justify-content: center; } .cta-bridge .elementor-button-text { white-space: normal; } @media (max-width: 767px) { /* The second Method bridge has a one-line source button at this breakpoint. Elementor lets its text span wrap despite the matching 327px button width, adding exactly one artificial line and pushing every following section. */ body.page-id-42 .cta-bridge .elementor-widget-button:not(.btn-pulse) .elementor-button-text { white-space: nowrap !important; } /* These two Method paragraphs use the reference's system fallback at 390px. The local Inter file adds exactly one line to each, changing two whole section heights despite otherwise identical computed typography. */ body.page-id-42 .process-card:nth-child(3) .elementor-widget-text-editor:last-child > p, body.page-id-42 #contact .elementor-widget-text-editor > p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } } /* The reference resolves this long editable CTA paragraph against the system sans fallback. The local bundled face is slightly wider and adds one line. */ .cta-bridge .elementor-widget-text-editor > p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* Method diagnostic: preserve the native widgets but restore the source's inline label and row-based checkmark/text pairs. Elementor containers are columns by default, which turns each two-line point into a three-line one. */ .diagnostic-intro-row .section-label { margin-top: 5px !important; } .diagnostic-intro-row .section-label > p { margin: 0 !important; line-height: 23.8px !important; } .diagnostic-intro-row .section-subtitle > p { font-size: 17px !important; line-height: 28.9px !important; } .diagnostic-point { flex-direction: row !important; } .diagnostic-point > .elementor-widget-text-editor:not(.icon) { flex: 1 1 0 !important; min-width: 0; width: 0 !important; max-width: none !important; } .diagnostic-point > .elementor-widget-text-editor:not(.icon) > p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* The final CTA uses the same source full-row button flow as the bridge CTAs on small screens. Desktop intentionally keeps the two actions in a row. */ @media (max-width: 767px) { .final-cta .hero-actions { align-items: stretch !important; } .final-cta .hero-actions .elementor-widget-button, .final-cta .hero-actions .elementor-button { width: 100% !important; } .final-cta .hero-actions .elementor-button { display: flex !important; box-sizing: border-box; justify-content: center; } .final-cta .hero-actions .elementor-button-content-wrapper { min-width: 0; justify-content: center; } .final-cta .hero-actions .elementor-button-text { white-space: normal; } } /* The Method tools header is another native label/subtitle pair whose Elementor line boxes are larger than the reference's plain elements. */ section:has(.tools-grid) .section-header .section-label { margin-top: 5px !important; } section:has(.tools-grid) .section-header .section-label > p { margin: 0 !important; line-height: 23.8px !important; } section:has(.tools-grid) .section-header .section-subtitle > p { font-size: 17px !important; line-height: 28.9px !important; } /* Match the same plain label/subtitle line boxes in the layered-process intro; unlike Elementor's widgets, the reference also has a 5px label offset before the following heading. */ #process .section-header .section-label { margin-top: 5px !important; } #process .section-header .section-label > p { margin: 0 !important; line-height: 23.8px !important; } #process .section-header .section-subtitle > p { font-size: 17px !important; line-height: 28.9px !important; } /* ------------------------------------------------------------- 15. footer */ .c4h-footer a { transition: color 0.3s; } .c4h-footer a:hover { color: var(--c4h-accent-on-dark); } /* HFE renders the footer's configurable padding on its internal boxed wrapper. Match the reference container and keep all copy in the native widgets. */ .c4h-footer > .e-con-inner { padding: 64px 48px 32px !important; } .c4h-footer .footer-grid { margin-bottom: 48px !important; } @media (min-width: 768px) { /* The source uses a 1104px, 2:1:1 CSS grid. Elementor otherwise turns the three generated containers into unequal flex items. */ .c4h-footer .footer-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr !important; width: 100% !important; max-width: 1104px !important; margin-right: auto !important; margin-left: auto !important; } .c4h-footer .footer-grid > .e-con { width: 100% !important; max-width: none !important; min-width: 0 !important; align-self: stretch !important; } .c4h-footer-legal .footer-grid { max-width: 1104px !important; } } /* Page-specific live footers have no rights/bottom bar, so the Home footer's reserved grid margin must not remain in their Elementor templates. */ .c4h-footer-about .footer-grid { margin-bottom: 0 !important; min-height: 276.359px; } .c4h-footer-method .footer-grid { min-height: 276.359px; } .c4h-footer .footer-bottom { padding-top: 32px !important; } .c4h-footer .footer-brand .elementor-heading-title { color: #fff !important; font-family: "Cormorant Garamond", serif !important; font-size: 24px !important; font-weight: 600 !important; line-height: 1.7 !important; } .c4h-footer .footer-grid > .e-con:first-child > .elementor-widget-text-editor:not(.footer-contact-item) p, .c4h-footer .footer-contact-item, .c4h-footer .footer-contact-item a, .c4h-footer .footer-contact-item p, .c4h-footer .footer-links .elementor-icon-list-item a, .c4h-footer .footer-bottom p, .c4h-footer .footer-legal .elementor-icon-list-item a { color: #8a8a8a !important; font-size: 15px !important; line-height: 1.7 !important; } .c4h-footer .footer-heading .elementor-heading-title { color: #fff !important; font-family: "Cormorant Garamond", serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; line-height: 1.2 !important; margin: 0 !important; } .c4h-footer .footer-bottom p, .c4h-footer .footer-legal .elementor-icon-list-item a { font-size: 14px !important; } /* Icon List keeps its own text colour on a nested span, which otherwise wins over the source-faithful muted anchor colour above. */ .c4h-footer .footer-links .elementor-icon-list-text, .c4h-footer .footer-legal .elementor-icon-list-text { color: #8a8a8a !important; } .c4h-footer .footer-legal .elementor-icon-list-item + .elementor-icon-list-item { margin-left: 24px !important; } .c4h-footer .footer-links .elementor-icon-list-item + .elementor-icon-list-item { margin-top: 12px !important; } /* Elementor's Icon List defaults to a flex row. The reference footer uses ordinary list rows; retaining that box model prevents its invisible line box from adding height on narrow screens. */ .c4h-footer .footer-links .elementor-icon-list-items { display: block !important; } .c4h-footer .footer-links .elementor-icon-list-item { display: list-item !important; font-size: 17px !important; line-height: 1.7 !important; padding-bottom: 0 !important; } .c4h-footer .footer-links .elementor-icon-list-item a { display: inline !important; } /* The Spanish reference retains Elementor's 18px list row at narrow widths; the English reference uses 17px. Keep the language-specific line boxes so the localized footer remains the same height as its source. */ html[lang="es"] .c4h-footer .footer-links .elementor-icon-list-item { font-size: 18px !important; } .c4h-footer .footer-contact-item { margin-bottom: 12px !important; } @media (max-width: 767px) { .c4h-footer > .e-con-inner { padding-right: 24px !important; padding-left: 24px !important; } /* The source footer switches its introductory copy and contact rows to the 18px / 30.6px mobile rhythm. Elementor inherited the desktop 15px rule, which removed 51px from every compact footer. */ :is(.c4h-footer-about, .c4h-footer-method) .footer-grid > .e-con:first-child > .elementor-widget-text-editor:not(.footer-contact-item) p, :is(.c4h-footer-about, .c4h-footer-method) .footer-contact-item, :is(.c4h-footer-about, .c4h-footer-method) .footer-contact-item p { font-size: 18px !important; line-height: 1.7 !important; } :is(.c4h-footer-about, .c4h-footer-method) .footer-grid > .e-con:first-child > .elementor-widget-text-editor:not(.footer-contact-item) p { letter-spacing: -0.01em; } :is(.c4h-footer-about, .c4h-footer-method) .footer-links .elementor-icon-list-item, :is(.c4h-footer-about, .c4h-footer-method) .footer-links .elementor-icon-list-item a, .c4h-footer-home .footer-links .elementor-icon-list-item, .c4h-footer-home .footer-links .elementor-icon-list-item a { font-size: 18px !important; line-height: 1.7 !important; } :is(.c4h-footer-about, .c4h-footer-method) .footer-grid > .e-con:first-child > .elementor-widget-text-editor:not(.footer-contact-item) { margin-bottom: 12px !important; } :is(.c4h-footer-about, .c4h-footer-method) .footer-grid > .e-con:first-child > .footer-contact-item:last-child { margin-bottom: 0 !important; } } .footer-contact-item p { display: flex; align-items: center; gap: 10px; } .c4h-footer-icon { width: 1.25em; color: var(--c4h-accent-on-dark); } .footer-links .elementor-icon-list-item a:hover { color: var(--c4h-accent-on-dark); } /* Match the reference's own observer-driven entrance state. Elementor's animation classes are not used; c4h-interactions adds `.visible` with the same 0.1 threshold the source uses. */ .fade-up { transform: translateY(30px) !important; opacity: 0 !important; transition: opacity 0.6s ease-out, transform 0.6s ease-out !important; animation: none !important; } /* Elementor editor / preview iframe: keep widgets editable. Without this, `.fade-up { opacity: 0 !important }` hides every Text/Heading/Button until the frontend IntersectionObserver adds `.visible` — which often never runs (or runs too late) inside the builder canvas, so only backgrounds show. */ body.elementor-editor-active .fade-up, body.elementor-editor-preview .fade-up { transform: none !important; opacity: 1 !important; transition: none !important; } body.elementor-editor-active .wellbeing-reveal, body.elementor-editor-preview .wellbeing-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } body.elementor-editor-active .testimonial-readmore, body.elementor-editor-preview .testimonial-readmore { visibility: visible !important; pointer-events: auto !important; } /* * Elementor edit canvas wraps Text Editor content in `.elementor-text-editor` * for inline editing. Our page CSS only targets `> p` / `> .elementor-widget-container > p`, * so kit gray (#5A5A5A) wins on dark bands. Force light copy in the builder only. */ body.elementor-editor-active :is(.shift-section, .problem-section, .wellbeing-section, .final-cta, .hero, #tensions, #shift, #contact) :is( .elementor-text-editor, .elementor-text-editor p, .elementor-heading-title, .elementor-icon-list-text, .elementor-button-text ), body.elementor-editor-preview :is(.shift-section, .problem-section, .wellbeing-section, .final-cta, .hero, #tensions, #shift, #contact) :is( .elementor-text-editor, .elementor-text-editor p, .elementor-heading-title, .elementor-icon-list-text, .elementor-button-text ) { color: rgba(255, 255, 255, 0.88) !important; } body.elementor-editor-active :is(.shift-section, .problem-section, .wellbeing-section, #tensions, #shift) :is( .section-label, .section-label p, .elementor-text-editor.section-label, .elementor-text-editor.section-label p ), body.elementor-editor-preview :is(.shift-section, .problem-section, .wellbeing-section, #tensions, #shift) :is( .section-label, .section-label p, .elementor-text-editor.section-label, .elementor-text-editor.section-label p ) { color: rgba(255, 255, 255, 0.82) !important; } body.elementor-editor-active :is(.shift-benefit-card, .benefit-block) :is(.elementor-text-editor, .elementor-text-editor p, .elementor-heading-title), body.elementor-editor-preview :is(.shift-benefit-card, .benefit-block) :is(.elementor-text-editor, .elementor-text-editor p, .elementor-heading-title) { color: rgba(255, 255, 255, 0.9) !important; } body.elementor-editor-active :is(.shift-benefit-card, .benefit-block) .benefit-number :is(.elementor-text-editor, .elementor-text-editor p, p), body.elementor-editor-preview :is(.shift-benefit-card, .benefit-block) .benefit-number :is(.elementor-text-editor, .elementor-text-editor p, p) { color: var(--c4h-accent-on-dark, #e9a492) !important; } /* Keep primary CTAs readable on terracotta in the canvas. */ body.elementor-editor-active .final-cta .btn-primary :is(.elementor-button, .elementor-button-text), body.elementor-editor-preview .final-cta .btn-primary :is(.elementor-button, .elementor-button-text), body.elementor-editor-active .hero .btn-primary :is(.elementor-button, .elementor-button-text), body.elementor-editor-preview .hero .btn-primary :is(.elementor-button, .elementor-button-text) { color: var(--c4h-accent, #b85c4f) !important; } /* The reference lays out each testimonial author horizontally and reserves a compact read-more row in every card. Content stays in native Elementor widgets; this only neutralises the wrappers' default column flow. */ #testimonials .testimonial-author { flex-direction: row !important; flex-wrap: nowrap !important; padding-top: 20px !important; border-top: 1px solid var(--c4h-border) !important; } #testimonials .testimonial-author-info { flex-direction: column !important; width: auto !important; flex: 0 1 auto !important; } #testimonials .testimonial-author-info p { margin: 0 !important; line-height: 23.8px !important; } #testimonials .testimonial-readmore { display: inline-flex !important; align-items: center !important; gap: 7px !important; align-self: flex-start !important; visibility: hidden; pointer-events: none; margin: -4px 0 24px !important; padding: 0 !important; border: 0 !important; background: transparent !important; font: inherit !important; font-size: 0.8125rem !important; font-style: normal !important; font-weight: 700 !important; line-height: 22.1px !important; letter-spacing: 0.04em !important; text-transform: uppercase; color: var(--c4h-accent) !important; cursor: pointer; user-select: none; } #testimonials .testimonial-readmore.is-visible { visibility: visible; pointer-events: auto; } #testimonials .testimonial-readmore::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } #testimonials .testimonial-readmore.is-open::after { transform: translateY(1px) rotate(-135deg); } #testimonials .testimonials-more .elementor-button { line-height: 19px !important; /* Large-text threshold (14pt bold) so brand accent #b85c4f passes WCAG AA on #f5f0eb without changing the accent colour for visual parity. */ font-size: 1.1667rem !important; font-weight: 700 !important; } #testimonials .testimonials-more .elementor-button-text { font-size: inherit !important; font-weight: inherit !important; } @media (min-width: 1025px) { /* Tensions: the source's 860px subtext beats the generic 65ch paragraph measure. Preserve it at the native Elementor text widget as well. */ #tensions .wellbeing-header, #tensions .wellbeing-subtext, #tensions .wellbeing-subtext > p { max-width: 860px !important; } } /* Thunderstorm / wellbeing typography lives in Elementor widget settings * (typography_font_size on headings / text-editors under #tensions). * Do not re-add !important font-size overrides here — freelancers edit sizes * in Elementor → Style → Typography. */ /* Field confidence list: preserve the native Elementor Icon List, including the source's check icon, but restore the original compact list rhythm. */ body.page-id-45 #approach .independence-banner .elementor-heading-title { margin-bottom: 0 !important; } body.page-id-45 #approach .independence-list { margin-top: 20px !important; } body.page-id-45 #approach .independence-list .elementor-icon-list-items { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 0 !important; } body.page-id-45 #approach .independence-list .elementor-icon-list-text { font-size: 16px !important; line-height: 27.2px !important; } body.page-id-45 #approach .independence-list .elementor-icon-list-icon { color: rgb(184, 92, 79) !important; flex: 0 0 12.25px !important; width: 12.25px !important; margin-top: 4px !important; padding-right: 12px !important; } body.page-id-45 #approach .independence-list .elementor-icon-list-icon svg { width: 12.25px !important; height: 14px !important; } /* The local bundled Inter face is fractionally wider in these two long Home session cards. The live source resolves them against the system sans face. */ body.page-id-41 #sessions .session-item h4, body.page-id-41 #sessions .session-item p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* Spanish Home has the same source row cards as English Home. Its Elementor icon widget otherwise takes a full first row and inflates both cards. */ body.page-id-49 #sessions .session-item { flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; } body.page-id-49 #sessions .session-item > .elementor-widget-icon { width: 0 !important; height: 18px !important; flex: 0 0 0 !important; min-width: 0 !important; overflow: visible !important; } body.page-id-49 #sessions .session-item > .elementor-widget-icon::before { content: none !important; } body.page-id-49 #sessions .session-item > .elementor-widget-icon .elementor-icon { display: none !important; } body.page-id-49 #sessions .session-item > .e-con { width: auto !important; min-width: 0 !important; flex: 1 1 0 !important; } body.page-id-49 #sessions .session-item h4, body.page-id-49 #sessions .session-item p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* Elementor keeps the ten-pixel flex gap even when an editable Spanish package row has no icon node. The reference has ordinary full-width list rows, so use the same box model while retaining Elementor's native widget. */ body.page-id-49 #packages .package-features .elementor-icon-list-item { display: block !important; } body.page-id-49 #packages .package-features .elementor-icon-list-text { display: block !important; width: 100% !important; } @media (min-width: 768px) { /* Spanish Home desktop uses the live system-sans metrics in these long native text widgets. They otherwise add complete lines to successive sections despite identical computed sizes. */ body.page-id-49 #where p, body.page-id-49 #confidential p, body.page-id-49 #about p, body.page-id-49 #shift .shift-cta p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } body.page-id-49 #shift .shift-benefit-card .benefit-number > p { line-height: 20.4px !important; } body.page-id-49 #sessions .section-header > .section-title { margin-bottom: 0 !important; } /* The Spanish secondary pages use the same live system-sans resolution for their long desktop passages. */ body.page-id-50 #process p, body.page-id-51 #story p, body.page-id-51 .why-section p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } } @media (min-width: 768px) { /* About: use the real portrait file ratio (not the stale 2400×2047 HTML attrs). */ #about .section-header > .section-label { margin-top: 5px !important; } #about .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } #about .section-header > .section-title { margin-bottom: 0 !important; } #about .about-images .about-portrait img { aspect-ratio: 1068 / 1600 !important; height: auto !important; width: 100% !important; object-fit: cover !important; object-position: center top !important; } #about .credibility-item > .elementor-widget-text-editor > p { font-size: 16px !important; line-height: 27.2px !important; } /* Sessions: preserve the reference's collapsed header/grid margins and compact text line boxes inside the existing Elementor card widgets. */ #sessions .section-header > .section-label { margin-top: 5px !important; } #sessions .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } #sessions .section-header > .section-title, #sessions .sessions-grid { margin-top: 0 !important; } body.page-id-41 #sessions .section-header > .section-title { margin-bottom: 0 !important; } #sessions .session-item .elementor-widget-text-editor > p { line-height: 25.5px !important; } #sessions .text-center.mt-8 { margin-top: 48px !important; } /* Match the live system-sans metrics in the three long package widgets that otherwise gain an extra desktop line under the bundled Inter face. */ body.page-id-41 #packages .package-grid-duo .package-card:first-child .package-desc > p, body.page-id-41 #packages .package-grid-duo .package-card:first-child .package-bestfor > p, body.page-id-41 #packages .package-grid:not(.package-grid-duo) .package-card:first-child .package-desc > p, body.page-id-41 #packages .package-grid:not(.package-grid-duo) .package-card:nth-child(2) .package-bestfor > p, body.page-id-41 #packages .package-grid:not(.package-grid-duo) .package-card:nth-child(3) .package-desc > p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* Field approach: source blocks collapse their final text margins, while Elementor flex wrappers retain them. Keep the existing Heading, Text Editor and Icon List widgets, but reproduce the source's measured flow. */ body.page-id-45 #approach .section-header > .section-label { margin-top: 4px !important; } body.page-id-45 #approach .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } body.page-id-45 #approach .section-header > .section-title { margin-bottom: 0 !important; } body.page-id-45 #approach .approach-text .elementor-widget-text-editor > p { margin: 0 !important; line-height: 28.9px !important; } body.page-id-45 #approach .approach-text > .elementor-widget-text-editor:not(:last-child) { margin-bottom: 20px !important; } body.page-id-45 #approach .independence-banner .elementor-heading-title { margin-bottom: 0 !important; } body.page-id-45 #approach .independence-list { margin-top: 20px !important; } body.page-id-45 #approach .independence-list .elementor-icon-list-items { display: flex !important; flex-direction: column !important; gap: 14px !important; } body.page-id-45 #approach .independence-list .elementor-icon-list-text { font-size: 16px !important; line-height: 27.2px !important; } body.page-id-45 #sessions .section-header > .section-label { margin-top: 4px !important; } body.page-id-45 #sessions .section-header > .section-subtitle > p { line-height: 28.9px !important; } body.page-id-45 #packages .section-header > .section-label { margin-top: 4px !important; } body.page-id-45 #packages .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } body.page-id-45 #packages .section-header > .section-subtitle > p { line-height: 28.9px !important; } body.page-id-45 #faq .section-header { padding-top: 4px !important; } /* Confidentiality: normal-flow source nodes have smaller line boxes than the corresponding Text Editor wrappers. */ .confidential-inner > .section-label { margin-top: 5px !important; } .confidential-inner > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } .confidential-inner > .elementor-widget-text-editor:not(.section-label):not(.section-subtitle) > p { margin: 0 !important; font-size: 17px !important; line-height: 28.9px !important; } .confidential-points .confidential-point, .confidential-points .confidential-point > p { line-height: 28.9px !important; } } @media (max-width: 767px) { /* Field approach mirrors ordinary source blocks: collapsed heading margin and 20px paragraph separations inside native Elementor wrappers. */ body.page-id-45 #approach .section-header > .section-label { margin-top: 4px !important; } body.page-id-45 #approach .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } body.page-id-45 #approach .section-header > .section-title { margin-bottom: 0 !important; } body.page-id-45 #approach .approach-text > .elementor-widget-text-editor:not(:last-child) { margin-bottom: 20px !important; } /* Home session cards keep the same source row on mobile. The icon slot is structural only; prevent Elementor from painting two inherited glyphs. */ body.page-id-41 #sessions .session-item { flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; } body.page-id-41 #sessions .session-item > .elementor-widget-icon { width: 0 !important; height: 18px !important; flex: 0 0 0 !important; align-self: flex-start !important; margin-top: 2px !important; overflow: visible !important; } body.page-id-41 #sessions .session-item > .elementor-widget-icon::before { content: none !important; } body.page-id-41 #sessions .session-item > .elementor-widget-icon .elementor-icon { display: none !important; } body.page-id-41 #sessions .session-item > .e-con { width: auto !important; min-width: 0 !important; flex: 1 1 0 !important; margin-top: 0 !important; transform: translateY(1px); } /* Field approach body copy is normal-flow 17/28.9px in the reference. Elementor inherited its 18/30.6px container rhythm, adding one line-box reserve to each of the three native Text Editor widgets. */ body.page-id-45 .approach-text .elementor-widget-text-editor > p { line-height: 28.9px !important; } /* Field session cards keep the source's editable Font Awesome icon beside the copy. Elementor otherwise gives the new Icon widget a full row, erasing the source's narrow text column and all its intended wrapping. */ body.page-id-45 #sessions .session-item { flex-direction: row !important; align-items: flex-start !important; } body.page-id-45 #sessions .session-item > .elementor-widget-icon { width: 18px !important; height: auto !important; flex: 0 0 auto !important; margin-top: 2px; } body.page-id-45 #sessions .session-item > .elementor-widget-icon.fa-comments, body.page-id-45 #sessions .session-item > .elementor-widget-icon.fa-laptop, body.page-id-45 #sessions .session-item > .elementor-widget-icon.fa-language { width: 22.5px !important; } body.page-id-45 #sessions .session-item > .e-con { width: auto !important; min-width: 0 !important; flex: 1 1 0 !important; } /* Spanish Home: use the live page's ordinary flow and system-sans metrics inside the same native Elementor widgets. The bundled Inter face is slightly wider in these Spanish strings, which otherwise adds whole lines and throws every following section out of position. */ body.page-id-49 #where .section-header { margin-bottom: 77.59375px !important; } body.page-id-49 #where .section-header > .section-label { margin-top: 5px !important; } body.page-id-49 #where .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } body.page-id-49 #where .section-subtitle > p, body.page-id-49 #shift .shift-content > .shift-lead:nth-child(3) > p, body.page-id-49 #about .credibility-item:nth-child(2) .elementor-widget-text-editor > p, body.page-id-49 #about .credibility-item:nth-child(3) .elementor-widget-text-editor > p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } body.page-id-49 #shift .shift-benefit-card .benefit-number > p { line-height: 20.4px !important; } body.page-id-49 #sessions .section-header > .section-title { margin-bottom: 0 !important; } /* Spanish Method: the reference resolves the two long copy regions against the system sans face. Keep the editable Text Editor widgets, but prevent local Inter metrics from creating extra lines. */ body.page-id-50 .diagnostic-intro-row .section-label { margin-top: 0 !important; } body.page-id-50 .diagnostic-intro-row .section-subtitle > p, body.page-id-50 .tools-grid p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* Legal footers keep the source's 18px link rows on English mobile too. The other compact footer variants intentionally use their own measures. */ html[lang="en"] .c4h-footer-legal .footer-links .elementor-icon-list-item, html[lang="en"] .c4h-footer-legal .footer-links .elementor-icon-list-item a { font-size: 18px !important; line-height: 1.7 !important; } /* Packages: these remain native Text/Heading widgets. The reference uses inline/plain elements whose smaller line boxes collapse naturally; make Elementor's wrapper reproduce those boxes before card geometry is laid out. */ body.page-id-41 #packages .section-header > .section-label { margin-top: 5px !important; } body.page-id-41 #packages .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } body.page-id-41 #packages .section-header > .section-subtitle > p { line-height: 34px !important; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } body.page-id-41 #packages .services-tier-title:not(.tier-pathways) { margin-top: 0 !important; } /* The live page resolves its Inter stack to the system sans face. Keep the affected long editable Text widgets on that same fallback; the bundled face is just wide enough to add a line in each of these locations. */ body.page-id-41 #packages .package-grid-duo .package-card:first-child .package-desc > p, body.page-id-41 #packages .package-grid:not(.package-grid-duo) .package-card:nth-child(2) .package-bestfor > p, body.page-id-41 #packages .package-grid:not(.package-grid-duo) .package-card:nth-child(3) .package-desc > p, body.page-id-41 #packages .packages-footnote > p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* On mobile the reference resolves the full package-copy stack to the system sans face. Applying it consistently prevents isolated extra lines in the second session card and the three pathway cards. */ body.page-id-41 #packages .package-desc > p, body.page-id-41 #packages .package-bestfor > p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* The fourth source title remains a single 72px row. Elementor's cached accordion rule had fixed it at 89px after an earlier two-line variant. */ body.page-id-41 #faq .elementor-accordion-item:nth-child(4) .elementor-tab-title { height: auto !important; min-height: 72px !important; padding: 24px 0 !important; } body.page-id-41 #faq .elementor-accordion-item:nth-child(4) .elementor-accordion-title { font-size: 18px !important; } body.page-id-41 #faq .elementor-accordion-item:nth-child(2) .elementor-tab-title, body.page-id-41 #faq .elementor-accordion-item:nth-child(3) .elementor-tab-title { height: 91px !important; min-height: 91px !important; } /* The reference places the final CTA's same 30px reserve above its fade wrapper rather than below it. Its copy resolves to the system sans face, preventing the extra local line before the buttons. */ body.page-id-41 #contact { margin-top: 0; padding-bottom: 42px !important; } body.page-id-41 #contact .fade-up { margin-top: 30px; } body.page-id-41 #contact .elementor-widget-text-editor > p { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } #testimonials .section-header > .section-label { margin-top: 5px !important; } #testimonials .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } /* Sessions: retain the reference's normal-flow margins while keeping each content item as its native Elementor widget/container. */ #sessions .section-header > .section-label { margin-top: 5px !important; } #sessions .section-header > .section-label > p { margin: 0 !important; line-height: 23.8px !important; } body.page-id-41 #sessions .section-header > .section-title { margin-bottom: 0 !important; } #sessions .session-item p { line-height: 25.5px !important; } #sessions .sessions-grid { /* The source's adjacent 64px/48px margins collapse; Elementor's flex container otherwise adds them together. */ margin-top: 0 !important; } #sessions .text-center.mt-8 { margin-top: 48px !important; } }