/* ═══════════════════════════════════════════════════════════════
   HAYLEY Pro — Bootstrap 5 Resume Template
   Shared stylesheet for all 9 profession templates.
   CSS custom properties are set dynamically by resume-template.js.
═══════════════════════════════════════════════════════════════ */

/* ── Custom properties (defaults; overridden by JS) ── */
:root {
  --rh-bg:      #F3EFE6;
  --rh-bg-alt:  #EAE4D8;
  --rh-ink:     #141413;
  --rh-muted:   #8C8577;
  --rh-accent:  #B89A5B;
  --rh-hl:      #B9613F;
  --rh-cta:     #5EA79A;
  --rh-cta-ink: #FFFFFF;
  --rh-card:    #EDE8DF;
  --rh-div:     #D5CFC3;
  --rh-display: 'Oswald', sans-serif;
  --rh-body:    'DM Sans', sans-serif;
  --rh-decor:   0.7;
}

/* ── Transitions ── */
*, *::before, *::after {
  box-sizing: border-box;
  transition: background-color .5s ease, color .4s ease, border-color .4s ease;
}
button, input, textarea, select { transition: opacity .2s, transform .15s !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Base ── */
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--rh-bg);
  color: var(--rh-ink);
  font-family: var(--rh-body);
}
::-webkit-scrollbar { display: none; }
body { scrollbar-width: none; }

/* ── App shell ── */
#rh-app {
  position: fixed;
  inset: 0;
  background: var(--rh-bg);
}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.rh-header {
  position: fixed;
  top: 0; left: 48px; right: 48px;
  height: 72px;
  z-index: 200;
  background: var(--rh-bg);
  border-bottom: 1px solid var(--rh-div);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
}
@media (max-width: 767px) { .rh-header { left: 0; right: 0; } }

.rh-header-brand { display: flex; align-items: center; gap: 1rem; overflow: hidden; }
.rh-wordmark {
  font-family: var(--rh-display);
  font-size: 1.375rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--rh-ink); white-space: nowrap;
}
.rh-wordmark-div { width: 1px; height: 20px; background: var(--rh-div); flex-shrink: 0; }
.rh-specialties { display: flex; gap: .25rem; align-items: center; overflow: hidden; }
.rh-specialty {
  font-family: var(--rh-body); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rh-muted); white-space: nowrap;
}
.rh-specialty-dot { color: var(--rh-div); margin: 0 .375rem; font-size: 12px; }

.rh-header-right { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }
.rh-contact-link {
  font-family: var(--rh-body); font-size: 12px;
  color: var(--rh-muted); text-decoration: none;
  letter-spacing: .05em; white-space: nowrap;
}
.rh-contact-link:hover { color: var(--rh-accent); }

/* Hamburger */
.rh-menu-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 4px; display: flex; flex-direction: column; gap: 5px;
}
.rh-menu-btn span {
  display: block; width: 22px; height: 1.5px;
  background: var(--rh-ink); border-radius: 2px;
}

/* ═══════════════════════════════════════
   SIDEBARS
═══════════════════════════════════════ */
.rh-sidebar {
  position: fixed; top: 0; bottom: 0; width: 48px;
  z-index: 100; background: var(--rh-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.rh-sidebar-l { left: 0; border-right: 1px solid var(--rh-div); }
.rh-sidebar-r { right: 0; border-left: 1px solid var(--rh-div); gap: 12px; }
@media (max-width: 767px) { .rh-sidebar { display: none !important; } }

.rh-sidebar-inner {
  writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  font-family: var(--rh-display); font-size: 11px; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase; color: var(--rh-muted);
  display: flex; align-items: center; gap: 12px; padding-left: 14px;
}
.rh-sidebar-num { color: var(--rh-accent); font-size: 16px; }
.rh-sidebar-name { font-size: 9px; opacity: .6; }
.rh-sidebar-bar {
  position: absolute; bottom: 120px; left: 14px;
  width: 20px; height: 80px; border-radius: 10px;
  background: var(--rh-accent); opacity: var(--rh-decor);
}

/* Pagination dots */
.rh-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rh-div); border: none; cursor: pointer;
  padding: 0; transition: all .3s ease !important; flex-shrink: 0;
}
.rh-dot.active { width: 8px; height: 8px; background: var(--rh-accent); }

