/* =========================================================
   1. ROOT & GENERAL STYLES
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap');

:root {
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;

  --color-dark-bg: #0B1218;
  --color-dark-card: #15212B;
  --color-dark-border: #232E3A;
  --color-light-bg: #F8F9FA;
  --color-light-card: #FFFFFF;
  --color-light-border: #EAECEF;
  --color-text-dark: #212529;
  --color-text-muted: #6C757D;
  --color-text-light: #F8F9FA;
  --color-text-muted-dark: #a9b6c4;
  --color-accent: #1DAECC;
  --color-accent-light: #6FE1F6;

  --section-padding: 6rem;
  /* Sharper, less “soft” corners site-wide */
  --card-border-radius: 12px;
  --grid-size: 72px; /* try 64px/80px if you want bigger/smaller */
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--color-text-dark);
  background-color: var(--color-light-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-dark);
}

/* =========================================================
   2. SECTIONS & HEADINGS
   ========================================================= */
.section-dark, .section-light { padding: var(--section-padding) 0; }
.section-dark { background-color: var(--color-dark-bg); color: var(--color-text-light); }
.section-light { background-color: var(--color-light-bg); color: var(--color-text-dark); }

.with-grid-pattern {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(to right, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}


.with-grid-pattern .section-heading {
  display: inline-block;
  padding: 0 2rem;
  background: none;
}

.section-heading { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 1rem; }
.section-subheading {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  font-weight: 400;
  color: var(--color-text-muted);
  max-width: 700px; margin: 0 auto 3rem; line-height: 1.6;
}

.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{ color: var(--color-text-light); }
.section-dark .section-subheading {
    color: var(--color-text-muted-dark);
    padding: 2em 0 0 0;
}

.section-heading-with-line {
    position: relative; 
}

.section-heading-with-line::before {
    content: '';
    position: absolute;
    top: 94%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 104vw;
    height: 191px;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgb(255 255 255) 10%, rgb(255 255 255 / 50%) 46%, rgba(255, 255, 255, 0) 68%);
}

.section-heading-with-line-dark::before {
    content: '';
    position: absolute;
    top: 79%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 87vw;
    height: 5em;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgb(33 51 71) 0%, rgb(24 38 51 / 88%) 10%, rgb(17 27 37 / 52%) 39%, rgba(255, 255, 255, 0) 71%);
}

.section-heading-with-line::after {
    content: '';
    position: absolute;
    bottom: -0.2em;
    left: 50%;
    transform: translateX(-50%);
    width: 10em;
    max-width: 429px;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #000000 30%, #000000 70%, transparent 100%);
}

.section-dark .section-heading-with-line::after {
    background: linear-gradient(to right, transparent 6%, var(--color-accent-light) 58%, var(--color-accent-light) 51%, transparent 100%);
}

.section-heading-with-line-dark::after {
    content: '';
    position: absolute;
    bottom: -0.3em;
    left: 50%;
    transform: translateX(-50%);
    width: 10em;
    max-width: 429px;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, var(--color-accent) 30%, var(--color-accent) 70%, transparent 100%);
}

.section-dark .section-heading-with-line-dark::after {
    background: linear-gradient(to right, transparent -4%, var(--color-accent-light) 58%, var(--color-accent-light) 51%, transparent 102%);
}

/* =========================================================
   3. NAVIGATION BAR
   ========================================================= */
.logo { width: 4.1rem; height: 4.3rem; margin-left: 2rem; margin-bottom: -9px; margin-top: -8px; }
#logo2 { display: none; }
.navbar-brand { display: flex; align-items: center; gap: 10px; }

.navbar{
  background: transparent; box-shadow: none;
  transition: background-color .18s ease, box-shadow .18s ease, backdrop-filter .18s ease;
}
.navbar--solid{
  background: rgba(10, 20, 28, .85);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  backdrop-filter: saturate(120%) blur(8px); -webkit-backdrop-filter: saturate(120%) blur(8px);
}
.navbar--solid #logo{ display: none !important; }
.navbar--solid #logo2{
  display: block !important; color: #eaf7fb; font-weight: 800; letter-spacing: .08rem; font-size: .95rem;
}

.navbar .nav-link {
    color: rgba(255, 255, 255, .86);
    position: relative;
    padding-top: 10px !important; 
    padding-bottom: 12px !important; 
    display: inline-flex;
    align-items: center;
    transition: color .2s ease;
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width .3s ease, left .3s ease;
}

.navbar .nav-link:hover {
    color: #fff;
}

.navbar .nav-link:hover::after,
.navbar .nav-item.active .nav-link::after {
    width: 100%;
    left: 0;
}

.navbar--solid .nav-link {
    color: #e6f1f5;
}

.navbar--solid .nav-link::after {
    background: var(--color-accent-light);
}

.navbar--solid .nav-link:hover {
    color: #ffffff;
}

@media (max-width:575px){ .logo{ margin-left:0; } #logo2{ display:none !important; } }

/* =========================================================
   4. HERO SECTION
   ========================================================= */
.masthead{
  min-height: 100vh; display:flex; align-items:center; position:relative;
  background-image: url('masthead-wallpaper.jpg'); background-size: cover; background-position: center; color:#fff; isolation:isolate;
}
.masthead::before{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(173,22,35,.82), rgba(173,22,35,.68)); z-index:0; }
.masthead .container{ position:relative; z-index:1; }

.masthead--split .masthead-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  text-align: center;
}
.name-block{ margin-left: 0; line-height:.9; user-select:none; }
.name-line{
  display:block; color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:-.02em;
  /* mas maliit ang max at vw para hindi sumagasa sa kanan sa desktop */
  font-size: clamp(36px, 8vw, 140px);
}
.masthead-right{ max-width: 620px; margin-left: 0; }

.hero-title{ margin:0 0 10px; font-weight:800; line-height:1.22; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2.1rem); color:#fff; }
.hero-status{ width:auto; max-width:83%; white-space:normal; margin:0 0 12px 0; padding:10px 14px; border-radius:999px; background:rgba(0,0,0,.35); color:#fff; font-weight:700; font-size:.95rem; }
.hero-status .dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#2ed573; margin-right:8px; vertical-align:middle; }
.hero-badges {
    display: flex
;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: left;
    margin: 14px 0 10px;
}
.chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.35); color:#fff; font-weight:700; font-size:.9rem; }
.hero-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700; transition: all .15s ease; border:2px solid rgba(255,255,255,.95); color:#fff; background:transparent; }
.hero-btn:hover{ transform: translateY(-2px); }
.hero-btn--primary{ background: #fff;
    border-color: #fff;
    border: 1px solid black;
    color: var(--color-dark-bg); }
