/**
 * Hero Collage widget.
 *
 * Every colour and face resolves through one of the component tokens declared
 * on `.goxom-hc` below, and each of those points at a theme global first
 * (--color-primary, --color-black, --font-title …) with a literal fallback for
 * contexts where the theme stylesheet has not loaded — the Elementor editor
 * preview, mostly. Restyling for a rebrand is an edit to the theme's :root, not
 * to this file.
 *
 * Nothing is hidden unconditionally: the "start invisible" rules are all scoped
 * to `.goxom-hc--js`, which the JS only adds once it knows GSAP is available
 * and motion is allowed. With no JS, or with prefers-reduced-motion, the hero
 * renders fully painted.
 */

.goxom-hc {
	/* Brand */
	--hc-primary: var(--color-primary, #1273C4);
	--hc-primary-dark: var(--color-primary-dark, #0B5596);
	--hc-primary-soft: color-mix(in srgb, var(--hc-primary) 14%, transparent);

	/* Ink */
	--hc-title: var(--color-black, #0C2338);
	--hc-body: var(--color-body, #5A7387);
	--hc-white: var(--color-white, #ffffff);

	/* Surface */
	--hc-ground: var(--color-tint, #F0F6FC);
	--hc-line: var(--color-border, #D5E3EF);
	--hc-shape: color-mix(in srgb, var(--hc-title) 20%, transparent);
	--hc-shape-opacity: 1;

	/* Type */
	--hc-font-title: var(--font-title, inherit);
	--hc-font-body: var(--font-body, inherit);

	/* Shape */
	--hc-radius: var(--border-radius-lg, 15px);
	--hc-ease: cubic-bezier(.22, 1, .36, 1);

	position: relative;
	z-index: 0;
	overflow: hidden;
	isolation: isolate;
	padding: 96px 24px 120px;
	background-color: var(--hc-ground);
	font-family: var(--hc-font-body);
}

/* The switcher is off: fall back to the widget's own palette so the Style tab
   is styling something predictable rather than whatever the theme happens to
   define. */
.goxom-hc:not(.goxom-hc--theme) {
	--hc-primary: #1273C4;
	--hc-primary-dark: #0B5596;
	--hc-title: #0C2338;
	--hc-body: #5A6B7C;
	--hc-white: #ffffff;
	--hc-ground: #F0F6FC;
	--hc-line: #E4EEF3;
	--hc-font-title: inherit;
	--hc-font-body: inherit;
}

.goxom-hc__inner {
	position: relative;
	z-index: 2;
	max-width: 1170px;
	margin-inline: auto;
}

/* A soft white field that lifts the headline off the tinted ground. Sized in
   the flow rather than with a fixed height so it tracks the section padding. */
.goxom-hc--glow::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 50%;
	top: -160px;
	width: min(1100px, 130%);
	height: 520px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
	pointer-events: none;
}

/* ================================================================== heading */

.goxom-hc__head {
	position: relative;
	z-index: 2;
	text-align: center;
	margin-bottom: 0;
}

.goxom-hc__subtitle {
	margin: 0 0 18px;
	font-family: var(--hc-font-title);
	font-size: clamp(15px, 1.3vw, 20px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hc-primary);
}

.goxom-hc__title {
	margin: 0 auto;
	max-width: 1012px;
	font-family: var(--hc-font-title);
	font-size: clamp(30px, 4.4vw, 60px);
	line-height: 1.2;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--hc-title);
}

/* Word masking for the "words" title animation — the JS wraps each word in
   .goxom-hc__w > span, so with no JS the heading is plain text. */
.goxom-hc__title .goxom-hc__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.goxom-hc__title .goxom-hc__w > span,
.goxom-hc__title .goxom-hc__char {
	display: inline-block;
	will-change: transform;
}

/* =================================================================== search */

.goxom-hc__search {
	position: relative;
	z-index: 2;
	margin: 50px auto 0;
}

.goxom-hc__form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	padding: 30px;
	border: 1px solid var(--hc-line);
	border-radius: 16px;
	background-color: var(--hc-white);
	box-shadow: 0 24px 60px -30px rgba(0, 32, 66, .35);
}

.goxom-hc__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 0;
	min-width: 0;
	height: 51px;
	padding: 0 16px;
	border: 1.2px solid var(--hc-line);
	border-radius: 50px;
	background-color: var(--hc-white);
	transition: border-color .25s var(--hc-ease), box-shadow .25s var(--hc-ease);
}

.goxom-hc__field:hover {
	border-color: color-mix(in srgb, var(--hc-primary) 40%, var(--hc-white));
}

.goxom-hc__field:focus-within {
	border-color: var(--hc-primary);
	box-shadow: 0 0 0 4px var(--hc-primary-soft);
}

.goxom-hc__field--submit {
	flex: 0 0 auto;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
}

.goxom-hc__field--submit:hover,
.goxom-hc__field--submit:focus-within {
	border-color: transparent;
	box-shadow: none;
}

.goxom-hc__field-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--hc-primary);
}

.goxom-hc__field-icon svg,
.goxom-hc__field-icon i {
	width: 16px;
	height: 16px;
	font-size: 16px;
	display: block;
}

/* The controls are deliberately chrome-less: the pill around them is the
   visible field, so a native border or background would double up. */
.goxom-hc__control {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--hc-title);
	text-transform: capitalize;
	text-overflow: ellipsis;
}

