/*
 * ecomsols — component styles.
 * Design tokens live in theme.json; this file styles the section patterns.
 * Prefix: .es-   Dark sections are any block with the "ink" background,
 * so changing a section's background in the editor re-themes it automatically.
 */

:root {
	--es-ivory: var(--wp--preset--color--ivory);
	--es-ink: var(--wp--preset--color--ink);
	--es-navy: var(--wp--preset--color--navy);
	--es-green: var(--wp--preset--color--green);
	--es-green-ink: var(--wp--preset--color--green-ink);
	--es-mint: var(--wp--preset--color--mint);
	--es-text: var(--wp--preset--color--text);
	--es-muted: var(--wp--preset--color--muted);
	--es-body-dark: var(--wp--preset--color--body-dark);
	--es-line: var(--wp--preset--color--line);
	--es-line-dark: rgba(255, 255, 255, 0.1);
	--es-card-dark: rgba(255, 255, 255, 0.045);
	--es-radius: 16px;
	--es-radius-sm: 10px;
	--es-heading: var(--wp--preset--font-family--heading);
	--es-mono: var(--wp--preset--font-family--mono);
	--es-section-y: clamp(4.5rem, 9vw, 7rem);
	--es-header-h: 76px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--es-header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.es-main > * { margin-block: 0; }
.es-main--canvas .es-canvas > * { margin-block: 0; }
::selection { background: var(--es-green); color: var(--es-ink); }
:focus-visible { outline: 2px solid var(--es-green); outline-offset: 3px; }

/* Accessibility helpers (block themes do not ship these by default) */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background: #fff; clip: auto !important; clip-path: none; color: var(--es-navy); display: block; height: auto; left: 8px; padding: 12px 20px; top: 8px; width: auto; z-index: 100000; }
.es-reading-time { margin: 0; font-size: 0.8125rem; color: var(--es-muted); }
.has-ink-background-color .es-reading-time { color: var(--es-body-dark); font-size: inherit; }

/* ----------------------------------------------------------- sections */
.es-section { padding-block: var(--es-section-y); position: relative; }
.es-section > * + * { margin-block-start: clamp(2rem, 4vw, 3.25rem); }
.es-section--line { border-top: 1px solid var(--es-line); }
.has-ink-background-color.es-section--line { border-top-color: var(--es-line-dark); }

/* Dark context */
.has-ink-background-color { color: var(--es-body-dark); }
.has-ink-background-color :where(h1, h2, h3, h4, h5, h6),
.has-navy-background-color :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.has-ink-background-color a:where(:not(.wp-element-button)) { color: var(--es-green); }
.has-ink-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
.has-navy-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) { background: #fff; color: var(--es-navy); }
.has-ink-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover,
.has-navy-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover { background: var(--es-green); color: var(--es-ink); }
.has-ink-background-color .is-style-outline .wp-block-button__link:not(.has-text-color) { color: #fff; border-color: rgba(255, 255, 255, 0.55); }

/* Buttons */
.wp-block-button__link { transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--es-green); }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1.5px solid currentColor; padding: calc(0.95rem - 1.5px) calc(1.6rem - 1.5px); background: transparent; color: var(--es-navy); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: transparent; border-color: var(--es-green); }
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--es-green); }
.wp-block-buttons { gap: 0.75rem; }

/* ----------------------------------------------------------- type helpers */
.es-eyebrow {
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--es-green-ink); display: inline-flex; align-items: center; gap: 0.6rem; margin: 0;
}
.es-eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--es-green); border-radius: 2px; flex: none; }
.has-ink-background-color .es-eyebrow, .has-navy-background-color .es-eyebrow { color: var(--es-green); }
.es-lead { font-size: var(--wp--preset--font-size--md); line-height: 1.6; color: var(--es-muted); max-width: 64ch; }
.es-lead--sm { font-size: 1.0625rem; }
.has-ink-background-color .es-lead { color: var(--es-body-dark); }
.es-kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--es-muted); margin: 0; }
.has-ink-background-color .es-kicker { color: rgba(201, 212, 230, 0.7); }
.es-small { font-size: 0.8125rem; color: var(--es-muted); margin: 0; }
.has-ink-background-color .es-small { color: rgba(201, 212, 230, 0.75); }
.es-caption { font-size: 0.8125rem; color: var(--es-muted); text-align: center; margin-top: 0.75rem !important; }
.has-ink-background-color .es-caption { color: rgba(201, 212, 230, 0.6); }
.es-footnote { font-size: 0.875rem; color: var(--es-muted); max-width: 72ch; margin-inline: auto !important; }
.es-subhead { font-family: var(--es-heading); font-weight: 700; color: var(--es-navy); margin-top: 1.5rem !important; margin-bottom: 0.5rem !important; }
.has-ink-background-color .es-subhead { color: #fff; }
.es-hl { position: relative; white-space: nowrap; color: var(--es-green); }
.es-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.12em; background: var(--es-green); border-radius: 4px; opacity: .35; }
.es-link { font-weight: 600; font-size: 0.9375rem; margin-top: auto !important; }
.es-link a, a.es-link, .es-link.wp-block-read-more { color: var(--es-navy); text-decoration: none; }
.es-link a:hover, .es-link.wp-block-read-more:hover { color: var(--es-green-ink); }
.has-ink-background-color .es-link a { color: var(--es-green); }
.es-h3 { font-size: var(--wp--preset--font-size--lg) !important; }

/* Section heads */
.es-head > * { margin-block: 0; }
.es-head > * + * { margin-block-start: 1rem; }
.es-head h2 { max-width: 22ch; }
.es-head--center { text-align: center; }
.es-head--center > * { margin-inline: auto; }
.es-head--center .es-lead { margin-inline: auto; }
.es-head--hero h1 { max-width: 18ch; }
.es-head--center.es-head--hero h1 { max-width: 20ch; }
.es-head-row { gap: 1.5rem; align-items: flex-end; }
.es-head-row__note { max-width: 36ch; color: var(--es-muted); font-size: 0.9375rem; margin: 0; }

