/* WiseApps Group components. Values come from tokens.css only.
   Motion: main.js adds it; everything here reads and works without it. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + var(--s-4)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: var(--ring); border-radius: var(--r-s); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: var(--s-4); top: calc(-1 * var(--s-9));
  z-index: 40; padding: var(--s-3) var(--s-4);
  background: var(--ink); color: var(--paper); border-radius: var(--r-s); font-weight: 600;
}
.skip:focus { top: var(--s-4); }

/* Type pieces */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--size-label); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-4);
}
.title {
  color: var(--ink); font-weight: 700; font-size: var(--size-title);
  line-height: 1.08; letter-spacing: var(--track-head); text-wrap: balance;
}
.title em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--accent); letter-spacing: 0; font-size: 1.08em; line-height: 0.9;
}
.lead { font-size: var(--size-lead); color: var(--ink-body); max-width: 38rem; margin-top: var(--s-5); text-wrap: pretty; }
.num { font-family: var(--font-mono); font-size: var(--size-label); font-weight: 500; letter-spacing: var(--track-label); color: var(--accent); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--s-5);
  border: var(--hair) solid var(--ink); border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: var(--size-body); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn:active { scale: 0.97; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--small { padding: 0 var(--s-4); font-size: var(--size-small); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--on-night { background: transparent; color: var(--night-text); border-color: var(--night-line); }
.btn--on-night:hover { background: transparent; border-color: var(--night-text); }
.btn--light { background: var(--night-text); color: var(--night); border-color: var(--night-text); }
.btn--light:hover { background: var(--accent-on-night); border-color: var(--accent-on-night); color: var(--night); }

/* Scroll progress: a thin orange line along the top. */
.progress { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--rule); pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--accent-on-night); transform: scaleX(0); transform-origin: 0 50%; }

/* Header: paper by default; light text while it sits over the dark hero (main.js sets data-over-hero). */
.header {
  position: fixed; inset: 0 0 auto; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: var(--hair) solid transparent;
  transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.header[data-scrolled] { border-bottom-color: var(--line); }
.header[data-over-hero] { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: var(--header-h); }
.logo {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap);
  color: var(--ink); font-weight: 700; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: color var(--t-med) var(--ease);
}
.mark { width: 1.75rem; height: 1.75rem; flex: none; overflow: visible; }
.mark rect { stroke: var(--paper); transition: transform var(--t-med) var(--ease-out), fill var(--t-med) var(--ease), stroke var(--t-med) var(--ease); }
.mark__a { fill: var(--ink); }
.mark__b { fill: var(--muted); }
.mark__c { fill: var(--accent); }
.logo:hover .mark__a { transform: translate(-5px, 5px); }
.logo:hover .mark__c { transform: translate(5px, -5px); }
.logo__group { color: var(--muted); font-weight: 400; transition: color var(--t-med) var(--ease); }
.logo--light, .header[data-over-hero] .logo { color: var(--night-text); }
.logo--light .mark rect, .header[data-over-hero] .mark rect { stroke: var(--night); }
.logo--light .mark__a, .header[data-over-hero] .mark__a { fill: var(--night-text); }
.logo--light .mark__b, .header[data-over-hero] .mark__b { fill: var(--night-muted); }
.logo--light .mark__c, .header[data-over-hero] .mark__c { fill: var(--accent-on-night); }
.logo--light .logo__group, .header[data-over-hero] .logo__group { color: var(--night-muted); }
.nav { display: none; margin-left: auto; }
.nav ul { display: flex; gap: var(--s-2); }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3);
  color: var(--muted); font-size: var(--size-small); font-weight: 500; text-decoration: none;
  border-radius: var(--r-pill); transition: color var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--ink); }
.header[data-over-hero] .nav a { color: var(--night-muted); }
.header[data-over-hero] .nav a:hover { color: var(--night-text); }
.header[data-over-hero] .header__cta { background: var(--night-text); border-color: var(--night-text); color: var(--night); }
.header[data-over-hero] .header__cta:hover { background: var(--accent-on-night); border-color: var(--accent-on-night); }
.header[data-over-hero] :focus-visible { outline-color: var(--focus-on-night); }
@media (min-width: 52rem) { .nav { display: block; } }

