/* ================================================================
   BLUERIBBON THEME — CSS VARIABLES (Light & Dark)
================================================================ */
:root {
  --br-accent:        #1089ff;
  --br-accent-dark:   #0068d6;
  --br-accent-light:  #e8f2ff;

  --br-bg-white:      #ffffff;
  --br-bg-soft:       #f1f5fa;
  --br-bg-nav:        #ffffff;

  --br-text-primary:  #0f1b2d;
  --br-text-secondary:#4a5568;
  --br-text-muted:    #8a95a3;

  --br-border:        #dde4ed;
  --br-card-bg:       #ffffff;
  --br-card-shadow:   0 2px 16px rgba(16,40,70,.08);
  --br-card-shadow-hover: 0 6px 32px rgba(16,137,255,.14);

  --br-overlay:       rgba(8, 22, 44, 0.52);
  --br-hero-text:     #ffffff;

  --br-nav-height:    70px;
  --br-font-display:  'Playfair Display', Georgia, serif;
  --br-font-body:     'DM Sans', sans-serif;

  --br-radius:        8px;
  --br-radius-lg:     14px;
  --br-transition:    0.22s ease;
}

/* ================================================================
   DARK THEME — swap these variables to enable dark mode
   Usage: add data-theme="dark" to <html> element
================================================================ */
[data-theme="dark"] {
  --br-bg-white:      #0d1520;
  --br-bg-soft:       #111e2e;
  --br-bg-nav:        #0a1118;

  --br-text-primary:  #e8f0f9;
  --br-text-secondary:#9aafc5;
  --br-text-muted:    #566880;

  --br-border:        #1e2d3f;
  --br-card-bg:       #141f2e;
  --br-card-shadow:   0 2px 16px rgba(0,0,0,.35);
  --br-card-shadow-hover: 0 6px 32px rgba(16,137,255,.22);

  --br-overlay:       rgba(4, 12, 24, 0.62);
}

/* ================================================================
   BASE
================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--br-font-body);
  background-color: var(--br-bg-white);
  color: var(--br-text-primary);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--br-font-display);
  color: var(--br-text-primary);
  line-height: 1.2;
}

a { color: var(--br-accent); text-decoration: none; }
a:hover { color: var(--br-accent-dark); }
img { max-width: 100%; height: auto; }

/* ================================================================
   UTILITIES
================================================================ */
.bg-white-theme  { background-color: var(--br-bg-white); }
.bg-soft-theme   { background-color: var(--br-bg-soft); }
.text-muted-theme { color: var(--br-text-muted) !important; }

.section-pad    { padding: 80px 0; }
.section-pad-sm { padding: 56px 0; }

.br-divider {
  width: 48px; height: 3px;
  background: var(--br-accent);
  border-radius: 2px;
  margin-bottom: 20px;
}

/* Section eyebrow label */
.br-label {
  font-family: var(--br-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-accent);
  margin-bottom: 10px;
  display: block;
}

.section-title {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  margin-bottom: 16px;
}
.section-subtitle {
  font-family: var(--br-font-body);
  font-size: 1.05rem;
  color: var(--br-text-secondary);
  max-width: 560px;
}

/* ================================================================
   BUTTONS
================================================================ */
.btn-br-primary {
  background-color: var(--br-accent);
  color: #fff !important;
  border: 2px solid var(--br-accent);
  border-radius: var(--br-radius);
  padding: 11px 26px;
  font-family: var(--br-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: background var(--br-transition), box-shadow var(--br-transition), transform var(--br-transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}
.btn-br-primary:hover {
  background-color: var(--br-accent-dark);
  border-color: var(--br-accent-dark);
  box-shadow: 0 4px 18px rgba(16,137,255,.35);
  transform: translateY(-1px);
}

.btn-br-outline {
  background-color: transparent;
  color: var(--br-accent) !important;
  border: 2px solid var(--br-accent);
  border-radius: var(--br-radius);
  padding: 11px 26px;
  font-family: var(--br-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: background var(--br-transition), color var(--br-transition), transform var(--br-transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}
.btn-br-outline:hover {
  background-color: var(--br-accent);
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-br-white {
  background-color: #fff;
  color: var(--br-accent) !important;
  border: 2px solid #fff;
  border-radius: var(--br-radius);
  padding: 13px 30px;
  font-family: var(--br-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  transition: background var(--br-transition), box-shadow var(--br-transition), transform var(--br-transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}
.btn-br-white:hover {
  background-color: var(--br-accent-light);
  box-shadow: 0 4px 18px rgba(255,255,255,.25);
  transform: translateY(-2px);
}

.btn-br-sm { padding: 8px 18px; font-size: 0.82rem; }

/* Hero ghost outline */
.btn-br-hero-ghost {
  background-color: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: var(--br-radius);
  padding: 13px 30px;
  font-family: var(--br-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color var(--br-transition), background var(--br-transition), transform var(--br-transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}
.btn-br-hero-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,.12);
  transform: translateY(-2px);
}

/* ================================================================
   NAVBAR
================================================================ */
#br-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  height: var(--br-nav-height);
  background-color: var(--br-bg-nav);
  border-bottom: 1px solid var(--br-border);
  display: flex;
  align-items: center;
  transition: box-shadow 0.3s, background 0.3s;
}
#br-navbar.scrolled {
  box-shadow: 0 2px 20px rgba(16,40,70,.10);
}

/* ================================================================
   PROMO BANNER (overlays the top of the hero image, right below the
   fixed nav — it does NOT push the hero section down). Scrolls away
   with the page since it isn't fixed itself.
   To change the banner itself, edit /includes/banner.html — nothing
   here needs to change when the campaign/image changes.
   --br-banner-height is the space reserved above the hero text so the
   banner never covers it. It's a reasonable allowance, not a hard crop —
   if a future banner is meaningfully taller than this, bump the value.
================================================================ */
:root {
  --br-banner-height: 90px;
}
#banner-slot {
  position: absolute;
  top: var(--br-nav-height); /* sits right below the fixed nav */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 15; /* above the hero background/overlay */
  overflow: visible; /* so any decorative element that overhangs the strip (e.g. a sticker/badge) is never clipped */
}
.site-banner-link {
  display: block;
  line-height: 0; /* removes the small inline-image gap under the strip */
}
.site-banner-img {
  display: block;
  width: 100%;
  height: auto; /* no fixed height — scales with the image's own proportions so future banners of any size just work */
}

.br-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 24px;
  max-width: 1280px;
  margin: 0 auto;
}

/* Brand
   To use a logo image: add <img src="your-logo.svg" class="br-brand-logo" alt="Logo">
   before the brand name span and remove display:none from .br-brand-logo */
.br-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.br-brand-logo {
  width: 38px; height: 38px;
  object-fit: contain;
  display: none; /* Set to block when logo is used */
}
.br-brand-name {
  font-family: var(--br-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--br-text-primary);
  letter-spacing: -0.01em;
}
.br-brand-name span { color: var(--br-accent); }

/* No wrapping addon */
span.br-brand-name {
  font-size: clamp(1rem, 4vw, 1.35rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
a.br-brand {
  min-width: 0;
}

/* Desktop links */
.br-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0; padding: 0;
}
.br-nav-links a {
  font-family: var(--br-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--br-text-primary);
  padding: 7px 14px;
  border-radius: var(--br-radius);
  transition: background var(--br-transition), color var(--br-transition);
  display: block;
  white-space: nowrap;
}
.br-nav-links a:hover,
.br-nav-links a.active {
  color: var(--br-accent);
  background: var(--br-accent-light);
}
[data-theme="dark"] .br-nav-links a:hover,
[data-theme="dark"] .br-nav-links a.active {
  background: rgba(16,137,255,.14);
}

.br-nav-cta { margin-left: 12px; }

/* Theme toggle */
.br-theme-toggle {
  background: none;
  border: 1px solid var(--br-border);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--br-text-secondary);
  transition: border-color var(--br-transition), color var(--br-transition);
  flex-shrink: 0;
}
.br-theme-toggle:hover { border-color: var(--br-accent); color: var(--br-accent); }

/* Language selector */
.br-lang-select {
  position: relative;
}
.br-lang-select select {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  padding: 0 26px 0 10px;
  height: 36px;
  font-family: var(--br-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--br-text-secondary);
  cursor: pointer;
  transition: border-color var(--br-transition), color var(--br-transition);
  background-color: transparent;
}
.br-lang-select select:hover,
.br-lang-select select:focus {
  border-color: var(--br-accent);
  color: var(--br-accent);
  outline: none;
}
.br-lang-select::after {
  content: '';
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--br-text-muted);
  pointer-events: none;
}

/* Hamburger */
.br-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}
.br-hamburger span {
  display: block;
  height: 2px;
  background: var(--br-text-primary);
  border-radius: 2px;
  transition: all 0.25s;
}
.br-hamburger span:nth-child(1) { width: 24px; }
.br-hamburger span:nth-child(2) { width: 18px; }
.br-hamburger span:nth-child(3) { width: 24px; }
.br-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 24px; }
.br-hamburger.open span:nth-child(2) { opacity: 0; }
.br-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 24px; }

