* {
    box-sizing: border-box
}

:root {
    --orange: #EF8F00;
    --blue: #0038BC;
    --platinum: #EEEEEE;
    --ink: #0c1d3d;
    --muted: #5f6d83
}

html {
    scroll-behavior: smooth
}
/* Clean, scrollbar-free browsing — scrolling still works with wheel, touch and keyboard. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }


body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: "DM Sans",Arial,sans-serif
}

a {
    text-decoration: none;
    color: inherit
}

.site {
    width: min(100%,1500px);
    margin: auto;
    background: #fff
}

.header {
    height: 88px;
    padding: 0 7.5%;
    display: flex;
    align-items: center;
    gap: 45px;
    background: #fff
}

.logo {
    width: 205px;
    position: relative;
    line-height: .72;
    color: var(--blue)
}

.logo span {
    display: block;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -3px
}

.logo b {
    display: block;
    font-size: 22px;
    margin-left: 37px;
    color: #071633
}

.logo i {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--orange);
    top: 0;
    right: 19px
}

.logo small {
    display: block;
    font-size: 7px;
    color: #53617a;
    margin: 5px 0 0 38px;
    letter-spacing: .2px
}

.nav {
    margin: auto;
    display: flex;
    align-items: center;
    background: #fff;
    gap: 5px
}

.nav a {
    padding: 15px 20px;
    border-radius: 28px;
    font-size: 14px;
    font-weight: 600
}

.nav a.active {
    background: #f0f4fa;
    color: var(--blue)
}

.top-quote,.orange-btn,.blue-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    border-radius: 40px;
    font-weight: 700
}

.top-quote {
    background: var(--orange);
    color: #fff;
    padding: 8px 9px 8px 23px;
    font-size: 13px;
    white-space: nowrap
}

.top-quote span,.orange-btn span,.blue-btn span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--blue);
    font-size: 19px
}

.hero {
    position: relative;
    margin: 0 2%;
    height: 620px;
    border-radius: 32px;
    overflow: hidden
}

.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%
}

.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(0,0,0,.70),rgba(0,0,0,.08) 60%,rgba(0,0,0,.03))
}

.hero-content {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6%;
    z-index: 2
}

.hero-copy {
    color: #fff;
    padding-top: 25px
}

.eyebrow {
    font-size: 13px;
    letter-spacing: 7px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px
}

.eyebrow span {
    display: inline-block;
    width: 30px;
    height: 2px;
    background: var(--orange)
}

.hero h1 {
    font-size: 64px;
    line-height: 1.02;
    letter-spacing: -3px;
    margin: 0 0 20px;
    font-weight: 800
}

.hero h1 strong {
    color: var(--orange)
}

.hero-copy>p {
    font-size: 23px;
    line-height: 1.45;
    margin: 0 0 28px
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 25px
}

.orange-btn {
    background: var(--orange);
    color: #fff;
    padding: 8px 10px 8px 27px;
    font-size: 15px
}

.orange-btn span {
    background: #fff;
    color: var(--orange)
}

.watch-btn {
    display: flex;
    align-items: center;
    gap: 13px;
    font-weight: 600
}

.watch-btn i {
    font-style: normal;
    width: 45px;
    height: 45px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px
}

.reviews {
    display: flex;
    align-items: center;
    margin-top: 30px;
    gap: 16px
}

.faces {
    display: flex
}

.faces b {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: var(--blue);
    border: 3px solid #fff;
    margin-left: -9px;
    display: grid;
    place-items: center;
    font-size: 10px;
    color: #fff
}

.faces b:first-child {
    margin-left: 0;
}

.stars {
    color: #ffd21c;
    font-size: 20px;
    letter-spacing: 1px
}

.stars em {
    font-style: normal;
    color: #fff;
    font-size: 16px;
    margin-left: 8px
}

.stars small {
    display: block;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0;
    margin-top: 3px
}

.quote-card {
    width: 400px;
    background: #fff;
    border-radius: 25px;
    padding: 24px 22px 20px;
    box-shadow: 0 20px 50px #001b4030;
    margin-top: 5px
}

.quote-card h2 {
    text-align: center;
    font-size: 23px;
    line-height: 1.25;
    margin: 0 0 20px
}

.quote-card input,.quote-card select,.quote-card textarea {
    width: 100%;
    border: 0;
    background: #f0f3f8;
    border-radius: 12px;
    padding: 15px 16px;
    margin-bottom: 9px;
    font: 14px "DM Sans";
    color: #5d6b80;
    outline: none
}

.fields-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.quote-card textarea {
    height: 86px;
    resize: none
}

.quote-card button {
    width: 100%;
    border: 0;
    border-radius: 30px;
    background: var(--orange);
    color: #fff;
    padding: 16px;
    font: 700 14px "DM Sans";
    cursor: pointer
}

.quote-card button span {
    float: right;
    font-size: 20px;
    line-height: 12px
}

.about {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    padding: 36px 10% 18px
}

.tag {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 20px;
    background: #f0f3f8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px
}

.about h2,.services h2,.contact h2 {
    font-size: 37px;
    line-height: 1.18;
    letter-spacing: -1.5px;
    margin: 15px 0
}

.about h2 strong,.services h2 strong,.contact h2 strong {
    color: var(--orange)
}

.about-copy {
    padding-top: 7px
}

.about-copy p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0 0 18px
}

.about-actions {
    display: flex;
    align-items: center;
    gap: 25px
}

.blue-btn {
    background: var(--blue);
    color: #fff;
    padding: 7px 9px 7px 25px;
    font-size: 13px
}

.blue-btn span {
    background: var(--orange)
}

.callback {
    font-size: 13px;
    font-weight: 700
}

.callback b {
    font-size: 23px;
    margin-left: 12px
}

.stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    padding: 5px 10% 35px
}

.stats div {
    background: #f0f3f8;
    border-radius: 13px;
    text-align: center;
    padding: 24px
}

.stats strong {
    display: block;
    font: 700 40px Georgia,serif;
    margin-bottom: 8px
}

.stats span {
    font-size: 13px
}

.photo-section {
    margin: 0 10% 60px;
    border-radius: 25px;
    overflow: hidden;
    height: 350px
    width: 80%;

}

.photo-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%
}

.services {
    padding: 0 10% 65px
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.service-grid article {
    padding: 28px;
    background: var(--platinum);
    border-radius: 18px
}

.service-grid small {
    color: var(--orange);
    font-weight: 800
}

.service-grid h3 {
    font-size: 21px;
    margin: 15px 0 8px
}

.service-grid p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted)
}

/* Billing system links */
.billing-card {
    display: flex;
    flex-direction: column;
}

