/* ============================================================
   RACIO GROUP — Public Theme
   White / Grey / Red · Premium media group · Poppins
   ============================================================ */

:root {
  /* Light theme palette — white backgrounds, dark text, red brand accents. */
  --red: #e60000;
  --red-dark: #b80000;
  --red-soft: rgba(230, 0, 0, 0.08);
  --ink: #ffffff;
  --ink-2: #f7f7f7;
  --ink-3: #efeeee;
  --panel: #ffffff;
  --line: #d8d5d5;
  --line-soft: #ece9e9;
  --text: #1a1a1e;
  --muted: #5b5758;
  --muted-2: #6b6668;      /* light-surface secondary text — 5.6:1 on white */
  --muted-on-dark: #b6b2b3; /* secondary text on the dark header search bar */
  --white: #1a1a1e; /* headings/links (dark text on light background) */
  --radius: 4px;
  --radius-sm: 3px;
  --font-head: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;
  --shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.16);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Spacing scale (marketing density: spacious) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Motion tiers (subtle micro-interaction default) --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant: 120ms;  /* colour / opacity swaps */
  --dur-quick: 200ms;    /* hover + focus states */
  --dur-move: 320ms;     /* position or size changes */
  --dur-enter: 420ms;    /* section reveals */

  /* --- Focus + target tokens --- */
  --focus-ring: #0b57d0;          /* 3:1+ against both the red brand and white */
  --focus-ring-on-dark: #ffffff;
  --focus-width: 3px;
  --focus-offset: 2px;
  --target-min: 44px;             /* iOS 44pt / Android 48dp floor */
  --header-offset: 120px;         /* locked header height, for scroll-padding */

  /* Racio Chat accent. Declared here, not on the float button — the chat panel
     is a sibling of that button, so a scoped value never reached it and every
     var(--rc-blue) inside the panel resolved to nothing. */
  --rc-blue: #2954ff;
}

html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

body {
  font-family: var(--font-body);
  background: linear-gradient(180deg, #fff 0%, #fafafa 52%, #fff 100%);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--white);
}

a { color: var(--white); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--red); }

::selection { background: var(--red); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: #c9c9d0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ---------- Utilities ---------- */
.text-red { color: var(--red) !important; }
.text-muted-2 { color: var(--muted) !important; }
.bg-ink-2 { background: var(--ink-2); }
.bg-ink-3 { background: var(--ink-3); }

/* Force white text in all dark panels */
.bg-ink-2,
.bg-ink-2 h1, .bg-ink-2 h2, .bg-ink-2 h3, .bg-ink-2 h4, .bg-ink-2 h5, .bg-ink-2 h6,
.bg-ink-2 p, .bg-ink-2 li, .bg-ink-2 span, .bg-ink-2 a,
.bg-ink-2 .display-head, .bg-ink-2 .lead-soft,
.bg-ink-2 .section-head, .bg-ink-2 .text-muted-2,
.bg-ink-2 .card-rac, .bg-ink-2 .card-rac * {
  color: #fff !important;
}

.section { padding: 72px 0; position: relative; }
.section-sm { padding: 48px 0; }
.section-head { margin-bottom: 32px; }

.eyebrow {
  display: none !important;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--red);
  display: inline-block;
}

.display-head {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: 18px;
}
.display-head .mark { color: var(--red); }

.lead-soft { color: var(--muted); font-size: 1.06rem; max-width: 640px; }

