/* ============================================================================
   ROYALFIELD stavební — site.css
   Vanilla component styles for the WordPress build. Depends ONLY on the design
   tokens in ../../styles.css (CSS custom properties + webfonts). No frameworks.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* ---- Layout ------------------------------------------------------------- */
.rf-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.rf-section { padding: 60px 0; }
.rf-section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.rf-section--plaster { background: var(--plaster); }
.rf-section--white { background: var(--surface-card); }

/* ---- Typography helpers ------------------------------------------------- */
.rf-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-label-size); font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--copper);
}
.rf-eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--copper); transform: rotate(45deg); flex: none; }
.rf-eyebrow--bare::before { display: none; }
.rf-h1 { font: var(--text-display); letter-spacing: var(--text-display-tracking); color: var(--text-heading); margin: 0; }
.rf-h2 { font: var(--text-h2); letter-spacing: var(--text-h2-tracking); color: var(--text-heading); margin: 0; }
.rf-h3 { font: var(--text-h3); color: var(--text-heading); margin: 0; }
.rf-lead { font-size: 18px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.rf-on-dark .rf-h1, .rf-on-dark .rf-h2 { color: var(--finish); }
.rf-on-dark .rf-lead { color: var(--dust); }

.rf-sectionhead { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.rf-sectionhead--center { align-items: center; text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---- Grids -------------------------------------------------------------- */
.rf-grid { display: grid; gap: var(--grid-gap); }
.rf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rf-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 32px; }

/* ---- Buttons ------------------------------------------------------------ */
.rf-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; font-size: var(--text-ui-size); font-weight: var(--text-ui-weight);
  line-height: 1; border-radius: var(--radius-button);
  border: var(--border-width) solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.rf-btn--sm { padding: 10px 18px; font-size: 14px; }
.rf-btn--lg { padding: 17px 36px; font-size: 16px; }
.rf-btn--block { width: 100%; }
.rf-btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.rf-btn svg { width: 18px; height: 18px; }

.rf-btn--primary { background: var(--copper); color: var(--finish); border-color: var(--copper); }
.rf-btn--primary:hover { background: var(--copper-dark); border-color: var(--copper-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(200,150,46,0.30); }
.rf-btn--primary:active { transform: translateY(0); }
/* shine sweep — primary CTAs only */
.rf-btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  transform: translateX(-180%) skewX(-18deg); pointer-events: none;
  transition: transform 0.7s var(--ease-out);
}
.rf-btn--primary:hover::after { transform: translateX(330%) skewX(-18deg); }

.rf-btn--secondary { background: transparent; color: var(--copper); border-color: var(--copper); }
.rf-btn--secondary:hover { background: var(--copper-light); transform: translateY(-1px); }
.rf-btn--ghost { background: transparent; color: var(--finish); border-color: var(--finish); }
.rf-btn--ghost:hover { background: rgba(255,255,255,0.10); transform: translateY(-1px); }

/* ---- Badges ------------------------------------------------------------- */
.rf-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: var(--radius-pill); font-size: var(--text-label-size); font-weight: 600;
  letter-spacing: var(--text-label-tracking); text-transform: uppercase; line-height: 1;
}
.rf-badge--moss { background: var(--success-tint); color: var(--moss); }
.rf-badge--copper { background: var(--copper-light); color: var(--copper-dark); }
.rf-badge--solid { background: var(--moss); color: var(--finish); }

/* ---- Brand diamond (metallic shine) ------------------------------------ */
.rf-diamond-mark {
  position: relative; overflow: hidden; width: 24px; height: 24px; flex: none;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #EFC36A 0%, #C8962E 46%, #936713 100%);
}
.rf-diamond-mark::before {
  content: ""; position: absolute; top: -50%; left: -50%; width: 45%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  transform: skewX(-20deg) translateX(-180%); animation: rfShine 3.4s ease-in-out infinite;
}
@keyframes rfShine { 0% { transform: skewX(-20deg) translateX(-180%); } 22%,100% { transform: skewX(-20deg) translateX(340%); } }

/* ---- Header ------------------------------------------------------------- */
.rf-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-height);
  background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(8px);
  box-shadow: var(--shadow-header);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.rf-header__inner { display: flex; align-items: center; gap: 28px; height: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
/* transparent-over-hero (home only, before scroll) */
.rf-header--over-hero { background: transparent; backdrop-filter: none; box-shadow: none; }
.rf-header--over-hero .rf-header__color { color: var(--finish); }
.rf-header__color { color: var(--text-heading); transition: color var(--dur-base) var(--ease-out); }

.rf-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.rf-logo__img { height: 44px; width: auto; display: block; overflow: visible; }
.rf-logo--footer .rf-logo__img { height: 50px; }
@media (max-width: 600px) { .rf-logo__img { height: 38px; } }
.rf-logo__stack { display: flex; flex-direction: column; line-height: 1; }
.rf-logo__word { font: 700 20px/1 var(--font-display); letter-spacing: 0.5px; }
.rf-logo__sub { font-size: 9.5px; font-weight: 600; letter-spacing: 3.5px; color: var(--copper); margin-top: 4px; }

.rf-nav { display: flex; align-items: center; gap: 24px; }
.rf-nav__link { text-decoration: none; font-size: 15px; font-weight: 500; opacity: 0.9; background: none; border: none; cursor: pointer; padding: 0; }
.rf-nav__link:hover { opacity: 1; }

/* dropdown */
.rf-dd { position: relative; }
.rf-dd__toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 500; padding: 0; }
.rf-dd__caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform var(--dur-base) var(--ease-out); }
.rf-dd__panel {
  position: absolute; top: 100%; left: -14px; padding-top: 14px; min-width: 230px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.rf-dd__panel--right { left: auto; right: 0; }
.rf-dd:hover .rf-dd__panel, .rf-dd--open .rf-dd__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.rf-dd:hover .rf-dd__caret, .rf-dd--open .rf-dd__caret { transform: rotate(-135deg); margin-top: 3px; }
.rf-dd__menu { background: var(--finish); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-form); padding: 6px; }
.rf-dd__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--radius-button); text-decoration: none; color: var(--text-body); font-size: 15px; font-weight: 500; background: none; border: none; cursor: pointer; text-align: left; }
.rf-dd__item:hover { background: var(--copper-light); color: var(--copper-dark); }
.rf-dd__item--active { color: var(--copper-dark); font-weight: 600; }
.rf-dd__code { display: inline-block; flex: none; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; width: 22px; color: var(--stone); }
.rf-dd__item > span { display: inline-flex; align-items: center; }

