:root{
      /* ===== Brand blues (tweak to match logo exactly) ===== */
      --blue-ink: #0b2f66;
      --blue-ice: #8fd0ff;
      --blue-core: #2f7cf6;
      --blue-deep: #1d4ed8;

      --page-bg: #ffffff;
      --text: #0b1220;
      --muted: rgba(11,18,32,.68);

      --container: 1180px;

      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;

      --ease: cubic-bezier(.2,.8,.2,1);
      --dur: 260ms;

      --shadow: 0 18px 50px rgba(0,0,0,.14);
      --shadow-soft: 0 10px 28px rgba(0,0,0,.12);

      /* Grain */
      --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

      /* ===== Section theme tokens (LIGHT by default) ===== */
      --sec-panel-bg: linear-gradient(135deg, rgba(235,245,255,.88), rgba(255,255,255,.92));
      --sec-panel-border: rgba(11,18,32,.08);
      --sec-panel-shadow: 0 22px 55px rgba(0,0,0,.08);

      --sec-card-bg: rgba(255,255,255,.78);
      --sec-card-bg-hover: rgba(255,255,255,.92);
      --sec-card-border: rgba(29,78,216,.34);
      --sec-card-border-hover: rgba(29,78,216,.52);
      --sec-card-shadow: 0 14px 34px rgba(0,0,0,.06);
      --sec-card-shadow-hover: 0 22px 55px rgba(0,0,0,.10);

      --sec-title: rgba(11,18,32,.92);
      --sec-body: rgba(11,18,32,.62);
      --sec-body-2: rgba(11,18,32,.64);
      --sec-link: rgba(11,18,32,.72);

      --sec-pill-bg: rgba(255,255,255,.72);
      --sec-pill-border: rgba(11,18,32,.10);
      --sec-pill-shadow: 0 14px 30px rgba(0,0,0,.06);
      --sec-pill-fg: #0b1220;

      --sec-pill-blue-bg: linear-gradient(135deg, rgba(210,238,255,.92), rgba(255,255,255,.84));
      --sec-pill-blue-border: rgba(11,47,102,.14);
      --sec-pill-blue-fg: var(--blue-ink);

      --sec-media-bg: rgba(255,255,255,.55);
      --sec-media-border: rgba(11,18,32,.08);
      --sec-media-shadow: 0 26px 70px rgba(0,0,0,.10);
      --sec-media-glow: radial-gradient(640px 420px at 40% 30%, rgba(47,124,246,.14), rgba(255,255,255,0));
    }

    @media (prefers-color-scheme: dark){
      :root{
        --page-bg: #05070d;
        --text: rgba(255,255,255,.92);
        --muted: rgba(255,255,255,.70);

        --shadow: 0 18px 60px rgba(0,0,0,.55);
        --shadow-soft: 0 12px 34px rgba(0,0,0,.48);

        --sec-panel-bg: linear-gradient(135deg, rgba(10,14,22,.92), rgba(5,7,13,.96));
        --sec-panel-border: rgba(255,255,255,.10);
        --sec-panel-shadow: 0 26px 70px rgba(0,0,0,.55);

        --sec-card-bg: rgba(255,255,255,.04);
        --sec-card-bg-hover: rgba(255,255,255,.06);
        --sec-card-border: rgba(143,208,255,.22);
        --sec-card-border-hover: rgba(143,208,255,.34);
        --sec-card-shadow: 0 18px 45px rgba(0,0,0,.35);
        --sec-card-shadow-hover: 0 26px 70px rgba(0,0,0,.55);

        --sec-title: rgba(255,255,255,.92);
        --sec-body: rgba(255,255,255,.70);
        --sec-body-2: rgba(255,255,255,.70);
        --sec-link: rgba(143,208,255,.88);

        --sec-pill-bg: rgba(255,255,255,.06);
        --sec-pill-border: rgba(255,255,255,.10);
        --sec-pill-shadow: 0 18px 40px rgba(0,0,0,.35);
        --sec-pill-fg: rgba(255,255,255,.92);

        --sec-pill-blue-bg: linear-gradient(135deg, rgba(143,208,255,.10), rgba(0,0,0,.34));
        --sec-pill-blue-border: rgba(143,208,255,.18);
        --sec-pill-blue-fg: var(--blue-ice);

        --sec-media-bg: rgba(0,0,0,.28);
        --sec-media-border: rgba(255,255,255,.10);
        --sec-media-shadow: 0 30px 85px rgba(0,0,0,.60);
        --sec-media-glow: radial-gradient(640px 420px at 40% 30%, rgba(143,208,255,.14), rgba(0,0,0,0));
      }
    }

    html[data-theme="light"]{
      --page-bg:#fff; --text:#0b1220; --muted:rgba(11,18,32,.68);
      --shadow: 0 18px 50px rgba(0,0,0,.14);
      --shadow-soft: 0 10px 28px rgba(0,0,0,.12);

      --sec-panel-bg: linear-gradient(135deg, rgba(235,245,255,.88), rgba(255,255,255,.92));
      --sec-panel-border: rgba(11,18,32,.08);
      --sec-panel-shadow: 0 22px 55px rgba(0,0,0,.08);

      --sec-card-bg: rgba(255,255,255,.78);
      --sec-card-bg-hover: rgba(255,255,255,.92);
      --sec-card-border: rgba(29,78,216,.34);
      --sec-card-border-hover: rgba(29,78,216,.52);
      --sec-card-shadow: 0 14px 34px rgba(0,0,0,.06);
      --sec-card-shadow-hover: 0 22px 55px rgba(0,0,0,.10);

      --sec-title: rgba(11,18,32,.92);
      --sec-body: rgba(11,18,32,.62);
      --sec-body-2: rgba(11,18,32,.64);
      --sec-link: rgba(11,18,32,.72);

      --sec-pill-bg: rgba(255,255,255,.72);
      --sec-pill-border: rgba(11,18,32,.10);
      --sec-pill-shadow: 0 14px 30px rgba(0,0,0,.06);
      --sec-pill-fg: #0b1220;

      --sec-pill-blue-bg: linear-gradient(135deg, rgba(210,238,255,.92), rgba(255,255,255,.84));
      --sec-pill-blue-border: rgba(11,47,102,.14);
      --sec-pill-blue-fg: var(--blue-ink);

      --sec-media-bg: rgba(255,255,255,.55);
      --sec-media-border: rgba(11,18,32,.08);
      --sec-media-shadow: 0 26px 70px rgba(0,0,0,.10);
      --sec-media-glow: radial-gradient(640px 420px at 40% 30%, rgba(47,124,246,.14), rgba(255,255,255,0));
    }

    html[data-theme="dark"]{
      --page-bg:#05070d; --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.70);
      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --shadow-soft: 0 12px 34px rgba(0,0,0,.48);

      --sec-panel-bg: linear-gradient(135deg, rgba(10,14,22,.92), rgba(5,7,13,.96));
      --sec-panel-border: rgba(255,255,255,.10);
      --sec-panel-shadow: 0 26px 70px rgba(0,0,0,.55);

      --sec-card-bg: rgba(255,255,255,.04);
      --sec-card-bg-hover: rgba(255,255,255,.06);
      --sec-card-border: rgba(143,208,255,.22);
      --sec-card-border-hover: rgba(143,208,255,.34);
      --sec-card-shadow: 0 18px 45px rgba(0,0,0,.35);
      --sec-card-shadow-hover: 0 26px 70px rgba(0,0,0,.55);

      --sec-title: rgba(255,255,255,.92);
      --sec-body: rgba(255,255,255,.70);
      --sec-body-2: rgba(255,255,255,.70);
      --sec-link: rgba(143,208,255,.88);

      --sec-pill-bg: rgba(255,255,255,.06);
      --sec-pill-border: rgba(255,255,255,.10);
      --sec-pill-shadow: 0 18px 40px rgba(0,0,0,.35);
      --sec-pill-fg: rgba(255,255,255,.92);

      --sec-pill-blue-bg: linear-gradient(135deg, rgba(143,208,255,.10), rgba(0,0,0,.34));
      --sec-pill-blue-border: rgba(143,208,255,.18);
      --sec-pill-blue-fg: var(--blue-ice);

      --sec-media-bg: rgba(0,0,0,.28);
      --sec-media-border: rgba(255,255,255,.10);
      --sec-media-shadow: 0 30px 85px rgba(0,0,0,.60);
      --sec-media-glow: radial-gradient(640px 420px at 40% 30%, rgba(143,208,255,.14), rgba(0,0,0,0));
    }

    *{ box-sizing:border-box; }
    body{ margin:0; background:var(--page-bg); color:var(--text); }
    a{ color:inherit; }
    img{ max-width:100%; display:block; }

    .font{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    .container{
      width:min(var(--container), calc(100% - 36px));
      margin:0 auto;
    }

    /* =========================================================
       Inline SVG sprite icons (premium + consistent)
    ========================================================= */
    .icon{
      width: 16px;
      height: 16px;
      display:inline-block;
      vertical-align: -2px;
      flex: 0 0 auto;
    }

    /* =========================================================
       Premium CTA (global)
    ========================================================= */
    :root{
      --cta-bg: #111827;
      --cta-fg: #ffffff;
      --cta-bg-hover: #0b1220;
      --cta-ring: rgba(17,24,39,.25);
      --cta-border: rgba(255,255,255,.12);
      --cta-shadow: 0 12px 30px rgba(0,0,0,.18);
      --cta-shadow-hover: 0 18px 45px rgba(0,0,0,.22);
    }

    .cta-mini{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 11px 14px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 12.75px;
      text-decoration:none;
      color: var(--cta-fg);
      background: var(--cta-bg);
      border: 1px solid var(--cta-border);
      box-shadow: var(--cta-shadow);
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), filter var(--dur) var(--ease);
      white-space: nowrap;
    }

    .cta-mini:hover{
      transform: translateY(-1px);
      background: var(--cta-bg-hover);
      box-shadow: var(--cta-shadow-hover);
      filter: saturate(1.02);
    }

    .cta-mini .icon{
      transition: transform var(--dur) var(--ease);
    }
    .cta-mini:hover .icon{
      transform: translateX(2px);
    }

    .cta-mini:focus{ outline: none; }
    .cta-mini:focus-visible{ box-shadow: 0 0 0 4px var(--cta-ring); }

    /* =========================================================
       HEADER (identical)
    ========================================================= */
    .header{
      position:fixed;
      top:18px;
      left:50%;
      transform:translateX(-50%);
      width:min(var(--container), calc(100% - 28px));
      z-index:9999;
    }

    .header__bar{
      position:relative;
      display:flex;
      align-items:center;
      gap:14px;
      padding:12px 18px;
      border-radius: var(--radius-xl);
      background: transparent;
      border: 1px solid transparent;
      box-shadow:none;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      color: rgba(255,255,255,.92);
      transition:
        background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        color var(--dur) var(--ease),
        transform var(--dur) var(--ease);
      overflow:hidden;
    }

    .header__bar::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:0;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(8deg);
      transition: opacity var(--dur) var(--ease);
    }

    .header.is-scrolled .header__bar{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: rgba(11,47,102,.14);
      background: linear-gradient(135deg, rgba(210,238,255,.86), rgba(120,180,255,.70));
      color: var(--blue-ink);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .header.is-scrolled .header__bar::before{ opacity:.22; }

    @media (prefers-color-scheme: dark){
      .header.is-scrolled .header__bar{
        border-color: rgba(143,208,255,.16);
        background: linear-gradient(135deg, rgba(0,0,0,.80), rgba(14,18,30,.86));
        color: var(--blue-ice);
      }
    }
    html[data-theme="dark"] .header.is-scrolled .header__bar{
      border-color: rgba(143,208,255,.16);
      background: linear-gradient(135deg, rgba(0,0,0,.80), rgba(14,18,30,.86));
      color: var(--blue-ice);
    }
    html[data-theme="light"] .header.is-scrolled .header__bar{
      border-color: rgba(11,47,102,.14);
      background: linear-gradient(135deg, rgba(210,238,255,.86), rgba(120,180,255,.70));
      color: var(--blue-ink);
    }

    .logo{
      display:flex; align-items:center; gap:10px;
      min-width: 190px;
      text-decoration:none;
      font-weight:850;
      letter-spacing:.2px;
      white-space:nowrap;
    }
    .logo__mark{ width:34px; height:34px; display:grid; place-items:center; }
    .logo__text{ font-size:16.5px; opacity:.95; }

    .nav{
      display:flex; align-items:center; gap:10px;
      flex:1;
      justify-content:center;
    }
    .nav a{
      text-decoration:none;
      font-size:16.5px;
      font-weight:680;
      opacity:.92;
      padding:10px 10px;
      border-radius:999px;
      transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    }
    .nav a:hover{
      opacity:1;
      background: rgba(255,255,255,.10);
      transform: translateY(-1px);
    }
    .header.is-scrolled .nav a:hover{ background: rgba(11,47,102,.08); }
    @media (prefers-color-scheme: dark){
      .header.is-scrolled .nav a:hover{ background: rgba(143,208,255,.12); }
    }
    html[data-theme="dark"] .header.is-scrolled .nav a:hover{ background: rgba(143,208,255,.12); }

    .actions{
      margin-left:auto;
      display:flex; align-items:center; gap:10px;
      justify-content:flex-end;
    }

    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border-radius:999px;
      font-weight:760;
      font-size:13px;
      text-decoration:none;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
      white-space:nowrap;
    }
    .pill:hover{ transform:translateY(-1px); background: rgba(255,255,255,.14); }
    .pill--solid{
      background: rgba(255,255,255,.92);
      color:#0b1a33;
      border-color: rgba(255,255,255,0);
    }
    .pill--solid:hover{ background:#fff; }

    .iconbtn{
      width:42px; height:42px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
      display:grid; place-items:center;
      cursor:pointer;
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    .iconbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }
	:root{ --header-util-icon: #0b1220; }
	@media (prefers-color-scheme: dark){
	:root{ --header-util-icon: #ffffff; }
	}
	html[data-theme="dark"]{ --header-util-icon: #ffffff; }
	html[data-theme="light"]{ --header-util-icon: #0b1220; }
	#themeBtn, #searchOpen{ color: var(--header-util-icon); }

    .header.is-scrolled .pill{
      border-color: rgba(11,47,102,.14);
      background: rgba(255,255,255,.40);
    }
    .header.is-scrolled .pill--solid{
      background: rgba(11,47,102,.10);
      color: inherit;
      border-color: rgba(11,47,102,.14);
    }
    .header.is-scrolled .iconbtn{
      border-color: rgba(11,47,102,.14);
      background: rgba(255,255,255,.38);
    }
    @media (prefers-color-scheme: dark){
      .header.is-scrolled .pill{
        border-color: rgba(143,208,255,.18);
        background: rgba(0,0,0,.22);
      }
      .header.is-scrolled .pill--solid{
        background: rgba(143,208,255,.12);
        color: inherit;
        border-color: rgba(143,208,255,.18);
      }
      .header.is-scrolled .iconbtn{
        border-color: rgba(143,208,255,.18);
        background: rgba(0,0,0,.22);
      }
    }
    html[data-theme="dark"] .header.is-scrolled .pill{
      border-color: rgba(143,208,255,.18);
      background: rgba(0,0,0,.22);
    }
    html[data-theme="dark"] .header.is-scrolled .pill--solid{
      background: rgba(143,208,255,.12);
      color: inherit;
      border-color: rgba(143,208,255,.18);
    }
    html[data-theme="dark"] .header.is-scrolled .iconbtn{
      border-color: rgba(143,208,255,.18);
      background: rgba(0,0,0,.22);
    }

    .actions__group{
  display:flex; align-items:center; gap:10px;
  white-space:nowrap;
  overflow:hidden;
  max-width: 900px;
  transition:
    max-width 420ms var(--ease),
    opacity 260ms var(--ease),
    transform 260ms var(--ease);
}

    .searchwrap{
      display:flex; align-items:center; gap:10px;
      transform-origin: 100% 50%;
      opacity:0;
      transform: translateY(-2px) scaleX(.92);
      pointer-events:none;
      max-width:0;
      overflow:hidden;
      transition:
        max-width 420ms var(--ease),
        opacity 260ms var(--ease),
        transform 420ms var(--ease);
    }

    .header.search-open .actions__group{
	  max-width: 0;
      opacity:0;
      pointer-events:none;
      transform: translateY(-6px);
    }
    .header.search-open .searchwrap{
      opacity:1;
      transform: translateY(0) scaleX(1);
      pointer-events:auto;
      max-width: 440px;
    }

    .search{
      width: min(560px, 46vw);
      height:44px;
      border-radius:14px;
      padding:0 14px;
      outline:none;
      font-size:14px;
      border:1px solid rgba(255,255,255,.28);
      background: rgba(0,0,0,.34);
      color: rgba(255,255,255,.92);
    }
    .search::placeholder{ color: rgba(255,255,255,.70); }

    .searchclose{
      width:30px; height:30px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
      display:grid; place-items:center;
      cursor:pointer;
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
      flex: 0 0 auto;
    }
    .searchclose:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }

    .header.is-scrolled .search{
      background: rgba(255,255,255,.58);
      border-color: rgba(11,47,102,.16);
      color:#081a38;
    }
    .header.is-scrolled .search::placeholder{ color: rgba(8,26,56,.55); }
    @media (prefers-color-scheme: dark){
      .header.is-scrolled .search{
        background: rgba(0,0,0,.32);
        border-color: rgba(143,208,255,.22);
        color: rgba(255,255,255,.92);
      }
      .header.is-scrolled .search::placeholder{ color: rgba(255,255,255,.72); }
    }
    html[data-theme="dark"] .header.is-scrolled .search{
      background: rgba(0,0,0,.32);
      border-color: rgba(143,208,255,.22);
      color: rgba(255,255,255,.92);
    }
    html[data-theme="dark"] .header.is-scrolled .search::placeholder{ color: rgba(255,255,255,.72); }

    /* =========================================================
       CONTACT HERO (half screen height)
    ========================================================= */
    .hero{
      position:relative;
      min-height: 56vh; /* half-ish */
      display:grid;
      place-items:center;
      padding: 122px 18px 40px;
      overflow:hidden;
      background:#05070d;
    }
    .hero__video{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      filter: saturate(1.03) contrast(1.02);
      transform: scale(1.02);
    }
    .hero__overlay{
      position:absolute; inset:0;
      background:
        radial-gradient(900px 520px at 50% 36%, rgba(47,124,246,.18), rgba(0,0,0,.36)),
        linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.62));
    }
    .hero__overlay::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.10;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(-8deg);
    }

    .hero__content{
      position:relative;
      width:min(980px, 100%);
      text-align:center;
      color: rgba(255,255,255,.94);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:12px;
      padding: 0 8px;
      animation: fadeUp 720ms var(--ease) 120ms both;
    }

    .badge{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-size:12.5px;
      font-weight:760;
      letter-spacing:.2px;
    }
    .badge i{
      width:7px; height:7px; border-radius:999px;
      background: linear-gradient(135deg, var(--blue-ice), var(--blue-core));
      display:inline-block;
      box-shadow: 0 0 0 6px rgba(47,124,246,.12);
    }

    .hero h1{
      margin:0;
      font-size: clamp(34px, 4vw, 54px);
      line-height:1.05;
      letter-spacing:-0.03em;
      font-weight: 920;
      text-shadow: 0 12px 40px rgba(0,0,0,.32);
    }

    .hero p{
      margin:0;
      max-width: 72ch;
      font-size: 14.5px;
      line-height:1.65;
      color: rgba(255,255,255,.82);
      text-shadow: 0 10px 34px rgba(0,0,0,.28);
    }

    .ctas{
      margin-top:4px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:center;
    }

    .cta{
      display:inline-flex; align-items:center; gap:10px;
      padding:12px 18px;
      border-radius:999px;
      font-weight:820;
      font-size:13.5px;
      text-decoration:none;
      white-space:nowrap;
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    .cta--primary{
      background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
      color:#0b1a33;
      box-shadow: 0 18px 44px rgba(0,0,0,.26);
    }
    .cta--primary:hover{ transform:translateY(-1px); box-shadow: 0 24px 58px rgba(0,0,0,.32); }
    .cta--secondary{
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.92);
      border:1px solid rgba(255,255,255,.22);
      box-shadow: 0 12px 32px rgba(0,0,0,.18);
    }
    .cta--secondary:hover{ transform:translateY(-1px); background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.28); }

    @keyframes fadeUp{
      from{ opacity:0; transform: translateY(12px); }
      to{ opacity:1; transform: translateY(0); }
    }

    /* =========================================================
       Reveal animation
    ========================================================= */
    .reveal{
      opacity:0;
      transform: translateY(10px);
      transition: opacity 720ms var(--ease), transform 720ms var(--ease);
      will-change: opacity, transform;
    }
    .reveal.in{ opacity:1; transform: translateY(0); }
    .reveal[data-delay="1"]{ transition-delay: 90ms; }
    .reveal[data-delay="2"]{ transition-delay: 160ms; }
    .reveal[data-delay="3"]{ transition-delay: 230ms; }

    /* =========================================================
       CONTACT SECTION (form + copy)
       id="solutions" to keep header nav identical
    ========================================================= */
    .contact{
      padding: 70px 0 88px;
      background: var(--page-bg);
    }

    .contact__panel{
      position:relative;
      border-radius: var(--radius-xl);
      overflow:hidden;
      border: 1px solid var(--sec-panel-border);
      background: var(--sec-panel-bg);
      box-shadow: var(--sec-panel-shadow);
      padding: 34px;
    }

    .contact__panel::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.08;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }

    .contact__grid{
      position:relative;
      display:grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 26px;
      align-items:start;
    }

    .contact__kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--sec-body);
    }
    .contact__kicker .dot{
      width: 8px; height:8px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--blue-ice), var(--blue-core));
      box-shadow: 0 0 0 7px rgba(47,124,246,.14);
      flex: 0 0 auto;
    }

    .contact__title{
      margin: 12px 0 8px;
      font-size: clamp(26px, 2.9vw, 44px);
      line-height: 1.06;
      letter-spacing: -0.02em;
      font-weight: 950;
      color: var(--sec-title);
    }

    .contact__lead{
      margin:0 0 14px;
      color: var(--sec-body);
      line-height: 1.7;
      font-size: 14.5px;
      max-width: 66ch;
    }

    .taglineRow{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      margin-top: 10px;
    }
    .tagpill{
      display:inline-flex; align-items:center;
      padding: 10px 12px;
      border-radius: 999px;
      background: var(--sec-pill-bg);
      border: 1px solid var(--sec-pill-border);
      box-shadow: var(--sec-pill-shadow);
      color: var(--sec-pill-fg);
      font-weight: 900;
      font-size: 12.75px;
      line-height: 1;
    }
    .tagpill--blue{
      background: var(--sec-pill-blue-bg);
      border-color: var(--sec-pill-blue-border);
      color: var(--sec-pill-blue-fg);
    }

    .contact__info{
      margin-top: 14px;
      display:grid;
      gap: 12px;
    }

    .infocard{
      border-radius: var(--radius-lg);
      background: var(--sec-card-bg);
      border: 1px solid var(--sec-card-border);
      box-shadow: var(--sec-card-shadow);
      padding: 16px;
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
      position:relative;
      overflow:hidden;
    }
    .infocard::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.06;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(-8deg);
    }
    .infocard:hover{
      transform: translateY(-2px);
      background: var(--sec-card-bg-hover);
      border-color: var(--sec-card-border-hover);
      box-shadow: var(--sec-card-shadow-hover);
    }
    .infocard strong{
      position:relative;
      display:block;
      font-weight: 950;
      color: var(--sec-title);
      margin-bottom: 6px;
      font-size: 13.75px;
    }
    .infocard span{
      position:relative;
      color: var(--sec-body);
      font-weight: 780;
      font-size: 13px;
      line-height: 1.5;
      display:block;
    }

    .contact__ctaRow{
      margin-top: 14px;
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      align-items:center;
    }

    .contact__primaryBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 12px 18px;
      border-radius: 999px;
      font-weight: 950;
      font-size: 13.5px;
      text-decoration:none;
      white-space:nowrap;
      background: linear-gradient(135deg, rgba(11,47,102,.94), rgba(10,42,92,.94));
      color: rgba(255,255,255,.92);
      box-shadow: 0 16px 44px rgba(11,47,102,.22);
      border: 1px solid rgba(255,255,255,.10);
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
    }
    .contact__primaryBtn:hover{
      transform: translateY(-1px);
      box-shadow: 0 22px 58px rgba(11,47,102,.30);
      filter: brightness(1.02);
    }

    @media (prefers-color-scheme: dark){
      .contact__primaryBtn{
        background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
        color: var(--blue-ice);
        border-color: rgba(143,208,255,.18);
        box-shadow: 0 22px 65px rgba(0,0,0,.55);
      }
      .contact__primaryBtn:hover{
        box-shadow: 0 30px 85px rgba(0,0,0,.65);
        filter:none;
      }
    }
    html[data-theme="dark"] .contact__primaryBtn{
      background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
      color: var(--blue-ice);
      border-color: rgba(143,208,255,.18);
      box-shadow: 0 22px 65px rgba(0,0,0,.55);
    }

    /* Form card */
    .formcard{
      border-radius: var(--radius-xl);
      background: var(--sec-card-bg);
      border: 1px solid var(--sec-card-border);
      box-shadow: var(--sec-card-shadow);
      padding: 18px;
      position:relative;
      overflow:hidden;
    }
    .formcard::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.06;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }

    .formcard h3{
      position:relative;
      margin: 0 0 14px;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--sec-body);
    }

    .form{
      position:relative;
      display:flex;
      flex-direction:column;
      gap: 12px;
    }

    .frow{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .flabel{
      display:flex;
      align-items:center;
      gap: 6px;
      font-weight: 900;
      font-size: 12.75px;
      color: var(--sec-title);
      margin: 0 0 6px;
    }
    .req{ color: rgba(220,38,38,.95); font-weight: 950; }

    .finput, .fselect, .ftextarea{
      width:100%;
      border-radius: 14px;
      padding: 0 14px;
      border: 1px solid var(--sec-panel-border);
      background: rgba(255,255,255,.72);
      color: var(--sec-title);
      outline:none;
      font-size: 13.5px;
      font-weight: 700;
      transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    .finput, .fselect{ height: 44px; }
    .ftextarea{
      min-height: 120px;
      padding: 12px 14px;
      resize: vertical;
      line-height: 1.55;
      font-weight: 650;
    }

    @media (prefers-color-scheme: dark){
      .finput, .fselect, .ftextarea{
        background: rgba(0,0,0,.22);
        border-color: rgba(255,255,255,.12);
        color: rgba(255,255,255,.92);
      }
    }
    html[data-theme="dark"] .finput,
    html[data-theme="dark"] .fselect,
    html[data-theme="dark"] .ftextarea{
      background: rgba(0,0,0,.22);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
    }

    .finput::placeholder, .ftextarea::placeholder{ color: var(--sec-body); opacity: .85; }

    .finput:focus,
    .fselect:focus,
    .ftextarea:focus{
      border-color: var(--sec-card-border-hover);
      box-shadow: 0 0 0 4px rgba(47,124,246,.18);
      background: rgba(255,255,255,.84);
    }

    @media (prefers-color-scheme: dark){
      .finput:focus,
      .fselect:focus,
      .ftextarea:focus{
        box-shadow: 0 0 0 4px rgba(143,208,255,.16);
        background: rgba(0,0,0,.28);
      }
    }
    html[data-theme="dark"] .finput:focus,
    html[data-theme="dark"] .fselect:focus,
    html[data-theme="dark"] .ftextarea:focus{
      box-shadow: 0 0 0 4px rgba(143,208,255,.16);
      background: rgba(0,0,0,.28);
    }

    /* Options list (checkboxes) */
    .options{
      border-radius: 18px;
      background: transparent;
      border: 1px solid var(--sec-panel-border);
      padding: 12px;
    }

    .options__title{
      display:flex;
      align-items:center;
      gap: 6px;
      font-weight: 950;
      font-size: 12.75px;
      color: var(--sec-title);
      margin: 0 0 10px;
    }

    .optgrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 10px;
    }

    .opt{
      display:flex;
      align-items:flex-start;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 14px;
      border: 1px solid transparent;
      transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
      user-select:none;
    }

    .opt:hover{
      background: var(--sec-pill-bg);
      border-color: var(--sec-pill-border);
      transform: translateY(-1px);
    }

    .opt input{
      margin-top: 3px;
      width: 16px;
      height: 16px;
      accent-color: var(--blue-core);
      flex: 0 0 auto;
    }

    .opt span{
      font-weight: 800;
      font-size: 13px;
      line-height: 1.35;
      color: var(--sec-link);
    }

    .form__submit{
      width:100%;
      height: 46px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(135deg, rgba(11,47,102,.94), rgba(10,42,92,.94));
      color: rgba(255,255,255,.92);
      font-weight: 950;
      letter-spacing: .01em;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      box-shadow: 0 16px 44px rgba(11,47,102,.22);
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
    }

    .form__submit:hover{
      transform: translateY(-1px);
      box-shadow: 0 22px 58px rgba(11,47,102,.30);
      filter: brightness(1.02);
    }

    @media (prefers-color-scheme: dark){
      .form__submit{
        background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
        color: var(--blue-ice);
        border-color: rgba(143,208,255,.18);
        box-shadow: 0 22px 65px rgba(0,0,0,.55);
      }
      .form__submit:hover{
        box-shadow: 0 30px 85px rgba(0,0,0,.65);
        filter: none;
      }
    }
    html[data-theme="dark"] .form__submit{
      background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
      color: var(--blue-ice);
      border-color: rgba(143,208,255,.18);
      box-shadow: 0 22px 65px rgba(0,0,0,.55);
    }

    .form__status{
      min-height: 18px;
      font-weight: 850;
      font-size: 12.75px;
      color: var(--sec-body);
      margin-top: 2px;
    }

    /* =========================================================
       TAGLINES / WHAT NEXT (small section) id="industries"
    ========================================================= */
    .next{
      padding: 10px 0 86px;
      background: var(--page-bg);
    }

    .next__panel{
      position:relative;
      border-radius: var(--radius-xl);
      overflow:hidden;
      border: 1px solid var(--sec-panel-border);
      background: var(--sec-panel-bg);
      box-shadow: var(--sec-panel-shadow);
      padding: 28px;
    }

    .next__panel::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.08;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(-8deg);
    }

    .next__grid{
      position:relative;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .ncard{
      border-radius: var(--radius-lg);
      background: var(--sec-card-bg);
      border: 1px solid var(--sec-card-border);
      box-shadow: var(--sec-card-shadow);
      padding: 16px 16px;
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .ncard:hover{
      transform: translateY(-2px);
      background: var(--sec-card-bg-hover);
      border-color: var(--sec-card-border-hover);
      box-shadow: var(--sec-card-shadow-hover);
    }

    .ncard strong{
      display:block;
      font-weight: 950;
      color: var(--sec-title);
      margin-bottom: 6px;
      font-size: 13.75px;
    }

    .ncard span{
      display:block;
      color: var(--sec-body);
      font-weight: 760;
      font-size: 13px;
      line-height: 1.55;
    }

    /* =========================================================
       QUICK CONTACT (small) id="about"
    ========================================================= */
    .quick{
      padding: 0 0 84px;
      background: var(--page-bg);
    }

    .quick__panel{
      position:relative;
      border-radius: var(--radius-xl);
      overflow:hidden;
      border: 1px solid var(--sec-panel-border);
      background: var(--sec-panel-bg);
      box-shadow: var(--sec-panel-shadow);
      padding: 28px;
    }

    .quick__panel::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.08;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }

    .quick__grid{
      position:relative;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .qitem{
      border-radius: var(--radius-lg);
      background: var(--sec-card-bg);
      border: 1px solid var(--sec-card-border);
      box-shadow: var(--sec-card-shadow);
      padding: 16px;
    }

    .qitem strong{
      display:block;
      font-weight: 950;
      color: var(--sec-title);
      margin-bottom: 6px;
      font-size: 13.75px;
    }

    .qitem span{
      display:block;
      color: var(--sec-body);
      font-weight: 760;
      font-size: 13px;
      line-height: 1.55;
    }

    /* =========================================================
       FOOTER (identical to your cleaned version)
    ========================================================= */
    .sitefooter{
      padding: 78px 0 18px;
      background: var(--page-bg);
    }

    .sitefooter__panel{
      position:relative;
      border-radius: var(--radius-xl);
      overflow:hidden;
      border: 1px solid var(--sec-panel-border);
      background: var(--sec-panel-bg);
      box-shadow: var(--sec-panel-shadow);
      padding: 34px;
    }

    .sitefooter__panel::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.08;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }

    .sitefooter__grid{
      position:relative;
      display:grid;
      grid-template-columns: 1.05fr .9fr 1.25fr;
      gap: 24px;
      align-items:start;
    }

    .sitefooter__brand{
      display:flex;
      flex-direction:column;
      gap: 14px;
      padding: 10px 6px;
    }

    .sitefooter__logo{
      display:flex;
      align-items:center;
      gap: 14px;
      text-decoration:none;
      color: inherit;
    }

    .sitefooter__mark{
      width: 72px;
      height: 72px;
      border-radius: 22px;
      display:grid;
      place-items:center;
      background: var(--sec-pill-blue-bg);
      border: 1px solid var(--sec-pill-blue-border);
      box-shadow: var(--sec-pill-shadow);
      flex: 0 0 auto;
    }

    .sitefooter__mark svg{ width: 46px; height: 46px; }

    .sitefooter__brandtext{
      display:flex;
      flex-direction:column;
      gap: 4px;
      min-width:0;
    }

    .sitefooter__brandtext strong{
      font-weight: 950;
      letter-spacing: -0.01em;
      color: var(--sec-title);
      font-size: 16px;
      line-height: 1.2;
    }

    .sitefooter__brandtext span{
      color: var(--sec-body);
      font-weight: 720;
      font-size: 13.5px;
      line-height: 1.35;
      max-width: 36ch;
    }

    .sitefooter__cta{
      display:flex;
      flex-direction:column;
      gap: 10px;
      align-items:flex-start;
      margin-top: 6px;
    }

    .sitefooter .pill{
      border-color: var(--sec-pill-border);
      background: var(--sec-pill-bg);
      color: var(--sec-pill-fg);
      box-shadow: var(--sec-pill-shadow);
    }

    .sitefooter .pill:hover{
      background: var(--sec-card-bg-hover);
      border-color: var(--sec-card-border-hover);
      transform: translateY(-1px);
    }

    .sitefooter .pill--solid{
      background: linear-gradient(135deg, rgba(11,47,102,.94), rgba(10,42,92,.94));
      color: rgba(255,255,255,.92);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 16px 44px rgba(11,47,102,.22);
    }

    @media (prefers-color-scheme: dark){
      .sitefooter .pill--solid{
        background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
        color: var(--blue-ice);
        border-color: rgba(143,208,255,.18);
        box-shadow: 0 22px 65px rgba(0,0,0,.55);
      }
    }
    html[data-theme="dark"] .sitefooter .pill--solid{
      background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
      color: var(--blue-ice);
      border-color: rgba(143,208,255,.18);
      box-shadow: 0 22px 65px rgba(0,0,0,.55);
    }

    .sitefooter__links{
      padding: 10px 6px;
      display:flex;
      flex-direction:column;
      gap: 14px;
    }

    .sitefooter__links h4{
      margin:0 0 10px;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--sec-body);
    }

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

    .sitefooter__group strong{
      display:block;
      font-weight: 950;
      color: var(--sec-title);
      font-size: 13.75px;
      margin-bottom: 8px;
    }

    .sitefooter__group a{
      display:block;
      padding: 8px 10px;
      border-radius: 12px;
      text-decoration:none;
      color: var(--sec-link);
      font-weight: 800;
      font-size: 13px;
      transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
      border: 1px solid transparent;
      width: fit-content;
      max-width: 100%;
    }

    .sitefooter__group a:hover{
      background: var(--sec-pill-bg);
      border-color: var(--sec-pill-border);
      transform: translateY(-1px);
    }

    .sitefooter__formcard{
      border-radius: var(--radius-xl);
      background: var(--sec-card-bg);
      border: 1px solid var(--sec-card-border);
      box-shadow: var(--sec-card-shadow);
      padding: 18px;
      position:relative;
      overflow:hidden;
    }

    .sitefooter__formcard::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.06;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(-8deg);
    }

    .sitefooter__formhead{
      position:relative;
      margin-bottom: 12px;
    }

    .sitefooter__formhead h4{
      margin:0;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--sec-body);
    }

    .sitefooter__form{
      position:relative;
      display:flex;
      flex-direction:column;
      gap: 12px;
    }

    .sitefooter .frow{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .sitefooter .flabel{
      display:block;
      font-weight: 900;
      font-size: 12.75px;
      color: var(--sec-title);
      margin: 0 0 6px;
    }

    .sitefooter .flabel .req{ color: rgba(220,38,38,.95); }

    .sitefooter .finput, .sitefooter .fselect{
      width:100%;
      height: 44px;
      border-radius: 14px;
      padding: 0 14px;
      border: 1px solid var(--sec-panel-border);
      background: rgba(255,255,255,.72);
      color: var(--sec-title);
      outline:none;
      font-size: 13.5px;
      font-weight: 700;
      transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    }

    @media (prefers-color-scheme: dark){
      .sitefooter .finput, .sitefooter .fselect{
        background: rgba(0,0,0,.22);
        border-color: rgba(255,255,255,.12);
        color: rgba(255,255,255,.92);
      }
    }
    html[data-theme="dark"] .sitefooter .finput,
    html[data-theme="dark"] .sitefooter .fselect{
      background: rgba(0,0,0,.22);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
    }

    .sitefooter .finput::placeholder{ color: var(--sec-body); opacity: .85; }

    .sitefooter .finput:focus,
    .sitefooter .fselect:focus{
      border-color: var(--sec-card-border-hover);
      box-shadow: 0 0 0 4px rgba(47,124,246,.18);
      background: rgba(255,255,255,.84);
    }

    @media (prefers-color-scheme: dark){
      .sitefooter .finput:focus,
      .sitefooter .fselect:focus{
        box-shadow: 0 0 0 4px rgba(143,208,255,.16);
        background: rgba(0,0,0,.28);
      }
    }
    html[data-theme="dark"] .sitefooter .finput:focus,
    html[data-theme="dark"] .sitefooter .fselect:focus{
      box-shadow: 0 0 0 4px rgba(143,208,255,.16);
      background: rgba(0,0,0,.28);
    }

    .sitefooter__submit{
      width:100%;
      height: 46px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(135deg, rgba(11,47,102,.94), rgba(10,42,92,.94));
      color: rgba(255,255,255,.92);
      font-weight: 950;
      letter-spacing: .01em;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      box-shadow: 0 16px 44px rgba(11,47,102,.22);
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
    }

    .sitefooter__submit:hover{
      transform: translateY(-1px);
      box-shadow: 0 22px 58px rgba(11,47,102,.30);
      filter: brightness(1.02);
    }

    @media (prefers-color-scheme: dark){
      .sitefooter__submit{
        background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
        color: var(--blue-ice);
        border-color: rgba(143,208,255,.18);
        box-shadow: 0 22px 65px rgba(0,0,0,.55);
      }
      .sitefooter__submit:hover{
        box-shadow: 0 30px 85px rgba(0,0,0,.65);
        filter: none;
      }
    }
    html[data-theme="dark"] .sitefooter__submit{
      background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
      color: var(--blue-ice);
      border-color: rgba(143,208,255,.18);
      box-shadow: 0 22px 65px rgba(0,0,0,.55);
    }

    .sitefooter__status{
      min-height: 18px;
      font-weight: 850;
      font-size: 12.75px;
      color: var(--sec-body);
      margin-top: 2px;
    }

    .sitefooter__bottom{
      margin-top: 14px;
      padding: 14px 10px 0;
      display:flex;
      flex-wrap:wrap;
      gap: 10px 16px;
      align-items:center;
      justify-content:center;
      color: var(--sec-body);
      font-weight: 750;
      font-size: 13px;
    }

    .sitefooter__bottom .sep{ opacity: .45; }

    .sitefooter__bottom address{
      font-style: normal;
      margin:0;
    }

    /* =========================================================
       Responsive
    ========================================================= */
    @media (max-width: 980px){
      .contact__grid{ grid-template-columns: 1fr; }
      .contact__panel{ padding: 22px; }
      .frow{ grid-template-columns: 1fr; }
      .optgrid{ grid-template-columns: 1fr; }
      .next__grid{ grid-template-columns: 1fr; }
      .quick__grid{ grid-template-columns: 1fr; }
      .sitefooter{ padding: 60px 0 16px; }
  .sitefooter__panel{ padding: 22px; }
  .sitefooter__grid{ grid-template-columns: 1fr; }
  .sitefooter__cta{ flex-direction: row; flex-wrap:wrap; }
      
    }

    @media (max-width: 920px){
      .logo__text{ display:none; }
      .actions .pill{ display:none; }
      .nav{ gap:6px; justify-content:flex-start; }
      .search{ width: min(520px, 58vw); }
      .sitefooter{ padding: 60px 0 16px; }
      .sitefooter__panel{ padding: 22px; }
      .sitefooter__grid{ grid-template-columns: 1fr; }
      .sitefooter__cta{ flex-direction: row; flex-wrap:wrap; }
    }

    @media (max-width: 680px){
      .nav{ display:none; }
      .search{ width: 64vw; }
      .hero{ min-height: 52vh; }
	  
	  /* Search open: give full room + keep close visible */
.header.search-open .logo{ display:none; }
.header.search-open .actions{
  margin-left:0;
  width:100%;
  justify-content:center;
}
.header.search-open .searchwrap{ max-width: 100%; }
.header.search-open .search{
  width:100%;
  flex: 1 1 auto;
  min-width:0;
}
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; animation:none !important; }
    }
	
	/* =========================================================
   MOBILE/TABLET NAV — APPEND (FIXES scroll + theme)
========================================================= */

