/*
Theme Name: ITech Valley
Theme URI: https://itechvalley.ma
Author: ITech Valley
Author URI: https://itechvalley.ma
Description: A premium, native WordPress block theme for ITech Valley — an IT services and maintenance company. Built entirely with core WordPress blocks, block patterns, and the Site Editor. Palette: black (#0B0B0B), white (#FFFFFF), and signal yellow (#FEDC23). Headings in Manrope, body copy in Open Sans. No page builders, no paid plugins.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.5.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itech-valley
Tags: block-theme, full-site-editing, one-column, custom-logo, custom-menu, editor-style, featured-images, translation-ready, accessibility-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*
 * Minimal fallback styles only. All layout, color, and typography rules
 * are controlled by theme.json and edited live via the Site Editor.
 * This file exists to satisfy WordPress theme requirements and to hold
 * small progressive-enhancement rules that theme.json cannot express.
 */

/* Skip link (accessibility) */
.skip-link {
	background: #0b0b0b;
	color: #fedc23;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 700;
	left: 0;
	padding: 0.9em 1.4em;
	position: absolute;
	transform: translateY(-120%);
	transition: transform 0.2s ease;
	z-index: 100000;
	text-decoration: none;
}

.skip-link:focus {
	transform: translateY(0%);
}

/* Visible focus outline for keyboard users on interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid #fedc23;
	outline-offset: 2px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ======================================================================
   WORDPRESS BLOCK GUARDS
   WordPress prints core block CSS and global-styles CSS inline, and for
   block themes it loads per-block stylesheets on demand — which can land
   AFTER this file in source order. These rules pin the handful of places
   where a core default would otherwise beat an equal-specificity rule of
   ours. Keep this list short and targeted; it is not a reset.
   ====================================================================== */

/* Full-bleed sections must not be squeezed by root padding. */
.wp-site-blocks > .alignfull,
.wp-site-blocks > .wp-block-template-part > .alignfull {
	margin-left: 0;
	margin-right: 0;
}

/* Template parts are structural wrappers only — no spacing of their own. */
.wp-block-template-part {
	margin-block: 0;
}

/* On dark sections, headings and paragraphs must not inherit the light-page
   text colour that theme.json sets globally. */
.has-contrast-background-color .wp-block-heading:not([class*="has-"]),
.itv-hero .wp-block-heading,
.itv-services-section .wp-block-heading {
	color: inherit;
}

/* Buttons: core's .wp-element-button sets its own colours from theme.json.
   Our variant classes have to win, so state them at button level. */
.wp-block-button.itv-btn-primary > .wp-block-button__link.wp-element-button {
	background-color: #fedc23;
	color: #0b0b0b;
}

.wp-block-button.itv-btn-secondary > .wp-block-button__link.wp-element-button {
	background-color: rgba(255, 255, 255, 0.06);
	color: #ffffff;
}

