/* ── footer.css — the page end on every page (built by app/footer.js) ──
   Round two (owner, item 23): the footer matches the rest of the site and the page simply ends with it; no lift-off,
   no spacer, no fixed layer. Two parts that read as one piece:
     .f7-band   on the page's light ground: "Need a hand?" (Newsreader, as every section head), Contact us + the
                phone number, and the crew standing on the footer's top edge beside them;
     .f7-panel  the navy panel (the brain / S.M.A.R.T panels' navy, glow and faded blueprint grid), edge to
                edge with rounded top corners: logo and line, email and address, social icon buttons, four link
                columns (Manrope, gold caps heads), then the legal row.
   Everything hangs off footer.f7 (its own classes, so the older .site-foot rules in components.css / base.css
   never reach it), plus html.f7-end (footer.js: the canvas under the footer is navy near the end).            */

footer.f7 { display: block; position: relative; font-family: var(--font); color: #C9D7E6; }
html.f7-end { background: var(--navy-deep); }   /* an overscroll bounce, or a page shorter than the screen, shows navy under the footer */

/* ── the doors: "Not here for an AC?" (footer.js mountDoors), just before the footer on every inner page ──
   Residential's row of four cards (it was hand-written there) in the site's tokens: Newsreader head in navy, white
   cards on the page ground, each with its audience's glass icon (theme.css .gi) and, on hover, its feature colour
   (data-f → --c / --cd). Four across, two from 1180px, one from 600px. */
nav.f7-doors { position: relative; display: block; padding: var(--s7-sec-sm) 0 0; background: var(--f7-above, transparent); font-family: var(--font); }
nav.f7-doors.is-flush { padding-top: 6px; }        /* the plain section above already ends in a section's padding */
.f7-doors .f7-doors-h { margin: 0 0 clamp(18px, 2.2vw, 26px); font: 400 clamp(28px, 2.6vw, 40px)/1.06 var(--display); letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
.f7-doors .f7-doors-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.f7-doors .f7-doors-row > li { display: flex; min-width: 0; }
.f7-doors .f7-door {
  flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px 12px 10px;
  border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); color: var(--navy); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
.f7-doors .f7-door.is-staff { --c: #00396C; --cd: #00396C; }   /* the staff card: the brand's navy */
.f7-doors .f7-door-art { display: grid; place-items: center; flex: none; width: 60px; height: 60px; line-height: 0; }
.f7-doors .f7-door-art > .gi { --s: 54px; }
.f7-doors .f7-door-art > img { display: block; width: 60px; height: 60px; margin: 0; object-fit: contain; }
.f7-doors .f7-door-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.f7-doors .f7-door-t b { font: 700 15px/1.25 var(--font); letter-spacing: -.005em; color: var(--navy); }
.f7-doors .f7-door-t span { font: 500 13px/1.35 var(--font); color: var(--muted); }
.f7-doors .f7-door-go { display: inline-grid; place-items: center; flex: none; color: var(--navy); transition: transform .2s var(--ease), color .2s ease; }
@media (hover: hover) {
  .f7-doors .f7-door:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c, #00396C) 40%, transparent); box-shadow: 0 1px 2px rgba(0, 57, 108, .06), 0 22px 40px -26px color-mix(in srgb, var(--c, #00396C) 70%, transparent); }
  .f7-doors .f7-door:hover .f7-door-go { transform: translateX(3px); color: var(--cd, var(--navy)); }
}
.f7-doors .f7-door:focus-visible { outline: 3px solid var(--navy) !important; outline-offset: 3px; }   /* a gold ring is under 2:1 on white */
/* motion: the cards rise in one after another the first time the row is in view (footer.js); reduced motion: there */
html.fx-motion .f7-doors .f7-doors-row > li { transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--k, 0) * 70ms); }
html.fx-motion .f7-doors.is-wait .f7-doors-row > li { opacity: 0; transform: translateY(18px); }
html.fx-calm .f7-doors.is-wait .f7-doors-row > li { transform: none; }   /* calm: they fade in where they are */

/* ── the band: words on the left, the crew on the right, standing on the panel's top edge ── */
footer.f7 .f7-band {
  --f7-scene-w: clamp(420px, 48vw, 600px);      /* the crew scene is 3.2:1 (RATIO in footer.js) */
  position: relative; z-index: 1;               /* the crew's feet may touch the panel's edge: they paint over it */
  background: var(--f7-above, transparent);     /* footer.js: an opaque colour above (a flow page's <main>) carries on */
  padding-top: clamp(36px, 6vh, 72px);
}
footer.f7 .f7-band-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px clamp(28px, 4vw, 64px); }
footer.f7 .f7-call { display: grid; justify-items: start; gap: 12px; padding-bottom: clamp(30px, 4.4vh, 48px); min-width: 0; }
footer.f7 .f7-h { margin: 0; font: 400 clamp(32px, 3.5vw, 52px)/1.04 var(--display); letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
footer.f7 .f7-h em { font-style: italic; }
footer.f7 .f7-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
footer.f7 .f7-acts .btn { height: 50px; }
footer.f7 .f7-contact { box-shadow: 0 14px 28px -16px rgba(247, 183, 68, .95); }
footer.f7 .f7-callnum { gap: 10px; padding: 0 20px 0 16px; background: rgba(255, 255, 255, .7); color: var(--navy); border: 1px solid rgba(0, 57, 108, .18); font-variant-numeric: tabular-nums; }
footer.f7 .f7-callnum:hover { background: #fff; border-color: rgba(0, 57, 108, .36); }
footer.f7 .f7-bi { display: inline-grid; place-items: center; color: var(--navy); }
footer.f7 .f7-band :focus-visible { outline: 3px solid var(--navy) !important; outline-offset: 3px; }   /* a gold ring is under 2:1 on the light ground */

/* the crew (footer.js places each one: --x left, --h height, --w width) */
footer.f7 .f7-crew { position: relative; justify-self: end; width: var(--f7-scene-w); pointer-events: none; user-select: none; }
footer.f7 .f7-scene { --f7-ratio: 3.2; position: relative; width: 100%; aspect-ratio: var(--f7-ratio); }
footer.f7 .f7-who {
  position: absolute; left: var(--x); bottom: -1px; width: var(--w); height: var(--h); display: block; margin: 0;
  object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; -webkit-user-drag: none;
  filter: drop-shadow(0 10px 14px rgba(0, 30, 60, .16));
}
footer.f7 .f7-floor {
  position: absolute; left: 4%; right: 4%; bottom: -1px; height: 16%; opacity: .7; transform-origin: 50% 100%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(0, 42, 80, .34), rgba(0, 42, 80, .1) 55%, rgba(0, 42, 80, 0));
}
/* motion: they wait out of sight until the band is in view, pop up (footer.js), then bob while on screen */
html.fx-motion footer.f7 .f7-crew.is-wait .f7-who { transform: translateY(14%) scale(.8, .7); opacity: 0; }
html.fx-motion footer.f7 .f7-crew.is-wait .f7-floor { transform: scale(.6, .7); opacity: .25; }
html.fx-motion footer.f7 .f7-crew.is-breathing .f7-who { animation: f7-bob 5.2s ease-in-out infinite; animation-delay: var(--dl, 0s); }
footer.f7 .f7-crew.is-off * { animation-play-state: paused !important; }
/* calm: footer.js fades them in where they stand (no hidden start transform), and they stand still after */
html.fx-calm footer.f7 .f7-crew.is-wait :is(.f7-who, .f7-floor) { transform: none; }
html.fx-calm footer.f7 .f7-crew.is-breathing .f7-who { animation: none; }
@keyframes f7-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2.2%) scale(1.004, 1.012); } }