/* ----------------------------------------------------------- header */
.es-site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(247, 247, 242, 0.92);
	-webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease;
}
.admin-bar .es-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .es-site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .es-site-header { top: 0; } }
.es-site-header.is-scrolled { border-bottom-color: var(--es-line); box-shadow: 0 6px 20px rgba(16, 24, 32, 0.05); }
.es-header {
	min-height: var(--es-header-h); max-width: var(--wp--style--global--wide-size);
	margin-inline: auto; padding-inline: var(--wp--style--root--padding-left); gap: 1.5rem; align-items: center;
}
.es-logo { margin: 0; flex: none; }
.es-logo img { display: block; width: 170px; max-width: 42vw; height: auto; }
.es-logo--dark img { width: 200px; }
.es-nav { flex: 1; }
.es-nav .wp-block-navigation-item__content { color: var(--es-text); text-decoration: none; padding: 0.4rem 0.2rem; position: relative; }
.es-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--es-green); transform: scaleX(0); transition: transform .2s ease; transform-origin: left; }
.es-nav .wp-block-navigation-item__content:hover::after,
.es-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.es-nav .wp-block-navigation__container { gap: clamp(1rem, 2.4vw, 2.25rem); }
.es-header__cta .wp-block-button__link { padding: 0.75rem 1.25rem; font-size: 0.875rem; }
.es-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 6rem 2rem 2rem; }
.es-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; font-size: 1.5rem; font-family: var(--es-heading); font-weight: 700; }
@media (max-width: 599px) { .es-header .es-header__cta { display: none !important; } .es-nav { flex: 0; } .es-header { gap: 1rem; } }

/* ----------------------------------------------------------- hero */
.es-hero { overflow: hidden; isolation: isolate; }
.es-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(60% 70% at 18% 25%, rgba(0, 217, 126, 0.12), transparent 70%),
		radial-gradient(45% 60% at 92% 80%, rgba(15, 42, 92, 0.55), transparent 70%);
}
.es-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 28px 28px;
	-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}
.es-hero--home { padding-block: clamp(4rem, 8vw, 6.5rem) clamp(4rem, 8vw, 6rem); }
.es-hero--page { padding-block: clamp(4.5rem, 9vw, 7rem); }
.es-hero--slim { padding-block: clamp(3.5rem, 7vw, 5rem); }
.es-hero h1 { font-size: var(--wp--preset--font-size--display); }
.es-hero__title { font-size: var(--wp--preset--font-size--hero) !important; max-width: 13ch; margin-block: 1.25rem 1.25rem; }
.es-hero__cols { gap: clamp(2rem, 5vw, 4.5rem); }
.es-hero__cols .wp-block-buttons { margin-top: 2rem; }
.es-hero__meta { margin-top: 2.25rem !important; gap: 0.9rem; align-items: center; }
.es-hero__note { font-size: 0.875rem; color: rgba(201, 212, 230, 0.8); margin: 0; max-width: 34ch; }
.es-hero__note strong { color: #fff; }
.es-avatars { display: flex; gap: 0; }
.es-avatars p {
	margin: 0 0 0 -10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
	font-size: 0.625rem; font-weight: 800; letter-spacing: .02em; color: var(--es-ink); background: var(--es-green); border: 2px solid var(--es-ink);
}
.es-avatars p:first-child { margin-left: 0; }
.es-avatars p:nth-child(2) { background: #fff; }
.es-avatars p:nth-child(3) { background: var(--es-navy); color: #fff; }
.es-hero__facts { margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; }
.es-fact { border-top: 1px solid var(--es-line-dark); padding-top: 1rem; }
.es-fact > * { margin: 0; }
.es-fact__v { color: #fff; font-weight: 600; font-family: var(--es-heading); margin-top: 0.35rem !important; }
.es-fact--ico .es-ico { margin-bottom: 0.75rem; }
.es-hero--center .es-chips { justify-content: center; }
.es-404 .es-search { max-width: 520px; margin-inline: auto; }

/* Badges / pills / tags / chips */
.es-badge {
	display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content;
	padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--es-mint); color: var(--es-green-ink);
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; margin: 0;
}
.es-badge > p { margin: 0; }
.es-badge--dark { background: rgba(0, 217, 126, 0.1); color: var(--es-green); border: 1px solid rgba(0, 217, 126, 0.25); }
.es-badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--es-green); box-shadow: 0 0 0 4px rgba(0, 217, 126, 0.18); }
.es-badge--time { padding: 0.25rem 0.7rem; font-size: 0.75rem; }
.has-ink-background-color .es-badge--time { background: rgba(0, 217, 126, 0.1); color: var(--es-green); }
.es-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.es-tags > * { margin: 0 !important; }
.es-tag, .es-tag a, .wp-block-post-terms.es-tag a {
	display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--es-mint); color: var(--es-green-ink);
	font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; margin: 0;
}
.wp-block-post-terms.es-tag { background: none; padding: 0; }
.wp-block-post-terms.es-tag .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms.es-tag a + a, .wp-block-post-terms.es-tag a { margin-right: 0.35rem; }
.es-tag--dark, .es-tag--dark a, .has-ink-background-color .wp-block-post-terms.es-tag a { background: rgba(0, 217, 126, 0.12); color: var(--es-green); }
.es-pill { margin: 0; padding: 0.55rem 0.95rem; border-radius: var(--es-radius-sm); background: #fff; border: 1px solid var(--es-line); font-weight: 600; font-size: 0.875rem; color: var(--es-navy); }
.es-chips { gap: 0.75rem; }
.es-chip { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.95rem 0.55rem 0.55rem; border-radius: 999px; background: #fff; border: 1px solid var(--es-line); }
.es-chip > p { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--es-navy); }
.es-chips--dark .es-chip, .has-ink-background-color .es-chip { background: var(--es-card-dark); border-color: var(--es-line-dark); }
.es-chips--dark .es-chip > p, .has-ink-background-color .es-chip > p { color: #fff; }

/* ----------------------------------------------------------- icons */
.es-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--es-mint); position: relative; flex: none; margin: 0; }
.es-ico::after { content: ""; position: absolute; inset: 12px; background: var(--es-green-ink); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.es-ico--sm { width: 32px; height: 32px; border-radius: 9px; }
.es-ico--sm::after { inset: 7px; }
.has-ink-background-color .es-ico, .es-panel .es-ico, .es-chips--dark .es-ico { background: rgba(0, 217, 126, 0.12); }
.has-ink-background-color .es-ico::after, .es-panel .es-ico::after, .es-chips--dark .es-ico::after { background: var(--es-green); }
.es-panel--light .es-ico { background: var(--es-mint); }
.es-panel--light .es-ico::after { background: var(--es-green-ink); }

/* ----------------------------------------------------------- stats / trust */
.es-trust { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--es-line-dark); }
.es-hero + .es-trust--hero, .es-trust--hero { border-top-color: var(--es-line-dark); }
.es-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.es-stat { text-align: center; padding-inline: 0.5rem; }
.es-stats .es-stat + .es-stat { border-left: 1px solid var(--es-line-dark); }
.es-stat > p { margin: 0; }
.es-stat__num { font-family: var(--es-heading); font-weight: 800; font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--es-green); }
.es-stat__label { margin-top: 0.4rem !important; font-size: 0.9375rem; font-weight: 500; color: #fff; }
.es-trust__mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem; padding-top: 1.75rem; border-top: 1px solid var(--es-line-dark); }
.es-trust__mail > p { margin: 0; }
.es-trust__mail a { font-weight: 600; text-decoration: none; }
.es-trust__note { font-size: 0.8125rem; color: rgba(201, 212, 230, 0.65); }
@media (max-width: 781px) {
	.es-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
	.es-stats .es-stat + .es-stat { border-left: 0; }
	.es-stats .es-stat:nth-child(even) { border-left: 1px solid var(--es-line-dark); }
}