.goxom-hc__control::placeholder {
	color: var(--hc-body);
	opacity: 1;
}

.goxom-hc__control:focus {
	outline: none;
	box-shadow: none;
}

.goxom-hc__select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	/* Room for the chevron drawn by ::after on the field. */
	padding-right: 18px;
}

.goxom-hc__range {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.goxom-hc__range-sep {
	color: var(--hc-body);
}

/* Chevron: only for fields that actually open something. */
.goxom-hc__chevron {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid var(--hc-title);
	border-bottom: 2px solid var(--hc-title);
	opacity: .55;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .3s var(--hc-ease);
	pointer-events: none;
}

.goxom-hc__field:hover .goxom-hc__chevron {
	transform: translateY(0) rotate(45deg);
}

.goxom-hc__submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
	height: 51px;
	padding: 0 26px;
	border: 0;
	border-radius: 50px;
	background-color: var(--hc-primary);
	color: var(--hc-white);
	font-family: var(--hc-font-body);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--hc-primary) 80%, transparent);
	transition: background-color .3s var(--hc-ease), transform .2s var(--hc-ease), box-shadow .3s var(--hc-ease);
}

.goxom-hc__submit:hover,
.goxom-hc__submit:focus-visible {
	background-color: var(--hc-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--hc-primary-dark) 90%, transparent);
}

.goxom-hc__submit:active {
	transform: translateY(0);
}

.goxom-hc__submit svg,
.goxom-hc__submit i {
	width: 16px;
	height: 16px;
	font-size: 16px;
	display: block;
	color: currentColor;
}

/* The label and icon are lifted a layer so the ripple washes under them
   instead of over them. A negative z-index on the ripple would not work: the
   button is not a stacking context, so it would slide behind the background
   entirely. */
.goxom-hc__submit > * {
	position: relative;
	z-index: 1;
}

.goxom-hc__submit::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0);
}

.goxom-hc__submit:hover::after {
	animation: goxom-hc-ripple .6s var(--hc-ease);
}

@keyframes goxom-hc-ripple {
	0%   { opacity: .6; transform: translate(-50%, -50%) scale(0); }
	100% { opacity: 0;  transform: translate(-50%, -50%) scale(16); }
}

/* select2, when the theme provides it, renders its own shell — strip it back
   to the pill we already drew. */
.goxom-hc__field .select2-container {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
}

.goxom-hc__field .select2-container--default .select2-selection--single {
	height: auto;
	border: 0;
	background: transparent;
}

.goxom-hc__field .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--hc-title);
}

.goxom-hc__field .select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none;
}

/* ================================================================== collage */

/* The seven slots of the reference layout, as percentages of a 1113 × 442
   canvas. Positions live here rather than in repeater defaults so a fresh
   widget is already laid out; an Elementor position control on a given tile
   overrides its slot the moment it is set. */
.goxom-hc__collage {
	position: relative;
	z-index: 1;
	width: min(1113px, 100%);
	margin: 64px auto 0;
	aspect-ratio: 1113 / 442;
	/* The depth the "tilt" and "deck" reveals are swung through. Inert for the
	   flat reveals, which never touch a 3D axis. */
	perspective: 1400px;
	perspective-origin: 50% 40%;
}