.wp-block-button.itv-btn-dark > .wp-block-button__link.wp-element-button {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ======================================================================
   SECTION RHYTHM
   Core inserts a blockGap margin between top-level blocks, which shows as
   a white strip between the header and the hero (the body is white).
   Zero it for the full-bleed sections so they butt together cleanly.
   ====================================================================== */
.wp-site-blocks > header,
.wp-site-blocks > header + *,
.itv-hero,
.itv-services-section {
	margin-block-start: 0 !important;
}

.itv-hero + *,
.itv-services-section + * {
	margin-block-start: 0 !important;
}

/* Consistent vertical rhythm for the light content sections. */
.itv-section {
	padding-block: clamp(56px, 6vw, 104px);
}

.itv-section--tight {
	padding-block: clamp(40px, 4.5vw, 72px);
}

/* ======================================================================
   HEADER — STICKY POSITIONING

   Why the old rule silently failed:

     .wp-site-blocks
       └─ header.wp-block-template-part      <- WordPress wrapper
            └─ header.itv-site-header        <- sticky was applied HERE

   A sticky element can only travel within its PARENT's content box. The
   parent here is the template-part wrapper, whose height is exactly the
   header's own height — so there was zero distance to travel and it
   scrolled away like a static element. No amount of !important, z-index
   or top could change that; the constraint is box geometry, not the
   cascade.

   Fix: the sticky element is the template-part wrapper itself, which is a
   direct child of .wp-site-blocks and therefore spans the whole document.
   The inner header keeps the visual treatment and goes back to static.
   ====================================================================== */

/* Nothing between the sticky element and the viewport may create a scroll
   container or a containing block. Any of overflow (hidden/auto/clip/scroll),
   transform, filter, perspective, contain or backdrop-filter on an ancestor
   would break it — these are pinned defensively. */
html,
body,
.wp-site-blocks,
.wp-site-blocks > .itv-header-outer,
.wp-site-blocks > header.wp-block-template-part {
	overflow: visible;
	transform: none;
	filter: none;
	perspective: none;
	contain: none;
	backdrop-filter: none;
}

/* Guard against the common "kill horizontal scroll" one-liner, which turns
   the body into a scroll container and disables sticky in every browser. */
html,
body {
	overflow-x: visible;
}

/* THE sticky element. */
.wp-site-blocks > .itv-header-outer,
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part.itv-header-outer {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 9999;
	width: 100%;
	margin: 0;
	display: block;
}

/* The inner group is no longer the sticky element — it only carries the
   look. Left static so it cannot fight the wrapper. */
.itv-site-header {
	position: relative;
	top: auto;
	z-index: auto;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	background-color: var(--wp--preset--color--contrast) !important;
}

/* ----------------------------------------------------------------------
   Admin bar offsets.

   Above 782px the WordPress admin bar is position:fixed, so the header
   must sit 32px lower or it slides underneath it.

   At 782px and below the admin bar is position:ABSOLUTE — it scrolls away
   with the page. Offsetting by 46px there would leave a permanent 46px
   gap above the header once the bar has scrolled off, so the correct
   mobile offset is 0. At scroll position 0 the header is still in normal
   flow beneath the bar, so nothing overlaps.
   ---------------------------------------------------------------------- */
body.admin-bar .wp-site-blocks > .itv-header-outer,
body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .wp-site-blocks > .itv-header-outer,
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* ----------------------------------------------------------------------
   Fallback: position:fixed.

   itv.js walks the ancestor chain at load. If a plugin, page builder or
   custom CSS has introduced a sticky-breaking property it cannot override,
   it sets .itv-header-fixed on <body> and publishes the measured header
   height as --itv-header-h. The header then becomes fixed and the page
   content is padded by exactly that height, so nothing hides behind it and
   no layout shift occurs.
   ---------------------------------------------------------------------- */
body.itv-header-fixed .wp-site-blocks > .itv-header-outer,
body.itv-header-fixed .wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9999;
}

body.itv-header-fixed .wp-site-blocks {
	padding-top: var(--itv-header-h, 84px);
}

body.itv-header-fixed.admin-bar .wp-site-blocks > .itv-header-outer,
body.itv-header-fixed.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.itv-header-fixed.admin-bar .wp-site-blocks > .itv-header-outer,
	body.itv-header-fixed.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}

	body.itv-header-fixed.admin-bar .wp-site-blocks {
		padding-top: calc(var(--itv-header-h, 76px) + 46px);
	}
}

.itv-site-header .itv-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: clamp(16px, 2vw, 32px);
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	min-height: 84px;
}

/* Logo and CTA hold their size; the nav takes the remaining space and
   centres itself within it, which keeps the nav optically centred even
   though the logo and button have different widths. */
.itv-site-header .itv-site-logo,
.itv-site-header .itv-header-cta {
	flex: 0 0 auto;
}

.itv-site-header .itv-primary-nav {
	flex: 1 1 auto;
	justify-content: center;
}

.itv-site-header .itv-primary-nav .wp-block-navigation__container {
	justify-content: center;
}

/* Nav items share one baseline and a consistent hit area. */
.itv-site-header .itv-primary-nav .wp-block-navigation-item {
	display: flex;
	align-items: center;
}

.itv-site-header .itv-primary-nav a {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	padding-block: 6px;
	transition: color 0.18s ease;
	text-decoration: none;
}

.itv-site-header .itv-primary-nav a:hover {
	color: var(--wp--preset--color--primary);
}

/* Mobile overlay menu: full-bleed black panel, generous tap targets. */
.itv-site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast);
	padding: clamp(24px, 6vw, 48px);
}

.itv-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 8px;
}

.itv-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 4px;
	align-items: flex-start;
}

.itv-site-header .wp-block-navigation__responsive-container.is-menu-open a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
	padding-block: 12px;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.itv-site-header .wp-block-navigation__responsive-container-open,
.itv-site-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

/* ======================================================================
   HERO
   ====================================================================== */
.itv-hero {
	min-height: 680px;
	position: relative;
	overflow: hidden;
}

/* ----------------------------------------------------------------------
   HERO STACKING — three explicit layers.

   layer 0: .wp-block-cover__image-background  (the photograph)
   layer 1: .wp-block-cover__background        (the gradient overlay)
   layer 3: .wp-block-cover__inner-container   (all the text)

   The gradient lives on core's own overlay span rather than a ::after
   pseudo-element. A ::after is generated as the LAST child of the cover,
   so if anything ever ties its z-index it paints on top of the text and
   dims the whole hero. Core's overlay span is purpose-built to sit under
   the content, which removes that failure mode entirely.

   The !important flags are deliberate: WordPress loads per-block core CSS
   (should_load_separate_core_block_assets) inline AFTER the theme
   stylesheet, and core's `.wp-block-cover .wp-block-cover__inner-container`
   has the same specificity as anything we can write with two classes.
   Without !important core wins on source order and drops the text back
   underneath the overlay. Never put opacity on the cover or the inner
   container — it would dim the text along with the background.
   ---------------------------------------------------------------------- */
