/* ==========================================================================
   Vertex Marketing — About Us page (US)
   Static export. Base rules are the desktop values; each media block below
   carries only the declarations that differ at that width.
   ========================================================================== */

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

html,
body { margin: 0; padding: 0; }

body {
  background: #FFFFFF;
  color: #141414;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: #14543C; text-decoration: none; }
a:hover { color: #0B3527; }
img { max-width: 100%; display: block; }

@keyframes topbar-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 15px)); }
}

.diamond {
  flex: none;
  width: 8px;
  height: 8px;
  background: #C08A21;
  transform: rotate(45deg);
}

.diamond--gold { background: #E8A33D; }

/* --------------------------------------------------------------- topbar */
.topbar { background: #141414; color: #FFFFFF; overflow: hidden; }

.topbar__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 6px clamp(16px, 2vw, 32px);
  overflow: hidden;
}

.topbar__track {
  display: flex;
  gap: 52px;
  justify-content: center;
  width: 100%;
}

.topbar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 52px;
  justify-content: center;
  font-size: 14px;
  flex: 0 1 auto;
}

.topbar__group--dup { display: none; flex-wrap: nowrap; gap: 52px; flex: none; }

.topbar__item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, .66);
}

.topbar__icon { flex: none; }

.topbar__label {
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
}

