/* ==========================================================================
   REVIEWS — "VERIFIED CUSTOMER REVIEWS" SECTION
   Created 2026-09-02. References (approved):
     Graphics/reviews-verified-customer-reviews-3d-reference.png       (first)
     Graphics/reviews-verified-customer-reviews-5-stars-final.png      (final)

   SCOPE: every selector is under `.rev-vcr3d`, a class that exists on this
   one section of reviews.html and nowhere else. This file is linked ONLY by
   reviews.html and loads after pages.css, whose `.reviews-section` /
   `.reviews-note` rules are used by no other page but are left untouched.

   WHAT IS DELIBERATELY NOT BUILT
   ------------------------------
   The reference's statistics bar (4.9 average rating, 300+ happy customers,
   100% verified reviews), its three testimonial cards (named customers,
   vehicles, star ratings, portrait photographs), its Google branding and its
   "View all reviews on Google" control are ALL absent from this file.

   None of that exists in the project: there is no rating, no review count, no
   testimonial text, no customer name and no Google reviews URL anywhere in
   the sources. Building them would mean inventing them, which the owner's own
   instruction for this section forbids. The housing below is sized to take
   them the moment real, verified reviews are supplied.

   THE FIVE STARS: the owner approved them on 2026-09-02 as DECORATION in the
   final reference. They are drawn with clip-path, contain no text and no star
   glyph, and carry NO rating, review count or rating claim of any kind. Never
   attach a number, a count or "out of 5" to them.
   ========================================================================== */

