/* ═══════════════════════════════════════════════════════════
   Remote Hive — Our Approach
   File : assets/css/ourapproach.css
   Ver  : 5.5.8
   ═══════════════════════════════════════════════════════════ */

:root {
  --rh-oa-color-primary:   #0891b2;   /* sea blue  */
  --rh-oa-color-secondary: #2dd4bf;   /* sea green */
  --rh-oa-color-text:      #0a0a0f;
  --rh-oa-color-muted:     #555;
  --rh-oa-radius:          20px;
}

/* ═══ Section ═══ */
.rh-oa-section {
  position: relative;
  width: 100%;
  padding: 90px 0 110px;
  background: #fff;
  overflow: hidden;
}
.rh-oa-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(8,145,178,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.rh-oa-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

/* ═══ Two-Column Grid ═══ */
.rh-oa-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 54px;
  align-items: start;
}

/* ═══ LEFT ═══ */
.rh-oa-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ═══════════════════════════════════════════════════════════
   H2 — Stroke-draw animation
   ─────────────────────────────────────────────────────────
   Phase 1 (0–0.6s)  : Fade-up, text visible as OUTLINES only
   Phase 2 (1.2–2.2s): Outlines fill → solid sea blue / sea green
   Heading text stays in place & readable the entire time.
   ═══════════════════════════════════════════════════════════ */
.rh-oa-heading {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 6px;

  /* Fallback for non-webkit */
  color: var(--rh-oa-color-primary);

  /* Start as outlines (sea blue stroke, transparent fill) */
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.8px var(--rh-oa-color-primary);

  opacity: 0;
  animation:
    rh-oa-fadeUp .6s ease .15s forwards,
    rh-oa-strokeFill 1s ease 1.2s forwards;
}

/* "Work" — sea green outline → sea green solid */
.rh-oa-heading em {
  font-style: italic;
  -webkit-text-stroke-color: var(--rh-oa-color-secondary);
  color: var(--rh-oa-color-secondary);
  animation: rh-oa-strokeFillGreen 1s ease 1.2s forwards;
}

/* Fade + slide up */
@keyframes rh-oa-fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "How We" → sea blue solid */
@keyframes rh-oa-strokeFill {
  to {
    -webkit-text-fill-color: var(--rh-oa-color-primary);
    -webkit-text-stroke: 0px transparent;
  }
}

/* "Work" → sea green solid */
@keyframes rh-oa-strokeFillGreen {
  to {
    -webkit-text-fill-color: var(--rh-oa-color-secondary);
    -webkit-text-stroke: 0px transparent;
  }
}

.rh-oa-sub {
  font-size: .88rem;
  color: var(--rh-oa-color-muted);
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 40px;
  opacity: 0;
  animation: rh-oa-fadeUp .6s ease .3s forwards;
}

/* ═══ Stepper Track ═══ */
.rh-oa-track { position: relative; }

.rh-oa-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.rh-oa-p-base {
  fill: none;
  stroke: rgba(8,145,178,.15);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rh-oa-p-glow {
  fill: none;
  stroke: var(--rh-oa-color-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: blur(5px);
}
.rh-oa-p-fill {
  fill: none;
  stroke: url(#rh-oa-grad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

/* ── Step Rows ── */
.rh-oa-rows { position:relative; z-index:1; display:flex; flex-direction:column; gap:44px; }
.rh-oa-r1,
.rh-oa-r2   { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; }
.rh-oa-r3   { display:flex; justify-content:center; }

/* ── Node ── */
.rh-oa-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .5s ease, transform .5s ease;
}
.rh-oa-node.rh-vis { opacity:1; transform:scale(1); }

.rh-oa-stepname {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--rh-oa-color-text);
  line-height: 1;
  margin: 0;
}

.rh-oa-circle {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rh-oa-color-primary), var(--rh-oa-color-secondary));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 20px rgba(8,145,178,.18), 0 0 0 3px #fff, 0 0 0 5px rgba(8,145,178,.08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.rh-oa-circle:hover {
  transform: scale(1.08);
  box-shadow: 0 7px 26px rgba(8,145,178,.26), 0 0 0 3px #fff, 0 0 0 5px rgba(8,145,178,.14);
}
.rh-oa-circle svg { width:24px; height:24px; }

.rh-oa-nodelabel {
  font-size: .78rem;
  font-weight: 600;
  color: #444;
  text-align: center;
  max-width: 170px;
  line-height: 1.45;
  background: rgba(255,255,255,.95);
  padding: 3px 9px;
  border-radius: 7px;
}

/* ═══ RIGHT COLUMN ═══ */
.rh-oa-right {
  display: flex;
  flex-direction: column;
  gap: 26px;
  opacity: 0;
  animation: rh-oa-fadeUp .7s ease .35s forwards;
}

