/* =========================================================
   CHARM AFRIKA STUDIOS — SERVICES PAGE
   Full-page collection-style services layout
   ========================================================= */

:root{
    --charm-sidebar:88px;
    --charm-purple:#500064;
    --charm-ink:#111a36;
    --charm-muted:#687188;
    --charm-bg:#dfe2e9;
    --charm-card:#ffffff;
}

html,body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
}

body{
    padding-left:var(--charm-sidebar);
    background:var(--charm-bg);
    color:var(--charm-ink);
}
/* GLOBAL BOX MODEL — prevents the fixed 88px sidebar from pushing the page off-screen */
*,
*::before,
*::after{
    box-sizing:border-box !important;
}

body{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding-left:var(--charm-sidebar) !important;
    overflow-x:hidden !important;
}

#main_root,
.charm-services-page{
    width:100% !important;
    max-width:100% !important;
  
}


.services-panel{
    width:100% !important;
    max-width:1620px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

@media(max-width:900px){
    body{
        width:100% !important;
        max-width:100% !important;
        padding-left:0 !important;
    }

    .charm-services-page{
        width:100% !important;
       
    }
}


/* =========================================================
   SIDEBAR — MATCHES THE MAIN CHARM STUDIOS CODE
   ========================================================= */

.charm-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--charm-sidebar);
    height:100vh;
    z-index:9998;
    background:#fff;
    border-right:1px solid rgba(0,0,0,.07);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:16px 10px;
}

.charm-sidebar .brand-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:18px;
}

.charm-sidebar .brand{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.charm-sidebar .brand-logo{
    width:40px;
    height:40px;
    border-radius:14px;
    overflow:hidden;
    background:#111;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    justify-content:center;
}

.charm-sidebar .brand-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.charm-sidebar .rail-stack{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.charm-sidebar .rail-item{
    position:relative;
    width:58px;
    height:58px;
    border:none;
    border-radius:18px;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111;
    margin:0 auto;
    transition:.16s ease;
    text-decoration:none;
    padding:0;
    cursor:pointer;
}

.charm-sidebar .rail-item:hover{
    background:#f4f4f3;
    transform:translateY(-1px);
}

.charm-sidebar .rail-item.active{
    background:#500064;
    width:50px;
    height:50px;
    border-radius:40px;
    color:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.14);
}

.charm-sidebar .rail-icon{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
}

.charm-sidebar .rail-icon svg{
    width:24px;
    height:24px;
    display:block;
}

.charm-sidebar .rail-label{
    position:absolute;
    left:74px;
    top:50%;
    transform:translateY(-50%) translateX(-8px);
    padding:10px 14px;
    border-radius:14px;
    background:#111;
    color:#fff;
    font-size:13px;
    font-weight:750;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:.18s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.16);
}

.charm-sidebar .rail-label:before{
    content:"";
    position:absolute;
    left:-5px;
    top:50%;
    width:10px;
    height:10px;
    background:#111;
    transform:translateY(-50%) rotate(45deg);
    border-radius:2px;
}

.charm-sidebar .rail-item:hover .rail-label{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

.charm-sidebar .rail-bottom{
    margin-top:auto;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.charm-sidebar .profile-pill{
    width:48px;
    height:48px;
    border:1px solid rgba(0,0,0,.06);
    border-radius:50%;
    background:#f5f5f4;
    display:grid;
    place-items:center;
    overflow:hidden;
    text-decoration:none;
}

.charm-sidebar .profile-fallback{
    font-size:12px;
    font-weight:850;
    color:#111;
}

@media(max-width:900px){
    body{padding-left:0}
    .charm-sidebar{display:none}
}

/* =========================================================
   PAGE BACKDROP
   ========================================================= */

.charm-services-page{
    min-height:100vh;
    position:relative;
  
    isolation:isolate;
}

.charm-services-page::before,
.charm-services-page::after{
    content:"";
    position:fixed;
    
    pointer-events:none;
    z-index:-1;
    background:rgba(255,255,255,.35);
}

.charm-services-page::before{
    width:230px;
    height:230px;
    right:9%;
    top:20px;
}

.charm-services-page::after{
    width:250px;
    height:250px;
    left:9%;
    bottom:-90px;
}

/* =========================================================
   MAIN PANEL
   ========================================================= */

.services-panel{
    width:min(1620px,100%);
    margin:0 auto;
    padding:28px 16px 52px;
   
    background:rgba(237, 237, 238, 0.9);
    border:1px solid rgba(255,255,255,.70);
    box-shadow:
        0 28px 55px rgba(68,76,97,.12),
        0 8px 18px rgba(70,79,98,.06);
    backdrop-filter:blur(10px);
}

.services-heading-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:25px;
}

.services-heading-copy{
    max-width:800px;
}

.services-eyebrow{
    margin-bottom:13px;
    font-size:10px;
    line-height:1;
    font-weight:700;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:#727b90;
}

.services-heading h1{
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    color:var(--charm-ink);
    font-size:clamp(38px,4vw,38px);
    line-height:.98;
    letter-spacing:-1.3px;
}

.services-heading h1 em{
    font-style:italic;
    font-weight:400;
}

.services-heading p{
    max-width:720px;
    margin:16px 0 0;
    color:#626d83;
    font-size:14px;
    line-height:1.75;
}

.services-location{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    color:#646e84;
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:700;
    padding-bottom:5px;
}

.services-location-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--charm-purple);
}

