/* ==========================================================================
   00 TOKENS
   Colors are NOT defined here. They come from Elementor > Site Settings >
   Global Colors and are aliased below. Change a color in Elementor and it
   updates everywhere. Only fonts, spacing, radius and gradients live here.
   ========================================================================== */

/* Self-hosted variable font. Named "DZ Inter" so Elementor does not
   try to load the Google Fonts version. */
@font-face {
	font-family: "DZ Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
	color-scheme: dark;

	/* Font */
	--dz-font: "DZ Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Spacing scale (fluid: scales between mobile and desktop) */
	--dz-space-xs:  clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
	--dz-space-sm:  clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
	--dz-space-md:  clamp(1rem, 0.8rem + 1vw, 1.5rem);
	--dz-space-lg:  clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
	--dz-space-xl:  clamp(2rem, 1.4rem + 3vw, 4rem);
	--dz-space-2xl: clamp(3rem, 2rem + 5vw, 6rem);
	--dz-space-3xl: clamp(4rem, 2.5rem + 7.5vw, 9rem);

	/* Section vertical padding and side gutter (16px minimum on phones) */
	--dz-section-y: var(--dz-space-3xl);
	--dz-gutter:    clamp(1rem, 0.5rem + 2.5vw, 2rem);

	/* Shadow (dark UI: a deep, soft drop shadow) */
	--dz-shadow-md: 0 10px 30px rgb(0 0 0 / 0.45);

	/* VERTICAL RHYTHM: one system for the whole page (used by sections/99-rhythm.css) */
	--section-space-xl: clamp(150px, 12vw, 210px);   /* major chapters: the gap between one chapter and the next */
	--section-space-lg: clamp(120px, 9vw, 170px);    /* space before the footer */
	--section-space-md: clamp(88px, 7vw, 130px);     /* hero to statistics */
	--section-space-sm: clamp(64px, 5vw, 88px);      /* inside the statistics, top of the footer */
	--section-heading-gap: clamp(38px, 4vw, 64px);   /* heading block to the component under it */
	--content-gap: clamp(24px, 2.5vw, 40px);         /* base gap between a component and its button or link */

	/* Height of the sticky bar once the page is scrolled (anchor links land below it) */
	--dz-header-h: 100px;

	/* Radius */
	--dz-radius-sm:   8px;
	--dz-radius-md:   16px;
	--dz-radius-lg:   24px;
	--dz-radius-pill: 999px;
}

/* The same system, scaled for tablets and phones */
@media (max-width: 1199px) {
	:root {
		--section-space-xl: clamp(110px, 11vw, 150px);
		--section-space-lg: clamp(96px, 9vw, 130px);
		--section-space-md: clamp(80px, 7vw, 104px);
		--section-space-sm: clamp(56px, 5.5vw, 72px);
		--section-heading-gap: clamp(40px, 5vw, 56px);
		--content-gap: clamp(28px, 3vw, 36px);
		--dz-header-h: 92px;
	}
}
@media (max-width: 767px) {
	:root {
		--section-space-xl: clamp(88px, 26vw, 112px);
		--section-space-lg: clamp(80px, 22vw, 104px);
		--section-space-md: clamp(80px, 20vw, 96px);
		--section-space-sm: clamp(56px, 14vw, 64px);
		--section-heading-gap: 44px;
		--content-gap: 32px;
		--dz-header-h: 84px;
	}
}

/* Elementor defines its Global Color variables on the body (.elementor-kit-N),
   so the aliases must live on body too, not :root. */
body {
	/* Aliases of Elementor Global Colors */
	--dz-bg:         var(--e-global-color-dzbg);
	--dz-surface:    var(--e-global-color-dzsurface);
	--dz-border:     var(--e-global-color-dzborder);
	--dz-text:       var(--e-global-color-text);
	--dz-text-muted: var(--e-global-color-dzmuted);
	--dz-accent:     var(--e-global-color-dzaccent);
	--dz-accent-2:   var(--e-global-color-dzaccent2);
	--dz-highlight:  var(--e-global-color-dzhighlight);
	--dz-blue:       var(--e-global-color-dzblue);
	--dz-magenta:    var(--e-global-color-dzmagenta);
	--dz-error:      var(--e-global-color-dzerror);

	/* Content width: follows Elementor > Site Settings > Layout > Content Width */
	--dz-container-w: var(--container-max-width, 1200px);

	/* Gradient built from the accents */
	--dz-gradient-accent: linear-gradient(135deg, var(--dz-accent), var(--dz-accent-2));
	--dz-gradient-brand:  linear-gradient(135deg, var(--dz-blue), var(--dz-accent) 50%, var(--dz-magenta));
}
/* ==========================================================================
   10 BASE
   Small, reusable helpers. Add these class names in Elementor under
   Advanced > CSS Classes. Section-specific styles live in sections/.
   ========================================================================== */

/* Anchor links scroll smoothly. Where they land (below the sticky header) is set per section with
   scroll-margin-top in sections/99-rhythm.css. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Section container. The vertical spacing between sections lives in sections/99-rhythm.css. */
.dz-section {
	padding-block: var(--dz-section-y);
	padding-inline: var(--dz-gutter);
}

/* Card: dark surface with a thin border */
.dz-card {
	background: var(--dz-surface);
	border: 1px solid var(--dz-border);
	border-radius: var(--dz-radius-lg);
}

/* Small uppercase label above a heading: put the class on the Heading widget */
.dz-eyebrow,
.elementor-widget-heading.dz-eyebrow .elementor-heading-title {   /* repeated to win over the widget's default color */
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--dz-accent-2);
}

/* Heading text filled with the accent gradient */
.dz-gradient-text {
	background: var(--dz-gradient-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Muted paragraph */
.dz-muted {
	color: var(--dz-text-muted);
}

/* Secondary (outline) button: put the class on the Elementor Button widget.
   The primary button style comes from Site Settings > Buttons.
   (.elementor-widget-button is repeated to win over the widget's default style.) */
.elementor-widget-button.dz-btn-secondary .elementor-button {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--dz-text) 30%, transparent);
	color: var(--dz-text);
}
.elementor-widget-button.dz-btn-secondary .elementor-button:hover,
.elementor-widget-button.dz-btn-secondary .elementor-button:focus-visible {
	background: var(--dz-text);
	border-color: var(--dz-text);
	color: var(--dz-bg);
}

/* Placeholder box for logos and avatars (gray, replace with real images later) */
.dz-placeholder {
	background: var(--dz-border);
	border-radius: var(--dz-radius-sm);
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
/* ==========================================================================
   SECTION: HEADER
   Top of every page. Sticky. Logo left, links centered, "Book a call" button right.
   It is transparent at the top of the page and gets a subtle blurred background and
   shadow once the visitor scrolls (header.js adds .is-scrolled).
   Below 1025px the links and button collapse into a full-width dropdown that opens
   with the hamburger button (header.js adds .is-open).

   WHERE TO EDIT: WordPress admin > Templates > Saved Templates > "Site Header" >
   Edit with Elementor. It appears on every page automatically (see functions.php).

   ELEMENTOR STRUCTURE (see the Navigator):
     .dz-site-header               wrapper printed by functions.php: the sticky element
       .dz-header                  <header> container: the bar itself
         .dz-header__inner         row that holds everything, max width = site container
           .dz-header__logo        Shortcode widget [dz_logo]: the white logo, linked to Home
           .dz-header__menu        holds links + button. On desktop it is invisible to layout
                                   (display: contents); on mobile it is the dropdown panel
             .dz-nav               <nav> container
               Icon List widget    one item per link: edit text and URL there
             .dz-header__cta       Button widget (global primary button style)
           .dz-header__toggle      HTML widget: the hamburger button (mobile only)

   ANCHOR LINKS: Services, Why Us and Team point to #services, #why-us and #team. Give the
   matching homepage sections those IDs (Advanced > CSS ID, without the #).

   HOW TO CHANGE THE LOGO:
     The file is assets/img/duzzt-logo-white.svg (loaded by the [dz_logo] shortcode in
     functions.php). Replace that file to update it everywhere. Or delete the Shortcode
     widget, add an Image widget and give it the CSS class dz-header__logo.
     The size is controlled by --dz-logo-height below (the width follows the image).
   ========================================================================== */

/* The wrapper is the sticky element, because it is a direct child of <body> (a tall parent) */
.dz-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Keep the sticky bar below the WordPress admin bar when you are logged in */
body.admin-bar .dz-site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .dz-site-header { top: 46px; } }

