/* BMD Legacy — the 3D workspace in the page heroes (v39).
   A stack of glass sheets in perspective beside the hero text: the sheet for that service in front, a faint drafting
   sheet behind it, two notes nearer the viewer and a lit floor below. Square edges, like the rest of the site.
   hero3d.js tilts the stack toward the pointer; everything here works without it. The scene is an illustration:
   it is aria-hidden and its figures are examples. */
@property --h3d-tx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --h3d-ty{syntax:'<angle>';inherits:false;initial-value:0deg}

.h3d{--h3d-glass:rgba(11,43,66,.84);--h3d-glass-2:rgba(5,25,40,.92);--h3d-edge:rgba(150,226,245,.26);--h3d-text:#e7f5fa;
  --h3d-mute:#8db1c3;--h3d-cyan:#51d2f0;--h3d-blue:#2f86ff;--h3d-ok:#5fe0b0;--h3d-warn:#f2c46d;
  position:absolute;z-index:1;top:50%;right:-12px;width:min(580px,46%);height:460px;transform:translateY(-50%);
  pointer-events:none;color:var(--h3d-text);font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}
[dir=rtl] .h3d{right:auto;left:-12px}
.page-hero.has-3d>.container{min-height:440px}
.page-hero.has-3d .eyebrow,.page-hero.has-3d h1,.page-hero.has-3d .lead{max-width:min(640px,54%)}
@media(min-width:1101px){.page-hero.has-3d h1{font-size:clamp(46px,4.5vw,66px)}}
.page-hero.has-3d .row{position:relative;z-index:2}

.h3d-stage{position:absolute;inset:0;perspective:1400px;perspective-origin:45% 40%}
.h3d-rig{position:absolute;left:50%;top:50%;width:440px;height:296px;margin:-160px 0 0 -220px;transform-style:preserve-3d;
  transform:rotateX(calc(9deg + var(--h3d-ty))) rotateY(calc(-18deg + var(--h3d-tx)))}
[dir=rtl] .h3d-rig{transform:rotateX(calc(9deg + var(--h3d-ty))) rotateY(calc(18deg + var(--h3d-tx)))}
.h3d-rig>*{position:absolute;backface-visibility:hidden}

/* the floor: a lit plane under the stack, with one ring of light and the drafting grid running into the distance */
.h3d-floor{left:50%;top:50%;width:680px;height:680px;margin:-340px 0 0 -340px;transform:translateY(190px) rotateX(72deg);
  background:radial-gradient(closest-side,rgba(81,210,240,.30),rgba(47,134,255,.10) 55%,transparent 100%),
    repeating-linear-gradient(90deg,rgba(150,226,245,.07) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(0deg,rgba(150,226,245,.07) 0 1px,transparent 1px 48px);
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent 100%);mask:radial-gradient(closest-side,#000 40%,transparent 100%)}
.h3d-floor:after{content:'';position:absolute;inset:22%;border:1px solid rgba(105,215,237,.45);border-radius:50%;
  box-shadow:0 0 30px rgba(81,210,240,.35),inset 0 0 30px rgba(81,210,240,.18)}

/* the sheets */
.h3d-back{inset:0;transform:translate3d(46px,-40px,-90px);border:1px solid rgba(150,226,245,.16);
  background:linear-gradient(160deg,rgba(14,52,78,.42),rgba(6,27,43,.28)),
    repeating-linear-gradient(0deg,rgba(150,226,245,.06) 0 1px,transparent 1px 22px)}
[dir=rtl] .h3d-back{transform:translate3d(-46px,-40px,-90px)}
.h3d-main{inset:0;overflow:hidden;padding:18px 20px 16px;display:flex;flex-direction:column;
  background:linear-gradient(158deg,var(--h3d-glass),var(--h3d-glass-2));border:1px solid var(--h3d-edge);
  box-shadow:inset 0 1px 0 rgba(213,246,253,.32),inset 1px 0 0 rgba(213,246,253,.10),0 50px 90px -30px rgba(0,0,0,.75)}
.h3d-glare{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(175,238,252,.16),transparent);transform:translate(320px,40px)}
/* one pass of light across the glass when the stack has come together */
.h3d-main:after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:38%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(190,242,255,.16) 45%,rgba(190,242,255,.04) 60%,transparent);transform:translateX(-120%) skewX(-12deg)}

