/*
Theme Name: Dokimo
Theme URI: https://dokimotalent.com
Author: Dokimo
Author URI: https://dokimotalent.com
Description: A custom theme for Dokimo, a staffing firm placing technical, administrative, finance and accounting, and sales and marketing contractors from an international candidate pool. Practices, roles, process, and FAQs are all data-driven from inc/data.php.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pacificcloud
*/

/* ============================================================
   Design tokens

   Two families, both taken from the Dokimo logo.

   The orange is sampled from the mark itself (#f48d1e, the check and
   the outer arc). It carries the primary action and the check-mark
   discs, because the check is what the name means: tested and approved.

   The blues are the site's existing sky-to-steel range. They were kept
   through the rebrand because they sit alongside the logo's steel blue
   (#245c8f, the wordmark and ring) without competing with it, and they
   hold the contrast the text and dark bands were tuned to.
   ============================================================ */
:root {
	/* Blues */
	--sky:        #4ec6e8;
	--sky-soft:   #d8e6f2;
	--blue:       #2f9fd6;
	--blue-deep:  #2a6fb5;
	--slate:      #58585a;

	/* Orange, from the logo. Text on it must be navy, not white:
	   navy on #f48d1e is about 6:1, white on it is about 2.3:1. */
	--orange:       #f48d1e;
	--orange-light: #ffa947;
	--orange-deep:  #d9760a;

	/* Dark surfaces — a deepened continuation of the cloud gradient */
	--navy:       #0d2c4d;
	--navy-2:     #11375e;
	--navy-3:     #16456f;

	/* Text */
	--ink:        #10263f;
	--body:       #4a5768;
	--muted:      #77879b;

	/* Surfaces */
	--line:       #e2eaf2;
	--line-soft:  #eef3f8;
	--paper:      #f4f8fc;
	--paper-2:    #eaf2f9;
	--white:      #ffffff;

	/* Text-safe variants. The brand blues run 1.9:1 (--sky) and 2.9:1 (--blue)
	   on white, which fails WCAG 1.4.3 for body text. Use these anywhere the
	   color lands on a glyph; keep the brand tokens for fills, rules, and
	   gradients where contrast rules do not apply. */
	--blue-text:  #17679a;
	--muted-text: #5c6a7d;

	--font-head: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--container:  1160px;
	--radius:     18px;
	--radius-sm:  10px;
	--shadow:     0 20px 44px -22px rgba(13, 44, 77, 0.38);
	--shadow-sm:  0 10px 26px -16px rgba(13, 44, 77, 0.34);
	--shadow-lg:  0 34px 70px -30px rgba(13, 44, 77, 0.45);

	--header-h:   78px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	/* Keep anchor targets and tabbed-to links clear of the sticky header. */
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--body);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--font-head);
	color: var(--ink);
	line-height: 1.14;
	margin: 0 0 0.5em;
	letter-spacing: -0.018em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-text); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; }

:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
	border-radius: 4px;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--navy);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
	border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.icon { width: 24px; height: 24px; flex: none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 14px 24px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
	text-decoration: none;
	white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--lg { padding: 17px 30px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
	background: linear-gradient(118deg, var(--orange-light), var(--orange) 55%, var(--orange-deep));
	color: var(--navy);
	box-shadow: 0 12px 28px -12px rgba(244, 141, 30, 0.75);
}
.btn--primary:hover { box-shadow: 0 16px 34px -12px rgba(244, 141, 30, 0.85); color: var(--navy); }

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--blue); color: var(--blue-text); background: var(--paper); }

/* On dark surfaces the ghost border and label both need to invert.
   Every dark surface is listed rather than relying on an .on-dark class the
   template has to remember: the hero shipped without it once and the button
   rendered near-black on navy. Keep this list in sync with the dark
   backgrounds defined below (.hero, .page-hero, .band--dark, .cta). */
.on-dark .btn--ghost,
.hero .btn--ghost,
.page-hero .btn--ghost,
.band--dark .btn--ghost,
.cta .btn--ghost {
	color: #fff;
	border-color: rgba(255,255,255,.38);
}
.on-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.band--dark .btn--ghost:hover,
.cta .btn--ghost:hover {
	background: rgba(255,255,255,.12);
	border-color: #fff;
	color: #fff;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled {
	border-bottom-color: var(--line);
	box-shadow: 0 6px 22px -18px rgba(13, 44, 77, 0.6);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand__lockup { height: 40px; width: auto; }
.custom-logo { height: 40px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 26px; }

.nav-menu {
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
}

/* ---- Practice dropdown ----------------------------------------------------
   Four practices as four top-level links would need a ~1390px header, and the
   nav breakpoint has already gone stale twice chasing that. They live under one
   "Roles" parent instead, which takes the header back under 1000px and does not
   grow when a fifth practice is added.

   CSS-only on purpose: :hover for pointers, :focus-within for keyboards. A JS
   dropdown would need aria-expanded kept in sync with an open state, and this
   menu has no other JS behaviour worth that. */
.nav-menu li { position: relative; }

.nav-menu .menu-item-has-children > a::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 7px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	opacity: .55;
}

