:root {
        --ink:       #1c1917;
        --ink-soft:  #44403c;
        --ink-muted: #78716c;
        --paper:     #faf8f4;
        --paper-2:   #f2ede6;
        --paper-3:   #e8e0d5;
        --gold:      #b8860b;
        --gold-lt:   #d4a017;
        --gold-pale: #f5edd8;
        --dark:      #141210;
        --dark-2:    #211e1a;
        --dark-3:    #2d2926;
        --rule:      rgba(28,25,23,.1);
        --rule-inv:  rgba(250,248,244,.12);
        --ff-head:   'Playfair Display', Georgia, serif;
        --ff-body:   'DM Sans', system-ui, sans-serif;
        --ease-out:  cubic-bezier(.16,1,.3,1);
      }
 
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html { scroll-behavior: smooth; }
      body {
        background: var(--paper);
        color: var(--ink);
        font-family: var(--ff-body);
        font-weight: 300;
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      img { display: block; max-width: 100%; }
      a { color: inherit; text-decoration: none; }
      button { font-family: var(--ff-body); cursor: pointer; border: none; background: none; }




      .reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
      .reveal.visible { opacity: 1; transform: none; }
      .d1 { transition-delay: .08s; }
      .d2 { transition-delay: .16s; }
      .d3 { transition-delay: .24s; }
      .d4 { transition-delay: .32s; }
 

      .inner-banner {
        margin-top: 0;
        background: var(--dark);
        position: relative;
        overflow: hidden;
        padding: 72px 0 64px;
      }
      .inner-banner::before {
        content: '';
        position: absolute; inset: 0; pointer-events: none;
        background-image:
          repeating-linear-gradient(100deg,transparent 0,transparent 3px,rgba(180,160,120,.025) 3px,rgba(180,160,120,.025) 4px),
          repeating-linear-gradient(180deg,transparent 0,transparent 18px,rgba(180,160,120,.015) 18px,rgba(180,160,120,.015) 19px);
      }
      .inner-banner::after {
        content: attr(data-label);
        position: absolute; top: 20px; right: 40px;
        font-family: var(--ff-head); font-size: 200px; font-weight: 700;
        line-height: 1; color: rgba(184,134,11,.04);
        user-select: none; pointer-events: none; letter-spacing: -.04em;
      }
 
.myd-h4 {
  font-size: 25px;
  color: var(--gold);
  font-weight: bold;
  margin-bottom: 20px;
  text-transform: uppercase;
  border-bottom: 2px solid darkgoldenrod;
}



      .inner-banner .container3.container {
        max-width: 1200px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 1;
      }
 

      .inner-banner .grid-box.two {
        display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end;
      }
 
      /* Doc1: .left.column  h2 */
      .inner-banner .left.column h2 {
        font-family: var(--ff-head);
        font-size: clamp(32px, 4vw, 56px);
        font-weight: 400; line-height: 1.08;
        color: var(--gold-pale); letter-spacing: -.01em;
        margin-bottom: 18px;
      }
      .inner-banner .left.column h2 em { font-style: italic; color: var(--gold-lt); }
 
      /* Doc1: .mbx  (breadcrumb) */
      .inner-banner .mbx {
        display: flex; align-items: center; gap: 8px;
        font-size: 12px; color: rgba(245,237,216,.4);
      }
      .inner-banner .mbx a { color: rgba(245,237,216,.4); transition: color .2s; }
      .inner-banner .mbx a:hover { color: var(--gold-lt); }
      .inner-banner .mbx .sep { color: rgba(245,237,216,.2); margin: 0 2px; }
 
      /* Doc1: .right.column  .text p */
      .inner-banner .right.column .text {
        background: rgba(184,134,11,.06);
        border-left: 3px solid var(--gold);
        padding: 22px 28px;
      }
      .inner-banner .right.column .text p {
        font-size: 14px; line-height: 1.82;
        color: rgba(245,237,216,.45); margin: 0;
      }
 
      /* ══════════════════════════════════════════════
         TAG PAGE CONTAINER  (.tag-page-container — Doc1)
      ══════════════════════════════════════════════ */
      .tag-page-container {
        background: var(--paper);
      }

      
 
      /* ── TAG HERO SECTION  (.tag-hero-section — Doc1) ── */
      .tag-hero-section {
        background: var(--paper-2);
        padding: 72px 0 60px;
        border-bottom: 1px solid var(--paper-3);
      }
      .tag-hero-section .tag-title {
        max-width: 1200px; margin: 0 auto 10px; padding: 0 48px;
        font-family: var(--ff-head);
        font-size: clamp(26px, 3.2vw, 44px);
        font-weight: 400; line-height: 1.12; color: var(--ink);
      }
      .tag-hero-section .tag-title em { font-style: italic; color: var(--gold); }
 
      .tag-hero-section .hero-section-p {
        max-width: 1200px; margin: 0 auto 28px; padding: 0 48px;
        display: inline-flex; align-items: center; gap: 10px;
        font-size: 16px; letter-spacing: .24em; text-transform: uppercase;
        color: var(--gold); font-weight: 500;
      }
      .tag-hero-section .hero-section-p::before {
        content: ''; display: block; width: 22px; height: 1px; background: var(--gold);
      }
 
      /* Doc1: .editor-content-1  (rich text intro block) */
      .editor-content-1 {
        max-width: 1200px; margin: 0 auto; padding: 0 48px;
        font-size: 15.5px; line-height: 1.88; color: var(--ink-soft);
      }
      .editor-content-1 p { margin-bottom: 18px; 
      font-size: 16px;}
      .editor-content-1 h2, .editor-content-1 h3 {
        font-family: var(--ff-head); color: var(--ink); margin: 28px 0 12px;
      }
      .editor-content-1 a { color: var(--gold); border-bottom: 1px solid rgba(184,134,11,.3); transition: border-color .2s; }
      .editor-content-1 a:hover { border-color: var(--gold); }
 
      /* ══════════════════════════════════════════════
         INNER PAGE  (.inner-page.prodet-page — Doc1)
      ══════════════════════════════════════════════ */
      .inner-page.prodet-page {
        background: var(--dark);
        padding: 80px 0;
      }
 
      /* Doc1: .prodet-8.product-list.Auxil-related */
      .prodet-8.product-list.Auxil-related {
        max-width: 1200px; margin: 0 auto; padding: 0 48px;
      }
 
      /* Doc1: .title */
      .prodet-8 .title {
        margin-bottom: 44px;
      }
      .prodet-8 .title h4 {
        font-family: var(--ff-head);
        font-weight: 400; line-height: 1.12;
        color: var(--gold-pale);
        position: relative; display: inline-block;
        padding-bottom: 14px;
      }
      .prodet-8 .title h4::after {
        content: ''; position: absolute; left: 0; bottom: 0;
        width: 48px; height: 2px; background: var(--gold);
      }
 
       /* Doc1: .serviceBox  — flat grid (no swiper scroll) */
      .serviceBox { position: relative; }
      .serviceBox .swiper-container { overflow: visible; }
      .serviceBox .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        transform: none !important;  /* override swiper inline transform */
        width: 100% !important;
      }
 
 
      .serviceBox .swiper-slide {
        background: var(--dark-2);
        flex: 0 0 calc(33.333% - 1px);
        min-width: 0;
        display: flex; flex-direction: column;
        transition: background .25s;
        position: relative; overflow: hidden;
      }
      .serviceBox .swiper-slide:hover { background: #2a2520; }
      .serviceBox .swiper-slide::after {
        content: ''; position: absolute; bottom: 0; left: 0; right: 0;
        height: 2px; background: linear-gradient(90deg, var(--gold), transparent);
        transform: scaleX(0); transform-origin: left;
        transition: transform .4s var(--ease-out);
      }
      .serviceBox .swiper-slide:hover::after { transform: scaleX(1); }
 
 
      .serviceBox .item-img {
        aspect-ratio: 4/3;
        overflow: hidden;
        background: var(--dark-3);
        display: flex; align-items: center; justify-content: center;
      }
      .serviceBox .item-img img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform .5s var(--ease-out);
      }
      .serviceBox .swiper-slide:hover .item-img img { transform: scale(1.04); }
 
    
      .serviceBox .item-content {
        padding: 22px 24px;
        flex: 1; display: flex; flex-direction: column; gap: 12px;
      }
      .serviceBox .item-content .h4product {
        font-family: var(--ff-body);
        font-size: 16px; font-weight: 400;
        color: rgba(245,237,216,.75); line-height: 1.55;
        flex: 1;
      }
      .serviceBox .item-content a { color: inherit; }
      .serviceBox .item-content a:hover .h4product { color: var(--gold-lt); }
 
      /* Doc1: .more-link  (arrow link) */
      .serviceBox .more-link {
        display: inline-flex; align-items: center;
        font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
        color: var(--gold); font-weight: 500;
        gap: 6px; transition: gap .25s;
      }
      .serviceBox .more-link::after { content: '→'; font-size: 14px; }
      .serviceBox .swiper-slide:hover .more-link { gap: 10px; }
 
      /* ══════════════════════════════════════════════
         CONTENT MATRIX  (.content-matrix — Doc1)
      ══════════════════════════════════════════════ */
      .content-matrix {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 72px;
        max-width: 1200px; margin: 0 auto; padding: 80px 48px;
      }
 
      /* Doc1: .main-content-column */
      .main-content-column { min-width: 0; }
 
      /* Doc1: .sidebar-content-column */
      .sidebar-content-column { position: relative; }
 
      /* ── editor modules inside main column ── */
 
      /* Doc1: .info-column1.editor-module */
      .info-column1.editor-module {
        margin-bottom: 52px;
        padding: 40px 44px;
        background: var(--dark);
        position: relative; overflow: hidden;
      }
      .info-column1.editor-module::before {
        content: '';
        position: absolute; inset: 0; pointer-events: none;
        background-image:
          repeating-linear-gradient(100deg,transparent 0,transparent 3px,rgba(180,160,120,.02) 3px,rgba(180,160,120,.02) 4px);
      }
      .info-column1.editor-module *,
      .editor-module1 *,
      .editor-module * {
        font-family: var(--ff-body);
      }
      .info-column1.editor-module h1,
      .info-column1.editor-module h2,
      .info-column1.editor-module h3,
      .info-column1.editor-module h4 {
        font-family: var(--ff-head);
        color: var(--gold-pale);
        margin-bottom: 14px; line-height: 1.2;
      }
      .info-column1.editor-module p {
        font-size: 16x; line-height: 1.88;
        color: rgb(245, 237, 216); margin-bottom: 16px;
      }
      .info-column1.editor-module table {
        width: 100%; border-collapse: collapse; font-size: 16px;
      }
      .info-column1.editor-module table thead tr { background: var(--gold); }
      .info-column1.editor-module table thead th {
        padding: 12px 18px; text-align: left;
        font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
        font-weight: 600; color: var(--dark);
      }
      .info-column1.editor-module table tbody tr {
        border-bottom: 1px solid rgba(245,237,216,.06);color: #f4ebd5;font-size: 16px; transition: background .2s;
      }
      .info-column1.editor-module table tbody tr:hover { background: rgba(245,237,216,.04); }
      .info-column1.editor-module table tbody td {
        padding: 12px 18px; color: rgba(245,237,216,.5); vertical-align: top;
      }
      .info-column1.editor-module table tbody td:first-child {
        font-weight: 500; color: rgba(245,237,216,.82);
      }
 
      /* Doc1: .editor-module1  (light section) */
      .editor-module1 {
        margin-bottom: 44px;
        padding: 36px 0;
        border-top: 1px solid var(--paper-3);
        border-bottom: 1px solid var(--paper-3);
      }
      .editor-module1 h1, .editor-module1 h2,
      .editor-module1 h3, .editor-module1 h4 {
        font-family: var(--ff-head); color: var(--ink);
        margin-bottom: 14px; line-height: 1.15;
      }
      .editor-module1 p {
        font-size: 16px; line-height: 1.88; color: var(--ink-soft); margin-bottom: 16px;
      }
      .editor-module1 ul, .editor-module1 ol {
        padding-left: 20px; margin-bottom: 16px;
      }
      .editor-module1 li {
        font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.7;
      }
      .editor-module1 table {
        width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 16px;
      }
      .editor-module1 table thead th {
        background: var(--ink); color: var(--gold-pale);
        padding: 12px 18px; text-align: left;
        font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
      }
      .editor-module1 table tbody tr { border-bottom: 1px solid var(--paper-3); }
      .editor-module1 table tbody tr:nth-child(even) { background: #b8860b;}
      .editor-module1 table tbody tr:hover { background: var(--gold-pale); }
      .editor-module1 table tbody td {
        padding: 11px 18px; color: var(--ink-soft); line-height: 1.65; vertical-align: top;
      }
      .editor-module1 table tbody td:first-child { font-weight: 500; color: var(--ink); }
 
      /* Doc1: .editor-module  (generic content blocks) */
      .editor-module {
        margin-bottom: 40px;
      }
      .editor-module h1, .editor-module h2,
      .editor-module h3, .editor-module h4 {
        font-family: var(--ff-head); color: var(--ink);
        margin-bottom: 14px; line-height: 1.15;
        padding-bottom: 12px; border-bottom: 2px solid var(--gold);
        display: inline-block;
      }
      .editor-module p {
        font-size: 16px; line-height: 1.88; color: var(--ink-soft); margin-bottom: 15px;
      }
      .editor-module p strong { color: var(--ink); font-weight: 600; }
      .editor-module ul, .editor-module ol {
        padding-left: 20px; margin-bottom: 16px;
      }
      .editor-module li {
        font-size: 16px; color: #b8860b; margin-bottom: 8px; line-height: 2;
      }
      .editor-module table {
        width: 100%; border-collapse: collapse; font-size: 16px; margin-bottom: 16px;
      }
      .editor-module table thead th {
        background: var(--paper-3); color: var(--ink);
        padding: 10px 16px; text-align: left;
        font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
      }
      .editor-module table tbody tr { border-bottom: 1px solid var(--paper-3); }
      .editor-module table tbody tr:hover { background: var(--gold-pale); }
      .editor-module table tbody td {
        padding: 10px 16px; color: var(--ink-soft); line-height: 1.6; vertical-align: top;
      }
      .editor-module table tbody td:first-child { font-weight: 500; color: var(--ink); }
 
      /* ── SIDEBAR modules ── */
 
      /* Doc1: .editor-module-service.editor-module  (dark sidebar card) */
      .editor-module-service.editor-module {
        background: var(--dark);
        padding: 36px 32px;
        position: sticky; top: 88px;
        margin-bottom: 24px;
        border: none;
      }
      .editor-module-service.editor-module h1,
      .editor-module-service.editor-module h2,
      .editor-module-service.editor-module h3,
      .editor-module-service.editor-module h4 {
        font-family: var(--ff-head);
        font-size: 17px; font-weight: 600; color: var(--gold-lt);
        border-bottom: 1px solid var(--rule-inv); border-bottom-width: 1px;
        border-bottom-style: solid; padding-bottom: 14px; margin-bottom: 20px;
        display: block; border-bottom-color: var(--rule-inv);
      }
      .editor-module-service.editor-module p {
        font-size: 16px; color: rgba(245,237,216,.45); line-height: 1.75; margin-bottom: 10px;
      }
      .editor-module-service.editor-module p strong { color: rgba(245,237,216,.8); font-weight: 500; }
      .editor-module-service.editor-module ul { list-style: none; padding: 0; margin-bottom: 22px; }
      .editor-module-service.editor-module li {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 0; border-bottom: 1px solid var(--rule-inv);
        font-size: 14px; color: rgba(245,237,216,.7); margin: 0;
      }
      .editor-module-service.editor-module li:last-child { border-bottom: none; }
      .editor-module-service.editor-module li::before {
        content: '✓';
        width: 22px; height: 22px; border-radius: 50%;
        border: 1px solid var(--gold);
        display: flex; align-items: center; justify-content: center;
        font-size: 10px; color: var(--gold); flex-shrink: 0;
      }
      .editor-module-service.editor-module a {
        display: block; width: 100%; padding: 11px;
        border: 1px solid var(--gold);
        text-align: center; font-size: 10.5px; letter-spacing: .16em;
        text-transform: uppercase; color: var(--gold-lt); font-weight: 500;
        margin-top: 20px; transition: background .25s, color .25s;
      }
      .editor-module-service.editor-module a:hover {
        background: var(--gold); color: var(--dark);
      }
 
      /* Doc1: .editor-module-faq  */
      .editor-module-faq {
        background: var(--paper-2);
        padding: 32px 30px;
        border: 1px solid var(--paper-3);
      }
      .editor-module-faq h1, .editor-module-faq h2,
      .editor-module-faq h3, .editor-module-faq h4 {
        font-family: var(--ff-head); color: var(--ink);
        font-size: 18px; font-weight: 600;
        margin-bottom: 18px; padding-bottom: 12px;
        border-bottom: 2px solid var(--gold);
      }
      .editor-module-faq p, .editor-module-faq li {
        font-size: 13.5px; color: var(--ink-muted); line-height: 1.78; margin-bottom: 10px;
      }
      .editor-module-faq strong { color: var(--ink); font-weight: 600; }
      .editor-module-faq ul { padding-left: 18px; }
      .editor-module-faq a { color: var(--gold); border-bottom: 1px solid rgba(184,134,11,.3); }
      .editor-module-faq a:hover { border-color: var(--gold); }
 
      /* ══════════════════════════════════════════════
         MORE INFO  (.more-info — Doc1)
      ══════════════════════════════════════════════ */
      .more-info {
        max-width: 1200px; margin: 0 auto;
        padding: 32px 48px 48px;
        font-size: 20px; color: #bd7d4f;
        display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
        border-top: 1px solid var(--paper-3);
        font-weight: bold;
      }
      .more-info a {
        display: inline-flex; align-items: center;
        padding: 7px 16px; border: 1px solid var(--paper-3);
        font-size: 14px; color: var(--ink-muted);
        letter-spacing: .04em;
        transition: border-color .2s, color .2s, background .2s;
      }
      .more-info a:hover {
        border-color: var(--gold); color: var(--gold-lt);
        background: rgba(184,134,11,.06);
      }
 
      /* ══════════════════════════════════════════════
         RESPONSIVE
      ══════════════════════════════════════════════ */
      @media (max-width: 1024px) {
        .inner-banner .grid-box.two { grid-template-columns: 1fr; gap: 32px; }
        .content-matrix { grid-template-columns: 1fr; gap: 48px; padding: 56px 40px; }
        .editor-module-service.editor-module { position: static; }
        .serviceBox .swiper-slide { flex: 0 0 calc(50% - 1px); }
      }
      @media (max-width: 680px) {
        .inner-banner .container3.container { padding: 0 20px; }
        .tag-hero-section .tag-title,
        .tag-hero-section .hero-section-p,
        .editor-content-1 { padding-left: 20px; padding-right: 20px; }
        .prodet-8.product-list.Auxil-related { padding: 0 20px; }
        .content-matrix { padding: 48px 20px; }
        .more-info { padding: 24px 20px 36px; }
        .serviceBox .swiper-slide { flex: 0 0 100%; }
        .inner-banner { padding: 52px 0 44px; }
      }