/* ---- base reset -----------------------------------------------------------
   Pages using the revamp shell do not load bootstrap, so the browser's default
   body margin (8px) would leave a white strip down both sides of the hero. */
html,body{margin:0;padding:0}
body{overflow-x:hidden}

@media (prefers-color-scheme:dark){
  
}

.jc, .jc *{box-sizing:border-box}






/* ============ JAINCO CANVAS (fixed, not theme-aware) ============ */
.jc{--primary:#d8212a;--ink:#141414;--light:#f9f9f9;--r:.5rem;
  background:#fff;color:var(--ink);font-family:Montserrat,Montserrat,sans-serif;font-size:16px;line-height:1.5}



.jc *{box-sizing:border-box}



.jc img,.jc svg{display:block;max-width:100%}



.jc p{margin:0 0 1rem;line-height:1.6}



.jc p:last-child{margin-bottom:0}



.jc h1,.jc h2,.jc h3,.jc h4,.jc h5,.jc h6{margin:0;font-weight:400;line-height:1.25;text-wrap:balance}



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



.jc ul{margin:0;padding:0;list-style:none}



.jc .txt-p{color:var(--primary)}



.jc .h1{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:200}



.jc .h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:200}



.jc .h3{font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:200}



.jc .h4{font-size:1.2rem}


.jc .h5{font-size:1rem}



.jc .wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}



.jc .pad{padding:clamp(2.5rem,5vw,4.5rem) 0}



.jc .tex{background:var(--light)}




/* grid shim */
.jc .row{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}



.jc .c4{grid-column:span 4}


.jc .c6{grid-column:span 6}


.jc .c12{grid-column:span 12}
@media(max-width:1080px){.jc .c4{grid-column:span 6}}
@media(max-width:640px){.jc .c4,.jc .c6{grid-column:span 12}}




/* heading */
.jc .headBlk{margin-bottom:2.5rem}



.jc .eyebrow{display:block;margin-bottom:.75rem;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--primary)}



.jc .lede{max-width:78ch;margin-top:1.25rem;color:#141414c7;font-size:15px}



.jc .lede a{color:var(--primary);text-decoration:underline}




/* project card */
.jc .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.5rem}



.jc .pcard{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:#000;color:#fff}



.jc .pcard img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s ease,opacity .4s ease}



