/* ============================================================================
   Shared components
   Styles for the building blocks in includes/components.php and for blocks
   that appear on more than one page. Loaded on every page, after base.css.
   Page-only styles live in assets/css/pages/<page>.css.
   Animation for these blocks lives in motion.css.
   ========================================================================= */

/* --------------------------------------------------------------- SECTION */
.rp-section{ padding:clamp(64px,8vw,116px) 0; }
.rp-section--tight{ padding:clamp(48px,5vw,72px) 0; }
.rp-section--flush-top{ padding-top:0; }
.rp-section--flush-bottom{ padding-bottom:0; }

.rp-section--light{ background:var(--rp-cream-2); }
.rp-section--cream{ background:var(--rp-cream); }
.rp-section--dark { background:var(--rp-navy);   color:var(--rp-body-d); }
.rp-section--navy2{ background:var(--rp-navy-2); color:var(--rp-body-d); }

.rp-section--dark h1,.rp-section--dark h2,.rp-section--dark h3,.rp-section--dark h4,
.rp-section--navy2 h1,.rp-section--navy2 h2,.rp-section--navy2 h3,.rp-section--navy2 h4{
  color:var(--rp-cream);
}

/* --------------------------------------------------------- SECTION HEADER */
.rp-section-header{ max-width:62ch; margin-bottom:clamp(36px,4vw,56px); }
.rp-section-header--center{ margin-inline:auto; text-align:center; }
.rp-section-header--center .rp-lead{ margin-inline:auto; }
.rp-section-header .rp-heading{ margin-bottom:.4em; }
.rp-section-header:last-child{ margin-bottom:0; }

.rp-heading{ margin:0 0 .5em; }
.rp-heading .rp-reveal-mask{ padding-block:.12em; margin-block:-.12em; }

.rp-lead{
  font-size:clamp(1rem,1.2vw,1.09rem);
  line-height:1.78;
  max-width:60ch;
  margin:0;
}
.rp-section--dark .rp-lead,
.rp-section--navy2 .rp-lead{ color:var(--rp-body-d); }

/* ------------------------------------------------------------------ HERO
   rp_hero(): warm light gradient, centred or left-aligned. Pages add their own
   class (e.g. .rp-hero--plain, .rp-hero--contact) to adjust spacing or colour. */
.rp-hero{
  background:var(--rp-hero-bg);
  color:var(--rp-text-muted);
  padding:clamp(110px,14vw,170px) 0 clamp(80px,9vw,120px);
}
.rp-hero--home{ display:flex; align-items:center; }
.rp-hero.rp-hero--home{ padding:clamp(120px,15vw,200px) 0 clamp(130px,16vw,210px); }
.rp-hero--center{ text-align:center; }
.rp-hero--center .rp-hero__title,
.rp-hero--center .rp-hero__lead{ margin-inline:auto; }
.rp-hero--center .rp-hero__actions{ justify-content:center; }
.rp-hero{ position:relative; overflow:hidden; isolation:isolate; }
.rp-hero__inner{ position:relative; z-index:1; width:100%; }
.rp-hero__actions{ display:flex; flex-wrap:wrap; }

