/* Site-wide colour theme: white + logo green, with a transparent navbar and a
   light-green footer. Every page loads this file after the other stylesheets, and the
   bk-*.css files read their colours from these tokens.
   To try another accent (e.g. red), change only the values in this :root block. */
:root {
  /* Accent: the green of the "K" in the logo. */
  --bk-accent: #076d1f;
  --bk-accent-rgb: 7, 109, 31;
  --bk-accent-light: #4c913b;      /* gradient partner of the accent */
  --bk-accent-alt: #075b3f;        /* second section-title palette */
  --bk-accent-alt-light: #3e8c69;
  --bk-accent-deep: #062814;       /* call-to-action panel gradient */
  --bk-accent-deep-2: #0d4a26;
  --bk-accent-on-dark: #a9d79a;    /* small labels and highlights on dark panels */

  /* Light tints for alternating section backgrounds and panels. */
  --bk-tint-50: #f4faf2;
  --bk-tint-100: #eaf3e7;
  --bk-tint-200: #d4e9cd;

  /* Pale chip buttons (project filters, service links, career roles). */
  --bk-chip-bg: #e5f2e6;
  --bk-chip-border: #bfdcc3;
  --bk-chip-text: #245435;
  --bk-chip-bg-hover: #cce5cf;
  --bk-chip-border-hover: #8cba94;
  --bk-chip-text-hover: #173e26;

  /* Neutrals, from the logo's charcoal "B" and "INFRA". */
  --bk-black: #0b0b0b;
  --bk-black-rgb: 11, 11, 11;
  --bk-ink: #1e1e1e;               /* headings */
  --bk-ink-rgb: 30, 30, 30;
  --bk-text-on-dark: #f2f2f2;
  --bk-shade-rgb: 12, 14, 13;      /* photo overlays */

  /* Template accent tokens (coloring.css) mapped onto the theme. */
  --primary-color: var(--bk-accent);
  --primary-color-rgb: var(--bk-accent-rgb);
  --secondary-color: var(--bk-accent);
  --secondary-color-rgb: var(--bk-accent-rgb);
}

/* style.css declares its text and background tokens on `*`, so a :root
   override would not reach elements; redeclare them the same way. */
* {
  --btn-hover-bg: var(--bk-accent-deep-2);
  --heading-font-color: var(--bk-ink);
  --body-font-color: rgba(var(--bk-ink-rgb), .75);
  --bg-default: #fff;
  --bg-light: var(--bk-tint-100);
  --bg-dark-1: var(--bk-black);
  --bg-dark-1-rgb: var(--bk-black-rgb);
  --bg-dark-2: #161616;
  --bg-dark-3: #222;
}

/* Transparent at the top; white after 48px, on interaction, or for an open menu.
   Keep the template's backdrop blur off while scrolling. */
