/* ==========================================================================
   REVIEWS — "SEE THE WORK FOR YOURSELF" + "HAD WORK DONE HERE?"
   Created 2026-09-02. Reference (approved):
     Graphics/reviews-work-showcase-3d-redesign-reference.png

   SCOPE: every selector is under `.rev-work3d` or `.rev-feedback3d`, both of
   which exist only on reviews.html. This file is linked ONLY by reviews.html.
   No shared stylesheet is modified — `.work-link-card`, `.svc-more`,
   `.feedback-card` and `.eyebrow-rule` are shared classes, so each rule here
   is prefixed with the section scope and cannot reach another page.

   BOUNDARY: these two sections only. The approved hero above, the Verified
   Customer Reviews block, the trust strip, the header and the footer are not
   referenced here.
   ========================================================================== */

.rev-work3d,
.rev-feedback3d{
  --rw-cream-1:#FDF8F0;
  --rw-cream-2:#F8F0E3;
  --rw-cream-3:#F1E6D5;
  --rw-edge:#E1D3BC;
  --rw-screw:#B5A88F;
  --rw-ink:#141110;
}

/* --------------------------------------------------------------------------
   SECTION GROUND
   -------------------------------------------------------------------------- */
.rev-work3d{
  background:
    radial-gradient(110% 60% at 78% 0%, rgba(242,96,12,0.05) 0%, rgba(242,96,12,0) 62%),
    linear-gradient(180deg, #FBF6EE 0%, #F8F2E8 100%);
  padding:34px 0 10px;
}
.rev-work3d > .wrap{ max-width:1420px; }

/* --------------------------------------------------------------------------
   THE HOUSING
   -------------------------------------------------------------------------- */
.rev-work3d .rvw-housing{
  position:relative;
  padding:44px 40px 46px;
  border-radius:30px;
  border:1px solid var(--rw-edge);
  background:
    radial-gradient(80% 55% at 8% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, var(--rw-cream-1) 0%, var(--rw-cream-2) 52%, var(--rw-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 20px 44px rgba(23,20,18,0.13),
    0 44px 88px rgba(23,20,18,0.10);
}
/* illuminated recessed orange trim */
.rev-work3d .rvw-housing::before{
  content:"";
  position:absolute; inset:14px;
  border-radius:20px;
  border:2px solid rgba(242,96,12,0.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.7),
    0 0 16px rgba(242,96,12,0.26),
    inset 0 0 26px rgba(242,96,12,0.08);
  pointer-events:none;
  z-index:0;
}
/* four corner fasteners */
.rev-work3d .rvw-housing::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 30px 30px, var(--rw-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at calc(100% - 30px) 30px, var(--rw-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at 30px calc(100% - 30px), var(--rw-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at calc(100% - 30px) calc(100% - 30px), var(--rw-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px);
  pointer-events:none;
  z-index:0;
}
.rev-work3d .eyebrow-rule,
.rev-work3d .section-sub,
.rev-work3d .work-links-grid{ position:relative; z-index:1; }

/* --------------------------------------------------------------------------
   HEADING
   -------------------------------------------------------------------------- */
.rev-work3d .eyebrow-rule{ gap:22px; margin-bottom:8px; }
.rev-work3d .eyebrow-rule h2{
  font-family:var(--font-sans);
  font-size:2.3rem;                 /* 36.8px */
  font-weight:900; letter-spacing:0.005em;
  text-transform:uppercase;
  color:var(--rw-ink);
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 2px 4px rgba(23,20,18,0.10);
}
.rev-work3d .eyebrow-rule h2 .accent{ color:var(--red); }
.rev-work3d .eyebrow-rule .line{
  width:70px; height:5px; border-radius:3px;
  background:linear-gradient(90deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.85), 0 2px 6px rgba(210,20,27,0.30);
}
.rev-work3d .section-sub{
  font-size:1.075rem;               /* 17.2px */
  font-weight:800; letter-spacing:0.07em;
  color:var(--charcoal-soft);
  margin-bottom:34px;
}

/* --------------------------------------------------------------------------
   THE FOUR CONTROLS — each is one <a>, so the whole card stays a single
   target for pointer, keyboard and screen reader.
   -------------------------------------------------------------------------- */
.rev-work3d .work-links-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
}
.rev-work3d .work-link-card{
  display:flex; flex-direction:column;
  padding:24px 22px 0;
  border-radius:18px;
  border:1px solid var(--rw-edge);
  background:
    radial-gradient(80% 55% at 12% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(168deg, #FFFEFB 0%, #FAF4EA 55%, #F3EADB 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.98),
    inset 0 -3px 0 rgba(0,0,0,0.055),
    0 2px 4px rgba(23,20,18,0.07),
    0 12px 26px rgba(23,20,18,0.12);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
  overflow:hidden;
}
.rev-work3d .work-link-card:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.98),
    0 2px 4px rgba(23,20,18,0.08),
    0 22px 40px rgba(23,20,18,0.20);
}
.rev-work3d .work-link-card:active{ transform:translateY(-1px); }
.rev-work3d .work-link-card:focus-visible{
  outline:3px solid var(--orange); outline-offset:3px;
}

/* large red circular icon */
.rev-work3d .work-link-card .type-icon{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 0 16px;
  color:#FFFFFF;
  background:radial-gradient(circle at 32% 26%, #F0575E 0%, var(--red) 52%, var(--red-dark) 100%);
  border:3px solid var(--white);
  box-shadow:
    0 8px 18px rgba(165,15,21,0.32),
    inset 0 2px 4px rgba(255,255,255,0.5),
    inset 0 -4px 9px rgba(0,0,0,0.24);
}
.rev-work3d .work-link-card .type-icon svg{ width:28px; height:28px; }

.rev-work3d .work-link-card h3{
  font-family:var(--font-sans);
  font-size:1.35rem;                /* 21.6px */
  font-weight:900; text-transform:uppercase; letter-spacing:0.01em;
  line-height:1.2;
  color:var(--rw-ink);
  margin:0 0 12px;
}
.rev-work3d .work-link-card p{
  font-size:1.1rem;                 /* 17.6px */
  line-height:1.62;
  color:var(--charcoal);
  margin:0 0 22px;
  flex:1;
}

/* strong bottom action bar, recessed into the card */
.rev-work3d .work-link-card .svc-more{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 -22px; padding:16px 22px;
  font-family:var(--font-sans);
  font-size:1.1rem;                 /* 17.6px */
  font-weight:900; text-transform:uppercase; letter-spacing:0.005em;
  /* "Follow On Instagram" is the longest label; keeping it on one line is
     what keeps the four action bars the same height across the row. */
  white-space:nowrap;
  color:var(--red);
  border-top:1px solid rgba(181,168,143,0.5);
  background:linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(244,235,222,0.9) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95);
}
/* The arrow comes from the shared `.svc-more::after` in home.css — no second
   chevron is added here, or the bar renders "OPEN THE GALLERY → →" and the
   extra width wraps the longest label. It is only restyled and animated. */
.rev-work3d .work-link-card .svc-more::after{
  font-size:1.2rem; line-height:1;
  color:var(--orange-dark);
  transition:transform 0.18s ease;
  display:inline-block;
}
.rev-work3d .work-link-card:hover .svc-more::after{ transform:translateX(4px); }
.rev-work3d .work-link-card:hover .svc-more{ color:var(--red-dark); }

/* --------------------------------------------------------------------------
   "HAD WORK DONE HERE?" — same housing family, connected to the block above
   -------------------------------------------------------------------------- */
.rev-feedback3d{
  background:linear-gradient(180deg, #F8F2E8 0%, #F6EFE4 100%);
  padding:20px 0 40px;
}
.rev-feedback3d > .wrap{ max-width:1420px; }

.rev-feedback3d .feedback-card{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:26px;
  max-width:none;
  margin:0;
  padding:30px 38px;
  border-radius:26px;
  border:1px solid var(--rw-edge);
  background:
    radial-gradient(70% 60% at 10% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, var(--rw-cream-1) 0%, var(--rw-cream-2) 55%, var(--rw-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),
    0 3px 6px rgba(23,20,18,0.07),
    0 18px 38px rgba(23,20,18,0.12);
  text-align:left;
}
.rev-feedback3d .feedback-card::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:18px;
  border:2px solid rgba(242,96,12,0.45);
  box-shadow:0 0 0 1px rgba(255,255,255,0.7), 0 0 12px rgba(242,96,12,0.20);
  pointer-events:none;
}

.rev-feedback3d .feedback-card .type-icon{
  position:relative; z-index:1;
  width:64px; height:64px; border-radius:50%; margin:0; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#FFFFFF;
  background:radial-gradient(circle at 32% 26%, #F0575E 0%, var(--red) 52%, var(--red-dark) 100%);
  border:3px solid var(--white);
  box-shadow:
    0 8px 18px rgba(165,15,21,0.32),
    inset 0 2px 4px rgba(255,255,255,0.5),
    inset 0 -4px 9px rgba(0,0,0,0.24);
}
.rev-feedback3d .feedback-card .type-icon svg{ width:30px; height:30px; }

.rev-feedback3d .fb-body{ position:relative; z-index:1; }
.rev-feedback3d .feedback-card h2{
  font-family:var(--font-sans);
  font-size:2rem;                   /* 32px */
  font-weight:900; letter-spacing:-0.005em;
  color:var(--rw-ink);
  margin:0 0 8px;
  text-shadow:0 1px 0 rgba(255,255,255,0.9);
}
.rev-feedback3d .feedback-card p{
  font-size:1.1rem;                 /* 17.6px */
  line-height:1.66;
  color:var(--charcoal);
  margin:0;
}

/* dimensional Call / Text controls */
.rev-feedback3d .feedback-contact{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0;
}
.rev-feedback3d .feedback-contact a{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 24px;
  border-radius:14px;
  border:1px solid var(--rw-edge);
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(170deg, #FFFEFB 0%, #FAF3E8 55%, #F2E8D8 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.98),
    inset 0 -3px 0 rgba(0,0,0,0.055),
    0 2px 4px rgba(23,20,18,0.08),
    0 10px 20px rgba(23,20,18,0.12);
  font-family:var(--font-sans);
  font-size:1.16rem;                /* 18.6px */
  font-weight:900; letter-spacing:0.005em;
  color:var(--red);
  white-space:nowrap;
  transition:transform 0.16s ease, box-shadow 0.16s ease;
}
.rev-feedback3d .feedback-contact a:hover{
  transform:translateY(-2px);
  color:var(--red-dark);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.98),
    0 2px 4px rgba(23,20,18,0.08),
    0 16px 28px rgba(210,20,27,0.20);
}
.rev-feedback3d .feedback-contact a:active{
  transform:translateY(2px);
  box-shadow:inset 0 3px 8px rgba(0,0,0,0.16), 0 1px 2px rgba(23,20,18,0.10);
}
.rev-feedback3d .feedback-contact a:focus-visible{
  outline:3px solid var(--orange); outline-offset:3px;
}
.rev-feedback3d .fb-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  color:#FFFFFF;
  background:radial-gradient(circle at 32% 28%, #F0575E 0%, var(--red) 55%, var(--red-dark) 100%);
  border:2px solid var(--white);
  box-shadow:0 5px 12px rgba(165,15,21,0.30), inset 0 1px 2px rgba(255,255,255,0.5);
}
.rev-feedback3d .fb-ico svg{ width:17px; height:17px; }
/* the middot separator is decorative and redundant once the two controls are
   dimensional keys */
.rev-feedback3d .feedback-sep{ display:none; }

/* --------------------------------------------------------------------------
   RESPONSIVE — 4 across -> 2x2 -> 1 per row. Text sizes hold.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px){
  .rev-work3d .rvw-housing{ padding:38px 30px 40px; }
  .rev-work3d .work-links-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
  .rev-feedback3d .feedback-card{ padding:28px 30px; }
}

@media (max-width: 900px){
  .rev-feedback3d .feedback-card{
    grid-template-columns:auto minmax(0, 1fr);
    row-gap:20px;
  }
  .rev-feedback3d .feedback-contact{ grid-column:1 / -1; }
}

@media (max-width: 700px){
  .rev-work3d{ padding:22px 0 6px; }
  .rev-work3d .rvw-housing{ padding:30px 18px 32px; border-radius:24px; }
  .rev-work3d .rvw-housing::before{ inset:10px; border-radius:16px; }
  .rev-work3d .rvw-housing::after{
    background-image:
      radial-gradient(circle at 21px 21px, var(--rw-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 21px) 21px, var(--rw-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at 21px calc(100% - 21px), var(--rw-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 21px) calc(100% - 21px), var(--rw-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px);
  }
  .rev-work3d .eyebrow-rule{ gap:12px; }
  .rev-work3d .eyebrow-rule .line{ width:34px; }
  .rev-work3d .eyebrow-rule h2{ font-size:1.75rem; }
  .rev-work3d .work-links-grid{ grid-template-columns:1fr; }
  .rev-work3d .work-link-card{ padding:22px 18px 0; }
  .rev-work3d .work-link-card .svc-more{ margin:0 -18px; padding:15px 18px; }

  .rev-feedback3d{ padding:12px 0 30px; }
  .rev-feedback3d .feedback-card{
    grid-template-columns:1fr; text-align:center; gap:16px;
    padding:26px 18px; border-radius:20px;
  }
  .rev-feedback3d .feedback-card::before{ inset:8px; border-radius:14px; }
  .rev-feedback3d .feedback-card .type-icon{ margin:0 auto; }
  .rev-feedback3d .feedback-card h2{ font-size:1.7rem; }
  .rev-feedback3d .feedback-contact{ flex-direction:column; align-items:stretch; gap:11px; }
  .rev-feedback3d .feedback-contact a{ justify-content:center; }
}

@media (max-width: 380px){
  .rev-work3d .rvw-housing{ padding:26px 13px 28px; }
  .rev-work3d .rvw-housing::before{ inset:7px; }
  .rev-work3d .work-link-card{ padding:20px 15px 0; }
  .rev-work3d .work-link-card .svc-more{ margin:0 -15px; padding:14px 15px; font-size:1.02rem; }
  .rev-work3d .eyebrow-rule h2{ font-size:1.5rem; }
  .rev-feedback3d .feedback-contact a{ padding:14px 14px; font-size:1.08rem; }
}

@media (prefers-reduced-motion: reduce){
  .rev-work3d .work-link-card,
  .rev-work3d .work-link-card .rvw-chev,
  .rev-feedback3d .feedback-contact a{ transition:none; }
  .rev-work3d .work-link-card:hover,
  .rev-feedback3d .feedback-contact a:hover{ transform:none; }
  .rev-work3d .work-link-card:hover .rvw-chev{ transform:none; }
}