/* ----------------------------------------------------------- cards & grids */
.es-grid { display: grid; gap: 1.25rem; }
.es-grid > * { margin: 0 !important; }
.es-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.es-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .es-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .es-grid--2, .es-grid--4 { grid-template-columns: 1fr; } }

.es-card {
	background: #fff; border: 1px solid var(--es-line); border-radius: var(--es-radius); padding: clamp(1.5rem, 2.5vw, 2rem);
	display: flex; flex-direction: column; gap: 0.85rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.es-card > * { margin: 0 !important; }
.es-card h3 { font-size: 1.1875rem; line-height: 1.3; }
.es-card p { color: var(--es-muted); font-size: 0.9688rem; }
.es-card--link:hover, .es-post-card:hover, .es-work-card:hover, .es-proj:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lift); border-color: rgba(0, 217, 126, 0.55); }
.es-card--dark { background: var(--es-card-dark); border-color: var(--es-line-dark); }
.es-card--dark p { color: var(--es-body-dark); }
.es-card--navy { border: 0; }
.es-card--navy p { color: rgba(255, 255, 255, 0.82); }
.es-card--navy .es-kicker { color: var(--es-green); }

.es-card .es-numcard__n { font-family: var(--es-heading); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--es-green) !important; letter-spacing: -0.03em; }
.es-numcard { border-top: 2px solid var(--es-green); }

/* Services bento */
.es-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.es-bento > * { margin: 0 !important; min-width: 0; }
.es-card, .es-panel, .es-panel__title { min-width: 0; }
.es-panel__title { overflow-wrap: anywhere; }
.es-card--feature { grid-column: 1 / -1; background: var(--es-navy); border-color: var(--es-navy); color: rgba(255, 255, 255, 0.85); }
@media (min-width: 900px) {
	.es-card--feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: 0.85rem; align-content: start; padding: clamp(2rem, 3.5vw, 2.75rem); }
	.es-card--feature > * { grid-column: 1; }
	.es-card--feature > .es-panel { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
}
.es-card--feature h3 { color: #fff; font-size: var(--wp--preset--font-size--xl); }
.es-card--feature p { color: rgba(255, 255, 255, 0.8); font-size: 1.0313rem; }
.es-card--feature .es-kicker { color: var(--es-green); }
.es-card--feature .es-ico { background: rgba(0, 217, 126, 0.14); }
.es-card--feature .es-ico::after { background: var(--es-green); }
.es-card--feature .es-tag { background: rgba(255, 255, 255, 0.08); color: #fff; }
.es-card--feature .es-link a { color: var(--es-green); }
.es-card__top { align-items: center; gap: 0.75rem; }
@media (max-width: 1023px) { .es-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .es-bento { grid-template-columns: minmax(0, 1fr); } }

/* Steps */
.es-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; counter-reset: s; position: relative; }
.es-steps > * { margin: 0 !important; }
.es-steps::before { content: ""; position: absolute; top: 2.15rem; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--es-green), rgba(0, 217, 126, 0.15)); }
.es-step { position: relative; background: #fff; border: 1px solid var(--es-line); border-radius: var(--es-radius); padding: 1.5rem; }
.es-step > * { margin: 0; }
.es-step__n { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: var(--es-navy); color: var(--es-green); font-family: var(--es-heading); font-weight: 800; margin-bottom: 1rem !important; }
.es-step h3 { font-size: 1.1875rem; margin-bottom: 0.4rem; }
.es-step p:last-child { color: var(--es-muted); font-size: 0.9375rem; }
@media (max-width: 1023px) { .es-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .es-steps::before { display: none; } }
@media (max-width: 560px) { .es-steps { grid-template-columns: 1fr; } }

/* Split layouts (services, process, editorial) */
.es-split { gap: clamp(2rem, 6vw, 5rem) !important; }
@media (min-width: 782px) { .es-split--reverse { flex-direction: row-reverse; } }
.es-split .wp-block-buttons { margin-top: 1.75rem; }
.es-split h2 { margin-block: 0.85rem 1rem; }

/* Check lists */
.es-checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.75rem; }
.es-checks li { position: relative; padding-left: 2rem; font-weight: 500; color: var(--es-text); }
.has-ink-background-color .es-checks li { color: #fff; }
.es-checks li::before {
	content: ""; position: absolute; left: 0; top: 0.1em; width: 1.3rem; height: 1.3rem; border-radius: 50%;
	background: rgba(0, 217, 126, 0.16);
}
.es-checks li::after {
	content: ""; position: absolute; left: 0.3rem; top: calc(0.1em + 0.3rem); width: 0.7rem; height: 0.7rem;
	background: var(--es-green-ink); -webkit-mask: var(--es-i-check) center / contain no-repeat; mask: var(--es-i-check) center / contain no-repeat;
}
.has-ink-background-color .es-checks li::after { background: var(--es-green); }
.es-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.es-numbered { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; counter-reset: n; }
.es-numbered li { counter-increment: n; position: relative; padding-left: 2.6rem; color: var(--es-text); font-size: 0.9688rem; }
.es-numbered li::before { content: counter(n); position: absolute; left: 0; top: -0.1rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--es-mint); color: var(--es-green-ink); font-weight: 700; font-size: 0.8125rem; border: 1px solid rgba(0, 122, 77, 0.2); }

