/* ============================================================================
   InfraTech LLC — Components
   Cursor · header · buttons · crop-marks · dimension-lines · spec-cards ·
   marquee · stats · form · footer
   ========================================================================== */

/* ========================================================================
   CUSTOM CURSOR — a CAD crosshair (pointer:fine only; hidden on touch)
   ===================================================================== */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 26px; height: 26px;
  z-index: var(--z-cursor);
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .3s var(--ease-out), width .25s var(--ease-out), height .25s var(--ease-out);
}
.cursor::before, .cursor::after {        /* the cross arms */
  content: ""; position: absolute; background: #fff;
}
.cursor::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.cursor::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.cursor__dot {                            /* centre dot */
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--filament); transform: translate(-50%, -50%);
  transition: transform .2s var(--ease-out);
}
.cursor.is-active {                        /* over interactive elements */
  width: 44px; height: 44px; mix-blend-mode: normal;
}
.cursor.is-active::before, .cursor.is-active::after { background: var(--filament); }
.cursor.is-active .cursor__dot { transform: translate(-50%, -50%) scale(2.4); opacity: .25; }
html.has-cursor, html.has-cursor * { cursor: none !important; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ========================================================================
   CROP-MARKS — corner ticks on framed elements (drafting registration marks)
   ===================================================================== */
.crops {
  position: absolute; inset: -1px;
  pointer-events: none; z-index: 3;
  --c: var(--line-strong);
  --s: 14px;   /* arm length */
  --t: 1px;    /* thickness  */
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),  /* TL */
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),  /* TR */
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),  /* BL */
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));  /* BR */
  background-size:
    var(--s) var(--t), var(--t) var(--s),
    var(--s) var(--t), var(--t) var(--s),
    var(--s) var(--t), var(--t) var(--s),
    var(--s) var(--t), var(--t) var(--s);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  transition: --c .4s;
}
.crops--accent { --c: var(--filament-line); }

/* ========================================================================
   DIMENSION LINE — a measured rule with end-ticks + centred mono label
   ===================================================================== */
.dim {
  display: flex; align-items: center; gap: .9em;
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mist);
  white-space: nowrap;
}
.dim::before, .dim::after { content: ""; height: 1px; background: var(--line-strong); }
.dim::before { width: clamp(18px, 4vw, 56px); position: relative; }
.dim__rule { flex: 1; height: 1px; background: var(--line); min-width: 16px; }
.dim b { color: var(--ink-bright); font-weight: 500; }
.dim .tick { color: var(--filament); }

/* ========================================================================
   HEADER + NAV
   ===================================================================== */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              height var(--dur) var(--ease-out);
}
/* solid on scroll — NO backdrop-filter (it creates a containing block that
   breaks the fixed-position mobile menu overlay). */
.header.is-scrolled {
  background: rgba(8, 9, 12, .92);
  border-bottom-color: var(--line);
  height: 64px;
}
.header__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}

/* logo lockup */
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--pure); }
.brand__mark { display: flex; align-items: center; height: 26px; flex: none; }
.brand__mark svg { height: 100%; width: auto; max-width: none; }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.04rem;
  letter-spacing: -.01em; line-height: 1;
}
.brand__name small {
  font-family: var(--font-mono); font-weight: 400; font-size: .58em;
  letter-spacing: .12em; color: var(--mist); margin-left: .35em; vertical-align: middle;
}

/* primary nav */
.nav { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 2rem); }
.nav__list { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.8rem); }
.nav__link {
  font-size: .92rem; color: var(--ink); position: relative;
  padding: .4rem 0; transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--filament); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--pure); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--pure); }

.nav__sep { width: 1px; height: 18px; background: var(--line-strong); }

/* burger */
.burger {
  display: none; width: 42px; height: 42px; position: relative; flex: none;
  border: 1px solid var(--edge); border-radius: var(--r-sm);
}
.burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--pure);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* swap: desktop nav -> burger at the mobile breakpoint */
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: block; }
}

/* mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--void);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-inout);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }

/* While the menu is open the body is locked (.no-scroll). The full-screen
   overlay (z-menu) would otherwise sit on top of the header, hiding the burger
   as it morphs into the X. Lift the header above the overlay so that close
   glyph stays visible and tappable. */
