/* ==========================================================================
   CONTACT PAGE — TOP HERO, 3D moulded dashboard
   Created 2026-09-02. Reference (approved):
     Graphics/contact-hero-3d-redesign-reference.png

   SCOPE: every selector below is under `.cn-hero3d`, a class that exists on
   the contact page hero and nowhere else. This file is linked ONLY by
   contact.html, and it is loaded AFTER contact.css.

   It deliberately does NOT touch:
     - the shared `.page-hero` rules in pages.css (still used by ~20 pages)
     - the shared `.breadcrumb` rules in pages.css (the markup and its
       semantics are unchanged here; only the presentation is re-scoped)
     - the lower "Visit Our Shop" panel, which still uses .cn-panel etc.
       from contact.css and has not been redesigned yet.

   No Call/Text control lives in this hero by design — those stay in the
   shared header and footer.
   ========================================================================== */

.cn-hero3d{
  --ch-cream-1:#FDF8F0;
  --ch-cream-2:#F8F0E3;
  --ch-cream-3:#F1E6D5;
  --ch-edge:#E1D3BC;
  --ch-screw:#B5A88F;
  --ch-ink:#141110;
  --ch-slant:7deg;

  background:
    radial-gradient(120% 60% at 80% 0%, rgba(242,96,12,0.06) 0%, rgba(242,96,12,0) 62%),
    linear-gradient(180deg, #FBF6EE 0%, #F7F1E7 100%);
  padding:34px 0 40px;
}
.cn-hero3d > .wrap{ max-width:1420px; }

/* --------------------------------------------------------------------------
   THE HOUSING
   -------------------------------------------------------------------------- */
.cn-hero3d .cnh-housing{
  position:relative;
  padding:26px 28px 28px;
  border-radius:32px;
  border:1px solid var(--ch-edge);
  background:
    radial-gradient(80% 55% at 6% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(158deg, var(--ch-cream-1) 0%, var(--ch-cream-2) 50%, var(--ch-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 22px 48px rgba(23,20,18,0.14),
    0 48px 96px rgba(23,20,18,0.10);
}
/* recessed illuminated orange trim */
.cn-hero3d .cnh-housing::before{
  content:"";
  position:absolute; inset:12px;
  border-radius:22px;
  border:2px solid rgba(242,96,12,0.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.7),
    0 0 18px rgba(242,96,12,0.28),
    inset 0 0 28px rgba(242,96,12,0.08);
  pointer-events:none; z-index:3;
}
/* metallic corner fasteners */
.cn-hero3d .cnh-housing::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 30px 30px, var(--ch-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px),
    radial-gradient(circle at calc(100% - 30px) 30px, var(--ch-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px),
    radial-gradient(circle at 30px calc(100% - 30px), var(--ch-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px),
    radial-gradient(circle at calc(100% - 30px) calc(100% - 30px), var(--ch-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px);
  pointer-events:none; z-index:4;
}

/* --------------------------------------------------------------------------
   TOP HALF — copy left, collage right
   -------------------------------------------------------------------------- */
.cn-hero3d .cnh-main{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0, 0.62fr) minmax(0, 1fr);
  gap:0;
  align-items:stretch;
}

.cn-hero3d .cnh-copy{
  padding:28px 18px 30px 20px;
  display:flex; flex-direction:column; justify-content:center;
  min-width:0;
}

/* ---- breadcrumb (markup and semantics unchanged, presentation re-scoped) ---- */
.cn-hero3d .breadcrumb{
  display:flex; align-items:center; gap:10px;
  margin:0 0 34px;
  font-family:var(--font-sans);
  font-size:1.0625rem;                  /* 17px */
  font-weight:700;
}
.cn-hero3d .breadcrumb a{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--ch-ink);
  transition:color 0.16s ease;
}
.cn-hero3d .breadcrumb a:hover{ color:var(--red); }
.cn-hero3d .breadcrumb .cnh-home{
  display:inline-flex; color:var(--red);
}
.cn-hero3d .breadcrumb .cnh-home svg{ width:19px; height:19px; }
.cn-hero3d .breadcrumb .sep{ color:#B5A88F; font-weight:600; }
.cn-hero3d .breadcrumb .current{ color:var(--red); }

/* ---- headline ---- */
.cn-hero3d .cnh-copy h1{
  font-family:var(--font-sans);
  font-size:clamp(2.9rem, 4.3vw, 3.875rem);  /* ~62px at 1440 */
  font-weight:900;
  line-height:0.98;
  letter-spacing:-0.026em;
  text-transform:uppercase;
  color:var(--ch-ink);
  margin:0;
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 3px 6px rgba(23,20,18,0.10);
}
.cn-hero3d .cnh-copy h1 .accent{ display:block; color:var(--red); }

/* short red rule + dot, as in the reference */
.cn-hero3d .cnh-rule{
  display:flex; align-items:center; gap:10px;
  margin:24px 0 26px;
}
.cn-hero3d .cnh-rule::before{
  content:"";
  width:86px; height:6px; 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 7px rgba(210,20,27,0.32);
}
.cn-hero3d .cnh-rule::after{
  content:"";
  width:9px; height:9px; border-radius:50%;
  background:var(--red);
  box-shadow:0 1px 0 rgba(255,255,255,0.85);
}

.cn-hero3d .cnh-copy p{
  font-size:1.25rem;                     /* 20px */
  line-height:1.72;
  color:#3B3531;
  margin:0;
  max-width:34ch;
}

/* --------------------------------------------------------------------------
   THE COLLAGE
   Four real project photographs in slanted panels, matching the reference's
   composition. The strip runs wider than its container and is clipped on the
   right, so only the left edge keeps its diagonal — exactly as the reference
   shows it meeting the cream copy area.
   -------------------------------------------------------------------------- */
.cn-hero3d .cnh-visual{
  position:relative;
  min-width:0;
  border-radius:24px;
  min-height:600px;
  overflow:hidden;
}
.cn-hero3d .cnh-collage{
  position:absolute; inset:0;
  overflow:hidden;
}
.cn-hero3d .cnh-strip{
  position:absolute;
  top:0; bottom:0; left:0;
  width:calc(100% + 56px);
  display:flex; gap:8px;
  --s:56px;                       /* horizontal run of the diagonal */
}
/* Each panel is a parallelogram cut with clip-path rather than a skewed box.
   Skewing the box would force a ~34% zoom on every photograph to cover the
   exposed corners; clipping leaves each image at its natural framing. The
   negative left margin makes the diagonals tile with a constant 8px gap. */
.cn-hero3d .cnh-panel{
  position:relative;
  flex:1 1 0; min-width:0;
  background:#100D0C;
  clip-path:polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%);
}
.cn-hero3d .cnh-panel + .cnh-panel{ margin-left:calc(var(--s) * -1); }
.cn-hero3d .cnh-panel img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* per-panel framing so the subject of each photograph stays in its slice */
.cn-hero3d .cnh-panel--interior img{ object-position:40% 46%; }
.cn-hero3d .cnh-panel--tech img{ object-position:80% 40%; }
.cn-hero3d .cnh-panel--roof img{ object-position:28% 44%; }
.cn-hero3d .cnh-panel--shop img{ object-position:20% 40%; }

/* a soft depth wash so the black band below reads as sitting on top */
.cn-hero3d .cnh-collage::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(0,0,0,0.22) 100%);
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   THE BLACK "EXPERTS IN SUNROOF REPAIR" BAND
   -------------------------------------------------------------------------- */
.cn-hero3d .cnh-band{
  position:absolute;
  left:22px; right:14px; bottom:20px;
  z-index:2;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:14px;
  padding:16px 18px 16px 16px;
  border-radius:20px;
  border:1px solid #3A3330;
  background:
    radial-gradient(90% 70% at 12% 0%, #2E2825 0%, rgba(46,40,37,0) 62%),
    linear-gradient(168deg, #262120 0%, #131010 55%, #0A0808 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.14),
    inset 0 -3px 0 rgba(0,0,0,0.6),
    0 14px 34px rgba(0,0,0,0.45);
}

/* ---- left: the SK monogram lockup, drawn in CSS (no new asset) ---- */
.cn-hero3d .cnh-mark{
  display:flex; flex-direction:column; align-items:center;
  gap:2px;
  padding-right:14px;
  border-right:1px solid rgba(255,255,255,0.14);
}
.cn-hero3d .cnh-mark-sk{
  font-family:var(--font-sans);
  font-size:2.7rem; font-weight:900; line-height:1;
  letter-spacing:-0.05em;
  background:linear-gradient(178deg, #FFFFFF 0%, #D9DCE0 34%, #8E949B 56%, #EFF1F3 74%, #A7ADB4 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.55));
}
.cn-hero3d .cnh-mark-name{
  font-family:var(--font-sans);
  font-size:1.04rem; font-weight:900; line-height:1.1;
  letter-spacing:0.045em; text-transform:uppercase;
  color:var(--red);
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
.cn-hero3d .cnh-mark-city{
  font-family:var(--font-sans);
  font-size:0.94rem; font-weight:700; line-height:1.2;
  letter-spacing:0.12em; text-transform:uppercase;
  color:#E6E2DC;
}

/* ---- right: headline, service chips, verified tagline ---- */
.cn-hero3d .cnh-band-body{ min-width:0; }
.cn-hero3d .cnh-band-title{
  font-family:var(--font-sans);
  font-size:2.05rem;                    /* 32.8px */
  /* 2026-09-03 — was `nowrap`, same defect as .cnh-chips li below. The
     headline needs ~500px on one line; .cnh-band-body is only 412px at 768,
     366px at 1100 and 477px at 1280, so the TEXT (not the box) spilled past
     .cnh-visual and was cropped mid-word. Where the line already fits — 1024,
     1440, 1920 — nothing wraps and the rendering is unchanged. */
  white-space:normal;
  font-weight:900; line-height:1.04;
  letter-spacing:0.005em; text-transform:uppercase;
  margin:0 0 14px;
  background:linear-gradient(180deg, #FFFFFF 0%, #E4E6E9 48%, #B8BEC4 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
/* Two clean rows of three. At 17px the six labels no longer fit on one line
   inside the band, so they run 3 + 3 on a fixed grid rather than being
   shrunk — a plain flex-wrap would leave a stray divider at each row start. */
.cn-hero3d .cnh-chips{
  display:grid;
  grid-template-columns:repeat(3, auto);
  justify-content:start;
  align-items:center;
  column-gap:0; row-gap:9px;
  list-style:none; margin:0 0 13px; padding:0;
}
.cn-hero3d .cnh-chips li{
  display:flex; align-items:center; gap:8px;
  padding:2px 14px;
  font-family:var(--font-sans);
  font-size:1.0625rem;                  /* 17px */
  font-weight:800; line-height:1.14;
  letter-spacing:0.01em; text-transform:uppercase;
  color:#F2EFEA;
  /* 2026-09-03 — was `nowrap`. That pinned this 3-column grid to a 530px
     min-content width at EVERY viewport, and .cnh-visual (overflow:hidden)
     cropped whatever did not fit: "Shades" and "Glass" were cut at 768, 800
     and 1280, and four chips were cut at 1100. 1024 and 1440 happened to fall
     in clean pockets, which is why the defect went unnoticed.
     Allowing the labels to wrap removes the floor without touching the grid,
     the font, the dividers or the wording: wherever the row already fits
     (1024, 1440, 1920) max-content is unchanged and nothing wraps, so those
     widths render pixel-identically. */
  white-space:normal;
  border-left:1px solid rgba(255,255,255,0.16);
}
/* first cell of each row carries no divider */
.cn-hero3d .cnh-chips li:nth-child(3n+1){ border-left:0; padding-left:0; }
.cn-hero3d .cnh-chips svg{
  width:17px; height:17px; flex-shrink:0;
  color:var(--red);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.cn-hero3d .cnh-band-tag{
  display:flex; align-items:center; gap:14px;
  margin:0;
  font-family:var(--font-sans);
  font-size:1.0625rem;                  /* 17px */
  font-weight:700; letter-spacing:0.045em; text-transform:uppercase;
  /* 2026-09-03 — was `nowrap`, for the same reason as the headline above. */
  white-space:normal;
  color:#DCD7D0;
}
.cn-hero3d .cnh-band-tag::before,
.cn-hero3d .cnh-band-tag::after{
  content:"";
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--red) 0%, rgba(210,20,27,0) 100%);
}
.cn-hero3d .cnh-band-tag::before{ width:54px; flex-shrink:0; }
.cn-hero3d .cnh-band-tag::after{
  flex:1;
  background:linear-gradient(270deg, var(--red) 0%, rgba(210,20,27,0) 100%);
}

/* --------------------------------------------------------------------------
   BOTTOM INFORMATION ROW — four moulded controls
   -------------------------------------------------------------------------- */
.cn-hero3d .cnh-facts{
  position:relative; z-index:2;
  margin-top:22px;
  padding:20px 26px;
  border-radius:22px;
  border:1px solid var(--ch-edge);
  background:
    radial-gradient(70% 60% at 6% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(170deg, #FFFCF7 0%, #F8F1E6 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.98),
    inset 0 -3px 0 rgba(0,0,0,0.055),
    0 3px 7px rgba(23,20,18,0.07);
  display:grid;
  grid-template-columns:1.06fr 1fr 1fr 1fr;
  gap:12px;
}
.cn-hero3d .cnh-fact{
  display:flex; align-items:center; gap:16px;
  padding:6px 10px;
  min-width:0;
}
.cn-hero3d .cnh-fact + .cnh-fact{ border-left:1px solid rgba(181,168,143,0.55); }
.cn-hero3d .cnh-fico{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex-shrink:0;
  color:var(--red);
  filter:drop-shadow(0 2px 3px rgba(23,20,18,0.22));
}
.cn-hero3d .cnh-fico svg{ width:40px; height:40px; }
.cn-hero3d .cnh-ftext{
  font-family:var(--font-sans);
  font-size:1.0625rem;                  /* 17px */
  font-weight:800; line-height:1.42;
  color:var(--ch-ink);
  text-shadow:0 1px 0 rgba(255,255,255,0.85);
  min-width:0;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — stacks rather than shrinking the desktop composition.
   (Desktop is the only view reviewed so far; 1024 / 390 are still to be
   signed off, so these are sensible defaults, not approved layouts.)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px){
  .cn-hero3d .cnh-main{ grid-template-columns:minmax(0, 0.62fr) minmax(0, 1fr); }
  .cn-hero3d .cnh-band-title{ font-size:2rem; }
  .cn-hero3d .cnh-mark-sk{ font-size:3rem; }
  .cn-hero3d .cnh-facts{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .cn-hero3d .cnh-fact:nth-child(odd){ border-left:0; }
}
@media (max-width: 1024px){
  .cn-hero3d .cnh-main{ grid-template-columns:1fr; }
  .cn-hero3d .cnh-copy{ padding:20px 12px 26px; }
  .cn-hero3d .cnh-copy p{ max-width:60ch; }
  .cn-hero3d .cnh-visual{ position:relative; min-height:520px; }
  .cn-hero3d .cnh-strip{ left:0; width:100%; }
  .cn-hero3d .cnh-band{ left:16px; right:16px; }
}
@media (max-width: 760px){
  .cn-hero3d{ padding:22px 0 28px; }
  .cn-hero3d .cnh-housing{ padding:20px 16px 20px; border-radius:24px; }
  .cn-hero3d .cnh-housing::before{ inset:9px; border-radius:16px; }
  .cn-hero3d .cnh-visual{ min-height:0; }
  .cn-hero3d .cnh-collage{ position:relative; inset:auto; height:300px; }
  .cn-hero3d .cnh-band{
    position:relative; left:auto; right:auto; bottom:auto;
    margin-top:12px;
    grid-template-columns:1fr; gap:16px; justify-items:center; text-align:center;
    padding:20px 18px;
  }
  .cn-hero3d .cnh-mark{ border-right:0; padding-right:0; }
  .cn-hero3d .cnh-band-title{ font-size:1.7rem; }
  .cn-hero3d .cnh-chips{ justify-content:center; }
  .cn-hero3d .cnh-band-tag{ justify-content:center; }
  .cn-hero3d .cnh-facts{ grid-template-columns:1fr; gap:14px; padding:18px; }
  .cn-hero3d .cnh-fact{ border-left:0 !important; }
}

/* --------------------------------------------------------------------------
   MOBILE BAND FIT — added 2026-09-03
   Health-check defect: below ~610px the black "Experts in Sunroof Repair"
   band had its contents cropped on BOTH edges, leaving four of the six
   service chips unreadable.

   Cause chain, all of it created by the max-width:760px block above:
     1. .cnh-band takes justify-items:center there, which stops .cnh-band-body
        being stretched to its grid track and sizes it to MAX-CONTENT instead,
        so it is free to grow wider than the band.
     2. .cnh-chips is a rigid 3-column grid of nowrap items. Its widest row
        ("Factory Sunroof Repair" + "Leaks" + "Shades") measures 530px, and
        that is what the body was sizing to.
     3. .cnh-visual has overflow:hidden, so the 530px block was simply cropped
        - 105px off each side at 320px, 70px at 390px.

   This block relaxes only those three constraints. No colour, spacing,
   wording, graphic, or desktop/tablet rule is touched; every viewport above
   610px renders exactly as approved.
   -------------------------------------------------------------------------- */
@media (max-width: 610px){
  /* 1. size the body to its track rather than to its content */
  .cn-hero3d .cnh-band{ justify-items:stretch; }
  .cn-hero3d .cnh-band-body{ width:100%; }

  /* 2. headline steps down; wrapping itself is now handled globally above */
  .cn-hero3d .cnh-band-title{ font-size:1.55rem; }
  /* Both decorative rules are KEPT. They are pinned to equal fixed widths so
     they sit symmetrically either side of the strapline once it wraps: the
     ::after is flex:1 by default and collapses to nothing the moment the text
     needs a second line, which leaves the left-hand rule orphaned. */
  .cn-hero3d .cnh-band-tag{ flex-wrap:nowrap; }
  .cn-hero3d .cnh-band-tag::before{ width:24px; }
  .cn-hero3d .cnh-band-tag::after{ flex:0 0 24px; }

  /* 3. two equal chip columns, labels allowed to wrap */
  .cn-hero3d .cnh-chips{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    justify-content:stretch;
    column-gap:8px;
  }
  .cn-hero3d .cnh-chips li{
    justify-content:center;
    padding:2px 6px;
    font-size:1rem;                     /* 16px */
  }
  /* dividers follow the two-column rhythm, not the three-column one */
  .cn-hero3d .cnh-chips li:nth-child(3n+1){
    border-left:1px solid rgba(255,255,255,0.16); padding-left:6px;
  }
  .cn-hero3d .cnh-chips li:nth-child(2n+1){ border-left:0; padding-left:6px; }
}

/* Narrowest phones - one chip per row so no label has to break mid-word. */
@media (max-width: 400px){
  .cn-hero3d .cnh-band-title{ font-size:1.35rem; }
  .cn-hero3d .cnh-chips{ grid-template-columns:minmax(0, 1fr); row-gap:8px; }
  /* One chip per row, so no dividers at all. These have to repeat the
     :nth-child() selectors from the block above: a bare `.cnh-chips li` is a
     LOWER specificity than `.cnh-chips li:nth-child(3n+1)` and would leave a
     stray divider tick beside "Factory Sunroof Repair" and "Tracks". */
  .cn-hero3d .cnh-chips li,
  .cn-hero3d .cnh-chips li:nth-child(3n+1),
  .cn-hero3d .cnh-chips li:nth-child(2n+1){
    border-left:0; padding-left:0; padding-right:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .cn-hero3d .breadcrumb a{ transition:none; }
}