/*
 * SIM4Business - theme additions.
 *
 * The design system in site.css was extracted from the source build. These rules
 * cover elements the theme introduces that the source page markup did not have:
 * WordPress accessibility furniture (skip link, screen-reader text), the sticky
 * conversion bar, and the handful of block sub-elements that were restructured
 * into editable fields (fact lists, side cards, filter chips, ROI and builder
 * controls).
 *
 * Everything below uses the same tokens as site.css, so it inherits the palette
 * automatically.
 */

/* ---------------------------------------------------------------- a11y ---- */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	word-wrap: normal !important;
}

.skip-link:focus {
	z-index: 100000;
	clip: auto;
	clip-path: none;
	background: var(--white);
	color: var(--ink);
	width: auto;
	height: auto;
	padding: 14px 22px;
	border-radius: 12px;
	box-shadow: var(--shadow);
	font-weight: 700;
	text-decoration: none;
	position: fixed;
	top: 16px;
	left: 16px;
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--sky);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ------------------------------------------------------------- layout ---- */

.site-main {
	display: block;
}

.breadcrumb {
	color: var(--muted);
	padding: 18px 0 0;
	font-size: .86rem;
}

.breadcrumb a {
	color: var(--blue);
}

.section-note,
.plan-fine {
	color: var(--muted);
	max-width: 70ch;
	margin: 18px auto 0;
	font-size: .84rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------- links --- */

.card-link,
.related-link,
.stat-link {
	color: var(--blue);
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-weight: 700;
	display: inline-flex;
}

.card-link svg,
.related-link svg,
.stat-link svg {
	width: 16px;
	height: 16px;
	transition: transform .18s ease;
}

.card-link:hover svg,
.related-link:hover svg,
.stat-link:hover svg {
	transform: translateX(3px);
}

/* ---------------------------------------------------------- sticky bar --- */

.sticky-bar {
	display: none;
}

@media (max-width: 860px) {
	.sticky-bar {
		z-index: 60;
		background: #fffffff2;
		border-top: 1px solid var(--line);
		gap: 10px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		display: flex;
		position: fixed;
		inset: auto 0 0;
		backdrop-filter: blur(10px);
	}

	.sticky-bar .button {
		flex: 1;
		justify-content: center;
		padding: 12px 14px;
	}

	body {
		padding-bottom: 74px;
	}
}

/* ----------------------------------------------------------- split card -- */

.split-copy > :first-child {
	margin-top: 0;
}

.fact-list {
	border-top: 1px solid var(--line);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px 24px;
	margin: 22px 0 0;
	padding-top: 20px;
	display: grid;
}

.fact-list dt {
	color: var(--muted);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .68rem;
	font-weight: 700;
}

.fact-list dd {
	color: var(--ink);
	margin: 2px 0 0;
	font-weight: 600;
}

.side-card {
	background: var(--navy);
	color: #eaf4fb;
	border-radius: 22px;
	padding: 26px;
	box-shadow: var(--shadow);
}

.side-card img {
	width: 150px;
	margin-bottom: 16px;
}

.side-card h3 {
	color: var(--white);
	margin: 8px 0 10px;
}

.side-card p {
	color: #c6dcea;
}

.side-card ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.side-card li {
	border-top: 1px solid #ffffff1f;
	padding: 12px 0;
}

.side-card li b {
	color: var(--white);
	display: block;
}

.side-card li span {
	color: #b9d3e4;
	font-size: .88rem;
}

.side-card .card-link {
	color: var(--cyan);
}

.image-caption {
	background: #fffffff5;
	border-radius: 14px;
	padding: 12px 16px;
	box-shadow: var(--soft);
	position: absolute;
	bottom: 14px;
	left: 14px;
	right: 14px;
}

.image-caption b {
	display: block;
}

.image-caption span {
	color: var(--muted);
	font-size: .84rem;
}

/* --------------------------------------------------------------- stats --- */

.stat-strip {
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 22px;
	display: flex;
}

.stat b {
	font-size: 1.6rem;
	line-height: 1.1;
	display: block;
}

.stat span {
	color: var(--muted);
	font-size: .84rem;
}

/* ----------------------------------------------------------------- roi --- */

.roi-field {
	margin-bottom: 14px;
	display: block;
}

.roi-field span {
	color: var(--muted);
	margin-bottom: 6px;
	font-size: .84rem;
	font-weight: 600;
	display: block;
}

.roi-field input,
.builder-field input {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	width: 100%;
	padding: 12px 14px;
	font-weight: 700;
}

.roi-claim {
	background: var(--ice);
	border-radius: 14px;
	margin-top: 18px;
	padding: 16px 18px;
}

.roi-claim b {
	display: block;
}

.roi-claim span,
.roi-note {
	color: var(--muted);
	font-size: .82rem;
}

.roi-note {
	margin-top: 14px;
	line-height: 1.6;
}

.roi-result {
	border-top: 1px solid var(--line);
	padding: 14px 0;
}

.roi-result small {
	color: var(--muted);
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .7rem;
	font-weight: 700;
	display: block;
}

.roi-result b {
	font-size: 1.5rem;
	line-height: 1.2;
	display: block;
}

.roi-result span {
	color: var(--muted);
	font-size: .78rem;
}

.roi-saving b {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: #0000;
}

/* ------------------------------------------------------------- builder --- */

.volume-top {
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
	display: flex;
}

.volume-top output {
	font-weight: 800;
}

.plan-builder input[type="range"] {
	accent-color: var(--blue);
	width: 100%;
}

.builder-fine {
	color: var(--muted);
	margin-top: 14px;
	font-size: .8rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------- filter --- */

.filter-chip-row {
	flex-wrap: wrap;
	gap: 8px;
	display: flex;
}

.filter-chip {
	background: var(--white);
	border: 1px solid var(--line);
	color: var(--ink);
	cursor: pointer;
	border-radius: 999px;
	padding: 9px 16px;
	font-size: .86rem;
	font-weight: 700;
}

.filter-chip.is-active {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.filter-search input {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 999px;
	min-width: 240px;
	padding: 10px 18px;
}

.filter-empty {
	color: var(--muted);
	text-align: center;
	padding: 30px 0;
}

/* --------------------------------------------------------- testimonial --- */

.testimonial-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 14px;
	box-shadow: var(--soft);
}

.testimonial-media {
	background: var(--navy);
	border-radius: 14px;
	aspect-ratio: 9/16;
	margin-bottom: 12px;
	position: relative;
	overflow: hidden;
}

.testimonial-media img,
.testimonial-media video {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.testimonial-media > svg {
	color: #fff;
	width: 46px;
	height: 46px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.testimonial-label {
	background: #0b2943cc;
	color: #fff;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: .72rem;
	position: absolute;
	bottom: 10px;
	left: 10px;
}

/*
 * The three rules above (.testimonial-card / -media / -label) are not what
 * s_testimonial_grid.php renders - it outputs .testimonial-placeholder-grid and
 * .testimonial-screen, both styled in site.css. What follows covers the two
 * cases site.css does not.
 */

/*
 * 1. Video playback. site.css draws the card's dark shade as
 *    `.testimonial-screen::after { inset: 0 }` with no pointer-events, so it
 *    paints over the <video> (which is static, and so below any positioned
 *    sibling) and swallows every click aimed at the native controls. The video
 *    was there and loading; it just could not be reached. site.css also sizes
 *    only `.testimonial-screen > img`, leaving the video at its 300x150 intrinsic
 *    default inside a 180px box.
 */
.testimonial-screen.has-video::after {
	/* Nothing to shade: the card is the video, and darkening it hurt contrast. */
	display: none;
}

.testimonial-screen.has-video {
	/*
	 * site.css fixes the panel at 180px (210px under its 700px query) and the
	 * rule below sizes the video to fill it. With portrait phone footage - the
	 * testimonials are 3:4 - that crops to a thin horizontal band through the
	 * middle of the frame.
	 *
	 * Height and fit now come from the block's own fields as custom properties
	 * on the grid, inherited down to here. This selector is (0,2,0) against
	 * site.css's (0,1,0) `.testimonial-screen`, so it wins on specificity at
	 * every width and does not depend on stylesheet order.
	 */
	height: var(--tg-video-height, 420px);
}

.testimonial-screen > video {
	display: block;
	width: 100%;
	height: 100%;
	/* `contain` shows the whole frame and letterboxes against the navy panel. */
	object-fit: var(--tg-video-fit, contain);
	background: var(--navy);
	position: relative;
	/* Belt and braces: stay above anything else absolutely placed in the card. */
	z-index: 2;
}

/*
 * 2. Column count. The grid is a fixed three columns, so two testimonials left
 *    an empty third and one stretched oddly. s_testimonial_grid.php adds
 *    .is-two-up / .is-one-up from the row count.
 */
.testimonial-placeholder-grid.is-two-up {
	grid-template-columns: repeat(2, 1fr);
}

.testimonial-placeholder-grid.is-one-up {
	grid-template-columns: minmax(0, 420px);
}

/* -------------------------------------------------- misc block elements --- */

.answer-copy > :first-child {
	margin-top: 0;
}

.answer-body {
	max-width: 62ch;
	font-size: 1.05rem;
}

.event-copy > :first-child {
	margin-top: 0;
}

.event-visual img {
	border-radius: 20px;
	box-shadow: var(--shadow);
}

.journey-step {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 20px;
}

.journey-step i {
	background: var(--grad);
	color: #fff;
	border-radius: 999px;
	place-items: center;
	width: 30px;
	height: 30px;
	font-style: normal;
	font-weight: 800;
	display: grid;
}

.journey-step b {
	margin-top: 12px;
	display: block;
}

.journey-step span {
	color: var(--muted);
	font-size: .9rem;
}

.experience-card {
	border-radius: 18px;
	margin: 0;
	overflow: hidden;
	box-shadow: var(--soft);
}

.experience-card figcaption {
	background: var(--white);
	padding: 16px;
}

.experience-card figcaption b {
	display: block;
}

.experience-card figcaption span {
	color: var(--muted);
	font-size: .88rem;
}

.destination-guide-card[hidden] {
	display: none;
}

/* ------------------------------------------------- remaining structure --- */

.hero-heading-group > :first-child {
	margin-top: 0;
}

.hero-card-stack {
	flex-direction: column;
	gap: 12px;
	display: flex;
	position: absolute;
	inset: 18px 18px auto;
}

.comparison-section .comparison-table {
	border-collapse: collapse;
	width: 100%;
}

.comparison-section .comparison-table th,
.comparison-section .comparison-table td {
	border-bottom: 1px solid var(--line);
	padding: 14px 16px;
	text-align: left;
}

.comparison-section .comparison-table thead th {
	color: var(--muted);
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .72rem;
}

.comparison-section .comparison-table td.yes {
	color: var(--ink);
	font-weight: 700;
}

.comparison-section .comparison-table td.muted {
	color: var(--muted);
}

.coverage-copy > :first-child {
	margin-top: 0;
}

.coverage-visual-centre {
	background: var(--grad);
	color: #fff;
	border-radius: 999px;
	place-items: center;
	width: 78px;
	height: 78px;
	font-weight: 800;
	display: grid;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.coverage-ring-1 { width: 140px; height: 140px; }
.coverage-ring-2 { width: 220px; height: 220px; }
.coverage-ring-3 { width: 300px; height: 300px; }

.route-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 26px;
	box-shadow: var(--soft);
}

/* ------------------------------------------------ generic block variants --- */

/*
 * The source stylesheet defines .content-grid-2 and -3 but never needed a
 * four-up, and the hero variants are a theme concept (the source had one hero
 * per page type). Both follow the existing grid conventions.
 */

.content-grid-4 {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
	display: grid;
}

@media (max-width: 700px) {
	.content-grid-4 {
		grid-template-columns: 1fr 1fr;
	}
}

.page-hero.hero-supporting,
.page-hero.hero-destination,
.page-hero.hero-event,
.page-hero.hero-worldwide {
	padding: 56px 0 44px;
}

.page-hero-grid {
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	gap: 44px;
	display: grid;
}

@media (max-width: 980px) {
	.page-hero-grid {
		grid-template-columns: 1fr;
	}
}

/* The airline card is the plain variant of .hero-card; DragonPass is styled
   in site.css. This keeps the pair visually consistent. */
.hero-card.airline-card {
	background: #fffffff5;
}

/* ---------------------------------------------- plan builder variants --- */

/*
 * The builder block carries a variant class so the two shapes can be targeted
 * separately. The source styled each page's builder by its own wrapper
 * (.uk-unlimited-builder, .plan-builder); these keep both usable from one block.
 */

.plan-builder.builder-picker .unlimited-network-picker {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	display: grid;
}

.plan-builder.builder-picker .unlimited-network-picker button {
	background: var(--white);
	border: 1px solid var(--line);
	cursor: pointer;
	text-align: left;
	border-radius: 16px;
	padding: 16px;
}

.plan-builder.builder-picker .unlimited-network-picker button.active {
	border-color: var(--blue);
	box-shadow: 0 0 0 2px #1d66d31f;
}

.plan-builder.builder-picker .network-wordmark {
	margin: 6px 0;
	font-size: 1.25rem;
	font-weight: 800;
}

.plan-builder.builder-picker button b {
	margin-top: 10px;
	font-size: 1.35rem;
	display: block;
}

.plan-builder.builder-picker button b em {
	color: var(--muted);
	font-size: .72rem;
	font-style: normal;
	font-weight: 500;
	display: block;
}

.plan-builder.builder-picker button i {
	color: var(--blue);
	margin-top: 10px;
	font-size: .8rem;
	font-style: normal;
	font-weight: 700;
	display: block;
}

.plan-builder .volume > div {
	justify-content: space-between;
	align-items: baseline;
	display: flex;
}

.plan-builder .volume output {
	font-weight: 800;
}

.plan-builder input[type="range"] {
	accent-color: var(--blue);
	width: 100%;
	margin: 10px 0;
}

.plan-builder.builder-switch .plan-switch {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	display: grid;
}

.plan-builder.builder-switch .plan-switch button {
	background: var(--white);
	border: 1px solid var(--line);
	cursor: pointer;
	text-align: left;
	border-radius: 14px;
	padding: 14px 16px;
}

.plan-builder.builder-switch .plan-switch button.active {
	border-color: var(--blue);
	box-shadow: 0 0 0 2px #1d66d31f;
}

/* ============================================================ responsive ===
 *
 * The source stylesheet already covers its own classes at 1020px and 700px.
 * These rules do the same job for the classes this theme introduces, at the
 * same breakpoints so the two stay in step.
 */

@media (max-width: 1020px) {
	.content-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.page-hero-grid,
	.hero-supporting .page-hero-grid,
	.hero-destination .page-hero-grid,
	.hero-event .page-hero-grid,
	.hero-worldwide .page-hero-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.hero-card-stack {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 14px;
	}

	.fact-list {
		grid-template-columns: 1fr 1fr;
	}

	.filter-chip-row {
		width: 100%;
	}

	.route-card {
		padding: 22px;
	}
}

@media (max-width: 700px) {
	.content-grid-4,
	.content-grid-3,
	.content-grid-2 {
		grid-template-columns: 1fr;
	}

	.page-hero.hero-supporting,
	.page-hero.hero-destination,
	.page-hero.hero-event,
	.page-hero.hero-worldwide {
		padding: 34px 0 28px;
	}

	.hero-heading-group h1 {
		font-size: clamp(2rem, 9vw, 2.6rem);
		line-height: 1.08;
	}

	.hero-card-stack {
		flex-direction: column;
		gap: 10px;
	}

	.hero-card {
		width: 100%;
	}

	/* Stack the fact tiles and side card rather than squeezing two columns. */
	.fact-list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.side-card {
		padding: 22px;
	}

	.side-card img {
		width: 120px;
	}

	.stat-strip {
		gap: 18px;
	}

	.stat b {
		font-size: 1.35rem;
	}

	/* ROI and builder controls go single-column so inputs stay tappable. */
	.roi-result b {
		font-size: 1.3rem;
	}

	.roi-field input,
	.builder-field input,
	.filter-search input {
		font-size: 16px; /* stops iOS zooming the page on focus */
	}

	.filter-search input {
		width: 100%;
		min-width: 0;
	}

	.filter-chip-row {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.filter-chip-row::-webkit-scrollbar {
		display: none;
	}

	.filter-chip {
		flex: 0 0 auto;
	}

	.testimonial-card {
		padding: 12px;
	}

	.experience-card figcaption,
	.experience-card > div {
		padding: 14px;
	}

	.journey-step {
		padding: 16px;
	}

	.route-card {
		padding: 18px;
	}

	.card-link,
	.related-link,
	.stat-link {
		/* Give inline links a comfortable tap target. */
		padding: 6px 0;
	}
}

/* Anything that can overflow horizontally on a narrow screen. */
@media (max-width: 700px) {
	.comparison-section .comparison-table,
	.ww-table-wrap table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* The coverage rings are fixed-size and would overflow a narrow viewport. */
@media (max-width: 700px) {
	.coverage-ring-1 { width: 96px;  height: 96px; }
	.coverage-ring-2 { width: 150px; height: 150px; }
	.coverage-ring-3 { width: 205px; height: 205px; }

	.coverage-visual-centre {
		width: 58px;
		height: 58px;
		font-size: .9rem;
	}
}

/* Belt-and-braces: never let a stray wide child scroll the whole page. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* ------------------------------------------------------ contact form ---- */

/*
 * The s_contact_form block, plus styling for Contact Form 7's own markup.
 *
 * The field rules below are keyed to `.wpcf7-form` rather than to the block's
 * wrapper, deliberately. site.css carries a reset that strips the border and
 * background off every input, select and textarea, so an unstyled CF7 form
 * renders as invisible fields on a white page. Scoping the fix to CF7's own
 * class means any CF7 form picks up the design system wherever it is placed -
 * inside this block, in a widget, or in a plain page shortcode.
 *
 * Colours, padding and alignment are per-instance and arrive as an inline style
 * attribute from the block's fields, so nothing here hardcodes them.
 */

.s4b-contact-form {
	background: #fff;
}

.s4b-contact-inner {
	max-width: 780px;
}

.s4b-contact-form.align-center .s4b-contact-inner {
	margin-inline: auto;
	text-align: center;
}

.s4b-contact-form.align-right .s4b-contact-inner {
	margin-left: auto;
	text-align: right;
}

.s4b-contact-form h2 {
	/* `inherit` so the Text colour field reaches the heading. */
	color: inherit;
	letter-spacing: -2.2px;
	margin: 0 0 14px;
	font-size: clamp(37px, 4.5vw, 54px);
	font-weight: 600;
	line-height: 1.08;
}

.s4b-contact-desc p {
	color: inherit;
	opacity: .78;
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.75;
}

.s4b-contact-desc p:last-child {
	margin-bottom: 0;
}

/*
 * Labels inside a form read badly centred or right-aligned, so only the heading
 * and description follow the alignment; the fields stay left-aligned and the
 * block itself moves.
 */
.s4b-contact-fields {
	margin-top: 30px;
	text-align: left;
}

.s4b-contact-missing {
	background: #fff8e7;
	border: 1px solid #f2dfb1;
	border-radius: 12px;
	color: #765d2c;
	margin: 26px 0 0;
	padding: 13px 15px;
	font-size: 11px;
	text-align: left;
}

/* ---- CF7 furniture ---- */

.wpcf7 {
	margin: 0;
}

.wpcf7 .screen-reader-response {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
}

.wpcf7-form > p,
.wpcf7-form .s4b-field {
	margin: 0 0 16px;
}

/* CF7 wraps every control in an inline span; block-level makes it size properly. */
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-form label,
.wpcf7-form .s4b-label {
	display: block;
	/* `inherit` so labels follow the block's Text colour and stay legible on a
	   dark background. On a default section this resolves to --ink. */
	color: inherit;
	margin-bottom: 7px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

.wpcf7-form label small,
.wpcf7-form .s4b-label small {
	color: #7c93a2;
	font-size: 10px;
	font-weight: 400;
}

/* Optional helper: put two fields side by side. */
.s4b-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 0 0 16px;
}

.s4b-form-row > .s4b-field {
	margin: 0;
}

/* ---- fields ---- */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="search"],
.wpcf7-form select,
.wpcf7-form textarea {
	display: block;
	width: 100%;
	background: #fbfdff;
	border: 1px solid var(--line);
	border-radius: 14px;
	color: var(--ink);
	padding: 13px 15px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	transition: border-color .18s, box-shadow .18s, background .18s;
}

.wpcf7-form textarea {
	min-height: 130px;
	resize: vertical;
}

.wpcf7-form select {
	/* Native chevrons vary wildly between platforms; this one matches --muted. */
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23647b8d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	padding-right: 40px;
	cursor: pointer;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: #8fa4b1;
}

.wpcf7-form input:hover,
.wpcf7-form select:hover,
.wpcf7-form textarea:hover {
	border-color: #b9d3de;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	background: #fff;
	border-color: var(--sky);
	box-shadow: 0 0 0 3px #299fe726;
}

/* ---- checkboxes, radios and acceptance ---- */

.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-acceptance {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: inherit;
	opacity: .85;
	font-size: 11px;
	font-weight: 400;
	cursor: pointer;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 1px;
	accent-color: var(--blue);
	cursor: pointer;
}

.wpcf7-form .wpcf7-list-item-label {
	line-height: 1.55;
}

/* ---- submit ---- */

.wpcf7-form .wpcf7-submit,
.wpcf7-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--grad);
	border: 0;
	border-radius: 13px;
	color: #fff;
	cursor: pointer;
	min-width: 220px;
	padding: 15px 24px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 13px 30px #1d66d333;
	transition: transform .2s, box-shadow .2s;
}

.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px #1d66d340;
}

.wpcf7-form .wpcf7-submit:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}

.wpcf7-spinner {
	margin: 0 0 0 12px;
	vertical-align: middle;
}

/* ---- validation and response messages ---- */

.wpcf7-form .wpcf7-not-valid {
	border-color: #e3b0ab;
	background: #fffafa;
}

.wpcf7-not-valid-tip {
	display: block;
	color: #b3352b;
	margin-top: 6px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.5;
}

.wpcf7-form .wpcf7-response-output {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--ice);
	color: #405c70;
	margin: 20px 0 0;
	padding: 14px 16px;
	font-size: 11px;
	line-height: 1.6;
}