:root{
  --navpanel-bg: var(--sec-panel-bg);
  --navpanel-border: var(--sec-panel-border);
  --navpanel-shadow: var(--shadow);
  --navpanel-text: var(--sec-title);
  --navpanel-hover: var(--sec-pill-bg);
  --navoverlay: rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){ :root{ --navoverlay: rgba(0,0,0,.55); } }
html[data-theme="dark"]{ --navoverlay: rgba(0,0,0,.55); }
html[data-theme="light"]{ --navoverlay: rgba(0,0,0,.35); }

.navbtn{ display:none; }

.nav__overlay{
  position: fixed;
  inset: 0;
  background: var(--navoverlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998; /* below header (9999) */
}

body.nav-locked{ overflow:hidden; }

@media (max-width: 980px){
  .navbtn{ display:grid; }

  /* ✅ CRITICAL FIX:
     your scrolled state adds transform on .header__bar, which breaks fixed menu by clipping it.
     Remove transform on mobile and keep the "lift" by moving the header top instead. */
  .header{ transition: top var(--dur) var(--ease); }
  .header.is-scrolled{ top: 16px; } /* was 18px + bar translateY(-2px) */

  .header.is-scrolled .header__bar{
    transform: none !important;     /* prevents fixed menu becoming "fixed inside" the bar */
  }

  /* When menu is open, never clip it */
  .header.nav-open .header__bar{
    overflow: visible;
  }

  /* Mobile nav panel (fixed, theme-aware) */
  #primaryNav{
    display:none;
    position: fixed;
    left: 14px;
    right: 14px;
    top: var(--nav-top, 86px);
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 18px;

    background: var(--navpanel-bg);
    border: 1px solid var(--navpanel-border);
    box-shadow: var(--navpanel-shadow);

    color: var(--navpanel-text);
    z-index: 10000;
  }

  .header.nav-open #primaryNav{ display:flex; }

  #primaryNav a{
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
    padding: 12px 12px;
    border-radius: 14px;
    opacity: 1;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  #primaryNav a:hover{
    background: var(--navpanel-hover);
    transform: translateY(-1px);
  }
}




