/* ==========================================================================
   FAQ ACCORDION AREA — 3D molded dashboard sections
   Created 2026-09-02. Reference (approved):
     Graphics/faq-accordion-3d-redesign-reference.png

   SCOPE: every selector is under `.faq-acc3d`, which sits on the FAQ section
   of faq.html and nowhere else. This file is linked ONLY by faq.html.

   IMPORTANT — the shared classes `.faq-item`, `.faq-question`, `.faq-answer`,
   `.faq-answer-inner`, `.faq-icon` and `.eyebrow-rule` are ALSO used by the
   service pages. Every rule below is prefixed with `.faq-acc3d`, so those
   pages keep their current appearance untouched. Do not lift any of these
   rules out of this scope.

   The accordion mechanics are unchanged: script.js still toggles
   `.faq-item.is-open`, and this file only reacts to that class. Nothing here
   depends on new JavaScript for the open/close behaviour.
   ========================================================================== */

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

  background:
    radial-gradient(110% 50% 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 76px;   /* 2026-09-02: was 44px. The contact console that
                            used to sit here was removed, so this section now
                            meets the black footer directly and needs room for
                            the last housing's drop shadow. Scoped to .faq-acc3d. */
}
.faq-acc3d > .wrap{ max-width:1420px; }

/* --------------------------------------------------------------------------
   CATEGORY HOUSING — one molded dashboard section per existing category
   -------------------------------------------------------------------------- */
.faq-acc3d .fqa-cat{
  position:relative;
  padding:42px 44px 44px;
  margin-bottom:28px;
  border-radius:30px;
  border:1px solid var(--fa-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(--fa-cream-1) 0%, var(--fa-cream-2) 52%, var(--fa-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);
}
.faq-acc3d .fqa-cat:last-of-type{ margin-bottom:0; }

/* recessed illuminated orange trim */
.faq-acc3d .fqa-cat::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;
}
/* metallic corner fasteners */
.faq-acc3d .fqa-cat::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 29px 29px, var(--fa-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at calc(100% - 29px) 29px, var(--fa-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at 29px calc(100% - 29px), var(--fa-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at calc(100% - 29px) calc(100% - 29px), var(--fa-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px);
  pointer-events:none;
  z-index:0;
}
.faq-acc3d .eyebrow-rule,
.faq-acc3d .faq-list{ position:relative; z-index:1; }

/* --------------------------------------------------------------------------
   COMPOSITION — matches faq-accordion-3d-redesign-reference.png

   Category 1 is a two-column console: the red question icon and heading sit at
   the top of the left column with the accordion rows beneath them, and the
   illustration occupies the right column full height. Categories 2-4 run full
   width, exactly as the reference shows for "Sunroof Repairs & Services".
   -------------------------------------------------------------------------- */
.faq-acc3d .fqa-cat--illus{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 0.6fr);
  gap:30px;
  align-items:stretch;
}
.faq-acc3d .fqa-main{ position:relative; z-index:1; min-width:0; }

/* Illustration area — approved asset installed 2026-09-02.
   The reference shows the figure sitting directly on the cream housing with no
   frame around it, so there is no border or card here. The artwork's own warm
   background is feathered away at the left and bottom edges with a mask, which
   lets it read as part of the moulded panel instead of a pasted-on rectangle.
   `cover` with a 57% horizontal origin keeps the whole figure in frame while
   trimming the surplus background at the far left and right of the source. */
.faq-acc3d .fqa-illus{
  position:relative; z-index:1;
  min-height:330px;
  border-radius:18px;
  overflow:hidden;
}
.faq-acc3d .fqa-illus img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:57% 50%;
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 7%),
    linear-gradient(180deg, rgba(0,0,0,1) 89%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 7%),
    linear-gradient(180deg, rgba(0,0,0,1) 89%, rgba(0,0,0,0) 100%);
  mask-composite:intersect;
}

