/* =========================================================
   ReplicaFactory Content System
   Shared CSS — V2.3

   Guides / Trust / Policy / FAQ / Knowledge Pages

   V2.3 UPDATES
   ---------------------------------------------------------
   1. Added reusable Hero Media component.
   2. Added reusable QC / Video Media component.
   3. Contact CTA updated to deep green.
   4. Related cards automatically support 2 or 3 columns.
   5. Added secondary info-grid spacing utility.

   RULES
   ---------------------------------------------------------
   1. Install this CSS once site-wide.
   2. Article HTML uses .rf-content as wrapper.
   3. Website generates H1 automatically.
   4. Article content starts from H2.
   5. Technical sections stay left-aligned.
   6. Showcase / related / CTA sections may be centered.
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.rf-content {
  --rf-ink: #151515;
  --rf-text: #2a2a2a;
  --rf-muted: #686868;
  --rf-line: #e5e2dc;
  --rf-soft: #f7f6f3;
  --rf-white: #ffffff;

  --rf-gold: #b18a4b;
  --rf-gold-dark: #8d6b35;
  --rf-gold-soft: #f5efe3;

  --rf-asian: #382a23;
  --rf-asian-accent: #d5aa65;

  --rf-swiss: #173942;
  --rf-swiss-accent: #8fc1c5;

  --rf-clone: #17191b;
  --rf-clone-accent: #c8a766;

  --rf-green: #004b3b;
  --rf-green-dark: #00382d;

  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 80px;

  color: var(--rf-text);

  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}


.rf-content *,
.rf-content *::before,
.rf-content *::after {
  box-sizing: border-box;
}


.rf-content h2,
.rf-content h3,
.rf-content h4 {
  color: var(--rf-ink);
  line-height: 1.18;
  letter-spacing: -0.025em;
}


.rf-content h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
}


.rf-content h3 {
  margin: 0 0 12px;
  font-size: 23px;
  font-weight: 700;
}


.rf-content h4 {
  margin: 0 0 7px;
  font-size: 16px;
  font-weight: 700;
}


.rf-content p {
  margin: 0 0 18px;
}


.rf-content strong {
  color: var(--rf-ink);
  font-weight: 700;
}


.rf-content a {
  color: inherit;
  text-underline-offset: 4px;
}


.rf-content .rf-link {
  color: var(--rf-ink);
  font-weight: 700;

  text-decoration-line: underline;
  text-decoration-color: var(--rf-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;

  transition:
    color .2s ease,
    text-decoration-thickness .2s ease;
}


.rf-content .rf-link:hover {
  color: var(--rf-gold-dark);
  text-decoration-thickness: 2px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.rf-section {
  padding: 68px 0;
  border-bottom: 1px solid var(--rf-line);
}


.rf-section:last-child {
  border-bottom: 0;
}


.rf-narrow {
  max-width: 820px;
}


.rf-section-head {
  max-width: 780px;
  margin-bottom: 34px;
}


.rf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 13px;

  color: var(--rf-gold);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}


.rf-eyebrow::before {
  content: "";

  width: 22px;
  height: 2px;

  background: currentColor;
}


.rf-lead {
  max-width: 790px;

  margin-bottom: 0 !important;

  color: var(--rf-muted);

  font-size: 19px;
  line-height: 1.65;
}


.rf-lead + .rf-lead {
  margin-top: 16px !important;
}


.rf-section-head.rf-section-head-center {
  margin-left: auto;
  margin-right: auto;

  text-align: center;
}


.rf-section-head.rf-section-head-center .rf-eyebrow {
  justify-content: center;
}


.rf-section-head.rf-section-head-center .rf-eyebrow::before {
  display: none;
}


.rf-section-head.rf-section-head-center .rf-eyebrow::after {
  content: "";

  width: 22px;
  height: 2px;

  background: currentColor;
}


/* =========================================================
   INTRO
   ========================================================= */

.rf-intro {
  position: relative;

  padding: 54px 0 58px;

  border-bottom: 1px solid var(--rf-line);
}


.rf-intro::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -1px;

  width: 82px;
  height: 3px;

  background: var(--rf-gold);
}