/* Mobile menu overlay */
.br-mobile-menu {
  display: none;
  position: fixed;
  top: var(--br-nav-height);
  left: 0; right: 0; bottom: 0;
  background: var(--br-bg-nav);
  z-index: 1020;
  flex-direction: column;
  padding: 28px 24px 40px;
  overflow-y: auto;
  border-top: 1px solid var(--br-border);
}
.br-mobile-menu.open { display: flex; }
.br-mobile-menu ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.br-mobile-menu ul li { border-bottom: 1px solid var(--br-border); }
.br-mobile-menu ul li a {
  display: block;
  padding: 17px 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--br-text-primary);
}
.br-mobile-menu ul li a:hover { color: var(--br-accent); }
.br-mobile-menu .br-mobile-cta { margin-top: 32px; }
.br-mobile-menu .br-mobile-cta .btn-br-primary {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 1rem;
}

/* ================================================================
   HERO
================================================================ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0a1520;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('./assets/images/karel-motorboat-underway.webp');
  background-size: cover;
  /* 35% horizontally keeps the boat (left of centre) in frame when
     narrower screens such as tablets crop the sides. */
  background-position: 35% 40%;
}
/* Phones: a separate portrait crop framed on the boat and its wake.
   The hero is very tall on phones (the service cards stack), so the
   photo fills the first screen and fades into the navy behind the cards
   instead of being stretched over the whole section. */
@media (max-width: 767px) {
  .hero-bg {
    background-image: url('./assets/images/karel-motorboat-underway-mobile.webp');
    background-position: 30% center;
    bottom: auto;
    height: 100vh;
    height: 100svh;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--br-overlay);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: calc(var(--br-nav-height) + var(--br-banner-height) + 40px) 20px 160px;
  max-width: 820px;
  width: 100%;
}
.hero-eyebrow {
  font-family: var(--br-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 16px;
  display: block;
}
.hero-title {
  font-family: var(--br-font-display);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.12;
}
.hero-title span { color: var(--br-accent); }
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: rgba(255,255,255,0.75);
  margin-bottom: 38px;
  line-height: 1.7;
}
/* Hero buttons: equal-width grid (every button as wide as the widest one) */
.hero-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.hero-actions > a { justify-content: center; text-align: center; }
@media (max-width: 991.98px) {
  .hero-actions { grid-auto-flow: row; width: min(100%, 320px); }
}

/* Overlapping cards */
.hero-cards-row {
  position: relative;
  z-index: 3;
  margin-top: -90px;
  padding-bottom: 0;
}
.hero-card {
  background: var(--br-card-bg);
  border-radius: var(--br-radius-lg);
  box-shadow: var(--br-card-shadow);
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 3px solid var(--br-accent);
  height: 100%;
  transition: box-shadow var(--br-transition), transform var(--br-transition), border-top-color var(--br-transition);
}
.hero-card-icon {
  width: 44px; height: 44px;
  background: var(--br-accent-light);
  border-radius: var(--br-radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--br-accent);
  font-size: 1.3rem;
  margin-bottom: 4px;
  transition: background var(--br-transition), color var(--br-transition);
}
.hero-card h5,
.hero-card .hero-card-title {
  font-family: var(--br-font-display);
  font-size: 1.02rem;
  margin: 0;
  transition: color var(--br-transition);
}
.hero-card p {
  font-size: 0.84rem;
  color: var(--br-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Hero card link wrapper + hover/focus state */
.card-link {
  display: block;
  height: 100%;
  text-decoration: none;
}
.card-link:hover .hero-card,
.card-link:focus-visible .hero-card {
  box-shadow: var(--br-card-shadow-hover);
  transform: translateY(-4px);
  border-top-color: var(--br-accent-dark);
}
.card-link:hover .hero-card-icon,
.card-link:focus-visible .hero-card-icon {
  background: var(--br-accent);
  color: #fff;
}
.card-link:hover .hero-card h5,
.card-link:hover .hero-card .hero-card-title,
.card-link:focus-visible .hero-card h5,
.card-link:focus-visible .hero-card .hero-card-title {
  color: var(--br-accent);
}
.card-link:focus-visible .hero-card { outline: 2px solid var(--br-accent); outline-offset: 2px; }

/* ================================================================
   SERVICE BAND STRIP
================================================================ */
.br-band {
  background: var(--br-accent);
  padding: 22px 0;
}
.br-band-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 40px;
}
.br-band-item {
  display: flex; align-items: center; gap: 10px;
  color: #fff;
}
.br-band-item i { font-size: 1.2rem; opacity: 0.85; }
.br-band-item span {
  font-size: 0.84rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.br-band-divider {
  width: 1px; height: 24px;
  background: rgba(255,255,255,0.3);
}

/* Mobile: instead of wrapping onto several rows (tall spacer), scroll the
   items horizontally in a single row so the band stays one item tall. */
.br-band-marquee-mobile { display: none; }

@media (max-width: 767px) {
  .br-band { padding: 14px 0; }
  .br-band-inner { display: none; }
  .br-band-marquee-mobile {
    display: block;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .br-band-marquee-track {
    display: flex;
    width: max-content;
    animation: brBandScroll 16s linear infinite;
  }
  .br-band-marquee-set {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-right: 32px;
    flex-shrink: 0;
  }
  .br-band-marquee-mobile .br-band-item { white-space: nowrap; }
  @keyframes brBandScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .br-band-marquee-track { animation: none; }
}



/* ================================================================
   ALTERNATING FEATURE ROWS
================================================================ */
#features
{
  overflow-x:clip;
}
.feature-row { padding: 72px 0; }
.feature-row#vessel-feature { margin-top: 0px; }
.feature-row + .feature-row { border-top: 1px solid var(--br-border); }

.feature-img-wrap {
  border-radius: var(--br-radius-lg);
  overflow: hidden;
  box-shadow: var(--br-card-shadow);
  aspect-ratio: 4/3;
}
.feature-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

	@media (min-width: 992px)
	{
	.feature-text { padding: 12px 0; }
	}


.feature-text h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  margin-bottom: 14px;
}
.feature-text p {
  color: var(--br-text-secondary);
  margin-bottom: 18px;
  font-size: 0.97rem;
}
.feature-text ul {
  list-style: none; padding: 0; margin: 0 0 24px;
}
.feature-text ul li {
  font-size: 0.9rem;
  color: var(--br-text-secondary);
  padding: 5px 0 5px 22px;
  position: relative;
}
.feature-text ul li::before {
  content: '';
  position: absolute; left: 0; top: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--br-accent);
}

/* ================================================================
   BRAND LOGOS BAND
================================================================ */
.br-brands-band {
  background: var(--br-bg-soft);
  padding: 40px 0;
  border-top: 1px solid var(--br-border);
  border-bottom: 1px solid var(--br-border);
}
.br-brands-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--br-text-muted);
  margin-bottom: 24px; text-align: center;
}
.br-brand-logos {
  display: flex; align-items: center;
  justify-content: center; flex-wrap: wrap;
  gap: 14px 22px;
}
.br-brand-pill {
  background: var(--br-card-bg);
  border: 1px solid var(--br-border);
  border-radius: 100px;
  padding: 10px 24px;
  font-family: var(--br-font-display);
  font-size: 0.92rem; font-weight: 600;
  color: var(--br-text-primary);
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  transition: border-color var(--br-transition), box-shadow var(--br-transition), color var(--br-transition);
  text-decoration: none;
}
.br-brand-pill:hover {
  border-color: var(--br-accent);
  color: var(--br-accent);
  box-shadow: 0 2px 12px rgba(16,137,255,.12);
}
.br-brand-pill i { font-size: 0.85rem; color: var(--br-accent); }

