/* =========================================================================
   Carreh — Shared new-design layer for inner pages (site-redesign.css)
   Matches the live homepage (index.html) design language exactly.
   Everything is scoped under .rd- prefixes so it will NOT collide with any
   existing page CSS. Bare tags are only styled INSIDE .rd-section.
   Pair with site-reveal.js for scroll-reveal.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---- Palette + tokens (namespaced to avoid clobbering page vars) -------- */
:root{
  --rd-ink:#0B2318;
  --rd-forest:#0E4A28;
  --rd-deep:#0f5730;
  --rd-emerald:#40be78;
  --rd-terracotta:#C8622F;
  --rd-apricot:#E8955F;
  --rd-paper:#FFFFFF;
  --rd-sand:#FFFFFF;
  --rd-card-border:#ECECEC;
  --rd-muted:#5a6b60;

  --rd-dark-grad:linear-gradient(160deg,#0B2318 0%,#0E4A28 55%,#0f5730 100%);
  --rd-cta-grad:linear-gradient(135deg,#1F6B3D,#0E4A28);
  --rd-card-shadow:0 20px 50px -25px rgba(0,0,0,.35);
  --rd-ease:cubic-bezier(.16,1,.3,1);

  --rd-font-display:'Bricolage Grotesque',sans-serif;
  --rd-font-serif:'Instrument Serif',Georgia,serif;
  --rd-font-body:'Space Grotesk',system-ui,sans-serif;
}

/* =========================================================================
   SECTIONS — alternate light (paper) and dark (green gradient) like homepage
   ========================================================================= */
.rd-section{
  font-family:var(--rd-font-body);
  background:var(--rd-paper);
  color:var(--rd-ink);
  padding:clamp(90px,12vw,130px) 5vw;
  position:relative;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.rd-section--dark{
  background:var(--rd-dark-grad);
  color:var(--rd-paper);
}
/* Optional flat-solid variants matching the homepage's solid sections */
.rd-section--forest{ background:var(--rd-forest); color:var(--rd-paper); }
.rd-section--ink{ background:var(--rd-ink); color:var(--rd-paper); }
.rd-section--sand{ background:var(--rd-sand); color:var(--rd-ink); }

/* Optional soft radial glow blob for dark sections (matches homepage aura) */
.rd-section--dark .rd-glow,
.rd-section--forest .rd-glow,
.rd-section--ink .rd-glow{
  position:absolute;
  width:50vw;height:50vw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(64,190,120,.22),transparent 62%);
  filter:blur(30px);
  pointer-events:none;
  z-index:0;
}
.rd-glow--terracotta{ background:radial-gradient(circle,rgba(200,98,47,.25),transparent 62%); }

/* Centered content wrapper */
.rd-wrap{
  max-width:1180px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.rd-wrap--wide{ max-width:1280px; }
.rd-wrap--narrow{ max-width:820px; }

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */

/* Eyebrow / kicker — terracotta on light, emerald on dark */
.rd-kicker{
  display:inline-block;
  font-family:var(--rd-font-body);
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rd-terracotta);
  margin:0;
}
.rd-section--dark .rd-kicker,
.rd-section--forest .rd-kicker,
.rd-section--ink .rd-kicker{ color:var(--rd-emerald); }

/* H2 — Bricolage 800 with one Instrument-Serif italic word (.rd-em) */
.rd-h2{
  font-family:var(--rd-font-display);
  font-weight:800;
  font-size:clamp(34px,4.6vw,60px);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--rd-ink);
  margin:16px 0 0;
}
.rd-section--dark .rd-h2,
.rd-section--forest .rd-h2,
.rd-section--ink .rd-h2{ color:var(--rd-paper); }

/* Larger display heading for hero-style CTA blocks */
.rd-h1{
  font-family:var(--rd-font-display);
  font-weight:800;
  font-size:clamp(40px,5.6vw,84px);
  line-height:.96;
  letter-spacing:-.03em;
  color:var(--rd-ink);
  margin:0;
}
.rd-section--dark .rd-h1,
.rd-section--forest .rd-h1,
.rd-section--ink .rd-h1{ color:var(--rd-paper); }

/* Smaller sub-heading (H3) for card clusters / grouped content */
.rd-h3{
  font-family:var(--rd-font-display);
  font-weight:700;
  font-size:clamp(19px,2vw,24px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--rd-ink);
  margin:0;
}
.rd-section--dark .rd-h3,
.rd-section--forest .rd-h3,
.rd-section--ink .rd-h3{ color:var(--rd-paper); }

/* The signature italic-serif emphasis word — put ONE per heading */
.rd-em{
  font-family:var(--rd-font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--rd-terracotta);
}
/* On dark, the italic word reads as apricot (matches homepage) */
.rd-section--dark .rd-em,
.rd-section--forest .rd-em,
.rd-section--ink .rd-em{ color:var(--rd-apricot); }
/* Colour modifiers if a page wants a specific accent */
.rd-em--apricot{ color:var(--rd-apricot); }
.rd-em--forest{ color:var(--rd-forest); }
.rd-em--terracotta{ color:var(--rd-terracotta); }

/* Lead / body copy */
.rd-lead{
  font-family:var(--rd-font-body);
  font-size:clamp(17px,1.5vw,19px);
  line-height:1.6;
  color:var(--rd-muted);
  margin:22px 0 0;
  max-width:620px;
}
.rd-section--dark .rd-lead,
.rd-section--forest .rd-lead,
.rd-section--ink .rd-lead{ color:rgba(255,255,255,.8); }

/* Generic body paragraph inside a section (smaller than lead) */
.rd-section p{ font-family:var(--rd-font-body); }
.rd-body{
  font-family:var(--rd-font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--rd-muted);
  margin:0;
}
.rd-section--dark .rd-body,
.rd-section--forest .rd-body,
.rd-section--ink .rd-body{ color:rgba(255,255,255,.78); }

/* Centered heading/lead cluster helper */
.rd-head-center{ text-align:center; max-width:760px; margin-left:auto; margin-right:auto; }

/* =========================================================================
   GRID + CARDS
   ========================================================================= */
.rd-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:52px;
}
/* Fixed-column helpers (collapse responsively below) */
.rd-grid--2{ grid-template-columns:repeat(2,1fr); }
.rd-grid--3{ grid-template-columns:repeat(3,1fr); }
.rd-grid--4{ grid-template-columns:repeat(4,1fr); }

