/* nuhealth theme styles: extracted from assets/index.html */
:root {
      color-scheme: light;
      --forest: #123B2C;
      --forest-2: #1C4A39;
      --ink-2: #3E5A4E;
      --ink-3: #5E766B;
      --oat: #F4EFE4;
      --paper: #FBF8F1;
      --pack: #EEE7DD;
      --husk: #DCD3C2;
      --mist: #C9D6CF;
      --tangerine: #F0703A;
      --tangerine-ink: #B8481A;
      --indigo: #3D4A9E;
      --sprout: #B8E35A;
      --sun: #F6B93B;
      --t-flex: #FBE3D6;
      --t-zmg: #DDE0F2;
      --t-bone: #EAF6CF;
      --t-rise: #FDEFC9;
      --display: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
      --text: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
      --wrap: 1200px;
      --gutter: clamp(16px, 4vw, 48px);
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

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

      * {
        transition: none !important;
        animation: none !important
      }
    }

    body {
      background: var(--paper);
      color: var(--forest);
      font-family: var(--text);
      font-size: 17px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased
    }

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

    a {
      color: inherit
    }

    h1,
    h2,
    h3 {
      font-family: var(--display);
      font-weight: 500;
      letter-spacing: -0.035em;
      line-height: 1.04;
      margin: 0;
      text-wrap: balance
    }

    p {
      margin: 0
    }

    :focus-visible {
      outline: 3px solid var(--tangerine);
      outline-offset: 3px;
      border-radius: 4px
    }

    .wrap {
      max-width: calc(var(--wrap) + 2*var(--gutter));
      margin: 0 auto;
      padding-inline: var(--gutter)
    }

    .eyebrow {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--tangerine-ink)
    }

    .lede {
      font-size: clamp(17px, 1.6vw, 20px);
      color: var(--ink-2);
      max-width: 60ch
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      font: 600 16px/1 var(--text);
      text-decoration: none;
      border: 1.5px solid var(--forest);
      cursor: pointer;
      transition: background .2s, color .2s
    }

    .btn-solid {
      background: var(--forest);
      color: var(--oat)
    }

    .btn-solid:hover {
      background: var(--forest-2)
    }

    .btn-ghost {
      background: transparent;
      color: var(--forest)
    }

    .btn-ghost:hover {
      background: var(--forest);
      color: var(--oat)
    }

    .chip {
      display: inline-block;
      font-size: 13px;
      font-weight: 500;
      padding: 5px 11px;
      border-radius: 999px;
      background: var(--oat);
      color: var(--forest);
      white-space: nowrap
    }

    section {
      padding-block: clamp(64px, 9vw, 120px)
    }

    .sec-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-end;
      gap: 20px 48px;
      margin-bottom: clamp(32px, 5vw, 56px)
    }

    .sec-head h2 {
      font-size: clamp(34px, 4.6vw, 58px);
      max-width: 16ch
    }

    .sec-head .lede {
      max-width: 44ch
    }

    /* header */
    .top {
      position: sticky;
      top: env(safe-area-inset-top, 0px);
      z-index: 20;
      background: rgba(251, 248, 241, .92);
      backdrop-filter: saturate(1.2) blur(10px);
      border-bottom: 1px solid var(--husk)
    }

    .top .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: 72px
    }

    .brand {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      text-decoration: none
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 28px
    }

    .nav a {
      text-decoration: none;
      font-weight: 500;
      font-size: 15px;
      color: var(--ink-2)
    }

    .nav a:hover {
      color: var(--forest)
    }

    .nav .btn {
      min-height: 42px;
      padding: 0 18px;
      font-size: 15px;
      color: var(--oat)
    }

    .menu-btn {
      display: none;
      background: none;
      border: 1.5px solid var(--forest);
      border-radius: 999px;
      min-height: 42px;
      padding: 0 16px;
      font: 600 15px var(--text);
      color: var(--forest)
    }

    @media (max-width:900px) {
      .menu-btn {
        display: inline-flex;
        align-items: center
      }

      .nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: var(--paper);
        border-bottom: 1px solid var(--husk);
        padding: 12px var(--gutter) 20px
      }

      .nav.open {
        display: flex
      }

      .nav a {
        padding: 10px 0;
        font-size: 17px
      }
    }

    /* hero */
    .hero {
      position: relative;
      padding: 0;
      background: var(--oat);
      overflow: hidden
    }

    .hero-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 72% 40%
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(244, 239, 228, .97) 0%, rgba(244, 239, 228, .9) 38%, rgba(244, 239, 228, 0) 72%)
    }

    .hero .wrap {
      position: relative;
      z-index: 1;
      padding-block: clamp(72px, 11vw, 150px) clamp(56px, 8vw, 110px)
    }

    .hero-copy {
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 24px
    }

    .hero h1 {
      font-size: clamp(40px, 6vw, 76px)
    }

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

    @media (max-width:760px) {
      .hero-img {
        position: relative;
        height: 300px;
        object-position: 70% 30%
      }

      .hero::after {
        display: none
      }
    }

    /* proof band */
    .proof {
      --proof-tile: 72px;
      --proof-icon: 36px;
      --proof-gap: clamp(16px, 1.67vw, 24px);
      --proof-sep-l: clamp(18px, 2.15vw, 31px);
      --proof-sep-r: clamp(10px, .97vw, 14px);
      --proof-lime: #D2F485;
      --proof-confirm: #FF7E0A;
      --proof-rule: rgba(214, 240, 222, .34);
      position: relative;
      color: #fff;
      padding-block: 32px 42px;
      background-color: #063528;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='150' viewBox='0 0 480 150' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='480' y1='0' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23A9E6B4' stop-opacity='.24'/%3E%3Cstop offset='.6' stop-color='%23A9E6B4' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23A9E6B4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath stroke='url(%23a)' d='M0 64C92 74 168 141 242 137S404 102 480 88M0 70.2C92 80.6 168 141.7 242 137.7S404 102.5 480 88.5M0 76.4C92 87.2 168 142.4 242 138.4S404 103 480 89M0 82.6C92 93.8 168 143.1 242 139.1S404 103.5 480 89.5M0 88.8C92 100.4 168 143.8 242 139.8S404 104 480 90M0 95C92 107 168 144.5 242 140.5S404 104.5 480 90.5M0 101.2C92 113.6 168 145.2 242 141.2S404 105 480 91M0 107.4C92 120.2 168 145.9 242 141.9S404 105.5 480 91.5M0 113.6C92 126.8 168 146.6 242 142.6S404 106 480 92M0 119.8C92 133.4 168 147.3 242 143.3S404 106.5 480 92.5M0 126C92 140 168 148 242 144S404 107 480 93'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='470' height='150' viewBox='0 0 470 150' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' x2='470' y1='0' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23A9E6B4' stop-opacity='0'/%3E%3Cstop offset='.4' stop-color='%23A9E6B4' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23A9E6B4' stop-opacity='.24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath stroke='url(%23b)' d='M0 151C120 140 214 70 330 38S440 -6 470 -14M0 151.3C120 139.4 214 74.6 330 43.8S440 1.6 470 -6.4M0 151.6C120 138.8 214 79.2 330 49.6S440 9.2 470 1.2M0 151.9C120 138.2 214 83.8 330 55.4S440 16.8 470 8.8M0 152.2C120 137.6 214 88.4 330 61.2S440 24.4 470 16.4M0 152.5C120 137 214 93 330 67S440 32 470 24M0 152.8C120 136.4 214 97.6 330 72.8S440 39.6 470 31.6M0 153.1C120 135.8 214 102.2 330 78.6S440 47.2 470 39.2M0 153.4C120 135.2 214 106.8 330 84.4S440 54.8 470 46.8M0 153.7C120 134.6 214 111.4 330 90.2S440 62.4 470 54.4M0 154C120 134 214 116 330 96S440 70 470 62'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #073C2D 0%, #063528 55%, #053226 100%);
      background-repeat: no-repeat;
      background-position: left bottom, right top, 0 0;
      background-size: 480px 150px, 470px 150px, 100% 100%
    }

    .proof .wrap {
      max-width: calc(1400px + 2*var(--gutter))
    }

    .proof ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, auto);
      row-gap: 28px;
      align-items: start
    }

    .proof li {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: var(--proof-gap);
      min-width: 0
    }

    .proof li:not(:last-child) {
      margin-right: var(--proof-sep-r)
    }

    .proof li + li {
      margin-left: var(--proof-sep-l)
    }

    .proof li:nth-child(4n) {
      margin-right: 0
    }

    .proof li:nth-child(4n+1) {
      margin-left: 0
    }

    /* glass icon tile */
    .proof li::before {
      content: "";
      flex: none;
      width: var(--proof-tile);
      height: var(--proof-tile);
      border: 1px solid transparent;
      border-radius: 14px;
      background:
        radial-gradient(75% 55% at 8% 100%, rgba(130, 205, 155, .3), rgba(130, 205, 155, 0) 75%) padding-box,
        linear-gradient(180deg, #093E2C 0%, #083828 55%, #073426 100%) padding-box,
        linear-gradient(170deg, rgba(224, 244, 232, .62), rgba(224, 244, 232, .54) 50%, rgba(224, 244, 232, .66)) border-box;
      box-shadow: 0 12px 20px -6px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .3), inset 0 0 12px rgba(0, 0, 0, .12)
    }

    /* divider */
    .proof li + li::after {
      content: "";
      position: absolute;
      left: calc(-1 * var(--proof-sep-l));
      top: 5px;
      width: 1px;
      height: calc(var(--proof-tile) - 5px);
      background: var(--proof-rule)
    }

    .proof li:nth-child(4n+1)::after {
      content: none
    }

    /* icon sits centred on the tile */
    .proof li > svg,
    .proof li > img {
      position: absolute;
      left: calc((var(--proof-tile) - var(--proof-icon)) / 2);
      top: calc((var(--proof-tile) - var(--proof-icon)) / 2);
      width: var(--proof-icon);
      height: var(--proof-icon);
      margin: 0;
      color: var(--proof-lime);
      stroke: currentColor;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 6px rgba(205, 245, 125, .32)) drop-shadow(0 2px 2px rgba(0, 0, 0, .3))
    }

    .proof li > svg [fill]:not([fill="none"]) {
      fill: currentColor
    }

    .proof li > div {
      flex: 0 1 auto;
      min-width: 0;
      max-width: 216px;
      padding-top: 8px;
      font: 300 15px/21px var(--display);
      letter-spacing: -.01em;
      color: #fff
    }

    .proof li > div > b {
      display: block;
      margin-bottom: 4px;
      font: 700 16px/1.35 var(--display);
      letter-spacing: -.01em;
      color: #fff
    }

    .proof li > div > span {
      display: block
    }

    .proof li > div > span b {
      display: inline;
      font: inherit;
      font-weight: 400;
      color: var(--proof-confirm)
    }

    /* tablet: 2 x 2 */
    @media (max-width:1199px) {
      .proof {
        --proof-gap: 20px;
        --proof-sep-l: clamp(20px, 3.5vw, 36px);
        padding-block: 36px 40px
      }

      .proof ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px
      }

      .proof li:nth-child(odd) {
        margin-left: 0;
        margin-right: var(--proof-sep-l)
      }

      .proof li:nth-child(even) {
        margin-left: var(--proof-sep-l);
        margin-right: 0
      }

      .proof li:nth-child(odd)::after {
        content: none
      }

      .proof li > div {
        max-width: 340px
      }
    }

    /* mobile: stacked, dividers turn horizontal */
    @media (max-width:639px) {
      .proof {
        --proof-tile: 60px;
        --proof-icon: 34px;
        --proof-gap: 16px;
        padding-block: 28px 32px;
        background-size: 360px 112px, 352px 112px, 100% 100%
      }

      .proof ul {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0
      }

      .proof li:nth-child(odd),
      .proof li:nth-child(even) {
        margin: 0
      }

      .proof li:nth-child(n+2) {
        margin-top: 37px
      }

      .proof li:nth-child(n+2)::after {
        content: "";
        left: 0;
        right: 0;
        top: -19px;
        width: auto;
        height: 1px
      }

      .proof li::before {
        border-radius: 13px
      }

      .proof li > div {
        max-width: none;
        padding-top: 2px
      }
    }

    /* range */
    .range-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px
    }

    .card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-decoration: none
    }

    .card-img {
      background: var(--pack);
      border-radius: 18px;
      aspect-ratio: 4/5;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden
    }

    .card-img img {
      height: 82%;
      width: auto;
      object-fit: contain;
      transition: transform .35s
    }

    .card:hover .card-img img {
      transform: translateY(-6px)
    }

    .card h3 {
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -.02em;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex: none
    }

    .card .cat {
      color: var(--ink-2);
      font-size: 15px
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px
    }

    @media (max-width:980px) {
      .range-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

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

    /* product detail */
    .detail {
      background: var(--oat)
    }

    .tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 28px
    }

    .tab {
      min-height: 44px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1.5px solid var(--husk);
      background: var(--paper);
      font: 600 15px var(--text);
      color: var(--forest);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .tab[aria-selected="true"] {
      background: var(--forest);
      border-color: var(--forest);
      color: var(--oat)
    }

    .panel {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: clamp(24px, 4vw, 56px);
      align-items: start
    }

    .panel-media {
      display: grid;
      gap: 12px
    }

    .panel-media .life {
      border-radius: 16px;
      aspect-ratio: 4/3;
      object-fit: cover;
      width: 100%
    }

    .panel-body {
      display: flex;
      flex-direction: column;
      gap: 22px
    }

    .panel-body h3 {
      font-size: clamp(40px, 5vw, 60px);
      font-weight: 600;
      letter-spacing: -.04em
    }

    .panel-body .for {
      font-family: var(--display);
      font-size: clamp(20px, 2vw, 24px);
      line-height: 1.3;
      letter-spacing: -.015em
    }

    .ing {
      display: grid;
      gap: 0
    }

    .ing div {
      border-top: 1px solid var(--husk);
      padding-block: 11px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
      gap: 16px
    }

    .ing b {
      font-weight: 600
    }

    .ing span {
      color: var(--ink-2);
      font-size: 15px
    }

    .specs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      background: var(--husk);
      border: 1px solid var(--husk);
      border-radius: 14px;
      overflow: hidden
    }

    .specs div {
      background: var(--paper);
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .specs dt {
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-3)
    }

    .specs dd {
      margin: 0;
      font-weight: 600;
      font-size: 15px;
      font-variant-numeric: tabular-nums
    }

    .tbc {
      color: var(--tangerine-ink)
    }

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

      .specs {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    /* formulator */
    .doc {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: clamp(28px, 5vw, 72px);
      align-items: center
    }

    .doc img {
      border-radius: 20px;
      aspect-ratio: 1/1;
      object-fit: cover;
      object-position: 50% 25%;
      width: 100%
    }

    .doc-copy {
      display: flex;
      flex-direction: column;
      gap: 22px
    }

    .doc-copy h2 {
      font-size: clamp(34px, 4.4vw, 54px)
    }

    .quote {
      font-family: var(--display);
      font-size: clamp(22px, 2.4vw, 28px);
      line-height: 1.25;
      letter-spacing: -.02em;
      color: var(--tangerine-ink);
      border-left: 3px solid var(--tangerine);
      padding-left: 18px
    }

    .facts {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 40px;
      border-top: 1px solid var(--husk);
      padding-top: 18px
    }

    .facts b {
      display: block;
      font-family: var(--display);
      font-size: 22px;
      font-weight: 600
    }

    .facts span {
      color: var(--ink-2);
      font-size: 15px
    }

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

    /* markets */
    .markets {
      background: var(--forest);
      color: var(--oat)
    }

    .markets .eyebrow {
      color: var(--sun)
    }

    .markets .lede {
      color: var(--mist)
    }

    .mkt-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 28px
    }

    .mkt-tabs .tab {
      background: transparent;
      color: var(--oat);
      border-color: rgba(244, 239, 228, .35)
    }

    .mkt-tabs .tab[aria-selected="true"] {
      background: var(--oat);
      color: var(--forest);
      border-color: var(--oat)
    }

    .tag-new {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      background: var(--sun);
      color: var(--forest);
      padding: 3px 7px;
      border-radius: 999px
    }

    .mkt {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
      gap: clamp(24px, 4vw, 56px)
    }

    .mkt h3 {
      font-size: clamp(30px, 3.4vw, 42px);
      margin-bottom: 14px
    }

    .mkt p {
      color: var(--mist);
      max-width: 56ch
    }

    .countries {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 22px
    }

    .countries span {
      border: 1px solid rgba(244, 239, 228, .3);
      border-radius: 999px;
      padding: 6px 13px;
      font-size: 14px
    }

    .support {
      background: var(--forest-2);
      border-radius: 18px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .support h4 {
      margin: 0;
      font-family: var(--display);
      font-weight: 500;
      font-size: 20px
    }

    .support ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px
    }

    .support li {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 8px;
      font-size: 15px;
      color: var(--mist);
      line-height: 1.45
    }

    .support li::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--sprout);
      margin-top: 7px
    }

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

    /* partner */
    .steps {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 22px;
      counter-reset: s
    }

    .steps li {
      display: flex;
      flex-direction: column;
      gap: 10px;
      counter-increment: s
    }

    .steps li::before {
      content: counter(s, decimal-leading-zero);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--forest);
      color: var(--oat);
      display: flex;
      align-items: center;
      justify-content: center;
      font: 600 15px var(--display)
    }

    .steps li:last-child::before {
      background: var(--tangerine)
    }

    .steps b {
      font-family: var(--display);
      font-weight: 600;
      font-size: 19px;
      letter-spacing: -.01em;
      line-height: 1.2
    }

    .steps span {
      font-size: 15px;
      color: var(--ink-2)
    }

    @media (max-width:1020px) {
      .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }
    }

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

    .models {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      margin-top: clamp(40px, 6vw, 72px)
    }

    .model {
      background: var(--oat);
      border-radius: 18px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      border-top: 6px solid var(--c)
    }

    .model h3 {
      font-size: 25px;
      font-weight: 600;
      letter-spacing: -.02em
    }

    .model p {
      color: var(--ink-2);
      font-size: 15px
    }

    .model ul {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 6px;
      font-size: 15px
    }

    .model .commit {
      margin-top: auto;
      border-top: 1px solid var(--husk);
      padding-top: 12px;
      font-size: 14px;
      font-weight: 600
    }

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

    /* faq */
    .faq {
      background: var(--oat)
    }

    .faq-list {
      display: grid;
      gap: 0;
      max-width: 880px
    }

    details {
      border-top: 1px solid var(--husk)
    }

    details:last-child {
      border-bottom: 1px solid var(--husk)
    }

    summary {
      cursor: pointer;
      list-style: none;
      padding: 20px 40px 20px 0;
      font-family: var(--display);
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -.01em;
      position: relative
    }

    summary::-webkit-details-marker {
      display: none
    }

    summary::after {
      content: "+";
      position: absolute;
      right: 4px;
      top: 16px;
      font-size: 26px;
      font-weight: 300;
      color: var(--tangerine-ink)
    }

    details[open] summary::after {
      content: "–"
    }

    details p {
      padding-bottom: 20px;
      color: var(--ink-2);
      max-width: 70ch
    }

    /* enquiry */
    .enquire {
      display: grid;
      grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
      gap: clamp(28px, 5vw, 72px);
      align-items: start
    }

    .enq-side {
      display: flex;
      flex-direction: column;
      gap: 22px;
      position: sticky;
      top: 100px
    }

    .enq-side img {
      border-radius: 18px;
      aspect-ratio: 4/3;
      object-fit: cover;
      object-position: 70% 40%;
      width: 100%
    }

    .contact-lines {
      display: grid;
      gap: 10px;
      font-size: 15px
    }

    .contact-lines div {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 10px;
      border-top: 1px solid var(--husk);
      padding-top: 10px
    }

    .contact-lines dt {
      color: var(--ink-3);
      font-size: 13px;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding-top: 2px
    }

    .contact-lines dd {
      margin: 0;
      font-weight: 600;
      user-select: all
    }

    form {
      background: var(--oat);
      border-radius: 22px;
      padding: clamp(22px, 3vw, 36px);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px
    }

    .f {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .f.full {
      grid-column: 1/-1
    }

    label,
    .lbl {
      font-size: 14px;
      font-weight: 600
    }

    input,
    select,
    textarea {
      font: 16px var(--text);
      color: var(--forest);
      background: var(--paper);
      border: 1.5px solid var(--husk);
      border-radius: 12px;
      padding: 12px 14px;
      min-height: 48px;
      width: 100%
    }

    textarea {
      min-height: 110px;
      resize: vertical
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--forest)
    }

    .checks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .checks label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--paper);
      border: 1.5px solid var(--husk);
      border-radius: 999px;
      padding: 8px 14px;
      font-weight: 500;
      cursor: pointer;
      min-height: 44px
    }

    .checks input {
      width: 18px;
      height: 18px;
      min-height: 0;
      accent-color: var(--forest)
    }

    .err {
      color: #A3261A;
      font-size: 13px;
      min-height: 1em
    }

    .f.bad input,
    .f.bad select {
      border-color: #A3261A
    }

    .form-foot {
      grid-column: 1/-1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px
    }

    .form-foot small {
      color: var(--ink-3);
      max-width: 44ch
    }

    .done {
      grid-column: 1/-1;
      background: var(--paper);
      border-radius: 14px;
      padding: 18px;
      border: 1.5px solid var(--sprout)
    }

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

      .enq-side {
        position: static
      }
    }

    @media (max-width:560px) {
      form {
        grid-template-columns: 1fr
      }
    }

    /* footer */
    footer {
      background: var(--forest);
      color: var(--mist);
      padding-block: 48px 36px
    }

    footer .wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 28px
    }

    footer .fine {
      font-size: 13px;
      max-width: 60ch;
      line-height: 1.5
    }

    footer nav {
      display: flex;
      flex-wrap: wrap;
      gap: 22px;
      font-size: 15px
    }

    footer nav a {
      text-decoration: none;
      color: var(--oat)
    }

    /* ---------- product pages ---------- */
    .pp-crumb {
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 14px;
      color: var(--ink-3);
      padding-top: 28px
    }

    .pp-crumb a {
      color: var(--ink-2)
    }

    .pp-hero {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: clamp(28px, 5vw, 72px);
      align-items: center;
      padding-block: 28px clamp(48px, 7vw, 88px)
    }

    .pp-jar {
      background: var(--pack);
      border-radius: 24px;
      aspect-ratio: 1/1.05;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden
    }

    .pp-jar img {
      height: 86%;
      width: auto;
      object-fit: contain
    }

    .pp-info {
      display: flex;
      flex-direction: column;
      gap: 18px
    }

    .pp-bar {
      width: 56px;
      height: 9px;
      border-radius: 5px
    }

    .pp-info h1 {
      font-size: clamp(48px, 7vw, 88px);
      font-weight: 600;
      letter-spacing: -.045em;
      line-height: .95
    }

    .pp-cat {
      font-family: var(--display);
      font-size: clamp(20px, 2vw, 24px);
      color: var(--ink-2)
    }

    .pp-line {
      font-family: var(--display);
      font-size: clamp(20px, 2.2vw, 26px);
      line-height: 1.28;
      letter-spacing: -.015em;
      max-width: 32ch
    }

    .pp-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center
    }

    .pp-note {
      font-size: 14px;
      color: var(--ink-3)
    }

    .pp-sec {
      padding-block: clamp(48px, 7vw, 88px);
      border-top: 1px solid var(--husk)
    }

    .pp-sec h2 {
      font-size: clamp(28px, 3.4vw, 40px);
      margin-bottom: 28px
    }

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

    .benefit {
      background: var(--oat);
      border-radius: 18px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .benefit b {
      font-family: var(--display);
      font-size: 21px;
      font-weight: 600;
      letter-spacing: -.015em;
      display: flex;
      gap: 10px;
      align-items: center
    }

    .benefit span {
      color: var(--ink-2);
      font-size: 15px
    }

    .ing-table {
      display: grid;
      border-top: 1px solid var(--husk)
    }

    .ing-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .8fr);
      gap: 20px;
      padding-block: 16px;
      border-bottom: 1px solid var(--husk);
      align-items: baseline
    }

    .ing-row b {
      font-family: var(--display);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -.01em;
      display: block
    }

    .ing-row small {
      color: var(--ink-3);
      font-size: 13px
    }

    .ing-row .amt {
      text-align: right;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      font-size: 15px
    }

    .ing-head {
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-3);
      padding-block: 10px
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px
    }

    .gallery img {
      border-radius: 18px;
      aspect-ratio: 4/3;
      object-fit: cover;
      width: 100%
    }

    .aud {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px
    }

    .aud div {
      border: 1.5px solid var(--husk);
      border-radius: 16px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .aud b {
      font-family: var(--display);
      font-size: 19px;
      font-weight: 600
    }

    .aud span {
      font-size: 14px;
      color: var(--ink-2)
    }

    .use-grid {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 24px;
      align-items: start
    }

    .use-card {
      background: var(--forest);
      color: var(--oat);
      border-radius: 18px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .use-card h3 {
      font-size: 24px
    }

    .use-card p {
      color: var(--mist)
    }

    .use-card .tbc {
      color: var(--sun)
    }

    .caut {
      margin: 0;
      padding-left: 20px;
      display: grid;
      gap: 8px;
      color: var(--ink-2);
      font-size: 15px
    }

    .spec-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 40px
    }

    .spec-grid div {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr);
      gap: 14px;
      border-top: 1px solid var(--husk);
      padding-block: 11px;
      font-size: 15px
    }

    .spec-grid dt {
      color: var(--ink-3);
      font-size: 13px;
      letter-spacing: .05em;
      text-transform: uppercase;
      padding-top: 2px
    }

    .spec-grid dd {
      margin: 0;
      font-weight: 500
    }

    .pairs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px
    }

    .pair {
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
      background: var(--oat);
      border-radius: 18px;
      padding: 14px;
      text-decoration: none
    }

    .pair img {
      background: var(--pack);
      border-radius: 12px;
      height: 130px;
      width: 110px;
      object-fit: contain
    }

    .pair b {
      font-family: var(--display);
      font-size: 22px;
      font-weight: 600;
      display: block
    }

    .pair span {
      color: var(--ink-2);
      font-size: 15px
    }

    .pair:hover {
      background: var(--husk)
    }

    .cta-band {
      background: var(--forest);
      color: var(--oat);
      border-radius: 24px;
      padding: clamp(28px, 4vw, 48px);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      margin-block: clamp(48px, 7vw, 88px)
    }

    .cta-band h2 {
      font-size: clamp(28px, 3.6vw, 44px);
      max-width: 18ch
    }

    .cta-band .btn {
      background: var(--oat);
      color: var(--forest);
      border-color: var(--oat)
    }

    .pp-pn {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 48px;
      font-weight: 600
    }

    .pp-pn a {
      text-decoration: none
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      transform: translateX(-50%);
      background: var(--forest);
      color: var(--oat);
      padding: 12px 18px;
      border-radius: 12px;
      font-size: 15px;
      z-index: 50;
      max-width: calc(100% - 32px)
    }

    @media (max-width:900px) {

      .pp-hero,
      .use-grid {
        grid-template-columns: 1fr
      }

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

      .aud {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .spec-grid,
      .pairs {
        grid-template-columns: 1fr
      }

      .ing-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
      }

      .ing-row p {
        grid-column: 1/-1;
        order: 3
      }
    }

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

      .spec-grid div {
        grid-template-columns: 1fr;
        gap: 2px
      }

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

    /* ---------- enquiry form ---------- */
    .stepper {
      grid-column: 1/-1;
      list-style: none;
      margin: 0 0 4px;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      counter-reset: st
    }

    .stepper li {
      counter-increment: st
    }

    .stepper button {
      width: 100%;
      text-align: left;
      background: none;
      border: 0;
      border-top: 4px solid var(--husk);
      padding: 10px 0 0;
      font: 600 14px var(--text);
      color: var(--ink-3);
      cursor: default;
      display: flex;
      gap: 8px;
      align-items: center
    }

    .stepper button::before {
      content: counter(st);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--husk);
      color: var(--forest);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex: none
    }

    .stepper .cur button {
      border-color: var(--forest);
      color: var(--forest)
    }

    .stepper .cur button::before {
      background: var(--forest);
      color: var(--oat)
    }

    .stepper .ok button {
      border-color: var(--sprout);
      color: var(--forest);
      cursor: pointer
    }

    .stepper .ok button::before {
      content: "✓";
      background: var(--sprout)
    }

    fieldset.step {
      border: 0;
      margin: 0;
      padding: 0;
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      min-width: 0
    }

    fieldset.step legend {
      grid-column: 1/-1;
      font-family: var(--display);
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -.02em;
      padding: 0;
      margin-bottom: 4px
    }

    .opt {
      font-weight: 400;
      color: var(--ink-3)
    }

    .phone {
      display: flex;
      align-items: stretch
    }

    .phone span {
      display: flex;
      align-items: center;
      padding: 0 12px;
      background: var(--husk);
      border: 1.5px solid var(--husk);
      border-right: 0;
      border-radius: 12px 0 0 12px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      min-width: 64px;
      justify-content: center
    }

    .phone input {
      border-radius: 0 12px 12px 0
    }

    .radio-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 8px
    }

    .radio-cards label {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      background: var(--paper);
      border: 1.5px solid var(--husk);
      border-radius: 14px;
      padding: 12px 14px;
      cursor: pointer;
      font-weight: 500;
      line-height: 1.3
    }

    .radio-cards input {
      width: 18px;
      height: 18px;
      min-height: 0;
      margin-top: 1px;
      accent-color: var(--forest);
      flex: none
    }

    .radio-cards label:has(input:checked) {
      border-color: var(--forest);
      background: #fff
    }

    .prod-rows {
      display: grid;
      gap: 8px
    }

    .prod-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
      gap: 10px;
      align-items: center;
      background: var(--paper);
      border: 1.5px solid var(--husk);
      border-radius: 14px;
      padding: 8px 10px 8px 14px
    }

    .prod-row:has(input:checked) {
      border-color: var(--forest)
    }

    .prod-row label {
      display: flex;
      gap: 10px;
      align-items: center;
      font-weight: 600;
      cursor: pointer;
      min-height: 40px
    }

    .prod-row input[type=checkbox] {
      width: 18px;
      height: 18px;
      min-height: 0;
      accent-color: var(--forest)
    }

    .prod-row select {
      min-height: 40px;
      padding: 8px 10px
    }

    .prod-row select:disabled {
      opacity: .45
    }

    .hint {
      font-size: 13px;
      color: var(--ink-3)
    }

    .hint b {
      color: var(--forest)
    }

    .file-box {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center
    }

    .file-box input {
      background: var(--paper);
      padding: 10px
    }

    .hp {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden
    }

    .consent {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-weight: 500;
      line-height: 1.4;
      cursor: pointer
    }

    .consent input {
      width: 20px;
      height: 20px;
      min-height: 0;
      accent-color: var(--forest);
      margin-top: 1px;
      flex: none
    }

    .review {
      grid-column: 1/-1;
      background: var(--paper);
      border-radius: 16px;
      padding: 18px 20px;
      display: grid;
      gap: 10px
    }

    .review h4 {
      margin: 0;
      font-family: var(--display);
      font-size: 18px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .review h4 button {
      background: none;
      border: 0;
      color: var(--tangerine-ink);
      font: 600 14px var(--text);
      cursor: pointer;
      min-height: 36px
    }

    .review dl {
      margin: 0;
      display: grid;
      grid-template-columns: 170px minmax(0, 1fr);
      gap: 6px 14px;
      font-size: 15px
    }

    .review dt {
      color: var(--ink-3)
    }

    .review dd {
      margin: 0;
      font-weight: 500;
      overflow-wrap: anywhere
    }

    .err-summary {
      grid-column: 1/-1;
      background: #FBE9E6;
      border: 1.5px solid #A3261A;
      border-radius: 14px;
      padding: 14px 16px;
      color: #7A1C13
    }

    .err-summary ul {
      margin: 6px 0 0;
      padding-left: 20px
    }

    .err-summary a {
      color: #7A1C13
    }

    .form-nav {
      grid-column: 1/-1;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--husk);
      padding-top: 18px
    }

    .form-nav .left {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      align-items: center
    }

    .linkbtn {
      background: none;
      border: 0;
      padding: 0;
      color: var(--ink-2);
      font: 500 14px var(--text);
      text-decoration: underline;
      cursor: pointer;
      min-height: 36px
    }

    .draft-note {
      font-size: 13px;
      color: var(--ink-3)
    }

    .success {
      grid-column: 1/-1;
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .success h3 {
      font-size: clamp(28px, 3vw, 36px)
    }

    .ref {
      font: 600 22px var(--display);
      letter-spacing: .02em;
      background: var(--paper);
      border: 1.5px dashed var(--forest);
      border-radius: 12px;
      padding: 10px 16px;
      align-self: flex-start;
      user-select: all;
      font-variant-numeric: tabular-nums
    }

    .f select[multiple] {
      min-height: 120px
    }

    @media (max-width:560px) {
      fieldset.step {
        grid-template-columns: 1fr
      }

      .prod-row {
        grid-template-columns: 1fr
      }

      .review dl {
        grid-template-columns: 1fr;
        gap: 0 0
      }

      .review dd {
        margin-bottom: 8px
      }

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

    [tabindex="-1"]:focus {
      outline: none
    }

/* ---------- WordPress ---------- */
body { margin: 0 }
[hidden] { display: none !important }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important }
.admin-bar .top { top: 32px }
@media (max-width: 782px) { .admin-bar .top { top: 46px } }
.sec-title { display: flex; flex-direction: column; gap: 14px }
.brand img { height: 36px; width: auto }

/* header menu (wp_nav_menu) */
.nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0 }
@media (max-width:900px) {
  .nav ul { flex-direction: column; align-items: flex-start; gap: 4px }
  .nav .btn { margin-top: 8px }
}

