@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');
:root{
    --bg:#f7f7f5;
    --card:#ffffff;
    --text:#0d0d0d;
    --muted:#5c5c5c;
    --border:#1b1b1b;
    --orange:#ff6200;
    --soft:#ededed;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    background:var(--bg);
    color:var(--text);
    transition:
    background .25s ease,
    color .25s ease;
}

img{
    max-width:100%;
    display:block;
}

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

.container{
    width:min(1500px,92%);
    margin:auto;
}

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

.navbar{
    height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.nav-left{
    display:flex;
    align-items:center;
    gap:18px;
}

.logo{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.logo h1{
    font-size:30px;
    font-weight:900;
    letter-spacing:-0.03em;
}

.logo-dot{
    width:8px;
    height:8px;
    background:var(--orange);
    border-radius:50%;
    margin-top:10px;
}

.logo-meta{
    border-left:1px solid rgba(0,0,0,.12);
    padding-left:18px;
}

.logo-meta h4{
    font-size:18px;
    font-weight:600;
}

.logo-meta p{
    font-size:13px;
    color:var(--muted);
    margin-top:3px;
}

.nav-menu{
    display:flex;
    gap:42px;
}

.nav-menu a{
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
    position:relative;
}

.nav-menu a span{
    color:var(--muted);
}

.nav-menu a.active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-29px;
    width:100%;
    height:2px;
    background:var(--orange);
}

.nav-right{
    display:flex;
    align-items:center;
    gap:18px;
}

.theme-switch{
    width:56px;
    height:28px;
    border:1.5px solid var(--border);
    border-radius:999px;
    position:relative;
    cursor:pointer;
    transition:.25s ease;
}

.theme-switch::after{
    content:'';
    width:18px;
    height:18px;
    background:var(--text);
    border-radius:50%;
    position:absolute;
    top:4px;
    left:4px;
    transition:.25s ease;
}

body.dark-mode .theme-switch::after{
    transform:translateX(28px);
}

.mode{
    font-size:14px;
}

/* =========================
HERO
========================= */

.hero{
    padding:54px 0 48px;
    display:grid;
    grid-template-columns:340px 1fr 240px;
    gap:50px;
    align-items:center;
}

/* LEFT IMAGE */

.hero-image-wrap{
    position:relative;
    width:100%;
    height:420px;
}

.orange-shape{
    position:absolute;
    width:240px;
    height:240px;
    background:var(--orange);
    border-radius:42px;
    left:-10px;
    top:110px;
    transform:rotate(-18deg);
}

.dot-grid{
    position:absolute;
    left:-8px;
    top:70px;
    width:120px;
    height:120px;
    background-image:radial-gradient(#111 1.5px, transparent 1.5px);
    background-size:16px 16px;
}

.profile-card{
    position:absolute;
    width:240px;
    height:285px;
    border:2px solid var(--border);
    border-radius:32px;
    overflow:hidden;
    background:var(--card);
    left:55px;
    top:35px;
    z-index:2;
}

.profile-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.plus-btn{
    position:absolute;
    width:42px;
    height:42px;
    background:var(--orange);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:32px;
    right:5px;
    bottom:55px;
    z-index:3;
}

/* CENTER CONTENT */

.hero-content small{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    margin-bottom:18px;
}

.hero-content small::before{
    content:'';
    width:24px;
    height:2px;
    background:var(--orange);
}

.hero-content h1{
    font-size:84px;
    line-height:.92;
    letter-spacing:-0.03em;
    max-width:760px;
    margin-bottom:24px;
}

.hero-content p{
    max-width:620px;
    font-size:20px;
    line-height:1.6;
    color:var(--muted);
    margin-bottom:28px;
}

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.tag{
    border:1px solid rgba(0,0,0,.12);
    background:var(--card);
    border-radius:999px;
    padding:10px 16px;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:10px;
}

.tag::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--orange);
}

/* RIGHT SIDEBAR */

.hero-side{
    border-left:1px solid rgba(0,0,0,.08);
    padding-left:40px;
}

.side-block{
    margin-bottom:48px;
}

.side-block small{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:22px;
}

.side-block small::before{
    content:'';
    width:6px;
    height:6px;
    background:var(--orange);
    border-radius:50%;
}

.side-block p{
    font-size:17px;
    line-height:1.9;
}

.socials{
    display:flex;
    gap:22px;
    font-size:28px;
}

/* =========================
INFO STRIP
========================= */

.info-strip{
    display:flex;
    align-items:center;
    gap:22px;
    padding-bottom:44px;
}

.info-strip span{
    width:12px;
    height:12px;
    border-radius:50%;
    border:2px solid var(--orange);
}

.info-strip p{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.14em;
}

.info-strip .line{
    flex:1;
    border-top:2px dotted rgba(0,0,0,.18);
}

/* =========================
TOP GRID
========================= */

.top-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
    margin-bottom:52px;
}

.mini-card{
    background:var(--card);
    border:2px solid var(--border);
    border-radius:18px;
    padding:22px;
    min-height:230px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.card-number{
    font-size:38px;
    font-weight:700;
    color:var(--orange);
    letter-spacing:-0.05em;
}

.card-line{
    flex:1;
    margin-left:16px;
    border-top:2px dotted rgba(255,98,0,.6);
    position:relative;
}

.card-line::after{
    content:'';
    width:8px;
    height:8px;
    border:2px solid var(--orange);
    border-radius:50%;
    background:var(--card);
    position:absolute;
    right:-4px;
    top:-6px;
}

.mini-card h3{
    font-size:22px;
    line-height:1.2;
    letter-spacing:-0.04em;
    margin-top:26px;
    margin-bottom:16px;
}

.mini-card p{
    font-size:15px;
    line-height:1.7;
    color:var(--muted);
}

.arrow{
    margin-top:22px;
    font-size:26px;
    color:var(--orange);
    text-align:right;
}

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

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.section-title{
    display:flex;
    align-items:center;
    gap:14px;
}

.section-title span{
    width:18px;
    height:2px;
    background:var(--orange);
}

.section-title h4{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.28em;
}

.view-link{
    color:var(--orange);
    font-size:16px;
}

.case-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:70px;
}

.case-card{
    background:var(--card);
    border:2px solid var(--border);
    border-radius:18px;
    padding:28px;
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.case-content{
    flex:1;
}

.case-card small{
    color:var(--orange);
    font-size:28px;
    font-weight:700;
    display:block;
    margin-bottom:10px;
}

.case-card h3{
    font-size:28px;
    line-height:1.2;
    letter-spacing:-0.04em;
    margin-bottom:14px;
}

.case-card p{
    font-size:15px;
    color:var(--muted);
    line-height:1.7;
    margin-bottom:18px;
}

.case-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.case-tags span{
    background:var(--soft);
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
}

.open{
    color:var(--orange);
    font-weight:600;
}

.case-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:110px;
}

.circle{
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px dotted rgba(255,98,0,.6);
}

/* =========================
PROCESS
========================= */

.process{
    margin-bottom:70px;
}

.process-line{
    position:relative;
    margin-top:36px;
    border-top:2px dotted rgba(255,98,0,.45);
    display:grid;
    grid-template-columns:repeat(5,1fr);
}

.process-step{
    position:relative;
    text-align:center;
    padding-top:50px;
}

