/* ========================================================================== 
   Flobotics prototype v0.81 — visual refinement layer
   No copy changes. The v0.8 visual language stays intact; this layer makes
   the spacing/system more deliberate and integrates the Flobotics identity.
   ========================================================================== */

:root {
  --brand-blue: #325BF9; /* matches the logo files */
  --maxw: 1328px;
  --pad-x: clamp(18px, 2.6vw, 36px);
  --gutter: 28px;
  --sec-y: clamp(88px, 8.4vw, 128px);
  --nav-h: 72px;
  --radius: 0px;
}

@media (max-width: 1024px) {
  :root { --gutter: 22px; }
}
@media (max-width: 640px) {
  :root { --pad-x: 16px; --gutter: 16px; --nav-h: 64px; }
}

/* --------------------------------------------------------------------------
   Identity. Blue stays attached to Flobotics itself, not general UI chrome.
   -------------------------------------------------------------------------- */
.gnav { border-bottom: 1px solid var(--line-strong); }
.gnav-in { gap: 30px; }
.wordmark.brand-lockup {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  line-height: 0;
}
.wordmark.brand-lockup i { display: none; }
.brand-logo { display: block; width: auto; height: auto; }
.brand-logo.nav-full { width: 186px; }
.brand-logo.nav-mark { width: 54px; }
.brand-logo.footer-full { width: 176px; }
.brand-logo.nav-mark { display: none; }
.brand-logo.logo-dark { display: none; }

:root[data-theme="dark"] .brand-logo.logo-light { display: none; }
/* Desktop dark mode shows the full lockup only. The compact mark stays mobile-only. */
:root[data-theme="dark"] .brand-logo.logo-dark:not(.nav-mark) { display: block; filter: brightness(0) invert(1); }

@media (max-width: 620px) {
  .brand-logo.nav-full { display: none !important; }
  .brand-logo.nav-mark.logo-light { display: block; width: 52px; }
  :root[data-theme="dark"] .brand-logo.nav-mark.logo-light { display: none; }
  :root[data-theme="dark"] .brand-logo.nav-mark.logo-dark { display: block; width: 52px; filter: invert(1); }
}

.gnav-links { gap: 2px; }
.gnav-links a {
  padding: 9px 9px;
  font-size: 14px;
  letter-spacing: .002em;
}
.gnav-links a:hover { background: transparent; box-shadow: inset 0 -2px 0 var(--line-strong); }
.gnav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }
.gnav-actions { gap: 8px; }

/* Deliberately keep primary controls graphite. */
.btn { border-width: 1.5px; padding: 14px 18px; }
.btn.sm { padding: 10px 13px; }
.btn:hover { transform: translateY(-1px); background: var(--ink); }
.btn:active { transform: translateY(0); }
.btn.ghost:hover { background: var(--ink); }

/* --------------------------------------------------------------------------
   Global discipline: same hard-edged construction, cleaner measurements.
   -------------------------------------------------------------------------- */
.section { padding-block: var(--sec-y); }
.section.tight { padding-block: calc(var(--sec-y) * .62); }
.sec-head {
  padding-top: 18px;
  margin-bottom: 56px;
  gap: 16px;
  border-top-width: 2px;
}
.card,
.ms,
.lead-card,
.story,
.paper-card,
.proof,
.table-wrap { border-radius: 0; }
.card { padding: 28px; gap: 14px; }
.card:hover,
a.card:hover,
.ms:hover,
.lead-card:hover,
.paper-card:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.eyebrow,
.meta,
.chip,
.tag { letter-spacing: .075em; }

/* Squared operational labels, never soft SaaS pills. */
.chip,
.tag,
.lab-count,
.ph-note { border-radius: 0; }

/* Footer identity: monochrome, so the blue remains a scarce header/brand cue. */
.gfoot-brand .wordmark.brand-lockup { margin-bottom: 2px; }
/* The footer is always a graphite panel, so the monochrome lockup must render white. */
.gfoot .brand-logo.footer-full {
  filter: brightness(0) invert(1);
  opacity: .96;
}

