/* Google Fonts (optional) */
@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&family=Mulish:wght@400;500;600&family=Work+Sans:wght@600&display=swap');

/* ========= TOKENS / GRID ========= */
.kbe-shell{
  --gap:24px; --stack-gap:16px; --cta-gap:32px;

  --rail-left:-32px; --rail-nudge-y:14px;
  --head-pad-y:14px; --num-size:48px;

  --dot-w:12px; --dot-h:24px;
  --pill-w:12px; --pill-h:228px;

  --first-gap:var(--gap); --dot-gap:var(--gap);
  --dot-under:10px;

  /* mobile left padding controls */
  --mobile-body-pad-left:16px;
  --mobile-body-pad-right:16px;

  max-width:1205px; margin:0 auto; position:relative;
  display:grid; grid-template-columns:665px 32px 452px; align-items:start;
  font-synthesis-weight:none; -webkit-tap-highlight-color:transparent;
}
.kbe-radio{ position:absolute; opacity:0; pointer-events:none; }
.kbe-leftCol{ grid-column:1/2; position:relative; }
.kbe-item + .kbe-item{ margin-top:var(--gap); }

/* ========= RAIL (pill + dots) ========= */
.kbe-rail{
  position:absolute; left:var(--rail-left); top:0; width:var(--pill-w);
  pointer-events:none; user-select:none;

  --y-line: calc(var(--head-pad-y) + (var(--num-size)/2) + var(--rail-nudge-y));
  --y-top-1: calc(var(--y-line) + var(--dot-under));
  --y-top-2: calc(var(--y-top-1) + (var(--dot-h) + var(--dot-gap)));
  --y-top-3: calc(var(--y-top-2) + (var(--dot-h) + var(--dot-gap)));

  --pill-top: calc(var(--y-top-1) + var(--first-gap));
  --pill-bottom: calc(var(--pill-top) + var(--pill-h));

  --y-btm-1: calc(var(--pill-bottom) + var(--first-gap));
  --y-btm-2: calc(var(--y-btm-1) + (var(--dot-h) + var(--dot-gap)));
  --y-btm-3: calc(var(--y-btm-2) + (var(--dot-h) + var(--dot-gap)));

  /* safe window */
  --win-min: calc( (var(--dot-h)*3) + (var(--dot-gap)*2) + var(--first-gap) + var(--pill-h) + var(--first-gap) + (var(--dot-h)*3) + (var(--dot-gap)*2) );
  --cap-top: var(--y-top-1);
  --cap-bottom: calc(var(--cap-top) + var(--win-min));
}
.kbe-rail::before{
  content:""; position:absolute; left:0;
  top: clamp(var(--cap-top), var(--pill-top), calc(var(--cap-bottom) - var(--pill-h)));
  width:var(--pill-w); height:var(--pill-h);
  background:linear-gradient(0deg,#94641E 4.17%,#FFF2DB 82.81%,#EAC885 93.75%);
  border-radius:16px;
}
.kbe-dot{
  position:absolute; left:50%;
  width:var(--dot-w); height:var(--dot-h);
  margin-left:calc(-1 * var(--dot-w) / 2);
  background:#F4D98A; border-radius:16px;
  transition:top .25s ease;
}

/* ========= HEAD & BODY ========= */
.kbe-head{ display:flex; align-items:center; gap:8px; padding:14px 4px; cursor:pointer; background:transparent; border:0; }
.kbe-head:focus{ outline:2px solid rgba(234,200,133,.45); outline-offset:2px; }
.kbe-numBox{ width:48px; height:48px; border-radius:12px; background:#FFFFFF; border:1px solid #FDF7E6; box-shadow:0 1px 2px rgba(0,0,0,.05); display:grid; place-items:center; flex:0 0 48px; }
.kbe-num{
  font:700 18px/27px "Times New Roman",serif;
  background:linear-gradient(0deg,#94641E 4.17%,#FFF2DB 82.81%,#EAC885 93.75%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.kbe-title{ font-family:"Marcellus SC",serif; font-weight:400; font-size:24px; line-height:36px; color:#000; }
.kbe-arrow{ width:26px; height:26px; display:grid; place-items:center; margin-left:8px; flex:0 0 26px; }

.kbe-body{ display:none; padding:6px 0 14px 58px; color:#303133; }
.kbe-body > .kbe-label{ margin-top:var(--stack-gap); font:700 16px/24px "Times New Roman",serif; color:#303133; }
.kbe-body > .kbe-desc{ margin:8px 0 var(--stack-gap); font:400 15px/24px "Mulish",sans-serif; max-width:559px; }

/* Services */
.kbe-services{ display:flex; flex-wrap:wrap; gap:8px; margin: var(--stack-gap) 0 var(--stack-gap); }
.kbe-services .svc{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; min-height:44px; box-sizing:border-box;
  background:#FFFFFF; border-radius:6px; text-decoration:none; border:1px solid rgba(234,200,133,.35);
  transition: box-shadow .2s ease, transform .05s ease, border-color .2s ease, background-color .2s ease;
}
.kbe-services .svc .txt{
  font-family:"Work Sans","Mulish",sans-serif; font-weight:600; font-size:16px; line-height:24px; white-space:nowrap;
  background:linear-gradient(0deg,#94641E 4.17%,#FFF2DB 82.81%,#EAC885 93.75%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent;
}
.kbe-services .svc .arr{ width:24px; height:24px; flex:0 0 24px; }
.kbe-services .svc .arr path{
  stroke:url(#kbe-gold); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.kbe-services .svc:hover,
.kbe-services .svc:focus-visible{ background:#FFF9F0; border-color:#EAC885; box-shadow:0 2px 6px rgba(148,100,30,.18); }
.kbe-services .svc:active{ transform:translateY(1px); }

/* ========= RIGHT (desktop) ========= */
.kbe-right{ grid-column:3/4; display:flex; flex-direction:column; align-items:flex-end; }
.kbe-viewport{ position:relative; width:452px; height:253px; overflow:hidden; margin-bottom: var(--cta-gap); }
.kbe-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; visibility:hidden; transition:opacity .25s ease; }
.kbe-cta{
  display:none; text-align:center; text-decoration:none;
  width:452px; height:50px; border:0; border-radius:8px;
  background:linear-gradient(0deg,#94641E 4.17%,#FFF2DB 82.81%,#EAC885 93.75%);
  color:#fff; text-transform:uppercase; letter-spacing:.02em;
  font:700 16px/50px "Times New Roman",serif;
}

/* ========= MOBILE extras inside each tab ========= */
.kbe-mobBlock{ display:none; }
.kbe-imgM{ width:min(100%,452px); height:auto; object-fit:contain; display:block; }
.kbe-ctaM{
  display:inline-block; text-align:center; text-decoration:none; margin-top:12px;
  width:min(100%,452px); min-height:50px; border:0; border-radius:8px;
  background:linear-gradient(0deg,#94641E 4.17%,#FFF2DB 82.81%,#EAC885 93.75%);
  color:#fff; text-transform:uppercase; letter-spacing:.02em;
  font:700 16px/50px "Times New Roman",serif;
}

/* ========= ACTIVE STATES ========= */
.kbe-shell:has(#kbe-1:checked) .body-1,
.kbe-shell:has(#kbe-2:checked) .body-2,
.kbe-shell:has(#kbe-3:checked) .body-3,
.kbe-shell:has(#kbe-4:checked) .body-4{ display:block; }

.kbe-shell:has(#kbe-1:checked) label[for="kbe-1"] .kbe-arrow svg,
.kbe-shell:has(#kbe-2:checked) label[for="kbe-2"] .kbe-arrow svg,
.kbe-shell:has(#kbe-3:checked) label[for="kbe-3"] .kbe-arrow svg,
.kbe-shell:has(#kbe-4:checked) label[for="kbe-4"] .kbe-arrow svg{ transform:rotate(90deg); transition:transform .25s ease; }

.kbe-shell:has(#kbe-1:checked) .img-1,
.kbe-shell:has(#kbe-2:checked) .img-2,
.kbe-shell:has(#kbe-3:checked) .img-3,
.kbe-shell:has(#kbe-4:checked) .img-4{ opacity:1; visibility:visible; }

.kbe-shell:has(#kbe-1:checked) .cta-1,
.kbe-shell:has(#kbe-2:checked) .cta-2,
.kbe-shell:has(#kbe-3:checked) .cta-3,
.kbe-shell:has(#kbe-4:checked) .cta-4{ display:inline-block; }

/* Rail mapping (step logic) */
.kbe-shell:has(#kbe-1:checked) .kbe-leftCol .kbe-rail{ --pill-top: calc(var(--y-top-1) + var(--first-gap)); }
.kbe-shell:has(#kbe-1:checked) .kbe-leftCol .kbe-rail .d1{ top:var(--y-btm-1); }
.kbe-shell:has(#kbe-1:checked) .kbe-leftCol .kbe-rail .d2{ top:var(--y-btm-2); }
.kbe-shell:has(#kbe-1:checked) .kbe-leftCol .kbe-rail .d3{ top:var(--y-btm-3); }

.kbe-shell:has(#kbe-2:checked) .kbe-leftCol .kbe-rail{ --pill-top: calc(var(--y-top-1) + var(--dot-h) + var(--first-gap)); }
.kbe-shell:has(#kbe-2:checked) .kbe-leftCol .kbe-rail .d1{ top:var(--y-top-1); }
.kbe-shell:has(#kbe-2:checked) .kbe-leftCol .kbe-rail .d2{ top:var(--y-btm-1); }
.kbe-shell:has(#kbe-2:checked) .kbe-leftCol .kbe-rail .d3{ top:var(--y-btm-2); }

.kbe-shell:has(#kbe-3:checked) .kbe-leftCol .kbe-rail{ --pill-top: calc(var(--y-top-2) + var(--dot-h) + var(--first-gap)); }
.kbe-shell:has(#kbe-3:checked) .kbe-leftCol .kbe-rail .d1{ top:var(--y-top-2); }
.kbe-shell:has(#kbe-3:checked) .kbe-leftCol .kbe-rail .d2{ top:var(--y-top-1); }
.kbe-shell:has(#kbe-3:checked) .kbe-leftCol .kbe-rail .d3{ top:var(--y-btm-1); }

.kbe-shell:has(#kbe-4:checked) .kbe-leftCol .kbe-rail{ --pill-top: calc(var(--y-top-3) + var(--dot-h) + var(--first-gap)); }
.kbe-shell:has(#kbe-4:checked) .kbe-leftCol .kbe-rail .d1{ top:var(--y-top-3); }
.kbe-shell:has(#kbe-4:checked) .kbe-leftCol .kbe-rail .d2{ top:var(--y-top-2); }
.kbe-shell:has(#kbe-4:checked) .kbe-leftCol .kbe-rail .d3{ top:var(--y-top-1); }

/* ========= MOBILE (≤768px): make everything LEFT-aligned inside tab ========= */
@media (max-width:768px){
  .kbe-shell{ grid-template-columns:1fr; }
  .kbe-right{ display:none; } /* hide desktop side */

  /* Header row stays left */
  .kbe-head{ justify-content:flex-start; text-align:left; }
  .kbe-title{ text-align:left; }

  /* Body padding for nice left gutter */
  .kbe-body{
    padding:6px var(--mobile-body-pad-right) 14px var(--mobile-body-pad-left);
  }
  /* Text to left */
  .kbe-body > .kbe-label,
  .kbe-body > .kbe-desc{ text-align:left; margin-left:0; margin-right:0; }

  /* Services: left aligned row */
  .kbe-services{ justify-content:flex-start; }
  .kbe-services .svc{ justify-content:flex-start; }

  /* Mobile image + CTA: left aligned */
  .kbe-mobBlock{
    display:flex; flex-direction:column; align-items:flex-start; gap:var(--stack-gap);
    margin-top:var(--stack-gap);
  }
  .kbe-imgM{ margin:0; }
  .kbe-ctaM{
    width:100%; max-width:452px; margin:12px 0 0 0;
  }
}