.jc .pcard::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(transparent 42%,#000000d9)}



.jc .pcard:hover img{transform:scale(1.05);opacity:.85}



.jc .pmeta{position:absolute;inset:auto 0 0;z-index:2;padding:1.25rem}



.jc .pbadge{display:inline-block;margin-bottom:.4rem;padding:3px 8px;border-radius:3px;
  background:#ffffff2e;backdrop-filter:blur(4px);font-size:9px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase}



.jc .pcard h6{font-size:.95rem;font-weight:500;text-transform:uppercase;letter-spacing:.01em}



.jc .pcard small{display:block;margin-top:2px;font-size:11px;text-transform:uppercase;opacity:.9}



.jc .ploc{display:block;margin-top:.5rem;font-size:11px;opacity:.72}



.jc .ploc::before{content:"◈";color:var(--primary);margin-right:5px}




/* filter bar + builder grid */
.jc .fbar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:2rem;
  padding-bottom:1.25rem;border-bottom:1px solid #0000001a}



.jc .fbar-l{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#14141480}



.jc .pills{display:flex;flex-wrap:wrap;gap:.5rem}



.jc .pill{padding:.5rem 1.15rem;border:1px solid #00000026;border-radius:999px;background:none;
  font:500 13px Montserrat,sans-serif;color:var(--ink);cursor:pointer;transition:all .25s}



.jc .pill:hover{border-color:var(--primary);color:var(--primary)}



.jc .pill.on{background:var(--ink);border-color:var(--ink);color:#fff}



.jc .pill:focus-visible{outline:2px solid var(--primary);outline-offset:2px}




.jc .bgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:3rem}
@media(max-width:1100px){.jc .bgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.jc .bgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.jc .bgrid{grid-template-columns:repeat(2,1fr);gap:.75rem}}



.jc .btile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:1.5rem 1rem;min-height:104px;
  border:1px solid #00000014;border-radius:var(--r);background:#fff;color:var(--ink);text-align:center;
  cursor:pointer;transition:all .25s;font-family:Montserrat,sans-serif}



.jc .btile:hover{border-color:#00000029;box-shadow:0 12px 28px #0000000f;transform:translateY(-3px)}



.jc .btile.on{border-color:var(--primary);box-shadow:0 12px 28px #d8212a1f}



.jc .btile.off{opacity:.28;filter:grayscale(1);pointer-events:none}



.jc .btile:focus-visible{outline:2px solid var(--primary);outline-offset:2px}



.jc .bname{font-size:13.5px;font-weight:600;line-height:1.35;letter-spacing:.01em;transition:color .25s}



.jc .btile:hover .bname,.jc .btile.on .bname{color:var(--primary)}



.jc .bcount{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.5}




.jc .rhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem;
  margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid #0000001a}



.jc .rcount{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}




/* groups */
.jc .grp{margin-bottom:3.5rem}



.jc .grp-h{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  margin-bottom:1.75rem;padding-bottom:1rem;border-bottom:1px solid #0000001a}



.jc .grp-h p{max-width:72ch;margin:.6rem 0 0;font-size:14px;color:#141414c2}



.jc .grp-n{flex:0 0 auto;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--light);color:var(--primary);font-weight:700;font-size:14px}



.jc .sgrp{margin-bottom:2.5rem}



.jc .sgrp-h{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}



.jc .sgrp-h span:first-child{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}



.jc .sgrp-n{min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 7px;border-radius:12px;background:var(--primary);color:#fff;font-size:11px;font-weight:600}




/* stat strip */
.jc .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:3.5rem;
  background:#0000001a;border:1px solid #0000001a;border-radius:var(--r);overflow:hidden}
@media(max-width:820px){.jc .strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.jc .strip{grid-template-columns:1fr}}



.jc .strip>div{padding:1.5rem 1.25rem;background:#fff;text-align:center}



.jc .strip b{display:block;font-size:2rem;font-weight:200;line-height:1.1;color:var(--primary);
  font-variant-numeric:tabular-nums}



.jc .strip span{display:block;margin-top:.35rem;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:#14141499}




/* cards */
.jc .card{height:100%;padding:2rem 1.75rem;border:1px solid #00000014;border-radius:var(--r);
  background:#fff;transition:all .25s}



.jc .card:hover{box-shadow:0 15px 32px #0000000f;transform:translateY(-3px)}



.jc .card-k{display:block;margin-bottom:.75rem;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary)}



.jc .card h4{margin-bottom:.75rem;font-weight:500}



.jc .card p{font-size:14px;color:#141414d1}



.jc .card.dark{background:var(--ink);border-color:transparent;color:#fff}



.jc .card.dark p{color:#ffffffc7}



.jc .why{margin-top:1rem;padding-top:1rem;border-top:1px dashed #00000026;color:#141414 !important}



.jc .why b{color:var(--primary)}




/* process */
.jc .tl{position:relative;padding-left:2.5rem}



.jc .tl::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:#00000026}



.jc .step{position:relative;padding-bottom:2.25rem}



.jc .step:last-child{padding-bottom:0}



.jc .step-n{position:absolute;left:-2.5rem;top:0;width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:#fff;border:1px solid var(--primary);
  color:var(--primary);font-size:11px;font-weight:700}



.jc .step h4{margin-bottom:.4rem;font-weight:600;font-size:1.05rem}



.jc .step p{max-width:80ch;font-size:14px;color:#141414d1}




/* frameworks */
.jc .fw{height:100%;padding:1.75rem;border:1px solid #00000014;border-top:3px solid var(--primary);
  border-radius:var(--r);background:#fff}



.jc .fw.code{border-top-color:var(--ink);background:var(--light)}



.jc .fw h4{margin-bottom:.2rem;font-weight:700}



.jc .fw-src{display:block;margin-bottom:1rem;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:#1414148c}



.jc .fw p{font-size:14px;color:#141414d1}




.jc .focus{height:100%;padding:1.75rem;border-radius:var(--r);background:var(--light)}



.jc .focus h4{margin-bottom:.6rem;font-weight:600}



.jc .focus p{font-size:14px;color:#141414d1}




.jc .define{max-width:82ch;padding:2rem 2.25rem;border:1px solid #00000014;border-radius:var(--r);
  background:var(--light)}



.jc .define h3{margin-bottom:1rem;font-weight:500}



.jc .define p{font-size:15px;color:#141414d6}




/* empty + advisory */
.jc .empty{padding:3rem 2rem;border:1px dashed #00000026;border-radius:var(--r);text-align:center;
  background:#fbfbfb}



.jc .empty p{max-width:58ch;margin:0 auto;color:#141414b8}



.jc .adv{margin-top:3rem;padding:1.5rem 1.75rem;border-left:3px solid var(--primary);
  border-radius:0 var(--r) var(--r) 0;background:var(--light);font-size:14px}



.jc .adv p{max-width:88ch;color:#141414d9}



.jc .adv a{color:var(--primary);text-decoration:underline}




/* button */
.jc .btn{display:inline-block;margin-top:1.5rem;padding:.9rem 1.5rem;min-width:150px;border-radius:999px;
  border:1px solid #00000040;background:none;color:var(--primary);font:400 14px Montserrat,sans-serif;
  text-align:center;cursor:pointer;transition:all .25s}



.jc .btn:hover{background:var(--primary);color:#fff;border-color:transparent}



.jc .btn.solid{background:var(--ink);color:#fff;border-color:transparent}



.jc .btn.solid:hover{background:var(--primary)}




/* nav */
.jc .nav{border-bottom:1px solid #0000001a;background:#fff;position:relative;z-index:20}



.jc .nav-in{display:flex;align-items:center;gap:1.5rem;padding:1rem 24px;max-width:1160px;margin:0 auto}



.jc .nav-logo{width:118px;flex:0 0 auto}



.jc .nav-ul{display:flex;flex-wrap:wrap;gap:1.4rem;margin-left:auto}



.jc .nav-li{position:relative}



.jc .nav-a{font-size:12.5px;font-weight:500;letter-spacing:.02em;cursor:default;white-space:nowrap}







.jc .nav-a::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border:3.5px solid transparent;border-top-color:currentColor;opacity:.5}



.jc .nav-a.leaf::after{display:none}



.jc .drop{position:absolute;left:50%;top:100%;translate:-50% 0;margin-top:12px;min-width:230px;padding:.6rem 0;
  background:#fff;border:1px solid #0000001a;border-radius:var(--r);box-shadow:0 18px 40px #00000021;
  opacity:0;visibility:hidden;transition:all .2s;z-index:30}



.jc .nav-li:hover .drop{opacity:1;visibility:visible;margin-top:6px}



.jc .drop a{display:block;padding:.5rem 1.1rem;font-size:12.5px;color:#141414c7}



.jc .drop a:hover{background:var(--light);color:var(--primary)}



.jc .drop hr{margin:.45rem 1.1rem;border:0;border-top:1px solid #0000001a}



.jc .nav-burger{display:none;margin-left:auto;width:44px;height:44px;flex:0 0 auto;
  align-items:center;justify-content:center;border:1px solid #0000001f;border-radius:50%;
  background:none;cursor:pointer}



.jc .nav-burger i{display:block;width:18px;height:2px;background:var(--ink);position:relative}



.jc .nav-burger i::before,.jc .nav-burger i::after{content:"";position:absolute;left:0;width:18px;
  height:2px;background:var(--ink);transition:transform .25s}



.jc .nav-burger i::before{top:-6px}



.jc .nav-burger i::after{top:6px}



.jc .nav-burger.open i{background:transparent}



.jc .nav-burger.open i::before{transform:translateY(6px) rotate(45deg)}



.jc .nav-burger.open i::after{transform:translateY(-6px) rotate(-45deg)}




.jc.narrow .nav-in{gap:1rem;position:relative}



.jc.narrow .nav-burger{display:flex}



.jc.narrow .nav-ul{display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:.35rem 0;
    flex-direction:column;gap:0;background:#fff;border-top:1px solid #0000001a;
    box-shadow:0 20px 40px #00000024;z-index:50;max-height:70vh;overflow:auto}



.jc.narrow .nav-ul.open{display:flex}



.jc.narrow .nav-li{width:100%;border-bottom:1px solid #00000010}



.jc.narrow .nav-li:last-child{border-bottom:0}



.jc.narrow .nav-a{display:block;padding:.85rem 24px;font-size:14px}



.jc.narrow .nav-a::after{float:right;margin-top:7px}



.jc.narrow .drop{transition:none;position:static;translate:none;margin:0;padding:0;min-width:0;opacity:1;visibility:hidden;
    height:0;overflow:hidden;border:0;border-radius:0;box-shadow:none;background:#fafafa}



.jc.narrow .nav-li.open .drop{visibility:visible;height:auto;padding:.25rem 0}



.jc.narrow .nav-li:hover .drop{margin-top:0}



.jc.narrow .drop a{padding:.6rem 24px .6rem 38px;font-size:13px}



.jc.narrow .nav-logo{width:104px}








/* hero */
.jc .hero{position:relative;height:640px;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;background:var(--heroimg) center/cover no-repeat;overflow:hidden}



.jc .heroVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}



.jc .heroOv{position:absolute;inset:0;background:#0b0b0ce6;z-index:1;pointer-events:none}



.jc .hero>.wrap,.jc .pagehead>.wrap{position:relative;z-index:2}



.jc .hero .eyebrow{color:#ffffffb3}



.jc .hero h1{font-size:clamp(1.8rem,4.4vw,3.1rem);font-weight:200;text-transform:uppercase;letter-spacing:.01em}



.jc .hero .sub{max-width:60ch;margin:1.1rem auto 0;font-size:14px;font-weight:300;color:#ffffffd1}



.jc .pagehead{position:relative;height:min(40vw,420px);min-height:250px;display:flex;
  align-items:center;justify-content:center;text-align:center;color:#fff;
  background:var(--heroimg) center/cover no-repeat;overflow:hidden}



.jc .pagehead .heroOv{background:#0b0b0cd9}



.jc .pagehead h1{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:200;text-transform:uppercase}



.jc .crumb{margin-top:.7rem;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#ffffff8f}





/* --- clickable affordances --- */
.jc .pcard{cursor:pointer}



.jc .btn{cursor:pointer}



.jc .nav-a[data-go],.jc .nav-a[data-info],.jc .drop a,.jc .nav-logo{cursor:pointer}



.jc .drop a:focus-visible,.jc .btn:focus-visible,.jc .pcard:focus-visible,
.jc .nav-logo:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media(max-width:520px){}
@media(max-width:1024px){.jc .hero{height:560px}}
@media(max-width:991px){.jc .hero{height:550px}}
@media(max-width:425px){.jc .hero{height:400px}.jc .pagehead{min-height:210px}}
@media(prefers-reduced-motion:reduce){.jc *,.tab{transition:none!important;animation:none!important}}


/* ---- client feedback: bigger logo, monochrome banner ---- */
.jc .nav-logo{width:168px}


.jc.narrow .nav-logo{width:132px}


.jc .nav-in{gap:1.25rem}


.jc .heroVid{filter:grayscale(1) contrast(1.08) brightness(.92)}


.jc .heroOv{background:#0b0b0ce6}


.jc .pagehead .heroOv{background:#0b0b0cd9}
/* ---- site-wide header integration ----------------------------------------
   The revamp nav is in normal flow, not fixed. Cancel the offsets the old
   fixed header needed, and let the legacy banners keep their own styling. */
.jc-chrome{background:#fff}
body > main > .banner,
body > main > .insideBanner,
.banner, .insideBanner{margin-top:0 !important}
.header{display:none !important}

/* ---- footer -------------------------------------------------------------- */
.jc .jfoot{background:var(--ink);color:#fff;padding:3.5rem 0 1.5rem;font-size:14px}
.jc .jfoot-grid{display:grid;grid-template-columns:repeat(4,1fr) 1.4fr;gap:2rem}
.jc .jfoot-t{display:block;margin-bottom:1rem;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--primary)}
.jc .jfoot-col ul{list-style:none;margin:0;padding:0}
.jc .jfoot-col li{margin-bottom:.55rem}
.jc .jfoot-col a{color:#ffffffbf;font-size:13.5px;transition:color .2s}
.jc .jfoot-col a:hover{color:#fff}
.jc .jfoot-addr p{margin:0 0 .9rem;color:#ffffffbf;line-height:1.7;font-size:13.5px}
.jc .jfoot-contact a{color:#ffffffbf}
.jc .jfoot-contact a:hover{color:var(--primary)}
.jc .jfoot-social{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.jc .jfoot-social a{padding:5px 12px;border:1px solid #ffffff2e;border-radius:999px;
  font-size:11px;letter-spacing:.04em;color:#ffffffbf;transition:all .2s}
.jc .jfoot-social a:hover{background:var(--primary);border-color:transparent;color:#fff}
.jc .jfoot-note{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #ffffff1a}
.jc .jfoot-note p{margin:0;max-width:110ch;font-size:11.5px;line-height:1.75;color:#ffffff80}
.jc .jfoot-note a{color:#ffffffb3;text-decoration:underline}
.jc .jfoot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1.5rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #ffffff1a}
.jc .jfoot-legal{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;margin:0;padding:0}
.jc .jfoot-legal a{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#ffffff8c}
.jc .jfoot-legal a:hover{color:var(--primary)}
.jc .jfoot-bottom p{margin:0;font-size:11.5px;color:#ffffff8c}
@media(max-width:1000px){.jc .jfoot-grid{grid-template-columns:repeat(2,1fr)}
  .jc .jfoot-addr{grid-column:1 / -1}}
@media(max-width:560px){.jc .jfoot-grid{grid-template-columns:1fr;gap:1.75rem}
  .jc .jfoot{padding:2.5rem 0 1.25rem}}

/* ---- guard against Bootstrap class collisions -----------------------------
   Old pages still load bootstrap.min.css, which defines .nav, .card, .row and
   .btn as its own components. Restate ours at higher specificity so the header
   and footer render identically on every page. */
.jc .nav{display:block;flex-wrap:nowrap;padding-left:0;margin-bottom:0;list-style:none}
.jc .wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px;display:block}
.jc .jfoot .wrap{max-width:1160px}

/* keep the desktop menu on one line - the burger takes over at 1080px */
.jc .nav-ul{flex-wrap:nowrap}

/* ---- header sizing must not follow the root font-size --------------------
   responsive.css sets html{font-size:87.5%} below 991px, which would shrink
   rem-based padding and make the header 4px shorter on legacy pages. */
.jc .nav-in{padding:16px 24px}
.jc.narrow .nav-in{padding:16px 24px}
.jc .nav-logo{width:168px}
.jc.narrow .nav-logo{width:132px}

/* WhatsApp keeps its own brand colour on hover */
.jc .jfoot-social a.is-wa:hover{background:#25D366;border-color:transparent;color:#0b2e19}

/* ---- enquiry form (homepage) --------------------------------------------- */
.jc .jform{background:#fff;border:1px solid #00000014;border-radius:var(--r);padding:1.75rem}
.jc .jform-label{display:block;margin:0 0 .6rem;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#14141480}
.jc .jform-opts{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.jc .jform-opts label{position:relative;cursor:pointer}
.jc .jform-opts input{position:absolute;opacity:0;width:0;height:0}
.jc .jform-opts span{display:inline-block;padding:.5rem 1.1rem;border:1px solid #00000026;
  border-radius:999px;font-size:13px;font-weight:500;transition:all .2s}
.jc .jform-opts label:hover span{border-color:var(--primary);color:var(--primary)}
.jc .jform-opts input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.jc .jform-opts input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
.jc .jform-fields{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}
.jc .jform-f{display:block}
.jc .jform-f > span{display:block;margin-bottom:.35rem;font-size:12px;font-weight:500}
.jc .jform-f i{color:var(--primary);font-style:normal;margin-left:2px}
.jc .jform-f input{width:100%;padding:.7rem .9rem;border:1px solid #00000026;border-radius:6px;
  font:400 14px Montserrat,sans-serif;background:#fff;color:var(--ink)}
.jc .jform-f input:focus{outline:none;border-color:var(--ink)}
.jc .jform .btn{margin-top:0;cursor:pointer;border:1px solid transparent}
.jc .btn-solid{background:var(--ink);color:#fff}
.jc .btn-solid:hover{background:var(--primary);color:#fff}
.jc .jform-msg{display:block;margin-bottom:.75rem;font-size:13px;color:var(--primary);min-height:0}
.jc .jform-msg:empty{margin-bottom:0}
@media(max-width:760px){.jc .jform{padding:1.35rem}}

/* ---- promo popup --------------------------------------------------------- */
.jpop{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;
  padding:24px;background:#0b0b0cd9;opacity:0;transition:opacity .2s ease}
.jpop.jpop-show{display:flex}
.jpop.jpop-in{opacity:1}
.jpop-box{position:relative;max-width:520px;max-height:92vh;
  background:#fff;border-radius:10px;padding:14px;box-shadow:0 30px 80px #00000066;
  transform:translateY(10px) scale(.97);transition:transform .2s ease}
.jpop.jpop-in .jpop-box{transform:translateY(0) scale(1)}
@media(prefers-reduced-motion:reduce){
  .jpop,.jpop-box{transition:none}
}
.jpop-frame{border:1px solid #0000001f;border-radius:6px;padding:8px;overflow:hidden}
.jpop-frame img{display:block;margin:0 auto;width:auto;height:auto;
  max-width:100%;max-height:calc(92vh - 60px);border-radius:3px}
.jpop-x{position:absolute;top:-18px;right:-18px;width:52px;height:52px;border:0;border-radius:50%;
  background:#c8202c;color:#fff;font-size:30px;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px #00000040;transition:background .2s,transform .2s}
.jpop-x:hover{background:#a81a24;transform:scale(1.05)}
.jpop-x:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:600px){
  .jpop{padding:18px}
  .jpop-box{padding:10px}
  .jpop-x{top:-14px;right:-8px;width:44px;height:44px;font-size:26px}
}