/* ═══════════════════════════════════════
   SCROLL CONTAINER
═══════════════════════════════════════ */
#rh-scroll {
  position: absolute;
  top: 0; left: 48px; right: 48px; bottom: 0;
  overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
#rh-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { #rh-scroll { left: 0; right: 0; } }

/* ═══════════════════════════════════════
   SECTIONS
═══════════════════════════════════════ */
.rh-s {
  height: 100vh; scroll-snap-align: start;
  position: relative; overflow: hidden;
  padding-top: 72px;
  display: flex; align-items: center;
}
.rh-inner {
  width: 100%; position: relative; z-index: 1;
  padding: 0 4.5rem 0 5.5rem;
}
@media (max-width: 991px) { .rh-inner { padding: 0 2rem; } }
@media (max-width: 575px) { .rh-inner { padding: 0 1rem; } }

/* Section backgrounds */
.rh-bg-base { background: var(--rh-bg); }
.rh-bg-alt  { background: var(--rh-bg-alt); }
.rh-bg-dark { background: var(--rh-hl); }

/* ═══════════════════════════════════════
   DECORATIVE ELEMENTS
═══════════════════════════════════════ */
.rh-blob {
  position: absolute; border-radius: 50%;
  pointer-events: none; opacity: var(--rh-decor);
}
.rh-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid var(--rh-accent);
  opacity: calc(var(--rh-decor) * .6);
  pointer-events: none;
}
.rh-ring-light { border-color: rgba(255,255,255,.08); }

/* ═══════════════════════════════════════
   SECTION META (number + label)
═══════════════════════════════════════ */
.rh-meta { display: flex; align-items: center; gap: .875rem; margin-bottom: 2.5rem; }
.rh-meta-num {
  font-family: var(--rh-display); font-size: 12px; font-weight: 700;
  letter-spacing: .2em; color: var(--rh-accent); text-transform: uppercase;
}
.rh-meta-num.lt { color: rgba(255,255,255,.4); }
.rh-meta-line { width: 36px; height: 1px; background: var(--rh-div); flex-shrink: 0; }
.rh-meta-line.lt { background: rgba(255,255,255,.2); }
.rh-meta-lbl {
  font-family: var(--rh-body); font-size: 10px;
  letter-spacing: .2em; color: var(--rh-muted); text-transform: uppercase;
}
.rh-meta-lbl.lt { color: rgba(255,255,255,.4); }

/* ═══════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════ */
.rh-d {
  font-family: var(--rh-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.01em;
  color: var(--rh-ink); line-height: 1.12; margin: 0;
}
.rh-d-xl { font-size: clamp(40px,5.5vw,84px); }
.rh-d-lg { font-size: clamp(32px,4vw,64px); }
.rh-d-md { font-size: clamp(20px,2.2vw,32px); }
.rh-ac   { color: var(--rh-accent); }
.rh-mute { font-family: var(--rh-body); color: var(--rh-muted); line-height: 1.7; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.rh-btn {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: 1rem 2.5rem; background: var(--rh-cta); color: var(--rh-cta-ink);
  border: none; border-radius: 999px; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  font-family: var(--rh-body); font-weight: 600; text-decoration: none;
}
.rh-btn:hover { opacity: .85; transform: translateY(-1px); color: var(--rh-cta-ink); }

.rh-btn-sec {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: 0 0 4px; background: transparent; color: var(--rh-ink);
  border: none; border-bottom: 1.5px solid var(--rh-ink);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; font-family: var(--rh-body); font-weight: 600; text-decoration: none;
}
.rh-btn-sec:hover { opacity: .7; color: var(--rh-ink); }

.rh-btn-cv {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--rh-body); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rh-muted); text-decoration: none;
  font-weight: 600; border-bottom: 1px dashed var(--rh-div); padding-bottom: 2px;
}
.rh-btn-cv:hover { color: var(--rh-accent); border-color: var(--rh-accent); }

