/* =====================================================================
   1514 — Coffee Industry page (/coffee). rp-UI. Bespoke full layout that
   doubles as the template guide for future industry pages.
   Loaded by information/industry controller when the coffee template renders.
   ===================================================================== */
.rp-cof {
  --red:#db0f16; --red-dark:#b50c12; --ink:#1c1c1c; --muted:#5c5757;
  --line:#e6e3de; --cream:#f5f0e9; --warm:#faf8f4; --dark:#1c1a19; --dark-2:#262220; --green:#1a8a3c;
  font-family:'Outfit',sans-serif; color:var(--ink);
}
.rp-cof * { box-sizing:border-box; }
.rp-cof p { margin:0; }

/* Bootstrap's .container adds ::before/::after clearfix pseudo-elements; when .container is ALSO the
   CSS grid (as on these two-column sections) they become stray grid items and mis-place the columns.
   Suppress them so the grid children land in the right cells. */
.rp-cof-problem__grid::before, .rp-cof-problem__grid::after,
.rp-cof-why__grid::before, .rp-cof-why__grid::after,
.rp-cof-recyc__grid::before, .rp-cof-recyc__grid::after { content:none; }

/* shared bits */
.rp-cof-eyebrow { display:block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0 0 14px; }
.rp-cof-eyebrow--light { color:rgba(255,255,255,.7); }
.rp-cof-h2 { margin:0 0 14px; font-size:clamp(26px,3.2vw,40px); font-weight:800; line-height:1.08; letter-spacing:-.02em; color:var(--ink); }
.rp-cof-lede { margin:0 0 30px; font-size:16px; line-height:1.6; color:var(--muted); max-width:62ch; }

/* buttons */
.rp-cof-btn { display:inline-flex; align-items:center; justify-content:center; text-align:center; font-family:inherit;
  font-size:15px; font-weight:700; text-decoration:none; padding:14px 26px; border-radius:9px; border:2px solid transparent;
  cursor:pointer; transition:transform .12s ease, background .15s, color .15s, border-color .15s; }
