/*
Theme Name: THREAD Connected Marketing
Theme URI: https://wearerudder.com
Author: Rudder
Author URI: https://wearerudder.com
Description: Custom full-site-editing block theme for THREAD Connected Marketing, built from the Adobe XD design.
Version: 0.2.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thread
*/

/* Block theme styles live primarily in theme.json.
   Use this file only for the few things theme.json can't express yet. */

/* Top-level page sections carry their own padding, so they butt together
   edge-to-edge — remove the default root block gap between them, and the
   same gap at the template root (header / main / footer). */
.wp-block-post-content > * + * { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Dotted-grid brand motif (recreated in CSS so it scales and takes theme colors).
   Size the element with width/height to control how many dots show. */
.thread-dots {
	--dot-color: rgba(255, 255, 255, 0.9);
	--dot-gap: 16px;
	--dot-radius: 1.1px;
	background-image: radial-gradient(var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 0.5px));
	background-size: var(--dot-gap) var(--dot-gap);
	/* Dots sit centered in each tile from the origin, so a box sized to an
	   exact multiple of --dot-gap shows only full dots — no clipped rows. */
	background-position: 0 0;
	pointer-events: none;
}
.thread-dots.is-gray   { --dot-color: #d4d4d4; }
.thread-dots.is-orange { --dot-color: var(--wp--preset--color--orange); }

/* Header dots sit at the far right of the orange bar. */
/* The header bar is full-width (so the dots can bleed to the viewport
   edge), but its left padding tracks the content column margin so the
   logo aligns with the page content edge, per the comp. */
.thread-header {
	padding-left: max(var(--wp--preset--spacing--50), calc((100% - 1320px) / 2)) !important;
}

/* Dots sit in the nav flex row and bleed over the header's right padding
   so the grid is flush with the viewport edge. */
.thread-header-dots {
	flex: 0 0 auto;
	width: 176px;  /* 11 cols × 16px */
	height: 64px;  /* 4 rows × 16px */
	transform: translateX(var(--wp--preset--spacing--50));
}
/* The dots ride along until the header switches to its mobile layout. */
@media (max-width: 1200px) { .thread-header-dots { display: none; } }

/* Open overlay menu: brand orange sheet with large condensed links.
   The 40px overline treatment carries over (static on the current page,
   animating in on hover), scaled up a touch for the larger type. */
.thread-header-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}
.thread-header-nav .wp-block-navigation__responsive-container.is-menu-open a::before {
	top: -0.35em;
}
.thread-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--button);
}
.thread-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--50);
}

/* Switch to the mobile (hamburger) header at 1200px instead of core's
   600px default: hide the inline menu, show the overlay toggle. */
@media (min-width: 600px) and (max-width: 1200px) {
	.thread-header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.thread-header-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/* Core's mobile menu toggle icon is two bars — the classic hamburger is
   three (client feedback 2026-08-28). Hide the SVG, draw three bars in
   currentColor so it stays white on the orange header. */
.thread-header-nav .wp-block-navigation__responsive-container-open svg { display: none; }
.thread-header-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 24px;
	height: 18px;
	background:
		linear-gradient(currentColor, currentColor) 0 0    / 24px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 8px  / 24px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 16px / 24px 2px no-repeat;
}

/* No single-word last lines in running text (client feedback 2026-08-26:
   "goal" widow in Judy's bio). Applies wherever paragraphs wrap. */
.wp-block-post-content p { text-wrap: pretty; }

/* Section eyebrow: short tick line above the big condensed section word.
   Client feedback 2026-08-26: the line hugs the word (the heading's own
   leading was pushing them apart), and a paragraph column beside the
   heading aligns to the word, not the line. */
.thread-eyebrow {
	display: inline-block;
	width: 64px;
	height: 3px;
	background: var(--wp--preset--color--muted);
	margin: 0 0 10px;
}
.thread-eyebrow + h1, .thread-eyebrow + h2, .thread-eyebrow + h3 { margin-top: -0.18em; }
@media (min-width: 782px) {
	.wp-block-columns:has(.thread-eyebrow) > .wp-block-column:not(:first-child) { padding-top: 34px; }
}
.thread-eyebrow.is-orange { background: var(--wp--preset--color--orange); }

