/*! ===========================================================================
 *  ARXEON DESIGN SYSTEM — "PRISM"
 *  CONTACT.ASPX · COME IN                                            round 90
 *  ---------------------------------------------------------------------------
 *  Three doorways in a dark room, each a way in: a new project (the
 *  assistant), your project (sign in) and anything else (info@arxeon.ca).
 *  Light stands in each doorway and spills onto the floor. Each door is
 *  ajar; pointing at it, or reaching it with the keyboard, opens it further,
 *  and its light reaches out across the floor toward the visitor.
 *
 *  The lamp: Scripts/arxeon.contact.js sets, per door, the angle from the
 *  doorway to the visitor's pointer (--ax-come-a) and how near it is
 *  (--ax-come-i). Each frame catches the light only on the side facing the
 *  pointer, as the site's buttons do. Without the script the lamp hangs
 *  above the room, so every frame is lit from the top.
 *
 *  Only the system's tokens: the neutral inks, the one accent, Manrope.
 *  The light in the doorways is the near-white of the headlines with a
 *  breath of the accent at its edge.
 * ========================================================================== */

.ax-come {
  position: relative;
  padding-block: clamp(2rem, 1rem + 3.6vw, 4.5rem) clamp(3rem, 1.6rem + 5vw, 6.25rem);
  overflow: clip;
}

.ax-come__stage {
  display: grid;
  row-gap: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
}

/* ── the words ───────────────────────────────────────────────────────────── */

.ax-come__head {
  display: grid;
  justify-items: start;
  row-gap: var(--ax-sp-7);
  max-inline-size: 46rem;
}

.ax-come__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-5);
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  font-weight: var(--ax-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-text-body);
}
.ax-come__eyebrow::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 1px;
  background: rgb(var(--ax-white-rgb) / .42);
  transform: rotate(-60deg);
}

.ax-come__title {
  margin: 0;
  font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5rem);
  line-height: 1;
  font-weight: var(--ax-fw-bold);
  letter-spacing: -.045em;
  color: var(--ax-text-strong);
}

.ax-come__lead {
  margin: 0;
  max-inline-size: 40ch;
  font-size: clamp(1rem, .92rem + .26vw, 1.22rem);
  line-height: 1.6;
  color: var(--ax-text-muted);
  text-wrap: pretty;
}

/* ── the room ────────────────────────────────────────────────────────────── */

.ax-come__room {
  /* a door's size, and the space above its doorway inside its link */
  --ax-come-w: clamp(116px, 5.4rem + 5.6vw, 188px);
  --ax-come-h: calc(var(--ax-come-w) * 1.62);
  --ax-come-pad: var(--ax-sp-7);
  /* the lamp: the room's own pixels; by default above the room's middle */
  --ax-come-x: 50%;
  --ax-come-y: -18%;
  position: relative;
  isolation: isolate;
}

/* The wall: dark, with the lamp's own pool of light on it. */
.ax-come__wall {
  position: absolute;
  inset: -60% -20% -10%;
  z-index: -2;
  pointer-events: none;
  /* (larger than the room on every side, so the pool is never cut) */
  background:
    radial-gradient(440px 340px at calc(var(--ax-come-x) + 20%) calc(var(--ax-come-y) + 60%), rgb(var(--ax-white-rgb) / .045), transparent 70%);
}

.ax-come__doors {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1rem, .2rem + 2.8vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The floor: the line where the wall meets it, across the whole page, and
   its sheen fading toward the visitor. */
.ax-come__doors::before,
.ax-come__doors::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: calc(50% - 50vw);
  top: calc(var(--ax-come-pad) + var(--ax-come-h));
  pointer-events: none;
}
.ax-come__doors::before {
  block-size: 1px;
  background: linear-gradient(to right, transparent, rgb(var(--ax-white-rgb) / .1) 18%, rgb(var(--ax-white-rgb) / .1) 82%, transparent);
}
.ax-come__doors::after {
  block-size: clamp(160px, 22vw, 300px);
  background: linear-gradient(to bottom, rgb(var(--ax-white-rgb) / .022), transparent);
}

.ax-come__door {
  /* how open: 0 ajar, 1 open (set by the hover and focus states below) */
  --ax-come-o: 0;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  row-gap: var(--ax-sp-3);
}