.rp-cof-btn:hover { transform:translateY(-1px); }
.rp-cof-btn--solid   { background:var(--red); color:#fff; border-color:var(--red); }
.rp-cof-btn--solid:hover { background:var(--red-dark); border-color:var(--red-dark); color:#fff; }
.rp-cof-btn--outline { background:transparent; color:var(--red); border-color:var(--red); }
.rp-cof-btn--outline:hover { background:var(--red); color:#fff; }
.rp-cof-btn--dark    { background:var(--ink); color:#fff; border-color:var(--ink); }
.rp-cof-btn--dark:hover { background:#000; border-color:#000; color:#fff; }
.rp-cof-btn--white   { background:#fff; color:var(--ink); border-color:#fff; }
.rp-cof-btn--white:hover { background:#f0eadf; border-color:#f0eadf; }
.rp-cof-btn--ghost   { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.rp-cof-btn--ghost:hover { background:#fff; color:var(--ink); border-color:#fff; }

/* ===== HERO ===== */
.rp-cof-hero { background:var(--cream); padding:64px 0 58px; }
/* 1540 — hero: copy left, image right */
.rp-cof-hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; }
.rp-cof-hero__grid::before, .rp-cof-hero__grid::after { content:none; }
.rp-cof-hero__media img { width:100%; height:auto; display:block; border-radius:16px; object-fit:cover; box-shadow:0 20px 44px rgba(28,26,25,.14); }
.rp-cof-hero__eyebrow { display:block; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0 0 18px; }
.rp-cof-hero__title { margin:0; font-size:clamp(34px,5vw,58px); font-weight:800; line-height:1.04; letter-spacing:-.02em; color:var(--ink); max-width:20ch; }
.rp-cof-hero__intro { margin:22px 0 0; font-size:17px; line-height:1.6; color:var(--muted); max-width:64ch; }
.rp-cof-hero__tag { margin:18px 0 0; font-size:16px; color:var(--ink); }
/* 1568 — hero RTE: lead intro, then CONSISTENT size + spacing for every paragraph after it
   (the industry docs add multiple paragraphs; a plain <p> otherwise fell back to the global 12px). */
.rp-cof-hero__rte { margin-top:22px; }
.rp-cof-hero__rte p { margin:0 0 14px; font-size:16px; line-height:1.6; color:var(--ink); }
.rp-cof-hero__rte p:last-child { margin-bottom:0; }
.rp-cof-hero__rte p.rp-cof-hero__intro { margin:0 0 14px; font-size:18px; color:var(--muted); }
/* 1742/1743 — industry hero only: every hero paragraph at 18px AND colour --muted (match the intro,
   which was already 18px/--muted; the follow-on paragraphs were 16px/--ink). :not(.rp-about) keeps
   the About page's hero untouched. */
.rp-cof:not(.rp-about) .rp-cof-hero__rte p { font-size:18px; color:var(--muted); }
.rp-cof-hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 0; }

/* 1554 — page-builder rich-text areas: consistent brand diamond bullets everywhere */
.rp-cof-rte ul { list-style:none; margin:0 0 16px; padding:0; }
.rp-cof-rte ul li { position:relative; padding:0 0 10px 22px; font-size:15.5px; line-height:1.6; color:var(--ink); }
.rp-cof-rte ul li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px; background:var(--red); transform:rotate(45deg); }
.rp-cof-rte > :last-child { margin-bottom:0; }
/* dark route panels: light list text; red "print" panel keeps black diamonds */
.rp-cof-panel .rp-cof-rte ul li { color:rgba(255,255,255,.85); }
.rp-cof-panel--print .rp-cof-rte ul li::before { background:var(--ink); }

/* ===== 01 PROBLEM ===== */
.rp-cof-problem { background:#fff; padding:62px 0; }
/* 1540 — added a supporting image on the left */
.rp-cof-problem__grid { display:grid; grid-template-columns:.85fr 1.35fr .9fr; gap:40px; align-items:start; }
.rp-cof-problem__media img { width:100%; height:auto; display:block; border-radius:14px; }
.rp-cof-problem__copy p { margin:0 0 14px; font-size:16px; line-height:1.65; color:var(--muted); }
.rp-cof-problem__copy p:first-of-type { color:var(--ink); font-size:17.5px; }
/* 1738/1739 — industry pages only: all problem paragraphs consistent size + colour
   (:not(.rp-about) keeps About's lead style). 1739 drops 17.5px → 16px to match the About page's body. */
.rp-cof:not(.rp-about) .rp-cof-problem__copy p { font-size:16px; color:var(--ink); }
/* 1548 — feature bullet list (light background) */
.rp-cof-problem__list { list-style:none; margin:6px 0 0; padding:0; }
.rp-cof-problem__list li { position:relative; padding:0 0 10px 22px; font-size:15.5px; line-height:1.6; color:var(--ink); }
.rp-cof-problem__list li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px; background:var(--red); transform:rotate(45deg); }
/* 1744 — problem copy: separate the bullet list (2nd .rp-cof-rte block, e.g. prob_bullets) from the
   paragraphs above it. The last paragraph's bottom margin is zeroed by `.rp-cof-rte > :last-child`, so
   the two rte blocks sat flush (0px gap); add a gap before the list block. */
.rp-cof-problem__copy .rp-cof-rte + .rp-cof-rte { margin-top:18px; }
.rp-cof-prompt { background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:28px 26px; }
.rp-cof-prompt__label { display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:0 0 12px; }
.rp-cof-prompt__lead { margin:0 0 10px; font-size:19px; font-weight:700; line-height:1.3; color:var(--ink); }
.rp-cof-prompt__text { margin:0 0 20px; font-size:14.5px; line-height:1.55; color:var(--muted); }
.rp-cof-prompt .rp-cof-btn { margin-top:12px; }

/* ===== 02 FORMATS ===== */
.rp-cof-formats { background:var(--warm); padding:62px 0; }
.rp-cof-fgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.rp-cof-fgrid--5 { grid-template-columns:repeat(5,1fr); }   /* industries with 5 formats */
.rp-cof-fcard { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rp-cof-fcard:hover { transform:translateY(-4px); box-shadow:0 16px 32px rgba(28,28,28,.10); border-color:#dcd7cf; }
.rp-cof-fcard__media { display:block; aspect-ratio:4/3; background:#efeae1; overflow:hidden; }
.rp-cof-fcard__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.rp-cof-fcard:hover .rp-cof-fcard__media img { transform:scale(1.05); }
.rp-cof-fcard__no { display:block; font-size:12px; font-weight:700; color:var(--muted); padding:16px 18px 0; }
.rp-cof-fcard__name { display:block; font-size:17px; font-weight:800; line-height:1.2; color:var(--ink); padding:16px 18px 0; }
.rp-cof-fcard__desc { display:block; font-size:13.5px; line-height:1.5; color:var(--muted); padding:8px 18px 14px; flex:1 1 auto; }
.rp-cof-fcard__link { display:block; font-size:13.5px; font-weight:700; color:var(--red); padding:0 18px 18px; border-top:1px solid var(--line); margin-top:4px; padding-top:14px; }
.rp-cof-formats__note { margin:22px 0 0; font-size:13.5px; color:var(--muted); font-style:italic; }

/* ===== 03 TWO ROUTES (dark) ===== */
/* 1540 — full-section coffee background, faded (not too faded) under a dark tint; panels equal height */
.rp-cof-routes { color:#fff; padding:62px 0;
  background:linear-gradient(rgba(26,26,25,.80), rgba(26,26,25,.82)), url('/image/catalog/coffee/coffee-background.jpg') center center / cover no-repeat;
  background-color:var(--dark); }
.rp-cof-routes__title { margin:0 0 34px; font-size:clamp(26px,3.4vw,42px); font-weight:800; line-height:1.06; letter-spacing:-.02em; color:#fff; max-width:26ch; }
.rp-cof-routes__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.rp-cof-panel { background:var(--dark-2); border:1.5px solid var(--green); border-radius:16px; padding:32px 30px; }
/* 1548 — print panel: full brand-red gradient; previously-red elements become brand black */
.rp-cof-panel--print { background:linear-gradient(160deg,var(--red),var(--red-dark)); border-color:rgba(0,0,0,.28); }
.rp-cof-panel__tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:5px 12px; margin:0 0 16px; }
.rp-cof-panel__tag--print { color:#ff6a6f; border-color:rgba(219,15,22,.55); }
/* 1548 — "In stock only" tag in brand green */
.rp-cof-panel__tag--stock { color:#fff; background:var(--green); border-color:var(--green); }
/* 1557 — "Ready-Made" pill: green outline only, no fill */
.rp-cof-panel__tag--ready { color:var(--green); background:transparent; border-color:var(--green); }
/* within the red print panel, swap the previously-red accents to brand black */
.rp-cof-panel--print .rp-cof-panel__tag--print { color:var(--ink); border-color:rgba(0,0,0,.45); }
.rp-cof-panel--print .rp-cof-list li::before { background:var(--ink); }
.rp-cof-panel--print .rp-cof-btn--solid { background:var(--ink); border-color:var(--ink); color:#fff; }
.rp-cof-panel--print .rp-cof-btn--solid:hover { background:#000; border-color:#000; color:#fff; }
.rp-cof-panel__title { margin:0 0 14px; font-size:24px; font-weight:800; color:#fff; }
.rp-cof-panel p { margin:0 0 14px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.82); }
.rp-cof-pills { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 14px; }
.rp-cof-pill { display:inline-flex; align-items:center; font-size:13.5px; font-weight:700; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:9px 16px; transition:background .15s, color .15s, border-color .15s; }
.rp-cof-pill:hover { background:#fff; color:var(--ink); border-color:#fff; }
/* 1562 — pill with a product image above the label: white card, black text (image sits on white) */
.rp-cof-pill--img { flex-direction:column; align-items:stretch; text-align:center; gap:8px;
  width:150px; padding:12px 12px 11px; border-radius:14px; background:#fff; color:var(--ink); border-color:#fff; }
.rp-cof-pill--img:hover { background:#fff; color:var(--ink); border-color:#fff; box-shadow:0 10px 22px rgba(0,0,0,.18); }
.rp-cof-pill__img { display:block; width:100%; height:120px; object-fit:contain; }
.rp-cof-pill--img .rp-cof-pill__label { font-size:13px; font-weight:700; line-height:1.25; }
.rp-cof-panel__note { font-size:13px !important; font-style:italic; color:rgba(255,255,255,.6) !important; margin:6px 0 0 !important; }
.rp-cof-cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:18px 0 24px; }
.rp-cof-cols__h { display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75); margin:0 0 10px; }
.rp-cof-list { list-style:none; margin:0; padding:0; }
.rp-cof-list li { position:relative; padding:0 0 10px 20px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.85); }
.rp-cof-list li::before { content:""; position:absolute; left:0; top:7px; width:8px; height:8px; background:var(--red); transform:rotate(45deg); }

/* ===== 04 RECYCLABILITY ===== */
.rp-cof-recyc { background:var(--cream); padding:62px 0; }
/* 1542 — added an image on the right of the copy */
.rp-cof-recyc__grid { display:grid; grid-template-columns:auto 1.5fr .9fr; gap:30px; align-items:start; }
.rp-cof-recyc__media img { width:100%; height:auto; display:block; border-radius:14px; }
.rp-cof-recyc__icon { flex:0 0 auto; width:64px; height:64px; border-radius:50%; background:#fff; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--ink); }
.rp-cof-recyc__icon svg { width:30px; height:30px; }
.rp-cof-recyc__icon .fa { font-size:30px; line-height:1; } /* 1549 — FA recycle icon */
.rp-cof-recyc__copy p { margin:0 0 14px; font-size:15.5px; line-height:1.6; color:var(--muted); }
/* 1549 — OPRL recycling label; 1550 — float left so the first paragraph sits beside it,
   with the blockquote (and the rest) clearing below (see .rp-cof-quote) */
.rp-cof-recyc__oprl { float:left; width:112px; height:auto; margin:2px 22px 10px 0; }
.rp-cof-quote { overflow:hidden; margin:4px 0 16px; padding:18px 22px; background:#fff; border:0; border-left:0; border-radius:8px; font-size:15px; line-height:1.55; color:var(--ink); font-style:italic; }
.rp-cof-quote__lbl { display:block; font-style:normal; font-weight:700; font-size:12.5px; letter-spacing:.02em; color:var(--muted); margin:0 0 6px; }
.rp-cof-recyc__qual { font-size:13px !important; color:var(--muted) !important; }
.rp-cof-recyc__copy .rp-cof-btn { margin-top:6px; }

/* ===== 05 WHY RIGHTPAK ===== */
.rp-cof-why { background:#fff; padding:62px 0; }
.rp-cof-why__grid { display:grid; grid-template-columns:1fr 1.2fr; gap:46px; align-items:start; }
.rp-cof-why__copy p { margin:0; font-size:16px; line-height:1.65; color:var(--muted); }
.rp-cof-points { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
.rp-cof-points li { position:relative; padding:16px 2px 16px 22px; border-top:1px solid var(--line); font-size:14.5px; line-height:1.45; color:var(--ink); }
.rp-cof-points li::before { content:""; position:absolute; left:2px; top:23px; width:8px; height:8px; border-radius:50%; background:var(--red); }

/* ===== 06 FAQ (uses shared .rp-acc) ===== */
.rp-cof-faq { background:var(--warm); padding:62px 0; }
/* 1547 — single full-width stack (was a 3-column grid) */
.rp-cof-faq .rp-acc { max-width:none; grid-template-columns:1fr; margin-top:8px; }

/* ===== CLOSING CTA ===== */
.rp-cof-cta { background:linear-gradient(150deg,#e11b1f,#b30f14); color:#fff; padding:60px 0; text-align:center; }
.rp-cof-cta__title { margin:0 0 12px; font-size:clamp(26px,3vw,38px); font-weight:800; color:#fff; }
.rp-cof-cta__text { margin:0 auto 26px; font-size:16px; line-height:1.6; color:rgba(255,255,255,.92); max-width:60ch; }
.rp-cof-cta__actions { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* 1541 — "Get In Touch" tabbed contact block (Calendly + quote), on the red CTA. Header stays white. */
.rp-cof-cta__head { max-width:680px; margin:0 auto 30px; }
.rp-cof-cta__eyebrow { display:inline-block; margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.rp-cof-cta__sub { margin:2px 0 12px; font-size:20px; font-weight:600; color:#fff; }
.rp-cof-cta__head .rp-cof-cta__text { margin:0 auto; }
/* tabs recoloured to read on the red background (content box stays white) */
.rp-cof-cta .rp-cf-tabs__nav a { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); color:#fff; }
.rp-cof-cta .rp-cf-tabs__nav a:hover, .rp-cof-cta .rp-cf-tabs__nav a:focus { background:#fff; color:var(--red); border-color:#fff; }
.rp-cof-cta .rp-cf-tabs__nav li.active a { background:#fff; color:var(--red); border-color:#fff; box-shadow:0 12px 26px -14px rgba(0,0,0,.45); }
/* 1738 — contact-block Calendly: widen the tabs so the inline widget renders 2-column (as on /custom-flexible-packaging) */
#contact-block .rp-cf-tabs { max-width:1200px; }
#contact-block .rp-cf-tabs__nav { max-width:none; }

/* ===== 1569 — restore component <p> margins zeroed by `.rp-cof p { margin:0 }` =====
   The reset above has specificity (0,1,1) and silently overrode these single-class <p> rules (0,1,0),
   so their authored margins never applied (ledes flush against the formats grid, prompt lead/text and the
   CTA sub-heading with no gaps, the formats note touching the grid). Re-declaring them as two-class
   selectors (.rp-cof .x = 0,2,0) beats the reset without changing the reset itself.
   (.rp-cof-cta__text is intentionally left at 0 bottom — .rp-cof-cta__head provides its spacing.) */
.rp-cof .rp-cof-lede          { margin-bottom:30px; }
.rp-cof .rp-cof-prompt__lead  { margin-bottom:10px; }
.rp-cof .rp-cof-prompt__text  { margin-bottom:20px; }
.rp-cof .rp-cof-cta__sub      { margin:2px 0 12px; }
.rp-cof .rp-cof-formats__note { margin-top:22px; }

/* ===== 1739 — industry pages only: normalise non-hero section body copy + lists to 16px, to match the
   About page's body sizing. The HERO is intentionally excluded (keeps its larger intro/lead sizing).
   :not(.rp-about) leaves the About page's own sizing untouched. The dark Routes panel's dense white
   card micro-text (pills, .rp-cof-list, .rp-cof-panel <p>) is left as-is on purpose — it's compact card
   chrome, not section body copy, and 16px would overflow the 2-column panels. ===== */
.rp-cof:not(.rp-about) .rp-cof-problem__list li,
.rp-cof:not(.rp-about) .rp-cof-rte ul li,
.rp-cof:not(.rp-about) .rp-cof-recyc__copy p,
.rp-cof:not(.rp-about) .rp-cof-why__copy p,
.rp-cof:not(.rp-about) .rp-cof-points li { font-size:16px; }

/* ===== 1740 — Routes (dark) section: bullet list items match the panel <p> at 14.5px.
   (.rp-cof-list li was 13.5px; the :not(.rp-about)-scoped rte-list selector re-beats 1739's 16px
   inside panels.) ===== */
.rp-cof-routes .rp-cof-list li,
.rp-cof:not(.rp-about) .rp-cof-routes .rp-cof-rte ul li { font-size:14.5px; }

/* ===== responsive ===== */
@media (max-width:960px){
  .rp-cof-why__grid, .rp-cof-routes__grid, .rp-cof-hero__grid, .rp-cof-problem__grid, .rp-cof-recyc__grid { grid-template-columns:1fr; }
  .rp-cof-fgrid { grid-template-columns:repeat(2,1fr); }
  .rp-cof-points { grid-template-columns:1fr; }
  /* 1540/1542 — cap stacked hero/problem/recyc imagery so it doesn't dominate */
  .rp-cof-hero__media img, .rp-cof-problem__media img, .rp-cof-recyc__media img { max-height:320px; object-fit:cover; }
}
@media (max-width:640px){
  .rp-cof-hero { padding:44px 0 40px; }
  .rp-cof-fgrid { grid-template-columns:1fr; }
  .rp-cof-recyc__grid { grid-template-columns:1fr; }
  .rp-cof-cols { grid-template-columns:1fr; }
  .rp-cof-btn { flex:1 1 auto; }
}