/* ══════════════════════════════════════════════════════════════════════════
   Design tokens as a site-wide fallback.

   The canonical source is the Elementor kit (12 global variables), but the
   kit's CSS is only enqueued on Elementor-built documents — on a plain
   Gutenberg page every var(--dlys-*) resolved to nothing. Declaring them
   here too makes the design system builder-agnostic. Values are identical,
   and this file loads BEFORE the kit, so on Elementor pages the kit still
   wins; nothing changes visually there.
   ══════════════════════════════════════════════════════════════════════ */
:root {
	--dlys-bg: #f2f2f3;
	--dlys-surface: #e9e9ea;
	--dlys-text: #1d1f20;
	--dlys-divider: rgba(29, 31, 32, 0.16);
	--dlys-accent: #5980a6;
	--dlys-accent-300: #b5d9fd;
	--dlys-accent-600: #597ea3;
	--dlys-accent-700: #416180;
	--dlys-accent-800: #2c455d;
	--dlys-accent-900: #1d2d3d;
	--dlys-heading: "Barlow Condensed", system-ui, sans-serif;
	--dlys-body: "Barlow", system-ui, sans-serif;
}

/* DLYS design system — only what Stackable block attributes cannot express.
   Source of truth: design-source/styles.css + design-source/DLYSHomeA.dc.html

   Blocksy palette mapping (set in theme_mods_blocksy):
     color-1 accent #5980a6   color-2 accent-700 #416180   color-3 muted #838484
     color-4 text   #1d1f20   color-5 divider    #dbdbdb   color-6 surface #e9e9ea
     color-7 bg     #f2f2f3   color-8 white      #ffffff                        */

/* — section shell: design container is 1200px, narrower than Blocksy's wide — */
.dlys-section > .stk-row {
	max-width: 1200px;
	margin-inline: auto;
}

/* — kicker: "NN · Label" — */
.dlys-kicker .stk-block-subtitle__text {
	letter-spacing: 0.08em;
	line-height: 1.4;
}

/* — section headings and body copy — */
.dlys-h2 .stk-block-heading__text {
	line-height: 1.02;
	letter-spacing: 0.005em;
}
.dlys-body .stk-block-text__text {
	line-height: 1.65;
	max-width: 54ch;
}

/* — hero — */
.dlys-hero__title .stk-block-heading__text {
	line-height: 0.98;
	letter-spacing: 0.005em;
	max-width: 18ch;
}
.dlys-hero__title .stk-block-heading__text mark {
	background: transparent;
}

.dlys-hero__row {
	border-color: var(--theme-palette-color-5);
}
.dlys-hero__row > .stk-row {
	--stk-column-gap: 64px;
	column-gap: 64px;
	row-gap: 32px;
}
.dlys-hero__lead .stk-block-text__text {
	line-height: 1.55;
	max-width: 52ch;
}

/* — 02 Problem — */
.dlys-problem {
	border-color: var(--theme-palette-color-5);
	background: var(--theme-palette-color-6);
}
.dlys-problem > .stk-row {
	--stk-column-gap: clamp(32px, 6vw, 96px);
	column-gap: clamp(32px, 6vw, 96px);
	row-gap: 48px;
}

/* — blueprint box: the design's .blueprint wrapper — square corners, one
   hairline, no shadow. Worn by media frames and pillar cards alike. — */
.stk-block-column.dlys-blueprint {
	position: relative;
	border: 1px solid var(--theme-palette-color-5);
}

/* media frame: a blueprint box holding an image slot */
.stk-block-column.dlys-frame {
	aspect-ratio: 4 / 3;
	background: var(--theme-palette-color-7);
}

