/* lower4/contact.css - #contact "Machined city plate" (below-v4, option C-A).
   The section is one face-milled aluminium plate in hero silver; the details sit straight on it (no card) and the city
   is milled into it as a square pocket: Gulf -> Dubai -> Naif, five Blender relief levels cross-fading on a canvas,
   32A Street inlaid in navy along its full OSM length. Ambient: a specular sweep crosses the plate (under the text). */
.l4-contact {
  background: var(--l4-silver) url("assets/lower4/contact/milled.webp") 0 0 / 480px 240px;
  padding: var(--l4-sec) 0 clamp(40px, 5vw, 72px);
  box-shadow: inset 0 1px 0 rgba(16, 48, 92, .55);   /* straight navy hairline over the section above */
}
/* specular sweep: a soft band of light travelling across the whole plate; below the text, so the number sits on it */
.ct-sweep { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; }
.ct-sweep i {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 46vw; display: block;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .16) 38%, rgba(255, 255, 255, .42) 50%,
    rgba(255, 255, 255, .16) 62%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-50vw, 0, 0) skewX(-16deg); will-change: transform;
}
.ct-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: stretch; }

/* ---- details ---- */
.ct-info { position: relative; z-index: 3; display: flex; flex-direction: column; padding-bottom: 8px; }
.ct-title { color: var(--l4-ink); }
.ct-label { display: block; color: var(--l4-ink-2); margin: 0 0 12px; }
.ct-phone { margin-top: 56px; }
.ct-num {
  display: inline-block; font: 600 clamp(48px, 5.2vw, 76px)/.95 var(--display); color: var(--l4-navy); letter-spacing: .004em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);   /* reads as printed on the metal, not floating */
}
.ct-num:hover { color: #0B2445; }
.ct-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; margin-top: 26px; }
.l4-contact .ct-wa { box-shadow: 0 10px 22px -12px rgba(7, 48, 26, .55); }
.ct-mail {
  font: 500 19px/1 var(--body); color: var(--l4-ink); padding-bottom: 5px;
  border-bottom: 1.5px solid rgba(16, 48, 92, .35); transition: border-color .18s var(--l4-ease), color .18s var(--l4-ease);
}
.ct-mail:hover { color: var(--l4-navy); border-color: var(--l4-navy); }
/* the details as an engraved spec plate: mono labels in a left column, values beside them */
.ct-dl { margin: 48px 0 0; border-top: 1px solid rgba(16, 48, 92, .3); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset; }
.ct-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; padding: 20px 0 19px; border-bottom: 1px solid rgba(16, 48, 92, .14); }
.ct-row .ct-label { margin: 5px 0 0; }
.ct-dl dd { margin: 0; font: 400 17px/27px var(--body); color: var(--l4-ink); }
.ct-nw { white-space: nowrap; }
.ct-line { display: block; }
.ct-mut { color: var(--l4-ink-2); }
.ct-status {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; padding: 7px 13px 7px 11px; border-radius: 999px;
  font: 500 14px/1 var(--body); color: var(--l4-ink-2); background: rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 1px rgba(16, 48, 92, .2), 0 1px 0 rgba(255, 255, 255, .8) inset;
}
.ct-status[hidden] { display: none; }
.ct-status i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #7B8590; box-sizing: border-box; }
.ct-status.is-open { color: var(--l4-navy); }
.ct-status.is-open i { background: var(--l4-navy); border-color: var(--l4-navy); box-shadow: 0 0 0 3px rgba(16, 48, 92, .16); }
.ct-langs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; }
.ct-langs [lang="ar"] { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, var(--body); font-size: 18px; }
.ct-maplink {
  display: inline-block; margin-top: 12px; font: 600 15px/1 var(--body); color: var(--l4-navy); padding-bottom: 4px;
  border-bottom: 1.5px solid rgba(16, 48, 92, .4); transition: border-color .18s var(--l4-ease);
}
.ct-maplink:hover { border-color: var(--l4-navy); }
.ct-ship { margin-top: auto; padding-top: 40px; font: 400 18px/1.55 var(--body); color: var(--l4-ink-2); }

