/* SAJIDMK — precision section-number enhancement (08 Nov 2026)
   Isolated from the uploaded site's layout, theme, photo, nav, hero and cards.
   Brings back unique 3D glass digits, visible Toolkit 09 and collision fixes. */

/* Each two-digit number is a separated, non-interactive decorative object. */
html body .section .section-ordinal {
  display:flex;
  position:absolute;
  top:clamp(-48px,-3.5vw,-28px);
  right:clamp(22px,3vw,52px);
  z-index:0;
  gap:clamp(12px,1.3vw,19px);
  width:max-content;
  max-width:none;
  padding:0;
  margin:0;
  align-items:center;
  justify-content:flex-end;
  font-family:var(--ff-display,Inter,system-ui,sans-serif);
  font-size:clamp(80px,8.6vw,129px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:.98;
  letter-spacing:0;
  color:transparent;
  opacity:1;
  pointer-events:none;
  user-select:none;
  isolation:isolate;
  text-shadow:none;
  -webkit-text-stroke:0;
  filter:none;
}
html body .section .section-ordinal[hidden] {display:none !important;}
html body .section-ordinal .ordinal-glyph {
  position:relative;
  display:block;
  flex:0 0 auto;
  text-align:center;
  min-width:.59em;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:0;
  -webkit-text-stroke:1.35px var(--ordinal-color,#91c9c2);
  color:var(--ordinal-color,#91c9c2);
  -webkit-text-fill-color:transparent;
  background:linear-gradient(149deg,
    rgba(255,255,255,.48) 1%,
    color-mix(in srgb,var(--ordinal-color) 34%,transparent) 28%,
    rgba(255,255,255,.075) 50%,
    color-mix(in srgb,var(--ordinal-color) 23%,transparent) 91%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(1.5px 3px 0 rgba(0,0,0,.34))
         drop-shadow(0 0 11px color-mix(in srgb,var(--ordinal-color) 28%,transparent));
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  transition:transform .55s cubic-bezier(.22,1,.36,1),filter .5s ease;
}
html body .section-ordinal .ordinal-glyph::after {
  content:attr(data-digit);
  position:absolute;
  inset:0;
  font:inherit;
  text-align:inherit;
  line-height:inherit;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:.75px rgba(255,255,255,.25);
  opacity:.65;
  transform:translate(-1.1px,-1.5px);
  pointer-events:none;
}
/* Keep the original typography; only reserve the upper-right sky area.
   The number is short enough to finish above the cards. */
@media(min-width:761px){
  html body #diagnostics > .container > h2,
  html body #diagnostics > .container > .section-intro,
  html body #toolkit .tk-head,
  html body #toolkit .tk-seo {
    max-width:calc(100% - clamp(190px,20vw,285px));
  }
}
/* On smaller screens the digits have their own unobstructed line,
   so they never cover a job card, a section heading or a form field. */
@media(max-width:760px){
  html body .section .section-ordinal {
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    max-width:100%;
    margin:0 0 15px;
    padding:0 6px 11px;
    line-height:1.03;
    font-size:clamp(61px,13.1vw,85px);
    gap:clamp(12px,3vw,19px);
    justify-content:flex-end;
    clear:both;
  }
  html body #diagnostics > .container > h2,
  html body #diagnostics > .container > .section-intro,
  html body #toolkit .tk-head,
  html body #toolkit .tk-seo {max-width:100%;}
}
@keyframes sajidOrdinalArrival {
  from {opacity:0; transform:translate3d(0,18px,0) scale(.94);filter:blur(3px);}
  to {opacity:1; transform:translate3d(0,0,0) scale(1);filter:blur(0);}
}
@keyframes sajidOrdinalDrift {
  0%,100% {transform:translate3d(0,0,0);}
  50% {transform:translate3d(0,-4px,0);}
}
@media(prefers-reduced-motion:no-preference){
  html body .section-ordinal.ordinal-lit .ordinal-glyph {
    animation:sajidOrdinalArrival .9s cubic-bezier(.16,1,.3,1) both,
              sajidOrdinalDrift 8s ease-in-out 1.2s infinite;
    animation-delay:calc(var(--digit-order,0)*130ms),calc(1.15s + var(--digit-order,0)*190ms);
  }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html body .section:hover .ordinal-glyph {
    filter:drop-shadow(2px 4px 1px rgba(0,0,0,.35))
           drop-shadow(0 0 16px color-mix(in srgb,var(--ordinal-color) 45%,transparent));
  }
}
@media(prefers-reduced-motion:reduce){
  html body .section-ordinal .ordinal-glyph {animation:none !important;transition:none !important;}
}
@media print { html body .section .section-ordinal {display:none !important;} }