/* === Theme-aware compact multi-select dropdown (DROP-IN) === */
.multiselect{ position: relative; }

/* Default/light: align with your inputs/selects */
.multiselect{
  --ms-text: var(--sec-title);
  --ms-border: var(--sec-panel-border);
  --ms-surface-2: rgba(255,255,255,.92);     /* white panel in light */
  --ms-hover: rgba(11,18,32,.06);
}

/* Force LIGHT when user explicitly sets light (even if system is dark) */
html[data-theme="light"] .multiselect{
  --ms-text: var(--sec-title);
  --ms-border: var(--sec-panel-border);
  --ms-surface-2: rgba(255,255,255,.92);
  --ms-hover: rgba(11,18,32,.06);
}

/* Dark theme (explicit toggle) */
html[data-theme="dark"] .multiselect{
  --ms-text: rgba(255,255,255,.92);
  --ms-border: rgba(255,255,255,.14);
  --ms-surface-2: rgba(0,0,0,.72);          /* ✅ more solid in dark */
  --ms-hover: rgba(255,255,255,.08);
}

/* System dark ONLY when not explicitly forced to light */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .multiselect{
    --ms-text: rgba(255,255,255,.92);
    --ms-border: rgba(255,255,255,.14);
    --ms-surface-2: rgba(0,0,0,.92);        /* ✅ more solid in dark */
    --ms-hover: rgba(255,255,255,.08);
  }
}

