/*
 * IID Theme — Custom CSS
 * Covers what theme.json cannot: clip-path, animation keyframes,
 * utility classes, pseudo-elements, prefers-reduced-motion.
 */

/* Smooth scroll for in-page anchor navigation (TOC links, "back to top",
   etc.). The prefers-reduced-motion override below resets this to `auto`
   for users who prefer reduced motion. */
html {
	scroll-behavior: smooth;
}

/* =========================================================
   GLOBAL CSS VARIABLES (token bridge for non-theme.json values)
   theme.json holds color/font/spacing tokens. This block holds
   composite values (gradients, multi-stop backgrounds) that
   theme.json can't express but multiple blocks reuse.
   ========================================================= */
:root {
	/* Navy/teal diagonal gradient — used by service sub-pages §2 Capabilities
	   (Figma 1:3201 / 444:4245). Reusable wherever the same gradient appears. */
	--iid-gradient-navy-teal: linear-gradient( 166deg, #236f88 10.6%, #001652 88.1% );
}

/* =========================================================
   WORDPRESS FONT-SIZE CLASS ALIAS FIX (site-wide)
   WordPress PHP renders heading blocks with slug-literal classes:
     has-h1-font-size, has-h2-font-size, ..., has-h5-font-size
   But WordPress generates CSS utility classes using the CSS var name:
     has-h-1-font-size, has-h-2-font-size, ..., has-h-5-font-size
   The slug-literal classes have no CSS rule → font-size inherits body
   (18px) instead of the intended heading size.
   These aliases bridge the gap. Remove if WordPress ever fixes this.
   ========================================================= */
.has-h1-font-size { font-size: var(--wp--preset--font-size--h-1) !important; }
.has-h2-font-size { font-size: var(--wp--preset--font-size--h-2) !important; }
.has-h3-font-size { font-size: var(--wp--preset--font-size--h-3) !important; }
.has-h4-font-size { font-size: var(--wp--preset--font-size--h-4) !important; }
.has-h5-font-size { font-size: var(--wp--preset--font-size--h-5) !important; }

/* =========================================================
   FOLDER-NOTCH SHAPE (signature brand element)
   22px top-left diagonal cut — "document folder" metaphor.
   Figma source: node 48:2443 SVG M22.47 0 H264 V56 H0 V21.19 L22.47 0
   Apply class .btn-notch to primary/secondary/teal buttons.
   NEVER use on icon-only or square utility buttons.
   ========================================================= */
.btn-notch,
.wp-block-button__link.btn-notch,
.wp-block-button.btn-notch .wp-block-button__link {
	clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px, 22px 0);
}

/* Wrapper must not clip ::before — shape lives on the <a>, not the wrapper */
.wp-block-button.btn-notch {
	clip-path: none;
	position: relative;
}

/* Permanent notch diagonal: draws the missing 22×22px cut-corner line.
   Applies to outline (transparent-bg) buttons only.
   CTA-band's ::before (full polygon, higher specificity) overrides this naturally. */
.wp-block-button.btn-notch:has([style*="background-color:transparent"])::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	pointer-events: none;
	z-index: 3;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='22' y1='1' x2='1' y2='22' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2'/%3E%3C%2Fsvg%3E") no-repeat top left / 24px 24px;
}

/* =========================================================
   EYEBROW / LABEL
   ========================================================= */
.iid-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary-500);
	line-height: 1;
	margin-bottom: 12px;
}

/* Eyebrow on dark backgrounds */
.iid-eyebrow--light {
	color: #ffffff !important;
}

/* Eyebrow in teal (on white/light backgrounds) */
.iid-eyebrow--teal {
	color: var(--wp--preset--color--secondary-500);
}

/* =========================================================
   TEAL VERTICAL RULE
   ========================================================= */
.iid-rule-left {
	border-left: 3px solid var(--wp--preset--color--secondary-500);
	padding-left: 24px;
}

/* =========================================================
   COUNTER (tabular nums for stats-row)
   ========================================================= */
.iid-counter {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* =========================================================
   CTA BAND — "From Archive to Intelligence"
   Figma: node 48-2436, 1920×512px
   Background: preset gradient + dot overlay.
   TODO: Replace with cta-band-bg.jpg (Figma node 48:2438, 1920×512)
         once full-res export is available — Figma MCP only delivers
         1024×274 thumbnail, insufficient for full-bleed background.
   ========================================================= */
/* =========================================================
   LAYOUT — zero out WP auto block-gap before footer
   :where(.wp-site-blocks) > * { margin-block-start: 32px } is injected globally.
   Footer must flush directly against the CTA band (design requirement).
   ========================================================= */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* CTA Junction Flush — applied via body_class filter (functions.php §13).
   The PHP filter adds 'has-cta-junction-flush' to <body> when the page's last
   content block is an off-white full-bleed section that should visually meet
   the global CTA band. Self-extending — no per-page-ID maintenance here. */
body.has-cta-junction-flush .wp-site-blocks > .wp-block-template-part:has( .iid-cta-band ) {
	margin-block-start: 0;
}

/* CTA in post_content — full-bleed escape + leading-gap reset.
   When the iid/cta-band block is placed in a page's post_content (custom-CTA
   override on Information / Intelligence / Data sub-pages), the section is
   double-nested inside main.iid-main.has-global-padding > post-content.has-
   global-padding. WP's standard alignfull negative-margin trick only escapes
   ONE has-global-padding ancestor, so the section reaches only 1200px (post-
   content's content area) instead of the viewport 1440px. The 100vw +
   margin-left:calc(50% - 50vw) trick escapes any nesting depth.

   margin-block-start:0 — post-content uses a flow layout whose --wp--style--
   block-gap (32px) is injected as `margin-block-start` on every non-first child.
   That gap leaves a 32px white strip between the preceding section (§4 timeline
   on the Information sub-page) and the CTA. Symmetric with the global template-
   part CTA which also has no leading margin: the CTA is always a terminal
   section, its own min-height + grid centering handle its top edge. Does not
   match on default-CTA pages because the section's parent there is the
   .wp-block-template-part wrapper, not .wp-block-post-content. */
.wp-block-post-content > .iid-cta-band {
	width: 100vw;
	max-width: 100vw;
	margin-block-start: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* CTA dedup template-part — hide empty wrapper.
   render.php sets $GLOBALS['iid_cta_band_rendered']=true on first render. If the
   CTA already rendered from post_content, the global cta-band template-part's
   second call returns empty — but the <div class="wp-block-template-part"></div>
   wrapper still exists as a 0-height sibling between main and footer. The wp-
   site-blocks block-gap (~32px) on that wrapper's margin-top shows as a white
   gap before the footer. Hiding the empty wrapper closes the gap. Selector
   matches only when the template-part contains NO .iid-cta-band — so normal
   pages (where the template-part renders the CTA) are unaffected. */
.wp-site-blocks > main + .wp-block-template-part:not(:has( .iid-cta-band )) {
	display: none;
}

/* Hero-split → Service Capabilities junction flush.
   When the §1 hero (iid/hero-split) is directly followed by §2 capabilities
   (iid/service-capabilities), the 32px block-gap from theme.json creates a
   white seam between them. CSS adjacent sibling selector zeros that gap. */
.wp-block-iid-hero-split + .wp-block-iid-service-capabilities,
.iid-hero-split + .iid-service-capabilities {
	margin-block-start: 0;
}

/* Single case-study CTA — folder-notch primary button rendered after post_content.
   Sized to match Figma "Group 4878" 274×67. */
.iid-case-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 274px;
	height: 67px;
	padding: 0 32px;
	margin-top: 32px;
	background: #00256B;
	color: #FFFFFF;
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	clip-path: polygon( 22px 0, 100% 0, 100% 100%, 0 100%, 0 22px );
	transition: background-color 200ms ease;
}
.iid-case-cta:hover { background: #001C54; color: #FFFFFF; }
.iid-case-cta:focus-visible {
	outline: 3px solid rgba( 47, 164, 169, 0.65 );
	outline-offset: 3px;
}
@media ( prefers-reduced-motion: reduce ) {
	.iid-case-cta { transition: none; }
}

/* Single case-study body H2 headings — Figma node 1:3713/3719/3733 spec:
   Noto Sans Medium 50px / line-height 1.2 / letter-spacing -2px (-0.04em) / #333.
   Scoped to single-case_study template body to avoid leaking into other pages. */
.single-case_study .iid-case-study-body__main h2.wp-block-heading,
.single-case_study .iid-case-study-body__main > h2 {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: clamp( 28px, 3.5vw, 50px );
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.04em;
	color: #333333;
	margin-top: clamp( 32px, 4vw, 48px );
	margin-bottom: clamp( 16px, 1.5vw, 24px );
}
.single-case_study .iid-case-study-body__main h2.wp-block-heading:first-child,
.single-case_study .iid-case-study-body__main > h2:first-child {
	margin-top: 0;
}

/* Single case-study two-column layout (sidebar + content). */
.iid-case-study-body {
	max-width: 1500px;
	margin-inline: auto;
	padding: clamp( 48px, 5vw, 80px ) clamp( 24px, 5vw, 80px );
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: clamp( 32px, 4vw, 80px );
	align-items: start;
}
@media ( max-width: 1023px ) {
	.iid-case-study-body {
		grid-template-columns: 1fr;
	}
}
.iid-case-study-body .iid-case-meta-sidebar {
	position: sticky;
	top: 96px;
}
@media ( max-width: 1023px ) {
	.iid-case-study-body .iid-case-meta-sidebar { position: static; }
}

/* Services §3 — Pillars section (Pages 42 GR / 51 EN).
   Figma nodes 444:4416 (GR) / 444:4415 (EN). Native blocks for the section
   wrapper + intro 2-col, with a wp:html block for the 3 anchor cards (each
   card is a single <a> for whole-card clickability).
   Row 1: 2-col intro (heading 757px + paragraph 592px, gap ~151px).
   Row 2: 3 photo cards 494×642, link to /ipiresies|services/{slug}/.
   Hover state per HOVER-GR/EN reference: overlay darken + content shift up
   + arrow reveal + subtitle reveal. Pure CSS, no JS. */
.iid-services-pillars {
	position: relative;
	padding-block: clamp( 56px, 6vw, 96px );
	padding-inline: clamp( 24px, 5vw, 80px );
	background: #ffffff;
}

/* Alignfull break-out — mirror Erga pattern. Section is full-bleed 100vw;
   inner children are constrained to 1500 via .iid-services-pillars > *. */
.iid-services-pillars.alignfull {
	width: 100vw;
	left: calc( 50% - 50vw );
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.iid-services-pillars > * {
	max-width: 1500px;
	margin-inline: auto !important;
	margin-block-start: 0;
}

.iid-services-pillars__intro {
	margin-bottom: clamp( 48px, 6vw, 80px );
	gap: clamp( 32px, 8vw, 151px );
}

.iid-services-pillars__intro > .wp-block-column:first-child {
	flex-basis: 757px;
	flex-grow: 0;
}
.iid-services-pillars__intro > .wp-block-column:nth-child(2) {
	flex-basis: 592px;
	flex-grow: 0;
}

.iid-services-pillars__headline {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: clamp( 28px, 3.5vw, 50px );
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #333333;
	margin: 0;
}

.iid-services-pillars__intro p {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: #333333;
}
.iid-services-pillars__intro p:not(:last-child) {
	margin-bottom: 1.6em;
}

/* Cards row — 3-col grid, 8px gap. */
.iid-services-pillars__cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 8px;
}

/* Anchor-based card — whole card clickable, contains image + overlay + content. */
.iid-services-pillars__card {
	position: relative;
	display: block;
	aspect-ratio: 494 / 642;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	margin-block-start: 0 !important;
}

.iid-services-pillars__card-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.iid-services-pillars__card-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.20 );
	z-index: 1;
	transition: background-color 350ms ease;
}

.iid-services-pillars__card-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 24px;
	box-sizing: border-box;
	transition: transform 350ms ease;
}

.iid-services-pillars__card-label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: clamp( 24px, 2.5vw, 36px );
	font-weight: 500;
	line-height: 1.4;
	color: #ffffff;
	margin: 0;
}

.iid-services-pillars__card-arrow {
	display: inline-block;
	font-size: 0.85em;
	line-height: 1;
	opacity: 0;
	transform: translateX( -8px );
	transition: opacity 350ms ease, transform 350ms ease;
}

.iid-services-pillars__card-subtitle {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: #ffffff;
	text-align: center;
	max-width: 320px;
	margin: 14px 0 0;
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 350ms ease, transform 350ms ease;
}