.itv-hero .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center right;
	z-index: 0 !important;
}

.itv-hero .wp-block-cover__background {
	z-index: 1 !important;
	opacity: 1 !important;
	background: linear-gradient(
		90deg,
		rgba(11, 11, 11, 0.97) 0%,
		rgba(11, 11, 11, 0.93) 28%,
		rgba(11, 11, 11, 0.66) 50%,
		rgba(11, 11, 11, 0.32) 72%,
		rgba(11, 11, 11, 0.20) 100%
	) !important;
}

.itv-hero > .wp-block-cover__inner-container,
.itv-hero .wp-block-cover__inner-container {
	position: relative !important;
	z-index: 3 !important;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5.2vw, 90px);
	opacity: 1 !important;
	mix-blend-mode: normal !important;
	filter: none !important;
}

/* ----------------------------------------------------------------------
   HERO COLOURS — pinned.
   theme.json sets a dark default colour on headings and paragraphs for
   light pages. Inside the hero those defaults must never win, so the
   approved colours are stated explicitly here.
   ---------------------------------------------------------------------- */
.itv-hero .itv-hero-eyebrow,
.itv-hero .itv-hero-eyebrow.has-text-color {
	color: #fedc23 !important;
}

.itv-hero h1.itv-hero-title,
.itv-hero .wp-block-heading.itv-hero-title {
	color: #ffffff !important;
}

.itv-hero .itv-hero-title mark {
	color: #fedc23 !important;
	background-color: transparent !important;
}

.itv-hero p.itv-hero-lede,
.itv-hero .itv-hero-lede.has-text-color {
	color: rgba(255, 255, 255, 0.88) !important;
}

.itv-hero .itv-btn-primary .wp-block-button__link {
	background-color: #fedc23 !important;
	color: #0b0b0b !important;
	border-color: #fedc23 !important;
}

.itv-hero .itv-btn-secondary .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.06) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
}

/* Text occupies ~42%, leaving ~58% of the frame for the visual. This
   governs the paragraph and buttons. */
.itv-hero .itv-hero-text {
	width: 42%;
	min-width: 0;
	margin-left: 0;
}

/* The headline is the one element allowed to run wider than the 42%
   column. At 4.8vw, "Reliable IT Support" needs ~790px at 1920 — inside a
   42% column it would break onto a third line and lose the intended
   two-line structure. max-content keeps each line intact, and the
   max-width stops it before it can reach the edge of the frame. */
.itv-hero .itv-hero-title {
	width: max-content;
	max-width: min(820px, calc(100vw - 2 * clamp(20px, 5.2vw, 90px)));
}

.itv-hero .itv-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
}

.itv-hero .itv-hero-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--primary);
	flex: 0 0 auto;
}

.itv-hero .itv-hero-lede {
	max-width: 620px;
	color: #d7d7d7;
}

/* ======================================================================
   BUTTONS
   ====================================================================== */
.itv-hero-buttons {
	gap: 18px;
}

/* Both buttons share one height and padding so they line up exactly. */
.wp-block-button.itv-btn-primary .wp-block-button__link,
.wp-block-button.itv-btn-secondary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 2em;
	font-size: 1rem;
	line-height: 1.2;
	border-radius: 6px;
}

.wp-block-button.itv-btn-primary .wp-block-button__link:focus-visible,
.wp-block-button.itv-btn-secondary .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.wp-block-button.itv-btn-primary .wp-block-button__link {
	background-color: #fedc23;
	color: #0b0b0b;
	font-weight: 700;
	border: 1px solid #fedc23;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button.itv-btn-primary .wp-block-button__link:hover,
.wp-block-button.itv-btn-primary .wp-block-button__link:focus-visible {
	background-color: #ffe64d;
	border-color: #ffe64d;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(254, 220, 35, 0.25);
}

.wp-block-button.itv-btn-secondary .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	font-weight: 700;
	border: 1px solid rgba(255, 255, 255, 0.55);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wp-block-button.itv-btn-secondary .wp-block-button__link:hover,
.wp-block-button.itv-btn-secondary .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: #ffffff;
	color: #ffffff;
	transform: translateY(-1px);
}

/* ======================================================================
   SERVICES STRIP
   5 / 3 / 2 / 1 columns. Uses CSS grid over the core Columns block so
   the cards stay in one centred container and share equal spacing.
   ====================================================================== */