/* — 03 Value — */
.dlys-value__title .stk-block-heading__text {
	max-width: 18ch;
}
.dlys-value__intro .stk-block-text__text {
	line-height: 1.65;
	max-width: 62ch;
	color: color-mix(in srgb, var(--theme-palette-color-4) 82%, transparent);
}
.dlys-value__cards > .stk-row {
	--stk-column-gap: 32px;
	column-gap: 32px;
	row-gap: 32px;
}
.dlys-card > .stk-column-wrapper {
	padding: 28px;
}
.dlys-card__body .stk-block-text__text {
	line-height: 1.6;
	color: color-mix(in srgb, var(--theme-palette-color-4) 80%, transparent);
}
.dlys-card__title .stk-block-heading__text {
	line-height: 1.05;
	letter-spacing: 0.01em;
}

/* — buttons: radius 0, 1px lines, no shadows/gradients —
   Stackable paints the button from --stk-button-* variables, and Blocksy's
   stackable.min.css binds those to its own theme button colors from a
   zero-specificity :where(...) .stk-block-button rule that loads after this
   file. Pairing .stk-block-button with our own class outranks it on
   specificity, so the design wins without !important. */
.dlys-actions .stk-button-group {
	gap: 14px;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.stk-block-button.dlys-btn {
	width: max-content;
	max-width: 100%;
	--stk-button-padding: 14px 22px;
	--stk-button-background-color: transparent;
	--stk-button-text-color: var(--theme-palette-color-4);
	--stk-button-border-radius: 0;
	--stk-button-min-height: 0;
}
.stk-block-button.dlys-btn .stk-button {
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 0;
	font-size: 17px;
	line-height: 1.2;
	color: var(--theme-palette-color-4);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.stk-block-button.dlys-btn--primary {
	--stk-button-background-color: var(--theme-palette-color-1);
	--stk-button-text-color: var(--theme-palette-color-7);
}
.stk-block-button.dlys-btn--primary .stk-button {
	border-color: var(--theme-palette-color-1);
	color: var(--theme-palette-color-7);
}
.stk-block-button.dlys-btn--primary .stk-button:hover {
	--stk-button-background-color: var(--theme-palette-color-2);
	border-color: var(--theme-palette-color-2);
}
.stk-block-button.dlys-btn--secondary .stk-button:hover {
	--stk-button-background-color: color-mix(in srgb, var(--theme-palette-color-4) 7%, transparent);
}

/* — 04 Services — */
.dlys-services {
	border-color: var(--theme-palette-color-5);
}
/* the list's top rule is the design's heavier ink line, not a divider; width
   comes from the block's own border attributes, this only colours it. Paired
   with .stk-block-columns so it outranks Stackable's own border reset. */
.stk-block-columns.dlys-services__list {
	border-color: var(--theme-palette-color-4);
}
.dlys-services__list > .stk-row {
	--stk-column-gap: 0px;
	column-gap: 0;
	row-gap: 0;
}
.stk-block-column.dlys-service {
	border-bottom: 1px solid var(--theme-palette-color-5);
}
/* the item's own column, not the nested num/tag row, becomes the flex column
   that lets the CTA sit on the bottom edge */
.dlys-service > .stk-column-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px 28px 36px 0;
}
.dlys-service > .stk-column-wrapper > .stk-block-content.stk-inner-blocks {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.dlys-service__meta .stk-inner-blocks {
	align-items: baseline;
	gap: 12px;
}
.dlys-service__tag .stk-block-subtitle__text {
	letter-spacing: 0.08em;
	color: color-mix(in srgb, var(--theme-palette-color-4) 70%, transparent);
}
.dlys-service__title .stk-block-heading__text {
	line-height: 1;
	letter-spacing: 0.01em;
}
.dlys-service__body .stk-block-text__text {
	line-height: 1.6;
	max-width: 36ch;
	color: color-mix(in srgb, var(--theme-palette-color-4) 80%, transparent);
}

/* text-link CTA: a rule under the label, no button chrome */
.dlys-textlink {
	margin-top: auto;
	align-self: flex-start;
}
.stk-block-button.dlys-textlink {
	--stk-button-background-color: transparent;
	/* the label span takes its colour from this variable, which Blocksy binds
	   to its own button ink (white) — set it, or the link renders invisible */
	--stk-button-text-color: var(--theme-palette-color-2);
	--stk-button-padding: 8px 0 0;
}
.stk-block-button.dlys-textlink .stk-button {
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	font-size: 17px;
	color: var(--theme-palette-color-2);
}
.stk-block-button.dlys-textlink .stk-button:hover {
	--stk-button-text-color: #1d2d3d;
	color: #1d2d3d;
}

/* — 05 GEO spotlight — the one inverted section.
   Its ground and kicker are accent-900 / accent-300: ramp steps the design uses
   here only, so they live as local variables rather than taking palette slots.
   Rules on the dark ground are the ink at 28%, per the design's geoRule. */
.dlys-geo {
	--dlys-geo-bg: #1d2d3d;
	--dlys-geo-ink: var(--theme-palette-color-7);
	--dlys-geo-kicker: #b5d9fd;
	--dlys-geo-rule: color-mix(in srgb, #f2f2f3 28%, transparent);
	background: var(--dlys-geo-bg);
	color: var(--dlys-geo-ink);
}
.dlys-geo > .stk-row {
	--stk-column-gap: clamp(32px, 6vw, 96px);
	column-gap: clamp(32px, 6vw, 96px);
	row-gap: 56px;
}
.dlys-geo__title .stk-block-heading__text {
	line-height: 1;
	letter-spacing: 0.005em;
}
.dlys-geo__body .stk-block-text__text {
	line-height: 1.65;
	max-width: 56ch;
}

/* blueprint boxes on the dark ground take the inverted rule colour */
.dlys-geo .stk-block-column.dlys-blueprint {
	border-color: var(--dlys-geo-rule);
}

/* inverted primary button: the page ground becomes the fill */
.stk-block-button.dlys-btn--invert {
	--stk-button-background-color: var(--theme-palette-color-7);
	--stk-button-text-color: #1d2d3d;
}
.stk-block-button.dlys-btn--invert .stk-button {
	border-color: var(--theme-palette-color-7);
	color: #1d2d3d;
}
.stk-block-button.dlys-btn--invert .stk-button:hover {
	--stk-button-background-color: color-mix(in srgb, var(--theme-palette-color-7) 88%, #1d2d3d);
	border-color: color-mix(in srgb, var(--theme-palette-color-7) 88%, #1d2d3d);
}

/* the metrics panel: header bands, engine chips, and metric rows */
.dlys-geo__panel > .stk-column-wrapper {
	padding: 0;
}
.dlys-geo__head .stk-block-subtitle__text {
	letter-spacing: 0.08em;
	line-height: 1.4;
}
.dlys-geo__head {
	padding: 14px 24px;
}
.stk-block.dlys-geo__head {
	border-bottom: 1px solid var(--dlys-geo-rule);
}
.stk-block.dlys-geo__head--measure {
	border-top: 1px solid var(--dlys-geo-rule);
}
.dlys-geo__chips {
	padding: 20px 24px;
}
.dlys-geo__chips .stk--block-horizontal-flex {
	gap: 10px;
	justify-content: flex-start;
}
.dlys-geo__chip .stk-block-subtitle__text {
	padding: 6px 12px;
	border: 1px solid var(--dlys-geo-rule);
}
.dlys-geo__metric {
	padding: 18px 24px;
}
.stk-block.dlys-geo__metric {
	border-bottom: 1px solid var(--dlys-geo-rule);
}
.stk-block.dlys-geo__metric:last-child {
	border-bottom: 0;
}
.dlys-geo__metric .stk--block-horizontal-flex {
	gap: 20px;
	align-items: baseline;
	justify-content: flex-start;
}
/* the number column is a fixed 2ch gutter — never let flex squeeze it */
.dlys-geo__metric-num {
	flex: none;
}
.dlys-geo__metric-num .stk-block-subtitle__text {
	letter-spacing: 0.08em;
	/* a fixed 2ch gutter keeps every label on the same line; nowrap lets the
	   tracking spill the last pixels into the 20px gap instead of wrapping */
	width: 2ch;
	white-space: nowrap;
}
.dlys-geo__metric-label .stk-block-heading__text {
	letter-spacing: 0.01em;
	line-height: 1.2;
}

/* — 06 Method — */
.dlys-method__intro > .stk-row {
	--stk-column-gap: clamp(32px, 6vw, 96px);
	column-gap: clamp(32px, 6vw, 96px);
	row-gap: 24px;
	align-items: flex-end;
}
.dlys-method__lede .stk-block-text__text {
	line-height: 1.65;
	max-width: 52ch;
	color: color-mix(in srgb, var(--theme-palette-color-4) 82%, transparent);
}

/* the frameworks panel: a header band over three framework rows */
.dlys-method__panel > .stk-column-wrapper {
	padding: 0;
}
.stk-block-columns.dlys-method__head,
.stk-block-columns.dlys-method__row {
	border-color: var(--theme-palette-color-5);
}
.dlys-method__head .stk--block-horizontal-flex {
	align-items: stretch;
}
.dlys-method__head-cell .stk-block-subtitle__text {
	padding: 14px 24px;
	letter-spacing: 0.08em;
	line-height: 1.4;
}
.dlys-method__head-main {
	flex: 1;
	min-width: 16ch;
}
.stk-block.dlys-method__head-meta {
	border-left: 1px solid var(--theme-palette-color-5);
}
.dlys-method__head-meta .stk-block-subtitle__text {
	color: color-mix(in srgb, var(--theme-palette-color-4) 70%, transparent);
}
.dlys-method__row > .stk-row {
	--stk-column-gap: 32px;
	column-gap: 32px;
	row-gap: 8px;
	align-items: baseline;
}
.dlys-method__label .stk--block-horizontal-flex {
	gap: 20px;
	align-items: baseline;
}
.dlys-method__num {
	flex: none;
}
.dlys-method__num .stk-block-subtitle__text {
	letter-spacing: 0.08em;
}
.dlys-method__title .stk-block-heading__text {
	line-height: 1.05;
	letter-spacing: 0.01em;
}
.dlys-method__body .stk-block-text__text {
	line-height: 1.6;
	color: color-mix(in srgb, var(--theme-palette-color-4) 80%, transparent);
}

/* — 07 Founder — */
.dlys-founder {
	border-color: var(--theme-palette-color-5);
	background: var(--theme-palette-color-6);
}
.dlys-founder > .stk-row {
	--stk-column-gap: clamp(32px, 6vw, 96px);
	column-gap: clamp(32px, 6vw, 96px);
	row-gap: 48px;
}
/* the portrait frame is 4:5 and capped, unlike the 4:3 media frame */
.stk-block-column.dlys-frame--portrait {
	aspect-ratio: 4 / 5;
	max-width: 440px;
	width: 100%;
}
.dlys-founder__body .stk-block-text__text {
	line-height: 1.65;
	max-width: 54ch;
}
.stk-block-columns.dlys-founder__creds {
	border-color: var(--theme-palette-color-5);
}
.dlys-founder__creds > .stk-row {
	--stk-column-gap: 0px;
	column-gap: 0;
	row-gap: 0;
}
.dlys-cred > .stk-column-wrapper {
	padding: 18px 16px 0 0;
}
.dlys-cred__value .stk-block-subtitle__text {
	line-height: 1;
}
.dlys-cred__label .stk-block-subtitle__text {
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--theme-palette-color-4) 72%, transparent);
}

/* — 08 CTA — */
.dlys-cta__box > .stk-column-wrapper {
	padding: clamp(32px, 6vw, 80px);
}
.dlys-cta__title .stk-block-heading__text {
	line-height: 0.98;
	letter-spacing: 0.005em;
	max-width: 16ch;
}
.dlys-cta__row .stk--block-horizontal-flex {
	gap: 32px 64px;
	align-items: flex-end;
}
/* on desktop the CTA button leaves the copy row and sits opposite the heading;
   the box's inner blocks become two equal columns, and the button starts at the
   head of the second one — so it lands just past the box's midline rather than
   on its right edge. Below 1024px the blocks stay stacked in source order. */
@media screen and (min-width: 1024px) {
	.dlys-cta__box > .stk-column-wrapper > .stk-block-content.stk-inner-blocks {
		/* the heading column takes its own 16ch measure so its line breaks are
		   unchanged; the button then starts at the head of the rest */
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 32px;
		align-items: center;
	}
	.dlys-cta__box .dlys-cta__title {
		grid-column: 1;
		grid-row: 1;
	}
	.stk-block-button.dlys-cta__cta {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
	}
	.dlys-cta__box .dlys-cta__row {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}
/* stacked, the button keeps its original place under the copy — the box's
   inner blocks are a flex column there, so order alone restores it */
@media screen and (max-width: 1023px) {
	.stk-block-button.dlys-cta__cta {
		order: 1;
		margin-top: 28px;
	}
}
.dlys-cta__body .stk-block-text__text {
	line-height: 1.65;
	max-width: 54ch;
}
.stk-block-button.dlys-btn--lg {
	--stk-button-padding: 16px 26px;
}
.stk-block-button.dlys-btn--lg .stk-button {
	font-size: 18px;
}

/* the page's one closing CTA — a step up from dlys-btn--lg */
.stk-block-button.dlys-cta__cta {
	--stk-button-padding: 20px 34px;
}
.stk-block-button.dlys-cta__cta .stk-button {
	font-size: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Elementor (V4 atomic) — DLYS About and later Elementor-built pages.

   Elementor's per-element style field parses only &:hover/&:focus/&:active
   and @media(--breakpoint); a descendant selector written there is dropped,
   and a style="" attribute inside a heading/paragraph value is stripped on
   save. So the handful of rules that must reach a child node live here.
   Global class labels DO render as real DOM classes, which makes them the
   stable hook — the generated .e-xxxxxxx classes are not.
   ══════════════════════════════════════════════════════════════════════ */

/* hero: the accented half of "The Story of DLYS" */
.dlys-hero-title span {
	color: var(--dlys-accent);
}

/* breadcrumb: "Home > About" — the link is accent, the separators are spaced */
/* Elementor injects an inline `.e-heading-base a, .e-paragraph-base a
   { color: unset }` reset that loads after this file. It ties on
   specificity, so pair our class with the base class to outrank it —
   same trick this file already uses against Blocksy's Stackable reset. */
.e-paragraph-base.dlys-crumb a {
	color: var(--dlys-accent-700);
	text-decoration: none;
}
.dlys-crumb span {
	margin-inline: 4px;
}

/* body copy carrying an inline link (06 Trusted → "case studies") */
.e-paragraph-base.dlys-inline-link a {
	color: var(--dlys-accent-700);
}

/* GEO Service hero: two stacked lines in one h1, only the second in accent.
   A :last-child rule keeps it distinct from .dlys-hero-title above, which
   accents its single span (the About page's "The Story of DLYS"). */
.dlys-hero-title-split span,
.dlys-hero-title-home span {
	display: block;
}
.dlys-hero-title-split span:last-child,
.dlys-hero-title-home span:last-child {
	color: var(--dlys-accent);
}

/* FAQ indicator (GEO Service 09): the design's + / − , driven by the native
   <details open> state with no JavaScript. Elementor leaves the icon slot
   empty when an accordion item is built through the API rather than the
   editor (the default chevron is an editor-side insert), and its style
   field addresses pseudo-STATES only — never ::before. So the glyph lives
   here, paired with the icon base class to outrank Elementor's own
   ::before reset (same specificity tie-break as the link rules above). */
.e-accordion-item-icon-base.dlys-faq-icon::before {
	content: "+";
	font-family: var(--dlys-heading);
	font-weight: 600;
	font-size: 28px;
	line-height: 1;
	color: var(--dlys-accent-700);
}
details[open] .e-accordion-item-icon-base.dlys-faq-icon::before {
	content: "\2212"; /* U+2212 minus, not a hyphen */
}

/* Comparison table on phones (GEO Service 04). The design fixes three equal
   columns at every width; at 375px that leaves ~111px a column and breaks
   words mid-token ("citation / s and AI"). Widening the columns instead and
   letting the box scroll sideways keeps the designed structure intact and
   readable. Elementor's style field rejects overflow-x, so the scroll lives
   here — and a plain pixel query is fine in this file, unlike the
   @media(--breakpoint) syntax the builder requires. */
@media (max-width: 767px) {
	/* .e-con carries Elementor's own overflow-x and loads after this file, so
	   pair with it to break the specificity tie — as with the link and FAQ
	   icon rules above. */
	.e-con.dlys-scroll-x {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* intro paragraph carrying an inline link (SEO Service 03 → GEO service) */
.e-paragraph-base.dlys-intro a {
	color: var(--dlys-accent-700);
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact form — [dlys_contact_form]. Same vocabulary as the rest of the
   system: radius 0, 1px hairlines, no shadows, Barlow Condensed on the
   controls' labels and the submit button.
   ══════════════════════════════════════════════════════════════════════ */

.dlys-formwrap {
	font-family: var(--dlys-body);
	color: var(--dlys-text);
}

.dlys-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.dlys-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 22px;
}

/* the honeypot is removed from the layout, not merely made transparent */
.dlys-form__pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dlys-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.dlys-field__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--dlys-text) 72%, transparent);
}
.dlys-field__label span {
	color: var(--dlys-accent-700);
}
.dlys-field__input {
	width: 100%;
	font-family: var(--dlys-body);
	font-size: 17px;
	line-height: 1.5;
	color: var(--dlys-text);
	background: transparent;
	border: 1px solid var(--dlys-divider);
	border-radius: 0;
	padding: 12px 14px;
	transition: border-color 0.15s ease;
}
.dlys-field__input--area {
	resize: vertical;
	min-height: 150px;
}
.dlys-field__input:hover {
	border-color: color-mix(in srgb, var(--dlys-text) 38%, transparent);
}
.dlys-field__input:focus {
	outline: none;
	border-color: var(--dlys-accent);
}
.dlys-field__input:focus-visible {
	outline: 2px solid var(--dlys-accent);
	outline-offset: 2px;
}
.dlys-field__input[aria-invalid="true"] {
	border-color: #a6353a;
}
.dlys-field__err {
	font-size: 14px;
	line-height: 1.4;
	color: #a6353a;
}

.dlys-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 6px;
}
.dlys-form__submit {
	font-family: var(--dlys-heading);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	cursor: pointer;
	padding: 16px 26px;
	border: 1px solid var(--dlys-accent);
	border-radius: 0;
	background: var(--dlys-accent);
	color: var(--dlys-bg);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dlys-form__submit:hover {
	background: var(--dlys-accent-600);
	border-color: var(--dlys-accent-600);
}
.dlys-form__submit:active {
	background: var(--dlys-accent-700);
	border-color: var(--dlys-accent-700);
}
.dlys-form__hint {
	font-size: 14px;
	color: color-mix(in srgb, var(--dlys-text) 62%, transparent);
}

/* a status band, not a coloured pill — it wears the blueprint hairline */
.dlys-form__notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	font-size: 16px;
	line-height: 1.5;
	border: 1px solid var(--dlys-divider);
}
.dlys-form__notice--ok {
	border-color: var(--dlys-accent);
	color: var(--dlys-accent-800);
	background: color-mix(in srgb, var(--dlys-accent) 8%, transparent);
}
.dlys-form__notice--err {
	border-color: #a6353a;
	color: #a6353a;
	background: color-mix(in srgb, #a6353a 7%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Layout primitives outside Elementor.

   These class names are the Elementor kit's global classes, mirrored here
   with identical values. The kit only styles Elementor documents, so a plain
   Gutenberg page (the contact page — it needs a shortcode, which Elementor's
   atomic widgets cannot host) would otherwise render unstyled. On Elementor
   pages the kit still wins the cascade and nothing changes.
   ══════════════════════════════════════════════════════════════════════ */

/* The Gutenberg wrapper is a direct child of .entry-content.is-layout-constrained,
   so WordPress caps it at the theme's content width. That made the coloured
   section bands exactly as wide as their own content, leaving the form and the
   detail panel flush against the band edges. Releasing the cap lets the bands
   run the full content area — as they do on every Elementor page — while the
   inner .dlys-container stays centred, which is where the side breathing room
   comes from. */
.entry-content > .dlys-gb,
.is-layout-constrained > .dlys-gb,
.dlys-gb {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

.dlys-gb .dlys-section {
	width: 100%;
	padding-block: clamp(72px, 9vw, 120px);
	padding-inline: 0;
	display: flex;
	flex-direction: column;
}
.dlys-gb .dlys-container {
	width: 90vw;
	max-width: 1290px;
	margin-inline: auto;
	padding-inline: 0;
	padding-block: 0;
}
.dlys-gb .dlys-blueprint {
	position: relative;
	border: 1px solid var(--dlys-divider);
	border-radius: 0;
}
.dlys-gb .dlys-eyebrow {
	font-family: var(--dlys-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0;
	color: var(--dlys-accent-700);
}
.dlys-gb .dlys-h2 {
	font-family: var(--dlys-heading);
	font-weight: 600;
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.02;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	margin: 0;
	color: var(--dlys-text);
}
.dlys-gb .dlys-h3 {
	font-family: var(--dlys-heading);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
	color: var(--dlys-text);
}
.dlys-gb .dlys-lead {
	font-family: var(--dlys-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
	margin: 0;
	max-width: 54ch;
	color: var(--dlys-text);
}
.dlys-gb .dlys-crumb {
	font-family: var(--dlys-body);
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 40px;
	color: color-mix(in srgb, var(--dlys-text) 72%, transparent);
}
.dlys-gb .dlys-crumb a {
	color: var(--dlys-accent-700);
	text-decoration: none;
}
.dlys-gb .dlys-crumb span {
	margin-inline: 4px;
}
.dlys-gb .dlys-hero-title-split {
	font-family: var(--dlys-heading);
	font-weight: 600;
	font-size: clamp(44px, 6.6vw, 96px);
	line-height: 0.98;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	margin: 0;
	max-width: 18ch;
	color: var(--dlys-text);
}

/* the contact page's own two-column split and detail rows */
.dlys-contact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 48px clamp(32px, 6vw, 96px);
	align-items: start;
}
.dlys-contact__panel {
	padding: clamp(28px, 4vw, 44px);
}
.dlys-contact__detail {
	padding: 18px 24px;
	border-bottom: 1px solid var(--dlys-divider);
}
.dlys-contact__detail:last-child {
	border-bottom: 0;
}
.dlys-contact__detail dt {
	font-family: var(--dlys-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--dlys-text) 70%, transparent);
	margin: 0 0 6px;
}
.dlys-contact__detail dd {
	font-family: var(--dlys-body);
	font-size: 17px;
	line-height: 1.55;
	margin: 0;
	color: var(--dlys-text);
}
.dlys-contact__detail dd a {
	color: var(--dlys-accent-700);
}
.dlys-contact__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 32px;
	margin-top: 56px;
}
.dlys-contact__card {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.dlys-contact__card p {
	font-family: var(--dlys-body);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	color: color-mix(in srgb, var(--dlys-text) 80%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Content width — aligned to the theme header.

   Blocksy's header container is `min(100%, 90vw)` capped at 1290px, so the
   logo sits on a different vertical line than page content capped at 1200px
   with its own clamp() gutter. Matching the header's own rule puts every
   page's first character directly under the logo.

   The Elementor kit emits `.elementor .dlys-container` (0,2,0) and its
   stylesheet loads after this file, so a tie would lose — pairing with
   .e-con takes it to (0,3,0) and wins on specificity alone, no !important.
   The gutter now comes from 90vw itself (5vw a side), exactly as the header
   does, which is why padding-inline goes to 0.
   ══════════════════════════════════════════════════════════════════════ */
.elementor .e-con.dlys-container {
	width: 90vw;
	max-width: 1290px;
	padding-inline: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Section rhythm: +20px top and bottom over each section's design value,
   matching the adjustment already carried by Home A and the Homepage.

   This also repairs those sections: their padding was authored as a
   `padding-block` shorthand in Elementor's per-element style field, which
   that parser drops silently (it stores only `padding` or the four
   longhands). They had been rendering at Elementor's 10px default rather
   than the 56-144px the design calls for. In plain CSS the shorthand is
   fine, so the values are restored and adjusted in one place.

   Specificity: the kit emits `.elementor .dlys-section` and the widget base
   emits `.elementor .e-flexbox-base`, both (0,2,0), from stylesheets that
   load after this file. Pairing with .e-con takes these to (0,3,0), which
   wins outright — no !important anywhere in this file.
   ══════════════════════════════════════════════════════════════════════ */

/* standard band — every section that wears .dlys-section */
.elementor .e-con.dlys-section,
.dlys-gb .dlys-section {
	padding-block: calc(clamp(72px, 9vw, 120px) + 20px);
}

/* hero — About 01, GEO Service 01, SEO Service 01 */
.elementor .e-con.elementor-element-28524db7,
.elementor .e-con.elementor-element-253c59d3,
.elementor .e-con.elementor-element-a20f6c0 {
	padding-block: calc(clamp(56px, 8vw, 104px) + 20px) calc(clamp(64px, 8vw, 104px) + 20px);
	padding-inline: 0;
}

/* inverted band — About 03 Philosophy, GEO 05 Why Enterprise, SEO 07 Metrics */
.elementor .e-con.elementor-element-608e8a09,
.elementor .e-con.elementor-element-8e22b08,
.elementor .e-con.elementor-element-75721f99 {
	padding-block: calc(clamp(80px, 10vw, 136px) + 20px);
	padding-inline: 0;
}

/* closing CTA — About 08, GEO 10, SEO 10 */
.elementor .e-con.elementor-element-3d3a1395,
.elementor .e-con.elementor-element-1defc90a,
.elementor .e-con.elementor-element-23a777ba {
	padding-block: calc(clamp(40px, 5vw, 64px) + 20px) calc(clamp(80px, 10vw, 144px) + 20px);
	padding-inline: 0;
}

/* Homepage 01 Hero. Its +20px was authored through Elementor's style field
   like the rest, but the stored declaration came back as
   `calc(clamp(72px, 10vw, 136px) )` — the parser dropped the `+ 20px` from
   the block-start value while keeping it on block-end. Pinning the value
   here takes the section off that storage path entirely.
   Block-start is half the original top padding. */
.elementor .e-con.elementor-element-194890d3 {
	padding-block: calc(clamp(36px, 5vw, 68px) + 10px) calc(clamp(64px, 8vw, 104px) + 20px);
	padding-inline: 0;
}