/**
 * Support styles for the JS-driven mobile menu + dropdown.
 *
 * These replace behaviour that the Webflow runtime handled at runtime (it
 * relocated the open menu out of the dark navbar so it rendered dark text on
 * the light panel). We toggle the menu in place instead, so we restore the
 * intended legible colour here. Layout/appearance still come entirely from the
 * original Webflow stylesheets.
 */
@media screen and ( max-width: 991px ) {
	.navbar2_menu.w-nav-menu[data-nav-menu-open],
	.navbar2_menu.w-nav-menu[data-nav-menu-open] a,
	.navbar2_menu.w-nav-menu[data-nav-menu-open] .navbar2_dropdwn-toggle,
	.navbar2_menu.w-nav-menu[data-nav-menu-open] .navbar2_dropdown-link {
		color: var( --color-scheme-1--text );
	}
}

/* Editable Services page: restore the 1rem gap between standalone service rows. */
.services-item-wrapper + .services-item-wrapper { margin-top: 1rem; }

/* Native gallery blocks on service pages: constrained, uniform 3-col grid
   (overrides the core flex layout so images form even portfolio tiles). */
.woo-gallery.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 0.75rem;
	max-width: 80rem;
	margin: 0 auto;
	padding: 3rem 1.5rem 5rem;
}

.woo-gallery.wp-block-gallery .wp-block-image {
	margin: 0;
	width: auto;
}

.woo-gallery.wp-block-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media screen and ( max-width: 991px ) {
	.woo-gallery.wp-block-gallery { grid-template-columns: repeat( 2, 1fr ); }
}

@media screen and ( max-width: 600px ) {
	.woo-gallery.wp-block-gallery { grid-template-columns: 1fr; }
}

