:root{
  --bg:#0B151B;
  --panel:#111F27;
  --panel-2:#172932;

  --text:#F3F7F8;
  --muted:#B8C4C8;

  --line:rgba(164,210,215,.18);

  --accent:#69D1CE;
  --accent-2:#9BE5E2;

  --shadow:0 24px 70px rgba(0,0,0,.20);

  --radius:22px;
  --max:1180px;
}


/* =========================================================
   BASE
========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(103,213,209,.09),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #0B151B 0%,
      #0D1920 55%,
      #101E25 100%
    );

  color:var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height:1.6;
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(var(--max), calc(100% - 40px));
  margin-inline:auto;
}

.section{
  padding:104px 0;
}

.eyebrow{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
  font-weight:800;
}

.section-title{
  font-size:clamp(2rem,4.5vw,4rem);
  line-height:1.02;
  margin:.45rem 0 1rem;
  letter-spacing:-.045em;
}

.section-sub{
  max-width:720px;
  color:var(--muted);
  font-size:1.03rem;
}

.muted{
  color:var(--muted);
}


/* =========================================================
   SECTION SUBTITLES
========================================================= */

#services .section-sub{
  max-width:1000px;
}

#projects .section-sub{
  max-width:none;
  width:100%;
}


/* =========================================================
   NAVBAR
========================================================= */

.nav{
  position:sticky;
  top:0;
  z-index:50;

  border-bottom:1px solid transparent;

  background:rgba(11,21,27,.82);
  backdrop-filter:blur(16px);
}

.nav.scrolled{
  border-color:var(--line);
}

.nav-inner{
  height:72px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;
}

.brand{
  font-weight:800;
  letter-spacing:-.02em;
}

.nav-links{
  display:flex;
  gap:24px;

  font-size:.92rem;
  color:#c9d9dc;
}

.nav-links a:hover{
  color:var(--accent);
}

.menu-btn{
  display:none;

  background:none;
  border:1px solid var(--line);
  color:var(--text);

  padding:8px 10px;
  border-radius:10px;
}


/* =========================================================
   INTRO
========================================================= */

.intro{
  padding:60px 0 55px;
}

.intro-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:70px;
}

.intro-content{
  flex:1 1 0;
  min-width:0;
}

.availability{
  display:inline-flex;
  align-items:center;

  gap:8px;

  padding:8px 12px;

  border:1px solid var(--line);
  border-radius:999px;

  color:#cfe5e6;
  font-size:.84rem;
}

.dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--accent);

  box-shadow:
    0 0 16px rgba(110,231,231,.75);
}


/* =========================================================
   MAIN HEADLINE
========================================================= */

h1{
  max-width:760px;

  font-size:clamp(3rem,5vw,5rem);
  line-height:1;

  letter-spacing:-.05em;

  margin:22px 0;
}

.lead{
  max-width:720px;

  font-size:1.08rem;
  color:var(--muted);
}

.actions{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:30px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:13px 18px;

  border-radius:12px;
  border:1px solid var(--line);

  font-weight:750;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.btn-primary{
  background:var(--accent);
  color:#062124;

  border-color:transparent;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-secondary:hover{
  border-color:rgba(110,231,231,.5);
}


/* =========================================================
   PORTRAIT
========================================================= */

.portrait{
  flex:0 0 360px;

  width:360px;

  aspect-ratio:4 / 5;

  border-radius:30px;

  overflow:hidden;

  background:#101b20;

  border:1px solid rgba(105,209,206,.18);

  box-shadow:
    0 30px 80px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.02);
}

.portrait img{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center top;

  display:block;
}


/* =========================================================
   EXPERTISE
========================================================= */

.expertise{
  display:grid;

  grid-template-columns:repeat(6,1fr);

  gap:10px;

  padding:18px;

  border:1px solid var(--line);
  border-radius:18px;

  background:rgba(11,23,27,.55);
}

.expertise span{
  font-size:.86rem;
  text-align:center;
  color:#c7d7d9;
}


/* =========================================================
   GENERIC CARDS
========================================================= */

.grid-3{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;
}

.card{
  border:1px solid var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(23,41,50,.95),
      rgba(16,31,38,.95)
    );

  border-radius:var(--radius);

  padding:24px;

  transition:
    transform .25s ease,
    border-color .25s ease;
}

.card:hover{
  transform:translateY(-4px);

  border-color:rgba(110,231,231,.36);
}

.card h3{
  margin:8px 0;

  font-size:1.18rem;
}

.card p{
  margin:0;

  color:var(--muted);
}


/* =========================================================
   SERVICES
========================================================= */

#services .grid-3{
  align-items:stretch;
}

#services .card{
  min-height:220px;
}


/* =========================================================
   PROJECT GRID
========================================================= */

.projects-grid{
  display:grid;

  grid-template-columns:repeat(12,1fr);

  gap:18px;

  margin-top:38px;
}


/* =========================================================
   NORMAL PROJECT CARDS
========================================================= */

.project-card{
  grid-column:span 6;

  min-width:0;

  border:1px solid var(--line);

  background:var(--panel);

  border-radius:24px;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  transition:
    transform .25s ease,
    border-color .25s ease;
}

.project-card:hover{
  transform:translateY(-4px);

  border-color:rgba(110,231,231,.38);
}

.project-card .project-copy{
  flex:1;
}


/* =========================================================
   FEATURED PROJECT — TWINSIGHT
========================================================= */

.project-card.featured{
  grid-column:span 12;

  display:grid;

  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);

  min-width:0;
}


/*
  IMPORTANT:
  Featured image is NOT forced to 16:9.
  It fills its grid column naturally.
*/

.project-card.featured .cover{
  aspect-ratio:auto;

  min-height:400px;
  height:100%;

  min-width:0;
}


/* TwinSight image */

.project-card.featured .project-image img{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  display:block;
}


/* Featured text area */

.featured .project-copy{
  min-width:0;

  padding:42px 36px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  align-self:stretch;
}

.featured .project-copy h3{
  font-size:2.1rem;
  line-height:1.1;

  margin:0 0 14px;
}

