/* ==========================================================================
   Rhinehart Services, consolidated stylesheet
   Tokens + layout + section/component styles. No build step.
   Display: Barlow Condensed   Body: Source Sans 3
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* Brand */
  --rs-navy:        #142F4D;
  --rs-navy-700:    #1B3D63;
  --rs-navy-500:    #2A5586;
  --rs-navy-100:    #E4EAF1;
  --rs-taupe:       #898175;
  --rs-taupe-700:   #6E675C;
  --rs-taupe-300:   #BAB4AB;
  --rs-taupe-100:   #EAE7E1;
  /* Neutrals */
  --rs-ink:         #1A1D21;
  --rs-ink-2:       #3F454D;
  --rs-ink-3:       #6B7280;
  --rs-line:        #E5E3DE;
  --rs-line-strong: #CFCBC3;
  --rs-bg:          #FFFFFF;
  --rs-bg-warm:     #F7F5F1;
  --rs-bg-warm-2:   #F1EEE8;
  /* Semantic */
  --rs-cta:         var(--rs-navy);
  --rs-cta-hover:   var(--rs-navy-700);
  --rs-success:     #2F7D4B;
  --rs-warning:     #B8741A;
  --rs-danger:      #B3261E;
  /* Type */
  --font-display:   'Barlow Condensed', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body:      'Source Sans 3', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-hero:    clamp(40px, 7vw, 72px);
  --fs-h1:      clamp(32px, 5.2vw, 52px);
  --fs-h2:      clamp(26px, 3.6vw, 38px);
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-eyebrow: 13px;
  --fs-body:    17px;
  --fs-body-sm: 15px;
  --fs-meta:    13px;
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.55;
  --ls-eyebrow: 0.14em;
  --ls-button:  0.04em;
  /* Space */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  /* Radii */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-pill: 999px;
  /* Shadows */
  --sh-1: 0 1px 2px rgba(20, 47, 77, 0.06), 0 1px 1px rgba(20, 47, 77, 0.04);
  --sh-2: 0 4px 12px rgba(20, 47, 77, 0.08), 0 1px 2px rgba(20, 47, 77, 0.04);
  --sh-3: 0 12px 32px rgba(20, 47, 77, 0.12), 0 2px 6px rgba(20, 47, 77, 0.05);
  --sh-inset: inset 0 0 0 1px var(--rs-line);
  /* Layout */
  --container:       1200px;
  --container-tight: 960px;
  --header-h:        96px;
  --header-h-sm:     76px;
  /* Motion */
  --dur-fast:     150ms;
  --dur-standard: 250ms;
  --dur-reveal:   500ms;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --lift-sm:      -2px;
  --lift-md:      -3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--rs-ink);
  background: var(--rs-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--rs-navy);
  line-height: var(--lh-heading);
  text-wrap: balance;
  margin: 0;
}
.rs-hero    { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); line-height: var(--lh-display); color: var(--rs-navy); letter-spacing: -0.01em; }
h1, .rs-h1  { font-size: var(--fs-h1); font-weight: 800; }
h2, .rs-h2  { font-size: var(--fs-h2); font-weight: 700; }
h3, .rs-h3  { font-size: var(--fs-h3); font-weight: 600; }
h4, .rs-h4  { font-size: var(--fs-h4); font-weight: 600; }

.rs-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--rs-taupe-700);
}
p   { margin: 0; color: var(--rs-ink); }
.rs-lead  { font-size: 19px; color: var(--rs-ink-2); line-height: 1.55; max-width: 65ch; }
.rs-meta  { font-size: var(--fs-meta); color: var(--rs-ink-3); line-height: 1.5; }

a { color: var(--rs-navy-500); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--rs-navy); }

:focus-visible { outline: 2px solid var(--rs-navy); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.rs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  letter-spacing: var(--ls-button); padding: 14px 22px; min-height: 48px;
  border-radius: var(--r-md); border: 1.5px solid transparent; cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-standard) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out);
  text-decoration: none; white-space: nowrap;
  will-change: transform;
}
.rs-btn:hover { transform: translateY(var(--lift-sm)); }
.rs-btn:active { transform: translateY(0); transition-duration: 60ms; }
/* (Removed: arrow-nudge-on-hover. CSS can't distinguish a leading phone icon
   from a trailing arrow when each button has a single SVG child, which made
   icon-only buttons like "Call (567)..." slide the phone icon on hover. The
   button lift is enough motion feedback.) */
