/* ==========================================================
   Benjima SEO Page stylesheet
   Loaded only on the Benjima SEO Page template.

   NO :root block and NO CSS variable anywhere. Every value is a
   hardcoded literal so this can never clash with the theme.

   Palette reference (values are written out in full below):
     deep #082220 . navy #0E2B28 . gold #8F7AE8 . blue #178C74
     bg #F7FAF9 . surface #FFFFFF . surface-2 #EDF4F2 . line #DAE7E4
     fg #0E2B28 . muted #5B7A75 . gold-soft rgba(143,122,232,.12)
     display 'Archivo' . body 'Inter' . ease cubic-bezier(.22,1,.36,1)
     radius 14px / 22px / 30px

   Icons are inline SVG. Font Awesome is not required by this page.
   ========================================================== */

/* ==========================================================
   1. BASE
   ========================================================== */
.bjseo,.bjseo *{box-sizing:border-box}
.bjseo{background:#F7FAF9;color:#0E2B28;font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.bjseo img{max-width:100%;display:block;height:auto}
.bjseo a{color:inherit;text-decoration:none}
.bjseo h1,.bjseo h2,.bjseo h3,.bjseo h4{font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.035em;margin:0;line-height:1.08;color:#0E2B28}
.bjseo p{margin:0}
.bjseo button{font-family:inherit}
.bjseo :focus-visible{outline:2px solid #8F7AE8;outline-offset:3px;border-radius:4px}

.bjseo .wrap-seo{width:min(1240px,92vw);margin-inline:auto}
.bjseo .narrow-seo{width:min(860px,92vw);margin-inline:auto}
.bjseo .sec-seo{padding:clamp(74px,9vw,140px) 0}
.bjseo .sec--tight-seo{padding:clamp(54px,6vw,92px) 0}
.bjseo .tint-seo{background:#EDF4F2}

/* inline SVG icon, sized from the surrounding font-size */
.bjseo .ic-seo{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bjseo .ic-seo.fill-seo{fill:currentColor;stroke:none}

.bjseo .eyebrow-seo{display:inline-block;font-family:'Archivo',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#8F7AE8;margin-bottom:18px}
.bjseo .h-xl-seo{font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.046em;line-height:1;font-size:clamp(38px,6.2vw,80px)}
.bjseo .h-lg-seo{font-family:'Archivo',system-ui,sans-serif;font-weight:800;line-height:1.08;font-size:clamp(27px,3.9vw,50px);letter-spacing:-.04em}
.bjseo .h-md-seo{font-family:'Archivo',system-ui,sans-serif;font-weight:800;line-height:1.08;font-size:clamp(21px,2.5vw,32px);letter-spacing:-.03em}
.bjseo .lead-seo{color:#5B7A75;font-weight:300;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.88}
.bjseo .lead-seo + .lead-seo{margin-top:20px}
.bjseo .head-seo{max-width:62ch}
.bjseo .head-seo.center-seo{margin-inline:auto;text-align:center}

.bjseo .btn-seo{display:inline-flex;align-items:center;gap:11px;border:0;cursor:pointer;border-radius:100px;padding:16px 30px;
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:13.5px;transition:.4s cubic-bezier(.22,1,.36,1);white-space:nowrap}
.bjseo .btn-seo .ic-seo{width:14px;height:14px}
.bjseo .btn--gold-seo{background:#8F7AE8;color:#0E2B28}
.bjseo .btn--gold-seo:hover{transform:translateY(-3px);box-shadow:0 20px 44px -20px rgba(143,122,232,.9)}
.bjseo .btn--dark-seo{background:#0E2B28;color:#fff}
.bjseo .btn--dark-seo:hover{transform:translateY(-3px);box-shadow:0 26px 60px -32px rgba(8,34,32,.45)}
.bjseo .btn--line-seo{background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff}
.bjseo .btn--line-seo:hover{border-color:#8F7AE8;color:#8F7AE8}
.bjseo .btn--outline-seo{background:transparent;border:1px solid #DAE7E4;color:#0E2B28}
.bjseo .btn--outline-seo:hover{border-color:#8F7AE8;color:#8F7AE8}
.bjseo .btn-row-seo{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.bjseo .btn-row-seo.center-seo{justify-content:center}

/* visible by default, the reveal only arms itself once the script has run,
   so a JS error can never leave the page blank */
.bjseo .rv-seo{opacity:1;transform:none}
.bjseo.js-seo .rv-seo{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.bjseo.js-seo .rv-seo.in-seo{opacity:1;transform:none}

/* fixed chrome lives outside .bjseo, class names are unique so no scope needed */
.progress-seo{position:fixed;top:0;left:0;height:3px;width:0;z-index:900;background:linear-gradient(90deg,#8F7AE8,#178C74)}
.totop-seo{position:fixed;right:22px;bottom:22px;z-index:840;width:48px;height:48px;border-radius:50%;border:1px solid #DAE7E4;
  background:#FFFFFF;color:#8F7AE8;cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.4s cubic-bezier(.22,1,.36,1);box-shadow:0 10px 30px -18px rgba(8,34,32,.35)}
.totop-seo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.totop-seo.on-seo{opacity:1;visibility:visible;transform:none}
.totop-seo:hover{background:#8F7AE8;color:#0E2B28;border-color:#8F7AE8}
.stickybar-seo{position:fixed;left:0;right:0;bottom:0;z-index:850;display:none;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(8,34,32,.95);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.12);transform:translateY(120%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.stickybar-seo.on-seo{transform:none}
.stickybar-seo a{flex:1;justify-content:center;padding:14px 18px;display:inline-flex;align-items:center;gap:10px;
  border:0;border-radius:100px;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:13.5px;text-decoration:none}
.stickybar-seo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stickybar-seo .sb-gold-seo{background:#8F7AE8;color:#0E2B28}
.stickybar-seo .sb-line-seo{background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff}

/* ==========================================================
   2. HERO  -  centered banner overlay
   ========================================================== */
.bjseo .hero-seo{position:relative;min-height:min(96svh,900px);display:grid;place-items:center;text-align:center;overflow:hidden;
  background:#082220;color:#fff;padding:clamp(130px,15vw,180px) 0 clamp(60px,7vw,90px)}
.bjseo .hero-seo h1,.bjseo .hero-seo h2,.bjseo .hero-seo h3{color:#fff}
.bjseo .hero-bg-seo{position:absolute;inset:0;z-index:0;will-change:transform}
.bjseo .hero-bg-seo img{width:100%;height:100%;object-fit:cover;opacity:.4;filter:grayscale(.42) contrast(1.06)}
.bjseo .hero-veil-seo{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(1000px 620px at 50% 4%,rgba(23,140,116,.32),transparent 62%),
    radial-gradient(900px 640px at 50% 100%,rgba(143,122,232,.22),transparent 64%),
    linear-gradient(180deg,rgba(8,34,32,.92) 0%,rgba(8,34,32,.58) 46%,rgba(8,34,32,.97) 100%)}
.bjseo .hero-grid-seo{position:absolute;inset:0;z-index:2;opacity:.13;
  background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:88px 88px;-webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000,transparent 74%);mask-image:radial-gradient(ellipse at 50% 42%,#000,transparent 74%)}
.bjseo .hero-inner-seo{position:relative;z-index:5;width:100%;padding-top:clamp(40px,5vw,72px)}
.bjseo .crumb-seo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;font-size:12.5px;color:#9CBDB7;margin-bottom:30px}
.bjseo .crumb-seo a:hover{color:#8F7AE8}
.bjseo .crumb-seo .ic-seo{width:9px;height:9px;opacity:.5}
.bjseo .crumb-seo span[aria-current]{color:#fff}
.bjseo .hero-seo h1{max-width:16ch;margin-inline:auto}
.bjseo .hero-seo h1 .ln-seo{display:block;overflow:hidden}
.bjseo .hero-seo h1 .ln-seo>span{display:block}
.bjseo.js-seo .hero-seo h1 .ln-seo>span{transform:translateY(108%);animation:riseSeo 1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes riseSeo{to{transform:translateY(0)}}
.bjseo .hero-seo h1 em{font-style:normal;color:#8F7AE8}
.bjseo .hero-deck-seo{margin:28px auto 0;max-width:58ch;color:#D2E7E2;font-weight:300;font-size:clamp(16px,1.3vw,19px);line-height:1.82}
.bjseo .hero-meta-seo{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.bjseo .chip-meta-seo{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:100px;font-size:12px;
  color:#D2E7E2;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}
.bjseo .chip-meta-seo .ic-seo{width:13px;height:13px;color:#8F7AE8}
.bjseo .hero-stats-seo{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(48px,6vw,80px);
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.11);border-radius:22px;overflow:hidden;backdrop-filter:blur(14px)}
.bjseo .hstat-seo{background:rgba(14,43,40,.58);padding:26px 22px}
.bjseo .hstat-seo b{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:clamp(16px,2.1vw,22px);font-weight:800;letter-spacing:-.04em;color:#fff}
.bjseo .hstat-seo span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9CBDB7;font-weight:500}
.bjseo .scroll-hint-seo{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:6;color:#9CBDB7;font-size:10.5px;
  letter-spacing:.28em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:12px}
.bjseo .scroll-hint-seo i{width:1px;height:52px;background:linear-gradient(180deg,#8F7AE8,transparent);animation:hintSeo 2s infinite}
@keyframes hintSeo{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ==========================================================
   3. SPLIT  -  image one side, content other side
   ========================================================== */
.bjseo .split-seo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5.5vw,88px);align-items:center}
.bjseo .split-seo.rev-seo .split-media-seo{order:-1}
.bjseo .split-media-seo{position:relative;margin:0;border-radius:30px;overflow:hidden;box-shadow:0 50px 110px -50px rgba(8,34,32,.6)}
.bjseo .split-media-seo img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.3s cubic-bezier(.22,1,.36,1)}
.bjseo .split-media-seo:hover img{transform:scale(1.05)}

/* Sticky media column, desktop only.
   Three conditions have to hold for sticky to work, and all three are met here:
     1. No ancestor may use overflow hidden. .bjseo uses overflow-x clip, which
        does NOT create a scroll container, so sticky survives. If it ever stops
        working, check body in header.php: overflow-x hidden there is the usual
        culprit, swap it for overflow-x clip.
     2. The grid must not stretch the item, hence align-items and align-self
        start. A stretched item is already full height and can never stick.
     3. The picture must be shorter than the viewport, otherwise it just sits
        with its bottom cut off. max-height caps it and object-fit cover crops
        rather than squashes, so nothing is ever distorted.
   Lower the 740px to give the image more travel and a stronger effect. */
@media (min-width:861px){
  .bjseo .split-seo{align-items:start}
  .bjseo .split-media-seo{position:sticky;top:88px;align-self:start}
  .bjseo .split-media-seo img{max-height:min(78vh,740px)}
}

.bjseo .split-tag-seo{position:absolute;left:24px;bottom:24px;background:rgba(8,34,32,.76);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:14px;padding:18px 24px}
.bjseo .split-tag-seo b{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:30px;color:#8F7AE8;line-height:1}
.bjseo .split-tag-seo span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#D2E7E2}

.bjseo .checks-seo{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px}
.bjseo .checks-seo li{position:relative;padding-left:34px;font-size:15px;line-height:1.7;color:#5B7A75;font-weight:300}
/* checkmark drawn as an inline data URI, no icon font needed */
.bjseo .checks-seo li::before{
  content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background-color:rgba(143,122,232,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F7AE8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px 11px;
}
.bjseo .checks-seo strong,.bjseo .checks-seo b{color:#0E2B28;font-weight:600}

.bjseo .steps-seo{margin-top:34px;position:relative;padding-left:36px;list-style:none}
.bjseo .steps-seo::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;
  background-image:linear-gradient(180deg,#8F7AE8 60%,transparent 0);background-size:2px 10px}
.bjseo .steps-seo li{position:relative;padding-bottom:26px}
.bjseo .steps-seo li:last-child{padding-bottom:0}
.bjseo .steps-seo li::before{content:"";position:absolute;left:-36px;top:6px;width:18px;height:18px;border-radius:50%;
  background:#EDF4F2;border:2px solid #8F7AE8;transition:.4s}
.bjseo .steps-seo li:hover::before{background:#8F7AE8;box-shadow:0 0 0 6px rgba(143,122,232,.12)}
.bjseo .steps-seo time{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8F7AE8;font-weight:700}
.bjseo .steps-seo b{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:17px;margin-top:4px;color:#0E2B28}
.bjseo .steps-seo p{color:#5B7A75;font-size:14.5px;font-weight:300;margin-top:6px;line-height:1.72}

/* ==========================================================
   4. RICH TEXT BLOCK
   ========================================================== */
.bjseo .rich-seo{text-align:center}
.bjseo .rich-seo .lead-seo{margin-inline:auto}
.bjseo .rule-seo{display:block;width:56px;height:3px;border-radius:3px;background:#8F7AE8;margin:0 auto 26px}
.bjseo .tbl-seo{overflow-x:auto;margin-top:clamp(36px,4vw,52px);border:1px solid #DAE7E4;border-radius:22px;background:#FFFFFF;text-align:left}
.bjseo .tbl-seo table{width:100%;border-collapse:collapse;min-width:620px}
.bjseo .tbl-seo th,.bjseo .tbl-seo td{text-align:left;padding:17px 22px;border-bottom:1px solid #DAE7E4;font-size:14.5px}
.bjseo .tbl-seo th{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5B7A75;background:#EDF4F2}
.bjseo .tbl-seo td{color:#5B7A75;font-weight:300}
.bjseo .tbl-seo td:first-child{font-weight:600;color:#0E2B28}
.bjseo .tbl-seo tr:last-child td{border-bottom:0}
.bjseo .tbl-seo tbody tr{transition:.3s}
.bjseo .tbl-seo tbody tr:hover{background:rgba(143,122,232,.12)}

/* ==========================================================
   5. IMAGE BAND  -  overlay content, parallax
   ========================================================== */
.bjseo .band-seo{position:relative;min-height:min(78vh,660px);display:grid;place-items:center;overflow:hidden;background:#082220;color:#fff;isolation:isolate}
.bjseo .band-bg-seo{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.bjseo .band-bg-seo img{width:100%;height:100%;object-fit:cover;filter:brightness(.44) saturate(1.05)}
.bjseo .band-seo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,34,32,.72) 0%,rgba(8,34,32,.5) 50%,rgba(8,34,32,.86) 100%)}
.bjseo .band-card-seo{text-align:center;padding:clamp(32px,4vw,58px);border-radius:30px; margin: 40px auto;}
.bjseo .band-card-seo h2,.bjseo .band-card-seo h3,.bjseo .band-card-seo .h-md-seo{color:#fff}
.bjseo .band-card-seo .rich-body-seo{margin-top:20px;color:#D2E7E2;font-weight:300;font-size:clamp(15px,1.2vw,17px);line-height:1.84}
.bjseo .band-marks-seo{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.bjseo .mark-seo{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:100px;font-size:12px;font-weight:600;
  background:rgba(143,122,232,.16);border:1px solid rgba(143,122,232,.4);color:#fff}
.bjseo .mark-seo .ic-seo{width:13px;height:13px;color:#8F7AE8}

/* ==========================================================
   6. PINNED HORIZONTAL SCROLL CAROUSEL
   ========================================================== */
.bjseo .pin-seo{position:relative;background:#082220;color:#fff}
.bjseo .pin-stage-seo{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(60px,7vw,90px) 0}
.bjseo .pin-head-seo{width:min(1240px,92vw);margin:0 auto clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}
.bjseo .pin-head-seo .h-lg-seo{max-width:16ch;color:#fff}
.bjseo .pin-count-seo{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:13px;letter-spacing:.2em;color:#9CBDB7}
.bjseo .pin-count-seo b{color:#8F7AE8}
.bjseo .pin-track-seo{display:flex;gap:22px;padding-inline:max(4vw,calc((100vw - 1240px)/2));will-change:transform}
.bjseo .pcard-seo{position:relative;flex:0 0 clamp(258px,25vw,340px);border-radius:22px;overflow:hidden;height:min(52vh,440px);
  display:flex;align-items:flex-end;isolation:isolate;box-shadow:0 10px 30px -18px rgba(8,34,32,.35);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.bjseo .pcard-seo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.bjseo .pcard-seo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,34,32,.06) 16%,rgba(8,34,32,.92) 94%);transition:.5s}
.bjseo .pcard-seo:hover img{transform:scale(1.07)}
.bjseo .pcard-seo:hover::after{background:linear-gradient(180deg,rgba(8,34,32,.3) 0%,rgba(14,43,40,.96) 92%)}
.bjseo .pnum-seo{position:absolute;top:22px;left:24px;z-index:3;font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.55)}
.bjseo .pbody-seo{padding:26px;width:100%}
.bjseo .pbody-seo > span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#8F7AE8;font-weight:700}
.bjseo .pbody-seo h3{font-size:22px;margin-top:9px;font-weight:800;color:#fff}
.bjseo .pbody-seo p{margin-top:10px;font-size:13.5px;color:#D2E7E2;font-weight:300;line-height:1.68}
.bjseo .plink-seo{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:12.5px;color:#fff}
.bjseo .plink-seo span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#8F7AE8;color:#0E2B28;transition:.4s cubic-bezier(.22,1,.36,1)}
.bjseo .plink-seo .ic-seo{width:12px;height:12px}
.bjseo .pcard-seo:hover .plink-seo span{transform:translateX(6px)}
.bjseo .pbar-seo{width:min(1240px,92vw);margin:clamp(28px,3.4vw,44px) auto 0;height:2px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.bjseo .pbar-seo i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8F7AE8,#178C74);border-radius:2px}
/* native fallback: mobile + reduced motion */
.bjseo .pin-seo.native-seo{height:auto !important}
.bjseo .pin-seo.native-seo .pin-stage-seo{position:static;height:auto;padding:clamp(70px,9vw,110px) 0}
.bjseo .pin-seo.native-seo .pin-track-seo{overflow-x:auto;scroll-snap-type:x mandatory;transform:none !important;padding-bottom:18px;scrollbar-width:none}
.bjseo .pin-seo.native-seo .pin-track-seo::-webkit-scrollbar{display:none}
.bjseo .pin-seo.native-seo .pcard-seo{scroll-snap-align:start;height:420px}

/* ==========================================================
   7. CARDS  -  icon by default, image when one is set
   ========================================================== */
.bjseo .g3-seo{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bjseo .g4-seo{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.bjseo .card-seo{position:relative;border-radius:22px;background:#FFFFFF;border:1px solid #DAE7E4;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .5s}
.bjseo .card-seo::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;z-index:3;background:linear-gradient(90deg,#8F7AE8,#178C74);transition:width .6s cubic-bezier(.22,1,.36,1)}
.bjseo .card-seo:hover{transform:translateY(-9px);border-color:#8F7AE8;box-shadow:0 26px 60px -32px rgba(8,34,32,.45)}
.bjseo .card-seo:hover::after{width:100%}
.bjseo .card-body-seo{padding:34px 30px 36px}
.bjseo .card-ico-seo{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px;
  background:rgba(143,122,232,.12);color:#8F7AE8;transition:.5s cubic-bezier(.22,1,.36,1)}
.bjseo .card-ico-seo svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.bjseo .card-seo:hover .card-ico-seo{transform:rotate(-8deg) scale(1.06);background:#8F7AE8;color:#0E2B28}
.bjseo .card-seo h3{font-size:17.5px;font-weight:700}
.bjseo .card-seo p{margin-top:10px;font-size:14px;color:#5B7A75;font-weight:300;line-height:1.7}
.bjseo .card-num-seo{position:absolute;top:26px;right:28px;z-index:3;font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:12px;letter-spacing:.16em;color:#DAE7E4}

/* image variant: picture on top, icon suppressed, number goes white on the photo */
.bjseo .card-media-seo{position:relative;margin:0;overflow:hidden;background:#EDF4F2}
.bjseo .card-media-seo img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.bjseo .card-seo:hover .card-media-seo img{transform:scale(1.06)}
.bjseo .card-media-seo::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,34,32,.55))}
.bjseo .has-media-seo .card-num-seo{color:#fff;text-shadow:0 1px 10px rgba(8,34,32,.6)}
.bjseo .has-media-seo .card-body-seo{padding:26px 30px 32px}

/* ==========================================================
   8. SIMPLE METRICS
   ========================================================== */
.bjseo .metrics-seo{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#DAE7E4;border:1px solid #DAE7E4;
  border-radius:22px;overflow:hidden;margin-top:clamp(46px,5vw,70px)}
.bjseo .metric-seo{background:#FFFFFF;padding:32px 26px;text-align:center}
.bjseo .metric-seo b{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:clamp(27px,3.3vw,44px);font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(120deg,#8F7AE8,#178C74);-webkit-background-clip:text;background-clip:text;color:transparent}
.bjseo .metric-seo span{display:block;margin-top:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5B7A75;font-weight:600}

/* ==========================================================
   9. IMAGE OVERLAY CONTENT  -  full bleed
   ========================================================== */
.bjseo .ovl-seo{position:relative;overflow:hidden;background:#0E2B28;color:#fff}
.bjseo .ovl-media-seo{position:absolute;inset:0;z-index:0}
.bjseo .ovl-media-seo img{width:100%;height:100%;object-fit:cover;opacity:.5}
.bjseo .ovl-media-seo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,34,32,.96) 0%,rgba(8,34,32,.8) 46%,rgba(8,34,32,.3) 100%)}
.bjseo .ovl-inner-seo{position:relative;z-index:2;padding:clamp(76px,9vw,140px) 0}
/* .bjseo .ovl-copy-seo{max-width:600px} */
.bjseo .ovl-copy-seo h2{color:#fff}
.bjseo .ovl-copy-seo .rich-body-seo{margin-top:22px;color:#D2E7E2;font-weight:300;font-size:clamp(15px,1.2vw,17px);line-height:1.84}
.bjseo .ovl-list-seo{display:grid;gap:1px;margin-top:36px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:22px;overflow:hidden}
.bjseo .ovl-row-seo{display:flex;align-items:center;gap:18px;padding:20px 24px;background:rgba(8,34,32,.55);transition:.4s cubic-bezier(.22,1,.36,1)}
.bjseo .ovl-row-seo:hover{background:rgba(143,122,232,.18)}
.bjseo .ovl-ico-seo{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(143,122,232,.18);color:#8F7AE8}
.bjseo .ovl-ico-seo .ic-seo{width:17px;height:17px}
.bjseo .ovl-row-seo b{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:15px;color:#fff}
.bjseo .ovl-row-seo span{font-size:13px;color:#9CBDB7;font-weight:300}

/* ==========================================================
   10. GALLERY
   ========================================================== */
.bjseo .filters-seo{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:38px}
.bjseo .chip-seo{border:1px solid #DAE7E4;background:transparent;border-radius:100px;padding:10px 20px;cursor:pointer;
  font-size:13px;font-weight:600;font-family:'Archivo',system-ui,sans-serif;color:#0E2B28;transition:.35s cubic-bezier(.22,1,.36,1)}
.bjseo .chip-seo:hover{border-color:#8F7AE8}
.bjseo .chip-seo.on-seo{background:#0E2B28;color:#fff;border-color:#0E2B28}
.bjseo .masonry-seo{columns:4;column-gap:18px}
.bjseo .tile-seo{break-inside:avoid;margin:0 0 18px;position:relative;border-radius:14px;overflow:hidden;cursor:zoom-in;
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.bjseo .tile-seo img{width:100%;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.bjseo .tile-seo:hover img{transform:scale(1.08)}
.bjseo .tile-cap-seo{position:absolute;inset:auto 0 0 0;padding:18px;color:#fff;background:linear-gradient(180deg,transparent,rgba(8,34,32,.92));
  opacity:0;transform:translateY(12px);transition:.45s cubic-bezier(.22,1,.36,1);font-family:'Archivo',system-ui,sans-serif;font-size:13.5px;font-weight:700}
.bjseo .tile-seo:hover .tile-cap-seo{opacity:1;transform:none}
.bjseo .tile-seo.hide-seo{display:none}
.lb-seo{position:fixed;inset:0;z-index:1200;background:rgba(8,34,32,.95);backdrop-filter:blur(12px);display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:.4s}
.lb-seo.on-seo{opacity:1;visibility:visible}
.lb-seo img{max-width:88vw;max-height:80vh;border-radius:14px;box-shadow:0 50px 110px -50px rgba(8,34,32,.6);display:block;width:auto;height:auto}
.lb-btn-seo{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
  width:52px;height:52px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:.3s}
.lb-btn-seo svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-btn-seo:hover{background:#8F7AE8;color:#0E2B28;border-color:#8F7AE8}
.lb-close-seo{top:26px;right:26px}
.lb-prev-seo{left:3%;top:50%;transform:translateY(-50%)}
.lb-next-seo{right:3%;top:50%;transform:translateY(-50%)}
.lb-count-seo{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#9CBDB7;font-size:12px;letter-spacing:.18em}

/* ==========================================================
   11. FAQ
   ========================================================== */
.bjseo .faq-split-seo{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(38px,6vw,88px);align-items:start}
.bjseo .faq-aside-seo{position:sticky;top:88px}
.bjseo .fq-seo{border-bottom:1px solid #DAE7E4}
.bjseo .fq-seo:first-of-type{border-top:1px solid #DAE7E4}
.bjseo .fq-q-seo{width:100%;background:none;border:0;cursor:pointer;text-align:left;color:#0E2B28;display:flex;align-items:center;
  justify-content:space-between;gap:26px;padding:26px 0;font-family:'Archivo',system-ui,sans-serif;font-weight:700;
  font-size:clamp(15.5px,1.4vw,18.5px);line-height:1.4;letter-spacing:-.015em}
.bjseo .fq-mark-seo{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid #DAE7E4;display:grid;place-items:center;
  color:#8F7AE8;transition:.42s cubic-bezier(.22,1,.36,1)}
.bjseo .fq-mark-seo .ic-seo{width:13px;height:13px}
.bjseo .fq-seo.open-seo .fq-mark-seo{transform:rotate(45deg);background:#8F7AE8;color:#0E2B28;border-color:#8F7AE8}
.bjseo .fq-a-seo{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1)}
.bjseo .fq-a-seo p{padding-bottom:28px;max-width:70ch;font-size:15.5px;line-height:1.86;color:#5B7A75;font-weight:300}

/* ==========================================================
   12. CTA
   ========================================================== */
.bjseo .cta-seo{position:relative;overflow:hidden;background:#082220;color:#fff;text-align:center;padding:clamp(78px,9vw,140px) 0}
.bjseo .cta-seo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 460px at 50% 0%,rgba(143,122,232,.24),transparent 64%),
             radial-gradient(700px 480px at 90% 100%,rgba(23,140,116,.24),transparent 62%)}
.bjseo .cta-inner-seo{position:relative;z-index:2}
.bjseo .cta-seo .h-lg-seo{margin-inline:auto;color:#fff ;font-size:clamp(27px,3.9vw,50px); }
.bjseo .cta-seo p{margin:24px auto 0;max-width:58ch;color:#D2E7E2;font-weight:300;font-size:clamp(15px,1.25vw,17.5px);line-height:1.8}
.bjseo .cta-note-seo{margin-top:26px;font-size:12.5px;color:#9CBDB7;letter-spacing:.04em}

/* ==========================================================
   13. PLACEHOLDERS AND EDITOR CONTENT
   ========================================================== */
.bjseo .ph-seo{display:grid;place-items:center;background:linear-gradient(150deg,#0E2B28,#2A5A54)}
.bjseo .ph-seo svg{width:22%;max-width:90px;fill:none;stroke:rgba(255,255,255,.4);stroke-width:4}
.bjseo .hero-bg-seo .ph-seo,
.bjseo .band-bg-seo .ph-seo,
.bjseo .ovl-media-seo .ph-seo{position:absolute;inset:0;width:100%;height:100%}
.bjseo .pcard-seo .ph-seo{position:absolute;inset:0;z-index:-2}
.bjseo .split-media-seo .ph-seo{aspect-ratio:4/5}
.bjseo .card-media-seo .ph-seo{aspect-ratio:4/3}
.bjseo .tile-seo .ph-seo{aspect-ratio:1}

.bjseo .rich-body-seo > * + *{margin-top:18px}
.bjseo .rich-body-seo h3{font-size:22px;margin-top:32px}
.bjseo .rich-body-seo ul,.bjseo .rich-body-seo ol{margin:18px 0 0;padding-left:22px;color:#5B7A75;display:grid;gap:10px}
.bjseo .rich-body-seo li{line-height:1.75}
.bjseo .rich-body-seo li::marker{color:#8F7AE8}
.bjseo .rich-body-seo strong{color:#0E2B28}
.bjseo .rich-body-seo a{color:#8F7AE8;border-bottom:1px solid rgba(143,122,232,.12)}
.bjseo .band-card-seo .rich-body-seo strong,
.bjseo .ovl-copy-seo .rich-body-seo strong{color:#fff}
.bjseo .band-card-seo .rich-body-seo ul,
.bjseo .ovl-copy-seo .rich-body-seo ul{color:#D2E7E2;text-align:left}
.bjseo .rich-body-seo table{width:100%;border-collapse:collapse;margin-top:22px;font-size:15px}
.bjseo .rich-body-seo th{text-align:left;font-family:'Archivo',system-ui,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 14px;border-bottom:1px solid #DAE7E4}
.bjseo .rich-body-seo td{padding:12px 14px;border-bottom:1px solid #DAE7E4;color:#5B7A75}

/* ==========================================================
   14. RESPONSIVE
   ========================================================== */
@media (max-width:1180px){
  .bjseo .g4-seo{grid-template-columns:repeat(3,1fr)}
  .bjseo .masonry-seo{columns:3}
  .bjseo .metrics-seo{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1040px){
  .bjseo .faq-split-seo{grid-template-columns:1fr}
  .bjseo .faq-aside-seo{position:static}
  .bjseo .hero-stats-seo{grid-template-columns:repeat(2,1fr)}
  .stickybar-seo{display:flex}
  .totop-seo{bottom:88px}
  .floaters-hello{bottom:96px}
}
@media (max-width:860px){
  .bjseo .split-seo{grid-template-columns:1fr}
  .bjseo .split-seo.rev-seo .split-media-seo{order:0}
  .bjseo .split-media-seo img{aspect-ratio:4/3}
  .bjseo .g3-seo,.bjseo .g4-seo{grid-template-columns:repeat(2,1fr)}
  .bjseo .ovl-media-seo::after{background:linear-gradient(180deg,rgba(8,34,32,.9),rgba(8,34,32,.8))}
  .bjseo .scroll-hint-seo{display:none}
  .bjseo .pin-track-seo{padding-inline:4vw}
}
@media (max-width:640px){
  .bjseo .g3-seo,.bjseo .g4-seo{grid-template-columns:1fr}
  .bjseo .masonry-seo{columns:2}
  .bjseo .metrics-seo{grid-template-columns:1fr}
  .bjseo .hero-stats-seo{grid-template-columns:1fr}
  .bjseo .hero-seo{min-height:auto}
  .lb-btn-seo{width:44px;height:44px}
  .bjseo .pcard-seo{flex-basis:78vw}
}
@media (prefers-reduced-motion:reduce){
  .bjseo.js-seo .rv-seo{opacity:1;transform:none;transition:none}
  .bjseo.js-seo .hero-seo h1 .ln-seo>span{transform:none;animation:none}
  .bjseo .scroll-hint-seo i{animation:none}
}
@media print{
  .progress-seo,.stickybar-seo,.totop-seo,.bjseo .cta-seo{display:none}
  .bjseo .fq-a-seo{max-height:none}
  .bjseo .split-media-seo{position:static}
}