.h3d-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(150,226,245,.14)}
.h3d-head b{font-size:14px;font-weight:600;letter-spacing:.01em;color:#fff}
.h3d-head span{font-size:11px;color:var(--h3d-mute);white-space:nowrap}
.h3d-body{flex:1;min-height:0}
/* lists spread over the whole sheet rather than gathering at the top */
.h3d-rows,.h3d-dates,.h3d-tiles{height:100%;grid-auto-rows:1fr}
.h3d-steps,.h3d-check,.h3d-meters,.h3d-switches{height:100%;align-content:space-evenly}
.h3d-foot{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding-inline-end:120px;font-size:11px;color:var(--h3d-mute)}  /* clear of the note in front */
.h3d-foot i,.h3d-tick{flex:none;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(95,224,176,.16);border:1px solid rgba(95,224,176,.6)}
.h3d-foot i:before,.h3d-tick:before{content:'';width:6px;height:3px;border:solid var(--h3d-ok);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg)}

/* the notes in front */
.h3d-chip{min-width:150px;padding:11px 14px;display:grid;gap:3px;background:linear-gradient(160deg,rgba(24,66,94,.92),rgba(9,36,56,.94));
  border:1px solid rgba(150,226,245,.32);box-shadow:inset 0 1px 0 rgba(213,246,253,.4),0 26px 50px -16px rgba(0,0,0,.7)}