/* =========================================================
   FILTERS
   ========================================================= */

.service-filters{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-bottom:34px;
    padding-top:4px;
}

.service-filter{
    border:0;
    background:#fff;
    color:#1c2643;
    font:600 12px/1 "Poppins",sans-serif;
    padding:10px 12px;
    min-height:33px;
    border-radius:6px;
    cursor:pointer;
    box-shadow:0 1px 0 rgba(22,31,55,.03);
    transition:transform .18s ease,background .18s ease,color .18s ease;
}

.service-filter:hover{
    transform:translateY(-1px);
}

.service-filter.active{
    background:#500064;
    color:#fff;
}

/* =========================================================
   SERVICE GRID
   ========================================================= */

.services-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:06px;
}

.service-card{
    min-width:0;
    background:#fff;
    border-radius:20px;
    padding:17px 17px 18px;
    box-shadow:
        0 2px 0 rgba(15,23,42,.02),
        0 11px 25px rgba(50,59,80,.05);
    transition:transform .26s ease,box-shadow .26s ease;
}

.service-card:hover{
    transform:translateY(-4px);
    box-shadow:
        0 2px 0 rgba(15,23,42,.02),
        0 16px 32px rgba(50,59,80,.10);
}

.service-main-image{
    position:relative;
    width:100%;
    aspect-ratio:1.58/1;
    overflow:hidden;
    border-radius:15px;
    background:#e6e8ed;
}

.service-main-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.65,.3,1);
}

.service-card:hover .service-main-image img{
    transform:scale(1.035);
}

.service-badge{
    position:absolute;
    left:12px;
    top:12px;
    z-index:2;
    padding:7px 9px;
    border-radius:6px;
    background:rgba(255,255,255,.92);
    color:#17203b;
    font-size:9px;
    line-height:1;
    letter-spacing:.11em;
    font-weight:700;
    text-transform:uppercase;
    backdrop-filter:blur(7px);
}

/* Small image strip on every service */
.service-thumbs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    margin-top:11px;
}

.service-thumb{
    position:relative;
    overflow:hidden;
    aspect-ratio:1/1;
    border-radius:11px;
    background:#e8eaf0;
}

.service-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .45s ease;
}

.service-card:hover .service-thumb img{
    transform:scale(1.04);
}

.service-info{
    padding:16px 2px 1px;
}

.service-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.service-type{
    color:#7a8397;
    font-size:9px;
    line-height:1;
    letter-spacing:.12em;
    font-weight:700;
    text-transform:uppercase;
}

.service-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#500064;
    text-decoration:none;
    font-size:9px;
    line-height:1;
    letter-spacing:.10em;
    font-weight:700;
    text-transform:uppercase;
}

.service-link svg{
    width:13px;
    height:13px;
}

.service-card h2{
    margin:0;
    color:#111a36;
    font:600 20px/1.08 "Instrument Sans",Arial,sans-serif;
    letter-spacing:-.4px;
}

.service-card p{
    margin:8px 0 0;
    color:#687188;
    font-size:11.5px;
    line-height:1.55;
}

/* =========================================================
   BOTTOM CTA
   ========================================================= */