.itv-services-section {
	padding-block: clamp(28px, 3vw, 44px) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-block-columns.itv-services-strip {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
}

.wp-block-columns.itv-services-strip > .wp-block-column.itv-service-card {
	flex-basis: auto;
	padding: clamp(24px, 2.2vw, 34px) clamp(20px, 2vw, 32px);
	border-right: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 8px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wp-block-columns.itv-services-strip > .wp-block-column.itv-service-card:last-child {
	border-right: 0;
}

.wp-block-columns.itv-services-strip > .wp-block-column.itv-service-card:hover {
	background-color: rgba(255, 255, 255, 0.045);
	transform: translateY(-2px);
}

.itv-service-card .itv-service-icon {
	margin: 0 0 16px;
}

/* All service/feature icons render at one size, everywhere. */
.itv-service-card .itv-service-icon img,
.itv-feature-icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}

.itv-service-card .itv-service-desc {
	color: #b9b9b9;
}

/* ======================================================================
   SHARED SECTION FURNITURE
   Eyebrow labels, cards, and stat blocks used across the internal
   homepage sections so they read as one family with the hero.
   ====================================================================== */
.itv-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.itv-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: 0 0 auto;
}

/* Light-surface cards: soft radius, hairline border, shadow on hover only. */
.itv-card {
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	background: #ffffff;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.itv-card:hover {
	border-color: #dcdcdc;
	box-shadow: 0 10px 30px rgba(11, 11, 11, 0.08);
	transform: translateY(-2px);
}

/* Dark-surface cards. */
.itv-card--dark {
	background: #141414;
	border-color: rgba(255, 255, 255, 0.10);
}