.site-header__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 22px clamp(16px, 2vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-header__logo-link { display: flex; align-items: center; }

.site-header__logo {
  height: 58px;
  width: auto;
  margin-left: -9px;
  object-fit: contain;
}

.site-nav { display: flex; gap: clamp(18px, 2vw, 34px); align-items: center; }

.site-nav__link {
  padding: 10px 4px 4px;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .02em;
  color: #14543C;
  border-bottom: 2.5px solid transparent;
  transition: color .22s ease, border-color .22s ease;
}

.site-nav__link:hover { color: #0B3527; border-bottom-color: #0B3527; }

.site-nav__cta {
  margin-left: 8px;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .01em;
  white-space: nowrap;
  background: linear-gradient(165deg, #2A7D5A 0%, #14543C 46%, #0B3527 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(11, 53, 39, .34), 0 0 0 4px rgba(203, 227, 210, .55), inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -1px 0 rgba(0, 0, 0, .28);
  transition: background .22s ease, box-shadow .22s ease, transform .22s ease;
}

.site-nav__cta:hover {
  color: #FFFFFF;
  background: linear-gradient(165deg, #35906A 0%, #1A6448 46%, #0F4231 100%);
  box-shadow: 0 16px 32px rgba(11, 53, 39, .42), 0 0 0 5px rgba(203, 227, 210, .75), inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .28);
  transform: translateY(-1px);
}

.site-header__burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #141414;
}

/* ---------------------------------------------------------- mobile nav */
.mobile-nav {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 90;
  background: #141414;
  color: #FFFFFF;
  border-radius: 30px;
  padding: 20px 24px 24px;
  display: none;
  flex-direction: column;
  gap: 18px;
}

.mobile-nav--open { display: flex; }

.mobile-nav__close {
  align-self: flex-end;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  padding: 0 4px;
}

.mobile-nav__link {
  display: block;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 780;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  line-height: 1.2;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  color: #FFFFFF;
}

.mobile-nav__link:hover { color: #FFFFFF; }
.mobile-nav__link--last { border-bottom: 0; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: auto;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}

.btn svg { flex: none; }

.btn--primary {
  color: #FFFFFF;
  background: linear-gradient(165deg, #2A7D5A 0%, #14543C 52%, #0B3527 100%);
  box-shadow: 0 10px 24px rgba(11, 53, 39, .24);
  transition: transform .2s ease, box-shadow .2s ease;
}

.btn--primary:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(11, 53, 39, .3); }

.btn--ghost {
  color: #14543C;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px rgba(20, 84, 60, .2), 0 6px 18px rgba(20, 20, 20, .06);
  transition: background .2s ease, transform .2s ease;
}

.btn--ghost:hover { background: #F4F9F5; color: #0B3527; transform: translateY(-2px); }

.btn--light {
  color: #0F2E1E;
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.btn--light:hover { color: #0F2E1E; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0, 0, 0, .28); }

/* ------------------------------------------------------------- hero */
.ahero { background: #FFFFFF; padding: clamp(30px, 3.4vw, 56px) 0 0; }

.ahero__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding-inline: clamp(24px, 4vw, 72px);
}

.ahero__shell {
  position: relative;
  border-radius: clamp(20px, 2.2vw, 30px);
  background: #FAF8F2;
  overflow: hidden;
  padding-bottom: clamp(24px, 2.2vw, 36px);
}

.ahero__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

.ahero__copy {
  min-width: 0;
  padding: clamp(34px, 3vw, 56px) clamp(18px, 1.8vw, 30px) clamp(34px, 3vw, 52px) clamp(30px, 3vw, 56px);
}

.ahero__badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #14402A;
}

.ahero__badge svg { flex: none; }

.ahero__badge-text {
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #F0D9A6;
}

.ahero__title {
  margin: 26px 0 0;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.04;
  font-size: clamp(38px, 3.5vw, 58px);
  color: #13301F;
}

.ahero__title-accent { color: #1D7A44; }

.ahero__lead {
  margin: 22px 0 0;
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.55;
  color: #2C3A31;
  max-width: 46ch;
}

.ahero__ctas {
  margin: clamp(26px, 2.4vw, 36px) 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
}

.ahero__art {
  min-width: 0;
  order: 0;
  position: relative;
  margin: 0;
  padding: clamp(26px, 2.6vw, 44px) clamp(26px, 2.6vw, 48px) clamp(26px, 2.6vw, 44px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(340px, 26vw, 460px);
}

.ahero__art-halo {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(47, 125, 70, .16), rgba(47, 125, 70, 0) 68%);
  pointer-events: none;
}

.ahero__art-img {
  position: relative;
  z-index: 1;
  width: 68%;
  height: auto;
  object-fit: contain;
}

.ahero__art-badge {
  position: absolute;
  top: clamp(16px, 1.4vw, 22px);
  right: clamp(16px, 1.4vw, 22px);
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: clamp(120px, 10vw, 150px);
  height: clamp(120px, 10vw, 150px);
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(11, 53, 39, .14);
}

.ahero__art-badge-glyph { width: 26px; height: 26px; }
.ahero__art-badge-small { font-size: 13px; line-height: 1.15; color: rgba(20, 20, 20, .6); }

.ahero__art-badge-big {
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 780;
  font-size: 17px;
  line-height: 1.1;
  color: #13301F;
}

/* --------------------------------------------------------- hero band */
.aband {
  position: relative;
  z-index: 2;
  margin: clamp(18px, 2vw, 30px) clamp(20px, 2vw, 34px) 0;
  background: linear-gradient(165deg, #17422C 0%, #0F2E1E 100%);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(11, 35, 24, .22);
  padding: clamp(8px, 1vw, 14px) clamp(10px, 1.2vw, 18px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aband__item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 14px;
  padding: clamp(14px, 1.2vw, 20px) clamp(12px, 1.3vw, 20px);
  border-left: 0;
  border-top: 0;
  border-color: rgba(143, 217, 168, .16);
}

.aband__item--divided { border-left-style: solid; border-left-width: 1px; }

.aband__icon { flex: none; width: 72px; height: 72px; object-fit: contain; }
.aband__text { min-width: 0; }

.aband__title {
  display: block;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 760;
  font-size: clamp(18px, 1.25vw, 20px);
  letter-spacing: -.008em;
  color: #FFFFFF;
}

.aband__body {
  display: block;
  margin-top: 3px;
  font-size: 15.5px;
  line-height: 1.42;
  color: rgba(255, 255, 255, .64);
}

/* --------------------------------------------------------- our approach */
.approach { background: #FFFFFF; padding: clamp(38px, 4vw, 68px) 0 0; }

.approach__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding-inline: clamp(24px, 4vw, 72px);
}

.approach__grid {
  padding: 8px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.2vw, 64px);
  align-items: stretch;
}

.approach__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 1.5vw, 24px);
}

.approach__head { min-width: 0; flex: none; text-align: left; }

.approach__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.approach__eyebrow,
.who__eyebrow,
.promise__eyebrow,
.values__eyebrow {
  margin: 0;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A97815;
}

.approach__title {
  margin: .3em 0 0;
  margin-inline: 0;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 780;
  letter-spacing: -.028em;
  line-height: 1.06;
  font-size: clamp(38px, 3.6vw, 58px);
  max-width: none;
  text-wrap: balance;
  color: #141414;
}

.approach__title-dot { color: #E8A33D; }

.approach__lead {
  margin: 22px 0 0;
  margin-inline: 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(20, 20, 20, .66);
  max-width: none;
}

.acard {
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .09), 0 8px 24px rgba(20, 20, 20, .05);
  display: flex;
  flex-direction: row;
  flex: none;
  min-height: clamp(210px, 16vw, 258px);
}

.acard--dark {
  border-radius: 18px;
  background: #12301E;
  box-shadow: 0 14px 34px rgba(11, 53, 39, .22);
}

.acard__media {
  flex: none;
  position: relative;
  width: clamp(240px, 26%, 340px);
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
  background: #EDF3EC;
}

.acard--dark .acard__media { background: transparent; }

.acard__img { width: 100%; height: 100%; object-fit: cover; }
.acard__img--care { object-position: center 30%; }

.acard__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 2vw, 36px);
}

.acard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.acard__title {
  margin: 0;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 780;
  font-size: clamp(22px, 1.7vw, 26px);
  letter-spacing: -.014em;
  line-height: 1.18;
  color: #141414;
}

.acard__title--light { color: #FFFFFF; }

.acard__num {
  position: absolute;
  top: clamp(16px, 1.4vw, 24px);
  right: clamp(16px, 1.4vw, 24px);
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 750;
  font-size: 12.5px;
  letter-spacing: .02em;
  background: #EEF4EF;
  box-shadow: inset 0 0 0 1px rgba(20, 84, 60, .14);
  color: #14543C;
}

.acard__num--light {
  background: rgba(205, 235, 155, .12);
  box-shadow: inset 0 0 0 1px rgba(205, 235, 155, .28);
  color: #CDEB9B;
}

.acard__rule {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: #E8A33D;
  margin: 12px 0 12px;
}

.acard__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(20, 20, 20, .68);
  max-width: 52ch;
}

.acard__text--light { color: rgba(255, 255, 255, .74); }

/* ------------------------------------------------------------ who we are */
.who { background: #FFFFFF; padding: clamp(38px, 4vw, 68px) 0 0; }

.who__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding-inline: clamp(24px, 4vw, 72px);
}

.who__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(26px, 2.6vw, 44px);
  align-items: stretch;
}

.who__panel {
  min-width: 0;
  border-radius: clamp(20px, 2.2vw, 30px);
  background: #F6F3EA;
  border: 1px solid rgba(176, 142, 74, .14);
  box-shadow: 0 10px 34px rgba(20, 20, 20, .05);
  padding: clamp(30px, 3.4vw, 54px);
}

.who__panel--left {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 2.4vw, 38px);
}

.who__intro { min-width: 0; }

.who__eyebrow-row { display: flex; align-items: center; gap: 12px; min-width: 0; }

.who__title {
  margin: 22px 0 0;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 780;
  letter-spacing: -.024em;
  line-height: 1.1;
  font-size: clamp(29px, 2.4vw, 38px);
  max-width: 26ch;
  color: #13301F;
}

.who__rule {
  display: block;
  width: 62px;
  height: 4px;
  border-radius: 999px;
  background: #E8A33D;
  margin: 18px 0 0;
}

.who__text {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(20, 20, 20, .7);
}

.who__art {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .07);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(240px, 20vw, 340px);
}