/* footer menu (wp_nav_menu) */
footer nav ul { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0 }

/* "to confirm" notes: admin text uses a plain <b> tag (same look as .tbc) */
.lede b,
.proof li span b,
.ing-row small b,
.ing-row p b,
.ing-row .amt b,
details p b,
.spec-grid dd b,
.support li b,
.commit b,
.contact-lines dd b { display: inline; font: inherit; letter-spacing: inherit; color: var(--tangerine-ink) }
.use-card p b { font: inherit; color: var(--sun) }

/* market support + model text from wysiwyg */
.support h4 + ul { margin-top: 0 }
.model ul { margin: 0 }

/* simple pages (404, search, blog) */
.site-main { max-width: calc(var(--wrap) + 2*var(--gutter)); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter) }

/* ---------- Forminator enquiry form = HTML #enq form (Design style: None) ---------- */
#enquire .forminator-ui.forminator-custom-form { display: flex; flex-direction: column; gap: 18px; background: var(--oat); border-radius: 22px; padding: clamp(22px, 3vw, 36px); margin: 0 }
#enquire .forminator-pagination--content { display: flex; flex-direction: column; gap: 18px }
#enquire .forminator-ui .forminator-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 }
#enquire .forminator-ui .forminator-col { flex: 1 1 220px; min-width: 0; padding: 0 }
#enquire .forminator-ui .forminator-col-12 { flex-basis: 100% }
#enquire .forminator-ui .forminator-field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0 }
#enquire .forminator-ui .forminator-label { font-size: 14px; font-weight: 600; color: var(--forest); padding: 0; margin: 0 }
#enquire .forminator-ui .forminator-required { display: none }
#enquire .forminator-ui .forminator-description { font-size: 13px; color: var(--ink-3) }
#enquire .forminator-ui .forminator-field > div:has(> .forminator-description) { order: 9 }
#enquire .forminator-ui textarea { min-height: 110px; resize: vertical }
#enquire .forminator-ui .forminator-hidden { display: none !important }

