/* ===========================================================================
   tector.app. Coming soon.
   ===========================================================================
   PROJECT REBOOT site 7 of 8. Every string on this page is a legal artefact:
   the marketplace posture, including whether Florida Chapter 493 licensure
   applies, lives or dies on wording consistency. So does the art.

   Three rules from the brand's own decision log shape everything below, and
   none of them is a stylistic preference:

   - NO RED, anywhere. Red is the emergency register and this brand does not
     have one. That is why the estate ART-GUIDE's single red radial is absent
     and a neutral light source stands in its place.
   - NO PHOTOGRAPHY of people, vehicles, uniforms, doorways, crowds, streets
     or engagements. Engraved paper is permitted imagery, is a ground at low
     opacity behind a scrim, and is never the subject.
   - NOTHING MOVES. A pulse, sweep, scan line, ping or ring around this mark
     is monitoring trade dress, and monitoring is the one thing the product
     must never appear to do. The restraint is the positioning.

   Green means live state: a thing that is currently true. Nothing on a
   coming-soon page is live, so green appears exactly twice, on the one
   address that does work today and on the focus ring.

   Colour and motion tokens are copied verbatim from the master build spec
   sections 3.2 and 3.3 so this page cannot drift from the app or from the
   fuller site.
   ========================================================================= */

:root {
  /* PINNED, spec 3.2. Never retuned. */
  --tector-green: #16e07a;
  --tector-green-dim: #0fa85b;
  --surface-base: #0e1113;
  --surface-raised: #171b1e;
  --surface-overlay: #1f2427;
  --text-primary: #f2f4f3;
  --text-secondary: #9aa3a0;
  --text-tertiary: #626b68;
  --border-subtle: #262b2e;

  /* PINNED, spec 3.3. */
  --dur-micro: 120ms;
  --dur-fade: 220ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --hair: rgba(242, 244, 243, 0.1);
  --hair-strong: rgba(242, 244, 243, 0.18);

  --font-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --w-expanded: 116;
  --w-normal: 100;

  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --t-d1: clamp(1.75rem, 1.2rem + 2.3vw, 2.875rem);
  --t-lede: clamp(1.0625rem, 1rem + 0.34vw, 1.1875rem);
  --t-body: 1.0625rem;
  --t-label: 0.8125rem;

  --page: 66rem;
  --measure: 36rem;
  --rail: 11rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-variation-settings: 'wdth' var(--w-normal);
  font-size: var(--t-body);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: var(--s3) var(--s4);
  background: var(--text-primary);
  color: var(--surface-base);
  font-family: var(--font-mono);
  font-size: var(--t-label);
}
.skip:focus { left: var(--gutter); top: var(--s3); }

:focus-visible {
  outline: 2px solid var(--tector-green);
  outline-offset: 3px;
}

/* --- ART -------------------------------------------------------------- */

.art {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* z0. Engraved paper. Bled right and down so the guilloche band sits under
   the empty half of the page and never under a line of type. */
.art-plate {
  position: absolute;
  top: 0;
  right: -6%;
  width: min(84vw, 62rem);
  height: 100%;
  object-fit: cover;
  object-position: 30% 46%;
  opacity: 0.34;
  filter: saturate(0.4) contrast(1.08);
}

/* z1. Scrim. Four stops, and the one light source is neutral, not coloured:
   a colour radial here would be green used as a mood, which the brand bans. */
.art-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 50% at 80% 22%, rgba(31, 36, 39, 0.6) 0%, transparent 66%),
    linear-gradient(to bottom, rgba(14, 17, 19, 0.86) 0%, rgba(14, 17, 19, 0.5) 32%, rgba(14, 17, 19, 0.54) 64%, rgba(14, 17, 19, 0.94) 100%),
    linear-gradient(96deg, rgba(14, 17, 19, 0.98) 0%, rgba(14, 17, 19, 0.94) 46%, rgba(14, 17, 19, 0.44) 72%, rgba(14, 17, 19, 0.2) 100%);
}

/* z1. Grain, static. Charcoal bands without it. */
.art-grain {
  position: absolute;
  inset: 0;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- SHELL ------------------------------------------------------------ */

.bar,
main,
.foot {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s5) 0;
}

/* The tile, not a lockup. There is no horizontal mark-plus-wordmark pairing
   in this identity: the mark IS the wordmark's first letter, so setting them
   side by side reads "T TECTOR". Square surface takes the tile, the wide
   surface below takes the wordmark, and that is the stack. */