.rf-header__phone { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 15px; }
.rf-header__phone svg { width: 17px; height: 17px; color: var(--copper); }
.rf-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; text-decoration: none; }
.rf-iconbtn svg { width: 22px; height: 22px; }

/* visibility helpers */
.rf-desktop { display: inline-flex; }
.rf-mobile { display: none; }

/* mobile drawer */
/* Full-height overlay menu. Content starts below the (solid) sticky header so
   the first item never tucks under it, and the page behind is fully covered. */
.rf-drawer { display: none; position: fixed; inset: 0; z-index: 99;
  background: var(--finish);
  padding: calc(var(--header-height) + 20px) var(--container-pad) 28px; flex-direction: column; gap: 4px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.rf-drawer.is-open { display: flex; }

/* While the menu is open: keep the header solid (never transparent-over-hero)
   and lock the page scroll behind the overlay. */
html.rf-menu-open { overflow: hidden; }
html.rf-menu-open .rf-header,
html.rf-menu-open .rf-header--over-hero { background: var(--finish); box-shadow: 0 1px 0 var(--hairline); backdrop-filter: none; }
html.rf-menu-open .rf-header__color,
html.rf-menu-open .rf-header--over-hero .rf-header__color { color: var(--text-heading); }
html.rf-menu-open .rf-messenger { display: none; }
.rf-drawer__link { display: block; padding: 12px; border-radius: var(--radius-button); text-decoration: none; color: var(--text-heading); font-size: 16px; font-weight: 500; }
.rf-drawer__link--bold { font-weight: 600; }
.rf-drawer__link--sub { padding: 10px 12px 10px 26px; color: var(--text-muted); font-size: 15px; }
.rf-drawer__rule { height: 1px; background: var(--hairline); margin: 10px 0; }
.rf-drawer__langs { display: flex; gap: 8px; padding: 0 12px 4px; }
.rf-langpill { padding: 8px 16px; border-radius: var(--radius-button); cursor: pointer; border: 1.5px solid var(--hairline); background: transparent; color: var(--text-body); font-weight: 600; font-size: 14px; }
.rf-langpill.is-active { border-color: var(--copper); background: var(--copper-light); color: var(--copper-dark); }

/* ---- Hero --------------------------------------------------------------- */
.rf-hero { position: relative; overflow: visible; background: var(--concrete); color: var(--finish);
  margin-top: calc(-1 * var(--header-height)); padding-top: var(--header-height); }
.rf-hero__stripes { position: absolute; top: 0; left: 0; right: 0; bottom: -56px; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 12px, transparent 12px 24px), var(--concrete); }
@keyframes rf-hero-stripe { to { background-position: 33.94px 0; } }
@media (prefers-reduced-motion: no-preference) { .rf-hero__stripes { animation: rf-hero-stripe 3.2s linear infinite; } }
.rf-hero__wedge { position: absolute; top: 0; bottom: -56px; right: 0; width: 46%; background: linear-gradient(135deg, rgba(200,150,46,0.14), rgba(200,150,46,0.04)); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.rf-hero__cut { position: absolute; top: -5%; bottom: -5%; left: 54%; width: 3px; background: var(--copper); transform: rotate(8deg); }
.rf-hero__inner { position: relative; padding-top: 72px; padding-bottom: 80px; }
.rf-hero__content { max-width: 640px; display: flex; flex-direction: column; gap: 24px; }
.rf-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.rf-hero--sub .rf-hero__inner { padding-top: 60px; padding-bottom: 60px; }
/* Ads landing — hero trust chips */
.rf-lp-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 24px 0 0; padding: 0; }
.rf-lp-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--plaster); opacity: .92; }
.rf-lp-trust li [data-lucide], .rf-lp-trust li svg { width: 17px; height: 17px; color: var(--copper); flex: none; }
@media (max-width: 600px) { .rf-lp-trust { gap: 8px 16px; } .rf-lp-trust li { font-size: 13px; } }
/* Ads landing — split hero (copy + quick form) */
.rf-hero__inner--split { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px, 420px); gap: 48px; align-items: center; }
.rf-hero__inner--split .rf-hero__content { max-width: 620px; }
.rf-hero__form { position: relative; z-index: 2; }
.rf-hero__form .rf-leadform { width: 100%; }
.rf-leadform__head { display: flex; flex-direction: column; gap: 4px; }
.rf-leadform__title { font: 700 20px/1.2 var(--font-display); color: var(--text-heading); }
.rf-label__hint { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.rf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--text-body); cursor: pointer; }
.rf-consent input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--copper); }
.rf-consent a { color: var(--copper); text-decoration: underline; }
@media (max-width: 900px) {
  .rf-hero__inner--split { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .rf-hero__inner--split .rf-hero__content { max-width: none; }
}
/* Ads landing — work gallery grid */
.rf-lp-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rf-lp-gallery__item { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--concrete); }
.rf-lp-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease-out, ease); }
.rf-lp-gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 900px) { .rf-lp-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .rf-lp-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.rf-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--dust); }
.rf-breadcrumb a { color: var(--dust); text-decoration: none; }
.rf-breadcrumb span.cur { color: var(--copper); }

