/* ============================================================
   BASE: reset, typography, and the global shell.
   Every value cites a token. No raw hex or px for colour/size.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* room for the fixed mobile action bar so it never covers the footer */
  padding-bottom: 0;
  /* Defensive baseline: if any single element ever overflows its
     container width (a mistake, not a design choice), this contains the
     damage to that element instead of letting it widen the WHOLE page's
     scrollable area - which is what actually causes an "everything has
     shifted right" symptom site-wide, since centered elements measure
     against that wider scrollable width, not the visible viewport. */
  overflow-x: hidden;
}
@media (max-width: 767px) {
  body { padding-bottom: var(--mobilebar-h); }
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  line-height: var(--leading-head);
  color: var(--green-text);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { max-width: 68ch; }

a { color: var(--green-text); text-underline-offset: 0.15em; }
a:hover { color: var(--green-fill); }

/* Visible keyboard focus, token-coloured, on every interactive element.
   :focus-visible (not :focus) so a mouse click doesn't show the ring,
   only actual keyboard/assistive-tech navigation does. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--green-fill);
	outline-offset: 2px;
	border-radius: 4px;
}

img, svg { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link for keyboard users (accessibility / trust) */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--green-deep); color: var(--on-dark);
  padding: var(--space-2) var(--space-4); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-strong);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill); border: 0; cursor: pointer;
  text-decoration: none; line-height: 1;
}
.btn--primary { background: var(--green-button); color: var(--surface); }
.btn--primary:hover { background: var(--green-text); color: var(--surface); }
.btn--ghost { background: transparent; color: var(--green-text); box-shadow: inset 0 0 0 1.5px var(--green-fill); }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); min-height: 100px; /* matches the approved design's ~108px header */
}
.site-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.site-brand__mark { height: 46px; width: auto; }
.site-brand__text {
  font-family: var(--font-head); font-weight: var(--weight-head);
  font-size: var(--step-1); color: var(--green-text); letter-spacing: -0.02em;
}

.primary-nav ul {
  list-style: none; display: flex; gap: var(--space-6); padding: 0; margin: 0;
}
.primary-nav a {
  font-family: var(--font-body); font-weight: var(--weight-strong);
  color: var(--ink); text-decoration: none; padding: var(--space-2) 0;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a { color: var(--green-text); }

/* Mobile: nav collapses behind a disclosure button (still exactly the 4 items, no dropdowns) */
.nav-toggle { display: none; background: none; border: 0; padding: var(--space-2); cursor: pointer; }
@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--hairline); }
  .primary-nav[data-open="true"] { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; padding: var(--space-2) var(--gutter) var(--space-4); }
  .primary-nav li { border-top: 1px solid var(--hairline); }
  .primary-nav a { display: block; padding: var(--space-4) 0; }
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--green-deep); color: var(--on-dark);
  padding-block: var(--space-16);
  font-size: var(--step--1);
  line-height: 1.7;
}
.site-footer a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer h2 { color: var(--on-dark); font-size: var(--step-1); margin-bottom: var(--space-4); }
.site-footer__grid {
  display: grid; gap: var(--space-12) var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Every direct paragraph/address in a footer column gets real breathing
   room from its neighbour - the CSS reset strips ALL default margins
   (* { margin: 0; }), so without this every line here sat with zero gap
   between it and the next, which is what actually read as "clogged". */
.site-footer__grid > div > * + * { margin-top: var(--space-3); }
.site-footer__entity { font-family: var(--font-head); font-size: var(--step-1); }
.site-footer__logo { height: 34px; width: auto; margin-bottom: var(--space-1); }
.site-footer__subentity { color: var(--on-dark); font-size: var(--step--1); }
.site-footer__branch-tag {
  display: inline-block; margin-bottom: var(--space-2);
  padding: 3px 10px; border-radius: var(--radius-sm);
  background: var(--mint); color: var(--green-text);
  font-family: var(--font-head); font-size: 10px; letter-spacing: 0.06em;
}
.site-footer__hours { color: var(--on-dark); font-size: var(--step--1); }
.site-footer__disclaimer { color: var(--on-dark); opacity: 0.85; max-width: 60ch; margin-top: var(--space-8); }
.site-footer__legal {
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid rgba(243, 248, 243, 0.15);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  align-items: center; justify-content: space-between;
}
.site-footer__regulatory { margin-top: var(--space-4); font-size: 0.78rem; color: var(--on-dark); opacity: 0.8; }
address.site-footer__address { font-style: normal; }
address { font-style: normal; } /* browsers italicize <address> by default; never intentional here */
@media (max-width: 700px) {
  .site-footer { padding-block: var(--space-12); }
  .site-footer__grid { gap: var(--space-8) var(--space-6); }
}

/* ---------------- Persistent mobile action bar ---------------- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none;
  grid-template-columns: 1fr 1fr;
  height: var(--mobilebar-h);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}
.mobile-bar a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-strong);
  text-decoration: none; color: var(--green-text);
}
.mobile-bar a + a { border-left: 1px solid var(--hairline); }
.mobile-bar a[data-action="whatsapp"] { color: var(--surface); background: var(--green-button); }
@media (max-width: 767px) {
  .mobile-bar { display: grid; }
}

/* ============================================================
   PAGE COMPONENTS (Day 3): hero, rate board, mission/vision,
   values, iron-hill band, service cards, org chart, commitment,
   contact form, location cards.
   ============================================================ */

.eyebrow {
  font-family: var(--font-head); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint);
}
.eyebrow--onlight { color: var(--green-text); }

.page-hero { background: var(--green-deep); color: var(--on-dark-strong); position: relative; overflow: hidden; }
/* Subtle geometric accent: a soft ring and a few dots, low-opacity, purely
   decorative, reinforcing the brand's own circular/node motif from the
   logo without competing with the text. No image asset, pure CSS. */
.page-hero::before {
	content: ""; position: absolute; top: -80px; right: -80px;
	width: 340px; height: 340px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.08);
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), transparent 60%);
	pointer-events: none;
}
.page-hero::after {
	content: ""; position: absolute; bottom: -40px; right: 120px;
	width: 140px; height: 140px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.06);
	pointer-events: none;
}
@media (max-width: 900px) { .page-hero::before, .page-hero::after { display: none; } }
.page-hero__inner { max-width: var(--container); margin-inline: auto; padding: var(--space-8) var(--gutter); position: relative; }
.page-hero__body { max-width: 62ch; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, var(--step-4)); line-height: 1.12; margin-top: var(--space-4); }
/* Each phrase forced onto its own line, guaranteed - not left to hope
   the exact pixel math works out. display:block does the line-break
   unconditionally at any width (replacing a plain <br>); white-space:
   nowrap is added ONLY on desktop, where the text column is genuinely
   narrow (competing with the fixed-width rate card next to it) and the
   larger heading size could otherwise wrap "A Legacy of Trust," onto a
   second line by itself, turning 2 intended lines into 3. Below 901px
   the hero stacks to one column and gets the full width anyway, so
   natural wrapping there is safe to leave alone. */
.page-hero__title-line { display: block; }
@media (min-width: 901px) { .page-hero__title-line { white-space: nowrap; } }
/* Home's hero no longer has an eyebrow line above the heading, so when h1
   is the very first thing in the hero body (true only there, every other
   page's hero still has its eyebrow), it sits closer to the top instead
   of carrying a gap meant for spacing after an eyebrow that isn't there. */