.h3d-chip span{font-size:10.5px;color:var(--h3d-mute)}
.h3d-chip b{font-size:15px;font-weight:600;color:#fff;white-space:nowrap}
.h3d-chip.is-ok b{color:var(--h3d-ok)}
.h3d-chip.is-bright{background:linear-gradient(150deg,#1f8fff,#0561da 70%);border-color:rgba(190,230,255,.6)}
.h3d-chip.is-bright span{color:#d6ebff}
.h3d-a{left:-64px;top:-38px;transform:translateZ(80px)}
.h3d-b{right:-46px;bottom:-34px;transform:translateZ(130px)}
[dir=rtl] .h3d-a{left:auto;right:-64px}
[dir=rtl] .h3d-b{right:auto;left:-46px}

/* ---- what the sheets show ---- */
.h3d-rows{margin:0;display:grid;gap:0}
.h3d-rows div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px dashed rgba(150,226,245,.12)}
.h3d-rows dt{color:var(--h3d-mute)}
.h3d-rows dd{margin:0;font-weight:500;color:var(--h3d-text);direction:ltr}
.h3d-rows .is-total{border-bottom:0;border-top:1px solid rgba(150,226,245,.3);margin-top:4px;padding-top:10px}
.h3d-rows .is-total dt{color:#fff;font-weight:600}
.h3d-rows .is-total dd{font-size:16px;color:var(--h3d-cyan)}

.h3d-steps{list-style:none;margin:0;padding:0;display:grid;gap:13px;position:relative}
.h3d-steps:before{content:'';position:absolute;inset-inline-start:7.5px;top:8px;bottom:8px;width:1px;background:rgba(150,226,245,.25)}
.h3d-steps li{position:relative;display:flex;align-items:center;gap:12px;color:var(--h3d-mute)}
.h3d-steps li:before{content:'';flex:none;width:15px;height:15px;border-radius:50%;border:1px solid rgba(150,226,245,.4);background:var(--h3d-glass-2);position:relative;z-index:1}
.h3d-steps .is-done{color:var(--h3d-text)}
.h3d-steps .is-done:before{background:radial-gradient(circle,var(--h3d-ok) 0 3px,rgba(95,224,176,.18) 4px);border-color:rgba(95,224,176,.7)}
.h3d-steps .is-now{color:#fff;font-weight:600}
.h3d-steps .is-now:before{background:radial-gradient(circle,var(--h3d-cyan) 0 3px,rgba(81,210,240,.15) 4px);border-color:var(--h3d-cyan);box-shadow:0 0 0 4px rgba(81,210,240,.14)}
.h3d-steps em{font-style:normal;margin-inline-start:auto;font-size:10.5px;font-weight:500;color:var(--h3d-cyan)}

.h3d-check{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.h3d-check li{display:flex;align-items:center;gap:10px;color:var(--h3d-text)}
.h3d-check em{font-style:normal;margin-inline-start:auto;font-size:10.5px;color:var(--h3d-mute);white-space:nowrap}
.h3d-check .is-due .h3d-tick{background:rgba(242,196,109,.14);border-color:rgba(242,196,109,.7)}
.h3d-check .is-due .h3d-tick:before{width:4px;height:4px;border:0;border-radius:50%;background:var(--h3d-warn);transform:none}
.h3d-check .is-due em{color:var(--h3d-warn)}

.h3d-chart{display:block;width:100%;height:auto;overflow:visible}
.h3d-chart .a{fill:var(--h3d-cyan)}
.h3d-chart .b{fill:rgba(141,177,195,.38)}
.h3d-chart .grid{stroke:rgba(150,226,245,.12);stroke-width:1}
.h3d-chart .line{fill:none;stroke:var(--h3d-cyan);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.h3d-chart .area{fill:url(#h3dFade)}
.h3d-chart .mark{stroke:rgba(255,255,255,.55);stroke-width:1;stroke-dasharray:3 3}
.h3d-chart .dot{fill:#fff;stroke:var(--h3d-cyan);stroke-width:2}
.h3d-chart .low{fill:var(--h3d-warn)}
.h3d-kpi{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:10px}
.h3d-kpi span{color:var(--h3d-mute)}
.h3d-kpi b{font-size:20px;font-weight:500;color:#fff}
.h3d-legend{display:flex;gap:14px;margin-bottom:8px;font-size:10.5px;color:var(--h3d-mute)}
.h3d-legend span:before{content:'';display:inline-block;width:8px;height:8px;margin-inline-end:6px;background:var(--h3d-cyan)}
.h3d-legend span+span:before{background:rgba(141,177,195,.5)}

.h3d-meters{display:grid;gap:12px}
.h3d-meters div{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.h3d-meters span{color:var(--h3d-text)}
.h3d-meters b{font-weight:500;color:var(--h3d-cyan);direction:ltr}
.h3d-meters svg{grid-column:1/-1;width:100%;height:6px;display:block}
.h3d-meters .track{fill:rgba(150,226,245,.12)}
.h3d-meters .fill{fill:var(--h3d-cyan)}
.h3d-meters .is-top .fill{fill:var(--h3d-ok)}
.h3d-meters .is-top b{color:var(--h3d-ok)}

.h3d-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.h3d-tiles span{position:relative;padding:12px 10px 10px;border:1px solid rgba(150,226,245,.16);background:rgba(150,226,245,.04);font-size:11.5px;color:var(--h3d-text)}
.h3d-tiles span:after{content:'';position:absolute;top:9px;inset-inline-end:9px;width:6px;height:6px;border-radius:50%;background:var(--h3d-ok);box-shadow:0 0 8px var(--h3d-ok)}
.h3d-tiles .is-busy:after{background:var(--h3d-cyan);box-shadow:0 0 8px var(--h3d-cyan)}

.h3d-switches{display:grid;gap:10px}
.h3d-switches div{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--h3d-text)}
.h3d-switches i{flex:none;width:30px;height:16px;border-radius:8px;background:rgba(150,226,245,.18);position:relative}
.h3d-switches i:after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:12px;height:12px;border-radius:50%;background:#9db7c5}
.h3d-switches .is-on i{background:var(--h3d-blue)}
.h3d-switches .is-on i:after{inset-inline-start:16px;background:#fff}
.h3d-switches .is-off span{color:var(--h3d-mute)}

.h3d-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px}
.h3d-days span{padding:8px 0;text-align:center;border:1px solid rgba(150,226,245,.16);color:var(--h3d-mute);font-size:11px}
.h3d-days .is-on{border-color:var(--h3d-cyan);color:#fff;background:rgba(81,210,240,.12)}
.h3d-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.h3d-slots span{padding:9px 0;text-align:center;border:1px solid rgba(150,226,245,.16);font-weight:500;direction:ltr}
.h3d-slots .is-on{background:var(--h3d-blue);border-color:#6fb2ff;color:#fff}
.h3d-slots .is-gone{color:rgba(141,177,195,.45);text-decoration:line-through}

.h3d-dates{display:grid;gap:0}
.h3d-dates div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:6px 8px;border-bottom:1px dashed rgba(150,226,245,.12)}
.h3d-dates div:last-child{border-bottom:0}
.h3d-dates b{font-weight:600;color:var(--h3d-cyan);font-size:12px}
.h3d-dates span{color:var(--h3d-text)}
.h3d-dates .is-next{background:linear-gradient(90deg,rgba(81,210,240,.12),transparent)}
[dir=rtl] .h3d-dates .is-next{background:linear-gradient(270deg,rgba(81,210,240,.12),transparent)}

.h3d-week{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;height:100%}
.h3d-week div{display:flex;flex-direction:column;gap:6px}
.h3d-week small{font-size:10px;color:var(--h3d-mute);padding-bottom:2px}
.h3d-week span{padding:9px 6px 18px;font-size:10px;font-weight:600;border-inline-start:2px solid var(--h3d-cyan);background:rgba(81,210,240,.10);color:#dff6fc}
.h3d-week .li{border-color:#3d8bff;background:rgba(61,139,255,.14)}
.h3d-week .ig{border-color:#d36ad6;background:rgba(211,106,214,.12)}
.h3d-week .fb{border-color:#6f86ff;background:rgba(111,134,255,.12)}
.h3d-week .tall{padding-bottom:46px}

.h3d-net{position:relative;height:100%}
.h3d-net svg{position:absolute;inset:0;width:100%;height:100%}
.h3d-net line{stroke:rgba(81,210,240,.45);stroke-width:1;stroke-dasharray:4 4}
.h3d-net span{position:absolute;padding:7px 10px;border:1px solid rgba(150,226,245,.22);background:rgba(8,33,52,.95);font-size:11px;white-space:nowrap;transform:translate(-50%,-50%)}
.h3d-net .hub{padding:10px 14px;border-color:var(--h3d-cyan);background:rgba(10,58,86,.98);font-weight:600;color:#fff;box-shadow:0 0 24px rgba(81,210,240,.25)}
.h3d-net .n0{left:50%;top:50%}.h3d-net .n1{left:16%;top:14%}.h3d-net .n2{left:84%;top:14%}.h3d-net .n3{left:12%;top:84%}.h3d-net .n4{left:88%;top:84%}.h3d-net .n5{left:50%;top:6%}

.h3d-browser{height:100%;display:flex;flex-direction:column;border:1px solid rgba(150,226,245,.18)}
.h3d-browser header{display:flex;align-items:center;gap:6px;padding:7px 9px;border-bottom:1px solid rgba(150,226,245,.14);background:rgba(150,226,245,.05)}
.h3d-browser header i{width:7px;height:7px;border-radius:50%;background:rgba(150,226,245,.3)}
.h3d-browser header span{margin-inline-start:8px;flex:1;padding:3px 8px;background:rgba(0,0,0,.25);font-size:10px;color:var(--h3d-mute);direction:ltr;text-align:start}
.h3d-browser .page{flex:1;padding:14px;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto auto 1fr;gap:9px 14px}
.h3d-browser .page i{display:block;background:rgba(150,226,245,.12)}
.h3d-browser .t1{grid-area:1/1;height:12px;width:92%}
.h3d-browser .t2{grid-area:2/1;height:8px;width:70%}
.h3d-browser .btns{grid-area:3/1;height:16px;width:46%;margin-top:4px;background:var(--h3d-blue)!important}
.h3d-browser .img{grid-area:1/2/4/3;min-height:78px;background:linear-gradient(140deg,rgba(81,210,240,.38),rgba(47,134,255,.22))!important}
.h3d-browser .cards{grid-area:4/1/5/3;display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;background:none!important}
.h3d-browser .cards b{display:block;min-height:64px;background:rgba(150,226,245,.08);border-top:2px solid var(--h3d-cyan)}

/* ---- entrance (once) and drift: only when the site's motion is on ---- */
.motion-ready:not(.motion-paused):not(.motion-reduced) .h3d-floor{animation:h3d-fade 1.6s var(--motion-ease) .3s both}
.motion-ready:not(.motion-paused):not(.motion-reduced) .h3d-back{animation:h3d-in 1.3s var(--motion-ease) .45s both}
.motion-ready:not(.motion-paused):not(.motion-reduced) .h3d-main{animation:h3d-in 1.3s var(--motion-ease) .6s both}
.motion-ready:not(.motion-paused):not(.motion-reduced) .h3d-a{animation:h3d-in 1.2s var(--motion-ease) .85s both}
.motion-ready:not(.motion-paused):not(.motion-reduced) .h3d-b{animation:h3d-in 1.2s var(--motion-ease) 1s both}
.motion-ready:not(.motion-paused):not(.motion-reduced) .h3d-main:after{animation:h3d-sweep 1.4s ease-in-out 1.7s both}
.motion-ready:not(.motion-paused):not(.motion-reduced) .h3d-rig{animation:h3d-float 9s ease-in-out 2.2s infinite}
.motion-suspended .h3d *,.motion-suspended .h3d-rig{animation-play-state:paused!important}
@keyframes h3d-in{from{opacity:0;translate:0 26px -240px}to{opacity:1;translate:0 0 0}}
@keyframes h3d-fade{from{opacity:0}to{opacity:1}}
@keyframes h3d-sweep{0%{opacity:0;transform:translateX(-120%) skewX(-12deg)}15%{opacity:1}100%{opacity:0;transform:translateX(330%) skewX(-12deg)}}
@keyframes h3d-float{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* the partner page keeps its own card; it simply stands in the same space. `rotate` (not `transform`, which the
   card's entrance animation owns) turns it toward the text and the pointer. */
.partner-hero .split{perspective:1300px}
.partner-card.h3d-card{rotate:y calc(-11deg + var(--h3d-tx));box-shadow:inset 0 1px 0 rgba(213,246,253,.3),0 50px 90px -30px rgba(0,0,0,.7)}
[dir=rtl] .partner-card.h3d-card{rotate:y calc(11deg + var(--h3d-tx))}

/* ---- smaller screens: the scene moves under the buttons ---- */
@media(max-width:1100px){
  .page-hero.has-3d>.container{min-height:0}
  .page-hero.has-3d .eyebrow,.page-hero.has-3d h1,.page-hero.has-3d .lead{max-width:none}
  .h3d,[dir=rtl] .h3d{position:relative;top:auto;left:auto;right:auto;transform:none;width:100%;max-width:600px;height:420px;margin:24px auto -30px}
  .partner-card.h3d-card,[dir=rtl] .partner-card.h3d-card{rotate:none}
}
@media(max-width:700px){
  .h3d,[dir=rtl] .h3d{height:330px;margin:14px auto -34px}
  .h3d-rig{scale:.74}
  .h3d-a{left:-20px}.h3d-b{right:-10px}
  [dir=rtl] .h3d-a{right:-20px}[dir=rtl] .h3d-b{left:-10px}
  .booking-hero .h3d,.pricing-hero .h3d{display:none}
}
@media(max-width:400px){.h3d,[dir=rtl] .h3d{height:300px}.h3d-rig{scale:.66}}
@media print{.h3d{display:none}}
