/**
 * Hytech — supplementary styles.
 *
 * theme.json handles colours, typography, spacing and most block styling.
 * This file only covers the few things theme.json cannot express: the custom
 * block-style variations registered in functions.php, and a couple of small
 * visual textures from the design (dotted grid, gradient accent line).
 *
 * Keep this file small. Prefer theme.json / the Site Editor for anything the
 * client should be able to change themselves.
 */

/* -------------------------------------------------------------------------
 * Layout utilities.
 * These replace inline styles that WordPress does not re-serialise on the
 * block (overflow, width:fit-content), which otherwise trigger "invalid
 * content" warnings in the editor. Applied via className so the saved markup
 * stays canonical.
 * ---------------------------------------------------------------------- */
.hytech-clip {
	overflow: hidden;
}
.hytech-iconbox {
	width: fit-content;
	min-width: 64px;
	min-height: 64px;
	background-color: rgba(225, 252, 173, 0.35) !important;
	border: 1px dashed var(--wp--preset--color--brand-green);
}

/* -------------------------------------------------------------------------
 * Button — Outline / ghost  (.is-style-ghost)
 * Used in the hero: "Explore Our Solutions".
 * ---------------------------------------------------------------------- */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--yellow-grey);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--contrast);
}

/* Ghost button on a dark background inverts to light. */
.has-contrast-background-color .wp-block-button.is-style-ghost .wp-block-button__link,
.has-dark-green-background-color .wp-block-button.is-style-ghost .wp-block-button__link {
	color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------------------------
 * Button — Neutral  (.is-style-neutral)
 * Light grey fill with dark text (secondary CTA).
 * ---------------------------------------------------------------------- */
.wp-block-button.is-style-neutral .wp-block-button__link {
	background-color: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-neutral .wp-block-button__link:hover,
.wp-block-button.is-style-neutral .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * Group — Card  (.is-style-card)
 * Rounded surface with a soft shadow for feature/stat cards.
 * ---------------------------------------------------------------------- */
.wp-block-group.is-style-card {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--card);
	background-color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * Image — Rounded  (.is-style-rounded-lg)
 * ---------------------------------------------------------------------- */
.wp-block-image.is-style-rounded-lg img {
	border-radius: var(--wp--custom--radius--lg);
}

/* -------------------------------------------------------------------------
 * Group — Dotted grid texture  (.is-style-dotted-grid)
 * Faint dotted background used behind the footer and quality section.
 * ---------------------------------------------------------------------- */
.wp-block-group.is-style-dotted-grid {
	background-image: radial-gradient( var(--wp--preset--color--yellow-grey) 1px, transparent 1px );
	background-size: 26px 26px;
	background-position: -13px -13px;
}
/* Fade the dots so text stays readable. */
.wp-block-group.is-style-dotted-grid > * {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
 * Group — Brand top line  (.is-style-brand-top-line)
 * Thin avocado→green gradient rule along the top edge.
 * ---------------------------------------------------------------------- */
.wp-block-group.is-style-brand-top-line {
	border-top: 3px solid transparent;
	border-image: var(--wp--preset--gradient--brand-line) 1;
}

/* -------------------------------------------------------------------------
 * Header — floating rounded bar that overlays the hero (Figma).
 * Logo left · nav centred · green "Get A Quote" button with arrow, right.
 * ---------------------------------------------------------------------- */
/* Sticky site header — target the <header> template-part WRAPPER (rendered by
 * the template, tagName:"header") rather than the inner .hytech-header class.
 * This way the header stays sticky even if its inner blocks/classes are edited
 * or rebuilt in the Site Editor. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 40;
	margin-bottom: -100px;  /* = padding-top (20) + bar min-height (80); keeps the bar floating with no band */
	pointer-events: none;   /* clicks pass through the transparent area to the section below */
}
.hytech-header {
	padding-top: 20px;      /* float the bar 20px below the top edge */
	pointer-events: none;
}
.hytech-header__bar {
	pointer-events: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	min-height: 80px;
	padding: 6px 6px 6px 20px;
	background-color: var(--wp--preset--color--base);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(6, 53, 46, 0.10);
}
.hytech-header__brand {
	justify-self: start;
}
.hytech-header__brand .wp-block-site-logo img {
	display: block;
}
.hytech-header__nav {
	justify-self: center;
}
.hytech-header__cta {
	justify-self: end;
	align-self: stretch;
	margin: 0;
}
.hytech-header__cta .wp-block-button__link {
	height: 100%;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	border-radius: 6px;
	padding-top: 0;
	padding-bottom: 0;
}
.hytech-header__cta .wp-block-button__link::after {
	content: "";
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	background: url("../images/icons/arrow-right-white.svg") center / contain no-repeat;
}
.hytech-header .wp-block-navigation {
	--wp--style--block-gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

/* "Get A Quote" nav item: hidden on desktop (the standalone pill button is used
   there) and shown as a green pill inside the mobile burger drawer. */
@media (min-width: 782px) {
	.hytech-header__nav .hytech-nav-cta {
		display: none;
	}
}
.hytech-nav-cta a {
	background-color: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--base);
	border-radius: 6px;
	padding: 0.55em 1.2em;
}

/* Mobile burger drawer: an 85%-wide panel anchored to the right, not full screen.
   Scoped to the header wrapper (not a custom class) so it applies even when the
   header is customised in the Site Editor. */
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open {
	left: auto;
	right: 0;
	width: 85%;
	box-shadow: -12px 0 40px rgba(6, 53, 46, 0.18);
}

/* Give a leading hero's content room so it isn't hidden under the floating bar. */
:where(main, .wp-block-post-content, .entry-content) > .wp-block-cover:first-child > .wp-block-cover__inner-container {
	padding-top: clamp(2.5rem, 6vw, 3.5rem);
}

@media (max-width: 781px) {
	.wp-site-blocks > header {
		margin-bottom: -95px;   /* = padding-top (20) + mobile bar min-height (75) */
	}
	.hytech-header__bar {
		grid-template-columns: 1fr auto;   /* logo | burger only */
		min-height: 75px;
		padding: 8px 12px 8px 16px;
	}
	.hytech-header__nav {
		justify-self: end;
	}
	/* Hide the standalone Get A Quote button on mobile (it lives in the burger
	   drawer). Targets any buttons block in the header so it works even when the
	   header is customised in the Site Editor and lost the hytech-header__cta class. */
	.hytech-header__cta,
	.wp-site-blocks > header .wp-block-buttons {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Checklist — green tick list  (.hytech-checklist)
 * Used inside service cards. Swaps the default bullet for a brand-green tick.
 * ---------------------------------------------------------------------- */
.hytech-checklist {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.hytech-checklist li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
/* Filled dark-green circle with a white check inside (Figma checklist rows). */
.hytech-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--contrast);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
	background-position: center;
	background-size: 0.7rem;
	background-repeat: no-repeat;
}

/* -------------------------------------------------------------------------
 * Data tables — used on the Service / Product detail pages.
 * Rendered with the core Table block so the client can edit rows in place;
 * these rules give them the Figma look (core/theme.json cannot express it).
 * ---------------------------------------------------------------------- */
.hytech-spec-table,
.hytech-equip-table {
	overflow-x: auto;
}
.hytech-spec-table table,
.hytech-equip-table table {
	border-collapse: collapse;
	width: 100%;
}
.hytech-spec-table th,
.hytech-spec-table td,
.hytech-equip-table th,
.hytech-equip-table td {
	text-align: left;
	vertical-align: top;
	padding: 1.15rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	border: 0;
}

/* Tolerances & standards — plain two-column spec sheet. */
.hytech-spec-table th,
.hytech-spec-table td {
	color: var(--wp--preset--color--contrast);
}
.hytech-spec-table thead th {
	font-weight: 700;
	border-bottom: 3px solid rgba(6, 53, 46, 0.2);
}
.hytech-spec-table tbody td {
	border-bottom: 1px solid rgba(6, 53, 46, 0.15);
}

/* Equipment list — dark header row with avocado zebra striping.
 * Figma sets this table ~1055px wide, centered inside the content column. */
.hytech-equip-table {
	max-width: 1055px;
	margin-left: auto;
	margin-right: auto;
}
.hytech-equip-table table {
	border-radius: 8px;
	overflow: hidden;
}
.hytech-equip-table thead th {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}
.hytech-equip-table tbody td {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.hytech-equip-table tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--avocado);
}
.hytech-equip-table td:first-child,
.hytech-equip-table th:first-child,
.hytech-equip-table td:last-child,
.hytech-equip-table th:last-child {
	text-align: center;
	font-weight: 700;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Carousel progress bar (Our Process).
 * ---------------------------------------------------------------------- */
.hytech-progress-track {
	background: var(--wp--preset--color--off-white);
	border-radius: 999px;
	overflow: hidden;
}
.hytech-progress-fill {
	width: 40%;
}

/* -------------------------------------------------------------------------
 * Gradient display heading (Product Detail hero title).
 * Dark-green → brand-green text fill.
 * ---------------------------------------------------------------------- */
.hytech-gradient-text {
	background: linear-gradient( 90deg, var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--brand-green) 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* =========================================================================
 * Interactions — front-end progressive enhancement.
 * Behaviour lives in assets/js/interactions.js; these are the visual states.
 * Colours use theme.json palette variables; motion respects reduced-motion.
 * ===================================================================== */

/* ---- Tabs / category filter ---- */
.hytech-tab {
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.hytech-tab p {
	color: var(--wp--preset--color--yellow-grey);
	transition: color 0.2s ease;
}
/* Active segment: the neutral grey-sage pill from Figma (#DBDFD9 ≈ 13% contrast). */
.hytech-tab.is-active {
	background-color: rgba(6, 53, 46, 0.13) !important;
}
.hytech-tab.is-active p {
	color: var(--wp--preset--color--contrast) !important;
}
/* Desktop: segments stretch to equal thirds/fifths of the bar (Figma flex 1 0 0). */
@media (min-width: 782px) {
	.hytech-tabs .hytech-tab {
		flex: 1 1 0;
	}
}
.hytech-tab-panel {
	display: none;
}
.hytech-tab-panel.is-active {
	display: block;
	animation: hytech-fade-in 0.35s ease both;
}

/* ---- Carousel / slider ---- */
.hytech-carousel-track {
	--hytech-slide: clamp(260px, 32%, 460px);
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30, 1.25rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}
.hytech-carousel-track::-webkit-scrollbar {
	display: none;
}
.hytech-carousel-track > * {
	flex: 0 0 var(--hytech-slide);
	scroll-snap-align: start;
	margin: 0;
}
.hytech-carousel--cards .hytech-carousel-track {
	--hytech-slide: clamp(260px, 23%, 322px);
	align-items: stretch;
}
/* Our Process: wider slides so the third card bleeds off the edge (Figma 569px). */
.hytech-carousel--process .hytech-carousel-track {
	--hytech-slide: clamp(320px, 40%, 570px);
}
@media (max-width: 781px) {
	.hytech-carousel-track {
		--hytech-slide: 78%;
	}
	.hytech-carousel--cards .hytech-carousel-track {
		--hytech-slide: 72%;
	}
}
.hytech-carousel-prev,
.hytech-carousel-next {
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.15s ease;
}
.hytech-carousel-prev.is-disabled,
.hytech-carousel-next.is-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}
.hytech-carousel-prev:not(.is-disabled):hover,
.hytech-carousel-next:not(.is-disabled):hover {
	transform: translateY(-1px);
}
.hytech-progress-fill {
	transition: width 0.25s ease;
}

/* ---- Accordion ---- */
.hytech-accordion-trigger {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.hytech-accordion-trigger::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	opacity: 0.85;
}
.hytech-accordion-item.is-open .hytech-accordion-trigger::after {
	transform: rotate(-135deg);
}
/* Fade the header of any closed item. */
.hytech-accordion-item:not(.is-open) .hytech-accordion-trigger {
	color: var(--wp--preset--color--yellow-grey);
}
/* Collapse panels only once JS is running, so the copy is readable without it. */
.hytech-js .hytech-accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

/* ---- Marquee (auto-scrolling logo strip) ---- */
.hytech-marquee {
	overflow: hidden;
}
.hytech-marquee-inner {
	display: flex;
	width: max-content;
	animation: hytech-marquee 32s linear infinite;
}
.hytech-marquee:hover .hytech-marquee-inner {
	animation-play-state: paused;
}
.hytech-marquee-track {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: clamp(2rem, 5vw, 4rem);
	padding-right: clamp(2rem, 5vw, 4rem);
}
.hytech-marquee-track > * {
	margin: 0;
	flex: 0 0 auto;
}
@keyframes hytech-marquee {
	to { transform: translateX(-50%); }
}

/* ---- Scroll reveal ---- */
.hytech-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.hytech-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ---- Staggered reveal (.hytech-stagger) ----
 * Children rise into view one after another when the container scrolls in.
 * Used on the About "Values" card stack and the homepage value-prop grid.
 * Only active once JS has tagged the page (html.hytech-js), so content is
 * never hidden without JavaScript. */
.hytech-js .hytech-stagger > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.hytech-js .hytech-stagger.is-revealed > * {
	opacity: 1;
	transform: none;
}
.hytech-js .hytech-stagger.is-revealed > *:nth-child(1) { transition-delay: 0.05s; }
.hytech-js .hytech-stagger.is-revealed > *:nth-child(2) { transition-delay: 0.2s; }
.hytech-js .hytech-stagger.is-revealed > *:nth-child(3) { transition-delay: 0.35s; }
.hytech-js .hytech-stagger.is-revealed > *:nth-child(4) { transition-delay: 0.5s; }
.hytech-js .hytech-stagger.is-revealed > *:nth-child(n+5) { transition-delay: 0.65s; }

@keyframes hytech-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hytech-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.hytech-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
	.hytech-marquee-inner { animation: none !important; }
	.hytech-carousel-track { scroll-behavior: auto; }
	.hytech-tab-panel.is-active { animation: none; }
}

/* Slightly tighten very large display headings on small screens. */
@media (max-width: 600px) {
	h1, .wp-block-post-title {
		letter-spacing: -0.03em;
	}
}

/* -------------------------------------------------------------------------
 * Shared components added for Figma parity.
 * ---------------------------------------------------------------------- */

/* Primary-button arrow chip: a small white rounded square with a dark arrow,
 * pinned after the label (Figma "PRIMARY BUTTON CTA"). Add className
 * "hytech-btn-chip" to a wp:button. The --split variant spreads label/chip
 * across full-width buttons (forms). */
.hytech-btn-chip .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
}
.hytech-btn-chip .wp-block-button__link::after {
	content: "";
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: 3px;
	background: #ffffff url("../images/icons/arrow-right-dark.svg") center / 15px no-repeat;
}
.hytech-btn-chip--split .wp-block-button__link {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

/* Hero composition — self-contained, no dependence on core column/layout CSS
 * (some optimizers strip WordPress's own responsive rules).
 * Desktop: title mid-left, copy block anchored bottom-right.
 * Mobile: everything stacks full-width in source order. */
.hytech-hero-title {
	max-width: 880px !important;
	margin-top: 8vh !important;
}
.hytech-hero-copy {
	max-width: 430px !important;
}
@media (min-width: 782px) {
	.hytech-hero-copy {
		margin-left: auto !important;
		margin-right: 0 !important;
		margin-top: 14vh !important;
	}
}
@media (max-width: 781px) {
	.hytech-hero-title {
		margin-top: 2rem !important;
	}
	.hytech-hero-copy {
		max-width: none !important;
		margin-top: 2.5rem !important;
	}
}

/* Values card stack (About page) — the Figma prototype scroll effect: each
 * card pins below the header while the next one slides up and covers it.
 * Pure CSS (sticky + large gaps), which also makes the section taller.
 * Selector covers both the explicit class and already-inserted pages
 * (the values cover carries hytech-fade-top with the hytech-stagger stack). */
@media (min-width: 782px) {
	.hytech-card-stack > *,
	.hytech-fade-top .hytech-stagger > * {
		position: sticky;
		top: clamp(110px, 18vh, 190px);
		min-height: 280px;
		box-shadow: 0 -12px 40px rgba(6, 53, 46, 0.12);
	}
	.hytech-card-stack > * + *,
	.hytech-fade-top .hytech-stagger > * + * {
		margin-block-start: 45vh !important;
	}
	.hytech-card-stack,
	.hytech-fade-top .hytech-stagger {
		padding-bottom: 12vh;
	}
}

/* Frosted hero button: translucent white fill with dark text over photos. */
.hytech-btn-frost .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.75);
	color: var(--wp--preset--color--contrast);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.hytech-btn-frost .wp-block-button__link:hover,
.hytech-btn-frost .wp-block-button__link:focus {
	background-color: #ffffff;
	color: var(--wp--preset--color--contrast);
}

/* Section eyebrow: right-aligned beside/above the heading on desktop,
 * left-aligned on mobile (per the _m frames). */
.hytech-eyebrow {
	text-align: right;
}

/* Industry cards: a non-wrapping horizontal row that overflows the right
 * edge at ALL widths (Figma shows the 5th card cut off on desktop too). */
.hytech-industry-row {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	gap: 20px !important;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.hytech-industry-row::-webkit-scrollbar {
	display: none;
}
.hytech-industry-row > .wp-block-cover {
	flex: 0 0 322px;
	scroll-snap-align: start;
}

/* Concentric-rings texture, top-right (dark quality/inquiry cards). */
.hytech-rings {
	position: relative;
	overflow: hidden;
}
.hytech-rings::before {
	content: "";
	position: absolute;
	top: -45%;
	right: -12%;
	width: 900px;
	max-width: 90%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle, transparent 62.6%, rgba(6, 200, 77, 0.16) 63%, transparent 63.4%),
		radial-gradient(circle, transparent 46.6%, rgba(6, 200, 77, 0.12) 47%, transparent 47.4%),
		radial-gradient(circle, transparent 32.6%, rgba(6, 200, 77, 0.10) 33%, transparent 33.4%),
		radial-gradient(circle, transparent 18.6%, rgba(6, 200, 77, 0.08) 19%, transparent 19.4%);
	pointer-events: none;
}
.hytech-rings > * {
	position: relative;
	z-index: 1;
}

/* Mission card: dark green with soft corner glows (Figma ellipse layers). */
.hytech-mission-glow {
	position: relative;
	overflow: hidden;
}
.hytech-mission-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(560px 560px at 88% 0%, rgba(225, 252, 173, 0.35), transparent 70%),
		radial-gradient(640px 640px at 0% 100%, rgba(6, 200, 77, 0.22), transparent 70%);
	pointer-events: none;
}
.hytech-mission-glow > * {
	position: relative;
	z-index: 1;
}

/* Equalizer bars rising from the bottom of the product-detail CTA card. */
.hytech-cta-bars {
	position: relative;
	overflow: hidden;
}
.hytech-cta-bars::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 140px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='140' viewBox='0 0 120 140'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.55'%3E%3Crect x='8' y='60' width='14' height='90' rx='7'/%3E%3Crect x='38' y='20' width='14' height='130' rx='7'/%3E%3Crect x='68' y='84' width='14' height='66' rx='7'/%3E%3Crect x='98' y='44' width='14' height='106' rx='7'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: bottom center;
	pointer-events: none;
}
.hytech-cta-bars > * {
	position: relative;
	z-index: 1;
}

