/* Graphic pages: Home, About Us and Services. Hexagon pictures, the design-styles honeycomb, photo tiles, icons. */

:root { --bns-vis-shadow: drop-shadow(0 16px 18px rgba(12, 31, 51, 0.17)) drop-shadow(0 3px 5px rgba(12, 31, 51, 0.1)); }

/* ---- A picture in a hexagon frame ---- */
.bns-vis { position: relative; display: block; margin: 0; filter: var(--bns-vis-shadow); }
.bns-vis__link { display: block; height: 100%; color: inherit; }
.bns-vis__clip { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(150deg, #0a3f6e, #0f5a9b 55%, #3b86c2); }
.bns-vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.bns-vis:hover img { transform: scale(1.04); }
.bns-vis--empty .bns-vis__clip::before { content: ""; position: absolute; inset: 0; opacity: 0.2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34zM28 100L0 84V50l28 16 28-16v34z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 4.5rem; }
.bns-vis__shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(12, 31, 51, 0) 48%, rgba(12, 31, 51, 0.82) 100%); }
.bns-vis--cap .bns-vis__shade { opacity: 1; }
.bns-vis--hex { aspect-ratio: 0.866 / 1; }
.bns-vis--hex .bns-vis__clip { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.bns-vis--plate { aspect-ratio: 3 / 2; }
.bns-vis--plate .bns-vis__clip { clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%); }
.bns-vis__cap { position: absolute; left: 14%; right: 14%; bottom: 20%; z-index: 2; display: grid; justify-items: center; gap: 0.2rem; text-align: center; color: #fff; }
.bns-vis--plate .bns-vis__cap { left: 12%; right: 12%; bottom: 9%; }
.bns-vis__kicker { font-family: var(--bns-font-brand); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); }
.bns-vis__title { font-family: var(--bns-font-display); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); font-weight: 500; line-height: 1.2; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }

.bns-note { font-size: 0.8125rem; color: var(--bns-color-muted); }

/* ---- Home: two ways we work (photo tiles) ---- */
.bns-tiles { display: grid; grid-template-columns: 1fr; gap: var(--bns-space-4); justify-items: center; }
@media (min-width: 48rem) { .bns-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bns-tile { display: grid; justify-items: center; gap: var(--bns-space-2); max-width: 24rem; text-align: center; }
.bns-tile .bns-vis { width: min(100%, 21rem); }
.bns-tile p { color: var(--bns-color-slate); }

/* ---- Home: design directions (honeycomb of seven hexagons) ---- */
.bns-styles__layout { display: grid; grid-template-columns: 1fr; gap: var(--bns-space-5); align-items: center; }
@media (min-width: 64rem) { .bns-styles__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.bns-styles__text { display: grid; gap: var(--bns-space-2); justify-items: start; }
.bns-styles__text h2 { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); }
.bns-styles__text p { color: var(--bns-color-slate); }
.bns-honey { --w: 11rem; --g: 0.45rem; display: grid; justify-items: center; }
@media (min-width: 64rem) { .bns-honey { --w: 13.25rem; } }
.bns-honey__row { display: flex; justify-content: center; gap: var(--g); }
.bns-honey__row + .bns-honey__row { margin-top: calc(var(--w) * -0.2887 + var(--g) * 0.866); }
.bns-honey .bns-vis { flex: 0 0 var(--w); width: var(--w); }
.bns-honey .bns-vis__cap { left: 10%; right: 10%; bottom: 22%; }
.bns-honey .bns-vis__title { font-size: 0.95rem; }
.bns-vis--core .bns-vis__clip { display: grid; place-items: center; text-align: center; color: #fff; }
.bns-vis--core:hover img { transform: none; }
.bns-vis__core { position: relative; display: grid; gap: 0.3rem; padding: 0 16%; font-family: var(--bns-font-display); line-height: 1.15; }
.bns-vis__core strong { font-size: 1.2rem; font-weight: 500; }
.bns-vis__core span { font-family: var(--bns-font-brand); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 47.99rem) {
	.bns-honey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
	.bns-honey__row { display: contents; }
	.bns-honey__row + .bns-honey__row { margin-top: 0; }
	.bns-honey .bns-vis { flex: none; width: 100%; }
	.bns-vis--core { display: none; }
}

/* ---- Home: calculator teaser ---- */
.bns-calc-teaser .bns-vis { width: 100%; }
.bns-calc-teaser .bns-split__text p { color: var(--bns-color-slate); }

/* ---- Round icon badges become hexagons ---- */
.bns-icon--hex { width: 4.25rem; height: 4.9rem; border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background-size: 46%; }
.bns-step .bns-icon, .bns-pillar .bns-icon { margin-bottom: 0.25rem; }

/* ---- Details that open on click (keeps the page short) ---- */
.bns-more { margin-top: 0.25rem; }
.bns-more summary { display: inline-flex; align-items: center; gap: 0.5rem; list-style: none; cursor: pointer; font-family: var(--bns-font-brand); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bns-color-blue); }
.bns-more summary::-webkit-details-marker { display: none; }
.bns-more summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; }
.bns-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.bns-more summary:focus-visible { outline: 2px solid var(--bns-color-blue); outline-offset: 4px; }
.bns-more__body { display: grid; gap: 0.6rem; padding-top: 0.75rem; }

