/*
 * Layout — containers, bands, header, footer.
 *
 * Selectors are prefixed .ants-* and never bare element or utility names, so
 * nothing collides with core block styles or fights theme.json over spacing.
 */

/* --- containers ----------------------------------------------------------- */
.ants-container {
	width: 100%;
	max-width: var(--ants-container);
	margin-inline: auto;
	padding-inline: var(--ants-gutter);
}
.ants-container--narrow { max-width: 900px; }

/* --- bands ---------------------------------------------------------------- */

/*
 * Bands abut. WordPress puts its flow-layout block gap between every sibling, which
 * opened a paper strip under the header, under the page header and between bands on
 * every interior page. Only full-width bands and the chrome lose the gap; prose inside
 * a band keeps the normal rhythm.
 */
.wp-site-blocks > * + *,
:where(.is-layout-flow, .is-layout-constrained) > .alignfull + .alignfull,
:where(.is-layout-flow, .is-layout-constrained) > .alignfull + .wp-block-post-content,
.wp-block-post-content > .alignfull:first-child {
	margin-block-start: 0;
}

.ants-band    { padding-block: var(--ants-band); }
.ants-band-sm { padding-block: var(--ants-band-sm); }
.ants-band-lg { padding-block: var(--ants-band-lg); }

.ants-dark   { background: var(--ants-ink);    color: var(--ants-on-dark); }
.ants-dark-2 { background: var(--ants-ink-2);  color: var(--ants-on-dark); }
.ants-tinted { background: var(--ants-tinted); }
.ants-paper  { background: var(--ants-paper); }

.ants-dark  h1, .ants-dark  h2, .ants-dark  h3,
.ants-dark  h4, .ants-dark  h5, .ants-dark  h6,
.ants-dark-2 h1, .ants-dark-2 h2, .ants-dark-2 h3,
.ants-dark-2 h4, .ants-dark-2 h5, .ants-dark-2 h6 { color: var(--ants-paper); }

.ants-dark a,
.ants-dark-2 a { color: var(--ants-paper); }
.ants-dark a:hover,
.ants-dark-2 a:hover { color: var(--ants-rose); }

.ants-tinted + .ants-tinted,
.ants-paper  + .ants-paper { padding-block-start: 0; }

/*
 * Hairline separators between stacked light sections. The design draws these on
 * the section itself rather than relying on the tone change alone.
 */
.ants-band--ruled { border-top: 1px solid var(--ants-rule); }

/* --- engineered texture, dark bands only ----------------------------------
 * Phase 3 §4: thin network line work at very low opacity, dark grounds only.
 * The design applies a 68px grid under a radial mask so it fades before it
 * reaches the text. Sits behind content and never intercepts pointer events.
 */
.ants-grid-texture { position: relative; overflow: hidden; isolation: isolate; }

.ants-grid-texture::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(120% 90% at 78% 20%, #000 20%, transparent 72%);
}

/* --- generic grids --------------------------------------------------------
 * --N means "up to N columns", as the design draws them. The percentage floor,
 * just over 1/(N+1), stops auto-fit adding an N+1th column on wide screens;
 * the pixel floor still collapses them on narrow ones.
 */
.ants-grid { display: grid; gap: var(--ants-gap-md); }
.ants-grid--2 { grid-template-columns: repeat(auto-fit, minmax(max(280px, 34%), 1fr)); }
.ants-grid--3 { grid-template-columns: repeat(auto-fit, minmax(max(260px, 25.5%), 1fr)); }
.ants-grid--4 { grid-template-columns: repeat(auto-fit, minmax(max(220px, 20.5%), 1fr)); }

/*
 * Hairline grid — the design's signature card treatment. Cards sit on a rule
 * coloured ground with a 1px gap, so the dividing lines are the ground showing
 * through rather than borders that would double up between neighbours.
 */
.ants-hairgrid {
	display: grid;
	gap: var(--ants-hairline);
	background: var(--ants-rule);
}
.ants-hairgrid > * { background: var(--ants-paper); }
.ants-tinted .ants-hairgrid > * { background: var(--ants-tinted); }
.ants-dark .ants-hairgrid,
.ants-dark-2 .ants-hairgrid { background: var(--ants-rule-dark-2); }
.ants-dark .ants-hairgrid > * { background: var(--ants-ink); }
.ants-dark-2 .ants-hairgrid > * { background: var(--ants-ink-2); }

.ants-hairgrid--2 { grid-template-columns: repeat(auto-fit, minmax(max(260px, 34%), 1fr)); }
.ants-hairgrid--3 { grid-template-columns: repeat(auto-fit, minmax(max(240px, 25.5%), 1fr)); }
.ants-hairgrid--4 { grid-template-columns: repeat(auto-fit, minmax(max(210px, 20.5%), 1fr)); }
.ants-hairgrid--5 { grid-template-columns: repeat(auto-fit, minmax(max(190px, 17%), 1fr)); }