/* stepper (.stepper) */
#enquire .forminator-pagination-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 4px; counter-reset: st }
#enquire .forminator-pagination-steps .forminator-break,
#enquire .forminator-pagination-steps .forminator-step-dot { display: none }
#enquire .forminator-pagination-steps button { counter-increment: st; width: 100%; text-align: left; background: none; border: 0; border-top: 4px solid var(--husk); padding: 10px 0 0; font: 600 14px var(--text); color: var(--ink-3); cursor: default; display: flex; gap: 8px; align-items: center }
#enquire .forminator-pagination-steps button::before { content: counter(st); width: 24px; height: 24px; border-radius: 50%; background: var(--husk); color: var(--forest); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none }
#enquire .forminator-pagination-steps button.forminator-current { border-color: var(--forest); color: var(--forest) }
#enquire .forminator-pagination-steps button.forminator-current::before { background: var(--forest); color: var(--oat) }
#enquire .forminator-pagination-steps button.nh-ok { border-color: var(--sprout); color: var(--forest); cursor: pointer }
#enquire .forminator-pagination-steps button.nh-ok::before { content: "✓"; background: var(--sprout) }

/* step legend (fieldset.step legend) */
#enquire .forminator-ui .forminator-title { font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 4px }

/* phone with country code (.phone) */
#enquire .phone { display: flex; align-items: stretch }
#enquire .phone span { display: flex; align-items: center; padding: 0 12px; background: var(--husk); border: 1.5px solid var(--husk); border-right: 0; border-radius: 12px 0 0 12px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 64px; justify-content: center }
#enquire .phone input { border-radius: 0 12px 12px 0 }