.services-bottom{
    margin-top:32px;
    padding-top:25px;
    border-top:1px solid rgba(20,30,55,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.services-bottom-copy{
    color:#667087;
    font-size:12px;
    line-height:1.6;
}

.services-bottom-copy strong{
    color:#111a36;
}

.services-cta{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:44px;
    padding:0 17px;
    border-radius:7px;
    background:#111a36;
    color:#fff;
    text-decoration:none;
    font-size:10px;
    letter-spacing:.11em;
    font-weight:700;
    text-transform:uppercase;
    transition:.18s ease;
}

.services-cta:hover{
    background:#500064;
    color:#fff;
}

.services-cta svg{
    width:14px;
    height:14px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){
 



    .services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }
}

/* =========================================================
   MOBILE — FULL RESPONSIVE DESIGN
   ========================================================= */

@media(max-width:760px){
 .services-panel{
    width:min(1620px,100%);
    margin:0 auto;
    padding:10px 10px 52px;
   
}


    .services-heading-row{
        display:block;
        margin-bottom:20px;
    }

    .services-heading h1{
        display: none;
        font-size:23px;
        line-height:.98;
        letter-spacing:-.9px;
    }

    .services-heading p{
        font-size:12.5px;
        line-height:1.65;
        margin-top:13px;
    }

    .services-location{
        margin-top:16px;
        padding-bottom:0;
        font-size:9px;
    }

    .service-filters{
        width:100% !important;
        max-width:100% !important;
        flex-wrap:nowrap;
        overflow-x:auto;
        scrollbar-width:none;
        margin-right:-14px;
        padding-right:14px;
        padding-bottom:4px;
        margin-bottom:22px;
    }

    .service-filters::-webkit-scrollbar{
        display:none;
    }

    .service-filter{
        flex:0 0 auto;
    }

    .services-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .service-card{
        border-radius:16px;
        padding:13px 13px 15px;
    }

    .service-main-image{
        aspect-ratio:1.55/1;
        border-radius:12px;
    }

    .service-badge{
        left:10px;
        top:10px;
        font-size:8px;
        padding:7px 8px;
    }

    .service-thumbs{
        gap:7px;
        margin-top:8px;
    }

    .service-thumb{
        border-radius:9px;
    }

    .service-info{
        padding-top:13px;
    }

    .service-card h2{
        font-size:19px;
    }

    .service-card p{
        font-size:11px;
        line-height:1.5;
        margin-top:7px;
    }

    .services-bottom{
        flex-direction:column;
        align-items:stretch;
        gap:15px;
        margin-top:22px;
        padding-top:19px;
    }

    .services-cta{
        width:100%;
    }
}

@media(max-width:430px){
    .services-heading h1{
        font-size:33px;
    }

    .service-card h2{
        font-size:18px;
    }

    .service-card p{
        font-size:10.5px;
    }
}

@media(max-width:360px){


    .service-filter{
        padding-left:10px;
        padding-right:10px;
        font-size:11px;
    }
}

/* =========================================================
   VIDEO / PODCAST PREVIEW
   ========================================================= */
/* =========================================================
   CLEAN VIDEO SERVICE CARD
   ========================================================= */

.video-service-card .service-main-media {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1.58 / 1 !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    background: #000 !important;
}

/* ---------------------------------------------------------
   INITIAL IMAGE
--------------------------------------------------------- */

.video-service-card .service-video-poster {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition:
        opacity .65s ease,
        visibility .65s ease !important;
}

.video-service-card .service-video-poster img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}


/* ---------------------------------------------------------
   YOUTUBE PLAYER
--------------------------------------------------------- */

.video-service-card .service-video-player {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    background: #000 !important;
    transition:
        opacity .65s ease,
        visibility .65s ease !important;
}

.video-service-card .service-video-player iframe {
    position: absolute !important;

    /*
       Slightly enlarge the iframe so the
       YouTube top/bottom chrome is cropped.
    */
    top: -7% !important;
    left: -7% !important;

    width: 114% !important;
    height: 114% !important;

    border: 0 !important;
    pointer-events: none !important;
}


/* ---------------------------------------------------------
   CLEAN HOVER IMAGE
--------------------------------------------------------- */

.video-service-card .service-hover-poster {
    position: absolute !important;
    inset: 0 !important;
    z-index: 8 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transition:
        opacity .45s ease,
        visibility .45s ease !important;

    pointer-events: none !important;
}

.video-service-card .service-hover-poster img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}


/* ---------------------------------------------------------
   VIDEO PLAYING
--------------------------------------------------------- */

.video-service-card.is-playing .service-video-poster {
    opacity: 0 !important;
    visibility: hidden !important;
}