/* The bar: transparent at the top of the page */
.dz-header {
	--dz-header-py: 1.125rem;          /* vertical padding of the bar: below the logo, and above it once scrolled */
	--dz-logo-height: 64px;            /* logo height (the width follows) */
	position: relative;                /* anchor for the mobile dropdown */
	width: 100%;
	padding: var(--dz-header-pt, var(--dz-header-py)) var(--dz-gutter) var(--dz-header-py);
	background: transparent;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

/* After scrolling: subtle blurred background and shadow (class added by header.js) */
.dz-header.is-scrolled {
	--dz-header-py: 0.75rem;           /* slightly slimmer bar */
	background: color-mix(in srgb, var(--dz-bg) 82%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 var(--dz-border), var(--dz-shadow-md);
}
/* The logo sits 30px below the top of the page at every width. Once the page is scrolled the
   bar becomes slimmer again (the sticky bar should not waste space). */
.dz-header { --dz-header-pt: 30px; }
.dz-header.is-scrolled { --dz-header-pt: var(--dz-header-py); }
/* Mobile menu open: solid bar so the dropdown looks like one piece */
.dz-header.is-open { background: var(--dz-bg); }

.dz-header .dz-header__inner {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dz-space-md);
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: 0;
}

/* Logo */
.dz-header .dz-header__logo { flex: 1 1 0; }
.dz-header .dz-header__logo a {
	display: inline-block;
	line-height: 0;                   /* no extra space under the image */
}
.dz-header .dz-header__logo img {
	display: block;
	width: auto;
	max-width: none;
	height: var(--dz-logo-height);
}

/* Desktop: the menu wrapper does not exist for layout, so nav and button sit in the row */
.dz-header .dz-header__menu {
	display: contents;
}

/* Links */
.dz-header .dz-nav {
	flex: 0 0 auto;
	width: auto;
	padding: 0;
}
.dz-header .dz-nav .elementor-icon-list-items {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: clamp(1.25rem, 0.5rem + 2vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dz-header .dz-nav .elementor-icon-list-icon { display: none; }   /* links only, no icons */
.dz-header .dz-nav .elementor-icon-list-item { padding: 0; }
.dz-header .dz-nav .elementor-icon-list-item > a {
	display: block;
	padding-block: 0.5rem;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dz-text);
	transition: color 0.2s ease;
}
.dz-header .dz-nav .elementor-icon-list-item > a:hover,
.dz-header .dz-nav .elementor-icon-list-item > a:focus-visible {
	color: var(--dz-accent-2);
}
.dz-header .dz-nav .elementor-icon-list-text {
	padding: 0;
	color: inherit;                   /* Elementor gives icon-list text its own color; use the link's */
}

/* Button: outlined pill on the right (style comes from .dz-btn-secondary in 10-base.css) */
.dz-header .dz-header__cta {
	flex: 1 1 0;
	display: flex;
	justify-content: flex-end;        /* push the button to the right edge */
}

/* Hamburger: hidden on desktop */
.dz-header .dz-header__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dz-border);
	border-radius: var(--dz-radius-pill);
	background: transparent;
	color: var(--dz-text);
	cursor: pointer;
}
.dz-header .dz-header__toggle:focus-visible {
	outline: 2px solid var(--dz-accent-2);
	outline-offset: 2px;
}
.dz-header .dz-header__toggle span {
	position: absolute;
	left: 13px;
	right: 13px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.dz-header .dz-header__toggle span:nth-child(1) { top: 15px; }
.dz-header .dz-header__toggle span:nth-child(2) { top: 21px; }
.dz-header .dz-header__toggle span:nth-child(3) { top: 27px; }
.dz-header.is-open .dz-header__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dz-header.is-open .dz-header__toggle span:nth-child(2) { opacity: 0; }
.dz-header.is-open .dz-header__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Tablet and mobile: collapse into a panel ------------------------------ */
@media (max-width: 1024px) {
	.dz-header { --dz-logo-height: 56px; }

	/* Without JavaScript the links simply stack under the logo (nothing gets hidden) */
	.dz-header .dz-header__inner { flex-wrap: wrap; }
	.dz-header .dz-header__menu {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;                /* never turn into a second column on short screens */
		align-items: stretch;
		gap: var(--dz-space-sm);
		flex: 1 0 100%;
		width: 100%;
		padding: 0;
	}
	.dz-header .dz-nav .elementor-icon-list-items {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.dz-header .dz-nav .elementor-icon-list-item > a {
		padding-block: 0.875rem;
		font-size: 1rem;
		border-bottom: 1px solid var(--dz-border);
	}
	.dz-header .dz-header__cta { flex: 0 0 auto; justify-content: stretch; }
	.dz-header .dz-header__cta .elementor-button { width: 100%; justify-content: center; }

	/* With JavaScript (adds .is-enhanced): hamburger + dropdown panel */
	/* The row must not be the positioning parent, or the dropdown would not reach the screen edges */
	.dz-header .dz-header__inner { position: static; }
	.dz-header.is-enhanced .dz-header__inner { flex-wrap: nowrap; }
	.dz-header.is-enhanced .dz-header__toggle { display: block; flex: 0 0 auto; }
	.dz-header.is-enhanced .dz-header__menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		padding: var(--dz-space-sm) var(--dz-gutter) var(--dz-space-lg);
		background: var(--dz-bg);
		border-bottom: 1px solid var(--dz-border);
		max-height: calc(100vh - 7rem);                       /* long menus scroll instead of overflowing */
		max-height: calc(100dvh - 7rem);
		overflow-y: auto;
	}
	.dz-header.is-enhanced.is-open .dz-header__menu { display: flex; }
}

@media (max-width: 767px) {
	.dz-header {
		--dz-header-py: 0.875rem;
		--dz-logo-height: 52px;
	}
	.dz-header.is-scrolled { --dz-header-py: 0.625rem; }
}
/* ==========================================================================
   SECTION: HERO
   Top of the homepage, directly under the header.
   Desktop: two columns, copy on the left (dominant), an animated organic SVG on the right.
   Below 900px: one column, copy first, the visual second.

   ELEMENTOR STRUCTURE (see the Navigator):
     .dz-hero                   outer container (id "hero"), holds the soft background glow
       .dz-hero__inner          row, limited to the site content width
         .dz-hero__copy         left column
           .dz-hero__eyebrow    Heading widget (small uppercase line)
           .dz-hero__title      Heading widget, H1. Also has the class "dz-rotate": its lines
                                are typed one at a time (see TYPING HEADLINE below)
           .dz-hero__text       Text Editor widget (two paragraphs)
           .dz-hero__actions    row with two Button widgets
             .dz-hero__cta      primary button   -> #what-we-do
             .dz-btn-secondary  outline button   -> #contact
         .dz-hero__visual       right column
           .dz-organism         HTML widget: the animated "living intelligence" SVG (decorative),
                                see 16-organism.css

   WHAT IS EDITED WHERE:
     - Text, button labels and links: click the widgets in Elementor.
     - Colors: the background glow follows Site Settings > Global Colors. The organism has its own
       palette (see 16-organism.css). No image is used anywhere.
     - The slim "Trusted by" logo strip is the last child of this container, so it reads as the
       bottom edge of the hero, not as a section of its own.
     - The H1 size is set here (--dz-hero-h1) so that the longest phrase stays on one line
       at every width. Do not lengthen the phrases without checking mobile.
     - The typed phrases: click the H1 and edit the Title. One phrase per line (press Enter
       or type <br>). Add or remove lines freely. Typing speed and hold time are at the top
       of assets/js/rotator.js.
     - Load-in animation: Advanced > Motion Effects > Entrance Animation on each item
       (Elementor's built-in fade in, small stagger). "Reduce motion" is respected (10-base.css).
   ========================================================================== */

.dz-hero {
	/* Tuning knobs */
	--dz-hero-y: clamp(3.5rem, 1.5rem + 7vw, 8.5rem);   /* generous padding above the content */
	--dz-hero-y-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem);  /* tight below: the logo strip is the hero's bottom edge */
	--dz-hero-strip-gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
	--dz-hero-gap: clamp(2rem, 1rem + 4vw, 5rem);        /* space between the two columns */
	--dz-hero-text-w: 38rem;                             /* paragraph width, about 608px */
	/* H1: the longest line ("We grow businesses.") is 10.4 x the font size wide, so the size is
	   derived from the width the copy column has (55% of the page on desktop), and capped at 60px
	   so that line plus the typing cursor always fits in the column with room to spare. */
	--dz-hero-h1: clamp(1.75rem, calc((100vw - 2 * var(--dz-gutter)) * 0.55 / 10.9), 3.75rem);

	align-items: center;
	padding-block: var(--dz-hero-y) var(--dz-hero-y-bottom);
	gap: var(--dz-hero-strip-gap);      /* space between the two columns row and the logo strip */
	/* Restrained background: two very soft glows, one behind the organism, one on the left.
	   Both fade out before the section edges, so there is no visible seam. */
	overflow-x: clip;                   /* the organism may extend past its column; it must never cause sideways scrolling */
	background:
		radial-gradient(42% 60% at 78% 50%, color-mix(in srgb, var(--dz-accent) 12%, transparent), transparent 72%),
		radial-gradient(30% 30% at 12% 62%, color-mix(in srgb, var(--dz-blue) 12%, transparent), transparent 72%);
}

/* Two columns */
.dz-hero .dz-hero__inner {
	flex-direction: row;
	align-items: center;
	gap: var(--dz-hero-gap);
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: 0;
}
.dz-hero .dz-hero__copy {
	flex: 1.35 1 0;                    /* copy is the dominant column */
	min-width: 0;
	align-items: flex-start;
	text-align: left;
	gap: var(--dz-space-md);
	padding: 0;
}
.dz-hero .dz-hero__visual {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
}

/* Eyebrow */
.dz-hero .dz-hero__eyebrow .elementor-heading-title {
	font-size: clamp(0.6875rem, 0.64rem + 0.2vw, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--dz-text-muted);
}

/* H1 */
.dz-hero .dz-hero__title .elementor-heading-title {
	font-size: var(--dz-hero-h1);
	line-height: 1.08;
	text-align: left;
}

/* --------------------------------------------------------------------------
   TYPING HEADLINE
   functions.php wraps each line of the H1 in .dz-rotator__item (all phrases stay in the page
   for search engines and screen readers). rotator.js then adds .is-typing, hides those items
   visually and types the phrases into .dz-rotator__typed, one after another, with a cursor.
   The line always keeps the height of one line, so nothing below it jumps.

   Without JavaScript: the first phrase is shown, as plain text.
   With "reduce motion": no typing, all phrases are shown one under the other.
   -------------------------------------------------------------------------- */
.dz-hero .dz-rotator {
	position: relative;
	display: grid;                     /* stacked: the line is as tall as one phrase */
}
.dz-hero .dz-rotator__item {
	grid-area: 1 / 1;
	opacity: 0;
}
.dz-hero .dz-rotator__item.is-active { opacity: 1; }

/* Typing mode: the real text becomes visually hidden (still read by screen readers) */
.dz-hero .dz-rotator.is-typing {
	display: block;
	white-space: nowrap;               /* the typed line and its cursor must never wrap onto a second line */
}
.dz-hero .dz-rotator.is-typing .dz-rotator__item {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 1;
}

/* The cursor: a slim bar in the brand gradient. It blinks while the phrase is waiting
   and stays solid while letters are being typed or deleted. */
.dz-hero .dz-rotator__cursor {
	display: inline-block;
	width: 0.07em;
	height: 0.86em;
	margin-inline-start: 0.06em;
	vertical-align: -0.05em;
	border-radius: 1px;
	background: linear-gradient(var(--dz-blue), var(--dz-magenta));
	animation: dz-cursor-blink 1s steps(1) infinite;
}
.dz-hero .dz-rotator.is-busy .dz-rotator__cursor { animation: none; }
@keyframes dz-cursor-blink { 50% { opacity: 0; } }

/* Reduce motion: no typing, all phrases visible, one under the other */
@media (prefers-reduced-motion: reduce) {
	.dz-hero .dz-rotator,
	.dz-hero .dz-rotator.is-typing { display: block; }
	.dz-hero .dz-rotator__item,
	.dz-hero .dz-rotator.is-typing .dz-rotator__item {
		position: static;
		display: block;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		opacity: 1;
	}
	.dz-hero .dz-rotator__typed,
	.dz-hero .dz-rotator__cursor { display: none; }
}

/* Supporting copy */
.dz-hero .dz-hero__text {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.65;
	color: var(--dz-text-muted);
}
.dz-hero .dz-hero__text p {
	max-width: var(--dz-hero-text-w);   /* on the paragraph: Elementor's widget max-width would win */
	margin: 0 0 1em;
}
.dz-hero .dz-hero__text p:last-child { margin-bottom: 0; }

/* Buttons */
.dz-hero .dz-hero__actions {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dz-space-sm);
	margin-top: var(--dz-space-xs);
	padding: 0;
}

/* --------------------------------------------------------------------------
   THE VISUAL COLUMN
   The organism is a little wider than its column (its edges are transparent), so it can be
   about 600px wide on desktop while the copy keeps the room it needs. It is centered on the
   column, and its height is trimmed a little so it stays level with the headline block.
   -------------------------------------------------------------------------- */
