:root {
      /* KGR palette: white ground, royal blue + gold type */
      --white: #FFFFFF;
      --tint: #F4F7FE;
      /* alternate section ground, a whisper of blue */
      --blue: #0038B8;
      /* brand blue, from the supplied swatch */
      --blue-deep: #0A2A7A;
      --navy: #0F1E4A;
      /* body text */
      --g1: #7A5410;
      /* deepest gold, for small gold text */
      --g2: #8C6428;
      /* gold for headings and marks */
      --g3: #B8862B;
      /* gold for rules and fills */
      --g4: #D9B45A;
      /* light gold, fills only, never text */
      --ivory: var(--navy);
      --muted: #4B5B84;
      --ember: #FF6B1F;
      --ink-on-gold: #0F1E4A;
      --line: rgba(140, 100, 40, .28);
      --grad: linear-gradient(100deg, #6E4B0E 0%, #9C6F1C 30%, #B07F22 50%, #9C6F1C 70%, #6E4B0E 100%);
      --grad-fill: linear-gradient(100deg, #B8862B 0%, #E2B04A 30%, #F3D98A 50%, #E2B04A 70%, #B8862B 100%);
      --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
      --text: 'Newsreader', Georgia, 'Times New Roman', serif;
      --pad: clamp(1.25rem, 5vw, 4.5rem);
      --nav: 72px;
      --lace: url("../img/pattern-lace.webp");
      color-scheme: light;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    html {
      scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%
    }

    *,
    *::before,
    *::after {
      box-sizing: inherit
    }

    body {
      margin: 0;
      background: var(--white);
      color: var(--navy);
      font-family: var(--text);
      font-size: 1.125rem;
      line-height: 1.65;
      font-optical-sizing: auto;
      overflow-x: clip;
      -webkit-font-smoothing: antialiased
    }

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

    a {
      color: inherit
    }

    p {
      margin: 0 0 1.1em
    }

    h1,
    h2,
    h3 {
      font-family: var(--display);
      font-weight: 800;
      font-stretch: 118%;
      line-height: 1.02;
      letter-spacing: -.015em;
      margin: 0
    }

    h2 {
      font-size: clamp(2rem, 4.4vw, 3.9rem);
      color: var(--blue)
    }

    h3 {
      color: var(--g2)
    }

    h3 {
      font-size: clamp(1.25rem, 2vw, 1.7rem);
      font-stretch: 112%
    }

    :focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 3px
    }

    .wrap {
      width: 100%;
      max-width: 1320px;
      margin-inline: auto;
      padding-inline: var(--pad)
    }

    .section {
      padding-block: clamp(4.5rem, 9vw, 8rem)
    }

    section[id] {
      scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 72px)
    }

    .sr {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap
    }

    /* ---------- buttons: elongated gem cut, taken from the logo's ribbon ---------- */
    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 1rem 2.3rem;
      font: 700 .95rem/1 var(--display);
      font-stretch: 108%;
      letter-spacing: .01em;
      color: var(--navy);
      text-decoration: none;
      background: var(--grad-fill);
      background-size: 220% 100%;
      background-position: 0 0;
      border: 0;
      cursor: pointer;
      clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
      transition: background-position .7s ease, transform .35s ease;
      isolation: isolate
    }

    .btn:hover {
      background-position: 100% 0;
      transform: translateY(-2px)
    }

    .btn:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 3px
    }

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

    .btn-ghost::before {
      content: "";
      position: absolute;
      inset: 1.5px;
      clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
      z-index: -1;
      transition: background .35s;
      background: #fff
    }

    .btn-ghost:hover::before {
      background: #EEF3FF
    }

    .btn-sm {
      padding: .75rem 1.7rem;
      font-size: .85rem
    }

    /* ---------- nav ---------- */
    .progress {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      z-index: 80;
      pointer-events: none
    }

    .progress i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--blue), var(--g3));
      transform: scaleX(0);
      transform-origin: left
    }

    .nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 70;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      padding: calc(env(safe-area-inset-top, 0px) + .75rem) var(--pad) .75rem;
      border-bottom: 1px solid transparent;
      transition: background .4s, border-color .4s, backdrop-filter .4s
    }

    .nav.solid {
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 1px 0 rgba(0, 56, 184, .08);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
      backdrop-filter: blur(14px) saturate(1.3);
      border-color: var(--line)
    }

    .brand {
      display: flex;
      align-items: center;
      gap: .8rem;
      text-decoration: none
    }

    .brand img {
      width: 46px;
      height: 46px
    }

    .brand b {
      display: block;
      font: 800 1.35rem/1 var(--display);
      font-stretch: 120%;
      letter-spacing: .02em;
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .brand small {
      display: block;
      font: italic 400 .8rem/1.2 var(--text);
      color: var(--blue)
    }

    .links {
      display: flex;
      align-items: center;
      gap: clamp(1.2rem, 2.4vw, 2.4rem)
    }

    .links a {
      position: relative;
      font: 600 .9rem/1 var(--display);
      font-stretch: 100%;
      text-decoration: none;
      color: var(--blue);
      padding: .4rem 0;
      transition: color .3s, opacity .3s
    }

    .links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 1px;
      background: var(--g2);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s
    }

    .links a:hover,
    .links a[aria-current] {
      color: var(--g2)
    }

    .links a[aria-current]::after {
      transform: scaleX(1)
    }

    .links a:hover::after {
      transform: scaleX(1)
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 1rem
    }

    .burger {
      display: none;
      width: 44px;
      height: 44px;
      background: none;
      border: 1px solid var(--line);
      color: var(--blue);
      cursor: pointer;
      position: relative
    }

    .burger i {
      position: absolute;
      left: 12px;
      right: 12px;
      height: 1.5px;
      background: currentColor;
      transition: transform .35s, opacity .35s
    }

    .burger i:nth-child(1) {
      top: 16px
    }

    .burger i:nth-child(2) {
      top: 21px
    }

    .burger i:nth-child(3) {
      top: 26px
    }

    .menu-open .burger i:nth-child(1) {
      transform: translateY(5px) rotate(45deg)
    }

    .menu-open .burger i:nth-child(2) {
      opacity: 0
    }

    .menu-open .burger i:nth-child(3) {
      transform: translateY(-5px) rotate(-45deg)
    }

    .menu {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1.1rem;
      padding: calc(env(safe-area-inset-top, 0px) + 6rem) var(--pad) 3rem;
      opacity: 0;
      visibility: hidden;
      transition: opacity .4s, visibility .4s;
      background: var(--lace) center top/120% auto no-repeat, #fff
    }

    .menu a {
      font: 800 clamp(1.8rem, 8vw, 2.6rem)/1.1 var(--display);
      font-stretch: 118%;
      color: var(--blue);
      text-decoration: none
    }

    .menu-open .menu {
      opacity: 1;
      visibility: visible
    }

    .menu-open {
      overflow: hidden
    }

    .menu-open .nav {
      background: #fff;
      border-color: transparent
    }

    /* ---------- hero ---------- */
    .hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding: calc(var(--nav) + 1.5rem) 0 5.5rem;
      overflow: hidden;
      isolation: isolate;
      background: radial-gradient(55% 60% at 74% 48%, rgba(226, 176, 74, .22), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(0, 56, 184, .06), transparent 70%), #fff
    }

    .dust {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -1
    }

    .lace {
      position: absolute;
      left: 50%;
      width: min(1500px, 135vw);
      aspect-ratio: 1100/416;
      background: var(--lace) center/contain no-repeat;
      translate: -50% 0;
      pointer-events: none;
      z-index: -1
    }

    .lace-top {
      top: 0;
      opacity: .2;
      -webkit-mask-image: linear-gradient(#000 20%, transparent 80%);
      mask-image: linear-gradient(#000 20%, transparent 80%)
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
      align-items: center;
      gap: clamp(1.5rem, 4vw, 4rem)
    }

    .lead {
      font: italic 400 clamp(1.15rem, 1.9vw, 1.6rem)/1.3 var(--text);
      color: var(--blue);
      margin: 0 0 1.1rem
    }

    h1 {
      font-size: clamp(2.25rem, 4.75vw, 5.6rem);
      font-stretch: 112%;
      line-height: .98;
      letter-spacing: -.03em
    }

    .ln {
      display: block;
      overflow: hidden;
      padding-bottom: .08em
    }

    .ln>span {
      display: inline-block;
      background: var(--grad);
      background-size: 260% 100%;
      background-position: 50% 0;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .sub {
      max-width: 31em;
      margin: 1.8rem 0 2.2rem;
      color: var(--navy);
      font-size: clamp(1.05rem, 1.4vw, 1.25rem)
    }

    .cta {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem
    }

    .js .ln>span {
      transform: translateY(112%);
      background-position: 100% 0
    }

    .js.ready .ln>span {
      animation: rise 1.25s cubic-bezier(.2, .8, .2, 1) forwards, shine 3.4s ease-out forwards;
      animation-delay: calc(.2s + var(--i)*.16s), calc(.5s + var(--i)*.16s)
    }

    @keyframes rise {
      to {
        transform: none
      }
    }

    @keyframes shine {
      to {
        background-position: 50% 0
      }
    }

    .js .fade {
      opacity: 0
    }

    .js.ready .fade {
      animation: fadeUp 1.1s cubic-bezier(.2, .8, .2, 1) forwards;
      animation-delay: var(--d, 0s)
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .js .lace-top {
      opacity: 0
    }

    .js.ready .lace-top {
      animation: laceIn 2.4s ease .1s forwards
    }

    @keyframes laceIn {
      from {
        opacity: 0;
        translate: -50% -30px
      }

      to {
        opacity: .2;
        translate: -50% 0
      }
    }

    .seal {
      position: relative;
      width: min(100%, 520px);
      aspect-ratio: 1;
      margin-inline: auto
    }

    .js .seal {
      opacity: 0;
      transform: scale(.86) rotate(-8deg)
    }

    .js.ready .seal {
      animation: sealIn 1.9s cubic-bezier(.2, .8, .2, 1) .45s forwards
    }

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

    .seal-tilt {
      position: absolute;
      inset: 0;
      transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
      transform-style: preserve-3d;
      will-change: transform
    }

    .seal-glow {
      position: absolute;
      inset: 6%;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(226, 176, 74, .38), transparent 72%);
      filter: blur(34px);
      animation: breathe 6s ease-in-out infinite
    }

    @keyframes breathe {

      0%,
      100% {
        opacity: .55;
        scale: .94
      }

      50% {
        opacity: 1;
        scale: 1.04
      }
    }

    .ring-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      animation: spin 90s linear infinite
    }

    .ring-svg text {
      font: 600 13.5px var(--display);
      fill: var(--blue)
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .seal-logo {
      position: absolute;
      inset: 12%;
      isolation: isolate;
      border-radius: 50%
    }

    .seal-logo img {
      width: 100%;
      height: 100%
    }

    .sheen {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 208, .95) 50%, transparent 62%);
      background-size: 280% 100%;
      background-position: 150% 0;
      mix-blend-mode: overlay;
      animation: sheen 7s ease-in-out 2.4s infinite;
      pointer-events: none
    }

    @keyframes sheen {
      0% {
        background-position: 150% 0
      }

      45%,
      100% {
        background-position: -60% 0
      }
    }

    .spark {
      position: absolute;
      width: 13%;
      aspect-ratio: 1;
      translate: -50% -50%;
      pointer-events: none;
      opacity: 0;
      animation: twinkle 4.8s ease-in-out infinite;
      background: radial-gradient(circle, #fff 0 5%, rgba(255, 236, 170, .65) 12%, transparent 42%)
    }

    .spark::before,
    .spark::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%
    }

    .spark::before {
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #fff, transparent)
    }

    .spark::after {
      width: 2px;
      height: 100%;
      background: linear-gradient(180deg, transparent, #fff, transparent)
    }

    .s1 {
      left: 26.5%;
      top: 62.8%
    }

    .s2 {
      left: 67.2%;
      top: 62.8%;
      animation-delay: 2.4s
    }

    @keyframes twinkle {

      0%,
      100% {
        opacity: 0;
        scale: .3;
        rotate: 0deg
      }

      42% {
        opacity: 1;
        scale: 1;
        rotate: 20deg
      }

      62% {
        opacity: .5;
        scale: .75;
        rotate: 35deg
      }
    }

    .scroll-cue {
      position: absolute;
      left: 50%;
      bottom: 1.6rem;
      translate: -50% 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      font: 600 .78rem/1 var(--display);
      font-stretch: 100%;
      color: var(--blue);
      text-decoration: none
    }

    .scroll-cue i {
      display: block;
      width: 1px;
      height: 46px;
      background: linear-gradient(var(--g2), transparent);
      transform-origin: top;
      animation: cue 2.4s ease-in-out infinite
    }

    @keyframes cue {
      0% {
        transform: scaleY(0)
      }

      50% {
        transform: scaleY(1)
      }

      100% {
        transform: scaleY(1);
        opacity: 0
      }
    }

    /* ---------- inputs marquee ---------- */
    .inputs {
      padding: clamp(3rem, 6vw, 5rem) 0 0;
      background: #fff
    }

    .inputs-lead {
      max-width: 34em;
      margin: 0 0 2rem;
      color: var(--blue);
      font-style: italic;
      font-size: 1.2rem
    }

    .marquee {
      overflow: hidden;
      border-block: 1px solid var(--line);
      padding-block: 1.4rem;
      background: var(--tint)
    }

    .mq-track {
      display: flex;
      width: max-content;
      animation: mq 46s linear infinite
    }

    .marquee:hover .mq-track {
      animation-play-state: paused
    }

    .mq {
      display: flex;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      flex: none
    }

    .mq li {
      display: flex;
      align-items: center;
      font: 800 clamp(1.8rem, 4.2vw, 3.5rem)/1 var(--display);
      font-stretch: 120%;
      color: var(--blue);
      white-space: nowrap;
      transition: color .35s;
      cursor: default
    }

    .mq li:hover {
      color: var(--g2)
    }

    .mq li:nth-child(even) {
      color: var(--g2)
    }

    .mq li::after {
      content: "";
      width: .75rem;
      height: .75rem;
      margin-inline: clamp(1.6rem, 3vw, 2.8rem);
      background: var(--g3);
      rotate: 45deg;
      flex: none
    }

    @keyframes mq {
      to {
        transform: translateX(-50%)
      }
    }

    /* ---------- legacy ---------- */
    .legacy {
      background: #fff
    }

    .legacy-top {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: center
    }

    .statement {
      font: 400 clamp(1.55rem, 2.75vw, 2.55rem)/1.28 var(--text);
      color: var(--blue-deep);
      margin: 0;
      max-width: 21em;
      letter-spacing: -.005em
    }

    .statement .w {
      opacity: .35
    }

    .globe {
      animation: float 9s ease-in-out infinite
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-14px)
      }
    }

    .plan {
      margin-top: clamp(4rem, 8vw, 7rem)
    }

    .plan-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 2.4rem;
      border-top: 1px solid var(--line)
    }

    .plan-grid article {
      padding: 2rem 2rem 1.4rem 0;
      border-right: 1px solid var(--line);
      padding-left: 2rem
    }

    .plan-grid article:first-child {
      padding-left: 0
    }

    .plan-grid article:last-child {
      border-right: 0
    }

    .plan-grid b {
      display: block;
      font: 800 clamp(3rem, 7vw, 6.2rem)/.95 var(--display);
      font-stretch: 125%;
      letter-spacing: -.03em;
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 1rem
    }

    .plan-grid p {
      color: var(--navy);
      max-width: 16em
    }

    .plan-note {
      max-width: 44em;
      margin: 2rem 0 0;
      color: var(--blue);
      font-style: italic
    }

    .yore {
      margin-top: clamp(4rem, 8vw, 7rem)
    }

    .yore-img {
      position: relative;
      overflow: hidden;
      height: clamp(240px, 40vw, 540px)
    }

    .yore-img .wipe {
      position: absolute;
      inset: 0
    }

    .yore-img img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .yore-img::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 45%;
      background: linear-gradient(transparent, #fff)
    }

    .js .wipe {
      clip-path: inset(0 0 100% 0);
      transition: clip-path 1.6s cubic-bezier(.7, 0, .15, 1)
    }

    .js .in .wipe {
      clip-path: inset(0)
    }

    .yore-copy {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: clamp(1.5rem, 5vw, 5rem);
      margin-top: 2.5rem;
      position: relative;
      z-index: 2
    }

    .yore-copy p {
      max-width: 36em
    }

    .tl {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      list-style: none;
      margin: 3.5rem 0 0;
      padding: 2.6rem 0 0
    }

    .tl::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: .45rem;
      height: 1px;
      background: linear-gradient(90deg, var(--g3), var(--blue));
      transform-origin: left
    }

    .js .tl::before {
      transform: scaleX(0);
      transition: transform 1.8s cubic-bezier(.6, 0, .2, 1)
    }

    .js .tl.in::before {
      transform: scaleX(1)
    }

    .tl li {
      position: relative
    }

    .tl li::before {
      content: "";
      position: absolute;
      top: -2.6rem;
      left: 0;
      width: .95rem;
      height: .95rem;
      background: var(--g3);
      rotate: 45deg
    }

    .js .tl li::before {
      scale: 0;
      transition: scale .6s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s)
    }

    .js .tl.in li::before {
      scale: 1
    }

    .tl b {
      display: block;
      font: 800 clamp(1.5rem, 2.6vw, 2.3rem)/1 var(--display);
      font-stretch: 115%;
      color: var(--blue);
      margin-bottom: .5rem
    }

    .tl span {
      display: block;
      color: var(--muted);
      max-width: 19em;
      font-size: 1.02rem;
      line-height: 1.5
    }

    /* ---------- services ---------- */
    .services {
      background: var(--tint)
    }

    .svc-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(2rem, 6vw, 6rem);
      align-items: center
    }

    .svc-list h2 {
      margin-bottom: 2rem
    }

    .svc-item {
      border-top: 1px solid var(--line)
    }

    .svc-item:last-child {
      border-bottom: 1px solid var(--line)
    }

    .svc-btn {
      width: 100%;
      display: flex;
      align-items: baseline;
      gap: clamp(0.6rem, 1.2vw, 1rem);
      padding: clamp(0.9rem, 1.6vw, 1.25rem) 0;
      background: none;
      border: 0;
      cursor: pointer;
      color: var(--blue);
      text-align: left;
      font: 800 clamp(1.05rem, 1.85vw, 1.85rem)/1.2 var(--display);
      font-stretch: 105%;
      letter-spacing: -0.015em;
      word-break: normal;
      overflow-wrap: break-word;
      transition: color .4s, padding .5s
    }

    .svc-btn i {
      font: 500 1rem/1 var(--display);
      font-style: normal;
      color: var(--g2);
      width: 2rem;
      flex: none
    }

    .svc-btn:hover {
      color: var(--g2)
    }

    .svc-item.on .svc-btn {
      color: var(--g2);
      padding-left: .6rem
    }

    .svc-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .55s cubic-bezier(.3, .8, .3, 1)
    }

    .svc-item.on .svc-body {
      grid-template-rows: 1fr
    }

    .svc-body>div {
      overflow: hidden
    }

    .svc-body p {
      margin: 0 0 1.5rem 3.2rem;
      max-width: 30em;
      color: var(--navy)
    }

    .svc-stage {
      position: relative;
      width: min(100%, 560px);
      aspect-ratio: 1;
      margin-inline: auto;
      overflow: hidden
    }

    .svc-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(#8C6428, #FBE7A1, #C08A2B, #8C6428, #E2B04A, #8C6428);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
      mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
      animation: spin 22s linear infinite
    }

    .svc-disc {
      position: absolute;
      inset: 22px;
      border-radius: 50%;
      overflow: hidden;
      background: radial-gradient(circle at 50% 38%, #4a3513, #0d0a05 72%)
    }

    .svc-img {
      position: absolute;
      inset: 0;
      clip-path: circle(0% at 50% 50%);
      transition: clip-path 1s cubic-bezier(.7, 0, .2, 1)
    }

    .svc-img.on {
      clip-path: circle(75% at 50% 50%)
    }

    .svc-img img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .svc-img.cut {
      background: radial-gradient(circle at 50% 45%, #D9AE58, #B98630 70%)
    }

    .svc-img.cut img {
      object-fit: contain;
      padding: 10%
    }

    .svc-img.cut.dark {
      background: radial-gradient(circle at 50% 40%, #5a4014, #120d05 75%)
    }

    /* ---------- process (pinned, scroll-driven) ---------- */
    .proc {
      position: relative;
      height: 430vh;
      background: #fff
    }

    .proc-stage {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      overflow: hidden;
      display: flex;
      align-items: center;
      isolation: isolate
    }

    .embers {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -1
    }

    .proc-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(1.5rem, 5vw, 5rem);
      align-items: center;
      padding-top: calc(var(--nav) - 12px)
    }

    .proc-text h2 {
      margin-bottom: 1.6rem
    }

    .steps {
      display: flex;
      gap: .4rem 1.4rem;
      flex-wrap: wrap;
      list-style: none;
      margin: 0 0 1.6rem;
      padding: 0
    }

    .steps li {
      display: flex;
      align-items: center;
      gap: .55rem;
      font: 600 .9rem/1 var(--display);
      font-stretch: 100%;
      color: #8A94AD;
      transition: color .5s
    }

    .steps li i {
      display: grid;
      place-items: center;
      width: 1.55rem;
      height: 1.55rem;
      border: 1px solid currentColor;
      rotate: 45deg;
      font-style: normal;
      transition: background .5s, border-color .5s
    }

    .steps li i em {
      rotate: -45deg;
      font-style: normal;
      font-size: .72rem
    }

    .steps li.done {
      color: var(--g2)
    }

    .steps li.on {
      color: var(--blue)
    }

    .steps li.on i,
    .steps li.done i {
      background: currentColor
    }

    .steps li.on i em,
    .steps li.done i em {
      color: #fff
    }

    .panels {
      position: relative;
      min-height: 12.5rem
    }

    .panel {
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .6s, transform .6s;
      pointer-events: none
    }

    .panel.on {
      opacity: 1;
      transform: none;
      pointer-events: auto
    }

    .panel h3 {
      color: var(--g2);
      margin-bottom: .8rem
    }

    .panel p {
      max-width: 29em;
      color: var(--navy);
      margin: 0
    }

    .meter {
      margin-top: 1.4rem
    }

    .meter .track {
      height: 3px;
      background: rgba(0, 56, 184, .12);
      overflow: hidden
    }

    .meter .track i {
      display: block;
      height: 100%;
      width: 100%;
      transform: scaleX(0);
      transform-origin: left;
      background: linear-gradient(90deg, var(--ember), var(--g3), var(--blue))
    }

    .meter p {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin: .7rem 0 0;
      font: 600 .85rem/1 var(--display);
      font-stretch: 100%;
      color: var(--muted)
    }

    .meter b {
      font: 800 1.5rem/1 var(--display);
      font-stretch: 118%;
      color: var(--blue);
      transition: opacity .3s
    }

    .proc-frame {
      position: relative
    }

    .proc-frame::before {
      content: "";
      position: absolute;
      inset: 16px -16px -16px 16px;
      border: 1px solid var(--line)
    }

    .pf-glow {
      position: absolute;
      inset: -14%;
      background: radial-gradient(closest-side, var(--glow, rgba(255, 107, 31, .4)), transparent 70%);
      filter: blur(30px);
      opacity: .55
    }

    .frame-box {
      position: relative;
      height: min(70vh, 640px);
      height: min(70svh, 640px);
      aspect-ratio: 4/5;
      margin-inline: auto;
      overflow: hidden;
      border: 1px solid var(--g3);
      background: #000
    }

    .layer {
      position: absolute;
      inset: 0;
      overflow: hidden
    }

    .layer img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform-origin: 50% 60%
    }

    .front {
      position: absolute;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--g1), transparent);
      box-shadow: 0 0 22px 6px rgba(255, 140, 50, .7);
      opacity: 0;
      z-index: 3;
      pointer-events: none
    }

    /* ---------- reasons ---------- */
    .why {
      background: var(--tint)
    }

    .why-grid {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: clamp(2rem, 6vw, 6rem);
      align-items: start
    }

    .why-head {
      position: sticky;
      top: 120px
    }

    .crown {
      width: min(300px, 70%);
      margin-bottom: 1.6rem;
      animation: float 7s ease-in-out infinite;
      filter: drop-shadow(0 12px 30px rgba(226, 176, 74, .25))
    }

    .val {
      border-top: 1px solid var(--line)
    }

    .val:last-child {
      border-bottom: 1px solid var(--line)
    }

    .val button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.45rem 0;
      background: none;
      border: 0;
      cursor: pointer;
      color: var(--blue);
      text-align: left;
      font: 800 clamp(1.3rem, 2.5vw, 2.05rem)/1.1 var(--display);
      font-stretch: 114%;
      transition: color .4s
    }

    .val button:hover {
      color: var(--g2)
    }

    .val button i {
      flex: none;
      width: .95rem;
      height: .95rem;
      border: 1.5px solid var(--g2);
      rotate: 45deg;
      transition: background .4s, scale .4s
    }

    .val.on button {
      color: var(--g2)
    }

    .val.on button i {
      background: var(--g2);
      scale: 1.15
    }

    .val-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .55s cubic-bezier(.3, .8, .3, 1)
    }

    .val.on .val-body {
      grid-template-rows: 1fr
    }

    .val-body>div {
      overflow: hidden
    }

    .val-body p {
      margin: 0 0 1.6rem;
      max-width: 34em;
      color: var(--navy)
    }

    /* ---------- facilities ---------- */
    .fac {
      background: #fff;
      position: relative;
      overflow: hidden
    }

    .fac-grid {
      display: grid;
      grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
      gap: clamp(2rem, 6vw, 6rem);
      align-items: center
    }

    .fac-img {
      position: relative;
      display: grid;
      place-items: center
    }

    .fac-img::before {
      content: "";
      position: absolute;
      width: 90%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(226, 176, 74, .32), transparent 72%);
      filter: blur(18px)
    }

    .fac-img img {
      position: relative;
      max-height: 560px;
      width: auto;
      animation: float 8s ease-in-out infinite
    }

    .fac h2 {
      margin-bottom: 1.6rem
    }

    .fac p {
      max-width: 34em;
      color: var(--navy)
    }

    .site {
      display: inline-block;
      margin-top: 1rem;
      padding: 1.1rem 1.6rem 1.1rem 1.4rem;
      border-left: 3px solid var(--g3);
      background: linear-gradient(90deg, rgba(226, 176, 74, .14), transparent)
    }

    .site b {
      display: block;
      font: 800 1.15rem/1.2 var(--display);
      font-stretch: 112%;
      color: var(--blue)
    }

    .site span {
      color: var(--g1)
    }

    /* ---------- gold panel ---------- */
    .gold {
      position: relative;
      color: var(--navy);
      background: #fff;
      border-block: 3px solid var(--g3);
      overflow: hidden
    }

    .gold .lace-dark {
      position: absolute;
      left: 50%;
      width: min(1500px, 135vw);
      aspect-ratio: 1100/416;
      translate: -50% 0;
      background: var(--lace) center/contain no-repeat;
      opacity: .12;
      pointer-events: none
    }

    .gold .ld-top {
      top: 0
    }

    .gold .ld-bot {
      bottom: 0;
      scale: 1 -1
    }

    .gold h2 {
      color: var(--blue)
    }

    .gold p {
      color: var(--navy)
    }

    .gp-row {
      position: relative;
      display: grid;
      gap: clamp(2rem, 6vw, 6rem);
      align-items: center
    }

    .gp-support {
      grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr)
    }

    .gp-support img {
      width: min(100%, 460px);
      margin-inline: auto;
      filter: drop-shadow(0 22px 26px rgba(15, 30, 74, .22))
    }

    .gp-support h2 {
      margin-bottom: 1.4rem
    }

    .gp-support p {
      max-width: 33em
    }

    .gp-md {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
      margin-top: clamp(4rem, 8vw, 7rem);
      padding-top: clamp(3rem, 6vw, 5rem);
      border-top: 1px solid var(--line)
    }

    .gp-md h3 {
      font-size: clamp(1.6rem, 3vw, 2.6rem);
      margin-bottom: 1.3rem;
      color: var(--g2)
    }

    .gp-md p {
      max-width: 34em
    }

    .psalm {
      margin: 0;
      text-align: left
    }

    .psalm .qm {
      display: block;
      font: 800 8rem/.6 var(--display);
      height: 3.6rem;
      color: var(--g3)
    }

    .psalm q {
      display: block;
      quotes: none;
      font: italic 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.3 var(--text);
      color: var(--blue-deep)
    }

    .psalm figcaption {
      margin-top: 1.2rem;
      font: 700 .95rem/1 var(--display);
      font-stretch: 110%;
      color: var(--g2)
    }

    /* ---------- market ---------- */
    .market {
      background: var(--tint)
    }

    .market h2 {
      margin-bottom: clamp(2rem, 4vw, 3.5rem)
    }

    .mk-cols {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(2rem, 6vw, 6rem)
    }

    .mk-col {
      position: relative
    }

    .mk-col h3 {
      color: var(--g2);
      margin-bottom: 1rem
    }

    .mk-col p {
      color: var(--navy);
      max-width: 33em
    }

    .mk-col img {
      width: min(340px, 80%);
      margin: 1.2rem 0 0;
      animation: float 8s ease-in-out infinite
    }

    .mk-col:nth-child(2) img {
      animation-delay: -3s
    }

    .charts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(2rem, 6vw, 6rem);
      margin-top: clamp(4rem, 8vw, 7rem);
      padding-top: clamp(2.5rem, 5vw, 4rem);
      border-top: 1px solid var(--line)
    }

    .chart h3 {
      margin-bottom: .4rem;
      font-size: clamp(1.15rem, 1.8vw, 1.5rem)
    }

    .chart>p {
      color: var(--navy);
      margin-bottom: 1.6rem;
      font-size: 1rem
    }

    .vbars {
      display: flex;
      align-items: flex-end;
      gap: clamp(.8rem, 2vw, 1.6rem);
      height: 300px;
      padding-top: 2.2rem;
      border-bottom: 1px solid var(--line)
    }

    .vbar {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: flex-end
    }

    .col {
      position: relative;
      width: 100%;
      height: calc(var(--v)*1%);
      background: linear-gradient(180deg, #F3D98A, var(--g3) 55%, var(--g2));
      transform-origin: bottom
    }

    .col b {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + .4rem);
      text-align: center;
      font: 800 1.05rem/1 var(--display);
      font-stretch: 110%;
      color: var(--blue)
    }

    .js .col {
      transform: scaleY(0);
      transition: transform 1.5s cubic-bezier(.2, .8, .2, 1) var(--d, 0s)
    }

    .js .in .col {
      transform: scaleY(1)
    }

    .js .col b {
      opacity: 0;
      transition: opacity .6s calc(var(--d, 0s) + 1s)
    }

    .js .in .col b {
      opacity: 1
    }

    .vlabels {
      display: flex;
      gap: clamp(.8rem, 2vw, 1.6rem);
      margin-top: .7rem
    }

    .vlabels span {
      flex: 1;
      text-align: center;
      font: 600 .9rem/1.2 var(--display);
      font-stretch: 100%;
      color: var(--g1)
    }

    .hbars {
      display: grid;
      gap: 1.15rem
    }

    .hbar {
      display: grid;
      grid-template-columns: 8.5rem minmax(0, 1fr) 4.6rem;
      align-items: center;
      gap: 1rem;
      font: 600 .95rem/1.2 var(--display);
      font-stretch: 100%
    }

    .hbar .t {
      height: 14px;
      background: rgba(0, 56, 184, .08);
      overflow: hidden
    }

    .hbar .t i {
      display: block;
      height: 100%;
      width: calc(var(--v)*1%);
      background: linear-gradient(90deg, #F3D98A, var(--g3), var(--g2));
      transform-origin: left
    }

    .js .hbar .t i {
      transform: scaleX(0);
      transition: transform 1.5s cubic-bezier(.2, .8, .2, 1) var(--d, 0s)
    }

    .js .in .hbar .t i {
      transform: scaleX(1)
    }

    .hbar b {
      text-align: right;
      color: var(--blue);
      font-weight: 800
    }

    .src {
      margin: 1.6rem 0 0;
      font-size: .9rem;
      color: var(--muted);
      font-style: italic
    }

    .note-callout {
      margin-top: 1.4rem;
      padding-left: 1.1rem;
      border-left: 3px solid var(--g3);
      color: var(--blue-deep);
      font-size: 1.05rem;
      max-width: 30em
    }

    /* ---------- scheme teaser ---------- */
    .teaser {
      background: var(--blue);
      color: #fff;
      padding-block: clamp(2.6rem, 5vw, 4rem);
      position: relative;
      overflow: hidden
    }

    .teaser::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--lace) center/min(1500px, 135vw) auto no-repeat;
      opacity: .18;
      pointer-events: none
    }

    .teaser-in {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1.6rem 3rem
    }

    .teaser-kicker {
      margin: 0 0 .5rem;
      font: italic 400 1.15rem/1.2 var(--text);
      color: #F3D98A
    }

    .teaser h2 {
      color: #fff;
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      max-width: 22em;
      line-height: 1.1
    }

    /* ---------- contact ---------- */
    .contact {
      background: #fff;
      position: relative
    }

    .ct-grid {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: clamp(2rem, 7vw, 7rem);
      align-items: start
    }

    .ct-info h2 {
      margin-bottom: 1.4rem
    }

    .ct-info p {
      max-width: 26em;
      color: var(--navy)
    }

    .addr {
      margin: 2rem 0;
      padding: 1.4rem 1.6rem;
      border-left: 3px solid var(--g3);
      color: var(--navy);
      background: linear-gradient(90deg, rgba(226, 176, 74, .12), transparent);
      font-style: normal
    }

    .addr b {
      display: block;
      font: 800 1.1rem/1.2 var(--display);
      font-stretch: 112%;
      color: var(--blue);
      margin-bottom: .4rem
    }

    .addr a {
      display: inline-block;
      margin-top: .8rem;
      font: 700 .9rem/1 var(--display);
      color: var(--blue);
      text-underline-offset: 4px
    }

    form {
      display: grid;
      gap: 1.6rem
    }

    .f-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.6rem
    }

    .field {
      display: grid;
      gap: .4rem
    }

    .field label {
      font: 600 .88rem/1 var(--display);
      font-stretch: 100%;
      color: var(--g1)
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      background: transparent;
      border: 0;
      border-bottom: 1px solid rgba(0, 56, 184, .35);
      color: var(--navy);
      font: 400 1.1rem/1.4 var(--text);
      padding: .7rem 0;
      border-radius: 0;
      transition: border-color .3s, box-shadow .3s
    }

    .field select {
      appearance: none;
      -webkit-appearance: none;
      background: linear-gradient(45deg, transparent 50%, var(--g2) 50%) calc(100% - 12px) 55%/6px 6px no-repeat, linear-gradient(135deg, var(--g2) 50%, transparent 50%) calc(100% - 6px) 55%/6px 6px no-repeat
    }

    .field select option {
      background: #fff;
      color: var(--navy)
    }

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

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--blue);
      box-shadow: 0 1px 0 var(--blue)
    }

    .form-foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.2rem
    }

    .status {
      margin: 0;
      min-height: 1.6em;
      color: var(--blue);
      font-size: 1rem
    }

    /* ---------- footer ---------- */
    footer {
      position: relative;
      background: var(--tint);
      border-top: 3px solid var(--g3);
      padding: clamp(3rem, 6vw, 5rem) 0 2.4rem;
      overflow: hidden
    }

    footer .lace-bot {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: min(1500px, 135vw);
      aspect-ratio: 1100/416;
      translate: -50% 0;
      scale: 1 -1;
      background: var(--lace) center/contain no-repeat;
      opacity: .16;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(#000 40%, transparent);
      mask-image: linear-gradient(#000 40%, transparent)
    }

    .ft {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 2rem
    }

    .ft nav {
      display: flex;
      flex-wrap: wrap;
      gap: 1.4rem
    }

    .ft nav a {
      font: 600 .9rem/1 var(--display);
      font-stretch: 100%;
      color: var(--blue);
      text-decoration: none
    }

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

    .copy {
      position: relative;
      margin: 3rem 0 0;
      font-size: .9rem;
      color: var(--muted)
    }

    /* ---------- responsive ---------- */
    @media (max-width:1000px) {
      .links {
        display: none
      }

      .burger {
        display: block
      }

      .nav-cta .btn {
        display: none
      }

      .seal {
        width: min(78vw, 420px);
        order: -1;
        margin-top: .5rem
      }

      .hero {
        align-items: flex-start;
        padding-bottom: 6rem
      }

      .legacy-top,
      .svc-grid,
      .why-grid,
      .fac-grid,
      .gp-support,
      .gp-md,
      .mk-cols,
      .charts,
      .ct-grid,
      .yore-copy,
      .hero-grid {
        grid-template-columns: minmax(0, 1fr)
      }

      .globe {
        width: min(100%, 420px);
        margin-inline: auto
      }

      .why-head {
        position: static
      }

      .yore-copy {
        margin-top: 1.5rem
      }

      .svc-stage {
        order: -1;
        width: min(100%, 440px)
      }

      .fac-img img {
        max-height: 380px
      }

      .gp-support img {
        max-width: 340px
      }
    }

    @media (max-width:720px) {
      body {
        font-size: 1.06rem
      }

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

      .plan-grid article {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 1.6rem 0
      }

      .plan-grid article:last-child {
        border-bottom: 0
      }

      .tl {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 0 0 2.2rem;
        gap: 1.8rem
      }

      .tl::before {
        left: .45rem;
        right: auto;
        top: .4rem;
        bottom: .4rem;
        width: 1px;
        height: auto;
        background: linear-gradient(var(--g2), var(--g4))
      }

      .js .tl::before {
        transform: scaleY(0);
        transform-origin: top
      }

      .js .tl.in::before {
        transform: scaleY(1)
      }

      .tl li::before {
        top: .15rem;
        left: -2.2rem
      }

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

      .hbar {
        grid-template-columns: 6.4rem minmax(0, 1fr) 3.9rem;
        gap: .6rem;
        font-size: .85rem
      }

      .vbars {
        height: 240px
      }

      .proc {
        height: 480vh
      }

      .proc-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        align-content: center;
        padding-top: calc(var(--nav) - 6px)
      }

      .proc-frame {
        order: -1
      }

      .proc-frame::before {
        display: none
      }

      .frame-box {
        height: 30svh;
        height: 30vh;
        aspect-ratio: auto;
        width: 100%
      }

      .proc-text h2 {
        font-size: 1.65rem;
        margin-bottom: .9rem
      }

      .steps {
        margin-bottom: .9rem;
        gap: .3rem .9rem
      }

      .steps li {
        font-size: .78rem
      }

      .steps li span {
        display: none
      }

      .steps li.on span {
        display: inline
      }

      .panels {
        min-height: 9.6rem
      }

      .panel h3 {
        font-size: 1.15rem;
        margin-bottom: .5rem
      }

      .panel p {
        font-size: .98rem;
        line-height: 1.5
      }

      .meter {
        margin-top: .6rem
      }

      .scroll-cue {
        display: none
      }

      .gold .lace-dark {
        opacity: .15
      }
    }

    @media (max-height:640px) and (min-width:721px) {
      .proc-text h2 {
        font-size: 2rem;
        margin-bottom: 1rem
      }

      .panels {
        min-height: 10rem
      }
    }

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

      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important
      }

      .mq-track {
        animation: none !important
      }

      .js .ln>span {
        transform: none
      }

      .js .fade,
      .js .seal {
        opacity: 1;
        transform: none
      }

      .js .lace-top {
        opacity: .2
      }
    }