/* ==========================================================================
   Contact page — status board, stepped form, live service ticket that
   prints as you type, patch-panel channels, what happens next.
   Loaded only on contact.html, after style.css.
   ========================================================================== */

/* 1. Hero ------------------------------------------------------------------ */
.ct-hero {
  position: relative;
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 2.5rem;
  align-items: end;
  padding: calc(var(--header-h) + clamp(3rem, 11vh, 7rem)) var(--gutter) clamp(3rem, 6vw, 4.5rem);
  isolation: isolate;
}
.ct-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgb(var(--linen-rgb) / .04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(var(--linen-rgb) / .04) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask: radial-gradient(55% 70% at 85% 60%, #000, transparent 75%);
  mask: radial-gradient(55% 70% at 85% 60%, #000, transparent 75%);
}
.ct-hero__text { grid-column: 1 / span 7; display: grid; gap: 1.8rem; }
.ct-hero__lead { max-width: 40ch; font-size: 1.15rem; color: var(--text-2); }

.ct-board { grid-column: 9 / -1; border-top: 1px solid var(--line-2); }
.ct-board__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.ct-board dt { font-size: .82rem; color: var(--text-3); }
.ct-board dd { display: inline-flex; align-items: center; gap: .55rem; text-align: right; font-size: .95rem; }
.ct-board__clock { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ct-board__off { font-size: .75rem; color: var(--text-3); }

/* 2. Form + ticket ----------------------------------------------------------- */
.ct-main {
  display: grid;
  grid-template-columns: var(--grid);
  column-gap: var(--gutter);
  row-gap: 3rem;
  align-items: start;
  padding: 0 var(--gutter) var(--section);
}
.ct-form { grid-column: 1 / span 7; gap: 1.1rem; }
.ct-step {
  position: relative;
  display: grid;
  gap: 1.6rem;
  min-width: 0;
  margin: 0;
  padding: 1.6rem clamp(1.1rem, 2.4vw, 2rem) 1.5rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(15 25 19 / .45);
  transition: border-color .4s, background .4s, box-shadow .4s;
}
.ct-step:focus-within { border-color: rgb(185 234 91 / .45); background: rgb(15 25 19 / .7); box-shadow: 0 24px 50px -36px rgb(185 234 91 / .35); }
.ct-step__head { display: inline-flex; align-items: center; gap: .75rem; float: left; width: 100%; margin-bottom: .2rem; padding: 0; font-family: var(--font-display); font-size: 1.55rem; line-height: 1.1; }
.ct-step__head + * { clear: both; }
.ct-step__n {
  display: grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--line-2);
  font-family: var(--font-sans); font-size: .85rem; color: var(--text-2);
  transition: background .4s, color .4s, border-color .4s, transform .5s var(--ease-spring);
}
.ct-step:focus-within .ct-step__n { border-color: var(--signal); color: var(--signal); }
.ct-step.is-done .ct-step__n { background: var(--signal); border-color: var(--signal); color: transparent; transform: scale(1.06); position: relative; }
.ct-step.is-done .ct-step__n::after { /* check mark */
  content: ""; position: absolute; width: .55rem; height: .3rem; margin-top: -.12rem;
  border-left: 2px solid var(--undergrowth); border-bottom: 2px solid var(--undergrowth); transform: rotate(-45deg);
}
.ct-form .form__foot { padding: .6rem .2rem 0; }

/* the printer */
.ct-printer { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.ct-printer__body {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .7rem;
  height: 4.2rem; padding: 0 1.2rem 0.6rem;
  border: 1px solid rgb(var(--linen-rgb) / .16);
  border-radius: 14px;
  background: linear-gradient(180deg, #2b3d2e, #1b281e);
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .06);
}
.ct-printer__led { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.ct-printer.is-printing .ct-printer__led { animation: led-activity .6s steps(2) infinite; }
.ct-printer__name { font-size: .9rem; color: var(--text-2); }
.ct-printer__count { margin-left: auto; font-family: var(--font-mono); font-size: .8rem; color: var(--text-3); }
.ct-printer__count span { color: var(--signal); }
.ct-printer__slot { position: absolute; left: .9rem; right: .9rem; bottom: .55rem; height: 5px; border-radius: 4px; background: #0a120d; box-shadow: inset 0 2px 3px rgb(0 0 0 / .8); }
.ct-paper-wrap { position: relative; z-index: 1; margin: -.9rem 1.4rem 0; overflow: hidden; height: 0; transition: height .7s var(--ease-out); }
.ct-paper {
  --ink: #1b2a1f; --ink-2: #4c5b4f;
  position: relative;
  padding: 1.7rem 1.35rem 2.2rem;
  background:
    linear-gradient(180deg, rgb(0 0 0 / .12), transparent 1.2rem),
    #ece6d4;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.55;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
  transform: translateY(-101%);
  transition: transform 1.3s var(--ease-out);
}
.ct-printer.is-in .ct-paper { transform: none; }
.ct-paper__brand { text-align: center; font-size: .72rem; letter-spacing: .14em; color: var(--ink-2); }
.ct-paper__id { margin-top: .4rem; text-align: center; font-size: .95rem; }
.ct-paper__id strong { font-weight: 500; }
.ct-paper__date { text-align: center; color: var(--ink-2); }
.ct-paper__cut { margin: .9rem 0; border: 0; border-top: 1.5px dashed rgb(27 42 31 / .35); }
.ct-paper__rows { display: grid; gap: .25rem; }
.ct-paper__rows > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .6rem; padding: .1rem .3rem; margin: 0 -.3rem; border-radius: 3px; transition: background .9s; }
.ct-paper__rows > div.is-printing { background: rgb(185 234 91 / .55); transition: none; }
.ct-paper__rows dt { color: var(--ink-2); text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; padding-top: .1rem; }
.ct-paper__rows dd { overflow-wrap: anywhere; }
.ct-paper__rows dd .dot { display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; vertical-align: .05em; }
.ct-paper__label { color: var(--ink-2); text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; }
.ct-paper__msg { margin-top: .35rem; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 3.1em; }
.ct-paper__ph { color: rgb(27 42 31 / .45); }
.ct-paper__caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--ink); animation: ct-caret 1s steps(1) infinite; }
@keyframes ct-caret { 50% { opacity: 0; } }
.ct-paper__state { display: flex; justify-content: space-between; gap: 1rem; }
.ct-paper__state span { color: var(--ink-2); text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; }
.ct-paper__state strong { font-weight: 500; }
.ct-paper.is-ready .ct-paper__state strong { color: #2f6b22; }
.ct-paper__code { display: block; width: 100%; height: 2.2rem; margin-top: .9rem; }
.ct-paper__code rect { fill: var(--ink); }

.ct-stamp {
  position: absolute; right: 1.1rem; top: 42%;
  padding: .45rem .8rem;
  border: 3px double #2f6b22; border-radius: 6px;
  color: #2f6b22; font-family: var(--font-mono); font-size: .95rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  background: rgb(236 230 212 / .6);
  transform: rotate(-14deg) scale(1.8); opacity: 0; pointer-events: none;
}
.ct-paper.is-stamped .ct-stamp { animation: ct-stamp .55s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes ct-stamp { to { transform: rotate(-14deg) scale(1); opacity: .92; } }

/* 3. Direct channels on a patch panel --------------------------------------- */
.ct-direct { display: grid; gap: 2.5rem; }
.ct-direct__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; }
.ct-direct__note { max-width: 36ch; color: var(--text-2); }
.ct-panel {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem;
  padding: 1.6rem 1.3rem 2.2rem;
  border: 1px solid rgb(var(--linen-rgb) / .16);
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #273829, #18241b);
  box-shadow: 0 40px 80px -50px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .06);
}
.ct-panel__screw { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8f9a88, #3c463b 70%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .4); position: relative; }
.ct-panel__screw::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: rgb(0 0 0 / .45); transform: rotate(35deg); }
.ct-ports { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.ct-port { --c: var(--signal); --c-rgb: 185 234 91; position: relative; display: grid; justify-items: center; gap: .6rem; }
.ct-port--b { --c: var(--amber); --c-rgb: 227 169 78; }
.ct-port__link {
  position: relative; display: grid; justify-items: center; gap: .55rem; width: 100%;
  padding: 1rem .6rem 1.1rem;
  border-radius: 10px;
  text-align: center;
  transition: background .4s;
}
.ct-port__link:hover, .ct-port__link:focus-visible { background: rgb(var(--c-rgb) / .07); }
.ct-port__leds { display: flex; gap: 1.6rem; }
.ct-port__leds i { width: 7px; height: 7px; border-radius: 2px; background: rgb(var(--linen-rgb) / .15); transition: background .3s, box-shadow .3s; }
.ct-port__leds i:first-child { background: var(--c); box-shadow: 0 0 8px var(--c); }
.ct-port__link:hover .ct-port__leds i:last-child, .ct-port__link:focus-visible .ct-port__leds i:last-child { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: led-activity .5s steps(2) infinite; }
.ct-port__jack {
  position: relative;
  width: 4rem; height: 3.1rem;
  background: #070d09;
  box-shadow: inset 0 0 0 2px #36443a, inset 0 6px 10px rgb(0 0 0 / .8);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 76% 72%, 76% 100%, 24% 100%, 24% 72%, 0 72%);
  overflow: hidden;
}
.ct-port__jack::before { /* gold contacts */
  content: ""; position: absolute; left: 18%; right: 18%; top: 4px; height: 9px;
  background: repeating-linear-gradient(90deg, #c9973f 0 2px, transparent 2px 5px);
}
.ct-port__plug {
  position: absolute; left: 10%; right: 10%; top: 26%; bottom: 0;
  background: linear-gradient(180deg, rgb(var(--c-rgb) / .9), rgb(var(--c-rgb) / .55));
  border-radius: 2px 2px 0 0;
  transform: translateY(105%);
  transition: transform .45s var(--ease-spring);
}
.ct-port__link:hover .ct-port__plug, .ct-port__link:focus-visible .ct-port__plug { transform: none; }
.ct-port__link::after { /* the cable hanging below once plugged */
  content: ""; position: absolute; left: 50%; top: calc(1rem + 7px + .55rem + 3.1rem); width: 4px; height: 0; margin-left: -2px;
  border-radius: 0 0 3px 3px; background: linear-gradient(180deg, rgb(var(--c-rgb) / .7), transparent);
  transition: height .5s var(--ease-out) .1s;
}
.ct-port__link:hover::after, .ct-port__link:focus-visible::after { height: 3.5rem; }
.ct-port__k { font-size: .8rem; color: var(--text-3); }
.ct-port__v { font-size: .95rem; color: var(--text); overflow-wrap: anywhere; }
.ct-port__copy { position: absolute; bottom: -1.9rem; }

/* 4. What happens next ------------------------------------------------------- */
.ct-next { display: grid; gap: 2.5rem; padding-top: clamp(3rem, 6vw, 5rem); }
.ct-next__list { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.ct-next__list::before { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: 1.25rem; height: 1px; background: linear-gradient(90deg, var(--signal), var(--amber) 60%, var(--line-2)); }
.ct-next__item { position: relative; display: grid; gap: .7rem; align-content: start; }
.ct-next__n { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--canopy); border: 1px solid var(--signal); color: var(--signal); font-size: .95rem; box-shadow: 0 0 0 6px var(--canopy); margin-bottom: .6rem; }
.ct-next__item:nth-child(2) .ct-next__n { border-color: var(--amber); color: var(--amber); }
.ct-next__item:nth-child(3) .ct-next__n { border-color: var(--linen); color: var(--text); }
.ct-next__t { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-s); line-height: 1.1; }
.ct-next__p { max-width: 34ch; color: var(--text-2); }

/* 5. Responsive --------------------------------------------------------------- */
@media (max-width: 1023px) {
  .ct-hero__text, .ct-board { grid-column: 1 / -1; }
  .ct-form { grid-column: 1 / -1; }
  .ct-printer { grid-column: 1 / -1; position: relative; top: 0; justify-self: center; width: min(100%, 26rem); }
  .ct-ports { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; }
  .ct-next__list { grid-template-columns: 1fr; }
  .ct-next__list::before { left: 1.25rem; right: auto; top: 1.25rem; bottom: 1.25rem; width: 1px; height: auto; background: linear-gradient(180deg, var(--signal), var(--amber) 60%, var(--line-2)); }
  .ct-next__item { grid-template-columns: 2.5rem 1fr; column-gap: 1.2rem; }
  .ct-next__n { grid-row: 1 / span 2; margin: 0; }
}
@media (max-width: 720px) {
  .ct-step .form__row { grid-template-columns: 1fr; gap: 1.6rem; }
  .ct-panel { grid-template-columns: 1fr; padding: 1.2rem .8rem 2.4rem; }
  .ct-panel__screw { display: none; }
}
@media (max-width: 420px) { .ct-ports { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .ct-paper, .ct-paper-wrap { transition: none; transform: none; }
  .ct-port__plug, .ct-port__link::after { transition: none; }
}

/* 6. Port tweaks: bigger jacks, plug only (no cable over the labels) */
.ct-port__link::after { display: none; }
.ct-port__jack { width: 4.8rem; height: 3.6rem; transition: box-shadow .4s; }
.ct-port__link:hover .ct-port__jack, .ct-port__link:focus-visible .ct-port__jack { box-shadow: inset 0 0 0 2px rgb(var(--c-rgb) / .8), inset 0 6px 10px rgb(0 0 0 / .8); }
.ct-port__k { margin-top: .3rem; }
.ct-direct { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* 7. Title spacing (g / š), port icons */
.ct-hero__text h1 { line-height: 1.06; }
.ct-port__k { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--text-2); }
.ct-port__icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgb(var(--c-rgb) / .45); background: rgb(var(--c-rgb) / .08); transition: background .4s, border-color .4s, transform .5s var(--ease-spring); }
.ct-port__icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-port__link:hover .ct-port__icon, .ct-port__link:focus-visible .ct-port__icon { background: rgb(var(--c-rgb) / .2); border-color: var(--c); transform: rotate(-8deg) scale(1.08); }