/*
 * BK Marine internal routes and content components.
 *
 * This module owns company, services, repair, spare-parts, hybrid, catalog,
 * product-detail, gallery and contact-route presentation. Breakpoint overrides
 * specific to these components remain at the end of this file to preserve the
 * original cascade contract exactly.
 */

/* Internal route system: editorial pages, catalog, gallery and contact UI. */
.bk-page { overflow: clip; }
.bk-page-hero {
	position: relative;
	padding: clamp(5rem, 9vw, 8.5rem) 0 clamp(4rem, 7vw, 7rem);
	background:
		linear-gradient(115deg, rgba(36,48,60,.98), rgba(36,48,60,.88)),
		radial-gradient(circle at 82% 20%, rgba(32,152,209,.35), transparent 42%);
	color: #fff;
}

/* Anchor every route hero with a full-width accent aligned to the gray panel. */
.bk-page-hero::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
	background: var(--bk-red);
	box-shadow: 0 4px 14px rgba(228, 0, 69, .22);
}

/* Preserve authored casing and scale route titles fluidly without oversized display text. */
.bk-page-hero h1 {
	max-width: 1000px;
	margin: .45rem 0 0;
	font-family: var(--bk-font-display);
	font-size: clamp(2.15rem, 4.2vw, 4.25rem);
	line-height: 1.04;
	letter-spacing: -.025em;
	text-transform: none;
	color: #fff;
}
.bk-page-hero > .bk-container > p:last-child:not(.bk-kicker) {
	max-width: 760px;
	margin: 1.5rem 0 0;
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.65;
	color: rgba(255,255,255,.75);
}
.bk-story {
	display: grid;
	grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
	gap: clamp(2.5rem, 7vw, 7rem);
	align-items: center;
}

.bk-story--reverse .bk-story__media { order: 2; }

/*
 * Shared editorial photography treatment for EL/EN routes.
 * Static informational images remain visually stable: no hover movement or
 * artificial zoom is applied unless a component is explicitly interactive.
 */
.bk-story__media {
 --bk-media-padding: clamp(.5rem, 1vw, .75rem);
 position: relative;
 min-width: 0;
 padding: var(--bk-media-padding);
 border: 1px solid var(--bk-image-border);
 border-radius: var(--bk-image-radius-lg);
 background: linear-gradient(145deg, var(--bk-white), var(--bk-image-surface));
 box-shadow: var(--bk-image-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .85);
}

.bk-story__media img {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3;
 border-radius: max(0px, calc(var(--bk-image-radius-lg) - var(--bk-media-padding) - 1px));
 object-fit: cover;
 object-position: center;
}

/*
 * Company and Services photography use a stronger editorial frame so the
 * images remain visually separated from the white route background. The
 * treatment is intentionally static because these images are informational.
 */
.bk-page--company .bk-story__media,
.bk-page--services .bk-story__media {
 --bk-media-padding: clamp(.7rem, 1.35vw, 1rem);
 border-color: rgba(48, 60, 73, .20);
 background: linear-gradient(
  145deg,
  rgba(255, 255, 255, 1) 0%,
  rgba(235, 239, 242, .98) 100%
 );
 box-shadow:
  0 20px 46px rgba(24, 38, 52, .14),
  0 6px 16px rgba(24, 38, 52, .075),
  0 1px 2px rgba(24, 38, 52, .05),
  inset 0 1px 0 rgba(255, 255, 255, .9);
}

.bk-page--company .bk-story__media img,
.bk-page--services .bk-story__media img {
 border: 1px solid rgba(48, 60, 73, .12);
 box-shadow:
  0 2px 8px rgba(24, 38, 52, .055),
  inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* The company source is panoramic; 16:9 preserves almost all useful context. */
.bk-page--company .bk-story__media img {
 aspect-ratio: 16 / 9;
}

/* The Services source is natively 4:3, so no unnecessary crop is introduced. */
.bk-page--services .bk-story__media img {
 aspect-ratio: 4 / 3;
}

/* The English landing artwork is a technical render and must never be cropped. */
.bk-page--english_home .bk-story__media {
 background: var(--bk-image-surface);
}

.bk-page--english_home .bk-story__media img {
 aspect-ratio: 16 / 9;
 padding: clamp(.6rem, 1.4vw, 1rem);
 background: var(--bk-white);
 object-fit: contain;
}
.bk-checks { list-style: none; padding: 0; margin: 2rem 0 0; }
.bk-checks li { position: relative; padding: .85rem 0 .85rem 2rem; border-bottom: 1px solid rgba(48,60,73,.15); }
.bk-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--bk-red); font-weight: 700; }

.bk-page--company .bk-checks {
 margin-top: 1.5rem;
}

.bk-page--company .bk-checks li {
 color: #4f5a65;
 border-bottom-color: rgba(48, 60, 73, .12);
 line-height: 1.55;
}

