/* ==========================================================================
   SUNROOF KING — 3D VISUAL SYSTEM   (reusable page skin)
   Created 2026-09-02.

   MASTER REFERENCE: vehicle-makes.html, approved and frozen 2026-09-02.
   This file generalises that page's language so the remaining pages can be
   converted to it without each one growing its own bespoke styles:

       cream / off-white base
       orange illuminated + recessed trim
       molded 3D panels
       bold black typography, large readable headings
       dimensional buttons and controls
       automotive-dashboard feel
       shared header / footer language (untouched — those live in home.css)

   HOW TO USE IT ON A PAGE
     1. add  class="sk3d"  to that page's <body>
     2. link this file LAST, after the page's own <style> block

   Everything is scoped to `.sk3d`, so a page without the class is completely
   unaffected. That is what lets the frozen pages stay frozen while the
   conversion runs one page at a time.

   RESTYLE ONLY. Nothing here changes copy, headings, links, image sources,
   alt text, semantics or document order — it only adds surface.

   CONVERSION ORDER: Ford (first) -> Mercedes -> Shattered Glass -> Leak
   Repair -> Panoramic Repair -> Factory Sunroof Repair -> Custom Installation.
   ========================================================================== */

.sk3d{
  --sk-cream-1:#FBF4E9;
  --sk-cream-2:#F7EEE0;
  --sk-cream-3:#F2E6D4;
  --sk-edge:#E3D5BF;
  --sk-edge-soft:#EFE6D6;
  --sk-screw:#C9BCA6;
  --sk-ink:#151210;
}

/* --------------------------------------------------------------------------
   1. PAGE GROUND — warm cream instead of flat white
   -------------------------------------------------------------------------- */
