/* Wykes Law — project styles. Hand-written; never regenerated by the scaffolder.
 *
 * Every rule is scoped under .wykes-pc (Partners Carousel) or .wykes-pp (Partner
 * Profile). Nothing here selects a bare element, a theme class or an Elementor class,
 * so the five built pages cannot be reached by this file.
 *
 * Numbers come from the measured Individual Partner document, not from a redraw:
 * card 464, portrait 457, badge inset 17, block padding 32/24, block gap 24, column
 * gap 146, right column 830, chip row gap 12. The carousel reuses the homepage team
 * band's numbers: card 464, gap 24, card gap 16, text gap 8, name/role gap 2,
 * badge inset 16.
 */

/* ============================================================ shared: portrait */

.wykes-pc__frame,
.wykes-pp__frame {
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* Two classes, not one, and deliberately so: Elementor's frontend ships
 * `.elementor img { height: auto }` at (0,1,1), which outranks a single-class rule
 * and beat `height: 100%` here. Measured inside an Elementor document the portrait
 * fell back to its intrinsic square and overflowed the frame by 5px, silently
 * clipped by overflow: hidden. (0,2,0) wins. */
.wykes-pc__frame .wykes-pc__portrait,
.wykes-pp__frame .wykes-pp__portrait {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	/* INVERTED AT THE CLIENT'S REQUEST. Figma specifies the DESATURATED state at
	 * rest (a white overlay at mix-blend-mode: saturation), and the homepage band
	 * shipped that way with Elementor's css_filters_saturate:0. The client asked for
	 * full colour at rest and greyscale on hover, so this is a deliberate departure
	 * from the design, not a match to it. saturate(1) rather than `none` so the two
	 * states are the same property and the transition interpolates. */
	filter: saturate(1);
	transition: filter .2s ease;
}

/* The desaturation applies with the card, not with the image: a hover on the name
 * must grey the portrait too, because the whole card is one target. */
.wykes-pc__card:hover .wykes-pc__portrait { filter: saturate(0); }

/* The inversion is the CAROUSEL card's, which is where the hover lives. The profile
 * page's single portrait has no hover state at all, so flipping the shared base rule
 * would have turned it colour permanently — a change nobody asked for. It keeps the
 * Figma rest state. */
.wykes-pp__frame .wykes-pp__portrait { filter: saturate(0); }

@media (prefers-reduced-motion: reduce) {
	.wykes-pc__frame .wykes-pc__portrait { transition: none; }
}

.wykes-pc__portrait--empty,
.wykes-pp__portrait--empty {
	background: #E6EAF0;
}

.wykes-pc__badge,
.wykes-pp__badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 9px 13px;
	background: #FFFEFE;
	border: 1px solid #B0BECF;
	border-radius: 2px;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #C5A059;
	white-space: nowrap;
}

/* ============================================================ partners carousel */

.wykes-pc {
	--wykes-pc-per: 3;
	--wykes-pc-gap: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.wykes-pc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.wykes-pc__heading {
	margin: 0;
	font-family: "Funnel Display", serif;
	font-weight: 500;
	font-size: 48px;
	line-height: 56px;
	color: #00295C;
}

.wykes-pc__nav {
	display: flex;
	gap: 12px;
	margin-left: auto;
}

/* Two classes deep, and that is load-bearing. hello-elementor ships
 * `[type="button"], button { border: 1px solid #c36; border-radius: 3px; padding:
 * .5rem 1rem; color: #c36 }` — (0,1,0), the same specificity as a single class, from
 * a later stylesheet. It was winning: the chevron rendered as a 54x44 pink-outlined
 * pill on the live homepage. (0,2,0) takes it back. */
.wykes-pc .wykes-pc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: none;
	border: 0;
	border-radius: 2px;
	color: #002D65;   /* deliberately not the gold of the CTA arrow */
	font-size: inherit;
	cursor: pointer;
	transition: opacity .15s ease;
}