.bk-page--company .bk-checks li:last-child {
 border-bottom: 0;
}

/* Editorial surfaces share one restrained elevation system across internal routes. */
/*
 * Company copy and Services list share the same calm editorial surface. This
 * keeps image/text pairs visually coherent while preserving route-specific content.
 */
.bk-page--company .bk-story__copy,
.bk-page--services .bk-service-list {
 position: relative;
 overflow: hidden;
 border: 1px solid rgba(48, 60, 73, .13);
 border-radius: var(--bk-radius-md);
 background: #fafbfc;
 box-shadow:
  0 12px 30px rgba(24, 38, 52, .075),
  0 3px 8px rgba(24, 38, 52, .04);
}

.bk-page--company .bk-story__copy {
 padding: clamp(1.5rem, 3vw, 2.35rem);
}

.bk-page--company .bk-story__copy::before,
.bk-page--company .bk-story__copy::after,
.bk-page--services .bk-service-list::before,
.bk-page--services .bk-service-list::after {
 content: '';
 position: absolute;
 z-index: 1;
 height: 3px;
 background: linear-gradient(90deg, var(--bk-magenta), var(--bk-red));
 pointer-events: none;
}

.bk-page--company .bk-story__copy::before,
.bk-page--services .bk-service-list::before {
 top: 0;
 left: 0;
 width: clamp(64px, 10vw, 92px);
 border-radius: 0 0 3px 0;
}

.bk-page--company .bk-story__copy::after,
.bk-page--services .bk-service-list::after {
 right: 0;
 bottom: 0;
 width: clamp(52px, 8vw, 76px);
 border-radius: 3px 0 0 0;
}

.bk-page--company .bk-story__copy > p {
 margin-top: 0;
 color: #56616c;
 font-size: clamp(1rem, 1.25vw, 1.08rem);
 line-height: 1.8;
}

.bk-page--company .bk-story__copy > p + p {
 margin-top: 1.1rem;
}

.bk-service-list {
 display: grid;
 padding: clamp(1.15rem, 3vw, 2rem);
}

.bk-service-list__item {
 display: grid;
 grid-template-columns: 48px 1fr;
 gap: 1rem;
 align-items: center;
 padding: 1rem .15rem;
 border-bottom: 1px solid rgba(48,60,73,.14);
}

.bk-service-list__item:last-child {
 border-bottom: 0;
}

.bk-service-list__item span,
.bk-detail-row__number,
.bk-editorial-grid article > span {
 display: inline-grid;
 place-items: center;
 width: 40px;
 aspect-ratio: 1;
 border: 1px solid rgba(228,0,69,.28);
 border-radius: 50%;
 background: #fff;
 box-shadow: var(--bk-shadow-xs);
 color: var(--bk-navy);
 font-family: var(--bk-font-display);
 font-size: .86rem;
 font-weight: 700;
 line-height: 1;
 letter-spacing: .035em;
}

.bk-service-list__item strong {
 color: var(--bk-navy);
 font-size: clamp(1rem,1.6vw,1.2rem);
 font-weight: 500;
 line-height: 1.45;
}
.bk-detail-rows { display: grid; gap: clamp(5rem,9vw,9rem); }
.bk-detail-row { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: clamp(2rem,6vw,6rem); align-items: center; }
.bk-detail-row.is-reverse img { order: 2; }
.bk-detail-row img {
 width: 100%;
 aspect-ratio: 4 / 3;
 border: 1px solid var(--bk-image-border);
 border-radius: var(--bk-image-radius-md);
 background: var(--bk-image-surface);
 box-shadow: var(--bk-image-shadow-md);
 object-fit: cover;
 object-position: center;
}

/* Repair and spare-parts editorial rows converge once from opposite sides. */
.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row,
.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row {
 --bk-detail-reveal-x: 48px;
 --bk-detail-reveal-y: 0px;
}

.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row > img,
.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row > div,
.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row > img,
.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row > div {
 will-change: transform, opacity;
 transition:
  opacity 520ms ease,
  transform 680ms cubic-bezier(.22, .61, .36, 1);
}

.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row > div,
.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row > div {
 transition-delay: 55ms;
}

.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row > img,
.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row > img {
 transition-delay: 95ms;
}

/* Default rows: image comes from the left and copy from the right. */
.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row:not(.is-revealed):not(.is-reverse) > img,
.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row:not(.is-revealed):not(.is-reverse) > img {
 opacity: 0;
 transform: translate3d(calc(var(--bk-detail-reveal-x) * -1), var(--bk-detail-reveal-y), 0);
}

.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row:not(.is-revealed):not(.is-reverse) > div,
.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row:not(.is-revealed):not(.is-reverse) > div {
 opacity: 0;
 transform: translate3d(var(--bk-detail-reveal-x), var(--bk-detail-reveal-y), 0);
}