.dz-hero .dz-hero__visual {
	display: grid;
	align-items: center;
	justify-items: stretch;             /* the widget spans the whole column, so the width below has a real reference */
	width: 100%;
	overflow: visible;
}
.dz-hero .dz-hero__visual .dz-organism {
	--dzo-w: min(640px, calc(100% + 8rem));
	margin-inline: calc((100% - var(--dzo-w)) / 2);
	margin-block: -2.5rem;
}

/* Narrower desktops: the organism hangs out less, so it never touches the copy */
@media (max-width: 1200px) {
	.dz-hero .dz-hero__visual .dz-organism { --dzo-w: min(640px, calc(100% + 2rem)); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

/* Narrow tablet and mobile: one column, copy first, the visual second */
@media (max-width: 899px) {
	.dz-hero {
		/* full width available to the copy, so the H1 can be larger */
		--dz-hero-h1: clamp(1.75rem, calc((100vw - 2 * var(--dz-gutter)) / 10.9), 3.75rem);
	}
	.dz-hero .dz-hero__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--dz-space-2xl);
	}
	.dz-hero .dz-hero__copy,
	.dz-hero .dz-hero__visual { flex: 0 0 auto; }
	/* the visual: 560px at most, centered, no extra overlap */
	.dz-hero .dz-hero__visual .dz-organism {
		--dzo-w: min(560px, 100%);
		margin-block: 0;
	}
}

/* Mobile: full-width buttons */
@media (max-width: 767px) {
	.dz-hero { --dz-hero-y: 2.75rem; --dz-hero-y-bottom: 1.75rem; }
	.dz-hero .dz-hero__visual .dz-organism { --dzo-w: min(360px, 100%); }   /* about 330-360px on phones */
	.dz-hero .dz-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
	.dz-hero .dz-hero__actions .elementor-widget-button,
	.dz-hero .dz-hero__actions .elementor-button { width: 100%; text-align: center; }
}
/* ==========================================================================
   HERO VISUAL: "LIVING INTELLIGENCE" ORGANISM (animated inline SVG)
   Sits in the right column of the hero. Purely decorative (aria-hidden), no text inside.

   CONCEPT: one organic digital organism: a morphing membrane, fine flowing data lines, glowing
   particles, connected nodes, layered translucent surfaces and soft internal light. A faint
   irregular hexagon (l'Hexagone) sits behind it, its hairline running cobalt > soft white >
   a short red-magenta end: a quiet nod to France as the operating base, not a flag, not a map.

   WHERE THINGS LIVE
     - The SVG is inline in an Elementor HTML widget (hero > right column). To regenerate it:
       python3 tools/build-organism.py out.svg, then paste it inside <div class="dz-organism">.
     - Colors: the six values below, taken from the brief. The SVG only refers to these variables.
     - Motion: this file (CSS keyframes) + assets/js/organism.js (starts the shape morph, pauses
       when hidden, cursor parallax on desktop).

   LAYERS, back to front (each has a .dzo-par wrapper for parallax and, where it moves, an inner
   .dzo-breathe group, so parallax and animation never share one transform):
     1 back glow   2 hexagon   3 rear membrane   4 main membrane (+ core light, flowing lines)
     5 network (lines, pulses, halos, nodes)   6 particles   7 front light

   PERFORMANCE: no blur filters at all (glow is drawn with gradients), only transform, opacity and
   stroke-dashoffset are animated, everything pauses when the tab is hidden or the hero is off screen.
   REDUCED MOTION: every animation stops; the artwork stays visible as a calm static frame.
   ========================================================================== */

.dz-organism {
	/* Palette from the brief. Violet and blue dominate; red-magenta is only a controlled accent. */
	--dzo-cobalt:  #245BFF;
	--dzo-violet:  #6254FF;
	--dzo-purple:  #8A3FFF;
	--dzo-magenta: #C63DDB;
	--dzo-white:   #F4F5FF;
	--dzo-red:     #DF315F;

	width: var(--dzo-w, 100%);
	aspect-ratio: 600 / 560;       /* reserves the space: no layout shift */
	line-height: 0;
	pointer-events: none;
}

.dz-organism .dzo {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	animation: dzo-float 9s ease-in-out infinite;   /* whole visual drifts about 10px up and down */
	will-change: transform;
}
@keyframes dzo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Parallax wrapper: JS sets --px / --py on the svg (a few pixels), each layer multiplies by its --k */
.dz-organism .dzo-par {
	transform: translate(calc(var(--px, 0px) * var(--k, 1)), calc(var(--py, 0px) * var(--k, 1)));
}

/* Breathing: slow, small scale change (3-5%), a different rhythm per layer, seamless loop */
.dz-organism .dzo-breathe {
	transform-box: fill-box;
	transform-origin: center;
	animation: dzo-breathe var(--d, 10s) ease-in-out infinite;
}
@keyframes dzo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--s, 1.04)); } }

/* Soft internal light */
.dz-organism .dzo-core {
	transform-box: fill-box;
	transform-origin: center;
	animation: dzo-core 7s ease-in-out infinite;
}
@keyframes dzo-core { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.dz-organism .dzo-front { animation: dzo-front 10s ease-in-out infinite; }
@keyframes dzo-front { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

/* Fine flowing data lines inside the membrane: a slow dash pattern that drifts along each curve.
   (pathLength=120 and a 30-unit pattern: the loop is seamless.) */
.dz-organism .dzo-flow {
	stroke-dasharray: 14 6 3 7;
	opacity: 0.55;
	animation: dzo-flow var(--d, 24s) linear var(--dl, 0s) infinite;
}
@keyframes dzo-flow { to { stroke-dashoffset: -30; } }

/* Data pulses: a short bright dash travelling along a curve (pathLength=100, pattern 100: seamless).
   Every pulse has its own duration (4-8 s) and a negative delay, so they are never in step.
   Some curves are drawn clockwise, others counter-clockwise or in/out of the centre. */
.dz-organism .dzo-pulse {
	stroke-width: 2.4;
	stroke-dasharray: 4 96;
	opacity: 0.95;
	animation: dzo-run var(--d, 6s) linear var(--dl, 0s) infinite;
}
.dz-organism .dzo-pulse-glow { stroke-width: 6; opacity: 0.2; }     /* soft halo under the pulse, no filter */
@keyframes dzo-run { to { stroke-dashoffset: -100; } }

/* Nodes: a gentle pulse at their own time; some also send out a halo ring that fades away */
.dz-organism .dzo-node {
	transform-box: fill-box;
	transform-origin: center;
	animation: dzo-node var(--d, 6s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes dzo-node { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.18); opacity: 1; } }
.dz-organism .dzo-halo {
	stroke-width: 1;
	vector-effect: non-scaling-stroke;      /* the ring gets bigger but not thicker */
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
	animation: dzo-halo var(--d, 7s) ease-out var(--dl, 0s) infinite;
}
@keyframes dzo-halo { 0% { transform: scale(0.7); opacity: 0.5; } 70% { opacity: 0; } 100% { transform: scale(3); opacity: 0; } }

/* Particles: slow individual drift (each has its own distance, duration and delay) and, on some,
   an occasional soft brightness pulse. They stay in and around the organism. */
.dz-organism .dzo-p {
	opacity: var(--o, 0.3);
	animation: dzo-drift var(--d, 16s) ease-in-out var(--dl, 0s) infinite;
}
.dz-organism .dzo-tw {
	animation: dzo-drift var(--d, 16s) ease-in-out var(--dl, 0s) infinite, dzo-twinkle 6s ease-in-out var(--dl, 0s) infinite;
}
@keyframes dzo-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--ax, 6px), var(--ay, -8px)); } }
@keyframes dzo-twinkle { 0%, 100% { opacity: var(--o, 0.3); } 50% { opacity: calc(var(--o, 0.3) * 2.2); } }

/* Paused by organism.js when the tab is hidden or the hero is scrolled out of view */
.dz-organism.is-paused .dzo,
.dz-organism.is-paused .dzo * { animation-play-state: paused; }

/* Mobile: the same artwork with fewer particles */
@media (max-width: 767px) {
	.dz-organism .dzo-extra { display: none; }
}

/* Reduced motion: stop everything, keep the artwork as a polished still image */
@media (prefers-reduced-motion: reduce) {
	.dz-organism .dzo,
	.dz-organism .dzo * { animation: none !important; }
	.dz-organism .dzo-halo { opacity: 0.18; }
}
/* ==========================================================================
   SECTION: LOGO STRIP ("Trusted by teams like yours")
   The bottom edge of the HERO: it lives inside the hero container, so it shares the hero's
   background and its content width, and sits under a hairline. It is slim on purpose.

   ELEMENTOR STRUCTURE (all containers, see the Navigator):
     .dz-hero > .dz-logos     container inside the hero (holds label + marquee)
       .dz-logos__title       Heading widget (a small label, not a section heading)
       .dz-marquee            clipping window
         .dz-marquee__track   the row that scrolls
           .dz-logo  x 8      one container per client, holding an Image widget

   HOW TO ADD REAL LOGOS (no CSS changes needed):
     1. Click a logo square in the preview (or its Image widget in the Navigator).
     2. In the left panel click Choose Image, upload or pick the logo (PNG or WebP with a
        transparent background, about 300px wide is plenty).
     3. Repeat for each client. To add or remove a client, duplicate or delete
        a .dz-logo container. The scroll loop adapts automatically.
     The gray box disappears by itself once the container holds an image, and
     the logo is shown in grayscale at low contrast (see --dz-logo-filter).

   HOW THE LOOP WORKS:
     assets/js/marquee.js copies the logos once so the row can slide by exactly
     one set and restart with no visible jump. Without JavaScript, or with the
     "reduce motion" setting on, the strip is a normal row you can scroll by hand.
   ========================================================================== */

.dz-logos {
	/* Tuning knobs for this strip */
	--dz-logo-size:   144px;   /* each logo slot is a square: 1:1 */
	--dz-logo-w:      var(--dz-logo-size);
	--dz-logo-h:      var(--dz-logo-size);
	--dz-logo-gap:    clamp(1rem, 0.5rem + 1.6vw, 2.25rem);  /* space between logos */
	--dz-logo-opacity: 0.55;   /* low contrast so the strip does not compete with the hero */
	--dz-logo-opacity-hover: 0.9;
	/* Real logos keep their own picture and lose only their color (grayscale), which keeps the strip
	   quiet. Use "none" for full color. For a dark logo on a transparent background (invisible on this
	   dark page) use "grayscale(1) brightness(0) invert(1)" to turn it into a white silhouette. */
	--dz-logo-filter: grayscale(1);
}

/* Inside the hero: same width as the hero content, a hairline on top, tight spacing */
.dz-hero .dz-logos {
	align-items: center;
	gap: var(--dz-space-sm);
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: var(--dz-space-md) 0 0;
	border-top: 1px solid color-mix(in srgb, var(--dz-border) 75%, transparent);
}

