/* Foil, silk folds and drawn coastlines; all ornament is vector based. */
:root {
  --foil: linear-gradient(115deg, #bb8b4d 0%, #e5c18a 18%, #fff0ce 32%, #d9b574 46%, #b47f43 62%, #f6dfb6 80%, #d9b574 100%);
}
.header {
  background: radial-gradient(ellipse at 12% -130%, #345c79 0%, transparent 63%), linear-gradient(110deg, #0b233b, #051728 76%);
  border-bottom-color: #d9b5744a;
}
.header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #d9b57466 18%, #ffedc7a1 30%, #d9b57418 55%, transparent);
  pointer-events: none;
}
.brand-mark, .aureum-intro-mark { filter: drop-shadow(0 2px 3px #0007); }
.brand-type, .aureum-wordmark { text-shadow: 0 3px 8px #0004; }
@supports (background-clip: text) {
  .header .brand-type, .footer-brand .brand-type, .aureum-wordmark, .aureum-seal-name {
    color: transparent; background: var(--foil); background-clip: text; -webkit-background-clip: text;
    text-shadow: none;
  }
}
.brand { position: relative; }
.brand::after {
  content: ''; position: absolute; inset: -6px; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, #fff0ce66 48%, transparent 62%) -240px 0 / 240px 100% no-repeat;
  mask: url('assets/aureum-mark.svg') 6px center / 67px 42px no-repeat;
}
.button-light, .contact-form .button {
  position: relative; isolation: isolate; overflow: hidden; background: var(--foil);
  border-color: #f2d29a; box-shadow: inset 0 1px 0 #fff3d580, 0 4px 16px #04152514;
}
.button-light::before, .contact-form .button::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, #fff8e5aa 48%, transparent 70%);
  transform: translateX(-140%);
}
.hero { background: #061a2c; }
.hero-shade { background: linear-gradient(90deg, #041525a6, #0e2a470a 85%), linear-gradient(0deg, #041525ed, transparent 90%); }
.hero h1 em { color: #efce98; }
.hero .aureum-ornament { position: absolute; width: 77%; right: -9%; bottom: 63px; height: 105px; opacity: .65; }
.aureum-ornament { display: block; overflow: visible; pointer-events: none; color: var(--gold); }
.aureum-ornament .coast-line { fill: none; stroke: currentColor; stroke-width: .75; vector-effect: non-scaling-stroke; opacity: .5; }
.aureum-ornament .coast-highlight { fill: none; stroke: #ffedc7; stroke-width: .65; vector-effect: non-scaling-stroke; opacity: .65; }
.project-facts { background: linear-gradient(110deg, #0c2843, #061a2d); }
.intro-note.aureum-seal {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  justify-content: center; align-items: center; align-self: stretch; padding: 40px 25px 34px;
  background: #061a2d url('assets/aureum-silk.svg') center / cover;
  color: var(--ivory); text-align: center; border: 1px solid #d9b57452; min-height: 380px;
  box-shadow: 0 16px 35px #0e2a4712;
}
.aureum-seal::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 43%, #d9b57413, transparent 55%);
}
.aureum-seal .aureum-note-mark { width: 56%; max-width: 240px; height: auto; margin: 0 0 13px; position: relative; filter: drop-shadow(0 7px 7px #0005); }
.aureum-seal .aureum-seal-name {
  font: 300 clamp(27px, 3.1vw, 46px)/1.3 var(--sans); letter-spacing: .23em; padding-left: .23em;
  position: relative; color: var(--sand); white-space: nowrap;
}
@supports (background-clip: text) { .aureum-seal .aureum-seal-name { color: transparent; } }
.aureum-seal-name small {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  color: #e6d5bf; font: 300 10px/2.6 var(--sans); letter-spacing: .35em;
}
.aureum-seal-name small::before, .aureum-seal-name small::after { content: ''; height: 1px; width: 32px; background: linear-gradient(90deg, #d9b574, #f9e9c6); }
.aureum-seal .aureum-seal-motto { font: 300 11px/1.8 var(--sans); color: #e6d5bf; letter-spacing: .3px; margin-top: 28px; position: relative; }
.aureum-seal .seal-glint {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(112deg, transparent 32%, #fff0cd0a 44%, #fff0cd22 50%, transparent 62%);
  transform: translateX(-110%);
}
.residences, .location, .contact { position: relative; isolation: isolate; }
.residences { background: radial-gradient(ellipse at 95% 0, #1d475c66, transparent 50%), linear-gradient(120deg, #0b253e, #041525 85%); }
.residences > .aureum-ornament { position: absolute; right: 0; top: 4px; width: 67%; height: 132px; z-index: -1; opacity: .7; }
.residence-inner { position: relative; }
.card-image { box-shadow: 0 8px 25px #0002; }
.card-arrow { background: var(--foil); border: 1px solid #f0d8ad; }
.filter.active { border-bottom-color: #efd19d; }
.amenities-grid svg { stroke-dasharray: 160; stroke-dashoffset: 0; }
.location { background: linear-gradient(130deg, #0c2843, #041525); }
.gallery-quote { position: relative; overflow: hidden; background: #071d31 url('assets/aureum-silk.svg') center / cover; border: 1px solid #d9b57444; }
.gallery-quote > span { color: var(--gold); }
.contact { background: radial-gradient(ellipse at 90% 90%, #204d6352, transparent 58%), linear-gradient(115deg, #0c2843, #041525 82%); }
.contact > .aureum-ornament { position: absolute; right: -4%; top: 0; width: 74%; height: 110px; opacity: .8; z-index: -1; }
.contact::before { opacity: .035; }
.contact-form { position: relative; }
.footer { background: #041525; }
.solea-intro { background: #041525; }
.intro-topline { z-index: 2; }

@media (prefers-reduced-motion: no-preference) {
  .brand:hover::after, .brand:focus-visible::after { animation: aureum-brand-shine 1.2s ease-out; }
  .button-light:hover::before, .contact-form .button:hover::before { animation: aureum-button-shine .8s ease-out; }
  .aureum-seal.is-inview .seal-glint { animation: aureum-seal-shine 2.2s .15s ease-in-out both; }
  .aureum-ornament.is-inview .coast-line, .aureum-ornament.is-inview .coast-highlight { animation: aureum-coast-draw 2.4s ease-out both; }
  .aureum-ornament.is-inview .coast-highlight { animation-delay: .18s; }
  .amenities-grid.is-inview svg { animation: aureum-icon-draw 1.5s ease-out both; }
  .amenities-grid.is-inview > div:nth-child(2) svg { animation-delay: .1s; }
  .amenities-grid.is-inview > div:nth-child(3) svg { animation-delay: .2s; }
  .amenities-grid.is-inview > div:nth-child(4) svg { animation-delay: .3s; }
  .amenities-grid.is-inview > div:nth-child(5) svg { animation-delay: .4s; }
  .amenities-grid.is-inview > div:nth-child(6) svg { animation-delay: .5s; }
  .card-image .card-arrow { transition: transform .3s ease, box-shadow .3s ease; }
  .card-image:hover .card-arrow { transform: rotate(45deg); box-shadow: 0 0 25px #d9b57433; }
}
@keyframes aureum-brand-shine { 0% { opacity: 0; background-position: -100px 0; } 25% { opacity: 1; } 100% { opacity: 0; background-position: 250px 0; } }
@keyframes aureum-button-shine { to { transform: translateX(140%); } }
@keyframes aureum-seal-shine { 0% { opacity: 0; transform: translateX(-110%); } 30%, 65% { opacity: 1; } 100% { opacity: 0; transform: translateX(110%); } }
@keyframes aureum-coast-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes aureum-icon-draw { from { stroke-dashoffset: 160; opacity: .3; } to { stroke-dashoffset: 0; opacity: 1; } }
@media (max-width: 1050px) {
  .aureum-seal .aureum-seal-name { font-size: 32px; }
  .aureum-seal-name small { font-size: 8px; gap: 9px; letter-spacing: .25em; }
  .aureum-seal-name small::before, .aureum-seal-name small::after { width: 22px; }
  .intro-note.aureum-seal { min-height: 340px; padding-inline: 20px; }
}
@media (max-width: 600px) {
  .intro-note.aureum-seal { min-height: 350px; padding: 50px 20px 40px; grid-template-columns: none; }
  .aureum-seal .aureum-note-mark { width: 55%; max-width: 205px; margin-bottom: 20px; }
  .aureum-seal .aureum-seal-name { font-size: clamp(28px, 8.4vw, 40px); }
  .aureum-seal-name small { font-size: 8px; letter-spacing: .3em; }
  .aureum-seal .aureum-seal-motto { font-size: 10px; margin-top: 22px; }
  .hero .aureum-ornament { width: 100%; right: -22%; bottom: 45px; height: 80px; opacity: .5; }
  .residences > .aureum-ornament { top: 0; width: 100%; height: 85px; opacity: .45; }
  .contact > .aureum-ornament { width: 100%; height: 65px; opacity: .45; }
}