/* SAJIDMK — Restore the original landscape, real see-through glass and full portrait.
   An additive correction to the Nov 2026 Crystal Glass redesign.
   Keeps the gold accents, featured work, site animations and CMS behaviours. */
:root {
  --glass-floor: .08;
  --glass-ceil: .32;
  --glass-surface: rgba(9, 11, 16, .18);
  --glass-surface-strong: rgba(9, 11, 16, .32);
  --glass-tint: rgba(9, 11, 16, .18);
  --glass-tint-strong: rgba(9, 11, 16, .30);
}
/* The former CSS explicitly removed the landscape. Use the user's actual asset. */
html body .bg-field::before {
  background: url('assets/bg-landscape.jpg') center 42% / cover no-repeat !important;
  filter: saturate(1.1) brightness(.86) contrast(1.025) !important;
}
html body .bg-field::after {
  background:
    radial-gradient(ellipse 70% 50% at 76% 11%, rgba(23, 17, 21, .03), transparent 76%),
    linear-gradient(180deg, rgba(5, 7, 12, .26) 0%, rgba(5, 7, 12, .30) 42%, rgba(5, 7, 12, .40) 100%) !important;
}
/* These are not solid fills: the landscape remains visible through each material. */
html body :is(.section,.recruiter-bar,.footer-panel) {
  background:linear-gradient(148deg,rgba(8,10,16,.18),rgba(8,10,16,.31)) !important;
  background-color:transparent !important;
  border-color:rgba(245,227,196,.24);
  border-top-color:rgba(255,249,233,.45);
  box-shadow:0 20px 60px -36px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.17) !important;
  -webkit-backdrop-filter:blur(var(--section-blur,18px)) saturate(1.23);
  backdrop-filter:blur(var(--section-blur,18px)) saturate(1.23);
}
html body :is(.glass,.glass-clear,.glass-tight) {
  background:linear-gradient(149deg,rgba(255,255,255,.10) 0%,rgba(14,17,23,.18) 27%,rgba(8,10,17,.27) 100%) !important;
  background-color:transparent !important;
  border-color:rgba(245,228,198,.27);
  border-top-color:rgba(255,252,235,.58);
  box-shadow:0 20px 64px -39px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.22) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.40);
  backdrop-filter:blur(18px) saturate(1.40);
}
/* Remove the particularly opaque backing from the redesigned hero and cards. */
html body :is(.vision-main-pane,.vision-console-frame .term-window,.vision-identity,.vision-project-card) {
  background:
    linear-gradient(128deg,rgba(255,255,255,.14),rgba(255,255,255,.015) 26%,transparent 47%),
    linear-gradient(151deg,rgba(12,15,21,.24),rgba(7,9,16,.36)) !important;
  background-color:transparent !important;
  border-color:rgba(242,216,167,.36) !important;
  border-top-color:rgba(255,249,224,.68) !important;
  -webkit-backdrop-filter:blur(19px) saturate(1.35);
  backdrop-filter:blur(19px) saturate(1.35);
  box-shadow:0 22px 64px -35px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,255,255,.25),0 0 34px -30px rgba(237,184,70,.4) !important;
}
html body .vision-main-pane::before {
  background:radial-gradient(ellipse 430px 220px at 79% 101%,rgba(225,171,75,.095),transparent 74%) !important;
}
html body :is(#topNav,.mob-drawer) {
  background:linear-gradient(140deg,rgba(10,12,19,.38),rgba(7,9,15,.50)) !important;
  background-color:transparent !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.45);
  backdrop-filter:blur(22px) saturate(1.45);
}
html body #topNav .nav-more-menu {
  background:linear-gradient(145deg,rgba(19,17,23,.62),rgba(9,11,17,.70)) !important;
}
html body :is(.status-strip,.hero-photo-tag,.status-chip,.hero-client-teaser,.vision-skills>span,.vision-card-icon,.vision-project-tags span) {
  background:linear-gradient(130deg,rgba(255,255,255,.09),rgba(12,15,20,.18)) !important;
  background-color:transparent !important;
}
html body .vision-main-pane .status-strip,
html body .vision-main-pane .hero-client-teaser,
html body .vision-online-row .status-chip { background:rgba(8,12,18,.20) !important; }
html body .vision-actions .btn-ghost {background:rgba(10,13,20,.23) !important;}
/* Preserve bold gold CTAs, legible copy and functional pop-ups. */
html body .vision-main-pane :is(h1,h2,h3),
html body .vision-console-frame .term-out,
html body .vision-project-card :is(strong,.vision-project-desc),
html body .vision-identity-copy {text-shadow:0 2px 13px rgba(0,0,0,.59)}
/* Restore a prominently sized, UNCROPPED-IN-PROPORTION portrait card. */
.vision-stage-aside {gap:14px;}
html body .vision-stage-aside .vision-identity {
  order:-1;
  width:100%;
  min-height:246px;
  padding:13px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(14px,2vw,25px);
  border-radius:24px;
}
.vision-identity .hero-photo-wrap {
  width:190px;
  max-width:190px;
  min-width:190px;
  flex:0 0 190px;
}
html body .vision-identity .hero-photo {
  display:block;
  width:190px;
  height:220px;
  aspect-ratio:auto;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(249,231,193,.56) !important;
  border-radius:17px;
  box-shadow:0 12px 30px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.2) !important;
  background:transparent !important;
  transform:none !important;
}
html body .vision-identity .hero-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
  aspect-ratio:auto;
  border:0;
  border-radius:16px;
  filter:saturate(1.04);
}
.vision-identity-copy{min-width:0;display:flex;flex-direction:column;gap:13px;align-items:flex-start;}
html body .vision-identity-copy .hero-photo-tag{
  position:static;
  display:flex;
  gap:10px;
  padding:0;
  margin:0;
  border:0;
  box-shadow:none !important;
  background:transparent !important;
  min-width:0;
  transform:none;
}
.vision-identity-copy .hero-photo-tag .ping{width:8px;height:8px;align-self:center;}
.vision-identity-copy .hero-photo-tag .name{font-size:clamp(16px,1.45vw,21px);line-height:1.2;white-space:normal;}
.vision-identity-copy .hero-photo-tag .role{font-size:12px;line-height:1.55;color:#f0e9dd;}
.vision-identity-copy .vision-identity-link{
  display:block;
  white-space:normal;
  text-align:left;
  font-size:12px;
  color:#ffe5aa;
}
html body .vision-console-frame .term-window{min-height:285px;}
html body .vision-console-frame .term-out{min-height:188px;}
/* Smaller screens keep the photo as a real portrait, not the prior 55px avatar. */
@media(max-width:980px){
  html body .vision-stage-aside .vision-identity{min-height:238px;}
  html body .vision-identity .hero-photo{width:185px;height:210px;}
  .vision-identity .hero-photo-wrap{width:185px;max-width:185px;min-width:185px;flex-basis:185px;}
}
@media(max-width:680px){
  html body :is(.section,.recruiter-bar,.footer-panel){
    background:linear-gradient(140deg,rgba(7,9,15,.24),rgba(6,8,15,.38)) !important;
    background-color:transparent !important;
  }
  html body :is(.glass,.glass-clear,.glass-tight){
    background:linear-gradient(140deg,rgba(255,255,255,.09),rgba(7,9,16,.29)) !important;
    background-color:transparent !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.28);
    backdrop-filter:blur(14px) saturate(1.28);
  }
  html body .vision-stage-aside .vision-identity{
    min-height:204px;
    padding:11px;
    gap:16px;
    border-radius:22px;
  }
  .vision-identity .hero-photo-wrap{width:140px;min-width:140px;max-width:140px;flex-basis:140px;}
  html body .vision-identity .hero-photo{width:140px;height:181px;border-radius:15px;}
  html body .vision-identity .hero-photo img{border-radius:14px;}
  .vision-identity-copy .hero-photo-tag .name{font-size:17px;}
  .vision-identity-copy .hero-photo-tag .role{font-size:11px;}
  .vision-identity-copy .vision-identity-link{font-size:11px;}
}
@media(max-width:370px){
  html body .vision-stage-aside .vision-identity{gap:11px;}
  .vision-identity .hero-photo-wrap{width:120px;min-width:120px;max-width:120px;flex-basis:120px;}
  html body .vision-identity .hero-photo{width:120px;height:170px;}
  .vision-identity-copy .hero-photo-tag .name{font-size:15px;}
}
@media(prefers-reduced-motion:reduce){
  html body .bg-field::before,html body .bg-field::after{animation:none !important;}
}
@media print{
  html body .bg-field::before{background:none !important;}
  html body :is(.section,.recruiter-bar,.footer-panel,.glass,.glass-clear,.glass-tight){background:white !important;box-shadow:none !important;color:#111 !important;}
}
/* Put the real portrait beside the hero on desktop, and ahead of the long
   introduction on phones so visitors actually see it on the first screen. */
@media screen {
  .vision-stage {
    grid-template-areas:"intro identity" "intro terminal";
    align-items:stretch;
    row-gap:14px;
  }
  .vision-stage-aside {display:contents;}
  html body .vision-main-pane {grid-area:intro;}
  html body .vision-stage-aside .vision-identity {grid-area:identity;min-height:277px;}
  html body .vision-console-frame {grid-area:terminal;min-height:316px;}
  .vision-identity .hero-photo-wrap {width:218px;min-width:218px;max-width:218px;flex-basis:218px;}
  html body .vision-identity .hero-photo {width:218px;height:252px;}
}
@media screen and (max-width:1179px) and (min-width:981px) {
  .vision-identity .hero-photo-wrap {width:173px;min-width:173px;max-width:173px;flex-basis:173px;}
  html body .vision-identity .hero-photo {width:173px;height:224px;}
  html body .vision-stage-aside .vision-identity{min-height:250px;}
}
@media screen and (max-width:980px){
  .vision-stage{grid-template-columns:1fr;grid-template-areas:"identity" "intro" "terminal";row-gap:15px;}
  .vision-identity .hero-photo-wrap{width:190px;min-width:190px;max-width:190px;flex-basis:190px;}
  html body .vision-identity .hero-photo{width:190px;height:220px;}
  html body .vision-stage-aside .vision-identity{min-height:248px;}
  html body .vision-console-frame{min-height:285px;}
}
@media screen and (max-width:680px){
  .vision-identity .hero-photo-wrap{width:150px;min-width:150px;max-width:150px;flex-basis:150px;}
  html body .vision-identity .hero-photo{width:150px;height:193px;}
  html body .vision-stage-aside .vision-identity{min-height:218px;}
}
@media screen and (max-width:370px){
  .vision-identity .hero-photo-wrap{width:120px;min-width:120px;max-width:120px;flex-basis:120px;}
  html body .vision-identity .hero-photo{width:120px;height:170px;}
  html body .vision-stage-aside .vision-identity{min-height:196px;}
}