* { box-sizing: border-box; }
  body { font-family: "Inter", sans-serif; background-color: #faf9f9; margin: 0; }

  /* ── Pages ── */
  .page { display: none; }
  .page.active { display: block; animation: fadeUp 0.35s ease; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

  /* ── Progress bar ── */
  #progress-bar { position:fixed;top:0;left:0;height:3px;background:#EA4435;width:0%;z-index:300;transition:width 0.1s linear;pointer-events:none; }

  /* ── Nav ── */
  .nav-link { font-family:"Plus Jakarta Sans",sans-serif;font-size:13px;font-weight:600;color:#1b1c1c;text-decoration:none;display:flex;align-items:center;gap:5px;white-space:nowrap;padding:4px 2px;border-bottom:2px solid transparent;transition:color 0.18s,border-color 0.18s; }
  .nav-link:hover { color:#EA4435;border-bottom-color:#EA4435; }
  .nav-link svg { width:15px;height:15px;flex-shrink:0; }
  .no-scrollbar::-webkit-scrollbar { display:none; }
  .no-scrollbar { -ms-overflow-style:none;scrollbar-width:none; }

  /* ── Cat pills ── */
  .cat-pill { cursor:pointer;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:13px;padding:8px 20px;border-radius:999px;border:none;white-space:nowrap;transition:all 0.2s; }
  .cat-pill.active { background:#EA4435;color:#fff; }
  .cat-pill:not(.active) { background:#f5f3f3;color:#374151; }
  .cat-pill:not(.active):hover { background:#fde8e6;color:#EA4435; }

  /* ── Cards ── */
  .article-card { cursor:pointer; }
  .article-card:hover .card-title { color:#EA4435; }
  .card-title { transition:color 0.2s; }
  .gray-hover img { filter:grayscale(100%);transition:filter 0.5s ease; }
  .gray-hover:hover img { filter:grayscale(0%); }

  /* ── Footer bg ── */
  .footer-main {
    background-image: url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1600&q=80');
    background-size:cover;background-position:center;position:relative;
  }
  .footer-main::before { content:'';position:absolute;inset:0;background:rgba(250,249,249,0.88);z-index:0; }
  .footer-main > * { position:relative;z-index:1; }

  /* ── Social btn ── */
  .social-btn { width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:opacity 0.2s;flex-shrink:0; }
  .social-btn:hover { opacity:0.85; }

  /* ── Float btns ── */
  .float-btn { width:52px;height:52px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.18);transition:transform 0.2s; }
  .float-btn:hover { transform:scale(1.1); }

  /* ── Post body ── */
  .post-body h2 { font-family:"Plus Jakarta Sans",sans-serif;font-size:22px;font-weight:700;color:#1b1c1c;margin:36px 0 14px; }
  .post-body p { margin-bottom:18px;line-height:1.85;color:#374151; }

  /* ── TOC ── */
  .toc-link { font-size:13px;color:#6b7280;display:flex;align-items:center;gap:8px;text-decoration:none;transition:color 0.2s; }
  .toc-link:hover,.toc-link.active { color:#EA4435;font-weight:600; }

  /* ── Input ── */
  .nl-input { border:1.5px solid #e5e7eb;border-radius:8px;padding:10px 14px;font-size:14px;width:100%;outline:none;transition:border-color 0.2s; }
  .nl-input:focus { border-color:rgba(234,68,53,0.4); }

  /* ── Breadcrumb ── */
  .breadcrumb { display:flex;align-items:center;gap:6px;font-size:13px;color:#9ca3af; }
  .breadcrumb a { color:#9ca3af;text-decoration:none;transition:color 0.18s; }
  .breadcrumb a:hover { color:#EA4435; }
  .breadcrumb span { color:#1b1c1c;font-weight:600; }

  /* ══════════════════════════════════════════════
     RESPONSIVE / MOBILE STYLES
  ══════════════════════════════════════════════ */

  /* ── Hamburger Menu ── */
  #mob-menu-btn {
    display:none;
    flex-shrink:0;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
    margin-left:auto;
  }
  #mob-nav-overlay {
    display:none;
    position:fixed;
    inset:0;
    z-index:99;
    background:rgba(0,0,0,0.45);
  }
  #mob-nav-drawer {
    position:fixed;
    top:0;right:-100%;
    width:280px;
    height:100%;
    background:#fff;
    z-index:100;
    transition:right 0.28s ease;
    overflow-y:auto;
    box-shadow:-4px 0 24px rgba(0,0,0,0.15);
    display:flex;
    flex-direction:column;
  }
  #mob-nav-drawer.open { right:0; }
  #mob-nav-overlay.open { display:block; }
  .mob-drawer-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid #f0eeee;
  }
  .mob-drawer-close {
    background:none;border:none;cursor:pointer;padding:4px;
  }
  .mob-drawer-links {
    display:flex;
    flex-direction:column;
    padding:16px 0;
    flex:1;
  }
  .mob-drawer-links a {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:15px;
    font-weight:600;
    color:#1b1c1c;
    text-decoration:none;
    padding:13px 24px;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom:1px solid #f5f3f3;
    transition:color 0.18s,background 0.18s;
  }
  .mob-drawer-links a:hover { color:#EA4435; background:#fdf2f1; }
  .mob-drawer-links a svg { width:17px;height:17px;flex-shrink:0; }
  .mob-drawer-bottom {
    padding:20px;
    border-top:1px solid #f0eeee;
  }

  /* ── Desktop nav hidden on mobile ── */
  @media (max-width:768px) {
    /* Nav */
    #main-nav > div {
      padding:0 16px !important;
      gap:12px !important;
    }
    #main-nav nav { display:none !important; }
    #main-nav > div > a[href*="login"] { display:none !important; }
    #mob-menu-btn { display:flex !important; }

    /* Hero */
    #page-listing header {
      height:420px !important;
    }
    #page-listing header h1 {
      font-size:28px !important;
      margin-bottom:20px !important;
    }

    /* Search bar */
    #page-listing header > div > div[style*="border-radius:999px"] {
      padding:5px 5px 5px 14px !important;
      max-width:100% !important;
    }
    #page-listing header > div > div[style*="border-radius:999px"] button {
      padding:9px 18px !important;
      font-size:12px !important;
    }

    /* Category pills scroll row */
    #page-listing section:first-of-type {
      padding:24px 16px 8px !important;
    }

    /* Featured bento */
    #featured-bento {
      grid-template-columns: 1fr !important;
      gap:20px !important;
      margin-bottom:40px !important;
    }
    #featured-bento > div:first-child {
      height:300px !important;
    }
    #featured-bento > div:last-child {
      flex-direction:column !important;
      gap:16px !important;
    }
    #featured-bento > div:last-child > div {
      flex:unset !important;
    }
    #featured-bento > div:last-child > div > div:first-child {
      height:160px !important;
    }

    /* Latest stories heading */
    #page-listing main > div[style*="text-align:center"] {
      margin-bottom:28px !important;
    }

    /* Article grid */
    #article-grid {
      grid-template-columns: 1fr !important;
      gap:32px !important;
    }
    #article-grid article > div:first-child {
      aspect-ratio:16/9 !important;
    }

    /* Main padding */
    #page-listing main {
      padding:20px 16px 60px !important;
    }

    /* Post hero */
    #page-post > div[style*="height:540px"] {
      height:360px !important;
    }
    #page-post > div[style*="height:540px"] h1 {
      font-size:22px !important;
      margin-bottom:10px !important;
    }

    /* Post body layout */
    #page-post > div[style*="grid-template-columns:1fr 340px"] {
      grid-template-columns: 1fr !important;
      gap:36px !important;
      padding:28px 16px 60px !important;
    }

    /* Sidebar order — push sidebar below article */
    #page-post aside { order:2; }
    #page-post article { order:1; }

    /* Post breadcrumb */
    #page-post > div[style*="padding:20px 28px"] {
      padding:16px 16px 0 !important;
    }

    /* Keep Exploring strip */
    #page-post section[style*="padding:60px"] {
      padding:40px 16px !important;
    }
    #page-post section div[style*="repeat(3,1fr)"] {
      grid-template-columns: 1fr !important;
      gap:20px !important;
    }
    #page-post section div[style*="align-items:center;justify-content:space-between"] {
      margin-bottom:24px !important;
    }

    /* Footer grid */
    .footer-main > div[style*="grid-template-columns:1fr 1fr 1fr"] {
      grid-template-columns: 1fr !important;
      gap:32px !important;
      padding:0 24px 40px !important;
    }

    /* Contact banner */
    .footer-main > div[style*="padding:0 40px 32px"] {
      padding:0 16px 24px !important;
    }
    .footer-main > div > div[style*="justify-content:space-between"] {
      flex-direction:column !important;
      gap:16px !important;
      padding:20px !important;
      align-items:flex-start !important;
    }

    /* Float buttons — smaller & less intrusive */
    .float-btn {
      width:44px !important;
      height:44px !important;
      bottom:16px !important;
    }
    .float-btn[href*="tel"] { left:16px !important; }
    .float-btn[href*="wa.me"] { right:16px !important; }

    /* Post inline image */
    #post-inline-img { height:200px !important; object-fit:cover !important; }

    /* Author card in post */
    #page-post article > div[style*="display:flex;align-items:flex-start"] {
      flex-direction:column !important;
      gap:14px !important;
    }
  }

  @media (max-width:768px) {
    /* Footer grid via class */
    .footer-grid-3col {
      grid-template-columns: 1fr !important;
      gap:28px !important;
      padding:0 20px 36px !important;
    }
    /* Hide Quick Links and Our Products on mobile — only Newsletter shown */
    .footer-quicklinks-col,
    .footer-products-col {
      display: none !important;
    }
    .footer-contact-banner {
      flex-direction:column !important;
      padding:20px !important;
      gap:16px !important;
      border-radius:16px !important;
    }
    /* Post layout grid via class */
    .post-body-grid {
      grid-template-columns: 1fr !important;
      gap:28px !important;
      padding:24px 16px 56px !important;
    }
    /* Keep Exploring grid */
    .keep-exploring-grid {
      grid-template-columns: 1fr !important;
      gap:20px !important;
    }
  }
  @media (min-width:769px) and (max-width:1024px) {
    .footer-grid-3col {
      grid-template-columns: 1fr 1fr !important;
      gap:32px !important;
      padding:0 28px 44px !important;
    }
    .footer-contact-banner {
      flex-direction:column !important;
      gap:14px !important;
      align-items:flex-start !important;
    }
    .keep-exploring-grid {
      grid-template-columns: repeat(2,1fr) !important;
    }
  }
  .footer-link { font-size:14px;font-weight:500;color:#374151;text-decoration:none;display:flex;align-items:center;gap:8px;transition:color 0.18s; }
  .footer-link:hover { color:#EA4435; }
  .fl-arrow { color:#EA4435;font-weight:700;font-size:16px; }

/* Footer Links */

  .footer-link { font-size:14px;font-weight:500;color:#374151;text-decoration:none;display:flex;align-items:center;gap:8px;transition:color 0.18s; }
  .footer-link:hover { color:#EA4435; }
  .fl-arrow { color:#EA4435;font-weight:700;font-size:16px; }