/* ═══════════════════════════════════════════════════════
   DAILY-NEED GROUP — Main Stylesheet v1.0.0
   Brand: Green #1E7A34  |  Yellow #D4A017
   Tagline: A fresh approach to healthy life!
   Built for GeneratePress Child Theme
   ═══════════════════════════════════════════════════════ */

/* ── RESET GENERATEPRESS DEFAULTS ── */
.site-header, .main-navigation, #site-navigation,
.generate-back-to-top, .generate-columns-container,
#footer-widgets { display: none !important; }

.site-content, .content-area, .site-main,
.entry-content, #page { padding: 0 !important; margin: 0 !important; max-width: none !important; }

body.dng-site {
   background: #fff;
   padding-top: 78px; /* Matches the height of .nav-inner */
}

/* FIX: When logged in, increase padding to account for the 32px Admin Bar
*/
body.admin-bar.dng-site {
   padding-top: calc(78px + 32px);
}

body.dng-site .site { display: block; }

/* ── CSS VARIABLES ── */
:root {
  --g:         #1E7A34;
  --g-dark:    #155A25;
  --g-deep:    #0D3A18;
  --g-mid:     #289944;
  --g-light:   #4DC168;
  --g-pale:    #EBF6EE;
  --g-pale2:   #D3EDD9;
  --y:         #D4A017;
  --y-bright:  #F2C230;
  --y-pale:    #FDF6E3;
  --y-dark:    #9A7010;
  --white:     #FFFFFF;
  --off:       #F7FAF7;
  --text:      #182A1C;
  --muted:     #5A6E5E;
  --border:    rgba(30,122,52,.11);
  --r:         12px;
  --rl:        20px;
  --rx:        30px;
  --serif:     'Playfair Display', Georgia, serif;
  --sans:      'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--sans); color: var(--text); background: var(--white); line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; }
.dng-main { display: block; }

/* ── UTILITY ── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
.section { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }
.text-center { text-align: center; }

/* ── TAGS ── */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--g); background: var(--g-pale); padding: 5px 14px; border-radius: 100px; margin-bottom: 1.1rem; }
.tag::before { content: ''; width: 6px; height: 6px; background: var(--g-light); border-radius: 50%; flex-shrink: 0; }
.tag-y  { color: var(--y-dark); background: var(--y-pale); } .tag-y::before  { background: var(--y); }
.tag-w  { color: rgba(255,255,255,.9); background: rgba(255,255,255,.15); } .tag-w::before { background: var(--y-bright); }

/* ── HEADINGS ── */
.h1, .h2, .h3 { font-family: var(--serif); line-height: 1.2; }
.h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); color: var(--g-dark); }
.h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); color: var(--g-dark); }
.h3 { font-size: 1.4rem; color: var(--g-dark); }
.lead { font-size: 1.05rem; color: var(--muted); line-height: 1.78; max-width: 560px; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 8px; font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .22s; border: none; white-space: nowrap; }
.btn-g    { background: var(--g); color: #fff; }
.btn-g:hover { background: var(--g-mid); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(30,122,52,.3); }
.btn-y    { background: var(--y); color: #fff; }
.btn-y:hover { background: var(--y-bright); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,160,23,.35); }
.btn-out  { background: transparent; color: var(--g); border: 2px solid var(--g); }
.btn-out:hover  { background: var(--g); color: #fff; }
.btn-outw { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); }
.btn-outw:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-w    { background: #fff; color: var(--g-dark); }
.btn-w:hover    { background: var(--g-pale); }
.btn-sm   { padding: 9px 18px; font-size: 13px; }

/* ── IMAGE PLACEHOLDER ── */
.ph { background: linear-gradient(145deg, var(--g-pale2), var(--g-pale)); border: 2px dashed rgba(30,122,52,.2); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--g-mid); position: relative; overflow: hidden; }
.ph::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(30,122,52,.03) 10px, rgba(30,122,52,.03) 11px); }
.ph-icon  { font-size: 2.8rem; opacity: .4; position: relative; z-index: 1; }
.ph-label { font-size: 12px; font-weight: 600; opacity: .55; letter-spacing: .04em; position: relative; z-index: 1; }
.ph-size  { font-size: 10px; opacity: .35; position: relative; z-index: 1; }

/* ════════════
   NAVIGATION
   ════════════ */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: box-shadow .25s, top 0.2s ease; }
.admin-bar #nav {
   top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar #nav { top: 46px; }
    body.admin-bar.dng-site { padding-top: calc(78px + 46px); }
    /* Drawer also adjusts for the taller admin bar on small screens */
    .admin-bar .nav-mobile-drawer {
        top: calc(78px + 46px);
        height: calc(100vh - 78px - 46px);
    }
}
#nav.up { box-shadow: 0 4px 24px rgba(30,122,52,.1); }
.nav-inner { display: flex; align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; height: 78px; gap: .75rem; overflow: hidden; }
/* ── LOGO: uploaded image version ── */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
/* Full logo image uploaded via Customizer */
.logo-link--image .nav-logo-img {
    height: 60px;        /* controls nav logo height — adjust to taste */
    width: auto;         /* keeps aspect ratio */
    max-width: 160px;
    object-fit: contain;
    display: block;
}

/* Fallback: SVG icon + text when no logo uploaded */
.logo-link--text {
    gap: 10px;
}
.logo-fallback-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--y-bright);
    border: 3px solid var(--g-dark);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.logo-fallback-text { line-height: 1.25; }
.logo-name    { font-family: var(--serif); font-size: 1.05rem; color: var(--g-dark); font-weight: 700; display: block; }
.logo-tagline { font-size: 9px; color: var(--muted); letter-spacing: .03em; display: block; }
.nav-menu { flex: 1; display: flex; justify-content: center; }
.nav-list, .nav-list ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-list li { position: relative; }
.nav-list a { display: block; padding: 8px 13px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; border-radius: 7px; transition: all .15s; }
.nav-list a:hover, .nav-list li.current-menu-item > a, .nav-list a.active { color: var(--g-dark); background: var(--g-pale); }
.nav-list li.current-menu-item > a { font-weight: 700; }
.nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.nav-phone { font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; text-decoration: none; }

/* Hamburger */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: var(--g-pale);
    border: 1.5px solid var(--g-pale2);
    border-radius: 8px;
    cursor: pointer;
    /* Fixed 42×42px — never changes size */
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    /* No extra padding — width/height are the boundary */
    padding: 0;
}
.nav-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--g-dark);
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
    transform-origin: center;
}
/* Open state — becomes an X */
.nav-hamburger.open {
    background: var(--g);
    border-color: var(--g);
}
.nav-hamburger.open span { background: #fff; }
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(0, 7px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(0, -7px); }

/* Mobile Drawer */
.nav-mobile-drawer {
    display: none;
    position: fixed;
    /* Sits directly below the nav bar — uses CSS var so it adjusts automatically */
    top: 78px;
    left: 0;
    right: 0;
    /* Fills the rest of the screen below the nav */
    height: calc(100vh - 78px);
    background: #fff;
    z-index: 9998;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1.5rem 2rem;
    border-top: 1px solid var(--border);
    flex-direction: column;
    /* Prevent body scroll bleed-through */
    overscroll-behavior: contain;
}
.nav-mobile-drawer.open { display: flex; }
/* Admin bar pushes nav down by 32px — drawer must follow */
.admin-bar .nav-mobile-drawer { top: calc(78px + 32px); height: calc(100vh - 78px - 32px); }

.nav-mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;       /* takes all available space so footer sticks to bottom */
}
.nav-mobile-list a {
    display: block;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.nav-mobile-list a:hover,
.nav-mobile-list li.current-menu-item > a { background: var(--g-pale); color: var(--g-dark); font-weight: 700; }
.nav-mobile-footer {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    margin-top: 1.5rem;
    flex-shrink: 0;   /* footer never gets squashed */
}

/* ════════════
   PAGE HEROES
   ════════════ */
.page-content { padding-top: 78px; }
.page-hero-sm { padding: 5rem 0 4rem; background: linear-gradient(135deg, var(--g-deep) 0%, var(--g-dark) 100%); position: relative; overflow: hidden; text-align: center; }
.page-hero-sm h1 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); color: #fff; margin-bottom: .8rem; }
.page-hero-sm .lead { color: rgba(255,255,255,.55); margin: 0 auto; }
.breadcrumb { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }
.breadcrumb a { font-size: 12.5px; color: rgba(255,255,255,.4); text-decoration: none; }
.breadcrumb a:hover { color: var(--y-bright); }
.breadcrumb span { font-size: 12.5px; color: rgba(255,255,255,.2); }
.breadcrumb .current { color: var(--y-bright); }

