/* =============================================================
   VEEDAY CONSULTANTS — contact.css
   Page styles for contact.html only. Loaded after veeday.css and pages.css.
   Signature: "Bengaluru, to the world" (a dot-map table with the office as a beacon).
   ============================================================= */

/* ═════════ HERO ═════════ */
.chero {
  display: flex; flex-direction: column;
  min-height: min(100svh, 900px);
  padding-bottom: 0;
}
.chero::before { opacity: .55; }
.chero__content { position: relative; z-index: 2; }
.chero .phero__title { max-width: 10.6em; text-wrap: balance; }
.croutes__intro .h2, .creg__top .h2, .csocial__head .h2 { text-wrap: balance; }
.chero .phero__lede { max-width: 50ch; }

/* The 3D stage. Without WebGL it shows the still below, so the space is never empty. */
.chero__stage {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.chero__stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: pan-y; pointer-events: none;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.chero__stage.is-live canvas { opacity: 1; }

.chero__anchor { position: absolute; z-index: 1; left: 69%; top: 60%; width: 0; height: 0; --pin: 104px; }
.chero__stage.is-live .chero__anchor { left: 0; top: 0; will-change: transform; }

/* Still: concentric rings lying on the same tilted plane as the map, an amber point and its pin. */
.chero__rings {
  position: absolute; left: -620px; top: -620px; width: 1240px; height: 1240px;
  transform: rotateX(63deg);
  background:
    repeating-radial-gradient(circle, rgba(250, 250, 248, 0) 0 61px, rgba(250, 250, 248, .1) 61px 62px);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 30%, transparent 68%);
          mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 30%, transparent 68%);
}
.chero__rings::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 180, 84, .5) 0, rgba(200, 32, 26, .16) 38%, rgba(200, 32, 26, 0) 70%);
}
.chero__dot {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: #FFE2AE; box-shadow: 0 0 0 5px rgba(242, 180, 84, .22), 0 0 26px 6px rgba(242, 180, 84, .5);
}
.chero__dot::after {
  content: ''; position: absolute; left: 3.5px; bottom: 4px; width: 1px; height: var(--pin);
  background: linear-gradient(0deg, rgba(247, 194, 102, .95), rgba(247, 194, 102, .3));
}
.chero__stage.is-live .chero__rings, .chero__stage.is-live .chero__dot { display: none; }

/* Still frame of the 3D map, used only when the map is not going to appear: scripts off, or the
   page's loader adds 'no-3d' (Data Saver / low memory, no WebGL, failed load, lost context, or not
   live within 8 s). It replaces the rings above. Normal visits never match these rules, so the file
   is never requested. The camera keeps a fixed vertical field of view, so the frame is sized by the
   stage height and centred where the camera centres (63% across on wide screens, which use a view
   offset; the middle on the stacked layout). Edges fade so a cut never shows on very wide screens. */
html:not(.js) .chero__stage:not(.is-live),
.chero__stage.no-3d { container-type: size; }
html:not(.js) .chero__stage:not(.is-live)::before,
.chero__stage.no-3d::before {
  content: ''; position: absolute; z-index: 0; top: 0; left: 63%;
  height: 100%; aspect-ratio: 1200 / 756;
  transform: translateX(-63%);
  background: url(assets/stills/contact-hero-desktop.webp) 0 0 / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  pointer-events: none;
  transition: opacity 1.6s var(--ease);
}
/* The map turned up after all: it fades in over the still, which fades out. */
.chero__stage.no-3d.is-live::before { opacity: 0; }
html:not(.js) .chero__stage .chero__rings, html:not(.js) .chero__stage .chero__dot,
.chero__stage.no-3d .chero__rings, .chero__stage.no-3d .chero__dot { display: none; }
/* Tag on the still's beacon (same place the 3D pins it at this framing). */
html:not(.js) .chero__stage:not(.is-live) .chero__anchor,
.chero__stage.no-3d:not(.is-live) .chero__anchor {
  left: calc(63% + 27.9cqh); top: calc(50% + 21.6cqh); --pin: 12.8cqh;
}

/* The tag at the top of the pin (decorative: the address is real text further down). */
.chero__tag {
  position: absolute; left: 0; top: calc(var(--pin) * -1 - 4px);
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 14px 9px 12px; border-left: 1px solid rgba(247, 194, 102, .8);
  background: rgba(18, 16, 15, .8);
  white-space: nowrap; line-height: 1;
  animation: ctag-in 1.4s var(--ease) 1.3s both;
}
@keyframes ctag-in { from { opacity: 0; } to { opacity: 1; } }
.chero__tag b { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); }
.chero__tag i { font-style: normal; font-size: 11px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: rgba(250, 250, 248, .62); }