.goxom-hc__tile {
	position: absolute;
	overflow: hidden;
	margin: 0;
	border-radius: var(--hc-radius);
	background-color: color-mix(in srgb, var(--hc-title) 88%, #000);
	box-shadow: 0 30px 60px -34px rgba(0, 32, 66, .6);
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* Light sweep, run once per tile as it lands. The JS adds `is-lit` on the
   intro timeline at the moment that tile's own reveal tween starts, so with no
   JS the gradient never paints. */
.goxom-hc__tile::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: -10% -30%;
	border-radius: inherit;
	background: linear-gradient(
		100deg,
		transparent 38%,
		rgba(255, 255, 255, .06) 46%,
		rgba(255, 255, 255, .55) 50%,
		rgba(255, 255, 255, .06) 54%,
		transparent 62%
	);
	opacity: 0;
	transform: translateX(-115%);
	pointer-events: none;
}

.goxom-hc__tile.is-lit::before {
	animation: goxom-hc-sheen .95s var(--hc-ease) forwards;
}

@keyframes goxom-hc-sheen {
	0%   { opacity: 0; transform: translateX(-115%); }
	18%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(115%); }
}

/* Two classes deep on purpose: Elementor ships `.elementor img { height: auto }`
   at (0,1,1), and a lone `.goxom-hc__tile img` ties it — leaving which one wins
   down to stylesheet order. Winning outright matters, because `height: auto`
   here would drop each photo to its intrinsic height inside a fixed-ratio tile. */
/* A tile's media is a photo, a <video> or an embed wrapper, and all three fill
   the tile the same way — one rule, so the reveal, the hover zoom and the float
   cannot tell them apart. */
.goxom-hc .goxom-hc__tile img,
.goxom-hc .goxom-hc__tile video,
.goxom-hc .goxom-hc__tile .goxom-hc__embed {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--hc-ease);
}

/* The reveals that drift the photo behind its own frame write an inline
   transform every frame, and a transition on that property would chase the
   tween a beat behind it. The stylesheet takes the property back on
   `--settled`, which the JS adds when the intro timeline finishes. */
.goxom-hc--js:not(.goxom-hc--settled) .goxom-hc__tile .goxom-hc__media {
	transition: none;
}

.goxom-hc--zoom .goxom-hc__tile:hover .goxom-hc__media {
	transform: scale(1.06);
}

/* ==================================================================== video */

.goxom-hc__tile video {
	/* A poster frame and a first video frame rarely line up to the pixel, and
	   the swap between them reads as a flash against the tile's dark ground. */
	background-color: inherit;
}

/* An iframe cannot be object-fit-ed, so the player is blown up around the tile
   instead: container units measure the tile itself, which is the only thing
   that knows how far a 16:9 picture has to spill to cover it. */
.goxom-hc__embed {
	position: relative;
	overflow: hidden;
	container-type: size;
}

.goxom-hc__embed iframe {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100cqw, calc(100cqh * 16 / 9));
	height: max(100cqh, calc(100cqw * 9 / 16));
	border: 0;
	transform: translate(-50%, -50%);
}

@supports not (container-type: size) {
	.goxom-hc__embed iframe {
		width: 100%;
		height: 100%;
	}
}

/* The picture is decoration behind a tile that may well be a link, so it does
   not take the pointer — unless the editor asked for real player controls, in
   which case there is something there to click. */
.goxom-hc__embed:not(.is-interactive) {
	pointer-events: none;
}

/* Held over the player until the first frame is up, which is the whole reason
   an embed tile keeps a poster. */
.goxom-hc__embed .goxom-hc__poster {
	position: absolute;
	z-index: 1;
	inset: 0;
	transition: opacity .5s var(--hc-ease);
}

.goxom-hc__tile.is-playing .goxom-hc__embed .goxom-hc__poster {
	opacity: 0;
}

/* The size token is read, never declared here: the panel control writes it on
   the tile, and a declaration on the button itself would win against the
   inherited value and make the control do nothing. */
