/* Breash CV — site styles (Apple-inspired). Colours come from theme.json presets: change them in Styles > Colours.
   Layout: full-width bands alternating white / light gray, centred section heads, 980px content, one dark closing band. */

/* ---------- Dark mode: redefine the palette tokens ---------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--base: #000000;
		--wp--preset--color--alt: #101012;
		--wp--preset--color--surface: #1c1c1e;
		--wp--preset--color--contrast: #f5f5f7;
		--wp--preset--color--muted: #a1a1a6;
		--wp--preset--color--line: #38383d;
		--wp--preset--color--accent: #2997ff;
		--wp--preset--color--accent-2: #6cc4ff;
		--wp--preset--color--accent-deep: #2997ff;
		--wp--preset--color--on-accent: #ffffff;
		--wp--preset--color--dark: #161617;
		--wp--preset--color--on-dark: #f5f5f7;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--wp--preset--color--base: #000000;
	--wp--preset--color--alt: #101012;
	--wp--preset--color--surface: #1c1c1e;
	--wp--preset--color--contrast: #f5f5f7;
	--wp--preset--color--muted: #a1a1a6;
	--wp--preset--color--line: #38383d;
	--wp--preset--color--accent: #2997ff;
	--wp--preset--color--accent-2: #6cc4ff;
	--wp--preset--color--accent-deep: #2997ff;
	--wp--preset--color--on-accent: #ffffff;
	--wp--preset--color--dark: #161617;
	--wp--preset--color--on-dark: #f5f5f7;
	color-scheme: dark;
}

:root {
	--b-bg: var(--wp--preset--color--base);
	--b-alt: var(--wp--preset--color--alt);
	--b-surface: var(--wp--preset--color--surface);
	--b-ink: var(--wp--preset--color--contrast);
	--b-muted: var(--wp--preset--color--muted);
	--b-line: var(--wp--preset--color--line);
	--b-accent: var(--wp--preset--color--accent);
	--b-accent-2: var(--wp--preset--color--accent-2);
	--b-accent-deep: var(--wp--preset--color--accent-deep);
	--b-on-accent: var(--wp--preset--color--on-accent);
	--b-dark: var(--wp--preset--color--dark);
	--b-on-dark: var(--wp--preset--color--on-dark);
	--b-radius: 22px;
	--b-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 10px 30px -12px rgba(0, 0, 0, .12);
	--b-shadow-hover: 0 4px 10px rgba(0, 0, 0, .05), 0 22px 44px -18px rgba(0, 0, 0, .22);
	--b-ease: cubic-bezier(.25, .1, .25, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:where(a, button, summary, img[tabindex]):focus-visible { outline: 3px solid var(--b-accent); outline-offset: 3px; border-radius: 8px; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
html[lang^="en"] h1, html[lang^="en"] h2 { letter-spacing: -0.015em; }
html[lang^="ar"] h1, html[lang^="ar"] h2 { line-height: 1.3; }

/* ---------- Global header (thin bar) ---------- */
.site-header { background: var(--b-bg); }
.site-header-in { min-height: 48px; gap: 12px; }
.site-name { font-size: 1.0625rem; font-weight: 600; margin: 0; }
.site-name a { color: var(--b-ink); text-decoration: none; }
.site-tools { gap: 6px; }
.breash-lang { display: flex; gap: 6px; }
.breash-tbtn {
	font: inherit; font-size: 0.8125rem; font-weight: 600; min-height: 36px; min-width: 36px; padding: 0 12px;
	border: 0; background: var(--b-alt); color: var(--b-ink); border-radius: 980px;
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.breash-tbtn:hover { background: var(--b-line); }
.breash-tbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- Local nav (sticky, frosted glass) ---------- */
.local-nav {
	position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
	background: color-mix(in srgb, var(--b-bg) 72%, transparent);
	backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid color-mix(in srgb, var(--b-line) 70%, transparent);
}
.admin-bar .local-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .local-nav { top: 46px; } }
.local-nav.is-layout-constrained > *, .local-nav > * { margin-block: 0 !important; }
.local-nav { display: flex; align-items: center; gap: 24px; min-height: 52px; padding-inline: max(22px, calc((100% - 980px) / 2)) !important; }
.local-nav > .local-title { font-size: 1.1875rem; font-weight: 600; white-space: nowrap; margin-inline: 0 !important; max-width: none !important; flex-shrink: 0; }
.local-nav > .local-links { flex: 1; min-width: 0; display: flex; justify-content: flex-end; gap: 0 22px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin-inline: 0 !important; max-width: none !important; }
.local-links::-webkit-scrollbar { display: none; }
.local-links a { color: var(--b-ink); opacity: .8; text-decoration: none; font-size: 0.8125rem; min-height: 52px; display: inline-flex; align-items: center; }
.local-links a:hover { opacity: 1; color: var(--b-accent); }
.local-links a.is-active { opacity: 1; color: var(--b-accent); }
@media (max-width: 700px) { .local-nav > .local-title { display: none; } .local-nav > .local-links { justify-content: flex-start; } }