/* ════════
   HOME HERO
   ════════ */
.hero { min-height: min(92vh, 860px); min-height: min(92dvh, 860px); display: grid; grid-template-columns: 1fr 1fr; background: var(--g-deep); position: relative; overflow: hidden; padding-top: 40px; }
.hero-leaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.custom-leaf {
    display: inline-block;
    width: 1em;   /* Scales with font-size */
    height: 1em;  /* Scales with font-size */
    background-image: url('https://new.dailyneedgroup.com/wp-content/uploads/2026/04/DiceDaily-Leaf@10x.png');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: 0 2px; /* Optional spacing */
}
.hero-leaf { position: absolute; opacity: .5; font-size: 6rem; }
.hero-leaf:nth-child(1) { top: 10%; left: 5%; transform: rotate(-25deg); }
.hero-leaf:nth-child(2) { top: 55%; right: 3%; font-size: 10rem; transform: rotate(40deg); }
.hero-leaf:nth-child(3) { bottom: 10%; left: 40%; font-size: 4rem; transform: rotate(60deg); }
.hero-left { display: flex; flex-direction: column; justify-content: center; padding: 5rem 3rem 5rem 0; position: relative; z-index: 2; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--y-bright); margin-bottom: 1.6rem; }
.hero-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--y-bright); }
.hero-title { font-family: var(--serif); font-size: clamp(2.2rem, 3.8vw, 3.8rem); line-height: 1.1; color: #fff; margin-bottom: 1.4rem; }
.hero-title em { color: var(--y-bright); font-style: italic; }
.hero-sub { font-size: 1.05rem; color: rgba(255,255,255,.58); max-width: 420px; line-height: 1.78; margin-bottom: 2.4rem; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust { display: flex; align-items: center; gap: 1.5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.trust-item { display: flex; flex-direction: column; }
.trust-num { font-family: var(--serif); font-size: 2rem; color: #fff; line-height: 1; }
.trust-num sup { font-size: 1.1rem; color: var(--y-bright); }
.trust-label { font-size: 11px; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.trust-div { width: 1px; height: 40px; background: rgba(255,255,255,.1); }
.hero-right { display: flex; align-items: center; justify-content: center; padding: 4rem 0 4rem 3rem; position: relative; z-index: 2; }
.hero-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--rl); padding: 2rem; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); width: 100%; max-width: 440px; }
.hero-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }
.hero-card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-light); }
.hero-card-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .1em; }
.hc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.hc-cell { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px; text-align: center; }
.hc-emoji { font-size: 1.8rem; margin-bottom: 6px; display: block; }
.hc-count { font-family: var(--serif); font-size: 1.5rem; color: #fff; display: block; }
.hc-name { font-size: 10.5px; color: rgba(255,255,255,.4); display: block; margin-top: 2px; }
.hc-bar { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.hc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hc-bar-txt { font-size: 11.5px; color: rgba(255,255,255,.5); }

/* Cert Strip */
.cert-strip { background: var(--off); border-bottom: 1px solid var(--border); padding: 16px 0; }
.cert-strip-inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.cert-strip-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.cert-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cert-pill { background: #fff; border: 1px solid var(--border); border-radius: 100px; padding: 5px 16px; font-size: 11.5px; font-weight: 600; color: var(--g-dark); }

/* Home About */
.home-about { padding: 6rem 0; }
.home-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-img-wrap { position: relative; }
.about-main-ph { height: 420px; }
.about-float { position: absolute; bottom: -22px; right: -22px; background: #fff; border-radius: var(--r); padding: 1.25rem 1.5rem; box-shadow: 0 12px 40px rgba(30,122,52,.14); border: 1px solid var(--border); min-width: 190px; }
.about-float .big { font-family: var(--serif); font-size: 2.4rem; color: var(--g); }
.about-float p { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.check-list { margin: 1.8rem 0; display: flex; flex-direction: column; gap: .9rem; }
.check-item { display: flex; gap: 12px; align-items: flex-start; }
.check-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--g-pale); color: var(--g); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 800; margin-top: 1px; }
.check-txt { font-size: 14px; color: var(--text); line-height: 1.6; }

/* Divisions */
.divs { background: var(--g-deep); padding: 6rem 0; }
.divs-head { text-align: center; margin-bottom: 3.5rem; }
.div-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.div-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--rl); padding: 2rem; transition: all .25s; position: relative; }
.div-card:hover { background: rgba(255,255,255,.08); border-color: rgba(30,193,100,.3); transform: translateY(-5px); }
.div-card.main-div { background: rgba(30,122,52,.15); border-color: rgba(30,193,100,.25); }
.div-badge { position: absolute; top: 1.25rem; right: 1.25rem; background: var(--g); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 3px 12px; border-radius: 100px; }
.div-icon-wrap { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 1.4rem; }
.di-g { background: rgba(30,193,100,.15); } .di-y { background: rgba(242,194,48,.12); } .di-b { background: rgba(59,130,246,.1); }
.div-ttl { font-family: var(--serif); font-size: 1.25rem; color: #fff; margin-bottom: .55rem; }
.div-desc { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.72; margin-bottom: 1.3rem; }
.div-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.div-tag { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); font-size: 10.5px; font-weight: 500; padding: 3px 11px; border-radius: 100px; }

/* Products Grid */
.prod-sec { padding: 6rem 0; }
.prod-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.prod-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.prod-card { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: all .22s; }
.prod-card:hover { box-shadow: 0 12px 40px rgba(30,122,52,.12); transform: translateY(-4px); }
.prod-ph { height: 170px; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; position: relative; overflow: hidden; }
/* Actual uploaded images inside product cards fill the container */
.prod-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-ph.c1 { background: linear-gradient(135deg,#E8F5EB,#C8EACF); }
.prod-ph.c2 { background: linear-gradient(135deg,#FDF6E3,#F5E5B0); }
.prod-ph.c3 { background: linear-gradient(135deg,#E3EEF8,#C4D9EE); }
.prod-ph.c4 { background: linear-gradient(135deg,#F5EBF7,#E4C8EC); }
.prod-rx { position: absolute; top: 10px; right: 10px; background: var(--g-dark); color: #fff; font-size: 9px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.prod-body { padding: 1rem 1.1rem 1.3rem; }
.prod-cat { font-size: 10.5px; font-weight: 700; color: var(--g); text-transform: uppercase; letter-spacing: .07em; }
.prod-name { font-weight: 700; font-size: .95rem; color: var(--g-dark); margin: 4px 0 7px; }
.prod-desc { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.prod-link { font-size: 13px; font-weight: 700; color: var(--g); text-decoration: none; }
.prod-link:hover { text-decoration: underline; }

/* Numbers Banner */
.nums-banner { background: var(--g); padding: 5rem 0; }
.nums-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.num-cell { text-align: center; padding: 2.5rem 1rem; border-right: 1px solid rgba(255,255,255,.12); }
.num-cell:last-child { border: none; }
.num-val { font-family: var(--serif); font-size: 2.8rem; color: #fff; }
.num-val sup { font-size: 1.5rem; color: var(--y-bright); }
.num-label { font-size: 11.5px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .09em; margin-top: 8px; }

/* News Section */
.news-sec { padding: 6rem 0; }
.news-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; }
.news-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 18px; }
.news-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; transition: all .22s; }
.news-card:hover { box-shadow: 0 8px 28px rgba(30,122,52,.12); transform: translateY(-4px); }
.news-ph { display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; }
.nc1 { background: linear-gradient(135deg,var(--g-deep),var(--g-dark)); }
.nc2 { background: linear-gradient(135deg,#1a4a25,var(--g-mid)); }
.nc3 { background: linear-gradient(135deg,#5C3D00,var(--y)); }
.nc-featured { height: 240px; }
.news-body { padding: 1.4rem 1.5rem; }
.news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: .7rem; }
.news-cat-tag { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--g); background: var(--g-pale); padding: 3px 10px; border-radius: 100px; }
.news-date { font-size: 11.5px; color: var(--muted); }
.news-ttl { font-weight: 700; font-size: .97rem; color: var(--g-dark); line-height: 1.4; margin-bottom: .5rem; }
.news-card.featured .news-ttl { font-family: var(--serif); font-size: 1.15rem; }
.news-exc { font-size: 12.5px; color: var(--muted); line-height: 1.65; }

/* CTA Band */
.cta-band { background: var(--g-deep); padding: 6rem 0; position: relative; overflow: hidden; }
.cta-band::before { content: '🌿'; position: absolute; font-size: 18rem; opacity: .04; right: -3rem; top: -3rem; transform: rotate(30deg); pointer-events: none; }
.cta-band-inner { text-align: center; position: relative; z-index: 1; }
.cta-band .lead { margin: 1rem auto 2.5rem; color: rgba(255,255,255,.55); }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Quality Strip (Home) */
.quality-strip { background: linear-gradient(135deg, var(--g-pale), var(--g-pale2)); padding: 6rem 0; }
.qs-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: center; }
.qs-steps { margin: 2rem 0; display: flex; flex-direction: column; gap: 0; }
.qs-step { display: flex; gap: 18px; padding-bottom: 1.8rem; position: relative; }
.qs-step:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 38px; bottom: 0; width: 2px; background: rgba(30,122,52,.15); }
.qs-num { width: 36px; height: 36px; border-radius: 50%; background: var(--g); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; z-index: 1; }
.qs-step-ttl { font-weight: 700; font-size: 14.5px; color: var(--g-dark); margin-bottom: 3px; }
.qs-step-txt { font-size: 13px; color: var(--muted); line-height: 1.65; }
.cert-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cert-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 1.4rem; transition: box-shadow .2s; }
.cert-card:hover { box-shadow: 0 6px 20px rgba(30,122,52,.1); }
.cc-icon { font-size: 2rem; margin-bottom: 8px; }
.cc-name { font-weight: 700; font-size: 13.5px; color: var(--g-dark); }
.cc-txt { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.58; }

/* Testimonials */
.testi { padding: 6rem 0; background: var(--off); }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 3rem; }
.testi-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 2rem; transition: box-shadow .2s; }
.testi-card:hover { box-shadow: 0 8px 28px rgba(30,122,52,.1); }
.stars { color: var(--y); font-size: 14px; letter-spacing: 2px; margin-bottom: 1rem; }
.testi-quote { font-size: 14px; color: var(--muted); line-height: 1.75; margin-bottom: 1.5rem; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 10px; }
.testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--g-pale2); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--g-dark); flex-shrink: 0; }
.testi-name { font-weight: 700; font-size: 13.5px; color: var(--g-dark); }
.testi-role { font-size: 11.5px; color: var(--muted); }

/* ═════════
   ABOUT PAGE
   ═════════ */
.about-story { padding: 6rem 0; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.values-sec { padding: 4rem 0 6rem; background: var(--g-pale); }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 3rem; }
.value-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 2rem; text-align: center; transition: all .22s; }
.value-card:hover { box-shadow: 0 8px 28px rgba(30,122,52,.1); transform: translateY(-4px); }
.val-icon { font-size: 2.8rem; margin-bottom: 1rem; }
.val-title { font-family: var(--serif); font-size: 1.2rem; color: var(--g-dark); margin-bottom: .6rem; }
.val-desc { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.team-sec { padding: 6rem 0; }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 3rem; }
.team-card { border-radius: var(--rl); overflow: hidden; border: 1px solid var(--border); transition: all .22s; }
.team-card:hover { box-shadow: 0 12px 40px rgba(30,122,52,.12); transform: translateY(-4px); }
.team-ph { height: 220px; background: linear-gradient(145deg,var(--g-pale2),var(--g-pale)); }
.team-info { padding: 1.2rem 1.3rem 1.5rem; }
.team-name { font-weight: 700; font-size: .97rem; color: var(--g-dark); margin-bottom: 3px; }
.team-title { font-size: 12.5px; color: var(--g-mid); font-weight: 500; margin-bottom: .5rem; }
.team-bio { font-size: 12px; color: var(--muted); line-height: 1.6; }
.milestones { padding: 5rem 0; background: var(--g-deep); }
.milestone-list { margin-top: 3rem; display: flex; flex-direction: column; gap: 0; position: relative; max-width: 720px; margin-left: auto; margin-right: auto; }
.milestone-list::before { content: ''; position: absolute; left: 89px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.08); }
.milestone-item { display: flex; gap: 2rem; padding-bottom: 2.5rem; align-items: flex-start; position: relative; }
.m-year { font-family: var(--serif); font-size: 1.6rem; color: var(--y-bright); min-width: 80px; text-align: right; padding-top: 4px; }
.m-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--g); border: 3px solid var(--y-bright); flex-shrink: 0; margin-top: 8px; z-index: 1; }
.m-title { font-weight: 700; font-size: 14.5px; color: #fff; margin-bottom: 4px; }
.m-desc { font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.65; }

/* ═════════════
   PRODUCTS PAGE
   ═════════════ */
.products-page { padding: 4rem 0 6rem; }
.prod-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 2.5rem; }
.pf-btn { padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--border); background: #fff; color: var(--muted); cursor: pointer; font-family: var(--sans); transition: all .15s; }
.pf-btn.on, .pf-btn:hover { background: var(--g); color: #fff; border-color: var(--g); }
.product-section-head { display: flex; align-items: center; gap: 1rem; margin: 3rem 0 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--g-pale); }
.psh-icon { font-size: 1.6rem; } .psh-title { font-family: var(--serif); font-size: 1.5rem; color: var(--g-dark); }
.prod-full-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.prod-card-lg { border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; transition: all .22s; }
.prod-card-lg:hover { box-shadow: 0 12px 40px rgba(30,122,52,.15); transform: translateY(-5px); }
.pcl-ph { height: 200px; display: flex; align-items: center; justify-content: center; font-size: 4rem; position: relative; }
.pcl-ph.pg { background: linear-gradient(135deg,#D3EDD9,#B8E3C2); }
.pcl-ph.py { background: linear-gradient(135deg,#FDF6E3,#F5E3A5); }
.pcl-ph.pb { background: linear-gradient(135deg,#E3EEF8,#BDD6EF); }
.pcl-ph.pp { background: linear-gradient(135deg,#F5EBF7,#E4C0EC); }
.pcl-rx { position: absolute; top: 12px; left: 12px; background: var(--g-dark); color: #fff; font-size: 9px; font-weight: 700; padding: 3px 11px; border-radius: 100px; }
.pcl-body { padding: 1.3rem 1.4rem 1.6rem; }
.pcl-cat { font-size: 10.5px; font-weight: 700; color: var(--g); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.pcl-name { font-family: var(--serif); font-size: 1.15rem; color: var(--g-dark); margin-bottom: .5rem; }
.pcl-desc { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 1rem; }
.pcl-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--border); flex-wrap: wrap; gap: .5rem; }
.pcl-pack { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.pcl-link { font-size: 13px; font-weight: 700; color: var(--g); text-decoration: none; }
.pcl-link:hover { text-decoration: underline; }

/* ═══════════════
   QUALITY PAGE
   ═══════════════ */
.quality-page { padding: 5rem 0; }
.qp-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-bottom: 5rem; }
.process-timeline { padding: 5rem 0; background: var(--g-pale); }
.pt-steps { display: flex; gap: 0; margin-top: 3rem; position: relative; flex-wrap: wrap; }
.pt-steps::before { content: ''; position: absolute; top: 28px; left: 0; right: 0; height: 2px; background: var(--g-pale2); }
.pt-step { flex: 1; text-align: center; padding: 0 1rem 1.5rem; position: relative; min-width: 140px; }
.pt-num { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 3px solid var(--g-pale2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--muted); margin: 0 auto 1rem; position: relative; z-index: 1; transition: all .25s; }
.pt-num.done { background: var(--g); border-color: var(--g); color: #fff; }
.pt-ttl { font-weight: 700; font-size: 13.5px; color: var(--g-dark); margin-bottom: .4rem; }
.pt-desc { font-size: 12px; color: var(--muted); line-height: 1.65; }
.certs-showcase { padding: 5rem 0; }
.certs-big-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.cert-big-card { border: 1px solid var(--border); border-radius: var(--rl); padding: 2.5rem; display: flex; gap: 1.5rem; align-items: flex-start; transition: all .22s; }
.cert-big-card:hover { box-shadow: 0 8px 28px rgba(30,122,52,.1); transform: translateY(-3px); }
.cbc-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--g-pale); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; flex-shrink: 0; }
.cbc-name { font-family: var(--serif); font-size: 1.2rem; color: var(--g-dark); margin-bottom: .4rem; }
.cbc-body { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.cbc-status { display: inline-flex; align-items: center; gap: 5px; margin-top: .8rem; background: var(--g-pale); color: var(--g); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px; }
.cbc-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--g-light); }
.lab-sec { padding: 5rem 0; background: var(--g-deep); }
.lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.lab-features { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2rem; }
.lab-feat { display: flex; gap: 14px; align-items: flex-start; padding: 1.2rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); }
.lf-icon { font-size: 1.5rem; flex-shrink: 0; }
.lf-title { font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 3px; }
.lf-desc { font-size: 12.5px; color: rgba(255,255,255,.42); line-height: 1.6; }

/* ═══════════════════
   SUSTAINABILITY PAGE
   ═══════════════════ */
.sustain-page { padding: 5rem 0; }
.sustain-pillars { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; margin-top: 3rem; }
.sp-card { border-radius: var(--rl); padding: 2.5rem; position: relative; overflow: hidden; }
.sp-green { background: var(--g-pale); } .sp-yellow { background: var(--y-pale); }
.sp-dark { background: var(--g-deep); } .sp-white { background: var(--off); border: 1px solid var(--border); }
.sp-icon { font-size: 2.8rem; margin-bottom: 1.2rem; }
.sp-title { font-family: var(--serif); font-size: 1.25rem; color: var(--g-dark); margin-bottom: .6rem; }
.sp-dark .sp-title { color: #fff; }
.sp-desc { font-size: 13.5px; color: var(--muted); line-height: 1.72; }
.sp-dark .sp-desc { color: rgba(255,255,255,.45); }
.sp-stat { font-family: var(--serif); font-size: 2.5rem; color: var(--g); margin-top: 1rem; }
.sp-dark .sp-stat { color: var(--y-bright); }
.initiatives { padding: 5rem 0; background: var(--g-deep); }
.init-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 3rem; }
.init-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: var(--rl); padding: 2rem; transition: all .22s; }
.init-card:hover { background: rgba(255,255,255,.08); border-color: rgba(30,193,100,.3); transform: translateY(-4px); }
.init-tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--y-bright); margin-bottom: .6rem; }
.init-ttl { font-family: var(--serif); font-size: 1.1rem; color: #fff; margin-bottom: .5rem; }
.init-desc { font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.65; }
.esg-nums { padding: 5rem 0; background: linear-gradient(135deg,var(--g-pale),var(--g-pale2)); }
.esg-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 3rem; }
.esg-card { background: #fff; border-radius: var(--rl); padding: 2rem; text-align: center; border: 1px solid var(--border); transition: all .22s; }
.esg-card:hover { box-shadow: 0 8px 28px rgba(30,122,52,.1); transform: translateY(-4px); }
.esg-val { font-family: var(--serif); font-size: 2.5rem; color: var(--g); }
.esg-label { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ═══════════
   NEWS PAGE
   ═══════════ */
.news-page { padding: 4rem 0 6rem; }
.news-page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; }
.main-news-grid { display: flex; flex-direction: column; gap: 24px; }
.news-card-h { display: flex; border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; transition: all .22s; background: #fff; }
.news-card-h:hover { box-shadow: 0 8px 28px rgba(30,122,52,.1); transform: translateY(-3px); }
.nch-ph {
    width: 240px;
    min-height: 200px;     /* ensures image has height to fill on desktop */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    overflow: hidden;      /* clips image cleanly to the container */
    position: relative;
}
/* Images inside the horizontal news card thumbnail */
.nch-ph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nph1 { background: linear-gradient(135deg,var(--g-deep),var(--g-dark)); }
.nph2 { background: linear-gradient(135deg,#1a4a25,var(--g-mid)); }
.nph3 { background: linear-gradient(135deg,#5C3D00,var(--y)); }
.nph4 { background: linear-gradient(135deg,#0a2040,#1E5090); }
.nch-body { padding: 1.5rem; flex: 1; }
.nch-meta { display: flex; gap: 10px; margin-bottom: .7rem; }
.nch-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--g); background: var(--g-pale); padding: 3px 10px; border-radius: 100px; }
.nch-date { font-size: 11.5px; color: var(--muted); }
.nch-ttl { font-family: var(--serif); font-size: 1.15rem; color: var(--g-dark); margin-bottom: .5rem; }
.nch-exc { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 1rem; }
.nch-read { font-size: 13px; font-weight: 700; color: var(--g); text-decoration: none; }
.nch-read:hover { text-decoration: underline; }
.news-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-widget { background: var(--off); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.5rem; }
.sw-title { font-weight: 700; font-size: 13.5px; color: var(--g-dark); margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--border); }
.cat-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.cat-list li a { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 7px; text-decoration: none; color: var(--muted); font-size: 13px; transition: all .15s; }
.cat-list li a:hover { background: var(--g-pale); color: var(--g-dark); }
.cat-count { background: var(--g-pale2); color: var(--g); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 100px; }
.recent-list { display: flex; flex-direction: column; gap: .8rem; }
.recent-item { display: flex; gap: 10px; align-items: flex-start; }
.ri-ph { width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg,var(--g-pale2),var(--g-pale)); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; overflow: hidden; }
.ri-ttl { font-size: 12.5px; font-weight: 600; color: var(--g-dark); line-height: 1.4; }
.ri-date { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ════════════════
   CONTACT PAGE
   ════════════════ */
.contact-page { padding: 5rem 0 6rem; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: start; }
.contact-form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 2.5rem; box-shadow: 0 2px 8px rgba(30,122,52,.08); }
/* CF7 form styling */
.wpcf7-form .form-group, .wpcf7-form p { margin-bottom: 16px; }
.wpcf7 label { font-size: 13px; font-weight: 600; color: var(--g-dark); display: block; margin-bottom: 6px; }
.wpcf7 input:not([type=submit]), .wpcf7 select, .wpcf7 textarea { font-family: var(--sans); font-size: 14px; color: var(--text); border: 1.5px solid var(--border); border-radius: 8px; padding: 11px 14px; background: #fff; outline: none; transition: border-color .15s; width: 100%; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border-color: var(--g); }
.wpcf7 textarea { resize: vertical; min-height: 120px; }
.wpcf7 input[type=submit] { background: var(--g); color: #fff; padding: 15px 26px; border-radius: 8px; font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; border: none; width: 100%; transition: background .2s; }
.wpcf7 input[type=submit]:hover { background: var(--g-mid); }
/* Non-CF7 native inputs */
label { font-size: 13px; font-weight: 600; color: var(--g-dark); }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
input, select, textarea { font-family: var(--sans); font-size: 14px; color: var(--text); border: 1.5px solid var(--border); border-radius: 8px; padding: 11px 14px; background: #fff; outline: none; transition: border-color .15s; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--g); }
textarea { resize: vertical; min-height: 120px; }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.ci-card { background: var(--g-pale); border-radius: var(--rl); padding: 1.8rem; display: flex; gap: 1rem; align-items: flex-start; transition: all .22s; }
.ci-card:hover { box-shadow: 0 4px 16px rgba(30,122,52,.08); transform: translateY(-2px); }
.ci-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--g); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.ci-title { font-weight: 700; font-size: 14px; color: var(--g-dark); margin-bottom: 4px; }
.ci-body { font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.map-placeholder { height: 280px; border-radius: var(--rl); margin-top: 1.5rem; background: linear-gradient(135deg,var(--g-pale2),var(--g-pale)); border: 2px dashed rgba(30,122,52,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--g-mid); }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.hours-table td:first-child { color: var(--g-dark); font-weight: 600; }
.hours-table td:last-child { color: var(--muted); text-align: right; }

/* ══════════════════════════════════════
   CONTENT PAGE (page-content.php)
   Used for Terms, Privacy, Careers, FAQs
   and any simple editor-driven page
   ══════════════════════════════════════ */
.content-page-wrap {
    max-width: 780px;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.82;
    color: var(--text);
}
.content-page-wrap h2 {
    font-family: var(--serif);
    font-size: 1.8rem;
    color: var(--g-dark);
    margin: 2.5rem 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--g-pale);
}
.content-page-wrap h3 {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--g-dark);
    margin: 2rem 0 .7rem;
}
.content-page-wrap h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--g-dark);
    margin: 1.5rem 0 .5rem;
}
.content-page-wrap p {
    margin-bottom: 1.4rem;
    color: var(--muted);
}
.content-page-wrap ul,
.content-page-wrap ol {
    margin: 0 0 1.4rem 1.6rem;
    color: var(--muted);
}
.content-page-wrap li {
    margin-bottom: .5rem;
    line-height: 1.7;
}
.content-page-wrap a {
    color: var(--g);
    text-decoration: underline;
}
.content-page-wrap a:hover {
    color: var(--g-dark);
}
.content-page-wrap blockquote {
    border-left: 4px solid var(--g);
    padding: 1.2rem 1.5rem;
    background: var(--g-pale);
    border-radius: 0 var(--r) var(--r) 0;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--g-dark);
}
.content-page-wrap img {
    border-radius: var(--r);
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
}
.content-page-wrap table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.4rem;
    font-size: 14px;
}
.content-page-wrap table th {
    background: var(--g-pale);
    color: var(--g-dark);
    font-weight: 700;
    padding: 10px 14px;
    text-align: left;
    border: 1px solid var(--g-pale2);
}
.content-page-wrap table td {
    padding: 10px 14px;
    border: 1px solid var(--border);
    color: var(--muted);
    vertical-align: top;
}
.content-page-wrap table tr:nth-child(even) td {
    background: var(--off);
}
/* Highlight box — add class "wp-block-info" in editor or use a shortcode */
.content-page-wrap .info-box {
    background: var(--g-pale);
    border: 1px solid var(--g-pale2);
    border-radius: var(--r);
    padding: 1.4rem 1.5rem;
    margin: 1.5rem 0;
}
.content-page-wrap .warning-box {
    background: var(--y-pale);
    border: 1px solid #f0d890;
    border-radius: var(--r);
    padding: 1.4rem 1.5rem;
    margin: 1.5rem 0;
}

/* ════════════════════════════════════════════════════════
   NAMED GRID CLASSES — used in page-about.php and
   page-quality.php to replace inline style= attributes.
   Media queries can override these, unlike inline styles.
   ════════════════════════════════════════════════════════ */

/* Two-column: text | image (or image | text) */
.dng-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
/* Two-column with text first, slightly wider */
.dng-2col-wide {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: start;
}
/* Vision/Mission strip */
.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: stretch;
}
/* Governance: text | cards */
.dng-gov-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}
/* Chairman: narrow left | wide right */
.dng-chairman-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
}
/* Stats row inside chairman section */
.dng-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 2rem 0;
}
/* Brands grid (3 equal cols) */
.dng-brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
/* Processes grid: text | feature box */
.dng-processes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}
/* Quality intro: text | image */
.dng-quality-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    margin-bottom: 5rem;
}
/* Lab section: text | image */
.dng-lab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
/* Sustain grid */
.dng-sustain-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 5rem;
    align-items: center;
}

