/*
 * The front-page globe hero.
 *
 * Self-contained on purpose: it takes nothing from the theme and hands the
 * theme nothing back. Every value it needs is declared on .pxq-hero itself,
 * so the only way this file can reach the rest of the page is the one rule
 * the plugin prints separately to hide the section it replaces.
 *
 * The colours are the live site's own, sampled from the page it replaces:
 * #183372 is the navy of that block and #3289CE is the button. The globe's
 * dots are that same button blue rather than a new one.
 */

.pxq-hero {
	--pxq-navy: #183372;
	--pxq-navy-deep: #0C1B40;
	--pxq-action: #3289CE;
	--pxq-action-hover: #2A77B5;
	--pxq-quiet: rgba(255, 255, 255, .76);
	--pxq-ghost: rgba(255, 255, 255, .28);
	--pxq-fill: rgba(255, 255, 255, .07);

	/* Read by hero-globe.js off this element. Never used for text. */
	--globe-dot: #3289CE;
	--globe-marker: #9FD6FF;
	--globe-halo: rgba(50, 137, 206, .26);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: clamp(600px, 82vh, 880px);
	padding: clamp(52px, 7vw, 92px) 24px clamp(26px, 3vw, 40px);
	background: var(--pxq-navy);
	color: #fff;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	text-align: center;
	cursor: grab;
	/* The drag claims sideways movement only, so a thumb still scrolls. */
	touch-action: pan-y;
}

.pxq-hero,
.pxq-hero *,
.pxq-hero *::before,
.pxq-hero *::after { box-sizing: border-box; }

.pxq-hero.is-grabbing { cursor: grabbing; }
.pxq-hero a { cursor: pointer; }

/* The ground: a halo seated where the globe is, a breath of light at the top,
   and a fall to a deeper navy at the edges. */
.pxq-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(62% 46% at 50% 76%, var(--globe-halo) 0%, transparent 68%),
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .06) 0%, transparent 46%),
		linear-gradient(180deg, var(--pxq-navy) 0%, var(--pxq-navy-deep) 100%);
}

.pxq-hero__globe {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 700ms ease;
}

.pxq-hero__globe canvas { display: block; width: 100%; height: 100%; }

.pxq-hero.globe--ready .pxq-hero__globe { opacity: 1; }

/* No WebGL, or a mask that would not decode: a ring and a wash, quieter than
   the globe and still not an empty rectangle. */
.pxq-hero.globe--unsupported .pxq-hero__globe { opacity: 1; }

.pxq-hero.globe--unsupported .pxq-hero__globe::after {
	content: "";
	position: absolute;
	top: 56%;
	left: 50%;
	width: min(112vw, 820px);
	aspect-ratio: 1;
	transform: translate(-50%, -18%);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .10);
	background: radial-gradient(circle at 42% 32%, rgba(50, 137, 206, .22), transparent 58%);
}

/* ---- The copy ---------------------------------------------------- */

.pxq-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}

.pxq-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pxq-quiet);
}

.pxq-hero__title {
	margin: 0 auto;
	max-width: 17em;
	font-family: 'Noto Sans JP', 'Poppins', sans-serif;
	font-size: clamp(30px, 4.8vw, 60px);
	line-height: 1.1;
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
}

.pxq-hero__lede {
	margin: 24px auto 0;
	max-width: 44em;
	font-size: clamp(15px, 1.6vw, 19px);
	line-height: 1.65;
	color: var(--pxq-quiet);
}

