.elementor-2165 .elementor-element.elementor-element-e8a0838{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2165 .elementor-element.elementor-element-e8a0838:not(.elementor-motion-effects-element-type-background), .elementor-2165 .elementor-element.elementor-element-e8a0838 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-2165 .elementor-element.elementor-element-597cf717{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2165 .elementor-element.elementor-element-57130e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2165 .elementor-element.elementor-element-14a5f9e9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2165 .elementor-element.elementor-element-14a5f9e9 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:var(--dd-fs-h3);font-weight:700;letter-spacing:-0.01em;color:var( --e-global-color-secondary );}.elementor-2165 .elementor-element.elementor-element-32f3c646{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2165 .elementor-element.elementor-element-71e24070{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2165 .elementor-element.elementor-element-71e24070 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:var(--dd-fs-cta);font-weight:700;color:var( --e-global-color-accent );}.elementor-2165 .elementor-element.elementor-element-fa6353c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2165 .elementor-element.elementor-element-fa6353c .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:var(--dd-fs-cta);font-weight:700;color:var( --e-global-color-accent );}.elementor-2165 .elementor-element.elementor-element-2b768b0d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2165 .elementor-element.elementor-element-2b768b0d .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:var(--dd-fs-cta);font-weight:700;color:var( --e-global-color-accent );}.elementor-2165 .elementor-element.elementor-element-e510bcd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2165 .elementor-element.elementor-element-e510bcd .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:var(--dd-fs-cta);font-weight:700;color:var( --e-global-color-accent );}.elementor-2165 .elementor-element.elementor-element-efb2e9a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2165 .elementor-element.elementor-element-efb2e9a .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:var(--dd-fs-cta);font-weight:700;color:var( --e-global-color-accent );}.elementor-2165 .elementor-element.elementor-element-99aef08{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2165 .elementor-element.elementor-element-99aef08 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:var(--dd-fs-cta);font-weight:700;color:var( --e-global-color-accent );}@media(min-width:768px){.elementor-2165 .elementor-element.elementor-element-597cf717{--content-width:1280px;}}/* Start custom CSS *//* ── the export's ramp, verbatim ────────────────────────────────────────── Every step below is a copy of a declaration in the export's own :root block and its media queries. The controls read these through unit:'custom', so the page steps where the export steps rather than at the kit's two breakpoints. */ { --dd-fs-display: 96px; --dd-fs-h2: 40px; --dd-fs-h3: 28px; --dd-fs-lg: 20px; --dd-fs-body: 17px; --dd-fs-cta: 16px; --dd-fs-label: 13px; --dd-fs-metric-sm: 64px; --dd-fs-bgword: 88px; --dd-card-pad: 32px; --dd-card-pad-lg: 48px; --dd-cta-py: 16px; --dd-cta-px: 32px; --dd-arrow: 56px; --dd-stack: 32px; --dd-stack-lg: 48px; --dd-sec-pad: 128px; --dd-gutter: 80px; --dd-grid-gap: 24px; --dd-mark-cap: 30px; --dd-study-cap: 28px; --dd-hero-top: 200px; } @media (max-width: 1200px) { { --dd-fs-bgword: 64px; --dd-fs-display: 72px; } } @media (max-width: 992px) { { --dd-fs-bgword: 44px; --dd-fs-lg: 18px; --dd-fs-body: 16px; --dd-fs-cta: 15px; --dd-fs-label: 12px; --dd-fs-metric-sm: 40px; --dd-card-pad: 24px; --dd-card-pad-lg: 32px; --dd-stack: 24px; --dd-stack-lg: 32px; --dd-cta-py: 14px; --dd-cta-px: 26px; --dd-arrow: 48px; --dd-sec-pad: 96px; --dd-gutter: 48px; --dd-mark-cap: 26px; --dd-study-cap: 26px; --dd-hero-top: 148px; } } @media (max-width: 768px) { { --dd-fs-bgword: 28px; --dd-fs-lg: 15px; --dd-fs-body: 14px; --dd-fs-cta: 14px; --dd-fs-label: 11px; --dd-fs-metric-sm: 26px; --dd-card-pad: 18px; --dd-card-pad-lg: 20px; --dd-stack: 16px; --dd-stack-lg: 20px; --dd-cta-py: 13px; --dd-cta-px: 20px; --dd-arrow: 40px; --dd-sec-pad: 64px; --dd-gutter: 24px; --dd-grid-gap: 16px; --dd-fs-display: 48px; --dd-fs-h2: 32px; --dd-fs-h3: 24px; --dd-study-cap: 16px; --dd-hero-top: 124px; } } @media (max-width: 560px) { { --dd-mark-cap: 22px; } } @media (max-width: 480px) { { --dd-fs-bgword: 24px; --dd-fs-metric-sm: 24px; --dd-fs-display: 40px; } } /* ── layout primitives ───────────────────────────────────────────────────── */ /* Shrink-to-content boxes (the eyebrow pill, the CTA pair). Elementor's width control is per-breakpoint, so a desktop-only fit-content stretches to full width at any step left unset. */ .dd-shrink { width: fit-content; max-width: 100%; align-self: flex-start; flex: 0 0 auto; } /* Every

in the export carries margin:0; the widget's own margin control is what positions it. */ .elementor-widget-text-editor p { margin: 0; } /* The export sets a measure on most headings and paragraphs — max-width in ch, which no Elementor control expresses. Elementor caps every widget in a container at 100% through a four-class , so the value is carried on a custom property (cheap to declare) and applied by a that outranks it. Boxed containers wrap their children in .e-con-inner, so both parents are named. */ .e-con > .elementor-widget[class*="dd-mw-"], .e-con-inner > .elementor-widget[class*="dd-mw-"] { max-width: var(--dd-mw); } /* A ch is measured in the element's own font, and Elementor puts a heading's font size on the inner .elementor-heading-title, not on the widget box the measure has to constrain. Each utility therefore restates the size it belongs to, so 18ch is 18 characters of the display face and not of the 16px default. Every utility here pairs with exactly one size on this page. */ .dd-mw-14 { --dd-mw: 14ch; font-size: var(--dd-fs-h3); } .dd-mw-18 { --dd-mw: 18ch; font-size: var(--dd-fs-display); } .dd-mw-24 { --dd-mw: 24ch; font-size: var(--dd-fs-h3); } .dd-mw-26 { --dd-mw: 26ch; font-size: var(--dd-fs-h2); } .dd-mw-28 { --dd-mw: 28ch; font-size: var(--dd-fs-h2); } .dd-mw-44 { --dd-mw: 44ch; font-size: var(--dd-fs-body); } .dd-mw-56 { --dd-mw: 56ch; font-size: var(--dd-fs-body); } .dd-mw-60 { --dd-mw: 60ch; font-size: var(--dd-fs-body); } .dd-mw-62 { --dd-mw: 62ch; font-size: var(--dd-fs-lg); } .dd-mw-68 { --dd-mw: 68ch; font-size: var(--dd-fs-lg); } /* The 12-column grids (hero, contact). Below the export's 992px step every child spans the full row — the export's [data-span] rule. */ .dd-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--dd-grid-gap); align-items: center; } .dd-align-start { align-items: start; } .dd-span-7 { grid-column: span 7; min-width: 0; } .dd-col9-4 { grid-column: 9 / span 4; min-width: 0; } .dd-span-6 { grid-column: span 6; min-width: 0; } .dd-col8-5 { grid-column: 8 / span 5; min-width: 0; } /* Card grids. Each step below is one of the export's media queries. */ .dd-grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dd-grid-gap); } .dd-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dd-grid-gap); } .dd-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dd-grid-gap); } /* Seven benefit cards. Four columns only above 1340px — the first width where a card clears the room its title-plus-numeral row needs. Below that the base is two columns with the last card spanning the row, so the seventh is never left alone. */ .dd-benefit7 > *:last-child { grid-column: 1 / -1; } @media (min-width: 1340px) { .dd-grid4.dd-benefit7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dd-grid4.dd-benefit7 > *:last-child { grid-column: auto; } } @media (max-width: 992px) { .dd-grid3 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .dd-grid2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .dd-grid4 { grid-template-columns: minmax(0, 1fr); } } /* The two logo strips: a label that shrinks and a mark row that takes the rest. */ .dd-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dd-stack) var(--dd-stack-lg); } .dd-strip-label { flex: 0 0 auto; } .dd-strip-marks { flex: 1 1 520px; min-width: 0; } .dd-markrow { display: grid; align-items: center; } .dd-markrow > * { display: grid; place-items: center; min-width: 0; } .dd-markrow6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 24px; } .dd-markrow5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 24px; align-self: center; } .dd-clientrow { gap: var(--dd-stack) var(--dd-stack-lg); } @media (max-width: 992px) { .dd-markrow6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .dd-markrow5 { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } } @media (max-width: 620px) { .dd-markrow6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Marks come up from grey to full on hover, so the row reads as inspectable. */ .dd-mark-img img, .dd-client-img img { inline-size: 100%; block-size: var(--dd-mark-cap); object-fit: contain; opacity: .72; transition: opacity 200ms cubic-bezier(.2,.8,.2,1), transform 120ms cubic-bezier(.2,.8,.2,1); } /* Client artwork arrives in colour; the row is monochrome, so it is knocked to solid black the way the export does. */ .dd-client-img img { block-size: var(--dd-study-cap); filter: brightness(0) saturate(100%); } .dd-mark-img img:hover, .dd-client-img img:hover { opacity: 1; transform: scale(1.04); } /* ── cards ───────────────────────────────────────────────────────────────── */ /* Hover: cards lift 2px and take a green edge. The transparent resting border is declared here too, so the lift does not change the card's box. */ .dd-lift { border: 1px solid transparent; transition: transform 120ms cubic-bezier(.2,.8,.2,1), border-color 200ms cubic-bezier(.2,.8,.2,1), background 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms cubic-bezier(.2,.8,.2,1); } .dd-lift:hover { transform: translate3d(0, -2px, 0); border-color: #16CD7B; } .dd-lift-dark:hover { background: #122D1F; } .dd-lift-light:hover { box-shadow: 0 12px 32px rgba(4,27,16,.12); } @media (prefers-reduced-motion: reduce) { .dd-lift { transition: none; } } /* The benefit card sets its title against its numeral on a shared baseline — a value Elementor's align-items control does not offer. */ .dd-benefit-card { align-items: baseline; gap: var(--dd-stack); } .dd-benefit-num { flex: 0 0 auto; } /* ── hero ────────────────────────────────────────────────────────────────── */ /* Two layers over the ground: the slash tile (Elementor's own overlay, so it is editable) and a 90deg scrim over it, so the headline sits on clean colour and the pattern only reads past the copy. */ .dd-hero { position: relative; overflow: hidden; } .dd-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #041B10 0%, rgba(4,27,16,.92) 52%, rgba(4,27,16,.66) 100%); } .dd-hero > .e-con { position: relative; z-index: 2; } /* Ambient, not scroll-driven: the tile loops on its own clock, so nothing here is parallax. 96s for a 900px tile is perceptible only if you look for it. */ @keyframes dd-drift { from { background-position: 0 0; } to { background-position: -900px -900px; } } .dd-hero::before { animation: dd-drift 96s linear infinite; } @media (prefers-reduced-motion: reduce) { .dd-hero::before { animation: none; } } /* A decoration must not lead the hero, so the word sits at .14 behind the copy. */ .dd-bgword { opacity: .14; } /* ── the split CTA ───────────────────────────────────────────────────────── */ /* Both halves take the label's height rather than each deriving its own from padding and font metrics — which is how the arrow box ends up shorter than the pill butted against it. */ .dd-cta > .elementor-widget { align-self: stretch; } .dd-cta .elementor-button { height: 100%; display: flex; align-items: center; justify-content: center; } .dd-cta-arrow .elementor-button { width: var(--dd-arrow); padding: 0; display: grid; place-items: center; } .dd-cta-arrow .elementor-button-content-wrapper { justify-content: center; } .dd-cta-arrow .elementor-button-icon { margin: 0; } .dd-cta-arrow .elementor-button-text { display: none; } /* Font Awesome 5 has no diagonal arrow, so the up arrow is rotated 45deg to give the brand's up-right mark. Elementor renders the glyph as when inline icons are on and as otherwise, so both are addressed. */ .dd-cta-arrow .elementor-button-icon i, .dd-cta-arrow .elementor-button-icon svg, .dd-form .elementor-button-icon i, .dd-form .elementor-button-icon svg { transform: rotate(45deg); font-size: 18px; width: 18px; height: 18px; fill: currentColor; } .dd-ghost .elementor-button { min-block-size: 44px; display: inline-flex; align-items: center; } /* ── the two green strips ────────────────────────────────────────────────── */ .dd-ctastrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dd-stack) var(--dd-stack-lg); } .dd-flex-440 { flex: 1 1 440px; min-width: 0; } .dd-flex-280 { flex: 1 1 280px; min-width: 0; } .dd-ctastrip .dd-cta { flex: 0 0 auto; } /* ── contact ─────────────────────────────────────────────────────────────── */ /* The step node: a fixed 8px square that must not participate in flex sizing, dropped to the first line's x-height rather than its top. */ .dd-node { flex: 0 0 8px; width: 8px; min-width: 8px; max-width: 8px; height: 8px; min-height: 8px; align-self: flex-start; margin-block-start: 10px; } .dd-step-text { flex: 1 1 auto; min-width: 0; } /* Fields are a single green rule, not boxes: the widget's radius and border controls are set, the inline padding and the 48px control height are not expressible there. */ .dd-form .elementor-field-textual { padding-inline: 2px; min-block-size: 48px; } .dd-form textarea.elementor-field-textual { padding-block: 12px; min-block-size: 0; resize: vertical; } .dd-form select.elementor-field-textual { appearance: none; } .dd-form .elementor-field-textual:focus { outline: none; box-shadow: none; } /* The reCAPTCHA note is a plain HTML field, which has no style controls. */ .dd-form .elementor-field-group.elementor-field-type-html { padding: 12px 16px; background: #F5F5F5; border-radius: 8px; font-size: var(--dd-fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #181818; } /* Submit, as the split CTA: the