:root {
  --paper:#f7f9fc;
  --ink:#102f50;
  --muted:#5c6d80;
  --line:#d9e3ed;
  --orange:#E86A38;
  --blue:#075da8
}

* {
  box-sizing:border-box
}

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

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit
}

a:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:6px
}

.wrap {
  max-width:1400px;
  margin:auto;
  padding:0 6%
}

header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand {
  text-decoration:none;
  font-size:25px;
  letter-spacing:-1.3px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:13px
}

.mark {
  background:var(--orange);
  color:var(--paper);
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  font-size:20px;
  letter-spacing:-1px;
  border-radius:50%
}

nav {
  display:flex;
  gap:32px;
  font-size:13px
}

nav a {
  text-decoration:none
}

nav a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.hero {
  padding:91px 0 78px;
  position:relative
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px
}

.dot {
  height:7px;
  width:7px;
  background:var(--orange);
  border-radius:50%
}

h1 {
  font-size:clamp(64px,8.6vw,120px);
  line-height:.99;
  letter-spacing:-.075em;
  font-weight:500;
  margin:34px 0 35px;
  max-width:1060px
}

h1 em {
  font-style:normal;
  color:var(--orange)
}

.hero-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px
}

.hero p {
  font-size:19px;
  line-height:1.65;
  max-width:490px;
  color:var(--muted);
  margin:0
}

.button {
  display:inline-flex;
  align-items:center;
  gap:39px;
  padding:18px 23px;
  background:var(--ink);
  color:white;
  text-decoration:none;
  border-radius:4px;
  font-size:13px;
  white-space:nowrap
}

.button:hover {
  background:#3b4c40
}

.button span {
  font-size:20px
}

.section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding:28px 0
}

.section-title h2 {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:2px;
  margin:0
}

.section-title span {
  font-size:12px;
  color:var(--muted)
}

.products {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.product {
  min-height:283px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:27px;
  display:flex;
  flex-direction:column;
  transition:transform .2s,border-color .2s;
  background:#f8f7f1
}

.product:hover {
  transform:translateY(-4px);
  border-color:#929e8e
}

.product-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:33px
}

.icon {
  width:47px;
  height:47px;
  background:var(--tint);
  color:var(--color);
  border-radius:12px;
  display:grid;
  place-items:center
}

.icon img {
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.number {
  font-size:11px;
  color:#8a928a
}

.product h3 {
  font-size:27px;
  letter-spacing:-1px;
  margin:0 0 12px;
  font-weight:500
}

.product h3 strong {
  font-weight:800
}

.product p {
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  margin:0;
  max-width:350px
}

.purpose {
  margin:88px 0 75px;
  background:var(--ink);
  border-radius:7px;
  padding:53px;
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:65px;
  color:var(--paper)
}

.purpose .eyebrow {
  color:#bdc8b9;
  align-items:flex-start;
  padding-top:10px
}

.purpose h2 {
  font-size:clamp(28px,3.2vw,44px);
  font-weight:400;
  letter-spacing:-1.6px;
  line-height:1.16;
  margin:0 0 22px
}

.purpose p {
  color:#bec8bc;
  line-height:1.7;
  font-size:15px;
  margin:0;
  max-width:530px
}

footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 0 34px;
  font-size:11px;
  color:var(--muted)
}

footer a {
  text-decoration:none
}

footer .brand {
  font-size:18px;
  color:var(--ink);
  gap:9px
}

footer .mark {
  height:30px;
  width:30px;
  font-size:14px
}

@media(max-width:750px) {
  .wrap {
    padding:0 6%
  }

  header {
    height:88px
  }

  .brand {
    font-size:21px
  }

  nav {
    gap:18px;
    font-size:12px
  }

  .hero {
    padding:60px 0
  }

  .hero-bottom {
    display:block
  }

  .hero p {
    font-size:17px
  }

  .button {
    margin-top:28px
  }

  h1 {
    font-size:clamp(55px,12vw,90px);
    margin-top:29px
  }

  .products {
    grid-template-columns:1fr 1fr
  }

  .product,.product:nth-child(4),.product:nth-child(5),.product:nth-child(6) {
    min-height:260px;
    padding:23px
  }

  .product:last-child {
    min-height:260px
  }

  .purpose {
    grid-template-columns:1fr;
    gap:26px;
    padding:32px;
    margin:55px 0 40px
  }

  footer {
    gap:22px;
    flex-wrap:wrap
  }

  .section-title span {
    font-size:10px
  }

}