.nav-menu .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: -12px;
	min-width: 232px;
	padding: 8px;
	margin: 0;
	list-style: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 60;
}
/* A transparent bridge across the gap, so the menu does not close when the
   pointer crosses from the parent to the panel. */
.nav-menu .menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 12px;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav-menu .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 9px;
	font-size: 15px;
	white-space: nowrap;
}
.nav-menu .sub-menu a::after { display: none; }
.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu a:focus-visible { background: var(--paper); }
.nav-menu a {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 15px;
	color: var(--ink);
	position: relative;
	padding: 6px 0;
}
.nav-menu a:hover { color: var(--blue-text); text-decoration: none; }
.nav-menu a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--sky), var(--blue));
	border-radius: 2px;
	transition: right .22s ease;
}
.nav-menu a:hover::after { right: 0; }
.nav-menu .current-menu-item > a { color: var(--blue-text); }
.nav-menu .current-menu-item > a::after { right: 0; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--line);
	border-radius: 10px;
	cursor: pointer;
}
.nav-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: var(--ink);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 46%, var(--navy-3) 100%);
	color: rgba(255, 255, 255, 0.86);
	padding: 92px 0 104px;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}
.hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .5;
}
.hero__glow--1 { width: 520px; height: 520px; top: -180px; right: -110px; background: var(--sky); opacity: .34; }
.hero__glow--2 { width: 460px; height: 460px; bottom: -220px; left: -140px; background: var(--blue); opacity: .3; }

.hero__inner { position: relative; max-width: 880px; }

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sky);
	background: rgba(78, 198, 232, 0.12);
	border: 1px solid rgba(78, 198, 232, 0.28);
	padding: 7px 15px;
	border-radius: 999px;
	margin: 0 0 24px;
}

.hero__title {
	color: #fff;
	font-size: clamp(2.3rem, 5.4vw, 3.9rem);
	margin-bottom: 22px;
}
.hero__title .hl {
	background: linear-gradient(100deg, var(--sky), #9ad9f2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__lede {
	font-size: clamp(1.05rem, 1.9vw, 1.24rem);
	max-width: 700px;
	margin-bottom: 34px;
	color: rgba(255,255,255,.82);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
	list-style: none;
	padding-top: 26px;
	border-top: 1px solid rgba(255,255,255,.14);
}
.hero__meta li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	color: rgba(255,255,255,.74);
}
.hero__meta .icon { width: 18px; height: 18px; color: var(--sky); }

/* Compact hero for interior pages */
.page-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%);
	color: rgba(255,255,255,.84);
	padding: 76px 0 68px;
}
.page-hero__inner { position: relative; max-width: 800px; }
.page-hero__eyebrow {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sky);
	margin: 0 0 14px;
}
.page-hero__title { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 18px; }
.page-hero__lede { font-size: clamp(1.02rem, 1.7vw, 1.18rem); color: rgba(255,255,255,.82); margin: 0; }

/* ============================================================
   Bands and section heads
   ============================================================ */
.band { padding: 84px 0; }
.band--paper { background: var(--paper); }
.band--tint {
	background: linear-gradient(180deg, var(--white), var(--paper-2));
}
.band--dark {
	background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%);
	color: rgba(255,255,255,.82);
}
.band--dark h2, .band--dark h3 { color: #fff; }

.section-head { max-width: 720px; margin: 0 0 48px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.section-eyebrow {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue-text);
	margin: 0 0 12px;
}
.band--dark .section-eyebrow { color: var(--sky); }

.section-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 16px; }
.section-sub { font-size: 1.06rem; margin: 0; }
.band--dark .section-sub { color: rgba(255,255,255,.78); }

/* ============================================================
   Practice cards (the two placement practices)
   ============================================================ */
.practice-grid {
	display: grid;
	/* auto-fit rather than a fixed column count: two practices sit side by side,
	   three fit on a wide screen and wrap to two-then-one as it narrows, and a
	   fourth would not need a CSS change. */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 26px;
}

.practice-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 34px 32px 30px;
	box-shadow: var(--shadow-sm);
	transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
	overflow: hidden;
}
.practice-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--accent, var(--sky)), var(--accent2, var(--blue-deep)));
}
.practice-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky); }

/* Stretched link: the anchor is the real heading text, and its ::after covers
   the whole card so the entire surface is clickable. The pseudo-element carries
   the hit area, so nothing else needs pointer-events juggling and text remains
   selectable everywhere except directly over the heading. */