/*
 * Split — the recurring asymmetric two-column section. Collapses to one column
 * before the narrower side becomes unreadable.
 */
.ants-split { display: grid; gap: var(--ants-gap-xl); }
@media (min-width: 900px) {
	/* minmax(0, …): a long unbreakable line (a mono link, a URL) must wrap, not widen
	   its column and squeeze the other. */
	.ants-split          { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
	.ants-split--even    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ants-split--wide-l  { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
	.ants-split--narrow-l{ grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}

/* Section header: title left, serif counterpoint right. */
.ants-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ants-gap-lg);
	flex-wrap: wrap;
	margin-bottom: var(--ants-gap-lg);
}
.ants-sechead__main { max-width: 640px; }
.ants-sechead__main > :last-child { margin-bottom: 0; }
.ants-sechead__aside {
	max-width: 340px;
	margin: 0 0 6px;
	font-family: var(--ants-font-serif);
	font-size: 1.063rem;
	line-height: 1.58;
	color: var(--ants-text-soft);
}
.ants-dark .ants-sechead__aside,
.ants-dark-2 .ants-sechead__aside { color: var(--ants-on-dark-soft); }

/* --- header --------------------------------------------------------------- */
.ants-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background: rgba(8, 17, 32, 0.97);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--ants-rule-dark);
	color: var(--ants-on-dark);
}

/* utility strip */
.ants-header__utility { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.ants-header__utility .ants-container {
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ants-gap-md);
	font-family: var(--ants-font-mono);
	font-size: var(--ants-eyebrow);
	letter-spacing: var(--ants-track-tag);
}
.ants-header__credentials { color: var(--ants-on-dark-mute); }
.ants-header__links {
	display: flex;
	align-items: center;
	gap: 22px;
	white-space: nowrap;
}
.ants-header__links a { color: var(--ants-on-dark-soft); }
.ants-header__links a:hover { color: var(--ants-paper); }
.ants-header__links a.is-primary { color: var(--ants-on-dark); }

@media (max-width: 767px) {
	.ants-header__credentials { display: none; }
	.ants-header__links { margin-inline-start: auto; gap: 16px; }
	/* The menu and every page reach Contact; on a phone the strip keeps the direct lines. */
	.ants-header__contact { display: none; }
}
/* WCAG 1.4.10 reflow at 320px: the strip keeps the two phone actions. */
@media (max-width: 400px) {
	.ants-header__email { display: none; }
}

/* main bar */
.ants-header__bar {
	min-height: 78px;
	display: flex;
	align-items: center;
	gap: var(--ants-gap-md);
}
.ants-header__logo { flex: none; display: flex; align-items: center; }
.ants-header__logo img,
.ants-header__logo svg { width: 116px; height: auto; }

.ants-header__cta { margin-inline-start: auto; flex: none; }

@media (max-width: 1099px) {
	/*
	 * Scoped through .ants-header: .ants-btn in components.css loads later with equal
	 * specificity and sets display, which kept the CTA on screen at phone widths and
	 * squeezed the burger to zero width — leaving the menu unreachable.
	 */
	.ants-header .ants-header__cta { display: none; }
}

/* --- primary navigation --------------------------------------------------- */
.ants-nav ul { list-style: none; margin: 0; padding: 0; }
.ants-nav > ul {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
}

.ants-nav a,
.ants-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 28px 11px;
	color: var(--ants-on-dark-lead);
	font-family: inherit;
	font-size: var(--ants-sm);
	font-weight: 500;
	white-space: nowrap;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color var(--ants-transition), border-color var(--ants-transition);
}
.ants-nav a:hover,
.ants-nav__toggle:hover,
.ants-nav__toggle[aria-expanded="true"] { color: var(--ants-paper); }

.ants-nav .current-menu-item > a,
.ants-nav [aria-current="page"] {
	color: var(--ants-paper);
	border-bottom-color: var(--ants-red);
}

.ants-nav__toggle::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--ants-transition);
}
.ants-nav__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(0); }

/*
 * Mega panel — light ground, so it reads as a sheet dropping over the page
 * rather than an extension of the dark header.
 */