.video-service-card.is-playing .service-video-player {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ---------------------------------------------------------
   HOVER STATE
--------------------------------------------------------- */

.video-service-card.is-hovered .service-hover-poster {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ---------------------------------------------------------
   MOBILE
   Don't force hover behaviour on touch devices.
--------------------------------------------------------- */

@media (hover: none) {

    .video-service-card .service-hover-poster {
        display: none !important;
    }

}




.mobile-nav{
  display:none;
}

@media (max-width: 820px){
  .rail{
    display:none;
  }

  .main{
    padding-bottom: 96px;
  }

  .mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9997 !important;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    align-items:center;
    gap:6px;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    border-radius:22px 22px 0 0;
    background:rgba(17, 17, 23, 0.92);
    border-top:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 -10px 30px rgba(0,0,0,.28);
  }

  .mobile-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:52px;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.68);
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    cursor:pointer;
    border-radius:16px;
    transition:transform .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
  }

  .mobile-nav-item:hover{
    transform:translateY(-1px);
  }

  .mobile-nav-icon{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    transition:transform .2s ease, color .2s ease;
  }

  .mobile-nav-icon svg{
    width:22px;
    height:22px;
    display:block;
  }

  .mobile-nav-label{
    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.01em;
  }

  .mobile-nav-item.active{
    color:#fff;
  }

  .mobile-nav-item.active .mobile-nav-icon{
    transform:translateY(-1px);
  }

  .mobile-nav-item.active{
    background:rgba(255,255,255,.08);
  }

.mobile-nav-avatar{
    width:26px;
    height:26px;
    border-radius:50%;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--surface-2);
    flex-shrink:0;
}

.mobile-nav-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
  .mobile-top-btn{
    position:fixed;
    right:14px;
    bottom:84px;
    z-index:9998;
    width:50px;
    height:50px;
    border:0;
    border-radius:16px;
    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
    color:#fff;
    display:grid;
    place-items:center;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 10px 24px rgba(0,0,0,.24);
    transition:transform .22s ease, opacity .22s ease;
  }

  .mobile-top-btn-icon{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
  }

  .mobile-top-btn-icon svg{
    width:22px;
    height:22px;
  }
}



/* =========================================================
   CHARM SERVICE DETAIL MODAL
   Desktop: centered glass panel
   Mobile: full-height bottom sheet / immersive detail view
   ========================================================= */

html:has(body.charm-modal-open),
body.charm-modal-open{
    overflow:hidden !important;
    overscroll-behavior:none !important;
}

body.charm-modal-open{
    touch-action:none;
}

.charm-service-modal.is-open{
    touch-action:auto;
}