.step-circle{
    width:40px;
    height:40px;
    border-radius:50%;
    border:2px solid var(--orange);
    background:var(--card);
    color:var(--orange);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    position:absolute;
    top:-22px;
    left:50%;
    transform:translateX(-50%);
}

.process-step h5{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.2em;
    margin-bottom:16px;
}

.process-step p{
    max-width:220px;
    margin:auto;
    line-height:1.7;
    color:var(--muted);
    font-size:14px;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1300px){

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

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

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

.hero-side{
    border-left:none;
    padding-left:0;
}

}

@media(max-width:768px){

.hero-content h1{
    font-size:58px;
}

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

.process-line{
    grid-template-columns:1fr;
    gap:40px;
    border-top:none;
}

.process-step{
    padding-top:20px;
}

.step-circle{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    margin:auto auto 20px;
}

.nav-menu{
    display:none;
}

}

.theme-switch{
    width:56px;
    height:28px;
    border:1.5px solid var(--border);
    border-radius:999px;
    position:relative;
    cursor:pointer;
    transition:.25s ease;
}

.theme-switch::after{
    content:'';
    width:18px;
    height:18px;
    background:var(--text);
    border-radius:50%;
    position:absolute;
    top:4px;
    right:4px;
    transition:.25s ease;
}

body.dark-mode .theme-switch::after{
    transform:translateX(28px);
}

.hero-actions{
    margin-top:28px;
}

.cv-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:2px solid var(--border);
    background:var(--card);
    padding:14px 24px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    transition:.2s ease;
}

.cv-btn:hover{
    background:var(--orange);
    color:white;
    border-color:var(--orange);
}

.skills-tools{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-bottom:70px;
}

.skills-box{
    border:2px solid var(--border);
    border-radius:20px;
    padding:28px;
    background:var(--card);
}

.skill-cloud{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:24px;
}

.skill-cloud span{
    padding:12px 16px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.1);
    background:rgba(255,255,255,.7);
    font-size:14px;
}

body.dark-mode{
    --bg:#0f0f10;
    --card:#181818;
    --text:#f5f5f5;
    --muted:#b8b8b8;
    --border:#f1f1f1;
    --soft:#232323;
}

body.dark-mode .skill-cloud span{
    background:#222;
}
.case-category{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.case-category span{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--orange);
    border-bottom:1px solid rgba(255,98,0,.35);
    padding-bottom:4px;
}

.about-section{
    margin-bottom:70px;
}

.about-box{
    margin-top:24px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    border:2px solid var(--border);
    border-radius:24px;
    padding:40px;
    background:var(--card);
}

.about-left h2{
    font-size:42px;
    line-height:1.1;
    letter-spacing:-0.05em;
}

.about-right p{
    color:var(--muted);
    line-height:1.9;
    margin-bottom:18px;
}

.contact-section{
    margin-bottom:80px;
}

