

:root {
  --e1: 0 1px 2px rgba(7,43,37,.08), 0 4px 10px rgba(7,43,37,.07), 0 12px 24px rgba(7,43,37,.06);
  --e2: 0 2px 4px rgba(7,43,37,.09), 0 10px 20px rgba(7,43,37,.10), 0 24px 46px rgba(7,43,37,.10);
  --e3: 0 3px 6px rgba(7,43,37,.10), 0 16px 32px rgba(7,43,37,.14), 0 36px 68px rgba(7,43,37,.14);
  --e4: 0 6px 12px rgba(7,43,37,.12), 0 24px 48px rgba(7,43,37,.16), 0 48px 90px rgba(7,43,37,.16);

  --d2: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(232,207,156,.20), 0 6px 14px rgba(0,0,0,.30), 0 22px 48px rgba(0,0,0,.42);
  --d3: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(232,207,156,.26), 0 8px 18px rgba(0,0,0,.34), 0 34px 80px rgba(0,0,0,.52);

  --t-raise-light: 0 .02em 0 #D3E3DB, 0 .04em 0 #BFD5CA, 0 .06em 0 #A9C5B7, 0 .08em .06em rgba(7,43,37,.20), 0 .3em .6em rgba(7,43,37,.16);
  --t-raise-dark: 0 .02em 0 rgba(0,0,0,.35), 0 .04em 0 rgba(0,0,0,.28), 0 .06em .02em rgba(0,0,0,.28), 0 .3em .7em rgba(0,0,0,.5);

  --grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .03 0 0 0 0 .17 0 0 0 0 .15 0 0 0 .6 0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='.07'/></svg>");
  --grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .9 0 0 0 .6 0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='.08'/></svg>");
}

:is(.v-sec, .chapter):not(.v-dark):not(.dark):not(.night) :is(h2, .big-num) { text-shadow: var(--t-raise-light); }
:is(.v-dark, .chapter.dark, .chapter.night, .curtain-wrap, .fly-video) :is(h2, .big-num) { text-shadow: var(--t-raise-dark); }
:is(.v-dark, .chapter.dark, .chapter.night) h2 em { text-shadow: var(--t-raise-dark), 0 0 .6em rgba(232,207,156,.30); }
.tm-price b, .tm-stats b { text-shadow: var(--t-raise-light); }

:is(.v-sec, .chapter):not(.v-dark):not(.dark):not(.night) {
  background-image:
    linear-gradient(180deg, rgba(7,43,37,.075) 0, rgba(7,43,37,0) 120px),
    radial-gradient(70% 55% at 12% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    radial-gradient(60% 50% at 92% 100%, rgba(15,107,86,.07), rgba(15,107,86,0) 70%),
    var(--grain-light);
}

:root {
  --bg-dark-depth:
    radial-gradient(55% 45% at 88% 0%, rgba(232,207,156,.14), rgba(232,207,156,0) 70%),
    radial-gradient(70% 60% at 0% 100%, rgba(26,110,92,.45), rgba(26,110,92,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.24) 0, rgba(0,0,0,0) 110px),
    radial-gradient(140% 90% at 50% 135%, rgba(0,0,0,.38), rgba(0,0,0,0) 60%),
    var(--grad-dark);
}
.v-dark { background-image: var(--grain-dark), var(--bg-dark-depth); }
.chapter.dark, .chapter.night { background-image: var(--bg-dark-depth); }

.stat, .pcard, .v-facts li, .v-legal li, .v-amen li, .v-map, .legal .docs li, .notice, .tm-price, .tm-checks li, .tm-stats li, .v-tab {
  background-image: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 55%), linear-gradient(0deg, rgba(7,43,37,.04), rgba(7,43,37,0) 45%);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stat, .pcard, .v-facts li, .v-legal li, .v-amen li, .v-perks li, .legal .docs li, .tm-price, .tm-checks li, .tm-stats li {
    transition: opacity .65s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease); }
  .stat:hover, .pcard:hover, .v-facts li:hover, .v-legal li:hover, .v-amen li:hover, .legal .docs li:hover, .tm-price:hover, .tm-checks li:hover, .tm-stats li:hover {
    translate: 0 -6px; box-shadow: var(--e4); }
  .v-perks li:hover { translate: 0 -6px; box-shadow: var(--d3); }
}