.rp-hero .rp-eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:.34em;
  color:#1F2937;
  margin-bottom:30px;
}
.rp-hero .rp-hero__title{
  font-weight:400;
  font-size:clamp(2.4rem,4.7vw,3.75rem);
  line-height:1.17;
  letter-spacing:-.01em;
  color:var(--rp-ink-blue);
  max-width:none;
  margin-bottom:.6em;
}
.rp-hero .rp-hero__lead{
  max-width:32em;
  font-size:clamp(.95rem,1.1vw,1rem);
  font-weight:300;
  line-height:1.7;
  color:var(--rp-text-muted);
}
.rp-hero .rp-hero__actions{ gap:28px; margin-top:clamp(40px,5vw,62px); }
:is(.rp-hero, .rp-together__actions, .rp-ready__actions) .rp-btn{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:21px clamp(34px,4.4vw,56px);
}
:is(.rp-hero, .rp-together__actions, .rp-ready__actions) .rp-btn::after{ content:"\2192"; margin-left:12px; font-size:1.1em; }
:is(.rp-hero, .rp-together__actions, .rp-ready__actions) .rp-btn--gold{
  background:var(--rp-gold-bright);
  color:var(--rp-ink-blue);
  box-shadow:0 14px 28px -14px rgba(214,160,40,.85);
}
:is(.rp-hero, .rp-together__actions, .rp-ready__actions) .rp-btn--gold:hover{ background:#F0C55A; color:var(--rp-ink-blue); }
:is(.rp-hero, .rp-together__actions, .rp-ready__actions) .rp-btn--ghost{
  color:var(--rp-ink-blue);
  border-color:rgba(22,51,94,.55);
}
:is(.rp-hero, .rp-together__actions, .rp-ready__actions) .rp-btn--ghost::before{ background:var(--rp-ink-blue); }
:is(.rp-hero, .rp-together__actions, .rp-ready__actions) .rp-btn--ghost:hover{ color:#fff; border-color:var(--rp-ink-blue); }

/* Plain hero — used by About and Services */
.rp-hero.rp-hero--plain{
  padding:clamp(120px,15vw,210px) 0 clamp(130px,16vw,230px);
}
.rp-hero--plain .rp-eyebrow{
  font-size:14px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--rp-bronze);
  margin-bottom:22px;
}
.rp-hero--plain .rp-hero__title{
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1.12;
  letter-spacing:-.025em;
}
.rp-hero--plain .rp-hero__lead{
  max-width:700px;
  font-size:clamp(1rem,1.3vw,1.125rem);
  font-weight:400;
  line-height:1.62;
  color:#4B5563;
}

/* Phones: the desktop clamp minimums leave a screen of empty space, and a
   hand-placed <br> in a lead breaks badly on a narrow line. */
@media (max-width:600px){
  .rp-hero{ padding:88px 0 72px; }
  .rp-hero.rp-hero--home{ padding:96px 0 104px; }
  .rp-hero.rp-hero--plain{ padding:88px 0 96px; }
  .rp-hero .rp-hero__lead br{ display:none; }
  .rp-hero .rp-hero__actions{ margin-top:36px; }
  :is(.rp-hero, .rp-together__actions, .rp-ready__actions) .rp-btn{ padding:18px 24px; }
}


/* ----------------------------------------------------------------- STATS */
.rp-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:1px;
  background:var(--rp-line-d);
  border-block:1px solid var(--rp-line-d);
}
.rp-section--light .rp-stats,
.rp-section--cream .rp-stats{ background:var(--rp-line); border-block-color:var(--rp-line); }

.rp-stat{
  background:var(--rp-navy-2);
  padding:40px 26px;
  text-align:center;
}
.rp-section--light .rp-stat,
.rp-section--cream .rp-stat{ background:var(--rp-cream-2); }

.rp-stat__value{
  display:block;
  font-family:var(--rp-serif);
  font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1.05;
  color:var(--rp-gold);
  font-variant-numeric:tabular-nums;
  margin-bottom:10px;
}
.rp-stat__label{
  display:block;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--rp-body-d);
}
.rp-section--light .rp-stat__label,
.rp-section--cream .rp-stat__label{ color:var(--rp-body); }

/* ----------------------------------------------------------------- SPLIT */
.rp-split{ display:grid; gap:clamp(32px,5vw,64px); }
@media (min-width:900px){
  .rp-split--6-6{ grid-template-columns:1fr 1fr; }
  .rp-split--5-7{ grid-template-columns:5fr 7fr; }
  .rp-split--7-5{ grid-template-columns:7fr 5fr; }
  .rp-split--4-8{ grid-template-columns:4fr 8fr; }
  .rp-split--8-4{ grid-template-columns:8fr 4fr; }
  .rp-split--align-center{ align-items:center; }
  .rp-split--align-end{ align-items:end; }
}

