/* =============================================
   REMIXER LAYOUTS — Shared Design System
   ============================================= */

/* === CSS Variables (set by JS) === */
:root {
  --fh: 'Playfair Display', Georgia, serif;
  --fs: 'DM Sans', 'Segoe UI', sans-serif;
  --ft: 'Inter', 'Segoe UI', sans-serif;
  --c-font: #2d2926;
  --c-bg: #faf7f4;
  --c-hi: #a0856b;
  --c-deco: #c4b5a3;
}

/* === Crosshatch Pattern === */
.crosshatch {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(22.5deg, transparent, transparent 2px, color-mix(in srgb, var(--c-font) 5%, transparent) 2px, color-mix(in srgb, var(--c-font) 5%, transparent) 3px, transparent 3px, transparent 8px),
    repeating-linear-gradient(67.5deg, transparent, transparent 2px, color-mix(in srgb, var(--c-font) 4%, transparent) 2px, color-mix(in srgb, var(--c-font) 4%, transparent) 3px, transparent 3px, transparent 8px),
    repeating-linear-gradient(112.5deg, transparent, transparent 2px, color-mix(in srgb, var(--c-font) 3%, transparent) 2px, color-mix(in srgb, var(--c-font) 3%, transparent) 3px, transparent 3px, transparent 8px),
    repeating-linear-gradient(157.5deg, transparent, transparent 2px, color-mix(in srgb, var(--c-font) 2%, transparent) 2px, color-mix(in srgb, var(--c-font) 2%, transparent) 3px, transparent 3px, transparent 8px);
}

/* === Site Container === */
.rx-site, .rx-site-embed {
  background: var(--c-bg);
  color: var(--c-font);
  font-family: var(--ft);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.rx-site-embed {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* === Shared Base === */
.rx-site img, .rx-site-embed img { max-width: 100%; height: auto; display: block; }
.rx-site a, .rx-site-embed a { text-decoration: none; color: var(--c-hi); }

.rx-wrap {
  max-width: 72rem; margin: 0 auto;
  padding-left: clamp(1.5rem, 5vw, 3rem);
  padding-right: clamp(1.5rem, 5vw, 3rem);
}

h1 { font-family: var(--fh); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-family: var(--fs); font-weight: 400; font-size: clamp(1.5rem, 3.5vw, 2.4rem); line-height: 1.2; margin-bottom: 1rem; }
h3 { font-family: var(--fs); font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.3; margin-bottom: 0.5rem; }
h1 em { font-style: italic; color: var(--c-hi); }
p { margin-top: 0.75rem; max-width: 60ch; }

/* === Eyebrow === */
.rx-ey {
  font-family: var(--ft); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-hi); margin-bottom: 1.25rem;
}
.rx-ey-line {
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--c-font) 10%, transparent);
  display: inline-block;
}

/* === Header === */
.rx-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1.5rem, 5vw, 3rem);
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--c-font) 6%, transparent);
  position: relative; z-index: 10;
}
.rx-brand { font-family: var(--fh); font-size: 1.05rem; color: var(--c-font); }
.rx-nav { display: flex; align-items: center; justify-content: flex-end; }
.rx-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
.rx-nav li { position: relative; }
.rx-nav a {
  display: block;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  font-family: var(--ft);
  font-size: 0.78rem;
  color: var(--c-deco);
  transition: color 200ms, background 200ms;
  white-space: nowrap;
}
.rx-nav a:hover,
.rx-nav a[aria-current="page"] {
  color: var(--c-font);
  background: color-mix(in srgb, var(--c-hi) 12%, transparent);
}
.rx-nav .sub-nav {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 70;
  display: none;
  min-width: 13rem;
  padding: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--c-font) 10%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-bg) 94%, #fff);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--c-font) 12%, transparent);
}
.rx-nav .has-sub:hover > .sub-nav,
.rx-nav .has-sub:focus-within > .sub-nav,
.rx-nav .sub-nav.is-open {
  display: block;
}
.rx-nav .sub-nav li + li { margin-top: 0.15rem; }
.rx-nav .sub-nav a {
  border-radius: 6px;
  padding: 0.48rem 0.65rem;
}

/* === Nav Style Variants === */

/* Underline */
.rx-nav--underline a {
  border-radius: 0;
  padding: 0.5rem 0.6rem;
  background: none !important;
  border-bottom: 2px solid transparent;
}
.rx-nav--underline a:hover,
.rx-nav--underline a[aria-current="page"] {
  background: none !important;
  border-bottom-color: var(--c-hi);
  color: var(--c-font);
}

