/**
 * home.css — TaxOptima homepage redesign.
 *
 * A direct port of the standalone index.html design, fully scoped under the
 * `.tox` wrapper so it never collides with the existing main.css (which still
 * styles the shared header/footer and every inner page). Once every template
 * has been migrated to this design, main.css can be removed.
 *
 * Header, navigation and footer are intentionally NOT restyled here — they are
 * shared across the whole site and keep their current styling.
 */

/* ---------- Brand tokens (from the TaxOptima brand kit) ----------
   Defined on :root because the header/footer overrides at the bottom of this
   file style elements OUTSIDE the .tox wrapper and need the same tokens. This
   file is enqueued only on the front page, so these never reach other pages. */
:root {
  --navy: #06204A;
  /* Optima Navy: primary brand */
  --deep: #04183A;
  /* Deep Navy: dark backgrounds */
  --blue: #076BE6;
  /* Optima Blue: accent / CTA */
  --royal: #043F88;
  /* Royal Blue: secondary blue */
  --soft: #EAF2FC;
  /* Soft Blue: light background */
  --pale: #F5F8FC;
  /* Pale Blue: section background */
  --slate: #52627A;
  /* Slate: secondary text */
  --white: #FFFFFF;
  --line: #DCE7F6;
  --g-primary: linear-gradient(90deg, #06204A 0%, #076BE6 100%);
  --g-primary-d: linear-gradient(135deg, #06204A 0%, #076BE6 100%);
  --g-secondary: linear-gradient(135deg, #04183A 0%, #043F88 100%);
  --g-bright: linear-gradient(125deg, #06204A 0%, #043F88 45%, #076BE6 100%);
  --radius: 8px;
  --radius-lg: 20px;
  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

.tox {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

.tox * {
  box-sizing: border-box
}

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

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

.tox ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.tox :focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px
}

.tox .wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px
}

.tox .sec {
  padding: 60px 0
}

.tox h1,
.tox h2,
.tox h3,
.tox h4 {
  font-family: var(--font-head);
  color: inherit;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0
}

.tox h1 {
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 700
}

.tox h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700
}

.tox h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em
}

.tox p {
  margin: 0
}

.tox .eyebrow {
  display: inline-block;
  font: 600 13px var(--font-head);
  color: var(--blue);
  letter-spacing: .02em;
  margin-bottom: 14px;
  text-transform: none
}

.tox .lead {
  color: var(--slate);
  font-size: 17px;
  max-width: 540px
}

.tox .center {
  text-align: center
}

.tox .center .lead {
  margin-left: auto;
  margin-right: auto
}

.tox .bg-pale {
  background: var(--pale)
}

.tox .bg-soft {
  background: var(--soft)
}

/* ---------- Buttons ---------- */
.tox .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 15px var(--font-body);
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s
}

.tox .btn svg {
  width: 16px;
  height: 16px
}

.tox .btn-primary {
  background: var(--g-primary-d);
  color: #fff
}

.tox .btn-primary:hover {
  background: var(--g-secondary)
}

.tox .btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy)
}

.tox .btn-outline:hover {
  background: var(--soft)
}

.tox .btn-white {
  background: #fff;
  color: var(--navy)
}

.tox .btn-white:hover {
  background: var(--soft)
}

.tox .btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55)
}

.tox .btn-ghost-light:hover {
  background: rgba(255, 255, 255, .12)
}

.tox .btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px
}

/* ---------- Hero (full-bleed photo + brand gradient overlay) ---------- */
.tox .hero {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 90vh, 740px)
}

.tox .hero::before {
  content: none
}

.tox .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(1.16) saturate(1.05)
}

/* Dark brand gradient over the photo — darkest at the copy side, clearing to the right */
.tox .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: linear-gradient(95deg, rgba(6, 32, 74, .7) 0%, rgba(6, 32, 74, .42) 40%, rgba(6, 32, 74, .14) 68%, rgba(6, 32, 74, 0) 100%)
}

/* Floating animated diagram, overlaid on the photo. Visible by default so it
   always shows; GSAP just fades it in on load and drifts it on scroll. */
.tox .hero-diagram {
  position: absolute;
  right: calc((100% - min(1280px, 100%)) / 2 + 24px);
  bottom: 0;
  width: clamp(320px, 44vw, 620px);
  z-index: 2;
  pointer-events: none;
  will-change: transform
}

.tox .hero-diagram img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .92;
  filter: saturate(1.35) brightness(1.12)
}

@media (max-width:900px) {
  .tox .hero-diagram {
    display: none
  }
}

.tox .hero .wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 48px
}

.tox .hero-copy {
  max-width: 660px
}

.tox .hero .eyebrow {
  color: #8FC2FF;
  text-transform: uppercase;
  letter-spacing: .14em
}