/* One link per door: the doorway, the name, the line, where it goes. */
.ax-come__way {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  inline-size: 100%;
  padding: var(--ax-come-pad) var(--ax-sp-5) var(--ax-sp-6);
  border-radius: var(--ax-r-lg);
  color: inherit;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ax-come__way:focus-visible { border-radius: var(--ax-r-lg); }

/* ── a doorway ───────────────────────────────────────────────────────────── */

.ax-come__frame {
  position: relative;
  display: block;
  inline-size: var(--ax-come-w);
  block-size: var(--ax-come-h);
  margin-block-end: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  perspective: 820px;
  perspective-origin: 50% 42%;
}

/* What stands in the doorway: the near-white of the headlines, pooled
   toward the floor of the room beyond, a breath of the accent at the edge.
   It comes on, door after door, as the page opens. */
.ax-come__light {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background:
    radial-gradient(120% 56% at 50% 100%, rgb(255 255 255 / .9), rgb(255 255 255 / 0)),
    linear-gradient(to bottom, rgb(204 212 228 / .5), rgb(232 237 246 / .82) 68%, rgb(245 246 250 / .94));
  box-shadow: inset 0 0 28px rgb(var(--ax-accent-text-rgb) / .2);
  animation: ax-come-on 1.15s var(--ax-ease-out) both;
  animation-delay: calc(.25s + var(--ax-come-n, 0) * .17s);
}

@keyframes ax-come-on {
  0%   { opacity: 0; }
  38%  { opacity: .55; }
  46%  { opacity: .2; }
  100% { opacity: 1; }
}
@keyframes ax-come-spill-on {
  0%   { opacity: 0; }
  38%  { opacity: .34; }
  46%  { opacity: .12; }
  100% { opacity: .62; }
}

/* The door itself, hinged on the left, swinging away into the light. */
.ax-come__leaf {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: rotateY(calc(22deg + 50deg * var(--ax-come-o)));
  background:
    linear-gradient(to right, rgb(var(--ax-white-rgb) / .045), transparent 12%),
    linear-gradient(to bottom, #141416, #0C0C0D 72%, #0F0F11);
  box-shadow: inset -1px 0 0 rgb(var(--ax-white-rgb) / .16);
  transition: transform .8s var(--ax-ease-out);
}

/* The frame, lit by the lamp on the side facing it. */
.ax-come__rim {
  --ax-come-k: var(--ax-come-i, .55);
  position: absolute;
  inset: -3px;
  border-radius: 4px;
  padding: 1.5px;
  background: linear-gradient(var(--ax-come-a, 180deg),
    rgb(var(--ax-white-rgb) / calc(.82 * var(--ax-come-k))) 0%,
    rgb(var(--ax-white-rgb) / calc(.2 * var(--ax-come-k))) 36%,
    rgb(var(--ax-white-rgb) / .045) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* The light on the floor. Through the gap of a door ajar it is a narrow
   blade; with the door open it is the doorway's whole width, widening
   toward the visitor. */
.ax-come__spill {
  position: absolute;
  top: calc(var(--ax-come-pad) + var(--ax-come-h));
  left: 50%;
  display: block;
  inline-size: calc(var(--ax-come-w) * 2.2);
  block-size: calc(var(--ax-come-h) * .3);
  translate: -50% 0;
  transform-origin: 50% 0;
  scale: 1 calc(1 + .5 * var(--ax-come-o));
  background: linear-gradient(to bottom, rgb(232 238 250 / .3), rgb(232 238 250 / .09) 46%, transparent 92%);
  clip-path: polygon(60% 0, 72.7% 0, 90% 100%, 64% 100%);
  opacity: calc(.62 + .38 * var(--ax-come-o));
  filter: blur(5px);
  pointer-events: none;
  /* (backwards only: once on, its opacity is the door's again) */
  animation: ax-come-spill-on 1.15s var(--ax-ease-out) backwards;
  animation-delay: calc(.25s + var(--ax-come-n, 0) * .17s);
  transition: clip-path .8s var(--ax-ease-out), scale .8s var(--ax-ease-out), opacity .8s var(--ax-ease-out);
}

/* ── the words on each door ──────────────────────────────────────────────── */

.ax-come__name {
  display: block;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.44rem);
  line-height: 1.2;
  font-weight: var(--ax-fw-semibold);
  letter-spacing: -.02em;
  color: var(--ax-text);
  transition: color .4s var(--ax-ease);
}

.ax-come__line {
  display: block;
  max-inline-size: 30ch;
  margin-block-start: var(--ax-sp-4);
  font-size: var(--ax-fs-sm);
  line-height: 1.55;
  color: var(--ax-text-muted);
  text-wrap: pretty;
}

.ax-come__go {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-3);
  margin-block-start: var(--ax-sp-6);
  font-size: var(--ax-fs-sm);
  font-weight: var(--ax-fw-semibold);
  line-height: 1.3;
  color: var(--ax-accent-text);
}
.ax-come__arrow {
  inline-size: 14px;
  block-size: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate .45s var(--ax-ease-out);
}

/* The Copy button sits under the address it copies. */
.ax-come__copy {
  gap: var(--ax-sp-3);
  margin-block-start: calc(var(--ax-sp-3) * -1);
}
.ax-come__icon {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ax-come__copy[data-copied] { color: var(--ax-text-strong); }

/* ── open: pointed at, or reached with the keyboard ──────────────────────── */

.ax-come__way:focus-visible { --ax-come-o: 1; }
@media (hover: hover) {
  .ax-come__way:hover { --ax-come-o: 1; }
}
.ax-come__way:focus-visible .ax-come__spill { clip-path: polygon(27.3% 0, 72.7% 0, 100% 100%, 0 100%); }
.ax-come__way:focus-visible .ax-come__name { color: var(--ax-text-strong); }
.ax-come__way:focus-visible .ax-come__arrow { translate: 3px 0; }
@media (hover: hover) {
  .ax-come__way:hover .ax-come__spill { clip-path: polygon(27.3% 0, 72.7% 0, 100% 100%, 0 100%); }
  .ax-come__way:hover .ax-come__name { color: var(--ax-text-strong); }
  .ax-come__way:hover .ax-come__arrow { translate: 3px 0; }
}

/* ── under the room: where we are, and the time there ────────────────────── */

.ax-come__base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ax-sp-5) var(--ax-sp-9);
  padding-block-start: var(--ax-sp-8);
  border-block-start: 1px solid var(--ax-line);
  font-size: var(--ax-fs-sm);
  line-height: 1.55;
  color: var(--ax-text-muted);
}
.ax-come__where {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ax-sp-5);
  font-style: normal;
}
.ax-come__org {
  font-weight: var(--ax-fw-semibold);
  color: var(--ax-text-body);
}
.ax-come__when {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ax-come__map {
  color: var(--ax-accent-text);
  font-weight: var(--ax-fw-medium);
  text-decoration: none;
  border-radius: var(--ax-r-xs);
}
.ax-come__map:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── round 102: the company on record ─────────────────────────────────────
   What the Alberta registry shows, as a quiet spec sheet under the address:
   labels in the mono voice the site uses for data, values in the body face. */

.ax-come__reg {
  margin-block-start: var(--ax-sp-8);
  padding-block-start: var(--ax-sp-7);
  border-block-start: 1px solid var(--ax-line);
}
.ax-come__reghead {
  margin: 0 0 var(--ax-sp-5);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ax-text-subtle);
}
.ax-come__regs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ax-sp-5) var(--ax-sp-8);
  margin: 0;
}
@media (min-width: 600px) {
  .ax-come__regs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1520px) {
  /* six facts, one row (round 105: the date of incorporation is gone) */
  .ax-come__regs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.ax-come__regs > div { min-inline-size: 0; }
.ax-come__regs dt {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ax-text-subtle);
}
.ax-come__regs dd {
  margin: var(--ax-sp-2) 0 0;
  font-size: var(--ax-fs-sm);
  line-height: 1.5;
  color: var(--ax-text-body);
  font-variant-numeric: tabular-nums;
}