/* Hero: full screen, video behind, words bottom left. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; min-height: 100svh;
  padding-top: var(--header-h);
  background: var(--night); color: var(--night-text);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--night) 75%, transparent) 0%, transparent 22%),
    linear-gradient(0deg, var(--night) 0%, transparent 34%),
    linear-gradient(90deg, color-mix(in srgb, var(--night) 90%, transparent) 0%, color-mix(in srgb, var(--night) 50%, transparent) 42%, transparent 72%);
}
.hero__inner { align-self: end; padding-block: var(--s-8) var(--s-6); }
.hero .title { font-size: var(--size-display); line-height: 1; color: var(--night-text); max-width: 15ch; }
.hero .title em { color: var(--accent-on-night); }
.hero .eyebrow { color: var(--accent-on-night); }
.hero .lead { color: var(--night-muted); max-width: 34rem; }
.hero :focus-visible { outline-color: var(--focus-on-night); }
.hero__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-5); }
.hero__cue { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--night-muted); }
.hero__cue i { position: relative; width: var(--s-7); height: var(--hair); background: var(--night-line); overflow: hidden; }
.hero__cue i::after { content: ""; position: absolute; inset: 0; background: var(--accent-on-night); transform: translateX(-100%); }
.motion-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-4);
  border: var(--hair) solid var(--night-line); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--night-2) 80%, transparent); color: var(--night-text);
  font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase;
  cursor: pointer; transition: border-color var(--t-fast) var(--ease);
}
.motion-toggle:hover { border-color: var(--night-text); }
html:not(.motion):not(.calm) .motion-toggle { display: none; }
.motion-toggle::before { content: ""; width: 0.6rem; height: 0.7rem; border-inline: 0.2rem solid currentColor; }
.motion-toggle[aria-pressed="true"]::before { width: 0; height: 0; border-inline: 0; border-block: 0.35rem solid transparent; border-left: 0.6rem solid currentColor; }
@media (max-width: 48rem) {
  .hero__media::after { background: linear-gradient(0deg, var(--night) 10%, color-mix(in srgb, var(--night) 72%, transparent) 55%, color-mix(in srgb, var(--night) 35%, transparent) 100%); }
}

/* Ribbon: what we make. Wraps when still; one endless line when moving. */
.ribbon { background: var(--ink); color: var(--paper); padding-block: var(--s-5); overflow: hidden; }
.ribbon__track { display: flex; flex-wrap: wrap; justify-content: center; }
.ribbon__list { display: flex; flex-wrap: wrap; justify-content: center; }
.ribbon__list[aria-hidden] { display: none; }
.ribbon__list li {
  display: inline-flex; align-items: center; gap: var(--s-5); padding-inline: var(--s-3) var(--s-4);
  font-size: var(--size-ribbon); font-weight: 700; letter-spacing: var(--track-head); line-height: 1.3; white-space: nowrap;
}
.ribbon__list li:nth-child(even) { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--accent-on-night); }
.ribbon__list li::after { content: ""; width: 0.42em; height: 0.42em; border-radius: 0.12em; background: var(--muted); rotate: 45deg; }
.motion .ribbon__track, .motion .ribbon__list { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
.motion .ribbon__list[aria-hidden] { display: flex; }

/* Sections */
.section { padding-block: var(--s-9); }
.section--soft { background: var(--paper-soft); }
.section__head { max-width: 46rem; margin-bottom: var(--s-7); }

/* Products: cards that stack like the logo's tiles. */
.stack { display: grid; gap: var(--s-5); }
.pcard { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.pcard__inner {
  --dim: 0;
  position: relative; display: grid; overflow: hidden;
  background: var(--card); border: var(--hair) solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-2); transform-origin: 50% 0;
}
.pcard__inner::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--night); opacity: var(--dim); pointer-events: none; }
.pcard__art { position: relative; display: grid; justify-items: center; min-height: 15rem; overflow: hidden; isolation: isolate; }
.pcard__art::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--card) 30%, transparent), transparent 65%);
  transition: opacity var(--t-med) var(--ease);
}
.pcard__inner:hover .pcard__art::after { opacity: 1; }
.pcard--sitesurvey .pcard__art { background: radial-gradient(120% 90% at 30% 20%, var(--card), var(--ss-band)); }
.pcard--plate-wise .pcard__art { background: radial-gradient(120% 90% at 30% 20%, var(--card), var(--pw-band)); }
.pcard--classed .pcard__art { background: linear-gradient(135deg, var(--cl-band), color-mix(in srgb, var(--cl-band) 70%, var(--night))); }
.pcard--letsgotravel .pcard__art { background: radial-gradient(120% 90% at 30% 20%, var(--card), var(--lg-band)); }
.pcard--trigstrike .pcard__art { background: radial-gradient(90% 120% at 0% 0%, var(--night-2), var(--ts-band)); }
.pcard--dc-webapps .pcard__art { background: linear-gradient(135deg, var(--dc-band), color-mix(in srgb, var(--dc-band) 70%, var(--dc-ink))); }
.pcard__art { align-items: end; padding: var(--s-8) var(--s-5) 0; }
.frame {
  position: relative; z-index: 1; width: min(100%, 36rem); overflow: hidden;
  border: var(--hair) solid color-mix(in srgb, var(--ink) 14%, transparent); border-bottom: 0;
  border-radius: var(--r-m) var(--r-m) 0 0; background: var(--card); box-shadow: var(--shadow-2);
  transition: translate var(--t-med) var(--ease-out);
}
.pcard__inner:hover .frame { translate: 0 calc(-1 * var(--s-2)); }
.frame__bar { display: flex; gap: var(--s-1); padding: var(--s-2) var(--s-3); background: var(--paper-soft); }
.frame__bar i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line); }
.frame__shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.frame__shot--center { object-position: 50% 50%; }
.pcard__index { position: absolute; top: var(--s-5); left: var(--s-5); z-index: 1; font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: var(--track-label); color: var(--muted); }
.pcard--trigstrike .pcard__index, .pcard--dc-webapps .pcard__index, .pcard--classed .pcard__index { color: var(--night-muted); }
.pcard__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-6); }
.pcard__head { display: flex; align-items: center; gap: var(--s-3); }
.pcard__mini { width: 2.5rem; height: 2.5rem; border-radius: 22%; box-shadow: var(--shadow-1); }
.pcard__name { font-size: var(--size-name); line-height: 1.02; letter-spacing: var(--track-head); color: var(--ink); }
.pcard__tagline { font-family: var(--font-serif); font-style: italic; font-size: var(--size-lead); line-height: 1.35; color: var(--ink); }
.pcard__note { font-size: var(--size-small); color: var(--muted); }
.pcard .actions { margin-top: auto; padding-top: var(--s-3); }
.tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: var(--size-label); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--paper-soft); color: var(--ink);
}
.soon {
  align-self: flex-start; margin-top: auto;
  font-family: var(--font-mono); font-size: var(--size-label); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-hover);
}
@media (min-width: 48rem) {
  .pcard__inner { grid-template-columns: 1fr 1fr; min-height: min(32rem, 70svh); }
  .pcard__body { justify-content: center; padding: var(--s-7) var(--s-7) var(--s-7) var(--s-6); }
}
/* The stack itself: only where a whole card fits on screen. */
@media (min-width: 48rem) and (min-height: 40rem) {
  .stack { gap: var(--s-8); padding-bottom: var(--s-6); }
  .pcard { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .pcard:nth-child(2) { top: calc(var(--header-h) + var(--s-5) + var(--stack-step)); }
  .pcard:nth-child(3) { top: calc(var(--header-h) + var(--s-5) + 2 * var(--stack-step)); }
  .pcard:nth-child(4) { top: calc(var(--header-h) + var(--s-5) + 3 * var(--stack-step)); }
  .pcard:nth-child(5) { top: calc(var(--header-h) + var(--s-5) + 4 * var(--stack-step)); }
  .pcard:nth-child(6) { top: calc(var(--header-h) + var(--s-5) + 5 * var(--stack-step)); }
  .pcard:nth-child(7) { top: calc(var(--header-h) + var(--s-5) + 6 * var(--stack-step)); }
}

/* Statement: one line to read slowly; words light up on scroll. */
.statement { padding-block: var(--s-9); }
.statement__text { max-width: 22ch; font-size: var(--size-statement); font-weight: 700; line-height: 1.12; letter-spacing: var(--track-head); color: var(--ink); text-wrap: balance; }

/* What we build: rows that fill with ink on hover. */
.caps { border-top: var(--hair) solid var(--line); }
.cap {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); align-items: baseline;
  padding-block: var(--s-6); border-bottom: var(--hair) solid var(--line);
}
.cap::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1;
  background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform var(--t-med) var(--ease-out);
}
.cap h3 { font-size: var(--size-cap); line-height: 1.1; letter-spacing: var(--track-head); color: var(--ink); transition: color var(--t-fast) var(--ease); }
.cap p { grid-column: 2; color: var(--ink-body); transition: color var(--t-fast) var(--ease); }
.cap .more { grid-column: 2; }
.more {
  display: inline-flex; align-items: center; gap: var(--s-2); align-self: flex-start; justify-self: start;
  min-height: var(--tap); color: var(--accent); font-weight: 600; text-decoration: none;
}
.more:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.more span { transition: transform var(--t-fast) var(--ease); }
.more:hover span { transform: translateX(var(--s-1)); }
.cap:hover::before, .cap:focus-within::before { transform: scaleY(1); }
.cap:hover h3, .cap:focus-within h3 { color: var(--paper); }
.cap:hover p, .cap:focus-within p { color: var(--night-muted); }
.cap:hover .more, .cap:focus-within .more, .cap:hover .num, .cap:focus-within .num { color: var(--accent-on-night); }
.cap :focus-visible { outline-color: var(--focus-on-night); }
@media (min-width: 56rem) {
  .cap { grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; }
  .cap p, .cap .more { grid-column: auto; }
}
.cap-preview { position: fixed; left: 0; top: 0; z-index: 25; width: 20rem; aspect-ratio: 16 / 10; pointer-events: none; opacity: 0; visibility: hidden; }
.cap-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: var(--r-m); box-shadow: var(--shadow-2); opacity: 0; }
.cap-preview img.is-on { opacity: 1; }
@media not ((hover: hover) and (pointer: fine)) { .cap-preview { display: none; } }