header.bk-site-header {
  --bk-header-background: transparent;
  --bk-header-shadow: 0 0 0 transparent;
  --bk-nav-ink: var(--bk-nav-top-ink, var(--bk-ink));
  --bk-nav-accent: var(--bk-nav-top-accent, var(--bk-accent));
  background: var(--bk-header-background) !important;
  box-shadow: var(--bk-header-shadow);
  transition: background-color .25s ease, box-shadow .25s ease;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Light labels over photo banners; plain pages retain dark labels. */
body:has(main > section:first-of-type.text-light) header.bk-site-header {
  --bk-nav-top-ink: #fff;
  --bk-nav-top-accent: var(--bk-accent-on-dark);
}
header.bk-site-header.bk-header-scrolled,
header.bk-site-header.menu-open,
header.bk-site-header:has(:focus-visible) {
  --bk-header-background: #fff;
  --bk-header-shadow: 0 6px 24px rgba(0, 0, 0, .08);
  --bk-nav-ink: var(--bk-ink);
  --bk-nav-accent: var(--bk-accent);
}
@media (hover: hover) {
  header.bk-site-header:hover {
    --bk-header-background: #fff;
    --bk-header-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    --bk-nav-ink: var(--bk-ink);
    --bk-nav-accent: var(--bk-accent);
  }
}
header.bk-site-header #mainmenu a.menu-item { color: var(--bk-ink) !important; }
header.bk-site-header #mainmenu > li > a.menu-item { color: var(--bk-nav-ink) !important; }
header.bk-site-header #mainmenu > li > a.menu-item:hover,
header.bk-site-header #mainmenu > li > a.menu-item.bk-nav-current,
header.bk-site-header #mainmenu > li > a.menu-item[aria-current="page"] { color: var(--bk-nav-accent) !important; }
header.bk-site-header #mainmenu > li > ul a.menu-item:hover,
header.bk-site-header #mainmenu > li > ul a.menu-item:focus-visible { color: var(--bk-accent) !important; }
header.bk-site-header #mainmenu > li > a.menu-item::after { background: var(--bk-nav-accent) !important; }
header.bk-site-header #mainmenu > li.has-child::after { color: var(--bk-nav-ink) !important; opacity: .65; }

/* The hamburger follows the header; expanded menu arrows and dividers stay dark. */
header.bk-site-header #menu-btn,
header.bk-site-header #menu-btn::before { color: var(--bk-nav-ink) !important; }
header.bk-site-header.header-mobile #mainmenu > li > span { background-image: url(../images/icons/arrow-down.png) !important; }
header.bk-site-header.header-mobile #mainmenu li { border-color: rgba(0, 0, 0, .1) !important; }
header.bk-site-header.header-mobile #mainmenu li ul { background: transparent !important; border: 0 !important; box-shadow: none !important; }
header.bk-site-header.header-mobile #mainmenu a.menu-item:hover { background: var(--bk-tint-100) !important; }

/* Light footer in the section tint. It carries the template's text-light
   class, so its dark-surface text tokens are pointed at the ink colour. */
footer.bk-site-footer,
footer.bk-site-footer * {
  --heading-font-color-bg-dark: var(--bk-ink);
  --body-font-color-bg-dark: rgba(var(--bk-ink-rgb), .75);
}
footer.bk-site-footer {
  background: var(--bk-tint-100) !important;
  color: rgba(var(--bk-ink-rgb), .75) !important;
  border-top: 3px solid var(--bk-accent);
}
footer.bk-site-footer * { color: inherit; }
footer.bk-site-footer :is(h1, h2, h3, h4, h5, h6, .hs-5) { color: var(--bk-ink) !important; }
footer.bk-site-footer .widget > h2 { color: var(--bk-accent) !important; }
footer.bk-site-footer a { color: var(--bk-ink) !important; }
footer.bk-site-footer a:hover { color: var(--bk-accent) !important; }
footer.bk-site-footer .bk-footer-enquiry img { filter: brightness(0); }
footer.bk-site-footer :is(.subfooter, hr, .row, [class*="border"]) { border-color: rgba(0, 0, 0, .1) !important; }
/* Contact labels: the template's .op-5 fades the body colour below 4.5:1 on the tint. */
footer.bk-site-footer .widget > .op-5 { opacity: 1; }

/* Shared closing contact cards, consistent across content pages. */
.bk-cta {
  background: var(--bk-tint-100);
  color: var(--bk-ink);
  border: 1px solid rgba(var(--bk-accent-rgb), .16);
  border-left: 4px solid var(--bk-accent);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px);
  gap: 32px;
}
.bk-cta h2 {
  color: var(--bk-ink);
  text-transform: none;
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.2;
}
.bk-cta p { color: var(--bk-ink); margin-bottom: 0; max-width: 680px; }
.bk-cta .subtitle { color: var(--bk-accent); }
.bk-cta .btn-main { background: var(--bk-accent); color: #fff; flex-shrink: 0; }
.bk-cta .btn-main:hover { background: var(--bk-accent-deep); color: #fff; }

/* Buttons: the template's fx-slide hover (label slides out and a copy slides in)
   is replaced by a gentle lift, a deeper fill (--btn-hover-bg) and a soft shadow. */
a.btn-main.fx-slide::before { content: none; }
a.btn-main.fx-slide:hover span { transform: none; opacity: 1; }
.btn-main,
.bk-home-about-button {
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, translate .25s ease, filter .25s ease;
}
.btn-main:hover,
.btn-main:focus-visible,
.bk-home-about-button:hover,
.bk-home-about-button:focus-visible {
  translate: 0 -2px; /* not transform, which entrance animations (wow) hold on to */
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .35);
}
.btn-main:active,
.bk-home-about-button:active {
  translate: none;
  box-shadow: none;
}

/* Consistent frames for section images; gallery cards already carry this border. */
section img:not(.bk-sketch img):not([aria-hidden="true"]):not([aria-hidden="true"] img):not(.bk-photo img) {
  --rounded-1: 12px;
  box-sizing: border-box;
  border: 3px solid #000;
  border-radius: 12px;
}

/* Frames on wrappers use the same curved corners as the photographs. */
.bk-gallery-grid > .bk-photo,
.bk-work-card figure {
  border-radius: 12px;
  overflow: hidden;
}

/* Footer wordmark colors echo the dark B and green K in the brand logo. */
footer.bk-site-footer .bk-copyright-brand { font-weight: 700; white-space: nowrap; }
footer.bk-site-footer .bk-copyright-b { color: #1e1e1e; }
footer.bk-site-footer .bk-copyright-k { color: #076d1f; }
footer.bk-site-footer .bk-powered-by { display: inline-block; }
footer.bk-site-footer .bk-powered-by a { text-decoration: underline !important; text-underline-offset: 3px; }

footer.bk-site-footer .bk-copyright-name { color: #1e1e1e; font-weight: 700; }

/* Center closing contact-card content consistently across pages. */
.bk-cta {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.bk-cta > div { min-width: 0; }
.bk-cta p { margin-left: auto; margin-right: auto; }
.bk-cta > .btn-main { align-self: center; max-width: 100%; white-space: normal; }