/* Client logo wall — uniform, muted, hover to full opacity. */
.thread-logo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem 3rem;
	align-items: center;
}
@media (max-width: 900px) { .thread-logo-grid { grid-template-columns: repeat(2, 1fr); } }
.thread-logo-grid figure { margin: 0; }
.thread-logo-grid img {
	width: 100%;
	height: 90px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: opacity 0.2s ease, filter 0.2s ease;
}
.thread-logo-grid img:hover { filter: grayscale(0); opacity: 1; }

/* Experience: one flex row of client logos per industry section.
   Four-logo rows stretch across the content width like the XD design;
   shorter rows center. */
.thread-logo-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem 3rem;
}
.thread-logo-row.is-centered { justify-content: center; gap: 2rem 7rem; }
.thread-logo-row figure { margin: 0; }
.thread-logo-row img { display: block; max-width: 100%; height: auto; }
@media (max-width: 900px) {
	.thread-logo-row, .thread-logo-row.is-centered { justify-content: center; gap: 2rem 3rem; }
}

/* Experience logo strip carousel: slides of logos, thin arrows OUTSIDE
   the content column (per comp). Arrows only appear once the carousel
   script is live; without JS the first slide shows statically. */
.thread-strip { position: relative; }
.thread-strip-slide { display: none; }
.thread-strip-slide.is-active { display: flex; animation: thread-slide-fade 0.35s ease; }
@keyframes thread-slide-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.thread-strip-slide.is-active { animation: none; }
}
.thread-strip-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin: 0; /* the layout flow gap would push the second arrow 24px lower */
	background: none;
	border: 0;
	padding: 0.5rem;
	line-height: 0;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: none;
	transition: color 0.15s ease;
}
.thread-carousel-ready .thread-strip-arrow { display: block; }
.thread-strip-arrow:hover { color: var(--wp--preset--color--orange); }
.thread-strip-arrow.is-prev { left: -80px; }
.thread-strip-arrow.is-next { right: -80px; }
.thread-strip-arrow svg { display: block; }
@media (max-width: 1479px) {
	.thread-strip-arrow.is-prev { left: -36px; }
	.thread-strip-arrow.is-next { right: -36px; }
}
@media (max-width: 781px) { .thread-strip-arrow { display: none !important; } }

/* Industry section label (MANUFACTURING, HEALTHCARE, …). */
.thread-industry-label {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 200;
	font-size: 1.875rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.02em;
}

/* THREAD INSIGHTS teaser cards. */
.thread-readmore {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 900;
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted) !important;
	text-decoration: none;
}
.thread-readmore:hover { color: var(--wp--preset--color--orange) !important; }