.tox .hero h1 {
  color: #fff;
  margin-top: 6px;
  text-shadow: 0 2px 10px rgba(4, 24, 58, .7), 0 2px 40px rgba(4, 24, 58, .5)
}

.tox .hero h1 .hl {
  color: #4FA0FF
}

.tox .hero .lead {
  color: #E4EDF9;
  margin-top: 22px;
  max-width: 560px;
  text-shadow: 0 1px 16px rgba(4, 24, 58, .55)
}

/* Hero buttons match the CTA card: solid white primary + ghost outline. */
.tox .hero .btn-ghost-light {
  border-color: rgba(255, 255, 255, .6)
}

.tox .hero .btn-ghost-light:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #fff
}

.tox .hero-stats {
  display: flex;
  gap: 16px 36px;
  flex-wrap: wrap;
  margin-top: 44px
}

.tox .hero-stats div {
  border-left: 3px solid var(--blue);
  padding-left: 14px
}

.tox .hero-stats b {
  display: block;
  font: 700 22px var(--font-head);
  line-height: 1.2;
  color: #fff
}

.tox .hero-stats span {
  font-size: 13px;
  color: #B9CCE6
}

/* 10K+ trust badge with client-logo chips — aligned to the container's right
   edge (inside .wrap's 1280px), not the viewport edge. */
.tox .hero-badge {
  position: absolute;
  top: 32px;
  right: calc((100% - min(1280px, 100%)) / 2 + 24px);
  left: auto;
  bottom: auto;
  z-index: 4;
  width: auto;
  max-width: 236px;
  background: var(--g-primary-d);
  border: 0;
  color: #fff;
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 16px 38px rgba(7, 107, 230, .42)
}

.tox .hero-badge b {
  display: block;
  font: 700 34px var(--font-head);
  line-height: 1
}

.tox .hero-badge>span {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  margin-top: 4px
}

.tox .hero-badge .avs--logos {
  display: flex;
  gap: 7px;
  margin-top: 14px
}

.tox .hero-badge .avs--logos i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff center/contain no-repeat;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18)
}

@media (max-width:720px) {
  .tox .hero-badge {
    display: none
  }
}

@media (max-width:980px) {
  .tox .hero {
    min-height: auto
  }

  .tox .hero .wrap {
    padding-top: 110px;
    padding-bottom: 72px
  }
}

/* ---------- About ---------- */
.tox #about {
  background: radial-gradient(85% 65% at 94% 6%, var(--soft) 0%, rgba(234, 242, 252, 0) 58%)
}

.tox .about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 76px;
  align-items: center
}

.tox .photo {
  position: relative
}

/* Offset brand-gradient block behind the photo for depth */
.tox .photo::before {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 66%;
  height: 72%;
  border-radius: var(--radius-lg);
  background: var(--g-primary-d);
  opacity: .14;
  z-index: 0
}

.tox .photo>img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: 0 30px 60px -22px rgba(6, 32, 74, .42)
}

.tox .badge {
  position: absolute;
  left: -18px;
  bottom: 28px;
  z-index: 2;
  background: var(--g-primary-d);
  color: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  max-width: 210px;
  box-shadow: 0 18px 40px rgba(7, 107, 230, .4)
}

.tox .badge b {
  display: block;
  font: 700 30px var(--font-head);
  line-height: 1.1
}

.tox .badge span {
  font-size: 13px;
  line-height: 1.4;
  display: block;
  margin-top: 4px
}

/* Section carries the hero's soft radial glow for continuity */
.tox #about {
  background:
    radial-gradient(56% 72% at 12% 30%, rgba(7, 107, 230, .07), transparent 62%),
    #fff
}

/* Eyebrow echoes the hero's uppercase letter-spaced treatment */
.tox .about .eyebrow {
  font: 700 13px var(--font-head);
  letter-spacing: .18em;
  text-transform: uppercase
}

.tox .about h2 {
  margin-bottom: 18px
}

/* Highlight phrase in brand blue, like the hero headline */
.tox .about h2 .hl {
  color: var(--blue)
}

/* Metrics in a soft rounded card instead of a bare rule */
.tox .metrics {
  display: flex;
  gap: 0;
  margin: 30px 0;
  background: var(--pale);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden
}

.tox .metrics>div {
  flex: 1;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px
}

.tox .metrics>div+div {
  border-left: 1px solid var(--line)
}

/* Icon chips matching the hero's feature row */
.tox .metrics .ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(7, 107, 230, .12);
  color: var(--blue);
  flex: none
}

.tox .metrics .ic svg {
  width: 50%;
  height: 50%
}