@media(max-width:450px) {
  nav a:last-child {
    display:none
  }

  .products {
    grid-template-columns:1fr
  }

  .product,.product:nth-child(4),.product:nth-child(5),.product:last-child {
    min-height:235px
  }

  .section-title {
    align-items:flex-start;
    gap:20px
  }

  .section-title span {
    text-align:right;
    max-width:120px
  }

  .hero .eyebrow {
    font-size:10px;
    letter-spacing:1.5px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  .product {
    transition:none
  }

}

.brand-logo {
  width:112px;
  height:57px;
  object-fit:contain;
  display:block
}

.brand {
  gap:8px
}

header .brand {
  font-size:25px
}

.button {
  background:var(--blue);
  border-radius:8px;
  font-weight:600
}

.button:hover {
  background:var(--ink)
}

.product {
  background:#fff;
  min-height:350px;
  border-radius:12px
}

.product:hover {
  border-color:#79b9e5
}

.product:nth-child(odd) {
  --color:#075da8!important;
  --tint:#e6f3fd!important
}

.product:nth-child(even) {
  --color:#b84b21!important;
  --tint:#fff0e7!important
}

.product p {
  margin-bottom:24px
}

.number {
  color:#62748a
}

.card-button {
  display:inline-flex;
  align-self:flex-start;
  justify-content:center;
  margin-top:auto;
  padding:12px 17px;
  border:1px solid var(--blue);
  border-radius:7px;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  transition:background .18s,border-color .18s
}

.card-button:hover {
  background:#b7471d;
  border-color:#b7471d
}

.purpose .eyebrow,.purpose p {
  color:#c4d8e8
}

footer .brand-logo {
  width:84px;
  height:43px
}

footer .brand {
  font-size:20px
}

@media(max-width:750px) {
  header .brand {
    font-size:21px
  }

  .brand-logo {
    width:88px;
    height:48px
  }

  .product,.product:nth-child(4),.product:nth-child(5),.product:nth-child(6) {
    min-height:340px
  }

  .button {
    margin-top:28px
  }

}

@media(max-width:450px) {
  header .brand {
    font-size:20px
  }

  .brand-logo {
    width:76px;
    height:44px
  }

  .product,.product:nth-child(4),.product:nth-child(5),.product:nth-child(6) {
    min-height:320px
  }

  nav {
    gap:15px
  }

}

.brand {
  align-items:center
}

.brand-logo {
  height:auto
}

footer .brand-logo {
  height:auto
}

header .brand,footer .brand {
  align-items:flex-end;
  gap:12px
}

@media(max-width:750px) {
}

@media(max-width:450px) {
  header .brand {
    gap:8px
  }

}

.menu-toggle {
  display:none
}

header {
  position:relative
}

@media(max-width:750px) {
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:10px;
    background:transparent;
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--ink);
    cursor:pointer
  }

  .menu-toggle span {
    display:block;
    width:22px;
    height:2px;
    background:currentColor;
    border-radius:2px
  }

  .menu-toggle:focus-visible {
    outline:3px solid var(--orange);
    outline-offset:3px
  }

  header nav {
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:190px;
    z-index:10;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 10px 28px #102f5014;
    border-radius:10px;
    padding:10px;
    flex-direction:column;
    gap:0
  }

  header nav.is-open {
    display:flex
  }

  header nav a,header nav a:last-child {
    display:block;
    padding:14px 16px;
    font-size:14px;
    border-radius:6px
  }

  header nav a:hover {
    background:#e6f3fd;
    text-decoration:none
  }

}

@media(max-width:450px) {
}

.mobile-menu {
  display:none
}

