/* Reference composition, scoped to the homepage of this private V4 trial. */
body.rrom-hero-reference .rrom-header-inner { max-width: 1360px; min-height: 86px; gap: 28px !important; }
body.rrom-hero-reference .rrom-brand-logo { line-height: 0; }
body.rrom-hero-reference .rrom-brand-logo img { width: 114px !important; height: 49px !important; }
body.rrom-hero-reference .rrom-brand-name { font-size: 19px !important; }
body.rrom-hero-reference .rrom-brand-sub { font-size: 10px !important; letter-spacing: .16em !important; }
body.rrom-hero-reference .rrom-header-actions { gap: 38px !important; }
body.rrom-hero-reference .rrom-nav { font-size: 14px !important; }
body.rrom-hero-reference .rrom-nav .wp-block-navigation__container { gap: 30px; }
body.rrom-hero-reference .rrom-header-contact a { min-height: 52px !important; padding: 14px 28px !important; font-size: 14px !important; color: #fff !important; background: #155f37 !important; border-color: #155f37 !important; }

.rrom-reference-scene { --rrom-green: #155f37; --rrom-deep: #07354d; position: relative; isolation: isolate; overflow: hidden; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #fcfbf6; }
.rrom-ref-paint { position: absolute; inset: auto 0 0; width: 100%; height: 500px; pointer-events: none; z-index: 0; background: url('../images/hero-green-brush.png') center bottom / 100% 100% no-repeat; filter: saturate(.72); }
body.rrom-hero-reference .rrom-hero-shell { position: relative; overflow: visible; padding: 40px 48px 32px !important; background: transparent !important; }
body.rrom-hero-reference .rrom-hero { z-index: 1; max-width: 1360px; grid-template-columns: minmax(0, 520px) minmax(0, 688px); justify-content: start; gap: 46px !important; }
body.rrom-hero-reference .rrom-hero-content { z-index: 2; min-width: 0; align-self: start; }
body.rrom-hero-reference .rrom-hero-topline { gap: 24px; margin-bottom: 22px !important; font-size: 12px !important; letter-spacing: .12em !important; }
body.rrom-hero-reference .rrom-hero-topline::before { width: 46px; flex-basis: 46px; height: 3px; border-radius: 3px; }
body.rrom-hero-reference .rrom-hero-title { font-size: 96px !important; font-weight: 700 !important; line-height: .99 !important; letter-spacing: -.06em !important; margin-bottom: 18px !important; color: #082e40 !important; }
body.rrom-hero-reference .rrom-hero-title em { font-size: 1.15em; line-height: .85; white-space: nowrap; letter-spacing: -.055em !important; }
body.rrom-hero-reference .rrom-hero-title mark { color: var(--rrom-green) !important; }
body.rrom-hero-reference .rrom-hero-intro { max-width: 520px; font-size: 17px !important; line-height: 1.45 !important; }
body.rrom-hero-reference .rrom-actions { gap: 25px !important; margin-top: 26px !important; }
body.rrom-hero-reference .rrom-actions .rrom-button a { min-height: 60px; padding: 17px 26px !important; font-size: 16px !important; }
@media (min-width: 1280px) {
  body.rrom-hero-reference .rrom-actions .rrom-button:not(.is-style-outline) a { min-width: 208px; justify-content: space-between; }
  body.rrom-hero-reference .rrom-actions .rrom-button.is-style-outline a { min-width: 252px; justify-content: space-between; }
}
body.rrom-hero-reference .rrom-actions .rrom-button:not(.is-style-outline) a { background: var(--rrom-deep) !important; border-color: var(--rrom-deep) !important; box-shadow: 0 5px 14px #082d5d0c; }
body.rrom-hero-reference .rrom-actions .rrom-button.is-style-outline a { border-color: #4e8960 !important; background: #fcfbf680 !important; }
.rrom-ref-saying { display: flex; align-items: start; gap: 24px; margin-top: 40px; color: var(--rrom-muted); }
.rrom-ref-saying > span { width: 46px; flex: 0 0 46px; height: 1px; margin-top: 8px; background: #7c867d; }
.rrom-ref-saying p { margin: 0; font-size: 10px; font-weight: 550; line-height: 1.75; letter-spacing: .22em; text-transform: uppercase; }
body.rrom-hero-reference .rrom-hero-photo { padding: 0; margin: 0 !important; }
body.rrom-hero-reference .rrom-hero-cover { min-height: 574px !important; border-radius: 24px !important; }
body.rrom-hero-reference .rrom-hero-cover > img.wp-image-318 { object-position: 50% 50%; }
body.rrom-hero-reference .rrom-hero-photo::before { right: -374px; bottom: -115px; width: 380px; height: 380px; border-radius: 0; background: url('../svg/hero-reference/rroman-wheel.svg') center / contain no-repeat !important; opacity: .22; }
body.rrom-hero-reference .rrom-hero-photo::after { display: none; }
body.rrom-hero-reference .rrom-stamp-position { top: 25px; right: 18px; }
body.rrom-hero-reference .rrom-hero-stamp { min-width: 0; padding: 10px 15px !important; border-color: #ffffffe6 !important; background: var(--rrom-deep) !important; }
body.rrom-hero-reference .rrom-hero-stamp p { display: flex; align-items: center; gap: 8px; font-size: 12px !important; letter-spacing: .01em !important; line-height: 1.5 !important; }
.rrom-hero-stamp svg { width: 16px; height: 16px; flex: 0 0 16px; }
body.rrom-hero-reference .rrom-note-position { left: 18px; bottom: 28px; }
body.rrom-hero-reference .rrom-photo-note { position: relative; width: 256px; max-width: 256px; padding: 16px 28px 17px 30px !important; border-left: 0 !important; border-radius: 18px !important; box-shadow: 0 5px 18px #102b3b12; background: #fffefa !important; }
body.rrom-hero-reference .rrom-photo-note::before { position: absolute; left: 14px; top: 18px; bottom: 18px; width: 2px; background: var(--rrom-green); content: ''; }
body.rrom-hero-reference .rrom-photo-note h3 { font-size: 30px !important; line-height: 1.03 !important; letter-spacing: -.025em !important; }
body.rrom-hero-reference .rrom-note-arrow { display: none; }
.rrom-ref-side { position: absolute; z-index: 1; right: max(36px, calc((100vw - 1600px) / 2 + 36px)); top: 96px; width: 146px; max-width: none !important; margin: 0 !important; }
.rrom-ref-words { display: grid; margin: 0; font-family: var(--rrom-heading); font-style: italic; font-size: 26px; line-height: 1.22; color: #596259; }
.rrom-ref-side-line { display: block; width: 38px; height: 2px; margin-top: 24px; background: var(--rrom-green); transform: rotate(-4deg); }
.rrom-ref-side-caption { margin: 34px 0 0; font-size: 10px; font-weight: 550; line-height: 1.8; letter-spacing: .15em; text-transform: uppercase; color: #707a71; }
body.rrom-hero-reference .rrom-culture-strip { position: relative; z-index: 2; width: auto; max-width: none; margin: 0 34px !important; padding: 30px 60px 34px !important; border: 0; border-radius: 28px 28px 0 0; background: #fafbf4f7 !important; }
.rrom-ref-pillars { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; max-width: none !important; gap: 0; }
.rrom-ref-pillar { display: flex; align-items: start; gap: 18px; min-width: 0; min-height: 103px; padding: 0 26px; border-left: 1px solid #d6dece; text-decoration: none !important; color: var(--rrom-green); }
.rrom-ref-pillar:first-child { padding-left: 0; border-left: 0; }
.rrom-ref-pillar:last-child { padding-right: 0; }
.rrom-ref-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; background: #e3ead9; }
.rrom-ref-icon svg { width: 28px; height: 28px; }
.rrom-ref-pillar-copy { display: grid; gap: 7px; min-width: 0; padding-top: 11px; }
.rrom-ref-pillar-title { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; line-height: 1.35; }
.rrom-ref-pillar-title svg { width: 16px; height: 16px; flex: 0 0 16px; }
.rrom-ref-pillar-description { font-size: 13px; line-height: 1.55; color: #657068; }
.rrom-ref-pillar:is(:hover,:focus-visible) .rrom-ref-pillar-title { color: var(--rrom-deep); text-decoration: underline; }
.rrom-ref-pillar:active { background: var(--rrom-sage); }
body.rrom-hero-reference .rrom-hero-motion-control { inset-inline-end: 18px; inset-block-end: 18px; min-height: 44px; padding: 6px 10px; border: 1px solid #d9dfd5; border-radius: 24px; background: #fffefaed; color: var(--rrom-ink); font-size: 11px; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
body.rrom-hero-reference .rrom-hero-photo:is(:hover,:focus-within) .rrom-hero-motion-control { opacity: 1; pointer-events: auto; }
@media (hover: none), (pointer: coarse) { body.rrom-hero-reference .rrom-hero-motion-control { opacity: 1; pointer-events: auto; } }
@media (prefers-reduced-motion: no-preference) {
  .rrom-ref-paint { animation: rrom-ref-paint-drift 10s ease-in-out infinite; animation-play-state: paused; }
  .rrom-reference-scene:has(.rrom-hero-shell[data-rrom-float-state="running"]) .rrom-ref-paint { animation-play-state: running; }
  @keyframes rrom-ref-paint-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
}
@media (max-width: 1539px) {
  body.rrom-hero-reference .rrom-hero { grid-template-columns: minmax(0,.93fr) minmax(0,1.15fr); gap: 44px !important; }
  body.rrom-hero-reference .rrom-hero-title { font-size: clamp(68px,6vw,88px) !important; }
  body.rrom-hero-reference .rrom-hero-cover { min-height: 540px !important; }
  .rrom-ref-side { position: relative; top: auto; right: auto; width: auto; max-width: 1360px !important; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 22px auto 0 !important; }
  .rrom-ref-words { display: flex; flex-wrap: wrap; gap: 12px; font-size: 21px; }
  .rrom-ref-side-line { display: none; }
  .rrom-ref-side-caption { margin: 0; font-size: 9px; text-align: right; }
  body.rrom-hero-reference .rrom-hero-photo::before { right: -150px; bottom: -85px; width: 310px; height: 310px; }
  body.rrom-hero-reference .rrom-culture-strip { padding-inline: 32px !important; }
  .rrom-ref-pillar { gap: 13px; padding-inline: 17px; }
  .rrom-ref-icon { width: 52px; height: 52px; flex-basis: 52px; }
  .rrom-ref-pillar-copy { padding-top: 5px; }
}
@media (max-width: 1100px) {
  body.rrom-hero-reference .rrom-brand-name { font-size: 16px !important; }
  body.rrom-hero-reference .rrom-brand-sub { font-size: 9px !important; letter-spacing: .08em !important; }
  body.rrom-hero-reference .rrom-header-actions { gap: 18px !important; }
  body.rrom-hero-reference .rrom-hero-shell { padding-inline: 32px !important; }
  body.rrom-hero-reference .rrom-hero { gap: 30px !important; }
  body.rrom-hero-reference .rrom-hero-title { font-size: clamp(54px,6.7vw,72px) !important; }
  body.rrom-hero-reference .rrom-hero-intro { font-size: 15px !important; line-height: 1.65 !important; }
  body.rrom-hero-reference .rrom-actions { gap: 12px !important; }
  body.rrom-hero-reference .rrom-actions .rrom-button a { min-height: 52px; padding: 14px 18px !important; font-size: 13px !important; }
  body.rrom-hero-reference .rrom-hero-cover { min-height: 500px !important; }
  body.rrom-hero-reference .rrom-hero-motion-control { inset-inline-start: 12px; inset-inline-end: auto; inset-block-start: 16px; inset-block-end: auto; width: 44px; height: 44px; padding: 10px; opacity: 1; pointer-events: auto; }
  body.rrom-hero-reference .rrom-hero-motion-control span { display: none; }
  .rrom-ref-saying { margin-top: 28px; gap: 16px; }
  .rrom-ref-pillars { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
  .rrom-ref-pillar { padding: 0; border: 0; min-height: 82px; }
  .rrom-ref-pillar:last-child { grid-column: 1 / -1; }
}
@media (max-width: 781px) {
  body.rrom-hero-reference .rrom-hero-shell { padding: 32px 24px 26px !important; }
  body.rrom-hero-reference .rrom-hero { grid-template-columns: minmax(0,1fr); gap: 30px !important; }
  body.rrom-hero-reference .rrom-hero-title { font-size: clamp(46px,15.4vw,80px) !important; }
  body.rrom-hero-reference .rrom-hero-topline { gap: 16px; font-size: 10px !important; margin-bottom: 22px !important; }
  body.rrom-hero-reference .rrom-hero-topline::before { width: 30px; flex-basis: 30px; height: 2px; }
  body.rrom-hero-reference .rrom-hero-intro { max-width: 560px; font-size: 16px !important; }
  body.rrom-hero-reference .rrom-hero-cover { min-height: 0 !important; aspect-ratio: 6 / 5 !important; }
  body.rrom-hero-reference .rrom-hero-cover > .wp-block-cover__inner-container { min-height: 0 !important; }
  body.rrom-hero-reference .rrom-photo-note { max-width: 256px; }
  body.rrom-hero-reference .rrom-photo-note h3 { font-size: 26px !important; }
  body.rrom-hero-reference .rrom-note-position { left: 16px; bottom: 22px; }
  body.rrom-hero-reference .rrom-stamp-position { top: 16px; right: 14px; }
  body.rrom-hero-reference .rrom-hero-stamp p { font-size: 11px !important; }
  .rrom-ref-saying { margin-top: 26px; }
  .rrom-ref-saying p { font-size: 9px; }
  .rrom-ref-side { gap: 18px; margin-top: 26px !important; }
  .rrom-ref-words { font-size: 19px; gap: 7px 12px; }
  .rrom-ref-side-caption { font-size: 8px; line-height: 1.6; }
  body.rrom-hero-reference .rrom-culture-strip { margin-inline: 16px !important; padding: 26px !important; border-radius: 22px 22px 0 0; }
  .rrom-ref-paint { height: 560px; background-size: auto 100%; }
}
@media (max-width: 600px) {
  body.rrom-hero-reference .rrom-brand-logo img { width: 78px !important; height: 34px !important; }
  body.rrom-hero-reference .rrom-brand-name { font-size: 13px !important; }
  body.rrom-hero-reference .rrom-brand-sub { font-size: 7px !important; }
  body.rrom-hero-reference .rrom-header-inner { min-height: 78px; }
  .rrom-ref-pillars { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .rrom-ref-pillar { min-height: 64px; gap: 16px; }
  .rrom-ref-pillar:last-child { grid-column: auto; }
  .rrom-ref-icon { width: 52px; height: 52px; flex-basis: 52px; }
  .rrom-ref-pillar-description { font-size: 13px; }
}
@media (max-width: 480px) {
  body.rrom-hero-reference .rrom-hero-title { font-size: clamp(46px,15.4vw,72px) !important; }
  body.rrom-hero-reference .rrom-actions { gap: 10px !important; }
  body.rrom-hero-reference .rrom-actions .rrom-button a { min-height: 52px; font-size: 14px !important; }
  body.rrom-hero-reference .rrom-photo-note { max-width: 210px; padding: 14px 20px 15px 27px !important; border-radius: 14px !important; }
  body.rrom-hero-reference .rrom-photo-note h3 { font-size: 24px !important; }
  body.rrom-hero-reference .rrom-note-position { left: 12px; bottom: 16px; }
  .rrom-ref-side { flex-wrap: wrap; }
  .rrom-ref-side-caption { text-align: left; }
  .rrom-ref-side-caption br { display: none; }
}
@media (max-width: 350px) {
  body.rrom-hero-reference .rrom-brand { gap: 8px !important; }
  body.rrom-hero-reference .rrom-brand-logo img { width: 60px !important; height: 27px !important; }
  body.rrom-hero-reference .rrom-brand-name { font-size: 11px !important; }
  body.rrom-hero-reference .rrom-brand-sub { font-size: 6px !important; letter-spacing: .055em !important; }
  body.rrom-hero-reference .rrom-hero-shell { padding-inline: 18px !important; }
  body.rrom-hero-reference .rrom-photo-note { max-width: 184px; }
  body.rrom-hero-reference .rrom-photo-note h3 { font-size: 21px !important; }
  body.rrom-hero-reference .rrom-hero-stamp { padding: 8px 11px !important; }
  body.rrom-hero-reference .rrom-hero-stamp p { font-size: 10px !important; }
  body.rrom-hero-reference .rrom-culture-strip { margin-inline: 12px !important; padding: 24px 18px !important; }
}
@media (prefers-reduced-motion: reduce), print {
  .rrom-ref-paint { animation: none !important; transform: none !important; }
  body.rrom-hero-reference .rrom-hero-motion-control { transition: none !important; }
}