.contact-box{
    margin-top:24px;
    border:2px solid var(--border);
    border-radius:24px;
    padding:40px;
    background:var(--card);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.contact-box h2{
    font-size:48px;
    letter-spacing:-0.03em;
}

.contact-links{
    display:flex;
    gap:26px;
}

.contact-links a{
    color:var(--orange);
    font-weight:600;
}

.footer{
    border-top:1px solid rgba(0,0,0,.08);
    padding:40px 0 70px;
}

.footer-links{
    display:flex;
    gap:24px;
    margin:18px 0;
}

.footer-links a{
    color:var(--orange);
}

.footer-note{
    max-width:900px;
    color:var(--muted);
    line-height:1.8;
    font-size:14px;
}


body.dark-mode .tag,
body.dark-mode .skill-cloud span,
body.dark-mode .case-tags span{
    background:#222;
    border-color:#333;
    color:#f5f5f5;
}

body.dark-mode .mini-card,
body.dark-mode .case-card,
body.dark-mode .skills-box,
body.dark-mode .about-box,
body.dark-mode .contact-box{
    background:var(--card);
}

body.dark-mode .theme-switch{
    background:#1e1e1e;
}


/* Case Study Listing Page */

.case-listing {
  width: min(1500px, 92%);
  margin: 0 auto;
  padding: 70px 0;
  font-family: 'Lexend', sans-serif;
}

.case-listing-head {
  margin-bottom: 42px;
  max-width: 1200px;
}

.section-kicker {
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.case-listing-head h1 {
  font-size: 72px;
  line-height: .95;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.case-listing-head p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 1200px;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.case-card {
  min-height: 520px;
  border: 2px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.case-number {
  display: block;
  color: var(--orange);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}


.case-card h2 {
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.case-card p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 24px;
}

.case-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 26px;
}

.case-categories span {
  color: var(--orange);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 98, 0, .35);
  padding-bottom: 5px;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}

.case-tags span {
  font-size: 14px;
  color: var(--text);
}

.open-link {
  display: inline-block;
  color: var(--orange);
  font-size: 17px;
  font-weight: 700;
  margin-top: 34px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 54px;
}

.page-btn {
  min-width: 44px;
  height: 44px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
}

.page-btn.active,
.page-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

@media(max-width: 1100px) {
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 720px) {
  .case-listing-head h1 {
    font-size: 48px;
  }

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

  .case-card {
    min-height: auto;
  }
}

/* Case Study Listing Page */

/* Case Study Detail Page */

.case-study-page{
  width:min(1450px,92%);
  margin:auto;
  padding:70px 0 120px;
  font-family:'Lexend',sans-serif;
}



/* HERO */

.case-hero{
  margin-bottom:50px;
}

.hero-top{
  display:grid;
  grid-template-columns:1.2fr .55fr;
  gap:30px;
  align-items:start;
}

.case-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:26px;
}

.case-meta-row span{
  border:1.5px solid var(--border);
  border-radius:999px;
  padding:10px 16px;
  font-size:12px;
}

.hero-left h1{
  font-size:92px;
  line-height:.9;
  letter-spacing:-0.03em;
  margin-bottom:28px;
}

.hero-summary{
  max-width:850px;
  color:var(--muted);
  line-height:1.8;
  font-size:20px;
}

.hero-right{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.hero-stat{
  border:2px solid var(--border);
  border-radius:24px;
  padding:28px;
  background:var(--card);
}

.hero-stat small{
  display:block;
  color:var(--muted);
  margin-bottom:12px;
}

.hero-stat h3{
  font-size:36px;
  letter-spacing:-0.05em;
}



/* QUICK NAV */

.quick-nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:70px;
}

.quick-nav a{
  border:1.5px solid var(--border);
  border-radius:999px;
  padding:12px 18px;
  font-size:13px;
  transition:.2s ease;
}

.quick-nav a:hover{
  border-color:var(--orange);
  color:var(--orange);
}



/* GENERIC BLOCK */

.content-block{
  margin-bottom:90px;
}

.block-label{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:34px;
}

.block-label span{
  width:48px;
  height:2px;
  background:var(--orange);
}

.block-label p{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
}

.block-grid{
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:60px;
}

.block-title h2{
  font-size:56px;
  line-height:1;
  letter-spacing:-0.03em;
}

.block-content p{
  line-height:1.9;
  margin-bottom:24px;
  color:var(--muted);
}



/* STAKEHOLDERS */

.stakeholder-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.stakeholder-card{
  border:2px solid var(--border);
  border-radius:22px;
  padding:28px;
}

.stakeholder-card small{
  color:var(--orange);
  display:block;
  margin-bottom:18px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.stakeholder-card h4{
  font-size:28px;
  line-height:1.1;
  margin-bottom:16px;
}

.stakeholder-card p{
  color:var(--muted);
  line-height:1.7;
}



/* WORKFLOW */

.workflow-box{
  border:2px solid var(--border);
  border-radius:30px;
  padding:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  overflow:auto;
}

.workflow-step{
  min-width:180px;
  text-align:center;
}

.workflow-step span{
  width:58px;
  height:58px;
  border:2px solid var(--orange);
  color:var(--orange);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto auto 20px;
  font-weight:700;
}

.workflow-step h5{
  font-size:18px;
  line-height:1.4;
}

.workflow-line{
  width:100px;
  height:2px;
  border-top:2px dotted var(--orange);
}



/* SOLUTION */

.solution-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.solution-card{
  border:2px solid var(--border);
  border-radius:24px;
  padding:34px;
}

.solution-card small{
  color:var(--orange);
  display:block;
  margin-bottom:18px;
  font-weight:700;
}

.solution-card h4{
  font-size:32px;
  line-height:1;
  margin-bottom:16px;
}

.solution-card p{
  color:var(--muted);
  line-height:1.8;
}



/* REQUIREMENTS */

.requirements-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.requirements-box{
  border:2px solid var(--border);
  border-radius:24px;
  padding:38px;
}

.requirements-box h4{
  font-size:34px;
  margin-bottom:24px;
}

.requirements-box ul{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.requirements-box li{
  line-height:1.7;
  color:var(--muted);
}



/* DELIVERABLES */

.deliverables-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.deliverables-cloud span{
  border:2px solid var(--border);
  border-radius:999px;
  padding:16px 22px;
  font-size:15px;
}



/* KPI */

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.kpi-card{
  border:2px solid var(--border);
  border-radius:24px;
  padding:36px;
}

.kpi-card h3{
  font-size:62px;
  line-height:1;
  color:var(--orange);
  margin-bottom:16px;
}

.kpi-card p{
  line-height:1.7;
  color:var(--muted);
}



/* RESPONSIVE */

@media(max-width:1100px){

.hero-top,
.block-grid,
.stakeholder-grid,
.solution-grid,
.requirements-grid,
.kpi-grid{
  grid-template-columns:1fr;
}

.hero-left h1{
  font-size:62px;
}

}


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

.deliverables-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.deliverable-btn{
  border:2px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  padding:18px 28px;
  font-size:16px;
  font-family:'Lexend',sans-serif;
  cursor:pointer;
  transition:.22s ease;
}

.deliverable-btn:hover{
  border-color:var(--orange);
  color:var(--orange);
  transform:translateY(-2px);
}



/* =========================================
OVERLAY
========================================= */

.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:.28s ease;
  z-index:1000;
}

.drawer-overlay.active{
  opacity:1;
  visibility:visible;
}



/* =========================================
DRAWER
========================================= */

.artifact-drawer{
  position:fixed;
  top:0;
  right:-760px;
  width:720px;
  height:100vh;
  background:var(--card);
  border-left:2px solid var(--border);
  z-index:1200;
  transition:.35s ease;
  overflow-y:auto;
  padding:42px;
}

.artifact-drawer.active{
  right:0;
}



/* =========================================
HEADER
========================================= */

.drawer-header{
  display:flex;
  justify-content:space-between;
  align-items:start;
  margin-bottom:44px;
}

.drawer-header small{
  display:block;
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:.18em;
  margin-bottom:14px;
  font-size:11px;
}

.drawer-header h2{
  font-size:54px;
  line-height:.95;
  letter-spacing:-0.03em;
}

.close-drawer{
  width:52px;
  height:52px;
  border:2px solid var(--border);
  border-radius:50%;
  background:var(--card);
  color:var(--text);
  font-size:28px;
  cursor:pointer;
}



/* =========================================
CONTENT
========================================= */

.drawer-content{
  display:flex;
  flex-direction:column;
  gap:40px;
}

.drawer-section{
  border:2px solid var(--border);
  border-radius:26px;
  padding:34px;
}

.drawer-label{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}

.drawer-label span{
  width:34px;
  height:2px;
  background:var(--orange);
}

.drawer-label p{
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:700;
}

.drawer-section h3{
  font-size:38px;
  line-height:1;
  letter-spacing:-0.05em;
  margin-bottom:22px;
}

.drawer-section p{
  line-height:1.9;
  color:var(--muted);
}



/* =========================================
LISTS
========================================= */

.drawer-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.drawer-list li{
  line-height:1.7;
  color:var(--muted);
}



/* =========================================
SCOPE
========================================= */

.scope-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.scope-box{
  border:2px solid var(--border);
  border-radius:20px;
  padding:24px;
}

.scope-box small{
  display:block;
  color:var(--orange);
  margin-bottom:18px;
  letter-spacing:.14em;
}

.scope-box ul{
  display:flex;
  flex-direction:column;
  gap:14px;
}



/* =========================================
USER STORIES
========================================= */

.story-card{
  border:2px solid var(--border);
  border-radius:24px;
  padding:28px;
}

.story-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
}

.story-top span{
  color:var(--orange);
  font-weight:700;
}

.story-top small{
  color:var(--muted);
}

.story-main{
  font-size:24px;
  line-height:1.6;
  letter-spacing:-0.03em;
}



/* =========================================
AC
========================================= */

.criteria-box{
  border:2px solid var(--border);
  border-radius:24px;
  padding:32px;
}

.criteria-box small{
  display:block;
  color:var(--orange);
  margin-bottom:14px;
  letter-spacing:.14em;
}

.criteria-box h4{
  font-size:34px;
  margin-bottom:28px;
}

.criteria-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.criteria-list li{
  line-height:1.8;
  color:var(--muted);
}



/* =========================================
DARK MODE SUPPORT
========================================= */

body.dark-mode .artifact-drawer{
  background:#141414;
}

body.dark-mode .deliverable-btn,
body.dark-mode .close-drawer,
body.dark-mode .drawer-section,
body.dark-mode .scope-box,
body.dark-mode .story-card,
body.dark-mode .criteria-box{
  background:#171717;
}



/* =========================================
RESPONSIVE
========================================= */

@media(max-width:780px){

.artifact-drawer{
  width:100%;
  right:-100%;
  padding:28px;
}

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

.drawer-header h2{
  font-size:42px;
}

.story-main{
  font-size:20px;
}

}

/* Case Study Detail Page */

/* =========================================
PROCESS MAP GRID
========================================= */

.process-map-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.process-map-card{
  border:2px solid var(--border);
  border-radius:24px;
  padding:28px;
  background:var(--card);
  transition:.22s ease;
  cursor:pointer;
}

.process-map-card:hover{
  transform:translateY(-4px);
  border-color:var(--orange);
}

.map-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}

.map-top span{
  color:var(--orange);
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.04em;
}

.map-top small{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.process-map-card h4{
  font-size:34px;
  line-height:1;
  letter-spacing:-0.05em;
  margin-bottom:20px;
}

.process-map-card p{
  color:var(--muted);
  line-height:1.8;
  margin-bottom:24px;
}

.map-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.map-tags span{
  border:1.5px solid var(--border);
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
}



/* =========================================
DARK MODE
========================================= */

body.dark-mode .process-map-card{
  background:#171717;
}



/* =========================================
RESPONSIVE
========================================= */

@media(max-width:900px){

.process-map-grid{
  grid-template-columns:1fr;
}

.process-map-card h4{
  font-size:28px;
}

}

/* =========================================
SUMMARY CARDS
========================================= */

.gap-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:40px;
}