.billing-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.billing-btn {
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.billing-btn:hover {
    transform: translateY(-2px);
    opacity: .95;
}

.xenfi-btn {
    background: #0038bc;
}

.jellyfii-btn {
    background: #ef8f00;
}

@media (max-width: 520px) {
    .billing-buttons {
        flex-direction: column;
    }
}

.contact {
    margin: 0 10% 50px;
    background: transparent;
    border-radius: 0;
    padding: 38px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

footer {
    border-top: 1px solid #e3e7ee;
    padding: 25px 10%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #647085
}

footer b {
    color: var(--blue)
}

@media(max-width: 1000px) {
    .header {
        gap:15px;
        padding: 0 4%
    }

    .logo {
        width: 160px
    }

    .nav a {
        padding: 12px 10px;
        font-size: 12px
    }

    .top-quote {
        font-size: 11px
    }

    .hero {
        height: 720px
    }

    .hero-content {
        padding: 25px 5%;
        align-items: flex-start
    }

    .hero-copy {
        padding-top: 55px
    }

    .hero h1 {
        font-size: 52px
    }

    .quote-card {
        width: 350px;
        margin-top: 55px
    }

    .about,.stats,.photo-section,.services,.contact {
        margin-left: 5%;
        margin-right: 5%;
        padding-left: 0;
        padding-right: 0
    }
}

@media(max-width: 760px) {
    .header {
        height:auto;
        flex-wrap: wrap;
        padding: 16px 20px
    }

    .logo {
        width: auto;
        margin-right: auto
    }

    .nav {
        order: 3;
        width: 100%;
        overflow: auto;
        justify-content: flex-start
    }

    .nav a {
        white-space: nowrap
    }

    .hero {
        margin: 0 12px;
        height: 850px
    }

    .hero-content {
        padding: 30px 22px;
        display: block
    }

    .hero-copy {
        padding-top: 15px
    }

    .hero h1 {
        font-size: 44px
    }

    .hero-copy>p {
        font-size: 18px
    }

    .quote-card {
        width: 100%;
        margin-top: 35px
    }

    .about {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 40px 25px 15px
    }

    .stats {
        grid-template-columns: 1fr 1fr;
        padding: 10px 25px 30px
    }

    .photo-section {
        margin: 0 25px 40px;
        height: 260px
    }

    .services {
        padding: 0 25px 45px
    }

    .service-grid {
        grid-template-columns: 1fr
    }

    .contact {
        margin: 35px auto;
        padding: 30px 25px;
        display: block;
        max-width: 900px;
        background: transparent;
    }

    .contact .orange-btn {
        margin-top: 20px
    }

    footer {
        padding: 22px 25px;
        display: block
    }

    footer span {
        display: block;
        margin-top: 8px
    }
}

/* =========================================
   COLINZ NETWORK 16:9 IMAGE SLIDER
   ========================================= */

.colinz-image-slider {
    width: 100%;
    aspect-ratio: 16 / 10;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    isolation: isolate;
}

.colinz-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    /* Keeps the image widescreen without distortion */
    object-fit: cover;

    /* Center the image */
    object-position: center;

    opacity: 0;
    transform: scale(1.03);

    transition:
        opacity 1s ease-in-out,
        transform 6s ease-in-out;

    display: block;
}

.colinz-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* =========================================================
   COLINZ NETWORK - MOBILE RESPONSIVE PATCH
   ========================================================= */
@media (max-width: 768px) {
  .fields-2 { grid-template-columns: 1fr !important; }
  img { max-width: 100%; }
  .colinz-image-slider { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
  .colinz-slide { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 480px) {
  .quote-card { width: 100%; max-width: 100%; }
}


footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 22px 35px;

    background: #001a52;
    color: #eeeeee;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.footer-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

.footer-brand span {
    white-space: nowrap;
}

.copyright {
    font-size: 12px;
    color: rgba(238, 238, 238, 0.7);
    text-align: right;
}

/* Phone screens */
@media (max-width: 600px) {

    footer {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 24px 18px;
        gap: 12px;
    }

    .footer-brand {
        justify-content: center;
    }

    .copyright {
        text-align: center;
        font-size: 11px;
    }
}

.logo {
    position: relative;
    padding-left: 42px;
}

.logo img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    object-fit: contain;
}.logo {
    width: 190px;
    position: relative;
    padding-left: 42px;
    line-height: 1;
    color: var(--blue);
}

.logo img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.logo span {
    display: block;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -1.8px;
    white-space: nowrap;
}

.logo small {
    display: block;
    font-size: 7px;
    color: #53617a;
    margin: 5px 0 0 2px;
    letter-spacing: .2px;
    white-space: nowrap;
}


```css
/* =================================
   CONTACT SECTION
================================= */

.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 70px 8%;
}

.contact-text {
  flex: 1;
}

.contact h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.08;
}

.contact h2 strong {
  font-weight: 800;
}


/* =================================
   CONTACT BUTTONS
================================= */

.contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 200px;
}

.contact-btn {
  width: 100%;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;

  padding: 0 20px;
  box-sizing: border-box;

  border-radius: 12px;
  text-decoration: none;

  color: #ffffff;
  font-size: 15px;
  font-weight: 700;

  transition: transform 0.25s ease,
              box-shadow 0.25s ease;
}

.contact-btn:hover {
  transform: translateY(-3px);
}


/* =================================
   ICONS
================================= */

.contact-icon {
  width: 28px;
  height: 28px;

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

  font-size: 20px;
}


/* =================================
   WHATSAPP
================================= */

.whatsapp-btn {
  background: #25d366;
}

.whatsapp-btn:hover {
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.25);
}


/* =================================
   EMAIL
================================= */

.email-btn {
  background: #ef8f00;
}

.email-btn:hover {
  box-shadow: 0 8px 25px rgba(239, 143, 0, 0.25);
}


/* =================================
   CALL
================================= */

.call-btn {
  background: #0038bc;
}

.call-btn:hover {
  box-shadow: 0 8px 25px rgba(0, 56, 188, 0.25);
}


/* TIKTOK */
.tiktok-btn { background:#111111; border:1px solid rgba(255,255,255,0.16); }
.tiktok-btn:hover { box-shadow:0 8px 25px rgba(0,0,0,0.28); }


/* =================================
   MOBILE
================================= */

@media (max-width: 800px) {

  .contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    padding: 55px 6%;
  }

  .contact-buttons {
    width: 100%;
    max-width: 320px;
  }

}


/* =================================
   SMALL PHONES
================================= */

@media (max-width: 480px) {

  .contact {
    padding: 45px 20px;
  }

  .contact-buttons {
    max-width: 100%;
  }

  .contact h2 {
    font-size: 2rem;
  }

}
```

/* =========================================
   MOBILE QUOTE CARD - COMPACT PROFESSIONAL
   ========================================= */
@media (max-width: 760px) {
  .quote-card {
    width: min(100%, 340px);
    max-width: 340px;
    margin: 28px auto 0;
    padding: 18px 16px 16px;
    border-radius: 22px;
  }

  .quote-card h2 {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 15px;
  }

  .quote-card input,
  .quote-card select,
  .quote-card textarea {
    padding: 12px 14px;
    margin-bottom: 7px;
    border-radius: 11px;
    font-size: 13px;
  }

  .quote-card textarea {
    height: 68px;
  }

  .quote-card button {
    padding: 13px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .quote-card {
    width: calc(100% - 20px);
    max-width: 330px;
    padding: 17px 15px 15px;
    margin-top: 25px;
  }

  .quote-card h2 {
    font-size: 19px;
    margin-bottom: 13px;
  }
}


/* FINAL MOBILE QUOTE FIX */
@media (max-width: 760px) {
  .hero {
    height: auto !important;
    min-height: 900px !important;
    overflow: visible !important;
    padding-bottom: 35px !important;
  }

  .hero-content {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 30px 18px 0 !important;
  }

  .hero-copy {
    width: 100% !important;
    padding-top: 35px !important;
  }

  .quote-card {
    box-sizing: border-box !important;
    width: min(100%, 325px) !important;
    max-width: 325px !important;
    margin: 30px auto 0 !important;
    padding: 18px 16px 16px !important;
    border-radius: 20px !important;
  }

  .quote-card h2 {
    font-size: 19px !important;
    line-height: 1.18 !important;
    margin-bottom: 14px !important;
  }

  .quote-card input,
  .quote-card select,
  .quote-card textarea {
    box-sizing: border-box !important;
    padding: 11px 13px !important;
    margin-bottom: 6px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  .quote-card textarea {
    height: 68px !important;
    min-height: 68px !important;
  }

  .quote-card button {
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    min-height: 44px !important;
    font-size: 13px !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 380px) {
  .hero-content { padding-left: 12px !important; padding-right: 12px !important; }
  .quote-card { width: min(100%, 305px) !important; max-width: 305px !important; }
}

/* CLIENT REVIEWS */
.reviews-section {
  padding: 90px 7%;
  background: #eeeeee;
  color: #0b1736;
}
.reviews-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin: 14px 0 35px;
}
.reviews-heading h2 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}
.reviews-heading h2 strong { color: #ef8f00; }
.reviews-heading p { margin: 0; max-width: 560px; opacity: .72; }
.rating-summary {
  min-width: 130px;
  text-align: center;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,56,188,.12);
}
.rating-summary strong { display:block; font-size: 30px; }
.rating-summary span, .review-stars { color:#ef8f00; letter-spacing: 2px; }
.rating-summary small { display:block; margin-top: 4px; opacity:.65; }
.review-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.review-card, .review-form {
  border-radius: 22px;
  padding: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,56,188,.12);
  box-shadow: 0 12px 35px rgba(0,20,70,.08);
}
.featured-review { display:flex; flex-direction:column; justify-content:center; }
.featured-review p { font-size: 20px; line-height:1.5; margin:14px 0; }
.featured-review strong { opacity:.7; }
.review-form h3 { margin:0 0 16px; font-size:24px; }
.review-form input, .review-form select, .review-form textarea {
  width:100%; box-sizing:border-box; margin-bottom:10px; padding:12px 14px;
  border:1px solid rgba(0,56,188,.15); border-radius:11px; font:inherit; background:#fff;
}
.review-form textarea { resize:vertical; }
.review-form button {
  width:100%; border:0; border-radius:24px; padding:12px 18px; cursor:pointer;
  background:#ef8f00; color:#fff; font-weight:800; font:inherit;
}
.review-form button span { margin-left:8px; }
.review-form button:disabled { opacity:.7; cursor:wait; }
.review-note { display:block; margin-top:10px; opacity:.58; font-size:12px; }

@media (max-width:760px) {
  .reviews-section { padding: 60px 18px; }
  .reviews-heading { display:block; }
  .rating-summary { margin-top:20px; width:120px; }
  .review-layout { grid-template-columns:1fr; gap:16px; }
  .review-card, .review-form { padding:22px; border-radius:18px; }
  .featured-review p { font-size:17px; }
}

.review-list { margin-top: 24px; display: grid; gap: 12px; max-height: 420px; overflow-y: auto; scrollbar-width:none; -ms-overflow-style:none; }
.review-list::-webkit-scrollbar { width:0; height:0; display:none; }
.live-review { padding: 14px 0; border-top: 1px solid rgba(0,56,188,.10); }
.live-review-stars { color:#ef8f00; letter-spacing:1px; font-size:14px; }
.live-review p { margin:6px 0; font-size:15px; line-height:1.45; }
.live-review strong { font-size:13px; opacity:.7; }
.no-reviews { opacity:.6; font-size:14px; }

/* BALANCED CONTACT BOX */
.contact {
  width: min(100% - 32px, 1050px);
  margin: 50px auto;
  box-sizing: border-box;
  background: #eeeeee;
  border-radius: 22px;
  padding: 42px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
}

@media (max-width: 800px) {
  .contact {
    width: calc(100% - 32px);
    margin: 35px auto;
    padding: 32px 24px;
    gap: 28px;
    align-items: center;
  }

  .contact-text {
    width: 100%;
    text-align: center;
  }

  .contact-buttons {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* INNER PAGES — ABOUT + HOTSPOT SOLUTIONS */
.inner-page { background:#fff; color:#0b1736; }
.inner-page .header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); }
.inner-page .nav a { color:#0b1736; }
.inner-page .nav a.active { color:#0038bc; }
.page-hero { min-height:610px; padding:80px 7%; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:55px; background:linear-gradient(135deg,#f5f7fb 0%,#fff 60%); box-sizing:border-box; }
.page-hero-copy { max-width:680px; }
.page-hero h1 { margin:16px 0 18px; font-size:clamp(42px,6vw,76px); line-height:.98; letter-spacing:-2px; }
.page-hero h1 strong,.story-section h2 strong,.work-section h2 strong,.process-section h2 strong,.equipment-section h2 strong,.packages-section h2 strong,.coverage-section h2 strong,.cta-panel h2 strong { color:#ef8f00; }
.page-hero p { max-width:620px; font-size:18px; line-height:1.65; opacity:.72; }
.page-hero > img { width:100%; max-height:470px; object-fit:cover; border-radius:28px; box-shadow:0 25px 60px rgba(0,31,100,.15); }
.dark-watch { color:#0b1736!important; border-color:rgba(11,23,54,.18)!important; }
.story-section,.coverage-section { padding:95px 7%; display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start; }
.story-section h2,.work-section h2,.process-section h2,.equipment-section h2,.packages-section h2,.coverage-section h2 { font-size:clamp(34px,4.5vw,58px); line-height:1.04; margin:14px 0; letter-spacing:-1.5px; }
.story-copy { font-size:18px; line-height:1.8; opacity:.75; max-width:700px; }
.work-section { padding:95px 7%; background:#f4f6fa; }
.section-heading { display:flex; justify-content:space-between; gap:45px; align-items:end; margin-bottom:40px; }
.section-heading > p { max-width:510px; line-height:1.65; opacity:.68; }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.video-card { background:#fff; border:1px solid rgba(0,56,188,.1); border-radius:22px; overflow:hidden; box-shadow:0 15px 40px rgba(0,20,70,.07); }
.video-frame { aspect-ratio:16/9; background:#061331; }
.video-frame video { width:100%; height:100%; object-fit:cover; display:block; }
.video-card-body { padding:24px; }
.video-card-body > span,.equipment-card small { font-size:11px; font-weight:800; letter-spacing:1.5px; color:#0038bc; }
.video-card-body h3,.equipment-card h3,.package-card h3 { font-size:22px; margin:8px 0; }
.video-card-body p,.equipment-card p,.package-card p { line-height:1.55; opacity:.68; }
.video-card-body .blue-btn { display:inline-flex; margin-top:10px; }
.process-section { padding:95px 7%; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:38px; }
.process-grid article { padding:28px; border-radius:20px; background:#f4f6fa; border:1px solid rgba(0,56,188,.08); }
.process-grid b { color:#ef8f00; font-size:14px; }
.process-grid h3 { margin:18px 0 8px; font-size:22px; }
.process-grid p { line-height:1.55; opacity:.65; }
.cta-panel { width:min(100% - 32px,1050px); margin:35px auto 70px; padding:45px 50px; border-radius:24px; background:#eeeeee; display:flex; align-items:center; justify-content:space-between; gap:30px; box-sizing:border-box; }
.cta-panel h2 { margin:12px 0 0; font-size:clamp(30px,4vw,48px); line-height:1.05; }
.hotspot-hero > img { object-fit:contain; background:#fff; padding:30px; box-sizing:border-box; }
.equipment-section { padding:95px 7%; }
.equipment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.equipment-card { border:1px solid rgba(0,56,188,.1); border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 15px 40px rgba(0,20,70,.06); }
.equipment-card img { width:100%; height:220px; object-fit:contain; background:#f7f8fb; padding:22px; box-sizing:border-box; }
.equipment-card > div { padding:22px; }
.packages-section { padding:95px 7%; background:#0b1736; color:#fff; }
.packages-section h2 { color:#fff; }
.packages-intro { max-width:680px; opacity:.65; line-height:1.65; }
.package-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; align-items:stretch; }
.package-card { background:#fff; color:#0b1736; border-radius:24px; padding:28px; display:flex; flex-direction:column; border:2px solid transparent; }
.featured-package { border-color:#ef8f00; transform:translateY(-8px); }
.package-top { display:flex; justify-content:space-between; align-items:center; }
.package-top span { font-size:12px; font-weight:900; letter-spacing:1.5px; color:#0038bc; }
.package-top b { color:#ef8f00; }
.package-card ul { list-style:none; padding:0; margin:18px 0 25px; display:grid; gap:10px; }
.package-card li { position:relative; padding-left:22px; font-size:14px; opacity:.78; }
.package-card li::before { content:'✓'; position:absolute; left:0; color:#0038bc; font-weight:900; }
.package-btn { margin-top:auto; display:block; text-align:center; text-decoration:none; background:#0038bc; color:#fff; border-radius:28px; padding:13px 18px; font-weight:800; }
.package-btn:hover { background:#ef8f00; }
.coverage-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.coverage-list div { display:flex; align-items:center; gap:18px; padding:20px; border-bottom:1px solid rgba(0,56,188,.1); }
.coverage-list b { color:#ef8f00; font-size:13px; }
.coverage-list span { font-weight:700; }
@media(max-width:900px){.page-hero,.story-section,.coverage-section{grid-template-columns:1fr;gap:35px}.page-hero{padding:60px 6%}.video-grid,.equipment-grid,.package-grid{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr}.featured-package{transform:none}.section-heading{display:block}.section-heading>p{margin-top:10px}.cta-panel{padding:35px 28px}}
@media(max-width:650px){.inner-page .nav{display:none}.page-hero{min-height:auto;padding:55px 18px 45px}.page-hero h1{font-size:45px;letter-spacing:-1px}.page-hero p{font-size:16px}.page-hero > img{max-height:330px;border-radius:20px}.story-section,.work-section,.process-section,.equipment-section,.packages-section,.coverage-section{padding:65px 18px}.story-section{gap:20px}.video-grid,.equipment-grid,.package-grid,.process-grid{grid-template-columns:1fr}.equipment-card img{height:200px}.coverage-list{grid-template-columns:1fr}.cta-panel{width:calc(100% - 32px);margin:25px auto 45px;padding:30px 22px;display:flex;flex-direction:column;align-items:stretch;text-align:center}.cta-panel .orange-btn{justify-content:center}.section-heading{margin-bottom:28px}.package-card{padding:24px}.page-hero .hero-buttons{flex-wrap:wrap}.page-hero .orange-btn,.page-hero .watch-btn{width:100%;justify-content:center;box-sizing:border-box}}

/* PREMIUM CAPSULE NAVIGATION */
.header{position:relative;z-index:50;gap:22px;padding-left:5.5%;padding-right:5.5%;}
.nav{margin-left:auto;margin-right:0;gap:2px;padding:5px 8px;border-radius:999px;background:linear-gradient(135deg,#ef8f00,#d87900);box-shadow:0 10px 28px rgba(239,143,0,.18);white-space:nowrap;}
.nav a{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;color:#fff!important;padding:10px 13px;border-radius:999px;font-size:12px;line-height:1;white-space:nowrap;transition:.25s ease;}
.nav a.active{padding:10px 14px;min-width:max-content;}
.nav a:hover,.nav a.active{background:#fff;color:#0038bc!important;box-shadow:0 4px 12px rgba(0,0,0,.10);}
.top-quote{flex-shrink:0;}
.mobile-menu-btn,.mobile-nav{display:none;}
.package-price{margin:14px 0 2px;padding:13px 15px;border-radius:16px;background:linear-gradient(135deg,#f4f7fb,#fff);border:1px solid rgba(0,56,188,.10);}
.package-price small{display:block;font-size:9px;letter-spacing:1.4px;font-weight:800;opacity:.55;}
.package-price strong{display:block;margin-top:3px;color:#ef8f00;font-size:25px;letter-spacing:-.7px;}
.featured-package .package-price{border-color:rgba(239,143,0,.3);box-shadow:0 8px 20px rgba(239,143,0,.08);}
@media(max-width:1100px){.header{padding-left:3.5%;padding-right:3.5%;gap:12px}.nav a{padding:10px 9px;font-size:11px}.top-quote{font-size:11px;padding-left:15px;gap:8px}.top-quote span{width:30px;height:30px}.logo{width:170px}.logo span{font-size:30px}.logo small{font-size:6px;margin-left:30px}.nav{padding:4px 6px}}
@media(max-width:800px){.header{height:74px;padding:0 18px;gap:12px;position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);}.header .nav,.header .top-quote{display:none}.logo{width:165px}.logo span{font-size:29px;letter-spacing:-2.2px}.logo small{font-size:6px;margin-left:29px}.mobile-menu-btn{margin-left:auto;display:flex;width:45px;height:45px;border:0;border-radius:50%;background:var(--orange);align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;box-shadow:0 8px 18px rgba(239,143,0,.25)}.mobile-menu-btn span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;transition:.2s}.mobile-nav{position:absolute;display:flex;left:14px;right:14px;top:68px;padding:10px;background:linear-gradient(145deg,#ef8f00,#d87900);border-radius:24px;box-shadow:0 20px 45px rgba(0,0,0,.18);flex-direction:column;gap:4px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s ease;}.mobile-nav.open{opacity:1;visibility:visible;transform:none}.mobile-nav a{color:#fff;font-weight:700;padding:14px 16px;border-radius:15px}.mobile-nav a:hover,.mobile-nav a:focus{background:#fff;color:#0038bc}.mobile-nav .mobile-quote{margin-top:5px;background:#0038bc;text-align:center}.inner-page .header{position:sticky}.package-price strong{font-size:23px}}
@media(max-width:380px){.logo{width:145px}.logo span{font-size:25px}.mobile-menu-btn{width:42px;height:42px}}


/* SMART BACK-TO-TOP CONTROL */
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;align-items:center;gap:9px;padding:11px 15px 11px 11px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:linear-gradient(135deg,#ef8f00,#d87900);color:#fff;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.9px;box-shadow:0 14px 35px rgba(0,0,0,.22),0 5px 18px rgba(239,143,0,.25);opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);transition:opacity .3s ease,transform .3s ease,visibility .3s ease;backdrop-filter:blur(10px)}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
.back-to-top .top-icon{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0038bc;font-size:17px;line-height:1;box-shadow:inset 0 0 0 1px rgba(0,56,188,.08)}
.back-to-top:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.24),0 7px 22px rgba(239,143,0,.32)}
.back-to-top:focus-visible{outline:3px solid rgba(0,56,188,.35);outline-offset:3px}
@media(max-width:650px){.back-to-top{right:14px;bottom:14px;padding:9px 12px 9px 9px;font-size:10px;letter-spacing:.7px}.back-to-top .top-icon{width:29px;height:29px;font-size:16px}}


/* FINAL MOBILE NAV + FLOATING TOP FIX */
@media (max-width: 800px) {
  .header { position: sticky !important; top: 0 !important; z-index: 1000 !important; height: 74px !important; min-height: 74px !important; flex-wrap: nowrap !important; padding: 0 18px !important; box-sizing: border-box !important; }
  .header > .nav { display: none !important; }
  .header > .top-quote { display: none !important; }
  .mobile-menu-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 45px !important; width: 45px !important; height: 45px !important; margin-left: auto !important; }
  .mobile-nav { display: flex !important; position: absolute !important; z-index: 1100 !important; top: 68px !important; left: 14px !important; right: 14px !important; max-height: calc(100vh - 90px) !important; overflow-y: auto !important; }
  .mobile-nav:not(.open) { display: flex !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  .mobile-nav.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
}

.back-to-top {
  position: fixed !important;
  right: 18px !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  padding: 7px 13px 7px 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg,#ef8f00,#d87900) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .7px !important;
  line-height: 1 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.20),0 5px 18px rgba(239,143,0,.22) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) !important;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important;
}
.back-to-top.show { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; }
.back-to-top .top-icon { width: 29px !important; height: 29px !important; min-width: 29px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: #fff !important; color: #0038bc !important; font-size: 16px !important; line-height: 1 !important; }
@media (max-width: 380px) {
  .back-to-top { right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; min-height: 40px !important; padding: 6px 10px 6px 7px !important; font-size: 9px !important; }
  .back-to-top .top-icon { width: 27px !important; height: 27px !important; min-width: 27px !important; font-size: 15px !important; }
}

/* REVIEW MEDIA */
.review-upload{display:flex;flex-direction:column;gap:5px;margin:12px 0 2px;padding:14px;border:1px dashed rgba(0,56,188,.25);border-radius:14px;background:rgba(255,255,255,.45);cursor:pointer}
.review-upload span{font-weight:700;font-size:14px}.review-upload span b{font-weight:500;opacity:.55}
.review-upload small{font-size:11px;opacity:.6}.review-upload input{width:100%;font-size:12px}
.review-media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.review-media-item{display:block;width:100%;height:120px;object-fit:cover;border-radius:12px;background:#081a3d}
.review-media video{object-fit:contain}
@media(max-width:600px){.review-media-item{height:95px}.review-upload{padding:12px}}

/* CREATIVE FREE SITE SURVEY LAUNCHER */
.survey-launch-card{position:relative;width:400px;min-height:430px;box-sizing:border-box;padding:34px 32px 28px;border-radius:28px;overflow:hidden;color:#fff;background:radial-gradient(circle at 85% 8%,rgba(239,143,0,.28),transparent 28%),linear-gradient(145deg,#06235f 0%,#0038bc 58%,#082563 100%);box-shadow:0 24px 60px rgba(0,20,70,.28);border:1px solid rgba(255,255,255,.14)}
.survey-launch-card:before,.survey-launch-card:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.10);border-radius:50%;pointer-events:none}.survey-launch-card:before{width:230px;height:230px;right:-88px;top:-70px}.survey-launch-card:after{width:150px;height:150px;left:-70px;bottom:-86px}
.survey-orbit{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;margin-bottom:22px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);box-shadow:inset 0 0 0 7px rgba(255,255,255,.04),0 12px 30px rgba(0,0,0,.14)}.survey-orbit span{font-weight:900;font-size:17px;letter-spacing:1px}
.survey-launch-card .tag{color:#ffd596}.survey-launch-card h2{margin:12px 0;font-size:clamp(28px,3vw,40px);line-height:1.03;letter-spacing:-1.2px}.survey-launch-card h2 strong{color:#ffb53d}.survey-launch-card p{margin:0;line-height:1.55;font-size:14px;color:rgba(255,255,255,.82);max-width:330px}
.survey-points{display:grid;gap:9px;margin:22px 0 24px}.survey-points span{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:rgba(255,255,255,.88)}.survey-points b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:10px;background:rgba(255,255,255,.10);color:#ffd596}
.survey-launch{width:100%;border:0;border-radius:17px;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;background:#ef8f00;color:#fff;font:800 14px "DM Sans";box-shadow:0 12px 25px rgba(0,0,0,.18);transition:transform .2s ease,box-shadow .2s ease}.survey-launch:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(0,0,0,.22)}.survey-launch span{font-size:19px}.survey-launch-card>small{display:block;margin-top:11px;font-size:11px;color:rgba(255,255,255,.58);text-align:center}

/* FREE SITE SURVEY MODAL */
.survey-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}.survey-modal.open{opacity:1;visibility:visible;pointer-events:auto}.survey-backdrop{position:absolute;inset:0;background:rgba(1,10,28,.74);backdrop-filter:blur(10px)}.survey-dialog{position:relative;width:min(620px,100%);max-height:min(84vh,620px);overflow:auto;scrollbar-width:none;-ms-overflow-style:none;border-radius:24px;background:#f7f9fd;box-shadow:0 28px 70px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.72);padding:25px;transform:translateY(14px) scale(.985);transition:transform .24s ease}.survey-dialog::-webkit-scrollbar{display:none;width:0;height:0}.survey-modal.open .survey-dialog{transform:none}.survey-close{position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:#0b1736;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 7px 18px rgba(0,20,70,.10)}.survey-dialog-head{padding-right:42px}.survey-dialog-head .tag{color:#0038bc}.survey-dialog-head h2{margin:9px 0 7px;color:#0b1736;font-size:clamp(26px,4vw,38px);line-height:1.04;letter-spacing:-1.15px}.survey-dialog-head h2 strong{color:#ef8f00}.survey-dialog-head p{margin:0 0 14px;color:#5d6b80;line-height:1.45;font-size:13px}
.survey-form{width:100%;margin:0;padding:0;background:transparent;box-shadow:none;border:0}.survey-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.survey-form input,.survey-form select,.survey-form textarea{width:100%;box-sizing:border-box;border:1px solid rgba(0,56,188,.13);background:#fff;border-radius:12px;padding:11px 12px;margin:0;font:13px "DM Sans";color:#30415e;outline:none}.survey-form input:focus,.survey-form select:focus,.survey-form textarea:focus{border-color:#0038bc;box-shadow:0 0 0 3px rgba(0,56,188,.07)}.survey-form textarea{margin-top:8px;resize:vertical;min-height:78px}.survey-form button{width:100%;border:0;border-radius:14px;padding:12px 15px;margin-top:8px;background:#ef8f00;color:#fff;cursor:pointer;font:800 13px "DM Sans";display:flex;align-items:center;justify-content:space-between}.survey-form button:disabled{opacity:.7;cursor:wait}.survey-form-note{display:block;margin-top:7px;color:#66758d;font-size:10.5px;line-height:1.35}
body.survey-modal-open{overflow:hidden}
@media(max-width:900px){.survey-launch-card{width:100%;min-height:auto}}
@media(max-width:650px){.survey-launch-card{padding:26px 22px 23px;border-radius:22px}.survey-launch-card h2{font-size:31px}.survey-modal{padding:8px}.survey-dialog{padding:21px 15px 16px;border-radius:20px;max-height:86vh}.survey-dialog-head{padding-right:36px}.survey-dialog-head h2{font-size:29px}.survey-form-grid{grid-template-columns:1fr 1fr}.survey-close{right:11px;top:11px;width:34px;height:34px;font-size:20px}}
@media(max-width:430px){.survey-form-grid{grid-template-columns:1fr}.survey-dialog{max-height:88vh}}

.survey-photo-note{display:flex;align-items:center;gap:7px;margin-top:8px;color:#5d6b80;font:12px "DM Sans";line-height:1.3}.survey-photo-note input{width:15px;height:15px;margin:0;accent-color:#0038bc}.survey-photo-note b{font-weight:800;color:#7b8799}

/* MOBILE CONTENT SCALE — readable, balanced, and still compact */
@media (max-width: 760px) {
  .hero-copy {
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(40px, 11vw, 50px) !important;
    line-height: 1.02 !important;
    letter-spacing: -1.5px !important;
  }

  .hero-copy > p {
    font-size: 17px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  .about,
  .services,
  .contact {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .about h2,
  .services h2,
  .contact h2 {
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
  }

  .about-copy,
  .about-copy p,
  .service-grid p,
  .contact p {
    font-size: 15.5px !important;
    line-height: 1.7 !important;
  }

  .service-grid article {
    padding: 24px !important;
  }

  .service-grid h3 {
    font-size: 20px !important;
  }

  .stats div {
    padding: 19px 12px !important;
  }

  .stats strong {
    font-size: 32px !important;
  }

  .stats span {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .survey-launch-card {
    width: 100% !important;
    max-width: none !important;
    padding: 25px 22px 23px !important;
  }

  .survey-orbit {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 18px !important;
  }

  .survey-launch-card h2 {
    font-size: clamp(29px, 8vw, 36px) !important;
    line-height: 1.06 !important;
    letter-spacing: -1px !important;
  }

  .survey-launch-card p {
    font-size: 14.5px !important;
    line-height: 1.58 !important;
    max-width: none !important;
  }

  .survey-points {
    gap: 10px !important;
    margin: 19px 0 21px !important;
  }

  .survey-points span {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .survey-points b {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
  }

  .survey-launch {
    min-height: 48px !important;
    padding: 13px 15px !important;
    font-size: 13.5px !important;
  }

  .page-hero p,
  .story-copy,
  .section-heading > p,
  .packages-intro,
  .video-card-body p,
  .equipment-card p,
  .package-card p,
  .process-grid p,
  .coverage-list span {
    font-size: 15.5px !important;
    line-height: 1.68 !important;
  }

  .story-section h2,
  .work-section h2,
  .process-section h2,
  .equipment-section h2,
  .packages-section h2,
  .coverage-section h2 {
    font-size: clamp(32px, 8.5vw, 43px) !important;
    line-height: 1.06 !important;
  }

  .video-card-body,
  .equipment-card > div,
  .package-card {
    padding: 22px !important;
  }

  .video-card-body h3,
  .equipment-card h3,
  .package-card h3,
  .process-grid h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .package-card li {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .coverage-list div {
    padding: 16px 4px !important;
    gap: 13px !important;
  }
}

@media (max-width: 420px) {
  .hero {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  .hero-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero h1 {
    font-size: clamp(38px, 10.5vw, 46px) !important;
  }

  .hero-copy > p {
    font-size: 16px !important;
  }

  .about,
  .services,
  .contact,
  .story-section,
  .work-section,
  .process-section,
  .equipment-section,
  .packages-section,
  .coverage-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .survey-launch-card {
    padding: 23px 18px 21px !important;
  }
}

/* MOBILE FORM FIELDS — readable touch targets, not miniature boxes */
@media (max-width: 760px) {
  .review-form input,
  .review-form select,
  .review-form textarea,
  .survey-form input,
  .survey-form select,
  .survey-form textarea {
    font-size: 15.5px !important;
    line-height: 1.35 !important;
    padding: 13px 14px !important;
    min-height: 48px !important;
    border-radius: 13px !important;
  }

  .review-form textarea,
  .survey-form textarea {
    min-height: 104px !important;
    line-height: 1.5 !important;
  }

  .review-form input[type="file"] {
    min-height: 44px !important;
    padding: 10px 11px !important;
    font-size: 14px !important;
  }

  .review-upload {
    padding: 14px !important;
  }

  .survey-photo-note {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .survey-photo-note input {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    flex: 0 0 18px !important;
  }
}

@media (max-width: 420px) {
  .review-form input,
  .review-form select,
  .review-form textarea,
  .survey-form input,
  .survey-form select,
  .survey-form textarea {
    font-size: 15px !important;
    padding: 12.5px 13px !important;
  }

  .review-form textarea,
  .survey-form textarea {
    min-height: 100px !important;
  }
}

/* SURVEY MODAL — tighter composition, same comfortable fields */
.survey-dialog{
  width:min(560px,calc(100% - 24px));
  max-height:min(82vh,590px);
  padding:20px;
  border-radius:22px;
}
.survey-dialog-head{padding-right:40px}
.survey-dialog-head h2{margin:7px 0 5px;font-size:clamp(25px,3.4vw,34px);line-height:1.04}
.survey-dialog-head p{margin:0 0 10px;font-size:12.5px;line-height:1.35}
.survey-form-grid{gap:7px}
.survey-form input,.survey-form select,.survey-form textarea{padding:10px 12px;border-radius:11px}
.survey-form textarea{margin-top:7px;min-height:66px}
.survey-photo-note{margin-top:7px;font-size:11.5px;line-height:1.25;gap:6px}
.survey-form button{margin-top:7px;padding:11px 14px;border-radius:13px}
.survey-form-note{margin-top:6px;font-size:10px;line-height:1.25}

@media(max-width:650px){
  .survey-dialog{
    width:min(560px,calc(100% - 12px));
    padding:18px 14px 14px;
    border-radius:19px;
    max-height:87vh;
  }
  .survey-dialog-head{padding-right:34px}
  .survey-dialog-head h2{font-size:27px;margin:6px 0 5px}
  .survey-dialog-head p{font-size:12px;margin-bottom:9px;line-height:1.3}
  .survey-form-grid{gap:7px}
  .survey-form textarea{min-height:78px}
}

@media(max-width:430px){
  .survey-dialog{padding:17px 13px 13px;max-height:88vh}
  .survey-form-grid{grid-template-columns:1fr}
  .survey-dialog-head h2{font-size:26px}
  .survey-dialog-head p{font-size:11.7px}
  .survey-form textarea{min-height:82px}
}

/* Dynamic client rating + reviewer identity */
.hero-stars,
.stars .hero-stars { color:#ef8f00; }
.review-author { display:inline-flex; align-items:center; gap:8px; }
.client-avatar {
  width:30px;
  height:30px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  flex:0 0 30px;
  background:linear-gradient(135deg,#0038bc,#0a245f);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
  box-shadow:0 4px 12px rgba(0,56,188,.18);
}
.featured-review-content { display:flex; flex-direction:column; }

/* CREATIVE CONTACT POPUP */
.contact-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.contact-modal.open{opacity:1;visibility:visible;pointer-events:auto}
.contact-backdrop{position:absolute;inset:0;background:rgba(1,10,28,.78);backdrop-filter:blur(12px)}
.contact-dialog{position:relative;width:min(760px,100%);max-height:min(88vh,680px);overflow:auto;scrollbar-width:none;-ms-overflow-style:none;border-radius:28px;padding:28px;background:linear-gradient(145deg,#f9fbff 0%,#eef4ff 100%);border:1px solid rgba(255,255,255,.86);box-shadow:0 30px 90px rgba(0,10,40,.38);transform:translateY(18px) scale(.985);transition:transform .24s ease}
.contact-dialog::-webkit-scrollbar{display:none}
.contact-modal.open .contact-dialog{transform:none}
.contact-close{position:absolute;right:16px;top:16px;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#0a1736;font-size:23px;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(0,20,70,.12);z-index:2}
.contact-hero{position:relative;overflow:hidden;padding:10px 48px 22px 8px}
.contact-hero:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-74px;top:-90px;background:radial-gradient(circle,rgba(239,143,0,.28),rgba(239,143,0,0) 70%);pointer-events:none}
.contact-badge{width:60px;height:60px;border-radius:20px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:15px;background:linear-gradient(135deg,#0038bc,#082563);color:#fff;box-shadow:0 13px 28px rgba(0,56,188,.20)}
.contact-badge span{font-weight:900;letter-spacing:1px;font-size:16px}.contact-badge i{position:absolute;right:6px;top:6px;color:#ef8f00;font-style:normal;font-size:10px}
.contact-hero .tag{color:#0038bc}.contact-hero h2{margin:8px 0 7px;color:#0b1736;font-size:clamp(29px,4vw,43px);line-height:1.03;letter-spacing:-1.2px}.contact-hero h2 strong{color:#ef8f00}.contact-hero p{margin:0;max-width:610px;color:#5d6b80;font-size:13px;line-height:1.5}
.contact-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.contact-choice{min-height:76px;text-decoration:none;display:grid;grid-template-columns:42px 1fr 20px;align-items:center;gap:10px;padding:12px 13px;border-radius:17px;background:rgba(255,255,255,.82);border:1px solid rgba(0,56,188,.09);box-shadow:0 10px 24px rgba(0,20,70,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.contact-choice:hover{transform:translateY(-2px);box-shadow:0 15px 28px rgba(0,20,70,.10);border-color:rgba(0,56,188,.18)}
.choice-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#0038bc;color:#fff;font-size:18px;box-shadow:0 8px 17px rgba(0,56,188,.18)}
.contact-choice-wa .choice-icon{background:#0a9f58}.contact-choice-call .choice-icon{background:#ef8f00}.contact-choice-email .choice-icon{background:#0038bc}.contact-choice-tiktok .choice-icon{background:#111a2f}
.contact-choice b{display:block;color:#0b1736;font-size:14px}.contact-choice small{display:block;color:#718096;font-size:10.5px;line-height:1.3;margin-top:3px}.contact-choice em{font-style:normal;color:#0038bc;font-size:16px;font-weight:800;text-align:right}
.contact-footer-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:15px;background:#061b49;color:#fff}.contact-footer-line span{font-size:11px;color:rgba(255,255,255,.70)}.contact-footer-line a{color:#ffb53d;text-decoration:none;font-size:12px;font-weight:800}.contact-footer-line a b{margin-left:4px}
body.contact-modal-open{overflow:hidden}
@media(max-width:650px){.contact-modal{padding:8px}.contact-dialog{padding:22px 14px 14px;border-radius:22px;max-height:90vh}.contact-close{right:11px;top:11px;width:34px;height:34px;font-size:20px}.contact-hero{padding:4px 38px 18px 3px}.contact-badge{width:52px;height:52px;border-radius:17px;margin-bottom:12px}.contact-hero h2{font-size:29px}.contact-hero p{font-size:12px;line-height:1.42}.contact-choice-grid{grid-template-columns:1fr;gap:8px}.contact-choice{min-height:68px;padding:10px 11px}.contact-footer-line{align-items:flex-start;flex-direction:column;gap:4px;margin-top:10px}}


/* Official Colinz Network logo replaces CN placeholder marks */
.survey-orbit img { width:44px; height:44px; object-fit:contain; display:block; border-radius:12px; }
.contact-badge img { width:40px; height:40px; object-fit:contain; display:block; border-radius:10px; }
@media(max-width:650px){ .survey-orbit img{width:38px;height:38px}.contact-badge img{width:34px;height:34px} }

/* REFERENCE-STYLE MOBILE RIGHT SIDE MENU */
@media (max-width:800px){
  body.mobile-menu-open{overflow:hidden!important}
  .mobile-menu-btn{position:relative;background:transparent!important;box-shadow:none!important;border-radius:10px!important;width:44px!important;height:44px!important;gap:5px!important;z-index:1201}
  .mobile-menu-btn span{width:24px!important;height:2px!important;background:#0b1736!important;transition:transform .22s ease,opacity .18s ease!important}
  .mobile-menu-btn.is-open{visibility:hidden;opacity:0;pointer-events:none}
  .mobile-nav{position:fixed!important;top:0!important;right:0!important;left:auto!important;width:min(88vw,390px)!important;height:100dvh!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;display:flex!important;flex-direction:column!important;gap:0!important;padding:0 26px 28px!important;box-sizing:border-box!important;background:#f8faf9!important;color:#0b1736!important;border-radius:28px 0 0 28px!important;box-shadow:-22px 0 55px rgba(4,25,45,.18)!important;transform:translateX(104%)!important;opacity:1!important;visibility:hidden!important;pointer-events:none!important;transition:transform .32s cubic-bezier(.22,.8,.25,1),visibility .32s ease!important;z-index:1200!important}
  .mobile-nav.open{transform:translateX(0)!important;visibility:visible!important;pointer-events:auto!important}
  .mobile-nav-head{height:86px;min-height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(11,23,54,.09);margin:0 -26px;padding:0 22px 0 26px;box-sizing:border-box;background:rgba(255,255,255,.72)}
  .mobile-nav-brand{display:block;width:142px;height:54px;text-decoration:none}
  .mobile-nav-brand img{width:100%;height:100%;object-fit:contain;object-position:left center;display:block}
  .mobile-nav-close{width:46px;height:46px;border:0;background:transparent;color:#718096;font-size:39px;font-weight:300;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
  .mobile-nav-links{display:flex;flex-direction:column;padding:25px 0 10px}
  .mobile-nav-links a{display:flex!important;align-items:center;min-height:57px;padding:7px 0!important;border-radius:0!important;background:transparent!important;color:#0b1736!important;text-decoration:none!important;font-size:21px!important;line-height:1.2;font-weight:500!important;letter-spacing:-.35px;transition:color .2s ease,transform .2s ease!important}
  .mobile-nav-links a:hover,.mobile-nav-links a:focus{color:#0038bc!important;transform:translateX(4px)!important}
  .mobile-nav-links a[data-open-contact]{color:#0038bc!important;font-weight:700!important}
}
@media (max-width:380px){
  .mobile-nav{width:91vw!important;padding-left:22px!important;padding-right:22px!important;border-radius:23px 0 0 23px!important}
  .mobile-nav-head{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:18px}
  .mobile-nav-links a{font-size:19px!important;min-height:53px}
}

/* FINAL MOBILE MENU + MODALS RESPONSIVE FIX */
@media (max-width: 760px) {
  /* The hamburger stays visible so tapping it again closes the drawer. */
  .mobile-menu-btn.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .mobile-menu-btn {
    position: relative !important;
    z-index: 1301 !important;
  }
  .mobile-nav {
    z-index: 1300 !important;
  }

  /* Keep every modal inside the actual phone viewport. */
  .survey-modal,
  .contact-modal {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: 8px !important;
    overflow: hidden;
    place-items: center;
  }

  .survey-dialog,
  .contact-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Survey: compact enough for short phones while keeping comfortable controls. */
  .survey-dialog {
    padding: 16px 12px 12px !important;
    border-radius: 18px !important;
  }
  .survey-dialog-head {
    padding-right: 32px !important;
  }
  .survey-dialog-head h2 {
    font-size: clamp(23px, 7vw, 28px) !important;
    margin: 5px 0 4px !important;
  }
  .survey-dialog-head p {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  .survey-form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .survey-form input,
  .survey-form select {
    min-height: 42px !important;
    height: 42px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  .survey-form textarea {
    min-height: 66px !important;
    height: 66px !important;
    margin-top: 6px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  .survey-photo-note {
    margin-top: 6px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  .survey-photo-note input {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    flex-basis: 16px !important;
  }
  .survey-form button {
    min-height: 43px !important;
    height: 43px !important;
    margin-top: 6px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }
  .survey-form-note {
    margin-top: 5px !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  /* Contact: 2 x 2 choices prevent the desktop-sized vertical stack. */
  .contact-dialog {
    padding: 16px 12px 12px !important;
    border-radius: 19px !important;
  }
  .contact-hero {
    padding: 2px 34px 10px 2px !important;
  }
  .contact-badge {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
  }
  .contact-badge img {
    width: 30px !important;
    height: 30px !important;
  }
  .contact-hero h2 {
    font-size: clamp(23px, 7vw, 28px) !important;
    margin: 5px 0 4px !important;
  }
  .contact-hero p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .contact-choice-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    margin-top: 4px !important;
  }
  .contact-choice {
    min-height: 64px !important;
    grid-template-columns: 32px 1fr !important;
    gap: 7px !important;
    padding: 9px !important;
    border-radius: 13px !important;
  }
  .contact-choice .choice-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .contact-choice b {
    font-size: 12px !important;
  }
  .contact-choice small {
    font-size: 9px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
  }
  .contact-choice em {
    display: none !important;
  }
  .contact-footer-line {
    margin-top: 7px !important;
    padding: 9px 10px !important;
    gap: 3px !important;
    border-radius: 12px !important;
  }
  .contact-footer-line span,
  .contact-footer-line a {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 380px) {
  .survey-dialog,
  .contact-dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
  }
  .survey-dialog { padding: 13px 10px 10px !important; }
  .survey-form-grid { gap: 5px !important; }
  .survey-form input,
  .survey-form select { height: 40px !important; min-height: 40px !important; font-size: 12.5px !important; }
  .survey-form textarea { height: 60px !important; min-height: 60px !important; }
  .survey-dialog-head p { font-size: 11px !important; }
  .survey-form button { height: 41px !important; min-height: 41px !important; }
  .contact-dialog { padding: 13px 10px 10px !important; }
  .contact-choice { min-height: 60px !important; padding: 8px !important; }
}

/* FINAL PHONE VIEWPORT WIDTH FIX — keep the website edge-to-edge on every phone */
html, body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body {
  overflow-x: hidden !important;
}

.site,
main,
.header,
footer {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.site {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.footer-origin-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 5px;
}


.footer-built-in {
  color: #c8d0c8;
  line-height: 1.5;
  font-weight: 500;
  font-size: 5px;
}

.footer-back-to-top {
  color: #f5a623;
  text-decoration: none;
  font-weight: 100;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.footer-back-to-top:hover {
  color: #ffc45e;
}


@media (max-width: 760px) {
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .site {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .header {
    width: 100% !important;
    max-width: none !important;
  }

  main {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden !important;
  }

  /* Never let desktop-sized children create a narrow/zoomed mobile layout. */
  .hero,
  .about,
  .stats,
  .photo-section,
  .services,
  .contact,
  .reviews-section,
  .projects-section,
  .work-section,
  .process-section,
  .equipment-section,
  .packages-section,
  .coverage-section {
    max-width: none !important;
  }

  .mobile-menu-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* TikTok project players — keeps the original project covers until the visitor presses play. */
.tiktok-frame{position:relative;overflow:hidden;background:#061331;display:flex;align-items:center;justify-content:center}
.tiktok-cover{position:relative;width:100%;height:100%;padding:0;border:0;background:#061331;cursor:pointer;display:block}
.tiktok-cover img{width:100%;height:100%;object-fit:cover;display:block}
.tiktok-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,15,40,.04),rgba(3,15,40,.36))}
.tiktok-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);color:#0038bc;font-size:22px;box-shadow:0 12px 35px rgba(0,0,0,.28);transition:transform .2s ease}
.tiktok-cover:hover .tiktok-play{transform:translate(-50%,-50%) scale(1.08)}
.tiktok-frame .tiktok-embed{margin:0!important;width:100%!important;max-width:none!important;min-width:0!important;height:100%!important}
.tiktok-frame iframe{width:100%!important;height:100%!important;border:0!important;display:block!important}
.tiktok-project-player{background:#061331;display:block;min-height:100%;object-fit:contain}
.project-play{border:0;cursor:pointer;font:inherit}
@media (max-width: 700px){
  .tiktok-frame{aspect-ratio:9/16!important;min-height:420px;max-height:78vh}
  .tiktok-frame iframe.tiktok-project-player{height:100%!important;width:100%!important;min-height:100%!important;
    -webkit-transform:translateZ(0);transform:translateZ(0)}
}
@media (min-width: 701px){
  .tiktok-frame{aspect-ratio:16/9}
}


/* =========================================================
   COLINZ NETWORK — MEDIA FIT & SOFT CURVE FINAL FIX
   ========================================================= */
/* Home hero: keep the existing look but give the photo a subtle, clean curve. */
.hero {
  border-radius: 20px !important;
  overflow: hidden !important;
}
.hero-photo {
  border-radius: inherit !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* About page hero image: consistent crop, no distortion. */
.inner-page .page-hero > img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 20px !important;
  display: block !important;
}

/* Project cards: covers always fill their frame cleanly. */
.video-card {
  overflow: hidden !important;
}
.video-frame {
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  background: #061331 !important;
  position: relative !important;
}
.tiktok-cover,
.tiktok-cover img {
  width: 100% !important;
  height: 100% !important;
}
.tiktok-cover img {
  object-fit: cover !important;
  object-position: 58% center !important;
}
.tiktok-frame iframe,
.tiktok-frame iframe.tiktok-project-player {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  background: #061331 !important;
}

/* TikTok videos are vertical. Give them a portrait player on phones so
   there is no large empty area beside the actual video. */
@media (max-width: 700px) {
  .video-grid {
    grid-template-columns: 1fr !important;
  }
  .video-frame {
    aspect-ratio: 9 / 16 !important;
    max-height: 78vh !important;
  }
  .tiktok-cover img {
    object-fit: cover !important;
  }
}

/* On desktop, keep the three-card layout and make the covers edge-to-edge. */
@media (min-width: 701px) {
  .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .video-frame {
    aspect-ratio: 9 / 16 !important;
    max-height: 680px !important;
  }
}

/* Small screens: keep the About hero photo proportional and comfortably rounded. */
@media (max-width: 650px) {
  .inner-page .page-hero > img {
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
    max-height: none !important;
    border-radius: 18px !important;
  }
  .hero {
    border-radius: 18px !important;
  }
}


/* =========================================================
   PREMIUM PILL CTA BUTTONS — reference shape, ORIGINAL BRAND COLORS
   ========================================================= */
.top-quote,
.orange-btn,
.blue-btn,
.package-btn,
.quote-card button,
.survey-form button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 7px 8px 7px 27px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-sizing: border-box;
  box-shadow: 0 16px 25px rgba(0,0,0,.18);
  transition: transform .28s ease, box-shadow .28s ease;
  overflow: hidden;
}

/* Keep the original COLINZ NETWORK colors. */
.top-quote,
.orange-btn,
.survey-form button {
  background: #ef8f00 !important;
}

.blue-btn,
.package-btn,
.quote-card button {
  background: #0038bc !important;
}

/* Reference-style circular arrow area. */
.top-quote span,
.orange-btn span,
.blue-btn span,
.quote-card button span,
.survey-form button span {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  float: none !important;
  flex: 0 0 48px !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transition: transform .28s ease;
}

/* Preserve the original orange/blue color pairing inside each button. */
.top-quote span {
  background: #0038bc !important;
  color: #fff !important;
}

.orange-btn span {
  background: #fff !important;
  color: #ef8f00 !important;
}

.blue-btn span {
  background: #ef8f00 !important;
  color: #fff !important;
}

/* Empty arrow holder in the header button. */
.top-quote span::after {
  content: '→';
  display: block;
  transform: translateY(-1px);
}

/* Package buttons originally have no arrow span — keep that behavior. */
.package-btn {
  width: 100%;
  margin-top: auto;
  justify-content: center;
  padding: 14px 20px !important;
}

.quote-card button,
.survey-form button {
  width: 100%;
  cursor: pointer;
}

.top-quote:hover,
.orange-btn:hover,
.blue-btn:hover,
.package-btn:hover,
.quote-card button:hover,
.survey-form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 34px rgba(0,0,0,.24);
}

.top-quote:hover span,
.orange-btn:hover span,
.blue-btn:hover span,
.quote-card button:hover span,
.survey-form button:hover span {
  transform: translateX(4px);
}

@media (max-width: 650px) {
  .top-quote,
  .orange-btn,
  .blue-btn,
  .package-btn,
  .quote-card button,
  .survey-form button {
    min-height: 56px;
    padding: 6px 7px 6px 20px !important;
    gap: 12px;
    font-size: 14px !important;
  }

  .top-quote span,
  .orange-btn span,
  .blue-btn span,
  .quote-card button span,
  .survey-form button span {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    font-size: 22px !important;
  }

  .package-btn {
    padding: 12px 16px !important;
  }
}

/* Hide visible scrollbars everywhere while keeping scrolling fully functional. */
*, *::before, *::after {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*, *::before, *::after::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* ================= COLINZ POPUP NAVIGATION ================= */
.menu-toggle{position:fixed;top:20px;right:20px;width:52px;height:52px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(5,20,45,.78);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;z-index:10001;box-shadow:0 10px 35px rgba(0,0,0,.3);transition:.3s ease}
.menu-toggle:hover{transform:scale(1.05)}.menu-toggle span{width:23px;height:2px;background:#fff;border-radius:10px;transition:.3s ease}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:.35s ease;z-index:9998}.menu-overlay.active{opacity:1;visibility:visible}
.popup-menu{position:fixed;top:15px;right:15px;width:min(360px,calc(100% - 30px));padding:22px;border-radius:26px;background:linear-gradient(145deg,rgba(8,30,65,.97),rgba(2,12,30,.96));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);box-shadow:0 30px 80px rgba(0,0,0,.55);transform:translateY(-25px) scale(.94);opacity:0;visibility:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility .3s;z-index:10000}
.popup-menu.active{transform:translateY(0) scale(1);opacity:1;visibility:visible}.popup-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1)}.popup-header img{width:135px;max-height:45px;object-fit:contain}.menu-close{width:40px;height:40px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:.25s}.menu-close:hover{background:rgba(255,255,255,.15);transform:rotate(90deg)}
.menu-links{margin-top:14px}.menu-links a{display:flex;align-items:center;gap:15px;padding:15px 14px;margin:5px 0;color:#fff;text-decoration:none;border-radius:15px;font-family:Poppins,Arial,sans-serif;font-size:15px;font-weight:500;transition:.25s ease}.menu-links a:hover{background:rgba(30,120,255,.15);transform:translateX(5px)}.menu-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.08);color:#70b7ff;font-size:19px;flex-shrink:0}.menu-links a:hover .menu-icon{background:rgba(40,130,255,.25);color:#fff}
.popup-footer{margin-top:15px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:#fff;font-family:Poppins,Arial,sans-serif}.popup-footer span{display:block;font-size:13px;font-weight:700;letter-spacing:2px}.popup-footer small{display:block;margin-top:5px;color:rgba(255,255,255,.5);font-size:10px}
body.menu-open{overflow:hidden}
.menu-action-modal{position:fixed;inset:0;display:grid;place-items:center;padding:20px;box-sizing:border-box;opacity:0;visibility:hidden;pointer-events:none;transition:.25s ease;z-index:10010}.menu-action-modal.open{opacity:1;visibility:visible;pointer-events:auto}.menu-action-backdrop{position:absolute;inset:0;background:rgba(2,9,22,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.menu-action-dialog{position:relative;width:min(760px,100%);max-height:min(92dvh,900px);overflow:auto;border-radius:26px;background:#f8fafc;box-shadow:0 30px 100px rgba(0,0,0,.55);z-index:1}.menu-action-close{position:absolute;right:14px;top:14px;width:42px;height:42px;border:0;border-radius:13px;background:rgba(5,20,45,.88);color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:5}.appointment-popup-dialog{width:min(1050px,100%);height:min(92dvh,900px);overflow:hidden;background:#fff}.appointment-popup-dialog iframe{width:100%;height:100%;border:0;display:block}.feedback-popup-dialog{padding:42px 26px 26px}.feedback-popup-head{padding:4px 6px 12px}.feedback-popup-head h2{margin:8px 0;font-size:clamp(28px,4vw,42px);color:#0b1736}.feedback-popup-head h2 strong{color:#0038bc}.feedback-popup-head p{color:#65708a;margin:0 0 8px}.menu-feedback-form{margin:0}.menu-feedback-form input,.menu-feedback-form select,.menu-feedback-form textarea{width:100%;box-sizing:border-box;margin:6px 0;padding:14px 15px;border:1px solid rgba(11,23,54,.12);border-radius:14px;background:#fff;color:#0b1736;font:inherit}.menu-feedback-form button{width:100%;border:0;border-radius:14px;padding:15px 18px;background:#0038bc;color:#fff;font-weight:700;cursor:pointer}.menu-feedback-form button:disabled{opacity:.6}.menu-feedback-status{display:block;margin-top:10px}
@media(min-width:801px){.menu-toggle{display:none!important}.popup-menu,.menu-overlay,.menu-action-modal{ } }
@media(max-width:800px){.menu-toggle{display:flex}.header .nav,.header .top-quote{display:none!important}.mobile-menu-btn,.mobile-nav{display:none!important}.menu-toggle{top:14px;right:14px;width:48px;height:48px}.popup-menu{top:10px;right:10px;width:calc(100% - 20px);border-radius:24px}.menu-action-modal{padding:10px}.appointment-popup-dialog{height:calc(100dvh - 20px);border-radius:22px}.feedback-popup-dialog{max-height:calc(100dvh - 20px);border-radius:22px}}
/* The popup is intentionally available on desktop too when enabled by the page. */

/* ==========================================================
   VIDEO-STYLE POPUP NAVIGATION — COLINZ NETWORK
   Keeps the existing site intact; only changes the popup menu.
   Inspired by the supplied portrait video: compact top dropdown,
   white typography, no full-screen navigation panel.
   ========================================================== */
@media (max-width:800px){
  /* Compact MENU pill like the reference video */
  .menu-toggle{
    top:14px;
    right:14px;
    width:auto;
    min-width:118px;
    height:46px;
    padding:0 16px 0 18px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(8,8,8,.88);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    flex-direction:row;
    justify-content:space-between;
    gap:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.28);
    z-index:10001;
  }
  .menu-toggle::before{
    content:"MENU";
    color:#fff;
    font-family:Poppins,Arial,sans-serif;
    font-size:13px;
    font-weight:500;
    letter-spacing:.04em;
    line-height:1;
  }
  .menu-toggle span{
    width:19px;
    height:2px;
    margin:0;
    background:#fff;
    border-radius:2px;
    transition:transform .35s ease,opacity .2s ease;
  }
  .menu-toggle span:nth-of-type(1){transform:translateY(-4px)}
  .menu-toggle span:nth-of-type(2){transform:translateY(0)}
  .menu-toggle span:nth-of-type(3){transform:translateY(4px)}
  .menu-toggle[aria-expanded="true"] span:nth-of-type(1){transform:translateY(2px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-of-type(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-of-type(3){transform:translateY(-2px) rotate(-45deg)}

  /* No full-screen dark overlay — the menu itself is the popup */
  .menu-overlay{
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    pointer-events:none;
  }
  .menu-overlay.active{pointer-events:auto}

  /* The menu drops from the top and stops well before the bottom of the screen */
  .popup-menu{
    top:0;
    left:0;
    right:0;
    width:100%;
    max-height:min(560px,78dvh);
    overflow:auto;
    padding:0 22px 28px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.12);
    border-radius:0 0 16px 16px;
    background:#080808;
    box-shadow:0 24px 55px rgba(0,0,0,.38);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transform:translateY(-100%);
    opacity:1;
    visibility:hidden;
    transition:transform .5s cubic-bezier(.22,.75,.2,1),visibility 0s linear .5s;
    z-index:10000;
  }
  .popup-menu.active{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    transition:transform .5s cubic-bezier(.22,.75,.2,1),visibility 0s;
  }

  .popup-header{
    min-height:60px;
    padding:8px 0 8px;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .popup-header img{
    width:128px;
    max-height:42px;
    object-fit:contain;
    object-position:left center;
  }
  /* The reference uses the main MENU/X pill, so don't show a second close button. */
  .popup-header .menu-close{display:none}

  .menu-links{
    margin-top:28px;
    padding-bottom:0;
  }
  .menu-links a{
    justify-content:flex-start;
    gap:0;
    padding:0;
    margin:0 0 22px;
    color:#fff;
    border-radius:0;
    font-family:Poppins,Arial,sans-serif;
    font-size:clamp(28px,7vw,42px);
    line-height:1.05;
    font-weight:400;
    letter-spacing:-.025em;
    transition:opacity .2s ease,transform .2s ease;
  }
  .menu-links a:hover{
    background:transparent;
    transform:translateX(5px);
    opacity:.72;
  }
  .menu-links a:active{opacity:.55}
  .menu-icon{display:none}

  /* Match the clean reference: no extra footer text inside the menu. */
  .popup-footer{display:none}
}

/* ==========================================================
   MENU OPEN STATE — keep v22 design, only switch to white X
   ========================================================== */
@media (max-width:800px){
  .menu-toggle[aria-expanded="true"]{
    background:#fff;
    border-color:rgba(11,23,54,.10);
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    justify-content:center;
    min-width:52px;
    width:52px;
    padding:0;
  }
  .menu-toggle[aria-expanded="true"]::before{
    content:"×";
    color:#0b1736;
    font-family:Arial,sans-serif;
    font-size:34px;
    font-weight:300;
    line-height:1;
    letter-spacing:0;
  }
  .menu-toggle[aria-expanded="true"] span{
    display:none;
  }
}

/* ==========================================================
   V25 MENU FINISH — WHITE PANEL + BLACK TYPE + SMALL BLACK X
   Only the popup navigation appearance is changed.
   ========================================================== */
@media (max-width:800px){
  .popup-menu{
    background:#fff !important;
    border-bottom:1px solid rgba(11,23,54,.12) !important;
    box-shadow:0 24px 55px rgba(0,0,0,.18) !important;
  }

  .popup-header{
    border-bottom:1px solid rgba(11,23,54,.10) !important;
  }

  .menu-links a,
  .menu-links a:hover,
  .menu-links a:focus{
    color:#0b1736 !important;
    font-weight:700 !important;
    background:transparent !important;
  }

  /* Small black X, no circle/background, aligned with the logo row */
  .menu-toggle[aria-expanded="true"]{
    position:fixed !important;
    top:18px !important;
    right:18px !important;
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    justify-content:center !important;
    z-index:10002 !important;
  }

  .menu-toggle[aria-expanded="true"]::before{
    content:"×" !important;
    color:#0b1736 !important;
    font-family:Arial,sans-serif !important;
    font-size:30px !important;
    font-weight:400 !important;
    line-height:30px !important;
    letter-spacing:0 !important;
  }

  .menu-toggle[aria-expanded="true"] span{display:none !important;}
}

/* ==========================================================
   V26 MENU — HEADER-ALIGNED HAMBURGER + WHITE POPUP
   Closed: simple black three-line menu beside the logo.
   Open: same position becomes a small black X, no background.
   Popup: compact white panel with bold black links.
   ========================================================== */
@media (max-width:800px){
  .menu-toggle{
    position:fixed !important;
    top:18px !important;
    right:18px !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    z-index:10002 !important;
  }
  .menu-toggle::before{content:none !important;}
  .menu-toggle span{
    display:block !important;
    width:29px !important;
    height:3px !important;
    margin:0 !important;
    background:#0b1736 !important;
    border-radius:3px !important;
    transform:none !important;
    opacity:1 !important;
  }
  .menu-toggle[aria-expanded="true"]{
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    top:24px !important;
    right:22px !important;
    gap:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
  }
  .menu-toggle[aria-expanded="true"]::before{
    content:"×" !important;
    color:#0b1736 !important;
    font-family:Arial,sans-serif !important;
    font-size:30px !important;
    font-weight:400 !important;
    line-height:30px !important;
    letter-spacing:0 !important;
  }
  .menu-toggle[aria-expanded="true"] span{display:none !important;}

  .popup-menu{
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:min(560px,78dvh) !important;
    padding:0 22px 28px !important;
    background:#fff !important;
    border:0 !important;
    border-bottom:1px solid rgba(11,23,54,.12) !important;
    border-radius:0 0 16px 16px !important;
    box-shadow:0 24px 55px rgba(0,0,0,.14) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .popup-header{
    min-height:74px !important;
    padding:8px 0 !important;
    border-bottom:1px solid rgba(11,23,54,.10) !important;
  }
  .popup-header img{
    width:165px !important;
    max-height:48px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
  .popup-header .menu-close{display:none !important;}
  .menu-links{margin-top:28px !important;padding-bottom:0 !important;}
  .menu-links a,
  .menu-links a:hover,
  .menu-links a:focus{
    justify-content:flex-start !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 0 22px !important;
    color:#0b1736 !important;
    background:transparent !important;
    border-radius:0 !important;
    font-family:Poppins,Arial,sans-serif !important;
    font-size:clamp(28px,7vw,42px) !important;
    line-height:1.05 !important;
    font-weight:700 !important;
    letter-spacing:-.025em !important;
    transform:none !important;
    opacity:1 !important;
  }
  .menu-icon{display:none !important;}
  .popup-footer{display:none !important;}
  .menu-overlay{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;pointer-events:none !important;}
  .menu-overlay.active{pointer-events:none !important;}
}

/* ==========================================================
   V27 — COMPACT HEADER MENU / SMOOTH LINKS
   Keep the v26 look, but keep the hamburger in the sticky header,
   make the three lines smaller, tighten the menu typography/spacing,
   and stagger the menu links when the panel opens.
   ========================================================== */
@media (max-width:800px){
  .header{
    position:sticky !important;
    top:0 !important;
    z-index:1001 !important;
  }

  .menu-toggle{
    position:absolute !important;
    top:50% !important;
    right:16px !important;
    transform:translateY(-50%) !important;
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    z-index:10003 !important;
  }
  .menu-toggle:hover{transform:translateY(-50%) !important;}
  .menu-toggle span{
    display:block !important;
    width:24px !important;
    height:2px !important;
    background:#0b1736 !important;
    border-radius:3px !important;
    transform:none !important;
    opacity:1 !important;
  }

  .menu-toggle[aria-expanded="true"]{
    position:absolute !important;
    top:50% !important;
    right:17px !important;
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
    transform:translateY(-50%) !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    z-index:10003 !important;
  }
  .menu-toggle[aria-expanded="true"]:hover{transform:translateY(-50%) !important;}
  .menu-toggle[aria-expanded="true"]::before{
    content:"×" !important;
    color:#0b1736 !important;
    font-family:Arial,sans-serif !important;
    font-size:24px !important;
    font-weight:400 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }
  .menu-toggle[aria-expanded="true"] span{display:none !important;}

  .popup-menu{
    max-height:min(520px,72dvh) !important;
    padding:0 20px 20px !important;
    overflow:auto !important;
  }
  .popup-header{
    min-height:70px !important;
    padding:8px 0 !important;
  }
  .popup-header img{
    width:150px !important;
    max-height:44px !important;
  }
  .menu-links{
    margin-top:18px !important;
  }
  .menu-links a,
  .menu-links a:hover,
  .menu-links a:focus{
    padding:0 !important;
    margin:0 0 11px !important;
    font-size:21px !important;
    line-height:1.15 !important;
    letter-spacing:-.015em !important;
    font-weight:700 !important;
    transform:none !important;
    opacity:1 !important;
    transition:transform .36s cubic-bezier(.2,.8,.2,1), opacity .36s ease, color .2s ease !important;
  }

  .popup-menu:not(.active) .menu-links a{
    opacity:0;
    transform:translateY(-8px);
  }
  .popup-menu.active .menu-links a{
    animation:colinzMenuLinkIn .42s cubic-bezier(.2,.8,.2,1) both;
  }
  .popup-menu.active .menu-links a:nth-child(1){animation-delay:.04s}
  .popup-menu.active .menu-links a:nth-child(2){animation-delay:.08s}
  .popup-menu.active .menu-links a:nth-child(3){animation-delay:.12s}
  .popup-menu.active .menu-links a:nth-child(4){animation-delay:.16s}
  .popup-menu.active .menu-links a:nth-child(5){animation-delay:.20s}
  .popup-menu.active .menu-links a:nth-child(6){animation-delay:.24s}
}

@keyframes colinzMenuLinkIn{
  from{opacity:0;transform:translateY(-9px)}
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .popup-menu,
  .popup-menu .menu-links a{animation:none !important;transition:none !important;}
}


/* ==========================================================
   V28 — DESKTOP HEADER NAV + MOBILE X MENU
   Desktop/wide: show the six main options directly in the header.
   Mobile/small: keep the compact hamburger in the header; when opened,
   it becomes a small X and the existing popup menu remains available.
   ========================================================== */
@media (min-width:801px){
  .header{
    position:relative !important;
    z-index:1000 !important;
    display:flex !important;
    align-items:center !important;
  }
  .header > .nav{
    display:flex !important;
    align-items:center !important;
    margin-left:auto !important;
    gap:6px !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    white-space:nowrap !important;
  }
  .header > .nav a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#0b1736 !important;
    background:transparent !important;
    padding:8px 10px !important;
    border-radius:9px !important;
    font-size:13px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:-.01em !important;
    box-shadow:none !important;
    transition:background .22s ease,color .22s ease,transform .22s ease !important;
  }
  .header > .nav a:hover,
  .header > .nav a:focus-visible,
  .header > .nav a.active{
    background:rgba(0,56,188,.08) !important;
    color:#0038bc !important;
    transform:translateY(-1px) !important;
    box-shadow:none !important;
  }
  .header > .menu-toggle{display:none !important;}
  .popup-menu,
  .menu-overlay{display:none !important;}
}

@media (min-width:801px) and (max-width:1100px){
  .header > .nav{gap:2px !important;}
  .header > .nav a{padding:7px 7px !important;font-size:12px !important;}
}

@media (max-width:800px){
  /* Mobile keeps the popup navigation and uses the header hamburger/X. */
  .header > .nav{display:none !important;}
  .header > .mobile-menu-btn,
  .header > .mobile-nav{display:none !important;}
  .header > .menu-toggle{display:flex !important;}
  .menu-toggle span{width:22px !important;height:2px !important;}
  .menu-toggle[aria-expanded="true"]::before{
    content:"×" !important;
    color:#0b1736 !important;
    font-size:25px !important;
    font-weight:400 !important;
    line-height:1 !important;
  }
}


/* V29 — keep the mobile close X above the white menu panel */
@media (max-width:800px){
  .header{
    position:sticky !important;
    top:0 !important;
    z-index:10001 !important;
  }
  .header > .menu-toggle{
    z-index:10003 !important;
  }
  .popup-menu{
    z-index:10000 !important;
  }
  .menu-toggle[aria-expanded="true"]{
    z-index:10003 !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .menu-toggle[aria-expanded="true"]::before{
    content:"×" !important;
    display:block !important;
    color:#0b1736 !important;
    font-family:Arial,sans-serif !important;
    font-size:25px !important;
    font-weight:400 !important;
    line-height:28px !important;
  }
}

/* V30 — DESKTOP ORANGE NAV ORGANIZER + ACTIVE WHITE TAB */
@media (min-width: 801px) {
  .header > .nav {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 5px 7px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ef8f00, #d87900) !important;
    box-shadow: 0 10px 28px rgba(239,143,0,.18) !important;
    white-space: nowrap !important;
  }

  .header > .nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: transparent !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background .28s ease, color .28s ease, box-shadow .28s ease, transform .28s ease !important;
  }

  .header > .nav a:hover,
  .header > .nav a:focus-visible {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
  }

  /* Current/open page gets the white tab shown in the reference. */
  .header > .nav a.active,
  .header > .nav a[aria-current="page"],
  .header > .nav a[aria-current="true"] {
    background: #fff !important;
    color: #0038bc !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .header > .nav { gap: 1px !important; padding: 4px 6px !important; }
  .header > .nav a { padding: 9px 9px !important; font-size: 11px !important; }
}

@media(max-width:800px){.mobile-nav-links a.active{color:#0038bc!important;font-weight:800!important}}

/* V35: Products item in the mobile popup navigation */
@media (max-width:800px){
  .popup-menu .menu-links a.popup-active{color:#f2a000!important;font-weight:600!important;}
  .popup-menu .menu-links a.popup-active .menu-icon{color:#f2a000!important;background:rgba(239,143,0,.16)!important;}
}


/* V40 FINAL MOBILE MENU SCROLL BEHAVIOR
   The background page remains scrollable while the popup menu is open;
   the popup menu itself has its own touch/wheel scroll when its content is taller than the screen. */
@media(max-width:800px){
  body.menu-open, body.mobile-menu-open{overflow:auto!important;overflow-x:hidden!important;}
  .popup-menu{max-height:calc(100dvh - 14px)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;}
}


/* V42 — MENU BEHAVIOR ONLY
   Keep the existing menu appearance exactly as-is. While the menu is open,
   the page behind it cannot scroll or receive clicks/touches. The menu itself
   remains interactive and can scroll if its own content requires it.
*/
@media (max-width:800px){
  html.menu-locked, body.menu-open{
    overflow:hidden !important;
    overflow-x:hidden !important;
    overscroll-behavior:none !important;
  }
  .menu-overlay{
    pointer-events:none !important;
  }
  .menu-overlay.active{
    pointer-events:auto !important;
    touch-action:none !important;
  }
  .popup-menu{
    touch-action:auto !important;
    overscroll-behavior:contain !important;
  }
}

.footer-origin-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 36px;
}


.footer-built-in {
  color: #c8d0c8;
  font-size: clamp(14px, 2.8vw, 28px);
  line-height: 1.5;
  font-weight: 500;
}

.footer-back-to-top {
  color: #f5a623;
  text-decoration: none;
  font-size: clamp(14px, 2.8vw, 28px);
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.footer-back-to-top:hover {
  color: #ffc45e;
}

@media (max-width: 600px) {
  .footer-origin-row {
    gap: 8px 20px;
  }
}

/* FOOTER TEXT SIZE — MATCH COPYRIGHT ON DESKTOP AND MOBILE */
.footer-origin-row,
.footer-built-in,
.footer-back-to-top {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

@media (max-width: 600px) {
  .footer-origin-row,
  .footer-built-in,
  .footer-back-to-top {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 600px) {
  footer {
    gap: 3px !important;
  }

  .copyright {
    margin: 0 !important;
    line-height: 0.6 !important;
  }

  .footer-origin-row {
    margin: 0 !important;
    line-height: 0.6 !important;
  }
}

/* =========================================================
   ABOUT PAGE STYLES — scoped to body.about-page
   Combined from about.css; declarations retained.
   ========================================================= */
/* Page-specific styles consolidated from about.html in source order */
:where(body.about-page) .founder-section{
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 7%;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
}
:where(body.about-page) .founder-copy h2{
  font-size: clamp(38px,5vw,64px);
  line-height: 1.02;
  letter-spacing: -2.5px;
  margin: 16px 0 20px;
}
:where(body.about-page) .founder-copy h2 strong{
  color: #ef8f00;
}
:where(body.about-page) .founder-copy p{
  max-width: 650px;
  color: #687384;
  line-height: 1.75;
  font-size: 14px;
  margin: 0 0 15px;
}
:where(body.about-page) .founder-copy .founder-lead{
  font-size: 17px;
  color: #172033;
  margin-bottom: 12px;
}
:where(body.about-page) .founder-copy .founder-lead strong{
  color: #101522;
}
:where(body.about-page) .founder-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 25px;
}
:where(body.about-page) .founder-photo-wrap{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 34px;
  background: linear-gradient(145deg,#f3f6fa,#fff);
  overflow: hidden;
  border: 1px solid #e7ebf0;
  box-shadow: 0 24px 60px rgba(20,32,55,.10);
}
:where(body.about-page) .founder-photo-glow{
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(239,143,0,.20),rgba(239,143,0,0) 70%);
  top: 20px;
  right: -40px;
}
:where(body.about-page) .founder-photo-wrap img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 22px 25px rgba(10,20,40,.16));
}
:where(body.about-page) .founder-caption{
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 24px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(220,225,232,.8);
  border-radius: 16px;
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 25px rgba(20,32,55,.08);
}
:where(body.about-page) .founder-caption strong{
  font-size: 13px;
}
:where(body.about-page) .founder-caption span{
  font-size: 10px;
  color: #727c8a;
  margin-top: 3px;
}
@media(max-width:850px) {
  :where(body.about-page) .founder-section{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 65px 6%;
  }
  :where(body.about-page) .founder-photo-wrap{
    min-height: 500px;
  }
  :where(body.about-page) .founder-copy h2{
    letter-spacing: -1.7px;
  }
}
@media(max-width:600px) {
  :where(body.about-page) .founder-section{
    padding: 55px 18px;
  }
  :where(body.about-page) .founder-photo-wrap{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 26px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 22px 25px rgba(10,20,40,.16));
  }
  :where(body.about-page) .founder-caption{
    left: 15px;
    bottom: 15px;
  }
  :where(body.about-page) .founder-actions a{
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}
/* About hero: use the existing opening image as a full background behind the copy. */
:where(body.about-page) .about-image-hero{
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: 610px;
  overflow: hidden;
  background-image: url("images/opening.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 0;
}
:where(body.about-page) .about-image-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.52) 42%,rgba(255,255,255,.12) 78%,rgba(255,255,255,0) 100%);
  pointer-events: none;
}
:where(body.about-page) .about-image-hero .page-hero-copy{
  position: relative;
  z-index: 1;
  max-width: 720px;
}
:where(body.about-page) .about-image-hero > img{
  display: none !important;
}
@media(max-width:650px) {
  :where(body.about-page) .about-image-hero{
    min-height: 620px !important;
    padding: 55px 18px 45px !important;
    background-position: center center !important;
  }
  :where(body.about-page) .about-image-hero::before{
    background: linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.60) 48%,rgba(255,255,255,.18) 100%);
  }
}


/* =========================================================
   FOUNDER PAGE STYLES — scoped to body.founder-page
   Combined from founder.css; declarations retained.
   ========================================================= */
/* Page-specific styles consolidated from founder.html in source order */
:where(body).founder-page{
  background: linear-gradient(180deg,#f7f8fa,#fff 35%,#f6f7f9);
  font-family: "DM Sans",system-ui,sans-serif;
  color: #101522;
}
:where(body.founder-page) .founder-hero{
  max-width: 1180px;
  margin: 0 auto;
  padding: 78px 7%;
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 70px;
  align-items: center;
}
:where(body.founder-page) .founder-hero h1{
  font-size: clamp(48px,6vw,82px);
  line-height: .96;
  letter-spacing: -4px;
  margin: 16px 0 20px;
}
:where(body.founder-page) .founder-hero h1 strong{
  color: #ef8f00;
}
:where(body.founder-page) .founder-hero p{
  color: #687384;
  font-size: 15px;
  line-height: 1.75;
  max-width: 650px;
  margin: 0 0 15px;
}
:where(body.founder-page) .founder-kicker{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: #7b8592;
  text-transform: uppercase;
}
:where(body.founder-page) .founder-portrait{
  min-height: 620px;
  position: relative;
  border-radius: 36px;
  background: linear-gradient(145deg,#edf2f7,#fff);
  border: 1px solid #e5eaf0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: 0 26px 70px rgba(20,32,55,.12);
}
:where(body.founder-page) .founder-portrait:after{
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  right: -90px;
  top: -80px;
  background: radial-gradient(circle,rgba(239,143,0,.18),transparent 70%);
}
:where(body.founder-page) .founder-portrait img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 25px rgba(10,20,40,.15));
}
:where(body.founder-page) .founder-label{
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 24px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  border: 1px solid #e3e7ec;
  border-radius: 16px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
}
:where(body.founder-page) .founder-label strong{
  font-size: 14px;
}
:where(body.founder-page) .founder-label span{
  font-size: 10px;
  color: #727c8a;
  margin-top: 3px;
}
:where(body.founder-page) .founder-values{
  background: #fff;
  padding: 85px 7%;
}
:where(body.founder-page) .founder-values-inner{
  max-width: 1050px;
  margin: auto;
}
:where(body.founder-page) .founder-values h2{
  font-size: clamp(34px,4.5vw,58px);
  letter-spacing: -2px;
  margin: 12px 0 20px;
}
:where(body.founder-page) .founder-values h2 strong{
  color: #ef8f00;
}
:where(body.founder-page) .founder-values-grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  margin-top: 35px;
}
:where(body.founder-page) .founder-value{
  padding: 25px;
  border: 1px solid #e7ebf0;
  border-radius: 22px;
  background: #fafbfc;
}
:where(body.founder-page) .founder-value b{
  font-size: 12px;
  color: #0038bc;
}
:where(body.founder-page) .founder-value h3{
  margin: 9px 0 7px;
  font-size: 18px;
}
:where(body.founder-page) .founder-value p{
  font-size: 12.5px;
  color: #707b89;
  line-height: 1.6;
  margin: 0;
}
:where(body.founder-page) .founder-cta{
  max-width: 1050px;
  margin: 65px auto;
  padding: 38px;
  border-radius: 28px;
  background: #101a2d;
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
}
:where(body.founder-page) .founder-cta h2{
  margin: 5px 0;
  font-size: 30px;
  letter-spacing: -1px;
}
:where(body.founder-page) .founder-cta p{
  color: #c7ced8;
  font-size: 13px;
  line-height: 1.5;
  max-width: 650px;
}
:where(body.founder-page) .founder-cta a{
  background: #ef8f00;
  color: #fff;
  text-decoration: none;
  padding: 13px 18px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
@media(max-width:850px) {
  :where(body.founder-page) .founder-hero{
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 55px 6%;
  }
  :where(body.founder-page) .founder-portrait{
    min-height: 500px;
  }
  :where(body.founder-page) .founder-values-grid{
    grid-template-columns: 1fr 1fr;
  }
  :where(body.founder-page) .founder-cta{
    margin: 50px 18px;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media(max-width:600px) {
  :where(body.founder-page) .founder-hero{
    padding: 48px 18px;
  }
  :where(body.founder-page) .founder-hero h1{
    letter-spacing: -2.5px;
  }
  :where(body.founder-page) .founder-portrait{
    min-height: 430px;
    border-radius: 26px;
  }
  :where(body.founder-page) .founder-values{
    padding: 60px 18px;
  }
  :where(body.founder-page) .founder-values-grid{
    grid-template-columns: 1fr;
  }
  :where(body.founder-page) .founder-cta a{
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}
/* Styles moved out of inline HTML attributes */
:where(body.founder-page) #migrated-inline-founder-description{
  max-width: 700px;
  color: #687384;
  line-height: 1.75;
  font-size: 14px;
}
:where(body.founder-page) #migrated-inline-founder-kicker{
  color: #ffb039;
}


/* =========================================================
   PACKAGES PAGE STYLES — scoped to body.packages-modern
   Combined from packages.css; declarations retained.
   ========================================================= */
/* Page-specific styles consolidated from packages.html in source order */
:where(body).packages-modern{
  --pkg-orange: #ef8f00;
  --pkg-blue: #0038bc;
  --pkg-ink: #101522;
  --pkg-muted: #687386;
  --pkg-line: #e9edf3;
  --pkg-bg: #f6f7f9;
}
body.packages-modern{
  background: var(--pkg-bg);
  color: var(--pkg-ink);
  font-family: "DM Sans",system-ui,sans-serif;
  overflow-x: hidden;
}
:where(body).packages-modern main{
  background: linear-gradient(180deg,#f7f8fa 0%,#fff 42%,#f5f6f8 100%);
  padding-bottom: 90px;
}
:where(body).packages-modern .header{
  position: relative;
  z-index: 50;
}
/* Desktop orange organizer inspired by the supplied reference */
@media(min-width:801px) {
  :where(body).packages-modern .header .nav{
    background: var(--pkg-orange);
    padding: 5px;
    border-radius: 34px;
    gap: 2px;
    box-shadow: 0 10px 24px rgba(239,143,0,.16);
  }
  :where(body).packages-modern .header .nav a{
    color: #fff;
    padding: 11px 15px;
    font-size: 12px;
  }
  :where(body).packages-modern .header .nav a.active{
    background: #fff;
    color: var(--pkg-blue);
    box-shadow: 0 2px 7px rgba(0,0,0,.08);
  }
}
:where(body.packages-modern) .pkg-hero{
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 28px 34px;
  text-align: center;
}
:where(body.packages-modern) .pkg-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.8px;
  color: #6b7483;
  text-transform: uppercase;
  margin-bottom: 20px;
}
:where(body.packages-modern) .pkg-kicker:before, :where(body.packages-modern) .pkg-kicker:after{
  content: "";
  width: 24px;
  height: 1px;
  background: #cbd1da;
}
:where(body.packages-modern) .pkg-hero h1{
  font-size: clamp(44px,6.2vw,78px);
  line-height: .95;
  letter-spacing: -4px;
  margin: 0 auto 16px;
  font-weight: 800;
  max-width: 850px;
}
:where(body.packages-modern) .pkg-hero h1 .dark{
  display: block;
  color: #11151e;
}
:where(body.packages-modern) .pkg-hero h1 .gradient{
  display: block;
  background: linear-gradient(90deg,#ef6f28,#ef8f00,#f1ae19);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:where(body.packages-modern) .pkg-hero p{
  max-width: 700px;
  margin: 0 auto;
  color: var(--pkg-muted);
  font-size: 15px;
  line-height: 1.7;
}
:where(body.packages-modern) .pkg-proof{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 27px auto 8px;
  color: #596474;
  font-size: 12px;
  font-weight: 600;
}
:where(body.packages-modern) .pkg-avatars{
  display: flex;
  padding-left: 8px;
}
:where(body.packages-modern) .pkg-avatar{
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg,#dce3ec,#9ca8b8);
  margin-left: -8px;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: #3e4b5c;
}
:where(body.packages-modern) .pkg-stars{
  color: #f4a800;
  letter-spacing: 2px;
  font-size: 15px;
}
:where(body.packages-modern) .pkg-proof strong{
  color: #252d39;
}
:where(body.packages-modern) .pkg-grid{
  max-width: 1120px;
  margin: 40px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 22px;
  align-items: stretch;
}
:where(body.packages-modern) .pkg-card{
  position: relative;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--pkg-line);
  border-radius: 28px;
  padding: 29px 27px 26px;
  box-shadow: 0 14px 38px rgba(20,32,55,.06);
  display: flex;
  flex-direction: column;
  min-height: 555px;
  transition: transform .25s ease,box-shadow .25s ease;
}
:where(body.packages-modern) .pkg-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(20,32,55,.11);
}
:where(body.packages-modern) .pkg-card.featured{
  background: linear-gradient(145deg,#101827 0%,#111b2d 62%,#1a202d 100%);
  border-color: #1d293b;
  color: #fff;
  transform: translateY(-9px);
  box-shadow: 0 28px 60px rgba(12,20,35,.22);
  overflow: hidden;
}
:where(body.packages-modern) .pkg-card.featured:after{
  content: "";
  position: absolute;
  inset: auto -25% -34% 35%;
  height: 250px;
  background: radial-gradient(circle,rgba(239,143,0,.28),transparent 65%);
  pointer-events: none;
}
:where(body.packages-modern) .pkg-popular{
  position: absolute;
  right: 18px;
  top: 0;
  background: var(--pkg-orange);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 8px 13px;
  border-radius: 0 0 11px 11px;
  text-transform: uppercase;
}
:where(body.packages-modern) .pkg-icon{
  width: 45px;
  height: 45px;
  border-radius: 14px;
  background: #f5f7fa;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 20px;
  color: #344154;
}
:where(body.packages-modern) .featured .pkg-icon{
  background: rgba(239,143,0,.16);
  color: #ffae2d;
}
:where(body.packages-modern) .pkg-label{
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 900;
  color: #8791a0;
  text-transform: uppercase;
}
:where(body.packages-modern) .featured .pkg-label{
  color: #aeb7c5;
}
:where(body.packages-modern) .pkg-card h2{
  font-size: 24px;
  letter-spacing: -1px;
  margin: 7px 0 5px;
}
:where(body.packages-modern) .pkg-card .desc{
  font-size: 13px;
  color: #778293;
  line-height: 1.55;
  min-height: 60px;
  margin: 0;
}
:where(body.packages-modern) .featured .desc{
  color: #b9c1ce;
}
:where(body.packages-modern) .pkg-price{
  margin: 18px 0 17px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
:where(body.packages-modern) .pkg-price strong{
  font-size: 36px;
  letter-spacing: -2px;
}
:where(body.packages-modern) .pkg-price span{
  font-size: 12px;
  color: #7e8897;
  font-weight: 700;
}
:where(body.packages-modern) .featured .pkg-price span{
  color: #aab3c0;
}
:where(body.packages-modern) .pkg-cta{
  height: 47px;
  border-radius: 13px;
  border: 1px solid #bcc4cf;
  background: #fff;
  color: #141a24;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13px;
  transition: .2s;
  margin-bottom: 22px;
}
:where(body.packages-modern) .pkg-cta:hover{
  border-color: var(--pkg-orange);
  color: var(--pkg-orange);
}
:where(body.packages-modern) .featured .pkg-cta{
  background: var(--pkg-orange);
  border-color: var(--pkg-orange);
  color: #fff;
  box-shadow: 0 8px 20px rgba(239,143,0,.24);
}
:where(body.packages-modern) .featured .pkg-cta:hover{
  background: #f6a01b;
  color: #fff;
}
:where(body.packages-modern) .pkg-features{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 13px;
}
:where(body.packages-modern) .pkg-features li{
  font-size: 12.5px;
  color: #626d7c;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
}
:where(body.packages-modern) .featured .pkg-features li{
  color: #d0d6df;
}
:where(body.packages-modern) .pkg-features li:before{
  content: "✓";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f0f3f7;
  color: #7d8794;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
}
:where(body.packages-modern) .featured .pkg-features li:before{
  background: rgba(255,255,255,.09);
  color: #ffb43a;
}
:where(body.packages-modern) .pkg-note{
  max-width: 1080px;
  margin: 18px auto 0;
  padding: 0 24px;
  text-align: center;
  color: #8a93a0;
  font-size: 11px;
}
:where(body.packages-modern) .pkg-vouchers{
  max-width: 1120px;
  margin: 78px auto 0;
  padding: 0 24px;
}
:where(body.packages-modern) .pkg-voucher-head{
  text-align: center;
  margin-bottom: 26px;
}
:where(body.packages-modern) .pkg-voucher-head .eyebrow{
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 900;
  color: #87909d;
}
:where(body.packages-modern) .pkg-voucher-head h2{
  font-size: 35px;
  letter-spacing: -1.7px;
  margin: 8px 0;
}
:where(body.packages-modern) .pkg-voucher-head p{
  color: #737d8b;
  font-size: 13px;
  margin: 0;
}
:where(body.packages-modern) .voucher-grid{
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
}
:where(body.packages-modern) .voucher{
  background: #fff;
  border: 1px solid var(--pkg-line);
  border-radius: 20px;
  padding: 22px 15px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(20,32,55,.04);
}
:where(body.packages-modern) .voucher small{
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #8a94a2;
}
:where(body.packages-modern) .voucher strong{
  display: block;
  font-size: 22px;
  letter-spacing: -.7px;
  margin: 7px 0 2px;
  color: #121925;
}
:where(body.packages-modern) .voucher span{
  font-size: 12px;
  color: var(--pkg-orange);
  font-weight: 800;
}
:where(body.packages-modern) .pkg-bottom{
  max-width: 1120px;
  margin: 70px auto 0;
  padding: 0 24px;
}
:where(body.packages-modern) .pkg-bottom-card{
  background: #fff;
  border: 1px solid var(--pkg-line);
  border-radius: 28px;
  padding: 35px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  box-shadow: 0 14px 35px rgba(20,32,55,.05);
}
:where(body.packages-modern) .pkg-bottom-card .eyebrow{
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 900;
  color: #87909d;
}
:where(body.packages-modern) .pkg-bottom-card h2{
  font-size: 30px;
  letter-spacing: -1.5px;
  margin: 7px 0;
}
:where(body.packages-modern) .pkg-bottom-card p{
  margin: 0;
  color: #727d8c;
  font-size: 13px;
  max-width: 600px;
  line-height: 1.6;
}
:where(body.packages-modern) .pkg-bottom-actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
:where(body.packages-modern) .pkg-action{
  padding: 13px 18px;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid #d3d8e0;
  color: #1a2230;
  background: #fff;
}
:where(body.packages-modern) .pkg-action.primary{
  background: var(--pkg-orange);
  border-color: var(--pkg-orange);
  color: #fff;
}
@media(max-width:900px) {
  :where(body.packages-modern) .pkg-grid{
    grid-template-columns: 1fr;
    max-width: 580px;
  }
  :where(body.packages-modern) .pkg-card, :where(body.packages-modern) .pkg-card.featured{
    transform: none;
  }
  :where(body.packages-modern) .voucher-grid{
    grid-template-columns: repeat(2,1fr);
  }
  :where(body.packages-modern) .pkg-bottom-card{
    flex-direction: column;
    align-items: flex-start;
  }
  :where(body.packages-modern) .pkg-bottom-actions{
    width: 100%;
  }
  :where(body.packages-modern) .pkg-action{
    flex: 1;
    text-align: center;
  }
}
@media(max-width:800px) {
  :where(body).packages-modern main{
    padding-bottom: 55px;
  }
  :where(body.packages-modern) .pkg-hero{
    padding: 48px 18px 22px;
  }
  :where(body.packages-modern) .pkg-hero h1{
    letter-spacing: -2.5px;
  }
  :where(body.packages-modern) .pkg-hero p{
    font-size: 13px;
  }
  :where(body.packages-modern) .pkg-proof{
    flex-wrap: wrap;
    gap: 9px 12px;
  }
  :where(body.packages-modern) .pkg-grid, :where(body.packages-modern) .pkg-vouchers, :where(body.packages-modern) .pkg-bottom{
    padding: 0 15px;
  }
  :where(body.packages-modern) .pkg-grid{
    margin-top: 28px;
  }
  :where(body.packages-modern) .pkg-card{
    min-height: 0;
    padding: 26px 22px;
  }
  :where(body.packages-modern) .pkg-card h2{
    font-size: 22px;
  }
  :where(body.packages-modern) .pkg-price strong{
    font-size: 32px;
  }
  :where(body.packages-modern) .pkg-vouchers{
    margin-top: 55px;
  }
  :where(body.packages-modern) .pkg-voucher-head h2{
    font-size: 28px;
  }
  :where(body.packages-modern) .voucher-grid{
    grid-template-columns: repeat(2,1fr);
  }
  :where(body.packages-modern) .voucher{
    padding: 18px 10px;
  }
  :where(body.packages-modern) .pkg-bottom{
    margin-top: 50px;
  }
  :where(body.packages-modern) .pkg-bottom-card{
    padding: 26px 23px;
  }
  :where(body.packages-modern) .pkg-bottom-card h2{
    font-size: 25px;
  }
  :where(body.packages-modern) .pkg-bottom-actions{
    flex-direction: column;
  }
}
@media(max-width:420px) {
  :where(body.packages-modern) .voucher-grid{
    grid-template-columns: 1fr 1fr;
  }
  :where(body.packages-modern) .voucher strong{
    font-size: 19px;
  }
  :where(body.packages-modern) .pkg-proof{
    font-size: 10px;
  }
}


/* =========================================================
   PRODUCTS PAGE STYLES — scoped to body.hotspot-product-page
   Combined from products.css; declarations retained.
   ========================================================= */
/* Page-specific styles consolidated from products.html in source order */
:where(body).hotspot-product-page{
  --prod-blue: #0038bc;
  --prod-orange: #ef8f00;
  --prod-ink: #101522;
  --prod-muted: #6f7887;
  --prod-line: #e7ebf0;
  --prod-bg: #f6f7f9;
}
body.hotspot-product-page{
  background: linear-gradient(180deg,#f7f8fa 0%,#fff 28%,#f6f7f9 100%);
  color: var(--prod-ink);
  font-family: "DM Sans",system-ui,sans-serif;
  overflow-x: hidden;
}
:where(body).hotspot-product-page .header{
  position: relative;
  z-index: 50;
}
@media(min-width:801px) {
  :where(body).hotspot-product-page .header .nav{
    background: var(--prod-orange);
    padding: 5px;
    border-radius: 34px;
    gap: 2px;
    box-shadow: 0 10px 24px rgba(239,143,0,.16);
  }
  :where(body).hotspot-product-page .header .nav a{
    color: #fff;
    padding: 11px 15px;
    font-size: 12px;
  }
}
:where(body.hotspot-product-page) .product-hero{
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 28px 48px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 52px;
  align-items: center;
}
:where(body.hotspot-product-page) .product-hero-copy{
  max-width: 680px;
}
:where(body.hotspot-product-page) .product-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #6e7785;
}
:where(body.hotspot-product-page) .product-kicker:before{
  content: "";
  width: 30px;
  height: 1px;
  background: #c8ced7;
}
:where(body.hotspot-product-page) .product-hero h1{
  font-size: clamp(44px,6vw,76px);
  line-height: .96;
  letter-spacing: -4px;
  margin: 18px 0 18px;
  font-weight: 800;
}
:where(body.hotspot-product-page) .product-hero h1 .orange{
  color: var(--prod-orange);
}
:where(body.hotspot-product-page) .product-hero p{
  max-width: 650px;
  color: var(--prod-muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
:where(body.hotspot-product-page) .product-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
:where(body.hotspot-product-page) .product-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 14px;
  padding: 13px 18px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #d6dae1;
  color: #18202d;
  background: #fff;
  transition: .2s;
}
:where(body.hotspot-product-page) .product-btn.primary{
  background: var(--prod-orange);
  border-color: var(--prod-orange);
  color: #fff;
  box-shadow: 0 8px 20px rgba(239,143,0,.2);
}
:where(body.hotspot-product-page) .product-btn:hover{
  transform: translateY(-2px);
}
:where(body.hotspot-product-page) .product-visual{
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
:where(body.hotspot-product-page) .product-visual > img{
  width: 100%;
  max-width: 650px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(10,20,40,.16));
}
:where(body.hotspot-product-page) .product-trust{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 22px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
:where(body.hotspot-product-page) .trust-pill{
  background: #fff;
  border: 1px solid var(--prod-line);
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 11px;
  font-weight: 800;
  color: #5d6878;
  box-shadow: 0 8px 18px rgba(20,30,50,.04);
}
:where(body.hotspot-product-page) .trust-pill strong{
  color: var(--prod-blue);
}
:where(body.hotspot-product-page) .product-section{
  padding: 78px 7%;
}
:where(body.hotspot-product-page) .product-section.alt{
  background: #fff;
}
:where(body.hotspot-product-page) .product-heading{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 38px;
}
:where(body.hotspot-product-page) .product-heading .eyebrow{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.2px;
  color: #7d8794;
}
:where(body.hotspot-product-page) .product-heading h2{
  font-size: clamp(34px,4.5vw,58px);
  line-height: 1.04;
  letter-spacing: -2px;
  margin: 11px 0;
}
:where(body.hotspot-product-page) .product-heading h2 strong{
  color: var(--prod-orange);
}
:where(body.hotspot-product-page) .product-heading p{
  color: var(--prod-muted);
  line-height: 1.65;
  font-size: 14px;
}
:where(body.hotspot-product-page) .product-grid{
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}
:where(body.hotspot-product-page) .product-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--prod-line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(20,32,55,.05);
  display: flex;
  flex-direction: column;
  transition: .25s;
}
:where(body.hotspot-product-page) .product-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 24px 50px rgba(20,32,55,.1);
}
:where(body.hotspot-product-page) .product-card-media{
  height: 235px;
  background: #f4f6f8;
  display: grid;
  place-items: center;
  padding: 20px;
  position: relative;
}
:where(body.hotspot-product-page) .product-card-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
:where(body.hotspot-product-page) .product-badge{
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--prod-blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 7px 15px rgba(20,32,55,.08);
}
:where(body.hotspot-product-page) .product-body{
  padding: 23px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
:where(body.hotspot-product-page) .product-meta{
  font-size: 9px;
  letter-spacing: 1.6px;
  font-weight: 900;
  color: #8b95a4;
}
:where(body.hotspot-product-page) .product-card h3{
  font-size: 21px;
  letter-spacing: -.7px;
  margin: 7px 0;
}
:where(body.hotspot-product-page) .product-card p{
  font-size: 12.5px;
  color: #747f8d;
  line-height: 1.55;
  margin: 0 0 15px;
}
:where(body.hotspot-product-page) .product-specs{
  list-style: none;
  padding: 0;
  margin: 0 0 19px;
  display: grid;
  gap: 8px;
}
:where(body.hotspot-product-page) .product-specs li{
  font-size: 11.5px;
  color: #566171;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
:where(body.hotspot-product-page) .product-specs li:before{
  content: "✓";
  display: grid;
  place-items: center;
  flex: 0 0 17px;
  height: 17px;
  border-radius: 50%;
  background: #eef3fb;
  color: var(--prod-blue);
  font-size: 9px;
  font-weight: 900;
}
:where(body.hotspot-product-page) .price-request{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
:where(body.hotspot-product-page) .price-on-request{
  font-size: 11px;
  font-weight: 900;
  color: var(--prod-orange);
  letter-spacing: .7px;
  text-transform: uppercase;
}
:where(body.hotspot-product-page) .contact-product{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 13px;
  border-radius: 12px;
  background: var(--prod-orange);
  border: 1px solid var(--prod-orange);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
}
:where(body.hotspot-product-page) .contact-product.alt{
  background: #fff;
  color: #1a2230;
  border-color: #d4d9e0;
}
:where(body.hotspot-product-page) .product-strip{
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}
:where(body.hotspot-product-page) .product-strip-item{
  padding: 18px;
  border: 1px solid var(--prod-line);
  border-radius: 18px;
  background: #fff;
}
:where(body.hotspot-product-page) .product-strip-item b{
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
}
:where(body.hotspot-product-page) .product-strip-item span{
  color: #788291;
  font-size: 11px;
  line-height: 1.45;
}
:where(body.hotspot-product-page) .enquiry-panel{
  max-width: 1120px;
  margin: 0 auto 78px;
  border-radius: 28px;
  background: linear-gradient(135deg,#0d1628,#111d33);
  color: #fff;
  padding: 38px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  box-shadow: 0 24px 60px rgba(10,22,45,.16);
}
:where(body.hotspot-product-page) .enquiry-panel .eyebrow{
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 900;
  color: #ffb039;
}
:where(body.hotspot-product-page) .enquiry-panel h2{
  font-size: 32px;
  letter-spacing: -1.2px;
  margin: 8px 0;
}
:where(body.hotspot-product-page) .enquiry-panel p{
  margin: 0;
  color: #c3cad5;
  line-height: 1.55;
  font-size: 13px;
  max-width: 640px;
}
:where(body.hotspot-product-page) .enquiry-actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
:where(body.hotspot-product-page) .enquiry-actions a{
  padding: 13px 17px;
  border-radius: 13px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
}
:where(body.hotspot-product-page) .enquiry-actions .wa{
  background: #25d366;
  color: #07180d;
}
:where(body.hotspot-product-page) .enquiry-actions .call{
  background: var(--prod-orange);
  color: #fff;
}
@media(max-width:950px) {
  :where(body.hotspot-product-page) .product-hero{
    grid-template-columns: 1fr;
    gap: 30px;
  }
  :where(body.hotspot-product-page) .product-visual{
    min-height: 340px;
  }
  :where(body.hotspot-product-page) .product-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  :where(body.hotspot-product-page) .product-strip{
    grid-template-columns: repeat(2,1fr);
  }
  :where(body.hotspot-product-page) .enquiry-panel{
    flex-direction: column;
    align-items: flex-start;
  }
}
@media(max-width:650px) {
  :where(body.hotspot-product-page) .product-hero{
    padding: 48px 18px 35px;
  }
  :where(body.hotspot-product-page) .product-hero h1{
    letter-spacing: -2.5px;
  }
  :where(body.hotspot-product-page) .product-hero p{
    font-size: 14px;
  }
  :where(body.hotspot-product-page) .product-visual{
    min-height: 300px;
    border-radius: 24px;
  }
  :where(body.hotspot-product-page) .product-visual-card{
    inset: 18px;
    padding: 22px;
  }
  :where(body.hotspot-product-page) .product-visual-card h2{
    font-size: 28px;
  }
  :where(body.hotspot-product-page) .product-visual-card img{
    width: 82%;
  }
  :where(body.hotspot-product-page) .product-section{
    padding: 58px 18px;
  }
  :where(body.hotspot-product-page) .product-grid{
    grid-template-columns: 1fr;
  }
  :where(body.hotspot-product-page) .product-card-media{
    height: 220px;
  }
  :where(body.hotspot-product-page) .product-strip{
    grid-template-columns: 1fr;
  }
  :where(body.hotspot-product-page) .enquiry-panel{
    margin: 0 16px 50px;
    padding: 28px 24px;
    border-radius: 22px;
  }
  :where(body.hotspot-product-page) .enquiry-panel h2{
    font-size: 26px;
  }
  :where(body.hotspot-product-page) .enquiry-actions{
    width: 100%;
    flex-direction: column;
  }
  :where(body.hotspot-product-page) .enquiry-actions a{
    text-align: center;
  }
  :where(body.hotspot-product-page) .product-actions .product-btn{
    width: 100%;
    box-sizing: border-box;
  }
  :where(body.hotspot-product-page) .product-trust{
    padding: 0 18px 10px;
  }
}
/* V32 product showcase: cleaner image framing and premium product presentation */
:where(body).hotspot-product-page .product-hero{
  padding-top: 58px;
  padding-bottom: 38px;
}
:where(body).hotspot-product-page .product-visual{
  min-height: 430px;
  border-radius: 30px;
  background: linear-gradient(145deg,#0b1424,#13223d);
  box-shadow: 0 26px 70px rgba(9,20,44,.16);
}
:where(body).hotspot-product-page .product-visual-card{
  inset: 20px;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
}
:where(body).hotspot-product-page .product-visual-card img{
  width: 82%;
  max-width: 420px;
  max-height: 205px;
  margin: 12px auto 0;
  object-fit: contain;
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 14px;
  box-sizing: border-box;
  filter: drop-shadow(0 22px 25px rgba(0,0,0,.28));
}
:where(body).hotspot-product-page .product-grid{
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1120px;
}
:where(body).hotspot-product-page .product-card{
  display: grid;
  grid-template-columns: minmax(300px,.82fr) minmax(0,1.18fr);
  min-height: 360px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(20,32,55,.07);
}
:where(body).hotspot-product-page .product-card:nth-child(even) .product-card-media{
  order: 2;
  border-left: 1px solid var(--prod-line);
  border-right: 0;
}
:where(body).hotspot-product-page .product-card:nth-child(even) .product-body{
  order: 1;
}
:where(body).hotspot-product-page .product-card-media{
  height: auto;
  min-height: 360px;
  padding: 34px;
  background: radial-gradient(circle at 50% 45%,#fff 0%,#f7f9fb 52%,#edf1f5 100%);
  border-right: 1px solid var(--prod-line);
}
:where(body).hotspot-product-page .product-card-media:after{
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(0,56,188,.08);
  border-radius: 22px;
  pointer-events: none;
}
:where(body).hotspot-product-page .product-card-media img{
  width: 100%;
  height: 100%;
  max-height: 275px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 18px rgba(20,32,55,.16));
  transition: transform .3s ease;
}
:where(body).hotspot-product-page .product-card:hover .product-card-media img{
  transform: scale(1.035);
}
:where(body).hotspot-product-page .product-badge{
  top: 28px;
  left: 28px;
  z-index: 3;
  color: var(--prod-blue);
  border: 1px solid #e3e8f0;
}
:where(body).hotspot-product-page .product-body{
  padding: 42px 44px;
  justify-content: center;
}
:where(body).hotspot-product-page .product-meta{
  color: #6f7b8b;
}
:where(body).hotspot-product-page .product-card h3{
  font-size: 30px;
  letter-spacing: -1.2px;
  margin: 9px 0 12px;
}
:where(body).hotspot-product-page .product-card p{
  font-size: 14px;
  line-height: 1.65;
  max-width: 620px;
  margin-bottom: 20px;
}
:where(body).hotspot-product-page .product-specs{
  gap: 10px;
  margin-bottom: 26px;
}
:where(body).hotspot-product-page .product-specs li{
  font-size: 12.5px;
}
:where(body).hotspot-product-page .price-request{
  padding-top: 18px;
  border-top: 1px solid #edf0f4;
}
:where(body).hotspot-product-page .price-on-request{
  font-size: 12px;
}
:where(body).hotspot-product-page .contact-product{
  padding: 12px 17px;
  border-radius: 13px;
}
@media(max-width:850px) {
  :where(body).hotspot-product-page .product-card{
    grid-template-columns: 1fr;
    min-height: 0;
  }
  :where(body).hotspot-product-page .product-card:nth-child(even) .product-card-media{
    order: 1;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--prod-line);
  }
  :where(body).hotspot-product-page .product-card:nth-child(even) .product-body{
    order: 2;
  }
  :where(body).hotspot-product-page .product-card-media{
    min-height: 300px;
    border-right: 0;
    border-bottom: 1px solid var(--prod-line);
  }
  :where(body).hotspot-product-page .product-body{
    padding: 30px 26px;
  }
  :where(body).hotspot-product-page .product-card h3{
    font-size: 26px;
  }
}
@media(max-width:650px) {
  :where(body).hotspot-product-page .product-visual{
    min-height: 355px;
  }
  :where(body).hotspot-product-page .product-visual-card img{
    width: 88%;
    max-height: 165px;
    padding: 10px;
  }
  :where(body).hotspot-product-page .product-card-media{
    min-height: 250px;
    padding: 24px;
  }
  :where(body).hotspot-product-page .product-card-media:after{
    inset: 15px;
    border-radius: 18px;
  }
  :where(body).hotspot-product-page .product-badge{
    top: 20px;
    left: 20px;
  }
  :where(body).hotspot-product-page .product-body{
    padding: 25px 22px;
  }
  :where(body).hotspot-product-page .product-card h3{
    font-size: 23px;
  }
  :where(body).hotspot-product-page .price-request{
    align-items: stretch;
    flex-direction: column;
  }
  :where(body).hotspot-product-page .contact-product{
    width: 100%;
    box-sizing: border-box;
  }
}
/* Featured visual: image only, no surrounding card/frame */
:where(body.hotspot-product-page) .product-visual, :where(body.hotspot-product-page) .product-visual-card{
  background: transparent!important;
  border: 0!important;
  box-shadow: none!important;
  backdrop-filter: none!important;
}
:where(body.hotspot-product-page) .product-visual:before, :where(body.hotspot-product-page) .product-visual:after{
  display: none!important;
  content: none!important;
}
:where(body.hotspot-product-page) .product-visual-card{
  position: static!important;
  inset: auto!important;
  padding: 0!important;
}
:where(body.hotspot-product-page) .product-visual-card>*{
  display: none!important;
}
:where(body.hotspot-product-page) .product-visual>img{
  width: min(100%,650px)!important;
  height: auto!important;
  max-width: 650px!important;
  margin: 0 auto!important;
}
@media(max-width:800px) {
  :where(body.hotspot-product-page) .product-visual{
    min-height: 0!important;
  }
  :where(body.hotspot-product-page) .product-visual>img{
    width: min(100%,560px)!important;
    max-width: 100%!important;
  }
}
/* V33 PRODUCTS: true transparent product presentation + larger product images */
:where(body).hotspot-product-page .product-visual-card img{
  width: 86%;
  max-width: 460px;
  max-height: 220px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
  object-fit: contain;
  transform: scale(1.05);
  filter: drop-shadow(0 26px 28px rgba(0,0,0,.34));
}
:where(body).hotspot-product-page .product-card-media{
  background: transparent;
  border-right: 0;
  padding: 28px 24px;
}
:where(body).hotspot-product-page .product-card-media:after{
  display: none;
}
:where(body).hotspot-product-page .product-card-media img{
  width: 86%;
  height: 86%;
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
  background: transparent;
  padding: 0;
  border-radius: 0;
  transform: scale(1.08);
  transform-origin: center;
  filter: drop-shadow(0 22px 22px rgba(20,32,55,.16));
}
:where(body).hotspot-product-page .product-card:hover .product-card-media img{
  transform: scale(1.12);
}
:where(body).hotspot-product-page .product-badge{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}
:where(body).hotspot-product-page .header .nav a.active{
  background: #fff!important;
  color: #101522!important;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
:where(body).hotspot-product-page .mobile-nav-links a.active{
  color: #0038bc!important;
  font-weight: 800!important;
}
@media(max-width:850px) {
  :where(body).hotspot-product-page .product-card-media{
    min-height: 320px;
    padding: 24px 18px;
  }
  :where(body).hotspot-product-page .product-card-media img{
    transform: scale(1.06);
  }
  :where(body).hotspot-product-page .product-card:hover .product-card-media img{
    transform: scale(1.10);
  }
}
@media(max-width:650px) {
  :where(body).hotspot-product-page .product-visual-card img{
    width: 86%;
    max-height: 175px;
    transform: scale(1.04);
  }
  :where(body).hotspot-product-page .product-card-media{
    min-height: 285px;
    padding: 20px 12px;
  }
  :where(body).hotspot-product-page .product-card-media img{
    transform: scale(1.04);
  }
  :where(body).hotspot-product-page .product-card:hover .product-card-media img{
    transform: scale(1.08);
  }
}
/* V40 MOBILE PRODUCT CONSISTENCY + COMPLETE SITE INFORMATION */
:where(body.hotspot-product-page) .product-services-section{
  padding-top: 20px;
}
:where(body.hotspot-product-page) .product-service-grid{
  max-width: 1120px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}
:where(body.hotspot-product-page) .product-service-grid article{
  background: #fff;
  border: 1px solid var(--prod-line);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 12px 32px rgba(20,32,55,.05);
  transition: transform .2s ease,box-shadow .2s ease;
}
:where(body.hotspot-product-page) .product-service-grid article:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(20,32,55,.09);
}
:where(body.hotspot-product-page) .product-service-grid article>span{
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: #f3f6fb;
  color: var(--prod-blue);
  font-size: 10px;
  font-weight: 900;
}
:where(body.hotspot-product-page) .product-service-grid h3{
  margin: 18px 0 9px;
  font-size: 18px;
  letter-spacing: -.4px;
  color: #101522;
}
:where(body.hotspot-product-page) .product-service-grid p{
  margin: 0;
  color: #687384;
  font-size: 12px;
  line-height: 1.65;
}
:where(body.hotspot-product-page) .product-service-grid a{
  display: inline-block;
  margin-top: 16px;
  color: var(--prod-blue);
  font-size: 11px;
  font-weight: 800;
}
:where(body.hotspot-product-page) .product-about-strip{
  max-width: 1120px;
  margin: 26px auto 0;
  padding: 28px 30px;
  border: 1px solid #e7ebf0;
  border-radius: 24px;
  background: linear-gradient(135deg,#f8fafc,#fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
:where(body.hotspot-product-page) .product-about-strip h3{
  margin: 7px 0 7px;
  font-size: 25px;
  letter-spacing: -.7px;
}
:where(body.hotspot-product-page) .product-about-strip p{
  margin: 0;
  max-width: 700px;
  color: #687384;
  font-size: 12px;
  line-height: 1.65;
}
/* Keep the wide product-card composition on phones: image + information remain side-by-side. */
@media(max-width:850px) {
  :where(body).hotspot-product-page .product-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  :where(body).hotspot-product-page .product-card{
    grid-template-columns: minmax(125px,.82fr) minmax(0,1.18fr)!important;
    min-height: 260px!important;
    border-radius: 22px!important;
    display: grid!important;
  }
  :where(body).hotspot-product-page .product-card:nth-child(even) .product-card-media{
    order: 1!important;
    border-right: 1px solid var(--prod-line)!important;
    border-left: 0!important;
    border-bottom: 0!important;
  }
  :where(body).hotspot-product-page .product-card:nth-child(even) .product-body{
    order: 2!important;
  }
  :where(body).hotspot-product-page .product-card-media{
    min-height: 260px!important;
    height: auto!important;
    padding: 16px 10px!important;
    border-right: 1px solid var(--prod-line)!important;
    border-bottom: 0!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
  }
  :where(body).hotspot-product-page .product-card-media img{
    width: 100%!important;
    height: 100%!important;
    max-width: 100%!important;
    max-height: 190px!important;
    transform: scale(1.04)!important;
    object-fit: contain!important;
  }
  :where(body).hotspot-product-page .product-badge{
    top: 12px!important;
    left: 12px!important;
    font-size: 9px!important;
    padding: 6px 8px!important;
  }
  :where(body).hotspot-product-page .product-body{
    padding: 20px 16px!important;
    min-width: 0!important;
  }
  :where(body).hotspot-product-page .product-card h3{
    font-size: 19px!important;
    line-height: 1.08!important;
    margin: 7px 0 8px!important;
    letter-spacing: -.4px!important;
  }
  :where(body).hotspot-product-page .product-body p{
    font-size: 11px!important;
    line-height: 1.5!important;
    margin-bottom: 8px!important;
  }
  :where(body).hotspot-product-page .product-specs{
    font-size: 10px!important;
    line-height: 1.4!important;
    margin: 8px 0!important;
    padding-left: 15px!important;
  }
  :where(body).hotspot-product-page .product-meta{
    font-size: 8px!important;
    letter-spacing: 1.2px!important;
  }
  :where(body).hotspot-product-page .price-request{
    gap: 7px!important;
    margin-top: 10px!important;
    align-items: flex-start!important;
  }
  :where(body).hotspot-product-page .price-on-request{
    font-size: 9px!important;
  }
  :where(body).hotspot-product-page .contact-product{
    font-size: 9px!important;
    padding: 8px 9px!important;
    white-space: nowrap!important;
  }
  :where(body.hotspot-product-page) .product-service-grid{
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
  }
  :where(body.hotspot-product-page) .product-service-grid article{
    padding: 18px;
  }
  :where(body.hotspot-product-page) .product-about-strip{
    margin-left: 18px;
    margin-right: 18px;
    padding: 22px;
    align-items: flex-start;
    flex-direction: column;
  }
}
@media(max-width:390px) {
  :where(body).hotspot-product-page .product-card{
    grid-template-columns: minmax(108px,.78fr) minmax(0,1.22fr)!important;
  }
  :where(body).hotspot-product-page .product-card-media{
    min-height: 245px!important;
    padding: 12px 7px!important;
  }
  :where(body).hotspot-product-page .product-card-media img{
    max-height: 165px!important;
  }
  :where(body).hotspot-product-page .product-body{
    padding: 17px 12px!important;
  }
  :where(body).hotspot-product-page .product-card h3{
    font-size: 17px!important;
  }
  :where(body).hotspot-product-page .product-body p{
    font-size: 10px!important;
  }
  :where(body).hotspot-product-page .product-specs{
    font-size: 9px!important;
    padding-left: 13px!important;
  }
  :where(body).hotspot-product-page .contact-product{
    font-size: 8px!important;
    padding: 7px 7px!important;
  }
  :where(body.hotspot-product-page) .product-service-grid{
    grid-template-columns: 1fr;
  }
}
/* When the mobile menu is open, the page behind it remains scrollable. The menu itself also scrolls independently. */
@media(max-width:800px) {
  body:where(.hotspot-product-page).menu-open, body:where(.hotspot-product-page).mobile-menu-open{
    overflow: hidden!important;
    overflow-x: hidden!important;
    touch-action: none!important;
  }
  :where(body.hotspot-product-page) .popup-menu{
    max-height: calc(100dvh - 14px)!important;
    overflow-y: auto!important;
    overflow-x: hidden!important;
    overscroll-behavior: contain!important;
    -webkit-overflow-scrolling: touch!important;
  }
}
/* V40.1 — MOBILE PRODUCT CARDS: alternate image side
   Odd products: image left / details right.
   Even products: image right / details left.
   Desktop layout remains unchanged. */
@media (max-width:850px) {
  :where(body).hotspot-product-page .product-card:nth-child(odd) .product-card-media{
    order: 1 !important;
    border-left: 0 !important;
    border-right: 1px solid var(--prod-line) !important;
  }
  :where(body).hotspot-product-page .product-card:nth-child(odd) .product-body{
    order: 2 !important;
  }
  :where(body).hotspot-product-page .product-card:nth-child(even) .product-card-media{
    order: 2 !important;
    border-right: 0 !important;
    border-left: 1px solid var(--prod-line) !important;
    border-bottom: 0 !important;
  }
  :where(body).hotspot-product-page .product-card:nth-child(even) .product-body{
    order: 1 !important;
  }
  :where(body).hotspot-product-page .product-card:nth-child(even) .product-badge{
    left: auto !important;
    right: 12px !important;
  }
}


/* =========================================================
   PRIVACY PAGE STYLES — scoped to body.privacy-page
   Combined from privacy.css; declarations retained.
   ========================================================= */
/* Privacy page styles moved out of privacy.html */
/* Styles moved out of inline HTML attributes */
:where(body.privacy-page) #migrated-inline-privacy-main{
  max-width: 900px;
  margin: 0 auto;
  padding: 70px 24px 100px;
}
:where(body.privacy-page) #migrated-inline-privacy-back-link{
  display: inline-block;
  margin-bottom: 30px;
  color: #0038BC;
  font-weight: 700;
}
:where(body.privacy-page) #migrated-inline-privacy-note{
  margin-top: 40px;
}


/* =========================================================
   ADMIN DASHBOARD STYLES — scoped to body.admin-page
   Combined from admin.css; declarations retained.
   ========================================================= */
:where(body).admin-page{margin:0;min-height:100vh;background:#05080d;color:#fff;font-family:var(--font-sans,Arial,sans-serif)}
:where(body.admin-page) .hidden{display:none!important}
:where(body.admin-page) .admin-view{position:relative;min-height:100svh;display:grid;place-items:center;padding:28px;box-sizing:border-box;overflow:hidden;background:#05080d url("images/opening.png") center center/cover no-repeat}
:where(body.admin-page) .admin-view::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.16);z-index:0}
:where(body.admin-page) .admin-login-card{position:relative;z-index:1;width:min(460px,100%);padding:10px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 2px 10px rgba(0,0,0,.55)}
:where(body.admin-page) .admin-logo{width:74px;height:74px;object-fit:contain;margin-bottom:16px}:where(body.admin-page) .admin-kicker{display:block;font-size:11px;letter-spacing:.18em;font-weight:800;color:#d7e5ff;margin-bottom:9px}:where(body.admin-page) .admin-login-card h1{margin:0 0 10px;font-size:38px;line-height:1.05;color:#fff}:where(body.admin-page) .admin-login-card p{color:rgba(235,242,252,.82);line-height:1.6;margin:0 0 24px}:where(body.admin-page) .admin-login-card label{display:block;color:#e7eef8;font-size:13px;font-weight:700;margin-bottom:16px}:where(body.admin-page) .admin-login-card form{margin-top:22px;padding:22px;border-radius:22px;background:rgba(5,13,25,.72);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 45px rgba(0,0,0,.28)}:where(body.admin-page) .admin-login-card input{width:100%;box-sizing:border-box;margin-top:8px;height:56px;border-radius:16px;border:1px solid rgba(255,255,255,.20);background:rgba(4,12,23,.82);color:#fff;padding:0 16px;font-size:15px;outline:none;text-shadow:none}:where(body.admin-page) .admin-login-card input::placeholder{color:rgba(230,238,248,.62)}:where(body.admin-page) .admin-login-card input:focus{border-color:rgba(255,255,255,.58);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
:where(body.admin-page) .admin-primary{width:100%;height:58px;border:0;border-radius:999px;background:#ff7900;color:#fff;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:18px;box-shadow:0 14px 35px rgba(0,0,0,.22);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}:where(body.admin-page) .admin-primary:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(0,0,0,.28);background:#ff8a1a}:where(body.admin-page) .admin-primary span{font-size:21px}:where(body.admin-page) .admin-status{min-height:22px!important;margin:14px 0 0!important;color:#ffd0c9!important}
:where(body.admin-page) .admin-dashboard{min-height:100vh;background:#f5f8fc;color:#172236}:where(body.admin-page) .admin-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px clamp(18px,4vw,48px);background:rgba(255,255,255,.93);border-bottom:1px solid #dfe6ef;backdrop-filter:blur(14px)}:where(body.admin-page) .admin-brand{display:flex;align-items:center;gap:14px}:where(body.admin-page) .admin-brand img{width:46px;height:46px;object-fit:contain}:where(body.admin-page) .admin-brand strong{display:block;font-size:18px}:where(body.admin-page) .admin-brand small{display:block;color:#77869a;margin-top:2px}:where(body.admin-page) .admin-header-actions{display:flex;align-items:center;gap:8px}:where(body.admin-page) .last-updated{font-size:12px;color:#7e8ca0;margin-right:8px}:where(body.admin-page) .header-btn{border:1px solid #d8e0eb;background:#fff;color:#203049;border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer}:where(body.admin-page) .header-btn.dark{background:#132238;color:#fff;border-color:#132238}:where(body.admin-page) .admin-main{width:min(1500px,calc(100% - 32px));margin:0 auto;padding:28px 0 64px}:where(body.admin-page) .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}:where(body.admin-page) .stat-card{background:#fff;border:1px solid #e1e8f1;border-radius:22px;padding:20px 22px;box-shadow:0 14px 35px rgba(20,49,85,.06)}:where(body.admin-page) .stat-card span, :where(body.admin-page) .stat-card small{display:block;color:#718099}:where(body.admin-page) .stat-card span{font-size:13px;font-weight:700}:where(body.admin-page) .stat-card strong{display:block;font-size:36px;line-height:1;margin:8px 0}:where(body.admin-page) .stat-card small{font-size:12px}
:where(body.admin-page) .dashboard-panel{background:#fff;border:1px solid #dfe6ef;border-radius:26px;box-shadow:0 15px 38px rgba(20,49,85,.06);margin-bottom:20px;overflow:hidden}:where(body.admin-page) .panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:24px 24px 18px;border-bottom:1px solid #e8edf4}:where(body.admin-page) .panel-head h2{margin:0;font-size:27px}:where(body.admin-page) .panel-head p{margin:6px 0 0;color:#7b8899;font-size:14px}:where(body.admin-page) .filter-select{border:1px solid #d6dfeb;background:#f8fafc;border-radius:12px;padding:11px 13px;font-weight:700;color:#25364d}:where(body.admin-page) .table-wrap{overflow:auto}:where(body.admin-page) table{width:100%;border-collapse:collapse;min-width:1050px}:where(body.admin-page) th, :where(body.admin-page) td{text-align:left;padding:15px 16px;border-bottom:1px solid #edf1f6;vertical-align:top}:where(body.admin-page) th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#78879a;background:#fbfcfe}:where(body.admin-page) td{font-size:13px;color:#25344a}:where(body.admin-page) td strong{display:block;color:#12233a;margin-bottom:4px}:where(body.admin-page) .muted{color:#7f8da1;line-height:1.45;max-width:280px}:where(body.admin-page) .empty-row{text-align:center!important;color:#8793a5;padding:38px!important}:where(body.admin-page) .contact-links{display:flex;gap:7px;flex-wrap:wrap}:where(body.admin-page) .contact-links a, :where(body.admin-page) .mini-link{display:inline-flex;align-items:center;text-decoration:none;font-weight:800;color:#fff;background:#0f223b;border-radius:999px;padding:7px 10px;font-size:11px}:where(body.admin-page) .contact-links a.wa{background:#16855d}:where(body.admin-page) .status-select{border:1px solid #d6dfeb;background:#f8fafc;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;color:#25364d}:where(body.admin-page) .delete-btn{border:0;background:transparent;color:#aab4c2;cursor:pointer;font-size:18px}:where(body.admin-page) .delete-btn:hover{color:#cf443a}:where(body.admin-page) .dashboard-status{min-height:24px;margin:10px 4px;color:#66758a;font-weight:700}
@media(max-width:640px){:where(body.admin-page) .admin-view{padding:18px 14px;background-position:center center}:where(body.admin-page) .admin-login-card{width:100%;max-width:390px;padding:28px 22px;border-radius:26px}:where(body.admin-page) .admin-logo{width:64px;height:64px;margin-bottom:12px}:where(body.admin-page) .admin-login-card h1{font-size:30px}:where(body.admin-page) .admin-login-card p{font-size:14px;margin-bottom:20px}:where(body.admin-page) .admin-login-card input{height:54px}:where(body.admin-page) .admin-primary{height:56px}}
@media(max-width:1000px){:where(body.admin-page) .stats-grid{grid-template-columns:repeat(2,1fr)}:where(body.admin-page) .admin-header{align-items:flex-start}:where(body.admin-page) .last-updated{display:none}}@media(max-width:640px){:where(body.admin-page) .admin-login-card{padding:30px 22px}:where(body.admin-page) .admin-login-card h1{font-size:30px}:where(body.admin-page) .admin-header{padding:14px 16px}:where(body.admin-page) .admin-brand small{font-size:11px}:where(body.admin-page) .header-btn{padding:9px 11px}:where(body.admin-page) .admin-main{width:min(100% - 18px,1500px);padding-top:14px}:where(body.admin-page) .stats-grid{grid-template-columns:1fr 1fr;gap:10px}:where(body.admin-page) .stat-card{padding:15px}:where(body.admin-page) .stat-card strong{font-size:28px}:where(body.admin-page) .panel-head{align-items:flex-start;flex-direction:column;padding:20px}:where(body.admin-page) .filter-select{width:100%}}

/* Keep dashboard tables scrollable without showing a scrollbar. */
:where(body.admin-page) *, :where(body.admin-page) *::before, :where(body.admin-page) *::after{
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
:where(body.admin-page) *::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

:where(body.admin-page) .header-btn.accent{background:#0038bc;color:#fff;border-color:#0038bc}:where(body.admin-page) .header-btn.danger{color:#b83b34;border-color:#f0d0cc;background:#fff}:where(body.admin-page) .analytics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px}:where(body.admin-page) .analytics-highlight, :where(body.admin-page) .top-pages, :where(body.admin-page) .visitor-trend{border:1px solid #e4eaf2;border-radius:18px;background:#f8fafc;padding:18px}:where(body.admin-page) .top-pages, :where(body.admin-page) .visitor-trend{grid-column:span 2}:where(body.admin-page) .analytics-highlight span, :where(body.admin-page) .analytics-highlight small{display:block;color:#718099}:where(body.admin-page) .analytics-highlight strong{display:block;font-size:32px;line-height:1;margin:8px 0}:where(body.admin-page) .analytics-highlight small{font-size:11px}:where(body.admin-page) .top-pages-title{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#53647b;margin-bottom:10px}:where(body.admin-page) .top-pages-list{display:grid;gap:8px}:where(body.admin-page) .top-page-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #e7edf4;font-size:12px}:where(body.admin-page) .top-page-row:last-child{border-bottom:0}:where(body.admin-page) .top-page-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(body.admin-page) .visitor-trend-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:10px}:where(body.admin-page) .visitor-trend-head b{display:block;font-size:12px;color:#53647b}:where(body.admin-page) .visitor-trend-head span{display:block;font-size:11px;color:#7b899b;margin-top:4px}:where(body.admin-page) .visitor-trend-total{font-size:12px!important;font-weight:800;color:#18283e!important;white-space:nowrap}:where(body.admin-page) .visitor-30-chart{height:150px;display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:4px;align-items:end;padding:8px 2px 2px;overflow:hidden}:where(body.admin-page) .visitor-bar-wrap{height:100%;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}:where(body.admin-page) .visitor-bar{width:min(12px,72%);min-height:3px;border-radius:4px 4px 1px 1px;background:#2f65d5;box-shadow:0 2px 5px rgba(47,101,213,.12)}:where(body.admin-page) .visitor-bar.is-zero{background:#dfe5ed;box-shadow:none}:where(body.admin-page) .visitor-bar-value{font-size:8px;line-height:1;color:#53647b;font-weight:800;min-height:9px}:where(body.admin-page) .visitor-bar-wrap span{height:10px;font-size:8px;color:#8794a5;white-space:nowrap}:where(body.admin-page) .visitor-bar-wrap:hover .visitor-bar{filter:brightness(.92);transform:translateY(-1px)}:where(body.admin-page) .reviews-admin-list{display:grid;gap:12px;padding:20px}:where(body.admin-page) .review-admin-card{border:1px solid #e1e8f1;border-radius:18px;padding:18px;background:#fbfcfe}:where(body.admin-page) .review-admin-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}:where(body.admin-page) .review-admin-top strong{display:block;color:#12233a;font-size:15px}:where(body.admin-page) .review-stars-admin{display:block;color:#f0a400;letter-spacing:1px;margin-top:4px}:where(body.admin-page) .review-admin-card p{margin:13px 0;color:#526278;line-height:1.65;font-size:13px}:where(body.admin-page) .review-admin-actions{display:flex;gap:8px;flex-wrap:wrap}:where(body.admin-page) .admin-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}:where(body.admin-page) .admin-modal-backdrop{position:absolute;inset:0;background:rgba(4,13,27,.62);backdrop-filter:blur(8px)}:where(body.admin-page) .admin-modal-card{position:relative;width:min(680px,100%);max-height:min(90vh,760px);overflow:auto;background:#fff;border-radius:24px;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.28);z-index:1}:where(body.admin-page) .admin-modal-card h2{margin:0 0 22px;color:#12233a;font-size:27px}:where(body.admin-page) .modal-close{position:absolute;right:16px;top:14px;border:0;background:#f0f3f7;width:34px;height:34px;border-radius:50%;font-size:22px;cursor:pointer;color:#53647b}:where(body.admin-page) .admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}:where(body.admin-page) .admin-form-grid label{display:block;color:#33445b;font-size:12px;font-weight:800}:where(body.admin-page) .admin-form-grid input, :where(body.admin-page) .admin-form-grid textarea, :where(body.admin-page) .admin-form-grid select{display:block;width:100%;box-sizing:border-box;margin-top:6px;border:1px solid #d8e1ec;border-radius:12px;background:#fbfcfe;color:#16263d;padding:11px 12px;font:13px/1.4 Arial,sans-serif;outline:none}:where(body.admin-page) .admin-form-grid textarea{resize:vertical}:where(body.admin-page) .admin-form-grid input:focus, :where(body.admin-page) .admin-form-grid textarea:focus, :where(body.admin-page) .admin-form-grid select:focus{border-color:#0038bc;box-shadow:0 0 0 3px rgba(0,56,188,.08)}:where(body.admin-page) .admin-form-grid .full{grid-column:1/-1}:where(body.admin-page) .modal-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;align-items:center;margin-top:3px}:where(body.admin-page) .admin-primary.small{width:auto;height:44px;padding:0 18px;box-shadow:none}:where(body.admin-page) .modal-status{min-height:20px;margin:0;color:#c23d2f;font-size:12px;font-weight:700}:where(body.admin-page) .modal-open{overflow:hidden}
@media(max-width:1000px){:where(body.admin-page) .analytics-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){:where(body.admin-page) .top-pages, :where(body.admin-page) .visitor-trend{grid-column:1/-1}:where(body.admin-page) .admin-header-actions{flex-wrap:wrap;justify-content:flex-end}:where(body.admin-page) .admin-form-grid{grid-template-columns:1fr}:where(body.admin-page) .analytics-grid{grid-template-columns:1fr 1fr;padding:14px}:where(body.admin-page) .analytics-highlight strong{font-size:27px}:where(body.admin-page) .top-pages{grid-column:1/-1}:where(body.admin-page) .admin-modal-card{padding:23px 18px}:where(body.admin-page) .review-admin-top{flex-direction:column}:where(body.admin-page) .modal-actions{justify-content:stretch}:where(body.admin-page) .modal-actions .header-btn, :where(body.admin-page) .modal-actions .admin-primary{flex:1}:where(body.admin-page) .full{grid-column:1/-1}}

:where(body.admin-page) .survey-media-list{display:flex;gap:6px;flex-wrap:wrap;min-width:120px}:where(body.admin-page) .survey-media-thumb{display:block;width:54px;height:54px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#071426}:where(body.admin-page) .survey-media-thumb img{width:100%;height:100%;object-fit:cover;display:block}:where(body.admin-page) .survey-media-note{display:flex;flex-direction:column;gap:8px}:where(body.admin-page) .survey-media-note input[type=file]{width:100%;padding:10px;border:1px dashed rgba(120,170,255,.35);border-radius:12px;background:rgba(255,255,255,.03)}:where(body.admin-page) .survey-media-note small{font-size:12px;opacity:.7}

:where(body.admin-page) .appointment-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}:where(body.admin-page) .admin-service-picker{grid-column:1/-1}:where(body.admin-page) .admin-service-picker>span{display:block;color:#33445b;font-size:12px;font-weight:800;margin-bottom:6px}:where(body.admin-page) .admin-service-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}:where(body.admin-page) .admin-service-tab{border:1px solid #d8e1ec;background:#fbfcfe;color:#3b4a61;border-radius:11px;padding:10px 11px;font:700 12px/1.25 Arial,sans-serif;cursor:pointer;text-align:left;transition:.18s ease}:where(body.admin-page) .admin-service-tab:hover{border-color:#a8b9d2;transform:translateY(-1px)}:where(body.admin-page) .admin-service-tab.active{background:#0038bc;color:#fff;border-color:#0038bc;box-shadow:0 8px 18px rgba(0,56,188,.16)}:where(body.admin-page) .survey-media-thumb.video{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;text-decoration:none}:where(body.admin-page) .survey-media-thumb.video .media-play{font-size:15px;line-height:1}:where(body.admin-page) .survey-media-thumb.video small{font-size:8px;letter-spacing:.08em;font-weight:800}:where(body.admin-page) .survey-media-thumb.video{background:linear-gradient(135deg,#0b1736,#0038bc)}
@media(max-width:640px){:where(body.admin-page) .appointment-filters{width:100%}:where(body.admin-page) .appointment-filters .filter-select{flex:1;min-width:140px}:where(body.admin-page) .admin-service-tabs{grid-template-columns:1fr}}


/* Dashboard layout refinements */
:where(body.admin-page) .appointment-panel-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}:where(body.admin-page) .admin-footer{position:relative;margin-top:8px;padding:28px 24px 34px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid #dfe6ef;border-radius:26px;box-shadow:0 15px 38px rgba(20,49,85,.06)}:where(body.admin-page) .admin-footer .footer-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#23334a}:where(body.admin-page) .admin-footer .footer-brand img{width:38px;height:38px;object-fit:contain}:where(body.admin-page) .admin-footer .copyright{color:#77869a;font-size:12px}:where(body.admin-page) .admin-logout-footer{margin-left:auto}:where(body.admin-page) .admin-back-to-top{position:fixed!important;right:24px;bottom:24px;z-index:90}:where(body.admin-page) .admin-back-to-top.show{opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important}
@media(max-width:700px){:where(body.admin-page) .appointment-panel-actions{width:100%;justify-content:stretch}:where(body.admin-page) .appointment-panel-actions .header-btn{width:100%}:where(body.admin-page) .appointment-panel-actions .appointment-filters{width:100%}:where(body.admin-page) .admin-footer{flex-direction:column;align-items:flex-start}:where(body.admin-page) .admin-logout-footer{margin-left:0;width:100%}:where(body.admin-page) .admin-back-to-top{right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important}}

/* GA4-inspired analytics workspace */
:where(body.admin-page) .ga4-panel{overflow:hidden}:where(body.admin-page) .ga4-head{align-items:center}:where(body.admin-page) .ga4-controls{display:flex;align-items:center;gap:10px}:where(body.admin-page) .ga4-status{font-size:11px;font-weight:800;color:#718099;background:#f2f5f9;border:1px solid #e1e7ef;border-radius:999px;padding:8px 11px}:where(body.admin-page) .ga4-status.ok{color:#087443;background:#e9f8f0;border-color:#cceedd}:where(body.admin-page) .ga4-status.error{color:#a33a31;background:#fff0ee;border-color:#f3d3ce}:where(body.admin-page) .ga4-wrap{padding:20px}:where(body.admin-page) .ga4-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}:where(body.admin-page) .ga4-kpis article{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px;min-height:92px}:where(body.admin-page) .ga4-kpis span, :where(body.admin-page) .ga4-kpis small{display:block;color:#687990}:where(body.admin-page) .ga4-kpis span{font-size:12px;font-weight:700}:where(body.admin-page) .ga4-kpis strong{display:block;color:#15253b;font-size:26px;margin:8px 0 4px}:where(body.admin-page) .ga4-kpis small{font-size:10px}:where(body.admin-page) .ga4-chart-card, :where(body.admin-page) .ga4-table-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;margin-top:12px}:where(body.admin-page) .ga4-card-title{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #edf1f5}:where(body.admin-page) .ga4-card-title b{display:block;font-size:14px;color:#17263b}:where(body.admin-page) .ga4-card-title span{display:block;font-size:11px;color:#7a889b;margin-top:4px}:where(body.admin-page) .ga4-chart-total{font-size:18px!important;font-weight:800;color:#17263b!important}:where(body.admin-page) .ga4-chart{height:210px;padding:16px 18px;display:flex;align-items:flex-end;gap:5px}:where(body.admin-page) .ga4-bar-wrap{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;min-width:8px}:where(body.admin-page) .ga4-bar{width:100%;max-width:28px;border-radius:5px 5px 2px 2px;background:#2f65d5;min-height:2px}:where(body.admin-page) .ga4-bar-label{font-size:9px;color:#8794a5;white-space:nowrap}:where(body.admin-page) .ga4-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}:where(body.admin-page) .ga4-list{padding:8px 18px 12px}:where(body.admin-page) .ga4-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:10px 0;border-bottom:1px solid #edf1f5;font-size:12px}:where(body.admin-page) .ga4-row:last-child{border-bottom:0}:where(body.admin-page) .ga4-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2b3a50}:where(body.admin-page) .ga4-row b{color:#18283e}:where(body.admin-page) .ga4-realtime{margin-top:12px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:15px 18px;display:flex;justify-content:space-between;align-items:center}:where(body.admin-page) .ga4-realtime div{display:flex;gap:8px;align-items:center;color:#26364b}:where(body.admin-page) .ga4-realtime div span:last-child{color:#7a889b;font-size:11px}:where(body.admin-page) .ga4-realtime strong{font-size:25px;color:#15253b}:where(body.admin-page) .live-dot{width:8px;height:8px;border-radius:50%;background:#1aa66a;box-shadow:0 0 0 4px rgba(26,166,106,.12)}

:where(body.admin-page) .ga4-realtime-summary{margin-top:12px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:15px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px}:where(body.admin-page) .ga4-realtime-summary>div:first-child{display:flex;gap:8px;align-items:center;color:#26364b}:where(body.admin-page) .ga4-realtime-summary>div:first-child span:last-child{color:#7a889b;font-size:11px}:where(body.admin-page) .ga4-realtime-summary>strong{font-size:25px;color:#15253b}:where(body.admin-page) .ga4-realtime-summary>.live-device-breakdown{grid-column:1/-1;margin-top:0}:where(body.admin-page) .ga4-realtime-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;margin-top:12px}:where(body.admin-page) .ga4-realtime-chart-card, :where(body.admin-page) .ga4-realtime-pages-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;min-width:0}:where(body.admin-page) .ga4-realtime-chart{height:190px;padding:16px 16px 4px;display:flex;align-items:flex-end;gap:3px;overflow:hidden}:where(body.admin-page) .ga4-rt-bar-wrap{height:100%;flex:1;min-width:5px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}:where(body.admin-page) .ga4-rt-bar{width:100%;max-width:18px;border-radius:4px 4px 1px 1px;background:#1f8a70;min-height:2px}:where(body.admin-page) .ga4-rt-bar.is-zero{background:#dfe8e5}:where(body.admin-page) .ga4-rt-bar-wrap>span{font-size:8px;color:#8a96a6;height:12px;line-height:12px}:where(body.admin-page) .ga4-realtime-axis{display:flex;justify-content:space-between;padding:2px 16px 13px;color:#8995a5;font-size:9px}:where(body.admin-page) .ga4-realtime-table-wrap{overflow:auto;max-height:254px}:where(body.admin-page) .ga4-realtime-table{width:100%;border-collapse:collapse;font-size:12px}:where(body.admin-page) .ga4-realtime-table th, :where(body.admin-page) .ga4-realtime-table td{padding:11px 14px;border-bottom:1px solid #edf1f5;text-align:right;white-space:nowrap}:where(body.admin-page) .ga4-realtime-table th:first-child, :where(body.admin-page) .ga4-realtime-table td:first-child{text-align:left}:where(body.admin-page) .ga4-realtime-table th{color:#718096;font-size:10px;text-transform:none;font-weight:700}:where(body.admin-page) .ga4-realtime-table td:first-child{max-width:260px;overflow:hidden;text-overflow:ellipsis}:where(body.admin-page) .ga4-realtime-table td{color:#26364b}:where(body.admin-page) .ga4-realtime-table tr:last-child td{border-bottom:0}
@media(max-width:1200px){:where(body.admin-page) .ga4-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){:where(body.admin-page) .ga4-realtime-grid{grid-template-columns:1fr}:where(body.admin-page) .ga4-realtime-chart{height:165px}:where(body.admin-page) .ga4-realtime-summary{grid-template-columns:1fr auto}:where(body.admin-page) .ga4-head{align-items:flex-start}:where(body.admin-page) .ga4-controls{width:100%;flex-wrap:wrap}:where(body.admin-page) .ga4-controls .filter-select{width:auto}:where(body.admin-page) .ga4-kpis{grid-template-columns:1fr 1fr}:where(body.admin-page) .ga4-columns{grid-template-columns:1fr}:where(body.admin-page) .ga4-chart{height:170px;padding:12px}:where(body.admin-page) .ga4-bar-label{display:none}:where(body.admin-page) .ga4-wrap{padding:14px}:where(body.admin-page) .ga4-realtime{padding:13px}:where(body.admin-page) .ga4-realtime div span:last-child{display:none}}

:where(body.admin-page) .live-device-breakdown{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:#667085}:where(body.admin-page) .live-device-breakdown span{white-space:nowrap}:where(body.admin-page) .live-device-breakdown b{color:#16233d}

/* Final admin login presentation */
:where(body.admin-page) .admin-view::before{background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 48%,rgba(255,255,255,.18) 66%,rgba(255,255,255,.62) 84%,rgba(255,255,255,.96) 100%)}
:where(body.admin-page) .admin-login-card{width:min(460px,100%);padding:10px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
:where(body.admin-page) .admin-login-card form{margin-top:22px;padding:18px;border-radius:20px;background:rgba(5,13,25,.72);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 45px rgba(0,0,0,.24)}
:where(body.admin-page) .admin-login-card form label{display:none}
:where(body.admin-page) .admin-login-card input{margin-top:0;text-align:center}
:where(body.admin-page) .admin-login-card input::placeholder{text-align:center}
:where(body.admin-page) .admin-primary span{display:none}
:where(body.admin-page) .admin-primary{gap:0}
@media(max-width:640px){:where(body.admin-page) .admin-login-card{padding:18px 14px}:where(body.admin-page) .admin-login-card form{padding:16px}:where(body.admin-page) .admin-login-card h1{font-size:30px}}

/* V48 — final login spacing, no glass card */
:where(body.admin-page) .admin-view{
  display:grid;
  place-items:center;
  padding:clamp(20px,4vw,42px);
  text-align:center;
}
:where(body.admin-page) .admin-login-card{
  width:min(560px,100%);
  padding:0;
  margin:0 auto;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
:where(body.admin-page) .admin-login-card .admin-logo{
  width:76px;
  height:76px;
  margin:0 auto 16px;
  display:block;
}
:where(body.admin-page) .admin-login-card .admin-kicker{
  margin:0 0 8px;
  color:#e9f4ff;
  font-size:11px;
  line-height:1.3;
  letter-spacing:.18em;
  font-weight:900;
  text-align:center;
}
:where(body.admin-page) .admin-login-card h1{
  margin:0 0 10px;
  color:#ffffff;
  font-size:clamp(31px,4vw,42px);
  line-height:1.05;
  font-weight:850;
  text-align:center;
}
:where(body.admin-page) .admin-login-card > p{
  max-width:520px;
  margin:0 auto 26px;
  color:rgba(247,250,255,.94);
  font-size:15px;
  line-height:1.55;
  font-weight:600;
  text-align:center;
}
:where(body.admin-page) .admin-login-card form{
  width:min(430px,100%);
  margin:0 auto;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
:where(body.admin-page) .admin-login-card input{
  width:100%;
  height:60px;
  margin:0;
  padding:0 22px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.42);
  border-radius:18px;
  outline:none;
  background:rgba(7,17,31,.88);
  color:#ffffff;
  font-size:16px;
  font-weight:700;
  text-align:center;
  text-shadow:none;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}
:where(body.admin-page) .admin-login-card input::placeholder{
  color:rgba(255,255,255,.92);
  text-align:center;
  opacity:1;
}
:where(body.admin-page) .admin-login-card input:focus{
  border-color:rgba(255,255,255,.82);
  box-shadow:0 0 0 4px rgba(255,255,255,.10),0 10px 22px rgba(0,0,0,.16);
}
:where(body.admin-page) .admin-primary{
  width:100%;
  height:60px;
  margin:0;
  padding:0 22px;
  border:0;
  border-radius:18px;
  background:#ff7900;
  color:#ffffff;
  font-size:16px;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 12px 26px rgba(128,54,0,.22);
}
:where(body.admin-page) .admin-primary:hover{
  background:#ff8617;
}
:where(body.admin-page) .admin-status{
  width:100%;
  min-height:20px!important;
  margin:2px 0 0!important;
  color:#ffffff!important;
  font-weight:700;
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
@media(max-width:640px){
  :where(body.admin-page) .admin-view{padding:20px 16px}
  :where(body.admin-page) .admin-login-card{width:min(100%,390px)}
  :where(body.admin-page) .admin-login-card .admin-logo{width:66px;height:66px;margin-bottom:13px}
  :where(body.admin-page) .admin-login-card h1{font-size:30px;margin-bottom:9px}
  :where(body.admin-page) .admin-login-card > p{font-size:14px;line-height:1.5;margin-bottom:22px;max-width:360px}
  :where(body.admin-page) .admin-login-card form{width:min(100%,360px);gap:12px}
  :where(body.admin-page) .admin-login-card input, :where(body.admin-page) .admin-primary{height:56px;border-radius:17px}
}

/* V8 — admin login typography colors tuned to the opening background */
:where(body.admin-page) .admin-login-card .admin-kicker{
  color:#D9F7FF;
  text-shadow:0 2px 8px rgba(8,42,69,.70);
}
:where(body.admin-page) .admin-login-card h1{
  color:#FFF4D6;
  text-shadow:0 3px 10px rgba(8,42,69,.72);
}
:where(body.admin-page) .admin-login-card > p{
  color:#FFFFFF;
  text-shadow:0 2px 7px rgba(8,42,69,.78);
}
:where(body.admin-page) .admin-login-card input{
  color:#FFFFFF;
}
:where(body.admin-page) .admin-login-card input::placeholder{
  color:#F3F7FA;
}
:where(body.admin-page) .admin-primary{
  color:#FFFFFF;
}
:where(body.admin-page) .admin-status{
  color:#FFFFFF!important;
}


/* =========================================================
   APPOINTMENT PAGE STYLES — scoped to body.appointment-page
   Combined from appointment.css; declarations retained.
   ========================================================= */
/* =========================================================
   COLINZ NETWORK — APPOINTMENT PAGE
   Uses the existing site colors: orange + deep blue.
   ========================================================= */

:where(body).appointment-page{
  background:
    radial-gradient(circle at 10% 8%, rgba(239,143,0,.08), transparent 28%),
    radial-gradient(circle at 90% 14%, rgba(0,56,188,.08), transparent 30%),
    #f7f9fc;
  color: #0b1736;
}

:where(body.appointment-page) .appointment-shell{
  width: min(1200px, calc(100% - 36px));
  margin: 42px auto 74px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 28px;
  align-items: stretch;
}

:where(body.appointment-page) .appointment-intro{
  padding: 38px 8px 22px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:where(body.appointment-page) .appointment-kicker, :where(body.appointment-page) .tag{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

:where(body.appointment-page) .appointment-kicker{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #0038bc;
  margin-bottom: 19px;
}

:where(body.appointment-page) .appointment-kicker span{
  width: 24px;
  height: 2px;
  border-radius: 20px;
  background: #ef8f00;
}

:where(body.appointment-page) .appointment-intro h1{
  margin: 0;
  max-width: 560px;
  font-size: clamp(48px, 6vw, 82px);
  line-height: .95;
  letter-spacing: -4px;
  font-weight: 500;
}

:where(body.appointment-page) .appointment-intro h1 strong{
  color: #0038bc;
  font-weight: 800;
}

:where(body.appointment-page) .appointment-lead{
  margin: 24px 0 0;
  max-width: 565px;
  color: #64738c;
  font-size: 16px;
  line-height: 1.7;
}

:where(body.appointment-page) .appointment-trust-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px;
  margin-top: 30px;
}

:where(body.appointment-page) .appointment-trust-row div{
  min-height: 86px;
  padding: 14px 12px;
  border: 1px solid rgba(0,56,188,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 30px rgba(19,44,79,.055);
}

:where(body.appointment-page) .appointment-trust-row b{
  display: block;
  margin-bottom: 8px;
  color: #ef8f00;
  font-size: 11px;
  letter-spacing: 1px;
}

:where(body.appointment-page) .appointment-trust-row span{
  display: block;
  color: #23314b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

:where(body.appointment-page) .appointment-note{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 17px;
  padding: 13px 15px;
  border-radius: 16px;
  background: rgba(0,56,188,.055);
  border: 1px solid rgba(0,56,188,.08);
}

:where(body.appointment-page) .appointment-note-icon{
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ef8f00;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

:where(body.appointment-page) .appointment-note strong, :where(body.appointment-page) .appointment-note small{
  display: block;
}

:where(body.appointment-page) .appointment-note strong{
  margin-bottom: 3px;
  color: #0b1736;
  font-size: 12px;
}

:where(body.appointment-page) .appointment-note small{
  color: #6a7890;
  font-size: 11px;
  line-height: 1.5;
}

:where(body.appointment-page) .appointment-panel{
  overflow: hidden;
  border: 1px solid rgba(11,23,54,.07);
  border-radius: 30px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 24px 70px rgba(11,35,72,.11);
  backdrop-filter: blur(16px);
}

:where(body.appointment-page) .booking-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 27px 28px 20px;
  border-bottom: 1px solid rgba(11,23,54,.07);
}

:where(body.appointment-page) .booking-panel-head h2{
  margin: 6px 0 0;
  color: #0b1736;
  font-size: 27px;
  letter-spacing: -1px;
}

:where(body.appointment-page) .booking-panel-head .tag{
  color: #ef8f00;
}

:where(body.appointment-page) .availability-pill{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(0,56,188,.065);
  color: #0038bc;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

:where(body.appointment-page) .availability-pill i{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20ad65;
  box-shadow: 0 0 0 4px rgba(32,173,101,.12);
}

:where(body.appointment-page) .booking-layout{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  padding: 20px;
}

:where(body.appointment-page) .calendar-card, :where(body.appointment-page) .booking-details{
  min-width: 0;
  border-radius: 22px;
}

:where(body.appointment-page) .calendar-card{
  padding: 17px;
  background: #f7f9fc;
  border: 1px solid rgba(11,23,54,.06);
}

:where(body.appointment-page) .calendar-head{
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
}

:where(body.appointment-page) .calendar-head > div{
  text-align: center;
}

:where(body.appointment-page) .calendar-head strong, :where(body.appointment-page) .calendar-head small{
  display: block;
}

:where(body.appointment-page) .calendar-head strong{
  color: #0b1736;
  font-size: 15px;
}

:where(body.appointment-page) .calendar-head small{
  margin-top: 4px;
  color: #7a8799;
  font-size: 10px;
}

:where(body.appointment-page) .calendar-arrow{
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,56,188,.11);
  border-radius: 12px;
  background: #fff;
  color: #0038bc;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  transition: .2s ease;
}

:where(body.appointment-page) .calendar-arrow:hover:not(:disabled){
  transform: translateY(-2px);
  background: #0038bc;
  color: #fff;
}

:where(body.appointment-page) .calendar-arrow:disabled{
  opacity: .35;
  cursor: not-allowed;
}

:where(body.appointment-page) .weekdays, :where(body.appointment-page) .calendar-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 7px;
}

:where(body.appointment-page) .weekdays{
  margin: 18px 0 8px;
}

:where(body.appointment-page) .weekdays span{
  text-align: center;
  color: #96a0af;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .8px;
}

:where(body.appointment-page) .calendar-grid{
  min-height: 252px;
}

:where(body.appointment-page) .calendar-day{
  position: relative;
  min-height: 37px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fff;
  color: #25324a;
  cursor: pointer;
  font: 700 11px/1 "DM Sans", sans-serif;
  transition: .2s ease;
}

:where(body.appointment-page) .calendar-day:hover:not(:disabled){
  transform: translateY(-2px);
  border-color: rgba(239,143,0,.55);
}

:where(body.appointment-page) .calendar-day.other-month{
  opacity: .28;
  pointer-events: none;
}

:where(body.appointment-page) .calendar-day:disabled{
  cursor: not-allowed;
}

:where(body.appointment-page) .calendar-day.today{
  box-shadow: inset 0 0 0 1px rgba(0,56,188,.18);
}

:where(body.appointment-page) .calendar-day.available{
  color: #0038bc;
  box-shadow: inset 0 0 0 1px rgba(0,56,188,.07);
}

:where(body.appointment-page) .calendar-day.selected{
  background: #0038bc;
  color: #fff;
  border-color: #0038bc;
  box-shadow: 0 8px 15px rgba(0,56,188,.22);
}

:where(body.appointment-page) .calendar-day.booked, :where(body.appointment-page) .calendar-day.sunday, :where(body.appointment-page) .calendar-day.past{
  background: #eef1f5;
  color: #a5adba;
}

:where(body.appointment-page) .calendar-day.booked::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #ef8f00;
}

:where(body.appointment-page) .calendar-day.sunday::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #d0d4dc;
}

:where(body.appointment-page) .calendar-day.selected::after{
  background: #fff;
}

:where(body.appointment-page) .calendar-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin-top: 14px;
  color: #77849a;
  font-size: 9px;
}

:where(body.appointment-page) .calendar-legend span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

:where(body.appointment-page) .legend-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

:where(body.appointment-page) .legend-dot.available{ background: #0038bc; }
:where(body.appointment-page) .legend-dot.selected{ background: #ef8f00; }
:where(body.appointment-page) .legend-dot.booked{ background: #8d97a7; }
:where(body.appointment-page) .legend-dot.sunday{ background: #d0d4dc; }

:where(body.appointment-page) .booking-details{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(11,23,54,.06);
  padding: 19px;
}

:where(body.appointment-page) .selection-summary{
  padding: 1px 2px 15px;
}

:where(body.appointment-page) .mini-label{
  display: block;
  color: #ef8f00;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

:where(body.appointment-page) .selection-summary strong{
  display: block;
  margin-top: 5px;
  color: #0b1736;
  font-size: 21px;
  letter-spacing: -.5px;
}

:where(body.appointment-page) .selection-summary small{
  display: block;
  margin-top: 4px;
  color: #7b8798;
  font-size: 10px;
  line-height: 1.45;
}

:where(body.appointment-page) .appointment-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:where(body.appointment-page) .form-two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

:where(body.appointment-page) .appointment-form label:not(.consent) span{
  display: block;
  margin: 0 0 5px;
  color: #23314b;
  font-size: 10px;
  font-weight: 800;
}

:where(body.appointment-page) .appointment-form em{
  color: #9aa4b3;
  font-style: normal;
  font-weight: 500;
}

:where(body.appointment-page) .appointment-form input[type="text"], :where(body.appointment-page) .appointment-form input[type="tel"], :where(body.appointment-page) .appointment-form input[type="email"], :where(body.appointment-page) .appointment-form textarea{
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(11,23,54,.11);
  border-radius: 13px;
  background: #fbfcfe;
  color: #15223b;
  padding: 11px 12px;
  font: 12px/1.4 "DM Sans", sans-serif;
  outline: none;
  transition: .2s ease;
}

:where(body.appointment-page) .appointment-form textarea{
  resize: vertical;
  min-height: 78px;
}

:where(body.appointment-page) .appointment-form input:focus, :where(body.appointment-page) .appointment-form textarea:focus{
  border-color: #0038bc;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,56,188,.07);
}

:where(body.appointment-page) .consent{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #738095;
  font-size: 9px;
  line-height: 1.5;
}

:where(body.appointment-page) .consent input{
  margin-top: 2px;
  accent-color: #0038bc;
}

:where(body.appointment-page) .appointment-submit{
  width: 100%;
  min-height: 52px;
  margin-top: 2px;
  padding: 5px 7px 5px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  background: #ef8f00;
  color: #fff;
  cursor: pointer;
  font: 800 12px/1 "DM Sans", sans-serif;
  box-shadow: 0 12px 24px rgba(239,143,0,.22);
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}

:where(body.appointment-page) .appointment-submit b{
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #ef8f00;
  font-size: 21px;
  font-weight: 400;
  transition: transform .25s ease;
}

:where(body.appointment-page) .appointment-submit:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 17px 30px rgba(239,143,0,.28);
}

:where(body.appointment-page) .appointment-submit:hover b{
  transform: translateX(4px);
}

:where(body.appointment-page) .appointment-submit:disabled{
  opacity: .65;
  cursor: wait;
}

:where(body.appointment-page) .form-status{
  min-height: 17px;
  margin: 2px 2px 0;
  font-size: 10px;
  line-height: 1.45;
}

:where(body.appointment-page) .form-status.success{ color: #128250; }
:where(body.appointment-page) .form-status.error{ color: #c23d2f; }

:where(body.appointment-page) .appointment-services{
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto 72px;
}

:where(body.appointment-page) .appointment-section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 22px;
}

:where(body.appointment-page) .appointment-section-head h2{
  margin: 7px 0 0;
  font-size: clamp(33px,4vw,52px);
  line-height: .98;
  letter-spacing: -2px;
  font-weight: 500;
}

:where(body.appointment-page) .appointment-section-head h2 strong{
  color: #0038bc;
}

:where(body.appointment-page) .appointment-service-grid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
}

:where(body.appointment-page) .appointment-service-grid article{
  min-height: 205px;
  padding: 22px;
  border-radius: 21px;
  background: #fff;
  border: 1px solid rgba(11,23,54,.07);
  box-shadow: 0 15px 35px rgba(11,35,72,.055);
}

:where(body.appointment-page) .appointment-service-grid article > b{
  color: #ef8f00;
  font-size: 10px;
  letter-spacing: 1px;
}

:where(body.appointment-page) .appointment-service-grid h3{
  margin: 34px 0 7px;
  color: #0b1736;
  font-size: 17px;
}

:where(body.appointment-page) .appointment-service-grid p{
  margin: 0;
  color: #76839a;
  font-size: 11px;
  line-height: 1.65;
}

:where(body.appointment-page) .appointment-footer-cta{
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto 46px;
  padding: 30px;
  border-radius: 28px;
  background: linear-gradient(135deg, #0038bc 0%, #052f91 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 25px 60px rgba(0,56,188,.18);
}

:where(body.appointment-page) .appointment-footer-cta .tag{ color: rgba(255,255,255,.65); }

:where(body.appointment-page) .appointment-footer-cta h2{
  margin: 7px 0 3px;
  font-size: 30px;
  letter-spacing: -1px;
}

:where(body.appointment-page) .appointment-footer-cta p{
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 11px;
}

:where(body.appointment-page) .appointment-footer-cta .orange-btn{
  flex: 0 0 auto;
}

:where(body.appointment-page) .booking-toast{
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 200;
  max-width: min(520px, calc(100% - 30px));
  padding: 13px 17px;
  border-radius: 14px;
  background: #0b1736;
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  font-size: 11px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: .25s ease;
}

:where(body.appointment-page) .booking-toast.show{
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1050px) {
  :where(body.appointment-page) .appointment-shell{
    grid-template-columns: 1fr;
  }

  :where(body.appointment-page) .appointment-intro{
    padding-right: 4px;
  }

  :where(body.appointment-page) .appointment-intro h1{
    max-width: 720px;
  }

  :where(body.appointment-page) .booking-layout{
    grid-template-columns: 1fr 1fr;
  }

  :where(body.appointment-page) .appointment-service-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  :where(body.appointment-page) .appointment-shell, :where(body.appointment-page) .appointment-services, :where(body.appointment-page) .appointment-footer-cta{
    width: min(100% - 24px, 640px);
  }

  :where(body.appointment-page) .appointment-shell{
    margin-top: 24px;
    gap: 18px;
  }

  :where(body.appointment-page) .appointment-intro h1{
    font-size: clamp(43px, 14vw, 64px);
    letter-spacing: -2.5px;
  }

  :where(body.appointment-page) .appointment-lead{
    font-size: 14px;
  }

  :where(body.appointment-page) .appointment-trust-row{
    grid-template-columns: 1fr;
  }

  :where(body.appointment-page) .appointment-trust-row div{
    min-height: 0;
  }

  :where(body.appointment-page) .booking-panel-head{
    align-items: flex-start;
    padding: 22px 18px 17px;
    flex-direction: column;
  }

  :where(body.appointment-page) .booking-layout{
    grid-template-columns: 1fr;
    padding: 12px;
  }

  :where(body.appointment-page) .appointment-section-head, :where(body.appointment-page) .appointment-footer-cta{
    flex-direction: column;
    align-items: flex-start;
  }

  :where(body.appointment-page) .appointment-footer-cta .orange-btn{
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 520px) {
  :where(body.appointment-page) .form-two{
    grid-template-columns: 1fr;
  }

  :where(body.appointment-page) .appointment-service-grid{
    grid-template-columns: 1fr;
  }

  :where(body.appointment-page) .calendar-card{
    padding: 11px;
  }

  :where(body.appointment-page) .weekdays, :where(body.appointment-page) .calendar-grid{
    gap: 4px;
  }

  :where(body.appointment-page) .calendar-day{
    min-height: 35px;
  }

  :where(body.appointment-page) .calendar-legend{
    gap: 6px 9px;
  }
}

:where(body.appointment-page) .service-picker{position:relative;padding:4px 0;background:transparent;border:0;border-radius:0}:where(body.appointment-page) .service-picker-label{display:block;margin-bottom:8px;color:#23314b;font-size:9px;font-weight:900;letter-spacing:1.1px}:where(body.appointment-page) .service-picker-label::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-radius:50%;background:rgba(0,56,188,.18);vertical-align:middle}:where(body.appointment-page) .service-select{width:100%;min-height:48px;padding:0 15px;border:1px solid rgba(11,23,54,.09);border-radius:14px;background:rgba(255,255,255,.72);color:#6c788c;display:flex;align-items:center;justify-content:space-between;text-align:left;font:600 13px/1.2 "DM Sans",sans-serif;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,color .18s ease}:where(body.appointment-page) .service-select b{font-size:18px;font-weight:500;line-height:1;transition:transform .18s ease}:where(body.appointment-page) .service-select:hover, :where(body.appointment-page) .service-select:focus-visible, :where(body.appointment-page) .service-select.open{border-color:rgba(0,56,188,.28);outline:none;box-shadow:0 0 0 3px rgba(0,56,188,.06)}:where(body.appointment-page) .service-select.has-value{color:#172a50;font-weight:700}:where(body.appointment-page) .service-select.open b{transform:rotate(180deg)}:where(body.appointment-page) .service-menu{margin-top:7px;padding:5px;border:1px solid rgba(11,23,54,.08);border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 14px 35px rgba(15,31,60,.08);overflow:hidden}:where(body.appointment-page) .service-menu[hidden]{display:none}:where(body.appointment-page) .service-tab{position:relative;display:block;width:100%;border:0;border-radius:10px;background:transparent;color:#52617a;padding:11px 12px;text-align:left;cursor:pointer;font:600 12px/1.3 "DM Sans",sans-serif;transition:background .16s ease,color .16s ease}:where(body.appointment-page) .service-tab:hover{background:rgba(0,56,188,.045);color:#0038bc}:where(body.appointment-page) .service-tab.active{background:rgba(0,56,188,.07);color:#0038bc;font-weight:800}:where(body.appointment-page) .survey-media-upload{display:flex;flex-direction:column;gap:7px;margin-top:12px}:where(body.appointment-page) .survey-media-upload > span{color:#23314b;font-size:13px;font-weight:700}:where(body.appointment-page) .survey-media-upload em{font-style:normal;font-size:11px;font-weight:500;color:#8994a7}:where(body.appointment-page) .survey-media-upload input[type=file]{width:100%;padding:11px;border:1px dashed rgba(0,56,188,.2);border-radius:12px;background:rgba(0,56,188,.025);font:500 12px/1.3 "DM Sans",sans-serif;color:#5b687c}:where(body.appointment-page) .survey-media-upload small{color:#8a95a7;font-size:10px;line-height:1.4}@media(max-width:520px){:where(body.appointment-page) .service-select{min-height:50px;font-size:13px}:where(body.appointment-page) .service-menu{max-height:300px;overflow-y:auto}:where(body.appointment-page) .service-tab{padding:12px 11px}}

/* Appointment page embedded inside the popup navigation */
:where(body.appointment-page) html.appointment-embed body{overflow:auto!important;background:#f7f9fc!important}
:where(body.appointment-page) html.appointment-embed .header, :where(body.appointment-page) html.appointment-embed footer, :where(body.appointment-page) html.appointment-embed .booking-toast, :where(body.appointment-page) html.appointment-embed .menu-toggle, :where(body.appointment-page) html.appointment-embed .popup-menu, :where(body.appointment-page) html.appointment-embed .menu-overlay, :where(body.appointment-page) html.appointment-embed .menu-action-modal{display:none!important}
:where(body.appointment-page) html.appointment-embed .site{min-height:100%;width:100%}
:where(body.appointment-page) html.appointment-embed .appointment-shell{padding-top:35px}


/* Consent component styling is self-contained in its component markup. */


/* ADMIN DASHBOARD SIDEBAR + WORKING SECTION NAVIGATION */
:where(body).admin-page .admin-dashboard{display:flex;min-height:100vh;background:#f5f8fc}
:where(body).admin-page .admin-sidebar{width:260px;flex:0 0 260px;background:#071326;color:#eaf1fc;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh;z-index:35;border-right:1px solid #142640}
:where(body).admin-page .sidebar-brand{height:78px;display:flex;align-items:center;gap:11px;padding:0 20px;border-bottom:1px solid #1a2b43}
:where(body).admin-page .sidebar-brand img{width:38px;height:38px;object-fit:contain}
:where(body).admin-page .sidebar-brand strong{font-size:13px;letter-spacing:.03em;color:#fff;white-space:nowrap}
:where(body).admin-page .sidebar-brand strong span{color:#ff7900}
:where(body).admin-page .sidebar-brand small{display:block;color:#8ea0ba;font-size:9px;letter-spacing:.16em;margin-top:4px}
:where(body).admin-page .admin-nav{padding:20px 12px;display:grid;gap:7px}
:where(body).admin-page .admin-nav-btn{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid transparent;background:transparent;color:#b7c5d9;padding:12px 13px;border-radius:12px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.3;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
:where(body).admin-page .admin-nav-btn:hover{background:#10233e;color:#fff}
:where(body).admin-page .admin-nav-btn.active{background:rgba(255,121,0,.13);border-color:rgba(255,121,0,.25);color:#ff9b3d;box-shadow:inset 3px 0 #ff7900}
:where(body).admin-page .nav-symbol{width:20px;flex:0 0 20px;text-align:center;font-size:18px}
:where(body).admin-page .sidebar-bottom{margin-top:auto;padding:16px 13px;display:flex;align-items:center;gap:10px;border-top:1px solid #1a2b43;background:#061020}
:where(body).admin-page .sidebar-admin-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#182b45;color:#ff9b3d;font-weight:800;font-size:11px}
:where(body).admin-page .sidebar-admin-details{min-width:0;flex:1}
:where(body).admin-page .sidebar-admin-details strong{display:block;font-size:12px;color:#fff}
:where(body).admin-page .sidebar-admin-details small{display:block;font-size:10px;color:#8ea0ba;margin-top:3px}
:where(body).admin-page #sidebarLogoutBtn{border:0;background:transparent;color:#8ea0ba;font-size:18px;cursor:pointer;padding:6px}
:where(body).admin-page .admin-workspace{min-width:0;flex:1;display:flex;flex-direction:column;height:100vh;overflow:auto}
:where(body).admin-page .admin-workspace .admin-header{position:sticky;top:0}
:where(body).admin-page .admin-workspace .admin-main{width:min(1500px,calc(100% - 40px));}
:where(body).admin-page .admin-tab-panel{display:none}
:where(body).admin-page .admin-tab-panel.active{display:block;animation:adminTabIn .18s ease-out}
:where(body).admin-page .admin-menu-btn{display:none;border:1px solid #d8e0eb;background:#fff;color:#203049;border-radius:10px;width:38px;height:38px;font-size:19px;cursor:pointer}
:where(body).admin-page .admin-mobile-scrim{display:none}
:where(body).admin-page .admin-tab-panel .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@keyframes adminTabIn{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){:where(body).admin-page .admin-sidebar{width:230px;flex-basis:230px}:where(body).admin-page .admin-tab-panel .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){:where(body).admin-page .admin-dashboard{display:block}:where(body).admin-page .admin-sidebar{position:fixed;inset:0 auto 0 0;width:min(285px,84vw);height:100dvh;min-height:0;transform:translateX(-102%);transition:transform .24s ease;box-shadow:18px 0 45px rgba(0,0,0,.25)}:where(body).admin-page .admin-sidebar.open{transform:translateX(0)}:where(body).admin-page .admin-mobile-scrim.show{display:block;position:fixed;inset:0;background:rgba(4,12,24,.55);z-index:30}:where(body).admin-page .admin-workspace{height:100dvh}:where(body).admin-page .admin-menu-btn{display:inline-grid;place-items:center}:where(body).admin-page .admin-header{gap:10px;padding:12px 14px}:where(body).admin-page .admin-brand{gap:8px}:where(body).admin-page .admin-brand img{width:34px;height:34px}:where(body).admin-page .admin-brand strong{font-size:15px}:where(body).admin-page .admin-brand small{font-size:10px}:where(body).admin-page .last-updated{display:none}:where(body).admin-page .admin-workspace .admin-main{width:calc(100% - 24px);padding:18px 0 42px}:where(body).admin-page .admin-tab-panel .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}:where(body).admin-page .stat-card{padding:15px;border-radius:16px}:where(body).admin-page .stat-card strong{font-size:28px}:where(body).admin-page .panel-head{align-items:flex-start;flex-direction:column;padding:18px 16px 14px}:where(body).admin-page .panel-head h2{font-size:22px}:where(body).admin-page .appointment-panel-actions{width:100%;flex-direction:column;align-items:stretch}:where(body).admin-page .appointment-filters{display:flex;flex-wrap:wrap}:where(body).admin-page .filter-select{max-width:100%;font-size:12px}:where(body).admin-page footer{padding:18px 14px;gap:14px;flex-wrap:wrap}}
@media(max-width:390px){:where(body).admin-page .admin-tab-panel .stats-grid{grid-template-columns:1fr}:where(body).admin-page .admin-header-actions{gap:5px}:where(body).admin-page .header-btn{padding:9px 10px}}

/* COLINZ ADMIN — reference-dashboard layout (scoped to admin.html only) */
body.cn-admin-page{margin:0;background:#07152e;color:#eaf2ff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}
body.cn-admin-page *{box-sizing:border-box}
body.cn-admin-page .cn-dashboard{display:flex;min-height:100vh;width:100%;overflow:hidden;background:radial-gradient(ellipse at 65% 20%,rgba(25,92,165,.22),transparent 42%),linear-gradient(135deg,#07142b 0%,#0b1d40 56%,#102c59 100%);color:#eaf2ff;font-family:Inter,system-ui,sans-serif}
body.cn-admin-page .cn-sidebar{width:258px;flex:0 0 258px;min-height:100vh;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;justify-content:space-between;background:rgba(3,12,29,.91);border-right:1px solid rgba(104,157,225,.23);z-index:42;backdrop-filter:blur(20px)}
body.cn-admin-page .cn-sidebar-brand{height:82px;padding:0 20px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(104,157,225,.18)}
body.cn-admin-page .cn-sidebar-brand>img{height:39px;width:39px;object-fit:contain;flex:0 0 auto}
body.cn-admin-page .cn-sidebar-brand strong{display:block;color:#f6f9ff;font-size:13px;font-weight:800;letter-spacing:.035em;white-space:nowrap}
body.cn-admin-page .cn-sidebar-brand strong span{color:#22d3ee}
body.cn-admin-page .cn-sidebar-brand small{display:block;margin-top:4px;color:#91a9ce;font-size:9px;letter-spacing:.12em;white-space:nowrap}
body.cn-admin-page .cn-close-sidebar{display:none}
body.cn-admin-page .cn-nav{display:grid;gap:7px;padding:19px 12px}
body.cn-admin-page .cn-nav-btn{width:100%;min-height:44px;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid transparent;border-radius:11px;background:transparent;color:#b9c9e2;padding:11px 13px;font:600 12.5px/1.3 Inter,system-ui,sans-serif;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
body.cn-admin-page .cn-nav-btn>svg{width:17px;height:17px;flex:0 0 17px;stroke-width:1.9}
body.cn-admin-page .cn-nav-btn:hover{color:#fff;background:rgba(51,97,157,.19)}
body.cn-admin-page .cn-nav-btn.active{color:#e7fff8;background:linear-gradient(90deg,rgba(14,207,155,.17),rgba(22,89,157,.22));border-color:rgba(22,230,172,.29);box-shadow:inset 3px 0 #10e6a0}
body.cn-admin-page .cn-nav-btn.active>svg{color:#23e5b0}
body.cn-admin-page .cn-nav-count{margin-left:auto;display:inline-grid;place-items:center;min-width:23px;height:21px;padding:0 6px;border-radius:6px;background:rgba(34,211,238,.13);color:#4cdeef;font-size:10px;font-weight:800}
body.cn-admin-page .cn-nav-count.amber{background:rgba(245,158,11,.15);color:#ffd15c}
body.cn-admin-page .cn-sidebar-user{display:flex;align-items:center;gap:10px;padding:15px 13px;border-top:1px solid rgba(104,157,225,.2);background:rgba(2,9,22,.38)}
body.cn-admin-page .cn-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 34px;background:linear-gradient(135deg,#0a8d9f,#087c71);color:#efffff;font-size:11px;font-weight:800}
body.cn-admin-page .cn-user-copy{min-width:0;flex:1}
body.cn-admin-page .cn-user-copy strong{display:block;color:#edf5ff;font-size:11.5px}
body.cn-admin-page .cn-user-copy small{display:block;color:#7f9bbf;font-size:10px;margin-top:3px}
body.cn-admin-page .cn-sidebar-user button{display:grid;place-items:center;width:31px;height:31px;border:1px solid transparent;background:transparent;color:#93aaca;border-radius:8px;cursor:pointer}
body.cn-admin-page .cn-sidebar-user button:hover{background:rgba(65,110,171,.2);color:#fff}
body.cn-admin-page .cn-sidebar-user svg{width:16px;height:16px}
body.cn-admin-page .cn-workspace{min-width:0;flex:1;display:flex;flex-direction:column;height:100vh;overflow:auto;scrollbar-color:#284c7d #091731;scrollbar-width:thin}
body.cn-admin-page .cn-header{position:sticky;top:0;z-index:24;min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px clamp(18px,2.5vw,38px);background:rgba(5,17,39,.87);border-bottom:1px solid rgba(95,146,212,.25);backdrop-filter:blur(20px)}
body.cn-admin-page .cn-header-left{display:flex;align-items:center;gap:14px;min-width:0}
body.cn-admin-page .cn-header-left h1{margin:0;color:#f7faff;font-size:clamp(17px,1.7vw,22px);line-height:1.2;font-weight:750;letter-spacing:-.035em}
body.cn-admin-page .cn-header-left p{margin:5px 0 0;color:#93afd5;font-size:11px;line-height:1.4}
body.cn-admin-page .cn-menu-btn{display:none;width:38px;height:38px;place-items:center;border:1px solid rgba(112,161,218,.3);border-radius:10px;background:rgba(23,48,86,.8);color:#e8f3ff;cursor:pointer}
body.cn-admin-page .cn-menu-btn svg{width:19px;height:19px}
body.cn-admin-page .cn-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
body.cn-admin-page .cn-global-search,.cn-admin-page .cn-search-field{display:flex;align-items:center;gap:9px;min-width:0;height:39px;padding:0 12px;border:1px solid rgba(107,155,218,.42);border-radius:10px;background:rgba(17,45,85,.82);box-shadow:inset 0 1px rgba(255,255,255,.035);color:#9fb7d8}
body.cn-admin-page .cn-global-search{width:clamp(180px,24vw,340px)}
body.cn-admin-page .cn-global-search svg,.cn-admin-page .cn-search-field svg{height:16px;width:16px;flex:0 0 16px}
body.cn-admin-page .cn-global-search input,.cn-admin-page .cn-search-field input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#f1f7ff;font:500 11.5px Inter,system-ui,sans-serif}
body.cn-admin-page .cn-global-search input::placeholder,.cn-admin-page .cn-search-field input::placeholder{color:#a6bbd7;opacity:.9}
body.cn-admin-page .cn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:37px;padding:9px 13px;border:1px solid transparent;border-radius:9px;font:650 11.5px Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .16s,background .16s,border-color .16s,color .16s}
body.cn-admin-page .cn-btn svg{width:15px;height:15px;flex:0 0 15px}
body.cn-admin-page .cn-btn:active{transform:translateY(1px)}
body.cn-admin-page .cn-btn-primary{color:#02281f;background:linear-gradient(135deg,#27ef9e,#12d780);box-shadow:0 5px 20px rgba(13,221,139,.18);border-color:rgba(117,255,197,.5)}
body.cn-admin-page .cn-btn-primary:hover{background:linear-gradient(135deg,#66ffc3,#15e393);box-shadow:0 7px 23px rgba(13,221,139,.26)}
body.cn-admin-page .cn-icon-btn{position:relative;width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:1px solid rgba(103,151,211,.3);border-radius:10px;background:rgba(16,38,72,.9);color:#bcd2ed;cursor:pointer}
body.cn-admin-page .cn-icon-btn svg{width:16px;height:16px}
body.cn-admin-page .cn-icon-btn:hover{color:#fff;border-color:rgba(70,221,189,.5)}
body.cn-admin-page .cn-notification-dot{position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;background:#13efa0;box-shadow:0 0 0 3px rgba(19,239,160,.11)}
body.cn-admin-page .cn-mobile-scrim{display:none}
body.cn-admin-page .cn-main{width:min(1600px,100%);margin:0 auto;padding:26px clamp(16px,2.6vw,40px) 40px;display:block}
body.cn-admin-page .cn-tab-panel{display:none;animation:cn-panel-in .18s ease-out}
body.cn-admin-page .cn-tab-panel.active{display:block}
@keyframes cn-panel-in{from{opacity:.45;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
body.cn-admin-page .cn-metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
body.cn-admin-page .cn-metric-card{min-width:0;min-height:148px;padding:20px 21px;border-radius:15px;border:1px solid rgba(106,158,223,.31);background:linear-gradient(145deg,rgba(16,42,82,.89),rgba(9,28,58,.85));box-shadow:0 9px 24px rgba(0,0,0,.1);transition:border-color .18s,transform .18s}
body.cn-admin-page .cn-metric-card:hover{border-color:rgba(100,193,246,.52);transform:translateY(-1px)}
body.cn-admin-page .cn-metric-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#b0c7e5;font-size:11.5px;font-weight:550}
body.cn-admin-page .cn-metric-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;flex:0 0 39px}
body.cn-admin-page .cn-metric-icon svg{width:20px;height:20px;stroke-width:2}
body.cn-admin-page .cn-metric-icon.cyan{background:rgba(6,182,212,.16);color:#38e3f0}
body.cn-admin-page .cn-metric-icon.amber{background:rgba(245,158,11,.16);color:#f9c84b}
body.cn-admin-page .cn-metric-icon.green{background:rgba(16,223,151,.15);color:#34f1b0}
body.cn-admin-page .cn-metric-icon.violet{background:rgba(129,140,248,.16);color:#a5b4fc}
body.cn-admin-page .cn-metric-value{margin-top:10px;color:#fff;font-size:31px;line-height:1.12;letter-spacing:-.04em;font-weight:800;font-variant-numeric:tabular-nums}
body.cn-admin-page .cn-metric-card small{display:block;margin-top:9px;color:#819fc8;font-size:10px;line-height:1.45}
body.cn-admin-page .cn-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-bottom:18px}
body.cn-admin-page .cn-card{min-width:0;border:1px solid rgba(103,156,222,.32);border-radius:15px;background:linear-gradient(145deg,rgba(15,39,78,.88),rgba(9,27,57,.88));box-shadow:0 11px 28px rgba(0,0,0,.1);overflow:hidden}
body.cn-admin-page .cn-chart-card{padding:20px 21px 14px;min-width:0}
body.cn-admin-page .cn-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
body.cn-admin-page .cn-section-head h2{display:flex;align-items:center;gap:9px;margin:0;color:#f4f8ff;font-size:13.5px;font-weight:750;line-height:1.4}
body.cn-admin-page .cn-section-head h2 svg{width:17px;height:17px;color:#39e8b1;flex:0 0 17px}
body.cn-admin-page .cn-section-head p{margin:5px 0 0;color:#8da9ce;font-size:10.5px;line-height:1.5}
body.cn-admin-page .cn-chart-tag{display:inline-flex;align-items:center;justify-content:center;max-width:160px;padding:5px 8px;border:1px solid rgba(40,216,171,.24);border-radius:7px;background:rgba(16,184,137,.11);color:#48e8b2;font-size:9px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
body.cn-admin-page .cn-line-chart{width:100%;height:220px;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
body.cn-admin-page .cn-chart-svg{display:block;width:100%;height:100%;overflow:visible}
body.cn-admin-page .cn-chart-gridline{stroke:rgba(108,153,207,.16);stroke-width:1;stroke-dasharray:3 5}
body.cn-admin-page .cn-chart-ylabel,.cn-admin-page .cn-chart-xlabel{font:10px Inter,system-ui,sans-serif;fill:#829fc4}
body.cn-admin-page .cn-chart-line{fill:none;stroke:#23e2b0;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(35,226,176,.22))}
body.cn-admin-page .cn-chart-point{fill:#0d2b50;stroke:#52f1c1;stroke-width:2;cursor:default}
body.cn-admin-page .cn-traffic-card{padding:20px 21px;margin-bottom:19px}
body.cn-admin-page .cn-live-label{display:flex;align-items:center;gap:6px;color:#91b3d9;font-size:10.5px;white-space:nowrap}
body.cn-admin-page .cn-live-label>span,.cn-admin-page .cn-live-pulse{width:7px;height:7px;border-radius:50%;background:#1feb9d;box-shadow:0 0 0 4px rgba(31,235,157,.1)}
body.cn-admin-page .cn-live-label b{color:#43f0b1;font-size:14px}
body.cn-admin-page .cn-traffic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body.cn-admin-page .cn-traffic-stat{padding:15px;border:1px solid rgba(87,135,199,.23);border-radius:11px;background:rgba(3,17,40,.32);min-width:0}
body.cn-admin-page .cn-traffic-stat>span{display:block;color:#8ba8ce;font-size:10.5px}
body.cn-admin-page .cn-traffic-stat>strong{display:block;margin-top:10px;color:#f7faff;font-size:25px;line-height:1.2;font-weight:800}
body.cn-admin-page .cn-device-breakdown{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px;color:#9db8da;font-size:10px}
body.cn-admin-page .cn-device-breakdown span{white-space:nowrap}
body.cn-admin-page .cn-device-breakdown b{color:#41e7b4}
body.cn-admin-page .cn-top-pages{grid-column:1/-1;padding:15px;border:1px solid rgba(87,135,199,.23);border-radius:11px;background:rgba(3,17,40,.32)}
body.cn-admin-page .cn-top-pages h3{font-size:11px;margin:0 0 11px;color:#e8f1ff}
body.cn-admin-page .cn-top-pages-list{display:grid;gap:8px}
body.cn-admin-page .cn-page-row{display:flex;justify-content:space-between;gap:14px;padding-bottom:8px;border-bottom:1px solid rgba(87,135,199,.14);font-size:10.5px;color:#9bb6d9}
body.cn-admin-page .cn-page-row:last-child{padding-bottom:0;border-bottom:0}
body.cn-admin-page .cn-page-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.cn-admin-page .cn-page-row b{color:#42e9b2;font-variant-numeric:tabular-nums}
body.cn-admin-page .cn-muted{display:block;color:#8ba6ca;font-size:11px;padding:8px 0;line-height:1.55}
body.cn-admin-page .cn-ga4-panel{margin-bottom:12px}
body.cn-admin-page .cn-ga4-head{padding:20px 21px 15px;margin-bottom:0;border-bottom:1px solid rgba(98,148,210,.18);align-items:center}
body.cn-admin-page .cn-ga4-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
body.cn-admin-page .cn-ga4-status{display:inline-flex;align-items:center;border-radius:7px;padding:6px 9px;background:rgba(123,153,191,.11);border:1px solid rgba(123,153,191,.2);color:#b5c9e4;font-size:10px;font-weight:700;white-space:nowrap}
body.cn-admin-page .cn-ga4-status.ok{color:#44e9b2;background:rgba(17,199,139,.1);border-color:rgba(17,199,139,.25)}
body.cn-admin-page .cn-ga4-status.error{color:#ff9da6;background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.25)}
body.cn-admin-page .cn-select{min-width:145px;max-width:100%;padding:10px 34px 10px 12px;border:1px solid rgba(105,154,216,.42);border-radius:9px;background-color:#102b54;color:#eef5ff;font:550 11px Inter,system-ui,sans-serif;outline:none;cursor:pointer}
body.cn-admin-page .cn-select:focus,.cn-admin-page .cn-search-field:focus-within,.cn-admin-page .cn-global-search:focus-within{border-color:#38dfb5;box-shadow:0 0 0 3px rgba(56,223,181,.1)}
body.cn-admin-page .cn-select option{background:#0b1d3a;color:#f3f8ff}
body.cn-admin-page .cn-ga4-wrap{padding:18px 21px 22px}
body.cn-admin-page .cn-ga4-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:13px}
body.cn-admin-page .cn-ga4-kpis article{padding:13px 14px;border:1px solid rgba(88,137,200,.22);border-radius:10px;background:rgba(3,15,35,.38);min-width:0}
body.cn-admin-page .cn-ga4-kpis article span{display:block;color:#96b0d1;font-size:10px}
body.cn-admin-page .cn-ga4-kpis article strong{display:block;margin-top:8px;color:#f6f9ff;font-size:23px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
body.cn-admin-page .cn-ga4-kpis article small{display:block;margin-top:7px;color:#708fb8;font-size:9px;line-height:1.45}
body.cn-admin-page .cn-ga4-chart-card,.cn-admin-page .cn-ga4-list-card{min-width:0;border:1px solid rgba(88,137,200,.23);border-radius:11px;background:rgba(3,15,35,.34);overflow:hidden}
body.cn-admin-page .cn-ga4-chart-card{padding:14px}
body.cn-admin-page .cn-mini-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
body.cn-admin-page .cn-mini-head b{display:block;color:#f0f6ff;font-size:11px}
body.cn-admin-page .cn-mini-head span:not(.cn-chart-tag){display:block;margin-top:4px;color:#88a4c9;font-size:9.5px}
body.cn-admin-page .cn-ga4-chart{display:flex;align-items:flex-end;gap:5px;min-height:192px;height:192px;padding:10px 2px 0;overflow-x:auto}
body.cn-admin-page .cn-ga4-bar-wrap{display:flex;flex:1;min-width:10px;min-height:100%;height:100%;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;color:#7998c0;font-size:9px}
body.cn-admin-page .cn-ga4-bar{width:min(100%,19px);min-width:4px;min-height:2px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#3ce7d0,#0c94bd);box-shadow:0 0 12px rgba(16,190,203,.12)}
body.cn-admin-page .cn-ga4-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:13px}
body.cn-admin-page .cn-ga4-list-card .cn-mini-head{padding:14px 14px 0}
body.cn-admin-page .cn-ga4-list{display:grid;gap:0;padding:0 14px 12px}
body.cn-admin-page .cn-ga4-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid rgba(88,137,200,.13);font-size:10px;color:#9cb6d8}
body.cn-admin-page .cn-ga4-row:last-child{border-bottom:0}
body.cn-admin-page .cn-ga4-row span{overflow-wrap:anywhere}
body.cn-admin-page .cn-ga4-row b{color:#e8f2ff;white-space:nowrap}
body.cn-admin-page .cn-realtime-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 20px;margin-top:13px;padding:15px;border:1px solid rgba(20,210,157,.23);border-radius:11px;background:rgba(6,65,65,.13)}
body.cn-admin-page .cn-realtime-summary>div:first-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#8ca8cd;font-size:10px}
body.cn-admin-page .cn-realtime-summary>div:first-child b{color:#effff9;font-size:12px}
body.cn-admin-page .cn-realtime-summary>strong{font-size:24px;color:#42edb5}
body.cn-admin-page .cn-realtime-summary>.cn-device-breakdown{grid-column:1/-1;margin-top:0}
body.cn-admin-page .cn-live-pulse{display:inline-block;flex:0 0 7px}
body.cn-admin-page .cn-realtime-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:12px;margin-top:13px}
body.cn-admin-page .cn-realtime-chart{height:170px;display:flex;align-items:flex-end;gap:3px;padding-top:8px}
body.cn-admin-page .cn-rt-bar-wrap{display:flex;flex:1;min-width:2px;height:100%;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;color:#8ba9cd;font-size:8px}
body.cn-admin-page .cn-rt-bar{min-width:2px;width:100%;max-width:12px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#48eaca,#148bbd)}
body.cn-admin-page .cn-rt-bar.is-zero{opacity:.22}
body.cn-admin-page .cn-realtime-axis{display:flex;justify-content:space-between;color:#7591b7;font-size:8px;margin-top:9px}
body.cn-admin-page .cn-table-wrap{width:100%;overflow-x:auto}
body.cn-admin-page .cn-table{border-collapse:collapse;width:100%;min-width:650px;text-align:left;font-size:11px}
body.cn-admin-page .cn-table th{padding:15px 16px;background:rgba(4,16,36,.5);border-bottom:1px solid rgba(104,155,219,.26);color:#9bb8dc;font-size:10px;font-weight:750;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap}
body.cn-admin-page .cn-table td{padding:15px 16px;border-bottom:1px solid rgba(104,155,219,.13);color:#d9e7fa;vertical-align:middle}
body.cn-admin-page .cn-table tbody tr:hover{background:rgba(38,88,147,.12)}
body.cn-admin-page .cn-table tbody tr:last-child td{border-bottom:0}
body.cn-admin-page .cn-realtime-table{min-width:320px;font-size:10px}
body.cn-admin-page .cn-realtime-table th,.cn-admin-page .cn-realtime-table td{padding:10px 12px}
body.cn-admin-page .cn-realtime-table td:first-child{max-width:170px;overflow:hidden;text-overflow:ellipsis}
body.cn-admin-page .cn-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding:15px 17px;border:1px solid rgba(105,157,222,.29);border-radius:13px;background:rgba(11,35,71,.76)}
body.cn-admin-page .cn-filter-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
body.cn-admin-page .cn-search-field{width:min(430px,100%);flex:0 1 430px}
body.cn-admin-page .cn-appointment-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
body.cn-admin-page .cn-btn-view{min-height:36px;padding:8px 12px;color:#a5bcda;background:transparent;border-color:transparent}
body.cn-admin-page .cn-btn-view.active{color:#f0f7ff;background:#254b7f;border-color:rgba(125,175,233,.3)}
body.cn-admin-page .cn-btn-view:hover{color:#fff;background:rgba(72,114,171,.25)}
body.cn-admin-page .cn-table-card{box-shadow:0 15px 32px rgba(0,0,0,.11)}
body.cn-admin-page .cn-appointments-table{min-width:890px}
body.cn-admin-page .cn-appointments-table th{padding-top:17px;padding-bottom:17px}
body.cn-admin-page .cn-appointments-table td{padding-top:17px;padding-bottom:17px}
body.cn-admin-page .cn-client-name{color:#f3f8ff;font-size:12px;font-weight:750;line-height:1.45}
body.cn-admin-page .cn-client-contact,.cn-admin-page .cn-table-sub{display:block;margin-top:4px;color:#92afd4;font-size:10px;line-height:1.5}
body.cn-admin-page .cn-service-name{display:block;max-width:225px;font-size:11.5px;line-height:1.5;font-weight:650;color:#edf4ff}
body.cn-admin-page .cn-package-badge{display:inline-block;max-width:170px;padding:5px 9px;border:1px solid rgba(125,180,235,.14);border-radius:6px;background:rgba(64,115,174,.24);color:#d4e6ff;font-size:10px;font-weight:700;line-height:1.35}
body.cn-admin-page .cn-status-pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border:1px solid transparent;border-radius:999px;font-size:10px;line-height:1.2;font-weight:700;white-space:nowrap}
body.cn-admin-page .cn-status-pill.confirmed,.cn-admin-page .cn-status-pill.completed{background:rgba(16,207,151,.13);border-color:rgba(16,207,151,.25);color:#48e8b5}
body.cn-admin-page .cn-status-pill.pending{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.24);color:#ffcf58}
body.cn-admin-page .cn-status-pill.in-progress{background:rgba(239,172,57,.13);border-color:rgba(239,172,57,.24);color:#ffd075}
body.cn-admin-page .cn-status-pill.cancelled{background:rgba(248,113,113,.11);border-color:rgba(248,113,113,.22);color:#ff999e}
body.cn-admin-page .cn-quick-dispatch{min-width:200px;text-align:right;white-space:nowrap}
body.cn-admin-page .cn-whatsapp-btn,.cn-admin-page .cn-status-open{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:29px;padding:6px 8px;margin:2px;border:1px solid rgba(23,226,159,.3);border-radius:6px;background:rgba(11,170,112,.16);color:#3de7b0;text-decoration:none;font:650 9.5px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
body.cn-admin-page .cn-whatsapp-btn svg,.cn-admin-page .cn-status-open svg{width:12px;height:12px;flex:0 0 12px}
body.cn-admin-page .cn-whatsapp-btn:hover{background:#0c9c6d;color:#fff}
body.cn-admin-page .cn-status-open{background:rgba(101,136,188,.17);border-color:rgba(101,149,211,.21);color:#b6cce8}
body.cn-admin-page .cn-status-open:hover{background:rgba(95,139,198,.29);color:white}
body.cn-admin-page .cn-inline-status{display:block;max-width:152px;margin:5px 2px 0 auto;font-size:10px;padding:7px 26px 7px 8px}
body.cn-admin-page .cn-delete-icon{display:inline-grid;place-items:center;width:29px;height:29px;margin:2px;border:1px solid rgba(248,113,113,.22);border-radius:6px;background:rgba(248,113,113,.06);color:#fda4af;vertical-align:middle;cursor:pointer}
body.cn-admin-page .cn-delete-icon svg{width:13px;height:13px}
body.cn-admin-page .cn-delete-icon:hover{background:rgba(248,113,113,.2);color:#fff}
body.cn-admin-page .cn-empty-row{padding:30px 18px!important;text-align:center;color:#8ba6ca!important;font-size:11px;line-height:1.6}
body.cn-admin-page .cn-calendar-card{padding:18px}
body.cn-admin-page .cn-calendar-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
body.cn-admin-page .cn-calendar-top h2{margin:0;font-size:13px;color:#f4f8ff}
body.cn-admin-page .cn-calendar-nav{display:flex;gap:7px}
body.cn-admin-page .cn-calendar-nav button{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(104,155,219,.25);border-radius:7px;background:#122e56;color:#c5d9f2;cursor:pointer}
body.cn-admin-page .cn-calendar-nav svg{width:15px;height:15px}
body.cn-admin-page .cn-calendar-weekdays,.cn-admin-page .cn-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
body.cn-admin-page .cn-calendar-weekdays{margin-bottom:7px;padding-bottom:9px;border-bottom:1px solid rgba(104,155,219,.2);color:#91acce;text-align:center;font-size:10px;font-weight:750}
body.cn-admin-page .cn-calendar-day{min-height:95px;min-width:0;padding:7px;border:1px solid rgba(105,157,222,.18);border-radius:7px;background:rgba(9,29,59,.62);overflow:hidden}
body.cn-admin-page .cn-calendar-day.outside{opacity:.48}
body.cn-admin-page .cn-calendar-day-number{display:block;color:#e7f2ff;font-size:11px;font-weight:750;margin-bottom:5px}
body.cn-admin-page .cn-calendar-event{display:block;overflow:hidden;margin-top:4px;padding:4px 5px;border-radius:5px;background:rgba(34,211,238,.13);color:#63e5ee;font-size:8px;line-height:1.35}
body.cn-admin-page .cn-calendar-event.pending{background:rgba(245,158,11,.13);color:#ffd15c}
body.cn-admin-page .cn-calendar-event.completed{background:rgba(16,207,151,.12);color:#47e8b4}
body.cn-admin-page .cn-calendar-event.cancelled{background:rgba(248,113,113,.12);color:#ff9da6}
body.cn-admin-page .cn-calendar-event b,.cn-admin-page .cn-calendar-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.cn-admin-page .cn-calendar-event small{margin-top:2px;opacity:.8}
body.cn-admin-page .cn-calendar-more{display:block;margin-top:4px;color:#b4cde9;font-size:8px}
body.cn-admin-page .cn-panel-intro{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
body.cn-admin-page .cn-panel-intro h2{margin:0;color:#f4f8ff;font-size:16px;font-weight:750}
body.cn-admin-page .cn-panel-intro p{margin:6px 0 0;color:#92aed2;font-size:10.5px;line-height:1.6}
body.cn-admin-page .cn-survey-toolbar{display:flex;gap:11px;align-items:center;margin-bottom:17px}
body.cn-admin-page .cn-survey-toolbar .cn-search-field{flex:1;width:auto}
body.cn-admin-page .cn-survey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
body.cn-admin-page .cn-survey-card{display:flex;flex-direction:column;min-width:0;padding:18px;border:1px solid rgba(101,153,216,.28);border-radius:13px;background:linear-gradient(145deg,rgba(15,39,78,.86),rgba(9,27,57,.91));box-shadow:0 9px 22px rgba(0,0,0,.09)}
body.cn-admin-page .cn-survey-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
body.cn-admin-page .cn-survey-card-head h3{margin:0;color:#f3f8ff;font-size:12px;font-weight:750;line-height:1.5;overflow-wrap:anywhere}
body.cn-admin-page .cn-survey-meta{display:flex;align-items:flex-start;gap:8px;margin-top:11px;color:#9db8da;font-size:10.5px;line-height:1.5}
body.cn-admin-page .cn-survey-meta svg{width:14px;height:14px;flex:0 0 14px;margin-top:1px;color:#67a7ed}
body.cn-admin-page .cn-survey-hardware{margin-top:13px;padding:12px;border:1px solid rgba(89,137,199,.18);border-radius:8px;background:rgba(4,17,39,.42)}
body.cn-admin-page .cn-survey-hardware>span{display:block;color:#7f9fc7;font-size:8.5px;font-weight:800;letter-spacing:.07em}
body.cn-admin-page .cn-survey-hardware p{margin:7px 0 0;color:#c9dcf4;font-size:10px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
body.cn-admin-page .cn-survey-files{margin-top:13px}
body.cn-admin-page .cn-files-head{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:9px;color:#a9c0e0;font-size:9.5px}
body.cn-admin-page .cn-files-head>span{display:flex;align-items:center;gap:6px}
body.cn-admin-page .cn-files-head svg{width:13px;height:13px;color:#40e5b2}
body.cn-admin-page .cn-files-head small{color:#7995bb;font-size:8.5px;white-space:nowrap}
body.cn-admin-page .cn-survey-media{display:flex;flex-wrap:wrap;gap:6px;min-height:38px}
body.cn-admin-page .cn-survey-media-image{width:47px;height:43px;display:block;overflow:hidden;border:1px solid rgba(103,157,220,.25);border-radius:6px;background:#0b1c38}
body.cn-admin-page .cn-survey-media-image img{width:100%;height:100%;object-fit:cover;display:block}
body.cn-admin-page .cn-survey-media-video{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:57px;height:43px;border:1px solid rgba(103,157,220,.25);border-radius:6px;background:rgba(7,24,51,.9);color:#87b9ef;text-decoration:none;font-size:8px}
body.cn-admin-page .cn-survey-media-video svg{width:16px;height:16px}
body.cn-admin-page .cn-survey-footer{display:flex;align-items:center;justify-content:flex-start;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:13px;border-top:1px solid rgba(93,143,207,.18)}
body.cn-admin-page .cn-received{display:block;width:100%;margin-bottom:3px;color:#7896bd;font-size:9px}
body.cn-admin-page .cn-survey-status-label{display:flex;align-items:center;gap:5px;color:#8da9cf;font-size:9px}
body.cn-admin-page .cn-survey-status-label .cn-select,.cn-admin-page .cn-survey-status-label select{min-width:95px;padding:6px 23px 6px 7px;font-size:9px;border-radius:6px}
body.cn-admin-page .cn-review-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:23px}
body.cn-admin-page .cn-review-metric{display:flex;align-items:center;gap:14px;min-height:122px;padding:19px 20px;border:1px solid rgba(104,157,222,.3);border-radius:14px;background:linear-gradient(145deg,rgba(16,42,82,.89),rgba(9,28,58,.85));min-width:0}
body.cn-admin-page .cn-review-score{display:grid;place-items:center;width:59px;height:59px;flex:0 0 59px;border-radius:50%;font-size:21px;font-weight:800;color:#fff;background:rgba(13,195,171,.33);box-shadow:inset 0 0 18px rgba(35,233,195,.08)}
body.cn-admin-page .cn-review-score.cyan{background:rgba(6,182,212,.23);color:#34e0ef}
body.cn-admin-page .cn-review-score.amber{background:rgba(245,158,11,.2);color:#ffd15a}
body.cn-admin-page .cn-review-metric>div:last-child{min-width:0}
body.cn-admin-page .cn-review-metric span{display:block;color:#b6cbe7;font-size:10.5px;line-height:1.5}
body.cn-admin-page .cn-review-metric strong{display:block;margin-top:5px;color:#f1f6ff;font-size:11px}
body.cn-admin-page .cn-review-metric .cn-warning-text{color:#ffd052}
body.cn-admin-page .cn-stars{display:flex;align-items:center;gap:2px;margin-top:5px;color:#ffd34f}
body.cn-admin-page .cn-stars svg{height:13px;width:13px;fill:currentColor;stroke:currentColor}
body.cn-admin-page .cn-moderation-section>h2{margin:0 0 13px;color:#aac2e3;font-size:11px;font-weight:800;letter-spacing:.065em;text-transform:uppercase}
body.cn-admin-page .cn-review-list{display:grid;gap:13px}
body.cn-admin-page .cn-review-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 19px;border:1px solid rgba(103,156,222,.29);border-radius:13px;background:linear-gradient(105deg,rgba(15,39,78,.87),rgba(11,33,67,.88));min-width:0}
body.cn-admin-page .cn-review-copy{min-width:0;flex:1}
body.cn-admin-page .cn-review-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.cn-admin-page .cn-review-title-row h3{margin:0;color:#f5f8ff;font-size:11.5px;font-weight:800}
body.cn-admin-page .cn-stars-inline{color:#ffd34f;font-size:14px;letter-spacing:1px;white-space:nowrap}
body.cn-admin-page .cn-review-date{color:#7f9dc3;font-size:9.5px}
body.cn-admin-page .cn-review-message{margin:8px 0 0;color:#c8daf1;font-size:11.5px;line-height:1.65;font-style:italic;overflow-wrap:anywhere}
body.cn-admin-page .cn-review-media{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
body.cn-admin-page .cn-review-media img{display:block;width:38px;height:34px;object-fit:cover;border:1px solid rgba(104,156,221,.3);border-radius:5px}
body.cn-admin-page .cn-review-media>a:not(:has(img)){display:inline-flex;align-items:center;gap:5px;color:#8ec6f8;font-size:9px;text-decoration:none}
body.cn-admin-page .cn-review-media>a svg{width:13px;height:13px}
body.cn-admin-page .cn-review-tools{display:grid;justify-items:end;gap:8px;flex:0 0 auto}
body.cn-admin-page .cn-publish-control{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;color:#b8cde9;font-size:10px}
body.cn-admin-page .cn-switch{position:relative;width:47px;height:25px;display:inline-flex;align-items:center;padding:3px;border:1px solid rgba(133,167,207,.28);border-radius:999px;background:#213d64;cursor:pointer;transition:background .18s,border-color .18s;flex:0 0 47px}
body.cn-admin-page .cn-switch span{display:block;width:17px;height:17px;border-radius:50%;background:#ecf5ff;box-shadow:0 1px 3px rgba(0,0,0,.28);transform:translateX(0);transition:transform .18s}
body.cn-admin-page .cn-switch.is-on{background:#10d98a;border-color:#5effbd;box-shadow:0 0 14px rgba(16,217,138,.21)}
body.cn-admin-page .cn-switch.is-on span{transform:translateX(21px);background:white}
body.cn-admin-page .cn-switch:disabled{opacity:.65;cursor:wait}
body.cn-admin-page .cn-publish-state{font-size:9px;font-weight:800}
body.cn-admin-page .cn-publish-state.published{color:#41ecb2}
body.cn-admin-page .cn-publish-state.unpublished{color:#ffd15a}
body.cn-admin-page .cn-review-actions{display:flex;align-items:center;gap:6px}
body.cn-admin-page .cn-review-edit{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(105,153,213,.23);border-radius:6px;background:rgba(36,67,111,.43);color:#c5d9f3;font:650 9.5px Inter,system-ui,sans-serif;cursor:pointer}
body.cn-admin-page .cn-review-edit svg{width:12px;height:12px}
body.cn-admin-page .cn-review-edit:hover{color:#fff;background:rgba(60,105,164,.55)}
body.cn-admin-page .cn-review-delete{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(248,113,113,.2);border-radius:6px;background:rgba(248,113,113,.05);color:#fca5a5;cursor:pointer}
body.cn-admin-page .cn-review-delete svg{width:13px;height:13px}
body.cn-admin-page .cn-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}
body.cn-admin-page .cn-package-card{position:relative;overflow:hidden;min-width:0;padding:22px 20px 20px;border:1px solid rgba(104,157,222,.25);border-radius:14px;background:linear-gradient(145deg,rgba(15,39,78,.88),rgba(9,27,57,.9))}
body.cn-admin-page .cn-package-card.popular{border-color:rgba(19,223,156,.5);box-shadow:inset 0 0 20px rgba(19,223,156,.035)}
body.cn-admin-page .cn-package-price{display:inline-flex;align-items:center;margin-bottom:13px;padding:6px 9px;border-radius:6px;background:rgba(33,67,114,.72);color:#d7eaff;font-size:9.5px;font-weight:800}
body.cn-admin-page .cn-package-card.popular .cn-package-price{background:#20e39a;color:#032719}
body.cn-admin-page .cn-package-card h3{margin:0;color:#f5f9ff;font-size:16px;font-weight:800}
body.cn-admin-page .cn-package-card p{margin:10px 0 17px;color:#91add1;font-size:10.5px;line-height:1.65}
body.cn-admin-page .cn-package-card ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
body.cn-admin-page .cn-package-card li{display:flex;align-items:flex-start;gap:8px;color:#d2e1f7;font-size:10.5px;line-height:1.45}
body.cn-admin-page .cn-package-card li svg{width:14px;height:14px;flex:0 0 14px;color:#3ce9ad}
body.cn-admin-page .cn-voucher-card{margin-top:0}
body.cn-admin-page .cn-voucher-card .cn-section-head{padding:18px 19px 0}
body.cn-admin-page .cn-settings-card{max-width:760px;padding:21px 22px}
body.cn-admin-page .cn-settings-title{padding-bottom:16px;border-bottom:1px solid rgba(103,156,222,.2)}
body.cn-admin-page .cn-settings-title h2{margin:0;color:#f4f8ff;font-size:14px}
body.cn-admin-page .cn-settings-title p{margin:7px 0 0;color:#8da8cc;font-size:10.5px;line-height:1.5}
body.cn-admin-page .cn-settings-form{display:grid;gap:17px;padding-top:18px}
body.cn-admin-page .cn-settings-form>label:not(.cn-check-row){display:grid;gap:7px;color:#afc7e5;font-size:10.5px;font-weight:650}
body.cn-admin-page .cn-settings-form input:not([type="checkbox"]),body.cn-admin-page .cn-settings-form select{width:100%;min-height:39px;padding:10px 12px;border:1px solid rgba(103,155,220,.31);border-radius:8px;background:#091d3a;color:#ecf4ff;font:500 11px Inter,system-ui,sans-serif}
body.cn-admin-page .cn-settings-form input[readonly]{color:#9bb4d7;background:rgba(4,15,33,.5)}
body.cn-admin-page .cn-check-row{display:flex;align-items:flex-start;gap:10px;color:#a8c0e0;font-size:10.5px;line-height:1.6}
body.cn-admin-page .cn-check-row input{accent-color:#12dd92;margin-top:2px}
body.cn-admin-page .cn-settings-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px}
body.cn-admin-page .cn-settings-actions p{color:#8cddb9;font-size:10px;line-height:1.5;margin:0}
body.cn-admin-page .cn-dashboard-status{min-height:0;margin:7px 0 0;color:#ffcd68;font-size:11px}
body.cn-admin-page .cn-modal-open{overflow:hidden}
body.cn-admin-page .cn-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
body.cn-admin-page .cn-modal.hidden{display:none!important}
body.cn-admin-page .cn-modal-backdrop{position:fixed;inset:0;background:rgba(0,7,20,.76);backdrop-filter:blur(7px)}
body.cn-admin-page .cn-modal-card{position:relative;width:min(570px,100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:25px 27px 24px;border:1px solid rgba(116,168,232,.35);border-radius:18px;background:linear-gradient(145deg,#102d59,#0a1d3a 82%);box-shadow:0 25px 75px rgba(0,0,0,.47)}
body.cn-admin-page .cn-modal-wide{width:min(700px,100%)}
body.cn-admin-page .cn-modal-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid rgba(109,159,218,.25)}
body.cn-admin-page .cn-modal-head h2{margin:0;color:#fff;font-size:19px;line-height:1.3;letter-spacing:-.02em}
body.cn-admin-page .cn-modal-close{width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;color:#a9c3e4;border-radius:7px;cursor:pointer}
body.cn-admin-page .cn-modal-close:hover{color:#fff;background:rgba(95,137,191,.2)}
body.cn-admin-page .cn-modal-close svg{width:19px;height:19px}
body.cn-admin-page .cn-appointment-form{display:grid;grid-template-columns:1fr;gap:16px}
body.cn-admin-page .cn-form-full{grid-column:1/-1}
body.cn-admin-page .cn-form-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body.cn-admin-page .cn-appointment-form label{display:grid;gap:8px;min-width:0;color:#bfd1e9;font-size:12px;font-weight:500}
body.cn-admin-page .cn-appointment-form input:not([type="file"]),body.cn-admin-page .cn-appointment-form select,body.cn-admin-page .cn-appointment-form textarea{width:100%;min-height:45px;padding:12px 14px;border:1px solid rgba(100,151,215,.2);border-radius:8px;outline:none;background:#07152e;color:#f2f7ff;font:550 12px Inter,system-ui,sans-serif;transition:border-color .16s,box-shadow .16s}
body.cn-admin-page .cn-appointment-form textarea{resize:vertical;min-height:92px;line-height:1.55}
body.cn-admin-page .cn-appointment-form input::placeholder,body.cn-admin-page .cn-appointment-form textarea::placeholder{color:#738fb6}
body.cn-admin-page .cn-appointment-form input:focus,body.cn-admin-page .cn-appointment-form select:focus,body.cn-admin-page .cn-appointment-form textarea:focus{border-color:#31d9b0;box-shadow:0 0 0 3px rgba(49,217,176,.09)}
body.cn-admin-page .cn-modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding-top:4px;grid-column:1/-1}
body.cn-admin-page .cn-btn-muted{background:rgba(104,132,168,.16);border-color:rgba(120,152,192,.17);color:#c3d6ed}
body.cn-admin-page .cn-btn-muted:hover{background:rgba(104,132,168,.26);color:#fff}
body.cn-admin-page .cn-form-status{margin:0;color:#ffd36a;font-size:10.5px;line-height:1.5;white-space:pre-line}
body.cn-admin-page .cn-upload-box{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:84px;padding:17px;border:1px dashed rgba(109,159,218,.37);border-radius:9px;background:rgba(3,16,36,.42);color:#9bb6d8;font-size:10.5px;text-align:center;cursor:pointer}
body.cn-admin-page .cn-upload-box>svg{width:22px;height:22px;color:#70a9e9;flex:0 0 22px}
body.cn-admin-page .cn-upload-box input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
body.cn-admin-page .cn-toast{position:fixed;left:50%;bottom:22px;z-index:150;max-width:min(90vw,520px);padding:12px 16px;border:1px solid rgba(89,170,215,.38);border-radius:10px;background:#102b52;color:#e9f5ff;font-size:11px;line-height:1.5;box-shadow:0 14px 38px rgba(0,0,0,.38);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .18s,transform .18s}
body.cn-admin-page .cn-toast.show{opacity:1;transform:translate(-50%,0)}
body.cn-admin-page .cn-toast.error{border-color:rgba(248,113,113,.38);color:#ffdadd}
body.cn-admin-page .cn-admin-page .admin-login-card{font-family:Inter,system-ui,sans-serif}
@media(max-width:1250px){body.cn-admin-page .cn-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.cn-admin-page .cn-survey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.cn-admin-page .cn-traffic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.cn-admin-page .cn-top-pages{grid-column:1/-1}}
@media(max-width:1050px){body.cn-admin-page .cn-sidebar{width:230px;flex-basis:230px}body.cn-admin-page .cn-header{align-items:flex-start}body.cn-admin-page .cn-global-search{width:210px}body.cn-admin-page .cn-chart-grid{grid-template-columns:1fr}body.cn-admin-page .cn-review-card{align-items:flex-start}}
@media(max-width:760px){body.cn-admin-page .cn-dashboard{display:block;min-height:100dvh}body.cn-admin-page .cn-sidebar{position:fixed;inset:0 auto 0 0;width:min(290px,86vw);height:100dvh;min-height:0;transform:translateX(-104%);transition:transform .24s ease;box-shadow:18px 0 45px rgba(0,0,0,.35)}body.cn-admin-page .cn-sidebar.open{transform:translateX(0)}body.cn-admin-page .cn-close-sidebar{display:grid;place-items:center;margin-left:auto;width:30px;height:30px;flex:0 0 30px;border:1px solid rgba(112,161,218,.25);border-radius:8px;background:transparent;color:#aac5e6}body.cn-admin-page .cn-close-sidebar svg{width:16px;height:16px}body.cn-admin-page .cn-mobile-scrim.show{display:block;position:fixed;inset:0;background:rgba(1,7,19,.65);backdrop-filter:blur(2px);z-index:38}body.cn-admin-page .cn-workspace{height:100dvh;min-height:100dvh}body.cn-admin-page .cn-menu-btn{display:grid;flex:0 0 38px}body.cn-admin-page .cn-header{align-items:center;gap:10px;min-height:73px;padding:11px 13px}body.cn-admin-page .cn-header-left{gap:9px;flex:1;min-width:0}body.cn-admin-page .cn-header-left h1{font-size:15px;max-width:56vw}body.cn-admin-page .cn-header-left p{font-size:9px;max-width:56vw}body.cn-admin-page .cn-header-actions{gap:6px}body.cn-admin-page .cn-global-search{display:none}body.cn-admin-page #newIntakeBtn{width:38px;height:37px;padding:8px;gap:0;flex:0 0 38px}body.cn-admin-page #newIntakeBtn span{display:none}body.cn-admin-page .cn-icon-btn{width:34px;height:35px;flex-basis:34px}body.cn-admin-page .cn-main{padding:18px 13px 30px}body.cn-admin-page .cn-metrics-grid{gap:9px;margin-bottom:13px}body.cn-admin-page .cn-metric-card{min-height:128px;padding:13px;border-radius:12px}body.cn-admin-page .cn-metric-top{align-items:flex-start;font-size:10px;gap:5px}body.cn-admin-page .cn-metric-icon{width:31px;height:31px;flex-basis:31px;border-radius:8px}body.cn-admin-page .cn-metric-icon svg{width:16px;height:16px}body.cn-admin-page .cn-metric-value{font-size:25px;margin-top:12px}body.cn-admin-page .cn-metric-card small{font-size:9px;margin-top:7px}body.cn-admin-page .cn-chart-grid{gap:12px;margin-bottom:13px}body.cn-admin-page .cn-chart-card{padding:15px 13px 10px}body.cn-admin-page .cn-section-head{gap:8px}body.cn-admin-page .cn-section-head h2{font-size:12px}body.cn-admin-page .cn-section-head p{font-size:9.5px}body.cn-admin-page .cn-chart-tag{font-size:8px;padding:4px 6px;max-width:105px}body.cn-admin-page .cn-line-chart{height:185px}body.cn-admin-page .cn-traffic-card{padding:14px;margin-bottom:13px}body.cn-admin-page .cn-traffic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body.cn-admin-page .cn-traffic-stat{padding:11px}body.cn-admin-page .cn-traffic-stat>span{font-size:9px}body.cn-admin-page .cn-traffic-stat>strong{font-size:21px}body.cn-admin-page .cn-top-pages{padding:11px}body.cn-admin-page .cn-ga4-head{padding:15px 13px 13px;align-items:flex-start;flex-direction:column}body.cn-admin-page .cn-ga4-controls{justify-content:flex-start;width:100%}body.cn-admin-page .cn-ga4-controls .cn-select{min-width:0;flex:1}body.cn-admin-page .cn-ga4-wrap{padding:12px}body.cn-admin-page .cn-ga4-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body.cn-admin-page .cn-ga4-kpis article{padding:11px}body.cn-admin-page .cn-ga4-kpis article strong{font-size:20px}body.cn-admin-page .cn-ga4-columns,body.cn-admin-page .cn-realtime-grid{grid-template-columns:1fr;gap:9px}body.cn-admin-page .cn-realtime-summary{grid-template-columns:minmax(0,1fr) auto;padding:11px}body.cn-admin-page .cn-realtime-summary>div:first-child span:last-child{width:100%;margin-left:18px}body.cn-admin-page .cn-filter-bar{align-items:stretch;flex-direction:column;padding:11px;gap:11px}body.cn-admin-page .cn-filter-left{width:100%;flex-direction:column;align-items:stretch;gap:8px}body.cn-admin-page .cn-search-field{width:100%;flex:auto}body.cn-admin-page .cn-filter-left .cn-select{width:100%}body.cn-admin-page .cn-appointment-tools{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch;gap:7px}body.cn-admin-page .cn-appointment-tools .cn-btn{width:100%;min-width:0}body.cn-admin-page .cn-appointment-tools #addAppointmentBtn{grid-column:1/-1}body.cn-admin-page .cn-table{min-width:820px}body.cn-admin-page .cn-calendar-card{padding:11px}body.cn-admin-page .cn-calendar-grid{gap:3px}body.cn-admin-page .cn-calendar-day{min-height:70px;padding:4px;border-radius:5px}body.cn-admin-page .cn-calendar-day-number{font-size:9px}body.cn-admin-page .cn-calendar-event{padding:3px;font-size:7px}body.cn-admin-page .cn-panel-intro{align-items:flex-start;flex-direction:column;gap:12px}body.cn-admin-page .cn-panel-intro h2{font-size:15px}body.cn-admin-page .cn-panel-intro p{font-size:9.5px}body.cn-admin-page .cn-survey-toolbar{align-items:stretch;flex-direction:column}body.cn-admin-page .cn-survey-toolbar .cn-select{width:100%}body.cn-admin-page .cn-survey-grid{grid-template-columns:1fr;gap:11px}body.cn-admin-page .cn-survey-card{padding:14px}body.cn-admin-page .cn-review-metrics{grid-template-columns:1fr;gap:9px;margin-bottom:18px}body.cn-admin-page .cn-review-metric{min-height:87px;padding:13px 15px}body.cn-admin-page .cn-review-score{width:50px;height:50px;flex-basis:50px;font-size:19px}body.cn-admin-page .cn-review-card{align-items:stretch;flex-direction:column;gap:13px;padding:14px}body.cn-admin-page .cn-review-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}body.cn-admin-page .cn-publish-control{justify-content:flex-start;gap:7px}body.cn-admin-page .cn-publish-control>span{font-size:9.5px}body.cn-admin-page .cn-package-grid{grid-template-columns:1fr;gap:11px}body.cn-admin-page .cn-settings-card{padding:16px}body.cn-admin-page .cn-modal{align-items:flex-start;padding:12px}body.cn-admin-page .cn-modal-card{max-height:calc(100dvh - 24px);padding:18px 16px;border-radius:14px}body.cn-admin-page .cn-modal-head h2{font-size:16px}body.cn-admin-page .cn-form-two{grid-template-columns:1fr;gap:14px}body.cn-admin-page .cn-appointment-form{gap:13px}body.cn-admin-page .cn-appointment-form label{font-size:11px}body.cn-admin-page .cn-appointment-form input:not([type="file"]),body.cn-admin-page .cn-appointment-form select,body.cn-admin-page .cn-appointment-form textarea{min-height:43px;padding:11px 12px}body.cn-admin-page .cn-modal-actions{flex-wrap:wrap}body.cn-admin-page .cn-modal-actions .cn-btn{flex:1}}
@media(max-width:390px){body.cn-admin-page .cn-header-left h1{font-size:13px}body.cn-admin-page .cn-header-left p{display:none}body.cn-admin-page .cn-header-actions{gap:4px}body.cn-admin-page #refreshBtn{display:none}body.cn-admin-page .cn-metric-card{padding:11px}body.cn-admin-page .cn-metric-value{font-size:23px}body.cn-admin-page .cn-metric-top{font-size:9px}body.cn-admin-page .cn-review-title-row{gap:7px}}