.tox .metrics b {
  display: block;
  font: 700 30px var(--font-head);
  line-height: 1.1;
  background: var(--g-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: max-content
}

.tox .metrics span {
  font-size: 13px;
  color: var(--slate)
}

/* Founder quote with a gradient accent bar */
.tox .quote-line {
  position: relative;
  font: 600 18px/1.5 var(--font-head);
  letter-spacing: -.01em;
  color: var(--navy);
  padding-left: 18px;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #076BE6, #06204A) 1
}

.tox .person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 30px
}

.tox .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--g-primary-d);
  color: #fff;
  display: grid;
  place-items: center;
  font: 600 13px var(--font-head)
}

.tox .person b {
  display: block;
  font-size: 14px;
  line-height: 1.3
}

.tox .person span {
  font-size: 13px;
  color: var(--slate)
}

/* ---------- Services ---------- */
.tox .services {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px;
  margin-top: 56px;
  align-items: stretch
}

.tox .svc-list li {
  border-top: 1px solid var(--line)
}

.tox .svc-list li:last-child {
  border-bottom: 1px solid var(--line)
}

.tox .svc-list a {
  display: grid;
  grid-template-columns: 34px 1fr auto 40px;
  align-items: center;
  gap: 14px;
  padding: 20px 8px;
  color: var(--slate);
  transition: background .2s, color .2s
}

.tox .svc-list a:hover,
.tox .svc-list a.on {
  color: var(--navy);
  background: var(--pale)
}

.tox .svc-list .n {
  font: 600 12px var(--font-head);
  color: #8CA0BD
}

.tox .svc-list a.on .n {
  color: var(--blue)
}

.tox .svc-list .t {
  font: 600 20px var(--font-head);
  letter-spacing: -.015em;
  line-height: 1.25
}

.tox .svc-list .p {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap
}

.tox .svc-list .go {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--slate)
}

.tox .svc-list .go svg {
  width: 15px;
  height: 15px
}

.tox .svc-list .go .i-up {
  display: none
}

.tox .svc-list a.on .go {
  background: var(--g-primary-d);
  border-color: transparent;
  color: #fff
}

.tox .svc-list a.on .go svg:not(.i-up) {
  display: none
}

.tox .svc-list a.on .go .i-up {
  display: block
}

/* Preview card: one crossfading pane per service */
.tox .svc-card {
  position: sticky;
  top: 20%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  background: var(--navy)
}

.tox .svc-pane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none
}

.tox .svc-pane.active {
  opacity: 1;
  pointer-events: auto
}

.tox .svc-pane img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.tox .svc-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 32, 74, 0) 35%, rgba(4, 24, 58, .92) 100%)
}

.tox .svc-pane .in {
  position: relative;
  z-index: 1;
  padding: 26px;
  color: #fff
}

.tox .chips {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap
}

.tox .chip {
  font: 600 12px var(--font-body);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28)
}

.tox .svc-card p {
  font-size: 15px;
  line-height: 1.55;
  color: #E6EEFA
}

/* ---------- Why partner: diagonal split card ---------- */
.tox .why {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(6, 32, 74, .08)
}

.tox .why-intro {
  position: relative;
  background: var(--g-bright);
  color: #fff;
  padding: 56px 96px 56px 48px;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
  overflow: hidden
}

.tox .why-intro>* {
  position: relative;
  z-index: 1
}

.tox .why-intro .eyebrow {
  color: #8FC2FF
}

.tox .why-intro .lead {
  color: #D0E0F6;
  margin-top: 18px
}

.tox .why-intro .btn-row {
  margin-top: 28px
}

.tox .bars {
  position: absolute;
  right: 19%;
  bottom: 0;
  opacity: .7;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  z-index: 0
}

.tox .bars i {
  display: block;
  width: 26px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04))
}

.tox .reasons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 32px;
  padding: 52px 48px 52px 8px;
  align-content: center
}

.tox .reasons li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px
}

.tox .reasons li::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23076BE6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat
}

.tox .reasons h3 {
  font-size: 17px;
  margin-bottom: 4px
}

.tox .reasons p {
  font-size: 14.5px;
  color: var(--slate)
}

/* ---------- Precision / split ---------- */
.tox .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center
}

.tox .features {
  margin-top: 30px;
  display: grid;
  gap: 22px
}

.tox .features li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px
}

.tox .ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--g-primary-d);
  color: #fff;
  display: grid;
  place-items: center
}

.tox .ico svg {
  width: 21px;
  height: 21px
}

.tox .features h3 {
  font-size: 17px;
  margin-bottom: 2px
}

.tox .features p {
  font-size: 15px;
  color: var(--slate)
}

.tox .frame {
  position: relative
}

.tox .frame::before {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 70%;
  height: 70%;
  border-radius: var(--radius-lg);
  background: var(--soft)
}

.tox .bg-soft .frame::before {
  background: #fff
}