/* Hover state — only on hover-capable devices (skip sticky-hover on touch). */
@media ( hover: hover ) {
	.iid-services-pillars__card:hover .iid-services-pillars__card-overlay {
		background: rgba( 0, 0, 0, 0.43 );
	}
	.iid-services-pillars__card:hover .iid-services-pillars__card-content {
		transform: translateY( -8%);
	}
	.iid-services-pillars__card:hover .iid-services-pillars__card-arrow {
		opacity: 1;
		transform: translateX( 0 );
	}
	.iid-services-pillars__card:hover .iid-services-pillars__card-subtitle {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* Keyboard focus mirrors hover. */
.iid-services-pillars__card:focus-visible {
	outline: 3px solid rgba( 47, 164, 169, 0.65 );
	outline-offset: 4px;
}
.iid-services-pillars__card:focus-visible .iid-services-pillars__card-overlay {
	background: rgba( 0, 0, 0, 0.43 );
}
.iid-services-pillars__card:focus-visible .iid-services-pillars__card-content {
	transform: translateY( -8%);
}
.iid-services-pillars__card:focus-visible .iid-services-pillars__card-arrow {
	opacity: 1;
	transform: translateX( 0 );
}
.iid-services-pillars__card:focus-visible .iid-services-pillars__card-subtitle {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.iid-services-pillars__card-overlay,
	.iid-services-pillars__card-content,
	.iid-services-pillars__card-arrow,
	.iid-services-pillars__card-subtitle {
		transition: none !important;
	}
}

/* Tablet (≤781): stack intro 2-col into 1, keep cards 3-col. */
@media ( max-width: 781px ) {
	.iid-services-pillars__intro > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Phone (≤599): stack the 3 cards into 1-col. */
@media ( max-width: 599px ) {
	.iid-services-pillars__cards {
		grid-template-columns: 1fr;
	}
}

/* ::before dot pattern removed — real bokeh is in cta-band-bg.jpg.
   "gradient":"cta-band" removed from block template so WordPress doesn't inject
   .has-cta-band-gradient-background { background: ... !important } which beats any
   selector-based override. Background controlled here only. */
.iid-cta-band {
	position: relative;
	overflow: hidden;
	min-height: 512px;
	/* display: grid + align-content centers the column stack vertically within 512px */
	display: grid;
	align-content: center;
	/* Background photo 1920×512 — Figma node 48:2436: teal gradient + bokeh dots */
	background: url('../images/cta-band-bg.jpg') center center / cover no-repeat;
}

.iid-cta-band > * {
	position: relative;
	z-index: 1;
}

/* Heading: line-height 1.35 (Figma — h2 global default is 1.15).
   Margin override: the pre-refactor template-part set mt:0 / mb:spacing|4 inline;
   the iid/cta-band block render.php emits no inline margins so the h2 default
   (~56px top + bottom) bled in and stretched the section. Restore the Figma gap:
   heading-bottom → subhead-top = 23px (Figma 1:3128) — snapped to spacing|6 (24px).

   max-width: --wp--style--global--wide-size (1500px from theme.json) caps the
   heading so long copy doesn't span the full viewport at wide screens (≥1920px).

   Why wide-size (1500) not content-size (1200): Figma node 1:3361 (Intelligence
   GR CTA) frames the heading at width=1497px ≈ 1500, matching the wideSize token.
   At 1200 cap, Intelligence GR's longest line after the explicit <br> ("αυτο­
   ματοποίησης επεξεργασίας εγγράφων" = 1348px at 70px / -0.02em) overflowed and
   wrapped internally → 3 rendered lines. Lifting to 1500 lets that line fit and
   gives the 2-line design intent. Doesn't affect other CTA pages: Information
   GR (full text 1850px) + EN (1915px) wrap to 2 lines with their own <br>; each
   resulting line is well under 1500. Intelligence EN (no <br>, natural width
   1872px) still wraps to 2 at 1500 (1872 > 1500). Homepage "From Archive to
   Intelligence" (882px) stays single-line. margin-inline:auto centers the
   heading box in the full-bleed section. */
.iid-cta-band .wp-block-heading {
	line-height: 1.35;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--6); /* 24px (Figma 23px, snap-Δ +1) */
	max-width: var(--wp--style--global--wide-size); /* 1500px (theme.json wideSize, matches Figma 1:3361 heading frame width=1497) */
	margin-inline: auto;
}

/* Body: max-width 776px centered (Figma: text node w=776px at 1920 canvas) [non-token-value].
   Margin override (same reason as heading): subhead-bottom → buttons-top = 52px
   (Figma 1:3128: subhead center y=256.5 + lh/2 17.6 = 274.1; buttons top y=326). No
   token within 5% snap (closest: spacing|12=48px, 8% off) → raw 52px. [non-token-value] */
.iid-cta-band p {
	max-width: 776px;
	margin-top: 0;
	margin-bottom: 52px; /* [non-token-value] Figma sub→btn gap, no token within 5% */
	margin-left: auto;
	margin-right: auto;
}

/* Button gap: 22px (Figma: btn1 right=965, btn2 left=987 → gap=22px) [non-token-value].
   Margin-top reset: ensures the subhead's mb above is the sole gap controller.
   justify-content:center: render.php emits the `is-content-justification-center` class,
   but WP only injects the matching inline rule when post_content contains a serialized
   <!-- wp:buttons --> block. Pages without any wp:buttons in their content (e.g. the 3
   About pages — schetika-me-tin-iid, koultoura-eukairies-karieras, pelates — which only
   show buttons via this CTA template-part) miss that inline rule and fall back to
   `justify-content:normal`, stacking buttons flush-left. Declaring it here makes the
   CTA band self-sufficient and independent of WP's conditional style injection. */
.iid-cta-band .wp-block-buttons {
	gap: 22px;
	margin-top: 0;
	justify-content: center;
}

/* Button height: 56px (Figma) — flex to vertically center text */
.iid-cta-band .wp-block-button__link {
	min-height: 56px;
	display: inline-flex;
	align-items: center;
}

/* CTA band button padding (higher specificity than global .btn-notch).
   Figma node 48:2443 (264×56): text x=37..226 → 37px left, 38px right (flat edge).
   spacing--10 (40px) both sides ≈ Figma 37-38px. Rendered widths:
   "ΑΙΤΗΜΑ ΣΥΜΒΟΥΛΕΥΤΙΚΗΣ" ≈ 190+80 = 270px (Figma 264px, Δ6px ✓)
   "ΑΙΤΗΜΑ ΠΡΟΣΦΟΡΑΣ"      ≈ 150+80 = 230px (Figma 229px, Δ1px ✓) */
.iid-cta-band .wp-block-button.btn-notch .wp-block-button__link {
	padding-top:    var(--wp--preset--spacing--4);   /* 16px */
	padding-bottom: var(--wp--preset--spacing--4);   /* 16px */
	padding-left:   var(--wp--preset--spacing--10);  /* 40px ≈ Figma 37px */
	padding-right:  var(--wp--preset--spacing--10);  /* 40px ≈ Figma 38px, flat right edge */
}

/* =========================================================
   CTA BAND — Outline button: SVG polygon border
   Problem: CSS border doesn't follow clip-path — gap at top-left diagonal.
   Fix: SVG polygon stroke via ::before on wrapper div.

   Why not border/box-shadow: clipped by clip-path → rectangular.
   Why not Approach C (bg-color trick): CTA band has gradient bg → can't
     fake transparent interior with a flat color.
   Why ::before on wrapper (not <a>): line 587 resets content:none on
     .wp-element-button::before — the wrapper div is unaffected.

   Prerequisite: override clip-path:none on wrapper (redundant — the <a>
     retains its own clip-path for the visual shape). Without this, the
     wrapper's clip-path would also clip the ::before SVG overlay.

   Figma ref: node 48:2442 — 229×56, 22px top-left diagonal cut.
   SVG polygon: 2px inset from element edges → stroke-width:2 renders
     fully inside SVG viewport (no clipping artefacts).
   ========================================================= */

/* Step 1 — Remove redundant clip-path from wrapper so ::before is unclipped.
   Both buttons in the CTA band are safe: shape is defined by the <a>'s clip-path. */
.iid-cta-band .wp-block-button.btn-notch {
	clip-path: none;
	position: relative;
}

/* Step 2 — Remove CSS border from outline <a>: it draws rectangularly, ignores diagonal. */
.iid-cta-band .wp-block-button.btn-notch .wp-block-button__link[style*="background-color:transparent"] {
	border: none !important;
}

/* Step 3 — SVG polygon stroke overlay on wrapper ::before.
   viewBox 229×56 matches Figma button dimensions (node 48:2442).
   preserveAspectRatio="none" scales to actual rendered width proportionally.
   Polygon inset 2px: stroke-width=2 → stroke center at 2px → stroke extends
   from 1px to 3px inside element bounds → fully visible, no viewport clipping. */
.iid-cta-band .wp-block-button.btn-notch:has([style*="background-color:transparent"])::before {
	content: '';
	position: absolute;
	inset: 0;
	width: auto;  /* override global rule's width: 24px — inset:0 controls sizing */
	height: auto; /* override global rule's height: 24px */
	pointer-events: none;
	z-index: 2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 229 56' preserveAspectRatio='none'%3E%3Cpolygon points='22,2 227,2 227,54 2,54 2,22 22,2' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C%2Fsvg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* =========================================================
   CASE STUDY CARD hover
   ========================================================= */
.iid-case-study-card {
	transition:
		transform var(--wp--custom--motion--duration-base, 180ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow var(--wp--custom--motion--duration-base, 180ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.iid-case-study-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 37, 107, 0.12);
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.iid-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--wp--custom--motion--duration-slow, 320ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
		transform var(--wp--custom--motion--duration-slow, 320ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.iid-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* =========================================================
   BACK TO TOP (legacy class — kept for backwards compat)
   ========================================================= */
.iid-back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--motion--duration-base, 180ms);
}

.iid-back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* =========================================================
   FLOATING ACTIONS — Chat + Back-to-Top
   Fixed, bottom-right corner.
   Chat: teal circle 48×48 (always visible, at bottom).
   Back-to-top: outlined square 48×48, hidden until scrollY > 300.
   column-reverse: chat anchored at bottom, back-to-top appears above it.
   ========================================================= */
.iid-floating-actions {
	position: fixed;
	right: 24px;
	bottom: 24px;
	top: auto;
	transform: none;
	z-index: 30;
	display: flex;
	flex-direction: column-reverse;
	gap: 12px;
}

.iid-floating-top {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 180ms ease, transform 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.iid-floating-top {
		transition: none;
	}
}

/* Back-to-top — outlined square, transparent bg, hidden by default */
.iid-floating-top {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: 0;
	color: #ffffff;
	opacity: 0;
	pointer-events: none;
}

.iid-floating-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.iid-floating-top:hover {
	border-color: #ffffff;
	transform: translateY(-1px);
}

.iid-floating-top:focus-visible {
	outline: 3px solid rgba(47, 164, 169, 0.5);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.iid-floating-actions {
		display: none;
	}
}

/* =========================================================
   SKIP LINK (accessibility)
   ========================================================= */
.skip-link {
	position: absolute;
	top: -100%;
	left: 16px;
	z-index: 9999;
	padding: 8px 16px;
	background: var(--wp--preset--color--primary-500, #00256b);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.skip-link:focus {
	top: 16px;
}

/* =========================================================
   GLOBAL FOCUS RING (WCAG AA — 3px teal, offset 2px)
   ========================================================= */
:focus-visible {
	outline: 3px solid rgba(47, 164, 169, 0.35);
	outline-offset: 2px;
}

/* =========================================================
   BUTTON TRANSITION
   ========================================================= */
.wp-block-button__link {
	transition:
		background-color var(--wp--custom--motion--duration-base, 180ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
		color var(--wp--custom--motion--duration-base, 180ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* =========================================================
   NOTCH CORNER — top-left decorative cut (case study cards)
   ========================================================= */
.iid-notch-corner-tl {
	clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
}

/* =========================================================
   CHIP / FILTER
   ========================================================= */
.iid-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border: 1.5px solid var(--wp--preset--color--neutral-300, #D0D7E2);
	border-radius: 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 120ms, color 120ms, border-color 120ms;
}

.iid-chip.is-active,
.iid-chip:hover {
	background-color: var(--wp--preset--color--secondary-500, #2fa4a9);
	border-color: var(--wp--preset--color--secondary-500, #2fa4a9);
	color: #fff;
}

/* =========================================================
   SITE HEADER — two-layer layout
   sticky must be on the OUTER template-part wrapper
   (<header class="wp-block-template-part">) because that is
   the direct child of .wp-site-blocks (the scroll container).
   Applying sticky only to the inner div means it sticks within
   a 72px parent — which gives it zero scroll travel.
   ========================================================= */

/* Sticky on the outer template-part wrapper — this is what actually sticks */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky !important;
	top: 0;
	z-index: 100;
}

/* Outer div — full-width navy bg, no sticky needed here */
/* Outer header bar — full-width navy bg.
   has-global-padding (from theme.json root padding = spacing-6 = 24px) gives
   horizontal gutter on viewports narrower than wide-size+48. Removed the
   blanket `padding: 0` override so inner content breathes at <1500px.
   Vertical padding stays 0 — bar height comes from inner. */
.iid-site-header {
	position: relative;
	background-color: #00256b !important;
	width: 100%;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	overflow: visible !important;
}

/* Ensure scroll container ancestors don't trap sticky */
html,
body,
.wp-site-blocks {
	overflow-x: clip; /* clip ≠ hidden — does NOT break position:sticky */
}

/* WP admin bar offset */
@media screen and (min-width: 783px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 32px;
	}
}

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

/* Inner — flex row, 96px tall (Figma: 96px bar height).
   max-width:1500px → at 1920px viewport, margin:auto gives ~210px gutter each side.
   padding:0 — logo/nav start flush at x=210, matching all content containers below. */
.iid-site-header > .wp-block-group,
.iid-header-inner {
	height: 96px;
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	gap: 32px !important;
	box-sizing: border-box;
	width: 100%;
}

/* ── Block-gap fix ─────────────────────────────────────────────────────────
   WordPress generates: .wp-site-blocks > * + * { margin-block-start: 32px }
   The header template-part renders as: <header class="wp-block-template-part">
   iid-site-header is NESTED inside it, so direct-child selectors must target
   wp-block-template-part, not iid-site-header.
   ─────────────────────────────────────────────────────────────────────────── */

/* No gap on/around the outer template-part wrapper */
.wp-site-blocks > header.wp-block-template-part {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* No gap on the first content section that follows the header */
.wp-site-blocks > header.wp-block-template-part + * {
	margin-block-start: 0 !important;
}

/* Ensure the main content wrapper itself has no top margin */
main.iid-main,
.wp-site-blocks > main.iid-main {
	margin-block-start: 0 !important;
}

/* Neutralise any margin on the outer header group block */
.wp-block-group.iid-site-header,
.wp-site-blocks > header.wp-block-template-part {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Logo — static img bypass (wp:site-logo replaced with wp:html img) */
.iid-logo-link {
	display: flex;
	align-items: center;
	align-self: center;
	text-decoration: none;
	line-height: 0;
	flex-shrink: 0;
}

.iid-logo-static {
	height: 70px; /* Figma: 70px logo height in 96px bar */
	width: auto;
	display: block;
}

/* Right utils group — stretches to fill header height for dividers */
.iid-site-header .iid-header-utils {
	align-self: stretch !important;
	display: flex !important;
	align-items: stretch !important;
	gap: 0 !important;
	flex-shrink: 0;
}

/* =========================================================
   PRIMARY NAV — item typography
   14px / 500 / white / uppercase / 0.04em tracking
   ========================================================= */
.iid-primary-nav .wp-block-navigation-item__content {
	font-size: 16px; /* Figma: body3 16px */
	font-weight: 400; /* Figma: Regular */
	letter-spacing: -0.005em; /* Figma: -0.08px at 16px = -0.005em */
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	transition: color 150ms ease, text-decoration-color 150ms ease;
}

/* Hover: teal color, no underline */
.iid-primary-nav .wp-block-navigation-item__content:hover {
	color: #2fa4a9;
	text-decoration: none;
}

/* Active/current page: teal background box + white text */
.iid-primary-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.iid-primary-nav .wp-block-navigation-item [aria-current="page"] {
	background-color: #2fa4a9;
	color: #ffffff;
	padding: 4px 10px;
	border-radius: 2px;
}

/* Nav items gap: 34px [non-token: Figma 34px — between spacing--8 (32px) and spacing--10 (40px), >5% from both] */
.iid-primary-nav .wp-block-navigation__container {
	gap: 34px;
}

/* Hide submenu arrows for flat items; show for has-child only */
.iid-primary-nav .wp-block-navigation__submenu-icon {
	display: none;
}
.iid-primary-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
	display: inline-flex;
	margin-left: 6px;
	opacity: 0.7;
}

/* ─── DROPDOWN SUBMENU ──────────────────────────────── */

/* Submenu panel — specificity (0,4,0) beats WP core (0,3,0) that uses background-color:inherit */
.iid-primary-nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--primary-500); /* #00256B navy */
	border-top: 2px solid var(--wp--preset--color--secondary-500); /* teal accent line */
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	min-width: 240px;
	padding: 6px 0;
	top: 100%;
	left: 0;
}

/* Submenu link items */
.iid-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	color: #ffffff;
	padding: 11px 24px;
	transition: background-color 120ms ease, color 120ms ease;
}

/* Submenu hover */
.iid-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--primary-600); /* #001C54 */
	color: var(--wp--preset--color--secondary-300);          /* #4DB5B9 teal-light */
}

/* =========================================================
   VERTICAL DIVIDERS — 1px white, full header height
   ========================================================= */
.iid-header-divider {
	display: block;
	width: 1px;
	background: rgba(255, 255, 255, 0.2);
	align-self: stretch;
	flex-shrink: 0;
}

/* =========================================================
   SEARCH BUTTON — naked icon, no border, padded for click area
   ========================================================= */
.iid-header-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #ffffff;
	line-height: 1;
	transition: color 150ms ease;
}

.iid-header-search-btn:hover {
	color: #2fa4a9;
}

.iid-header-search-btn svg {
	width: 24px; /* Figma: 37px container ≈ 24px icon + padding */
	height: 24px;
	transition: stroke 150ms ease;
}

.iid-header-search-btn:focus-visible {
	outline: 2px solid rgba(47, 164, 169, 0.5);
	outline-offset: 2px;
}

/* =========================================================
   LANG TOGGLE — naked "EN" text, no border
   ========================================================= */
.iid-lang-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	background: transparent;
	border: none;
	font-size: 16px; /* Figma: 16px / Regular */
	font-weight: 400;
	letter-spacing: 0; /* Figma: no tracking */
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	line-height: 1.45; /* Figma: 1.45 */
	transition: color 150ms ease;
}

.iid-lang-toggle:hover {
	color: #2fa4a9;
}

.iid-lang-toggle:focus-visible {
	outline: 2px solid rgba(47, 164, 169, 0.5);
	outline-offset: 2px;
}

/* wp:shortcode in FSE template parts renders WITHOUT .wp-block-shortcode wrapper.
   wpautop wraps the <a> in a <p> which becomes a direct flex child of .iid-header-utils.
   Zero out browser <p> margins and make it a flex container to center the <a> inside. */
.iid-site-header .iid-header-utils > p {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	align-self: stretch !important;
}

/* =========================================================
   BUTTON — folder-notch gap safeguard
   22px top-left diagonal cut on adjacent buttons should not
   visually merge. Enforce minimum gap ≥ 22px.
   ========================================================= */
.wp-block-buttons:has(.btn-notch) {
	gap: max(var(--wp--style--block-gap, 2rem), 22px);
}

.wp-block-button.btn-notch .wp-block-button__icon,
.wp-block-button.btn-notch svg {
	display: none;
}

.wp-element-button::before,
.wp-element-button::after {
	content: none;
}

/* =========================================================
   PATTERN: CASE STUDY CARD
   ========================================================= */

/* Stretch cover inner container full height so top/bottom groups
   can be positioned at the extremes via space-between flex. */
.iid-case-study-card .wp-block-cover {
	overflow: hidden;
}

.iid-case-study-card .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	width: 100%;
}

.iid-case-study-card__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	min-height: inherit;
	padding: 20px;
}

.iid-case-study-card__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 0;
}

.iid-case-study-card__eyebrow {
	color: var(--wp--preset--color--secondary-500, #2fa4a9);
	margin-bottom: 0;
}

/* Client logo in translucent navy pill */
.iid-case-study-card__logo-pill {
	background: rgba(0, 37, 107, 0.65);
	border-radius: 4px;
	padding: 6px 10px;
	backdrop-filter: blur(4px);
	flex-shrink: 0;
}

.iid-case-study-card__client-logo img {
	display: block;
	object-fit: contain;
	filter: brightness(0) invert(1); /* Force white on navy pill bg */
}

.iid-case-study-card__bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
}

