/* UPDATED 2026-01-08: Root site UI cleanup + unified pill buttons */
/*root_css*/
:root{
  --bg:#0b1220;
  --card:#0f1a2f;
  --alt:#0c162a;
  --text:#eef4ff;
  --muted:#b7c4db;
  --primary:#1b7cff;
  --primary2:#20c997;
  --border:rgba(255,255,255,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius:18px;

  /* iOS safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:linear-gradient(180deg, #071026 0%, #050b18 100%); }
a{ color:inherit; }
.container{ width:min(1120px, calc(100% - 32px)); margin:0 auto; }

.topbar{
  position:sticky; top:0; z-index:9999;
  background:rgba(7,16,38,.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  padding-top: var(--safe-top);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; }
.topbar__contact{ display:flex; align-items:center; gap:10px; min-width:0; }
.dot{ width:10px; height:10px; border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--primary2)); box-shadow:0 0 0 6px rgba(27,124,255,.14); }
.topbar__text{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__actions{ display:flex; gap:10px; align-items:center; white-space:nowrap; }
.topbar__time{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
}

.header{
  position:sticky; top: calc(48px + var(--safe-top)); z-index:9998;
  background:rgba(5,11,24,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand__logo{ height:44px; width:auto; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.25); background:#fff; padding:2px; }

.nav{ display:flex; gap:18px; align-items:center; }
.nav a{ text-decoration:none; color:var(--muted); font-weight:600; font-size:14px; }
.nav a:hover{ color:var(--text); }

.nav__toggle{
  display:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}

.nav__mobile{
  display:none;
  padding:10px 16px 16px;
  border-top:1px solid var(--border);
}
.nav__mobile a{
  display:block;
  padding:10px 0;
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
}
.nav__mobile a:hover{ color:var(--text); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius:14px;
  padding:10px 14px;
  font-weight:800;
  text-decoration:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
}
.btn--primary{
  border:none;
  background:linear-gradient(90deg,var(--primary), var(--primary2));
  box-shadow:0 10px 24px rgba(27,124,255,.18);
}
.btn--ghost:hover{ background:rgba(255,255,255,.09); }
.btn--lg{ padding:12px 16px; border-radius:16px; }

.hero{ padding:46px 0 24px; }
.hero__grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:center; }
.pill{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(27,124,255,.12);
  border:1px solid rgba(27,124,255,.25);
  color:var(--text);
  font-weight:800;
  font-size:12px;
}
h1{ font-size:44px; line-height:1.06; margin:14px 0 12px; }
.lead{ color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 18px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin:10px 0 18px; }
.hero__badges{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.badge{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
}
.badge__title{ font-weight:900; font-size:13px; }
.badge__text{ color:var(--muted); margin-top:6px; font-size:13px; }

.mediaCard{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.mediaCard__caption{
  padding:14px 16px;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}

.section{ padding:46px 0; }
.section--alt{ background:rgba(255,255,255,.02); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section__head h2{ margin:0; font-size:28px; }
.section__head p{ margin:8px 0 0; color:var(--muted); }

.cards{ margin-top:18px; display:grid; gap:14px; grid-template-columns: repeat(3, 1fr); }
.card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.20);
}
.card--highlight{
  border:1px solid rgba(32,201,151,.35);
  box-shadow: 0 0 0 1px rgba(32,201,151,.10), 0 18px 34px rgba(0,0,0,.22);
}
.priceLine{ margin-top:10px; font-size:14px; }
.card__img{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10); }
.card h3{ margin:12px 0 8px; font-size:16px; }
.card p{ margin:0 0 10px; color:var(--muted); line-height:1.6; font-size:13px; }
.card__link{ font-weight:900; text-decoration:none; color:var(--text); }
.card__link:hover{ text-decoration:underline; }

.steps{ margin-top:18px; display:grid; gap:14px; grid-template-columns: repeat(3, 1fr); }
.step{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.step__num{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  background:rgba(32,201,151,.16);
  border:1px solid rgba(32,201,151,.25);
}
.step h3{ margin:10px 0 6px; }
.step p{ margin:0; color:var(--muted); line-height:1.6; font-size:13px; }

.ctaRow{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }

.serviceArea{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
.form{ margin-top:14px; }
.form__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
label{ display:block; font-weight:800; font-size:12px; color:var(--muted); }
input{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
input:focus{ border-color: rgba(27,124,255,.55); box-shadow:0 0 0 4px rgba(27,124,255,.14); }
.span-2{ grid-column: span 2; }
.form__actions{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; }
.fineprint{ margin:10px 0 0; color:var(--muted); font-size:12px; }

.asideCard{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.asideCard hr{ border:none; border-top:1px solid var(--border); margin:14px 0; }
.stack{ display:grid; gap:10px; }

.gallery{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.gallery__item{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}

.about{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
.about__card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.list{ margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.8; }
.muted{ color:var(--muted); }

.jobs{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
.jobs__note{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}

.footer{
  padding:34px 0 18px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.20);
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr .5fr .6fr;
  gap:18px;
  align-items:start;
}
.footer__brand{ display:flex; gap:12px; align-items:center; }
.footer__brand img{ height:42px; border-radius:10px; background:#fff; padding:2px; }
.footer__title{ font-weight:1000; }
.footer__sub{ color:var(--muted); font-weight:700; font-size:13px; }
.footer__links a{ display:block; padding:6px 0; color:var(--muted); text-decoration:none; font-weight:800; }
.footer__links a:hover{ color:var(--text); }
.footer__contact{ color:var(--muted); line-height:1.7; font-weight:700; }
.footer__bottom{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-weight:700;
  font-size:12px;
}

/* Watermark wrapper */
.wm{ position:relative; }
.wm img{
  width:100%;
  height:auto;
  display:block;
}
.wm__mark{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:6px 10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  backdrop-filter: blur(6px);
  text-transform: lowercase;
}

/* Modal */
.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  z-index:10000;
  padding:16px;
}
.modal__panel{
  width:min(520px, 100%);
  background:rgba(10,16,34,.98);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.modal__actions{ margin-top:14px; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

/* ============================
   Site Search (no refresh)
   ============================ */
.siteSearch{
  position:relative;
  min-width:220px;
}
.siteSearch__input{
  width:220px;
  margin-top:0;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
  font-weight:700;
}
.siteSearch__input::placeholder{ color:rgba(183,196,219,.85); }
.siteSearch__input:focus{
  border-color: rgba(27,124,255,.55);
  box-shadow:0 0 0 4px rgba(27,124,255,.14);
}
.siteSearch__results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:min(520px, 88vw);
  display:none;
  background:rgba(10,16,34,.98);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:12000;
}
.siteSearch__item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.siteSearch__item:last-child{ border-bottom:none; }
.siteSearch__item:hover{ background:rgba(255,255,255,.06); }
.siteSearch__label{ font-weight:900; font-size:13px; color:var(--text); }
.siteSearch__meta{ font-size:12px; font-weight:800; color:var(--muted); }
.siteSearch__empty{ padding:12px; color:var(--muted); font-weight:800; font-size:13px; }

/* ============================
   Pricing tables
   ============================ */
.tableWrap{
  margin-top:14px;
  overflow:auto;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.table{
  width:100%;
  border-collapse:collapse;
  min-width: 720px;
}
.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}
.table th{
  color:var(--text);
  font-weight:900;
  text-align:left;
  position:sticky;
  top:0;
  background:rgba(10,16,34,.98);
  cursor:pointer;
  user-select:none;
}
.table tr:hover td{ background:rgba(255,255,255,.03); }
.table th.sortAsc::after{ content:" ▲"; color:rgba(238,244,255,.85); font-weight:900; }
.table th.sortDesc::after{ content:" ▼"; color:rgba(238,244,255,.85); font-weight:900; }

/* Responsive */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  h1{ font-size:36px; }
  .cards{ grid-template-columns: 1fr 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr 1fr; }
  .serviceArea{ grid-template-columns: 1fr; }
  .about{ grid-template-columns: 1fr; }
  .jobs{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .header{ top: calc(48px + var(--safe-top)); }

  .siteSearch{ width:100%; min-width:unset; }
  .siteSearch__input{ width:min(520px, 88vw); }
  .table{ min-width: 640px; }
}
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
  .form__grid{ grid-template-columns: 1fr; }
  .span-2{ grid-column: span 1; }
  .topbar__inner{ flex-direction:column; align-items:flex-start; gap:10px; }
  .topbar__actions{ width:100%; flex-wrap:wrap; justify-content:flex-start; }
  .siteSearch__input{ width:100%; }
  .table{ min-width: 560px; }
}



/* ============================
   Support page helpers
   (support.html uses a slightly different layout)
   ============================ */
.btn--small{ padding:8px 12px; border-radius:12px; font-weight:900; }
.brand__text{ display:flex; flex-direction:column; gap:2px; }
.brand__title{ font-weight:1000; line-height:1; }
.brand__sub{ color:var(--muted); font-weight:800; font-size:12px; }
.inlineLink{ text-decoration:none; font-weight:900; }
.inlineLink:hover{ text-decoration:underline; }

.nav__link{ text-decoration:none; color:var(--muted); font-weight:800; font-size:14px; }
.nav__link:hover{ color:var(--text); }
.nav__link--active{ color:var(--text); }

.main{ padding-top:0; }

.grid2{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}

.card--neon{
  border:1px solid rgba(32,201,151,.35);
  box-shadow: 0 0 0 1px rgba(32,201,151,.10), 0 18px 34px rgba(0,0,0,.22);
}

.note{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
}
.note__meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
  color:var(--text);
  font-size:13px;
}
.note__text{ margin-top:6px; color:var(--muted); font-weight:700; font-size:13px; line-height:1.5; }