.featured .project-copy p{
  margin:0 0 18px;
}

.featured .project-copy .tags{
  margin:0 0 18px;
}


/* =========================================================
   NORMAL PROJECT COVERS
========================================================= */

.project-card:not(.featured) .cover{
  position:relative;

  width:100%;

  aspect-ratio:16 / 9;

  min-height:0;

  overflow:hidden;

  background:#0a1518;
}


/*
  Generic project image rule.
  This was missing before.
*/

.project-card:not(.featured) .project-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center;
}


/* =========================================================
   CHAOTIC SYSTEM IMAGE
========================================================= */

/*
  Move crop downward so the Lorenz attractor,
  not only the equations, becomes the focal point.
*/

.cover-chaotic-img img{
  object-position:42% 68% !important;
}


/* =========================================================
   GENERIC COVER OVERLAY
========================================================= */

.cover{
  position:relative;

  overflow:hidden;

  background:#0a1518;
}

.cover::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(5,11,13,.12) 100%
    );
}


/* =========================================================
   OLD CONCEPTUAL COVERS
   Used until replaced with real/custom images
========================================================= */

/* TwinSight old fallback */

.cover-industrial{
  background:
    radial-gradient(
      circle at 68% 40%,
      rgba(110,231,231,.28),
      transparent 20%
    ),
    linear-gradient(
      135deg,
      #0d252a,
      #092027 46%,
      #091416
    );
}


/* Chaos fallback */

.cover-chaos{
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(110,231,231,.24),
      transparent 42%
    ),
    repeating-radial-gradient(
      ellipse at 48% 50%,
      transparent 0 18px,
      rgba(110,231,231,.09) 19px 20px
    ),
    #081418;
}


/* Machinery */

/* Predictive Maintenance Model Cover */

.cover-machinery{
  position:relative;
  overflow:hidden;
  background:#0a171a;
}

.cover-machinery img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center center;
}

/* Remove old FFT placeholder */
.cover-machinery::before{
  content:none;
}

/* Keep overlay extremely subtle */
.cover-machinery::after{
  background:
    linear-gradient(
      180deg,
      rgba(5,11,13,0) 65%,
      rgba(5,11,13,.15) 100%
    );
}

/* Oil Spill Semantic Segmentation Cover */

.cover-ocean{
  position:relative;
  overflow:hidden;
  background:#0a171a;
}

.cover-ocean img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center center;
}

/* Very subtle overlay only */
.cover-ocean::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(5,11,13,0) 75%,
      rgba(5,11,13,.10) 100%
    );
}


/* Resume Screening */

.cover-documents{
  position:relative;
  overflow:hidden;
  background:#0a1518;
}

.cover-documents img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center center;
}

/* Remove the old CV → NLP → CATEGORY placeholder */
.cover-documents::before{
  content:none;
}

/* =========================
   WEATHER PROJECT IMAGE
========================= */

.cover-weather{
  position:relative;
  overflow:hidden;
  background:#0a1518;
}

.cover-weather img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center center;
}

/* Keep overlay very subtle */
.cover-weather::after{
  background:
    linear-gradient(
      180deg,
      transparent 70%,
      rgba(5,11,13,.18) 100%
    );
}


/* =========================
   SKIN CANCER PROJECT IMAGE
========================= */

.cover-medical{
  position:relative;
  overflow:hidden;
  background:#0a1518;
}

.cover-medical img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center center;
}

/* Keep overlay subtle */
.cover-medical::after{
  background:
    linear-gradient(
      180deg,
      transparent 72%,
      rgba(5,11,13,.14) 100%
    );
}


/* =========================================================
   PROJECT COPY
========================================================= */

.project-copy{
  padding:26px 28px 30px;
}

.project-copy h3{
  font-size:1.5rem;
  line-height:1.15;

  margin:0 0 12px;
}

.project-copy p{
  margin:0;

  color:var(--muted);
}


/* =========================================================
   PROJECT TAGS
========================================================= */

.tags{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin:16px 0;
}

.tag{
  padding:6px 9px;

  border-radius:999px;

  border:1px solid rgba(164,210,215,.12);

  font-size:.72rem;

  color:#9fb4b8;

  background:rgba(255,255,255,.015);
}

.arrow{
  color:var(--accent);

  font-weight:800;
}


/* =========================================================
   SKILLS
========================================================= */

.skill-groups{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:18px;

  margin-top:30px;
}

.chips{
  display:flex;
  flex-wrap:wrap;

  gap:9px;

  margin-top:16px;
}

.chip{
  padding:7px 10px;

  border-radius:9px;

  background:#0b1c20;

  border:1px solid var(--line);

  font-size:.82rem;

  color:#d4e4e6;
}


/* =========================================================
   ACHIEVEMENTS
========================================================= */

.achievement{
  display:grid;

  grid-template-columns:1.1fr .9fr;

  gap:20px;

  padding:30px;

  border:1px solid rgba(110,231,231,.28);

  border-radius:26px;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(110,231,231,.09),
      transparent 28%
    ),
    var(--panel);
}

.stats{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:12px;
}

.stat{
  padding:20px;

  border:1px solid var(--line);

  border-radius:16px;

  background:#0b171b;
}

.stat strong{
  display:block;

  font-size:1.45rem;

  color:var(--accent);
}


/* =========================================================
   ABOUT
========================================================= */

#about{
  padding:72px 0 68px;
}

.about-grid{
  display:grid;

  grid-template-columns:1.15fr .85fr;

  gap:36px;

  align-items:start;
}

.evaluation{
  padding:24px;

  border:1px solid var(--line);

  border-radius:22px;

  background:var(--panel);

  align-self:start;
}

.eval-row{
  display:flex;

  justify-content:space-between;

  padding:10px 0;

  border-bottom:1px solid var(--line);
}

.eval-row:last-child{
  border-bottom:0;
}


/* =========================================================
   CTA
========================================================= */