/* ------------------------------------------------------------------ FORM */
.rp-form{ display:grid; gap:20px; }
.rp-form__row{ display:grid; gap:20px; }
@media (min-width:700px){ .rp-form__row--2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.rp-form__field label{ margin-bottom:9px; }
.rp-form__hp{ position:absolute; left:-9999px; }
.rp-form__error{
  background:#FBEDED;
  border:1px solid #E2B4B4;
  color:#8C2F2F;
  padding:13px 16px;
  font-size:14px;
}
.rp-form.is-sending{ opacity:.6; pointer-events:none; }

/* Phone: country code dropdown beside the number */
.rp-phone{ display:flex; gap:10px; }
.rp-form .rp-phone select[name]{ flex:0 0 auto; width:auto; }
.rp-form .rp-phone input[name]{ flex:1 1 auto; width:auto; min-width:0; }

/* Per-field validation message (motion.js fills it in) */
.rp-form__msg{ margin:8px 0 0; font-size:13px; line-height:1.4; color:#B42318; }
.rp-form .rp-form__field.is-invalid :is(input, textarea),
.rp-form .rp-form__field.is-invalid :is(input, textarea):focus{ border-color:#D92D20; }
.rp-form__note{ font-size:12.5px; color:#8A93A5; margin:0; }

/* --------------------------------------------------------------- FIGURES */
.rp-figure{ margin:0; aspect-ratio:3/2; }

/* --------------------------------------------------------- ACCORDION EXTRAS
   Two-column answer with an "Includes" list (rp_accordion item includes). */
.rp-accordion__body--split{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(20px,4vw,56px);
}
.rp-accordion__answer p{ max-width:56ch; }
.rp-accordion__includes-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8A8F99;
  margin:0 0 10px;
}
.rp-accordion__includes ul{ list-style:none; margin:0; padding:0; }
.rp-accordion__includes li{ position:relative; padding-left:14px; font-size:12.5px; line-height:1.9; color:#374151; }
.rp-accordion__includes li::before{
  content:"";
  position:absolute;
  left:0;
  top:.85em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--rp-ink-blue);
}

@media (max-width:900px){
  .rp-accordion__body--split{ grid-template-columns:1fr; }
}



/* ---------------------------------------------------- BUTTON: OUTLINE */
.rp-btn--outline{ background:transparent; color:#374151; border-color:var(--rp-ink-blue); }
.rp-btn--outline::before{ background:var(--rp-ink-blue); }
.rp-btn--outline:hover{ color:#fff; }
.rp-btn--outline:hover::before{ transform:scaleX(1); }

/* ------------------------------------------------ CLOSING CTA: LIGHT
   .rp-together — heading + buttons on a light band (About, case studies). */
.rp-section.rp-together{ background:#fff; padding-block:clamp(80px,9vw,105px) clamp(90px,10vw,120px); }
.rp-together__header{ max-width:none; margin-bottom:clamp(36px,4vw,50px); }
.rp-together__header .rp-heading{
  font-size:clamp(2.1rem,4vw,3.15rem);
  font-weight:400;
  line-height:1.16;
  letter-spacing:0;
  color:var(--rp-ink-blue);
}
.rp-together__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:32px; }
@media (max-width:560px){
  .rp-together__actions{ gap:14px; }
}

/* ------------------------------------------------- CLOSING CTA: NAVY
   .rp-ready — heading + button on a navy band (Services, service pages). */
.rp-section.rp-ready{ background:#0A1938; padding-block:clamp(100px,12vw,145px) clamp(90px,10vw,130px); }
.rp-ready__header{ max-width:none; margin-bottom:48px; }
.rp-ready__header .rp-heading{
  font-size:clamp(2rem,3.8vw,3rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:0;
  color:#fff;
  margin-bottom:.8em;
}
.rp-ready__header .rp-lead{ max-width:none; font-size:clamp(1rem,1.4vw,1.125rem); color:#D1D5DB; }
.rp-ready__actions{ display:flex; justify-content:center; }
.rp-ready__actions .rp-btn--gold{ box-shadow:0 14px 30px -12px rgba(232,182,62,.45); }