/* Reversed rows mirror the motion so image and copy always converge inward. */
.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row.is-reverse:not(.is-revealed) > img,
.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row.is-reverse:not(.is-revealed) > img {
 opacity: 0;
 transform: translate3d(var(--bk-detail-reveal-x), var(--bk-detail-reveal-y), 0);
}

.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row.is-reverse:not(.is-revealed) > div,
.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row.is-reverse:not(.is-revealed) > div {
 opacity: 0;
 transform: translate3d(calc(var(--bk-detail-reveal-x) * -1), var(--bk-detail-reveal-y), 0);
}

/*
 * Repair and spare-parts editorial rows share one visual system so image/text
 * pairs feel like deliberate technical presentation modules rather than loose
 * content. Structural selectors keep the treatment dynamic for future rows.
 */
.bk-page--repair .bk-detail-row,
.bk-page--spares .bk-detail-row {
 align-items: stretch;
}

.bk-page--repair .bk-detail-row > div,
.bk-page--spares .bk-detail-row > div {
 position: relative;
 align-self: center;
 overflow: hidden;
 padding: clamp(1.4rem, 2.6vw, 2.2rem);
 border: 1px solid rgba(48, 60, 73, .13);
 border-radius: var(--bk-radius-md);
 background: #fafbfc;
 box-shadow:
  0 10px 28px rgba(24, 38, 52, .065),
  0 2px 7px rgba(24, 38, 52, .035);
}

/* Opposing corner accents reinforce the BK Marine identity without turning the
   copy panel into a full-width banner. */
.bk-page--repair .bk-detail-row > div::before,
.bk-page--repair .bk-detail-row > div::after,
.bk-page--spares .bk-detail-row > div::before,
.bk-page--spares .bk-detail-row > div::after {
 content: "";
 position: absolute;
 z-index: 1;
 width: clamp(72px, 12vw, 108px);
 height: 3px;
 background: var(--bk-magenta);
 pointer-events: none;
}

.bk-page--repair .bk-detail-row > div::before,
.bk-page--spares .bk-detail-row > div::before {
 top: -1px;
 left: -1px;
}

.bk-page--repair .bk-detail-row > div::after,
.bk-page--spares .bk-detail-row > div::after {
 right: -1px;
 bottom: -1px;
}

.bk-page--repair .bk-detail-row h2,
.bk-page--spares .bk-detail-row h2 {
 max-width: 20ch;
 margin: .25rem 0 1rem;
 color: var(--bk-navy);
 font-size: clamp(1.85rem, 3.2vw, 3rem);
 line-height: 1.08;
 letter-spacing: -.015em;
}

.bk-page--repair .bk-detail-row p,
.bk-page--spares .bk-detail-row p {
 max-width: 68ch;
 margin: 0;
 color: #56616c;
 font-size: clamp(1rem, 1.25vw, 1.08rem);
 line-height: 1.8;
}

/* Shared neutral frame increases separation from white page backgrounds while
   letting each route preserve the correct image fitting strategy. */
.bk-page--repair .bk-route-image--repair,
.bk-route-image--spares {
 justify-self: center;
 padding: clamp(.7rem, 1.35vw, 1rem);
 border: 1px solid rgba(48, 60, 73, .22);
 border-radius: calc(var(--bk-image-radius-md) + 2px);
 background: #edf1f4;
 box-shadow:
  0 18px 42px rgba(24, 38, 52, .13),
  0 6px 16px rgba(24, 38, 52, .07),
  inset 0 0 0 1px rgba(255, 255, 255, .72);
 object-position: center;
}

/* Repair is photographic: preserve a natural crop and the wider lead image. */
.bk-page--repair .bk-route-image--repair {
 width: min(100%, 700px);
 object-fit: cover;
}

.bk-page--repair .bk-detail-row:first-child .bk-route-image--repair {
 max-width: 760px;
 aspect-ratio: 16 / 9;
}

.bk-page--repair .bk-detail-row:not(:first-child) .bk-route-image--repair {
 aspect-ratio: 4 / 3;
}

/* Spare-parts artwork is technical/product-oriented and must remain uncropped. */
.bk-route-image--spares {
 width: min(100%, 640px);
 max-width: 640px;
 object-fit: contain;
}