.who__art-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(240px, 20vw, 340px);
  object-fit: cover;
  object-position: 57% 40%;
}

.details {
  margin: clamp(22px, 2vw, 32px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(176, 142, 74, .14);
  padding: clamp(15px, 1.2vw, 19px);
}

.detail__icon { flex: none; width: 80px; height: 80px; object-fit: contain; }
.detail__text { min-width: 0; }

.detail__title {
  display: block;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 760;
  font-size: clamp(18px, 1.3vw, 20px);
  letter-spacing: -.008em;
  color: #13301F;
}

.detail__value,
.detail__link {
  display: block;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(20, 20, 20, .68);
}

.detail__link--email { word-break: break-word; }
.detail__link:hover { color: #14543C; }

/* ------------------------------------------------------ customer promise */
.promise { background: #FFFFFF; padding: clamp(38px, 4vw, 68px) 0 0; }

.promise__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding-inline: clamp(24px, 4vw, 72px);
}

.promise__panel {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 2.2vw, 30px);
  background: linear-gradient(165deg, #17422C 0%, #0F2E1E 100%);
  box-shadow: 0 26px 64px rgba(11, 53, 39, .18);
  padding: clamp(26px, 2.8vw, 44px);
}

.promise__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(24px, 2.6vw, 44px);
  align-items: stretch;
}

.promise__copy { min-width: 0; }
.promise__eyebrow-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.promise__eyebrow { color: #E8A33D; }

.promise__title {
  margin: 22px 0 0;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 780;
  letter-spacing: -.026em;
  line-height: 1.08;
  font-size: clamp(36px, 3.4vw, 52px);
  max-width: 18ch;
  color: #FFFFFF;
}

.promise__title-accent { color: #8FD9A8; }

.promise__lead {
  margin: 22px 0 0;
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .7);
  max-width: 48ch;
}

.promise__ctas {
  margin: clamp(26px, 2.4vw, 36px) 0 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
}

.promise__cards {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(12px, 1vw, 16px);
}

.pcard {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(8px, .7vw, 12px);
  min-height: 0;
  background: rgba(255, 255, 255, .045);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(143, 217, 168, .18);
  padding: clamp(16px, 1.4vw, 22px);
}

.pcard__head { display: flex; align-items: center; gap: 10px; min-width: 0; }

.pcard__num {
  flex: none;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  color: #8FD9A8;
}

.pcard__title {
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 760;
  font-size: clamp(18px, 1.25vw, 20px);
  letter-spacing: -.008em;
  color: #FFFFFF;
}

.pcard__body {
  display: block;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .66);
}

.promise__strip {
  position: relative;
  margin: clamp(26px, 2.6vw, 40px) 0 0;
  border-radius: clamp(16px, 1.6vw, 22px);
  overflow: hidden;
  aspect-ratio: 5;
  box-shadow: inset 0 0 0 1px rgba(143, 217, 168, .16);
}

.promise__strip-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.promise__strip-badge {
  position: absolute;
  top: clamp(4px, .4vw, 7px);
  right: clamp(4px, .4vw, 7px);
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: clamp(74px, 5.6vw, 96px);
  height: clamp(74px, 5.6vw, 96px);
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}

.promise__strip-glyph { width: 15px; height: 15px; }

.promise__strip-big {
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.1;
  color: #14543C;
}

.promise__strip-small {
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, .6);
}