.itv-card--dark:hover {
	border-color: rgba(255, 255, 255, 0.20);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Stat blocks. */
.itv-stat-value {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.itv-stat-label {
	font-weight: 700;
	font-size: 0.9375rem;
}

/* Project cards: image corners match the card radius. */
.itv-project-card img {
	border-radius: 10px;
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.35s ease;
}

.itv-project-media {
	overflow: hidden;
	border-radius: 10px;
}

.itv-project-card:hover img {
	transform: scale(1.03);
}

/* Testimonial. */
.itv-testimonial {
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: #141414;
}

.itv-testimonial .itv-quote-mark {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.itv-eyebrow--center {
	justify-content: center;
}

/* Section headers that pair a title block with an action button. */
.itv-section-head {
	gap: var(--wp--preset--spacing--30);
}

/* Dark button used on light surfaces. */
.wp-block-button.itv-btn-dark .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 1.9em;
	border-radius: 6px;
	font-weight: 700;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wp-block-button.itv-btn-dark .wp-block-button__link:hover,
.wp-block-button.itv-btn-dark .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-1px);
}

.wp-block-button.itv-btn-dark .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* Stats: a real 2-up grid. Core forces flex-basis:100% on columns below
   782px, which would stack all four cards into a long single file; grid
   items ignore flex-basis, so they stay two-up all the way down. */
.wp-block-columns.itv-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.wp-block-columns.itv-stats-grid > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

.itv-stat {
	text-align: left;
}

/* Projects: five equal cards that reflow rather than squashing. */
.wp-block-columns.itv-projects-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.wp-block-columns.itv-projects-grid > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

/* CTA banner row. */
.itv-cta-row {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	gap: var(--wp--preset--spacing--30);
}

/* Footer refinements. */
.itv-footer-list a {
	display: inline-block;
	padding-block: 2px;
	transition: color 0.18s ease, transform 0.18s ease;
}

.itv-footer-list a:hover {
	transform: translateX(2px);
}

.itv-social-links .wp-social-link {
	transition: transform 0.18s ease;
}

.itv-social-links .wp-social-link:hover {
	transform: translateY(-2px);
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */

/* Large desktop / laptop: hero text can breathe a little wider. */
@media (max-width: 1366px) {
	.itv-hero .itv-hero-text {
		width: 48%;
	}
}

/* Tablet landscape: 3 service columns, softer hero split. */
@media (max-width: 1200px) {
	.wp-block-columns.itv-services-strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wp-block-columns.itv-projects-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wp-block-columns.itv-services-strip > .wp-block-column.itv-service-card {
		border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	}

	.wp-block-columns.itv-services-strip > .wp-block-column.itv-service-card:nth-child(3n) {
		border-right: 0;
	}

	.itv-hero .itv-hero-text {
		width: 58%;
	}
}

/* Tablet portrait and below: stack the header, let the hero text go full
   width over a darker, evenly-dimmed image so it stays readable. */
@media (max-width: 900px) {
	.wp-block-columns.itv-services-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-columns.itv-services-strip > .wp-block-column.itv-service-card:nth-child(3n) {
		border-right: 1px solid rgba(255, 255, 255, 0.09);
	}

	.wp-block-columns.itv-services-strip > .wp-block-column.itv-service-card:nth-child(2n) {
		border-right: 0;
	}

	.itv-hero {
		min-height: 560px;
	}

	.itv-hero .itv-hero-text {
		width: 100%;
	}

	.itv-hero .wp-block-cover__image-background {
		object-position: 70% center;
	}

	.wp-block-columns.itv-projects-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.itv-section-head {
		align-items: flex-start;
	}

	.itv-hero .wp-block-cover__background {
		background: linear-gradient(
			90deg,
			rgba(11, 11, 11, 0.96) 0%,
			rgba(11, 11, 11, 0.88) 45%,
			rgba(11, 11, 11, 0.70) 100%
		) !important;
	}
}

@media (max-width: 782px) {
	.itv-site-header .itv-header-row {
		min-height: 76px;
		gap: 12px;
	}

	/* Core renders the nav as a hamburger overlay here; keep it from
	   stealing the row so the logo and CTA stay on one line. */
	.itv-site-header .itv-primary-nav {
		flex: 0 0 auto;
		order: 3;
	}

	.itv-site-header .itv-header-cta {
		order: 2;
		margin-left: auto;
	}
}

/* Mobile: single column cards, tighter hero, smaller CTA. */
@media (max-width: 560px) {
	.wp-block-columns.itv-services-strip {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-columns.itv-services-strip > .wp-block-column.itv-service-card {
		border-right: 0;
		padding: 22px 0;
	}

	.wp-block-columns.itv-services-strip > .wp-block-column.itv-service-card:last-child {
		border-bottom: 0;
	}

	.itv-hero {
		min-height: 520px;
	}

	/* The 4.8vw headline is a desktop figure; at phone widths it would
	   break "Reliable IT Support" across four lines. Step it down so the
	   intended two-line structure survives. !important is needed because
	   the block sets font-size as an inline style. */
	.itv-hero .itv-hero-title {
		font-size: clamp(29px, 8.1vw, 42px) !important;
	}

	.itv-hero .itv-hero-lede {
		font-size: 17px !important;
	}

	.wp-block-columns.itv-projects-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.itv-section {
		padding-block: 48px;
	}

	.itv-cta-row .wp-block-buttons,
	.itv-section-head .wp-block-buttons {
		width: 100%;
	}

	.itv-cta-row .wp-block-button,
	.itv-section-head .wp-block-button {
		width: 100%;
	}

	.itv-cta-row .wp-block-button__link,
	.itv-section-head .wp-block-button__link {
		width: 100%;
	}

	.itv-hero-buttons {
		gap: 12px;
	}

	.itv-hero-buttons .wp-block-button {
		width: 100%;
	}

	.itv-hero-buttons .wp-block-button__link {
		display: block;
		text-align: center;
	}

	.itv-site-header .itv-header-cta .wp-block-button__link {
		padding: 0.7em 1.1em;
		font-size: 0.875rem;
	}
}

/* Honeypot field used by the native quote/contact form handler (functions.php) */
.itv-hp-field {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Native form status messages */
.itv-form-notice {
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	padding: 1em 1.25em;
	border-radius: 4px;
	margin-bottom: 1.5rem;
}

.itv-form-notice.is-success {
	background: #0b0b0b;
	color: #fedc23;
	border-left: 4px solid #fedc23;
}

.itv-form-notice.is-error {
	background: #fff4f4;
	color: #0b0b0b;
	border-left: 4px solid #c0392b;
}

/* Header/footer logo: the supplied transparent white/yellow lockup on the
   black surfaces. Desktop 200px, mobile 150px, height always auto so it is
   never stretched or cropped, and never inside a box. */
.itv-site-logo {
	display: inline-flex;
	align-items: center;
	margin-right: var(--wp--preset--spacing--20);
	line-height: 0;
}

/* The lockup is ~2.83:1, so 220px wide renders ~78px tall and clears the
   84px header. width/height are forced because core's site-logo block
   emits its own inline width from the block attribute. */
.itv-site-logo img,
.itv-site-logo a img,
.wp-block-site-logo.itv-site-logo img,
.wp-block-site-logo.itv-site-logo .custom-logo {
	width: 220px !important;
	height: auto !important;
	max-width: 100%;
	object-fit: contain;
	background: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

footer .itv-site-logo img,
footer .wp-block-site-logo.itv-site-logo img,
footer .wp-block-site-logo.itv-site-logo .custom-logo {
	width: 200px !important;
}

@media (max-width: 782px) {
	.itv-site-logo img,
	.itv-site-logo a img,
	.wp-block-site-logo.itv-site-logo img,
	.wp-block-site-logo.itv-site-logo .custom-logo,
	footer .wp-block-site-logo.itv-site-logo img {
		width: 150px !important;
	}
}

/* Links inside dark surfaces (header/footer) should inherit the light
   text color set on their container instead of the global (dark) link
   color, so they stay readable against the black background. */
.itv-site-header a,
.itv-site-header a:visited,
footer.wp-block-group a,
footer.wp-block-group a:visited {
	color: inherit;
	text-decoration: none;
}

.itv-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.itv-footer-list li {
	margin: 0 0 0.6em;
}

.itv-footer-list a:hover,
footer.wp-block-group a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Native quote/contact form (itech-valley/quote-form and
   itech-valley/contact-form patterns). Plain CSS grid + form controls —
   no form-builder plugin involved. */
.itv-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.5rem;
}

.itv-field {
	margin: 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.itv-field--full {
	grid-column: 1 / -1;
}

.itv-field label {
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	color: #0b0b0b;
}

.itv-field input,
.itv-field select,
.itv-field textarea {
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	padding: 0.75em 0.9em;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	background: #ffffff;
	color: #0b0b0b;
	width: 100%;
	box-sizing: border-box;
}

.itv-field input:focus,
.itv-field select:focus,
.itv-field textarea:focus {
	outline: none;
	border-color: #fedc23;
	box-shadow: 0 0 0 3px rgba(254, 220, 35, 0.35);
}

.itv-form-submit {
	border: none;
	cursor: pointer;
	font-size: 1rem;
	padding: 0.9em 1.8em;
}

@media (max-width: 600px) {
	.itv-form-grid {
		grid-template-columns: 1fr;
	}
}

/* Decorative dot-grid background used behind the Coverage CTA section.
   This is an abstract pattern, not a literal map — swap in a real
   world-map graphic once verified serviced regions are confirmed. */
.itv-dot-grid {
	position: relative;
}

.itv-dot-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(254, 220, 35, 0.35) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	opacity: 0.5;
	pointer-events: none;
}

.itv-dot-grid > * {
	position: relative;
	z-index: 1;
}

/* Responsive video/image embed ratio helper for hero media */
.itv-hero-media img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* ======================================================================
   ONE-PAGE INTERACTION LAYER  (v1.3.0)
   Scroll offsets, reveal animations, pointer effects, and the sections
   added for the single-page homepage. All motion is gated on
   prefers-reduced-motion at the end of this block.
   ====================================================================== */

/* --- anchor offset so the sticky header never covers a section title -- */
html {
	scroll-behavior: smooth;
}

#home, #services, #about, #why-us, #process,
#coverage, #projects, #faq, #blog, #quote {
	scroll-margin-top: 100px;
}

body.admin-bar #home, body.admin-bar #services, body.admin-bar #about,
body.admin-bar #why-us, body.admin-bar #process, body.admin-bar #coverage,
body.admin-bar #projects, body.admin-bar #faq, body.admin-bar #blog,
body.admin-bar #quote {
	scroll-margin-top: 132px;
}

/* Sections are focus targets for keyboard users; never draw a ring. */
[id]:focus {
	outline: none;
}

/* --- active nav item ------------------------------------------------- */
.itv-site-header .itv-primary-nav a.is-active {
	color: var(--wp--preset--color--primary);
	position: relative;
}

.itv-site-header .itv-primary-nav a.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--wp--preset--color--primary);
	border-radius: 2px;
}