/* Fade */
.rx-nav--fade a {
  border-radius: 4px;
  opacity: 0.55;
  background: none;
}
.rx-nav--fade a:hover,
.rx-nav--fade a[aria-current="page"] {
  opacity: 1;
  background: none !important;
  color: var(--c-font);
}

/* Bordered */
.rx-nav--bordered a {
  border-radius: 6px;
  border: 1px solid transparent;
  background: none !important;
}
.rx-nav--bordered a:hover,
.rx-nav--bordered a[aria-current="page"] {
  border-color: var(--c-hi);
  background: none !important;
  color: var(--c-font);
}

/* Minimal */
.rx-nav--minimal a {
  border-radius: 0;
  padding: 0.5rem 0.5rem;
  background: none !important;
}
.rx-nav--minimal a:hover,
.rx-nav--minimal a[aria-current="page"] {
  background: none !important;
  color: var(--c-hi);
}

/* === Buttons === */
.rx-btn {
  display: inline-block; margin-top: 1.75rem;
  padding: 0.65rem 1.8rem; font-family: var(--ft); font-size: 0.82rem;
  letter-spacing: 0.04em; color: var(--c-font);
  background: transparent; border: 1px solid var(--c-hi);
  border-radius: 999px; cursor: pointer; transition: all 220ms;
}
.rx-btn:hover { background: var(--c-hi); color: var(--c-bg); }
.rx-btn--light { color: #fff; border-color: rgba(255,255,255,0.4); }
.rx-btn--light:hover { background: #fff; color: var(--c-font); border-color: #fff; }
.rx-btn--glow { color: var(--c-hi); border-color: color-mix(in srgb, var(--c-hi) 35%, transparent); border-radius: 999px; }
.rx-btn--glow:hover { background: var(--c-hi); color: var(--c-bg); box-shadow: 0 0 30px color-mix(in srgb, var(--c-hi) 20%, transparent); }
.rx-btn--edge { border-radius: 0; border-width: 2px; }
.rx-btn--edge::after { content: ' \2197'; }

/* === Cards === */
.rx-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.rx-card {
  padding: 2rem 1.75rem;
  background: color-mix(in srgb, var(--c-bg) 80%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-font) 6%, transparent);
  border-radius: 6px;
  transition: transform 300ms, box-shadow 300ms;
}
.rx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--c-font) 6%, transparent);
}
.rx-card h3 { color: var(--c-font); }
.rx-card p { color: var(--c-deco); font-size: 0.9rem; }

/* === Section === */
.rx-section {
  padding: clamp(4rem, 10vh, 7rem) 0;
  position: relative; z-index: 1;
}

/* === Statement / Quote === */
.rx-statement {
  padding: clamp(5rem, 14vh, 10rem) 0;
  text-align: center; position: relative; z-index: 1;
}
.rx-quote {
  font-family: var(--fh); font-style: italic;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem); line-height: 1.45;
  max-width: 24ch; margin: 0 auto;
}
.rx-quote em { font-style: normal; color: var(--c-hi); }

/* === Divider === */
.rx-divider {
  width: 60px; height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--c-hi), transparent);
}

/* === Tag === */
.rx-tag {
  display: inline-block; font-family: var(--ft);
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--c-hi);
  background: color-mix(in srgb, var(--c-hi) 10%, transparent);
  padding: 0.2rem 0.6rem; border-radius: 4px;
}

/* === About === */
.rx-about {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(4rem, 10vh, 7rem) 0;
  position: relative; z-index: 1;
}
.rx-about-img { border-radius: 6px; overflow: hidden; }
.rx-about-img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.rx-about-text p { color: var(--c-deco); line-height: 1.85; }
.rx-about-text h2 { font-family: var(--fh); margin-bottom: 1rem; }

/* === CTA === */
.rx-cta {
  padding: clamp(4rem, 10vh, 7rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center; background: var(--c-font); color: var(--c-bg);
  position: relative; z-index: 1;
}
.rx-cta p { font-family: var(--fs); font-size: clamp(1.1rem, 2.5vw, 1.6rem); max-width: 32ch; margin: 0 auto 1.5rem; line-height: 1.5; opacity: 0.85; }
.rx-cta .rx-btn { color: var(--c-bg); border-color: color-mix(in srgb, var(--c-bg) 30%, transparent); }
.rx-cta .rx-btn:hover { background: var(--c-bg); color: var(--c-font); }

/* === Footer === */
.rx-footer {
  padding: 2.5rem clamp(1.5rem, 5vw, 3rem);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  font-size: 0.75rem; color: var(--c-deco);
  border-top: 1px solid color-mix(in srgb, var(--c-font) 8%, transparent);
  position: relative; z-index: 1;
}

/* =============================================
   LAYOUT: SPLIT
   ============================================= */
.rx-split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 80vh; position: relative; z-index: 1;
}
.rx-split-img { overflow: hidden; }
.rx-split-img img { width: 100%; height: 100%; object-fit: cover; }
.rx-split-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 5vw, 5rem);
}
.rx-split-text p { color: var(--c-deco); line-height: 1.85; max-width: 40ch; }

