/* =====================================================================
   Home · Real-World Results section
   Replaces ONLY the existing Real-World Results section on the Home page.
   All selectors are scoped with the `rwr-` prefix so nothing leaks into
   How I Work, Featured Work, or any other section.

   IMPLEMENTATION NOTES
   - Colour values below are taken from the approved design draft, which
     was matched to screenshots of the live site. Where the site already
     defines equivalent tokens (navy, teal, light section background,
     body text grey), map these custom properties to those tokens instead
     of introducing new hex values.
   - Fonts: inherit the site's existing heading/body families. Do not load
     Questrial (it was only a stand-in in the design canvas).
   ===================================================================== */

.rwr-section {
  --rwr-navy: var(--midnight);        /* site navy (Contact button / headings) */
  --rwr-navy-deep: var(--deep);   /* button hover */
  --rwr-teal: var(--teal-ink);        /* eyebrow labels, accents (5.4:1 on bg) */
  --rwr-teal-soft: color-mix(in srgb, var(--teal-ink) 20%, white);   /* illustrative bars */
  --rwr-teal-tint: var(--signal-tint);   /* icon discs */
  --rwr-text: var(--text-2);        /* intro copy (8.4:1 on bg) */
  --rwr-muted: var(--text-3);
  --rwr-bg: var(--cool);          /* existing light section background */
  --rwr-stage: #E8EDF3;       /* illustration backdrop */
  --rwr-stage-dot: var(--rule-2);
  --rwr-stage-line: var(--rule);
  --rwr-sheet-line: var(--rule);
  --rwr-placeholder: var(--rule); /* abstract text lines */
  --rwr-placeholder-2: var(--rule-2);
  --rwr-ease: cubic-bezier(.2, .7, .2, 1);

  font-family: var(--font);
  background: var(--rwr-bg);
  color: var(--rwr-navy);
}

.rwr-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    ".    visual"
    "copy visual"
    "cta  visual"
    ".    visual";
  column-gap: 72px;
  row-gap: 0;
  align-items: center;
}

/* ---------- Copy column ---------- */
.rwr-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 520px;
}

.rwr-section .rwr-eyebrow {           /* reuse the site's existing eyebrow style if one exists */
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rwr-teal);
}

.rwr-section .rwr-heading {           /* reuse the site's existing section-heading style */
  margin: 0;
  font-size: 60px;
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 400;
  text-wrap: balance;
}

.rwr-section .rwr-intro {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--rwr-text);
  text-wrap: pretty;
}

/* ---------- Primary button ---------- */
.rwr-cta {
  grid-area: cta;
  justify-self: start;
  margin-top: 36px;
  box-sizing: border-box;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 28px;
  border-radius: 4px;
  background: var(--rwr-navy);
  color: #FFFFFF;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color .25s ease;
}
.rwr-cta:visited { color: #FFFFFF; }

.rwr-arrow {             /* replace with the site's existing arrow icon/glyph */
  flex: none; font-size: 24px; line-height: 1;
  transition: transform .25s ease;
}

/* ---------- Illustration (whole thing is a link) ---------- */
.rwr-visual {
  grid-area: visual;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 1px solid var(--rwr-stage-line);
  border-radius: 10px;
  background-color: var(--rwr-stage);
  background-image: radial-gradient(var(--rwr-stage-dot) 1px, transparent 1.2px);
  background-size: 18px 18px;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s ease, box-shadow .3s ease, transform .15s ease;
}

.rwr-visual * { pointer-events: none; } /* the <a> is always the click target */

.rwr-sheet,
.rwr-ghost,
.rwr-panel,
.rwr-flow,
.rwr-badge {
  position: absolute;
  box-sizing: border-box;
  transition:
    transform .45s var(--rwr-ease),
    opacity .35s ease,
    background-color .3s ease;
}

/* Dashed "next" sheet: the collection keeps growing */
.rwr-ghost {
  left: 44%; top: 9%; width: 36%; height: 60%;
  border: 1.5px dashed #7F8FA2;
  border-radius: 6px;
  background: rgba(255, 255, 255, .35);
  color: var(--rwr-muted);
  display: flex; align-items: center; justify-content: center;
  opacity: .55;
  transform: rotate(7deg);
}

/* Layered document sheets */
.rwr-sheet {
  width: 38%; height: 62%;
  background: #FFFFFF;
  border: 1px solid var(--rwr-sheet-line);
  border-radius: 6px;
  box-shadow: 0 10px 24px -18px rgba(23, 43, 66, .5);
}
.rwr-s1 { left: 11%; top: 17%; transform: rotate(-8deg); }
.rwr-s2 { left: 16%; top: 14%; transform: rotate(-3.5deg); }
.rwr-s3 { left: 21%; top: 11%; transform: rotate(0deg); padding: 8% 7%; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 16px 32px -20px rgba(23, 43, 66, .55); }

/* Abstract (non-readable) content lines inside the sheets */
.rwr-line { display: block; height: 5px; border-radius: 3px; background: var(--rwr-placeholder); }
.rwr-line--kicker { width: 30%; background: var(--rwr-teal); }
.rwr-line--title  { width: 72%; height: 10px; background: var(--rwr-navy); margin-bottom: 6px; }
.rwr-check { display: flex; align-items: center; gap: 6px; }
.rwr-check::before {
  content: ""; flex: none; width: 12px; height: 12px; box-sizing: border-box;
  border: 1.5px solid var(--rwr-teal); border-radius: 3px;
}
.rwr-check .rwr-line { flex: 1; }

/* Analysis panel (illustrative bars, no data) */
.rwr-panel {
  right: 7%; bottom: 10%; width: 42%; height: 38%;
  padding: 5% 6%;
  display: flex; flex-direction: column; gap: 10%;
  background: #FFFFFF;
  border: 1px solid var(--rwr-sheet-line);
  border-radius: 8px;
  box-shadow: 0 18px 36px -22px rgba(23, 43, 66, .55);
}
.rwr-panel-head { display: flex; justify-content: space-between; align-items: center; }
.rwr-panel-head .rwr-line { width: 44%; height: 6px; background: var(--rwr-navy); }
.rwr-dots { display: flex; gap: 4px; }
.rwr-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--rwr-placeholder-2); }
.rwr-dots span:first-child { background: var(--rwr-teal); }
.rwr-bars {
  flex: 1; display: flex; align-items: flex-end; gap: 7%;
  padding: 0 2%;
  border-bottom: 1.5px solid var(--rwr-placeholder-2);
}
.rwr-bars span { flex: 1; border-radius: 2px 2px 0 0; background: var(--rwr-teal-soft); }
.rwr-bars span:nth-child(1) { height: 38%; }
.rwr-bars span:nth-child(2) { height: 62%; background: var(--rwr-teal); }
.rwr-bars span:nth-child(3) { height: 48%; }
.rwr-bars span:nth-child(4) { height: 84%; background: var(--rwr-navy); }
.rwr-bars span:nth-child(5) { height: 56%; }