/* ---------- Bands ---------- */
.cv-main { padding-block: 0 !important; }
.cv-main > .wp-block-post-content > * + * { margin-block-start: 0 !important; }
.band { padding-block: clamp(4.5rem, 9vw, 7.5rem) !important; margin-block: 0 !important; }
.band-white { background: var(--b-bg); }
.band-gray { background: var(--b-alt); }
.band-dark { background: var(--b-dark); color: var(--b-on-dark); }
.band > * + * { margin-block-start: 0; }
.band-head { margin-block-end: clamp(2.5rem, 5vw, 3.75rem) !important; }
.band-head > * { margin: 0 !important; }
.band-head.is-center { text-align: center; }
.band-head h2 { font-size: var(--wp--preset--font-size--x-large); }
.band-head .sub { color: var(--b-muted); font-size: var(--wp--preset--font-size--large); margin-block-start: 0.75rem !important; max-width: 40ch; margin-inline: auto !important; }
.band-head:not(.is-center) .sub { margin-inline: 0 !important; }
.band-text { max-width: 62ch; margin-inline: auto !important; font-size: var(--wp--preset--font-size--large); color: var(--b-muted); text-align: center; }

/* ---------- Hero ---------- */
.band:has(.hero) { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 6.5rem) !important; }
.hero { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero > * { margin: 0 !important; }
.portrait { margin-block-end: 1.75rem !important; }
.portrait img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; display: block; box-shadow: var(--b-shadow); }
.hero h1 { font-size: var(--wp--preset--font-size--xx-large); }
.tagline {
	margin-block-start: 0.75rem !important;
	font-family: var(--wp--preset--font-family--display); font-weight: 700;
	font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem); line-height: 1.3; max-width: 22ch; text-wrap: balance;
	background: linear-gradient(90deg, var(--b-accent-deep), var(--b-accent-2));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
html[dir="rtl"] .tagline { background: linear-gradient(270deg, var(--b-accent-deep), var(--b-accent-2)); -webkit-background-clip: text; background-clip: text; }
.hero .role { margin-block-start: 1rem !important; font-size: var(--wp--preset--font-size--large); font-weight: 600; color: var(--b-ink); max-width: 36ch; }
.hero .lede { margin-block-start: 1.25rem !important; color: var(--b-muted); font-size: 1.0625rem; max-width: 60ch; }
.hero .lede strong { color: var(--b-ink); font-weight: 600; }
.hero .wp-block-buttons { margin-block-start: 2rem !important; justify-content: center; gap: 14px 22px; }