/* --- scroll reveal ---------------------------------------------------
   The hiding rule is scoped to .itv-js, which the script adds to <html>.
   No JavaScript, no hiding — content is never trapped behind an
   animation that may not run.                                          */
.itv-js .itv-reveal {
	opacity: 0;
	transform: translateY(22px);
	will-change: opacity, transform;
	transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.itv-js .itv-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.itv-js .itv-reveal--fade {
	transform: none;
}

/* --- hero motion ------------------------------------------------------ */
.itv-hero .wp-block-cover__image-background {
	transform: scale(1.045);
	transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Slow, continuous drift. Tiny range, long duration — reads as depth,
   not as an effect. */
@keyframes itv-hero-drift {
	0%   { transform: scale(1.03); }
	50%  { transform: scale(1.055); }
	100% { transform: scale(1.03); }
}

.itv-hero .wp-block-cover__image-background {
	animation: itv-hero-drift 26s ease-in-out infinite;
}

/* Faint technical grid + a warm glow where the racks are. Decorative
   only, sits between the photo and the gradient. */
.itv-hero .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(254, 220, 35, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(254, 220, 35, 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(90deg, transparent 0%, #000 45%, transparent 92%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, transparent 92%);
}

@keyframes itv-glow {
	0%, 100% { opacity: 0.30; }
	50%      { opacity: 0.55; }
}

.itv-hero-glow {
	position: absolute;
	right: 12%;
	top: 42%;
	width: 42vw;
	max-width: 640px;
	aspect-ratio: 1;
	transform: translateY(-50%);
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(circle, rgba(254, 220, 35, 0.14) 0%, rgba(254, 220, 35, 0) 62%);
	animation: itv-glow 7s ease-in-out infinite;
}

/* --- typing headline -------------------------------------------------- */
.itv-type {
	color: var(--wp--preset--color--primary);
}

.itv-type.is-typing::after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 0.86em;
	margin-left: 0.06em;
	vertical-align: -0.06em;
	background: var(--wp--preset--color--primary);
	animation: itv-caret 1s steps(1) infinite;
}

@keyframes itv-caret {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* Screen-reader copy of the full headline phrase. */
.itv-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- generic section heading block ------------------------------------ */
.itv-section-title {
	font-size: clamp(30px, 2.5vw, 42px);
	line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.itv-section-intro {
	max-width: 680px;
	line-height: 1.7;
}

/* --- services: hover behaviour ---------------------------------------- */
.itv-service-card {
	position: relative;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.itv-service-card::after {
	content: "";
	position: absolute;
	left: clamp(20px, 2vw, 32px);
	right: clamp(20px, 2vw, 32px);
	bottom: 14px;
	height: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.itv-service-card:hover::after,
.itv-service-card:focus-within::after {
	transform: scaleX(1);
}

.itv-service-card .itv-service-icon img {
	transition: transform 0.25s ease;
}

.itv-service-card:hover .itv-service-icon img {
	transform: translateY(-4px);
}

.itv-service-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.itv-service-card:hover .itv-service-more,
.itv-service-card:focus-within .itv-service-more {
	opacity: 1;
	transform: none;
}

/* --- why us: check list ------------------------------------------------ */
.itv-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.itv-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.6;
}

.itv-check-list li::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='black'/></svg>") center / 16px no-repeat,
	              linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='black'/></svg>") center / 16px no-repeat,
	      linear-gradient(#000, #000);
	mask-composite: exclude;
}

/* --- how we work: process ---------------------------------------------- */
.itv-process {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	position: relative;
}

.itv-process::before {
	content: "";
	position: absolute;
	left: 6%;
	right: 6%;
	top: 30px;
	height: 2px;
	background: rgba(255, 255, 255, 0.14);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.itv-process.is-visible::before {
	transform: scaleX(1);
}

.itv-step {
	position: relative;
	text-align: left;
}

.itv-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 20px;
	margin-bottom: 18px;
	position: relative;
	z-index: 1;
}

.itv-step h3 {
	font-size: 19px;
	margin: 0 0 8px;
}

.itv-step p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #b9b9b9;
}

/* --- coverage: network visual ------------------------------------------ */
.itv-network {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 40%, rgba(254, 220, 35, 0.06), transparent 55%),
		#141414;
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.itv-network svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.itv-node {
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes itv-pulse {
	0%, 100% { r: 3.4; opacity: 1; }
	50%      { r: 5.2; opacity: 0.55; }
}

.itv-network .itv-node-pulse {
	animation: itv-pulse 3.2s ease-in-out infinite;
}

.itv-network .itv-node-pulse:nth-of-type(2) { animation-delay: 0.6s; }
.itv-network .itv-node-pulse:nth-of-type(3) { animation-delay: 1.2s; }
.itv-network .itv-node-pulse:nth-of-type(4) { animation-delay: 1.8s; }
.itv-network .itv-node-pulse:nth-of-type(5) { animation-delay: 2.4s; }

@keyframes itv-dash {
	to { stroke-dashoffset: 0; }
}

.itv-network .itv-link {
	stroke-dasharray: 6 6;
	stroke-dashoffset: 240;
	animation: itv-dash 9s linear infinite;
}

/* --- projects: hover --------------------------------------------------- */
.itv-project-card {
	position: relative;
}

.itv-project-media {
	position: relative;
}

.itv-project-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 11, 11, 0.72) 0%, rgba(11, 11, 11, 0.05) 55%);
	opacity: 0.55;
	transition: opacity 0.3s ease;
	pointer-events: none;
	border-radius: 10px;
}

.itv-project-card:hover .itv-project-media::after {
	opacity: 0.9;
}

.itv-project-caption {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 2;
	transform: translateY(6px);
	transition: transform 0.3s ease;
	pointer-events: none;
}

.itv-project-card:hover .itv-project-caption {
	transform: translateY(0);
}

.itv-project-caption .itv-project-name {
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 16px;
	margin: 0;
}

.itv-project-caption .itv-project-type {
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	margin: 2px 0 0;
}

.itv-project-arrow {
	position: absolute;
	right: 16px;
	bottom: 18px;
	z-index: 2;
	color: var(--wp--preset--color--primary);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
	font-size: 20px;
	line-height: 1;
}

.itv-project-card:hover .itv-project-arrow {
	opacity: 1;
	transform: none;
}

.itv-demo-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	background: rgba(11, 11, 11, 0.78);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
}

/* --- FAQ --------------------------------------------------------------- */
.itv-faq {
	max-width: 880px;
	margin-inline: auto;
	display: grid;
	gap: 12px;
}

.itv-faq-item {
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.itv-faq-item.is-open {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 8px 24px rgba(11, 11, 11, 0.06);
}

.itv-faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 20px 22px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--preset--color--contrast);
	line-height: 1.4;
}

.itv-faq-q::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-right: 2px solid var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.itv-faq-item.is-open .itv-faq-q::after {
	transform: rotate(-135deg) translate(-2px, -2px);
	border-color: var(--wp--preset--color--primary);
}

.itv-faq-a {
	height: 0;
	overflow: hidden;
	transition: height 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.itv-faq-a > div {
	padding: 0 22px 22px;
	line-height: 1.7;
	color: #4b4b4b;
}

/* --- blog cards --------------------------------------------------------- */
.itv-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.itv-blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.itv-blog-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 12px 30px rgba(11, 11, 11, 0.08);
}

.itv-blog-media {
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.itv-blog-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.itv-blog-card:hover .itv-blog-media img {
	transform: scale(1.04);
}

.itv-blog-body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.itv-blog-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
	color: #8a8a8a;
	margin-bottom: 10px;
}

.itv-blog-meta .itv-blog-cat {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--primary);
	padding: 3px 8px;
	border-radius: 4px;
}

