/* Mobile safety */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }


:root{
      --mist:#cfdbd5;
      --shell:#e8eddf;
      --honey:#f5cb5c;
      --ink:#242423;
      --charcoal:#333533;

      --bg:var(--ink);
      --text:var(--shell);
      --muted:var(--mist);
      --card:var(--charcoal);
      --accent:var(--honey);
      --border:rgba(207,219,213,.28);
      --maxw:1200px;
    }

    /* ---------- Reset ---------- */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--text); background:var(--bg); line-height:1.5}
    img{max-width:100%; display:block}
    h1,h2,h3{line-height:1.15; margin:0 0 .6rem; color:var(--ink)}
    p{margin:.25rem 0 1rem; color:var(--text)}

    /* ---------- Utils ---------- */
    .wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
    .center{text-align:center}
    .muted{color:var(--muted)}

    /* ---------- Nav ---------- */
    .nav{
      position:fixed; inset:0 0 auto 0; height:64px; display:flex; align-items:center; 
      z-index:30; backdrop-filter:saturate(160%) blur(10px);
      border-bottom:1px solid var(--border);
      background: linear-gradient(180deg, rgba(232,237,223,0.92), rgba(232,237,223,0.72));
      color: #333533;
    }
    .nav .wrap{
      display:flex; align-items:center;
       justify-content: flex-start;
      gap:12px;
      padding: 0 24px;        
    }
    /* Logo on extreme left, no text */
    .brand{
      display:inline-flex; align-items:center; text-decoration:none;
      margin-right:0px; /* forces it to the extreme left */
    }
    /* Make logo pop */
   .brand img{
      width:100px; height:100px; object-fit:contain;
      padding:4px solid var(--accent);
    }

    /* Menu pushed to extreme right */
    .nav ul{
      list-style:none; display:flex; gap:1.2rem; margin:0; padding:0;
      margin-left:auto; /* keeps it hard-right */
    }
    .nav a{color:var(--charcoal); text-decoration:none; font-weight:600}
    .nav a:hover{color:var(--honey)}

    /* ---------- HERO ---------- */
    .hero{position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden;}
    .hero .overlay{
      position:absolute; inset:0;
      background:
        radial-gradient(70% 60% at 50% 40%, rgba(36,36,35,.0), rgba(36,36,35,.55) 60%, rgba(36,36,35,.85) 100%);
      z-index:2;
    }
    .hero .bg-photo{
      position:absolute; inset:0; background:url("https://i.ibb.co/5C58yzY/80281.jpg") center/cover no-repeat;
      transform:scale(1.08); filter:saturate(.9) contrast(1.02) brightness(.85);
      transition:opacity .7s ease;
    }
    .hero .bg-video{position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .7s ease;}
    .hero .bg-video iframe{width:100%; height:100%; border:0; transform:scale(1.6);}
    .hero.show-video .bg-video{opacity:1}
    .hero.show-video .bg-photo{opacity:0}

    .hero .content{position:relative; z-index:3; text-align:center; padding:88px 16px 24px}
    .hero h1{font-size:clamp(2.2rem, 6vw, 5rem); font-weight:900; letter-spacing:.04em; color:var(--shell)}
    .hero h2{margin-top:.2rem; font-size:clamp(1rem, 2.2vw, 1.25rem); font-weight:800; color:var(--honey); letter-spacing:.35em; text-transform:uppercase}
    .cta-row{margin-top:1.1rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
    .btn{border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--shell); padding:.7rem 1rem; border-radius:12px; text-decoration:none; font-weight:750}
    .btn:hover{background:rgba(207,219,213,.12)}
    .btn.primary{background:var(--accent); border-color:var(--accent); color:var(--ink)}
    .btn.primary:hover{filter:brightness(.95)}

    /* ---------- Sections ---------- */
    section{padding:72px 0}
    #summary{ 
      background:
        radial-gradient(600px 240px at 10% 10%, rgba(245,203,92,.10), transparent 60%),
        linear-gradient(180deg, var(--ink) 0%, var(--charcoal) 100%);
      border-top:1px solid var(--border);
    }
    #summary .lead{max-width:820px; margin:10px auto 38px; font-size:1.05rem; color:var(--shell)}

    /* Timeline */
    .timeline{display:grid; grid-template-columns:160px 1fr; gap:1rem; align-items:start; margin:38px auto; max-width:var(--maxw)}
    .timeline .label{font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--mist); padding-top:.35rem}
    .tracks{position:relative; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px}
    .steps{display:grid; grid-template-columns:repeat(3, minmax(140px,1fr)); gap:14px}
    .step{background:linear-gradient(180deg, #3b3e3b, #2f312f); border:1px solid var(--border); border-radius:14px; padding:14px; position:relative}
    .step h4{margin:0 0 .35rem; font-size:1rem; color:var(--shell)}
    .step p{margin:0; font-size:.95rem; color:var(--mist)}
    .step:nth-child(1){outline:2px dashed rgba(207,219,213,.25)}
    .step:nth-child(2){outline:2px dashed rgba(207,219,213,.25)}
    .step:nth-child(3){outline:2px solid var(--honey); box-shadow:0 0 0 6px rgba(245,203,92,.10) inset}

    /* Arrow now points RIGHT directly at the Robotics Engineer block */
    .iamhere{
      position:absolute; left:50%; top:-28px; transform:translateX(-50%); /* centers vertically */
      display:flex; align-items:center; gap:.5rem; color:var(--honey); font-weight:800; letter-spacing:.02em; white-space:nowrap;
    }
    .iamhere .arrow{
      width:0; height:0;
       border-bottom:8px solid transparent; border-left:8px solid transparent;
      border-right:8px solid transparent;
         border-top:10px solid; var(--honey);
        margin-top: 11px;   /* right-pointing */
      filter:drop-shadow(0 2px 0 rgba(0,0,0,.2));
    }

    /* Strengths / Weaknesses */
    .sw-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px}
    .card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px 18px 10px}
    .card h3{font-size:1.1rem; letter-spacing:.05em; color:var(--shell)}
    .card ul{margin:.2rem 0 .8rem 1.1rem}
    .card li{margin:.35rem 0; color:var(--text)}
    .good h3{color:#9be5b0}
    .bad  h3{color:#ff9aa6}
 /* ---------- SKILLS SECTION ---------- */
   
#skills{
  background:linear-gradient(180deg, var(--ink), var(--charcoal));
  border-top:1px solid var(--border);
  scroll-margin-top: 80px; /* stops under the fixed nav when jumping from menu */
}

#skills .lead{max-width:980px; margin:10px auto 40px; color:var(--shell)}

.skills-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px; align-items:start;
}