.btn {
  border-radius: 4px;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 13px 24px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.btn-red {
  background: var(--red);
  border: 1px solid var(--red);
  color: #fff;
}
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-outline-light {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.btn-outline-light:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.btn-white { background: var(--text); color: #fff; border: 1px solid var(--text); }
.btn-white:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }

/* ---------- Announcement bar ---------- */
.announcement {
  background: var(--red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: 0.02em;
}
.announcement a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.announcement a:hover { color: #ffe1e1; }

/* ---------- Navbar ---------- */
.navbar-rac {
  position: relative;
  background: linear-gradient(115deg, rgb(18, 18, 20) 0%, rgb(82, 84, 90) 45%, rgb(22, 22, 25) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #2a282a;
  padding: 0;
  transition: var(--transition);
}
.navbar-rac::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 22%;
  width: 160px;
  height: 130px;
  background: #9a9ca4;
  border-radius: 50px;
  filter: blur(60px);
  opacity: 0.3;
  transform: rotate(12deg);
  z-index: 0;
  pointer-events: none;
}
.navbar-rac::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 2%;
  width: 140px;
  height: 130px;
  background: #9a9ca4;
  border-radius: 45px;
  filter: blur(60px);
  opacity: 0.24;
  transform: rotate(-14deg);
  z-index: 0;
  pointer-events: none;
}
.brand-watermark {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 116px;
  height: 116px;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.navbar-rac .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  flex-shrink: 0;
}
.brand-mark {
  height: 88px;
  width: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
  border-radius: 50%;
  padding: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-mark-sm { height: 64px; }
.navbar-rac .brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.brand-text { line-height: 1.1; }
.brand-text .name { font-family: var(--font-head); font-weight: 800; font-size: 16.5px; letter-spacing: 0.02em; white-space: nowrap; color: #fff; }
.brand-text .sub { font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: #b6b2b3; }

/* Mobile brand text — compact */
@media (max-width: 991.98px) {
  .navbar-rac .brand-text .name { font-size: 13px; letter-spacing: 0.01em; }
  .navbar-rac .brand-text .sub { font-size: 8px; letter-spacing: 0.18em; }
}
@media (max-width: 575.98px) {
  .navbar-rac .brand-text .name { font-size: 11px; }
  .navbar-rac .brand-text .sub { display: none; }
  .nav-mobile-search input { font-size: 12px; }
  .nav-mobile-search { height: 34px; padding: 0 10px; }
}

/* ---------- Logo circle badge (icon-only spots: preloader, avatars) ---------- */
.logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #000;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red);
  overflow: hidden;
  flex-shrink: 0;
}
.logo-badge img { width: 62%; height: auto; object-fit: contain; }
.logo-badge-lg { width: 84px; height: 84px; }
.logo-badge-sm { width: 38px; height: 38px; border-width: 2px; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--red); }

.navbar-rac .container { flex-wrap: nowrap; position: relative; z-index: 1; }
.navbar-rac .nav-link {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  color: #eceaea;
  padding: 24px 9px !important;
  letter-spacing: 0.01em;
  position: relative;
  white-space: nowrap;
}
.navbar-rac .nav-link::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 16px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.navbar-rac .nav-link:hover::after,
.navbar-rac .nav-link.active::after { transform: scaleX(1); }
.navbar-rac .nav-link:hover, .navbar-rac .nav-link.active { color: #fff; }

/* Search icon button in the navbar */
.nav-search-btn {
  height: 42px;
  min-width: 170px;
  padding: 0 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 100px;
  color: #eceaea;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.nav-search-btn:hover,
.nav-search-btn.active {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

/* Mobile menu search button */
.nav-search-btn-mobile {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Long inline search bar in the navbar.
   Hidden by default — the nav also carries the menu, the quote button and the
   social row, and only viewports ≥1600px have room for all of them. Below
   that, .nav-search-icon-btn stands in. */
.nav-search-inline {
  display: none;
  align-items: center;
  gap: 10px;
  height: 42px;
  width: 260px;
  flex-shrink: 0;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.nav-search-inline:focus-within {
  border-color: var(--red);
  background: rgba(255, 255, 255, 0.1);
}
.nav-search-inline i { color: #a9a5a6; font-size: 13px; flex-shrink: 0; }
.nav-search-inline input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13.5px;
}
.nav-search-inline input::placeholder { color: #8c8687; }

/* Inline header search bar */
.header-search {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  padding: 18px 0;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.15);
}
.header-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}
.header-search-icon { color: #666; font-size: 15px; }
.header-search-input {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
  color: #1a1a1e;
  font-size: 15px;
  padding: 8px 2px;
  outline: none;
  transition: border-color .2s ease;
}
.header-search-input::placeholder { color: #999; }
.header-search-input:focus { border-color: #e60000; }
.header-search-submit { flex-shrink: 0; }
.header-search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  background: transparent;
  border: 0;
  color: #666;
  font-size: 16px;
  padding: 6px;
  cursor: pointer;
  transition: color var(--dur-quick) var(--ease-standard);
}
.header-search-close:hover { color: #fff; }
@media (max-width: 991.98px) {
  .header-search-form { max-width: none; }
}

/* Pill button nav item (e.g. Client Reviews) */
.navbar-rac .nav-link.nav-link-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 100px;
  padding: 9px 18px !important;
  margin-left: 10px;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.navbar-rac .nav-link.nav-link-btn::after { display: none; }
.navbar-rac .nav-link.nav-link-btn:hover,
.navbar-rac .nav-link.nav-link-btn.active {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.navbar-rac .navbar-toggler {
  border: none;
  color: #eceaea;
  padding: 8px 4px;
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  position: relative;
  z-index: 10;
  background: transparent;
}
/* Bootstrap's default focus glow is dropped, but never without a replacement —
   the global :focus-visible ring below supplies the indicator. */
.navbar-rac .navbar-toggler:focus { box-shadow: none; }
.navbar-rac .navbar-toggler .fa-bars { display: none; }

/* ── Animated Hamburger Icon ── */
.hamburger-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 20px;
  position: relative;
}
.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: #eceaea;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.hamburger-line:nth-child(1) { top: 2px; }
.hamburger-line:nth-child(2) { top: 9px; }
.hamburger-line:nth-child(3) { top: 16px; }

/* Open state — X morph */
.navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
  background: var(--red);
}
.navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
  background: var(--red);
}
.navbar-toggler[aria-expanded="true"] {
  border-color: transparent;
  background: transparent;
}

/* ── Mobile nav backdrop overlay ── */
.mobile-nav-backdrop {
  display: none;
}
@media (max-width: 991.98px) {
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1029;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .mobile-nav-backdrop.visible {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}

/* ── Mobile menu slide-down animation ── */
@media (max-width: 991.98px) {
  .navbar-collapse.show {
    animation: menuSlideDown 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes menuSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .navbar-nav .nav-item {
    opacity: 0;
    animation: menuItemFadeIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(1) { animation-delay: 0.03s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(2) { animation-delay: 0.05s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(3) { animation-delay: 0.07s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(4) { animation-delay: 0.09s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(5) { animation-delay: 0.11s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(6) { animation-delay: 0.13s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(7) { animation-delay: 0.15s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(8) { animation-delay: 0.17s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(9) { animation-delay: 0.19s; }
  @keyframes menuItemFadeIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
  }
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .navbar-collapse.show { animation: none; }
    .navbar-nav .nav-item { animation: none; opacity: 1; }
  }
}

/* ── Mobile header — compact & polished ── */
@media (max-width: 991.98px) {
  .navbar-rac .container {
    padding-top: 4px;
    padding-bottom: 4px;
    gap: 8px;
  }
  .navbar-rac .navbar-brand {
    padding: 6px 0;
    flex-shrink: 0;
  }

  /* Mobile search bar — fills the space between logo and hamburger */
  .nav-mobile-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    transition: border-color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-mobile-search:focus-within {
    border-color: var(--red);
    background: rgba(255, 255, 255, 0.12);
  }
  .nav-mobile-search i {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    flex-shrink: 0;
  }
  .nav-mobile-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.01em;
  }
  .nav-mobile-search input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
  }

  .nav-actions {
    gap: 6px !important;
    flex-shrink: 0;
  }
  .nav-search-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #4a484a;
    border-radius: 4px;
    color: #eceaea;
    font-size: 14px;
    background: transparent;
    transition: all 0.2s ease;
  }
  .nav-search-icon-btn:hover {
    border-color: var(--red);
    color: var(--red);
  }
}
@media (max-width: 575.98px) {
  .navbar-rac .navbar-brand { padding: 4px 0; }
  .brand-mark { height: 40px; width: 40px; }
  .nav-actions { gap: 4px !important; }
  .nav-search-icon-btn { width: 32px; height: 32px; font-size: 13px; }
  .navbar-toggler { padding: 4px 8px; min-width: 32px; min-height: 32px; }
}

/* ══════ Mobile Bottom Tab Bar ══════ */
.mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: linear-gradient(180deg, rgba(18, 18, 21, 0.97) 0%, rgba(10, 10, 12, 0.99) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid #2a282a;
  padding: 6px 0 env(safe-area-inset-bottom, 4px);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}
.mbb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px 4px;
  text-decoration: none;
  color: #848082;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
  flex: 1;
  min-height: 52px;
  position: relative;
}
.mbb-item i {
  font-size: 18px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.mbb-item span {
  line-height: 1;
}
.mbb-item:hover, .mbb-item.active {
  color: var(--red);
}
.mbb-item:hover i, .mbb-item.active i {
  transform: scale(1.1);
}
.mbb-item.active {
  color: var(--red);
}
.mbb-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--red);
  border-radius: 0 0 2px 2px;
}
@media (max-width: 991.98px) {
  body { padding-bottom: 64px; }
}
@media (max-width: 575.98px) {
  .mobile-bottom-bar { padding: 4px 0 env(safe-area-inset-bottom, 4px); }
  .mbb-item { min-height: 48px; font-size: 9px; }
  .mbb-item i { font-size: 16px; }
}
@media (min-width: 992px) {
  .mobile-bottom-bar { display: none !important; }
}

/* ── Mobile nav menu styling ── */
@media (max-width: 991.98px) {
  .navbar-collapse {
    display: none;
    background: #1a1a1e;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 !important;
    padding: 8px 0 4px !important;
    border-radius: 0;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5);
  }
  .navbar-collapse.show {
    display: block;
  }
  .navbar-collapse.show::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a1a1e;
    z-index: -1;
  }
  .navbar-collapse.show {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navbar-nav {
    padding: 0 12px !important;
    margin: 0 !important;
    width: 100%;
    flex-direction: column;
    gap: 1px;
  }
  .navbar-nav .nav-item {
    margin: 0 !important;
    width: 100%;
  }
  .navbar-nav .nav-link {
    padding: 10px 14px !important;
    min-height: 40px;
    display: flex !important;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.15s ease, transform 0.15s ease;
    text-align: left;
    letter-spacing: 0.02em;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .navbar-nav .nav-link:active {
    transform: scale(0.98);
  }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  .navbar-nav .nav-link.active {
    background: var(--red);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(230, 0, 0, 0.35);
  }
  .navbar-nav .nav-link.active:active {
    background: var(--red-dark);
  }
  .navbar-nav .nav-link.active::after { display: none; }

  /* Bottom CTA / social section inside the collapse */
  .navbar-collapse .d-lg-none {
    padding: 12px 12px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4px !important;
  }
  .navbar-collapse .d-lg-none .d-flex {
    gap: 10px !important;
  }
  .navbar-collapse .d-lg-none .btn-red {
    background: var(--red) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    min-height: 44px;
    box-shadow: 0 4px 12px rgba(230, 0, 0, 0.3);
    font-size: 14px;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .navbar-collapse .d-lg-none .btn-red:active {
    transform: scale(0.97);
  }
  .navbar-collapse .d-lg-none .nav-socials-mobile {
    margin-top: 12px !important;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  .navbar-collapse .d-lg-none .nav-socials-mobile li a {
    color: #ffffff !important;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 17px;
    transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .navbar-collapse .d-lg-none .nav-socials-mobile li a:hover,
  .navbar-collapse .d-lg-none .nav-socials-mobile li a:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.08);
  }
}

/* Mega menu */
.mega-wrap { position: static !important; }
.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(18, 18, 21, 0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #3a383a;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
  padding: 32px 0 20px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: all 0.28s ease;
  z-index: 1040;
}
.mega-wrap:hover .mega-menu,
.mega-wrap:focus-within .mega-menu { visibility: visible; opacity: 1; transform: translateY(0); }
.mega-title {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mega-title::after { content: ""; height: 1px; background: #3a383a; flex: 1; }
.mega-link {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 13px 16px;
  border-radius: 4px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  transition: var(--transition);
}
.mega-link .m-icon { display: none; }
/* Default colours assume a LIGHT surface (the About page reuses .mega-link
   inside a light card). The dark navbar dropdown re-states them below. */
.mega-link:hover { background: var(--ink-3); border-color: var(--line); }
.mega-link .m-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--text); }
.mega-link .m-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.mega-link .m-tag { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }

/* Dark surface: the navbar mega-menu. */
.mega-menu .mega-link:hover { background: #232226; border-color: #3a383a; }
.mega-menu .mega-link .m-name { color: #fff; }
.mega-menu .mega-link .m-desc { color: #b6b2b3; }
.mega-menu .mega-link .m-tag { color: #848082; }
.navbar-rac .btn-outline-light { border-color: #55535a; color: #eceaea; }
.navbar-rac .btn-outline-light:hover { border-color: var(--red); color: #fff; background: var(--red); }
.navbar-rac .btn-red { font-weight: 400; }

/* ---------- Sticky site header + live ticker ---------- */
.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: 1030;
}
.site-header {
  z-index: 1030;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.55);
}
.site-header .marquee {
  transform: none;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
}
.site-header .marquee-track span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.site-header .marquee-track span::after { font-size: 12px; }

@media (max-width: 991.98px) {
  .site-header .marquee { padding: 7px 0; }
  .site-header .marquee-track span { font-size: 12px; letter-spacing: 0.12em; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 56px 0 40px;
  background: var(--ink);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 500px at 82% -10%, rgba(225, 6, 0, 0.22), transparent 60%),
    radial-gradient(700px 500px at -5% 110%, rgba(225, 6, 0, 0.12), transparent 55%),
    #0c0c0e;
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,8,10,0.25), rgba(6,6,8,0.55) 90%); }
.hero-youtube { opacity: 1; }
.hero-youtube iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  border: 0;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; }

.hero .display-head { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.06; }
.hero .display-head.hero-huge { font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.06; }
.hero-type-cursor {
  display: inline-block;
  margin-left: 2px;
  font-weight: 300;
  color: var(--red);
  animation: heroTypeBlink 0.9s steps(2, start) infinite;
}
@keyframes heroTypeBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-type-cursor { animation: none; }
}
.hero .lead-soft { font-size: 1.12rem; max-width: 620px; }
.hero .lead-soft.mx-auto { max-width: 680px; }
.hero .hero-about {
  max-width: 780px;
  margin-top: 14px;
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.5;
}
.hero .hero-about p { margin-bottom: 14px; }
.hero .hero-about p:last-child { margin-bottom: 0; }

.hero-stats {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.hero-stat .num { font-family: var(--font-head); font-size: 2.1rem; font-weight: 800; color: #ffffff; line-height: 1; }
.hero-stat .num small { font-size: 1.2rem; color: var(--red); }
.hero-stat .lbl { font-size: 12.5px; color: #ffffff; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }

/* ---------- Marquee strip ---------- */
.marquee {
  background: var(--red);
  color: #fff;
  overflow: hidden;
  padding: 13px 0;
  transform: rotate(-0.6deg) scale(1.01);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.marquee-track span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 48px;
}
.marquee-track span::after { content: "✕"; font-size: 13px; opacity: 0.6; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Trusted-by client strip ---------- */
.brand-strip-section { padding: 48px 0 44px; border-bottom: 1px solid var(--line-soft); }
.brand-strip-label { text-align: center; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-bottom: 26px; }
.brand-strip { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brand-strip-track { display: flex; align-items: center; gap: 32px; width: max-content; animation: brandScroll 12s linear infinite; }
.brand-strip-track a, .brand-strip-track span { display: flex; align-items: center; height: 64px; flex-shrink: 0; }
.brand-strip-track img { height: 100%; width: auto; max-width: 200px; object-fit: contain; transition: var(--transition); }
@keyframes brandScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Photo divider ---------- */
.photo-divider {
  position: relative;
  padding: 90px 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.photo-divider-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.55)); z-index: 1; }
.photo-divider-text {
  position: relative;
  text-align: center;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: 760px;
}

/* ---------- Cards ---------- */
.card-rac {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  transition: var(--transition);
  height: 100%;
  overflow: hidden;
  position: relative;
}
.card-rac:hover { border-color: var(--line-soft); box-shadow: var(--shadow); }
.card-rac .card-body { padding: 28px; }

/* Dark background for panels (non-homepage) */
.card-rac.card-rac-red-gradient {
  background: #2a282a;
  position: relative;
  overflow: hidden;
}
.card-rac.card-rac-red-gradient::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: rgba(230, 0, 0, 0.15);
  border-radius: 24px;
  transform: rotate(-15deg);
  z-index: 0;
}
.card-rac.card-rac-red-gradient::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background: rgba(107, 102, 104, 0.25);
  border-radius: 20px;
  transform: rotate(-15deg);
  z-index: 0;
}
.card-rac.card-rac-red-gradient > * {
  position: relative;
  z-index: 1;
}

/* Compass cards with background images */
.card-compass-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  min-height: 200px;
}
.card-compass-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card-compass-content {
  position: relative;
  z-index: 1;
  padding: 22px 28px;
  background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.60) 60%, rgba(0,0,0,0.45) 100%);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card-compass-content h4 {
  color: #fff;
}
.card-compass-content p {
  color: rgba(255,255,255,0.85);
}

/* Company cards */
.company-card .c-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 68px;
  height: 68px;
  color: var(--red);
  font-size: 30px;
  margin-bottom: 18px;
}
.company-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.company-card p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.company-card .c-tag {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
}
.company-card .c-link { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--white); display: inline-flex; align-items: center; gap: 8px; }
.company-card .c-link:hover { color: var(--red); }
.company-card .corner-arrow { position: absolute; top: 22px; right: 22px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--muted); transition: var(--transition); }
.company-card:hover .corner-arrow { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(45deg); }

/* Service cards */
.service-card { position: relative; }
.service-card .s-icon,
.card-rac .s-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 24px;
  margin-bottom: 14px;
  border-radius: 4px;
}
.service-card .s-icon i,
.card-rac .s-icon i { color: inherit; }
/* Logo colour rotation for service card icons */
.service-card:nth-child(3n+1) .s-icon { color: #e60000; }
.service-card:nth-child(3n+2) .s-icon { color: #6b6668; }
.service-card:nth-child(3n+3) .s-icon { color: #b6b2b3; }

/* Icons stay off everywhere else — the public experience there uses type, imagery and layout, not generic glyphs. */
.m-icon,
.big-icon,
.sp-icon,
.mega-link .m-icon { display: none !important; }
.service-card h4 { font-size: 1.08rem; margin-bottom: 8px; color: #fff; }
.service-card .c-tag { color: #b6b2b3; }
.service-card p { font-size: 13.5px; color: #b6b2b3; margin-bottom: 14px; }
.service-card .price { font-family: var(--font-head); font-weight: 700; color: var(--red); font-size: 14px; }
.service-card:focus-visible { outline: none; box-shadow: none; }

/* Image-backed service card variant */
.service-card-img {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
}
.service-card-img img { width: 100%; height: 100%; object-fit: cover; }
.service-card-img:hover img { transform: none; }
.service-card-img .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
}
.service-card-img .c-tag { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.service-card-img h4 { color: #fff; font-size: 1.1rem; margin-bottom: 4px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.service-card-img p { color: rgba(255, 255, 255, 0.85); font-size: 13px; margin-bottom: 10px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.service-card-img .price { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 14px; }
.service-card-img .details { color: rgba(255, 255, 255, 0.75); font-size: 12.5px; }

/* ---------- Company hero (individual company pages) ---------- */
.company-hero {
  position: relative;
  padding: 70px 0 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}
.company-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 380px at 80% -20%, rgba(225, 6, 0, 0.18), transparent 60%), var(--ink-2);
}
.company-hero .big-icon { display: none; }
.company-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); position: relative; z-index: 1; }
.company-hero .lead { position: relative; z-index: 1; }

/* ---------- Portfolio grid ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.filter-btn {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  transition: var(--transition);
}
.filter-btn:hover { color: var(--text); border-color: var(--line); }
.filter-btn.active { background: var(--red); border-color: var(--red); color: #fff; }

.work-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--panel);
  border: 1px solid var(--line-soft);
}
.work-card img { width: 100%; height: 100%; object-fit: cover; }
.work-card img.img-broken { object-fit: contain; padding: 24px; opacity: 0.4; filter: grayscale(1); }
/* Project-detail gallery: taller tiles so portrait photos aren't cropped tight. */
.gallery-grid .work-card { aspect-ratio: 4 / 5; }
.work-card:hover img { transform: none; }
.work-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  transition: var(--transition);
}
.work-card .cat { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 4px; }
.work-card h4 { font-size: 1.12rem; margin-bottom: 3px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.work-card .client { font-size: 12.5px; color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.work-card .play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(225, 6, 0, 0.92);
  display: grid; place-items: center;
  font-size: 20px;
  color: #fff;
  opacity: 0;
  transition: var(--transition);
  z-index: 2;
}
.work-card:hover .play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.work-card .play::after { content: ""; position: absolute; inset: -10px; border: 1px solid rgba(225,6,0,0.5); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.25); opacity: 0; } }

/* ---------- Specialty cards ---------- */
.specialty-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.25);
}
.specialty-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.specialty-card:hover img { transform: none; }
.specialty-card .sp-slider {
  position: absolute;
  inset: 0;
  display: flex;
  width: 300%;
  animation: spSlide 12s ease-in-out infinite;
}
.specialty-card .sp-slider img {
  width: 33.3333%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
}
.specialty-card:hover .sp-slider { animation-play-state: paused; }
@keyframes spSlide {
  0%, 24%   { transform: translateX(0); }
  33%, 57%  { transform: translateX(-33.3333%); }
  66%, 90%  { transform: translateX(-66.6667%); }
  100%      { transform: translateX(0); }
}
.specialty-card .sp-video-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.specialty-card .sp-video-frame {
  position: absolute;
  top: 0;
  left: 50%;
  width: 133.334%;
  height: 100%;
  transform: translateX(-50%);
  border: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.specialty-card .sp-video-frame.sp-video-fading { opacity: 0; }
.specialty-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sp-badge {
  position: absolute;
  left: 18px;
  bottom: 60px;
  z-index: 2;
  background: var(--red);
  color: #fff;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
}
.sp-arrow {
  position: absolute;
  right: 18px;
  bottom: 58px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  transition: var(--transition);
}
.specialty-card:hover .sp-arrow { background: var(--red); transform: rotate(-45deg); }
.sp-overlay {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
}
.sp-title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ---------- Live now ---------- */
.live-panel {
  background: var(--ink);
  border: 1px solid #1a1a1e;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 60px -15px rgba(0,0,0,.45);
  position: relative;
}
.live-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
  z-index: 2;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.live-badge .dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: blink 1.2s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.live-frame { position: relative; aspect-ratio: 16/9; background: #0a0a0c; overflow: hidden; }
.live-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-frame .placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: rgba(255,255,255,.25);
  gap: 14px;
}
.live-frame .placeholder i { font-size: 48px; }
.live-frame .placeholder p { font-size: 13px; margin: 0; }

/* ---------- Pricing cards ---------- */
.price-card {
  position: relative;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.25s ease;
}
.price-card:hover { box-shadow: none; transform: none; }
.price-card .p-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 12px;
  margin-top: 16px;
}
.price-card .p-image {
  width: 100%;
  overflow: hidden;
}
.price-card .p-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.price-card .p-divider {
  width: 100%;
  height: 1px;
  background: var(--line-soft);
  margin-bottom: 20px;
}
.price-card .p-price {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  margin: auto 0 20px;
  padding-top: 8px;
}
.price-card .p-price small { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.price-card .p-tagline { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.price-card .p-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: left;
}
/* Indoor / outdoor badge — set per package in the admin, hidden when unset. */
.price-card .p-shoot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 4px 11px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
}
.price-card .p-shoot i { font-size: 11px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; flex: 1; }
.price-card ul li {
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}
.price-card ul li i { color: var(--red); font-size: 11px; margin-top: 3px; flex-shrink: 0; }
.price-card.featured {
  border: none;
  box-shadow: none;
  transform: none;
  z-index: 2;
}
.price-card.featured:hover { box-shadow: none; transform: none; }
.price-card.featured .p-popular {
  display: inline-block;
}
.price-card .p-popular {
  display: none;
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 0;
  z-index: 3;
}
.price-card .p-cta {
  margin-top: auto;
}

/* ---------- Package Contact Bar ---------- */
.pkg-contact-bar {
  display: none;
  width: calc(100% + 56px);
  margin: 20px -28px 0;
  padding: 12px 20px;
  background: var(--red);
  background-size: cover;
  background-position: center;
  position: relative;
}
.pkg-contact-overlay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.pkg-contact-heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.pkg-contact-heading::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: #fff;
  border-radius: 50%;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.pkg-contact-heading::after {
  content: "📞";
  position: absolute;
  left: 28px;
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.pkg-contact-phones {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}
.pkg-contact-phones i {
  margin-right: 6px;
  font-size: 12px;
}
@media (max-width: 575.98px) {
  .pkg-contact-overlay { flex-direction: column; text-align: center; gap: 4px; }
  .pkg-contact-phones { font-size: 12px; }
}

/* ---------- Testimonials ---------- */
.testi-card { 
  background: var(--panel); 
  border: 1px solid var(--line-soft); 
  border-radius: 4px; 
  padding: 40px 34px 34px; 
  height: 100%; 
  position: relative; 
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
}
.testi-card .quote-mark { 
  font-family: Georgia, serif; 
  font-size: 56px; 
  line-height: 0.8; 
  color: var(--red); 
  opacity: 1;
  height: auto;
  margin-bottom: 16px;
}
.testi-card p { 
  color: var(--muted); 
  font-size: 15px; 
  margin: 0 0 24px; 
  line-height: 1.6;
  flex-grow: 1;
}
.testi-card .stars { 
  color: #f5b301; 
  font-size: 14px; 
  letter-spacing: 3px; 
  margin-bottom: 14px;
}
.testi-card .who { 
  font-family: var(--font-head); 
  font-weight: 700; 
  color: var(--text); 
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.testi-card .who small { 
  display: block; 
  color: var(--muted-2); 
  font-size: 12px; 
  font-weight: 400; 
  margin: 0;
  margin-top: 2px;
}
.testi-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-weight: 800;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 18px;
  flex-shrink: 0;
}
/* Icons are never wrapped in a tinted shape — only initials avatars keep the
   filled circle, because there the circle is the avatar. */
.testi-avatar:has(> i) {
  background: transparent;
  border-radius: 0;
  width: auto;
  height: auto;
  place-items: center start;
}
.testi-avatar.dept-icon {
  width: 58px;
  height: 58px;
  color: var(--red);
  font-size: 24px;
}

/* ---------- Client reviews (WhatsApp thread style, in a tablet frame) ---------- */
.reviews-panel {
  background: linear-gradient(180deg, rgba(6, 14, 26, 0.6), rgba(6, 14, 26, 0.78)), url('../img/8e2909f762888a4b5b8a9f4be12184f2.jpg') center/cover no-repeat;
}
.reviews-panel .display-head { color: #fff; }
.reviews-panel .lead-soft { color: rgba(255, 255, 255, 0.75) !important; }
.tablet-frame {
  max-width: 780px;
  margin: 0 auto;
  background: linear-gradient(165deg, #3a3a3d 0%, #18181a 60%, #050505 100%);
  border-radius: 4px;
  padding: 18px 14px;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  position: relative;
}
.tablet-cam {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0a0a0a;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
}
.tablet-screen {
  background: #0b141a;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.tablet-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px 4px;
  color: #e9edef;
  font-size: 12.5px;
  font-weight: 600;
}
.tablet-status-icons { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #e9edef; }
.wa-thread {
  max-width: 100%;
  margin: 0 auto;
  height: 480px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 18px 18px;
  padding: 20px 20px 0;
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
}
.wa-track {
  display: flex;
  flex-direction: column;
  animation: waScroll 55s linear infinite;
}
@keyframes waScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.wa-msg { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.wa-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2a3942;
  color: #8696a0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.wa-bubble {
  position: relative;
  max-width: 78%;
  background: #202c33;
  color: #e9edef;
  border-radius: 0 4px 4px 4px;
  padding: 8px 10px 6px;
}
.wa-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent #202c33 transparent transparent;
}
.wa-sender { display: block; font-family: var(--font-head); font-weight: 700; font-size: 13px; margin-bottom: 2px; color: #e17055; }
.wa-color-0 .wa-sender { color: #f5a623; }
.wa-color-1 .wa-sender { color: #53bdeb; }
.wa-color-2 .wa-sender { color: #e17055; }
.wa-color-3 .wa-sender { color: #a695f2; }
.wa-color-4 .wa-sender { color: #6ad19a; }
.wa-text { margin: 0; font-size: 14px; line-height: 1.5; color: #e9edef; }
.wa-time { display: block; text-align: right; font-size: 11px; color: #8696a0; margin-top: 2px; }

/* ---------- Blog cards ---------- */
.blog-card .b-thumb { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; position: relative; }
.blog-card .b-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card:hover .b-thumb img { transform: none; }
.blog-card .b-cat { position: absolute; top: 14px; left: 14px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; }
.blog-card .b-meta { font-size: 12px; color: var(--muted-2); display: flex; gap: 14px; margin-bottom: 10px; }
.blog-card h4 { font-size: 1.08rem; line-height: 1.35; }
.blog-card:hover h4 { color: var(--red); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--red) 0%, #b30500 100%);
  border-radius: 4px;
  padding: 54px 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 46px rgba(184, 0, 0, .20);
}
.cta-band::after {
  display: none;
}
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 560px; }
.cta-band .btn { position: relative; z-index: 2; }

/* ---------- Diagonal stripe texture ---------- */
.diagonal-stripes {
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.035) 0 2px, transparent 2px 16px);
}

/* ---------- Footer contact strip ---------- */
.contact-strip {
  position: relative;
  overflow: hidden;
  padding: 24px 0 32px;
  background-color: #ffffff;
}
.contact-strip.diagonal-stripes { background-image: none; }
/* Sits above the logo track (which is z-index 2) so the marquee slides
   underneath the red shapes — logos emerge from them and disappear back
   into them rather than stopping short in white space. */
.contact-strip .wave-shape {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
/* Half-pills flush to the viewport edge rather than free-floating circles: a
   circle can only touch the band edges at its widest point, which left white
   wedges in the four corners. Squaring the outer side and rounding only the
   inner one fills the full height including the corners, and still reads as a
   round cap the logos slide behind. */
.contact-strip .wave-shape::before,
.contact-strip .wave-shape::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 86px;
}
.contact-strip .wave-shape::before {
  left: 0;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
}
.contact-strip .wave-shape::after {
  right: 0;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(315deg, var(--red-dark) 0%, #0c0c0e 100%);
}
/* Full-bleed: the track has to reach the red shapes at both edges, so it is
   not held inside the normal container width. */
.contact-strip .cs-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Client logo wall ---------- */
.cs-clients { position: relative; }
.cs-clients-label {
  text-align: center;
  font-family: var(--font-head);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
  margin: -12px 0 14px;
}
.cs-brand-wrap {
  position: relative;
  margin-top: -12px;
}
/* The red shapes do most of the occluding at both ends; a narrow fade backs
   them up so a logo is never cut in half in the gap beyond a disc. */
.cs-brand-strip.brand-strip {
  padding: 0;
  mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
}
.cs-brand-strip .brand-strip-track {
  align-items: center;
}
.cs-brand-strip .brand-strip-track {
  gap: 48px;
  animation-duration: 42s;
}
/* Every client gets the same footprint, so a wide wordmark and a small square
   mark read at the same visual weight instead of one dwarfing the other. */
.cs-brand-strip .bs-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 62px;
  padding: 0 22px;
  flex-shrink: 0;
  transition: opacity var(--dur-quick) var(--ease-standard);
}
.cs-brand-strip .bs-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.cs-brand-strip a.bs-item:hover { opacity: 0.65; }
.cs-brand-strip a.bs-item:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   NEWSPAPER-STYLE BLOG LAYOUT
   ============================================================ */

/* --- Ornamental Divider (between cover and Editor's Letter) --- */
.ornamental-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
  max-width: 920px;
  margin: 0 auto;
}
.orn-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c8a97e 30%, #c8a97e 70%, transparent);
}
.orn-diamond {
  width: 10px;
  height: 10px;
  background: #c8a97e;
  transform: rotate(45deg);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(200, 169, 126, 0.4);
}

/* Full-width golden divider line */
.gold-divider-full {
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, transparent 0%, #c8a97e 15%, #c8a97e 85%, transparent 100%);
  margin: 0;
}

/* --- Editor's Letter (Racio Times newspaper style) --- */
.ed-header {
  text-align: center;
  margin-bottom: 36px;
}
.ed-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 14px;
}
.ed-rule {
  width: 100%;
  height: 1px;
  background: #1a1a1a;
  margin: 0 auto;
}
/* Body text column */
.ed-body {
  column-count: 1;
}
.ed-body p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14.5px;
  line-height: 1.78;
  color: #2a2a2a;
  margin-bottom: 16px;
  text-align: justify;
  hyphens: auto;
}
/* Drop cap */
.ed-dropcap {
  float: left;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4.2em;
  line-height: 0.8;
  font-weight: 700;
  color: #1a1a1a;
  margin: 6px 10px 0 0;
}
/* Float image right — text wraps around and continues below */
.ed-float-wrap {
  overflow: hidden;
}
.ed-float-img {
  float: right;
  width: 34%;
  margin: 0 0 20px 28px;
  position: relative;
}
.ed-image {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(0.12);
}
.ed-caption {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  font-style: italic;
  color: #888;
  margin-top: 8px;
  text-align: center;
}
/* Signature */
.ed-signature {
  margin-top: 40px;
  text-align: right;
}
.ed-sig-line {
  width: 180px;
  height: 1px;
  background: #1a1a1a;
  margin-left: auto;
  margin-bottom: 10px;
}
.ed-sig-name {
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 2rem;
  color: #1a1a1a;
  line-height: 1;
  margin-bottom: 4px;
}
.ed-sig-role {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #888;
}
@media (max-width: 767.98px) {
  .ed-body { column-count: 1; }
  .ed-float-img { float: none; width: 100%; margin: 0 0 24px 0; }
}

/* --- Masthead --- */
/* --- NYT-style Newspaper Masthead --- */
.news-masthead {
  background: #fff;
  border-top: none;
  border-bottom: none;
  padding: 0;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
}
.masthead-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  padding: 10px 0 8px;
  font-family: var(--font-body);
  font-weight: 500;
  border-bottom: 1px solid #ccc;
}
.masthead-date { white-space: nowrap; }
.masthead-edition {
  color: #999;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
}
.masthead-section { white-space: nowrap; }
.masthead-ornament-rule {
  height: 3px;
  background: #111;
  margin: 0;
}
.masthead-brand {
  padding: 20px 0 14px;
  position: relative;
}
.masthead-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #111;
  margin: 0;
  line-height: 1.1;
  font-style: normal;
  text-transform: none;
}
.masthead-tagline {
  font-family: var(--font-body);
  font-size: 16px;
  color: #888;
  margin: 4px 0 12px;
  letter-spacing: 0.06em;
  font-style: normal;
}
.masthead-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.masthead-nav a { color: #444; text-decoration: none; transition: color 0.2s; }
.masthead-nav a:hover { color: var(--red); }
.masthead-rule {
  height: 0;
  background: none;
  margin: 0;
}

/* --- Hero + Sidebar Grid --- */
.news-hero-section {
  background: #fff;
  padding: 0;
}
.news-hero-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  border-bottom: 1px solid #ddd;
}
.news-hero-main {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #111;
  border-right: 1px solid #ddd;
  transition: opacity 0.2s;
}
.news-hero-main:hover { opacity: 0.85; }
.news-hero-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0;
  position: relative;
}
.news-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-hero-body {
  padding: 20px 28px 28px;
  flex: 1;
}
.news-cat-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.news-hero-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.08;
  color: #111;
  margin: 0 0 14px;
}
.news-hero-excerpt {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 14px;
}
.news-hero-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.news-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: #555;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

/* --- Sidebar --- */
.news-sidebar {
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.news-sidebar-head {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #111;
}
.news-sidebar-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #111;
  transition: opacity 0.2s;
}
.news-sidebar-item:first-of-type { padding-top: 0; }
.news-sidebar-item:hover { opacity: 0.7; }
.news-sidebar-thumb {
  width: 90px;
  height: 65px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0;
}
.news-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-sidebar-text { flex: 1; min-width: 0; }
.news-sidebar-cat {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.news-sidebar-text h4 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: #111;
  margin: 4px 0;
}
.news-sidebar-date {
  font-family: var(--font-body);
  font-size: 11px;
  color: #aaa;
}

/* --- Category Sections --- */
.news-category-section,
.news-flat-section {
  background: #fff;
  padding: 32px 0;
  border-top: 1px solid #ddd;
}
.news-cat-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.news-cat-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111;
  margin: 0;
  white-space: nowrap;
}
.news-cat-line {
  flex: 1;
  height: 1px;
  background: #ccc;
}

/* Category grid — 4 columns */
.news-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.news-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #111;
  overflow: hidden;
  transition: opacity 0.2s;
}
.news-card:hover { opacity: 0.85; }
.news-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-body { padding: 14px 0; flex: 1; display: flex; flex-direction: column; }
.news-card-date {
  font-family: var(--font-body);
  font-size: 11px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.news-card-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #111;
  margin: 0 0 6px;
}
.news-card-excerpt {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: #777;
  margin: 0;
  flex: 1;
}

/* Flat grid — smaller cards */
.news-flat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.news-flat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #111;
  overflow: hidden;
  transition: opacity 0.2s;
}
.news-flat-card:hover { opacity: 0.8; }
.news-flat-img {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 8px;
}
.news-flat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-flat-body h4 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #111;
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
  .news-hero-grid { grid-template-columns: 1fr; }
  .news-hero-main { border-right: none; border-bottom: 1px solid #ddd; }
  .news-sidebar { padding: 20px 0; flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .news-sidebar-item { flex: 1 1 calc(50% - 8px); min-width: 240px; padding: 12px 0; }
  .news-sidebar-head { width: 100%; }
  .news-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .news-flat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
  .masthead-top { flex-direction: column; gap: 4px; }
  .masthead-edition { display: none; }
  .masthead-title { font-size: clamp(2rem, 8vw, 3rem); }
  .news-cat-grid { grid-template-columns: 1fr; }
  .news-flat-grid { grid-template-columns: repeat(2, 1fr); }
  .news-sidebar-item { flex: 1 1 100%; }
}




/* =====================================================
   SKELETON / BONE LOADERS
   Animated placeholders shown while content loads.
   ===================================================== */

/* Base shimmer animation */
@keyframes bone-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Generic bone element */
.bone {
  background: linear-gradient(90deg, #f0f0f0 25%, #fafafa 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: bone-shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}

/* Bone shapes */
.bone-text       { height: 14px; width: 100%; margin-bottom: 8px; }
.bone-text-sm    { height: 11px; width: 60%; margin-bottom: 6px; }
.bone-text-lg    { height: 20px; width: 80%; margin-bottom: 10px; }
.bone-title      { height: 26px; width: 70%; margin-bottom: 12px; }
.bone-title-lg   { height: 34px; width: 90%; margin-bottom: 14px; }
.bone-img        { width: 100%; aspect-ratio: 16/9; border-radius: 4px; }
.bone-img-sm     { width: 100%; aspect-ratio: 3/2; border-radius: 4px; }
.bone-avatar     { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.bone-badge      { height: 28px; width: 100px; border-radius: 20px; }
.bone-line       { height: 2px; width: 100%; margin: 16px 0; }

/* Hide bone loaders when page content is ready */
.bone-wrap.loaded .bone-wrap-inner { display: none; }
.bone-wrap.loaded + .bone-real-content { display: block !important; }
.bone-real-content { display: none; }

/* ── News Masthead Skeleton ── */
.news-masthead-skeleton {
  border-top: none;
  border-bottom: none;
  padding: 0;
  margin-bottom: 0;
  text-align: center;
}
.news-masthead-skeleton .bone-date {
  height: 12px; width: 200px; margin: 0 auto 10px;
}
.news-masthead-skeleton .bone-mast-title {
  height: 52px; width: 380px; max-width: 85%; margin: 0 auto 10px;
  border-radius: 2px;
}
.news-masthead-skeleton .bone-mast-sub {
  height: 12px; width: 280px; margin: 0 auto;
}

/* ── News Hero Skeleton ── */
.news-hero-skeleton {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.news-hero-skeleton .bone-hero-img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 4px;
}
.news-hero-skeleton .bone-hero-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}
.news-hero-skeleton .bone-sidebar-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}
.news-hero-skeleton .bone-sidebar-thumb {
  width: 80px;
  height: 58px;
  border-radius: 4px;
  flex-shrink: 0;
}
.news-hero-skeleton .bone-sidebar-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── News Card Grid Skeleton ── */
.news-grid-skeleton {
  margin-bottom: 40px;
}
.news-grid-skeleton .bone-section-title {
  height: 18px;
  width: 180px;
  margin-bottom: 16px;
}
.news-grid-skeleton .bone-section-line {
  height: 1px;
  background: #2a2a2e;
  margin-bottom: 20px;
}
.news-grid-skeleton .bone-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.news-grid-skeleton .bone-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-grid-skeleton .bone-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 4px;
}
.news-grid-skeleton .bone-card-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Page Content Skeleton (portfolio, services, etc.) ── */
.page-skeleton {
  padding: 40px 0;
}
.page-skeleton .bone-page-hero {
  height: 120px;
  width: 100%;
  margin-bottom: 30px;
  border-radius: 0;
}
.page-skeleton .bone-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.page-skeleton .bone-card-lg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-skeleton .bone-card-lg-img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 4px;
}

/* ── Portfolio Skeleton ── */
.portfolio-skeleton .bone-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.portfolio-skeleton .bone-filter-btn {
  height: 36px;
  width: 100px;
  border-radius: 20px;
}
.portfolio-skeleton .bone-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.portfolio-skeleton .bone-gallery-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
}

/* ── Services Skeleton ── */
.services-skeleton .bone-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.services-skeleton .bone-svc-card {
  padding: 24px;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.services-skeleton .bone-svc-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

/* Responsive bone loaders */
@media (max-width: 991.98px) {
  .news-hero-skeleton { grid-template-columns: 1fr; }
  .news-grid-skeleton .bone-cards { grid-template-columns: repeat(2, 1fr); }
  .page-skeleton .bone-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-skeleton .bone-gallery { grid-template-columns: repeat(3, 1fr); }
  .services-skeleton .bone-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .news-grid-skeleton .bone-cards { grid-template-columns: 1fr; }
  .portfolio-skeleton .bone-gallery { grid-template-columns: repeat(2, 1fr); }
  .services-skeleton .bone-svc-grid { grid-template-columns: 1fr; }
  .page-skeleton .bone-cards-grid { grid-template-columns: 1fr; }
}


/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding: 62px 0 40px;
  background: #0c0c0e;
  border-bottom: 1px solid #232226;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 300px at -5% 120%, rgba(225, 6, 0, 0.07), transparent 55%);
  z-index: 0;
}
/* The red top-right glow is painted as a gradient rather than a blurred box.
   A large `filter: blur()` promotes this to its own composited layer, and
   inside an `overflow: hidden` parent that layer can render a hairline seam
   across the section on some GPUs. A gradient has no such layer. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(460px 260px at 90% -10%, rgba(230, 0, 0, 0.30), transparent 68%);
  z-index: 0;
  pointer-events: none;
}
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); position: relative; z-index: 1; color: #fff; }
.page-hero p { position: relative; z-index: 1; color: #b6b2b3; }
/* The eyebrow kicker is suppressed on inner-page heroes: the h1 carries the
   page identity on its own, and dropping the line keeps the band compact. */
.page-hero .eyebrow { display: none !important; }
.page-hero i { color: #fff; }

/* ---------- Forms ---------- */
.form-rac .form-label { font-family: var(--font-head); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--white); }
.form-rac .form-control,
.form-rac .form-select {
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 14.5px;
  transition: var(--transition);
}
.form-rac .form-control:focus,
.form-rac .form-select:focus {
  background: var(--ink-3);
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.18);
  color: var(--text);
}
.form-rac .form-control::placeholder { color: var(--muted-2); }
.form-rac .form-check-input { background-color: var(--ink-3); border-color: var(--line); }
.form-rac .form-check-input:checked { background-color: var(--red); border-color: var(--red); }
.form-rac .form-check-input:focus { box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.18); }
.form-rac .form-check-label { font-size: 14.5px; color: var(--muted); cursor: pointer; }
.form-rac .form-check { display: flex; align-items: center; gap: 10px; padding-left: 0; margin-bottom: 12px; }
.form-rac .form-check-input { margin-left: 0; float: none; width: 19px; height: 19px; flex-shrink: 0; }
.form-rac textarea.form-control { min-height: 130px; }
.form-rac .input-group-text { background: var(--ink-3); border: 1px solid var(--line); color: var(--muted); }


.service-pick {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 16px 18px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 14px;
}
.service-pick:hover { border-color: var(--line); }
.service-pick .sp-icon { display: none; }
.service-pick .sp-name { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--white); }
.service-pick .sp-desc { font-size: 12.5px; color: var(--muted); }
.service-pick .sp-check { margin-left: auto; }
.service-pick.selected { border-color: var(--red); background: var(--red-soft); }