/* ---- the milled pocket ---- */
.ct-map { position: relative; z-index: 2; display: flex; flex-direction: column; }
.ct-pocket {
  position: relative; flex: 1; min-height: 640px; overflow: hidden; background: #B9C0C8; contain: layout paint;
  /* a square pocket cut into the plate: light from the north-west, so the north and west walls throw shadow onto the
     floor and the south and east walls catch light; a fine chamfer runs round the rim */
  box-shadow: 0 0 0 1px rgba(64, 78, 94, .5), 0 1px 0 1px rgba(255, 255, 255, .85), -1px -1px 0 1px rgba(110, 122, 136, .35);
}
.ct-pocket::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  box-shadow: inset 9px 11px 14px -6px rgba(16, 28, 44, .42), inset 0 3px 0 rgba(30, 42, 58, .28), inset 3px 0 0 rgba(30, 42, 58, .2),
    inset -2px -2px 0 rgba(255, 255, 255, .55);
}
.ct-still, .ct-cv { position: absolute; left: 0; top: 0; display: block; max-width: none; }
.ct-cv { width: 100%; height: 100%; z-index: 1; }
/* static final framing (no JS / reduced motion): positioned by contact.js from the same numbers as the canvas */
.ct-still { width: 100%; height: 100%; object-fit: cover; z-index: 0; transform-origin: 0 0; }
.ct-ring {
  position: absolute; left: 0; top: 0; z-index: 3; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%;
  border: 2px solid var(--l4-gold); box-shadow: 0 0 0 5px rgba(227, 179, 65, .14); opacity: 0; pointer-events: none;
}
.ct-city {
  position: absolute; left: 0; top: 0; z-index: 3; color: var(--l4-navy); opacity: 0; pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.ct-district {
  position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; pointer-events: none;
  font: 600 15px/1 var(--mono); letter-spacing: .62em; text-transform: uppercase; color: rgba(40, 52, 66, .72);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.ct-road {
  position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; pointer-events: none; white-space: nowrap; transform-origin: 0 0;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #2E3946;
  text-shadow: 0 0 3px rgba(255, 255, 255, .85), 0 1px 0 rgba(255, 255, 255, .8);
}
.ct-road[hidden] { display: none; }
.ct-tag { position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: center; opacity: 0; pointer-events: none; }
.ct-tag i { display: block; width: 40px; height: 1.5px; background: var(--l4-navy); }
.ct-tag b {
  display: block; font-weight: 600; color: #fff; background: var(--l4-navy); padding: 8px 10px 7px; border-radius: 2px;
  white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(10, 26, 50, .55), 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.ct-scale { position: absolute; left: 22px; bottom: 20px; z-index: 4; display: flex; flex-direction: column; gap: 6px; color: #2E3946; pointer-events: none; }
.ct-scale b { font-weight: 600; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.ct-scale i { display: block; height: 6px; width: 80px; border: 1.5px solid #2E3946; border-top: 0; transform-origin: 0 0; }
.ct-attr {
  align-self: flex-end; margin-top: 12px; font: 500 11px/1.3 var(--mono); letter-spacing: .03em; color: var(--l4-ink-2);
  border-bottom: 1px solid rgba(75, 84, 92, .35);
}
.ct-attr:hover { color: var(--l4-navy); }

@media (max-width: 1100px) {
  .ct-grid { column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ct-row { grid-template-columns: 1fr; row-gap: 8px; }
  .ct-row .ct-label { margin: 0; }
}
@media (max-width: 760px) {
  .l4-contact { padding-bottom: 40px; }
  .ct-grid { display: block; }
  .ct-phone { margin-top: 36px; }
  .ct-actions { gap: 16px 22px; }
  .ct-dl { margin-top: 36px; }
  .ct-row { grid-template-columns: 1fr; row-gap: 8px; padding: 18px 0 17px; }
  .ct-row .ct-label { margin: 0; }
  .ct-nw { white-space: normal; }
  .ct-ship { margin-top: 0; padding-top: 30px; }
  .ct-map { margin-top: 44px; }
  .ct-pocket { flex: none; min-height: 0; height: 460px; }
  .ct-attr { align-self: flex-start; }
  .ct-sweep i { width: 80vw; }
}

/* below.css (an older, still-linked stylesheet) also styles .ct-langs; keep ours exactly as designed */
.l4-contact .ct-langs { margin-top: 0; font: inherit; letter-spacing: normal; color: inherit; }
.l4-contact .ct-langs span + span::before { content: none; }

/* ambient: a soft light pulse travelling along the inlaid 32A Street line (path set in metres by contact.js) */
.ct-flow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; opacity: 0; }
.ct-flow-p { fill: none; stroke: #9CC4FF; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .2 .8; stroke-dashoffset: .2; opacity: .75; }