/* --------------------------------------------------------------- values */
.values { background: #FFFFFF; padding: clamp(38px, 4vw, 68px) 0 clamp(40px, 4.4vw, 76px); }

.values__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding-inline: clamp(24px, 4vw, 72px);
}

.values__panel { padding: 8px 0; }

.values__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.values__title {
  margin: .32em auto 0;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 780;
  letter-spacing: -.026em;
  line-height: 1.04;
  font-size: clamp(36px, 3.4vw, 52px);
  max-width: 22ch;
  text-align: center;
  text-wrap: balance;
  color: #141414;
}

.values__rule {
  display: block;
  width: 62px;
  height: 4px;
  border-radius: 999px;
  background: #E8A33D;
  margin: 20px auto 0;
}

.values__grid {
  margin: clamp(28px, 2.8vw, 44px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 22px);
}

.value {
  min-width: 0;
  background: #FDFCF4;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .08), 0 8px 22px rgba(20, 20, 20, .05);
  padding: clamp(20px, 1.7vw, 28px);
  display: flex;
  gap: clamp(16px, 1.3vw, 20px);
  align-items: flex-start;
}

.value__icon {
  flex: none;
  width: clamp(58px, 4.4vw, 68px);
  height: clamp(58px, 4.4vw, 68px);
  border-radius: 999px;
  background: #E7F2EA;
  box-shadow: inset 0 0 0 1px rgba(20, 84, 60, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14543C;
}

.value__glyph { width: 32px; height: 32px; }
.value__text { min-width: 0; }

.value__title {
  margin: 0;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 780;
  font-size: clamp(22px, 1.7vw, 26px);
  letter-spacing: -.012em;
  line-height: 1.2;
  color: #141414;
}

.value__rule {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: #E8A33D;
  margin: 10px 0 12px;
}

.value__body {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(20, 20, 20, .68);
}

/* --------------------------------------------------------------- footer */
.site-footer { background: #131513; color: #FFFFFF; }

.site-footer__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 48px) clamp(28px, 3.2vw, 42px);
  display: grid;
  grid-template-columns: 1.3fr 1.02fr .98fr 1.05fr;
  gap: clamp(26px, 3vw, 52px);
}