/* the red question icon beside each heading */
.faq-acc3d .fqa-head{
  display:flex; align-items:center; gap:20px;
  margin-bottom:26px;
}
.faq-acc3d .fqa-head .eyebrow-rule{ margin-bottom:0; flex:1; min-width:0; }
.faq-acc3d .fqa-ico{
  flex-shrink:0;
  width:70px; height:70px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#FFFFFF;
  background:radial-gradient(circle at 32% 26%, #F0575E 0%, var(--red) 50%, #8E0D12 100%);
  border:5px solid #FFFFFF;
  box-shadow:
    0 0 0 1px var(--fa-edge),
    0 9px 20px rgba(165,15,21,0.32),
    inset 0 2px 4px rgba(255,255,255,0.45),
    inset 0 -5px 11px rgba(0,0,0,0.28);
}
.faq-acc3d .fqa-ico svg{ width:34px; height:34px; }
/* the dot of the question mark */
.faq-acc3d .fqa-ico svg circle{ stroke-width:3.2; }

/* --------------------------------------------------------------------------
   CATEGORY HEADING
   -------------------------------------------------------------------------- */
.faq-acc3d .eyebrow-rule{ gap:22px; margin-bottom:26px; }
.faq-acc3d .eyebrow-rule h2{
  font-family:var(--font-sans);
  font-size:2.35rem;                 /* 37.6px */
  font-weight:900; letter-spacing:0.005em;
  text-transform:uppercase;
  color:var(--fa-ink);
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 2px 4px rgba(23,20,18,0.10);
}
.faq-acc3d .eyebrow-rule h2 .accent{ color:var(--red); }
.faq-acc3d .eyebrow-rule .line{
  width:66px; 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);
}

/* --------------------------------------------------------------------------
   FAQ ROWS — molded keys
   -------------------------------------------------------------------------- */
/* the shared rule in pages.css is `.faq-list{max-width:820px;margin:0 auto}`, which
   centres the rows in a narrow column. The approved reference runs them the
   full width of the housing, so the cap is released inside this scope only.
   pages.css itself is untouched — every other page keeps the 820px column. */
.faq-acc3d .faq-list{ margin-bottom:0 !important; max-width:none; margin-left:0; margin-right:0; }

.faq-acc3d .faq-item{
  border:1px solid var(--fa-edge);
  border-radius:16px;
  margin-bottom:14px;
  overflow:hidden;
  background:
    radial-gradient(80% 60% at 10% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(170deg, #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 10px 20px rgba(23,20,18,0.10);
  transition:box-shadow 0.18s ease, transform 0.18s ease;
}
.faq-acc3d .faq-item:last-child{ margin-bottom:0; }
.faq-acc3d .faq-item:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.98),
    0 2px 4px rgba(23,20,18,0.08),
    0 16px 30px rgba(23,20,18,0.16);
}
/* open rows sit slightly recessed, so the state is obvious without colour */
.faq-acc3d .faq-item.is-open{
  transform:none;
  border-color:rgba(242,96,12,0.45);
  box-shadow:
    inset 0 2px 6px rgba(23,20,18,0.10),
    0 0 0 1px rgba(242,96,12,0.18),
    0 12px 26px rgba(23,20,18,0.13);
}

/* the question button */
.faq-acc3d .faq-question{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:100%;
  padding:22px 24px;
  background:none; border:0; cursor:pointer;
  text-align:left;
  font-family:var(--font-sans);
  font-size:1.3rem;                  /* 20.8px */
  font-weight:800; line-height:1.34;
  color:var(--fa-ink);
  text-shadow:0 1px 0 rgba(255,255,255,0.8);
}
.faq-acc3d .faq-question:focus-visible{
  outline:3px solid var(--orange); outline-offset:-4px; border-radius:14px;
}
.faq-acc3d .faq-item.is-open .faq-question{ color:var(--red); }

/* large dimensional +/- control */
/* Cream disc with a red +, ringed in orange — as the reference draws it,
   rather than the solid red disc used in the previous pass. */
