/* V7: restrained editorial photography + precise alignment.
   Visual correction: keep the original photographs readable; never ghost a photograph
   into an unrelated second photograph behind the subject. */
:root { --editorial-navy:#061827; --editorial-deep:#041221; }
/* Calm visual base. The newsroom is a subtle background to the copy, not behind the portrait. */
#overview {
  isolation:isolate; position:relative;
  background: radial-gradient(ellipse at 79% 40%,rgba(12,73,102,.28),transparent 40%),
              linear-gradient(110deg,#041221 0%,#071a2b 59%,#061827 100%)!important;
  background-image:radial-gradient(ellipse at 79% 40%,rgba(12,73,102,.28),transparent 40%),linear-gradient(110deg,#041221 0%,#071a2b 59%,#061827 100%)!important;
  padding:45px 0 62px!important;
}
#overview::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(4,18,33,.65) 0%,rgba(4,18,33,.83) 34%,#061827 86%),
              url('images/broadcast-wide.webp') left 50% / cover no-repeat!important;
  opacity:.65;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 81%);
  mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 81%);
}
#overview::after {
  content:""; position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 77% 30%,rgba(26,191,208,.07),transparent 40%);
}
#overview>.max-w-7xl {position:relative;z-index:2;}
#overview .grid.lg\\:grid-cols-12 {gap:clamp(24px,3.2vw,54px)!important;align-items:center!important;}
#overview .hero-copy{position:relative;z-index:3;}
#overview .hero-side{display:flex!important;justify-content:center!important;align-items:center!important;isolation:isolate;transform:none!important;overflow:visible;}
#overview .hero-side::before{
  content:"";position:absolute;inset:8% 1% 8%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(4,133,165,.14),transparent 73%);
  filter:blur(18px)
}
/* A clean, opaque portrait with controlled feather ONLY at the outside edges. */
#overview .hero-editorial-image{
  position:relative;display:block;width:100%!important;max-width:460px!important;
  height:clamp(450px,44vw,580px)!important;margin:0 auto!important;
  background:var(--editorial-navy)!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;overflow:hidden!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 11%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 11%,#000 80%,transparent 100%);
  mask-composite:intersect;
}
#overview .hero-editorial-image img{
  width:100%!important;height:100%!important;display:block;object-fit:cover!important;
  object-position:center 20%!important;filter:brightness(1.04) contrast(1.01) saturate(.98)!important;
  transition:transform .75s ease!important;
}
#overview .hero-editorial-image::after {
  background:linear-gradient(180deg,transparent 70%,rgba(6,24,39,.13))!important;
  pointer-events:none;
}
#overview .hero-editorial-image .frame-glint{display:none!important;}
#overview .hero-impact-strip {position:relative;z-index:3;margin-top:14px!important;}
#overview h1{line-height:1.06!important;font-size:clamp(3rem,5.25vw,5.7rem)!important;letter-spacing:-.061em;}
#overview #hero-summary{line-height:1.72;}
/* Project tabs: use one deliberate aligned grid, rather than wrapping button-by-button. */
#projects .project-photo-accent {display:none!important;}
#projects {position:relative;isolation:isolate;
  background-image:linear-gradient(112deg,rgba(3,16,30,.85) 0%,rgba(5,23,39,.76) 55%,rgba(3,16,30,.86)),url('images/studio-mixer.webp')!important;
  background-position:center 45%!important;background-size:cover!important;}
#projects::before{display:none!important;}
#projects>.max-w-7xl{position:relative;z-index:2;}
#projects .project-heading-layout {display:grid!important;grid-template-columns:1fr!important;gap:20px!important;align-items:stretch!important;margin-bottom:24px!important;}
#projects .project-heading-copy {max-width:860px;min-width:0;}
#projects .project-heading-copy p{max-width:700px;line-height:1.65;margin-top:7px;}
#project-filters{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%!important;max-width:none!important;gap:10px!important;
  padding:8px!important;margin:0!important;
  border:1px solid rgba(110,205,228,.25);border-radius:15px;
  background:rgba(3,19,34,.85);align-items:stretch!important;justify-content:stretch!important;}
#project-filters .proj-filter-btn {box-sizing:border-box;min-width:0!important;width:100%!important;
  min-height:48px!important;padding:11px 9px!important;display:flex!important;align-items:center;justify-content:center;
  margin:0!important;white-space:normal!important;text-align:center!important;line-height:1.3;
  font-size:12px!important;font-weight:700;border-radius:10px!important;}
#project-filters .proj-filter-btn:focus-visible{outline:2px solid #81ebef;outline-offset:2px;}
#projects-grid{margin-top:0!important;align-items:stretch;}
/* Contact: only ONE editorial image against a neutral navy surface. No dish/portrait collision. */
#contact{
  display:flex!important;position:relative;isolation:isolate;
  align-items:center!important;justify-content:center!important;
  background:radial-gradient(ellipse at 8% 45%,rgba(25,88,111,.29),transparent 42%),
             linear-gradient(110deg,#071a2b 0%,#051726 52%,#091e31 100%)!important;
  background-image:radial-gradient(ellipse at 8% 45%,rgba(25,88,111,.29),transparent 42%),linear-gradient(110deg,#071a2b,#051726 52%,#091e31)!important;
  min-height:730px!important;padding:92px 0 75px!important;
}
#contact::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(ellipse at 88% 65%,rgba(41,121,148,.09),transparent 50%);}
#contact .contact-inner{position:relative;z-index:2;width:min(100%,1280px);margin:0 auto;padding:0 25px;
 display:grid;grid-template-columns:minmax(265px,.76fr) minmax(0,1.55fr);gap:clamp(25px,3.8vw,68px);align-items:center;}