.rs-btn--primary   { background: var(--rs-navy); color: #fff; border-color: var(--rs-navy); }
.rs-btn--primary:hover   { background: var(--rs-navy-700); border-color: var(--rs-navy-700); color: #fff; box-shadow: 0 6px 16px rgba(20,47,77,0.18); }
.rs-btn--secondary { background: #fff; color: var(--rs-navy); border-color: var(--rs-navy); }
.rs-btn--secondary:hover { background: var(--rs-navy-100); color: var(--rs-navy); box-shadow: 0 4px 12px rgba(20,47,77,0.10); }
.rs-btn--ghost     { background: transparent; color: var(--rs-navy); border-color: var(--rs-line-strong); }
.rs-btn--ghost:hover     { background: var(--rs-bg-warm); border-color: var(--rs-taupe-300); }
.rs-btn--lg { font-size: 17px; padding: 16px 26px; min-height: 56px; }
.rs-btn--sm { font-size: 14px; padding: 10px 16px; min-height: 38px; }
/* Loading state for form submit, etc. */
.rs-btn.is-loading {
  pointer-events: none; opacity: 0.7; cursor: progress;
  position: relative;
}
.rs-btn.is-loading::after {
  content: ""; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; display: inline-block; margin-left: 6px;
  animation: rsBtnSpin .7s linear infinite;
}
@keyframes rsBtnSpin { to { transform: rotate(360deg); } }

/* ---------- Chips ---------- */
.rs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--rs-bg-warm-2); color: var(--rs-ink-2);
  font-size: 13px; font-weight: 600; border: 1px solid var(--rs-line);
}
.rs-chip--navy    { background: var(--rs-navy-100); color: var(--rs-navy); border-color: transparent; }
.rs-chip--success { background: #E6F1EA; color: var(--rs-success); border-color: transparent; }

/* ---------- Form controls ---------- */
.rs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rs-label { font-size: 14px; font-weight: 600; color: var(--rs-ink-2); }
.rs-input, .rs-textarea, .rs-select {
  font-family: var(--font-body); font-size: 16px; color: var(--rs-ink);
  background: #fff; border: 1.5px solid var(--rs-line-strong);
  border-radius: var(--r-md); padding: 12px 14px; min-height: 48px;
  width: 100%; max-width: 100%;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out),
    background   var(--dur-fast) var(--ease-out);
}
.rs-input:hover, .rs-textarea:hover, .rs-select:hover { border-color: var(--rs-taupe); }
.rs-input:focus, .rs-textarea:focus, .rs-select:focus {
  outline: none; border-color: var(--rs-navy);
  box-shadow: 0 0 0 3px rgba(20, 47, 77, 0.15);
}
.rs-textarea { min-height: 120px; resize: vertical; }

/* ---------- Layout utils ---------- */
.rs-container       { max-width: var(--container);       margin: 0 auto; padding: 0 var(--sp-5); }
.rs-container-tight { max-width: var(--container-tight); margin: 0 auto; padding: 0 var(--sp-5); }
.rs-section         { padding: var(--sp-8) 0; }
.rs-section--lg     { padding: var(--sp-9) 0; }
.rs-bg-warm         { background: var(--rs-bg-warm); }
.rs-bg-warm-2       { background: var(--rs-bg-warm-2); }
.rs-bg-navy         { background: var(--rs-navy); color: #fff; }
.rs-bg-navy h1, .rs-bg-navy h2, .rs-bg-navy h3, .rs-bg-navy h4 { color: #fff; }

.rs-form__row > *,
.rs-service-grid > *,
.rs-gallery > *,
.rs-trust__points > *,
.rs-faq__inner > * { min-width: 0; }

section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

.rs-skip {
  position: absolute; left: -9999px;
  background: var(--rs-navy); color: #fff;
  padding: 10px 14px; border-radius: var(--r-md);
  font-weight: 700; font-size: 14px; z-index: 1000;
}
.rs-skip:focus { left: 12px; top: 12px; }

/* ---------- Header ---------- */
.rs-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rs-line);
  transition: background-color var(--dur-standard) var(--ease-out),
              box-shadow      var(--dur-standard) var(--ease-out),
              border-color    var(--dur-standard) var(--ease-out);
}
.rs-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: transparent;
  box-shadow: 0 2px 10px rgba(20, 47, 77, 0.06);
}
.rs-header__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.rs-logo { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; line-height: 1; }
.rs-logo__img { height: 70px; width: auto; object-fit: contain; display: block; }
/* Icon-style navbar lockup: square monogram + wordmark text to the right */
.rs-logo--icon .rs-logo__img { height: 56px; width: 56px; }
.rs-logo__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--rs-navy);
  white-space: nowrap;
}
.rs-logo--white .rs-logo__img { filter: brightness(0) invert(1); }
.rs-logo--white .rs-logo__wordmark { color: #fff; }
.rs-nav { display: flex; gap: 22px; align-items: center; }
.rs-nav__link {
  position: relative;
  font-weight: 600; font-size: 15.5px; color: var(--rs-ink-2);
  text-decoration: none; padding: 6px 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.rs-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--rs-navy);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-standard) var(--ease-out);
}
.rs-nav__link:hover { color: var(--rs-navy); }
.rs-nav__link:hover::after { transform: scaleX(1); }
.rs-nav__link.is-active { color: var(--rs-navy); }
.rs-nav__link.is-active::after { transform: scaleX(1); }
.rs-header__right { display: flex; align-items: center; gap: 14px; }
.rs-header__menu {
  display: none;
  background: transparent; border: 1px solid var(--rs-line-strong);
  border-radius: var(--r-md);
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--rs-navy);
}
.rs-icon-btn { background: transparent; border: 0; cursor: pointer; padding: 8px; color: var(--rs-navy); }
@media (max-width: 880px) {
  .rs-header__inner  { height: var(--header-h-sm); }
  .rs-logo__img      { height: 52px; }
  .rs-logo--icon .rs-logo__img { height: 46px; width: 46px; }
  .rs-logo__wordmark { font-size: 20px; }
  .rs-nav--desktop   { display: none; }
  .rs-header__right .rs-btn--primary { display: none; }
  .rs-header__menu   { display: inline-flex; }
}
@media (max-width: 480px) {
  .rs-logo__img { height: 46px; }
  .rs-logo--icon .rs-logo__img { height: 42px; width: 42px; }
  .rs-logo__wordmark { font-size: 19px; }
}
@media (max-width: 380px) {
  .rs-logo--icon .rs-logo__img { height: 38px; width: 38px; }
  .rs-logo__wordmark { font-size: 17px; }
}