.menu-toggle {
  list-style:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

.menu-toggle::-webkit-details-marker {
  display:none
}

.menu-toggle::marker {
  content:""
}

@media(max-width:750px) {
  header nav.desktop-navigation {
    display:none
  }

  .mobile-menu {
    display:block
  }

  .mobile-menu .menu-toggle {
    display:flex;
    box-sizing:border-box
  }

  .mobile-menu:not([open]) .mobile-navigation {
    display:none
  }

  .mobile-menu[open] .mobile-navigation {
    display:flex
  }

  .mobile-menu[open] .menu-toggle {
    background:#e6f3fd;
    border-color:#79b9e5
  }

}

.product:nth-child(1) {
  --color:#476d46;
  --tint:#e4ebdb
}

.product:nth-child(2) {
  --color:#a95c41;
  --tint:#f4e4d9
}

.product:nth-child(3) {
  --color:#3d6869;
  --tint:#dfeae6
}

.product:nth-child(4) {
  --color:#a27e30;
  --tint:#efe8d2
}

.product:nth-child(5) {
  --color:#876279;
  --tint:#eee1e9
}

.product:nth-child(6) {
  --color:#547a80;
  --tint:#deebed
}

/* App identity: set one app-* class on <body>, then change both .app-name labels. */
:root {
  --app-color:#E86A38
}

.app-venture {
  --app-color:#E86A38
}

.app-golf {
  --app-color:#287A46
}

.app-parent {
  --app-color:#A95836
}

.app-wealth {
  --app-color:#075DA8
}

.app-goods {
  --app-color:#9A6B18
}

.app-match {
  --app-color:#A64670
}

.app-well {
  --app-color:#087F86
}

header .brand,footer .brand {
  align-items:flex-end
}

.brand .app-name {
  display:block;
  font-family:Arial,Helvetica,sans-serif;
  font-size:58px;
  font-weight:700;
  line-height:.75;
  letter-spacing:-2px;
  color:var(--app-color);
  margin-bottom:1px;
  white-space:nowrap
}

footer .brand .app-name {
  font-size:43px;
  letter-spacing:-1.4px
}

@media(max-width:750px) {
  header .brand .app-name {
    font-size:46px;
    letter-spacing:-1.5px
  }

}

@media(max-width:450px) {
  header .brand .app-name {
    font-size:40px;
    letter-spacing:-1.2px
  }

}

/* Hero: the still image is always underneath the optional video. */
.hero {
  margin:30px 0 52px;
  padding:76px 48px;
  min-height:570px;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  background:#102f50;
  display:flex;
  align-items:center
}

.hero-media,.hero-shade {
  position:absolute;
  inset:0;
  z-index:-2
}

.hero-image,.hero-video {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  position:absolute;
  inset:0
}

.hero-video {
  opacity:0;
  transition:opacity .4s
}

.hero.is-playing .hero-video {
  opacity:1
}

.hero-shade {
  z-index:-1;
  background:linear-gradient(90deg,rgba(6,28,51,.85),rgba(6,28,51,.58) 44%,rgba(6,28,51,.12) 78%)
}

.hero-content {
  width:100%
}

.hero .eyebrow {
  color:#e4f3ff;
  font-size:10px;
  letter-spacing:1.7px
}

.hero h1 {
  color:white;
  font-size:clamp(52px,6.2vw,86px);
  line-height:1.04;
  letter-spacing:-.065em;
  margin:28px 0
}

.hero h1 em {
  color:#ffae6a
}

.hero p {
  color:#f1f6fc;
  font-size:17px;
  line-height:1.7;
  max-width:420px
}

.hero-bottom {
  display:block
}

.hero .button {
  margin-top:27px;
  border:1px solid #7fbee5
}

.video-toggle {
  position:absolute;
  right:18px;
  bottom:18px;
  background:#102f50e6;
  border:1px solid #b7d8ee;
  color:white;
  border-radius:6px;
  padding:9px 12px;
  font-size:12px;
  cursor:pointer
}

.video-toggle:focus-visible {
  outline:3px solid #ffae6a;
  outline-offset:3px
}

[hidden] {
  display:none!important
}

@media(max-width:750px) {
  .hero {
    padding:48px 28px;
    min-height:560px;
    margin:22px 0 38px
  }

  .hero h1 {
    font-size:clamp(48px,8.5vw,70px)
  }

  .hero p {
    max-width:350px;
    font-size:16px
  }

  .hero .eyebrow {
    max-width:340px;
    line-height:1.6
  }

  .hero-image,.hero-video {
    object-position:65% center
  }

  .hero-shade {
    background:linear-gradient(90deg,#061c33d9,#061c3399 65%,#061c334d)
  }

}

@media(max-width:450px) {
  .hero {
    padding:40px 22px;
    min-height:560px
  }

  .hero h1 {
    font-size:49px
  }

  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1.2px
  }

  .hero p br {
    display:none
  }

  .hero p {
    font-size:15px
  }

  .hero .button {
    font-size:12px
  }

}

@media(prefers-reduced-motion:reduce) {
  .hero-video {
    display:none;
    transition:none
  }

}

/* Compact masthead and hero spacing. */
header {
  height:78px
}

.hero {
  margin:14px 0 32px;
  padding:44px 40px;
  min-height:450px
}

.hero h1 {
  font-size:clamp(48px,5.5vw,74px);
  margin:20px 0
}

.hero .button {
  margin-top:20px
}

.hero-image,.hero-video {
  object-position:center 60%
}

@media(max-width:750px) {
  header {
    height:68px
  }

  .brand-logo {
    width:82px
  }

  header .brand .app-name {
    font-size:43px
  }

  .hero {
    margin:12px 0 28px;
    padding:34px 26px;
    min-height:440px
  }

  .hero h1 {
    font-size:clamp(46px,7.5vw,62px)
  }

  .hero-image,.hero-video {
    object-position:65% 60%
  }

}

@media(max-width:450px) {
  header {
    height:62px
  }

  .brand-logo {
    width:72px
  }

  header .brand .app-name {
    font-size:38px
  }

  .menu-toggle {
    width:40px;
    height:40px;
    padding:8px
  }

  .hero {
    margin:10px 0 26px;
    padding:30px 22px;
    min-height:430px
  }

  .hero h1 {
    font-size:46px;
    margin:18px 0
  }

  .hero .button {
    margin-top:18px
  }

}