:root {
      --navy:#0D2B45;
      --shadow:#08182A;
      --slate:#1C3142;
      --steel:#5F6B78;
      --chrome:#C4CDD6;
      --mist:#F4F6F8;
      --ice:#F7FBFD;

      --fridge:#1462C6;
      --air:#45B5E8;
      --cyan:#00AEEF;
      --red:#E12B2B;
      --copper:#C76A2B;

      --max:1240px;
      --radius:28px;
    }

    * { box-sizing:border-box; }
    body {
      margin:0;
      background:var(--ice);
      color:var(--slate);
      font-family:"IBM Plex Sans", system-ui, sans-serif;
      line-height:1.55;
    }

    img { max-width:100%; display:block; }
    a { color:inherit; text-decoration:none; }

    .wrap {
      width:min(var(--max), calc(100% - 42px));
      margin:auto;
    }

    .mono {
      font-family:"IBM Plex Mono", monospace;
      text-transform:uppercase;
      letter-spacing:.13em;
      font-size:.76rem;
      color:var(--cyan);
      font-weight:500;
    }

    h1, h2, h3 {
      font-family:"Space Grotesk", sans-serif;
      letter-spacing:-.05em;
      line-height:1;
      margin:0;
      color:var(--navy);
    }

    h1 {
      color:white;
      font-size:clamp(3rem, 6vw, 6.2rem);
      max-width:820px;
    }

    h1 span { color:var(--cyan); }

    .hero-logo {
      width:clamp(340px, 48vw, 640px);
      margin-bottom:26px;
      filter:drop-shadow(0 10px 26px rgba(0,0,0,.45));
    }

    h2 {
      font-size:clamp(2.2rem, 4vw, 4.4rem);
    }

    p {
      margin:0;
      color:var(--steel);
    }

    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:52px;
      padding:0 22px;
      border-radius:14px;
      font-family:"Space Grotesk", sans-serif;
      font-weight:700;
      border:1px solid transparent;
    }

    .btn-primary {
      background:var(--fridge);
      color:white;
      box-shadow:0 16px 36px rgba(20,98,198,.32);
    }

    .btn-secondary {
      color:white;
      border-color:rgba(255,255,255,.28);
      background:rgba(255,255,255,.08);
    }

    .btn-energy {
      background:var(--red);
      color:white;
      box-shadow:0 16px 36px rgba(225,43,43,.22);
    }
    .btn-talk {
      background:var(--slate);
      color:var(--ice);
      border:1px solid rgba(196,205,214,.28);
      transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .btn-talk:hover, .btn-talk:focus-visible {
      background:var(--navy);
      border-color:rgba(0,174,239,.55);
      box-shadow:0 0 0 1px rgba(0,174,239,.35), 0 16px 36px rgba(0,174,239,.12);
    }

    header {
      position:sticky;
      top:0;
      z-index:20;
      background:rgba(8,24,42,.94);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(255,255,255,.1);
    }

    .nav {
      height:100px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:28px;
    }

    .brand img { width:185px; }

    nav {
      display:flex;
      gap:22px;
      align-items:center;
      color:rgba(255,255,255,.82);
      font-weight:600;
      font-size:.95rem;
    }
    .navitem > a { white-space:nowrap; }

    nav a:not(.book) {
      font-family:"Space Grotesk", sans-serif;
      font-weight:600;
      letter-spacing:.005em;
      font-size:.95rem;
    }

    nav a:not(.book) { color:rgba(255,255,255,.82); transition:color .15s ease; }
    nav a:not(.book):hover { color:#fff; }

    .navitem { position:relative; }
    .navitem > a:not(.book) { display:inline-flex; align-items:center; gap:6px; padding:38px 0; }
    .navitem-cta { display:flex; align-items:center; }
    .navitem > a::after {
      content:""; width:5px; height:5px;
      border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
      transform:rotate(45deg) translateY(-1px);
      opacity:.55; transition:transform .18s ease, opacity .15s ease;
    }
    .navitem:hover > a::after { transform:rotate(225deg) translateY(-1px); opacity:.9; }

    .dropdown {
      position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
      min-width:248px; padding:8px;
      background:rgba(8,24,42,.98);
      border:1px solid var(--chrome);
      border-radius:14px;
      box-shadow:0 22px 48px rgba(0,0,0,.4);
      display:flex; flex-direction:column; gap:2px;
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .16s ease, transform .16s ease;
      z-index:30;
    }
    .navitem:hover .dropdown,
    .navitem:focus-within .dropdown {
      opacity:1; visibility:visible; pointer-events:auto;
      transform:translateX(-50%) translateY(0);
    }
    .dropdown a {
      display:block; padding:11px 14px; border-radius:9px;
      font-family:"IBM Plex Sans", sans-serif !important;
      font-weight:500 !important; font-size:.92rem !important;
      color:rgba(255,255,255,.78); white-space:nowrap; letter-spacing:0 !important;
    }
    .dropdown a:hover { background:rgba(255,255,255,.06); color:#fff; }

    .book {
      padding:13px 30px;
      border-radius:999px;
      background:var(--fridge);
      color:white;
      letter-spacing:.01em;
      white-space:nowrap;
    }
    .navitem-cta > a.book::after { display:none; }
    .dropdown-right { left:auto; right:0; transform:translateX(0) translateY(8px); }
    .navitem-cta:hover .dropdown-right,
    .navitem-cta:focus-within .dropdown-right { transform:translateX(0) translateY(0); }

    .hero {
      position:relative;
      overflow:hidden;
      padding:0;
      background:
        radial-gradient(circle at 80% 18%, rgba(0,174,239,.25), transparent 32%),
        linear-gradient(135deg, var(--shadow), var(--navy) 55%, #123E5F);
      color:white;
    }

    .hero:before {
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:44px 44px;
      mask-image:linear-gradient(to bottom, black, transparent 76%);
    }

    .hero-grid {
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:48px;
      align-items:start;
      padding:8px 0 92px;
    }

    .lead {
      color:rgba(255,255,255,.82);
      font-size:1.25rem;
      max-width:720px;
      margin:24px 0 34px;
    }

    .actions {
      display:flex;
      flex-wrap:wrap;
      gap:14px;
    }

    .signals {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:38px;
    }

    .hero-actions {
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:16px;
      margin-top:-48px;
      padding-bottom:84px;
    }

    .hero-actions .btn { width:100%; }

    .pill {
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.13);
      font-family:"IBM Plex Mono", monospace;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.72rem;
      color:rgba(255,255,255,.82);
    }
    a.pill { text-decoration:none; transition:background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease; cursor:pointer; }
    a.pill:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); color:#fff; transform:translateY(-2px); }

    .dot {
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--cyan);
    }

    .dot.fridge { background:var(--fridge); }
    .dot.air { background:var(--air); }
    .dot.red { background:var(--red); }
    .dot.copper { background:var(--copper); }

    .hero-photo {
      position:relative;
      min-height:560px;
      border-radius:34px;
      overflow:visible;
      box-shadow:0 30px 80px rgba(0,0,0,.32);
      border:1px solid rgba(255,255,255,.15);
    }

    .hero-photo img {
      width:100%;
      height:560px;
      object-fit:cover;
      border-radius:34px;
    }

    .hero-photo:after {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to top, rgba(8,24,42,.86), transparent 55%);
      border-radius:34px;
    }

    .reading {
      position:absolute;
      z-index:3;
      left:24px;
      right:24px;
      bottom:-85px;
      padding:16px 18px 20px;
      border-radius:20px;
      background:rgba(8,24,42,.9);
      border:1px solid rgba(255,255,255,.15);
      box-shadow:0 26px 54px rgba(0,0,0,.42);
      backdrop-filter:blur(12px);
    }

    .reading small {
      font-family:"IBM Plex Mono", monospace;
      text-transform:uppercase;
      letter-spacing:.1em;
      color:rgba(255,255,255,.68);
    }

    .reading strong {
      display:block;
      margin-top:6px;
      font-family:"Space Grotesk", sans-serif;
      font-size:2.3rem;
      color:white;
      letter-spacing:-.04em;
    }

    .proof {
      margin-top:-50px;
      position:relative;
      z-index:4;
    }

    .proof-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      background:white;
      border:1px solid var(--chrome);
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 24px 70px rgba(8,24,42,.14);
    }

    .proof-item {
      padding:28px 26px;
      border-right:1px solid var(--chrome);
    }

    .proof-item:last-child { border-right:0; }

    .proof-item b {
      display:block;
      color:var(--navy);
      font-family:"Space Grotesk", sans-serif;
      font-size:1.12rem;
      line-height:1.15;
      margin-bottom:8px;
    }

    section { padding:96px 0; }

    .section-head {
      display:grid;
      grid-template-columns:.65fr 1fr;
      gap:58px;
      align-items:end;
      margin-bottom:36px;
    }

    .section-head p {
      font-size:1.08rem;
      max-width:680px;
    }

    .services { background:var(--mist); padding-top:132px; }

    .service-grid {
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:16px;
    }

    .card {
      background:white;
      border:1px solid var(--chrome);
      border-radius:22px;
      overflow:hidden;
      box-shadow:0 18px 42px rgba(8,24,42,.06);
    }

    .service-card {
      min-height:315px;
      display:flex;
      flex-direction:column;
    }

    .service-card .inside {
      padding:24px 20px;
    }

    .icon {
      width:52px;
      height:52px;
      border-radius:16px;
      display:grid;
      place-items:center;
      margin-bottom:18px;
      background:var(--mist);
      color:var(--fridge);
      font-size:1.65rem;
    }

    .service-card h3 {
      font-size:1.14rem;
      margin-bottom:10px;
    }

    .bar {
      margin-top:auto;
      height:10px;
      background:var(--fridge);
    }

    .bar.air { background:var(--air); }
    .bar.system { background:linear-gradient(90deg, var(--navy), var(--cyan)); }
    .bar.energy { background:linear-gradient(90deg, var(--red), var(--copper)); }
    .bar.service { background:var(--steel); }

    .case {
      background:
        radial-gradient(circle at 9% 18%, rgba(0,174,239,.18), transparent 32%),
        linear-gradient(135deg, var(--shadow), var(--navy));
      color:white;
    }

    .case h2 { color:white; }

    .case-grid {
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:48px;
      align-items:center;
    }

    .case p {
      color:rgba(255,255,255,.76);
      font-size:1.08rem;
      max-width:580px;
      margin-top:20px;
    }

    .quote {
      margin:28px 0;
      padding:24px;
      border-left:4px solid var(--cyan);
      background:rgba(255,255,255,.08);
      border-radius:0 18px 18px 0;
      font-family:"Space Grotesk", sans-serif;
      font-size:1.35rem;
      line-height:1.2;
      color:white;
    }

    .video {
      position:relative;
      min-height:470px;
      border-radius:34px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.15);
      box-shadow:0 30px 80px rgba(0,0,0,.25);
      cursor:pointer;
    }

    .video iframe {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }

    .video img {
      width:100%;
      height:470px;
      object-fit:cover;
    }

    .video:after {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to top, rgba(8,24,42,.78), rgba(8,24,42,.1));
    }

    .play {
      position:absolute;
      inset:0;
      z-index:3;
      display:grid;
      place-items:center;
    }

    .play span {
      width:92px;
      height:92px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--cyan);
      color:white;
      font-size:2rem;
      box-shadow:0 20px 44px rgba(0,174,239,.3);
    }

    .caption {
      position:absolute;
      z-index:4;
      left:26px;
      right:26px;
      bottom:24px;
      color:white;
    }

    .caption small {
      font-family:"IBM Plex Mono", monospace;
      text-transform:uppercase;
      letter-spacing:.1em;
      color:rgba(255,255,255,.7);
    }

    .caption b {
      display:block;
      font-family:"Space Grotesk", sans-serif;
      font-size:1.35rem;
    }

    .system-grid {
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:42px;
    }

    .system-card {
      padding:34px;
      border-radius:28px;
      position:relative;
    }

    .system-card:before {
      content:"";
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:7px;
      background:linear-gradient(90deg, var(--fridge), var(--air), var(--cyan), var(--red), var(--copper));
    }

    .system-card h3 {
      font-size:2rem;
      margin-bottom:14px;
    }

    .checks {
      display:grid;
      gap:16px;
      margin-top:26px;
    }

    .check {
      display:grid;
      grid-template-columns:36px 1fr;
      gap:14px;
    }

    .check span {
      width:36px;
      height:36px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:rgba(0,174,239,.11);
      color:var(--fridge);
      font-weight:800;
    }

    .check b {
      display:block;
      color:var(--navy);
    }

    .image-stack {
      display:grid;
      gap:18px;
    }

    .image-stack.single .tile {
      height:100%;
      min-height:420px;
    }

    .tile {
      position:relative;
      min-height:238px;
      border-radius:22px;
      overflow:hidden;
      border:1px solid var(--chrome);
      background:var(--slate);
    }

    .tile img {
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .tile span {
      position:absolute;
      left:16px;
      bottom:16px;
      padding:8px 10px;
      border-radius:999px;
      background:rgba(8,24,42,.78);
      color:white;
      font-family:"IBM Plex Mono", monospace;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.72rem;
    }

    .awards {
      background:white;
    }

    .award-panel {
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:36px;
      align-items:center;
      padding:38px;
      border-radius:34px;
      background:linear-gradient(135deg, var(--mist), white);
      border:1px solid var(--chrome);
    }

    .award-images {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
      align-items:center;
    }

    .award-images img {
      width:100%;
      aspect-ratio:1 / 1;
      object-fit:contain;
      border-radius:22px;
      background:white;
      border:1px solid var(--chrome);
      box-shadow:0 14px 32px rgba(8,24,42,.08);
    }

    .contact {
      background:linear-gradient(135deg, var(--shadow), var(--navy));
      color:white;
      padding-bottom:0;
    }

    .contact h2 { color:white; }

    .contact p {
      color:rgba(255,255,255,.76);
      font-size:1.1rem;
      margin:20px 0 30px;
      max-width:650px;
    }

    .contact-grid {
      display:grid;
      grid-template-columns:1fr .9fr;
      gap:48px;
      padding-bottom:64px;
      align-items:center;
    }

    .contact-pills {
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:30px;
    }

    .pill-cta {
      display:inline-flex;
      align-items:center;
      min-height:54px;
      padding:0 26px;
      border-radius:999px;
      font-family:"Space Grotesk", sans-serif;
      font-weight:700;
      font-size:1.02rem;
      color:white;
      white-space:nowrap;
    }

    .pill-cta.call { background:var(--fridge); box-shadow:0 14px 30px rgba(20,98,198,.32); }
    .pill-cta.email { background:var(--air); box-shadow:0 14px 30px rgba(69,181,232,.28); }
    .pill-cta.book { background:var(--red); box-shadow:0 14px 30px rgba(225,43,43,.26); }

    .contact-team {
      position:relative;
      border-radius:22px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      aspect-ratio:3 / 2;
    }

    .contact-team img {
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center 28%;
    }

    .contact-team span {
      position:absolute;
      left:16px;
      bottom:16px;
      padding:8px 10px;
      border-radius:999px;
      background:rgba(8,24,42,.78);
      color:white;
      font-family:"IBM Plex Mono", monospace;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.72rem;
    }

    .contact-card {
      padding:28px;
      border-radius:24px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.14);
    }

    .contact-card a {
      display:flex;
      justify-content:space-between;
      gap:20px;
      padding:18px 0;
      border-bottom:1px solid rgba(255,255,255,.12);
      color:white;
      font-family:"Space Grotesk", sans-serif;
      font-weight:700;
      font-size:1.12rem;
    }

    .contact-card a:last-child { border-bottom:0; }

    footer {
      background:var(--navy);
      border-top:1px solid rgba(255,255,255,.12);
      color:rgba(255,255,255,.62);
      margin-top:16px;
      font-size:.9rem;
      position:relative;
    }
    footer::before {
      content:"";
      position:absolute;
      inset:20px;
      border:1px solid rgba(255,255,255,.26);
      border-radius:18px;
      pointer-events:none;
    }
    footer .wrap { position:relative; z-index:1; }

    .footer-partners { display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:11px 22px; border-radius:999px; background:var(--fridge); color:#fff; font-weight:600; font-size:.92rem; text-decoration:none; transition:background .15s ease; }
    .footer-partners:hover { background:var(--air); }
    .footer-partners svg { width:15px; height:15px; }

    /* Master Electricians member badge */
    .me-badge { display:inline-flex; align-items:center; gap:0; background:#fff; border:1px solid var(--chrome); border-radius:16px; padding:14px 22px; box-shadow:0 16px 40px rgba(8,24,42,.16); }
    .me-badge img { height:52px; width:auto; display:block; }
    .me-badge.lg img { height:66px; }
    /* badge + caption row */
    .me-line { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
    .me-line .me-eyebrow { font-family:"IBM Plex Mono", monospace; text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:var(--cyan); display:block; margin-bottom:8px; }
    .me-line p { color:var(--steel); font-size:1.04rem; line-height:1.6; max-width:46ch; margin:0; }
    .me-line .me-copy { flex:1; min-width:260px; }
    /* homepage contact strip — sits under the team photo column */
    .me-strip { display:flex; justify-content:flex-end; padding:8px 0 40px; }
    @media (max-width:860px){ .me-strip { justify-content:center; } .me-line { gap:18px; } }

    .footer-top {
      display:grid;
      grid-template-columns:1.5fr 1fr 1fr;
      gap:48px;
      padding:64px 0 56px;
      align-items:start;
    }

    .footer-brand img {
      width:270px;
      margin:0 0 10px;
    }

    .footer-brand p {
      color:rgba(255,255,255,.66);
      max-width:360px;
      margin:0;
      line-height:1.75;
      font-size:1rem;
    }

    .footer-head {
      font-family:"Space Grotesk", sans-serif;
      font-size:1.5rem;
      font-weight:600;
      letter-spacing:-.02em;
      color:white;
      margin:0 0 26px;
    }

    .footer-list {
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    .footer-list li {
      display:flex;
      align-items:center;
      gap:13px;
      color:rgba(255,255,255,.78);
      font-size:1rem;
    }

    .footer-list a {
      color:rgba(255,255,255,.78);
      transition:color .15s ease;
    }

    .footer-list a:hover { color:white; }

    .footer-list .f-icon {
      flex:none;
      width:18px;
      height:18px;
      color:var(--cyan);
    }

    .facebook {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      margin-top:26px;
      border-radius:10px;
      background:var(--fridge);
      color:white;
      transition:background .15s ease;
    }

    .facebook:hover { background:var(--air); }
    .facebook svg { width:22px; height:22px; }

    .footer-bottom {
      border-top:1px solid rgba(255,255,255,.12);
      padding:22px 0;
    }

    .footer-bottom .wrap {
      display:flex;
      justify-content:space-between;
      gap:22px;
      flex-wrap:wrap;
    }

    .minus { color:var(--fridge); font-weight:800; }
    .plus { color:var(--red); font-weight:800; }

    @media (max-width:1020px) {
      nav a:not(.book) { display:none; }

      .hero-grid,
      .case-grid,
      .system-grid,
      .award-panel,
      .contact-grid,
      .section-head {
        grid-template-columns:1fr;
      }

      .proof-grid { grid-template-columns:repeat(2,1fr); }
      .service-grid { grid-template-columns:repeat(2,1fr); }
      .hero-actions { grid-template-columns:1fr 1fr; }
      .footer-top { grid-template-columns:1fr 1fr; gap:36px; }
    }

    @media (max-width:680px) {
      .wrap { width:min(var(--max), calc(100% - 40px)); }
      .brand img { width:200px; }
      .hero-grid { padding:56px 0 80px; }
      .hero-photo, .hero-photo img { min-height:390px; height:390px; }
      .hero-actions { grid-template-columns:1fr; padding-bottom:64px; }
      .proof-grid, .service-grid, .award-images { grid-template-columns:1fr; }
      .proof-item { border-right:0; border-bottom:1px solid var(--chrome); }
      .proof-item:last-child { border-bottom:0; }
      section { padding:72px 0; }
    }
  
    @media (max-width:900px){
      .navitem > a { padding:14px 0; }
      .dropdown { position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
        box-shadow:none; border:0; background:transparent; padding:4px 0 4px 14px; min-width:0; }
      .navitem:hover .dropdown, .navitem:focus-within .dropdown { transform:none; }
      .navitem > a::after { display:none; }
    }
  
    .hero-top {
      display:flex; align-items:center; justify-content:space-between;
      gap:32px;
      padding-top:34px;
      margin-bottom:40px;
    }
    .hero-top .hero-lockup {
      width:min(460px, 60%);
      height:auto; margin:0; display:block;
    }
    .hero-contact {
      display:flex; flex-direction:column; align-items:flex-end;
      gap:4px; text-align:right; line-height:1.4;
      font-family:"IBM Plex Mono", monospace;
    }
    .hero-contact .hero-locale {
      color:var(--air); font-size:1.05rem; letter-spacing:.04em; white-space:nowrap;
    }
    .hero-contact .hero-call {
      color:var(--air); font-size:1.25rem; font-weight:500;
      letter-spacing:.02em; white-space:nowrap;
    }
    .hero-contact .hero-call:hover { color:#fff; }
    @media (max-width:680px){
      .hero-top { flex-direction:column; align-items:flex-start; gap:14px; }
      .hero-contact { align-items:flex-start; text-align:left; }
      .hero-top .hero-lockup { display:none; }
    }
  
    .btn-tip-wrap { position:relative; display:block; }
    .btn-tip-wrap .btn { width:100%; }
    .btn-tip {
      position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(4px);
      width:max-content; max-width:280px;
      background:var(--navy, #0d1b2a); color:#fff;
      border:1px solid rgba(255,255,255,.26);
      border-radius:12px; padding:11px 14px;
      font-family:"IBM Plex Sans", sans-serif; font-weight:400;
      font-size:.82rem; line-height:1.4; text-align:center;
      box-shadow:0 18px 44px rgba(0,0,0,.4);
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .18s ease, transform .18s ease; z-index:5;
    }
    .btn-tip::after {
      content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
      border:7px solid transparent; border-top-color:var(--slate);
    }
    .btn-tip-wrap:hover .btn-tip,
    .btn-tip-wrap:focus-within .btn-tip {
      opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
    }
  
  
    .footer-signoff { padding:18px 0 40px; }
    .footer-signoff .wrap { display:flex; justify-content:center; }
    .footer-tagline {
      width:min(520px, 80%); height:auto; display:block;
      opacity:.92;
    }
    @media (max-width:680px){ .footer-tagline { width:min(360px, 90%); } }