/* SFS site — shared layout + components (pairs with brand.css) */

body { background: var(--offwhite); color: var(--navy); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.kick { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
::selection { background: var(--green); color: #fff; }

/* ───────── Nav ───────── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(245,246,243,0.86);
  backdrop-filter: blur(10px); border-bottom: 1px solid rgba(27,42,65,0.08); }
.nav .wrap { display: flex; align-items: center; gap: 40px; height: 84px; }
.nav .brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.nav .brand .emblem { height: 54px; width: auto; flex: 0 0 auto; }
.nav .brand .wordmark { display: flex; flex-direction: column; line-height: 1; }
.nav .brand .wm-name { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.nav .brand .wm-name .fs { color: var(--green-deep); }
.nav .brand .wm-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fog); margin-top: 6px; white-space: nowrap; }
.nav nav { display: flex; gap: 32px; margin-left: auto; }
.nav nav a { font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none; opacity: 0.78; transition: opacity .15s; }
.nav nav a:hover { opacity: 1; }
.nav nav a.active { opacity: 1; color: var(--green-deep); }

/* ───────── Buttons ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--body);
  font-weight: 600; font-size: 15px; cursor: pointer; border-radius: 6px; padding: 12px 22px;
  text-decoration: none; transition: background .15s, border-color .15s, transform .05s; border: none; }
.btn-primary { background: var(--green-deep); color: #fff; }
.btn-primary:hover { background: #4d5729; }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--navy); border: 1px solid rgba(27,42,65,0.22); }
.btn-ghost:hover { border-color: var(--navy); }
.nav .btn { padding: 11px 20px; }
.more { font-weight: 600; font-size: 14px; text-decoration: none; color: var(--green-deep); }
.more:hover { text-decoration: underline; }

/* ───────── Sections ───────── */
section { padding: 96px 0; }
.section-head { max-width: 820px; }
.section-head .kick { color: var(--green-deep); }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head h2 { font-size: 52px; margin: 16px 0 0; color: var(--navy); }
.section-head p { font-size: 19px; line-height: 1.6; color: #41506a; margin: 18px 0 0; }
.section-head.center p { margin-left: auto; margin-right: auto; }

/* ───────── Home hero ───────── */
.hero { position: relative; overflow: hidden; padding: 108px 0 96px; }
.hero::before { content: ""; position: absolute; right: -180px; top: -140px; width: 720px; height: 720px;
  background: radial-gradient(closest-side, rgba(110,122,60,0.13), transparent 70%); pointer-events: none; }
.hero .wrap { position: relative; }
.hero .kick { color: var(--green-deep); }
.hero h1 { font-size: 84px; margin: 22px 0 0; color: var(--navy); max-width: 12.5em; }
.hero h1 .hl { color: var(--green-deep); }
.hero p.sub { font-size: 22px; line-height: 1.55; color: #41506a; max-width: 34em; margin: 28px 0 38px; }
.hero .cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero .meta { display: flex; gap: 30px; margin-top: 60px; padding-top: 30px; flex-wrap: wrap; border-top: 1px solid rgba(27,42,65,0.10); }
.hero .meta .m { display: flex; flex-direction: column; gap: 4px; }
.hero .meta .m .v { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--navy); line-height: 1; }
.hero .meta .m .l { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); }

/* ───────── Inner-page hero ───────── */
.page-hero { padding: 84px 0 64px; border-bottom: 1px solid rgba(27,42,65,0.08); }
.page-hero .kick { color: var(--green-deep); }
.page-hero h1 { font-family: var(--display); font-weight: 700; line-height: 0.98; letter-spacing: -0.01em;
  font-size: 68px; margin: 18px 0 0; color: var(--navy); max-width: 14em; }
.page-hero p { font-size: 21px; line-height: 1.55; color: #41506a; max-width: 36em; margin: 22px 0 0; }

/* ───────── Method (Simple/Fast/Solid) ───────── */
.method { background: #fff; border-top: 1px solid rgba(27,42,65,0.07); border-bottom: 1px solid rgba(27,42,65,0.07); }
.method .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 54px; }
.mcard { padding: 36px 34px; border: 1px solid rgba(27,42,65,0.12); border-radius: 14px; }
.mcard .n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--green-deep); }
.mcard h3 { font-family: var(--display); font-weight: 700; font-size: 34px; color: var(--navy); margin: 12px 0 0; }
.mcard p { font-size: 16px; line-height: 1.6; color: #41506a; margin: 12px 0 0; }

/* ───────── Platform ───────── */
.plat .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; }
.plat ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.plat li { display: flex; gap: 14px; align-items: flex-start; }
.plat li .mk { width: 9px; height: 9px; border-radius: 2px; background: var(--green); margin-top: 8px; flex: 0 0 auto; }
.plat li b { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--navy); letter-spacing: 0.01em; }
.plat li span { display: block; font-size: 16px; line-height: 1.55; color: #41506a; margin-top: 3px; }

.diagram { background: var(--navy); border-radius: 18px; padding: 38px 36px 32px; }
.diagram .dh { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.diagram .modules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 18px; }
.mod { border-radius: 11px; padding: 20px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); }
.mod .pmark { display: flex; align-items: baseline; gap: 8px; }
.mod .pmark .sfs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: var(--steel); transform: translateY(-2px); }
.mod .pmark .nm { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; }
.mod.nexus .nm { color: #b6c07d; } .mod.compass .nm { color: #9bb6e0; }
.mod .role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 8px; }
.mod.next { display: flex; align-items: center; justify-content: center; border-style: dashed; color: rgba(255,255,255,0.5);
  font-family: var(--display); font-weight: 600; font-size: 18px; min-height: 92px; text-align: center; }
