/* ==========================================================================
   CryoFlux Technologies — components.css
   Reusable pieces: header, navigation, buttons, labels, rails, cards,
   stats, quote, form fields, footer.
   ========================================================================== */

/* Type components ------------------------------------------------------- */
.display {
  font-family: var(--serif);
  font-size: var(--fs-display);
  line-height: 1.03;
  letter-spacing: -0.012em;
}
.display--sm { font-size: var(--fs-display-sm); }

.lede {
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.75;
  max-width: 34em;
}

.label {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Header ---------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.site-header.is-stuck {
  background: rgba(7, 9, 12, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line-soft);
}

.nav-inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand { margin-right: auto; line-height: 1; }
.brand__name {
  display: block;
  font-family: var(--serif);
  font-size: 1.18rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.brand__sub {
  display: block;
  margin-top: 5px;
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 24px);
}
.nav-links a {
  font-size: 0.72rem;
  white-space: nowrap;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

.nav-contact {
  border: 1px solid var(--line);
  padding: 9px 20px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.nav-contact:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.4);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s ease, background 0.2s ease;
}
.nav-toggle span { margin-inline: auto; position: relative; }
.nav-toggle span::before { content: ""; position: absolute; top: -6px; }
.nav-toggle span::after  { content: ""; position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 99;
  display: none;
  padding: 8px var(--gutter) 30px;
  background: rgba(7, 9, 12, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu.is-open { display: block; }
.mobile-menu li { border-bottom: 1px solid var(--line-soft); }
.mobile-menu a {
  display: block;
  padding: 17px 2px;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mobile-menu a[aria-current="page"] { color: var(--text); }

/* Buttons and links ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  font-size: var(--fs-btn);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.btn--solid { background: #fff; color: #0a0d11; }
.btn--solid:hover { background: #d9dee3; }
.btn--ghost { border-color: var(--line); color: var(--text); }
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.42);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  font-size: var(--fs-btn);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.28s ease, gap 0.28s ease;
}
.link-arrow:hover { border-bottom-color: var(--text); gap: 18px; }

/* Rails and stacked notes ------------------------------------------------ */
.rail,
.stack-note,
.pull-note {
  position: absolute;
  z-index: 3;
  font-size: 0.63rem;
  letter-spacing: var(--track-rail);
  line-height: 2.35;
  text-transform: uppercase;
  color: var(--text-dim);
}
.rail span,
.stack-note span,
.pull-note span { display: block; }

.rail {
  right: var(--gutter);
  text-align: right;
}
.rail--mid { top: 50%; transform: translateY(-50%); }
.rail--low { bottom: 96px; }

.stack-note { left: var(--gutter); bottom: 64px; }

.pull-note {
  right: var(--gutter);
  bottom: 96px;
  padding-left: 22px;
  border-left: 1px solid var(--line);
  line-height: 2.2;
  letter-spacing: 0.24em;
}

/* Stage cards (Architecture) --------------------------------------------- */
.stage { padding-bottom: 0; }
.stage__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.stage__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 26px 20px;
  background: linear-gradient(180deg, rgba(7,9,12,0) 0%, rgba(7,9,12,0.55) 40%, rgba(7,9,12,0.88) 100%);
}
.stage__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0;
}
.stage__num {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}
.stage__name {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.stage__text {
  padding: 6px 0 0;
  max-width: 20rem;
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.7;
}
.stage__overlay .stage__name { color: #fff; }

/* Proof indicators -------------------------------------------------------- */
.proof-item { padding: 40px clamp(20px, 2.6vw, 40px) 46px; }
.proof-item svg {
  width: 26px;
  height: 26px;
  stroke: var(--text);
  fill: none;
  stroke-width: 1.2;
}
.proof-item__figure {
  margin-top: 26px;
  font-family: var(--serif);
  font-size: 1.55rem;
  letter-spacing: 0.02em;
}
.proof-item__figure--word {
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-block: 8px 6px;
}
.proof-item__text {
  margin-top: 10px;
  max-width: 15rem;
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.65;
}

/* Quote ------------------------------------------------------------------- */
.quote {
  position: relative;
  z-index: 3;
  margin-top: clamp(48px, 8vw, 96px);
  padding-left: 24px;
  max-width: 44rem;
  border-left: 1px solid var(--line);
}
.quote p {
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  line-height: 2;
  text-transform: uppercase;
}
.quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Application cards -------------------------------------------------------- */
.app-card { background: var(--bg-raised); }
.app-card__img { aspect-ratio: 3 / 4; overflow: hidden; }
.app-card__img img { width: 100%; height: 100%; object-fit: cover; }
.app-card__name {
  margin-top: 20px;
  padding-inline: 20px;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.app-card__text {
  margin-top: 10px;
  padding: 0 20px 26px;
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.65;
}

/* Capability items (CryoWorx) ---------------------------------------------- */
.capability { padding: 38px clamp(20px, 2.6vw, 40px) 44px; }
.capability svg {
  width: 24px;
  height: 24px;
  stroke: var(--text);
  fill: none;
  stroke-width: 1.2;
}
.capability__name {
  margin-top: 22px;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  line-height: 1.9;
  text-transform: uppercase;
}

/* Contact ------------------------------------------------------------------ */
.contact-list { margin-top: 40px; }
.contact-list div {
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
}
.contact-list dt {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-list dd {
  margin-top: 10px;
  font-size: 0.98rem;
}

.form-field { margin-bottom: 22px; }
.form-field label {
  display: block;
  margin-bottom: 9px;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  font-family: var(--sans);
  font-size: 0.92rem;
}
.form-field textarea { min-height: 148px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: rgba(255, 255, 255, 0.42);
  outline: none;
}
.form-note {
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--text-faint);
}
.form-status {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--ice);
}

/* Footer -------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
  padding-block: 54px 46px;
}
.footer-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vw, 30px);
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.footer-line::before,
.footer-line::after {
  content: "";
  flex: 1 1 0;
  max-width: 120px;
  height: 1px;
  background: var(--line);
}

.footer-sign {
  padding-left: 26px;
  border-left: 1px solid var(--line);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  line-height: 2.1;
  text-transform: uppercase;
  color: var(--text-dim);
}
.footer-sign span { display: block; }

.footer-legal {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.footer-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.footer-legal a:hover { color: var(--text); }

/* Reveal (motion base) -------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Estate footer law: correspondence + artist's-concept disclaimer */
.footer-legal-line{font-size:.78rem;opacity:.75;margin:0 0 .4rem}
.footer-legal-line a{color:inherit;text-decoration:underline}

/* Brand: C-blade icon + crisp text (Laura mark, hybrid for legibility) */
.brand { display: flex; align-items: center; gap: 16px; }
.brand__icon { height: 58px; width: auto; display: block; }
.brand .brand__name {
  font-family: "Montserrat", var(--sans);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: 0.32em;
}
.brand .brand__sub {
  font-family: "Montserrat", var(--sans);
  font-weight: 300;
  font-size: 0.64rem;
  letter-spacing: 0.52em;
  margin-top: 7px;
  text-align: center;
  text-indent: 0.52em;
}
@media (max-width: 760px) {
  .brand { gap: 11px; }
  .brand__icon { height: 42px; }
  .brand .brand__name { font-size: 1.2rem; }
  .brand .brand__sub { font-size: 0.52rem; }
}

/* ==========================================================================
   FOOTER COMPOSITION LAW (LOCKED Sep 11 2026, Founder walk)
   One footer form on every page of the estate. Rows are ruled, not left
   to flex wrap: address line, then imagery disclaimer, then copyright
   seated left with the footer nav seated right on the same closing row.
   Consistent air below the closing row on every page.
   ========================================================================== */
.site-footer { padding-block: 50px 44px; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 22px;
  row-gap: 0.55rem;
}
.footer-legal .footer-legal-line {
  flex: 1 1 100%;
  margin: 0;
}
.footer-legal > p:not(.footer-legal-line) {
  margin: 0;
  margin-right: auto; /* copyright left, nav pushed right */
}
.footer-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-left: 0;
}
@media (max-width: 760px) {
  .footer-legal > p:not(.footer-legal-line) { flex: 1 1 100%; margin-right: 0; }
  .footer-legal nav { flex: 1 1 100%; }
}

/* Footer seat law, clause 2 (Sep 11 2026, Founder nav walk):
   the footer holds one altitude on every page. Short pages no longer
   drop the footer mid-glass with dead space beneath it -- the page
   column flexes to fill the viewport and the footer seats at the
   bottom, identically, estate-wide. Tall pages are unaffected. */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.site-footer { margin-top: auto; }
/* fixed-position chrome (header, mobile menu) is out of flow and unaffected */

/* Footer seat law, clause 3 (Sep 11 2026, Founder nav walk):
   one seam, estate-wide. Every page's final content section closes
   the same distance above the footer hairline, so the footer and its
   seam read as one constant unit on every page. */
main > section:last-of-type { padding-bottom: 40px; }

/* Footer seat law, clause 4.1 (Sep 11 2026, Founder ruling, amended
   per Kelita's mobile walk): the footer nav hides only where the full
   header nav is visible (desktop). At 1200px and below the header
   collapses to a toggle, so the footer nav returns as the visible road
   at the bottom of the page. The two navs hand off at one breakpoint. */
.footer-legal nav { display: none; }
@media (max-width: 1200px) {
  .footer-legal nav { display: flex; flex-wrap: wrap; gap: 18px 22px; flex: 1 1 100%; }
}

/* Footer seat law, clause 5 (Sep 11 2026, Founder walk):
   surplus glass goes to the hero, never to a dead band above the seam.
   On pages shorter than the viewport, the first content section flexes
   to absorb the spare height, so the seam holds its ruled measure and
   the footer holds its altitude with no void above it. */
main { display: flex; flex-direction: column; }
main > section:first-of-type { flex: 1 0 auto; }
main > section:first-of-type > * { width: 100%; }