.pxq-hero__actions {
	margin-top: clamp(26px, 3.4vw, 40px);
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* 3px radius and the same weight as the button this replaces, so the change
   is the hero and not the house style. */
.pxq-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 28px;
	border: 1px solid transparent;
	border-radius: 3px;
	font-family: 'Noto Sans JP', 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.pxq-hero__btn--primary { background: var(--pxq-action); color: #fff; }

.pxq-hero__btn--primary:hover,
.pxq-hero__btn--primary:focus-visible {
	background: var(--pxq-action-hover);
	color: #fff;
	transform: translateY(-1px);
}

.pxq-hero__btn--ghost {
	background: var(--pxq-fill);
	color: #fff;
	border-color: var(--pxq-ghost);
}

.pxq-hero__btn--ghost:hover,
.pxq-hero__btn--ghost:focus-visible {
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
	color: #fff;
}

/* ---- The client rail --------------------------------------------- */

.pxq-hero__clients {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1180px;
	margin: auto auto 0;
	padding-top: clamp(34px, 5vw, 60px);
}

.pxq-hero__clients-label {
	margin: 0 0 18px;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pxq-quiet);
	opacity: .8;
}

[dir="rtl"] .pxq-hero__clients-label,
[lang="ar"] .pxq-hero__clients-label { letter-spacing: normal; }

.pxq-hero__clients img {
	max-height: 26px;
	width: auto;
	/* The logos arrive in six different colours; on this ground they are one
	   material. Every file has a real alpha channel, so none becomes a box. */
	filter: brightness(0) invert(1);
	opacity: .6;
	transition: opacity .18s ease;
}

.pxq-hero__clients img:hover { opacity: 1; }

/* Two identical copies side by side; the track moves exactly half its own
   width, so the second is in place as the first leaves and there is no seam.
   Both the window and the track are pinned left-to-right — an rtl overflow
   container puts its origin at the right edge and parks the whole rail off
   the side of the screen. Arabic reverses only the travel. */
.pxq-marquee {
	overflow: hidden;
	direction: ltr;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.pxq-marquee__track {
	display: flex;
	width: max-content;
	direction: ltr;
	animation: pxq-marquee var(--marquee-duration, 30s) linear infinite;
	will-change: transform;
}

[dir="rtl"] .pxq-marquee__track { animation-direction: reverse; }

.pxq-marquee:hover .pxq-marquee__track,
.pxq-marquee:focus-within .pxq-marquee__track { animation-play-state: paused; }

@keyframes pxq-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.pxq-marquee__group {
	display: flex;
	flex: none;
	align-items: center;
	gap: clamp(30px, 5vw, 62px);
	margin: 0;
	padding: 0 clamp(30px, 5vw, 62px) 0 0;
	list-style: none;
}

.pxq-marquee__group > li { flex: none; display: flex; align-items: center; }

/* ---- Narrow ------------------------------------------------------- */

@media (max-width: 720px) {
	.pxq-hero {
		min-height: clamp(520px, 84vh, 760px);
		padding-left: 20px;
		padding-right: 20px;
	}

	.pxq-hero__actions > .pxq-hero__btn { flex: 1 1 auto; justify-content: center; }

	.pxq-hero__clients img { max-height: 21px; }

	.pxq-marquee__group { gap: 32px; padding-right: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.pxq-hero__globe { transition: none; }

	.pxq-marquee { -webkit-mask-image: none; mask-image: none; }

	.pxq-marquee__track { animation: none; width: 100%; }

	.pxq-marquee__group {
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		width: 100%;
	}

	.pxq-marquee__group[aria-hidden="true"] { display: none; }
}

/* ---- Breaking out of the theme's column ---------------------------
 *
 * The hero is printed inside main > .container > .row > .col, so it inherits a
 * 1400px cap and three separate paddings. These three rules are the only ones
 * in this file that touch anything the theme owns. They are scoped to the front
 * page, and the stylesheet is loaded nowhere else.
 * ----------------------------------------------------------------- */

/* 100vw counts the scrollbar, so a full-bleed block overhangs the document by
   its width and raises a horizontal scrollbar. Clipping it on the content
   wrapper absorbs that; the box stays centred on the document, so what gets
   clipped is about seven pixels of gradient at each edge and nothing else.
   clip rather than hidden: hidden would make this a scroll container. */
body.home .content-area { overflow-x: clip; }

/* The theme opens its main column with 70px of air. The section this hero
   replaces cancelled that with a negative margin and went on up under the
   header; this one only asks for the air not to be there, so it begins
   directly below it. Going further would put a dark navy band behind a dark
   logo. */
body.home .site-main { padding-top: 0; }

.pxq-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---- The long-form copy, regrouped --------------------------------
 *
 * Typography and colour are inherited on purpose. The only things this
 * adds are hairlines and the site's own blue on the open/close mark, so
 * the block reads as part of the page rather than as a component that
 * arrived from somewhere else.
 * ----------------------------------------------------------------- */

.pxq-longform { --pxq-rule: #E4E9F0; }

.pxq-longform__intro { margin-bottom: 40px; }

.pxq-longform__heading { margin: 56px 0 0; }

.pxq-topics { border-top: 1px solid var(--pxq-rule); }

.pxq-topics--faq { margin-top: 20px; }

.pxq-topics__item { border-bottom: 1px solid var(--pxq-rule); }

.pxq-topics__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-size: 1.15em;
	line-height: 1.45;
	font-weight: 600;
	transition: color .15s ease;
}

.pxq-topics__item > summary::-webkit-details-marker { display: none; }

.pxq-topics__item > summary::after {
	content: "+";
	flex: none;
	font-size: 26px;
	line-height: 1;
	font-weight: 300;
	color: #3289CE;
}

.pxq-topics__item > summary:hover { color: #3289CE; }

.pxq-topics__item[open] > summary { color: #3289CE; }

/* A true minus sign; a hyphen reads as a stray dash at this size. */
.pxq-topics__item[open] > summary::after { content: "\2212"; }

.pxq-topics__body { padding-bottom: 30px; }

.pxq-topics__body > *:first-child { margin-top: 0; }

.pxq-topics__body h3 { font-size: 1.12em; margin: 28px 0 8px; }

.pxq-topics__body h4 { font-size: 1.02em; margin: 22px 0 6px; }

@media (max-width: 560px) {
	.pxq-topics__item > summary { padding: 18px 0; font-size: 1.05em; gap: 16px; }

	.pxq-topics__body { padding-bottom: 22px; }
}

/* The motion layer used to live here. It moved to brand.css, which loads
   on every page — the hover states and the reveal belong to the whole site,
   not to the front page. */

/* ---- The other two heroes ------------------------------------------
 *
 * Same band, same copy, same colours. Only what is drawn behind them
 * changes, so switching is a one-word decision and not a redesign.
 * ----------------------------------------------------------------- */

.pxq-hero.art--ready .pxq-hero__globe { opacity: 1; }

/* The fleet map reads as a surface, so it sits flatter than the globe: no
   halo pooling at the bottom, just a little more light overall. */
.pxq-hero--routes::before {
	background:
		radial-gradient(80% 60% at 50% 88%, rgba(50, 137, 206, .18) 0%, transparent 70%),
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .07) 0%, transparent 48%),
		linear-gradient(180deg, var(--pxq-navy) 0%, var(--pxq-navy-deep) 100%);
}

/* The sweep has its own light source at the centre of the rings. */
.pxq-hero--radar::before {
	background:
		radial-gradient(46% 38% at 50% 82%, rgba(50, 137, 206, .30) 0%, transparent 72%),
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .05) 0%, transparent 44%),
		linear-gradient(180deg, var(--pxq-navy) 0%, var(--pxq-navy-deep) 100%);
}

/* Neither of the two needs a pointer: they lean toward it from wherever it
   is, so the grab cursor would be a promise nothing keeps. */
.pxq-hero--routes,
.pxq-hero--radar { cursor: default; }

.pxq-hero--routes a,
.pxq-hero--radar a { cursor: pointer; }

/* The two widgets the hero replaced further down the page: the "OUR TRUSTED
   CLIENTS" label and the logo slider under it. The plugin already returns
   nothing for their contents, so none of the six images is requested; this
   collapses the empty wrappers they would otherwise leave behind. The
   testimonials directly above them are a different widget and untouched. */
.elementor-element-01dec17,
.elementor-element-82c0ef3 { display: none !important; }

/* ---- The contact band ---------------------------------------------
 *
 * The second dark band on the page, and the last thing before the
 * footer. It bookends the hero deliberately: the page opens on navy and
 * closes on navy, with everything that has to be read in between on
 * white.
 * ----------------------------------------------------------------- */

/* The section it replaces hot-linked its background from the theme
   author's own server and laid a navy overlay over it. The band brings
   its own ground, so both can go — and one request to a third party goes
   with them. */
.elementor-element-69805ad {
	background-image: none !important;
	padding: 0 !important;
}

.elementor-element-69805ad > .elementor-background-overlay { display: none !important; }

/* The two columns underneath become one full-width seat for the band. */
.elementor-element-1fb06c1 { width: 100% !important; }
.elementor-element-154ab5e { display: none !important; }

.pxq-contact {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(56px, 7vw, 104px) 24px;
	background:
		radial-gradient(70% 90% at 12% 0%, rgba(50, 137, 206, .22) 0%, transparent 62%),
		linear-gradient(180deg, #183372 0%, #0C1B40 100%);
	color: #fff;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

.pxq-contact,
.pxq-contact *,
.pxq-contact *::before,
.pxq-contact *::after { box-sizing: border-box; }

.pxq-contact__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(36px, 5vw, 72px);
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
}

.pxq-contact__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

[dir="rtl"] .pxq-contact__eyebrow { letter-spacing: normal; }

.pxq-contact__title {
	margin: 0;
	font-family: 'Noto Sans JP', 'Poppins', sans-serif;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.18;
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
}

.pxq-contact__lede {
	margin: 16px 0 0;
	max-width: 34em;
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 1.65;
	color: rgba(255, 255, 255, .76);
}

.pxq-contact__list {
	margin: clamp(28px, 3.5vw, 40px) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 18px;
}

.pxq-contact__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.pxq-contact__icon {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 3px;
	color: #6FAEE4;
}

.pxq-contact__lines { display: flex; flex-direction: column; gap: 2px; }

.pxq-contact__label {
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

[dir="rtl"] .pxq-contact__label { letter-spacing: normal; }

.pxq-contact__value {
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	text-decoration: none;
	transition: color .16s ease;
}

a.pxq-contact__value:hover,
a.pxq-contact__value:focus-visible { color: #9FD6FF; }

/* ---- The form, on a dark ground ----------------------------------
 *
 * The form itself is untouched — same Contact Form 7 form, same fields,
 * same rules. Only its surface is restated, because every control in it
 * was styled for white.
 * ----------------------------------------------------------------- */

.pxq-contact__form {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 6px;
	padding: clamp(22px, 3vw, 36px);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.pxq-contact__form .wpcf7 { margin: 0; }

.pxq-contact__form .row { display: block; margin: 0; }

.pxq-contact__form [class*="col-lg"] { width: 100%; max-width: 100%; padding: 0; }

.pxq-contact__form input[type="text"],
.pxq-contact__form input[type="email"],
.pxq-contact__form input[type="tel"],
.pxq-contact__form select,
.pxq-contact__form textarea {
	width: 100%;
	padding: 13px 16px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 4px;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color .16s ease, background-color .16s ease;
}

.pxq-contact__form textarea { min-height: 128px; resize: vertical; }

.pxq-contact__form select option { color: #14213D; background: #fff; }

.pxq-contact__form ::placeholder { color: rgba(255, 255, 255, .5); opacity: 1; }

.pxq-contact__form input:focus,
.pxq-contact__form select:focus,
.pxq-contact__form textarea:focus {
	outline: none;
	border-color: #6FAEE4;
	background: rgba(255, 255, 255, .11);
}

.pxq-contact__form .submit,
.pxq-contact__form button[type="submit"],
.pxq-contact__form input[type="submit"] {
	width: 100%;
	padding: 15px 28px;
	background: #3289CE;
	border: 0;
	border-radius: 3px;
	color: #fff;
	font-family: 'Noto Sans JP', 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

.pxq-contact__form .submit:hover,
.pxq-contact__form button[type="submit"]:hover {
	background: #2A77B5;
	transform: translateY(-1px);
}

/* Contact Form 7's own messages, which are built for a light ground. */
.pxq-contact__form .wpcf7-not-valid-tip { color: #FFB4AE; font-size: 13px; margin-top: 6px; }

.pxq-contact__form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 4px;
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
	font-size: 14px;
}

.pxq-contact__form .wpcf7-spinner { background-color: rgba(255, 255, 255, .5); }

@media (max-width: 880px) {
	.pxq-contact__inner { grid-template-columns: 1fr; }

	.pxq-contact { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.pxq-contact__form .submit,
	.pxq-contact__form button[type="submit"],
	.pxq-contact__value { transition: none; }

	.pxq-contact__form .submit:hover,
	.pxq-contact__form button[type="submit"]:hover { transform: none; }
}

/* The three widgets the band absorbed print nothing, but their wrappers
   still carry the theme's margins. Twenty-three pixels of nothing. */
.elementor-element-e5cc026,
.elementor-element-40822de,
.elementor-element-547e2b1 { display: none !important; }

/* The column that now seats the band carried 64px of padding and a -120px
   bottom margin — shaped for the two-column content that used to be in it.
   Left alone they put a white strip above the band and let it overlap what
   follows by forty pixels. The band brings its own padding. */
.elementor-element-1fb06c1 > .elementor-widget-wrap {
	padding: 0 !important;
	margin: 0 !important;
}

.elementor-element-4d64b61 > .elementor-widget-container { margin: 0 !important; }