/* ── a phone: the doors one under another, each beside its words ─────────── */

@media (max-width: 599.98px) {
  .ax-come__room {
    --ax-come-w: 78px;
    --ax-come-pad: var(--ax-sp-5);
  }
  .ax-come__doors {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--ax-sp-5);
  }
  /* each door stands on its own floor */
  .ax-come__doors::before,
  .ax-come__doors::after { display: none; }
  .ax-come__door { justify-items: stretch; }
  .ax-come__way {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--ax-sp-8);
    justify-items: start;
    align-items: start;
    padding: var(--ax-come-pad) var(--ax-sp-4) var(--ax-come-pad) var(--ax-sp-5);
    text-align: start;
  }
  .ax-come__frame {
    grid-row: 1 / span 3;
    margin-block-end: var(--ax-sp-9);
  }
  .ax-come__frame::after {
    content: "";
    position: absolute;
    inset-inline: -40%;
    top: 100%;
    block-size: 1px;
    background: linear-gradient(to right, transparent, rgb(var(--ax-white-rgb) / .12), transparent);
  }
  .ax-come__spill {
    left: calc(var(--ax-sp-5) + var(--ax-come-w) / 2);
  }
  .ax-come__name,
  .ax-come__line,
  .ax-come__go { grid-column: 2; }
  .ax-come__name { margin-block-start: var(--ax-sp-3); }
  .ax-come__line { margin-block-start: var(--ax-sp-3); }
  .ax-come__go { margin-block-start: var(--ax-sp-5); }
  .ax-come__copy {
    justify-self: start;
    margin-block-start: calc(var(--ax-sp-4) * -1);
    margin-inline-start: calc(var(--ax-sp-5) + var(--ax-come-w) + var(--ax-sp-8));
  }
  .ax-come__base {
    flex-direction: column;
    gap: var(--ax-sp-3);
  }
}

/* ── no motion wanted ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ax-come__light,
  .ax-come__spill { animation: none; }
  .ax-come__leaf,
  .ax-come__spill,
  .ax-come__name,
  .ax-come__arrow { transition-duration: .01s; }
}

/* ── the system's colours replaced: the doorways keep an outline ─────────── */

@media (forced-colors: active) {
  .ax-come__frame { outline: 1px solid CanvasText; }
  .ax-come__leaf,
  .ax-come__spill,
  .ax-come__wall { display: none; }
}