.bar-mark {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.bar-mark img { display: block; width: 34px; height: 34px; }

.bar-links {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
  transition: color var(--dur-fade) var(--ease-out);
}
.bar-links:hover,
.bar-links:focus-visible { color: var(--text-primary); }
.bar-arrow { padding-left: 0.6em; }

/* A rule, not a punctuation mark: a 10 percent-alpha glyph is a text run that
   cannot clear AA, and a divider was never meant to be read. */
.rule-sep {
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-inline: 0.9em;
  background: var(--hair-strong);
  vertical-align: -0.1em;
}

main {
  flex: 1 0 auto;
  padding-block: clamp(var(--s7), 8vh, var(--s9)) var(--s8);
}

/* --- BRAND ------------------------------------------------------------ */

.status {
  margin: 0 0 var(--s6);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.status-when { color: var(--text-secondary); }

.brand { margin: 0; }

.brand-word {
  display: block;
  width: auto;
  height: clamp(2.25rem, 1.1rem + 5vw, 4rem);
  color: var(--text-primary);
}

.brand-tag {
  display: block;
  margin-top: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.claim {
  margin: clamp(var(--s6), 5vh, var(--s8)) 0 0;
  max-width: 22ch;
  font-size: var(--t-d1);
  font-weight: 500;
  font-variation-settings: 'wdth' var(--w-expanded);
  line-height: 1.14;
  letter-spacing: -0.018em;
}

.category {
  margin: var(--s4) 0 0;
  font-size: var(--t-lede);
  color: var(--text-secondary);
}

/* --- BLOCKS ----------------------------------------------------------- */
/* A mono field name in a real rail column, and body copy on a measure. No
   panel, no border box, no shadow: things are separated by the rail, by the
   space between them, and by one hairline that stops at the measure. */

.block {
  margin-top: clamp(var(--s6), 4.5vh, var(--s7));
  padding-top: clamp(var(--s5), 4vh, var(--s6));
  border-top: 1px solid var(--hair);
  max-width: calc(var(--rail) + var(--measure) + var(--s7));
}

.block-h {
  margin: 0 0 var(--s4);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Secondary, not tertiary. The spec pins --text-tertiary #626b68 as a token
     but never rules it legible: measured on the composited ground it is
     3.3:1, under the 4.5 AA bar for 13px. These labels stay subordinate by
     case, tracking and family instead, which is the token file's own rule for
     separating two small things. */
  color: var(--text-secondary);
}

.block-body { max-width: var(--measure); }
.block-body p { margin: 0 0 var(--s4); }
.block-body p:last-child { margin-bottom: 0; }
.block-body p + p { color: var(--text-secondary); }

.block-body a {
  color: var(--tector-green);
  text-decoration-color: rgba(22, 224, 122, 0.42);
  text-underline-offset: 0.28em;
  transition: text-decoration-color var(--dur-fade) var(--ease-out);
}
.block-body a:hover,
.block-body a:focus-visible { text-decoration-color: var(--tector-green); }

/* Full-width rows on hairlines. Deliberately not a three-up grid of equal
   boxes: that pattern is what reads as cheap here, and it has been rejected. */
.rows { margin: 0; }

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--hair);
}
.row:first-child { border-top: 1px solid var(--hair); }

.row-k {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.row-v {
  margin: 0;
  color: var(--text-secondary);
}

/* --- FOOT ------------------------------------------------------------- */

.foot {
  flex: 0 0 auto;
  margin-top: clamp(var(--s6), 6vh, var(--s8));
  padding-block: var(--s6) var(--s7);
  border-top: 1px solid var(--hair);
  font-size: var(--t-label);
  line-height: 1.75;
  color: var(--text-secondary);
}

.foot-legal { margin: 0; max-width: 44rem; }

.foot-firm {
  margin: var(--s5) 0 0;
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* The firm signs itself with its mark, not by typing its name. The wordmark
   ships as red ink on transparent, which is the wrong register here (this
   brand has no red), so it is flattened to white and then held at .58 alpha
   over --surface-base, which lands on #9aa3a0: the same weight as
   --text-secondary beside it. Height is set in ch so the mark scales with the
   mono text it sits in rather than drifting away from it. */
.foot-firm-mark {
  display: inline-block;
  height: 1.5ch;
  width: auto;
  vertical-align: baseline;
  filter: brightness(0) invert(1);
  opacity: .58;
}

/* --- RAIL ------------------------------------------------------------- */
/* At width the field name leaves the flow and becomes a real left column, so
   the reader's eye runs down one measure instead of stepping over headings. */

@media (min-width: 60rem) {
  .block {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--measure));
    column-gap: var(--s7);
    align-items: start;
  }
  .block-h { margin-bottom: 0; padding-top: 0.34rem; }

  .row {
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: var(--s5);
    align-items: baseline;
  }
}

/* --- NARROW ----------------------------------------------------------- */

@media (max-width: 47.999rem) {
  .art-grain { display: none; }
  .art-plate { opacity: 0.15; right: -14%; width: 128vw; }
}

/* --- REDUCED MOTION --------------------------------------------------- */
/* Nothing on this page animates, so there is nothing to switch off. The
   block is here so the transitions on the two links are honoured, and so a
   later edit that adds motion is caught by the same guard. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto; }
}