.skill-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:20px; text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.skill-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}

/* NEW: circular wrapper that controls ring size independently of the image */
.skill-icon{
  width: 150px;                 /* total badge size */
  height: 150px;
  margin: 0 auto 12px;
  border-radius: 50%;            
  border: 4px solid var(--accent);           /* ring thickness */
  box-shadow: 0 0 0 6px rgba(245,203,92,.12);/* soft outer glow */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;             /* keep image perfectly circular */
}

/* Image fills the circle; hover zoom applies only to the image */
.skill-icon img{
  width: 250%;
  height: 250%;
  object-fit: cover;
  transform: scale(1.08);       /* slight base zoom to “fill” the circle */
  transition: transform .35s ease;
}
.skill-card:hover .skill-icon img{
  transform: scale(1.18);
}

.skill-card h4{margin:.4rem 0 .6rem; color:var(--shell); letter-spacing:.02em}
.pill-list{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.pill{
  padding:.38rem .6rem; border-radius:999px; font-size:.9rem; line-height:1; font-weight:600;
  background:rgba(207,219,213,.10); color:var(--shell); border:1px solid var(--border);
}
  #resume{
      background:linear-gradient(180deg, var(--charcoal), var(--ink));
      border-top:1px solid var(--border);
      scroll-margin-top: 80px;
    }
    .resume-top{
      text-align:center; margin-bottom:28px;
    }
    .resume-top a{
      color:var(--honey); font-weight:800; text-decoration:none; border-bottom:2px solid transparent;
    }
    .resume-top a:hover{border-color:var(--honey)}
    .resume-grid{
      display:grid; grid-template-columns:1fr 1fr; gap:32px;
    }
    .subhead{font-size:1.25rem; font-weight:900; letter-spacing:.02em; color:var(--shell); margin-bottom:10px}
    /* vertical timeline column */
    .tl{
      position:relative; padding-left:28px; /* space for line */
    }
    .tl::before{
      content:""; position:absolute; left:10px; top:6px; bottom:0; width:2px; background:linear-gradient(var(--honey), rgba(245,203,92,.2));
      border-radius:2px;
    }
    .tli{
      position:relative; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:16px 0 24px;
      box-shadow:0 8px 24px rgba(0,0,0,.18);
    }
    .tli::before{
      content:""; position:absolute; left:-22px; top:14px; width:12px; height:12px; border-radius:50%; background:var(--ink); border:3px solid var(--honey); box-shadow:0 0 0 4px rgba(245,203,92,.15);
    }
    .tli .role{font-weight:900; color:var(--honey); text-transform:uppercase; letter-spacing:.02em}
    .tli .meta{display:inline-block; margin:.45rem 0; background:rgba(232,237,223,.9); color:#242423; padding:.35rem .55rem; border-radius:8px; font-weight:800}
    .tli .org{font-style:italic; color:var(--mist); margin-bottom:.35rem}
    .tli ul{margin:.3rem 0 0 1rem}
    .tli li{margin:.25rem 0}
    /* education card emphasis */
    .edu .degree{font-weight:800; color:var(--shell)}
    .edu .gpa{font-weight:800; color:var(--honey)}
/* ===== Research section (compact spacing) ===== */
#research{
  background: linear-gradient(180deg, var(--charcoal), var(--ink));
  border-top: 1px solid var(--border);
  scroll-margin-top: 80px;
  padding: 30px 0 40px;                  /* was 40 / 52 */
}