/* ═══════════════════════════════════════
   HERO (01)
═══════════════════════════════════════ */
.rh-hero-first {
  font-family: var(--rh-display); font-weight: 300;
  font-size: clamp(24px,3.2vw,52px); color: var(--rh-muted);
  text-transform: uppercase; letter-spacing: .08em;
  line-height: 1; margin-bottom: 4px;
}
.rh-hero-last {
  font-family: var(--rh-display); font-weight: 700;
  font-size: clamp(56px,7vw,100px); color: var(--rh-ink);
  text-transform: uppercase; line-height: .9; letter-spacing: -.025em;
}
.rh-hero-div { width: 64px; height: 2px; background: var(--rh-accent); margin: 1.5rem 0; }
.rh-hero-role {
  font-family: var(--rh-body); font-size: clamp(13px,1.1vw,16px);
  font-weight: 600; color: var(--rh-ink); margin: 0 0 6px; letter-spacing: .01em;
}
.rh-hero-tagline {
  font-family: var(--rh-body); font-size: clamp(13px,1.1vw,15px);
  color: var(--rh-muted); margin: 0 0 2.5rem; line-height: 1.7; white-space: pre-line;
}
.rh-stat-num {
  font-family: var(--rh-display); font-weight: 700;
  font-size: clamp(48px,6.5vw,96px); line-height: 1;
  color: var(--rh-accent); letter-spacing: -.03em;
}
.rh-stat-lbl {
  font-family: var(--rh-body); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rh-muted); padding-bottom: 12px; max-width: 110px; line-height: 1.5;
}
.rh-license {
  margin-top: 1rem; font-family: var(--rh-body); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rh-muted);
}
.rh-photo {
  border-radius: 20px; background: var(--rh-card); border: 2px solid var(--rh-div);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; aspect-ratio: 1; max-width: 480px; width: 100%;
}
.rh-photo-initials {
  font-family: var(--rh-display); font-weight: 700;
  font-size: clamp(56px,9vw,128px); color: var(--rh-accent);
  letter-spacing: -.02em; line-height: 1;
}
.rh-photo-lbl {
  font-family: var(--rh-body); font-size: 10px;
  letter-spacing: .15em; color: var(--rh-muted); text-transform: uppercase; margin-top: 8px;
}
.rh-photo img { width: 100%; height: 100%; object-fit: cover; }
.rh-pill {
  padding: 6px 18px; border-radius: 999px; border: 1px solid var(--rh-div);
  font-family: var(--rh-body); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rh-muted); white-space: nowrap;
  display: inline-block;
}

/* ═══════════════════════════════════════
   EXPERTISE (02)
═══════════════════════════════════════ */
.rh-exp-item {
  display: grid; grid-template-columns: 48px 1fr;
  gap: 1.5rem; align-items: start;
  padding: 1.75rem 0; border-bottom: 1px solid var(--rh-div);
}
.rh-exp-n {
  font-family: var(--rh-display); font-weight: 700;
  font-size: 2.5rem; color: var(--rh-accent); line-height: 1; letter-spacing: -.02em;
}
.rh-exp-title {
  font-family: var(--rh-display); font-weight: 700; font-size: 1.375rem;
  text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 8px; color: var(--rh-ink);
}
.rh-exp-desc { font-family: var(--rh-body); font-size: 13px; color: var(--rh-muted); line-height: 1.65; margin: 0; }

/* ═══════════════════════════════════════
   WORK (03) — dark bg
═══════════════════════════════════════ */
.rh-work-yr {
  font-family: var(--rh-display); font-weight: 700;
  font-size: clamp(40px,7vw,110px); color: rgba(255,255,255,.12);
  line-height: 1; letter-spacing: -.03em; margin-bottom: -20px; user-select: none;
}
.rh-work-title {
  font-family: var(--rh-display); font-weight: 700;
  font-size: clamp(28px,3.5vw,56px); text-transform: uppercase;
  line-height: 1.15; letter-spacing: -.01em; margin: 0 0 1rem; color: rgba(255,255,255,.95);
}
.rh-work-cat {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.4); font-family: var(--rh-body); margin-bottom: 1rem;
}
.rh-work-desc { font-family: var(--rh-body); font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.7; max-width: 420px; }
.rh-work-anon {
  display: inline-block; margin-top: 1rem; padding: 4px 12px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 4px;
  font-family: var(--rh-body); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
}
.rh-tab {
  padding: 1.375rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
  cursor: pointer; opacity: .4; transition: opacity .25s !important;
}
.rh-tab.active { opacity: 1; }
.rh-tab-title {
  font-family: var(--rh-display); font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
  color: rgba(255,255,255,.95); margin-bottom: 4px;
}
.rh-tab-meta { font-family: var(--rh-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.rh-tab-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1); display: flex;
  align-items: center; justify-content: center;
  color: white; font-size: 16px; flex-shrink: 0; transition: background .25s !important;
}
.rh-tab.active .rh-tab-arrow { background: var(--rh-accent); }