/* ════════
   FOOTER
   ════════ */
#footer { background: var(--g-deep); }
.footer-cert { background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.07); padding: 1rem 0; }
.cert-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.cert-pill { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 100px; padding: 4px 14px; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.45); }
.footer-main { padding: 5rem 0 3rem; }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 3rem; }
.f-brand-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 1.1rem; }
.f-logo-c { width: 42px; height: 42px; border-radius: 50%; background: var(--y-bright); border: 2px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.f-logo-name { font-family: var(--serif); font-size: .95rem; color: #fff; font-weight: 700; display: block; }
/* Footer logo image */
.footer-logo-img {
    height: 70px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}
/* If no separate white logo is uploaded, invert the colour logo
   to make it work on the dark green footer background */
.footer-logo-img.footer-logo-inverted {
    filter: brightness(0) invert(1);
    opacity: .85;
}
.f-logo-sub { font-size: 9px; color: rgba(255,255,255,.35); letter-spacing: .06em; text-transform: uppercase; display: block; }
.f-desc { font-size: 12.5px; color: rgba(255,255,255,.38); line-height: 1.78; max-width: 255px; margin-bottom: 1.4rem; }
.f-socials { display: flex; gap: 8px; }
.f-soc { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); font-size: 13px; text-decoration: none; transition: all .15s; font-weight: 700; }
.f-soc:hover { background: rgba(255,255,255,.14); color: #fff; }
.f-col h5 { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.8); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1rem; }
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; }
.f-col ul a { color: rgba(255,255,255,.4); text-decoration: none; font-size: 13px; transition: color .15s; }
.f-col ul a:hover { color: var(--y-bright); }
.f-contact-item { display: flex; gap: 8px; color: rgba(255,255,255,.38); font-size: 13px; margin-bottom: .55rem; line-height: 1.5; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 1.4rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,.28); }
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a { font-size: 12px; color: rgba(255,255,255,.28); text-decoration: none; }
.footer-legal a:hover { color: rgba(255,255,255,.55); }

