/* ==========================================================================
   VELOCITY TELEMARKETING — PIXEL MASTER CSS
   Visual target: approved-design-reference.png
   Images expected in ./images/
   ========================================================================== */

:root {
  --v-ink: #0c1d34;
  --v-text: #253952;
  --v-muted: #65758a;
  --v-blue: #066be8;
  --v-blue-dark: #064da8;
  --v-line: #dfe7ef;
  --v-soft: #f7faff;
  --v-white: #ffffff;

  --v-max: 1440px;
  --v-gutter: clamp(28px, 5.15vw, 74px);

  --v-radius-button: 999px;
  --v-radius-panel: 10px;

  --v-ease: cubic-bezier(.16, 1, .3, 1);
  --v-shadow-button:
    0 8px 20px rgba(5, 78, 168, .12),
    0 20px 40px rgba(5, 78, 168, .08);
}

/* ---------- reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 82px;
}

body {
  margin: 0;
  background: #fff;
  color: var(--v-ink);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* ---------- master width ---------- */

.site-header,
main > section,
.capability-strip,
.footer {
  width: min(100%, var(--v-max));
  margin-inline: auto;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  height: 82px;

  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  border-bottom: 1px solid transparent;

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(20,47,77,.08);
  box-shadow: 0 8px 28px rgba(27,52,80,.045);
}

.nav-shell {
  height: 100%;
  padding-inline: var(--v-gutter);

  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  flex: 0 0 auto;
  line-height: 1;
}

.brand-main {
  font-size: 31px;
  font-weight: 400;
  letter-spacing: .04em;
}

.brand-sub {
  margin-top: 7px;

  font-size: 9px;
  font-weight: 650;
  letter-spacing: .19em;

  color: #687990;
}

.desktop-nav {
  margin-left: auto;

  display: flex;
  align-items: center;
  gap: 31px;
}

.desktop-nav a {
  position: relative;

  font-size: 12px;
  font-weight: 450;

  color: #4e6077;
}

.desktop-nav a::after {
  content: "";

  position: absolute;
  left: 0;
  right: 100%;
  bottom: -12px;

  height: 1px;

  background: var(--v-blue);

  transition: right 260ms var(--v-ease);
}

.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
  right: 0;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.phone-link {
  font-size: 12px;
  font-weight: 650;
  color: #1b314c;
}

/* ==========================================================================
   BUTTONS — APPROVED LOOK
   one continuous blue button, never a hard split
   ========================================================================== */

.split-button,
.outline-button {
  position: relative;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  border-radius: var(--v-radius-button);

  overflow: hidden;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transform: translate3d(0,0,0);

  transition:
    transform 220ms var(--v-ease),
    box-shadow 220ms var(--v-ease),
    border-color 220ms ease,
    color 220ms ease;
}

.split-button {
  color: #fff;

  border: 1px solid rgba(6,88,193,.16);

  background:
    linear-gradient(
      103deg,
      #06499e 0%,
      #0657bc 50%,
      #0775ed 100%
    );

  background-size: 145% 100%;
  background-position: 0 50%;

  box-shadow: var(--v-shadow-button);

  transition:
    transform 220ms var(--v-ease),
    box-shadow 220ms var(--v-ease),
    background-position 600ms var(--v-ease);
}

.split-button::before {
  content: "";

  position: absolute;
  inset: 1px;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.025) 45%,
      rgba(255,255,255,0) 70%
    );
}

.split-button::after {
  content: "";

  position: absolute;

  top: -35%;
  left: -42%;

  width: 29%;
  height: 175%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.17),
      transparent
    );

  opacity: 0;

  pointer-events: none;

  transform: skewX(-18deg) translateX(-240%);

  transition:
    opacity 180ms ease,
    transform 720ms var(--v-ease);
}

.split-button > span:first-child {
  position: relative;
  z-index: 2;

  padding: 0 8px 0 23px;

  font-size: 13px;
  line-height: 1;
  font-weight: 650;

  white-space: nowrap;
}