body.sk3d{
  background:
    radial-gradient(120% 60% at 78% 0%, rgba(242,96,12,0.055) 0%, rgba(242,96,12,0) 60%),
    linear-gradient(180deg, #FDFAF4 0%, #FAF4EA 42%, #F7F0E4 100%);
  background-attachment:fixed;
}

/* --------------------------------------------------------------------------
   2. THE MOLDED FRAME — the page's signature object

   Two pseudo-elements, exactly as on the reference hero:
     ::before  molded outer frame + four corner screws
     ::after   orange illuminated inner trim
   Content sits above both on z-index 2. No extra markup, no images.
   -------------------------------------------------------------------------- */
.sk3d .page-hero{
  position:relative;
  isolation:isolate;
  border-bottom:0;
  padding:30px 0 34px;
  background:
    radial-gradient(120% 90% at 82% 22%, rgba(242,96,12,0.10) 0%, rgba(242,96,12,0) 58%),
    radial-gradient(90% 70% at 8% 0%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(168deg, var(--sk-cream-1) 0%, var(--sk-cream-2) 46%, var(--sk-cream-3) 100%);
}
.sk3d .page-hero::before{
  content:"";
  position:absolute; inset:14px;
  border-radius:26px;
  border:1px solid var(--sk-edge);
  background-image:
    radial-gradient(circle at 26px 26px, var(--sk-screw) 0 3.5px, var(--sk-edge-soft) 3.5px 7px, rgba(0,0,0,0) 7.5px),
    radial-gradient(circle at calc(100% - 26px) 26px, var(--sk-screw) 0 3.5px, var(--sk-edge-soft) 3.5px 7px, rgba(0,0,0,0) 7.5px),
    radial-gradient(circle at 26px calc(100% - 26px), var(--sk-screw) 0 3.5px, var(--sk-edge-soft) 3.5px 7px, rgba(0,0,0,0) 7.5px),
    radial-gradient(circle at calc(100% - 26px) calc(100% - 26px), var(--sk-screw) 0 3.5px, var(--sk-edge-soft) 3.5px 7px, rgba(0,0,0,0) 7.5px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -3px 0 rgba(0,0,0,0.06),
    inset 3px 0 0 rgba(255,255,255,0.55),
    inset -3px 0 0 rgba(0,0,0,0.04),
    0 2px 4px rgba(23,20,18,0.06),
    0 16px 34px rgba(23,20,18,0.11),
    0 36px 70px rgba(23,20,18,0.13);
  pointer-events:none;
  z-index:0;
}
.sk3d .page-hero::after{
  content:"";
  position:absolute; inset:26px;
  border-radius:18px;
  border:2px solid rgba(242,96,12,0.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.75),
    0 0 14px rgba(242,96,12,0.28),
    inset 0 0 22px rgba(242,96,12,0.10);
  pointer-events:none;
  z-index:1;
}
.sk3d .page-hero > .wrap{
  position:relative; z-index:2;
  padding-top:22px; padding-bottom:22px;
}

/* --------------------------------------------------------------------------
   3. CONTENT SECTIONS — molded panels

   The full frame-plus-screws treatment is reserved for the hero. Repeating it
   on a dozen sections turns a premium page into a noisy one, so the sections
   get the quieter member of the same family: a raised cream panel with the
   orange trim reduced to one illuminated edge along the top.
   -------------------------------------------------------------------------- */
.sk3d .content-section{
  padding:34px 0;
  background:transparent;
  border:0;
}
.sk3d .content-section > .wrap{
  position:relative;
  padding:40px 44px 44px;
  border-radius:22px;
  border:1px solid var(--sk-edge);
  background:
    radial-gradient(90% 60% at 10% 0%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(168deg, #FFFDF9 0%, #FCF7EF 52%, #F6EFE3 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -3px 0 rgba(0,0,0,0.05),
    0 2px 4px rgba(23,20,18,0.05),
    0 14px 30px rgba(23,20,18,0.09);
}
/* the illuminated edge */
.sk3d .content-section > .wrap::before{
  content:"";
  position:absolute; left:46px; right:46px; top:-1px; height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,
    rgba(242,96,12,0) 0%, rgba(242,96,12,0.75) 22%,
    #FFA25C 50%, rgba(242,96,12,0.75) 78%, rgba(242,96,12,0) 100%);
  box-shadow:0 1px 5px rgba(242,96,12,0.35);
  pointer-events:none;
}
/* the alternate band sits a shade deeper, so consecutive panels still read
   as separate objects without a hard background switch */
.sk3d .content-section.alt > .wrap{
  background:
    radial-gradient(90% 60% at 10% 0%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(168deg, #FCF6EC 0%, #F8F1E4 52%, #F1E8D9 100%);
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY — bold black, larger, dimensional
   -------------------------------------------------------------------------- */
.sk3d h1{
  color:var(--sk-ink);
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 2px 3px rgba(23,20,18,0.10);
}
.sk3d .eyebrow-rule{ gap:20px; margin-bottom:10px; }
/* text-align:center matters here: several of these headings are long enough
   to wrap inside the panel, and without it the second line sets left while
   the first sits centred between the two rules. */
.sk3d .eyebrow-rule h2{
  font-size:2.05rem;
  line-height:1.22;
  text-align:center;
  color:var(--sk-ink);
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 2px 3px rgba(23,20,18,0.10);
}
.sk3d .eyebrow-rule .line{
  width:64px; height:4px;
  background:linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.85), 0 2px 6px rgba(242,96,12,0.35);
}
.sk3d .section-sub{ font-size:0.95rem; letter-spacing:0.08em; }
.sk3d .lg-kicker{ color:var(--orange); }
.sk3d .page-hero-accent{
  background:linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(242,96,12,0.35);
}
.sk3d .breadcrumb{ font-size:0.95rem; gap:10px; }
.sk3d .breadcrumb .current{ color:var(--orange-dark); }
.sk3d .lg-prose p{ font-size:1.08rem; line-height:1.78; }
.sk3d .lg-hero-copy .lede{ font-size:1.2rem; line-height:1.7; }
.sk3d .lg-hero-copy p:not(.lede):not(.lg-kicker){ font-size:1.05rem; line-height:1.76; }
.sk3d .lg-photo-caption{ font-size:0.95rem; }

/* --------------------------------------------------------------------------
   5. DIMENSIONAL CONTROLS
   A hard colour edge under the control does the moulded-key look; the press
   state removes it so the button physically sinks. Same physics as the
   reference page's CTA.
   -------------------------------------------------------------------------- */
.sk3d .btn-primary{
  border-radius:12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 5px 0 var(--red-dark),
    0 8px 14px rgba(23,20,18,0.26),
    0 16px 30px rgba(23,20,18,0.18);
}
.sk3d .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 7px 0 var(--red-dark),
    0 12px 20px rgba(23,20,18,0.30),
    0 22px 38px rgba(23,20,18,0.22);
}
.sk3d .btn-primary:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.40), 0 1px 0 var(--red-dark);
}
.sk3d .btn-outline-dark{
  border-radius:12px;
  background:linear-gradient(180deg, #FFFFFF 0%, #F7F0E5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 4px 0 #D8CDBB,
    0 8px 16px rgba(23,20,18,0.14);
}
.sk3d .btn-outline-dark:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.16), 0 1px 0 #D8CDBB;
}

/* --------------------------------------------------------------------------
   6. PHOTOGRAPHY — molded frames around the real repair photographs
   Image sources, alt text and captions are untouched; only the frame is new.
   -------------------------------------------------------------------------- */
.sk3d .lg-photo,
.sk3d .fd-photo-single,
.sk3d .fd-graphic{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--sk-edge);
  background:linear-gradient(168deg, #FFFFFF 0%, #F6EFE3 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.9),
    0 2px 4px rgba(23,20,18,0.07),
    0 14px 30px rgba(23,20,18,0.13);
}
.sk3d .lg-photo img,
.sk3d .fd-photo-single img,
.sk3d .fd-graphic img{
  display:block; width:100%; height:auto;
  border-radius:17px;
}

/* --------------------------------------------------------------------------
   7. CARDS — related services, reason tiles
   -------------------------------------------------------------------------- */
.sk3d .lg-related-card{
  border-radius:16px;
  border:1px solid var(--sk-edge);
  background:linear-gradient(168deg, #FFFFFF 0%, #FFFFFF 54%, #F6EFE3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -3px 6px rgba(23,20,18,0.05),
    0 2px 4px rgba(23,20,18,0.07),
    0 10px 22px rgba(23,20,18,0.11);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.sk3d .lg-related-card:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 2px 4px rgba(23,20,18,0.08),
    0 18px 34px rgba(23,20,18,0.18);
}
.sk3d .lg-related-card:active{ transform:translateY(-1px) scale(0.995); }
.sk3d .lg-related-card h3{ color:var(--sk-ink); }
.sk3d .lg-more{ color:var(--orange-dark); font-weight:800; }

/* --------------------------------------------------------------------------
   8. TRUST STRIP — dashboard readout
   -------------------------------------------------------------------------- */
.sk3d .mini-trust{
  border-radius:18px;
  border:1px solid var(--sk-edge);
  background:linear-gradient(168deg, #FFFDF9 0%, #F8F1E5 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -3px 0 rgba(0,0,0,0.05),
    0 10px 24px rgba(23,20,18,0.10);
}
.sk3d .mini-trust .trust-item svg{ color:var(--orange-dark); }

/* ==========================================================================
   9. FORD PAGE COMPONENTS  ( .fd-* )

   These classes exist only on ford-sunroof.html, but the TREATMENTS are the
   reusable part: statement band, recessed warning, quote, chip list, reason
   tile, carousel frame and control. When the next pages are converted, point
   their equivalent classes at these same patterns rather than inventing new
   ones.

   The page's own <style> block is left in place and untouched — every rule
   below is one level more specific (.sk3d + class), so it wins on
   specificity and the original remains as the un-skinned fallback.
   ========================================================================== */

/* ---- statement band: a lit instrument panel ---- */
.sk3d .fd-band{
  position:relative;
  border-radius:16px;
  padding:30px 34px;
  border:1px solid #0B0908;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(242,96,12,0.16) 0%, rgba(242,96,12,0) 62%),
    linear-gradient(178deg, #3A342F 0%, #241F1C 52%, #14120F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -4px 10px rgba(0,0,0,0.55),
    0 2px 4px rgba(23,20,18,0.20),
    0 18px 38px rgba(23,20,18,0.28);
}
.sk3d .fd-band::after{
  content:"";
  position:absolute; left:26px; right:26px; bottom:9px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(242,96,12,0) 0%, var(--orange) 50%, rgba(242,96,12,0) 100%);
  box-shadow:0 0 10px rgba(242,96,12,0.6);
  pointer-events:none;
}
.sk3d .fd-band p{ text-shadow:0 2px 4px rgba(0,0,0,0.5); }
.sk3d .fd-band .accent{ color:#FFA25C; text-shadow:0 0 14px rgba(242,96,12,0.55); }

/* ---- recessed warning: pressed into the panel, orange-lit edge ---- */
.sk3d .fd-warn{
  border:1px solid #E4D9C6;
  border-left:5px solid var(--red);
  border-radius:14px;
  background:linear-gradient(168deg, #FFFBF4 0%, #F7EFE2 100%);
  box-shadow:
    inset 0 2px 7px rgba(23,20,18,0.09),
    inset 0 -1px 0 rgba(255,255,255,0.9),
    0 1px 0 rgba(255,255,255,0.7);
}
.sk3d .fd-warn h3{ color:var(--sk-ink); }
.sk3d .fd-warn a{ color:var(--orange-dark); font-weight:800; }

/* ---- customer quote ---- */
.sk3d .fd-quote{
  border:1px solid var(--sk-edge);
  border-left:5px solid var(--orange);
  border-radius:14px;
  background:linear-gradient(168deg, #FFFFFF 0%, #FAF4EA 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 2px 4px rgba(23,20,18,0.06),
    0 12px 26px rgba(23,20,18,0.10);
}

/* ---- symptom list: molded keys ---- */
.sk3d .fd-symptoms li{
  border:1px solid var(--sk-edge);
  border-radius:12px;
  background:linear-gradient(180deg, #FFFFFF 0%, #F7F0E5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -3px 6px rgba(23,20,18,0.05),
    0 1px 2px rgba(23,20,18,0.06),
    0 6px 14px rgba(23,20,18,0.09);
}
.sk3d .fd-symptoms li::before{ color:var(--orange-dark); }

/* ---- reason tiles ---- */
.sk3d .fd-reason{
  border:1px solid var(--sk-edge);
  border-radius:14px;
  background:linear-gradient(168deg, #FFFFFF 0%, #FFFFFF 52%, #F6EFE3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -3px 6px rgba(23,20,18,0.05),
    0 2px 4px rgba(23,20,18,0.06),
    0 10px 22px rgba(23,20,18,0.10);
}
.sk3d .fd-reason strong{ color:var(--sk-ink); }

/* ---- vehicle chips ---- */
.sk3d .fd-chips li{
  border:1px solid var(--sk-edge);
  border-radius:999px;
  background:linear-gradient(180deg, #FFFFFF 0%, #F6EFE3 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.10);
}

/* ---- model line under the H1 ---- */
.sk3d .fd-models span{ color:var(--orange); }

/* ---- vehicle carousel: framed like an instrument binnacle ---- */
.sk3d .fd-slider-band{ padding-top:30px; }
.sk3d .fd-slide{
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--sk-edge);
  background:linear-gradient(168deg, #FFFFFF 0%, #F4EDE1 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.9),
    0 2px 4px rgba(23,20,18,0.07),
    0 18px 40px rgba(23,20,18,0.16);
}
.sk3d .fd-slide img{ border-radius:19px; }
.sk3d .fd-slide-label{
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(178deg, #2E2A26 0%, #16130F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 4px 12px rgba(0,0,0,0.42);
}
.sk3d .fd-slide-label b{ color:#FFA25C; }

/* dimensional carousel controls */
.sk3d .fd-nav{
  border:1px solid var(--sk-edge);
  background:linear-gradient(168deg, #FFFFFF 0%, #FFFFFF 52%, #F3ECE0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -3px 6px rgba(23,20,18,0.06),
    0 2px 4px rgba(23,20,18,0.10),
    0 10px 20px rgba(23,20,18,0.16);
  transition:transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.sk3d .fd-nav:hover{
  color:var(--orange-dark);
  border-color:rgba(242,96,12,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 2px 4px rgba(23,20,18,0.10),
    0 14px 26px rgba(242,96,12,0.22);
}
.sk3d .fd-nav:active{
  transform:translateY(1px) scale(0.97);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.20), 0 1px 2px rgba(23,20,18,0.10);
}

/* dots read as recessed indicator lamps; the current one is lit */
.sk3d .fd-dot{
  border:1px solid #DCD1BE;
  background:linear-gradient(180deg, #EFE7DA 0%, #FBF6EE 100%);
  box-shadow:inset 0 1px 3px rgba(23,20,18,0.22);
}
.sk3d .fd-dot[aria-current="true"]{
  background:radial-gradient(circle at 34% 30%, #FFC489 0%, var(--orange) 60%, var(--orange-dark) 100%);
  border-color:var(--orange-dark);
  box-shadow:0 0 10px rgba(242,96,12,0.65), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* ---- the graphic note stays quiet, but joins the family ---- */
.sk3d .fd-graphic-note{ color:var(--charcoal-soft); }

/* --------------------------------------------------------------------------
   10. RESPONSIVE — the frame and panel padding step down so the moulding
   never eats the reading width on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 860px){
  .sk3d .content-section > .wrap{ padding:32px 26px 34px; border-radius:18px; }
  .sk3d .content-section > .wrap::before{ left:30px; right:30px; }
  .sk3d .eyebrow-rule h2{ font-size:1.8rem; }
}
@media (max-width: 640px){
  .sk3d .page-hero{ padding:16px 0 20px; }
  .sk3d .page-hero::before{ inset:8px; border-radius:20px; }
  .sk3d .page-hero::after{ inset:16px; border-radius:14px; }
  .sk3d .page-hero > .wrap{ padding-top:16px; padding-bottom:16px; }
  .sk3d .content-section{ padding:20px 0; }
  .sk3d .content-section > .wrap{ padding:26px 18px 28px; border-radius:16px; }
  .sk3d .content-section > .wrap::before{ left:20px; right:20px; }
  .sk3d .eyebrow-rule h2{ font-size:1.5rem; }
  .sk3d .fd-band{ padding:24px 20px; border-radius:14px; }
  .sk3d .fd-band::after{ left:16px; right:16px; }
  .sk3d .lg-prose p{ font-size:1.04rem; }
}
@media (max-width: 400px){
  .sk3d .content-section > .wrap{ padding:22px 14px 24px; }
  .sk3d .content-section > .wrap::before{ left:14px; right:14px; }
}

@media (prefers-reduced-motion: reduce){
  .sk3d .btn-primary,
  .sk3d .lg-related-card,
  .sk3d .fd-nav{ transition:none; }
  .sk3d .btn-primary:hover,
  .sk3d .lg-related-card:hover{ transform:none; }
}

/* ==========================================================================
   11. SHARED LEGACY COMPONENTS  ( .lg-* )

   Added 2026-09-02 with the Mercedes conversion. These classes are the site's
   common vocabulary — symptom tiles, numbered steps, model pills, shop facts,
   photo pairs — and they appear on every remaining page in the queue
   (Shattered Glass, Leak Repair, Panoramic Repair, Factory Sunroof Repair,
   Custom Installation). Skinning them here once means those pages need only
   the body class and the stylesheet link, with no new CSS each time.

   Still `.sk3d`-scoped, so the frozen pages that share these classes are
   completely unaffected.
   ========================================================================== */

/* ---- symptom tiles: molded keys, orange-lit icon ---- */
.sk3d .lg-symptom{
  border:1px solid var(--sk-edge);
  border-radius:14px;
  background:linear-gradient(168deg, #FFFFFF 0%, #FFFFFF 52%, #F6EFE3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -3px 6px rgba(23,20,18,0.05),
    0 2px 4px rgba(23,20,18,0.06),
    0 10px 22px rgba(23,20,18,0.10);
}
.sk3d .lg-symptom svg{ color:var(--orange-dark); }
.sk3d .lg-symptom strong{ color:var(--sk-ink); }

/* ---- numbered steps: the counter becomes a recessed dial ---- */
.sk3d .lg-step{ border-bottom-color:#E9DECD; }
.sk3d .lg-step::before{
  background:radial-gradient(circle at 34% 28%, #FFC489 0%, var(--orange) 58%, var(--orange-dark) 100%);
  color:#FFFFFF;
  border:1px solid var(--orange-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 4px rgba(23,20,18,0.14),
    0 6px 14px rgba(242,96,12,0.28);
}
.sk3d .lg-step strong{ color:var(--sk-ink); }

/* ---- model pills: dimensional, orange-rimmed ---- */
.sk3d .lg-model{
  border:1.5px solid rgba(242,96,12,0.45);
  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.10);
}

/* ---- shop facts ---- */
.sk3d .lg-fact svg{ color:var(--orange-dark); }
.sk3d .lg-fact strong{ color:var(--sk-ink); }
.sk3d .lg-facts a{ color:var(--orange-dark); }

/* ---- paired and wide photographs get the same molded frame as .lg-photo ---- */
.sk3d .mb-wide{
  border-radius:18px;
  border:1px solid var(--sk-edge);
  background:linear-gradient(168deg, #FFFFFF 0%, #F6EFE3 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.9),
    0 2px 4px rgba(23,20,18,0.07),
    0 14px 30px rgba(23,20,18,0.13);
}
.sk3d .mb-wide img{ border-radius:17px; }

/* ---- Mercedes sub-headings: the orange underscore becomes a lit bar ---- */
.sk3d .mb-subhead{ color:var(--sk-ink); font-size:1.12rem; }
.sk3d .mb-subhead::after{
  background:linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.85), 0 2px 6px rgba(242,96,12,0.35);
}
