/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root{
  --site-max: 1620px;
  --gutter: 16px;
  --bg:#0b0d10; --panel:#101419; --edge:#161e28; --text:#e8eef6;
  --muted:#9aa4b2; --blue:#0D74F5; --green:#59E00B;
}
body{
  font: 15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: linear-gradient(180deg,#0a0c0f,#0c1218 40%,#0a0f16);
  padding-top: 120px; /* header height – tweak to taste (72–88px range) */
}



/* Push footer to the bottom when content is short */
#footer-placeholder {
  margin-top: auto;
}

/* ===== Layout ===== */
.container,
.header-inner,
.hero--full .hero-inner{
  max-width: var(--site-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Slim animated gradient bar at the very top (Meraki-style) */
.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;  /* 2–4px feels best */
  pointer-events: none;
  z-index: 110; /* above header background but under any modals if you have them */

  /* Brand gradient: blue → green → blue */
  background: linear-gradient(
    90deg,
    #0d85f5,
    #59E00B,
    #0D74F5
  );
  background-size: 200% 100%;
  opacity: 1;
  animation: casTopBarSweep 24s linear infinite;
}

/* Slow, subtle movement across the top */
@keyframes casTopBarSweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Optional: respect “reduce motion” for accessibility */
@media (prefers-reduced-motion: reduce) {
  .header::before {
    animation: none;
    background-position: 50% 50%;
  }
}


/* ===== Header / Nav ===== */
.header{
  position: fixed;           /* <– stays on screen at all times */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;              /* a bit higher to stay above content */
  backdrop-filter: saturate(120%) blur(8px);
  background: rgba(10,14,18,.9);
  border-bottom: 1px solid #0e141b;
}

.header-inner{ display:flex; align-items:center; gap:16px; padding:1px 20px; }

.brand{ display:flex; align-items:center; gap:8px; }

/* kill any “ring” coming from prior styles */
.brand{ display:flex; align-items:center; gap:18px; font-weight:700; font-size:26px; letter-spacing:0.59px; }
.brand .mark{ width:100px; height:100px; border-radius:8px;
  background: #0b0d1000 url("/assets/logo_website_final.png") center/contain no-repeat;
  box-shadow:0 0 0 0px rgba(255,255,255,.06) inset;
  text-decoration:none;
  }


.nav{ margin-left:auto; display:flex; align-items:center; gap:15px; }
.nav a{
  color: var(--text); text-decoration: none; padding:10px 12px; border-radius:10px;
  border:1px solid #1b2430; background:#131922; transition:.15s;
}
.nav a:hover{ transform: translateY(-1px); background:#182131; }
.nav a.active{ outline:1px solid #233249; background:linear-gradient(150deg,#0d75f5c1, #59e00bc1); }








/* Mobile */
.menu-btn{ display:none; }
@media (max-width: 860px){
  .brand{ font-size:18px; }
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; margin-left:auto; padding:10px 12px; border-radius:10px;
    border:1px solid #1b2430; background:#131922; color:var(--text); cursor:pointer; }
  [data-menu].open{ display:flex; position:fixed; inset:60px 16px auto 16px;
    flex-direction:column; gap:8px; padding:16px; background:#0f151d; border:1px solid #162030; border-radius:12px; }
}

/* Make the brand link look like normal branded text, not a default link */
.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.59px;
  color: var(--text);
  text-decoration: none;
}



.brand:hover {
  text-decoration: none;
}


/* Hamburger icon inside the mobile menu button */
.menu-btn .menu-icon {
  display: inline-block;
  width: 22px;
  height: 16px;
  position: relative;
}

.menu-btn .menu-icon span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: #e8eef6;
  transition: transform 0.18s ease, opacity 0.18s ease, top 0.18s ease;
}

/* Three lines: top, middle, bottom */
.menu-btn .menu-icon span:nth-child(1) { top: 0; }
.menu-btn .menu-icon span:nth-child(2) { top: 7px; }
.menu-btn .menu-icon span:nth-child(3) { top: 14px; }

/* When menu is open, turn into "X" */
.menu-btn.open .menu-icon span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.menu-btn.open .menu-icon span:nth-child(2) {
  opacity: 0;
}

.menu-btn.open .menu-icon span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* Thin bar above the main header */
.header-top {
  border-bottom: 1px solid #161e28;
  background: rgba(10, 14, 18, 0.98);
  font-size: 12.5px;
}

/* Re-use header-inner but make this one extra thin + right-aligned */
.header-inner--top {
  padding-top: 14px;
  padding-bottom: 11px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Small right-aligned links */
.header-top-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-top-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 450;
}

.header-top-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Mobile: hide the top strip so it doesn't overwhelm */
@media (max-width: 860px) {
  .header-top {
    display: none;
  }
}

/* Desktop: hide the extra nav links that are meant for mobile only */
@media (min-width: 861px) {
  .nav .nav-mobile-extra {
    display: none;
  }
}



/* ===== Sections ===== */
.hero{ padding:40px 20px; text-align:center; }
h1{ margin:0 0 10px 0; font-size:28px; }
h2{ margin:0px 0 10px 0; font-size:26px; }
p{ color: var(--muted); margin:8px 0; }

.card{ background:var(--panel); border:1px solid #131923; border-radius:16px; padding:18px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:9999px;
  color:#0b0d10; background:linear-gradient(180deg,#ffffff, #ffffff); border:0px solid #1b2430; text-decoration:none; font-weight: 550; }
.btn.blue{ background:#131922; padding:8px 12px; border:1.5px solid #9aa4b2; color: #e8eef6; font-weight: 250; }

/* 1) Headings / brand font stack (Windows 11 native, no web fonts) */
h1, h2, .brand-name {
  font-family:
    "Segoe UI Variable Display",
    "Segoe UI Variable Text",
    Bahnschrift,
    "Segoe UI",
    system-ui, -apple-system, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
  font-size: 33px;
}

/* Optional: H2 a touch lighter */
h2 { font-weight: 600; }

/* 2) Let variable fonts use their optical sizing if available */
h1, h2, .brand-name { font-optical-sizing: auto; }

/* 3) Progressive enhancement: only applies when variable fonts are supported */
@supports (font-variation-settings: normal) {
  h1, h2, .brand-name {
    font-variation-settings: "wght" 700, "opsz" 32; /* adjust opsz to your heading size */
  }
}

/* ===== Layout utilities ===== */
.section { margin: 32px 0; }
.section .section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; }
.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px){
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ===== Trust bar ===== */
.trust { background: #0f151d; border:1px solid #131923; border-radius:16px; padding:14px; }
.trust-logos { display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:center; opacity:.9; }
.trust-logos img { height:28px; filter: grayscale(100%) contrast(1.2); opacity:.85; }

/* ===== Solution cards ===== */
.solution { padding:30px; border-radius:14px; border:1px solid #1b2430; background:#131922; transition:transform .15s, background .15s; }
.solution:hover { transform: translateY(-2px); background:#182131; }
.solution h3 { margin:0 0 10px; font-size:18px; }
.solution p { margin:0; color:var(--muted); }
.solution .actions { margin-top:10px; display:flex; gap:8px; align-items:center; justify-content:center; }


/* Partners page – solution cards with CAS gradient border */
.partners-page .solution {
  position: relative;
  border-radius: 18px;

  /* thin gradient frame */
  border: 2px solid transparent;

  /* inner dark panel + outer gradient border */
  background:
    linear-gradient(180deg,#101419,#0f151d) padding-box,
    linear-gradient(
      135deg,
      var(--blue),
      #e7f1ff,
      var(--green),
      #f2ffe6,
      var(--blue)
    ) border-box;

  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}





/* ===== Industries ===== */
.badge-row { display:flex; gap:10px; flex-wrap:wrap; }
.badge { padding:8px 10px; border-radius:999px; border:1px solid #1b2430; background:#10171f; color:var(--text); font-size:13px; }

/* ===== Proof / KPI band ===== */
.kpis { display:flex; gap:16px; flex-wrap:wrap; }
.kpi-card { flex:1 1 200px; padding:16px; border-radius:14px; border:1px solid #1b2430; background:#0f151d; text-align:center; }
.kpi-card .num { font-size:24px; font-weight:700; }
.kpi-card .label { color:var(--muted); }

/* ===== Final CTA band ===== */
.cta-band { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px; border-radius:16px; border:1px solid #1b2430; background:linear-gradient(180deg,#0f5adb,#0b48b3); }
.cta-band h3 { margin:0; font-size:20px; }
.cta-band p { margin:0; color:#e8eef6; }
.cta-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn.ghost { background:transparent; border:1px solid rgba(255,255,255,.6); }

/* Accessibility focus for links-in-cards */
.solution a:focus-visible, .badge:focus-visible, .btn:focus-visible {
  outline:2px solid var(--blue); outline-offset:3px; border-radius:10px;
}

/* Full-bleed hero (Cisco-style) */
.hero--full{
  position: relative;
  margin:0; padding:60px 0;
  border:0; border-radius:0;
  background:
    radial-gradient(2000px 600px at 75% 40%, rgba(13,116,245,.25), transparent 60%),
    linear-gradient(180deg,#0b0d10,#0c1218 50%,#0b0d10);
}
.hero--full .hero-inner{ max-width:1560px; text-align: left; margin:0 auto; padding:0 0px; }
.hero--full h1{ font-size:60px; font-weight:625; line-height:1.1; margin:0 0 10px; }
.hero--full p{ max-width:680px; }
.hero--full .hero-inner p + p { margin-top: 32px; }
.hero--full .hero-inner h1 + p { margin-top: 32px; font-size: 1.35em; line-height: 1.6;}

/* responsive tweak */
@media (max-width:860px){
  .hero--full{ padding:56px 0; }
  .hero--full h1{ font-size:32px; }
  .hero--full .hero-inner h1 + p { margin-top: 10px; }
  .hero--full .hero-inner p + p  { margin-top: 16px; }
}
/* Put the second phrase on its own line and style it */
.hero--full h1 .h1-sub{
  display:block;            /* forces a new line */
  font-size: inherit;         /* slightly smaller than the first line */
  font-weight: 625;         /* a touch lighter than the main line */
  letter-spacing: inherit;
  margin-top: 10px;
  opacity: 1.00;             /* subtle contrast; remove if you want full strength */
}
/* White version of the blue button (Rev 2 hero) */
.btn.white.hero-btn {
  background:linear-gradient(150deg,#ffffff, #d3d3d3);  /* subtle light gray hover */
  color: #0b0d10;             /* dark text for contrast */
  border: 0;                  /* clean look */
  font-size: 18px;
  font-weight: 600;           /* strong headline feel */
}

/* Optional: subtle hover tweak so it feels alive */
.btn.white.hero-btn:hover {
  transform: translateY(-0.5px);
  background: linear-gradient(150deg, #ffffff, #bfbfbf);
}





/* Midnight Blue version of the blue button (Rev 2 hero) */
.btn.mid.hero-btn {
  background:#131922;  /* subtle light gray hover */
  color: #e8eef6;             /* dark text for contrast */
  border: 1.5px solid #9aa4b2;                  /* clean look */
  font-size: 18px;
  font-weight: 400;           /* strong headline feel */
}

/* Smooth motion like your nav links */
.btn.mid.hero-btn{
  transition: transform .125s, background .125s, border-color .125s, box-shadow .125s;
  /* tip: use a supported weight (e.g., 600/700). 250 isn’t widely supported */
  font-weight: 400;
}

/* Hover: lift + darker bg (matches .nav a:hover) */
.btn.mid.hero-btn:hover{
  transform: translateY(-0.75px);
  background:#182131;
  border-color:#233249;
}

/* “Active” state (click or a class you add) */
.btn.mid.hero-btn:active{
  transform: translateY(0); /* press back down */
}
.btn.mid.hero-btn.active{
  outline:2px solid #233249;
  background:#101a28;
}

/* Keyboard focus (accessibility, matches your style) */
.btn.mid.hero-btn:focus-visible{
  outline:2px solid #233249;
  outline-offset:3px;
}

/* optional hover state */
.btn.blue.rev2-btn:hover {
  background:linear-gradient(150deg,#ffffff, #aaaaa0);  /* subtle light gray hover */
  transform: translateY(-0.5px);
}



/* Align to the same edges as header/hero */
.content-shell{
  max-width: var(--site-max);
  margin: -24px auto 40px;        /* slight overlap into hero = premium look */
  padding: 0 var(--gutter);
}

/* The lifted panel */
.content-inner{
  background: linear-gradient(180deg,#0f151d,#0f151d);
  border: 1px solid #101822;
  border-radius: 18px;
  padding: 20px;
  /* Omni/radial-style lift: zero offset + blur + small spread */
  box-shadow:
    0 0 28px 6px rgba(0,0,0,0.28);
}

/* Optional: add a faint colored aura for brand feel */
@media (min-width: 900px){
  .content-inner{
    box-shadow:
      0 0 28px 6px rgba(0,0,0,0.28),
      0 0 60px 0 rgba(13,116,245,0.07); /* subtle blue halo */
  }
}
.hero--full .hero-inner p .btn + .btn {
  margin-left: 8px;   /* Adjust spacing as desired */
}

.hero-art{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(48vw, 800px);
  pointer-events:none;
}

.hero-art canvas{
  width:100%;
  height:100%;
  display:block;
  opacity:0;                      /* start invisible */
  transition: opacity 1.5s ease;   /* fade in/out */
}

@media (max-width: 860px) {
  .hero-art {
    display: none;      /* hide the radial pins + lock image on phones */
  }
}

#lockFade{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  max-width:280px;   /* tweak size here */
  width:55%;         /* scales with hero-art */
  height:auto;
  opacity:0;         /* will fade in via JS */
  transition: opacity 0.7s ease-out;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45));
}


/* Extra breathing room above Industries section */
.section-industries {
  margin-top: 110px; /* or 64px / 80px – tweak to taste */
  margin-bottom: 70px;
}


/* ===== Industries Tabs Section ===== */

.section-industries .section-head {
  align-items: center; justify-content:center;
  gap: 24px;
}


.section-industries .section-sub {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}


.industries {
  border-radius: 18px;
  border: 1px solid #101822;
  background: linear-gradient(135deg, #0f151d, #0f151d);
  padding: 18px 18px 20px;
  box-shadow:
    0 0 24px 4px rgba(0, 0, 0, 0.32),
    0 0 60px 0 rgba(13, 116, 245, 0.06);
} 
/* Tabs row */
.industry-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.industry-tab {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #1b2430;
  background: #10171f;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.industry-tab:hover {
  transform: translateY(-0.5px);
  background: #182131;
  border-color: #233249;
}

.industry-tab.active {
  color: #ffffff;
  font-size: 14px;
  background:linear-gradient(150deg,#0d75f5c1, #59e00bc1);
  /* background: #0b0d10; */
  border-color: #233249;
  box-shadow: 0 0 0 1px rgba(205, 207, 211, 0.45);
}

.industry-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Panels */
.industry-panels {
  border-radius: 16px;
  background: radial-gradient(900px 420px at 80% 30%, rgba(13, 116, 245, 0.22), transparent 65%);
  border: 1px solid #101822;
  padding: 20px;
}

.industry-panel {
  display: none;
}

.industry-panel.active {
  display: block;
}

.industry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.industry-text h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.industry-tagline {
  margin: 0 0 14px;
  color: var(--muted);
}

.industry-points {
  margin: 0 0 12px 18px;
  padding: 0;
  color: var(--muted);
}

.industry-points li {
  margin-bottom: 6px;
}

.industry-compliance {
  margin: 0;
  font-size: 13px;
  color: #b1bccb;
  opacity: 0.9;
}

/* Right-side visuals */
.industry-visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 440px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Dark overlay to keep it subtle */
.industry-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background:
    radial-gradient(circle at 20% 20%, rgba(89, 224, 11, 0.12), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(13, 116, 245, 0.22), transparent 60%),
    linear-gradient(145deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.8)); */
}

/* Per-industry treatments (swap images/gradients later if you want) */


.industry-visual--enterprise {
  background-image: url("/assets/ind_sbm.png");
}
.industry-visual--enterprise {
  cursor: zoom-in;
}


.industry-visual--sbm {
  background-image: url("/assets/ind_smb.png");
}
.industry-visual--healthcare {
  background-image: url("/assets/ind_healthcare.png");
}

.industry-visual--financial {
  background-image: url("/assets/ind_finance.png");
}

.industry-visual--government {
  background-image: url("/assets/ind_gov.png");
}


.industry-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* top copy, bottom button */
}

/* optional: keep the text block behaving normally */
.industry-copy {
  display: block;
}

/* button row at the bottom-left */
.industry-actions {
  margin-top: 16px;        /* little breathing room from the text */
  margin-left: 3px;
  margin-bottom:5px;
}

.industry-actions .industries-cta {
  font-size: 18px;
  padding: 12px 24px;
  align-self: flex-start;  /* keep it hugging the left edge */
}

/* Make the Industries "Schedule a Pickup" use the white hero gradient */
.section-industries .industries-cta {
  background: linear-gradient(150deg, #ffffff, #d3d3d3); /* same as .btn.white.hero-btn */
  color: #0b0d10;          /* dark text so it’s readable on the light gradient */
  border: 0;               /* cleaner like the hero button */
  font-size: 18px;
  font-weight:600;
  padding: 12px 24px;      /* your updated padding */
}

/* Optional: subtle hover tweak so it feels alive */
.section-industries .industries-cta:hover {
  transform: translateY(-0.5px);
  background: linear-gradient(150deg, #ffffff, #bfbfbf);
}


/* On mobile, give it a bit more breathing room */
@media (max-width: 860px) {
  .industry-cta-row {
    margin-top: 16px;
  }
}

.industry-footnote {
  margin: 14px 4px 0;
  font-size: 13px;
  color: var(--muted);
}

.industry-footnote a {
  color: var(--blue);
  text-decoration: none;
}

.industry-footnote a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 860px) {
  .section-industries .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .industry-panels {
    padding: 16px;
  }

  .industry-layout {
    grid-template-columns: 1fr;
  }

  .industry-visual {
    min-height: 180px;
  }
}

/* Make the Industries heading + text bigger only in this section */
.section-industries h2 {
  font-size: 66.5px;       /* try 34–40px to taste */
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 50px;
}

.section-industries .section-sub {
  font-size: 19px;       /* default was ~14px */
}

/* Inside the panels */
.section-industries .industry-text h3 {
  font-size: 26.5px;       /* bigger industry titles */
}

.section-industries .industry-tagline {
  font-size: 18px;
}

.section-industries .industry-points {
  font-size: 18px;
  
}

.section-industries .industry-compliance {
  font-size: 16px;
}

/* Responsive */
@media (max-width: 860px) {
  .section-industries .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .industry-panels {
    padding: 16px;
  }

  .industry-layout {
    grid-template-columns: 1fr;
  }

  /* Slightly taller visuals on mobile so they don't feel tiny */
  .industry-visual {
    min-height: 220px;
  }

  /* Make Corporate IT & Enterprise a bit taller and ensure this wins */
  .industry-visual--enterprise {
    min-height: 260px;
  }
}

/* Smaller heading only for the Industries section */
.section-industries .section-head h2{
  font-size: 60px;   /* try 24–30px depending on how small you want it */
  line-height: 1.3;
}

/* Industries section heading – desktop base */
.section-industries .section-head{
  max-width: 1500px;         /* keeps the line length reasonable */
  margin: 0 auto 24px;      /* centers the block */
  text-align: center;       /* centers h2 and subtext */
}

.section-industries .section-head h2{
  font-size: 54px;          /* good desktop size */
  line-height: 1.25;
  margin: 0;
  font-weight: 500;
}

/* Medium screens (tablets, small laptops) */
@media (max-width: 900px){
  .section-industries .section-head h2{
    font-size: 28px;
    line-height: 1.2;
  }
}

/* Small screens (phones) */
@media (max-width: 600px){
  .section-industries .section-head{
    padding: 0 16px;        /* a little side padding on narrow screens */
  }

  .section-industries .section-head h2{
    font-size: 28px;        /* main fix for “too big” on mobile */
    line-height: 1.35;
  }
}



/* ===== Services layout (Cisco-style skeleton) ===== */

.services-page-shell {
  margin-top: 32px;
  margin-bottom: 40px;
}

/* Outer block that feels like a single unit */
.services-shell {
  border-radius: 18px;
  border: 1px solid #101822;
  background: linear-gradient(180deg,#101419,#0f151d);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  padding: 0; /* content handled by inner layout */
}

/* Two-column layout: left nav + right panel, all one block */
.services-layout {
  background: #05070a;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  align-items: flex-start;
}

/* Left nav column */
.services-nav {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 125px;            /* tweak if it collides with header */
  align-self: flex-start;
}

/* This is the tab style you liked: text with blue vertical bar when active */
.services-tab {
  width: 100%;
  text-align: left;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.services-tab:hover {
  color: var(--text);
  background: rgba(15, 21, 29, 0.6);
}

.services-tab.active {
  color: var(--text);
  border-left-color: var(--blue);
  background: rgba(15, 21, 29, 0.9);
}

/* Right column: vertical stack of sections */
.services-panels {
  padding: 20px 22px;
  border-left: 1px solid #1b2430;
}

/* Each section gets breathing room and a divider */
.services-section {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid #151b25;
}

.services-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Optional: small visual grouping for each block inside a section */
.svc-block {
  margin-top: 22px;
}

.svc-block h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

/* Each panel is currently empty; we just give them a min height */
.services-panel {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 260px;
}

.services-panel.active {
  display: block;
}

/* Responsive: stack nav on top of content on small screens */
@media (max-width: 900px) {
  .services-layout {
    grid-template-columns: 1fr;
  }

  .services-nav {
    border-bottom: 1px solid #1b2430;
    padding-bottom: 12px;
    position: static;
    top: auto;
  }

  .services-panels {
    border-left: none;
    border-top: 1px solid #1b2430;
    padding-top: 16px;
  }
}


/* Responsive: stack nav + content on small screens */
@media (max-width: 900px) {
  .services-layout {
    grid-template-columns: 1fr;
  }

  .services-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .services-tab {
    flex: 1 1 48%;
    text-align: center;
  }
}

/* ===== Services Home (tab: Services Home) ===== */

.svc-home-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 4px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.svc-home-eyebrow {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.9;
}

.svc-home-title {
  margin: 0;
  font-size: 1.8rem;          /* bigger headline */
  line-height: 1.45;
  font-weight: 650;
  color: var(--text);
}

.svc-home-lead {
  margin: 4px auto 0;
  max-width: 780px;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--muted);
}

/* AI-era context band */
.svc-home-context {
  margin-top: 8px;
  padding: 14px 18px 16px;
  border-radius: 16px;
  border: 1px solid #1b2430;
  background:
    radial-gradient(900px 420px at 5% 0%, rgba(13,116,245,0.16), transparent 60%),
    radial-gradient(800px 420px at 95% 100%, rgba(89,224,11,0.16), transparent 60%),
    #101419;
  text-align: left;           /* easier to read */
}

.svc-home-context h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.svc-home-context p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Pillars list inside the context band */
.svc-home-pillars {
  margin: 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px 18px;
  list-style: disc;
}

.svc-home-pillars li {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Split service models: two gradient cards */

.svc-home-offers {
  margin-top: 10px;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.svc-home-offer {
  padding: 14px 18px 16px;
  border-radius: 16px;
  border: 1px solid #1b2430;
  background:
    radial-gradient(900px 420px at 5% 0%, rgba(13,116,245,0.16), transparent 60%),
    radial-gradient(800px 420px at 95% 100%, rgba(89,224,11,0.16), transparent 60%),
    #101419;
  text-align: left;
  box-shadow: 0 10px 26px rgba(0,0,0,0.55);
}

.svc-home-offer-title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
}

.svc-home-offer-body {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}

.svc-home-offer-points {
  margin: 0;
  padding-left: 0;      /* remove default bullets indent */
  list-style: none;     /* kill normal bullets */
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.86rem;
  color: var(--muted);
}

.svc-home-offer-points li {
  position: relative;
  padding-left: 22px;   /* space for the checkmark */
}

/* green checkmark bullets */
.svc-home-offer-points li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 0.9rem;

  /* gradient text like the “Core Asset Solutions: Secure, Sustainable, now Simplified.” pill */
  background: linear-gradient(135deg, #0D74F5, #59E00B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;          /* hide solid color so gradient shows */
}


/* Mobile: stack the two cards */
@media (max-width: 900px) {
  .svc-home-offers {
    grid-template-columns: 1fr;
  }
}


/* Tagline band at the bottom */
.svc-home-tagline {
  margin-top: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg,#0D74F5,#59E00B);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.svc-home-tagline p {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 550;
  color: #0b0d10;
}

/* Mobile tweaks */
@media (max-width: 900px) {
  .svc-home-hero {
    padding: 4px 0;
  }

  .svc-home-title {
    font-size: 1.4rem;
  }

  .svc-home-lead {
    font-size: 0.94rem;
  }

  .svc-home-context {
    padding: 12px 12px 14px;
  }

  .svc-home-pillars {
    grid-template-columns: 1fr;
  }

  .svc-home-tagline {
    border-radius: 14px;
    width: 100%;
  }
}

/* ===== Shared section typography for Services tabs ===== */

.svc-section-title {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 640;
  color: var(--text);
}

.svc-section-intro {
  margin: 0;
  max-width: 640px;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ===== Segment layout for E-waste & Enterprise sections ===== */

.svc-segment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr);
  gap: 22px;
  align-items: flex-start;
}

.svc-segment-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-segment-subheading {
  margin: 10px 0 4px;
  font-size: 0.98rem;
  font-weight: 580;
  color: var(--text);
}

.svc-segment-aside {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.svc-segment-card {
  width: 100%;
  max-width: 340px;
  border-radius: 16px;
  border: 1px solid #1b2430;
  padding: 14px 16px 16px;
  background:
    radial-gradient(700px 360px at 10% 0%, rgba(13,116,245,0.18), transparent 55%),
    radial-gradient(700px 360px at 90% 100%, rgba(89,224,11,0.18), transparent 55%),
    #05070a;
  box-shadow: 0 14px 30px rgba(0,0,0,0.6);
}

.svc-segment-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.svc-segment-footnote {
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: var(--muted);
  opacity: 0.95;
}

/* Reuse the same checkmark style lists for these side cards & bullets */
.svc-segment-card .svc-home-offer-points {
  margin-top: 2px;
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .svc-segment-layout {
    grid-template-columns: 1fr;
  }

  .svc-segment-aside {
    margin-top: 10px;           /* show the right-hand card above copy if you prefer */
    margin-bottom: 10px;
  }
}


/* ===== Our Process layout ===== */

.svc-process-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: flex-start;
}

/* Left column: step cards */

.svc-process-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.svc-step-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svc-step-card {
  border-radius: 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #101419, #0f151d) padding-box,
    linear-gradient(
      135deg,
      var(--blue),
      #e7f1ff,
      var(--green),
      #f2ffe6,
      var(--blue)
    ) border-box;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  gap: 8px 14px;
}

.svc-step-badge {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg,#0D74F5,#59E00B);
  color: #0b0d10;
  font-size: 0.9rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.svc-step-body h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
}

.svc-step-body p {
  margin: 0 0 6px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.svc-step-body ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.88rem;
  color: var(--muted);
}

.svc-step-footnote {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.9;
}

/* Right column: tall process visual */

.svc-process-visual {
  padding-top: 128px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svc-process-visual-inner {
  border-radius: 16px;
  border: 1px solid #1b2430;
  background: #05070a;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;            /* tall-ish, you can tweak */
}

.svc-process-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;            /* keeps it from going crazy tall */
  object-fit: contain;
}

.svc-process-caption {
  margin: 0 2px;
  font-size: 0.82rem;
  color: var(--muted);
  opacity: 0.9;
}

/* Responsive: stack image under steps */

@media (max-width: 900px) {
  .svc-process-layout {
    grid-template-columns: 1fr;
  }

  .svc-process-visual-inner {
    min-height: 0;
  }
}

/* ===== Services process image zoom / lightbox ===== */

.svc-process-image {
  cursor: zoom-in;
}

/* Full-screen overlay */
.svc-lightbox {
  position: fixed;
  inset: 0;
  display: none;                 /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  z-index: 250;                  /* above header (100) and cards */
}

/* When open, show the flex overlay */
.svc-lightbox.open {
  display: flex;
}

/* Inner content (image + close button) */
.svc-lightbox-content {
  position: relative;
  max-width: min(1100px, 96vw);
  max-height: 92vh;
  padding: 0;
}

/* Zoomed image */
.svc-lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 92vh;
  border-radius: 16px;
  border: 1px solid #1b2430;
  background: #05070a;
  box-shadow: 0 18px 40px rgba(0,0,0,0.7);
}

/* Close button in top-right of the zoomed image */
.svc-lightbox-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #1b2430;
  background: rgba(5, 7, 10, 0.92);
  color: #e8eef6;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.svc-lightbox-close:hover {
  background: #182131;
  border-color: #233249;
  transform: translateY(-0.5px);
}

.svc-lightbox-close:active {
  transform: translateY(0);
}

/* On very small screens, make sure padding/fit is good */
@media (max-width: 600px) {
  .svc-lightbox-content {
    max-width: 100vw;
    max-height: 92vh;
    padding: 0 8px;
  }
}


/* ===== Data Destruction layout ===== */

.svc-destruction-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: flex-start;
}

.svc-destruction-copy p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 8px;
}

.svc-destruction-sub {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: #c3cde0;
  opacity: 0.95;
}

.svc-destruction-copy ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Right-side abstract “stack” */

.svc-destruction-aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-destruction-block {
  border-radius: 16px;
  border: 1px solid #1b2430;
  background: radial-gradient(circle at 10% 10%, rgba(13,116,245,0.35), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(89,224,11,0.25), transparent 55%),
              #05070a;
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}

.dd-block-1 { height: 120px; opacity: 0.95; }
.dd-block-2 { height: 90px;  opacity: 0.8; }
.dd-block-3 { height: 70px;  opacity: 0.65; }

/* ===== Data Destruction right-side image – match Sustainability style ===== */

.svc-destruction-aside {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px; /* tweak or remove if it feels too pushed in */
  padding-top: 15px;
}

.svc-destruction-lock {
  max-width: 420px;   /* same visual weight as cas_sustain.png */
  width: 100%;
}

.svc-destruction-lock img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;                 /* rounded corners */
  border: 1px solid #05070a;
  background: #05070a;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55);
  filter: none;                        /* remove old heavy drop-shadow */
  opacity: 1;                          /* full-strength image */
}

/* Mobile: stack like Sustainability */
@media (max-width: 900px) {
  .svc-destruction-layout {
    grid-template-columns: 1fr;
  }

  .svc-destruction-aside {
    order: -1;       /* or remove this if you want text first on mobile */
    padding-left: 0;
    margin-bottom: 12px;
  }
}



/* ===== Sustainability layout ===== */

.svc-sustain-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(0, 1.7fr);
  gap: 24px;
  align-items: center;
}

.svc-sustain-copy p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 8px;
}

.svc-sustain-sub {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: #cfe9cf;
  opacity: 0.96;
}

.svc-sustain-copy ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Left-side green “impact band” */

.svc-sustain-aside {
  display: flex;
  justify-content: center;
}

.svc-sustain-band {
  width: 100%;
  max-width: 320px;
  border-radius: 18px;
  border: 1px solid #1a2b1a;
  padding: 18px 14px;
  background:
    radial-gradient(circle at 10% 10%, rgba(89,224,11,0.35), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(13,116,245,0.25), transparent 60%),
    #050a08;
  box-shadow: 0 16px 38px rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
}

/* Simple icon chips (no text; just visual differentiation) */
.svc-sustain-chip {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
  position: relative;
}

.svc-sustain-chip::before,
.svc-sustain-chip::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.svc-sustain-chip::before {
  inset: 4px;
  border: 1px dashed rgba(255,255,255,0.26);
}

.svc-sustain-chip::after {
  inset: 10px;
}

/* Slightly different inner gradients per chip */
.chip-reuse::after {
  background: radial-gradient(circle, rgba(89,224,11,0.95), rgba(89,224,11,0.1));
}

.chip-ghg::after {
  background: radial-gradient(circle, rgba(13,116,245,0.9), rgba(13,116,245,0.08));
}

.chip-landfill::after {
  background: radial-gradient(circle, rgba(144,238,144,0.9), rgba(144,238,144,0.08));
}

/* ===== Responsive tweaks for both sections ===== */

@media (max-width: 900px) {
  .svc-destruction-layout,
  .svc-sustain-layout {
    grid-template-columns: 1fr;
  }

  .svc-destruction-aside {
    order: -1; /* show the visual first on mobile if you prefer; remove if not */
  }

  .svc-sustain-aside {
    order: -1;
  }
}

/* Shared glowing panel shell for services sections */
.svc-panel-shell {
  border-radius: 18px;

  /* thin gradient border */
  border: 2px solid transparent;

  /* inner dark panel + outer gradient border */
  background:
    linear-gradient(180deg, #101419, #0f151d) padding-box,
    linear-gradient(
      135deg,
      var(--blue),
      #e7f1ff,
      var(--green),
      #f2ffe6,
      var(--blue)
    ) border-box;

  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  padding: 22px 20px 24px; /* keep content layout the same */
}

  
.svc-sustain-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: 24px;
  align-items: center;
}

/* Left column with subtle logo */
.svc-sustain-aside {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 24px;
}

.svc-sustain-logo {
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(89,224,11,0.16), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(13,116,245,0.24), transparent 65%),
    url("/assets/logo_website_final.png") center/60% no-repeat;
  opacity: 0.18;  /* super faded – bump up/down if needed */
  box-shadow: 0 18px 36px rgba(0,0,0,0.55);
}

@media (max-width: 900px) {
  .svc-sustain-layout {
    grid-template-columns: 1fr;
  }

  .svc-sustain-aside {
    order: -1;              /* logo above text on mobile */
    padding-right: 0;
    margin-bottom: 8px;
  }
}

/* ===== Simplified Sustainability layout (image on the right) ===== */

.svc-sustain-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: 24px;
  align-items: center;
}

/* Left side (text) stays as you already have it */
.svc-sustain-copy p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 8px;
}

/* New right-side image container */
.svc-sustain-media {
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.svc-sustain-media img {
  display: block;
  width: 100%;
  max-width: 420px;    /* tweak to taste */
  height: auto;
  border-radius: 16px; /* or 0 if you want sharp edges */
  border: 1px solid #1b2430;
  background: #05070a;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55);
}

/* Responsive: stack on mobile */
@media (max-width: 900px) {
  .svc-sustain-layout {
    grid-template-columns: 1fr;
  }

  .svc-sustain-media {
    margin-top: 12px;
  }
}


/* ===== About / Contact tabbed layout (clone of Services, renamed) ===== */

.about-page-shell {
  margin-top: 32px;
  margin-bottom: 40px;
}

/* Outer block */
.about-shell {
  border-radius: 18px;
  border: 1px solid #101822;
  background: linear-gradient(180deg,#101419,#0f151d);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  padding: 0;
}

/* Two-column layout: left tabs + right panels */
.about-layout {
  background: #05070a;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  align-items: flex-start;
}

/* Left nav column */
.about-nav {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 125px;
  align-self: flex-start;
}

/* Tab buttons (independent from .services-tab) */
.about-tab {
  width: 100%;
  text-align: left;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.about-tab:hover {
  color: var(--text);
  background: rgba(15, 21, 29, 0.6);
}

.about-tab.about-tab--active {
  color: var(--text);
  border-left-color: var(--blue);
  background: rgba(15, 21, 29, 0.9);
}

/* Right column: tab panels */
.about-panels {
  padding: 20px 22px;
  border-left: 1px solid #1b2430;
}

/* Panel shell & visibility */
/* About panels are stacked vertically, like Services sections */
.about-panel {
  border-radius: 18px;
  display: block;
  border: 1px solid #1b2430;
  width: 100%;
  min-height: 0;
  margin-bottom: 40px;
  padding-bottom: 32px;
  
  padding: 2px; /* thickness of gradient border */
  background: linear-gradient(
    135deg,
    var(--blue),
    #e7f1ff,
    var(--green),
    #f2ffe6,
    var(--blue)
  );
  box-shadow: 0 22px 45px rgba(0,0,0,0.65);
}

.about-panel:last-of-type {
  margin-bottom: 0;
  padding-bottom: 2px;
  border-bottom: 0;
}


/* Shared panel styling (clone of .svc-panel-shell) */
.about-panel-shell {
  border-radius: 18px;
  border: 1px solid #101822;
  background:
    radial-gradient(900px 420px at 80% 20%, rgba(13,116,245,0.18), transparent 60%),
    radial-gradient(900px 420px at 10% 80%, rgba(89,224,11,0.16), transparent 60%),
    #0f151d;
  padding: 22px 20px 24px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55);
}

/* Typography inside About panels */
.about-title {
  margin: 0 0 12px;
  font-size: 2rem;
  font-weight: 640;
  color: var(--text);
}

.about-panel-shell h2 {
  margin: 22px 0 8px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

.about-panel-shell p {
  margin: 0 0 10px;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--muted);
}

/* Contact panel layout */
.about-intro {
  margin-bottom: 18px;
}

.about-contact-grid {
  display: grid;
  background:
    radial-gradient(900px 420px at 80% 20%, rgba(13,116,245,0.18), transparent 60%),
    radial-gradient(900px 420px at 10% 80%, rgba(89,224,11,0.16), transparent 60%),
    #0f151d;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 6px;
}

/* Contact cards – CAS gradient frame like login & partners */
.about-contact-block {
  border-radius: 16px;

  /* thin gradient border */
  border: 2px solid transparent;

  /* inner dark panel + outer gradient border */
  background:
    linear-gradient(180deg, #05070a, #05070a) padding-box,
    linear-gradient(
      135deg,
      var(--blue),
      #e7f1ff,
      var(--green),
      #f2ffe6,
      var(--blue)
    ) border-box;

  padding: 14px 16px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

@media (max-width: 860px) {
  .partners-page .section .section-head {
    flex-direction: column;
    align-items: flex-start;
  }
}


.about-contact-block h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.about-contact-block p {
  margin: 0 0 10px;
  font-size: 0.94rem;
}

.about-contact-block .btn {
  margin-top: 2px;
}

.about-contact-meta {
  margin-top: 18px;
  font-size: 0.9rem;
}

.about-contact-meta a {
  color: var(--blue);
  text-decoration: none;
}

.about-contact-meta a:hover {
  text-decoration: underline;
}

/* Responsive: stack nav + panels */
@media (max-width: 900px) {
  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px solid #1b2430;
    padding-bottom: 12px;
    position: static;
    top: auto;
  }

  .about-tab {
    flex: 1 1 48%;
    text-align: center;
  }

  .about-panels {
    border-left: none;
    border-top: 1px solid #1b2430;
    padding-top: 16px;
  }

  .about-contact-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== Site Footer ===== */

.site-footer {
  margin-top: 64px;
  padding: 24px 0 32px;
  border-top: 1px solid #161e28; /* subtle divider from page */
  background: #0b0d10;           /* same base tone as site background */
  color: var(--muted);
  font-size: 13px;
}

.footer-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Top row */
.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
  font-size: 15px;
  font-weight: 350;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-nav a {
  text-decoration: none;
  color: var(--muted);
}

.footer-nav a:hover {
  color: var(--text);
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid #1b2430;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.footer-social a:hover {
  background: #182131;
  border-color: #233249;
  transform: translateY(-1px);
}

/* Divider line between rows */
.footer-divider {
  margin: 16px 0 14px;
  border-top: 1.2px solid #151b25;
}

/* Bottom row */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

.footer-links a {
  text-decoration: none;
  color: var(--muted);
}

.footer-links a:hover {
  color: var(--text);
}

.footer-copy {
  margin-top: 28px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 350;
  text-align: left;
}

/* Responsive footer layout */
@media (max-width: 860px) {
  .footer-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-social {
    margin-top: 4px;
  }

  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-copy {
    white-space: normal;
  }
}

/* ===== Services Overview Layout ===== */

.svc-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: center;
}

.svc-overview-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #1b2430;
  background: #0f151d;
  object-fit: cover;
}

/* Right side */
.svc-overview-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
}

.svc-overview-intro {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.svc-overview-values {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svc-overview-values li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
  .svc-overview-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .svc-overview-body {
    padding-right: 0;
  }
}

/* ===== Schedule a Pickup page ===== */

.pickup-page {
  margin-top: 32px;
  margin-bottom: 40px;
}

.pickup-shell {
  border-radius: 18px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #101419, #0f151d) padding-box,
    linear-gradient(
      135deg,
      var(--blue),
      #e7f1ff,
      var(--green),
      #f2ffe6,
      var(--blue)
    ) border-box;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);    
  max-width: 630px;
  margin: 0 auto 32px;
  padding: 24px 24px 28px;
}

.pickup-intro p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
}

.pickup-intro h1 {
  margin: 0 0 18px;
  font-size: 26px;
}

/* Form layout */

.pickup-form {
  margin-top: 8px;
}

.pickup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

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

.field {
  display: flex;
  flex-direction: column;
}

.field-full {
  grid-column: 1 / -1;
}

/* Inputs / selects / textarea styled to match theme */

.pickup-form input,
.pickup-form select,
.pickup-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #1b2430;
  background: #0f151d;
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.pickup-form textarea {
  resize: vertical;
  min-height: 120px;
}

.pickup-form input::placeholder,
.pickup-form textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.pickup-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9aa4b2 50%),
                    linear-gradient(135deg, #9aa4b2 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Focus state */

.pickup-form input:focus,
.pickup-form select:focus,
.pickup-form textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: #233249;
}

/* Make the date-picker icon lighter so it’s visible on the dark field */
.pickup-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(75%) brightness(1.5);
  cursor: pointer;
}


/* Submit row */

.pickup-submit-row {
  margin-top: 20px;
}

.pickup-submit {
  width: 100%;
  justify-content: center;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 550;
    /* NEW: CAS gradient */
  background: linear-gradient(135deg, #0D74F5, #59E00B);
  color: #0b0d10;  /* dark text so it’s readable */
  border: 0;
}

/* Click / hover feedback just for the pickup / consultation submit button */
.pickup-submit {
  cursor: pointer;  /* make it explicit */
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

/* Hover: small lift */
.pickup-submit:hover {
  transform: translateY(-0.5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

/* Active: “pressed” feel while mouse is down */
.pickup-submit:active {
  transform: translateY(0.5px) scale(0.99);
  filter: brightness(0.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55) inset;
}


/* Responsive */

@media (max-width: 760px) {
  .pickup-shell {
    padding: 20px 16px 24px;
  }

  .pickup-grid {
    grid-template-columns: 1fr;
  }
}

.field-label {
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--muted);
}

.field-label.required::after {
  content: " *";
  color: var(--muted); /* subtle asterisk */
}

.field-hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.82;
}

/* Required field asterisk (inside box, top-right) */
.field.required-field {
  position: relative;
}

.field.required-field::after {
  content: "*";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 15px;
  color: var(--muted);
  pointer-events: none;
}



/* Hide the native file control but keep it accessible */
.pickup-form input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Custom “Attach Equipment Information” button */
.file-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid #233249;
  background: #131922;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* Hover / active states */
.file-trigger:hover {
  background: #182131;
  border-color: #2c3a4f;
  transform: translateY(-0.5px);
}

.file-trigger:active {
  transform: translateY(0);
}

.file-count {
  margin-left: 8px;
  font-size: 12px;
  color: var(--muted);
}


/* ===== About page typography ===== */
.about-page {
  margin: 40px auto 80px;
}

/* Centered popup for form messages (success + error) */
.flash {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 9999;

  max-width: 420px;
  width: min(90vw, 420px);

  padding: 18px 24px;
  border-radius: 18px;
  background: #f9fafb;
  color: #111827;
  border: 1px solid #d1d5db;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);

  font-size: 15px;
  text-align: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* visible state – whatever class your JS already toggles */
.flash.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* success / error variants (adapt classnames to what you already use) */
.flash--success {
  background: #ecfdf5;
  border-color: #059669;
  color: #065f46;
}

.flash--error {
  background: #fee2e2;
  border-color: #b91c1c;
  color: #7f1d1d;
}


/* Make all body text larger, same color & weight */
.about-page p,
.about-page li {
  font-size: 1.25rem;         /* a bit bigger than default */
  line-height: 1.7;
  color: var(--muted);         /* same bright text as rest of site */
  font-weight: 400;           /* consistent weight */
}

/* Headings on About */
.about-page h1 {
  font-size: 2.2rem;
  margin-bottom: 16px;
  color: var(--text);
  font-weight: 650;
}

.about-page h2 {
  font-size: 1.4rem;
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--text);
  font-weight: 600;
}

/* Optional: bullets with a bit more breathing room */
.about-page ul {
  padding-left: 1.2rem;
  margin: 10px 0 0;
}

.about-page li {
  margin-bottom: 6px;
}

.about-contact-linkedin {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--muted);
}

.about-contact-linkedin img {
  display: block;
}


.section-founders {
  margin-top: 48px;
}

.founders-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.founder-card {
  background:
    radial-gradient(900px 420px at 80% 20%, rgba(13,116,245,0.18), transparent 60%),
    radial-gradient(900px 420px at 10% 80%, rgba(89,224,11,0.16), transparent 60%),
    #0f151d;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 16px;
  min-height: 500px;
}

.founder-media {
  flex-shrink: 0;
}

.founder-headshot {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  object-fit: cover;
}

.founder-body {
  flex: 1;
}

.founder-name {
  margin: 0 0 4px;
}

.founder-title {
  margin: 0 0 8px;
  font-size: 0.9rem;
  opacity: 0.85;
}

.founder-blurb {
  font-size: 0.9rem;
  margin: 0 0 10px;
}

.founder-details {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.founder-details li + li {
  margin-top: 4px;
}


@media (max-width: 640px) {
  .founder-card {
    flex-direction: row;
  }
}

/* SERVICE AREA PAGE STYLES */

/* Page scaffolding */
.service-area-page {
  width: 100%;
}

/* Hero section */
.service-area-hero {
  padding: 3rem 0 2rem;
}

.service-area-hero .wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.service-area-hero h1 {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
}

.service-area-hero p {
  max-width: 720px;
  line-height: 1.5;
}

/* Content grid: map + checker */
.service-area-content .wrap {
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}

.service-area-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
  gap: 2rem;
  align-items: flex-start;
}

/* Card shells */
.service-area-map-card,
.service-area-checker-card {
  border-radius: 18px;

  /* thin gradient border */
  border: 2px solid transparent;

  /* inner dark panel + outer gradient border */
  background:
    linear-gradient(180deg, #101419, #0f151d) padding-box,
    linear-gradient(
      135deg,
      var(--blue),
      #e7f1ff,
      var(--green),
      #f2ffe6,
      var(--blue)
    ) border-box;

  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  padding: 1.5rem;
  
}

.service-area-map-card h2,
.service-area-checker-card h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Map container */
#service-map {
  width: 100%;
  min-height: 420px;
  border-radius: 0.85rem;
  overflow: hidden;
  margin-top: 0.75rem;
}

/* Leaflet tweaks to match your theme a bit better */
.leaflet-container {
  background: #050608;
}

/* Address form */
#address-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

#address-form label {
  font-weight: 500;
}

#address-input {
  padding: 0.6rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
  color: inherit;
  outline: none;
}

#address-input::placeholder {
  opacity: 0.6;
}