/* Workflow icon chip */
.rwr-flow {
  right: 7%; top: 9%;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #FFFFFF;
  border: 1px solid var(--rwr-sheet-line);
  border-radius: 999px;
  box-shadow: 0 12px 24px -18px rgba(23, 43, 66, .5);
}
.rwr-flow-icon {width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.rwr-flow-link { width: 14px; height: 1.5px; background: #9AA7B6; }

.rwr-flow-icon svg {width:16px;height:16px}

/* Corner arrow: signals the illustration is clickable */
.rwr-badge {
  left: 6%; bottom: 7%;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rwr-navy); color: #FFFFFF;
  box-shadow: 0 12px 24px -14px rgba(23, 43, 66, .7);
}

/* =====================================================================
   Interaction states
   - Hover effects are limited to devices with a real hover pointer, so
     touch devices never get a "first tap = hover" state: one tap navigates.
   - Keyboard focus on the button plays the same illustration treatment.
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
  .rwr-cta:hover { background: var(--rwr-navy-deep); color: #FFFFFF; }
  .rwr-cta:hover .rwr-arrow { transform: translateX(5px); }

  .rwr-visual:hover,
  .rwr-section:has(.rwr-cta:hover) .rwr-visual {
    border-color: var(--rwr-teal);
    box-shadow: 0 28px 56px -36px rgba(23, 43, 66, .55);
  }
  .rwr-visual:hover .rwr-s1, .rwr-section:has(.rwr-cta:hover) .rwr-s1 { transform: rotate(-13deg) translate(-18px, 8px); }
  .rwr-visual:hover .rwr-s2, .rwr-section:has(.rwr-cta:hover) .rwr-s2 { transform: rotate(-6deg) translate(-8px, 3px); }
  .rwr-visual:hover .rwr-s3, .rwr-section:has(.rwr-cta:hover) .rwr-s3 { transform: translateY(-8px); }
  .rwr-visual:hover .rwr-ghost, .rwr-section:has(.rwr-cta:hover) .rwr-ghost { transform: rotate(11deg) translate(16px, -6px); opacity: 1; }
  .rwr-visual:hover .rwr-panel, .rwr-section:has(.rwr-cta:hover) .rwr-panel { transform: translate(8px, -8px); }
  .rwr-visual:hover .rwr-flow, .rwr-section:has(.rwr-cta:hover) .rwr-flow { transform: translate(6px, -4px); }
  .rwr-visual:hover .rwr-badge, .rwr-section:has(.rwr-cta:hover) .rwr-badge { background: var(--rwr-teal); }
  .rwr-visual:hover .rwr-badge .rwr-arrow { transform: translateX(3px); }
}

/* Keyboard focus (button is the single keyboard stop for this section) */
.rwr-cta:focus-visible {
  outline: 2px solid var(--rwr-teal);
  outline-offset: 5px;
  background: var(--rwr-navy-deep);
}
.rwr-cta:focus-visible .rwr-arrow { transform: translateX(5px); }
.rwr-section:has(.rwr-cta:focus-visible) .rwr-visual { border-color: var(--rwr-teal); box-shadow: 0 28px 56px -36px rgba(23, 43, 66, .55); }
.rwr-section:has(.rwr-cta:focus-visible) .rwr-s1 { transform: rotate(-13deg) translate(-18px, 8px); }
.rwr-section:has(.rwr-cta:focus-visible) .rwr-s2 { transform: rotate(-6deg) translate(-8px, 3px); }
.rwr-section:has(.rwr-cta:focus-visible) .rwr-s3 { transform: translateY(-8px); }
.rwr-section:has(.rwr-cta:focus-visible) .rwr-ghost { transform: rotate(11deg) translate(16px, -6px); opacity: 1; }
.rwr-section:has(.rwr-cta:focus-visible) .rwr-panel { transform: translate(8px, -8px); }
.rwr-section:has(.rwr-cta:focus-visible) .rwr-flow { transform: translate(6px, -4px); }
.rwr-section:has(.rwr-cta:focus-visible) .rwr-badge { background: var(--rwr-teal); }

/* Touch press feedback: instant, never blocks or delays navigation */
.rwr-visual:active { transform: scale(.985); border-color: var(--rwr-teal); }
.rwr-visual:active .rwr-badge { background: var(--rwr-teal); }
.rwr-cta:active { background: var(--rwr-navy-deep); }

/* =====================================================================
   Responsive
   ===================================================================== */

/* Tablet landscape / small laptop: keep two columns, tighten type */
@media (max-width: 1023px) {
  .rwr-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 48px; padding: 80px 24px 88px; }
  .rwr-section .rwr-heading { font-size: 42px; line-height: 1.06; }
  .rwr-section .rwr-intro { font-size: 17px; }
  .rwr-cta { margin-top: 28px; }
}