/* ----------------------------------------------------------- mock UI: browser + panels */
.es-browser { border-radius: var(--es-radius); background: #fff; border: 1px solid var(--es-line); box-shadow: var(--wp--preset--shadow--lift); overflow: hidden; margin: 0; }
.has-ink-background-color .es-browser { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.es-browser__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.9rem; background: #F1F2EE; border-bottom: 1px solid var(--es-line); }
.es-browser__bar::before { content: ""; width: 42px; height: 10px; flex: none; background: radial-gradient(circle at 5px 5px, #FF5F57 4.5px, transparent 5px), radial-gradient(circle at 21px 5px, #FEBC2E 4.5px, transparent 5px), radial-gradient(circle at 37px 5px, #28C840 4.5px, transparent 5px); }
.es-browser__bar > p { margin: 0; }
.es-browser__url { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--es-line); border-radius: 6px; padding: 0.2rem 0.6rem; font-size: 0.75rem; color: var(--es-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-browser__chip { font-size: 0.6875rem; font-weight: 700; color: var(--es-green-ink); background: var(--es-mint); padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.es-browser > * { margin: 0 !important; }
.es-browser__body { padding: 0; }
.es-browser__body > * { margin: 0 !important; }
.es-cover { margin: 0; height: 100%; width: 100%; display: block; overflow: hidden; }
.es-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.es-browser__body > .es-cover img { aspect-ratio: 16 / 10; }

.es-store-nav { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem; border-bottom: 1px solid var(--es-line); }
.es-store-nav > p { margin: 0; }
.es-store-nav__logo { font-family: var(--es-heading); font-weight: 800; letter-spacing: 0.18em; font-size: 0.8125rem; color: var(--es-ink); }
.es-store-nav__links { font-size: 0.6875rem; color: var(--es-muted); }
.es-store-hero { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.es-store-hero--tall { aspect-ratio: 16 / 9; }
.es-store-hero .es-cover { position: absolute; inset: 0; }
.es-store-hero__cap { position: absolute; left: 1rem; bottom: 1rem; background: rgba(255, 255, 255, 0.92); padding: 0.6rem 0.85rem; border-radius: 10px; }
.es-store-hero__cap > p { margin: 0; }
.es-store-hero__title { font-family: var(--es-heading); font-weight: 700; color: var(--es-ink); font-size: 0.9375rem; }
.es-store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; padding: 0.75rem; }
.es-store-grid > * { margin: 0 !important; }
.es-product { border-radius: 10px; background: #F6F5F0; padding: 0.45rem 0.45rem 0.6rem; min-width: 0; overflow: hidden; }
.es-product > * { margin: 0 !important; }
.es-product .es-cover { aspect-ratio: 1; height: auto; border-radius: 7px; overflow: hidden; margin-bottom: 0.45rem !important; }
.es-product__name { font-size: 0.75rem; font-weight: 600; color: var(--es-ink); line-height: 1.3; }
.es-product__price { font-size: 0.6875rem; color: var(--es-muted); }
.es-product--feature { background: var(--es-ink); }
.es-product--feature .es-product__name { color: #fff; }
.es-product--feature .es-kicker { color: var(--es-green); font-size: 0.5625rem; }
.es-product--feature .es-product__price { color: var(--es-green); font-weight: 600; }
.es-browser--hero { transform: perspective(1600px) rotateY(-4deg) rotateX(2deg); transition: transform .5s ease; }
.es-browser--hero:hover { transform: none; }
@media (max-width: 781px) { .es-browser--hero { transform: none; } }

.es-panel {
	background: #0B131B; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--es-radius); padding: 1.25rem;
	color: var(--es-body-dark); font-size: 0.875rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); margin: 0;
}
.es-panel > * { margin: 0 !important; }
.es-panel > * + * { margin-top: 0.75rem !important; }
.es-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.es-panel__head > p { margin: 0; }
.es-panel__title { font-family: var(--es-mono); font-size: 0.75rem; color: #fff; display: flex; align-items: center; gap: 0.6rem; }
.es-panel__title::before { content: ""; width: 34px; height: 8px; flex: none; background: radial-gradient(circle at 4px 4px, #FF5F57 3.5px, transparent 4px), radial-gradient(circle at 17px 4px, #FEBC2E 3.5px, transparent 4px), radial-gradient(circle at 30px 4px, #28C840 3.5px, transparent 4px); }
.es-panel__badge { font-family: var(--es-mono); font-size: 0.6875rem; color: var(--es-green); background: rgba(0, 217, 126, 0.1); padding: 0.2rem 0.55rem; border-radius: 6px; white-space: nowrap; }
.es-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); }
.es-row > p { margin: 0; }
.es-row__l { color: rgba(201, 212, 230, 0.75); font-size: 0.8125rem; }
.es-row__v { color: #fff; font-weight: 600; font-size: 0.8125rem; text-align: right; }
.es-row--accent .es-row__v { color: var(--es-green); }
.es-panel__foot { display: flex; gap: 0.6rem; align-items: center; padding-top: 0.5rem; }
.es-panel__foot > p { margin: 0; font-size: 0.8125rem; }
.es-panel .es-code, .es-code {
	margin: 0; padding: 1rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06);
	color: #9FE8C6; font-size: 0.75rem; line-height: 1.7; white-space: pre; overflow-x: auto; max-width: 100%;
}
.es-panel--light { background: #fff; border-color: var(--es-line); color: var(--es-text); box-shadow: var(--wp--preset--shadow--card); }
.es-panel--light .es-panel__head { border-bottom-color: var(--es-line); }
.es-panel--light .es-panel__title { color: var(--es-navy); }
.es-panel--light .es-panel__badge { color: var(--es-green-ink); background: var(--es-mint); }
.es-panel--light .es-row { border-bottom-color: var(--es-line); }
.es-panel--light .es-row__l { color: var(--es-muted); }
.es-panel--light .es-row__v { color: var(--es-navy); }
.es-panel--light .es-panel__foot > p { color: var(--es-muted); }
.es-card--feature .es-panel--light { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); box-shadow: none; }
.es-card--feature .es-panel--light .es-panel__title, .es-card--feature .es-panel--light .es-row__v { color: #fff; }
.es-card--feature .es-panel--light .es-row__l { color: rgba(255, 255, 255, 0.65); }
.es-card--feature .es-panel--light .es-row { border-bottom-color: rgba(255, 255, 255, 0.08); }
.es-card--feature .es-panel--light .es-panel__head { border-bottom-color: rgba(255, 255, 255, 0.08); }
.es-card--feature .es-panel--light .es-panel__badge { background: rgba(0, 217, 126, 0.12); color: var(--es-green); }

.es-bar { position: relative; padding: 0.55rem 0.75rem; border-radius: 8px; background: rgba(255, 255, 255, 0.04); overflow: hidden; }
.es-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); background: linear-gradient(90deg, rgba(15, 42, 92, 0.9), rgba(0, 217, 126, 0.35)); border-radius: 8px; }
.es-bar--accent::before { background: linear-gradient(90deg, rgba(0, 217, 126, 0.45), rgba(0, 217, 126, 0.85)); }
.es-bar--warn::before { background: linear-gradient(90deg, rgba(255, 95, 87, 0.35), rgba(255, 95, 87, 0.7)); }
.es-bar__l { position: relative; margin: 0; color: #fff; font-size: 0.8125rem; font-weight: 500; }
.es-bar--14 { --w: 14%; } .es-bar--26 { --w: 26%; } .es-bar--34 { --w: 34%; } .es-bar--38 { --w: 38%; } .es-bar--60 { --w: 60%; } .es-bar--92 { --w: 92%; } .es-bar--100 { --w: 100%; }

/* Before / after cards */
.es-compare-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.es-compare-cards > * { margin: 0 !important; }
.es-mini-card { background: #fff; border: 1px solid var(--es-line); border-radius: var(--es-radius); padding: 1.25rem; }
.es-mini-card > * { margin: 0 !important; }
.es-mini-card > * + * { margin-top: 0.6rem !important; }
.es-mini-card h4 { font-size: 1rem; }
.es-mini-card .es-row { border-bottom-color: var(--es-line); }
.es-mini-card .es-row__l { color: var(--es-muted); }
.es-mini-card--before { opacity: 0.85; background: #FBFBF9; }
.es-mini-card--before .es-row__v { color: #C2410C; }
.es-mini-card--after { border-color: rgba(0, 217, 126, 0.6); box-shadow: 0 0 0 4px rgba(0, 217, 126, 0.08); }
.es-mini-card--after .es-row__v { color: var(--es-green-ink); }
.es-mini-card--wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem; background: var(--es-mint); border-color: transparent; }
.es-mini-card--wide > * + * { margin-top: 0 !important; }
.es-mini-card--wide p { font-weight: 600; color: var(--es-navy); font-size: 0.9375rem; }
@media (max-width: 560px) { .es-compare-cards { grid-template-columns: 1fr; } }

/* Migration diagram */
.es-migrate { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 1rem; align-items: center; }
.es-migrate > * { margin: 0 !important; }
.es-migrate__from { display: grid; gap: 0.6rem; }
.es-migrate__from > * { margin: 0 !important; }
.es-migrate__pipe { background: var(--es-ink); border-radius: var(--es-radius); padding: 1.1rem; color: var(--es-body-dark); position: relative; }
.es-migrate__pipe > p { margin: 0; font-size: 0.8125rem; padding: 0.35rem 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); }
.es-migrate__pipe > p:last-child { border: 0; color: var(--es-green); font-weight: 600; }
.es-migrate__pipe .es-kicker { color: var(--es-green); border: 0; padding-bottom: 0.5rem; }
.es-migrate__pipe::before, .es-migrate__pipe::after { content: "→"; position: absolute; top: 50%; transform: translateY(-50%); color: var(--es-green-ink); font-weight: 800; }
.es-migrate__pipe::before { left: -0.85rem; }
.es-migrate__pipe::after { right: -0.85rem; }
.es-migrate__to { background: #fff; border: 2px solid var(--es-green); border-radius: var(--es-radius); padding: 1.25rem; text-align: center; display: grid; justify-items: center; gap: 0.5rem; }
.es-migrate__to > * { margin: 0 !important; }
.es-migrate__name { font-family: var(--es-heading); font-weight: 800; font-size: 1.25rem; color: var(--es-navy); }
@media (max-width: 640px) { .es-migrate { grid-template-columns: 1fr; } .es-migrate__pipe::before, .es-migrate__pipe::after { display: none; } }

/* Automation flow */
.es-flow { display: grid; gap: 0.75rem; position: relative; }
.es-flow > * { margin: 0 !important; }
.es-flow__step { background: #fff; border: 1px solid var(--es-line); border-radius: 12px; padding: 0.9rem 1rem; gap: 0.85rem; align-items: center; position: relative; }
.es-flow__step p { margin: 0; color: var(--es-navy); font-weight: 600; font-size: 0.9375rem; }
.es-flow__step .es-kicker { font-weight: 700; font-size: 0.6875rem; color: var(--es-green-ink); }
.es-flow__step + .es-flow__step::before { content: ""; position: absolute; left: 1.95rem; top: -0.8rem; height: 0.8rem; width: 2px; background: var(--es-green); }
.es-flow__step--done { background: var(--es-ink); border-color: var(--es-ink); }
.es-flow__step--done p { color: #fff; }
.es-flow__step--done .es-kicker { color: var(--es-green); }
.es-flow__step--done .es-ico { background: rgba(0, 217, 126, 0.14); }
.es-flow__step--done .es-ico::after { background: var(--es-green); }

/* Kanban */
.es-kanban { display: grid; gap: 0.6rem; }
.es-kanban > * { margin: 0 !important; }
.es-kanban__item { border: 1px solid var(--es-line); border-left: 3px solid var(--es-line); border-radius: 10px; padding: 0.75rem 0.9rem; background: #FBFBF9; }
.es-kanban__item > p { margin: 0; font-size: 0.875rem; color: var(--es-text); }
.es-kanban__item.is-done { border-left-color: var(--es-green); }
.es-kanban__item.is-active { border-left-color: var(--es-navy); background: #fff; box-shadow: var(--wp--preset--shadow--card); }

/* Process */
.es-pstep__top { gap: 1rem; align-items: center; }
.es-pstep__top > * { margin: 0 !important; }
.es-pstep__top .es-kicker { margin-bottom: 0.35rem !important; }
.es-bignum { font-family: var(--es-heading); font-weight: 800; font-size: clamp(4rem, 9vw, 6rem); line-height: 0.9; letter-spacing: -0.05em; color: var(--es-green-ink); }
.has-ink-background-color .es-bignum { color: var(--es-green); }
.es-note { margin-top: 1.5rem !important; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 12px; background: var(--es-mint); }
.es-note p { margin: 0; font-size: 0.9375rem; color: var(--es-text); }
.es-note--dark { background: var(--es-card-dark); border: 1px solid var(--es-line-dark); }
.es-note--dark p { color: var(--es-body-dark); }
.es-note strong { color: var(--es-navy); }
.es-note--dark strong { color: #fff; }

/* Why Shopify */
.es-glance .es-stat { text-align: left; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; }
.es-glance .es-stat__num { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.es-glance .es-stat__label { font-size: 0.8125rem; color: var(--es-body-dark); }
.es-pullquote { margin: 1.75rem 0 !important; padding: 0.25rem 0 0.25rem 1.25rem !important; border-left: 4px solid var(--es-green) !important; }
.es-pullquote p { font-family: var(--es-heading); font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 600; line-height: 1.4; color: var(--es-navy); margin: 0; }
.es-rounded img { border-radius: var(--es-radius); box-shadow: var(--wp--preset--shadow--card); }
.es-editorial .es-split > .wp-block-column:last-child > p { color: var(--es-text); }
.es-byline { gap: 0.75rem; align-items: center; margin-top: 1.75rem !important; padding-top: 1.25rem; border-top: 1px solid var(--es-line); }
.es-byline p { margin: 0; }
.es-byline__av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--es-navy); color: var(--es-green); font-weight: 800; font-family: var(--es-heading); flex: none; }
.es-byline__name { font-weight: 700; color: var(--es-navy); font-size: 0.9375rem; }
.es-reason__top { align-items: center; }
.es-card .es-reason__n { font-family: var(--es-heading); font-weight: 800; font-size: 2.5rem; line-height: 1; color: rgba(0, 217, 126, 0.35) !important; margin: 0; }
.es-reason h3 { font-size: 1.375rem; }
.es-card .es-reason__foot { margin-top: auto !important; padding-top: 0.9rem; border-top: 1px solid var(--es-line-dark); font-family: var(--es-mono); font-size: 0.75rem !important; color: var(--es-green) !important; }

/* Comparison table */
.es-compare { margin: 0; overflow-x: auto; border-radius: var(--es-radius); border: 1px solid var(--es-line); background: #fff; box-shadow: var(--wp--preset--shadow--card); }
.es-compare table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 0.9375rem; }
.es-compare th, .es-compare td { border: 0; border-bottom: 1px solid var(--es-line); padding: 1.05rem 1.15rem; text-align: left; vertical-align: top; }
.es-compare thead th { background: var(--es-ink); color: #fff; font-family: var(--es-heading); font-size: 1rem; border-bottom: 0; }
.es-compare thead { border: 0; }
.es-compare tbody tr:last-child td { border-bottom: 0; }
.es-compare td:nth-child(2), .es-compare th:nth-child(2) { background: rgba(0, 217, 126, 0.07); }
.es-compare thead th:nth-child(2) { background: var(--es-navy); }
.es-compare td:nth-child(2) { color: var(--es-navy); font-weight: 500; box-shadow: inset 3px 0 0 var(--es-green); }
.es-compare td { color: var(--es-muted); }
.es-compare td:first-child { color: var(--es-navy); width: 17%; }
.es-pick { display: inline-block; margin-left: 0.4rem; font-family: var(--wp--preset--font-family--body); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--es-ink); background: var(--es-green); padding: 0.15rem 0.45rem; border-radius: 999px; vertical-align: middle; }

/* ----------------------------------------------------------- work */
.es-work-home__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.es-work-home__grid > * { margin: 0 !important; }
.es-proj { background: var(--es-card-dark); border: 1px solid var(--es-line-dark); border-radius: var(--es-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.es-proj > * { margin: 0 !important; }
.es-proj .es-browser { border-radius: 0; border: 0; border-bottom: 1px solid var(--es-line-dark); box-shadow: none; }
.es-proj .es-browser__body > .es-cover img { aspect-ratio: 16 / 9; }
.es-proj__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.es-proj__body > * { margin: 0 !important; }
.es-proj--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; }
.es-proj--wide .es-browser { border-bottom: 0; border-right: 1px solid var(--es-line-dark); }
.es-proj--wide .es-proj__body { justify-content: center; padding: clamp(1.5rem, 3vw, 2.75rem); }
.es-proj--wide h3 { font-size: var(--wp--preset--font-size--xl); }
@media (max-width: 781px) { .es-work-home__grid { grid-template-columns: 1fr; } .es-proj--wide { grid-template-columns: 1fr; } .es-proj--wide .es-browser { border-right: 0; border-bottom: 1px solid var(--es-line-dark); } }

.es-filter { gap: 0.5rem !important; }
.es-filter .wp-block-button__link { padding: 0.55rem 1rem !important; font-size: 0.875rem; border-radius: 999px; cursor: pointer; border-width: 1.5px; }
.es-filter .wp-block-button__link:hover { transform: none; box-shadow: none; }
.es-filter .is-active .wp-block-button__link, .es-filter .wp-block-button__link[aria-pressed="true"] { background: var(--es-navy); color: #fff; border-color: var(--es-navy); }
.es-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.es-work-grid > * { margin: 0 !important; }
.es-work-card { background: #fff; border: 1px solid var(--es-line); border-radius: var(--es-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .25s ease; }
.es-work-card > * { margin: 0 !important; }
.es-work-card .es-browser { border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--es-line); }
.es-work-card .es-browser { flex: 1; display: flex; flex-direction: column; }
.es-work-card .es-browser__body { flex: 1; position: relative; aspect-ratio: 4 / 3; }
.es-work-card .es-browser__body > .es-cover { position: absolute; inset: 0; }
.es-work-card .es-browser__body > .es-cover img { transition: transform .5s ease; }
.es-work-card:hover .es-cover img { transform: scale(1.03); }
.es-work-card__body { padding: 1.25rem 1.4rem 1.5rem; display: grid; gap: 0.6rem; }
.es-work-card__body > * { margin: 0 !important; }
.es-work-card__body h3 { font-size: 1.1875rem; }
.es-work-card__body p { color: var(--es-muted); font-size: 0.9375rem; }
.es-work-card--feature { grid-column: span 2; }
.es-work-card--feature .es-browser__body { aspect-ratio: 16 / 8.5; }
.es-work-card--feature h3 { font-size: var(--wp--preset--font-size--xl); }
.es-work-card.is-hidden { display: none; }
@media (max-width: 1023px) { .es-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .es-work-grid { grid-template-columns: 1fr; } .es-work-card--feature { grid-column: auto; } }

/* ----------------------------------------------------------- FAQ (core/details) */
.es-faq { max-width: 820px; margin-inline: auto !important; display: grid; gap: 0.75rem; }
.es-faq > * { margin: 0 !important; }
.es-faq .wp-block-details { background: #fff; border: 1px solid var(--es-line); border-radius: 12px; padding: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.es-faq .wp-block-details[open] { border-color: rgba(0, 217, 126, 0.55); box-shadow: var(--wp--preset--shadow--card); }
.es-faq summary { list-style: none; cursor: pointer; padding: 1.15rem 3.25rem 1.15rem 1.35rem; font-family: var(--es-heading); font-weight: 600; font-size: 1.0625rem; color: var(--es-navy); position: relative; }
.es-faq summary::-webkit-details-marker { display: none; }
.es-faq summary::after { content: ""; position: absolute; right: 1.25rem; top: 50%; width: 0.65rem; height: 0.65rem; border-right: 2px solid var(--es-green-ink); border-bottom: 2px solid var(--es-green-ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.es-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.es-faq .wp-block-details > p { margin: 0; padding: 0 1.35rem 1.25rem; color: var(--es-muted); }

/* ----------------------------------------------------------- CTA */
.es-cta { text-align: center; padding-block: clamp(5rem, 10vw, 7.5rem); overflow: hidden; isolation: isolate; }
.es-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 50% 100%, rgba(0, 217, 126, 0.16), transparent 70%); }
.es-cta h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); max-width: 22ch; }
.es-cta > * + * { margin-block-start: 2rem; }
.es-cta__mail { font-size: 0.9375rem; color: rgba(201, 212, 230, 0.75); }
.es-cta__mail a { font-weight: 600; text-decoration: none; }

/* ----------------------------------------------------------- footer */
.es-footer { padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; border-top: 1px solid var(--es-line-dark); }
.es-footer__cols { gap: clamp(1.5rem, 4vw, 3rem) !important; }
.es-footer__about { font-size: 0.9375rem; margin-block: 1.25rem 1.25rem; max-width: 34ch; color: var(--es-body-dark); }
.es-footer__title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin: 0 0 1rem; }
.es-footer__links a, .es-footer a { color: var(--es-body-dark); text-decoration: none; font-size: 0.9375rem; transition: color .15s ease; }
.es-footer__links a:hover, .es-footer a:hover { color: var(--es-green); }
.es-footer__email a { color: var(--es-green) !important; font-weight: 600; }
.es-footer__small { font-size: 0.8125rem; color: rgba(201, 212, 230, 0.65); margin: 0; }
.es-footer__bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; padding-top: 1.5rem; border-top: 1px solid var(--es-line-dark); gap: 1rem; }
.es-footer .es-badge { margin-top: 0.25rem; }

/* ----------------------------------------------------------- blog */
.es-catbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 2rem !important; }
.es-catbar > * { margin: 0 !important; }
.es-catbar__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.es-catbar__all a, .es-catbar__list a { display: inline-block; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); color: #fff !important; text-decoration: none; font-size: 0.8125rem; font-weight: 600; transition: background .15s ease, border-color .15s ease; }
.es-catbar__all a { background: var(--es-green); color: var(--es-ink) !important; border-color: var(--es-green); }
.es-catbar__list a:hover { border-color: var(--es-green); background: rgba(0, 217, 126, 0.1); }

.es-post-grid { gap: 1.5rem !important; }
.es-post-card { height: 100%; background: #fff; border: 1px solid var(--es-line); border-radius: var(--es-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.es-post-card > * { margin: 0 !important; }
.es-post-card__img img { display: block; width: 100%; object-fit: cover; }
.es-post-card__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.es-post-card__body > * { margin: 0 !important; }
.es-post-card__meta { align-items: center; gap: 0.5rem; }
.es-post-card__meta > * { margin: 0 !important; }
.es-post-card__title { font-size: 1.1875rem !important; line-height: 1.35; }
.es-post-card__title a { text-decoration: none; color: var(--es-navy); }
.es-post-card__title a:hover { color: var(--es-green-ink); }
.es-post-card__excerpt { color: var(--es-muted); font-size: 0.9375rem; }
.es-post-card__excerpt .wp-block-post-excerpt__excerpt { margin: 0; }
.es-post-card .es-link { margin-top: auto !important; }
@media (max-width: 1023px) { .es-post-grid.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .es-post-grid.wp-block-post-template { grid-template-columns: 1fr !important; } }
.es-pagination { margin-top: 2.5rem !important; gap: 0.5rem; font-weight: 600; }
.es-pagination a, .es-pagination .page-numbers { padding: 0.45rem 0.8rem; border-radius: 8px; text-decoration: none; }
.es-pagination .current { background: var(--es-navy); color: #fff; }
.es-empty { text-align: center; color: var(--es-muted); padding: 2rem; border: 1px dashed var(--es-line); border-radius: var(--es-radius); }

.es-featured-tpl { list-style: none; padding: 0; margin: 0; }
.es-featured-sec { padding-bottom: 0; }
.es-featured { display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; border: 1px solid var(--es-line); border-radius: var(--es-radius); overflow: hidden; box-shadow: var(--wp--preset--shadow--card); }
.es-featured > * { margin: 0 !important; }
.es-featured__body { padding: clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1rem; }
.es-featured__body > * { margin: 0 !important; }
.es-featured__title { font-size: clamp(1.625rem, 3vw, 2.25rem) !important; }
.es-featured__title a { color: var(--es-navy); text-decoration: none; }
.es-featured__body .wp-block-post-excerpt { color: var(--es-muted); }
.es-featured__foot { margin-top: auto !important; padding-top: 1.25rem; border-top: 1px solid var(--es-line); align-items: center; gap: 1rem; }
.es-featured__foot .es-byline { margin: 0 !important; padding: 0; border: 0; }
.es-featured__img { height: 100%; }
.es-featured__img img, .es-featured__img a { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
@media (max-width: 781px) { .es-featured { grid-template-columns: 1fr; } .es-featured__img { order: -1; } .es-featured__img img { min-height: 220px; } }

/* single post */
.es-hero--post .es-head--hero h1 { max-width: 24ch; }
.es-post-meta { gap: 0.4rem 1.25rem; margin-top: 1.5rem !important; align-items: center; }
.es-post-meta > * { margin: 0 !important; font-size: 0.9375rem; color: var(--es-body-dark); }
@media (min-width: 600px) { .es-post-meta > * + *::before { content: "·"; margin-right: 1.25rem; color: rgba(201, 212, 230, 0.5); } }
.es-post-meta__by { color: #fff !important; font-weight: 600; }
.es-reading-time { white-space: nowrap; }
.es-article { padding-block: clamp(3rem, 6vw, 4.5rem); }
.es-article__cols { gap: clamp(2rem, 5vw, 4rem) !important; }
.es-article__img { margin-bottom: 2.25rem !important; }
.es-article__img img { border-radius: var(--es-radius); box-shadow: var(--wp--preset--shadow--card); }
.es-prose { max-width: 720px; font-size: 1.0625rem; line-height: 1.78; }
.es-prose > * + * { margin-block-start: 1.25em; }
.es-prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.75rem); margin-block-start: 2.5rem; }
.es-prose h3 { font-size: 1.3125rem; margin-block-start: 2rem; }
.es-prose a { color: var(--es-green-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.es-prose code { font-family: var(--es-mono); font-size: 0.875em; background: var(--es-mint); color: var(--es-green-ink); padding: 0.1em 0.35em; border-radius: 4px; }
.es-prose blockquote:not(.es-pullquote) { border-left: 4px solid var(--es-green); padding: 0.25rem 0 0.25rem 1.25rem; margin-inline: 0; font-style: italic; color: var(--es-navy); }
.es-prose .es-figure { margin-block: 2rem 0; }
.es-prose .es-caption { text-align: left; }
.es-dropcap::first-letter { float: left; font-family: var(--es-heading); font-weight: 800; font-size: 3.6em; line-height: 0.85; margin: 0.08em 0.12em 0 0; color: var(--es-navy); }
.es-author { margin-top: 3rem !important; gap: 1.1rem; padding: 1.5rem; border-radius: var(--es-radius); background: var(--es-mint); max-width: 720px; }
.es-author > * { margin: 0 !important; }
.es-author .es-author__av img { width: 56px; height: 56px; border-radius: 14px; }
.es-author h4 { margin: 0.15rem 0 0.4rem; }
.es-author p { margin: 0 0 0.4rem; color: var(--es-text); font-size: 0.9375rem; }
.es-sidebar { position: sticky; top: calc(var(--es-header-h) + 1.5rem); display: grid; gap: 1.25rem; }
.es-sidebar > * { margin: 0 !important; }
.es-card--side .es-logo img { width: 140px; }
.es-side-title { font-size: 0.75rem !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--es-muted) !important; }
.es-side-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.es-side-list li { border-bottom: 1px solid var(--es-line); padding: 0.75rem 0; }
.es-side-list li:last-child { border-bottom: 0; }
.es-side-list h5 { margin: 0; font-size: 0.9375rem; line-height: 1.4; }
.es-side-list a { text-decoration: none; color: var(--es-navy); }
.es-side-list a:hover { color: var(--es-green-ink); }
@media (max-width: 781px) { .es-sidebar { position: static; } }

.es-page-body { padding-block: clamp(3rem, 6vw, 5rem); }
.es-search .wp-block-search__input { border-radius: 10px; border: 1px solid var(--es-line); padding: 0.8rem 1rem; }
.es-search .wp-block-search__button { border-radius: 10px; margin-left: 0.5rem; }

/* ----------------------------------------------------------- contact + forms */
.es-contact__cols { gap: clamp(1.5rem, 4vw, 2.5rem) !important; }
.es-card--form { padding: clamp(1.5rem, 3.5vw, 2.5rem); box-shadow: var(--wp--preset--shadow--card); }
.es-card--info { border-left: 4px solid var(--es-navy); box-shadow: var(--wp--preset--shadow--card); }
.es-card__sep { margin-top: 0.75rem !important; padding-top: 1.25rem; border-top: 1px solid var(--es-line); display: grid; gap: 0.35rem; }
.es-card__sep > * { margin: 0 !important; }
.es-big-mail a { font-size: 1.125rem; font-weight: 700; color: var(--es-green-ink); text-decoration: none; }
.es-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--es-green); margin-right: 0.5rem; vertical-align: middle; }

.es-form { display: grid; gap: 1.15rem; }
.es-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 640px) { .es-form__row { grid-template-columns: 1fr; } }
.es-field { display: grid; gap: 0.45rem; }
.es-field label { font-size: 0.875rem; font-weight: 600; color: var(--es-navy); }
.es-field label .es-req { color: var(--es-green-ink); }
.es-field label .es-opt { color: var(--es-muted); font-weight: 400; }
.es-field input, .es-field select, .es-field textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9688rem; color: var(--es-text);
	background: var(--es-ivory); border: 1.5px solid #CFD6E0; border-radius: 8px; padding: 0.85rem 1rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.es-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--es-navy) 50%), linear-gradient(135deg, var(--es-navy) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.es-field textarea { min-height: 150px; resize: vertical; }
.es-field input:focus, .es-field select:focus, .es-field textarea:focus { outline: none; border-color: var(--es-green-ink); box-shadow: 0 0 0 3px rgba(0, 217, 126, 0.25); background: #fff; }
.es-form__submit { width: 100%; justify-content: center; cursor: pointer; border: 0; font-size: 1rem !important; padding-block: 1.05rem !important; }
.es-form__fine { text-align: center; font-size: 0.8125rem; color: var(--es-muted); margin: 0; }
.es-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.es-alert { padding: 1rem 1.15rem; border-radius: 10px; font-size: 0.9375rem; font-weight: 500; margin: 0 0 1rem; }
.es-alert--ok { background: var(--es-mint); color: var(--es-green-ink); border: 1px solid rgba(0, 122, 77, 0.25); }
.es-alert--err { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.es-newsletter-form { display: flex; gap: 0.6rem; max-width: 560px; margin-inline: auto; flex-wrap: wrap; }
.es-newsletter-form input[type="email"] { flex: 1 1 240px; min-width: 0; font: inherit; padding: 0.95rem 1.1rem; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; }
.es-newsletter-form input[type="email"]::placeholder { color: rgba(201, 212, 230, 0.6); }
.es-newsletter-form input[type="email"]:focus { outline: none; border-color: var(--es-green); }
.es-newsletter-form .wp-element-button { background: #fff; color: var(--es-navy); cursor: pointer; border: 0; }
.es-newsletter-form .wp-element-button:hover { background: var(--es-green); color: var(--es-ink); }
.es-newsletter .es-alert { max-width: 560px; margin-inline: auto; }

/* ----------------------------------------------------------- mobile tune-ups */
@media (max-width: 781px) {
	.es-hero__cols > .wp-block-column:last-child { margin-top: 1rem; }
	.es-head-row { flex-direction: column; align-items: flex-start !important; }
	.es-split .es-panel, .es-split .es-browser, .es-split .es-flow, .es-split .es-migrate, .es-split .es-compare-cards { margin-top: 0.5rem; }
	.es-section > * + * { margin-block-start: 2rem; }
}

/* Editor-only niceties */
.editor-styles-wrapper .es-site-header { position: relative; top: 0; }
.editor-styles-wrapper .es-work-card.is-hidden { display: flex; }

/* ----------------------------------------------------------- icon set (inline SVG masks) */
:root {
	--es-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--es-i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.6-5h14.8L21 9M3 9h18M3 9a3 3 0 006 0 3 3 0 006 0 3 3 0 006 0M5 12v8h14v-8M10 20v-5h4v5'/%3E%3C/svg%3E");
	--es-i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E");
	--es-i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 10-2.3 5.7M20 4v7h-7'/%3E%3C/svg%3E");
	--es-i-trending: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E");
	--es-i-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15l-4-4M20 16H5l4 4'/%3E%3C/svg%3E");
	--es-i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16'/%3E%3C/svg%3E");
	--es-i-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='3'/%3E%3Cpath d='M12 4v4M9 13v2M15 13v2'/%3E%3Ccircle cx='12' cy='3' r='1'/%3E%3C/svg%3E");
	--es-i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
	--es-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
	--es-i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--es-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E");
	--es-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	--es-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--es-i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5M9 13h7M9 17h5'/%3E%3C/svg%3E");
	--es-i-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3'/%3E%3C/svg%3E");
	--es-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E");
}
.es-ico--check { --i: var(--es-i-check); }
.es-ico--store { --i: var(--es-i-store); }
.es-ico--layers { --i: var(--es-i-layers); }
.es-ico--refresh { --i: var(--es-i-refresh); }
.es-ico--trending { --i: var(--es-i-trending); }
.es-ico--swap { --i: var(--es-i-swap); }
.es-ico--code { --i: var(--es-i-code); }
.es-ico--bot { --i: var(--es-i-bot); }
.es-ico--bolt { --i: var(--es-i-bolt); }
.es-ico--shield { --i: var(--es-i-shield); }
.es-ico--eye { --i: var(--es-i-eye); }
.es-ico--lock { --i: var(--es-i-lock); }
.es-ico--mail { --i: var(--es-i-mail); }
.es-ico--clock { --i: var(--es-i-clock); }
.es-ico--doc { --i: var(--es-i-doc); }
.es-ico--video { --i: var(--es-i-video); }
.es-ico--globe { --i: var(--es-i-globe); }