/* ---- About Us ---- */
.bns-ab-intro { display: grid; grid-template-columns: 1fr; gap: var(--bns-space-4); align-items: center; }
@media (min-width: 48rem) { .bns-ab-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--bns-space-5); } }
.bns-ab-intro__text { display: grid; gap: var(--bns-space-2); justify-items: start; }
.bns-ab-intro__text h2, .bns-ab-head h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); }
.bns-ab-actions { display: flex; flex-wrap: wrap; gap: var(--bns-space-2); }
.bns-ab-head { display: grid; gap: 0.5rem; justify-items: center; text-align: center; margin-bottom: var(--bns-space-4); }
.bns-ab-craft { display: grid; grid-template-columns: 1fr; gap: var(--bns-space-3); }
@media (min-width: 48rem) { .bns-ab-craft { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bns-ab-craft .bns-vis { width: 100%; }
.bns-ab-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bns-space-4) var(--bns-space-3); }
@media (min-width: 64rem) { .bns-ab-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bns-ab-value { display: grid; justify-items: center; gap: 0.4rem; text-align: center; }
.bns-ab-value h3 { font-size: 1.2rem; }
.bns-ab-phil { display: grid; grid-template-columns: 1fr; gap: var(--bns-space-4); align-items: center; }
@media (min-width: 64rem) { .bns-ab-phil { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--bns-space-5); } }
.bns-ab-phil__lead { font-family: var(--bns-font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; color: var(--bns-color-ink); }
.bns-ab-principles { counter-reset: bnsp; display: grid; grid-template-columns: 1fr; gap: var(--bns-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .bns-ab-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bns-ab-principle { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: start; counter-increment: bnsp; }
.bns-ab-principle::before { content: counter(bnsp, decimal-leading-zero); grid-row: 1 / span 2; display: grid; place-items: center; width: 3rem; height: 3.46rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--bns-color-blue); color: #fff; font-family: var(--bns-font-brand); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; }
.bns-ab-principle h3 { font-size: 1.15rem; }

/* ---- Services ---- */
.bns-svc-head { display: grid; gap: 0.5rem; justify-items: center; text-align: center; max-width: 44rem; margin-inline: auto; }
.bns-svc-head h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); }
.bns-svc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bns-space-3); }
@media (min-width: 64rem) { .bns-svc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bns-svc-fact { display: grid; justify-items: center; gap: 0.3rem; text-align: center; }
.bns-svc-fact strong { font-family: var(--bns-font-display); font-size: 1.15rem; font-weight: 500; color: var(--bns-color-ink); }
.bns-svc-fact p { font-size: 0.875rem; }
.bns-svc-paths { display: grid; gap: var(--bns-space-5); }
.bns-svc-path { display: grid; grid-template-columns: 1fr; gap: var(--bns-space-4); align-items: center; }
@media (min-width: 48rem) { .bns-svc-path { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--bns-space-5); } .bns-svc-path--flip > .bns-vis { order: 2; } }
.bns-svc-path .bns-vis { width: min(100%, 22rem); justify-self: center; }
.bns-svc-path__text { display: grid; gap: var(--bns-space-2); justify-items: start; }
.bns-svc-path__text h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); }
.bns-svc-tiles { display: grid; grid-template-columns: 1fr; gap: var(--bns-space-4) var(--bns-space-3); }
@media (min-width: 40rem) { .bns-svc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .bns-svc-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bns-svc-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bns-svc-tile { display: grid; align-content: start; gap: 0.6rem; }
.bns-svc-tile .bns-vis { width: 100%; margin-bottom: 0.5rem; }
.bns-svc-tile h3 { font-size: 1.3rem; }