.service-card{
    cursor:pointer;
}
.service-card .service-link{
    cursor:pointer;
}
.charm-service-modal{
    position:fixed;
    inset:0;
    z-index:10050;
    display:grid;
    place-items:center;
    padding:28px;
    background:rgba(10,12,20,.56);
    backdrop-filter:blur(18px) saturate(120%);
    -webkit-backdrop-filter:blur(18px) saturate(120%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease, visibility .28s ease;
}

.charm-service-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.charm-modal-dialog{
    width:min(1180px,100%);
    max-height:min(900px,calc(100vh - 56px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#f7f7f8;
    border:1px solid rgba(255,255,255,.74);
    border-radius:30px;
    box-shadow:
        0 35px 100px rgba(0,0,0,.30),
        0 12px 36px rgba(25,24,40,.18);
    transform:translateY(18px) scale(.985);
    transition:transform .34s cubic-bezier(.2,.8,.2,1);
}

.charm-service-modal.is-open .charm-modal-dialog{
    transform:translateY(0) scale(1);
}

.charm-modal-top{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
    min-height:410px;
    background:#fff;
}

.charm-modal-visual{
    position:relative;
    min-height:410px;
    background:#101017;
    overflow:hidden;
}

.charm-modal-visual::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:34%;
    background:linear-gradient(to top,rgba(6,7,13,.46),transparent);
    pointer-events:none;
}

.charm-modal-hero{
    width:100%;
    height:100%;
    min-height:410px;
    display:block;
    object-fit:cover;
    transition:opacity .22s ease,transform .55s ease;
}

.charm-modal-hero.is-switching{
    opacity:.45;
    transform:scale(1.015);
}

.charm-modal-badge{
    position:absolute;
    left:22px;
    top:22px;
    z-index:3;
    padding:8px 10px;
    border-radius:9px;
    background:rgba(255,255,255,.92);
    color:#161b30;
    font:700 9px/1 "Poppins",sans-serif;
    letter-spacing:.13em;
    text-transform:uppercase;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
}

.charm-modal-count{
    position:absolute;
    left:22px;
    bottom:20px;
    z-index:3;
    color:#fff;
    font:600 11px/1 "Poppins",sans-serif;
    letter-spacing:.06em;
    text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.charm-modal-close{
    position:absolute;
    top:16px;
    right:16px;
    z-index:20;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.34);
    border-radius:50%;
    background:rgba(12,13,20,.34);
    color:#fff;
    cursor:pointer;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:transform .18s ease,background .18s ease;
}

.charm-modal-close:hover{
    transform:rotate(5deg) scale(1.04);
    background:rgba(12,13,20,.58);
}

.charm-modal-close svg{
    width:21px;
    height:21px;
}

.charm-modal-summary{
    padding:48px 42px 34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.charm-modal-kicker{
    margin:0 0 11px;
    color:#70778a;
    font:700 9px/1 "Poppins",sans-serif;
    letter-spacing:.19em;
    text-transform:uppercase;
}

.charm-modal-title{
    margin:0;
    color:#11162b;
    font:600 clamp(30px,3.2vw,46px)/.98 "Instrument Sans",Arial,sans-serif;
    letter-spacing:-1.7px;
}

.charm-modal-description{
    margin:18px 0 0;
    max-width:520px;
    color:#687188;
    font:400 13px/1.75 "DM Sans",Arial,sans-serif;
}

.charm-modal-stat-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    margin-top:25px;
}

.charm-modal-stat{
    padding:12px 12px 11px;
    border:1px solid rgba(17,22,43,.06);
    border-radius:14px;
    background:#f3f3f5;
}

.charm-modal-stat-label{
    display:block;
    color:#8b92a3;
    font:700 8px/1.1 "Poppins",sans-serif;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.charm-modal-stat-value{
    display:block;
    margin-top:6px;
    color:#171c32;
    font:600 12px/1.25 "DM Sans",Arial,sans-serif;
}

.charm-modal-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}

.charm-modal-btn{
    min-height:43px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 16px;
    border-radius:10px;
    border:1px solid transparent;
    text-decoration:none;
    font:700 10px/1 "Poppins",sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
}

.charm-modal-btn:hover{
    transform:translateY(-1px);
}

.charm-modal-btn-primary{
    background:#500064;
    color:#fff;
    box-shadow:0 11px 24px rgba(80,0,100,.18);
}

.charm-modal-btn-primary:hover{
    background:#3f004f;
    color:#fff;
}

.charm-modal-btn-secondary{
    background:#fff;
    color:#171c32;
    border-color:rgba(17,22,43,.08);
}

.charm-modal-btn-secondary:hover{
    background:#f2f2f5;
}

.charm-modal-btn svg{
    width:14px;
    height:14px;
}

.charm-modal-body{
    min-height:0;
    overflow:auto;
    background:#f7f7f8;
}

.charm-modal-tabs{
    position:sticky;
    top:0;
    z-index:9;
    display:flex;
    gap:4px;
    overflow-x:auto;
    padding:12px 26px;
    border-top:1px solid rgba(17,22,43,.06);
    border-bottom:1px solid rgba(17,22,43,.07);
    background:rgba(247,247,248,.90);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    scrollbar-width:none;
}

.charm-modal-tabs::-webkit-scrollbar{
    display:none;
}

.charm-modal-tab{
    flex:0 0 auto;
    min-height:36px;
    padding:0 13px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#7a8193;
    font:700 10px/1 "Poppins",sans-serif;
    cursor:pointer;
    transition:.18s ease;
}

.charm-modal-tab:hover{
    color:#242a40;
    background:#ededf1;
}

.charm-modal-tab.is-active{
    color:#fff;
    background:#11162c;
}

.charm-modal-panel{
    display:none;
    padding:28px 30px 34px;
}

.charm-modal-panel.is-active{
    display:block;
    animation:charmPanelIn .22s ease;
}

@keyframes charmPanelIn{
    from{opacity:0;transform:translateY(4px)}
    to{opacity:1;transform:translateY(0)}
}

.charm-panel-heading{
    margin:0 0 7px;
    color:#11162b;
    font:600 18px/1.15 "Instrument Sans",Arial,sans-serif;
    letter-spacing:-.45px;
}

.charm-panel-subheading{
    margin:0 0 20px;
    color:#737b8f;
    font:400 11.5px/1.65 "DM Sans",Arial,sans-serif;
}

.charm-gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.charm-gallery-item{
    position:relative;
    overflow:hidden;
    aspect-ratio:1/1;
    border-radius:15px;
    background:#e7e7eb;
    cursor:pointer;
}

.charm-gallery-item:first-child{
    grid-column:span 2;
    grid-row:span 2;
    aspect-ratio:auto;
    min-height:280px;
}

.charm-gallery-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .42s ease,filter .25s ease;
}

.charm-gallery-item:hover img{
    transform:scale(1.045);
    filter:saturate(1.04);
}

.charm-gallery-overlay{
    position:absolute;
    inset:auto 9px 9px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    border-radius:9px;
    color:#fff;
    background:rgba(10,11,18,.44);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
    opacity:0;
    transform:translateY(4px);
    transition:.2s ease;
}

.charm-gallery-item:hover .charm-gallery-overlay{
    opacity:1;
    transform:translateY(0);
}

 .charm-overview-copy{
    margin-top:16px;
    padding:16px 18px;
    border-radius:15px;
    background:#fff;
    border:1px solid rgba(17,22,43,.07);
    color:#666f83;
    font:400 11.5px/1.7 "DM Sans",Arial,sans-serif;
}

.charm-overview-highlights{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:12px;
}

.charm-overview-highlight{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:14px;
    border:1px solid rgba(17,22,43,.07);
    border-radius:15px;
    background:#fff;
}

.charm-overview-highlight-icon{
    width:26px;
    height:26px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#11162b;
    color:#fff;
    font:700 8px/1 "Poppins",sans-serif;
}

.charm-overview-highlight strong{
    display:block;
    color:#1a1f33;
    font:700 11px/1.2 "DM Sans",Arial,sans-serif;
}

.charm-overview-highlight span:not(.charm-overview-highlight-icon){
    display:block;
    margin-top:4px;
    color:#7a8192;
    font:400 9.5px/1.5 "DM Sans",Arial,sans-serif;
}

.charm-overview-work{
    margin-top:21px;
}

.charm-overview-work-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.charm-overview-work-head h4{
    margin:0;
    color:#171c32;
    font:700 13px/1.2 "DM Sans",Arial,sans-serif;
}

.charm-overview-work-head span{
    display:block;
    margin-top:3px;
    color:#8a91a2;
    font:400 9px/1.2 "DM Sans",Arial,sans-serif;
}

.charm-overview-work-head button{
    border:0;
    background:transparent;
    color:#500064;
    font:700 9px/1 "Poppins",sans-serif;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
}

.charm-overview-gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.charm-overview-gallery-item{
    position:relative;
    overflow:hidden;
    padding:0;
    min-height:150px;
    border:0;
    border-radius:14px;
    background:#e7e7eb;
    cursor:pointer;
}

.charm-overview-gallery-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .35s ease;
}