.goxom-hc__play {
	position: absolute;
	z-index: 4;
	left: 50%;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hc-play-size, 58px);
	height: var(--hc-play-size, 58px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--hc-white);
	color: var(--hc-primary);
	cursor: pointer;
	transform: translate(-50%, -50%);
	box-shadow: 0 14px 30px -12px rgba(0, 32, 66, .7);
	transition: transform .35s var(--hc-ease), opacity .3s var(--hc-ease),
	            background-color .3s var(--hc-ease), color .3s var(--hc-ease);
}

.goxom-hc__play svg {
	width: 42%;
	height: 42%;
	/* The optical centre of a triangle sits left of its bounding box. */
	margin-left: 6%;
	display: block;
}

.goxom-hc__play:hover,
.goxom-hc__play:focus-visible {
	background-color: var(--hc-primary);
	color: var(--hc-white);
	transform: translate(-50%, -50%) scale(1.08);
}

.goxom-hc__play:focus-visible {
	outline: 3px solid var(--hc-white);
	outline-offset: 3px;
}

/* A ring that keeps breathing, so a click-to-play tile reads as playable at a
   glance rather than on inspection. */
.goxom-hc__play::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid currentColor;
	opacity: .5;
	animation: goxom-hc-pulse 2.4s var(--hc-ease) infinite;
	pointer-events: none;
}

@keyframes goxom-hc-pulse {
	0%   { opacity: .5; transform: scale(1); }
	70%  { opacity: 0;  transform: scale(1.5); }
	100% { opacity: 0;  transform: scale(1.5); }
}

/* Clicked, but the player has not painted yet. The button acknowledges the
   click rather than sitting there looking unpressed. */
.goxom-hc__tile.is-pending .goxom-hc__play {
	opacity: .45;
	pointer-events: none;
}

.goxom-hc__tile.is-pending .goxom-hc__play::before {
	animation-duration: 1s;
}

/* Once it is running, the button has said everything it had to say. */
.goxom-hc__tile.is-playing .goxom-hc__play {
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -50%) scale(.7);
}

/* A caption sitting over a playing video competes with the picture, so on a
   tile the visitor deliberately started it steps aside until asked for. Only
   where there is a hover to ask with: on a phone the caption is the only label
   the tile has. */
@media (hover: hover) {
	.goxom-hc--caps .goxom-hc__tile.is-playing .goxom-hc__cap {
		opacity: 0;
		transform: translateY(14px);
	}

	.goxom-hc--caps .goxom-hc__tile.is-playing:hover .goxom-hc__cap,
	.goxom-hc--caps .goxom-hc__tile.is-playing:focus-within .goxom-hc__cap {
		opacity: 1;
		transform: none;
	}
}

/* A hairline inside the tile keeps light photos from bleeding into the ground. */
.goxom-hc__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
	pointer-events: none;
}

/* =========================================================== tile captions */

/* A named tile is a way into the site, not wallpaper. The scrim is part of the
   caption rather than a separate layer so there is nothing to paint on a tile
   that has no name. */
.goxom-hc__cap {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	gap: 3px;
	padding: 16px 15px 14px;
	color: #fff;
	/* The stretched link underneath is what takes the click. */
	pointer-events: none;
	background-image: linear-gradient(
		to top,
		rgba(4, 16, 28, .88) 0%,
		rgba(4, 16, 28, .55) 42%,
		rgba(4, 16, 28, 0) 100%
	);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s var(--hc-ease), transform .55s var(--hc-ease);
}