.ants-nav__panel {
	display: none;
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	background: var(--ants-paper);
	border-bottom: 1px solid var(--ants-rule);
	box-shadow: 0 24px 48px -24px rgba(10, 20, 36, 0.3);
}
.ants-nav__panel.is-open { display: block; }
.ants-nav__panel .ants-container {
	display: grid;
	gap: var(--ants-gap-xl);
	padding-block: 36px 40px;
}
@media (min-width: 900px) {
	.ants-nav__panel .ants-container { grid-template-columns: 250px 1fr; }
}
.ants-nav__panel-blurb {
	margin: 0;
	font-family: var(--ants-font-serif);
	font-size: 1.031rem;
	line-height: 1.5;
	color: var(--ants-text-mute);
}
.ants-nav__panel-links {
	display: grid;
	gap: 8px 28px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	align-content: start;
}
.ants-nav__panel-links a {
	display: block;
	padding: 9px 0;
	border-bottom: 1px solid rgba(10, 20, 36, 0.08);
	color: var(--ants-text);
	font-size: var(--ants-sm);
	font-weight: 500;
	white-space: normal;
}
.ants-nav__panel-links a:hover { color: var(--ants-red-deep); }

/* mobile */
.ants-nav__burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	flex: none; /* A 44px target, never shrunk by its neighbours. */
	width: var(--ants-target);
	height: var(--ants-target);
	margin-inline-start: auto;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.ants-nav__burger span {
	display: block;
	height: 2px;
	background: var(--ants-paper);
}

@media (max-width: 1023px) {
	.ants-header__bar { min-height: 64px; }
	.ants-nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		max-height: calc(100vh - 102px);
		overflow-y: auto;
		background: var(--ants-ink-2);
		border-top: 1px solid var(--ants-rule-dark);
		padding: var(--ants-gap-sm) var(--ants-gutter) var(--ants-gap-md);
	}
	.ants-nav.is-open { display: block; }
	.ants-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.ants-nav > ul > li { border-bottom: 1px solid var(--ants-rule-dark); }
	.ants-nav a,
	.ants-nav__toggle {
		width: 100%;
		padding: 14px 0;
		justify-content: space-between;
		border-bottom: 0;
	}
	.ants-nav__panel {
		position: static;
		display: none;
		background: none;
		border: 0;
		box-shadow: none;
	}
	.ants-nav__panel.is-open { display: block; }
	.ants-nav__panel .ants-container {
		padding: 0 0 var(--ants-gap-sm);
		grid-template-columns: 1fr;
		gap: var(--ants-gap-sm);
	}
	.ants-nav__panel-blurb { display: none; }
	.ants-nav__panel-links a {
		color: var(--ants-on-dark-lead);
		border-bottom-color: rgba(255, 255, 255, 0.08);
		padding-inline-start: 14px;
	}
	.ants-nav__panel-links a:hover { color: var(--ants-paper); }
}

@media (min-width: 1024px) {
	.ants-nav__burger { display: none; }
	.ants-nav { display: block; }
}

/* --- footer --------------------------------------------------------------- */
.ants-footer {
	background: var(--ants-ink);
	color: var(--ants-on-dark-lead);
	font-size: var(--ants-sm);
}
.ants-footer__cols {
	display: grid;
	gap: var(--ants-gap-xl);
	padding-block: 72px 0;
}
@media (min-width: 900px) {
	.ants-footer__cols { grid-template-columns: 1.25fr repeat(3, 1fr); }
}
.ants-footer__brand { display: flex; flex-direction: column; gap: var(--ants-gap-sm); }
.ants-footer__logo img,
.ants-footer__logo svg { width: 148px; height: auto; }
.ants-footer__tagline {
	margin: 0;
	font-family: var(--ants-font-serif);
	font-style: italic;
	font-size: 1.188rem;
	color: var(--ants-on-dark);
}
.ants-footer__entities {
	margin: 0;
	max-width: 320px;
	font-size: var(--ants-xs);
	line-height: 1.72;
	color: var(--ants-on-dark-mute);
}
.ants-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--ants-xs);
	line-height: 1.7;
	color: var(--ants-on-dark-soft);
}
.ants-footer__contact a { color: var(--ants-on-dark); }
.ants-footer__hours { margin: 8px 0 0; }

.ants-footer h2,
.ants-footer h3 {
	margin-bottom: 13px;
	font-family: var(--ants-font-mono);
	font-size: var(--ants-tag);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(250, 248, 245, 0.58);
}
.ants-footer ul { list-style: none; margin: 0; padding: 0; }
.ants-footer li { margin-bottom: 9px; }
.ants-footer li a { color: var(--ants-on-dark-lead); font-size: var(--ants-sm); }
.ants-footer li a:hover { color: var(--ants-paper); }

.ants-footer__legal {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ants-gap-md);
	margin-block-start: 56px;
	padding-block: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--ants-font-mono);
	font-size: 0.688rem;
	letter-spacing: 0.08em;
	color: var(--ants-on-dark-mute);
}
.ants-footer__legal a { color: var(--ants-on-dark-mute); }
.ants-footer__legal a:hover { color: var(--ants-paper); }
.ants-footer__legal-links { display: flex; gap: 24px; flex-wrap: wrap; }
