@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: .25rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono)
  }
}
@layer base {
  *, :after, :before {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }
  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit
  }
  b, strong {
    font-weight: bolder
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em
  }
  small {
    font-size: 80%
  }
  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative
  }
  sub {
    bottom: -.25em
  }
  sup {
    top: -.5em
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
  }
  :-moz-focusring {
    outline: auto
  }
  progress {
    vertical-align: baseline
  }
  summary {
    display: list-item
  }
  ol, ul, menu {
    list-style: none
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block
  }
  img, video {
    max-width: 100%;
    height: auto
  }
  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px
  }
  ::file-selector-button {
    margin-inline-end: 4px
  }
  ::placeholder {
    opacity: 1
  }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color: currentColor
    }
    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent)
      }
    }
  }
  textarea {
    resize: vertical
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit
  }
  ::-webkit-datetime-edit {
    display: inline-flex
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0
  }
  ::-webkit-datetime-edit {
    padding-block: 0
  }
  ::-webkit-datetime-edit-year-field {
    padding-block: 0
  }
  ::-webkit-datetime-edit-month-field {
    padding-block: 0
  }
  ::-webkit-datetime-edit-day-field {
    padding-block: 0
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block: 0
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block: 0
  }
  ::-webkit-datetime-edit-second-field {
    padding-block: 0
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1
  }
  :-moz-ui-invalid {
    box-shadow: none
  }
  button, input:where([type=button], [type=reset], [type=submit]) {
    -webkit-appearance: button;
    appearance: button
  }
  ::file-selector-button {
    -webkit-appearance: button;
    appearance: button
  }
  ::-webkit-inner-spin-button {
    height: auto
  }
  ::-webkit-outer-spin-button {
    height: auto
  }
  [hidden]:where(:not([hidden=until-found])) {
    display: none !important
  }
}
@layer components;
@layer utilities {
  .relative {
    position: relative
  }
  .start {
    inset-inline-start: var(--spacing)
  }
  .table {
    display: table
  }
}
:root {
  --navy: #102a43;
  --ink: #17324d;
  --cream: #fbf7f0;
  --sand: #d9905f;
  --gold: #e8b86a;
  --mist: #eef3f2;
  --muted: #657786
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  background: var(--cream);
  color: var(--ink);
  margin: 0;
  font-family: Arial, Noto Sans TC, sans-serif
}
a {
  color: inherit;
  text-decoration: none
}
button, input, select, textarea {
  font: inherit
}
nav {
  z-index: 10;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fbf7f0eb;
  border-bottom: 1px solid #17324d18;
  justify-content: space-between;
  align-items: center;
  height: 82px;
  padding: 0 6vw;
  display: flex;
  position: sticky;
  top: 0
}
.brand {
  font-size: 22px;
  font-weight: 800
}
.brand span, .eyebrow {
  color: var(--sand)
}
.links {
  gap: 36px;
  font-size: 14px;
  display: flex
}
.navCta, .button {
  background: var(--sand);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 15px 24px;
  font-weight: 800
}
.navCta {
  padding: 12px 20px
}
.hero {
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 5vw;
  min-height: calc(100vh - 82px);
  padding: 55px 6vw 70px;
  display: grid
}
.eyebrow {
  letter-spacing: .17em;
  font-size: 12px;
  font-weight: 800
}
.hero h1, .section h2, .consult h2 {
  letter-spacing: -.035em;
  font-family: Georgia, Noto Serif TC, serif;
  font-weight: 500
}
.hero h1 {
  color: var(--navy);
  margin: 20px 0;
  font-size: clamp(52px, 6vw, 86px);
  line-height: 1.04
}
.hero h1 em {
  color: var(--sand);
  font-style: normal
}
.hero h3 {
  font-size: 20px
}
.lead {
  color: var(--muted);
  max-width: 590px;
  line-height: 1.8
}
.actions {
  align-items: center;
  gap: 28px;
  margin: 32px 0;
  display: flex
}
.trust {
  color: var(--muted);
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
  display: flex
}
.trust span:before {
  content: "✓";
  color: #86a69a;
  margin-right: 6px
}
.desert {
  background: linear-gradient(#d6e6e6 0 52%, #efc69d 52%);
  border-radius: 220px 220px 24px 24px;
  height: min(650px, 72vh);
  min-height: 500px;
  position: relative;
  overflow: hidden
}
.sun {
  background: #f4c77b;
  border-radius: 50%;
  width: 160px;
  height: 160px;
  position: absolute;
  top: 12%;
  right: 12%
}
.mountain {
  clip-path: polygon(0 100%, 20% 45%, 34% 72%, 53% 15%, 73% 68%, 88% 40%, 100% 100%);
  width: 120%;
  position: absolute;
  bottom: 0;
  left: -10%
}
.m1 {
  background: #bc7d5f;
  height: 48%
}
.m2 {
  background: #915c45;
  height: 33%
}
.skyline {
  align-items: flex-end;
  gap: 8px;
  height: 27%;
  display: flex;
  position: absolute;
  bottom: 13%;
  left: 18%;
  right: 18%
}
.skyline b {
  background: var(--navy);
  width: 20%;
  height: 40%
}
.skyline b:nth-child(2) {
  height: 68%
}
.skyline b:nth-child(3) {
  height: 90%
}
.skyline b:nth-child(4) {
  height: 58%
}
.skyline b:nth-child(5) {
  height: 34%
}
.desert aside {
  background: #fbf7f0ee;
  width: 55%;
  padding: 22px;
  position: absolute;
  bottom: 6%;
  left: 7%
}
.desert small {
  color: var(--sand);
  letter-spacing: .12em;
  font-size: 10px
}
.desert strong {
  margin-top: 10px;
  font-family: Georgia, Noto Serif TC, serif;
  font-size: 20px;
  line-height: 1.4;
  display: block
}
.section {
  padding: 115px 7vw
}
.section header {
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 7vw;
  max-width:100%;
  margin-bottom: 65px;
  display: grid
}
.section h2, .consult h2 {
  color: var(--navy);
  margin: 18px 0 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.15
}
.section header > p:last-child {
  color: var(--muted);
  line-height: 1.8
}
.featureGrid {
  border-top: 1px solid #ccd6d7;
  border-left: 1px solid #ccd6d7;
  grid-template-columns: 1fr 1fr;
  display: grid
}
.featureGrid article {
  border-bottom: 1px solid #ccd6d7;
  border-right: 1px solid #ccd6d7;
  min-height: 230px;
  padding: 38px
}
.featureGrid b, .stepGrid b {
  color: var(--sand);
  font-size: 12px
}
.featureGrid h3 {
  margin: 42px 0 12px;
  font-size: 25px
}
.featureGrid p, .stepGrid p {
  color: var(--muted);
  line-height: 1.7
}
.compare {
  background: var(--mist)
}
.compare header {
  display: block
}
.table {
  width: 100%;
  border-top: 2px solid var(--navy)
}
.row {
  margin: 0;
  border-bottom: 1px solid #cad5d5;
  grid-template-columns: .7fr 1fr 1.3fr;
  gap: 20px;
  padding: 22px 18px;
  display: grid
}
.row:nth-child(2n) {
  background: #fff8
}
.row span {
  color: var(--muted)
}
.row .ours {
  color: var(--navy);
  font-weight: 800
}
.head {
  letter-spacing: .08em;
  font-weight: 800
}
.process {
  background: var(--navy);
  color: #fff
}
.process h2 {
  color: #fff
}
.process header > p:last-child {
  color: #b9cad5
}
.stepGrid {
  border-top: 1px solid #496277;
  grid-template-columns: repeat(4, 1fr);
  display: grid
}
.stepGrid article {
  border-right: 1px solid #496277;
  min-height: 210px;
  padding: 28px 22px
}
.stepGrid article:last-child {
  background: var(--sand)
}
.stepGrid article:last-child b, .stepGrid article:last-child p {
  color: #fff
}
.stepGrid h3 {
  margin: 45px 0 10px;
  font-size: 20px
}
.stepGrid p {
  font-size: 14px
}
.consult {
  background: #f3e5d7;
  grid-template-columns: .85fr 1.15fr;
  gap: 8vw;
  padding: 115px 7vw;
  display: grid
}
.consultCopy > p:not(.eyebrow) {
  color: var(--muted);
  max-width: 480px;
  line-height: 1.8
}
.consultCopy > small {
  border-left: 3px solid var(--sand);
  margin-top: 30px;
  padding-left: 18px;
  display: block
}
/*form, .success {
  background: #fff;
  padding: 42px
}
form {
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  display: grid
}
label {
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  display: flex
}*/
.full, form button, form > small {
  grid-column: 1/-1
}
input, select, textarea {
  background: 0 0;
  border: 0;
  border-bottom: 1px solid #b9c5c7;
  outline: none;
  padding: 12px 2px
}
textarea {
  resize: vertical;
  min-height: 70px
}
form > small {
  color: var(--muted);
  line-height: 1.5
}
.success {
  flex-direction: column;
  justify-content: center;
  display: flex
}
.success > b {
  color: #86a69a;
  font-size: 42px
}
.success h3 {
  font-size: 30px
}
.success p {
  color: var(--muted)
}
.success button {
  border: 0;
  border-bottom: 1px solid var(--navy);
  cursor: pointer;
  background: 0 0;
  align-self: flex-start;
  padding: 8px 0
}
footer {
  color: #fff;
  background: #0c2134;
  flex-wrap: wrap;
  align-items: center;
  gap: 35px;
  padding: 55px 7vw 28px;
  display: flex
}
footer p {
  color: #b9cad5
}
footer small {
  color: #7890a2;
  border-top: 1px solid #31495e;
  width: 100%;
  padding-top: 25px
}
@media (max-width:900px) {
  .links {
    display: none
  }
  .hero, .section header, .consult, .featureGrid, .stepGrid {
    grid-template-columns: 1fr
  }
  .stepGrid article {
    min-height: 170px
  }
  .desert {
    height: 560px
  }
  .section, .consult {
    padding: 85px 6vw
  }
}
@media (max-width:560px) {
  nav {
    padding: 0 20px
  }
  .hero {
    padding: 35px 20px 55px
  }
  .hero h1 {
    font-size: 51px
  }
  .actions {
    flex-direction: column;
    align-items: flex-start
  }
  .desert {
    height: 470px;
    min-height: 420px
  }
  .section, .consult {
    padding: 75px 20px
  }
  .section header {
    display: block
  }
  .section h2, .consult h2 {
    font-size: 40px
  }
  .featureGrid article {
    padding: 28px
  }
  .row {
    gap: 7px;
    padding: 16px 7px;
    font-size: 12px
  }
  .head {
    font-size: 9px
  }
  form {
    grid-template-columns: 1fr;
    padding: 26px
  }
  .full, form button, form > small {
    grid-column: 1
  }
  .consult {
    gap: 45px
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
}
.introNav {
  border-bottom: 1px solid #17324d18;
  grid-column: 1/-1;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  display: flex
}
.hero {
  grid-template-rows: auto 1fr;
  gap: 28px 5vw;
  min-height: 100vh;
  padding-top: 0
}
.closing {
  border-top: 1px solid #cdbba9;
  flex-wrap: wrap;
  grid-column: 1/-1;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
  padding-top: 28px;
  display: flex
}
.closing p {
  color: var(--muted)
}
.closing small {
  color: var(--muted);
  margin-left: auto
}
@media (max-width:560px) {
  .introNav {
    height: 70px
  }
  .hero {
    padding-top: 0
  }
  .closing {
    display: block
  }
  .closing small {
    margin: 18px 0 0;
    display: block
  }
}
.heroPhoto {
  background: #e6d8c8;
  border-radius: 220px 220px 24px 24px;
  height: min(650px, 72vh);
  min-height: 500px;
  position: relative;
  overflow: hidden
}
.heroPhoto > img {
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(.88)contrast(.97);
  width: 100%;
  height: 100%;
  display: block
}
.heroPhoto:after {
  content: "";
  background: linear-gradient(#0000 55%, #102a432e);
  position: absolute;
  inset: 0
}
.heroPhoto aside {
  z-index: 1;
  background: #fbf7f0ee;
  width: 55%;
  padding: 22px;
  position: absolute;
  bottom: 6%;
  left: 7%;
  box-shadow: 0 18px 50px #102a4322
}
.heroPhoto small {
  color: var(--sand);
  letter-spacing: .12em;
  font-size: 10px
}
.heroPhoto strong {
  margin-top: 10px;
  font-family: Georgia, Noto Serif TC, serif;
  font-size: 20px;
  line-height: 1.4;
  display: block
}
.humanMoment {
  background: var(--navy);
  color: #fff;
  grid-template-columns: 1.35fr .65fr;
  min-height: 390px;
  margin-bottom: 58px;
  display: grid;
  overflow: hidden
}
.humanMoment > img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  min-height: 390px;
  display: block
}
.humanMoment > div {
  flex-direction: column;
  justify-content: center;
  padding: 46px 42px;
  display: flex
}
.humanMoment small {
  color: var(--gold);
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 800
}
.humanMoment blockquote {
  color: #fff;
  margin: 24px 0;
  font-family: Georgia, Noto Serif TC, serif;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.4
}
.humanMoment p {
  color: #c7d3dc;
  line-height: 1.75
}
@media (max-width:900px) {
  .heroPhoto {
    height: 560px
  }
  .humanMoment {
    grid-template-columns: 1fr
  }
  .humanMoment > img {
    height: 430px
  }
}
@media (max-width:560px) {
  .heroPhoto {
    border-radius: 140px 140px 18px 18px;
    height: 470px;
    min-height: 420px
  }
  .heroPhoto aside {
    width: 76%;
    padding: 18px
  }
  .humanMoment {
    margin-left: -20px;
    margin-right: -20px
  }
  .humanMoment > img {
    height: 300px;
    min-height: 300px
  }
  .humanMoment > div {
    padding: 34px 26px
  }
}
.heroImmersive {
  isolation: isolate;
  color: #fff;
  background: var(--navy);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100vh;
  padding: 0 7vw 72px;
  display: flex;
  position: relative;
  overflow: hidden
}
.heroImmersive:after {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, #071725eb 0%, #0a1f31bf 39%, #0a1f3147 70%, #0717252e 100%), linear-gradient(#0000 52%, #07172580);
  position: absolute;
  inset: 0
}
.heroBackdrop {
  z-index: -2;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0
}
.heroImmersive .introNav {
  color: #fff;
  border-bottom-color: #fff4;
  width: 100%
}
.heroImmersive .brand span {
  color: var(--gold)
}
.heroImmersive .links {
  font-weight: 700
}
.heroImmersive .navCta {
  background: #ed8b2d
}
.heroContent {
  width: min(780px, 65vw);
  margin-top: clamp(72px, 13vh, 140px)
}
.heroImmersive h1 {
  color: #f2c56f !important;
  letter-spacing: -.045em;
  max-width: 760px;
  margin: 16px 0 18px;
  font-family: Arial, Noto Sans TC, sans-serif;
  font-size: clamp(54px, 6vw, 86px);
  font-weight: 900;
  line-height: 1.08
}
.heroImmersive h2 {
  color: #fff;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  font-family: Georgia, Noto Serif TC, serif;
  font-size: clamp(25px, 2.4vw, 38px);
  font-weight: 500
}
.heroImmersive .lead {
  color: #edf2f4;
  text-shadow: 0 1px 14px #071725;
  max-width: 720px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.9
}
.heroImmersive .actions > a:not(.button) {
  color: #fff;
  font-weight: 700
}
.heroImmersive .button {
  background: #ed8b2d !important;
  box-shadow: 0 12px 30px #0004
}
.heroImmersive .trust {
  color: #edf2f4;
  font-weight: 700
}
.heroImmersive .trust span:before {
  color: var(--gold)
}
.sectionPhoto {
  background: #fff;
  grid-template-columns: 1.35fr .65fr;
  min-height: 360px;
  margin: 0 0 58px;
  display: grid;
  overflow: hidden
}
.sectionPhoto > img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block
}
.sectionPhoto figcaption {
  background: #fff8f0;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  display: flex
}
.sectionPhoto small, .processMoment small {
  color: var(--sand);
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 800
}
.sectionPhoto strong, .processMoment strong {
  color: var(--navy);
  margin-top: 18px;
  font-family: Georgia, Noto Serif TC, serif;
  font-size: clamp(25px, 2.6vw, 37px);
  font-weight: 500;
  line-height: 1.45;
  display: block
}
.processMoment {
  background: #173d5a;
  grid-template-columns: 1.15fr .85fr;
  min-height: 380px;
  margin-bottom: 58px;
  display: grid;
  overflow: hidden
}
.processMoment > img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: block
}
.processMoment > div {
  flex-direction: column;
  justify-content: center;
  padding: 42px;
  display: flex
}
.processMoment small {
  color: var(--gold)
}
.processMoment strong {
  color: #fff
}
.processMoment p {
  color: #c4d2dc;
  line-height: 1.75
}
.consultThumb {
  object-fit: cover;
  object-position: center 62%;
  border-radius: 120px 120px 16px 16px;
  width: 100%;
  height: 250px;
  margin: 0 0 34px;
  display: block
}
@media (max-width:900px) {
  .heroImmersive {
    padding: 0 6vw 70px
  }
  .heroImmersive:after {
    background: linear-gradient(90deg, #071725e6, #0717257a), linear-gradient(#0000, #0717258c)
  }
  .heroBackdrop {
    object-position: 62% center
  }
  .heroContent {
    width: min(720px, 88vw);
    margin-top: 15vh
  }
  .sectionPhoto, .processMoment {
    grid-template-columns: 1fr
  }
  .sectionPhoto > img, .processMoment > img {
    height: 430px
  }
  .consultThumb {
    height: 340px
  }
}
@media (max-width:560px) {
  .heroImmersive {
    min-height: 760px;
    padding: 0 20px 52px
  }
  .heroImmersive .introNav {
    height: 70px
  }
  .heroImmersive:after {
    background: linear-gradient(90deg, #071725e6, #07172559), linear-gradient(#0000 40%, #071725b8)
  }
  .heroBackdrop {
    object-position: 66% center
  }
  .heroContent {
    width: 100%;
    margin-top: 72px
  }
  .heroImmersive h1 {
    font-size: 44px
  }
  .heroImmersive h2 {
    font-size: 25px
  }
  .heroImmersive .lead {
    font-size: 15px;
    line-height: 1.75
  }
  .heroImmersive .actions {
    margin: 26px 0
  }
  .heroImmersive .trust {
    gap: 10px 14px
  }
  .sectionPhoto, .processMoment {
    margin-left: -20px;
    margin-right: -20px
  }
  .sectionPhoto > img, .processMoment > img {
    height: 300px;
    min-height: 300px
  }
  .sectionPhoto figcaption, .processMoment > div {
    padding: 30px 24px
  }
  .consultThumb {
    border-radius: 100px 100px 14px 14px;
    height: 260px
  }
}
.stepGrid {
  border-top: 0;
  gap: 14px;
  overflow: visible
}
.stepGrid article {
  background: #173d5a;
  border: 1px solid #496277;
  border-radius: 14px;
  min-height: 225px;
  padding: 30px 26px;
  position: relative
}
.stepGrid article:not(:last-child):after {
  content: "→";
  z-index: 2;
  background: var(--navy);
  color: #f0bd69;
  width: 36px;
  height: 36px;
  box-shadow: 0 0 0 6px var(--navy);
  border: 1px solid #f0bd69;
  border-radius: 50%;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  display: grid;
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%)
}
.stepGrid b {
  color: #f0bd69;
  border: 1px solid #e8b86a;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 13px;
  display: grid
}
.stepGrid h3 {
  margin: 30px 0 10px
}
.stepGrid article:last-child {
  border-color: var(--sand);
  background: var(--sand)
}
.stepGrid article:last-child b {
  border-color: #fff
}
@media (max-width:900px) {
  .stepGrid {
    gap: 18px
  }
  .stepGrid article {
    min-height: 0;
    padding: 28px 30px 28px 88px
  }
  .stepGrid b {
    position: absolute;
    top: 28px;
    left: 28px
  }
  .stepGrid h3 {
    margin: 2px 0 10px
  }
  .stepGrid article:not(:last-child):after {
    content: "↓";
    inset: auto auto -27px calc(50% - 18px);
    transform: none
  }
}
@media (max-width:560px) {
  .stepGrid article {
    padding: 25px 24px 25px 78px
  }
  .stepGrid b {
    top: 24px;
    left: 23px
  }
  .stepGrid h3 {
    font-size: 19px
  }
}

.thinklove-phoenix-match-form{
	background: #fff;
	padding:35px 35px 0 35px;
}