.elementor-kit-6{--e-global-color-primary:#1B2F45;--e-global-color-secondary:#3A5F82;--e-global-color-text:#1B2F45;--e-global-color-accent:#F28A1A;--e-global-color-e967624:#F7FAFD;--e-global-color-883294e:#FFFFFFB3;--e-global-color-14694ae:#FFFFFFD9;--e-global-color-c24bc0b:#1B2F451F;--e-global-color-bda358d:#1B2F452E;--e-global-color-b4df499:#1B2F452E;--e-global-color-f0675ff:#2C6FB7;--e-global-color-31edbae:#2DBE7E;--e-global-color-d438822:#E6B84E;--e-global-color-8ece54d:#E14B4B;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   BELUGA — GLOBAL THEME FOUNDATION (CLEAN v1)
   Fonts: Inter Tight (headings) + Inter (body)
   Colours: blueprint navy + beluga orange
   Notes:
   - Fixed: correct domain beluga.camera
   - Fixed: Elementor headings default = light (dark theme)
   - Added: safe fallbacks (color-mix + glass blur)
   - Added: optional status tokens (can delete if unused)
   - Added: utility .b-h-dark (opt-in dark headings on light sections)
========================================================= */

/* =========================================================
   BELUGA — THEME TOKENS (LIGHT / BLUEPRINT)
   Calibrated for white / blueprint background
========================================================= */

/* =========================================================
   BELUGA — THEME TOKENS (LIGHT / BLUEPRINT — FINAL)
   Titles calibrated to blueprint dark blue
========================================================= */

:root{
  /* Brand / Blueprint core */
  --b-primary:   #16324D;  /* Blueprint dark blue (HEADINGS) */
  --b-secondary: #3A5F82;  /* Blueprint steel blue */
  --b-accent:    #F28A1A;  /* Beluga Orange */

  /* Backgrounds */
  --b-bg:        #F7FAFD;  /* Blueprint white */
  --b-stage:     #EEF3F8;  /* Light stage */

  /* Text */
  --b-ink:       #1B2F45;  /* Main text / headings (NOT black) */
  --b-ink-muted: rgba(27,47,69,.72);
  --b-ink-dim:   rgba(27,47,69,.56);

  /* Surfaces (glass on light bg) */
  --b-glass:        rgba(255,255,255,.70);
  --b-glass-strong: rgba(255,255,255,.85);

  /* Lines */
  --b-line:        rgba(27,47,69,.12);
  --b-line-strong: rgba(27,47,69,.18);

  /* Links */
  --b-link:     #2C6FB7;
  --b-link-hov: #1F4F8C;

  /* Shadows (natural on light bg) */
  --b-shadow:    0 22px 60px rgba(27,47,69,.18);
  --b-shadow-sm: 0 12px 32px rgba(27,47,69,.14);

  /* Radius + spacing */
  --b-radius:    22px;
  --b-radius-sm: 16px;
  --b-gap:       clamp(12px, 1.6vw, 18px);

  /* Optional status */
  --b-success: #2DBE7E;
  --b-warning: #E6B84E;
  --b-danger:  #E14B4B;

  /* Page width (match your existing tokens) */
  --fn-max: 1280px;
  --fn-pad-x: clamp(16px, 3.2vw, 40px);
}

/* ---------- 2) BASE ---------- */
html{ -webkit-text-size-adjust: 100%; }

body{
  background: var(--b-bg);
  color: var(--b-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* ---------- FIXED BLUEPRINT BACKGROUND (NO SCROLL) ---------- */
body::before{
  content:"";
  position: fixed;
  inset: 0;

  background-image: url('https://beluga.camera/wp-content/uploads/2026/01/beluga_blueprint_background.webp');
  background-position: center top;
  background-size: 1200px auto;
  background-repeat: repeat;

  background-attachment: fixed; /* 🔒 force no scroll */
  opacity: .28;

  pointer-events: none;
  z-index: -1;

  /* Prevent GPU jitter on scroll */
  transform: translateZ(0);
  will-change: transform;
}

@media (max-width: 1024px){
  body::before{
    background-attachment: scroll;
    opacity: .18; /* plus léger sur mobile */
  }
}


/* ---------- 3) TYPO SYSTEM (H1–H6 + paragraphs) ---------- */
h1,h2,h3,h4,h5,h6{
  color: var(--b-ink);
  font-family: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 .55em 0;
  text-shadow: 0 14px 40px rgba(0,0,0,.25);
}

h1{ font-size: clamp(34px, 4.2vw, 56px); font-weight: 860; }
h2{ font-size: clamp(26px, 3.2vw, 40px); font-weight: 840; }
h3{ font-size: clamp(20px, 2.2vw, 28px); font-weight: 820; }
h4{ font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; letter-spacing: -0.02em; }
h5{ font-size: clamp(16px, 1.5vw, 18px); font-weight: 780; letter-spacing: -0.015em; }
h6{
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b-ink-muted);
  text-shadow: none;
}

p{
  margin: 0 0 1em 0;
  color: var(--b-ink-muted);
  font-size: clamp(15px, 1.1vw, 17px);
  max-width: 75ch;
}

/* Accent underline (safe fallback + progressive enhancement) */
.b-underline{
  position: relative;
  padding-bottom: 10px;
}
.b-underline::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--b-accent);
  box-shadow: 0 0 0 3px rgba(242,138,26,.14);
}
@supports (background: color-mix(in srgb, red 50%, white 50%)){
  .b-underline::after{
    background: color-mix(in srgb, var(--b-accent) 80%, #ffffff 20%);
  }
}

/* ---------- 4) LINKS ---------- */
a{
  color: var(--b-link);
  text-decoration: none;
}
a:hover{
  color: var(--b-link-hov);
  text-decoration: underline;
}

/* ---------- 5) GLOBAL “GLASS CARD” UTILITY ---------- */
.b-glass{
  border-radius: var(--b-radius);
  border: 1px solid var(--b-line);
  box-shadow: var(--b-shadow);

  /* Safe fallback (when blur isn't supported) */
  background: rgba(255,255,255,.07);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .b-glass{
    background: var(--b-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* Slightly stronger glass (optional) */
.b-glass--strong{
  border-radius: var(--b-radius);
  border: 1px solid var(--b-line-strong);
  box-shadow: var(--b-shadow);
  background: rgba(255,255,255,.10);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .b-glass--strong{
    background: var(--b-glass-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* ---------- 6) BUTTONS (Elementor + utility) ---------- */
.elementor a.elementor-button,
a.b-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 18px;
  border-radius: 16px;

  background: var(--b-accent);
  color: #0B1620 !important;
  font-weight: 820;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;

  box-shadow: 0 18px 50px rgba(242,138,26,.18);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none !important;

  transition: transform .15s ease, filter .15s ease;
}

.elementor a.elementor-button:hover,
a.b-btn:hover{
  filter: brightness(1.03) saturate(1.03);
  transform: translateY(-1px);
}

/* Secondary / outline button */
a.b-btn--ghost{
  background: transparent;
  color: var(--b-ink) !important;
  border: 1px solid var(--b-line-strong);
  box-shadow: none;
}
a.b-btn--ghost:hover{
  background: rgba(255,255,255,.06);
}

/* ---------- 7) FORMS (clean, readable on glass) ---------- */
input, textarea, select{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--b-ink);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(242,138,26,.55);
  box-shadow: 0 0 0 4px rgba(242,138,26,.16);
}

/* ---------- 8) SMALL SAFETY NETS (Elementor inherits weird stuff sometimes) ---------- */
.elementor-heading-title{ color: inherit; }
.elementor-widget-text-editor,
.elementor-text-editor{
  color: var(--b-ink-muted);
}

/* =========================================================
   ELEMENTOR — GLOBAL HEADING SYSTEM (BELUGA)
   Philosophy:
   - Theme is dark: headings default to light for contrast.
   - Opt-in dark headings for light sections using .b-h-dark
========================================================= */

/* ---------- BASE HEADING STYLE (Elementor) ---------- */
.elementor-widget-heading .elementor-heading-title{
  color: var(--b-ink) !important; /* DEFAULT: light for dark theme */
  font-family: "Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
  margin: 0 !important;
}

/* ---------- SIZE + WEIGHT BY TAG ---------- */
.elementor-widget-heading .elementor-heading-title:is(h1){
  font-size: clamp(34px, 4.2vw, 56px) !important;
  font-weight: 860 !important;
}

.elementor-widget-heading .elementor-heading-title:is(h2){
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 840 !important;
}

.elementor-widget-heading .elementor-heading-title:is(h3){
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 820 !important;
}

.elementor-widget-heading .elementor-heading-title:is(h4){
  font-size: clamp(18px, 1.8vw, 22px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.elementor-widget-heading .elementor-heading-title:is(h5){
  font-size: clamp(16px, 1.5vw, 18px) !important;
  font-weight: 780 !important;
  letter-spacing: -0.015em !important;
}

.elementor-widget-heading .elementor-heading-title:is(h6){
  font-size: 14px !important;
  font-weight: 760 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--b-ink-muted) !important;
  text-shadow: none !important;
}

/* =========================================================
   BELUGA — HEADING COLOUR VARIANTS
   Use as CSS Classes on the Heading widget (wrapper)
========================================================= */

/* Neutral variants */
.b-h-muted  .elementor-heading-title{ color: var(--b-ink-muted) !important; }
.b-h-dim    .elementor-heading-title{ color: var(--b-ink-dim) !important; }

/* Brand / editorial */
.b-h-accent .elementor-heading-title{ color: var(--b-accent) !important; }
.b-h-link   .elementor-heading-title{ color: var(--b-link) !important; }

/* Opt-in dark heading on light backgrounds */
.b-h-dark   .elementor-heading-title{
  color: var(--b-primary) !important;
  text-shadow: none !important;
}

/* Status (optional) */
.b-h-success .elementor-heading-title{ color: var(--b-success) !important; }
.b-h-warning .elementor-heading-title{ color: var(--b-warning) !important; }
.b-h-danger  .elementor-heading-title{ color: var(--b-danger) !important; }

/* =========================================================
   BELUGA — TON-SUR-TON EMBOSS UTILITY (subtle premium)
   Use on micro labels, small headings, or signature text
========================================================= */
.b-emboss{
  color: rgba(255,255,255,.72);
  text-shadow:
    0 1px 0 rgba(255,255,255,.08),
    0 -1px 0 rgba(0,0,0,.35),
    0 18px 50px rgba(0,0,0,.35);
}

/* =========================================================
   BELUGA — BOOKING CALENDAR (wpdevelop) — PRO SKIN v1
   Usage:
   - Put your calendar inside a container/section with class: b-cal
   - Optional: add b-cal--admin on /dispatch page wrapper
========================================================= */

/* Wrapper */
.b-cal{
  --cal-day: 44px;
  --cal-gap: 8px;
  --cal-radius: 14px;
}

/* Common plugin wrappers (wpdevelop varies by view) */
.b-cal .wpbc_structure,
.b-cal .booking_form_div,
.b-cal .wpbc_container,
.b-cal .wpbc_calendar_wrap,
.b-cal .wpbc_calendar,
.b-cal .wpbc_calendar table{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--b-ink) !important;
}

/* Calendar outer card */
.b-cal .wpbc_structure,
.b-cal .wpbc_calendar_wrap{
  border: 1px solid var(--b-line) !important;
  border-radius: var(--b-radius) !important;
  box-shadow: var(--b-shadow-sm) !important;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .b-cal .wpbc_structure,
  .b-cal .wpbc_calendar_wrap{
    background: var(--b-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* Top header / month bar (varies by plugin skin) */
.b-cal .wpbc_calendar *[class*="wpbc_header"],
.b-cal .wpbc_calendar *[class*="calendar_header"],
.b-cal .wpbc_calendar .wpbc_month,
.b-cal .wpbc_calendar .wpbc_calendar_header{
  background: rgba(0,0,0,.18) !important;
  border-bottom: 1px solid var(--b-line) !important;
}

/* Month title */
.b-cal .wpbc_calendar *[class*="month"],
.b-cal .wpbc_calendar *[class*="title"]{
  font-family: "Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  letter-spacing: -0.02em !important;
  font-weight: 840 !important;
  color: var(--b-ink) !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}

/* Navigation buttons (prev/next) */
.b-cal a[class*="prev"],
.b-cal a[class*="next"],
.b-cal button[class*="prev"],
.b-cal button[class*="next"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px;
  height: 38px;
  border-radius: 12px !important;
  border: 1px solid var(--b-line-strong) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--b-ink) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.b-cal a[class*="prev"]:hover,
.b-cal a[class*="next"]:hover,
.b-cal button[class*="prev"]:hover,
.b-cal button[class*="next"]:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(242,138,26,.45) !important;
  transform: translateY(-1px);
}

/* Calendar grid/table */
.b-cal table{
  border-collapse: separate !important;
  border-spacing: var(--cal-gap) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px !important;
}

/* Weekday labels */
.b-cal th,
.b-cal .wpbc_weekday,
.b-cal *[class*="weekday"]{
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--b-ink-muted) !important;
  font-weight: 760 !important;
  padding: 6px 4px !important;
  background: transparent !important;
  border: 0 !important;
}

/* Day cells (generic targets) */
.b-cal td,
.b-cal td *{
  box-sizing: border-box;
}
.b-cal td{
  height: var(--cal-day);
  border-radius: var(--cal-radius) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.16) !important;
  color: var(--b-ink) !important;
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
}

/* Day number */
.b-cal td .datepick-date,
.b-cal td .wpbc_day_num,
.b-cal td .day_num,
.b-cal td a{
  color: var(--b-ink) !important;
  font-weight: 720 !important;
  text-decoration: none !important;
}

/* Hover (only for selectable days) */
.b-cal td:hover{
  border-color: rgba(242,138,26,.45) !important;
  background: rgba(255,255,255,.08) !important;
  transform: translateY(-1px);
}

/* Today highlight (if plugin marks it) */
.b-cal td.today,
.b-cal td.wpbc_today,
.b-cal td[class*="today"]{
  border-color: rgba(155,212,255,.45) !important;
  box-shadow: 0 0 0 4px rgba(155,212,255,.10);
}

/* ===========================================
   Availability colors (wpdevelop common classes)
   Note: class names vary by skin, so we cover ranges.
=========================================== */

/* Unavailable / booked */
.b-cal td.booked,
.b-cal td.wpbc_booked,
.b-cal td[class*="booked"],
.b-cal td[class*="unavailable"],
.b-cal td[class*="date_approved"],
.b-cal td[class*="busy"]{
  background: rgba(255,90,95,.12) !important;
  border-color: rgba(255,90,95,.35) !important;
  color: rgba(234,240,246,.62) !important;
  filter: saturate(.95);
}
.b-cal td.booked:hover,
.b-cal td.wpbc_booked:hover,
.b-cal td[class*="booked"]:hover,
.b-cal td[class*="unavailable"]:hover,
.b-cal td[class*="date_approved"]:hover,
.b-cal td[class*="busy"]:hover{
  transform: none;
  border-color: rgba(255,90,95,.45) !important;
}

/* Available / free */
.b-cal td.available,
.b-cal td.wpbc_available,
.b-cal td[class*="available"],
.b-cal td[class*="free"]{
  background: rgba(61,220,151,.08) !important;
  border-color: rgba(61,220,151,.22) !important;
}

/* Selection range (when selecting start/end) */
.b-cal td.selected,
.b-cal td.wpbc_selected,
.b-cal td[class*="selected"],
.b-cal td[class*="datepick-days-cell-selected"]{
  background: rgba(242,138,26,.16) !important;
  border-color: rgba(242,138,26,.50) !important;
  box-shadow: 0 0 0 4px rgba(242,138,26,.14);
}

/* Disabled days (past / blocked by rules) */
.b-cal td.disabled,
.b-cal td.wpbc_disabled,
.b-cal td[class*="disabled"],
.b-cal td[class*="unselectable"]{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(234,240,246,.40) !important;
  filter: grayscale(.35);
}

/* ===========================================
   Legend pills (you can create your own legend HTML)
=========================================== */
.b-cal .b-cal-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding: 14px 16px 2px 16px;
}
.b-cal .b-cal-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--b-line);
  background: rgba(255,255,255,.06);
  color: var(--b-ink-muted);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.b-cal .b-cal-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
}
.b-cal .b-cal-dot--free{ background: rgba(61,220,151,.55); border-color: rgba(61,220,151,.75); }
.b-cal .b-cal-dot--busy{ background: rgba(255,90,95,.55); border-color: rgba(255,90,95,.75); }
.b-cal .b-cal-dot--hold{ background: rgba(242,138,26,.70); border-color: rgba(242,138,26,.85); }

/* ===========================================
   Optional: Admin/dispatch polish
=========================================== */
.b-cal--admin .wpbc_structure,
.b-cal--admin .wpbc_calendar_wrap{
  border-color: var(--b-line-strong) !important;
}
.b-cal--admin table{
  padding: 16px !important;
}

/* Mobile spacing */
@media (max-width: 640px){
  .b-cal{ --cal-day: 40px; --cal-gap: 6px; }
  .b-cal table{ padding: 12px !important; }
}

/* =========================================================
   BELUGA — BACKGROUND SLIDESHOW (BOXED)
   Aspect ratio: 7:5
   Layout: boxed (site width, NOT fullscreen)
   Compatible: Elementor background / slideshow / video
   Usage (Elementor container classes):
   - b-ratio-7x5 b-boxed
========================================================= */

/* ---------------------------------------------------------
   Core ratio container (7:5)
--------------------------------------------------------- */
.b-ratio-7x5{
  position: relative;
  width: 80%;
  aspect-ratio: 7 / 5;
  overflow: hidden;

  /* Background safety */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 7 / 5){
  .b-ratio-7x5::before{
    content: "";
    display: block;
    padding-top: calc(5 / 7 * 80%); /* ≈ 71.43% */
  }
}

/* ---------------------------------------------------------
   BOXED WIDTH (aligned with site grid)
--------------------------------------------------------- */
.b-ratio-7x5.b-boxed{
  max-width: var(--fn-max, 1000px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fn-pad-x, 24px);
  padding-right: var(--fn-pad-x, 24px);
}

/* ---------------------------------------------------------
   Elementor background layers safety
--------------------------------------------------------- */
.b-ratio-7x5 > .elementor-background-overlay,
.b-ratio-7x5 > .elementor-background-slideshow,
.b-ratio-7x5 > .elementor-background-video-container{
  position: absolute !important;
  inset: 0;
}

/* Ensure slideshow images behave correctly */
.b-ratio-7x5 .elementor-background-slideshow__slide,
.b-ratio-7x5 .elementor-background-slideshow__slide__image{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Mobile safety
--------------------------------------------------------- */
@media (max-width: 640px){
  .b-ratio-7x5.b-boxed{
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------------------------------------------------------
   Optional cinematic mask (disabled by default)
--------------------------------------------------------- */
/*
.b-ratio-7x5::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.25),
    rgba(0,0,0,.15) 30%,
    rgba(0,0,0,.45)
  );
}
*/

/* =========================================================
   BELUGA — FOOTER (HORIZONTAL · MINIMAL)
   Left: menu / info
   Right: image
   Layout: boxed, non-fullscreen
========================================================= */

/* -------------------------------
   FOOTER TOP (MAIN)
-------------------------------- */
.b-footer-top{
  max-width: var(--fn-max, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding: 28px var(--fn-pad-x, 24px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;

  color: var(--b-ink-muted);
  font-size: 13px;
}

/* -------------------------------
   LEFT COLUMN — MENU / INFO
-------------------------------- */
.b-footer-left{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 60%;
}

.b-footer-left a{
  color: var(--b-link);
  text-decoration: none;
}
.b-footer-left a:hover{
  text-decoration: underline;
}

/* -------------------------------
   RIGHT COLUMN — IMAGE
-------------------------------- */
.b-footer-right{
  flex: 0 0 auto;
  width: 220px;
  height: 140px;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  opacity: .85;
}

/* If you use an <img> widget instead of background */
.b-footer-right img{
  max-width: 100%;
  height: auto;
  display: block;
  opacity: .85;
}

/* -------------------------------
   RESPONSIVE
-------------------------------- */
@media (max-width: 768px){
  .b-footer-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .b-footer-left{
    max-width: 100%;
  }

  .b-footer-right{
    width: 180px;
    height: 110px;
  }
}

/* =========================================================
   BELUGA — FOOTER BOTTOM
   Full width · Edge-to-edge · Centered
========================================================= */

.b-footer-bottom{
  position: relative;

  width: 100vw;
  margin-left: calc(50% - 50vw); /* force full width even in boxed layouts */

  padding: 14px 16px; /* small horizontal padding for safety */

  background-color: #050B11; /* very dark blue-black */

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  font-size: 12px;
  line-height: 1.5;

  color: rgba(159, 161, 163, 1);
  letter-spacing: 0.08em;
  text-transform: uppercase;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   BELUGA — LOOP CARD (What’s inside) — V2 RESPONSIVE
   Works with: Container background = Featured Image (Dynamic)
   Structure: Container (.b-loop-card)
              - Heading widget (.b-loop-title)
              - Text Editor (.b-loop-line)
========================================================= */

/* ---------- 0) REQUIRED: apply class to the Loop Item container ---------- */
/* Elementor: Container > Advanced > CSS Classes: b-loop-card
             Heading widget wrapper: b-loop-title
             Text Editor widget wrapper: b-loop-line
*/

/* ---------- 1) BASE CARD ---------- */
.b-loop-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--b-radius, 22px);
  border: 1px solid rgba(27,47,69,.14);
  box-shadow: var(--b-shadow-sm, 0 12px 32px rgba(27,47,69,.14));

  /* Prevent weird height growth */
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  /* Safe spacing */
  padding: 16px;

  /* Background safety (in case Elementor outputs background styles) */
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;

  /* Prevent GPU / overlay glitches */
  transform: translateZ(0);
}

/* ---------- 2) RESPONSIVE HEIGHTS (key for consistent cards) ---------- */
/* Desktop */
@media (min-width: 1025px){
  .b-loop-card{ min-height: 520px; padding: 18px; }
}
/* iPad / Tablet */
@media (max-width: 1024px){
  .b-loop-card{ min-height: 460px; padding: 16px; }
}
/* Phone */
@media (max-width: 640px){
  .b-loop-card{ min-height: 420px; padding: 14px; border-radius: 18px; }
}

/* ---------- 3) OVERLAY (stable everywhere) ---------- */
/* This ensures readability regardless of image brightness */
.b-loop-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(11,22,32,.55) 0%,
      rgba(11,22,32,.18) 35%,
      rgba(11,22,32,.12) 55%,
      rgba(11,22,32,.62) 100%
    );
  pointer-events:none;
  z-index: 0;
}

/* Optional: subtle vignette for premium look */
.b-loop-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events:none;
  z-index: 0;
  border-radius: inherit;
}

/* ---------- 4) ENSURE CONTENT IS ABOVE OVERLAY ---------- */
.b-loop-card > *{
  position: relative;
  z-index: 2;
}

/* Elementor sometimes wraps children; keep them from adding weird height */
.b-loop-card .elementor-widget-wrap,
.b-loop-card .elementor-element{
  min-height: 0;
}

/* ---------- 5) TITLE (top) ---------- */
.b-loop-title .elementor-heading-title{
  color: rgba(247,250,253,.98) !important;
  text-shadow: 0 18px 45px rgba(0,0,0,.35);
  margin: 0 !important;

  /* Keep title tight */
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

/* Slightly smaller on phones */
@media (max-width: 640px){
  .b-loop-title .elementor-heading-title{
    font-size: 18px !important;
  }
}

/* ---------- 6) DESCRIPTION (bottom) ---------- */
.b-loop-line{
  color: rgba(247,250,253,.82);
  font-size: 14px;
  line-height: 1.35;
  max-width: 42ch;

  /* Clamp to prevent card stretching */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Phone: slightly tighter */
@media (max-width: 640px){
  .b-loop-line{
    font-size: 13.5px;
    -webkit-line-clamp: 4;
  }
}

/* ---------- 7) OPTIONAL: Bottom “content plate” (makes text pop) ---------- */
/* Add class to Text Editor widget: b-loop-plate (optional) */
.b-loop-plate{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- 8) HOVER (desktop only) ---------- */
@media (hover:hover) and (pointer:fine){
  .b-loop-card{
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  }
  .b-loop-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 24px 70px rgba(27,47,69,.22);
    filter: saturate(1.02) contrast(1.02);
  }
}

/* ---------- 9) QUICK DEBUG (optional) ---------- */
/* If you ever see white gaps or odd spacing, uncomment this:
.b-loop-card *{ outline: 1px dashed rgba(255,0,0,.25); }
*/

/* =========================================================
   BELUGA — AVAILABILITY RIGHT BLOCK
   Blueprint background + color overlay
========================================================= */

.b-availability-right{
  position: relative;
  overflow: hidden;

  /* layout */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  padding: clamp(32px, 4vw, 56px);

  /* text defaults */
  color: #0B1620; /* Beluga Navy */
}

/* -----------------------------------------
   COLOR OVERLAY (NO GRADIENT, NO IMAGE)
------------------------------------------ */
.b-availability-right::before{
  content: "";
  position: absolute;
  inset: 0;

  /* Light cold overlay — neutral + tech */
  background-color: rgba(248, 251, 255, 0.88);

  z-index: 1;
}

/* -----------------------------------------
   CONTENT ABOVE OVERLAY
------------------------------------------ */
.b-availability-right > *{
  position: relative;
  z-index: 2;
}

.b-availability-right .beluga-booking-btn{
  margin-top: 18px;

  background: var(--b-accent);
  color: #fff;

  padding: 14px 24px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.b-availability-right .beluga-booking-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}/* End custom CSS */