/* ---------- Alerts & badges ---------- */
.alert-rac { border-radius: 0; border: none; background: transparent; color: var(--text); padding: 8px 0; }
.alert-success-rac { border: none; background: transparent; color: #166534; }
.alert-danger-rac { border: none; background: transparent; color: #b91c1c; }

/* ---------- Centered flash toast (no background, auto-dismiss ~3s) ---------- */
.site-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(520px, 90vw);
  padding: 16px 24px;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  pointer-events: none;
  animation: toastFade 3s ease forwards;
}
.site-toast i { font-size: 22px; flex-shrink: 0; }
.site-toast .fa-circle-check { color: #22c55e; }
.site-toast .fa-circle-exclamation { color: #f87171; }
@keyframes toastFade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}

.badge-rac { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 0; }
.badge-red { background: #e5e7eb; color: #475569; border: 1px solid #d1d5db; }
.badge-green { background: #e5e7eb; color: #475569; border: 1px solid #d1d5db; }
.badge-grey { background: #e5e7eb; color: #475569; border: 1px solid #d1d5db; }
.badge-amber { background: #e5e7eb; color: #475569; border: 1px solid #d1d5db; }

/* ---------- Timeline / steps ---------- */
.step-rac { position: relative; padding-left: 34px; }
.step-rac::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: -30px; width: 2px; background: var(--line); }
.step-rac:last-child::before { display: none; }
.step-rac .step-num { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; font-family: var(--font-head); }
.step-rac h5 { font-size: 1rem; margin-bottom: 6px; }
.step-rac p { color: var(--muted); font-size: 14px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 30px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 4px; }
.lightbox .lb-close { position: absolute; top: 24px; right: 30px; font-size: 26px; color: #fff; background: none; border: none; cursor: pointer; }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid #444; background: rgba(0,0,0,0.5); color: #fff; font-size: 16px; cursor: pointer; }
.lightbox .lb-prev { left: 20px; }
.lightbox .lb-next { right: 20px; }

/* ---------- Video Modal ---------- */
.video-modal { position: fixed; inset: 0; z-index: 2100; display: none; align-items: center; justify-content: center; }
.video-modal.open { display: flex; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.92); }
.video-modal-content { position: relative; z-index: 1; width: 90vw; max-width: 960px; }
.video-modal-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; background: #000; }
.video-modal-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.video-modal-close { position: absolute; top: -40px; right: 0; font-size: 28px; color: #fff; background: none; border: none; cursor: pointer; z-index: 2; }
@media (max-width: 600px) { .video-modal-content { width: 95vw; } .video-modal-close { top: -36px; right: -4px; font-size: 24px; } }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 10600;
  display: flex;
  align-items: center;
  gap: 0;
  background: #25d366;
  color: #fff;
  border-radius: 100px;
  transition: var(--transition);
  overflow: hidden;
  max-width: 56px;
}
.wa-float .wa-icon { width: 56px; height: 56px; display: grid; place-items: center; font-size: 28px; flex-shrink: 0; }
.wa-float .wa-text { font-family: var(--font-head); font-weight: 500; font-size: 14px; padding-right: 20px; white-space: nowrap; }
.wa-float:hover { max-width: 240px; color: #fff; }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 100px; border: 2px solid rgba(255,255,255,0.4); animation: waPulse 2.4s infinite; }
@keyframes waPulse { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.18); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Racio Chat widget ---------- */
.racio-chat {
  position: fixed;
  right: 22px;
  bottom: 220px;   /* clears the 84px float sitting at bottom: 120px */
  z-index: 1600;
  width: min(360px, calc(100vw - 44px));
}
.racio-chat-panel {
  display: none;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 24px 60px -12px rgba(12, 12, 14, 0.35);
  overflow: hidden;
  max-height: min(560px, calc(100vh - 240px));
}
.racio-chat-panel.open {
  display: flex;
  animation: rcPanelIn 0.28s ease;
}
@keyframes rcPanelIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.racio-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--rc-blue);
  color: #fff;
}
.racio-chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
}
.racio-chat-head-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}
.racio-chat-head-text strong { font-family: var(--font-head); font-size: 15px; }
.racio-chat-head-text small { font-size: 12px; opacity: 0.85; }
.racio-chat-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}
.racio-chat-close:hover { background: rgba(255, 255, 255, 0.3); }
.racio-chat-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.racio-chat-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  height: 330px;
  overflow-y: auto;
  background: #f4f3f2;
}
.rc-brand-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 14px 14px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--rc-blue);
  border-radius: 4px;
  text-align: center;
}
.rc-brand-header img {
  width: 72px;
  height: auto;
  margin-bottom: 8px;
  display: block;
}
.rc-brand-header strong {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.rc-brand-header span {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.rc-msg { display: flex; gap: 8px; max-width: 88%; }
.rc-msg.rc-user { align-self: flex-end; }
.rc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
  overflow: hidden;
  padding: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.rc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.rc-bubble {
  padding: 9px 13px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: break-word;
}
.rc-bot .rc-bubble {
  background: #fff;
  border: 1px solid var(--line);
  border-top-left-radius: 4px;
  color: var(--text);
}
.rc-user .rc-bubble {
  background: var(--rc-blue);
  color: #fff;
  border-top-right-radius: 4px;
}
.rc-typing .rc-dots span { background: var(--muted); }

.racio-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 12px;
  background: #f4f3f2;
}
.racio-chat-chips.hidden { display: none; }
.rc-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 100px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.rc-chip:hover { border-color: var(--rc-blue); color: var(--rc-blue); }
.rc-chip:focus-visible { outline: 2px solid var(--rc-blue); outline-offset: 1px; }

.racio-chat-form {
  display: flex;
  gap: 8px;
  padding: 2px 14px 14px;
  background: #f4f3f2;
}
.racio-chat-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text);
  background: #fff;
}
.racio-chat-form input:focus {
  outline: 2px solid var(--rc-blue);
  outline-offset: 0;
  border-color: var(--rc-blue);
}
.racio-chat-form button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--rc-blue);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}
.racio-chat-form button:hover { background: #1f3fd6; }
.racio-chat-form button:focus-visible { outline: 2px solid var(--rc-blue); outline-offset: 2px; }

@media (max-width: 575px) {
  .racio-chat {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }
  .racio-chat-panel { max-height: min(560px, calc(100vh - 24px)); }
  .racio-chat-body { height: 300px; }
}

/* Short viewports (landscape phones, low-height windows): anchor the panel to
   the bottom and let it use the available height so the input stays reachable
   instead of being clipped by the desktop max-height. */
@media (max-height: 520px) {
  .racio-chat { bottom: 12px; }
  .racio-chat-panel { max-height: calc(100vh - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .racio-chat-panel.open { animation: none; }
}

/* Back to top */
.to-top {
  position: fixed;
  left: 22px;
  bottom: 24px;
  z-index: 1500;
  width: 46px; height: 46px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  display: grid; place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  background: #0c0c0e;
  padding-top: 0;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red) 0%, rgba(230, 0, 0, 0.45) 55%, transparent 100%);
}
.footer .container { position: relative; z-index: 1; }

.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 6px; }
.footer ul a { color: #b7b2b3; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); }
.footer ul a:hover { color: #fff; }
.footer .f-links a { position: relative; padding-left: 0; }
.footer .f-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.25s ease;
}
.footer .f-links a:hover { color: #fff; }
.footer .f-links a:hover::before { width: 12px; }
.footer .f-links .f-all { color: var(--red); font-weight: 600; }
.footer .f-links .f-all:hover { color: #fff; }

.footer .socials { display: flex; flex-wrap: wrap; gap: 8px; }
.footer .socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-grid; place-items: center;
  color: #fff !important;
  font-size: 14px;
  transition: var(--transition);
}
.footer .socials a i,
.footer .socials a i::before {
  color: #fff !important;
}
.footer .socials a:hover { background: #fff; border-color: #fff; color: #0c0c0e; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding: 50px 0 30px; }
.footer-brand { }
.footer-logo { height: 90px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-desc { color: #b7b2b3; font-size: 14px; line-height: 1.7; margin-bottom: 16px; max-width: 300px; }
.footer-col { }
.footer-heading { color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }

.footer-clients { position: relative; z-index: 1; padding: 34px 0 30px; border-top: 1px solid #232226; }
.footer-clients .brand-strip-label { color: #b6b2b3; margin-bottom: 22px; }
.footer-clients .brand-strip-track { animation-direction: normal; }
.footer-clients .brand-strip-track span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  width: 110px;
  background: #fff;
  border-radius: 4px;
  padding: 8px 14px;
}
.footer-clients .brand-strip-track img { height: 100%; width: 100%; max-width: 100%; object-fit: contain; filter: none; }

.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid #232226;
  margin-top: 0;
  padding: 8px 0;
  font-size: 12.5px;
  color: #fff;
}
.footer-bottom a { color: #fff; transition: var(--transition); }
.footer-bottom a:hover { color: var(--red); }
.footer-bottom .f-bottom-right { display: inline-flex; align-items: center; gap: 22px; }
.footer-bottom .f-home-link { color: #d6d2d2; }
.footer-bottom .f-home-link:hover { color: var(--red); }

/* Mobile footer adjustments */
@media (max-width: 991.98px) {
  .footer {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .footer-bottom {
    padding-bottom: 8px;
  }
  #open-bp-chat {
    bottom: 90px !important;
    right: 16px !important;
  }
}

/* ---------- Animations ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Home hero (photo/video, dark overlay) ---------- */
.hero .display-head,
.hero-type-text {
  color: #fff;
}
.hero-heading-dot {
  color: var(--red);
}
.hero .lead-soft {
  color: #e4e1e1;
}
.hero-quote-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 4px;
  padding: 11px 24px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 18, 18, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f1eeee;
  font-style: italic;
  font-size: 14.5px;
  letter-spacing: 0.01em;
}

/* ---------- Responsive ---------- */
@media (min-width: 992px) and (max-width: 1220px) {
  .navbar-rac .nav-link { padding: 24px 4px !important; font-size: 12px; }
  .navbar-rac .nav-link::after { left: 4px; right: 4px; }
  .navbar-rac .navbar-brand { gap: 6px; }
  .brand-mark { padding: 8px; }
}
@media (max-width: 991.98px) {
  .navbar-rac .container { flex-wrap: wrap; }
  .navbar-nav.mx-auto { margin-left: 0 !important; margin-right: 0 !important; width: 100%; display: flex; flex-direction: column; align-items: flex-end; }
  .navbar-rac .nav-link { padding: 7px 12px !important; border-radius: 3px; transition: background-color 0.15s ease, color 0.15s ease; }
  .navbar-rac .nav-link:active { background: rgba(230, 0, 0, 0.15); color: #fff; }
  .navbar-rac .nav-link::after { display: none; }
  #mainNav .d-lg-none { border-color: rgba(255, 255, 255, 0.1) !important; padding-top: 24px !important; padding-bottom: 16px !important; }
  #mainNav .d-lg-none .d-flex { justify-content: flex-end; }
  #mainNav .nav-socials-mobile { justify-content: flex-end; }
  .mega-menu { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; padding: 10px 0; border: 0; background: transparent; }
  .mega-menu .container { max-width: 100%; }
  .mega-title { margin-top: 18px; }
  body:has(.navbar-collapse.show) .wa-float { display: none; }
  /* --- Slide-down animation --- */
  #mainNav {
    display: flex !important;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #mainNav.show {
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 1;
  }
  /* Staggered child reveal */
  #mainNav.show .navbar-nav .nav-item {
    animation: navSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  #mainNav.show .navbar-nav .nav-item:nth-child(1) { animation-delay: 0.04s; }
  #mainNav.show .navbar-nav .nav-item:nth-child(2) { animation-delay: 0.08s; }
  #mainNav.show .navbar-nav .nav-item:nth-child(3) { animation-delay: 0.12s; }
  #mainNav.show .navbar-nav .nav-item:nth-child(4) { animation-delay: 0.16s; }
  #mainNav.show .navbar-nav .nav-item:nth-child(5) { animation-delay: 0.20s; }
  #mainNav.show .navbar-nav .nav-item:nth-child(6) { animation-delay: 0.24s; }
  #mainNav.show .navbar-nav .nav-item:nth-child(7) { animation-delay: 0.28s; }
  #mainNav.show .navbar-nav .nav-item:nth-child(8) { animation-delay: 0.32s; }
  #mainNav.show .d-lg-none {
    animation: navSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.36s both;
  }
  @keyframes navSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Respect reduced-motion preference */
  @media (prefers-reduced-motion: reduce) {
    #mainNav { transition: none; }
    #mainNav.show .navbar-nav .nav-item,
    #mainNav.show .d-lg-none { animation: none; }
  }
  .navbar-rac { overflow: hidden; }
  .brand-watermark { display: none; }
  .site-header { position: relative; background: transparent !important; }
  .card-rac.p-4 { padding: 1.1rem 1.25rem !important; }
  .card-rac .s-icon { width: 38px; height: 38px; font-size: 22px; margin-bottom: 8px; }
  .card-rac h4 { margin-bottom: 4px !important; font-size: 1.12rem; }
  .hero { min-height: 0; padding: 40px 0 40px; }
  .hero-stats { gap: 28px; }
  .section { padding: 52px 0; }
  .cta-band { padding: 40px 26px; }
}

@media (max-width: 767.98px) {
  .contact-strip .wave-shape { display: none; }
  .contact-strip { background-color: #ffffff; background-image: none; }
  /* The red shapes are hidden at this width, so nothing occludes the track —
     a soft edge fade takes over so a logo is not cut in half at the viewport
     edge. */
  .cs-brand-strip.brand-strip {
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .cs-brand-strip .bs-item {
    width: 132px;
    height: 52px;
    padding: 0 16px;
  }

  /* Compact footer on mobile */
  .footer { padding-top: 0; }
  .footer-bottom { margin-top: 0; padding: 10px 0; }
  /* The chat and WhatsApp floats are fixed to the bottom-right corner, so at
     full scroll they would sit on top of the social row and the copyright.
     Reserve their height at the end of the page, and keep the last line of
     text out of their column so it wraps instead of disappearing under them. */
  .footer { padding-bottom: 92px; }
  .footer-bottom .container { padding-right: 96px; }
}


/* ============================================================
   DESIGN SYSTEM FOUNDATION — UI/UX Pro Max
   Applied from design-system/racio-media-group/MASTER.md.
   Priority 1 (Accessibility) → 7 (Animation) of the skill's rule
   table. Loaded last so it wins over earlier component rules.
   ============================================================ */

/* ---------- P1: Skip link (ux #45) ---------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 2000;
  transform: translateY(-200%);
  background: var(--text);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--radius);
  transition: transform var(--dur-quick) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* ---------- P1: Visible focus on every operable control (ux #28, #102) ----------
   2 CSS px perimeter minimum with 3:1 state contrast. Applies to controls
   whose component styles set `outline: none` without a replacement. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
.navbar-rac a:focus-visible,
.navbar-rac button:focus-visible,
.nav-search-inline input:focus-visible,
.header-search-input:focus-visible,
.header-search-close:focus-visible,
.mega-menu .mega-link:focus-visible,
.footer a:focus-visible,
.lightbox button:focus-visible,
.hero a:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring-on-dark);
  outline-offset: var(--focus-offset);
}
/* The inline nav search sets outline:none on the input itself. */
.nav-search-inline input:focus-visible { outline-offset: 4px; }

/* ---------- P1: Focus must not be hidden behind the locked header (ux #100) ---------- */
html { scroll-padding-top: var(--header-offset); }

/* ---------- P2: Touch target floor (ux #22, #66) ---------- */
.btn,
.filter-btn,
.lb-close,
.lb-nav,
.pagination .page-link {
  min-height: var(--target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
/* .to-top already centres with `display: grid` and is 46px square — it only
   needs the touch-action hint, not a display change. */
.to-top { touch-action: manipulation; }
.btn-sm { min-height: 40px; }
.footer .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
}
@media (max-width: 991.98px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 20px; }
  /* Mobile layouts need the full target size, not desktop-sized hit areas. */
  .footer .socials a,
  .f-bottom-right a {
    min-width: var(--target-min);
    min-height: var(--target-min);
  }
}

/* ---------- P1: Pointer affordance on every clickable element ---------- */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
summary,
label[for],
.filter-btn,
.service-pick { cursor: pointer; }

/* ---------- P10: Status must not rely on colour alone (ux, chart) ---------- */
.badge-status::before { content: ""; margin-right: 6px; }

/* ---------- P7: Reduced motion (ux #9, #99) ----------
   Every animation collapses to its final readable state; nothing is
   hidden, and no content depends on a transition having run. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Reveal-on-scroll content renders in its final state. */
  .reveal,
  .reveal.in {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Marquees and tickers hold still and stay readable. */
  .brand-strip-track,
  .marquee-track,
  .ticker-track {
    animation: none !important;
    transform: none !important;
  }
  .brand-strip,
  .marquee,
  .ticker { overflow-x: auto; }
  .hero-type-cursor { animation: none; opacity: 0; }
  /* Parallax and scroll-scrub surfaces sit flat. */
  [data-parallax],
  .parallax { transform: none !important; background-attachment: scroll !important; }
}

/* ---------- P5: No horizontal overflow, resilient text ---------- */
img, svg, video, iframe { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; text-wrap: balance; }
p, li, dd, .lead-soft { overflow-wrap: break-word; }
.break-token { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- P8: Errors sit next to their field, not only at the top ---------- */
.field-error {
  display: block;
  margin-top: var(--space-2);
  color: var(--red-dark);
  font-size: 0.875rem;
  font-weight: 500;
}
.field-error::before {
  content: "\26A0";  /* non-colour cue alongside the red */
  margin-right: 6px;
}

/* ---------- Forced colours (Windows high contrast) ---------- */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .btn { border: 1px solid ButtonBorder; }
}

/* ---------- P7: Stop control for the auto-rotating showreel (ux #108) ---------- */
.sp-video-toggle {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(12, 12, 14, 0.72);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-standard);
}
.sp-video-toggle:hover { background: var(--red); border-color: var(--red); }
.sp-video-toggle:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring-on-dark);
  outline-offset: var(--focus-offset);
}

/* The lightbox is a modal dialog: it must sit above everything and only
   render when open. */
.lightbox[aria-hidden="true"]:not(.open) { display: none; }

/* ---------- Navbar action group ---------- */
.navbar-rac .nav-actions { flex-shrink: 0; }

/* Compact search toggle — stands in for the inline field below 1600px so the
   nav can carry the menu, the quote button and the social row without
   overflowing. Opens the same full-width #headerSearch bar. */
.nav-search-icon-btn {
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #eceaea;
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-standard),
              border-color var(--dur-quick) var(--ease-standard),
              color var(--dur-quick) var(--ease-standard);
}
.nav-search-icon-btn:hover,
.nav-search-icon-btn.active { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); color: #fff; }

@media (min-width: 1600px) {
  /* Room for the full field — show it and retire the compact toggle. */
  .nav-search-inline { display: flex; }
  .nav-search-icon-btn { display: none !important; }
}

/* ---------- Navbar social row (moved out of the removed topbar) ----------
   Sits beside the Request a Quote button. Only configured networks render,
   so the row stays short enough not to crowd the nav. */
.nav-socials {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.nav-socials li { margin: 0; }
.nav-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #eceaea;
  font-size: 13px;
  transition: background-color var(--dur-quick) var(--ease-standard),
              color var(--dur-quick) var(--ease-standard);
}
.nav-socials a:hover { background: var(--red); color: #fff; }

/* Mobile: inside the collapsed menu, full-size touch targets. */
.nav-socials-mobile {
  border-left: 0;
  padding-left: 0;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.nav-socials-mobile a {
  width: var(--target-min);
  height: var(--target-min);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Below 1200px the nav is tight — drop the social row rather than let the
   navbar wrap. It is still reachable in the footer on every page. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav-socials:not(.nav-socials-mobile) { display: none !important; }
}

/* ---------- Footer utility row ----------
   Mirrors the structure the old topbar used: contact details on the left,
   social icons on the right, on one compact line. */
.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.f-contact-inline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-size: 13px;
}
.f-contact-inline li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: #eceaea;
  line-height: 1.4;
}
.f-contact-inline i { color: #fff; font-size: 13px; flex-shrink: 0; }
.f-contact-inline a { color: #eceaea; font-size: 13px; }
.f-contact-inline a:hover { color: var(--red); }

/* Size comes from the 34px touch-target floor in the foundation block. */
.footer .socials { list-style: none; padding: 0; margin: 0; }
.footer .socials li { margin: 0; }
.footer .socials a { font-size: 13px; }

@media (min-width: 992px) {
  /* Keep the social icons clear of the fixed chat/WhatsApp floats parked in
     the bottom-right corner. */
  .footer-main { padding-right: 96px; }
}

@media (max-width: 991.98px) {
  /* Stack left-aligned on small screens rather than centring a ragged row. */
  .footer-main {
    justify-content: flex-start;
    gap: var(--space-3);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .f-contact-inline { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ============================================================
   JOB BOARD — vacancies page (list + detail, two-pane)
   ============================================================ */

/* Plain icons: no tinted shape behind them, anywhere. */
.plain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 22px;
  flex-shrink: 0;
}
.plain-icon-lg { font-size: 28px; justify-content: flex-start; }

/* ---------- Hero + filter bar ---------- */
.jb-hero {
  position: relative;
  padding: 56px 0 0;
  /* No overflow clipping — the filter card deliberately overhangs the band. */
}
/* Matches the .page-hero treatment used by every other inner page: dark ink
   with red glow, rather than a flat slab of brand red. Stops 32px short of the
   bottom so the filter card overhangs it. */
.jb-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 32px;
  background:
    radial-gradient(620px 340px at 6% 130%, rgba(230, 0, 0, 0.30), transparent 62%),
    radial-gradient(460px 260px at 94% -30%, rgba(230, 0, 0, 0.22), transparent 62%),
    #0c0c0e;
  border-bottom: 1px solid #232226;
  pointer-events: none;
}
.jb-hero > .container { position: relative; z-index: 1; }
.jb-hero-inner { position: relative; z-index: 1; padding-bottom: 44px; max-width: 720px; }
.jb-hero-inner h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 12px;
}
.jb-hero-inner p { color: #b6b2b3; font-size: 1.02rem; margin: 0; }
/* Three live figures carry the dark band when only a role or two is open. */
.jb-hero-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: var(--space-4) 0 0;
  padding: 0;
}
.jb-hero-stats li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: #b6b2b3;
}
.jb-hero-stats strong {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.jb-filters {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: none;
  padding: var(--space-3);
  margin-bottom: -32px;
}
.jb-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.jb-field:focus-within { border-color: var(--red); }
.jb-field-search { flex: 2 1 280px; min-width: 180px; }
.jb-field i { color: var(--muted-2); font-size: 13px; flex-shrink: 0; }
.jb-field input,
.jb-field select {
  border: 0;
  background: transparent;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  min-width: 0;
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
}
.jb-field input { cursor: text; }
.jb-field input::placeholder { color: var(--muted-2); }
.jb-apply-top { margin-left: auto; }

/* ---------- Board ---------- */
.jb-section { padding-top: 64px; }
.jb-board {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* ---- Hiring circle hero ---- */
.jb-hiring-circle {
  display: flex;
  justify-content: center;
  padding: 0 0 var(--space-6);
}
.jb-hiring-circle-inner {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #0284c7 50%, #0369a1);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 30px;
  box-shadow: 0 20px 50px -12px rgba(14, 165, 233, 0.45);
  position: relative;
}
.jb-hiring-circle-inner::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.25);
}
.jb-hiring-circle-inner h2 {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.jb-hiring-circle-inner p {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0 0 16px;
  max-width: 200px;
}
.jb-hiring-circle-inner .btn-white {
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 0;
  padding: 10px 20px 10px 16px;
  position: relative;
}
.jb-hiring-circle-inner .btn-white::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 16px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0,0,0,0.45);
  border-radius: 0;
}
.jb-hiring-circle-inner .btn-white:hover {
  background: rgba(0,0,0,0.6);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* ---- Role list with connectors ---- */
.jb-role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 78vh;
  overflow-y: auto;
  padding-right: var(--space-1);
  position: relative;
}

.jb-role-list li { margin: 0; position: relative; }

.jb-role-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--ink-3);
  border: none;
  border-radius: 0;
  padding: 14px 22px 14px 14px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: none;
}
.jb-role-item:hover {
  background: var(--line);
}
.jb-role-item.active {
  background: var(--text);
  color: #fff;
}
.jb-role-item.active .jb-role-dot {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.jb-role-item.active .jb-role-label { color: #fff; }
.jb-role-dot {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.jb-role-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb-empty-filtered { margin-top: var(--space-4); font-size: 14px; color: var(--muted); }

/* Closes the gap under a short results list, where the column used to run out
   of content long before the detail panel beside it did. */
.jb-aside {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: transparent;
}
.jb-aside-title { font-size: 1.02rem; margin: 0 0 var(--space-2); }
.jb-aside-text { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin: 0 0 var(--space-3); }
.jb-aside-btn { width: 100%; justify-content: center; }
.jb-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--red);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Detail panel ---------- */
/* Panel grows with its content so the full vacancy (incl. How to Apply)
   always fits on the page — no inner scrollbar. */
.jb-detail {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.jb-detail:focus { outline: none; }
.jb-detail-cover {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  max-height: 260px;
}
.jb-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.jb-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--space-5);
}
.jb-detail-headings h2 { font-size: 1.6rem; margin-bottom: var(--space-2); }
.jb-detail-sub { font-size: 13.5px; color: var(--muted); margin: 0; }
/* Department / location / type as pills — quicker to scan than a dot-joined
   line, and they echo the chips used on the cards beside them. */
.jb-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.jb-pills li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 5px 12px;
}
.jb-pills i { color: var(--red); font-size: 11px; }
.jb-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.jb-detail-body h3 {
  font-size: 1.02rem;
  margin: var(--space-5) 0 var(--space-3);
}
.jb-detail-body h3:first-child { margin-top: 0; }
.jb-detail-body p { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.jb-detail-body a:not(.btn) { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

.jb-ticks { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.jb-ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--space-2);
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}
.jb-ticks li::before {
  content: "\f00c";                 /* Font Awesome check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 11px;
  color: var(--red);
}

/* "How to Apply" extras inside the vacancy detail panel */
.jb-apply-subhead {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--space-4) 0 var(--space-2);
}
.jb-apply-next { margin: 0 0 var(--space-4); padding-left: 0; list-style-position: inside; }
.jb-apply-next li {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--space-2);
  padding-left: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.jb-apply-next li::marker { color: var(--red); font-weight: 700; }
.jb-apply-next li b { color: var(--text); }
.jb-apply-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #000000;
  border: 1px solid #000000;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #ffffff !important;
  margin: 0;
}
.jb-apply-note i { color: #ff6b6b !important; margin-top: 3px; }

/* ---------- How to apply — infographic pill cards ---------- */
.jb-process-head { text-align: center; margin: 0 0 var(--space-6); }
.jb-process-head h2 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0 0 var(--space-2);
}
.jb-process-head p { font-size: 15px; color: var(--muted); margin: 0; }

.jb-steps {
  --step-accent: var(--red);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
}

/* Each step: pill shape with a coloured circle at each end. */
.jb-step {
  --step-accent: var(--red);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Dotted connector between steps (horizontal) */
.jb-step + .jb-step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -28px;
  width: 28px;
  height: 2px;
  border-top: 2px dotted var(--line);
  transform: translateY(-50%);
}

/* Coloured circle — left (number): thick ring + white interior */
.jb-step-num {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4px solid var(--red);
  background: #fff;
  color: var(--red);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.12);
}