/* ================================================================
   SERVICE GRID — 4-per-row expandable cards
================================================================ */
.service-card {
  background: var(--br-card-bg);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius-lg);
  padding: 22px 18px 20px;
  cursor: pointer;
  transition: box-shadow var(--br-transition), border-color var(--br-transition), transform var(--br-transition);
  position: relative;
  user-select: none;
  height: 100%;
}
.service-card:hover {
  box-shadow: var(--br-card-shadow-hover);
  border-color: var(--br-accent);
  transform: translateY(-2px);
}
.service-card.active {
  border-color: var(--br-accent);
  box-shadow: var(--br-card-shadow-hover);
}
.service-card-icon {
  width: 46px; height: 46px;
  background: var(--br-accent-light);
  border-radius: var(--br-radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--br-accent);
  font-size: 1.3rem;
  margin-bottom: 14px;
}
.service-card h5,
.service-card .service-card-title {
  font-family: var(--br-font-body);
  font-size: 0.9rem; font-weight: 600;
  margin-bottom: 0; padding-right: 20px;
}
/* Full description stays in the HTML for search engines; it is shown in the
   expand panel below the row (script.js copies it there on click). */
.service-card .service-card-text { display: none; }
.service-card .sc-chevron {
  position: absolute; top: 18px; right: 16px;
  color: var(--br-text-muted); font-size: 0.82rem;
  transition: transform 0.22s;
}
.service-card.active .sc-chevron {
  transform: rotate(180deg);
  color: var(--br-accent);
}

/* Expand panel
   The column (.service-expand-col) lives inside the card grid; script.js moves it
   right after the last card of the clicked row. Height is animated with the
   grid-template-rows 0fr -> 1fr technique, so no fixed heights are needed. */
.row > .service-expand-col {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1),
              margin-top .4s cubic-bezier(.4, 0, .2, 1);
}
.row > .service-expand-col[hidden] { display: none; }
.row > .service-expand-col.open {
  grid-template-rows: 1fr;
  margin-top: var(--bs-gutter-y);
}
.service-expand-clip {
  min-height: 0;
  overflow: hidden;
}
.service-expand {
  background: var(--br-accent-light);
  border: 1px solid rgba(16,137,255,.3);
  border-radius: var(--br-radius-lg);
  padding: 26px 28px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s ease .05s, transform .4s cubic-bezier(.4, 0, .2, 1);
}
[data-theme="dark"] .service-expand {
  background: rgba(16,137,255,.08);
}
.service-expand-col.open .service-expand {
  opacity: 1;
  transform: none;
}
/* quick cross-fade when switching to another card in the same row */
.service-expand.swap { animation: serviceSwap .3s ease; }
@keyframes serviceSwap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .row > .service-expand-col,
  .service-expand { transition: none; }
  .service-expand.swap { animation: none; }
}
.expand-title {
  font-family: var(--br-font-display);
  font-size: 1.15rem;
  color: var(--br-text-primary);
  margin-bottom: 10px;
}
.service-expand > p {
  color: var(--br-text-secondary);
  font-size: 0.95rem;
  margin-bottom: 20px;
  line-height: 1.7;
}

/* ================================================================
   CTA BAND
================================================================ */
.br-cta-band {
  background: linear-gradient(120deg, #071524 0%, #0e2c50 55%, #071524 100%);
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.br-cta-band::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,137,255,.16) 0%, transparent 70%);
  pointer-events: none;
}
.br-cta-band::after {
  content: '';
  position: absolute; bottom: -80px; left: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,137,255,.10) 0%, transparent 70%);
  pointer-events: none;
}
.br-cta-band h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 14px;
}
.br-cta-band p {
  color: rgba(255,255,255,.62);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto 34px;
}
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ================================================================
   CONTACT SECTION
================================================================ */
.br-contact { background: var(--br-bg-soft); }

.contact-info-card {
  background: var(--br-card-bg);
  border-radius: var(--br-radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--br-border);
  height: 100%;
}
.contact-info-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--br-border);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-item i {
  color: var(--br-accent); font-size: 1.15rem;
  margin-top: 2px; flex-shrink: 0;
}
.ci-label {
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--br-text-muted); display: block;
  margin-bottom: 2px;
}
.ci-value {
  font-size: 0.93rem;
  color: var(--br-text-primary);
  font-weight: 500; line-height: 1.5;
}

.br-form-card {
  background: var(--br-card-bg);
  border-radius: var(--br-radius-lg);
  padding: 36px 32px;
  border: 1px solid var(--br-border);
  box-shadow: var(--br-card-shadow);
}

.br-form-group { margin-bottom: 18px; }
.br-form-group label {
  display: block;
  font-size: 0.8rem; font-weight: 600;
  color: var(--br-text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.br-form-control {
  width: 100%;
  background: var(--br-bg-soft);
  border: 1.5px solid var(--br-border);
  border-radius: var(--br-radius);
  padding: 11px 14px;
  font-family: var(--br-font-body);
  font-size: 0.92rem;
  color: var(--br-text-primary);
  transition: border-color var(--br-transition), box-shadow var(--br-transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.br-form-control:focus {
  border-color: var(--br-accent);
  box-shadow: 0 0 0 3px rgba(16,137,255,.12);
  background: var(--br-bg-white);
}
.br-form-control::placeholder { color: var(--br-text-muted); }
select.br-form-control { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a95a3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
textarea.br-form-control { resize: vertical; min-height: 110px; }

.br-check-group {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 20px;
}
.br-check-group input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--br-accent);
  flex-shrink: 0; margin-top: 2px; cursor: pointer;
}
.br-check-group label {
  font-size: 0.82rem;
  color: var(--br-text-muted);
  cursor: pointer; line-height: 1.55;
}
.br-check-group label a { color: var(--br-accent); }

/* ================================================================
   FOOTER
================================================================ */
#br-footer {
  background: #07111e;
  color: rgba(255,255,255,.55);
  padding: 60px 0 28px;
}
.footer-brand-name {
  font-family: var(--br-font-display);
  font-size: 1.4rem; font-weight: 700; color: #fff;
}
.footer-brand-name span { color: var(--br-accent); }
.footer-tagline {
  font-size: 0.83rem;
  color: rgba(255,255,255,.38);
  margin-top: 6px;
}
.footer-col-title {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: 14px;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: 9px; }
.footer-links a {
  font-size: 0.87rem;
  color: rgba(255,255,255,.5);
  transition: color var(--br-transition);
}
.footer-links a:hover { color: var(--br-accent); }
.footer-bottom {
  margin-top: 50px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  font-size: 0.79rem;
}
.footer-socials { display: flex; gap: 10px; }
.footer-social-link {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.45);
  transition: border-color var(--br-transition), color var(--br-transition);
}
.footer-social-link:hover {
  border-color: var(--br-accent);
  color: var(--br-accent);
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 991.98px) {
  .br-nav-links, .br-nav-cta { display: none; }
  .br-hamburger { display: flex; }
  .hero-cards-row { margin-top: 0; padding-top: 28px; }
  .br-band-divider { display: none; }

  #br-footer .row > div {
    text-align: center;
  }
  #br-footer .footer-tagline,
  #br-footer p[style*="max-width:280px"] {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767.98px) {
  .section-pad { padding: 56px 0; }
  .feature-row { padding: 52px 0; }
  .hero-content { padding-bottom: 40px; }
  .br-form-card { padding: 24px 18px; }
  .contact-info-card { padding: 24px 18px; margin-bottom: 0; }
}