.iid-case-study-card__title {
	flex: 1;
	margin: 0;
	/* max 2 lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 40×40 white square arrow button */
.iid-case-study-card__arrow {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.iid-case-study-card__arrow p {
	margin: 0;
	line-height: 1;
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.iid-case-study-card:hover .iid-case-study-card__arrow p {
	transform: translateX(3px);
}

/* Sector chip below the card */
.iid-case-study-card__sector {
	padding: 8px 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
	background: var(--wp--preset--color--neutral-100, #f4f6fa);
	border-top: 1px solid var(--wp--preset--color--neutral-200, #e5e9f0);
}

@media (prefers-reduced-motion: reduce) {
	.iid-case-study-card__arrow,
	.iid-case-study-card__arrow p {
		transition: none;
	}
}

/* =========================================================
   §3 ΠΟΙΟΙ ΕΙΜΑΣΤΕ — About section
   Badge left (38%) / content right (62%), stats inside right col.
   ========================================================= */

.iid-about-section {
	background: #fff;
}

/* §4 Team Band — Figma node 48:2363 — 1499px × 659px, centered, flush with neighbours */
.iid-team-band {
	max-width: 1499px !important; /* Figma frame width — not full-bleed */
	width: 100% !important;       /* override alignfull 100vw on wide viewports */
	margin: 0 auto !important;    /* center + top/bottom 0 for flush junctions */
	position: relative;           /* stacking context — renders above §5 navy bg */
	z-index: 2;
}

.iid-team-band .wp-block-cover__image-background {
	object-position: center top;
}

/* §5 Solutions — navy bg starts 281px before photo ends (mockup measurement: navy at render y=2612, photo bottom at y=2893) */
.iid-solutions-section {
	margin-top: -281px !important;  /* slide navy bg up 281px behind photo bottom */
	padding-top: 377px !important;  /* 96 section-top + 281 overlap — content stays at render y=2989 */
}

.iid-about-section__inner {
	max-width: 1500px;
	margin: 0 auto;
	padding: 115px 32px 120px; /* top: 115px per Figma — eyebrow lives ~115px below section top */
}

.iid-about-section__main {
	display: grid;
	grid-template-columns: 287px 1fr; /* was 264px — Figma badge width 287px */
	gap: 168px;                       /* was 167px — Figma gap badge→content */
	align-items: start;
}

/* Badge — left column */
.iid-about-section__badge {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.iid-about-section__badge img {
	width: 100%;
	max-width: 287px;       /* was 280px — Figma badge diameter 287px */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	margin: 0;
}

/* Content — right column */
.iid-about-section__content {
	display: flex;
	flex-direction: column;
}

/* Eyebrow override — Figma uses 15px / #333 / -0.005em (not the global teal eyebrow) */
.iid-about-section .iid-eyebrow {
	font-size: var(--wp--preset--font-size--caption); /* 15px — was 12px (eyebrow token) */
	color: var(--wp--preset--color--neutral-800);     /* #333 — was secondary-500 teal */
	letter-spacing: -0.005em;                         /* was +0.2em — Figma -0.075px/15px */
	font-weight: 400;                                 /* was 600 */
	line-height: 1.4;
	text-transform: uppercase;                        /* Figma: "ΠΟΙΟΙ ΕΙΜΑΣΤΕ" is uppercase */
	margin-top: -36px;   /* Figma: eyebrow at y=124, badge at y=160 — pull up 36px [non-token-value] */
	margin-bottom: 5px;  /* Figma eyebrow→H2 gap ~15px; combined with H2 margin-top 16px = 21px effective */
}

.iid-about-section__h2 {
	font-size: var(--wp--preset--font-size--h-1); /* fluid 40–70px — WP generates h-1 not h1 */
	font-weight: 400;
	line-height: 1.2;         /* was 1.15 */
	letter-spacing: -0.01em; /* was -0.02em — Figma -0.7px at 70px = -0.01em */
	color: var(--wp--preset--color--primary-500);
	margin: 16px 0 20px; /* Figma heading→body gap ~17px — tightened from 48px */
}

.iid-about-section__body {
	font-size: var(--wp--preset--font-size--body-lg); /* 20px — was 17px */
	font-weight: 400;
	line-height: 1.6;          /* was 1.7 */
	color: var(--wp--preset--color--neutral-800);     /* #333 — was neutral-400 (#6f8894) */
	max-width: none;           /* was 640px — Figma body spans full column (~1044px) */
	margin: 0 0 43px; /* Figma body→stats gap ~43px — tightened from 56px */
}

/* Stats — 4-column grid, vertical left-border per cell */
.iid-about-section__stats {
	display: grid;
	grid-template-columns: repeat( 4, auto );
	gap: 88px; /* was 64px — Figma gap-[88px] [non-token-value] */
	justify-content: start;
}

.iid-stat {
	position: relative;
	padding-left: 14px; /* was 24px — Figma 14px from divider line to content [non-token-value] */
}

.iid-stat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--wp--preset--color--secondary-500); /* teal divider line */
}

.iid-stat__number {
	display: block;
	color: var(--wp--preset--color--primary-500); /* NAVY — was secondary-500 (teal) */
	font-size: var(--wp--preset--font-size--h-2);  /* 50px — WP generates h-2 not h2 */
	font-weight: 500;                             /* was 400 — Figma Medium */
	line-height: 1.2;                             /* was 1.1 */
	letter-spacing: -0.02em;                      /* was 0 — Figma -1px at 50px */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	margin-bottom: 8px;
}

.iid-stat__label {
	display: block;
	color: var(--wp--preset--color--secondary-700); /* #16587a — was neutral-400 (#6f8894) */
	font-size: var(--wp--preset--font-size--body-sm); /* 16px — was 13px */
	font-weight: 400;
	line-height: 1.6; /* was 1.4 */
}

/* Medium screens (≤1100px): stack columns, 2×2 stats */
@media ( max-width: 1100px ) {
	.iid-about-section__main {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.iid-about-section__badge {
		padding-top: 0;
	}

	.iid-about-section__stats {
		grid-template-columns: repeat( 2, 1fr );
		gap: 32px 24px;
	}

	.iid-stat:nth-child( 3 )::before {
		display: none;
	}
}

/* Mobile (≤768px): tighter padding */
@media ( max-width: 768px ) {
	.iid-about-section__inner {
		padding: 80px 24px 64px;
	}

	.iid-about-section__stats {
		gap: 32px 16px;
	}
}

/* =========================================================
   PATTERN: PROCESS STEPS
   ========================================================= */

.iid-process-steps__grid {
	gap: 0 !important;
}

.iid-process-steps__step {
	padding: 32px 24px;
	border-left: 3px solid var(--wp--preset--color--secondary-500, #2fa4a9);
	position: relative;
}

/* Connector line between steps on desktop */
.iid-process-steps__step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 40px;
	right: -3px;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--neutral-200, #e5e9f0);
}

.iid-process-steps__number {
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	margin: 0 0 16px !important;
}

.iid-process-steps__heading {
	font-size: 18px !important;
	font-weight: 500;
	margin: 0 0 12px !important;
}

.iid-process-steps__body {
	font-size: 15px !important;
	line-height: 1.6;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.iid-process-steps__step {
		border-left: 3px solid var(--wp--preset--color--secondary-500, #2fa4a9);
		border-top: none;
	}

	.iid-process-steps__step:not(:last-child)::after {
		content: none; /* Remove horizontal connector on mobile */
	}
}

/* =========================================================
   §9 CERTIFICATIONS — figma 1:6235
   Full-width eyebrow+H2, then flex row: body (727px) / cards (690px)
   ========================================================= */

/* WP block gap adds 32px margin-top between sections; §8→§9 must be flush per Figma */
.iid-cert-section {
	margin-top: 0 !important;
}

.iid-cert-section__eyebrow {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	color: #333;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	line-height: 1.4;
}

.iid-cert-section__heading {
	margin: 16px 0 96px; /* eyebrow→H2: 16px, H2→row: 96px */
	font-size: 50px;
	font-weight: 500;
	color: #00256B;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.iid-cert-section__row {
	display: flex;
	flex-direction: row;
	gap: 81px;
	align-items: flex-start;
}

/* [non-token-value] contentSize=1499px matches Figma canvas (1920−2×211=1498px).
   Body grows to fill: 1499−81(gap)−690(cards)=728px ≈ Figma 727px */
.iid-cert-section__body {
	flex: 1 1 0;
	min-width: 0;
}

.iid-cert-section__cards {
	flex: 0 0 690px; /* fixed: 4×159px + 3×18px gap = exactly 690px */
	display: flex;
	flex-direction: row;
	gap: 18px;
	flex-wrap: wrap;
}

.iid-cert-section__body p {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	color: #333;
	line-height: 1.6;
}


.iid-cert-card {
	width: 159px;
	height: 197px;
	background: rgba(107, 124, 147, 0.1);
	border: 1px solid rgba(111, 136, 148, 0.4);
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	/* Card is now an <a> with PDF target=_blank — reset link styles + add hover affordance. */
	position: relative;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.iid-cert-card:hover {
	background: rgba(107, 124, 147, 0.18);
	border-color: rgba(0, 37, 107, 0.5);
	transform: translateY(-2px);
}

.iid-cert-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-navy, #00256B);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.iid-cert-card,
	.iid-cert-card:hover {
		transition: none;
		transform: none;
	}
}

/* New-tab indicator icon, top-right of each card. Subtle (40% opacity)
   to avoid competing με the code/serial/label, lifts to 80% on hover. */
.iid-cert-card__icon {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #333;
	opacity: 0.4;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.iid-cert-card:hover .iid-cert-card__icon,
.iid-cert-card:focus-visible .iid-cert-card__icon {
	opacity: 0.8;
}

/* Keep code/serial visually clear of the icon — 18px right padding. */
.iid-cert-card__top {
	padding-right: 18px;
}

.iid-cert-card__top {
	display: flex;
	flex-direction: column;
}

.iid-cert-card__code {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #333;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	line-height: 1.4;
}

.iid-cert-card__serial {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	color: #333;
	line-height: 1.4;
}

.iid-cert-card__desc {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	color: #333;
	letter-spacing: -0.01em;
	line-height: 1.4;
}

@media (max-width: 1200px) {
	.iid-cert-section__row {
		gap: 48px;
	}
	.iid-cert-section__body {
		flex: 1 1 300px;
	}
}

@media (max-width: 767px) {
	.iid-cert-section__row {
		flex-direction: column;
		gap: 40px;
	}
	.iid-cert-section__body {
		flex: none;
	}
	.iid-cert-section__cards {
		gap: 12px;
	}
	.iid-cert-card {
		flex: 0 0 calc(50% - 6px);
		width: auto;
		height: auto;
		min-height: 160px;
	}
}

@media (max-width: 479px) {
	.iid-cert-card {
		flex: 0 0 100%;
	}
}

/* =========================================================
   SOLUTIONS SECTION — services rail + active card
   ========================================================= */
.iid-solutions-section__rail-item {
	display: block;
	padding: 16px 0 16px 20px;
	border-left: 3px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0;
	transition: color 180ms, border-color 180ms;
}

.iid-solutions-section__rail-item.is-active {
	border-left-color: var(--wp--preset--color--secondary-500, #2fa4a9);
	color: #fff;
}

/* =========================================================
   FEATURED CASE STUDY (homepage Section 7)
   Photo left 40%, white info card right 60%
   ========================================================= */
.iid-featured-cs {
	align-items: stretch !important;
}

.iid-featured-cs__photo-col {
	position: relative;
	overflow: hidden;
}

.iid-featured-cs__photo-col .wp-block-image {
	height: 100%;
	min-height: 420px;
}

.iid-featured-cs__photo-col .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iid-featured-cs__card {
	background: #fff;
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}

.iid-featured-cs__card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
}

.iid-featured-cs__card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 32px;
}

/* =========================================================
   INSIGHTS — section wrapper, header, link resets
   ========================================================= */

/* Section outer padding (desktop) */
.iid-insights-section {
	padding-top: var(--wp--preset--spacing--80, 80px);
	padding-bottom: var(--wp--preset--spacing--80, 80px);
	background: var(--wp--preset--color--neutral-0, #fff);
}

/* Centered content wrapper */
.iid-insights__wrap {
	max-width: 1500px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40, 32px);
}

/* Header row: heading group left, CTA right */
.iid-insights__header {
	display: flex;
	align-items: flex-start; /* figma 1:6199: CTA top=177, H2 top=172 — top-aligned, not centered */
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 24px);
	margin-bottom: var(--wp--preset--spacing--60, 48px);
}

.iid-insights__heading-group {
	display: flex;
	flex-direction: column;
	gap: 10px; /* figma 1:6199: eyebrow bottom=162, H2 top=172 → gap=10px (was 8px) */
}

/* Kill WP block default margin-block-start that pushes H2 ~50px below eyebrow */
.iid-insights__heading-group .iid-eyebrow,
.iid-insights__heading-group .iid-insights__heading {
	margin: 0;
}

/* CTA offset: calibrated to browser eyebrow height 12px (not Figma's 21px). H2 top + 5px optical offset */
.iid-insights__header .wp-block-buttons {
	padding-top: 27px;
}

/* Featured card — static brand image, decorative (no link, no hover) */
.iid-insight-featured-card {
	height: 100%; /* figma 1:6202: 739×736px, fills left column height */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Grid card link — block-level, no underline, full height */
.iid-insight-card-link {
	display: block;
	text-decoration: none;
	height: 100%;
}

/* Card — relative + transition for hover state */
.iid-insight-card {
	position: relative;
	transition: background-color 0.3s ease;
}

/* Arrow badge — hidden by default, revealed on hover */
.iid-insight-card__arrow {
	position: absolute;
	top: 0;
	right: 0;
	width: 96px; /* figma 1:6219: 93px snapped to 96 (3.2% deviation) */
	height: 96px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary-500, #00256b);
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Hover/focus: navy card state */
.iid-insight-card-link:hover .iid-insight-card,
.iid-insight-card-link:focus-visible .iid-insight-card {
	background: var(--wp--preset--color--primary-500, #00256b);
}

.iid-insight-card-link:hover .iid-insight-card .wp-block-post-date,
.iid-insight-card-link:hover .iid-insight-card .iid-insight-chip,
.iid-insight-card-link:hover .iid-insight-card .wp-block-post-title,
.iid-insight-card-link:focus-visible .iid-insight-card .wp-block-post-date,
.iid-insight-card-link:focus-visible .iid-insight-card .iid-insight-chip,
.iid-insight-card-link:focus-visible .iid-insight-card .wp-block-post-title {
	color: #fff !important;
}

.iid-insight-card-link:hover .iid-insight-card .iid-insight-card__arrow,
.iid-insight-card-link:focus-visible .iid-insight-card .iid-insight-card__arrow {
	opacity: 1;
}

/* =========================================================
   INSIGHTS — featured large card + 2×2 grid
   ========================================================= */
.iid-insights-columns {
	align-items: stretch !important;
	gap: var(--wp--preset--spacing--5, 20px) !important; /* figma 1:6199: 20px between featured + grid */
}

/* Right 2×2 grid via query */
.iid-insights-grid-col .wp-block-post-template {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 !important; /* dividers via card borders, not gap trick */
	background: none;
	border: none;
	border-bottom: 1px solid rgba(0, 37, 107, 0.12); /* figma: bottom line at grid bottom */
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.iid-insights-grid-col .wp-block-post-template > li {
	list-style: none;
	aspect-ratio: 1 / 1; /* figma 1:6199: each cell 371×368px ≈ 1:1, snapped */
	min-width: 0;  /* break circular ref: aspect-ratio + 1fr — without these, Chromium */
	min-height: 0; /* computes 1fr tracks based on aspect-ratio height instead of width */
	overflow: hidden;
}

.iid-insights-grid-col .iid-insight-card {
	background: #fff;
	padding: 12px 20px 16px; /* figma: 11px top / 15px bottom, snapped to 12/16 */
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* date at top, chip+title at bottom */
	height: 100%;
	box-sizing: border-box;
}

/* Dividers — figma 1:6199 line nodes:
   node 1:6212: horizontal at y=648, full grid width (row separator)
   node 1:6213: vertical at x=1340, y=669-1000, bottom row only (Figma had navy top-right — hid it)
   node 1:6221: horizontal at y=1016, full grid width (bottom border)
   User design decision: add top-row vertical divider for all-white default state */

/* Row separator: border-top on bottom-row cells */
.iid-insights-grid-col .wp-block-post-template > li:nth-child(3) .iid-insight-card,
.iid-insights-grid-col .wp-block-post-template > li:nth-child(4) .iid-insight-card {
	border-top: 1px solid rgba(0, 37, 107, 0.12);
}

/* Column separator: right cells of BOTH rows (top-right + bottom-right) */
.iid-insights-grid-col .wp-block-post-template > li:nth-child(2) .iid-insight-card,
.iid-insights-grid-col .wp-block-post-template > li:nth-child(4) .iid-insight-card {
	border-left: 1px solid rgba(0, 37, 107, 0.12);
}

/* On hover the navy background visually swallows the divider (rgba border on navy ≈ invisible) */

.iid-insight-card__bottom {
	display: flex;
	flex-direction: column;
	gap: 4px; /* chip → title tight spacing */
}

@media (max-width: 767px) {
	.iid-insights-grid-col .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}


/* =========================================================
   INSIGHTS — eyebrow color override
   ========================================================= */
/* figma 1:6200: insights eyebrow uses text-body (#333), not brand teal */
.iid-insights-section .iid-eyebrow {
	color: var(--wp--preset--color--neutral-800, #333333);
}

/* =========================================================
   HAMBURGER BUTTON (desktop: hidden, mobile: visible)
   ========================================================= */
.iid-hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

@media (max-width: 1023px) {
	/* Show hamburger */
	.iid-hamburger {
		display: flex;
	}

	/* Hide desktop nav */
	.iid-primary-nav {
		display: none !important;
	}

	/* Hide dividers + search + EN on mobile; hamburger takes over */
	.iid-header-divider,
	.iid-header-search-btn,
	.iid-lang-toggle {
		display: none !important;
	}
}

/* =========================================================
   MOBILE MENU OVERLAY
   ========================================================= */
.iid-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex !important;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
	max-width: none !important;
}

.iid-mobile-menu.is-open {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.iid-mobile-menu {
		transition: none;
	}
}

/* Close button */
.iid-mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 2px;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.iid-mobile-menu__close:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* Mobile nav items */
.iid-mobile-nav .wp-block-navigation-item__content {
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	display: block;
	width: 100%;
}

/* =========================================================
   INSIGHTS — grid card chips + active first card
   ========================================================= */
/* figma 1:6199: chip = plain uppercase text, no border, navy color */
.iid-insight-chip {
	display: block;
	font-size: var(--wp--preset--font-size--caption, 15px); /* figma: 15px caption */
	font-weight: 400; /* figma: Regular */
	letter-spacing: 0;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
	color: var(--wp--preset--color--primary-500, #00256b);
}

.iid-insight-chip--navy {
	border: none; /* figma: no border (prev: 1.5px teal) */
	color: var(--wp--preset--color--primary-500, #00256b);
}

/* H2 "Νέα & Άρθρα" — figma 1:1802: 50px/500/1.2/−0.02em, fixed (no fluid clamp for this section) */
.iid-insights__heading {
	font-size: 50px !important;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* Post title in grid cards: figma 22px/400/1.6, no line clamp —
   cards expand vertically so long titles read in full. */
.iid-insights-grid-col .iid-insight-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--h5, 22px) !important; /* figma: 22px = h5 token */
	font-weight: 400 !important; /* figma: Regular */
	line-height: 1.6; /* figma: 1.6 */
	margin: 0;
}

/* =========================================================
   SECTION SPACING — mobile override (64px)
   ========================================================= */
@media (max-width: 767px) {
	.iid-solutions-section,
	.iid-featured-case-study,
	.iid-cert-section,
	.iid-insights-section {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
}

/* =========================================================
   §8 CTA STRIP — figma 1:6223: 168px height, bg image, text+btn row
   Canvas: 1920px. Content x=211→1709 (1498px). Body w=862px, btn right=1709.
   ========================================================= */

.iid-cta-strip {
	background-image: url('../images/parousiasi-case-studies-bg.jpg');
	background-size: cover;
	background-position: center;
	margin-top: 0 !important; /* WP block gap → §7→§8 must be flush per Figma */
}

/* Inner flex row: fill constrained 1499px and provide 168px height for centering */
.iid-cta-strip > .wp-block-group {
	min-height: 168px;
	width: 100%; /* expand to fill constrained max-width so space-between reaches both edges */
}

.iid-cta-strip__text {
	margin: 0;
	color: #fff;
	max-width: 862px; /* [non-token-value] Figma: text node w=862px */
}

/* =========================================================
   CTA STRIP — ensure text doesn't clip on mobile
   ========================================================= */
@media (max-width: 767px) {
	.iid-cta-strip .wp-block-group {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 24px !important;
	}
}

/* =========================================================
   CLIENT LOGOS BAND — CSS marquee carousel
   Teal band (secondary-500), white logo treatment via filter.
   Caption "500+" to be confirmed with IID client pre-launch.
   ========================================================= */
.iid-logos-band {
	padding: 48px 0;
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	/* overflow lives on .iid-logos-band__inner — teal bg stays full-bleed */
}

.iid-logos-band__caption {
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	max-width: 1500px;
	margin: 0 auto 32px;
	padding: 0 32px;
}

/* Inner container: constrains mask + track to 1500px; teal bg remains full-bleed */
.iid-logos-band__inner {
	max-width: 1500px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}

.iid-logos-track {
	display: flex;
	align-items: center;
	gap: 80px;
	width: max-content;
	animation: iid-logos-scroll 210s linear infinite;
	padding: 0 40px;
}

.iid-logos-track:hover {
	animation-play-state: paused;
}

.iid-logos-track img {
	height: auto;                /* was: 48px — logos now display at natural proportions */
	max-height: 80px;            /* Figma max 92px → snap to spacing--20 token (80px) */
	width: auto;
	max-width: 240px;            /* was: 140px — Figma widths up to 277px [non-token-value] */
	flex-shrink: 0;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.85;
	transition: opacity 180ms ease;
}

.iid-logos-track img:hover {
	opacity: 1;
}

@keyframes iid-logos-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.iid-logos-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		max-width: 1200px;
		margin-inline: auto;
		padding: 0 32px;
		gap: 40px;
	}
}

/* =========================================================
   PREFERS-REDUCED-MOTION — global override
   Collapse all transitions/animations to ≤50ms opacity-only.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 50ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 50ms !important;
		transition-property: opacity !important;
		scroll-behavior: auto !important;
	}

	.iid-reveal {
		opacity: 0;
		transform: none;
		transition: opacity 50ms;
	}

	.iid-reveal.is-revealed {
		opacity: 1;
	}
}

/* =========================================================
   FOOTER — rebuilt from Figma node 48:2454 (2026-05-08)
   ========================================================= */

/* Wrapper: no block gap between contact strip and navy body */
.iid-site-footer {
	display: flex;
	flex-direction: column;
}

.iid-site-footer.is-layout-flow > * + *,
.iid-site-footer > .wp-block-group + .wp-block-group {
	margin-block-start: 0 !important;
}

.iid-footer__body {
	margin-block-start: 0 !important;
}

/* ─── Zone 1: Contact Strip (teal, 124px) ─── */

.iid-footer__contact.wp-block-group {
	min-height: 124px; /* [non-token: figma exact height] */
	display: flex;
	align-items: stretch;
}

.iid-footer__contact-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 124px;
	max-width: 1500px;
	margin: 0 auto;
	/* Lateral padding now lives σε the outer .alignfull wrapper
	   (see footer logo-baseline alignment rule below) — zero here
	   so inner content sits directly on the 1500-box edge και
	   aligns με the header logo (x=210 at 1920 / x=24 at <1500). */
	padding: var(--wp--preset--spacing--6) 0; /* 24px vertical, 0 lateral */
	gap: var(--wp--preset--spacing--8); /* 32px */
	width: 100%;
	box-sizing: border-box;
}

.iid-footer__contact-address,
.iid-footer__contact-item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2); /* 8px */
	color: var(--wp--preset--color--neutral-0);
	font-size: var(--wp--preset--font-size--body-lg); /* 20px — figma exact */
	line-height: 1.4;
	white-space: nowrap;
}

.iid-footer__contact-address svg,
.iid-footer__contact-item svg {
	flex-shrink: 0;
}

.iid-footer__contact-right {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8); /* 32px between phone + email */
}

.iid-footer__contact-item a {
	color: var(--wp--preset--color--neutral-0);
	text-decoration: none;
}

.iid-footer__contact-item a:hover {
	text-decoration: underline;
}

/* ─── Zones 2+3+4: Unified Navy Body (primary-400 = #1A3360) ─── */

/* 2-col main row */
.iid-footer__main-row.wp-block-columns {
	max-width: 1500px;
	margin: 0 auto;
	/* Lateral padding moved σε outer .iid-footer__body.alignfull below
	   για logo-baseline alignment. Inner content sits on the 1500-box
	   edge at x=210 (1920) / x=24 (<1500). */
	padding: var(--wp--preset--spacing--20) 0 0; /* 80px 0 0 */
	gap: 0 !important;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
}

/* Left column: logo + tagline ONLY */
.iid-footer__left.wp-block-column {
	flex: 0 0 360px !important; /* [non-token: figma ~374px col, snapped 360] */
	max-width: 360px !important;
	padding-right: 0 !important;
}

.iid-footer__left .wp-block-site-logo {
	margin-bottom: 0;
}

.iid-footer__left .wp-block-site-logo img {
	width: 300px !important; /* [non-token: practical footer logotype display width] */
	height: auto !important;
}

.iid-footer__tagline {
	font-size: var(--wp--preset--font-size--body-sm) !important; /* 16px */
	color: var(--wp--preset--color--neutral-100) !important; /* #F4F6FA ≈ figma #eeeeee (within 2.5%) */
	line-height: 1.3 !important;
	margin-top: var(--wp--preset--spacing--4) !important; /* 16px */
	margin-bottom: 0 !important;
	font-weight: 400 !important;
	max-width: 320px; /* figma: 320px tagline width */
}

/* Right column: newsletter + nav + social + certs */
.iid-footer__right.wp-block-column {
	flex: 1 !important;
	max-width: none !important;
	padding-left: var(--wp--preset--spacing--16) !important; /* 64px col gap */
	padding-right: 0 !important;
}

.iid-footer__right-content {
	width: 100%;
}

/* TOP ROW: [heading + nav] (left) | [form + social] (right) */
.iid-footer__right-top.wp-block-group {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16); /* 64px */
	margin-bottom: var(--wp--preset--spacing--12); /* 48px */
}

/* Suppress WP block gap between children of the right-top group */
.iid-footer__right-top.wp-block-group > * {
	margin-block-start: 0 !important;
}

/* LEFT SUB: newsletter heading stacked above nav grid */
.iid-footer__newsletter-left.wp-block-group {
	flex: 1;
	display: flex !important;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8); /* 32px heading → nav */
	align-self: flex-start;
}

/* Suppress WP block gap inside newsletter-left */
.iid-footer__newsletter-left.wp-block-group > * {
	margin-block-start: 0 !important;
}

/* Right sub — pin to top */
.iid-footer__newsletter {
	align-self: flex-start;
}

.iid-footer__newsletter-heading {
	font-size: var(--wp--preset--font-size--h-5); /* 22px — WP generates h-5 not h5 */
	font-weight: 400;
	color: var(--wp--preset--color--neutral-0);
	line-height: 1.6;
	margin: 0;
	white-space: nowrap;
}

/* Newsletter form — underline input (figma style) */
.iid-footer__newsletter {
	flex: 0 0 425px; /* [non-token: figma exact 425px input area] */
	max-width: 100%;
}

.iid-footer__newsletter-wrap {
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35); /* [non-token: figma underline style] */
	padding-bottom: var(--wp--preset--spacing--2); /* 8px */
	margin-bottom: var(--wp--preset--spacing--2); /* 8px */
}

.iid-footer__newsletter-input {
	width: 100%;
	background: transparent;
	border: none;
	outline: none;
	padding: 0 28px 0 0; /* [non-token: 28px right space for arrow btn] */
	font-size: var(--wp--preset--font-size--caption); /* 15px */
	font-family: inherit;
	color: var(--wp--preset--color--neutral-0);
	cursor: default;
	line-height: 1.5;
	box-sizing: border-box;
}

.iid-footer__newsletter-input::placeholder {
	color: #dfdfdf; /* [non-token: figma #dfdfdf placeholder] */
}

.iid-footer__newsletter-btn {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--wp--preset--color--neutral-0);
	padding: 0;
	/* v1.23.24: button is now an active submit (iid/footer-newsletter block).
	   Was cursor:default for the prior decorative placeholder. */
	cursor: pointer;
	display: flex;
	align-items: center;
	line-height: 1;
}

/* v1.23.24: inline submit status under the newsletter input. Hidden when
   empty (no visible reserved space); subtle white text when populated. */
.iid-footer__newsletter-status {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral-0);
	min-height: 0;
}
.iid-footer__newsletter-status:empty {
	display: none;
}

.iid-footer__newsletter-fine-print {
	font-size: 14px; /* [non-token: figma 14px — no token between eyebrow 12px and caption 15px] */
	color: #eaeaea; /* [non-token: figma #eaeaea fine print color] */
	margin: 0;
	line-height: 1.5;
}

.iid-footer__newsletter-fine-print a {
	color: var(--wp--preset--color--neutral-0);
	text-decoration: underline;
}

/* Social — inside newsletter column (425px), below fine print — per Figma */
.iid-footer__newsletter .iid-footer__social {
	margin-top: var(--wp--preset--spacing--8); /* 32px gap from fine print */
}

/* Footer nav — wp:navigation block (ref 62/63) */
.iid-footer__nav.wp-block-navigation .wp-block-navigation__container {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: var(--wp--preset--spacing--16); /* 64px */
	row-gap: 18px; /* [non-token: figma 18px — spacing--5=20px is 11% off, no snap] */
	list-style: none;
	margin: 0;
	padding: 0;
}

.iid-footer__nav.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--neutral-0);
	font-size: var(--wp--preset--font-size--body-sm); /* 16px */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.005em; /* [non-token: figma body3 -0.5 letterSpacing at 16px] */
	text-decoration: none;
	line-height: 1.6;
	white-space: nowrap;
	padding: 0;
}

.iid-footer__nav.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--secondary-300);
}

/* Suppress WP navigation burger on footer nav — always show inline */
.iid-footer__nav.wp-block-navigation .wp-block-navigation__responsive-container-open,
.iid-footer__nav.wp-block-navigation .wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* Social — column layout: label top, icons row below (figma structure) */
.iid-footer__social {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3); /* 12px between label and icons row */
	flex-shrink: 0;
}

.iid-footer__social-label {
	font-size: var(--wp--preset--font-size--caption); /* 15px */
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5); /* [non-token: figma rgba(255,255,255,0.5)] */
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
	white-space: nowrap;
}

.iid-footer__social-icons {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3); /* 12px between LinkedIn + Facebook */
}

.iid-footer__social-link {
	color: var(--wp--preset--color--neutral-0);
	display: flex;
	align-items: center;
	line-height: 1;
	transition: color var(--wp--custom--motion--duration-base, 180ms) var(--wp--custom--motion--ease-out, ease-out);
}

.iid-footer__social-link:hover {
	color: var(--wp--preset--color--secondary-300);
}

/* CERT DIVIDER: partial-width (right column only, per Figma) */
.iid-footer__cert-divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.15); /* [non-token: figma partial divider on navy] */
	margin: var(--wp--preset--spacing--12) 0; /* 48px top and bottom */
}

/* CERT ROW: left group + ΣΕΤΠΕ right */
.iid-footer__certs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6); /* 24px */
}

.iid-footer__certs-group {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--6); /* 24px */
}

.iid-footer__cert-img {
	height: 60px;
	width: auto;
	max-width: none;
	display: block;
	object-fit: contain;
}

.iid-footer__cert-img--circle {
	height: 80px; /* [non-token: EU Business badge — slightly taller] */
	border-radius: 50%;
}