/* Cover scrim overrides (CSS-only so the block markup stays canonical):
 * hytech-scrim-bottom = photo bright on top, dark gradient behind bottom text;
 * hytech-fade-top = white fade from the top (About "Values" sky section). */
.hytech-scrim-bottom .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(6, 53, 46, 0) 35%, rgba(6, 53, 46, 0.85) 100%) !important;
	opacity: 1 !important;
}
.hytech-fade-top .wp-block-cover__background {
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 22%, rgba(255, 255, 255, 0.45) 55%, rgba(255, 255, 255, 0.15) 100%) !important;
	opacity: 1 !important;
}

/* Timeline milestone rows: hairline dividers (Figma), not full-strength grey. */
.hytech-ms-row {
	border-top-color: rgba(137, 138, 133, 0.35) !important;
}

/* Footer: yellow-grey links (global link color is brand-green), Figma casing. */
.hytech-footer a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--yellow-grey);
}
.hytech-footer a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--contrast);
}
/* Footer body: logo top-left with the contact block under it, link columns on
 * the right (desktop). On mobile the source order wins: logo → links → contact. */
.hytech-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	grid-template-areas:
		"brand nav"
		"contact nav";
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--30);
	align-items: start;
}
.hytech-footer-brand { grid-area: brand; }
.hytech-footer-nav { grid-area: nav; }
.hytech-footer-contact { grid-area: contact; }
.hytech-footer-nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* Show/hide helpers matching the Figma frames per breakpoint. */
.hytech-mobile-only {
	display: none;
}