.cta{
  padding:42px;

  border:1px solid rgba(110,231,231,.3);

  border-radius:28px;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(110,231,231,.1),
      transparent 26%
    ),
    #0b181c;

  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:20px;
}

.case-cta-section{
    padding-top:30px;
    padding-bottom:60px;
}

.case-cta-section .btn{
    width:auto;
}

.cta h2{
  margin:0 0 8px;

  font-size:2rem;
}

/* =========================================================
   CASE STUDY CTA
========================================================= */

.case-cta-section{
    padding-top:35px;
    padding-bottom:70px;
}

.case-cta-section .cta{
    margin-top:0;
}

.case-cta-section .cta-copy{
    min-width:0;
    flex:1;
}

.case-cta-section .cta-copy p{
    max-width:850px;
    margin-bottom:0;
}

.case-cta-section .btn{
    white-space:nowrap;
    flex-shrink:0;
}

/* =========================================================
   FOOTER
========================================================= */

.footer{
  padding:34px 0 46px;

  border-top:1px solid var(--line);

  color:#8fa7ab;

  font-size:.9rem;
}

.footer-inner{
  display:flex;

  justify-content:space-between;

  gap:20px;

  flex-wrap:wrap;
}


/* =========================================================
   CASE STUDIES
========================================================= */

.case-head{
  padding:86px 0 44px;
}

.case-head h1{
  font-size:clamp(2.8rem,6vw,5.7rem);

  max-width:980px;
}

.case-layout{
  display:grid;

  grid-template-columns:1fr 330px;

  gap:42px;
}

.case-section{
  padding:34px 0;

  border-top:1px solid var(--line);
}

.case-section h2{
  font-size:1.55rem;

  margin:0 0 14px;
}

.case-section ul{
  padding-left:20px;

  color:var(--muted);
}

.case-section li{
  margin:7px 0;
}

.metric{
  padding:26px;

  border:1px solid rgba(110,231,231,.32);

  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      #0c1d21,
      #091519
    );

  margin-bottom:0;
}

.metric strong{
  display:block;

  font-size:2.05rem;

  color:var(--accent);

  line-height:1.05;
}

.metric span{
  color:var(--muted);

  font-size:.86rem;
}

.sidebar{
  position:sticky;

  top:96px;

  height:max-content;
}

.media-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:12px;
}

.media-ph{
  aspect-ratio:16 / 10;

  border:1px dashed rgba(110,231,231,.26);

  border-radius:16px;

  display:grid;

  place-items:center;

  color:#759498;

  text-align:center;

  padding:16px;

  background:#091619;
}

.back{
  display:inline-flex;

  gap:8px;

  color:#bdd1d3;

  margin-bottom:18px;
}

.kicker{
  color:var(--accent);

  font-weight:800;
}

.case-visual{
  min-height:380px;

  border-radius:26px;

  border:1px solid var(--line);

  overflow:hidden;

  margin-top:32px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

  .intro-grid{
    flex-direction:column;

    align-items:flex-start;

    gap:40px;
  }

  .portrait{
    width:min(100%,380px);

    flex:none;

    align-self:center;
  }


  /* ABOUT */

  .about-grid{
    grid-template-columns:1fr;

    gap:28px;
  }


  /* ACHIEVEMENTS / CASE */

  .achievement,
  .case-layout{
    grid-template-columns:1fr;
  }


  /* EXPERTISE */

  .expertise{
    grid-template-columns:repeat(3,1fr);
  }


  /* SERVICES */

  .grid-3{
    grid-template-columns:1fr 1fr;
  }


  /* PROJECTS */

  .project-card,
  .project-card.featured{
    grid-column:span 12;
  }

  .project-card.featured{
    display:flex;
    flex-direction:column;
  }

  .project-card.featured .cover{
    width:100%;

    aspect-ratio:16 / 9;

    min-height:0;
    height:auto;
  }

  .project-card.featured .project-image img{
    width:100%;
    height:100%;

    object-fit:cover;
  }

  .featured .project-copy{
    padding:28px;

    display:block;
  }


  /* SKILLS */

  .skill-groups{
    grid-template-columns:1fr;
  }


  /* CASE SIDEBAR */

  .sidebar{
    position:static;
  }


  /* CTA */

  .cta{
    align-items:flex-start;

    flex-direction:column;
  }


  /* SECTION SUBTITLES */

  #services .section-sub,
  #projects .section-sub{
    max-width:720px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:680px){

  .container{
    width:min(
      calc(100% - 26px),
      var(--max)
    );
  }

  .section{
    padding:76px 0;
  }

  .intro{
    padding-top:48px;
  }


  /* NAV */

  .nav-links{
    display:none;

    position:absolute;

    top:72px;
    left:13px;
    right:13px;

    flex-direction:column;

    padding:18px;

    background:#081519;

    border:1px solid var(--line);

    border-radius:16px;
  }

  .nav-links.open{
    display:flex;
  }

  .menu-btn{
    display:block;
  }


  /* INTRO */

  h1{
    font-size:clamp(2.7rem,14vw,4.4rem);
  }

  .actions{
    width:100%;
  }

  .actions .btn{
    width:100%;
  }

  .portrait{
    width:min(100%,340px);
  }


  /* SERVICES */

  .grid-3{
    grid-template-columns:1fr;
  }

  #services .card{
    min-height:0;
  }


  /* EXPERTISE */

  .expertise{
    grid-template-columns:repeat(2,1fr);
  }


  /* ACHIEVEMENTS */

  .stats{
    grid-template-columns:1fr;
  }


  /* MEDIA */

  .media-grid{
    grid-template-columns:1fr;
  }


  /* PROJECTS */

  .project-copy h3,
  .featured .project-copy h3{
    font-size:1.4rem;
  }

  .project-copy,
  .featured .project-copy{
    padding:22px;
  }

  .project-card:not(.featured) .cover,
  .project-card.featured .cover{
    aspect-ratio:16 / 9;
  }

  .case-cta-section{
    padding-top:25px;
    padding-bottom:55px;
  }

  .case-cta-section .cta{
      padding:28px 24px;
  }

  .case-cta-section .btn{
      width:100%;
      white-space:normal;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  *{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}

#approach{
  padding-top:80px;
  padding-bottom:70px;
}

