@font-face {
        font-family: 'Degular';
        src: url('/fonts/Degular-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: 'Degular';
        src: url('/fonts/Degular-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: 'Degular';
        src: url('/fonts/Degular-Semibold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: 'Degular';
        src: url('/fonts/Degular-Bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }

      :root {
        --bg: #F1ECE9;
        --fg: #191919;
        --muted: #3a3a3a;
        --border: #191919;
        --border-light: rgba(25,25,25,0.1);
        --good: #2d5016;
        --caution: #b45309;
        --avoid: #991b1b;
        --brand-orange: #c03800;
        --white: #ffffff;
        --accent-navy: #1e3a5f;
        --bg-light: #f1f1f1;
      }

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

      html, body { min-height: 100%; }
      html {
        scroll-padding-top: 90px; /* Offset for sticky header on mobile */
      }
      @media (min-width: 768px) {
        html {
          scroll-padding-top: 110px; /* Larger offset for desktop header */
        }
      }
      body {
        background: #191919;
        color: var(--fg);
        font-family: "Degular", -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 400;
        line-height: 1.6;
        overflow-x: hidden;
      }

      /* HEADER */
      .header-wrapper {
        background: #191919;
        padding: 12px 12px 20px;
        position: sticky;
        top: 0;
        z-index: 100;
      }

      header {
        background: var(--brand-orange);
        padding: 7px 20px;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      }

      .header-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        min-height: 40px;
      }

      nav {
        order: -1;
        display: flex;
        align-items: center;
      }

      nav ul {
        list-style: none;
        display: flex;
        gap: 16px;
        align-items: center;
        margin: 0;
        padding: 0;
      }
      @media (min-width: 768px) {
        nav ul { gap: 24px; }
      }

      nav li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
      }

      nav a {
        color: var(--white);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: opacity 0.2s ease;
        line-height: 1;
        padding: 0;
        margin: 0;
      }
      @media (min-width: 768px) {
        nav a { font-size: 15px; }
      }
      nav a:hover {
        opacity: 0.8;
      }

      /* Hamburger menu for mobile */
      .hamburger {
        display: none;
        flex-direction: column;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 1000;
      }

      .hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--white);
        transition: all 0.3s ease;
      }

      @media (max-width: 767px) {
        .hamburger {
          display: flex;
        }

        nav ul {
          position: fixed;
          top: 64px;
          left: 0;
          right: 0;
          background: var(--brand-orange);
          flex-direction: column;
          gap: 0;
          padding: 20px;
          margin: 0;
          transform: translateX(-100%);
          transition: transform 0.3s ease;
          box-shadow: 0 4px 12px rgba(0,0,0,0.2);
          max-height: calc(100vh - 64px);
          overflow-y: auto;
        }

        nav ul.active {
          transform: translateX(0);
        }

        nav li {
          width: 100%;
          padding: 12px 0;
          border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        nav li:last-child {
          border-bottom: none;
        }

        nav a {
          font-size: 16px;
          display: block;
          width: 100%;
        }

        /* Keep logo centered */
        .logo-container {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .logo-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      .logo {
        height: 32px;
      }
      @media (min-width: 768px) {
        .logo { height: 40px; }
      }

      main {
        max-width: 900px;
        margin: 0 auto;
        padding: 40px 20px 60px;
        background: var(--white);
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      }
      @media (min-width: 768px) {
        main { padding: 60px 40px 80px; }
      }

      .breadcrumbs {
        font-size: 14px;
        color: var(--muted);
        margin-bottom: 32px;
      }
      .breadcrumbs a {
        color: var(--muted);
        text-decoration: none;
      }
      .breadcrumbs a:hover { text-decoration: underline; }
      .breadcrumbs span { margin: 0 8px; }

      .ingredient-hero { margin-bottom: 40px; }

      h1 {
        font-family: "Degular", sans-serif;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 16px;
        letter-spacing: -0.02em;
      }
      @media (min-width: 768px) {
        h1 { font-size: 48px; }
      }

      .ingredient-meta {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        align-items: center;
        margin: 16px 0;
      }

      .category-badge {
        padding: 6px 14px;
        border: 1.5px solid var(--border-light);
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        text-transform: capitalize;
      }

      .position-badge {
        padding: 6px 14px;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: white;
        border-radius: 20px;
      }

      .badge-good { background: var(--good); }
      .badge-neutral { background: var(--muted); }
      .badge-caution { background: var(--caution); }
      .badge-avoid { background: var(--avoid); }

      .nutrition-value {
        font-size: 15px;
        color: var(--muted);
      }

      .table-of-contents {
        background: #f7f7f7;
        border-radius: 8px;
        padding: 24px 28px;
        margin: 32px 0;
      }

      .table-of-contents-header {
        font-size: 13px;
        font-weight: 600;
        color: var(--brand-orange);
        margin: 0 0 14px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .table-of-contents ol {
        list-style: decimal;
        margin: 0;
        padding-left: 20px;
        font-size: 15px;
        line-height: 1.9;
      }

      .table-of-contents li {
        padding-left: 4px;
        margin-bottom: 0;
        font-size: 15px;
        line-height: 1.9;
      }

      .table-of-contents a {
        color: var(--fg);
        text-decoration: none;
        font-weight: 500;
      }

      .table-of-contents a:hover {
        text-decoration: underline;
      }

      .quick-summary {
        background: var(--brand-orange);
        border-radius: 4px;
        padding: 8px;
        margin: 32px 0;
      }

      .quick-summary-inner {
        background: var(--white);
        border-radius: 12px;
        padding: 20px 24px;
      }

      .quick-summary h2 {
        color: var(--brand-orange);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0 0 12px 0;
      }

      .quick-summary p {
        margin: 0;
        font-size: 17px;
        line-height: 1.6;
      }

      .key-facts {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 32px 0;
      }
      @media (min-width: 640px) {
        .key-facts { grid-template-columns: repeat(2, 1fr); }
      }

      .fact-item {
        background: var(--bg-light);
        border: none;
        border-radius: 8px;
        padding: 16px;
      }

      .fact-label {
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        margin-bottom: 6px;
      }

      .fact-value {
        font-size: 16px;
        font-weight: 600;
      }

      h2 {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.3;
        margin: 48px 0 20px;
        letter-spacing: -0.01em;
      }
      @media (min-width: 768px) {
        h2 { font-size: 32px; }
      }

      h3 {
        font-size: 22px;
        font-weight: 600;
        line-height: 1.4;
        margin: 32px 0 16px;
      }

      p {
        margin-bottom: 20px;
        font-size: 18px;
        line-height: 1.7;
      }

      a {
        color: var(--fg);
        text-decoration: underline;
      }

      a:hover {
        opacity: 0.7;
      }

      ul {
        margin: 20px 0 20px 24px;
      }
      @media (min-width: 768px) {
        ul { margin: 24px 0 24px 32px; }
      }

      li {
        margin-bottom: 12px;
        font-size: 18px;
        line-height: 1.6;
      }

      .quality-note-box {
        border: none;
        border-left: 4px solid var(--brand-orange);
        border-radius: 0 8px 8px 0;
        background: var(--bg-light);
        padding: 24px;
        margin: 32px 0;
      }

      .watts-take-box {
        background: var(--brand-orange);
        border-radius: 4px;
        padding: 8px;
        margin: 32px 0;
      }

      .watts-take-inner {
        background: var(--white);
        border-radius: 12px;
        padding: 20px 24px;
      }

      .quality-note-label {
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 12px;
      }

      .watts-take-label {
        color: var(--brand-orange);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 12px;
      }

      .faq-item {
        background: var(--bg-light);
        border-radius: 12px;
        border-left: 4px solid var(--brand-orange);
        padding: 24px;
        margin-bottom: 16px;
      }
      .faq-item h3 { margin-top: 0; }

      .related-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 32px 0;
      }
      @media (min-width: 640px) {
        .related-grid { grid-template-columns: repeat(2, 1fr); }
      }
      @media (min-width: 900px) {
        .related-grid { grid-template-columns: repeat(3, 1fr); }
      }

      .related-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        background: var(--bg-light);
        padding: 20px;
        text-decoration: none;
        color: var(--fg);
        transition: all 0.15s;
        display: block;
      }

      .related-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        transform: translateY(-2px);
      }

      .related-card h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 8px 0;
      }

      .related-card p {
        font-size: 15px;
        color: var(--muted);
        margin: 0;
      }

      .cta-section {
        background: var(--brand-orange);
        color: var(--white);
        padding: 40px;
        text-align: center;
        margin: 60px 0 40px;
        border-radius: 12px;
      }

      .cta-section h3 {
        color: var(--white);
        margin-top: 0;
        font-size: 28px;
      }

      .cta-section p {
        font-size: 18px;
        margin-bottom: 24px;
        color: var(--white);
        opacity: 0.9;
      }

      .cta-button {
        display: inline-block;
        background: var(--white);
        color: var(--brand-orange);
        padding: 14px 32px;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        border: none;
        border-radius: 8px;
        transition: all 0.15s;
      }

      .cta-button:hover {
        opacity: 0.9;
      }

      /* FOOTER */
      .footer-wrapper {
        background: #191919;
        padding: 0 12px 12px;
        margin-top: 60px;
      }

      footer {
        background: var(--brand-orange);
        color: var(--white);
        padding: 45px 40px 20px;
        border-radius: 200px 16px 16px 200px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        min-height: 144px;
      }
      @media (min-width: 768px) {
        footer {
          padding: 63px 60px 24px;
          min-height: 207px;
          border-radius: 300px 16px 16px 300px;
        }
      }

      .footer-content {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
      }

      .footer-left {
        flex: 1;
      }

      .footer-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 24px;
        flex: 1;
      }
      @media (min-width: 768px) {
        .footer-right {
          gap: 32px;
        }
      }

      .footer-right-text {
        text-align: right;
      }

      .footer-logo {
        height: 100px;
        margin-top: 128px;
        margin-bottom: 0;
      }
      @media (min-width: 768px) {
        .footer-logo {
          height: 160px;
          margin-top: 160px;
          margin-bottom: 0;
        }
      }

      footer p {
        color: var(--white);
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 12px;
      }

      footer a {
        color: var(--white);
        text-decoration: none;
        font-weight: 500;
      }
      footer a:hover {
        text-decoration: underline;
      }

      /* Mobile footer fixes */
      @media (max-width: 767px) {
        footer {
          padding: 32px 20px 16px !important;
          border-radius: 100px 16px 16px 100px !important;
          min-height: auto !important;
        }

        .footer-content {
          flex-direction: column !important;
          align-items: center !important;
          gap: 24px !important;
        }

        .footer-left {
          flex: none !important;
          width: 100% !important;
        }

        .footer-right {
          flex: none !important;
          width: 100% !important;
          align-items: center !important;
          gap: 16px !important;
        }

        .footer-right-text {
          text-align: center !important;
        }

        .footer-logo {
          height: 60px !important;
          margin-top: 0 !important;
        }

        footer p {
          font-size: 14px !important;
          margin-bottom: 8px !important;
        }
      }
    
      /* === STICKY EMAIL CTA (mobile only) === */
      .sticky-email-cta {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--brand-orange);
        color: #ffffff;
        padding: 16px 20px 24px;
        z-index: 500;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.35s ease;
      }
      .sticky-email-cta.visible {
        transform: translateY(0);
      }
      @media (min-width: 768px) {
        .sticky-email-cta { display: none !important; }
      }
      .sticky-cta-close {
        position: absolute;
        top: 12px;
        right: 16px;
        background: none;
        border: none;
        color: #ffffff;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        padding: 4px 6px;
        opacity: 0.75;
      }
      .sticky-cta-close:hover { opacity: 1; }
      .sticky-cta-heading {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 12px;
        color: #ffffff;
        padding-right: 36px;
      }
      .sticky-cta-form {
        display: flex;
        gap: 8px;
      }
      .sticky-cta-form input[type="email"] {
        flex: 1;
        min-width: 0;
        padding: 11px 14px;
        border: none;
        border-radius: 8px;
        font-family: inherit;
        font-size: 15px;
        background: #ffffff;
        color: #191919;
      }
      .sticky-cta-form input[type="email"]::placeholder {
        color: rgba(25,25,25,0.4);
      }
      .sticky-cta-form input[type="email"]:focus {
        outline: none;
      }
      .sticky-cta-form button[type="submit"] {
        padding: 11px 16px;
        background: #191919;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .sticky-cta-form button[type="submit"]:hover {
        opacity: 0.85;
      }
      .sticky-cta-success {
        font-size: 16px;
        font-weight: 500;
        color: #ffffff;
        margin: 0;
        display: none;
      }