.site-footer__brand { display: flex; flex-direction: column; gap: 16px; }

.site-footer__logo {
  height: 52px;
  width: auto;
  align-self: flex-start;
  object-fit: contain;
  margin-left: -4px;
}

.site-footer__tagline {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
  max-width: 32ch;
}

.site-footer__pay-label {
  margin: 0 0 9px;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.site-footer__pay-list { display: flex; gap: 9px; flex-wrap: wrap; }
.site-footer__pay-logo { height: 32px; width: auto; border-radius: 6px; }

.site-footer__heading {
  margin: 0;
  font-family: 'Commissioner', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6FD07F;
}

.site-footer__rule {
  display: block;
  width: 34px;
  height: 2px;
  background: #6FD07F;
  margin: 8px 0 10px;
}

.site-footer__links { list-style: none; margin: 0; padding: 0; }

.site-footer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  min-height: 0;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.site-footer__link:hover { color: #FFFFFF; }
.site-footer__link--last { border-bottom: 0; }
.site-footer__link-text--nowrap { white-space: nowrap; }
.site-footer__link-chevron { flex: none; opacity: .85; }

.site-footer__biz-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.site-footer__biz-row--last {
  padding-bottom: 0;
  padding-top: 16px;
  border-bottom: 0;
}

.site-footer__biz-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(111, 208, 127, .14);
  box-shadow: inset 0 0 0 1px rgba(111, 208, 127, .22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer__biz-text { min-width: 0; }

.site-footer__biz-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 3px;
}

.site-footer__biz-address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .62);
}

.site-footer__base { border-top: 1px solid rgba(255, 255, 255, .1); }

.site-footer__base-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(18px, 2vw, 26px) clamp(24px, 3vw, 48px) clamp(22px, 2.4vw, 32px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px clamp(24px, 3vw, 44px);
  align-items: start;
}

.site-footer__copyright { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .8); }

.site-footer__disclaimer {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .46);
  min-width: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1159px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .aband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aband__item--divided { border-left-width: 0; }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .ahero__grid { grid-template-columns: 1fr; }
  .ahero__copy { padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 40px) 26px; }
  .ahero__lead { max-width: 58ch; }
  .ahero__art { order: -1; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px) 0; }

  .approach__grid { grid-template-columns: 1fr; align-items: start; }
  .who__grid { grid-template-columns: 1fr; }
  .promise__grid { grid-template-columns: 1fr; }
}

@media (max-width: 999px) {
  .site-nav { display: none; }
  .site-header__burger { display: flex; }
}

