/** Site Theme Tokens **/

:root {
    --core-site-font-body: "IBM Plex Sans", system-ui, sans-serif;
    --core-site-text-base: 17px;
    --core-site-heading-font: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
    --core-site-heading-color: var(--color-graphite);
    --core-site-heading-line-height: 1.06;
    --core-site-heading-weight: 700;
    --core-site-heading-margin: 0;
    --core-site-color-text: var(--color-text);
    --core-accent: var(--color-brand);
    --core-radius: 2px;
}
body { font-family: var(--core-site-font-body); }
html { font-size: var(--core-site-text-base); }
h1, h2, h3, h4, h5, h6 { font-family: var(--core-site-heading-font); }
h1, h2, h3, h4, h5, h6 { color: var(--core-site-heading-color); }
h1, h2, h3, h4, h5, h6 { line-height: var(--core-site-heading-line-height); }
h1, h2, h3, h4, h5, h6 { font-weight: var(--core-site-heading-weight); }
h1, h2, h3, h4, h5, h6 { margin-block: var(--core-site-heading-margin); }
body { color: var(--core-site-color-text); }


/** Site Custom Stylesheet (From File) **/ 



 /** Site Custom Styles (From DB) **/ 

/* ===== Colour palette (VectorOps) ===== */ :root  {
  /* Brand orange (the accent, used widely) */ --color-orange: #d87828;
  --color-orange-light: #e89a55;
  --color-orange-dark: #b35f1c;
  --color-orange-darker: #8f4b16;
  /* Graphite (near-black, warm) — primary dark surfaces & text */ --color-graphite: #17150f;
  --color-graphite-light: #2a2720;
  --color-graphite-lighter:#3c3830;
  /* Steel (warm grey from the mark) — soft neutral surfaces */ --color-steel: #d8c8b8;
  --color-steel-light: #e7ded2;
  --color-steel-lighter: #efe9df;
  --color-steel-dark: #bca98f;
  /* Cream — page-warm light surface */ --color-cream: #f6f2ea;
  --color-cream-warm: #efe7da;
  /* Semantic anchors */ --color-brand: var(--color-orange);
  --color-text: #1c1a14;
  --color-bg: #ffffff;
}
/* ===== Background utilities ===== */ .bg-orange  {
  background-color: var(--color-orange);
}
.bg-orange-dark  {
  background-color: var(--color-orange-dark);
}
.bg-orange-darker  {
  background-color: var(--color-orange-darker);
}
.bg-graphite  {
  background-color: var(--color-graphite);
}
.bg-graphite-light  {
  background-color: var(--color-graphite-light);
}
.bg-steel  {
  background-color: var(--color-steel);
}
.bg-steel-light  {
  background-color: var(--color-steel-light);
}
.bg-steel-lighter  {
  background-color: var(--color-steel-lighter);
}
.bg-cream  {
  background-color: var(--color-cream);
}
.bg-cream-warm  {
  background-color: var(--color-cream-warm);
}
/* ===== Smooth in-page scrolling (anchor nav) ===== */ html  {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce)  {
  html  {
    scroll-behavior: auto;
  }
}
/* Offset anchor targets so the sticky header doesn't cover the top of the
   section jumped to (buffer ~ header height) */ .content-section[id]  {
  scroll-margin-top: 96px;
}
/* ===== Base typography extras (fonts/sizes/heading defaults live in theme tokens) ===== */ body  {
  background: var(--color-bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4  {
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.eyebrow, .btn, .logo, .step-num, .stat-num  {
  font-family: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
}
p  {
  margin: 0;
}
a  {
  color: inherit;
}
@media (max-width: 767px)  {
  body  {
    font-size: 16px;
  }
}
/* ===== Shared text components (used across many sections) ===== */ .eyebrow  {
  display: inline-block;
  font-size: var(--text-size-2xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-orange-dark);
  margin-bottom: 1.1rem;
}
.section-intro  {
  max-width: 60ch;
  font-size: var(--text-size-xl);
  line-height: 1.55;
  color: #4a463c;
  margin-top: 1.25rem;
}
/* ===== Buttons (used in header, hero, callout, mobile menu) ===== */ .btn  {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border-radius: 2px;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.btn:hover  {
  transform: translateY(-1px);
}
.btn-primary  {
  background: var(--color-orange);
  color: #fff;
}
.btn-primary:hover  {
  background: var(--color-orange-dark);
}
.btn-ghost  {
  background: transparent;
  color: var(--color-graphite);
  border-color: rgba(23,21,15,0.25);
}
.btn-ghost:hover  {
  border-color: var(--color-orange);
  color: var(--color-orange-dark);
}
.btn-light  {
  background: #fff;
  color: var(--color-graphite);
}
.btn-light:hover  {
  background: var(--color-steel-light);
}
.btn-outline-light  {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.btn-outline-light:hover  {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}
.btn .arrow  {
  font-size: 1.05em;
  line-height: 0;
  transition: transform 0.18s ease;
}
.btn:hover .arrow  {
  transform: translateX(3px);
}


 /** Content Section Styles **/ 

.content-section-2507  {
  background: rgba(255,255,255,0.94);
  &.content-section  {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--color-steel-light);
    transition: box-shadow 0.25s ease;
  }
  /* Frosted glass on a pseudo-element so the fixed mobile-menu overlay
   isn't trapped by backdrop-filter on a menu ancestor */ &.content-section::before  {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: none;
  }
  .content-section-inner  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    transition: padding-top 0.25s ease, padding-bottom 0.25s ease;
  }
  .logo  {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
  }
  .logo .logo-mark  {
    height: 62px;
    width: auto;
    display: block;
    transition: height 0.25s ease;
  }
  .logo .logo-word  {
    height: 34px;
    width: auto;
    display: block;
    transition: height 0.25s ease;
  }
  .site-nav  {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .core-menu-link  {
    font-weight: 500;
  }
  /* Shrunk state — applied once the page is scrolled a little */ &.content-section.is-shrunk  {
    box-shadow: 0 2px 14px rgba(23,21,15,0.10);
  }
  &.content-section.is-shrunk .content-section-inner  {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  &.content-section.is-shrunk .logo .logo-mark  {
    height: 46px;
  }
  &.content-section.is-shrunk .logo .logo-word  {
    height: 26px;
  }
  @media (max-width: 767px)  {
    /* Source hides the header CTA on mobile; the same CTA is available in the
   mobile menu overlay (mobile-overlay-bottom slot on the main menu) */ .header-cta  {
      display: none;
    }
  }
}
.content-section-2508  {
  &.content-section  {
    color: #cfc7b8;
  }
  .footer-grid  {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3rem;
  }
  .footer-logo img  {
    height: 130px;
    width: auto;
  }
  .footer-tag  {
    margin-top: 1.2rem;
    max-width: 32ch;
    font-size: var(--text-size-sm);
    color: #a39a8a;
    line-height: 1.55;
  }
  .footer-social  {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.4rem;
    text-decoration: none;
    color: #cfc7b8;
    font-size: var(--text-size-sm);
    font-weight: 500;
    transition: color 0.15s;
  }
  .footer-social svg  {
    display: block;
    flex: 0 0 auto;
  }
  .footer-social:hover  {
    color: var(--color-orange-light);
  }
  .footer-col h4  {
    color: #fff;
    font-size: var(--text-size-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    font-weight: 700;
  }
  .footer-col ul, .footer-col .core-menu-list  {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .footer-col a  {
    text-decoration: none;
    color: #cfc7b8;
    font-size: var(--text-size-sm);
    transition: color 0.15s;
  }
  .footer-col a:hover  {
    color: var(--color-orange-light);
  }
  /* Wrapper keeps the reveal (and the revealed mailto link) on its own line */ .footer-eml-wrap  {
    display: block;
  }
  /* Email reveal styled as a subtle link with an envelope icon (no underline) */ .footer-eml.eml-link  {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.3rem;
    padding: 0.15rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #cfc7b8;
    font-family: inherit;
    font-size: var(--text-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
  }
  .footer-eml.eml-link:hover  {
    color: var(--color-orange-light);
  }
  .footer-eml.eml-link .eml-ico  {
    flex: 0 0 auto;
    display: block;
    opacity: 0.8;
  }
  .footer-bottom  {
    margin-top: 3rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--color-graphite-lighter);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--text-size-xs);
    color: #8c8474;
  }
  @media (max-width: 767px)  {
    .footer-grid  {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  }
}
.content-section-2509  {
  background: linear-gradient(100deg, rgba(13,11,8,0.95) 0%, rgba(13,11,8,0.82) 48%, rgba(13,11,8,0.50) 100%), url('/site-assets/images/hero.png') center / cover no-repeat;
  &.content-section  {
    position: relative;
    color: #ffffff;
    min-height: 84vh;
    display: flex;
    align-items: center;
  }
  .content-section-inner  {
    width: 100%;
  }
  .hero-inner  {
    max-width: 56rem;
  }
  .eyebrow  {
    color: var(--color-orange-light);
  }
  h1  {
    color: #fff;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 800;
    line-height: 1.02;
  }
  h1 .accent  {
    color: var(--color-orange);
  }
  .hero-lede  {
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    line-height: 1.55;
    color: #d9d2c5;
    max-width: 50ch;
    margin-top: 1.6rem;
  }
  .hero-actions  {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2.4rem;
  }
  .hero-note  {
    margin-top: 1.8rem;
    font-size: var(--text-size-xs);
    color: #aaa294;
    letter-spacing: 0.01em;
  }
  @media (max-width: 767px)  {
    &.content-section  {
      min-height: 78vh;
    }
  }
}
.content-section-2510  {
  h2  {
    font-size: clamp(2rem, 3.6vw, 3rem);
  }
  .section-head  {
    max-width: 62rem;
    margin-bottom: 3.2rem;
  }
  .problem-grid  {
    gap: 1.5rem;
  }
  .problem-card  {
    background: #fff;
    border: 1px solid var(--color-steel-light);
    border-top: 3px solid var(--color-orange);
    padding: 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .problem-card h3  {
    font-size: var(--text-size-xl);
    font-weight: 700;
  }
  .problem-card p  {
    color: #565045;
    font-size: var(--text-size-sm);
    line-height: 1.55;
  }
  .problem-card .pc-mark  {
    font-family: "Archivo", sans-serif;
    font-size: var(--text-size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--color-orange-dark);
    margin-bottom: 0.4rem;
  }
  @media (max-width: 1023px)  {
    .problem-grid  {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 767px)  {
    .problem-grid  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2511  {
  &.content-section  {
    color: #f3ede2;
  }
  h2  {
    color: #fff;
    font-size: clamp(2rem, 3.6vw, 3rem);
  }
  .eyebrow  {
    color: var(--color-orange-light);
  }
  .section-head  {
    margin-bottom: 3.2rem;
  }
  .section-intro  {
    color: #cfc7b8;
  }
  .service-grid  {
    gap: 0;
    border-top: 1px solid var(--color-graphite-lighter);
  }
  .service-item  {
    padding: 2.4rem 0;
    border-bottom: 1px solid var(--color-graphite-lighter);
    display: grid;
    grid-template-columns: 5rem 1fr 1.6fr;
    gap: 2rem;
    align-items: baseline;
  }
  .service-item .service-num  {
    font-family: "Archivo", sans-serif;
    font-size: var(--text-size-2xl);
    font-weight: 800;
    color: var(--color-orange);
  }
  .service-item h3  {
    font-size: var(--text-size-3xl);
    font-weight: 700;
    color: #fff;
  }
  .service-item p  {
    color: #cfc7b8;
    font-size: var(--text-size-reg);
    line-height: 1.6;
  }
  @media (max-width: 1023px)  {
    .service-item  {
      grid-template-columns: 3.5rem 1fr;
    }
    .service-item p  {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 767px)  {
    .service-item  {
      grid-template-columns: 1fr;
      gap: 0.6rem;
    }
  }
}
.content-section-2512  {
  h2  {
    font-size: clamp(2rem, 3.6vw, 3rem);
  }
  .section-head  {
    margin-bottom: 3rem;
    max-width: 62rem;
  }
  .audience-list  {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
    row-gap: 0;
  }
  .audience-list li  {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-steel);
    font-size: var(--text-size-lg);
    font-weight: 500;
    color: var(--color-graphite);
  }
  .audience-list li::before  {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-top: 0.55rem;
    background: var(--color-orange);
    transform: rotate(45deg);
  }
  @media (max-width: 767px)  {
    .audience-list  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2513  {
  h2  {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
  }
  .expertise-grid  {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: center;
  }
  .expertise-photo  {
    aspect-ratio: 4 / 5;
    background: url('/site-assets/images/why-vectorops.png') center top / cover no-repeat;
    border-bottom: 4px solid var(--color-orange);
  }
  .section-intro  {
    margin-bottom: 2rem;
  }
  .cred-list  {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .cred-list li  {
    display: flex;
    gap: 1.1rem;
    padding: 1.15rem 0;
    border-top: 1px solid var(--color-steel-light);
    font-size: var(--text-size-reg);
    color: #3a362d;
    line-height: 1.5;
  }
  .cred-list li:last-child  {
    border-bottom: 1px solid var(--color-steel-light);
  }
  .cred-list .cn  {
    flex: 0 0 auto;
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    color: var(--color-orange);
    width: 4.6rem;
    white-space: nowrap;
  }
  @media (max-width: 1023px)  {
    .expertise-grid  {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .expertise-photo  {
      aspect-ratio: 16 / 10;
    }
  }
}
.content-section-2514  {
  h2  {
    font-size: clamp(2rem, 3.6vw, 3rem);
  }
  .section-head  {
    margin-bottom: 3.2rem;
    max-width: 60rem;
  }
  .step-grid  {
    gap: 2.5rem;
  }
  .step  {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  .step-num  {
    font-size: var(--text-size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--color-orange-dark);
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-orange);
    margin-bottom: 0.4rem;
  }
  .step h3  {
    font-size: var(--text-size-xl);
    font-weight: 700;
  }
  .step p  {
    color: #565045;
    font-size: var(--text-size-sm);
    line-height: 1.55;
  }
  @media (max-width: 1023px)  {
    .step-grid  {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 767px)  {
    .step-grid  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2515  {
  h2  {
    font-size: clamp(2rem, 3.6vw, 3rem);
  }
  .section-head  {
    margin-bottom: 2.6rem;
    max-width: 60rem;
  }
  .core-accordion-01 details  {
    border: 1px solid var(--color-steel-light);
    background: #fff;
  }
  .core-accordion-01 > * + *  {
    margin-top: 0.9rem;
  }
  .core-accordion-01 summary  {
    font-family: "Archivo", sans-serif;
    font-size: var(--text-size-xl);
    color: var(--color-graphite);
  }
  .core-accordion-01 details p  {
    color: #000000;
    font-size: 18px;
    line-height: 1.6;
    max-width: 70ch;
  }
}
.content-section-2516  {
  &.content-section  {
    color: #f3ede2;
  }
  h2  {
    color: #fff;
    font-size: clamp(2rem, 3.6vw, 3rem);
  }
  .eyebrow  {
    color: var(--color-orange-light);
  }
  .locale-grid  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
  .locale-intro  {
    font-size: var(--text-size-xl);
    line-height: 1.55;
    color: #d9d2c5;
    margin-top: 1.5rem;
  }
  .locale-points  {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
  }
  .locale-points li  {
    padding: 1.1rem 0;
    border-top: 1px solid var(--color-graphite-lighter);
    display: flex;
    gap: 0.9rem;
    align-items: center;
    color: #cfc7b8;
    font-size: var(--text-size-reg);
  }
  .locale-points li::before  {
    content: "";
    width: 9px;
    height: 9px;
    background: var(--color-orange);
    transform: rotate(45deg);
    flex: 0 0 auto;
  }
  @media (max-width: 1023px)  {
    .locale-grid  {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
  }
}
.content-section-2517  {
  background: linear-gradient(180deg, rgba(143,75,22,0.96), rgba(179,95,28,0.92)), url('/site-assets/images/cta.jpg') center / cover no-repeat;
  &.content-section  {
    color: #fff;
  }
  .callout-grid  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
  .eyebrow  {
    color: #ffe2c4;
  }
  .eyebrow::before  {
    background: #fff;
  }
  h2  {
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
  }
  .callout-lede  {
    font-size: var(--text-size-xl);
    line-height: 1.55;
    color: #ffeede;
    margin-top: 1.3rem;
    max-width: 42ch;
  }
  .callout-contact  {
    margin-top: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: var(--text-size-reg);
  }
  .callout-contact a  {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
  }
  /* Email reveal styled as a subtle link with an envelope icon (no underline) */ .callout-contact .eml-link  {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
    padding: 0.15rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: var(--text-size-reg);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .callout-contact .eml-link:hover  {
    color: #ffe2c4;
  }
  .callout-contact .eml-link .eml-ico  {
    flex: 0 0 auto;
    display: block;
    opacity: 0.85;
  }
  .callout-contact .lbl  {
    color: #ffd8b3;
    font-size: var(--text-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .callout-contact .lbl-sp  {
    margin-top: 0.8rem;
  }
  .callback-card  {
    background: #fff;
    color: var(--color-text);
    padding: 2.6rem;
    border-radius: 2px;
  }
  .callback-card h3  {
    font-size: var(--text-size-2xl);
    margin-bottom: 1.4rem;
    color: var(--color-graphite);
  }
  @media (max-width: 1023px)  {
    .callout-grid  {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
  }
  @media (max-width: 767px)  {
    .callback-card  {
      padding: 1.8rem;
    }
  }
}