/* Post content styles */
.dng-post-content p { margin-bottom: 1.4rem; }
.dng-post-content h2 { font-family: var(--serif); color: var(--g-dark); font-size: 1.8rem; margin: 2rem 0 1rem; }
.dng-post-content h3 { font-family: var(--serif); color: var(--g-dark); font-size: 1.4rem; margin: 1.5rem 0 .8rem; }
.dng-post-content ul, .dng-post-content ol { margin: 0 0 1.4rem 1.5rem; }
.dng-post-content li { margin-bottom: .4rem; }
.dng-post-content img { border-radius: var(--r); }
.dng-post-content blockquote { border-left: 4px solid var(--g); padding: 1rem 1.5rem; background: var(--g-pale); border-radius: 0 var(--r) var(--r) 0; margin: 1.5rem 0; font-style: italic; color: var(--g-dark); }

/* WP pagination */
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 8px 14px; border-radius: 8px; border: 1.5px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s; font-family: var(--sans); background: #fff; }
.page-numbers:hover, .page-numbers.current { background: var(--g); color: #fff; border-color: var(--g); }

/* ═══════════
   RESPONSIVE
   ═══════════ */

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   All components default to desktop layout above.
   These media queries progressively simplify layouts for smaller screens.

   Breakpoints:
     1200px — nav starts to tighten
     1060px — 4-col grids drop to 2-col
      960px — all 2-col layouts go 1-col, hamburger appears
      600px — everything 1-col, padding reduced, fonts tighten
   ══════════════════════════════════════════════════════════════════ */

/* ── 1200px: nav tightens ── */
@media (max-width: 1200px) {
    .nav-list a  { padding: 8px 9px; font-size: 13px; white-space: nowrap; }
    .nav-phone   { display: none; }
}
@media (max-width: 1080px) {
    .nav-list a  { padding: 8px 7px; font-size: 12.5px; }
}

/* ── 1060px: 4-col → 2-col ── */
@media (max-width: 1060px) {
    .team-grid   { grid-template-columns: repeat(2, 1fr); }
    .prod-grid   { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* ── 960px: hamburger, all 2-col → 1-col ── */
@media (max-width: 960px) {

    /* Nav */
    .nav-menu                { display: none; }
    .nav-hamburger           { display: flex; }
    .nav-actions .btn-g      { display: none; } /* hide Get In Touch, phone already hidden */
    .nav-actions .nav-phone  { display: none; }

    /* Hero: single column, full-width */
    .hero                    { grid-template-columns: 1fr; min-height: auto; padding-top: 78px; }
    .hero-right              { display: none; }
    .hero-left               { padding: 4rem 2rem 3rem; }

    /* All named 2-col grids → 1-col */
    .dng-2col,
    .dng-2col-wide,
    .vm-grid,
    .dng-gov-grid,
    .dng-processes-grid,
    .dng-quality-intro,
    .dng-lab-grid,
    .dng-sustain-grid        { grid-template-columns: 1fr; gap: 2.5rem; }

    /* Chairman: narrow photo col no longer makes sense */
    .dng-chairman-grid       { grid-template-columns: 1fr; gap: 2.5rem; }
    .dng-stats-row           { grid-template-columns: repeat(3, 1fr); } /* keep 3-col */

    /* Brands: 3-col → 1-col */
    .dng-brands-grid         { grid-template-columns: 1fr; }

    /* Home grids */
    .home-about-grid         { grid-template-columns: 1fr; gap: 3rem; }
    .story-grid              { grid-template-columns: 1fr; gap: 2.5rem; }
    .story-grid.reverse      { direction: ltr; }
    .story-grid.reverse > *  { direction: ltr; }
    .qs-grid                 { grid-template-columns: 1fr; gap: 3rem; }
    .qp-intro                { grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3rem; }
    .lab-grid                { grid-template-columns: 1fr; gap: 3rem; }
    .contact-grid            { grid-template-columns: 1fr; }
    .news-page-grid          { grid-template-columns: 1fr; }

    /* 3-col → 1-col */
    .div-grid                { grid-template-columns: 1fr; }
    .values-grid             { grid-template-columns: 1fr 1fr; }
    .testi-grid              { grid-template-columns: 1fr; }
    .init-grid               { grid-template-columns: 1fr; }
    .careers-why-grid        { grid-template-columns: 1fr 1fr; }

    /* 4-col → 2-col */
    .prod-full-grid          { grid-template-columns: 1fr 1fr; }
    .nums-grid               { grid-template-columns: 1fr 1fr; }
    .esg-grid                { grid-template-columns: 1fr 1fr; }
    .num-cell                { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
    .num-cell:last-child     { border: none; }

    /* News */
    .news-grid               { grid-template-columns: 1fr; }
    .news-card-h             { flex-direction: column; }
    .nch-ph                  { width: 100%; min-height: 220px; }
    .nch-ph img              { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

    /* About page float card — can't be absolute on mobile */
    .about-float             { position: static; display: block; margin-top: 1.5rem; }

    /* Certs big grid */
    .certs-big-grid          { grid-template-columns: 1fr; }
    .sustain-pillars         { grid-template-columns: 1fr; }

    /* Order / Careers */
    .order-layout            { grid-template-columns: 1fr; }
    .order-info-col          { order: 2; }
    .order-form-col          { order: 1; }
    .careers-apply-layout    { grid-template-columns: 1fr; }

    /* Quality process timeline — wrap vertically */
    .pt-steps                { flex-direction: column; align-items: stretch; }
    .pt-steps::before        { display: none; }
    .pt-step                 { display: flex; gap: 1rem; align-items: flex-start; text-align: left; padding: 0 0 1.2rem; min-width: unset; flex: unset; }
    .pt-num                  { flex-shrink: 0; margin: 0; }

    /* Cert showcase */
    .cert-cards              { grid-template-columns: 1fr 1fr; }
}

/* ── 600px: everything 1-col, reduced padding ── */
@media (max-width: 600px) {

    /* Tighter container */
    .container               { padding: 0 1.25rem; }
    .section                 { padding: 3.5rem 0; }
    .section-sm              { padding: 2.5rem 0; }

    /* Hero */
    .hero-left               { padding: 3rem 1.25rem 2.5rem; }
    .hero-trust              { flex-wrap: wrap; gap: 1rem; }
    .trust-div               { display: none; }

    /* All remaining multi-col → 1-col */
    .values-grid,
    .team-grid,
    .prod-grid,
    .prod-full-grid,
    .careers-why-grid,
    .esg-grid,
    .cert-cards              { grid-template-columns: 1fr; }

    /* Numbers: keep 2-col on phones — still reads well */
    .nums-grid               { grid-template-columns: 1fr 1fr; }
    .num-cell                { padding: 1.8rem .75rem; }

    /* Stats row in chairman section */
    .dng-stats-row           { grid-template-columns: 1fr 1fr; gap: 12px; }

    /* Footer → 1-col, centered on mobile */
    .footer-grid             { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom           { flex-direction: column; align-items: center; text-align: center; }
    .footer-legal            { justify-content: center; flex-wrap: wrap; }
    /* Centre all footer column content on mobile */
    .footer-grid > div,
    .footer-grid .f-col      { text-align: center; }
    .f-brand-logo            { justify-content: center; }
    .f-desc                  { margin-left: auto; margin-right: auto; }
    .f-socials               { justify-content: center; }
    .f-col ul                { align-items: center; }
    .f-contact-item          { justify-content: center; }
    .footer-grid .btn        { width: 100%; justify-content: center; }

    /* Page heroes */
    .page-hero-sm            { padding: 3.5rem 0 2.5rem; }
    .page-hero-sm h1         { font-size: 1.8rem; }

    /* About page */
    .milestones .milestone-list::before { left: 60px; }
    .m-year                  { font-size: 1.2rem; min-width: 55px; }
    .milestone-item          { gap: 1rem; }

    /* Forms */
    .order-form-card         { padding: 1.5rem; }
    .order-form-card .order-field-row { grid-template-columns: 1fr; }
    .contact-form-card       { padding: 1.5rem; }
    .contact-grid            { gap: 2rem; }

    /* Careers */
    .career-card-header      { flex-direction: column; align-items: flex-start; }
    .career-toggle           { width: 100%; justify-content: center; }

    /* Cert big cards — stack icon above text */
    .cert-big-card           { flex-direction: column; gap: 1rem; }

    /* Buttons — slightly smaller on phones */
    .btn                     { font-size: 13px; padding: 12px 20px; }
    .btn-sm                  { padding: 9px 16px; font-size: 12px; }

    /* Nav phone visible on smallest screens since we hide the Get In Touch btn */
    .nav-actions .nav-phone  { display: flex; font-size: 11px; }

    /* Admin bar fix for 782px */
    .admin-bar .nav-mobile-drawer { top: calc(78px + 46px); height: calc(100vh - 78px - 46px); }
}

/* ══ ABOUT PAGE — Additional responsive helpers ══ */

/* MD portrait photo: floats right on desktop, stacks on mobile */
.md-portrait-img {
    float: right;
    width: 180px;
    height: 220px;
    object-fit: cover;
    border-radius: var(--r);
    margin: 0 0 1.5rem 2rem;
    display: block;
}
@media (max-width: 600px) {
    .md-portrait-img {
        float: none;
        width: 100%;
        height: 220px;
        margin: 0 0 1.5rem 0;
        border-radius: var(--r);
    }
}

/* story-grid already has 1fr 1fr columns — make it respond */
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.story-grid.reverse      { direction: rtl; }
.story-grid.reverse > *  { direction: ltr; }

@media (max-width: 960px) {
    .story-grid,
    .story-grid.reverse  { grid-template-columns: 1fr; gap: 2.5rem; direction: ltr; }
    .story-grid.reverse > * { direction: ltr; }
}

/* Ensure all images in about page grids are responsive */
.dng-2col img,
.dng-2col-wide img,
.dng-chairman-grid img,
.dng-processes-grid img,
.dng-gov-grid img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--rl);
    object-fit: cover;
    width: 100%;
}

/* Fix: ph (placeholder) divs also need to be full-width in grids */
.dng-2col .ph,
.dng-chairman-grid .ph,
.dng-processes-grid .ph,
.dng-gov-grid .ph {
    width: 100%;
    min-height: 300px;
}

/* Prevent any remaining inline 1fr 1fr grids from squishing */
@media (max-width: 960px) {
    /* Catch-all for any remaining inline grid styles that use 1fr 1fr */
    .about-story [style*="grid-template-columns"],
    .values-sec  [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* Single post: main content | sidebar */
.dng-single-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 960px) {
    .dng-single-layout { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   ORDER PAGE  (page-order.php)
   ════════════════════════════════════════════ */
.order-page-section { padding: 5rem 0 6rem; }
.order-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 3rem;
    align-items: start;
}
.order-form-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 2.5rem;
    box-shadow: 0 2px 12px rgba(30,122,52,.06);
}
.order-form-placeholder {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--off);
    border-radius: var(--r);
    border: 2px dashed var(--border);
}
/* CF7 inside order card */
.order-form-card .wpcf7-form p,
.order-form-card .wpcf7-form div { margin-bottom: 1rem; }
.order-form-card label { display: block; font-size: 13px; font-weight: 600; color: var(--g-dark); margin-bottom: 6px; }
.order-form-card input:not([type=submit]),
.order-form-card select,
.order-form-card textarea { font-family: var(--sans); font-size: 14px; color: var(--text); border: 1.5px solid var(--border); border-radius: 8px; padding: 11px 14px; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; }
.order-form-card input:focus,
.order-form-card select:focus,
.order-form-card textarea:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(30,122,52,.08); }
.order-form-card textarea { resize: vertical; min-height: 130px; }
.order-form-card input[type=submit],
.order-form-card .wpcf7-submit { width: 100%; background: var(--g); color: #fff; font-family: var(--sans); font-size: 15px; font-weight: 700; padding: 15px 26px; border: none; border-radius: 8px; cursor: pointer; transition: background .2s, transform .2s; margin-top: .5rem; }
.order-form-card input[type=submit]:hover,
.order-form-card .wpcf7-submit:hover { background: var(--g-mid); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30,122,52,.25); }
.order-form-card .wpcf7-not-valid-tip { font-size: 12px; color: #c0392b; margin-top: 4px; display: block; }
.order-form-card .wpcf7-response-output { border-radius: 8px; padding: 12px 16px; font-size: 13.5px; margin-top: 1rem; border: 1px solid transparent; }
.order-form-card .wpcf7-mail-sent-ok { background: var(--g-pale); border-color: var(--g-pale2); color: var(--g-dark); }
.order-form-card .wpcf7-mail-sent-ng,
.order-form-card .wpcf7-aborted { background: #fdf2f2; border-color: #f5c6c6; color: #922; }
.order-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Sidebar */
.order-info-col { display: flex; flex-direction: column; gap: 1.25rem; }
.order-info-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 1.8rem; }
.order-contact-card { background: var(--g-dark); border-color: transparent; }
.order-pale-card { background: var(--g-pale); border-color: var(--g-pale2); }
.order-dist-card { border: 1px solid var(--border); }
.order-info-title { font-family: var(--serif); font-size: 1.15rem; color: var(--g-dark); margin-bottom: 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--border); }
.order-contact-card .order-info-title { color: #fff; border-bottom-color: rgba(255,255,255,.12); }
.order-full-btn { width: 100%; justify-content: center; display: flex; }
.order-hours { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.55); }
.order-hours-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); margin-bottom: .5rem; }
.order-dist-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--y-dark); margin-bottom: .6rem; }
.order-email-link { font-size: 13px; font-weight: 700; color: var(--g); text-decoration: none; }
.order-email-link:hover { text-decoration: underline; }
.order-why-list { display: flex; flex-direction: column; gap: .9rem; }
.order-why-item { display: flex; gap: 12px; align-items: flex-start; }
.owi-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--g-pale); color: var(--g); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.owi-text { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.owi-text strong { display: block; font-size: 13.5px; color: var(--g-dark); margin-bottom: 2px; }

/* ════════════════════════════════════════════
   PRESS / AS SEEN IN PAGE  (page-press.php)
   ════════════════════════════════════════════ */

/* Stats strip */
.press-stats-strip { background: var(--off); border-bottom: 1px solid var(--border); padding: 1.5rem 0; }
.press-stats-row { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; justify-content: space-between; }
.press-stat { text-align: center; }
.press-stat-num { font-family: var(--serif); font-size: 2rem; color: var(--g); line-height: 1; }
.press-stat-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }
.press-contact-cta { text-align: right; }