.rf-intro h2 {
  max-width: 820px;

  font-size: clamp(32px, 4.5vw, 50px);
}


.rf-intro .rf-lead {
  max-width: 800px;
}


/* =========================================================
   HERO MEDIA
   ========================================================= */

.rf-hero-media {
  position: relative;

  overflow: hidden;

  margin: 38px 0 0;

  border: 1px solid var(--rf-line);
  border-radius: 14px;

  background: #111111;

  box-shadow:
    0 14px 38px rgba(0, 0, 0, .08);
}


.rf-hero-media img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 2.5 / 1;
  object-fit: cover;
}


.rf-hero-media figcaption {
  position: relative;

  margin: 0;
  padding: 14px 18px;

  border-top: 1px solid var(--rf-line);

  background: #ffffff;
  color: var(--rf-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   QUALITY TIER CARDS
   ========================================================= */

.rf-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}


.rf-tier-card {
  position: relative;

  overflow: hidden;

  min-height: 315px;
  padding: 30px;

  border-radius: 12px;

  color: #ffffff;

  box-shadow:
    0 14px 36px rgba(0, 0, 0, .08);
}


.rf-tier-card::after {
  content: "";

  position: absolute;
  z-index: 0;

  width: 145px;
  height: 145px;

  right: -55px;
  top: -55px;

  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
}


.rf-tier-asian {
  background:
    linear-gradient(
      145deg,
      #2d211c 0%,
      var(--rf-asian) 100%
    );
}


.rf-tier-swiss {
  background:
    linear-gradient(
      145deg,
      #102e35 0%,
      var(--rf-swiss) 100%
    );
}


.rf-tier-clone {
  background:
    linear-gradient(
      145deg,
      #101112 0%,
      #25221c 100%
    );
}


.rf-tier-badge {
  position: relative;
  z-index: 1;

  display: inline-block;

  margin-bottom: 24px;
  padding: 6px 10px;

  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;

  background: rgba(255, 255, 255, .06);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}


.rf-tier-asian .rf-tier-badge {
  color: var(--rf-asian-accent);
}


.rf-tier-swiss .rf-tier-badge {
  color: var(--rf-swiss-accent);
}


.rf-tier-clone .rf-tier-badge {
  color: var(--rf-clone-accent);
}


.rf-tier-card h3 {
  position: relative;
  z-index: 1;

  margin-bottom: 8px;

  color: #ffffff;

  font-size: 28px;
}


.rf-tier-price {
  position: relative;
  z-index: 1;

  margin-bottom: 22px;

  color: rgba(255, 255, 255, .72);

  font-size: 14px;
}


.rf-tier-specs {
  position: relative;
  z-index: 1;

  margin: 0;
  padding: 0;

  list-style: none;
}


.rf-tier-specs li {
  padding: 8px 0;

  border-top: 1px solid rgba(255, 255, 255, .12);

  color: rgba(255, 255, 255, .87);

  font-size: 14px;
}


.rf-tier-specs li strong {
  color: #ffffff;
}


/* =========================================================
   TABLES
   ========================================================= */

.rf-table-wrap {
  width: 100%;

  overflow-x: auto;

  margin: 28px 0;

  border: 1px solid #dedbd5;
  border-radius: 12px;

  background: #ffffff;

  box-shadow:
    0 8px 28px rgba(0, 0, 0, .045);

  -webkit-overflow-scrolling: touch;
}


.rf-table {
  width: 100%;
  min-width: 760px;

  border-collapse: collapse;

  background: #ffffff;
}


.rf-table th,
.rf-table td {
  padding: 16px 18px;

  border-right: 1px solid #e8e5df;
  border-bottom: 1px solid #e8e5df;

  text-align: left;
  vertical-align: top;
}


.rf-table th:last-child,
.rf-table td:last-child {
  border-right: 0;
}


.rf-table tr:last-child td {
  border-bottom: 0;
}


.rf-table thead th {
  background: #17191a;
  color: #ffffff;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}


.rf-table thead th:first-child {
  border-radius: 11px 0 0 0;
}


.rf-table thead th:last-child {
  border-radius: 0 11px 0 0;
}


.rf-table tbody td:first-child {
  width: 20%;

  background: #faf9f7;

  color: var(--rf-ink);
  font-weight: 700;
}


.rf-table tbody tr:hover td {
  background-color: #fbfaf7;
}


.rf-table tbody tr:hover td:first-child {
  background-color: #f5f2ec;
}


/* =========================================================
   TIER DETAIL BANNERS
   ========================================================= */

.rf-tier-detail {
  margin: 42px 0 0;
}


.rf-tier-banner {
  position: relative;

  overflow: hidden;

  padding: 38px 40px;

  border-radius: 14px;

  color: #ffffff;
}


.rf-tier-banner::after {
  content: "";

  position: absolute;

  width: 170px;
  height: 170px;

  right: -30px;
  top: -70px;

  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
}


.rf-tier-banner.asian {
  background:
    linear-gradient(
      135deg,
      #2b201b,
      #49362b
    );
}


.rf-tier-banner.swiss {
  background:
    linear-gradient(
      135deg,
      #123039,
      #27515a
    );
}


.rf-tier-banner.clone {
  background:
    linear-gradient(
      135deg,
      #111315,
      #30291e
    );
}


.rf-tier-banner .rf-kicker {
  position: relative;
  z-index: 1;

  display: block;

  margin-bottom: 10px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}


.rf-tier-banner.asian .rf-kicker {
  color: var(--rf-asian-accent);
}


.rf-tier-banner.swiss .rf-kicker {
  color: var(--rf-swiss-accent);
}


.rf-tier-banner.clone .rf-kicker {
  color: var(--rf-clone-accent);
}


.rf-tier-banner h2 {
  position: relative;
  z-index: 1;

  max-width: 760px;

  margin-bottom: 12px;

  color: #ffffff;

  font-size: clamp(27px, 3.4vw, 38px);
}


.rf-tier-banner p {
  position: relative;
  z-index: 1;

  max-width: 760px;

  margin: 0;

  color: rgba(255, 255, 255, .78);
}


/* =========================================================
   FEATURE PANELS
   ========================================================= */

.rf-feature-panel {
  margin-top: 16px;
  padding: 30px;

  border: 1px solid var(--rf-line);
  border-radius: 12px;

  background: #ffffff;

  box-shadow:
    0 7px 24px rgba(0, 0, 0, .035);
}


.rf-feature-panel > h3 {
  margin-bottom: 22px;
}


.rf-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}


.rf-mini-card {
  position: relative;

  min-height: 125px;
  padding: 20px;

  border: 1px solid var(--rf-line);
  border-radius: 9px;

  background: #ffffff;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.rf-mini-card:hover {
  transform: translateY(-2px);

  border-color: #d7c9ae;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, .055);
}


.rf-mini-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 20px;

  width: 34px;
  height: 3px;

  background: var(--rf-gold);
}