.diagram .spine { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 11px;
  background: linear-gradient(90deg, rgba(110,122,60,0.30), rgba(44,76,124,0.30)); border: 1px solid rgba(255,255,255,0.14); }
.diagram .spine .lbl { font-family: var(--display); font-weight: 700; font-size: 17px; color: #fff; letter-spacing: 0.01em; }
.diagram .spine .sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); }
.diagram .conn { text-align: center; color: var(--steel); font-size: 18px; margin: 8px 0; }

/* ───────── Portfolio / product cards ───────── */
.portfolio { background: #fff; }
.portfolio .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 54px; }
.pcard { border: 1px solid rgba(27,42,65,0.12); border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.pcard .top { padding: 32px 30px 26px; border-top: 4px solid; }
.pcard.nexus .top { border-color: var(--nexus); }
.pcard.compass .top { border-color: var(--compass); }
.pcard .pmark { display: flex; align-items: baseline; gap: 9px; }
.pcard .pmark .sfs { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--steel); transform: translateY(-2px); }
.pcard .pmark .nm { font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1; }
.pcard.nexus .pmark .nm { color: var(--nexus-deep); }
.pcard.compass .pmark .nm { color: var(--compass); }
.pcard .role { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); margin-top: 12px; }
.pcard h3 { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--navy); margin: 8px 0 0; line-height: 1.12; }
.pcard p.lede { font-size: 16px; line-height: 1.6; color: #41506a; margin: 14px 0 0; }
.pcard .tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 30px 24px; margin-top: auto; }
.pcard .tags .t { font-family: var(--mono); font-size: 11.5px; color: #51607a; background: var(--offwhite);
  border: 1px solid rgba(27,42,65,0.10); border-radius: 4px; padding: 6px 10px; }
