/* ═══════════════════════════════════════════════════════════════
   GRIFFIN FENCE — resource-pages.css
   Full visual system for all resource/guide pages
   Sections · Split rows · Cards · Counters · Steps · Callouts
   Parallax · Fade/Slide animations · Glows · Sidebar
═══════════════════════════════════════════════════════════════ */

/* ── SECTION WRAPPERS ──────────────────────────────────────────*/
.rp-section { position: relative; padding: 80px 0; overflow: hidden; }

/* alternating backgrounds */
.rp-white  { background: #ffffff; }
.rp-light  { background: #f4f6f9; }
.rp-offwhite{ background: #F8F8F8; }
.rp-navy   { background: #0D151D; }
.rp-green  { background: #00663C; }
.rp-dark   { background: #070d12; }

.rp-navy *, .rp-green *, .rp-dark * { color: #fff; }
.rp-navy h2,.rp-navy h3,.rp-navy h4 { color: #fff; }
.rp-green h2,.rp-green h3,.rp-green h4 { color: #fff; }
.rp-dark h2,.rp-dark h3,.rp-dark h4 { color: #fff; }
.rp-navy p,.rp-green p,.rp-dark p { color: rgba(255,255,255,.82); }
.rp-navy a,.rp-green a,.rp-dark a { color: #EBB017; }
.rp-navy a:hover,.rp-green a:hover,.rp-dark a:hover { color: #fff; }
.rp-light p, .rp-offwhite p { color: #515355; }
.rp-light h2,.rp-light h3,.rp-offwhite h2,.rp-offwhite h3 { color: #0D151D; }

/* diagonal slice dividers */
.rp-slice-down::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:64px;
  background:inherit; clip-path:polygon(0 0,100% 0,100% 100%,0 0); z-index:2; pointer-events:none;
}
.rp-slice-up::before {
  content:''; position:absolute; top:-1px; left:0; right:0; height:64px;
  background:inherit; clip-path:polygon(0 100%,100% 0,100% 100%); z-index:2; pointer-events:none;
}

/* ── HERO ANSWER BOX ───────────────────────────────────────────*/
.rp-answer {
  background: linear-gradient(135deg,#0D151D 0%,#1a2b3c 100%);
  border-left: 5px solid #EBB017;
  border-radius: 0 14px 14px 0;
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
  box-shadow: 0 8px 32px rgba(13,21,29,.22);
  position: relative;
}
.rp-answer::before {
  content: 'Quick Answer';
  display: block;
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: #EBB017; margin-bottom: .6rem;
}
.rp-answer p { color: rgba(255,255,255,.92) !important; margin:0; font-size:1.05rem; line-height:1.72; }
.rp-answer strong { color: #EBB017 !important; }

/* ── SECTION HEADER ────────────────────────────────────────────*/
.rp-head { text-align:center; max-width:780px; margin:0 auto 3.5rem; }
.rp-eyebrow {
  display:inline-block; font-family:var(--font-display);
  font-size:.74rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:#00663C; background:rgba(0,102,60,.09);
  padding:.32rem .9rem; border-radius:100px; margin-bottom:.9rem;
}
.rp-navy .rp-eyebrow,.rp-dark .rp-eyebrow { background:rgba(235,176,23,.15); color:#EBB017; }
.rp-green .rp-eyebrow { background:rgba(255,255,255,.18); color:#fff; }
.rp-light .rp-eyebrow { background:rgba(0,102,60,.09); color:#00663C; }
.rp-head h2 { margin-bottom:.55rem; }
.rp-head p { font-size:1.08rem; line-height:1.78; max-width:600px; margin:0 auto; }
.rp-navy .rp-head p,.rp-dark .rp-head p { color:rgba(255,255,255,.72); }

/* ── STAT COUNTER CARDS ────────────────────────────────────────*/
.rp-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin:2.5rem 0;
}
@media(max-width:768px){ .rp-stats{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .rp-stats{ grid-template-columns:1fr; } }

.rp-stat {
  background:#0D151D; border-radius:16px;
  padding:2rem 1.5rem; text-align:center;
  position:relative; overflow:hidden;
  box-shadow:0 8px 30px rgba(13,21,29,.22);
  transition:transform .3s ease,box-shadow .3s ease;
}
.rp-stat:hover { transform:translateY(-5px); box-shadow:0 18px 50px rgba(13,21,29,.32),0 0 0 1px rgba(235,176,23,.25); }
.rp-stat::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#EBB017,#00663C);
}
.rp-stat::after {
  content:''; position:absolute; bottom:-35px; right:-35px;
  width:110px; height:110px;
  background:radial-gradient(circle,rgba(235,176,23,.12) 0%,transparent 70%);
  border-radius:50%;
}
.rp-stat-num {
  display:block; font-family:var(--font-display);
  font-size:3rem; font-weight:900;
  color:#EBB017; line-height:1; margin-bottom:.4rem;
}
.rp-stat-label {
  font-size:.78rem; color:#9aa6bc;
  text-transform:uppercase; letter-spacing:.07em; font-weight:600;
}

/* ── IMAGE + TEXT SPLIT ROWS ───────────────────────────────────*/
.rp-split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4.5rem; align-items:center;
}
.rp-split-flip { direction:rtl; }
.rp-split-flip > * { direction:ltr; }
@media(max-width:900px){
  .rp-split,.rp-split-flip { grid-template-columns:1fr; gap:2.5rem; direction:ltr; }
}
.rp-split-media {
  border-radius:20px; overflow:hidden;
  box-shadow:0 24px 64px rgba(13,21,29,.28);
  position:relative;
}
.rp-split-media img {
  width:100%; height:400px; object-fit:cover;
  display:block; transition:transform .65s ease;
}
.rp-split-media:hover img { transform:scale(1.05); }
.rp-split-badge {
  position:absolute; bottom:18px; left:18px;
  background:#EBB017; color:#0D151D;
  font-weight:800; font-size:.78rem;
  padding:.38rem 1rem; border-radius:100px;
  text-transform:uppercase; letter-spacing:.06em;
}
.rp-split-text h2 { margin-bottom:1rem; }
.rp-split-text .rp-lead {
  font-size:1.08rem; line-height:1.78;
  color:#515355; margin-bottom:1.5rem;
}
.rp-navy .rp-split-text .rp-lead,
.rp-dark .rp-split-text .rp-lead { color:rgba(255,255,255,.78); }

/* ── FEATURE CARDS (ICON) ──────────────────────────────────────*/
.rp-cards {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin:2rem 0;
}
@media(max-width:900px){ .rp-cards{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .rp-cards{ grid-template-columns:1fr; } }

.rp-card {
  background:#fff; border-radius:18px;
  padding:2rem 1.75rem;
  border:1px solid #e5e7eb;
  box-shadow:0 4px 16px rgba(13,21,29,.06);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  position:relative; overflow:hidden;
}
.rp-card:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 52px rgba(13,21,29,.15);
  border-color:#00663C;
}
.rp-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#00663C,#EBB017);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.rp-card:hover::after { transform:scaleX(1); }
.rp-card-icon {
  width:58px; height:58px;
  background:linear-gradient(135deg,rgba(0,102,60,.1),rgba(235,176,23,.1));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem;
  transition:transform .3s ease;
}
.rp-card:hover .rp-card-icon { transform:scale(1.1) rotate(-4deg); }
.rp-card-icon svg { width:28px; height:28px; }
.rp-card h3 { font-size:1.08rem; color:#0D151D; margin-bottom:.45rem; }
.rp-card p  { font-size:.92rem; color:#515355; margin:0; line-height:1.65; }

/* dark card */
.rp-card-dark {
  background:#0D151D; border-color:rgba(255,255,255,.07);
}
.rp-card-dark h3 { color:#fff; }
.rp-card-dark p  { color:rgba(255,255,255,.72); }
.rp-card-dark .rp-card-icon { background:rgba(255,255,255,.07); }
.rp-card-dark:hover { border-color:#EBB017; }

/* light-on-dark bg sections use dark cards automatically */
.rp-navy .rp-card:not(.rp-card-light),
.rp-dark .rp-card:not(.rp-card-light) {
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08);
}
.rp-navy .rp-card h3,.rp-dark .rp-card h3 { color:#fff; }
.rp-navy .rp-card p,.rp-dark .rp-card p   { color:rgba(255,255,255,.72); }

/* ── NUMBERED STEPS ────────────────────────────────────────────*/
.rp-steps { list-style:none; padding:0; margin:2rem 0; counter-reset:rpstep; }
.rp-step {
  counter-increment:rpstep;
  display:flex; gap:1.5rem; align-items:flex-start;
  padding:1.5rem 1.75rem;
  background:#fff; border-radius:14px;
  margin-bottom:1rem;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 8px rgba(13,21,29,.05);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  position:relative;
}
.rp-step:hover {
  transform:translateX(5px);
  box-shadow:0 8px 28px rgba(13,21,29,.11);
  border-color:rgba(0,102,60,.28);
}
.rp-step::before {
  content:counter(rpstep);
  min-width:46px; height:46px;
  background:linear-gradient(135deg,#00663C,#004d2e);
  color:#fff; font-family:var(--font-display); font-weight:900; font-size:1.1rem;
  border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,102,60,.38);
}
.rp-step h4 { font-size:1.05rem; color:#0D151D; margin-bottom:.3rem; }
.rp-step p  { font-size:.92rem; color:#515355; margin:0; line-height:1.65; }

/* dark bg steps */
.rp-navy .rp-step,.rp-dark .rp-step {
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.07);
}
.rp-navy .rp-step h4,.rp-dark .rp-step h4 { color:#fff; }
.rp-navy .rp-step p,.rp-dark .rp-step p   { color:rgba(255,255,255,.72); }

/* ── CALLOUT BOXES ─────────────────────────────────────────────*/
.rp-callout {
  display:flex; gap:1rem; align-items:flex-start;
  background:linear-gradient(135deg,rgba(0,102,60,.07),rgba(0,102,60,.03));
  border:1px solid rgba(0,102,60,.2);
  border-left:4px solid #00663C;
  border-radius:0 12px 12px 0;
  padding:1.2rem 1.5rem; margin:1.75rem 0;
}
.rp-callout.warn {
  background:linear-gradient(135deg,rgba(235,176,23,.09),rgba(235,176,23,.04));
  border-color:rgba(235,176,23,.32); border-left-color:#EBB017;
}
.rp-callout.dark {
  background:#0D151D; border:none; border-left:4px solid #EBB017;
}
.rp-callout.dark *   { color:rgba(255,255,255,.9) !important; }
.rp-callout.dark strong { color:#EBB017 !important; }
.rp-callout-icon { font-size:1.35rem; flex-shrink:0; margin-top:.1rem; line-height:1; }
.rp-callout p    { margin:0; font-size:.94rem; line-height:1.72; color:#515355; }
.rp-callout strong { color:#0D151D; }
.rp-callout.warn p { color:#5a4200; }
.rp-callout.warn strong { color:#7a5c00; }

/* ── PULL QUOTE ────────────────────────────────────────────────*/
.rp-quote {
  position:relative; padding:2rem 2.5rem 2rem 3rem;
  margin:2.75rem 0;
  background:linear-gradient(135deg,#0D151D,#1a2b3c);
  border-radius:18px; overflow:hidden;
}
.rp-quote::before {
  content:'\201C';
  position:absolute; top:-12px; left:14px;
  font-size:9rem; font-family:Georgia,serif;
  color:#EBB017; opacity:.2; line-height:1; pointer-events:none;
}
.rp-quote p {
  font-size:1.22rem; font-style:italic;
  color:rgba(255,255,255,.95) !important; margin:0; line-height:1.68;
  position:relative; z-index:1; font-weight:500;
}
.rp-quote cite {
  display:block; margin-top:.75rem;
  font-style:normal; font-size:.82rem; font-weight:700;
  color:#EBB017 !important; letter-spacing:.05em; text-transform:uppercase;
  position:relative; z-index:1;
}

/* ── SECTION DIVIDER ───────────────────────────────────────────*/
.rp-divider {
  display:flex; align-items:center; gap:1rem;
  margin:3rem 0 2rem;
}
.rp-divider::before,.rp-divider::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,#e5e7eb,transparent);
}
.rp-divider span {
  font-family:var(--font-display); font-size:.7rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:#00663C; background:rgba(0,102,60,.08);
  padding:.3rem .85rem; border-radius:100px; white-space:nowrap;
}
.rp-navy .rp-divider::before,.rp-navy .rp-divider::after,
.rp-dark .rp-divider::before,.rp-dark .rp-divider::after {
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}
.rp-navy .rp-divider span,.rp-dark .rp-divider span {
  color:#EBB017; background:rgba(235,176,23,.12);
}

/* ── CHECKLIST / TICK LIST ─────────────────────────────────────*/
.rp-checklist { list-style:none; padding:0; margin:1.5rem 0; }
.rp-checklist li {
  display:flex; gap:.9rem; align-items:flex-start;
  padding:.6rem 0; border-bottom:1px solid #e5e7eb;
  font-size:.95rem; color:#515355; line-height:1.6;
}
.rp-checklist li:last-child { border-bottom:none; }
.rp-checklist li::before {
  content:'';
  width:20px; height:20px; min-width:20px;
  background:#00663C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5l3 3 6-7' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  border-radius:50%; margin-top:2px; flex-shrink:0;
}
.rp-navy .rp-checklist li,.rp-dark .rp-checklist li { color:rgba(255,255,255,.82); border-bottom-color:rgba(255,255,255,.08); }

/* ── FAQ ───────────────────────────────────────────────────────*/
.rp-faq { max-width:860px; margin:0 auto; }
.rp-faq details {
  background:#fff; border-radius:13px;
  margin-bottom:.75rem;
  border:1px solid #e5e7eb;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(13,21,29,.05);
  transition:box-shadow .25s ease;
}
.rp-faq details:hover { box-shadow:0 6px 22px rgba(13,21,29,.1); }
.rp-faq summary {
  list-style:none; padding:1.2rem 1.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.97rem;
  color:#0D151D; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  user-select:none;
}
.rp-faq summary::-webkit-details-marker { display:none; }
.rp-faq summary::after {
  content:'+'; font-size:1.55rem; font-weight:300;
  color:#00663C; flex-shrink:0; transition:transform .25s ease; line-height:1;
}
.rp-faq details[open] summary::after { content:'\2212'; transform:rotate(180deg); }
.rp-faq details[open] summary { color:#00663C; }
.rp-faq details[open] { box-shadow:0 6px 24px rgba(13,21,29,.11); border-color:rgba(0,102,60,.25); }
.rp-faq .faq-body {
  padding:0 1.5rem 1.25rem;
  font-size:.94rem; color:#515355; line-height:1.76;
}
.rp-faq .faq-body p { margin-bottom:.5rem; }
.rp-faq .faq-body p:last-child { margin-bottom:0; }

/* ── SIDEBAR ───────────────────────────────────────────────────*/
.rp-layout {
  display:grid; grid-template-columns:1fr 340px;
  gap:3rem; align-items:start;
}
@media(max-width:1100px){ .rp-layout{ grid-template-columns:1fr 290px; gap:2rem; } }
@media(max-width:860px){  .rp-layout{ grid-template-columns:1fr; } }

.rp-sidebar { position:sticky; top:94px; }
@media(max-width:860px){ .rp-sidebar{ display:none; } }

.rp-toc {
  background:#0D151D; border-radius:16px; padding:1.5rem;
  margin-bottom:1.5rem;
  box-shadow:0 8px 30px rgba(13,21,29,.22);
}
.rp-toc h4 {
  color:#EBB017 !important; font-size:.76rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:1rem; padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rp-toc ol { list-style:none; padding:0; margin:0; counter-reset:toc; }
.rp-toc li {
  counter-increment:toc;
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.42rem 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.rp-toc li:last-child { border-bottom:none; }
.rp-toc li::before {
  content:counter(toc,decimal-leading-zero);
  font-size:.68rem; font-weight:800; color:#EBB017;
  min-width:22px; margin-top:2px; flex-shrink:0;
}
.rp-toc a {
  color:rgba(255,255,255,.72) !important; font-size:.86rem;
  line-height:1.45; text-decoration:none; transition:color .2s;
}
.rp-toc a:hover { color:#EBB017 !important; }

.rp-sidebar-cta {
  background:linear-gradient(155deg,#00663C,#0D151D);
  border-radius:16px; padding:1.75rem;
  margin-bottom:1.5rem;
  box-shadow:0 8px 30px rgba(0,102,60,.28);
  position:relative; overflow:hidden;
}
.rp-sidebar-cta::after {
  content:''; position:absolute; bottom:-40px; right:-40px;
  width:120px; height:120px;
  background:radial-gradient(circle,rgba(235,176,23,.22) 0%,transparent 70%);
  border-radius:50%; pointer-events:none;
}
.rp-sidebar-cta h4 { color:#fff !important; font-size:1.08rem; margin-bottom:.45rem; }
.rp-sidebar-cta p  { color:rgba(255,255,255,.78) !important; font-size:.87rem; margin-bottom:1.25rem; line-height:1.55; }
.rp-sidebar-cta .btn { display:block; text-align:center; width:100%; margin-bottom:.65rem; position:relative; z-index:1; }
.rp-sidebar-cta .btn:last-child { margin-bottom:0; }

.rp-sidebar-facts {
  background:#F8F8F8; border-radius:16px; padding:1.5rem;
  border:1px solid #e5e7eb;
}
.rp-sidebar-facts h4 {
  font-size:.76rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:#0D151D; margin-bottom:1rem; padding-bottom:.6rem;
  border-bottom:2px solid #00663C;
}
.rp-sidebar-facts ul { list-style:none; padding:0; margin:0; }
.rp-sidebar-facts li {
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.48rem 0; border-bottom:1px solid #e5e7eb;
  font-size:.87rem; color:#515355; line-height:1.45;
}
.rp-sidebar-facts li:last-child { border-bottom:none; }
.rp-sidebar-facts li::before {
  content:'';
  width:18px; height:18px; min-width:18px;
  background:#00663C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  border-radius:50%; margin-top:1px; flex-shrink:0;
}

/* ── CTA BANNER (FULL WIDTH) ───────────────────────────────────*/
.rp-cta {
  background:linear-gradient(135deg,#0D151D 0%,#0e1e30 50%,#070d12 100%);
  padding:96px 0; text-align:center; position:relative; overflow:hidden;
}
.rp-cta::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 15% 50%,rgba(0,102,60,.22) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 30%,rgba(235,176,23,.1) 0%,transparent 50%);
}
.rp-cta .container { position:relative; z-index:1; }
.rp-cta h2 {
  color:#fff; font-size:clamp(1.85rem,3.5vw,2.8rem);
  max-width:820px; margin:0 auto 1rem;
}
.rp-cta p {
  color:rgba(255,255,255,.74); font-size:1.1rem;
  max-width:640px; margin:0 auto 2.25rem; line-height:1.76;
}
.rp-cta .btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── DISCLAIMER STRIP ──────────────────────────────────────────*/
.rp-disclaimer {
  background:linear-gradient(135deg,rgba(235,176,23,.08),rgba(235,176,23,.04));
  border:1px solid rgba(235,176,23,.28); border-left:4px solid #EBB017;
  border-radius:0 10px 10px 0;
  padding:1rem 1.5rem; margin-bottom:2.5rem;
  font-size:.9rem; color:#5a4200; line-height:1.6;
}
.rp-disclaimer strong { color:#7a5c00; }

/* ── GLOW BUTTONS ──────────────────────────────────────────────*/
.btn-glow {
  box-shadow:0 0 0 0 rgba(0,102,60,.45);
  animation:glowGreen 2.8s infinite;
}
@keyframes glowGreen {
  0%,100%{ box-shadow:0 0 0 0 rgba(0,102,60,.45); }
  50%    { box-shadow:0 0 0 12px rgba(0,102,60,0); }
}
.btn-glow:hover { box-shadow:0 10px 32px rgba(0,102,60,.55); animation:none; transform:translateY(-2px); }

.btn-glow-gold {
  background:#EBB017; color:#0D151D;
  border:2px solid #EBB017; font-weight:800;
  box-shadow:0 0 0 0 rgba(235,176,23,.5);
  animation:glowGold 2.8s infinite;
}
@keyframes glowGold {
  0%,100%{ box-shadow:0 0 0 0 rgba(235,176,23,.5); }
  50%    { box-shadow:0 0 0 12px rgba(235,176,23,0); }
}
.btn-glow-gold:hover { background:#d4a012; border-color:#d4a012; color:#0D151D; box-shadow:0 10px 32px rgba(235,176,23,.5); animation:none; transform:translateY(-2px); }

.btn-outline-white {
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.45);
  transition:all .25s ease;
}
.btn-outline-white:hover { background:#fff; color:#0D151D; border-color:#fff; }

/* ── SCROLL ANIMATIONS ─────────────────────────────────────────*/
.fade-up   { opacity:0; transform:translateY(44px); transition:opacity .72s ease,transform .72s ease; }
.fade-left { opacity:0; transform:translateX(-52px);transition:opacity .72s ease,transform .72s ease; }
.fade-right{ opacity:0; transform:translateX(52px); transition:opacity .72s ease,transform .72s ease; }
.fade-in   { opacity:0; transition:opacity .72s ease; }
.scale-in  { opacity:0; transform:scale(.91);        transition:opacity .62s ease,transform .62s ease; }

.is-visible.fade-up,
.is-visible.fade-left,
.is-visible.fade-right,
.is-visible.fade-in,
.is-visible.scale-in { opacity:1; transform:none; }

/* stagger helpers */
.d1{ transition-delay:.1s; } .d2{ transition-delay:.2s; }
.d3{ transition-delay:.3s; } .d4{ transition-delay:.4s; }
.d5{ transition-delay:.5s; } .d6{ transition-delay:.6s; }

/* ── PARALLAX HERO ─────────────────────────────────────────────*/
.rp-parallax { will-change:transform; }

/* ── MOBILE ────────────────────────────────────────────────────*/
@media(max-width:768px){
  .rp-section{ padding:56px 0; }
  .rp-stats  { gap:1rem; }
  .rp-stat   { padding:1.4rem 1rem; }
  .rp-stat-num{ font-size:2.2rem; }
  .rp-cta    { padding:64px 0; }
  .rp-cards  { gap:1rem; }
  .rp-quote  { padding:1.5rem 1.75rem 1.5rem 2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   UNIFORM FORMATTING PATCH — May 2026
   Fixes: FAQ .answer alias · inline-faq · tables · text walls
═══════════════════════════════════════════════════════════════ */

/* ── FAQ: .answer is an alias for .faq-body inside .rp-faq ─── */
/* The injector wrote <div class="answer"> but CSS only had .faq-body */
.rp-faq details .answer,
.rp-faq .faq-item .answer {
  padding: 0 1.5rem 1.25rem;
  font-size: .94rem; color: #515355; line-height: 1.76;
}
.rp-faq details .answer p,
.rp-faq .faq-item .answer p { margin-bottom: .5rem; }
.rp-faq details .answer p:last-child,
.rp-faq .faq-item .answer p:last-child { margin-bottom: 0; }

/* ── inline-faq: fully styled accordion ───────────────────────*/
.inline-faq { margin: 2.5rem 0; }
.inline-faq h2 {
  font-size: 1.55rem; color: #0D151D;
  margin-bottom: 1.25rem; padding-bottom: .7rem;
  border-bottom: 2px solid #00663C;
}
/* All bare details/summary inside inline-faq get full styling */
.inline-faq details,
.faq details {
  background: #fff; border-radius: 13px;
  margin-bottom: .75rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(13,21,29,.05);
  transition: box-shadow .25s ease;
}
.inline-faq details:hover,
.faq details:hover { box-shadow: 0 6px 22px rgba(13,21,29,.1); }
.inline-faq summary,
.faq summary {
  list-style: none; padding: 1.2rem 1.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .97rem;
  color: #0D151D; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  user-select: none;
}
.inline-faq summary::-webkit-details-marker,
.faq summary::-webkit-details-marker { display: none; }
.inline-faq summary::after,
.faq summary::after {
  content: '+'; font-size: 1.55rem; font-weight: 300;
  color: #00663C; flex-shrink: 0; transition: transform .25s ease; line-height: 1;
}
.inline-faq details[open] summary::after,
.faq details[open] summary::after { content: '\2212'; transform: rotate(180deg); }
.inline-faq details[open] summary,
.faq details[open] summary { color: #00663C; }
.inline-faq details[open],
.faq details[open] { box-shadow: 0 6px 24px rgba(13,21,29,.11); border-color: rgba(0,102,60,.25); }
/* The content div inside inline-faq details */
.inline-faq details > div,
.faq details > div {
  padding: 0 1.5rem 1.25rem;
  font-size: .94rem; color: #515355; line-height: 1.76;
}
.inline-faq details > div p,
.faq details > div p { margin-bottom: .5rem; }
.inline-faq details > div p:last-child,
.faq details > div p:last-child { margin-bottom: 0; }

/* Prevent mobile nav <details> from being styled (it has no class) */
.mobile-nav details,
.mobile-nav summary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.mobile-nav summary::after { display: none !important; }

/* ── STYLED TABLES ─────────────────────────────────────────────*/
.cost-table,
.data-table,
.compare-table,
.rp-section table,
.content-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0 2rem;
  font-size: .93rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(13,21,29,.09);
}
.cost-table thead tr,
.data-table thead tr,
.compare-table thead tr,
.rp-section table thead tr,
.content-section table thead tr {
  background: linear-gradient(135deg, #0D151D, #1a2b3c);
}
.cost-table thead th,
.data-table thead th,
.compare-table thead th,
.rp-section table thead th,
.content-section table thead th {
  color: #EBB017;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 1rem 1.25rem; text-align: left;
  border: none;
}
.cost-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even),
.compare-table tbody tr:nth-child(even),
.rp-section table tbody tr:nth-child(even),
.content-section table tbody tr:nth-child(even) {
  background: #f4f6f9;
}
.cost-table tbody tr:nth-child(odd),
.data-table tbody tr:nth-child(odd),
.compare-table tbody tr:nth-child(odd),
.rp-section table tbody tr:nth-child(odd),
.content-section table tbody tr:nth-child(odd) {
  background: #ffffff;
}
.cost-table tbody tr:hover,
.data-table tbody tr:hover,
.compare-table tbody tr:hover,
.rp-section table tbody tr:hover,
.content-section table tbody tr:hover {
  background: rgba(0,102,60,.06);
}
.cost-table td,
.data-table td,
.compare-table td,
.rp-section table td,
.content-section table td {
  padding: .85rem 1.25rem;
  color: #515355;
  border-bottom: 1px solid #e5e7eb;
  line-height: 1.5;
}
.cost-table td:first-child,
.data-table td:first-child,
.compare-table td:first-child,
.rp-section table td:first-child,
.content-section table td:first-child {
  font-weight: 600; color: #0D151D;
}
/* Mobile: scroll tables horizontally */
@media(max-width: 640px) {
  .cost-table, .data-table, .compare-table { font-size: .82rem; }
  .cost-table td, .data-table td, .compare-table td,
  .cost-table th, .data-table th, .compare-table th { padding: .65rem .85rem; }
}

/* Table wrapper for overflow scroll on mobile */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.75rem 0; }

/* ── TEXT WALL BREAKER: prose section spacing ──────────────────*/
/* Give breathing room between H2 sections inside rp-section */
.rp-section h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.rp-section h2:first-child { margin-top: 0; }
.rp-section h3 { margin-top: 1.75rem; margin-bottom: .65rem; }
.rp-section p + h2 { margin-top: 3rem; }
.rp-section p + h3 { margin-top: 2rem; }

/* Divider line between major sections inside prose */
.rp-section h2:not(:first-child) {
  padding-top: 2.5rem;
  border-top: 1px solid #e5e7eb;
}
/* On dark sections, use a lighter divider */
.rp-navy .rp-section h2:not(:first-child),
.rp-dark .rp-section h2:not(:first-child) {
  border-top-color: rgba(255,255,255,.1);
}

/* ── DOUBLE-SIDEBAR FIX ────────────────────────────────────────*/
/* 42 resource pages have BOTH .resource-sidebar (old) and .rp-sidebar (new).
   The old one sits inside the content <article> and creates a phantom column.
   Hide it completely — rp-sidebar does the job. */
.rp-layout .resource-sidebar { display: none !important; }

/* ── rp-layout: ensure left column fills the space ────────────*/
/* The main content column was getting squeezed next to TWO sidebars */
.rp-layout { grid-template-columns: 1fr 340px; }
@media(max-width: 1100px) { .rp-layout { grid-template-columns: 1fr 290px; } }
@media(max-width: 860px)  { .rp-layout { grid-template-columns: 1fr; } }

/* ── Bullet list visual polish ─────────────────────────────────*/
.rp-section ul:not(.rp-checklist):not(.rp-steps):not([class]) {
  padding-left: 0;
  list-style: none;
  margin: 1rem 0 1.5rem;
}
.rp-section ul:not(.rp-checklist):not(.rp-steps):not([class]) li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .45rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: .95rem; color: #515355; line-height: 1.6;
}
.rp-section ul:not(.rp-checklist):not(.rp-steps):not([class]) li:last-child {
  border-bottom: none;
}
.rp-section ul:not(.rp-checklist):not(.rp-steps):not([class]) li::before {
  content: '';
  width: 18px; height: 18px; min-width: 18px;
  background: #00663C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  border-radius: 50%; margin-top: 2px; flex-shrink: 0;
}
/* Don't touch nav lists or footer lists */
.primary-nav ul li::before,
.mobile-nav ul li::before,
footer ul li::before,
.mega-menu ul li::before,
.dropdown ul li::before { display: none !important; }

/* ── Key-Takeaways box polish ──────────────────────────────────*/
.key-takeaways {
  background: linear-gradient(135deg, #0D151D 0%, #1a2b3c 100%);
  border-radius: 16px; padding: 2rem 2.25rem;
  margin: 2rem 0 3rem;
  box-shadow: 0 8px 32px rgba(13,21,29,.2);
}
.key-takeaways strong {
  display: block; color: #EBB017 !important;
  font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.key-takeaways ul { list-style: none; padding: 0; margin: 0; }
.key-takeaways li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.88) !important; font-size: .94rem; line-height: 1.6;
}
.key-takeaways li:last-child { border-bottom: none; }
.key-takeaways li::before {
  content: ''; width: 18px; height: 18px; min-width: 18px;
  background: #EBB017 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%230D151D' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  border-radius: 50%; margin-top: 2px; flex-shrink: 0;
}

/* ── aeo-answer box: dark style ONLY inside resource-article ───*/
.resource-article .aeo-answer {
  background: linear-gradient(135deg, #0D151D 0%, #1a2b3c 100%);
  border-left: 5px solid #EBB017;
  border-radius: 0 14px 14px 0;
  padding: 1.75rem 2rem 1.75rem 2.25rem;
  margin: 2rem 0 2.5rem;
  box-shadow: 0 8px 32px rgba(13,21,29,.18);
  font-size: 1rem; line-height: 1.76;
  color: rgba(255,255,255,.9) !important;
  position: relative;
}
.resource-article .aeo-answer::before {
  content: 'Quick Answer';
  display: block;
  font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: #EBB017; margin-bottom: .65rem;
}
.resource-article .aeo-answer strong { color: #EBB017 !important; }
.resource-article .aeo-answer a { color: #EBB017 !important; }



/* =================================================================
   UNIFORM FORMATTING PATCH — May 2026
   Fixes: FAQ .answer alias · inline-faq · tables · text walls
================================================================= */

/* ── FAQ: .answer is an alias for .faq-body inside .rp-faq ─── */
.rp-faq details .answer,
.rp-faq .faq-item .answer {
  padding: 0 1.5rem 1.25rem;
  font-size: .94rem; color: #515355; line-height: 1.76;
}
.rp-faq details .answer p,
.rp-faq .faq-item .answer p { margin-bottom: .5rem; }
.rp-faq details .answer p:last-child,
.rp-faq .faq-item .answer p:last-child { margin-bottom: 0; }

/* ── inline-faq: fully styled accordion ────────────────────── */
.inline-faq { margin: 2.5rem 0; }
.inline-faq h2 {
  font-size: 1.55rem; color: #0D151D;
  margin-bottom: 1.25rem; padding-bottom: .7rem;
  border-bottom: 2px solid #00663C;
}
.inline-faq details,
.faq details {
  background: #fff; border-radius: 13px;
  margin-bottom: .75rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(13,21,29,.05);
  transition: box-shadow .25s ease;
}
.inline-faq details:hover,
.faq details:hover { box-shadow: 0 6px 22px rgba(13,21,29,.1); }
.inline-faq summary,
.faq summary {
  list-style: none; padding: 1.2rem 1.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .97rem;
  color: #0D151D; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  user-select: none;
}
.inline-faq summary::-webkit-details-marker,
.faq summary::-webkit-details-marker { display: none; }
.inline-faq summary::after,
.faq summary::after {
  content: '+'; font-size: 1.55rem; font-weight: 300;
  color: #00663C; flex-shrink: 0; transition: transform .25s ease; line-height: 1;
}
.inline-faq details[open] summary::after,
.faq details[open] summary::after { content: '\2212'; transform: rotate(180deg); }
.inline-faq details[open] summary,
.faq details[open] summary { color: #00663C; }
.inline-faq details[open],
.faq details[open] { box-shadow: 0 6px 24px rgba(13,21,29,.11); border-color: rgba(0,102,60,.25); }
.inline-faq details > div,
.faq details > div {
  padding: 0 1.5rem 1.25rem;
  font-size: .94rem; color: #515355; line-height: 1.76;
}
.inline-faq details > div p,
.faq details > div p { margin-bottom: .5rem; }
.inline-faq details > div p:last-child,
.faq details > div p:last-child { margin-bottom: 0; }

/* Prevent mobile nav details from being styled */
.mobile-nav details,
.mobile-nav summary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.mobile-nav summary::after { display: none !important; }

/* ── STYLED TABLES ────────────────────────────────────────── */
.cost-table,
.data-table,
.compare-table,
.rp-section table,
.content-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0 2rem;
  font-size: .93rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(13,21,29,.09);
}
.cost-table thead tr,
.data-table thead tr,
.compare-table thead tr,
.rp-section table thead tr,
.content-section table thead tr {
  background: linear-gradient(135deg, #0D151D, #1a2b3c);
}
.cost-table thead th,
.data-table thead th,
.compare-table thead th,
.rp-section table thead th,
.content-section table thead th {
  color: #EBB017;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 1rem 1.25rem; text-align: left;
  border: none;
}
.cost-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even),
.compare-table tbody tr:nth-child(even),
.rp-section table tbody tr:nth-child(even),
.content-section table tbody tr:nth-child(even) { background: #f4f6f9; }
.cost-table tbody tr:nth-child(odd),
.data-table tbody tr:nth-child(odd),
.compare-table tbody tr:nth-child(odd),
.rp-section table tbody tr:nth-child(odd),
.content-section table tbody tr:nth-child(odd) { background: #ffffff; }
.cost-table tbody tr:hover,
.data-table tbody tr:hover,
.compare-table tbody tr:hover,
.rp-section table tbody tr:hover,
.content-section table tbody tr:hover { background: rgba(0,102,60,.06); }
.cost-table td,
.data-table td,
.compare-table td,
.rp-section table td,
.content-section table td {
  padding: .85rem 1.25rem;
  color: #515355;
  border-bottom: 1px solid #e5e7eb;
  line-height: 1.5;
}
.cost-table td:first-child,
.data-table td:first-child,
.compare-table td:first-child,
.rp-section table td:first-child,
.content-section table td:first-child { font-weight: 600; color: #0D151D; }
@media(max-width: 640px) {
  .cost-table, .data-table, .compare-table { font-size: .82rem; }
  .cost-table td, .data-table td, .compare-table td,
  .cost-table th, .data-table th, .compare-table th { padding: .65rem .85rem; }
}
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.75rem 0; }

/* ── SECTION PROSE SPACING ──────────────────────────────────── */
.rp-section h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.rp-section h2:first-child { margin-top: 0; }
.rp-section h3 { margin-top: 1.75rem; margin-bottom: .65rem; }
.rp-section p + h2 { margin-top: 3rem; }
.rp-section p + h3 { margin-top: 2rem; }
.rp-section h2:not(:first-child) {
  padding-top: 2.5rem;
  border-top: 1px solid #e5e7eb;
}
.rp-navy h2:not(:first-child),
.rp-dark h2:not(:first-child) { border-top-color: rgba(255,255,255,.1); }

/* ── DOUBLE-SIDEBAR FIX ─────────────────────────────────────── */
.rp-layout .resource-sidebar { display: none !important; }
.rp-layout { grid-template-columns: 1fr 340px; }
@media(max-width: 1100px) { .rp-layout { grid-template-columns: 1fr 290px; } }
@media(max-width: 860px)  { .rp-layout { grid-template-columns: 1fr; } }

/* ── BULLET LIST VISUAL POLISH ──────────────────────────────── */
.rp-section ul:not(.rp-checklist):not(.rp-steps):not([class]):not(.mega-menu ul):not(.dropdown ul):not(footer ul) {
  padding-left: 0;
  list-style: none;
  margin: 1rem 0 1.5rem;
}
.rp-section ul:not(.rp-checklist):not(.rp-steps):not([class]) li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .45rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: .95rem; color: #515355; line-height: 1.6;
}
.rp-section ul:not(.rp-checklist):not(.rp-steps):not([class]) li:last-child { border-bottom: none; }
.rp-section ul:not(.rp-checklist):not(.rp-steps):not([class]) li::before {
  content: '';
  width: 18px; height: 18px; min-width: 18px;
  background: #00663C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  border-radius: 50%; margin-top: 2px; flex-shrink: 0;
}
.primary-nav ul li::before,
.mobile-nav ul li::before,
footer ul li::before,
.mega-menu ul li::before,
.dropdown ul li::before,
.rp-toc ul li::before,
.rp-sidebar ul li::before { display: none !important; }

/* ── KEY-TAKEAWAYS BOX ─────────────────────────────────────── */
.key-takeaways {
  background: linear-gradient(135deg, #0D151D 0%, #1a2b3c 100%);
  border-radius: 16px; padding: 2rem 2.25rem;
  margin: 2rem 0 3rem;
  box-shadow: 0 8px 32px rgba(13,21,29,.2);
}
.key-takeaways strong {
  display: block; color: #EBB017 !important;
  font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.key-takeaways ul { list-style: none; padding: 0; margin: 0; }
.key-takeaways li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.88) !important; font-size: .94rem; line-height: 1.6;
}
.key-takeaways li:last-child { border-bottom: none; }
.key-takeaways li::before {
  content: ''; width: 18px; height: 18px; min-width: 18px;
  background: #EBB017 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%230D151D' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  border-radius: 50%; margin-top: 2px; flex-shrink: 0;
}

/* ── AEO ANSWER BOX ─────────────────────────────────────────── */
/* duplicate aeo-answer block removed */

/* Photo pair — two real fence photos side by side */
.rp-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0;
}
.rp-photo-pair img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
@media (max-width: 640px) {
  .rp-photo-pair { grid-template-columns: 1fr; }
  .rp-photo-pair img { height: 200px; }
}

/* ═══════════════════════════════════════════════════════
   rp-article: main content column inside rp-layout grid
   (was missing entirely — causing content to be invisible)
   ═══════════════════════════════════════════════════════ */
.rp-article {
  min-width: 0;          /* critical: prevents grid blowout */
  width: 100%;
}
.rp-article .container,
.rp-article .content-wrap,
.rp-article div.container {
  max-width: 100% !important;  /* nested .container was collapsing the column */
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}
.rp-article h2 { font-size: 1.5rem; color: var(--navy); margin: 2.5rem 0 .85rem; line-height: 1.3; }
.rp-article h3 { font-size: 1.18rem; color: var(--navy); margin: 1.75rem 0 .6rem; }
.rp-article p  { color: var(--body-text); line-height: 1.78; margin-bottom: 1.1rem; }
.rp-article ul,
.rp-article ol { margin: 0 0 1.25rem 1.5rem; }
.rp-article li { color: var(--body-text); line-height: 1.7; margin-bottom: .4rem; }
.rp-article a  { color: var(--green); }
.rp-article a:hover { text-decoration: underline; }