/* eBizGrow homepage — page layout.
   Every rule here is a converted inline style attribute from
   "eBizGrow Homepage v2.dc.html". Inline styles were an artefact of the design
   format, not a recommendation. Values are transcribed exactly: colours, type,
   spacing and rules are final per the handoff, and the look depends on hairline
   rules and exact grid tracks — approximations read as broken.

   Depends on modernist.css for tokens and .btn / .grayscale / h6 base. */

/* ═══ page shell ══════════════════════════════════════════════════════════ */

.ebz-page {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* Prose links: 1px accent-tinted rule, solid accent on hover.
   Scoped with :not() rather than applied-then-removed. The design bundle set
   `border-bottom: 0` on buttons to strip this underline, which also erased the
   fourth side of .btn-secondary's box — the button rendered open at the
   bottom. Never give buttons the underline in the first place, and their own
   border stays intact. */
.ebz-page a { text-decoration: none; }
.ebz-page a:not(.btn):not(.ebz-nolink) {
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.ebz-page a:not(.btn):not(.ebz-nolink):hover { border-bottom-color: var(--color-accent); }

.ebz-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 24px;
}
.ebz-wrap--pad    { padding-block: clamp(48px, 6vw, 88px); }
.ebz-wrap--pad-sm { padding-block: clamp(40px, 5vw, 64px); }
.ebz-wrap--pad-xs { padding-block: 28px; }

.ebz-section     { border-bottom: 2px solid var(--color-divider); }
.ebz-section--surface { background: var(--color-surface); }

.ebz-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  padding: 12px 18px;
  z-index: 100;
}
.ebz-skip:focus { left: 0; }

/* ═══ shared type ═════════════════════════════════════════════════════════ */

.ebz-eyebrow {
  margin: 0;
  color: var(--color-accent-700);
}
.ebz-eyebrow--onDark  { color: var(--color-accent-400); }
.ebz-eyebrow--gap     { margin-bottom: 20px; }
.ebz-eyebrow--gap-sm  { margin-bottom: 8px; }
.ebz-eyebrow--gap-cta { margin-bottom: 16px; }

.ebz-h2 {
  margin: 16px 0 8px;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.024em;
}
.ebz-h2--sm { font-size: clamp(26px, 3vw, 34px); }
.ebz-h2--flush { margin: 0; }
.ebz-h2--tight { margin: 16px 0 0; }
.ebz-h2--wide  { margin: 16px 0 36px; }

.ebz-meas-15 { max-width: 15ch; }
.ebz-meas-22 { max-width: 22ch; }
.ebz-meas-24 { max-width: 24ch; }
.ebz-meas-26 { max-width: 26ch; }
.ebz-meas-30 { max-width: 30ch; }

.ebz-lede {
  margin: 0 0 40px;
  max-width: 60ch;
  color: var(--color-neutral-800);
}
.ebz-lede--62 { max-width: 62ch; }
.ebz-lede--16 { font-size: 16px; }
.ebz-lede--gap-sm { margin-bottom: 28px; }
.ebz-lede--gap-md { margin-bottom: 32px; }
.ebz-lede--gap-lg { margin-bottom: 36px; }

.ebz-prose {
  margin: 16px 0 0;
  max-width: 66ch;
  color: var(--color-neutral-800);
}
.ebz-prose--first { margin-top: 20px; }

/* ═══ header ══════════════════════════════════════════════════════════════ */