/* JS entrance: handled via inline styles in site.js (reveal()), so the base
   markup is always visible — robust against print / reduced-motion / no-JS. */

/* ---- Section divider (diagonal + diamonds) ----------------------------- */
.rf-divider { position: relative; height: 70px; overflow: hidden; margin-top: -1px; margin-bottom: -1px; background: var(--rf-bottom, var(--plaster)); }
.rf-divider__top { position: absolute; inset: 0; background: var(--rf-top, var(--concrete)); clip-path: polygon(0 0, 100% 0, 100% 50px, 0 24px); }
.rf-divider__copper { position: absolute; inset: 0; background: var(--copper); clip-path: polygon(0 24px, 100% 50px, 100% 52px, 0 26px); }
.rf-divider--flip .rf-divider__top { clip-path: polygon(0 0, 100% 0, 100% 24px, 0 50px); }
.rf-divider--flip .rf-divider__copper { clip-path: polygon(0 50px, 100% 24px, 100% 26px, 0 52px); }
.rf-divider__diamonds { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); display: flex; gap: 9px; }
.rf-divider__diamonds i { width: 12px; height: 12px; background: var(--copper); border: 2px solid var(--finish); transform: rotate(45deg); box-shadow: 0 1px 4px rgba(26,26,26,0.30); }
.rf-divider__diamonds i:nth-child(2) { width: 16px; height: 16px; margin-top: -2px; }

/* ---- Services diamond mosaic ------------------------------------------- */
.rf-mosaic { position: relative; width: 100%; max-width: 860px; margin: 0 auto; aspect-ratio: 3.5 / 1.5; }
.rf-mosaic__tile {
  position: absolute; width: 28.57%; height: 66.67%; padding: 0; border: none; background: none;
  cursor: pointer; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); z-index: 1;
  filter: drop-shadow(0 3px 12px rgba(26,26,26,0.12));
  transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.rf-mosaic__tile:hover, .rf-mosaic__tile:focus-visible { z-index: 5; transform: scale(1.06); filter: drop-shadow(0 14px 26px rgba(200,150,46,0.40)); outline: none; }
.rf-mosaic__fill { position: absolute; inset: 0; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: var(--finish); transition: background var(--dur-base) var(--ease-out); }
.rf-mosaic__tile:hover .rf-mosaic__fill, .rf-mosaic__tile:focus-visible .rf-mosaic__fill { background: var(--copper); }
.rf-mosaic__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 0 14%; pointer-events: none; }
.rf-mosaic__content svg { width: 36px; height: 36px; color: var(--copper); transition: color var(--dur-base) var(--ease-out); }
.rf-mosaic__label { font-weight: 600; font-size: 15px; line-height: 1.2; text-align: center; color: var(--text-heading); transition: color var(--dur-base) var(--ease-out); }
.rf-mosaic__price { font-weight: 600; font-size: 12px; color: var(--copper); opacity: 0; max-height: 0; overflow: hidden; transition: opacity var(--dur-base) var(--ease-out), max-height var(--dur-base) var(--ease-out); }
.rf-mosaic__tile:hover .rf-mosaic__content svg, .rf-mosaic__tile:focus-visible .rf-mosaic__content svg { color: var(--finish); }
.rf-mosaic__tile:hover .rf-mosaic__label, .rf-mosaic__tile:focus-visible .rf-mosaic__label { color: var(--finish); }
.rf-mosaic__tile:hover .rf-mosaic__price, .rf-mosaic__tile:focus-visible .rf-mosaic__price { color: rgba(255,255,255,0.9); opacity: 1; max-height: 18px; }
.rf-mosaic-cards { display: none; }

/* ---- Reviews carousel --------------------------------------------------- */
.rf-carousel { position: relative; }
.rf-carousel__track { padding: 10px 2px 14px; display: flex; gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: none; scroll-behavior: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; }
.rf-carousel__track:active { cursor: grabbing; }
.rf-carousel__track::-webkit-scrollbar { display: none; }
.rf-carousel__track > .rf-review,
.rf-carousel__track > .rf-blogcard,
.rf-carousel__track > .rf-card { flex: 0 0 calc((100% - 2 * var(--grid-gap)) / 3); min-width: 270px; scroll-snap-align: start; }
.rf-carousel__track > .rf-card { margin: 4px 0; }
.rf-carousel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.rf-carousel__head .rf-sectionhead { flex: 1 1 auto; min-width: 0; }
.rf-carousel__nav { display: flex; gap: 14px; flex: none; }
@media (max-width: 1024px) { .rf-carousel__track > .rf-review, .rf-carousel__track > .rf-blogcard, .rf-carousel__track > .rf-card { flex-basis: calc((100% - var(--grid-gap)) / 2); } }
@media (max-width: 768px) { .rf-carousel__track > .rf-review, .rf-carousel__track > .rf-blogcard, .rf-carousel__track > .rf-card { flex-basis: 88%; } }