/* Outlined LOAD MORE button. */
.thread-btn-outline {
	display: inline-block;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 300;
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	border: 1px solid #707070;
	padding: 0.35em 1.6em;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.thread-btn-outline:hover {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Header chrome                                                        */
/* ------------------------------------------------------------------ */

/* Logo anchor: kill the inline line box so header height = padding + image. */
.thread-logo { display: block; line-height: 0; }
.thread-logo img { display: block; }

/* Nav renders Oswald Regular 20px uppercase via theme.json
   styles.blocks.core/navigation. These rules add the interaction states
   the comp shows: subtle hover + the short white overline on the current
   page (core adds aria-current="page" to the matching navigation-link). */
.thread-header-nav .wp-block-navigation__container { column-gap: var(--wp--preset--spacing--50); }
.thread-header-nav .wp-block-navigation a {
	position: relative;
	text-decoration: none;
	transition: color 0.15s ease;
	padding: 0.15em 0;
}
/* Short 40px overline: static on the current page, animates in left-to-right
   on hover of any nav item. */
.thread-header-nav .wp-block-navigation a::before {
	content: "";
	position: absolute;
	left: 0;
	top: -0.6em;
	width: 40px;
	height: 3px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}
.thread-header-nav .wp-block-navigation a:hover::before,
.thread-header-nav .wp-block-navigation a:focus-visible::before,
.thread-header-nav .wp-block-navigation a[aria-current]::before {
	transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
	.thread-header-nav .wp-block-navigation a::before { transition: none; }
}
.thread-header-nav .wp-block-navigation a:hover,
.thread-header-nav .wp-block-navigation a:focus-visible {
	color: #fff;
	text-decoration: none;
	text-decoration-thickness: 1px;
}
.thread-header-nav .wp-block-navigation a[aria-current] { text-decoration: none; }

/* Expandable search magnifier (core button-only search toggles the field).
   The footer carries the same search control (.thread-footer-search). */
.thread-header-search, .thread-footer-search { margin: 0; }
.thread-footer-search .wp-block-search__button {
	background: transparent;
	border: 0;
	color: #fff;
	padding: 0.2em;
	min-width: 0;
	cursor: pointer;
}
.thread-footer-search .wp-block-search__button svg { width: 26px; height: 26px; fill: #fff; }
.thread-footer-search .wp-block-search__button:hover svg { fill: #fff; opacity: 0.75; }
.thread-footer-search .wp-block-search__input {
	border: 0;
	border-bottom: 1px solid #fff;
	background: transparent;
	color: #fff;
	border-radius: 0;
}
.thread-footer-search .wp-block-search__input::placeholder { color: rgba(255,255,255,0.75); }
.thread-header-search .wp-block-search__button {
	background: transparent;
	border: 0;
	color: #fff;
	padding: 0.2em;
	min-width: 0;
	cursor: pointer;
}
.thread-header-search .wp-block-search__button svg {
	width: 26px;
	height: 26px;
	fill: #fff;
}
/* Keep the search treatment consistent with the rest of the menu — no
   black state on hover (client feedback 2026-08). */
.thread-header-search .wp-block-search__button:hover svg { fill: #fff; opacity: 0.75; }
.thread-header-search .wp-block-search__input {
	border: 0;
	border-bottom: 1px solid #fff;
	background: transparent;
	color: #fff;
	border-radius: 0;
}
.thread-header-search .wp-block-search__input::placeholder { color: rgba(255,255,255,0.75); }

/* ------------------------------------------------------------------ */
/* Footer chrome                                                       */
/* ------------------------------------------------------------------ */

/* Footer: orange address panel (left) + ink nav panel (right).
   Per the comp, the orange panel's dots run in from the LEFT EDGE and sit
   beside the logo, vertically centered on it; the logo/address indent to
   clear them. The ink panel keeps a mirror cluster at the nav row's right. */
.thread-footer-left { position: relative; }
@media (min-width: 1201px) {
	.thread-footer-left { padding-left: 190px !important; }
}
.thread-footer-left-dots {
	position: absolute;
	top: 68px;   /* centers the 4-row grid on the 71px logo below the panel padding */
	left: 0;
	width: 160px;  /* 10 × 16px, edge-to-logo */
	height: 64px;  /* 4 × 16px */
}
.thread-footer-right-dots {
	/* Decorative: shrinks (clipping dot columns) rather than ever pushing
	   the nav onto a second line, now that Blog + Search share the row.
	   Bleeds over the panel's right padding so the grid reaches the
	   viewport edge, per the comp. */
	flex: 0 1 192px;  /* 12 × 16px */
	min-width: 0;
	overflow: hidden;
	width: 192px;
	height: 64px;  /* 4 × 16px */
	margin-left: auto;
	transform: translateX(var(--wp--preset--spacing--60));
}
.thread-footer-navrow { gap: var(--wp--preset--spacing--50); }
/* The footer nav must hold one line beside the dots at every desktop
   width — cap its item gaps below the theme's block gap default.
   nowrap only above the stack breakpoint: forcing it lower gives the
   footer a ~720px minimum width and horizontal scroll on phones. */
.thread-footer-navrow .wp-block-navigation .wp-block-navigation__container { column-gap: 2.25rem; }
@media (min-width: 1201px) {
	.thread-footer-navrow .wp-block-navigation,
	.thread-footer-navrow .wp-block-navigation .wp-block-navigation__container { flex-wrap: nowrap; }
}
.thread-footer-right { min-width: 0; max-width: 100%; }
/* Mid-width relief so the two footer panels never wrap: drop the
   decorative right dots and tighten nav gaps before anything overflows. */
@media (max-width: 1750px) {
	.thread-footer-navrow .wp-block-navigation .wp-block-navigation__container {
		column-gap: var(--wp--preset--spacing--40);
	}
}
/* Footer nav at 22px (subtitle) at every width — client feedback
   2026-08-26. The right dot grid regains width and slides left on its
   own once the nav shrinks (flex row). !important needed to beat core's
   has-large-font-size preset class, which core copies onto the inner
   container element as well. */
.thread-footer-navrow .wp-block-navigation,
.thread-footer-navrow .wp-block-navigation .wp-block-navigation__container,
.thread-footer-navrow .wp-block-navigation .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--subtitle) !important;
}
/* Footer nav renders Oswald 30px uppercase (has-large-font-size + theme.json).
   Same treatment as the header nav: 40px overline on hover/current, never
   orange (client feedback 2026-08). */
.thread-footer-navrow .wp-block-navigation a {
	position: relative;
	text-decoration: none;
	padding: 0.15em 0;
}
.thread-footer-navrow .wp-block-navigation a::before {
	content: "";
	position: absolute;
	left: 0;
	top: -0.45em;
	width: 40px;
	height: 3px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}
.thread-footer-navrow .wp-block-navigation a:hover::before,
.thread-footer-navrow .wp-block-navigation a:focus-visible::before,
.thread-footer-navrow .wp-block-navigation a[aria-current]::before { transform: scaleX(1); }
.thread-footer-navrow .wp-block-navigation a:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.thread-footer-navrow .wp-block-navigation a::before { transition: none; }
}
/* Legal line: inherit color, no underline on PRIVACY POLICY per comp. */
.thread-footer-legal { color: rgba(255,255,255,0.85); }
.thread-footer-legal a { color: inherit; text-decoration: none; }
.thread-footer-legal a:hover { text-decoration: underline; }
/* Stack the footer panels at the same point the header goes mobile, so
   the nav always keeps one line while the panels sit side by side. */
@media (max-width: 1200px) {
	.thread-footer { flex-wrap: wrap; }
	.thread-footer-left-dots { display: none; }
	.thread-footer-right-dots { display: none; }
	.thread-footer-navrow { flex-wrap: wrap; }
	.thread-footer .thread-footer-left { flex-basis: 100% !important; }
}

/* Scroll reveal: rows of logos fade up quickly on first arrival.
   Hiding only applies once scroll-reveal.js has added html.thread-js,
   so no-JS visitors (and reduced-motion users) always see the content. */
html.thread-js .thread-will-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
html.thread-js .thread-will-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Services accordion via core/details. */
.thread-accordion .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1.1rem 0;
}
.thread-accordion .wp-block-details summary {
	font-family: var(--wp--preset--font-family--condensed);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
}
.thread-accordion .wp-block-details summary::-webkit-details-marker { display: none; }
.thread-accordion .wp-block-details summary::before { content: "+"; color: var(--wp--preset--color--orange); margin-right: 0.6rem; font-weight: 400; }
.thread-accordion .wp-block-details[open] summary::before { content: "\2013"; }

/* Contact form fields (styled to match the XD outlined inputs). */
.thread-form input,
.thread-form textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--line);
	background: #fff;
	padding: 1rem 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	margin-bottom: 1rem;
}
.thread-form input::placeholder,
.thread-form textarea::placeholder { color: var(--wp--preset--color--muted); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.9rem; }
.thread-form input:focus,
.thread-form textarea:focus { outline: none; border-color: var(--wp--preset--color--orange); }
.thread-form button {
	font-family: var(--wp--preset--font-family--condensed);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--wp--preset--color--orange);
	color: #fff;
	border: 0;
	padding: 0.9rem 2.5rem;
	font-size: 1.1rem;
	cursor: pointer;
}
.thread-form button:hover { background: var(--wp--preset--color--orange-dark); }

