/* Approved midnight + icy blue identity. Chrome belongs to the logo. */
:root {
  --brand-navy:#142B46; --brand-ice:#83BCE0; --brand-link:#245B80;
}
.brandlogo { width:164px; height:auto; }
.brand-marketing {
  --paper:#fff; --paper-soft:#F3F7FA; --ink:#142B46; --body:#374A5B;
  --muted:#536779; --blue:#245B80; --blue-deep:#142B46;
  --green:#245B80; --green-mid:#245B80;
  --tools-accent:#245B80; --tools-accent-deep:#142B46;
  --line:#CBDCE7; --line-faint:#E3ECF2; --zebra:#F4F8FB; --hover:#E6F2FA;
  font-size:16px; line-height:1.6;
}
.brand-marketing .bar { padding-top:14px; padding-bottom:14px; }
.brand-marketing nav.topnav { gap:20px; }
.brand-marketing nav.topnav a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.brand-marketing .chrome-b,.brand-marketing .chrome-g,.brand-marketing .chrome-t {
  background:none; color:var(--brand-navy); -webkit-text-fill-color:currentColor;
}
.brand-marketing .chrome-g,.brand-marketing .chrome-t { color:var(--brand-link); }
.brand-marketing .chromeline,.brand-marketing .chromeline.teal { background:#C2DBEC; height:1px; }
.brand-marketing .hero { padding:36px 0 32px; }
.brand-marketing .logopic { width:560px; max-width:100%; margin-bottom:22px; }
.brand-marketing .hero h1 { font-size:clamp(27px,3.5vw,40px); letter-spacing:-.025em; line-height:1.2; }
.brand-marketing .hero p.lead { font-size:17px; line-height:1.65; margin-top:16px; }
.brand-marketing section { padding-top:30px; padding-bottom:30px; }
.brand-marketing a.btn,.brand-marketing button.btn,
.brand-marketing a.btn.green,.brand-marketing button.btn.green {
  min-height:44px; padding:11px 22px; background:#142B46; color:#fff;
  border:1px solid #142B46; box-shadow:none; text-shadow:none; border-radius:7px;
}
.brand-marketing a.btn:hover,.brand-marketing button.btn:hover,
.brand-marketing a.btn.green:hover,.brand-marketing button.btn.green:hover { background:#245B80; border-color:#245B80; }
.brand-marketing a.btn.green { background:#E6F2FA; color:#142B46; border-color:#83BCE0; }
.brand-marketing a.btn.green:hover { background:#C9E3F4; color:#142B46; }
.brand-marketing .division::before,.brand-marketing .division.biz::before,
.brand-marketing .division.tool::before,.brand-marketing .step::before,
.brand-marketing .step.green::before,.brand-marketing .trade::before,
.brand-marketing .product::before { background:#83BCE0; height:4px; }
.brand-marketing .division.biz::before,.brand-marketing .t-rent::before { background:#142B46; }
.brand-marketing .division { padding:30px; border-radius:12px; }
.brand-marketing .division h2 { font-size:23px; }
.brand-marketing .division p,.brand-marketing .product p,.brand-marketing .explain { font-size:16px; line-height:1.65; }
.brand-marketing .division .go,.brand-marketing .division.tool .go { color:#245B80; font-size:15px; }
.brand-marketing .chip { background:#E6F2FA; color:#142B46; border-color:#B7D5E9; box-shadow:none; text-shadow:none; }
.brand-marketing .shelf { background:#E6F2FA; border-color:#B7D5E9; }
.brand-marketing .product:hover { border-color:#83BCE0; }
.brand-marketing .contact { background:#142B46; padding-top:36px; padding-bottom:36px; }
.brand-marketing .contact::before { display:none; }
.brand-marketing .contact .big { text-shadow:none; }
.brand-marketing .contact h2,.brand-marketing .contact .lead,.brand-marketing .pricenote,
.brand-marketing .formnote,.brand-marketing .formfallback { color:#E6F2FA; }
.brand-marketing .contact button.btn { background:#C9E3F4; border-color:#C9E3F4; color:#142B46; }
.brand-marketing .contact button.btn:hover { background:#fff; }
.brand-marketing form.intake input,.brand-marketing form.intake textarea { font-size:16px; min-height:44px; }
.brand-marketing .service-labels { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; color:#142B46; font-weight:700; font-size:16px; }
.brand-marketing .service-motto { text-align:center; color:#536779; margin:10px 0 0; font-size:15px; }
.brand-marketing footer { padding:22px 0; }
:focus-visible { outline:3px solid #347BA8; outline-offset:4px; }
.contact :focus-visible { outline-color:#C9E3F4; }
.brand-demo {
  --soft:#F2F6FA; --paper:#fff; --ink:#142B46; --body:#374A5B;
  --muted:#536779; --blue:#245B80; --deep:#142B46; --green:#245B80; --green-mid:#245B80;
  --line:#D3E0EA; --faint:#E8EFF5; --zebra:#F6F9FC;
  line-height:1.55;
}
.brand-demo .ribbon { background:#142B46; padding:8px 0; }
.brand-demo .bar { padding:12px 0; }
.brand-demo .brandlogo { width:148px; }
.brand-demo .bar .co { color:#245B80; font-size:11px; }
.brand-demo .tabs .wrap { gap:8px; }
.brand-demo .tab { min-height:46px; padding:11px 16px; }
.brand-demo .tab.on { background:#E6F2FA; border-color:#347BA8; border-radius:7px 7px 0 0; }
.brand-demo .intro { padding:22px 0; }
.brand-demo .intro h1 { font-size:clamp(22px,2.3vw,30px); letter-spacing:-.025em; }
.brand-demo .intro p { font-size:14px; line-height:1.6; max-width:80ch; }
.brand-demo .tiles { gap:12px; margin-top:20px; }
.brand-demo .tile { padding:16px; border-radius:11px; box-shadow:0 2px 6px #142b4606; }
.brand-demo .tile .n { font-size:29px; }
.brand-demo .tile .l { margin-top:8px; font-size:10px; letter-spacing:.09em; }
.brand-demo .tile.on { border-color:#347BA8; box-shadow:0 0 0 2px #83bce044; }
.brand-demo .toolbar { gap:12px; margin:20px 0 12px; }
.brand-demo .toolbar input[type=search],.brand-demo .btn-clear { min-height:42px; border-radius:8px; }
.brand-demo .panel { border-radius:12px; box-shadow:0 3px 14px #142b4607; }
.brand-demo th { background:#142B46; color:#E6F2FA; padding-top:13px; padding-bottom:13px; letter-spacing:.08em; }
.brand-demo td { padding-top:11px; padding-bottom:11px; }
.brand-demo tbody tr:hover td { background-color:#EAF3FA; }
.brand-demo .go,.brand-demo .go.g { background:#142B46; border-color:#142B46; box-shadow:none; text-shadow:none; min-height:44px; }
.brand-demo .go:hover,.brand-demo .go.g:hover { background:#245B80; }
.brand-demo .rechead,.brand-demo .wtiphead,.brand-demo .close { background:#142B46; }
.brand-demo .close p,.brand-demo .rechead .ds { color:#E6F2FA; }
.brand-demo .per.on { background:#245B80; }
.brand-demo .card { border-radius:12px; box-shadow:0 3px 14px #142b4607; }
.brand-demo .card::before { background:#83BCE0; }
.brand-demo .fld input,.brand-demo .fld select { min-height:42px; }
@media(max-width:600px) {
  .brand-demo .wrap { padding-left:14px; padding-right:14px; }
  .brand-demo .bar { gap:8px; }
  .brand-demo .brandlogo { width:125px; }
  .brand-demo .tab { padding:10px; font-size:12px; }
  .brand-demo .tiles { gap:8px; }
  .brand-demo .tile { padding:12px; }
  .brand-demo .tile .n { font-size:25px; }
}
@media(max-width:820px) {
  .brand-marketing .bar { justify-content:center; gap:4px; }
  .brand-marketing nav.topnav { gap:4px 18px; }
  .brand-marketing .hero { padding:25px 0; }
  .brand-marketing .wrap { padding-left:20px; padding-right:20px; }
  .brand-marketing .division { padding:24px; }
  .brand-marketing .frow { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .brand-marketing * { transition:none!important; }
}
.brand-demo .kpi { padding:17px 18px; border-radius:11px; }
.brand-demo .kpi .l { letter-spacing:.08em; font-size:10px; }
.brand-demo .kpi .v { font-size:25px; margin-top:7px; }
.brand-demo .chartcard { padding:22px; border-radius:12px; margin-top:14px; box-shadow:0 3px 14px #142b4607; }
.brand-demo .col,.brand-demo .brow .bf { background:#347BA8; }
.brand-demo .per { min-height:42px; }
/* Sibling demos: distinct work environments within the same identity. */
.demo-board { --blue:#245B80; --deep:#142B46; --green:#245B80; --green-mid:#245B80; }
.demo-board .tile { border-top:3px solid #83BCE0; border-radius:7px; }
.demo-board .panel { border-radius:7px; }
.demo-board .chartcard { border-top:3px solid #83BCE0; }
.demo-crews { --soft:#F1F7F6; --blue:#246661; --deep:#173D43; --green:#246661; --green-mid:#246661; --line:#CCDCD9; --faint:#E7EFED; --zebra:#F5F9F8; }
.demo-crews .ribbon,.demo-crews th,.demo-crews .rechead,.demo-crews .close,.demo-crews .wtiphead { background:#173D43; }
.demo-crews .tab.on { background:#E6F2EF; border-color:#3D8078; color:#246661; }
.demo-crews .bar .co { color:#246661; }
.demo-crews .tile { border-radius:15px; }
.demo-crews .tile.on { border-color:#3D8078; box-shadow:0 0 0 2px #3d807822; }
.demo-crews .col,.demo-crews .brow .bf { background:#3D8078; }
.demo-crews .per.on,.demo-crews .go,.demo-crews .go.g { background:#246661; border-color:#246661; }
.demo-crews .card::before { background:#80B4AB; }
.demo-crews .chartcard,.demo-crews .kpi { border-radius:15px; }
.demo-crews tbody tr:hover td { background:#EAF4F0; }
.demo-inventory { --soft:#F3F5F8; --blue:#425B78; --deep:#26374B; --green:#425B78; --green-mid:#425B78; --line:#D5DEE8; --faint:#E9EDF3; --zebra:#F7F8FB; }
.demo-inventory .ribbon,.demo-inventory th,.demo-inventory .rechead,.demo-inventory .close,.demo-inventory .wtiphead { background:#26374B; }
.demo-inventory .bar .co { color:#425B78; }
.demo-inventory .tab.on { background:#E8EDF4; border-color:#708CA9; color:#344B67; }
.demo-inventory .tile { border-radius:5px; border-left:4px solid #708CA9; }
.demo-inventory .panel,.demo-inventory .chartcard,.demo-inventory .kpi { border-radius:5px; }
.demo-inventory .col,.demo-inventory .brow .bf { background:#708CA9; }
.demo-inventory .per.on,.demo-inventory .go,.demo-inventory .go.g { background:#425B78; border-color:#425B78; }
.demo-inventory .card::before { background:#708CA9; }
.demo-inventory tbody tr:hover td { background:#ECF0F6; }
/* Show each demo clearly, with a full clickable preview rather than overlapping cards. */
.brand-marketing .fan { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; height:auto; max-width:1080px; margin:24px auto; }
.brand-marketing .fan .fancard { position:relative; left:auto; top:auto; width:auto; margin:0; transform:none!important; border:1px solid #CBDCE7; box-shadow:0 4px 16px #142b4610; }
.brand-marketing .fancard img { width:100%; height:auto; aspect-ratio:1.44; object-fit:cover; object-position:top; }
.brand-marketing .fancard .ftag { position:static; display:block; background:#142B46; padding:14px 18px; font-size:13px; letter-spacing:.07em; }
.brand-marketing .fancard.b .ftag,.brand-marketing .fancard.c .ftag { background:#173D43; }
.brand-marketing .fancard.d .ftag { background:#26374B; }
.brand-marketing .fan .fancard:hover { border-color:#347BA8; box-shadow:0 8px 24px #142b4624; }
@media(max-width:700px) { .brand-marketing .fan { grid-template-columns:1fr; gap:18px; } }
/* Restore the original fan presentation with room for the taller refreshed captures. */
@media(min-width:901px) {
  .brand-marketing .fan { display:block; position:relative; max-width:900px; height:410px; margin:30px auto 0; }
  .brand-marketing .fan .fancard { position:absolute; left:50%; top:0; width:470px; margin-left:-235px; transform-origin:50% 90%; }
  .brand-marketing .fan .fancard.a { transform:translateX(-26%) rotate(-7deg) scale(.87)!important; z-index:1; }
  .brand-marketing .fan .fancard.b { transform:translateX(-9%) rotate(-2.5deg) scale(.94)!important; z-index:3; }
  .brand-marketing .fan .fancard.c { transform:translateX(9%) rotate(2.5deg) scale(.94)!important; z-index:4; }
  .brand-marketing .fan .fancard.d { transform:translateX(26%) rotate(7deg) scale(.87)!important; z-index:2; }
  .brand-marketing .fan:hover .fancard.a { transform:translateX(-60%) rotate(-7deg) scale(.9)!important; }
  .brand-marketing .fan:hover .fancard.b { transform:translateX(-20%) rotate(-2.5deg) scale(.96)!important; }
  .brand-marketing .fan:hover .fancard.c { transform:translateX(20%) rotate(2.5deg) scale(.96)!important; }
  .brand-marketing .fan:hover .fancard.d { transform:translateX(60%) rotate(7deg) scale(.9)!important; }
  .brand-marketing .fan .fancard:hover,.brand-marketing .fan .fancard:focus-visible { z-index:9!important; }
}