.practice-card__name a { color: var(--ink); }
.practice-card__name a:hover { color: var(--blue-text); text-decoration: none; }
.practice-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.practice-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(140deg, var(--accent, var(--sky)), var(--accent2, var(--blue-deep)));
	color: #fff;
	margin-bottom: 20px;
}
.practice-card__icon .icon { width: 26px; height: 26px; }

.practice-card__name { font-size: 1.5rem; margin-bottom: 10px; }
.practice-card__blurb { color: var(--body); margin-bottom: 20px; }

.practice-card__roles {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}
.practice-card__roles li {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--muted-text);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 12px;
}

/* Overflow counter on the practice card. Compound selector on purpose: `.practice-card__roles li`
   above is (0,1,1), so a lone class would lose on specificity and the fill would never clear.
   Dashed and unfilled so it reads as a count rather than another family name. */
.practice-card__roles li.practice-card__roles-more {
	background: transparent;
	border-style: dashed;
	color: var(--muted-text);
	opacity: .75;
}

.practice-card__more {
	margin-top: auto;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	color: var(--blue-text);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.practice-card:hover .practice-card__more { gap: 11px; }

/* ============================================================
   Role families (practice detail pages)
   ============================================================ */
.family-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.family-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 28px;
	box-shadow: var(--shadow-sm);
}
.family-card__title { font-size: 1.2rem; margin-bottom: 8px; }
.family-card__desc { font-size: 15px; color: var(--muted-text); margin-bottom: 18px; }
.family-card__roles { list-style: none; }
.family-card__roles li {
	position: relative;
	padding: 8px 0 8px 26px;
	border-top: 1px solid var(--line-soft);
	font-size: 15.5px;
	color: var(--ink);
}
.family-card__roles li:first-child { border-top: 0; }
.family-card__roles li::before {
	content: "";
	position: absolute;
	left: 4px; top: 16px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sky), var(--blue));
}

/* ============================================================
   Numbered steps (process) and feature grids
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }

.step {
	position: relative;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 26px;
	box-shadow: var(--shadow-sm);
}
.band--dark .step {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.12);
	box-shadow: none;
}
.step__num {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--blue-text);
	margin-bottom: 12px;
}
.band--dark .step__num { color: var(--sky); }
.step__title { font-size: 1.16rem; margin-bottom: 10px; }
.step__desc { font-size: 15.5px; margin: 0; }
.band--dark .step__desc { color: rgba(255,255,255,.76); }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; }

.feature {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 26px;
	box-shadow: var(--shadow-sm);
}
.band--paper .feature { background: var(--white); }
.feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 12px;
	background: linear-gradient(140deg, rgba(78,198,232,.18), rgba(47,159,214,.16));
	color: var(--blue-text);
	margin-bottom: 16px;
}
.feature__title { font-size: 1.14rem; margin-bottom: 9px; }
.feature__text { font-size: 15.5px; margin: 0; }

/* Feature cards on a dark band, matching how .step already inverts. Here rather
   than as inline styles on the one template that needed it first, so the next
   dark feature grid inherits it instead of re-deriving the same four values. */
.band--dark .feature {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}
.band--dark .feature__title { color: #fff; }
.band--dark .feature__text { color: rgba(255, 255, 255, .76); }
.band--dark .feature__icon { background: rgba(255, 255, 255, .1); color: var(--sky); }

/* The primary engagement model. Marked rather than merely listed first: on a
   four-card grid, position alone does not tell a scanner which one is the
   business's actual model. */
.feature--primary {
	border-color: var(--blue);
	box-shadow: 0 0 0 1px var(--blue), var(--shadow);
}
.feature__badge {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 11px;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--sky), var(--blue));
	color: #fff;
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Scoping badge: same shape as the primary badge but neutral, because it marks
   a limit on availability rather than a recommendation. A second gradient badge
   would read as a second endorsement. Must come AFTER .feature__badge — same
   specificity, so source order is what decides it. */
.feature__badge--muted {
	background: none;
	color: var(--muted-text);
	border: 1px solid var(--line);
}

/* The "who this is for" line under an add-on: set apart from the description
   above it by a rule and a smaller size, so a scanner can read just these three
   lines and self-select without reading the full card. */
.feature__for {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted-text);
}
.band--dark .feature__for {
	border-top-color: rgba(255, 255, 255, .14);
	color: var(--sky);
}

/* ============================================================
   Checklist (vetting gates)
   ============================================================ */
.checklist { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.checklist li {
	position: relative;
	padding-left: 42px;
}
.checklist__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ink);
	display: block;
	margin-bottom: 5px;
}
.band--dark .checklist__title { color: #fff; }
.checklist p { font-size: 15.5px; margin: 0; }
.band--dark .checklist p { color: rgba(255,255,255,.76); }
.checklist li::before {
	content: "";
	position: absolute;
	left: 0; top: 2px;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--orange-light), var(--orange));
	/* A check mark drawn in the mask, so it inherits the gradient. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
		linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
		linear-gradient(#000, #000);
	mask-composite: exclude;
}

/* ============================================================
   Region list
   ============================================================ */