.hero-btn--primary:hover{ background:#f2f2f2; }
.hero-btn--outline:hover{ background:#fff; color: var(--color-dark-bg); }

@media (max-width: 991.98px){
  .masthead--split .masthead-grid{ grid-template-columns:1fr; gap:18px; text-align:center; }
  .masthead-right{ margin-left:0; }
  .name-block{ margin-left:0; }
  .hero, .hero-badges, .hero-actions, .hero-status{ justify-content:center; margin-left:auto; margin-right:auto; }
}

@keyframes hero-left-in { from { opacity:0; transform: translateX(-22px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes hero-up-in   { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.name-block{ animation: hero-left-in .9s cubic-bezier(.22,.9,.24,1) .15s both; }
.hero-seq > *{ opacity:0; transform: translateY(14px); animation: hero-up-in .7s ease-out forwards; }
.hero-seq > .hero-status{ animation-delay:.28s; }
.hero-seq .hero-title   { animation-delay:.42s; }
.hero-seq .hero-badges  { animation-delay:.56s; }
.hero-seq .hero-actions { animation-delay:.70s; }
@keyframes pulse-dot { 0% { box-shadow:0 0 0 0 rgba(46,213,115,.35); } 100% { box-shadow:0 0 0 12px rgba(46,213,115,0); } }
.hero-status .dot{ animation: pulse-dot 1.6s ease-out infinite; }
@media (prefers-reduced-motion:reduce){
  .name-block, .hero-seq > *, .hero-status .dot{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* =========================================================
   5. CARDS & COMPONENTS
   ========================================================= */
.feature-card{
  background: var(--color-dark-card);
  border-radius: var(--card-border-radius);
  padding: 2rem 1.25rem; height:100%;
  border: 1px solid var(--color-dark-border);
  transition: transform .2s ease, border-color .2s ease;
}
.feature-card:hover{ transform: translateY(-5px); border-color: var(--color-accent); }
.feature-card__icon{ font-size:2rem; color: var(--color-accent-light); margin-bottom:1rem; }
.feature-card__title{ font-size:1.1rem; margin-bottom:.5rem; color: var(--color-text-light); }
.feature-card__text{ font-size:.95rem; color: var(--color-text-muted-dark); line-height:1.6; }

.offering-card{
  background: var(--color-light-card); border:1px solid var(--color-light-border);
  border-radius: var(--card-border-radius); padding:2rem; height:100%; text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.offering-card:hover{ transform: translateY(-5px); box-shadow:0 8px 24px rgba(0,0,0,.08); border-color: var(--color-accent); }
.offering-card__icon{ font-size:2.5rem; color: var(--color-accent); margin-bottom:1rem; }
.offering-card__title{ font-size:1.25rem; margin-bottom:.75rem; }
.offering-card__text{ color: var(--color-text-muted); line-height:1.6; }
.offering-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  justify-content: center;
}
.offering-card__badges .chip {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-text-light);
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.offering-card__badges .chip:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}
.offering-card--dark {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  color: var(--color-text-light);
}
.offering-card--dark:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--color-accent);
}
.offering-card--dark .offering-card__icon {
  color: var(--color-accent-light);
}
.offering-card--dark .offering-card__title {
  color: var(--color-text-light);
}
.offering-card--dark .offering-card__text {
  color: var(--color-text-muted-dark);
}

.xp-card{
  background: var(--color-light-card); border:1px solid var(--color-light-border);
  border-radius: var(--card-border-radius); padding:1.5rem; display:flex; gap:1rem; margin-bottom:1.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.xp-left{ flex:0 0 50px; }
.xp-logo{
  width:50px; height:50px; border-radius:12px; background: var(--color-accent);
  color: var(--color-dark-bg); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.xp-logo.xp-logo-alt{ background: var(--color-text-dark); color:#fff; }
.xp-right{ flex:1; }
.xp-role{ font-size:1.25rem; font-weight:700; margin:0; color: var(--color-text-dark); }
.xp-meta{ font-size:.9rem; color: var(--color-text-muted); }
.xp-bullets{ margin:1rem 0 1rem 1.2rem; padding-left:0; }
.xp-bullets li{ margin-bottom:.5rem; }
.xp-tags .tag{
  display:inline-block; font-size:.8rem; color: var(--color-accent); background-color:#1daecc1a; font-weight:600;
  padding:.25rem .75rem; margin:.25rem .25rem 0 0; border-radius:99px;
}

/* Skills */
.about-panel{ background: var(--color-dark-card); border-radius: var(--card-border-radius); padding:2rem; border:1px solid var(--color-dark-border); }
.about-photo{ width:140px; display:block; margin:0 auto 1rem; border-radius:50%; border:4px solid var(--color-dark-border); }
.about-title{ text-align:center; margin-bottom:.5rem; color: var(--color-text-light); }
.about-text{ color: var(--color-text-muted-dark); text-align:center; margin:0; }

.skill-pill{
  background: var(--color-dark-card);
  border-radius: 12px;
  padding: 10px 15px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.skill-pill i {
  font-size: 24px;
}

.skill-pill span {
  min-width: 110px;
  font-weight: 600;
  color: var(--color-text-light);
}

.skill-pill__bar {
  position: relative;
  height: 16px;
  flex: 1;
  border-radius: 99px;
  overflow: hidden;
  background: var(--color-dark-bg);
}

.skill-pill__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.skill-pill.is-in-view .skill-pill__bar::before {
  width: var(--val);
}

.skill-pill__bar b {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--color-dark-bg);
  font-weight: 700;
}

/* Photoshop / Art */
.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(376px, 1fr));
    gap: 0.3rem;
}
.art-card{
  position:relative; display:block; border:1px solid var(--color-light-border);
  border-radius: var(--card-border-radius); overflow:hidden; background: var(--color-light-card);
  text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.04); transition: all .2s ease;
}
.art-card:hover{ transform: translateY(-5px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.art-card img{ display:block; width:100%; aspect-ratio: 4 / 3; object-fit:cover; transition: transform .3s ease; }
.art-card:hover img{ transform: scale(1.05); }
.art-card__overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.4); opacity:0; transition: opacity .3s ease; }
.art-card__cta{ color:#fff; font-size:2rem; }
.art-card:hover .art-card__overlay{ opacity:1; }
.art-meta{ margin-top:1rem; }
.art-title{ font-size:1.1rem; }
.art-tags{ text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; color: var(--color-text-muted); font-weight:600; }

.art-item .text-muted.small {
  font-weight: 600;
  font-size: 0.85rem !important;
  color: var(--color-accent) !important;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.art-item:hover .text-muted.small {
  opacity: 1;
}
/* ==== Art tile: attach caption to image and style as one card ==== */
.art-item {
  position: relative;
}

/* Make the image container look like the top of a card */
.art-item .art-card {
  display: block;
  border: 1px solid var(--color-light-border);
  border-bottom: 0;                     /* so the caption can attach flush */
  border-radius: 14px 14px 0 0;         /* rounded top corners */
  overflow: hidden;                     /* keeps image corners clean */
  background: var(--color-light-card);
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
}

/* Image should fill nicely */
.art-item .art-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Caption panel attached to the image */
.art-item .art-meta {
    border: 1px solid var(--color-light-border);
    border-top: 0;
    background: #040404;
    border-radius: 0 0 14px 14px;
    padding: 14px 16px 12px;
    margin-top: -5px;
}

/* Title + tags inside the meta */
.art-item .art-meta .art-title {
    margin: 0 0 6px 0;
    font-weight: 700;
    line-height: 1.25;
    color: white;
}
.art-item .art-meta .art-tags {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Hover: lift the whole tile slightly */
.art-item:hover .art-card,
.art-item:hover .art-meta {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
  border-color: var(--color-accent);
}

/* Optional: subtle scale on the image only on hover */
.art-item:hover .art-card img {
  transform: scale(1.01);
  transition: transform .25s ease;
}

/* ===== Dark-section variant (if your artworks live on a dark section) ===== */
.section-dark .art-item .art-card {
  background: var(--color-dark-card);
  border-color: var(--color-dark-border);
}
.section-dark .art-item .art-meta {
  background: var(--color-dark-card);
  border-color: var(--color-dark-border);
  color: var(--color-text-light);
}
.section-dark .art-item .art-meta .art-tags {
  color: var(--color-text-muted-dark);
}


/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(10,16,22,.92); display:none; align-items:center; justify-content:center; z-index:12000; padding:32px 88px; }
.lightbox[aria-hidden="false"]{ display:flex; }
.lb-figure{ display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:min(92vw,1100px); max-height:calc(100vh - 180px); margin:0; text-align:center; }
.lb-figure img{ display:block; max-width:100%; max-height:calc(100vh - 240px); border-radius:10px; object-fit:contain; }
.lb-figure figcaption{ color:#e7eef6; margin-top:10px; font-weight:600; }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); background:transparent; color:#e7eef6; border:2px solid var(--color-accent-light); border-radius:10px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .15s ease; z-index:12001; }
.lb-btn:hover{ background: var(--color-accent-light); color: var(--color-dark-bg); }
.lb-prev{ left:24px; } .lb-next{ right:24px; }
.lb-close{ top:24px; right:24px; transform:none; }

/* About me parallax bg */
.aboutme-section{
  background-image: linear-gradient(rgba(11,18,24,.7), rgba(11,18,24,.7)), url('wallpaper-aboutme.jpg');
  background-size:cover; background-position:center; background-attachment: fixed;
}

/* Contact */
.contact-form .form-control{
  background: var(--color-dark-card); border:1px solid var(--color-dark-border); color: var(--color-text-light);
  padding:.75rem 1rem; border-radius:12px;
}
.contact-form .form-control::placeholder{ color: var(--color-text-muted-dark); }
.contact-form .form-control:focus{
  background: var(--color-dark-card); border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(29,174,204,.25); color: var(--color-text-light);
}
.contact-form .btn.submit{
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-dark-bg);
  font-weight:700; padding:.75rem 2rem; border-radius:12px; transition: all .2s ease;
}
.contact-form .btn.submit:hover{ background: var(--color-accent-light); border-color: var(--color-accent-light); transform: translateY(-2px); }
.social-links{ display:flex; justify-content:center; gap:1.5rem; }
.social-links a{ color: var(--color-text-muted-dark); font-size:1.5rem; transition: color .2s ease, transform .2s ease; }
.social-links a:hover{ color: var(--color-accent-light); transform: translateY(-3px); }

/* =========================================================
   7. FOOTER & UTILITIES
   ========================================================= */
footer{ background: var(--color-dark-bg); color: var(--color-text-light); padding:2rem 0; font-size:.9rem; }
footer hr.light{ border-top:1px solid var(--color-dark-border); }
.footer-meta{ color: var(--color-text-muted-dark); }

.back-to-top{
  position: fixed; right:24px; bottom:24px; width:48px; height:48px;
  background: var(--color-accent); color: var(--color-dark-bg); font-size:1.25rem; border-radius:12px; border:none;
  display:flex; justify-content:center; align-items:center; z-index:9999; cursor:pointer;
  opacity:0; visibility:hidden; transform: translateY(10px); transition: all .3s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }

.nav-toggle{
  position:relative; z-index:11001; width:44px; height:44px; border:0; border-radius:10px;
  background: rgba(0,0,0,.25); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.nav-toggle__bar{ display:block; width:20px; height:2px; background:#fff; margin:2px 0; }
.sidebar{
  position: fixed; inset:0 auto 0 0; width:78vw; max-width:320px; height:100vh;
  background: rgba(20,24,28,.92); color:#e7eef6; z-index:11000;
  transform: translateX(-100%); transition: transform .25s ease;
  display:flex; flex-direction:column; padding:16px 14px 18px;
  box-shadow:2px 0 18px rgba(0,0,0,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sidebar.is-open{ transform: translateX(0); }
.sidebar__close{
  align-self:flex-end; border:2px solid var(--color-accent-light); color:var(--color-accent-light); background:transparent;
  border-radius:10px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.sidebar__nav{ display:flex; flex-direction:column; padding:10px 6px; gap:6px; margin-top:6px; }
.sidebar__nav a{ color:#e7eef6; text-decoration:none; font-weight:600; letter-spacing:.02rem; padding:10px 8px; border-radius:10px; }
.sidebar__nav a:hover, .sidebar__nav a:focus{ background: rgba(111,225,246,.18); outline:none; }

.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10999; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.backdrop.is-on{ opacity:1; pointer-events:auto; }

@media (min-width: 992px){ .nav-toggle, .sidebar, .backdrop{ display:none !important; } }

/* =========================================================
   8. RESPONSIVE
   ========================================================= */
@media (max-width:768px){
  :root{ --section-padding: 4rem; }
  .section-heading{ font-size:2rem; }
  .section-subheading{ font-size:1rem; }
}

/* =========================================================
   9. CAROUSEL / TESTIMONIALS (UPDATED)
   ========================================================= */
:root {
  /* Fallbacks if not defined elsewhere */
  --foreground: 215 28% 17%; /* hsl(215 28% 17%) ~ slate-ish */
  --tw-gradient-from-position: 0%;
  --tw-gradient-to-position: 100%;
}

.carousel-wrapper {
  position: relative;
  margin-top: 3rem;
  padding: 2rem 0;
  height: 400px;
  display: flex;
  align-items: center;
}

.carousel-track-container {
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  /* transition handled by JS */
}

.carousel-card {
  position: relative;
  flex: 0 0 80vw;
  max-width: 400px;
  background: var(--color-light-card); /* keep your solid card color */
  border: 1px solid var(--color-light-border);
  border-radius: var(--card-border-radius);
  padding: 2rem 2.5rem 2rem 2.5rem;

  /* 👇 Make INACTIVE cards less pronounced */
  transform: scale(0.85);
  opacity: 0.4;
  filter: grayscale(100%) blur(1px);
  box-shadow: 0 8px 20px rgba(45, 53, 62, 0.05);

  transition:
    transform 0.5s ease,
    opacity 0.5s ease,
    filter 0.5s ease,
    box-shadow 0.5s ease,
    border-color 0.5s ease;
  overflow: hidden; /* ensure ::before doesn’t spill */
}

/* Gradient overlay so it’s visible even with a solid background */
.carousel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Tailwind-style gradient variables */
  --tw-gradient-from: hsl(var(--foreground) / 0.12) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--foreground) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  opacity: 1; /* adjust if you want subtler */
  z-index: 0;
}

/* Lift content above the overlay */
.carousel-card > * {
  position: relative;
  z-index: 1;
}

/* ✅ ACTIVE card pops out */
.carousel-card.is-active {
  transform: scale(1);
  opacity: 1;
  filter: none;                /* remove grayscale + blur */
  box-shadow: 0 12px 35px rgba(45, 53, 62, 0.12);
  border-color: #ddd;
}

/* Slightly stronger gradient on the active card */
.carousel-card.is-active::before {
  --tw-gradient-from: hsl(var(--foreground) / 0.18) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--foreground) / 0) var(--tw-gradient-to-position);
}

.testimonial-quote {
  position: absolute;
  top: 1.5rem;
  left: 2.5rem;
  font-size: 2.5rem;
  color: var(--color-light-border);
  z-index: 1;
}

.testimonial-text {
  font-style: normal;
  font-weight: 500;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
  line-height: 1.7;
  margin-top: 2rem; /* Make space for quote icon */
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-light-border);
}

.testimonial-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.author-title {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-light-card);
  border: 1px solid var(--color-light-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  color: var(--color-text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all .2s ease;
}
.carousel-btn:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.carousel-btn--prev { left: 0px; }
.carousel-btn--next { right: 0px; }

@media (max-width: 768px) {
  .carousel-wrapper {
    padding: 1rem 0;
    height: auto;
  }
  .carousel-btn {
    width: 40px;
    height: 40px;
  }
  .carousel-btn--prev { left: -5px; }
  .carousel-btn--next { right: -5px; }
}

/* ============================
   WHAT I OFFER — readability tweaks
   ============================ */

/* Left-align and comfy line length on desktop */
#services .offering-card{
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 2rem 2rem 1.5rem;
}

#services .offering-card__icon{
  margin: 0 0 .5rem 0;
  font-size: 1.75rem;
  color: var(--color-accent);
  opacity: .9;
}

#services .offering-card__title{
  text-align: left;
  margin: 0 0 .35rem 0;
  letter-spacing: .2px;
}

#services .offering-card__text{
  font-size: .98rem;
  line-height: 1.7;
  max-width: 60ch;                 /* comfortable reading width */
  color: var(--color-text-muted-dark);
}

/* Make Outcome/Tools start on a NEW LINE but keep the label and sentence inline */
#services .offering-card__text b{
  font-weight: 800;
  display: inline;
  color: var(--color-text-light);
}

/* Force a line break BEFORE each bold label */
#services .offering-card__text b::before{
  content: "";
  display: block;
  margin-top: .5rem;
}

/* Slightly tighter gap if labels follow each other */
#services .offering-card__text b + b::before{
  margin-top: .35rem;
}

/* Badges: left align + tidy spacing */
#services .offering-card__badges{
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  justify-content: flex-start;
}

#services .offering-card .chip{
  padding: 6px 10px;
  font-size: .78rem;
}

/* Keep mobile centered for balance */
@media (max-width: 575.98px){
  #services .offering-card,
  #services .offering-card__title,
  #services .offering-card__text{ text-align: center; margin-left:auto; margin-right:auto; }
  #services .offering-card__badges{ justify-content: center; }
}



/* ===== Skillset — Neutral (no proficiency badges) ===== */
.skills-block__title{
  font-weight: 900; font-size: 1.15rem;
  display: inline-flex; align-items: center; gap: .6rem;
  margin: .25rem 0 .25rem;
}
.skills-block__title i{ color: var(--color-accent); opacity:.9; }

.skill-mini{
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--card-border-radius);
  padding: 1rem .95rem; height:100%;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.section-light .skill-mini{ background: var(--color-light-card); border-color: var(--color-light-border); }

.skill-mini__head{
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: .6rem; margin-bottom: .35rem;
}
.skill-mini__icon{ font-size: 1.15rem; color: var(--color-accent); opacity:.9; }
.skill-mini h4{ font-size: 1rem; font-weight: 800; margin: 0; }