/* The title above the logos is a .dz-eyebrow (the same small uppercase label as the other sections'
   titles, styled in 10-base.css). Here it is only centered. */
.dz-logos .dz-logos__title .elementor-heading-title { text-align: center; }

/* Clipping window. The soft fade at both edges uses a mask (alpha only, not a color). */
.dz-logos .dz-marquee {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;                 /* fallback: scrollable by hand */
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent);
	mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent);
}
.dz-logos .dz-marquee::-webkit-scrollbar { display: none; }

/* The row itself: one line, as wide as its content */
.dz-logos .dz-marquee__track {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 0;                           /* spacing is on each logo (margin) so the loop is exact */
	width: max-content;
	max-width: none;
	padding: 0;
}

/* One logo slot */
.dz-logos .dz-marquee__track > .dz-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--dz-logo-w);
	width: var(--dz-logo-w);
	--width: var(--dz-logo-w);
	height: var(--dz-logo-h);
	aspect-ratio: 1 / 1;
	margin-inline-end: var(--dz-logo-gap);
	padding: 0;
	opacity: var(--dz-logo-opacity);
	transition: opacity 0.2s ease;
}
.dz-logos .dz-marquee__track > .dz-logo:hover { opacity: var(--dz-logo-opacity-hover); }

/* On hover (desktop: devices that can hover) the logo shows its real colors at full strength */
@media (hover: hover) {
	.dz-logos .dz-marquee__track > .dz-logo:hover { opacity: 1; }
	.dz-logos .dz-logo:hover img { filter: none; }
}

/* Empty slot: a dark gray square (Elementor's placeholder picture, toned down). Applies only while the
   Image widget has no picture; once a logo is chosen the gray box disappears by itself. */
.dz-logos .dz-logo:not(:has(img:not([src*="/images/placeholder"]))) {
	background: var(--dz-border);
	border-radius: var(--dz-radius-sm);
	overflow: hidden;
}
.dz-logos .dz-logo .elementor-widget-image { display: flex; align-items: center; justify-content: center; }
.dz-logos .dz-logo img[src*="/images/placeholder"] {
	width: var(--dz-logo-size);
	height: var(--dz-logo-size);
	max-width: none;
	max-height: none;
	object-fit: cover;
	opacity: 0.12;
	filter: none;
}

/* A real logo: centered inside the square, never stretched or cropped */
.dz-logos .dz-logo img {
	transition: filter 0.3s ease;
	width: auto;
	height: auto;
	max-width: calc(var(--dz-logo-size) * 0.9);
	max-height: calc(var(--dz-logo-size) * 0.9);
	object-fit: contain;
	border-radius: var(--dz-radius-sm);
	filter: var(--dz-logo-filter);
}

/* --- Animation: switched on by marquee.js (adds .is-ready) ---------------- */
.dz-logos .dz-marquee.is-ready { overflow: hidden; }
.dz-logos .dz-marquee.is-ready .dz-marquee__track {
	animation: dz-marquee var(--dz-marquee-duration, 40s) linear infinite;
	will-change: transform;
}
/* Pause on hover, and while a logo link has keyboard focus */
.dz-logos .dz-marquee.is-ready:hover .dz-marquee__track,
.dz-logos .dz-marquee.is-ready:focus-within .dz-marquee__track {
	animation-play-state: paused;
}
@keyframes dz-marquee {
	to { transform: translateX(calc(-1 * var(--dz-marquee-shift, 0px))); }
}

/* --- Responsive ------------------------------------------------------------ */

/* Tablet: same squares */
@media (max-width: 1024px) {
	.dz-logos {
		--dz-logo-size: 144px;
	}
}

/* Mobile: about 3 squares visible (a cut-off one hints that it scrolls) */
@media (max-width: 767px) {
	.dz-logos {
		--dz-logo-size: max(168px, 52vw);      /* about 1.5 squares visible on a phone */
		--dz-logo-gap: 0.875rem;
	}
}
/* ==========================================================================
   SECTION: ANIMATED STATISTICS
   Three big numbers with a label and one supporting sentence. Numbers count up once when
   the section first scrolls into view (assets/js/counter.js). No cards: thin dividers only.

   ELEMENTOR STRUCTURE (see the Navigator):
     .dz-stats                   outer container (id "stats")
       .dz-stats__grid           row of three equal columns (stacked on mobile)
       .dz-stats__separator      Divider widget: the thin line below the numbers
         .dz-stats__item  x 3    a Shortcode widget, one per statistic

   HOW TO EDIT: click a Shortcode widget and change its text, for example
     [dz_stat value="20" suffix="+" label="Years of experience" text="Supporting sentence."
              aria="More than 20 years of experience" duration="1600" tone="violet"]
     value     the final number (it counts up from 0 to this)
     prefix / suffix   static text before / after the number (for example + or a degree sign)
     label     the short title under the number
     text      the supporting sentence (muted gray)
     aria      the full sentence screen readers announce instead of the counting digits
     duration  how long the count takes, in milliseconds
     tone      violet, green, blue, cyan or magenta (colors come from Site Settings > Global Colors)
   Keep double quotes out of the values. To add a fourth stat, duplicate a Shortcode widget.

   NO JAVASCRIPT / REDUCED MOTION: the final numbers are in the page from the start, so they stay
   visible and nothing animates. The start state below only exists once the script adds .is-ready.
   ========================================================================== */

.dz-stats {
	/* Size of the big numbers: 64px on desktop at most, about 56px on phones.
	   Change the last value to make the desktop numbers bigger or smaller. */
	--dz-stat-size: clamp(3.5rem, 3rem + 1.4vw, 4rem);
	align-items: center;
}

/* Separator: a thin line across the content width, below the numbers.
   Its color is the global Border color; its look is set here, not in the Divider widget. */
.dz-stats .dz-stats__separator {
	align-self: stretch;
	width: 100%;
}
.dz-stats .dz-stats__separator .elementor-divider {
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: 0;
}
.dz-stats .dz-stats__separator .elementor-divider-separator {
	/* Elementor colors the line from its own variables; set them here, on the line itself */
	--divider-color: var(--dz-border);
	--divider-border-width: 1px;
	--divider-border-style: solid;
	width: 100%;
	margin: 0;
	border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);
}

/* Row of three equal columns, limited to the site content width */
.dz-stats .dz-stats__grid {
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: 0;
}
.dz-stats .dz-stats__item {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--dz-space-md) var(--dz-space-md);
}

/* Subtle vertical divider between columns */
.dz-stats .dz-stats__item + .dz-stats__item {
	border-inline-start: 1px solid var(--dz-border);
}

/* One statistic */
.dz-stats .dz-stat {
	--dz-stat-color: var(--dz-accent);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dz-space-xs);
	text-align: center;
}
.dz-stats .dz-stat[data-tone="green"]   { --dz-stat-color: var(--dz-highlight); }
.dz-stats .dz-stat[data-tone="blue"]    { --dz-stat-color: var(--dz-blue); }
.dz-stats .dz-stat[data-tone="cyan"]    { --dz-stat-color: var(--dz-accent-2); }
.dz-stats .dz-stat[data-tone="magenta"] { --dz-stat-color: var(--dz-magenta); }
.dz-stats .dz-stat p { margin: 0; }

/* The number: large and dominant. Prefix and suffix are static; only the middle part counts. */
.dz-stats .dz-stat__number {
	display: flex;
	align-items: baseline;
	justify-content: center;
	font-size: var(--dz-stat-size);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;     /* every digit has the same width, so the number does not wobble */
	color: var(--dz-stat-color);
}
/* The counting part reserves the room of its FINAL value (from data-final), so the block does not
   change width while counting; the number sits against the suffix, like a real counter. */
.dz-stats .dz-stat__value { display: inline-grid; }
.dz-stats .dz-stat__value::before {
	content: attr(data-final);
	grid-area: 1 / 1;
	visibility: hidden;
}
.dz-stats .dz-stat__now {
	grid-area: 1 / 1;
	justify-self: end;
}

.dz-stats .dz-stat__label {
	margin-top: var(--dz-space-xs);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--dz-text);                  /* soft white */
}
.dz-stats .dz-stat__text {
	max-width: 20rem;
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
	line-height: 1.55;
	color: var(--dz-text-muted);
	text-wrap: balance;
}

/* Entrance: each complete block fades up a little as its counter starts.
   Only when the script has prepared the section (.is-ready), so without JavaScript nothing is hidden. */
.dz-stats.is-ready .dz-stat {
	opacity: 0;
	transform: translateY(14px);
}
.dz-stats.is-ready .dz-stat.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Mobile: stacked and centered, with subtle horizontal dividers */
@media (max-width: 767px) {
	.dz-stats .dz-stats__grid { flex-direction: column; }
	.dz-stats .dz-stats__item { padding-block: var(--dz-space-lg); }
	.dz-stats .dz-stats__item + .dz-stats__item {
		border-inline-start: 0;
		border-top: 1px solid var(--dz-border);
	}
}
/* ==========================================================================
   SECTION: CHALLENGES (a conversation)
   Six question bubbles on the left, and a gradient button on the right.
   The section has id="challenges".

   ELEMENTOR STRUCTURE (see the Navigator):
     .dz-challenges             outer container (id "challenges"), centered column
       .dz-challenges__head     centered intro block
         .dz-eyebrow            Heading widget: the small label
         .dz-challenges__title  Heading widget: H2
         .dz-challenges__intro  Text Editor widget: one sentence
       .dz-chat                 the conversation: a row on desktop, one column below 900px
         .dz-chat__questions    column of question bubbles
           .dz-bubble  x 6      one container per question, holding a Heading widget
         .dz-chat__reply        column holding the button
           .dz-chat__cta        Button widget ("Start a Conversation" -> #contact)

   HOW TO EDIT: click a bubble's text to change it. To add a question, duplicate a .dz-bubble
   container. Bubble widths follow the text length on purpose. The colors come from the global
   palette (bubbles = Surface, button = Brand blue to Accent 1 gradient).

   MOTION: when the section first scrolls into view the bubbles appear one after another (about 100 ms
   apart, a small fade and 14px rise), then the button; once per page load
   (assets/js/bubbles.js). With "reduce motion" or without JavaScript everything is visible at once.
   ========================================================================== */

.dz-challenges {
	--dz-bubble-bg: color-mix(in srgb, var(--dz-text) 8%, var(--dz-surface));
	--dz-bubble-gap: clamp(0.875rem, 0.6rem + 1vw, 1.25rem);
	--dz-tail: 1.25rem;
	align-items: center;
	gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* Intro: centered */
.dz-challenges .dz-challenges__head {
	align-items: center;
	gap: var(--dz-space-sm);
	max-width: 44rem;
	padding: 0;
	text-align: center;
}
.dz-challenges .dz-challenges__title .elementor-heading-title { text-align: center; text-wrap: balance; }
.dz-challenges .dz-challenges__intro {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--dz-text-muted);
}
.dz-challenges .dz-challenges__intro p { margin: 0; text-wrap: balance; }

