:root {
  --ink: #3d2e31;
  --muted: #756568;
  --rose: #c77e7a;
  --rose-dark: #9a5755;
  --blush: #faece9;
  --paper: #fffaf8;
  --line: #e5c5c1;
  --logo-pink: #fde5e5;
  --sans: "DM Sans", sans-serif;
  --serif: "Playfair Display", serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; color-scheme: light; background: #f8e9e6; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 50% 0%, #fffdfc 0, #fff8f6 40%, #f6e4e0 100%); font-family: var(--sans); }
body.modal-open { overflow: hidden; }
a, button { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 11px 14px; color: white; background: var(--ink); text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.visually-hidden { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.links-shell { width: min(100% - 32px, 470px); min-height: 100vh; margin: 0 auto; padding: clamp(28px, 7vh, 60px) 0 30px; display: flex; flex-direction: column; align-items: stretch; }
.links-logo-link { width: min(76vw, 350px); margin: 0 auto; display: block; color: inherit; text-decoration: none; border-radius: 32px; }
.links-logo-link:focus-visible { outline: 3px solid var(--rose-dark); outline-offset: 6px; }
.links-logo-stage { width: 100%; aspect-ratio: 4 / 3; position: relative; display: block; overflow: hidden; background: var(--logo-pink); border: 1px solid rgba(199, 126, 122, .28); border-radius: 30px; box-shadow: 0 20px 55px rgba(88, 48, 52, .1); }
.links-logo-static, .links-logo-video { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: contain; background: var(--logo-pink); }
.links-logo-static { z-index: 1; opacity: 1; }
.links-logo-video { z-index: 2; opacity: 0; transition: opacity .18s ease; }
.logo-motion-pending .links-logo-static { opacity: 0; }
.logo-motion-pending .links-logo-video { opacity: 1; }
.links-logo-stage.is-playing .links-logo-video { opacity: 1; }
.links-logo-stage.is-playing .links-logo-static { opacity: 0; }

.provider-identity { margin: 18px 0 25px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .13em; line-height: 1.5; text-align: center; text-transform: uppercase; }
.links-actions { display: grid; gap: 12px; }
.links-action { min-height: 58px; padding: 15px 22px; display: flex; align-items: center; justify-content: center; color: var(--ink); background: rgba(255, 250, 248, .9); border: 1px solid var(--line); border-radius: 13px; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-align: center; text-decoration: none; text-transform: uppercase; box-shadow: 0 8px 24px rgba(88, 48, 52, .035); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.links-action:hover { transform: translateY(-2px); border-color: var(--rose); }
.links-action:focus-visible, .social-link:focus-visible, .dialog-action:focus-visible, .contact-dialog-close:focus-visible { outline: 3px solid rgba(154, 87, 85, .48); outline-offset: 3px; }
.links-action-primary { min-height: 64px; color: white; background: var(--rose); border-color: var(--rose); box-shadow: 0 13px 30px rgba(154, 87, 85, .18); }
.links-action-primary:hover { background: var(--rose-dark); border-color: var(--rose-dark); }
.links-action-location { min-height: 72px; padding-inline: 58px; position: relative; justify-content: center; gap: 0; text-align: center; }
.links-action-location svg { width: 25px; height: 25px; flex: 0 0 auto; fill: none; stroke: var(--rose-dark); stroke-width: 1.8; }
.links-location-icon { position: absolute; left: 22px; }
.links-location-copy { display: grid; justify-items: center; gap: 3px; text-align: center; }
.links-action-location small { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: none; }

.links-socials { margin: 23px 0 0; display: flex; align-items: center; justify-content: center; gap: 13px; }
.social-link { min-width: 44px; min-height: 44px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(61, 46, 49, .12); border-radius: 50%; box-shadow: 0 7px 18px rgba(61, 46, 49, .1); transition: transform .18s ease; }
.social-link:hover { transform: translateY(-2px) scale(1.03); }
.social-icon { width: 24px; height: 24px; display: block; }
.social-instagram { color: white; background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 48%, #fcb045 100%); }
.social-instagram svg { fill: currentColor; stroke: none; }
.social-tiktok { color: white; background: #000; }
.social-tiktok path { fill: currentColor; stroke: none; }
.social-youtube { color: white; background: #ff0000; }
.social-youtube rect { fill: currentColor; stroke: none; }
.social-youtube .play { fill: #ff0000; }
.social-youtube .social-icon { padding: 2px; background: white; border-radius: 5px; }

.links-footer { margin-top: auto; padding-top: 28px; display: grid; gap: 5px; color: #9b7e7e; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.builder-attribution { min-height: 44px; width: fit-content; margin: 7px auto 5px; padding: 10px 20px; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: #f5fdff; background: #111c27; border: 1px solid #3ed8f5; border-radius: 999px; box-shadow: 0 8px 24px rgba(17, 28, 39, .18); font-size: 9px; letter-spacing: .1em; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
.builder-attribution:hover { border-color: #8fefff; box-shadow: 0 10px 28px rgba(17, 28, 39, .25); }
.builder-attribution:focus-visible { outline: 3px solid rgba(62, 216, 245, .55); outline-offset: 3px; }
.builder-attribution-network { width: 100%; height: 100%; position: absolute; inset: 0; opacity: .72; pointer-events: none; transition: opacity .18s ease; }
.builder-attribution:hover .builder-attribution-network,
.builder-attribution:focus-visible .builder-attribution-network { opacity: 1; }
.builder-attribution-label { position: relative; z-index: 1; padding: 0 2px; text-shadow: 0 1px 4px rgba(17, 28, 39, .95); }
.links-footer small { font-size: 9px; font-weight: 600; }

.contact-dialog-backdrop { position: fixed; z-index: 100; inset: 0; padding: 20px; display: grid; place-items: center; overflow-y: auto; background: rgba(61, 46, 49, .62); backdrop-filter: blur(7px); }
.contact-dialog { width: min(680px, 100%); max-height: calc(100vh - 40px); padding: clamp(27px, 5vw, 48px); position: relative; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(61, 46, 49, .3); }
.contact-dialog-close { width: 44px; height: 44px; position: absolute; top: 13px; right: 13px; padding: 0; color: var(--ink); background: var(--blush); border: 1px solid var(--line); font-size: 27px; line-height: 1; }
.dialog-eyebrow { margin: 0; color: var(--rose-dark); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.contact-dialog h2 { margin: 14px 48px 12px 0; font: 500 clamp(32px, 7vw, 48px)/1.02 var(--serif); }
.contact-dialog > p:not(.dialog-eyebrow):not(.contact-test-mode):not(.contact-status) { color: var(--muted); line-height: 1.65; }
.contact-test-mode { width: fit-content; margin: 18px 0 0; padding: 9px 12px; color: #765433; background: #fff2d7; border: 1px solid #e1c894; font-size: 11px; }
.turnstile-shell { min-height: 70px; margin-top: 22px; display: grid; align-items: center; }
.contact-status, .copy-contact-status { min-height: 20px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.verified-contact-options { margin-top: 20px; padding-top: 22px; border-top: 1px solid var(--line); }
.verified-contact-number { margin: 0 0 16px; color: var(--ink); font: 500 28px/1.1 var(--serif); }
.contact-action-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dialog-action { min-height: 48px; padding: 12px; display: grid; place-items: center; color: var(--ink); background: transparent; border: 1px solid #bda3a1; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-align: center; text-decoration: none; text-transform: uppercase; }
.dialog-action-primary { color: white; background: var(--rose); border-color: var(--rose); }
.contact-qr-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-qr-grid figure { margin: 0; padding: 16px; display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 14px; background: var(--blush); border: 1px solid var(--line); }
.contact-qr-grid img { width: 112px; height: 112px; display: block; background: white; }
.contact-qr-grid figcaption { min-width: 0; display: grid; gap: 5px; }
.contact-qr-grid strong { font: 500 18px/1.1 var(--serif); }
.contact-qr-grid span { color: var(--muted); font-size: 11px; line-height: 1.4; }

@media (max-width: 560px) {
  .links-shell { width: min(100% - 28px, 430px); padding-top: 24px; }
  .links-logo-link { width: min(76vw, 310px); }
  .links-logo-stage { border-radius: 24px; }
  .provider-identity { margin-top: 15px; font-size: 10px; }
  .links-action { min-height: 56px; }
  .links-action-primary { min-height: 62px; }
  .contact-action-row { grid-template-columns: 1fr; }
  .contact-qr-grid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .links-logo-static { opacity: 1 !important; }
  .links-logo-video { opacity: 0 !important; }
}

@media (forced-colors: active) {
  .social-link { color: ButtonText; background: ButtonFace; border: 2px solid ButtonText; forced-color-adjust: auto; }
  .social-icon, .social-icon * { fill: none; stroke: currentColor; }
  .social-icon-instagram path, .social-icon-tiktok path { fill: currentColor; stroke: none; }
  .social-icon .solid, .social-icon .play { fill: currentColor; }
  .builder-attribution { color: LinkText; background: Canvas; border: 2px solid LinkText; forced-color-adjust: auto; }
  .builder-attribution-network { display: none; }
}
