/* =========================================================
   R2R lower-page section system V1
   Applies the approved visual language across:
   Social Housing / Private Renting / Private Landlord
   ========================================================= */

.r2r-flow-section,
.r2r-tools-section,
.r2r-guidance-section{
  position:relative;
  overflow:hidden;
}

.r2r-flow-section{
  padding:62px 0 54px !important;
}
.r2r-tools-section{
  padding:58px 0 !important;
}
.r2r-guidance-section{
  padding:54px 0 !important;
}

/* product tinting */
.r2r-private.r2r-flow-section,
.r2r-private.r2r-tools-section,
.r2r-private.r2r-guidance-section{
  background:linear-gradient(180deg,#fbf8ff 0%,#f7f2ff 100%) !important;
}
.r2r-social.r2r-flow-section,
.r2r-social.r2r-tools-section,
.r2r-social.r2r-guidance-section{
  background:linear-gradient(180deg,#f7fcfd 0%,#edf9fb 100%) !important;
}
.r2r-landlord.r2r-flow-section,
.r2r-landlord.r2r-tools-section,
.r2r-landlord.r2r-guidance-section{
  background:linear-gradient(180deg,#fbfcf7 0%,#f1f6e9 100%) !important;
}

/* section headers */
.r2r-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}
.r2r-section-heading .section-title{
  margin:0 !important;
  text-align:left !important;
  max-width:780px;
}
.r2r-section-heading .section-title h2{
  margin:5px 0 8px !important;
  font-size:clamp(32px,4vw,48px) !important;
  line-height:1.08 !important;
  font-weight:560 !important;
  letter-spacing:-.025em !important;
}
.r2r-section-heading .section-title p{
  margin:0 !important;
  max-width:720px;
  font-size:15.5px;
  line-height:1.5;
}
.r2r-kicker{
  display:block;
  margin-bottom:5px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.r2r-private .r2r-kicker{color:#7748c8}
.r2r-social .r2r-kicker{color:#0b859d}
.r2r-landlord .r2r-kicker{color:#637e38}

/* ========================
   Stage selector
   ======================== */
.r2r-flow-section .journey{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:12px !important;
}
.r2r-flow-section .journey-item{
  position:relative;
  min-height:172px !important;
  padding:18px 17px 16px !important;
  border-radius:18px !important;
  border:1px solid rgba(30,58,87,.11) !important;
  background:rgba(255,255,255,.93) !important;
  box-shadow:0 8px 24px rgba(22,50,78,.055) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:0 !important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease !important;
}
.r2r-flow-section .journey-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(22,50,78,.085) !important;
}
.r2r-private .journey-item:hover{border-color:#a98be2 !important}
.r2r-social .journey-item:hover{border-color:#5bb5c5 !important}
.r2r-landlord .journey-item:hover{border-color:#91ad69 !important}

.r2r-flow-section .jicon{
  width:48px !important;
  height:48px !important;
  margin:0 0 15px !important;
  border-radius:50%;
  display:grid !important;
  place-items:center !important;
  font-size:22px !important;
}
.r2r-private .jicon{background:#f0e9ff}
.r2r-social .jicon{background:#e4f6f9}
.r2r-landlord .jicon{background:#ebf3e0}

.r2r-flow-section .journey-item strong{
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:680 !important;
  color:#163d64;
}
.r2r-landlord .journey-item strong{color:#315337}
.r2r-stage-copy{
  display:block;
  margin-top:7px;
  color:#60758a;
  font-size:12.8px;
  line-height:1.4;
}
.r2r-stage-arrow{
  position:absolute;
  right:15px;
  bottom:13px;
  font-size:20px;
  line-height:1;
  font-weight:700;
}
.r2r-private .r2r-stage-arrow{color:#7548c4}
.r2r-social .r2r-stage-arrow{color:#0b879f}
.r2r-landlord .r2r-stage-arrow{color:#617d39}

/* ========================
   Tools area
   ======================== */
.r2r-tools-layout{
  display:grid;
  grid-template-columns:minmax(270px,.72fr) minmax(0,1.7fr);
  gap:22px;
  align-items:stretch;
}
.r2r-tools-visual{
  min-height:470px;
  border-radius:24px;
  overflow:hidden;
  position:relative;
  background-size:cover;
  background-position:center;
  box-shadow:0 12px 30px rgba(23,51,79,.08);
}
.r2r-private .r2r-tools-visual{background-image:url("assets/private-choice-v3.jpg")}
.r2r-social .r2r-tools-visual{background-image:url("assets/social-choice-v3.jpg")}
.r2r-landlord .r2r-tools-visual{background-image:url("assets/landlord-choice-v3.jpg")}
.r2r-tools-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(12,38,62,.6));
}
.r2r-tools-visual-copy{
  position:absolute;
  z-index:2;
  left:20px;
  right:20px;
  bottom:20px;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(7px);
}
.r2r-tools-visual-copy strong{
  display:block;
  color:#153d68;
  font-size:16px;
  line-height:1.3;
}
.r2r-tools-visual-copy span{
  display:block;
  margin-top:4px;
  color:#61758a;
  font-size:12.8px;
  line-height:1.4;
}

.r2r-tools-section .quiz-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
.r2r-tools-section .quiz-card{
  min-height:230px;
  border-radius:18px !important;
  border:1px solid rgba(30,58,87,.11) !important;
  background:rgba(255,255,255,.95) !important;
  box-shadow:0 7px 22px rgba(24,50,77,.05) !important;
  padding:18px !important;
}
.r2r-tools-section .quiz-card .eyebrow{
  margin-bottom:7px !important;
  font-size:11.5px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
}
.r2r-private .quiz-card .eyebrow{color:#7a49ca}
.r2r-social .quiz-card .eyebrow{color:#0c849b}
.r2r-landlord .quiz-card .eyebrow{color:#607b38}

.r2r-tools-section .quiz-card h3{
  margin:0 0 10px !important;
  font-size:18px !important;
  line-height:1.3 !important;
  font-weight:650 !important;
}
.r2r-tools-section .tool-actions{
  margin-top:12px;
}
.r2r-tools-section .btn.small{
  border-radius:10px !important;
}
.r2r-tools-section .check-list{
  display:grid;
  gap:6px;
}
.r2r-tools-section .check-list label{
  font-size:13px;
  color:#425f79;
}

/* ========================
   Nation guidance
   ======================== */
.r2r-guidance-shell{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(250px,.45fr);
  gap:24px;
  align-items:center;
}
.r2r-guidance-section .source-links{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:11px !important;
}
.r2r-guidance-section .source-links a{
  position:relative;
  min-height:76px;
  padding:14px 38px 14px 16px !important;
  border-radius:15px !important;
  background:#fff !important;
  border:1px solid rgba(30,58,87,.12) !important;
  display:flex !important;
  align-items:center;
  font-size:13.5px !important;
  line-height:1.35 !important;
  font-weight:650;
  text-decoration:none !important;
  box-shadow:0 5px 18px rgba(24,50,77,.04);
}
.r2r-guidance-section .source-links a::after{
  content:"›";
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  font-size:24px;
  font-weight:500;
}
.r2r-private .source-links a::after{color:#7448c6}
.r2r-social .source-links a::after{color:#0b879f}
.r2r-landlord .source-links a::after{color:#617d39}

.r2r-guidance-visual{
  min-height:210px;
  border-radius:22px;
  background-size:cover;
  background-position:center;
  box-shadow:0 10px 26px rgba(23,50,78,.07);
}
.r2r-private .r2r-guidance-visual{background-image:url("assets/private-documents.jpg")}
.r2r-social .r2r-guidance-visual{background-image:url("assets/social-work.jpg")}
.r2r-landlord .r2r-guidance-visual{background-image:url("assets/landlord-work.jpg")}

@media(max-width:1050px){
  .r2r-flow-section .journey{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .r2r-flow-section .journey-item:last-child{
    grid-column:span 2;
  }
  .r2r-tools-layout,
  .r2r-guidance-shell{
    grid-template-columns:1fr;
  }
  .r2r-tools-visual{
    min-height:300px;
  }
}
@media(max-width:680px){
  .r2r-flow-section,
  .r2r-tools-section,
  .r2r-guidance-section{
    padding:44px 0 !important;
  }
  .r2r-section-heading{
    display:block;
  }
  .r2r-flow-section .journey{
    grid-template-columns:1fr !important;
  }
  .r2r-flow-section .journey-item:last-child{
    grid-column:auto;
  }
  .r2r-flow-section .journey-item{
    min-height:140px !important;
  }
  .r2r-tools-section .quiz-grid,
  .r2r-guidance-section .source-links{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   R2R Stage Cards V2 — connected journey treatment
   ========================================================= */

.r2r-flow-section .journey{
  position:relative;
  isolation:isolate;
}

/* subtle connector line behind cards on desktop */
@media(min-width:1051px){
  .r2r-flow-section .journey::before{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:50%;
    height:2px;
    transform:translateY(-50%);
    z-index:-1;
    opacity:.22;
  }
  .r2r-private.r2r-flow-section .journey::before{
    background:linear-gradient(90deg,#a978df,#c87be7,#a78cf1,#f0ad55,#8a68d8);
  }
  .r2r-social.r2r-flow-section .journey::before{
    background:linear-gradient(90deg,#24a3bd,#4ea8d5,#47a9d8,#efb45d,#4ea8c9);
  }
  .r2r-landlord.r2r-flow-section .journey::before{
    background:linear-gradient(90deg,#83ae52,#7fa74b,#7ba14a,#759949,#6f9147);
  }
}

.r2r-flow-section .journey-item{
  min-height:196px !important;
  padding:18px 18px 17px !important;
  border-radius:18px !important;
  overflow:visible !important;
}

/* step number */
.r2r-step-label{
  display:block;
  margin:0 0 7px;
  font-size:11.5px;
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
}
.r2r-private .r2r-step-label{color:#7b4ac9}
.r2r-social .r2r-step-label{color:#0c879f}
.r2r-landlord .r2r-step-label{color:#5e7b36}

/* icon circles use line icons */
.r2r-flow-section .jicon{
  width:50px !important;
  height:50px !important;
  margin:0 0 13px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
}
.r2r-flow-section .jicon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.r2r-private .jicon{color:#6f3fbc;background:#f0e8ff}
.r2r-social .jicon{color:#087d96;background:#e0f5f9}
.r2r-landlord .jicon{color:#557532;background:#e8f2dc}

/* stage-specific accent for escalation */
.r2r-flow-section .journey-item[data-stage="final"] .jicon{
  color:#a56600 !important;
  background:#fff1d8 !important;
}
.r2r-flow-section .journey-item[data-stage="external"] .jicon{
  color:#5d58a8 !important;
  background:#eeecff !important;
}
.r2r-landlord.r2r-flow-section .journey-item[data-stage="external"] .jicon{
  color:#557532 !important;
  background:#e8f2dc !important;
}

.r2r-flow-section .journey-item strong{
  font-size:16.5px !important;
  line-height:1.24 !important;
  margin-bottom:0 !important;
}
.r2r-stage-copy{
  margin-top:8px !important;
  padding-right:16px;
  font-size:12.9px !important;
  line-height:1.42 !important;
}

/* compact circular arrow on each card */
.r2r-stage-arrow{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  right:14px !important;
  bottom:13px !important;
  font-size:20px !important;
  background:#fff;
  border:1px solid currentColor;
  box-shadow:0 3px 10px rgba(23,49,77,.06);
}

/* connector bubbles between cards */
@media(min-width:1051px){
  .r2r-flow-section .journey-item:not(:last-child)::after{
    content:"›";
    position:absolute;
    right:-20px;
    top:50%;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    border-radius:50%;
    display:grid;
    place-items:center;
    z-index:4;
    background:#fff;
    border:1px solid rgba(32,59,86,.12);
    box-shadow:0 3px 10px rgba(23,49,77,.05);
    font-size:18px;
    font-weight:700;
  }
  .r2r-private .journey-item:not(:last-child)::after{color:#7a49c8}
  .r2r-social .journey-item:not(:last-child)::after{color:#0b849d}
  .r2r-landlord .journey-item:not(:last-child)::after{color:#5f7c38}
}

/* selected state */
.r2r-flow-section .journey-item.is-selected{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(23,49,77,.10) !important;
}
.r2r-private .journey-item.is-selected{
  border-color:#8e67d6 !important;
  background:#fcfaff !important;
}
.r2r-social .journey-item.is-selected{
  border-color:#40a8ba !important;
  background:#f9feff !important;
}
.r2r-landlord .journey-item.is-selected{
  border-color:#89a95f !important;
  background:#fcfef9 !important;
}

@media(max-width:1050px){
  .r2r-flow-section .journey-item{
    min-height:172px !important;
  }
}


/* =========================================================
   R2R Stage Icons V3 — force clean outline icons
   Fixes inherited SVG fill rules that caused black blocks.
   ========================================================= */
.r2r-flow-section .jicon{
  overflow:hidden !important;
}
.r2r-flow-section .jicon svg{
  display:block !important;
  width:24px !important;
  height:24px !important;
  overflow:visible !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.r2r-flow-section .jicon svg *{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}