/* The conversation: limited to the content width; the reply sits level with the middle of the questions */
.dz-challenges .dz-chat {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--dz-space-xl);
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: 0;
}
.dz-challenges .dz-chat__questions {
	flex: 1 1 0;
	align-items: flex-start;
	gap: var(--dz-bubble-gap);
	min-width: 0;
	padding: 0 0 0 var(--dz-tail);          /* room for the tails on the left */
}
.dz-challenges .dz-chat__reply {
	flex: 0 1 26rem;
	align-items: flex-end;
	gap: var(--dz-space-md);
	min-width: 0;
	padding: 0 var(--dz-tail) 0 0;          /* room for the tail on the right */
}

/* A bubble: as wide as its text (never forced to equal widths), soft charcoal, thin border, small tail */
.dz-challenges .dz-bubble {
	position: relative;
	width: fit-content;
	--width: fit-content;
	max-width: min(100%, 36rem);
	padding: 1rem 1.5rem;
	background: var(--dz-bubble-bg);
	border-radius: 1.5rem 1.5rem 1.5rem 0.375rem;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dz-text) 10%, transparent);
}
.dz-challenges .dz-bubble .elementor-heading-title {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	font-weight: 400;
	line-height: 1.45;
	color: var(--dz-text);
}
/* The tail (::after: Elementor uses ::before for its own backgrounds) */
.dz-challenges .dz-bubble::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(var(--dz-tail) * -0.55);
	width: var(--dz-tail);
	height: var(--dz-tail);
	background: var(--dz-bubble-bg);
	clip-path: polygon(100% 20%, 100% 100%, 0 100%, 34% 84%, 62% 56%);
}

/* The button: the same blue to violet gradient the reply bubble had */
.dz-challenges .elementor-widget-button.dz-chat__cta .elementor-button {
	color: #fff;
	background: linear-gradient(135deg, var(--dz-blue), var(--dz-accent));
	border: 0;
	box-shadow: 0 1rem 2.5rem -1rem color-mix(in srgb, var(--dz-accent) 70%, transparent);
	transition: filter 0.2s ease;
}
.dz-challenges .elementor-widget-button.dz-chat__cta .elementor-button:hover,
.dz-challenges .elementor-widget-button.dz-chat__cta .elementor-button:focus-visible {
	color: #fff;
	background: linear-gradient(135deg, var(--dz-blue), var(--dz-accent));
	filter: brightness(1.15);
}

.dz-challenges .dz-chat__cta { align-self: flex-end; }

/* --- Entrance: bubbles, then the reply, then the button (bubbles.js adds .is-ready and .is-in) ---- */
.dz-challenges.is-ready :is(.dz-bubble, .dz-chat__cta) {
	opacity: 0;
	transform: translateY(14px);
}
.dz-challenges.is-ready :is(.dz-bubble, .dz-chat__cta).is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

/* --- Below 900px: one column: questions, then the reply, then the button ------------------------- */
@media (max-width: 899px) {
	.dz-challenges .dz-chat { flex-direction: column; align-items: stretch; gap: calc(var(--dz-bubble-gap) * 1.75); }
	.dz-challenges .dz-chat__questions { flex: none; }
	.dz-challenges .dz-chat__reply { flex: none; align-items: flex-end; }
	.dz-challenges .dz-bubble { max-width: 92%; }
}
@media (max-width: 767px) {
	.dz-challenges .dz-bubble { padding: 0.875rem 1.25rem; }
	.dz-challenges .dz-chat__cta,
	.dz-challenges .dz-chat__cta .elementor-button { width: 100%; text-align: center; }
	.dz-challenges .dz-chat__cta { align-self: stretch; }
}
/* ==========================================================================
   SECTION: SERVICES ("What we do")
   A label, an H2, one intro sentence, then ONE large rounded panel holding five service columns
   (icon, number, name, list), and a centered button.
   The section has id="services" (header link). Its intro block has id="what-we-do" (hero button).

   ELEMENTOR STRUCTURE (see the Navigator):
     .dz-services               outer container (id "services"), centered column
       .dz-services__head       centered intro block (id "what-we-do")
         .dz-eyebrow            Heading widget: the small label
         .dz-services__title    Heading widget: H2
         .dz-services__intro    Text Editor widget: one sentence
       .dz-services__grid       GRID container = the rounded panel: 5 columns desktop, 3 tablet, 1 mobile
         .dz-service  x 5       one container per service
           .dz-service__icon    Shortcode widget: [dz_icon name="compass"]
           .dz-service__num     Heading widget: 01 ... 05 (accent color)
           .dz-service__title   Heading widget: H3, the service name
           .dz-service__list    Text Editor widget: list(s) of 3-4 items
       .dz-services__cta        Button widget, centered

   HOW TO EDIT
     - Icon: change name="..." in the Shortcode widget. Names: compass, nodes, layers, spark,
       globe, target, cube, bars (defined in inc/icons.php).
     - Number, name, items: click them in the column. In the list each line is an item.
     - Small group labels inside a column (like "Group label" in column 02): in the list widget,
       start the group with a paragraph, then a bullet list. Delete the paragraph if not needed.
     - Columns per device: select .dz-services__grid > Layout > Grid > Columns. The dividers
       assume 5 / 3 / 1 columns; check them if you change those.
     - Colors come from Site Settings > Global Colors (numbers = Accent 1, lines = Border).

   LAYOUT
     Desktop (over 1024px): 5 columns in one row, dividers that fade out at both ends.
     Tablet (768-1024px): 3 columns, then 2 (3 + 2), plain dividers.
     Mobile (under 768px): one column, the services are stacked inside the panel with thin lines.
   ========================================================================== */

.dz-services {
	align-items: center;
	gap: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);   /* space between intro, panel and button */
}

/* Intro: centered, comfortable reading width */
.dz-services .dz-services__head {
	align-items: center;
	gap: var(--dz-space-sm);
	max-width: 44rem;
	padding: 0;
	text-align: center;
}
.dz-services .dz-services__title .elementor-heading-title {
	text-align: center;
	text-wrap: balance;
}
.dz-services .dz-services__intro {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--dz-text-muted);
}
.dz-services .dz-services__intro p { margin: 0; text-wrap: balance; }

/* The panel: one large rounded surface with a soft edge light and a faint violet tint at the top.
   Columns and gaps are set in Elementor (5 / 3 / 1, gap 0). */
.dz-services .dz-services__grid {
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: clamp(0.5rem, 0.2rem + 1.2vw, 1.25rem);
	background:
		radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--dz-accent) 8%, transparent), transparent 70%),
		linear-gradient(180deg, var(--dz-surface), var(--dz-bg));
	border: 1px solid color-mix(in srgb, var(--dz-text) 15%, transparent);
	border-radius: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--dz-text) 10%, transparent),            /* light on the top edge */
		0 2rem 5rem -2.5rem color-mix(in srgb, var(--dz-accent) 35%, transparent);   /* soft colored glow underneath */
}

/* One service column */
.dz-services .dz-service {
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	min-width: 0;
	padding: clamp(1.25rem, 0.6rem + 1.6vw, 2rem) clamp(1rem, 0.2rem + 1.8vw, 1.75rem);
	text-align: left;
}

/* Icon: white line icon at the top of the column, with generous room below it */
.dz-services .dz-service__icon {
	padding-bottom: clamp(1.75rem, 1rem + 2.4vw, 3rem);    /* padding, not margin: Elementor's own widget spacing would override a margin */
	color: var(--dz-text);
}
.dz-services .dz-icon { display: block; line-height: 0; }
.dz-services .dz-icon svg {
	display: block;
	width: clamp(2.5rem, 2.2rem + 0.9vw, 3rem);
	height: auto;
	stroke-width: 1.75;
}

/* The number: small, in the accent color */
.dz-services .dz-service__num .elementor-heading-title {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
	color: var(--dz-accent);
}
/* The name: bold, the strongest text in the column */
.dz-services .dz-service__title { margin-top: 0.5rem; }
.dz-services .dz-service__title .elementor-heading-title {
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--dz-text);
}

/* The list: plain white lines, no bullets, generous spacing. Optional small group labels. */
.dz-services .dz-service__list {
	margin-top: var(--dz-space-md);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.4;
	color: var(--dz-text);
}
.dz-services .dz-service__list ul {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dz-services .dz-service__list li { margin: 0; padding: 0; }
.dz-services .dz-service__list p { margin: 0; }
.dz-services .dz-service__list .dz-service__group {
	margin-bottom: 0.7rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--dz-text-muted);
}
.dz-services .dz-service__list ul + .dz-service__group { margin-top: 1.5rem; }

.dz-services .dz-services__cta { align-self: center; }

/* --- Dividers, per layout ---------------------------------------------------- */

/* Desktop: 5 columns; a thin line between them that fades out at the top and bottom */
@media (min-width: 1025px) {
	.dz-services .dz-service + .dz-service {
		background: linear-gradient(to bottom, transparent, var(--dz-border) 16%, var(--dz-border) 84%, transparent) left top / 1px 100% no-repeat;
	}
}

/* Tablet: 3 columns (3 + 2). Plain lines between columns, and under the first row. */
@media (min-width: 768px) and (max-width: 1024px) {
	.dz-services .dz-service:nth-child(3n+2),
	.dz-services .dz-service:nth-child(3n) { border-inline-start: 1px solid var(--dz-border); }
	.dz-services .dz-service:nth-child(-n+3) { border-bottom: 1px solid var(--dz-border); }
}

/* Mobile: one column inside the panel, a thin line between services */
@media (max-width: 767px) {
	.dz-services .dz-service + .dz-service { border-top: 1px solid var(--dz-border); }
	.dz-services .dz-service { padding: var(--dz-space-lg) var(--dz-space-sm); }
	.dz-services .dz-services__cta,
	.dz-services .dz-services__cta .elementor-button { width: 100%; max-width: 22rem; text-align: center; }
}
/* ==========================================================================
   SECTION: HOW WE HELP ("Why us")
   Four connected stages (Clarify, Create, Activate, Grow) showing where DUZZT & CO can plug in.
   It is NOT a fixed package: a client can start at any stage and use only what they need. The
   intro copy says so.
   The section has id="why-us" (the header's "Why Us" link scrolls here).

   ELEMENTOR STRUCTURE (see the Navigator):
     .dz-journey                outer container (id "why-us"), centered column
       .dz-journey__head        centered intro block
         .dz-eyebrow            Heading widget: the small label
         .dz-journey__title     Heading widget: H2
         .dz-journey__intro     Text Editor widget: two short paragraphs
       .dz-journey__grid        the four stages: a row on desktop, a vertical journey below 900px
         .dz-stage  x 4         one container per stage (also .dz-stage--clarify / create / activate / grow)
           .dz-stage__marker    round marker holding a Shortcode widget: [dz_icon name="focus"]
           .dz-stage__num       Heading widget: 01 ... 04
           .dz-stage__title     Heading widget: H3, the stage name
           .dz-stage__statement Heading widget: the short statement
           .dz-stage__list      Text Editor widget: the capabilities, as a bullet list

   HOW TO EDIT
     - Text: click it. The capabilities are a bullet list: one line per capability.
     - Icon: change name="..." in the marker's Shortcode widget (focus, blocks, signal, ascend, or any
       name in inc/icons.php).
     - Each stage has its own accent color from the global palette (set below, per stage class):
       Clarify = Brand blue, Create = Accent 1 (violet), Activate = Brand magenta, Grow = Highlight (green).

   MOTION: when the section first scrolls into view the stages appear one by one (01 to 04, 150 ms
   apart) and the connecting line draws itself (assets/js/journey.js adds .is-ready and .is-in). Hovering
   a stage brightens it and its line to the next stage; the circles do not move or grow. With "reduce
   motion" (or no JavaScript) everything is visible immediately.
   ========================================================================== */