/* radio + checkbox base */
#enquire .forminator-ui .forminator-checkbox input,
#enquire .forminator-ui .forminator-radio input { position: static; opacity: 1; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--forest); flex: none }
#enquire .forminator-ui .forminator-checkbox-box,
#enquire .forminator-ui .forminator-radio-bullet { display: none }

/* enquiry type → .radio-cards */
#enquire #radio-1 .forminator-field { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px }
#enquire #radio-1 .forminator-label { grid-column: 1 / -1 }
#enquire #radio-1 .forminator-radio { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1.5px solid var(--husk); border-radius: 14px; padding: 12px 14px; cursor: pointer; font-weight: 500; line-height: 1.3; margin: 0 }
#enquire #radio-1 .forminator-radio input { margin-top: 1px }
#enquire #radio-1 .forminator-radio:has(input:checked) { border-color: var(--forest); background: #fff }

/* channels + best way to reach → .checks pills */
#enquire #checkbox-2 .forminator-field,
#enquire #radio-2 .forminator-field { flex-direction: row; flex-wrap: wrap; gap: 8px }
#enquire #checkbox-2 .forminator-label,
#enquire #radio-2 .forminator-label { flex-basis: 100% }
#enquire #checkbox-2 .forminator-checkbox,
#enquire #radio-2 .forminator-radio { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1.5px solid var(--husk); border-radius: 999px; padding: 8px 14px; font-weight: 500; cursor: pointer; min-height: 44px; margin: 0 }