/* How we work: a rule draws in above each step. */
.steps { display: grid; gap: var(--s-7); }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.step { position: relative; padding-top: var(--s-5); }
.step__line { position: absolute; inset: 0 0 auto; height: var(--rule); background: var(--ink); transform-origin: 0 50%; }
.step__num { display: block; font-family: var(--font-serif); font-style: italic; font-size: var(--size-title); line-height: 1; color: var(--accent); }
.step h3 { font-size: var(--size-h3); line-height: var(--lh-head); color: var(--ink); margin-top: var(--s-4); }
.step p { margin-top: var(--s-2); }

/* Contact: dark band. */
.contact { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--night-text); padding-block: var(--s-9); }
.contact__inner { max-width: var(--wrap); }
.contact__inner > * { max-width: 44rem; }
.contact .title { color: var(--night-text); font-size: var(--size-display); line-height: 1; }
.contact .eyebrow, .contact .title em { color: var(--accent-on-night); }
.contact .lead { color: var(--night-muted); }
.contact :focus-visible, .footer :focus-visible { outline-color: var(--focus-on-night); }
.contact__email {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-2);
  color: var(--night-text); text-underline-offset: 0.25em;
}
.contact__email:hover { color: var(--accent-on-night); }

/* Footer */
.footer { background: var(--night); color: var(--night-muted); border-top: var(--hair) solid var(--night-line); padding-block: var(--s-7) var(--s-6); font-size: var(--size-small); }
.footer__inner { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .footer__inner { grid-template-columns: 2fr 1fr; } }
.footer p { margin-top: var(--s-2); max-width: 22rem; }
.footer .eyebrow { color: var(--night-muted); margin: 0 0 var(--s-2); }
.footer li a, .footer li > span:first-child { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--night-text); text-decoration: none; }
.footer li a:hover { color: var(--accent-on-night); }
.soon--small { margin-left: var(--s-2); padding: var(--s-1) var(--s-2); background: var(--night-2); color: var(--night-muted); }
.footer__base { margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--hair) solid var(--night-line); }

/* Motion. motion-flag.js marks the page "motion" (welcome) or "calm" (reduced, or paused before) before first paint.
   The hero's words wait for main.js; if it never runs, they show anyway after a moment. */
.motion [data-hero-in], .motion [data-hero-title] { opacity: 0; animation: wa-show 0s 2.5s forwards; }
@keyframes wa-show { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .motion .hero__cue i::after { animation: wa-cue 2.4s var(--ease-out) infinite; }
  .is-paused .hero__cue i::after { animation-play-state: paused; }
}
@keyframes wa-cue {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo:hover .mark__a, .logo:hover .mark__c { transform: none; }
  .cap::before { transition: none; }
}