.page-hero__body > h1:first-child { margin-top: 0; }
.page-hero p { color: var(--on-dark); margin-top: var(--space-3); }
.page-hero__stats { display: flex; gap: var(--space-8); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.16); flex-wrap: wrap; }
.page-hero__stat-icon { width: 20px; height: 20px; color: var(--mint); margin-bottom: var(--space-2); display: block; }
.page-hero__stat-num { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: #fff; }
.page-hero__stat-label { font-size: 0.8rem; color: var(--on-dark); margin-top: var(--space-1); }
.page-hero__rate-card { background: #fff; border-radius: 20px; padding: var(--space-6); box-shadow: 0 20px 50px rgba(0,0,0,.28); }
/* The pinned hero card needs to be genuinely compact - it's the tallest
   single element in the hero, and was the one actually getting cut off
   below the fold. These overrides only apply INSIDE this specific card,
   so the same rate-board component stays at its normal, fuller size
   everywhere else it's used (the Daily Rate section, Iron Hill BDC's
   Rate tab), where there's no one-viewport constraint. */
.page-hero__rate-card .rate-board { margin-top: var(--space-3); }
.page-hero__rate-card .rate-board__head { padding: var(--space-3) var(--space-4); }
.page-hero__rate-card .rate-board__body { padding: var(--space-1) var(--space-4) var(--space-4); }
.page-hero__rate-card .rate-row {
	padding: var(--space-2) 0;
	/* Narrower context: revert to a wrapping flex row instead of the
	   wider Daily Rate section's rigid grid columns, which don't have
	   room to breathe at this width. Even, consistent gaps between the
	   currency name, Buy, Sell and the badge either way. */
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3);
}
.page-hero__rate-card .rate-row__currency { flex: 1 1 90px; }
.page-hero__rate-card .rate-row__figures { display: flex; align-items: center; gap: var(--space-3); }
.page-hero__rate-card .rate-row__chip { font-size: 0.92rem; }
.page-hero__rate-card .rate-board__foot { margin-top: var(--space-2); padding-top: var(--space-2); }
/* The "all rates are indicative..." line is redundant here - the exact
   same disclaimer already sits in the site footer - so it's dropped only
   in this compact context to save the vertical space, not removed from
   the fuller rate board elsewhere. */
.page-hero__rate-card .rate-board__foot-note { display: none; }
.page-hero__rate-card .btn--primary { height: 38px; padding: 0 var(--space-4); font-size: 0.85rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.page-hero__actions a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.28);
  color: #fff; font-weight: 600; font-size: 0.85rem; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Visible active state for buttons that drive real tab-switching
   (anything with data-tab-target) - previously these had no indication
   at all of which section was currently showing. */
.page-hero__actions a.is-active { background: #fff; color: var(--green-deep); border-color: #fff; }

.on-page-nav { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.on-page-nav__inner { max-width: var(--container); margin-inline: auto; padding: var(--space-3) var(--gutter); display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.on-page-nav__label { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; color: var(--ink-soft); text-transform: uppercase; }
.on-page-nav a { font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); }
.on-page-nav a.is-active { color: var(--green-text); text-decoration: underline; text-underline-offset: 4px; }

.section { max-width: var(--container); margin-inline: auto; padding: var(--space-12) var(--gutter) 0; }
.section:last-child { padding-bottom: var(--space-12); }
.section h2 { font-size: var(--step-2); }

.callout { padding: var(--space-8); border-radius: var(--radius-md); background: var(--card-tint); border: 1px solid var(--hairline); }
/* Brand-green border variant, used where the design calls for a subtle
   tie back to the brand rather than the neutral default border. */
.callout--brand { border-color: #C4D8C2; }

/* Vision and Mission reuse the exact ART Values card pattern (.values-grid__item:
   same mint background, radius, padding) rather than a new style, per the
   brief. The card itself stays a flex row (matching ART's own rule) but
   holds one full-width block of content instead of a letter+label pair. */
.mission-vision-stack { display: flex; flex-direction: column; gap: var(--space-12); }
.mission-vision-card { align-items: flex-start; }
.mission-vision-card > div { width: 100%; }
.mission-vision__text { margin-top: var(--space-3); max-width: 900px; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.55; color: var(--green-deep); }
/* Large green drop-cap "T", matching the ART letter's own font, weight
   and colour exactly, per the brief. */
.mission-vision__dropcap {
	float: left; font-family: var(--font-head); font-weight: 700;
	font-size: 2.6rem; line-height: 0.8; letter-spacing: -0.06em;
	color: var(--green-text); margin-right: 8px; margin-top: 3px;
}

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.values-grid__item { padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--mint); display: flex; align-items: center; gap: var(--space-4); }
.values-grid__letter { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; letter-spacing: -0.06em; color: var(--green-text); }
.values-grid__name { font-weight: 600; font-size: 1.1rem; color: var(--green-deep); }
@media (max-width: 767px) { .values-grid { grid-template-columns: 1fr; } }

.iron-hill-band { padding: var(--space-8); border-radius: 22px; background: var(--green-deep); color: #fff; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-8); align-items: center; }
.iron-hill-band p { color: var(--on-dark); }
.iron-hill-band a.btn-onlight {
  margin-top: var(--space-4); display: inline-flex; align-items: center; height: 50px; padding: 0 var(--space-6);
  border-radius: var(--radius-md); background: #fff; color: var(--green-deep); font-weight: 600; text-decoration: none;
}
.iron-hill-band__photo { height: 220px; border-radius: var(--radius-md); overflow: hidden; }
.iron-hill-band__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
@media (max-width: 900px) { .iron-hill-band { grid-template-columns: 1fr; } }

.tab-strip { display: inline-flex; gap: var(--space-2); padding: 6px; background: #F1EFEA; border-radius: 14px; }
.tab-strip a { display: inline-flex; align-items: center; height: 44px; padding: 0 var(--space-6); border-radius: 10px; font-weight: 600; font-size: 0.9rem; text-decoration: none; color: var(--ink-soft); }
.tab-strip a.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }

.rate-board { border: 1.5px solid var(--green-deep); border-radius: var(--radius-md); background: var(--surface); margin-top: var(--space-4); }
.rate-board__head { background: var(--green-deep); border-radius: calc(var(--radius-md) - 1.5px) calc(var(--radius-md) - 1.5px) 0 0; padding: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.rate-board__brand { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.06em; color: #fff; }
.rate-board__brand span { font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; color: var(--mint); letter-spacing: 0; margin-left: var(--space-2); }
.rate-board__asof { font-family: var(--font-head); font-size: 0.75rem; color: var(--mint); }
.rate-board__body { padding: var(--space-2) var(--space-6) var(--space-6); }
.rate-board__notice { padding: var(--space-4) var(--space-6); font-size: 0.9rem; color: var(--ink-soft); background: var(--card-tint); border-radius: 0 0 calc(var(--radius-md) - 1.5px) calc(var(--radius-md) - 1.5px); }

/* Mobile-first, on purpose: the SAFE wrapping layout is the default for
   every width, and true column alignment only switches on at min-width
   700px, once there is actually confirmed room for four rigid columns.
   Getting this backwards (grid by default, "undo" it below some
   max-width) is exactly what caused a real overflow regression: any
   phone width the max-width query didn't happen to cover still got the
   rigid grid, which pushed the row wider than its container, which
   widened the whole PAGE's scrollable area, which is what actually
   produces an "everything shifted right" symptom site-wide, not just on
   this component. Mobile-first removes that whole class of bug, since
   there is no width at which grid can accidentally still apply. */
.rate-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--card-tint); }
.rate-row:first-child { padding-top: var(--space-4); }
.rate-row__currency { font-weight: 700; color: var(--ink); flex: 1 1 90px; }
.rate-row__currency small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.8rem; }
.rate-row__figures { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rate-row__chip {
	display: inline-flex; align-items: baseline; gap: 4px;
	font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
	white-space: nowrap; color: var(--ink);
}
.rate-row__chip-label { font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
/* True column alignment - BUY, SELL and the badge each sit in their own
   grid column, so they start at the exact same horizontal position on
   every row - only once there's confirmed room for it. */
@media (min-width: 700px) {
	.rate-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--space-4); }
	.rate-row__currency { flex: none; }
	.rate-row__figures { display: contents; }
}
.rate-board__foot { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.rate-board__foot-note { font-size: 0.85rem; color: var(--ink-soft); max-width: 60ch; }
@media (max-width: 400px) {
	.rate-row__chip { font-size: 0.92rem; }
}

.izeza-howitworks { display: flex; flex-direction: column; gap: var(--space-3); }
.izeza-howitworks__step { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink); }
.izeza-howitworks__num {
	flex: none; width: 24px; height: 24px; border-radius: 50%;
	background: var(--green-button); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--font-head); font-weight: 700; font-size: 0.75rem;
}

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.service-card { padding: var(--space-6); border-radius: var(--radius-md); border: 1px solid #C4D8C2; background: var(--card-tint); }
.service-card h3 { font-size: 1.05rem; color: var(--ink); font-family: var(--font-body); font-weight: 600; }
.service-card p { font-size: 0.9rem; color: var(--ink-soft); margin-top: var(--space-2); }
.service-card--featured { grid-column: 1 / -1; background: var(--mint); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); text-decoration: none; padding: var(--space-8); border: none; flex-wrap: wrap; }
.service-card--featured h3 { font-size: 1.4rem; color: var(--green-deep); }
.service-card--featured p { color: #2C5A2E; max-width: 60ch; }
.service-card--featured .btn-open { flex: none; display: inline-flex; align-items: center; height: 52px; padding: 0 var(--space-6); border-radius: var(--radius-md); background: var(--green-text); color: #fff; font-weight: 600; text-decoration: none; }
.service-tag { display: inline-block; max-width: 100%; padding: 2px 9px; border-radius: 20px; background: var(--hairline); color: var(--ink-soft); font-family: var(--font-head); font-size: 10px; letter-spacing: 0.04em; margin-bottom: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; } .service-card--featured { flex-direction: column; align-items: flex-start; } }

.org-chart { padding: var(--space-6) 0; }
.org-node { padding: var(--space-3) var(--space-4); border-radius: 14px; background: var(--green-deep); color: #fff; text-align: center; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.org-node small { display: block; font-weight: 400; color: var(--mint); font-size: 0.72rem; margin-top: 2px; white-space: normal; }
.org-node--leaf { background: #fff; border: 1.5px solid #C4D8C2; color: var(--green-deep); font-size: 0.8rem; font-weight: 500; }
.org-node--ceo { font-size: 1.1rem; font-weight: 700; padding: var(--space-4) var(--space-6); box-shadow: var(--shadow-1); }
/* Advisor nodes sit directly on the page's white background now (no
   container box behind them), so their border/text contrast is what
   keeps Crosstie Solutions clearly legible - deliberately full-strength
   green, not faded, per the brief. */
.org-node--advisor { background: transparent; border: 1.5px dashed #14601A; color: var(--green-text); font-size: 0.78rem; font-weight: 600; }

/* CEO cluster: OD Consultant, the CEO box, and Compliance Officer sit in
   one row, per the required "OD Consultant -> CEO <- Compliance" desktop
   layout. Both advisor boxes get the SAME fixed width, which is what
   guarantees the CEO box lands exactly at the cluster's mathematical
   centre - and that centre is what the tree's own vertical connector
   line (below, to the CEO's direct reports) aligns to automatically, so
   it still drops correctly from the CEO specifically, not the cluster's
   edge-to-edge midpoint. */
.org-ceo-cluster { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.org-node--advisor-side { flex: 0 0 150px; text-align: center; }
.org-advisors__ceo-link--h { flex: 0 0 32px; height: 1.5px; background: repeating-linear-gradient(to right, #C4D8C2 0, #C4D8C2 4px, transparent 4px, transparent 8px); }

/*
   Org tree: the standard nested-list technique for correct parent/child
   connecting lines at any width or child count. Centered as a whole,
   each level's horizontal connector spans exactly from the first child's
   centre to the last child's centre (never further), and a vertical stub
   drops from that connector down to each child, and up from the parent.
   This is what actually gives "senior vs subordinate" a real visual
   backbone, instead of spacing alone trying to imply it.

   This SAME markup, unmodified, is what renders on mobile too - see the
   .org-chart-scroll wrapper below, not a separate simplified layout.
*/
.org-tree, .org-tree ul {
	display: flex; justify-content: center;
	list-style: none; margin: 0; padding: 0;
	position: relative;
}
.org-tree { padding-top: var(--space-2); }
.org-tree ul { padding-top: var(--space-8); }
.org-tree li {
	display: flex; flex-direction: column; align-items: center;
	position: relative; padding: var(--space-8) var(--space-4) 0;
}
.org-tree li::before, .org-tree li::after {
	content: ""; position: absolute; top: 0; right: 50%;
	width: 50%; height: var(--space-8);
	border-top: 1.5px solid #C4D8C2;
}
.org-tree li::after { right: auto; left: 50%; border-left: 1.5px solid #C4D8C2; }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 0; }
.org-tree li:first-child::before { border: none; }
.org-tree li:last-child::after { border: none; }
.org-tree li:last-child::before { border-right: 1.5px solid #C4D8C2; border-radius: 0 6px 0 0; }
.org-tree li:first-child::after { border-radius: 6px 0 0 0; }
/* The vertical drop from ANY parent node down to its own children's
   horizontal connector - must apply at every nesting depth, not just
   the top level, or deeper branches (e.g. Head of Finance down to
   Finance Officer) would be missing their connecting line. */
.org-tree li > ul::before {
	content: ""; position: absolute; top: 0; left: 50%;
	width: 0; height: var(--space-8);
	border-left: 1.5px solid #C4D8C2;
}
.org-tree li > .org-node { margin-bottom: 0; }

/* Mobile strategy: below the width where the horizontal tree can breathe,
   the SAME markup switches from a side-by-side tree to a vertical,
   indented tree - the standard pattern for showing a hierarchy on a
   narrow screen (used by file explorers, folder trees, etc). This uses
   the page's natural vertical scroll, which is what a phone is actually
   good at, instead of an awkward horizontal swipe. Same DOM, same roles,
   same relationships - only the line-drawing geometry changes from
   horizontal siblings to a vertical spine with indentation per level. */
.org-chart-scroll { overflow-x: visible; }
.org-chart-scroll .org-chart { width: 100%; margin-inline: 0; }

@media (max-width: 780px) {
	.org-chart-scroll .org-chart { min-width: 0; }

	.org-tree, .org-tree ul {
		display: block; /* stop the horizontal flex-row layout entirely */
	}
	.org-tree { padding-top: var(--space-2); }
	.org-tree > li { padding: 0; }
	.org-tree > li::before, .org-tree > li::after { display: none; } /* no horizontal-sibling lines for the single root */

	/* Each nested level indents further and gets its own vertical spine;
	   every item on that spine connects to it with a short horizontal
	   stub - drawn per item below, not per level. */
	.org-tree ul {
		margin: var(--space-2) 0 0 11px;
		padding: 0 0 0 var(--space-4);
		border-left: 1.5px solid #C4D8C2;
	}
	.org-tree li {
		display: block;
		position: relative;
		padding: var(--space-3) 0 0 var(--space-4);
	}
	.org-tree li::before {
		content: "";
		position: absolute; left: 0; top: calc(var(--space-3) + 14px);
		width: var(--space-4); height: 0;
		border-top: 1.5px solid #C4D8C2;
	}
	.org-tree li::after { display: none; } /* the desktop "right-side" line has no meaning in a vertical layout */
	.org-tree li:first-child { padding-top: 0; }
	.org-tree li:first-child::before { top: 14px; }
	.org-tree li > ul::before { display: none; } /* the ul's own border-left already draws this connection */

	.org-node {
		white-space: normal; text-align: left; display: block;
		font-size: 0.82rem; padding: var(--space-2) var(--space-3);
		max-width: 260px;
	}
	.org-node--ceo { font-size: 0.95rem; display: inline-block; max-width: none; }

	/* The CEO cluster (OD Consultant / CEO / Compliance) is a horizontal
	   row on desktop, per the brief's required left/right layout. That
	   doesn't fit a phone width, so here it stacks vertically instead,
	   matching the same vertical-spine philosophy as the rest of the
	   chart at this breakpoint - same three roles, same relationships,
	   just re-oriented for a narrow screen. */
	.org-ceo-cluster { flex-direction: column; gap: var(--space-2); }
	.org-node--advisor-side { flex: none; }
	.org-advisors__ceo-link--h {
		flex: none; width: 1.5px; height: 16px;
		background: repeating-linear-gradient(to bottom, #C4D8C2 0, #C4D8C2 4px, transparent 4px, transparent 8px);
	}
}

.commitment-item { padding: var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--hairline); display: grid; grid-template-columns: 140px 1fr; gap: var(--space-6); align-items: start; }
.commitment-item:nth-child(even) { background: var(--card-tint); }
.commitment-item__label { display: flex; align-items: baseline; gap: var(--space-3); }
.commitment-item__letter { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; letter-spacing: -0.06em; color: var(--green-text); }
.commitment-item__name { font-weight: 600; color: var(--green-deep); }
@media (max-width: 700px) { .commitment-item { grid-template-columns: 1fr; } }

.contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-6); align-items: start; }
.contact-form-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-6); }
.contact-form-card .field { margin-bottom: var(--space-4); }
.contact-form-card label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: var(--space-2); }
.contact-form-card input, .contact-form-card select, .contact-form-card textarea {
  width: 100%; height: 48px; border: 1.5px solid var(--hairline); border-radius: 11px; padding: 0 var(--space-4);
  font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); background: var(--surface);
}
.contact-form-card textarea { height: 120px; padding-top: var(--space-3); resize: vertical; }
.contact-side { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-side a.contact-side__link { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-4); height: 60px; border-radius: 14px; text-decoration: none; }
.contact-side__link--wa { background: var(--green-button); color: #fff; }
.contact-side__link--call { border: 1.5px solid var(--green-fill); color: var(--green-text); }
.contact-side__link--email { background: var(--card-tint); border: 1px solid var(--hairline); color: var(--ink); }
.contact-hours { padding: var(--space-4); border-radius: var(--radius-md); background: var(--mint-soft); border: 1px solid #CBE7C6; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.location-card { border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.location-card__photo { height: 160px; background: linear-gradient(135deg, #E7E3DC, #D8E3D6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); }
.location-card__photo--map { height: 200px; padding: 0; }
.location-card__photo--map .location-map-embed { height: 200px; border-radius: 0; display: block; }
.location-card__body { padding: var(--space-6); }
.location-card__hours { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; color: var(--green-text); margin-top: var(--space-2); }
.location-card__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-fill); }
.location-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.location-map-placeholder { margin-top: var(--space-4); height: 260px; border-radius: var(--radius-md); background: linear-gradient(135deg, #E7E3DC, #DCE6DA); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); text-align: center; }
.location-map-embed { width: 100%; height: 280px; border: 0; border-radius: var(--radius-md); }
@media (max-width: 700px) { .location-grid { grid-template-columns: 1fr; } }

/* Responsive two-column layouts that were previously raw inline grid styles
   with no mobile breakpoint - this is the fix for the Day 5 mobile overlap
   bug (hero and About Us's Who We Are section stayed side-by-side on phones
   because an inline style can't carry a media query). */
.page-hero__split { display: grid; grid-template-columns: 1fr 480px; gap: var(--space-16); align-items: start; }
@media (max-width: 900px) { .page-hero__split { grid-template-columns: 1fr; gap: var(--space-4); } }
@media (max-width: 600px) {
	.page-hero__inner { padding-top: var(--space-4); padding-bottom: var(--space-4); }
	.section { padding-top: var(--space-8); }
	.page-hero p { margin-top: var(--space-2); }
	.page-hero__actions { margin-top: var(--space-3); gap: var(--space-2); }
	.page-hero__actions a { height: 36px; padding: 0 var(--space-3); font-size: 0.8rem; }
	.page-hero__stats {
		margin-top: var(--space-3); padding-top: var(--space-3);
		gap: var(--space-3);
		flex-wrap: nowrap; /* stay on one row, per the brief - three items
			sharing the row equally rather than each getting its own line */
	}
	.page-hero__stats > div { flex: 1 1 0; min-width: 0; text-align: center; }
	.page-hero__stat-icon { margin-inline: auto; width: 14px; height: 14px; margin-bottom: 3px; }
	.page-hero__stat-num { font-size: 1.05rem; }
	.page-hero__rate-card { padding: var(--space-3); border-radius: 14px; }
	.page-hero__rate-card .rate-board { margin-top: var(--space-1); }
	.page-hero__rate-card .rate-board__head { padding: var(--space-2) var(--space-3); }
	.page-hero__rate-card .rate-board__body { padding: 0 var(--space-3) var(--space-3); }
	.page-hero__rate-card .rate-row { padding: var(--space-1) 0; }
	.page-hero__rate-card .rate-row__chip { font-size: 0.85rem; }
	.page-hero__stat-label { font-size: 0.66rem; line-height: 1.25; }
	.page-hero h1 { font-size: 1.7rem; }
	.page-hero p { font-size: 0.92rem; }

	/* Guaranteed small size on mobile, explicit rather than relying on
	   clamp() interpolation alone - matches ordinary body text so it
	   reads as a normal paragraph, not an oversized statement. */
	.mission-vision__text { font-size: 1rem; line-height: 1.6; }
	.mission-vision__dropcap { font-size: 2rem; }

	/* Cards and bands: desktop padding (--space-8 = 2rem) reads as
	   excessive dead space around short mobile-width text; tighten it. */
	.callout, .iron-hill-band, .org-chart { padding: var(--space-6) var(--space-4); }
	.service-card { padding: var(--space-4); }
	.commitment-item { padding: var(--space-4); }

	/* Oversized decorative letters/numbers (A / R / T, the commitment
	   initials) are sized for a wide desktop card; at phone width they
	   dwarf the label next to them. Scale down, keep the same ratio. */
	.values-grid__letter { font-size: 1.7rem; }
	.commitment-item__letter { font-size: 2rem; }
	.values-grid__item { padding: var(--space-3) var(--space-4); gap: var(--space-3); }

	/* The calculator's big bold amount figure is sized for a spacious
	   desktop panel; shrink it and its side-by-side meta row so nothing
	   crowds or truncates on a narrow phone. */
	.izeza-calc__amount { font-size: 1.1rem; height: 50px; }
	.izeza-calc__naira { font-size: 1.15rem; height: 50px; }
	.izeza-calc__meta { grid-template-columns: 1fr 1fr; }
	.izeza-calc__result-figure { font-size: 1.5rem; }

	/* Step wizard progress pills: four labels in a row is tight on a
	   phone; drop the padding and font size a notch so all four still
	   read as one row rather than wrapping mid-label. */
	.izeza-bs-progress { gap: var(--space-1); }
	.izeza-bs-progress__step { font-size: 0.72rem; padding: var(--space-1) var(--space-2); gap: 6px; }
	.izeza-bs-progress__num { width: 16px; height: 16px; font-size: 0.62rem; }

	/* Tab strip and on-page nav: full-width buttons stack awkwardly at
	   their desktop padding; tighten so three or four fit comfortably. */
	.tab-strip a { padding: 0 var(--space-4); height: 40px; font-size: 0.82rem; }
	.on-page-nav__inner { gap: var(--space-3); }
}

.about-who-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .about-who-grid { grid-template-columns: 1fr; } }

.placeholder-photo-label { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.14em; color: #9AA398; text-transform: uppercase; }
.placeholder-photo-caption { font-style: italic; font-size: 0.8rem; color: #6E7A6C; }

/* ============================================================
   Scroll micro-animation. Auto-tagged by assets/js/reveal.js.
   ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   DAY 4: Calculator and Buy & Sell form
   ============================================================ */

/* Generalized field styling, usable outside .contact-form-card too */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: var(--space-2); }
.field input[type="text"], .field input[type="tel"], .field input[type="file"], .field select, .field textarea {
	width: 100%; height: 48px; border: 1.5px solid var(--hairline); border-radius: 11px; padding: 0 var(--space-4);
	font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); background: var(--surface);
}
.field textarea { height: 96px; padding-top: var(--space-3); resize: vertical; }
.field input[type="file"] { padding: var(--space-2) var(--space-4); height: auto; }

.izeza-bs-step { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; color: var(--green-text); text-transform: uppercase; margin: var(--space-8) 0 var(--space-4); }
.izeza-bs-step-label { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; color: var(--green-text); text-transform: uppercase; margin: 0 0 var(--space-4); }
.izeza-bs-direction-label { border: 1.5px solid var(--hairline); }
.izeza-bs-direction-label:has(input:checked) { border-color: var(--green-fill); background: var(--mint-soft); font-weight: 600; color: var(--green-text); }

.izeza-bs-progress { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); flex-wrap: wrap; scroll-margin-top: 120px; }
.izeza-bs-progress__step { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); padding: var(--space-2) var(--space-3); border-radius: 20px; background: var(--card-tint); cursor: pointer; }
.izeza-bs-progress__num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--hairline); color: var(--ink-soft); font-size: 0.7rem; font-weight: 700; }
.izeza-bs-progress__step.is-done { color: var(--green-text); }
.izeza-bs-progress__step.is-done .izeza-bs-progress__num { background: var(--mint); color: var(--green-text); }
.izeza-bs-progress__step.is-active { background: var(--green-deep); color: #fff; }
.izeza-bs-progress__step.is-active .izeza-bs-progress__num { background: #fff; color: var(--green-deep); }

.izeza-bs-panel { animation: izeza-bs-fade 0.3s ease; }
@keyframes izeza-bs-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.izeza-bs-nav { display: flex; gap: var(--space-3); margin-top: var(--space-6); justify-content: space-between; }
.izeza-bs-nav .izeza-bs-next { margin-left: auto; }

.izeza-bs-summary__list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.izeza-bs-summary__list > div { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); }
.izeza-bs-summary__list > div:last-child { border-bottom: 0; }
.izeza-bs-summary__list > div:nth-child(even) { background: var(--card-tint); }
.izeza-bs-summary__list dt { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }
.izeza-bs-summary__list dd { margin: 0; font-size: 0.9rem; color: var(--ink); word-break: break-word; }
@media (max-width: 600px) {
	.izeza-bs-summary__list > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Success modal */
.izeza-bs-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.izeza-bs-modal[hidden] { display: none; }
.izeza-bs-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 33, 20, 0.55); }
.izeza-bs-modal__panel {
	position: relative; background: #fff; border-radius: var(--radius-md);
	max-width: 420px; width: 100%; padding: var(--space-8) var(--space-6) var(--space-6);
	text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,0.3);
	animation: izeza-modal-in 0.25s ease;
}
@keyframes izeza-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
.izeza-bs-modal__close {
	position: absolute; top: var(--space-3); right: var(--space-3);
	width: 32px; height: 32px; border-radius: 50%; border: none;
	background: var(--card-tint); color: var(--ink-soft); font-size: 1.3rem; line-height: 1;
	cursor: pointer;
}
.izeza-bs-modal__icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); color: var(--green-text); }
.izeza-bs-modal__icon svg { width: 100%; height: 100%; }
.izeza-bs-modal__panel h3 { margin: 0 0 var(--space-3); color: var(--green-deep); }
.izeza-bs-modal__message { color: var(--ink-soft); margin: 0 0 var(--space-6); line-height: 1.6; }
.izeza-bs-modal__ok { width: 100%; justify-content: center; height: 48px; }
@media (max-width: 480px) {
	.izeza-bs-modal__panel { padding: var(--space-6) var(--space-4) var(--space-4); }
}