/* ------------------------------------------------------------------ */
/* About page                                                          */
/* ------------------------------------------------------------------ */

/* Awards banner (orange award icon + trophy-wall photo composite). */
.thread-award-banner img { display: block; width: 100%; height: auto; }

/* "Leading brands to succeed." award panel. */
.thread-award-headline {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
	font-size: 2.25rem;
	line-height: 1.05;
	margin: 0 0 1.25rem;
}
.thread-award-tagline {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
	font-size: 1.25rem;
	line-height: 1.55;
	letter-spacing: 0.14em;
	margin: 0;
}
.thread-award-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.thread-award-list li {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
	font-size: 1.2rem;
	letter-spacing: 0.02em;
	line-height: 1.3;
	position: relative;
	padding-left: 1.15em;
	margin: 0 0 1.4rem;
}
.thread-award-list li:last-child { margin-bottom: 0; }
.thread-award-list li::before {
	content: "\2022";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--charcoal);
}

/* Leadership bios. */
.thread-leader-photo img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
}
.thread-leader-dots {
	width: 100%;
	max-width: 528px;  /* 33 × 16px */
	height: 80px;      /* 5 × 16px */
	margin-bottom: 1.75rem;
}
.thread-leader-name {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
	font-size: 2.5rem;
	line-height: 1.02;
	margin: 0 0 0.7rem;
	padding-bottom: 0.55rem;
	position: relative;
}
.thread-leader-name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 150px;
	height: 3px;
	background: var(--wp--preset--color--orange);
}
.thread-leader-role {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 500;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
	font-size: 1.25rem;
	letter-spacing: 0.2em;
	margin: 0 0 1.5rem;
}