/* =========================================
   TwinSight Case Study
========================================= */


/* Back link + project category */

.case-header-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-bottom:34px;
}


/* Project introduction */

.case-lead{
    width:100%;
    max-width:1050px;
    font-size:20px;
    line-height:1.65;
}


/* Main demo */

.case-media{
    width:100%;
    margin-top:36px;
    border:1px solid var(--line);
    border-radius:28px;
    overflow:hidden;
    background:#000;
}

.case-media video{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}


/* Mobile */

@media (max-width:900px){

    .case-lead{
        max-width:100%;
        font-size:18px;
    }

    .case-media{
        border-radius:20px;
    }

}

/* =========================================
   TwinSight Workflow
========================================= */

.approach-intro{
    max-width:880px;
    margin-bottom:28px;
}


/* Workflow container */

.workflow-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}


/* Individual step */

.workflow-step{
    position:relative;

    padding:28px;

    border:1px solid var(--line);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(105,209,206,.045),
            rgba(17,31,39,.72)
        );

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.workflow-step:hover{
    transform:translateY(-4px);

    border-color:rgba(105,209,206,.36);

    background:
        linear-gradient(
            145deg,
            rgba(105,209,206,.08),
            rgba(17,31,39,.9)
        );
}


/* Step number */

.workflow-number{
    display:block;

    margin-bottom:18px;

    color:var(--accent);

    font-size:13px;
    font-weight:800;

    letter-spacing:.14em;
}


/* Step title */

.workflow-step h3{
    margin:0 0 10px;

    color:var(--text);

    font-size:24px;
    line-height:1.2;
}


/* Step description */

.workflow-step p{
    margin:0;

    color:var(--muted);

    font-size:15.5px;
    line-height:1.75;
}


/* Mobile */

@media (max-width:700px){

    .workflow-grid{
        grid-template-columns:1fr;
    }

    .workflow-step{
        padding:24px;
    }

}

/* =========================================
   Technical Decisions
========================================= */

.decisions-intro{
    max-width:850px;
    margin-bottom:26px;
}

.decision-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.decision-card{
    padding:24px;
    border:1px solid var(--line);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(105,209,206,.04),
            rgba(17,31,39,.7)
        );
}

.decision-label,
.result-label{
    display:block;
    margin-bottom:14px;

    color:var(--accent);

    font-size:11px;
    font-weight:800;
    letter-spacing:.13em;
}

.decision-card h3{
    margin:0 0 10px;

    color:var(--text);
    font-size:18px;
    line-height:1.3;
}

.decision-card p{
    margin:0;

    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}


/* =========================================
   Results
========================================= */

.result-highlight{
    padding:28px;

    border:1px solid rgba(105,209,206,.24);
    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            rgba(105,209,206,.07),
            rgba(17,31,39,.55)
        );
}

.result-copy h3{
    max-width:700px;
    margin:0 0 12px;

    color:var(--text);
    font-size:22px;
    line-height:1.35;
}

.result-copy p{
    max-width:800px;
    margin:0;

    color:var(--muted);
    line-height:1.75;
}


/* =========================================
   Why It Matters
========================================= */

.why-text{
    max-width:900px;
    line-height:1.8;
}


/* =========================================
   Responsive
========================================= */

@media (max-width:900px){

    .decision-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================
   TwinSight System Demonstrations
========================================= */

.system-demos{
    padding-top:70px;
    padding-bottom:50px;
}

.system-demo-heading{
    margin-bottom:30px;
}

.system-demo-heading .eyebrow{
    display:block;
    margin-bottom:10px;
}

.system-demo-heading h2{
    margin:0 0 12px;

    color:var(--text);

    font-size:32px;
    line-height:1.2;
}

.system-demo-heading p{
    max-width:900px;
    margin:0;
}


/* Three equal demonstration cards */

.demo-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
}


/* Card */

.demo-card{
    min-width:0;
    overflow:hidden;

    border:1px solid var(--line);
    border-radius:20px;

    background:var(--panel);
}


/* Video */

.demo-card video{
    width:100%;
    aspect-ratio:16 / 9;

    display:block;

    background:#000;

    object-fit:contain;
}


/* Card content */

.demo-info{
    padding:20px 22px 22px;
}

.demo-label{
    display:block;

    margin-bottom:9px;

    color:var(--accent);

    font-size:11px;
    font-weight:800;
    letter-spacing:.13em;
}

.demo-info h3{
    margin:0 0 9px;

    color:var(--text);

    font-size:20px;
    line-height:1.3;
}

.demo-info p{
    margin:0;

    color:var(--muted);

    font-size:14px;
    line-height:1.6;
}


/* Tablet */

@media (max-width:900px){

    .demo-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}


/* Mobile */

@media (max-width:650px){

    .demo-grid{
        grid-template-columns:1fr;
    }

    .system-demos{
        padding-top:55px;
        padding-bottom:60px;
    }

}

/* =========================================================
   CASE STUDY CTA
========================================================= */

.case-cta-section{
    padding-top:35px;
    padding-bottom:70px;
}

.case-cta-section .cta{
    margin-top:0;
}

.case-cta-section .cta-copy{
    min-width:0;
    flex:1;
}

.case-cta-section .cta-copy p{
    max-width:850px;
    margin-bottom:0;
}

.case-cta-section .btn{
    white-space:nowrap;
    flex-shrink:0;
}

/* =========================================
   Chaotic Forecasting Comparison
========================================= */
.forecast-comparison p{
    margin:0;
    padding:12px 0;

    border-bottom:1px solid var(--line);

    line-height:1.5;
}

.forecast-comparison p:last-child{
    border-bottom:0;
    padding-bottom:0;
}

.forecast-comparison strong{
    color:var(--text);
    font-size:1rem;
}

.sidebar{
    position:sticky;
    top:96px;
    height:max-content;

    display:flex;
    flex-direction:column;
    gap:18px;
}