/* specific skill pills */
.skill-mini__skills{
  display:flex; flex-wrap:wrap; gap:.35rem .4rem; margin:.15rem 0 .6rem;
}
.pill{
  font-size:.74rem; font-weight:700; line-height:1;
  padding:.32rem .52rem; border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--color-text-light);
}
.section-light .pill{ background:#f1f5f9; border-color:#e5e7eb; color:var(--color-text-dark); }

.skill-mini__line{ margin:.1rem 0 .55rem; color:var(--color-text-muted-dark); line-height:1.55; }

/* tool chips */
.skill-mini__tools{ display:flex; flex-wrap:wrap; gap:.35rem .4rem; }
.tool{
  font-size:.72rem; padding:.28rem .48rem; border-radius:10px;
  background:rgba(255,255,255,.06); color:var(--color-text-light);
  border:1px solid var(--color-dark-border);
}
.section-light .tool{ background:#f4f6f8; color:var(--color-text-dark); border-color:var(--color-light-border); }



/* Developer Skills pop — spacing & readability */
.devskills { position: relative; }

/* subtle top divider to separate from VA skills */
.devskills::before{
  content:"";
  display:block;
  height:1px;
  width:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  margin: .5rem 0 1.25rem;
}

/* roomier cards just for Developer block */
.devskills .skill-mini--dev{
  padding: 1.4rem 1.25rem;
  border-radius: var(--card-border-radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.devskills .skill-mini--dev:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
  border-color: var(--color-accent);
}

/* bigger headings and icon */
.devskills .skill-mini__head { margin-bottom: .55rem; }
.devskills .skill-mini__icon { font-size: 1.25rem; }
.devskills .skill-mini--dev h4{
  font-size: 1.08rem;
  letter-spacing: .2px;
}

/* make the one-liner more legible */
.devskills .skill-mini__line{
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-light);
  margin-top: .35rem;
}

/* add breath to the chips */
.devskills .skill-mini__skills{ gap: .45rem .5rem; }
.devskills .pill{
  font-size: .82rem;
  padding: .42rem .62rem;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}
.devskills .skill-mini__tools{ gap: .45rem .5rem; }
.devskills .tool{
  font-size: .82rem;
  padding: .42rem .62rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

/* wider gutters between cards on large screens */
@media (min-width: 992px){
  .devskills .row { margin-left: -14px; margin-right: -14px; }
  .devskills .row > [class*="col-"] { padding-left: 14px; padding-right: 14px; }
}

/* Virtual Assistant Skills pop — spacing & readability (match dev) */
.vaskills { position: relative; }

/* subtle divider under the VA heading */
.vaskills::before{
  content:"";
  display:block;
  height:1px;
  width:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  margin: .5rem 0 1.25rem;
}

/* roomier VA cards */
.vaskills .skill-mini--va{
  padding: 1.4rem 1.25rem;
  border-radius: var(--card-border-radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vaskills .skill-mini--va:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
  border-color: var(--color-accent);
}

/* bigger headings and icon */
.vaskills .skill-mini__head { margin-bottom: .55rem; }
.vaskills .skill-mini__icon { font-size: 1.25rem; }
.vaskills .skill-mini--va h4{
  font-size: 1.08rem;
  letter-spacing: .2px;
}

/* more legible one-liner */
.vaskills .skill-mini__line{
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-light);
  margin-top: .35rem;
}

/* chip spacing like dev */
.vaskills .skill-mini__skills{ gap: .45rem .5rem; }
.vaskills .pill{
  font-size: .82rem;
  padding: .42rem .62rem;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}
.vaskills .skill-mini__tools{ gap: .45rem .5rem; }
.vaskills .tool{
  font-size: .82rem;
  padding: .42rem .62rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

/* matching gutters on lg+ */
@media (min-width: 992px){
  .vaskills .row { margin-left: -14px; margin-right: -14px; }
  .vaskills .row > [class*="col-"] { padding-left: 14px; padding-right: 14px; }
}


/* ===== About (single column) ===== */
.about-hero{
  /* stronger overlay for readability on any background */
  background-image:
    linear-gradient(rgba(11,18,24,.82), rgba(11,18,24,.72)),
    url('wallpaper-aboutme.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.about-wrap{
  max-width: 880px;
  margin: 1.2rem auto 0;
  text-align: center;
}

.about-lede{
  font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem);
  font-weight: 800;
  color: var(--color-text-light);
  margin-bottom: .75rem;
  letter-spacing: .2px;
}

.about-text{
  color: var(--color-text-muted-dark);
  line-height: 1.75;
  margin-bottom: .9rem;
}

.badge-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem .6rem;
  margin: 1.1rem auto 0;
}

.badge{
  font-weight: 800;
  font-size: .86rem;
  padding: .48rem .72rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--color-text-light);
}

.about-ctas{
  margin-top: 1.1rem;
  display: flex;
  gap: .65rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* ===== About — structured, easier to read ===== */
.about-wrap--structured{
  max-width: 760px;          /* narrower for comfort vs. long lines */
  margin: 1.25rem auto 0;
  text-align: left;          /* left-align body text for easier reading */
}

.about-lede{
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  font-weight: 800;
  color: var(--color-text-light);
  margin: 0 auto 1rem;
  text-align: center;        /* keep the lede centered under the H2 */
  line-height: 1.5;
  letter-spacing: .2px;
}

.about-block{ margin-top: 1.1rem; }
.overline{
  display: inline-block;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: .35rem;
}
.about-text{
  color: var(--color-text-muted-dark);
  line-height: 1.8;
  font-size: 1.02rem;
}

/* Stat strip */
.about-stats{
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin: 1.1rem 0 1rem;
}
.stat{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--card-border-radius);
  padding: .7rem .85rem;
}
.stat__label{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-text-muted-dark);
  margin-bottom: .15rem;
}
.stat__value{
  font-size: .98rem;
  font-weight: 700;
  color: var(--color-text-light);
}

/* Pull quote adds rhythm */
.about-quote{
  margin: 1rem 0 0;
  padding: .9rem 1rem;
  border-left: 3px solid var(--color-accent);
  font-style: italic;
  color: var(--color-text-light);
  background: rgba(255,255,255,.03);
  border-radius: var(--card-border-radius);
}

/* Wider stat grid on larger screens */
@media (min-width: 768px){
  .about-stats{
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ===== About (2-column media + text) ===== */
.about-hero { position: relative; }

.about-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;  /* text | media */
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  margin-top: 7rem;
}

/* Columns */
.about-col { min-width: 0; }
.about-col--text { order: 1; }
.about-col--media { order: 2; }

/* Lede and blocks */
.about-lede{
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  color: var(--color-text-light);
  margin: 0 0 1.25rem 0;
}

.about-block{ margin: 1.25rem 0; }
.overline{
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  font-weight: 800;
  margin-bottom: .25rem;
}
.about-text{
  color: var(--color-text-muted-dark);
  line-height: 1.8;
  margin: 0;
}
.about-quote{
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--color-accent-light);
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  color: #eaf3fa;
  font-style: italic;
}

/* Photo + stats */
.about-photo-card{
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--card-border-radius);
  padding: 1.25rem;
  text-align: center;
}
.about-photo-img{
  width: clamp(220px, 45vw, 340px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;             /* modern soft-rect look */
  border: 4px solid var(--color-dark-border);
  display: block;
  margin: 0 auto .75rem;
}
.about-photo-meta{
  font-weight: 800;
  color: var(--color-text-light);
  line-height: 1.2;
}
.about-photo-meta span{
  display:block;
  font-weight:600;
  font-size:.9rem;
  color: var(--color-text-muted-dark);
}

/* Stats under photo */
.about-stats-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.stat-card{
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--card-border-radius);
  padding: .9rem .95rem;
}
.stat__label{
  font-size: .78rem;
  color: var(--color-text-muted-dark);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.stat__value{
  color: var(--color-text-light);
  font-weight: 800;
}

/* Responsive order:
   On mobile, show Media (photo + stats) first,
   then the text column, and stack stats in one column. */
@media (max-width: 991.98px){
  .about-grid{
    grid-template-columns: 1fr;
  }
  .about-col--media{ order: -1; }      /* photo first on mobile */
  .about-stats-grid{ grid-template-columns: 1fr; }
  .about-lede, .about-text, .about-quote{ text-align: left; }
}

/* ===== FEATURE STAT CARDS (About photo column) ===== */

/* Accent tokens (tweak if you want a slightly different palette) */
:root{
  --stat-exp: #4cc9f0;   /* cyan   */
  --stat-rec: #a78bfa;   /* violet */
  --stat-ops: #22c55e;   /* green  */
  --stat-style:#f59e0b;  /* amber  */
}

/* Grid stays the same, but give it a little more gap on large screens */
.stat-grid--feature{
  gap: 14px;
}

/* Layered “premium” card:
   - gradient border (background-clip trick)
   - soft inner glow
   - subtle glass feel that fits your dark theme */
.stat-card{
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) padding-box,
    linear-gradient(140deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04), rgba(255,255,255,0.12)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 6px 16px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: saturate(120%) blur(2px);
  transform: translateY(0);
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
             box-shadow .25s cubic-bezier(.2,.8,.2,1),
             background .25s ease;
}

/* Soft corner glow that feels like it emerges from the headshot */
.stat-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 14px;
  pointer-events:none;
  background:
    radial-gradient(40% 60% at 10% 0%, rgba(255,255,255,.06), transparent 60%);
  mix-blend-mode: screen;
}

/* Tiny motion for delight */
.stat-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 14px 28px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Top row: icon + label */
.stat__top{
  display:flex; align-items:center; gap:10px;
  margin-bottom:6px;
}
.stat__icon{
  display:inline-grid; place-items:center;
  width:36px; height:36px;
  border-radius:10px;
  color:#0b1217;
  font-size:16px;
  background: linear-gradient(180deg, #ffffff, #e6e6e6);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.35);
}

/* Label and value hierarchy */
.stat__label{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  font-size:.78rem;
  color:var(--color-text-muted-dark);
}
.stat__value{
  font-weight:900;
  color:var(--color-text-light);
  line-height:1.35;
  font-size: clamp(.95rem, .84rem + .35vw, 1.05rem);
}
.stat__detail{
  margin-top:4px;
  color:var(--color-text-muted-dark);
  font-size:.9rem;
}

/* Variant accents (thin top glow + icon tint) */
.stat--experience{
  background:
    linear-gradient(140deg, rgba(76, 201, 240, .12), rgba(76,201,240,.00)) padding-box,
    linear-gradient(140deg, rgba(76,201,240,.55), rgba(255,255,255,.06), rgba(76,201,240,.25)) border-box;
}
.stat--record{
  background:
    linear-gradient(140deg, rgba(167,139,250,.12), rgba(167,139,250,.00)) padding-box,
    linear-gradient(140deg, rgba(167,139,250,.55), rgba(255,255,255,.06), rgba(167,139,250,.25)) border-box;
}
.stat--ops{
  background:
    linear-gradient(140deg, rgba(34,197,94,.10), rgba(34,197,94,.00)) padding-box,
}

/* ===== Contact: thank-you state ===== */
.thanks-card {
  background: linear-gradient(180deg, rgba(40, 62, 75, 0.25), rgba(29, 44, 53, 0.18));
  border: 1px solid rgba(145, 231, 255, 0.12);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
  color: #e9f5ff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: cardPop 420ms ease-out both;
}

.thanks-card__icon {
  font-size: 44px;
  color: #4ad9b3;
  margin-bottom: 12px;
  text-shadow: 0 0 18px rgba(74, 217, 179, 0.3);
}

.thanks-card__title {
  font-weight: 700;
  font-size: 22px;
  margin: 6px 0 6px;
  letter-spacing: .2px;
}

.thanks-card__desc {
  color: #b9cfe0;
  margin: 0;
  font-size: 15px;
}

/* small polish */
.contact-form .form-control { border-radius: 12px; }
.contact-form .btn.submit { border-radius: 12px; }

/* pop animation */
@keyframes cardPop {
  0% { opacity: 0; transform: translateY(10px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ===== Contact: emphasize success and hide header ===== */
#contact { position: relative; }

/* When in success-mode, completely hide the header */
#contact.success-mode .contact-header { 
  display: none !important; 
}

/* Also fade/disable the form in success-mode */
#contact .contact-form{
  transition: opacity .3s ease, transform .3s ease;
}
#contact.success-mode .contact-form{
  opacity: 0; transform: translateY(8px); pointer-events: none;
}

/* Success card — larger & centered */
.thanks-card{
  max-width: 820px;
  margin: 12px auto 0;
  padding: 42px 32px 34px;
  text-align: center;
  color: #e9f5ff;
  background:
    radial-gradient(60% 110% at 50% -20%, rgba(88, 225, 255, .22), transparent 60%),
    linear-gradient(180deg, rgba(40, 62, 75, 0.44), rgba(29, 44, 53, 0.28));
  border: 1px solid rgba(145, 231, 255, 0.22);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(6px) saturate(120%);
}

/* Badge */
.thanks-card__badge{
  width: 66px; height: 66px;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  border-radius: 50%;
  color: #07221e;
  background: linear-gradient(180deg, #6af0c9, #45d0ab);
  box-shadow: 0 14px 36px rgba(70, 216, 171, .35), inset 0 1px 0 rgba(255,255,255,.7);
  transform: scale(0.95);
}
.thanks-card__badge i{ font-size: 28px; }

.thanks-card__title{
  font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem);
  font-weight: 900;
  letter-spacing: .2px;
  margin: 6px 0 8px;
}
.thanks-card__desc{
  color: #b9cfe0;
  margin: 0;
  font-size: 16px;
}

/* Enter/leave animations */
@keyframes successIn{
  0%{opacity:0; transform: translateY(14px) scale(.98);}
  60%{opacity:1; transform: translateY(-2px) scale(1.01);}
  100%{opacity:1; transform: translateY(0) scale(1);}
}
@keyframes successOut{
  0%{opacity:1; transform: translateY(0) scale(1);}
  100%{opacity:0; transform: translateY(-14px) scale(.98);}
}
.thanks-card.is-entering{ animation: successIn 460ms cubic-bezier(.2,.8,.2,1) both; }
.thanks-card.is-leaving { animation: successOut 380ms ease-in both; }

/* ===== Featured Projects: FULL-BLEED split rows (no cards) ===== */
.projects-bleed { 
  padding-top: var(--section-padding);
  padding-bottom: calc(var(--section-padding) - 1rem);
}

/* Edge-to-edge rows with generous gutters that scale by viewport */
.project-row{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); /* BIGGER image */
  gap: clamp(18px, 3.5vw, 56px);
  align-items: center;
  /* remove “card” feeling */
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  /* full-bleed padding */
  padding-left: clamp(16px, 5vw, 72px);
  padding-right: clamp(16px, 5vw, 72px);
  padding-top: clamp(10px, 2vw, 24px);
  padding-bottom: clamp(18px, 3vw, 32px);
}

/* alternate sides */
.project-row--reverse{
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
}
.project-row--reverse .project-media { order: 2; }
.project-row--reverse .project-copy  { order: 1; }

/* Media: BIG and clean, no borders */
.project-media{
  position: relative;
  overflow: hidden;
  border-radius: 14px;                  /* optional subtle rounding */
}
.project-media img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .5s ease;
}
.project-row:hover .project-media img{ transform: scale(1.06); }

/* Copy block (re-use your color tokens) */
.project-copy{ color: var(--color-text-light); }
.project-tag{
  display:inline-block;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--color-accent-light);
  background: rgba(111,225,246,.12);
  border: 1px solid rgba(111,225,246,.35);
  border-radius: 999px;
  padding: .35rem .7rem;
  margin-bottom: .6rem;
}
.project-title{
  margin: .1rem 0 .5rem;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  color: #fff;
}
.project-text{
  color: var(--color-text-muted-dark);
  line-height: 1.7;
  max-width: 58ch;
}