/* Logos strip */
.press-logos-strip { background: #fff; border-bottom: 1px solid var(--border); padding: 2rem 0; }
.press-logos-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 1.2rem; text-align: center; }
.press-logos-row { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; }
.press-logo-item { display: flex; align-items: center; justify-content: center; height: 44px; }
.press-logo-item img { height: 36px; width: auto; max-width: 120px; object-fit: contain; opacity: .6; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.press-logo-item img:hover { opacity: 1; filter: none; }

/* Timeline section */
.press-timeline-section {}
.press-filter-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 3rem; }
.press-filter-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* Year groups */
.press-year-group { margin-bottom: 3.5rem; }
.press-year-label {
    font-family: var(--serif);
    font-size: 1.8rem;
    color: var(--g-dark);
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 3px solid var(--g-pale);
    display: flex;
    align-items: center;
    gap: .75rem;
}
.press-year-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex-shrink: 0; }

/* Cards grid */
.press-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Individual press card */
.press-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--rl);
    overflow: hidden;
    transition: box-shadow .22s, transform .22s;
    display: flex;
    flex-direction: column;
}
.press-card:hover { box-shadow: 0 8px 28px rgba(30,122,52,.12); transform: translateY(-4px); }

/* Card thumbnail area */
.press-card-thumb {
    height: 180px;
    position: relative;
    overflow: hidden;
    background: var(--g-pale);
    display: flex;
    align-items: center;
    justify-content: center;
}
.press-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.press-logo-thumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--off); }
.press-logo-thumb img { max-width: 160px; max-height: 80px; object-fit: contain; }
.press-thumb-placeholder { display: flex; align-items: center; justify-content: center; font-size: 3.5rem; opacity: .3; width: 100%; height: 100%; }

