/* ==========================================================================
   SERVICES HERO — 3D molded dashboard housing
   Created 2026-09-02. Reference (approved):
     Website Media/Website Photos/Graphics/services-hero-3d-redesign-reference.png

   SCOPE: every selector below is under `.svc-hero3d`, which appears on the
   first section of services.html and nowhere else. This file is linked ONLY
   by services.html. No shared stylesheet is modified, so Vehicle Makes, Ford,
   Mercedes and every other page are untouched by definition.

   BOUNDARY: this styles the hero section only. Nothing below it — the
   "Everything We Do At Sunroof King" directory and everything after — is
   referenced here.

   Built from the same language as the frozen Vehicle Makes hero: warm cream
   ground, molded outer housing, orange illuminated inner trim, corner
   fasteners, layered depth, bold black headings with orange accents.
   ========================================================================== */

.svc-hero3d{
  --sh-cream-1:#FDF8F0;
  --sh-cream-2:#F8F0E3;
  --sh-cream-3:#F1E6D5;
  --sh-edge:#E1D3BC;
  --sh-screw:#B5A88F;
  --sh-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 30px;
  border-bottom:0;
}

/* The housing runs wider than the 1280px content column, as the reference
   shows — it is chrome, not body copy. Scoped to this section only, so the
   directory below it keeps the site's normal 1280px measure. */
.svc-hero3d > .wrap{ max-width:1420px; }

/* --------------------------------------------------------------------------
   THE HOUSING — one molded unit holding copy and image
   -------------------------------------------------------------------------- */
.svc-hero3d .svh-housing{
  position:relative;
  display:grid;
  /* 1.12 / 1 rather than 0.86 / 1: at 0.86 the copy column left the six
     control keys only ~470px, which truncated "PANORAMIC" and pushed the
     "Custom Installation" key out over the collage. 1.12 gives the keys
     573px, enough for three across with the longest single-word label. */
  grid-template-columns:minmax(0, 1.12fr) minmax(0, 1fr);
  align-items:stretch;
  border-radius:30px;
  border:1px solid var(--sh-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(--sh-cream-1) 0%, var(--sh-cream-2) 52%, var(--sh-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.14),
    0 44px 88px rgba(23,20,18,0.12);
  overflow:hidden;
}

/* orange illuminated inner trim, inset from the housing edge */
.svc-hero3d .svh-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:3;
}
/* four corner fasteners, restrained */
.svc-hero3d .svh-housing::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 30px 30px, var(--sh-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at calc(100% - 30px) 30px, var(--sh-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at 30px calc(100% - 30px), var(--sh-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px),
    radial-gradient(circle at calc(100% - 30px) calc(100% - 30px), var(--sh-screw) 0 4px, #EFE6D6 4px 8px, rgba(0,0,0,0) 8.5px);
  pointer-events:none;
  z-index:4;
}

/* --------------------------------------------------------------------------
   COPY COLUMN
   -------------------------------------------------------------------------- */
.svc-hero3d .svh-copy{
  position:relative; z-index:2;
  padding:48px 34px 50px 44px;
  align-self:center;
}

.svc-hero3d .breadcrumb{
  font-size:1rem; gap:10px; margin-bottom:18px; font-weight:700;
}
.svc-hero3d .breadcrumb .current{ color:var(--orange-dark); }

.svc-hero3d .page-hero-kicker{
  font-size:1.05rem; font-weight:900;
  text-transform:uppercase; letter-spacing:0.045em;
  color:var(--orange); margin-bottom:12px;
  text-shadow:0 1px 0 rgba(255,255,255,0.85);
}

.svc-hero3d h1{
  font-family:var(--font-serif);
  font-size:clamp(2.6rem, 4.2vw, 3.9rem);
  line-height:1.02; letter-spacing:-0.015em;
  color:var(--sh-ink); max-width:none;
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 3px 5px rgba(23,20,18,0.10);
}
/* presentational only — same characters as before */
.svc-hero3d .svh-h1-accent{ display:block; color:var(--orange); }

.svc-hero3d .page-hero-accent{
  width:96px; height:5px; margin:22px 0 24px; border-radius:3px;
  background:linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.85), 0 3px 8px rgba(242,96,12,0.38);
}

.svc-hero3d .lede{
  font-size:1.24rem; line-height:1.7;
  color:var(--charcoal); max-width:520px;
  margin:0 0 30px;
}

/* --------------------------------------------------------------------------
   SERVICE CONTROLS — molded dashboard keys

   NOTE: these six items are <span>, exactly as they were before this
   redesign. They carry no href on the live site, so the control deliberately
   shows NO chevron and NO pointer cursor — the page must not offer an
   affordance it cannot honour. If the six are wired to their service pages
   later, swap <span class="svh-control"> for <a class="svh-control" href="…">
   and the `a.svh-control` rules at the bottom of this block light up.
   -------------------------------------------------------------------------- */
.svc-hero3d .svh-controls{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  max-width:none;
}
.svc-hero3d .svh-control{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid var(--sh-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.07),
    0 10px 20px rgba(23,20,18,0.11);
  font-family:var(--font-sans);
  font-size:1rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.015em;
  line-height:1.16;
  color:var(--sh-ink);
}
/* recessed orange hairline along the foot of each key */
.svc-hero3d .svh-control::after{
  content:"";
  position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(242,96,12,0.12), var(--orange) 48%, rgba(242,96,12,0.12));
  box-shadow:0 -1px 1px rgba(23,20,18,0.12), 0 1px 0 rgba(255,255,255,0.85);
}
.svc-hero3d .svh-ico{
  flex-shrink:0;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#FFFFFF;
  background:radial-gradient(circle at 32% 28%, #FFB066 0%, var(--orange) 55%, var(--orange-dark) 100%);
  border:2px solid var(--white);
  box-shadow:
    0 6px 14px rgba(242,96,12,0.38),
    inset 0 2px 3px rgba(255,255,255,0.6),
    inset 0 -4px 8px rgba(0,0,0,0.22);
}
.svc-hero3d .svh-ico svg{ width:19px; height:19px; }

/* 2026-09-02 — the six are now real links to the routes this page already
   uses further down, so the chevron affordance is restored. */
.svc-hero3d .svh-chev{
  margin-left:auto; padding-left:8px;
  font-size:1.35rem; line-height:1; font-weight:900;
  color:var(--orange-dark);
  text-shadow:0 1px 0 rgba(255,255,255,0.9);
  transition:transform 0.16s ease;
}
.svc-hero3d a.svh-control{
  cursor:pointer;
  text-decoration:none;
  transition:transform 0.16s ease, box-shadow 0.16s ease;
}
.svc-hero3d a.svh-control:hover .svh-chev{ transform:translateX(3px); }
.svc-hero3d a.svh-control:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
.svc-hero3d a.svh-control:hover{
  transform:translateY(-3px);
  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(242,96,12,0.24);
}
.svc-hero3d a.svh-control:active{
  transform:translateY(1px);
  box-shadow:inset 0 3px 8px rgba(0,0,0,0.16), 0 1px 2px rgba(23,20,18,0.10);
}

/* --------------------------------------------------------------------------
   MEDIA COLUMN — the collage, full-bleed inside the housing
   The image is the approved collage saved from the Graphics folder; it is
   used as-is, not recreated and not substituted.
   -------------------------------------------------------------------------- */
.svc-hero3d .svh-media{
  position:relative; z-index:1;
  min-height:100%;
  overflow:hidden;
}
.svc-hero3d .svh-media img{
  display:block;
  width:100%; height:100%;
  min-height:560px;
  object-fit:cover; object-position:56% 46%;
}
/* soft feather so the collage melts into the cream instead of butting it */
.svc-hero3d .svh-media::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--sh-cream-2) 0%, rgba(248,240,227,0.86) 5%,
    rgba(248,240,227,0.34) 13%, rgba(248,240,227,0) 26%);
  pointer-events:none;
  z-index:2;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — stack, do not shrink
   -------------------------------------------------------------------------- */