/* Buttons (reuse your existing button look) */
.project-actions{ display:flex; gap:.8rem; margin-top: 1rem; }
.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1rem; border-radius:10px; text-decoration:none; font-weight:700;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  border:2px solid transparent;
}
.btn-primary{ background: var(--color-accent); color: var(--color-dark-bg); border-color: var(--color-accent); }
.btn-primary:hover{ background: var(--color-accent-light); border-color: var(--color-accent-light); transform: translateY(-2px); }
.btn-ghost{ background: transparent; color:#fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover{ background:#fff; color: var(--color-dark-bg); transform: translateY(-2px); }

/* Responsive: stack, but keep image dominant */
@media (max-width: 992px){
  .project-row,
  .project-row--reverse{
    grid-template-columns: 1fr;
  }
  .project-row--reverse .project-media { order: 1; }
  .project-row--reverse .project-copy  { order: 2; }
  .project-text{ max-width: none; }
  .project-media{ border-radius: 12px; }
}

/* Ultra-wide screens: let image breathe even more */
@media (min-width: 1400px){
  .project-row{ grid-template-columns: 1.5fr 1fr; }
  .project-row--reverse{ grid-template-columns: 1fr 1.5fr; }
}
/* ===== Featured Projects: combined row separation (bands + hairline + accent) ===== */

/* 1) Alternating full-width bands per row (subtle, not cards) */
.projects-bleed .project-row { position: relative; background: transparent; }
.projects-bleed .project-row:nth-of-type(odd){
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.016));
}
.projects-bleed .project-row:nth-of-type(even){
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12));
}

/* Give rows a touch more vertical breathing room so bands feel intentional */
.projects-bleed .project-row{
  padding-top: clamp(16px, 2.4vw, 30px);
  padding-bottom: clamp(24px, 3.2vw, 40px);
}

/* 2) Hairline gradient separator between consecutive rows */
.projects-bleed .project-row + .project-row::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity:.7; pointer-events:none;
}

/* 3) Cyan accent rule beside the text column (flips on reverse rows) */
.projects-bleed .project-copy{ position:relative; }
.projects-bleed .project-copy::before{
  content:"";
  position:absolute; left:-18px; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-light));
  opacity:.45; border-radius:3px;
}
.projects-bleed .project-row--reverse .project-copy::before{
  left:auto; right:-18px;           /* flip to the outer side on reversed rows */
}

/* Mobile: tuck the accent in slightly and keep order fixes from your split layout */
@media (max-width: 992px){
  .projects-bleed .project-copy::before{ left:-12px; right:auto; }
  .projects-bleed .project-row--reverse .project-copy::before{ right:-12px; left:auto; }
}

/* Optional polish: soften band edges on huge screens */
@media (min-width: 1400px){
  .projects-bleed .project-row:nth-of-type(odd){
    background:
      radial-gradient(1200px 240px at 50% 0%, rgba(255,255,255,.05), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.014));
  }
}

/* put in style.css */
section[id], header[id] { scroll-margin-top: 88px; } /* match your navbar height */

/* ===== Activepieces-style workflow (boxes + short arrows) ===== */
.ap-bleed { padding-top: var(--section-padding); padding-bottom: var(--section-padding); }
.apflow { max-width: 980px; margin: 0 auto; padding: clamp(12px,3vw,28px) clamp(16px,5vw,56px); }

.ap-main, .ap-branchlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ap-branches { display:grid; grid-template-columns: 1fr 280px; gap: 28px; margin-top: 6px; }

.ap-branch { position:relative; }
.ap-branch__tag{
  display:inline-block; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  border-radius:999px; padding:.25rem .6rem; margin:6px 0 4px;
  color: var(--color-accent-light);
  background: rgba(111,225,246,.12); border:1px solid rgba(111,225,246,.35);
}
.ap-branch__tag--muted {
    color: #cbd5e1;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    margin: 0 0 0 58px;
}
.ap-otherwise-line{
  position:relative; width:2px; height: 420px; margin: 10px auto 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.14) 6px, transparent 6px, transparent 12px);
  border-radius:2px; opacity:.5;
}

/* Step card */
.ap-step { position: relative; }
.ap-card{
  display:grid; grid-template-columns: 56px 1fr 28px; gap:12px; align-items:center;
  padding:12px 12px; border-radius:14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--color-dark-border);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ap-left{
  height:56px; width:56px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background: rgba(255,255,255,.04);
  border:1px solid var(--color-dark-border); color:#fff; font-size:1.2rem;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ap-title{ color:#fff; font-weight:800; }
.ap-sub{ color: var(--color-text-muted-dark); }
.ap-result{
  margin-top:8px; display:inline-block; max-width:100%;
  padding: 7px 10px; border-radius:999px; font-weight:700; font-size:.9rem;
  color:#cfe7f4; border:1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  max-height:0; opacity:0; overflow:hidden; transition:max-height .45s ease, opacity .35s ease;
}
.ap-right{ color: #86efac; opacity:0; transform: scale(.6); transition: opacity .25s ease, transform .25s ease; }

/* Arrow connector (short, with arrow head) */
.ap-arrow{
  position:relative; height:28px; width:2px; margin: 0 0 0 28px; /* aligns under icon */
  background: rgba(255,255,255,.18); border-radius:2px;
}
.ap-arrow::after{
  content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid rgba(255,255,255,.25);
}
.ap-arrow__fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-light));
  border-radius:2px;
  transition: height .45s cubic-bezier(.25,1,.5,1);
}

/* Smaller arrow (first item in branch) */
.ap-arrow--small{ height:20px; }
.ap-arrow--small::after{ bottom:-4px; }

/* States */
.ap-step.is-active .ap-card{
  border-color: var(--color-accent-light);
  box-shadow: 0 0 0 6px rgba(111,225,246,.12);
  transform: translateY(-1px);
}
.ap-step.is-active .ap-left{ border-color: var(--color-accent-light); box-shadow: 0 0 0 4px rgba(111,225,246,.12); }
.ap-step.is-done .ap-right{ opacity:1; transform: scale(1); }
.ap-step.show-result .ap-result{ max-height: 60px; opacity:1; }

/* Layout: main column and branches */
.ap-main { margin-bottom: 6px; }
.ap-branch--left .ap-branchlist { padding-right: 12px; }

/* Mobile */
@media (max-width: 991.98px){
  .apflow{ padding-left: 24px; padding-right: 24px; }
  .ap-branches{ grid-template-columns: 1fr; }
  .ap-otherwise-line{ height: 220px; }
}
/* === Workflow compact look + green completed state === */

/* compact sizing */
.apflow{
  --node: 44px;            /* icon box size (was 56) */
  --gap: 12px;             /* grid gap (was 12) */
  --ap-green: #22c55e;     /* completed color (green-500) */
  --ap-green-soft: rgba(34,197,94,.14);
}

.ap-main, .ap-branchlist{ gap: 10px; }

/* card/node */
.ap-card{
  grid-template-columns: var(--node) 1fr 20px;
  padding: 8px 10px;
  border-radius: 10px;
}
.ap-left{
  height: var(--node); width: var(--node);
  border-radius: 10px;
  font-size: 1rem;
}
.ap-title{ font-size: .95rem; }
.ap-sub{   font-size: .85rem; }
.ap-result{
  margin-top: 6px;
  padding: 5px 8px;
  font-size: .78rem;
  max-height: 0; opacity: 0;
}

/* short arrows tighter */
.ap-arrow{ height: 18px; margin-left: 22px; } /* align under smaller icon */
.ap-arrow--small{ height: 14px; }

/* active highlight stays cyan */
.ap-step.is-active .ap-card{
  border-color: var(--color-accent-light);
  box-shadow: 0 0 0 4px rgba(111,225,246,.12);
  transform: translateY(-1px);
}
.ap-step.is-active .ap-left{
  border-color: var(--color-accent-light);
  box-shadow: 0 0 0 3px rgba(111,225,246,.12);
}

/* ✅ completed = green ring + green border + subtle glow */
.ap-step.is-done .ap-card{
  border-color: var(--ap-green);
  box-shadow: 0 0 0 4px var(--ap-green-soft);
}
.ap-step.is-done .ap-left{
  border-color: var(--ap-green);
  box-shadow: 0 0 0 3px var(--ap-green-soft);
}
.ap-step.is-done .ap-right{
  color: var(--ap-green);
  opacity: 1; transform: scale(1);
}
.ap-step.show-result .ap-result{
  max-height: 48px; opacity: 1;
  border-color: rgba(34,197,94,.25);               /* hint of green */
  background: rgba(34,197,94,.06);
  color: #dff7e7;
}

/* arrows: when done, keep a calm green fill */
.ap-arrow.done .ap-arrow__fill{
  background: linear-gradient(180deg, var(--ap-green), #16a34a);
}

/* desktop polish: keep right branch muted */
.ap-otherwise-line{ opacity: .4; }

/* mobile adjustments */
@media (max-width: 991.98px){
  .apflow{ padding-left: 20px; padding-right: 20px; }
  .ap-arrow{ margin-left: 18px; }
}
/* === MICRO WORKFLOW DENSITY OVERRIDES (compact nodes & arrows) === */
.apflow{
  /* smaller node, tighter grid, narrower column */
  --node: 36px;                 /* icon square size (was 44–56px) */
  --gap: 8px;                   /* gap between columns */
  --ap-green: #22c55e;
  --ap-green-soft: rgba(34,197,94,.14);
  max-width: 820px;             /* slimmer lane so it feels like a flow */
  padding-left: clamp(12px,4vw,40px);
  padding-right: clamp(12px,4vw,40px);
}

/* lists closer together */
.ap-main, .ap-branchlist{ gap: 8px; }

/* cards/nodes */
.ap-card{
  grid-template-columns: var(--node) 1fr 16px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}
.ap-left{
  width: var(--node); height: var(--node);
  border-radius: 8px;
  font-size: .85rem;
}
.ap-title{ font-size: .88rem; line-height: 1.2; }
.ap-sub  { font-size: .78rem; }
.ap-right{ transform: scale(.55); }        /* tiny check */

/* result chip — smaller */
.ap-result{
  margin-top: 4px;
  padding: 4px 6px;
  font-size: .70rem;
  max-height: 0; opacity: 0;
}
.ap-step.show-result .ap-result{ max-height: 36px; }

/* arrows — short and tight */
.ap-arrow{ height: 12px; margin-left: 16px; }
.ap-arrow--small{ height: 10px; }
.ap-arrow::after{ border-left:5px solid transparent; border-right:5px solid transparent; border-top-width:5px; }

/* active cyan highlight (smaller glow) */
.ap-step.is-active .ap-card{ border-color: var(--color-accent-light); box-shadow: 0 0 0 3px rgba(111,225,246,.12); }
.ap-step.is-active .ap-left{ border-color: var(--color-accent-light); box-shadow: 0 0 0 2px rgba(111,225,246,.12); }

/* ✅ completed = green border + subtle glow (smaller) */
.ap-step.is-done .ap-card{ border-color: var(--ap-green); box-shadow: 0 0 0 3px var(--ap-green-soft); }
.ap-step.is-done .ap-left{ border-color: var(--ap-green); box-shadow: 0 0 0 2px var(--ap-green-soft); }
.ap-step.is-done .ap-right{ color: var(--ap-green); opacity: 1; transform: scale(.75); }
.ap-step.show-result .ap-result{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.06);
  color: #dff7e7;
}

/* calm green fill for passed arrows */
.ap-arrow.done .ap-arrow__fill{
  background: linear-gradient(180deg, var(--ap-green), #16a34a);
}

/* branches spacing + muted otherwise line */
.ap-branches{ gap: 20px; }
.ap-otherwise-line{ height: 320px; opacity: .35; }

/* mobile tweaks */
@media (max-width: 991.98px){
  .apflow{ max-width: 100%; padding-left: 18px; padding-right: 18px; }
  .ap-arrow{ margin-left: 14px; }
}
/* --- Fix right-edge white gutter from vw-based heading glows --- */
.section-heading-with-line::before,
.section-heading-with-line-dark::before {
  /* stay centered but never exceed the layout width */
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 100vw);   /* safe width (no scrollbar overshoot) */
  max-width: 100%;
}

/* Safety net: block any stray horizontal painting */
html, body { overflow-x: clip; } /* better than hidden in modern browsers */

/* If any full-bleed rows exist, make sure they don't paint past the edge */
.container-fluid.px-0 { overflow-x: clip; }
/* === ULTRA-NARROW WORKFLOW LANE (small cards) === */
.apflow{
  /* lane width */
  max-width: 560px !important;   /* <- make this smaller/bigger to taste */
  margin-left: auto;
  margin-right: auto;

  /* tiny nodes */
  --node: 28px;
  --gap: 6px;
  --cardH: 54px;
}