/* Buttons: pill primary + "text link ›" secondary */
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; transition: background .2s var(--b-ease), transform .2s var(--b-ease); }
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: color-mix(in srgb, var(--b-accent) 85%, #000); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent !important; color: var(--b-accent); border: 0; padding-inline: 0.25rem; }
.wp-block-button.is-style-outline > .wp-block-button__link::after { content: "›"; margin-inline-start: 0.35em; font-size: 1.2em; line-height: 1; transition: transform .2s var(--b-ease); }
html[dir="rtl"] .wp-block-button.is-style-outline > .wp-block-button__link::after { content: "‹"; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { text-decoration: underline; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover::after { transform: translateX(3px); }
html[dir="rtl"] .wp-block-button.is-style-outline > .wp-block-button__link:hover::after { transform: translateX(-3px); }

/* ---------- Numbers ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2rem 1.5rem; text-align: center; }
.stats > * { margin: 0 !important; }
.stat > * { margin: 0 !important; }
.stat-num { font-family: var(--wp--preset--font-family--display); font-size: clamp(2.75rem, 2rem + 3vw, 4rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, var(--b-ink), color-mix(in srgb, var(--b-ink) 65%, var(--b-alt))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-label { color: var(--b-muted); font-size: 0.9375rem; margin-block-start: 0.5rem !important; }

/* ---------- Client logos ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.5vw, 24px); }
@media (min-width: 900px) { .logo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.logo-grid > * { margin: 0 !important; }
.logo-grid .wp-block-image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; display: block; background: #fff; box-shadow: var(--b-shadow); }
.logo-grid .wp-element-caption { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--b-muted); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
	.logo-grid .wp-block-image img { transition: transform .35s var(--b-ease), box-shadow .35s var(--b-ease); }
	.logo-grid .wp-block-image:hover img { transform: scale(1.04); box-shadow: var(--b-shadow-hover); }
}

/* ---------- Highlights rail (horizontal carousel) ---------- */
.hl-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-end: 2rem; }
.hl-filters button { font: inherit; font-size: 0.875rem; min-height: 36px; padding: 0 16px; border-radius: 980px; border: 0; background: var(--b-surface); color: var(--b-ink); cursor: pointer; box-shadow: 0 0 0 1px var(--b-line) inset; }
.hl-filters button:hover { box-shadow: 0 0 0 1px var(--b-ink) inset; }
.hl-filters button[aria-pressed="true"] { background: var(--b-ink); color: var(--b-bg); box-shadow: none; }
.hl-rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 360px); gap: 20px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
	padding-block: 6px 26px; padding-inline: 2px; scrollbar-width: none;
}
.hl-rail::-webkit-scrollbar { display: none; }
.hl-rail > * { margin: 0 !important; }
.hl-card { scroll-snap-align: start; background: var(--b-surface); border-radius: var(--b-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--b-shadow); }
.hl-card[hidden] { display: none !important; }
.hl-card > * { margin: 0 !important; }
.hl-media { overflow: hidden; position: relative; }
.hl-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.hl-card .wp-block-gallery { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0 !important; scrollbar-width: none; }
.hl-card .wp-block-gallery > .wp-block-image { flex: 0 0 100% !important; width: 100% !important; scroll-snap-align: start; margin: 0 !important; }
.hl-card .wp-block-gallery img { aspect-ratio: 4 / 3; object-fit: cover; height: auto !important; }
.hl-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.hl-body > * { margin: 0 !important; }
.hl-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 0.75rem; color: var(--b-muted); }
.hl-cat { color: var(--b-accent); font-weight: 600; }
.hl-body h3 { font-size: 1.3125rem; line-height: 1.35; }
.hl-body p:not(.hl-cat):not(.hl-date) { color: var(--b-muted); font-size: 0.9375rem; }
.rail-controls { display: flex; justify-content: flex-end; gap: 12px; margin-block-start: 0.5rem; }
.rail-controls button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--b-ink) 10%, transparent); color: var(--b-ink); cursor: pointer; display: grid; place-items: center; transition: background .2s var(--b-ease), opacity .2s; }
.rail-controls button:hover:not(:disabled) { background: color-mix(in srgb, var(--b-ink) 18%, transparent); }
.rail-controls button:disabled { opacity: .35; cursor: default; }
.rail-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
	.hl-card { transition: transform .4s var(--b-ease), box-shadow .4s var(--b-ease); }
	.hl-card:hover { transform: scale(1.015); box-shadow: var(--b-shadow-hover); }
	.hl-media img { transition: transform .6s var(--b-ease); }
	.hl-card:hover .hl-media img { transform: scale(1.05); }
}