/* =============================================
   LAYOUT: FULLBLEED
   ============================================= */
.rx-fullbleed {
  position: relative; min-height: 85vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.rx-fullbleed > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.rx-fullbleed-ov {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-font) 55%, transparent) 0%, color-mix(in srgb, var(--c-font) 20%, transparent) 50%, color-mix(in srgb, var(--c-font) 40%, transparent) 100%);
}
.rx-ov-bottom {
  background: linear-gradient(to top, var(--c-bg) 0%, color-mix(in srgb, var(--c-bg) 60%, transparent) 40%, color-mix(in srgb, var(--c-bg) 15%, transparent) 100%) !important;
}
.rx-fullbleed-c {
  position: relative; z-index: 2; text-align: center; color: #fff;
  padding: 2rem; max-width: 48rem;
}
.rx-fullbleed-c .rx-ey { color: rgba(255,255,255,0.55); }
.rx-fullbleed-c h1 { color: #fff; max-width: 16ch; margin: 0 auto; }
.rx-fullbleed-c p { color: rgba(255,255,255,0.7); max-width: 42ch; margin-left: auto; margin-right: auto; }

.rx-fullbleed-bottom {
  text-align: left; position: absolute; bottom: 0; left: 0; right: 0;
  padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 5vw, 3rem);
  max-width: 72rem;
}
.rx-fullbleed-bottom h1 { color: var(--c-font); margin: 0; }
.rx-fullbleed-bottom p { color: var(--c-deco); }
.rx-fullbleed-bottom .rx-ey { color: var(--c-hi); }

/* =============================================
   LAYOUT: BENTO
   ============================================= */
.rx-bento {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  padding-top: 1.5rem; padding-bottom: 1.5rem;
  position: relative; z-index: 1;
}
.rx-bento-hero {
  grid-column: 1/3; grid-row: 1/3;
  position: relative; border-radius: 12px; overflow: hidden; min-height: 45vh;
}
.rx-bento-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rx-bento-hero-text {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: clamp(1.5rem, 3vw, 2.5rem); color: #fff;
}
.rx-bento-hero-text h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); max-width: 18ch; }
.rx-bento-hero-text p { font-size: 0.85rem; color: rgba(255,255,255,0.65); }

.rx-bento-card {
  background: color-mix(in srgb, var(--c-bg) 70%, #fff);
  border-radius: 12px; padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--c-font) 4%, transparent);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 300ms, box-shadow 300ms;
}
.rx-bento-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px color-mix(in srgb, var(--c-font) 5%, transparent); }
.rx-bento-card h3 { font-size: 1.1rem; }
.rx-bento-card p { color: var(--c-deco); font-size: 0.82rem; }

.rx-bento-dark {
  grid-column: 1/3;
  background: var(--c-font); color: var(--c-bg); border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.rx-bento-dark .rx-quote { font-size: clamp(1rem, 2vw, 1.4rem); text-align: left; margin: 0; }

.rx-bento-portrait {
  grid-column: 3/5; grid-row: 2/4;
  border-radius: 12px; overflow: hidden;
}
.rx-bento-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.rx-bento-wide {
  grid-column: 1/5;
  background: color-mix(in srgb, var(--c-bg) 70%, #fff);
  border-radius: 12px; padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--c-font) 4%, transparent);
  text-align: center;
}
.rx-bento-wide p { max-width: 40ch; margin: 0.5rem auto 0; color: var(--c-deco); }

/* =============================================
   LAYOUT: MONUMENT
   ============================================= */
.rx-monument-hero {
  padding: clamp(6rem, 18vh, 12rem) 0 clamp(3rem, 8vh, 5rem);
  position: relative; z-index: 1;
}
.rx-monument-hero h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: 0.95; letter-spacing: -0.03em; max-width: 14ch; }
.rx-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2.5rem; max-width: 56rem; }
.rx-two-col p { color: var(--c-deco); font-size: 0.95rem; }

.rx-img-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; position: relative; z-index: 1; }
.rx-img-strip > div { overflow: hidden; height: 42vh; }
.rx-img-strip img { width: 100%; height: 100%; object-fit: cover; }