.iid-footer__cert-img--setpe {
	height: 52px;
}

/* ─── Legal Bar (inline, same navy bg) ─── */

.iid-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--8); /* 32px */
	max-width: 1500px;
	margin: var(--wp--preset--spacing--12) auto 0; /* 48px top */
	/* Lateral padding lives σε outer .iid-footer__body.alignfull για
	   logo-baseline alignment. Vertical preserved. */
	padding: var(--wp--preset--spacing--6) 0; /* 24px vertical, 0 lateral */
	border-top: 1px solid rgba(255, 255, 255, 0.1); /* [non-token: subtle separator] */
	box-sizing: border-box;
	width: 100%;
}

.iid-footer__copyright {
	font-size: var(--wp--preset--font-size--eyebrow); /* 12px — exact figma match */
	color: var(--wp--preset--color--neutral-100);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.5;
	margin: 0;
	white-space: nowrap;
}

.iid-footer__copyright a,
.iid-footer__copyright-brand {
	color: var(--wp--preset--color--secondary-500);
	text-decoration: none;
}

.iid-footer__copyright a:hover {
	text-decoration: underline;
}

.iid-footer__legal-links {
	display: flex;
	align-items: center;
	gap: 28px; /* [non-token: figma 28px — spacing--8=32px is 12.5% off, no snap] */
	flex-shrink: 0;
}

.iid-footer__legal-links a,
.iid-footer__legal-links span {
	font-size: var(--wp--preset--font-size--eyebrow); /* 12px */
	color: var(--wp--preset--color--neutral-100);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

.iid-footer__legal-links a:hover {
	color: var(--wp--preset--color--neutral-0);
}

/* ── wp:group flow-gap suppression inside legal bar ────────────────────────
   WP adds margin-block-start to flow-layout children. Zero it out so the
   flex layout of .iid-footer__legal and .iid-footer__legal-links takes over. */
.iid-footer__legal.wp-block-group > *,
.iid-footer__legal-links.wp-block-group > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* ── Legal nav (ref:64/65) — match former hardcoded link styling ─────────── */
.iid-footer__legal-nav.wp-block-navigation {
	flex-shrink: 0;
}
.iid-footer__legal-nav .wp-block-navigation__container {
	flex-wrap: nowrap !important;
	gap: 28px; /* [non-token: matches .iid-footer__legal-links gap] */
	margin: 0;
	padding: 0;
	list-style: none;
}
.iid-footer__legal-nav .wp-block-navigation-item {
	list-style: none;
}
.iid-footer__legal-nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--eyebrow) !important; /* 12px */
	color: var(--wp--preset--color--neutral-100) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-decoration: none !important;
	white-space: nowrap;
	padding: 0 !important;
}
.iid-footer__legal-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--neutral-0) !important;
	text-decoration: none !important;
}

/* ─── Responsive ─── */

@media ( max-width: 1100px ) {
	.iid-footer__main-row.wp-block-columns {
		flex-wrap: wrap !important;
		padding-top: var(--wp--preset--spacing--12) !important; /* 48px */
	}

	.iid-footer__left.wp-block-column,
	.iid-footer__right.wp-block-column {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.iid-footer__right.wp-block-column {
		padding-left: 0 !important;
	}

	.iid-footer__right-top.wp-block-group {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--6) !important; /* 24px */
	}

	.iid-footer__newsletter {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media ( max-width: 768px ) {
	.iid-footer__contact-inner {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
		height: auto;
		padding-top: var(--wp--preset--spacing--6); /* 24px */
		padding-bottom: var(--wp--preset--spacing--6);
		gap: var(--wp--preset--spacing--3); /* 12px */
	}

	.iid-footer__contact-right {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--3); /* 12px */
	}

	.iid-footer__contact-address,
	.iid-footer__contact-item {
		font-size: var(--wp--preset--font-size--body-sm); /* 16px on mobile */
		white-space: normal;
	}

	.iid-footer__nav.wp-block-navigation .wp-block-navigation__container {
		grid-template-columns: 1fr 1fr;
	}

	.iid-footer__certs {
		flex-wrap: wrap;
		justify-content: center;
	}

	.iid-footer__certs-group {
		justify-content: center;
	}

	.iid-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--4); /* 16px */
	}

	.iid-footer__legal-links {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6); /* 12px 24px */
	}

	.iid-footer__copyright {
		white-space: normal;
	}
}

/* ── §3 About: Who We Are + Team (Figma node 1:2319 / 174:3324) ──────────────
   Both sections sit inside wp-block-post-content (max-width: 1200px).
   alignfull on a wp:group cannot exceed its parent — use the left-trick
   identical to breadcrumbs/clients to break out to full viewport width.
   ─────────────────────────────────────────────────────────────────────────── */
.iid-about-who-we-are.alignfull,
.iid-about-team.alignfull {
	position: relative;
	left: calc( 50% - 50vw ); /* stylelint-disable-line */
	width: 100vw; /* stylelint-disable-line */
	box-sizing: border-box;
	margin-left: 0;
	margin-right: 0;
	max-width: none; /* stylelint-disable-line */
}

/* Flush after breadcrumbs — same pattern as clients intro section */
.iid-about-who-we-are.alignfull {
	margin-top: 0 !important; /* stylelint-disable-line */
}

/* Block markup specifies spacing-20 (80px) padding top/bottom on both sections,
   but has-global-padding suppresses inline styles on alignfull groups. Force it. */
.iid-about-who-we-are,
.iid-about-team {
	padding-top: var( --wp--preset--spacing--20, 80px ) !important; /* stylelint-disable-line */
	padding-bottom: var( --wp--preset--spacing--20, 80px ) !important; /* stylelint-disable-line */
}

/* H2 weight: Figma specifies Medium (500) for this section */
.iid-about-who-we-are .wp-block-heading {
	font-weight: 500;
}

/* Video fills the right column flush — no extra whitespace from embed margins */
.iid-about-who-we-are .wp-block-embed {
	margin-top: 0;
	margin-bottom: 0;
}

/* Align video top with eyebrow on the left */
.iid-about-who-we-are .wp-block-columns {
	align-items: flex-start;
}

/* ── Career §3: Intro + asymmetric stat-flag (Figma 292:2030 / 175:3930) ─────
   Sits inside wp-block-post-content (max-width 1200px). alignfull breaks out
   to viewport using the same left-trick as breadcrumbs/clients sections.
   ─────────────────────────────────────────────────────────────────────────── */
.iid-career-intro.alignfull {
	position: relative;
	left: calc( 50% - 50vw ); /* stylelint-disable-line */
	width: 100vw; /* stylelint-disable-line */
	box-sizing: border-box;
	margin-left: 0;
	margin-right: 0;
	max-width: none; /* stylelint-disable-line */
	background: #fff;
	padding-top: 129px;
	padding-bottom: 0;
	overflow: visible;
}

/* Flush after breadcrumbs */
.iid-career-intro.alignfull {
	margin-top: 0 !important; /* stylelint-disable-line */
}

/* Inner constrained container — 1500px, centered, no viewport-relative offsets */
.iid-career-intro__inner {
	max-width: 1500px;
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}

/* Top zone — 2-col asymmetric: stat-flag (narrow) | content (wide) */
.iid-career-intro__top {
	display: grid;
	grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
	gap: clamp(48px, 8vw, 312px);
	align-items: start;
	margin-bottom: 118px;
}

/* Suppress WP is-layout-flow block-gap on grid children — the 2nd column
   was getting margin-top: 32px which broke top-alignment with stat eyebrow. */
.iid-career-intro__top > * + * {
	margin-block-start: 0;
}

/* Stat-flag — 3 rows stacked, asymmetric alignment */
.iid-career-intro__stat {
	display: flex;
	flex-direction: column;
}

.iid-career-intro__stat .stat__eyebrow-top {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.075px;
	color: #333;
	text-transform: uppercase;
	margin: 0;
}

.iid-career-intro__stat .stat__number {
	font-size: 70px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -1.4px;
	color: #333;
	margin: 0;
}

/* Bottom eyebrow: left-aligned with "30+" left edge. Figma uses text-right
   at left=352 (right-edge), which coincidentally placed left-edge at x=212
   (same as "30+"). Implementing as text-align: left for explicit alignment. */
.iid-career-intro__stat .stat__eyebrow-bot {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.075px;
	color: #333;
	text-transform: uppercase;
	text-align: left;
	margin: 0;
}

/* Content column — H2 + body, top-anchored margins */
.iid-career-intro__content {
	max-width: 1044px;
}

.iid-career-intro__content .wp-block-heading {
	font-size: 50px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -1px;
	color: #333;
	margin: 0 0 24px 0;
}

.iid-career-intro__content p {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
	margin: 0;
}

/* Image — full-width within container, bleeds 148px into §4.
   Specificity bumped (chained class) so WP's :where(.is-layout-flow) > *
   margin-block-end: 0 reset doesn't clobber the negative margin. */
.iid-career-intro .iid-career-intro__image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1499 / 659;
	margin-bottom: -148px;
	z-index: 2;
	overflow: hidden;
}

.iid-career-intro__image-wrap .wp-block-image,
.iid-career-intro__image-wrap figure {
	margin: 0;
	width: 100%;
	height: 100%;
}

.iid-career-intro__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Tablet (768px–1023px): single column, asymmetric flag relaxes to left-aligned */
@media (max-width: 1023px) {
	.iid-career-intro.alignfull {
		padding-top: 96px;
	}
	.iid-career-intro__top {
		grid-template-columns: 1fr;
		gap: 48px;
		margin-bottom: 96px;
	}
	.iid-career-intro__content .wp-block-heading {
		font-size: 40px;
		letter-spacing: -0.6px;
	}
}

/* Mobile (<768px): reduced spacing, no image bleed */
@media (max-width: 767px) {
	.iid-career-intro.alignfull {
		padding-top: 64px;
	}
	.iid-career-intro__inner {
		padding-inline: 16px;
	}
	.iid-career-intro__top {
		margin-bottom: 64px;
		gap: 32px;
	}
	.iid-career-intro__stat .stat__number {
		font-size: 48px;
		letter-spacing: -0.8px;
	}
	.iid-career-intro__content .wp-block-heading {
		font-size: 32px;
		letter-spacing: -0.5px;
		margin-bottom: 20px;
	}
	.iid-career-intro__content p {
		font-size: 16px;
	}
	.iid-career-intro .iid-career-intro__image-wrap {
		margin-bottom: 0;
		z-index: auto;
	}
}

/* ── Contact §1: Hero + Contact Info (Figma node 329:6122 GR / 331:3278 EN) ──
   Layout: alignfull 50/50 split — left zone white content, right zone photo
   με 40% navy overlay. Folder-notch CTA → #contact-form anchor.
   ─────────────────────────────────────────────────────────────────────────── */
.iid-contact-hero.alignfull {
	position: relative;
	left: calc( 50% - 50vw ); /* stylelint-disable-line */
	width: 100vw; /* stylelint-disable-line */
	max-width: none; /* stylelint-disable-line */
	margin-left: 0;
	margin-right: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 884px;
	background: #FFFFFF;
	box-sizing: border-box;
}

/* Flush after breadcrumbs / header (matches other alignfull-as-first sections) */
.iid-contact-hero.alignfull {
	margin-top: 0 !important; /* stylelint-disable-line */
}

/* Suppress WP block-gap on direct children (left content, right photo) */
.iid-contact-hero > * + * {
	margin-block-start: 0;
}

.iid-contact-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: 101px;
	padding-bottom: 100px;
	padding-right: 60px;
	/* Left edge aligns to standard 1500px container left edge at viewport ≥1500.
	   On narrower viewports, snap to min 30px. */
	padding-left: max( 30px, calc( 50vw - 750px + 12px ) );
	max-width: 860px;
	box-sizing: border-box;
}

.iid-contact-hero__eyebrow {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	color: #333333;
	text-transform: uppercase;
}

.iid-contact-hero__title {
	margin: 0 0 13px;
	font-size: 70px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -1.4px;
	color: #00256B;
	max-width: 625px;
}

.iid-contact-hero__intro {
	margin: 0 0 40px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.08px;
	color: #333333;
	max-width: 584px;
}

/* Contact info — 2-col × 2-row grid. align-items: start so each item's
   top edge aligns to the row top (default `normal` bottom-anchors items
   to row baseline, causing 32px Email/Address offset). */
.iid-contact-hero__info {
	display: grid;
	grid-template-columns: 283px 1fr;
	grid-template-rows: auto auto;
	row-gap: 40px;
	column-gap: 12px;
	align-items: start;
	margin: 0 0 107px;
	max-width: 564px;
}

/* Suppress WP `:where(.is-layout-flow) > * + *` margin-block-start on
   grid items, which would otherwise add 32px gap above item 2 + 3 + 4
   and break row top-alignment. */
.iid-contact-hero__info > * + * {
	margin-block-start: 0;
}

.iid-contact-hero__info-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.iid-contact-hero__info-label {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.08px;
	color: #585B5B;
}

.iid-contact-hero__info-value {
	margin: 0;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.6;
	color: #00256B;
}

.iid-contact-hero__info-value + .iid-contact-hero__info-value {
	margin-top: 5px;
}

.iid-contact-hero__info-value a {
	color: inherit;
	text-decoration: underline;
}

.iid-contact-hero__info-value a:hover {
	text-decoration: none;
}

/* Social icons row */
.iid-contact-hero__social {
	display: flex;
	gap: 14px;
	margin-top: 4px;
}

.iid-contact-hero__social a {
	display: inline-flex;
	width: 24px;
	height: 24px;
	line-height: 1;
}

.iid-contact-hero__social svg {
	width: 100%;
	height: 100%;
	display: block;
}

.iid-contact-hero__social a:hover svg path {
	fill: #1A3360;
}

/* CTA button — folder-notch */
.iid-contact-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-width: 205px;
	height: 55px;
	padding: 0 30px;
	background: #00256B;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); /* stylelint-disable-line */
	transition: background 0.2s ease;
}

.iid-contact-hero__cta:hover,
.iid-contact-hero__cta:focus {
	background: #001C54;
	color: #FFFFFF;
}

/* Right zone — building photo with 40% navy overlay */
.iid-contact-hero__photo {
	position: relative;
	background-image: var( --photo-url );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 884px;
}

.iid-contact-hero__photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 37, 107, 0.4);
	pointer-events: none;
}

