/* ============================================================
   FMC site design system - shared across subpages.
   Derived from energy-management-systems.html (Noto Sans,
   FMC teal, paper foundation, minimalist Safari-style frames,
   sentence-case section labels).
   ============================================================ */
:root{
  --ink:#06090F; --ink-2:#0A1120;
  --paper:#F5F4EF; --paper-2:#ECEAE2; --paper-line:#DCD9CE;
  --dark-on-paper:#141C2B; --mid-on-paper:#5A657A;
  /* faint was #8B94A6 (2.8:1 on paper, failed WCAG AA for footer/labels);
     darkened 2026-07-21 to ≥4.5:1 on both paper surfaces - audit item 26 */
  --faint-on-paper:#616A78;
  --teal:#2FD6C3; --teal-deep:#128D7F; --teal-ink:#0E6E63;
  --fmc-teal:#007D71; --fmc-teal-dark:#006A60; --fmc-navy:#003867;
  --font-d:'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --nav-h:56px;
  --ease-out:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box; margin:0; padding:0}
/* lock horizontal panning on mobile: body-only overflow-x is ignored
   by iOS Safari unless html clips too; clip avoids creating a
   scroll container (hidden kept as fallback) */
html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip}
body{
  font-family:var(--font-d); background:var(--paper); color:var(--dark-on-paper);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden; overflow-x:clip;
}
a{color:inherit}
img{max-width:100%; height:auto; display:block} /* height:auto pairs with the width/height attrs (2026-07-21): keeps aspect when CSS scales the width */
.container{max-width:none; margin:0 auto; padding:0 6vw} /* constant-ratio side margins (~6% each side) so layout looks the same at every screen size, 2026-07-24 KP */