.rx-num-head {
  display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: end;
  margin-bottom: 2.5rem; padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--c-font);
}
.rx-num { font-family: var(--fh); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; color: var(--c-deco); font-weight: 300; }

.rx-grid-border { border: 2px solid var(--c-font); }
.rx-grid-border .rx-cards { gap: 0; margin-top: 0; }
.rx-grid-border .rx-card {
  border-radius: 0; border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--c-font) 10%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--c-font) 10%, transparent);
  background: transparent;
}

/* =============================================
   LAYOUT: EDITORIAL
   ============================================= */
.rx-editorial-hero {
  display: grid; grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: 2rem; padding-top: clamp(4rem, 12vh, 8rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
  position: relative; z-index: 1;
}
.rx-editorial-lead { grid-column: 1; }
.rx-editorial-lead h1 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 14ch; }
.rx-editorial-img {
  grid-column: 2; grid-row: 1/3;
  overflow: hidden; border-radius: 6px;
}
.rx-editorial-img img { width: 100%; height: 100%; object-fit: cover; }
.rx-editorial-text p { color: var(--c-deco); max-width: 40ch; line-height: 1.85; }

/* =============================================
   LAYOUT: MINIMAL
   ============================================= */
.rx-minimal-hero {
  padding: clamp(8rem, 25vh, 16rem) 0 clamp(4rem, 10vh, 7rem);
  position: relative; z-index: 1;
}
.rx-minimal-hero h1 { max-width: 16ch; font-size: clamp(2.6rem, 7vw, 5rem); }
.rx-min-line { width: 50px; height: 1px; background: var(--c-deco); margin: 2.5rem 0; }
.rx-min-lead { font-size: 1.1rem; color: var(--c-deco); max-width: 48ch; line-height: 1.85; }

/* =============================================
   LAYOUT: STACKED
   ============================================= */
.rx-stacked-hero {
  position: relative; min-height: 75vh;
  display: flex; align-items: center; overflow: hidden;
}
.rx-stacked-hero-bg { position: absolute; inset: 0; }
.rx-stacked-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.rx-stacked-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-font) 50%, transparent), color-mix(in srgb, var(--c-font) 70%, transparent));
}
.rx-stacked-hero-c { position: relative; z-index: 2; color: #fff; }
.rx-stacked-hero-c h1 { max-width: 16ch; color: #fff; }
.rx-stacked-hero-c .rx-ey { color: rgba(255,255,255,0.55); }
.rx-stacked-img { height: 40vh; overflow: hidden; position: relative; z-index: 1; }
.rx-stacked-img img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================
   LAYOUT: OVERLAP
   ============================================= */
.rx-overlap-hero {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 2rem; align-items: center;
  padding-top: clamp(4rem, 12vh, 8rem);
  padding-bottom: clamp(4rem, 12vh, 8rem);
  position: relative; z-index: 1;
}
.rx-overlap-text h1 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 14ch; }
.rx-overlap-img { position: relative; }
.rx-overlap-img img { border-radius: 6px; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.rx-overlap-badge {
  position: absolute; bottom: -2rem; left: -3rem;
  background: var(--c-font); color: var(--c-bg); padding: 1.5rem 2rem;
  border-radius: 6px; max-width: 22rem;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--c-font) 15%, transparent);
}
.rx-overlap-badge .rx-quote { font-size: 1rem; text-align: left; margin: 0; color: var(--c-bg); }
.rx-overlap-badge .rx-quote em { color: var(--c-hi); }

/* =============================================
   LAYOUT: CINEMATIC
   ============================================= */
.rx-cine-hero {
  position: relative; min-height: 70vh;
  display: flex; align-items: flex-end; overflow: hidden;
}
.rx-cine-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rx-cine-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--c-bg) 5%, color-mix(in srgb, var(--c-bg) 40%, transparent) 50%, transparent 100%);
}
.rx-cine-c {
  position: relative; z-index: 2;
  padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 5vw, 3rem);
  max-width: 72rem; margin: 0 auto; width: 100%;
}
.rx-cine-c h1 { max-width: 18ch; font-size: clamp(2rem, 5vw, 3.5rem); }
.rx-cine-c .rx-ey { color: var(--c-hi); }

.rx-cine-intro {
  padding: clamp(3rem, 8vh, 5rem) 0;
  position: relative; z-index: 1;
}

