/* ============================================================
   Botmer brand customizations — layered on top of the Framer
   bundle render. Safe to edit. Loaded on every page.
   ============================================================ */

.botmer-heading-accent {
  font-family: "Source Serif 4", "Source Serif 4 Placeholder", serif;
  font-style: italic;
  letter-spacing: -.08em;
}

/* Keep the hero and its client-logo strip together in the first viewport.
   Preserve the original minimum on shorter screens so content never clips. */
.framer-MrTG2 #hero.framer-isusy0 {
  height: auto;
  min-height: max(850px, calc(100vh - 114px));
  min-height: max(850px, calc(100svh - 114px));
}
@media (max-width: 1199.98px) {
  .framer-MrTG2 #hero.framer-isusy0 {
    min-height: max(900px, calc(100svh - 114px));
  }
}

/* 1) Hero gradient wave recolored blue/purple -> Botmer green */
img[src*="922LPrLT3JS7JXQbJxraBeoo8I"]{
  filter:hue-rotate(-104deg) saturate(1.0) brightness(0.98) contrast(1.15);
}

/* Brand icon badge: drop the invert filter, and show the full logo (don't crop to square) */
[data-framer-name="Icon Cropped"]{ filter:none !important; }
[data-framer-name="Icon Cropped"]{ width:48px !important; height:48px !important; }
[data-framer-name="Icon Cropped"] img{ object-fit:contain !important; width:100% !important; height:100% !important; }

/* 2) Remove the "Made in Framer" badge */
#__framer-badge-container,
.__framer-badge{ display:none !important; }

/* 3) Swap the text "botmer" wordmark for the Botmer hexagon logo.
   Text is hidden and the logo shown as a background image.
   - header nav (dark logo on light bg)
   - CTA / pricing card (light logo on dark bg)
   - menu overlay (light logo on dark bg)                        */
/* navbar: Botmer icon + italic "botmer" wordmark (like the preloader) */
a.framer-k382h1{
  background:none !important; width:auto !important; height:auto !important;
  display:inline-flex !important; align-items:center; gap:9px;
}
a.framer-k382h1::before{
  content:""; display:inline-block; width:26px; height:26px; flex:none;
  background:url(/assets/botmer-icon-color.png) center/contain no-repeat;
}
a.framer-k382h1 .framer-t6yx2k, a.framer-k382h1 .framer-t6yx2k *{
  color:#0a2640 !important; font-size:19px !important; white-space:nowrap;
}
/* show the ® as a small superscript after "Botmer International" */
a.framer-k382h1 .framer-1t8qtho{ display:block !important; align-self:flex-start; }
a.framer-k382h1 .framer-1t8qtho, a.framer-k382h1 .framer-1t8qtho *{
  color:#0a2640 !important; font-size:10px !important;
}

/* ® on the SVG-lockup logos (footer / CTA / menu) */
.framer-d4wc2v, .framer-1411j9j{ position:relative; }
.framer-d4wc2v::after{
  content:"®"; position:absolute; left:186px; top:4px;
  font:600 13px/1 "Inter",sans-serif; color:#fff;
}
.framer-1411j9j::after{
  content:"®"; position:absolute; left:112px; top:2px;
  font:600 10px/1 "Inter",sans-serif; color:#fff;
}

.framer-d4wc2v{
  background:url(/assets/botmer-logo-light.svg) left center/contain no-repeat !important;
  width:230px !important; height:66px !important;
}
.framer-d4wc2v *{ color:transparent !important; font-size:0 !important; }
/* hide the stray ® superscripts left beside the swapped logos */
.framer-16p31jf, .framer-16p31jf *,
.framer-vw83jv, .framer-vw83jv *,
.framer-14xlrvv, .framer-14xlrvv *,
.framer-spwnr7, .framer-spwnr7 *,
.framer-b93n6k, .framer-b93n6k *{ color:transparent !important; }

.framer-1411j9j{
  background:url(/assets/botmer-logo-light.svg) left center/contain no-repeat !important;
  width:150px !important; height:40px !important;
}
.framer-1411j9j *{ color:transparent !important; font-size:0 !important; }

/* pricing-card logo (dark logo on light card) */
.framer-664os8{
  background:url(/assets/botmer-logo-dark.svg) left center/contain no-repeat !important;
  height:32px !important;
}
.framer-664os8 *{ color:transparent !important; font-size:0 !important; }

/* ============================================================
   Tech-stack marquee (injected by botmer-techstack.js)
   Matches the template: white pills, Inter, italic-serif accent.
   ============================================================ */