.charm-overview-gallery-item:hover img{
    transform:scale(1.04);
}

.charm-overview-gallery-item span{
    position:absolute;
    right:8px;
    bottom:8px;
    min-width:22px;
    height:22px;
    padding:0 6px;
    display:grid;
    place-items:center;
    border-radius:7px;
    background:rgba(9,10,16,.48);
    color:#fff;
    font:700 8px/1 "Poppins",sans-serif;
    backdrop-filter:blur(8px);
}

.charm-package-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:11px;
}

.charm-package{
    padding:18px;
    border:1px solid rgba(17,22,43,.07);
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 20px rgba(38,42,58,.04);
}

.charm-package.is-featured{
    border-color:rgba(80,0,100,.18);
    box-shadow:0 12px 28px rgba(80,0,100,.08);
}

.charm-package-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.charm-package-name{
    color:#161b30;
    font:700 12px/1.2 "DM Sans",Arial,sans-serif;
}

.charm-package-tag{
    padding:5px 7px;
    border-radius:7px;
    background:#f0e8f2;
    color:#500064;
    font:700 7px/1 "Poppins",sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.charm-package-price{
    margin-top:16px;
    color:#11162b;
    font:600 20px/1 "Instrument Sans",Arial,sans-serif;
    letter-spacing:-.5px;
}

.charm-package-note{
    margin-top:6px;
    color:#8a91a2;
    font:400 9.5px/1.4 "DM Sans",Arial,sans-serif;
}

.charm-package-list{
    display:grid;
    gap:8px;
    margin:18px 0 0;
    padding:0;
    list-style:none;
}

.charm-package-list li{
    display:flex;
    gap:8px;
    align-items:flex-start;
    color:#666f83;
    font:400 10.5px/1.45 "DM Sans",Arial,sans-serif;
}

.charm-package-list svg{
    width:13px;
    height:13px;
    margin-top:1px;
    flex:0 0 auto;
    color:#500064;
}

.charm-process-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
}

.charm-process-step{
    position:relative;
    padding:18px;
    min-height:145px;
    border-radius:16px;
    background:#fff;
    border:1px solid rgba(17,22,43,.07);
}

.charm-process-number{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#11162b;
    color:#fff;
    font:700 9px/1 "Poppins",sans-serif;
}

.charm-process-step h4{
    margin:15px 0 7px;
    color:#1a1f33;
    font:700 12px/1.2 "DM Sans",Arial,sans-serif;
}

.charm-process-step p{
    margin:0;
    color:#7a8192;
    font:400 10px/1.55 "DM Sans",Arial,sans-serif;
}

.charm-empty-note{
    padding:22px;
    border:1px dashed rgba(17,22,43,.12);
    border-radius:14px;
    color:#727a8c;
    background:#fff;
    font:400 11px/1.6 "DM Sans",Arial,sans-serif;
}