.gallery-row { padding-bottom: 40px; }
.gallery-row figure, .gallery-row .yt-slot { box-shadow: 0 3px 6px rgba(7,43,37,.12), 0 12px 24px rgba(7,43,37,.18); }
.v-dark .gallery-row figure, .v-dark .gallery-row .yt-slot { box-shadow: 0 3px 6px rgba(0,0,0,.32), 0 12px 24px rgba(0,0,0,.42); }

.btn-primary, .hero .btn-primary, figure.ledger-box .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.16), 0 3px 0 #0A4335, 0 6px 12px rgba(7,43,37,.26), 0 16px 30px rgba(7,43,37,.26); }
.btn-primary:hover, .hero .btn-primary:hover, figure.ledger-box .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.16), 0 5px 0 #0A4335, 0 10px 18px rgba(7,43,37,.28), 0 22px 40px rgba(7,43,37,.28); }
.btn-primary:active, .hero .btn-primary:active, figure.ledger-box .btn-primary:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.16), 0 1px 0 #0A4335, 0 3px 8px rgba(7,43,37,.3); }

:is(.hero, .v-dark, .chapter.night, .chapter.dark) .btn-primary, figure.ledger-box .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.18), 0 3px 0 #05241D, 0 10px 24px rgba(0,0,0,.45), 0 0 26px rgba(232,207,156,.20); }
:is(.hero, .v-dark, .chapter.night, .chapter.dark) .btn-primary:hover, figure.ledger-box .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.18), 0 5px 0 #05241D, 0 16px 32px rgba(0,0,0,.5), 0 0 34px rgba(232,207,156,.28); }
.btn-ghost { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 rgba(0,0,0,.22), 0 12px 26px rgba(0,0,0,.32); }
.btn-ghost.dark, .site-header.solid .btn-ghost { box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(15,107,86,.18), 0 10px 22px rgba(7,43,37,.16); }

@media (max-width: 767px) { .hero .actions > .btn + .btn { margin-top: 12px; } }

.tm-proof li { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px rgba(0,0,0,.26), 0 12px 26px rgba(0,0,0,.2); }

.hero .eyebrow::before { content: ""; display: inline-block; vertical-align: middle; width: 34px; height: 1px; margin: -2px 12px 0 0; background: linear-gradient(90deg, rgba(232,207,156,0), var(--champagne)); }

.hero h1 .mask { padding: .04em .12em .5em; margin: -.04em -.12em -.5em; }
.hero h1 .mask-1 { padding-bottom: .22em; margin-bottom: -.22em; }
.hero h1 .l1 { color: var(--cream); text-shadow: 0 .03em 0 #C9B48A, 0 .06em 0 #A8915F, 0 .09em 0 #7E6A40, 0 .11em .03em rgba(0,0,0,.4), 0 .2em .4em rgba(0,0,0,.45); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .l2 {
    background-image: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 62%),
      linear-gradient(178deg, #FFF6DE 0%, #F3DDA9 30%, #E2BF79 52%, #C9A157 64%, #F1DCAA 84%, #FFF1CF 100%);
    background-size: 250% 100%, 100% 1.12em; background-repeat: no-repeat, repeat-y; background-position: 160% 0, 0 0;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 .018em 0 #9C7B3E) drop-shadow(0 .018em 0 #7A5E2A) drop-shadow(0 .018em 0 #57421C) drop-shadow(0 .14em .2em rgba(0,0,0,.55));
  }
}
@media (prefers-reduced-motion: no-preference) {

  html.js .hero h1 .mask > span { transform: translateY(150%); }
  html.js .hero h1 .l2 { animation: heroline 1s var(--ease) .18s forwards, kim-luot 2.6s ease-in-out 1.4s both; }
  html.js.media-paused .hero h1 .mask > span { transform: none; animation: none; }
}
@keyframes kim-luot { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }

.hero-gallery { position: absolute; z-index: 1; pointer-events: none; perspective: 1600px; transform-style: preserve-3d; }
.hg-card { position: absolute; margin: 0; padding: 5px; border-radius: 16px;
  background: linear-gradient(145deg, #FBF0D2 0%, #D9B979 26%, #F3E1B5 50%, #B8954F 76%, #EBD5A0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(0,0,0,.18), 0 14px 26px rgba(0,0,0,.36), 0 40px 70px rgba(0,0,0,.46); }
.hg-card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }

.hg-card::after { content: ""; position: absolute; inset: 5px; border-radius: 11px; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 36%), linear-gradient(0deg, rgba(7,43,37,.62) 0%, rgba(7,43,37,0) 42%); }
.hg-card figcaption { position: absolute; z-index: 1; left: 18px; right: 14px; bottom: 15px; color: var(--cream); font: 600 13px/1.3 var(--sans); letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.65); }