.chaos-hero-visual{
    margin-top:40px;
    width:100%;

    min-height:0;    
    height:auto;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:28px;

    background:#0B151B;
}

.chaos-hero-visual img{
    display:block;
    width:100%;
    height:auto;
}

/* =========================================
   Chaotic System Forecasting — Spacing
========================================= */

.chaos-case-head{
    padding-bottom:20px;
}

.chaos-case-content{
    padding-top:0;
    padding-bottom:80px;
}

.chaos-case-content .case-section:first-child{
    padding-top:24px;
}

/* =========================================
   Chaotic Case — Header Width
========================================= */

.chaos-case-head h1{
    max-width:none;
    width:100%;
    white-space:nowrap;
    font-size:clamp(52px, 5.6vw, 86px);
}

.chaos-case-head .case-lead{
    max-width:1150px;
}


/* Allow natural wrapping on smaller screens */
@media (max-width:1100px){

    .chaos-case-head h1{
        white-space:normal;
        font-size:clamp(48px, 7vw, 76px);
    }

    .chaos-case-head .case-lead{
        max-width:900px;
    }
}

/* =========================================
   Chaotic Case — Experimental Evidence
========================================= */

.chaos-evidence-section{
    padding-bottom:20px;
}

.chaos-evidence-intro{
    max-width:850px;
    margin-bottom:28px;
}


/* Stack research figures vertically */

.chaos-evidence-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
}


/* Research figure card */

.chaos-evidence-card{
    margin:0;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(105,209,206,.035),
            rgba(17,31,39,.72)
        );
}


/* Figure container */

.chaos-evidence-image{
    width:100%;

    overflow:hidden;

    background:#091619;

    border-bottom:1px solid var(--line);
}


/* Scientific plot */

.chaos-evidence-image img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;
}


/* Figure description */

.chaos-evidence-card figcaption{
    padding:22px 24px 24px;
}


.chaos-evidence-label{
    display:block;

    margin-bottom:9px;

    color:var(--accent);

    font-size:11px;
    font-weight:800;

    letter-spacing:.13em;
}


.chaos-evidence-card h3{
    margin:0 0 9px;

    color:var(--text);

    font-size:20px;
    line-height:1.3;
}


.chaos-evidence-card p{
    margin:0;

    color:var(--muted);

    font-size:14px;
    line-height:1.7;
}


/* Mobile */

@media (max-width:680px){

    .chaos-evidence-grid{
        gap:20px;
    }

    .chaos-evidence-card{
        border-radius:16px;
    }

    .chaos-evidence-card figcaption{
        padding:18px;
    }

}


/* =========================================
   Predictive Maintenance — Header
========================================= */

.predictive-case-head h1{
    width:100%;
    max-width:1180px;

    white-space:normal;

    font-size:clamp(52px, 4.7vw, 74px);
    line-height:1.04;

    overflow-wrap:normal;
    word-break:normal;
}


/* Description */

.predictive-case-head .case-lead{
    width:100%;
    max-width:1200px;
}


/* Back link + eyebrow */

.predictive-header-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:18px;
    margin-bottom:34px;
}

.predictive-header-meta .back,
.predictive-header-meta .case-eyebrow{
    display:block;
}


/* =========================================
   Predictive Maintenance — Cover
========================================= */

.predictive-case-head .predictive-cover{
    width:100%;
    height:auto;
    min-height:0;

    overflow:hidden;

    border-radius:22px;
    border:1px solid var(--line);

    background:var(--panel);
}

.predictive-case-head .predictive-cover img{
    width:100%;
    height:auto;

    display:block;

    object-fit:contain;
    object-position:center;
}

/* ========================================
   Predictive Maintenance — Evidence
======================================== */

.predictive-evidence{
    margin-top:10px;
}

.evidence-intro{
    margin-bottom:28px;
}

.predictive-evidence-card{
    margin:0 0 28px;
    overflow:hidden;

    border:1px solid var(--line);
    border-radius:20px;

    background:var(--panel);
}

.predictive-evidence-card img{
    width:100%;
    height:auto;
    display:block;

    object-fit:contain;
    background:#fff;
}

.predictive-evidence-card figcaption{
    padding:22px 26px 25px;
}

.predictive-evidence-card .evidence-label{
    display:block;
    margin-bottom:10px;

    color:var(--accent);
    font-size:11px;
    font-weight:800;
    letter-spacing:.13em;
}

.predictive-evidence-card h3{
    margin:0 0 10px;

    color:var(--text);
    font-size:22px;
    line-height:1.3;
}

.predictive-evidence-card p{
    margin:0;

    color:var(--muted);
    font-size:15px;
    line-height:1.7;
}


/* Mobile */

@media (max-width:680px){

    .predictive-evidence-card figcaption{
        padding:19px 20px 22px;
    }

    .predictive-evidence-card h3{
        font-size:20px;
    }
}

/* =========================================
   Tablet
========================================= */

@media (max-width:900px){

    .predictive-case-head h1{
        font-size:clamp(48px, 8vw, 68px);
    }

    .predictive-case-head .predictive-cover{
        aspect-ratio:16 / 8;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width:680px){

    .predictive-case-head h1{
        font-size:clamp(40px, 11vw, 56px);
        line-height:1.05;
    }

    .predictive-case-head .case-lead{
        max-width:100%;
    }

    .predictive-header-meta{
        gap:14px;
        margin-bottom:26px;
    }

    .predictive-case-head .predictive-cover{
        aspect-ratio:16 / 10;
    }

}


.predictive-case-content{
    padding-top:0;
    padding-bottom:80px;
}

.predictive-case-content .case-section:first-child{
    padding-top:24px;
}


/* Main metric */

.predictive-metric strong{
    display:block;

    margin-bottom:8px;

    font-size:3.2rem;
    line-height:.95;

    color:var(--accent);
}


.predictive-metric-title{
    display:block;

    margin-bottom:5px;

    color:var(--text) !important;

    font-size:1rem !important;
    font-weight:700;

    line-height:1.35;
}


.predictive-metric-sub{
    display:block;

    color:var(--muted) !important;

    font-size:.84rem !important;
    line-height:1.45;
}


/* GitHub button */

.predictive-github{
    display:flex;
}

.predictive-github .btn{
    width:auto;
}


/* Mobile */

@media (max-width:680px){

    .predictive-case-content{
        padding-bottom:60px;
    }

    .predictive-metric strong{
        font-size:2.8rem;
    }

}

/* =========================================
   Oil Spill Semantic Segmentation
========================================= */


/* Header */

.oil-case-head h1{
    width:100%;
    max-width:1180px;

    white-space:normal;

    font-size:clamp(52px, 5vw, 78px);
    line-height:1.04;

    overflow-wrap:normal;
    word-break:normal;
}


.oil-case-head .case-lead{
    width:100%;
    max-width:1100px;
}


/* Back link + eyebrow */

.oil-header-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:18px;
    margin-bottom:34px;
}