@media (max-width: 575.98px) {
  .hero-title { font-size: 2rem; }
  .cta-actions { flex-direction: column; align-items: center; }
  .service-expand { padding: 20px 18px; }
  .hero-cards-row {padding-bottom: 28px; }
}
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { padding-top: 1px;} 
}
/* ================================================================
   BOAT BRANDS — Showcase (added)
================================================================ */

/* --- Simple teaser pills (used inline, e.g. inside vessel-feature) --- */
.boat-brand-teaser {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px;
  margin: 6px 0 26px;
}
.boat-brand-teaser-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--br-text-muted);
  width: 100%; margin-bottom: 4px;
}
.boat-brand-pill {
  display: flex; align-items: center; gap: 9px;
  background: var(--br-card-bg);
  border: 1px solid var(--br-border);
  border-radius: 100px;
  padding: 8px 18px 8px 10px;
  text-decoration: none;
  transition: border-color var(--br-transition), box-shadow var(--br-transition), transform var(--br-transition);
}
.boat-brand-pill:hover {
  border-color: var(--br-accent);
  box-shadow: 0 2px 12px rgba(16,137,255,.12);
  transform: translateY(-1px);
}
.boat-brand-pill-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--br-accent-light);
  color: var(--br-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--br-font-display); font-weight: 700; font-size: 0.78rem;
  flex-shrink: 0;
}
.boat-brand-pill-name {
  font-family: var(--br-font-display);
  font-weight: 600; font-size: 0.88rem;
  color: var(--br-text-primary);
}
.boat-brand-pill:hover .boat-brand-pill-name { color: var(--br-accent); }

/* --- Rich showcase cards (full section) --- */
.boat-brand-card {
  background: var(--br-card-bg);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column;
  box-shadow: var(--br-card-shadow);
  transition: box-shadow var(--br-transition), transform var(--br-transition), border-color var(--br-transition);
}
.boat-brand-card:hover {
  box-shadow: var(--br-card-shadow-hover);
  border-color: var(--br-accent);
  transform: translateY(-3px);
}
.boat-brand-card.model-card:hover {
  box-shadow: var(--br-card-shadow);
  border-color: var(--br-border);
  transform: none;
}
.boat-brand-card-img { aspect-ratio: 16/10; overflow: hidden; }
.boat-brand-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.boat-brand-card:hover .boat-brand-card-img img { transform: scale(1.05); }
.boat-brand-card-body {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; flex-grow: 1;
}
.boat-brand-card-name {
  font-family: var(--br-font-display);
  font-size: 1.2rem; font-weight: 700;
  margin-bottom: 8px;
  color: var(--br-text-primary);
}
.boat-brand-card-desc {
  font-size: 0.88rem;
  color: var(--br-text-secondary);
  line-height: 1.6;
  margin-bottom: 18px;
  flex-grow: 1;
}
.boat-brand-card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--br-font-body);
  font-weight: 600; font-size: 0.85rem;
  color: var(--br-accent);
  text-decoration: none;
  align-self: flex-start;
}
.boat-brand-card-cta i { transition: transform var(--br-transition); }
.boat-brand-card-cta:hover i { transform: translateX(3px); }

/* --- "Coming soon" placeholder card for future 4th brand slot --- */
.boat-brand-card.is-soon {
  border-style: dashed;
  background: var(--br-bg-soft);
  box-shadow: none;
}
.boat-brand-card.is-soon .boat-brand-card-body {
  align-items: center; justify-content: center; text-align: center;
}
.boat-brand-card.is-soon i { font-size: 1.6rem; color: var(--br-text-muted); margin-bottom: 10px; }
.boat-brand-card.is-soon .boat-brand-card-name { color: var(--br-text-muted); font-size: 1rem; }
.boat-brand-card.is-soon .boat-brand-card-desc { color: var(--br-text-muted); margin-bottom: 0; }

/* ================================================================
   TRAILERS — Secondary product category (added)
   Three alternative treatments: trailer-split / trailer-mini-card / trailer-strip
================================================================ */