@media (max-width: 1180px){
  .svc-hero3d .svh-copy{ padding:46px 34px 48px 44px; }
  .svc-hero3d .svh-controls{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:460px; }
  .svc-hero3d .svh-media img{ min-height:600px; }
}

/* Below 980px the two columns become one. The collage moves under the copy so
   the H1 still leads the page, and it keeps a real 16:9 presence instead of
   being squeezed into a strip. */
@media (max-width: 980px){
  .svc-hero3d{ padding:18px 0 22px; }
  .svc-hero3d .svh-housing{ grid-template-columns:1fr; border-radius:26px; }
  .svc-hero3d .svh-housing::before{ inset:11px; border-radius:17px; }
  .svc-hero3d .svh-copy{ padding:42px 34px 30px; }
  .svc-hero3d .svh-controls{ max-width:none; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .svc-hero3d .svh-media{ margin:6px 14px 14px; border-radius:14px; }
  .svc-hero3d .svh-media img{
    min-height:0; aspect-ratio:16/9; height:auto;
    border-radius:14px; object-position:50% 45%;
  }
  .svc-hero3d .svh-media::before{ display:none; }
}

@media (max-width: 760px){
  .svc-hero3d .svh-controls{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px){
  .svc-hero3d{ padding:12px 0 18px; }
  .svc-hero3d .svh-housing{ border-radius:20px; }
  .svc-hero3d .svh-housing::before{ inset:8px; border-radius:13px; border-width:2px; }
  .svc-hero3d .svh-housing::after{
    background-image:
      radial-gradient(circle at 20px 20px, var(--sh-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 20px) 20px, var(--sh-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at 20px calc(100% - 20px), var(--sh-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px),
      radial-gradient(circle at calc(100% - 20px) calc(100% - 20px), var(--sh-screw) 0 3px, #EFE6D6 3px 6px, rgba(0,0,0,0) 6.5px);
  }
  .svc-hero3d .svh-copy{ padding:30px 20px 22px; }
  .svc-hero3d h1{ font-size:2.15rem; }
  .svc-hero3d .lede{ font-size:1.15rem; }
  /* one control per row: the labels stay at full size rather than shrinking */
  .svc-hero3d .svh-controls{ grid-template-columns:1fr; gap:11px; }
  .svc-hero3d .svh-control{ padding:13px 14px; font-size:1.02rem; }
  .svc-hero3d .svh-media{ margin:4px 10px 10px; }
}

@media (prefers-reduced-motion: reduce){
  .svc-hero3d a.svh-control,
  .svc-hero3d .svh-chev{ transition:none; }
  .svc-hero3d a.svh-control:hover{ transform:none; }
  .svc-hero3d a.svh-control:hover .svh-chev{ transform:none; }
}