/* Veil: keeps the copy readable where the map runs behind it. */
.chero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18, 16, 15, .95) 0%, rgba(18, 16, 15, .88) 28%, rgba(18, 16, 15, .52) 46%, rgba(18, 16, 15, 0) 68%),
    linear-gradient(0deg, rgba(18, 16, 15, .9) 0, rgba(18, 16, 15, .55) 120px, rgba(18, 16, 15, 0) 250px);
}

/* Foot strip: the live clock, whether the office is open, and the hours as text. */
.chero__foot { position: relative; z-index: 2; margin-top: auto; padding-top: clamp(44px, 6vw, 88px); }
.cnow { display: grid; grid-template-columns: auto auto minmax(0, 1fr); border-top: 1px solid var(--line); }
.cnow > div { padding: 20px clamp(22px, 3vw, 48px) 26px 0; }
.cnow > div + div { padding-left: clamp(22px, 3vw, 48px); border-left: 1px solid var(--line); }
.cnow dt { font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--mute); margin-bottom: 9px; }
.cnow dd { font-family: var(--serif); font-size: clamp(19px, 1.75vw, 26px); line-height: 1.25; color: var(--paper); font-variant-numeric: lining-nums tabular-nums; }
.cnow dd small { display: block; margin-top: 7px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--mute); font-variant-numeric: normal; }
.cnow dd small:empty { display: none; }
.cnow__hours span { display: block; }
.cstatus { display: inline-flex; align-items: flex-start; gap: 11px; }
.cstatus::before { content: ''; margin-top: calc(.625em - 4px); width: 8px; height: 8px; border-radius: 50%; flex: none; border: 1px solid rgba(250, 250, 248, .5); transition: background .6s, border-color .6s, box-shadow .6s; }
.cstatus[data-open="1"]::before { background: #F2B454; border-color: #F2B454; box-shadow: 0 0 0 4px rgba(242, 180, 84, .18); }
.cstatus:not([data-open])::before { display: none; }

/* ═════════ ROUTES: phone / email / office, set large ═════════ */
.croutes__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 88px); align-items: end; margin-bottom: clamp(34px, 4.6vw, 64px); }
.croutes__intro .h2 { color: var(--fg); }
.croutes__intro p:not(.h2) { max-width: 46ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; justify-self: end; }

.route {
  position: relative;
  display: grid; grid-template-columns: minmax(130px, .2fr) minmax(0, 1fr) minmax(230px, .32fr);
  column-gap: clamp(20px, 3vw, 56px); align-items: start;
  padding: clamp(30px, 3.8vw, 56px) 0;
  border-top: 1px solid var(--line);
}
.route:last-child { border-bottom: 1px solid var(--line); }
.route::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease);
}
.route:hover::before, .route:focus-within::before { transform: scaleX(1); }
.route__label {
  display: flex; align-items: center; gap: 10px; padding-top: .9em;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--red);
}
.route__label svg { width: 16px; height: 16px; flex: none; }
.route__value {
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.7vw, 70px); line-height: 1.04; letter-spacing: -.022em;
  color: var(--fg); font-variant-numeric: lining-nums; white-space: nowrap;
}
a.route__value {
  justify-self: start; padding: 4px 0 10px;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 100% 1px no-repeat;
  transition: color .35s, background-size .7s var(--ease);
}
a.route__value:hover { color: var(--red); background-size: 38% 1px; }
address.route__value { font-size: clamp(23px, 2.5vw, 37px); line-height: 1.26; letter-spacing: -.014em; white-space: normal; padding-top: 2px; }
.route__aside { display: flex; flex-direction: column; align-items: flex-start; padding-top: .55em; }
.route__note { font-size: 15px; line-height: 1.65; color: var(--mute); }
.route__note b { display: block; font-weight: 500; color: var(--fg); }
.route__note b:empty { display: none; }
.route__go {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--red); transition: color .3s;
}
.route__go span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; }
.route__go:hover { color: var(--fg); }