/* White card in the centre — extends under the circles for pill effect */
.jb-step-body {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 28px;
  padding: 24px 28px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 -10px;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 30px -12px rgba(0,0,0,0.10);
  transition: box-shadow var(--dur-quick) var(--ease-standard),
              transform var(--dur-quick) var(--ease-standard);
}
.jb-step:hover .jb-step-body {
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.18);
  transform: translateY(-2px);
}

/* Coloured circle — right (icon): solid fill */
.jb-step-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--step-accent);
  color: #fff;
  font-size: 18px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.15);
}

.jb-step h3 {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
}
.jb-step p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* ---------- Empty state ---------- */
.jb-empty-card {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.jb-empty-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin-bottom: var(--space-3);
}
.jb-empty-card h2 { font-size: 1.3rem; margin-bottom: var(--space-3); }
.jb-empty-text { font-size: 14.5px; color: var(--muted); line-height: 1.7; margin-bottom: var(--space-4); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .jb-board { grid-template-columns: 1fr; }
  .jb-role-list { max-height: none; overflow: visible; }
  .jb-apply-top { margin-left: 0; width: 100%; }
  .jb-field { width: 100%; }
  .jb-hero { padding-top: 40px; }
  .jb-steps { grid-template-columns: 1fr 1fr; }
  .jb-step-num { width: 50px; height: 50px; border-width: 3px; font-size: 0.85rem; }
  .jb-step-icon { width: 46px; height: 46px; font-size: 16px; }
  .jb-step-body { padding: 18px 20px; border-radius: 24px; margin: 0 -8px; }
  .jb-step + .jb-step::before { left: -22px; width: 22px; }
}