/* Social icons: solid black glyphs (source PNG is #4A4B4D), sized per comp. */
.thread-social-icons img { display: block; width: 160px; height: auto; filter: brightness(0); }

/* ================================================================== */
/* P2-A: Experience + Strengths sections (owned by phase-2 agent A)   */
/* ================================================================== */

/* Experience: each industry section is a four-logo row. Render it as an
   aligned 4-column grid (overriding the base .thread-logo-row flex) so the
   columns line up row-to-row, with the first column at the content edge and
   logos vertically centered. */
.thread-logo-row.thread-grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem 3rem;
	align-items: center;
	justify-items: center;
}
.thread-logo-row.thread-grid4 figure { margin: 0; display: flex; align-items: center; }
.thread-logo-row.thread-grid4 img { max-width: 100%; height: auto; }
/* Logo sizes are balanced per-logo in the page content (equal visual
   mass computed from each mark's ink area and density — Ryan feedback
   2026-08-28), so no blanket height cap here. */
.thread-industry-label { line-height: 1.1; }
@media (max-width: 900px) {
	.thread-logo-row.thread-grid4 { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; }
}

/* Strengths: category rows in the left column of the results montage. */
.thread-strength-arrow {
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp--preset--color--carbon);
	margin: 0 0 0.4rem;
}
.thread-strength-cat { margin-bottom: 1.25rem; }
.thread-strength-cat:last-child { margin-bottom: 0; }
/* Tight internal rhythm per the comp — the flow gap makes these too airy. */
.thread-strength-cat > * + * { margin-block-start: 0.2rem !important; }
.thread-strength-cat .thread-strength-heading { margin-block-start: 0.2rem !important; }
.thread-strength-cat p { line-height: 1.3 !important; } /* beats inline block attr */
.thread-case-link {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0.2rem 0 0.6rem;
}
.thread-case-link a { color: var(--wp--preset--color--carbon); text-decoration: underline; }
.thread-case-link a:hover { color: var(--wp--preset--color--orange); }

/* Strengths results montage: right-column image stack. Stretch to the
   full row height and distribute the image rows so the montage runs
   alongside all five categories. */
.thread-montage {
	align-self: stretch !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.thread-montage figure { margin: 0; }
.thread-montage img { display: block; width: 100%; height: auto; }
/* Bottom pair crops near-square like the comp, filling the column height. */
.thread-montage > .wp-block-columns:last-of-type img {
	aspect-ratio: 1 / 0.95;
	object-fit: cover;
}
/* P2-A-END */

/* ================================================================== */
/* P2-B: Connect form + Services accordion (owned by phase-2 agent B) */
/* ================================================================== */

/* ---- Connect page: contact info block ---------------------------- */
.thread-contact-name {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--button);
	line-height: 1.1;
	margin: 0 0 1.6rem;
}
.thread-contact-lines {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--subtitle);
	line-height: 2.2;
	letter-spacing: 0.01em;
	margin: 0;
}

/* ---- Connect page: single-column contact form -------------------- */
.thread-contact-form { width: 100%; }
.thread-contact-form .thread-field {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border: 1px solid #707070;
	background: #fff;
	padding: 0.9rem 1.5rem;
	margin-bottom: 1.75rem;
}
.thread-contact-form .thread-field--sm { height: 82px; }
.thread-contact-form .thread-field--lg { height: 521px; }
.thread-contact-form .thread-field__label {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 300;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
}
.thread-contact-form .thread-field__input {
	flex: 1 1 auto;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0.35rem 0 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
	resize: none;
}
.thread-contact-form .thread-field__input:focus { outline: none; }

/* Button / action row directly under the message box. */
.thread-contact-form .thread-form__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin-top: 0.25rem;
}
.thread-contact-form .thread-actions-left,
.thread-contact-form .thread-actions-right {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}
.thread-contact-form .thread-submit,
.thread-contact-form .thread-help-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 2rem;
	border: 0;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: var(--wp--preset--font-size--button);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.thread-contact-form .thread-submit { width: 278px; }