.gap-summary-card{
  border:2px solid var(--border);
  border-radius:22px;
  padding:24px;
  background:var(--card);
}

.gap-summary-card small{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  margin-bottom:14px;
}

.gap-summary-card h4{
  font-size:28px;
  line-height:1;
  margin-bottom:10px;
}

.gap-summary-card p{
  color:var(--muted);
  line-height:1.7;
}



/* =========================================
GAP ANALYSIS TABLE
========================================= */

.gap-analysis-table{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.gap-row{
  border:2px solid var(--border);
  border-radius:24px;
  padding:28px;
  display:grid;
  grid-template-columns:1.1fr 1fr 70px 1fr;
  gap:24px;
  align-items:center;
  background:var(--card);
  transition:.22s ease;
}

.gap-row:hover{
  transform:translateY(-3px);
  border-color:var(--orange);
}

.gap-area span{
  display:inline-block;
  margin-bottom:12px;
  color:var(--orange);
  font-weight:700;
  font-size:18px;
}

.gap-area h4{
  font-size:28px;
  line-height:1.1;
}

.gap-column{
  border:1.5px dashed var(--border);
  border-radius:18px;
  padding:18px;
}

.gap-column small{
  display:block;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

.gap-column p{
  font-size:16px;
  line-height:1.7;
}

.gap-arrow{
  text-align:center;
  font-size:34px;
  color:var(--orange);
  font-weight:700;
}



/* =========================================
DARK MODE
========================================= */

body.dark-mode .gap-row,
body.dark-mode .gap-summary-card{
  background:#171717;
}



/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1000px){

.gap-summary-grid{
  grid-template-columns:1fr;
}

.gap-row{
  grid-template-columns:1fr;
}

.gap-arrow{
  transform:rotate(90deg);
}

}

/* =========================================
SUMMARY CARDS
========================================= */

.stakeholder-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:40px;
}

.stakeholder-summary-card{
  border:2px solid var(--border);
  border-radius:22px;
  padding:24px;
  background:var(--card);
}

.stakeholder-summary-card small{
  display:block;
  margin-bottom:14px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}

.stakeholder-summary-card h4{
  font-size:32px;
  line-height:1;
  margin-bottom:10px;
}

.stakeholder-summary-card p{
  color:var(--muted);
  line-height:1.7;
}



/* =========================================
STAKEHOLDER MATRIX
========================================= */

.stakeholder-matrix{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.stakeholder-row{
  border:2px solid var(--border);
  border-radius:24px;
  padding:26px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  background:var(--card);
  transition:.22s ease;
}

.stakeholder-row:hover{
  transform:translateY(-3px);
  border-color:var(--orange);
}

.stakeholder-left{
  display:flex;
  align-items:center;
  gap:20px;
}

.stakeholder-left span{
  color:var(--orange);
  font-size:22px;
  font-weight:700;
  min-width:40px;
}

.stakeholder-left h4{
  font-size:24px;
  line-height:1.1;
  margin-bottom:6px;
}

.stakeholder-left p{
  color:var(--muted);
  line-height:1.6;
}

.stakeholder-right{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.stake-pill{
  padding:10px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  border:1.5px solid var(--border);
}

.stake-pill.high{
  border-color:var(--orange);
  color:var(--orange);
}

.stake-pill.medium{
  opacity:.85;
}



/* =========================================
LEGEND
========================================= */

.stakeholder-legend{
  display:flex;
  gap:26px;
  align-items:center;
  margin-top:36px;
  flex-wrap:wrap;
}

.legend-item{
  display:flex;
  align-items:center;
  gap:10px;
}

.legend-dot{
  width:12px;
  height:12px;
  border-radius:50%;
}

.high-dot{
  background:var(--orange);
}

.medium-dot{
  background:#999;
}

.legend-item p{
  font-size:13px;
  color:var(--muted);
}



/* =========================================
DARK MODE
========================================= */

body.dark-mode .stakeholder-row,
body.dark-mode .stakeholder-summary-card{
  background:#171717;
}



/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1000px){

.stakeholder-summary-grid{
  grid-template-columns:1fr;
}

.stakeholder-row{
  flex-direction:column;
  align-items:flex-start;
}

.stakeholder-right{
  justify-content:flex-start;
}

}


/* =========================================
RACI LEGEND
========================================= */

.raci-legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:36px;
}

.legend-pill{
  border:2px solid var(--border);
  border-radius:999px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  background:var(--card);
}

.legend-pill span{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:13px;
}

.legend-pill.r span{
  background:rgba(255,106,0,.12);
  color:var(--orange);
}

.legend-pill.a span{
  background:#111;
  color:#fff;
}

.legend-pill.c span{
  background:#e8e8e8;
}

.legend-pill.i span{
  background:#f4f4f4;
  color:#777;
}



/* =========================================
TABLE
========================================= */

.raci-table-wrapper{
  overflow:auto;
  border:2px solid var(--border);
  border-radius:26px;
  background:var(--card);
}

.raci-table{
  width:100%;
  border-collapse:collapse;
  min-width:1000px;
}

.raci-table thead{
  background:rgba(0,0,0,.03);
}

.raci-table th{
  text-align:left;
  padding:22px 24px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  border-bottom:1.5px solid var(--border);
}

.raci-table td{
  padding:22px 24px;
  border-bottom:1px solid var(--border);
  text-align:center;
}

.activity-cell{
  text-align:left !important;
  font-size:16px;
  font-weight:600;
}

.raci-badge{
  width:42px;
  height:42px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
  border:1.5px solid var(--border);
}



/* RESPONSIBLE */

.raci-badge.r{
  background:rgba(255,106,0,.12);
  color:var(--orange);
  border-color:rgba(255,106,0,.25);
}



/* ACCOUNTABLE */

.raci-badge.a{
  background:#111;
  color:#fff;
  border-color:#111;
}



/* CONSULTED */

.raci-badge.c{
  background:#efefef;
  color:#222;
}



/* INFORMED */

.raci-badge.i{
  background:#f8f8f8;
  color:#777;
}



/* =========================================
DARK MODE
========================================= */

body.dark-mode .raci-table-wrapper,
body.dark-mode .legend-pill{
  background:#171717;
}

body.dark-mode .raci-table thead{
  background:rgba(255,255,255,.03);
}

body.dark-mode .raci-table th,
body.dark-mode .raci-table td{
  border-color:rgba(255,255,255,.08);
}

body.dark-mode .raci-badge.c{
  background:#232323;
  color:#ddd;
}

body.dark-mode .raci-badge.i{
  background:#1d1d1d;
  color:#999;
}

body.dark-mode .legend-pill.c span{
  background:#222;
  color:#ddd;
}

body.dark-mode .legend-pill.i span{
  background:#1b1b1b;
  color:#999;
}



/* =========================================
RESPONSIVE
========================================= */

@media(max-width:900px){

.raci-legend{
  gap:10px;
}

.legend-pill{
  width:100%;
}

}

/* =========================================
ROADMAP TIMELINE
========================================= */