@media (max-width: 767.98px) {
  .jb-steps { grid-template-columns: 1fr; gap: 20px; }
  .jb-step + .jb-step::before { left: 50%; top: -20px; width: 2px; height: 20px; border-top: none; border-left: 2px dotted var(--line); transform: translateX(-50%); }
  .jb-step { flex-direction: row; align-items: center; }
  .jb-step-num { width: 52px; height: 52px; border-width: 3px; font-size: 0.9rem; }
  .jb-step-icon { width: 48px; height: 48px; font-size: 16px; }
  .jb-hero-stats { gap: var(--space-4); }
  .jb-hero-stats strong { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jb-card,
  .jb-step { transition: none; }
  .jb-card:hover,
  .jb-step:hover { transform: none; }
}

/* ============================================================
   VIDEOGRAPHY SHOWREEL — thumbnail cards + red play badge
   ============================================================ */

/* Decorative play badge. Purely visual: the whole card is the link, so this
   carries no semantics of its own (aria-hidden in the markup). */
.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 3;
  transition: transform var(--dur-quick) var(--ease-standard),
              background-color var(--dur-quick) var(--ease-standard);
}
/* White triangle, drawn with borders so there is no extra asset to load. */
.play-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

.specialty-card .play-badge { width: 58px; height: 58px; }
.specialty-card:hover .play-badge,
.reel-card:hover .play-badge {
  background: var(--red-dark);
  transform: translate(-50%, -50%) scale(1.08);
}

