/* ==========================================================================
   CONTACT PAGE — LOCATION / VISIT CONSOLE (lower half)
   Created 2026-09-02. Reference (approved):
     Graphics/contact-location-3d-redesign-reference.png

   SCOPE: every selector below is under `.cn-loc3d`, a class that exists on
   the contact page's lower section and nowhere else. This file is linked ONLY
   by contact.html and loads after contact.css.

   It does NOT touch:
     - the approved .cn-hero3d hero above it
     - the shared `.content-section` rules in pages.css (used by ~20 pages)
     - the old .cn-panel / .cn-details / .cn-reach rules in contact.css, which
       are now unused on this page but left in place untouched.

   No Call/Text control lives here by design — those stay in the shared header
   and footer. The Get Directions destination is the page's existing one.
   ========================================================================== */

.cn-loc3d{
  --cl-cream-1:#FDF8F0;
  --cl-cream-2:#F8F0E3;
  --cl-cream-3:#F1E6D5;
  --cl-edge:#E1D3BC;
  --cl-screw:#B5A88F;
  --cl-ink:#141110;
  --cl-body:#3B3531;
  --cl-road:#211D1B;

  background:
    radial-gradient(120% 60% at 20% 0%, rgba(242,96,12,0.05) 0%, rgba(242,96,12,0) 60%),
    linear-gradient(180deg, #F7F1E7 0%, #F5EEE2 100%);
  padding:10px 0 48px;
}
.cn-loc3d > .wrap{ max-width:1420px; }

/* --------------------------------------------------------------------------
   HOUSING
   -------------------------------------------------------------------------- */
.cn-loc3d .cnl-housing{
  position:relative;
  padding:26px 28px 28px;
  border-radius:32px;
  border:1px solid var(--cl-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(--cl-cream-1) 0%, var(--cl-cream-2) 50%, var(--cl-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);
}
.cn-loc3d .cnl-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;
}
.cn-loc3d .cnl-housing::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 30px 30px, var(--cl-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px),
    radial-gradient(circle at calc(100% - 30px) 30px, var(--cl-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px),
    radial-gradient(circle at 30px calc(100% - 30px), var(--cl-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(--cl-screw) 0 4.5px, #EFE6D6 4.5px 9px, rgba(0,0,0,0) 9.5px);
  pointer-events:none; z-index:4;
}

.cn-loc3d .cnl-main{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 0.56fr);
  align-items:stretch;
  gap:0;
}

/* --------------------------------------------------------------------------
   LEFT — VISIT OUR SHOP
   -------------------------------------------------------------------------- */
.cn-loc3d .cnl-info{
  padding:30px 34px 30px 28px;
  border-right:1px solid rgba(181,168,143,0.5);
  min-width:0;
}
.cn-loc3d .cnl-info h2{
  font-family:var(--font-sans);
  font-size:clamp(2.4rem, 3.7vw, 3.3rem);   /* ~53px at 1440 */
  font-weight:900; line-height:1;
  letter-spacing:-0.018em; text-transform:uppercase;
  color:var(--cl-ink); margin:0;
  text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 3px 6px rgba(23,20,18,0.10);
}
.cn-loc3d .cnl-info h2 .accent{ color:var(--red); }

.cn-loc3d .cnl-rule{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 22px;
}
.cn-loc3d .cnl-rule::before{
  content:"";
  width:78px; 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-loc3d .cnl-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-loc3d .cnl-list{ list-style:none; margin:0; padding:0; }
.cn-loc3d .cnl-item{
  display:flex; align-items:flex-start; gap:20px;
  padding:20px 0;
}
.cn-loc3d .cnl-item + .cnl-item{ border-top:1px solid rgba(181,168,143,0.45); }
.cn-loc3d .cnl-item:first-child{ padding-top:4px; }
.cn-loc3d .cnl-item:last-child{ padding-bottom:4px; }

/* moulded white disc with a red glyph, as in the reference */
.cn-loc3d .cnl-ico{
  display:flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:50%; flex-shrink:0;
  color:var(--red);
  background:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #FCF7EF 58%, #EDE2D1 100%);
  border:1px solid var(--cl-edge);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.95),
    inset 0 -4px 8px rgba(23,20,18,0.10),
    0 6px 14px rgba(23,20,18,0.14);
}
.cn-loc3d .cnl-ico svg{ width:30px; height:30px; }

.cn-loc3d .cnl-label{
  display:block;
  font-family:var(--font-sans);
  font-size:1.3rem;                     /* 20.8px */
  font-weight:900; line-height:1.2;
  letter-spacing:0.02em; text-transform:uppercase;
  color:var(--red);
  margin-bottom:6px;
  text-shadow:0 1px 0 rgba(255,255,255,0.85);
}
.cn-loc3d .cnl-text{
  font-size:1.15rem;                    /* 18.4px */
  line-height:1.6;
  color:var(--cl-body);
  margin:0;
}

/* --------------------------------------------------------------------------
   CENTRE — LOCATION GUIDE
   Drawn entirely in HTML/CSS so every road name is real, selectable text.
   This is a simple visual guide to the shop's position between the named
   roads, not a navigation map.
   -------------------------------------------------------------------------- */
.cn-loc3d .cnl-map{
  position:relative;
  margin:0 22px;
  padding:16px 0 0;
  min-height:470px;
  min-width:0;
}

/* the address sign card */
.cn-loc3d .cnl-sign{
  position:relative; z-index:5;
  margin:0 auto 12px;
  max-width:420px;
  padding:16px 22px 18px;
  text-align:center;
  border-radius:16px;
  border:3px solid var(--red);
  background:linear-gradient(170deg, #FFFFFF 0%, #FBF6EE 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    0 10px 24px rgba(23,20,18,0.20);
}
.cn-loc3d .cnl-sign-name{
  display:block;
  font-family:var(--font-sans);
  font-size:1.75rem;                    /* 28px */
  font-weight:900; line-height:1.1;
  letter-spacing:0.01em; text-transform:uppercase;
  color:var(--red);
  margin-bottom:8px;
}
.cn-loc3d .cnl-sign-addr{
  display:block;
  font-size:1.15rem;                    /* 18.4px */
  font-weight:700; line-height:1.45;
  color:var(--cl-ink);
}

/* the road plate */
.cn-loc3d .cnl-plate{
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(165deg, #FBF5EC 0%, #F3E9D9 100%);
  box-shadow:inset 0 2px 8px rgba(23,20,18,0.08);
  z-index:1;
}
.cn-loc3d .cnl-road{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #2C2724 0%, var(--cl-road) 48%, #17140F 100%);
  box-shadow:0 4px 10px rgba(23,20,18,0.35);
}
.cn-loc3d .cnl-road span{
  font-family:var(--font-sans);
  font-size:1.15rem;                    /* 18.4px */
  font-weight:900; letter-spacing:0.04em;
  color:#FFFFFF;
  text-shadow:0 2px 3px rgba(0,0,0,0.6);
  white-space:nowrap;
}
/* vertical roads */
.cn-loc3d .cnl-road--v{ top:0; bottom:0; width:52px; flex-direction:column; }
.cn-loc3d .cnl-road--v span{ writing-mode:vertical-rl; }
.cn-loc3d .cnl-road--beltway{ left:11%; }
.cn-loc3d .cnl-road--gessner{ right:9%; }
/* horizontal road */
.cn-loc3d .cnl-road--h{ left:0; right:0; height:52px; top:58%; }
/* the green service road */
.cn-loc3d .cnl-road--fondren{
  left:46%; width:44px; top:calc(58% + 52px); bottom:0;
  background:linear-gradient(180deg, #2F7D4B 0%, #22603A 50%, #17482B 100%);
}
/* dashed centre lines */
.cn-loc3d .cnl-road--v::before{
  content:"";
  position:absolute; top:0; bottom:0; left:50%; width:3px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg, #E8B33A 0 16px, rgba(0,0,0,0) 16px 34px);
  opacity:0.75;
}
.cn-loc3d .cnl-road--h::before{
  content:"";
  position:absolute; left:0; right:0; top:50%; height:3px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, #E8B33A 0 16px, rgba(0,0,0,0) 16px 34px);
  opacity:0.75;
}
.cn-loc3d .cnl-road--fondren::before{ display:none; }

/* the shop marker */
.cn-loc3d .cnl-spot{ /* between Beltway 8 and Fondren Rd, north of Westpark Dr */
  position:absolute;
  left:34%; top:27%;
  z-index:4;
  display:flex; flex-direction:column; align-items:center;
}
.cn-loc3d .cnl-pin{
  width:46px; height:46px;
  color:var(--red);
  filter:drop-shadow(0 6px 10px rgba(23,20,18,0.4));
}
.cn-loc3d .cnl-shop{
  margin-top:-6px;
  padding:9px 14px 11px;
  border-radius:8px;
  border:1px solid #C9BCA4;
  background:linear-gradient(170deg, #FFFDF8 0%, #F0E6D4 100%);
  box-shadow:0 8px 18px rgba(23,20,18,0.28), inset 0 2px 0 rgba(255,255,255,0.9);
  font-family:var(--font-sans);
  font-size:0.94rem; font-weight:900;
  letter-spacing:0.03em; text-transform:uppercase;
  color:var(--red);
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   RIGHT — LOCATION PANEL
   The reference's decorative artwork is placeholder stock, and its body copy
   is lorem ipsum, so neither is reproduced. This panel carries only verified
   project information (the shop address and the page's existing directions
   destination) over an original CSS-drawn decorative field.
   -------------------------------------------------------------------------- */
.cn-loc3d .cnl-side{
  position:relative;
  padding:30px 26px 30px 28px;
  border-left:1px solid rgba(181,168,143,0.5);
  display:flex; flex-direction:column; justify-content:center;
  min-width:0;
  overflow:hidden;
  border-radius:0 20px 20px 0;
}
/* soft organic ground, drawn with gradients only */
.cn-loc3d .cnl-side::before{
  content:"";
  position:absolute; inset:10px 0 10px 12px;
  border-radius:46% 54% 40% 60% / 52% 42% 58% 48%;
  background:
    radial-gradient(60% 50% at 74% 28%, rgba(160,214,205,0.42) 0%, rgba(160,214,205,0) 70%),
    radial-gradient(55% 45% at 30% 74%, rgba(247,206,120,0.34) 0%, rgba(247,206,120,0) 70%),
    linear-gradient(150deg, rgba(226,240,236,0.7) 0%, rgba(250,242,226,0.5) 100%);
  pointer-events:none;
}
/* an outlined pin motif and its dotted approach path */
.cn-loc3d .cnl-side-art{
  position:absolute; right:-6px; bottom:8px;
  width:150px; height:170px;
  color:rgba(23,20,18,0.20);
  pointer-events:none;
}
.cn-loc3d .cnl-side-art svg{ width:100%; height:100%; }

.cn-loc3d .cnl-side-in{ position:relative; z-index:1; }
.cn-loc3d .cnl-side h3{
  font-family:var(--font-sans);
  font-size:1.75rem;                    /* 28px */
  font-weight:900; line-height:1.1;
  letter-spacing:0.01em; text-transform:uppercase;
  color:var(--cl-ink); margin:0 0 16px;
  text-shadow:0 1px 0 rgba(255,255,255,0.9);
}
.cn-loc3d .cnl-side-addr{
  font-size:1.15rem;                    /* 18.4px */
  font-weight:700; line-height:1.6;
  color:var(--cl-ink);
  margin:0 0 22px;
}
.cn-loc3d .cnl-dir{
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 18px;
  white-space:nowrap;
  border-radius:999px;
  border:2px solid var(--red);
  background:linear-gradient(180deg, #FFFFFF 0%, #FAF3E9 100%);
  color:var(--red);
  font-family:var(--font-sans);
  font-size:1.1rem;                     /* 17.6px */
  font-weight:900; letter-spacing:0.03em; text-transform:uppercase;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.95), 0 6px 14px rgba(23,20,18,0.14);
  transition:transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.cn-loc3d .cnl-dir svg{ width:20px; height:20px; flex-shrink:0; }
.cn-loc3d .cnl-dir:hover{
  background:var(--red); color:#FFFFFF; transform:translateY(-2px);
}
.cn-loc3d .cnl-dir:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }

/* --------------------------------------------------------------------------
   BOTTOM INFORMATION BAND
   -------------------------------------------------------------------------- */
.cn-loc3d .cnl-bar{
  position:relative; z-index:2;
  margin-top:22px;
  padding:18px 26px;
  border-radius:22px;
  border:1px solid #8E0D12;
  background:
    radial-gradient(80% 70% at 8% 0%, #C4171E 0%, rgba(196,23,30,0) 62%),
    linear-gradient(168deg, #B31419 0%, var(--red-dark) 55%, #6E090D 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.22),
    inset 0 -4px 10px rgba(0,0,0,0.35),
    0 12px 28px rgba(165,15,21,0.30);
  display:grid;
  grid-template-columns:1.12fr 1fr 1fr 1fr;
  gap:10px;
}
.cn-loc3d .cnl-barfact{
  display:flex; align-items:center; gap:15px;
  padding:6px 12px;
  min-width:0;
}
.cn-loc3d .cnl-barfact + .cnl-barfact{ border-left:1px solid rgba(255,255,255,0.26); }
.cn-loc3d .cnl-bico{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  color:var(--red);
  background:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #FBF5EC 58%, #E7DCC9 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.95),
    inset 0 -4px 8px rgba(23,20,18,0.16),
    0 6px 14px rgba(0,0,0,0.32);
}
.cn-loc3d .cnl-bico svg{ width:26px; height:26px; }
.cn-loc3d .cnl-btext{
  font-family:var(--font-sans);
  font-size:1.1rem;                     /* 17.6px */
  font-weight:800; line-height:1.42;
  color:#FFFFFF;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  min-width:0;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1280px){
  .cn-loc3d .cnl-main{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .cn-loc3d .cnl-side{
    grid-column:1 / -1;
    border-left:0; border-top:1px solid rgba(181,168,143,0.5);
    border-radius:0 0 20px 20px;
    margin-top:8px; padding:26px 20px;
  }
  .cn-loc3d .cnl-bar{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .cn-loc3d .cnl-barfact:nth-child(odd){ border-left:0; }
}
@media (max-width: 900px){
  .cn-loc3d .cnl-main{ grid-template-columns:1fr; }
  .cn-loc3d .cnl-info{ border-right:0; border-bottom:1px solid rgba(181,168,143,0.5); padding:24px 12px 26px; }
  .cn-loc3d .cnl-map{ margin:22px 0 0; }
}
@media (max-width: 640px){
  .cn-loc3d{ padding:6px 0 30px; }
  .cn-loc3d .cnl-housing{ padding:20px 16px; border-radius:24px; }
  .cn-loc3d .cnl-housing::before{ inset:9px; border-radius:16px; }
  .cn-loc3d .cnl-ico{ width:54px; height:54px; }
  .cn-loc3d .cnl-ico svg{ width:26px; height:26px; }
  .cn-loc3d .cnl-map{ min-height:400px; }
  .cn-loc3d .cnl-sign{ max-width:none; }
  .cn-loc3d .cnl-sign-name{ font-size:1.45rem; }
  .cn-loc3d .cnl-bar{ grid-template-columns:1fr; gap:14px; padding:18px; }
  .cn-loc3d .cnl-barfact{ border-left:0 !important; }
}

@media (prefers-reduced-motion: reduce){
  .cn-loc3d .cnl-dir{ transition:none; }
  .cn-loc3d .cnl-dir:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   MAP LABEL PLACEMENT
   Keeps each road name clear of the junctions, as the reference shows.
   -------------------------------------------------------------------------- */
.cn-loc3d .cnl-road--beltway span{ margin-bottom:200px; }
.cn-loc3d .cnl-road--gessner span{ margin-bottom:150px; }
.cn-loc3d .cnl-road--fondren span{ margin-top:40px; }
/* the horizontal label sits on the asphalt, interrupting the centre line */
.cn-loc3d .cnl-road--h span{
  position:relative; z-index:1;
  padding:0 14px;
  background:linear-gradient(180deg, #2C2724 0%, var(--cl-road) 48%, #17140F 100%);
}