.bk-detail-row h2 { margin: .45rem 0 1.1rem; font-family: var(--bk-font-display); font-size: clamp(2rem,4vw,3.6rem); line-height: 1; text-transform: none; }
.bk-detail-row p { font-size: 1.06rem; line-height: 1.75; }
.bk-photo-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.bk-photo-grid a {
 position: relative;
 display: block;
 overflow: hidden;
 border: 1px solid var(--bk-image-border);
 border-radius: var(--bk-image-radius-md);
 background: var(--bk-navy);
 box-shadow: var(--bk-media-shadow);
 color: #fff;
 transition: box-shadow var(--bk-transition), transform var(--bk-transition), border-color var(--bk-transition);
}
.bk-photo-grid img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 object-position: center;
 transition: transform var(--bk-transition), opacity var(--bk-transition);
}
@media (hover: hover) and (pointer: fine) {
 .bk-photo-grid a:hover,.bk-photo-grid a:focus-visible {
  border-color: rgba(48,60,73,.2);
  box-shadow: var(--bk-media-shadow-hover);
  transform: translateY(-2px);
 }
 .bk-photo-grid a:hover img,.bk-photo-grid a:focus-visible img {
  transform: scale(1.015);
  opacity: .94;
 }
}

.bk-photo-grid--gallery a:nth-child(9n+1) { grid-column: span 2; grid-row: span 2; }
.bk-photo-grid--gallery a:nth-child(9n+1) img { height: 100%; }
.bk-photo-grid--gallery span { position: absolute; inset: auto .85rem .7rem; font-size: .78rem; line-height: 1.2; text-transform: none; letter-spacing: .06em; opacity: 0; transform: translateY(8px); transition: .25s ease; }
.bk-photo-grid--gallery a:hover span,.bk-photo-grid--gallery a:focus-visible span { opacity: 1; transform: none; }
.bk-hybrid-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.25rem,3vw,3rem); }
.bk-hybrid-grid figure {
 overflow: hidden;
 margin: 0;
 border: 1px solid var(--bk-image-border);
 border-radius: var(--bk-image-radius-md);
 background: #fff;
 box-shadow: var(--bk-media-shadow);
 transition: box-shadow var(--bk-transition), transform var(--bk-transition), border-color var(--bk-transition);
}

.bk-hybrid-image-link {
 display: grid;
 place-items: center;
 aspect-ratio: 4 / 3;
 padding: clamp(.65rem, 1.5vw, 1rem);
 background: var(--bk-image-surface-raised);
 overflow: hidden;
}
.bk-hybrid-grid img {
 width: 100%;
 height: 100%;
 padding: .35rem;
 border: 1px solid var(--bk-image-canvas-border);
 border-radius: calc(var(--bk-image-radius-md) - 4px);
 background: #fff;
 box-shadow: var(--bk-image-canvas-shadow);
 object-fit: contain;
 object-position: center;
 transition: transform var(--bk-transition);
}

@media (hover: hover) and (pointer: fine) {
 .bk-hybrid-grid figure:hover {
  border-color: rgba(48,60,73,.2);
  box-shadow: var(--bk-media-shadow-hover);
  transform: translateY(-2px);
 }
 .bk-hybrid-grid figure:hover .bk-hybrid-image-link img {
  transform: scale(1.01);
 }
}

.bk-hybrid-grid figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem 1.2rem; color: var(--bk-navy); font-family: var(--bk-font-display); font-size: 1.08rem; }
.bk-hybrid-grid figcaption > span:first-child { min-width: 0; }
.bk-hybrid-download { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; padding: .62rem .8rem; border: 1px solid var(--bk-magenta); border-radius: var(--bk-radius-sm); background: linear-gradient(90deg, var(--bk-white) 0 50%, var(--bk-magenta) 50% 100%); background-position: 100% 0; background-size: 200% 100%; box-shadow: 0 8px 20px rgba(228,0,69,.2); color: var(--bk-white) !important; cursor: pointer !important; font-family: var(--bk-font-body); font-size: .78rem; font-weight: 700; line-height: 1; text-decoration: none; transition: background-position .46s cubic-bezier(.22,.61,.36,1), color .24s ease, border-color .24s ease, box-shadow .32s ease, transform .32s ease; }
.bk-hybrid-download:hover,.bk-hybrid-download:focus-visible { border-color: var(--bk-magenta); background-position: 0 0; box-shadow: 0 10px 24px rgba(228,0,69,.22); color: var(--bk-magenta) !important; cursor: pointer !important; transform: translateY(-1px); }
.bk-download__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.bk-download { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem,4vw,2.5rem); border: 1px solid rgba(48,60,73,.1); border-radius: var(--bk-radius-md); background: #fff; box-shadow: var(--bk-shadow-sm); }
.bk-catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.bk-product-card {
 display: flex;
 overflow: hidden;
 flex-direction: column;
 border: 1px solid var(--bk-image-border);
 border-radius: var(--bk-image-radius-md);
 background: #fff;
 box-shadow: var(--bk-media-shadow);
 transition: transform var(--bk-transition), box-shadow var(--bk-transition), border-color var(--bk-transition);
}

.bk-product-card > a {
 display: grid;
 place-items: center;
 padding: clamp(.85rem, 1.5vw, 1.15rem);
 background: var(--bk-image-surface-raised);
}