.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; list-style: none; }
.region {
	border-left: 3px solid;
	border-image: linear-gradient(180deg, var(--sky), var(--blue-deep)) 1;
	padding: 4px 0 4px 20px;
}
.region__name { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--ink); display: block; margin-bottom: 6px; }
.band--dark .region__name { color: #fff; }
.region p { font-size: 15.5px; margin: 0; }
.band--dark .region p { color: rgba(255,255,255,.76); }

/* ============================================================
   Split content (image + prose)
   ============================================================ */
.split {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
}
.split--reverse .split__media { order: 2; }

.split__media {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: linear-gradient(140deg, var(--paper-2), var(--sky-soft));
	aspect-ratio: 4 / 3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* The placeholder shown until real photography is dropped in. */
.split__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	padding: 24px;
	color: var(--blue-text);
	background:
		repeating-linear-gradient(135deg, rgba(47,159,214,.07) 0 12px, transparent 12px 24px),
		linear-gradient(140deg, var(--paper-2), var(--sky-soft));
}
.split__placeholder .icon { width: 34px; height: 34px; opacity: .7; }
.split__placeholder b { font-family: var(--font-head); font-size: 15px; }
.split__placeholder span { font-size: 13px; color: var(--muted-text); max-width: 260px; }

.split__body h2 { font-size: clamp(1.7rem, 3.1vw, 2.3rem); }
.split__body .lead { font-size: 1.1rem; color: var(--ink); }
.prose-list { list-style: none; margin-top: 22px; }
.prose-list li {
	position: relative;
	padding: 10px 0 10px 30px;
	border-top: 1px solid var(--line-soft);
	font-size: 16px;
	color: var(--ink);
}
.prose-list li:first-child { border-top: 0; }
.prose-list li::before {
	content: "";
	position: absolute;
	left: 2px; top: 19px;
	width: 12px; height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sky), var(--blue));
}

/* ============================================================
   SEO landing pages
   ============================================================ */
.crumbs {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .62);
	margin-bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.crumbs a { color: rgba(255, 255, 255, .82); }
.crumbs a:hover { color: #fff; }

/* Long-form prose column. Narrower than the grid sections above and below it:
   these pages carry real reading, and a 1160px measure is unreadable. */
.prose { max-width: 760px; }
.prose h2 {
	font-size: clamp(1.45rem, 2.6vw, 1.85rem);
	margin-top: 1.9em;
}
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 17px; }

/* Compact gate list — the full descriptions live on How It Works, so these are
   labels only. Repeating the whole checklist on 19 pages would read templated. */

.feature--linked .feature__title a { color: var(--ink); }
.feature--linked .feature__title a:hover { color: var(--blue-text); text-decoration: none; }
.feature--linked { transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; }
.feature--linked:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sky); }

.pill-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.pill-links a {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--white);
	border: 1px solid var(--line);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink);
}
.pill-links a:hover { border-color: var(--blue); color: var(--blue-text); text-decoration: none; }


/* Single add-on package: prose on the left, its components on the right. A
   feature grid would read as several separate purchases, which it is not. */
.addon { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.addon__title { font-size: 1.35rem; margin-bottom: 12px; }
.addon__points { grid-template-columns: 1fr; gap: 16px; }
.addon__points .checklist__title { font-weight: 500; font-size: 15.5px; line-height: 1.5; }
@media (max-width: 860px) { .addon { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 860px; margin: 0 auto; }
.faq__item {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--white);
	margin-bottom: 12px;
	overflow: hidden;
}
.faq__q {
	cursor: pointer;
	list-style: none;
	padding: 20px 54px 20px 22px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.04rem;
	color: var(--ink);
	position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
	content: "";
	position: absolute;
	right: 22px; top: 50%;
	width: 11px; height: 11px;
	margin-top: -7px;
	border-right: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__a { padding: 0 22px 20px; }
.faq__a p { font-size: 15.8px; margin: 0; }

/* ============================================================
   CTA band
   ============================================================ */
.cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(125deg, var(--navy) 0%, var(--navy-2) 55%, var(--blue-deep) 130%);
	color: rgba(255,255,255,.84);
	padding: 78px 0;
	text-align: center;
}
.cta::after {
	content: "";
	position: absolute;
	width: 560px; height: 560px;
	border-radius: 50%;
	background: var(--sky);
	filter: blur(110px);
	opacity: .22;
	top: -280px; left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}
.cta__inner { position: relative; max-width: 700px; margin: 0 auto; }
.cta__title { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 14px; }
.cta__text { font-size: 1.06rem; margin-bottom: 28px; color: rgba(255,255,255,.82); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================================================
   Contact form
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 52px; align-items: start; }

.form-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 34px 32px;
	box-shadow: var(--shadow);
}