.oil-header-meta .back,
.oil-header-meta .case-eyebrow{
    display:block;
}


/* Cover */

.oil-case-head .oil-cover{
    width:100%;
    height:auto;

    min-height:0;

    aspect-ratio:16 / 7;

    overflow:hidden;

    border-radius:22px;
    border:1px solid var(--line);

    background:var(--panel);
}

.oil-case-head .oil-cover img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;
}


/* Main content spacing */

.oil-case-content{
    padding-top:0;
    padding-bottom:80px;
}

.oil-case-content .case-section:first-child{
    padding-top:24px;
}


/* Sidebar metric */

.oil-metric strong{
    display:block;

    margin-bottom:8px;

    font-size:3.2rem;
    line-height:.95;

    color:var(--accent);
}

.oil-metric-title{
    display:block;

    margin-bottom:5px;

    color:var(--text) !important;

    font-size:1rem !important;
    font-weight:700;

    line-height:1.35;
}

.oil-metric-sub{
    display:block;

    color:var(--muted) !important;

    font-size:.84rem !important;
    line-height:1.45;
}


/* Project context */

.oil-context{
    margin-top:14px !important;
    line-height:1.7;
}


/* GitHub */

.oil-github{
    display:flex;
}

.oil-github .btn{
    width:auto;
}


/* Evidence */

.oil-evidence-intro{
    max-width:850px;
    margin-bottom:28px;
}

.oil-evidence-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:14px;
}


/* Tablet */

@media (max-width:900px){

    .oil-case-head h1{
        font-size:clamp(48px, 8vw, 68px);
    }

    .oil-case-head .oil-cover{
        aspect-ratio:16 / 8;
    }

}


/* Mobile */

@media (max-width:680px){

    .oil-case-head h1{
        font-size:clamp(40px, 11vw, 56px);
        line-height:1.05;
    }

    .oil-case-head .case-lead{
        max-width:100%;
    }

    .oil-header-meta{
        gap:14px;
        margin-bottom:26px;
    }

    .oil-case-head .oil-cover{
        aspect-ratio:16 / 10;
    }

    .oil-case-content{
        padding-bottom:60px;
    }

    .oil-metric strong{
        font-size:2.8rem;
    }

    .oil-evidence-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================
   Skin Cancer Classification
========================================= */


/* =========================================
   Header
========================================= */

.skin-case-head h1{
    width:100%;
    max-width:1180px;

    white-space:normal;

    font-size:clamp(52px, 5.2vw, 80px);
    line-height:1.04;

    overflow-wrap:normal;
    word-break:normal;
}


.skin-case-head .case-lead{
    width:100%;
    max-width:1100px;
}


/* Back + eyebrow */

.skin-header-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:18px;

    margin-bottom:34px;
}

.skin-header-meta .back,
.skin-header-meta .case-eyebrow{
    display:block;
}


/* =========================================
   Skin Cancer — Hero Cover
========================================= */

.skin-case-head .skin-cover{
    width:100%;
    height:auto;
    min-height:0;

    aspect-ratio:16 / 7;

    overflow:hidden;

    border-radius:22px;
    border:1px solid var(--line);

    background:#0a1518;
}

.skin-case-head .skin-cover img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;
}


/* =========================================
   Main Content Spacing
========================================= */

.skin-case-content{
    padding-top:0;
    padding-bottom:80px;
}

.skin-case-content .case-section:first-child{
    padding-top:24px;
}


/* =========================================
   Sidebar Metrics
========================================= */

.skin-metric strong,
.skin-class-metric strong{
    display:block;

    margin-bottom:8px;

    font-size:3rem;
    line-height:.95;

    color:var(--accent);
}


.skin-metric-title{
    display:block;

    margin-bottom:5px;

    color:var(--text) !important;

    font-size:1rem !important;
    font-weight:700;

    line-height:1.35;
}


.skin-metric-sub{
    display:block;

    color:var(--muted) !important;

    font-size:.84rem !important;
    line-height:1.45;
}


/* Slight variation for second metric */

.skin-class-metric{
    background:
        linear-gradient(
            180deg,
            rgba(12,29,33,.92),
            rgba(9,21,25,.92)
        );
}


/* =========================================
   Research Disclaimer
========================================= */

.skin-research-card p{
    margin-top:14px;

    color:var(--muted);

    font-size:.88rem;
    line-height:1.7;
}


/* =========================================
   GitHub
========================================= */

.skin-github{
    display:flex;
}

.skin-github .btn{
    width:auto;
}


/* =========================================
   Experimental Evidence
========================================= */

.skin-evidence-intro{
    max-width:850px;

    margin-bottom:28px;
}


.skin-evidence-card{
    margin:0 0 28px;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:20px;

    background:var(--panel);
}


.skin-evidence-image{
    width:100%;

    overflow:hidden;

    border-bottom:1px solid var(--line);

    background:#fff;
}


.skin-evidence-image img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;
}


.skin-evidence-card figcaption{
    padding:22px 26px 25px;
}