/* ═══════════════════════════════════════
   CREDENTIALS (04)
═══════════════════════════════════════ */
.rh-cred-item {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--rh-div);
}
.rh-cred-item:last-child { border-bottom: none; }
.rh-cred-yr { font-family: var(--rh-display); font-weight: 700; font-size: 1.75rem; color: var(--rh-accent); line-height: 1; letter-spacing: .02em; }
.rh-cred-bubble {
  width: 44px; height: 44px; border-radius: 50%; background: var(--rh-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rh-display); font-size: 13px; font-weight: 700;
  color: var(--rh-cta-ink); text-transform: uppercase; letter-spacing: .04em; margin-top: 10px;
}
.rh-cred-inst { font-family: var(--rh-body); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--rh-muted); margin-bottom: 6px; }
.rh-cred-title { font-family: var(--rh-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; color: var(--rh-ink); line-height: 1.1; }
.rh-cred-desc { font-family: var(--rh-body); font-size: 13px; color: var(--rh-muted); line-height: 1.65; margin: 0; }

/* ═══════════════════════════════════════
   EXPERIENCE (05)
═══════════════════════════════════════ */
.rh-xp-item {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--rh-div);
}
.rh-xp-item:last-child { border-bottom: none; }
.rh-xp-yr { font-family: var(--rh-display); font-weight: 700; font-size: 1rem; color: var(--rh-accent); letter-spacing: .04em; padding-top: 4px; line-height: 1.3; }
.rh-xp-role { font-family: var(--rh-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; color: var(--rh-ink); }
.rh-xp-inst { font-family: var(--rh-body); font-size: 13px; font-weight: 600; color: var(--rh-ink); margin-bottom: 8px; }
.rh-xp-desc { font-family: var(--rh-body); font-size: 13px; color: var(--rh-muted); line-height: 1.65; margin: 0; }

/* ═══════════════════════════════════════
   TRUST / STATS (06)
═══════════════════════════════════════ */
.rh-stat { padding: 2.25rem 1.75rem 2.25rem 0; border-bottom: 1px solid var(--rh-div); }
.rh-stat-n { font-family: var(--rh-display); font-weight: 700; font-size: clamp(36px,4.5vw,72px); color: var(--rh-accent); line-height: 1; margin-bottom: 8px; letter-spacing: -.02em; }
.rh-stat-label { font-family: var(--rh-body); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rh-ink); margin-bottom: 4px; }
.rh-stat-desc { font-family: var(--rh-body); font-size: 12px; color: var(--rh-muted); }
.rh-client {
  padding: 10px 20px; border-radius: 999px;
  background: var(--rh-card); border: 1px solid var(--rh-div);
  font-family: var(--rh-body); font-size: 12px; font-weight: 500;
  color: var(--rh-muted); letter-spacing: .04em; display: inline-block; margin: 5px;
}

/* ═══════════════════════════════════════
   VOICE / TESTIMONIALS (07)
═══════════════════════════════════════ */
.rh-qmark {
  font-family: Georgia, serif; font-size: 200px; line-height: .7;
  color: var(--rh-accent); opacity: .2; margin-bottom: 2rem; user-select: none;
}
.rh-test {
  border-left: 3px solid var(--rh-accent);
  padding-left: 2rem; margin-bottom: 2.5rem;
}
.rh-test:last-child { margin-bottom: 0; }
.rh-test-q { font-family: var(--rh-body); font-size: clamp(14px,1.4vw,18px); font-style: italic; color: var(--rh-ink); line-height: 1.7; margin: 0 0 1rem; }
.rh-test-av { width: 36px; height: 36px; border-radius: 50%; background: var(--rh-card); border: 1px solid var(--rh-div); flex-shrink: 0; }
.rh-test-auth { font-family: var(--rh-body); font-size: 13px; font-weight: 600; color: var(--rh-ink); }
.rh-test-role { font-family: var(--rh-body); font-size: 11px; color: var(--rh-muted); letter-spacing: .05em; }
.rh-conf-note { font-family: var(--rh-body); font-size: 12px; color: var(--rh-muted); line-height: 1.6; max-width: 240px; margin-top: 1.25rem; }