.charm-modal-media-lightbox{
    position:fixed;
    inset:0;
    z-index:10150;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(6,7,12,.84);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.2s ease;
}

.charm-modal-media-lightbox.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.charm-modal-media-lightbox img{
    max-width:min(1400px,94vw);
    max-height:90vh;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:14px;
    box-shadow:0 30px 70px rgba(0,0,0,.35);
}

.charm-lightbox-close{
    position:absolute;
    top:20px;
    right:20px;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    background:rgba(0,0,0,.28);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    backdrop-filter:blur(10px);
}

.charm-lightbox-close svg{
    width:20px;
    height:20px;
}

@media(max-width:900px){
    /* Mobile becomes a true full-screen app-style experience */
    .charm-service-modal{
        place-items:stretch;
        padding:0;
        background:#eef0f4;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .charm-modal-dialog{
        width:100vw;
        height:100dvh;
        max-height:none;
        min-height:100dvh;
        border:0;
        border-radius:0;
        box-shadow:none;
        background:#f7f8fa;
        /* Keep the dialog untransformed on mobile so the fixed booking bar
           stays fixed to the phone viewport instead of scrolling with it. */
        transform:none !important;
        overflow-y:auto;
        overflow-x:hidden;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .charm-modal-dialog::-webkit-scrollbar{
        display:none;
    }

    .charm-service-modal.is-open .charm-modal-dialog{
        transform:none !important;
    }

    .charm-modal-top{
        position:relative;
        display:block;
        min-height:0;
        height:88dvh;
        max-height:620px;
        background:#101017;
        overflow:hidden;
    }

    .charm-modal-visual{
        position:absolute;
        inset:0;
        min-height:0;
        height:100%;
        background:#101017;
    }

    .charm-modal-visual::after{
        height:55%;
        background:linear-gradient(to top,rgba(6,7,13,.82) 0%,rgba(6,7,13,.32) 52%,transparent 100%);
    }

    .charm-modal-hero{
        width:100%;
        height:100%;
        min-height:0;
        object-fit:cover;
    }

    .charm-modal-badge{
        left:18px;
        top:18px;
        padding:8px 10px;
        border-radius:10px;
        font-size:8px;
        background:rgba(255,255,255,.88);
    }

    .charm-modal-close{
        width:42px;
        height:42px;
        top:14px;
        right:14px;
        border-color:rgba(255,255,255,.28);
        background:rgba(0,0,0,.24);
    }

    .charm-modal-summary{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        z-index:6;
        padding:24px 18px 22px;
        display:block;
        min-width:0;
        color:#fff;
    }

    .charm-modal-kicker{
        margin:0 0 8px;
        color:rgba(255,255,255,.72);
        font-size:8px;
        letter-spacing:.18em;
    }

    .charm-modal-title{
        color:#fff;
        font-size:29px;
        line-height:1;
        letter-spacing:-1.15px;
        text-shadow:0 2px 18px rgba(0,0,0,.22);
    }

    .charm-modal-description{
        margin:9px 0 13px !important;
        max-width:100%;
        color:rgba(255,255,255,.84);
        font-size:11.5px;
        line-height:1.55;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .charm-modal-stat-row{
        display:flex;
        gap:8px;
        margin-top:14px;
    }

    .charm-modal-stat{
        flex:0 0 auto;
        padding:7px 9px;
        border:1px solid rgba(255,255,255,.15);
        border-radius:9px;
        background:rgba(255, 5, 5, 0.11);
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }

    .charm-modal-stat-label{
        color:rgba(255,255,255,.56);
        font-size:7px;
    }

    .charm-modal-stat-value{
        margin-top:4px;
        color:#fff;
        font-size:9px;
    }

    .charm-modal-actions{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        margin:0;
        padding:12px 15px calc(12px + env(safe-area-inset-bottom));
        background:rgba(247,248,250,.97);
        border-top:1px solid rgba(17,22,43,.07);
        box-shadow:0 -10px 28px rgba(25,29,43,.09);
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:9px;
        z-index:10080;
        position:fixed !important;
    }

    .charm-modal-actions::before{
        content:'Custom quote';
        margin-right:auto;
        color:#151a2f;
        font:600 15px/1 "Instrument Sans",Arial,sans-serif;
        letter-spacing:-.3px;
    }

    .charm-modal-btn{
        min-height:42px;
        padding:0 15px;
        border-radius:10px;
        font-size:9px;
        letter-spacing:.06em;
    }

    .charm-modal-btn-secondary{
        display:none;
    }

    .charm-modal-body{
        position:relative;
        height:auto;
        max-height:none;
        min-height:0;
        padding-bottom:92px;
        overflow:visible;
        background:#f7f8fa;
    }

    .charm-modal-tabs{
        position:sticky;
        top:0;
        z-index:24;
        padding:0 15px;
        min-height:54px;
        gap:4px;
        background:rgba(247,248,250,.97);
        border-top:0;
        border-bottom:1px solid rgba(17,22,43,.07);
        box-shadow:0 7px 18px rgba(25,29,43,.05);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
    }

    .charm-modal-tab{
        position:relative;
        min-height:54px;
        padding:0 11px;
        border-radius:0;
        color:#9aa0af;
        font-size:9px;
    }

    .charm-modal-tab.is-active{
        color:#171c32;
        background:transparent;
    }

    .charm-modal-tab.is-active::after{
        content:'';
        position:absolute;
        left:50%;
        bottom:0;
        width:28px;
        height:2px;
        border-radius:999px;
        background:#500064;
        transform:translateX(-50%);
    }

    .charm-modal-panel{
        padding:19px 15px 100px;
    }

    .charm-panel-heading{
        font-size:18px;
    }

    .charm-panel-subheading{
        margin-bottom:16px;
        font-size:11px;
    }

    .charm-gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .charm-gallery-item:first-child{
        grid-column:span 2;
        min-height:190px;
    }

    /* Keep availability + pricing as compact info chips on the image. */
    .charm-modal-summary .charm-modal-stat-row{
        position:absolute;
        top:-150px;
        right:14px;
        z-index:14;
        margin:0;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:7px;
        width:126px;
        pointer-events:none;
    }

    .charm-modal-summary .charm-modal-stat{
        width:100%;
        padding:8px 10px;
        border-radius:11px;
        border-color:rgba(255,255,255,.16);
        background:rgba(10,11,18,.30);
        box-shadow:0 7px 20px rgba(0,0,0,.10);
    }

    .charm-modal-summary .charm-modal-stat:first-child{
        display:none;
    }

    .charm-modal-summary .charm-modal-stat-label{
        color:rgba(255,255,255,.56);
        font-size:7px;
    }

    .charm-modal-summary .charm-modal-stat-value{
        margin-top:4px;
        color:#fff;
        font-size:9.5px;
    }

    .charm-overview-copy{
        margin-top:14px;
        padding:15px;
        font-size:11px;
        line-height:1.7;
    }

    .charm-overview-highlights{
        grid-template-columns:1fr;
        gap:8px;
        margin-top:9px;
    }

    .charm-overview-highlight{
        padding:12px;
        border-radius:13px;
    }

    .charm-overview-highlight span:not(.charm-overview-highlight-icon){
        font-size:9.2px;
    }

    .charm-overview-work{
        margin-top:17px;
    }

    .charm-overview-gallery{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:6px;
    }

    .charm-overview-gallery-item{
        min-height:110px;
        border-radius:11px;
    }

    .charm-package-grid,
    .charm-process-grid{
        grid-template-columns:1fr;
    }

    .charm-package{
        padding:15px;
        border-radius:14px;
    }

    .charm-process-grid{
        gap:8px;
    }

    .charm-process-step{
        min-height:auto;
    }
}

@media(max-width:480px){
    .charm-modal-dialog{
        height:100dvh;
        min-height:100dvh;
    }

    .charm-modal-top{
        height:87dvh;
        max-height:650px;
    }

    .charm-modal-summary{
        padding:20px 15px 20px;
    }

    .charm-modal-title{
        font-size:28px;
    }

    .charm-modal-description{
        font-size:11px;
        -webkit-line-clamp:2;
    }

    .charm-modal-stat-row{
        margin-top:12px;
    }

    .charm-modal-stat:nth-child(3){
        display:none;
    }

    .charm-modal-stat{
        padding:7px 9px;
    }

    .charm-modal-actions{
        padding-left:13px;
        padding-right:13px;
    }

    .charm-modal-actions::before{
        font-size:14px;
    }

    .charm-modal-body{
        height:auto;
        overflow:visible;
        padding-bottom:92px;
    }

    .charm-modal-tabs{
        min-height:52px;
        padding:0 12px;
    }

    .charm-modal-tab{
        min-height:52px;
        padding:0 9px;
        font-size:8.5px;
    }

    .charm-modal-panel{
        padding:18px 14px 26px;
    }
}

@media(min-width:901px){
    .charm-modal-body::-webkit-scrollbar{
        width:8px;
    }

    .charm-modal-body::-webkit-scrollbar-thumb{
        border-radius:10px;
        background:#d7d8de;
    }
}