/* Tablet (768–1023px): single column, content above photo */
@media (max-width: 1023px) {
	.iid-contact-hero.alignfull {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.iid-contact-hero__content {
		padding: 80px 30px 60px;
		max-width: 100%;
	}

	.iid-contact-hero__title {
		font-size: 48px;
		letter-spacing: -0.9px;
	}

	.iid-contact-hero__info {
		grid-template-columns: 1fr;
		row-gap: 32px;
		margin-bottom: 64px;
	}

	.iid-contact-hero__photo {
		min-height: 400px;
		aspect-ratio: 16 / 9;
	}
}

/* Mobile (<768px) */
@media (max-width: 767px) {
	.iid-contact-hero__content {
		padding: 64px 20px 48px;
	}

	.iid-contact-hero__title {
		font-size: 36px;
		letter-spacing: -0.6px;
	}

	.iid-contact-hero__intro {
		font-size: 15px;
	}

	.iid-contact-hero__info-value {
		font-size: 18px;
	}

	.iid-contact-hero__photo {
		min-height: 300px;
	}

	/* Grid `1fr` resolves to minmax(auto, 1fr) where auto = item min-content,
	   forcing the single-column track to ~533px on every <768 viewport
	   regardless of min-width:0 on the grid item. minmax(0, 1fr) pins
	   the track to the container width and lets descendants shrink. */
	.iid-contact-hero.alignfull {
		grid-template-columns: minmax(0, 1fr);
	}

	.iid-contact-hero__content,
	.iid-contact-hero__title,
	.iid-contact-hero__intro,
	.iid-contact-hero__info,
	.iid-contact-hero__info-item {
		max-width: 100%;
		min-width: 0;
	}

	.iid-contact-hero__info {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.iid-contact-hero__title {
		overflow-wrap: break-word;
	}
}

/* C3 — equalize stacked tab heights regardless of text wrap.
   In flex-column (≤767) the active GR tab "Αίτημα Συμβουλευτικής
   Συνάντησης" wraps to 2 lines while the inactive fits 1 line,
   creating a 29px asymmetry. min-height = 2 lines of leading + padding. */
@media (max-width: 767px) {
	.iid-contact-form-tabs__tab {
		min-height: calc(2 * 1.35em + 16px);
	}
}

/* =========================================================
   CONTACT PAGE — hide CTA band + prefooter
   GR page id 46 / EN page id 55. Form acts as the page CTA.
   The CTA template-part wrapper is hidden via :has() to also drop
   the 32px sibling margin WP applies via :where(.wp-site-blocks) > *.
   Footer wrapper top margin is zeroed for the same reason.
   ========================================================= */
body.page-id-46 .iid-cta-band,
body.page-id-55 .iid-cta-band,
body.page-id-46 .iid-footer__contact,
body.page-id-55 .iid-footer__contact,
body.page-id-46 .wp-block-template-part:has(> .iid-cta-band),
body.page-id-55 .wp-block-template-part:has(> .iid-cta-band) {
	display: none !important;
}

body.page-id-46 .wp-site-blocks > footer.wp-block-template-part,
body.page-id-55 .wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0 !important;
}

/* =========================================================
   IID Section Intro — generic 2-col typography section
   Used by Equipment §2 (pages 43 + 52). Generic by design so
   §4 / §6 / §7 can reuse if Figma shows the same 2-col pattern.

   Native Gutenberg under the hood: wp:group + wp:columns +
   wp:heading + wp:paragraph. This class adds:
   - section padding-block + container max-width (1500 wideSize)
   - h2 typography (50px, weight 500, lh 1.2, tracking -1px)
   - paragraph typography (18px, lh 1.6)
   - colors per Figma frame text-[#333] = neutral-800

   Per Figma node 570:6307 (GR) / 567:6234 (EN): bg white,
   60/40 column split, ~32px gap, heading LEFT / paragraphs RIGHT.
   Mobile stack handled by default Gutenberg .wp-block-columns
   behavior (stacks at ≤781px per WP defaults).

   Full-bleed escape (when used in post_content): the section's
   parent .wp-block-post-content (.has-global-padding.is-layout-
   constrained) caps width at contentSize (1200). The wp:group's
   `align:full` class triggers WP's standard alignfull negative
   margin escape, but that only walks ONE has-global-padding
   ancestor — the grandparent main.iid-main is ALSO has-global-
   padding, so the section stops at 1200 instead of viewport.
   Same problem (and identical fix) as commit df64821 for
   .iid-cta-band. The 100vw trick escapes any nesting depth. */
.wp-block-post-content > .iid-section-intro {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.iid-section-intro {
	/* Section padding — clamp matches site spacing scale.
	   padding-inline lives on the SECTION (not the columns) so the inner
	   columns box can fill the full 1500px wideSize. With padding-inline on
	   the columns instead, 160px (80 each side at 1920) was eaten from the
	   1500 cap → cols rendered ~1340 instead of 1500, causing the LEFT
	   heading column to be ~785 (vs Figma 897) → 5-6 line wraps. */
	padding-block: clamp(64px, 8vw, 128px);
	padding-inline: clamp(24px, 5vw, 80px);
	background: #ffffff;

	/* Inner content cap — matches site wideSize token (1500) */
	> .wp-block-columns {
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		gap: clamp(24px, 3vw, 32px);
	}

	/* Heading — Figma h2 token (Plus Jakarta Medium 50px → Noto Sans per project rule).
	   Color inherits Figma frame text-[#333] = neutral-800. */
	.wp-block-heading {
		font-family: 'Noto Sans', system-ui, sans-serif;
		font-size: clamp(28px, 3.5vw, 50px);
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: -0.02em; /* -1px @ 50px */
		color: var(--wp--preset--color--neutral-800);
		margin: 0;
	}

	/* Paragraphs — body2 token, stacked. Last paragraph: no bottom margin
	   to match Figma's tight pairing. */
	p {
		font-size: 18px;
		line-height: 1.6;
		color: var(--wp--preset--color--neutral-800);
		margin: 0 0 32px;
	}
	p:last-child {
		margin-bottom: 0;
	}
}

/* Junction: when an iid/breadcrumbs block directly precedes an iid/section-intro,
   collapse the 32px wp-site-blocks auto block-gap AND halve the section's intrinsic
   padding-block-start. Without this, total whitespace from breadcrumb bottom to
   section heading reads as 160px @ 1920 (32 block-gap + 128 section padding-top)
   which is visually disproportionate above a thin breadcrumb. The reduced rule
   brings it to ~64px @ 1920 (-60%), proportional to viewport.

   Why adjacent-sibling: highly specific — affects only pages where both blocks
   appear in this exact sequence (currently Equipment pages 43+52). The standalone
   .iid-section-intro behavior (Figma-intended 128px padding-top) is preserved for
   any future page that uses the section without a preceding breadcrumb.

   Pattern parallel to existing junction rules: has-cta-junction-flush, hero-split
   → service-capabilities, etc. */
.iid-breadcrumbs + .iid-section-intro {
	margin-block-start: 0;
	padding-block-start: clamp(32px, 4vw, 64px);
}


/* =========================================================
   SINGLE INSIGHT — native `post` single template
   Hero (light gray bg) + breadcrumb + 1045px body + related grid
   Per Figma 637:5277 (and the 637:5026/5122/5197 variant family).
   ========================================================= */

/* ── Hero ──────────────────────────────────────────────────── */
.iid-single-insight__hero {
	/* Full-bleed escape from constrained parent (memory: feedback-iid-fullbleed-pattern) */
	position: relative;
	left: calc(50% - 50vw);
	width: 100vw;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	background: var(--wp--preset--color--neutral-100, #F4F6FA);
	/* Per Figma 637:5040 — no section padding; the image fills the full
	   section height and dictates the hero's visual height. */
	padding-block: 0;
	color: var(--wp--preset--color--primary-500, #00256B);
}

.iid-single-insight__hero-inner {
	/* No inner max-width or padding — image fills the full LEFT half of
	   the viewport edge-to-edge. The title cell carries its own padding to
	   match Figma's 78px / 212px title-block margins. */
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	display: grid;
	/* Figma 637:5040 — featured image LEFT (full half), title block RIGHT. */
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
}

.iid-single-insight__hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center; /* vertical centring within the cell */
	gap: clamp(20px, 2vw, 32px);
	/* Per Figma: 78px from the image edge, clamp(24, 11vw, 212) from the
	   viewport right. 11vw ≈ 211 at 1920, scales gracefully on narrower
	   desktops and clamps to a usable minimum on tablet. */
	padding-inline-start: clamp(24px, 5vw, 78px);
	padding-inline-end: clamp(24px, 11vw, 212px);
	padding-block: clamp(48px, 6vw, 96px);
}

/* Eyebrow is now rendered by core/post-terms (category name in uppercase),
   so the rule targets the resulting .wp-block-post-terms wrapper. The
   default <a> inside post-terms gets the same colour treatment. */
.iid-single-insight__eyebrow {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-500, #00256B);
	margin: 0;
}
.iid-single-insight__eyebrow a {
	color: inherit;
	text-decoration: none;
}
.iid-single-insight__eyebrow a:hover,
.iid-single-insight__eyebrow a:focus-visible {
	color: var(--wp--preset--color--primary-600, #001C54);
}

.iid-single-insight__title {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: clamp(32px, 4vw, 50px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary-500, #00256B);
	margin: 0;
}

.iid-single-insight__hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
}

.iid-single-insight__date {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.075px;
	color: var(--wp--preset--color--neutral-400, #6F8894);
	text-transform: uppercase;
}

/* Category chip — reuse iid-insight-chip--navy semantics if needed */
.iid-single-insight__chip {
	display: inline-block;
	background: var(--wp--preset--color--primary-500, #00256B);
	color: #fff;
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 6px 12px;
	text-transform: uppercase;
}

.iid-single-insight__chip a {
	color: inherit;
	text-decoration: none;
}

.iid-single-insight__hero-image {
	position: relative;
	/* aspect-ratio removed — image stretches to fill the full grid cell
	   height (align-items: stretch on the inner), matching Figma's
	   952×872 full-section image. */
	overflow: hidden;
	min-height: 0;
}

.iid-single-insight__hero-image .wp-block-post-featured-image,
.iid-single-insight__hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Graceful fallback — when the post has no featured image,
   wp:post-featured-image emits nothing, so .iid-single-insight__hero-image
   has no <img> child. Collapse the hero to a single centred column and
   restore symmetric padding so the title reads cleanly on its own. */
.iid-single-insight__hero-inner:not(:has(.iid-single-insight__hero-image img)) {
	grid-template-columns: 1fr;
	max-width: 1200px;
	margin-inline: auto;
}
.iid-single-insight__hero-inner:not(:has(.iid-single-insight__hero-image img)) .iid-single-insight__hero-image {
	display: none;
}
.iid-single-insight__hero-inner:not(:has(.iid-single-insight__hero-image img)) .iid-single-insight__hero-text {
	padding-inline: clamp(24px, 5vw, 80px);
	padding-block: clamp(48px, 6vw, 96px);
}

@media (max-width: 900px) {
	.iid-single-insight__hero-inner {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.iid-single-insight__hero-image {
		aspect-ratio: 16 / 9;
		/* Image stays on top on mobile (it's already first in DOM with the
		   image-LEFT order). Full-bleed retained — no horizontal padding. */
	}
	.iid-single-insight__hero-text {
		padding-inline: clamp(16px, 4vw, 24px);
		padding-block: clamp(32px, 6vw, 48px);
	}
}

/* ── Content area ──────────────────────────────────────────── */
.iid-single-insight__content-wrap {
	background: #fff;
	padding-block: clamp(48px, 6vw, 96px);
}

/* Two-column content layout per Figma 637:5063 — meta sidebar (~250px)
   on the left, post content (~1045px) on the right, total max 1498px. */
.iid-single-insight__content-inner {
	max-width: 1498px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: clamp(32px, 4vw, 80px);
	align-items: start;
}

/* WP's is-layout-flow rule injects margin-block-start: 32px on every child
   except :first-child, so the right column (body) ends up 32px below the
   sidebar. In a grid layout, sibling spacing is controlled by `gap` — kill
   the auto-injected margin on direct grid children. */
.iid-single-insight__content-inner > * {
	margin-block-start: 0;
}

.iid-single-insight__content {
	max-width: 1045px;
	min-width: 0; /* allow content to shrink inside grid cell */
}

/* Mobile: collapse to single column, sidebar stacks above body */
@media (max-width: 767px) {
	.iid-single-insight__content-inner {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* Native Gutenberg block typography within post-content */
.iid-single-insight__content .wp-block-post-content > * {
	max-width: 1045px; /* belt + suspenders */
}

.iid-single-insight__content p {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-800, #333);
	margin: 0 0 36px;
}

/* Lead paragraph — first paragraph in post-content rendered larger.
   Editor can mark a paragraph with `is-style-lead` to opt-in explicitly. */
.iid-single-insight__content .wp-block-post-content > p:first-child,
.iid-single-insight__content p.is-style-lead {
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral-800, #333);
	margin: 0 0 64px;
}

.iid-single-insight__content h2 {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: clamp(28px, 3.5vw, 36px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary-500, #00256B);
	margin: 64px 0 24px;
}

.iid-single-insight__content h3 {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--primary-500, #00256B);
	margin: 48px 0 16px;
}

.iid-single-insight__content ul,
.iid-single-insight__content ol {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-800, #333);
	margin: 0 0 36px;
	padding-left: 1.5em;
}

.iid-single-insight__content ul li,
.iid-single-insight__content ol li {
	margin-bottom: 8px;
}

.iid-single-insight__content blockquote {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary-500, #00256B);
	border-left: 4px solid var(--wp--preset--color--secondary-500, #2FA4A9);
	padding-left: 24px;
	margin: 48px 0;
}

.iid-single-insight__content a {
	color: var(--wp--preset--color--secondary-600, #228388);
	text-decoration: underline;
}

.iid-single-insight__content a:hover {
	color: var(--wp--preset--color--primary-500, #00256B);
}

.iid-single-insight__content figure,
.iid-single-insight__content .wp-block-image {
	margin: 36px 0;
}

.iid-single-insight__content figure img,
.iid-single-insight__content .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

.iid-single-insight__content figcaption {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral-400, #6F8894);
	margin-top: 12px;
}

.iid-single-insight__content .wp-block-buttons {
	margin: 36px 0;
}

/* Junction: breadcrumb → content (collapse default 32px wp-site-blocks gap) */
.iid-single-insight__hero + .iid-breadcrumbs,
.iid-breadcrumbs + .iid-single-insight__content-wrap {
	margin-block-start: 0;
}

/* ── Related grid (iid/insights-grid mode="related") ──────── */
.iid-insights-section--related {
	background: var(--wp--preset--color--neutral-100, #F4F6FA);
}

.iid-insights-section--related .iid-insights__wrap {
	max-width: 1500px;
}

.iid-insights-section--related .iid-insights__heading {
	font-size: clamp(32px, 4vw, 50px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary-700, #00133D);
}

.iid-insights-related-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2vw, 39px);
}

@media (max-width: 1023px) {
	.iid-insights-related-grid {
		grid-template-columns: 1fr;
	}
}

.iid-insight-rel-card {
	background: #fff;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.iid-insight-rel-card:hover {
	box-shadow: 0 12px 32px rgba(0, 37, 107, 0.12);
	transform: translateY(-2px);
}

.iid-insight-rel-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.iid-insight-rel-card__media {
	aspect-ratio: 438 / 265;
	overflow: hidden;
	background: var(--wp--preset--color--neutral-100, #F4F6FA);
}

.iid-insight-rel-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.iid-insight-rel-card__media-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #E5E9F0 0%, #C5D3EC 100%);
}

.iid-insight-rel-card__body {
	padding: 24px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.iid-insight-rel-card__title {
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-800, #333);
	margin: 0;
}


/* =========================================================
   YOUTUBE SHORTS — vertical aspect-ratio container
   Native wp:embed doesn't handle 9:16 reliably; this scoped
   container guarantees portrait aspect for Shorts iframes.
   ========================================================= */
.iid-youtube-short {
	max-width: 400px;
	aspect-ratio: 9 / 16;
	margin: 36px auto;
}
.iid-youtube-short iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}


/* =========================================================
   LEGAL PAGES — H1 typography
   Native wp:heading level=1 on legal pages (Whistleblowing,
   Privacy, Terms, Cookies) was inheriting body defaults
   (18px / 400). Scoped via body.page-legal class set in
   functions.php (section 13b).
   ========================================================= */
body.page-legal .wp-block-post-content > h1.wp-block-heading {
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--primary-navy, #00256B);
	letter-spacing: -0.01em;
	margin-block-start: clamp(32px, 4vw, 56px);
	margin-block-end: clamp(24px, 3vw, 40px);
}

/* =========================================================
   INDUSTRY CAROUSEL — Next arrow icon navy override
   Per Figma 174:3535: next button (white bg) shows the basil
   arrow in navy #00256B. The block's style-index.scss colored
   the icon as teal-dark (--secondary-700); this rule overrides
   it to navy without touching the block's SCSS file.
   ========================================================= */
.iid-industry-carousel__arrow--next {
	color: var(--wp--preset--color--primary-navy, #00256B);
}

/* =========================================================
   INDUSTRY CAROUSEL — CTA button transparent + folder-notch border
   Per Figma 174:3534: outlined style — transparent fill + white
   border tracing the folder-notch shape + white text on the teal
   card background. CSS border:1px doesn't work with clip-path
   (the border traces the un-clipped rectangle bounds, and the
   diagonal cut at top-left has no edge to draw on). Instead we
   use the same pattern as the global cta-band transparent-bg
   buttons (style.css line ~600): an inline SVG polygon as a
   ::before background-image, stretched via preserveAspectRatio
   to fit any button width. The SVG polygon is drawn inside the
   clipped area, matching the folder-notch geometry, so the
   stroke renders as the visible border.
   ========================================================= */
.iid-industry-section .iid-industry-slide__cta-btn {
	background: transparent;
	color: #FFFFFF;
	border: none;
	position: relative;
}

.iid-industry-section .iid-industry-slide__cta-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 52' preserveAspectRatio='none'%3E%3Cpolygon points='22,1 199,1 199,51 1,51 1,22 22,1' fill='none' stroke='%23ffffff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.iid-industry-section .iid-industry-slide__cta-btn:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* =========================================================
   INDUSTRY CAROUSEL — Bottom (prev) nav arrow brand-teal
   Per Figma 174:3537: bottom arrow has #2FA4A9 background.
   Block style-index.scss colored it as --secondary-700 token
   (#16587A teal-dark). This rule overrides to brand teal
   without touching the block's SCSS file.
   ========================================================= */
.iid-industry-carousel__arrow--prev {
	background: #2FA4A9;
}

/* =========================================================
   INDUSTRY CAROUSEL — White section padding-bottom
   Per Figma 1-6063: surrounding section bg λευκό, especially
   σε bottom area. The carousel container (1500×1013px) ended
   exactly at section bottom, so the dark overlay rgba(34,48,53,0.9)
   + photo bg touched the next light-gray section directly with
   0px white separator — harsh transition flagged σε client review.
   80px padding-bottom (8pt token) restores the white separator
   between carousel bottom and next section start.
   ========================================================= */
.iid-industry-section.alignfull {
	padding-bottom: 80px;
}

/* =========================================================
   ABOUT RELIABILITY — ISO cards PDF link affordance
   Cards in src/about-reliability/render.php were converted from
   static <li> into <li><a></a></li> in this branch (PDF download
   on click, opens in new tab). The block's style-index.scss is
   Bucket C dirty so the link reset + icon + hover/focus rules
   live here instead. Visual mirrors the Homepage iid/certifications
   card affordance (cfe4a55).
   ========================================================= */
.iid-about-reliability__card-link {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	position: relative;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.iid-about-reliability__card:hover {
	background: rgba(107, 124, 147, 0.18);
	border-color: rgba(0, 37, 107, 0.5);
}

.iid-about-reliability__card:has(.iid-about-reliability__card-link:hover) {
	transform: translateY(-2px);
}

.iid-about-reliability__card-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-navy, #00256B);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.iid-about-reliability__card-link,
	.iid-about-reliability__card:has(.iid-about-reliability__card-link:hover) {
		transition: none;
		transform: none;
	}
}

/* mdi:open-in-new icon — subtle new-tab indicator top-right of card.
   Inside the <a>, positioned absolute relative to the <li> wrapper. */
.iid-about-reliability__card-icon {
	position: absolute;
	top: 0;
	right: 0;
	color: #333;
	opacity: 0.4;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.iid-about-reliability__card-link:hover .iid-about-reliability__card-icon,
.iid-about-reliability__card-link:focus-visible .iid-about-reliability__card-icon {
	opacity: 0.8;
}

/* Keep code/serial visually clear of the icon — 18px right padding on the head. */
.iid-about-reliability__card-head {
	padding-right: 18px;
}

/* =========================================================
   INSIGHT CHIPS — category label color override
   Per user direction: category labels (rendered via
   .iid-insight-chip / .iid-insight-chip--navy in
   src/insights-grid/render.php) shift από primary-500 navy
   σε neutral-400 #6F8894 — muted gray-blue tone matching
   the rest of the secondary copy on cards.
   Site-wide scope: Homepage 2×2 grid (homepage mode) AND
   single-post "More news & articles" related block.
   Hover state (chip → white on card hover) is enforced via
   !important σε style.css ~line 1782 and remains preserved.
   ========================================================= */
.iid-insight-chip,
.iid-insight-chip--navy {
	color: var(--wp--preset--color--neutral-400, #6F8894);
}

/* =========================================================
   COOKIES CONSENT BANNER — Complianz IID brand styling
   Overrides Complianz default theme για visual consistency με
   site brand (navy primary, teal accent, folder-notch buttons,
   Noto Sans typography). Selectors target .cmplz-cookiebanner
   and descendants (Complianz v7.4.6 markup).
   Seeded via inc/cookies-setup.php (idempotent admin_init).
   ========================================================= */
/* Popup container: uniform 12px rounded corners σε all 4 corners (modal
   convention). The earlier 3px navy top-border (commit 5919c1b) cut σε a
   straight line across the rounded top edge — visually flat at top-left
   corner. Removed για clean rounded outline. */
.cmplz-cookiebanner {
	background: rgba(255, 255, 255, 0.98);
	font-family: 'Noto Sans', system-ui, sans-serif;
	color: var(--wp--preset--color--neutral-800, #333);
}

.cmplz-cookiebanner .cmplz-header .cmplz-title {
	color: var(--wp--preset--color--primary-500, #00256B);
	font-weight: 600;
}

.cmplz-cookiebanner .cmplz-btn {
	clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px, 22px 0);
	padding: 12px 24px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 14px;
	transition: background-color 0.2s ease, color 0.2s ease;
	border-radius: 0;
}

/* ACCEPT family — solid navy fill, white text (no Memory #11 layered pattern;
   solid bg masks the missing diagonal border on its own).
   SAVE is intentionally NOT included here — it joins the DENY group below
   because it visually mirrors the DENY outlined-style intent. */
.cmplz-cookiebanner .cmplz-accept,
.cmplz-cookiebanner .cmplz-accept-all {
	background: var(--wp--preset--color--primary-500, #00256B);
	color: #FFFFFF;
	border: none;
}

.cmplz-cookiebanner .cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-accept-all:hover {
	background: var(--wp--preset--color--primary-600, #001C54);
}

/* Outlined cookies banner buttons — site-wide SVG polygon stroke ::before
   pattern. Reference: .iid-cta-band's ΑΙΤΗΜΑ ΠΡΟΣΦΟΡΑΣ button σε style.css:
   602-612. Same SVG-polygon technique replaces the earlier improvised
   Memory #11 layered-fill approach (commits 2a3cc15 + 5cec4a4 + 3733739 +
   78948ed) — unified με rest of site CTA convention.
   Geometry:
     - clip-path: polygon(22px 0, ...)  → folder-notch fill shape
     - background: transparent          → cookies banner white bg shows through
     - ::before SVG polygon stroke (1.5px navy, 2px inset points 22,2 → 2,22)
       traces the outline cleanly. preserveAspectRatio="none" + background-
       size:100% 100% stretches to any button width.
   Single rule covers all 4 outlined buttons σε both banner + panel states:
     - .cmplz-deny / .cmplz-reject-all  (DENY)
     - .cmplz-save-preferences          (SAVE σε panel)
     - .cmplz-view-preferences          (VIEW PREFERENCES σε banner) */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-reject-all,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	color: var(--wp--preset--color--primary-500, #00256B) !important;
	clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px, 22px 0) !important;
	position: relative;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny::before,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-reject-all::before,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences::before,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 155 45' preserveAspectRatio='none'%3E%3Cpolygon points='22,2 153,2 153,43 2,43 2,22 22,2' fill='none' stroke='%2300256B' stroke-width='1.5'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* Hover: light gray bg tint matches floating icons (fabc7d1) */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-reject-all:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {
	background: #F4F6FA !important;
}

.cmplz-cookiebanner .cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-show-settings {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--primary-500, #00256B);
	text-decoration: underline;
	clip-path: none;
}

/* Categories panel — match brand toggles + dividers. */
.cmplz-categories .cmplz-category {
	border-color: var(--wp--preset--color--neutral-300, #D0D7E2);
}

.cmplz-categories .cmplz-category-title {
	color: var(--wp--preset--color--primary-500, #00256B);
	font-weight: 600;
}

.cmplz-categories .cmplz-banner-checkbox input:checked + label {
	background: var(--wp--preset--color--secondary-500, #2FA4A9);
}

/* ─────────────────────────────────────────────────────────────────────────
   FLOATING ACTIONS — Unified treatment για revoke (sliders) + back-to-top
   (arrow). Previous setup had inconsistent strokes: sliders navy (visible
   on light bgs), back-to-top white (visible on dark bgs only). As user
   scrolled through homepage, each icon failed σε ~half the section bgs.
   Unified treatment: white bg + 1.5px navy border + navy icon stroke +
   subtle navy-tinted shadow → visible σε ALL section contexts.
   Shadow `0 2px 8px rgba(0, 37, 107, 0.15)` provides gentle depth (critical
   για white-on-white edge cases: About + Insights sections).
   ───────────────────────────────────────────────────────────────────────── */
.iid-floating-top {
	background: #FFFFFF !important;
	border: 1.5px solid var(--wp--preset--color--primary-500, #00256B) !important;
	color: var(--wp--preset--color--primary-500, #00256B);
	box-shadow: 0 2px 8px rgba(0, 37, 107, 0.15);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

/* Hover state — solid light gray που stays visible regardless of section bg.
   Previous rgba(0,37,107,0.05) was invisible on navy backgrounds (hero, CTA
   strip, footer) since the 5% navy tint blended into the surrounding navy.
   #F4F6FA is solid (no transparency) so the white-bg lift→light-gray reads
   identically σε every section. Enhanced shadow reinforces the affordance. */
.iid-floating-top:hover {
	background: #F4F6FA !important;
	box-shadow: 0 2px 12px rgba(0, 37, 107, 0.25);
	border-color: var(--wp--preset--color--primary-500, #00256B) !important;
}

/* Back-to-top SVG strokes: override the inline white με navy
   (markup σε functions.php hardcodes stroke="#ffffff" — override via CSS) */
.iid-floating-top svg line,
.iid-floating-top svg polyline,
.iid-floating-top svg path {
	stroke: var(--wp--preset--color--primary-500, #00256B) !important;
}

/* Revoke-consent floating trigger — sliders icon redesign.
   Default Complianz trigger was a 180×50 white rounded button με the text
   "Διαχείριση συγκατάθεσης" / "Manage consent" — cryptic σε first glance.
   New design: 48×48 outlined square (matches .iid-floating-top back-to-top)
   με sliders/settings SVG icon. Text moved σε screen-reader-only span via
   the visually-hidden technique (font-size:0 + 0 dimensions on direct text
   nodes; aria-label provides accessible name).

   CSS :has() dynamic stack: revoke sits at bottom:24px by default; when
   .iid-floating-top is visible (after scrollY > 300), revoke shifts to
   bottom:84px so it stacks ABOVE back-to-top (24 + 48 + 12 gap = 84).
   Browser support: Chrome 105+, Safari 15.4+, Firefox 121+. Acceptable
   baseline σε 2026.

   z-index 30 matches .iid-floating-actions container — both share the
   same stacking level. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-consent,
.cmplz-manage-consent {
	position: fixed !important;
	right: 24px !important;
	bottom: 24px !important;
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	padding: 0 !important;
	background-color: #FFFFFF !important;
	border: 1.5px solid var(--wp--preset--color--primary-500, #00256B) !important;
	border-radius: 0 !important;
	box-shadow: 0 2px 8px rgba(0, 37, 107, 0.15);
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	overflow: hidden;
	cursor: pointer;
	z-index: 30;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300256B' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Ccircle cx='8' cy='6' r='2.2' fill='%2300256B' stroke='none'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Ccircle cx='16' cy='12' r='2.2' fill='%2300256B' stroke='none'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='6' cy='18' r='2.2' fill='%2300256B' stroke='none'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 24px 24px !important;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

/* Hover state — same #F4F6FA + enhanced shadow as .iid-floating-top above.
   Section-background-agnostic: visible on navy, white, gray bgs alike. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-consent:hover,
.cmplz-manage-consent:hover {
	background-color: #F4F6FA !important;
	box-shadow: 0 2px 12px rgba(0, 37, 107, 0.25);
}

/* Dynamic stack: shift revoke up when back-to-top is visible */
body:has(.iid-floating-top.is-visible) .cmplz-manage-consent {
	bottom: 84px !important;  /* 24 + 48 + 12 gap = stacks above back-to-top */
}

@media (prefers-reduced-motion: reduce) {
	.cmplz-manage-consent {
		transition: none;
	}
}

/* =========================================================
   HOMEPAGE §8 CTA strip + §9 Certifications — lateral breathing
   room σε <1500px viewports.
   Issue: outer alignfull = 100vw. Inner content (max-width 1500px
   via WP is-layout-constrained for Cert; explicit width:100% for
   CTA strip inner flex row) filled 100% of viewport at <1500px,
   leaving zero clearance to the viewport edge. Flagged σε 13"
   laptop review (1280-1440px range).
   Fix: padding-inline: 24px on the outer alignfull container —
   matches Industry section pattern (24px, the closest structural
   cousin: full-bleed bg + constrained inner). Memory #9: 1500px
   content boundary mandatory for inner content. Memory #7: full-
   bleed bg sections require explicit inner padding for breathing
   room when the viewport drops below the content max-width.
   1920+ rendering unchanged (content already centered with ample
   margin).
   ========================================================= */
.iid-cta-strip.alignfull,
.iid-cert-section.alignfull {
	padding-inline: 24px;
}

/* =========================================================
   ABOUT HISTORY — Prev/Next timeline buttons text-driven sizing
   Per Figma 174-3273: buttons size naturally to their text
   content (Prev wider than Next in both GR + EN because
   "Previous" / "Προηγούμενο" are longer than "Next" / "Επόμενο").
   The block's style-index.scss sets min-width: 143px which
   forced short EN labels ("Next" = 37px) into an oversized
   button with empty padding — client review flagged the
   visual inconsistency. Override lifts the floor to 90px
   (still safe for accessibility tap-target: WCAG 2.1
   recommends 44×44px; 90×62 comfortably exceeds it) and
   lets each button hug its label. Block SCSS is Bucket C
   dirty — override lives here instead.
   Mobile breakpoint min-width: 120px on outer .iid-about-history__btn
   (style-index.scss ~line 408) remains in effect for ≤1100px.
   ========================================================= */
.iid-about-history__btn-shape {
	min-width: 90px;
}

/* =========================================================
   SITE-WIDE ALIGNMENT — Logo baseline for Solutions §3 +
   Featured Case Studies §5.
   Audit revealed these sections had 32px lateral padding που
   deviated από the universal logo baseline (210 at 1920 via
   centering / 24px at <1500 viewports).
   Structural issue: in the working sections (CTA strip, Cert)
   the 24px padding sits on the OUTER .alignfull container — so
   at 1920 the inner 1500-constrained content centers within
   `1920 - 48 = 1872`, landing the content edge at x=210. In
   Solutions/FCS the 32px padding was on the INNER container
   (max-width 1500) — pushed content +32px σε από the 1500-box
   edge, landing at x=242 (210 + 32) σε 1920.
   Fix: shift padding outer → inner zero σε these 2 sections.
   Outer .alignfull gets padding-inline: 24px (matches CTA
   strip + Cert pattern). Inner containers zero out padding
   so content sits directly on the 1500-box edge.
   Source per section (all per-block CSS, NOT shared variable):
     - .iid-solutions-section__container  (block SCSS)
     - .iid-fcs-container                  (block SCSS — Bucket C dirty)
   Footer NOT included σε this rule (commit reverted την Footer
   shift από an earlier revision of this block) — Footer keeps
   its original 32px lateral padding which is design-intentional
   για visual balance σε the dense 4-column layout (brand block +
   2 nav columns + newsletter + social).
   Preserved (intentional design variations):
     - About §2 (32px badge-column structural — b9ba872)
     - Hero §1 (clamp-based fluid responsive padding)
     - Insights §9 (16px grid-layout density)
     - Footer (32px multi-column density)
   ========================================================= */
.iid-solutions-section.alignfull,
.iid-fcs-section.alignfull {
	padding-inline: 24px !important;
}

.iid-solutions-section__container,
.iid-fcs-container {
	padding-inline: 0 !important;
}

/* =========================================================
   FOOTER + PRE-FOOTER ALIGNMENT — Memory #12 applied properly.
   Issue σε commit f1d2b10: padding-inline went on the outer
   `footer.wp-block-template-part` wrapper. That wrapper does NOT
   have `has-global-padding`, so the WP alignfull escape rule
   (`.has-global-padding > .alignfull { margin-inline: -root-pad }`)
   never fired — the .iid-footer__contact και .iid-footer__body
   alignfull children got constrained, losing their full-bleed
   teal/navy backgrounds. Net: bg cropped + content cramped.
   Proper architecture: apply padding-inline directly σε the
   .alignfull CHILDREN. They are themselves alignfull (100vw bg
   preserved); padding sits inside their own box, shifting the
   inner 1500-constrained content σε x=210 (1920) / x=24 (<1500)
   — matches header logo baseline (Memory #12).
   Inner containers (.iid-footer__contact-inner, .iid-footer__main-row,
   .iid-footer__legal) had their 32px lateral padding zeroed
   above so content sits on the 1500-box edge.
   Column distribution: right column gains 64px at 1920 (1076 vs
   prev 1012) — no squeeze, more breathing room για newsletter +
   social cluster. Left column 360px fixed unchanged. ========================================================= */
.iid-site-footer > .iid-footer__contact.alignfull,
.iid-site-footer > .iid-footer__body.alignfull {
	padding-inline: 24px;
}

/* =========================================================
   STICKY ESPA BANNER — site-wide
   Transparent PNG (340×58), no card backdrop per spec.
   Desktop: bottom-left. Mobile: bottom-center.
   z-index 50: above content, below mobile menu (9998) and
   Complianz consent (very high).
   ========================================================= */
.iid-espa-banner {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 50;
	display: block;
	line-height: 0;
	transition: transform 180ms ease, opacity 180ms ease;
}

.iid-espa-banner:hover,
.iid-espa-banner:focus-visible {
	transform: translateY(-2px);
	opacity: 0.92;
}

.iid-espa-banner:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary-500, #2fa4a9);
	outline-offset: 4px;
}

.iid-espa-banner img {
	display: block;
	width: 340px;
	height: 58px;
}

@media (max-width: 768px) {
	.iid-espa-banner {
		left: 50%;
		right: auto;
		bottom: calc(16px + env(safe-area-inset-bottom, 0));
		transform: translateX(-50%);
		max-width: calc(100vw - 32px);
		z-index: 100000; /* beat Complianz cookiebanner z 99999 on mobile */
	}
	.iid-espa-banner:hover,
	.iid-espa-banner:focus-visible {
		transform: translateX(-50%) translateY(-2px);
	}
	.iid-espa-banner img {
		width: 100%;
		max-width: 316px;
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iid-espa-banner,
	.iid-espa-banner:hover,
	.iid-espa-banner:focus-visible {
		transition: none;
		transform: none;
	}
	@media (max-width: 768px) {
		.iid-espa-banner,
		.iid-espa-banner:hover,
		.iid-espa-banner:focus-visible {
			transform: translateX(-50%);
		}
	}
}

/* =========================================================
   RECTANGULAR BUTTONS — site-wide override of folder-notch
   Removes clip-path + ::before SVG strokes that drew the notch
   shape. Outlined buttons get a real border to replace the SVG
   stroke. Filled buttons keep their backgrounds + states.
   EXCLUDED: iid/hero block chevron CTAs (see hero/style-index.scss:209).
   ========================================================= */

/* 1. Global .btn-notch shape + outlined corner line */
.btn-notch,
.wp-block-button__link.btn-notch,
.wp-block-button.btn-notch .wp-block-button__link {
	clip-path: none;
}
.wp-block-button.btn-notch:has([style*="background-color:transparent"])::before {
	display: none;
	content: none;
}

/* 2. Pre-footer CTA band — restore real border on outlined, drop SVG ::before */
.iid-cta-band .wp-block-button.btn-notch .wp-block-button__link[style*="background-color:transparent"] {
	border: 2px solid var(--wp--preset--color--neutral-0, #ffffff) !important;
}
.iid-cta-band .wp-block-button.btn-notch:has([style*="background-color:transparent"])::before {
	display: none;
	content: none;
}

/* 3. Per-block class clip-path drops */
.iid-solutions-section__card-cta,
.iid-industry-slide__cta-btn,
.iid-fcs-btn,
.iid-contact-hero__cta {
	clip-path: none;
}

/* 4. Industry-slide CTA — restore real white border + drop SVG ::before */
.iid-industry-section .iid-industry-slide__cta-btn {
	border: 2px solid #ffffff;
}
.iid-industry-section .iid-industry-slide__cta-btn::before {
	display: none;
	content: none;
}

/* 5. Featured Case Studies outlined — drop 24×24 line ::before
   (.iid-fcs-btn--outline border is already real 2px solid #00256b) */
.iid-fcs-btn-wrap--outline::before {
	display: none;
	content: none;
}

/* 6. Bucket C overrides — same specificity as source, later in cascade wins */
.iid-about-history__btn-shape {
	clip-path: none;
}
.iid-contact-form-tabs__card .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit,
.iid-contact-form-tabs__card button[type="submit"] {
	clip-path: none;
}

/* 7. Padding normalization — was 0 36px 0 20px (asymmetric for notched shape)
   Sum 56px → 28px symmetric → button width unchanged, text re-centers cleanly. */
.iid-solutions-section__card-cta,
.iid-industry-slide__cta-btn,
.iid-fcs-btn {
	padding-left: 28px;
	padding-right: 28px;
}

/* 8. Complianz cookie banner — drop notch + SVG strokes; inline btn styles
   remain (button BG/text colors + the rectangular border on outlined). */
.cmplz-cookiebanner .cmplz-btn {
	clip-path: none !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-reject-all,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
	clip-path: none !important;
	border: 2px solid var(--wp--preset--color--primary-500, #00256B) !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny::before,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-reject-all::before,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences::before,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences::before {
	display: none;
	content: none;
}

/* =========================================================
   BUTTON HEIGHT EQUALIZATION — filled vs outlined pairs
   After c8ffe79 added real `border: 2px solid` to outlined
   buttons, sibling filled buttons render 4px shorter (no border).
   Transparent border on filled matches the box model → equal heights.
   Background + visible border colors unchanged.
   ========================================================= */

/* §7 Featured Case Studies — filled */
.iid-fcs-btn--solid {
	border: 2px solid transparent;
}

/* Pre-footer cta-band — filled (the link WITHOUT the transparent-bg inline style) */
.iid-cta-band .wp-block-button.btn-notch .wp-block-button__link:not([style*="background-color:transparent"]) {
	border: 2px solid transparent;
}

/* =========================================================
   ABOUT-HISTORY NAV BUTTONS — suppress residual corner SVG
   c8ffe79 dropped the inner .iid-about-history__btn-shape
   clip-path, but the outer wrapper's ::before still drew a
   24×24 diagonal line at top-left (line 278-289 of
   about-history/style-index.scss). This makes Προηγούμενο/
   Επόμενο fully rectangular.
   ========================================================= */
.iid-about-history__btn::before,
.iid-about-history__btn:hover::before,
.iid-about-history__btn:focus-visible::before {
	content: none;
	display: none;
	background-image: none;
}

/* =========================================================
   CAREER FORM SUBMIT — remove residual notch
   c8ffe79 covered .iid-contact-form-tabs__card scope only.
   Career form uses .iid-career-form__card parent → missed.
   Mirror override (matching specificity, later in source).
   ========================================================= */
.iid-career-form__card .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit,
.iid-career-form__card button[type="submit"] {
	clip-path: none;
}

/* =========================================================
   CONTACT FORM SUBMIT — brand navy (beat Forminator default teal)
   Bucket C source SCSS (contact-form-tabs:527) already intends
   #00256B but Forminator plugin CSS (#097BAA) wins the cascade.
   !important required; specificity matching alone is insufficient.
   Hover #001C54 = site-wide navy-button convention.
   Scope: .iid-contact-form-tabs__card only (career form .iid-career-form__card unaffected).
   ========================================================= */
.iid-contact-form-tabs__card .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit,
.iid-contact-form-tabs__card button[type="submit"] {
	background: #00256B !important;
	color: #ffffff !important;
}
.iid-contact-form-tabs__card .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit:hover,
.iid-contact-form-tabs__card button[type="submit"]:hover {
	background: #001C54 !important;
}

/* =========================================================
   MOBILE TAP-TARGET + FORM HEAVINESS PATCHES (Batch 2)
   All overrides scope to ≤767. Pseudo-element pattern used where
   visual size must stay unchanged (footer micro-icons); explicit
   sizing where the visual can grow (carousel nav).
   ========================================================= */

/* H2 — featured case studies prev/next 41×40 → 44×44.
   Override path; source SCSS at
   plugins/iid-components/src/featured-case-studies-carousel/style-index.scss:278
   is intentionally NOT edited to keep all responsive fixes in one file.
   ≤768 (inclusive) to match the audit-flagged mobile range. */
@media (max-width: 768px) {
	.iid-fcs-nav-btn {
		width: 44px;
		height: 44px;
	}
}

/* H3 — footer newsletter submit (12×12 icon). Expand hit area to 44×44
   via transparent ::after; visual icon and absolute positioning unchanged.
   Parent already has position: absolute (containing block for ::after).
   ≤768 (inclusive) — icon size is viewport-independent so fix applies
   wherever touch is the primary input. */
@media (max-width: 768px) {
	.iid-footer__newsletter-btn::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}
}

/* H4 — footer social icons (LinkedIn 16×16, Facebook 9×17). Same
   pseudo overlay pattern. Adjacent 44×44 zones overlap a ~16px central
   strip — accepted per goal-spec; nearer-center wins. */
@media (max-width: 768px) {
	.iid-footer__social-link {
		position: relative;
	}
	.iid-footer__social-link::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}
}

/* K1 — CV upload dropzone heaviness. Source SCSS
   plugins/iid-components/src/career-application-form/style-index.scss:460
   sets flex-wrap:wrap at ≤767, which pushes the upload button to a second
   row (101px tall vs 66px at 768). Filename already has nowrap+ellipsis,
   so nowrap here truncates the filename cleanly instead of wrapping. */
@media (max-width: 767px) {
	.iid-career-form__card .forminator-file-upload {
		flex-wrap: nowrap;
	}
}

/* =========================================================
   MOBILE TYPOGRAPHY 14px FLOOR + HEADER SHRINK (Batch 3)
   Hard floor: 14px for body/labels/links on touch viewports (≤768).
   Exemption: uppercase + letter-spacing ≥0.15em (true eyebrows).
   ========================================================= */

/* H5 — footer legal links + legal nav from 12 → 14px at ≤768.
   Source rules use letter-spacing: 0.06em which is below the 0.15em
   exemption threshold, so they don't qualify as design-spec eyebrows
   and must clear the touch-viewport floor. Primary footer nav (16px)
   already passes and is unaffected. */
@media (max-width: 768px) {
	.iid-footer__legal-links a,
	.iid-footer__legal-links span,
	.iid-footer__legal-nav .wp-block-navigation-item__content {
		font-size: 14px !important;
	}
}

/* H6 — hero scroll-down button text "SCROLL"/"Scroll" rendered at
   13.3px without uppercase or letter-spacing. The sibling
   .iid-hero__scroll-label at 11px uppercase 0.15em IS spec-exempt
   (uppercase + 1.65px = 0.15em at 11px) and is intentionally
   untouched. */
@media (max-width: 768px) {
	.iid-hero__scroll {
		font-size: 14px;
	}
}

/* K2 — Forminator field labels (ΟΝΟΜΑΤΕΠΩΝΥΜΟ *, FULL NAME * etc.)
   rendered 12px with NEGATIVE letter-spacing (-0.08px), so they don't
   pass the uppercase+0.15em exemption. Scope: contact-form-tabs +
   career-form cards only — leaves any other Forminator forms (admin,
   etc.) alone. */
@media (max-width: 768px) {
	.iid-contact-form-tabs__card .forminator-label,
	.iid-career-form__card .forminator-label {
		font-size: 14px !important;
	}
}

/* G1 — Mobile header shrink: 96px → 64px. Logo scales 70 → 44 to
   keep ~10px breathing room above/below. Hamburger (44×44 from
   Batch 2) fits exactly. Reclaims 32px of viewport real estate on
   every page at ≤768. Desktop (≥769) keeps the 96/70 Figma values. */
@media (max-width: 768px) {
	.iid-site-header > .wp-block-group,
	.iid-header-inner {
		height: 64px;
	}
	.iid-logo-static {
		height: 44px;
	}
}

/* D-C2 — At ≥1500 the source padding-inline formula on the tab nav
   (max(30px, calc(50vw - 750px))) widens above vw≈1560, narrowing
   the tab content area to 1080px at 1920. GR sums to 1047 natural,
   leaving only 33px gap budget. Source gap of 112px forces a 79px
   shrink → GR active title wraps to 2 lines, strip height doubles to
   124px. Reducing the gap to 32 at ≥1500 keeps GR within budget
   (1047 + 32 = 1079 ≤ 1080) and leaves EN visually identical (EN sum
   678 + 32 = 710 ≪ 1080). align-items: flex-start is a safety net so
   the inactive tab top-aligns instead of stretching, in case GR
   re-wraps at any future viewport beyond 1920 or with longer copy.
   ≥1500 chosen because that's the source's own max-width on the nav,
   making the override transition crisp. */
@media (min-width: 1500px) {
	.iid-contact-form-tabs__nav {
		gap: 32px;
		align-items: flex-start;
	}
}

/* =========================================================
   FLUID TYPOGRAPHY SYSTEM (≥1024)
   Honors theme.json's already-declared fluid intent (H1
   {40,70}, H2 {32,50}, H3 {26,36}) — but the IID component
   SCSS files bypass it with fixed px or with too-aggressive
   vw values that peak before reaching 1500. This block sets
   the unified clamp(MIN, vw, MAX) where MAX = Figma 1920
   intent and the vw mid term = MAX / 1920 × 100 so the
   design intent is proportionally preserved at any viewport.

   Scope ≥1024 (not ≥769) to avoid visible jumps across the
   768→769 tablet→desktop boundary where some tokens
   currently render larger than the proposed MIN.
   Mobile + tablet ≤1023 unchanged.

   Some pre-existing scattered clamps elsewhere in this file
   (lines 225, 308, 380, 3267, 3381, 3637, 3738) become
   superseded by these rules via later source order; their
   declarations remain harmless but are dead code that a
   future cleanup pass can remove.
   ========================================================= */
@media (min-width: 1024px) {

	/* T2 — Standard H1 (Figma 70px @1920, Noto Sans 400, lh 1.35).
	   Source: hero/style-index.scss declares clamp(36, 4.86vw, 70)
	   for .iid-hero--photo and .iid-hero--erga which peaks at 70
	   from vw≈1440 onwards. The new vw=3.65 peaks at 70 only at
	   1920 (Figma canvas), giving 54.6 at 1496 (-22% feels-too-big
	   reduction). */
	.iid-hero--photo .iid-hero__h1,
	.iid-hero--erga .iid-hero__h1,
	.iid-hero-split__content h1,
	.iid-equipment-single__hero h1,
	.iid-service-pillars-showcase__item h2,
	.iid-about-history__next-year {
		font-size: clamp(40px, 3.65vw, 70px);
	}

	/* T2 — Contact hero H1, MIN raised to 48 to preserve the
	   existing 48px tablet floor (1023→1024 jump-free). */
	.iid-contact-hero__title {
		font-size: clamp(48px, 3.65vw, 70px);
	}

	/* T3 — H1-Lead, case-study single (Figma 60px @1920).
	   Source: .iid-hero--case-study has clamp(32, 4vw, 60) which
	   peaks at 60 from vw=1500; new formula peaks at 60 at 1920. */
	.iid-hero--case-study .iid-hero__h1 {
		font-size: clamp(36px, 3.13vw, 60px);
	}

	/* T3 — H1-Lead, legal pages (whistleblowing, privacy, terms,
	   cookies). Figma intent inferred 56px @1920.
	   Pre-existing clamp(36, 4vw, 56) at line 3738 peaks at 56
	   from vw=1400; new formula peaks at 56 at 1920. */
	body.page-legal .wp-block-post-content > h1.wp-block-heading {
		font-size: clamp(36px, 2.92vw, 56px);
	}

	/* T4 — H1-Reading (project description) + Stat-50 (Figma
	   50px = H2 token reused). */
	body.page-project .wp-block-post-content > h1.wp-block-heading,
	.iid-stat__value,
	.iid-about-section__stats h2.has-h2-font-size {
		font-size: clamp(36px, 2.60vw, 50px);
	}

	/* T5 — Section H2 (theme.json fluid {32,50}, Figma 50px @1920,
	   Plus Jakarta Medium 500, lh 1.2, ls -2). The biggest-coverage
	   token. Pre-existing rules use varied vw (3.5/4vw); the new
	   2.60vw uniformly peaks at 50 at 1920 (Figma canvas). */
	.iid-solutions-section__heading,
	.iid-services-pillars__headline,
	.iid-industry-section__heading,
	.iid-industry-slide__title,
	.iid-fcs-section__heading,
	.iid-insights__heading,
	.iid-insights-section--related .iid-insights__heading,
	.iid-cert-section__heading,
	.iid-about-why__heading,
	.iid-about-methodology__heading,
	.iid-about-history__heading,
	.iid-about-reliability__heading,
	.iid-equipment-grid__heading,
	.iid-case-grid__heading,
	.iid-case-related__heading,
	.iid-career-intro__heading,
	.iid-career-why__heading,
	.iid-service-process-timeline__heading,
	.iid-single-insight__title,
	.single-case_study .iid-case-study-body__main h2.wp-block-heading {
		font-size: clamp(32px, 2.60vw, 50px);
	}

	/* T6 — CTA-band heading. The user's most-noticed symptom.
	   MIN raised to 52 to preserve the 51.4px tablet floor (no
	   1023→1024 jump). Effectively flat at 52 until vw≈1425, then
	   fluid linear to 70 at 1920.
	   !important: render.php emits `has-h1-font-size` class which
	   WP generates with !important — needed to win the cascade. */
	.iid-cta-band .wp-block-heading {
		font-size: clamp(52px, 3.65vw, 70px) !important;
	}

	/* T7 — about-history active-year display number. Source
	   contact: about-history/style-index.scss:156 (Bucket C —
	   read-only). Override via same-or-higher specificity. */
	.iid-about-history__year {
		font-size: clamp(72px, 6.09vw, 117px);
	}

	/* T9 — H3 / Card title (theme.json fluid {26,36}, Figma 36px
	   = sub1 token, Plus Jakarta Medium 500, lh 1.4). */
	.iid-case-card h3,
	.iid-case-card__title,
	.iid-fcs-slide__title,
	.iid-feature-tabs__content h2,
	.iid-equipment-grid__card-title,
	.iid-equipment-single__section h2,
	.iid-erga-clients__heading,
	.iid-career-who__heading,
	.iid-career-form__card h2,
	.iid-career-form__manifesto-heading,
	.iid-solutions-section__card h3 {
		font-size: clamp(26px, 1.88vw, 36px);
	}

	/* T10a — about-why stat number (custom 42px in source,
	   Bucket C). Proportional fluid. */
	.iid-about-why__stat-number {
		font-size: clamp(28px, 2.19vw, 42px);
	}

	/* T10b — small number variants. */
	.iid-about-methodology__step-title {
		font-size: clamp(20px, 1.30vw, 25px);
	}
	.iid-career-why__card-num,
	.iid-career-why__badge {
		font-size: clamp(20px, 1.35vw, 26px);
	}

	/* T10b companion — about-methodology step-number, marginalia label.
	   Source about-methodology/style-index.scss:200 sets 15 px fixed
	   alongside step-title's 25 px → designer's 0.60 ratio (number is
	   60% of title, small marginal prefix at left:-40px). When Stage B
	   clamped step-title to clamp(20, 1.30vw, 25), the title fell to 20
	   at 1024-1499 while the number stayed 15 → ratio drifted to 0.75.
	   Same vw multiplier (1.30 × 0.60 = 0.78vw) preserves 0.60 across
	   every desktop viewport. */
	.iid-about-methodology__step-number {
		font-size: clamp(12px, 0.78vw, 15px);
	}
}
/* End FLUID TYPOGRAPHY SYSTEM (≥1024). */

/* =========================================================
   ITEM A — Home hero eyebrow 22→36 Figma sub1 alignment
   Stage A flagged this as under-sized vs Figma node 1:6071
   (sub1 = 36 px, Plus Jakarta Medium 500, lh 1.4). Source
   hero/style-index.scss:181 sets 22 px on the base selector;
   the variant heroes (.iid-hero--photo / --erga / --case-study)
   override to 18 px white uppercase at higher specificity (0,2,0),
   so this 0,1,0 override only affects the Home hero. Mobile
   ≤1023 stays at the source 22 px.
   ========================================================= */
@media (min-width: 1024px) {
	.iid-hero__eyebrow {
		font-size: clamp(24px, 1.88vw, 36px);
	}
}

/* =========================================================
   FLUID SPACING SYSTEM (≥1024)
   Mirrors Stage B typography clamp pattern (commit e3a32a0).
   Hero + CTA-band min-heights were sized for the 1920 Figma
   canvas — pixel-exact at 1920 but cause the "lonely hero"
   perception at 1496 because typography dropped to 78% (Stage B)
   while spacing stayed at 100%. Each clamp: MAX = current/Figma
   1920 value, MID = MAX / 1920 × 100vw, MIN = MAX × 0.78 for
   text-anchored heros, MAX × 0.85 for content-dense heros where
   aggressive compression risks visible cramping.
   Scope ≥1024 — mobile + tablet untouched.

   Equipment-single hero (S4) deferred from this commit: source
   min-height already 600, not the 874 originally claimed in
   Stage A. Visual review post-merge will decide if a targeted
   fix is needed.
   ========================================================= */
@media (min-width: 1024px) {

	/* S1 — About / Careers / Equipment-archive / generic photo hero
	   Source: hero/style-index.scss:384 min-height: 591 (Figma 1:3480 inner). */
	.iid-hero--photo {
		min-height: clamp(460px, 30.78vw, 591px);
	}

	/* S2 — Case-study archive (erga) hero
	   Source: hero/style-index.scss:503 min-height: 591. */
	.iid-hero--erga {
		min-height: clamp(460px, 30.78vw, 591px);
	}

	/* S3 — Case-study single hero
	   Source: hero/style-index.scss:457 min-height: 590. */
	.iid-hero--case-study {
		min-height: clamp(460px, 30.73vw, 590px);
	}

	/* S5 — Services pillar hero (inner grid wrapper holds min-height)
	   Source: hero-split/style-index.scss:37 min-height: 874 // Figma frame height. */
	.iid-hero-split__grid {
		min-height: clamp(680px, 45.52vw, 874px);
	}

	/* S6 — Contact hero (softer 0.85 MIN — content-dense form anchor).
	   Note: at 1024 the rendered hero already extends to ~1081 px from
	   content (GR copy wraps more); the clamp only binds at 1500+ where
	   content fits within the floor. No regression at 1024-1280.
	   Source: style.css:2917 min-height: 884 (Figma 1:2776 contact frame). */
	.iid-contact-hero.alignfull {
		min-height: clamp(751px, 39.10vw, 884px);
	}

	/* S7 — CTA-band (navy bokeh bg via background-size:cover crops silently
	   at the reduced floor — accepted per goal-spec Q2).
	   Source: style.css:478 min-height: 512 (cta-band-bg.jpg dims 1920×512). */
	.iid-cta-band {
		min-height: clamp(400px, 26.67vw, 512px);
	}

	/* S6b — Contact hero PHOTO min-height (Stage B coverage closure).
	   Stage B (commit 0ba8822) put hero outer in clamp(751,39.10vw,884)
	   but left .iid-contact-hero__photo min-height: 884 fixed at
	   style.css:3091. Photo bound the grid row track at EN 1280/1496
	   where content_natural < 884, producing 125-134px deadspace below
	   the CTA (commit 276d907 padding fix had no effect on these
	   viewports because flex-column items anchor to flex-start). Mirror
	   the S6 hero clamp on the photo so both sides of the grid stay
	   synced. Photo loses ~120px vertical at EN 1280/1496 (cover crops
	   centered building detail; navy 40% overlay softens impact). */
	.iid-contact-hero__photo {
		min-height: clamp(751px, 39.10vw, 884px);
	}
}
/* End FLUID SPACING SYSTEM (≥1024). */

/* =========================================================
   CAREERS — .iid-career-why__cards padding fix
   Source rule at career-why-cards/style-index.scss:55-77 relies on
   max-width:1500 + margin:auto, which only provides breathing room
   when viewport > 1500. Between 768 and 1499 the cards take 100%
   width with zero (or asymmetric) padding-inline, leaving the
   alternating left/right text columns touching the viewport edges.
   Two scoped overrides:
   - Desktop 1024-1499: add symmetric 48px (theme spacing-12) so
     text stops touching edges. At ≥1500 the source rule still wins
     and gives the Figma-intended 210px breathing via margin:auto.
   - Tablet 768-1023: source rule declares padding-left:60 only
     (intended for the 2-col tablet stack where text is in the right
     column). Right edge still touches because no padding-right.
     Complete the symmetric pair with matching padding-right:60.
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1499px) {
	.iid-career-why__cards {
		padding-inline: var(--wp--preset--spacing--12);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.iid-career-why__cards {
		padding-right: 60px;
	}
}

/* =========================================================
   CONTACT HERO — content padding-bottom Figma alignment
   Source rule at style.css:2937 has padding-bottom: 100px
   which doesn't exist in Figma (node 1:2776 content frame
   ends flush with CTA bottom; height=683 = CTA bottom).
   Reduces visible "white below photo" perception at all
   desktop viewports. Scope ≥1024 — tablet/mobile have their
   own working padding overrides at lines 3110 + 3134.
   ========================================================= */
@media (min-width: 1024px) {
	.iid-contact-hero__content {
		padding-bottom: 24px;
	}
}

/* =========================================================
   CONTACT FORM-TABS — flush with hero (remove WP block-gap)
   theme.json blockGap = var(--wp--preset--spacing--8) = 32px,
   applied by WP via :where(.is-layout-flow) > * + * as
   margin-top: 32px on .iid-contact-form-tabs.alignfull. Since
   hero bg is #FFFFFF and form-tabs bg is #F4F6FA, this 32px
   gap rendered as a visible white strip between the photo
   bottom and the grey form-tabs section. Per user clarification
   "photo να κολλήσει στο από κάτω γκρι", drop the gap so the
   section transition is immediate. Class scope is contact-page
   only, so no other pages affected.
   ========================================================= */
.iid-contact-form-tabs.alignfull {
	margin-top: 0;
}

/* =========================================================
   TEMP-HIDE-FB — Facebook social icon, footer + contact,
   GR + EN. Requested 2026-06-09. Scoped to the two known
   container classes so the insight-meta-sidebar Facebook
   SHARE button (different container, facebook.com/sharer/…)
   and any future inline FB links stay unaffected. LinkedIn
   in the same containers remains visible because the
   [href*="facebook.com"] attribute selector only matches
   the FB anchors. RESTORE = delete this block + bump CSS
   version. No DOM/markup edit required to revert.
   ========================================================= */
.iid-footer__social-link[href*="facebook.com"],
.iid-contact-hero__social a[href*="facebook.com"] {
	display: none;
}

/* =========================================================
   SOLUTIONS §5 — narrow-desktop card overflow fix (v1.23.16)
   Tab 2 carries 5 bullets after the ABBYY addition. In the
   1201–1360 window the card column narrows enough that
   bullets wrap to 2 lines and the CTA spills below the
   fixed 588px teal panel (clipped by .card overflow:hidden).
   Mirror the proven max-width:1024px treatment (static flow,
   content-driven height) while preserving the rail+card
   side-by-side desktop layout.
   ========================================================= */
@media (min-width: 1025px) and (max-width: 1360px) {
	.iid-solutions-section__cards {
		height: auto;
		min-height: 588px;
	}

	.iid-solutions-section__card {
		position: static;
		inset: auto;
		display: none;
		height: auto;
		min-height: 588px;
		opacity: 1;
		visibility: visible;
		overflow: visible;
	}

	.iid-solutions-section__card.is-active {
		display: block;
		z-index: auto;
	}

	.iid-solutions-section__card-body {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		padding: 83px 48px 48px 93px;
	}
}

/* =========================================================
   BATCH A — internal cover height + breadcrumb wrap breathing
   Mobile (≤767) ONLY. v1.23.25. Theme-side overrides because
   the block-side SCSS (hero/, breadcrumbs/) is in Bucket C
   and stays unbuilt this iteration.
   ========================================================= */
@media (max-width: 767px) {
	/* A1 — uniform 390 internal cover.
	   Homepage hero (--gradient/--video) NOT in selector list,
	   stays untouched. min-height (not height) so the tightest
	   case (/erga/ — 3-line H1 + 2-line tagline) can grow ~2-10px
	   gracefully. max-height:none overrides the .iid-hero--photo
	   591 cap. */
	.iid-hero--photo,
	.iid-hero--erga,
	.iid-hero--case-study {
		min-height: 390px;
		max-height: none;
	}

	/* Custom insight-single hero — different element, same target. */
	.iid-single-insight__hero {
		min-height: 390px;
	}

	/* A2 — breadcrumb breathing when content wraps.
	   /erga/ (1 line) keeps 50px airy look via min-height; CS +
	   insight singles whose long titles wrap to 2+ lines now get
	   12-16px above/below instead of cramming. Fixes the "stuck
	   to cover" perception flagged in the mobile fix list. */
	.iid-breadcrumbs__list {
		height: auto;
		min-height: 50px;
		padding-block: 16px;
	}
}

/* =========================================================
   BATCH B — Mobile Menu fixes (v1.23.26)
   Fix 1 applies at all widths (hamburger color); other rules
   scoped to ≤1023 where the mobile menu is in play.
   ========================================================= */

/* Fix 1 — Hamburger SVG white (was black via inherited #333).
   SVG <line stroke="currentColor">; setting color on the button
   is enough. */
.iid-hamburger {
	color: #fff;
}

@media (max-width: 1023px) {

	/* Force the mobile menu's intended 24px / 40px padding.
	   The wp:group block's spacing.padding is declared in the
	   template markup but isn't reaching the rendered DOM in
	   this WP build — we set it explicitly so logo + nav items
	   share the same 24px left baseline (Fix 3 prerequisite). */
	.iid-mobile-menu {
		padding: 24px 24px 40px 24px;
	}

	/* Fix 2 — Top row layout: logo | search | EN | X.
	   Push utils (search + EN + close) to the right by giving
	   the logo wrapper margin-right:auto. 16px gap between utils. */
	.iid-mobile-menu__header {
		gap: 16px;
	}
	.iid-mobile-menu__header .wp-block-site-logo {
		margin-right: auto;
	}
	/* Search anchor inside menu (scoped class — bypasses the global
	   .iid-header-search-btn { display:none } mobile-hide). */
	.iid-mobile-menu__search {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: #fff;
		text-decoration: none;
		flex-shrink: 0;
	}
	.iid-mobile-menu__search:hover {
		color: rgba(255, 255, 255, 0.85);
	}
	/* Override the general mobile-hide rule for the lang toggle
	   ONLY when it lives inside the mobile menu (header still
	   hides its own EN copy at mobile, as before). */
	.iid-mobile-menu .iid-lang-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		height: 44px;
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		text-decoration: none;
		padding: 0 8px;
	}
	.iid-mobile-menu .iid-lang-toggle:hover {
		opacity: 0.85;
	}

	/* Fix 3 — Items left-align to the logo's x-position.
	   The .iid-mobile-menu's outer 24px padding-left already places
	   the logo at 24px from the screen edge. The wp:navigation block
	   adds its own UL padding by default that pushes items further
	   left (cropping "Η ΕΤΑΙΡΕΙΑ"). Reset that padding/margin so the
	   items align flush with the logo. */
	.iid-mobile-nav,
	.iid-mobile-nav > .wp-block-navigation__container,
	.iid-mobile-nav ul {
		padding-left: 0;
		margin-left: 0;
		list-style: none;
	}
	.iid-mobile-nav .wp-block-navigation__container > li,
	.iid-mobile-nav > ul > li {
		margin-left: 0;
		width: 100%;     /* parent UL is flex column; force full-width so
		                    has-child grid + non-child links span the menu */
	}

	/* Fix 4 — Subcategories accordion.
	   Submenu collapsed by default (max-height: 0 + overflow hidden).
	   JS toggles .is-expanded on the parent li.has-child, animating
	   open. NO container background — items inherit white text on
	   the navy menu bg (transparent + box-shadow:none override the
	   WP nav block's desktop-dropdown defaults). */
	.iid-mobile-nav .wp-block-navigation__submenu-container {
		position: static !important;          /* override WP block CSS absolute */
		top: auto !important;
		left: auto !important;
		right: auto !important;
		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;                 /* WP default: 1px rgba border */
		padding: 0 !important;
		margin: 0;
		display: flex !important;             /* inherit WP's flex column */
		flex-direction: column !important;
		width: 100% !important;
		min-width: 0 !important;
		list-style: none;
		opacity: 1;
		visibility: visible;
		max-height: 0;
		overflow: hidden;
		transition: max-height 280ms ease;
	}
	.iid-mobile-nav .has-child.is-expanded > .wp-block-navigation__submenu-container {
		max-height: 600px;  /* enough for 3-5 sub-items */
	}
	.iid-mobile-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 18px;        /* smaller than parents' 22px */
		font-weight: 400;
		color: #fff;
		padding: 10px 0 10px 16px;  /* left-indent to indicate hierarchy */
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	/* Chevron rotation: ⌄ collapsed → ⌃ expanded. */
	.iid-mobile-nav .has-child > .wp-block-navigation__submenu-icon {
		transition: transform 240ms ease;
		color: #fff;
	}
	.iid-mobile-nav .has-child.is-expanded > .wp-block-navigation__submenu-icon {
		transform: rotate(180deg);
	}

	/* Parent <a> with children behaves like an accordion trigger. */
	.iid-mobile-nav .has-child > a {
		cursor: pointer;
	}

	/* The parent li.has-child has 3 direct children: link, chevron, submenu UL.
	   Use grid to keep link+chevron on row 1 (link takes 1fr, chevron auto),
	   and the submenu spans both columns on row 2 — so it ALWAYS renders
	   below the parent, never beside it. */
	.iid-mobile-nav .has-child {
		display: grid !important;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 0 8px;
	}
	.iid-mobile-nav .has-child > a {
		grid-column: 1;
		grid-row: 1;
		display: block;
		width: 100%;     /* fill the 1fr column so chevron sits at row's right edge */
	}
	.iid-mobile-nav .has-child > .wp-block-navigation__submenu-icon {
		grid-column: 2;
		grid-row: 1;
	}
	.iid-mobile-nav .has-child > .wp-block-navigation__submenu-container {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	/* Fix 5 — CTA at bottom (bilingual via shortcode); preserve
	   the 40px top margin that the old wp:group provided. */
	.iid-mobile-menu__cta {
		margin-top: 40px;
	}
}

/* =========================================================
   BATCH C — Homepage mobile fixes (v1.23.27)
   Scoped to (max-width: 767px). Overrides only — no
   render.php / Bucket C / build touched.
   ========================================================= */
@media (max-width: 767px) {

	/* Fix 1 — §3 about badge smaller on mobile (was 287px desktop). */
	.iid-about-section__badge img {
		max-width: 180px;
	}

	/* Fix 2 — §4 team photo no longer overflows §5 «ΟΛΟΚΛΗΡΩΜΕΝΕΣ ΛΥΣΕΙΣ».
	   The wp:cover carries minHeight:659px from desktop Figma; capped here.
	   The intentional photo↔solutions overlap (-281px margin) is removed —
	   on mobile it pushed the eyebrow inside the photo. */
	.iid-team-band {
		min-height: 400px !important;
	}
	.iid-solutions-section {
		margin-top: 0 !important;
		padding-top: 64px !important;
	}

	/* Fix 3 — §5 stacked rail boxes ↔ description card breathing room.
	   Block source has gap:0 at ≤1024 (sized for the desktop layout);
	   restore air at mobile. */
	.iid-solutions-section__content {
		gap: 32px !important;
	}

	/* Fix 4 — §8 cta-strip taller + 20px text/button.
	   render.php emits inline font-size styles (24px text, 15px button);
	   !important overrides them at mobile per IID mobile fix list. */
	.iid-cta-strip .wp-block-group {
		padding-block: 48px;
		min-height: 280px;
	}
	.iid-cta-strip__text {
		font-size: 20px !important;
	}
	.iid-cta-strip .wp-block-button__link {
		font-size: 20px !important;
		/* render.php emits inline white-space:nowrap. At 20px on ≤375 the
		   button text would overflow ~70px past viewport — allow wrap. */
		white-space: normal !important;
	}

	/* Fix 5 — «ΟΛΑ ΤΑ INSIGHTS» CTA below the cards, left-aligned, no wrap.
	   display:contents on the header elevates its children to the wrap's
	   flex layout so we can place CTA AFTER the cards via flex order.
	   Header carries no visual styling itself (no bg/border/padding) so
	   contents-elevation has no rendering side-effect. */
	.iid-insights__wrap {
		display: flex;
		flex-direction: column;
	}
	.iid-insights__header {
		display: contents;
	}
	.iid-insights__heading-group { order: 1; }
	.iid-insights-columns        { order: 2; }
	.iid-insights__header .wp-block-buttons {
		order: 3;
		padding-top: 0;
		justify-content: flex-start;
	}
	.iid-insights__header .wp-block-button__link {
		white-space: nowrap;
	}
}

/* =========================================================
   BATCH D — ISO certs 2-per-row on mobile (v1.23.28)
   - Homepage iid/certifications: kill the @max-width:479
     collapse-to-1/row rule so 2/row carries to all widths.
   - About iid/about-reliability: switch to grid so the math
     is exact (the existing flex calc(50%-6px) + gap:12px
     overflowed by 1-3px at ≤375, causing a wrap).
   PDF links: untouched — both blocks already render
   target="_blank" rel="noopener noreferrer".
   ========================================================= */
@media (max-width: 767px) {

	/* Homepage certs: 2/row via grid (math-safe). The existing
	   @max-width:767 + @max-width:479 flex+gap combination
	   overflowed by 3px at ≤375 (12px gap + 160px min-content
	   cards > 327px container). Grid 1fr 1fr handles it cleanly. */
	.iid-cert-section__cards {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 12px !important;
	}
	.iid-cert-card {
		flex: none !important;
		width: auto !important;
	}

	/* About §8b certs: grid 2-col, math-safe (avoids the
	   3px overflow that wrapped cards at ≤375 under the
	   compiled @max-width:600 flex rule). */
	.iid-about-reliability__cards {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 12px !important;
		width: 100% !important;
		max-width: none !important;
	}
	.iid-about-reliability__card {
		flex: none !important;
		width: auto !important;
	}
}

/* =========================================================
   BATCH E — About page mobile fixes (v1.23.29)
   Scoped to (max-width: 767px). About-methodology + about-history
   SCSS sources are in Bucket C — all overrides here.
   ========================================================= */
@media (max-width: 767px) {

	/* E1 — Methodology: kill the 250px desktop padding-bottom on
	   __content that creates a huge empty area under "03. Data" on
	   mobile (sticky-image scroll behavior is desktop-only). */
	.iid-about-methodology__content {
		padding-bottom: 0 !important;
	}

	/* E2a — Timeline: kill the row's desktop full-bleed (100vw +
	   margin-left:calc(50%-50vw)) and center the year. Year font
	   scaled down from 117 → 64 to fit mobile. */
	.iid-about-history__row {
		width: 100% !important;
		margin-left: 0 !important;
		padding: 0 !important;
		height: auto !important;
		justify-content: center !important;
	}
	.iid-about-history__year {
		font-size: 64px !important;
		line-height: 1;
		margin: 0 12px !important;
	}

	/* E2b — Hide the desktop-only decorative dots + connecting
	   lines + adjacent year previews (all rendered as
	   .iid-about-history__dot / __line / __prev-year / __next-year). */
	.iid-about-history__dot,
	.iid-about-history__line,
	.iid-about-history__prev-year,
	.iid-about-history__next-year {
		display: none !important;
	}
	.iid-about-history__track {
		flex: 0 !important;
	}

	/* E2d — Tighten vertical rhythm: year→title 8px, title→body 12px,
	   body→controls 16px. Also reduce title/body font sizes for
	   mobile reading. Switch slides from absolute/inset:0 to relative
	   in-flow so the timeline grows with the active slide's content
	   (otherwise controls overlap the year text). */
	.iid-about-history__timeline {
		min-height: 0 !important;
		margin-bottom: 24px !important;
	}
	.iid-about-history__slide {
		position: relative !important;
		inset: auto !important;
	}
	.iid-about-history__slide:not(.is-active) {
		display: none !important;
	}
	.iid-about-history__title {
		margin-top: 8px !important;
		font-size: 20px !important;
	}
	.iid-about-history__body {
		margin-top: 12px !important;
		font-size: 16px !important;
	}
	.iid-about-history__controls {
		margin-top: 16px !important;
	}

	/* E3 — HR section (.iid-about-team): stack columns vertically
	   on mobile. The wp:columns block carries `is-not-stacked-on-
	   mobile` from the editor (mismatch between block attribute and
	   className). Forcing flex-direction:column makes the DOM order
	   take effect — text column FIRST (eyebrow + title + 3 paragraphs)
	   → image column SECOND (HR-IMG.jpg). 32px gap. */
	.iid-about-team .wp-block-columns,
	.iid-about-team .wp-block-columns.is-not-stacked-on-mobile {
		flex-direction: column !important;
	}
	.iid-about-team .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.iid-about-team .wp-block-columns > .wp-block-column + .wp-block-column {
		margin-top: 32px;
	}
}

/* =========================================================
   BATCH F1 — Career page title padding (v1.23.30)
   Block-side @max-width:767 rule exists in build CSS but uses
   selector `.iid-career-why` (1 class) — loses to base
   `.iid-career-why.alignfull` (2 classes). Override here at
   matching specificity so the mobile padding actually wins.
   ========================================================= */
@media (max-width: 767px) {
	.iid-career-why.alignfull {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
}

/* =========================================================
   BATCH G — Services hero + Contact cover (v1.23.31)
   G1a content fix (stray "n" → space) applied via wp
   search-replace on posts 42 (GR) + 51 (EN); not part of
   this CSS. G1b + G2 below.
   ========================================================= */
@media (max-width: 767px) {

	/* G1b — hero H1 safety net. The services title used to overflow
	   at ≤375 because of a 25-char unbreakable compound word
	   ("Information.nIntelligence."). After the content fix the
	   string wraps naturally; overflow-wrap:anywhere defends against
	   any future long word in any hero variant. */
	.iid-hero__h1 {
		overflow-wrap: anywhere;
	}

	/* G2 — Contact cover: photo at the TOP of the section on mobile
	   (above eyebrow + title), matching the other internal pages'
	   pattern. The wrapper is a CSS grid with single column at
	   ≤767, so child `order` reorders the stack. Desktop ≥1024
	   stays 2-col (content LEFT, photo RIGHT). */
	.iid-contact-hero__photo   { order: 1; }
	.iid-contact-hero__content { order: 2; }
}

/* =========================================================
   BATCH H — Equipment mobile (v1.23.32)
   Covers /exoplismos/ + /en/equipment/ (feature-tabs) AND all
   7 pages via the shared iid/cta-band block. All blocks
   NOT in Bucket C — overrides here per project convention.
   ========================================================= */
@media (max-width: 767px) {

	/* H1 — Tab nav dots vertically centered on the tab block.
	   The base rule uses `.iid-feature-tabs__tab.is-active::before`
	   (specificity 0,2,1) → matching selector here so the mobile
	   override wins. `top: 50%` centers on the 53px tab block;
	   translateY(-50%) of the 8px dot back-aligns the dot center. */
	.iid-feature-tabs__tab.is-active::before {
		top: 50%;
		transform: translateY(-50%);
	}

	/* H2a — CTA buttons equal width AND equal height.
	   CSS Grid `grid-auto-rows: 1fr` makes ALL row tracks equal,
	   so even when one label wraps to 2 lines and the other to 1,
	   both buttons render the SAME height (driven by the tallest).
	   Folder-notch (.btn-notch ::before SVG clip) follows the
	   button's box — full-width stretch preserves the corner cut. */
	.iid-cta-band .wp-block-buttons {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr;
		gap: 16px;
	}
	.iid-cta-band .wp-block-button {
		width: 100%;
	}
	.iid-cta-band .wp-block-button__link {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	/* H2b — CTA section breathing (was 0 padding at mobile). */
	.iid-cta-band {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

/* =========================================================
   BATCH I — Internals Έργα + Insights mobile (v1.23.33)
   All blocks NOT in Bucket C — overrides here per convention.
   ========================================================= */
@media (max-width: 767px) {

	/* I1 — ΠΕΛΑΤΗΣ/ΚΛΑΔΟΣ blue accent line = height of text content.
	   Root cause: at @≤1023 the source SCSS sets `flex: 1 1 200px` on
	   the row (for the row-mode 2-col layout). At @≤599 the SCSS
	   flips the parent back to column but DOES NOT reset the row's
	   flex-basis — so in a flex column, basis 200px = 200px tall
	   row regardless of content. Reset flex + force content-driven
	   height; bar follows automatically. */
	.iid-case-meta-sidebar__row {
		flex: 0 0 auto !important;
		align-self: start;
		height: max-content;
	}

	/* I2 — Case-study «ΖΗΤΗΣΤΕ ΑΞΙΟΛΟΓΗΣΗ» CTA: center + no clip.
	   inline-flex content-width pushed the button past the right edge
	   by ~11px at 375. Convert to block flex with max-width:100% and
	   auto margins to center; box-sizing keeps padding inside the
	   width budget. */
	.iid-case-cta {
		display: flex;
		width: max-content;
		max-width: 100%;
		margin-inline: auto;
		box-sizing: border-box;
	}

	/* I3 — Insight single article body: 32px top breathing space so
	   the first paragraph doesn't sit flush against the breadcrumb. */
	.iid-single-insight__content {
		padding-top: 32px;
	}
}

/* =========================================================
   FIX — cta-band button height = Figma 56px (v1.23.34)
   Base rule at style.css:547 sets `min-height: 56px` intending
   total = 56px, but WP's `.wp-element-button` default
   `box-sizing: content-box` makes that the content-area min →
   total = 56 + 32 padding + 4 border = **92px** (64% over spec).
   Switching to border-box + tightening padding 16→14 makes
   total = 14 + 24 (line-height) + 4 (border) + 14 = exactly 56.
   Scope: cta-band only (hero CTA / cta-strip / case-cta /
   contact form buttons sized via different rules — unaffected).
   Padding selector matches the 3-class spec of style.css:558
   (`.iid-cta-band .wp-block-button.btn-notch .wp-block-button__link`)
   so it wins the cascade — without that, the original 16/16
   padding stayed and total settled at 60 instead of 56.
   ========================================================= */
.iid-cta-band .wp-block-button__link {
	box-sizing: border-box;
}
.iid-cta-band .wp-block-button.btn-notch .wp-block-button__link {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* =========================================================
   BATCH J — Mobile Menu round 2 (v1.23.35)
   Refines Batch B (v1.23.26). All ≤1023 — desktop untouched.
   Affected files: ONLY this stylesheet.
   ========================================================= */
@media (max-width: 1023px) {

	/* J1 — Hamburger vertical-center on the header bar.
	   Parent .iid-header-utils uses align-items: stretch which,
	   on a fixed-height (44px) button inside a 64px header row,
	   collapses to flex-start (top). align-self: center on the
	   button restores vertical centering. */
	.iid-hamburger {
		align-self: center;
	}

	/* J2 — Defensive: never let the open menu scroll horizontally.
	   Internal layout already constrained, but pin overflow-x:hidden
	   so any future content addition can't introduce a side-scroll. */
	.iid-mobile-menu {
		overflow-x: hidden;
		overflow-y: auto;
	}
	.iid-mobile-menu * {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* J3a — Dropdown push-down via display toggle (no max-height
	   transition). Replaces Batch B's max-height:0→600px animation
	   which could mid-flight visually overlap. With display:none/
	   block, the submenu either takes its natural content height
	   in flow (pushing siblings down) or is completely removed
	   (no layout space). No animation but guaranteed correct push. */
	.iid-mobile-nav .wp-block-navigation__submenu-container {
		display: none !important;
		max-height: none !important;
		transition: none !important;
	}
	.iid-mobile-nav .has-child.is-expanded > .wp-block-navigation__submenu-container {
		display: block !important;
	}

	/* J3b — No hover effects on touch devices: neutralize every
	   :hover inside the mobile menu shell. Use a hover-capable
	   media guard so devices WITH a real pointer (desktop tablet
	   hybrid) still get the existing hover affordances; pure-touch
	   gets tap-only behavior. */
	@media (hover: none) {
		.iid-mobile-menu *:hover,
		.iid-mobile-menu *:focus,
		.iid-mobile-nav *:hover {
			background-color: inherit !important;
			color: inherit !important;
			opacity: 1 !important;
			text-decoration: none !important;
		}
		/* Restore navigation item colour (would otherwise inherit) */
		.iid-mobile-nav .wp-block-navigation-item__content:hover {
			color: #fff !important;
		}
	}

	/* J4 — Divider lines full-width on every menu item.
	   Border lived on the inner <a> (.wp-block-navigation-item__content)
	   which on has-child items only fills grid column 1 — leaving the
	   chevron column without a line. Move the border to the parent
	   <li> so it spans the full row regardless of inner layout. */
	.iid-mobile-nav .wp-block-navigation-item__content {
		border-bottom: none;
	}
	.iid-mobile-nav > ul > li,
	.iid-mobile-nav .wp-block-navigation__container > li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
}

/* =========================================================
   BATCH K — Homepage hero subtitle visible @≤1023 (v1.23.36)
   Source `build/hero/index.css` hides .iid-hero__col-right
   (the wrapper holding .iid-hero__intro / subtitle) at
   @max-width:1023. Restore visibility scoped to the homepage
   variants (--video / --gradient); inner-page --photo heroes
   (about/services/equipment/erga/case-study) are NOT matched
   and keep their right column hidden — no regression.
   Vertical centering already works via .iid-hero__content
   flex+align:center; subtitle joins the single-column stack
   under H1 + eyebrow.
   Background video / poster / waves / overlay untouched.
   GR+EN both covered (single CSS rule; PHP swaps the copy).
   ========================================================= */
@media (max-width: 1023px) {

	/* K1 — Unhide the subtitle column on the homepage hero only.
	   Specificity 0,2,0 vs the source 0,1,0 hide → wins. */
	.iid-hero--video .iid-hero__col-right,
	.iid-hero--gradient .iid-hero__col-right {
		display: block;
	}

	/* K2 — Subtitle sizing for mobile breathing room
	   (desktop 22px → mobile 18px, line-height stays 1.55). */
	.iid-hero--video .iid-hero__intro,
	.iid-hero--gradient .iid-hero__intro {
		font-size: 18px;
		line-height: 1.55;
		padding-bottom: 0;
	}
}

/* =========================================================
   BATCH L — CTA sizing/spacing mobile (v1.23.37)
   L1: cta-strip button reverts round1 20px → 15px to match
       the page's other CTAs (cta-band 56px/15px, insights
       52px/15px, Figma standard). Body text stays at 20px
       (Batch C #4 untouched — IID-approved in round1).
   L2: cta-band gets 24px horizontal padding @≤767 so the
       Batch H grid-stretched buttons never touch viewport
       edges. Applies globally (cta-band is the pre-footer
       on all pages). Equal-width/height behavior preserved
       — buttons still grid 1fr, just inside 327px not 375.
   ========================================================= */
@media (max-width: 767px) {

	/* L1 — CTA-strip button: 20px → 15px to match cta-band/insights.
	   Specificity (0,2,1) matches Batch C #4 source rule; later
	   source-order + !important win. white-space:normal stays
	   (Batch C #4) so any future longer label still wraps safely. */
	.iid-cta-strip .wp-block-button__link {
		font-size: 15px !important;
		padding-top: 14px !important;
		padding-bottom: 14px !important;
	}

	/* L2 — CTA-band side gutter so grid-stretched buttons (Batch H)
	   never touch viewport edges. 24px matches cta-strip + global
	   mobile container convention. Heading + body p already
	   margin-inline:auto so they re-center inside the 327px box. */
	.iid-cta-band {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* =========================================================
   BATCH N — About methodology mobile internal-scroll box (v1.23.38)
   NEW mobile-only behavior: the 3 methodology steps (01 Information /
   02 Intelligence / 03 Data) live inside a fixed-height container
   with internal scroll. Desktop is unchanged (sticky-image LEFT +
   page-scroll RIGHT + IO opacity dimming).
   - Wraps only the existing <ol class="iid-about-methodology__steps">
     so the section header (eyebrow + H2 + intro) and the media image
     stay in normal page flow above the scroll box.
   - max-height min(70vh, 500px): partial-reveal of step 2 acts as the
     "more below — scroll" affordance. Capped at 500px so very tall
     phones don't end up with a near-full-page internal box.
   - Touch UX: -webkit-overflow-scrolling: touch (iOS momentum legacy)
     + touch-action: pan-y (explicit vertical pan).
   - Scrollbar always visible (iOS hides by default) via thin scrollbar
     hint + 4px webkit thumb styling.
   - NO overscroll-behavior: contain — default (auto) lets touch scroll
     chain naturally to the page when the box hits its boundary, so the
     user never gets trapped.
   - Batch E1 (.iid-about-methodology__content padding-bottom: 0)
     stays unchanged — compatible: internal-scroll wrapper sits inside
     the content column, the column's padding-bottom is irrelevant.
   ========================================================= */
@media (max-width: 767px) {

	.iid-about-methodology__steps {
		max-height: min(70vh, 500px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		scrollbar-width: thin;                         /* Firefox affordance */
		scrollbar-color: rgba(32, 40, 45, 0.4) transparent;
	}

	.iid-about-methodology__steps::-webkit-scrollbar {
		width: 4px;
		-webkit-appearance: none;
	}

	.iid-about-methodology__steps::-webkit-scrollbar-thumb {
		background: rgba(32, 40, 45, 0.4);
		border-radius: 2px;
	}
}

/* ─────────────────────────────────────────────────────────────
   v1.23.39 — §4 Process Timeline long-label hardening
   Scoped to step #04 ("Automated Metadata Extraction (AI/OCR)")
   only — applying anywhere-break globally caused #08 ("DMS/
   Migration") to break mid-word at desktop ≥1280. Step #04 is
   the single label that can't fit a grid column on its own and
   genuinely needs the anywhere-break.
   ───────────────────────────────────────────────────────────── */
.iid-service-process-timeline .iid-service-process-timeline__step:nth-child(4) .iid-service-process-timeline__title { overflow-wrap: anywhere; }
.iid-service-process-timeline .iid-service-process-timeline__step:nth-child(4) > * { min-width: 0; }

/* =========================================================
   BATCH O — Mobile menu fixes (v1.23.40)
   Scoped to (max-width: 1023px). Pure CSS — no render.php,
   no template-part, no JS, no Bucket C touched.

   #1 + #2 share one root cause: the wp:navigation UL renders
   with align-items: flex-start inside the flex-column mobile
   menu. Without an explicit width, the UL shrinks to widest-
   child width (≈144px) → dividers are inset, and expanding a
   has-child injects longer submenu content that pushes the UL
   out to 327px, pulling siblings + chevron rightward. Forcing
   100% width + stretch on UL/lis/submenus keeps geometry flat
   in both collapsed and expanded state.

   #3 unifies row hover (label + chevron share teal) on
   hover-capable devices only; the existing @media (hover:none)
   neutralizer (Batch J3b) still owns the touch path.

   #4 locks the color model: white default + sub-items +
   :visited + current-menu-*; teal only when the parent row
   is .is-expanded or :hover. No grey state exists anywhere.
   ========================================================= */
@media (max-width: 1023px) {

	/* O1 + O2 — Full inner width on UL + every top-level li +
	   submenu container. !important to win over WP core
	   navigation block CSS that sets fit-content / flex-start.
	   Result: top-level li computed width = 327px (matches the
	   logo+X header row) in BOTH collapsed and expanded state. */
	.iid-mobile-nav,
	.iid-mobile-nav > .wp-block-navigation__container {
		width: 100% !important;
		align-items: stretch !important;
	}
	.iid-mobile-nav > .wp-block-navigation__container > li {
		width: 100% !important;
	}
	.iid-mobile-nav .wp-block-navigation__submenu-container {
		width: 100% !important;
	}

	/* O4a — White baseline for every top-level navigation item.
	   Covers default, :visited, current-menu-item / -ancestor /
	   -parent + WP's [aria-current="page"]. Specificity 0,3,0
	   beats the source baseline (0,2,0 at line 1955). */
	.iid-mobile-nav .wp-block-navigation-item > .wp-block-navigation-item__content,
	.iid-mobile-nav .wp-block-navigation-item > .wp-block-navigation-item__content:visited,
	.iid-mobile-nav .current-menu-item > .wp-block-navigation-item__content,
	.iid-mobile-nav .current-menu-ancestor > .wp-block-navigation-item__content,
	.iid-mobile-nav .current-menu-parent > .wp-block-navigation-item__content,
	.iid-mobile-nav [aria-current="page"] {
		color: #fff;
	}

	/* O4b — Sub-items always white, regardless of state. */
	.iid-mobile-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.iid-mobile-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:visited,
	.iid-mobile-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		color: #fff;
	}

	/* O4c — Chevron baseline matches its label (white). */
	.iid-mobile-nav .has-child > .wp-block-navigation__submenu-icon {
		color: #fff;
	}

	/* O4d — Expanded parent: label + chevron go teal together.
	   Specificity 0,4,0 wins over the white baseline above. */
	.iid-mobile-nav .has-child.is-expanded > .wp-block-navigation-item__content,
	.iid-mobile-nav .has-child.is-expanded > .wp-block-navigation__submenu-icon {
		color: #2FA4A9;
	}

	/* O3 — Unified row hover (hover-capable devices only).
	   The chevron is a sibling of the parent <a>, so we paint
	   both via li:hover. Touch devices are covered by the
	   existing @media (hover: none) neutralizer in Batch J3b. */
	@media (hover: hover) {
		.iid-mobile-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
		.iid-mobile-nav .has-child:hover > .wp-block-navigation__submenu-icon {
			color: #2FA4A9;
		}
	}
}

/* =========================================================
   BATCH P — Homepage mobile (v1.23.41)
   Scoped to (max-width: 767px). Pure CSS overrides.
   #5 unify the 5 homepage section H2s to 40px.
   #6 force the §10 Insights 1st + 3rd cards into the navy
      "active" look that desktop reveals on hover, so the
      stacked mobile column reads as alternating navy/white.
   ========================================================= */
@media (max-width: 767px) {

	/* P5 — Section titles → 40px (§3 already ~41 fluid; the
	   others get bumped/trimmed). §10 source uses !important
	   (style.css:1989) so this override also needs it. */
	.iid-about-section__h2,
	.iid-solutions-section__heading,
	.iid-industry-section__heading,
	.iid-cert-section__heading {
		font-size: 40px;
	}
	.iid-insights__heading {
		font-size: 40px !important;
	}

	/* P6 — §10 Insights cards: 1st + 3rd permanently in the
	   navy "active" state on mobile. Scoped to the homepage
	   grid (.iid-insights-grid-col → only the homepage layout
	   renders this column; the "related" layout uses a
	   different .iid-insights-related-grid wrapper). Mirrors
	   the existing hover rules at style.css:1775-1793. */
	.iid-insights-grid-col .wp-block-post-template > li:nth-child(1) .iid-insight-card,
	.iid-insights-grid-col .wp-block-post-template > li:nth-child(3) .iid-insight-card {
		background: var( --wp--preset--color--primary-500, #00256b );
	}
	.iid-insights-grid-col .wp-block-post-template > li:nth-child(1) .iid-insight-card .wp-block-post-date,
	.iid-insights-grid-col .wp-block-post-template > li:nth-child(1) .iid-insight-card .iid-insight-chip,
	.iid-insights-grid-col .wp-block-post-template > li:nth-child(1) .iid-insight-card .wp-block-post-title,
	.iid-insights-grid-col .wp-block-post-template > li:nth-child(3) .iid-insight-card .wp-block-post-date,
	.iid-insights-grid-col .wp-block-post-template > li:nth-child(3) .iid-insight-card .iid-insight-chip,
	.iid-insights-grid-col .wp-block-post-template > li:nth-child(3) .iid-insight-card .wp-block-post-title {
		color: #fff !important;
	}
	.iid-insights-grid-col .wp-block-post-template > li:nth-child(1) .iid-insight-card .iid-insight-card__arrow,
	.iid-insights-grid-col .wp-block-post-template > li:nth-child(3) .iid-insight-card .iid-insight-card__arrow {
		opacity: 1;
	}
}