.tox .frame img {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3.3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(6, 32, 74, .18)
}

/* ---------- Process ---------- */
.tox .steps li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s
}

.tox .steps li.on {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(6, 32, 74, .06)
}

.tox .steps .num {
  font: 700 22px var(--font-head);
  color: #9DB2D1
}

.tox .steps li.on .num {
  color: var(--blue)
}

.tox .steps li.on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #076BE6, #06204A)
}

.tox .steps h3 {
  margin-bottom: 4px
}

.tox .steps p {
  font-size: 15px;
  color: var(--slate)
}

.tox .steps-wrap {
  margin-top: 32px;
  display: grid;
  gap: 6px
}

/* ---------- Founder ---------- */
.tox .founder {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 72px;
  align-items: center
}

.tox .founder img {
  width: 100%;
  aspect-ratio: 1/.9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(6, 32, 74, .16)
}

.tox .founder blockquote {
  font: 600 clamp(22px, 2.6vw, 31px)/1.35 var(--font-head);
  letter-spacing: -.02em;
  margin: 0
}

.tox .founder blockquote .qm {
  color: var(--blue)
}

.tox .founder cite {
  display: block;
  font-style: normal;
  margin-top: 24px
}

.tox .founder cite b {
  display: block;
  font-size: 15px
}

.tox .founder cite span {
  font-size: 14px;
  color: var(--slate)
}

/* ---------- Industries ---------- */
.tox .tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto
}

.tox .tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 20px;
  font: 500 15px var(--font-body);
  color: var(--navy);
  transition: border-color .2s, background .2s
}

.tox .tag:hover {
  border-color: var(--blue);
  background: var(--soft)
}

.tox .tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-primary-d);
  flex: none
}

.tox .industries h2 {
  margin-bottom: 14px
}

/* ---------- Reviews (dynamic) ---------- */
.tox .reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}

.tox .reviews .img {
  min-height: 520px
}

.tox .reviews .img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.tox .reviews .panel {
  background: var(--soft);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px clamp(28px, 6vw, 80px);
  position: relative
}

.tox .reviews .panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #076BE6, #06204A)
}

.tox .reviews h2 {
  margin-bottom: 26px;
  max-width: 460px
}

/* Dynamic review card (rendered by taxoptima_review_figure) */
/* .tox .rev-dyn {
  background: #fff;
  color: var(--navy);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 18px 40px rgba(6, 32, 74, .1);
  border: 1px solid var(--line)
} */

.tox .rev-dyn .t-card {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0
}

.tox .rev-dyn .stars {
  display: flex;
  gap: 3px;
  margin-bottom: 8px
}

.tox .rev-dyn .stars svg {
  width: 17px;
  height: 17px;
  fill: #F5A623
}

.tox .rev-dyn .stars svg.empty {
  fill: #D7E1EF
}

.tox .rev-dyn blockquote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy);
  margin: 0 0 14px
}

.tox .rev-dyn .t-person {
  display: flex;
  align-items: center;
  gap: 12px
}

.tox .rev-dyn .t-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--g-primary-d);
  color: #fff;
  display: grid;
  place-items: center;
  font: 600 13px var(--font-head)
}

.tox .rev-dyn .t-nm {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3
}

.tox .rev-dyn .t-rl {
  font-size: 13px;
  color: var(--slate)
}

.tox .reviews .greview-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0;
  font-size: 14px;
  color: var(--slate)
}

.tox .reviews .greview-g {
  width: 18px;
  height: 18px
}

.tox .reviews .greview-rating {
  font-weight: 700;
  color: var(--navy)
}

.tox .reviews .greview-stars {
  color: #F5A623
}

.tox .reviews .rev-actions {
  margin-top: 6px
}

/* ---------- News ---------- */
.tox .news-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px
}

.tox .news {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 22px
}

.tox .post-big {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  background: var(--navy);
  color: #fff
}

.tox .post-big img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.tox .post-big::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 32, 74, 0) 45%, rgba(6, 32, 74, .85) 100%)
}

.tox .post-big .in {
  position: relative;
  z-index: 1;
  padding: 28px
}

.tox .post-big h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  margin-top: 10px
}

.tox .meta {
  font-size: 13px;
  color: var(--slate)
}

.tox .post-big .meta {
  color: #D5E3F7;
  margin-top: 10px
}

.tox .pill {
  display: inline-block;
  font: 600 12px var(--font-body);
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--royal)
}

.tox .post-big .pill {
  background: var(--g-primary-d);
  color: #fff
}

.tox .post-side {
  display: grid;
  gap: 22px;
  align-content: stretch
}

.tox .post {
  display: grid;
  grid-template-columns: 150px 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s
}

.tox .post:hover {
  border-color: var(--blue)
}

.tox .post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 170px
}