.split-button__tail {
  position: relative;
  z-index: 2;

  width: 43px;
  min-width: 43px;
  height: 46px;

  display: grid;
  place-items: center;

  background: transparent !important;

  font-size: 17px;
  line-height: 1;

  transition:
    transform 260ms var(--v-ease);
}

.split-button--small {
  min-height: 40px;
}

.split-button--small > span:first-child {
  padding-left: 18px;
  font-size: 11px;
}

.split-button--small .split-button__tail {
  width: 37px;
  min-width: 37px;
  height: 38px;
  font-size: 15px;
}

.outline-button {
  min-height: 48px;

  padding: 0 21px;

  gap: 9px;

  color: #152941;

  background: rgba(255,255,255,.95);

  border: 1px solid #b9c6d4;

  font-size: 13px;
  font-weight: 600;
}

@media (hover:hover) and (pointer:fine) {
  .split-button:hover {
    transform: translateY(-2px);

    background-position: 100% 50%;

    box-shadow:
      0 10px 24px rgba(5,78,168,.16),
      0 22px 42px rgba(5,78,168,.12);
  }

  .split-button:hover::after {
    opacity: 1;
    transform: skewX(-18deg) translateX(620%);
  }

  .split-button:hover .split-button__tail {
    transform: translateX(3px);
  }

  .outline-button:hover {
    transform: translateY(-2px);

    color: var(--v-blue);

    border-color: #879db5;

    box-shadow:
      0 8px 20px rgba(27,55,88,.075),
      0 18px 34px rgba(27,55,88,.045);
  }

  .outline-button:hover span:last-child {
    transform: translateX(4px);
  }
}

.split-button:active,
.outline-button:active {
  transform: scale(.975);
  transition-duration: 80ms;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  min-height: 602px;

  display: grid;
  grid-template-columns: 44% 56%;

  overflow: hidden;
}

.hero-copy {
  padding:
    94px
    30px
    50px
    var(--v-gutter);
}

.eyebrow {
  margin: 0 0 26px;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;

  color: #75869a;
}

.hero h1 {
  margin: 0;

  max-width: 620px;

  font-size: clamp(58px, 4.75vw, 69px);
  line-height: .995;
  letter-spacing: -.047em;
  font-weight: 390;
}

.hero h1 em {
  color: var(--v-blue);
  font-style: normal;
}

.hero-lede {
  max-width: 510px;

  margin: 29px 0 27px;

  font-size: 15px;
  line-height: 1.5;

  color: var(--v-text);
}

.button-row {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.trust-row {
  margin-top: 34px;
  padding-top: 22px;

  display: flex;
  align-items: center;
  gap: 29px;

  border-top: 1px solid #e6edf3;
}

.trust-row span {
  display: flex;
  align-items: center;
  gap: 8px;

  white-space: nowrap;

  font-size: 10px;

  color: #586a80;
}

.trust-row svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: var(--v-blue);
  stroke-width: 1.6;
}

.hero-media {
  position: relative;

  min-height: 602px;

  overflow: hidden;

  background: #edf3f7;
}

.hero-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}

.media-note {
  position: absolute;

  right: 34px;
  bottom: 75px;

  width: 185px;

  padding: 24px;

  background: rgba(255,255,255,.88);

  border-radius: var(--v-radius-panel);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 18px 38px rgba(22,50,79,.07);
}

.media-note span,
.statement-card span,
.careers-overlay span,
.contact-note span {
  display: block;

  font-size: 13px;
  line-height: 1.5;
}

.media-note i,
.statement-card i,
.careers-overlay i,
.contact-note i {
  display: block;

  width: 31px;
  height: 1px;

  margin-top: 20px;

  background: var(--v-blue);
}

/* ==========================================================================
   CAPABILITY STRIP
   ========================================================================== */

.capability-strip {
  min-height: 150px;

  padding-inline: var(--v-gutter);

  display: grid;
  grid-template-columns: repeat(5,1fr);

  border-top: 1px solid var(--v-line);
  border-bottom: 1px solid var(--v-line);

  background: #fff;
}

.capability-strip a {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 17px;

  font-size: 15px;
  line-height: 1.25;
}