.bk-product-card img {
 width: 100%;
 aspect-ratio: 4 / 3;
 padding: .35rem;
 border: 1px solid var(--bk-image-canvas-border);
 border-radius: calc(var(--bk-image-radius-md) - 4px);
 background: #fff;
 box-shadow: var(--bk-image-canvas-shadow);
 object-fit: contain;
 object-position: center;
 transition: transform var(--bk-transition), box-shadow var(--bk-transition);
}

@media (hover: hover) and (pointer: fine) {
 .bk-product-card:hover {
  border-color: rgba(48,60,73,.22);
  box-shadow: var(--bk-media-shadow-hover);
  transform: translateY(-2px);
 }
 .bk-product-card:hover img { transform: scale(1.012); }
}

.bk-product-card > div { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.bk-product-card > div > span { color: var(--bk-red); font: 700 .76rem/1 var(--bk-font-body); text-transform: none; letter-spacing: .1em; }
.bk-product-card h2 { margin: .7rem 0; font: 700 1.65rem/1.05 var(--bk-font-display); text-transform: none; }
.bk-product-card h2 a { color: var(--bk-navy); text-decoration: none; }
.bk-product-card p { flex: 1; line-height: 1.65; color: #5c6670; }
.bk-product-detail { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); gap: clamp(2.5rem,7vw,7rem); align-items: center; }
.bk-product-detail__image {
 display: grid;
 place-items: center;
 width: 100%;
 max-width: 680px;
 padding: clamp(1.25rem, 3vw, 2rem);
 border: 1px solid var(--bk-image-border);
 border-radius: var(--bk-image-radius-md);
 background: var(--bk-image-surface-raised);
 box-shadow: var(--bk-image-shadow-md);
}

.bk-product-detail__image img {
 width: 100%;
 height: auto;
 padding: clamp(.35rem, .8vw, .55rem);
 border: 1px solid var(--bk-image-canvas-border);
 border-radius: calc(var(--bk-image-radius-md) - 4px);
 background: #fff;
 box-shadow: var(--bk-image-canvas-shadow);
 object-fit: contain;
 object-position: center;
}

.bk-product-detail h2 { font: 700 clamp(2rem,4vw,3.6rem)/1 var(--bk-font-display); text-transform: none; }
.bk-specs { margin: 1.5rem 0 2.25rem; }
.bk-specs div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid rgba(48,60,73,.16); }
.bk-specs dt { color: #66717b; }
.bk-specs dd { margin: 0; font-weight: 700; }
.bk-technical-data__title { margin: .4rem 0 3rem; font: 700 clamp(2.5rem,5vw,4.75rem)/1 var(--bk-font-display); text-transform: none; }
.bk-tech-section + .bk-tech-section { margin-top: clamp(3rem,6vw,5rem); }
.bk-tech-section h2 { margin: 0 0 1.25rem; font: 700 clamp(1.65rem,3vw,2.6rem)/1.08 var(--bk-font-display); text-transform: none; }
.bk-table-scroll { overflow-x: auto; border: 1px solid rgba(48,60,73,.16); border-radius: var(--bk-radius-md); background: #fff; box-shadow: var(--bk-shadow-sm); }
.bk-table-scroll:focus { outline: 2px solid var(--bk-blue); outline-offset: 3px; }
.bk-tech-table { width: 100%; min-width: 660px; margin: 0; border: 0; border-collapse: collapse; font-size: .96rem; }
.bk-tech-table th,.bk-tech-table td { padding: .9rem 1rem; border: 0; border-bottom: 1px solid rgba(48,60,73,.12); text-align: left; vertical-align: top; }
.bk-tech-table thead th { background: var(--bk-navy); color: #fff; font-family: var(--bk-font-display); font-size: 1.05rem; letter-spacing: .035em; text-transform: none; }
.bk-tech-table tbody th { width: 38%; color: #4f5a65; font-weight: 400; }
.bk-tech-table tbody td { min-width: 145px; color: var(--bk-navy); font-weight: 700; }
.bk-tech-table tbody tr:nth-child(even) { background: #f7f8f9; }
.bk-tech-table tbody tr:last-child th,.bk-tech-table tbody tr:last-child td { border-bottom: 0; }
.bk-editorial-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1.5rem,4vw,4rem); }
.bk-editorial-grid article { padding: 1.5rem; border: 1px solid rgba(48,60,73,.12); border-top: 3px solid var(--bk-magenta); border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md); background: #fff; box-shadow: var(--bk-shadow-sm); transition: box-shadow var(--bk-transition), transform var(--bk-transition); }
.bk-editorial-grid article:hover { box-shadow: var(--bk-shadow); transform: translateY(-3px); }
.bk-editorial-grid h2 { margin: .75rem 0 1rem; font: 700 clamp(1.7rem,3vw,2.55rem)/1.04 var(--bk-font-display); text-transform: none; }
.bk-editorial-grid p { margin: 0; line-height: 1.75; color: #56616c; }
.bk-contact-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: clamp(2.5rem,7vw,7rem); align-items: start; }
.bk-contact-grid h2 { font: 700 clamp(2rem,4vw,3.5rem)/1 var(--bk-font-display); text-transform: none; }

/* Shared EL/EN elevation also highlights keyboard interaction without moving the form. */
.bk-contact-form { display: grid; min-width: 0; gap: 1rem; padding: clamp(1.25rem,3vw,2rem); border: 1px solid rgba(48,60,73,.1); border-radius: var(--bk-radius-md); background: #fff; box-shadow: var(--bk-shadow); transition: box-shadow var(--bk-transition), border-color var(--bk-transition); }

.bk-contact-form:focus-within { border-color: rgba(48,60,73,.3); box-shadow: var(--bk-shadow-lg); }
.bk-contact-form label, .bk-contact-form input, .bk-contact-form textarea { min-width: 0; }
.bk-contact-form input::placeholder, .bk-contact-form textarea::placeholder { color: #68737e; opacity: 1; }
.bk-contact-form textarea { resize: vertical; min-height: 10rem; }
.bk-form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.bk-contact-form label { display: grid; gap: .45rem; font-size: .8rem; font-weight: 700; text-transform: none; letter-spacing: .06em; }
.bk-contact-form input,.bk-contact-form textarea { width: 100%; border: 1px solid #cbd0d5; border-radius: var(--bk-radius-sm); background: #fff; padding: .9rem 1rem; font: 400 1rem var(--bk-font-body); text-transform: none; letter-spacing: 0; transition: border-color var(--bk-transition-fast), box-shadow var(--bk-transition-fast); }
.bk-contact-form input:focus,.bk-contact-form textarea:focus { outline: 2px solid var(--bk-blue); outline-offset: 1px; border-color: transparent; }
.bk-contact-form .bk-captcha { max-width: 250px; }
.bk-honeypot { position: absolute!important; left: -9999px!important; }
.bk-contact-card { padding: clamp(2rem,4vw,3rem); border-radius: var(--bk-radius-md); background: var(--bk-navy); box-shadow: var(--bk-shadow); color: #fff; }
.bk-contact-card h2 { color: #fff; }
.bk-contact-card address { font-style: normal; font-size: 1.1rem; line-height: 1.9; }
.bk-contact-card a { color: #fff; }

/*
 * Contact location stack.
 *
 * The information card and map share the right-hand column on desktop. The map
 * uses the same radius/elevation system as the rest of the contact surface, while
 * its fixed aspect ratio prevents layout shift during the deferred iframe load.
 */
.bk-contact-aside { display: grid; gap: 1.25rem; min-width: 0; }
.bk-contact-map { overflow: hidden; border: 1px solid rgba(48,60,73,.12); border-radius: var(--bk-radius-md); background: #fff; box-shadow: var(--bk-shadow-sm); }
.bk-contact-map iframe { display: block; width: 100%; min-height: 310px; aspect-ratio: 4 / 3; border: 0; }
.bk-contact-map__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-top: 1px solid rgba(48,60,73,.1); background: #fff; color: var(--bk-navy); font-size: .88rem; line-height: 1.35; }
.bk-contact-map__footer span { min-width: 0; }
.bk-contact-map__footer a { flex: 0 0 auto; color: var(--bk-navy); font-weight: 700; text-decoration: none; transition: color var(--bk-transition-fast); }
.bk-contact-map__footer a:hover,.bk-contact-map__footer a:focus-visible { color: var(--bk-red); }

.bk-form-notice { padding: 1rem; border-left: 4px solid; }
.bk-form-notice.is-success { background: #edf8f0; border-color: #2e8b57; }
.bk-form-notice.is-error { background: #fff1f2; border-color: var(--bk-red); }
.bk-search-results-meta { margin: 0 0 1.5rem; color: var(--bk-muted); font-size: 1rem; }
.bk-empty-state { padding: clamp(2rem,6vw,4rem); border: 1px solid rgba(48,60,73,.11); border-radius: var(--bk-radius-md); background: #fff; box-shadow: var(--bk-shadow-sm); text-align: center; }
.bk-empty-state h2 { margin-bottom: .75rem; }
.bk-empty-state p { margin: 0; color: var(--bk-muted); }

/*
 * Accessible fullscreen media viewer.
 *
 * The overlay deliberately uses a restrained neutral backdrop so photography
 * remains the focal point. Controls share the site's navy/magenta language but
 * stay visually secondary until the visitor interacts with them.
 */
.bk-photo-grid a[href],
.bk-hybrid-grid a[href],
.bk-service-row__image[href],
.bk-overhaul__item[href] {
	cursor: zoom-in;
}

body.bk-lightbox-open {
	overflow: hidden;
}

.bk-lightbox[hidden] {
	display: none;
}

.bk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: clamp(.75rem, 2.2vw, 2rem);
	overflow: hidden;
	overscroll-behavior: contain;
	background: rgba(13, 20, 28, .9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity 220ms ease;
}

.bk-lightbox.is-open {
	opacity: 1;
}

.bk-lightbox__dialog {
	position: relative;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	width: min(96vw, 1500px);
	height: min(92vh, 980px);
	height: min(92dvh, 980px);
	max-width: calc(100vw - 1.5rem);
	max-height: calc(100vh - 1.5rem);
	max-height: calc(100dvh - 1.5rem);
	min-width: 0;
	min-height: 0;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: clamp(14px, 2vw, 22px);
	background: rgba(28, 38, 49, .82);
	box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
	overflow: hidden;
	transform: translateY(10px) scale(.992);
	transition: transform 260ms cubic-bezier(.2, .7, .2, 1);
}

.bk-lightbox.is-open .bk-lightbox__dialog {
	transform: none;
}

.bk-lightbox__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	padding: clamp(4rem, 5vw, 5rem) clamp(4.25rem, 6vw, 6rem);
}

/* The media frame is sized by JavaScript to the useful rendered image area.
 * Keeping the border on the wrapper (rather than on the bitmap) lets the frame
 * adapt to small, panoramic, portrait and auto-trimmed light-background assets. */
.bk-lightbox__media-frame {
	--bk-lightbox-mat-size: clamp(4px, .45vw, 7px);
	--bk-lightbox-mat-color: #f7f8f9;
	position: relative;
	display: block;
	flex: 0 0 auto;
	box-sizing: border-box;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: calc(var(--bk-radius-sm) + 2px);
	background: var(--bk-lightbox-mat-color);
	box-shadow:
		0 0 0 var(--bk-lightbox-mat-size) var(--bk-lightbox-mat-color),
		0 0 0 calc(var(--bk-lightbox-mat-size) + 1px) rgba(13, 20, 28, .22),
		0 18px 56px rgba(0, 0, 0, .34);
}

.bk-lightbox__image {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	transition: opacity var(--bk-transition);
}

/* Hybrid technical artwork receives a stronger cool-gray mat while keeping the
 * original MAN artwork untouched. The same adaptive wrapper still determines
 * the final frame dimensions. */
.bk-lightbox.is-hybrid-media .bk-lightbox__media-frame {
	--bk-lightbox-mat-size: clamp(8px, .8vw, 12px);
	--bk-lightbox-mat-color: #dce4e9;
	border-color: rgba(255, 255, 255, .42);
	box-shadow:
		0 0 0 var(--bk-lightbox-mat-size) var(--bk-lightbox-mat-color),
		0 0 0 calc(var(--bk-lightbox-mat-size) + 1px) rgba(13, 20, 28, .30),
		0 24px 64px rgba(0, 0, 0, .38);
}

.bk-lightbox.is-hybrid-media .bk-lightbox__stage {
	background:
		radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .035), transparent 48%);
}

.bk-lightbox__stage.is-loading .bk-lightbox__image {
	opacity: .35;
}

.bk-lightbox__close,
.bk-lightbox__nav {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
	cursor: pointer;
	transition: background var(--bk-transition), border-color var(--bk-transition), transform var(--bk-transition), box-shadow var(--bk-transition);
}

.bk-lightbox__close svg,
.bk-lightbox__nav svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bk-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	background: rgba(228, 0, 69, .92);
	border-color: rgba(255, 255, 255, .28);
}

.bk-lightbox__close:hover,
.bk-lightbox__close:focus-visible {
	background: var(--bk-magenta);
	box-shadow: 0 10px 30px rgba(228, 0, 69, .3);
	transform: scale(1.02);
}

.bk-lightbox__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
}

.bk-lightbox__nav--prev { left: 1rem; }
.bk-lightbox__nav--next { right: 1rem; }

.bk-lightbox__nav:hover,
.bk-lightbox__nav:focus-visible {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .5);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

.bk-lightbox__nav--prev:hover,
.bk-lightbox__nav--prev:focus-visible {
	transform: translateY(-50%) translateX(-2px);
}

.bk-lightbox__nav--next:hover,
.bk-lightbox__nav--next:focus-visible {
	transform: translateY(-50%) translateX(2px);
}

.bk-lightbox__meta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.5rem;
	min-height: 66px;
	padding: .9rem clamp(1rem, 3vw, 1.6rem);
	border-top: 1px solid rgba(255, 255, 255, .11);
	background: rgba(21, 30, 39, .72);
	color: rgba(255, 255, 255, .88);
}

.bk-lightbox__caption {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	font-family: var(--bk-font-body);
	font-size: clamp(.9rem, 1.5vw, 1rem);
	line-height: 1.45;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bk-lightbox__counter {
	color: rgba(255, 255, 255, .62);
	font-family: var(--bk-font-display);
	font-size: .86rem;
	font-weight: 700;
	letter-spacing: .08em;
}

@media (max-width: 900px) {
 .bk-page--company .bk-story__media,
 .bk-page--services .bk-story__media {
  width: 100%;
  max-width: 860px;
  justify-self: center;
 }

	.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row,
	.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row {
		--bk-detail-reveal-x: 32px;
	}

	.bk-story,.bk-detail-row,.bk-product-detail,.bk-contact-grid { grid-template-columns: 1fr; }
	.bk-editorial-grid { grid-template-columns: 1fr; }
	.bk-story--reverse .bk-story__media,.bk-detail-row.is-reverse img { order: 0; }
	.bk-product-detail__image { justify-self: center; }
	.bk-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.bk-photo-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 620px) {
 .bk-page--company .bk-story__media,
 .bk-page--services .bk-story__media {
  --bk-media-padding: .55rem;
 }

 .bk-page--company .bk-story__copy,
 .bk-page--services .bk-service-list {
  border-radius: var(--bk-radius-sm);
 }

 .bk-page--company .bk-story__copy {
  padding: 1.25rem;
 }

	.bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row,
	.bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row {
		--bk-detail-reveal-x: 0px;
		--bk-detail-reveal-y: 18px;
	}

	.bk-lightbox {
		padding: .4rem;
	}

	.bk-lightbox__dialog {
		width: 100%;
		height: calc(100vh - .8rem);
		height: calc(100dvh - .8rem);
		max-width: none;
		max-height: none;
		border-radius: 12px;
	}

	.bk-lightbox__stage {
		padding: 3.15rem;
	}

	.bk-lightbox__media-frame {
		--bk-lightbox-mat-size: 4px;
		border-radius: 8px;
	}

	.bk-lightbox.is-hybrid-media .bk-lightbox__media-frame {
		--bk-lightbox-mat-size: 6px;
		border-radius: 9px;
	}

	.bk-lightbox__close,
	.bk-lightbox__nav {
		width: 40px;
		height: 40px;
	}

	.bk-lightbox__close {
		top: .55rem;
		right: .55rem;
	}

	.bk-lightbox__nav--prev { left: .35rem; }
	.bk-lightbox__nav--next { right: .35rem; }

	.bk-lightbox__meta {
		gap: .55rem;
		min-height: 56px;
		padding: .7rem .8rem;
	}

	.bk-lightbox__caption {
		font-size: .86rem;
	}

	.bk-page-hero { padding-top: 4.5rem; }
	.bk-engine-card__image,
	.bk-product-card > a,
	.bk-hybrid-image-link { padding: .7rem; }
	.bk-route-image--spares { padding: .55rem; }
	.bk-catalog-grid,.bk-hybrid-grid,.bk-form-row { grid-template-columns: 1fr; }
	.bk-hybrid-grid figcaption { align-items: flex-start; flex-direction: column; }
	.bk-hybrid-download { width: 100%; justify-content: center; }
	.bk-download { align-items: flex-start; flex-direction: column; }
	.bk-download__actions { width: 100%; justify-content: flex-start; }
	.bk-download__actions .bk-button { width: 100%; justify-content: center; }
	.bk-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
	.bk-photo-grid--gallery a:nth-child(9n+1) { grid-column: span 2; }
	.bk-contact-map iframe { min-height: 260px; aspect-ratio: 16 / 11; }
	.bk-contact-map__footer { align-items: flex-start; flex-direction: column; gap: .55rem; }
}


/* Keep the viewer usable on short landscape screens without sacrificing containment. */
@media (max-height: 520px) and (orientation: landscape) {
	.bk-lightbox {
		padding: .35rem;
	}

	.bk-lightbox__dialog {
		height: calc(100vh - .7rem);
		height: calc(100dvh - .7rem);
		max-height: none;
	}

	.bk-lightbox__stage {
		padding: 2.8rem 3.4rem;
	}

	.bk-lightbox.is-hybrid-media .bk-lightbox__media-frame {
		--bk-lightbox-mat-size: 5px;
	}

	.bk-lightbox__close,
	.bk-lightbox__nav {
		width: 38px;
		height: 38px;
	}

	.bk-lightbox__close {
		top: .3rem;
		right: .3rem;
	}

	.bk-lightbox__meta {
		min-height: 46px;
		padding: .45rem .75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
 .bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row > img,
 .bk-page--repair .bk-detail-rows.is-motion-enabled .bk-detail-row > div,
 .bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row > img,
 .bk-page--spares .bk-detail-rows.is-motion-enabled .bk-detail-row > div {
  opacity: 1 !important;
  transform: none !important;
 }
}