.tox .post .in {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: flex-start
}

.tox .post h3 {
  font-size: 17px;
  line-height: 1.35
}

/* ---------- Contact ---------- */
.tox .contact {
  background: linear-gradient(180deg, var(--soft) 0%, #fff 75%)
}

.tox .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 36px;
  margin-top: 52px;
  align-items: stretch
}

.tox .glass {
  background: var(--g-bright);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 24px 50px rgba(6, 32, 74, .18)
}

.tox .glass h3 {
  font-size: 22px;
  margin-bottom: 8px
}

.tox .glass>p {
  color: #D0E0F6;
  font-size: 15px
}

.tox .talk-steps {
  margin: 24px 0
}

.tox .talk-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  margin-bottom: 18px
}

.tox .talk-steps .n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
  font: 600 12px var(--font-head)
}

.tox .talk-steps b {
  display: block;
  font-size: 15px
}

.tox .talk-steps span {
  font-size: 14px;
  color: #D0E0F6
}

.tox .reach {
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding-top: 20px;
  display: grid;
  gap: 10px;
  font-size: 15px
}

.tox .reach a {
  display: flex;
  align-items: center;
  gap: 10px
}

.tox .reach svg {
  width: 17px;
  height: 17px;
  color: #8FC2FF
}

.tox .form {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: 0 24px 50px rgba(6, 32, 74, .08)
}

/* Inherited styling for the ConnecTribe embed's standard fields, if present */
.tox .form input,
.tox .form select,
.tox .form textarea {
  width: 100%;
  font: 400 15px var(--font-body);
  color: var(--navy);
  background: var(--pale);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px
}

.tox .form textarea {
  min-height: 104px;
  resize: vertical
}

.tox .form input:focus,
.tox .form select:focus,
.tox .form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(7, 107, 230, .18);
  background: #fff
}

/* ---------- FAQ ---------- */
.tox .faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: stretch
}

.tox .faq h2 {
  margin-bottom: 28px
}

.tox details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  transition: border-color .2s
}

.tox details[open] {
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(7, 107, 230, .1)
}

.tox summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  font: 600 16px var(--font-head);
  letter-spacing: -.01em
}

.tox summary::-webkit-details-marker {
  display: none
}

.tox summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  font: 500 20px/1 var(--font-body)
}

.tox details[open] summary::after {
  content: "\00d7";
  background: var(--g-primary-d);
  color: #fff
}

.tox details .a {
  padding: 0 22px 20px;
  font-size: 15px;
  color: var(--slate)
}

.tox .faq-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 500px
}

.tox .faq-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.tox .faq-img .box {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 18px 40px rgba(6, 32, 74, .2);
  border-radius: 16px;
  padding: 22px;
  display: grid;
  gap: 14px;
  justify-items: start
}

.tox .faq-img .box p {
  font-size: 14px;
  color: var(--slate);
  max-width: 340px
}

/* ---------- Final CTA ---------- */
.tox .cta-card {
  background: var(--g-bright);
  border-radius: 28px;
  color: #fff;
  text-align: center;
  padding: 80px 28px;
  position: relative;
  overflow: hidden
}

.tox .cta-card::before,
.tox .cta-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .14)
}

.tox .cta-card::before {
  width: 420px;
  height: 420px;
  left: -140px;
  top: -160px
}

.tox .cta-card::after {
  width: 520px;
  height: 520px;
  right: -180px;
  bottom: -260px
}

.tox .cta-card>* {
  position: relative
}

.tox .cta-card .eyebrow {
  color: #8FC2FF
}

.tox .cta-card h2 {
  max-width: 760px;
  margin: 0 auto 18px
}

.tox .cta-card h2 .hl {
  color: #8FC2FF
}

.tox .cta-card .lead {
  color: #D0E0F6;
  margin: 0 auto
}

.tox .cta-card .btn-row {
  justify-content: center;
  margin-top: 26px
}

.tox .cta-card .join {
  margin-top: 26px;
  font-size: 14px;
  color: #C4D6EF
}

.tox .cta-card .join b {
  color: #fff
}

/* ---------- Responsive ---------- */
@media (max-width:980px) {
  .tox .sec {
    padding: 72px 0
  }

  .tox .hero .wrap,
  .tox .about,
  .tox .services,
  .tox .why,
  .tox .split,
  .tox .founder,
  .tox .contact-grid,
  .tox .faq,
  .tox .news,
  .tox .reviews {
    grid-template-columns: minmax(0, 1fr)
  }

  .tox .hero .wrap,
  .tox .about,
  .tox .split,
  .tox .founder,
  .tox .faq {
    gap: 44px
  }

  .tox .why-intro {
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    padding: 44px 28px 64px
  }

  .tox .bars {
    right: 24px
  }

  .tox .reasons {
    padding: 36px 28px 44px
  }

  .tox .badge {
    left: 12px
  }

  .tox .reviews .img {
    min-height: 340px
  }
}