/* -------------------------------------------------------------------------
 * Mobile layout — match the Figma "_m" frames.
 * One responsive layout: these rules restack the desktop sections the way
 * the mobile designs show them.
 * ---------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* FAIL-SAFE column stacking. WordPress core ships this rule itself, but
	   CSS optimizers (LiteSpeed UCSS / Combine CSS) are known to strip core's
	   mobile media queries. Duplicating it here means every wp:columns section
	   stacks on mobile no matter what the optimizer does. */
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}

	/* Fixed-count grids (e.g. the 2x2 value-prop grid) collapse to one column. */
	.wp-block-group.is-layout-grid {
		grid-template-columns: 1fr !important;
	}

	/* …except grids that the _m frames keep 2-up (product applications). */
	.hytech-app-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px;
	}

	/* Swipeable card rows on mobile: narrower slides so the next card peeks. */
	.hytech-industry-row > .wp-block-cover {
		flex-basis: 78%;
	}
	.hytech-caps-row,
	.hytech-product-row {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		gap: 12px !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.hytech-caps-row::-webkit-scrollbar,
	.hytech-product-row::-webkit-scrollbar {
		display: none;
	}
	.hytech-caps-row > *,
	.hytech-product-row > * {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	/* Category / service tabs stack as full-width pills. !important beats the
	   core layout engine's generated .wp-container-* flex rules, which are
	   printed after this stylesheet. */
	.hytech-tabs {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.hytech-tabs .hytech-tab {
		width: 100%;
		justify-content: center !important;
	}

	/* About "Values": mobile shows only the heading + card stack — the two
	   flanking photos are a desktop-only composition. */
	.hytech-values-photo {
		display: none;
	}

	/* Icon-point rows: two per row on mobile (Figma), smaller icons. */
	.hytech-points {
		flex-wrap: wrap !important;
	}
	.hytech-points > .wp-block-group {
		flex: 1 1 calc(50% - var(--wp--preset--spacing--40));
		max-width: none;
	}
	.hytech-points img {
		width: 44px !important;
		height: 44px !important;
	}

	/* Page heroes: ~85% of the viewport on mobile (Figma _m frames). */
	main > .wp-block-cover:first-child {
		min-height: 85vh !important;
	}
	/* About hero: the text block anchors near the TOP of the mobile hero. */
	main > .wp-block-cover:first-child.is-position-bottom-left {
		align-items: flex-start;
	}
	main > .wp-block-cover:first-child.is-position-bottom-left > .wp-block-cover__inner-container {
		padding-top: clamp(5rem, 18vw, 7rem);
	}

	/* Hero CTA pairs stack vertically, left-aligned (Figma _m). */
	main > .wp-block-cover:first-child .wp-block-buttons {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	/* Clear the floating sticky header: the first cover's content starts below
	   the bar instead of underneath it. */
	main > .wp-block-cover:first-child > .wp-block-cover__inner-container {
		padding-top: clamp(6.5rem, 24vw, 8rem);
	}

	/* Section eyebrows sit top-LEFT on mobile. */
	.hytech-eyebrow {
		text-align: left;
	}

	/* Mission card: heading and paragraph stack tightly on mobile. */
	.hytech-mission-copy {
		min-height: 0 !important;
	}

	/* Stats card: numbers and labels left-align on mobile (Figma _m). */
	.hytech-stats-card .has-text-align-center {
		text-align: left;
	}

	/* Products inquiry form: flush full-width card below the dark panel. */
	.hytech-quality-form {
		margin-left: calc(-1 * var(--wp--preset--spacing--50));
		margin-right: calc(-1 * var(--wp--preset--spacing--50));
	}

	/* Equipment table: pin the first column while the rest scrolls. */
	.hytech-equip-table td:first-child,
	.hytech-equip-table th:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
	}

	/* Footer stacks logo → links (2-up) → contact details, per the _m frame. */
	.hytech-footer-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"brand"
			"nav"
			"contact";
	}
	.hytech-footer-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Breakpoint helpers. */
	.hytech-hide-mobile {
		display: none !important;
	}
	.hytech-mobile-only {
		display: block;
	}
}

/* -------------------------------------------------------------------------
 * Services page ("Service T1") — dark-green hero with concentric rings and
 * the machined-gear graphic cluster, plus the dark inspection section.
 * ---------------------------------------------------------------------- */
.hytech-services-hero {
	position: relative;
	overflow: hidden;
}
/* Faint concentric rings behind the graphic, echoing the Figma hero. */
.hytech-services-hero::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -160px;
	transform: translateY(-50%);
	width: 920px;
	height: 920px;
	max-width: 70vw;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle, transparent 62.6%, rgba(6, 200, 77, 0.14) 63%, transparent 63.4%),
		radial-gradient(circle, transparent 46.6%, rgba(6, 200, 77, 0.11) 47%, transparent 47.4%),
		radial-gradient(circle, transparent 32.6%, rgba(6, 200, 77, 0.09) 33%, transparent 33.4%);
	pointer-events: none;
	z-index: 0;
}
.hytech-services-hero > * {
	position: relative;
	z-index: 1;
}

/* The three decorative renders (gear, sphere, fins) overlap like the design. */
.hytech-hero-graphics {
	position: relative;
	min-height: 420px;
}
.hytech-hero-graphics .wp-block-image {
	position: absolute;
	margin: 0;
}
.hytech-hero-graphics .wp-block-image:nth-child(1) { /* gear — the hero centre */
	width: 66%;
	top: 12%;
	left: 12%;
}
.hytech-hero-graphics .wp-block-image:nth-child(2) { /* sphere — top right */
	width: 22%;
	top: 0;
	right: 4%;
}
.hytech-hero-graphics .wp-block-image:nth-child(3) { /* fins — bottom right */
	width: 40%;
	right: 0;
	bottom: 2%;
}

/* Spiral graphic in the dark inspection section reads as a soft background. */
.hytech-inspect-graphic {
	opacity: 0.9;
}

@media (max-width: 781px) {
	.hytech-hero-graphics {
		min-height: 300px;
	}
	/* Figma _m: only the gear + sphere show; the heat-sink fins are off-canvas. */
	.hytech-hero-graphics .wp-block-image:nth-child(3) {
		display: none;
	}
	.hytech-services-hero::before {
		max-width: 90vw;
		right: -40px;
	}
}