/* Ruang Project — dimensional display + whole-site material theme, v5.0.
 * Existing grids, content and handlers remain intact. Public surfaces now
 * share the hero's dark palette; its colours come from the CMS theme values.
 * Only the public header supplies .rp-depth; admin pages are not targeted.
 */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex/IBMPlexSans-Medium-Latin1.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
.rp-depth {
  --rp-edge: rgba(255, 213, 105, .35);
  --rp-ease: cubic-bezier(.2, .7, .2, 1);
}

/* The existing hero artwork becomes the face of a dimensional signboard. */
.rp-depth .hero-art {
  perspective: 1200px;
  perspective-origin: 50% 45%;
}
.rp-depth .hero-art::before {
  content: "";
  position: absolute;
  inset: 11% -6% -5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 187, 52, .13), transparent 68%);
  pointer-events: none;
}
.rp-depth .hero-art::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 4%;
  bottom: -29px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 72%);
  transform: rotate(-3deg);
  pointer-events: none;
}
.rp-depth .hero-art .sign-board {
  --rp-rx: 0deg;
  --rp-ry: 0deg;
  --rp-lift: 0px;
  transform-style: preserve-3d;
  overflow: visible;
  transform: rotateX(calc(4deg + var(--rp-rx)))
    rotateY(calc(-10deg + var(--rp-ry))) rotateZ(-1deg)
    translateY(var(--rp-lift));
  border-color: rgba(255, 221, 147, .36);
  box-shadow:
    1px 1px 0 #857143,
    2px 2px 0 #554a35,
    4px 4px 0 #302d25,
    6px 6px 0 #282822,
    8px 8px 0 #222320,
    10px 10px 0 #191e21,
    15px 18px 28px rgba(0, 0, 0, .27),
    0 36px 62px rgba(0, 0, 0, .38);
  transition: transform .55s var(--rp-ease);
}
.rp-depth .sign-board::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(247, 209, 123, .23);
  border-radius: inherit;
  background: linear-gradient(135deg, #4e4531, #151a21 40%, #080b10);
  transform: translate3d(8px, 10px, -18px);
  pointer-events: none;
}
.rp-depth .sign-board::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 240, 205, .18);
  background: linear-gradient(125deg, rgba(255, 247, 222, .12), transparent 37%,
    transparent 75%, rgba(255, 211, 120, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translateZ(2px);
  pointer-events: none;
}
.rp-depth .sign-board-image .hero-brand-image {
  /* Explicit bounds also prevent the original percentage-height image clipping. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: inherit;
  backface-visibility: hidden;
  transform: translateZ(1px);
}
.rp-depth .sign-board .neon-text {
  transform: translateZ(25px);
  text-shadow: 1px 1px 0 #b78b28, 2px 2px 0 #927023,
    3px 3px 0 #715721, 4px 4px 0 #51421e, 5px 5px 0 #352e1c,
    8px 12px 18px rgba(0, 0, 0, .6), 0 0 26px rgba(255, 192, 65, .28);
}

/* Restrict moving surfaces to display cards, never forms or media controls. */
.rp-depth .service-card,
.rp-depth .card-dark,
.rp-depth .stat,
.rp-depth .gallery-item {
  --rp-rx: 0deg;
  --rp-ry: 0deg;
  --rp-lift: 0px;
  --rp-mx: 50%;
  --rp-my: 20%;
  position: relative;
  transform: perspective(1000px) translateY(var(--rp-lift))
    rotateX(var(--rp-rx)) rotateY(var(--rp-ry));
  transition: transform .45s var(--rp-ease), box-shadow .3s ease, border-color .3s ease;
}
.rp-depth .service-card,
.rp-depth .card-dark,
.rp-depth .stat {
  transform-style: preserve-3d;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .11), 0 15px 32px rgba(0, 0, 0, .09);
}
.rp-depth .service-card::after,
.rp-depth .card-dark::after,
.rp-depth .stat::after,
.rp-depth .gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--rp-mx) var(--rp-my),
    rgba(255, 224, 151, .12), transparent 58%);
  border: 1px solid rgba(255, 232, 175, .09);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.rp-depth .service-card > .icon-box,
.rp-depth .card-dark > .icon-box {
  transform: translateZ(22px);
  box-shadow: 0 4px 0 rgba(164, 118, 30, .16), 0 9px 16px rgba(0, 0, 0, .10);
}
.rp-depth .service-card > h3,
.rp-depth .card-dark > h3,
.rp-depth .stat > strong {
  transform: translateZ(15px);
}
.rp-depth .service-card > p,
.rp-depth .card-dark > p,
.rp-depth .stat > span {
  transform: translateZ(9px);
}
.rp-depth .service-card > .service-more { transform: translateZ(18px); }
.rp-depth .gallery-item {
  box-shadow: 0 4px 0 rgba(0, 0, 0, .15), 0 16px 28px rgba(0, 0, 0, .12);
}
.rp-depth .gallery-item img { transition: transform .6s var(--rp-ease); }
.rp-depth .gallery-item::after { z-index: 1; }
.rp-depth .service-gallery-item figcaption { z-index: 2; }

/* Buttons retain their original labels, colours, destinations and handlers. */
.rp-depth .btn {
  box-shadow: 0 3px 0 rgba(113, 72, 0, .68),
    inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px rgba(0, 0, 0, .16);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rp-depth .btn-outline {
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.rp-depth .btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .24);
}
.rp-depth a:focus-visible,
.rp-depth button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rp-depth .service-card:hover,
  .rp-depth .card-dark:hover,
  .rp-depth .stat:hover,
  .rp-depth .gallery-item:hover {
    --rp-lift: -4px;
    border-color: var(--accent);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .16), 0 22px 38px rgba(0, 0, 0, .18);
  }
  .rp-depth .service-card:hover::after,
  .rp-depth .card-dark:hover::after,
  .rp-depth .stat:hover::after,
  .rp-depth .gallery-item:hover::after { opacity: 1; }
  .rp-depth .gallery-item:hover img { transform: scale(1.035); }
  .rp-depth .btn:hover { transform: translateY(-2px); }
  .rp-depth .btn:active { transform: translateY(2px); }
  .rp-depth .rp-depth-active { will-change: transform; }
  .rp-depth .rp-depth-active,
  .rp-depth .hero-art .sign-board.rp-depth-active {
    transition: transform .10s linear, box-shadow .3s ease, border-color .3s ease;
  }
}

/* Phones keep depth through light and shadows without tracking touch/scroll. */
@media (max-width: 680px), (hover: none), (pointer: coarse) {
  .rp-depth .hero-art .sign-board {
    transform: none;
    box-shadow: 2px 3px 0 #514630, 4px 6px 0 #252824, 0 19px 34px rgba(0, 0, 0, .30);
  }
  .rp-depth .sign-board::before { display: none; }
  .rp-depth .hero-art::after { bottom: -18px; }
  .rp-depth .service-card,
  .rp-depth .card-dark,
  .rp-depth .stat,
  .rp-depth .gallery-item,
  .rp-depth .service-card:hover { transform: none; }
  .rp-depth .service-card > *,
  .rp-depth .card-dark > *,
  .rp-depth .stat > *,
  .rp-depth .sign-board .neon-text { transform: none; }
  .rp-depth .gallery-item:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rp-depth .hero-art .sign-board,
  .rp-depth .sign-board .neon-text,
  .rp-depth .service-card,
  .rp-depth .service-card:hover,
  .rp-depth .card-dark,
  .rp-depth .stat,
  .rp-depth .gallery-item,
  .rp-depth .gallery-item img,
  .rp-depth .service-card > *,
  .rp-depth .card-dark > *,
  .rp-depth .stat > *,
  .rp-depth .btn,
  .rp-depth .btn:hover,
  .rp-depth .btn:active { transform: none; transition: none; }
  .rp-depth .sign-board::before { display: none; }
  .rp-depth .service-card::after,
  .rp-depth .card-dark::after,
  .rp-depth .stat::after,
  .rp-depth .gallery-item::after { transition: none; }
}