.ebz-header { border-bottom: 2px solid var(--color-divider); }
.ebz-header__inner {
  padding-block: 12px;
  min-height: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.ebz-brand {
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ebz-brand__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.ebz-brand__loc {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-neutral-600);
}
.ebz-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}
.ebz-nav__link {
  color: var(--color-text);
  font-size: 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ebz-nav__link:hover { color: var(--color-accent); }
.ebz-nav__cta {
  min-height: 44px;
  padding-inline: 18px;
}

/* ═══ hero ════════════════════════════════════════════════════════════════ */

.ebz-hero__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}
.ebz-hero__body  { flex: 2 1 480px; min-width: 0; }
.ebz-hero__aside { flex: 1 1 300px; min-width: 0; }
.ebz-hero__h1 {
  margin: 0;
  font-size: clamp(36px, 5.2vw, 58px);
  letter-spacing: -0.028em;
}
.ebz-hero__sub {
  margin: 24px 0 0;
  max-width: 64ch;
  color: var(--color-neutral-800);
  font-size: 19px;
}
.ebz-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.ebz-btn-lg {
  min-height: 48px;
  padding-inline: 22px;
  font-size: 15px;
}

/* — figures — */
.ebz-figure__frame { border: 2px solid var(--color-divider); }
.ebz-figure__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.ebz-figure__img--hero     { aspect-ratio: 4 / 5; }
.ebz-figure__img--artefact { aspect-ratio: 3 / 4; }
/* Diagrams are `contain`, never `cover`. A cropped photograph is still a
   photograph; a cropped diagram loses information. The letterbox bands take
   the page ground — the .grayscale filter maps this diagram's cream (#f8f1e0)
   to #f1f1f1, two points off --color-bg, so the seam is invisible. */
.ebz-figure__img--diagram {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--color-bg);
}
.ebz-figure__cap {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 8px;
}
/* Empty state — visible on purpose. A missing hero photograph should read as
   missing content, not as a design choice. */
.ebz-figure__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.5;
}

/* ═══ on the record ═══════════════════════════════════════════════════════ */

.ebz-record {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.ebz-record__title { flex: 1 1 100%; margin: 0; color: var(--color-neutral-700); }
.ebz-record__item  { flex: 1 1 200px; }
.ebz-record__label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
}
.ebz-record__desc { font-size: 14px; color: var(--color-neutral-700); }
.ebz-record__note {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--color-neutral-600);
  border-top: 1px solid var(--color-neutral-400);
  padding-top: 12px;
}

/* ═══ brands worked on ════════════════════════════════════════════════════ */

.ebz-brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border-top: 2px solid var(--color-divider);
  border-left: 1px solid var(--color-neutral-400);
}
.ebz-brands__cell {
  border-right: 1px solid var(--color-neutral-400);
  border-bottom: 1px solid var(--color-neutral-400);
  padding: 18px 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  min-height: 64px;
}
.ebz-brands__cell img { max-height: 28px; width: auto; }

/* ═══ split sections (aside + main) ═══════════════════════════════════════ */

.ebz-split {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.ebz-split__aside      { flex: 1 1 240px; }
.ebz-split__aside--260 { flex: 1 1 260px; }
.ebz-split__main       { flex: 3 1 480px; min-width: 0; }
.ebz-split__main--460  { flex: 3 1 460px; min-width: 0; }
.ebz-split__main--ruled { border-top: 2px solid var(--color-divider); }

/* ═══ specification ═══════════════════════════════════════════════════════ */

.ebz-lead {
  border: 2px solid var(--color-text);
  background: var(--color-neutral-100);
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: 24px;
}
.ebz-lead__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}
.ebz-lead__chip {
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 5px 10px;
}
.ebz-lead__ref {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-neutral-700);
}
.ebz-lead__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.ebz-lead__body { flex: 2 1 420px; min-width: 0; }
.ebz-lead__h3 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 30px);
  letter-spacing: -0.022em;
}
.ebz-lead__desc {
  margin: 14px 0 0;
  max-width: 56ch;
  color: var(--color-neutral-800);
}
.ebz-lead__fig { flex: 1 1 240px; min-width: 0; }
.ebz-lead__cta {
  margin-top: 20px;
  min-height: 44px;
  padding-inline: 0;
}

/* Four-cell spec table. Odd cells pad right, even cells pad left, so the
   column gap reads as a single 48px gutter with the rule running through. */