/* Mobile menu: fully opaque overlay, scrollable, anchored above the sticky
   header (z-index 50). Logo+wordmark sizes are locked to match the header
   exactly so opening the menu doesn't visually resize the brand. */
.rs-mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  background: #ffffff;
  z-index: 200;
  padding: 16px 24px 32px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.rs-mobile-menu[hidden] { display: none; }
.rs-mobile-menu__head {
  display: flex; justify-content: space-between; align-items: center;
  min-height: var(--header-h-sm);
  flex-shrink: 0;
}
/* Force the menu's logo + wordmark to the same size as the mobile header,
   regardless of inline style or viewport. */
.rs-mobile-menu__head .rs-logo--icon .rs-logo__img {
  height: 46px !important; width: 46px !important;
}
.rs-mobile-menu__head .rs-logo__wordmark { font-size: 20px; }
@media (max-width: 480px) {
  .rs-mobile-menu__head .rs-logo--icon .rs-logo__img {
    height: 42px !important; width: 42px !important;
  }
  .rs-mobile-menu__head .rs-logo__wordmark { font-size: 19px; }
}
@media (max-width: 380px) {
  .rs-mobile-menu__head .rs-logo--icon .rs-logo__img {
    height: 38px !important; width: 38px !important;
  }
  .rs-mobile-menu__head .rs-logo__wordmark { font-size: 17px; }
}
.rs-mobile-menu__nav { display: flex; flex-direction: column; gap: 4px; margin: 32px 0; }
.rs-mobile-menu__nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 4px; border-bottom: 1px solid var(--rs-line);
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--rs-navy); text-decoration: none;
}

/* ---------- Hero (full-bleed default) ---------- */
.rs-hero { position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; }
.rs-hero__bg { position: absolute; inset: 0; }
.rs-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.rs-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,47,77,0.20) 0%, rgba(20,47,77,0.65) 60%, rgba(20,47,77,0.88) 100%),
    linear-gradient(90deg, rgba(20,47,77,0.82) 0%, rgba(20,47,77,0.55) 45%, rgba(20,47,77,0.18) 75%, rgba(20,47,77,0.05) 100%);
}
.rs-hero__inner { position: relative; z-index: 1; padding: 80px 24px; color: #fff; max-width: 760px; }
.rs-hero__eyebrow { color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.rs-hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.02; color: #fff; margin-top: 14px; letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.rs-hero__sub {
  font-size: 21px; line-height: 1.55;
  color: #fff;
  margin-top: 18px; max-width: 600px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
  font-weight: 500;
}
.rs-hero__ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.rs-hero__trust {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: flex; gap: 24px 28px; flex-wrap: wrap;
  color: #fff;
  font-size: 16px; font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
.rs-hero__trust li { display: flex; align-items: center; gap: 8px; }
.rs-hero__trust svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
@media (max-width: 640px) {
  .rs-hero { min-height: 560px; }
  .rs-hero__inner { padding: 56px 20px; }
  .rs-hero__ctas .rs-btn { flex: 1 1 auto; }
  .rs-hero__sub { font-size: 18px; line-height: 1.5; margin-top: 16px; }
  .rs-hero__trust { gap: 12px 22px; font-size: 15px; margin-top: 26px; }
}
@media (max-width: 540px) {
  .rs-hero__title { font-size: clamp(34px, 8vw, 44px); }
  .rs-hero__sub { font-size: 17px; }
  .rs-hero__trust { flex-direction: column; gap: 10px; }
}

/* ---------- Section heads ---------- */
.rs-section__head { margin-bottom: 36px; }

/* ---------- Service grid ---------- */
.rs-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .rs-service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .rs-service-grid { grid-template-columns: 1fr; } }
.rs-svc {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rs-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-decoration: none; color: inherit; overflow: hidden;
  transition:
    box-shadow   var(--dur-standard) var(--ease-out),
    transform    var(--dur-standard) var(--ease-out),
    border-color var(--dur-standard) var(--ease-out);
  will-change: transform;
}
.rs-svc:hover {
  box-shadow: var(--sh-3); transform: translateY(var(--lift-md));
  border-color: var(--rs-navy-100);
}
.rs-svc__body { padding: 28px 24px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.rs-svc__icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--rs-navy-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: background-color var(--dur-standard) var(--ease-out), transform var(--dur-standard) var(--ease-out);
}
.rs-svc:hover .rs-svc__icon { background: var(--rs-navy); }
/* The inline SVGs use stroke="var(--rs-navy)"; CSS stroke wins over the
   attribute, so this flips the icon to white when the navy background fills
   in on hover. */
.rs-svc__icon svg { transition: stroke var(--dur-standard) var(--ease-out); }
.rs-svc:hover .rs-svc__icon svg { stroke: #fff; }
.rs-svc__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--rs-navy); margin: 0 0 6px; line-height: 1.18; }
.rs-svc__desc  { font-size: 14.5px; color: var(--rs-ink-2); line-height: 1.55; margin: 0; flex-grow: 1; }
.rs-svc__link  {
  margin-top: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rs-navy); display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--dur-standard) var(--ease-out);
}
.rs-svc:hover .rs-svc__link { gap: 10px; }