/* Media type badge */
.press-type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    letter-spacing: .05em;
}
.type-print  { background: var(--g-pale);   color: var(--g-dark); }
.type-online { background: #e8f4fd;          color: #1a5a8a; }
.type-tv     { background: var(--y-pale);    color: var(--y-dark); }
.type-radio  { background: #f5ebf7;          color: #6b2e8a; }

/* Card body */
.press-card-body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.press-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: .6rem; flex-wrap: wrap; }
.press-outlet { font-size: 11.5px; font-weight: 700; color: var(--g); text-transform: uppercase; letter-spacing: .05em; }
.press-date { font-size: 11.5px; color: var(--muted); }
.press-headline { font-family: var(--serif); font-size: 1rem; color: var(--g-dark); line-height: 1.4; margin-bottom: .6rem; }
.press-excerpt { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 1rem; flex: 1; }
.press-read-link { font-size: 13px; font-weight: 700; color: var(--g); text-decoration: none; margin-top: auto; display: inline-flex; align-items: center; gap: 4px; }
.press-read-link:hover { text-decoration: underline; }

/* Empty state */
.press-empty { text-align: center; padding: 5rem 2rem; background: var(--g-pale); border-radius: var(--rl); }

/* CTA band */
.press-cta-band { background: var(--g-deep); padding: 5rem 0; }
.press-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.press-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

/* Responsive */
@media (max-width: 960px) {
    .press-cards-grid  { grid-template-columns: 1fr 1fr; }
    .press-cta-inner   { flex-direction: column; align-items: flex-start; }
    .press-stats-row   { gap: 1.5rem; justify-content: flex-start; }
    .press-contact-cta { text-align: left; }
}
@media (max-width: 600px) {
    .press-cards-grid  { grid-template-columns: 1fr; }
    .press-filter-row  { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .press-stats-row   { justify-content: space-between; }
    .order-layout      { grid-template-columns: 1fr; }
    .order-field-row   { grid-template-columns: 1fr; }
    .order-form-card   { padding: 1.5rem; }
}

/* ══ PRESS REPEATER ENTRIES — collapsible in WP admin ══
   These styles target the ACF repeater rows in wp-admin
   to make each entry collapse/expand via a toggle.
   The JS to drive it is loaded only in wp-admin context
   via functions.php admin_enqueue_scripts hook.          */

/* Front-end: press card expand/collapse on click (mobile) */
@media (max-width: 600px) {
    .press-card .press-card-body { display: none; }
    .press-card.expanded .press-card-body { display: flex; }
    .press-card-thumb { cursor: pointer; }
    .press-card-thumb::after {
        content: '▼ tap to read';
        position: absolute;
        bottom: 8px;
        right: 10px;
        font-size: 10px;
        font-weight: 700;
        color: rgba(255,255,255,.8);
        background: rgba(0,0,0,.4);
        padding: 3px 8px;
        border-radius: 100px;
        letter-spacing: .04em;
    }
    .press-card.expanded .press-card-thumb::after { content: '▲ close'; }
    /* Show body when card has no thumbnail (always expand) */
    .press-card .press-thumb-placeholder ~ * { display: flex; }
}

/* ════════════════════════════════════════════════════════════════
   PRODUCTS PAGE — Hierarchical pharmaceutical category layout
   ════════════════════════════════════════════════════════════════ */

/* Pharmaceutical parent heading block */
.product-parent-head {
    margin: 3rem 0 1.5rem;
    padding: 2rem 2.5rem;
    background: var(--g-deep);
    border-radius: var(--rl);
    border-left: 4px solid var(--y-bright);
}
.pph-title {
    font-family: var(--serif);
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: .4rem;
}
.pph-title span { color: var(--y-bright); }
.pph-desc { font-size: 13.5px; color: rgba(255,255,255,.5); margin: 0; line-height: 1.7; }

/* Sub-category filter bar (Pharma only) */
.prod-sub-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 1.5rem 0 2.5rem;
    padding: 1rem 1.25rem;
    background: var(--g-pale);
    border-radius: var(--r);
    border: 1px solid var(--g-pale2);
}
.psf-btn {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid var(--g-pale2);
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    font-family: var(--sans);
    transition: all .15s;
    white-space: nowrap;
}
.psf-btn.on,
.psf-btn:hover { background: var(--g); color: #fff; border-color: var(--g); }

/* Section block wrapper */
.product-section-block { margin-bottom: 3.5rem; }

/* Section heading — sub-category level */
.product-section-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--g-pale);
    flex-wrap: wrap;
}
.psh-icon { font-size: 1.5rem; flex-shrink: 0; }
.psh-title { font-family: var(--serif); font-size: 1.4rem; color: var(--g-dark); margin: 0; }
.psh-desc { font-size: 13px; color: var(--muted); margin: .3rem 0 0; width: 100%; }

