/* Refracted sunlight varies across fixed gold silhouettes. */
:root {
  --gold: #dbaf49;
  --gold-soft: #f6d784;
  --cream: #050607;
  --paper: #0b0d10;
  --line: #292a2a;
  --glass-fill: rgba(10, 12, 15, .78);
  --glass-rim: rgba(230, 195, 111, .27);
  --glass-shadow: 0 24px 70px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 241, 199, .12), inset 0 -1px 0 rgba(255, 249, 231, .025);
  --metal-base: linear-gradient(145deg, #c79538 0%, #e8bc50 22%, #f3d47a 43%, #d4a13c 65%, #eec668 82%, #c79538 100%);
  --metal-deep: linear-gradient(158deg, #a57224 0%, #d9a63d 20%, #f5d783 39%, #bb8426 58%, #e7bc59 78%, #c29035 100%);
  --metal-caustics-still: url("assets/gold-sunlight-still.webp");
  --metal-caustics-live: url("assets/gold-sunlight-animated.webp");
  --caustic-map: var(--metal-caustics-still);
  --metal-light-blend: hard-light;
}

body { background: #050607; }
.ambient-scene {
  background: radial-gradient(ellipse at 82% 14%, rgba(167, 128, 37, .075), transparent 43%), radial-gradient(ellipse at 9% 66%, rgba(127, 124, 109, .035), transparent 50%);
}
.ambient-orb { opacity: .34; }
.orb-one { background: radial-gradient(circle at 40% 40%, rgba(222, 178, 66, .19), rgba(149, 111, 28, .055) 44%, transparent 69%); }
.orb-two { background: radial-gradient(circle, rgba(216, 213, 197, .07), rgba(100, 105, 111, .035) 45%, transparent 70%); }
.orb-three { background: radial-gradient(circle, rgba(181, 138, 41, .13), rgba(107, 90, 45, .035) 49%, transparent 72%); }
.ambient-grid { opacity: .30; }
.topbar { background: rgba(3, 4, 6, .86); border-bottom-color: rgba(223, 190, 108, .12); }
.header {
  background: linear-gradient(180deg, rgba(18, 19, 21, .88), rgba(5, 7, 9, .84));
  border-bottom-color: rgba(229, 193, 107, .24);
  box-shadow: 0 12px 45px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 244, 207, .06);
}
.header.has-scrolled { background: linear-gradient(180deg, rgba(14, 16, 19, .95), rgba(4, 6, 8, .92)); }
.hero { background: linear-gradient(120deg, rgba(4, 6, 8, .46), rgba(10, 11, 13, .27)); }
.hero-art {
  background: radial-gradient(ellipse at 35% 3%, rgba(227, 190, 104, .065), transparent 63%), linear-gradient(145deg, rgba(255, 247, 226, .045), rgba(13, 15, 19, .69) 52%, rgba(3, 5, 7, .82));
  border-color: rgba(231, 198, 119, .32);
}
.hero-art::after { animation: none; transform: none; opacity: .35; background: radial-gradient(ellipse at 30% 15%, rgba(255, 235, 180, .07), transparent 65%); }
.hero-art::before { background: radial-gradient(500px circle at var(--pointer-x, 50%) var(--pointer-y, 25%), rgba(255, 230, 159, .075), transparent 70%); }
.principles { background: linear-gradient(180deg, rgba(18, 20, 22, .65), rgba(5, 7, 9, .70)); }
.treatments, .locations { background: linear-gradient(135deg, rgba(12, 14, 17, .75), rgba(4, 6, 8, .62)); }
.bmi-section { background: linear-gradient(120deg, rgba(15, 17, 20, .78), rgba(4, 6, 8, .75)); }
.treatment-card {
  background: linear-gradient(150deg, rgba(26, 28, 31, .66), rgba(10, 12, 15, .76) 47%, rgba(4, 6, 8, .83));
  border-color: rgba(223, 190, 109, .25);
}
.treatment-card::before { background: radial-gradient(420px circle at var(--pointer-x, 50%) var(--pointer-y, 25%), rgba(249, 221, 151, .075), transparent 68%); }
.process-grid article { background: linear-gradient(145deg, rgba(22, 24, 27, .73), rgba(5, 8, 11, .80)); }
.bmi-card, .contact-form, .location-card, .trajectory-card {
  background: radial-gradient(ellipse at 20% 0, rgba(231, 195, 111, .045), transparent 65%), linear-gradient(145deg, rgba(20, 22, 25, .78), rgba(5, 8, 11, .84));
  border-color: rgba(229, 195, 115, .28);
}
.contact-form input, .contact-form select, .bmi-fields input { background: linear-gradient(180deg, rgba(3, 5, 7, .80), rgba(12, 15, 18, .78)); }
.contact-form select option { background: #0b0d10; color: #e8e1d4; }
dialog {
  background: linear-gradient(145deg, rgba(21, 23, 27, .96), rgba(5, 8, 11, .96));
  border-color: rgba(235, 200, 117, .42);
  box-shadow: 0 35px 120px rgba(0, 0, 0, .67), inset 0 1px 0 rgba(255, 246, 212, .16), inset 0 -1px 0 rgba(255, 246, 220, .025);
}
dialog::backdrop { background: rgba(1, 3, 5, .67); }
.dialog-close { background: linear-gradient(180deg, rgba(64, 55, 33, .35), rgba(10, 13, 17, .88)); }
.dialog-close:hover { background: linear-gradient(180deg, rgba(95, 74, 30, .50), rgba(15, 18, 21, .92)); }
.floating-wa { background: linear-gradient(180deg, rgba(29, 31, 33, .91), rgba(5, 8, 11, .93)); }
.floating-wa:hover { background: linear-gradient(180deg, rgba(37, 37, 32, .94), rgba(8, 10, 13, .96)); }
footer { background: linear-gradient(180deg, rgba(6, 8, 11, .91), rgba(2, 4, 6, .98)); }

/* A shared light field supplies changing focus, broad glow and soft shadows. */
.gold-ink {
  color: #e8bd5b;
  --metal-current: var(--metal-base);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.gold-ink--large { --metal-current: var(--metal-deep); }
.gold-label {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .gold-ink {
    background-image: var(--caustic-map), var(--metal-current);
    background-blend-mode: var(--metal-light-blend), normal;
    background-size: 220px 220px, 100% 100%;
    background-position: center center, center center;
    background-repeat: repeat, no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: none;
  }

}

/* Original logo paths mask the same refracted sunlight as the lettering. */
.gold-logo { position: relative; isolation: isolate; line-height: 0; }
.gold-logo img { position: relative; z-index: 0; }
@supports ((mask-image: url("assets/logo-gold.svg")) or (-webkit-mask-image: url("assets/logo-gold.svg"))) {
  .gold-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: var(--caustic-map), var(--metal-deep);
    background-blend-mode: var(--metal-light-blend), normal;
    background-size: 220px 220px, 100% 100%;
    background-position: center center, center center;
    background-repeat: repeat, no-repeat;
    -webkit-mask-image: url("assets/logo-gold.svg");
    mask-image: url("assets/logo-gold.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: none;
  }

  .emblem-disc.gold-logo::after { inset: 0 10px; }
}

/* Filled controls reflect gold; dark lettering remains distinct from that surface. */
.button.gold-surface, .gold-surface:is(.active, [aria-pressed="true"], [aria-selected="true"]) {
  color: #141005;
  background-image: var(--caustic-map), var(--metal-base);
  background-blend-mode: var(--metal-light-blend), normal;
  background-size: 220px 220px, 100% 100%;
  background-position: center center, center center;
  background-repeat: repeat, no-repeat;
  border-color: #e3be62;
  box-shadow: inset 0 1px 0 rgba(255, 255, 225, .78), inset 0 -1px 0 rgba(139, 89, 16, .48), 0 9px 27px rgba(0, 0, 0, .34);
  animation: none;
}

.button.gold-surface:hover, .gold-surface:is(.active, [aria-pressed="true"], [aria-selected="true"]):hover {
  color: #141005;
  background-image: var(--caustic-map), var(--metal-base);
  background-size: 220px 220px, 100% 100%;
  border-color: #ffe5a0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 235, .85), inset 0 -1px 0 rgba(139, 89, 16, .45), 0 12px 32px rgba(0, 0, 0, .42);
}
.button.gold-surface .gold-ink, .gold-surface:is(.active, [aria-pressed="true"], [aria-selected="true"]) .gold-ink {
  color: #141005 !important;
  -webkit-text-fill-color: #141005 !important;
  background-image: none !important;
  animation: none !important;
}
.treatment-tabs .gold-surface:not(.active):not([aria-pressed="true"]), .variant-tabs .gold-surface:not(.active):not([aria-pressed="true"]) {
  color: #e8bd5b;
  background: linear-gradient(180deg, rgba(29, 31, 33, .75), rgba(6, 9, 12, .84));
  border-color: rgba(227, 191, 101, .36);
  animation: none;
}
.treatment-tabs .gold-surface:not(.active):not([aria-pressed="true"]):hover, .variant-tabs .gold-surface:not(.active):not([aria-pressed="true"]):hover {
  background: linear-gradient(180deg, rgba(40, 38, 31, .85), rgba(10, 13, 16, .92));
  border-color: rgba(255, 218, 125, .66);
}
.header nav>.button, .header nav>.button:hover {
  color: #e8bd5b;
  background: linear-gradient(180deg, rgba(28, 30, 31, .81), rgba(5, 8, 11, .90));
  border-color: rgba(232, 193, 99, .56);
}
.header nav>.button:hover { border-color: #f0cf7e; }

.gold-ink.gold-awake, .gold-logo.gold-awake, .gold-surface.gold-awake { --caustic-map: var(--metal-caustics-live); }
.gold-page-hidden .gold-ink, .gold-page-hidden .gold-surface, .gold-page-hidden .gold-logo { --caustic-map: var(--metal-caustics-still) !important; }

/* Match each pre-existing responsive logo size without exposing a matte edge. */
@media(max-width:1250px) {
  .emblem-disc.gold-logo::after { inset: 0; -webkit-mask-size: min(425px, 100%) auto; mask-size: min(425px, 100%) auto; }
}
@media(max-width:1150px) {
  .emblem-disc.gold-logo::after { -webkit-mask-size: min(370px, 100%) auto; mask-size: min(370px, 100%) auto; }
}
@media(max-width:900px) {
  .emblem-disc.gold-logo::after { -webkit-mask-size: min(290px, 100%) auto; mask-size: min(290px, 100%) auto; }
}
@media(max-width:720px) {
  .emblem-disc.gold-logo::after { -webkit-mask-size: min(305px, 100%) auto; mask-size: min(305px, 100%) auto; }
  .header nav { background: linear-gradient(180deg, rgba(14, 17, 21, .98), rgba(4, 7, 10, .98)); }
}
@media(max-width:480px) {
  .emblem-disc.gold-logo::after { -webkit-mask-size: min(275px, 100%) auto; mask-size: min(275px, 100%) auto; }
}
@media(prefers-reduced-motion:reduce) {
  .gold-ink, .gold-surface, .gold-logo { --caustic-map: var(--metal-caustics-still) !important; }
  .gold-ink, .gold-surface, .gold-logo::after { animation: none !important; background-position: center center, center center; }
}
@media(forced-colors:active) {
  .gold-ink, .button.gold-surface .gold-ink, .gold-surface:is(.active, [aria-pressed="true"], [aria-selected="true"]) .gold-ink {
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    background: none !important;
    animation: none !important;
  }
  .gold-surface { color: ButtonText !important; background: ButtonFace !important; border-color: ButtonText !important; animation: none !important; }
  .gold-logo::after { background: CanvasText !important; forced-color-adjust: none; animation: none !important; }
}