/* Button: keep chevron right next to "Please Select" */
.multiselect__btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--ms-text);
}

.multiselect__value{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiselect__chev{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: .8;
  transition: transform .18s ease, opacity .18s ease;
}

.multiselect[data-open="true"] .multiselect__chev{
  transform: rotate(180deg);
  opacity: 1;
}

/* Required helper input stays invisible */
.multiselect__required{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Panel */
.multiselect__panel{
  position: absolute;
  left: 0; right: 0;
  z-index: 50;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--ms-border);
  background: var(--ms-surface-2);
  color: var(--ms-text);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  max-height: 240px;
  overflow: auto;
  display: none;
}

/* Slightly stronger shadow in dark for readability */
html[data-theme="dark"] .multiselect__panel{
  box-shadow: 0 22px 65px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .multiselect__panel{
    box-shadow: 0 22px 65px rgba(0,0,0,.55);
  }
}

/* Open upwards for footer */
.multiselect--up .multiselect__panel{
  bottom: calc(100% + 8px);
}

.multiselect[data-open="true"] .multiselect__panel{ display: block; }

/* Compact options */
.multiselect__panel .opt{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
  cursor: pointer;
}

.multiselect__panel .opt:hover{
  background: var(--ms-hover);
}

.multiselect__panel input[type="checkbox"]{
  accent-color: var(--blue-core, #2f7cf6);
}

/* Mobile */
@media (max-width: 820px){
  .multiselect__panel{ max-height: 200px; }

  /* Optional: on mobile open downward to avoid footer clipping */
  .multiselect--up .multiselect__panel{
    bottom: auto;
    top: calc(100% + 8px);
  }
}




  
	
	
/* =========================================================
   Desktop-only padding tighten (Quick + Footer)
   Keeps mobile/tablet unchanged (overrides apply only >980px)
========================================================= */
@media (min-width: 981px){
  /* Pull the Quick Contact section up (desktop only) */
  .quick{ padding: 0 0 28px; }
  .quick__panel{ padding: 24px; margin-top: -60px; }

  /* Pull the footer up (desktop only) */
  .sitefooter{ padding: 22px 0 18px; }
  .sitefooter__panel{ padding: 24px; }
}