/* ---------------- nav - the Hub's glass bar, same film on both sides of login ----------------
   Ported 2026-08-08 (John): the bar was 86% bone over the blur, which read as a
   solid strip. This is now the customer hub's exact recipe (fmc-portal-shell.css,
   body.portal-light nav): a thin white film at 0.40 with the blur doing the
   legibility work, so the page scrolls through the bar rather than under it.
   Keep the -webkit- prefix; without both filters this is just a 40% white bar. */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nav-h);
  display:flex; align-items:center; justify-content:center;
  padding:0; color:var(--dark-on-paper); /* gutter lives on .nav-inner so it mirrors .container (2026-07-11) */
  background:rgba(255,255,255,.40);
  backdrop-filter:blur(40px) saturate(200%); -webkit-backdrop-filter:blur(40px) saturate(200%);
  border-bottom:.5px solid rgba(14,26,31,.06);
  box-shadow:inset 0 .5px 0 0 rgba(255,255,255,.55), 0 1px 12px rgba(10,70,60,.04);
}
.nav-inner{
  /* Full-bleed nav row (2026-07-21, KP): logo and Login track the real
     screen edges at every viewport, matching the homepage nav.
     Supersedes the 2026-07-11 content-rail alignment. */
  width:100%; max-width:none; height:100%; margin:0 auto;
  padding-left:max(clamp(6px,0.9vw,13px), env(safe-area-inset-left));
  padding-right:max(clamp(6px,0.9vw,13px), env(safe-area-inset-right));
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--dark-on-paper)}
.nav-logo img{height:26px; width:auto; display:block; border-radius:0; object-fit:contain; background:transparent}
.nav-logo-text{font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1}
.nav-logo-text span{font-weight:400; color:var(--teal-ink)} /* was teal-deep: 3.7:1 on the light nav glass, below AA (2026-07-21) */
.nav-links{display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none}
.nav-links > li{position:relative; display:flex; align-items:center}
.nav-links > li > a{
  display:flex; align-items:center; gap:3px; padding:6px 12px; border-radius:4px;
  font-size:12px; font-weight:400; color:var(--mid-on-paper); text-decoration:none; white-space:nowrap;
  transition:color .2s,background .2s;
}
.nav-links > li > a:hover,.nav-links > li > a:focus-visible{color:var(--dark-on-paper)}
.nav-chevron{width:10px; height:10px; flex-shrink:0; opacity:.5; transition:transform .2s}
.nav-dropdown:hover .nav-chevron,.nav-dropdown:focus-within .nav-chevron{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(4px);
  min-width:200px; padding:4px; display:flex; flex-direction:column;
  background:rgba(244,242,236,.94);
  backdrop-filter:blur(40px) saturate(200%); -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:.5px solid rgba(14,26,31,.10); border-radius:16px; overflow:hidden; z-index:200;
  box-shadow:inset 0 .5px 0 0 rgba(255,255,255,.9), 0 18px 40px rgba(10,70,60,.14);
  opacity:0; visibility:hidden;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.nav-dropdown-menu::after{
  content:''; position:absolute; top:0; left:0; right:0; height:40%; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,transparent 100%); border-radius:16px 16px 0 0;
}
.nav-dropdown-menu::before{content:''; position:absolute; top:-12px; left:0; right:0; height:12px; z-index:201}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a{
  display:block; padding:8px 12px; border-radius:12px; position:relative; z-index:2;
  font-size:13px; font-weight:400; color:var(--mid-on-paper); text-decoration:none; transition:all .15s;
}
.nav-dropdown-menu a:hover{color:var(--dark-on-paper); background:rgba(10,70,60,.07)}
.dd-divider{height:.5px; background:rgba(14,26,31,.10); margin:4px 8px; position:relative; z-index:2}
.nav-cta{
  font-size:12px!important; font-weight:400!important; color:#fff!important; text-decoration:none;
  padding:5px 14px!important; border-radius:980px!important; background:#007D71!important;
  border:.5px solid rgba(0,125,113,.45)!important;
  box-shadow:inset 0 .5px 0 0 rgba(255,255,255,.2), 0 2px 8px rgba(0,125,113,.32)!important;
  transition:background .2s,box-shadow .2s;
}
.nav-cta:hover{background:#006A60!important}
/* hamburger */
.mobile-menu-btn{
  display:none; margin-left:auto; width:42px; height:42px; border:0; background:transparent;
  color:inherit; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:0;
}
.mobile-menu-btn span{width:22px; height:2px; border-radius:2px; background:currentColor; transition:transform .25s var(--ease-out),opacity .2s}
.mobile-menu-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-btn.is-open span:nth-child(2){opacity:0}
.mobile-menu-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* mobile panel - light glass to match these light pages */
.mobile-dropdown{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:199;
  display:flex; flex-direction:column; padding:10px 16px 20px;
  background:rgba(245,244,239,.97); backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-bottom:1px solid rgba(14,26,31,.10);
  transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s,transform .25s,visibility .25s;
}
.mobile-dropdown.open{transform:none; opacity:1; visibility:visible; pointer-events:auto}
.mobile-dropdown > a,.mobile-solutions-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:15px 6px; font-size:16px; font-weight:600; color:var(--dark-on-paper); text-decoration:none;
  border-bottom:1px solid rgba(14,26,31,.08);
}
.mobile-chev{width:13px; height:13px; transition:transform .25s var(--ease-out)}
.mobile-solutions-toggle[aria-expanded="true"] .mobile-chev{transform:rotate(180deg)}
.mobile-solutions-sub{display:none; flex-direction:column; padding:4px 6px 10px}
.mobile-solutions-sub.open{display:flex}
.mobile-solutions-sub a{padding:11px 12px; font-size:14.5px; color:var(--mid-on-paper); text-decoration:none; border-radius:8px}
.mobile-solutions-sub a:hover{background:rgba(0,125,113,.08); color:var(--dark-on-paper)}
.mobile-dropdown > a.mobile-cta{ /* outranks the .mobile-dropdown > a row rule */
  margin-top:16px; padding:14px; border-radius:12px; background:#007D71;
  color:#fff; font-weight:600; font-size:15px; text-decoration:none; border-bottom:none;
  justify-content:center; text-align:center;
}
@media (max-width:860px){
  .nav-links{display:none}
  .mobile-menu-btn{display:flex}
}
@media (min-width:861px){ .mobile-dropdown{display:none} }

/* ---------------- sections ---------------- */
section{padding:clamp(24px,3.6vw,43px) 0} /* section rhythm trimmed ~40% (2026-07-21, KP) */
.band-alt{background:var(--paper-2)}
/* section label - sentence case, no tracked caps */
.eyebrow{
  font-size:14.5px; font-weight:600; letter-spacing:0;
  color:var(--teal-ink); margin-bottom:10px;
}
h1,h2,h3{font-weight:650; letter-spacing:-.02em; line-height:1.12; text-wrap:balance}
.sec-title{font-size:clamp(28px,3.6vw,40px); max-width:24ch; margin-bottom:16px}
.sec-sub{font-size:clamp(16px,1.6vw,18px); color:var(--mid-on-paper); max-width:58ch; line-height:1.65}
.go{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-size:15px; font-weight:600; color:var(--teal-ink); text-decoration:none;
}
.go .arr{transition:transform .2s var(--ease-out)}
.go:hover .arr{transform:translateX(4px)}

/* ---------------- hero ---------------- */
.hero{padding:calc(var(--nav-h) + clamp(14px,2.4vw,29px)) 0 clamp(19px,2.6vw,32px)} /* hero top trimmed ~45% (2026-07-21, KP: too much whitespace above the text) */
.hero .eyebrow{font-size:14.5px}
.hero h1{font-size:clamp(34px,4.8vw,54px); font-weight:700; max-width:20ch; margin-bottom:20px}
.hero h1 em{font-style:normal; color:var(--teal-ink)}
.hero .lede{font-size:clamp(17px,1.8vw,20px); color:var(--mid-on-paper); max-width:56ch; line-height:1.65; margin-bottom:30px}

/* ---------------- buttons ---------------- */
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 26px;
  border-radius:980px; font-size:15px; font-weight:600; text-decoration:none;
  transition:transform .18s var(--ease-out),background .18s,box-shadow .18s;
  border:none; cursor:pointer; font-family:var(--font-d);
}
.btn-solid{background:var(--fmc-teal); color:#fff; box-shadow:0 10px 26px -12px rgba(0,125,113,.55)}
.btn-solid:hover{background:var(--fmc-teal-dark); transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--paper-line); color:var(--dark-on-paper); background:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:var(--mid-on-paper); transform:translateY(-1px)}

/* ---------------- minimalist Safari-style frame ---------------- */
.frame-browser{
  border-radius:12px; overflow:hidden; background:#fff;
  border:1px solid var(--paper-line);
}
.fb-bar{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:#F0EFE9; border-bottom:1px solid var(--paper-line);
}
.fb-bar i{width:9px; height:9px; border-radius:50%; background:#D6D3C8}
.fb-bar i:nth-child(1){background:#CBC7BA}
.frame-browser img{width:100%; height:auto}

/* ---------------- iPhone frame ---------------- */
.frame-phone{
  width:100%; max-width:260px; margin:0 auto;
  border-radius:38px; background:#10141C; padding:10px;
  border:1px solid rgba(10,17,32,.28); position:relative;
}
.fp-screen{position:relative; border-radius:28px; overflow:hidden; background:#0B0F16; aspect-ratio:9/19.2}
.fp-screen img{position:absolute; top:24px; left:0; width:100%}
.fp-island{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:76px; height:20px; border-radius:12px; background:#000; z-index:2;
}

/* ---------------- cards ---------------- */
.card{
  padding:26px 26px 28px; background:#fff; border:1px solid var(--paper-line);
  border-radius:20px;
}
.card h3{font-size:19px; margin-bottom:10px}
.card p{font-size:14.5px; color:var(--mid-on-paper); line-height:1.6}
.card .tag{
  display:inline-block; font-size:13px; font-weight:600; letter-spacing:0;
  color:var(--teal-ink); margin-bottom:8px;
}

/* ---------------- numbered steps ---------------- */
.steps{list-style:none; display:grid; gap:22px}
.steps li{display:grid; grid-template-columns:34px 1fr; gap:16px}
.steps .num{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--teal-deep); color:var(--teal-ink);
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
}
.steps h3{font-size:16.5px; margin-bottom:4px}
.steps p{font-size:14.5px; color:var(--mid-on-paper); line-height:1.55}

/* ---------------- forms ---------------- */
.field{margin-bottom:18px}
.field label{
  display:block; font-size:13px; font-weight:600; color:var(--mid-on-paper);
  margin-bottom:7px; letter-spacing:.01em;
}
.field label b{color:var(--teal-ink); font-weight:700}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],
.field input[type="password"],.field select,.field textarea{
  width:100%; padding:12px 14px; font-family:var(--font-d); font-size:15px;
  color:var(--dark-on-paper); background:#fff;
  border:1px solid var(--paper-line); border-radius:12px; outline:none;
  transition:border-color .18s, box-shadow .18s; -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235A657A' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  padding-right:38px;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--fmc-teal); box-shadow:0 0 0 3px rgba(0,125,113,.14);
}
.field.is-error input,.field.is-error select,.field.is-error textarea{border-color:#B4433A; box-shadow:0 0 0 3px rgba(180,67,58,.12)}
.field .err{display:none; font-size:12.5px; color:#B4433A; margin-top:6px}
.field.is-error .err{display:block}
.form-note{font-size:12.5px; color:var(--faint-on-paper)}
.form-success{
  display:none; padding:20px 22px; border-radius:12px;
  background:rgba(0,125,113,.07); border:1px solid rgba(0,125,113,.22);
  font-size:15px; color:var(--dark-on-paper); line-height:1.55;
}
.form-success.show{display:block}
.form-error{
  display:none; margin-top:14px; padding:14px 16px; border-radius:10px;
  background:rgba(180,67,58,.07); border:1px solid rgba(180,67,58,.25);
  font-size:13.5px; color:#8F332C; line-height:1.5;
}
.form-error.show{display:block}
.form-error a{color:inherit; font-weight:600}
/* Honeypot: visually gone, still in the form for bots. */
.hp-field{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* ---------------- closing cta ---------------- */
.closing{background:var(--ink-2); color:#EEF3FB; text-align:center}
.closing h2{font-size:clamp(28px,3.6vw,40px); max-width:22ch; margin:0 auto 16px}
.closing p{font-size:16.5px; color:#A6B2C8; max-width:52ch; margin:0 auto 32px; line-height:1.65}
.closing .btn-ghost{border-color:rgba(166,178,200,.35); color:#EEF3FB; background:transparent}
.closing .btn-ghost:hover{border-color:#EEF3FB}
.closing .btn-row{justify-content:center}

/* ---------------- footer ---------------- */
.footer{background:var(--paper-2); border-top:1px solid var(--paper-line); padding:56px 0 28px}
.footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,48px);
  padding-bottom:40px; border-bottom:1px solid var(--paper-line);
}
.footer__brand{display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; text-decoration:none; color:var(--dark-on-paper)}
.footer__brand img{width:22px; height:22px; border-radius:0; object-fit:contain}
.footer__brand-text{font-size:14px; font-weight:600; letter-spacing:-.005em}
.footer__brand-text span{font-weight:400; color:var(--mid-on-paper); margin-left:2px}
.footer__desc{font-size:13.5px; color:var(--mid-on-paper); line-height:1.55; max-width:36ch}
.footer__col h4{
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint-on-paper); margin-bottom:16px;
}
.footer__col ul{list-style:none}
.footer__col li{margin-bottom:10px}
.footer__col a{font-size:13.5px; color:var(--mid-on-paper); text-decoration:none; transition:color .15s ease}
.footer__col a:hover{color:var(--dark-on-paper)}
.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding-top:24px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint-on-paper);
}
.footer__bottom a{color:var(--mid-on-paper); text-decoration:none; transition:color .15s ease}
.footer__bottom a:hover{color:var(--dark-on-paper)}

/* ---------------- reveal ---------------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .footer__top{grid-template-columns:1fr}
}