/* cards */
.ap-card{
  grid-template-columns: var(--node) 1fr 14px;
  min-height: var(--cardH);
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.ap-left{
  width: var(--node); height: var(--node);
  border-radius: 6px;
  font-size: .72rem;
  align-self: center;
}
.ap-right{ transform: scale(.5); }

/* text */
.ap-title{ font-size: .80rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sub  { font-size: .70rem; line-height: 1.25; }
.ap-result{
  margin-top: 3px; padding: 3px 6px;
  font-size: .62rem; max-height: 0; opacity: 0;
}
.ap-step.show-result .ap-result{ max-height: 28px; }

/* arrows (short & tight) */
.ap-arrow{ height: 8px; margin-left: 12px; }
.ap-arrow--small{ height: 6px; }
.ap-arrow::after{
  border-left:4px solid transparent; border-right:4px solid transparent; border-top-width:4px;
}

/* active/done glows – scaled down */
.ap-step.is-active .ap-card{ border-color: var(--color-accent-light); box-shadow: 0 0 0 2px rgba(111,225,246,.12); }
.ap-step.is-active .ap-left{ border-color: var(--color-accent-light); box-shadow: 0 0 0 2px rgba(111,225,246,.12); }
.ap-step.is-done  .ap-card{ border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.14); }
.ap-step.is-done  .ap-left{ border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.14); }
.ap-step.is-done  .ap-right{ color: #22c55e; opacity: 1; transform: scale(.62); }

/* keep “Otherwise” rail from forcing width; hide on very tight lanes */
.ap-branch--right{ right: -8px; width: 180px; }
@media (max-width: 1280px){
  .ap-branch--right{ display: none; }
}

/* mobile keeps proportionate */
@media (max-width: 991.98px){
  .apflow{ max-width: 100% !important; padding-inline: 16px; }
}
/* ===== Automation split: left copy / right workflow ===== */
.automation-wrap{
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(420px, 560px);
  gap: clamp(18px, 4vw, 48px);
  align-items: start;
}

.automation-copy .section-heading{ margin-bottom: .35rem; }
.automation-bullets{
  margin: 1rem 0 1.25rem; padding-left: 1.1rem;
  color: var(--color-text-muted-dark);
}
.automation-bullets li{ margin: .25rem 0; }

.automation-cta{ display:flex; gap:.6rem; flex-wrap:wrap; }
.automation-cta .btn-primary,
.automation-cta .btn-ghost{ border-radius:10px; }

/* Right column: let apflow fill the grid cell and keep it narrow */
.automation-flow .apflow{
  max-width: 100% !important; /* override earlier clamps */
  width: 100%;
  --node: 28px;
  --gap: 6px;
  --cardH: 54px;
}

/* Ensure branch rail doesn’t steal width on the right column */
.ap-branches{ position: relative; display: block; }
.ap-branch--left{ width: 100%; }
.ap-branch--right {
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 0;
    width: 106px;
    pointer-events: none;
}

/* Responsive: stack columns on mobile */
@media (max-width: 991.98px){
  .automation-wrap{ grid-template-columns: 1fr; }
  .automation-flow .apflow{ max-width: 640px !important; margin-inline: auto; }
  .ap-branch--right{ display: none; }
}
/* ===== Rails & Curved Split (Activepieces-style) ===== */
.apflow.apflow--with-rails{
  position: relative;
  --lane-x: 14px;                 /* distance from left edge to rail center */
  --rail-color: rgba(255,255,255,.16);
  --rail-dash: rgba(255,255,255,.18);
}

/* MAIN VERTICAL RAIL */
.ap-lane--main{
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--lane-x));
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--rail-color), rgba(255,255,255,.06));
  pointer-events: none;
}

/* Align all arrows exactly on the rail (short connectors) */
.ap-arrow{ margin-left: calc(var(--lane-x) - 1px); }
.ap-arrow--small{ margin-left: calc(var(--lane-x) - 1px); }

/* CURVED SPLIT at Router (like Activepieces Y-join) */
.ap-step--router{ position: relative; }
.ap-step--router .ap-branch-join{
  position: absolute; left: calc(var(--lane-x) - 10px);
  width: 56px; height: 36px; bottom: -18px;
  border-bottom: 2px solid var(--rail-color);
  border-left: 2px solid var(--rail-color);
  border-right: 2px solid var(--rail-color);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  background: transparent;
  pointer-events: none;
  opacity: .85;
}

/* BRANCH ZONE positioning context */
.ap-rails-zone{ position: relative; }

/* RIGHT OTHERWISE rail (dotted) that starts near the Router */
.ap-otherwise-lane{
  position: absolute; right: 6px; top: 18px; bottom: 52px; width: 2px;
  background: repeating-linear-gradient(
    180deg,
    var(--rail-dash),
    var(--rail-dash) 6px,
    transparent 6px,
    transparent 12px
  );
  border-radius: 2px; opacity: .55; pointer-events: none;
}

/* END pills */
.ap-end{
  display:inline-flex; align-items:center; justify-content:center;
  height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: .72rem; color: #cbd5e1;
  border: 1px solid var(--color-dark-border);
  background: rgba(255,255,255,.04);
  margin: 14px auto 0; /* centered under the left branch */
}
.ap-end--right{ position: absolute; right: -14px; bottom: 18px; margin: 0; }

/* Keep cards compact (respect your micro sizing) and centered rail */
.apflow{
  --node: 28px; --gap: 6px; --cardH: 54px;
}
.ap-card{ min-height: var(--cardH); padding: 4px 8px; border-radius: 8px; }
.ap-left{ width: var(--node); height: var(--node); border-radius: 6px; font-size: .72rem; }
.ap-title{ font-size: .80rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sub{ font-size: .70rem; line-height: 1.25; }
.ap-result{ margin-top: 3px; padding: 3px 6px; font-size: .62rem; }

/* Responsive: stack section; keep rails sensible */
@media (max-width: 991.98px){
  .automation-wrap{ grid-template-columns: 1fr; }
  .ap-otherwise-lane{ display:none; }
  .ap-end--right{ display:none; }
}
/* === ACTIVEPIECES RAILS — FIX PACK === */

/* Reserve space for the right rail and make the zone a positioning context */
.ap-branches.ap-rails-zone{
  position: relative;
  padding-right: 180px;          /* keeps cards from hitting the right rail */
}

/* Main lane should always span the whole workflow column */
.apflow.apflow--with-rails{ position: relative; }
.apflow.apflow--with-rails .ap-lane--main{
  position: absolute; top: 0; bottom: 0; left: 14px; width: 2px;
}

/* Keep the router's curved split under the card but above the rail */
.ap-step--router{ position: relative; z-index: 2; }
.ap-step--router .ap-branch-join{
  z-index: 1;
  left: 4px;                     /* aligns with the main rail */
  width: 48px; height: 32px; bottom: -16px;
  border-color: rgba(255,255,255,.16);
}

/* Arrows sit exactly on the main rail */
.ap-arrow, .ap-arrow--small{ margin-left: 13px; }

/* RIGHT "Otherwise" column stretches from just below Router to the bottom */
.ap-branch--right{
  position: absolute;
  right: 0;
  top: 34px;                     /* start just below the Router card */
  bottom: 0;                     /* stretch to bottom of the branch zone */
  width: 160px;
  pointer-events: none;
}

/* Dotted vertical lane inside the right column */
.ap-branch--right .ap-otherwise-lane {
    position: absolute;
    right: 52px;
    top: 52px;
    bottom: 56px;
    width: 2px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .18) 6px, transparent 6px, transparent 12px);
    border-radius: 2px;
    opacity: .55;
}

/* End pills pinned to the bottom on both sides */
.ap-end{ margin: 16px auto 0; }
.ap-end--right{
  position: absolute;
  right: 0;
  bottom: 14px;
    margin: 0 30px 0 0;
}

/* Compact card lane (keeps your “micro” sizing) */
.automation-flow .apflow{
  --node: 28px; --gap: 6px; --cardH: 54px;
  max-width: 100%;
}

/* Mobile: stack and hide the right rail (cards remain) */
@media (max-width: 991.98px){
  .ap-branches.ap-rails-zone{ padding-right: 0; }
  .ap-branch--right{ display: none; }
}
/* === Activepieces workflow: make connector arrows MUCH longer === */
/* Tunable lengths (desktop defaults) */
:root{
  --ap-arrow-lg: 32px;   /* between top cards */
  --ap-arrow-sm: 26px;   /* inside Branch 1 */
}

/* Lengthen the connectors */
.ap-arrow{
  height: var(--ap-arrow-lg) !important;
  width: 3px !important;                    /* keep the thicker look */
  margin-left: 12px;                        /* stays aligned to main rail */
  background: rgba(111,225,246,.35) !important;
  border-radius: 2px;
}
.ap-arrow--small{
  height: var(--ap-arrow-sm) !important;
}

/* Make the arrow head scale with the longer body */
.ap-arrow::after{
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 8px solid rgba(111,225,246,.70) !important;
  bottom: -6px;                             /* nudge for bigger head */
}

/* Keep the animated fill visible the full length */
.ap-arrow__fill{
  background: linear-gradient(180deg, #6fe1f6, #22c55e) !important;
  box-shadow: 0 0 6px rgba(111,225,246,.35);
  height: 0%;                               /* animation starts here */
  transition: height .45s cubic-bezier(.25,1,.5,1);
}

/* Optional: give the lists a tiny bit more spacing to breathe */
.ap-main, .ap-branchlist{ gap: 14px; }

/* Mobile: slightly shorter so it doesn’t get too tall on small screens */
@media (max-width: 991.98px){
  :root{
    --ap-arrow-lg: 26px;
    --ap-arrow-sm: 22px;
  }
}
/* === OTHERWISE: keep layout, only change color when failed === */
/* Desktop/tablet rail */


/* Downward red "fill" animation overlay (no layout changes) */
.ap-branch--right.is-failed .ap-otherwise-lane::after{
  content:"";
  position:absolute;
  left: 0;                /* align with the base rail */
  top: 0;
  width: 2px;            /* same as your rail width so it won't look thicker */
  height: 0%;
  border-radius: 0;      /* avoid blur that makes it look wider */
  /* dashed: 6px on, 6px off */
  background: repeating-linear-gradient(
    180deg,
    rgba(239,68,68,.95) 0 6px,
    rgba(239,68,68,0)   6px 12px
  );
  animation: ap-fail-fill 700ms cubic-bezier(.25,1,.5,1) forwards;
}

@keyframes ap-fail-fill { to { height: 100%; } }


@keyframes ap-fail-fill { to { height: 100%; } }

/* If you show an OTHERWISE chip/tag and End pill on the right, just recolor (no spacing changes) */
.ap-branch--right.is-failed .ap-branch__tag,
.ap-branch--right.is-failed .ap-branch__tag--muted{
  color:#fff;
  background: rgba(239,68,68,.12);
  border:1px solid #ef4444;
}
.ap-branch--right.is-failed .ap-end--right{
  color:#fecaca;
  border:1px solid #ef4444;
  background: rgba(239,68,68,.06);
}
/* OTHERWISE "End" pill look-alike (no layout changes) */
.ap-end--right,
.ap-end-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;                      /* compact like your screenshot */
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.80rem;
  font-weight: 600;
  line-height: 1;
  color: #d7e2ea;                     /* light text */
  background: rgba(12, 20, 26, 0.75); /* dark chip */
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 3px 8px rgba(0,0,0,0.25);       /* subtle depth */
  backdrop-filter: saturate(110%);    /* optional, gives “polish” */
}

/* When OTHERWISE is flagged failed (red theme), keep same shape but tint */
.ap-branch--right.is-failed .ap-end--right,
.ap-branch--right.is-failed .ap-end-chip{
  color: #ffe3e3;
  background: rgba(239,68,68,0.10);
  border-color: #ef4444;
  box-shadow:
    inset 0 1px 0 rgba(239,68,68,0.15),
    0 3px 8px rgba(239,68,68,0.18);
}
/* ==== XP Readmore (scoped; won't affect other components) ==== */
.xp-readmore { margin-top: .25rem; }
.xp-readmore__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.xp-readmore__btn {
  display: inline-block;
  margin-top: .25rem;
  padding: .4rem .75rem;
  border: 1px solid var(--color-light-border, #EAECEF);
  background: var(--color-light-card, #FFFFFF);
  color: var(--color-text-dark, #212529);
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
}
.section-dark .xp-readmore__btn {
  border-color: var(--color-dark-border, #232E3A);
  background: var(--color-dark-card, #15212B);
  color: var(--color-text-light, #EAECEF);
}
.xp-readmore__btn[aria-expanded="true"] { font-weight: 700; }

/* optional: small alt style for ED logo if you want a different tint */
.xp-logo.xp-logo-alt { background: var(--color-accent, #2563EB); color: #fff; }
#workexperience {
  margin-top: 80px; /* Adjust 60–100px if needed */
}
/* ========= 3-Column Timeline (scoped to #workexperience) ========= */
#workexperience .timeline-3col{
  position: relative;
  display: grid;
  row-gap: 2.25rem; /* space between rows */
}

/* center vertical line across the whole timeline */
#workexperience .timeline-3col::before{
  content:"";
  position:absolute;
  left:50%;
  top:0; bottom:0;
  transform:translateX(-50%);
  width:2px;
  background: var(--color-light-border, #EAECEF);
  opacity:.9;
}

/* each row = 3 columns: left | center | right */
#workexperience .t-row{
  display:grid;
  grid-template-columns: 1fr 52px 1fr; /* center lane fixed */
  align-items: stretch;
  gap: 0;
}

/* columns */
#workexperience .t-col{ min-height: 100%; }
#workexperience .t-center{
  position: relative;
  display: flex;
  align-items: center;   /* vertically center dot to the row content */
  justify-content: center;
}

/* the dot on the center branch */
#workexperience .t-dot{
  width: 16px; height:16px;
  border-radius: 50%;
  background: var(--color-accent, #2563EB);
  box-shadow: 0 0 0 4px rgba(37,99,235,.15); /* soft ring */
  z-index: 1; /* above the center line */
}

/* nudge the xp cards slightly away from the center for balance */
#workexperience .t-left .xp-card{ margin-right: 24px; }
#workexperience .t-right .xp-card{ margin-left: 24px; }

/* keep your existing xp-card look; just add a subtle connector */
#workexperience .t-left .xp-card::after,
#workexperience .t-right .xp-card::after{
  content:"";
  position:absolute;
  top: 18px;  /* aligns near card header */
  width: 24px; height: 2px;
  background: var(--color-light-border, #EAECEF);
}
#workexperience .t-left .xp-card{ position: relative; }
#workexperience .t-left .xp-card::after{ right: -24px; }
#workexperience .t-right .xp-card{ position: relative; }
#workexperience .t-right .xp-card::after{ left: -24px; }

/* Readmore (already used before; keep it scoped) */
#workexperience .xp-readmore{ margin-top:.25rem; }
#workexperience .xp-readmore__content{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
}
#workexperience .xp-readmore__btn{
  display:inline-block; margin-top:.25rem; padding:.4rem .75rem;
  border:1px solid var(--color-light-border, #EAECEF);
  background: var(--color-light-card, #fff);
  color: var(--color-text-dark, #212529);
  border-radius:999px; font-size:.85rem; line-height:1; cursor:pointer;
}
.section-dark #workexperience .xp-readmore__btn{
  border-color: var(--color-dark-border, #232E3A);
  background: var(--color-dark-card, #15212B);
  color: var(--color-text-light, #EAECEF);
}
#workexperience .xp-readmore__btn[aria-expanded="true"]{ font-weight:700; }

/* RESPONSIVE: on tablets/phones, stack cards; keep the center branch visible */
@media (max-width: 991.98px){
  #workexperience .t-row{
    grid-template-columns: 1fr;      /* single column */
  }
  #workexperience .timeline-3col::before{
    display:none;                     /* hide global line on small screens */
  }
  #workexperience .t-center{ display:none; } /* hide dot column */
  #workexperience .t-left .xp-card,
  #workexperience .t-right .xp-card{
    margin: 0 0 0 0;
  }
  #workexperience .t-left .xp-card::after,
  #workexperience .t-right .xp-card::after{
    display:none;                     /* remove connectors on mobile for cleanliness */
  }
}

/* small polish so the section header isn’t too tight at the top */
#workexperience .text-center{ padding-top: 40px; } /* adjust 32–56px to taste */
/* ============= DENSE TIMELINE TWEAKS (no HTML changes) ============= */

/* 1) Give this section a wider stage so cards don't look cramped */
#workexperience .container{
  max-width: 1200px;                 /* was narrower; try 1140–1280 if you like */
}

/* 2) Slimmer center rail + smaller row gaps */
#workexperience .timeline-3col{ 
  row-gap: 1.25rem;                  /* was ~2.25rem */
}
#workexperience .t-row{
  grid-template-columns: 1fr 32px 1fr;  /* center lane from 52px -> 32px */
}