/* support footer helpers */
.footer__left, .footer__right{ display:flex; flex-direction:column; gap:8px; }
.footer__right{ align-items:flex-end; }
.footer__link{ color:var(--muted); text-decoration:none; font-weight:900; }
.footer__link:hover{ color:var(--text); }
.smallMuted{ color:var(--muted); font-weight:700; font-size:12px; }

@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
  .footer__right{ align-items:flex-start; }
}

/* UPDATED 2026-01-08: hide ET clock in top banner (even if present on any page) */
.topbar__time{ display:none !important; }

/* ============================
   CleanCurbside Pill Buttons (Uniform)
   - Use <button class="cc-pill-button">...</button>
   - For backwards-compatibility, existing .btn styles are overridden to match
   ============================ */
.cc-pill-button,
.btn{
  appearance: none;
  border: none;
  cursor: pointer;

  /* Size & shape */
  padding: 14px 34px;
  border-radius: 999px;

  /* Color & gradient */
  background: linear-gradient(
    to bottom,
    #9be600 0%,
    #6fc400 45%,
    #5db100 100%
  );

  /* Subtle inner highlight */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.25);

  /* Text */
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;

  /* Smooth interaction */
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;

  /* Layout */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
}

/* Hover */
.cc-pill-button:hover,
.btn:hover{
  filter: brightness(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.3);
}