@media (max-width: 899px) {
  .site-footer__base-inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .topbar__inner { padding-inline: 18px; }
  .topbar__track {
    justify-content: flex-start;
    width: max-content;
    animation: topbar-scroll 16s linear infinite;
  }
  .topbar__group { flex-wrap: nowrap; font-size: 16px; flex: none; }
  .topbar__group--dup { display: flex; font-size: 16px; }

  .site-header__inner { padding: 10px 18px; }
  .site-header__logo { height: 40px; }

  .ahero { padding-top: 24px; }
  .ahero__inner,
  .approach__inner,
  .who__inner,
  .promise__inner,
  .values__inner { padding-inline: 18px; }
  .ahero__shell { border-radius: 18px; padding-bottom: 18px; }
  .ahero__copy { padding: 24px 18px 22px; }
  .ahero__badge-text { font-size: 12px; }
  .ahero__title { margin-top: 18px; font-size: 41px; }
  .ahero__lead { margin-top: 16px; font-size: 17px; }
  .ahero__ctas { margin-top: 22px; }
  .btn { font-size: 16.5px; }
  .ahero__art { padding: 18px 18px 0; min-height: 320px; }
  .ahero__art-img { width: 72%; }
  .ahero__art-badge { top: 14px; right: 14px; width: 120px; height: 120px; }
  .ahero__art-badge-glyph { width: 22px; height: 22px; }
  .ahero__art-badge-small { font-size: 12px; }
  .ahero__art-badge-big { font-size: 15.5px; }

  .aband { margin: 16px 14px 0; border-radius: 16px; padding: 6px 14px; }
  .aband__item { justify-content: center; text-align: center; padding: 15px 0; }
  .aband__icon { width: 65px; height: 65px; }
  .aband__title { font-size: 17.5px; }
  .aband__body { font-size: 15px; }

  .approach { padding-top: 30px; }
  .approach__grid { padding: 4px 0; gap: 22px; }
  .approach__col { justify-content: flex-start; gap: 16px; }
  .approach__head { text-align: center; }
  .approach__eyebrow-row { justify-content: center; }
  .approach__eyebrow,
  .who__eyebrow,
  .promise__eyebrow,
  .values__eyebrow { font-size: 12px; }
  .approach__title { margin-inline: auto; max-width: 20ch; font-size: 34px; }
  .approach__lead { margin-top: 14px; margin-inline: auto; font-size: 16px; max-width: 44ch; }

  .acard { flex-direction: column; min-height: 0; }
  .acard__media { width: 100%; aspect-ratio: 1 / 1; }
  .acard__body { padding: 18px 16px 20px; }
  .acard__title { font-size: 21px; }
  .acard__num { position: static; top: auto; right: auto; width: 28px; height: 28px; font-size: 11.5px; }
  .acard__text { font-size: 16px; }

  .who { padding-top: 30px; }
  .who__grid { gap: 26px; }
  .who__panel { border-radius: 18px; padding: 22px 16px 24px; }
  .who__panel--left { gap: 24px; }
  .who__title { margin-top: 16px; font-size: 29px; }
  .who__text { font-size: 16px; }
  .who__art { min-height: 260px; }
  .who__art-img { height: 260px; }
  .details { margin-top: 20px; gap: 10px; }
  .detail { align-items: center; text-align: center; padding: 14px; }
  .detail__icon { width: 70px; height: 70px; }
  .detail__title { font-size: 17.5px; }
  .detail__value,
  .detail__link { font-size: 16px; }

  .promise { padding-top: 30px; }
  .promise__panel { border-radius: 18px; padding: 20px 16px; }
  .promise__grid { gap: 24px; }
  .promise__title { margin-top: 16px; font-size: 34px; }
  .promise__lead { margin-top: 16px; font-size: 17px; }
  .promise__ctas { margin-top: 22px; }
  .promise__cards { gap: 10px; }
  .pcard { border-radius: 14px; padding: 16px; gap: 8px; }
  .pcard__title { font-size: 17.5px; }
  .pcard__body { font-size: 15px; }
  .promise__strip { margin-top: 22px; border-radius: 14px; }
  .promise__strip-badge { top: 4px; right: 4px; width: 68px; height: 68px; }
  .promise__strip-glyph { width: 13px; height: 13px; }
  .promise__strip-big { font-size: 15px; }
  .promise__strip-small { font-size: 8px; }

  .values { padding: 30px 0 34px; }
  .values__panel { padding: 4px 0; }
  .values__title { font-size: 34px; }
  .values__grid { margin-top: 24px; gap: 14px; }
  .value { padding: 18px 16px; gap: 16px; }
  .value__icon { width: 56px; height: 56px; }
  .value__glyph { width: 28px; height: 28px; }
  .value__title { font-size: 21px; }
  .value__body { font-size: 16px; }

  .site-footer__inner { padding-inline: 18px; }
  .site-footer__base-inner { padding-inline: 18px; }
  .site-footer__link { min-height: 44px; }
}

