@import url("site-base-visual.css");

.hero-a{position:relative;box-shadow:0 24px 40px -28px rgba(42,22,48,.55)}
.hero-a-art{position:relative;align-items:flex-end;min-height:0}
.condo-art{display:block;width:100%;max-width:640px;height:auto}
.hero-a-art .shot--hero{position:absolute;left:0;bottom:0;width:min(34vw,170px)}
.hero-a-art .shot--hero img{border:6px solid #120a15;border-bottom:0;border-radius:26px 26px 0 0}
@media (max-width:767px){.hero-a-art .shot--hero{width:min(120px,26vw);left:-8px}}
@media (min-width:1024px){.hero-a-art .shot--hero{width:160px;left:-48px}}

.hero-a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,rgba(140,198,63,0),var(--pandan) 30%,var(--pandan) 70%,rgba(140,198,63,0));opacity:.8;z-index:2;pointer-events:none}

#problems{background:linear-gradient(180deg,var(--plum-50) 0,#fff 220px)}

.pain{background:#fff;border:0;border-radius:28px;box-shadow:0 10px 30px -18px rgba(42,22,48,.35)}
.value{border-radius:28px;box-shadow:0 10px 30px -18px rgba(42,22,48,.3)}
.role{background:#fff;border:0;border-radius:28px;box-shadow:0 10px 30px -18px rgba(42,22,48,.35)}
#features .role{background:var(--cream)}
.node{border:0;border-radius:28px;box-shadow:0 10px 30px -18px rgba(42,22,48,.35)}
.node-icon{box-shadow:0 0 0 6px var(--plum-100)}
.facts-band--light .fact dt{display:inline-block;padding-bottom:6px;background:linear-gradient(var(--plum),var(--plum)) left bottom/48px 5px no-repeat}
.who-card{border:0;border-top:6px solid var(--plum);border-radius:28px;box-shadow:0 10px 30px -18px rgba(42,22,48,.35)}
.packages .pkg{border-radius:28px}
.packages .pkg--gold{border-color:var(--plum);box-shadow:0 0 0 4px rgba(107,42,94,.18),var(--sh)}
.packages .pkg--gold .badge{background:#F2B33D;color:var(--aubergine)}
#contact{background:var(--plum-50)}
.form{border:0;border-radius:28px;box-shadow:0 14px 40px -20px rgba(42,22,48,.4)}

@media (prefers-reduced-motion:no-preference){
  .motion-ok .condo-art{animation:rp-up .7s cubic-bezier(.2,.7,.2,1) .15s both}
  .motion-ok .condo-art .win-lit{animation:c-win .6s ease-out both}
  .motion-ok .condo-art .win-lit:nth-of-type(3n){animation-delay:.7s}
  .motion-ok .condo-art .win-lit:nth-of-type(3n+1){animation-delay:.95s}
  .motion-ok .condo-art .win-lit:nth-of-type(3n+2){animation-delay:1.2s}
  .motion-ok .art-shield{transform-box:fill-box;transform-origin:50% 50%;animation:rp-shield .55s cubic-bezier(.2,.9,.3,1.3) .9s both}
  .motion-ok .art-tick{stroke-dasharray:220;animation:rp-tick .6s ease-out 1.35s both}
  .motion-ok .hero-a-art .shot--hero{animation:rp-up .7s cubic-bezier(.2,.7,.2,1) .35s both}
  .motion-ok .hero-a .eyebrow{animation:rp-up .7s cubic-bezier(.2,.7,.2,1) both}
  .motion-ok .node::after{transition:scale .5s ease .35s}
  .motion-ok .node:not(.is-visible)::after{scale:1 0}
  @media (min-width:1024px){.motion-ok .node:not(.is-visible)::after{scale:0 1}}
  @media (hover:hover){
    .pain,.value,.who-card,.role,.node{transition:transform .25s ease,box-shadow .25s ease}
    .pain:hover,.value:hover,.who-card:hover,.role:hover,.node:hover{transform:translateY(-4px)}
  }
}
@keyframes c-win{from{opacity:.2}to{opacity:1}}

.brand .tm{font-size:.5em;font-weight:700;vertical-align:top;position:relative;top:.15em;margin-left:2px;color:var(--plum)}