@media (min-width: 1280px) {
  .hero-gallery { right: calc(var(--pad) + 44px); top: 50%; width: min(34vw, 540px); height: min(62vh, 560px);
    translate: 0 calc(-50% - 10px + var(--dim, 0) * -160px); }
  .hg-1 { width: 64%; aspect-ratio: 3 / 2; right: 0; top: 0; transform: rotateY(-18deg) rotateZ(3deg) translateZ(-90px); }
  .hg-2 { width: 42%; aspect-ratio: 3 / 4; left: 0; top: 23%; transform: rotateY(16deg) rotateZ(-5deg) translateZ(-20px); }
  .hg-3 { width: 62%; aspect-ratio: 4 / 3; right: 5%; bottom: 0; transform: rotateY(-12deg) rotateX(6deg) rotateZ(-2deg) translateZ(80px); }

  .hero .lead { max-width: min(54ch, 100vw - 2 * var(--pad) - min(34vw, 540px) - 170px); }

  .hero { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  .hero-inner { flex: 1 0 auto; height: auto; padding-top: calc(var(--header-h) + 24px); }
}
@media (max-width: 1279px) {
  .hero-gallery { left: 50%; top: calc(var(--header-h) + 16px); width: min(86vw, 430px); height: clamp(150px, 25vh, 236px);
    translate: -50% calc(var(--dim, 0) * -90px); transform: scale(var(--hg-fit, 1)); transform-origin: 50% 0; }
  .hg-card { top: 0; width: 37%; height: 100%; padding: 4px; border-radius: 13px; }
  .hg-card img, .hg-card::after { border-radius: 9px; }
  .hg-card::after { inset: 4px; }
  .hg-1 { left: 0; transform: rotateY(26deg) rotateZ(-8deg) translateZ(-50px) translateY(10%); }
  .hg-2 { right: 0; transform: rotateY(-26deg) rotateZ(8deg) translateZ(-50px) translateY(10%); }
  .hg-3 { left: 31.5%; transform: translateZ(40px); }
  .hg-1 figcaption, .hg-2 figcaption { display: none; }
  .hg-card figcaption { left: 10px; right: 8px; bottom: 9px; font-size: 12px; }
  html.no-js .hero-gallery { display: none; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-gallery { left: auto; right: calc(var(--pad) + 4px); top: calc(var(--header-h) + 18px); width: min(25vw, 340px); height: clamp(140px, 24vh, 210px);
    translate: 0 calc(var(--dim, 0) * -90px); transform: none; }
}
.hero-gallery.hg-tat { display: none; }

@media (max-width: 1023px) and (min-height: 501px) {
  .hero { --hg-h: clamp(130px, 21vh, 190px); height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .hero-gallery { height: var(--hg-h); }
  .hero-inner { flex: 1 0 auto; height: auto; padding-top: calc(var(--header-h) + 16px + var(--hg-h) * 1.14 + 18px); }
}
@media (max-width: 1023px) and (min-height: 501px) and (max-height: 700px) { .hero { --hg-h: 104px; } }

@media (max-width: 1023px) and (min-height: 501px) {
  .hero.hg-duoi .hero-inner { padding-top: calc(var(--header-h) + 16px); padding-bottom: calc(var(--hg-h) * 1.14 + 168px); }
  .hero.hg-duoi .hero-gallery { top: auto; bottom: 140px; }
}
@media (max-height: 500px) and (orientation: landscape) { .hero-gallery { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  html.js .hg-card { animation: hg-vao 1.1s var(--ease) both, hg-troi 9s ease-in-out infinite alternate; }
  html.js .hg-1 { animation-delay: .45s, 1.6s; }
  html.js .hg-2 { animation-delay: .6s, 2.8s; animation-duration: 1.1s, 10s; }
  html.js .hg-3 { animation-delay: .3s, 1.2s; animation-duration: 1.1s, 8s; }
  .hero.idle .hg-card { animation-play-state: running, paused; }
  html.media-paused .hg-card { animation: none; }
}
@keyframes hg-vao { from { opacity: 0; scale: .8; } }
@keyframes hg-troi { to { translate: 0 -12px; } }