/* products → .prod-rows */
#enquire .prod-rows { display: grid; gap: 8px }
#enquire .prod-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 10px; align-items: center; background: var(--paper); border: 1.5px solid var(--husk); border-radius: 14px; padding: 8px 10px 8px 14px }
#enquire .prod-row:has(input:checked) { border-color: var(--forest) }
#enquire .prod-row .forminator-checkbox { display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; min-height: 40px; margin: 0 }
#enquire .prod-row select { min-height: 40px; padding: 8px 10px }
#enquire .prod-row select:disabled { opacity: .45 }
#enquire .opt { font-weight: 400; color: var(--ink-3) }
#enquire .nh-volumes { display: none !important }

/* file upload (.file-box) */
#enquire .forminator-file-upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
#enquire .forminator-ui input[type=file] { background: var(--paper); padding: 10px }
#enquire .forminator-upload--remove { background: none; border: 0; padding: 0; color: var(--ink-2); font: 500 14px var(--text); text-decoration: underline; cursor: pointer; min-height: 36px }

/* review (.review) */
#enquire .review { background: var(--paper); border-radius: 16px; padding: 18px 20px; display: grid; gap: 10px }
#enquire .review:empty { display: none }
#enquire .review h4 { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center }
#enquire .review h4 button { background: none; border: 0; color: var(--tangerine-ink); font: 600 14px var(--text); cursor: pointer; min-height: 36px }
#enquire .review dl { margin: 0; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 14px; font-size: 15px }
#enquire .review dt { color: var(--ink-3) }
#enquire .review dd { margin: 0; font-weight: 500; overflow-wrap: anywhere }