@media (max-width:640px) {
  .tox .post {
    grid-template-columns: 110px 1fr
  }

  .tox .svc-list a {
    grid-template-columns: 26px 1fr 38px
  }

  .tox .svc-list .p {
    display: none
  }

  /* Icon+number cells are too wide for three-up on phones — stack them */
  .tox .metrics {
    flex-direction: column
  }

  .tox .metrics>div {
    flex: 1 1 auto;
    padding: 14px 18px
  }

  .tox .metrics>div+div {
    border-left: 0;
    border-top: 1px solid var(--line)
  }

  .tox .trust {
    right: 8px
  }

  .tox .reasons {
    grid-template-columns: 1fr
  }
}

/* =========================================================================
   Shared header + footer — matched to the redesign (homepage only, since this
   file is enqueued only on the front page). The header stays on the brand
   gradient (var(--g-primary)) so the light logo keeps reading. Selectors mirror
   main.css so these win by load order. Move this block to a site-wide stylesheet
   once the whole site adopts the new design.
   ========================================================================= */

/* Utility bar */
.topbar {
  background: var(--deep);
  color: rgba(255, 255, 255, .82);
  font-family: var(--font-body)
}

.topbar a.topbar-item {
  color: rgba(255, 255, 255, .82)
}

.topbar a.topbar-item:hover {
  color: #8FC2FF
}

.topbar svg {
  color: #8FC2FF
}

/* Primary nav — brand gradient */
.navbar {
  background: var(--g-primary);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font-body)
}

.navbar .nav-links a {
  color: #fff
}

.navbar .nav-links a:hover {
  color: #BFDBFF
}

.navbar .nav-drop-btn {
  color: #fff
}

.navbar .nav-drop-btn svg {
  color: #fff
}

.nav-toggle {
  border-color: rgba(255, 255, 255, .4)
}

.nav-toggle span {
  background: #fff
}

/* Book consultation button pops white on the gradient */
.nav-cta .btn-primary {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid #fff
}

.nav-cta .btn-primary:hover {
  background: var(--soft);
  color: var(--navy)
}

/* Dropdown + mega panels stay light; recolour accents from teal to brand blue */
.nav-drop-menu a:hover {
  background: var(--soft);
  color: var(--blue)
}

.nav-mega-col h5 {
  color: var(--blue);
  font-family: var(--font-head)
}

.nav-mega-col a:hover {
  color: var(--blue)
}

/* Footer — brand gradient */
.footer {
  background: var(--g-bright);
  color: #C3D4EC;
  font-family: var(--font-body);
  border-top: 4px solid #0A78F0
}

.footer-about {
  color: #B7C8E3
}

.footer-col h4 {
  color: #fff;
  font-family: var(--font-head)
}

.footer-col ul a,
.footer-col li a {
  color: #B7C8E3
}

.footer-col ul a:hover,
.footer-col li a:hover {
  color: #fff
}

.footer-social .social-link {
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff
}

.footer-social .social-link:hover {
  background: rgba(255, 255, 255, .12)
}