.roadmap-timeline{
  display:flex;
  flex-direction:column;
  gap:22px;
}



/* =========================================
ROADMAP ITEM
========================================= */

.roadmap-item{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:22px;
  align-items:stretch;
}



/* =========================================
LEFT SIDE
========================================= */

.roadmap-left{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.roadmap-phase-number{
  width:58px;
  height:58px;
  border-radius:50%;
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:18px;
  background:var(--card);
  color:var(--text);
  z-index:2;
}

.roadmap-phase-number.orange{
  border-color:var(--orange);
  color:var(--orange);
}

.roadmap-line{
  flex:1;
  width:2px;
  border-left:2px dashed rgba(255,106,0,.35);
  margin-top:10px;
}



/* =========================================
CARD
========================================= */

.roadmap-card{
  border:2px solid var(--border);
  border-radius:26px;
  padding:30px;
  background:var(--card);
  transition:.22s ease;
}

.roadmap-card:hover{
  transform:translateY(-4px);
  border-color:var(--orange);
}

.final-roadmap{
  border-color:rgba(255,106,0,.35);
}

.roadmap-card small{
  display:block;
  margin-bottom:18px;
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:700;
}

.roadmap-card h4{
  font-size:38px;
  line-height:1;
  letter-spacing:-0.05em;
  margin-bottom:18px;
}

.roadmap-card p{
  color:var(--muted);
  line-height:1.9;
  margin-bottom:24px;
}



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

.roadmap-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.roadmap-tags span{
  border:1.5px solid var(--border);
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
}



/* =========================================
DARK MODE
========================================= */

body.dark-mode .roadmap-card,
body.dark-mode .roadmap-phase-number{
  background:#171717;
}



/* =========================================
RESPONSIVE
========================================= */

@media(max-width:780px){

.roadmap-item{
  grid-template-columns:1fr;
}

.roadmap-left{
  flex-direction:row;
  justify-content:flex-start;
  gap:16px;
}

.roadmap-line{
  width:100%;
  height:2px;
  border-left:none;
  border-top:2px dashed rgba(255,106,0,.35);
  margin-top:0;
}

.roadmap-card h4{
  font-size:30px;
}

}


/* =========================================
GLOBAL MODERN HORIZONTAL SCROLL BEHAVIOR
Applies elegant horizontal scrolling
without ugly permanent scrollbars
========================================= */

/* Any horizontally overflowing container */
.horizontal-scroll,
.workflow-box,
.process-flow,
.timeline-row,
.swimlane-wrapper,
.raci-table-wrapper,
.drawer-content,
.process-map-grid,
.gap-analysis-table {

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */

    scroll-behavior: smooth;

    /* Enables trackpad + mouse-wheel horizontal scrolling */
    overscroll-behavior-inline: contain;

    padding-bottom: 8px;
}


/* Hide scrollbar by default */
.horizontal-scroll::-webkit-scrollbar,
.workflow-box::-webkit-scrollbar,
.process-flow::-webkit-scrollbar,
.timeline-row::-webkit-scrollbar,
.swimlane-wrapper::-webkit-scrollbar,
.raci-table-wrapper::-webkit-scrollbar,
.drawer-content::-webkit-scrollbar,
.process-map-grid::-webkit-scrollbar,
.gap-analysis-table::-webkit-scrollbar {

    height: 0px;
    background: transparent;
}


/* Show thin elegant scrollbar only on hover */
.horizontal-scroll:hover::-webkit-scrollbar,
.workflow-box:hover::-webkit-scrollbar,
.process-flow:hover::-webkit-scrollbar,
.timeline-row:hover::-webkit-scrollbar,
.swimlane-wrapper:hover::-webkit-scrollbar,
.raci-table-wrapper:hover::-webkit-scrollbar,
.drawer-content:hover::-webkit-scrollbar,
.process-map-grid:hover::-webkit-scrollbar,
.gap-analysis-table:hover::-webkit-scrollbar {

    height: 6px;
}


/* Scrollbar Track */
.horizontal-scroll:hover::-webkit-scrollbar-track,
.workflow-box:hover::-webkit-scrollbar-track,
.process-flow:hover::-webkit-scrollbar-track,
.timeline-row:hover::-webkit-scrollbar-track,
.swimlane-wrapper:hover::-webkit-scrollbar-track,
.raci-table-wrapper:hover::-webkit-scrollbar-track,
.drawer-content:hover::-webkit-scrollbar-track,
.process-map-grid:hover::-webkit-scrollbar-track,
.gap-analysis-table:hover::-webkit-scrollbar-track {

    background: transparent;
}


/* Scrollbar Thumb */
.horizontal-scroll:hover::-webkit-scrollbar-thumb,
.workflow-box:hover::-webkit-scrollbar-thumb,
.process-flow:hover::-webkit-scrollbar-thumb,
.timeline-row:hover::-webkit-scrollbar-thumb,
.swimlane-wrapper:hover::-webkit-scrollbar-thumb,
.raci-table-wrapper:hover::-webkit-scrollbar-thumb,
.drawer-content:hover::-webkit-scrollbar-thumb,
.process-map-grid:hover::-webkit-scrollbar-thumb,
.gap-analysis-table:hover::-webkit-scrollbar-thumb {

    background: rgba(255, 102, 0, 0.35);
    border-radius: 999px;
}


/* Dark mode scrollbar */
body.dark-mode .horizontal-scroll:hover::-webkit-scrollbar-thumb,
body.dark-mode .workflow-box:hover::-webkit-scrollbar-thumb,
body.dark-mode .process-flow:hover::-webkit-scrollbar-thumb,
body.dark-mode .timeline-row:hover::-webkit-scrollbar-thumb,
body.dark-mode .swimlane-wrapper:hover::-webkit-scrollbar-thumb,
body.dark-mode .raci-table-wrapper:hover::-webkit-scrollbar-thumb,
body.dark-mode .drawer-content:hover::-webkit-scrollbar-thumb,
body.dark-mode .process-map-grid:hover::-webkit-scrollbar-thumb,
body.dark-mode .gap-analysis-table:hover::-webkit-scrollbar-thumb {

    background: rgba(255, 132, 0, 0.5);
}


/* =========================================================
   RESPONSIVE FIXES
   Applies to:
   - Homepage
   - Case study listing page
   - Case study detail page
   ========================================================= */

/* ---------- Base safety ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

.container,
.page-shell,
.site-shell,
.main-shell,
.home-shell,
.case-shell,
.case-study-shell,
.case-listing-shell,
.content-wrap,
.wrapper {
  width: min(100% - 32px, 1440px);
  margin-inline: auto;
}

/* Prevent long text from breaking layouts */
h1,
h2,
h3,
h4,
p,
li,
span,
a {
  overflow-wrap: anywhere;
}

/* ---------- Header / Navigation ---------- */

@media (max-width: 1100px) {
  header,
  .site-header,
  .topbar,
  .navbar {
    padding-inline: 24px;
  }

  .nav,
  .nav-links,
  .menu,
  .header-links {
    gap: 20px;
  }
}

@media (max-width: 860px) {
  header,
  .site-header,
  .topbar,
  .navbar {
    min-height: auto;
    padding: 18px 20px;
    align-items: flex-start;
    gap: 18px;
  }

  .site-header,
  .topbar,
  .navbar {
    flex-wrap: wrap;
  }

  .brand,
  .logo-wrap,
  .profile-brand {
    width: auto;
    min-width: 0;
  }

  .nav,
  .nav-links,
  .menu,
  .header-links {
    width: 100%;
    order: 3;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-block: 8px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar,
  .nav-links::-webkit-scrollbar,
  .menu::-webkit-scrollbar,
  .header-links::-webkit-scrollbar {
    display: none;
  }

  .nav a,
  .nav-links a,
  .menu a,
  .header-links a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .theme-toggle,
  .mode-toggle,
  .dark-mode-toggle {
    margin-left: auto;
  }
}

/* ---------- Homepage Hero ---------- */

@media (max-width: 1200px) {
  .hero,
  .home-hero,
  .portfolio-hero {
    grid-template-columns: 280px 1fr 220px;
    gap: 40px;
  }

  .hero h1,
  .home-hero h1,
  .portfolio-hero h1 {
    font-size: clamp(56px, 7vw, 96px);
    line-height: 0.95;
  }
}

@media (max-width: 980px) {
  .hero,
  .home-hero,
  .portfolio-hero {
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: center;
  }

  .hero-side,
  .availability-panel,
  .connect-panel,
  .hero-meta-side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    border-left: 0;
    border-top: 1px solid var(--border, #111);
    padding-top: 24px;
  }

  .hero h1,
  .home-hero h1,
  .portfolio-hero h1 {
    font-size: clamp(48px, 8vw, 78px);
  }

  .hero-photo-wrap,
  .profile-photo-wrap,
  .portrait-card {
    max-width: 260px;
  }
}

@media (max-width: 720px) {
  .hero,
  .home-hero,
  .portfolio-hero {
    grid-template-columns: 1fr;
    padding-block: 44px 28px;
    gap: 28px;
  }

  .hero-photo-wrap,
  .profile-photo-wrap,
  .portrait-card {
    width: min(100%, 280px);
    margin-inline: auto;
  }

  .hero-copy,
  .hero-content,
  .hero-text {
    text-align: left;
  }

  .hero-kicker,
  .section-kicker {
    letter-spacing: 0.18em;
    font-size: 11px;
  }

  .hero h1,
  .home-hero h1,
  .portfolio-hero h1 {
    font-size: clamp(42px, 14vw, 64px);
    line-height: 0.98;
  }

  .hero p,
  .home-hero p,
  .portfolio-hero p {
    font-size: 16px;
    line-height: 1.65;
  }

  .meta-pills,
  .hero-pills,
  .tag-row,
  .pill-row {
    gap: 8px;
  }

  .meta-pills span,
  .hero-pills span,
  .tag,
  .pill {
    font-size: 12px;
    padding: 7px 10px;
  }

  .hero-side,
  .availability-panel,
  .connect-panel,
  .hero-meta-side {
    grid-template-columns: 1fr;
  }
}

/* ---------- Homepage Artifact Cards ---------- */

@media (max-width: 1200px) {
  .artifact-grid,
  .home-card-grid,
  .module-grid,
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .artifact-grid,
  .home-card-grid,
  .module-grid,
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .artifact-card,
  .home-card,
  .module-card,
  .category-card {
    min-height: auto;
    padding: 24px;
  }
}

@media (max-width: 560px) {
  .artifact-grid,
  .home-card-grid,
  .module-grid,
  .category-grid {
    grid-template-columns: 1fr;
  }

  .artifact-card,
  .home-card,
  .module-card,
  .category-card {
    border-radius: 22px;
  }
}

/* ---------- Featured Case Studies ---------- */

@media (max-width: 1100px) {
  .featured-grid,
  .featured-case-grid,
  .case-preview-grid {
    grid-template-columns: 1fr;
  }

  .featured-card,
  .case-preview-card {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .featured-card,
  .case-preview-card {
    padding: 24px;
    border-radius: 22px;
  }

  .featured-card .icon,
  .case-preview-card .icon,
  .card-visual {
    display: none;
  }
}

/* ---------- Approach / Timeline ---------- */

@media (max-width: 900px) {
  .approach-line,
  .process-line,
  .timeline-line,
  .workflow-line {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .approach-step,
  .process-step,
  .timeline-step,
  .workflow-step {
    min-width: 180px;
    scroll-snap-align: start;
  }
}

@media (max-width: 620px) {
  .approach-line,
  .process-line,
  .timeline-line,
  .workflow-line {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 72%);
    gap: 18px;
  }

  .approach-step,
  .process-step,
  .timeline-step,
  .workflow-step {
    width: auto;
  }
}

/* ---------- Case Study Listing Page ---------- */

.case-studies-grid,
.case-list-grid,
.case-study-grid,
.listing-grid {
  align-items: stretch;
}

@media (max-width: 1200px) {
  .case-studies-grid,
  .case-list-grid,
  .case-study-grid,
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .case-studies-grid,
  .case-list-grid,
  .case-study-grid,
  .listing-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .case-study-card,
  .case-card,
  .listing-card {
    min-height: auto;
    padding: 28px;
    border-radius: 24px;
  }

  .case-study-card h2,
  .case-study-card h3,
  .case-card h2,
  .case-card h3,
  .listing-card h2,
  .listing-card h3 {
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.08;
  }

  .case-study-card p,
  .case-card p,
  .listing-card p {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* ---------- Pagination ---------- */

@media (max-width: 640px) {
  .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 28px;
  }

  .page-btn {
    min-width: 52px;
    height: 52px;
    padding-inline: 18px;
    font-size: 14px;
  }

  .page-btn:last-child,
  .pagination-next {
    min-width: 120px;
  }
}

/* ---------- Case Study Detail Hero ---------- */

@media (max-width: 1100px) {
  .case-hero,
  .case-study-hero,
  .detail-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .case-hero-aside,
  .case-meta-panel,
  .detail-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 680px) {
  .case-hero,
  .case-study-hero,
  .detail-hero {
    padding-block: 40px 24px;
  }

  .case-hero h1,
  .case-study-hero h1,
  .detail-hero h1 {
    font-size: clamp(42px, 13vw, 68px);
    line-height: 1;
  }

  .case-hero-aside,
  .case-meta-panel,
  .detail-aside {
    grid-template-columns: 1fr;
  }

  .case-summary,
  .case-intro,
  .detail-summary {
    font-size: 16px;
    line-height: 1.7;
  }
}

/* ---------- Case Study Detail Content ---------- */

@media (max-width: 1100px) {
  .case-content-grid,
  .detail-content-grid,
  .case-section-grid {
    grid-template-columns: 1fr;
  }

  .case-sidebar,
  .detail-sidebar,
  .sticky-nav {
    position: static;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .case-section,
  .detail-section,
  .content-section {
    padding-block: 36px;
  }

  .case-section h2,
  .detail-section h2,
  .content-section h2 {
    font-size: clamp(30px, 9vw, 46px);
  }

  .case-card-large,
  .detail-card,
  .content-card,
  .insight-card {
    padding: 24px;
    border-radius: 24px;
  }
}

/* ---------- Deliverables Pills ---------- */

@media (max-width: 720px) {
  .deliverables,
  .deliverable-list,
  .deliverable-pills {
    gap: 10px;
  }

  .deliverables button,
  .deliverable-list button,
  .deliverable-pills button,
  .deliverables .pill,
  .deliverable-list .pill,
  .deliverable-pills .pill {
    width: auto;
    max-width: 100%;
    font-size: 14px;
    padding: 12px 18px;
  }
}

/* ---------- Tables ---------- */

.table-wrap,
.responsive-table,
.matrix-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.table-wrap table,
.responsive-table table,
.matrix-wrap table,
.case-table {
  min-width: 720px;
}

@media (max-width: 720px) {
  .table-wrap,
  .responsive-table,
  .matrix-wrap {
    margin-inline: -16px;
    padding-inline: 16px;
  }
}

/* ---------- Drawer ---------- */

@media (max-width: 900px) {
  .drawer,
  .artifact-drawer,
  .deliverable-drawer {
    width: min(100vw, 560px);
  }
}

@media (max-width: 620px) {
  .drawer,
  .artifact-drawer,
  .deliverable-drawer {
    width: 100vw;
    border-radius: 0;
  }

  .drawer-content,
  .artifact-drawer-content,
  .deliverable-drawer-content {
    padding: 24px;
  }

  .drawer h2,
  .artifact-drawer h2,
  .deliverable-drawer h2 {
    font-size: 28px;
  }
}

/* ---------- Skills / Tools Cloud ---------- */

@media (max-width: 720px) {
  .skills-cloud,
  .tools-cloud,
  .tag-cloud {
    gap: 10px;
  }

  .skills-cloud span,
  .tools-cloud span,
  .tag-cloud span {
    font-size: 13px;
    padding: 9px 12px;
  }
}

/* ---------- Footer ---------- */

@media (max-width: 820px) {
  footer,
  .site-footer {
    padding-inline: 24px;
  }

  .footer-grid,
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 14px;
  }
}

/* ---------- Small phones ---------- */

@media (max-width: 420px) {
  .container,
  .page-shell,
  .site-shell,
  .main-shell,
  .home-shell,
  .case-shell,
  .case-study-shell,
  .case-listing-shell,
  .content-wrap,
  .wrapper {
    width: min(100% - 22px, 1440px);
  }

  header,
  .site-header,
  .topbar,
  .navbar {
    padding-inline: 14px;
  }

  .hero h1,
  .home-hero h1,
  .portfolio-hero h1,
  .case-hero h1,
  .case-study-hero h1,
  .detail-hero h1 {
    letter-spacing: -0.05em;
  }

  .artifact-card,
  .home-card,
  .module-card,
  .category-card,
  .case-study-card,
  .case-card,
  .listing-card,
  .featured-card,
  .case-preview-card,
  .case-card-large,
  .detail-card,
  .content-card,
  .insight-card {
    padding: 22px;
  }
}

/* ---------- Dark mode responsive safety ---------- */

body.dark,
html.dark body,
[data-theme="dark"] {
  color-scheme: dark;
}

body.dark .table-wrap,
body.dark .responsive-table,
body.dark .matrix-wrap,
html.dark body .table-wrap,
html.dark body .responsive-table,
html.dark body .matrix-wrap,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .responsive-table,
[data-theme="dark"] .matrix-wrap {
  scrollbar-color: var(--accent, #ff5a00) transparent;
}


/* =========================================================
   RESPONSIVE FIX FOR YOUR ACTUAL CLASSES
   Classes confirmed:
   .navbar
   .hero
   .hero-content
   .mini-card
   .case-grid
   .case-card
   .case-content
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* ---------- Header base ---------- */

.navbar {
  width: 100%;
  position: relative;
  z-index: 1000;
}

/* Hamburger hidden on desktop */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--text, #111);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  margin-left: auto;
}

.menu-toggle span {
  width: 18px;
  height: 2px;
  background: var(--text, #111);
  border-radius: 999px;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* If your dark mode uses body.dark */
body.dark .menu-toggle,
html.dark body .menu-toggle,
[data-theme="dark"] .menu-toggle {
  border-color: var(--text, #fff);
}

body.dark .menu-toggle span,
html.dark body .menu-toggle span,
[data-theme="dark"] .menu-toggle span {
  background: var(--text, #fff);
}

/* Active hamburger animation */
.navbar.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.navbar.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Desktop safety ---------- */

.hero {
  width: min(100% - 48px, 1440px);
  margin-inline: auto;
}

.hero-content {
  min-width: 0;
}

.case-content {
  width: min(100% - 48px, 1440px);
  margin-inline: auto;
}

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

.case-card,
.mini-card {
  min-width: 0;
}

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
  .navbar {
    padding-inline: 24px;
  }

  .hero {
    width: min(100% - 40px, 1200px);
    gap: 36px;
  }

  .hero-content h1,
  .hero h1 {
    font-size: clamp(52px, 8vw, 88px);
    line-height: 0.98;
  }

  .case-content {
    width: min(100% - 40px, 1200px);
  }

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

/* ---------- Mobile nav ---------- */

@media (max-width: 860px) {
  .navbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 18px;
    gap: 14px;
  }

  .menu-toggle {
    display: inline-flex;
  }

  /*
    This targets common nav wrappers.
    If your nav links are inside a different class,
    add that class here.
  */
  .navbar nav,
  .navbar .nav,
  .navbar .nav-links,
  .navbar .menu,
  .navbar .header-links {
    display: none;
    width: 100%;
    order: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0 4px;
    border-top: 1px solid var(--border, #111);
  }

  .navbar.menu-open nav,
  .navbar.menu-open .nav,
  .navbar.menu-open .nav-links,
  .navbar.menu-open .menu,
  .navbar.menu-open .header-links {
    display: flex;
  }

  .navbar nav a,
  .navbar .nav a,
  .navbar .nav-links a,
  .navbar .menu a,
  .navbar .header-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
    font-size: 14px;
    text-decoration: none;
  }

  body.dark .navbar nav,
  body.dark .navbar .nav,
  body.dark .navbar .nav-links,
  body.dark .navbar .menu,
  body.dark .navbar .header-links,
  html.dark body .navbar nav,
  html.dark body .navbar .nav,
  html.dark body .navbar .nav-links,
  html.dark body .navbar .menu,
  html.dark body .navbar .header-links,
  [data-theme="dark"] .navbar nav,
  [data-theme="dark"] .navbar .nav,
  [data-theme="dark"] .navbar .nav-links,
  [data-theme="dark"] .navbar .menu,
  [data-theme="dark"] .navbar .header-links {
    border-top-color: rgba(255, 255, 255, 0.22);
  }

  body.dark .navbar nav a,
  body.dark .navbar .nav a,
  body.dark .navbar .nav-links a,
  body.dark .navbar .menu a,
  body.dark .navbar .header-links a,
  html.dark body .navbar nav a,
  html.dark body .navbar .nav a,
  html.dark body .navbar .nav-links a,
  html.dark body .navbar .menu a,
  html.dark body .navbar .header-links a,
  [data-theme="dark"] .navbar nav a,
  [data-theme="dark"] .navbar .nav a,
  [data-theme="dark"] .navbar .nav-links a,
  [data-theme="dark"] .navbar .menu a,
  [data-theme="dark"] .navbar .header-links a {
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }

  /*
    Theme switch should remain visible beside hamburger.
    Add your exact theme class if different.
  */
  .theme-toggle,
  .mode-toggle,
  .dark-mode-toggle {
    order: 10;
  }
}

/* ---------- Homepage mobile ---------- */

@media (max-width: 760px) {
  .hero {
    width: min(100% - 28px, 720px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 36px 24px;
  }

  .hero-content {
    width: 100%;
  }

  .hero-content h1,
  .hero h1 {
    font-size: clamp(42px, 14vw, 64px);
    line-height: 1;
    letter-spacing: -0.055em;
  }

  .hero-content p,
  .hero p {
    font-size: 15px;
    line-height: 1.7;
  }

  .hero-content .tag-row,
  .hero-content .pill-row,
  .hero .tag-row,
  .hero .pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .hero-content .tag,
  .hero-content .pill,
  .hero .tag,
  .hero .pill {
    font-size: 12px;
    padding: 7px 10px;
  }

  .mini-card {
    padding: 22px;
    border-radius: 22px;
  }
}

/* ---------- Homepage mini cards ---------- */

@media (max-width: 1100px) {
  .mini-card {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  /*
    If your mini cards are direct children of a grid wrapper,
    this prevents them from staying squeezed in desktop columns.
  */
  .mini-card {
    width: 100%;
  }
}

/* ---------- Case listing page ---------- */

@media (max-width: 760px) {
  .case-content {
    width: min(100% - 28px, 720px);
  }

  .case-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .case-card {
    min-height: auto;
    padding: 28px;
    border-radius: 24px;
  }

  .case-card h2,
  .case-card h3 {
    font-size: clamp(28px, 9vw, 42px);
    line-height: 1.08;
  }

  .case-card p {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* ---------- Case detail page ---------- */

@media (max-width: 900px) {
  .case-content {
    display: block;
  }

  .case-content h1 {
    font-size: clamp(42px, 13vw, 70px);
    line-height: 1;
    letter-spacing: -0.055em;
  }

  .case-content h2 {
    font-size: clamp(30px, 9vw, 46px);
    line-height: 1.1;
  }

  .case-content p,
  .case-content li {
    font-size: 15px;
    line-height: 1.75;
  }
}

@media (max-width: 620px) {
  .case-content {
    width: min(100% - 28px, 720px);
  }

  .case-content section,
  .case-content .section,
  .case-content .content-section {
    padding-block: 34px;
  }
}

/* ---------- Tables / matrices / overflow blocks ---------- */

.table-wrap,
.responsive-table,
.matrix-wrap,
.workflow-scroll,
.horizontal-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.table-wrap table,
.responsive-table table,
.matrix-wrap table {
  min-width: 720px;
}

@media (max-width: 720px) {
  .table-wrap,
  .responsive-table,
  .matrix-wrap,
  .workflow-scroll,
  .horizontal-scroll {
    margin-inline: -14px;
    padding-inline: 14px;
  }
}

/* ---------- Pagination ---------- */

@media (max-width: 640px) {
  .pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 28px;
  }

  .page-btn {
    min-width: 52px;
    min-height: 52px;
    padding-inline: 18px;
    font-size: 14px;
  }

  .page-btn:last-child {
    min-width: 118px;
  }
}

/* ---------- Small phones ---------- */

@media (max-width: 420px) {
  .navbar {
    padding-inline: 14px;
  }

  .hero,
  .case-content {
    width: min(100% - 22px, 720px);
  }

  .case-card,
  .mini-card {
    padding: 22px;
  }
}


@media (max-width: 900px) {
  .navbar {
    position: relative;
  }

  .menu-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--border-color, #111);
    border-radius: 999px;
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1002;
  }

  .menu-toggle span {
    width: 18px;
    height: 2px;
    background: currentColor;
    display: block;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 16px;
    right: 16px;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 16px 0;
    background: var(--page-bg, #fff);
    border: 1.5px solid var(--border-color, #111);
    border-radius: 24px;
    z-index: 1001;
  }

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

  .nav-menu a {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .nav-menu a:last-child {
    border-bottom: 0;
  }

  .dark-mode .nav-menu {
    background: #0b0b0b;
    border-color: #333;
  }

  .dark-mode .nav-menu a {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
}



.breadcrumb {
  width: min(100% - 48px, 1440px);
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: "Lexend", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.breadcrumb a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--orange);
  border-color: var(--orange);
}

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

.breadcrumb .current {
  color: var(--orange);
  font-weight: 600;
}

.dark-mode .breadcrumb a {
  color: var(--text);
}

.dark-mode .breadcrumb a:hover {
  color: var(--orange);
}

@media (max-width: 768px) {
  .breadcrumb {
    width: calc(100% - 32px);
    margin-top: 18px;
    font-size: 12px;
    gap: 8px;
  }
}

/*======================*/
/*===Contact Popup CSS==*/
/*======================*/

.contact-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  font-family: "Lexend", sans-serif;
}

.contact-popup.is-open {
  display: block;
}

.contact-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}

.contact-popup__panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(100%, 560px);
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  border-left: 2px solid var(--text);
  padding: 42px;
  overflow-y: auto;
  transform: translateX(100%);
  animation: contactSlideIn 0.28s ease forwards;
}

@keyframes contactSlideIn {
  to {
    transform: translateX(0);
  }
}

.contact-popup-open {
  overflow: hidden;
}

.contact-popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 2px solid var(--text);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.contact-popup__close:hover {
  background: var(--text);
  color: var(--bg);
}

.contact-popup__header {
  margin-bottom: 34px;
  padding-right: 48px;
}

.contact-popup__label {
  margin-bottom: 20px;
}

.contact-popup__header h2 {
  margin: 0 0 14px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.contact-popup__header p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.contact-form {
  display: grid;
  gap: 20px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
}

.form-group input,
.form-group textarea {
  width: 100%;
  border: 2px solid var(--text);
  border-radius: 22px;
  background: transparent;
  color: var(--text);
  padding: 16px 18px;
  font-family: "Lexend", sans-serif;
  font-size: 14px;
  outline: none;
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--muted);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}

.form-group input.has-error,
.form-group textarea.has-error {
  border-color: var(--orange);
}

.form-error {
  min-height: 18px;
  color: var(--orange);
  font-size: 12px;
  line-height: 1.4;
}

.recaptcha-wrap {
  display: grid;
  gap: 8px;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 52px;
  padding: 0 28px;
  border: 2px solid var(--text);
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-family: "Lexend", sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.contact-submit:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form__status {
  display: none;
  border-radius: 22px;
  padding: 18px;
  font-size: 14px;
  line-height: 1.6;
}

.contact-form__status.is-success,
.contact-form__status.is-error {
  display: block;
}

.contact-form__status.is-success {
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
}

.contact-form__status.is-success strong {
  color: var(--orange);
}

.contact-form__status.is-error {
  border: 2px solid var(--orange);
  color: var(--orange);
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

.dark-mode .contact-popup__panel {
  background: var(--bg);
  color: var(--text);
  border-left-color: var(--text);
}

.dark-mode .form-group input,
.dark-mode .form-group textarea,
.dark-mode .contact-popup__close {
  border-color: var(--text);
  color: var(--text);
}

.dark-mode .contact-submit {
  background: var(--text);
  color: var(--bg);
}

@media (max-width: 768px) {
  .contact-popup__panel {
    width: 100%;
    padding: 32px 22px;
    border-left: none;
  }

  .contact-popup__header {
    padding-right: 42px;
  }

  .contact-popup__close {
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
  }

  .contact-submit {
    width: 100%;
  }

  .g-recaptcha {
    transform: scale(0.88);
    transform-origin: left top;
  }
}