.itv-blog-title {
	font-size: 19px;
	line-height: 1.35;
	margin: 0 0 10px;
	transition: color 0.2s ease;
}

.itv-blog-card:hover .itv-blog-title,
.itv-blog-card:hover .itv-blog-title a {
	color: #b89a00;
}

.itv-blog-title a {
	text-decoration: none;
}

.itv-blog-excerpt {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
	color: #4b4b4b;
}

.itv-blog-more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.itv-blog-more::after {
	content: "\2192";
	transition: transform 0.25s ease;
}

.itv-blog-card:hover .itv-blog-more::after {
	transform: translateX(4px);
}

/* WordPress Query Loop rendering of the same cards. */
.itv-blog-grid .wp-block-post {
	margin: 0;
}

/* --- quotation section --------------------------------------------------- */
.itv-quote-split {
	display: flex;
	flex-wrap: wrap;
	max-width: 1440px;
	margin-inline: auto;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.itv-quote-aside {
	flex: 0 0 38%;
	max-width: 38%;
	background: #141414;
	color: #fff;
	padding: clamp(28px, 3vw, 48px);
}

.itv-quote-main {
	flex: 1 1 62%;
	max-width: 62%;
	padding: clamp(28px, 3vw, 48px);
	background: #fff;
}

.itv-quote-fact {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 22px;
}

.itv-quote-fact img {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
}

.itv-quote-fact strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	margin-bottom: 2px;
}