/* ---------- Showreel card ---------- */
.reel-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: #0c0c0e;
  aspect-ratio: 16 / 9;
}
.reel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, opacity var(--dur-quick) var(--ease-standard);
}
.reel-card:hover img { transform: scale(1.06); opacity: 0.85; }
.reel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.reel-label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 4;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.reel-card:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .reel-card img,
  .play-badge { transition: none; }
  .reel-card:hover img { transform: none; }
  .specialty-card:hover .play-badge,
  .reel-card:hover .play-badge { transform: translate(-50%, -50%); }
}

/* Reel cards sitting inside the portfolio grid share the work-card ratio so
   rows line up instead of stepping. */
.reel-card.reel-card-grid { aspect-ratio: 4 / 3; }

/* ============================================================
   CONTACT — floating panel with the handset bleeding off the left
   ============================================================ */
.contact-stage {
  position: relative;
  overflow: hidden;
  padding: 72px 0 96px;
  background: linear-gradient(180deg, #f4f2f3 0%, #faf9fa 55%, #f6f5f6 100%);
}
/* Out-of-focus pink shapes behind the panel, as in the reference. */
.cstage-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffd0d0, rgba(255, 226, 226, 0));
  pointer-events: none;
}
.cstage-blob-a { width: 380px; height: 380px; top: -90px; left: -120px; opacity: 0.75; }
.cstage-blob-b { width: 300px; height: 300px; bottom: -110px; right: -80px; opacity: 0.55; }

.contact-panel {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.45);
}

/* The handset overhangs the panel on both sides, so it reads as an object
   resting in front of the card rather than a picture cropped inside it. */
.cpanel-art {
  position: relative;
  align-self: center;
  margin: -44px 0 -44px -46px;
  padding: var(--space-4) 0;
  pointer-events: none;
}
.cpanel-art img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(160, 40, 40, 0.22));
}

.cpanel-main { padding: var(--space-6) var(--space-6) var(--space-6) var(--space-2); }
.cpanel-head { margin-bottom: var(--space-5); }
.cpanel-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 0; }

.cpanel-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-6);
}

/* ---- direct details ---- */
.cinfo-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.cinfo-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.cinfo-list li:first-child { padding-top: 0; }
.cinfo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 15px;
}
.cinfo-text { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.cinfo-text a { color: var(--muted); }
.cinfo-text a:hover { color: var(--red); }
.cinfo-copy { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0 0 var(--space-3); }
.cinfo-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-4);
}
.cinfo-note i { color: var(--red); }
/* Gmail and WhatsApp sit together as the two one-tap routes to a human. */
.cinfo-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cinfo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 100px;
  padding: 9px 18px;
  transition: background var(--dur-quick) var(--ease-standard),
              border-color var(--dur-quick) var(--ease-standard),
              color var(--dur-quick) var(--ease-standard);
}
.cinfo-gmail {
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
}
.cinfo-gmail:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.cinfo-gmail img { display: block; }
.cinfo-wa {
  color: #fff;
  background: #25D366;
  border: 1px solid #25D366;
}
.cinfo-wa:hover { background: #1ebe5d; border-color: #1ebe5d; color: #fff; }
.cinfo-wa i { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .cinfo-btn { transition: none; }
}

/* ---- form ---- */
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cfield { margin-bottom: var(--space-3); }
.cfield label {
  display: block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.cfield input,
.cfield textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text);
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: var(--target-min);
  transition: border-color var(--dur-quick) var(--ease-standard),
              background var(--dur-quick) var(--ease-standard);
}
.cfield textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.cfield input:focus,
.cfield textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--red);
}
.cform-actions { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.cform-submit { min-width: 200px; justify-content: center; }

.contact-map {
  margin-top: var(--space-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

/* ---- responsive ---- */
@media (max-width: 1199.98px) {
  .contact-panel { grid-template-columns: 230px 1fr; }
  .cpanel-art { margin-left: -34px; }
  .cpanel-cols { gap: var(--space-5); }
}

@media (max-width: 991.98px) {
  /* The handset moves above the content and shrinks — at this width a
     side-by-side split leaves neither column enough room. */
  .contact-panel { grid-template-columns: 1fr; }
  .cpanel-art { margin: -30px auto var(--space-2); padding: 0; }
  .cpanel-art img { max-width: 190px; margin: 0 auto; }
  .cpanel-main { padding: var(--space-5); }
  .cpanel-cols { grid-template-columns: 1fr; }
  .cpanel-head { text-align: center; }
}

@media (max-width: 575.98px) {
  .contact-stage { padding: 40px 0 64px; }
  .cform-row { grid-template-columns: 1fr; gap: 0; }
  .cform-actions { justify-content: stretch; }
  .cform-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cfield input,
  .cfield textarea { transition: none; }
}

/* ============================================================
   PROJECTS — status-accented cards
   ============================================================ */
.pj-section { padding-bottom: 96px; }
.pj-count { font-size: 13.5px; color: var(--muted); margin: 0 0 var(--space-4); }
.pj-count strong { font-family: var(--font-head); color: var(--text); }

.pj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--space-4);
}

/* Each status sets --pj-accent; the top rule, icon tile and pill all read it,
   so a status is recognisable before any of the text is. */
.pj-card {
  --pj-accent: var(--muted-2);
  --pj-accent-soft: rgba(120, 120, 128, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4) var(--space-4);
  overflow: hidden;
  transition: box-shadow var(--dur-quick) var(--ease-standard),
              transform var(--dur-quick) var(--ease-standard),
              border-color var(--dur-quick) var(--ease-standard);
}
.pj-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--pj-accent), transparent);
}
.pj-card:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: 0 18px 38px -26px rgba(0, 0, 0, 0.45);
}
.pj-card.is-red    { --pj-accent: var(--red); --pj-accent-soft: rgba(230, 0, 0, 0.08); }
.pj-card.is-green  { --pj-accent: #1f9254; --pj-accent-soft: rgba(31, 146, 84, 0.1); }
.pj-card.is-amber  { --pj-accent: #b6791b; --pj-accent-soft: rgba(182, 121, 27, 0.12); }
.pj-card.is-slate  { --pj-accent: #4a5568; --pj-accent-soft: rgba(74, 85, 104, 0.1); }

.pj-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.pj-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--pj-accent-soft);
  color: var(--pj-accent);
  font-size: 18px;
}
.pj-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pj-accent);
  background: var(--pj-accent-soft);
  border-radius: 100px;
  padding: 5px 11px;
  white-space: nowrap;
}
.pj-status i { font-size: 10px; }

