/*
Theme Name: Pacific Cloud Cyber
Theme URI: https://pacificcloudcyber.com
Author: Pacific Cloud Cyber
Author URI: https://pacificcloudcyber.com
Description: A custom theme for Pacific Cloud Cyber, an Oregon-based staffing firm placing technical talent (IT, cybersecurity, development, project management) and administrative talent (executive assistants, AP/AR, customer service) 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: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pacificcloud
*/

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

   The blues are sampled from the Pacific Cloud Cyber logo itself
   (#4ec6e8 at the top of the cloud through #2a6fb5 at the base),
   and the gray is the wordmark's own #58585a. Nothing here is an
   approximation of the brand — it is the brand.
   ============================================================ */
:root {
	/* Brand, straight off the logo */
	--sky:        #4ec6e8;
	--sky-soft:   #d8e6f2;
	--blue:       #2f9fd6;
	--blue-deep:  #2a6fb5;
	--slate:      #58585a;

	/* 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(--sky), var(--blue) 45%, var(--blue-deep));
	color: #fff;
	box-shadow: 0 12px 28px -12px rgba(47, 159, 214, 0.75);
}
.btn--primary:hover { box-shadow: 0 16px 34px -12px rgba(47, 159, 214, 0.85); color: #fff; }

.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;
}
.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;
	grid-template-columns: repeat(2, minmax(0, 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(--sky), var(--blue));
	/* 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. */
.checklist--compact {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px 22px;
}
.checklist--compact li { padding-left: 38px; }
.checklist--compact li::before { top: 0; width: 24px; height: 24px; }
.checklist--compact .checklist__title { margin-bottom: 0; font-size: 1rem; }

.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); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1140px) {
	/* Desktop nav collapse. Measured, not guessed: at nowrap the nav is 844px (six links plus the
	   CTA) and the logo is 191px, so with container padding the header needs 1103px to sit on one
	   line. Below that it rendered as a desktop nav wrapped onto three rows, because the hamburger
	   did not appear until 860. If the nav ever needs to survive narrower windows the fix is fewer
	   links or shorter labels, not a lower breakpoint. */
	.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; }
	.main-nav__cta { margin-top: 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; }
}