html,
body {
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            display: none;
        }

        body.bg-background {
            background:
                radial-gradient(circle at 8% 8%, rgba(255, 178, 44, 0.18), transparent 22rem),
                radial-gradient(circle at 94% 12%, rgba(133, 72, 54, 0.16), transparent 26rem),
                linear-gradient(90deg, rgba(133, 72, 54, 0.22) 0%, rgba(255, 247, 232, 1) 18%, rgba(255, 247, 232, 1) 82%, rgba(133, 72, 54, 0.22) 100%) !important;
        }
        .warm-note-bg {
            background:
                linear-gradient(135deg, rgba(255, 247, 232, 0.92), rgba(241, 222, 193, 0.92)),
                repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(133, 72, 54, 0.06) 12px, rgba(133, 72, 54, 0.06) 13px);
        }
        .blink {
            animation: blinker 1s linear infinite;
        }
        @keyframes blinker {
            50% { opacity: 0; }
        }
        .scanline {
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(255, 178, 44, 0.2), transparent);
            position: absolute;
            animation: scanline 6s linear infinite;
            pointer-events: none;
        }
        @keyframes scanline {
            0% { top: 0; }
            100% { top: 100%; }
        }
        header.bg-background {
            background:
                linear-gradient(90deg, rgba(61, 33, 25, 0.96), rgba(133, 72, 54, 0.96) 42%, rgba(199, 139, 81, 0.94) 100%) !important;
            color: #fff7e8;
            box-shadow: 0 12px 34px rgba(133, 72, 54, 0.22);
            position: sticky;
            overflow: hidden;
        }
        header.bg-background::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 14% 0%, rgba(255, 178, 44, 0.34), transparent 12rem),
                linear-gradient(180deg, rgba(255, 247, 232, 0.12), transparent);
            pointer-events: none;
        }
        header.bg-background::after {
            content: "";
            position: absolute;
            right: 18px;
            bottom: 0;
            width: min(38vw, 360px);
            height: 3px;
            border-radius: 999px 999px 0 0;
            background: linear-gradient(90deg, transparent, #ffb22c, #fff7e8);
            pointer-events: none;
        }
        header.bg-background > div {
            position: relative;
            z-index: 1;
        }
        header .text-primary,
        header .text-primary-fixed-dim,
        header .hover\:text-primary:hover {
            color: #fff7e8 !important;
        }
        header img {
            border-color: #ffb22c !important;
            box-shadow: 0 0 0 3px rgba(255, 247, 232, 0.16), 0 8px 20px rgba(61, 33, 25, 0.24);
        }
        header .bg-primary-container {
            background: #ffb22c !important;
            box-shadow: 0 0 0 3px rgba(255, 178, 44, 0.18);
        }
        header .bg-surface-container-low {
            background: linear-gradient(135deg, rgba(255, 247, 232, 0.26), rgba(255, 178, 44, 0.18)) !important;
            border-color: rgba(255, 178, 44, 0.7) !important;
            color: #fff7e8 !important;
            box-shadow: inset 0 0 0 1px rgba(255, 247, 232, 0.12);
        }
        header button {
            border-radius: 999px;
            background: rgba(255, 247, 232, 0.12);
            color: #ffb22c !important;
        }
        header button:hover {
            background: #ffb22c;
            color: #3d2119 !important;
        }
        .bg-surface-container,
        .bg-surface-container-high,
        .bg-surface-container-low,
        .bg-surface-dim {
            box-shadow: 0 18px 42px rgba(133, 72, 54, 0.14);
        }
        .bg-surface-container,
        .bg-surface-container-high,
        .bg-surface-dim {
            border-color: rgba(133, 72, 54, 0.18) !important;
        }
        .bg-surface-container-high .text-on-background,
        .bg-surface-dim .text-on-background {
            color: #3d2119 !important;
        }
        .bg-primary {
            background: #854836 !important;
            color: #fff7e8 !important;
        }
        .bg-surface-container-highest.text-on-background,
        .bg-surface-container-highest .text-on-background {
            color: #fff7e8 !important;
        }
        footer.bg-surface-container-lowest {
            background:
                radial-gradient(circle at 18% 0%, rgba(255, 178, 44, 0.24), transparent 18rem),
                radial-gradient(circle at 84% 100%, rgba(199, 139, 81, 0.26), transparent 18rem),
                linear-gradient(135deg, #3d2119 0%, #854836 58%, #5f3024 100%) !important;
            border-color: rgba(255, 178, 44, 0.34) !important;
            box-shadow: 0 -18px 44px rgba(133, 72, 54, 0.2);
            position: relative;
            overflow: hidden;
        }
        footer.bg-surface-container-lowest::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: min(82vw, 760px);
            height: 3px;
            transform: translateX(-50%);
            border-radius: 0 0 999px 999px;
            background: linear-gradient(90deg, transparent, #ffb22c, #fff7e8, #ffb22c, transparent);
        }
        footer.bg-surface-container-lowest::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background-image: url("../images/shared/RIZTORIZ BOXED.avif");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            opacity: 0.05;
            mix-blend-mode: screen;
        }
        footer.bg-surface-container-lowest > * {
            position: relative;
            z-index: 1;
        }
        footer .text-on-surface {
            color: #fff7e8 !important;
        }
        footer .text-surface-variant,
        footer .text-on-surface-variant {
            color: #f1dec1 !important;
        }
        footer .text-primary-container\/30 {
            color: rgba(255, 178, 44, 0.68) !important;
        }
        footer a {
            border: 1px solid rgba(255, 178, 44, 0.28);
            border-radius: 999px;
            padding: 8px 12px;
            background: rgba(255, 247, 232, 0.08);
            color: #fff7e8 !important;
        }
        footer a:hover {
            background: #ffb22c;
            border-color: #ffb22c;
            color: #3d2119 !important;
        }
        main .font-display-lg-mobile {
            font-weight: 700 !important;
            letter-spacing: 0 !important;
            text-wrap: balance;
        }
        main h1.font-display-lg-mobile,
        main .text-3xl.font-display-lg-mobile {
            color: #3d2119 !important;
            text-shadow: 0 1px 0 rgba(255, 247, 232, 0.55);
        }
        .bg-primary .font-display-lg-mobile,
        .bg-surface-container-highest .font-display-lg-mobile {
            color: #fff7e8 !important;
            text-shadow: 0 1px 0 rgba(61, 33, 25, 0.28);
        }
        main .font-headline-md {
            font-weight: 800 !important;
            color: #3d2119 !important;
            letter-spacing: 0.02em !important;
        }
        main .font-label-mono {
            font-weight: 700 !important;
            letter-spacing: 0.08em !important;
        }
        main .text-primary,
        main .text-primary\/60 {
            color: #854836 !important;
        }
        main .text-primary-container {
            color: #8a4b19 !important;
            font-weight: 800 !important;
        }
        main .text-on-surface,
        main .text-on-background {
            color: #3d2119 !important;
        }
        main .text-on-surface-variant {
            color: #6b5044 !important;
            font-weight: 600 !important;
        }
        main .text-on-surface-variant .text-primary,
        main .text-primary {
            font-weight: 800 !important;
        }
        main .text-secondary-container {
            color: #854836 !important;
            font-weight: 800 !important;
        }
        main .text-tertiary-fixed-dim {
            color: #5f3024 !important;
            font-weight: 800 !important;
        }
        main .text-surface-variant {
            color: #b77839 !important;
            font-weight: 800 !important;
        }
        .bg-surface-container,
        .bg-surface-container-high,
        .bg-surface-dim,
        .bg-surface-container-low {
            color: #3d2119 !important;
        }
        .bg-surface-container .border-outline-variant\/20,
        .bg-surface-container-high .border-outline-variant\/20,
        .bg-surface-dim .border-outline-variant\/20 {
            border-color: rgba(133, 72, 54, 0.22) !important;
        }
        .bg-surface-container-highest,
        .bg-primary {
            color: #fff7e8 !important;
        }
        .bg-surface-container-highest .text-on-surface-variant,
        .bg-surface-container-highest .text-primary,
        .bg-primary .text-on-surface-variant,
        .bg-primary .text-primary-container {
            color: #f1dec1 !important;
        }
        .bg-primary .opacity-70 {
            opacity: 1 !important;
            color: #ffdf91 !important;
            font-weight: 800 !important;
        }
        .warm-note-bg {
            color: #3d2119 !important;
        }
        header .font-label-mono {
            font-weight: 800 !important;
            letter-spacing: 0.14em !important;
        }
        header .text-\[10px\] {
            font-weight: 800 !important;
        }
        footer .font-bold,
        footer a,
        footer .text-\[9px\] {
            font-weight: 800 !important;
            letter-spacing: 0.14em !important;
        }
        main {
            position: relative;
            isolation: isolate;
        }
        main::before {
            content: "Riztoriz";
            position: absolute;
            top: 10px;
            left: 50%;
            z-index: -1;
            transform: translateX(-50%);
            color: rgba(133, 72, 54, 0.055);
            font-family: "Cormorant Garamond", Georgia, serif;
            font-size: clamp(4.5rem, 16vw, 12rem);
            font-weight: 700;
            line-height: 0.8;
            letter-spacing: 0.04em;
            pointer-events: none;
            white-space: nowrap;
        }
        main::after {
            content: "";
            position: absolute;
            right: max(-9vw, -90px);
            top: 90px;
            z-index: -1;
            width: min(42vw, 420px);
            aspect-ratio: 1;
            border-radius: 999px;
            background:
                radial-gradient(circle, rgba(255, 178, 44, 0.34), rgba(199, 139, 81, 0.14) 42%, transparent 70%);
            filter: blur(18px);
            pointer-events: none;
        }
        main > .grid > .rounded-xl,
        main > .grid > a.rounded-xl {
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(18px) saturate(142%);
            -webkit-backdrop-filter: blur(18px) saturate(142%);
            box-shadow:
                0 24px 70px rgba(133, 72, 54, 0.16),
                inset 0 1px 0 rgba(255, 247, 232, 0.72),
                inset 0 -1px 0 rgba(133, 72, 54, 0.08);
        }
        main > .grid > .rounded-xl::before,
        main > .grid > a.rounded-xl::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.07) 34%, transparent 56%),
                radial-gradient(circle at 88% 12%, rgba(255, 178, 44, 0.26), transparent 9rem);
            opacity: 0.72;
            pointer-events: none;
        }
        main > .grid > .rounded-xl::after,
        main > .grid > a.rounded-xl::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, rgba(255, 178, 44, 0.68), rgba(255, 247, 232, 0.24), rgba(133, 72, 54, 0.36));
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        main > .grid > .rounded-xl > *,
        main > .grid > a.rounded-xl > * {
            position: relative;
            z-index: 1;
        }
        main > .grid > .rounded-xl:hover,
        main > .grid > a.rounded-xl:hover {
            box-shadow:
                0 28px 82px rgba(133, 72, 54, 0.22),
                inset 0 1px 0 rgba(255, 247, 232, 0.86),
                inset 0 -1px 0 rgba(133, 72, 54, 0.12);
        }
        .bg-surface-container,
        .bg-surface-container-high,
        .bg-surface-dim {
            background:
                linear-gradient(145deg, rgba(255, 247, 232, 0.74), rgba(245, 234, 213, 0.46)) !important;
        }
        .bg-surface-container-low {
            background:
                linear-gradient(145deg, rgba(241, 222, 193, 0.72), rgba(255, 247, 232, 0.5)) !important;
        }
        .bg-primary {
            background:
                linear-gradient(145deg, rgba(133, 72, 54, 0.98), rgba(95, 48, 36, 0.92) 58%, rgba(199, 139, 81, 0.88)) !important;
        }
        .bg-surface-container-highest {
            background:
                linear-gradient(145deg, rgba(61, 33, 25, 0.96), rgba(133, 72, 54, 0.88)) !important;
        }
        .warm-note-bg {
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: inset 0 1px 0 rgba(255, 247, 232, 0.72);
        }
        main img {
            box-shadow:
                0 14px 34px rgba(61, 33, 25, 0.22),
                inset 0 1px 0 rgba(255, 247, 232, 0.6);
        }
        main .material-symbols-outlined {
            font-variation-settings: "FILL" 0, "wght" 300, "GRAD" -25, "opsz" 24;
            font-weight: 300 !important;
            filter: drop-shadow(0 8px 14px rgba(133, 72, 54, 0.22));
        }
        main .h-1.bg-primary-container {
            background: linear-gradient(90deg, #854836, #ffb22c) !important;
            box-shadow: 0 4px 10px rgba(255, 178, 44, 0.22);
        }
        main .h-1.bg-surface-variant {
            background: rgba(133, 72, 54, 0.18) !important;
        }
        nav.md\:hidden {
            background:
                linear-gradient(135deg, rgba(255, 247, 232, 0.78), rgba(241, 222, 193, 0.46)) !important;
            backdrop-filter: blur(22px) saturate(150%);
            -webkit-backdrop-filter: blur(22px) saturate(150%);
            box-shadow: 0 -18px 48px rgba(133, 72, 54, 0.18), inset 0 1px 0 rgba(255, 247, 232, 0.82);
        }

        /* TS Sports Hub inspired final skin: keep Riztoriz layout/content intact. */
        html,
        body {
            overflow-x: hidden;
        }
        body {
            font-family: Manrope, system-ui, sans-serif !important;
        }
        body.bg-background {
            position: relative;
            background:
                radial-gradient(circle at 10% 8%, rgba(255, 178, 44, 0.72) 0, rgba(255, 178, 44, 0.13) 22%, transparent 44%),
                radial-gradient(circle at 88% 14%, rgba(255, 247, 232, 0.9) 0, rgba(255, 247, 232, 0.2) 24%, transparent 46%),
                radial-gradient(circle at 76% 44%, rgba(241, 222, 193, 0.9) 0, rgba(241, 222, 193, 0.16) 20%, transparent 42%),
                linear-gradient(rgba(255, 247, 232, 0.60), rgba(255, 247, 232, 0.60)),
                url("../images/shared/BACKGROUND.avif"),
                linear-gradient(180deg, #f1dec1 0%, #fff7e8 46%, #f1dec1 100%) !important;
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
            background-position: center, center, center, center, center, center !important;
            background-size: auto, auto, auto, auto, cover, auto !important;
            background-attachment: scroll, scroll, scroll, scroll, fixed, scroll !important;
            color: #3d2119 !important;
        }
        body::before,
        body::after {
            content: "";
            position: fixed;
            pointer-events: none;
            z-index: 0;
        }
        body::before {
            width: 240px;
            height: 240px;
            left: -60px;
            top: 220px;
            border-radius: 9999px;
            filter: blur(12px);
            background: radial-gradient(circle, rgba(133, 72, 54, 0.26) 0%, rgba(133, 72, 54, 0.07) 54%, transparent 76%);
        }
        body::after {
            width: 280px;
            height: 280px;
            right: -90px;
            top: 540px;
            border-radius: 9999px;
            filter: blur(12px);
            background: radial-gradient(circle, rgba(255, 178, 44, 0.28) 0%, rgba(255, 178, 44, 0.08) 56%, transparent 78%);
        }
        header,
        main,
        footer,
        nav {
            position: relative;
            z-index: 1;
        }
        header.bg-background {
            background:
                linear-gradient(135deg, rgba(255, 247, 232, 0.92), rgba(241, 222, 193, 0.82)) !important;
            border-color: rgba(133, 72, 54, 0.18) !important;
            box-shadow: 0 14px 32px rgba(133, 72, 54, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
            color: #3d2119 !important;
        }
        header.bg-background::before {
            background:
                radial-gradient(circle at 8% 0%, rgba(255, 178, 44, 0.26), transparent 12rem),
                radial-gradient(circle at 92% 10%, rgba(133, 72, 54, 0.12), transparent 10rem);
        }
        header.bg-background::after {
            background: linear-gradient(90deg, transparent, #854836, #ffb22c, transparent);
        }
        header .text-primary,
        header .text-primary-fixed-dim,
        header .hover\:text-primary:hover,
        header button {
            color: #3d2119 !important;
        }
        header .bg-surface-container-low {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 247, 232, 0.78)) !important;
            border-color: rgba(133, 72, 54, 0.2) !important;
            color: #854836 !important;
        }
        header button:hover {
            background: #854836 !important;
            color: #fff7e8 !important;
        }
        main {
            padding-top: 28px !important;
            padding-bottom: 30px !important;
        }
        main::before {
            content: none;
            top: 10px;
            color: rgba(133, 72, 54, 0.06);
            font-family: Manrope, sans-serif;
            font-weight: 800;
            letter-spacing: -0.035em;
        }
        main::after {
            background: radial-gradient(circle, rgba(255, 178, 44, 0.3), rgba(133, 72, 54, 0.08) 46%, transparent 72%);
            filter: blur(12px);
        }
        main > .grid > .rounded-xl,
        main > .grid > a.rounded-xl {
            border-radius: 24px !important;
            border: 1px solid rgba(133, 72, 54, 0.22) !important;
            background:
                linear-gradient(150deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 247, 232, 0.9) 100%) !important;
            box-shadow:
                0 18px 40px rgba(133, 72, 54, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease, background 0.35s ease;
        }
        main > .grid > .rounded-xl::before,
        main > .grid > a.rounded-xl::before {
            background: linear-gradient(135deg, rgba(255, 178, 44, 0.16) 0%, transparent 36%, rgba(241, 222, 193, 0.24) 100%);
            opacity: 0.9;
        }
        main > .grid > .rounded-xl::after,
        main > .grid > a.rounded-xl::after {
            display: none;
        }
        main > .grid > .rounded-xl:hover,
        main > .grid > a.rounded-xl:hover {
            transform: translateY(-6px);
            border-color: rgba(133, 72, 54, 0.34) !important;
            box-shadow:
                0 28px 56px rgba(133, 72, 54, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
        }
        main > .grid > .bg-primary {
            background:
                linear-gradient(145deg, rgba(133, 72, 54, 0.98) 0%, rgba(133, 72, 54, 0.96) 56%, rgba(199, 139, 81, 0.92) 100%) !important;
            box-shadow: 0 22px 48px rgba(133, 72, 54, 0.22), 0 0 0 1px rgba(255, 178, 44, 0.22) !important;
        }
        main > .grid > .bg-primary::after {
            content: "";
            position: absolute;
            inset: 12px;
            display: block;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            pointer-events: none;
            z-index: 0;
        }
        .bg-surface-container-highest {
            background:
                linear-gradient(145deg, rgba(61, 33, 25, 0.96), rgba(133, 72, 54, 0.9)) !important;
        }
        .bg-surface-container-low {
            background:
                linear-gradient(145deg, rgba(241, 222, 193, 0.92), rgba(255, 255, 255, 0.74)) !important;
        }
        .warm-note-bg {
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(241, 222, 193, 0.82)) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
        }
        main .font-display-lg-mobile,
        main .font-headline-md,
        main .font-label-mono,
        footer,
        header {
            font-family: Manrope, system-ui, sans-serif !important;
        }
        main h1.font-display-lg-mobile {
            font-size: 26px !important;
            line-height: 1.18 !important;
            font-weight: 700 !important;
            letter-spacing: -0.015em !important;
        }
        main .text-3xl.font-display-lg-mobile {
            font-size: 42px !important;
            line-height: 1.05 !important;
            font-weight: 700 !important;
            letter-spacing: -0.02em !important;
        }
        main .font-label-mono {
            letter-spacing: 0.035em !important;
            font-weight: 600 !important;
        }
        main .text-primary,
        main .text-primary\/60,
        main .text-primary-container {
            color: #854836 !important;
        }
        main .text-on-surface-variant {
            color: #6c6048 !important;
        }
        main .h-1.bg-primary-container {
            background: linear-gradient(90deg, #854836, #ffb22c) !important;
            border-radius: 999px;
        }
        main .h-1.bg-surface-variant {
            background: rgba(133, 72, 54, 0.16) !important;
            border-radius: 999px;
        }
        footer.bg-surface-container-lowest {
            background:
                radial-gradient(circle at 18% 0%, rgba(255, 178, 44, 0.2), transparent 18rem),
                linear-gradient(135deg, #3d2119 0%, #854836 62%, #5f3024 100%) !important;
            box-shadow: 0 -18px 44px rgba(133, 72, 54, 0.18);
        }
        footer a {
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.08);
        }
        nav.md\:hidden {
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(241, 222, 193, 0.76)) !important;
            border-color: rgba(133, 72, 54, 0.18) !important;
            box-shadow: 0 -18px 48px rgba(133, 72, 54, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
        }

        /* Typography balance: lighter rhythm with clear hierarchy. */
        body {
            font-weight: 400 !important;
        }
        header,
        footer,
        main {
            font-weight: 400 !important;
        }
        header .font-label-mono,
        header .text-\[10px\] {
            font-weight: 500 !important;
            letter-spacing: 0.055em !important;
        }
        main .font-display-lg-mobile {
            font-weight: 600 !important;
            letter-spacing: -0.01em !important;
        }
        main h1.font-display-lg-mobile {
            font-size: 24px !important;
            line-height: 1.2 !important;
            font-weight: 600 !important;
        }
        main .text-3xl.font-display-lg-mobile {
            font-size: 36px !important;
            line-height: 1.08 !important;
            font-weight: 600 !important;
        }
        .open-status-subheading {
            display: inline-flex;
            width: fit-content;
            align-items: center;
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 13px !important;
            line-height: 1.15 !important;
            font-weight: 700 !important;
            letter-spacing: 0 !important;
            background: rgba(95, 48, 36, 0.08);
        }
        .open-status-subheading.is-open {
            color: #166534 !important;
            background: rgba(34, 197, 94, 0.16);
            box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.18);
        }
        .open-status-subheading.is-closed {
            color: #b42318 !important;
            background: rgba(239, 68, 68, 0.14);
            box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.18);
        }
        main .text-xl.font-display-lg-mobile {
            font-size: 20px !important;
            line-height: 1.16 !important;
            font-weight: 600 !important;
        }
        main .font-headline-md {
            font-size: 14px !important;
            line-height: 1.35 !important;
            font-weight: 600 !important;
            letter-spacing: 0 !important;
        }
        main .font-label-mono {
            font-weight: 500 !important;
            letter-spacing: 0.035em !important;
        }
        main .text-\[10px\],
        main .text-\[9px\] {
            line-height: 1.45 !important;
            font-weight: 500 !important;
        }
        main .text-on-surface-variant {
            font-weight: 400 !important;
        }
        main .text-primary,
        main .text-primary-container,
        main .text-secondary-container,
        main .text-tertiary-fixed-dim,
        main .text-surface-variant {
            font-weight: 600 !important;
        }
        main .text-on-surface-variant .text-primary {
            font-weight: 500 !important;
        }
        .bg-primary .opacity-70 {
            font-weight: 500 !important;
        }
        .warm-note-bg {
            font-weight: 400 !important;
        }
        .warm-note-bg span {
            font-weight: 500 !important;
        }
        footer .font-bold,
        footer a,
        footer .text-\[9px\] {
            font-weight: 500 !important;
            letter-spacing: 0.055em !important;
        }

        /* Contrast pass: keep the soft style, but make every detail readable. */
        main > .grid > .rounded-xl,
        main > .grid > a.rounded-xl {
            background:
                linear-gradient(150deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 232, 0.96) 100%) !important;
            border-color: rgba(133, 72, 54, 0.34) !important;
            box-shadow:
                0 18px 40px rgba(133, 72, 54, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        }
        main > .grid > .bg-primary,
        main > .grid > .bg-surface-container-highest {
            border-color: rgba(255, 178, 44, 0.46) !important;
        }
        main .text-on-background,
        main .text-on-surface {
            color: #2b1812 !important;
        }
        main .text-on-surface-variant {
            color: #564033 !important;
        }
        main .text-primary,
        main .text-primary\/60,
        main .text-primary-container,
        main .text-secondary-container,
        main .text-tertiary-fixed-dim {
            color: #6f3728 !important;
        }
        main .text-surface-variant {
            color: #8a4b19 !important;
        }
        .bg-primary .font-display-lg-mobile,
        .bg-primary .text-on-surface-variant,
        .bg-primary .text-primary-container,
        .bg-primary .opacity-70,
        .bg-surface-container-highest .font-display-lg-mobile,
        .bg-surface-container-highest .text-on-surface-variant,
        .bg-surface-container-highest .text-primary {
            color: #fff7e8 !important;
        }
        .bg-primary .opacity-70 {
            color: #ffe1a0 !important;
        }
        .warm-note-bg {
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 222, 193, 0.9)) !important;
        }
        .visit-note-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            color: #3d2119 !important;
        }
        .visit-note-kicker {
            margin-bottom: 2px;
            font-weight: 600 !important;
            letter-spacing: 0.1em !important;
            color: #854836 !important;
        }
        .visit-note-quote {
            color: #3d2119;
            font-size: 27px;
            line-height: 0.9;
            letter-spacing: 0 !important;
            text-shadow: 0 1px 0 rgba(255, 247, 232, 0.72);
        }
        .visit-note-divider {
            width: 58px;
            height: 2px;
            margin: 7px 0 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, #854836, #ffb22c);
        }
        .visit-note-subline {
            color: #6f3728 !important;
            font-size: 10px;
            font-weight: 600 !important;
            letter-spacing: 0.02em !important;
        }
        .visit-note-body {
            color: #6f3728 !important;
            font-family: Manrope, system-ui, sans-serif !important;
            font-size: 18px;
            line-height: 1.22;
            font-weight: 500;
            letter-spacing: 0 !important;
            text-shadow: 0 1px 0 rgba(255, 247, 232, 0.72);
        }
        main .h-1.bg-surface-variant {
            background: rgba(133, 72, 54, 0.32) !important;
        }
        main .border-outline-variant\/20,
        main .border-outline-variant\/30,
        main .border-outline-variant {
            border-color: rgba(133, 72, 54, 0.3) !important;
        }
        main .opacity-20 {
            opacity: 0.38 !important;
        }
        header .text-primary-fixed-dim,
        header .text-primary-container {
            color: #5f3024 !important;
        }
        footer .text-surface-variant,
        footer .text-on-surface-variant {
            color: #fff7e8 !important;
        }
        footer .text-on-surface-variant\/40 {
            color: rgba(255, 247, 232, 0.76) !important;
        }
        footer .text-primary-container\/30 {
            color: rgba(255, 178, 44, 0.9) !important;
        }
        nav.md\:hidden .text-on-surface-variant {
            color: #5f3024 !important;
        }

        /* Quick action cards: restore clear contrast on the bottom component row. */
        main > .grid > a.bg-primary {
            background:
                linear-gradient(145deg, #854836 0%, #5f3024 62%, #3d2119 100%) !important;
            border-color: rgba(255, 178, 44, 0.5) !important;
        }
        main > .grid > a.bg-primary,
        main > .grid > a.bg-primary .material-symbols-outlined,
        main > .grid > a.bg-primary .font-display-lg-mobile,
        main > .grid > a.bg-primary .font-label-mono {
            color: #fff7e8 !important;
        }
        main > .grid > a.bg-primary .opacity-70 {
            opacity: 1 !important;
            color: #ffdf91 !important;
        }
        main > .grid > a.bg-surface-container-highest {
            background:
                linear-gradient(145deg, #fff7e8 0%, #f1dec1 100%) !important;
            border-color: rgba(133, 72, 54, 0.38) !important;
        }
        main > .grid > a.bg-surface-container-highest,
        main > .grid > a.bg-surface-container-highest .material-symbols-outlined,
        main > .grid > a.bg-surface-container-highest .font-display-lg-mobile,
        main > .grid > a.bg-surface-container-highest .font-label-mono {
            color: #3d2119 !important;
            text-shadow: none !important;
        }
        main > .grid > a.bg-surface-container-high,
        main > .grid > div.bg-surface-container-low,
        main > .grid > a.bg-surface-container-low {
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 232, 0.94)) !important;
            border-color: rgba(133, 72, 54, 0.36) !important;
        }
        main > .grid > a.bg-surface-container-high,
        main > .grid > a.bg-surface-container-high .material-symbols-outlined,
        main > .grid > a.bg-surface-container-high .font-display-lg-mobile,
        main > .grid > a.bg-surface-container-high .font-label-mono,
        main > .grid > div.bg-surface-container-low,
        main > .grid > div.bg-surface-container-low .material-symbols-outlined,
        main > .grid > div.bg-surface-container-low .font-label-mono,
        main > .grid > div.bg-surface-container-low .text-on-surface,
        main > .grid > a.bg-surface-container-low,
        main > .grid > a.bg-surface-container-low .material-symbols-outlined,
        main > .grid > a.bg-surface-container-low .font-label-mono,
        main > .grid > a.bg-surface-container-low .text-on-surface {
            color: #3d2119 !important;
            text-shadow: none !important;
        }
        main > .grid > a.bg-surface-container-high .text-on-surface-variant,
        main > .grid > div.bg-surface-container-low .text-on-surface-variant,
        main > .grid > a.bg-surface-container-low .text-on-surface-variant {
            color: #6f3728 !important;
        }

        /* Softer component radius: less rounded while preserving the bento layout. */
        main > .grid > .rounded-xl,
        main > .grid > a.rounded-xl {
            border-radius: 18px !important;
        }
        main > .grid > .rounded-xl::after,
        main > .grid > a.rounded-xl::after,
        main > .grid > a.bg-primary::after {
            border-radius: 14px !important;
            inset: 10px !important;
        }
        main .rounded,
        main .rounded-lg,
        main .rounded-xl {
            border-radius: 14px !important;
        }
        main .rounded-full {
            border-radius: 9999px !important;
        }
        footer a {
            border-radius: 14px !important;
        }
        .social-icon-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        footer .social-icon-link {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 !important;
            border-radius: 12px !important;
            color: #fff7e8 !important;
            background: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 178, 44, 0.32) !important;
            box-shadow: inset 0 1px 0 rgba(255, 247, 232, 0.16);
            text-decoration: none;
            transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease, border-color 0.24s ease;
        }
        footer .social-icon-link i {
            font-size: 14px;
            line-height: 1;
            opacity: 0.9;
            transform: scale(0.94);
            text-shadow: none !important;
        }
        footer .social-icon-link .fa-brands {
            font-family: "Font Awesome 6 Brands" !important;
            font-weight: 400 !important;
        }
        footer .social-icon-link .fa-solid {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 900 !important;
            opacity: 0.82;
            transform: scale(0.88);
        }
        footer .social-icon-link:hover {
            transform: translateY(-2px);
            background: #ffb22c !important;
            border-color: #ffb22c !important;
            color: #3d2119 !important;
        }
        nav.md\:hidden {
            border-top-left-radius: 18px !important;
            border-top-right-radius: 18px !important;
        }
        .mobile-switcher {
            --switch-index: 0;
            width: min(100%, 440px);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4px;
            padding: 4px;
            border-radius: 16px;
            background: rgba(133, 72, 54, 0.12);
            border: 1px solid rgba(133, 72, 54, 0.22);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
            position: relative;
            overflow: hidden;
        }
        .mobile-switcher::before {
            content: "";
            position: absolute;
            top: 4px;
            left: 4px;
            width: calc((100% - 12px) / 2);
            height: calc(100% - 8px);
            border-radius: 12px;
            background:
                linear-gradient(145deg, rgba(133, 72, 54, 0.98) 0%, rgba(95, 48, 36, 0.96) 100%);
            box-shadow:
                0 10px 24px rgba(133, 72, 54, 0.28),
                inset 0 1px 0 rgba(255, 247, 232, 0.24);
            transform: translateX(calc(var(--switch-index) * (100% + 4px)));
            transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.36s ease;
            z-index: 0;
        }
        .mobile-switcher a {
            min-height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-family: Manrope, system-ui, sans-serif;
            font-size: 12px;
            line-height: 1.15;
            font-weight: 500;
            color: #5f3024;
            position: relative;
            z-index: 1;
            text-decoration: none;
            transition: color 0.26s ease, transform 0.26s ease;
        }
        .mobile-switcher a[aria-current="page"] {
            color: #fff7e8;
            transform: translateY(-1px);
        }
        .mobile-switcher a:not([aria-current="page"]):hover {
            color: #3d2119;
        }

        .page-panel {
            animation: pageReveal 0.32s ease both;
        }
        .page-panel[hidden] {
            display: none !important;
        }
        @media (min-width: 768px) {
            .page-panel[data-page-panel="barbershop"].is-active {
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }
            .page-panel[data-page-panel="barbershop"].is-active > main {
                flex: 1 0 auto;
            }
            .page-panel[data-page-panel="barbershop"].is-active > footer {
                margin-top: auto !important;
            }
        }
        @keyframes pageReveal {
            from {
                opacity: 0;
                transform: translateY(12px);
                filter: blur(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }

        .academy-main {
            width: min(100% - 32px, 1024px);
            margin: 0 auto;
            padding: 16px 0 112px;
            flex: 1;
        }
        .academy-stage {
            position: relative;
            overflow: hidden;
            min-height: calc(100vh - 112px);
            display: flex;
            align-items: stretch;
            justify-content: center;
            border-radius: 20px;
            padding: clamp(26px, 7vw, 56px);
            background:
                radial-gradient(circle at 76% 8%, rgba(241, 222, 193, 0.5), transparent 12rem),
                radial-gradient(circle at 20% 12%, rgba(255, 178, 44, 0.22), transparent 13rem),
                radial-gradient(circle at 64% 48%, rgba(133, 72, 54, 0.64), transparent 18rem),
                linear-gradient(180deg, #c78b51 0%, #854836 42%, #5f3024 68%, #3d2119 100%);
            border: 1px solid rgba(133, 72, 54, 0.42);
            box-shadow:
                0 28px 68px rgba(133, 72, 54, 0.18),
                0 0 0 1px rgba(255, 178, 44, 0.12),
                inset 0 1px 0 rgba(255, 247, 232, 0.08);
        }
        .academy-panel {
            position: relative;
            z-index: 2;
            width: min(100%, 520px);
            min-height: min(680px, calc(100vh - 180px));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            overflow: hidden;
            border-radius: 18px;
            color: #fff7e8;
        }
        .academy-copy {
            position: relative;
            z-index: 1;
            width: 100%;
            margin-top: auto;
            padding: 0 0 10px;
        }
        .academy-medal {
            position: absolute;
            top: -2px;
            right: -6px;
            z-index: 1;
            width: min(84%, 342px);
            overflow: visible;
            pointer-events: none;
        }
        .academy-medal img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position: center;
            box-shadow: none !important;
            filter:
                drop-shadow(0 24px 34px rgba(61, 33, 25, 0.22))
                drop-shadow(0 0 22px rgba(255, 178, 44, 0.14));
        }
        .academy-brand {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 12px;
            color: #fff7e8;
            font-size: 13px;
            font-weight: 600;
        }
        .academy-brand-mark {
            width: 19px;
            height: 10px;
            border: 2px solid currentColor;
            border-bottom: 0;
            border-radius: 99px 99px 0 0;
            transform: skewX(-18deg);
            opacity: 0.95;
        }
        .academy-title {
            max-width: 100%;
            font-family: Manrope, system-ui, sans-serif;
            font-size: clamp(27px, 7vw, 34px);
            line-height: 1.08;
            font-weight: 500;
            letter-spacing: 0;
        }
        .academy-title-script {
            display: block;
            font-family: "Great Vibes", cursive;
            font-size: clamp(31px, 8.8vw, 40px);
            line-height: 0.86;
            font-weight: 400;
            color: #fff7e8;
            letter-spacing: 0 !important;
        }
        .academy-title-main {
            display: block;
            margin-top: 2px;
            font-family: Manrope, system-ui, sans-serif;
            font-weight: 500;
        }
        .academy-title-main strong {
            font-weight: 500;
            color: #ffb22c;
        }
        .academy-text {
            margin-top: 14px;
            max-width: 100%;
            color: rgba(255, 247, 232, 0.78);
            font-size: 11px;
            line-height: 1.55;
            min-height: 52px;
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .academy-text.is-changing {
            opacity: 0;
            transform: translateY(4px);
        }
        .academy-dots {
            display: flex;
            gap: 4px;
            margin-top: 12px;
        }
        .academy-dots span {
            width: 14px;
            height: 3px;
            border-radius: 999px;
            background: rgba(255, 247, 232, 0.34);
            transition: width 0.24s ease, background 0.24s ease, opacity 0.24s ease;
        }
        .academy-dots span.is-active {
            width: 24px;
            background: #ffb22c;
        }
        .academy-button {
            margin-top: 24px;
            width: 100%;
            min-height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 232, 0.94));
            border: 1px solid rgba(133, 72, 54, 0.36);
            color: #3d2119;
            font-size: 12px;
            font-weight: 500;
            text-decoration: none;
            box-shadow:
                0 18px 40px rgba(133, 72, 54, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            text-shadow: none;
            transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease, border-color 0.24s ease;
        }
        .academy-button:hover,
        .academy-button:focus-visible {
            transform: translateY(-1px);
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(255, 247, 232, 0.98));
            border-color: rgba(133, 72, 54, 0.48);
            box-shadow:
                0 16px 34px rgba(133, 72, 54, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
        }
        .academy-link {
            display: block;
            width: 100%;
            margin-top: 16px;
            text-align: center;
            color: rgba(255, 247, 232, 0.84);
            font-size: 12px;
            text-decoration: none;
        }
        @media (max-width: 720px) {
            .academy-stage {
                min-height: calc(100vh - 112px);
                padding: 24px 18px 28px;
            }
            .academy-panel {
                width: 100%;
                min-height: calc(100vh - 170px);
            }
            .academy-medal {
                width: min(82%, 318px);
            }
            .academy-copy {
                width: 100%;
                padding-bottom: 8px;
            }
        }

        main .script-heading,
        main h1.script-heading,
        main .text-xl.script-heading {
            font-family: "Great Vibes", cursive !important;
            font-weight: 400 !important;
            letter-spacing: 0 !important;
            line-height: 0.95 !important;
            text-transform: none !important;
        }
        main h1.script-heading {
            font-size: 34px !important;
        }
        main .text-xl.script-heading {
            font-size: 31px !important;
        }
        main .focus-script {
            font-size: 27px !important;
            line-height: 0.98 !important;
        }
        main > .grid > a.bg-primary .script-heading {
            color: #fff7e8 !important;
        }
        main > .grid > a:not(.bg-primary) .script-heading {
            color: #3d2119 !important;
        }
        main > .grid > a.quick-action-card {
            position: relative !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: flex-start !important;
            justify-content: space-between !important;
            gap: 12px !important;
            padding-right: 16px !important;
        }
        main > .grid > a.quick-action-card > .material-symbols-outlined {
            position: static !important;
            flex: 0 0 auto !important;
            order: 2 !important;
            z-index: 2 !important;
            font-variation-settings: "FILL" 0, "wght" 250, "GRAD" -25, "opsz" 24;
            font-weight: 250 !important;
            opacity: 0.9;
        }
        main > .grid > a.quick-action-card > div {
            order: 1 !important;
            min-width: 0;
            align-self: flex-end;
        }
        .review-cta-card {
            min-height: 92px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 16px;
            color: #fff7e8 !important;
            text-decoration: none;
            background:
                linear-gradient(145deg, rgba(133, 72, 54, 0.98) 0%, rgba(133, 72, 54, 0.96) 56%, rgba(199, 139, 81, 0.92) 100%) !important;
            border: 1px solid rgba(255, 178, 44, 0.42);
            box-shadow:
                0 20px 44px rgba(133, 72, 54, 0.24),
                inset 0 1px 0 rgba(255, 247, 232, 0.2);
            overflow: hidden;
            transition: transform 0.26s ease, box-shadow 0.26s ease;
        }
        .review-cta-card:hover {
            transform: translateY(-2px);
            box-shadow:
                0 24px 54px rgba(133, 72, 54, 0.28),
                inset 0 1px 0 rgba(255, 247, 232, 0.24);
        }
        .review-cta-kicker {
            color: rgba(255, 247, 232, 0.74);
            letter-spacing: 0.08em !important;
        }
        .review-cta-title {
            margin-top: 3px;
            font-family: "Great Vibes", cursive;
            font-size: 34px;
            line-height: 0.94;
            color: #fff7e8;
            text-shadow: 0 2px 10px rgba(61, 33, 25, 0.28);
        }
        .review-cta-copy {
            margin-top: 7px;
            max-width: 240px;
            color: rgba(255, 247, 232, 0.82);
            line-height: 1.35;
        }
        .review-cta-icon {
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            border-radius: 16px;
            color: #fff7e8;
            background: rgba(255, 247, 232, 0.1);
            border: 1px solid rgba(255, 178, 44, 0.38);
            box-shadow: 0 12px 24px rgba(61, 33, 25, 0.24);
        }
        .review-cta-icon .material-symbols-outlined {
            font-size: 26px;
            font-variation-settings: "FILL" 0, "wght" 300, "GRAD" -25, "opsz" 24;
        }
        main > .grid > a.review-cta-card.rounded-xl {
            background:
                linear-gradient(145deg, rgba(133, 72, 54, 0.98) 0%, rgba(133, 72, 54, 0.96) 56%, rgba(199, 139, 81, 0.92) 100%) !important;
            border-color: rgba(255, 178, 44, 0.42) !important;
            color: #fff7e8 !important;
        }
        main > .grid > a.review-cta-card.rounded-xl::before,
        main > .grid > a.review-cta-card.rounded-xl::after {
            display: none !important;
        }
        main > .grid > a.review-cta-card .review-cta-title,
        main > .grid > a.review-cta-card .review-cta-copy,
        main > .grid > a.review-cta-card .review-cta-kicker {
            color: #fff7e8 !important;
            opacity: 1 !important;
            text-shadow: 0 2px 10px rgba(61, 33, 25, 0.3);
        }
        main > .grid > a.review-cta-card .review-cta-copy {
            color: rgba(255, 247, 232, 0.86) !important;
        }
        main > .grid > a.review-cta-card .review-cta-kicker {
            color: rgba(255, 247, 232, 0.74) !important;
        }
        main > .grid > .identity-card {
            background:
                radial-gradient(circle at 18% 0%, rgba(255, 178, 44, 0.22), transparent 12rem),
                linear-gradient(145deg, #854836 0%, #6f3728 54%, #3d2119 100%) !important;
            border-color: rgba(255, 178, 44, 0.42) !important;
            box-shadow:
                0 24px 58px rgba(133, 72, 54, 0.24),
                inset 0 1px 0 rgba(255, 247, 232, 0.2) !important;
        }
        main > .grid > .identity-card::before {
            background:
                linear-gradient(135deg, rgba(255, 247, 232, 0.1), transparent 42%, rgba(255, 178, 44, 0.18)) !important;
        }
        main > .grid > .identity-card h1,
        main > .grid > .identity-card .script-heading {
            color: #fff7e8 !important;
            text-shadow: 0 2px 10px rgba(61, 33, 25, 0.34) !important;
        }
        main > .grid > .identity-card .font-label-mono {
            color: rgba(255, 247, 232, 0.84) !important;
        }
        main > .grid > .identity-card .border-primary\/40 {
            border-color: rgba(255, 178, 44, 0.54) !important;
            background: rgba(255, 247, 232, 0.1);
            box-shadow: inset 0 1px 0 rgba(255, 247, 232, 0.2);
        }
        main > .grid > .identity-card .identity-logo-frame {
            width: 74px !important;
            height: 74px !important;
            padding: 4px !important;
            border-radius: 9999px !important;
            overflow: hidden;
            border: 1px solid rgba(255, 178, 44, 0.72) !important;
            background:
                linear-gradient(145deg, rgba(255, 247, 232, 0.16), rgba(61, 33, 25, 0.26)) !important;
            box-shadow:
                0 12px 28px rgba(61, 33, 25, 0.32),
                0 0 0 2px rgba(255, 247, 232, 0.18),
                inset 0 1px 0 rgba(255, 247, 232, 0.28),
                0 0 0 4px rgba(255, 247, 232, 0.08);
        }
        main > .grid > .identity-card .border-outline-variant\/20 {
            border-color: rgba(255, 247, 232, 0.22) !important;
        }
        main > .grid > .identity-card .text-on-surface-variant {
            color: rgba(255, 247, 232, 0.76) !important;
        }
        main > .grid > .identity-card .text-primary {
            color: #ffdf91 !important;
            font-weight: 600 !important;
        }
        main > .grid > .identity-card img {
            box-shadow:
                0 12px 28px rgba(61, 33, 25, 0.34),
                inset 0 1px 0 rgba(255, 247, 232, 0.24);
        }
        main > .grid > .identity-card img.identity-logo {
            filter: none !important;
            width: 100%;
            height: 100%;
            border-radius: 9999px;
            object-fit: cover;
            transform: scale(1.08);
            background: #3d2119;
        }
        .footer-logo {
            width: min(184px, 56vw);
            height: auto;
            display: block;
            object-fit: contain;
            filter: drop-shadow(0 10px 20px rgba(61, 33, 25, 0.28));
        }

        /* Manrope final pass: keep the UI lighter. */
        body,
        main,
        footer,
        header,
        .font-headline-md,
        .font-body-lg,
        .font-label-mono,
        .academy-title,
        .academy-title-main,
        .visit-note-body {
            font-family: Manrope, system-ui, sans-serif !important;
        }
        main .font-display-lg-mobile:not(.script-heading),
        main .font-headline-md,
        .academy-title,
        .academy-title-main {
            font-weight: 500 !important;
            letter-spacing: 0 !important;
        }
        main .font-label-mono,
        footer .font-label-mono,
        .review-cta-kicker,
        .review-cta-copy,
        .academy-text {
            font-weight: 500 !important;
            letter-spacing: 0.01em !important;
        }
        main .text-\[10px\],
        main .text-\[9px\] {
            line-height: 1.35 !important;
        }
        .open-status-subheading,
        .visit-note-kicker,
        .visit-note-subline {
            font-weight: 600 !important;
        }

        .form-modal[hidden] {
            display: none !important;
        }
        .form-modal {
            position: fixed;
            inset: 0;
            z-index: 80;
            display: grid;
            place-items: center;
            padding: 18px;
        }
        .form-modal__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(61, 33, 25, 0.58);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .form-modal__panel {
            position: relative;
            z-index: 1;
            width: min(100%, 430px);
            max-height: min(92vh, 740px);
            overflow: auto;
            border-radius: 18px;
            border: 1px solid rgba(133, 72, 54, 0.34);
            background:
                radial-gradient(circle at 90% 0%, rgba(255, 178, 44, 0.18), transparent 11rem),
                linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 232, 0.96));
            color: #3d2119;
            box-shadow:
                0 28px 70px rgba(61, 33, 25, 0.34),
                inset 0 1px 0 rgba(255, 255, 255, 0.86);
            padding: 22px;
        }
        .form-modal__close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 34px;
            height: 34px;
            border: 1px solid rgba(133, 72, 54, 0.26);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.56);
            color: #5f3024;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
        }
        .form-modal__header {
            padding-right: 42px;
            margin-bottom: 18px;
        }
        .form-modal__kicker {
            color: #854836;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .form-modal__header h2 {
            margin: 5px 0 6px;
            font-family: "Great Vibes", cursive;
            font-size: 38px;
            line-height: 0.95;
            font-weight: 400;
            color: #3d2119;
        }
        .form-modal__header p {
            margin: 0;
            color: #6f3728;
            font-size: 12px;
            line-height: 1.45;
        }
        .form-modal__form {
            display: grid;
            gap: 16px;
        }
        .form-modal__privacy {
            margin: 0;
            color: #6f3728;
            font-size: 11px;
            line-height: 1.5;
            font-weight: 500;
        }
        .form-modal__fields {
            display: grid;
            gap: 12px;
        }
        .form-modal__row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .form-modal label {
            display: grid;
            gap: 6px;
            color: #5f3024;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .form-modal input,
        .form-modal select,
        .form-modal textarea {
            width: 100%;
            min-height: 42px;
            border: 1px solid rgba(133, 72, 54, 0.28);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.72);
            color: #3d2119;
            font: 500 13px/1.35 Manrope, system-ui, sans-serif;
            padding: 10px 12px;
            outline: none;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
        }
        .form-modal textarea {
            resize: none;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .form-modal textarea::-webkit-scrollbar,
        .form-modal textarea::-webkit-scrollbar-button,
        .form-modal textarea::-webkit-resizer {
            display: none;
            width: 0;
            height: 0;
            background: transparent;
        }
        .form-modal input:focus,
        .form-modal select:focus,
        .form-modal textarea:focus {
            border-color: #854836;
            box-shadow:
                0 0 0 3px rgba(255, 178, 44, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.86);
        }
        .time-picker {
            position: relative;
        }
        .time-picker__native {
            position: absolute;
            width: 1px !important;
            height: 1px;
            min-height: 1px !important;
            padding: 0 !important;
            opacity: 0;
            pointer-events: none;
        }
        .time-picker__trigger {
            width: 100%;
            min-height: 42px;
            border: 1px solid rgba(133, 72, 54, 0.28);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.76);
            color: #854836;
            font: 400 13px/1.35 Manrope, system-ui, sans-serif;
            padding: 10px 38px 10px 12px;
            text-align: left;
            cursor: pointer;
            outline: none;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
        }
        .time-picker__trigger::after {
            content: "";
            position: absolute;
            right: 14px;
            top: 50%;
            width: 8px;
            height: 8px;
            border-right: 1.5px solid #854836;
            border-bottom: 1.5px solid #854836;
            transform: translateY(-65%) rotate(45deg);
            transition: transform 160ms ease;
        }
        .time-picker.is-open .time-picker__trigger,
        .time-picker__trigger:focus-visible {
            border-color: #854836;
            box-shadow:
                0 0 0 3px rgba(255, 178, 44, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.86);
        }
        .time-picker.is-open .time-picker__trigger::after {
            transform: translateY(-35%) rotate(225deg);
        }
        .time-picker__menu {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(100% + 6px);
            z-index: 6;
            max-height: 154px;
            overflow-y: auto;
            padding: 6px;
            border: 1px solid rgba(133, 72, 54, 0.28);
            border-radius: 14px;
            background: rgba(255, 251, 244, 0.98);
            box-shadow: 0 18px 38px rgba(61, 33, 25, 0.18);
            scroll-snap-type: y proximity;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .time-picker__menu::-webkit-scrollbar,
        .time-picker__menu::-webkit-scrollbar-button,
        .time-picker__menu::-webkit-scrollbar-track,
        .time-picker__menu::-webkit-scrollbar-thumb {
            display: none;
            width: 0;
            height: 0;
            background: transparent;
        }
        .time-picker__menu button {
            width: 100%;
            min-height: 34px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: #854836;
            font: 500 13px/1 Manrope, system-ui, sans-serif;
            text-align: center;
            cursor: pointer;
            scroll-snap-align: center;
        }
        .time-picker__menu button:hover,
        .time-picker__menu button:focus-visible,
        .time-picker__menu button.is-selected {
            background: rgba(255, 178, 44, 0.14);
            outline: none;
        }
        .form-modal__actions {
            display: grid;
            grid-template-columns: 0.8fr 1.2fr;
            gap: 10px;
        }
        .form-modal__secondary,
        .form-modal__primary {
            min-height: 42px;
            border-radius: 12px;
            font: 700 12px/1 Manrope, system-ui, sans-serif;
            cursor: pointer;
        }
        .form-modal__secondary {
            border: 1px solid rgba(133, 72, 54, 0.28);
            background: rgba(255, 255, 255, 0.54);
            color: #5f3024;
        }
        .form-modal__primary {
            border: 1px solid rgba(255, 178, 44, 0.42);
            background: linear-gradient(145deg, #854836 0%, #5f3024 62%, #3d2119 100%);
            color: #fff7e8;
            box-shadow: 0 12px 28px rgba(133, 72, 54, 0.22);
        }
        .form-modal__secondary:hover,
        .form-modal__primary:hover {
            transform: translateY(-1px);
        }
        body.is-modal-open {
            overflow: hidden;
        }
        @media (max-width: 520px) {
            .form-modal {
                align-items: center;
                justify-items: center;
                padding: 14px;
            }
            .form-modal__panel {
                width: 100%;
                max-height: calc(100vh - 28px);
                padding: 20px 16px 18px;
            }
            .form-modal__row,
            .form-modal__actions {
                grid-template-columns: 1fr;
            }
        }

        /* Typography consistency pass: body/supporting text regular, headings only moderately bold. */
        body,
        main,
        footer,
        .font-body-lg,
        .academy-text,
        .review-cta-copy,
        .visit-note-body,
        .form-modal input,
        .form-modal select,
        .form-modal textarea {
            font-weight: 400 !important;
        }

        main .text-on-surface-variant,
        .text-on-surface-variant {
            font-weight: 400 !important;
        }

        main .text-primary,
        main .text-primary\/60,
        main .text-primary-container,
        main .text-secondary-container,
        main .text-tertiary-fixed-dim,
        main .text-surface-variant,
        .text-primary,
        .text-primary-container,
        .text-secondary-container,
        .text-tertiary-fixed-dim,
        .text-surface-variant {
            font-weight: 500 !important;
        }

        .font-label-mono,
        .font-bold,
        header .font-label-mono,
        header .text-\[10px\],
        footer .font-bold,
        footer .text-\[9px\],
        .review-cta-kicker,
        .visit-note-kicker,
        .visit-note-subline,
        .open-status-subheading,
        .mobile-switcher a,
        .form-modal label,
        .form-modal__kicker {
            font-weight: 500 !important;
        }

        h1.script-heading,
        main .script-heading,
        main h1.script-heading,
        main .text-xl.script-heading,
        main .font-display-lg-mobile,
        main .font-headline-md,
        .script-heading,
        .focus-script,
        .visit-note-quote,
        .review-cta-title,
        .academy-title,
        .form-modal__header h2 {
            font-weight: 600 !important;
        }

        .visit-note-quote,
        main .focus-script,
        main > .grid > .identity-card .script-heading,
        main > .grid > a.quick-action-card .script-heading,
        main > .grid > a.review-cta-card .review-cta-title {
            font-weight: 400 !important;
            font-synthesis: none !important;
            -webkit-text-stroke: 0 !important;
            text-shadow: none !important;
        }

        main > .grid > a.bg-primary.quick-action-card .script-heading,
        main > .grid > a.review-cta-card .review-cta-title {
            text-shadow: 0 1px 6px rgba(61, 33, 25, 0.18) !important;
        }

        .academy-title-script,
        .academy-title-main,
        .academy-title-main strong {
            font-weight: 500 !important;
        }

        .academy-button,
        .academy-link,
        .form-modal__secondary,
        .form-modal__primary,
        footer a {
            font-weight: 600 !important;
        }

        .form-modal textarea {
            resize: none !important;
            overflow: hidden !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

        .form-modal textarea::-webkit-scrollbar,
        .form-modal textarea::-webkit-scrollbar-button,
        .form-modal textarea::-webkit-resizer,
        .time-picker__menu::-webkit-scrollbar,
        .time-picker__menu::-webkit-scrollbar-button,
        .time-picker__menu::-webkit-scrollbar-track,
        .time-picker__menu::-webkit-scrollbar-thumb {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }

        body::before,
        body::after,
        main::after {
            content: none !important;
            display: none !important;
            filter: none !important;
        }

        nav.md\:hidden,
        .warm-note-bg {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .page-panel {
            filter: none !important;
        }

        @keyframes pageReveal {
            from {
                opacity: 0;
                transform: translateY(8px);
                filter: none;
            }
            to {
                opacity: 1;
                transform: translateY(0);
                filter: none;
            }
        }

        @media (min-width: 1024px) {
            .page-panel[data-page-panel="barbershop"] > main {
                width: min(100% - 64px, 1180px) !important;
                max-width: 1180px !important;
                padding-top: 36px !important;
                padding-bottom: 44px !important;
            }

            main > .grid {
                gap: 16px !important;
                align-items: stretch !important;
                grid-auto-rows: minmax(128px, auto);
            }

            main > .grid > .rounded-xl,
            main > .grid > a.rounded-xl {
                border-radius: 22px !important;
                min-height: 128px;
            }

            main > .grid > .identity-card {
                min-height: 176px;
                padding: 22px !important;
            }

            main > .grid > .identity-card .identity-logo-frame {
                width: 84px !important;
                height: 84px !important;
            }

            main > .grid > .identity-card h1 {
                font-size: clamp(34px, 3vw, 46px) !important;
                line-height: 0.9 !important;
            }

            main .focus-script {
                font-size: clamp(28px, 2.2vw, 36px) !important;
            }

            .visit-note-content {
                min-height: 156px !important;
            }

            .visit-note-quote {
                font-size: clamp(32px, 2.8vw, 44px) !important;
                line-height: 0.9 !important;
            }

            .quick-action-card {
                min-height: 132px;
            }

            .review-cta-card {
                min-height: 116px;
                padding: 22px 24px !important;
            }

            .review-cta-title {
                font-size: clamp(34px, 2.7vw, 44px) !important;
                line-height: 0.95 !important;
            }
        }

        @media (max-width: 520px) {
            .page-panel[data-page-panel="barbershop"] > main {
                width: 100% !important;
                max-width: 430px !important;
                padding-inline: 16px !important;
            }

            main > .grid {
                gap: 12px !important;
            }

            main > .grid > .rounded-xl,
            main > .grid > a.rounded-xl {
                border-radius: 18px !important;
            }

            .review-cta-card {
                min-height: 96px;
            }
        }

.quick-action-card--primary { box-shadow: 0 0 0 3px #102653, 0 14px 28px rgba(16,38,83,.26) !important; }
.authentic-media-card { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 20px; padding: 22px; border: 1px solid rgba(16,38,83,.26); border-radius: 22px; background: #f7fbff; color: #102653; }
.authentic-media-card h2 { margin: 6px 0; font-size: clamp(22px,3vw,32px); line-height: 1; }
.authentic-media-card p { margin: 0; color: #163b8a; line-height: 1.5; }
.authentic-media-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.authentic-media-slots figure { margin: 0; }
.authentic-media-slots span { display: block; min-height: 96px; border: 2px dashed #2258c4; border-radius: 10px; background: repeating-linear-gradient(135deg,#e5f1ff 0 10px,#f7fbff 10px 20px); }
.authentic-media-slots figcaption { margin-top: 7px; color: #102653; font: 700 11px/1.35 Manrope,system-ui,sans-serif; }
.time-picker__status,.form-modal__status { min-height: 18px; margin: 8px 0 0; color: #163b8a; font: 600 11px/1.45 Manrope,system-ui,sans-serif; }
.form-modal__status.is-error { color: #b91c1c; }
.form-modal__status.is-success { color: #166534; }
.form-modal__error { margin-top: 2px; color: #b91c1c; font: 700 11px/1.35 Manrope,system-ui,sans-serif; }
.form-modal [aria-invalid="true"] { border-color: #b91c1c !important; box-shadow: 0 0 0 3px rgba(185,28,28,.14) !important; }
.form-modal__primary.is-loading { opacity: .72; cursor: progress; }
@media (max-width:700px) { .authentic-media-card { grid-template-columns:1fr; } }