/* ─── BREADCRUMBS ─── */
    .breadcrumbs-bar {
      padding-top: 88px; padding-bottom: 0;
      border-bottom: 1px solid var(--border);
      background: var(--white);
    }
    .breadcrumbs {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      padding: 14px 0;
      font-size: 0.82rem; color: var(--muted);
      list-style: none;
    }
    .breadcrumbs li { display: flex; align-items: center; gap: 8px; }
    .breadcrumbs li a { color: var(--muted); transition: color 0.2s; }
    .breadcrumbs li a:hover { color: var(--rose); }
    .breadcrumbs li:last-child a, .breadcrumbs li:last-child span { color: var(--charcoal); font-weight: 500; }
    .breadcrumbs-sep { color: var(--border); font-size: 0.75rem; }
 
    /* ─── ARTICLE LAYOUT ─── */
    .article-page { padding: 0 0 96px; }
    .article-grid {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 56px; align-items: start;
      padding-top: 56px;
    }
    .article-main { min-width: 0; }
    .article-sidebar { position: sticky; top: 88px; }
 
    /* ─── ARTICLE HEADER ─── */
    .article-header { margin-bottom: 40px; }
    .article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
    .article-tag {
      display: inline-block; padding: 5px 14px;
      background: rgba(201,122,130,0.1); color: var(--rose-deep);
      border-radius: 20px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
    }
    .article-header h1 {
      font-size: clamp(1.9rem, 3.5vw, 2.8rem);
      font-weight: 400; line-height: 1.18; margin-bottom: 20px;
    }
    .article-header h1 em { font-style: italic; color: var(--rose); }
    .article-lead {
      font-size: 1.1rem; color: var(--muted); line-height: 1.7;
      border-left: 3px solid var(--rose-light); padding-left: 20px;
      margin-bottom: 28px;
    }
    .article-meta {
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
      padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .meta-item { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--muted); }
    .meta-item svg { color: var(--rose-light); flex-shrink: 0; }
    .meta-item time, .meta-item span { color: var(--charcoal); font-weight: 500; }
    .meta-sep { width: 1px; height: 20px; background: var(--border); }
    .reading-bar {
      position: fixed; top: 68px; left: 0; right: 0; height: 3px;
      background: var(--border); z-index: 99;
    }
    .reading-progress {
      height: 100%; width: 0%; background: var(--rose);
      transition: width 0.1s linear;
    }
 
    /* ─── ARTICLE HERO IMAGE ─── */
    .article-hero-img {
      width: 100%; aspect-ratio: 16/7;
      border-radius: var(--radius); overflow: hidden;
      margin-bottom: 40px; position: relative;
      background: linear-gradient(135deg, #EDD5D8 0%, #D9B5BA 40%, #C9A0A8 100%);
    }
    .article-hero-img figcaption {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 12px 20px;
      background: linear-gradient(to top, rgba(42,31,34,0.6), transparent);
      color: rgba(255,255,255,0.75); font-size: 0.78rem; font-style: italic;
    }
    .img-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 12px;
    }
    .img-placeholder-icon { opacity: 0.25; }
    .img-placeholder-text { font-size: 0.82rem; color: var(--rose-deep); opacity: 0.5; letter-spacing: 0.08em; text-transform: uppercase; }
 
    /* ─── ARTICLE BODY ─── */
    .article-body { font-size: 1rem; line-height: 1.8; color: var(--charcoal); }
    .article-body h2 {
      font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 400;
      margin: 48px 0 20px; color: var(--charcoal);
    }
    .article-body h3 {
      font-size: 1.3rem; font-weight: 400;
      margin: 36px 0 16px; color: var(--charcoal);
    }
    .article-body p { margin-bottom: 20px; }
    .article-body p:last-child { margin-bottom: 0; }
    .article-body ul, .article-body ol {
      margin: 0 0 20px 0; padding-left: 20px;
    }
    .article-body ul li, .article-body ol li {
      margin-bottom: 10px; font-size: 0.97rem;
    }
    .article-body strong { font-weight: 600; color: var(--charcoal); }
 
    /* ─── INLINE PHOTO ─── */
    .article-img {
      margin: 36px 0; border-radius: var(--radius); overflow: hidden;
    }
    .article-img figure { position: relative; }
    .article-img .img-box {
      width: 100%;
      background: linear-gradient(135deg, #F0E0E3 0%, #DEC4C8 100%);
      display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
    }
    .article-img img {height: auto;}
    .article-img figcaption {
      font-size: 0.8rem; color: var(--muted); font-style: italic;
      padding: 10px 0 0; text-align: center;
    }
 
    /* ─── PULLQUOTE ─── */
    .pullquote {
      margin: 40px 0; padding: 32px 36px;
      background: linear-gradient(135deg, rgba(201,122,130,0.07) 0%, rgba(201,122,130,0.03) 100%);
      border-left: 4px solid var(--rose); border-radius: 0 var(--radius) var(--radius) 0;
    }
    .pullquote blockquote {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem; font-weight: 300; font-style: italic;
      line-height: 1.45; color: var(--charcoal); margin-bottom: 12px;
    }
    .pullquote cite { font-size: 0.82rem; color: var(--muted); font-style: normal; }
 
    /* ─── INFOBOX ─── */
    .infobox {
      margin: 36px 0; padding: 28px 32px;
      background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    }
    .infobox-title {
      display: flex; align-items: center; gap: 10px;
      font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose);
      margin-bottom: 16px;
    }
    .infobox ul li { font-size: 0.93rem; }
 
    /* ─── SALARY TABLE in article ─── */
    .article-table-wrap { overflow-x: auto; margin: 32px 0; border-radius: var(--radius); border: 1px solid var(--border); }
    .article-table { width: 100%; border-collapse: collapse; min-width: 480px; }
    .article-table thead th {
      text-align: left; font-size: 0.75rem; font-weight: 600;
      letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
      padding: 14px 18px; background: var(--bg-alt);
      border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    .article-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; }
    .article-table tbody tr:last-child { border-bottom: none; }
    .article-table tbody tr:hover { background: rgba(201,122,130,0.03); }
    .article-table tbody td { padding: 14px 18px; font-size: 0.9rem; vertical-align: top; }
    .article-table tbody td:first-child { font-weight: 600; }
    .salary-cell { color: var(--rose-deep); font-weight: 600; }
 
    /* ─── FAQ in article ─── */
    .article-faq { margin: 40px 0; }
    .article-faq h2 { margin-bottom: 24px; }
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-q {
      width: 100%; background: none; border: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      padding: 20px 0; text-align: left; gap: 16px;
      font-family: 'Jost', sans-serif; font-size: 0.97rem; font-weight: 500;
      color: var(--charcoal); transition: color 0.2s;
    }
    .faq-q:hover { color: var(--rose); }
    .faq-q svg { flex-shrink: 0; transition: transform 0.3s; color: var(--rose); }
    .faq-item.open .faq-q svg { transform: rotate(45deg); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; color: var(--muted); font-size: 0.93rem; line-height: 1.7; }
    .faq-item.open .faq-a { max-height: 300px; padding-bottom: 20px; }
 
    /* ─── SIDEBAR ─── */
    .sidebar-cta {
      background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
      border-radius: var(--radius); padding: 32px 24px; margin-bottom: 24px; color: var(--white);
    }
    .sidebar-cta h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 12px; }
    .sidebar-cta p { color: rgba(255,255,255,0.75); font-size: 0.88rem; margin-bottom: 24px; line-height: 1.6; }
    .sidebar-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      background: var(--white); color: var(--rose-deep);
      padding: 14px 20px; border-radius: 50px;
      font-size: 0.88rem; font-weight: 600; letter-spacing: 0.03em;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .sidebar-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
    .sidebar-toc {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 28px 24px; margin-bottom: 24px;
    }
    .sidebar-toc h4 {
      font-family: 'Jost', sans-serif; font-size: 0.75rem; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
      margin-bottom: 16px;
    }
    .toc-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
    .toc-list li a {
      display: block; padding: 8px 0;
      font-size: 0.88rem; color: var(--muted);
      border-bottom: 1px solid var(--bg-alt);
      transition: color 0.2s; line-height: 1.4;
    }
    .toc-list li a:hover { color: var(--rose); }
    .toc-list li:last-child a { border-bottom: none; }
    .toc-list li a.active { color: var(--rose); font-weight: 500; }
    .sidebar-share {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 24px; margin-bottom: 24px;
    }
    .sidebar-share h4 {
      font-family: 'Jost', sans-serif; font-size: 0.75rem; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
      margin-bottom: 14px;
    }
    .share-btns { display: flex; gap: 10px; flex-wrap: wrap; }
    .share-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 14px; border-radius: 50px;
      font-size: 0.82rem; font-weight: 500;
      border: 1px solid var(--border); transition: all 0.2s;
    }
    .share-btn:hover { border-color: var(--rose); color: var(--rose); }
 
    /* ─── JOB CARDS SECTION ─── */
    .job-cards-section { padding: 80px 0; background: var(--bg-alt); }
    .job-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
    .job-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 28px 24px;
      display: flex; flex-direction: column;
      transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
    }
    .job-card:hover { box-shadow: 0 12px 48px rgba(42,31,34,0.1); transform: translateY(-4px); border-color: var(--rose-light); }
    .job-card-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(201,122,130,0.1); color: var(--rose-deep);
      padding: 4px 12px; border-radius: 20px; font-size: 0.74rem; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; width: fit-content;
    }
    .job-card-badge.hot::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--rose); animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
    .job-card h3 { font-size: 1.3rem; font-weight: 400; margin-bottom: 8px; }
    .job-card-salary {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.7rem; font-weight: 600; color: var(--rose-deep);
      line-height: 1; margin-bottom: 16px;
    }
    .job-card-salary span { font-size: 0.9rem; font-family: 'Jost', sans-serif; color: var(--muted); font-weight: 400; }
    .job-card-props { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
    .job-prop { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
    .job-prop svg { color: var(--rose-light); flex-shrink: 0; }
    .job-card-reqs { margin-bottom: 24px; }
    .job-card-reqs-title { font-size: 0.73rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
    .req-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .req-tag {
      display: inline-block; padding: 3px 10px;
      border: 1px solid var(--border); border-radius: 20px;
      font-size: 0.77rem; color: var(--muted);
    }
    .job-card-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      background: var(--rose); color: var(--white);
      padding: 13px 20px; border-radius: 50px; margin-top: auto;
      font-size: 0.88rem; font-weight: 500;
      transition: background 0.2s, transform 0.15s;
    }
    .job-card-btn:hover { background: var(--rose-deep); transform: translateY(-1px); }
 
    /* ─── RELATED ARTICLES ─── */
    .related-section { padding: 80px 0; }
    .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
    .related-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
      transition: box-shadow 0.25s, transform 0.25s;
      display: flex; flex-direction: column;
    }
    .related-card:hover { box-shadow: 0 8px 40px rgba(42,31,34,0.08); transform: translateY(-3px); }
    .related-thumb {
      background: linear-gradient(135deg, #EDD5D8 0%, #D9B5BA 100%);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .related-thumb-2 { background: linear-gradient(135deg, #D5E4DD 0%, #B5CEC4 100%); }
    .related-thumb-3 { background: linear-gradient(135deg, #DDD5ED 0%, #C4B5CE 100%); }
    .related-card-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
    .related-card-tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose); margin-bottom: 10px; }
    .related-card h3 { font-size: 1.1rem; font-weight: 400; margin-bottom: 10px; line-height: 1.35; }
    .related-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin-bottom: 16px; flex: 1; }
    .related-card-meta { display: flex; justify-content: space-between; font-size: 0.77rem; color: var(--muted); }
    .related-read-link { color: var(--rose); font-weight: 500; transition: opacity 0.2s; }
    .related-read-link:hover { opacity: 0.75; }
    
      /* ─── RESPONSIVE ─── */
    @media (max-width: 1024px) {
      .article-grid { grid-template-columns: 1fr; gap: 0; }
      .article-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 48px; order: -1; }
      .sidebar-toc { display: none; }
      .job-cards-grid { grid-template-columns: repeat(2, 1fr); }
      .related-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
    }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .article-sidebar { grid-template-columns: 1fr; }
      .job-cards-grid { grid-template-columns: 1fr; }
      .related-grid { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr; gap: 32px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 520px) {
      .article-meta { gap: 12px; }
      .meta-sep { display: none; }
    }