.thread-contact-form .thread-submit:hover,
.thread-contact-form .thread-help-btn:hover { background: var(--wp--preset--color--orange-dark); }
.thread-contact-form .thread-support-label {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--button);
	line-height: 1;
}

/* Static "protected by reCAPTCHA" badge placeholder. */
.thread-contact-form .thread-recaptcha {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 208px;
	height: 60px;
	padding: 0 0.9rem;
	background: #f9f9f9;
	border: 1px solid #d3d3d3;
	box-shadow: 0 1px 2px rgba(0,0,0,0.08);
	box-sizing: border-box;
}
.thread-contact-form .thread-recaptcha__logo {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 3px solid #1a73e8;
	border-right-color: transparent;
	transform: rotate(45deg);
}
.thread-contact-form .thread-recaptcha__text {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	line-height: 1.25;
	color: #555;
	text-transform: none;
	letter-spacing: 0;
}
.thread-contact-form .thread-recaptcha__fine { color: #9a9a9a; }

@media (max-width: 782px) {
	.thread-contact-form .thread-field--lg { height: 360px; }
	.thread-contact-form .thread-form__actions { flex-direction: column; align-items: stretch; }
	.thread-contact-form .thread-actions-left,
	.thread-contact-form .thread-actions-right { flex-wrap: wrap; }
	.thread-contact-form .thread-submit { width: 100%; }
}

/* ---- Services page: accordion overrides (base rules live above) --- */
.thread-accordion .wp-block-details { padding: 1.25rem 0; }
.thread-accordion .wp-block-details summary {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 200;
}
.thread-accordion .wp-block-details summary::before {
	color: var(--wp--preset--color--ink);
	font-weight: 300;
}
.thread-accordion .wp-block-details[open] summary::before { content: "\00D7"; }
.thread-accordion .wp-block-details p {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--wp--preset--color--body);
	margin: 1rem 0 0;
}
.thread-accordion .wp-block-details ul {
	list-style: none;
	margin: 1rem 0 0.25rem;
	padding: 0;
}
.thread-accordion .wp-block-details li {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.125rem;
	line-height: 1.9;
	color: var(--wp--preset--color--body);
	padding-left: 1.35rem;
	position: relative;
}
.thread-accordion .wp-block-details li::before {
	content: "\2022";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--body);
}

/* Services "at work" photo fills its column to the comp width (~758px). */
.thread-services-photo img { width: 100%; height: auto; }

/* P2-B-END */

/* ================================================================== */
/* P2-C: About + case-study heroes (owned by phase-2 agent C)         */
/* ================================================================== */

/* Leadership bios: constrain the bio column so copy wraps ~500px like
   the comp (photo column keeps its 42% width, leaving slack at right). */
.thread-leader-bio { max-width: 500px; }

/* Leadership dot-grid motif: a touch stronger contrast than the faint
   global gray (needs to out-specify .thread-dots.is-gray). */
.thread-dots.is-gray.thread-leader-dots { --dot-color: #bcbcbc; }

/* P2-C-END */

/* ================================================================== */
/* P4: Client feedback round, 2026-08                                 */
/* ================================================================== */

/* Experience logo ticker: continuous auto-scrolling marquee (replaces
   the paged arrow carousel per client feedback). The track holds two
   identical sets; animating to -50% loops seamlessly. */
.thread-ticker { overflow: hidden; width: 100%; }
.thread-ticker__track {
	display: flex;
	width: max-content;
	animation: thread-ticker-scroll 55s linear infinite;
}
.thread-ticker__set {
	display: flex;
	align-items: center;
	gap: 72px;
	padding-right: 72px;
}
.thread-ticker__set a { display: block; line-height: 0; flex: 0 0 auto; }
.thread-ticker__set img {
	display: block;
	height: 58px;
	width: auto;
	max-width: 250px;
	object-fit: contain;
}
.thread-ticker:hover .thread-ticker__track { animation-play-state: paused; }
/* Still until first scrolled into view (scroll-reveal.js adds is-inview). */
html.thread-js .thread-ticker:not(.is-inview) .thread-ticker__track { animation-play-state: paused; }
@keyframes thread-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.thread-ticker__track { animation: none; }
}
@media (max-width: 781px) {
	.thread-ticker__set { gap: 40px; padding-right: 40px; }
	.thread-ticker__set img { height: 44px; max-width: 190px; }
}