.footer-offices {
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.footer-offices .fo-item {
  color: #B7C8E3
}

.footer-offices .fo-item b {
  color: #7FB6FF
}

.footer-offices .fo-item svg {
  color: #8FC2FF
}

.footer a.fo-item:hover {
  color: #fff
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #9DB4D6
}

.footer-legal a {
  color: #9DB4D6
}

.footer-legal a:hover {
  color: #fff
}
/* =====================================================================
   LIGHT SPLIT HERO — overrides the dark media hero. Reuses the same
   markup (.hero--media): copy on the left, the photo framed on the right
   with the gradient accent block + 10K+ badge. Bright, no dark overlay.
   ===================================================================== */
.tox .hero {
  background:
    radial-gradient(68% 88% at 82% 18%, rgba(7, 107, 230, .10), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--soft) 100%);
  color: var(--navy);
  min-height: clamp(600px, 82vh, 740px);
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden
}
.tox .hero-overlay { display: none }
.tox .hero-diagram { display: none }
.tox .hero .hero-copy .eyebrow,
.tox .hero h1,
.tox .hero .lead { text-shadow: none !important }
/* Offset gradient accent block behind the photo (peeks bottom-left) */
.tox .hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: auto;
  bottom: auto;
  right: calc((100% - min(1280px, 100%)) / 2 + 24px);
  top: 56px;
  height: calc(100% - 112px);
  width: min(47%, 580px);
  border-radius: 26px;
  background: var(--g-primary-d);
  opacity: .18;
  transform: translate(-22px, 24px)
}
/* Photo -> framed card, right side, aligned to the container edge */
.tox .hero-bg {
  right: calc((100% - min(1280px, 100%)) / 2 + 24px);
  left: auto;
  top: 56px;
  bottom: auto;
  height: calc(100% - 112px);
  width: min(47%, 580px);
  object-fit: cover;
  object-position: 60% center;
  border-radius: 24px;
  box-shadow: 0 44px 90px -34px rgba(6, 32, 74, .5);
  filter: none;
  z-index: 1
}
.tox .hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 56px;
  padding-bottom: 56px
}
.tox .hero-copy { max-width: 540px }
.tox .hero .eyebrow { color: var(--blue) }
.tox .hero h1 { color: var(--navy); text-shadow: none }
.tox .hero h1 .hl { color: var(--blue) }
.tox .hero .lead { color: var(--slate); text-shadow: none }
.tox .hero-stats div { border-left-color: var(--blue) }
.tox .hero-stats b { color: var(--navy) }
.tox .hero-stats span { color: var(--slate) }
.tox .hero-chips { margin-top: 30px; gap: 10px 12px }
.tox .hero-chips span {
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  box-shadow: 0 6px 16px -12px rgba(6, 32, 74, .3)
}
.tox .hero-chips svg { color: var(--blue) }
/* Buttons flip for the light background */
.tox .hero .btn-white { background: var(--g-primary-d); color: #fff; border-color: transparent }
.tox .hero .btn-white:hover { background: var(--g-secondary); color: #fff }
.tox .hero .btn-ghost-light { background: transparent; color: var(--navy); border-color: var(--navy) }
.tox .hero .btn-ghost-light:hover { background: var(--soft); border-color: var(--navy) }
/* 10K+ badge sits on the photo, top-right */
.tox .hero-badge {
  top: 84px;
  bottom: auto;
  right: calc((100% - min(1280px, 100%)) / 2 + 40px);
  left: auto
}
@media (max-width: 1024px) {
  .tox .hero { min-height: auto }
  .tox .hero::before { display: none }
  .tox .hero-badge { display: none }
  .tox .hero-bg {
    right: 0; left: 0; top: 0; bottom: 0;
    width: 100%; height: 100%;
    border-radius: 0; box-shadow: none;
    opacity: .10; object-position: center
  }
  .tox .hero .wrap { padding-top: 72px; padding-bottom: 72px }
  .tox .hero-copy { max-width: 100% }
}

/* ============================================================
   FULL-BLEED OFFICE HERO (.hero-bgimg) — homepage only
   Responsive art-directed bg image + centred overlay content.
   Overlay scales in vw so it stays aligned with the photo.
   ============================================================ */
.tox .hero-bgimg {
  position: relative;
  overflow: hidden;
  background: #EEF1F4;
  height: calc(100svh - 112px);
  max-height: 50vw;
  min-height: 470px;
}
.tox .hero-bgimg .hbg-pic {
  position: absolute;
  inset: 0;
  display: block;
}
.tox .hero-bgimg .hbg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}
.tox .hero-bgimg .hbg-content {
  position: absolute;
  z-index: 2;
  top: 9.5%;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 74%);
  text-align: center;
}
/* soft light halo so navy text always reads on the wall */
.tox .hero-bgimg .hbg-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 128%;
  height: 150%;
  background: radial-gradient(60% 55% at 50% 45%, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

/* ---- Eyebrow with flanking rules ---- */
.tox .hero-bgimg .hbg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--blue);
  font: 700 clamp(11px, 1vw, 15px) var(--font-head);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Headline ---- */