/* diamond-shaped arrow button */
.rf-diamond-arrow { position: relative; width: 54px; height: 54px; padding: 0; border: none; background: none; cursor: pointer; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); filter: drop-shadow(0 2px 8px rgba(26,26,26,0.14)); transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.rf-diamond-arrow:hover { filter: drop-shadow(0 8px 16px rgba(200,150,46,0.35)); }
.rf-diamond-arrow:disabled { opacity: 0.35; cursor: default; }
.rf-diamond-arrow__edge { position: absolute; inset: 0; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: var(--copper); }
.rf-diamond-arrow__face { position: absolute; inset: 2px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: var(--finish); transition: background var(--dur-base) var(--ease-out); }
.rf-diamond-arrow:hover:not(:disabled) .rf-diamond-arrow__face { background: var(--copper); }
.rf-diamond-arrow__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--copper); transition: color var(--dur-base) var(--ease-out); }
.rf-diamond-arrow:hover:not(:disabled) .rf-diamond-arrow__icon { color: var(--finish); }

/* ---- Service cards (mobile fallback + service page) -------------------- */
.rf-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px;
  text-decoration: none; background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.rf-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.rf-card__icon { width: 40px; height: 40px; color: var(--copper); }
.rf-card__icon svg { width: 40px; height: 40px; }
.rf-card__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); flex: 1; }
.rf-card__price { font-weight: 700; font-size: 18px; color: var(--copper); }
.rf-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--text-heading); }
.rf-card__link span { color: var(--copper); }

/* ---- Stat facts --------------------------------------------------------- */
.rf-stat { display: flex; flex-direction: column; gap: 10px; }
.rf-stat__value { font: 700 clamp(36px,4vw,52px)/1 var(--font-display); color: var(--copper); letter-spacing: -0.5px; }
.rf-stat__label { font-size: 15px; line-height: 1.45; color: var(--text-body); }

/* ---- Before / After slider --------------------------------------------- */
.rf-ba { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); background: var(--concrete); }
.rf-ba__stage { position: relative; height: 300px; cursor: ew-resize; user-select: none; touch-action: pan-y; }
.rf-ba__after { position: absolute; inset: 0; background: linear-gradient(135deg, #faf7f1, #ece3d4); background-size: cover; background-position: center; }
.rf-ba__before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); background: repeating-linear-gradient(135deg, #2a2a28 0 9px, #262624 9px 18px); background-size: cover; background-position: center; }
.rf-ba__corner { position: absolute; top: 14px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.rf-ba__corner--before { left: 14px; background: rgba(26,26,26,0.55); color: #fff; }
.rf-ba__corner--after { right: 14px; background: rgba(255,255,255,0.85); color: var(--concrete); }
.rf-ba__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--copper); transform: translateX(-1.5px); }
.rf-ba__handle { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; background: var(--copper); border: 2px solid var(--finish); transform: translate(-50%,-50%) rotate(45deg); box-shadow: 0 2px 8px rgba(0,0,0,0.35); cursor: ew-resize; touch-action: none; }
/* Larger invisible touch target so the handle is easy to grab on mobile. On
   touch, ONLY the handle drives the slider — touching the photos scrolls. */
.rf-ba__handle::after { content: ""; position: absolute; inset: -17px; }
.rf-ba__caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--concrete); }
.rf-ba__title { font: 700 18px/1.2 var(--font-display); color: var(--finish); }
.rf-ba__meta { font-size: 13px; color: var(--dust); margin-top: 4px; }
.rf-ba__tag { flex: none; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--moss); color: var(--finish); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }

/* ---- Steps -------------------------------------------------------------- */
.rf-steps { position: relative; }
.rf-step { position: relative; display: flex; flex-direction: column; gap: 10px; }
.rf-step__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--copper); background: var(--surface-card); transform: rotate(45deg); }
.rf-step__num > i { transform: rotate(-45deg); font: 700 18px/1 var(--font-display); color: var(--copper); font-style: normal; }
.rf-step__title { margin: 0; font: 600 18px/1.3 var(--font-body); color: var(--text-heading); }
.rf-step__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* ---- Reviews ------------------------------------------------------------ */
.rf-review { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 28px; background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.rf-review__top { display: flex; align-items: center; justify-content: space-between; }
.rf-review__quote { font: 700 56px/0.6 var(--font-display); color: var(--copper); }
.rf-review__stars { color: var(--copper); letter-spacing: 2px; font-size: 15px; }
.rf-review__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.rf-review__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.rf-review__name { font-weight: 600; font-size: 15px; color: var(--text-heading); }
.rf-review__obj { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--success-tint); color: var(--moss); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

/* ---- FAQ ---------------------------------------------------------------- */
.rf-faq__item { border-bottom: 1px solid var(--hairline); }
.rf-faq__q { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 0; background: none; border: none; cursor: pointer; text-align: left; }
.rf-faq__mark { flex: none; width: 9px; height: 9px; background: var(--copper); transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out); }
.rf-faq__item.is-open .rf-faq__mark { transform: rotate(135deg); }
.rf-faq__qtext { flex: 1; font: 600 17px/1.4 var(--font-body); color: var(--text-heading); }
.rf-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.rf-faq__item.is-open .rf-faq__a { grid-template-rows: 1fr; }
.rf-faq__a > div { overflow: hidden; }
.rf-faq__a p { margin: 0; padding: 0 0 22px 25px; font-size: 15px; line-height: 1.6; color: var(--text-body); }