.ebz-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 28px;
  border-top: 2px solid var(--color-divider);
}
.ebz-spec__cell {
  flex: 1 1 220px;
  border-bottom: 1px solid var(--color-neutral-400);
}
.ebz-spec__cell:nth-child(odd)  { padding: 16px 24px 16px 0; }
.ebz-spec__cell:nth-child(even) { padding: 16px 0 16px 24px; }
.ebz-spec__label { margin: 0 0 6px; color: var(--color-neutral-700); }
.ebz-spec__value { font-size: 15px; color: var(--color-neutral-800); }

.ebz-attach {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.ebz-attach__card {
  flex: 1 1 320px;
  min-width: 0;
  border: 1px solid var(--color-neutral-400);
  padding: 28px;
}
.ebz-attach__ref { margin: 0; color: var(--color-neutral-700); }
.ebz-attach__h4  { margin: 12px 0 0; font-size: 21px; }
.ebz-attach__desc {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--color-neutral-800);
}

/* ═══ build log ═══════════════════════════════════════════════════════════ */

.ebz-log { border-top: 2px solid var(--color-divider); }
.ebz-log__entry {
  border-bottom: 1px solid var(--color-neutral-400);
  padding: 28px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.ebz-log__meta { flex: 1 1 180px; }
.ebz-log__date {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.ebz-log__sector {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-neutral-600);
  margin-top: 6px;
}
.ebz-log__client {
  font-size: 13px;
  color: var(--color-accent-700);
  margin-top: 6px;
}
.ebz-log__cols {
  flex: 3 1 420px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.ebz-log__col { flex: 1 1 200px; }
.ebz-log__label { margin: 0 0 6px; color: var(--color-neutral-700); }
.ebz-log__text  { margin: 0; font-size: 15px; color: var(--color-neutral-800); }
/* Outcome carries full --color-text rather than neutral-800. Deliberate
   emphasis in the design; do not normalise it to match its siblings. */
.ebz-log__text--outcome { margin: 0; font-size: 15px; }
.ebz-log__role {
  flex: 1 1 100%;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-neutral-600);
  border-top: 1px solid var(--color-neutral-300);
  padding-top: 12px;
}

/* ═══ live builds ═════════════════════════════════════════════════════════ */

.ebz-rows { border-top: 2px solid var(--color-divider); }
/* The third track MUST stay a fixed 150px. With max-content the tracks are
   computed per row and the table staggers. */
.ebz-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 150px;
  gap: 12px 32px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-neutral-400);
}
.ebz-row > :first-child { overflow-wrap: anywhere; }
.ebz-row__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
}
.ebz-row__desc { font-size: 16px; color: var(--color-neutral-800); }
.ebz-row__kind {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-neutral-600);
}
@media (max-width: 720px) {
  .ebz-row { grid-template-columns: 1fr; }
}

/* ═══ one person ══════════════════════════════════════════════════════════ */

/* Portrait sits in "One person", where the copy has earned it — beside the
   capacity and sickness answers rather than above the fold. Capped narrow so
   it reads as supporting evidence, not a hero. */
.ebz-portrait {
  margin-top: 32px;
  max-width: 220px;
}

.ebz-qa {
  padding: 24px 0;
  border-bottom: 1px solid var(--color-neutral-400);
}
.ebz-qa__q { margin: 0 0 10px; font-size: 19px; }
.ebz-qa__a { margin: 0; max-width: 66ch; color: var(--color-neutral-800); }

/* ═══ process ═════════════════════════════════════════════════════════════ */

.ebz-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-divider);
}
.ebz-steps__item {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-neutral-400);
}
.ebz-steps__no {
  flex: 0 0 48px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-accent-700);
}
.ebz-steps__name { flex: 1 1 200px; margin: 0; font-size: 20px; }
.ebz-steps__desc {
  flex: 2 1 380px;
  margin: 0;
  max-width: 62ch;
  color: var(--color-neutral-800);
}

.ebz-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 40px;
  border-top: 2px solid var(--color-divider);
}
.ebz-terms__cell {
  flex: 1 1 240px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-neutral-400);
}
.ebz-terms__cell:first-child { padding-left: 0; }
.ebz-terms__cell:last-child  { padding-right: 0; }
.ebz-terms__label { margin: 0 0 6px; color: var(--color-neutral-700); }
.ebz-terms__text  { margin: 0; font-size: 16px; }

/* ═══ where to go ═════════════════════════════════════════════════════════ */

.ebz-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}
.ebz-paths__cell {
  flex: 1 1 260px;
  padding: 28px 32px;
  border-right: 1px solid var(--color-neutral-400);
}
.ebz-paths__cell:first-child { padding-left: 0; }
.ebz-paths__cell:last-child  { padding-right: 0; border-right: 0; }
.ebz-paths__label { margin: 0 0 12px; color: var(--color-neutral-700); }
.ebz-paths__label--here { color: var(--color-accent-700); }
.ebz-paths__text {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--color-neutral-800);
}
/* min-height meets WCAG 2.2 AA 2.5.8 (24px minimum) and the project's own
   44px target. These are standalone panel CTAs, not inline prose links, so
   the inline exception does not apply — measured at 19px in the design
   reference, which was the one AA failure on the page. */
.ebz-paths__link {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ═══ questions ═══════════════════════════════════════════════════════════ */

.ebz-faq {
  border-bottom: 1px solid var(--color-neutral-400);
  padding: 18px 0;
}
.ebz-faq__q {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ebz-faq__q::-webkit-details-marker { display: none; }
.ebz-faq__a {
  margin: 10px 0 0;
  max-width: 66ch;
  color: var(--color-neutral-800);
}

/* ═══ closing CTA ═════════════════════════════════════════════════════════ */

/* Ground is --color-neutral-900, not accent red. Small text on #ec3013 lands
   near 3.4:1 and fails WCAG AA. This was tested and corrected — do not
   reintroduce a red ground here. */
.ebz-cta {
  background: var(--color-neutral-900);
  color: var(--color-bg);
}
.ebz-cta__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-end;
}
.ebz-cta__body { flex: 2 1 460px; min-width: 0; }
.ebz-cta__h2 {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 52px);
  letter-spacing: -0.028em;
  max-width: 16ch;
  color: var(--color-bg);
}
.ebz-cta__text {
  margin: 20px 0 0;
  max-width: 58ch;
  color: var(--color-neutral-300);
  font-size: 18px;
}
.ebz-cta__aside {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.ebz-cta__contact {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-neutral-300);
}

/* ═══ footer ══════════════════════════════════════════════════════════════ */

.ebz-footer { border-top: 2px solid var(--color-divider); }
.ebz-footer__inner {
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-neutral-700);
}

/* ═══ motion ══════════════════════════════════════════════════════════════ */

/* Budget: opacity + 6px translateY, 200ms ease-out, hero elements only.
   Nothing else on the page animates. */
/* Transform only — opacity is deliberately NOT animated.
   The design bundle used `from { opacity: 0 }` with fill-mode `both`. Any
   environment where the animation clock does not advance holds the element at
   the `from` keyframe, so the hero renders permanently invisible: an embedded
   or zero-sized viewport, a background tab at load, some power-saving modes,
   and printing. Dropping the fill-mode does not help — while the animation is
   in its active phase at t=0 the `from` value still applies.
   Animating transform alone keeps the entrance motion and guarantees the
   content is legible even with no animation support at all. Visibility must
   never depend on an animation running. */
@keyframes ebz-rise {
  from { transform: translateY(6px); }
  to   { transform: none; }
}
.ebz-rise { animation: ebz-rise 200ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .ebz-rise { animation: none; }
  * { transition: none !important; }
}