.pj-title { font-size: 1.1rem; line-height: 1.35; margin: 0 0 8px; }
.pj-client {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted-2);
  margin: 0 0 var(--space-3);
}
.pj-client i { color: var(--pj-accent); font-size: 11px; }
.pj-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 var(--space-4); }

/* margin-top:auto pins the footer to the bottom so it lines up across a row
   of cards whose descriptions are different lengths. */
.pj-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.pj-division { color: var(--muted-2); }
.pj-budget { font-family: var(--font-head); font-weight: 700; color: var(--text); }

.pj-empty {
  text-align: center;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--space-7) var(--space-5);
}
.pj-empty i { font-size: 30px; color: var(--red); margin-bottom: var(--space-3); }
.pj-empty h2 { font-size: 1.3rem; margin: 0 0 var(--space-2); }
.pj-empty p { font-size: 14.5px; color: var(--muted); margin: 0 0 var(--space-4); }

@media (max-width: 575.98px) {
  .pj-grid { grid-template-columns: 1fr; }
  .pj-section { padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-card { transition: none; }
  .pj-card:hover { transform: none; }
}

/* Botpress chat removed — using custom AI Chat FAB in footer.php */

/* ================================================================
   QUOTE PAGE — Restyled
   ================================================================ */

/* Hero */
.q-hero {
  position: relative;
  padding: 56px 0 48px;
  background: #e8e5e3;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.q-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 300px at -5% 120%, rgba(225, 6, 0, 0.06), transparent 55%);
  z-index: 0;
}
.q-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(460px 260px at 90% -10%, rgba(230, 0, 0, 0.08), transparent 68%);
  z-index: 0;
  pointer-events: none;
}
.q-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.q-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.15;
}
.q-hero p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 540px;
}

/* Main section */
.q-section {
  padding: 48px 0 72px;
  background: #f3f1ef;
}

/* Card wrapper */
.q-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 36px 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Alert */
.q-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 0;
  margin-bottom: 32px;
  color: #f87171;
  font-size: 14px;
}
.q-alert i { margin-top: 2px; flex-shrink: 0; }
.q-alert ul { list-style: disc; padding-left: 18px; }

/* Step blocks */
.q-step {
  margin-bottom: 40px;
}
.q-step:last-child {
  margin-bottom: 0;
}
.q-step + .q-step {
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
}
.q-step-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.q-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}
.q-step-head h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.q-step-head p {
  color: var(--muted-2);
  font-size: 14px;
  margin: 0;
}

/* Company group */
.q-company-group {
  margin-bottom: 24px;
}
.q-company-group:last-child {
  margin-bottom: 0;
}
.q-company-label {
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.q-svc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.q-svc-row .q-svc {
  flex: 1 1 auto;
  min-width: 200px;
  max-width: calc(50% - 5px);
  margin-bottom: 0;
}
@media (max-width: 575.98px) {
  .q-svc-row .q-svc {
    max-width: 100%;
  }
}

/* Service cards */
.q-svc {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f7f6f5;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}
.q-svc:hover {
  border-color: var(--line);
  background: #f0eeed;
}
.q-svc-body {
  flex: 1;
  min-width: 0;
}
.q-svc-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}
.q-svc-desc {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.q-svc-check {
  display: none;
}
.q-svc-tick {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  color: transparent;
  font-size: 12px;
}
.q-svc.selected .q-svc-tick {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.q-svc.selected {
  border-color: var(--red);
  background: rgba(225, 6, 0, 0.08);
}

/* Form fields */
.q-field {
  margin-bottom: 16px;
}
.q-label {
  display: block;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 6px;
}
.q-label .req {
  color: var(--red);
}
.q-label-sub {
  font-weight: 400;
  color: var(--muted-2);
}
.q-input {
  width: 100%;
  background: #f7f6f5;
  border: 1px solid var(--line-soft);
  color: var(--text);
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.q-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.12);
}
.q-input::placeholder {
  color: var(--muted-2);
}
select.q-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.q-textarea {
  min-height: 120px;
  resize: vertical;
}
.q-field-hint {
  display: block;
  font-size: 12px;
  color: var(--muted-2);
  margin-top: 4px;
}

/* Submit button */
.q-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 28px;
  background: #25d366;
  color: #fff;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-top: 8px;
}
.q-submit:hover {
  background: #20bd5a;
  transform: translateY(-1px);
}
.q-submit:active {
  transform: translateY(0);
}
.q-submit i {
  font-size: 20px;
}

/* Sidebar */
.q-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 110px;
}
.q-sidebar-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.q-sidebar-title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

/* Benefits list */
.q-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}
.q-benefits li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.q-benefits li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.q-benefits li:first-child {
  padding-top: 0;
}
.q-ben-icon {
  display: none;
}
.q-benefits li div {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}
.q-benefits li strong {
  color: var(--text);
  font-weight: 600;
}
.q-benefits li span {
  font-size: 12.5px;
  color: var(--muted-2);
}

/* Contact items */
.q-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}
.q-contact-item:last-child {
  margin-bottom: 0;
}
.q-contact-item i {
  color: var(--red);
  width: 18px;
  text-align: center;
}

/* Responsive */
@media (max-width: 991.98px) {
  .q-card { padding: 24px 20px; }
  .q-sidebar { position: static; }
  .q-hero { padding: 40px 0 32px; }
  .q-hero h1 { font-size: 2rem; }
}
@media (max-width: 575.98px) {
  .q-card { padding: 20px 16px; }
  .q-step-head { gap: 12px; }
  .q-step-num { width: 32px; height: 32px; font-size: 14px; }
}

/* ============================================================
   MAGAZINE COVER — The Racio Times (AURA-style layout)
   ============================================================ */
.magazine-cover {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: auto;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
  background: linear-gradient(160deg, #1a0808 0%, #0c0606 40%, #1a0a0a 100%);
  color: #ffffff;
}

/* Top half: dark gradient with ghost watermark text */
.magazine-cover-top {
  position: relative;
  width: 100%;
  min-height: auto;
  z-index: 2;
  background: linear-gradient(160deg, #2a1010 0%, #1a0808 35%, #0c0606 100%);
  padding: 32px 48px 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Ghost watermark text scattered across background */
.cover-watermarks {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.cover-watermarks span {
  position: absolute;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  text-stroke: 1px rgba(255,255,255,0.06);
  user-select: none;
  pointer-events: none;
}
.cover-watermarks span.wm-1 { font-size: clamp(4rem, 10vw, 8rem); top: 5%; left: -5%; transform: rotate(-3deg); }
.cover-watermarks span.wm-2 { font-size: clamp(5rem, 12vw, 10rem); top: 15%; right: -8%; transform: rotate(2deg); }
.cover-watermarks span.wm-3 { font-size: clamp(3rem, 8vw, 6rem); top: 35%; left: 10%; transform: rotate(-1deg); }
.cover-watermarks span.wm-4 { font-size: clamp(6rem, 14vw, 12rem); top: 50%; right: 5%; transform: rotate(1.5deg); }
.cover-watermarks span.wm-5 { font-size: clamp(3.5rem, 9vw, 7rem); top: 70%; left: -3%; transform: rotate(-2deg); }
.cover-watermarks span.wm-6 { font-size: clamp(4.5rem, 11vw, 9rem); top: 80%; right: -5%; transform: rotate(0.5deg); }
.cover-watermarks span.wm-7 { font-size: clamp(2.5rem, 7vw, 5rem); top: 25%; left: 35%; transform: rotate(3deg); }
.cover-watermarks span.wm-8 { font-size: clamp(5.5rem, 13vw, 11rem); top: 60%; left: 20%; transform: rotate(-1.5deg); }

/* Top bar: volume/date left, tagline right */
.cover-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  width: 100%;
  position: relative;
  z-index: 1;
}
.cover-top-bar .cover-volume-date {
  opacity: 0.8;
}
.cover-top-bar .cover-tagline-right {
  text-align: right;
  line-height: 1.6;
  opacity: 0.7;
  font-size: 10px;
  letter-spacing: 0.12em;
}

/* Giant masthead title */
.cover-masthead {
  position: relative;
  z-index: 3;
  margin-top: 20px;
  text-align: center;
}
.cover-masthead h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.5rem, 9vw, 7rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 0.9;
  margin: 0;
  color: #f5e6d0;
  white-space: nowrap;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtitle under masthead */
.cover-tagline {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 14px;
  color: #f5e6d0;
}

/* Gold accent line */
.cover-accent-line {
  width: 90px;
  height: 4px;
  background: var(--cover-accent, #c8a97e);
  margin: 16px auto 0;
}

/* Feature blocks in the top half */
.cover-features-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 30px;
  padding-bottom: 20px;
}
.cover-feature-left {
  max-width: 48%;
}
.cover-feature-right {
  max-width: 35%;
  text-align: right;
}
.cover-feature h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--cover-accent, #c8a97e);
}
.cover-feature .cf-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  opacity: 0.75;
  margin: 0;
}

/* Gold divider line between top and bottom halves */
.cover-divider {
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, transparent 0%, var(--cover-accent, #c8a97e) 20%, var(--cover-accent, #c8a97e) 80%, transparent 100%);
  position: relative;
  z-index: 2;
}

/* Bottom half: lighter / white area with story */
.magazine-cover-bottom {
  position: relative;
  width: 100%;
  min-height: 65vh;
  background: #faf8f5;
  padding: 64px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Story features in bottom half */
.cover-story {
  max-width: 600px;
}
.cover-story h3 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #1a1a1e;
  color: #1a1a1a;
}
.cover-story .cs-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 8px;
}
.cover-story .cs-desc {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.65;
  color: #777;
  margin: 0;
}
.cover-story .cs-accent-line {
  width: 56px;
  height: 4px;
  background: var(--cover-accent, #c8a97e);
  margin: 14px 0;
}

/* LOCKED cover image — centred, overlaps both halves */
/* z-index:1 above watermarks (0), below masthead (3) */
.magazine-cover-locked {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 62%;
  max-width: 820px;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.magazine-cover-locked img {
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  display: block;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  filter: none;
  -webkit-filter: none;
}

/* Legacy admin-editable cover image (hidden) */
.magazine-cover-image {
  position: absolute;
  right: 5%;
  bottom: 10%;
  width: 40%;
  max-width: 400px;
  z-index: 3;
  pointer-events: none;
}
.magazine-cover-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,0.4));
}

/* Badge (bottom-right circle) */
.cover-badge {
  position: absolute;
  bottom: 60px;
  right: 28px;
  z-index: 4;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--cover-accent, #c8a97e);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cover-accent, #c8a97e);
  background: rgba(26,10,10,0.85);
  backdrop-filter: blur(4px);
}
.cover-badge .badge-icon {
  font-size: 16px;
  margin-bottom: 2px;
}

/* Bottom bar */
.cover-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: rgba(26,10,10,0.9);
  padding: 12px 28px;
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255,255,255,0.6);
}

/* Responsive */
@media (max-width: 768px) {
  .magazine-cover-top { padding: 24px 24px 0; min-height: 55vh; }
  .magazine-cover-bottom { padding: 40px 24px; min-height: 60vh; }
  .cover-masthead h1 { font-size: clamp(2.8rem, 11vw, 5rem); white-space: normal; overflow: visible; }
  .cover-features-top { flex-direction: column; gap: 16px; }
  .cover-feature-left, .cover-feature-right { max-width: 100%; text-align: left; }
  .magazine-cover-locked { width: 80%; top: 44%; }
  .magazine-cover-locked img { max-height: 70vh; }
  .magazine-cover-image { width: 55%; right: 0; bottom: 15%; }
  .cover-badge { width: 60px; height: 60px; font-size: 8px; bottom: 50px; right: 16px; }
}
@media (max-width: 480px) {
  .magazine-cover-top { padding: 16px 16px 0; min-height: 50vh; }
  .magazine-cover-bottom { padding: 28px 16px; min-height: 55vh; }
  .cover-masthead h1 { font-size: clamp(2rem, 14vw, 4rem); white-space: normal; overflow: visible; }
  .cover-tagline { font-size: 9px; letter-spacing: 0.14em; padding: 0 8px; }
  .cover-top-bar { font-size: 9px; padding: 0 4px; }
  .magazine-cover-locked { width: 88%; top: 42%; }
  .magazine-cover-locked img { max-height: 65vh; }
  .magazine-cover-image { width: 70%; }
}

/* Newspaper masthead (existing, keep consistent) */
.news-masthead .masthead-tagline { font-style: normal; }


/* ============================================================
   COMPREHENSIVE RESPONSIVE DESIGN
   Auto-detects device and adjusts layout for
   Desktop (≥992px), Tablet (768–991px), Mobile (≤767px)
   ============================================================ */