.rx-cine-strip {
  display: grid; grid-template-columns: 1fr 1fr;
  height: 45vh; position: relative; z-index: 1;
}
.rx-cine-strip > div { overflow: hidden; }
.rx-cine-strip img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .rx-nav { display: none; }
  .rx-split { grid-template-columns: 1fr; }
  .rx-split-img { height: 50vh; }
  .rx-about { grid-template-columns: 1fr; }
  .rx-about-img img { aspect-ratio: 4/3; }
  .rx-bento { grid-template-columns: 1fr; }
  .rx-bento-hero { grid-column: auto; grid-row: auto; min-height: 40vh; }
  .rx-bento-dark { grid-column: auto; }
  .rx-bento-portrait { grid-column: auto; grid-row: auto; height: 50vh; }
  .rx-bento-wide { grid-column: auto; }
  .rx-editorial-hero { grid-template-columns: 1fr; }
  .rx-editorial-img { grid-column: auto; grid-row: auto; max-height: 50vh; }
  .rx-overlap-hero { grid-template-columns: 1fr; }
  .rx-overlap-badge { position: relative; bottom: auto; left: auto; margin-top: 1rem; }
  .rx-two-col { grid-template-columns: 1fr; }
  .rx-img-strip { grid-template-columns: 1fr; }
  .rx-img-strip > div { height: 30vh; }
  .rx-cine-strip { grid-template-columns: 1fr; height: auto; }
  .rx-cine-strip > div { height: 35vh; }
  .rx-cards { grid-template-columns: 1fr; }
  .rx-monument-hero h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .rx-num-head { grid-template-columns: 1fr; gap: 0.5rem; }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .rx-bento { grid-template-columns: repeat(2, 1fr); }
  .rx-bento-hero { grid-column: 1/3; }
  .rx-bento-portrait { grid-column: auto; grid-row: auto; }
  .rx-bento-wide { grid-column: 1/3; }
  .rx-cards { grid-template-columns: repeat(2, 1fr); }
  .rx-img-strip > div { height: 30vh; }
}

/* =============================================
   BLOCK CONTROLS — Drag & Drop Overlay
   ============================================= */
.block-item {
  position: relative;
  transition: opacity 200ms;
}
.block-item.dragging { opacity: 0.4; }
.block-item.drag-over::before {
  content: '';
  position: absolute; top: -2px; left: 0; right: 0;
  height: 3px; background: var(--c-hi);
  z-index: 100;
}

.block-controls {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: rgba(0,0,0,0.7); color: #fff;
  font-size: 0.7rem; z-index: 50;
  opacity: 0; transition: opacity 200ms;
  backdrop-filter: blur(8px);
}
.block-item:hover .block-controls { opacity: 1; }

.block-handle { cursor: grab; font-size: 1rem; user-select: none; }
.block-label { flex: 1; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.6rem; }
.block-move-up, .block-move-down, .block-remove {
  background: none; border: 1px solid rgba(255,255,255,0.2);
  color: #fff; width: 24px; height: 24px;
  border-radius: 4px; cursor: pointer; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms;
}
.block-move-up:hover, .block-move-down:hover { background: rgba(255,255,255,0.15); }
.block-remove:hover { background: rgba(220,50,50,0.6); }

/* =============================================
   LAYOUT: HERO CINEMATIC
   ============================================= */