.goxom-hc__cap-title {
	font-family: var(--hc-font-title);
	font-size: clamp(14px, 1.15vw, 17px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	/* One line, cut cleanly: the narrow slots are 200px wide and a wrapped
	   place name would push the detail line out of the tile. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.goxom-hc__cap-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .82);
}

.goxom-hc__cap-meta svg {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	opacity: .9;
	transition: transform .35s var(--hc-ease);
}

.goxom-hc__tile:hover .goxom-hc__cap-meta svg {
	transform: translate(2px, -2px);
}

/* Shown on hover, on keyboard focus, or always — whichever the control says.
   `:focus-within` is not optional here: a linked tile is tabbable, and a
   caption that only answers to a pointer would leave a keyboard user landing
   on a photo with no idea what it is. */
.goxom-hc__tile:hover .goxom-hc__cap,
.goxom-hc__tile:focus-within .goxom-hc__cap,
.goxom-hc--caps .goxom-hc__cap {
	opacity: 1;
	transform: none;
}

/* The whole tile is the target, not just the photo. */
.goxom-hc__tile-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.goxom-hc__tile-link::after {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	border-radius: inherit;
}

.goxom-hc__tile-link:focus-visible::after {
	outline: 3px solid var(--hc-primary);
	outline-offset: -3px;
}

/* ============================================================== spotlight */

/* Everything except the tile under the pointer steps back. `filter` rather than
   `opacity`, because the reveal tweens leave an inline opacity on every tile
   and an inline value would win against anything declared here. */
.goxom-hc__tile {
	transition: filter .45s var(--hc-ease), box-shadow .45s var(--hc-ease);
}

@media (hover: hover) {
	.goxom-hc--spot .goxom-hc__collage:hover .goxom-hc__tile:not(:hover) {
		filter: brightness(.62) saturate(.7);
	}

	.goxom-hc--spot .goxom-hc__collage:hover .goxom-hc__tile:hover {
		box-shadow: 0 40px 70px -30px rgba(0, 32, 66, .75);
	}
}

/* The hairline picks up the brand colour under the pointer, which is what ties
   a lit tile to the rest of the page. */
.goxom-hc__tile:hover::after,
.goxom-hc__tile:focus-within::after {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hc-primary) 62%, transparent);
}

.goxom-hc__tile.is-circle { border-radius: 50%; }
.goxom-hc__tile.is-square { border-radius: 0; }

/* A circular tile's caption would sit on the curve with its corners outside the
   crop, so the scrim becomes a disc-safe block instead. */
.goxom-hc__tile.is-circle .goxom-hc__cap {
	padding: 14px 18px 22px;
	text-align: center;
	justify-items: center;
	background-image: linear-gradient(
		to top,
		rgba(4, 16, 28, .82) 0%,
		rgba(4, 16, 28, .35) 55%,
		rgba(4, 16, 28, 0) 100%
	);
}

.goxom-hc__tile:nth-child(1) { left: 0;      top: 26.38%; width: 17.93%; height: 46.32%; }
.goxom-hc__tile:nth-child(2) { left: 19.76%; top: 9.51%;  width: 17.93%; height: 30.06%; }
.goxom-hc__tile:nth-child(3) { left: 19.76%; top: 44.17%; width: 17.93%; height: 45.40%; }
.goxom-hc__tile:nth-child(4) { left: 39.51%; top: 0;      width: 20.98%; height: 100%;   }
.goxom-hc__tile:nth-child(5) { left: 62.31%; top: 9.51%;  width: 17.93%; height: 46.32%; }
.goxom-hc__tile:nth-child(6) { left: 62.31%; top: 60.43%; width: 17.93%; height: 29.14%; }
.goxom-hc__tile:nth-child(7) { left: 82.07%; top: 26.69%; width: 17.93%; height: 46.02%; }

/* Only seven slots are drawn. Anything past that would stack invisibly at
   0,0 on desktop, so it is dropped here and picked back up by the mobile
   grid below, where every image gets a cell. */
.goxom-hc__tile:nth-child(n + 8) {
	display: none;
}

.goxom-hc__badge {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: -22px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 40px;
	background-color: var(--hc-white);
	color: var(--hc-title);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	transform: translateX(-50%);
	box-shadow: 0 18px 40px -18px rgba(0, 32, 66, .5);
}

.goxom-hc__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--hc-primary);
}

/* =================================================================== shapes */

