/* ubind contact page styles for Elementor Pro
Paste into Elementor Custom CSS / Site Settings > Custom CSS,
or upload this file and keep the stylesheet link in the HTML file.
*/

  /* DESIGN TOKENS */
  :root {
	/* tokens now in the uBind Design Tokens plugin */
}

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
  }

  body {
    font-family: var(--ub-font-body);
    color: var(--ink-900);
    background: var(--paper);
    line-height: 1.55;
    font-size: 16px;
    overflow-x: hidden
  }

  img,
  svg {
    display: block;
    max-width: 100%
  }

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

  button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit
  }

  ::selection {
    background: var(--emerald-500);
    color: #fff
  }

  .container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 32px
  }

  @media (max-width:600px) {
    .container {
      padding: 0 20px
    }
  }

  .block {
    position: relative
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ub-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--emerald-600)
  }

  .eyebrow .dot {
    width: 6px;
    height: 6px;
    background: var(--emerald-500);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(31, 166, 122, .18);
    animation: pulse 2.4s ease-in-out infinite
  }

  @keyframes pulse {

    0%,
    100% {
      box-shadow: 0 0 0 4px rgba(31, 166, 122, .18)
    }

    50% {
      box-shadow: 0 0 0 9px rgba(31, 166, 122, .04)
    }
  }

  .h-display {
    font-family: var(--ub-font-display);
    font-weight: 400;
    letter-spacing: -.028em;
    line-height: 1.05;
    font-variation-settings: "opsz" 144
  }

  

  /* BUTTONS */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -.005em;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--ease-out), box-shadow .25s, background .2s, color .2s, border-color .2s
  }

  .btn-primary {
    background: var(--emerald-500);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 10px 30px -8px rgba(31, 166, 122, .5)
  }

  .btn-primary:hover {
    background: var(--emerald-600);
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 18px 40px -10px rgba(31, 166, 122, .6)
  }

  .btn-ghost {
    background: rgba(255, 255, 255, .05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
  }

  .btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-2px)
  }

  .btn-outline {
    background: transparent;
    color: var(--ink-900);
    border: 1px solid var(--ink-200)
  }

  .btn-outline:hover {
    border-color: var(--ink-900);
    transform: translateY(-2px)
  }

  .btn-lg {
    padding: 16px 28px;
    font-size: 16px
  }

    .btn-lg:hover {
      color: white !important;
  }

  .arrow-svg {
    transition: transform .25s var(--ease-out)
  }

  .btn:hover .arrow-svg {
    transform: translateX(4px)
  }

  /* NAV */
  .nav-wrap {
    position: fixed;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    pointer-events: none;
    transition: transform .4s var(--ease-out), opacity .3s
  }

  .nav-wrap.hidden {
    transform: translateY(-140%);
    opacity: 0
  }

  .nav {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 22px;
    background: rgba(11, 17, 15, .6);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .4);
    transition: background .3s
  }

  .nav.scrolled {
    background: rgba(5, 8, 7, .85)
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.02em;
    padding-right: 6px;
    font-family: var(--ub-font-body)
  }

  .nav-logo .logo-mark {
    width: 30px;
    height: 30px
  }

  .nav-logo .u {
    color: var(--emerald-400)
  }

  .persona-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ub-font-mono);
    font-size: 10px;
    background: rgba(31, 166, 122, .18);
    border: 1px solid rgba(31, 166, 122, .3);
    color: var(--emerald-300);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-left: 4px
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 6px 0 14px
  }

  .nav-link {
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    padding: 8px 13px;
    border-radius: 999px;
    transition: background .2s, color .2s
  }

  .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08)
  }

  .nav-link.active {
    color: var(--emerald-300);
    background: rgba(31, 166, 122, .14)
  }

  .nav-cta {
    font-size: 14px;
    padding: 10px 18px
  }

  .nav-toggle-cb {
    display: none
  }

  .nav-burger {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    margin-left: 4px
  }

  .nav-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s var(--ease-out), opacity .2s
  }

  .nav-toggle-cb:checked~.nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
  }

  .nav-toggle-cb:checked~.nav-burger span:nth-child(2) {
    opacity: 0
  }

  .nav-toggle-cb:checked~.nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
  }

  @media (max-width:920px) {
    .nav {
      padding: 8px 8px 8px 16px
    }

    .nav-burger {
      display: flex
    }

    .nav-links {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      left: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      margin: 0;
      padding: 10px;
      background: rgba(8, 17, 14, .92);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
      opacity: 0;
      transform: translateY(-10px) scale(.98);
      pointer-events: none;
      transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
      transform-origin: top
    }

    .nav-link {
      padding: 12px 14px;
      font-size: 15px
    }

    .nav-toggle-cb:checked~.nav-links {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto
    }
  }

  /* HERO BACKGROUND (dark) */
  .hero {
    position: relative;
    background: var(--ink-1000);
    color: #fff;
    overflow: hidden;
    isolation: isolate
  }

  .hero-mesh {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: radial-gradient(70% 60% at 18% 20%, rgba(31, 166, 122, .45) 0%, transparent 60%), radial-gradient(60% 50% at 88% 30%, rgba(105, 224, 176, .22) 0%, transparent 60%), radial-gradient(80% 70% at 50% 100%, rgba(18, 138, 95, .32) 0%,
        transparent 70%), linear-gradient(180deg, #061a14 0%, #08231b 60%, #050d0b 100%);
    animation: mesh-shift 18s ease-in-out infinite alternate
  }

  @keyframes mesh-shift {
    0% {
      filter: hue-rotate(0deg) saturate(1)
    }

    100% {
      filter: hue-rotate(-8deg) saturate(1.15)
    }
  }

  .hero-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255,
          255, .04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
    animation: grid-pan 30s linear infinite
  }

  @keyframes grid-pan {
    from {
      background-position: 0 0
    }

    to {
      background-position: 64px 64px
    }
  }

  .glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: -1
  }

  .orb-1 {
    width: 520px;
    height: 520px;
    right: -120px;
    top: 14%;
    background: radial-gradient(circle, rgba(31, 166, 122, .5) 0%, transparent 60%);
    animation: drift1 14s ease-in-out infinite alternate
  }

  .orb-2 {
    width: 380px;
    height: 380px;
    left: -80px;
    bottom: 2%;
    background: radial-gradient(circle, rgba(105, 224, 176, .35) 0%, transparent 60%);
    animation: drift2 16s ease-in-out infinite alternate
  }

  @keyframes drift1 {
    to {
      transform: translate(-40px, 40px)
    }
  }

  @keyframes drift2 {
    to {
      transform: translate(40px, -30px)
    }
  }

  .hero-eyebrow {
    color: var(--emerald-300);
    margin-bottom: 22px
  }

  .hero-sub {
    color: rgba(255, 255, 255, .72);
    font-size: clamp(16px, 1.5vw, 19px);
    max-width: 560px;
    margin-top: 22px
  }

  .hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 34px
  }

  .hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 34px
  }

  .hero-chip {
    font-family: var(--ub-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 7px 13px;
    border-radius: 999px
  }

  /* SECTION HEAD (light default) */
  .section-head {
    max-width: 760px;
    margin-bottom: 48px
  }

  .section-head h2 {
    font-family: var(--ub-font-display);
    font-weight: 400;
    letter-spacing: -.02em;
    font-size: clamp(32px, 4.4vw, 52px);
    margin-top: 16px;
    color: var(--ink-1000);
    line-height: 1.02
  }

  

  .section-head p {
    color: var(--ink-500);
    margin-top: 16px;
    font-size: 16.5px
  }

  /* FINAL CTA (dark) */
  .final-cta {
    background: linear-gradient(180deg, var(--ink-1000), var(--emerald-950));
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden
  }

  .final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 40% at 50% 18%, rgba(31, 166, 122, .38) 0%, transparent 60%), radial-gradient(40% 30% at 28% 82%, rgba(31, 166, 122, .22) 0%, transparent 60%);
    pointer-events: none
  }

  .final-cta>.container {
    position: relative;
    z-index: 1
  }

  .final-cta h2 {
    font-family: var(--ub-font-display);
    font-weight: 400;
    letter-spacing: -.02em;
    font-size: clamp(30px, 4.4vw, 56px);
    line-height: 1.04;
    max-width: 20ch;
    margin: 0 auto;
    color: #fff
  }

  

  .final-cta p {
    color: rgba(255, 255, 255, .66);
    margin: 18px auto 0;
    max-width: 60ch;
    font-size: 16.5px
  }

  .final-cta .ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px
  }

  .final-cta .phone {
    margin-top: 24px;
    font-family: var(--ub-font-mono);
    font-size: 13px;
    color: rgba(255, 255, 255, .55)
  }

  .final-cta .phone a {
    color: var(--emerald-300)
  }

  .final-cta .btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, .25)
  }

  .final-cta .btn-outline:hover {
    border-color: #fff
  }

  /* FOOTER */
  footer {
    background: #050807;
    color: rgba(255, 255, 255, .7);
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, .06)
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px
  }

  @media (max-width:900px) {
    .footer-grid {
      grid-template-columns: 1fr 1fr
    }
  }

  @media (max-width:540px) {
    .footer-grid {
      grid-template-columns: 1fr
    }
  }

  .footer-brand {
    max-width: 340px
  }

  .footer-brand .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -.02em;
    margin-bottom: 16px
  }

  .footer-brand .tag {
    font-family: var(--ub-font-mono);
    font-size: 12px;
    color: var(--emerald-400);
    letter-spacing: .1em;
    text-transform: uppercase
  }

  .footer-brand p {
    font-size: 14.5px;
    line-height: 1.6;
    margin-top: 16px
  }

  .footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px
  }

  .footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .7);
    transition: transform .25s var(--ease-out), color .25s, border-color .25s, background .25s
  }

  .footer-social a:hover {
    transform: translateY(-3px);
    color: var(--emerald-300);
    border-color: rgba(31, 166, 122, .4);
    background: rgba(31, 166, 122, .1)
  }

  .footer-col h5 {
    color: #fff;
    font-size: 13px;
    font-family: var(--ub-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 18px
  }

  .footer-col ul {
    list-style: none
  }

  .footer-col li {
    padding: 6px 0
  }

  .footer-col a {
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    transition: color .2s
  }

  .footer-col a:hover {
    color: var(--emerald-400)
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: 13px;
    color: rgba(255, 255, 255, .4);
    flex-wrap: wrap;
    gap: 16px
  }

  .footer-bottom a {
    color: rgba(255, 255, 255, .5);
    margin-left: 18px;
    transition: color .2s
  }

  .footer-bottom a:hover {
    color: #fff
  }

  /* REVEAL */
  .reveal.reveal-armed:not(.visible) {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out)
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0)
  }

  .reveal-stagger.reveal-armed:not(.visible)>* {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out)
  }

  .reveal-stagger.visible>* {
    opacity: 1;
    transform: translateY(0)
  }

  .reveal-stagger.visible>*:nth-child(1) {
    transition-delay: 0s
  }

  .reveal-stagger.visible>*:nth-child(2) {
    transition-delay: .06s
  }

  .reveal-stagger.visible>*:nth-child(3) {
    transition-delay: .12s
  }

  .reveal-stagger.visible>*:nth-child(4) {
    transition-delay: .18s
  }

  .reveal-stagger.visible>*:nth-child(5) {
    transition-delay: .24s
  }

  .reveal-stagger.visible>*:nth-child(6) {
    transition-delay: .3s
  }

  @media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important
    }

    .reveal,
    .reveal-stagger>* {
      opacity: 1;
      transform: none
    }
  }


  /* ---------- contact hero ---------- */
  .hero.contact {
    min-height: auto;
}

  .hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 56px;
    align-items: center
  }

  @media (max-width:960px) {
    .hero-inner {
      grid-template-columns: 1fr;
      gap: 40px
    }
  }

  .hero h1 {
    font-size: clamp(38px, 5.2vw, 64px)
  }

  .talk-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-xl);
    padding: 28px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7)
  }

  .talk-card .tc-head {
    font-family: var(--ub-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emerald-300);
    margin-bottom: 18px
  }

  .tc-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
  }

  .tc-line:last-child {
    border-bottom: none
  }

  .tc-line .ic {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(31, 166, 122, .16);
    border: 1px solid rgba(31, 166, 122, .3);
    color: var(--emerald-300)
  }

  .tc-line>span:last-child {
    display: flex;
    flex-direction: column
  }

  .tc-line .lbl {
    display: block;
    font-family: var(--ub-font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55)
  }

  .tc-line .val {
    display: block;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    margin-top: 2px
  }

  .tc-line .val a {
    color: #fff
  }

  .tc-line .val a:hover {
    color: var(--emerald-300)
  }

  /* ---------- workflow ---------- */
  .workflow {
    background: var(--paper);
    position: relative
  }

  .workflow::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(55% 45% at 12% 0%, rgba(57, 181, 145, .10), transparent 60%), radial-gradient(50% 45% at 92% 8%, rgba(105, 224, 176, .12), transparent 62%)
  }

  .workflow>.container {
    position: relative;
    z-index: 1
  }

  .workflow .section-head {
    margin: 0 auto 36px;
    text-align: center
  }

  .wf {
    max-width: 880px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-xl);
    padding: clamp(24px, 4vw, 44px);
    box-shadow: 0 40px 90px -50px rgba(31, 166, 122, .4);
    position: relative;
    overflow: hidden
  }

  .wf-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px
  }

  .wf-step-no {
    font-family: var(--ub-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--emerald-600)
  }

  .wf-back {
    font-family: var(--ub-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-400) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, color .2s;
    border: none !important;
  }

  .wf-back.show {
    opacity: 1;
    pointer-events: auto;
    background-color: white;
    
  }

  .wf-back:hover {
    color: var(--ink-900);
    background-color: white;
  }

  .wf-progress {
    height: 6px;
    background: var(--ink-100);
    border-radius: 999px;
    overflow: hidden;
    margin: 14px 0 30px
  }

  .wf-progress-bar {
    height: 100%;
    width: 25%;
    background: linear-gradient(90deg, var(--emerald-400), var(--emerald-600));
    border-radius: 999px;
    transition: width .45s var(--ease-out)
  }

  .wf-step {
    display: none;
    animation: wfin .4s var(--ease-out)
  }

  .wf-step.active {
    display: block
  }

  @keyframes wfin {
    from {
      opacity: 0;
      transform: translateY(10px)
    }

    to {
      opacity: 1;
      transform: none
    }
  }

  .wf-q {
    font-family: var(--ub-font-display);
    font-weight: 500;
    font-size: clamp(21px, 2.6vw, 27px);
    letter-spacing: -.015em;
    color: var(--ink-1000);
    line-height: 1.15
  }

  .wf-hint {
    color: var(--ink-500);
    font-size: 14.5px;
    margin-top: 8px
  }

  .opt-grid {
    display: grid;
    /* minmax(0, ...) rather than a bare 1fr: a bare 1fr floors at the item's
       min-content width, so one wide card used to push its column past the
       wizard's padding and .wf's overflow:hidden clipped it. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px
  }

  @media (max-width:600px) {
    .opt-grid {
      grid-template-columns: minmax(0, 1fr)
    }
  }

  .opt-card {
    position: relative;
    text-align: left;
    /* The theme reset sets button { white-space: nowrap }, which stops the card
       copy wrapping and makes its min-content width the whole sentence. */
    white-space: normal;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    background: var(--paper);
    transition: transform .22s var(--ease-out), border-color .22s, box-shadow .22s, background .22s
  }

  /* Flex items default to a min-width of auto, which would re-introduce the same
     floor inside the card even with the track hardened above. */
  .opt-card>span {
    min-width: 0
  }

  .opt-card h4,
  .opt-card p {
    overflow-wrap: anywhere
  }

  .opt-card:hover {
    transform: translateY(-3px);
    border-color: var(--emerald-300);
    background: var(--emerald-50);
    box-shadow: 0 16px 30px -18px rgba(31, 166, 122, .4)
  }

  .opt-card.selected {
    border-color: var(--emerald-500);
    background: var(--emerald-50);
    box-shadow: 0 0 0 2px var(--emerald-300) inset
  }

  .opt-card .opt-ic {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--emerald-50), var(--emerald-100));
    border: 1px solid var(--emerald-200);
    color: var(--emerald-700);
    transition: transform .25s var(--ease-spring)
  }

  .opt-card:hover .opt-ic {
    transform: scale(1.08) rotate(-4deg)
  }

  .opt-card h4 {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink-1000);
    letter-spacing: -.01em
  }

  .opt-card p {
    font-size: 13px;
    color: var(--ink-500);
    line-height: 1.5;
    margin-top: 3px
  }

  .opt-card .opt-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--emerald-500);
    color: #fff;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s, transform .2s var(--ease-spring)
  }

  .opt-card.selected .opt-check {
    opacity: 1;
    transform: scale(1)
  }

  .cap-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px
  }

  .cap {
    font-size: 13.5px;
    color: var(--ink-700);
    background: var(--paper);
    border: 1px solid var(--ink-200);
    padding: 11px 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .2s var(--ease-out), background .2s, color .2s, border-color .2s
  }

  .cap:hover {
    transform: translateY(-2px);
    border-color: var(--emerald-300);
    background: var(--emerald-50)
  }

  .cap.selected {
    background: var(--emerald-500);
    color: #fff;
    border-color: transparent;
    font-weight: 500
  }

  .cap .cap-x {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .25);
    font-size: 11px;
    opacity: 0;
    width: 0;
    margin-left: -8px;
    transition: opacity .2s
  }

  .cap.selected .cap-x {
    opacity: 1;
    width: 16px;
    margin-left: 0
  }

  .wf-form {
    margin-top: 22px
  }

  .wf-row {
    display: grid;
    /* Same latent overflow as .opt-grid above. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
  }

  @media (max-width:600px) {
    .wf-row {
      grid-template-columns: minmax(0, 1fr)
    }
  }

  .wf-field {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px
  }

  .wf-field label {
    font-family: var(--ub-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-500)
  }

  .wf-field label .req {
    color: var(--coral)
  }

  .wf-field input,
  .wf-field select,
  .wf-field textarea {
    width: 100%;
    padding: 13px 15px;
    border-radius: var(--r-sm);
    font-size: 15px;
    font-family: var(--ub-font-body);
    color: var(--ink-900);
    background: var(--paper);
    border: 1px solid var(--ink-200);
    outline: none;
    transition: border-color .2s, background .2s
  }

  .wf-field textarea {
    resize: vertical;
    min-height: 96px
  }

  .wf-field input:focus,
  .wf-field select:focus,
  .wf-field textarea:focus {
    border-color: var(--emerald-500);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(57, 181, 145, .14)
  }

  .wf-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 18px;
    font-size: 13px;
    color: var(--ink-500);
    line-height: 1.5
  }

  .wf-consent input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--emerald-500)
  }

  .wf-consent a {
    color: var(--emerald-600);
    text-decoration: underline
  }

  .wf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px
  }

  .wf-success {
    display: none;
    text-align: center;
    padding: 14px 6px
  }

  .wf-success.show {
    display: block;
    animation: wfin .5s var(--ease-out)
  }

  .wf-success .tick {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--emerald-400), var(--emerald-600));
    color: #fff;
    box-shadow: 0 16px 36px -12px rgba(31, 166, 122, .6);
    animation: pop .5s var(--ease-spring)
  }

  @keyframes pop {
    from {
      transform: scale(.8);
      opacity: 0
    }

    to {
      transform: scale(1);
      opacity: 1
    }
  }

  .wf-success h3 {
    font-family: var(--ub-font-display);
    font-weight: 500;
    font-size: clamp(24px, 3vw, 32px);
    color: var(--ink-1000);
    letter-spacing: -.02em
  }

  .wf-success p {
    color: var(--ink-500);
    margin-top: 12px;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 15.5px
  }

  .wf-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 24px auto 0;
    max-width: 560px
  }

  .wf-summary .tag {
    font-family: var(--ub-font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--emerald-700);
    background: var(--emerald-50);
    border: 1px solid var(--emerald-200);
    padding: 7px 13px;
    border-radius: 999px
  }

  /* ---------- contact methods + map ---------- */
  .reach {
    background: #fff
  }

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

  @media (max-width:900px) {
    .reach-grid {
      grid-template-columns: 1fr
    }
  }

  .reach-card {
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s
  }

  .reach-card:hover {
    transform: translateY(-5px);
    border-color: var(--emerald-300);
    box-shadow: 0 24px 50px -24px rgba(31, 166, 122, .3)
  }

  .reach-card::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    right: -90px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(31, 166, 122, .12), transparent 70%);
    border-radius: 50%;
    transition: transform .5s
  }

  .reach-card:hover::after {
    transform: scale(1.5)
  }

  .reach-card .rc-ic {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--emerald-50), var(--emerald-100));
    border: 1px solid var(--emerald-200);
    color: var(--emerald-700);
    position: relative;
    z-index: 1
  }

  .reach-card h3 {
    font-family: var(--ub-font-display);
    font-size: 21px;
    font-weight: 500;
    color: var(--ink-1000);
    margin-top: 18px;
    letter-spacing: -.01em;
    position: relative;
    z-index: 1
  }

  .reach-card .rc-list {
    list-style: none;
    margin-top: 14px;
    position: relative;
    z-index: 1
  }

  .reach-card .rc-list li {
    padding: 6px 0;
    font-size: 14.5px;
    color: var(--ink-600)
  }

  .reach-card .rc-list .k {
    font-family: var(--ub-font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-450);
    display: block
  }

  .reach-card .rc-list a {
    color: var(--emerald-700);
    font-weight: 500
  }

  .reach-card .rc-list a:hover {
    color: var(--emerald-600)
  }

  .map-wrap {
    margin-top: 28px;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 30px 60px -40px rgba(31, 166, 122, .3);
    background: var(--emerald-50)
  }

  .map-wrap iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
    filter: grayscale(.2) contrast(1.02)
  }

  /* ---------- what happens next ---------- */
  .next {
    background: linear-gradient(180deg, var(--emerald-50), var(--paper))
  }

  .next-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    counter-reset: nx
  }

  @media (max-width:860px) {
    .next-grid {
      grid-template-columns: 1fr 1fr
    }
  }

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

  .next-step {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 24px;
    position: relative
  }

  .next-step .nx-no {
    font-family: var(--ub-font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 34px;
    color: var(--emerald-300);
    line-height: 1
  }

  .next-step h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-1000);
    margin-top: 10px
  }

  .next-step p {
    font-size: 13.5px;
    color: var(--ink-500);
    line-height: 1.55;
    margin-top: 6px
  }