.rf-mini-card h4 {
  padding-top: 7px;
}


.rf-mini-card p {
  margin: 0;

  color: var(--rf-muted);

  font-size: 13px;
  line-height: 1.6;
}


/* =========================================================
   WHO / CHECK LIST
   ========================================================= */

.rf-who {
  margin-top: 28px;
  padding-top: 25px;

  border-top: 1px solid var(--rf-line);
}


.rf-who h3:not(:first-child) {
  margin-top: 28px;
}


.rf-check-list {
  margin: 12px 0 0;
  padding: 0;

  list-style: none;
}


.rf-check-list li {
  position: relative;

  margin: 9px 0;
  padding-left: 27px;
}


.rf-check-list li::before {
  content: "✓";

  position: absolute;

  left: 0;
  top: 0;

  color: var(--rf-gold);

  font-weight: 800;
}


/* =========================================================
   INFO CARDS
   ========================================================= */

.rf-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}


.rf-info-grid-secondary {
  margin-top: 16px;
}


.rf-info-card {
  position: relative;

  overflow: hidden;

  padding: 27px;

  border: 1px solid var(--rf-line);
  border-radius: 11px;

  background: var(--rf-soft);
}


.rf-info-card::after {
  content: "";

  position: absolute;

  width: 90px;
  height: 90px;

  right: -45px;
  top: -45px;

  border: 1px solid rgba(177, 138, 75, .15);
  border-radius: 50%;
}