/* ---- Packages (service page) ------------------------------------------- */
.rf-pkg { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid var(--hairline); }
.rf-pkg--featured { background: var(--concrete); color: var(--finish); border: 2px solid var(--copper); }
.rf-pkg__name { font: var(--text-h3); color: var(--text-heading); }
.rf-pkg--featured .rf-pkg__name { color: var(--finish); }
.rf-pkg__price { font: 700 26px/1 var(--font-display); color: var(--copper); }
.rf-pkg__list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.rf-pkg__li { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--text-body); }
.rf-pkg--featured .rf-pkg__li { color: var(--dust); }
.rf-pkg__li svg { width: 18px; height: 18px; color: var(--moss); flex: none; }
.rf-pkg .rf-btn { margin-top: auto; }
.rf-inclcol { display: flex; flex-direction: column; gap: 14px; }
.rf-inclcol__h { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--copper); }
.rf-inclcol__li { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--text-body); }
.rf-inclcol__li svg { width: 18px; height: 18px; color: var(--moss); flex: none; }

/* ---- Forms -------------------------------------------------------------- */
.rf-field { display: flex; flex-direction: column; gap: 8px; }
.rf-label { font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: var(--stone); }
.rf-label b { color: var(--copper); font-weight: 600; }
.rf-input { height: 48px; padding: 0 14px; font-family: var(--font-body); font-size: 15px; color: var(--text-body); background: var(--finish); border: var(--border-width) solid var(--hairline); border-radius: var(--radius-input); outline: none; transition: border-color var(--dur-base) var(--ease-out); }
.rf-input:focus { border-color: var(--copper); }

/* custom select */
.rf-select { position: relative; }
.rf-select__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 48px; padding: 0 14px; font-family: var(--font-body); font-size: 15px; text-align: left; color: var(--stone); background: var(--finish); border: var(--border-width) solid var(--hairline); border-radius: var(--radius-input); cursor: pointer; }
.rf-select.is-chosen .rf-select__btn { color: var(--text-body); }
.rf-select.is-open .rf-select__btn { border-color: var(--copper); }
.rf-select__caret { width: 8px; height: 8px; flex: none; border-right: 2px solid var(--stone); border-bottom: 2px solid var(--stone); transform: rotate(45deg); margin-top: -3px; transition: transform var(--dur-base) var(--ease-out); }
.rf-select.is-open .rf-select__caret { transform: rotate(-135deg); margin-top: 4px; }
.rf-select__list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; margin: 0; padding: 6px; list-style: none; background: var(--finish); border: 1px solid var(--hairline); border-radius: var(--radius-input); box-shadow: var(--shadow-form); max-height: 280px; overflow-y: auto; display: none; }
.rf-select.is-open .rf-select__list { display: block; }
.rf-select__opt { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius-button); cursor: pointer; font-size: 15px; color: var(--text-body); }
.rf-select__opt:hover, .rf-select__opt.is-active { background: var(--copper-light); }
.rf-select__opt.is-selected { color: var(--copper-dark); font-weight: 600; }