.rd-card{
  background:#fff;
  border:1px solid var(--rd-card-border);
  border-radius:22px;
  padding:30px;
  box-shadow:var(--rd-card-shadow);
  position:relative;
  overflow:hidden;
  color:var(--rd-ink);
}
.rd-card .rd-h3,
.rd-card h3{ color:var(--rd-ink); }
.rd-card p,
.rd-card .rd-body{ color:var(--rd-muted); }

/* Card variants matching homepage accent cards */
.rd-card--forest{ background:var(--rd-forest); border-color:transparent; color:var(--rd-paper); }
.rd-card--forest .rd-h3, .rd-card--forest h3{ color:var(--rd-paper); }
.rd-card--forest p, .rd-card--forest .rd-body{ color:rgba(255,255,255,.8); }

.rd-card--terracotta{ background:var(--rd-terracotta); border-color:transparent; color:var(--rd-paper); }
.rd-card--terracotta .rd-h3, .rd-card--terracotta h3{ color:var(--rd-paper); }
.rd-card--terracotta p, .rd-card--terracotta .rd-body{ color:rgba(255,255,255,.85); }

/* Glassy card for use ON dark sections */
.rd-section--dark .rd-card,
.rd-section--forest .rd-card,
.rd-section--ink .rd-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  color:var(--rd-paper);
  box-shadow:none;
}
.rd-section--dark .rd-card p, .rd-section--dark .rd-card .rd-body,
.rd-section--forest .rd-card p, .rd-section--forest .rd-card .rd-body,
.rd-section--ink .rd-card p, .rd-section--ink .rd-card .rd-body{ color:rgba(255,255,255,.78); }