/* Active (click) */
.cc-pill-button:active,
.btn:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 4px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Disabled */
.cc-pill-button:disabled,
.btn:disabled{
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(30%);
}

/* Variants - keep existing classnames but unify appearance */
.btn--ghost{
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.08) 45%,
    rgba(255,255,255,.05) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.22);
}

/* Size helpers */
.btn--small{ padding: 10px 18px; font-size: 14px; }
.btn--lg{ padding: 16px 40px; font-size: 16px; }

/* =====================================================
   MOBILE READABILITY PATCH (MINIMAL)
   Goal: prevent zoom-out + improve wrapping on small screens
   Scope: mobile only (no desktop impact)
   ===================================================== */
html{ -webkit-text-size-adjust: 100%; }
body{ overflow-x:hidden; }

@media (max-width: 820px){
  /* Switch to hamburger menu on small screens */
  .nav{ display:none !important; }
  .nav__toggle{ display:inline-flex !important; align-items:center; justify-content:center; }

  /* Let top banner content wrap instead of forcing one line */
  .topbar__text{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;
  }
  .topbar__actions{
    white-space:normal !important;
    flex-wrap:wrap;
  }
}

@media (max-width: 560px){
  /* Slightly smaller hero type to avoid zooming */
  h1{ font-size:30px !important; line-height:1.15; }
  h2{ font-size:22px !important; line-height:1.2; }

  /* Allow long labels to wrap inside buttons */
  .cc-pill-button,
  .btn{
    white-space:normal !important;
    text-align:center;
  }

  /* Pricing tables: avoid forcing wide min-width on narrow screens */
  .table{ min-width: 0 !important; }
  .table th, .table td{ white-space:normal; }
}

/* =====================================================
   CC BUTTONS — HARD LOCK (ALL VARIANTS)
   Ensures EVERY button looks identical (no ghost/primary variants)
   NOTE: Scoped to .btn / .cc-pill-button only (does not affect .nav__toggle)
   ===================================================== */
.cc-pill-button,
.btn,
a.btn,
button.btn,
.btn--primary,
.btn--ghost,
.btn--small,
.btn--lg{
  appearance: none !important;
  border: none !important;
  cursor: pointer !important;

  padding: 14px 34px !important;
  border-radius: 999px !important;

  background: linear-gradient(
    to bottom,
    #9be600 0%,
    #6fc400 45%,
    #5db100 100%
  ) !important;

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.25) !important;

  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  text-decoration: none !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease !important;
}

.cc-pill-button:hover,
.btn:hover,
a.btn:hover,
.btn--primary:hover,
.btn--ghost:hover,
.btn--small:hover,
.btn--lg:hover{
  filter: brightness(1.05) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

.cc-pill-button:active,
.btn:active,
a.btn:active,
.btn--primary:active,
.btn--ghost:active,
.btn--small:active,
.btn--lg:active{
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 3px 4px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.cc-pill-button:disabled,
.btn:disabled{
  cursor: not-allowed !important;
  opacity: 0.55 !important;
  filter: grayscale(30%) !important;
}