/* ---------- Services (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 20px; }
.bento > * { margin: 0 !important; }
.svc { background: var(--b-alt); border-radius: var(--b-radius); padding: 2.25rem 2rem 2rem; display: flex; flex-direction: column; }
.svc > * { margin: 0 !important; }
.svc h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.25; margin-block-end: 0.85rem !important;
	background: linear-gradient(90deg, var(--b-accent-deep), var(--b-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.svc p { color: var(--b-muted); font-size: 1rem; }
.svc .svc-proof { margin-block-start: auto !important; padding-block-start: 1.5rem; color: var(--b-ink); font-size: 0.875rem; }
.svc .svc-proof::before { content: ""; display: block; height: 1px; background: var(--b-line); margin-block-end: 1rem; }

/* ---------- Experience ---------- */
.jobs { background: var(--b-surface); border-radius: var(--b-radius); padding: 0.5rem clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--b-shadow); }
.jobs > * { margin: 0 !important; }
.job { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0.25rem 2rem; padding-block: 1.75rem; border-bottom: 1px solid var(--b-line); }
.job:last-child { border-bottom: 0; }
.job > * { margin: 0 !important; }
.job-main > * { margin: 0 !important; }
.when { color: var(--b-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; padding-block-start: 0.2rem; }
.job.is-current .when { color: var(--b-accent); font-weight: 600; }
.job-main h3 { font-size: 1.3125rem; }
.org { color: var(--b-muted); margin-block-end: 0.6rem !important; }
.duties { padding-inline-start: 1.15rem; margin: 0; font-size: 0.9375rem; color: var(--b-ink); }
.duties li { margin-block: 3px; }
.duties li::marker { color: var(--b-muted); }
.duties li.is-extra { display: none; }
.duties.is-open li.is-extra { display: list-item; }
.breash-more { display: block; margin: 1.5rem auto 0; font: inherit; font-size: 1.0625rem; color: var(--b-accent); background: none; border: 0; padding: 0.5rem; min-height: 44px; cursor: pointer; }
.breash-more:hover { text-decoration: underline; }
@media (max-width: 640px) { .job { grid-template-columns: 1fr; } }

/* ---------- Skills / education / certificates ---------- */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 2.25rem 2rem; margin-block-end: clamp(3rem, 6vw, 4.5rem) !important; }
.skills-grid > * { margin: 0 !important; }
.skill-col h3 { font-size: 1.0625rem; margin: 0 0 0.75rem; padding-block-end: 0.75rem; border-bottom: 1px solid var(--b-line); }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { color: var(--b-muted); font-size: 0.9375rem; margin-block: 0.3rem; }
.info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; }
@media (max-width: 760px) { .info-grid { grid-template-columns: 1fr; } }
.info-grid > * { margin: 0 !important; }
.info-card { background: var(--b-alt); border-radius: var(--b-radius); padding: 2rem; }
.info-card > * { margin-block: 0 0.35rem !important; }
.info-card h3 { font-size: 1.5rem; margin-block-end: 1rem !important; }
.muted { color: var(--b-muted); }
.certs { list-style: none; padding: 0; margin: 0; }
.certs li { padding-block: 0.8rem; border-bottom: 1px solid var(--b-line); color: var(--b-muted); font-size: 0.875rem; margin: 0; }
.certs li:last-child { border-bottom: 0; }
.certs li strong { color: var(--b-ink); font-weight: 600; font-size: 1rem; }
.wp-block-details { margin-block-start: 0.75rem !important; }
.wp-block-details summary { cursor: pointer; color: var(--b-accent); min-height: 44px; display: flex; align-items: center; }
.wp-block-details ul { color: var(--b-muted); font-size: 0.875rem; }