/* Card icon (emoji glyph) */
.rd-card-icon{ font-size:38px; line-height:1; }
/* Big numbered step glyph (matches "Save from Social" 1-2-3) */
.rd-card-num{ font-family:var(--rd-font-display); font-weight:800; font-size:40px; line-height:1; color:var(--rd-apricot); }

/* Decorative corner blob for accent cards */
.rd-card-blob{ position:absolute; top:-30px; right:-30px; width:120px; height:120px; border-radius:50%; background:rgba(64,190,120,.2); pointer-events:none; }

/* =========================================================================
   BUTTONS / PILLS — radius 100px
   ========================================================================= */
.rd-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--rd-font-body);
  font-weight:600;
  font-size:15px;
  line-height:1;
  padding:14px 26px;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s var(--rd-ease),box-shadow .2s var(--rd-ease),background .2s ease,color .2s ease;
}
.rd-btn:hover{ transform:translateY(-2px); }

/* Solid green-gradient CTA with cream text */
.rd-btn--solid{
  background:var(--rd-cta-grad);
  color:var(--rd-paper);
  box-shadow:0 12px 30px -12px rgba(14,74,40,.6);
}
.rd-btn--solid:hover{ color:var(--rd-paper); box-shadow:0 18px 40px -14px rgba(14,74,40,.7); }

/* Ghost / outline pill — adapts to light or dark section */
.rd-btn--ghost{
  background:transparent;
  color:var(--rd-forest);
  border-color:var(--rd-card-border);
}
.rd-btn--ghost:hover{ background:rgba(14,74,40,.06); color:var(--rd-forest); }
.rd-section--dark .rd-btn--ghost,
.rd-section--forest .rd-btn--ghost,
.rd-section--ink .rd-btn--ghost{
  color:var(--rd-paper);
  border-color:rgba(255,255,255,.28);
}
.rd-section--dark .rd-btn--ghost:hover,
.rd-section--forest .rd-btn--ghost:hover,
.rd-section--ink .rd-btn--ghost:hover{ background:rgba(255,255,255,.08); color:var(--rd-paper); }

/* Terracotta solid pill (secondary accent) */
.rd-btn--terracotta{
  background:linear-gradient(135deg,var(--rd-apricot),var(--rd-terracotta));
  color:var(--rd-paper);
  box-shadow:0 12px 30px -12px rgba(200,98,47,.6);
}
.rd-btn--terracotta:hover{ color:var(--rd-paper); }

/* Small static pill / chip (non-interactive tags like "✈️ Flights") */
.rd-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--rd-font-body);
  font-weight:500;
  font-size:14px;
  line-height:1;
  padding:9px 16px;
  border-radius:100px;
  background:#fff;
  border:1px solid var(--rd-card-border);
  color:var(--rd-ink);
}
.rd-section--dark .rd-pill,
.rd-section--forest .rd-pill,
.rd-section--ink .rd-pill{
  background:transparent;
  border-color:rgba(255,255,255,.16);
  color:var(--rd-paper);
}
/* Filled/active chip */
.rd-pill--active{ background:var(--rd-terracotta); border-color:transparent; color:var(--rd-paper); font-weight:600; }

/* Row of pills */
.rd-pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }

/* Button row */
.rd-btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; align-items:center; }
.rd-head-center .rd-btn-row,
.rd-btn-row--center{ justify-content:center; }

/* =========================================================================
   SCROLL-REVEAL
   Elements start hidden; site-reveal.js adds .rd-in when in view.
   ========================================================================= */
.rd-reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--rd-ease),transform .8s var(--rd-ease);
  will-change:opacity,transform;
}
.rd-reveal.rd-in{
  opacity:1;
  transform:none;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:1024px){
  .rd-grid--4{ grid-template-columns:repeat(2,1fr); }
  .rd-grid--3{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:760px){
  .rd-section{ padding-left:6vw; padding-right:6vw; }
  .rd-grid,
  .rd-grid--2,
  .rd-grid--3{ grid-template-columns:1fr; }
  .rd-grid--4{ grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .rd-grid--4{ grid-template-columns:1fr; }
}

/* =========================================================================
   REDUCED MOTION — reveal immediately, kill transitions/hover-lift
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  .rd-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .rd-btn:hover{ transform:none; }
}