/* Service row heading: restore the arrow icon (was an inline SVG in the export). */
.heading-serv-ces-card { display: flex; align-items: center; gap: 1.5rem; }
.heading-serv-ces-card a { color: inherit; text-decoration: none; }
.heading-serv-ces-card::after {
	content: "";
	flex: none;
	width: 42px;
	height: 6px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 6'%3E%3Cpath d='M36.538 2.552H0' stroke='black'/%3E%3Cpath d='M42.0002 2.552L34.9882 0C34.9882 0 36.5382 2.552 34.9882 5.104L42.0002 2.552Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 6'%3E%3Cpath d='M36.538 2.552H0' stroke='black'/%3E%3Cpath d='M42.0002 2.552L34.9882 0C34.9882 0 36.5382 2.552 34.9882 5.104L42.0002 2.552Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Native wp:image carries the Webflow class on the <figure>; make the image fill its wrapper. */
.portfolio-header2_image-wrapper .wp-block-image,
.portfolio-header2_image-wrapper .wp-block-image img { margin: 0; width: 100%; height: 100%; display: block; }
.portfolio-header2_image-wrapper .wp-block-image img { object-fit: cover; }

/* About / "visual processors" section: solid dark background + the Woo
   watermark as a contained background image, positioned bottom-right
   (mirrors the Webflow .header54_background-image object-position: 100% 100%). */
.section_about {
	background-color: #212121;
	background-image: url( "../images/logo-bg.png" );
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: auto 100%;
}

/* Services page rows: white text on the dark-black rows. */
.services-item-wrapper { color: #ffffff; }

/* Spacing the removed Webflow spacer divs used to provide (kept out of the
   markup so the editor stays free of empty Group blocks). */
.featured-card_title { margin-bottom: 0.35rem; }                          /* spacer-xxtinhy */
.featured_item { height: 100%; }                                          /* cards fill the grid row */
.layout72_content-left p + p { margin-top: 0.25rem; }                     /* spacer-tiny  */
.header54_component .max-width-large p + p { margin-top: 1.5rem; }        /* spacer-small */
.portfolio-header2_component .max-width-large p { margin-top: 0.25rem; }  /* spacer-tiny  */

/* Bento gallery: WP core Group "Grid" layout (columnCount) + per-tile
   columnSpan/rowSpan. Core can't set grid-auto-rows / fill, so do it here. */
.woo-bento {
	grid-auto-rows: 13rem;
	grid-auto-flow: row dense;
	gap: 0.75rem;
	/* keep the grid inside the same container as the rest of the content */
	max-width: 80rem;
	margin-inline: auto;
	box-sizing: border-box;
}
/* Tiles fill their whole grid cell. */
.woo-bento .wp-block-image {
	height: 100%;
	width: 100%;
	margin: 0;
	align-self: stretch;
}
.woo-bento .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media screen and ( max-width: 991px ) {
	.woo-bento { grid-auto-rows: 11rem; }
}
@media screen and ( max-width: 600px ) {
	.woo-bento { grid-template-columns: repeat( 2, 1fr ) !important; grid-auto-rows: 9rem; }
	.woo-bento > * { grid-column: span 1 !important; grid-row: span 1 !important; }
}

/* Bento grid nested in a column (e.g. About page) fills the column. */
.wp-block-column .woo-bento { max-width: none; margin: 0; }

/* ---- Split hero header (home + service sub-pages) ----------------------
   Full-bleed image on the left, content on the right — mirrors the Webflow
   .header_work_component grid (object-fit:cover image, min-height 30rem). */
.woo-split-header { align-items: stretch; margin-top: 0; margin-bottom: 0; }
.woo-split-header > .woo-split-media { padding: 0; }
.woo-split-media .wp-block-image { margin: 0; height: 100%; display: flex; }
.woo-split-media .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 30rem;
	max-height: 60rem;
	display: block;
}
.woo-split-content { padding-block: 2rem; padding-inline: clamp( 1.5rem, 4vw, 4.5rem ); }
.woo-split-content > * { max-width: 24rem; }
@media screen and ( max-width: 781px ) {
	.woo-split-header { display: flex; flex-direction: column; }
	.woo-split-media .wp-block-image img { min-height: 16rem; max-height: 26rem; }
	.woo-split-content > * { max-width: none; }
}

/* ---- Home about: text (60%) + logo badge (40%) + "Woo" watermark.
   Same background treatment as the services .section_about. */
.woo-about {
	position: relative;
	overflow: hidden;
	background-image: url( "../images/logo-bg.png" );
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: auto 100%;
}
.woo-about .woo-about-grid { position: relative; z-index: 1; }
.woo-about-badge { margin: 0; }
.woo-about-badge img { max-width: 240px; height: auto; }
@media screen and ( max-width: 781px ) {
	.woo-about { background-size: auto 55%; }
	.woo-about-badge img { max-width: 160px; margin-top: 2rem; }
}

/* ---- About page info rows: label (left) | value(s) (right) grid -------- */
/* Mirrors the Webflow content23 metatag list: the LIST owns the single top
   border; each ROW owns a bottom border; row = [label .75fr | value 1fr] grid,
   zero gap, padding .5/1rem; values are tight (line-height 1.1). */
.woo-info-list { border-top: 2px solid var( --wp--preset--color--contrast ); }
.woo-info-row {
	display: grid;
	grid-template-columns: 0.75fr 1fr;
	column-gap: 0;
	row-gap: 0;
	place-items: start stretch;
	border-bottom: 2px solid var( --wp--preset--color--contrast );
	padding-top: 0.5rem;
	padding-bottom: 1rem;
}
.woo-info-row > * { margin: 0; }
.woo-info-row > .woo-info-label { grid-column: 1; grid-row: 1; }
.woo-info-row > .woo-info-value {
	grid-column: 2;
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: 1rem;
}
.woo-info-row > .woo-info-value:last-child { margin-bottom: 0; }
@media screen and ( max-width: 600px ) {
	.woo-info-row { grid-template-columns: 1fr; }
	.woo-info-row > .woo-info-label,
	.woo-info-row > .woo-info-value { grid-column: 1; }
	.woo-info-row > .woo-info-label { margin-bottom: 0.4rem; }
}
/* Single-project (case study) info labels: uppercase, matching About
   (the source "deliverables" label is lower-case in the export). */
.heading-table-work { text-transform: uppercase; }

/* ---- Flush 2-col project grid (About left column + single-project page):
   zero gap, images cover their cell — mirrors Webflow .grid-work-2-col. ---- */
.woo-project-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}
.woo-project-grid > * { margin: 0; }
.woo-project-grid .wp-block-image { margin: 0; height: 100%; }
.woo-project-grid .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Contact form: the submit <button> matches the Webflow link button. */
.contact9_form button.button {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
}
.contact9_form button.button[disabled] { opacity: 0.6; cursor: default; }

/* ---- Remove WordPress's blockGap auto-margins (theme.json blockGap:1.5rem).
   WP stamps `margin-block-start:1.5rem` onto every non-first child of
   .wp-site-blocks and of any .is-layout-flow container. We space everything
   explicitly, so neutralize both globally (higher specificity than WP's
   zero-specificity :where() rules). Spots that relied on the default gap get
   explicit spacing added back below. */
.wp-site-blocks > * { margin-block-start: 0; }
:root .is-layout-flow > * { margin-block-start: 0; }

/* ---- Work page: remove all padding/margin in the portfolio component, and
   the grid's 12px gap, so the tiles sit flush (like the other project grids).
   The images must also fill the full cell width (they were only ~78% wide,
   leaving white gaps), so make the link + image stretch and cover the cell. */
.work_portfolio_component { margin: 0; padding: 0; }
.work_portfolio_component .work-grid-4-col { grid-column-gap: 0; grid-row-gap: 0; gap: 0; }
.work_portfolio_component .portfolio_image-item { display: block; }
.work_portfolio_component .portfolio_image-item .w-inline-block { display: block; width: 100%; }
.work_portfolio_component .portfolio_image { display: block; width: 100%; height: auto; }