#address-input:focus {
  border-color: var(--accent, #0d74f5);
  box-shadow: 0 0 0 1px rgba(13, 116, 245, 0.4);
}

/* Result messages */
.address-result {
  min-height: 2.4rem;
  display: block;
  font-size: 0.95rem;
  color: #ffffff; /* Base = white */
}

.address-result .distance {
  font-weight: 500;
}

.address-result.ok .distance {
  color: #8dff8f; /* green */
}

.address-result.warn .distance {
  color: #ffd66b; /* yellow */
}

.address-result.error {
  color: #ff8f8f;
}


/* Utility */
.muted {
  opacity: 0.72;
}

.small {
  font-size: 0.85rem;
}

/* Responsive layout */
@media (max-width: 900px) {
  .service-area-layout {
    grid-template-columns: minmax(0, 1fr); /* you already have this */
  }

  /* New: stack with checker first, map second on mobile */
  .service-area-checker-card {
    order: 1;
  }

  .service-area-map-card {
    order: 2;
  }

  #service-map {
    min-height: 360px;
  }
}


/* Service Area card – compact non-hero buttons */
.service-area-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-area-btn {
  flex: 1 1 48%;
  justify-content: center;

  /* compact sizing */
  font-size: 13px;
  padding: 6px 10px;
  min-height: 32px;
  border-radius: 9999px;
}