/* consent (.consent) */
#enquire #gdprcheckbox-1 .forminator-checkbox { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; line-height: 1.4; cursor: pointer; margin: 0 }
#enquire #gdprcheckbox-1 .forminator-checkbox input { width: 20px; height: 20px; margin-top: 1px }

/* validation (.err / .err-summary) */
#enquire .forminator-ui .forminator-error-message { color: #A3261A; font-size: 13px; display: block }
#enquire .forminator-ui .forminator-has_error input,
#enquire .forminator-ui .forminator-has_error select,
#enquire .forminator-ui .forminator-has_error textarea { border-color: #A3261A }
#enquire .forminator-ui .forminator-response-message:empty,
#enquire .forminator-ui .forminator-response-message:not(.forminator-show) { display: none }
#enquire .forminator-ui .forminator-response-message.forminator-error { background: #FBE9E6; border: 1.5px solid #A3261A; border-radius: 14px; padding: 14px 16px; color: #7A1C13; margin: 0 }
#enquire .forminator-ui .forminator-response-message p { margin: 0 }

/* button bar (.form-nav) */
#enquire .forminator-pagination-footer { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; border-top: 1px solid var(--husk); padding-top: 18px; margin: 0 }
#enquire .forminator-pagination-footer .nh-left { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-right: auto; order: -1 }
#enquire .forminator-pagination-footer .forminator-button-back { order: -2 }
#enquire .forminator-ui .forminator-button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 16px/1 var(--text); border: 1.5px solid var(--forest); background: var(--forest); color: var(--oat); cursor: pointer; transition: background .2s, color .2s }
#enquire .forminator-ui .forminator-button:hover { background: var(--forest-2) }
#enquire .forminator-ui .forminator-button-back { background: transparent; color: var(--forest) }
#enquire .forminator-ui .forminator-button-back:hover { background: var(--forest); color: var(--oat) }
#enquire .forminator-ui .forminator-button[disabled] { opacity: .6; cursor: wait }
#enquire .draft-note { font-size: 13px; color: var(--ink-3) }
#enquire .linkbtn { background: none; border: 0; padding: 0; color: var(--ink-2); font: 500 14px var(--text); text-decoration: underline; cursor: pointer; min-height: 36px }

/* success (.success) */
#enquire .forminator-ui .forminator-response-message.forminator-success { display: flex; flex-direction: column; gap: 16px; background: none; border: 0; padding: 0; margin: 0 }
#enquire .forminator-ui .forminator-response-message.forminator-success h3 { font-size: clamp(28px, 3vw, 36px) }
#enquire .forminator-ui.nh-done > :not(.forminator-response-message) { display: none !important }

#enquire .forminator-ui .forminator-screen-reader-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
@media (max-width: 560px) {
  #enquire .forminator-ui .forminator-col { flex-basis: 100% }
  #enquire .prod-row { grid-template-columns: 1fr }
  #enquire .review dl { grid-template-columns: 1fr; gap: 0 }
  #enquire .review dd { margin-bottom: 8px }
  #enquire .forminator-pagination-steps button { font-size: 12px }
}