.faq-acc3d .faq-icon{
  flex-shrink:0;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--red);
  background:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #FDF8F0 55%, #EFE4D3 100%);
  border:2px solid rgba(242,96,12,0.65);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.9),
    0 5px 12px rgba(23,20,18,0.16),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -3px 6px rgba(23,20,18,0.10);
  transition:transform 0.22s ease, box-shadow 0.18s ease, background 0.18s ease;
}
/* The shared markup draws the "+" as a SINGLE svg path holding both strokes,
   so half of it cannot be hidden to make a minus. The svg is therefore hidden
   here and the +/- is drawn with two pseudo-element bars instead — the
   vertical bar simply collapses on open. The svg stays in the DOM untouched,
   so the service pages that share this markup are unaffected. */
.faq-acc3d .faq-icon{ position:relative; }
.faq-acc3d .faq-icon svg{ display:none; }
.faq-acc3d .faq-icon::before,
.faq-acc3d .faq-icon::after{
  content:"";
  position:absolute; top:50%; left:50%;
  background:var(--red); border-radius:2px;
}
/* horizontal bar — always visible */
.faq-acc3d .faq-icon::before{
  width:18px; height:3.6px;
  transform:translate(-50%, -50%);
}
/* vertical bar — collapses when the row opens, turning + into − */
.faq-acc3d .faq-icon::after{
  width:3.6px; height:18px;
  transform:translate(-50%, -50%) scaleY(1);
  transition:transform 0.22s ease, opacity 0.18s ease;
}
.faq-acc3d .faq-item.is-open .faq-icon::after{
  transform:translate(-50%, -50%) scaleY(0);
  opacity:0;
}
.faq-acc3d .faq-item.is-open .faq-icon{
  background:radial-gradient(circle at 34% 28%, #F0575E 0%, var(--red) 52%, #8E0D12 100%);
  border-color:#8E0D12;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.9),
    0 5px 12px rgba(165,15,21,0.30),
    inset 0 1px 0 rgba(255,255,255,0.35);
}
.faq-acc3d .faq-item.is-open .faq-icon::before{ background:#FFFFFF; }

/* --------------------------------------------------------------------------
   ANSWER — recessed cream panel beneath its question
   -------------------------------------------------------------------------- */
.faq-acc3d .faq-answer{
  max-height:0; overflow:hidden;
  transition:max-height 0.28s ease;
}
.faq-acc3d .faq-item.is-open .faq-answer{ max-height:1200px; }

.faq-acc3d .faq-answer-inner{
  margin:0 18px 18px;
  padding:22px 24px;
  border-radius:12px;
  border:1px solid rgba(225,211,188,0.9);
  background:linear-gradient(170deg, #FFFDF8 0%, #F7F0E4 100%);
  box-shadow:
    inset 0 2px 7px rgba(23,20,18,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.9);
  font-size:1.2rem;                  /* 19.2px */
  line-height:1.66;
  color:var(--charcoal);
}
.faq-acc3d .faq-answer-inner a{
  color:var(--red); font-weight:800;
  text-decoration:underline; text-underline-offset:3px;
}
.faq-acc3d .faq-answer-inner a:hover{ color:var(--red-dark); }

/* --------------------------------------------------------------------------
   RESPONSIVE — reflow, do not shrink the reading sizes
   -------------------------------------------------------------------------- */
@media (max-width: 1180px){
  .faq-acc3d .fqa-cat{ padding:36px 30px 38px; }
}

@media (max-width: 760px){
  .faq-acc3d{ padding:22px 0 30px; }
  .faq-acc3d .fqa-cat{
    padding:30px 16px 32px; border-radius:24px; margin-bottom:20px;
  }
  .faq-acc3d .fqa-cat::before{ inset:10px; border-radius:16px; }
  .faq-acc3d .fqa-cat::after{
    background-image:
      radial-gradient(circle at 21px 21px, var(--fa-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 21px) 21px, var(--fa-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at 21px calc(100% - 21px), var(--fa-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 21px) calc(100% - 21px), var(--fa-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px);
  }
  .faq-acc3d .eyebrow-rule{ gap:12px; }
  .faq-acc3d .eyebrow-rule .line{ width:30px; }
  .faq-acc3d .eyebrow-rule h2{ font-size:1.72rem; }
  /* question type holds; only the padding tightens */
  .faq-acc3d .faq-question{ padding:18px 16px; gap:14px; font-size:1.22rem; }
  .faq-acc3d .faq-icon{ width:44px; height:44px; }
  .faq-acc3d .faq-answer-inner{
    margin:0 12px 12px; padding:18px 16px; font-size:1.15rem;
  }

  /* 2026-09-02 — RESPONSIVE-ONLY CORRECTION (phone widths).
     GENERAL & ESTIMATES is a two-column housing whose illustration track is
     `minmax(300px, 0.6fr)`. That 300px floor was never released, so below
     ~760px the grid handed the illustration its full 300px and squeezed the
     accordion track — which is minmax(0,1fr) and legally collapses — down to
     0px. At 390px the four questions rendered ZERO pixels wide; at 320px the
     300px column also pushed 61px past the viewport and the page side-scrolled.
     Collapsing to one column below 760px fixes both. The illustration stays
     visible, now beneath the questions.
     760px is deliberately the boundary: at 768px the desktop/tablet
     composition still resolves to a healthy 330px + 300px and is untouched. */
  .faq-acc3d .fqa-cat--illus{
    grid-template-columns:minmax(0, 1fr);
    gap:22px;
  }
  .faq-acc3d .fqa-illus{
    min-height:250px;
    border-radius:16px;
  }
  .faq-acc3d .fqa-illus img{ object-position:57% 42%; }
}

@media (max-width: 380px){
  .faq-acc3d .fqa-cat{ padding:26px 11px 28px; }
  .faq-acc3d .fqa-cat::before{ inset:7px; }
  .faq-acc3d .eyebrow-rule h2{ font-size:1.5rem; }
  .faq-acc3d .faq-question{ padding:16px 13px; font-size:1.16rem; }
  .faq-acc3d .faq-answer-inner{ margin:0 9px 9px; padding:16px 13px; }
}

@media (prefers-reduced-motion: reduce){
  .faq-acc3d .faq-item,
  .faq-acc3d .faq-icon,
  .faq-acc3d .faq-answer{ transition:none; }
  .faq-acc3d .faq-item:hover{ transform:none; }
}

/* ==========================================================================
   CONTACT / HELP CONSOLE   ( .faq-contact3d — faq.html only )

   Replaces the small shared .mini-trust strip on this page. That strip and its
   `.mini-trust` / `.trust-item` classes are still used unchanged on ~23 other
   pages; nothing below touches them, because this console uses its own .fqc-*
   markup rather than restyling the shared classes.
   ========================================================================== */

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

  background:linear-gradient(180deg, #F8F2E8 0%, #F6EFE4 100%);
  padding:6px 0 44px;
}
.faq-contact3d > .wrap{ max-width:1420px; }

.faq-contact3d .fqc-console{
  position:relative;
  display:grid;
  grid-template-columns:auto auto minmax(660px, 1fr);
  align-items:center;
  gap:20px;
  padding:26px 28px;
  border-radius:28px;
  border:1px solid var(--fc-edge);
  background:
    radial-gradient(70% 60% at 8% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, var(--fc-cream-1) 0%, var(--fc-cream-2) 52%, var(--fc-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);
}
/* illuminated recessed orange trim */
.faq-contact3d .fqc-console::before{
  content:"";
  position:absolute; inset:12px;
  border-radius:19px;
  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;
}
/* subtle fasteners */
.faq-contact3d .fqc-console::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 26px 26px, var(--fc-screw) 0 3.5px, #EFE6D6 3.5px 7px, rgba(0,0,0,0) 7.5px),
    radial-gradient(circle at calc(100% - 26px) 26px, var(--fc-screw) 0 3.5px, #EFE6D6 3.5px 7px, rgba(0,0,0,0) 7.5px),
    radial-gradient(circle at 26px calc(100% - 26px), var(--fc-screw) 0 3.5px, #EFE6D6 3.5px 7px, rgba(0,0,0,0) 7.5px),
    radial-gradient(circle at calc(100% - 26px) calc(100% - 26px), var(--fc-screw) 0 3.5px, #EFE6D6 3.5px 7px, rgba(0,0,0,0) 7.5px);
  pointer-events:none; z-index:0;
}

/* ---- left: the red "Still Have a Question?" plate ---- */
.faq-contact3d .fqc-lead{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:16px;
  padding:16px 24px 16px 16px;
  border-radius:16px;
  border:1px solid #8E0D12;
  background:linear-gradient(168deg, #E8232B 0%, var(--red) 46%, var(--red-dark) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    inset 0 -3px 8px rgba(0,0,0,0.28),
    0 8px 20px rgba(165,15,21,0.30);
}
.faq-contact3d .fqc-lead-ico{
  flex-shrink:0;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--red);
  background:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F6EFE3 62%, #E4D8C6 100%);
  border:3px solid rgba(255,255,255,0.92);
  box-shadow:inset 0 -3px 7px rgba(0,0,0,0.14), 0 5px 12px rgba(0,0,0,0.28);
}
.faq-contact3d .fqc-lead-ico svg{ width:27px; height:27px; }
.faq-contact3d .fqc-lead-title{
  font-family:var(--font-sans);
  font-size:1.5rem;                    /* 24px */
  font-weight:900; line-height:1.16;
  letter-spacing:0.005em;
  color:#FFFFFF; margin:0;
  text-shadow:0 2px 4px rgba(0,0,0,0.34);
  max-width:16ch;
}

/* ---- middle: the phone, the largest text in the console ---- */
.faq-contact3d .fqc-contact{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.faq-contact3d .fqc-phone{
  font-family:var(--font-sans);
  font-size:2.75rem;                   /* 44px */
  font-weight:900; letter-spacing:-0.02em; line-height:1;
  color:var(--fc-ink);
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,0.9);
  transition:color 0.16s ease;
}
.faq-contact3d .fqc-phone:hover{ color:var(--red); }
.faq-contact3d .fqc-phone:focus-visible{ outline:3px solid var(--orange); outline-offset:4px; border-radius:8px; }

/* ---- the single CALL OR TEXT control ----
   One moulded red pill in appearance, two links in the DOM: the label dials
   tel: and the chat icon opens sms:. The pill itself carries all the moulding
   so the seam between the two links is invisible. */
.faq-contact3d .fqc-cta{
  display:inline-flex; align-items:stretch;
  border-radius:999px;
  border:1px solid #8E0D12;
  background:linear-gradient(180deg, #E8232B 0%, var(--red) 48%, var(--red-dark) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    inset 0 -3px 7px rgba(0,0,0,0.26),
    0 7px 16px rgba(165,15,21,0.30);
  transition:transform 0.16s ease, box-shadow 0.16s ease;
  overflow:hidden;
}
.faq-contact3d .fqc-cta:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.28),
    0 12px 24px rgba(165,15,21,0.38);
}
.faq-contact3d .fqc-cta:active{
  transform:translateY(2px);
  box-shadow:inset 0 3px 8px rgba(0,0,0,0.36);
}
.faq-contact3d .fqc-cta-call,
.faq-contact3d .fqc-cta-sms{
  display:inline-flex; align-items:center; justify-content:center;
  color:#FFFFFF;
  font-family:var(--font-sans);
  font-size:1.22rem;                   /* 19.5px */
  font-weight:900; text-transform:uppercase; letter-spacing:0.045em;
  text-shadow:0 1px 2px rgba(0,0,0,0.28);
}
.faq-contact3d .fqc-cta-call{ padding:13px 12px 13px 30px; }
.faq-contact3d .fqc-cta-sms{ padding:13px 26px 13px 12px; }
/* hairline seam, drawn light-then-dark so it reads as moulded, not as a gap */
.faq-contact3d .fqc-cta-sms{
  box-shadow:inset 1px 0 0 rgba(255,255,255,0.16);
}
.faq-contact3d .fqc-cta-call:hover,
.faq-contact3d .fqc-cta-sms:hover{ color:#FFF2E8; }
.faq-contact3d .fqc-cta-call:focus-visible,
.faq-contact3d .fqc-cta-sms:focus-visible{
  outline:3px solid var(--orange); outline-offset:-4px; border-radius:999px;
}
.faq-contact3d .fqc-cta-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);
}
.faq-contact3d .fqc-cta-ico svg{ width:18px; height:18px; }
/* accessible name for the icon-only SMS half */
.faq-contact3d .fqc-sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ---- right: the four informational items ---- */
.faq-contact3d .fqc-facts{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1.18fr 1fr 1.28fr;
  gap:10px;
}
.faq-contact3d .fqc-fact{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:6px 8px;
  text-align:center;
}
.faq-contact3d .fqc-fact + .fqc-fact{ border-left:1px solid rgba(181,168,143,0.55); }
.faq-contact3d .fqc-fico{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  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 6px 14px rgba(165,15,21,0.28),
    inset 0 2px 3px rgba(255,255,255,0.5),
    inset 0 -4px 8px rgba(0,0,0,0.22);
}
.faq-contact3d .fqc-fico svg{ width:22px; height:22px; }
.faq-contact3d .fqc-ftext{
  font-family:var(--font-sans);
  font-size:1.0625rem;                 /* 17px */
  font-weight:800; line-height:1.3;
  text-transform:uppercase; letter-spacing:0.008em;
  color:var(--fc-ink);
  text-shadow:0 1px 0 rgba(255,255,255,0.8);
}

/* ---- responsive ---- */
@media (max-width: 1240px){
  .faq-contact3d .fqc-console{
    grid-template-columns:auto minmax(0, 1fr);
    row-gap:24px; padding:24px 26px;
  }
  .faq-contact3d .fqc-facts{ grid-column:1 / -1; }
}
@media (max-width: 860px){
  .faq-contact3d .fqc-console{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:20px; }
  .faq-contact3d .fqc-lead{ justify-content:center; padding:16px 18px; }
  .faq-contact3d .fqc-lead-title{ max-width:none; }
  .faq-contact3d .fqc-facts{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 10px; width:100%; }
  .faq-contact3d .fqc-fact:nth-child(odd){ border-left:0; }
}
@media (max-width: 560px){
  .faq-contact3d{ padding:4px 0 30px; }
  .faq-contact3d .fqc-console{ padding:20px 14px; border-radius:20px; }
  .faq-contact3d .fqc-console::before{ inset:8px; border-radius:13px; }
  .faq-contact3d .fqc-phone{ font-size:2.15rem; }
  .faq-contact3d .fqc-lead-title{ font-size:1.32rem; }
  .faq-contact3d .fqc-facts{ grid-template-columns:1fr; gap:14px; }
  .faq-contact3d .fqc-fact{ flex-direction:row; text-align:left; gap:13px; border-left:0 !important; }
  .faq-contact3d .fqc-cta{ width:100%; }
  .faq-contact3d .fqc-cta-call{ flex:1; padding-left:24px; }
}
@media (prefers-reduced-motion: reduce){
  .faq-contact3d .fqc-cta,
  .faq-contact3d .fqc-phone{ transition:none; }
  .faq-contact3d .fqc-cta:hover{ transform:none; }
}