.rf-leadform { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 32px; background: var(--surface-card); border-radius: var(--radius-form); border: 1px solid var(--hairline); box-shadow: var(--shadow-form); }
.rf-leadform__note { margin: 0; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ---- CTA band ----------------------------------------------------------- */
.rf-cta { position: relative; overflow: hidden; background: var(--concrete); color: var(--text-on-dark); padding: 80px var(--container-pad); }
/* The CTA's top diagonal is now drawn by an explicit rf_divider() before the
   section (so it joins the page-wide alternating zig-zag). No built-in wedge. */
.rf-cta__texture { position: absolute; top: 0; bottom: 0; right: 0; width: 42%; background: repeating-linear-gradient(135deg, rgba(200,150,46,0.06) 0 14px, transparent 14px 28px); clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
@keyframes rf-stripe-slide { to { background-position: 39.6px 0; } }
@media (prefers-reduced-motion: no-preference) { .rf-cta__texture { animation: rf-stripe-slide 2.5s linear infinite; } }
.rf-cta__inner { position: relative; max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(320px, 440px); gap: 48px; align-items: center; }
.rf-cta__copy { display: flex; flex-direction: column; gap: 18px; }
.rf-cta__messengers { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.rf-cta__messengers > span { font-size: 13px; color: var(--dust); }
.rf-msglink { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-pill); border: 1.5px solid rgba(255,255,255,0.25); color: var(--finish); text-decoration: none; font-size: 13px; font-weight: 600; }
.rf-msglink svg { width: 15px; height: 15px; color: var(--copper); }

/* ---- Footer ------------------------------------------------------------- */
.rf-footer { background: var(--concrete); color: var(--finish); }
.rf-footer__grid { max-width: var(--container-max); margin: 0 auto; padding: 56px var(--container-pad) 28px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.rf-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.rf-footer__about { margin: 0; max-width: 320px; font-size: 14px; line-height: 1.6; color: var(--dust); }
.rf-footer__col { display: flex; flex-direction: column; gap: 12px; }
.rf-footer__h { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--copper); }
.rf-footer__col a, .rf-footer__col span { color: var(--dust); text-decoration: none; font-size: 14px; }
.rf-footer__col a.big { color: var(--finish); font-size: 16px; font-weight: 600; }
.rf-footer__bar { border-top: 1px solid rgba(255,255,255,0.10); }
.rf-footer__barin { max-width: var(--container-max); margin: 0 auto; padding: 18px var(--container-pad); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--dust); }

/* ---- Messenger floating widget ----------------------------------------- */
.rf-messenger { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 12px; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.rf-messenger--hide { opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.85); pointer-events: none; }
.rf-messenger a { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.25); color: #fff; text-decoration: none; }
.rf-messenger a svg { width: 24px; height: 24px; }
.rf-messenger__wa { background: #25D366; }
.rf-messenger__tg { background: #229ED9; }

/* ---- Reveal (sections): handled via inline styles in site.js ----------- */

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .rf-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .rf-desktop { display: none !important; }
  .rf-mobile { display: inline-flex; }
}
@media (max-width: 900px) {
  /* minmax(0,1fr) lets the single column shrink below the form's min-content
     instead of overflowing the section (which overflow:hidden would clip). */
  .rf-cta__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 768px) {
  .rf-section { padding: 38px 0; }
  .rf-grid--2, .rf-grid--3 { grid-template-columns: 1fr; gap: 20px; }
  .rf-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .rf-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .rf-mosaic { display: none; }
  .rf-mosaic-cards { display: grid; }
  .rf-hero__inner { padding-top: 64px; padding-bottom: 72px; }
  .rf-cta { padding: 48px var(--container-pad); }
  .rf-leadform { padding: 24px; }
  .rf-cta__messengers > span { flex-basis: 100%; }
}

/* ---- Divider two-block fix (no base; each edge crisp) ---- */
.rf-divider { background: none; }
/* The hero divider's top wedge is transparent so the hero's own dark stripes +
   gold wedge (which overflow downward) continue through it right down to the
   copper line — same elements, so no phase seam and the gold reaches the edge.
   Every other divider keeps its solid top wedge. */
.rf-divider::before { content:''; position:absolute; inset:0; background: var(--rf-top, var(--concrete)); clip-path: polygon(0 0,100% 0,100% 52px,0 26px); }
.rf-hero + .rf-divider::before { background: transparent; }
.rf-divider__copper { background: var(--rf-bottom, var(--plaster)); clip-path: polygon(0 24px,100% 50px,100% 100%,0 100%); }
.rf-divider__top { background: var(--copper); clip-path: polygon(0 24px,100% 50px,100% 52px,0 26px); }
.rf-divider--flip::before { clip-path: polygon(0 0,100% 0,100% 26px,0 52px); }
.rf-divider--flip .rf-divider__copper { clip-path: polygon(0 50px,100% 24px,100% 100%,0 100%); }
.rf-divider--flip .rf-divider__top { clip-path: polygon(0 50px,100% 24px,100% 26px,0 52px); }
.rf-divider__diamonds { z-index: 2; }

/* ---- About: concept grid + principle diamonds ---- */
.rf-about-concept { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.rf-pdia { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.rf-pdia__badge { position:relative; width:104px; height:104px; display:flex; align-items:center; justify-content:center; background:var(--surface-card); border:1.5px solid var(--copper); transform:rotate(45deg); transition:background .35s var(--ease-out), transform .35s var(--ease-out); box-shadow:0 3px 12px rgba(26,26,26,.10); }
.rf-pdia__badge svg { transform:rotate(-45deg); color:var(--copper); width:32px; height:32px; transition:color .35s var(--ease-out); }
.rf-pdia:hover .rf-pdia__badge { background:var(--copper); transform:rotate(45deg) scale(1.05); box-shadow:0 14px 24px rgba(200,150,46,.4); }
.rf-pdia:hover .rf-pdia__badge svg { color:var(--finish); }
.rf-pdia__t { margin:0; font:600 17px/1.3 var(--font-body); color:var(--text-heading); }
.rf-pdia__d { margin:0; max-width:230px; font-size:14px; line-height:1.5; color:var(--text-muted); }

/* ---- Contacts: info card + map ---- */
.rf-contacts-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:stretch; }
.rf-ci { background:var(--surface-card); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:36px; display:flex; flex-direction:column; gap:24px; }
.rf-ci__lab { display:block; font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); }
.rf-ci__phone { display:block; font:700 clamp(28px,3.4vw,38px)/1.1 var(--font-display); color:var(--text-heading); text-decoration:none; margin-top:6px; }
.rf-ci__msgs { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.rf-ci__msg { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; color:#fff; text-decoration:none; font-weight:600; font-size:14px; }
.rf-ci__msg svg { width:18px; height:18px; }
.rf-ci__msg--wa { background:#25D366; } .rf-ci__msg--tg { background:#229ED9; }
.rf-ci__rule { height:1px; background:var(--hairline); }
.rf-ci__row { display:flex; align-items:flex-start; gap:14px; }
.rf-ci__ic { flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--copper); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.rf-ci__ic svg { color:var(--finish); width:18px; height:18px; }
.rf-ci__row .rf-ci__lab { color:var(--text-muted); }
.rf-ci__val { display:block; font-size:17px; font-weight:600; color:var(--text-heading); text-decoration:none; margin-top:2px; }
.rf-map { position:relative; min-height:420px; border-radius:var(--radius-card); overflow:hidden; background:linear-gradient(135deg,#ECE6DA,#E0D8C8); box-shadow:var(--shadow-card); }
.rf-map__grid { position:absolute; inset:0; background: repeating-linear-gradient(35deg, rgba(120,110,95,.10) 0 2px, transparent 2px 54px), repeating-linear-gradient(-55deg, rgba(120,110,95,.10) 0 2px, transparent 2px 70px); }
.rf-map__road { position:absolute; top:40%; left:0; right:0; height:10px; background:rgba(200,150,46,.18); transform:rotate(-4deg); }
.rf-map__pinwrap { position:absolute; top:46%; left:52%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; }
.rf-map__pin { width:30px; height:30px; background:var(--copper); border:3px solid var(--finish); transform:rotate(45deg); box-shadow:0 6px 16px rgba(26,26,26,.35); }
.rf-map__label { background:var(--concrete); color:var(--finish); font-size:12px; font-weight:600; padding:5px 11px; white-space:nowrap; }
@media (max-width:860px){ .rf-about-concept, .rf-contacts-grid { grid-template-columns:1fr; } }

/* ---- Service page: diamond bullets + centered packages ---- */
.rf-dbullet2 { width:8px; height:8px; flex:none; background:var(--copper); transform:rotate(45deg); transition:transform .45s var(--ease-out); }
.rf-pkg__li:hover .rf-dbullet2, .rf-inclcol__li:hover .rf-dbullet2 { transform:rotate(405deg); }
.rf-pkg { align-items:center; text-align:center; }
.rf-pkg__list { align-items:flex-start; }
/* ---- Mosaic: gaps + copper edge ---- */
.rf-mosaic__tile { transform:scale(0.9); background:var(--copper); }
.rf-mosaic__tile:hover, .rf-mosaic__tile:focus-visible { transform:scale(1.0); }
.rf-mosaic__fill { inset:2px; }

/* ---- How we work: diamond timeline ---- */
.rf-stepflow { position:relative; }
.rf-stepflow .rf-stepline { position:absolute; top:50px; left:13%; right:13%; height:2px; background:repeating-linear-gradient(90deg, var(--copper) 0 8px, transparent 8px 18px); opacity:.6; }
@keyframes rf-dash { to { background-position:18px 0; } }
@media (prefers-reduced-motion: no-preference){ .rf-stepflow .rf-stepline { animation:rf-dash 1.2s linear infinite; } }
@media (max-width:768px){ .rf-stepflow .rf-stepline { display:none; } }
.rf-sdia { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; position:relative; z-index:1; }
.rf-sdia__badge { width:100px; height:100px; display:flex; align-items:center; justify-content:center; background:var(--surface-card); border:1.5px solid var(--copper); transform:rotate(45deg); box-shadow:0 3px 12px rgba(26,26,26,.12); transition:background .35s var(--ease-out), transform .35s var(--ease-out); }
.rf-sdia__badge span { transform:rotate(-45deg); font:700 30px/1 var(--font-display); color:var(--copper); transition:color .35s var(--ease-out); }
.rf-sdia:hover .rf-sdia__badge { background:var(--copper); transform:rotate(45deg) scale(1.05); box-shadow:0 16px 28px rgba(200,150,46,.4); }
.rf-sdia:hover .rf-sdia__badge span { color:var(--finish); }
.rf-sdia__head { display:flex; align-items:center; gap:8px; }
.rf-sdia__head svg { color:var(--copper); width:18px; height:18px; }
.rf-sdia__t { font:600 17px/1.3 var(--font-body); color:var(--text-heading); }
.rf-sdia__d { margin:0; max-width:220px; font-size:14px; line-height:1.5; color:var(--text-muted); }

/* ---- Mosaic assembly on scroll (vanilla) ---- */
@media (prefers-reduced-motion: no-preference) {
  .rf-mosaic--anim .rf-mosaic__tile { opacity:0; transition: transform .75s var(--ease-out), opacity .6s var(--ease-out), filter var(--dur-base) var(--ease-out); }
  .rf-mosaic--anim .rf-mosaic__tile:nth-child(1){ transform: translate(-150px,-80px) scale(.4) rotate(8deg); }
  .rf-mosaic--anim .rf-mosaic__tile:nth-child(2){ transform: translate(0,-150px) scale(.4) rotate(8deg); }
  .rf-mosaic--anim .rf-mosaic__tile:nth-child(3){ transform: translate(150px,-80px) scale(.4) rotate(8deg); }
  .rf-mosaic--anim .rf-mosaic__tile:nth-child(4){ transform: translate(-150px,80px) scale(.4) rotate(8deg); }
  .rf-mosaic--anim .rf-mosaic__tile:nth-child(5){ transform: translate(0,150px) scale(.4) rotate(8deg); }
  .rf-mosaic--anim .rf-mosaic__tile:nth-child(6){ transform: translate(150px,80px) scale(.4) rotate(8deg); }
  .rf-mosaic--anim.is-in .rf-mosaic__tile { opacity:1; transform: scale(.9); }
  .rf-mosaic--anim.is-in .rf-mosaic__tile:nth-child(2){ transition-delay:.08s; }
  .rf-mosaic--anim.is-in .rf-mosaic__tile:nth-child(3){ transition-delay:.16s; }
  .rf-mosaic--anim.is-in .rf-mosaic__tile:nth-child(4){ transition-delay:.24s; }
  .rf-mosaic--anim.is-in .rf-mosaic__tile:nth-child(5){ transition-delay:.32s; }
  .rf-mosaic--anim.is-in .rf-mosaic__tile:nth-child(6){ transition-delay:.4s; }
  .rf-mosaic--anim.is-in .rf-mosaic__tile:hover, .rf-mosaic--anim.is-in .rf-mosaic__tile:focus-visible { transform: scale(1.0); }
}

/* ---- Blog cards ---- */
.rf-blogcard { display:flex; flex-direction:column; gap:14px; padding:0; text-decoration:none; background:var(--surface-card); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.rf-blogcard__cover { position:relative; height:150px; background:linear-gradient(135deg,#2a2a28,#3a352f); overflow:hidden; }
.rf-blogcard__wedge { position:absolute; inset:0; background:linear-gradient(135deg, transparent 40%, rgba(200,150,46,0.18)); clip-path:polygon(40% 0,100% 0,100% 100%,0 100%); }
.rf-blogcard__dia { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); width:34px; height:34px; background:var(--copper); border:2px solid var(--finish); box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.rf-blogcard__cat { position:absolute; top:14px; left:14px; padding:5px 11px; border-radius:var(--radius-pill); background:var(--copper-light); color:var(--copper-dark); font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; }
.rf-blogcard__body { display:flex; flex-direction:column; gap:10px; padding:4px 24px 26px; }
.rf-blogcard__meta { display:flex; gap:14px; font-size:12px; color:var(--text-muted); }
.rf-blogcard__t { margin:0; font:700 21px/1.25 var(--font-display); color:var(--text-heading); }
.rf-blogcard__x { margin:0; font-size:15px; line-height:1.55; color:var(--text-muted); }
.rf-blogcard__link { display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-weight:600; font-size:14px; color:var(--text-heading); }
.rf-blogcard__link span { color:var(--copper); }

/* ---- Article prose ---- */
.rf-article { display:flex; flex-direction:column; gap:18px; }
.rf-article__p { margin:0; font-size:16px; line-height:1.7; color:var(--text-body); }
.rf-article__h { margin:14px 0 0; font:700 26px/1.2 var(--font-display); color:var(--text-heading); }
.rf-article__q { margin:8px 0; padding:18px 24px; background:var(--surface-sunken); position:relative; font:600 18px/1.5 var(--font-body); color:var(--text-heading); }
.rf-article__q::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--copper); }
.rf-article__list, .rf-doc__sec ul { margin:4px 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.rf-article__list li, .rf-doc__sec li { display:flex; gap:10px; align-items:flex-start; font-size:16px; line-height:1.6; color:var(--text-body); }
.rf-article__list .rf-dbullet2, .rf-doc__sec .rf-dbullet2 { margin-top:8px; }

/* ---- Privacy doc ---- */
.rf-doc { display:flex; flex-direction:column; gap:36px; }
.rf-doc__sec { display:flex; flex-direction:column; gap:14px; }
.rf-doc__head { display:flex; align-items:center; gap:12px; }
.rf-doc__dia { flex:none; width:10px; height:10px; background:var(--copper); transform:rotate(45deg); }
.rf-doc__h { margin:0; font:700 24px/1.2 var(--font-display); color:var(--text-heading); }
.rf-doc__sec .rf-article__p { }

/* ---- SEO article (collapsible) ---- */
.rf-seo { background: var(--plaster); padding: 42px var(--container-pad); }
.rf-seo__wrap { max-width: 900px; margin: 0 auto; }
.rf-seo__clip { position: relative; overflow: hidden; max-height: 260px; transition: max-height .6s var(--ease-in-out); display: flex; flex-direction: column; gap: 14px; }
.rf-seo.is-open .rf-seo__clip { max-height: 4000px; }
.rf-seo__h1 { margin: 0; font: 700 clamp(24px,3vw,32px)/1.2 var(--font-display); letter-spacing: -0.3px; color: var(--text-heading); }
.rf-seo__h2 { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; font: 700 20px/1.3 var(--font-display); color: var(--text-heading); }
.rf-seo__dia { flex: none; width: 8px; height: 8px; background: var(--copper); transform: rotate(45deg); }
.rf-seo__p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.rf-seo__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(245,240,232,0), var(--plaster)); pointer-events: none; }
.rf-seo.is-open .rf-seo__fade { display: none; }
.rf-seo__toggle { display: flex; justify-content: center; margin-top: 8px; }
.rf-seo.is-open .rf-seo__toggle { margin-top: 24px; }
.rf-seo__caret { display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; margin-left: 4px; transition: transform var(--dur-base) var(--ease-out); }
.rf-seo.is-open .rf-seo__caret { transform: rotate(-135deg); margin-top: 3px; }

/* footer menu diamond bullets */
.rf-footer__col a:not(.big) { display: inline-flex; align-items: center; gap: 9px; }
.rf-footer__col a:not(.big)::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--copper); transform: rotate(45deg); }

.rf-carousel__actions { display: flex; flex-direction: row-reverse; align-items: center; gap: 16px; flex: none; }
@media (max-width: 560px){ .rf-carousel__actions { width: 100%; justify-content: space-between; } }

.rf-carousel__actions { gap: 4px; }

/* view-all button — SVG stroke = uniform border, hover fills like the arrows */
.rf-va { position: relative; height: 54px; display: inline-flex; align-items: center; padding: 0 42px; margin-left: -2px; text-decoration: none; cursor: pointer; }
.rf-va svg { position: absolute; inset: 0; overflow: visible; }
.rf-va svg polygon { fill: transparent; stroke: var(--copper); stroke-width: 1.5; transition: fill var(--dur-base) var(--ease-out); }
.rf-va > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--copper); transition: color var(--dur-base) var(--ease-out); }
.rf-va:hover svg polygon { fill: var(--copper); }
.rf-va:hover > span { color: var(--finish); }