/* ----------------------------------------------------------------------
   ONE PUBLIC THEME / v3.0
   The hero's palette continues through every public page and floating UI.
   These rules also work without the decorative JavaScript.
   ---------------------------------------------------------------------- */
body.rp-depth {
  --line: rgba(224, 232, 243, .11);
  --card: var(--rp-surface, #111722);
  --rp-border: rgba(224, 232, 243, .11);
  --rp-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  background: var(--rp-bg, #080b10);
  color: var(--rp-text, #fff);
  color-scheme: dark;
}
.rp-depth ::selection { background: #ffcc00; color: #101318; }
.rp-depth .site-header {
  background: var(--rp-nav, #080b10);
  border-bottom-color: var(--rp-border);
}
.rp-depth .nav-links { color: var(--rp-muted, #c2c9d4); gap: clamp(12px, 1.8vw, 25px); }
.rp-depth .nav-links a:hover,
.rp-depth .nav-links a:focus-visible { color: var(--accent); }
.rp-depth .nav-toggle { min-width: 44px; min-height: 44px; }

/* Continuous charcoal surfaces, with quiet changes in light between sections. */
.rp-depth .section {
  position: relative;
  color: var(--rp-text, #fff);
  background: radial-gradient(ellipse at 100% 0, var(--rp-accent-wash, rgba(255, 204, 0, .06)), transparent 55%),
    var(--rp-bg, #080b10);
  border-top: 1px solid var(--rp-border);
}
.rp-depth .section-dark,
.rp-depth .section-soft {
  background: radial-gradient(ellipse at 0 0, rgba(121, 225, 244, .025), transparent 55%),
    var(--rp-section, #0c1119);
}
.rp-depth .page-hero {
  background: radial-gradient(ellipse at 85% 20%, var(--rp-accent-wash, rgba(255, 204, 0, .06)), transparent 60%),
    linear-gradient(125deg, var(--rp-bg, #080b10), var(--rp-surface-raised, #101826));
  color: var(--rp-text, #fff);
}
.rp-depth .page-hero h1 { line-height: 1.12; letter-spacing: -.035em; }
.rp-depth .page-hero p { color: var(--rp-muted, #c2c9d4); max-width: 760px; }
.rp-depth .section h2 {
  font-size: clamp(1.85rem, 3.3vw, 2.65rem);
  letter-spacing: -.035em;
  line-height: 1.18;
}
.rp-depth .section-head h2 { margin-bottom: 18px; }
.rp-depth .section-head p { color: var(--rp-muted, #c2c9d4); line-height: 1.7; }
.rp-depth .section-head > a,
.rp-depth .service-more,
.rp-depth .service-card a,
.rp-depth .article-card-body > a {
  color: var(--accent);
  font-size: .9rem;
  font-weight: 700;
}
.rp-depth .section-head > a { flex-shrink: 0; padding: 8px 0; }
.rp-depth .section-head > a:hover,
.rp-depth .article-card-body > a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* One material, border and type scale for services, reviews and article cards. */
.rp-depth .card,
.rp-depth .card-dark,
.rp-depth .article-premium,
.rp-depth .service-side-card {
  min-width: 0;
  overflow-wrap: anywhere;
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), transparent 60%),
    var(--rp-surface, #111722);
  color: var(--rp-text, #fff);
  border: 1px solid var(--rp-border);
  border-radius: var(--theme-radius, 20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), var(--rp-shadow);
}
.rp-depth .card h3 { margin: 0 0 12px; font-size: 1.14rem; line-height: 1.45; letter-spacing: -.015em; }
.rp-depth .card p { color: var(--rp-muted, #c2c9d4); font-size: .95rem; line-height: 1.75; }
.rp-depth .card h2 { margin-bottom: 20px; }
.rp-depth .card p + h3 { margin-top: 26px; }
.rp-depth .icon-box {
  flex-shrink: 0;
  background: var(--rp-accent-soft, rgba(255, 204, 0, .10));
  color: var(--accent);
  border: 1px solid var(--rp-accent-line, rgba(255, 204, 0, .28));
  box-shadow: inset 0 1px 0 rgba(255, 229, 147, .06), 0 8px 18px rgba(0, 0, 0, .12);
}
.rp-depth .service-more { padding-top: 12px; }
.rp-depth .stat {
  border-color: var(--rp-border);
  background: linear-gradient(135deg, rgba(255, 255, 255, .025), transparent), var(--rp-surface, #111722);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 8px 20px rgba(0, 0, 0, .12);
}
.rp-depth .stat strong { font-size: clamp(1.05rem, 1.55vw, 1.38rem); line-height: 1.4; margin-bottom: 10px; color: var(--accent); }
.rp-depth .stat span { color: var(--rp-muted, #c2c9d4); font-size: .86rem; line-height: 1.65; }
.rp-depth .service-side-card strong { color: var(--accent); }
.rp-depth .service-side-card span,
.rp-depth .meta { color: #a6b1c1; }
.rp-depth .prose { color: var(--rp-muted, #c2c9d4); line-height: 1.85; overflow-wrap: anywhere; }
.rp-depth .prose h2,
.rp-depth .prose h3 { color: var(--rp-text, #fff); }
.rp-depth .prose .btn { margin-top: 12px; }
.rp-depth .back-link { font-size: .9rem; }
.rp-depth .back-link:hover { color: var(--accent); }

/* Keep project photography clear; the frame supplies the visual connection. */
.rp-depth .gallery-item {
  border: 1px solid rgba(224, 232, 243, .16);
  background: var(--rp-surface, #111722);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.rp-depth .gallery-placeholder {
  background: radial-gradient(circle at 80% 10%, var(--rp-accent-soft, rgba(255, 204, 0, .10)), transparent 70%),
    var(--rp-surface, #111722);
  color: var(--rp-muted, #c2c9d4);
}
.rp-depth .service-gallery-item figcaption {
  background: rgba(8, 11, 16, .88);
  border: 1px solid var(--rp-border);
}
.rp-depth .article-card { padding: 0; overflow: hidden; }
.rp-depth .article-card .article-card-body { padding: 24px; }
.rp-depth .article-card .meta { margin-bottom: 12px; font-size: .8rem; }
.rp-depth .article-card-body > a { display: inline-block; padding-top: 8px; }
.rp-depth .article-cover { border: 1px solid var(--rp-border); box-shadow: var(--rp-shadow); }
.rp-depth .article-content { font-size: 1.025rem; line-height: 1.9; }
.rp-depth .lightbox { background: rgba(3, 6, 10, .96); }
.rp-depth .lightbox button { min-width: 44px; min-height: 44px; cursor: pointer; }

/* Buttons stay recognizable throughout the dark pages. */
.rp-depth .btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 3px 0 rgba(120, 76, 0, .65), 0 10px 24px rgba(0, 0, 0, .18);
  font-size: .92rem;
}
.rp-depth .btn-outline {
  color: var(--rp-text, #fff);
  background: rgba(255, 255, 255, .025);
  border-color: rgba(224, 232, 243, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 3px 0 rgba(0, 0, 0, .2);
}
.rp-depth .cta {
  border: 1px solid var(--rp-accent-line, rgba(255, 204, 0, .28));
  background: radial-gradient(ellipse at 100% 0, var(--rp-accent-soft, rgba(255, 204, 0, .10)), transparent 70%),
    var(--rp-surface, #111722);
  box-shadow: inset 0 1px 0 rgba(255, 229, 147, .07), var(--rp-shadow);
}
.rp-depth .cta p { color: var(--rp-muted, #c2c9d4); }
.rp-depth .cta > .btn { flex-shrink: 0; }

/* Forms remain still and legible; input, file upload and feedback share the theme. */
.rp-depth .form-group { min-width: 0; }
.rp-depth .form-group label { color: var(--rp-text, #fff); font-size: .9rem; }
.rp-depth .input {
  min-width: 0;
  background: var(--rp-bg, #080b10);
  color: var(--rp-text, #fff);
  border-color: #607087;
  caret-color: var(--accent);
  font-size: 1rem;
}
.rp-depth .input::placeholder { color: #97a4b6; opacity: 1; }
.rp-depth .input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.rp-depth textarea.input { resize: vertical; }
.rp-depth .input::file-selector-button {
  background: var(--rp-surface-raised, #101826);
  color: var(--rp-text, #fff);
  border: 1px solid var(--rp-accent-line, rgba(255, 204, 0, .28));
  border-radius: 7px;
  padding: 7px 10px;
  margin-right: 10px;
  font: inherit;
  cursor: pointer;
}
.rp-depth .input:-webkit-autofill {
  -webkit-text-fill-color: var(--rp-text, #fff);
  box-shadow: 0 0 0 1000px var(--rp-bg, #080b10) inset;
}
.rp-depth .alert { border: 1px solid var(--rp-border); }
.rp-depth .alert-success { color: #ace4c1; background: #11271e; border-color: #315742; }
.rp-depth .alert-error { color: #ffc0bb; background: #321b20; border-color: #754044; }
.rp-depth .review-stars label { color: #718098; font-size: 2.25rem; }
.rp-depth .review-stars label:hover,
.rp-depth .review-stars label:hover ~ label,
.rp-depth .review-stars input:checked ~ label { color: var(--accent); }
.rp-depth .review-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }

/* Testimonials, including the popup, use the same dark card instead of white. */
.rp-depth .testimonial-hero-inner { padding: 0; }
.rp-depth .testimonial-kicker { color: var(--accent); font-size: .8rem; letter-spacing: .12em; }
.rp-depth .testimonial-hero h1 { margin: 12px 0 20px; }
.rp-depth .public-testimonial .testimonial-quote { color: var(--rp-muted, #c2c9d4); }
.rp-depth .public-testimonial .stars,
.rp-depth .testimonial-stars { color: var(--accent); }
.rp-depth .testimonial-pagination a,
.rp-depth .testimonial-pagination .page-arrow {
  background: var(--rp-surface, #111722);
  color: var(--rp-text, #fff);
  border-color: var(--rp-border);
}
.rp-depth .testimonial-pagination a.active { background: var(--accent); border-color: var(--accent); color: #111; }
.rp-depth .testimonial-pagination a:hover { border-color: var(--accent); }
.rp-depth .testimonial-pagination .dots { background: transparent; color: var(--rp-muted, #c2c9d4); }
.rp-depth .testimonial-toast {
  background: linear-gradient(135deg, var(--rp-accent-wash, rgba(255, 204, 0, .06)), transparent 70%),
    var(--rp-surface, #111722);
  color: var(--rp-text, #fff);
  border-color: var(--rp-accent-line, rgba(255, 204, 0, .28));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow-wrap: anywhere;
}
.rp-depth .testimonial-badge {
  color: var(--accent);
  background: var(--rp-accent-soft, rgba(255, 204, 0, .10));
  border: 1px solid var(--rp-accent-line, rgba(255, 204, 0, .28));
}
.rp-depth .testimonial-message { font-weight: 600; line-height: 1.6; font-size: .9rem; }
.rp-depth .testimonial-client { color: var(--rp-muted, #c2c9d4); font-size: .78rem; font-weight: 500; }
.rp-depth .testimonial-close { color: var(--rp-muted, #c2c9d4); min-width: 32px; min-height: 32px; line-height: 1; }
.rp-depth .testimonial-close:hover { color: var(--accent); }

/* Inline SVG brand icons stay visible without icon fonts, scripts or a CDN. */
.rp-depth .floating-social {
  min-width: 140px;
  background: var(--rp-surface, #111722);
  border-color: rgba(224, 232, 243, .20);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
  font-weight: 600;
  gap: 8px;
}
.rp-depth .floating-social::before { content: none; }
.rp-depth .rp-social-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--rp-social-accent, #ffcc00);
}
.rp-depth .rp-social-label { min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.rp-depth .floating-whatsapp { --rp-social-accent: #55dc91; }
.rp-depth .floating-instagram { --rp-social-accent: #e797dc; }
.rp-depth .floating-shopee { --rp-social-accent: #ff957a; }
.rp-depth .floating-social:hover { border-color: var(--rp-social-accent); filter: none; }

.rp-depth .footer {
  background: var(--rp-footer, #080b10);
  border-top: 1px solid var(--rp-border);
  color: var(--rp-muted, #c2c9d4);
  overflow-wrap: anywhere;
}
.rp-depth .footer h3 { color: var(--accent); }
.rp-depth .footer h4 { font-size: .86rem; letter-spacing: .04em; }
.rp-depth .footer p { font-size: .91rem; line-height: 1.9; }
.rp-depth .footer a:hover { color: var(--accent); }
.rp-depth .footer-bottom { border-color: var(--rp-border); color: #a6b1c1; font-size: .8rem; padding-bottom: 8px; }
.rp-depth .rp-motion-toggle { border-color: var(--rp-border); background: var(--rp-surface, #111722); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rp-depth .service-card:hover,
  .rp-depth .card-dark:hover,
  .rp-depth .stat:hover,
  .rp-depth .gallery-item:hover {
    border-color: var(--rp-accent-line, rgba(255, 204, 0, .28));
    box-shadow: 0 16px 34px rgba(0, 0, 0, .28), 0 0 20px var(--rp-accent-wash, rgba(255, 204, 0, .06));
  }
}
@media (max-width: 900px) {
  .rp-depth .grid > .card[style*="grid-column"] { grid-column: 1 / -1 !important; }
}
@media (max-width: 680px) {
  .rp-depth .section { padding: 56px 0; }
  .rp-depth .section-head { flex-wrap: wrap; gap: 14px; align-items: flex-start; }
  .rp-depth .section-head > div { flex: 1 1 100%; }
  .rp-depth .section-head > a { padding: 0; }
  .rp-depth .section h2 { font-size: clamp(1.7rem, 6.8vw, 2rem); }
  .rp-depth .nav-links {
    top: var(--rp-nav-height, 76px);
    background: var(--rp-nav, #080b10);
    border-bottom: 1px solid var(--rp-border);
    box-shadow: 0 20px 30px rgba(0, 0, 0, .25);
    gap: 4px;
  }
  .rp-depth .nav-links a { padding: 10px 12px; min-height: 44px; border-radius: 8px; }
  .rp-depth .nav-links a:hover { background: var(--rp-accent-soft, rgba(255, 204, 0, .10)); }
  .rp-depth .nav-links a::after { bottom: 4px; left: 12px; right: 12px; }
  .rp-depth .service-detail-title { align-items: flex-start; gap: 14px; }
  .rp-depth .service-detail-title h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  .rp-depth .article-card .article-card-body { padding: 20px; }
  .rp-depth .footer { padding-bottom: 86px; }
  .rp-depth .floating-socials {
    flex-direction: row;
    justify-content: flex-end;
    left: 14px;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    gap: 6px;
  }
  .rp-depth .floating-social {
    flex: 1 1 0;
    min-width: 0;
    max-width: 120px;
    height: 42px;
    padding: 0 6px;
    gap: 4px;
    font-size: .75rem;
  }
  .rp-depth .rp-social-icon { width: 18px; height: 18px; flex-basis: 18px; }
  /* Override the old mobile popup patch so it clears the social controls. */
  .rp-depth .testimonial-toast {
    left: auto !important;
    right: 14px !important;
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    width: min(300px, calc(100vw - 28px)) !important;
    padding: 14px 16px !important;
    max-height: min(260px, calc(100vh - 180px));
    overflow-y: auto;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .4) !important;
  }
  .rp-depth .testimonial-close { top: 5px !important; right: 6px !important; font-size: 1.3rem !important; }
  .rp-depth .testimonial-badge { font-size: .62rem !important; }
  .rp-depth .testimonial-message { font-size: .8rem !important; line-height: 1.6 !important; }
  .rp-depth .testimonial-client { font-size: .74rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-depth .floating-social { transition: none; }
  .rp-depth .floating-social:hover { transform: none; }
  .rp-depth .testimonial-toast { transition: none; }
}
/* ----------------------------------------------------------------------
   STUDIO TYPOGRAPHY / v4.0
   Self-hosted, licensed type; the CMS can still choose its other font stacks.
   ---------------------------------------------------------------------- */
body.rp-depth { font-weight: 400; }
.rp-depth button,
.rp-depth input,
.rp-depth select,
.rp-depth textarea { font-family: inherit; }
.rp-depth h1,
.rp-depth h2,
.rp-depth h3 { text-wrap: balance; }
.rp-depth .hero h1 {
  font-size: clamp(2.45rem, 4.6vw, 4.15rem);
  font-weight: 500;
  line-height: 1.09;
  letter-spacing: -.035em;
  margin: 22px 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
.rp-depth .hero p { font-size: 1rem; line-height: 1.8; max-width: 56ch; }
.rp-depth .page-hero h1 {
  font-size: clamp(2.15rem, 4.2vw, 3.4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.rp-depth .section h2 { font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.025em; line-height: 1.23; }
.rp-depth .card h3,
.rp-depth .prose h3 { font-weight: 600; font-size: 1.125rem; letter-spacing: -.012em; }
.rp-depth .card p { font-weight: 400; }
.rp-depth .stat strong { font-weight: 500; letter-spacing: -.015em; }
.rp-depth .brand { font-weight: 600; }
.rp-depth .brand-mark { border-radius: 6px; background: var(--accent); box-shadow: none; }
.rp-depth .nav-links { font-size: .9rem; font-weight: 400; }
.rp-depth .eyebrow {
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  background: none;
  color: var(--rp-muted, #c2c9d4);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .07em;
  padding: 3px 0 3px 11px;
}
.rp-depth .section-head > a,
.rp-depth .service-more,
.rp-depth .service-card a,
.rp-depth .article-card-body > a { font-weight: 500; letter-spacing: 0; }
.rp-depth .btn {
  min-height: 46px;
  padding: 12px 21px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--accent);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.rp-depth .btn-sm { min-height: 40px; padding: 9px 16px; }
.rp-depth .btn-outline { background: transparent; border-color: rgba(224, 232, 243, .32); color: var(--rp-text, #fff); }
.rp-depth .btn-danger { background: #b92929; color: #fff; }
.rp-depth .btn:hover { transform: translateY(-1px); box-shadow: none; }
.rp-depth .btn:active { transform: translateY(0); box-shadow: none; }
.rp-depth .btn-outline:hover { background: rgba(255, 255, 255, .05); border-color: rgba(224, 232, 243, .55); }
.rp-depth .hero-actions .btn::after { content: none; }
.rp-depth .card,
.rp-depth .card-dark,
.rp-depth .article-premium,
.rp-depth .service-side-card,
.rp-depth .gallery-item,
.rp-depth .cta { border-radius: min(var(--theme-radius, 20px), 14px); }
.rp-depth .stat { border-radius: 10px; }
.rp-depth .icon-box { border-radius: 8px; box-shadow: none; }
.rp-depth .service-card > .icon-box,
.rp-depth .card-dark > .icon-box { box-shadow: none; }
.rp-depth .input { border-radius: 7px; }
.rp-depth .form-group label { font-weight: 500; }
.rp-depth .floating-social { border-radius: 8px; font-weight: 500; }
.rp-depth .testimonial-toast { border-radius: 12px; }
.rp-depth .testimonial-badge { border-radius: 4px; font-weight: 500; letter-spacing: .035em; }
.rp-depth .testimonial-message { font-weight: 400; }
.rp-depth .testimonial-kicker { font-weight: 500; letter-spacing: .08em; }
.rp-depth .testimonial-author strong,
.rp-depth .testimonial-pagination a { font-weight: 500; }
.rp-depth .footer h3,
.rp-depth .footer h4 { font-weight: 500; letter-spacing: 0; }

/* A physical display: glass face, extruded frame, low metal plinth and a
 * faded reflection. The existing artwork remains the only main visual.
 */
.rp-depth.rp-cinematic { --rp-progress: 0; --rp-edge-drift: 0px; }
.rp-cinematic .hero,
.rp-cinematic .page-hero { position: relative; isolation: isolate; overflow: hidden; }
.rp-cinematic .hero {
  background: radial-gradient(ellipse at 77% 53%, rgba(170, 182, 198, .055), transparent 43%),
    linear-gradient(135deg, var(--rp-bg, #080b10), var(--rp-section, #0c1119));
}
.rp-cinematic .hero > .container,
.rp-cinematic .page-hero > .container { position: relative; z-index: 1; }
.rp-cinematic .hero::before,
.rp-cinematic .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 65%, rgba(214, 224, 229, .025) 65.1%, transparent 73%);
  pointer-events: none;
  z-index: 0;
}
.rp-cinematic .hero-art {
  --rp-scene-yaw: -10deg;
  --rp-scene-pitch: 3deg;
  --rp-scene-rise: 0px;
  --rp-scene-shift: 0px;
  --rp-base-yaw: -3deg;
  --rp-pillar-rise: 0px;
  --rp-glint-x: 48%;
  min-height: 480px;
  isolation: isolate;
  perspective: 1300px;
  perspective-origin: 50% 42%;
}
.rp-cinematic .hero-art::before {
  inset: -15% -15% -10%;
  background: radial-gradient(ellipse at 50% 80%, rgba(222, 187, 103, .065), transparent 60%);
}
.rp-cinematic .hero-art::after { content: none; }
.rp-cinematic .hero-art .sign-board {
  inset: 0 auto auto 50%;
  width: min(82%, 380px);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(224, 229, 231, .7);
  border-radius: 10px;
  background: #0c1117;
  z-index: 3;
  transform: translate3d(calc(-50% + var(--rp-scene-shift)), var(--rp-scene-rise), 0)
    rotateX(calc(var(--rp-scene-pitch) + var(--rp-rx)))
    rotateY(calc(var(--rp-scene-yaw) + var(--rp-ry)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
    1px 1px 0 #a4a6a2, 2px 2px 0 #494e50, 4px 4px 0 #383e40,
    6px 6px 0 #1d2327, 8px 8px 0 #11171c, 10px 10px 0 #070b0e,
    0 26px 34px rgba(0, 0, 0, .44);
  transition: transform .18s ease-out;
  animation: rp-display-float 9s ease-in-out infinite;
}
.rp-cinematic .sign-board::before {
  inset: 0;
  background: linear-gradient(125deg, #9c9e99, #252d33 26%, #080c10 70%, #606361);
  border-color: rgba(224, 232, 243, .24);
  transform: translate3d(9px, 8px, -16px);
}
.rp-cinematic .sign-board::after {
  border-color: rgba(242, 244, 241, .28);
  background: linear-gradient(125deg, rgba(241, 246, 246, .06), transparent 33% 77%, rgba(219, 184, 100, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
}
.rp-cinematic .sign-board .neon-text { font-weight: 500; font-size: clamp(2rem, 4.2vw, 4rem); letter-spacing: .02em; text-align: center; }
.rp-cinematic .rp-glass-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(110deg, transparent 35%, rgba(239, 247, 247, .10) 48%, transparent 61%);
  background-size: 220% 100%;
  background-position: var(--rp-glint-x) 0;
  transform: translateZ(3px);
}
.rp-cinematic .rp-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.rp-cinematic .rp-stage-ground {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -13%;
  height: 35%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, .9), rgba(0, 0, 0, .2) 47%, transparent 69%);
}
.rp-cinematic .rp-stage-plinth {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -1%;
  height: 29%;
  border-radius: 50%;
  border: 1px solid rgba(218, 224, 223, .72);
  background: radial-gradient(ellipse at var(--rp-glint-x) 22%, rgba(236, 212, 150, .2), transparent 56%),
    linear-gradient(145deg, #41484c, #20272d 48%, #10181e 72%, #363d41);
  box-shadow: 0 2px 0 #a9aca8, 0 4px 0 #3d4548, 0 7px 0 #252c30,
    0 11px 0 #1d252b, 0 16px 0 #121a21, 0 20px 0 #0c1218,
    0 29px 26px rgba(0, 0, 0, .64);
  transform: translateY(calc(var(--rp-scene-rise) / 5)) rotateY(var(--rp-base-yaw));
  transition: transform .18s ease-out;
}
.rp-cinematic .rp-stage-plinth::before {
  content: "";
  position: absolute;
  inset: 6% 2%;
  border-radius: inherit;
  border-top: 1px solid rgba(243, 228, 189, .32);
  background: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, .32), transparent 63%);
}
.rp-cinematic .rp-stage-plinth::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(238, 213, 157, .48);
  opacity: .25;
  animation: rp-rim-light 9s ease-in-out infinite;
}
.rp-cinematic .rp-stage-pillar {
  position: absolute;
  top: -11%;
  bottom: 4%;
  width: 16px;
  border: 1px solid rgba(206, 222, 228, .18);
  background: linear-gradient(90deg, rgba(116, 151, 158, .06), rgba(249, 253, 247, .40) 8%,
    rgba(143, 172, 181, .15) 18%, rgba(225, 238, 239, .025) 52%,
    rgba(237, 218, 180, .22) 93%, rgba(235, 244, 246, .55));
  box-shadow: 5px 3px 0 rgba(13, 22, 28, .44), 6px 3px 0 rgba(182, 205, 215, .12);
  transform-origin: 50% 100%;
  transition: transform .2s ease-out;
}
.rp-cinematic .rp-stage-pillar-left { left: 0; transform: translateY(var(--rp-pillar-rise)) rotate(-5deg); }
.rp-cinematic .rp-stage-pillar-right { right: 0; transform: translateY(calc(var(--rp-pillar-rise) * -1)) rotate(6deg); opacity: .65; }
.rp-cinematic .rp-stage-reflection {
  position: absolute;
  left: 50%;
  width: min(82%, 380px);
  top: 96%;
  aspect-ratio: 1;
  opacity: .13;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000, transparent 58%);
  mask-image: linear-gradient(#000, transparent 58%);
  transform: translateX(calc(-50% + var(--rp-scene-shift))) rotateY(var(--rp-scene-yaw));
}
.rp-cinematic .rp-reflection-image { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleY(-1); }

/* Reveals are brief and one-time. Scrolling itself is never intercepted. */
.rp-cinematic:not(.rp-intro-done) .hero-grid > div:first-child > .eyebrow,
.rp-cinematic:not(.rp-intro-done) .hero-grid > div:first-child > p,
.rp-cinematic:not(.rp-intro-done) .hero-actions { animation: rp-reveal .7s var(--rp-ease) both; }
.rp-cinematic:not(.rp-intro-done) .hero-actions { animation-delay: .1s; }
.rp-cinematic .rp-reveal-wait { opacity: 0; translate: 0 16px; }
.rp-cinematic .rp-reveal-enter { animation: rp-reveal .65s var(--rp-ease) both; animation-delay: var(--rp-reveal-delay, 0ms); }
.rp-cinematic .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(var(--rp-progress));
  transform-origin: left;
  pointer-events: none;
}
.rp-cinematic .rp-motion-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  margin-left: 16px;
  border: 1px solid var(--rp-border);
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.rp-cinematic .rp-motion-toggle::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.rp-cinematic.rp-motion-off .rp-motion-toggle::before { background: #818b98; }
.rp-cinematic .rp-motion-toggle:disabled { cursor: default; opacity: .7; }
@keyframes rp-display-float { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 4px; } }
@keyframes rp-rim-light { 0%, 100% { opacity: .22; } 50% { opacity: .65; } }
@keyframes rp-reveal { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* Slim glass/metal forms occupy only the spare desktop margins. */
@media (min-width: 1281px) {
  body.rp-depth::before,
  body.rp-depth::after {
    content: "";
    position: fixed;
    top: calc(var(--rp-nav-height, 76px) + 14px);
    bottom: -82px;
    left: 24px;
    width: clamp(0px, calc((100vw - var(--max, 1180px)) / 2 - 48px), 190px);
    z-index: 1;
    pointer-events: none;
    user-select: none;
    contain: paint;
    opacity: .6;
    background-image:
      linear-gradient(transparent, rgba(240, 223, 178, .65), transparent),
      linear-gradient(90deg, rgba(193, 216, 224, .02), rgba(231, 238, 235, .4) 8%, rgba(141, 165, 174, .07) 16%, rgba(151, 169, 179, .025) 80%, rgba(216, 213, 191, .22) 94%, transparent),
      linear-gradient(90deg, transparent, rgba(222, 230, 233, .18), rgba(154, 175, 185, .025) 25%, transparent 96%);
    background-size: 1px 160px, 22px 100%, 10px 74%;
    background-repeat: no-repeat;
    background-position: 30% 30%, 30% 0, 81% 50%;
    -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 72%, transparent);
    mask-image: linear-gradient(transparent, #000 16%, #000 72%, transparent);
    transform: translateY(var(--rp-edge-drift, 0px));
    animation: rp-glass-light 24s ease-in-out -6s infinite alternate;
    animation-play-state: paused;
  }
  body.rp-depth::after {
    left: auto;
    right: 24px;
    opacity: .42;
    transform: translateY(var(--rp-edge-drift, 0px)) scaleX(-1);
    animation-duration: 29s;
    animation-delay: -14s;
  }
  body.rp-depth.rp-cinematic::before,
  body.rp-depth.rp-cinematic::after { animation-play-state: running; }
}
@keyframes rp-glass-light {
  from { background-position: 30% 8%, 30% 0, 81% 50%; }
  to { background-position: 30% 90%, 30% 0, 81% 50%; }
}
@media (min-width: 681px) and (max-width: 1000px) {
  .rp-cinematic .hero-art { min-height: 400px; }
}
@media (max-width: 680px) {
  .rp-depth .hero h1 { font-size: clamp(2.35rem, 10vw, 3.15rem); line-height: 1.11; }
  .rp-depth .section h2 { font-size: clamp(1.7rem, 6.6vw, 2rem); }
  .rp-depth .page-hero h1 { font-size: clamp(2rem, 8vw, 2.7rem); }
  .rp-depth .hero-actions { gap: 10px; }
  .rp-depth .hero-actions .btn { padding-inline: 17px; }
  .rp-cinematic .hero-art { min-height: clamp(330px, 95vw, 410px); }
  .rp-cinematic .hero-art .sign-board { border-radius: 8px; animation-duration: 11s; }
  .rp-cinematic .rp-stage-pillar { width: 10px; opacity: .5; top: -3%; }
  .rp-cinematic .rp-stage-reflection { opacity: .08; }
  .rp-cinematic .rp-motion-toggle { margin: 12px 0 0; display: flex; }
}
/* Pause all decorative movement, including the edge lighting, when requested
 * or when the tab is hidden. Reduced motion keeps a static dimensional view.
 */
.rp-cinematic .hero-art.rp-out-of-view .sign-board,
.rp-cinematic .hero-art.rp-out-of-view .rp-stage-plinth::after,
body.rp-depth.rp-motion-off::before,
body.rp-depth.rp-motion-off::after,
body.rp-depth.rp-suspended::before,
body.rp-depth.rp-suspended::after,
.rp-cinematic.rp-motion-off .hero-art .sign-board,
.rp-cinematic.rp-motion-off .rp-stage-plinth::after,
.rp-cinematic.rp-suspended .hero-art .sign-board,
.rp-cinematic.rp-suspended .rp-stage-plinth::after { animation-play-state: paused; }
.rp-cinematic.rp-motion-off .rp-reveal-wait,
.rp-cinematic.rp-motion-off .rp-reveal-enter,
.rp-cinematic.rp-motion-off:not(.rp-intro-done) .hero-grid > div:first-child > .eyebrow,
.rp-cinematic.rp-motion-off:not(.rp-intro-done) .hero-grid > div:first-child > p,
.rp-cinematic.rp-motion-off:not(.rp-intro-done) .hero-actions { opacity: 1; translate: none; animation: none; }
.rp-cinematic.rp-motion-off .hero-art .sign-board,
.rp-cinematic.rp-motion-off .rp-stage-plinth,
.rp-cinematic.rp-motion-off .rp-stage-pillar { transition: none; }
@media (prefers-reduced-motion: reduce) {
  body.rp-depth::before,
  body.rp-depth::after,
  .rp-cinematic .hero-art .sign-board,
  .rp-cinematic .rp-stage-plinth::after,
  .rp-cinematic .rp-reveal-enter,
  .rp-cinematic:not(.rp-intro-done) .hero-grid > div:first-child > .eyebrow,
  .rp-cinematic:not(.rp-intro-done) .hero-grid > div:first-child > p,
  .rp-cinematic:not(.rp-intro-done) .hero-actions { animation: none; translate: none; }
  .rp-cinematic .rp-reveal-wait { opacity: 1; translate: none; }
  .rp-cinematic .hero-art .sign-board,
  .rp-cinematic .rp-stage-plinth,
  .rp-cinematic .rp-stage-pillar,
  .rp-depth .btn { transition: none; }
  .rp-depth .btn:hover,
  .rp-depth .btn:active { transform: none; }
}
@media print {
  body.rp-depth::before,
  body.rp-depth::after,
  .rp-stage,
  .rp-glass-face,
  .rp-motion-toggle { display: none; }
  .rp-cinematic .hero-art .sign-board { animation: none; transform: none; }
  .rp-cinematic .rp-reveal-wait { opacity: 1; translate: none; }
}

/* ----------------------------------------------------------------------
   MATERIALS ACROSS EVERY PUBLIC PAGE / v5.0
   Shared glass edges, dimensional frames and scroll lighting. Decorative
   objects use their own layers; text, form fields and media stay readable.
   ---------------------------------------------------------------------- */
.rp-depth.rp-whole-site {
  --rp-material-light: 50%;
  --rp-plane-rise: 0px;
  --rp-plane-turn: 0deg;
  --rp-surface-y: 0px;
  --rp-surface-rx: 0deg;
  --rp-surface-ry: 0deg;
  --rp-photo-y: 0px;
}
.rp-whole-site .rp-material-section { position: relative; isolation: isolate; }
.rp-whole-site .rp-material-section > .container { position: relative; z-index: 1; }
.rp-whole-site .rp-section-depth {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  perspective: 1200px;
  pointer-events: none;
  user-select: none;
}
.rp-whole-site .rp-section-plane {
  position: absolute;
  width: clamp(160px, 17vw, 280px);
  height: clamp(220px, 38vw, 470px);
  top: 11%;
  border: 1px solid rgba(221, 230, 231, .17);
  border-radius: 8px;
  background: linear-gradient(105deg, rgba(226, 235, 237, .075), rgba(255, 255, 255, .006) 35% 75%, rgba(232, 211, 160, .065));
  box-shadow: 7px 4px 0 rgba(4, 9, 13, .55), 8px 4px 0 rgba(197, 216, 224, .12), 26px 18px 45px rgba(0, 0, 0, .17);
  opacity: .65;
  transform-style: preserve-3d;
}
.rp-whole-site .rp-section-plane::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-left: 1px solid rgba(241, 232, 209, .1);
  border-bottom: 1px solid rgba(195, 215, 222, .07);
  border-radius: 3px;
}
.rp-whole-site .rp-section-plane-back {
  left: max(-170px, calc((100% - var(--max, 1180px)) / 2 - 250px));
  transform: translateY(var(--rp-plane-rise)) rotateX(-8deg) rotateY(calc(28deg + var(--rp-plane-turn))) rotateZ(-9deg);
}
.rp-whole-site .rp-section-plane-front {
  right: max(-185px, calc((100% - var(--max, 1180px)) / 2 - 235px));
  top: auto;
  bottom: 9%;
  transform: translateY(calc(var(--rp-plane-rise) * -1)) rotateX(10deg) rotateY(calc(-30deg + var(--rp-plane-turn))) rotateZ(10deg);
}
.rp-whole-site .rp-section-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -90px;
  height: 200px;
  background: radial-gradient(ellipse at var(--rp-material-light) 50%, rgba(157, 176, 187, .065), transparent 65%);
  transform: perspective(600px) rotateX(63deg);
}
.rp-whole-site [data-rp-material="frames"] .rp-section-plane { background: transparent; box-shadow: inset 0 0 0 5px rgba(215, 225, 227, .04), 7px 7px 0 rgba(12, 21, 29, .5); border-color: rgba(223, 227, 222, .21); }
.rp-whole-site [data-rp-material="sheets"] .rp-section-plane { height: 330px; width: 215px; border-radius: 4px; }
.rp-whole-site [data-rp-material="quotes"] .rp-section-plane { border-radius: 28px; }
.rp-whole-site [data-rp-material="assurance"] .rp-section-plane { border-color: var(--rp-accent-line); opacity: .5; }
.rp-whole-site [data-rp-material="message"] .rp-section-plane { height: 250px; width: 330px; }
.rp-whole-site [data-rp-material="signature"] .rp-section-plane { top: -90px; height: 330px; opacity: .35; }
.rp-whole-site .section-head h2,
.rp-whole-site .testimonial-page-head h2 { position: relative; padding-bottom: 13px; }
.rp-whole-site .section-head h2::after,
.rp-whole-site .testimonial-page-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(221, 229, 227, .65));
  transform-origin: left;
  transform: scaleX(calc(.32 + var(--rp-section-progress, 1) * .68));
}

/* Small physical installations give each page a distinct subject. */
.rp-whole-site .page-hero .rp-title-with-object {
  min-height: 190px;
  padding-right: 315px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rp-whole-site .page-hero .rp-title-with-object > p { margin-bottom: 0; }
.rp-whole-site .page-hero h1 { overflow-wrap: anywhere; }
.rp-whole-site .service-detail-title > div:last-child { min-width: 0; }
.rp-whole-site .rp-object-scene {
  --rp-object-yaw: -15deg;
  --rp-object-pitch: 8deg;
  --rp-object-rise: 0px;
  --rp-object-separation: 24px;
  width: 270px;
  height: 190px;
  perspective: 950px;
  pointer-events: none;
  user-select: none;
}
.rp-whole-site .rp-page-object { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.rp-whole-site .rp-head-with-object { position: relative; padding-right: 190px; min-height: 120px; }
.rp-whole-site .rp-section-object { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 155px; height: 110px; }
.rp-whole-site .rp-object-assembly {
  position: absolute;
  width: 59%;
  height: 63%;
  top: 7%;
  left: 20%;
  transform-style: preserve-3d;
  transform: translateY(var(--rp-object-rise)) rotateX(var(--rp-object-pitch)) rotateY(var(--rp-object-yaw));
  animation: rp-object-float 10s ease-in-out infinite;
}
.rp-whole-site .rp-object-plane {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(217, 230, 232, .66);
  border-radius: 7px;
  background: linear-gradient(125deg, #394349, #121b22 47%, #26323a);
  box-shadow: 1px 1px 0 #b3b9b6, 3px 3px 0 #434e53, 5px 5px 0 #17222a, 8px 15px 24px rgba(0, 0, 0, .36);
  transform-style: preserve-3d;
}
.rp-whole-site .rp-object-plane-1 { transform: translate3d(-30px, -9px, -30px) rotateZ(-9deg); opacity: .62; }
.rp-whole-site .rp-object-plane-2 { transform: translate3d(0, 0, 0) rotateZ(1deg); opacity: .85; }
.rp-whole-site .rp-object-plane-3 { transform: translate3d(28px, 12px, var(--rp-object-separation)) rotateZ(8deg); }
.rp-whole-site .rp-object-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(226, 241, 241, .11), transparent 42% 68%, rgba(232, 216, 174, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
  transform: translateZ(2px);
  z-index: 2;
}
.rp-whole-site .rp-object-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #e5e3d8;
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -.06em;
  text-shadow: 1px 1px 0 #a09a80, 2px 2px 0 #746f5a, 3px 3px 0 #47483d, 5px 8px 8px rgba(0, 0, 0, .5);
  transform: translateZ(8px);
}
.rp-whole-site .rp-object-shadow { position: absolute; left: 0; right: 0; bottom: -10%; height: 28%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .7), transparent 70%); }
.rp-whole-site .rp-object-base {
  position: absolute;
  left: 3%;
  right: 3%;
  height: 24%;
  bottom: 0;
  border: 1px solid rgba(215, 224, 221, .48);
  border-radius: 50%;
  background: radial-gradient(ellipse at var(--rp-material-light) 20%, rgba(210, 189, 138, .16), transparent 64%), linear-gradient(135deg, #303c44, #111b22 65%, #29343c);
  box-shadow: 0 2px 0 #69746f, 0 5px 0 #252e32, 0 9px 0 #151f27, 0 12px 0 #0a1219, 0 19px 22px rgba(0, 0, 0, .4);
}
.rp-whole-site .rp-object-materials .rp-object-plane { inset: -8px 24px -3px; }
.rp-whole-site .rp-object-materials .rp-object-plane-1 { background: linear-gradient(125deg, #7d888b, #28333c 30%, #67767c 67%, #1b252c); }
.rp-whole-site .rp-object-materials .rp-object-plane-2 { background: linear-gradient(125deg, rgba(189, 218, 225, .23), rgba(13, 27, 36, .7)); }
.rp-whole-site .rp-object-materials .rp-object-plane-3 { border-color: rgba(239, 209, 139, .68); background: linear-gradient(125deg, #554c32, #252a27 45%, #151e25); }
.rp-whole-site .rp-object-frames .rp-object-plane { background: #101923; padding: 5px; }
.rp-whole-site .rp-object-photo { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: cover; border-radius: 3px; }
.rp-whole-site .rp-object-sheets .rp-object-plane { inset: -8px 17px 0; border-radius: 4px; background: linear-gradient(135deg, #38434a, #121c24); }
.rp-whole-site .rp-object-lines {
  position: absolute;
  inset: 22% 18%;
  background: linear-gradient(rgba(224, 229, 221, .65), rgba(224, 229, 221, .65)) 0 0 / 63% 3px no-repeat,
    linear-gradient(var(--rp-accent-line), var(--rp-accent-line)) 0 16px / 100% 20px no-repeat,
    repeating-linear-gradient(transparent 0 9px, rgba(204, 218, 224, .24) 9px 10px) 0 45px / 85% calc(100% - 45px) no-repeat;
  transform: translateZ(3px);
}
.rp-whole-site .rp-object-quotes .rp-object-plane { border-radius: 15px; }
.rp-whole-site .rp-object-quotes .rp-object-mark { font-family: Georgia, serif; font-size: 108px; line-height: 1.3; letter-spacing: 0; color: #d4cbb4; }
.rp-whole-site .rp-object-message .rp-object-plane { inset: 8px -5px 5px; border-radius: 12px; }
.rp-whole-site .rp-object-message .rp-object-plane::after { content: ""; position: absolute; width: 22px; height: 18px; bottom: -10px; left: 20px; background: #17222a; clip-path: polygon(0 0, 100% 0, 0 100%); border-left: 1px solid rgba(217, 230, 232, .5); }
.rp-whole-site .rp-object-message .rp-object-lines { background: repeating-linear-gradient(transparent 0 13px, rgba(222, 232, 232, .36) 13px 15px); inset: 18% 18% 27%; }
.rp-whole-site .rp-section-object .rp-object-mark { font-size: 27px; }

/* Cards read as material samples, project frames and editorial sheets. */
.rp-whole-site .rp-service-surface,
.rp-whole-site .rp-proof-surface,
.rp-whole-site .rp-editorial-surface,
.rp-whole-site .rp-gallery-surface,
.rp-whole-site .rp-cover-surface {
  --rp-rx: 0deg;
  --rp-ry: 0deg;
  --rp-lift: 0px;
  transform: perspective(1100px) translateY(calc(var(--rp-lift) + var(--rp-surface-y))) rotateX(calc(var(--rp-rx) + var(--rp-surface-rx))) rotateY(calc(var(--rp-ry) + var(--rp-surface-ry)));
  transition: transform .2s ease-out, border-color .3s ease, box-shadow .3s ease;
}
.rp-whole-site .rp-service-surface,
.rp-whole-site .rp-proof-surface {
  background: radial-gradient(ellipse at var(--rp-material-light) 0, rgba(215, 228, 229, .055), transparent 65%), var(--rp-surface, #111722);
  border-color: rgba(218, 228, 234, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 1px 2px 0 #29313a, 3px 5px 0 #0e151d, 0 20px 34px rgba(0, 0, 0, .23);
}
.rp-whole-site .rp-service-surface::before,
.rp-whole-site .rp-proof-surface::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-top: 1px solid rgba(220, 232, 233, .07);
  border-right: 1px solid rgba(220, 232, 233, .035);
  border-radius: 7px;
  pointer-events: none;
  transform: translateZ(1px);
}
.rp-whole-site .icon-box { position: relative; background: linear-gradient(125deg, rgba(207, 179, 106, .12), rgba(117, 139, 150, .06)); border-color: rgba(221, 213, 184, .3); box-shadow: 1px 2px 0 #363b37, 3px 4px 0 #111a23; }
.rp-whole-site .icon-box::before { content: ""; position: absolute; inset: -3px; border: 1px solid rgba(195, 216, 224, .1); border-radius: inherit; transform: translateZ(-5px) rotate(7deg); pointer-events: none; }
.rp-whole-site .icon-box.rp-drawn-icon { font-size: 0; }
.rp-whole-site .rp-drawn-icon > svg { display: block; width: 25px; height: 25px; overflow: visible; }
.rp-whole-site .rp-service-surface .service-more { border-top: 1px solid rgba(220, 229, 233, .1); margin-top: auto; padding-top: 15px; }
.rp-whole-site .rp-proof-surface { border-bottom-color: var(--rp-accent-line); }
.rp-whole-site .rp-gallery-surface {
  border: 5px solid #1e2934;
  outline: 1px solid rgba(225, 232, 229, .28);
  outline-offset: -1px;
  box-shadow: 1px 2px 0 #5e696d, 3px 5px 0 #101b25, 0 16px 28px rgba(0, 0, 0, .32);
}
.rp-whole-site .rp-gallery-surface > img {
  transform: translateY(var(--rp-photo-y)) scale(1.055);
  transition: transform .35s ease-out;
}
.rp-whole-site .rp-gallery-surface:hover > img { transform: translateY(var(--rp-photo-y)) scale(1.075); }
.rp-whole-site .rp-gallery-surface::after { opacity: .34; background: linear-gradient(115deg, rgba(228, 242, 242, .06), transparent 39% 82%, rgba(244, 214, 144, .055)); border-color: rgba(241, 237, 221, .12); }
.rp-whole-site .rp-gallery-surface.service-gallery-item figcaption { transform: none; backdrop-filter: none; background: rgba(8, 13, 19, .94); }
.rp-whole-site .rp-editorial-surface { position: relative; border-color: rgba(218, 229, 234, .24); box-shadow: 1px 2px 0 #45505a, 3px 5px 0 #1a242e, 0 20px 34px rgba(0, 0, 0, .26); }
.rp-whole-site .rp-editorial-surface::after { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 218, 195, .55), transparent); pointer-events: none; }
.rp-whole-site .rp-editorial-surface .article-thumb { transition: filter .3s; }
.rp-whole-site .rp-editorial-surface:hover .article-thumb { filter: brightness(1.06); }
.rp-whole-site .rp-cover-surface { border: 4px solid #26323d; box-shadow: 1px 2px 0 #657174, 4px 6px 0 #101923, 0 20px 36px rgba(0, 0, 0, .3); }
.rp-whole-site .rp-reading-surface { position: relative; padding-left: 23px; border-left: 1px solid rgba(226, 234, 237, .11); }
.rp-whole-site .rp-reading-surface::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--accent); transform-origin: top; transform: scaleY(var(--rp-reading-progress, 0)); pointer-events: none; opacity: .7; }
.rp-whole-site .service-side-card { background: linear-gradient(135deg, rgba(190, 207, 212, .06), transparent 70%), var(--rp-surface); border-color: rgba(213, 225, 230, .24); box-shadow: 2px 3px 0 #303a43, 4px 6px 0 #121b24, 0 16px 25px rgba(0, 0, 0, .2); }

/* Review and contact panels share depth without moving their content. */
.rp-whole-site .rp-review-surface,
.rp-whole-site .rp-contact-surface,
.rp-whole-site .rp-form-surface {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at var(--rp-material-light) 0, rgba(190, 217, 226, .065), transparent 60%), var(--rp-surface, #111722);
  border-color: rgba(215, 228, 234, .24);
  box-shadow: inset 0 1px 0 rgba(234, 244, 244, .1), 2px 3px 0 #25303a, 4px 6px 0 #0e1721, 0 18px 30px rgba(0, 0, 0, .22);
}
.rp-whole-site .rp-review-surface::before { content: "“"; position: absolute; right: 12px; top: 25px; font-family: Georgia, serif; font-size: 112px; line-height: 1; color: rgba(227, 219, 195, .055); z-index: -1; pointer-events: none; }
.rp-whole-site .rp-review-surface .testimonial-author { padding-top: 14px; border-top: 1px solid var(--rp-border); }
.rp-whole-site .rp-form-surface::before,
.rp-whole-site .rp-contact-surface::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 221, 175, .65), rgba(197, 225, 234, .4), transparent); pointer-events: none; }
.rp-whole-site .rp-form-surface:focus-within { border-color: var(--rp-accent-line); }
.rp-whole-site .rp-form-surface .input { background: var(--rp-bg, #080b10); }
.rp-whole-site .rp-form-surface,
.rp-whole-site .rp-review-surface,
.rp-whole-site .rp-contact-surface { transform: none; }
.rp-whole-site .rp-contact-surface h3 { padding-top: 14px; }
.rp-whole-site .rp-contact-surface h3:first-child { padding-top: 0; }
.rp-whole-site .floating-social { background: linear-gradient(125deg, rgba(197, 216, 222, .05), transparent 65%), var(--rp-surface); box-shadow: 1px 2px 0 #29343d, 0 7px 20px rgba(0, 0, 0, .24); }
.rp-whole-site .testimonial-toast { border-color: rgba(222, 215, 188, .3); box-shadow: 1px 2px 0 #343c40, 0 18px 34px rgba(0, 0, 0, .4); }

/* The closing panel and footer carry the same glass forms to the end. */
.rp-whole-site .rp-closing-scene { position: relative; isolation: isolate; overflow: hidden; border-color: rgba(218, 220, 199, .32); box-shadow: 1px 3px 0 #3d4036, 3px 6px 0 #111a22, 0 20px 35px rgba(0, 0, 0, .22); }
.rp-whole-site .rp-closing-scene > :not(.rp-closing-depth) { position: relative; z-index: 1; }
.rp-whole-site .rp-closing-depth { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 900px; opacity: .36; }
.rp-whole-site .rp-closing-sheet { position: absolute; width: 180px; height: 260px; right: 5%; top: -25%; border: 1px solid rgba(228, 228, 210, .3); border-radius: 9px; background: linear-gradient(115deg, rgba(210, 230, 234, .12), transparent 50%); transform: translateY(var(--rp-plane-rise)) rotateX(16deg) rotateY(calc(-25deg + var(--rp-plane-turn))) rotateZ(24deg); box-shadow: 9px 4px 0 rgba(10, 20, 28, .75); }
.rp-whole-site .rp-closing-sheet + .rp-closing-sheet { right: 20%; top: 4%; transform: translateY(calc(var(--rp-plane-rise) * -1)) rotateY(28deg) rotateZ(24deg); opacity: .6; }
.rp-whole-site .footer h3 { letter-spacing: -.02em; }
@keyframes rp-object-float { 0%,100% { translate: 0 -2px; } 50% { translate: 0 5px; } }
.rp-whole-site .rp-object-scene.rp-whole-sleep .rp-object-assembly,
.rp-whole-site.rp-motion-off .rp-object-assembly,
.rp-whole-site.rp-suspended .rp-object-assembly { animation-play-state: paused; }
.rp-whole-site .rp-service-surface:focus-within,
.rp-whole-site .rp-proof-surface:focus-within,
.rp-whole-site .rp-editorial-surface:focus-within { transform: none; }
@media (max-width: 900px) {
  .rp-whole-site .page-hero .rp-title-with-object { padding-right: 265px; }
  .rp-whole-site .rp-page-object { right: 0; width: 225px; height: 165px; }
}
@media (max-width: 680px) {
  .rp-whole-site .page-hero .rp-title-with-object { min-height: 0; padding-right: 0; }
  .rp-whole-site .rp-head-with-object { min-height: 0; padding-right: 0; }
  .rp-whole-site .rp-section-object { display: none; }
  .rp-whole-site .rp-page-object { position: relative; top: auto; right: auto; transform: none; width: 215px; height: 150px; margin: 25px auto 4px; }
  .rp-whole-site .rp-object-assembly { animation-duration: 12s; }
  .rp-whole-site .rp-object-mark { font-size: 36px; }
  .rp-whole-site .rp-object-quotes .rp-object-mark { font-size: 88px; }
  .rp-whole-site .rp-section-plane { width: 160px; height: 240px; opacity: .24; }
  .rp-whole-site .rp-section-plane-back { left: -128px; }
  .rp-whole-site .rp-section-plane-front { right: -128px; }
  .rp-whole-site .rp-service-surface,
  .rp-whole-site .rp-proof-surface,
  .rp-whole-site .rp-editorial-surface,
  .rp-whole-site .rp-gallery-surface,
  .rp-whole-site .rp-cover-surface { transform: none; }
  .rp-whole-site .rp-gallery-surface { border-width: 3px; }
  .rp-whole-site .rp-reading-surface { padding-left: 15px; }
  .rp-whole-site .rp-closing-sheet { right: -30%; opacity: .6; }
  .rp-whole-site .rp-closing-sheet + .rp-closing-sheet { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-whole-site .rp-object-assembly { animation: none; translate: none; }
  .rp-whole-site .rp-service-surface,
  .rp-whole-site .rp-proof-surface,
  .rp-whole-site .rp-editorial-surface,
  .rp-whole-site .rp-gallery-surface,
  .rp-whole-site .rp-cover-surface { transform: none; transition: none; }
  .rp-whole-site .rp-gallery-surface > img,
  .rp-whole-site .rp-gallery-surface:hover > img { transform: none; transition: none; }
  .rp-whole-site .article-thumb { transition: none; }
}
.rp-whole-site.rp-motion-off .rp-service-surface,
.rp-whole-site.rp-motion-off .rp-proof-surface,
.rp-whole-site.rp-motion-off .rp-editorial-surface,
.rp-whole-site.rp-motion-off .rp-gallery-surface,
.rp-whole-site.rp-motion-off .rp-cover-surface { transform: none; transition: none; }
.rp-whole-site.rp-motion-off .rp-gallery-surface > img,
.rp-whole-site.rp-motion-off .rp-gallery-surface:hover > img { transform: none; transition: none; }
@media print {
  .rp-whole-site .rp-section-depth,
  .rp-whole-site .rp-object-scene,
  .rp-whole-site .rp-closing-depth { display: none; }
  .rp-whole-site .page-hero .rp-title-with-object { padding-right: 0; min-height: 0; }
  .rp-whole-site .rp-service-surface,
  .rp-whole-site .rp-proof-surface,
  .rp-whole-site .rp-editorial-surface,
  .rp-whole-site .rp-gallery-surface,
  .rp-whole-site .rp-cover-surface { transform: none; }
}