#research h2{
  margin: 0 0 10px;                      /* was 16 */
  line-height: 1.2;
  color: var(--shell);
}

.research-wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.research-section{
  margin-top: 0;                      /* was 18 */
}

/* Subheads like “Publications”, “Patents” */
.r-subhead{
margin-top: 4px;                 
  #publications,
#publications h3 {
  margin-top: 0; }/* removes space above the next section */
  padding-top: 0;
  color: var(--shell);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .02em;
}
section + section {
  margin-top: 0;
  padding-top: 0;
}

/* Lead paragraph under interests */
.r-lead{
  color: var(--muted);
  text-align: left;
  margin-left: auto;
  margin-right: auto;                   /* was 10px */ justify-content: space-evenly;
  line-height: 1.55;
                      /* was 78ch */
}

/* Interest “tags” – text-only chips */
.r-tags {
  display: flex;
  flex-wrap: wrap;              /* allows tags to move to next line */
 justify-content: space-evenly;
 /* spreads tags evenly across the width */
  gap: 0.75rem;                 /* controls space between tags */
  width: 100%;                  /* ensures full width */
  margin: 0 auto;               /* centers within parent */
  padding: 0;
  list-style: none;
}

.r-tags li{
  padding: .38rem .65rem;                /* slightly tighter */
  font-size: .9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(207,219,213,.08);
  color: var(--shell);
  font-weight: 600;
}

/* Base (mobile) */
.r-list{
  display: grid;
  grid-template-columns: 1fr;            /* 1 column on phones */
  gap: clamp(10px, 1.6vw, 16px);         /* tighter default gap */
  justify-content: flex-start;
  align-items: start;
}

/* Tablet ≥768px */
@media (min-width: 768px){
  .r-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    
    gap: clamp(14px, 2vw, 18px);         /* was 16–22 */
  }
}

/* Desktop ≥1200px */
@media (min-width: 1200px){
  .r-list{
    gap: clamp(16px, 1.2vw, 20px);       /* was 18–24 */
  }
}

/* Items */
.r-item{
  padding-left: 6px;                      /* subtle left accent */
  border-left: 4px solid transparent;
  transition: border-color .2s ease;
}
.r-item:hover{
  border-color: rgba(245,203,92,.55);
}

/* Titles & links */
.r-title{
  margin: 0 0 2px;                       /* was 4px */
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--shell);
  font-size: clamp(1rem, 2vw, 1.1rem);
}
.r-title a{
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.r-title a:hover{
  color: var(--honey);
  border-color: var(--honey);
}

/* Meta line under title */
.r-meta{
  margin: 0 0 2px;                       /* was 4px */
  color: var(--mist);
  font-weight: 700;
  font-size: .95rem;
}

/* Abstract/overview */
.r-abstract{
  margin: 0;
  line-height: 1.5;                      /* slightly tighter */
  color: var(--text);
  max-width: 65ch;                       /* was 60ch */
}

/* Keep long links legible on small screens */
#research a{ word-break: break-word; }


/* ============ PROJECTS (soft renders grid) ============ */
#projects{
  background:#333533;               /* soft gray section */
  border-top:1px solid var(--border);
  scroll-margin-top:80px;
  padding:72px 0;
}
#projects .intro{
  max-width:var(--maxw);
  margin:0 auto 18px;
  padding:0 20px;
  text-align:center;
}
#projects .intro h2{
  color:var(--shell);
  font-size:clamp(1.6rem,3.2vw,2.3rem);
  font-weight:900;
  margin:0 0 .35rem;
}
#projects .intro p{
  color:var(--mist);
  margin:0;
}

.proj-grid{
  max-width:var(--maxw);
  margin:28px auto 0;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* desktop */
  gap:24px;
}

/* Card is the <a> so the whole thing is clickable */
.proj-card{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
  background:#ecefe6;                 /* soft paper */
  border:1px solid rgba(36,36,35,.08);
  border-radius:14px;
  overflow:hidden;
  transform:translateY(10px);
  opacity:0;
  transition:transform .45s ease, opacity .45s ease, box-shadow .25s ease, border-color .25s ease;
}
.proj-card.reveal-in{ transform:translateY(0); opacity:1; }
.proj-card:hover{ box-shadow:0 18px 40px rgba(0,0,0,.16); border-color:rgba(36,36,35,.16); }

/* Thumb with subtle honey tint and overlay hint */
.proj-thumb{
  position:relative;
  aspect-ratio: 16/9;                  /* default */
  background:linear-gradient(0deg, rgba(245,203,92,.06), rgba(245,203,92,.06));
}
.proj-thumb img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.98) contrast(1.02);
}

/* Hover overlay */
.proj-overlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:16px;
  background:linear-gradient(180deg, rgba(36,36,35,0) 40%, rgba(36,36,35,.55) 100%);
  color:var(--shell);
  opacity:0; transition:opacity .22s ease;
}
.proj-card:hover .proj-overlay{ opacity:1; }
.proj-overlay .hint{ font-weight:800; display:flex; gap:8px; align-items:center; }
.proj-overlay .arrow{ display:inline-block; transform:translateX(0); transition:transform .2s ease; }
.proj-card:hover .proj-overlay .arrow{ transform:translateX(6px); }