.itv-quote-fact span {
	color: #b9b9b9;
	font-size: 14.5px;
}

.itv-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 1.55;
	margin: 4px 0 20px;
}

.itv-consent input {
	margin-top: 3px;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: #0b0b0b;
}

/* ======================================================================
   RESPONSIVE — one-page additions
   ====================================================================== */
@media (max-width: 1200px) {
	.itv-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.itv-process {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}

	.itv-process::before {
		left: 30px;
		right: auto;
		top: 10px;
		bottom: 10px;
		width: 2px;
		height: auto;
		transform: scaleY(0);
		transform-origin: top;
	}

	.itv-process.is-visible::before {
		transform: scaleY(1);
	}

	.itv-step {
		padding-left: 82px;
	}

	.itv-step-num {
		position: absolute;
		left: 0;
		top: 0;
		margin-bottom: 0;
	}

	.itv-quote-aside,
	.itv-quote-main {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.itv-hero-glow {
		display: none;
	}
}

@media (max-width: 782px) {
	#home, #services, #about, #why-us, #process,
	#coverage, #projects, #faq, #blog, #quote {
		scroll-margin-top: 88px;
	}
}

@media (max-width: 560px) {
	.itv-blog-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.itv-faq-q {
		font-size: 16px;
		padding: 18px;
	}

	.itv-faq-a > div {
		padding: 0 18px 18px;
	}
}

/* ======================================================================
   REDUCED MOTION
   Everything above degrades to a static, fully visible end state.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.itv-js .itv-reveal,
	.itv-js .itv-reveal.is-visible {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.itv-hero .wp-block-cover__image-background {
		animation: none !important;
		transform: scale(1.02) !important;
	}

	.itv-hero-glow,
	.itv-network .itv-node-pulse,
	.itv-network .itv-link {
		animation: none !important;
	}

	.itv-process::before {
		transform: none !important;
		transition: none !important;
	}

	.itv-type.is-typing::after {
		animation: none !important;
	}

	.itv-service-card,
	.itv-project-card,
	.itv-blog-card {
		transform: none !important;
	}
}