:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#2563eb;
  --max-width:1100px;
  --container-pad:1rem;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#0f172a;background:var(--bg);line-height:1.5}
.container{max-width:var(--max-width);margin:0 auto;padding:1.25rem}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.brand{font-weight:700;color:var(--accent);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;font-size:1.25rem}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.site-nav a{text-decoration:none;color:inherit}
.hero{padding:3rem 0;background:linear-gradient(90deg,rgba(37,99,235,0.06),transparent)}
.hero .lede{color:var(--muted);margin-top:0.5rem}
.responsibilities h2,.team h2,.timeline h2,.about h2{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:8px;box-shadow:0 1px 2px rgba(15,23,42,0.04);border:1px solid rgba(15,23,42,0.03)}
.card h3{margin:0 0 0.25rem 0}
.meta{font-size:0.85rem;color:var(--muted);margin:0 0 0.75rem 0}
.card-action{background:var(--accent);color:#fff;border:0;padding:0.5rem 0.75rem;border-radius:6px;cursor:pointer}
.team-list{display:flex;gap:1rem;padding:0;margin:0;list-style:none}
.team-list li{background:var(--card);padding:0.5rem 0.75rem;border-radius:6px}
.site-footer{padding:1rem 0;text-align:center;color:var(--muted)}

.detail {width:960px; }
.img-bg {position: relative; width:960px;height:2400px; background:#FEFBF5; }
.img-bg > div > div >  img {width:960px;}
.con1-header {position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 10;}

.con1-topImg {position: absolute; top: 450px; left: 0; width: 100%; height: auto; z-index: 5;}

.con1-title {position: absolute; top: 1280px; left: 0; width: 100%; height: auto; z-index: 5;}



/* Responsive */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .container{padding:var(--container-pad)}
  .nav-toggle{display:inline-block}
  .site-nav{display:none}
  .site-nav[aria-hidden="false"]{display:block}
  .site-nav ul{flex-direction:column;gap:0.5rem}
  .grid{grid-template-columns:1fr}
  .header-inner{align-items:flex-start}
}

/* small helpers */
.desc{color:#111827}
.role{display:block;color:var(--muted);font-size:0.9rem}

/* Layered images section - responsive, absolute positioned layers */
.layered-section{
  position:relative; /* establish containing block for absolute children */
  min-height:55vh; /* ensures section doesn't collapse on mobile */
  display:block;
  overflow:hidden; /* prevent absolute children from creating scrollbars */
  background:transparent;
}

.layered-section .layer{
  position:absolute;
  top:0;left:0;
  width:auto;
  height:auto;
  transform-origin:center;
}

/* ensure images scale nicely */
.layered-section .layer img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}

/* Example layers with z-index ordering. Adjust class names in HTML to match these. */
.layered-section .layer.bg{ z-index:1; /* background/base image */ }
.layered-section .layer.mid{ z-index:5; }
.layered-section .layer.top{ z-index:10; }
.layered-section .layer.overlay{ z-index:20; }

/* Desktop / large screens: use percentage/vw sizing and explicit offsets */
@media (min-width:641px){
  .layered-section{min-height:50vh}

  .layered-section .layer.bg{ left:0; top:0; width:60%; max-width:900px; }
  .layered-section .layer.mid{ right:5%; top:10%; width:35vw; }
  .layered-section .layer.top{ left:20%; bottom:5%; width:28vw; }
  .layered-section .layer.overlay{ right:12%; top:20%; width:18vw; }
}

/* Mobile: use vw relative units and smaller offsets to avoid overflow */
@media (max-width:640px){
  .layered-section{min-height:65vh}

  .layered-section .layer.bg{ left:-5vw; top:0; width:110vw; /* slightly oversize to cover */ }
  .layered-section .layer.mid{ right:-2vw; top:8vw; width:50vw; }
  .layered-section .layer.top{ left:6vw; bottom:auto; top:40vw; width:48vw; }
  .layered-section .layer.overlay{ right:6vw; top:26vw; width:28vw; }

  /* reduce transform/translate values on very small screens */
  .layered-section .layer{will-change:transform}
}

/* Utility: allow authors to nudge layer positions using data attributes */
.layered-section .layer[data-offset-x]{
  transform: translateX(var(--offset-x, 0));
}