.wykes-pc .wykes-pc__btn:focus-visible { outline: 2px solid #C5A059; outline-offset: 2px; }

/* Disabled is not in Figma either. Opacity only: there is no border and no fill left
 * to change, so anything else would be inventing a second visual language. */
.wykes-pc .wykes-pc__btn[aria-disabled="true"] { opacity: .35; cursor: default; }

.wykes-pc__track {
	display: flex;
	flex-direction: row;
	gap: var(--wykes-pc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* The scroller is focusable so a keyboard can page it; hide the bar but keep the
	 * scrolling, which is what the homepage band does. */
	scrollbar-width: none;
}

.wykes-pc__track::-webkit-scrollbar { display: none; }
.wykes-pc__track:focus-visible { outline: 2px solid #C5A059; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
	.wykes-pc__track { scroll-behavior: auto; }
}

.wykes-pc__item {
	flex: 0 0 calc((100% - (var(--wykes-pc-per) - 1) * var(--wykes-pc-gap)) / var(--wykes-pc-per));
	max-width: calc((100% - (var(--wykes-pc-per) - 1) * var(--wykes-pc-gap)) / var(--wykes-pc-per));
	scroll-snap-align: start;
	list-style: none;
	margin: 0;
}

.wykes-pc__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}

.wykes-pc__frame {
	/* 464 / 459, not 464 / 457. aspect-ratio sizes the BORDER box, and the 1px border
	 * is inside it, so 464/457 gives a 462x455 portrait. The homepage team band this
	 * replaces sets the image to a hard 457px inside the same 1px frame, i.e. a 459px
	 * border box. 459 reproduces that exactly and keeps the band height unchanged. */
	aspect-ratio: 464 / 459;
	border: 1px solid #B0BECF;
	border-radius: 2px;
}

/* Carousel only. Figma reads the badge as 161 x 38 with padding 13/9 and a 1px
 * stroke; a Figma frame stroke is drawn INSIDE the bounds, so the 38 already contains
 * it (20 line + 18 padding). CSS puts the border outside the padding box, so the
 * padding has to carry the border's pixel: 8/12 + 1 = 38 tall and text + 26 wide.
 * The profile's badge keeps 9/13 — its frame was not part of this brief and changing
 * it would be a 2px edit to another page nobody asked for.
 *
 * backdrop-filter is in the frame and is kept, even though #FFFEFE is fully opaque
 * and nothing shows through it today: it is what the design says, and it costs a
 * property. If the fill ever gains alpha the blur is already there. */
.wykes-pc__badge { left: 16px; bottom: 16px; padding: 8px 12px; backdrop-filter: blur(2px); }

.wykes-pc__text { display: flex; flex-direction: column; gap: 8px; }
.wykes-pc__ident { display: flex; flex-direction: column; gap: 2px; }

.wykes-pc__name {
	margin: 0;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	color: #001938;
}

.wykes-pc__role {
	margin: 0;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #6F7782;
}

.wykes-pc__spec {
	margin: 0;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #6F7782;
	/* One line, clipped with an ellipsis: three specialisms would otherwise wrap and
	 * make the cards different heights. min-width:0 because the card is a flex item
	 * and a flex item's automatic minimum size defeats text-overflow. */
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* CTA style B: a left rule, no fill, no radius. */
.wykes-pc__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	margin-top: auto;
	padding: 8px 20px;
	background: none;
	border: 0;
	border-left: 2px solid #C5A059;
	border-radius: 0;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #C5A059;
	text-decoration: none;
}

.wykes-pc__cta .wykes-icon { flex: 0 0 auto; }

/* ------------------------------------------------- the whole card is the link

   One anchor per card, not two: the CTA's ::after is stretched over the card, so a
   click anywhere in the card is a click on that anchor. Nesting the card inside a
   second <a> would be invalid HTML, and a JS onclick would break ctrl-click and
   middle-click, both of which a real anchor gets for free.

   -webkit-user-drag: none is what keeps text selectable: without it a drag that
   starts over the stretched overlay is treated as a link drag and no selection is
   made. */
.wykes-pc__card { position: relative; cursor: pointer; -webkit-user-drag: none; }

.wykes-pc__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Above the badge (z-index 2), or a click on the badge would land on a span and
	 * go nowhere. Below the chevron, which raises itself to 4. */
	z-index: 3;
}

/* Set by project.js for the duration of an unmodified left press only. Lifting the
 * overlay is what lets a drag select the text underneath; every modified press keeps
 * the overlay and the anchor's native behaviour. */
.wykes-pc__card.is-selecting .wykes-pc__cta::after { pointer-events: none; }