.wpcf7-form.sent .wpcf7-response-output {
	background: linear-gradient(135deg, #e9f5ff, #e5f9f1);
	border-color: #bee3da;
	color: #10715f;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
	background: #fff8e7;
	border-color: #f2dfb1;
	color: #765d2c;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
	background: #fff5f4;
	border-color: #e3b0ab;
	color: #a53127;
}

/* ---- responsive: same breakpoints the source stylesheet uses ---- */

@media (max-width: 700px) {
	.s4b-contact-form h2 {
		letter-spacing: -1.6px;
		font-size: 34px;
	}

	.s4b-contact-desc p {
		font-size: 14px;
	}

	.s4b-contact-fields {
		margin-top: 24px;
	}

	.s4b-form-row {
		grid-template-columns: 1fr;
	}

	.wpcf7-form .wpcf7-submit,
	.wpcf7-form button[type="submit"] {
		width: 100%;
		min-width: 0;
	}
}

/* --------------------------------------------------------- statement ---- */

/*
 * The s_statement block: a short full-width statement, built to sit under a
 * hero. Heading, a few paragraphs, an optional button.
 *
 * Padding arrives from the block's own fields as two custom properties rather
 * than as a finished `padding` declaration. An inline `padding-top: 72px` would
 * beat every stylesheet rule, the phone breakpoint below included, and the
 * section would keep its desktop padding on a 390px screen.
 *
 * The heading sits one step down the type scale from `.section-heading h2`
 * (clamp 37-54px): this block carries a long sentence-style heading over body
 * copy rather than titling a grid, and the full section size crowds it.
 *
 * Nothing else in either stylesheet targets `.s4b-statement`, so the media
 * query here is not exposed to the ordering hazard described under "mobile
 * corrections" below.
 */

.s4b-statement {
	background: #fff;
	padding-top: var(--s4b-statement-pad-top, 72px);
	padding-bottom: var(--s4b-statement-pad-bottom, 72px);
}

.s4b-statement.alt {
	background: var(--paper);
}

.s4b-statement.dark {
	background: linear-gradient(145deg, #0b2943, #14587c);
	color: #fff;
}

.s4b-statement-copy {
	/* Overridden per instance by the block's Copy width field. */
	max-width: 880px;
}

.s4b-statement.align-center .s4b-statement-copy {
	margin-inline: auto;
	text-align: center;
}

.s4b-statement .eyebrow {
	margin-bottom: 15px;
}

.s4b-statement h2 {
	color: var(--navy);
	letter-spacing: -2.2px;
	margin: 0 0 18px;
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 600;
	line-height: 1.08;
}

.s4b-statement.dark h2 {
	color: #fff;
}

.s4b-statement p {
	color: #405c70;
	margin: 0 0 13px;
	font-size: 15px;
	line-height: 1.75;
}

.s4b-statement.dark p {
	color: #c9dee7;
}

.s4b-statement p:last-of-type {
	margin-bottom: 0;
}

.s4b-statement .button-row {
	margin-top: 26px;
}

.s4b-statement.align-center .button-row {
	justify-content: center;
}

@media (max-width: 700px) {
	.s4b-statement {
		padding-top: calc(var(--s4b-statement-pad-top, 72px) * .72);
		padding-bottom: calc(var(--s4b-statement-pad-bottom, 72px) * .72);
	}

	.s4b-statement h2 {
		letter-spacing: -1.6px;
		font-size: 31px;
	}

	.s4b-statement p {
		font-size: 14px;
	}
}

/* ------------------------------------------------ mobile corrections ---- */

/*
 * site.css is concatenated compiled output: several refinement passes were
 * appended AFTER the media queries they were meant to refine. Media queries add
 * no specificity, so the later rule wins and the mobile layout never applies.
 * Two variants exist in that file:
 *
 *   1. a top-level rule appended after a @media block that sets the same
 *      property (.ww-pricing padding, .integrate-stat padding, others);
 *   2. a later `@media (max-width:1020px)` block overriding an earlier
 *      `@media (max-width:700px)` one - 390px matches both, and the 1020px
 *      rule comes last in source order.
 *
 * The second is what broke the Integrate trust bar: at 390px it resolved to
 * `1.5fr 1fr 1fr`, three columns crammed onto a phone with the brand text
 * overlapping the first stat.
 *
 * These corrections live here rather than in site.css because that file is
 * extracted from the source build and would lose any edit on re-extraction.
 * This stylesheet is enqueued after it, so the rules below win.
 *
 * IMPORTANT: the blocks below run widest breakpoint FIRST, narrowest LAST. That
 * ordering is the whole point - reorder them and a wide block will shadow a
 * narrow one, which is the bug this section exists to fix.
 */

/* ---- 1100px: worldwide hero ---- */

@media (max-width: 1100px) {
	/*
	 * A later top-level refinement re-declared these columns, so the @1100px
	 * collapse never applied and the hero stayed three-up down to phone width -
	 * roughly 240px per column on a tablet.
	 */
	.ww-hero-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---- 1020px: trust bar logo ---- */

@media (max-width: 1020px) {
	.integrate-brand-proof img {
		width: 126px;
	}

	/*
	 * site.css makes the last testimonial card span both columns here, which is
	 * right for three cards wrapping to a 2+1 grid and wrong for two, where it
	 * turns the second card into a full-width panel beside a half-width one.
	 */
	.testimonial-placeholder-grid.is-two-up article:last-child {
		grid-column: auto;
	}
}

/* ---- 860px: sticky bar clearance ---- */

/*
 * footer.php renders .sticky-bar on every page and it is shown from 860px down,
 * but site.css only clears space for it below 767px - so between 768 and 860 the
 * fixed bar sits on top of the end of the page. Clear the range the bar actually
 * appears in.
 */
@media (max-width: 860px) {
	body {
		padding-bottom: 72px;
	}
}

/* ---- 767px ---- */

@media (max-width: 767px) {
	.ww-hero-grid {
		grid-template-columns: 1fr;
	}

	.ww-pricing {
		padding: 64px 0;
	}

	/* Comparison table: one card per row. */

	/*
	 * The table sets min-width:900px and scrolls sideways, so on a phone you see
	 * about one column at a time with the row labels scrolled out of view. Below
	 * this width each row becomes a card with its label on top and every value
	 * tagged with its column heading, so nothing needs horizontal scrolling.
	 *
	 * display:block makes browsers drop the implicit table semantics; the ARIA
	 * roles in the partial preserve them.
	 */
	.ww-table-wrap {
		border-inline: 1px solid var(--line);
		border-radius: 20px;
		margin-inline: 0;
		overflow-x: visible;
	}

	.ww-table-wrap table {
		display: block;
		min-width: 0;
	}

	.ww-table-wrap thead {
		/* The column names move into each cell via data-label. */
		display: none;
	}

	.ww-table-wrap tbody {
		display: block;
	}

	.ww-table-wrap tbody tr {
		display: block;
		border-bottom: 1px solid var(--line);
		padding: 6px 0 12px;
	}

	.ww-table-wrap tbody tr:last-child {
		border-bottom: 0;
	}

	.ww-table-wrap tbody th {
		display: block;
		width: auto;
		border-bottom: 0;
		padding: 12px 16px 4px;
		font-size: 13px;
		font-weight: 600;
	}

	/*
	 * The label goes on its own line above the value rather than beside it. A
	 * side-by-side grid does not work here: the cell holds an icon element and a
	 * bare text node as separate children, so a two-column grid puts the label
	 * in column one, the icon in column two and wraps the text onto a new row
	 * back in the narrow first column - the value ends up at roughly a third of
	 * the card width. Stacking gives the value the full width, which matters at
	 * 320px where a percentage label column leaves almost nothing for the text.
	 */
	.ww-table-wrap tbody td {
		display: block;
		width: auto;
		border-bottom: 0;
		padding: 7px 16px;
		font-size: 12px;
	}

	.ww-table-wrap tbody td::before {
		content: attr(data-label);
		display: block;
		color: var(--navy);
		margin-bottom: 3px;
		font-size: 10px;
		font-weight: 700;
		line-height: 1.45;
	}

	/* The highlighted column becomes a highlighted cell. */
	.ww-table-wrap tbody td.best {
		border-inline: 0;
		border-radius: 12px;
		margin: 3px 10px;
		padding: 9px 12px;
	}

	/*
	 * The base reset sets `img,svg{display:block}`, which beats the table's own
	 * `vertical-align:middle` and drops the icon onto its own line above the
	 * value - wasting a line and leaving the text looking detached from it.
	 * Inline-block puts it back on the value's first line. The same applies on
	 * desktop; left alone there so this change stays scoped to mobile.
	 */
	.ww-table-wrap tbody td svg {
		display: inline-block;
		vertical-align: -4px;
		margin-right: 7px;
	}
}

/* ---- 700px and below: phone ---- */

@media (max-width: 700px) {

	/*
	 * site.css collapses .testimonial-placeholder-grid to one column here, but
	 * the .is-two-up / .is-one-up rules are more specific and would otherwise
	 * hold their column counts on a phone.
	 */
	.testimonial-placeholder-grid.is-two-up,
	.testimonial-placeholder-grid.is-one-up {
		grid-template-columns: 1fr;
	}

	/* Integrate trust bar: stack it. */

	.integrate-trust-grid {
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 0;
		padding: 20px 0;
	}

	.integrate-brand-proof {
		display: flex;
		align-items: center;
		gap: 14px;
		grid-column: auto;
		border-bottom: 1px solid var(--line);
		padding: 0 0 16px;
	}

	.integrate-brand-proof img {
		flex: none;
		width: 120px;
		height: auto;
		margin: 0;
	}

	.integrate-brand-proof b {
		max-width: none;
		font-size: 12px;
	}

	.integrate-stat {
		border-left: 0;
		border-bottom: 1px solid var(--line);
		min-height: 0;
		margin: 0;
		padding: 14px 0;
	}

	.integrate-stat:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	/*
	 * The 1020px block hides the third stat. There is room for it once the bar
	 * is stacked, and "4 networks" is worth keeping on the page.
	 */
	.integrate-trust-bar .integrate-stat:last-child {
		display: flex;
	}

	.integrate-stat b {
		font-size: 22px;
	}

	/* Other phone rules that were being overridden. */

	.unlimited-network-picker {
		gap: 13px;
	}

	/* SIM stepper: stop it being squeezed. */

	/*
	 * The stepper is a flex item whose grid columns total 142px. Default
	 * flex-shrink let it compress to ~70px on a 320px screen while the columns
	 * kept their width, and `overflow:hidden` then clipped the value and the
	 * "+" button clean off - the control looked broken rather than tight.
	 */
	.sim-stepper {
		flex: none;
	}

	.unlimited-sim-control > div,
	.uk-builder-header {
		flex-wrap: wrap;
		gap: 14px;
	}

	.unlimited-sim-control > div > span {
		min-width: 0;
	}

	/*
	 * Travel split cards are a full-bleed photo with the copy overlaid. At phone
	 * width the crop is far narrower than the source image, so the subject
	 * drifts out of frame; anchoring right keeps it visible.
	 */
	.travel-split-card .travel-split-image {
		object-position: right center;
	}

	.travel-split-card .travel-split-image.security-image {
		/* Keep this one's vertical framing, which was tuned for the subject. */
		object-position: right 40%;
	}
}

/*
 * The plan builder can render its own fixed bar (.uk-mobile-sticky) at the same
 * bottom edge as the footer's, so that page gets two stacked bars - the block's
 * sits at z-index 85 and simply hides the footer's at z-index 60, leaving the
 * footer's contact links unreachable. One bar is enough, and the block's is the
 * more specific, so the footer's stands down.
 */
body:has(.uk-mobile-sticky) .sticky-bar {
	display: none;
}