/* ---------- Contact (dark band) ---------- */
.contact { text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact > * { margin: 0 !important; }
.contact-big { font-size: var(--wp--preset--font-size--xx-large) !important; color: var(--b-on-dark); }
.contact .sub { color: color-mix(in srgb, var(--b-on-dark) 70%, transparent); font-size: var(--wp--preset--font-size--large); max-width: 46ch; margin-block-start: 1rem !important; }
.contact .wp-block-buttons { margin-block-start: 2.25rem !important; justify-content: center; gap: 14px 24px; }
.band-dark .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--b-accent-2); }
.contact-lines { margin-block-start: 2.5rem !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; }
.contact-lines > * { margin: 0 !important; }
.contact-line { color: color-mix(in srgb, var(--b-on-dark) 60%, transparent); font-size: 0.875rem; }
.contact-line a { color: var(--b-on-dark); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.contact-line a:hover { color: var(--b-accent-2); }

/* ---------- Testimonials (optional pattern) ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.quote-grid > * { margin: 0 !important; }
.quote-card { background: var(--b-alt); border-radius: var(--b-radius); padding: 2rem; }
.quote-card > * { margin: 0 !important; }
.quote { font-size: 1.1875rem; margin-block-end: 1rem !important; }
.quote-name { font-weight: 600; }
.quote-role { color: var(--b-muted); font-size: 0.875rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--b-alt); border-top: 1px solid var(--b-line); padding-block: 1.25rem 1.75rem; color: var(--b-muted); font-size: 0.75rem; }
.footer-name { font-size: 0.75rem; margin: 0; }
.footer-name a { color: var(--b-muted); }

/* =====================================================================
   Glossy layer — glass surfaces, specular edge highlights, hover sheen.
   Restrained: blur only where it reads (nav, cards on tinted bands),
   solid fallbacks without backdrop-filter or with reduced transparency.
   ===================================================================== */
:root {
	--g-fill: color-mix(in srgb, var(--b-surface) 66%, transparent);
	--g-fill-strong: color-mix(in srgb, var(--b-surface) 82%, transparent);
	--g-edge: rgba(255, 255, 255, .75);
	--g-edge-soft: rgba(255, 255, 255, .35);
	--g-rim: rgba(0, 0, 0, .06);
	--g-sheen: rgba(255, 255, 255, .45);
	--g-blur: saturate(180%) blur(18px);
	--g-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 8px 24px -10px rgba(0, 30, 80, .16), 0 24px 48px -28px rgba(0, 30, 80, .18);
	--g-shadow-hover: 0 2px 2px rgba(0, 0, 0, .04), 0 14px 32px -12px rgba(0, 50, 140, .22), 0 34px 64px -30px rgba(0, 50, 140, .26);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --g-edge: rgba(255, 255, 255, .16); --g-edge-soft: rgba(255, 255, 255, .07); --g-rim: rgba(255, 255, 255, .08); --g-sheen: rgba(255, 255, 255, .12);
		--g-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6); --g-shadow-hover: 0 2px 2px rgba(0, 0, 0, .3), 0 18px 40px -14px rgba(0, 0, 0, .7); }
}
:root[data-theme="dark"] { --g-edge: rgba(255, 255, 255, .16); --g-edge-soft: rgba(255, 255, 255, .07); --g-rim: rgba(255, 255, 255, .08); --g-sheen: rgba(255, 255, 255, .12);
	--g-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6); --g-shadow-hover: 0 2px 2px rgba(0, 0, 0, .3), 0 18px 40px -14px rgba(0, 0, 0, .7); }