.bmt-section{
  align-self:stretch; box-sizing:border-box; contain:layout paint;
  min-width:0; width:100%; max-width:100%; padding:104px 24px;
  overflow:hidden;
}
.bmt-section *{ box-sizing:border-box; }
.bmt-head{ max-width:760px; margin:0 auto 52px; text-align:center; padding:0 16px; }
.bmt-title{
  font-family:"Inter","Inter Placeholder",sans-serif; font-weight:600;
  font-size:clamp(34px,4.4vw,56px); letter-spacing:-0.03em; line-height:1.04;
  color:#0a0a0a; margin:0 0 18px;
}
.bmt-title em{
  font-family:"Source Serif 4","Source Serif 4 Placeholder",serif;
  font-style:italic; font-weight:600; letter-spacing:-0.02em;
}
.bmt-sub{
  font-family:"Inter","Inter Placeholder",sans-serif; font-weight:400;
  font-size:18px; line-height:1.5; color:#8a8a8a; margin:0;
}
.bmt-row{
  min-height:54px; min-width:0; width:100%; max-width:100%; overflow:hidden; margin:11px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.bmt-track{ display:flex; gap:14px; width:max-content; will-change:transform; }
.bmt-ltr{ animation:bmt-scroll-l 46s linear infinite; }
.bmt-rtl{ animation:bmt-scroll-r 52s linear infinite; }
.bmt-row:hover .bmt-track{ animation-play-state:paused; }
@keyframes bmt-scroll-l{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes bmt-scroll-r{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
.bmt-pill{
  display:flex; align-items:center; gap:11px; flex:none;
  background:#fff; border-radius:16px; padding:15px 24px; white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.bmt-logo{ width:24px; height:24px; object-fit:contain; flex:none; }
.bmt-name{
  font-family:"Inter","Inter Placeholder",sans-serif; font-weight:600;
  font-size:17px; letter-spacing:-0.01em; color:#0a0a0a;
}
@media (max-width:600px){ .bmt-section{ padding:72px 0; } .bmt-head{ padding:0 20px; } }

/* ============================================================
   Book card: replace $2,995 pricing with a dark video-call
   infographic; keep the Book Now button.
   ============================================================ */
[data-framer-name="Step 1"] .framer-664os8,            /* pricing logo */
[data-framer-name="Step 1"] .framer-157aiwj,           /* $2,995 / month */
[data-framer-name="Step 1"] [data-framer-name="Small"],/* "Popular" badge */
[data-framer-name="Step 1"] [data-framer-name="Large"] /* progressive-blur fade over the button */
{ display:none !important; }

/* remove the off-white inner box behind the infographic */
[data-framer-name="Step 1"] [data-framer-name="Container"],
[data-framer-name="Step 1"] [data-framer-name="Table"]{
  background:transparent !important;
}
[data-framer-name="Step 1"] [data-framer-name="Container"]{
  display:flex !important; flex-direction:column; justify-content:center; gap:18px;
}
[data-framer-name="Step 1"] [data-framer-name="Container"]::before{
  content:""; display:block; width:100%; height:148px; border-radius:16px; flex:none;
  background:#0b0b0d url(/assets/videocall.svg) center/contain no-repeat;
}
[data-framer-name="Step 1"] [data-framer-name="Container"]:has(.botmer-call-preview)::before{
  display:none;
}
.botmer-call-preview{
  aspect-ratio:300 / 172;
  background:#0b0b0d url(/assets/videocall.svg) center/100% 100% no-repeat;
  flex:none;
  margin:0 auto;
  max-width:258px;
  position:relative;
  width:100%;
}
.botmer-call-preview__participant{
  border-radius:9%;
  display:block;
  height:53.49%;
  object-fit:cover;
  object-position:center;
  position:absolute;
  top:12.21%;
  width:40.67%;
  z-index:1;
}
.botmer-call-preview__participant--first{ left:7%; }
.botmer-call-preview__participant--second{ left:52.33%; }
.botmer-call-preview__live{
  aspect-ratio:1;
  background:#bdbdbd;
  border-radius:50%;
  left:10%;
  position:absolute;
  top:17.44%;
  width:2.67%;
  z-index:2;
}
/* keep the Book Now button crisp — sit it ABOVE the progressive-blur layer
   so it can't be frosted, and force it fully opaque/black */
[data-framer-name="Step 1"] [data-framer-name="Default"]{
  opacity:1 !important; transform:none !important; filter:none !important;
  background:#000 !important; position:relative !important; z-index:20 !important;
}
[data-framer-name="Step 1"] [data-framer-name="Container"]{ z-index:20; }

/* Onboard card: one centered image that rises vertically from the folder. */
[data-framer-name="Step 3"] [data-framer-name="Image 2"],
[data-framer-name="Step 3"] [data-framer-name="Image 3"]{
  display:none !important;
}
[data-framer-name="Step 3"] [data-framer-name="Image 1"]{
  left:calc(50% - 85px) !important;
  transform:rotate(0deg) !important;
  transition:top .42s cubic-bezier(.22,1,.36,1) !important;
}
[data-framer-name="Step 3"] .framer-X77m6.framer-v-vxx1iz [data-framer-name="Image 1"]{
  left:calc(50% - 85px) !important;
  top:-20px !important;
  transform:rotate(0deg) !important;
}
.botmer-folder-hint{
  align-items:center;
  animation:botmer-folder-float 1.8s ease-in-out infinite;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(11,41,67,.12);
  border-radius:999px;
  bottom:21px;
  box-shadow:0 7px 20px rgba(11,41,67,.13);
  color:#0b2943;
  display:inline-flex;
  font-family:"Inter","Inter Placeholder",sans-serif;
  font-feature-settings:"blwf" 1,"cv03" 1,"cv04" 1,"cv09" 1,"cv11" 1;
  font-size:10px;
  font-weight:600;
  gap:6px;
  left:50%;
  letter-spacing:-.02em;
  line-height:1;
  padding:7px 10px;
  pointer-events:none;
  position:absolute;
  transform:translateX(-50%);
  transition:opacity .2s ease,transform .25s ease;
  white-space:nowrap;
  z-index:5;
}
.botmer-folder-hint__arrow{
  animation:botmer-folder-arrow .75s ease-in-out infinite alternate;
  color:#7c7c7c;
  font-size:13px;
  line-height:.7;
}
.botmer-folder-hint__label--mobile{ display:none; }
[data-framer-name="Step 3"] .framer-X77m6.framer-v-vxx1iz .botmer-folder-hint{
  animation:none;
  opacity:0;
  transform:translate(-50%,-9px);
}
[data-framer-name="Step 3"] .framer-X77m6.botmer-folder-open [data-framer-name="Image 1"]{
  left:calc(50% - 85px) !important;
  top:-20px !important;
  transform:rotate(0deg) !important;
}
[data-framer-name="Step 3"] .framer-X77m6.botmer-folder-open .botmer-folder-hint{
  animation:none;
  opacity:0;
  transform:translate(-50%,-9px);
}
@media (max-width:809px), (hover:none), (pointer:coarse){
  .botmer-folder-hint__label--desktop{ display:none; }
  .botmer-folder-hint__label--mobile{ display:inline; }
  [data-framer-name="Step 3"] [data-framer-name="Folder"]{ cursor:pointer; }
  [data-framer-name="Step 3"] .framer-X77m6:focus-within [data-framer-name="Image 1"]{
    left:calc(50% - 85px) !important;
    top:-20px !important;
    transform:rotate(0deg) !important;
  }
  [data-framer-name="Step 3"] .framer-X77m6:focus-within .botmer-folder-hint{
    animation:none;
    opacity:0;
    transform:translate(-50%,-9px);
  }
}
@keyframes botmer-folder-float{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}
@keyframes botmer-folder-arrow{
  from{transform:translateY(2px)}
  to{transform:translateY(-2px)}
}

/* Clients headline accent */
.botmer-client-highlight{
  font-family:"Source Serif 4","Source Serif 4 Placeholder",serif;
  font-style:italic;
  font-weight:600;
  letter-spacing:-.08em;
  white-space:nowrap;
}

.botmer-founder-added-frame{
  --botmer-founder-frame-rotate:0deg;
  overflow:hidden !important;
  transform:rotate(var(--botmer-founder-frame-rotate)) !important;
  transform-origin:center !important;
}
.botmer-founder-added{
  --botmer-founder-origin:center;
  --botmer-founder-position:center;
  --botmer-founder-scale:1;
  height:100% !important;
  object-fit:cover !important;
  object-position:var(--botmer-founder-position) !important;
  transform:scale(var(--botmer-founder-scale)) !important;
  transform-origin:var(--botmer-founder-origin) !important;
  width:100% !important;
}
.botmer-founder-source--1{ --botmer-founder-position:center 38%; --botmer-founder-scale:1.14; }
.botmer-founder-source--2{ --botmer-founder-position:center 26%; --botmer-founder-scale:2.05; --botmer-founder-origin:center 26%; }
.botmer-founder-source--3{ --botmer-founder-position:center 29%; --botmer-founder-scale:1.38; --botmer-founder-origin:center 29%; }
.botmer-founder-source--4{ --botmer-founder-position:center 38%; --botmer-founder-scale:1.2; --botmer-founder-origin:center 38%; }
.botmer-founder-source--5{ --botmer-founder-position:center 38%; --botmer-founder-scale:1.2; --botmer-founder-origin:center 38%; }
.botmer-founder-source--6{ --botmer-founder-position:56% 31%; --botmer-founder-scale:1.55; --botmer-founder-origin:56% 31%; }
.botmer-founder-source--7{ --botmer-founder-position:50% 30%; --botmer-founder-scale:1.35; --botmer-founder-origin:50% 30%; }
.botmer-founder-source--8{ --botmer-founder-position:50% 29%; --botmer-founder-scale:1.35; --botmer-founder-origin:50% 29%; }
.botmer-founder-source--9{ --botmer-founder-position:50% 29%; --botmer-founder-scale:1.35; --botmer-founder-origin:50% 29%; }
.botmer-founder-source--10{ --botmer-founder-position:48% 30%; --botmer-founder-scale:1.35; --botmer-founder-origin:48% 30%; }
.botmer-founder-source--11{ --botmer-founder-position:74% 31%; --botmer-founder-scale:1.68; --botmer-founder-origin:74% 31%; }
.botmer-founder-source--12{ --botmer-founder-position:82% 25%; --botmer-founder-scale:1.55; --botmer-founder-origin:82% 25%; }
.botmer-founder-frame-slot--1{ --botmer-founder-frame-rotate:0deg; }
.botmer-founder-frame-slot--2{ --botmer-founder-frame-rotate:-15deg; }
.botmer-founder-frame-slot--3{ --botmer-founder-frame-rotate:-30deg; }
.botmer-founder-frame-slot--4{ --botmer-founder-frame-rotate:-45deg; }
.botmer-founder-frame-slot--5{ --botmer-founder-frame-rotate:-60deg; }
.botmer-founder-frame-slot--6{ --botmer-founder-frame-rotate:-75deg; }
.botmer-founder-frame-slot--7{ --botmer-founder-frame-rotate:90deg; }
.botmer-founder-frame-slot--8{ --botmer-founder-frame-rotate:75deg; }
.botmer-founder-frame-slot--9{ --botmer-founder-frame-rotate:60deg; }
.botmer-founder-frame-slot--10{ --botmer-founder-frame-rotate:45deg; }
.botmer-founder-frame-slot--11{ --botmer-founder-frame-rotate:30deg; }
.botmer-founder-frame-slot--12{ --botmer-founder-frame-rotate:15deg; }

/* Preloader: horizontal Botmer International lockup with registered mark. */
[data-framer-name="Preloader"]{ position:relative; }
[data-framer-name="Preloader"]::before{ content:none; }
[data-framer-name="Preloader"] .framer-fk65f5{
  align-items:center !important;
  display:flex !important;
  flex-direction:row !important;
  gap:11px !important;
  width:max-content !important;
}
[data-framer-name="Preloader"] .framer-fk65f5::before{
  content:"";
  background:url(/assets/botmer-icon-color.png) center/contain no-repeat;
  flex:none;
  height:clamp(38px,4.5vw,52px);
  order:1;
  width:clamp(38px,4.5vw,52px);
}
[data-framer-name="Preloader"] .framer-fk65f5::after{
  color:#000;
  content:"Botmer International";
  font-family:"Source Serif 4","Source Serif 4 Placeholder",serif;
  font-size:clamp(28px,4vw,48px);
  font-style:italic;
  font-weight:600;
  letter-spacing:-.065em;
  line-height:1;
  order:2;
  white-space:nowrap;
}
[data-framer-name="Preloader"] .framer-1h2m68{ display:none !important; }
[data-framer-name="Preloader"] .framer-12g5rkt{
  align-self:flex-start !important;
  flex:none !important;
  margin-left:-5px;
  order:3;
  position:relative !important;
  right:auto !important;
  top:1px !important;
  white-space:nowrap !important;
  width:max-content !important;
}
[data-framer-name="Preloader"] .framer-12g5rkt,
[data-framer-name="Preloader"] .framer-12g5rkt *{
  color:#000 !important;
  filter:none !important;
  font-size:clamp(9px,1vw,12px) !important;
  line-height:1 !important;
  opacity:1 !important;
  text-align:left !important;
  transform:none !important;
  width:auto !important;
}