/* ============================================================
   HERO VISUAL — the lab's own guides
   ============================================================ */
.hero3d{position:relative;aspect-ratio:1/.92;width:100%;direction:ltr}
/* contain, not cover: the picture is four separate objects with air planned
   between them, and cover crops whichever one is nearest an edge */
/* Visible by default; the fade is opt-in, applied only where a script is
   running to take it off again. The first cut had it the other way round —
   opacity:0 with a `.no-js` escape — and the page marks JS with a `js` class
   it ADDS, so `.no-js` never existed and the hero was an empty navy box for
   anyone whose script did not run. */
.hero3d__shot{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;transition:opacity .7s var(--ease)}
html.js .hero3d__shot{opacity:0}
html.js .hero3d__shot.in{opacity:1}

/* the floating glass labels */
.hero3d__hud,.hero3d__meta{position:absolute;z-index:2;display:flex;gap:8px;
  pointer-events:none;flex-wrap:wrap}
.hero3d__hud{top:14px;left:14px;max-width:70%}
.hero3d__meta{bottom:14px;right:14px;flex-direction:column;align-items:flex-end;gap:7px;text-align:end}
.h3tag,.h3ok,.hero3d__meta > span{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:rgba(200,214,235,.72);
  border:1px solid rgba(150,180,225,.20);border-radius:100px;padding:5px 11px;
  background:rgba(12,24,48,.45);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.h3tag i{width:5px;height:5px;border-radius:50%;background:#3FD9A4;flex:none}
.h3ok i{width:5px;height:5px;border-radius:50%;background:#3FD9A4;flex:none;
  box-shadow:0 0 0 3px rgba(63,217,164,.16)}
.hero3d__meta > span{border-color:rgba(150,180,225,.14)}

/* the line saying what the picture is. It sits under the frame, not on it:
   the claim "our own lab" has to be readable, not a watermark. */
.hero3d__cap{position:absolute;z-index:2;left:0;right:0;bottom:-30px;margin:0;
  font-size:11.5px;line-height:1.5;color:rgba(190,205,228,.52);text-align:center}

/* a mono face with letter-spacing pulls Arabic letters apart — the Latin
   pieces (the case number, CBCT + STL) keep it, the Arabic does not */
html[dir="rtl"] .h3tag,
html[dir="rtl"] .h3ok{font-family:inherit;letter-spacing:0;font-size:11.5px}
html[dir="rtl"] .h3tag .ltr,
html[dir="rtl"] .hero3d__meta > span:first-child{font-family:var(--font-mono);letter-spacing:.06em;font-size:10.5px}

@media (max-width:980px){ .hero3d{aspect-ratio:1/.82} }
/* The three chips sit over the top of the plate. Below about 1150px the row
   wraps onto a second line, and the second line lands on the first guide —
   which is the one collision the plate cannot design its way out of, because
   the picture is centred in its own cell and the chips are not. So the third
   chip goes before the row can wrap. It is the least important of the three:
   the picture below it IS the surgical guide. */
@media (max-width:1150px){ .hero3d__hud .h3tag:nth-child(3){display:none} }
@media (max-width:640px){
  .hero3d{aspect-ratio:1/.86}
  /* The caption goes back into normal flow on a phone, and for that to mean
     anything the frame has to go into normal flow with it.

     It did not, and the result was the worst-looking thing on the mobile
     site: `.hero3d` takes its height from an aspect-ratio and the photograph
     inside it is absolutely positioned, so making the caption `static` left
     it as the only in-flow child of that box — which put it at the TOP of
     the frame, underneath the photograph and beneath the glass chip, with
     three lines of grey text showing through the guides. The sentence that
     carries the site's strongest claim, that these are our own lab's guides
     and every dimension is measured rather than typed, was unreadable on
     every phone.

     So below 640px the frame stops being a fixed-ratio box with a picture
     pinned inside it and becomes what it looks like: a picture, with a line
     of text under it. The chips stay absolute over the image, which is where
     they belong. */
  .hero3d{aspect-ratio:auto}
  .hero3d__shot{position:static;width:100%;height:auto;margin-top:38px}
  /* The case-number and status chips were pinned to the bottom-right of the
     frame. Once the frame grew a caption underneath it, "the bottom of the
     frame" moved down onto that caption and the two printed over each other.
     They join the flow as well: picture, then the two chips, then the line
     that explains the picture. Same three things, in the order a reader
     would ask for them. */
  .hero3d__meta{position:static;flex-direction:row;align-items:center;
    justify-content:flex-start;flex-wrap:wrap;gap:8px;margin-top:12px;text-align:start}
  .hero3d__cap{position:static;margin-top:14px;text-align:start;
    color:rgba(205,218,238,.72)}
  /* One row of chips, and the picture gets its own headroom underneath them.
     The chips are absolute and the picture fills the frame, so on a phone the
     two were always going to sit on each other; giving the picture a top inset
     is the only fix that does not move the chips off the frame entirely. */
  .hero3d__hud{max-width:none;flex-wrap:nowrap}
  .hero3d__hud .h3tag:nth-child(3){display:none}
  /* superseded by the static-flow rule above: `inset` has no effect on a
     statically positioned element, and the 38px of headroom the chips
     need is now a margin instead. */
}
/* Below 400px even two chips on one nowrap line are wider than the screen,
   and because the row is absolutely positioned it did not push a scrollbar —
   it printed the second chip half off the frame and over the caption. The
   rule above already decided which chip matters least when there is no room;
   this simply applies the same judgement one step further. What survives is
   "CBCT + STL", which names what the dentist has to send — the one thing on
   the plate a caption cannot show. */
@media (max-width:400px){
  .hero3d__hud .h3tag:nth-child(2){display:none}
}
@media print{ .hero3d__hud,.hero3d__meta{display:none} }