.dz-journey {
	--dz-marker: 4.5rem;                                   /* size of the round markers */
	--dz-journey-gap: clamp(1.25rem, 0.5rem + 2.5vw, 2.75rem);   /* space between stages */
	align-items: center;
	gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* Intro: centered, comfortable reading width */
.dz-journey .dz-journey__head {
	align-items: center;
	gap: var(--dz-space-sm);
	max-width: 44rem;
	padding: 0;
	text-align: center;
}
.dz-journey .dz-journey__title .elementor-heading-title {
	text-align: center;
	text-wrap: balance;
}
.dz-journey .dz-journey__intro {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--dz-text-muted);
}
.dz-journey .dz-journey__intro p { margin: 0 0 1em; text-wrap: balance; }
.dz-journey .dz-journey__intro p:last-child { margin-bottom: 0; }

/* The four stages: one row, equal columns, limited to the content width */
.dz-journey .dz-journey__grid {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--dz-journey-gap);
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: 0;
}

/* One stage */
.dz-journey .dz-stage {
	--stage: var(--dz-accent);
	--stage-next: var(--dz-accent);
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	align-items: flex-start;
	gap: 0;
	padding: 0;
	text-align: left;
}
.dz-journey .dz-stage--clarify  { --stage: var(--dz-blue);      --stage-next: var(--dz-accent); }
.dz-journey .dz-stage--create   { --stage: var(--dz-accent);    --stage-next: var(--dz-magenta); }
.dz-journey .dz-stage--activate { --stage: var(--dz-magenta);   --stage-next: var(--dz-highlight); }
.dz-journey .dz-stage--grow     { --stage: var(--dz-highlight); }

/* The marker: a round, softly lit disc with a white line icon. It never grows or bounces. */
.dz-journey .dz-stage__marker {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--dz-marker);
	height: var(--dz-marker);
	margin-bottom: 1.5rem;
	padding: 0;
	color: var(--dz-text);
	background: radial-gradient(circle at 50% 50%,
		color-mix(in srgb, var(--stage) 22%, var(--dz-bg)) 0%,
		color-mix(in srgb, var(--stage) 80%, var(--dz-bg)) 100%);
	border-radius: 50%;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--stage) 55%, transparent),
		0 1rem 2.5rem -1rem color-mix(in srgb, var(--stage) 70%, transparent);
	transition: filter 0.3s ease;
}
.dz-journey .dz-stage__marker .elementor-widget-shortcode { width: 46%; }
.dz-journey .dz-stage__marker .dz-icon { display: block; line-height: 0; }
.dz-journey .dz-stage__marker .dz-icon svg { display: block; width: 100%; height: auto; stroke-width: 1.7; }

/* The connecting line: one segment from each marker to the next, drawn behind the text, in the
   colors of the two stages it joins. (::after: Elementor uses ::before for its own backgrounds.) */
.dz-journey .dz-stage:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--dz-marker) / 2 - 1px);
	left: calc(var(--dz-marker) + 0.75rem);
	width: calc(100% + var(--dz-journey-gap) - var(--dz-marker) - 1.5rem);
	height: 2px;
	background: linear-gradient(90deg, var(--stage), var(--stage-next));
	border-radius: 2px;
	opacity: 0.45;
	transform-origin: left center;
	transition: opacity 0.3s ease;
}

/* The number, name, statement and capabilities */
.dz-journey .dz-stage__num .elementor-heading-title {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: var(--stage);
}
.dz-journey .dz-stage__title { margin-top: 0.625rem; }
.dz-journey .dz-stage__title .elementor-heading-title {
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dz-text);
}
.dz-journey .dz-stage__statement { margin-top: 0.5rem; }
.dz-journey .dz-stage__statement .elementor-heading-title {
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--dz-text);
}
.dz-journey .dz-stage__list {
	align-self: stretch;                  /* the hairline above the list spans the whole column, the same in every stage */
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--dz-border);
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
	line-height: 1.4;
	color: var(--dz-text-muted);
	transition: color 0.3s ease;
}
.dz-journey .dz-stage__list ul {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dz-journey .dz-stage__list li {
	position: relative;
	margin: 0;
	padding-inline-start: 1.125rem;
}
.dz-journey .dz-stage__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.62em;
	width: 6px;
	height: 1px;
	background: var(--stage);
}

/* Hover (devices that can hover): the stage and its line to the next one brighten a little.
   Nothing moves or grows. */
@media (hover: hover) {
	.dz-journey .dz-stage:hover .dz-stage__marker { filter: brightness(1.22); }
	.dz-journey .dz-stage:hover::after { opacity: 0.95; }
	.dz-journey .dz-stage:hover .dz-stage__list { color: var(--dz-text); }
}

/* --- Entrance: stages appear one by one, the line draws itself ------------------------------------
   Only after journey.js has prepared the section (.is-ready). Without it, everything is visible. */
.dz-journey.is-ready .dz-stage {
	opacity: 0;
	transform: translateY(14px);
}
.dz-journey.is-ready .dz-stage:not(:last-child)::after { transform: scaleX(0); }
.dz-journey.is-ready .dz-stage.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.dz-journey.is-ready .dz-stage.is-in:not(:last-child)::after {
	transform: scaleX(1);
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s, opacity 0.3s ease;
}

/* --- Below 900px: a vertical connected journey ---------------------------------------------------
   The marker sits on the left, the number, name, statement and capabilities on the right, and the
   line runs down from each marker to the next. Every capability is visible (no hover needed). */
@media (max-width: 899px) {
	.dz-journey { --dz-marker: 3.25rem; --dz-journey-gap: 2.25rem; }

	.dz-journey .dz-journey__grid { flex-direction: column; align-items: stretch; }

	.dz-journey .dz-stage {
		display: grid;
		grid-template-columns: var(--dz-marker) minmax(0, 1fr);
		column-gap: 1.125rem;
		align-items: start;
		flex: none;
	}
	.dz-journey .dz-stage__marker { grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; }
	.dz-journey .dz-stage > :not(.dz-stage__marker) { grid-column: 2; }
	.dz-journey .dz-stage__num { padding-top: 0.25rem; }

	.dz-journey .dz-stage:not(:last-child)::after {
		top: calc(var(--dz-marker) + 0.625rem);
		left: calc(var(--dz-marker) / 2 - 1px);
		width: 2px;
		height: calc(100% + var(--dz-journey-gap) - var(--dz-marker) - 1.25rem);
		background: linear-gradient(180deg, var(--stage), var(--stage-next));
		transform-origin: center top;
	}
	.dz-journey.is-ready .dz-stage:not(:last-child)::after { transform: scaleY(0); }
	.dz-journey.is-ready .dz-stage.is-in:not(:last-child)::after { transform: scaleY(1); }
}

/* Wide vertical layout (tablet): the capabilities use two columns to keep the journey short */
@media (min-width: 600px) and (max-width: 899px) {
	.dz-journey .dz-stage__list ul { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}

@media (max-width: 767px) {
	.dz-journey .dz-stage__list { margin-top: 1rem; padding-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dz-journey .dz-stage__marker,
	.dz-journey .dz-stage::after,
	.dz-journey .dz-stage__list { transition: none; }
}
/* ==========================================================================
   SECTION: RESULTS / CASE STUDIES
   A label, an H2, four result cards, and a "View all case studies" link.
   The section has id="case-studies" (the header's "Case Studies" link scrolls here).

   PLACEHOLDERS: the metrics ("+000%", "-00%"), names and tags are placeholders. Replace them only
   with figures that are verified and can be evidenced.

   ELEMENTOR STRUCTURE (see the Navigator):
     .dz-results                outer container (id "case-studies"), centered column
       .dz-results__head        centered intro block
         .dz-eyebrow            Heading widget: the small label
         .dz-results__title     Heading widget: H2
       .dz-results__grid        GRID container: 4 columns desktop, 2 tablet, 1 mobile
         .dz-result  x 4        one container per card (also has .dz-card)
           .dz-result__logo     gray box holding an Image widget
           .dz-result__metric   Heading widget: the big figure, e.g. +000%
           .dz-result__name     Heading widget: what the figure measures
           .dz-result__tags     row with two .dz-tag Heading widgets (Industry, Stage)
       .dz-results__more        Button widget: the "View all case studies" link

   HOW TO EDIT
     - Text: click it. To add a card, duplicate a .dz-result container.
     - Logo: click the gray box, then in the left panel click Choose Image and upload the logo. The
       gray box disappears and the logo is shown in grayscale.
     - Columns per device: select .dz-results__grid > Layout > Grid > Columns.
     - Card look comes from .dz-card (10-base.css); the hover effect is below.
   ========================================================================== */

.dz-results {
	align-items: center;
	gap: clamp(2.5rem, 1.5rem + 3.5vw, 4rem);   /* space between intro, grid and link */
}

/* Intro: centered */
.dz-results .dz-results__head {
	align-items: center;
	gap: var(--dz-space-sm);
	max-width: 44rem;
	padding: 0;
	text-align: center;
}
.dz-results .dz-results__title .elementor-heading-title {
	text-align: center;
	text-wrap: balance;
}

/* Grid: content width. Columns and gaps are set in Elementor (4 / 2 / 1). */
.dz-results .dz-results__grid {
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: 0;
}

/* One card */
.dz-results .dz-result {
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--dz-space-xs);
	min-width: 0;
	padding: var(--dz-space-lg);
	border-radius: var(--dz-radius-lg);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Hover: slight lift and an accent-colored border (only on devices that really hover) */
@media (hover: hover) {
	.dz-results .dz-result:hover {
		transform: translateY(-4px);
		border-color: color-mix(in srgb, var(--dz-accent) 65%, var(--dz-border));
		box-shadow: var(--dz-shadow-md);
	}
}
@media (prefers-reduced-motion: reduce) {
	.dz-results .dz-result:hover { transform: none; }
}

/* Client logo: an Image widget in a small box. Empty = dark gray box with Elementor's placeholder picture
   toned down; a real logo is shown at its own proportions in grayscale. */
.dz-results .dz-result__logo {
	--dz-result-logo-h: 2.5rem;
	display: flex;
	flex-direction: row;               /* Elementor stacks children by default; a row lets align-items center them vertically */
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: var(--dz-result-logo-h);
	margin-bottom: var(--dz-space-lg);
	padding: 0;
}
.dz-results .dz-result__logo:not(:has(img:not([src*="/images/placeholder"]))) {
	width: 7.5rem;
	background: var(--dz-border);
	border-radius: var(--dz-radius-sm);
	overflow: hidden;
}
.dz-results .dz-result__logo .elementor-widget-image { height: 100%; }
.dz-results .dz-result__logo:not(:has(img:not([src*="/images/placeholder"]))) .elementor-widget-image { width: 100%; }
.dz-results .dz-result__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--dz-result-logo-h);
	object-fit: contain;
	object-position: left center;
	opacity: 0.75;
	border-radius: var(--dz-radius-sm);
	filter: grayscale(1);   /* the logo keeps its picture and loses its color; use none for full color */
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.dz-results .dz-result__logo img[src*="/images/placeholder"] {
	width: 100%;
	object-fit: cover;
	opacity: 0.12;
	filter: none;
}

/* On hover (desktop: devices that can hover) the card's logo shows its real colors */
@media (hover: hover) {
	.dz-results .dz-result:hover .dz-result__logo img:not([src*="/images/placeholder"]) { filter: none; opacity: 1; }
}

/* The big figure, in the accent color */
.dz-results .dz-result__metric .elementor-heading-title {
	font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--dz-accent);
}
/* What the figure measures */
.dz-results .dz-result__name .elementor-heading-title {
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--dz-text-muted);
}

/* Tags: two small pills, kept at the bottom of the card so all cards line up */
.dz-results .dz-result__tags {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
	padding: var(--dz-space-lg) 0 0;
}
.dz-results .dz-tag .elementor-heading-title {
	padding: 0.3rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--dz-text-muted);
	border: 1px solid var(--dz-border);
	border-radius: var(--dz-radius-pill);
}

/* "View all case studies": a text link with an arrow, centered */
.dz-results .dz-results__more { align-self: center; }
.dz-results .elementor-widget-button.dz-results__more .elementor-button {
	padding: 0.25rem 0;
	font-size: 1rem;
	font-weight: 600;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--dz-text);
}
.dz-results .dz-results__more .elementor-button-text::after {
	content: "\2192";                  /* right arrow */
	display: inline-block;
	margin-inline-start: 0.5rem;
	transition: transform 0.2s ease;
}
.dz-results .elementor-widget-button.dz-results__more .elementor-button:hover,
.dz-results .elementor-widget-button.dz-results__more .elementor-button:focus-visible {
	background: transparent;
	color: var(--dz-accent-2);
}
.dz-results .dz-results__more .elementor-button:hover .elementor-button-text::after { transform: translateX(4px); }
/* ==========================================================================
   SECTION: TEAM
   A label, an H2, a short paragraph, eight team member cards, and a button.
   The section has id="team" (the header's "Team" link scrolls here).

   PLACEHOLDERS: names, roles and the gray image boxes are placeholders. No real people are shown.

   ELEMENTOR STRUCTURE (see the Navigator):
     .dz-team                   outer container (id "team"), centered column
       .dz-team__head           centered intro block
         .dz-eyebrow            Heading widget: the small label
         .dz-team__title        Heading widget: H2
         .dz-team__intro        Text Editor widget: a short paragraph
       .dz-team__grid           wrapping row of member cards: 4 per row desktop, 3 tablet, 2 mobile
         .dz-member  x 8        one container per person
           .dz-member__photo    square image box holding an Image widget
           .dz-member__name     Heading widget: "Team member name"
           .dz-member__role     Heading widget: "Role title"
       .dz-team__cta            Button widget, centered

   HOW TO EDIT
     - Name and role: click them. To add a person, duplicate a .dz-member container.
     - Photo: click the gray square, then in the left panel click Choose Image and upload the photo.
       The photo fills the square (cropped from the center) and zooms slightly on hover.
       Use square-ish photos, at least 600px wide.
     - Columns per screen size: change --dz-team-cols in the three places marked below. The row
       wraps and centers, so a last row with fewer people stays centered.
   ========================================================================== */

.dz-team {
	--dz-team-cols: 4;                            /* people per row: desktop */
	--dz-team-photo: 72%;                         /* size of the photo square, as a share of the column width */
	--dz-team-gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
	align-items: center;
	gap: clamp(2.5rem, 1.5rem + 3.5vw, 4rem);     /* space between intro, people and button */
}

/* Intro: centered */
.dz-team .dz-team__head {
	align-items: center;
	gap: var(--dz-space-sm);
	max-width: 44rem;
	padding: 0;
	text-align: center;
}
.dz-team .dz-team__title .elementor-heading-title {
	text-align: center;
	text-wrap: balance;
}
.dz-team .dz-team__intro {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--dz-text-muted);
}
.dz-team .dz-team__intro p { margin: 0; text-wrap: balance; }

/* The people: a wrapping row, centered, so an incomplete last row stays centered too */
.dz-team .dz-team__grid {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: calc(var(--dz-team-gap) * 1.5) var(--dz-team-gap);
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: 0;
}
.dz-team .dz-member {
	--dz-member-w: calc((100% - (var(--dz-team-cols) - 1) * var(--dz-team-gap)) / var(--dz-team-cols));
	flex: 0 0 var(--dz-member-w);
	width: var(--dz-member-w);
	--width: var(--dz-member-w);
	min-width: 0;
	align-items: center;
	gap: 0;
	padding: 0;
	text-align: center;
}

/* The image box: square, rounded. Gray placeholder until a photo is added. */
.dz-team .dz-member__photo {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--dz-team-photo);          /* smaller than the column, centered above the name */
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--dz-space-md);
	padding: 0;
	overflow: hidden;
	background: linear-gradient(160deg, color-mix(in srgb, var(--dz-text) 9%, var(--dz-border)), var(--dz-border));
	border-radius: var(--dz-radius-md);
}
/* Placeholder: a soft person outline in the middle */
.dz-team .dz-member__photo .elementor-widget-shortcode { width: 42%; }
.dz-team .dz-member__photo .dz-icon {
	color: color-mix(in srgb, var(--dz-text) 30%, transparent);
	transition: transform 0.5s ease;
}
.dz-team .dz-member__photo .dz-icon svg { width: 100%; height: auto; stroke-width: 1.4; }

/* The Image widget: empty = Elementor's placeholder picture, toned down over the gray gradient;
   with a photo it fills the square from the center. */
.dz-team .dz-member__photo .elementor-widget-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.dz-team .dz-member__photo img[src*="/images/placeholder"] { opacity: 0.12; }
.dz-team .dz-member__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

/* Hover: the picture zooms in slightly and an accent-colored veil fades in at the bottom.
   (The veil sits on ::after; Elementor uses ::before for its own backgrounds.) */
.dz-team .dz-member__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--dz-accent) 45%, transparent));
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
@media (hover: hover) {
	.dz-team .dz-member:hover .dz-member__photo img { transform: scale(1.06); }
	.dz-team .dz-member:hover .dz-member__photo .dz-icon { transform: scale(1.08); }
	.dz-team .dz-member:hover .dz-member__photo::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.dz-team .dz-member:hover .dz-member__photo img,
	.dz-team .dz-member:hover .dz-member__photo .dz-icon { transform: none; }
}

/* Name and role */
.dz-team .dz-member__name .elementor-heading-title {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--dz-text);
}
.dz-team .dz-member__role { margin-top: 0.25rem; }
.dz-team .dz-member__role .elementor-heading-title {
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--dz-text-muted);
}

.dz-team .dz-team__cta { align-self: center; }

/* --- Columns per screen size --------------------------------------------------- */
@media (max-width: 1024px) { .dz-team { --dz-team-cols: 3; } }   /* tablet */
@media (max-width: 767px) {                                       /* mobile */
	.dz-team { --dz-team-cols: 2; }
	.dz-team .dz-team__cta,
	.dz-team .dz-team__cta .elementor-button { width: 100%; max-width: 22rem; text-align: center; }
}
/* ==========================================================================
   SECTION: CONTACT ("Let's talk about your goals")
   A heading, one supporting sentence, and the contact form in a rounded panel.
   The section has id="contact": every "Book a call" / "Start a Conversation" button scrolls here.

   THE FORM is a Fluent Forms form called "Contact form". Edit it in the dashboard:
     Fluent Forms > All Forms > Contact form
       - fields and their labels / placeholders:        Editor
       - error messages (each field has its own):       click a field > Validation Rules
       - success message and where emails go:           Settings & Integrations
       - submissions:                                   Entries
     Spam protection: a honeypot (a hidden field only bots fill in) is switched on in
     Fluent Forms > Global Settings > Security.
   This file only styles the form so it matches the site (dark inputs, violet focus, red errors).

   ELEMENTOR STRUCTURE (see the Navigator):
     .dz-contact                outer container (id "contact"), centered column
       .dz-contact__head        centered intro block
         .dz-contact__title     Heading widget: H2
         .dz-contact__intro     Text Editor widget: one sentence
       .dz-contact__panel       the rounded panel
         .dz-contact__form      Shortcode widget: [dz_contact_form] (finds the form by its title)
   ========================================================================== */

.dz-contact {
	align-items: center;
	gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

/* Intro */
.dz-contact .dz-contact__head {
	align-items: center;
	gap: var(--dz-space-sm);
	max-width: 40rem;
	padding: 0;
	text-align: center;
}
.dz-contact .dz-contact__title .elementor-heading-title { text-align: center; text-wrap: balance; }
.dz-contact .dz-contact__intro {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--dz-text-muted);
}
.dz-contact .dz-contact__intro p { margin: 0; text-wrap: balance; }

/* The panel: same family as the services panel (soft edge light, faint violet tint) */
.dz-contact .dz-contact__panel {
	width: 100%;
	max-width: 40rem;
	margin-inline: auto;
	padding: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);
	background:
		radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--dz-accent) 8%, transparent), transparent 70%),
		linear-gradient(180deg, var(--dz-surface), var(--dz-bg));
	border: 1px solid color-mix(in srgb, var(--dz-text) 15%, transparent);
	border-radius: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dz-text) 10%, transparent);
}
.dz-contact .dz-contact__form { width: 100%; }

/* --- The form (Fluent Forms markup) ------------------------------------------- */
.dz-contact .fluentform .ff-el-group { margin-bottom: 1.25rem; }

.dz-contact .fluentform .ff-el-input--label label {
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--dz-text);
}
/* the "required" asterisk */
.dz-contact .fluentform .ff-el-is-required.asterisk-right label::after { color: var(--dz-error); }

