/* ---------------- Global / base ---------------- */
:root { --ink:#080f17; --muted:#666; --maxw:960px; }


body {
  margin:0;
  font-family:Tahoma, sans-serif;
  color:var(--ink);
  background: linear-gradient(180deg,#ffffff 0%,#f8f9fb 100%);
}

/* ===== Navbar active underline (fixed alignment & specificity) ===== */
.navbar-dark .navbar-nav .nav-link {
  position: relative;
  padding-bottom: .25rem;
  display: inline-block;                /* ensure underline spans text width */
  transition: color .25s ease;
}

.navbar-dark .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #00bcd4;
  transition: width .25s ease;
}

.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .nav-link.active::after {
  width: 100%;                          /* show underline on hover + active */
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #00bcd4 !important;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #fff !important;
  font-weight: 700;
}

/* ---------------- Landing / hero ---------------- */
.landing {
  max-width:var(--maxw);
  margin:0 auto;
  padding:80px 16px 100px;
  text-align:center;
}
.brand-lockup img {
  max-width:260px; height:auto; margin-bottom:16px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));
}
h1 { font-size:clamp(28px,4vw,44px); margin:8px 0 6px; font-weight:800; }
h2 { font-size:clamp(16px,2.2vw,22px); font-weight:600; color:var(--ink); margin:0 0 6px; }
.kicker { color:var(--muted); margin:6px 0 28px; }

/* ---------------- Video wrapper ---------------- */
.video-wrap { margin:8px auto 28px; max-width:var(--maxw); }
.ratio-16x9 {
  position:relative; width:100%; aspect-ratio:16/9;
  background:#f8f9fb; border-radius:20px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.ratio-16x9 > video {
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* ---------------- Checklist ---------------- */
.points { max-width:760px; margin:32px auto 0; padding:0 16px; text-align:left; }
.points li { list-style:none; margin:12px 0; line-height:1.5; padding-left:36px; position:relative; }
.points li::before {
  content:"✓"; position:absolute; left:0; top:0; transform:translateY(2px);
  font-weight:900; font-size:20px; color:var(--ink);
}

/* ---------------- Footer ---------------- */
footer { margin-top:48px; color:var(--muted); font-size:.95rem; }

/* ---------------- Media page card helpers ---------------- */
.page { max-width:1100px; margin:0 auto; padding:60px 16px 100px; text-align:center; }
.video-card {
  background:#fff; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.08);
  overflow:hidden; transition:transform .2s ease;
}
.video-card:hover { transform:translateY(-4px); }
.video-thumb { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#000; }
.video-thumb img { width:100%; height:100%; object-fit:cover; }
.play-overlay {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:70px; height:70px; background:rgba(8,15,23,.75); border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease;
}
.play-overlay:hover { background:rgba(8,15,23,.9); }
.play-overlay::before {
  content:""; border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent #fff; margin-left:4px;
}
.card-body { padding:14px 10px 20px; }
.card-title { font-weight:700; font-size:1.1rem; }
.card-sub { color:#666; font-size:.95rem; }

/* Modal video player */
.modal-content { background:#000; border:none; border-radius:10px; overflow:hidden; }
.modal-body { padding:0; }
.modal-body video { width:100%; height:auto; display:block; }

.contact-hero {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 16px; /* tighter */
}
.contact-hero img {
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  max-width: 600px;
  width: 90%;
  height: auto;
}
.contact-caption {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 24px;
}

.contact-links {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
}
.contact-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  text-decoration: none;
  color: #0b4b75;
  font-weight: 600;
  transition: color 0.2s ease;
}
.contact-links a:hover {
  color: #00bcd4;
}

.contact-email .btn {
  padding: .2rem .5rem;
  line-height: 1.1;
}

/* SweetAlert: green Copy button with spacing */
.swal2-popup #modalCopyEmailBtn{
  all: unset !important;
  display: inline-block !important;
  margin-left: 10px !important;          /* ← space after email */
  padding: 6px 12px !important;
  background: #16a34a !important;        /* green 600 */
  color: #ffffff !important;
  border: 1px solid #16a34a !important;
  border-radius: 6px !important;
  font: 600 0.85rem/1.2 Tahoma, sans-serif !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

.swal2-popup #modalCopyEmailBtn:hover{
  background: #22c55e !important;        /* green 500 */
  border-color: #22c55e !important;
}
/* Card shell */
.contact-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  padding:24px 28px;
  max-width:520px;
  margin:24px auto 0;
  text-align:left;
}

/* Tidy inline spacing */
.contact-email a{ margin-left:6px; }
.copy-inline-btn{ margin-left:10px; }

/* Green copy button */
.copy-inline-btn{
  appearance:none;
  border:1px solid #16a34a;
  background:#16a34a;
  color:#fff;
  font:600 .85rem/1.2 Tahoma, sans-serif;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
}
.copy-inline-btn:hover{ background:#22c55e; border-color:#22c55e; }
.copy-inline-btn:active{ transform:translateY(1px); }
/* put label, link, and button on a single line */
.contact-row{
  display:flex;
  align-items:center;
  gap:10px;            /* space between items */
  margin:10px 0;
  flex-wrap:wrap;      /* stays tidy on small screens */
}

.contact-icon{ font-size:1.05em; }
.contact-label{ margin-right:2px; }

.contact-row a{
  margin:0;            /* kill paragraph spacing */
  line-height:1.2;
}


.copy-inline-btn{ margin-left:2px; }