.pcard .pf { padding: 18px 30px; border-top: 1px solid rgba(27,42,65,0.08); display: flex; align-items: center; justify-content: space-between; }
.pcard .status { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.pcard .status .pip { width: 7px; height: 7px; border-radius: 50%; }
.pcard .status.live { color: var(--nexus-deep); } .pcard .status.live .pip { background: var(--nexus); }
.pcard .status.beta { color: var(--compass-deep); } .pcard .status.beta .pip { background: var(--compass); }
.pcard.nexus a.more { color: var(--nexus-deep); } .pcard.compass a.more { color: var(--compass-deep); }
.pcard.next { border-style: dashed; align-items: stretch; justify-content: center; text-align: center; padding: 40px 30px; background: var(--offwhite); }
.pcard.next .plus { font-family: var(--display); font-weight: 700; font-size: 40px; color: var(--steel); line-height: 1; }
.pcard.next h3 { margin: 14px 0 0; }
.pcard.next p { font-size: 15px; line-height: 1.55; color: var(--fog); margin: 10px 0 0; }
.pcard .pf .more.go { display: inline-flex; align-items: center; gap: 6px; }

/* ───────── Product detail (nexus.html / compass.html) ───────── */
.pdetail { border-top: 1px solid rgba(27,42,65,0.08); }
.pdetail .lead { max-width: 760px; }
.pdetail .pmark { display: flex; align-items: baseline; gap: 10px; }
.pdetail .pmark .sfs { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; color: var(--steel); transform: translateY(-3px); }
.pdetail .pmark .nm { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1; }
.pdetail.nexus .pmark .nm { color: var(--nexus-deep); }
.pdetail.compass .pmark .nm { color: var(--compass); }
.pdetail .role { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); margin-top: 16px; }
.pdetail h2 { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1.04; color: var(--navy); margin: 10px 0 0; }
.pdetail p.lede { font-size: 19px; line-height: 1.6; color: #41506a; margin: 18px 0 0; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 52px; }
.pillar { padding: 28px 26px; border-radius: 14px; background: #fff; border: 1px solid rgba(27,42,65,0.12); border-top: 4px solid; }
.pdetail.nexus .pillar { border-top-color: var(--nexus); }
.pdetail.compass .pillar { border-top-color: var(--compass); }
.pillar .pn { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); }
.pillar h3 { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--navy); margin: 8px 0 0; }
.pillar p { font-size: 15px; line-height: 1.55; color: #41506a; margin: 10px 0 0; }
.pdetail.alt { background: #fff; }
.pdetail.alt .pillar { background: var(--offwhite); }
@media (max-width: 940px) { .pillars { grid-template-columns: 1fr 1fr; } .pdetail .pmark .nm { font-size: 42px; } .pdetail h2 { font-size: 32px; } }

/* ───────── The loop (intercommunicate) ───────── */
.link { background: var(--navy); color: #fff; }
.link .head { text-align: center; max-width: 820px; margin: 0 auto; }
.link .head .kick { color: #aeb88a; }
.link .head h2 { font-size: 52px; color: #fff; margin: 16px 0 0; }
.link .head p { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.74); margin: 20px auto 0; max-width: 38em; }
.loop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; margin-top: 56px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; overflow: hidden; }
.loop .end { padding: 36px 38px; }
.loop .end .pmark { display: flex; align-items: baseline; gap: 9px; }
.loop .end .pmark .sfs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: var(--steel); transform: translateY(-2px); }
.loop .end .pmark .nm { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1; }
.loop .end.nexus { background: rgba(110,122,60,0.14); } .loop .end.nexus .nm { color: #b6c07d; }
.loop .end.compass { background: rgba(44,76,124,0.18); } .loop .end.compass .nm { color: #9bb6e0; }
.loop .end p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 14px 0 0; }
.loop .mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 30px;
  border-left: 1px solid rgba(255,255,255,0.16); border-right: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); }
.loop .mid .badge { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--green); text-align: center; line-height: 1.05; max-width: 7em; }
.loop .mid .arrows { font-size: 24px; color: var(--steel); }
.link .note { text-align: center; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.03em; color: rgba(255,255,255,0.55); margin-top: 28px; }

/* ───────── Origin ───────── */
.origin { background: var(--offwhite); }
.origin .grid { display: grid; grid-template-columns: 0.42fr 0.58fr; gap: 64px; align-items: center; }
.origin .shot { aspect-ratio: 4/5; border-radius: 12px; }
.origin .kick { color: var(--green-deep); }
.origin blockquote { font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.26; color: var(--navy); margin: 18px 0 0; }
.origin p { font-size: 17px; line-height: 1.62; color: #41506a; margin: 22px 0 0; max-width: 34em; }

/* ───────── Industries strip ───────── */
.ind { background: #fff; border-top: 1px solid rgba(27,42,65,0.07); }
.ind .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 40px; }
.ind .chip { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 20px;
  color: var(--navy); border: 1px solid rgba(27,42,65,0.14); border-radius: 100px; padding: 11px 20px; }
.ind .chip .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--nexus); }
.ind .chip.soon { color: var(--fog); } .ind .chip.soon .pip { background: var(--steel); }