@media (max-width: 640px) {
  .aband { grid-template-columns: 1fr; }
  .aband__item--divided { border-top-style: solid; border-top-width: 1px; }
}

@media (max-width: 639px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

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

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

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

@media (max-width: 430px) {
  .topbar__group,
  .topbar__group--dup { font-size: 15px; }
  .ahero__title { font-size: 35px; }
  .ahero__ctas,
  .promise__ctas { flex-direction: column; gap: 12px; }
  .btn { width: 100%; }
  .ahero__art { min-height: 280px; }
  .ahero__art-badge { width: 108px; height: 108px; }
  .approach__title { font-size: 30px; }
  .who__title { font-size: 26px; }
  .who__art { min-height: 230px; }
  .who__art-img { height: 230px; }
  .promise__title,
  .values__title { font-size: 30px; }
  .promise__strip-badge { width: 56px; height: 56px; }
  .promise__strip-glyph { width: 11px; height: 11px; }
  .promise__strip-big { font-size: 12.5px; }
  .promise__strip-small { font-size: 7px; }
  .value__title { font-size: 20px; }
}

@media (max-width: 390px) {
  .topbar__group,
  .topbar__group--dup { font-size: 14px; }
}

@media (max-width: 360px) {
  .ahero__title { font-size: 31px; }
  .ahero__art { min-height: 240px; }
  .ahero__art-img { width: 76%; }
  .ahero__art-badge { top: 10px; right: 10px; width: 96px; height: 96px; }
  .ahero__art-badge-glyph { width: 20px; height: 20px; }
  .ahero__art-badge-small { font-size: 11px; }
  .ahero__art-badge-big { font-size: 14px; }
  .aband__icon { width: 62px; height: 62px; }
  .aband__title { font-size: 16.5px; }
  .aband__body { font-size: 14px; }
  .approach__title { font-size: 27px; }
  .acard__body { padding: 16px 14px 20px; }
  .acard__title { font-size: 19px; }
  .who__title { font-size: 24px; }
  .who__art { min-height: 200px; }
  .who__art-img { height: 200px; }
  .detail { padding: 13px; gap: 4px; }
  .detail__icon { width: 68px; height: 68px; }
  .detail__title { font-size: 16.5px; }
  .promise__title,
  .values__title { font-size: 27px; }
  .pcard { padding: 14px; }
  .pcard__num { font-size: 12px; }
  .pcard__title { font-size: 16.5px; }
  .pcard__body { font-size: 14px; }
  .promise__strip-badge { top: 3px; right: 3px; width: 48px; height: 48px; }
  .promise__strip-glyph { width: 10px; height: 10px; }
  .promise__strip-big { font-size: 11px; }
  .promise__strip-small { font-size: 6.5px; }
  .value { padding: 16px 14px; gap: 14px; }
  .value__icon { width: 52px; height: 52px; }
  .value__glyph { width: 26px; height: 26px; }
  .value__title { font-size: 19px; }
}

@media (max-width: 320px) {
  .topbar__group,
  .topbar__group--dup { font-size: 12px; }
}