/* --- Variant 1: compact split cards (icon + text, no photos) --- */
.trailer-split-item {
  background: var(--br-card-bg);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius-lg);
  padding: 26px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  height: 100%;
  transition: border-color var(--br-transition), box-shadow var(--br-transition), transform var(--br-transition);
}
.trailer-split-item:hover {
  border-color: var(--br-accent);
  box-shadow: var(--br-card-shadow-hover);
  transform: translateY(-2px);
}
.trailer-split-icon {
  width: 46px; height: 46px; border-radius: var(--br-radius);
  background: var(--br-accent-light); color: var(--br-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.trailer-split-item h4 {
  font-family: var(--br-font-display);
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.trailer-split-item p {
  font-size: 0.86rem;
  color: var(--br-text-secondary);
  margin-bottom: 10px;
  line-height: 1.55;
}
.trailer-split-item a {
  font-size: 0.84rem; font-weight: 600;
  color: var(--br-accent);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.trailer-split-item a i { transition: transform var(--br-transition); }
.trailer-split-item a:hover i { transform: translateX(3px); }

/* --- Variant 2: mini showcase cards (scaled-down boat-brand-card) --- */
.boat-brand-card.trailer-mini-card .boat-brand-card-img { aspect-ratio: 21/9; }
.boat-brand-card.trailer-mini-card .boat-brand-card-body { padding: 18px 20px 20px; }
.boat-brand-card.trailer-mini-card .boat-brand-card-name { font-size: 1.05rem; margin-bottom: 6px; }
.boat-brand-card.trailer-mini-card .boat-brand-card-desc { font-size: 0.84rem; margin-bottom: 12px; }

/* --- Variant 3: inline strip / ribbon --- */
.trailer-strip {
  background: var(--br-card-bg);
  border-top: 1px solid var(--br-border);
  border-bottom: 1px solid var(--br-border);
  padding: 30px 0;
}
.trailer-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
}
.trailer-strip-label { display: flex; align-items: center; gap: 12px; }
.trailer-strip-label-icon {
  width: 42px; height: 42px; border-radius: var(--br-radius);
  background: var(--br-accent-light); color: var(--br-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.trailer-strip-label strong {
  font-family: var(--br-font-display);
  font-size: 1.02rem;
  display: block;
  color: var(--br-text-primary);
}
.trailer-strip-label span {
  display: block;
  font-size: 0.82rem;
  color: var(--br-text-secondary);
}
.trailer-strip-links { display: flex; gap: 10px; flex-wrap: wrap; }
.trailer-strip-cta { flex-shrink: 0; }

@media (max-width: 767px) {
  .trailer-strip-inner { justify-content: flex-start; }
}

/* ================================================================
   BOAT BRANDS — Static showcase grid (all brands visible, no slider)
================================================================ */
#boat-brands { overflow-x: clip; }

/* Checklist row under the section subtitle (bullets carried over from
   the former "Prodaja Plovila" feature row) */
.brand-bullets-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: 10px 30px;
  padding: 0;
  margin: 22px 0 4px;
}
.brand-bullets-row li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--br-font-body);
  font-size: 0.92rem;
  color: var(--br-text-secondary);
}
.brand-bullets-row li i { color: var(--br-accent); font-size: 1rem; flex-shrink: 0; }

/* Grid of brand cards — all visible at once on desktop, stacked on mobile */
.brand-showcase-grid { margin-top: 6px; }

.brand-showcase-card .boat-brand-card-img { aspect-ratio: 4/3; }

/* Image wrapper: holds the photo plus a bottom gradient with the
   brand name + tagline overlaid directly on it (saves vertical space,
   readable thanks to the dark gradient underneath the text). */
.brand-showcase-media { position: relative; }
.brand-showcase-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.brand-showcase-media-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 20px 16px;
  background: linear-gradient(0deg, rgb(8 16 26 / 52%) 0%, rgb(8 16 26 / 28%) 55%, rgba(8, 16, 26, 0) 100%);
}

.brand-showcase-name {
  font-family: var(--br-font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  margin-bottom: 4px;
  color: #fff;
}
.brand-showcase-tagline {
  font-family: var(--br-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.88);
  margin-bottom: 0;
}
.brand-showcase-card .boat-brand-card-desc { font-size: 0.9rem; }
.brand-showcase-card .boat-brand-card-body { padding-top: 20px; }

/* Cards themselves aren't clickable — only the button is — so disable
   the inherited hover lift/shadow/zoom from .boat-brand-card. */
.brand-showcase-card,
.brand-showcase-card:hover {
  box-shadow: var(--br-card-shadow);
  border-color: var(--br-border);
  transform: none;
}
.brand-showcase-card:hover .boat-brand-card-img img { transform: none; }

/* Button should size to its text, not stretch to the card's full width
   (the card body is a flex column, which stretches children by default). */
.brand-showcase-card .boat-brand-card-body .btn-br-primary { align-self: flex-start; }

/* First two cards (Karel, Skipper Powerboats) span half the row each on desktop
   and are visually featured — wider image, bigger title/text. */
.brand-showcase-card-lg .boat-brand-card-img { aspect-ratio: 16/9; }
.brand-showcase-card-lg .brand-showcase-media-overlay { padding: 50px 26px 20px; }
.brand-showcase-card-lg .brand-showcase-name { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.brand-showcase-card-lg .brand-showcase-tagline { font-size: 0.9rem; }
.brand-showcase-card-lg .boat-brand-card-body { padding: 22px 30px 30px; }
.brand-showcase-card-lg .boat-brand-card-desc { font-size: 0.96rem; max-width: 640px; }

@media (max-width: 991.98px) {
  .brand-showcase-card-lg .boat-brand-card-img { aspect-ratio: 4/3; }
}

@media (max-width: 767px) {
  .brand-bullets-row { justify-content: flex-start; gap: 10px 22px; }
}

/* Brand card image is a link (same destination as the button).
   Desktop looks unchanged; the button is still shown there. */
a.brand-showcase-media,
a.brand-showcase-media:hover {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.brand-showcase-media:focus-visible {
  outline: 3px solid var(--br-accent);
  outline-offset: -3px;
}
/* Icon next to the brand name is mobile only */
.brand-showcase-icon { display: none; }

/* Mobile only: the button's icon after the brand name + press feedback,
   so the whole image reads as one tappable card */
@media (max-width: 767.98px) {
  .brand-showcase-card .boat-brand-card-body { display: none; }

  a.brand-showcase-media { -webkit-tap-highlight-color: transparent; }

  .brand-showcase-icon {
    display: inline-block;
    margin-left: 0.3em;
    font-size: 0.65em;
    vertical-align: 0.08em;
  }

  /* Dim the image while it is pressed */
  a.brand-showcase-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(8 16 26 / 0%);
    transition: background 0.15s ease;
    pointer-events: none;
  }
  a.brand-showcase-media:active::after { background: rgb(8 16 26 / 30%); }
}

/* ================================================================
   MOTOR BRANDS — Paginated logo marquee (added)
   Static grid of "logo" tiles with manual pagination dots (no autoplay)
================================================================ */
.logo-marquee { position: relative; touch-action: pan-y; }
.logo-marquee-page {
  display: none;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.logo-marquee-page.active {
  display: flex;
  animation: logoPageIn 0.4s ease;
}
@keyframes logoPageIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.logo-tile {
  background: var(--br-card-bg);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  height: 92px;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  text-decoration: none;
  cursor: default;
}
.logo-tile-name {
  font-family: var(--br-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--br-text-secondary);
  text-align: center;
}
.logo-tile-img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Pagination dots */
.logo-marquee-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}
.logo-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--br-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--br-transition), transform var(--br-transition);
}
.logo-dot:hover { background: var(--br-accent-light); }
.logo-dot.active { background: var(--br-accent); transform: scale(1.25); }

@media (max-width: 767px) {
  .logo-marquee-page { gap: 10px; }
  .logo-tile { height: 68px; padding: 8px 8px; }
  .logo-tile-img { max-height: 34px; }
  .logo-tile-name { font-size: 0.8rem; }
}

/* ----------------------------------------------------------------
   Mobile-only motor brand carousel: two stacked tiles per slide,
   swipeable, with its own dots. Built dynamically by script.js from
   the same tiles above. Desktop grid + its dots are hidden instead
   of shown once this kicks in, so nothing renders twice.
---------------------------------------------------------------- */
.logo-marquee-mobile { display: none; }
.logo-marquee-mobile-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

@media (max-width: 767px) {
  .logo-marquee { display: none; }
  .logo-marquee-dots { display: none; }

  .logo-marquee-mobile { display: block; position: relative; touch-action: pan-y; }
  .logo-marquee-mobile-page {
    display: none;
    flex-direction: column;
    gap: 12px;
  }
  .logo-marquee-mobile-page.active {
    display: flex;
    animation: logoPageIn 0.4s ease;
  }
  .logo-marquee-mobile-page .logo-tile {
    width: 100%;
    height: 88px;
    padding: 10px 16px;
  }
  .logo-marquee-mobile-page .logo-tile-img { max-height: 44px; }

  .logo-marquee-mobile-dots { display: flex; }
}



.logo-tile-img {
  width: 100%;
  height: 100%;
  /* Switch to contain for wordmarks/horizontal logos */
  object-fit: contain; 
}

.logo-tile {
  /* Add padding so logos have breathing room */
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-tile-img.is-square {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.logo-tile-img.is-horizontal {
  width: 100%;
  height: 100%;
  object-fit: contain;
}




/* ================================================================
   LEGAL / FAQ SUB-PAGES  (Terms of Use, Privacy Policy, FAQ)
================================================================ */
.page-header {
  position: relative;
  padding: calc(var(--br-nav-height) + 64px) 0 64px;
  background: #0a1520;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('./assets/images/karel-motorboat-underway.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.28;
}
.page-header::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,14,26,.55) 0%, #0a1520 92%);
}
.page-header-inner { position: relative; z-index: 2; text-align: center; }
.page-header-eyebrow {
  font-family: var(--br-font-body);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 14px; display: block;
}
.page-header-title {
  font-family: var(--br-font-display);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.page-header-meta {
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
}

.legal-wrap { padding: 64px 0 100px; }
.legal-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--br-card-bg);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius-lg);
  box-shadow: var(--br-card-shadow);
  padding: 48px clamp(24px, 5vw, 64px);
}
.legal-content h2 {
  font-size: 1.28rem;
  margin: 40px 0 14px;
  padding-top: 4px;
  color: var(--br-accent-dark);
}
[data-theme="dark"] .legal-content h2 { color: var(--br-accent); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
  color: var(--br-text-secondary);
  margin-bottom: 16px;
  line-height: 1.75;
}
.legal-content ul { margin: 0 0 16px; padding-left: 20px; }
.legal-content li { color: var(--br-text-secondary); margin-bottom: 10px; line-height: 1.65; }
.legal-content li strong { color: var(--br-text-primary); }
.legal-content a { text-decoration: underline; text-underline-offset: 2px; }
.legal-intro {
  font-size: 1.02rem;
  color: var(--br-text-secondary);
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--br-border);
  line-height: 1.75;
}
.legal-contact-box {
  margin-top: 8px;
  padding: 22px 24px;
  background: var(--br-bg-soft);
  border-radius: var(--br-radius);
  border: 1px solid var(--br-border);
}
.legal-contact-box p { margin-bottom: 6px; color: var(--br-text-primary); }
.legal-contact-box p:last-child { margin-bottom: 0; }
.legal-updated {
  margin-top: 36px;
  font-size: 0.85rem;
  color: var(--br-text-muted);
}

