/* BitNetica component styles — carried by the bitnetica-core plugin. Loaded only when the legacy 'bitnetica' theme is not active. */

/* ============ Tokens ============ */
:root {
  --navy: #1b3a54;
  --navy-deep: #122a3f;
  --navy-ink: #0d2233;
  --orange: #e85c2a;
  --orange-dark: #c6491e;
  --orange-soft: #fdece4;
  --mist: #eaeff4;
  --line: #dde5ec;
  --ink: #22303c;
  --slate: #5c6c7a;
  --white: #ffffff;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 10px 30px rgba(18, 42, 63, 0.10);
  --font-display: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-body: "Geist", "Segoe UI", Arial, sans-serif;
  --wrap: 1160px;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1.1em; }

/* Brochure signature: orange square end-mark */
.sq::after {
  content: "";
  display: inline-block;
  width: 0.42em; height: 0.42em;
  background: var(--orange);
  margin-left: 0.28em;
  vertical-align: baseline;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 48px 0; }
#services { padding-top: 120px; }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: #e8eef4; }
.section--navy h2, .section--navy h3 { color: #fff; }
.kicker {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-dark);
  display: block;
  margin-bottom: 10px;
}
.section--navy .kicker { color: var(--orange); }
.lead { font-size: 1.15rem; color: var(--slate); max-width: 46em; }
.section--navy .lead { color: #c6d3de; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--orange { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(232, 92, 42, 0.35); }
.btn--orange:hover { background: var(--orange-dark); color: #fff; }
/* Explore all services / Learn more about Abe: no glow (site-wide .btn--orange keeps it elsewhere). */
#services .btn--orange, .founder-card .btn--orange { box-shadow: none; }
/* Get in touch card: no glow on its "Book a free consultation" button (site-wide .btn--orange keeps it elsewhere). */
.contact-info-card .btn--orange { box-shadow: none; }
/* From the blog: no glow on "View all articles" (site-wide .btn--orange keeps it elsewhere). */
#from-the-blog .btn--orange { box-shadow: none; }
.btn--ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--ghost-light { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }

/* ============ Header ============ */
.topbar {
  background: var(--navy-deep);
  color: #cfdbe6;
  font-size: 0.85rem;
  padding: 7px 0;
}
.topbar .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topbar a { color: #fff; font-weight: 600; }
.site-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand:hover { text-decoration: none; }
.brand svg { width: 46px; height: 46px; flex: none; }
.brand__text { line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}
.brand__name .bit { color: var(--orange); }
.brand__name .netica { color: var(--navy); }
.brand__tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
}
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.main-nav li { position: relative; }
.main-nav a {
  display: block;
  padding: 10px 13px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--navy);
  border-radius: 7px;
}
.main-nav a:hover { background: var(--mist); text-decoration: none; }
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a { color: var(--orange-dark); }
.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { display: flex; }
.main-nav .sub-menu a { padding: 9px 12px; font-weight: 500; }
.nav-cta { margin-left: 10px; }
.nav-cta a {
  background: var(--orange);
  color: #fff !important;
  padding: 11px 18px;
  border-radius: 8px;
}
.nav-cta a:hover { background: var(--orange-dark); }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding: 14px 20px; gap: 0; }
  .main-nav .sub-menu { position: static; display: flex; box-shadow: none; border: none; padding-left: 16px; }
  .nav-cta { margin: 8px 0 0; }
}

/* ============ Hero ============ */
.hero {
  background: linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 60%, #24506f 100%);
  color: #e9eff5;
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
}
/* Full-bleed image hero: the artwork covers the whole section.
   Design the image with empty space on the left for the text. */
