:root{
    --white:#FFFFFF;
    --paper:#FAFAF8;
    --ink:#083A7F;
    --ink-soft:rgba(8,58,127,0.62);
    --ink-faint:rgba(8,58,127,0.34);
    --line:#D7DBE2;
    --line-strong:#083A7F;
    --blue:#32B4FF;
    --blue-soft:#EAF0FF;
    --radius:2px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--white);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  .display{font-family:'Archivo', sans-serif;}
  .mono{font-family:'IBM Plex Mono', monospace;}
  ::selection{background:var(--blue); color:var(--white);}

  .page-watermark{
    position:fixed; inset:0; z-index:-1;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    pointer-events:none;
  }
  .page-watermark img{
    width:min(70vw, 900px);
    mix-blend-mode:multiply;
    opacity:0.05;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 6vw;
  }

  /* ===================== PILL NAV ===================== */
  .pillnav-holder{
    position:fixed; top:22px; left:0; right:0; z-index:80;
    display:flex; justify-content:center;
  }
  .pillnav{
    display:flex; align-items:center; gap:6px;
    background:var(--ink);
    border-radius:999px;
    padding:5px;
    box-shadow:0 6px 24px rgba(8,58,127,0.18);
  }
  .pill-logo{
    width:38px; height:38px; border-radius:50%;
    background:var(--ink);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .pill-logo img{ width:24px; height:24px; object-fit:contain; }
  .pill-list{
    list-style:none;
    display:flex; align-items:center; gap:2px;
  }
  .pill{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    height:38px;
    padding:0 20px;
    border-radius:999px;
    font-family:'IBM Plex Mono'; font-size:0.76rem;
    letter-spacing:0.06em; text-transform:uppercase;
    color:var(--white);
    overflow:hidden;
    cursor:pointer;
  }
  .pill::before{
    content:'';
    position:absolute; inset:0;
    background:var(--blue);
    border-radius:999px;
    clip-path:circle(0% at 50% 100%);
    transition:clip-path 0.45s cubic-bezier(.2,.8,.2,1);
  }
  .pill:hover::before{ clip-path:circle(140% at 50% 100%); }
  .pill span{ position:relative; z-index:2; }
  .pill.is-active{background:var(--blue);}

  .mobile-toggle{ display:none; }
  .mobile-panel{ display:none; }
  @media (max-width:760px){
    .pillnav-holder{ padding:0 5vw; justify-content:space-between; }
    .pillnav{ width:100%; justify-content:space-between; }
    .pill-list{ display:none; }
    .mobile-toggle{
      display:flex; width:38px; height:38px; border-radius:50%;
      background:var(--white); border:none; align-items:center; justify-content:center;
      flex-direction:column; gap:4px; cursor:pointer;
    }
    .mobile-toggle span{ width:14px; height:2px; background:var(--ink); }
    .mobile-panel{
      position:fixed; top:74px; left:5vw; right:5vw; z-index:79;
      background:var(--ink); border-radius:16px; padding:8px;
      display:none; flex-direction:column; gap:4px;
    }
    .mobile-panel.open{ display:flex; }
    .mobile-panel a{
      color:var(--white); font-family:'IBM Plex Mono'; font-size:0.85rem;
      padding:14px 18px; border-radius:999px;
    }
    .mobile-panel a:active{ background:var(--blue); }
  }

  /* ===================== HERO ===================== */
  .hero{
    padding:150px 0 100px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
  }
  .hero-copy .kicker{
    display:flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono'; font-size:0.74rem;
    letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:26px;
  }
  .kicker .tick{ width:22px; height:1px; background:var(--ink-faint); }

  .hero-copy h1{
    font-size:clamp(2.4rem, 4.6vw, 3.6rem);
    line-height:1.08;
    font-weight:700;
    max-width:520px;
    margin-bottom:26px;
  }
  .hero-copy h1 em{
    font-style:normal;
    color:var(--blue);
  }
  .hero-copy p.lede{
    font-size:1.02rem;
    color:var(--ink-soft);
    max-width:430px;
    line-height:1.65;
    margin-bottom:38px;
  }

  .cta-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
  .btn-primary{
    display:inline-flex; align-items:center; gap:12px;
    background:var(--ink); color:var(--white);
    font-family:'IBM Plex Mono'; font-size:0.82rem;
    letter-spacing:0.04em; text-transform:uppercase;
    padding:16px 26px; border-radius:999px;
    transition:background 0.2s ease;
  }
  .btn-primary:hover{ background:var(--blue); }
  .btn-primary svg{ width:18px; height:18px; }

  .btn-line{
    font-family:'IBM Plex Mono'; font-size:0.78rem;
    color:var(--ink-soft);
    border-bottom:1px solid var(--line-strong);
    padding-bottom:3px;
  }
  .btn-line:hover{ color:var(--blue); border-color:var(--blue); }

  /* ---- hero diagram + lens ---- */
  .hero-art{
    position:relative;
    aspect-ratio:1/1;
    border:1px solid var(--line);
    background:var(--paper);
  }
  .hero-art .frame-label{
    position:absolute; top:14px; left:16px;
    font-family:'IBM Plex Mono'; font-size:0.68rem;
    letter-spacing:0.08em; color:var(--ink-faint);
  }
  .hero-art .frame-label.br{
    top:auto; left:auto; bottom:14px; right:16px; text-align:right;
  }
  .hero-art svg.diagram{ position:absolute; inset:0; width:100%; height:100%; }
  .hero-custom-img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover;
    display:none;
  }
  .hero-custom-img.is-active{ display:block; }
  .hero-custom-img.is-active ~ svg.diagram{ display:none; }
  .lens{
    position:absolute;
    width:200px; height:200px;
    border-radius:50%;
    pointer-events:none;
    top:0; left:0;
    transform:translate(-50%,-50%);
    backdrop-filter:blur(3px) saturate(160%) contrast(1.08) brightness(1.06);
    -webkit-backdrop-filter:blur(3px) saturate(160%) contrast(1.08) brightness(1.06);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.9),
      inset 0 12px 24px rgba(255,255,255,0.4),
      inset 0 -14px 26px rgba(8,58,127,0.08),
      0 18px 40px rgba(8,58,127,0.14);
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%);
    transition:opacity 0.2s ease;
    opacity:0;
  }
  .hero-art:hover .lens{ opacity:1; }

  @media (max-width:900px){
    .hero{ grid-template-columns:1fr; padding-top:120px; }
    .hero-art{ order:-1; }
  }

  /* ===================== SIGNALS ===================== */
  .rule{
    height:1px; background:var(--line);
  }
  .signals{ padding:90px 0; }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
  .section-head .eyebrow{
    font-family:'IBM Plex Mono'; font-size:0.74rem; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--blue); margin-bottom:14px; display:block;
  }
  .section-head h2{
    font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; max-width:520px; line-height:1.2;
  }
  .section-head p{
    max-width:340px; color:var(--ink-soft); font-size:0.94rem; line-height:1.6;
  }

  .signal-row{
    display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
  }
  .signal{
    padding:34px 30px 34px 0;
    border-right:1px solid var(--line);
  }
  .signal:last-child{ border-right:none; padding-right:0; }
  .signal .fig{
    font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--ink-faint);
    letter-spacing:0.06em; margin-bottom:18px; display:block;
  }
  .signal h3{ font-size:1.02rem; font-weight:600; margin-bottom:10px; line-height:1.4; }
  .signal p{ font-size:0.88rem; color:var(--ink-soft); line-height:1.6; }

  @media (max-width:760px){
    .signal-row{ grid-template-columns:1fr; }
    .signal{ border-right:none; border-bottom:1px solid var(--line); padding:28px 0; }
  }

  /* ===================== SERVICES SPEC SHEET ===================== */
  .services{ padding:90px 0; background:var(--paper); }
  table.spec{
    width:100%; border-collapse:collapse; margin-top:10px;
  }
  table.spec th{
    text-align:left; font-family:'IBM Plex Mono'; font-size:0.7rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);
    padding:0 0 14px; border-bottom:1px solid var(--line-strong);
  }
  table.spec td{
    padding:22px 20px 22px 0;
    border-bottom:1px solid var(--line);
    vertical-align:top;
    font-size:0.94rem;
  }
  table.spec td.code{
    font-family:'IBM Plex Mono'; color:var(--blue); font-size:0.86rem; width:90px;
  }
  table.spec td.name{ font-family:'Archivo'; font-weight:700; width:180px; }
  table.spec td.scope{ color:var(--ink-soft); line-height:1.55; }

  /* ===================== COVERAGE ===================== */
  .coverage{ padding:90px 0; }
  .coverage-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start;
  }
  .site-plan{
    border:1px solid var(--line);
    background:var(--paper);
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  .site-plan svg{ width:100%; height:100%; }

  .coverage-list{
    list-style:none;
    margin-top:30px;
    border-top:1px solid var(--line);
  }
  .coverage-list li{
    display:flex; align-items:center; gap:12px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:0.82rem;
    letter-spacing:0.04em;
    color:var(--ink);
  }
  .coverage-dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--blue);
    flex-shrink:0;
  }

  @media (max-width:820px){
    .coverage-grid{ grid-template-columns:1fr; }
  }

  /* ===================== CONTACT ===================== */
  .contact{ padding:60px 0 130px; }
  .frame{
    position:relative;
    border:1px solid var(--line-strong);
    padding:70px 40px;
    text-align:center;
  }
  .corner{ position:absolute; width:18px; height:18px; }
  .corner::before,.corner::after{ content:''; position:absolute; background:var(--ink); }
  .corner::before{ width:100%; height:1.5px; top:0; }
  .corner::after{ width:1.5px; height:100%; left:0; }
  .corner.tl{ top:-1px; left:-1px; }
  .corner.tr{ top:-1px; right:-1px; transform:scaleX(-1); }
  .corner.bl{ bottom:-1px; left:-1px; transform:scaleY(-1); }
  .corner.br{ bottom:-1px; right:-1px; transform:scale(-1,-1); }

  .frame .eyebrow{
    font-family:'IBM Plex Mono'; font-size:0.74rem; color:var(--blue);
    letter-spacing:0.1em; text-transform:uppercase; margin-bottom:20px; display:block;
  }
  .frame h2{
    font-size:clamp(1.7rem,4vw,2.6rem); font-weight:700; max-width:640px;
    margin:0 auto 18px; line-height:1.2;
  }
  .frame p{ color:var(--ink-soft); max-width:420px; margin:0 auto 40px; font-size:0.98rem; line-height:1.6; }
  .frame .phone-note{ margin-top:22px; font-family:'IBM Plex Mono'; font-size:0.78rem; color:var(--ink-faint); }
  .email-link{ color:var(--blue); border-bottom:1px solid transparent; }
  .email-link:hover{ border-bottom-color:var(--blue); }

  footer{
    border-top:1px solid var(--line);
    padding:30px 0;
    display:flex; justify-content:space-between; align-items:center;
    font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--ink-faint);
    flex-wrap:wrap; gap:12px;
  }

  .sticky-wa{
    position:fixed; bottom:22px; right:22px; z-index:70;
    width:54px; height:54px; border-radius:50%;
    background:var(--ink);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px rgba(8,58,127,0.28);
    transition:background 0.2s ease;
  }
  .sticky-wa:hover{ background:var(--blue); }
  .sticky-wa svg{ width:24px; height:24px; }