/* ── Email Card ── */
.rh-oa-emailcard {
  position: relative;
  background: linear-gradient(150deg, #f3fbfd, #eef9f7);
  border: 1.5px solid rgba(8,145,178,.1);
  border-radius: var(--rh-oa-radius);
  padding: 38px 30px 34px;
  overflow: visible;
}
.rh-oa-emailcard::before {
  content:''; position:absolute; top:-1px; right:-1px;
  width:75px; height:75px;
  background-image:radial-gradient(circle,var(--rh-oa-color-primary) 1.5px,transparent 1.5px);
  background-size:10px 10px;
  border-radius:0 var(--rh-oa-radius) 0 0;
  opacity:.3; pointer-events:none;
}
.rh-oa-emailcard::after {
  content:''; position:absolute; bottom:-1px; left:-1px;
  width:75px; height:75px;
  background-image:radial-gradient(circle,var(--rh-oa-color-secondary) 1.5px,transparent 1.5px);
  background-size:10px 10px;
  border-radius:0 0 0 var(--rh-oa-radius);
  opacity:.3; pointer-events:none;
}

.rh-oa-emailcard-title {
  font-family:'Sora',sans-serif; font-size:1.3rem; font-weight:700;
  color:var(--rh-oa-color-text); margin-bottom:6px; line-height:1.3;
}
.rh-oa-emailcard-sub { font-size:.84rem; color:#666; line-height:1.65; margin-bottom:22px; }

.rh-oa-emailrow {
  display:flex; gap:0; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 18px rgba(8,145,178,.07),0 0 0 1px rgba(8,145,178,.1);
  transition:box-shadow .3s ease;
}
.rh-oa-emailrow:focus-within {
  box-shadow:0 4px 22px rgba(8,145,178,.16),0 0 0 2px rgba(8,145,178,.22);
}

/* ── Email error state ── */
.rh-oa-emailrow--error {
  box-shadow:0 4px 18px rgba(239,68,68,.12),0 0 0 2px rgba(239,68,68,.55);
  animation:rh-oa-shake .4s ease;
}
.rh-oa-emailinput--error::placeholder { color:#ef4444; }

@keyframes rh-oa-shake {
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-6px); }
  40%     { transform:translateX(5px); }
  60%     { transform:translateX(-4px); }
  80%     { transform:translateX(3px); }
}

.rh-oa-emailinput {
  flex:1; border:none; outline:none; padding:13px 16px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.86rem;
  color:var(--rh-oa-color-text); background:#fff;
  transition:color .3s ease;
}
.rh-oa-emailinput::placeholder { color:#aaa; transition:color .3s ease; }

.rh-oa-emailbtn {
  border:none; outline:none; cursor:pointer;
  padding:13px 22px;
  background:linear-gradient(135deg,var(--rh-oa-color-primary),#0e7490);
  color:#fff; font-family:'Sora',sans-serif; font-weight:700; font-size:.82rem;
  display:flex; align-items:center; gap:7px;
  transition:all .3s ease; white-space:nowrap;
}
.rh-oa-emailbtn:hover {
  background:linear-gradient(135deg,#0e7490,#155e75);
  padding-right:26px;
}
.rh-oa-emailbtn svg { width:15px; height:15px; transition:transform .3s ease; }
.rh-oa-emailbtn:hover svg { transform:translateX(3px); }

/* ═══ Chat Testimonials + Confetti ═══
   chatwrap = flex:1 (original size preserved)
   chat    = absolute positioned inside → content changes
             never affect parent height → no page jump ═══ */
.rh-oa-chatwrap { position:relative; border-radius:18px; overflow:hidden; background:#fff; flex:1; min-height:500px; }
.rh-oa-confetti  { position:absolute; inset:0; z-index:0; pointer-events:none; }

.rh-oa-chat {
  position:absolute; top:0; left:0; right:0; bottom:0;
  z-index:1;
  display:flex; flex-direction:column;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
}
.rh-oa-chat::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:45px;
  background:linear-gradient(transparent,#fff); pointer-events:none; z-index:3;
}

.rh-oa-chatrow {
  display:flex; align-items:flex-end; gap:8px; max-width:82%;
  opacity:0; transform:translateY(12px);
  transition:opacity .4s ease,transform .4s ease;
}
.rh-oa-chatrow.rh-chat-show  { opacity:1; transform:translateY(0); }
.rh-oa-chatrow.rh-chat-left  { align-self:flex-start; }
.rh-oa-chatrow.rh-chat-right { align-self:flex-end; flex-direction:row-reverse; }

.rh-oa-chatav {
  width:26px; height:26px; min-width:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.58rem; font-weight:800; color:#fff; flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

.rh-oa-chatbub {
  padding:9px 13px; border-radius:16px; position:relative;
  line-height:1.5; box-shadow:0 1px 8px rgba(0,0,0,.05);
}
.rh-oa-chatrow.rh-chat-left  .rh-oa-chatbub { border-bottom-left-radius:4px; }
.rh-oa-chatrow.rh-chat-right .rh-oa-chatbub { border-bottom-right-radius:4px; }

.rh-oa-chatmsg  { font-size:.76rem; font-weight:500; }
.rh-oa-chatname { font-size:.62rem; font-weight:700; margin-bottom:2px; opacity:.75; }
.rh-oa-chatco   {
  font-size:.56rem; font-weight:600; color:rgba(255,255,255,.7);
  margin-top:4px; padding-top:4px; border-top:1px solid rgba(255,255,255,.25);
}
.rh-oa-cbub-reply .rh-oa-chatco { color:#555; border-top-color:rgba(0,0,0,.08); }

.rh-oa-cbub-blue   { background:linear-gradient(135deg,#0891b2,#22d3ee); color:#fff; }
.rh-oa-cbub-teal   { background:linear-gradient(135deg,#2dd4bf,#5eead4); color:#fff; }
.rh-oa-cbub-purple { background:linear-gradient(135deg,#8b5cf6,#a78bfa); color:#fff; }
.rh-oa-cbub-coral  { background:linear-gradient(135deg,#f97066,#fb923c); color:#fff; }
.rh-oa-cbub-pink   { background:linear-gradient(135deg,#ec4899,#f472b6); color:#fff; }

.rh-oa-cbub-reply                  { background:#f0f6f7; color:#1a1a2e; }
.rh-oa-cbub-reply .rh-oa-chatname  { color:var(--rh-oa-color-primary); }
.rh-oa-cbub-reply .rh-oa-chattime  { color:#999; }

/* ═══ Responsive — 1024 ═══ */
@media (max-width:1024px) {
  .rh-oa-section    { padding:70px 0 90px; }
  .rh-oa-wrap       { padding:0 24px; }
  .rh-oa-grid       { gap:36px; }
  .rh-oa-emailcard  { padding:30px 22px 28px; }
  .rh-oa-circle     { width:54px; height:54px; }
  .rh-oa-circle svg { width:20px; height:20px; }
  .rh-oa-stepname   { font-size:1rem; }
  .rh-oa-nodelabel  { font-size:.74rem; max-width:140px; }
  .rh-oa-rows       { gap:36px; }
}

/* ═══ Responsive — 768 ═══ */
@media (max-width:768px) {
  .rh-oa-section { padding:55px 0 75px; }
  .rh-oa-wrap    { padding:0 16px; }
  .rh-oa-grid    { grid-template-columns:1fr; gap:44px; }
  .rh-oa-left    { align-items:center; }
  .rh-oa-sub     { max-width:100%; text-align:center; }

  .rh-oa-right     { display:flex; flex-direction:column; }
  .rh-oa-emailcard { order:2; padding:26px 18px 22px; }
  .rh-oa-chatwrap  { order:1; min-height:440px; }

  .rh-oa-emailcard::before,
  .rh-oa-emailcard::after { width:55px; height:55px; }

  .rh-oa-heading { font-size:clamp(1.7rem,7vw,2.2rem); -webkit-text-stroke-width:1.4px; }

  .rh-oa-circle {
    width:50px; height:50px;
    box-shadow:0 4px 14px rgba(8,145,178,.12),0 0 0 2px #fff,0 0 0 4px rgba(8,145,178,.06);
  }
  .rh-oa-circle svg { width:20px; height:20px; }
  .rh-oa-stepname   { font-size:.95rem; }
  .rh-oa-nodelabel  { font-size:.72rem; max-width:120px; padding:2px 7px; }
  .rh-oa-rows       { gap:30px; }
  .rh-oa-r1,.rh-oa-r2 { gap:14px; }
  .rh-oa-chatrow    { max-width:88%; }
  .rh-oa-chat       { gap:12px; }
}

/* ═══ Responsive — 420 ═══ */
@media (max-width:420px) {
  .rh-oa-wrap    { padding:0 10px; }
  .rh-oa-heading { -webkit-text-stroke-width:1.2px; }

  .rh-oa-emailrow   { flex-direction:column; }
  .rh-oa-emailbtn   { justify-content:center; padding:12px 18px; }
  .rh-oa-chatwrap   { min-height:380px; }
  .rh-oa-circle     { width:44px; height:44px; }
  .rh-oa-circle svg { width:17px; height:17px; }
  .rh-oa-stepname   { font-size:.88rem; }
  .rh-oa-nodelabel  { font-size:.68rem; max-width:105px; }
  .rh-oa-rows       { gap:24px; }
  .rh-oa-chatrow    { max-width:92%; }
  .rh-oa-chatbub    { padding:8px 11px; }
  .rh-oa-chatmsg    { font-size:.72rem; }
  .rh-oa-chatav     { width:22px; height:22px; min-width:22px; font-size:.5rem; }
  .rh-oa-chat       { gap:10px; padding:10px; }
}