/* Hover and focus are a decision, not a Figma value: the frame has no hover, focus,
 * pressed or disabled variant anywhere. Colour returns to the portrait and the CTA
 * underlines; the focus ring is the gold already in the card. */
.wykes-pc__card:hover .wykes-pc__cta,
.wykes-pc__cta:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.wykes-pc__card:has(.wykes-pc__cta:focus-visible) {
	outline: 2px solid #C5A059;
	outline-offset: 2px;
}

/* One ring, not two: measured, the focused anchor was also drawing a 2px black
 * outline of its own inside the gold card ring. */
.wykes-pc__card:has(.wykes-pc__cta:focus-visible) .wykes-pc__cta { outline: none; }

/* No :has (older Safari/Firefox): the anchor rings itself rather than nothing. */
@supports not selector(:has(*)) {
	.wykes-pc__cta:focus-visible { outline: 2px solid #C5A059; outline-offset: 2px; }
}

.wykes-pc__live {
	margin: 0;
	font-family: "Funnel Sans", sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #6F7782;
}

.wykes-pc--empty {
	padding: 24px;
	border: 1px dashed #B0BECF;
	color: #6F7782;
	font-family: "Funnel Sans", sans-serif;
}

/* ============================================================ partner profile */

.wykes-pp { display: flex; flex-direction: column; gap: 24px; width: 100%; }

.wykes-pp__crumbs {
	display: grid;
	grid-template-columns: auto 20px auto;
	grid-template-rows: 20px;   /* An explicit row track. Without one a grid creates a
	                             * second implicit row and doubles the height. */
	gap: 4px;
	align-items: center;
	justify-items: start;
	width: fit-content;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
}

.wykes-pp__crumb-home { color: #ACB1B7; text-decoration: underline; }
.wykes-pp__crumbs > .wykes-icon { color: #ACB1B7; }
.wykes-pp__crumb-current { color: #6F7782; }

.wykes-pp__columns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 146px;
	width: 100%;
}

.wykes-pp__card {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 0 0 464px;
	width: 464px;
	max-width: 100%;
}

.wykes-pp__frame { aspect-ratio: 464 / 457; }
.wykes-pp__badge { left: 17px; bottom: 17px; }

.wykes-pp__card-text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 24px;
	background: #00295C;
	overflow: hidden;
}

.wykes-pp__ident { display: flex; flex-direction: column; gap: 0; }

.wykes-pp__name {
	margin: 0;
	font-family: "Funnel Display", serif;
	font-weight: 500;
	font-size: 36px;
	line-height: 44px;
	color: #FFFFFF;
}

.wykes-pp__role {
	margin: 0;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #B0BECF;
}

/* The four contact rows.
 *
 * Content width is 464 - 24 - 24 = 416. The label column is 87 and the value column
 * is capped at 311; at the design's 20px column gap that is 87 + 20 + 311 = 418 and
 * the block overflowed by 2px, which is exactly what was measured on the Individual
 * Partner page. Column gap 18 gives 87 + 18 + 311 = 416. Row gap stays 12, so the
 * block height is 32 + 44 + 24 + 24 + (4*20 + 3*12) + 32 = 272 as drawn.
 */
.wykes-pp__details {
	display: grid;
	grid-template-columns: 87px minmax(0, 311px);
	grid-template-rows: repeat(4, 20px);
	column-gap: 18px;
	row-gap: 12px;
	align-items: center;
	width: 100%;
}

/* display:contents, not a nested grid: the label and the value must land in the
 * PARENT grid's two columns so all four rows share one 87px label column. Wrapping
 * each row in its own box would give each row its own column widths. */
.wykes-pp__d { display: contents; }

.wykes-pp__d-label {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	grid-template-rows: 20px;
	gap: 8px;
	align-items: center;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #B0BECF;
}

.wykes-pp__d-label .wykes-icon { color: #B0BECF; }

.wykes-pp__d-value {
	min-width: 0;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #E6EAF0;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

a.wykes-pp__d-value:hover { text-decoration: underline; }

.wykes-pp__right {
	display: flex;
	flex-direction: column;
	gap: 32px;
	flex: 0 0 830px;
	width: 830px;
	max-width: 100%;
}

.wykes-pp__title {
	margin: 0;
	font-family: "Funnel Display", serif;
	font-weight: 500;
	font-size: 48px;
	line-height: 56px;
	color: #00295C;
}

.wykes-pp__body { display: flex; flex-direction: column; gap: 48px; }
.wykes-pp__about { display: flex; flex-direction: column; gap: 8px; }
.wykes-pp__expertise { display: flex; flex-direction: column; gap: 16px; }

.wykes-pp__h {
	margin: 0;
	font-family: "Funnel Display", serif;
	font-weight: 500;
	font-size: 36px;
	line-height: 44px;
	color: #335784;
}

.wykes-pp__prose {
	margin: 0;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #6F7782;
}

.wykes-pp__prose > p { margin: 0 0 12px; }
.wykes-pp__prose > p:last-child { margin-bottom: 0; }
.wykes-pp__prose--empty { font-style: italic; }

.wykes-pp__chips {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wykes-pp__chip {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 12px 16px;
	background: #FFFEFE;
	border: 1px solid #B0BECF;
	border-radius: 2px;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	color: #C5A059;
	list-style: none;
}

.wykes-pp--empty {
	padding: 24px;
	border: 1px dashed #B0BECF;
	color: #6F7782;
	font-family: "Funnel Sans", sans-serif;
}

/* single-partner.php chrome. The band's horizontal padding matches the built pages'
 * clamp(24px, 2.5vw, 48px), so the profile lines up with the header above it. */
/* MEASURED DEFECT, fixed here: hello-elementor gives `.site-main` max-width:1140px.
 * The five built pages never meet it because they use Elementor's canvas template,
 * but single-partner.php is an ordinary theme template, so the profile was capped at
 * 1044px and the 464 + 146 + 830 row silently WRAPPED — both columns still measured
 * their correct widths, which is exactly why a width check alone would have passed
 * it. The fix is in the template — it no longer carries `.site-main` — because the
 * theme's selector `body:not([class*=elementor-page-]) .site-main` is (0,2,1) and
 * would have beaten any single-class override short of !important. */
main.wykes-partner-main {
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding: 80px clamp(24px, 2.5vw, 48px);
}

.wykes-partner-main > .wykes-partner-inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

/* Below the tablet breakpoint the two columns stack. The breakpoint itself is the
 * site's — 1024 — read from Elementor at build time, not invented here. */
@media (max-width: 1024px) {
	.wykes-pp__columns { gap: 48px; }
	.wykes-pp__card,
	.wykes-pp__right { flex: 1 1 100%; width: 100%; }
	.wykes-pp__details { grid-template-columns: 87px minmax(0, 1fr); grid-template-rows: repeat(4, auto); }
	.wykes-pp__card-text { overflow: visible; }
	.wykes-pc__heading { font-size: 36px; line-height: 44px; }
}

@media (max-width: 767px) {
	.wykes-pp__columns { gap: 32px; }
	.wykes-pp__title { font-size: 36px; line-height: 44px; }
	.wykes-pp__h { font-size: 28px; line-height: 36px; }
	.wykes-pp__chip { font-size: 16px; line-height: 24px; padding: 10px 14px; }
	.wykes-partner-main { padding: 48px 24px; }
}


/* ================================================== carousel: flush nav variant

   Scope: .wykes-pc-flush, a class put on the widget by the document that uses it
   (homepage team band). Every selector below is `.wykes-pc-flush .wykes-pc*`, so the
   widget's own default layout — heading and nav in a head row above the track — is
   untouched anywhere else it is ever placed.

   The widget renders prev/next inside .wykes-pc__head, above the track. The Figma
   frame for this band has a single chevron vertically centred at the right edge of
   the card row instead. Measured on the band being replaced: the chevron sat at
   `top: calc(50% - 20.5px)` of a 617px row with a 41px box — i.e. centred on the
   whole card, not on the portrait. `top: 50%` + translateY(-50%) reproduces that.

   Horizontal: two states, ONE threshold, derived from one expression.

   The Figma position is the escape: the button sits in the page gutter outside the
   track, at `right: -60px` (prev mirrored). That needs 60px of gutter to exist. The
   old rule wrote it as clamp(-60px, calc((1470px - 100vw) / 2), 0px), which stops
   being a full escape the moment the page gutter is narrower than 60px — measured,
   that is a 100vw of 1470 + 2*60 = 1590, below which the offset collapses toward 0
   and the chevron lands ON the edge card. #002D65 on a dark photograph: invisible.
   The user reported it at ~1323px.

   The fix does not move the buttons back over the cards at all. Below the same
   1590 the carousel reserves its own column: the TRACK is inset by one escape
   width on each side, and the button sits in that inset. The relative geometry is
   unchanged — 40px of button, then 20px of clear space, then the first card — it
   has simply moved inside the band instead of outside it.

   The threshold is written once, as --wykes-pc-gut. It is not a media query and
   not a typed number: it is the same `ref + 2*esc` that defines where the escape
   runs out, so if the content width or the escape ever changes, the switch moves
   with them. The 1e6 multiplier turns the comparison into a step — one state or
   the other at every width, with a transition band under 0.002px wide.

   Note both sides of the comparison are 100vw, i.e. scrollbar-inclusive, exactly
   as the escape expression was: the two are compared in the same units on purpose.

   Mobile (<=767) opts out of the gutter entirely; see the media query below. */

.wykes-pc-flush .wykes-pc {
	position: relative;
	gap: 0;

	/* Figma: 60px of clear gutter, 40px of it the button. */
	--wykes-pc-esc: 60px;
	/* The width the escape was authored against (1350 content + 2*60 gutter). */
	--wykes-pc-ref: 1470px;
	/* 0px while the escape still fits; one full escape width once it does not. */
	--wykes-pc-gut: clamp(
		0px,
		calc((var(--wykes-pc-ref) + 2 * var(--wykes-pc-esc) - 100vw) * 1e6),
		var(--wykes-pc-esc)
	);
}

/* display: contents removes the head's box and its 24px gap without removing the
 * buttons. The nav is absolutely positioned, so it is out of flow either way; this
 * is what keeps the band the same height as the static row it replaces. */
.wykes-pc-flush .wykes-pc__head {
	display: contents;
}

.wykes-pc-flush .wykes-pc__nav {
	display: contents;
}

.wykes-pc-flush .wykes-pc__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* 4, not 3: the card's stretched link sits at 3. The chevron no longer overlaps a
	 * card at any width, but the stacking order is what keeps that true if the track
	 * is ever given a negative margin again. */
	z-index: 4;
}

/* The track gives up one escape width at each edge in gutter mode, and nothing at
 * all above the threshold. margin, not padding: the item's flex-basis is a
 * percentage of the track's content box, so a narrower track recomputes the card
 * width and the per-view arithmetic on its own, and the track's padding box stays
 * identical to its border box — an overflowing card cannot hide inside a pad. */
.wykes-pc-flush .wykes-pc__track {
	margin-inline: var(--wykes-pc-gut);
}

/* Wide: gut 0 -> -60px, byte-for-byte the old pinned escape. Narrow: gut 60px -> 0,
 * i.e. flush with the BAND edge, with the track now starting 60px further in. */
.wykes-pc-flush .wykes-pc__btn[data-wykes-dir="next"] {
	right: calc(var(--wykes-pc-gut) - var(--wykes-pc-esc));
}

/* The exact mirror: the same escape expression on the opposite edge, and the same
 * top: 50% + translateY(-50%), so prev is centred on the whole 617px card row at
 * centre y 308 rather than on the portrait. Nothing else differs between the two
 * buttons — box, padding, radius, colour and icon geometry are all the shared
 * .wykes-pc__btn rule above. */
.wykes-pc-flush .wykes-pc__btn[data-wykes-dir="prev"] {
	left: calc(var(--wykes-pc-gut) - var(--wykes-pc-esc));
}


/* The live region is filled with "Showing partner 1 to 3 of 5" by project.js, so in
 * normal flow it adds a 20px line plus the flex gap to the band. Clipped rather than
 * display:none: display:none is not announced. */
.wykes-pc-flush .wykes-pc__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The widget nests the CTA inside .wykes-pc__text, so it inherits that column's 8px
 * gap. The band being replaced has the CTA as a sibling of the text block at the
 * card's 16px gap. 8 + 8 = 16 restores it; without this the card is 8px short and the
 * band measures 901 instead of 909. */
.wykes-pc-flush .wykes-pc__cta {
	margin-top: 8px;
}

/* Mobile keeps the head row, and does NOT join the gutter scheme. One card is on
 * screen at 375 and the band is 337.5 wide; reserving 2 x 60 would take the card to
 * 217.5, a 36% cut to the only content there is, to solve a problem the head row
 * already solves — the buttons are above the track, over the band's own background,
 * overlapping nothing. So below the site's mobile breakpoint (767, read from
 * Elementor, not chosen here) the gutter is switched off and the nav returns to the
 * widget's own layout: a right-aligned row above the track.
 *
 * 44px, not the desktop 40: this is the touch rung, and 40 fails the 44x44 target.
 * The box grows by padding the same 24px glyph, so the icon is unmoved. */
@media (max-width: 767px) {
	.wykes-pc-flush .wykes-pc { gap: 24px; --wykes-pc-gut: 0px; }
	.wykes-pc-flush .wykes-pc__head { display: flex; }
	.wykes-pc-flush .wykes-pc__nav { display: flex; }
	.wykes-pc-flush .wykes-pc__btn {
		position: static;
		transform: none;
		width: 44px;
		height: 44px;
		padding: 10px;
	}
}

/* =====================================================================
 * CAROUSEL HOVER AND FOCUS
 *
 * Two of these are corrections, not additions.  Measured on the live page
 * before the change, with the pseudo-state forced through CDP rather than
 * inferred:
 *
 *   .wykes-pc__btn   rest  transparent / #002D65
 *                    hover rgb(204,51,102) / rgb(255,255,255)   <- pink
 *   .wykes-pc__cta   rest  #C5A059
 *                    hover rgb(51,51,102)                       <- purple
 *
 * Both are hello-elementor's reset leaking through, and the specificity is
 * the interesting part.  The chevron's base rule `.wykes-pc .wykes-pc__btn`
 * is (0,2,0) and looked safe against `button:hover` at (0,1,1) - but the
 * selector that actually matches is `[type="button"]:hover`, and an
 * ATTRIBUTE selector counts in the same column as a class.  (0,2,0) against
 * (0,2,0), and reset.css loads after this file, so the reset won.  Proved by
 * injecting the identical rule at the end of the document, which flipped the
 * computed value back.  Every rule below carries its own :hover, which puts
 * it at (0,3,0) and settles it on specificity instead of on load order.
 */

/* Chevrons: gold fill, navy glyph.  #00295C on #C5A059 is 5.81:1.  No
 * padding, border or size changes, so the 40x40 box is unmoved. */
.wykes-pc .wykes-pc__btn:hover,
.wykes-pc .wykes-pc__btn:focus-visible {
	background: #C5A059;
	color: #00295C;
}
.wykes-pc .wykes-pc__btn[aria-disabled="true"]:hover {
	background: none;
	color: #002D65;
}
/* Was `opacity .15s`, which the disabled state uses; colour joins it. */
.wykes-pc .wykes-pc__btn {
	transition: opacity .15s ease, background-color 175ms ease, color 175ms ease;
}

/* CTA: the underline was already the hover affordance and stays.  What is
 * new is that the label no longer inherits the reset's purple - on the
 * #F9F7F2 card, gold would have been 2.44:1 at hover, so the light-surface
 * text CTAs move to #00295C (13.33:1), the same as the Contact page's phone
 * and email links and the service-detail table of contents. */
.wykes-pc__card:hover .wykes-pc__cta,
.wykes-pc__cta:hover,
.wykes-pc__cta:focus-visible {
	color: #00295C;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.wykes-pc__cta {
	transition: color 175ms ease;
}
/* The left rule is the card's gold and keeps it: only the label moves. */
.wykes-pc__card:hover .wykes-pc__cta,
.wykes-pc__cta:hover {
	border-left-color: #C5A059;
}

/* =====================================================================
 * REDUCED MOTION
 *
 * The carousel portraits already had `transition: filter .2s` with no guard,
 * on both the card and the profile page, which is the desaturation crossfade;
 * it is added here along with the new colour transitions.  `transition: none`
 * computes as `all 0s ease 0s`, not the string "none" - assert on
 * transitionDuration.
 */
@media (prefers-reduced-motion: reduce) {
	.wykes-pc__frame .wykes-pc__portrait,
	.wykes-pp__frame .wykes-pp__portrait,
	.wykes-pc .wykes-pc__btn,
	.wykes-pc__cta,
	.wykes-pc__card {
		transition: none !important;
	}
}