/* Tablet portrait and below: stack, keep the illustration compact */
@media (max-width: 767px) {
  .rwr-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "copy" "visual" "cta";
    row-gap: 40px;
    padding: 72px 24px 80px;
  }
  .rwr-copy { max-width: 560px; }
  .rwr-visual { max-width: 460px; }
  .rwr-cta { margin-top: 0; }
}

/* Phone (design reference: 390px) */
@media (max-width: 599px) {
  .rwr-inner { row-gap: 32px; padding: 64px 20px 72px; }
  .rwr-copy { gap: 16px; }
  .rwr-section .rwr-eyebrow { font-size: 13px; }
  .rwr-section .rwr-heading { font-size: 40px; line-height: 1.06; letter-spacing: -0.03em; }
  .rwr-section .rwr-intro { font-size: 17px; }
  .rwr-cta { justify-self: stretch; padding: 16px 20px; gap: 12px; }
  .rwr-visual { background-size: 16px 16px; }
  .rwr-sheet { border-radius: 5px; }
  .rwr-s3 { gap: 6px; padding: 9% 7%; }
  .rwr-line { height: 4px; border-radius: 2px; }
  .rwr-line--title { height: 7px; margin-bottom: 4px; }
  .rwr-check::before { width: 9px; height: 9px; border-width: 1.3px; border-radius: 2px; }
  .rwr-panel { right: 6%; bottom: 9%; width: 44%; border-radius: 7px; }
  .rwr-panel-head .rwr-line { height: 5px; }
  .rwr-dots span { width: 5px; height: 5px; }
  .rwr-flow { right: 6%; top: 8%; gap: 5px; padding: 5px 7px; }
  .rwr-flow-icon {width:26px;height:26px}
  .rwr-flow-icon svg {width:13px;height:13px}
  .rwr-flow-link { width: 9px; }
  .rwr-badge { left: 5%; bottom: 6%; width: 44px; height: 44px; }
  .rwr-ghost svg { width: 20px; height: 20px; }
}

/* Very small phones */
@media (max-width: 359px) {
  .rwr-section .rwr-heading { font-size: 34px; }
  .rwr-cta { font-size: 15px; padding: 16px 14px; gap: 10px; }
}

/* Reduced motion: keep colour/border feedback, drop movement */
@media (prefers-reduced-motion: reduce) {
  .rwr-sheet, .rwr-ghost, .rwr-panel, .rwr-flow, .rwr-badge,
  .rwr-arrow, .rwr-cta, .rwr-visual { transition: none; }
  .rwr-section .rwr-visual .rwr-s1 { transform: rotate(-8deg) !important; }
  .rwr-section .rwr-visual .rwr-s2 { transform: rotate(-3.5deg) !important; }
  .rwr-section .rwr-visual .rwr-s3 { transform: none !important; }
  .rwr-section .rwr-visual .rwr-ghost { transform: rotate(7deg) !important; }
  .rwr-section .rwr-visual .rwr-panel,
  .rwr-section .rwr-visual .rwr-flow,
  .rwr-section .rwr-arrow,
  .rwr-visual:active { transform: none !important; }
}

/* Keep the handoff focus treatment above the shared editorial focus rule. */
.rwr-section .rwr-cta:focus-visible { outline: 2px solid var(--rwr-teal); outline-offset: 5px; }