/* ═══════════════════════════════════════
   CONTACT (08)
═══════════════════════════════════════ */
.rh-cd-label { font-family: var(--rh-body); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--rh-muted); margin-bottom: 4px; }
.rh-cd-value { font-family: var(--rh-body); font-size: 15px; font-weight: 500; color: var(--rh-ink); }
.rh-disclaimer { margin-top: 2rem; padding: 1rem 1.25rem; background: var(--rh-card); border-radius: 8px; border-left: 3px solid var(--rh-accent); font-family: var(--rh-body); font-size: 11px; color: var(--rh-muted); line-height: 1.6; }

.rh-fg { position: relative; border-bottom: 1px solid var(--rh-div); padding-bottom: 8px; margin-bottom: 1.75rem; }
.rh-flabel { font-family: var(--rh-body); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--rh-muted); margin-bottom: 4px; display: block; }
.rh-finput { width: 100%; border: none; background: transparent; font-family: var(--rh-body); font-size: 15px; color: var(--rh-ink); outline: none; padding-top: 4px; }
.rh-finput:focus { outline: none; }
.rh-fcheck-label { font-family: var(--rh-body); font-size: 12px; color: var(--rh-muted); line-height: 1.5; cursor: pointer; }
.rh-fcheck-label a { color: var(--rh-accent); }

.rh-success { padding-top: 4rem; }
.rh-success-icon { font-family: var(--rh-display); font-size: 3.5rem; color: var(--rh-accent); margin-bottom: 1rem; }
.rh-success-title { font-family: var(--rh-display); font-size: 2rem; text-transform: uppercase; color: var(--rh-ink); margin: 0 0 .5rem; }
.rh-success-msg { font-family: var(--rh-body); font-size: 14px; color: var(--rh-muted); }
.rh-form-error { font-family: var(--rh-body); font-size: 13px; color: #c0392b; margin: 0 0 1rem; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.rh-footer {
  scroll-snap-align: end;
  padding: 1.5rem 6rem; border-top: 1px solid var(--rh-div);
  background: var(--rh-bg-alt); display: flex;
  justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem;
}
.rh-footer-copy { font-family: var(--rh-body); font-size: 12px; color: var(--rh-muted); }
.rh-footer-links { display: flex; gap: 1.25rem; }
.rh-footer-link { font-family: var(--rh-body); font-size: 11px; color: var(--rh-muted); text-decoration: none; letter-spacing: .08em; }
.rh-footer-link:hover { color: var(--rh-accent); }
@media (max-width: 767px) { .rh-footer { padding: 1.5rem; } }