.rev-vcr3d{
  --rv-cream-1:#FDF8F0;
  --rv-cream-2:#F8F0E3;
  --rv-cream-3:#F1E6D5;
  --rv-edge:#E1D3BC;
  --rv-screw:#B5A88F;
  --rv-ink:#141110;

  background:
    radial-gradient(120% 60% at 50% 0%, rgba(242,96,12,0.05) 0%, rgba(242,96,12,0) 62%),
    linear-gradient(180deg, #FBF6EE 0%, #F7F1E7 100%);
  padding:44px 0 40px;
}
.rev-vcr3d > .wrap{ max-width:1420px; }

/* --------------------------------------------------------------------------
   HOUSING
   -------------------------------------------------------------------------- */
/* The crest overhangs the top edge and the seal the bottom, so the section
   carries the clearance for both. */
.rev-vcr3d .rvv-housing{
  position:relative;
  margin:78px 0 62px;
  padding:76px 44px 62px;
  border-radius:32px;
  border:1px solid var(--rv-edge);
  text-align:center;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(158deg, var(--rv-cream-1) 0%, var(--rv-cream-2) 50%, var(--rv-cream-3) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -4px 0 rgba(0,0,0,0.06),
    inset 4px 0 0 rgba(255,255,255,0.5),
    inset -4px 0 0 rgba(0,0,0,0.04),
    0 3px 6px rgba(23,20,18,0.07),
    0 22px 48px rgba(23,20,18,0.14),
    0 48px 96px rgba(23,20,18,0.10);
}
/* recessed illuminated orange trim */
.rev-vcr3d .rvv-housing::before{
  content:"";
  position:absolute; inset:12px;
  border-radius:22px;
  border:2px solid rgba(242,96,12,0.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.7),
    0 0 18px rgba(242,96,12,0.28),
    inset 0 0 28px rgba(242,96,12,0.08);
  pointer-events:none; z-index:1;
}
/* metallic corner fasteners */
.rev-vcr3d .rvv-housing::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 30px 30px, var(--rv-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px),
    radial-gradient(circle at calc(100% - 30px) 30px, var(--rv-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px),
    radial-gradient(circle at 30px calc(100% - 30px), var(--rv-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px),
    radial-gradient(circle at calc(100% - 30px) calc(100% - 30px), var(--rv-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px);
  pointer-events:none; z-index:2;
}

.rev-vcr3d .rvv-inner{ position:relative; z-index:3; }

/* --------------------------------------------------------------------------
   CREST — the Sunroof King crown on a moulded disc
   Decorative. It carries no claim of any kind.
   -------------------------------------------------------------------------- */
.rev-vcr3d .rvv-crest{
  position:absolute; z-index:4;
  top:-74px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  width:156px; height:156px;
  border-radius:50%;
  color:var(--orange);
  background:radial-gradient(circle at 34% 26%, #FFFFFF 0%, #FDF8F0 52%, #EFE4D2 100%);
  border:1px solid var(--rv-edge);
  box-shadow:
    0 0 0 7px rgba(242,96,12,0.15),
    0 0 26px rgba(242,96,12,0.30),
    inset 0 3px 4px rgba(255,255,255,0.95),
    inset 0 -8px 16px rgba(23,20,18,0.14),
    0 14px 30px rgba(23,20,18,0.22);
}
.rev-vcr3d .rvv-crest svg{
  width:86px; height:86px;
  filter:drop-shadow(0 3px 4px rgba(166,64,6,0.45));
}

/* --------------------------------------------------------------------------
   HEADING
   Orange accent rules flanking five decorative gold stars, matching the
   approved final reference. The stars are ornament only — see the note on
   .rvv-stars below and the file header.
   -------------------------------------------------------------------------- */
.rev-vcr3d .rvv-orn{
  display:flex; align-items:center; justify-content:center; gap:26px;
  margin:0 0 24px;
}
.rev-vcr3d .rvv-orn::before,
.rev-vcr3d .rvv-orn::after{
  content:"";
  flex:1 1 auto; max-width:290px; height:2px; border-radius:2px;
}
.rev-vcr3d .rvv-orn::before{
  background:linear-gradient(90deg, rgba(242,96,12,0.10) 0%, var(--orange) 100%);
}
.rev-vcr3d .rvv-orn::after{
  background:linear-gradient(270deg, rgba(242,96,12,0.10) 0%, var(--orange) 100%);
}

/* ---- five decorative gold stars ----
   Drawn with clip-path, so they contain no text and no star glyph: the
   section's readable content stays exactly the approved sentence. They are
   ornament only and carry no rating, count or claim. */
.rev-vcr3d .rvv-stars{
  display:flex; align-items:center; gap:12px;
  flex:0 0 auto;
}
.rev-vcr3d .rvv-stars i{
  display:block;
  width:56px; height:54px;
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background:linear-gradient(168deg, #FFE9A8 0%, #FFCE55 26%, #F2A81F 56%, #C9760A 100%);
  filter:drop-shadow(0 4px 6px rgba(166,64,6,0.38));
}

.rev-vcr3d .rvv-housing h2{
  font-family:var(--font-sans);
  font-size:clamp(2.6rem, 4.7vw, 4.3rem);    /* ~68px at 1440 */
  font-weight:900; line-height:1.02;
  letter-spacing:-0.022em; text-transform:uppercase;
  color:var(--rv-ink);
  margin:0 0 10px;
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 4px 8px rgba(23,20,18,0.14);
}
.rev-vcr3d .rvv-housing h2 .accent{ color:var(--red); }

/* --------------------------------------------------------------------------
   RECESSED READOUT
   A moulded inset panel so the waiting state reads as a finished dashboard
   element rather than an empty box. The quote marks are decorative.
   -------------------------------------------------------------------------- */
.rev-vcr3d .rvv-readout{
  position:relative;
  max-width:1160px;
  margin:26px auto 0;
  padding:44px 132px 48px;
  border-radius:22px;
  border:1px solid var(--rv-edge);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(170deg, #FBF5EC 0%, #F3E9D9 100%);
  box-shadow:
    inset 0 3px 9px rgba(23,20,18,0.10),
    inset 0 -2px 0 rgba(255,255,255,0.85),
    0 1px 0 rgba(255,255,255,0.9);
}
.rev-vcr3d .rvv-q{
  position:absolute;
  font-family:var(--font-serif, Georgia, serif);
  font-size:9rem; font-weight:700; line-height:1;
  background:linear-gradient(170deg, #FFB35C 0%, var(--orange) 44%, #C9560A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 3px 4px rgba(166,64,6,0.28));
  user-select:none;
}
.rev-vcr3d .rvv-q--open{ left:26px; top:14px; }
.rev-vcr3d .rvv-q--close{ right:26px; bottom:-46px; }

.rev-vcr3d .rvv-note{
  position:relative; z-index:1;
  font-size:clamp(1.5rem, 2.35vw, 2.15rem);   /* ~34px at 1440 */
  font-weight:600;
  line-height:1.4;
  letter-spacing:-0.006em;
  color:#241F1C;
  margin:0 auto;
  max-width:41ch;
}

/* --------------------------------------------------------------------------
   SEAL — decorative shield/check beneath the readout
   -------------------------------------------------------------------------- */
.rev-vcr3d .rvv-seal{
  position:absolute; z-index:4;
  bottom:-48px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  width:96px; height:96px;
  border-radius:50%;
  color:var(--orange);
  background:radial-gradient(circle at 34% 26%, #FFFFFF 0%, #FDF8F0 54%, #EFE4D2 100%);
  border:1px solid var(--rv-edge);
  box-shadow:
    0 0 0 6px rgba(242,96,12,0.15),
    0 0 20px rgba(242,96,12,0.26),
    inset 0 2px 3px rgba(255,255,255,0.95),
    inset 0 -6px 12px rgba(23,20,18,0.12),
    0 10px 22px rgba(23,20,18,0.20);
}
.rev-vcr3d .rvv-seal svg{
  width:48px; height:48px;
  filter:drop-shadow(0 2px 3px rgba(166,64,6,0.40));
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   2026-09-02 responsive QA pass. The approved 3D language is preserved at
   every width — the crest and seal keep overhanging their edges, the five
   stars stay, and the readout stays recessed. Only the scale changes, and it
   changes proportionally: crest, seal, stars, quote marks, housing padding
   and readout padding all step down together so nothing clips, collides or
   drops below a readable size.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px){
  .rev-vcr3d .rvv-readout{ padding:40px 108px 42px; }
}

@media (max-width: 900px){
  .rev-vcr3d{ padding:34px 0 30px; }
  .rev-vcr3d .rvv-housing{ margin:64px 0 52px; padding:62px 28px 52px; }

  .rev-vcr3d .rvv-crest{ width:126px; height:126px; top:-60px; }
  .rev-vcr3d .rvv-crest svg{ width:68px; height:68px; }
  .rev-vcr3d .rvv-seal{ width:84px; height:84px; bottom:-42px; }
  .rev-vcr3d .rvv-seal svg{ width:42px; height:42px; }

  .rev-vcr3d .rvv-orn{ gap:18px; }
  .rev-vcr3d .rvv-orn::before,
  .rev-vcr3d .rvv-orn::after{ max-width:150px; }
  .rev-vcr3d .rvv-stars{ gap:9px; }
  .rev-vcr3d .rvv-stars i{ width:44px; height:42px; }

  .rev-vcr3d .rvv-readout{ padding:34px 88px 36px; }
  .rev-vcr3d .rvv-q{ font-size:6.2rem; }
  .rev-vcr3d .rvv-q--open{ left:16px; top:10px; }
  .rev-vcr3d .rvv-q--close{ right:16px; bottom:-32px; }
}

@media (max-width: 560px){
  .rev-vcr3d .rvv-housing{
    margin:50px 0 42px; padding:50px 16px 42px; border-radius:24px;
  }
  .rev-vcr3d .rvv-housing::before{ inset:9px; border-radius:16px; }
  .rev-vcr3d .rvv-housing::after{
    background-image:
      radial-gradient(circle at 21px 21px, var(--rv-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 21px) 21px, var(--rv-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at 21px calc(100% - 21px), var(--rv-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 21px) calc(100% - 21px), var(--rv-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px);
  }

  .rev-vcr3d .rvv-crest{ width:98px; height:98px; top:-46px; }
  .rev-vcr3d .rvv-crest svg{ width:52px; height:52px; }
  .rev-vcr3d .rvv-seal{ width:66px; height:66px; bottom:-32px; }
  .rev-vcr3d .rvv-seal svg{ width:33px; height:33px; }

  /* the flanking rules are dropped so the five stars keep the full width */
  .rev-vcr3d .rvv-orn{ gap:0; margin-bottom:18px; }
  .rev-vcr3d .rvv-orn::before,
  .rev-vcr3d .rvv-orn::after{ display:none; }
  .rev-vcr3d .rvv-stars{ gap:7px; }
  .rev-vcr3d .rvv-stars i{ width:36px; height:35px; }

  .rev-vcr3d .rvv-readout{ padding:26px 40px 28px; border-radius:16px; }
  .rev-vcr3d .rvv-note{ max-width:none; }
  .rev-vcr3d .rvv-q{ font-size:3rem; }
  .rev-vcr3d .rvv-q--open{ left:8px; top:6px; }
  .rev-vcr3d .rvv-q--close{ right:8px; bottom:-12px; }
}

@media (max-width: 380px){
  .rev-vcr3d .rvv-housing{ padding:46px 11px 40px; }
  .rev-vcr3d .rvv-housing::before{ inset:7px; }
  .rev-vcr3d .rvv-stars{ gap:5px; }
  .rev-vcr3d .rvv-stars i{ width:31px; height:30px; }
  .rev-vcr3d .rvv-readout{ padding:24px 34px 26px; }
  .rev-vcr3d .rvv-q{ font-size:2.6rem; }
  .rev-vcr3d .rvv-q--open{ left:5px; top:4px; }
  .rev-vcr3d .rvv-q--close{ right:5px; bottom:-10px; }
}