/* ---------- Before / After carousel ---------- */
.rs-ba-carousel {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 12px;
  align-items: center;
}
.rs-ba-carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--rs-line);
  box-shadow: var(--sh-2);
}
.rs-ba-carousel__track {
  display: flex;
  transition: transform .35s cubic-bezier(.4,.0,.2,1);
  will-change: transform;
}
.rs-ba-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rs-ba-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rs-line);
}
.rs-ba-split__half {
  position: relative;
  margin: 0;
  aspect-ratio: 4/5;
  background: var(--rs-bg-warm-2);
  overflow: hidden;
}
.rs-ba-split__half img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.rs-ba-tag {
  position: absolute;
  top: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  z-index: 2;
}
.rs-ba-tag--before { left: 14px; background: rgba(20, 47, 77, 0.92); }
.rs-ba-tag--after  { left: 14px; background: rgba(47, 125, 75, 0.95); }
.rs-ba-slide__meta {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff;
}

.rs-ba-carousel__arrow {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--rs-line);
  background: #fff;
  color: var(--rs-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease, opacity .15s ease;
}
.rs-ba-carousel__arrow:hover:not(:disabled) {
  background: var(--rs-bg-warm);
  box-shadow: var(--sh-2);
}
.rs-ba-carousel__arrow:active:not(:disabled) { transform: translateY(1px); }
.rs-ba-carousel__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rs-ba-carousel__arrow:focus-visible {
  outline: 2px solid var(--rs-navy);
  outline-offset: 2px;
}

.rs-ba-carousel__dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.rs-ba-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: var(--rs-line-strong);
  cursor: pointer;
  padding: 0;
  transition: background-color .15s ease, transform .15s ease;
}
.rs-ba-carousel__dot:hover { background: var(--rs-taupe); }
.rs-ba-carousel__dot.is-active {
  background: var(--rs-navy);
  transform: scale(1.2);
}
.rs-ba-carousel__dot:focus-visible {
  outline: 2px solid var(--rs-navy);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .rs-ba-carousel {
    grid-template-columns: 44px 1fr 44px;
    gap: 8px;
  }
  .rs-ba-carousel__arrow { width: 40px; height: 40px; }
  .rs-ba-split { grid-template-columns: 1fr; gap: 1px; }
  .rs-ba-split__half { aspect-ratio: 4/3; }
}

/* ---------- Gallery ---------- */
.rs-gallery__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.rs-tabs { display: flex; gap: 6px; background: #fff; border: 1px solid var(--rs-line); border-radius: var(--r-pill); padding: 4px; }
.rs-tab {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--rs-ink-2);
  padding: 8px 16px; border-radius: var(--r-pill);
  transition: background .15s ease, color .15s ease, transform .05s ease;
  user-select: none;
}
.rs-tab:hover { color: var(--rs-navy); background: var(--rs-bg-warm); }
.rs-tab:active { transform: translateY(1px); }
.rs-tab:focus-visible { outline: 2px solid var(--rs-navy); outline-offset: 2px; }
.rs-tab.is-active { background: var(--rs-navy); color: #fff; }
.rs-tab.is-active:hover { background: var(--rs-navy-700); color: #fff; }
.rs-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 800px) { .rs-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rs-gallery { grid-template-columns: 1fr; } }
.rs-gallery__item {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--r-lg); overflow: hidden; background: #fff;
  border: 1px solid var(--rs-line);
  transition:
    transform    var(--dur-standard) var(--ease-out),
    box-shadow   var(--dur-standard) var(--ease-out),
    border-color var(--dur-standard) var(--ease-out);
  animation: rsGalleryFadeIn .25s var(--ease-out) both;
  will-change: transform;
}
@keyframes rsGalleryFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rs-gallery__item[hidden] { display: none !important; }
.rs-gallery__item:hover {
  transform: translateY(var(--lift-md));
  box-shadow: var(--sh-3);
  border-color: var(--rs-navy-100);
}
.rs-gallery__img { aspect-ratio: 3/2; overflow: hidden; background: var(--rs-bg-warm-2); }
.rs-gallery__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal) var(--ease-out); }
.rs-gallery__item:hover .rs-gallery__img img { transform: scale(1.03); }
.rs-gallery__meta { padding: 12px 16px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rs-gallery__title { font-family: var(--font-display); font-weight: 700; color: var(--rs-navy); font-size: 17px; }
.rs-gallery__cat   { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rs-taupe-700); }

