:root {
      --bg: #FAF8F5;
      --paper: #FFFDFB;
      --gold: #C4913A;
      --gold-deep: #A2742A;
      --ink: #1C1A18;
      --ink-soft: #5A524A;
      --rose: #D9B8A8;
      --sage: #7A9E7E;
      --line: rgba(28, 26, 24, .14);
      --hair: rgba(196, 145, 58, .45);
      --example-bg: #1C1A18;
      --example-fg: #FAF8F5;
      --example-fg-soft: rgba(250, 248, 245, .72);
      --nav-bg: rgba(250, 248, 245, .72);
      --nav-bg-2: rgba(250, 248, 245, .9);
      --grain-op: .6;
      --grain-blend: multiply;
      --serif: "Playfair Display", Georgia, serif;
      --sans: "DM Sans", system-ui, sans-serif;
      --maxw: 1180px;
    }

    [data-theme="dark"] {
      --bg: #15110C;
      --paper: #1E1812;
      --gold: #D7A954;
      --gold-deep: #E7C078;
      --ink: #F2EBE0;
      --ink-soft: #B6AA98;
      --rose: #D9B8A8;
      --sage: #8FB293;
      --line: rgba(242, 235, 224, .14);
      --hair: rgba(215, 169, 84, .5);
      --example-bg: #0E0B08;
      --example-fg: #F2EBE0;
      --example-fg-soft: rgba(242, 235, 224, .72);
      --nav-bg: rgba(21, 17, 12, .72);
      --nav-bg-2: rgba(21, 17, 12, .92);
      --grain-op: .5;
      --grain-blend: screen;
    }

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

    *,
    *::before,
    *::after {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none
    }

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

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-weight: 400;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      position: relative;
      transition: background .5s ease, color .5s ease;
      overscroll-behavior: contain
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: var(--grain-op);
      mix-blend-mode: var(--grain-blend);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")
    }

    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 28px;
      position: relative;
      z-index: 1
    }

    h1,
    h2,
    h3 {
      font-family: var(--serif);
      font-weight: 500;
      line-height: 1.08;
      letter-spacing: -.01em
    }

    .label {
      font-family: var(--sans);
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--gold-deep);
      display: inline-flex;
      align-items: center;
      gap: .7rem
    }

    .label::before {
      content: "";
      width: 26px;
      height: 1px;
      background: var(--gold)
    }

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

    .btn {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-family: var(--sans);
      font-size: .92rem;
      font-weight: 500;
      letter-spacing: .02em;
      padding: .95rem 1.8rem;
      border-radius: 999px;
      cursor: pointer;
      border: 1px solid transparent;
      transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .35s, color .35s, box-shadow .35s;
      min-height: 44px;
      touch-action: manipulation;
      user-select: none
    }

    .btn-primary {
      background: var(--ink);
      color: var(--bg);
      box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .5)
    }

    .btn-primary:hover {
      background: var(--gold);
      color: #1C1A18;
      transform: translateY(-2px);
      box-shadow: 0 18px 40px -16px rgba(162, 116, 42, .6)
    }

    .btn-primary:active {
      background: var(--gold-deep);
      transform: translateY(0) scale(.97);
      box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .5)
    }

    .btn-ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line)
    }

    .btn-ghost:hover {
      border-color: var(--gold);
      color: var(--gold-deep);
      transform: translateY(-2px)
    }

    .btn-ghost:active {
      border-color: var(--gold);
      color: var(--gold);
      transform: translateY(0) scale(.97)
    }

    .btn .arrow {
      transition: transform .35s
    }

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

    .btn-primary:active .arrow {
      transform: translateX(6px)
    }

    @media (max-width: 480px) {
      .hero .cta-row .btn {
        width: 100%;
        justify-content: center
      }

      .nav-cta {
        width: 100%;
        justify-content: center
      }
    }

    header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: saturate(140%) blur(8px);
      background: var(--nav-bg);
      border-bottom: 1px solid transparent;
      transition: border-color .4s, background .4s;
      padding-top: env(safe-area-inset-top, 0)
    }

    header.scrolled {
      border-color: var(--line);
      background: var(--nav-bg-2)
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 74px;
      gap: 1rem
    }

    .brand {
      display: flex;
      align-items: center;
      gap: .6rem
    }

    .brand .mark {
      width: 30px;
      height: 30px;
      flex: none;
      border-radius: 7px
    }

    .brand .word {
      font-family: var(--serif);
      font-size: 1.55rem;
      font-weight: 500;
      letter-spacing: .01em
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 2rem
    }

    .nav-right a.txt {
      font-size: .9rem;
      color: var(--ink-soft);
      position: relative;
      min-height: 44px;
      display: flex;
      align-items: center
    }

    .nav-right a.txt::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -5px;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width .35s
    }

    .nav-right a.txt:hover {
      color: var(--ink)
    }

    .nav-right a.txt:hover::after {
      width: 100%
    }

    .controls {
      display: flex;
      align-items: center;
      gap: .7rem
    }

    .lang-sel {
      font-family: var(--sans);
      font-size: .85rem;
      color: var(--ink);
      appearance: none;
      -webkit-appearance: none;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%231C1A18' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1rem center / 8px 5px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: .5rem 2rem .5rem .8rem;
      cursor: pointer;
      transition: border-color .3s;
      min-height: 44px;
      touch-action: manipulation
    }
    [data-theme="dark"] .lang-sel {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23EBE5DE' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .lang-sel:hover {
      border-color: var(--gold)
    }

    .lang-sel:active {
      background-color: var(--line)
    }

    .lang-sel option {
      background: var(--paper);
      color: var(--ink)
    }

    .theme-toggle {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      transition: border-color .3s, color .3s;
      touch-action: manipulation;
      user-select: none
    }

    .theme-toggle:hover {
      border-color: var(--gold);
      color: var(--gold-deep)
    }

    .theme-toggle:active {
      background: var(--line);
      transform: scale(.92)
    }

    .theme-toggle svg {
      width: 18px;
      height: 18px
    }

    .theme-toggle .ico-sun {
      display: none
    }

    .theme-toggle .ico-moon {
      display: block
    }

    [data-theme="dark"] .theme-toggle .ico-sun {
      display: block
    }

    [data-theme="dark"] .theme-toggle .ico-moon {
      display: none
    }

    @media(max-width:820px) {
      .nav-right {
        gap: .7rem
      }

      .nav-right a.txt {
        display: none
      }

      .nav-cta {
        padding: .8rem 1.2rem
      }

      /* Icon-only on tablet/mobile — hide text, keep icon */
      .nav-cta-text { display: none }
      .nav-cta { padding: 0; width: 44px; height: 44px; justify-content: center; border-radius: 999px; }
    }

    @media(max-width:480px) {
      .brand .word {
        font-size: 1.35rem
      }

      .lang-sel {
        appearance: none;
        -webkit-appearance: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%231C1A18' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1rem center / 8px 5px;
        padding: .5rem 2rem .5rem .7rem;
        font-size: .8rem;
        min-width: 120px
      }
      [data-theme="dark"] .lang-sel {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23EBE5DE' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
      }

      .controls {
        gap: .5rem
      }
    }

    .hero {
      position: relative;
      padding: clamp(4rem, 11vw, 9rem) 0 clamp(3.5rem, 7vw, 6rem)
    }

    .hero .arch-bg {
      position: absolute;
      right: -4%;
      top: 6%;
      width: min(46%, 520px);
      aspect-ratio: 3/4;
      z-index: 0;
      opacity: .9
    }

    @media(max-width:880px) {
      .hero .arch-bg {
        position: absolute;
        right: -10%;
        top: 2%;
        width: min(64%, 320px);
        opacity: .4;
        pointer-events: none
      }
    }

    @media(max-width:480px) {
      .hero .arch-bg {
        /* Take out of flow so it can't overlap the text */
        position: static;
        display: block;
        width: min(72%, 240px);
        margin: 2.4rem auto 0;
        opacity: .85;
        pointer-events: none
      }
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 680px
    }

    .hero h1 {
      font-size: clamp(2.9rem, 7.2vw, 5.2rem);
      margin: 1.5rem 0 0
    }

    .hero h1 em {
      font-style: italic;
      color: var(--gold-deep)
    }

    .hero .lede {
      font-size: clamp(1.05rem, 2.2vw, 1.28rem);
      color: var(--ink-soft);
      max-width: 32em;
      margin: 1.6rem 0 0;
      font-weight: 300
    }

    .hero .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 2.4rem
    }

    .rise {
      opacity: 0;
      transform: translateY(22px);
      animation: rise .9s cubic-bezier(.2, .8, .2, 1) forwards
    }

    @keyframes rise {
      to {
        opacity: 1;
        transform: none
      }
    }

    .d1 {
      animation-delay: .05s
    }

    .d2 {
      animation-delay: .18s
    }

    .d3 {
      animation-delay: .31s
    }

    .d4 {
      animation-delay: .44s
    }

    section {
      position: relative;
      z-index: 1
    }

    .block {
      padding: clamp(3.5rem, 8vw, 7rem) 0
    }

    .sec-head {
      max-width: 640px;
      margin-bottom: clamp(2rem, 4vw, 3.2rem)
    }

    .sec-head h2 {
      font-size: clamp(2rem, 4.4vw, 3.1rem);
      margin-top: 1.1rem
    }

    .sec-head p {
      color: var(--ink-soft);
      font-weight: 300;
      margin-top: 1rem;
      font-size: 1.06rem
    }

    .rule {
      height: 1px;
      background: linear-gradient(90deg, var(--hair), transparent);
      border: 0
    }

    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1)
    }

    .reveal.in {
      opacity: 1;
      transform: none
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(1.4rem, 3vw, 2.6rem)
    }

    @media(max-width:820px) {
      .steps {
        grid-template-columns: 1fr;
        gap: 0
      }
    }

    .step {
      padding: 2rem 0 0;
      border-top: 1px solid var(--line)
    }

    @media(max-width:820px) {
      .step {
        padding: 1.5rem 0
      }
    }

    .step .num {
      font-family: var(--serif);
      font-style: italic;
      font-size: 2.2rem;
      color: var(--gold);
      line-height: 1;
      position: relative;
      display: inline-block
    }

    .step .num::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 22px;
      height: 1.5px;
      background: var(--hair)
    }

    .step h3 {
      font-size: 1.4rem;
      margin: 1rem 0 .6rem
    }

    .step p {
      color: var(--ink-soft);
      font-weight: 300;
      font-size: 1rem
    }

    @media(max-width:480px) {
      .step .num {
        font-size: 1.9rem
      }

      .step h3 {
        font-size: 1.25rem
      }

      .step p {
        font-size: .95rem
      }
    }

    .occasions {
      display: flex;
      flex-wrap: wrap;
      gap: .7rem;
      justify-content: center
    }

    .occasions .chip {
      font-size: .95rem;
      padding: .7rem 1.25rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink-soft);
      background: var(--paper);
      transition: .35s;
      min-height: 44px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      touch-action: manipulation;
      user-select: none
    }

    .occasions .chip:hover {
      border-color: var(--gold);
      color: var(--ink);
      transform: translateY(-2px)
    }

    .occasions .chip:active {
      border-color: var(--gold);
      background: color-mix(in srgb, var(--gold) 8%, transparent);
      transform: translateY(0)
    }

    @media(max-width:480px) {
      .occasions .chip {
        font-size: .85rem;
        padding: .6rem 1rem
      }
    }

    .collections {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem
    }

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

    .col-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 2.2rem 1.9rem;
      display: flex;
      flex-direction: column;
      transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .4s;
      touch-action: manipulation
    }

    .col-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .35);
      border-color: var(--hair)
    }

    .col-card:active {
      transform: translateY(-2px) scale(.98);
      box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .3)
    }

    .col-card.feature {
      border-color: var(--gold);
      box-shadow: 0 0 0 1px var(--gold) inset
    }

    .col-card .tier {
      font-size: .72rem;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--gold-deep);
      font-weight: 500
    }

    .col-card h3 {
      font-size: 1.7rem;
      margin: .5rem 0 .2rem
    }

    .col-card .tag {
      color: var(--ink-soft);
      font-weight: 300;
      font-style: italic;
      font-family: var(--serif);
      font-size: 1.02rem;
      margin-bottom: 1.4rem
    }

    .col-card ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .7rem;
      margin: 0 0 1.8rem
    }

    .col-card li {
      display: flex;
      gap: .7rem;
      font-size: .95rem;
      color: var(--ink-soft);
      line-height: 1.4;
      align-items: flex-start
    }

    .col-card li svg {
      flex: none;
      margin-top: .18rem;
      color: var(--gold)
    }

    .col-card .btn {
      margin-top: auto;
      justify-content: center;
      min-height: 44px
    }

    @media(max-width:480px) {
      .col-card {
        padding: 1.8rem 1.5rem
      }

      .col-card h3 {
        font-size: 1.5rem
      }
    }

    .example {
      background: var(--example-bg);
      color: var(--example-fg);
      border-radius: 24px;
      padding: clamp(2.4rem, 5vw, 4rem);
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 2.5rem;
      align-items: center;
      transition: background .5s ease
    }

    @media(max-width:820px) {
      .example {
        grid-template-columns: 1fr;
        text-align: center
      }
    }

    .example h2 {
      color: var(--example-fg);
      font-size: clamp(1.9rem, 4vw, 2.8rem)
    }

    .example p {
      color: var(--example-fg-soft);
      font-weight: 300;
      margin: 1.1rem 0 1.9rem;
      max-width: 34em
    }

    @media(max-width:820px) {
      .example p {
        margin-inline: auto
      }
    }

    .example .btn-primary {
      background: var(--gold);
      color: #1C1A18
    }

    .example .btn-primary:hover {
      background: var(--rose)
    }

    .qr-card {
      justify-self: end;
      background: #FBF8F3;
      border-radius: 16px;
      padding: 1.6rem;
      width: 230px;
      box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6);
      transform: rotate(2.5deg)
    }

    @media(max-width:820px) {
      .qr-card {
        justify-self: center;
        transform: none
      }
    }

    @media(max-width:480px) {
      .qr-card {
        width: 100%;
        max-width: 280px;
        padding: 1.4rem
      }
    }

    .qr-card .ttl {
      font-family: var(--serif);
      font-size: 1.15rem;
      color: #1C1A18;
      text-align: center;
      margin-bottom: .9rem
    }

    .qr-card .qr {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 8px
    }

    .qr-card .sub {
      text-align: center;
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #5A524A;
      margin-top: .9rem
    }

    .testimonials {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem
    }

    @media(max-width:820px) {
      .testimonials {
        grid-template-columns: 1fr;
        gap: 1rem
      }
    }

    .testi {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 2rem 1.8rem;
      display: flex;
      flex-direction: column;
      transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
      touch-action: manipulation
    }

    .testi:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .25)
    }

    .testi:active {
      transform: translateY(-1px) scale(.99)
    }

    .testi-body {
      font-family: var(--serif);
      font-style: italic;
      font-size: 1.02rem;
      color: var(--ink-soft);
      line-height: 1.7;
      flex: 1;
      margin-bottom: 1.4rem
    }

    .testi-body::before {
      content: "\201C"
    }

    .testi-body::after {
      content: "\201D"
    }

    .testi-author {
      display: flex;
      align-items: center;
      gap: .75rem
    }

    .testi-avatar {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-family: var(--serif);
      font-weight: 600;
      font-size: .78rem;
      color: #FAF8F5;
      background: var(--gold);
      flex: none
    }

    .testi-name {
      font-size: .88rem;
      font-weight: 500;
      color: var(--ink)
    }

    .testi-event {
      font-size: .7rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-soft)
    }

    .contact-band {
      text-align: center;
      max-width: 620px;
      margin: 0 auto
    }

    .contact-band h2 {
      font-size: clamp(2.2rem, 5vw, 3.4rem);
      margin: 1.1rem 0
    }

    .contact-band p {
      color: var(--ink-soft);
      font-weight: 300;
      font-size: 1.1rem;
      margin-bottom: 2rem
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 3rem 0 2.4rem;
      margin-top: 2rem
    }

    .foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.2rem
    }

    .foot .word {
      font-family: var(--serif);
      font-size: 1.3rem
    }

    .foot small {
      color: var(--ink-soft);
      font-size: .82rem
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      place-items: center;
      padding: 20px
    }

    .modal.open {
      display: grid;
      animation: fade .3s ease
    }

    @keyframes fade {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .modal .backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .5);
      backdrop-filter: blur(4px)
    }

    .dialog {
      position: relative;
      background: var(--paper);
      border-radius: 20px;
      width: min(540px, 100%);
      max-height: 92vh;
      overflow: auto;
      padding: 2.4rem clamp(1.4rem, 4vw, 2.4rem);
      box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
      animation: pop .4s cubic-bezier(.2, .8, .2, 1);
      border: 1px solid var(--line)
    }

    @keyframes pop {
      from {
        transform: translateY(14px) scale(.98);
        opacity: 0
      }

      to {
        transform: none;
        opacity: 1
      }
    }

    .dialog .x {
      position: absolute;
      top: 1.1rem;
      right: 1.1rem;
      border: 0;
      background: transparent;
      cursor: pointer;
      color: var(--ink-soft);
      font-size: 1.4rem;
      line-height: 1;
      padding: .2rem;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .dialog .x:hover {
      color: var(--ink)
    }

    .dialog h3 {
      font-size: 1.9rem;
      margin-bottom: .3rem
    }

    .dialog .sub {
      color: var(--ink-soft);
      font-weight: 300;
      margin-bottom: 1.6rem;
      font-size: .98rem
    }

    @media(max-width:480px) {
      .modal {
        padding: 12px;
        align-items: flex-end
      }

      .dialog {
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        animation: slideUp .4s cubic-bezier(.2, .8, .2, 1);
        width: 100%
      }

      .dialog .x {
        top: .8rem;
        right: .8rem
      }
    }

    @keyframes slideUp {
      from {
        transform: translateY(100%);
        opacity: 0
      }

      to {
        transform: none;
        opacity: 1
      }
    }

    .field {
      margin-bottom: 1.05rem
    }

    .field label {
      display: block;
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: .4rem;
      font-weight: 500
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      font-family: var(--sans);
      font-size: 1rem;
      color: var(--ink);
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: .9rem 1rem;
      transition: border-color .3s, box-shadow .3s;
      min-height: 48px
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(196, 145, 58, .15)
    }

    .field select option {
      background: var(--paper);
      color: var(--ink)
    }

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

    .grid2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem
    }

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

    .hp {
      position: absolute;
      left: -9999px;
      opacity: 0
    }

    .form-note {
      font-size: .82rem;
      color: var(--ink-soft);
      font-weight: 300;
      margin: .4rem 0 1.3rem;
      line-height: 1.45
    }

    .submit {
      width: 100%;
      justify-content: center;
      min-height: 48px
    }

    .form-status {
      margin-top: 1rem;
      font-size: .95rem;
      text-align: center;
      display: none
    }

    .form-status.ok {
      display: block;
      color: var(--sage)
    }

    .form-status.err {
      display: block;
      color: #c2664a
    }

    .dialog.done .form-body {
      display: none
    }

    .thanks {
      display: none;
      text-align: center;
      padding: 1rem 0
    }

    .dialog.done .thanks {
      display: block;
      animation: fade .4s ease
    }

    .thanks .ic {
      width: 54px;
      height: 54px;
      color: var(--gold);
      margin: 0 auto 1rem
    }

    .thanks h3 {
      margin-bottom: .5rem
    }

    .thanks p {
      color: var(--ink-soft);
      font-weight: 300
    }

    @media(max-width:820px) {
      body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom))
      }
    }

    .bnav {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 40;
      background: var(--nav-bg-2);
      backdrop-filter: saturate(140%) blur(8px);
      border-top: 1px solid var(--line);
      padding-bottom: env(safe-area-inset-bottom)
    }

    @media(max-width:820px) {
      .bnav {
        display: flex;
        flex-direction: column
      }
    }

    .bnav-tabs {
      display: flex;
      height: 56px;
      width: 100%
    }

    .bnav-tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border: 0;
      background: transparent;
      color: var(--ink-soft);
      font-family: var(--sans);
      font-size: .6rem;
      font-weight: 500;
      letter-spacing: .04em;
      text-transform: uppercase;
      cursor: pointer;
      min-height: 44px;
      transition: color .25s;
      padding: 0;
      text-decoration: none
    }

    .bnav-tab svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .bnav-tab.active,
    .bnav-tab:hover {
      color: var(--gold-deep)
    }

    .bnav-tab:active {
      color: var(--gold);
      transform: scale(.94)
    }

    .hide-mob {
      display: inline
    }

    @media(max-width:640px) {
      .hide-mob {
        display: none
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .rise {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important
      }

      .reveal {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important
      }
    }