/* Ambient light behind glass: soft blue glows on the hero and gray bands */
.band:has(.hero) {
	background:
		radial-gradient(55% 60% at 18% 0%, color-mix(in srgb, var(--b-accent-2) 13%, transparent), transparent 70%),
		radial-gradient(45% 55% at 88% 20%, color-mix(in srgb, var(--b-accent-deep) 9%, transparent), transparent 72%),
		var(--b-bg);
}
.band-gray {
	background:
		radial-gradient(50% 45% at 12% 8%, color-mix(in srgb, var(--b-accent-2) 10%, transparent), transparent 70%),
		radial-gradient(45% 50% at 90% 92%, color-mix(in srgb, var(--b-accent-deep) 8%, transparent), transparent 72%),
		var(--b-alt);
}
.band-dark {
	background:
		radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--b-accent-deep) 34%, transparent), transparent 70%),
		radial-gradient(40% 50% at 85% 100%, color-mix(in srgb, var(--b-accent-2) 18%, transparent), transparent 70%),
		var(--b-dark);
}

/* Glass surfaces */
.hl-card, .svc, .jobs, .info-card, .quote-card {
	position: relative; isolation: isolate;
	background: var(--g-fill-strong);
	border: 1px solid var(--g-rim);
	box-shadow: inset 0 1px 0 var(--g-edge), inset 0 0 0 1px var(--g-edge-soft), var(--g-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.band-gray .hl-card, .band-gray .jobs, .svc, .info-card {
		background: var(--g-fill);
		-webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
	}
}
/* On white bands the glass sits on a faint tint so it stays visible */
.band-white .svc, .band-white .info-card, .band-white .quote-card {
	background: linear-gradient(180deg, color-mix(in srgb, var(--b-alt) 55%, var(--b-surface)), var(--b-alt));
}

/* Specular top edge + hover sheen sweep */
.hl-card::after, .svc::after, .info-card::after, .wp-block-button:not(.is-style-outline) > .wp-block-button__link::after, .logo-grid .wp-block-image::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
	background: linear-gradient(110deg, transparent 32%, var(--g-sheen) 48%, transparent 64%);
	background-size: 260% 100%; background-position: 130% 0; opacity: 0;
}
html[dir="rtl"] .hl-card::after, html[dir="rtl"] .svc::after, html[dir="rtl"] .info-card::after,
html[dir="rtl"] .wp-block-button:not(.is-style-outline) > .wp-block-button__link::after, html[dir="rtl"] .logo-grid .wp-block-image::after { background-position: -30% 0; }
.svc::before, .info-card::before, .hl-body::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 50%; border-radius: inherit; pointer-events: none; z-index: -1;
	background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
	opacity: .55;
}
.hl-body { position: relative; z-index: 0; }
.hl-body::before { border-radius: 0; opacity: .35; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .svc::before, :root:not([data-theme="light"]) .info-card::before, :root:not([data-theme="light"]) .hl-body::before { opacity: .06; } }
:root[data-theme="dark"] .svc::before, :root[data-theme="dark"] .info-card::before, :root[data-theme="dark"] .hl-body::before { opacity: .06; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hl-card::after, .svc::after, .info-card::after, .wp-block-button:not(.is-style-outline) > .wp-block-button__link::after, .logo-grid .wp-block-image::after {
		transition: background-position 1s var(--b-ease), opacity .3s var(--b-ease);
	}
	.hl-card:hover::after, .svc:hover::after, .info-card:hover::after, .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::after, .logo-grid .wp-block-image:hover::after {
		opacity: 1; background-position: -30% 0;
	}
	html[dir="rtl"] .hl-card:hover::after, html[dir="rtl"] .svc:hover::after, html[dir="rtl"] .info-card:hover::after,
	html[dir="rtl"] .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::after, html[dir="rtl"] .logo-grid .wp-block-image:hover::after { background-position: 130% 0; }
	.svc, .info-card { transition: transform .4s var(--b-ease), box-shadow .4s var(--b-ease); }
	.svc:hover, .info-card:hover, .hl-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--g-edge), inset 0 0 0 1px var(--g-edge-soft), var(--g-shadow-hover); }
}
/* Hover lift only on devices that can hover (no sticky hover on touch) */
@media (hover: none) { .hl-card:hover, .hl-card:hover .hl-media img, .logo-grid .wp-block-image:hover img { transform: none; } }