/* Phone number must be present in the mobile footer (client feedback). */
.thread-footer-phone-mobile { display: none; }
@media (max-width: 781px) {
	.thread-footer-phone-mobile { display: block; }
	.thread-footer-phone-mobile a { color: inherit; text-decoration: none; }
}
/* P4-END */

/* THREAD Insights dynamic teaser grid (feed-driven; matches the static
   card design it replaced). */
.thread-insights-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}
@media (max-width: 900px) { .thread-insights-grid { grid-template-columns: 1fr; } }
.thread-insight-card > p:first-child { margin-top: 0; }
.thread-insight-topic {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	line-height: 1.35;
	margin: 0 0 0.75rem;
	min-height: 2.7em; /* two lines, so cards with short topics stay aligned */
}
.thread-insight-date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.thread-insight-image { display: block; line-height: 0; }
.thread-insight-image img { width: 100%; height: 250px; object-fit: cover; display: block; }
.thread-insight-title {
	font-weight: 200;
	font-size: var(--wp--preset--font-size--large);
	margin: var(--wp--preset--spacing--40) 0 0;
}
.thread-insight-title a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
.thread-insight-title a:hover { color: var(--wp--preset--color--orange); }
.thread-insight-excerpt { font-size: var(--wp--preset--font-size--base); line-height: 1.6; }
.thread-insight-card.is-hidden { display: none; }
.thread-insights-loadmore { text-align: center; margin-top: var(--wp--preset--spacing--60); }
.thread-insights-loadmore .thread-btn-outline { cursor: pointer; background: transparent; }
/* The transparent reset above out-specifies the shared :hover rule, so the
   filled hover state must be restated at the same specificity. */
.thread-insights-loadmore .thread-btn-outline:hover {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: #fff;
}

/* Search polish (QA round 2026-08): no default blue focus ring on the
   orange/ink panels, and the magnifier at the comp's ~25px. */
.thread-header-search .wp-block-search__input:focus,
.thread-footer-search .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
	border-bottom: 1px solid #fff;
}
.thread-header-search .wp-block-search__button svg,
.thread-footer-search .wp-block-search__button svg {
	width: 25px !important;
	height: 25px !important;
	min-width: 25px;
}
/* The magnifier svg baseline-aligns high inside the button — flex-center
   it so the icon sits on the nav labels' vertical centerline. */
.thread-header-search .wp-block-search__button,
.thread-footer-search .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Expanded search must not reflow the nav row: the input overlays the
   menu (absolute, anchored at the icon, spreading leftward) and the menu
   fades out while it's open. Core toggles .wp-block-search__searchfield-
   hidden on the block when collapsed. */
.thread-header-search,
.thread-footer-search { position: relative; }
.thread-header-search .wp-block-search__inside-wrapper,
.thread-footer-search .wp-block-search__inside-wrapper { position: static; }
.thread-header-search .wp-block-search__input,
.thread-footer-search .wp-block-search__input {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	width: min(320px, 40vw);
	max-width: none;
	margin: 0;
	z-index: 5;
}
.thread-header-search.wp-block-search__searchfield-hidden .wp-block-search__input,
.thread-footer-search.wp-block-search__searchfield-hidden .wp-block-search__input { display: none; }
.thread-header-nav .wp-block-navigation,
.thread-footer-navrow .wp-block-navigation { transition: opacity 0.2s ease; }
.thread-header-nav:has(.thread-header-search:not(.wp-block-search__searchfield-hidden)) .wp-block-navigation,
.thread-footer-navrow:has(.thread-footer-search:not(.wp-block-search__searchfield-hidden)) .wp-block-navigation {
	opacity: 0;
	pointer-events: none;
}

/* About "Get Social" icons: flat charcoal glyphs per comp, larger than
   the core default (the block carries .thread-social-icons). */
.thread-social-icons .wp-block-social-link { color: var(--wp--preset--color--ink) !important; }
.thread-social-icons .wp-block-social-link svg { width: 44px; height: 44px; }
.thread-social-icons { gap: 30px !important; }

/* The ticker bleeds over its section's inline padding to the viewport
   edges; the section keeps normal padding so its heading aligns with the
   content column on all viewports. */
.thread-ticker {
	margin-left: calc(-1 * var(--wp--preset--spacing--50));
	margin-right: calc(-1 * var(--wp--preset--spacing--50));
	width: auto;
}