/* Homepage sections below the hero reel. Brand tokens come from /features.css; the look matches /business-solutions/. */
#hp-main { font-family: var(--hge-body); font-size: 1.0625rem; font-weight: 400; line-height: 1.6; color: var(--hgb-muted); overflow-x: clip; }
#hp-main * { box-sizing: border-box; }
#hp-main :is(h1, h2, h3, p, ul, ol) { padding-bottom: 0; }
#hp-main ::selection { background: rgba(61, 192, 102, .28); color: var(--hge-navy); }
#hp-main :is(a, button):focus-visible { outline: 3px solid var(--hgb-green-fill); outline-offset: 3px; }
#hp-main section { scroll-margin-top: 100px; }
.hp-wrap { max-width: 1180px; margin: 0 auto; }
.hp-sec { padding: clamp(4.5rem, 10vw, 7.5rem) 1.25rem; }
.hp-sec--paper { background: var(--hge-paper); }
.hp-sec--white { background: #fff; }

#hp-main :is(.hp-h1, .hp-h2) { font-family: var(--hge-display) !important; text-transform: uppercase; font-weight: 600; text-wrap: balance; color: var(--hge-navy); margin: 0; }
.hp-h1 { font-size: clamp(2.4rem, 5.6vw, 4.5rem); line-height: 1.02; letter-spacing: -.02em; max-width: 16ch; margin-inline: auto !important; }
.hp-h1 .hp-accent { display: block; color: var(--hgb-green-deep); }
.hp-h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.08; letter-spacing: -.01em; max-width: 22ch; }
#hp-main :is(.hp-lead, .hp-card-p, .hp-body) { font-family: var(--hge-body); font-size: 1.0625rem; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--hgb-muted); }
.hp-lead { max-width: 62ch; margin: 1.25rem 0 0; text-wrap: pretty; }
.hp-body { max-width: 62ch; margin: 1rem 0 0; text-wrap: pretty; }

/* Lead: the new direction headline, directly under the reel */
.hp-intro { text-align: center; padding-top: clamp(3.5rem, 8vw, 6rem); }
.hp-intro .hp-lead { margin: 1.5rem auto 0; max-width: 58ch; }
.hp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem 1rem; margin-top: 2.25rem; }