/* ---------- CTA strip ---------- */
.rs-cta-strip {
  background: var(--rs-bg-warm);
  border-top: 1px solid var(--rs-line);
  border-bottom: 1px solid var(--rs-line);
  padding: 28px 0;
}
.rs-cta-strip__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.rs-cta-strip__copy { display: flex; align-items: center; gap: 16px; }
.rs-cta-strip__lead {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--rs-navy); line-height: 1.2;
}
.rs-cta-strip__sub     { color: var(--rs-ink-2); font-size: 15px; line-height: 1.5; margin-top: 3px; }
.rs-cta-strip__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Trust ---------- */
.rs-trust { background: var(--rs-navy); color: #fff; padding: 96px 0; }
.rs-trust__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .rs-trust__inner { grid-template-columns: 1fr; gap: 36px; } }
.rs-trust__points { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
@media (max-width: 600px) { .rs-trust__points { grid-template-columns: 1fr; } }
.rs-trust__points li { display: flex; gap: 14px; align-items: flex-start; }
.rs-trust__icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rs-trust__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; }
.rs-trust__desc  { color: rgba(255,255,255,0.78); font-size: 14.5px; line-height: 1.5; margin-top: 3px; }
.rs-trust__photo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-lg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
.rs-trust__actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.rs-btn--on-navy-solid {
  background: #fff; color: var(--rs-navy); border-color: #fff;
}
.rs-btn--on-navy-solid:hover { background: var(--rs-navy-100); color: var(--rs-navy); border-color: var(--rs-navy-100); }
.rs-btn--on-navy-ghost {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.35);
}
.rs-btn--on-navy-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.55); }

/* ---------- About ---------- */
.rs-about__inner {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 64px; align-items: center;
}
@media (max-width: 900px) {
  .rs-about__inner { grid-template-columns: 1fr; gap: 36px; }
}
.rs-about__title { margin-top: 8px; }
.rs-about__lead { margin-top: 14px; }
.rs-about__copy p { margin-top: 16px; color: var(--rs-ink-2); line-height: 1.6; }
.rs-about__stats {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  border-top: 1px solid var(--rs-line);
  border-bottom: 1px solid var(--rs-line);
}
.rs-about__stats li {
  padding: 22px 18px 22px 0;
  border-right: 1px solid var(--rs-line);
}
.rs-about__stats li:last-child { border-right: 0; padding-right: 0; }
.rs-about__stats li:not(:first-child) { padding-left: 22px; }
.rs-about__stat-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rs-taupe-700);
}
.rs-about__stat-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; color: var(--rs-navy); line-height: 1.1; margin-top: 4px;
}
.rs-about__stat-desc {
  font-size: 13.5px; color: var(--rs-ink-3); margin-top: 6px; line-height: 1.45;
}
@media (max-width: 540px) {
  .rs-about__stats { grid-template-columns: 1fr; }
  .rs-about__stats li { border-right: 0; border-bottom: 1px solid var(--rs-line); padding: 18px 0; }
  .rs-about__stats li:last-child { border-bottom: 0; }
  .rs-about__stats li:not(:first-child) { padding-left: 0; }
}
.rs-about__photo {
  position: relative;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-3); aspect-ratio: 4/5;
}
.rs-about__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-about__photo-tag {
  position: absolute; left: 18px; bottom: 18px;
  background: rgba(255,255,255,0.96);
  padding: 10px 14px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600; color: var(--rs-navy);
  box-shadow: var(--sh-1);
  display: inline-flex; align-items: center; gap: 8px;
}
.rs-about__photo-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rs-success);
}

/* ---------- FAQ ---------- */
.rs-faq__inner {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px;
}
@media (max-width: 900px) {
  .rs-faq__inner { grid-template-columns: 1fr; gap: 28px; }
}
.rs-faq__intro p { color: var(--rs-ink-2); margin-top: 12px; line-height: 1.55; }
.rs-faq__cta {
  margin-top: 24px; padding: 20px 22px;
  background: var(--rs-bg-warm); border-radius: var(--r-lg);
  border: 1px solid var(--rs-line);
}
.rs-faq__cta-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rs-taupe-700);
}
.rs-faq__cta-phone {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: 26px; color: var(--rs-navy);
  text-decoration: none; margin-top: 4px;
}
.rs-faq__cta-phone:hover { color: var(--rs-navy-700); }
.rs-faq__list { border-top: 1px solid var(--rs-line); }
.rs-faq__item { border-bottom: 1px solid var(--rs-line); }
.rs-faq__q {
  width: 100%; background: transparent; border: 0; text-align: left;
  cursor: pointer; padding: 22px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--rs-navy); line-height: 1.25;
  transition: color .15s ease;
}
.rs-faq__q:hover { color: var(--rs-navy-700); }
.rs-faq__q-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px;
  background: var(--rs-navy-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--rs-navy);
  transition: transform var(--dur-standard) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  line-height: 1;
}
.rs-faq__q-icon svg { display: block; }
.rs-faq__item.is-open .rs-faq__q-icon {
  background: var(--rs-navy); color: #fff; transform: rotate(45deg);
}
/* grid-template-rows: 0fr → 1fr animates to actual content height smoothly.
   The inner element needs min-height: 0 for the grid track to collapse. */
.rs-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-standard) var(--ease-out);
}
.rs-faq__item.is-open .rs-faq__a { grid-template-rows: 1fr; }
.rs-faq__a-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 4px;
  color: var(--rs-ink-2); line-height: 1.65;
  font-size: 16px; max-width: 640px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), padding var(--dur-standard) var(--ease-out);
}
.rs-faq__item.is-open .rs-faq__a-inner {
  opacity: 1;
  padding: 0 4px 22px;
  transition: opacity var(--dur-standard) var(--ease-out) 80ms,
              padding var(--dur-standard) var(--ease-out);
}