.rf-info-number {
  position: relative;
  z-index: 1;

  display: block;

  margin-bottom: 18px;

  color: var(--rf-gold);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}


.rf-info-card h3 {
  position: relative;
  z-index: 1;

  font-size: 20px;
}


.rf-info-card p {
  position: relative;
  z-index: 1;

  margin: 0;

  color: var(--rf-muted);

  font-size: 14px;
}


/* =========================================================
   QC / VIDEO MEDIA
   ========================================================= */

.rf-qc-media {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .85fr);

  overflow: hidden;

  margin: 8px 0 34px;

  border: 1px solid var(--rf-line);
  border-radius: 14px;

  background: #ffffff;

  box-shadow:
    0 12px 34px rgba(0, 0, 0, .06);
}


.rf-video-frame {
  position: relative;

  overflow: hidden;

  min-width: 0;

  background: #0d0f0f;
}


.rf-video-frame video {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 360px;

  object-fit: cover;

  background: #0d0f0f;
}


.rf-qc-media figcaption {
  display: flex;
  flex-direction: column;
  justify-content: center;

  margin: 0;
  padding: 34px 30px;

  background: var(--rf-soft);
}


.rf-media-label {
  display: block;

  margin-bottom: 13px;

  color: var(--rf-gold);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}


.rf-qc-media figcaption strong {
  display: block;

  margin-bottom: 12px;

  color: var(--rf-ink);

  font-size: 21px;
  line-height: 1.3;
}


.rf-qc-media figcaption p {
  margin: 0;

  color: var(--rf-muted);

  font-size: 14px;
  line-height: 1.65;
}


/* =========================================================
   NOTES
   ========================================================= */

.rf-note {
  position: relative;

  margin: 28px 0;
  padding: 24px 26px 24px 30px;

  border: 1px solid #e7dfcf;
  border-left: 4px solid var(--rf-gold);
  border-radius: 0 9px 9px 0;

  background: var(--rf-gold-soft);
}


.rf-note p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   WARRANTY
   ========================================================= */

.rf-warranty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  overflow: hidden;

  margin: 28px 0;

  border: 1px solid var(--rf-line);
  border-radius: 12px;
}


.rf-warranty-item {
  padding: 28px;

  text-align: center;

  background: #ffffff;

  border-right: 1px solid var(--rf-line);
}


.rf-warranty-item:last-child {
  border-right: 0;
}


.rf-warranty-item span {
  display: block;

  margin-bottom: 5px;

  color: var(--rf-muted);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}


.rf-warranty-item strong {
  display: block;

  color: var(--rf-ink);

  font-size: 27px;
}


/* =========================================================
   FAQ
   ========================================================= */

.rf-faq {
  max-width: 920px;

  border-top: 1px solid var(--rf-line);
}


.rf-faq details {
  border-bottom: 1px solid var(--rf-line);
}


.rf-faq summary {
  position: relative;

  padding: 23px 50px 23px 0;

  cursor: pointer;

  list-style: none;

  color: var(--rf-ink);

  font-size: 17px;
  font-weight: 700;
}


.rf-faq summary::-webkit-details-marker {
  display: none;
}


.rf-faq summary::after {
  content: "+";

  position: absolute;

  right: 5px;
  top: 17px;

  width: 32px;
  height: 32px;

  border: 1px solid var(--rf-line);
  border-radius: 50%;

  color: var(--rf-gold);

  text-align: center;

  font-size: 22px;
  font-weight: 400;
  line-height: 29px;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}


.rf-faq details[open] summary::after {
  content: "−";

  background: var(--rf-ink);

  border-color: var(--rf-ink);

  color: #ffffff;
}


.rf-faq-answer {
  max-width: 800px;

  padding: 0 45px 24px 0;

  color: var(--rf-muted);
}


.rf-faq-answer p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   RELATED / CONTINUE READING
   ========================================================= */

.rf-related-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 280px), 1fr)
    );

  gap: 16px;
}