/* ═════════ TWO DOORS: employers / candidates ═════════ */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.door {
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  min-height: clamp(280px, 27vw, 380px);
  padding: clamp(26px, 3.2vw, 48px);
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink);
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.door::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: translateY(101%); transition: transform .75s var(--ease);
}
.door--candidate::before { background: var(--red); }
.door .eyebrow { margin-bottom: clamp(18px, 2vw, 28px); transition: color .5s; }
.door__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.7vw, 40px); line-height: 1.14; letter-spacing: -.018em; max-width: 15em; text-wrap: balance; }
.door__text { margin-top: 16px; max-width: 44ch; font-size: 15.5px; line-height: 1.7; color: rgba(17, 17, 17, .64); transition: color .5s; }
.door__go { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 600; transition: border-color .5s; }
.door__text + .door__go { margin-top: auto; }
.door__spacer { flex: 1; min-height: 28px; }
/* Touch: no hover, so give the press itself a clear response. */
@media (hover: none) {
  .door { -webkit-tap-highlight-color: transparent; }
  .door:active { border-color: var(--red); }
  .door:active .door__go { color: var(--red); }
  .door:active .arrow { transform: translateX(5px); }
}
@media (hover: hover) {
  .door:hover { color: var(--paper); border-color: transparent; }
  .door:hover::before { transform: none; }
  .door:hover .eyebrow { color: #F0554E; }
  .door--candidate:hover .eyebrow { color: var(--paper); }
  .door:hover .door__text { color: rgba(250, 250, 248, .74); }
  .door:hover .door__go { border-color: rgba(250, 250, 248, .22); }
  .door:hover .arrow { transform: translateX(5px); }
}

/* ═════════ REGISTRATION: the licence number as the statement ═════════ */
.creg {
  overflow: hidden; isolation: isolate;
  padding: clamp(64px, 9vw, 136px) 0 clamp(48px, 6vw, 88px);
  background:
    radial-gradient(60% 90% at 100% 0%, #4a100c 0%, rgba(58, 15, 12, .45) 40%, rgba(18, 16, 15, 0) 74%),
    linear-gradient(170deg, #151211 0%, #12100F 60%, #190c0b 100%);
}
.creg__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 104px); align-items: end; }
.creg__top .eyebrow { margin-bottom: 18px; }
.creg__top p { max-width: 52ch; font-size: 16.5px; line-height: 1.75; }
.creg__plate { margin-top: clamp(40px, 6vw, 88px); border-top: 1px solid var(--line); }
.creg__meta { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0 0; font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--mute); }
.creg__meta span:first-child { color: #F0554E; }
.creg__num {
  display: block; margin: clamp(4px, 1vw, 14px) 0 0 -.035em;
  font-family: var(--serif); font-weight: 400; font-size: min(16.2vw, 226px); line-height: 1.08; letter-spacing: -.012em;
  color: var(--paper); font-variant-numeric: lining-nums; white-space: nowrap;
}

/* ═════════ SOCIAL ═════════ */
.csocial__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 88px); align-items: end; margin-bottom: clamp(30px, 4vw, 56px); }
.csocial__head .eyebrow { margin-bottom: 16px; }
.csocial__head p { max-width: 44ch; font-size: 16.5px; line-height: 1.75; justify-self: end; }
.csocial__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.csocial__link {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(36px, 5vw, 76px);
  padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 30px) clamp(22px, 2.4vw, 30px);
  color: var(--fg); transition: color .35s, background .5s var(--ease);
}
.csocial__link + .csocial__link { border-left: 1px solid var(--line); }
.csocial__link:first-child { padding-left: 0; }
.csocial__link svg { width: 22px; height: 22px; flex: none; }
.csocial__link span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.csocial__link b { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2vw, 30px); line-height: 1.15; letter-spacing: -.012em; }
.csocial__link:hover { color: var(--red); }

/* ═════════ Responsive ═════════ */
@media (max-width: 1180px) {
  /* The beacon sits close to the right edge here: the tag carries the name only. */
  .chero__tag i { display: none; }
}

@media (max-width: 1080px) {
  .route { grid-template-columns: minmax(0, 1fr) minmax(220px, .5fr); row-gap: 18px; }
  .route__label { grid-column: 1 / -1; padding-top: 0; }
  .route__aside { padding-top: .3em; }
}