/* Featured industries — the verticals we have brand marks for */
.ind .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.icard { background: #fff; border: 1px solid rgba(27,42,65,0.12); border-radius: 16px; border-top: 4px solid;
  padding: 34px 30px 28px; display: flex; flex-direction: column; align-items: flex-start; }
.icard.police { border-top-color: var(--compass); }
.icard.fire { border-top-color: #c0392b; }
.icard.ems { border-top-color: #1f7a8c; }
.icard .emblem { height: 88px; width: auto; margin-bottom: 22px; }
.icard h3 { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--navy); margin: 0; line-height: 1.06; }
.icard p { font-size: 15.5px; line-height: 1.55; color: #41506a; margin: 12px 0 0; }
.icard .status { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; }
.icard .status .pip { width: 7px; height: 7px; border-radius: 50%; }
.icard .status.live { color: var(--nexus-deep); } .icard .status.live .pip { background: var(--nexus); }
.icard .status.soon { color: var(--fog); } .icard .status.soon .pip { background: var(--steel); }
.ind .roadmap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 34px;
  font-size: 15px; color: #41506a; }
.ind .roadmap .lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); }
.ind .roadmap .r { display: inline-flex; align-items: center; gap: 8px; }
.ind .roadmap .r .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); }
@media (max-width: 940px) { .ind .features { grid-template-columns: 1fr; } }

/* ───────── Security ───────── */
.sec .grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: start; }
.sec .pull { font-size: 22px; line-height: 1.5; color: var(--navy); font-weight: 500; }
.sec .pull strong { color: var(--green-deep); }
.sec .points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin-top: 30px; }
.sec .point { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: #41506a; line-height: 1.5; }
.sec .point .mk { width: 8px; height: 8px; border-radius: 2px; background: var(--nexus); margin-top: 7px; flex: 0 0 auto; }

/* ───────── Closing ───────── */
.closing { background: var(--charcoal); color: #fff; text-align: center; padding: 120px 0; }
.closing h2 { font-size: 60px; color: #fff; margin: 0 auto; max-width: 14em; }
.closing p { font-size: 19px; color: rgba(255,255,255,0.72); margin: 20px auto 0; max-width: 32em; line-height: 1.55; }
.closing .cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.closing .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.closing .btn-ghost:hover { border-color: #fff; }

/* ───────── Footer ───────── */
footer { background: var(--charcoal); color: rgba(255,255,255,0.6); border-top: 1px solid rgba(255,255,255,0.08); padding: 40px 0; }
footer .wrap { display: flex; align-items: center; gap: 24px; font-size: 14px; flex-wrap: wrap; }
footer img { height: 52px; }
footer .links { margin-left: auto; display: flex; gap: 24px; }
footer a { text-decoration: none; opacity: 0.75; }
footer a:hover { opacity: 1; }

/* ───────── Responsive ───────── */
@media (max-width: 940px) {
  .wrap { padding: 0 28px; }
  .hero h1 { font-size: 50px; } .page-hero h1 { font-size: 42px; } .section-head h2 { font-size: 36px; }
  .method .cards, .portfolio .cards { grid-template-columns: 1fr; }
  .plat .grid, .sec .grid, .origin .grid { grid-template-columns: 1fr; gap: 40px; }
  .loop { grid-template-columns: 1fr; }
  .loop .mid { flex-direction: row; padding: 20px; border: none; border-top: 1px solid rgba(255,255,255,0.16); border-bottom: 1px solid rgba(255,255,255,0.16); }
  .closing h2, .link .head h2 { font-size: 38px; } .nav nav { display: none; }
}
@media (max-width: 520px) {
  .nav .brand .emblem { height: 44px; }
  .nav .brand .wm-name { font-size: 16px; }
  .nav .brand .wm-tag { display: none; }
}