/* ── Global mobile resets ── */
@media (max-width: 991.98px) {
  .section { padding: 48px 0; }
  .section-sm { padding: 32px 0; }
  .display-head { font-size: clamp(1.8rem, 4vw, 2.8rem); }
  .lead-soft { font-size: 1rem; }
  .container { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 575.98px) {
  .section { padding: 36px 0; }
  .section-sm { padding: 24px 0; }
  .display-head { font-size: clamp(1.5rem, 5vw, 2.2rem); }
  .lead-soft { font-size: 0.95rem; }
  .container { padding-left: 16px; padding-right: 16px; }
  .btn { padding: 11px 20px; font-size: 0.85rem; }
  .btn-sm { padding: 8px 14px; font-size: 0.82rem; }
}

/* ── Hero section ── */
@media (max-width: 991.98px) {
  .hero { min-height: auto; padding: 48px 0 36px; }
  .hero-stats { gap: 32px; }
  .hero-stat .num { font-size: 1.7rem; }
}
@media (max-width: 575.98px) {
  .hero { min-height: 100vh; min-height: 100dvh; padding: 50px 0 130px; }
  .hero-stats { gap: 14px; flex-wrap: wrap; justify-content: center; }
  .hero-stat { display: flex; align-items: baseline; gap: 6px; }
  .hero-stat .num { font-size: 1.5rem; }
  .hero-stat .lbl { font-size: 11px; margin-top: 0; }
}

/* ── Navbar ── */
@media (max-width: 991.98px) {
  .navbar-rac .navbar-brand { padding: 10px 0; }
  .brand-mark { height: 64px; width: 64px; border-radius: 50%; padding: 6px; }
  .nav-search-inline { display: none !important; }
}
@media (max-width: 575.98px) {
  .brand-mark { height: 56px; width: 56px; border-radius: 50%; padding: 6px; }
  .navbar-rac .nav-link { font-size: 12px; padding: 18px 6px !important; }
}

/* ── Marquee ── */
@media (max-width: 575.98px) {
  .marquee { padding: 9px 0; transform: none; }
  .marquee-track span { font-size: 12px; letter-spacing: 0.1em; gap: 32px; }
}

/* ── Brand strip / trusted by ── */
@media (max-width: 991.98px) {
  .brand-strip-section { padding: 32px 0; }
  .brand-strip-track { gap: 24px; animation-duration: 20s; }
  .brand-strip-track img { height: 48px; max-width: 160px; }
  .cs-brand-strip .bs-item { width: 140px; height: 50px; padding: 0 16px; }
}
@media (max-width: 575.98px) {
  .brand-strip-section { padding: 24px 0; }
  .brand-strip-track { gap: 18px; animation-duration: 16s; }
  .brand-strip-track img { height: 36px; max-width: 120px; }
  .cs-brand-strip .bs-item { width: 110px; height: 42px; padding: 0 12px; }
}

/* ── Services / Company cards ── */
@media (max-width: 991.98px) {
  .service-card .c-icon { width: 56px; height: 56px; font-size: 24px; }
  .company-card .c-icon { width: 56px; height: 56px; font-size: 24px; }
  .company-card h3 { font-size: 1.1rem; }
}
@media (max-width: 575.98px) {
  .service-card .c-icon { width: 48px; height: 48px; font-size: 20px; margin-bottom: 12px; }
  .company-card .c-icon { width: 48px; height: 48px; font-size: 20px; margin-bottom: 12px; }
  .company-card h3 { font-size: 1rem; }
  .company-card p { font-size: 13px; }
}

/* ── Portfolio / Work cards ── */
@media (max-width: 991.98px) {
  .filter-bar { gap: 8px; margin-bottom: 28px; }
  .filter-btn { padding: 7px 14px; font-size: 12px; }
  .work-card .overlay { padding: 16px; }
  .work-card h4 { font-size: 1rem; }
}
@media (max-width: 575.98px) {
  .filter-bar { gap: 5px; margin-bottom: 16px; flex-wrap: wrap; justify-content: center; }
  .filter-btn { padding: 5px 10px; font-size: 10px; letter-spacing: 0.03em; }
  .work-card .overlay { padding: 10px; }
  .work-card h4 { font-size: 0.85rem; }
  .work-card .play { width: 44px; height: 44px; font-size: 14px; }
  .gallery-grid .work-card { aspect-ratio: 1 / 1; }
  .gallery-grid { gap: 8px !important; }
  .section { padding: 40px 0; }
  .section-sm { padding: 24px 0; }
  .page-hero { padding: 60px 0 40px; }
  .page-hero h1 { font-size: 1.6rem; }
}

/* ── Pricing / Package cards ── */
@media (max-width: 991.98px) {
  .price-card .p-name { font-size: 0.8rem; }
  .price-card .p-price { font-size: 1.3rem; }
  .price-card ul li { font-size: 13px; padding: 8px 0; }
  .pkg-contact-heading { font-size: 12px; }
  .pkg-contact-phones { font-size: 13px; }
}
@media (max-width: 575.98px) {
  .price-card .p-name { font-size: 0.75rem; margin-bottom: 8px; }
  .price-card .p-price { font-size: 1.2rem; }
  .price-card .p-desc { font-size: 12.5px; }
  .price-card ul li { font-size: 12px; padding: 7px 0; gap: 8px; }
  .price-card .p-cta .btn { width: 100%; justify-content: center; }
  .pkg-contact-bar { padding: 10px 16px; }
  .pkg-contact-heading { font-size: 11px; }
  .pkg-contact-phones { font-size: 11px; }
}

/* ── Testimonials ── */
@media (max-width: 991.98px) {
  .testi-card { padding: 28px 24px 24px; }
  .testi-card .quote-mark { font-size: 44px; margin-bottom: 12px; }
  .testi-card p { font-size: 14px; }
}
@media (max-width: 575.98px) {
  .testi-card { padding: 22px 18px 18px; }
  .testi-card .quote-mark { font-size: 36px; margin-bottom: 10px; }
  .testi-card p { font-size: 13px; margin-bottom: 18px; }
  .testi-card .who { font-size: 13px; }
  .testi-avatar { width: 40px; height: 40px; font-size: 15px; }
}

/* ── Blog cards ── */
@media (max-width: 991.98px) {
  .blog-card .b-meta { font-size: 11px; }
  .blog-card h4 { font-size: 1rem; }
}
@media (max-width: 575.98px) {
  .blog-card .b-thumb { aspect-ratio: 16/10; }
  .blog-card .b-meta { font-size: 10px; gap: 10px; margin-bottom: 8px; }
  .blog-card h4 { font-size: 0.9rem; line-height: 1.3; }
}

/* ── CTA band ── */
@media (max-width: 991.98px) {
  .cta-band { padding: 36px 32px; }
  .cta-band h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
}
@media (max-width: 575.98px) {
  .cta-band { padding: 28px 20px; }
  .cta-band h2 { font-size: clamp(1.2rem, 4vw, 1.6rem); }
  .cta-band p { font-size: 13px; }
  .cta-band .btn { width: 100%; justify-content: center; }
}

/* ── Contact strip ── */
@media (max-width: 991.98px) {
  .contact-strip { padding: 16px 0 28px; }
  .cs-clients-label { font-size: 10px; margin-bottom: 10px; }
}
@media (max-width: 575.98px) {
  .contact-strip .wave-shape::before,
  .contact-strip .wave-shape::after { width: 48px; }
  .cs-clients-label { font-size: 9px; margin-bottom: 8px; }
}

/* ── Footer ── */
@media (max-width: 991.98px) {
  .footer-main { flex-direction: column; gap: 16px; align-items: flex-start; }
  .f-contact-inline { flex-wrap: wrap; gap: 8px 20px; }
  .f-contact-inline li { font-size: 12px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .footer-bottom span { font-size: 12px; }
}
@media (max-width: 575.98px) {
  .footer-main { padding: 20px 0; }
  .f-contact-inline { gap: 6px 14px; }
  .f-contact-inline li { font-size: 11px; }
  .socials { gap: 12px; }
  .socials a { font-size: 14px; }
  .footer-bottom span { font-size: 11px; }
}

/* ── Photo divider ── */
@media (max-width: 991.98px) {
  .photo-divider { padding: 60px 0; }
  .photo-divider-text { font-size: clamp(1.2rem, 2.5vw, 1.8rem); max-width: 600px; }
}
@media (max-width: 575.98px) {
  .photo-divider { padding: 44px 0; }
  .photo-divider-text { font-size: clamp(1rem, 3.5vw, 1.4rem); padding: 0 16px; }
}

/* ── Specialty cards ── */
@media (max-width: 991.98px) {
  .specialty-card { aspect-ratio: 4/5; }
  .sp-badge { font-size: 10px; padding: 6px 14px; bottom: 50px; }
  .sp-title { font-size: 1.1rem; }
}
@media (max-width: 575.98px) {
  .specialty-card { aspect-ratio: 1/1; }
  .sp-badge { font-size: 9px; padding: 5px 12px; left: 12px; bottom: 44px; }
  .sp-title { font-size: 0.95rem; }
  .sp-overlay { left: 12px; bottom: 12px; }
}

/* ── Live panel ── */
@media (max-width: 991.98px) {
  .live-panel { border-radius: 4px; }
  .live-badge { font-size: 11px; padding: 6px 14px; margin-bottom: 14px; }
}
@media (max-width: 575.98px) {
  .live-badge { font-size: 10px; padding: 5px 12px; margin-bottom: 10px; }
  .live-frame .placeholder i { font-size: 36px; }
}

/* ── WhatsApp / Chat float buttons ── */
@media (max-width: 575.98px) {
  .fab-whatsapp { bottom: 16px; right: 16px; width: 52px; height: 52px; font-size: 26px; }
  .fab-chat { bottom: 80px; right: 16px; width: 52px; height: 52px; }
}

/* ── Ornamental divider ── */
@media (max-width: 575.98px) {
  .ornamental-divider { padding: 0 16px; gap: 12px; }
  .orn-diamond { width: 8px; height: 8px; }
}

/* ── Editor's Letter ── */
@media (max-width: 991.98px) {
  .ed-body { column-count: 1; }
  .ed-float-img { float: none; width: 100%; margin: 0 0 24px 0; }
}
@media (max-width: 575.98px) {
  .ed-header { margin-bottom: 24px; }
  .ed-title { font-size: 1.4rem; }
  .ed-body { font-size: 14px; line-height: 1.7; }
  .ed-float-wrap { padding: 0; }
  .ed-caption { font-size: 12px; margin-top: 10px; }
}

/* ── Page heroes (inner pages) ── */
@media (max-width: 991.98px) {
  .page-hero { padding: 48px 0 36px; }
}
@media (max-width: 575.98px) {
  .page-hero { padding: 36px 0 28px; }
}

/* ── Tablet-specific tweaks (768–991px) ── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-stats { gap: 36px; }
  .specialty-card { aspect-ratio: 4/5; }
  .cs-brand-strip .bs-item { width: 150px; height: 54px; }
}

/* ── Reduced motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .brand-strip-track, .cs-brand-strip .brand-strip-track { animation: none !important; }
  .wa-track { animation: none !important; }
  .specialty-card .sp-slider { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Touch device optimizations ── */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .filter-btn { min-height: 36px; }
  .nav-link { min-height: 44px; display: flex; align-items: center; }
  .work-card .play { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  .specialty-card:hover .sp-arrow { transform: none; }
}

/* ── Mobile comprehensive polish ── */
@media (max-width: 575.98px) {
  /* Hero */
  .hero { padding: 30px 0 36px; min-height: auto; }
  .hero .display-head, .hero-type-text { font-size: 1.7rem !important; }
  .hero .lead-soft { font-size: 0.95rem; }
  .hero .hero-about { font-size: 0.8rem; line-height: 1.5; padding: 0 8px; }
  .hero-stats { gap: 20px; justify-content: center; flex-wrap: wrap; }
  .hero-stat .num { font-size: 1.5rem; }
  .hero-stat .lbl { font-size: 10px; }
  .hero-quote-pill { font-size: 12px; padding: 8px 16px; margin: 12px 0 4px; }

  /* Sections */
  .section { padding: 36px 0; }
  .section-sm { padding: 20px 0; }
  .section-head h2 { font-size: 1.5rem; }
  .section-head .eyebrow { font-size: 10px; }
  .lead-soft { font-size: 0.95rem; }

  /* Page hero */
  .page-hero { padding: 32px 0 24px; }
  .page-hero h1 { font-size: 1.5rem; }
  .page-hero .eyebrow { font-size: 10px; }
  .page-hero .lead-soft { font-size: 0.85rem; }

  /* Gallery grid */
  .gallery-grid { gap: 6px !important; }
  .gallery-grid .work-card { aspect-ratio: 1 / 1; }
  .work-card img { border-radius: 2px; }

  /* Filter buttons */
  .filter-bar { gap: 4px; margin-bottom: 14px; justify-content: center; }
  .filter-btn { padding: 5px 10px; font-size: 10px; letter-spacing: 0.03em; }

  /* Specialty cards (Our Capabilities) */
  .specialty-card { aspect-ratio: 1 / 1; }
  .specialty-card img { border-radius: 4px; }
  .sp-title { font-size: 0.85rem; }
  .sp-overlay { padding: 10px; }

  /* Services / Company cards */
  .card-rac { padding: 1rem !important; }
  .card-rac h4 { font-size: 1rem; }
  .card-rac p { font-size: 12px; }

  /* Packages */
  .price-card { padding: 20px 16px; }
  .price-card .p-name { font-size: 0.75rem; }
  .price-card .p-price { font-size: 1.1rem; }
  .price-card ul li { font-size: 11px; padding: 6px 0; }

  /* Footer */
  .footer { padding: 12px 0; }
  .footer-bottom { padding: 10px 0; }
  .footer-bottom span { font-size: 11px; }
  .socials a { width: 28px; height: 28px; font-size: 12px; }
  .f-home-link { font-size: 10px; }

  /* Contact strip */
  .contact-strip { padding: 12px 0 20px; }
  .cs-clients-label { font-size: 9px; }
  .cs-brand-strip .bs-item { width: 100px; height: 38px; }

  /* Blog */
  .blog-card h4 { font-size: 0.85rem; }
  .blog-card .b-meta { font-size: 10px; }

  /* Testimonials */
  .testi-card { padding: 16px 14px; }
  .testi-card p { font-size: 12px; }

  /* Reel cards */
  .reel-card .reel-label { font-size: 12px; }

  /* CTA band */
  .cta-band { padding: 24px 16px; }
  .cta-band h2 { font-size: 1.2rem; }

  /* Prevent horizontal overflow */
  html, body { overflow-x: hidden; }
  .container { padding-left: 12px; padding-right: 12px; }

  /* Back to top */
  .to-top { width: 36px; height: 36px; font-size: 14px; bottom: 150px; }
}

/* ── Mobile gallery: force 2-col grid for photography portfolio ── */
@media (max-width: 575.98px) {
  .gallery-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .gallery-grid > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }
  .gallery-grid .work-card {
    aspect-ratio: 1 / 1;
  }
  .gallery-grid .work-card img {
    border-radius: 2px;
  }
}

/* ── Tablet polish (576-991px) ── */
@media (min-width: 576px) and (max-width: 991.98px) {
  .hero { padding: 40px 0; }
  .hero .display-head { font-size: 2.4rem; }
  .hero-stats { gap: 32px; }
  .filter-btn { padding: 7px 14px; font-size: 12px; }
  .gallery-grid .work-card { aspect-ratio: 4 / 5; }
  .specialty-card { aspect-ratio: 4 / 5; }
  .section { padding: 48px 0; }
}

/* ── Print styles ── */
@media print {
  .navbar-rac, .footer, .fab-whatsapp, .fab-chat, .marquee, .contact-strip, .live-panel { display: none !important; }
  .hero { min-height: auto; padding: 20px 0; }
  .section { padding: 20px 0; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}