.back-home-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.86rem; font-weight: 600;
  color: var(--br-text-secondary);
  margin-bottom: 28px;
  transition: color var(--br-transition), gap var(--br-transition);
}
.back-home-link:hover { color: var(--br-accent); gap: 12px; }

/* FAQ accordion */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  background: var(--br-card-bg);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color var(--br-transition), box-shadow var(--br-transition);
}
.faq-item:has(.faq-question[aria-expanded="true"]) {
  border-color: var(--br-accent);
  box-shadow: var(--br-card-shadow);
}
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: none; border: none;
  padding: 20px 24px;
  text-align: left;
  font-family: var(--br-font-body);
  font-size: 1rem; font-weight: 600;
  color: var(--br-text-primary);
  cursor: pointer;
}
.faq-question .faq-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--br-accent-light);
  color: var(--br-accent-dark);
  transition: transform var(--br-transition), background var(--br-transition);
}
[data-theme="dark"] .faq-question .faq-icon { background: rgba(16,137,255,.14); color: var(--br-accent); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, padding var(--br-transition);
}
.faq-answer-inner {
  padding: 0 24px 22px;
  color: var(--br-text-secondary);
  line-height: 1.7;
  font-size: 0.96rem;
}

@media (max-width: 767px) {
  .legal-card { padding: 32px 20px; }
  .page-header { padding: calc(var(--br-nav-height) + 40px) 0 44px; }
}

/* ================================================================
   BRAND MODEL SHOWCASE PAGES (Skipper Powerboats / Silesian / Wave / Next Marine)
================================================================ */

/* Per-brand hero background images (overrides the default .page-header::before) */
.page-header.brand-hero-skipper::before  { background-image: url('./assets/images/skipper/skipper-powerboats-38nc-plus.webp'); background-position: center 55%; }
.page-header.brand-hero-silesian::before    { background-image: url('./assets/images/silesian/silesian-700-motor-yacht-marina.webp'); }
.page-header.brand-hero-wave::before        { background-image: url('./assets/images/wave-60-sailing-catamaran-at-sea.webp'); }
.page-header.brand-hero-next::before        { background-image: url('./assets/images/next-marine-workboat-at-sea.webp'); }
.page-header-title .brand-hero-tagline {
  display: block;
  font-family: var(--br-font-body);
  font-weight: 500;
  font-size: 1rem;
  color: rgba(255,255,255,.7);
  margin-top: 8px;
}

/* ================================================================
   SUB-PAGE HEADER — ALTERNATE STYLES
   Add ONE of these modifier classes alongside "page-header" to
   replace the dark photo slab. Both are theme-aware.
================================================================ */

/* ---- Option A: "page-header--flat" -----------------------------
   No background section at all — header sits directly on the
   page's own background, unified with the rest of the page.
------------------------------------------------------------------- */
.page-header.page-header--flat {
  background: var(--br-bg-white);
  padding: calc(var(--br-nav-height) + 40px) 0 40px;
  border-bottom: 1px solid var(--br-border);
}
.page-header--flat::before,
.page-header--flat::after { content: none; }
.page-header--flat .page-header-eyebrow { color: var(--br-accent-dark); }
[data-theme="dark"] .page-header--flat .page-header-eyebrow { color: var(--br-accent); }
.page-header--flat .page-header-title {
  color: var(--br-text-primary);
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
}
.page-header--flat .page-header-title::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: var(--br-accent);
  border-radius: 2px;
}
.page-header--flat .page-header-title .brand-hero-tagline {
  color: var(--br-text-secondary);
  padding-top: 6px;
}
.page-header--flat .page-header-meta { color: var(--br-text-muted); margin-top: 4px; }