/* ═══════════════════════════════════════
   COOKIE BANNER
═══════════════════════════════════════ */
.rh-cookie {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: var(--rh-ink); color: var(--rh-bg);
  padding: 1.25rem 3.75rem; display: flex;
  align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.rh-cookie-txt { font-family: var(--rh-body); font-size: 13px; line-height: 1.5; margin: 0; max-width: 600px; opacity: .8; }
.rh-cookie-txt a { color: var(--rh-accent); }
.rh-cookie-btns { display: flex; gap: .625rem; flex-shrink: 0; }
.rh-cookie-no { padding: 10px 22px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--rh-bg); border-radius: 6px; font-family: var(--rh-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.rh-cookie-yes { padding: 10px 22px; background: var(--rh-cta); color: var(--rh-cta-ink); border: none; border-radius: 6px; font-family: var(--rh-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; font-weight: 600; }
@media (max-width: 767px) { .rh-cookie { padding: 1rem; } }

/* ═══════════════════════════════════════
   OFFCANVAS NAV
═══════════════════════════════════════ */
.rh-oc.offcanvas { background: var(--rh-ink) !important; width: min(360px,100vw) !important; overflow: hidden; }
.rh-oc .offcanvas-body {
  padding: 2.5rem !important; display: flex; flex-direction: column;
  justify-content: center; min-height: 100%; position: relative;
}
/* circle 1 — large filled, bottom-right */
.rh-oc .offcanvas-body::before {
  content: ''; position: absolute; pointer-events: none;
  width: 340px; height: 340px; border-radius: 50%;
  background: var(--rh-accent); opacity: .07;
  bottom: -120px; right: -120px;
}
/* circle 2 — medium ring, top-left */
.rh-oc .offcanvas-body::after {
  content: ''; position: absolute; pointer-events: none;
  width: 180px; height: 180px; border-radius: 50%;
  border: 2px solid var(--rh-accent); opacity: .18;
  top: -60px; left: -60px;
}
/* circle 3 — small filled, mid-left */
.rh-oc-nav::before {
  content: ''; position: absolute; pointer-events: none;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--rh-accent); opacity: .14;
  left: -24px; top: 50%; transform: translateY(-50%);
}
.rh-oc-nav { display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; }
.rh-oc-close {
  background: transparent; border: none; font-size: 1.6rem;
  color: rgba(255,255,255,.35); cursor: pointer;
  align-self: flex-end; margin-bottom: 2.5rem; line-height: 1;
  position: relative; z-index: 1; transition: color .2s;
}
.rh-oc-close:hover { color: rgba(255,255,255,.9); }
.rh-nav-item {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--rh-display); font-size: 18px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.55); padding: 12px 0;
  line-height: 1.2; text-align: left; display: flex; align-items: center;
  width: 100%; border-bottom: 1px solid rgba(255,255,255,.07);
  transition: color .2s, padding-left .2s;
}
.rh-nav-item:last-child { border-bottom: none; }
.rh-nav-item:hover { color: #fff; padding-left: 6px; }
.rh-nav-num { color: var(--rh-accent); margin-right: 14px; font-size: 10px; letter-spacing: .12em; flex-shrink: 0; opacity: .9; }

/* ═══════════════════════════════════════
   VIDEO MODAL
═══════════════════════════════════════ */
.rh-btn-video {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--rh-body); font-size: 13px; font-weight: 500;
  color: var(--rh-muted); letter-spacing: .04em; padding: 0;
  transition: color .2s;
}
.rh-btn-video:hover { color: var(--rh-accent); }
.rh-btn-video-play {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid currentColor; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
}
.rh-btn-video-play svg { margin-left: 2px; }
.rh-btn-video:hover .rh-btn-video-play {
  background: var(--rh-accent); border-color: var(--rh-accent); color: var(--rh-cta-ink);
}
.rh-vm {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.rh-vm.open { opacity: 1; pointer-events: auto; }
.rh-vm-inner { position: relative; width: 100%; max-width: 880px; }
.rh-vm-close {
  position: absolute; top: -2.5rem; right: 0;
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,.6); font-size: 2rem; line-height: 1;
  transition: color .2s;
}
.rh-vm-close:hover { color: #fff; }
.rh-vm-ratio {
  position: relative; padding-top: 56.25%;
  background: #000; border-radius: 4px; overflow: hidden;
}
.rh-vm-ratio iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}

/* ═══════════════════════════════════════
   SCROLL TO TOP
═══════════════════════════════════════ */
.rh-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--rh-accent); color: var(--rh-cta-ink);
  border: none; cursor: pointer; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  transform: translateY(8px);
}
.rh-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.rh-top:hover { filter: brightness(1.12); }
@media (max-width: 767px) { .rh-top { bottom: 1.25rem; right: 1.25rem; } }

/* ═══════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
═══════════════════════════════════════ */
@media (max-width: 991px) {
  .rh-hero-last { font-size: clamp(48px,13vw,100px); }
  .rh-photo { max-width: 340px; }
}
@media (max-width: 767px) {
  .rh-s { height: auto; min-height: 100vh; padding-bottom: 2rem; }
  .rh-xp-item, .rh-cred-item { grid-template-columns: 1fr; }
  .rh-cred-item { gap: .5rem; }
}