.field { margin-bottom: 20px; }
.field label,
.fieldset__legend {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	margin-bottom: 8px;
}
.field__hint { font-size: 13.5px; color: var(--muted-text); font-weight: 400; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field select,
.field textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 4px rgba(47, 159, 214, 0.16);
}
.field--error input,
.field--error select,
.field--error textarea { border-color: #c0392b; }
.field__error { display: block; color: #a5281a; font-size: 14px; margin-top: 6px; font-weight: 500; }

/* Intent picker — two large radio cards */
.intent { border: 0; padding: 0; margin: 0 0 24px; }
.intent__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.intent__option { position: relative; }
.intent__option input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	margin: 0;
}
.intent__option > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	min-height: 84px;
	padding: 14px 16px;
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.intent__label {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15.5px;
	color: var(--ink);
}
.intent__hint {
	font-size: 13px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--muted-text);
}
.intent__option input:checked + span {
	border-color: var(--blue);
	background: rgba(47, 159, 214, 0.09);
	color: var(--blue-text);
}
.intent__option input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }

.form-note { font-size: 13.5px; color: var(--muted-text); margin: 16px 0 0; }

.form-alert {
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	margin-bottom: 24px;
	font-size: 15.5px;
}
.form-alert--ok { background: #e8f7ef; border: 1px solid #b6e3c9; color: #14532d; }
.form-alert--bad { background: #fdecea; border: 1px solid #f5c2bb; color: #7f1d1d; }
.form-alert h2 { font-size: 1.1rem; margin: 0 0 6px; color: inherit; }
.form-alert ul { margin: 8px 0 0 18px; list-style: disc; }
.form-alert a { color: inherit; text-decoration: underline; }

.contact-aside__block { margin-bottom: 32px; }
.contact-aside__block h3 { font-size: 1.1rem; margin-bottom: 10px; }
.contact-aside__block p { font-size: 15.5px; }
.contact-aside__list { list-style: none; }
.contact-aside__list li { padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 15.5px; }
.contact-aside__list li:first-child { border-top: 0; }

/* ============================================================
   Blog
   ============================================================ */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.post-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 26px;
	box-shadow: var(--shadow-sm);
	transition: transform .2s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-card__date { font-size: 13.5px; color: var(--muted-text); margin-bottom: 8px; }
.post-card__title { font-size: 1.2rem; margin-bottom: 10px; }
.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--blue-text); text-decoration: none; }

.entry { max-width: 760px; margin: 0 auto; padding: 68px 0 84px; }
.entry__meta { font-size: 14px; color: var(--muted-text); margin-bottom: 10px; }
.entry__content h2 { margin-top: 1.6em; }
.entry__content h3 { margin-top: 1.4em; }
.entry__content ul, .entry__content ol { margin: 0 0 1.2em 1.3em; list-style: disc; }
.entry__content ol { list-style: decimal; }
.entry__content li { margin-bottom: .4em; }
.entry__content blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--blue);
	color: var(--ink);
	font-size: 1.06rem;
}

/* ============================================================
   404
   ============================================================ */
.notfound { text-align: center; max-width: 640px; margin: 0 auto; }
.notfound__code {
	font-family: var(--font-head);
	font-size: clamp(4rem, 12vw, 7rem);
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(120deg, var(--sky), var(--blue-deep));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 12px;
}
.notfound__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; list-style: none; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background: var(--navy);
	color: rgba(255,255,255,.7);
	padding: 66px 0 30px;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 44px;
	padding-bottom: 44px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer__lockup { height: 42px; width: auto; margin-bottom: 18px; }
.site-footer__tagline { font-size: 15px; color: rgba(255,255,255,.66); margin: 0; max-width: 320px; }

.site-footer__heading {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 16px;
}
.site-footer__col ul { list-style: none; }
.site-footer__col li { margin-bottom: 10px; }
.site-footer__col a { color: rgba(255,255,255,.72); font-size: 15px; }
.site-footer__col a:hover { color: var(--sky); text-decoration: none; }

.site-footer__address { font-style: normal; font-size: 15px; color: rgba(255,255,255,.6); margin-top: 12px; }

.site-footer__group {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.1);
}
.site-footer__group img { height: 26px; width: auto; opacity: .85; }
.site-footer__group p { font-size: 13.5px; color: rgba(255,255,255,.6); margin: 0; }
.site-footer__group a { color: rgba(255,255,255,.85); }

.site-footer__bottom { padding-top: 26px; }
.site-footer__bottom p { font-size: 13.5px; color: rgba(255,255,255,.55); margin: 0 0 8px; }
.site-footer__bottom a { color: rgba(255,255,255,.75); }

/* ============================================================
   Pricing: rate cards, coverage, calculator (calculator rebuilt 2026-10-26)
   ============================================================ */