/* ---------- Estimate form ---------- */
.rs-estimate-wrap { background: var(--rs-bg-warm-2); padding-bottom: var(--sp-9); }
.rs-estimate-lead {
  background: var(--rs-navy); color: #fff; text-align: center;
  padding: 56px 24px 80px; margin-bottom: -48px;
}
.rs-estimate-lead h2 { color: #fff; }
.rs-estimate-lead .rs-lead { color: rgba(255,255,255,0.85); margin-top: 12px; }
.rs-form-card {
  background: #fff; border: 1px solid var(--rs-line);
  border-radius: var(--r-xl); box-shadow: var(--sh-2);
  padding: 40px 44px;
  margin-top: -48px; position: relative; z-index: 2;
}
@media (max-width: 600px) { .rs-form-card { padding: 28px 22px; border-radius: var(--r-lg); } }
.rs-form { display: flex; flex-direction: column; gap: 16px; }
.rs-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .rs-form__row { grid-template-columns: 1fr; } }
.rs-form__actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.rs-form-thanks { text-align: center; padding: 24px 0; }
.rs-form-thanks__check {
  width: 64px; height: 64px; border-radius: 999px;
  background: #E6F1EA;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.rs-form-thanks__actions {
  margin-top: 22px;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.rs-form-photo-drop {
  border: 1.5px dashed var(--rs-line-strong);
  border-radius: var(--r-md);
  padding: 20px; text-align: center; cursor: pointer;
  background: var(--rs-bg-warm);
  transition:
    border-color    var(--dur-fast) var(--ease-out),
    background     var(--dur-fast) var(--ease-out),
    transform      var(--dur-standard) var(--ease-out),
    box-shadow     var(--dur-standard) var(--ease-out);
}
.rs-form-photo-drop:hover {
  border-color: var(--rs-navy); background: #fff;
}
.rs-form-photo-drop.is-dragover {
  border-style: solid; border-color: var(--rs-navy); background: var(--rs-navy-100);
  transform: scale(1.01);
  box-shadow: 0 0 0 4px rgba(20, 47, 77, 0.10);
}
.rs-form-photo-drop:focus-visible {
  outline: none; border-color: var(--rs-navy);
  box-shadow: 0 0 0 3px rgba(20, 47, 77, 0.15);
}
.rs-form-photo-drop__title { margin-top: 8px; font-weight: 600; color: var(--rs-navy); }
.rs-form-photo-list {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.rs-form-photo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--r-pill);
  background: var(--rs-navy-100); color: var(--rs-navy);
  font-size: 13px; font-weight: 600; max-width: 240px;
}
.rs-form-photo-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rs-form-photo-chip button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--rs-navy); padding: 0;
  display: inline-flex; align-items: center;
}

/* ---------- Footer ---------- */
.rs-footer { background: #0E2238; color: rgba(255,255,255,0.78); padding: 64px 0 0; }
.rs-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
@media (max-width: 800px) { .rs-footer__inner { grid-template-columns: 1fr; gap: 32px; } }
.rs-footer__head {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 16px;
}
.rs-footer__brand p {
  margin-top: 18px; color: rgba(255,255,255,0.78);
  font-size: 15px; line-height: 1.6; max-width: 360px;
}
.rs-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rs-footer__list a,
.rs-footer__contact a,
.rs-footer__contact span {
  color: rgba(255,255,255,0.78); text-decoration: none; font-size: 15px;
  line-height: 1.5;
  display: inline-flex; align-items: center; gap: 8px;
}
.rs-footer__list a:hover,
.rs-footer__contact a:hover { color: #fff; }
.rs-footer__contact { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.rs-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 22px 0; font-size: 13px; color: rgba(255,255,255,0.55);
}
.rs-footer__bottom-inner {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

@media print {
  .rs-header, .rs-footer, .rs-form__actions, .rs-mobile-menu { display: none !important; }
  .rs-hero__scrim { display: none; }
  body { color: #000; }
}

/* ============================================================
   Multi-page additions (page hero band, services-detail layout,
   contact-info cards, gallery item show state for filter)
   ============================================================ */

/* Page hero band (small navy lead used on every non-home page) */
.rs-page-hero {
  background: var(--rs-navy);
  color: #fff;
  padding: 56px 24px 64px;
}
.rs-page-hero__eyebrow { color: rgba(255,255,255,0.72); }
.rs-page-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  color: #fff;
  margin: 8px 0 0;
  letter-spacing: -0.01em;
  max-width: 900px;
}
.rs-page-hero__sub {
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  margin: 14px 0 0;
  max-width: 720px;
}

/* Services detail page list */
.rs-svc-detail-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.rs-svc-detail {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  background: #fff;
  border: 1px solid var(--rs-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 28px 32px;
  scroll-margin-top: calc(var(--header-h) + 8px);
}
@media (max-width: 600px) {
  .rs-svc-detail {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 22px;
  }
}
.rs-svc-detail__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  background: var(--rs-navy-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-svc-detail__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--rs-navy);
  margin: 0;
  line-height: 1.15;
}
.rs-svc-detail__copy {
  margin-top: 12px;
  color: var(--rs-ink-2);
  line-height: 1.6;
}
.rs-svc-detail__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rs-navy);
  text-decoration: none;
}
.rs-svc-detail__cta:hover { color: var(--rs-navy-700); }

/* Contact info cards (contact.html) */
.rs-contact-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .rs-contact-info { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rs-contact-info { grid-template-columns: 1fr; } }
.rs-contact-info__card {
  background: #fff;
  border: 1px solid var(--rs-line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition:
    box-shadow   var(--dur-standard) var(--ease-out),
    transform    var(--dur-standard) var(--ease-out),
    border-color var(--dur-standard) var(--ease-out);
}
.rs-contact-info__card:hover {
  box-shadow: var(--sh-2);
  transform: translateY(var(--lift-sm));
  border-color: var(--rs-navy-100);
}
a.rs-contact-info__value { transition: color var(--dur-fast) var(--ease-out); }
a.rs-contact-info__value:hover { color: var(--rs-navy-700); }
.rs-contact-info__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--rs-navy);
  text-decoration: none;
  line-height: 1.15;
  margin-top: 4px;
}
.rs-contact-info__value--sm { font-size: 19px; font-weight: 700; }