.hero--img {
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
/* Parallax scroll (desktop); disabled on touch devices where fixed
   backgrounds are janky or unsupported. */
.hero--parallax { background-attachment: fixed; }
@media (max-width: 860px) {
  .hero--parallax { background-attachment: scroll; }
}
/* The Customizer's Additional CSS (outside this file, injected later in
   <head>) forces `.hero.hero--img { background-attachment: scroll !important; }`,
   which silently killed parallax no matter what was set above. Beat it with
   higher specificity + !important rather than editing that separate CSS. */
.hero.hero--img.hero--parallax {
  background-attachment: fixed, fixed !important;
  /* background-attachment:fixed positions the image relative to the
     VIEWPORT, not this box -- plain "center" vertically centers it in the
     whole browser window (leaving a gap above the photo, or cropping it,
     depending on window height) instead of aligning it to this box's own
     top edge. --bn-hero-offset (set by main.js to the header's actual
     bottom position on load/scroll/resize) is the pixel offset from the
     viewport top down to where this box starts, so this keeps the photo's
     top edge locked to the box's top edge instead of drifting. */
  background-position: center var(--bn-hero-offset, 116px), center !important;
}
@media (max-width: 860px) {
  .hero.hero--img.hero--parallax {
    background-attachment: scroll, scroll !important;
    background-position: center, center !important;
  }
}
/* Legibility scrim over the text side when an image is set. Capped to the
   PHOTO's own rendered width (560px tall * its 3064/1050 aspect = ~1634px,
   a fixed value since the photo's height is a fixed px) instead of the
   full .hero box -- covers the whole photo edge-to-edge (no undarkened
   strip of raw photo left showing) while stopping exactly at the photo's
   own edge, so it never bleeds onto the flat-color side-fill margins
   beyond that, which stay the same pure shade as the badge squares below. */
.hero--img::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 1634px);
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(13,34,51,0.62) 0%, rgba(13,34,51,0.34) 42%, rgba(13,34,51,0) 68%);
  pointer-events: none;
}
.hero .wrap { position: relative; width: 100%; padding-top: 84px; padding-bottom: 92px; }
.hero__inner { max-width: 620px; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: #f5936b; }
.hero .lead { color: #fff; font-weight: 700; text-shadow: none; }
.hero__points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; padding: 0; list-style: none; font-size: 0.95rem; color: #d7e1ea; }
.hero__points li::before { content: "■"; color: var(--orange); margin-right: 8px; font-size: 0.7em; vertical-align: 1px; }
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero .wrap { padding-top: 56px; padding-bottom: 56px; }
  .hero--img { background-position: center; }
  .hero--img::before { background: rgba(13,34,51,0.5); }
}

/* Interior page hero */
.page-hero { background: var(--navy); color: #dbe5ee; padding: 52px 0 46px; }
.page-hero h1 { color: #fff; margin-bottom: 0.3em; }
.page-hero .lead { color: #c6d3de; margin-bottom: 0; }

/* Breadcrumbs */
.crumbs { font-size: 1rem; margin-bottom: 18px; color: #9db2c2; }
.crumbs a { color: #cfdbe6; }
.crumbs .sep { margin: 0 7px; color: var(--orange); }

/* ============ Cards & grids ============ */
.grid { display: grid; gap: 26px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}
/* Horizontal card variant: icon beside the text instead of stacked above it --
   for full-width single-column cards, so the icon doesn't end up isolated in
   the top-left corner of an otherwise-empty wide box. */
.card--row { flex-direction: row; align-items: center; gap: 24px; }
.card--row .icon-badge { margin-bottom: 0; }
.card--row .card__body { flex: 1; min-width: 0; }
.card--row h3 { margin-top: 0; text-align: center; }
.card--row p { margin-bottom: 0; }
@media (max-width: 560px) {
  .card--row { flex-direction: column; align-items: flex-start; }
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--orange); }
.card h3 a { color: var(--navy); }
.card h3 a:hover { color: var(--orange-dark); text-decoration: none; }
.card p { color: var(--slate); font-size: 0.97rem; margin-bottom: 14px; }
.card .more { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; }
.card .more::after { content: " →"; }
.icon-badge {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.icon-badge svg { width: 30px; height: 30px; }

/* Steps 1-2-3 — realistic photo circles, added 2026-09-06 */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step { text-align: center; padding: 10px; }
.step__photo { position: relative; width: 190px; height: 190px; margin: 0 auto 22px; }
.step__photo img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(232, 92, 42, 0.55);
  box-shadow: 0 12px 28px rgba(9, 22, 34, 0.35);
  transition: transform .3s ease, filter .3s ease, border-color .3s ease;
}
.step:hover .step__photo img {
  transform: scale(1.045);
  filter: drop-shadow(0 0 6px rgba(255, 224, 130, 0.55)) drop-shadow(0 0 2px rgba(255, 224, 130, 0.4));
}
.step__num {
  position: absolute; bottom: 0; right: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--navy);
  box-shadow: 0 6px 16px rgba(232, 92, 42, 0.4);
}
.step h3 { margin-bottom: 8px; font-size: 1.42rem; }
.step p { color: var(--slate); font-size: 1.05rem; }
.section--navy .step p { color: #c6d3de; }

/* Trust bar */
.trustbar { background: var(--navy-deep); color: #fff; padding: 22px 0; }
.trustbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; }
.trust { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.trust svg { width: 22px; height: 22px; color: var(--orange); flex: none; }

/* Partner strip */
.partners { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center; align-items: center; }
.partners span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #8ba0b1;
  letter-spacing: 0.02em;
}

/* Area / town lists */
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; margin: 18px 0 0; }
.pill-list a, .pill-list .pill {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--navy);
}
.pill-list a:hover { border-color: var(--orange); color: var(--orange-dark); text-decoration: none; }
.pill-list .pill--plain { background: var(--mist); color: var(--slate); font-weight: 500; }
.section--mist .pill-list .pill--plain { background: #e7edf3; }

/* Checklist */
.checks { list-style: none; padding: 0; margin: 18px 0; }
.checks li { padding-left: 30px; position: relative; margin-bottom: 10px; }
.checks li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px;
  background: var(--orange);
}

/* Split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 34px; } }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--orange-dark), var(--orange));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { margin: 0; opacity: 0.92; }
.cta-band .btn { background: #fff; color: var(--orange-dark); }
.cta-band .btn:hover { background: var(--navy); color: #fff; }

/* ============ Footer ============ */
.site-footer { background: var(--navy-ink); color: #b9c8d5; font-size: 0.93rem; }
.site-footer a { color: #dce6ee; }
.site-footer a:hover { color: var(--orange); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 60px 0 44px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-brand svg { width: 44px; height: 44px; margin-bottom: 12px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 18px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: #8ba0b1;
}

/* ============ Blog / content ============ */
.content-area { padding: 60px 0; }
.entry-content { max-width: 760px; }
.entry-content img { border-radius: var(--radius); }
.post-card { margin-bottom: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.post-card h2 { font-size: 1.5rem; }
.post-meta { font-size: 0.85rem; color: var(--slate); margin-bottom: 8px; }
.pagination { display: flex; gap: 8px; margin-top: 30px; }
.pagination .page-numbers {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 7px;
  font-family: var(--font-display); font-weight: 600; color: var(--navy);
}
.pagination .current { background: var(--orange); border-color: var(--orange); color: #fff; }

/* Forms (incl. Contact Form 7) */
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 textarea, .contact-fallback input, .contact-fallback textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font: inherit;
  margin: 4px 0 16px;
  background: #fff;
}
.wpcf7 input:focus, .wpcf7 textarea:focus { border-color: var(--orange); outline: none; }
.wpcf7 input[type="submit"] {
  background: var(--orange); color: #fff; border: none; border-radius: 8px;
  padding: 14px 30px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--orange-dark); }

.contact-info-card { background: var(--mist); border-radius: var(--radius-lg); padding: 30px; text-align: center; }
.contact-info-card p { margin-bottom: 10px; }
.contact-info-card strong { color: var(--navy); }
.contact-info-card .social-bar { justify-content: center; }
.map-embed { border: 0; width: 100%; height: 320px; border-radius: var(--radius-lg); margin-top: 22px; }

/* Utility */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.screen-reader-text {
  clip: rect(1px,1px,1px,1px); position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
}

/* ============ v2.0 additions (reuse existing tokens) ============ */

/* Book-a-meeting nav button */
.nav-book { display:inline-block; margin-left:10px; background:var(--orange); color:#fff !important; padding:11px 18px; border-radius:8px; font-family:var(--font-display); font-weight:700; font-size:0.95rem; transition: transform 0.15s ease, background 0.15s ease; }
/* Specificity note: .main-nav a:hover (background: var(--mist), a near-white
   color) otherwise wins over a bare .nav-book:hover — same class+pseudo count
   but with an extra element selector — silently turning this button whitish
   on hover. Match that specificity (ancestor class + element + own class)
   so the orange hover state always wins. */
.main-nav a.nav-book:hover { background:var(--orange-dark); color:#fff !important; text-decoration:none; transform: translateY(-2px); }
@media (max-width:940px){ .nav-book{ display:block; margin:10px 20px 16px; text-align:center; } }

/* Card flag badge */
.card { position: relative; }
.card__flag { position:absolute; top:14px; right:14px; background:var(--orange-soft); color:var(--orange-dark); font-family:var(--font-display); font-weight:700; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.badge-home { display:inline-block; font-size:0.6rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--orange-dark); background:var(--orange-soft); padding:2px 7px; border-radius:999px; vertical-align:middle; }

/* Section head (title + action on one row) */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px; flex-wrap:wrap; }
.section-head h2 { margin:0; }

/* Reviews */
.review-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px; display:flex; flex-direction:column; gap:12px; }
.review-card__stars { display:flex; gap:2px; color:var(--orange); }
.review-card__stars .star { width:20px; height:20px; fill:var(--orange); stroke:var(--orange); }
.review-card__text { color:var(--ink); font-size:1rem; margin:0; }
.review-card__by { margin:0; color:var(--slate); font-size:0.9rem; }
.review-card__by strong { color:var(--navy); }
.reviews-embed { min-height:60px; }

/* Blog carousel */
.carousel { position:relative; }
.carousel__track { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:6px 2px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.carousel__track::-webkit-scrollbar { height:8px; }
.carousel__track::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; }
.carousel__item { scroll-snap-align:start; flex:0 0 340px; max-width:340px; }
@media (max-width:560px){ .carousel__item{ flex-basis:82%; max-width:82%; } }
.post-card-mini { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.post-card-mini:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--orange); }
.post-card-mini__thumb { display:block; aspect-ratio:16/9; background:var(--mist); overflow:hidden; }
.post-card-mini__thumb img { width:100%; height:100%; object-fit:cover; }
.post-card-mini__ph { display:flex; align-items:center; justify-content:center; height:100%; color:var(--orange); }
.post-card-mini__ph svg { width:56px; height:56px; }
.post-card-mini__body { padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; }
.post-card-mini__body h3 { font-size:1.1rem; margin:0; }
.post-card-mini__body h3 a { color:var(--navy); }
.post-card-mini__body h3 a:hover { color:var(--orange-dark); text-decoration:none; }
.post-card-mini__body p { color:var(--slate); font-size:0.92rem; margin:0; }
.post-card-mini__body .more { font-family: var(--font-display); font-weight: 700; }
.post-card-mini__body .more__label { color: var(--slate); font-size: 0.85rem; font-weight: 400; }
.carousel__nav { position:absolute; top:38%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--navy); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.carousel__nav:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.carousel__nav svg { width:22px; height:22px; }
.carousel__nav--prev { left:-8px; transform:translateY(-50%) rotate(180deg); }
.carousel__nav--next { right:-8px; }
@media (max-width:760px){ .carousel__nav{ display:none; } }

/* Contact grid */
.contact-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:44px; align-items:start; }
.contact-grid--single { grid-template-columns:1fr; max-width:760px; margin:0 auto; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:30px; } }
.contact-fallback { border-color:var(--orange); }

/* Social bar */
.social-bar { display:flex; gap:10px; margin-top:18px; }
.social-bar a { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--mist); color:var(--navy); border:1px solid var(--line); transition:transform .15s ease, background .15s ease, color .15s ease; }
.social-bar a:hover { background:var(--orange); color:#fff; border-color:var(--orange); text-decoration:none; transform:translateY(-2px); }
.social-bar svg { width:20px; height:20px; }
.social-bar--dark a { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.18); color:#fff; }
.social-bar--dark a:hover { background:var(--orange); border-color:var(--orange); }
/* The "Get in touch" contact card uses social-bar--dark, but its own
   background is light grey (--mist), not dark -- the white icon color
   from --dark (meant for navy/hero backgrounds) was nearly invisible
   there. Icon color only; background/border/hover-to-orange unchanged. */
.contact-info-card .social-bar a {
  color: var(--navy);
  background: #fff;
  border-color: var(--line);
}
.contact-info-card .social-bar a:hover {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}
.site-footer .social-bar a { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14); color:#dce6ee; }
.site-footer .social-bar a:hover { background:var(--orange); color:#fff; }

/* FAQ */
.faq { max-width:820px; margin:0 auto; }
.faq__item { border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:12px; padding:0 22px; }
.faq__item summary { cursor:pointer; list-style:none; padding:18px 0; font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:"+"; color:var(--orange); font-size:1.5rem; font-weight:700; line-height:1; flex:none; }
.faq__item[open] summary::after { content:"–"; }
.faq__a { padding:0 0 18px; color:var(--slate); }
.faq__a p { margin:0; }

/* Case study */
.case-study-content .wp-block-quote { border-left:4px solid var(--orange); background:var(--mist); padding:20px 24px; border-radius:0 12px 12px 0; margin:26px 0; font-size:1.15rem; }
.case-study-content .wp-block-quote cite { display:block; margin-top:8px; font-style:normal; font-weight:700; color:var(--navy); font-size:0.9rem; }
.case-postcard-slot { border:2px dashed var(--line); border-radius:var(--radius-lg); padding:16px; text-align:center; background:var(--mist); }
.case-postcard-slot img { border-radius:8px; margin:0 auto; }
.case-postcard-slot figcaption { font-size:0.85rem; color:var(--slate); margin-top:10px; }

/* Blog list (index/archive) */
.post-list { display:flex; flex-direction:column; gap:0; }
.post-card { display:grid; grid-template-columns:260px 1fr; gap:26px; align-items:center; }
.post-card__thumb { display:block; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10; background:var(--mist); }
.post-card__thumb img { width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){ .post-card{ grid-template-columns:1fr; } }
.entry-hero-img { border-radius:var(--radius-lg); margin-bottom:24px; }
.post-share { margin-top:30px; }

/* Home intro + entry content lists reuse .checks styling nicely */
.home-intro { max-width:820px; }

/* Map embed (contact) */
.map-embed { border:0; width:100%; height:360px; border-radius:var(--radius-lg); }

/* Partners strip (About) reuse */
.partners { display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:center; align-items:center; margin-top:16px; }
.partners span { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#8ba0b1; letter-spacing:0.02em; }

/* ============ v2.2: header/nav redesign, logo constraints, social ============ */

/* Uploaded logo: always constrained, never a billboard */
.brand--img { gap: 0; }
.brand__img, .brand img { height: 54px; width: auto; max-width: 320px; object-fit: contain; }
@media (max-width: 560px) { .brand__img, .brand img { height: 42px; max-width: 220px; } }

/* Burger button */
.nav-toggle { display: none; align-items: center; gap: 9px; background: none; border: 2px solid var(--navy); border-radius: 8px; padding: 9px 14px; font-family: var(--font-display); font-weight: 700; color: var(--navy); cursor: pointer; }
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 4px; }
.nav-toggle__bars span { display: block; width: 18px; height: 2.5px; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
body.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Desktop nav polish */
.main-nav .menu > li > a { position: relative; }
.main-nav .menu > li.menu-item-has-children > a::after,
.main-nav .menu > li.has-sub > a::after { content: "▾"; font-size: 0.65em; margin-left: 6px; color: var(--orange); }
.main-nav .sub-menu { border-top: 3px solid var(--orange); max-height: min(64vh, 560px); overflow-y: auto; min-width: 280px; padding: 10px; }
.main-nav .sub-menu::-webkit-scrollbar { width: 8px; }
.main-nav .sub-menu::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.main-nav .sub-menu a { border-radius: 6px; }
.main-nav .sub-menu a:hover { background: var(--orange-soft); color: var(--orange-dark); }
.submenu-toggle { display: none; }

/* Mobile nav: fixed height, scrollable, accordion submenus */
@media (max-width: 940px) {
	.nav-toggle { display: inline-flex; }
	.main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
	.main-nav.open { display: block; max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
	.main-nav ul.menu { flex-direction: column; align-items: stretch; padding: 10px 14px 18px; gap: 0; }
	.main-nav .menu > li { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--mist); }
	.main-nav .menu > li:last-child { border-bottom: none; }
	.main-nav .menu > li > a { padding: 14px 10px; font-size: 1.02rem; }
	/* Submenus start CLOSED on mobile; the chevron button opens them */
	.main-nav .sub-menu { display: none; position: static; box-shadow: none; border: none; border-top: none; max-height: none; overflow: visible; grid-column: 1 / -1; padding: 0 0 8px 14px; }
	.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display: none; }
	.main-nav li.sub-open > .sub-menu { display: flex; flex-direction: column; }
	.main-nav .sub-menu a { padding: 10px 10px; color: var(--slate); }
	.submenu-toggle { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: none; background: var(--mist); border-radius: 8px; color: var(--navy); cursor: pointer; margin: 0 4px; }
	.submenu-toggle svg { width: 20px; height: 20px; transition: transform .2s ease; }
	li.sub-open > .submenu-toggle { background: var(--orange-soft); color: var(--orange-dark); }
	li.sub-open > .submenu-toggle svg { transform: rotate(180deg); }
	.main-nav .menu > li.menu-item-has-children > a::after, .main-nav .menu > li.has-sub > a::after { content: ""; margin: 0; }
	.nav-book { display: block; margin: 14px 10px 4px; text-align: center; grid-column: 1 / -1; }
}

/* Social bar: brand glyphs, round chips */
/* (duplicate .social-bar block removed -- it silently shrank the icon glyphs
   to 18px sitewide; consolidated into the single definition above at the
   standard 20px, which .site-footer already had to explicitly restore.) */



/* ============ v2.3: header/nav + footer logo + sticky fixes ============ */

/* Desktop: nav is a flex row; the Book button keeps its natural size */
@media (min-width: 941px) {
  .main-nav { display: flex; align-items: center; gap: 6px; }
}
.nav-book { flex: none; white-space: nowrap; }

/* Sticky header stays visible below the WP admin bar */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* Header logo image (light artwork) */
.brand__img { height: 58px; width: auto; max-width: none; }
@media (max-width: 560px) { .brand__img { height: 46px; } }

/* Footer logo (white artwork with orange BIT) */
.footer-logo { width: 180px; height: auto; margin-bottom: 14px; }
.footer-tagline { color: #dce6ee;  font-weight: 700;}

/* ============ v2.4: hero background video ============ */
.hero--video { position: relative; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 0;
}
.hero--img::before { z-index: 1; }
.hero .wrap { z-index: 2; }
@media (max-width: 860px) { .hero__video { object-position: center; } }
/* Respect reduced-motion: hide the video, the poster/background shows instead */
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

/* ============ Hero live-animation overlay (added 2026-09-07) ============ *
 * Pixel-aligned to the background-image via a same-aspect-ratio wrapper —
 * see bitnetica_hero_anim_overlay() in inc/template-tags.php for why the
 * percentages below match specific hero.webp source-pixel coordinates.
 * Only present when [bn_hero anim="1"]; hidden below the same breakpoint
 * the background image itself switches to "cover" mode, so mobile/touch
 * always gets the plain static image, untouched. */
.hero__anim {
  position: absolute;
  top: 0; left: 50%;
  height: 640px;
  aspect-ratio: 2400 / 1300;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1100px) { .hero__anim { height: 560px; } }
@media (max-width: 860px), (hover: none) { .hero__anim { display: none; } }

.ha-head {
  position: absolute; left: 61.54%; top: 24.08%; width: 12.625%;
  transform-origin: 50% 92%;
  animation: ha-nod 4.5s ease-in-out infinite;
}
.ha-head img { display: block; width: 100%; height: auto; }
.ha-head__blink { position: absolute; inset: 0; opacity: 0; animation: ha-blink 3s ease-in-out infinite; }

.ha-hand {
  position: absolute; left: 58.125%; top: 82.69%; width: 10.833%;
  display: block;
  animation: ha-type 1s ease-in-out infinite;
}
.ha-hand img { display: block; width: 100%; height: auto; }

.ha-icon {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #20528c;
  box-shadow: 0 4px 12px rgba(9, 22, 34, 0.35);
  pointer-events: auto;
  overflow: hidden;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.ha-icon img { display: block; width: 58%; height: 58%; object-fit: contain; }
.ha-icon:hover, .ha-icon:focus-visible {
  transform: translate(-50%, -50%) scale(1.15);
  filter: drop-shadow(0 0 8px rgba(255, 224, 130, 0.65));
}
.ha-icon--shield { left: 65.625%; top: 10%;    width: 4.833%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
.ha-icon--cloud  { left: 77.58%;  top: 23.69%; width: 4.583%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
.ha-icon--server { left: 82.625%; top: 42.69%; width: 4.167%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
.ha-icon--code   { left: 89.46%;  top: 12.77%; width: 4.167%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }

@keyframes ha-nod {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  10% { transform: rotate(5deg) translateY(3px); }
  22% { transform: rotate(-1.5deg) translateY(-1px); }
  32%, 45% { transform: rotate(0deg) translateY(0); }
  58% { transform: rotate(4.5deg) translateY(2.5px); }
  70% { transform: rotate(-1deg) translateY(-1px); }
  80% { transform: rotate(0deg) translateY(0); }
}
@keyframes ha-blink {
  0%, 90%, 100% { opacity: 0; }
  93%, 96% { opacity: 1; }
}
@keyframes ha-type {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .ha-head, .ha-head__blink, .ha-hand { animation: none; }
}

/* ============ v3.0: hero fixed-height parallax, service card contrast, badges ============ */

/* Hero: fixed height, and the PHOTO is never cropped or zoomed to fill it --
   background-size shows the photo at exactly 560px tall (its own natural
   width, auto), so the top and bottom are always fully visible, with the
   navy gradient layer (sized "cover") showing through on the sides on
   screens wider than the photo renders.
   IMPORTANT: this MUST be an explicit px height (560px), not "100%" or
   "cover" -- background-attachment:fixed (below) changes the sizing
   reference from the element's own box to the VIEWPORT, so a percentage
   height here silently sizes against the browser window instead of this
   560px box, making the photo balloon to whatever size the visitor's
   window happens to be (that's what caused the "zoomed in" bug). */
.hero { height: 560px; min-height: 0; }
.hero--img {
  background-color: #0e2f56;
  background-size: auto 560px, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
/* Legibility scrim re-enabled (see base .hero--img::before rule above) for readable hero text over photographic images. */
@media (max-width: 1100px) {
  .hero--img { background-size: auto 560px, cover; }
}
@media (max-width: 860px) {
  /* "auto 100%" would make the photo very narrow on phone screens (it's an
     ultra-wide 2.9:1 photo) -- cover it normally there instead, parallax off. */
  .hero { height: auto; min-height: 520px; }
  .hero--img {
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: scroll, scroll;
  }
  .hero--img .hero__inner { background: rgba(13,34,51,0.55); padding: 20px; border-radius: 12px; backdrop-filter: blur(2px); }
}

/* Service cards: stronger contrast, bolder icons */
.grid--3 .card, .grid--4 .card, .grid--2 .card { border: 1px solid var(--line); border-top: 4px solid var(--navy); background: #fff; }
.grid--3 .card:hover, .grid--4 .card:hover, .grid--2 .card:hover { border-top-color: var(--orange); }
.icon-badge {
  width: 62px; height: 62px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--navy), var(--navy-deep));
  color: #fff;
  box-shadow: 0 8px 18px rgba(18, 42, 63, 0.28);
}
.icon-badge svg { width: 32px; height: 32px; stroke-width: 1.9; color: #f5936b; }
.card:hover .icon-badge { background: linear-gradient(145deg, var(--orange), var(--orange-dark)); box-shadow: 0 8px 20px rgba(232,92,42,0.4); }
.card:hover .icon-badge svg { color: #fff; }
/* Full-color illustrated icons (brochure-family images) carry their own navy/orange
   art, so they sit directly on the card — no dark badge box behind them, which
   otherwise hid their navy linework until hover. */
.icon-badge--img {
  background: none;
  box-shadow: none;
  border-radius: 0;
  width: 60px; height: 60px;
  transition: transform 0.18s ease;
}
.icon-badge--img img { transition: filter 0.18s ease; }
.card:hover .icon-badge--img { background: none; box-shadow: none; transform: scale(1.05); }
.card:hover .icon-badge--img img { filter: drop-shadow(0 0 6px rgba(255, 224, 130, 0.55)) drop-shadow(0 0 2px rgba(255, 224, 130, 0.4)); }
.card h3 { font-size: 1.22rem; }



/* Founder section */
/* 360px (was 240px): at 240 the photo read as an afterthought next to four
   paragraphs of bio text -- 360 gives it real visual weight without
   crowding the text column. */
/* 220px: it's currently just a tight face crop, so a smaller frame suits it
   better -- size back up once a fuller photo (more of him/his environment)
   is available. */
.founder-card { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
@media (max-width: 760px) { .founder-card { grid-template-columns: 1fr; } }
.founder-card blockquote { border-left: 4px solid var(--orange); margin: 0 0 18px; padding: 4px 0 4px 20px; font-size: 1.06rem; color: var(--ink); }
.founder-card .sig { font-family: var(--font-display); font-weight: 700; color: var(--navy); }

/* Footer logo: your artwork, sized down */
.footer-logo { width: 150px; height: auto; margin-bottom: 14px; }
/* 22px (up from 20) for a bit more visual weight against the dark footer.
   translateY(6px): the icons render 6px above true vertical center inside
   their 40px circle despite align-items:center (a consistent, reproducible
   offset -- verified empirically, root cause not fully identified); this
   nudges them down to sit dead-center. Purely a paint-time shift, so it
   doesn't interact with the flex layout that's producing the offset. */
.site-footer .social-bar svg { width: 22px; height: 22px; transform: translateY(6px); }


/* ============ v3.1: hero alignment, fused badges, centering, featured cards ============ */

/* Hero: image starts at the block's top and reaches its bottom.
   With parallax (fixed attachment) backgrounds anchor to the VIEWPORT, so we
   offset by the header height (~112px) — no more chopped top. */
.hero { align-items: flex-start; }
.hero .wrap { padding-top: 148px; padding-bottom: 40px; }
.hero--img { background-position: center top, center; }
.hero--parallax.hero--img { background-position: center 112px, center; }
.hero .kicker { color: #fff; text-shadow: none; }
@media (max-width: 860px) {
  .hero--parallax.hero--img { background-position: center top, center; }
}
@media (max-width: 1100px) { .hero .wrap { padding-top: 110px; } }
@media (max-width: 860px) {
  .hero { align-items: center; }
  .hero .wrap { padding-top: 64px; padding-bottom: 64px; }
  .hero--img { background-size: cover; background-position: center, center; }
}

/* Trust badges: fused to the hero — navy, no gap, larger type, hover pop */
.bn-badges { background: #12283a; padding: 0 24px 54px; margin-top: 0; }
.bn-badges::before { content: ""; display: block; height: 44px; background: linear-gradient(180deg, #16324e 0%, #12283a 100%); margin: 0 -24px 44px; }
.bn-badges__grid {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--navy);
    border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
}
.bn-badge {
  background: #0f2740; padding: 36px 22px 32px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px;
  transition: background .25s ease, box-shadow .25s ease;
}
/* The Customizer's Additional CSS forces `.bn-badge, .bn-badge:hover { background:#17395c !important; }`
   AND `.bn-badges { background-color:#17395c !important; }` AND
   `.bn-badges__grid { background-color:#ffffff !important; }` -- match ALL
   THREE (the squares, the section behind/around them, and the thin gaps
   between them) to the hero's solid side-fill color (#0e2f56), with higher
   specificity + !important, same technique as the hero fix. Hover gets its
   own slightly lighter shade back (reusing the Customizer's old #17395c)
   since flattening everything to one navy removed the resting-state/hover
   distinction the theme originally had. */
.bn-badges .bn-badges__grid .bn-badge {
  background: #0e2f56 !important;
}
.bn-badges .bn-badges__grid .bn-badge:hover {
  background: #17395c !important;
}
html body .bn-badges { background-color: #0e2f56 !important; }
html body .bn-badges__grid { background-color: #0e2f56 !important; }

/* Soft vertical dividers between badges -- with every background now the
   same navy, the 1px/2px grid gap that used to separate the four cards
   became invisible. A hairline that fades at top/bottom (rather than a
   hard line edge-to-edge) reads as an intentional, quiet separator instead
   of a rule line, and only appears where two cards are actually
   side-by-side at the current column count. */
.bn-badge { position: relative; }
.bn-badge:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1.5px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.32), transparent);
}
@media (max-width: 900px) {
  /* 2-column layout: only the 2nd item in each row (even) sits beside a
     neighbor -- the 1st item in each row (odd) doesn't need a divider. */
  .bn-badge:nth-child(odd)::before { display: none; }
}
@media (max-width: 520px) {
  /* 1-column: cards stack, nothing is side-by-side. */
  .bn-badge::before { display: none; }
}
.bn-badge__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(232,92,42,0.13); border: 1.5px solid rgba(232,92,42,0.4);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.bn-badge__icon svg { width: 30px; height: 30px; transition: transform .25s ease; }
.bn-badge__num { font-family: var(--font-display); font-weight: 800; font-size: 38px; color: #fff; line-height: 1; letter-spacing: -0.5px; transition: color .25s ease; }
.bn-badge__num--word { font-size: 24px; letter-spacing: 0.5px; }
.bn-badge__bar { width: 28px; height: 3px; background: var(--orange); border-radius: 2px; transition: width .3s ease; }
.bn-badge__title { font-size: 15px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.45; margin: 0; }
.bn-badge__sub { font-size: 16px; color: #9fb2c2; line-height: 1.6; margin: 0; }
.bn-badge:hover {
  background: #17395c;
  box-shadow: inset 0 0 0 1px var(--orange), inset 0 -3px 0 var(--orange);
}
.bn-badge:hover .bn-badge__icon { background: var(--orange); border-color: var(--orange); transform: translateY(-4px) scale(1.1); }
.bn-badge:hover .bn-badge__icon svg { transform: scale(1.05); }
.bn-badge:hover .bn-badge__icon svg * { stroke: #fff; }
.bn-badge:hover .bn-badge__num { color: #ffb08a; }
.bn-badge:hover .bn-badge__bar { width: 52px; }
@media (max-width: 900px) { .bn-badges__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bn-badges__grid { grid-template-columns: 1fr; } }

/* Center content columns site-wide (prose was hugging the left) */
.entry-content { margin-left: auto; margin-right: auto; }

/* CTA band: centered stack instead of left-weighted row */
.cta-band { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.cta-band .btn-row { justify-content: center; margin-top: 0; }

/* Featured service cards (home, above the CTA) */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1000px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }
a.fcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
a.fcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--orange); text-decoration: none; }
.fcard__media { aspect-ratio: 16/10; overflow: hidden; background: var(--mist); }
.fcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a.fcard:hover .fcard__media img { transform: scale(1.06); }
.fcard__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.fcard__body h3 { margin: 0; font-size: 1.08rem; color: var(--navy); transition: color .2s ease; }
a.fcard:hover .fcard__body h3 { color: var(--orange-dark); }
.fcard__body p { margin: 0; color: var(--slate); font-size: 0.92rem; }
.fcard__body .more { margin-top: auto; padding-top: 8px; }

/* Dropdown: room for long service names on one line */
.main-nav .sub-menu { min-width: 340px; }
.main-nav .sub-menu a { white-space: nowrap; }
@media (max-width: 940px) { .main-nav .sub-menu a { white-space: normal; } }

/* Footer logo a touch larger */
.footer-logo { width: 170px; }

/* ============ v3.1.1: tight spacing + footer logo ============ */
.bn-badges { background: #fff; padding: 24px 24px 32px; }
.bn-badges::before { display: none; }
/* The site's Additional CSS forces `.bn-badges + .section` to padding-top:20px !important
   (also background-color, both !important) — override with higher specificity to get real
   breathing room above "What we do" without leaving a stray white gap. */
html body .bn-badges + .section { padding-top: 34px !important; }
.footer-logo { width: 170px; margin: 2px 0 6px; display: block; }
.footer-brand p.footer-tagline { margin-top: 0; }

/* ============ v3.2: hero blend & alignment, footer logo, centering, menus ============ */

/* Kicker sits at shield height; no dead space above the artwork */
.hero .wrap { padding-top: 96px; }
.hero--parallax.hero--img { background-position: center var(--bn-hero-offset, 110px), center; }

/* Side-fill panels removed: the hero image now uses background-size: cover
   and fills the full width on its own, so the hardcoded 112px color panels
   (tuned for the old 1181px-wide artwork) are no longer needed. */
@media (max-width: 1100px) { .hero .wrap { padding-top: 84px; } }

/* Footer logo: transparent artwork, tight vertical spacing */
.footer-logo { width: 160px; height: auto; margin: 1px 0 10px; display: block; }

/* Interior page titles centered (services, service areas, all pages) */
.page-hero .wrap { text-align: center; }
.page-hero .crumbs { justify-content: center; }
.page-hero .lead { margin-left: auto; margin-right: auto; }

/* Dropdown: narrower, centered items */
.main-nav .sub-menu { min-width: 280px; }
.main-nav .sub-menu a { text-align: center; }

/* Header logo: subtle pop on hover (works for any swapped-in logo) */
.brand { transition: transform .18s ease, filter .18s ease; }
.brand:hover { transform: translateY(-1px) scale(1.02); text-decoration: none; }

/* Topbar: bigger phone, cleaner right side */
.topbar__phone { font-size: 1.02rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.topbar__phone:hover { color: #ffb08a; text-decoration: none; }


/* ===== Custom tweaks ===== */
/* Contact: gray card around the form (matches info card) + orange submit */
.contact-form-col { background: var(--mist); border-radius: 16px; padding: 30px; }
.fluent_form_3 .ff-btn-submit,
.contact-form-col .ff-btn-submit {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 11px 18px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.fluent_form_3 .ff-btn-submit:hover,
.contact-form-col .ff-btn-submit:hover,
.fluent_form_3 .ff-btn-submit:focus,
.contact-form-col .ff-btn-submit:focus {
  background-color: #cf4e20 !important;
  border-color: #cf4e20 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}
.addr-note { font-size: .9em; opacity: .75; }

/* Match the "BitNetica" card title to the contact form typography */
.contact-info-card h3 { font-family: var(--font-body); color: var(--ink); font-weight: 600; letter-spacing: normal; }

/* ============ Equipment gallery (homepage) ============ */
.bn-equipment-gallery.wp-block-gallery { gap: 16px; margin-top: 0; }
.bn-equipment-gallery .wp-block-image {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bn-equipment-gallery .wp-block-image img {
  border-radius: var(--radius-lg);
  transition: transform .35s ease, box-shadow .35s ease;
  display: block;
}
.bn-equipment-gallery .wp-block-image:hover img {
  transform: scale(1.045);
  box-shadow: var(--shadow);
}
.wp-block-gallery.bn-equipment-gallery.has-nested-images figure.wp-block-image figcaption,
.wp-block-gallery.bn-equipment-gallery.has-nested-images figure.wp-block-image:before {
  position: static !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  content: none !important;
}
.wp-block-gallery.bn-equipment-gallery.has-nested-images figure.wp-block-image figcaption {
  font-size: 0.86rem !important;
  color: var(--slate) !important;
  margin-top: 8px !important;
  padding: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* Equipment gallery: reuse the site carousel (track/nav already styled sitewide).
   The gallery figure becomes a wide single-row flex strip; the outer .carousel__track
   (already overflow-x:auto sitewide) scrolls it. Avoids display:contents, which has
   known cross-browser quirks with sibling positioned elements. */
.bn-equipment-track .wp-block-gallery.bn-equipment-gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  width: max-content;
  margin: 0;
}

/* Give every carousel image a uniform, DEFINITE height (was: heights varied by each
   photo's native aspect ratio, which apparently left the track's height not "definite"
   per spec for percentage-based positioning -- the shared .carousel__nav top:38% rule
   was silently failing to paint at all as a result). Fixed height also just looks
   cleaner for a row of mixed portrait/landscape photos. */
.bn-equipment-track .wp-block-image.carousel__item { height: 340px; }
.bn-equipment-track .wp-block-image.carousel__item img { width: 100%; height: 100%; object-fit: cover; }
.bn-lightbox-trigger { cursor: zoom-in; }

/* Equipment gallery lightbox: full-size photo + caption + prev/next, opened
   by main.js when a carousel photo is clicked. */
.bn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 34, 51, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  padding: 40px;
}
.bn-lightbox.is-open { opacity: 1; visibility: visible; }
body.bn-lightbox-open { overflow: hidden; }
.bn-lightbox__stage {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.bn-lightbox__img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.bn-lightbox__caption { color: #fff; font-size: 1rem; text-align: center; max-width: 640px; margin: 0; }
.bn-lightbox__close,
.bn-lightbox__nav {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.bn-lightbox__close:hover,
.bn-lightbox__nav:hover { background: var(--orange); border-color: var(--orange); }
.bn-lightbox__close { top: 20px; right: 20px; width: 44px; height: 44px; }
.bn-lightbox__close svg { width: 20px; height: 20px; }
.bn-lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.bn-lightbox__nav svg { width: 26px; height: 26px; }
.bn-lightbox__nav--prev { left: 20px; }
.bn-lightbox__nav--next { right: 20px; }
@media (max-width: 640px) {
  .bn-lightbox { padding: 16px; }
  .bn-lightbox__nav { width: 42px; height: 42px; }
  .bn-lightbox__nav svg { width: 20px; height: 20px; }
  .bn-lightbox__nav--prev { left: 4px; }
  .bn-lightbox__nav--next { right: 4px; }
  .bn-lightbox__close { top: 10px; right: 10px; }
}

/* Contact form (Fluent Forms) submit button: the plugin's own markup adds
   its "ff-text-left" utility class to the button's wrapper, forcing it
   left -- center it for this form specifically. */
/* !important: Fluent Forms' own "ff-text-left" class on this wrapper wins
   the cascade otherwise (its plugin CSS loads after the theme's). */
.contact-form-col .ff_submit_btn_wrapper { text-align: center !important; }


/* ============ Nav v2 (2026-10-05): grouped mega-menu ============
   Everything is scoped to .main-nav--v2 / body.bn-nav2, so the original nav
   is unaffected until the "BitNetica Primary v2" menu is assigned (or previewed). */

/* Desktop */
@media (min-width: 941px) {
  body.bn-nav2 .site-header .wrap { position: relative; }  /* mega panels span the header width */
}
.main-nav--v2 .bn-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.main-nav--v2 .bn-menu ul { list-style: none; margin: 0; padding: 0; }
.main-nav--v2 .bn-item { position: relative; }
.main-nav--v2 .bn-item--mega { position: static; }
.main-nav--v2 .bn-row { display: flex; align-items: center; border-radius: 8px; transition: background .15s ease; }
.main-nav--v2 .bn-row:hover,
.main-nav--v2 .bn-item.is-open > .bn-row { background: var(--mist); }
.main-nav--v2 .bn-link {
  display: flex; align-items: center; gap: 5px; padding: 10px 9px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.2;
  color: var(--navy); background: none; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.main-nav--v2 a.bn-link:hover { background: transparent; color: var(--orange-dark); text-decoration: none; }
.main-nav--v2 button.bn-link:hover { color: var(--orange-dark); }
.main-nav--v2 .bn-item.is-current > .bn-row > .bn-link { color: var(--orange-dark); }
.main-nav--v2 .bn-toggle svg { width: 12px; height: 12px; flex: none; color: var(--orange); transition: transform .2s ease; }
.main-nav--v2 .bn-toggle--chev { display: flex; align-items: center; justify-content: center; width: 22px; height: 34px; margin: 0 4px 0 -6px; padding: 0; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.main-nav--v2 .bn-item.is-open > .bn-row .bn-toggle svg { transform: rotate(180deg); }

/* Panels */
.main-nav--v2 .bn-panel {
  position: absolute; top: 100%; left: 0; z-index: 70;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--orange);
  border-radius: 0 0 12px 12px; box-shadow: var(--shadow);
  padding: 22px 24px 14px;
  max-height: calc(100vh - 170px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.main-nav--v2 .bn-item.is-open > .bn-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.main-nav--v2 .bn-panel--mega { left: 0; right: 0; }
.main-nav--v2 .bn-panel--list { width: max-content; min-width: 300px; max-width: 380px; padding: 12px; }
.main-nav--v2 .bn-panel--right { left: auto; right: 0; }

.main-nav--v2 .bn-cols { display: grid; gap: 8px 22px; }
.main-nav--v2 .bn-cols--4 { grid-template-columns: repeat(4, 1fr); }
.main-nav--v2 .bn-cols--3 { grid-template-columns: 1.7fr 1fr 1fr; }
.main-nav--v2 .bn-col + .bn-col { border-left: 1px solid var(--mist); padding-left: 22px; }
.main-nav--v2 .bn-col__title {
  margin: 0 0 8px; padding: 0 10px;
  font-family: var(--font-display); font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--orange-dark);
}
.main-nav--v2 .bn-list { display: flex; flex-direction: column; align-items: stretch; gap: 1px; }
.main-nav--v2 .bn-col--wide .bn-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.main-nav--v2 .bn-sublink {
  display: block; padding: 8px 10px; border-radius: 7px;
  font-family: var(--font-body); font-weight: 500; font-size: .94rem; line-height: 1.25; color: var(--navy);
  white-space: normal;
}
.main-nav--v2 .bn-sublink:hover,
.main-nav--v2 .bn-sublink:focus-visible { background: var(--orange-soft); color: var(--orange-dark); text-decoration: none; }
.main-nav--v2 .bn-sublink[aria-current="page"] { color: var(--orange-dark); font-weight: 700; }
.main-nav--v2 .bn-label { display: block; font-family: var(--font-display); font-weight: 700; }
.main-nav--v2 .bn-desc { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; color: var(--slate); }
.main-nav--v2 .bn-panel--list .bn-sublink { padding: 10px 12px; }
.main-nav--v2 .bn-panel__foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.main-nav--v2 .bn-all { display: inline-block; padding: 6px 10px; border-radius: 7px; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--orange-dark); }
.main-nav--v2 .bn-all:hover { background: var(--orange-soft); text-decoration: none; }

/* No-JS fallback: hover / keyboard focus still reveal panels (desktop only) */
@media (min-width: 941px) {
  html:not(.bn-js) .main-nav--v2 .bn-item:hover > .bn-panel,
  html:not(.bn-js) .main-nav--v2 .bn-item:focus-within > .bn-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

/* CTA */
.main-nav--v2 .nav-book { margin-left: 6px; padding: 11px 16px; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }

/* Tighter desktop range (941-1199px) so 7 items + CTA never wrap or overflow */
@media (min-width: 941px) and (max-width: 1199px) {
  body.bn-nav2 .site-header .wrap { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .main-nav--v2 .bn-menu { gap: 0; }
  .main-nav--v2 .bn-link { padding: 10px 6px; font-size: .88rem; gap: 4px; }
  .main-nav--v2 .bn-toggle--chev { margin-left: -8px; margin-right: 2px; width: 18px; }
  .main-nav--v2 .nav-book { margin-left: 2px; padding: 10px 11px; font-size: .72rem; letter-spacing: .03em; }
}
@media (min-width: 941px) and (max-width: 1060px) {
  body.bn-nav2 .brand__img, body.bn-nav2 .brand img { height: 46px; }
}

/* Mobile / tablet (matches the theme's existing 940px breakpoint) */
@media (max-width: 940px) {
  .main-nav--v2 .bn-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 14px 2px; }
  .main-nav--v2 .bn-item,
  .main-nav--v2 .bn-item--mega { position: static; border-bottom: 1px solid var(--mist); }
  .main-nav--v2 .bn-row,
  .main-nav--v2 .bn-row:hover,
  .main-nav--v2 .bn-item.is-open > .bn-row { background: none; border-radius: 0; }
  .main-nav--v2 .bn-link { flex: 1; justify-content: space-between; padding: 14px 10px; font-size: 1.02rem; white-space: normal; }
  /* label-only parents (Solutions, Resources): same chevron pill as the linked parents */
  .main-nav--v2 button.bn-link svg { box-sizing: content-box; width: 20px; height: 20px; padding: 11px; margin: -5px -6px -5px 8px; background: var(--mist); border-radius: 8px; color: var(--navy); }
  .main-nav--v2 .bn-item.is-open > .bn-row button.bn-link svg { background: var(--orange-soft); color: var(--orange-dark); }
  .main-nav--v2 .bn-toggle--chev { width: 42px; height: 42px; margin: 0 4px; background: var(--mist); border-radius: 8px; color: var(--navy); }
  .main-nav--v2 .bn-toggle--chev svg { width: 20px; height: 20px; }
  .main-nav--v2 .bn-item.is-open > .bn-row .bn-toggle--chev { background: var(--orange-soft); color: var(--orange-dark); }

  .main-nav--v2 .bn-panel,
  .main-nav--v2 .bn-panel--mega,
  .main-nav--v2 .bn-panel--list {
    position: static; display: none; width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible;
    padding: 0 0 10px 10px; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .main-nav--v2 .bn-item.is-open > .bn-panel { display: block; }
  .main-nav--v2 .bn-cols { display: block; }
  .main-nav--v2 .bn-col + .bn-col { border-left: 0; padding-left: 0; margin-top: 8px; }
  .main-nav--v2 .bn-col__title { margin: 6px 0 2px; }
  .main-nav--v2 .bn-col--wide .bn-list { display: flex; }
  .main-nav--v2 .bn-sublink,
  .main-nav--v2 .bn-panel--list .bn-sublink { padding: 11px 10px; color: var(--slate); }
  .main-nav--v2 .bn-label { color: var(--navy); }
  .main-nav--v2 .bn-panel__foot { margin-top: 6px; padding-top: 6px; }
  .main-nav--v2 .nav-book { display: block; margin: 12px 14px 14px; text-align: center; font-size: .9rem; }
}

/* Nav v2.1 (2026-10-05): compact grouped dropdown (e.g. About + Resources in one panel) */
@media (min-width: 941px) {
  .main-nav--v2 .bn-panel--cols { max-width: 520px; padding: 18px 20px 12px; }
  .main-nav--v2 .bn-panel--cols .bn-cols--2 { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}
@media (max-width: 940px) {
  .main-nav--v2 button.bn-link svg { color: var(--orange); }  /* match the linked parents' chevron colour */
}

/* Spanish home: keep hero kicker on two lines (desktop/tablet) */
@media (min-width: 700px) {
  body.is-home-es.page-id-3919 .hero .kicker { font-size: 1.05rem; letter-spacing: 0.06em; line-height: 1.5; max-width: none; text-wrap: balance; }
  body.is-home-es.page-id-3919 .hero .hero__inner { max-width: 640px; }
}