/* ── the navy panel ── */
footer.f7 .f7-panel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding: clamp(44px, 5.2vw, 72px) 0 clamp(20px, 2.2vw, 28px);
  background:
    radial-gradient(46% 80% at 76% 0%, rgba(10, 74, 133, .85) 0%, rgba(10, 74, 133, 0) 72%),
    radial-gradient(60% 70% at 0% 100%, rgba(0, 57, 108, .9) 0%, rgba(0, 57, 108, 0) 70%),
    var(--navy-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
footer.f7 .f7-panel::before {   /* the brain panel's faded blueprint grid */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(186, 206, 223, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 206, 223, .05) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
  -webkit-mask-image: radial-gradient(60% 90% at 70% 0%, #000 0%, transparent 80%); mask-image: radial-gradient(60% 90% at 70% 0%, #000 0%, transparent 80%);
}
footer.f7 .f7-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 3fr); gap: 40px clamp(36px, 5vw, 88px); align-items: start; }

footer.f7 .f7-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
footer.f7 .f7-logo { display: block; width: 132px; border-radius: 6px; }
footer.f7 .f7-logo img { display: block; width: 100%; height: auto; margin: 0; }
footer.f7 .f7-motto { margin: 0; max-width: 18ch; font: 400 clamp(23px, 1.9vw, 29px)/1.16 var(--display); letter-spacing: -.015em; color: #fff; text-wrap: balance; }
footer.f7 .f7-motto em { font-style: italic; color: var(--gold-60); }
footer.f7 .f7-reach { display: grid; gap: 12px; font-style: normal; min-width: 0; }
footer.f7 .f7-reach a { display: inline-flex; align-items: center; gap: 12px; justify-self: start; max-width: 100%; color: #fff; text-decoration: none; font: 600 15px/1.25 var(--font); overflow-wrap: anywhere; }
footer.f7 .f7-reach a:hover { color: var(--gold-60); }
footer.f7 .f7-i {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: var(--gold);
}
footer.f7 .f7-addr { display: inline-flex; align-items: flex-start; gap: 12px; max-width: 44ch; font: 500 13px/1.55 var(--font); color: #A3B9CF; }
footer.f7 .f7-addr .f7-i { color: #9DB4CB; }
footer.f7 .f7-addr > span:last-child { padding-top: 2px; }
footer.f7 .f7-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
footer.f7 .f7-social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #D5E1EE;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .3s var(--ease);
}
footer.f7 .f7-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-2px); }

footer.f7 .f7-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 2.4vw, 40px); padding-top: 6px; }
footer.f7 .f7-col h3 { margin: 0 0 18px; font: 700 12px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
footer.f7 .f7-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
footer.f7 .f7-col a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; max-width: 100%; color: #C9D7E6; text-decoration: none; font: 500 15px/1.35 var(--font); transition: color .2s ease; }
footer.f7 .f7-u { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ease); }
footer.f7 .f7-col a:hover { color: #fff; }
footer.f7 .f7-col a:hover .f7-u { background-size: 100% 1px; }
/* IoT & AI's name is neon (app/neon.css, footer.js): the link is its glow's stacking context */
footer.f7 .f7-col a.f7-neon { isolation: isolate; }
footer.f7 .f7-col a.f7-neon .neon-ai { font-weight: 700; }
footer.f7 .f7-tag { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(247, 183, 68, .45); border-radius: 6px; padding: 4px 6px 3px; }

footer.f7 .f7-bot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px;
  margin-top: clamp(36px, 4.4vw, 60px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12);
  font: 500 13px/1.4 var(--font); color: #A3B9CF;
}
footer.f7 .f7-bot p { margin: 0; }
footer.f7 .f7-bot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
footer.f7 .f7-bot a { color: #C9D7E6; text-decoration: none; }
footer.f7 .f7-bot a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
/* the Animations button (app/fx.js motionToggle; its shape is in site.css), last in the legal row, in the panel's colours */
footer.f7 .f7-bot .f7-fx { min-height: 38px; border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #C9D7E6; font-size: 13px; }
footer.f7 .f7-bot .f7-fx b { color: #fff; }
footer.f7 .f7-bot .f7-fx .fx-sw { background: rgba(255, 255, 255, .22); }
footer.f7 .f7-bot .f7-fx[aria-pressed="true"] .fx-sw { background: var(--gold); }
footer.f7 .f7-bot .f7-fx:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .12); color: #fff; }
/* inner pages keep the round help button (Airdoot Man) at the bottom right: the legal row stops short of it */
body.s6-body:not(.has-hero):not([data-help="off"]) footer.f7 .f7-bot { padding-right: 86px; }

footer.f7 .f7-panel :focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 3px; }
footer.f7 :is(.f7-col a, .f7-reach a, .f7-bot a, .f7-logo) { border-radius: 6px; }   /* rounds the keyboard focus ring */

/* ── widths ── */
@media (max-width: 1180px) { .f7-doors .f7-doors-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .f7-doors .f7-doors-row { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
/* tablets and small laptops: the brand block runs across the top (logo and line | email, address, socials), the
   four columns under it */
@media (max-width: 1180px) {
  footer.f7 .f7-main { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  footer.f7 .f7-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: start; }
  footer.f7 :is(.f7-logo, .f7-motto, .f7-social) { grid-column: 1; }
  footer.f7 .f7-reach { grid-column: 2; grid-row: 1 / span 3; padding-top: 4px; }
}
/* the crew move under the words */
@media (max-width: 900px) {
  footer.f7 .f7-band { --f7-scene-w: min(100%, 560px); }
  footer.f7 .f7-band-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  footer.f7 .f7-call { padding-bottom: 0; }
  footer.f7 .f7-crew { justify-self: center; }
}
@media (max-width: 720px) {
  footer.f7 .f7-band { --f7-scene-w: 100%; padding-top: 40px; }
  footer.f7 .f7-h { font-size: clamp(30px, 8.6vw, 38px); }
  footer.f7 .f7-acts { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  footer.f7 .f7-panel { border-radius: 24px 24px 0 0; padding-top: 40px; }
  footer.f7 .f7-brand { display: flex; gap: 18px; }
  footer.f7 .f7-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  footer.f7 .f7-col a { font-size: 14.5px; }
  footer.f7 .f7-bot { flex-direction: column; align-items: flex-start; margin-top: 36px; }
  body.s6-body:not(.has-hero):not([data-help="off"]) footer.f7 .f7-bot { padding-right: 76px; }
}
/* on a phone the scene is the column's width: the group stands a little larger, the others close in round it */
@media (max-width: 520px) {
  footer.f7 .f7-scene { --f7-ratio: 2.6; }
  footer.f7 .f7-who[data-who='fix'] { left: -1%; }
  footer.f7 .f7-who[data-who='group'] { left: 23%; }
  footer.f7 .f7-who[data-who='clean'] { left: 69%; }
  footer.f7 .f7-who[data-who='whirl'] { left: 82%; }
}