.dz-contact .fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.8125rem 1rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--dz-text);
	background: color-mix(in srgb, var(--dz-bg) 65%, var(--dz-surface));
	border: 1px solid color-mix(in srgb, var(--dz-text) 16%, transparent);
	border-radius: 0.75rem;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dz-contact .fluentform textarea.ff-el-form-control { min-height: 9rem; resize: vertical; }
.dz-contact .fluentform .ff-el-form-control::placeholder { color: var(--dz-text-muted); opacity: 0.8; }
.dz-contact .fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--dz-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dz-accent) 28%, transparent);
}

/* Errors: red border and a clear message under the field */
.dz-contact .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--dz-error); }
.dz-contact .fluentform .ff-el-is-error .ff-el-form-control:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dz-error) 28%, transparent);
}
.dz-contact .fluentform .error,
.dz-contact .fluentform .text-danger {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--dz-error);
}

/* The button: same look as the site's primary button (a light pill) */
.dz-contact .fluentform .ff_submit_btn_wrapper { margin: 0.5rem 0 0; text-align: center; }
.dz-contact .fluentform .ff-btn-submit {
	padding: 0.8125rem 1.75rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--dz-bg);
	background: var(--dz-text);
	border: 0;
	border-radius: var(--dz-radius-pill);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.dz-contact .fluentform .ff-btn-submit:hover,
.dz-contact .fluentform .ff-btn-submit:focus-visible {
	color: var(--dz-bg);
	background: var(--dz-accent-2);
	opacity: 1;
}
.dz-contact .fluentform .ff-btn-submit:disabled,
.dz-contact .fluentform .ff-btn-submit.disabled { opacity: 0.6; cursor: progress; }

/* Success and general error messages */
.dz-contact .fluentform_wrapper_3 .ff-message-success,
.dz-contact .ff-message-success {
	margin: 0;
	padding: 1.25rem 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	text-align: center;
	color: var(--dz-text);
	background: color-mix(in srgb, var(--dz-highlight) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--dz-highlight) 45%, transparent);
	border-radius: 0.75rem;
	box-shadow: none;
}
.dz-contact .ff-errors-in-stack,
.dz-contact .ff-message-error {
	margin: 0 0 1rem;
	padding: 0.875rem 1.25rem;
	font-size: 0.9375rem;
	color: var(--dz-text);
	background: color-mix(in srgb, var(--dz-error) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--dz-error) 45%, transparent);
	border-radius: 0.75rem;
}

@media (max-width: 767px) {
	.dz-contact .fluentform .ff-btn-submit { width: 100%; }
}
/* ==========================================================================
   FOOTER
   Logo, contact email and address, three social icons, and the copyright: one row on desktop,
   stacked and centered below 900px. It is printed at the end of every page.

   WHERE TO EDIT: Templates > Saved Templates > "Site Footer" > Edit with Elementor.
     - Email and address: the "Email and address" text widget.
     - Social links: the "Social links" Shortcode widget, e.g.
       [dz_social linkedin="https://..." instagram="https://..." x="https://..."]
       (leave a network out to hide it; "#" is a placeholder)
     - Copyright: the "Copyright" text widget.
     - Logo: the same white logo as the header (assets/img/duzzt-logo-white.svg).

   ELEMENTOR STRUCTURE (see the Navigator):
     .dz-site-footer            wrapper printed by functions.php
       .dz-footer               <footer> container
         .dz-footer__inner      the row
           .dz-footer__logo     Shortcode widget [dz_logo]
           .dz-footer__contact  Text Editor: email and address
           .dz-footer__social   Shortcode widget [dz_social ...]
           .dz-footer__copy     Text Editor: the copyright line
   ========================================================================== */

.dz-footer {
	width: 100%;
	padding: var(--dz-space-xl) var(--dz-gutter);
	border-top: 1px solid var(--dz-border);
}

.dz-footer .dz-footer__inner {
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dz-space-lg);
	width: 100%;
	max-width: var(--dz-container-w);
	margin-inline: auto;
	padding: 0;
}

/* Logo */
.dz-footer .dz-footer__logo a { display: inline-block; line-height: 0; }
.dz-footer .dz-footer__logo img {
	display: block;
	width: auto;
	max-width: none;
	height: 44px;
}

/* Email and address */
.dz-footer .dz-footer__contact {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--dz-text-muted);
}
.dz-footer .dz-footer__contact p { margin: 0; }
.dz-footer .dz-footer__contact a { color: var(--dz-text); text-decoration: none; transition: color 0.2s ease; }
.dz-footer .dz-footer__contact a:hover,
.dz-footer .dz-footer__contact a:focus-visible { color: var(--dz-accent-2); }

/* Social icons: three round outline buttons */
.dz-footer .dz-social {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dz-footer .dz-social li { margin: 0; padding: 0; }
.dz-footer .dz-social__link {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--dz-text);
	border: 1px solid var(--dz-border);
	border-radius: 50%;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dz-footer .dz-social__link .dz-icon { width: 1.125rem; }
.dz-footer .dz-social__link .dz-icon svg { width: 100%; height: auto; stroke-width: 2; }
.dz-footer .dz-social__link:hover,
.dz-footer .dz-social__link:focus-visible {
	color: var(--dz-accent-2);
	border-color: var(--dz-accent-2);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.dz-footer .dz-social__link:hover { transform: translateY(-2px); }
}

/* Copyright */
.dz-footer .dz-footer__copy {
	font-size: 0.875rem;
	color: var(--dz-text-muted);
}
.dz-footer .dz-footer__copy p { margin: 0; }

/* Narrow screens: stacked and centered */
@media (max-width: 899px) {
	.dz-footer { padding-block: var(--dz-space-lg); }
	.dz-footer .dz-footer__inner {
		flex-direction: column;
		justify-content: center;
		gap: var(--dz-space-md);
		text-align: center;
	}
	.dz-footer .dz-footer__contact,
	.dz-footer .dz-footer__copy { text-align: center; }
	.dz-footer .dz-social { justify-content: center; }
}
/* ==========================================================================
   VERTICAL RHYTHM (the one place for spacing between and inside sections)
   Loaded last, so it wins over the per-section files. It only changes vertical spacing and where
   anchor links land. Values come from the variables in 00-tokens.css:
     --section-space-xl / -lg / -md / -sm   space between chapters (scaled on tablet and phone)
     --section-heading-gap                  heading block -> the component under it
     --content-gap                          component -> its button or link

   HOW THE GAPS WORK: the space between two chapters is the top padding of the second one (the first
   has no bottom padding), so it is exactly one value and never doubles. Change a chapter's gap by
   changing its --pt below.

   THE GAPS (desktop, 1440px wide):
     slider -> statistics      ~72px   (--section-space-sm, the statistics' top padding; 56px on phones)
     statistics -> separator   ~72px   (--section-space-sm), then ~100px to the next chapter
     statistics -> Challenges  ~172px  (--section-space-xl)
     every chapter -> the next ~172px  (Challenges, Services, Why us, Results, Team, Contact)
     Contact -> footer         ~130px  (--section-space-lg)
     eyebrow -> title 22px, title -> intro 28px
     heading block -> component: --section-heading-gap x (1.0 to 1.4 depending on the section)
     component -> button or link: --content-gap x (1.3 or 1.6)
   ========================================================================== */

/* --- Chapters: padding-top is the gap before them; no bottom padding ------------------------------- */
.dz-section {
	--pt: var(--section-space-xl);
	--pb: 0px;
	--gap-head: var(--section-heading-gap);
	--gap-cta: calc(var(--content-gap) * 1.3);
	padding-block: var(--pt) var(--pb);
}
.dz-section.dz-stats     { --pt: min(var(--section-space-sm), 80px); }    /* slider -> statistics: 64-80px desktop, 56px phone */
.dz-section.dz-contact   { --pb: var(--section-space-lg); }               /* space before the footer */
.dz-section.dz-challenges {
	--gap-head: calc(var(--section-heading-gap) * 1.1);
	/* The statistics now end with their separator line, so the chapter gap after the numbers is split in two:
	   numbers -> line (--section-space-sm) and line -> here. The total is unchanged. */
	--pt: calc(var(--section-space-xl) - var(--section-space-sm) - 1px);
}
.dz-section.dz-team       { --gap-head: calc(var(--section-heading-gap) * 1.1); --gap-cta: calc(var(--content-gap) * 1.6); }
.dz-section.dz-journey    { --gap-head: calc(var(--section-heading-gap) * 1.4); --gap-cta: calc(var(--content-gap) * 1.6); }

/* Inside a chapter: components are --gap-cta apart; the heading block adds the rest of --gap-head */
.dz-section:is(.dz-challenges, .dz-services, .dz-journey, .dz-results, .dz-team, .dz-contact) { row-gap: var(--gap-cta); }
.dz-section [class*="__head"] {
	gap: 22px;                                                            /* eyebrow -> title (18-24px) */
	margin-bottom: calc(var(--gap-head) - var(--gap-cta));
}
.dz-section [class*="__intro"] { margin-top: 6px; }                       /* title -> intro = 22 + 6 = 28px */

/* Statistics: numbers, then the separator line --section-space-sm below them */
.dz-section.dz-stats { row-gap: var(--section-space-sm); }

/* --- Hero: about 80-88vh, tight bottom edge that holds the capability strip -------------------------- */
.dz-section.dz-hero {
	--hero-pt: clamp(28px, 2.2vw, 32px);
	--hero-pb: 0px;                                                       /* the gap under the slider is the statistics' top padding */
	padding-block: var(--hero-pt) var(--hero-pb);
	gap: clamp(28px, 2.2vw, 32px);                                          /* buttons/visual -> capability strip */
}
/* Capability strip: compact */
.dz-hero .dz-logos { padding-top: 28px; padding-bottom: 0; }

/* --- Footer ----------------------------------------------------------------------------------------- */
.dz-site-footer .dz-footer { padding-block: var(--section-space-sm) 56px; }
@media (max-width: 767px) { .dz-site-footer .dz-footer { padding-bottom: 48px; } }

/* --- Anchor links land with the chapter's first line just under the sticky header ---------------------
   scroll-margin-top = header height + 48px, minus the chapter's own top padding (so the empty gap above
   the heading is not scrolled through). CSS only: no JavaScript, no pixel offsets.
   Why 48px and not 24-32px: the header slims by about 24px as soon as scrolling starts, which pulls the
   page up by 24px after the browser has worked out where to stop. So a link clicked from the top of the
   page ends with the heading about 24px below the header, and a link clicked from further down (the
   header is already slim) ends about 48px below it. */
.dz-section[id] { scroll-margin-top: calc(var(--dz-header-h) + 48px - var(--pt)); }
[id="what-we-do"] { scroll-margin-top: calc(var(--dz-header-h) + 48px); }   /* the Services intro block, target of the hero button */