.hp-btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--hge-display); text-transform: uppercase; font-weight: 600; letter-spacing: .07em; font-size: .9rem; line-height: 1; padding: .95rem 1.9rem; border-radius: 999px; text-decoration: none !important; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.hp-btn--solid { background: var(--hgb-green-deep); color: #fff !important; box-shadow: var(--hge-shadow); }
.hp-btn--solid:hover { background: var(--hge-navy); }
.hp-btn--line { border: 1.5px solid rgba(9, 64, 132, .35); color: var(--hge-navy) !important; }
.hp-btn--line:hover { border-color: var(--hge-navy); background: rgba(9, 64, 132, .05); }
#hp-main .hp-btn:active { transform: scale(.97); transition: transform .1s ease-out; }

/* Featured work */
.hp-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.75rem; }
.hp-card { min-width: 0; display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; background: #fff; border: 1px solid rgba(9, 64, 132, .10); border-radius: var(--hge-radius); transition: box-shadow .3s ease, transform .3s ease; }
#hp-main .hp-card-h { font-family: var(--hge-body) !important; text-transform: none; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: var(--hge-navy); margin: 0; }
.hp-card-p { margin: 0; }
.hp-card-cta { margin-top: auto; padding-top: .5rem; font-weight: 600; color: var(--hgb-green-deep) !important; text-decoration: none; }
.hp-card-cta:hover { color: var(--hge-navy) !important; }
.hp-card--lead { border-color: rgba(30, 125, 68, .35); }
@media (hover: hover) { .hp-card:hover { box-shadow: var(--hge-shadow); transform: translateY(-2px); } }

/* Card visuals: quiet, real-looking UI. Decorative only. */
.hp-vis { position: relative; height: 9.5rem; margin-bottom: .5rem; padding: 1rem; border-radius: 10px; background: var(--hge-paper); overflow: hidden; font-size: .8125rem; font-weight: 500; line-height: 1.4; color: var(--hge-navy); font-variant-numeric: tabular-nums; }
.hp-v-row { display: flex; align-items: center; gap: .75rem; padding: .45rem .75rem; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(14, 31, 73, .08); white-space: nowrap; }
.hp-v-row + .hp-v-row { margin-top: .5rem; }
.hp-v-item { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.hp-v-type { color: var(--hgb-muted); }
.hp-v-pill { padding: .1rem .55rem; border-radius: 999px; background: rgba(61, 192, 102, .16); color: var(--hgb-green-deep); font-weight: 600; }
.hp-v-pill--alt { background: rgba(9, 64, 132, .08); color: var(--hge-navy); }
.hp-v-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; height: 100%; align-content: center; }
.hp-v-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; color: var(--hgb-muted); font-size: .75rem; }
.hp-v-dot { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid rgba(9, 64, 132, .18); background: #fff; }
.hp-v-step.is-done .hp-v-dot { border-color: var(--hgb-green-fill); background: var(--hgb-green-fill); box-shadow: inset 0 0 0 4px #fff; }
.hp-v-step:not(:last-child)::after { content: ""; position: absolute; top: 1rem; left: calc(50% + 1.15rem); right: calc(-50% + 1.15rem); height: 2px; background: rgba(9, 64, 132, .14); }
.hp-v-step.is-done:not(:last-child)::after { background: var(--hgb-green-fill); }
.hp-v-list { display: grid; gap: .5rem; }
.hp-v-check { display: flex; align-items: center; gap: .6rem; }
.hp-v-box { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 2px solid rgba(9, 64, 132, .25); background: #fff; }
.hp-v-check.is-done .hp-v-box { border-color: var(--hgb-green-fill); background: var(--hgb-green-fill); }
.hp-v-line { height: .5rem; border-radius: 999px; background: rgba(9, 64, 132, .12); }
.hp-v-check.is-done .hp-v-line { background: rgba(30, 125, 68, .28); }

/* Capabilities */
.hp-split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.hp-tags { display: flex; flex-wrap: wrap; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.hp-tags li { list-style: none; margin: 0; padding: .55rem 1rem; border-radius: 999px; background: #fff; border: 1px solid rgba(9, 64, 132, .12); color: var(--hge-navy); font-size: .9375rem; font-weight: 500; line-height: 1.3; }

/* Process */
.hp-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: hp; }
.hp-steps li { counter-increment: hp; list-style: none; margin: 0; padding: 1.25rem 1.25rem 1.4rem; border-radius: var(--hge-radius); background: #fff; border: 1px solid rgba(9, 64, 132, .10); font-family: var(--hge-display); text-transform: uppercase; font-size: 1.25rem; font-weight: 600; letter-spacing: .01em; line-height: 1.15; color: var(--hge-navy); }
.hp-steps li::before { content: counter(hp, decimal-leading-zero); display: block; margin-bottom: 1.25rem; font-family: var(--hge-body); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; color: var(--hgb-green-deep); }

/* Team */
.hp-team-names { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.hp-team-names li { list-style: none; margin: 0; padding: 1.25rem 1.4rem; border: 1px solid rgba(9, 64, 132, .10); background: var(--hge-paper); border-radius: var(--hge-radius); }
.hp-team-name { display: block; font-weight: 600; font-size: 1.125rem; color: var(--hge-navy); }
.hp-team-role { display: block; margin-top: .2rem; font-size: .9375rem; color: var(--hgb-muted); }
#hp-main a.hp-inline { color: var(--hgb-green-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#hp-main a.hp-inline:hover { color: var(--hge-navy); }
#hp-main a.hp-team-name { color: var(--hge-navy); }
.hp-team .hp-actions, .hp-free .hp-actions { justify-content: flex-start; }
.hp-team .hp-team-names { max-width: 780px; }

/* Free tool entry */
.hp-free-box { display: grid; grid-template-columns: 1fr; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--hge-radius); background: linear-gradient(165deg, #094084 0%, #062049 100%); color-scheme: dark; }
#hp-main .hp-free-box .hp-h2 { color: #fff; }
#hp-main .hp-free-box .hp-body { color: rgba(255, 255, 255, .82); }
.hp-free-box .hp-btn--solid { background: var(--hgb-green); color: #062049 !important; }
.hp-free-box .hp-btn--solid:hover { background: #fff; }

/* Reveal: content stays in the accessibility tree; only opacity/transform animate. */
@media (prefers-reduced-motion: no-preference) {
  html.js #hp-main [data-hp-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
  html.js #hp-main [data-hp-reveal].is-in { opacity: 1; transform: none; }
  html.js #hp-main .hp-cards [data-hp-reveal]:nth-child(2) { transition-delay: .08s; }
  html.js #hp-main .hp-cards [data-hp-reveal]:nth-child(3) { transition-delay: .16s; }
  html.js #hp-main .hp-steps [data-hp-reveal]:nth-child(2) { transition-delay: .07s; }
  html.js #hp-main .hp-steps [data-hp-reveal]:nth-child(3) { transition-delay: .14s; }
  html.js #hp-main .hp-steps [data-hp-reveal]:nth-child(4) { transition-delay: .21s; }
  html.js #hp-main .hp-card.is-in { transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .3s ease, box-shadow .3s ease; }
}

@media (min-width: 720px) {
  .hp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-team-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; }
  .hp-split .hp-tags { margin-top: .75rem; }
  .hp-free-box { grid-template-columns: minmax(0, 1fr) auto; }
  .hp-free-box .hp-actions { margin-top: 0; }
}
@media (max-width: 767px) {
  .hp-card { padding: 1.5rem; }
  .hp-btn { padding: .95rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-card, .hp-card:hover, #hp-main .hp-btn, #hp-main .hp-btn:active { transition: none; transform: none; }
}

/* About page (/about-us/) */
.ab-head { padding-bottom: 0; }
.ab-h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem) !important; max-width: 20ch; }
.ab-people { padding-top: clamp(3rem, 6vw, 4.5rem); }
.ab-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
.ab-bios { display: grid; gap: 2rem; }
.ab-bio { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--hge-radius); background: var(--hge-paper); border: 1px solid rgba(9, 64, 132, .10); }
#hp-main .ab-name { margin: 0; font-family: var(--hge-display) !important; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.1; letter-spacing: -.005em; color: var(--hge-navy); }
#hp-main .ab-role { margin: .4rem 0 0; font-size: .9375rem; font-weight: 600; letter-spacing: .02em; color: var(--hgb-green-deep); }
.ab-bio .hp-actions { justify-content: flex-start; margin-top: 1.75rem; }
.ab-photo { margin: 0; }
.ab-photo img { display: block; width: 100%; height: auto; border-radius: var(--hge-radius); box-shadow: var(--hge-shadow); }
#hp-main .ab-photo figcaption { margin-top: .75rem; font-size: .8125rem; color: var(--hgb-muted); text-align: right; }
#hp-main .ab-photo figcaption a, #hp-main .ab-contact a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ab-work .hp-actions { justify-content: flex-start; }
#hp-main .ab-contact { margin: 2.5rem 0 0; font-size: .9375rem; color: var(--hgb-muted); }
@media (min-width: 900px) {
  .ab-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 4rem; }
  .ab-photo { position: sticky; top: 130px; }
}

/* Nick Greene profile (/nick-greene/) */
.nk-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.nk-h1 { font-size: clamp(2.6rem, 6vw, 4.5rem) !important; line-height: 1 !important; }
#hp-main .nk-title { margin: .75rem 0 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600; color: var(--hgb-green-deep); }
#hp-main .nk-intro { font-size: 1.1875rem; color: var(--hge-navy); }
.nk-head .hp-actions { justify-content: flex-start; }
.nk-photo { margin: 0; max-width: min(360px, 78vw); }
.nk-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--hge-radius); box-shadow: var(--hge-shadow); }
.nk-cols { display: grid; grid-template-columns: 1fr; gap: 1.5rem 4rem; }
#hp-main .nk-first { margin-top: 0; }
.nk-stats { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.nk-stats li { list-style: none; margin: 0; display: flex; flex-direction: column; }
.nk-num { font-family: var(--hge-display); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 600; line-height: 1; color: var(--hge-navy); font-variant-numeric: tabular-nums; }
.nk-lbl { margin-top: .4rem; font-size: .9375rem; font-weight: 500; color: var(--hgb-muted); }
@media (min-width: 900px) {
  .nk-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 5rem; }
  .nk-cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}