.rf-related-card {
  position: relative;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  min-height: 225px;
  padding: 28px;

  border: 1px solid var(--rf-line);
  border-radius: 12px;

  background: #ffffff;

  color: inherit !important;
  text-decoration: none !important;

  box-shadow:
    0 5px 18px rgba(0, 0, 0, .025);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.rf-related-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 3px;

  background: var(--rf-gold);
}


.rf-related-card::after {
  content: "";

  position: absolute;

  width: 110px;
  height: 110px;

  right: -55px;
  top: -55px;

  border: 1px solid rgba(177, 138, 75, .16);
  border-radius: 50%;
}


.rf-related-card:hover {
  transform: translateY(-4px);

  border-color: #d4c29d;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, .07);
}


.rf-related-label {
  position: relative;
  z-index: 1;

  display: block;

  margin-bottom: 18px;

  color: var(--rf-gold);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}


.rf-related-card h3 {
  position: relative;
  z-index: 1;

  margin-bottom: 10px;

  font-size: 21px;
}


.rf-related-card p {
  position: relative;
  z-index: 1;

  margin: 0 0 20px;

  color: var(--rf-muted);

  font-size: 14px;
  line-height: 1.65;
}


.rf-related-arrow {
  position: relative;
  z-index: 1;

  display: inline-block;

  margin-top: auto;

  color: var(--rf-ink);

  font-size: 13px;
  font-weight: 800;
}


.rf-related-arrow::after {
  content: " →";

  color: var(--rf-gold);

  font-size: 16px;

  transition:
    margin-left .2s ease;
}


.rf-related-card:hover .rf-related-arrow::after {
  margin-left: 4px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.rf-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 27px;
}


.rf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 49px;

  padding: 12px 23px;

  border: 1px solid var(--rf-ink);
  border-radius: 6px;

  background: var(--rf-ink);

  color: #ffffff !important;

  font-size: 14px;
  font-weight: 700;

  text-decoration: none !important;

  transition:
    transform .2s ease,
    opacity .2s ease,
    background .2s ease;
}


.rf-btn:hover {
  transform: translateY(-1px);

  opacity: .88;
}


.rf-btn-outline {
  background: transparent;

  color: var(--rf-ink) !important;
}


/* =========================================================
   CONTACT CTA — DEEP GREEN
   ========================================================= */

.rf-contact {
  position: relative;

  overflow: hidden;

  margin-top: 68px;
  padding: 50px 46px;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #003b2f 0%,
      #00513f 55%,
      #00382d 100%
    );

  color: #ffffff;

  text-align: center;

  box-shadow:
    0 16px 40px rgba(0, 59, 47, .12);
}


.rf-contact::after {
  content: "";

  position: absolute;

  width: 240px;
  height: 240px;

  right: -70px;
  top: -100px;

  border: 1px solid rgba(200, 167, 102, .28);
  border-radius: 50%;
}


.rf-contact .rf-eyebrow {
  position: relative;
  z-index: 1;

  justify-content: center;

  color: var(--rf-gold);
}


.rf-contact .rf-eyebrow::before {
  display: none;
}


.rf-contact .rf-eyebrow::after {
  content: "";

  width: 22px;
  height: 2px;

  background: currentColor;
}


.rf-contact h2 {
  position: relative;
  z-index: 1;

  max-width: 720px;

  margin-left: auto;
  margin-right: auto;

  color: #ffffff;
}


.rf-contact p {
  position: relative;
  z-index: 1;

  max-width: 690px;

  margin-left: auto;
  margin-right: auto;

  color: rgba(255, 255, 255, .76);
}


.rf-contact .rf-actions {
  position: relative;
  z-index: 1;

  justify-content: center;
}


.rf-contact .rf-btn {
  border-color: #ffffff;

  background: #ffffff;

  color: #111111 !important;
}


.rf-contact .rf-btn-outline {
  background: transparent;

  color: #ffffff !important;
}


.rf-contact .rf-btn-outline:hover {
  background: rgba(255, 255, 255, .08);
}


/* =========================================================
   UTILITIES
   ========================================================= */