#contact .contact-photo-side {
 position:relative!important;left:auto!important;top:auto!important;align-self:center!important;
 width:100%!important;height:570px!important;max-height:none!important;
 display:block;opacity:1!important;overflow:hidden!important;
 border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 79%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 84%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 79%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 84%,transparent 100%);
 mask-composite:intersect;
}
#contact .contact-photo-side img {height:100%!important;width:100%!important;object-fit:cover!important;
 object-position:50% 44%!important;filter:brightness(.96) saturate(1.04)!important;}
#contact .contact-photo-side::after{background:linear-gradient(90deg,transparent 48%,rgba(6,24,39,.31)),linear-gradient(0deg,rgba(6,24,39,.45),transparent 30%)!important;}
#contact .contact-content {
 position:relative;min-width:0;width:100%;max-width:none!important;
 padding:0!important;margin:0!important;text-align:left!important;
 color:#f7fbff;
}
#contact .contact-content>h2 {font-size:clamp(1.9rem,3vw,2.85rem)!important;line-height:1.12!important;max-width:810px;}
#contact .contact-content>p{margin-left:0!important;margin-right:0!important;max-width:730px;color:#b8ccdd!important;line-height:1.8;}
#contact .contact-content>.grid {width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
#contact .contact-content>.grid a{min-width:0;max-width:100%;padding:18px 10px!important;background:rgba(11,35,52,.9)!important;
 border-color:rgba(100,179,210,.3)!important;}
#contact .contact-content>.grid a .font-bold {font-size:12px!important;line-height:1.45;overflow-wrap:anywhere;}
#contact .contact-content>.pt-10{gap:12px;text-align:left!important;}
/* Other side visuals remain contextual and should not seem like individual project evidence. */
#leadership .editorial-wide-feature{border-radius:18px;overflow:hidden;}
#experience .timeline-sticky-art>div{border-radius:16px;overflow:hidden;}
#tech-stack{background-image:linear-gradient(112deg,rgba(4,19,33,.85),rgba(4,19,33,.77),rgba(4,19,33,.86)),url('images/engineering-desk.webp')!important;}
#tech-stack .technology-side-feature{display:none!important;}
#education .credential-training-grid>span{align-self:stretch;}
/* Prevent tablet header overflow. */
@media(min-width:768px) and (max-width:1150px){
 .glass-nav nav[aria-label="Portfolio sections"]{display:none!important}
 .glass-nav button[aria-controls="mobile-menu"]{display:inline-flex!important}
 #mobile-menu.hidden{display:none!important}
 #mobile-menu:not(.hidden){display:block!important}
}
@media(max-width:1023px){
 #overview .hero-editorial-image{max-width:420px!important;height:510px!important;}
 #contact .contact-inner{grid-template-columns:minmax(200px,.65fr) minmax(0,1.35fr);gap:20px;}
 #contact .contact-photo-side{height:500px!important;}
 #contact .contact-content>.grid{grid-template-columns:1fr!important;}
 #contact .contact-content>.grid a{flex-direction:row!important;text-align:left;justify-content:flex-start;gap:12px;}
}
@media(max-width:767px){
 #overview{padding-top:28px!important;}
 #overview::before{opacity:.39;}
 #overview .hero-editorial-image{height:clamp(340px,107vw,480px)!important;max-width:400px!important;}
 #overview .hero-side{margin-top:5px;}
 #overview h1{white-space:normal;}
 #project-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:7px!important;}
 #project-filters .proj-filter-btn{font-size:11px!important;min-height:52px!important;padding:9px 7px!important;}
 #contact{padding:45px 0 60px!important;min-height:0!important;}
 #contact .contact-inner{display:flex;flex-direction:column;gap:10px;padding:0 18px;align-items:stretch;}
 #contact .contact-photo-side{height:405px!important;max-width:320px!important;width:100%!important;margin:0 auto 10px!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 85%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 85%,transparent 100%);}
 #contact .contact-photo-side img{object-position:50% 38%!important;}
 #contact .contact-content{text-align:center!important;}
 #contact .contact-content>p{margin-left:auto!important;margin-right:auto!important;}
 #contact .contact-content>.grid{max-width:430px!important;margin-left:auto!important;margin-right:auto!important;grid-template-columns:1fr!important;}
 #contact .contact-content>.grid a{flex-direction:column!important;text-align:center!important;justify-content:center!important;}
 #contact .contact-content>.pt-10{text-align:center!important;}
}
@media(max-width:440px){
 #project-filters .proj-filter-btn{font-size:10.2px!important;}
 #overview .hero-editorial-image{height:365px!important;}
 #contact .contact-photo-side{height:390px!important;}
}
@media(prefers-reduced-motion:reduce){#overview .hero-editorial-image img{transition:none!important;}}
@media print{
 #overview .hero-editorial-image,#contact .contact-photo-side{display:none!important;}
 #contact{min-height:unset!important;display:block!important;background:#fff!important;}
 #contact .contact-inner{display:block!important;}
 #contact .contact-content{color:#121827!important;}
 #contact .contact-content>p{color:#334155!important;}
 #project-filters{display:none!important;}
}