/* ==========================================================================
   RE HOUSE — Responsive Stylesheet
   --------------------------------------------------------------------------
   All screen-size rules live here so the main stylesheet stays readable.
   Breakpoints:
     1100px — small laptop
      900px — tablet
      768px — large phone
      480px — phone
   ========================================================================== */


/* ==========================================================================
   SMALL LAPTOP — up to 1100px
   ========================================================================== */
@media (max-width: 1100px) {
  :root {
    --section-y: 5.5rem;
    --section-x: 2.5rem;
  }

  .nav { padding: 0 2.5rem; }

  .hero__right { padding: 4rem 3rem; }

  .concept { gap: 3rem; }
}


/* ==========================================================================
   TABLET — up to 900px
   ========================================================================== */
@media (max-width: 900px) {
  /* Two-column sections stack */
  .concept,
  .contact {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .concept__aside { padding-top: 0; }

  /* Service tiers stack so pricing stays readable */
  .tiers { grid-template-columns: 1fr; }

  /* --- Process becomes a vertical timeline ---------------------------
     The dot column runs down the left with the connecting line behind it,
     and each step's text sits in the second column.
     ------------------------------------------------------------------ */
  .steps { grid-template-columns: 1fr; }

  .steps__spine {
    top: 8px;
    bottom: 2.5rem;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .step {
    display: grid;
    grid-template-columns: 11px 1fr;
    column-gap: 1.5rem;
    text-align: left;
    padding: 0 0 2.5rem;
  }
  .step:last-child { padding-bottom: 0; }

  .step__dot    { grid-column: 1; grid-row: 1; margin: 5px 0 0; }
  .step__number { grid-column: 2; grid-row: 1; font-size: 11px; margin-bottom: 0.3rem; }
  .step__title  { grid-column: 2; grid-row: 2; font-size: 15px; margin-bottom: 0.3rem; }
  .step__meta   { grid-column: 2; grid-row: 3; margin-bottom: 0.5rem; }
  .step__body   { grid-column: 2; grid-row: 4; font-size: 12.5px; line-height: 1.75; }

  .footer__inner { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   LARGE PHONE — up to 768px
   ========================================================================== */
@media (max-width: 768px) {
  :root { --nav-height: 58px; }

  .nav { padding: 0 1.5rem; height: 58px; }
  .nav .wordmark__re { font-size: 24px; }

  .section         { padding: 4.5rem 1.5rem; }
  .process__wrap   { padding: 4.5rem 1.5rem; }

  /* Hero stacks: dark panel on top, headline below */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 58px;
  }
  .hero__left   { padding: 2rem 1.5rem 0; }
  .hero__spacer { display: none; }
  .hero__left-foot {
    margin: 1.75rem -1.5rem 0;
    padding: 0.85rem 1.5rem;
  }
  .hero__right     { padding: 3rem 1.5rem 3.5rem; }
  .hero__watermark { display: none; }

  .panel  { padding: 2rem 1.5rem; }

  .footer        { padding: 3rem 1.5rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__bottom { flex-direction: column; gap: 0.5rem; }

  .page { padding: calc(var(--nav-height) + 4rem) 1.5rem 4rem; }
}


/* ==========================================================================
   PHONE — up to 480px
   ========================================================================== */
@media (max-width: 480px) {
  .hero__title    { font-size: 34px; }
  .hero__buttons  { flex-direction: column; align-items: stretch; }
  .btn-primary    { text-align: center; }
  .btn-ghost      { align-self: flex-start; }

  .tier { padding: 2rem 1.5rem; }

  .concept__pullquote { font-size: 19px; }
}


/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .nav,
  .tally-slot,
  .panel__button { display: none !important; }

  body     { background: #fff; color: #000; }
  .section { padding: 1rem 0; }
  .reveal  { opacity: 1; transform: none; }
}