.tox .hero-bgimg h1 {
  margin: clamp(14px, 1.6vw, 26px) 0 0;
  color: var(--navy);
  font: 800 clamp(30px, 4.9vw, 82px)/1.02 var(--font-head);
  letter-spacing: -.028em;
}
.tox .hero-bgimg h1 .hl { color: var(--blue) ;
    background: var(--g-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: max-content;
}

/* ---- Lead ---- */
.tox .hero-bgimg .hbg-lead {
  margin: clamp(12px, 1.4vw, 22px) auto 0;
  max-width: 620px;
  color: #33445E;
  font: 500 clamp(14px, 1.18vw, 20px)/1.5 var(--font-body);
}

/* ---- Actions ---- */
.tox .hero-bgimg .hbg-actions {
  margin-top: clamp(20px, 2.2vw, 38px);
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tox .hero-bgimg .hbg-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: clamp(46px, 3.6vw, 60px);
  padding: 0 clamp(20px, 1.8vw, 30px);
  background: var(--g-primary-d);
  color: #fff;
  border-radius: 12px;
  font: 600 clamp(14px, 1.05vw, 17px) var(--font-head);
  text-decoration: none;
  box-shadow: 0 16px 32px -14px rgba(7, 61, 136, .55);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.tox .hero-bgimg .hbg-cta svg { width: 1.1em; height: 1.1em }
.tox .hero-bgimg .hbg-cta:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -16px rgba(7, 61, 136, .62);
}
.tox .hero-bgimg .hbg-ghost {
  display: inline-flex;
  align-items: center;
  height: clamp(46px, 3.6vw, 60px);
  padding: 0 clamp(20px, 1.8vw, 30px);
  background: rgba(255, 255, 255, .85);
  color: var(--navy);
  border: 1.5px solid var(--blue);
  border-radius: 12px;
  font: 600 clamp(14px, 1.05vw, 17px) var(--font-head);
  text-decoration: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background .18s ease, color .18s ease;
}
.tox .hero-bgimg .hbg-ghost:hover { background: var(--g-primary-d); border-color: transparent; color: #fff }

/* ---- Feature row ---- */
.tox .hero-bgimg .hbg-feats {
  margin-top: clamp(22px, 2.6vw, 44px);
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 44px);
  flex-wrap: wrap;
  justify-content: center;
}
.tox .hero-bgimg .hbg-feat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.tox .hero-bgimg .hbg-feat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: clamp(-8px, -1.2vw, -22px);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: rgba(6, 32, 74, .18);
}
.tox .hero-bgimg .hbg-feat .ic {
  display: grid;
  place-items: center;
  width: clamp(38px, 3.2vw, 52px);
  height: clamp(38px, 3.2vw, 52px);
  border-radius: 50%;
  background: rgba(7, 107, 230, .12);
  color: var(--blue);
  flex: none;
}
.tox .hero-bgimg .hbg-feat .ic svg {
  width: 50%;
  height: 50%;
}
.tox .hero-bgimg .hbg-feat b {
  display: block;
  color: var(--navy);
  font: 800 clamp(16px, 1.5vw, 24px) var(--font-head);
  line-height: 1;
}
.tox .hero-bgimg .hbg-feat > div span {
  display: block;
  margin-top: 4px;
  color: #55627A;
  font: 500 clamp(11px, .95vw, 15px) var(--font-body);
  text-align: left;
}
.tox .hero-bgimg .hbg-feat > div { text-align: left }

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .tox .hero-bgimg { max-height: 68vw }
  .tox .hero-bgimg .hbg-content { top: 8%; width: min(660px, 82%) }
  .tox .hero-bgimg h1 { font-size: clamp(30px, 6vw, 58px) }
  .tox .hero-bgimg .hbg-eyebrow { font-size: clamp(11px, 1.5vw, 14px) }
  .tox .hero-bgimg .hbg-lead { font-size: clamp(14px, 1.9vw, 18px) }
  .tox .hero-bgimg .hbg-cta,
  .tox .hero-bgimg .hbg-ghost { height: 50px; font-size: 15px }
  .tox .hero-bgimg .hbg-feat b { font-size: 20px }
  .tox .hero-bgimg .hbg-feat > div span { font-size: 13px }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .tox .hero-bgimg {
    height: clamp(480px, 74svh, 560px);
    max-height: none;
    min-height: 480px;
  }
  .tox .hero-bgimg .hbg-content {
    top: 0;
    height: 80%;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .tox .hero-bgimg .hbg-eyebrow {
    gap: 8px;
    font-size: 10px;
    letter-spacing: .06em;
    white-space: normal;
    justify-content: center;
  }
  .tox .hero-bgimg h1 { font-size: clamp(22px, 6.9vw, 33px); margin-top: 12px; letter-spacing: -.02em }
  .tox .hero-bgimg .hbg-lead { font-size: 13px; line-height: 1.5; margin-top: 12px; max-width: 320px }
  .tox .hero-bgimg .hbg-actions {
    margin-top: 20px;
    gap: 10px;
    flex-direction: column;
    align-items: center;
  }
  .tox .hero-bgimg .hbg-cta,
  .tox .hero-bgimg .hbg-ghost {
    height: 46px;
    font-size: 14px;
    padding: 0 22px;
    width: min(300px, 86%);
    white-space: nowrap;
    justify-content: center;
  }
  .tox .hero-bgimg .hbg-feats {
    margin-top: 22px;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 16px;
  }
  .tox .hero-bgimg .hbg-feat {
    flex: 0 0 92px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
  }
  .tox .hero-bgimg .hbg-feat > div { text-align: center }
  .tox .hero-bgimg .hbg-feat .ic { width: 34px; height: 34px }
  .tox .hero-bgimg .hbg-feat b { font-size: 15px }
  .tox .hero-bgimg .hbg-feat > div span { font-size: 10px; line-height: 1.3 }
  .tox .hero-bgimg .hbg-feat:not(:last-child)::after { display: none }
}