.skin-evidence-label{
    display:block;

    margin-bottom:9px;

    color:var(--accent);

    font-size:11px;
    font-weight:800;

    letter-spacing:.13em;
}


.skin-evidence-card h3,
.skin-interface-placeholder h3{
    margin:0 0 9px;

    color:var(--text);

    font-size:21px;
    line-height:1.3;
}


.skin-evidence-card p,
.skin-interface-placeholder p{
    margin:0;

    color:var(--muted);

    font-size:14.5px;
    line-height:1.7;
}


/* =========================================
   Interface Video Placeholder
========================================= */

.skin-interface-placeholder{
    padding:26px;

    border:1px dashed rgba(105,209,206,.28);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(105,209,206,.035),
            rgba(17,31,39,.65)
        );
}


/* =========================================
   Tablet
========================================= */

@media (max-width:900px){

    .skin-case-head h1{
        font-size:clamp(48px, 8vw, 68px);
    }

    .skin-case-head .skin-cover{
        aspect-ratio:16 / 8;
    }

}

/* =========================================
   Skin Cancer — Dataset Sample
========================================= */

.skin-sample-image{
    aspect-ratio:16 / 8;
    background:#0a1518;
}

.skin-sample-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:38% 42%;
}

/* =========================================
   Mobile
========================================= */

@media (max-width:680px){

    .skin-case-head h1{
        font-size:clamp(40px, 11vw, 56px);
        line-height:1.05;
    }

    .skin-case-head .case-lead{
        max-width:100%;
    }

    .skin-header-meta{
        gap:14px;
        margin-bottom:26px;
    }

    .skin-case-head .skin-cover{
        aspect-ratio:16 / 10;
    }

    .skin-case-content{
        padding-bottom:60px;
    }

    .skin-metric strong,
    .skin-class-metric strong{
        font-size:2.7rem;
    }

    .skin-evidence-card figcaption{
        padding:19px 20px 22px;
    }

    .skin-interface-placeholder{
        padding:22px 20px;
    }

}


/* =========================================
   Skin Cancer — Interface Demonstration
========================================= */

.skin-interface-card{
    margin-top:28px;
}

.skin-interface-video{
    width:100%;
    overflow:hidden;

    background:#05090b;

    border-bottom:1px solid var(--line);
}

.skin-interface-video video{
    display:block;

    width:100%;
    height:auto;

    max-height:650px;

    object-fit:contain;

    background:#05090b;
}

/* =========================================
   Weather Forecasting Case Study
========================================= */


/* =========================================
   Header
========================================= */

.weather-case-head h1{
    width:100%;
    max-width:1180px;

    white-space:normal;

    font-size:clamp(52px, 5.4vw, 82px);
    line-height:1.04;

    overflow-wrap:normal;
    word-break:normal;
}


.weather-case-head .case-lead{
    width:100%;
    max-width:1150px;
}


/* Back link + eyebrow */

.weather-header-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:18px;

    margin-bottom:34px;
}


.weather-header-meta .back,
.weather-header-meta .case-eyebrow{
    display:block;
}


/* =========================================
   Hero Cover
========================================= */

.weather-case-head .weather-cover{
    width:100%;
    height:auto;

    min-height:0;

    aspect-ratio:16 / 7;

    overflow:hidden;

    border-radius:22px;
    border:1px solid var(--line);

    background:#0a1518;
}


.weather-case-head .weather-cover img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;
}


/* =========================================
   Main Content Spacing
========================================= */

.weather-case-content{
    padding-top:0;
    padding-bottom:80px;
}


.weather-case-content .case-section:first-child{
    padding-top:24px;
}


/* =========================================
   Sidebar Metric
========================================= */

.weather-metric strong{
    display:block;

    margin-bottom:8px;

    font-size:3.1rem;
    line-height:.95;

    color:var(--accent);
}


.weather-metric-title{
    display:block;

    margin-bottom:5px;

    color:var(--text) !important;

    font-size:1rem !important;
    font-weight:700;

    line-height:1.35;
}


.weather-metric-sub{
    display:block;

    color:var(--muted) !important;

    font-size:.84rem !important;
    line-height:1.5;
}


.weather-context-card p{
    margin-top:14px;

    color:var(--muted);

    font-size:.88rem;
    line-height:1.7;
}


/* =========================================
   GitHub
========================================= */

.weather-github{
    display:flex;
}


.weather-github .btn{
    width:auto;
}


/* =========================================
   Experimental Evidence
========================================= */

.weather-evidence-intro{
    max-width:860px;

    margin-bottom:28px;
}


.weather-evidence-card{
    margin:0 0 28px;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:20px;

    background:var(--panel);
}


.weather-evidence-image{
    width:100%;

    overflow:hidden;

    border-bottom:1px solid var(--line);

    background:#fff;
}


.weather-evidence-image img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;
}


.weather-evidence-card figcaption{
    padding:22px 26px 25px;
}


.weather-evidence-label{
    display:block;

    margin-bottom:9px;

    color:var(--accent);

    font-size:11px;
    font-weight:800;

    letter-spacing:.13em;
}


.weather-evidence-card h3,
.weather-interface-placeholder h3{
    margin:0 0 9px;

    color:var(--text);

    font-size:21px;
    line-height:1.3;
}


.weather-evidence-card p,
.weather-interface-placeholder p{
    margin:0;

    color:var(--muted);

    font-size:14.5px;
    line-height:1.7;
}


/* =========================================
   Interface Placeholder
========================================= */

.weather-interface-placeholder{
    padding:26px;

    border:1px dashed rgba(105,209,206,.28);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(105,209,206,.035),
            rgba(17,31,39,.65)
        );
}


/* =========================================
   Tablet
========================================= */