.rx-hero-cinematic {
  position: relative;
  aspect-ratio: 21/9;
  min-height: 60vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  z-index: 1;
}
.rx-hero-cinematic > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.rx-hero-cinematic-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--c-font) 80%, transparent) 0%,
    color-mix(in srgb, var(--c-font) 30%, transparent) 40%,
    transparent 70%);
}
.rx-hero-cinematic-c {
  position: relative; z-index: 2;
  padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 5vw, 3rem);
  max-width: 72rem; width: 100%;
  color: #fff;
}
.rx-hero-cinematic-c .rx-ey { color: rgba(255,255,255,0.55); }
.rx-hero-cinematic-c h1 { color: #fff; max-width: 18ch; font-size: clamp(2rem, 5vw, 4rem); }
.rx-hero-cinematic-c h1 em { color: var(--c-hi); }
.rx-hero-cinematic-c p { color: rgba(255,255,255,0.7); max-width: 42ch; }
.rx-hero-cinematic-c .rx-btn { color: #fff; border-color: rgba(255,255,255,0.35); }
.rx-hero-cinematic-c .rx-btn:hover { background: #fff; color: var(--c-font); border-color: #fff; }

/* =============================================
   LAYOUT: HERO STACKED
   ============================================= */
.rx-hero-stacked {
  position: relative; z-index: 1;
}
.rx-hero-stacked-img {
  width: 100%; max-height: 50vh;
  overflow: hidden;
}
.rx-hero-stacked-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.rx-hero-stacked-text {
  padding: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 5vw, 3rem);
  max-width: 72rem; margin: 0 auto;
}
.rx-hero-stacked-text h1 { max-width: 18ch; font-size: clamp(2rem, 5vw, 3.8rem); }
.rx-hero-stacked-text h1 em { color: var(--c-hi); }
.rx-hero-stacked-text p { color: var(--c-deco); max-width: 50ch; line-height: 1.85; }
.rx-hero-stacked-text .rx-ey { margin-bottom: 1rem; }

/* =============================================
   LAYOUT: CONTACT FORM
   ============================================= */
.rx-contact-form {
  max-width: 36rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.5rem, 5vw, 3rem);
  position: relative; z-index: 1;
}
.rx-contact-form h2 {
  font-family: var(--fh);
  margin-bottom: 0.5rem;
}
.rx-contact-form > p {
  color: var(--c-deco); margin-bottom: 2rem;
}
.rx-contact-form form {
  display: grid; gap: 0.75rem;
}
.rx-contact-form label {
  font-family: var(--ft); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-deco); display: block; margin-bottom: 0.25rem;
}
.rx-contact-form input[type="text"],
.rx-contact-form input[type="email"],
.rx-contact-form input[type="tel"],
.rx-contact-form textarea,
.rx-contact-form select {
  width: 100%; padding: 0.7rem 0.9rem;
  font-family: var(--ft); font-size: 0.9rem;
  color: var(--c-font); background: color-mix(in srgb, var(--c-bg) 80%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-font) 12%, transparent);
  border-radius: 6px; outline: none;
  transition: border-color 200ms, box-shadow 200ms;
}
.rx-contact-form input:focus,
.rx-contact-form textarea:focus,
.rx-contact-form select:focus {
  border-color: var(--c-hi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-hi) 15%, transparent);
}
.rx-contact-form textarea { min-height: 7rem; resize: vertical; }
.rx-contact-form select { cursor: pointer; }

.rx-contact-form .rx-checkbox-row {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.82rem; color: var(--c-deco);
}
.rx-contact-form .rx-checkbox-row input[type="checkbox"] {
  width: auto; margin-top: 0.2rem;
  accent-color: var(--c-hi);
}
.rx-contact-form .rx-btn {
  margin-top: 0.75rem; width: 100%;
  text-align: center;
}

/* =============================================
   LAYOUT: FAQ
   ============================================= */
.rx-faq {
  max-width: 48rem; margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.5rem, 5vw, 3rem);
  position: relative; z-index: 1;
}
.rx-faq h2 {
  font-family: var(--fh); margin-bottom: 2rem;
}
.rx-faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--c-font) 8%, transparent);
}
.rx-faq summary {
  font-family: var(--fs); font-size: 1rem; font-weight: 400;
  padding: 1rem 0; cursor: pointer;
  list-style: none; display: flex; align-items: center;
  justify-content: space-between;
  color: var(--c-font);
  transition: color 200ms;
}
.rx-faq summary::-webkit-details-marker { display: none; }
.rx-faq summary::after {
  content: '+'; font-family: var(--ft); font-size: 1.2rem;
  color: var(--c-deco); transition: transform 300ms;
}
.rx-faq details[open] summary::after {
  content: '\2212'; transform: rotate(180deg);
}
.rx-faq summary:hover { color: var(--c-hi); }
.rx-faq details .rx-faq-body {
  padding: 0 0 1.25rem;
  color: color-mix(in srgb, var(--c-font) 65%, transparent);
  font-size: 0.92rem; line-height: 1.8;
}

/* =============================================
   LAYOUT: TESTIMONIALS
   ============================================= */
.rx-testimonials {
  padding: clamp(4rem, 10vh, 7rem) 0;
  position: relative; z-index: 1;
}
.rx-testimonials h2 {
  font-family: var(--fh); margin-bottom: 2rem;
}
.rx-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
}
.rx-testimonial-card {
  padding: 1.75rem 1.5rem;
  border-left: 3px solid var(--c-hi);
  background: color-mix(in srgb, var(--c-bg) 80%, #fff);
  border-radius: 0 6px 6px 0;
}
.rx-testimonial-card blockquote {
  font-family: var(--fs); font-style: italic;
  font-size: 0.95rem; line-height: 1.75;
  color: var(--c-font); margin: 0 0 1rem;
}
.rx-testimonial-card cite {
  font-style: normal; font-variant: small-caps;
  font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--c-deco);
}

/* =============================================
   LAYOUT: FEATURE LIST
   ============================================= */