body.no-scroll .header { z-index: calc(var(--z-menu) + 1); border-bottom-color: transparent; }
.mobile-menu__list { display: flex; flex-direction: column; gap: .2rem; }
.mobile-menu__link {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 9vw, 3.4rem); letter-spacing: -.02em; color: var(--pure);
  padding: .25em 0; display: flex; align-items: baseline; gap: .7rem;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__link .index { font-size: .7rem; color: var(--filament); }
.mobile-menu__foot {
  margin-top: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--mist);
}
.mobile-menu__foot a { color: var(--ink-bright); }

/* ========================================================================
   BUTTONS — self-contained (no descendant-only rules that can silently fail)
   ===================================================================== */
.btn {
  --btn-fg: var(--pure);
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 500;
  padding: .95em 1.5em; border-radius: var(--r-sm);
  color: var(--btn-fg); position: relative; isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast),
              border-color var(--dur-fast), background var(--dur-fast);
  will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg { transform: translate(.2em, -.2em); }

/* primary — filament fill */
.btn-primary {
  --btn-fg: #04130d;
  background: var(--filament); font-weight: 600;
  box-shadow: 0 0 0 1px var(--filament), 0 18px 40px -22px var(--filament-glow);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--filament-bright); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover { transform: translateY(-2px); }

/* ghost — outline; explicitly self-classed so it never depends on a parent */
.btn-ghost {
  --btn-fg: var(--ink-bright);
  background: transparent; border: 1px solid var(--edge);
}
.btn-ghost:hover {
  --btn-fg: var(--pure);
  border-color: var(--filament-line);
  background: var(--filament-soft);
  transform: translateY(-2px);
}

/* small variant */
.btn-sm { padding: .7em 1.1em; font-size: var(--fs-mono); }

/* text + arrow link with drawing underline */
.link-arrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-bright);
  position: relative; padding-bottom: .35em;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--filament); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform var(--dur) var(--ease-out); color: var(--filament); }
.link-arrow:hover { color: var(--pure); }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow:hover svg { transform: translate(.25em, -.25em); }

/* ========================================================================
   PILL / TAG / BADGE
   ===================================================================== */
.tag {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mist);
  padding: .5em .85em; border: 1px solid var(--line); border-radius: var(--r-pill);
}
.tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--filament); flex: none; }
.tag--blue .dot { background: var(--blueprint); }

/* ========================================================================
   SPEC CARD — the signature: a capability rendered like a toleranced part
   ===================================================================== */
.spec {
  position: relative; background: var(--steel);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: clamp(1.3rem, 2.4vw, 2rem);
  display: flex; flex-direction: column; gap: var(--sp-4);
  overflow: hidden; isolation: isolate;
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.spec::after {            /* filament glow wash, hidden until hover */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, var(--filament-soft), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.spec:hover {
  border-color: var(--line-strong);
  background: var(--steel-2);
  transform: translateY(-3px);
}
.spec:hover::after { opacity: 1; }
.spec:hover .crops { --c: var(--filament-line); }

.spec__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.spec__top .index { transition: color var(--dur) var(--ease-out); }
.spec:hover .spec__top .index { color: var(--filament-bright); }

.spec__media {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-xs);
  overflow: hidden; background: var(--graphite); border: 1px solid var(--line);
}
.spec__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease-out);
}
.spec:hover .spec__media img { transform: scale(1.05); filter: saturate(1.05) contrast(1.06); }

.spec__title { font-size: var(--fs-h4); }
.spec__desc { color: var(--ink); font-size: var(--fs-small); line-height: 1.6; }