.proj-body{ padding:14px 16px 18px; }
.proj-title{ margin:0 0 .25rem; color:#242423; font-weight:900; letter-spacing:.01em; }
.proj-desc{ margin:0; color:#60635f; font-weight:600; font-size:.95rem; }

/* Aspect helpers you can mix per card */
.ar-11   { aspect-ratio:1/1; }
.ar-1610 { aspect-ratio:16/10; }
.ar-43   { aspect-ratio:4/3; }

/* Responsiveness */
@media (max-width:1200px){
  .proj-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  #projects{ padding:56px 0; }
  .proj-grid{ grid-template-columns:1fr; }
}

    #resume h2,#research h2,#skills h2,#contact h2{color:var(--shell)}
    .muted{color:var(--mist)}
/* ---------- CONTACT ---------- */
    #contact{
      background:linear-gradient(180deg, var(--charcoal), var(--ink));
      border-top:1px solid var(--border);
      scroll-margin-top:80px;
    }
    .contact-lead{max-width:780px; margin:6px auto 28px; color:var(--muted)}
    .contact-card{
      max-width:920px; margin:0 auto 28px;
      background:var(--card); border:1px solid var(--border); border-radius:16px;
      padding:22px; box-shadow:0 12px 28px rgba(0,0,0,.25);
    }
    .contact-form{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
    .contact-form .full{grid-column:1 / -1}
    .field{display:flex; flex-direction:column; gap:6px}
    .field label{font-weight:700; color:var(--mist); font-size:.95rem}
    input[type=text], input[type=email], textarea{
      width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
      background:#2e2f2e; color:var(--shell); outline:none;
    }
    input::placeholder, textarea::placeholder{color:#9aa39a}
    input:focus, textarea:focus{border-color:var(--honey); box-shadow:0 0 0 3px rgba(245,203,92,.18)}
    textarea{min-height:160px; resize:vertical}
    .send-row{grid-column:1 / -1; display:flex; justify-content:center; margin-top:4px}
    .contact-btn{cursor:pointer}

    .contact-info{
      display:flex; gap:28px; flex-wrap:wrap; justify-content:center; align-items:center;
      max-width:var(--maxw); margin:12px auto 0;
    }
    .info{
      display:flex; align-items:center; gap:12px;
      background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 16px;
    }
    .info img{width:28px; height:28px; object-fit:contain; background:#fff; border-radius:999px; padding:4px; border:2px solid var(--accent)}
    .info h4{margin:0; font-size:1rem; color:var(--shell)}
    .info p, .info a{margin:0; color:var(--mist); text-decoration:none; font-weight:600}
    .info a:hover{color:var(--honey)}
    /* -------- Contact badges (match SKILLS circular look) -------- */
.contact-badges{
  display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap;
  gap:34px; margin:6px auto 0; max-width:var(--maxw);
}

/* each badge */
.badge{ text-align:center; min-width:200px }

/* circular icon ring — same spirit as .skill-icon, just sized for contact */
.badge-icon{
  width:clamp(70px, 9vw, 80px);
  height:clamp(60px, 9vw, 80px);
  margin:0 auto 10px;
  border-radius:50%;
  border:4px solid var(--accent);
  box-shadow:0 0 0 6px rgba(245,203,92,.12);
 cursor: pointer; 
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.badge-icon img{
  width:250%; height:250%;
  object-fit:cover;
  transform:translateZ(0); /* crisp rendering */
  transition: transform .35s ease; 
}

/* headings + values under the circle */
.badge h4{
  margin:.25rem 0 .15rem; font-size:1.05rem; color:var(--shell); letter-spacing:.02em;
}
.badge p, .badge a{
  margin:0; color:var(--mist); font-weight:700; text-decoration:none;   display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  border-radius:50%;
}
.badge a:hover{ color:var(--honey);  transform: scale(1.18);  }
.badge .badge-link{ text-decoration:none; font-weight:700; color:var(--mist); }
.badge .badge-link:hover{ color:var(--honey); }
/* (Optional) you can delete these old block styles if you added them before */
.contact-info, .info { display:none !important; }

    /* ---------- Responsive ---------- */
    @media (max-width: 1000px){
      .skills-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 900px){
      .steps{grid-template-columns:1fr}
      .iamhere{position:static; transform:none; margin:8px 0 -4px 0}
    }
    @media (max-width: 720px){
      .timeline{grid-template-columns:1fr; gap:.4rem}
      .timeline .label{order:-1}
      .sw-grid{grid-template-columns:1fr}
      .skills-grid{grid-template-columns:1fr}
      .nav ul{display:none}
      
}
@media (max-width: 900px){
  .resume-grid,
  .two-col,
  .columns,
  .timeline-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .timeline-col,
  .experience-col,
  .education-col {
    width: 100% !important;
  }
}
@media (max-width: 900px){
  .resume-grid,
  .two-col,
  .columns,
  .timeline-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .timeline-col,
  .experience-col,
  .education-col {
    width: 100% !important;
  }
}
/* MOBILE FIX: stack image on top, text below (How section) */
@media (max-width: 900px) {
  .block.how {
    display: flex;
    flex-direction: column;
  }

  .block.how .img {
    order: 1;
  }

  .block.how .text {
    order: 2;
  }
}


/* === Case overlay === */
.case-overlay{
  position:fixed;
  
  inset:0; z-index:9999;
  background:rgba(36,36,35,.75);
  display:none;
    /* NEW: allow scrolling inside the overlay */
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.case-overlay.open{ display:block; }

.case-close{ 
  position:fixed;                /* stays in viewport */
  top:16px; 
  right:16px;
  background:#f5cb5c; 
  color:#242423;
  border:0; 
  border-radius:10px;
  padding:8px 12px; 
  font-weight:800;
  cursor:pointer; 
  z-index:10000; /* above everything */
}


/* Back to Projects link (force honey yellow) */
/* Bottom Back to Projects button */
#case-back,
#case-back:visited {
  color: var(--honey);      /* honey yellow */
  font-weight: 400;        /* as requested */
  text-decoration: underline;
}

#case-back:hover {
  filter: brightness(1.1);
}

.case-overlay .case-hero,
.case-overlay .case{
   background:#333533; border:1px solid rgba(207,219,213,.28);
  border-radius:14px; margin:14px auto 28px;
    /* NEW: cap the height so content can scroll */
  max-height: calc(100vh - 220px);
  overflow:auto;
}

.case-overlay .case-hero{
  margin-top:72px;
  background:#e8eddf; color:#242423; border-radius:14px; padding:18px 20px;
  border:1px solid rgba(207,219,213,.28);
  
    position: sticky;  /* NEW */
  top:16px;          /* NEW */
  z-index: 1;        /* NEW */
}
.case-overlay .sub{ margin:0; color:#333533; font-weight:700; }

.case-overlay .case{
  background:#333533; border:1px solid rgba(207,219,213,.28);
  border-radius:14px; margin-top:14px;
}

/* content layout blocks */
/* content layout blocks: title on top, two columns under it */
.block{
  display:grid;
  grid-template-columns: 1fr 0.85fr;   /* image & text columns */ 
  grid-auto-rows: auto;
  gap:18px 16px;
  align-items:start;
  padding:14px;
  
}

.block .mid{            /* the section title */
  grid-column: 1 / -1;  /* span both columns */
  text-align:center;      /* or center if you prefer */
  color:#f5cb5c;
  font-weight:100000;
  margin-bottom:4px;
}

/* Why/Results: image left, text right */
.block .img.left  {   justify-self: center; }
.block .text.right{ grid-column: 2; color:#e8eddf; }      
.block .img img   {  max-width: 100%;
  max-height: 42vh;  /* keeps entire image on screen */
  width: auto;
  height: auto;
  object-fit: cover;           /* no cropping */
  align-self: flex-start;        /* stick to the top */}

/* How: text left, image right */
.block.how .text.left { grid-column: 1; }
.block.how .img.right { grid-column: 2; }

/* mobile: stack */
@media (max-width:900px){
  .block{ grid-template-columns:1fr}
  .block .mid{ grid-column: 1; text-align:left; }
  .block .img.left,
  .block .img.right,
  .block .text.left,
  .block .text.right{ grid-column:1; }
}