/* Contact form lead (used on contact.html standalone, similar to estimate-lead but without the negative margin pull) */
.rs-estimate-wrap .rs-estimate-lead {
  margin-bottom: -48px;
}

/* Gallery item visibility: support both `hidden` attribute and an animation-friendly class */
.rs-gallery__item.is-hidden { display: none !important; }

/* ---------- Gallery: clickable items + In-Progress badge ---------- */
.rs-gallery__item { cursor: pointer; position: relative; }
.rs-gallery__item:focus-visible {
  outline: 2px solid var(--rs-navy);
  outline-offset: 3px;
}
.rs-gallery__img { position: relative; }
.rs-gallery__badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: rgba(20, 47, 77, 0.92);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--r-sm);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(20, 47, 77, 0.18);
}

/* ---------- Gallery tabs: discrete pills on mobile -----------------------
   On desktop the tabs sit inside a single white pill container (segmented-
   control look). On mobile that container wraps awkwardly when not every tab
   fits on one row. Dropping the container and giving each tab its own pill
   keeps the layout balanced regardless of how many wrap. */
@media (max-width: 880px) {
  .rs-gallery__head { flex-direction: column; align-items: stretch; gap: 8px; }
  .rs-tabs {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .rs-tab {
    background: #fff;
    border: 1px solid var(--rs-line);
    color: var(--rs-ink-2);
    padding: 8px 14px;
    font-size: 14px;
    border-radius: var(--r-pill);
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color     var(--dur-fast) var(--ease-out),
      color            var(--dur-fast) var(--ease-out);
  }
  .rs-tab:hover {
    background: #fff;
    border-color: var(--rs-navy);
    color: var(--rs-navy);
  }
  .rs-tab.is-active {
    background: var(--rs-navy);
    color: #fff;
    border-color: var(--rs-navy);
  }
  .rs-tab.is-active:hover {
    background: var(--rs-navy-700);
    border-color: var(--rs-navy-700);
    color: #fff;
  }
  .rs-tab { white-space: nowrap; }
}
@media (max-width: 480px) {
  .rs-tab { font-size: 13px; padding: 7px 12px; }
}

/* ---------- Lightbox ---------- */
.rs-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20, 47, 77, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 4vw, 56px);
  animation: rsLbFade .2s ease both;
}
.rs-lightbox[hidden] { display: none; }
@keyframes rsLbFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rs-lightbox__frame {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  padding: clamp(10px, 1.5vw, 16px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  /* Explicit width is required so the contained image's max-width has a
     stable reference. Without it, large intrinsic image sizes would blow
     out the frame past the viewport. */
  width: min(1280px, 92vw);
  max-width: 92vw;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex; flex-direction: column; gap: 12px;
  animation: rsLbScale .25s cubic-bezier(.2, .8, .2, 1) both;
  margin: 0;
  box-sizing: border-box;
}
@keyframes rsLbScale {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.rs-lightbox__img-wrap {
  display: flex; align-items: center; justify-content: center;
  background: var(--rs-bg-warm-2);
  border-radius: var(--r-md);
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.rs-lightbox__img {
  display: block;
  max-width: 100%;
  /* Cap height directly against the viewport so the image never forces the
     frame past viewport bounds, even on portrait phones. The `dvh` overrides
     `vh` on browsers that support it — `vh` on iOS Safari counts the area
     behind the dynamic address bar, which makes the image visually overflow. */
  max-height: min(80vh, calc(90vh - 120px));
  max-height: min(80dvh, calc(90dvh - 120px));
  width: auto; height: auto;
  object-fit: contain;
  transition: opacity .18s ease;
}
.rs-lightbox.is-swapping .rs-lightbox__img { opacity: 0; }

.rs-lightbox__caption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 4px 10px 6px;
  flex-shrink: 0;
}
.rs-lightbox__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--rs-navy);
  line-height: 1.2;
}
.rs-lightbox__meta { display: flex; align-items: center; gap: 14px; }
.rs-lightbox__cat {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rs-taupe-700);
}
.rs-lightbox__counter {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--rs-ink-3);
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  background: var(--rs-bg-warm);
  border-radius: var(--r-pill);
}

/* Close + nav buttons */
.rs-lightbox__close,
.rs-lightbox__nav {
  position: absolute; z-index: 2;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: #fff;
  color: var(--rs-navy);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.rs-lightbox__close:hover,
.rs-lightbox__nav:hover {
  background: var(--rs-bg-warm);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32), 0 2px 5px rgba(0, 0, 0, 0.16);
}
.rs-lightbox__close:focus-visible,
.rs-lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
/* Close and nav buttons are positioned relative to the fixed .rs-lightbox
   container (its closest positioned ancestor), so they sit at viewport
   corners/edges and never get clipped regardless of frame size. */