/* 3) Slight overlap between rows to reclaim vertical space */
#workexperience .t-row + .t-row{
  margin-top: -28px;                 /* pull rows closer; use -20 to -36px as taste */
}

/* 4) Nudge cards closer to the center line */
#workexperience .t-left  .xp-card{ margin-right: 12px; }   /* was 24px */
#workexperience .t-right .xp-card{ margin-left:  12px; }

/* 5) Compact card internals (breathes better in timeline) */
#workexperience .xp-card{ padding: 16px 18px; }            /* was chunkier */
#workexperience .xp-bullets li{ margin: .20rem 0; }        /* tighter list spacing */

/* 6) Subtle, smaller center dots + shorter connectors = cleaner */
#workexperience .t-dot{
  width: 12px; height: 12px;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);               /* thinner ring */
}
#workexperience .t-left .xp-card::after,
#workexperience .t-right .xp-card::after{
  top: 14px;                                               /* align with tighter padding */
  width: 16px;                                             /* was 24px */
}

/* 7) Optional: slightly stronger center line so it reads even when dense */
#workexperience .timeline-3col::before{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.08),
    rgba(0,0,0,.12) 40%,
    rgba(0,0,0,.08)
  );
}
/* ===== Timeline reactions on Read more ===== */
#workexperience .t-row.is-active .t-dot{
  animation: xp-dot-pulse .8s ease-out;
  background: var(--color-accent, #2563EB);
  box-shadow: 0 0 0 6px rgba(37,99,235,.18);
}

/* a short vertical glow in the center lane */
#workexperience .t-center::after{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%) scaleY(0);
  width:6px; height:90px;             /* length of the glow segment */
  border-radius:3px;
  background: linear-gradient(
    to bottom,
    rgba(37,99,235,.00),
    rgba(37,99,235,.30) 30%,
    rgba(37,99,235,.30) 70%,
    rgba(37,99,235,.00)
  );
  filter: blur(0.3px);
  opacity:0; transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
#workexperience .t-row.is-active .t-center::after{
  opacity:1; transform:translateX(-50%) scaleY(1);
}

/* subtly “thicken” the connector to the card when active */
#workexperience .t-left  .xp-card::after,
#workexperience .t-right .xp-card::after{
  transition: transform .25s ease, background-color .25s ease;
}
#workexperience .t-row.is-active .t-left  .xp-card::after{
  transform: scaleX(1.25);
  background-color: var(--color-accent, #2563EB);
}
#workexperience .t-row.is-active .t-right .xp-card::after{
  transform: scaleX(1.25);
  background-color: var(--color-accent, #2563EB);
}

/* dot pulse keyframes */
@keyframes xp-dot-pulse{
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(37,99,235,.20); }
  60%  { transform: scale(1.2); box-shadow: 0 0 0 10px rgba(37,99,235,.00); }
  100% { transform: scale(1);   box-shadow: 0 0 0 6px rgba(37,99,235,.18); }
}
/* ========= Timeline base (already added before, kept short here) ========= */
#workexperience .timeline-3col{ position:relative; display:grid; row-gap:1.25rem; }
#workexperience .timeline-3col::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%);
  width:2px; background: var(--color-light-border, #EAECEF);
}
#workexperience .t-row{ display:grid; grid-template-columns:1fr 36px 1fr; align-items:stretch; }
#workexperience .t-row + .t-row{ margin-top:-22px; }
#workexperience .t-col{ min-height:100%; }
#workexperience .t-center{ position:relative; display:flex; align-items:center; justify-content:center; }
#workexperience .t-dot{ width:12px; height:12px; border-radius:50%; background:var(--color-accent,#2563EB); box-shadow:0 0 0 3px rgba(37,99,235,.15); z-index:1; }

#workexperience .t-left .xp-card,
#workexperience .t-right .xp-card{ position:relative; }
#workexperience .t-left .xp-card::after,
#workexperience .t-right .xp-card::after{
  content:""; position:absolute; top:16px; width:16px; height:2px; background:var(--color-light-border,#EAECEF);
}
#workexperience .t-left .xp-card{ margin-right:12px; }
#workexperience .t-right .xp-card{ margin-left:12px; }
#workexperience .t-left .xp-card::after{ right:-16px; }
#workexperience .t-right .xp-card::after{ left:-16px; }

/* ========= Read more controls (scoped) ========= */
#workexperience .xp-readmore{ margin-top:.25rem; }
#workexperience .xp-readmore__content{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
#workexperience .xp-readmore__btn{
  display:inline-block; margin-top:.25rem; padding:.4rem .75rem;
  border:1px solid var(--color-light-border,#EAECEF); background:#fff;
  color:var(--color-text-dark,#212529); border-radius:999px; font-size:.85rem; line-height:1; cursor:pointer;
}
.section-dark #workexperience .xp-readmore__btn{
  border-color:var(--color-dark-border,#232E3A); background:var(--color-dark-card,#15212B); color:var(--color-text-light,#EAECEF);
}
#workexperience .xp-readmore__btn[aria-expanded="true"]{ font-weight:700; }

/* ========= BLANK-SIDE ANIMATED PANEL ========= */
#workexperience .ghost-panel{
  display:flex; align-items:center; justify-content:center;
  min-height:220px; padding:12px 16px; margin:0 8%;
  opacity:0; transform:translateY(8px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none; /* decorative */
  position:relative;
}
#workexperience .ghost-panel::before{
  /* faint spotlight behind the text */
  content:""; position:absolute; inset:-20px -10px;
  background: radial-gradient(ellipse at center, rgba(37,99,235,.10), rgba(37,99,235,0) 65%);
  filter: blur(2px); z-index:0;
}
#workexperience .t-row.is-open .ghost-panel{ opacity:1; transform:translateY(0); }

/* Big typewriter text */
#workexperience .ghost-type{
  position:relative; z-index:1; 
  font-weight:800; line-height:1.15;
  font-size: clamp(1.1rem, 2.2vw + .6rem, 2.25rem);
  color: var(--color-text-dark, #0f172a);
  white-space:nowrap; overflow:hidden;
  border-right: 2px solid rgba(0,0,0,.35); /* caret */
  width: 0;                                  /* animated width */
}

/* Typewriter animation (duration scales with --chars you set inline) */
#workexperience .t-row.is-open .ghost-type{
  animation: xp-type steps(var(--chars)) 2.4s forwards, xp-caret .9s step-end infinite;
}

@keyframes xp-type { from { width: 0; } to { width: 100%; } }
@keyframes xp-caret { 50% { border-color: transparent; } }

/* Mobile: stack and hide the ghost panels (too wide for phones) */
@media (max-width: 991.98px){
  #workexperience .t-row{ grid-template-columns:1fr; }
  #workexperience .timeline-3col::before{ display:none; }
  #workexperience .t-center{ display:none; }
  #workexperience .t-left .xp-card, #workexperience .t-right .xp-card{ margin:0; }
  #workexperience .t-left .xp-card::after, #workexperience .t-right .xp-card::after{ display:none; }
  #workexperience .ghost-panel{ display:none; }
}

/* Small breathing room above title without breaking your glow */
#workexperience .text-center{ padding-top: 40px; }
/* ===== Keep animated text away from the center rail ===== */
#workexperience{
  /* tune these two to taste */
  --rail: 36px;          /* width of the center column (your rail) */
  --gutter: 72px;        /* distance from rail to the text panel */
  --panel-max: 640px;    /* maximum width for the big text */
}

/* Make the column definition use the same rail var (for consistency) */
#workexperience .t-row{
  grid-template-columns: 1fr var(--rail) 1fr;
}

/* The animated panel itself */
#workexperience .ghost-panel{
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;                     /* prevent the caret/text from bleeding out */
  padding-inline: clamp(16px, 2vw, 24px);
}

/* LEFT side panel: push away from the rail and clamp width */
#workexperience .t-left .ghost-panel{
  margin-left: auto;                    /* hug the outside edge */
  padding-right: var(--gutter);
  text-align: right;
  max-width: min(
    var(--panel-max),
    calc(50vw - (var(--rail) / 2) - var(--gutter))
  );
}

/* RIGHT side panel: push away from the rail and clamp width */
#workexperience .t-right .ghost-panel{
  margin-right: auto;
  padding-left: var(--gutter);
  text-align: left;
  max-width: min(
    var(--panel-max),
    calc(50vw - (var(--rail) / 2) - var(--gutter))
  );
}

/*VERTICAL LINE DITO*/
/* Ensure the typewriter element respects the container */
#workexperience .ghost-type{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;     /* keep the blinking caret inside */
}
/* ========= Timeline (already present in your file; kept concise) ========= */
#workexperience .timeline-3col{ position:relative; display:grid; row-gap:1.25rem; }
#workexperience .timeline-3col::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%);
  width:2px; background:#ababab;
}
#workexperience .t-row{ display:grid; grid-template-columns:1fr 36px 1fr; align-items:stretch; }
#workexperience .t-row + .t-row{ margin-top:-22px; }
#workexperience .t-col{ min-height:100%; }
#workexperience .t-center{ position:relative; display:flex; align-items:center; justify-content:center; }
#workexperience .t-dot{ width:12px; height:12px; border-radius:50%; background:var(--color-accent,#2563EB); box-shadow:0 0 0 3px rgba(37,99,235,.15); z-index:1; }
#workexperience .t-left .xp-card, #workexperience .t-right .xp-card{ position:relative; }
#workexperience .t-left .xp-card::after, #workexperience .t-right .xp-card::after{
  content:""; position:absolute; top:16px; width:16px; height:2px; background:var(--color-light-border,#EAECEF);
}
#workexperience .t-left .xp-card{ margin-right:12px; }  #workexperience .t-left .xp-card::after{ right:-16px; }
#workexperience .t-right .xp-card{ margin-left:12px; }  #workexperience .t-right .xp-card::after{ left:-16px; }

/* ========= Multiline blank-side panels ========= */
#workexperience{
  --rail: 36px;          /* must match the center column width above */
  --gutter: 72px;        /* distance from rail to text panel */
  --panel-max: 640px;    /* max width of the panel */
}
#workexperience .ghost-panel{
  width:100%; box-sizing:border-box;
  min-height:220px; padding:12px 16px; margin:0 6%;
  opacity:0; transform:translateY(8px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none; position:relative;
}
#workexperience .ghost-panel::before{
  content:""; position:absolute; inset:-20px -10px;
  background: radial-gradient(ellipse at center, rgba(37,99,235,.10), rgba(37,99,235,0) 65%);
  filter: blur(2px); z-index:0;
}
/* show when the row is open (Read more) */
#workexperience .t-row.is-open .ghost-panel{ opacity:1; transform:translateY(0); }

/* keep panel away from the rail + clamp width */
#workexperience .t-left .ghost-panel{
  margin-left:auto; padding-right:var(--gutter); text-align:right;
  max-width: min(var(--panel-max), calc(50vw - (var(--rail)/2) - var(--gutter)));
}
#workexperience .t-right .ghost-panel{
  margin-right:auto; padding-left:var(--gutter); text-align:left;
  max-width: min(var(--panel-max), calc(50vw - (var(--rail)/2) - var(--gutter)));
}

/* lines container */
#workexperience .ghost-lines{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:.35rem;
  line-height:1.15;
  font-weight:800;
  font-size: clamp(1.15rem, 2.2vw + .5rem, 2.4rem);
  color: var(--color-text-dark, #0f172a);
}
/* each line animates in (staggered) */
#workexperience .ghost-line{ 
  opacity:0; transform:translateY(8px);
}
#workexperience .t-row.is-open .ghost-line{
  animation: xp-line-in .35s ease forwards;
}
#workexperience .t-row.is-open .ghost-line:nth-child(1){ animation-delay: .02s; }
#workexperience .t-row.is-open .ghost-line:nth-child(2){ animation-delay: .12s; }
#workexperience .t-row.is-open .ghost-line:nth-child(3){ animation-delay: .22s; }
#workexperience .t-row.is-open .ghost-line:nth-child(4){ animation-delay: .32s; }
#workexperience .t-row.is-open .ghost-line:nth-child(5){ animation-delay: .42s; }

