/* Restoration page styles – minimal, leveraging base.css tokens and utilities */
:root {
  --r-ivory: var(--color-ivory, #f7f4ee);
  --r-gold: var(--color-gold, #c9a14a);
  --r-blue: var(--color-midnight, #0f1830);
  --r-amber: var(--color-amber, #ffcc7a);
  --r-ink: var(--color-ink, #121212);
}

.r-container { max-width: 1200px; margin-inline: auto; padding: 1.25rem; }

.r-breadcrumb ol { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0; font-size: .95rem; }
.r-breadcrumb a { color: var(--r-blue); text-decoration: none; }
.r-breadcrumb li+li::before { content: "/"; opacity: .5; margin: 0 .5rem; }

.r-hero { background: linear-gradient(180deg, var(--r-ivory) 0%, #fff 100%); border-bottom: 1px solid rgba(0,0,0,.06); }
.r-hero .r-container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
.r-hero__content h1 { font-size: clamp(1.8rem, 2.6vw, 3rem); line-height: 1.15; margin: 0 0 .75rem; }
.r-hero__content p { color: rgba(0,0,0,.78); margin: 0 0 1.25rem; }
.r-hero__figure img { width: 100%; height: auto; border-radius: .75rem; box-shadow: 0 6px 28px rgba(0,0,0,.12); }
.r-hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; }

.r-btn { display: inline-block; background: var(--r-blue); color: #fff; padding: .7rem 1rem; border-radius: .5rem; text-decoration: none; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease; }
.r-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.r-btn--ghost { background: transparent; color: var(--r-blue); border-color: var(--r-blue); }

.r-section { padding: clamp(2rem, 4vw, 4rem) 0; background: #fff; }
.r-section--alt { background: var(--r-ivory); }
.r-section--tight { padding-top: 2rem; padding-bottom: 2rem; }

.r-grid { display: grid; gap: 1.25rem; }
.r-grid--2 { grid-template-columns: 1fr 1fr; }
.r-grid--3 { grid-template-columns: repeat(3, 1fr); }

.r-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.r-list li { margin: .4rem 0; }

.r-cards { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.r-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: .75rem; padding: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.r-cards--plans .r-card h3 { color: var(--r-blue); }

.r-profile { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: .75rem; padding: 1rem; }

/* Timeline */
.r-timeline { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 0; }
.r-timeline li { counter-increment: step; position: relative; padding-left: 2.25rem; margin: .75rem 0; }
.r-timeline li::before { content: counter(step); position: absolute; left: 0; top: .1rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; background: var(--r-blue); color: #fff; border-radius: 999px; font-size: .9rem; }

/* Quotes */
.r-quote { margin: 0 0 1rem; padding: 1rem 1.25rem; background: #fff; border-left: 4px solid var(--r-gold); border-radius: .5rem; }
.r-quote cite { display: block; margin-top: .5rem; color: rgba(0,0,0,.7); font-style: normal; }

/* Before/After component */
.r-before-after { position: relative; border-radius: .75rem; overflow: hidden; box-shadow: 0 6px 28px rgba(0,0,0,.12); --ba: 50; }
.r-before-after > img { display: block; width: 100%; height: auto; }
.r-before-after__after { position: absolute; inset: 0; width: calc(var(--ba) * 1%); height: 100%; object-fit: cover; object-position: left top; border-right: 2px solid var(--r-gold); }
.r-before-after__slider { position: absolute; inset: auto 0 0 0; background: linear-gradient(180deg, rgba(15,24,48,.0), rgba(15,24,48,.55)); padding: .75rem; display: flex; justify-content: center; }
.r-before-after__slider input[type="range"] { width: min(560px, 90%); accent-color: var(--r-gold); }

/* CTA band */
.r-cta-band { background: linear-gradient(180deg, #0f1830, #171e33); color: #fff; }
.r-cta-band__inner { display: grid; gap: 1rem; grid-template-columns: 1.2fr .8fr; align-items: center; }
.r-cta-band .r-btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }

/* Accessibility helpers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Responsive */
@media (max-width: 960px) {
  .r-hero .r-container { grid-template-columns: 1fr; }
  .r-grid--2 { grid-template-columns: 1fr; }
  .r-grid--3 { grid-template-columns: 1fr; }
  .r-cta-band__inner { grid-template-columns: 1fr; }
}