@media (max-width: 900px) {
  .chero { min-height: 0; }
  .chero__content { order: 1; }
  .chero__stage {
    order: 2; position: relative; inset: auto; width: 100%;
    height: clamp(270px, 76vw, 420px); margin-top: 10px;
  }
  .chero__foot { order: 3; margin-top: 0; padding-top: 0; }
  .chero__anchor { left: 60%; top: 62%; --pin: 84px; }
  .chero__rings { left: -420px; top: -420px; width: 840px; height: 840px; }
  .chero__veil { background: linear-gradient(0deg, rgba(18, 16, 15, .6) 0, rgba(18, 16, 15, 0) 200px); }
  /* On a narrow stage the tag carries the name only, so it never runs off the right edge. */
  .chero__tag i { display: none; }
  /* Still frame on the stacked layout: the phone frame, centred (the camera is centred here). */
  html:not(.js) .chero__stage:not(.is-live)::before,
  .chero__stage.no-3d::before {
    top: 50%; left: 50%; aspect-ratio: 585 / 444;
    transform: translate(-50%, -50%);
    background-image: url(assets/stills/contact-hero-phone.webp);
  }
  html:not(.js) .chero__stage:not(.is-live) .chero__anchor,
  .chero__stage.no-3d:not(.is-live) .chero__anchor {
    left: calc(50% + 11.6cqh); top: calc(50% + 15.5cqh); --pin: 17.6cqh;
  }
  .cnow { grid-template-columns: 1fr 1fr; }
  .cnow > div { padding: 18px 16px 20px 0; }
  .cnow > div + div { padding-left: 18px; }
  .cnow > .cnow__hours { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-bottom: 30px; }

  .croutes__intro, .csocial__head, .creg__top { grid-template-columns: 1fr; align-items: start; }
  .croutes__intro p:not(.h2), .csocial__head p { justify-self: start; }
  .route { grid-template-columns: 1fr; row-gap: 14px; }
  .route__aside { padding-top: 4px; }
  .doors { grid-template-columns: 1fr; }
  .door { min-height: 0; }
  .csocial__links { grid-template-columns: 1fr 1fr; }
  .csocial__link:nth-child(odd) { padding-left: 0; border-left: 0; }
  .csocial__link:nth-child(n+3) { border-top: 1px solid var(--line); }
  .creg__meta { flex-direction: column; gap: 6px; }
  .creg__num { font-size: 17.4vw; }
}

@media (min-width: 601px) and (max-width: 900px) {
  /* Stage wider than 600px: the camera moves in (distance 8.2 against 9.4), so the frame grows. */
  html:not(.js) .chero__stage:not(.is-live)::before,
  .chero__stage.no-3d::before {
    height: 114.6%;
    /* The frame is narrower than the stage here: let its sides dissolve rather than end. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  }
  html:not(.js) .chero__stage:not(.is-live) .chero__anchor,
  .chero__stage.no-3d:not(.is-live) .chero__anchor {
    left: calc(50% + 13.3cqh); top: calc(50% + 17.8cqh); --pin: 20.2cqh;
  }
}

@media (max-width: 560px) {
  /* The clock is short; give the open/closed status the wider column so it rarely wraps. */
  .cnow { grid-template-columns: auto minmax(0, 1fr); }
  .cstatus { gap: 9px; }
  .phero__ctas .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; gap: 10px; padding-left: 20px; padding-right: 20px; }
  .phero__ctas .btn span { text-wrap: balance; }
  .route__value { font-size: clamp(27px, 8.9vw, 40px); }
  a.route__value { padding: 8px 0 12px; }
  address.route__value { font-size: 22px; }
  .csocial__links { grid-template-columns: 1fr; }
  .csocial__link, .csocial__link:first-child { flex-direction: row; align-items: center; gap: 16px; min-height: 66px; padding: 14px 2px; border-left: 0; }
  .csocial__link + .csocial__link { border-left: 0; border-top: 1px solid var(--line); }
  .csocial__link span { flex: 1; }
}

/* Phones held sideways: keep the hero compact and the map shorter than the screen. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .chero { padding-top: 88px; }
  .chero .phero__eyebrow { margin-bottom: 14px; }
  .chero .phero__title { font-size: clamp(34px, 5vw, 42px); max-width: 14em; }
  .chero .phero__lede { margin-top: 12px; max-width: 70ch; font-size: 15px; line-height: 1.6; }
  .chero .phero__ctas { margin-top: 18px; }
  .chero__stage { height: clamp(220px, 70vh, 300px); }
  .chero__anchor { top: 66%; --pin: 64px; }
}

@media (max-width: 380px) {
  /* 360px Androids: keep "Submit your profile for jobs abroad" on one line. */
  .phero__ctas .btn { padding-left: 18px; padding-right: 16px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chero__stage canvas, .chero__stage::before { transition: none; }
  .chero__tag { animation: none; }
}