/* --------------------------------------------------------------------------
   Corporate homepage: preserve the v0.8 character and sharpen its signature.
   -------------------------------------------------------------------------- */
body[data-page="home"] .label {
  gap: 12px;
  font-size: 13.5px;
  letter-spacing: .018em;
}
body[data-page="home"] .label::before {
  width: 27px;
  height: 7px;
  transform: rotate(-1.5deg) skewX(-12deg);
  transform-origin: center;
}

body[data-page="home"] .mark {
  /* Smooth slanted highlighter: vector path keeps the diagonal edges anti-aliased. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 18 C28 17 69 13 100 9 L100 88 C70 90 30 94 0 97 Z' fill='%23F2C230'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-inline: .06em;
}

body[data-page="home"] .hx {
  padding-block: 68px 112px;
}
body[data-page="home"] .hx-grid {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(50px, 5vw, 76px);
  align-items: center;
}
body[data-page="home"] .hx h1 {
  font-size: clamp(58px, 8.9vw, 132px);
  line-height: .86;
  letter-spacing: -.052em;
}
body[data-page="home"] .hx .lead { margin-top: 32px; }
body[data-page="home"] .hx .row { margin-top: 32px; gap: 10px; }
body[data-page="home"] .hx-proof {
  margin-top: 42px;
  max-width: 570px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-top: 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 10.5px;
  line-height: 1.45;
}
body[data-page="home"] .hx-proof > span {
  padding: 13px 14px 13px 0;
}
body[data-page="home"] .hx-proof > span + span {
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
body[data-page="home"] .hx-proof strong {
  display: block;
  font-family: var(--f-display);
  font-stretch: 125%;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.035em;
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}

body[data-page="home"] .stage { min-height: 620px; }
body[data-page="home"] .stage > .doc {
  width: 65%;
  box-shadow: 0 1px 0 rgba(0,0,0,.07), 0 24px 48px -22px rgba(21,24,26,.42);
}
body[data-page="home"] .xpanel {
  top: 154px;
  width: 45%;
  border-width: 1.5px;
  box-shadow: 10px 10px 0 rgba(21,24,26,.08), 0 20px 42px -25px rgba(21,24,26,.45);
}
body[data-page="home"] .xp-head,
body[data-page="home"] .xp-row,
body[data-page="home"] .xp-done { padding-inline: 16px; }
body[data-page="home"] .xp-head { padding-block: 13px; }
body[data-page="home"] .xp-row { padding-block: 7px; }

/* Section introductions share a deliberate rhythm, not a repeated SaaS template. */
body[data-page="home"] .intro {
  gap: clamp(36px, 4vw, 64px);
  margin-bottom: 64px;
}
body[data-page="home"] .h-big { letter-spacing: -.038em; }

/* Dark operational band: preserve the hard visual break and amplify number recall. */
body[data-page="home"] .wait {
  border-block: 1px solid #050707;
}
body[data-page="home"] .waits {
  margin-top: 70px;
  border-top-width: 1.5px;
}
body[data-page="home"] .w { padding-top: 32px; gap: 12px; }
body[data-page="home"] .w .after {
  font-weight: 800;
  font-size: clamp(38px, 4.2vw, 62px);
  font-variant-numeric: tabular-nums;
}
body[data-page="home"] .w .src { margin-top: 4px; }

/* Industry cards: more discipline, harder geometry, less generic pill UI. */
body[data-page="home"] .papers { gap: 24px; }
body[data-page="home"] .paper-card {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  border-color: var(--line-strong);
}
body[data-page="home"] .paper-card .desk { padding: 32px 22px; }
body[data-page="home"] .paper-info { padding: 28px; gap: 16px; }
body[data-page="home"] .paper-info h3 { font-size: 28px; }
body[data-page="home"] .handles { gap: 5px; }
body[data-page="home"] .handles span {
  /* Restore the softer pills here: they scan better as capability labels. */
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 4px 9px;
  font-family: inherit;
  font-stretch: normal;
  font-size: 12.5px;
  letter-spacing: normal;
  text-transform: none;
}
body[data-page="home"] .paper-metric {
  border-top-width: 1.5px;
  padding-top: 14px;
  gap: 4px;
}
body[data-page="home"] .paper-metric strong {
  width: max-content;
  max-width: 100%;
  font-size: 31px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -.18em 0 var(--yellow);
}

/* Read / Decide / Act keeps its asymmetry while using one spacing logic. */
body[data-page="home"] .rda > div { padding: 32px 28px 12px 0; gap: 16px; }
body[data-page="home"] .rda > div + div { padding-left: 28px; }
body[data-page="home"] .rda .human { padding: 28px !important; margin-left: 28px; }

/* Services read like an operations index rather than a card gallery. */
body[data-page="home"] .svc-list { column-gap: 56px; border-top-width: 1.5px; }
body[data-page="home"] .svc-item {
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 24px 0;
}
body[data-page="home"] .svc-item .ph-tag {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 10.5px;
  letter-spacing: .045em;
}

/* Deployment evidence: numbers become a repeated Flobotics signature. */
body[data-page="home"] .story { border-color: var(--line-strong); }
body[data-page="home"] .story-body { padding: 44px; gap: 24px; }
body[data-page="home"] .ba .a {
  font-weight: 820;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -.14em 0 var(--yellow);
  width: max-content;
  max-width: 100%;
}
body[data-page="home"] .more-stories { gap: 24px; margin-top: 24px; }
body[data-page="home"] .ms { padding: 26px; gap: 10px; border-color: var(--line-strong); }
body[data-page="home"] .ms .ba .a { box-shadow: inset 0 -.16em 0 var(--yellow); }

/* Lab proof block stays aggressively yellow/graphite; no blue leakage. */
body[data-page="home"] .proof { border-width: 1.5px; }
body[data-page="home"] .proof-head { padding: 32px; }
body[data-page="home"] .pr-row { padding: 20px 24px; }

/* Leadership cards remain two different registers but share construction. */
body[data-page="home"] .leads2 { gap: 24px; }
body[data-page="home"] .lead-card { border-color: var(--line-strong); }
body[data-page="home"] .lead-card .txt { padding: 26px; gap: 12px; }

/* Yellow CTA is a deliberate full-surface event, not a general accent habit. */
body[data-page="home"] .cta-grid { gap: clamp(44px, 5vw, 72px); }
body[data-page="home"] .fax-form { padding: 30px; box-shadow: 10px 10px 0 #15181A; }
body[data-page="home"] .drop { border-radius: 0; }

@media (max-width: 1120px) {
  .gnav-links { display: none; }
  body[data-page="home"] .hx-proof { max-width: 620px; }
}
@media (max-width: 1000px) {
  body[data-page="home"] .hx { padding-block: 56px 88px; }
  body[data-page="home"] .hx-grid { grid-template-columns: minmax(0, 1fr); gap: 60px; }
  body[data-page="home"] .stage { min-height: 600px; }
}
@media (max-width: 700px) {
  body[data-page="home"] .hx-proof { grid-template-columns: 1fr; }
  body[data-page="home"] .hx-proof > span { padding: 12px 0; }
  body[data-page="home"] .hx-proof > span + span { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  body[data-page="home"] .paper-info { padding: 24px; }
  body[data-page="home"] .story-body { padding: 28px 24px; }
  body[data-page="home"] .fax-form { padding: 20px; box-shadow: 6px 6px 0 #15181A; }
}
@media (max-width: 640px) {
  body[data-page="home"] .hx { padding-block: 44px 72px; }
  body[data-page="home"] .stage { min-height: 0; }
}