/* Kinetic BIM — shared section components. All classes are .kb- prefixed so
   they never collide with Dawn. Sizes in px (Dawn sets 1rem = 10px). */

:root {
  --kb-teal: #83acb1;
  --kb-teal-dark: #5d8a8f;
  --kb-teal-tint: #eef4f4;
  --kb-ink: #2d2e33;
  --kb-ink-deep: #242427;
  --kb-body: #6c6d74;
  --kb-muted: #b4b5ba;
  --kb-line: #e5e5e7;
  --kb-bg-alt: #f7f7f7;
}

.kb-band { padding: 78px 24px; }
.kb-band--alt { background: var(--kb-bg-alt); }
.kb-band--dark { background: var(--kb-ink-deep); color: #fff; }
.kb-wrap { max-width: 1140px; margin: 0 auto; }

.kb-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: var(--kb-teal-dark); margin: 0 0 8px; }
.kb-band--dark .kb-eyebrow { color: var(--kb-teal); }
.kb-h2 { font-size: 32px; font-weight: 800; line-height: 1.18; letter-spacing: -0.3px; color: var(--kb-ink); margin: 0 0 8px; }
.kb-band--dark .kb-h2 { color: #fff; }
.kb-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.kb-head p { color: var(--kb-body); font-size: 16px; margin: 8px 0 0; }

/* card grid */
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kb-card { background: #fff; border: 1px solid var(--kb-line); border-radius: 12px; padding: 26px; transition: 0.18s; }
.kb-card:hover { border-color: var(--kb-teal); box-shadow: 0 12px 34px rgba(36,36,39,0.09); transform: translateY(-2px); }
.kb-card__ico { width: 46px; height: 46px; border-radius: 10px; background: var(--kb-teal-tint); display: grid; place-items: center; font-size: 22px; margin-bottom: 14px; }
.kb-card h3 { font-size: 18px; font-weight: 700; color: var(--kb-ink); margin: 0 0 4px; }
.kb-card p { font-size: 15px; color: var(--kb-body); margin: 0; line-height: 1.6; }

/* steps */
.kb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.kb-step__num { width: 40px; height: 40px; border-radius: 50%; background: var(--kb-teal); color: #fff; display: grid; place-items: center; font-weight: 700; margin-bottom: 12px; }
.kb-step h3 { font-size: 17px; font-weight: 700; color: var(--kb-ink); margin: 0 0 4px; }
.kb-step p { font-size: 15px; color: var(--kb-body); margin: 0; line-height: 1.6; }

/* pricing */
.kb-price-wrap { display: flex; justify-content: center; }
.kb-price { background: #fff; border: 1.5px solid var(--kb-teal); border-radius: 16px; padding: 40px; max-width: 430px; width: 100%; text-align: center; box-shadow: 0 12px 34px rgba(36,36,39,0.09); }
.kb-price__amt { font-size: 46px; font-weight: 800; color: var(--kb-ink-deep); margin: 8px 0 2px; }
.kb-price__amt span { font-size: 16px; font-weight: 600; color: var(--kb-body); }
.kb-price ul { list-style: none; text-align: left; margin: 24px 0; padding: 0; display: grid; gap: 10px; }
.kb-price li { display: flex; gap: 10px; font-size: 15px; color: var(--kb-ink); }
.kb-price__note { color: var(--kb-body); font-size: 14px; margin: 4px 0 0; }
.kb-price .kb-btn { width: 100%; margin-top: 4px; box-sizing: border-box; }

/* heritage */
.kb-heritage { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; }
.kb-heritage p { color: #c4cdce; font-size: 16px; line-height: 1.6; }
.kb-heritage__stats { display: flex; gap: 34px; margin-top: 20px; }
.kb-heritage__stats .n { font-size: 30px; font-weight: 800; color: var(--kb-teal); }
.kb-heritage__stats .l { font-size: 12px; color: #9fb1b2; text-transform: uppercase; letter-spacing: 1px; }
.kb-pull { font-family: 'PT Serif', Georgia, serif; font-style: italic; font-size: 20px; color: #fff; margin: 0; }

/* faq */
.kb-faq { max-width: 780px; margin: 0 auto; }
.kb-faq__item { border-bottom: 1px solid var(--kb-line); padding: 20px 0; }
.kb-faq__item h3 { font-size: 17px; font-weight: 700; color: var(--kb-ink); margin: 0 0 4px; }
.kb-faq__item p { font-size: 15px; color: var(--kb-body); margin: 0; line-height: 1.6; }

/* buttons */
.kb-btn { display: inline-block; padding: 13px 24px; border-radius: 8px; font-weight: 600; font-size: 15px; border: 1.5px solid transparent; transition: 0.16s; cursor: pointer; text-decoration: none; }
.kb-btn--dark { background: var(--kb-ink-deep); color: #fff; }
.kb-btn--dark:hover { background: #000; }
.kb-btn--teal { background: var(--kb-teal); color: #fff; }
.kb-btn--teal:hover { background: var(--kb-teal-dark); }
.kb-btn--ghost { border-color: var(--kb-line); color: var(--kb-ink); background: #fff; }
.kb-btn--ghost:hover { border-color: var(--kb-teal); color: var(--kb-teal-dark); }
.kb-tick { color: var(--kb-teal-dark); font-weight: 800; }

/* page hero */
.kb-page-hero { background: #fff; border-bottom: 1px solid var(--kb-line); padding: 64px 24px; }
.kb-page-hero h1 { font-size: 42px; font-weight: 800; color: var(--kb-ink); margin: 6px 0 0; line-height: 1.15; letter-spacing: -0.3px; }
.kb-page-hero p { font-size: 18px; color: var(--kb-body); max-width: 60ch; margin: 10px 0 0; line-height: 1.6; }

/* split layout */
.kb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.kb-split p { color: var(--kb-body); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }

/* prose (legal/policy) */
.kb-prose { max-width: 760px; margin: 0 auto; }
.kb-prose h2 { font-size: 21px; font-weight: 700; color: var(--kb-ink); margin: 28px 0 8px; }
.kb-prose h3 { font-size: 16px; font-weight: 700; color: var(--kb-ink); margin: 20px 0 6px; }
.kb-prose p, .kb-prose li { color: var(--kb-body); font-size: 15px; line-height: 1.7; }
.kb-prose ul, .kb-prose ol { margin: 8px 0 12px 20px; display: grid; gap: 6px; }
.kb-prose a { color: var(--kb-teal-dark); font-weight: 600; }
.kb-prose strong { color: var(--kb-ink); }
.kb-updated { color: var(--kb-muted); font-size: 14px; margin: 0 0 6px; }
.kb-legal-note { background: #FFF7E6; border: 1px solid #F0D98C; color: #7A5B12; font-size: 14px; padding: 13px 16px; border-radius: 10px; margin: 0 0 24px; }

/* contact */
.kb-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; }
.kb-cd { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 20px; }
.kb-cd__i { width: 40px; height: 40px; border-radius: 10px; background: var(--kb-teal-tint); color: var(--kb-teal-dark); display: grid; place-items: center; flex: 0 0 auto; }
.kb-cd__l { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--kb-muted); font-weight: 700; }
.kb-cd__v { color: var(--kb-ink); font-weight: 500; }
.kb-cd__v a { color: var(--kb-ink); text-decoration: none; }
.kb-form { background: #fff; border: 1px solid var(--kb-line); border-radius: 12px; padding: 28px; }
.kb-form label { display: block; font-size: 13px; font-weight: 600; color: var(--kb-ink); margin: 14px 0 6px; }
.kb-form input, .kb-form textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--kb-line); border-radius: 8px; font-family: inherit; font-size: 15px; color: var(--kb-ink); box-sizing: border-box; }
.kb-form input:focus, .kb-form textarea:focus { outline: none; border-color: var(--kb-teal); }
.kb-form .kb-btn { width: 100%; margin-top: 18px; box-sizing: border-box; border: none; }

/* tool detail rows */
.kb-toolrow { padding: 34px 0; border-bottom: 1px solid var(--kb-line); }
.kb-toolrow:last-child { border-bottom: none; }
.kb-toolrow__h { display: flex; align-items: center; gap: 13px; margin-bottom: 8px; }
.kb-toolrow__h .kb-card__ico { margin-bottom: 0; }
.kb-toolrow__tag { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--kb-teal-dark); }
.kb-toolrow__h h2 { font-size: 22px; font-weight: 700; color: var(--kb-ink); margin: 0; }
.kb-toolrow__body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: start; }
.kb-toolrow__body p { color: var(--kb-body); font-size: 15px; line-height: 1.7; margin: 0; }
.kb-toolrow__body ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kb-toolrow__body li { display: flex; gap: 10px; font-size: 15px; color: var(--kb-ink); }

@media screen and (max-width: 760px) {
  .kb-split, .kb-contact { grid-template-columns: 1fr; }
  .kb-page-hero h1 { font-size: 30px; }
}
@media screen and (max-width: 680px) { .kb-toolrow__body { grid-template-columns: 1fr; } }

/* header brand lockup (logo fallback) */
.kb-brandlock { display: inline-flex; align-items: center; gap: 8px; }
.kb-brandlock img { height: 30px; width: auto; display: block; }
.kb-brandlock__w { font-weight: 800; font-size: 18px; letter-spacing: 0.4px; color: var(--kb-ink); }
.kb-brandlock__w .lite { font-weight: 500; }

@media screen and (max-width: 880px) { .kb-grid { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 760px) { .kb-steps, .kb-heritage { grid-template-columns: 1fr; } }
@media screen and (max-width: 560px) { .kb-grid { grid-template-columns: 1fr; } }
@media screen and (max-width: 749px) { .kb-band { padding: 56px 20px; } .kb-h2 { font-size: 26px; } }

/* ---------------------------------------------------------------- company-first redesign (2026-09) */
.kb-center { text-align: center; }

/* ticked point lists inside cards (services, lists) */
.kb-points { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.kb-points li { display: flex; gap: 9px; font-size: 14.5px; color: var(--kb-ink); line-height: 1.5; }
.kb-service { display: flex; flex-direction: column; }
.kb-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.kb-lists .kb-card:hover { transform: none; }

/* projects */
.kb-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.kb-project { background: #fff; border: 1px solid var(--kb-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: 0.18s; }
.kb-project:hover { border-color: var(--kb-teal); box-shadow: 0 12px 34px rgba(36,36,39,0.09); transform: translateY(-2px); }
.kb-project[hidden] { display: none; }
.kb-project__img { aspect-ratio: 16 / 10; background: var(--kb-teal-tint); overflow: hidden; }
.kb-project__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-project__img--ph { display: grid; place-items: center; background: linear-gradient(135deg, #2d2e33 0%, #3f5c5f 60%, #83acb1 100%); }
.kb-project__img--ph span { color: rgba(255,255,255,0.85); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; font-size: 12px; padding: 0 16px; text-align: center; }
.kb-project__body { padding: 20px 22px 22px; }
.kb-project__meta { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--kb-teal-dark); margin: 0 0 6px; }
.kb-project h3 { font-size: 18px; font-weight: 700; color: var(--kb-ink); margin: 0 0 6px; line-height: 1.3; }
.kb-project p { font-size: 14.5px; color: var(--kb-body); margin: 0 0 6px; line-height: 1.6; }
.kb-project__svc { font-weight: 600; color: var(--kb-ink) !important; }
.kb-project__client strong { color: var(--kb-ink); }
.kb-project--example { border-style: dashed; }
.kb-filter { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: -20px 0 28px; }
.kb-chip { border: 1.5px solid var(--kb-line); background: #fff; color: var(--kb-ink); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.kb-chip:hover { border-color: var(--kb-teal); }
.kb-chip.is-on { background: var(--kb-ink-deep); border-color: var(--kb-ink-deep); color: #fff; }

/* clients */
.kb-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.kb-client { background: #fff; border: 1px solid var(--kb-line); border-radius: 12px; height: 96px; display: grid; place-items: center; padding: 16px; text-decoration: none; transition: 0.16s; }
.kb-client:hover { border-color: var(--kb-teal); }
.kb-client img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: 0.16s; }
.kb-client:hover img { filter: none; opacity: 1; }
.kb-client span { font-weight: 700; color: var(--kb-ink); font-size: 15px; text-align: center; line-height: 1.3; }
.kb-client--example { border-style: dashed; }
.kb-client--example span { color: var(--kb-muted); }

/* team */
.kb-person__top { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.kb-person__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.kb-person__photo--ini { display: grid; place-items: center; background: var(--kb-teal); color: #fff; font-weight: 800; font-size: 18px; letter-spacing: 0.5px; }
.kb-person h3 { margin: 0; }
.kb-person__role { font-size: 13px !important; font-weight: 600; color: var(--kb-teal-dark) !important; margin: 2px 0 0 !important; }

/* call to action */
.kb-cta--tint { background: linear-gradient(165deg, var(--kb-bg-alt), var(--kb-teal-tint)); }
.kb-cta--dark { background: var(--kb-ink-deep); }
.kb-cta--dark .kb-h2 { color: #fff; }
.kb-cta--dark .kb-eyebrow { color: var(--kb-teal); }
.kb-cta--dark .kb-cta__text { color: #c4cdce; }
.kb-cta--dark .kb-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.kb-cta--dark .kb-btn--ghost:hover { background: #fff; color: var(--kb-ink-deep); }
.kb-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.kb-cta__text { color: var(--kb-body); font-size: 16px; line-height: 1.6; max-width: 58ch; margin: 6px 0 0; }
.kb-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* header login menu */
.kb-login { position: relative; margin: 0 4px; display: flex; align-items: center; align-self: center; }
.kb-login__btn { line-height: 1; }
.kb-login > summary { list-style: none; }
.kb-login > summary::-webkit-details-marker { display: none; }
.kb-login__btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 12px; border: 1.5px solid var(--kb-line); border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--kb-ink); white-space: nowrap; }
.kb-login__btn:hover, .kb-login[open] .kb-login__btn { border-color: var(--kb-teal); color: var(--kb-teal-dark); }
.kb-login__btn .svg-wrapper, .kb-login__btn .svg-wrapper svg { width: 18px; height: 18px; }
.kb-login__caret { font-size: 11px; }
.kb-login__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; background: #fff; border: 1px solid var(--kb-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(36,36,39,0.14); padding: 6px; width: 290px; display: grid; }
.kb-login__menu a { display: grid; gap: 2px; padding: 11px 13px; border-radius: 8px; text-decoration: none; color: var(--kb-ink); }
.kb-login__menu a:hover { background: var(--kb-teal-tint); }
.kb-login__menu strong { font-size: 14.5px; }
.kb-login__menu small { font-size: 12.5px; color: var(--kb-body); line-height: 1.4; }
@media screen and (max-width: 749px) {
  .kb-login__label, .kb-login__caret { display: none; }
  .kb-login__btn { border: none; padding: 8px; }
  /* Anchored under the button, not fixed: the mobile announcement bar wraps to three lines, so a
     fixed top offset landed on top of the header. */
  .kb-login__menu { width: min(300px, calc(100vw - 24px)); right: -8px; }
}

@media screen and (max-width: 960px) { .kb-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 600px) { .kb-projects { grid-template-columns: 1fr; } .kb-cta__inner { flex-direction: column; align-items: flex-start; } }

/* Phone header: the Login button takes the room the hidden account icon used to leave free, and
   the logo lock-up was being squeezed until the mark overlapped the wordmark. Keep the lock-up
   whole and a touch smaller instead. */
.kb-brandlock { white-space: nowrap; }
.kb-brandlock img { flex: 0 0 auto; }
@media screen and (max-width: 420px) {
  .kb-brandlock { gap: 6px; }
  .kb-brandlock img { height: 26px; }
  .kb-brandlock__w { font-size: 15px; letter-spacing: 0.2px; }
  .kb-login { margin: 0; }
  .kb-login__btn { padding: 6px; }
}