.rx-feature-list {
  padding: clamp(4rem, 10vh, 7rem) 0;
  position: relative; z-index: 1;
}
.rx-feature-list h2 {
  font-family: var(--fh); margin-bottom: 2.5rem;
}
.rx-feature-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 2rem;
}
.rx-feature-item {
  display: flex; flex-direction: column;
}
.rx-feature-icon {
  font-size: 2rem; color: var(--c-hi);
  margin-bottom: 0.75rem; line-height: 1;
}
.rx-feature-item h3 {
  font-family: var(--fs); font-size: 1.1rem;
  margin-bottom: 0.4rem;
}
.rx-feature-item p {
  color: var(--c-deco); font-size: 0.9rem; line-height: 1.7;
}

/* =============================================
   LAYOUT: PRICING CARDS
   ============================================= */
.rx-pricing-cards {
  padding: clamp(4rem, 10vh, 7rem) 0;
  position: relative; z-index: 1;
}
.rx-pricing-cards > h2 {
  font-family: var(--fh); text-align: center; margin-bottom: 2.5rem;
}
.rx-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
}
.rx-pricing-card {
  padding: 2rem 1.75rem;
  background: color-mix(in srgb, var(--c-bg) 80%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-font) 6%, transparent);
  border-radius: 8px; text-align: center;
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: transform 300ms, box-shadow 300ms;
}
.rx-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--c-font) 8%, transparent);
}
.rx-pricing-card .rx-tag { align-self: center; }
.rx-pricing-card h3 {
  font-family: var(--fh); font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  margin-bottom: 0;
}
.rx-pricing-card p {
  color: var(--c-deco); font-size: 0.88rem;
  max-width: none; margin: 0 auto;
}
.rx-pricing-price {
  font-family: var(--fh); font-size: clamp(2rem, 4vw, 3rem);
  color: var(--c-hi); font-weight: 400; line-height: 1.1;
}
.rx-pricing-price small {
  font-family: var(--ft); font-size: 0.5em;
  color: var(--c-deco); font-weight: 300;
}
.rx-pricing-card .rx-btn { margin-top: 0.5rem; }

/* =============================================
   LAYOUT: PROCESS STEPS
   ============================================= */
.rx-process-steps {
  padding: clamp(4rem, 10vh, 7rem) 0;
  position: relative; z-index: 1;
}
.rx-process-steps > h2 {
  font-family: var(--fh); margin-bottom: 3rem;
}
.rx-process-row {
  display: flex; gap: 2rem; position: relative;
}
.rx-process-row::before {
  content: '';
  position: absolute; top: 1.6rem; left: 2.5rem; right: 2.5rem;
  height: 1px;
  background: color-mix(in srgb, var(--c-deco) 40%, transparent);
  z-index: 0;
}
.rx-process-step {
  flex: 1; position: relative; z-index: 1;
  text-align: center;
}
.rx-process-num {
  font-family: var(--fh); font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--c-deco); font-weight: 300; line-height: 1;
  margin-bottom: 0.75rem;
  background: var(--c-bg);
  display: inline-block; padding: 0 0.5rem;
}
.rx-process-step h3 {
  font-family: var(--fs); font-size: 1rem;
  margin-bottom: 0.4rem;
}
.rx-process-step p {
  color: var(--c-deco); font-size: 0.85rem;
  max-width: 22ch; margin: 0.5rem auto 0; line-height: 1.65;
}

/* =============================================
   LAYOUT: STATS
   ============================================= */
.rx-stats {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: baseline;
  gap: 3rem;
  padding: clamp(4rem, 10vh, 7rem) clamp(1.5rem, 5vw, 3rem);
  position: relative; z-index: 1;
}
.rx-stat {
  text-align: center;
}
.rx-stat-num {
  font-family: var(--fh);
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--c-hi); font-weight: 400; line-height: 1.1;
}
.rx-stat-label {
  font-family: var(--ft); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-font) 50%, transparent);
  margin-top: 0.4rem;
}

/* =============================================
   LAYOUT: NEWSLETTER
   ============================================= */