@media (max-width:900px){

    .weather-case-head h1{
        font-size:clamp(48px, 8vw, 68px);
    }

    .weather-case-head .weather-cover{
        aspect-ratio:16 / 8;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width:680px){

    .weather-case-head h1{
        font-size:clamp(40px, 11vw, 56px);
        line-height:1.05;
    }

    .weather-case-head .case-lead{
        max-width:100%;
    }

    .weather-header-meta{
        gap:14px;
        margin-bottom:26px;
    }

    .weather-case-head .weather-cover{
        aspect-ratio:16 / 10;
    }

    .weather-case-content{
        padding-bottom:60px;
    }

    .weather-metric strong{
        font-size:2.7rem;
    }

    .weather-evidence-card figcaption{
        padding:19px 20px 22px;
    }

    .weather-interface-placeholder{
        padding:22px 20px;
    }

}

.weather-interface-video{
    width:100%;
    overflow:hidden;
    background:#000;
    border-bottom:1px solid var(--line);
}

.weather-interface-video video{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:contain;
    background:#000;
}


/* =========================================
   Resume Screening System
========================================= */


/* =========================================
   Header
========================================= */

.resume-case-head h1{
    width:100%;
    max-width:1180px;

    white-space:normal;

    font-size:clamp(52px, 5.4vw, 82px);
    line-height:1.04;

    overflow-wrap:normal;
    word-break:normal;
}


.resume-case-head .case-lead{
    width:100%;
    max-width:1150px;
}


/* Back link + eyebrow */

.resume-header-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:18px;

    margin-bottom:34px;
}


.resume-header-meta .back,
.resume-header-meta .case-eyebrow{
    display:block;
}


/* =========================================
   Hero Cover
========================================= */

.resume-case-head .resume-cover{
    width:100%;
    height:auto;

    min-height:0;

    aspect-ratio:16 / 7;

    overflow:hidden;

    border-radius:22px;
    border:1px solid var(--line);

    background:#0a1518;
}


.resume-case-head .resume-cover img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;
}


/* =========================================
   Main Content
========================================= */

.resume-case-content{
    padding-top:0;
    padding-bottom:80px;
}


.resume-case-content .case-section:first-child{
    padding-top:24px;
}


/* =========================================
   Sidebar Metrics
========================================= */

.resume-metric strong,
.resume-category-metric strong{
    display:block;

    margin-bottom:8px;

    font-size:3rem;
    line-height:.95;

    color:var(--accent);
}


.resume-metric-title{
    display:block;

    margin-bottom:5px;

    color:var(--text) !important;

    font-size:1rem !important;
    font-weight:700;

    line-height:1.35;
}


.resume-metric-sub{
    display:block;

    color:var(--muted) !important;

    font-size:.84rem !important;
    line-height:1.5;
}


.resume-category-metric{
    background:
        linear-gradient(
            180deg,
            rgba(12,29,33,.92),
            rgba(9,21,25,.92)
        );
}


/* =========================================
   Workflow Card
========================================= */

.resume-context-card p{
    margin-top:14px;

    color:var(--muted);

    font-size:.88rem;
    line-height:1.7;
}


/* =========================================
   GitHub
========================================= */

.resume-github{
    display:flex;
}


.resume-github .btn{
    width:auto;
}


/* =========================================
   Evidence
========================================= */

.resume-evidence-intro{
    max-width:850px;

    margin-bottom:28px;
}


.resume-interface-placeholder{
    padding:26px;

    border:1px dashed rgba(105,209,206,.28);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(105,209,206,.035),
            rgba(17,31,39,.65)
        );
}


.resume-evidence-label{
    display:block;

    margin-bottom:9px;

    color:var(--accent);

    font-size:11px;
    font-weight:800;

    letter-spacing:.13em;
}


.resume-interface-placeholder h3{
    margin:0 0 9px;

    color:var(--text);

    font-size:21px;
    line-height:1.3;
}


.resume-interface-placeholder p{
    margin:0;

    color:var(--muted);

    font-size:14.5px;
    line-height:1.7;
}


/* =========================================
   Tablet
========================================= */

@media (max-width:900px){

    .resume-case-head h1{
        font-size:clamp(48px, 8vw, 68px);
    }

    .resume-case-head .resume-cover{
        aspect-ratio:16 / 8;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width:680px){

    .resume-case-head h1{
        font-size:clamp(40px, 11vw, 56px);
        line-height:1.05;
    }

    .resume-case-head .case-lead{
        max-width:100%;
    }

    .resume-header-meta{
        gap:14px;
        margin-bottom:26px;
    }

    .resume-case-head .resume-cover{
        aspect-ratio:16 / 10;
    }

    .resume-case-content{
        padding-bottom:60px;
    }

    .resume-metric strong,
    .resume-category-metric strong{
        font-size:2.7rem;
    }

    .resume-interface-placeholder{
        padding:22px 20px;
    }

}

/* =========================================
   Resume Screening — Evidence
========================================= */

.resume-evidence-intro{
    max-width:850px;
    margin-bottom:28px;
}


.resume-evidence-card{
    margin:0 0 28px;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:20px;

    background:var(--panel);
}


.resume-evidence-image{
    width:100%;

    overflow:hidden;

    border-bottom:1px solid var(--line);

    background:#fff;
}


.resume-evidence-image img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;
}


.resume-evidence-card figcaption{
    padding:22px 26px 25px;
}


.resume-evidence-label{
    display:block;

    margin-bottom:9px;

    color:var(--accent);

    font-size:11px;
    font-weight:800;

    letter-spacing:.13em;
}


.resume-evidence-card h3{
    margin:0 0 9px;

    color:var(--text);

    font-size:21px;
    line-height:1.3;
}


.resume-evidence-card p{
    margin:0;

    color:var(--muted);

    font-size:14.5px;
    line-height:1.7;
}


@media (max-width:680px){

    .resume-evidence-card figcaption{
        padding:19px 20px 22px;
    }

}

.oil-demo-section {
  padding: 34px 0;
  border-top: 1px solid var(--line);
}

.oil-demo-section .section-heading {
  margin-bottom: 28px;
}

.oil-demo-section .section-heading h2 {
  margin: 8px 0 12px;
}

.oil-demo-section .section-heading p {
  max-width: 780px;
  color: var(--muted);
  line-height: 1.8;
}

.oil-demo-video {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #000;
}

.oil-demo-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}