/* Glossy logo tiles */
.logo-grid .wp-block-image { position: relative; border-radius: 20px; }
.logo-grid .wp-block-image img { box-shadow: inset 0 1px 0 var(--g-edge), 0 0 0 1px var(--g-rim), var(--g-shadow); }
.logo-grid .wp-block-image::before {
	content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 2 / 1; border-radius: 20px 20px 0 0; pointer-events: none; z-index: 1;
	background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
}
.logo-grid .wp-block-image::after { inset: 0 0 auto; aspect-ratio: 1; }

/* Glossy pill buttons */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(180deg, color-mix(in srgb, var(--b-accent) 78%, #fff), var(--b-accent) 55%, color-mix(in srgb, var(--b-accent) 88%, #000));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 8px 20px -8px color-mix(in srgb, var(--b-accent) 70%, transparent);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: linear-gradient(180deg, color-mix(in srgb, var(--b-accent) 70%, #fff), var(--b-accent) 50%, color-mix(in srgb, var(--b-accent) 80%, #000));
}
.band-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 30px -8px color-mix(in srgb, var(--b-accent) 80%, transparent); }

/* Glass controls: language/theme, filters, carousel arrows */
.breash-tbtn, .hl-filters button, .rail-controls button {
	background: var(--g-fill-strong);
	box-shadow: inset 0 1px 0 var(--g-edge), 0 0 0 1px var(--g-rim), 0 2px 8px -4px rgba(0, 0, 0, .2);
	-webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
.hl-filters button[aria-pressed="true"] {
	background: linear-gradient(180deg, color-mix(in srgb, var(--b-ink) 82%, #fff), var(--b-ink));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 12px -6px rgba(0, 0, 0, .4);
}

/* Glass nav: add a specular hairline under the frosted bar */
.local-nav { box-shadow: inset 0 1px 0 var(--g-edge-soft), 0 1px 0 var(--g-rim); }

/* Portrait: glossy ring */
.portrait { position: relative; padding: 4px; border-radius: 50%;
	background: linear-gradient(145deg, color-mix(in srgb, var(--b-accent-2) 70%, #fff), var(--b-accent-deep));
	box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--b-accent) 60%, transparent); }
.portrait img { border: 3px solid var(--b-bg); box-shadow: none; }

/* Accessibility: users who ask for less transparency get solid surfaces */
@media (prefers-reduced-transparency: reduce) {
	.local-nav, .hl-card, .svc, .jobs, .info-card, .breash-tbtn, .hl-filters button, .rail-controls button {
		-webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--b-surface) !important;
	}
	.local-nav { background: var(--b-bg) !important; }
}

/* =====================================================================
   Responsive + Google page-experience refinements
   ===================================================================== */
/* Tap targets ≥ 44–48px, readable minimum text size */
.breash-tbtn { min-height: 44px; min-width: 44px; }
.hl-filters button { min-height: 44px; padding-inline: 18px; }
.hl-meta { font-size: 0.8125rem; }
.site-footer, .footer-name { font-size: 0.8125rem; }
.contact-line a { display: inline-block; padding-block: 0.5rem; }

/* Small phones */
@media (max-width: 420px) {
	.band { padding-block: 3.75rem !important; }
	.hero .wp-block-buttons { flex-direction: column; align-items: stretch; width: 100%; }
	.hero .wp-block-button, .contact .wp-block-button { width: 100%; }
	.hero .wp-block-button__link, .contact .wp-block-button__link { width: 100%; justify-content: center; }
	.svc, .info-card { padding: 1.6rem 1.35rem; }
	.jobs { padding-inline: 1.1rem; }
	.hl-rail { grid-auto-columns: 86%; }
	.contact .wp-block-buttons { flex-direction: column; align-items: stretch; width: 100%; }
}
/* Tablets */
@media (min-width: 600px) and (max-width: 1023px) {
	.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bento > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Large screens: three equal service columns */
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Landscape phones: keep the sticky nav slim */
@media (max-height: 500px) and (orientation: landscape) { .local-nav { min-height: 44px; } .local-links a { min-height: 44px; } }
/* Never scroll the page sideways */
html, body { overflow-x: clip; }