.rf-small {
  color: var(--rf-muted);

  font-size: 13px;
}


.rf-center {
  text-align: center;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 850px) {

  .rf-content {
    padding: 10px 18px 55px;

    font-size: 15px;
  }


  .rf-intro {
    padding: 38px 0 42px;
  }


  .rf-section {
    padding: 48px 0;
  }


  .rf-tier-grid,
  .rf-info-grid,
  .rf-warranty-grid {
    grid-template-columns: 1fr;
  }


  .rf-tier-card {
    min-height: auto;
  }


  .rf-feature-grid {
    grid-template-columns: 1fr;
  }


  .rf-tier-banner {
    padding: 30px 24px;
  }


  .rf-feature-panel {
    padding: 22px;
  }


  .rf-warranty-item {
    border-right: 0;
    border-bottom: 1px solid var(--rf-line);
  }


  .rf-warranty-item:last-child {
    border-bottom: 0;
  }


  .rf-related-card {
    min-height: auto;
  }


  .rf-hero-media img {
    aspect-ratio: 16 / 8;
  }


  .rf-qc-media {
    grid-template-columns: 1fr;
  }


  .rf-video-frame video {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }


  .rf-qc-media figcaption {
    padding: 25px 23px;
  }


  .rf-contact {
    padding: 34px 24px;
  }


  .rf-actions {
    flex-direction: column;
  }


  .rf-btn {
    width: 100%;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

  .rf-content {
    padding-left: 15px;
    padding-right: 15px;
  }


  .rf-content h2 {
    font-size: 28px;
  }


  .rf-intro h2 {
    font-size: 32px;
  }


  .rf-tier-card {
    padding: 24px 21px;
  }


  .rf-tier-card h3 {
    font-size: 25px;
  }


  .rf-tier-banner {
    padding: 27px 21px;
  }


  .rf-feature-panel {
    padding: 20px 17px;
  }


  .rf-mini-card {
    min-height: auto;
  }


  .rf-table th,
  .rf-table td {
    padding: 13px 14px;
  }


  .rf-hero-media {
    margin-top: 30px;

    border-radius: 10px;
  }


  .rf-hero-media img {
    aspect-ratio: 4 / 3;
  }


  .rf-hero-media figcaption {
    padding: 12px 14px;
  }


  .rf-qc-media {
    border-radius: 10px;
  }


  .rf-video-frame video {
    aspect-ratio: 16 / 10;
  }


  .rf-qc-media figcaption {
    padding: 22px 19px;
  }


  .rf-qc-media figcaption strong {
    font-size: 19px;
  }


  .rf-contact {
    padding: 30px 21px;
  }

}

/* =========================================================
   QUALITY TIERS HERO IMAGE
   Show the complete 16:9 source image without cropping
   ========================================================= */

.rf-quality-tiers-hero img {
  display: block;
  width: 100%;
  height: auto;

  aspect-ratio: auto !important;

  object-fit: contain;
  object-position: center;
}

.rf-feature-image {
  overflow: hidden;
  margin: 28px 0 40px;

  border: 1px solid var(--rf-line);
  border-radius: 14px;

  background: #ffffff;

  box-shadow:
    0 12px 34px rgba(0, 0, 0, .06);
}

.rf-feature-image img {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 14px 14px 0 0;
}

.rf-feature-image figcaption {
  margin: 0;
  padding: 13px 18px;

  border-top: 1px solid var(--rf-line);

  background: #ffffff;
  color: var(--rf-muted);

  font-size: 12px;
  line-height: 1.55;
}

.rf-material-gallery {
  margin-top: 38px;
}

.rf-material-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.rf-material-gallery-item {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--rf-line);
  background: #ffffff;
}

.rf-material-gallery-item img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.rf-material-gallery-caption {
  margin-top: 14px;
  color: var(--rf-muted);
  font-size: 13px;
  line-height: 1.6;
}


/* Ceramic two-image layout */

.rf-material-gallery-two {
  grid-template-columns: repeat(2, 1fr);
}


@media (max-width: 900px) {

  .rf-material-gallery-grid {
    grid-template-columns: 1fr;
  }

  .rf-material-gallery-item img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

}