.rs-lightbox__close { top: 20px; right: 20px; }
.rs-lightbox__close:hover { transform: scale(1.06); }
.rs-lightbox__close:active { transform: scale(0.94); }

.rs-lightbox__nav--prev,
.rs-lightbox__nav--next {
  top: 50%;
  transform: translateY(-50%);
}
.rs-lightbox__nav--prev { left: 20px; }
.rs-lightbox__nav--next { right: 20px; }
.rs-lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.rs-lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }
.rs-lightbox__nav--prev:active { transform: translateY(-50%) scale(0.94); }
.rs-lightbox__nav--next:active { transform: translateY(-50%) scale(0.94); }

@media (max-width: 720px) {
  /* On mobile the lightbox fills the viewport with a small inset; the card
     frame uses explicit width/height in dvh so iOS Safari's dynamic address
     bar doesn't push the image beyond the visible viewport. */
  .rs-lightbox { padding: 10px; }
  .rs-lightbox__frame {
    width: 94vw;
    max-width: 94vw;
    max-height: 88vh;
    max-height: 88dvh;
    padding: 10px;
    gap: 10px;
  }
  /* Reserve space at the bottom for the floating nav buttons and the wrapped
     caption (~150px combined). */
  .rs-lightbox__img {
    max-height: calc(88vh - 170px);
    max-height: calc(88dvh - 170px);
  }
  .rs-lightbox__caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 2px 4px 4px;
  }
  .rs-lightbox__title {
    font-size: 17px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .rs-lightbox__meta { gap: 10px; flex-wrap: wrap; }
  .rs-lightbox__cat { font-size: 10px; letter-spacing: 0.12em; }
  .rs-lightbox__counter { font-size: 12px; padding: 3px 8px; }
  /* Close: top-right of viewport, slightly smaller. */
  .rs-lightbox__close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .rs-lightbox__close:hover { transform: scale(1.06); }
  /* Nav buttons: bottom-corners of viewport, no Y centering. */
  .rs-lightbox__nav { width: 42px; height: 42px; top: auto; bottom: 12px; transform: none; }
  .rs-lightbox__nav--prev { left: 12px; }
  .rs-lightbox__nav--next { right: 12px; }
  .rs-lightbox__nav:hover { transform: scale(1.06); }
  .rs-lightbox__nav:active { transform: scale(0.94); }
}

@media (max-width: 420px) {
  .rs-lightbox { padding: 8px; }
  .rs-lightbox__frame {
    width: 96vw;
    max-width: 96vw;
    padding: 8px;
  }
  .rs-lightbox__img {
    max-height: calc(88vh - 180px);
    max-height: calc(88dvh - 180px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-lightbox, .rs-lightbox__frame, .rs-lightbox__img { animation: none; transition: none; }
}

/* ==========================================================================
   Reveal-on-scroll utility
   ==========================================================================
   Elements get [data-reveal] and start invisible + slightly translated. The
   IntersectionObserver in app.js adds .is-revealed, which transitions them in.
   Touch devices retain the hover styles already declared; no change needed. */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* When a parent has [data-reveal-stagger], stagger its first eight reveal
   children by 60ms each so a grid of cards animates in a clean wave. */
[data-reveal-stagger] > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(2) { transition-delay: 60ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(3) { transition-delay: 120ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(4) { transition-delay: 180ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(5) { transition-delay: 240ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(6) { transition-delay: 300ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(7) { transition-delay: 360ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(8) { transition-delay: 420ms; }
/* No-JS / older-browser fallback: if .reveal-ready was never set on <html>,
   show everything immediately so reveal targets don't stay invisible. */
html:not(.reveal-ready) [data-reveal] {
  opacity: 1; transform: none; transition: none;
}

/* ==========================================================================
   Footer and CTA strip link polish
   ========================================================================== */
.rs-footer__list a,
.rs-footer__contact a {
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.rs-footer__list a:hover,
.rs-footer__contact a:hover { opacity: 1; }
.rs-cta-strip { transition: background var(--dur-standard) var(--ease-out); }

/* ==========================================================================
   Global motion guard
   ==========================================================================
   For users who request reduced motion, disable all non-essential animation.
   Opacity-only state changes are kept (instant). No movement, no scaling, no
   parallax, no auto-reveal — content shows immediately. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.001ms !important;
    transition-delay:     0ms     !important;
    scroll-behavior:      auto    !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .rs-btn:hover,
  .rs-svc:hover,
  .rs-gallery__item:hover { transform: none !important; }
  .rs-gallery__item:hover .rs-gallery__img img { transform: none !important; }
}

/* ==========================================================================
   Touch device hover-state safety
   ========================================================================== */
@media (hover: none) {
  /* Disable persistent hover lifts on touch — they get stuck after a tap. */
  .rs-btn:hover,
  .rs-svc:hover,
  .rs-gallery__item:hover { transform: none; }
  .rs-svc:hover .rs-svc__icon { background: var(--rs-navy-100); }
  .rs-svc:hover .rs-svc__icon svg { color: var(--rs-navy); }
  .rs-svc:hover .rs-svc__link { gap: 6px; }
  .rs-gallery__item:hover .rs-gallery__img img { transform: none; }
  .rs-nav__link:hover::after { transform: scaleX(0); }
}