/* ==========================================================================
   FAQ HERO — 3D molded dashboard console
   Created 2026-09-02. Reference (approved):
     Graphics/faq-hero-3d-redesign-reference.png

   SCOPE: every selector is under `.faq-hero3d`, which appears on the first
   section of faq.html and nowhere else. This file is linked ONLY by faq.html.
   No shared stylesheet is modified, so Vehicle Makes, Reviews, Services, Ford,
   Mercedes, the homepage and the shared header/footer are untouched.

   BOUNDARY: hero only. "General & Estimates" and every FAQ accordion below it
   are not referenced here.

   Same family as the frozen Vehicle Makes hero: warm cream ground, molded
   bevelled perimeter, recessed illuminated orange trim, corner fasteners,
   layered depth, bold black type with controlled red/orange highlights.
   ========================================================================== */

.faq-hero3d{
  --fq-cream-1:#FDF8F0;
  --fq-cream-2:#F8F0E3;
  --fq-cream-3:#F1E6D5;
  --fq-edge:#E1D3BC;
  --fq-screw:#B5A88F;
  --fq-ink:#141110;

  position:relative;
  background:
    radial-gradient(120% 70% at 80% 0%, rgba(242,96,12,0.06) 0%, rgba(242,96,12,0) 60%),
    linear-gradient(180deg, #FDFAF4 0%, #FAF4EA 100%);
  padding:26px 0 34px;
  border-bottom:0;
}
.faq-hero3d > .wrap{ max-width:1420px; }

/* --------------------------------------------------------------------------
   SHARED HOUSING SHELL — used by all three consoles
   -------------------------------------------------------------------------- */
.faq-hero3d .fqh-housing,
.faq-hero3d .fqh-strip,
.faq-hero3d .fqh-info{
  position:relative;
  border-radius:28px;
  border:1px solid var(--fq-edge);
  background:
    radial-gradient(80% 60% at 6% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, var(--fq-cream-1) 0%, var(--fq-cream-2) 52%, var(--fq-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);
}
/* recessed illuminated orange trim */
.faq-hero3d .fqh-housing::before,
.faq-hero3d .fqh-strip::before,
.faq-hero3d .fqh-info::before{
  content:"";
  position:absolute; inset:13px;
  border-radius:18px;
  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:3;
}
/* metallic corner fasteners */
.faq-hero3d .fqh-housing::after,
.faq-hero3d .fqh-strip::after,
.faq-hero3d .fqh-info::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 28px 28px, var(--fq-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at calc(100% - 28px) 28px, var(--fq-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at 28px calc(100% - 28px), var(--fq-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at calc(100% - 28px) calc(100% - 28px), var(--fq-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px);
  pointer-events:none;
  z-index:4;
}

/* --------------------------------------------------------------------------
   CONSOLE 1 — copy + owner portrait
   -------------------------------------------------------------------------- */
/* 2026-09-02 correction — proportions brought back to the approved reference.
   The housing is already as wide as the viewport allows at 1440 (1377px of a
   1425px client area), so the drift was vertical: at 1.06fr/1fr with 44px
   padding the square portrait forced a 691px-tall housing, giving a 1.99:1
   block instead of the reference's wide, shallow console. Widening the copy
   column and trimming the padding takes the portrait to ~555px and the
   housing to ~2.3:1, without cropping the owner photograph — its caption bar
   runs along the bottom edge, so a landscape crop would cut it. */
.faq-hero3d .fqh-housing{
  display:grid;
  grid-template-columns:minmax(0, 1.32fr) minmax(0, 1fr);
  gap:42px;
  align-items:center;
  padding:30px 34px 32px;
}

.faq-hero3d .fqh-copy{ position:relative; z-index:2; }

/* breadcrumb reads as a small recessed key, as in the reference */
.faq-hero3d .breadcrumb{
  display:inline-flex; align-items:center; gap:10px;
  font-size:1.05rem; font-weight:800;
  margin-bottom:24px;
  padding:9px 18px;
  border-radius:999px;
  border:1px solid var(--fq-edge);
  background:linear-gradient(180deg, #FFFFFF 0%, #F7F0E5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 1px 2px rgba(23,20,18,0.07),
    0 6px 14px rgba(23,20,18,0.09);
}
.faq-hero3d .breadcrumb .current{ color:var(--red); }

.faq-hero3d h1{
  font-family:var(--font-sans);
  font-size:clamp(3.2rem, 4.4vw, 4.05rem);   /* ~65px at 1440 */
  font-weight:900; line-height:1.02; letter-spacing:-0.025em;
  color:var(--fq-ink);
  max-width:none;
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 3px 6px rgba(23,20,18,0.12);
}
/* presentational only — the H1 text is unchanged */
.faq-hero3d .fqh-h1-accent{ display:block; color:var(--red); }

.faq-hero3d .page-hero-accent{
  width:96px; height:7px; margin:22px 0 24px; border-radius:4px;
  background:linear-gradient(90deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.85), 0 3px 8px rgba(210,20,27,0.32);
}

/* supporting heading — 26px bold */
.faq-hero3d .lede{
  font-family:var(--font-sans);
  font-size:1.625rem; font-weight:800;
  line-height:1.28; letter-spacing:-0.005em;
  color:var(--fq-ink);
  max-width:none;
  margin:0 0 20px;
  text-shadow:0 1px 0 rgba(255,255,255,0.85);
}

/* main paragraph — 20px, generous line-height, strong contrast */
.faq-hero3d .fqh-copy p:not(.lede){
  font-size:1.25rem; line-height:1.66;
  color:var(--charcoal);
  max-width:620px;
  margin:0;
}
.faq-hero3d .fqh-copy p a{
  color:var(--red); font-weight:800;
  text-decoration:underline; text-underline-offset:3px;
}
.faq-hero3d .fqh-copy p a:hover{ color:var(--red-dark); }

/* Recessed image housing around the approved owner portrait. The thin bezel
   reads as part of the console rather than a floating card — the photograph
   is integrated, not inset in a wide cream mat. */
.faq-hero3d .fqh-portrait{
  position:relative; z-index:2;
  border-radius:18px;
  padding:7px;
  border:1px solid var(--fq-edge);
  background:linear-gradient(160deg, #FFFFFF 0%, #F6EFE3 100%);
  box-shadow:
    inset 0 2px 6px rgba(23,20,18,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.9),
    0 2px 4px rgba(23,20,18,0.07),
    0 14px 30px rgba(23,20,18,0.14);
}
.faq-hero3d .fqh-portrait img{
  display:block; width:100%; height:auto;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(23,20,18,0.20);
}

/* --------------------------------------------------------------------------
   CONSOLE 2 — photographic strip
   -------------------------------------------------------------------------- */
/* Four panels with the reference's slanted dividers. The skew is applied to
   the panel and cancelled on the image, so the photographs stay upright and
   undistorted; the panels overhang slightly and are clipped by the strip so
   the outer edges stay square against the housing. */
/* The strip previously used 13px of padding, exactly where the orange trim
   sits, so the photographs butted against the trim and it read as a thin
   outline round a narrow band. Padding now clears the trim, so the console
   frames the photographs the same way the housing above frames its content. */
.faq-hero3d .fqh-strip{
  margin-top:22px;
  padding:26px;
  overflow:hidden;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
}
.faq-hero3d .fqh-panel{
  position:relative;
  overflow:hidden;
  height:462px;
  transform:skewX(-6deg);
  border-radius:6px;
}
/* square off the two outer edges against the housing */
.faq-hero3d .fqh-panel:first-child{
  margin-left:-40px; padding-left:40px;
  border-radius:16px 6px 6px 16px;
}
.faq-hero3d .fqh-panel:last-child{
  margin-right:-40px; padding-right:40px;
  border-radius:6px 16px 16px 6px;
}
.faq-hero3d .fqh-panel img{
  display:block;
  width:calc(100% + 60px); height:100%;
  margin-left:-30px;
  object-fit:cover; object-position:50% 42%;
  transform:skewX(6deg);
}
.faq-hero3d .fqh-panel:first-child img{ object-position:58% 50%; }
.faq-hero3d .fqh-panel:last-child img{ object-position:42% 50%; }

/* --------------------------------------------------------------------------
   CONSOLE 3 — information strip
   -------------------------------------------------------------------------- */
.faq-hero3d .fqh-info{
  margin-top:22px;
  display:grid;
  grid-template-columns:minmax(0, 1fr);   /* 2026-09-02: the right-hand contact
                                             card was removed; the three trust
                                             items now run the full width */
  align-items:center;
  gap:30px;
  padding:30px 34px;
}

.faq-hero3d .fqh-facts{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.faq-hero3d .fqh-fact{
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:14px 10px;
}
.faq-hero3d .fqh-fact + .fqh-fact{ border-left:1px solid rgba(181,168,143,0.55); padding-left:22px; }

.faq-hero3d .fqh-fico{
  flex-shrink:0;
  width:64px; height:64px; border-radius:50%;
  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 7px 16px rgba(165,15,21,0.30),
    inset 0 2px 3px rgba(255,255,255,0.5),
    inset 0 -4px 8px rgba(0,0,0,0.24);
}
.faq-hero3d .fqh-fico svg{ width:31px; height:31px; }

.faq-hero3d .fqh-ftext{
  font-family:var(--font-sans);
  font-size:1.15rem; font-weight:700;    /* 18.4px */
  line-height:1.24; color:var(--charcoal);
  text-transform:uppercase; letter-spacing:0.02em;
}
.faq-hero3d .fqh-ftext b{
  display:block;
  font-size:1.3rem; font-weight:900;     /* 20.8px */
  color:var(--fq-ink);
}

/* --------------------------------------------------------------------------
   RESPONSIVE — stack, never shrink the reading sizes
   -------------------------------------------------------------------------- */
@media (max-width: 1180px){
  .faq-hero3d .fqh-housing{ padding:38px 32px 40px; gap:28px; }
  .faq-hero3d .fqh-info{ grid-template-columns:1fr; gap:22px; padding:24px 26px; }
}

@media (max-width: 980px){
  .faq-hero3d{ padding:18px 0 26px; }
  .faq-hero3d .fqh-housing{
    grid-template-columns:1fr;
    gap:26px; padding:36px 26px 32px;
    border-radius:24px;
  }
  .faq-hero3d .fqh-housing::before,
  .faq-hero3d .fqh-strip::before,
  .faq-hero3d .fqh-info::before{ inset:10px; border-radius:15px; }
  .faq-hero3d .fqh-portrait{ max-width:520px; margin:0 auto; }
  .faq-hero3d .fqh-copy p:not(.lede){ max-width:none; }
  .faq-hero3d .fqh-facts{ grid-template-columns:1fr; gap:0; }
  .faq-hero3d .fqh-fact + .fqh-fact{
    border-left:0; padding-left:8px;
    border-top:1px solid rgba(181,168,143,0.55);
  }
}

@media (max-width: 560px){
  .faq-hero3d{ padding:12px 0 20px; }
  .faq-hero3d .fqh-housing,
  .faq-hero3d .fqh-strip,
  .faq-hero3d .fqh-info{ border-radius:20px; }
  .faq-hero3d .fqh-housing::before,
  .faq-hero3d .fqh-strip::before,
  .faq-hero3d .fqh-info::before{ inset:8px; border-radius:13px; border-width:2px; }
  .faq-hero3d .fqh-housing::after,
  .faq-hero3d .fqh-strip::after,
  .faq-hero3d .fqh-info::after{
    background-image:
      radial-gradient(circle at 19px 19px, var(--fq-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 19px) 19px, var(--fq-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at 19px calc(100% - 19px), var(--fq-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 19px) calc(100% - 19px), var(--fq-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px);
  }
  .faq-hero3d .fqh-housing{ padding:28px 18px 26px; }
  .faq-hero3d h1{ font-size:2.6rem; }
  .faq-hero3d .lede{ font-size:1.35rem; }
  /* body copy holds at 19.2px on the phone — deliberately not reduced further */
  .faq-hero3d .fqh-copy p:not(.lede){ font-size:1.2rem; line-height:1.64; }
  .faq-hero3d .breadcrumb{ font-size:1rem; padding:8px 15px; }
  /* On a phone four skewed panels would become unreadable slivers, so the
     strip becomes a straight 2x2 grid of upright photographs instead. */
  .faq-hero3d .fqh-strip{
    padding:9px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .faq-hero3d .fqh-panel{
    height:auto; aspect-ratio:1/1;
    transform:none; border-radius:12px;
    margin:0; padding:0;
  }
  .faq-hero3d .fqh-panel:first-child,
  .faq-hero3d .fqh-panel:last-child{ margin:0; padding:0; border-radius:12px; }
  .faq-hero3d .fqh-panel img{
    width:100%; margin-left:0; transform:none;
    object-position:50% 50%;
  }
  .faq-hero3d .fqh-info{ padding:20px 16px; }
}

@media (max-width: 380px){
  .faq-hero3d h1{ font-size:2.3rem; }
}