/* ---- Option B: "page-header--compact" --------------------------
   Small, solid blue-accent banner — no photo, much shorter.
------------------------------------------------------------------- */
.page-header.page-header--compact {
  padding: calc(var(--br-nav-height) + 26px) 0 26px;
  background: linear-gradient(120deg, var(--br-accent-dark) 0%, var(--br-accent) 100%);
}
[data-theme="dark"] .page-header.page-header--compact {
  background: linear-gradient(120deg, #062341 0%, var(--br-accent-dark) 100%);
}
.page-header--compact::before,
.page-header--compact::after { content: none; }
.page-header--compact .page-header-eyebrow { color: rgba(255,255,255,.72); }
.page-header--compact .page-header-title {
  color: #fff;
  margin-bottom: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.page-header--compact .page-header-title .brand-hero-tagline {
  color: rgba(255,255,255,.75);
  font-size: 0.9rem;
  margin-top: 4px;
}
.page-header--compact .page-header-meta { color: rgba(255,255,255,.7); margin-top: 2px; }

@media (max-width: 767px) {
  .page-header.page-header--flat { padding: calc(var(--br-nav-height) + 24px) 0 24px; }
  .page-header.page-header--compact { padding: calc(var(--br-nav-height) + 18px) 0 18px; }
}

/* Intro row: back link + short description + visit-official-site button */
.model-intro {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}
.model-intro p {
  color: var(--br-text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Grid of model cards */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.model-card .boat-brand-card-img { aspect-ratio: 4/3; }
.model-card .boat-brand-card-body { padding: 20px 22px 22px; }

.model-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 2px 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--br-border);
}
.model-spec {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--br-text-secondary);
}
.model-spec i { color: var(--br-accent); font-size: 1.05rem; flex-shrink: 0; }
.model-spec strong { color: var(--br-text-primary); font-weight: 700; }
.model-spec.is-oa { font-style: italic; color: var(--br-text-muted); }

.model-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.model-card-actions .btn-br-outline,
.model-card-actions .btn-br-primary { padding: 9px 18px; font-size: 0.82rem; }
.model-card-actions .btn-br-outline.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

/* "Coming soon" placeholder tile — reuses .is-soon look, sized to match model cards */
.model-card.is-soon { min-height: 220px; }
.model-card.is-soon .boat-brand-card-body { padding: 32px 24px; }

/* Single-model brands: size the card like one card in a two-up grid
   (e.g. Wave Katamarani), centred, but never wider than .legal-card (820px). */
.model-grid-single { grid-template-columns: 1fr; }
.model-grid-single > .model-card {
  width: 100%;
  max-width: 820px;
  justify-self: center;
}
@media (min-width: 768px) {
  .model-grid-single > .model-card { width: calc((100% - 28px) / 2); }
}

@media (max-width: 575.98px) {
  .model-card-specs { gap: 8px 16px; }
}

/* ================================================================
   SPECIFICATIONS DIALOG
================================================================ */
/* In-page spec lists: indexed by search engines, shown only via the dialog. */
.specs-data[hidden] { display: none !important; }

.specs-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--br-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--br-transition), visibility var(--br-transition);
}
.specs-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.specs-modal {
  background: var(--br-card-bg);
  border-radius: var(--br-radius-lg);
  box-shadow: 0 24px 64px rgba(8, 22, 44, 0.35);
  width: 100%;
  max-width: 480px;
  max-height: min(640px, 86vh);
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--br-transition);
  overflow: hidden;
}
.specs-modal-overlay.is-open .specs-modal {
  transform: translateY(0) scale(1);
}
.specs-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--br-border);
  flex-shrink: 0;
}
.specs-modal-heading { display: flex; flex-direction: column; gap: 2px; }
.specs-modal-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--br-accent);
  font-weight: 700;
}
.specs-modal-title {
  font-family: var(--br-font-display);
  font-size: 1.3rem;
  color: var(--br-text-primary);
  line-height: 1.25;
}
.specs-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--br-border);
  background: var(--br-bg-soft);
  color: var(--br-text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--br-transition), color var(--br-transition), transform var(--br-transition);
}
.specs-modal-close:hover,
.specs-modal-close:focus-visible {
  background: var(--br-accent);
  color: #fff;
  transform: rotate(90deg);
  outline: none;
}
.specs-modal-body {
  padding: 8px 24px 24px;
  overflow-y: auto;
}
.specs-modal-list {
  display: flex;
  flex-direction: column;
}
.specs-modal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--br-border);
}
.specs-modal-row:last-child { border-bottom: none; }
.specs-modal-label {
  color: var(--br-text-secondary);
  font-size: 0.9rem;
}
.specs-modal-value {
  color: var(--br-text-primary);
  font-weight: 700;
  font-size: 0.94rem;
  text-align: right;
  white-space: nowrap;
}
.specs-modal-value.is-placeholder {
  color: var(--br-text-muted);
  font-weight: 500;
}
.specs-modal-note {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--br-border);
  font-size: 0.82rem;
  color: var(--br-text-muted);
  font-style: italic;
}

@media (max-width: 575.98px) {
  .specs-modal-overlay { padding: 0; align-items: flex-end; }
  .specs-modal {
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--br-radius-lg) var(--br-radius-lg) 0 0;
  }
}

/* ================================================================
   VIDEO ICON OVERLAY + VIDEO DIALOG
================================================================ */
.boat-brand-card-img.has-video { position: relative; cursor: pointer; }
.boat-brand-card-img.has-video::before {
  content: '';
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: none;
}
.boat-brand-card-img.has-video:focus-visible::before {
  background: transparent;
}
.boat-brand-card-img.has-video:focus-visible { outline: 3px solid var(--br-accent); outline-offset: -3px; }

.video-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(6, 20, 30, 0.4);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  pointer-events: none; /* clicks are handled by the parent trigger */
  transition: transform var(--br-transition), background var(--br-transition), border-color var(--br-transition);
  z-index: 2;
}
/* Centre the play glyph as a fixed 1em box, independent of font metrics,
   baseline alignment and button padding. --play-nudge is the small optical
   shift to the right that makes a triangle look centred in a circle. */
.video-play-btn { padding: 0; line-height: 1; --play-nudge: 0.06em; }
.video-play-btn i {
  position: absolute; top: 50%; left: 50%;
  width: 1em; height: 1em;
  margin: 0;
  line-height: 1;
  transform: translate(calc(-50% + var(--play-nudge)), -50%);
}
/* The trimmed icon font draws this glyph off-centre in its box, so the
   play triangle is drawn from the original Bootstrap Icons vector instead. */
.video-play-btn i::before {
  content: '';
  display: block;
  width: 1em; height: 1em;
  vertical-align: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/%3E%3C/svg%3E") center / contain no-repeat;
}
.boat-brand-card-img.has-video:hover .video-play-btn,
.boat-brand-card-img.has-video:focus-visible .video-play-btn {
  background: var(--br-accent);
  border-color: var(--br-accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.video-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--br-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--br-transition), visibility var(--br-transition);
}
.video-modal-overlay.is-open { opacity: 1; visibility: visible; }
.video-modal {
  position: relative;
  background: #0b141d;
  border-radius: var(--br-radius-lg);
  box-shadow: 0 24px 64px rgba(8, 22, 44, 0.45);
  width: 100%;
  max-width: 860px;
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--br-transition);
}
.video-modal-overlay.is-open .video-modal { transform: translateY(0) scale(1); }
.video-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background var(--br-transition), transform var(--br-transition);
}
.video-modal-close:hover,
.video-modal-close:focus-visible { background: var(--br-accent); transform: rotate(90deg); outline: none; }
.video-modal-frame-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
}
.video-modal-frame-wrap iframe,
.video-modal-frame-wrap video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  object-fit: contain;
  background: #000;
}
.video-modal-placeholder {
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 76px 32px;
  color: #fff;
}
.video-modal-placeholder i { font-size: 2.2rem; color: var(--br-accent); }
.video-modal-placeholder-title {
  font-family: var(--br-font-display);
  font-size: 1.15rem; font-weight: 700;
  margin: 0;
}
.video-modal-placeholder-body {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.68);
  margin: 0; max-width: 360px;
}
.video-modal-overlay.is-placeholder .video-modal-frame-wrap { display: none; }
.video-modal-overlay.is-placeholder .video-modal-placeholder { display: flex; }

/* Vertical (9:16) videos on phones: tall frame sized to fit the screen height */
.video-modal-overlay.is-vertical .video-modal {
  max-width: min(92vw, calc((100vh - 48px) * 9 / 16));
  max-width: min(92vw, calc((100dvh - 48px) * 9 / 16));
}
.video-modal-overlay.is-vertical .video-modal-frame-wrap { padding-bottom: 177.78%; /* 9:16 */ }

@media (max-width: 575.98px) {
  .video-play-btn { width: 52px; height: 52px; font-size: 1.15rem; }
  .video-modal-overlay { padding: 20px; align-items: center; }
  .video-modal { max-width: min(92vw, 860px); border-radius: var(--br-radius-lg); }
  .video-modal-placeholder { padding: 56px 24px; }
}

/* ================================================================
   PRICELIST PAGE (hr/cjenik.html, en/price-list.html, de/preisliste.html)
   CSV download of the latest Cjenici by Parra publication – rendered by cjenik.js
================================================================ */

/* Summary card: current publication + downloads */
.cjenik-current {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap;
  padding: 24px 26px;
  background: var(--br-accent-light);
  border: 1px solid var(--br-accent);
  border-left-width: 4px;
  border-radius: var(--br-radius);
}
[data-theme="dark"] .cjenik-current { background: rgba(16,137,255,.10); }
.cjenik-current-info { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 340px; }
.cjenik-current-icon {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--br-accent);
  color: #fff;
  font-size: 1.5rem;
}
.cjenik-current-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cjenik-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--br-accent-dark);
}
[data-theme="dark"] .cjenik-eyebrow { color: var(--br-accent); }
.cjenik-current-title {
  font-family: var(--br-font-display);
  font-size: 1.2rem; font-weight: 700;
  color: var(--br-text-primary);
}
.cjenik-published { font-size: 0.9rem; color: var(--br-text-secondary); }
.cjenik-meta { font-size: 0.85rem; color: var(--br-text-muted); }
.cjenik-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-content a.cjenik-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

