/* =====================================================
   Fuel Sensor Case Study — Modern Drop-in CSS (style.css)
   Content unchanged; only layout/visuals improved.
   ===================================================== */

/* -----------------------
   0) Design Tokens
----------------------- */
:root{
    --bg:#0b0c0f;
    --surface:#12141a;
    --surface-2:#0f1116;
    --text:#e8eaed;
    --muted:#a6afbd;
    --accent:#1DEDE8;     /* brand cyan */
    --accent-1:#e8523c;     /* brand danger.error */
    --accent-2:#FEBF34;   /* secondary */
    --border:rgba(255,255,255,.08);
    --radius-xl:20px; --radius-lg:14px; --radius-md:10px; --radius-sm:8px;
    --shadow:0 12px 30px rgba(0,0,0,.35);
    --container:1080px;
  }
  
  /* -----------------------
     1) Base & Typography
  ----------------------- */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(29,237,232,.08), transparent 60%),
      radial-gradient(900px 500px at 100% 0%, rgba(254,191,52,.06), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height:1.7;
  }
  img{max-width:100%; display:block; background:transparent}
  video{width:100%; height:auto; display:block; border-radius:var(--radius-lg); border:1px solid var(--border)}
  
  .container{max-width:var(--container); margin:0 auto; padding:32px 20px 80px}
  
  h1,h2,h3,h4,h5,h6{margin:0 0 12px}
  .heading{font-size:clamp(28px,3.8vw,44px); font-weight:800; letter-spacing:.2px}
  .subheading, p{max-width:fill-available; color:var(--muted); margin-top:8px; font-size:clamp(16px,2vw,18px)}
  
  /* Tag chip */
  .tag{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); color:var(--muted); width:max-content}
  .tag h5{margin:0; font-size:13px; letter-spacing:.06em; text-transform:uppercase}
  
  /* Section spacing */
  .container > div{margin-top:16px}
  .container > div:first-of-type{margin-top:24px}
  
  /* -----------------------
     2) Back to Top button
  ----------------------- */
  .back-to-top{
    position:fixed; right:20px; bottom:22px; z-index:1000;
    border:1px solid var(--border); background:rgba(255,255,255,.04);
    color:var(--text); padding:10px 12px; border-radius:999px;
    box-shadow:var(--shadow); cursor:pointer; opacity:.95;
    transition:transform .15s ease, opacity .15s ease;
  }
  .back-to-top:hover{transform:translateY(-2px); opacity:1}
  /* Fallback if font-awesome isn't loaded */
  .back-to-top i::before{content:"\2191"}
  
  /* -----------------------
     3) Intro
  ----------------------- */
  .intro span{display:block; color:var(--muted); margin-bottom:14px}
  .intro h2{font-size:clamp(22px,2.6vw,28px)}
  .intro p{color:var(--muted)}
  
  /* -----------------------
     4) Responsive Media Gallery
  ----------------------- */
  .images-gallery {
    display: grid;
    grid-template-columns: 1fr; /* stack by default */
    gap: 16px;
    margin-top: 22px;
  }
  
  .images-gallery img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* border-radius: var(--radius-lg); */
    /* border: 1px solid var(--border); */
    background: var(--surface-2);
    box-shadow: var(--shadow);
  }
  
  @media (min-width: 900px) {
    .images-gallery {
      grid-template-columns: repeat(3, 1fr); /* 3 side-by-side */
    }
  }
  
  /* -----------------------
     5) Section Cards
  ----------------------- */
  .our-team, .context, .research, .key-insights, .opportunities,.testimonials,
  .solution-1, .solution-2, .graph, .user-testing, .empathy-map,
  .installation, .other-platforms, .outcomes, .learnings, .end{
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:24px;
    box-shadow:var(--shadow);
  }
  
  /* Headings styling */
  .our-team h2, .context h2, .research h2, .key-insights h2,
  .opportunities h2, .outcomes h2, .learnings h2, .other-platforms h2{
    font-size:clamp(22px,2.6vw,30px)
  }
  .solution-1 h3, .solution-2 h3, .graph h3{
    font-size:clamp(18px,2.2vw,22px); color:var(--text)
  }
  
  /* Body text */
  .our-team p, .context p, .research p, .key-insights p, .opportunities p,
  .solution-1 p, .solution-2 p, .graph p, .user-testing p,
  .installation p, .other-platforms p, .outcomes p, .learnings p, .end p{color:var(--muted)}
  ul{padding-left:18px; margin:8px 0}
  li{margin:6px 0; color:var(--muted)}
  
  /* Images inside sections (consistent frame) */
  .our-team img, .context img, .research img, .key-insights img, .opportunities img,
  .solution-1 img, .solution-2 img, .graph img, .user-testing img,
  .installation img, .other-platforms img, .outcomes img, .learnings img{
    width:100%; height:auto; object-fit:contain;
    border-radius:var(--radius-lg); border:1px solid var(--border);
    background:var(--surface-2); box-shadow:var(--shadow);
  }
  
  /* Minor heading levels */
  h5{margin:14px 0 6px; font-size:15px; letter-spacing:.05em; color:var(--text); text-transform:uppercase}
  h6{margin:14px 0 6px; font-size:14px; color:var(--text); opacity:.9}
  
  /* Team roles list */
  .name-role{display:flex; align-items:baseline; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.03); margin:8px 0}
  .name-role h5{margin:0}
  .name-role p{margin:0; color:var(--muted)}
  
  /* -----------------------
     6) Stats / Outcomes
  ----------------------- */
  .stats-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:14px}
  .stat-card{grid-column:span 12; padding:18px; border-radius:var(--radius-lg); border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow:var(--shadow)}
  @media (min-width:840px){.stat-card{grid-column:span 4}}
  .stat-header{display:flex; align-items:center; gap:8px; margin-bottom:6px}
  .stat-value{font-weight:800; font-size:26px}
  .stat-arrow{font-weight:900; color:var(--accent)}
  .stat-title{margin:0 0 6px; font-size:18px}
  .stat-description{color:var(--muted); margin:0}
  
  /* -----------------------
     7) Testimonials
  ----------------------- */
  .testimonials{margin-top:20px}
  .testimonials-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
  .testimonial{grid-column:span 12; padding:16px; border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow)}
  @media (min-width:900px){.testimonial{grid-column:span 4}}
  .testimonial-header{display:flex; align-items:center; gap:12px; margin-bottom:8px}
  .testimonial-image{width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--border)}
  .testimonial-info h5{margin:0}
  .testimonial-location{margin:0; color:var(--muted); font-size:12px}
  .testimonial-text{margin:0; color:var(--muted)}
  
  /* -----------------------
     8) Features / Learnings
  ----------------------- */
  .features-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
  .feature-card{grid-column:span 12; padding:18px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow)}
  @media (min-width:980px){.feature-card{grid-column:span 4}}
  .feature-icon{width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:rgba(29,237,232,.12); color:var(--accent); margin-bottom:6px}
  .feature-title{margin:6px 0}
  .feature-description{color:var(--muted)}
  
  /* -----------------------
     9) End section CTA
  ----------------------- */
  .end a{
    display:inline-flex; align-items:center; gap:8px; padding:12px 16px;
    border-radius:12px; border:1px solid var(--border);
    background:linear-gradient(180deg, rgba(29,237,232,.16), rgba(29,237,232,.08));
    color:var(--text); font-weight:800; box-shadow:0 8px 24px rgba(29,237,232,.18)
  }
  .end ul{padding-left:18px}
  
  /* -----------------------
     10) Divider accent under H2
  ----------------------- */
  .our-team h2::after, .context h2::after, .research h2::after, .key-insights h2::after,
  .opportunities h2::after, .outcomes h2::after, .learnings h2::after, .other-platforms h2::after, .empathy-map h2::after {
    content:""; display:block; height:1px; margin-top:10px;
    background:linear-gradient(90deg, var(--accent), transparent); opacity:.6;
  }
  
  /* -----------------------
     11) Responsiveness
  ----------------------- */
  @media (max-width:740px){
    .container{padding:22px 16px 64px}
    .tag{padding:6px 10px}
    .name-role{flex-direction:column; align-items:flex-start}
  }
  
  /* -----------------------
     12) (Optional) Reveal Animations — sections only
     NOTE: Images are intentionally excluded so they never hide.
  ----------------------- */
  @media (prefers-reduced-motion:no-preference){
    .revealable{
      opacity:0; transform:translateY(10px);
      transition:opacity .5s ease, transform .5s ease;
    }
    .revealable.is-visible{opacity:1; transform:translateY(0)}
  }
  
  /* === Safety net: ensure images are ALWAYS visible =================== */
  .images-gallery img,
  .our-team img, .context img, .research img, .key-insights img, .opportunities img,
  .solution-1 img, .solution-2 img, .graph img, .user-testing img,
  .installation img, .other-platforms img, .outcomes img, .learnings img {
    opacity:1 !important; transform:none !important;
  }

  .insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  
  .insight-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
  }
  
  .insight-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 12px;
  }

  .empathy-map {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
    /* text-align: center; */
  }
  
  .empathy-map h2 {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  
  .map-grid {
    display: grid;
    grid-template-areas:
      "says thinks"
      "does feels";
    gap: 20px;
    position: relative;
  }
  
  .map-box {
    background: var(--surface, #12141a);
    border: 1px solid var(--border, #333);
    border-radius: 14px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  }
  
  .map-box h3 {
    margin-top: 0;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--accent, #1DEDE8);
  }
  
  .map-box ul {
    padding-left: 18px;
    margin: 10px 0 0;
    color: var(--muted, #a6afbd);
  }
  
  .says   { grid-area: says; }
  .thinks { grid-area: thinks; }
  .does   { grid-area: does; }
  .feels  { grid-area: feels; }
  
  .iteration-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  
  .iteration-card {
    background: var(--surface, #12141a);
    border: 1px solid var(--border, #333);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.25));
  }
  
  .iteration-card h4 {
    margin-top: 0;
    font-size: 1rem;
    color:var(--accent);
  }
  
  .iteration-card img {
    width: 100%;
    border-radius: 10px;
    margin: 12px 0;
    border: 1px solid var(--border, #333);
  }
  
  .iteration-card ul {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--muted, #a6afbd);
  }
  
  .final-design {
    margin-top: 30px;
    padding: 20px;
    border-radius: 14px;
    text-align: left;
  }
  .final-design img {
    width: 100%;
    margin-top: 15px;
    border-radius: 10px;
  }

  .testimonial {
    position: relative; /* enable positioning for pseudo-element */
    background: var(--surface, #12141a);
    border: 1px solid var(--border, #333);
    border-radius: var(--radius-lg, 14px);
    padding: 20px;
    box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.25));
    overflow: hidden; /* ensure marks don’t spill out */
  }

  @media (max-width: 900px) {
    .map-grid {
      grid-template-areas:
        "says"
        "thinks"
        "does"
        "feels";
    }
  
    .map-center {
      position: static;
      transform: none;
      margin: 20px auto;
      width: 100%;
      max-width: 300px;
    }
  }
  
  /* Decorative quote mark */
  .testimonial::before {
    content: "“";
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 4rem;
    font-weight: 900;
    color: var(--text, #e8eaed);
    opacity: 0.08; /* subtle background feel */
    pointer-events: none;
    line-height: 1;
  }

  .team-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  
  .team-card {
    background: var(--surface, #12141a);
    border: 1px solid var(--border, #333);
    border-radius: var(--radius-lg, 14px);
    padding: 20px;
    text-align: left;
    box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.25));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .team-card h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent, #1DEDE8);
  }
  
  .team-card .role {
    margin: 4px 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--muted, #a6afbd);
  }
  
  .team-card .desc {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted, #a6afbd);
    line-height: 1.4;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  
  .card {
    background: var(--surface, #12141a);
    border: 1px solid var(--border, #333);
    border-radius: var(--radius-lg, 14px);
    padding: 20px;
    box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.25));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
  }
  
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }
  
  .card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(29,237,232,0.12);
    color: var(--accent, #1DEDE8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }
  
  .card h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text, #e8eaed);
  }
  
  .card p {
    color: var(--muted, #a6afbd);
    font-size: 0.95rem;
    line-height: 1.5;
  }