.goxom-hc__shapes {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.goxom-hc__shape {
	position: absolute;
	display: block;
	width: 160px;
	color: var(--hc-shape);
	opacity: var(--hc-shape-opacity);
	will-change: transform;
}

.goxom-hc__shape svg,
.goxom-hc__shape img {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Uploaded SVGs commonly hard-code black; recolour them to the token so an
   upload still sits in the palette. */
.goxom-hc__shape svg [stroke="black"] { stroke: currentColor; }
.goxom-hc__shape svg [fill="black"]   { fill: currentColor; }

/* ============================================================== motion prep */

/* Scoped to --js: without GSAP the JS never adds the class and nothing here
   applies, so the hero paints in full. */
.goxom-hc--js .goxom-hc__shape,
.goxom-hc--js .goxom-hc__tile,
.goxom-hc--js .goxom-hc__badge,
.goxom-hc--js .goxom-hc__subtitle,
.goxom-hc--js .goxom-hc__search {
	opacity: 0;
}

/* The heading joins them only when it has an animation of its own to arrive
   with. With Title Animation set to None there is nothing to wait for, so
   hiding it here would just delay the largest text on the page. */
.goxom-hc--js:not([data-title-anim=""]) .goxom-hc__title {
	opacity: 0;
}

/* =============================================================== responsive */

@media (max-width: 1100px) {
	.goxom-hc__form {
		gap: 12px;
	}

	.goxom-hc__field {
		flex: 1 1 calc(50% - 6px);
	}

	.goxom-hc__field--submit {
		flex: 1 1 100%;
	}

	.goxom-hc__submit {
		width: 100%;
	}
}

@media (max-width: 760px) {
	.goxom-hc {
		padding: 64px 18px 84px;
	}

	.goxom-hc__subtitle {
		letter-spacing: .12em;
	}

	.goxom-hc__form {
		padding: 18px;
		border-radius: 14px;
	}

	.goxom-hc__field {
		flex: 1 1 100%;
	}

	/* The absolute collage collapses into a plain grid: every image gets a
	   cell, including the ones past slot seven. */
	.goxom-hc__collage {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 120px;
		gap: 12px;
		height: auto;
		aspect-ratio: auto;
		margin-top: 44px;
	}

	/* !important earns its place here: the per-tile position controls emit
	   left/top/width/height at a higher specificity and with no breakpoint of
	   their own, so without it a single desktop tweak would follow the tile
	   into the phone grid and drop it out of the flow. */
	/* `relative` with the offsets neutralised rather than `static`: the tile has
	   to stay a containing block, or an absolutely-positioned caption would
	   escape its own photo and land at the foot of the whole collage. Zeroing
	   left/top is what `static` was buying — the per-tile position controls
	   would otherwise shift the tile inside its grid cell. */
	.goxom-hc__tile,
	.goxom-hc__tile:nth-child(n) {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		display: block;
		width: auto !important;
		height: auto !important;
		border-radius: var(--hc-radius);
		box-shadow: 0 16px 30px -18px rgba(0, 32, 66, .4);
	}

	/* Every image gets a cell here, including the ones the desktop layout has
	   no slot for. */
	.goxom-hc__tile:nth-child(n + 8) {
		display: block;
	}

	.goxom-hc__tile:nth-child(4) {
		grid-row: span 2;
	}

	/* A circle inside a 2-up grid cell reads as a mistake rather than a motif. */
	.goxom-hc__tile.is-circle {
		border-radius: var(--hc-radius);
	}

	.goxom-hc__tile.is-circle .goxom-hc__cap {
		padding: 16px 15px 14px;
		text-align: left;
		justify-items: start;
	}

	/* There is no hover to reveal a caption with here, so a named tile simply
	   wears its name. The grid cells are 120px tall — a caption that only
	   appeared on tap would never be seen at all. */
	.goxom-hc__cap {
		opacity: 1;
		transform: none;
	}

	/* Same 120px cell: the desktop button would cover half of it. Declared on
	   the collage rather than on the button, so a per-breakpoint size set in
	   the panel — which lands on the tile — still outranks it. */
	.goxom-hc__collage {
		--hc-play-size: 44px;
	}


	.goxom-hc__badge {
		display: none;
	}

	.goxom-hc__shape--hide-mobile {
		display: none;
	}
}

@media (max-width: 420px) {
	.goxom-hc__collage {
		grid-auto-rows: 104px;
	}
}

/* color-mix is recent enough that a couple of shipping browsers still miss it;
   the fallbacks keep those from rendering transparent tints. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.goxom-hc {
		--hc-primary-soft: rgba(18, 115, 196, .16);
		--hc-shape: rgba(0, 32, 66, .2);
	}

	.goxom-hc__tile {
		background-color: #0a2a3a;
	}

	.goxom-hc__field:hover {
		border-color: #c7e7ef;
	}
}

@media (prefers-reduced-motion: reduce) {
	.goxom-hc *,
	.goxom-hc *::before,
	.goxom-hc *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}