.rx-newsletter {
  padding: clamp(4rem, 10vh, 7rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  position: relative; z-index: 1;
}
.rx-newsletter h2 {
  font-family: var(--fh); margin-bottom: 0.5rem;
}
.rx-newsletter > p {
  color: var(--c-deco); max-width: 36ch;
  margin: 0 auto 1.75rem; font-size: 0.95rem;
}
.rx-newsletter-form {
  display: flex; gap: 0.5rem;
  max-width: 32rem; margin: 0 auto;
}
.rx-newsletter-form input[type="email"] {
  flex: 1; padding: 0.7rem 1rem;
  font-family: var(--ft); font-size: 0.9rem;
  color: var(--c-font);
  background: color-mix(in srgb, var(--c-bg) 80%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-font) 12%, transparent);
  border-radius: 999px; outline: none;
  transition: border-color 200ms, box-shadow 200ms;
}
.rx-newsletter-form input[type="email"]:focus {
  border-color: var(--c-hi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-hi) 15%, transparent);
}
.rx-newsletter-form .rx-btn {
  margin-top: 0; white-space: nowrap;
}

/* =============================================
   LAYOUT: IMAGE GALLERY
   ============================================= */
.rx-image-gallery {
  padding: clamp(3rem, 8vh, 5rem) 0;
  position: relative; z-index: 1;
}
.rx-image-gallery h2 {
  font-family: var(--fh); margin-bottom: 1.5rem;
}
.rx-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.rx-gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 6px;
  aspect-ratio: 4/3;
  transition: transform 300ms;
}
.rx-gallery-grid img:hover { transform: scale(1.02); }

/* Varying spans for visual interest */
.rx-gallery-grid .rx-gal-wide { grid-column: span 2; aspect-ratio: 16/9; }
.rx-gallery-grid .rx-gal-tall { grid-row: span 2; aspect-ratio: 3/5; }
.rx-gallery-grid .rx-gal-featured { grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; }

/* =============================================
   LAYOUT: TEXT IMAGE ALTERNATING
   ============================================= */
.rx-text-image-alt {
  padding: clamp(4rem, 10vh, 7rem) 0;
  position: relative; z-index: 1;
}
.rx-text-image-alt h2 {
  font-family: var(--fh); margin-bottom: 2.5rem;
}
.rx-tia-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 5vh, 4rem);
}
.rx-tia-row:last-child { margin-bottom: 0; }
.rx-tia-text h3 { font-family: var(--fs); margin-bottom: 0.5rem; }
.rx-tia-text p { color: var(--c-deco); line-height: 1.8; font-size: 0.92rem; }
.rx-tia-img { overflow: hidden; border-radius: 6px; }
.rx-tia-img img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
}

/* Flip order on even rows */
.rx-tia-row:nth-child(even) .rx-tia-text { grid-column: 2; grid-row: 1; }
.rx-tia-row:nth-child(even) .rx-tia-img { grid-column: 1; grid-row: 1; }

/* =============================================
   RESPONSIVE — New Blocks
   ============================================= */
@media (max-width: 768px) {
  /* Hero Cinematic */
  .rx-hero-cinematic { aspect-ratio: auto; min-height: 50vh; }

  /* Hero Stacked */
  .rx-hero-stacked-img { max-height: 40vh; }

  /* Contact Form */
  .rx-contact-form { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* Process Steps */
  .rx-process-row { flex-direction: column; gap: 1.5rem; }
  .rx-process-row::before {
    top: 0; bottom: 0; left: 50%; right: auto;
    width: 1px; height: 100%;
  }
  .rx-process-step { text-align: center; }

  /* Stats */
  .rx-stats { gap: 2rem 1.5rem; }
  .rx-stat-num { font-size: clamp(1.6rem, 8vw, 2.5rem); }

  /* Newsletter */
  .rx-newsletter-form { flex-direction: column; }
  .rx-newsletter-form input[type="email"] { border-radius: 999px; }
  .rx-newsletter-form .rx-btn { width: 100%; text-align: center; }

  /* Image Gallery */
  .rx-gallery-grid { grid-template-columns: 1fr; }
  .rx-gallery-grid .rx-gal-wide,
  .rx-gallery-grid .rx-gal-tall,
  .rx-gallery-grid .rx-gal-featured { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; }

  /* Text Image Alternating */
  .rx-tia-row { grid-template-columns: 1fr; }
  .rx-tia-row:nth-child(even) .rx-tia-text { grid-column: auto; grid-row: auto; }
  .rx-tia-row:nth-child(even) .rx-tia-img { grid-column: auto; grid-row: auto; }

  /* Pricing */
  .rx-pricing-grid { grid-template-columns: 1fr; max-width: 22rem; margin: 0 auto; }

  /* Testimonials */
  .rx-testimonials-grid { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1199px) {
  /* Image Gallery */
  .rx-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .rx-gallery-grid .rx-gal-featured { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; }

  /* Pricing */
  .rx-pricing-grid { grid-template-columns: repeat(2, 1fr); }

  /* Testimonials */
  .rx-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}