#cjenik-app { display: flex; flex-direction: column; gap: 14px; }
.cjenik-filename {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem; color: var(--br-text-muted); overflow-wrap: anywhere; margin-top: 2px;
}
.legal-content .cjenik-legal { font-size: 0.85rem; color: var(--br-text-muted); margin: 22px 0 0; line-height: 1.65; }

/* Previous pricelists */
.legal-content .cjenik-archive-note { font-size: 0.93rem; margin-bottom: 18px; }
.legal-content ul.cjenik-archive-list { list-style: none; padding: 0; margin: 0; }
.legal-content .cjenik-archive-list li { margin: 0 0 10px; }
.legal-content a.cjenik-archive-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--br-card-bg);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  text-decoration: none;
  color: var(--br-text-primary);
  transition: border-color var(--br-transition), box-shadow var(--br-transition), transform var(--br-transition);
}
.legal-content a.cjenik-archive-item:hover {
  border-color: var(--br-accent);
  box-shadow: var(--br-card-shadow-hover);
  transform: translateY(-1px);
}
.cjenik-archive-icon { flex-shrink: 0; font-size: 1.5rem; color: var(--br-accent); }
.cjenik-archive-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cjenik-archive-label { font-weight: 600; font-size: 0.95rem; }
.cjenik-archive-action {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--br-accent-light);
  color: var(--br-accent-dark);
  transition: background var(--br-transition), color var(--br-transition);
}
[data-theme="dark"] .cjenik-archive-action { background: rgba(16,137,255,.14); color: var(--br-accent); }
.cjenik-archive-item:hover .cjenik-archive-action { background: var(--br-accent); color: #fff; }

/* Placeholders (loading / error) */
.cjenik-placeholder {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px;
  background: var(--br-bg-soft);
  border: 1px dashed var(--br-border);
  border-radius: var(--br-radius);
}
.cjenik-placeholder > i {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--br-card-bg);
  border: 1px solid var(--br-border);
  color: var(--br-text-muted);
  font-size: 1.15rem;
}
.cjenik-placeholder--pending { border-color: var(--br-accent); }
.cjenik-placeholder--pending > i { background: var(--br-accent-light); border-color: transparent; color: var(--br-accent-dark); }
[data-theme="dark"] .cjenik-placeholder--pending > i { background: rgba(16,137,255,.14); color: var(--br-accent); }
.legal-content .cjenik-placeholder-title { font-weight: 600; color: var(--br-text-primary); margin: 2px 0 4px; line-height: 1.4; }
.legal-content .cjenik-placeholder-body { margin: 0; font-size: 0.93rem; line-height: 1.6; }

/* Phones */
@media (max-width: 575.98px) {
  .cjenik-current { padding: 20px 18px; }
  .cjenik-actions { width: 100%; }
  .cjenik-actions .cjenik-btn { flex: 1 1 auto; justify-content: center; }
  .cjenik-placeholder { padding: 18px; }
}

/* keep hidden states hidden even if Bootstrap's reboot fails to load */
#cjenik-app [hidden], #cjenik-archive [hidden] { display: none !important; }


/* ================================================================
   V2 — Brodska oprema placeholder + Our Brands desktop redesign
   ================================================================ */

/* ── Our Brands: desktop redesign ────────────────────────────────
   Only the image sits on the card. Description and button sit
   below it, directly on the section background.
   Mobile (<768px) is unchanged — style.css already hides the body
   there and makes the image the tappable card. */
@media (min-width: 768px) {
  .brand-showcase-card,
  .brand-showcase-card:hover {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
  }

  /* The image is now the card */
  .brand-showcase-card .brand-showcase-media {
    border: 1px solid var(--br-border);
    border-radius: var(--br-radius-lg);
    overflow: hidden;
    box-shadow: var(--br-card-shadow);
    transition: box-shadow var(--br-transition), transform var(--br-transition), border-color var(--br-transition);
  }
  .brand-showcase-card .brand-showcase-media img {
    transition: transform 0.6s ease;
  }
  .brand-showcase-card a.brand-showcase-media:hover {
    box-shadow: var(--br-card-shadow-hover);
    border-color: var(--br-accent);
    transform: translateY(-3px);
  }
  .brand-showcase-card a.brand-showcase-media:hover img,
  .brand-showcase-card:hover a.brand-showcase-media:hover img { transform: scale(1.04); }

  /* Text + button below the card, aligned to the image edge */
  .brand-showcase-card .boat-brand-card-body,
  .brand-showcase-card-lg .boat-brand-card-body {
    background: transparent;
    padding: 20px 4px 0;
  }
  .brand-showcase-card .boat-brand-card-desc { margin-bottom: 18px; }

  /* More air between rows now that the text sits outside the cards */
  .brand-showcase-grid { --bs-gutter-y: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-showcase-card a.brand-showcase-media,
  .brand-showcase-card a.brand-showcase-media:hover,
  .brand-showcase-card a.brand-showcase-media:hover img { transform: none; }
}

/* Nav now has five links — tighten it on small desktops so the
   logo and the enquiry button don't get squeezed (992–1199px) */
.br-nav-cta { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .br-nav-links a { padding: 7px 9px; font-size: 0.84rem; }
  .br-nav-cta { margin-left: 6px; }
}

/* ================================================================
   ABOUT US — sits above "Brendovi plovila" on the homepages
   (bullets reuse .brand-bullets-row from the brands section)
================================================================ */
.about-section { border-top: 1px solid var(--br-border); }
.about-lead, .about-text { max-width: 780px; margin-left: auto; margin-right: auto; }
.about-lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--br-text-primary);
  margin-bottom: 14px;
}
.about-text {
  line-height: 1.7;
  color: var(--br-text-secondary);
  margin-bottom: 0;
}
.about-lead strong, .about-text strong { color: var(--br-text-primary); font-weight: 600; }
.about-bullets { margin-top: 26px; }

/* Mobile: always one bullet per line, as a left-aligned list
   centred under the text (prevents short items pairing up on one row) */
@media (max-width: 767px) {
  .brand-bullets-row.about-bullets {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

/* Brand overview text block on brand pages (below the model cards) */
.brand-about { margin-top: 56px; }
.brand-about a.btn-br-primary { text-decoration: none; margin-top: 8px; }

/* Hero: keep a minimum gap between the hero cards and the blue band below,
   even when the hero content is taller than the screen (laptops, long headings).
   Phones (<576px) already get 28px from .hero-cards-row padding. */
@media (min-width: 576px) {
  #hero { padding-bottom: 16px; }
}

/* ===================================================================
   WhatsApp floating button (bottom-right, on every page)
   Number is set in each page's <a class="whatsapp-widget" href="...">
   =================================================================== */
.whatsapp-widget {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1010; /* above page content, below the nav (1030), mobile menu (1020) and modals (2000) */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.whatsapp-widget:hover,
.whatsapp-widget:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  color: #fff;
}
.whatsapp-widget:focus-visible {
  outline: 3px solid #128C7E;
  outline-offset: 3px;
}
.whatsapp-widget svg {
  width: 34px;
  height: 34px;
  display: block;
  fill: currentColor;
}
@media (max-width: 767px) {
  .whatsapp-widget { width: 54px; height: 54px; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .whatsapp-widget svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-widget { transition: none; }
}
@media print {
  .whatsapp-widget { display: none; }
}