/* drawing underline that runs across on hover */
.spec__foot { margin-top: auto; padding-top: var(--sp-3); position: relative; }
.spec__foot::before {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 100%;
  background: var(--filament); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.spec:hover .spec__foot::before { transform: scaleX(1); }
.spec__foot .mono { display: flex; align-items: center; justify-content: space-between; }
.spec__foot .mono span:last-child { color: var(--filament); }

/* a stretched anchor so the whole card is clickable when wrapped in <a> */
.spec__hit { position: absolute; inset: 0; z-index: 5; }

/* ========================================================================
   MARQUEE — compliance ticker (mono), pauses for reduced-motion
   ===================================================================== */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line);
  padding-block: clamp(1rem, 2vw, 1.6rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 1.4rem;
  padding-inline: 1.6rem;
  font-family: var(--font-mono); font-size: clamp(.8rem, 1.4vw, 1rem);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mist);
}
.marquee__item b { color: var(--ink-bright); font-weight: 500; }
.marquee__item::after { content: ""; width: 5px; height: 5px; background: var(--filament); border-radius: 50%; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* ========================================================================
   STAT BLOCK — big engineered number + mono label
   ===================================================================== */
.stat { display: flex; flex-direction: column; gap: .4rem; position: relative; padding-top: var(--sp-4); }
.stat::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--filament); }
.stat__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.3rem); line-height: .92;
  letter-spacing: var(--track-mega); color: var(--pure);
  font-variant-numeric: tabular-nums;
}
.stat__num .u { color: var(--filament); }
.stat__label {
  font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: .08em; text-transform: uppercase; color: var(--mist);
  max-width: 22ch;
}

/* ========================================================================
   FORM — Green Bear methodology, styled to the system
   ===================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-5); }
.field { display: flex; flex-direction: column; gap: .55rem; position: relative; }
.field.is-full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mist);
  display: flex; align-items: center; gap: .5em;
}
.field label .req { color: var(--filament); }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-body); color: var(--pure);
  background: var(--graphite); border: 1px solid var(--edge); border-radius: var(--r-sm);
  padding: .9em 1.05em; transition: border-color var(--dur-fast) var(--ease-out),
            box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #56606c; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--filament-line);
  background: var(--steel); box-shadow: 0 0 0 3px var(--filament-soft);
}
.field input:user-invalid, .field textarea:user-invalid {
  border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,.12);
}

/* honeypot — visually & semantically removed from the flow */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.form__note { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; color: var(--mist); max-width: 44ch; line-height: 1.7; }

.form__success {
  display: none; align-items: flex-start; gap: .9rem;
  padding: 1.1rem 1.3rem; border-radius: var(--r-sm);
  background: var(--filament-soft); border: 1px solid var(--filament-line); color: var(--filament-bright);
  font-size: var(--fs-small);
}
.form__success.is-shown { display: flex; }
.form__success svg { width: 1.2em; height: 1.2em; flex: none; margin-top: .15em; }
.form__success--error { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); color: #FCA5A5; }
.form__success--error a { color: inherit; text-decoration: underline; }

@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }

/* ========================================================================
   FOOTER
   ===================================================================== */
.footer { position: relative; border-top: 1px solid var(--line); background: var(--graphite); overflow: hidden; }
.footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-7);
  padding-block: clamp(3rem, 6vw, 5rem) var(--sp-7);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 34ch; }
.footer__brand .brand__mark { height: 30px; }
.footer__tagline { color: var(--mist); font-size: var(--fs-small); }
.footer__col h5 {
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--mist); margin-bottom: var(--sp-4); font-weight: 400;
}
.footer__col ul { display: flex; flex-direction: column; gap: .7rem; }
.footer__col a { color: var(--ink); font-size: var(--fs-small); transition: color var(--dur-fast); width: fit-content; position: relative; }
.footer__col a:hover { color: var(--filament); }
.footer__contact a { display: flex; align-items: center; gap: .6em; }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-5); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; color: var(--mist);
}
.footer__bottom a { color: var(--ink-bright); }
.footer__bottom a:hover { color: var(--filament); }
.footer__social { display: flex; gap: .6rem; }
.footer__social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--edge); border-radius: var(--r-sm); color: var(--ink);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.footer__social a:hover { border-color: var(--filament-line); color: var(--filament); background: var(--filament-soft); }
.footer__social svg { width: 18px; height: 18px; }

/* giant ghosted wordmark watermark */
.footer__watermark {
  font-family: var(--font-display); font-weight: 900; text-align: center;
  font-size: clamp(2.1rem, 13vw, 9.5rem); line-height: .9; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  padding-block: clamp(1rem, 3vw, 2.5rem); user-select: none; pointer-events: none;
  white-space: nowrap; overflow: hidden;
}

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* ========================================================================
   REVEAL — base state for IntersectionObserver entrance
   ===================================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }