/* ── theme.css — the site's look and its feature colours ───────────────────
   Loaded AFTER components.css + base.css (which the working flows need) and
   overrides them: light cool page, white cards, navy type, gold action colour,
   one glass floating nav, JetBrains Mono for eyebrows and tags, and the
   feature colours ([data-f] → --c, --c2, --cd, --ct). Sections add their own
   sections/<key>.css.                                                       */
:root {
  --navy: #00396C; --navy-2: #0A4A85; --navy-deep: #002A50; --ink: #0B1B2B;
  --gold: #F7B744; --gold-60: #FFD487; --gold-30: #FDE9C7; --gold-ink: #8C5E0E;
  --slate: #5D7E9B; --mist: #BACEDF; --charcoal: #333333; --grey: #F1F1F1; --white: #FFFFFF;
  --page: #F4F6F9; --card: #FFFFFF; --line: #E2E8F0; --line-navy: rgba(0, 57, 108, .15);
  --text: #2A3A4C; --muted: #5B6C80;
  --font: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --r-card: 20px; --r-panel: 38px; --r-btn: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1); --ease-std: cubic-bezier(.4, 0, .12, 1);
  --shadow-card: 0 1px 2px rgba(0, 57, 108, .06), 0 16px 40px -20px rgba(0, 57, 108, .25);
  --shadow-lift: 0 2px 4px rgba(0, 57, 108, .08), 0 26px 50px -22px rgba(0, 57, 108, .38);
  --s6-gutter: clamp(16px, 4vw, 56px);
  --s6-max: 1320px;
}
html { background: var(--page); overflow-x: clip; }
body.s6-body { background: transparent; color: var(--text); font-family: var(--font); overflow-x: clip; }
.s6-page { position: relative; z-index: 1; background: var(--page); }   /* the page and its footer (shell.js); a dialog makes it inert */
body.s6-body:not(.has-hero) .s6-page > main, body.s6-body:not(.has-hero) .s6-page > .shop-run > main { padding-top: 96px; }   /* two selectors, not :is(): the pages' own overrides match the first one's weight */