@keyframes xp-line-in{
  to { opacity:1; transform:translateY(0); }
}

/* ===== Readmore (scoped) ===== */
#workexperience .xp-readmore{ margin-top:.25rem; }
#workexperience .xp-readmore__content{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
#workexperience .xp-readmore__btn{
display: inline-block;
    margin-top: .25rem;
    padding: .4rem .75rem;
    border: 2px solid #484d51;
    background: #ffffff;
    color: #0b1218;
    border-radius: 999px;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
}
.section-dark #workexperience .xp-readmore__btn{
  border-color:var(--color-dark-border,#232E3A); background:var(--color-dark-card,#15212B); color:var(--color-text-light,#EAECEF);
}
#workexperience .xp-readmore__btn[aria-expanded="true"]{ font-weight:700; }

/* ===== Responsive (stack; hide panels on mobile) ===== */
@media (max-width: 991.98px){
  #workexperience .t-row{ grid-template-columns:1fr; }
  #workexperience .timeline-3col::before{ display:none; }
  #workexperience .t-center{ display:none; }
  #workexperience .t-left .xp-card, #workexperience .t-right .xp-card{ margin:10px; }
  #workexperience .t-left .xp-card::after, #workexperience .t-right .xp-card::after{ display:none; }
  #workexperience .ghost-panel{ display:none; }
}

/* small breathing room above the heading (keeps your glow) */
#workexperience .text-center{ padding-top: 40px; }
/* ===== Animated glowing background + text shimmer for ghost panel ===== */

/* tuneables */
#workexperience{
  --rail: 36px;            /* your center column width (keep as-is if you already set it) */
  --gutter: 72px;          /* distance from rail to the panel */
  --panel-max: 640px;      /* max width of the panel */
  --glow-color: 37,99,235; /* rgb of your accent (Tailwind indigo-600) */
}

/* keep the panel away from the center rail (if not already present) */
#workexperience .t-left .ghost-panel{
  margin-left:auto; padding-right:var(--gutter); text-align:right;
  max-width:min(var(--panel-max), calc(50vw - (var(--rail)/2) - var(--gutter)));
}
#workexperience .t-right .ghost-panel{
  margin-right:auto; padding-left:var(--gutter); text-align:left;
  max-width:min(var(--panel-max), calc(50vw - (var(--rail)/2) - var(--gutter)));
}

/* base: panel appears when the row is open (from your Read More JS) */
#workexperience .ghost-panel{
  position:relative; overflow:hidden;
}
#workexperience .t-row.is-open .ghost-panel{ opacity:1; transform:translateY(0); }

/* ----- MOVING GLOW BACKGROUND ----- */
/* big floating blur blob */
#workexperience .ghost-panel::before{
  content:"";
  position:absolute;
  width: 42vmin; height: 42vmin;           /* responsive blob size */
  min-width: 280px; min-height: 280px;
  border-radius:50%;
  background: radial-gradient(circle,
              rgba(var(--glow-color), .28) 0%,
              rgba(var(--glow-color), .18) 40%,
              rgba(var(--glow-color), 0) 70%);
  filter: blur(30px);
  opacity: .75;
  transform: translate(-35%, -25%) scale(.9);
  left: 12%; top: 10%;
  pointer-events:none;
  display:none;                             /* hidden until open */
}
#workexperience .t-row.is-open .ghost-panel::before{
  display:block;
  animation: xp-float 8s ease-in-out infinite alternate;
}

/* sweeping aurora streak */
#workexperience .ghost-panel::after{
  content:"";
  position:absolute;
  inset: -20% -10%;
  background: linear-gradient(90deg,
              rgba(var(--glow-color),0) 0%,
              rgba(var(--glow-color),.12) 50%,
              rgba(var(--glow-color),0) 100%);
  filter: blur(12px);
  transform: translateX(-35%);
  opacity: 0;
  pointer-events:none;
}
#workexperience .t-row.is-open .ghost-panel::after{
  opacity: 1;
  animation: xp-sweep 3.8s linear infinite;
}

/* float the blob lightly */
@keyframes xp-float{
  0%   { transform: translate(-35%, -25%) scale(.9) rotate(0deg); }
  50%  { transform: translate(-20%, -5%)  scale(1.0) rotate(3deg); }
  100% { transform: translate(-30%, -15%) scale(.95) rotate(-2deg); }
}
/* sweep the aurora left -> right -> left */
@keyframes xp-sweep{
  0%   { transform: translateX(-50%); }
  50%  { transform: translateX(40%); }
  100% { transform: translateX(-50%); }
}

/* ----- MULTI-LINE TEXT + SHIMMER ----- */
#workexperience .ghost-lines{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:.35rem;
  line-height:1.15; font-weight:800;
  font-size: clamp(1.15rem, 2.2vw + .5rem, 2.4rem);
  color: var(--color-text-dark, #0f172a);
}
#workexperience .ghost-line{
  opacity:0; transform:translateY(8px);
}
/* fade/slide in (you already had this), plus a gentle glow loop */
#workexperience .t-row.is-open .ghost-line{
  animation:
    xp-line-in .35s ease forwards,
    xp-textglow 3.2s ease-in-out .6s infinite alternate;
}
#workexperience .t-row.is-open .ghost-line:nth-child(1){ animation-delay: .02s, .62s; }
#workexperience .t-row.is-open .ghost-line:nth-child(2){ animation-delay: .12s, .72s; }
#workexperience .t-row.is-open .ghost-line:nth-child(3){ animation-delay: .22s, .82s; }
#workexperience .t-row.is-open .ghost-line:nth-child(4){ animation-delay: .32s, .92s; }
#workexperience .t-row.is-open .ghost-line:nth-child(5){ animation-delay: .42s, 1.02s; }

@keyframes xp-line-in { to { opacity:1; transform:translateY(0); } }
/* soft text glow (not obnoxious) */
@keyframes xp-textglow{
  0%   { text-shadow: 0 0 0 rgba(var(--glow-color),0); }
  100% { text-shadow: 0 6px 24px rgba(var(--glow-color), .35),
                     0 2px 8px  rgba(var(--glow-color), .25); }
}

/* (keeps things tidy on mobile; panels are hidden there in your CSS) */
/* ===================== INTENSE GLOW MODE ===================== */
/* Stronger colors, larger blobs, extra aurora streak, harder text glow */
#workexperience{
  --rail: 36px;                 /* keep as your current rail width */
  --gutter: 72px;               /* distance from rail to the panel */
  --panel-max: 640px;

  /* colors for the intense blend */
  --glow1: 59,130,246;          /* blue-500  (primary) */
  --glow2: 99,102,241;          /* indigo-500 (secondary) */
  --glow3: 14,165,233;          /* cyan-500 (accent) */
}

/* make sure panels stay away from the center rail (same constraints) */
#workexperience .t-left .ghost-panel{
  margin-left:auto; padding-right:var(--gutter); text-align:right;
  max-width:min(var(--panel-max), calc(50vw - (var(--rail)/2) - var(--gutter)));
}
#workexperience .t-right .ghost-panel{
  margin-right:auto; padding-left:var(--gutter); text-align:left;
  max-width:min(var(--panel-max), calc(50vw - (var(--rail)/2) - var(--gutter)));
}

#workexperience .ghost-panel{
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .35s ease, transform .35s ease;
  isolation:isolate; /* so blend modes don't leak */
}
#workexperience .t-row.is-open .ghost-panel{
  opacity:1; transform:translateY(0) scale(1);
}

/* --- BIG FLOATING BLOB (stronger, blended, hue-shifting) --- */
#workexperience .ghost-panel::before{
  content:"";
  position:absolute;
  width: 58vmin; height: 58vmin;          /* bigger */
  min-width: 360px; min-height: 360px;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 40%,
      rgba(var(--glow1), .55) 0%,
      rgba(var(--glow1), .35) 35%,
      rgba(var(--glow1), .00) 70%);
  filter: blur(42px) saturate(1.2) hue-rotate(0deg);
  opacity:.95;
  left: -8%; top: -18%;
  pointer-events:none;
  mix-blend-mode: screen;
  display:none;
}
#workexperience .t-row.is-open .ghost-panel::before{
  display:block;
  animation:
    xp-float-intense 9s ease-in-out infinite alternate,
    xp-hue 6s linear infinite;
}

/* --- AURORA STREAK (brighter, two-way sweep) --- */
#workexperience .ghost-panel::after{
  content:"";
  position:absolute;
  inset:-25% -12%;
  background:
    linear-gradient(90deg,
      rgba(var(--glow2),0) 0%,
      rgba(var(--glow2),.28) 45%,
      rgba(var(--glow3),.35) 55%,
      rgba(var(--glow2),0) 100%);
  filter: blur(18px) saturate(1.1);
  opacity:0;
  transform: translateX(-55%);
  mix-blend-mode: screen;
  pointer-events:none;
}
#workexperience .t-row.is-open .ghost-panel::after{
  opacity:1;
  animation: xp-sweep-intense 3.2s linear infinite;
}

/* --- EXTRA LIGHT VEIL behind lines (adds sparkle) --- */
#workexperience .ghost-lines::before{
  content:"";
  position:absolute;
  inset:-10% -8%;
  background:
    conic-gradient(from 210deg,
      rgba(var(--glow1), .00) 0deg,
      rgba(var(--glow1), .25) 50deg,
      rgba(var(--glow3), .30) 90deg,
      rgba(var(--glow2), .00) 140deg);
  filter: blur(22px);
  opacity:.55;
  mix-blend-mode: screen;
  transform: rotate(0deg);
  pointer-events:none;
  z-index:0;
}
#workexperience .t-row.is-open .ghost-lines::before{
  animation: xp-veil 7.5s ease-in-out infinite alternate;
}

/* --- MULTILINE TEXT: stronger glow + subtle scale pulse --- */
#workexperience .ghost-lines{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:.45rem;
  line-height:1.12; font-weight:900;
  font-size: clamp(1.25rem, 2.4vw + .6rem, 2.6rem);
  color: #0d1220;                       /* deep base so glow pops */
}
#workexperience .ghost-line{
  opacity:0; transform:translateY(10px);
}
#workexperience .t-row.is-open .ghost-line{
  animation:
    xp-line-in .36s cubic-bezier(.2,.8,.2,1) forwards,
    xp-textglow-intense 2.4s ease-in-out .5s infinite alternate,
    xp-scale 3.4s ease-in-out .6s infinite;
}
#workexperience .t-row.is-open .ghost-line:nth-child(1){ animation-delay:.02s,.62s,.70s; }
#workexperience .t-row.is-open .ghost-line:nth-child(2){ animation-delay:.12s,.72s,.80s; }
#workexperience .t-row.is-open .ghost-line:nth-child(3){ animation-delay:.22s,.82s,.90s; }
#workexperience .t-row.is-open .ghost-line:nth-child(4){ animation-delay:.32s,.92s,1.00s; }
#workexperience .t-row.is-open .ghost-line:nth-child(5){ animation-delay:.42s,1.02s,1.10s; }

/* --- Keyframes --- */
@keyframes xp-line-in { to { opacity:1; transform:translateY(0); } }

@keyframes xp-float-intense{
  0%   { transform: translate(-18%, -24%) scale(0.92) rotate(-4deg); }
  50%  { transform: translate(-2%,  -6%)  scale(1.06) rotate(2deg);  }
  100% { transform: translate(-10%, -14%) scale(0.98) rotate(-2deg); }
}
@keyframes xp-sweep-intense{
  0%   { transform: translateX(-60%) skewX(-2deg); }
  50%  { transform: translateX(50%)  skewX(2deg);  }
  100% { transform: translateX(-60%) skewX(-2deg); }
}
@keyframes xp-hue{
  0%   { filter: blur(42px) saturate(1.2) hue-rotate(0deg);   }
  50%  { filter: blur(42px) saturate(1.25) hue-rotate(40deg); }
  100% { filter: blur(42px) saturate(1.2) hue-rotate(0deg);   }
}
@keyframes xp-veil{
  0%   { transform: rotate(0deg);   opacity:.45; }
  100% { transform: rotate(25deg);  opacity:.70; }
}
@keyframes xp-textglow-intense{
  0% {
    text-shadow:
      0 0 0 rgba(var(--glow1),0),
      0 0 0 rgba(var(--glow2),0);
  }
  100%{
    text-shadow:
      0 10px 40px rgba(var(--glow1), .55),
      0 4px 18px  rgba(var(--glow2), .45),
      0 0 22px    rgba(var(--glow3), .35);
  }
}
@keyframes xp-scale{
  0%   { transform: translateY(0) scale(1);     }
  100% { transform: translateY(-1px) scale(1.02); }
}

/* keep phones clean */
@media (max-width: 991.98px){
  #workexperience .ghost-panel{ display:none; }
}
/* ================= Card focus when its row is open ================= */
/* Accent color picks up from your Accenture theme; fallback provided */
#workexperience{
  --focus-accent: rgba(var(--acc-purple, 161,0,255), 1);
  --focus-accent-soft: rgba(var(--acc-purple, 161,0,255), .18);
  --focus-accent-strong: rgba(var(--acc-magenta, 255,77,210), .35);
}

/* 1) Elevate + breathe the card a bit */
#workexperience .t-row.is-open .xp-card{
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 18px 40px rgba(0,0,0,.12),
    0 6px 18px rgba(0,0,0,.08),
    0 0 0 1px rgba(0,0,0,.06) inset;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-color: rgba(var(--acc-purple,161,0,255), .25); /* if your card has a border */
}

