/* =====================================================================
   1569 — About Us (/about_us). rp-UI. Loaded by information/information when
   the about.tpl override renders (information_id=4). Builds on the shared
   rp-cof-* block system (rp-industry-builder.css) for tokens, hero, problem
   and the formats grid; this file adds the About-only blocks: the custom-print
   split, the ordering benefits tiles, and the "Speak to Rightpak" contact band.
   ===================================================================== */

/* restored verbatim doc copy (light sections): consistent paragraph size + spacing */
.rp-about-rte p { margin:0 0 14px; font-size:16px; line-height:1.65; color:var(--muted); }
.rp-about-rte > :last-child { margin-bottom:0; }
.rp-about-range__list { margin:0 0 28px; }
.rp-about-range__outro { margin-top:28px; }
/* 1709 — Product Range list matches the block's paragraphs: muted colour, consistent 16px (was ink/15.5px) */
.rp-about .rp-about-range__list ul li { color:var(--muted); font-size:16px; }

/* 1709 — hero body paragraphs match the hero intro size (18px) and colour (muted) rather than the shared 16px/ink */
.rp-about .rp-cof-hero__rte p { font-size:18px; color:var(--muted); }

/* 1709 — Expertise ("Packaging expertise") block: first paragraph matches the rest in colour AND size
   (drops the shared lead step of ink/17.5px → muted/16px). About page only. */
.rp-about .rp-cof-problem__copy p:first-of-type { color:var(--muted); font-size:16px; }

/* `.rp-cof-lede`'s margin is restored site-wide in rp-industry-builder.css (1569); here the About range
   intro precedes a bullet list rather than the formats grid, so we want it a touch tighter than the 30px
   default — this two-class rule (0,2,0) loads after the shared one and wins. (The expertise-aside
   prompt lead/text spacing is handled by that same shared fix.) */
.rp-about .rp-cof-lede { margin-bottom:16px; }  /* range intro → bullet list */

/* ===== PRODUCT RANGE — text left; two images right in a row (wider + narrower, same height) ===== */
.rp-about-range__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
.rp-about-range__grid::before, .rp-about-range__grid::after { content:none; }
/* mini two-cell image row: one wider, one narrower, matched height, no borders/shadows */
.rp-about-range__media { display:grid; grid-template-columns:1.3fr .7fr; gap:16px; }
.rp-about-range__img { margin:0; height:440px; border-radius:16px; overflow:hidden; background:#efeae1; }
.rp-about-range__img img { display:block; width:100%; height:100%; object-fit:cover; }

/* inline brand hyperlink (as used in the doc) */
.rp-about-link { color:var(--red); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.rp-about-link:hover { color:var(--red-dark); }

/* ===== CUSTOM PRINTED — image + copy split ===== */
.rp-about-split { background:#fff; padding:62px 0; }
.rp-about-split__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center; }
.rp-about-split__grid::before, .rp-about-split__grid::after { content:none; }
.rp-about-split--rev .rp-about-split__media { order:2; }   /* image on the right */
.rp-about-split--rev .rp-about-split__copy  { order:1; }
.rp-about-split__media img { width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 20px 44px rgba(28,26,25,.14); }
.rp-about-split__copy p { margin:0 0 14px; font-size:16px; line-height:1.65; color:var(--ink); }  /* 1709 — paragraphs ink, consistent 16px */
.rp-about-split__lead { color:var(--ink) !important; font-size:16px !important; }  /* 1709 — lead drops to 16px to match the rest (stays ink) */
.rp-about-split .rp-cof-rte { margin:4px 0 16px; }
.rp-about-split .rp-cof-rte ul li { font-size:16px; }  /* 1709 — list matches the paragraph above it (16px) */
.rp-about-split__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }

/* ===== SUPPORTING RECYCLABILITY — text block (1709) ===== */
.rp-about-recycle { background:var(--cream); padding:62px 0; }
.rp-about-recycle .rp-cof-h2 { margin-bottom:18px; }
.rp-about-recycle__copy { max-width:900px; }

/* ===== ORDERING & DELIVERY — benefit tiles ===== */
.rp-about-order { background:var(--warm); padding:62px 0; }
.rp-about-order__head { max-width:160ch; }
/* scoped (.rp-about-order ...) so it beats the shared `.rp-cof p { margin:0 }` on specificity */
.rp-about-order .rp-about-order__lead { margin:40px 0 24px; font-size:15px; font-weight:800; letter-spacing:.01em; color:var(--ink); }
.rp-about-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0; }
.rp-about-benefit { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 22px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rp-about-benefit:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(28,28,28,.08); border-color:#dcd7cf; }
.rp-about-benefit__icon { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:12px; background:var(--cream); color:var(--red); font-size:20px; }
.rp-about-benefit__title { font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.4; }
/* closing line sits clear of the benefit tiles above */
.rp-about-order .rp-cof-formats__note { margin-top:28px; }

/* ===== SPEAK TO RIGHTPAK — contact band (on the red rp-cof-cta) ===== */
.rp-about-contact__methods { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:860px; margin:0 auto; }
.rp-about-cmethod { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:26px 20px; border-radius:16px; text-decoration:none;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.28);
  transition:background .15s, transform .15s, border-color .15s; }
.rp-about-cmethod:hover { background:#fff; transform:translateY(-3px); border-color:#fff; }
.rp-about-cmethod__icon { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px;
  border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:22px; margin:0 0 10px; transition:background .15s, color .15s; }
.rp-about-cmethod:hover .rp-about-cmethod__icon { background:var(--red); color:#fff; }
.rp-about-cmethod__label { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.8); transition:color .15s; }
.rp-about-cmethod__value { font-size:18px; font-weight:800; color:#fff; transition:color .15s; }
.rp-about-cmethod:hover .rp-about-cmethod__label { color:var(--muted); }
.rp-about-cmethod:hover .rp-about-cmethod__value { color:var(--ink); }

.rp-about-social { margin:34px auto 0; text-align:center; }
.rp-about-social__lbl { display:block; font-size:14px; color:rgba(255,255,255,.9); margin:0 0 16px; }
.rp-about-social__row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.rp-about-social__row a { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:20px;
  text-decoration:none; transition:background .15s, color .15s, transform .15s, border-color .15s; }
.rp-about-social__row a:hover { background:#fff; color:var(--red); border-color:#fff; transform:translateY(-2px); }

/* ===== responsive ===== */
@media (max-width:960px){
  .rp-about-range__grid { grid-template-columns:1fr; gap:34px; }
  .rp-about-range__media { max-width:620px; }
  .rp-about-range__img { height:360px; }
  .rp-about-split__grid { grid-template-columns:1fr; }
  .rp-about-split--rev .rp-about-split__media { order:0; }   /* image back on top when stacked */
  .rp-about-split--rev .rp-about-split__copy  { order:0; }
  .rp-about-split__media img { max-height:360px; object-fit:cover; }
  .rp-about-benefits { grid-template-columns:repeat(2,1fr); }
  .rp-about-contact__methods { grid-template-columns:1fr; max-width:420px; }
}
@media (max-width:640px){
  .rp-about-range__img { height:230px; }
  .rp-about-benefits { grid-template-columns:1fr; }
  .rp-about-split__actions .rp-cof-btn { flex:1 1 auto; }
}