/* Header */
.hdr {
	/* --hdr-bar-h now lives in tokens.css: the home hero depends on it too,
	   and it cannot read a variable declared on this element. */
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
	position: sticky;
	top: 0;
	z-index: 50;
}

.hdr__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: var(--hdr-bar-h);
}

.hdr__logo {
	font-size: 20px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--green);
	margin-right: auto;
}

.hdr__logo img { height: 44px; width: auto; }

.hdr__nav {
	display: flex;
	align-items: center;
	gap: 28px;
}

.hdr__menu {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hdr__menu a {
	font-size: var(--step-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* The child combinator is load-bearing. The submenu is nested INSIDE the
   list item WordPress marks as current, so a descendant selector underlined
   every link in the dropdown as well: standing on /loan-programs/, all five
   children read as the page you are on. Only the item's own link is. */
.hdr__menu .current-menu-item > a {
	border-bottom: 2px solid var(--green);
	padding-bottom: 4px;
}

/* Positioning context for dropdown submenus. */
.hdr__menu li {
	position: relative;
}

/* Submenu dropdown: hidden by default, revealed on hover or keyboard focus. */
.hdr__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	/* A floor for a short menu, not a width: the panel sizes itself to its
	   widest item (see `white-space: nowrap` below) plus the items' own
	   inset, which is what keeps the two margins equal. A fixed 240px left
	   62px of slack on the right against 21px on the left. */
	min-width: 200px;
	margin: 0;
	/* padding-inline, not padding-block alone. This is a nested <ul>, so it
	   does not carry .hdr__menu and never got that class's `padding: 0`:
	   the browser's own 40px list indent stayed on it, and with the 20px
	   the items add themselves the panel was inset 60px on the left and
	   20px on the right. The indent belongs to the items, not to the box. */
	padding-inline: 0;
	padding-block: 12px;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--rule);
	display: none;
	z-index: 60;
}

.hdr__menu .sub-menu li {
	padding-inline: 20px;
}

/* One line per item. Wrapping is what a fixed panel width forces on the
   longest name -- "New Construction Loans" broke across two lines and the
   dropdown stopped being a list of five things. Left to size itself, the
   panel is as wide as its widest item and every item is one line. */
.hdr__menu .sub-menu a { white-space: nowrap; }

/* Reveal on hover and on focus-within so keyboard users can tab into it. */
.hdr__menu li:hover > .sub-menu,
.hdr__menu li:focus-within > .sub-menu {
	display: block;
}

.hdr__cta {
	border: 1px solid var(--ink);
	padding: 12px 28px;
	font-size: var(--step-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.hdr__cta:hover {
	background: var(--ink);
	color: var(--paper);
}

.hdr__invest {
	font-size: var(--step-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--green);
	white-space: nowrap;
	padding-block: 3px 0;
}

.hdr__invest:hover {
	text-decoration: underline;
}

/*
 * `.hdr .hdr__burger`, not `.hdr__burger`. Contact is the one page that keeps
 * Elementor, and its kit styles every <button> on the page through
 * `.elementor-kit-36 button` -- two selectors to this rule's one, so it won
 * and painted the burger in the old accent blue with white glyphs. The extra
 * class matches its specificity and takes the element back.
 *
 * `color: inherit` for the same reason: the kit sets a colour too, and the
 * glyph has to follow the bar it sits in -- ink normally, paper while the
 * header is transparent over the home hero.
 */
.hdr .hdr__burger {
	display: none;
	background: none;
	border: 0;
	color: inherit;
	font-size: 22px;
	cursor: pointer;
}

/*
 * The same fight, one state along. The kit styles the hover and focus of
 * every button too -- `.elementor-kit-36 button:hover` is (0,2,1) against
 * this rule's resting (0,2,0) -- and it sets the colour there, so tapping
 * the burger on Contact turned the glyph white on white paper. Adding the
 * pseudo-class puts this at (0,3,0) and takes the state back.
 *
 * The background is restated even though the kit leaves it alone on hover
 * today: both the resting background and the hover background are fields on
 * the same Elementor Kit screen in wp-admin, and one of them is already set.
 */
.hdr .hdr__burger:hover,
.hdr .hdr__burger:focus,
.hdr .hdr__burger:active {
	background: none;
	color: inherit;
}

/*
 * And a focus ring, because there was none: the element is a <button>, so
 * the `a:focus-visible` rule in base.css never reached it, and the kit
 * suppresses the browser's own outline. Tabbing to the one control the
 * mobile header has showed nothing at all.
 *
 * Inset rather than outside the box: the burger carries the full 88px bar
 * height on a phone (that is what stops the bar jumping when the menu
 * opens), so a ring drawn around it would trace a tall empty rectangle
 * instead of the glyph.
 */
.hdr .hdr__burger:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: -6px;
}

@media (max-width: 900px) {
	/* The nav drops to a band of its own under the bar, and `flex-basis:100%`
	   below is what asks for it — but a flex row only breaks if it is allowed
	   to wrap. Without this the nav stayed a fourth item on the single row,
	   every item shrank to share 390px, and the logo was squeezed to zero
	   width while the menu became a clipped column beside the burger. */
	.hdr__inner { flex-wrap: wrap; }

	/* `min-height` on the flex container sizes the CONTAINER, not a line.
	   Closed, the bar is one line and stretches to fill those 88px; opened,
	   there are two lines, the container is taller than its minimum, and the
	   first line collapses to its tallest item — so logo, Apply and burger
	   jumped up 20px the moment the menu was tapped. The burger carries the
	   bar's height instead: it is the one control with no border or
	   background, so a taller box is invisible, costs no horizontal shift,
	   and enlarges a tap target that was only 28px tall. */
	.hdr .hdr__burger { display: block; order: 3; min-height: var(--hdr-bar-h); }

	.hdr__nav { display: none; flex-basis: 100%; order: 4; }
	.hdr__nav.is-open { display: block; }
	.hdr__menu { flex-direction: column; gap: 16px; padding-block: 20px; }

	.hdr__invest {
		display: block;
		border-top: 1px solid var(--rule);
		padding-block: 16px 20px;
	}

	/* Submenus go back to static, always-visible, indented flow on mobile. */
	.hdr__menu .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		border: 0;
		padding-block: 0;
		padding-inline-start: 20px;
	}
}

/*
 * The header over a photographic page head.
 *
 * The hero is a photograph that should start at the top of the screen, not
 * 88px down it, so the bar sits on the picture instead of above it: the
 * hero is pulled up by exactly the bar's height and the bar goes
 * transparent until the reader scrolls past it.
 *
 * Sticky, still -- not fixed. Fixed would take the bar out of the flow and
 * out from under the demo-data warning that renders above it for a signed-
 * in editor, which the bar would then cover. Sticky keeps the document
 * stack honest, and the hero's own negative margin does the rest.
 *
 * Gated on `.js` (set inline in the head, see apollonia_print_js_flags),
 * because what brings the solid bar back is a scroll handler. Without
 * script the header stays exactly what it is on every other page and the
 * hero is not pulled underneath it -- a shorter opening, never white type
 * on white paper.
 */
.js .apollonia-photo-head .hero,
.js .apollonia-photo-head .pagehead--photo {
	/* The bar plus its 1px rule. */
	margin-top: calc(-1 * (var(--hdr-bar-h) + 1px));
}

.js .apollonia-photo-head .hdr {
	background: transparent;
	border-bottom-color: transparent;
	color: var(--paper);
	transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

/* The wordmark is a dark-green PNG with no light variant. Reduced to pure
   black and inverted, it becomes the white wordmark the photograph needs;
   the green returns with the solid bar. */
.js .apollonia-photo-head .hdr__logo img {
	filter: brightness(0) invert(1);
	transition: filter 0.45s ease;
}

.js .apollonia-photo-head .hdr__cta { border-color: rgba(255, 255, 255, 0.5); }

.js .apollonia-photo-head .hdr__cta:hover {
	background: var(--paper);
	color: var(--ink);
}

/* White, not the dark-ground green. Over the sunset in the photograph the
   green measures about 3.4:1 -- below AA for text -- and the only scrim
   dark enough to rescue it would have put a visible band across the sky.
   The link is told apart by its place in the bar here; the green comes back
   with the solid header. */
.js .apollonia-photo-head .hdr__invest { color: var(--paper); }
.js .apollonia-photo-head .hdr__menu .current-menu-item > a { border-bottom-color: var(--paper); }
.js .apollonia-photo-head .hdr a:hover { color: var(--green-on-ink); }
.js .apollonia-photo-head .hdr a:focus-visible,
.js .apollonia-photo-head .hdr .hdr__burger:focus-visible { outline-color: var(--green-on-ink); }

/*
 * The dropdown is the exception to all of the above, and it has to be stated
 * rather than inherited. The panel paints its own white ground, so it is the
 * one part of the transparent bar that is NOT over the photograph: the white
 * type the rest of the bar needs was white on white inside it, and the
 * dark-ground green a hover there would have taken is 2.3:1 on paper.
 *
 * It read as an empty box for the whole length of the hero and only appeared
 * once the reader scrolled far enough to make the bar solid.
 */
.js .apollonia-photo-head .hdr .sub-menu { color: var(--ink); }
.js .apollonia-photo-head .hdr .sub-menu a:hover { color: var(--green); }
.js .apollonia-photo-head .hdr .sub-menu a:focus-visible { outline-color: var(--green); }

/*
 * Back to the ordinary bar: once the reader has left the hero (`is-solid`,
 * set by the scroll handler) and whenever the mobile menu is open, where
 * the opened panel is a band of links over a photograph and needs a ground
 * of its own.
 */
.js .apollonia-photo-head .hdr.is-solid,
.js .apollonia-photo-head .hdr.is-menu {
	background: var(--paper);
	border-bottom-color: var(--rule);
	color: var(--ink);
}

.js .apollonia-photo-head .hdr.is-solid .hdr__logo img,
.js .apollonia-photo-head .hdr.is-menu .hdr__logo img { filter: none; }

.js .apollonia-photo-head .hdr.is-solid .hdr__cta,
.js .apollonia-photo-head .hdr.is-menu .hdr__cta { border-color: var(--ink); }

.js .apollonia-photo-head .hdr.is-solid .hdr__cta:hover,
.js .apollonia-photo-head .hdr.is-menu .hdr__cta:hover {
	background: var(--ink);
	color: var(--paper);
}

.js .apollonia-photo-head .hdr.is-solid .hdr__invest,
.js .apollonia-photo-head .hdr.is-menu .hdr__invest { color: var(--green); }

.js .apollonia-photo-head .hdr.is-solid .hdr__menu .current-menu-item > a,
.js .apollonia-photo-head .hdr.is-menu .hdr__menu .current-menu-item > a { border-bottom-color: var(--green); }

.js .apollonia-photo-head .hdr.is-solid a:hover,
.js .apollonia-photo-head .hdr.is-menu a:hover { color: var(--green); }

.js .apollonia-photo-head .hdr.is-solid a:focus-visible,
.js .apollonia-photo-head .hdr.is-menu a:focus-visible,
.js .apollonia-photo-head .hdr.is-solid .hdr__burger:focus-visible,
.js .apollonia-photo-head .hdr.is-menu .hdr__burger:focus-visible { outline-color: var(--green); }

@media (prefers-reduced-motion: reduce) {
	.js .apollonia-photo-head .hdr,
	.js .apollonia-photo-head .hdr__logo img { transition: none; }
}

/* Footer */
.ftr { padding-block: var(--space-section) 40px; }
.ftr__inner { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; }
.ftr__label {
	font-size: var(--step-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

/* The label is 3.68:1 on --ink, below the 4.5:1 AA minimum, so on the dark
   ground it takes the dark-ground token instead (6.39:1).

   Scoped to .section--ink rather than changed in the rule above, because
   this class is NOT footer-only despite its name: tpl-contact.php reuses
   it for the "Direct" and "Office" headings in the contact details column,
   which sits on --paper. Recolouring it outright dropped that column to
   3.10:1 -- the Playwright contrast probe on /contact/ caught it. */
.section--ink .ftr__label { color: var(--muted-on-ink); }
.ftr__menu { list-style: none; margin: 0; padding: 0; }
.ftr__base { border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 64px; padding-top: 24px; }

@media (max-width: 768px) {
	.ftr__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Section label */
.slabel {
	display: inline-flex;
	align-items: stretch;
	margin: 0 0 48px;
	/* The marker is an <h2>, and the heading rules in base.css set
	   line-height: 1.05 for the type scale. That would shrink the box by
	   about 8px; inheriting restores the body leading the element had
	   while it was still a <p>. */
	line-height: inherit;
	border: 2px solid var(--ink);
	font-size: var(--step-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.slabel__text { padding: 12px 18px; }

.slabel__mark {
	display: flex;
	align-items: center;
	padding: 0 14px;
	border-left: 2px solid var(--ink);
}

/* The marker is drawn in --ink, which is the ground itself on a dark
   section: it opened the process block as an invisible box. On that ground
   the rule is the paper colour, like every other line there. */
.section--ink .slabel { border-color: var(--paper); }
.section--ink .slabel__mark { border-left-color: var(--paper); }

/* Stat band.

   The four figures the client publishes, and the only numbers on the site.
   They sit directly under the hero on the same dark ground, so the page
   opens on one continuous dark block -- photograph, then evidence -- before
   it turns to light.

   A ruled grid rather than a flex row of gaps: the hairlines make four
   figures read as one table of record instead of four loose captions, and
   they hold their columns however long a value the client sends. */
.statband {
	padding-block: clamp(44px, 4.6vw, 72px);
	border-top: 1px solid var(--rule-on-ink);
}

.statband__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.statband__item {
	padding-inline: clamp(16px, 2.4vw, 44px);
	border-left: 1px solid var(--rule-on-ink);
}

/* The first column starts at the page edge; the rest are divided. */
.statband__item:first-child { padding-left: 0; border-left: 0; }

.statband__value {
	font-size: clamp(34px, 4.4vw, 72px);
	/* Lighter than the body scale: at this size 300 reads heavy, and the
	   figures are the one place on the page where the type is large enough
	   for 200 to still be perfectly solid. */
	font-weight: 200;
	letter-spacing: -0.02em;
	/* Paper, not the brand green. Four mint figures at 72px were the
	   loudest thing on the page and read as a dashboard; set in white
	   against muted labels they read as a statement of record, which is
	   what they are. The green stays an accent -- the hero rule, the step
	   numerals, every hover -- rather than a highlighter. */
	color: var(--paper);
	display: block;
	line-height: 1;
	margin-bottom: 14px;
}

.statband__label {
	font-size: var(--step-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* 6.39:1 on --ink. */
	color: var(--muted-on-ink);
}

@media (max-width: 860px) {
	.statband__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(28px, 5vw, 40px); }
	/* Two columns, so every odd cell is now a row opener and loses its
	   divider -- otherwise the second row draws a line against the page
	   edge. */
	.statband__item:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Page head.

   Two shapes from one part (template-parts/page-head.php): the plain dark
   band the legal pages and the 404 keep, and the photographic head every
   page with a picture of its own now takes. The second is the home hero at
   a shorter height and shares its rules -- see the .hero block in pages.css,
   which both selectors sit in. */
.pagehead {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	background: var(--ink);
	color: var(--paper);
	padding-block: clamp(72px, 10vw, 148px) clamp(48px, 5vw, 76px);
	overflow: hidden;
}

.pagehead__inner { width: 100%; }

.pagehead__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(38px, 5.4vw, 84px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	max-width: 18ch;
	margin: 0;
}

.pagehead__rule {
	display: block;
	width: 64px;
	height: 1px;
	margin-bottom: clamp(24px, 2.6vw, 38px);
	background: var(--green-on-ink);
}

/* The photographic variant. Taller, because it is carrying a picture, and
   the top padding also has to clear the header bar sitting on it. */
.pagehead--photo {
	min-height: min(62vh, 640px);
	padding-block: clamp(150px, 20vh, 230px) clamp(48px, 5vw, 84px);
}

.pagehead__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.pagehead__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Loan table */
.loantable { width: 100%; border-collapse: collapse; max-width: 860px; }

.loantable__row { border-bottom: 1px solid var(--rule); }
.loantable__row:first-child { border-top: 1px solid var(--rule); }

.loantable__key {
	text-align: left;
	font-weight: 500;
	font-size: var(--step-caption);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 20px 32px 20px 0;
	width: 38%;
	vertical-align: top;
}

.loantable__val { padding: 20px 0; }

@media (max-width: 600px) {
	.loantable__key, .loantable__val { display: block; width: 100%; }
	.loantable__key { padding-bottom: 4px; }
	.loantable__val { padding-top: 0; padding-bottom: 20px; }
}

/* Both tables now sit on a dark band -- the terms on a loan page, the
   comparison on the hub -- so their hairlines and their key column take the
   dark-ground tokens there. --muted is 3.68:1 on --ink and fails AA; the
   sibling token is 6.39:1. Scoped to .section--ink, because the same two
   tables are still drawn on paper elsewhere. */
.section--ink .loantable__row,
.section--ink .loantable__row:first-child,
.section--ink .comparetable th,
.section--ink .comparetable td { border-color: var(--rule-on-ink); }

.section--ink .loantable__key,
.section--ink .comparetable tbody th { color: var(--muted-on-ink); }

.section--ink .comparetable thead th { border-bottom-color: var(--paper); }

/* Comparison table: scrolls inside its own container, never the page. */
.comparewrap { overflow-x: auto; }

.comparetable { border-collapse: collapse; min-width: 900px; width: 100%; }

.comparetable th, .comparetable td {
	border-bottom: 1px solid var(--rule);
	padding: 18px 20px;
	text-align: left;
	vertical-align: top;
}

.comparetable thead th {
	border-bottom: 2px solid var(--ink);
	font-weight: 500;
	font-size: var(--step-caption);
}

.comparetable tbody th {
	font-weight: 500;
	font-size: var(--step-caption);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}

/* Deal grid */
.dealgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.dealcard__img { margin-bottom: 16px; filter: grayscale(1); }
.dealcard__amount { font-size: 24px; font-weight: 300; margin: 0 0 4px; }
.dealcard__meta { font-size: var(--step-caption); margin: 0; }

/* People grid */
.peoplegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 64px; }
.peoplegroup { font-size: var(--step-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 48px; }
.personcard { border: 1px solid var(--rule); padding: 24px; }
.section--ink .personcard { border-color: var(--rule-on-ink); }

/* Same treatment as the transaction cards, so a grid of faces and a grid of
   properties read as one system. A fixed aspect ratio keeps the row of cards
   even when the headshots are not all cropped alike -- which they will not
   be, since they arrive from the client. */
.personcard__img { margin: -24px -24px 20px; }
.personcard__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }
.personcard__name { margin: 0 0 4px; }
.personcard p { margin: 0 0 6px; }

@media (max-width: 1000px) { .dealgrid { grid-template-columns: repeat(2, 1fr); } .peoplegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .dealgrid, .peoplegrid { grid-template-columns: 1fr; } }

/* Demo-data bar.

   Shown only to signed-in editors (see inc/demo.php): an anonymous visitor
   sees the finished design, which is the only reason the demo content
   exists. Deliberately loud -- this is a warning, not a design element, and
   it stops being rendered the moment the demo content is purged. */
.demobar {
	background: #B3261E;
	color: #FFFFFF;
	font-size: var(--step-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	padding: 10px 20px;
}

.demobar__note {
	letter-spacing: 0.02em;
	text-transform: none;
	opacity: 0.9;
}

/* Optional date under the headline figures. */
.statband__asof { margin: 16px 0 0; font-size: var(--step-caption); }

/* Tab groups.

   Rebuilt from the client's stored content (apollonia_rebuild_tabs), so the
   markup is ours but the copy inside a panel is theirs and can be anything.
   Nothing here assumes a length. */
.tabs { margin: 0 0 var(--space-block, 48px); }

.tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 32px;
}

.tabs__tab {
	appearance: none;
	background: none;
	border: 0;
	/* The underline that marks the current tab sits on this edge, so the
	   space is reserved on every tab -- otherwise selecting one shifts the
	   whole row by 2px. */
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 14px 24px 12px 0;
	margin-right: 32px;
	font: inherit;
	font-size: var(--step-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
}

.tabs__tab:hover { color: var(--ink); }

.tabs__tab[aria-selected="true"] {
	color: var(--ink);
	border-bottom-color: var(--green);
}

.tabs__tab:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

/* The panel takes focus when a reader arrows into it, and a focus ring on a
   block of prose is more distracting than useful -- the heading inside it
   already says where they are. */
.tabs__panel:focus { outline: none; }

/* The first heading in a panel opens the panel: its top margin would push
   the content away from the tabs it belongs to. */
.tabs__panel > :first-child { margin-top: 0; }

@media (max-width: 600px) {
	.tabs__list { border-bottom: 0; }

	/* Full-width rows rather than a cramped wrap: four uppercase labels do
	   not fit across 350px, and a tab that wraps mid-word is unreadable. */
	.tabs__tab {
		flex: 1 0 100%;
		margin-right: 0;
		padding: 14px 0;
		border-bottom: 1px solid var(--rule);
		text-align: left;
	}

	.tabs__tab[aria-selected="true"] { border-bottom-color: var(--green); }
}