/* Dark “mid” style clone, but smaller */
.service-area-btn--primary {
  background: #131922;
  color: #e8eef6;
  border: 1.5px solid #9aa4b2;
  font-weight: 400;
}

/* Light “white” style clone, but smaller */
.service-area-btn--secondary {
  background: linear-gradient(150deg,#ffffff,#d3d3d3);
  color: #0b0d10;
  border: 0;
  font-weight: 500;
}

/* Optional: hover state, matching your vibe */
.service-area-btn:hover {
  transform: translateY(-0.5px);
  filter: brightness(1.03);
}



/* ===== Client Portal / Login (Coming Soon) ===== */

.login-page {
  /* center the card within the main content area */
  min-height: calc(100vh - 180px); /* header + a bit of breathing room */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 32px;
  padding-bottom: 40px;
}

.login-shell {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* Gradient frame around the card (Meraki-style, CAS colors) */
.login-frame {
  width: 100%;
  border-radius: 26px;
  padding: 2px; /* thickness of gradient border */
  background: linear-gradient(
    135deg,
    var(--blue),
    #e7f1ff,
    var(--green),
    #f2ffe6,
    var(--blue)
  );
  box-shadow: 0 22px 45px rgba(0,0,0,0.65);
}

.login-card {
  border-radius: 24px;
  background: #05070a;
  padding: 32px 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Eyebrow pill at top of card */
.login-pill {
  align-self: flex-start;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);
}

/* Heading + copy */
.login-heading {
  margin: 6px 0 4px;
  font-size: 24px;
  font-weight: 650;
  color: var(--text);
}

.login-sub {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}

/* Buttons row */
.login-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Primary (disabled) button */
.login-btn-primary {
  flex: 1 1 auto;
  justify-content: center;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 550;
  background: #1a2230;
  color: #9aa4b2;
  opacity: 0.75;
  cursor: not-allowed;
  box-shadow: none;
}

/* Secondary action reuses your mid hero button styles */
.login-btn-secondary {
  flex: 0 0 auto;
  font-size: 14px;
  padding-inline: 18px;
}

/* Brand area at bottom of card */
.login-brand {
  border-top: 1px solid #151b25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.login-brand-mark {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(89, 224, 11, 0), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(13, 117, 245, 0), transparent 70%),
    url("/assets/logo_website_final_cropped2.png") center/60% no-repeat;
  box-shadow: 0 14px 30px rgba(0,0,0,0.6);
}

.login-brand-name {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.login-brand-tagline {
  font-size: 12px;
  color: var(--muted);
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .login-card {
    padding: 24px 20px 20px;
  }

  .login-page {
    padding-top: 24px;
    padding-bottom: 32px;
    min-height: calc(100vh - 140px);
  }
}

/* ===== Inline text links (not buttons) ===== */

/* Base style for links inside paragraphs and lists */
p a:not(.btn),
li a:not(.btn) {
  color: var(--blue);
  text-decoration: none;
}

/* Visited state – softer blue, no purple */
p a:not(.btn):visited,
li a:not(.btn):visited {
  color: var(--blue);
  text-decoration: none;
}

/* Hover – brighter and underlined */
p a:not(.btn):hover,
li a:not(.btn):hover {
  color: var(--green);
  /*color: #e8eef6;*/
  text-decoration: underline;
}

/* Active/clicked */
p a:not(.btn):active,
li a:not(.btn):active {
  color: var(--blue);
  text-decoration: underline;
}