/* 2) Animated accent bar on the card's inner edge (near the rail) */
#workexperience .t-row.is-open .xp-card::before{
  content:"";
  position:absolute;
  top:14px; bottom:14px; width:4px;
  left: -8px;  /* for right-side cards, this is outside the card */
  background: linear-gradient(
    to bottom,
    rgba(var(--acc-magenta,255,77,210),.00),
    rgba(var(--acc-magenta,255,77,210),.55) 40%,
}
/* ================= Card focus when its row is open ================= */
/* Accent color picks up from your Accenture theme; fallback provided */
#workexperience{
  --focus-accent: rgba(var(--acc-purple, 161,0,255), 1);
  --focus-accent-soft: rgba(var(--acc-purple, 161,0,255), .18);
  --focus-accent-strong: rgba(var(--acc-magenta, 255,77,210), .35);
}

/* 1) Elevate + breathe the card a bit */
#workexperience .t-row.is-open .xp-card{
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 18px 40px rgba(0,0,0,.12),
    0 6px 18px rgba(0,0,0,.08),
    0 0 0 1px rgba(0,0,0,.06) inset;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-color: rgba(var(--acc-purple,161,0,255), .25); /* if your card has a border */
}

/* 2) Animated accent bar on the card's inner edge (near the rail) */
#workexperience .t-row.is-open .xp-card::before{
  content:"";
  position:absolute;
  top:14px; bottom:14px; width:4px;
  left: -8px;  /* for right-side cards, this is outside the card */
  background: linear-gradient(
    to bottom,
    rgba(var(--acc-magenta,255,77,210),.00),
    rgba(var(--acc-magenta,255,77,210),.55) 40%,
    rgba(var(--acc-purple,161,0,255),.65) 60%,
    rgba(var(--acc-indigo,127,0,255),.00)
  );
  border-radius: 4px;
  filter: blur(.2px);
  animation: xp-bar-pulse 1.8s ease-in-out infinite;
  pointer-events:none;
}
#workexperience .t-row.is-open .t-left .xp-card::before{ /* flip to inside edge for left cards */
  left: auto; right: -8px;
}

@keyframes xp-bar-pulse{
  0%,100% { opacity:.7; box-shadow: 0 0 18px var(--focus-accent-soft); }
  50%     { opacity:1;  box-shadow: 0 0 26px var(--focus-accent-strong); }
}

/* 3) Logo chip gets a soft ring pulse */
#workexperience .t-row.is-open .xp-logo{
  box-shadow:
    0 0 0 0 rgba(var(--acc-purple,161,0,255), .35),
    0 2px 8px rgba(0,0,0,.15);
  animation: xp-logo-ring 2s ease-out infinite;
}
@keyframes xp-logo-ring{
  0%   { box-shadow: 0 0 0 0 rgba(var(--acc-purple,161,0,255), .35), 0 2px 8px rgba(0,0,0,.15); }
  70%  { box-shadow: 0 0 0 14px rgba(var(--acc-purple,161,0,255), 0), 0 2px 8px rgba(0,0,0,.15); }
  100% { box-shadow: 0 0 0 0 rgba(var(--acc-purple,161,0,255), .35), 0 2px 8px rgba(0,0,0,.15); }
}

/* 4) Title underline + slight glow */
#workexperience .t-row.is-open .xp-role{
  position: relative;
  text-shadow: 0 6px 26px rgba(var(--acc-purple,161,0,255), .18);
}
#workexperience .t-row.is-open .xp-role::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: linear-gradient(90deg,
    rgba(var(--acc-magenta,255,77,210),.55),
    rgba(var(--acc-purple,161,0,255),.65)
  );
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(var(--acc-purple,161,0,255), .25);
}

/* 5) Make bullets and key lines read faster while open */
#workexperience .t-row.is-open .xp-bullets{
  list-style: none; padding-left: 0; margin-left: 0;
}
#workexperience .t-row.is-open .xp-bullets li{
  position: relative; padding-left: 1.25rem; margin:.35rem 0;
}
#workexperience .t-row.is-open .xp-bullets li::before{
  content:""; position:absolute; left:.15rem; top:.65rem;
  width:8px; height:8px; border-radius:50%;
  background: rgba(var(--acc-magenta,255,77,210), .95);
  box-shadow:
    0 0 0 4px rgba(var(--acc-magenta,255,77,210), .18),
    0 2px 10px rgba(var(--acc-purple,161,0,255), .35);
}

/* Optional: emphasize any <strong> inside bullets while open */
#workexperience .t-row.is-open .xp-bullets li strong{
  background: linear-gradient(90deg,
    rgba(var(--acc-magenta,255,77,210), .18),
    rgba(var(--acc-purple,161,0,255), .12)
  );
  padding: 0 .25rem; border-radius: .35rem;
}

/* 6) CTA (Read less / Read more) looks active */
#workexperience .t-row.is-open .xp-readmore__btn{
  border-color: rgba(var(--acc-purple,161,0,255), .55);
  color: var(--color-text-dark, #111827);
  box-shadow: 0 6px 18px rgba(var(--acc-purple,161,0,255), .20);
}
#workexperience .t-row.is-open .xp-readmore__btn:hover{
  transform: translateY(-1px);
}
/* === Timeline dot pulse animation (on Read more) === */
@keyframes dot-pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(29,174,204,.45); }
  50%  { transform: scale(1.25); box-shadow: 0 0 18px 6px rgba(111,225,246,.35); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(29,174,204,0); }
}

.t-dot {
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform, box-shadow;
}

.t-dot.is-pulsing {
  animation: dot-pulse 900ms ease-out forwards;
}

/* optional halo ring */
.t-dot.is-pulsing::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid rgba(111,225,246,.35);
  animation: halo-fade 900ms ease-out forwards;
  pointer-events: none;
}

@keyframes halo-fade {
  0%   { opacity: 0; transform: scale(.85); }
  25%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}
/* ===== Timeline reactions on Read more (pulse + glow) ===== */
#workexperience .t-row.is-active .t-dot{
  animation: xp-dot-pulse .8s ease-out;
  background: var(--color-accent, #2563EB);
  box-shadow: 0 0 0 6px rgba(37,99,235,.18);
}

/* short vertical glow segment on the center lane (only when active) */
#workexperience .t-center::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%) scaleY(0);
  width:6px; height:90px;
  border-radius:3px;
  background: linear-gradient(
    to bottom,
    rgba(37,99,235,0),
    rgba(37,99,235,.30) 30%,
    rgba(37,99,235,.30) 70%,
    rgba(37,99,235,0)
  );
  filter: blur(.3px);
  opacity:0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
#workexperience .t-row.is-active .t-center::after{
  opacity:1; transform:translateX(-50%) scaleY(1);
}

/* subtly thicken the little connector into the card while active */
#workexperience .t-left  .xp-card::after,
#workexperience .t-right .xp-card::after{
  transition: transform .25s ease, background-color .25s ease;
}
#workexperience .t-row.is-active .t-left  .xp-card::after,
#workexperience .t-row.is-active .t-right .xp-card::after{
  transform: scaleX(1.25);
  background-color: var(--color-accent, #2563EB);
}

/* pulse keyframes for the dot */
@keyframes xp-dot-pulse{
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(37,99,235,.20); }
  60%  { transform: scale(1.2); box-shadow: 0 0 0 10px rgba(37,99,235,0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 6px rgba(37,99,235,.18); }
}
/* ===== RESOURCES SECTION (Dark Blue Theme) ===== */
.resources-showcase {
  position: relative;
  overflow: hidden;
  background: #f9fbfc; /* keep section light but subtle animation behind */
}

/* animated soft blue glow in background */
.resources-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(40rem 40rem at 20% 40%, rgba(24,80,156,0.10), transparent 60%),
    radial-gradient(34rem 34rem at 80% 70%, rgba(25,145,255,0.10), transparent 60%);
  animation: rsBlueGlow 16s ease-in-out infinite alternate;
}
@keyframes rsBlueGlow {
  0% { transform: translate3d(-2%, -2%, 0) scale(1); }
  100% { transform: translate3d(2%, 3%, 0) scale(1.05); }
}

.resources-showcase .container {
  position: relative;
  z-index: 1;
}

.resources-showcase .section-subheading {
  max-width: 720px;
  margin: 0 auto 2rem;
  line-height: 1.75;
}

/* ===== CTA BUTTON (Dark Blue Style) ===== */
.resources-showcase .resources-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 1.1rem 2.6rem;
  border-radius: 50px;

  /* 🌌 Deep blue gradient */
  background: linear-gradient(90deg, #0B2A47 0%, #143A61 50%, #1B4F85 100%);
  background-size: 200% 100%;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: 0.4px;
  border: none;
  box-shadow: 0 0 25px rgba(27, 79, 133, 0.45);
  transition: all 0.3s ease;
  animation: rsBtnShift 8s ease-in-out infinite alternate;
}

@keyframes rsBtnShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* On hover: lighter blue glow */
.resources-showcase .resources-cta:hover {
  transform: translateY(-4px) scale(1.03);
  background: linear-gradient(90deg, #185FA0 0%, #2A7DD1 100%);
  box-shadow: 0 0 40px rgba(42, 125, 209, 0.6);
}

/* glowing outline pulse */
.resources-showcase .resources-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.25);
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.4s ease;
}
.resources-showcase .resources-cta:hover::after {
  opacity: 1;
  transform: scale(1.05);
}

/* icon gentle pulse */
.resources-showcase .resources-cta i {
  animation: rsIconPulse 2.5s ease-in-out infinite;
}
@keyframes rsIconPulse {
  0%, 100% { transform: none; opacity: 1; }
  50% { transform: translateY(-2px) scale(1.1); opacity: 0.9; }
}
/* =========================================================
   RESPONSIVE FIXES — paste at the end of style.css
   ========================================================= */

/* 1) Global: prevent sideways scroll & make media fluid */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* 2) Typographic scaling and container breathing room */
@media (max-width: 1200px){
  .container { max-width: 100%; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 992px){
  html { font-size: 15px; } /* gentle downscale */
  .section-heading, .section-subheading { text-align: center; }
}
@media (max-width: 768px){
  html { font-size: 14px; } /* smaller base for tight screens */
}

/* 3) Hero / Masthead: stack & center on tablet/mobile */
@media (max-width: 991.98px){
  .masthead--split .masthead-grid { grid-template-columns: 1fr; text-align: center; }
  .masthead-right { margin-left: 0; }
  .name-block { margin-left: 0; }
  .hero, .hero-badges, .hero-actions, .hero-status {
    justify-content: center; margin-left: auto; margin-right: auto;
  }
  .text-lg-left { text-align: center !important; } /* force center when stacked */
  .hero-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
  .hero-btn { width: 100%; max-width: 360px; justify-content: center; }
}
/* Fix chips: readable on dark hero (your old style was white text on white bg) */
.chip{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
}

/* 4) Skills grid: single column on mobile for clean stacking */
@media (max-width: 768px){
  .skills-block .row > [class*="col-"]{ flex: 0 0 100%; max-width: 100%; }
}

/* 5) Work Experience timeline: collapse to one column & center content */
@media (max-width: 768px){
  #workexperience .t-row { grid-template-columns: 1fr; }
  #workexperience .t-center { display: none; } /* hide vertical rail on mobile */
  #workexperience .t-left, #workexperience .t-right { grid-column: 1 / -1; }
  #workexperience .t-left .xp-card,
  #workexperience .t-right .xp-card { margin: 0 !important; }
  #workexperience .t-left .xp-card::after,
  #workexperience .t-right .xp-card::after { display: none; }
  #workexperience .timeline-3col::before { display: none; } /* remove center line */
}

/* 6) Projects (full-bleed rows): stack media & copy + center actions */
@media (max-width: 992px){
  .project-row, .project-row.project-row--reverse { grid-template-columns: 1fr; }
  .project-row--reverse .project-media,
  .project-row--reverse .project-copy { order: initial; } /* use natural order */
  .project-copy { text-align: center; margin-left: auto; margin-right: auto; }
  .project-actions { justify-content: center; flex-wrap: wrap; }
}

/* 7) Art/Photoshop grid: allow smaller tiles to avoid overflow */
.art-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* 8) Resources CTA: full-width button on small screens */
#resources .resources-cta { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 576px){
  #resources .resources-cta { width: 100%; max-width: 360px; }
}

/* 9) Heading halo: shrink the radial background on very small screens */
@media (max-width: 575.98px){
  .section-heading-with-line::before { width: 140vw; height: 120px; }
}


@media (min-width: 992px){
  .masthead--split .masthead-grid{
    grid-template-columns: 1.05fr .95fr;
    text-align: left;
  }
}



@media (min-width: 992px){
  .name-block{ margin-left: clamp(-160px, -6vw, -40px); }
}


.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }


@media (min-width: 992px){
  .hero-badges, .hero-actions{ justify-content:flex-start; }
}

/* ===========================
   HERO DESKTOP SPLIT (≥992px)
   =========================== */

@media (min-width: 992px){
  /* turn the hero back into 2 columns */
  .masthead--split .masthead-grid{
    display: grid !important;
    grid-template-columns: 1.05fr .95fr !important;  /* left = name, right = info */
    align-items: center !important;
    gap: clamp(22px, 3vw, 44px) !important;
    text-align: left !important;
  }

  /* ensure blocks live in their own columns (in case order got altered) */
  .masthead--split .masthead-grid .name-block{ grid-column: 1 !important; }
  .masthead--split .masthead-grid .masthead-right{ grid-column: 2 !important; }

  /* left column slight stylistic shift is OK, but keep it modest */
  .name-block{
    margin-left: clamp(-80px, -3vw, -20px) !important;  /* reduce the big negative offset */
  }

  /* on desktop, badges & buttons should be left-aligned (not centered) */
  .hero-badges,
  .hero-actions{
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* status pill sits naturally; no forced full-width on desktop */
  .hero-status{
    max-width: none !important;
    width: auto !important;
    white-space: nowrap !important; /* keep it on one line if it fits */
    text-align: left !important;
  }
}