.hero__limits {
	font-size: 14.5px;
	color: rgba(255,255,255,.72);
	margin: -30px 0 34px;
	max-width: 700px;
}
.hero__limits a { color: var(--sky); margin-left: 4px; white-space: nowrap; }

.seat-groups { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.seat-groups__links a { color: var(--ink); font-weight: 500; }
.seat-groups__links a:hover { color: var(--blue-text); }
.seat-groups__foot { margin: 30px auto 0; max-width: 760px; text-align: center; font-size: 15.5px; color: var(--muted-text); }

.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.price-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 26px;
	box-shadow: var(--shadow-sm);
}
.band--paper .price-card { background: var(--white); }
.price-card--calc { border-color: var(--blue-text); }
.price-card--calc .price-card__note a { display: inline-block; margin-top: 8px; font-weight: 600; }
.price-card__region {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--blue-text);
	margin: 0 0 10px;
}
.price-card__amount {
	font-family: var(--font-head);
	font-size: clamp(1.6rem, 2.6vw, 2rem);
	font-weight: 700;
	color: var(--ink);
	line-height: 1.15;
	margin: 0;
	letter-spacing: -0.02em;
}
.price-card__unit { font-size: 14.5px; color: var(--muted-text); margin: 4px 0 14px; }
.price-card__note { font-size: 15px; margin: 0; }
.price-grid__foot { margin: 22px 0 0; font-size: 15px; }

.coverage { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.coverage__col {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 26px;
	box-shadow: var(--shadow-sm);
}
.coverage__title { font-size: 1.14rem; margin-bottom: 14px; }
.coverage__list { list-style: none; }
.coverage__list li {
	position: relative;
	padding: 9px 0 9px 28px;
	border-top: 1px solid var(--line-soft);
	font-size: 15.5px;
	color: var(--ink);
}
.coverage__list li:first-child { border-top: 0; }
.coverage__list li::before {
	position: absolute;
	left: 2px;
	top: 9px;
	font-weight: 700;
}
.coverage__list--in li::before { content: "\2713"; content: "\2713" / ""; color: var(--blue-text); }
.coverage__list--out li::before { content: "\25CB"; content: "\25CB" / ""; color: var(--muted-text); }
.coverage__aside { font-size: 15px; color: var(--muted-text); margin: 18px 0 0; }

.checklist--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }

.page-hero__actions { margin: 28px 0 0; }
.page-hero__actions[hidden] { display: none; }

/* Price calculator: country, one row per seat, and the estimate. */
.calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}
.calc__main { display: grid; gap: 22px; min-width: 0; }
.calc-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: var(--shadow-sm);
	margin: 0;
	min-width: 0;
}
.calc-card__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-head);
	font-size: 1.14rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 16px;
	padding: 0;
}
/* A legend sits in the fieldset's border box; floating it full width lets the title behave like a heading. */
legend.calc-card__title { float: left; width: 100%; }
legend.calc-card__title + * { clear: both; }
.calc-card__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	background: var(--blue-text);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
.calc-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; }
.calc-card__foot .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.calc-card__limit { margin: 0; font-size: 14px; color: var(--muted-text); }
.calc-card__limit[hidden] { display: none; }
.calc-card__more { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 15px; }

.country-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.country-pick__option { position: relative; display: block; }
.country-pick__option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.country-pick__box {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 84px;
	padding: 16px 18px;
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	transition: border-color .18s ease, background .18s ease;
}
.country-pick__name { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); }
.country-pick__note { font-size: 14px; line-height: 1.4; color: var(--muted-text); }
.country-pick__option input:checked + .country-pick__box { border-color: var(--blue-text); background: rgba(47, 159, 214, 0.09); }
.country-pick__option input:focus-visible + .country-pick__box { outline: 3px solid var(--blue-deep); outline-offset: 3px; }

.seat-rows { display: grid; gap: 14px; }
.seat-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"role   count"
		"level  price"
		"blurb  remove";
	gap: 14px 18px;
	align-items: end;
	padding: 16px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.seat-row__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.seat-row__role { grid-area: role; }