/* type */
.s6-wrap { width: min(var(--s6-max), 100% - 2 * var(--s6-gutter)); margin-inline: auto; }
.s6-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 16px; }
.s6-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--gold); border-radius: 2px; }
body.s6-body .theme-btn { display: none !important; }
.s6-dark .s6-eyebrow, .s6-eyebrow.on-dark { color: var(--gold); }
.s6-h1 { font: 700 clamp(36px, 4.4vw, 68px)/1.04 var(--font); letter-spacing: -.025em; color: var(--ink); margin: 0; }
.s6-h2 { font: 700 clamp(30px, 3.4vw, 52px)/1.06 var(--font); letter-spacing: -.022em; color: var(--ink); margin: 0; }
.s6-h2 .mut { color: var(--slate); }
.s6-h3 { font: 700 clamp(20px, 1.6vw, 26px)/1.2 var(--font); letter-spacing: -.012em; color: var(--ink); margin: 0; }
.s6-lede { font: 500 clamp(16px, 1.2vw, 19px)/1.55 var(--font); color: var(--muted); margin: 0; max-width: 60ch; }
.s6-dark { background: var(--navy-deep); color: #D5E1EE; }
.s6-dark .s6-h1, .s6-dark .s6-h2, .s6-dark .s6-h3 { color: #fff; } .s6-dark .s6-lede { color: #A9BDD1; }
.s6-sec { padding: clamp(80px, 11vh, 150px) 0; position: relative; }

/* buttons (shared with the flows' .btn from base.css; these tune it for this look) */
.btn { border-radius: var(--r-btn); font: 700 15px/1 var(--font); height: 50px; }
.btn .ic { width: 30px; height: 30px; border-radius: 8px; }
.btn.gold { background: var(--gold); color: var(--navy); } .btn.gold .ic { background: var(--navy); color: var(--gold); }
.btn.gold:hover { background: #FFC75E; }
.btn.navy { background: var(--navy); color: #fff; } .btn.navy:hover { background: var(--navy-2); }
.btn.glass { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.btn.glass:hover { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .6); }
.btn.glass .ic { background: rgba(255, 255, 255, .9); color: var(--navy); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 3px; }

/* ── the header (owner's inputs, 2026-09-28) ──
   header.nav is application/views/partials/header.php. No bar behind it: the logo stands on its own at the left, the
   links sit in one glass pill in the middle with the search at its end, and the round glass buttons and
   the gold button sit at the right. Over dark areas (the hero, navy panels) it goes white-on-glass (.on-dark).
   The search opens an input BESIDE the links (the pill grows both ways, nothing is hidden). */
body.s6-body .nav {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 60; height: 56px; padding: 0 clamp(16px, 2.4vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center;
  background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none; transition: top .3s var(--ease);
}
body.s6-body .nav > * { pointer-events: auto; }
body.s6-body .nav .logo { width: 128px; justify-self: start; }
body.s6-body .nav .pill {
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; justify-self: center;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(0, 57, 108, .1);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 12px 30px -20px rgba(0, 30, 60, .4); transition: background .3s ease, border-color .3s ease;
}
body.s6-body .nav .pill > a, body.s6-body .nav .more > button { font: 600 14.5px/1 var(--font); color: var(--navy); padding: 12px 16px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
body.s6-body .nav .pill > a:hover, body.s6-body .nav .more > button:hover, body.s6-body .nav .more > button[aria-expanded="true"] { background: rgba(0, 57, 108, .07); }
body.s6-body .nav .pill > a[aria-current="page"], body.s6-body .nav .more > button[aria-current="page"] { color: var(--navy); background: rgba(0, 57, 108, .1); }
body.s6-body .nav .cta { justify-self: end; gap: 8px; }
body.s6-body .nav .icon-btn { width: 44px; height: 44px; border-radius: 50% !important; background: rgba(255, 255, 255, .8) !important; border: 1px solid rgba(0, 57, 108, .12) !important; color: var(--navy) !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; }
body.s6-body .nav .icon-btn:hover { background: #fff !important; }
body.s6-body .nav .cta .btn { height: 44px; border-radius: 999px; padding: 0 20px; font: 700 14.5px/1 var(--font); }
/* search, at the end of the pill */
body.s6-body .nav .srch { position: relative; display: flex; align-items: center; margin-left: 2px; }
body.s6-body .nav .srch-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: rgba(0, 57, 108, .07); color: var(--navy); display: grid; place-items: center; cursor: pointer; transition: background .2s ease; }
body.s6-body .nav .srch-btn:hover { background: rgba(0, 57, 108, .14); }
/* closed, the input is hidden outright (it was a 0-wide, invisible Tab stop); it turns visible the moment the search
   opens and hides again only once the closing slide has finished */
body.s6-body .nav .srch-in { width: 0; opacity: 0; padding: 0; margin: 0; border: 0; height: 40px; border-radius: 999px; background: rgba(0, 57, 108, .06); font: 500 14.5px/1 var(--font); color: var(--ink); outline: none; visibility: hidden; transition: width .4s var(--ease), opacity .25s ease, padding .4s var(--ease), margin .4s var(--ease), visibility 0s linear .4s; }
body.s6-body .nav .srch-in::placeholder { color: #6B7C90; }
body.s6-body .nav .srch-in::-webkit-search-cancel-button { display: none; }
body.s6-body .nav.searching .srch-in { width: clamp(170px, 17vw, 250px); opacity: 1; padding: 0 16px; margin: 0 6px 0 4px; visibility: visible; transition-delay: 0s; }
body.s6-body .nav .srch-res { position: absolute; top: calc(100% + 14px); right: -6px; width: min(360px, 86vw); padding: 6px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lift); display: grid; }
body.s6-body .srch-res[hidden] { display: none; }
body.s6-body .srch-res a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 12px; font: 600 14.5px/1.3 var(--font); color: var(--ink); text-decoration: none; }
body.s6-body .srch-res a:hover, body.s6-body .srch-res a:focus-visible { background: #EEF3F8; }
body.s6-body .srch-res .srch-none { margin: 0; padding: 12px; font: 500 14px/1.45 var(--font); color: var(--muted); } body.s6-body .srch-res .srch-none a { display: inline; padding: 0; color: var(--navy); }
/* over dark */
body.s6-body .nav.on-dark .pill { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); box-shadow: none; }
body.s6-body .nav.on-dark .pill > a, body.s6-body .nav.on-dark .more > button { color: #fff; }
body.s6-body .nav.on-dark .pill > a:hover, body.s6-body .nav.on-dark .more > button:hover, body.s6-body .nav.on-dark .more > button[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
body.s6-body .nav.on-dark .pill > a[aria-current="page"], body.s6-body .nav.on-dark .more > button[aria-current="page"] { background: rgba(255, 255, 255, .2); color: #fff; }
body.s6-body .nav.on-dark .logo .lg-white { display: block !important; } body.s6-body .nav.on-dark .logo .lg-color { display: none !important; }
body.s6-body .nav.on-dark .icon-btn { background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .24) !important; color: #fff !important; }
body.s6-body .nav.on-dark .icon-btn:hover { background: rgba(255, 255, 255, .22) !important; }
body.s6-body .nav.on-dark .srch-btn { background: rgba(255, 255, 255, .14); color: #fff; }
body.s6-body .nav.on-dark .srch-btn:hover { background: rgba(255, 255, 255, .24); }
body.s6-body .nav.on-dark .srch-in { background: rgba(255, 255, 255, .14); color: #fff; } body.s6-body .nav.on-dark .srch-in::placeholder { color: rgba(255, 255, 255, .7); }
/* the phone menu's search */
.menu-srch { position: relative; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 14px; background: #F1F5F9; color: var(--navy); }
.menu-srch .srch-in { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: 500 16px/1 var(--font); color: var(--ink); outline: none; }
.menu-srch .srch-res { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 2; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lift); display: grid; }
body.s6-body .more-menu { border-radius: 18px; }

/* reveals shared by sections: add .rv6 to anything that should rise in once (motion.js-like, run by app/reveal.js on the pages that load it) */
html.fx-motion .rv6 { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
html.fx-motion .rv6.in { opacity: 1; transform: none; }
html.fx-calm .rv6:not(.in) { transform: none; }   /* calm (app/fx.js): they fade in where they are */

/* the pill with search fits down to ~940px (base.css hid it below 1200); while searching on a narrower
   screen, the gold button steps aside so the input has room */
@media (min-width: 941px) and (max-width: 1200px) {
  body.s6-body .nav .pill { display: flex; }
  body.s6-body .nav .burger { display: none; }
  body.s6-body .nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  body.s6-body .nav .cta .btn { display: inline-flex; }             /* components.css hid it below 1080px; it fits */
  body.s6-body .nav.searching .cta .btn { display: none; }
}
@media (max-width: 1100px) { body.s6-body .nav .pill > a, body.s6-body .nav .more > button { padding: 12px 13px; } body.s6-body .nav .logo { width: 116px; } }
@media (max-width: 940px) { body.s6-body .nav { top: 12px; grid-template-columns: auto 1fr auto; } body.s6-body .nav .pill { display: none; } body.s6-body .nav .burger { display: inline-grid; } }
@media (max-width: 600px) { body.s6-body .nav { height: 52px; top: 10px; padding: 0 10px 0 14px; } body.s6-body .nav .logo { width: 104px; } }
/* phones: once you scroll past the hero the logo would sit on top of text, so the header gets a frosted backing there */
@media (max-width: 940px) {
  body.s6-body .nav::before { content: ""; position: absolute; inset: -4px 6px; z-index: -1; border-radius: 18px; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: rgba(244, 246, 249, .86); border: 1px solid rgba(0, 57, 108, .08); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 10px 24px -18px rgba(0, 30, 60, .4); }
  body.s6-body .nav.scrolled::before { opacity: 1; }
  /* over navy panels (and the hero) the strip is navy frosted glass, so the white logo and type never lie on the panel's own words */
  body.s6-body .nav.scrolled.on-dark::before { background: rgba(0, 42, 80, .74); border-color: rgba(255, 255, 255, .12); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .6); }
}
/* the round help button (Airdoot Man) overlaps section corners on the landing; the nav and footer carry Contact there */
body.s6-body.has-hero .help { display: none !important; }
body.s6-body .help-btn { width: 60px; height: 60px; }
/* the nav floats (fixed) instead of taking space, so flow pages and the shop bar start below it */
body.s6-body .flow-page { padding-top: 118px !important; }
/* the shop's bar sits straight under the header. shell.js wraps it and the shop's <main> in a .shop-run: the footer is
   inside .s6-page now, so without that runway the sticky bar stayed stuck over the footer at the end of the page */
body.s6-body .shopbar { top: 86px; }
.s6-page > .shop-run { position: relative; }
body.s6-body:not(.has-hero) :is(.s6-page, .s6-page > .shop-run) > .shopbar { margin-top: 86px; }
@media (max-width: 600px) { body.s6-body .flow-page { padding-top: 96px !important; } body.s6-body .shopbar { top: 76px; } body.s6-body:not(.has-hero) :is(.s6-page, .s6-page > .shop-run) > .shopbar { margin-top: 76px; } }
/* inner pages that open with a .p6-hero bring their own top space (it clears the nav) — don't add the generic 96px on top */
body.s6-body:not(.has-hero) .s6-page > main:has(> .p6-hero:first-child) { padding-top: 0; }
/* the help button stays small and in the corner: 50px, 12px in, so at 1366 it sits in the gutter outside the 1240px
   column. It keeps clear of the booking bars (components.css / shop.css lifted it, but this rule used to win). */
body.s6-body .help { right: 12px; bottom: 12px; } body.s6-body .help-btn { width: 50px; height: 50px; }
body.s6-body:has(.qbar5.on) .help { bottom: 88px; }
@media (max-width: 1100px) { body.s6-body:has(.paybar) .help { bottom: 86px; } }
/* phones: 44px, 10px from the corner, and it tucks most of the way off the edge while the page scrolls down
   (shell.js adds .tuck; it comes back on the way up), so it stops covering the ends of lines, chips and values */
@media (max-width: 720px) {
  body.s6-body .help { right: 10px; bottom: 10px; }
  body.s6-body .help-btn { width: 44px; height: 44px; box-shadow: 0 14px 28px -14px rgba(0, 25, 50, .55), 0 0 0 3px rgba(247, 183, 68, .9); transition: transform 300ms var(--ease), opacity 300ms ease; }
  body.s6-body .help.tuck .help-btn { transform: translateX(calc(100% - 6px)); opacity: .9; }   /* 16px left showing: the width of the page gutter */
}
html.fx-reduce body.s6-body .help-btn { transition: none; }

/* ── feature colours (owner's inputs, 2026-09-28: "each of the icons and key features now need a distinct colour") ──
   Scoped by data-f on any element, so a box, its line, its section and its inner page share one colour.
   --c main · --c2 light · --cd dark (text on white, all 4.5:1 or better) · --ct tint (backgrounds).
   IoT & AI gets a moving gradient instead of one colour (--c, --c2, --c3). */
[data-f="commercial"]  { --c: #2F6FEB; --c2: #7DB1FF; --cd: #1A4DB5; --ct: #EAF1FF; }
[data-f="residential"] { --c: #F5A524; --c2: #FFD47E; --cd: #8A5200; --ct: #FFF4DF; }
[data-f="providers"]   { --c: #16A34A; --c2: #6EE7A0; --cd: #0D6A31; --ct: #E6F7EC; }
[data-f="suppliers"]   { --c: #F0643C; --c2: #FFA488; --cd: #A93614; --ct: #FFEDE6; }
[data-f="oem"]         { --c: #8B5CF6; --c2: #C9B2FF; --cd: #5B30C8; --ct: #F1EBFF; }
[data-f="technicians"], [data-f="academy"] { --c: #0EA5B7; --c2: #66E3EF; --cd: #066A76; --ct: #E3F7F9; }
[data-f="iot"]         { --c: #F7B744; --c2: #FFD487; --c3: #BACEDF; --cd: #00396C; --ct: #EAF1F8; }   /* the neon palette (app/neon.css): gold, light gold, ice; navy for text */

/* ── the glass icon (.gi): a coloured 3D shape behind a frosted-glass tile that carries the glyph ──
   <span class="gi" data-f="oem"><i class="gi-b"></i><i class="gi-g"><svg><use href="media/glass-icons.svg#oem"/></svg></i></span>
   Size with --s. It leans back a little in perspective and straightens up when its card is hovered. */
@property --gi-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.gi { --s: 64px; position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s);
  transform: perspective(420px) rotateX(9deg) rotateY(-13deg); transition: transform .55s var(--ease); }
.gi::after { content: ""; position: absolute; left: 10%; right: 14%; bottom: -12%; height: 18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 42%, transparent), transparent); filter: blur(3px); }
.gi-b { position: absolute; right: 0; top: 0; width: 68%; height: 68%; border-radius: 32%;
  background: radial-gradient(120% 120% at 28% 18%, var(--c2) 0%, var(--c) 52%, var(--cd) 100%);
  box-shadow: inset 0 -5px 9px rgba(0, 0, 0, .2), inset 0 3px 6px rgba(255, 255, 255, .5), 0 10px 18px -8px color-mix(in srgb, var(--c) 80%, transparent);
  transform: rotate(12deg); transition: transform .55s var(--ease); }
.gi-g { position: absolute; left: 0; bottom: 0; width: 76%; height: 76%; border-radius: 30%; display: grid; place-items: center; color: var(--cd);
  background: linear-gradient(140deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .34) 55%, rgba(255, 255, 255, .5) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(170%); backdrop-filter: blur(6px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, inset 0 -12px 18px -10px color-mix(in srgb, var(--c) 34%, transparent), 0 12px 22px -12px rgba(0, 30, 60, .45); }
.gi-g svg { width: calc(var(--s) * .42); height: calc(var(--s) * .42); fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
:is(a, button, .gi-host):hover > .gi, :is(a, button, .gi-host):hover .gi:not(.gi-still), :is(a, button):focus-visible .gi { transform: perspective(420px) rotateX(0) rotateY(0) scale(1.05); }
:is(a, button, .gi-host):hover .gi-b { transform: translate(5%, -5%) rotate(20deg); }
[data-f="iot"] .gi-b, .gi[data-f="iot"] .gi-b { background: conic-gradient(from var(--gi-a), var(--c2), var(--c), #FFFFFF, var(--c3), var(--c2)); animation: gi-spin 6s linear infinite; }
@keyframes gi-spin { to { --gi-a: 360deg; } }
html.fx-reduce :is([data-f="iot"] .gi-b, .gi[data-f="iot"] .gi-b) { animation: none; }
/* on a dark ground the glass goes smoky and the glyph white */
.gi.on-dark .gi-g { color: #fff; background: linear-gradient(140deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .16)); border-color: rgba(255, 255, 255, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 22px -12px rgba(0, 0, 0, .6); }