/* =========================
   Base / Font / Colors
   ========================= */
.logo-img {
  height: 40px;
  width: auto;
}

.sentinelSite .nav li a {
  text-transform: initial;
}

.sentinelSite.home h1 {
  font-size: 64px !important;
  color: #FFFFFF;
  line-height: 120%;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.sentinelSite h1 { font-size: 64px !important; }
.sentinelSite h2 { font-weight: 600; font-size: 40px !important; line-height: 150%; }
.sentinelSite p  { font-size: 16px; color: #0F0F0FB2; }
.sentinelSite p.lead { color: #FFFFFF !important; }

.btn-small {
  font-size: 14px;
  background-color: #E04632;
  color: #FFFFFF !important;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  max-width: fit-content;
  transition: background-color 0.3s ease;
}
.btn-small:hover { background-color: #811c13; }

.btn-orange {
  font-size: 16px;
  background-color: #E04632;
  color: #FFFFFF !important;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.3s ease;
}
.btn-orange:hover { background-color: #811c13; }

.text-logo {
  color:#0F0F0F;
  font-weight:700;
  font-size:18px;
  line-height:1.2;
  padding:10px;
}
.sentinelSite footer p { color:#FFFFFF; }

.visually-hidden {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.section-muted { background:#F7F7F8; }
.kpi { font-weight:700; font-size:28px; color:#0F0F0F; }
.kpi small { display:block; font-weight:500; font-size:14px; color:#0F0F0FB2; }

.card-feature {
  border:1px solid #E9E9EA;
  border-radius:12px;
  padding:24px;
  height:100%;
}
.icon-circle {
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#FFF4F2;
  color:#E04632;
  font-weight:700;
}

html.overflow-hidden,
body.overflow-hidden {
  overflow: hidden;
}

/* =========================
   Swiper
   ========================= */
.swiper-pagination { position: relative; margin-top: 10px; }
.swiper-pagination-bullet { background:#E04632; opacity:1; }
.swiper-pagination-bullet-active { background:#811c13; }

/* =========================
   Header crossfade (Home)
   ========================= */
.header-bg{
  position: relative;
  overflow: hidden;
  --bg1: url('/assets/img/sentinel/header-city.png');
  --bg2: url('/assets/img/sentinel/header-city-2.png');
  --bg3: url('/assets/img/sentinel/header-city-3.png');
  --bg4: url('/assets/img/sentinel/header-city-4.png');
  --bg5: url('/assets/img/sentinel/header-city-5.png');
  --bg6: url('/assets/img/sentinel/header-city-6.png');
  --bg7: url('/assets/img/sentinel/header-city-7.png');
  --bg8: url('/assets/img/sentinel/header-city-8.png');
  --bg9: url('/assets/img/sentinel/header-city-9.png');
  --fade-duration: 54s;
  --count: 9;
}
.header-bg .bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  animation: headerCrossfade var(--fade-duration) ease-in-out infinite;
  pointer-events:none;
}
.header-bg .bg:nth-of-type(1){ background-image:var(--bg1); animation-delay: calc(var(--fade-duration)*0/var(--count)); }
.header-bg .bg:nth-of-type(2){ background-image:var(--bg2); animation-delay: calc(var(--fade-duration)*1/var(--count)); }
.header-bg .bg:nth-of-type(3){ background-image:var(--bg3); animation-delay: calc(var(--fade-duration)*2/var(--count)); }
.header-bg .bg:nth-of-type(4){ background-image:var(--bg4); animation-delay: calc(var(--fade-duration)*3/var(--count)); }
.header-bg .bg:nth-of-type(5){ background-image:var(--bg5); animation-delay: calc(var(--fade-duration)*4/var(--count)); }
.header-bg .bg:nth-of-type(6){ background-image:var(--bg6); animation-delay: calc(var(--fade-duration)*5/var(--count)); }
.header-bg .bg:nth-of-type(7){ background-image:var(--bg7); animation-delay: calc(var(--fade-duration)*6/var(--count)); }
.header-bg .bg:nth-of-type(8){ background-image:var(--bg8); animation-delay: calc(var(--fade-duration)*7/var(--count)); }
.header-bg .bg:nth-of-type(9){ background-image:var(--bg9); animation-delay: calc(var(--fade-duration)*8/var(--count)); }

.header-bg > *:not(.bg){ position:relative; z-index:1; }

@keyframes headerCrossfade{
  0%{opacity:0}
  4%{opacity:1}
  12%{opacity:1}
  16%{opacity:0}
  100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .header-bg .bg{ animation:none !important; }
  .header-bg .bg:nth-of-type(1){ opacity:1; }
}

/* =========================
   Video (Home)
   ========================= */
.video-band{
  position:relative;
  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding:72px 0 96px;
  background:#FBFBFB;
}
.video-card{
  margin:0 auto;
  max-width:1100px;
  border-radius:.5rem;
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.15);
  overflow:hidden;
  isolation:isolate;
}
.video-card::after{
  content:"";
  position:absolute;
  inset:auto 10% -40px 10%;
  height:80px;
  filter:blur(30px);
  background: radial-gradient(50% 60% at 50% 0%, rgba(224,70,50,.18), transparent 70%);
  z-index:-1;
}
.video-frame{ position:relative; width:100%; padding-top:56.25%; background:#000; }
.video-frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit: contain;
  background:#000;
}
.video-card.playing .video-frame video{ object-fit: cover; }

/* =========================
   Logos / Carousel
   ========================= */
.logo-bar{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:35px;
  overflow-x:auto;
  padding:60px 20px;
}
.logo-bar .text-logo{
  width:auto;
  min-width:100px;
  height:auto;
  font-size:16px;
  padding:0;
  white-space:nowrap;
}
.logo-bar img{ max-height:100px; width:auto; object-fit:contain; }
.scroll-wrapper{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.min-width-card{ min-width:300px; flex-shrink:0; scroll-snap-align:start; }

/* =========================
   Event card / CTA
   ========================= */
.event-card{ background-color:#FFFFFF; }
.event-card .badge{
  background-color:#333333 !important;
  color:#fff;
  padding:.4rem .8rem;
  border-radius:.5rem;
  font-size:13px;
}

.cta-demo{ background-color:#E04632; }
.cta-demo p{ color:#FFFFFF !important; }
.cta-demo .btn-contact{
  font-size:16px;
  background-color:#E04632;
  color:#FFFFFF !important;
  border:1px solid #FFFFFF;
  border-radius:.5rem;
  padding:.75rem 1.5rem;
  transition: background-color .3s ease;
}
.cta-demo .btn-contact:hover{
  background-color:#FFFFFF;
  color:#E04632 !important;
}

/* =========================
   Pricing
   ========================= */
.pricing-card{
  border:1px solid #E9E9EA;
  border-radius:16px;
  padding:24px;
  height:100%;
  background:#FFFFFF;
  box-shadow: 0 2px 10px rgba(15,15,15,.04);
}
.pricing-card.popular{
  border-color:#E04632;
  box-shadow:0 6px 24px rgba(224,70,50,.18);
  position:relative;
}
.pricing-badge{
  position:absolute;
  top:-12px;
  right:16px;
  background:#E04632;
  color:#fff;
  font-weight:600;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}
.price{
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin:6px 0 14px 0;
}
.price .amount{
  font-size:40px;
  line-height:1;
  font-weight:700;
  color:#0F0F0F;
}
.price .period{
  font-size:14px;
  color:#0F0F0FB2;
}

.feature-list{
  list-style:none;
  padding-left:0;
  margin:0;
}
.feature-list li{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-bottom:10px;
}
.feature-list .tick{
  width:22px;
  height:22px;
  border-radius:999px;
  background:#FFF4F2;
  color:#E04632;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  flex:0 0 22px;
}

.billing-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px;
  background:#FFFFFF;
  border:1px solid #E9E9EA;
  border-radius:999px;
}
.billing-toggle .label{ font-size:14px; color:#0F0F0F; }
.billing-toggle .save{
  background:#FFF4F2;
  color:#E04632;
  font-weight:600;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
}

.compare-table{ width:100%; border-collapse:collapse; }
.compare-table th,
.compare-table td{
  border-bottom:1px solid #E9E9EA;
  padding:12px 10px;
  font-size:14px;
}
.compare-table th{
  font-weight:600;
  color:#0F0F0F;
  background:#FFFFFF;
  position:sticky;
  top:0;
  z-index:1;
}
.compare-table .plan-col{ text-align:center; width:18%; white-space:nowrap; }

/* =========================
   Accordion (look & feel)
   ========================= */
.accordion.accordion--spacious .accordion-item{
  border:1px solid #E9E9EA;
  border-radius:12px;
  overflow:hidden;
  background:#FFFFFF;
  box-shadow:0 2px 10px rgba(15,15,15,.04);
}
.accordion.accordion--spacious .accordion-item + .accordion-item{ margin-top:12px; }

.accordion.accordion--spacious .accordion-button{
  padding:1.1rem 1.25rem;
  font-size:16px !important;
  font-weight:600;
  line-height:1.4;
  background:#FFFFFF;
  color:#0F0F0F;
}
.accordion.accordion--spacious .accordion-button:hover{ background:#FFF8F6; }
.accordion.accordion--spacious .accordion-button:not(.collapsed){
  background:#FFF4F2;
  color:#0F0F0F;
  box-shadow: inset 0 -1px 0 #F0F0F1;
}
.accordion.accordion--spacious .accordion-button::after{
  transform: rotate(0deg);
  transition: transform .3s ease;
  color:#666;
}
.accordion.accordion--spacious .accordion-button:not(.collapsed)::after{
  transform: rotate(180deg);
  color:#E04632;
}
.accordion.accordion--spacious .accordion-body{
  padding:1.25rem 1.25rem 1.4rem;
  font-size:16px !important;
  line-height:1.65;
}
.accordion.accordion--spacious .accordion-body p{ margin-bottom:.75rem; }
.accordion.accordion--spacious .accordion-body ul{
  list-style:disc !important;
  padding-left:1.25rem !important;
  margin:.25rem 0 1rem 0;
}
.accordion.accordion--spacious .accordion-body ul ul{
  list-style:circle !important;
  padding-left:1.25rem !important;
}
.accordion.accordion--spacious .accordion-body li{ margin-bottom:.35rem; }
.accordion.accordion--spacious .accordion-button:focus{
  box-shadow:0 0 0 .2rem rgba(224,70,50,.25);
  border-color:#F7C8C1;
}

/* =========================
   Martyn's Law
   ========================= */
.mlaw-hero{ border-bottom: 1px solid #F0F0F1; }
.mlaw-hero .kicker{
  display:inline-block;
  padding:.35rem .7rem;
  border-radius:999px;
  background:#F7F7F8;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#0F0F0F;
  font-weight:700;
}
.mlaw-hero .prose{ max-width: 860px; }
.mlaw-section{ padding-top: .25rem; padding-bottom: 1.25rem; }
.mlaw-section + .mlaw-section{
  border-top: 1px dashed #E9E9EA;
  margin-top: 1.25rem;
  padding-top: 1.75rem;
}
.prose p{ line-height: 1.7; }

.mlaw-aside{ position: sticky; top: 88px; }
.mlaw-aside .title{
  font-weight:700;
  font-size:14px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#0F0F0F;
}
.mlaw-aside .small{ font-size:13px; color:#6b6b6b; }
.mlaw-aside .pill{
  display:inline-block;
  padding:.25rem .55rem;
  border-radius:999px;
  background:#F7F7F8;
  font-size:12px;
}

.note{
  border:1px dashed #F0C5BD;
  background:#FFF8F6;
  color:#6b3b34;
  border-radius:12px;
  font-size:14px;
}

/* make sure the header row always vertically aligns */
.container.mt-20 .row.align-items-center {
  align-items: center !important;
}

/* =========================
   Mobile menu from 1600px
   ========================= */
@media (max-width: 1600px){
  /* keep logo block auto width */
  .container.mt-20 .col-2.d-flex.align-items-center {
    flex: 0 0 auto;
    width: auto;
  }

  /* make burger container only as wide as needed, push to right, and center content */
  .container.mt-20 .d-lg-none.col-8 {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    display: flex !important;
    align-items: center;
  }

  /* hide desktop-only parts */
  .container.mt-20 .d-lg-block {
    display: none !important;
  }

  /* show mobile-only parts */
  .container.mt-20 .d-lg-none {
    display: flex !important;
    align-items: center;
  }

  /* keep mobile menu hidden, JS will open it */
  #mobileMenu {
    display: none !important;
  }
}

/* real mobile menu display when JS adds .show */
#mobileMenu.show {
  display: block !important;
  background: #FFFFFF;
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  width: 100%;
  padding-bottom: .5rem;
}

/* center mobile list */
#mobileMenu .nav {
  flex-direction: column;
  align-items: center;
}
#mobileMenu .nav-link {
  font-size: 15px;
  font-weight: 500;
  color: #0F0F0F !important;
}
#mobileMenu .nav-link:hover {
  color: #E04632 !important;
}

/* space before login button inside mobile menu */
#mobileMenu .btn-small {
  margin-top: .75rem;
}

/* burger button style — now 40x40 to match logo */
#mobileMenuToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 40px;
  height: 40px;
  border: 1px solid #E9E9EA;
  border-radius: .5rem;
  background: #FFFFFF;
  padding: 0;
}
#mobileMenuToggle svg {
  width: 20px;
  height: 20px;
}

/* =========================
   Logo on small screens
   ========================= */
@media (max-width: 768px){
  /* keep a reasonable logo size */
  .logo-img {
    height: 40px !important;
    width: auto !important;
  }
}

/* =========================
   Responsive text etc.
   ========================= */

/* ≤992px */
@media (max-width: 992px){
  .sentinelSite h1 { font-size: 42px !important; }
  .sentinelSite h2 { font-size: 28px !important; }
  .btn-orange { font-size: 14px; padding: 16px 28px; }
  .btn-small { font-size: 13px; padding: 8px 18px; }
  .logo-bar { gap: 25px; padding: 40px 10px; }
  .logo-bar img { max-height: 70px; }
  .logo-bar .text-logo { font-size: 14px; min-width: 80px; }
  .container.text-center { padding-top: 60px !important; padding-bottom: 80px !important; }
  .information .btn-small { margin-bottom: 20px; }
}

/* ≤576px */
@media (max-width: 576px){
  .sentinelSite h1 { font-size: 32px !important; }
  .sentinelSite h2 { font-size: 22px !important; }

  .logo-bar { justify-content:flex-start; }
  .logo-bar::-webkit-scrollbar { display:none; }
  .text-logo { font-size: 13px; padding: 0; }

  .header-bg .row {
    flex-direction: column;
    text-align: center;
    padding: 15px 10px;
  }
  .header-bg .col-2,
  .header-bg .col-8 {
    width:100% !important;
    flex:0 0 100%;
  }
  .header-bg .col-2.text-end {
    text-align:center !important;
    margin-top:10px;
  }

  .btn-orange,
  .btn-small {
    width:100%;
    justify-content:center;
  }
  .d-flex.gap-2.mt-4 {
    flex-direction:column;
    gap:10px;
  }

  .pricing-card { padding:18px; }

  .accordion.accordion--spacious .accordion-button{ padding:1rem 1rem; }
  .accordion.accordion--spacious .accordion-body{ padding:1rem 1rem 1.1rem; }
}