.capability-strip a:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 31%;
  bottom: 31%;
  right: 0;

  width: 1px;

  background: var(--v-line);
}

.capability-strip svg,
.service-item svg {
  width: 30px;
  height: 30px;

  fill: none;
  stroke: var(--v-blue);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   SPECIALIST FEATURE
   ========================================================================== */

.split-feature {
  min-height: 400px;

  display: grid;
  grid-template-columns: 46% 54%;

  border-bottom: 1px solid var(--v-line);

  background: #fff;
}

.split-feature__copy {
  align-self: center;

  padding:
    60px
    48px
    58px
    var(--v-gutter);
}

.split-feature h2,
.services h2,
.technology h2,
.faq h2 {
  margin: 0;

  font-size: 43px;
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 390;
}

.split-feature__copy p,
.technology-intro > p:last-child {
  max-width: 595px;

  margin: 23px 0 18px;

  font-size: 15px;
  line-height: 1.55;

  color: var(--v-muted);
}

.text-link {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap: 9px;

  color: var(--v-blue);

  font-size: 13px;
  font-weight: 650;
}

.text-link span {
  transition: transform 260ms var(--v-ease);
}

.text-link:hover span {
  transform: translateX(4px);
}

.split-feature__media {
  position: relative;

  min-height: 400px;

  overflow: hidden;
}

.split-feature__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.statement-card {
  position: absolute;

  left: 33px;
  top: 50%;

  width: 180px;

  padding: 25px;

  transform: translateY(-50%);

  background: rgba(255,255,255,.9);

  border-radius: var(--v-radius-panel);

  backdrop-filter: blur(10px);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services {
  padding:
    49px
    var(--v-gutter)
    54px;

  border-bottom: 1px solid var(--v-line);
}

.services .eyebrow,
.technology .eyebrow,
.careers .eyebrow,
.faq .eyebrow,
.process .eyebrow,
.contact .eyebrow {
  margin-bottom: 16px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.services h2 {
  font-size: 41px;
}

.service-grid {
  margin-top: 39px;

  display: grid;
  grid-template-columns: repeat(5,1fr);
}

.service-item {
  position: relative;

  min-height: 190px;

  padding-right: 36px;
}

.service-item:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  right: 19px;

  width: 1px;

  background: var(--v-line);
}

.service-item h3 {
  margin: 17px 0 11px;

  font-size: 15px;
  font-weight: 650;
}

.service-item p {
  max-width: 180px;

  margin: 0;

  color: #68778a;

  font-size: 12px;
  line-height: 1.48;
}

/* ==========================================================================
   PROCESS
   ========================================================================== */

.process {
  min-height: 348px;

  display: grid;
  grid-template-columns: 44.5% 55.5%;

  border-bottom: 1px solid var(--v-line);
}

.process-media {
  position: relative;

  overflow: hidden;
}

.process-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.process-media blockquote {
  position: absolute;

  left: 64px;
  top: 67px;

  width: 176px;

  margin: 0;

  font-size: 13px;
  line-height: 1.5;
}

.process-copy {
  align-self: center;

  padding:
    48px
    var(--v-gutter)
    42px
    66px;
}

.process-copy h2 {
  margin: 0;

  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 390;
}

.steps {
  margin: 34px 0 22px;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(5,1fr);

  list-style: none;
}

.steps li {
  position: relative;

  padding-right: 17px;
}

.steps li:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;

  width: 1px;

  background: var(--v-line);
}

.steps b {
  display: block;

  margin-bottom: 12px;

  color: var(--v-blue);

  font-size: 13px;
}

.steps span {
  font-size: 12px;
  line-height: 1.35;
}

/* ==========================================================================
   TECHNOLOGY
   ========================================================================== */

.technology {
  padding:
    51px
    var(--v-gutter)
    46px;

  display: grid;
  grid-template-columns: 47% 53%;
  gap: 65px;

  border-bottom: 1px solid var(--v-line);
}

.technology h2 {
  font-size: 39px;
}

.feature-list {
  margin: 3px 0 0;
  padding: 0;

  display: grid;
  gap: 4px;

  list-style: none;
}

.feature-list li {
  position: relative;

  padding: 3px 0 3px 27px;

  color: #53647a;

  font-size: 12px;
  line-height: 1.35;
}

.feature-list li::before {
  content: "✓";

  position: absolute;
  left: 0;
  top: 3px;

  width: 18px;
  height: 18px;

  display: grid;
  place-items: center;

  border: 1.4px solid var(--v-blue);
  border-radius: 50%;

  color: var(--v-blue);

  font-size: 9px;
  font-weight: 800;
}

/* ==========================================================================
   CAREERS
   ========================================================================== */

.careers {
  min-height: 340px;

  display: grid;
  grid-template-columns: 49% 51%;

  border-bottom: 1px solid var(--v-line);
}

.careers-copy {
  align-self: center;

  padding:
    46px
    38px
    44px
    var(--v-gutter);
}

.careers-copy h2 {
  margin: 0 0 15px;

  font-size: 34px;
  line-height: 1.02;
  font-weight: 390;
}

.careers-copy > p {
  max-width: 540px;

  margin: 0 0 19px;

  color: var(--v-muted);

  font-size: 13px;
  line-height: 1.5;
}

.careers-media {
  position: relative;

  overflow: hidden;
}

.careers-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.careers-overlay {
  position: absolute;

  right: 42px;
  top: 50%;

  transform: translateY(-50%);

  color: #fff;

  text-shadow: 0 1px 8px rgba(0,0,0,.18);
}

.careers-overlay i {
  background: #fff;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  padding:
    40px
    var(--v-gutter)
    42px;

  border-bottom: 1px solid var(--v-line);
}

.faq h2 {
  font-size: 34px;
}

.faq-grid {
  margin-top: 25px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 66px;

  border-top: 1px solid var(--v-line);
}

details {
  border-bottom: 1px solid var(--v-line);
}

summary {
  position: relative;

  padding: 15px 30px 15px 0;

  list-style: none;

  cursor: pointer;

  font-size: 12px;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";

  position: absolute;
  right: 3px;
  top: 12px;

  color: #61728a;

  font-size: 20px;
  font-weight: 300;
}

details[open] summary::after {
  content: "×";
}

details p {
  margin: -2px 0 15px;

  padding-right: 25px;

  color: #65758a;

  font-size: 12px;
  line-height: 1.5;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact {
  position: relative;

  min-height: 255px;

  padding:
    42px
    var(--v-gutter);

  display: flex;
  align-items: flex-start;

  overflow: hidden;
}

.contact-bg {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(230,245,255,.97) 0%,
      rgba(204,232,253,.88) 48%,
      rgba(180,219,247,.50) 100%
    ),
    url("./images/contact-mountain.jpg")
      center 60%
      / cover
      no-repeat;
}

.contact-inner {
  position: relative;
  z-index: 1;

  max-width: 660px;
}

.contact h2 {
  margin: 0;

  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 390;
}

.contact-inner > p:not(.eyebrow) {
  margin: 16px 0 22px;

  color: #53647b;

  font-size: 12px;
}

.contact-note {
  position: absolute;
  z-index: 1;

  right: var(--v-gutter);
  top: 52px;

  width: 180px;

  padding: 23px;

  background: rgba(255,255,255,.88);

  border-radius: var(--v-radius-panel);

  backdrop-filter: blur(10px);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  padding:
    30px
    var(--v-gutter)
    22px;

  background: #fff;
}

.footer-top {
  padding-bottom: 25px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  gap: 25px;

  border-bottom: 1px solid var(--v-line);
}

.footer-contact {
  display: flex;
  align-items: center;
  gap: 15px;

  color: #596b80;

  font-size: 10px;
}

.footer-contact span {
  width: 1px;
  height: 17px;

  background: var(--v-line);
}

.footer nav {
  justify-self: end;

  display: flex;
  gap: 20px;
}

.footer nav a {
  color: #586a7f;

  font-size: 10px;
}

.footer-bottom {
  padding-top: 18px;

  display: flex;
  justify-content: space-between;

  color: #7b899b;

  font-size: 9px;
}

/* ==========================================================================
   SITE FIXES - for this page's base CSS, which the pack does not cover
   ========================================================================== */

/* .split-feature also carries .section-pad, whose clamp(72px,7vw,112px) padding
   would wrap the entire grid. The pack pads .split-feature__copy instead. */
.split-feature {
  padding: 0;
}

/* The base CSS pins these panels taller than the pack's section min-heights.
   Zero them and let each grid row take its height from the copy column. */
.process-media,
.careers-media {
  min-height: 0;
}

/* Photos are taken out of flow so they fill a min-height-only container:
   a percentage height against an indefinite container computes to auto, so
   each photo would otherwise drive its own panel from its intrinsic ratio. */
.hero-media img,
.split-feature__media img,
.process-media img,
.careers-media img {
  position: absolute;
  inset: 0;
}

/* Every source frames the subject with the head near the top edge, so cover()'s
   centred crop takes half its overflow off the top and decapitates people:
   hero 433px of overflow, split-feature 203px, process 125px, careers 98px.
   Anchor all four to the top so the crop comes off the bottom - desks and
   torsos - instead of faces. */
.hero-media img,
.split-feature__media img,
.process-media img,
.careers-media img {
  object-position: center top;
}

/* The careers copy column holds an expandable details panel. Open, the grid row
   grows from 340px to 1050px and the media column stretched with it, so cover()
   scaled the 1468x873 photo into a 734x1050 slot: a 1.2x upscale showing only
   41% of the frame - one face filling the panel, soft, with the white overlay
   caption sitting across it. Hold the panel at the band's designed proportion
   (the 734x339 it has collapsed, so the default state is untouched) and let it
   stick under the header while the long copy scrolls past.
   Desktop only: below 900px the band is single-column, the media is its own
   340px row and never stretches. */
@media (min-width: 901px) {
  .careers-media {
    align-self: start;
    aspect-ratio: 734 / 339;
    position: sticky;
    top: var(--nav-h);
  }
}

/* The replacement careers photograph puts a brightly lit face directly under the
   right-hand caption, where the previous one had dark hair. Position and type
   are untouched - this is only enough shadow to hold white text against skin. */
.careers-overlay {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 16px rgba(0, 0, 0, .4);
}

/* That white/ice column gradient is a two-column device. Below 900px the grid
   collapses to one column but the 48% split stayed put, so a hard vertical seam
   ran down the middle of the careers copy. */
@media (max-width: 900px) {
  .careers {
    background: #fff;
  }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --v-gutter: 24px;
  }

  .desktop-nav,
  .phone-link,
  .nav-actions .split-button {
    display: none;
  }

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

  .hero-copy {
    padding-top: 66px;
  }

  .hero h1 {
    font-size: clamp(48px, 11vw, 68px);
  }

  .hero-media {
    min-height: 520px;
  }

  .capability-strip {
    grid-template-columns: 1fr;
    padding-block: 8px;
  }

  .capability-strip a {
    justify-content: flex-start;
    min-height: 68px;
    border-bottom: 1px solid var(--v-line);
  }

  .capability-strip a::after {
    display: none;
  }

  .split-feature,
  .process,
  .technology,
  .careers {
    grid-template-columns: 1fr;
  }

  .split-feature__media,
  .process-media,
  .careers-media {
    min-height: 430px;
  }

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

  .service-item {
    min-height: 0;
    padding: 25px 0;

    border-bottom: 1px solid var(--v-line);
  }

  .service-item::after {
    display: none !important;
  }

  .service-item p {
    max-width: none;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }

  .steps li::after {
    display: none !important;
  }

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

  .contact {
    min-height: 390px;
    padding-bottom: 160px;
  }

  .contact-note {
    left: var(--v-gutter);
    right: auto;
    top: auto;
    bottom: 30px;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer nav {
    justify-self: start;
  }
}

/* ==========================================================================
   ACCESSIBILITY / MOTION
   ========================================================================== */

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--v-blue);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}