.seat-row__level { grid-area: level; }
.seat-row__count { grid-area: count; }
.seat-row__price { grid-area: price; text-align: right; align-self: end; }
.seat-row__blurb { grid-area: blurb; margin: 0; font-size: 14px; color: var(--muted-text); align-self: center; }
.seat-row__remove { grid-area: remove; justify-self: end; }
.seat-row__level > legend { margin-bottom: 6px; }
.seat-row__label { display: block; padding: 0; font-size: 13px; font-weight: 600; color: var(--muted-text); }
.seat-row select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	background: var(--white);
	border: 1.5px solid #7a8ea4;
	border-radius: 8px;
}
.seat-row select:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.seat-row__amount { margin: 0; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.seat-row__each { margin: 2px 0 0; font-size: 13.5px; color: var(--muted-text); }
.seat-row__remove {
	min-height: 44px;
	padding: 0 10px;
	font: inherit;
	font-size: 14px;
	color: var(--blue-text);
	background: none;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
}
.seat-row__remove:hover { border-color: var(--line); }
.seat-row__remove[hidden] { display: none; }

.segmented { display: inline-flex; align-self: flex-start; max-width: 100%; border: 1.5px solid #7a8ea4; border-radius: 10px; background: var(--white); }
.segmented__option { position: relative; display: block; }
.segmented__option input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.segmented__text {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	border-left: 1px solid var(--line);
}
.segmented__option:first-child .segmented__text { border-left: 0; border-radius: 8px 0 0 8px; }
.segmented__option:last-child .segmented__text { border-radius: 0 8px 8px 0; }
.segmented__option input:checked + .segmented__text { background: var(--blue-text); color: #fff; }
.segmented__option input:focus-visible + .segmented__text { outline: 3px solid var(--navy); outline-offset: 2px; position: relative; z-index: 1; }

.stepper { display: inline-flex; align-self: flex-start; align-items: center; border: 1.5px solid #7a8ea4; border-radius: 8px; background: var(--white); }
.stepper__btn {
	width: 44px;
	min-height: 44px;
	font: inherit;
	font-size: 18px;
	font-weight: 600;
	color: var(--blue-text);
	background: none;
	border: 0;
	cursor: pointer;
}
.stepper__btn[aria-disabled="true"] { color: #b9c7d6; cursor: not-allowed; }
.stepper__input {
	width: 48px;
	min-height: 44px;
	padding: 0;
	font: inherit;
	font-size: 15px;
	text-align: center;
	color: var(--ink);
	background: none;
	border: 0;
	border-left: 1px solid var(--line);
	border-right: 1px solid var(--line);
	-moz-appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper :focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }

.calc__summary {
	padding: 26px;
	background: var(--ink);
	border-radius: var(--radius);
	color: #fff;
	box-shadow: var(--shadow);
}
.calc__summary-label { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.calc__from { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.78); }
.calc__total { margin: 0; font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 700; line-height: 1.1; color: #fff; letter-spacing: -0.02em; }
.calc__unit { margin: 4px 0 0; font-size: 15px; color: rgba(255,255,255,.86); }
.calc__compare { margin: 12px 0 20px; font-size: 14.5px; color: rgba(255,255,255,.72); min-height: 1.4em; }
.calc__summary .btn { display: flex; justify-content: center; white-space: normal; max-width: 100%; text-align: center; }
.calc__summary :focus-visible { outline-color: var(--sky); }
.calc__notes { list-style: disc; padding-left: 18px; margin: 22px 0 0; font-size: 13.5px; color: rgba(255,255,255,.78); }
.calc__notes li { margin-bottom: 8px; }
.calc__notes li:last-child { margin-bottom: 0; }

@media (forced-colors: active) {
	.segmented__option input:checked + .segmented__text { background: Highlight; color: HighlightText; forced-color-adjust: none; }
	.country-pick__option input:checked + .country-pick__box { border-color: Highlight; outline: 3px solid Highlight; }
	.country-pick__box,
	.segmented { border: 1.5px solid ButtonText; }
}

@media (min-width: 1000px) {
	.calc { grid-template-columns: minmax(0, 1fr) 340px; }
	.calc__summary { position: sticky; top: calc(var(--header-h) + 20px); }
}
@media (max-width: 620px) {
	.calc-card { padding: 18px 14px; }
	.seat-row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "role" "level" "count" "price" "blurb" "remove";
	}
	.seat-row__price { text-align: left; }
	.seat-row__remove { justify-self: start; padding: 0; }
	.segmented { display: flex; align-self: stretch; }
	.segmented__option { flex: 1 1 0; }
	.segmented__text { padding: 0 6px; }
	.calc__summary { padding: 22px 18px; }
}

/* The price list: every starting price in one table. It scrolls sideways on a phone. */
.price-table-wrap:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.price-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 15px; }
.price-table th,
.price-table td { padding: 11px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
.price-table thead th { font-size: 13px; font-weight: 600; color: var(--muted-text); background: var(--paper); }
.price-table thead tr:first-child th:first-child,
.price-table tbody th[scope="row"] { text-align: left; }
.price-table th.price-table__country { text-align: center; color: var(--ink); border-left: 1px solid var(--line); }
.price-table thead tr:first-child th:first-child,
.price-table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--white); box-shadow: 1px 0 0 var(--line); }
.price-table thead tr:first-child th:first-child { background: var(--paper); }
.price-table tbody th[scope="row"] { color: var(--ink); font-weight: 600; white-space: normal; }
.price-table td:nth-of-type(3n+1) { border-left: 1px solid var(--line-soft); }
.price-table__group th { text-align: left; position: sticky; left: 0; background: var(--paper); font-family: var(--font-head); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-text); }
.price-table tbody:last-child tr:last-child th,
.price-table tbody:last-child tr:last-child td { border-bottom: 0; }

/* Where we recruit: clock table and country sections */
.clock-table { margin-top: 34px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.clock-table table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 15px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.clock-table caption { caption-side: bottom; text-align: left; font-size: 14px; color: var(--muted-text); padding-top: 10px; }
.clock-table th, .clock-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.clock-table thead th { font-size: 13px; font-weight: 600; color: var(--muted-text); background: var(--paper); }
.clock-table tbody th { color: var(--ink); font-weight: 600; }
.clock-table tbody tr:last-child th, .clock-table tbody tr:last-child td { border-bottom: 0; }
.country__rate { margin: 26px 0 0; font-size: 15.5px; color: var(--ink); }
.country__rate a { margin-left: 6px; white-space: nowrap; }
.country__note { margin: 26px 0 0; font-size: 14.5px; color: rgba(255,255,255,.7); }

@media (max-width: 860px) {
	.coverage { grid-template-columns: 1fr; }
}
/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1020px) {
	/* Desktop nav collapse. Re-measured in-browser 2026-09-26 after Pricing replaced Contact
	   in the top row (Contact is the CTA button and stays in the footer): logo 162 + gap 20 +
	   menu 552 across six TOP-LEVEL items (Roles, Pricing, For MSPs, How It Works, For
	   Candidates, About) + gap 26 + CTA 134 + container padding 48 = 942px. The previous
	   six-item row measured 986px and first wrapped at 980px, so 1020 still leaves headroom
	   and keeps 1024px viewports on the full nav.
	   ONLY TOP-LEVEL ITEMS COUNT. Submenu items are absolutely positioned, so a dropdown can
	   hold four items or fifty without widening the header — which is why moving the practices
	   and the industries under two parents took this from 1256px to 986px. That is the sentence
	   that keeps this from going stale: the number tracks the top-level row, nothing else.
	   Add, rename or unnest a TOP-LEVEL item and measure again. Font fallbacks are not a risk,
	   every fallback in the stack is narrower than Space Grotesk (Inter 981, system-ui 972,
	   Arial 952), so 986 is the true worst case. The layout tier below sits at 980px. */
	.nav-toggle { display: flex; }
	.main-nav {
		position: fixed;
		inset: var(--header-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--white);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
		padding: 12px 24px 24px;
		/* Hidden by translate rather than display:none so the transition runs and
		   the panel is never a zero-height focus trap mid-animation. */
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: transform .2s ease, opacity .2s ease, visibility .2s;
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
	}
	.nav-open .main-nav { transform: translateY(0); opacity: 1; visibility: visible; }
	.nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-menu li { border-bottom: 1px solid var(--line-soft); }
	.nav-menu a { display: block; padding: 14px 0; font-size: 16px; }
	.nav-menu a::after { display: none; }

	/* In the hamburger panel the submenu is not a dropdown: it is always open and
	   indented, so every practice is reachable without a second tap. */
	.nav-menu .menu-item-has-children > a::before { display: none; }
	.nav-menu .menu-item-has-children::after { display: none; }
	.nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		padding: 0 0 8px 16px;
		margin: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.nav-menu .sub-menu li { border-bottom: 0; }
	.nav-menu .sub-menu a { padding: 10px 0; font-size: 15px; }
	/* The primary action sits above the list on a phone, not below it.
	   With two dropdowns expanded inline the panel runs past a 812px viewport, which
	   pushed "Start hiring" roughly 200px below the fold behind a scroll. Hoisting it
	   is a visual reorder only: focus order still reaches it after the menu items,
	   which is an accepted trade for a standalone button — it carries no sequence
	   meaning the list depends on. If the panel ever gains a second button, move it in
	   the markup instead so the two orders cannot drift apart. */
	.main-nav__cta { order: -1; margin: 0 0 18px; justify-content: center; }
}

@media (max-width: 980px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
	.contact-layout { grid-template-columns: 1fr; gap: 40px; }
	.split { grid-template-columns: 1fr; gap: 34px; }
	.split--reverse .split__media { order: 0; }
}

@media (max-width: 860px) {
	.practice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	body { font-size: 16px; }
	.band { padding: 60px 0; }
	.hero { padding: 66px 0 74px; }
	.page-hero { padding: 56px 0 50px; }
	.site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.intent__options { grid-template-columns: 1fr; }
	.hero__actions .btn, .cta__actions .btn { width: 100%; }
	.form-card { padding: 26px 20px; }
}

/* ============================================================
   Motion and print
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.site-header, .cta, .nav-toggle, .site-footer { display: none; }
	.hero, .page-hero { background: none; color: #000; padding: 20px 0; }
	.hero__title, .page-hero__title, .hero__lede, .page-hero__lede { color: #000; }
}