/* NAFDAC number on product card */
.pcl-nafdac {
    font-size: 10.5px;
    color: var(--muted);
    display: block;
    margin-top: 2px;
    font-weight: 500;
}
.pcl-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}

/* Responsive */
@media (max-width: 960px) {
    .product-parent-head { padding: 1.5rem; }
    .prod-sub-filter-bar  { gap: 4px; }
    .psf-btn              { font-size: 11.5px; padding: 5px 12px; }
}
@media (max-width: 600px) {
    .product-parent-head  { border-radius: var(--r); }
    .pph-title            { font-size: 1.25rem; }
    .prod-sub-filter-bar  { padding: .75rem 1rem; }
    .product-section-head { gap: .6rem; }
}

/* ════════════════════════════════════════════════════════════════
   PRODUCTS PAGE — Pharmaceutical categories mobile fixes
   Add this after the existing @media (max-width: 600px) block
   at the bottom of dng-style.css
   ════════════════════════════════════════════════════════════════ */

/* ── 768px: sub-filter becomes horizontally scrollable ── */
@media (max-width: 768px) {
    /* Parent heading — reduce padding, tighten text */
    .product-parent-head {
        margin: 2rem 0 1.2rem;
        padding: 1.25rem 1.25rem 1.25rem 1rem;
        border-left-width: 3px;
    }
    .pph-title { font-size: 1.15rem; line-height: 1.3; }
    .pph-desc  { font-size: 12.5px; }

    /* Sub-filter bar — horizontal scroll instead of wrapping */
    .prod-sub-filter-bar {
        flex-wrap: nowrap;           /* keep buttons in a single row  */
        overflow-x: auto;           /* allow horizontal scroll        */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;      /* hide scrollbar on Firefox      */
        padding: .75rem 1rem;
        gap: 6px;
        /* fade hint at the right edge so user knows it scrolls */
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image:         linear-gradient(to right, black 85%, transparent 100%);
    }
    .prod-sub-filter-bar::-webkit-scrollbar { display: none; }

    /* Buttons — allow natural width, no wrapping */
    .psf-btn {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 11.5px;
        padding: 7px 14px;
    }

    /* Top-level filter bar — same horizontal scroll treatment */
    .prod-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .5rem;
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image:         linear-gradient(to right, black 85%, transparent 100%);
    }
    .prod-filter-bar::-webkit-scrollbar { display: none; }
    .prod-filter-bar .pf-btn { flex-shrink: 0; white-space: nowrap; }
}

/* ── 600px: single column, tighter spacing ── */
@media (max-width: 600px) {
    /* Product grid — 1 column on phones */
    .product-section-block .prod-full-grid { grid-template-columns: 1fr; }

    /* Section heading — stack icon and title vertically */
    .product-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
        margin: 2rem 0 1.2rem;
        padding-bottom: .75rem;
    }
    .psh-icon  { font-size: 1.3rem; }
    .psh-title { font-size: 1.2rem; }
    .psh-desc  { font-size: 12px; }

    /* Section block — reduce bottom gap */
    .product-section-block { margin-bottom: 2.5rem; }

    /* Product card — tighten body padding */
    .product-section-block .pcl-body { padding: 1rem 1.1rem 1.3rem; }
    .product-section-block .pcl-ph   { height: 200px; }

    /* NAFDAC + pack on same row */
    .product-section-block .pcl-footer > div {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    .pcl-nafdac { margin-top: 0; }
}