.izeza-calculator { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-6); align-items: start; }
.izeza-calc__panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-6); }
.izeza-calc__toggle { display: flex; padding: 5px; background: #F1EFEA; border-radius: 13px; gap: 5px; max-width: 340px; }
.izeza-calc__toggle-btn { flex: 1; display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 9px; border: none; background: transparent; font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; }
.izeza-calc__toggle-btn.is-active { background: #fff; box-shadow: var(--shadow-1); font-weight: 600; color: var(--ink); }
.izeza-calc__row { margin-top: var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: end; }
.izeza-calc__field label { display: block; font-family: var(--font-head); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: var(--space-2); }
.izeza-calc__amount { width: 100%; height: 56px; border: 1.5px solid var(--hairline); border-radius: 12px; padding: 0 var(--space-4); font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.izeza-calc__currency { height: 56px; border: 1.5px solid var(--hairline); border-radius: 12px; padding: 0 var(--space-3); font-weight: 600; }
.izeza-calc__naira { height: 56px; display: flex; align-items: center; padding: 0 var(--space-4); border-radius: 12px; background: var(--mint); font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--green-deep); }
.izeza-calc__rate-label { margin-top: var(--space-3); font-family: var(--font-head); font-size: 0.75rem; color: var(--ink-soft); }
.izeza-calc__meta { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.izeza-calc__meta-label { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.izeza-calc__meta strong { display: block; margin-top: var(--space-1); font-family: var(--font-head); font-size: 1rem; }
.izeza-calc__side { display: flex; flex-direction: column; gap: var(--space-3); }
.izeza-calc__result { padding: var(--space-6); border-radius: var(--radius-md); background: var(--green-deep); color: #fff; }
.izeza-calc__result-figure { margin-top: var(--space-3); font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; }
.izeza-calc__result-note { margin-top: var(--space-2); font-size: 0.85rem; color: var(--on-dark); }
@media (max-width: 900px) { .izeza-calculator { grid-template-columns: 1fr; } .izeza-calc__row { grid-template-columns: 1fr; } }