:root {
    /* Enfinger logo — purple gradient (lavender → violet → royal) */
    --purple-900: #2E1065;
    --purple-800: #3D1175;
    --purple-700: #4A148C;
    --purple-600: #5B2D9E;
    --purple-500: #6B3FA8;
    --purple-400: #8B5FD4;
    --purple-300: #A87FE8;
    --purple-200: #D4B8FF;
    --purple-100: #E8DAFF;
    --purple-50: #F7F3FF;
    --white: #FFFFFF;

    /* Legacy scale names → logo purples */
    --brown-900: var(--purple-900);
    --brown-800: var(--purple-800);
    --brown-700: var(--purple-700);
    --brown-600: var(--purple-600);
    --brown-500: var(--purple-500);
    --brown-400: var(--purple-400);
    --brown-300: var(--purple-300);
    --cream-100: var(--white);
    --cream-200: var(--purple-50);
    --cream-300: var(--purple-100);
    --cream-400: #DDD0F5;

    /* Semantic tokens */
    --text: var(--purple-900);
    --text-muted: #5E4B7A;
    --text-soft: #7D6B96;
    --text-light: var(--white);
    --bg: var(--white);
    --bg-alt: var(--purple-50);
    --bg-card: var(--white);
    --bg-dark: var(--purple-800);
    --accent: var(--purple-600);
    --accent-soft: var(--purple-400);
    --accent-deep: var(--purple-800);

    /* Legacy aliases */
    --black: var(--purple-900);
    --ink: var(--purple-100);
    --graphite: var(--purple-800);
    --graphite-2: var(--purple-900);
    --silver: var(--text-muted);
    --silver-dim: var(--text-soft);
    --warm-white: var(--text-light);
    --gold: var(--accent);
    --gold-soft: var(--accent-soft);
    --gold-deep: var(--accent-deep);
    --line: rgba(46, 13, 92, .12);
    --glass: rgba(74, 20, 140, .05);
    --glass-2: rgba(74, 20, 140, .09);
    --blur: 20px;
    --grad-brand: linear-gradient(180deg, var(--purple-200) 0%, var(--purple-500) 48%, var(--purple-800) 100%);
    --grad-btn: linear-gradient(135deg, var(--purple-400), var(--purple-700));
    --disp: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --body: 'DM Sans', 'Open Sans', system-ui, sans-serif;
}

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

body {
    font-family: var(--body);
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

::selection {
    background: var(--accent);
    color: var(--text-light);
}

 a {
     color: inherit;
     text-decoration: none
 }

 img {
     display: block;
     max-width: 100%
 }

 /* ---------- Atmospheric backdrop ---------- */
 .grain {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     opacity: .04;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }

 .aura {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
 }

 .aura:before {
     content: "";
     position: absolute;
     width: 60vw;
     height: 60vw;
     left: -15vw;
     top: -20vw;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(139, 95, 212, .14), transparent 60%);
     filter: blur(40px);
 }

 .aura:after {
     content: "";
     position: absolute;
     width: 55vw;
     height: 55vw;
     right: -20vw;
     bottom: -10vw;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(168, 127, 232, .12), transparent 60%);
     filter: blur(40px);
 }

 .wrap {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 32px;
     position: relative;
     z-index: 2
 }

 /* ---------- metallic helpers ---------- */
 .brushed {
     background:
         repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
         linear-gradient(120deg, #2a2c31, #4b4e56 30%, #1a1b1f 55%, #3a3d44 78%, #222428);
 }

 .brushed-v {
     background:
         repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
         linear-gradient(180deg, #1c1d21, #4a4d55 40%, #202126 72%, #3b3e45);
 }

 .gold-grad {
     background: var(--grad-brand);
 }

 /* ---------- NAV ---------- */
 nav {
     position: fixed;
     top: 18px;
     left: 0;
     right: 0;
     z-index: 50;
     display: flex;
     justify-content: center;
     transition: .4s;
 }

 .nav-inner {
     width: min(1280px, calc(100% - 36px));
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 13px 16px 13px 22px;
     border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--line);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: 0 20px 50px -25px rgba(46, 13, 92, .14);
 }

 .brand {
     display: flex;
     align-items: center;
     flex: 0 0 auto
 }

 .brand-logo {
     display: block;
     height: 82px;
     width: auto;
     max-width: min(160px, 42vw);
    border-radius: 8px;
    background: transparent;
    padding: 0;
    box-shadow: none;
     object-fit: contain;
 }

 .brand-logo--foot {
     height: 58px
 }

 .nav-links {
     display: flex;
     gap: 30px;
     align-items: center;
     font-size: .85rem;
     font-weight: 500;
    color: var(--text-muted)
}

.nav-links a {
    position: relative;
    transition: .25s
}

.nav-links a:hover {
    color: var(--text)
}

 .nav-links a:after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -6px;
     height: 1px;
     width: 0;
     background: var(--gold);
     transition: .3s
 }

 .nav-links a:hover:after {
     width: 100%
 }

 .nav-cta {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     padding: 11px 18px;
     border-radius: 12px;
     font-weight: 600;
     font-size: .85rem;
    color: var(--text-light);
    background-image: var(--grad-btn);
    transition: .3s;
    white-space: nowrap;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(91, 45, 158, .4)
}

 .nav-cta svg {
     width: 15px;
     height: 15px
 }

 .burger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 6px
 }

 .burger span {
     width: 24px;
     height: 2px;
     background: var(--text);
     transition: .3s
 }

 /* ---------- HERO — salon overlap layout ---------- */
 .hero {
     position: relative;
     padding: clamp(140px, 13vh, 168px) 0 clamp(64px, 7vh, 88px);
     min-height: 100vh;
     display: flex;
     align-items: stretch;
     overflow: hidden;
 }

 .hero-grid {
     position: absolute;
     inset: 0;
     z-index: 1;
     pointer-events: none;
     background-image:
         linear-gradient(var(--line) 1px, transparent 1px),
         linear-gradient(90deg, var(--line) 1px, transparent 1px);
     background-size: 72px 72px;
     -webkit-mask-image: radial-gradient(ellipse 90% 80% at 68% 38%, #000 0%, transparent 72%);
     mask-image: radial-gradient(ellipse 90% 80% at 68% 38%, #000 0%, transparent 72%);
     opacity: .7;
 }

 .hero-vein {
     position: absolute;
     z-index: 2;
     inset: 0;
     pointer-events: none;
     background:
         linear-gradient(128deg, transparent 46%, rgba(107, 63, 168, .06) 49.5%, rgba(107, 63, 168, .14) 50%, transparent 53.5%),
         linear-gradient(168deg, transparent 62%, rgba(46, 13, 92, .04) 100%);
 }

 .hero-vein::before {
     content: "";
     position: absolute;
     left: 38%;
     top: 18%;
     width: 1px;
     height: min(68vh, 620px);
     background: linear-gradient(180deg, transparent, var(--gold) 22%, rgba(107, 63, 168, .25) 78%, transparent);
     transform: rotate(-14deg);
     transform-origin: top center;
     opacity: .45;
 }

 .hero-watermark {
     position: absolute;
     left: clamp(12px, 2.5vw, 32px);
     top: clamp(108px, 14vh, 152px);
     z-index: 3;
     font-family: var(--disp);
     font-size: clamp(5rem, 12vw, 10rem);
     font-weight: 700;
     line-height: .85;
     letter-spacing: -.05em;
     color: transparent;
     -webkit-text-stroke: 1px rgba(46, 13, 92, .07);
     pointer-events: none;
     user-select: none;
 }

 .hero-salon {
     position: relative;
     z-index: 5;
     width: 100%;
     display: grid;
     grid-template-columns: repeat(12, minmax(0, 1fr));
     grid-template-rows: 1fr auto;
     column-gap: clamp(12px, 1.8vw, 28px);
     row-gap: 0;
     min-height: calc(100vh - clamp(188px, 20vh, 228px));
     align-items: stretch;
 }

 .hero-manifest {
     grid-column: 1 / 8;
     grid-row: 1;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     align-self: stretch;
     padding: 0 clamp(0px, 2vw, 24px) clamp(20px, 3vh, 40px) 0;
     max-width: 36rem;
     z-index: 12;
 }

 .hero-focus {
     grid-column: 5 / 13;
     grid-row: 1;
     align-self: stretch;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     min-height: 0;
     padding: 0 0 clamp(20px, 3vh, 40px);
     z-index: 8;
     pointer-events: none;
 }

 .hero-focus-stage {
     position: relative;
     flex: 1 1 auto;
     width: 100%;
     height: 100%;
     min-height: clamp(340px, 48vh, 520px);
     max-height: min(68vh, 600px);
     display: flex;
     align-items: stretch;
     justify-content: flex-end;
 }

 .hero-focus-visual {
     position: relative;
     width: 100%;
     height: 100%;
     max-width: 100%;
     --hero-cut: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
     --hero-inset-l: 7%;
 }

 .hero-focus-panel {
     position: absolute;
     inset: 0;
     z-index: 0;
     background:
         linear-gradient(155deg, rgba(255, 255, 255, .98) 0%, rgba(232, 218, 255, .78) 48%, rgba(212, 184, 255, .5) 100%);
     border: 1px solid rgba(107, 63, 168, .16);
     box-shadow:
         inset 0 1px 0 rgba(255, 255, 255, .9),
         -20px 32px 64px -36px rgba(46, 13, 92, .22);
     clip-path: var(--hero-cut);
 }

 .hero-ledger {
     grid-column: 1 / -1;
     grid-row: 2;
     display: grid;
     grid-template-columns: auto 1fr;
     align-items: center;
     gap: clamp(20px, 3vw, 40px);
     padding: clamp(22px, 3vh, 32px) 0 4px;
     border-top: 1px solid var(--line);
     z-index: 14;
 }

 .hero-ledger-cap {
     font-size: .62rem;
     letter-spacing: .34em;
     text-transform: uppercase;
     color: var(--silver-dim);
     font-weight: 600;
     white-space: nowrap;
     padding-right: 8px;
     border-right: 1px solid var(--line);
 }

 .hero-ledger-track {
     display: flex;
     flex-wrap: wrap;
     gap: 10px 12px;
     align-items: center;
 }

 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     font-size: .72rem;
     letter-spacing: .32em;
     text-transform: uppercase;
     color: var(--gold);
     font-weight: 600;
     margin-bottom: 26px;
 }

 .eyebrow:before {
     content: "";
     width: 38px;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold))
 }

 .eyebrow--salon {
     margin-bottom: clamp(20px, 3vh, 30px);
 }

 .eyebrow--salon::after {
     content: "";
     width: 1px;
     height: 32px;
     background: linear-gradient(180deg, var(--gold), transparent);
     margin-left: 6px;
 }

 .hero h1 {
     font-family: var(--disp);
     font-weight: 700;
     letter-spacing: -.035em;
     line-height: .88;
     font-size: clamp(2.65rem, 5.4vw, 5.25rem);
     position: relative;
     z-index: 6;
 }

 .hero h1 .l1 {
     display: block;
     color: var(--text);
     font-size: .42em;
     letter-spacing: .28em;
     text-transform: uppercase;
     font-weight: 600;
     margin-bottom: .35em;
     opacity: .88;
 }

 .hero h1 .l2 {
     display: block;
     max-width: 9.5ch;
     padding-bottom: .06em;
     border-bottom: 2px solid rgba(107, 63, 168, .35);
 }

 .hero h1 .l2 em {
     font-style: normal;
     background: var(--grad-brand);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .hero h1 .l3 {
     display: block;
     font-size: clamp(.92rem, 1.25vw, 1.08rem);
     font-weight: 400;
     letter-spacing: .01em;
     line-height: 1.5;
     color: var(--silver);
     margin-top: 1.15em;
     max-width: 30ch;
     padding-left: clamp(12px, 2vw, 28px);
     border-left: 1px solid var(--line);
 }

 .hero-sub {
     max-width: 42ch;
     margin: 28px 0 0;
     color: var(--text-muted);
     font-size: 1.05rem;
     position: relative;
     z-index: 6;
 }

 .hero-cta {
     display: flex;
     gap: 14px;
     margin-top: 36px;
     flex-wrap: wrap;
     position: relative;
     z-index: 6;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 11px;
     padding: 16px 26px;
     border-radius: 14px;
     font-weight: 600;
     font-size: .95rem;
     transition: .32s cubic-bezier(.2, .7, .3, 1);
     cursor: pointer;
     border: 1px solid transparent;
 }

.btn-gold {
    color: var(--text-light);
    background-image: var(--grad-btn);
    box-shadow: 0 16px 40px -18px rgba(91, 45, 158, .38)
}

.btn-gold:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 22px 50px -16px rgba(91, 45, 158, .48)
}

.btn-ghost {
    color: var(--text);
    background: var(--bg-card);
    border-color: var(--line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.btn-ghost:hover {
    border-color: var(--gold);
    color: var(--accent-deep);
    transform: translateY(-3px)
}

 .btn svg {
     width: 17px;
     height: 17px
 }

 .chip {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     padding: 10px 16px;
     border-radius: 40px;
     font-size: .82rem;
     font-weight: 500;
     color: var(--text-muted);
     background: var(--bg-card);
     border: 1px solid var(--line);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
 }

 .chip--ledger {
     border-radius: 2px;
     padding: 10px 15px 10px 13px;
     font-size: .76rem;
     letter-spacing: .05em;
     background: rgba(247, 243, 255, .85);
     border-color: rgba(107, 63, 168, .18);
 }

 .chip i {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--gold);
     box-shadow: 0 0 12px var(--gold);
     flex-shrink: 0;
 }

 /* focus slab — aligned to panel */
 .hero-slab {
     position: absolute;
     inset: 0;
     left: var(--hero-inset-l);
     right: 0;
     width: auto;
     height: 100%;
     margin: 0;
     transform: none;
     transform-origin: center center;
     z-index: 1;
     border: none;
     background: var(--purple-900);
     box-shadow:
         -24px 32px 72px -34px rgba(46, 13, 92, .36),
         0 0 0 1px rgba(107, 63, 168, .22),
         inset 0 0 0 1px rgba(255, 255, 255, .1);
     overflow: hidden;
     will-change: transform;
     clip-path: var(--hero-cut);
 }

 .hero-slab img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center center;
     display: block;
     filter: contrast(1.05) saturate(.9) brightness(.98);
 }

 .hero-slab::after {
     content: "";
     position: absolute;
     inset: 0;
     background:
         linear-gradient(105deg, rgba(255, 255, 255, .18) 0%, transparent 32%),
         linear-gradient(200deg, transparent 55%, rgba(46, 13, 92, .28) 100%);
     pointer-events: none;
 }

 .slab-edge {
     position: absolute;
     z-index: 2;
     pointer-events: none;
     background: var(--gold);
 }

 .slab-edge--a {
     left: 10%;
     top: 0;
     width: 1px;
     height: 100%;
     opacity: .5;
 }

 .slab-edge--b {
     right: 10%;
     bottom: 0;
     width: 40%;
     height: 1px;
     opacity: .45;
 }

 .hero-plaque {
     position: absolute;
     left: calc(var(--hero-inset-l) - 2%);
     bottom: 11%;
     z-index: 3;
     display: flex;
     align-items: stretch;
     min-width: 0;
     width: min(100%, 280px);
     background: rgba(46, 13, 92, .97);
     border: 1px solid rgba(168, 127, 232, .28);
     box-shadow: 0 24px 56px -28px rgba(46, 13, 92, .55);
     will-change: transform;
     transform-origin: center center;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%);
 }

 .hero-plaque-num {
     font-family: var(--disp);
     font-weight: 700;
     font-size: clamp(2rem, 3.2vw, 2.35rem);
     line-height: 1;
     color: var(--purple-200);
     padding: 16px 18px;
     border-right: 1px solid rgba(255, 255, 255, .14);
     display: flex;
     align-items: center;
     flex-shrink: 0;
 }

 .hero-plaque-copy {
     padding: 14px 16px 14px 14px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 3px;
     min-width: 0;
 }

 .hero-plaque-lbl {
     font-size: .66rem;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .58);
 }

 .hero-plaque-stars {
     color: var(--gold);
     letter-spacing: 2px;
     font-size: .86rem;
 }

 .hero-plaque-copy p {
     font-size: .75rem;
     color: rgba(255, 255, 255, .8);
     margin: 4px 0 0;
     max-width: 18ch;
     line-height: 1.4;
 }

 .hero-signal {
     position: absolute;
     left: calc(var(--hero-inset-l) + 3%);
     top: 9%;
     z-index: 4;
     display: inline-flex;
     align-items: center;
     gap: 11px;
     padding: 10px 16px 10px 10px;
     background: rgba(255, 255, 255, .96);
     border: 1px solid rgba(107, 63, 168, .2);
     box-shadow: 0 14px 36px -22px rgba(46, 13, 92, .3);
     will-change: transform;
     transform-origin: center center;
     border-radius: 2px;
 }

 .hero-signal-icon {
     width: 36px;
     height: 36px;
     flex-shrink: 0;
     display: grid;
     place-items: center;
     background: var(--grad-btn);
     color: var(--white);
     border-radius: 2px;
 }

 .hero-signal-icon svg {
     width: 17px;
     height: 17px;
 }

 .hero-signal-text {
     display: flex;
     flex-direction: column;
     gap: 2px;
     font-size: .66rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--text-soft);
 }

 .hero-signal-text strong {
     font-size: .86rem;
     letter-spacing: .03em;
     text-transform: none;
     color: var(--text);
     font-weight: 700;
 }

 .scroll-hint {
     position: absolute;
     bottom: 30px;
     z-index: 6;
     font-size: .66rem;
     letter-spacing: .3em;
     text-transform: uppercase;
     color: var(--silver-dim);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
 }

 .scroll-hint--salon {
     left: auto;
     right: clamp(28px, 5vw, 56px);
     transform: none;
     align-items: flex-end;
 }

 .scroll-hint .ln {
     width: 1px;
     height: 40px;
     background: linear-gradient(var(--gold), transparent);
     animation: drop 2s infinite
 }

 @keyframes drop {
     0% {
         transform: scaleY(0);
         transform-origin: top
     }

     50% {
         transform: scaleY(1);
         transform-origin: top
     }

     50.1% {
         transform-origin: bottom
     }

     100% {
         transform: scaleY(0);
         transform-origin: bottom
     }
 }

 /* marquee divider */
.marquee {
    border-block: 1px solid var(--line);
    overflow: hidden;
    background: var(--bg-alt);
    padding: 18px 0;
    position: relative;
    z-index: 2
}

 .marquee .track {
     display: flex;
     gap: 60px;
     white-space: nowrap;
     animation: slide 28s linear infinite;
     width: max-content
 }

 .marquee span {
     font-family: var(--disp);
     font-size: 1.05rem;
     color: var(--silver-dim);
     letter-spacing: .04em;
     display: inline-flex;
     align-items: center;
     gap: 60px
 }

 .marquee span:before {
     content: "◆";
     color: var(--gold);
     font-size: .7rem
 }

 @keyframes slide {
     to {
         transform: translateX(-50%)
     }
 }

 /* ---------- section frame ---------- */
 section {
     position: relative;
     z-index: 2;
     padding: 120px 0
 }

 .tagline {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     font-size: .72rem;
     letter-spacing: .3em;
     text-transform: uppercase;
     color: var(--gold);
     font-weight: 600;
     margin-bottom: 22px
 }

 .tagline:before {
     content: "";
     width: 30px;
     height: 1px;
     background: var(--gold)
 }

.sec-h {
    font-family: var(--disp);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
    font-size: clamp(2.3rem, 5.5vw, 4.4rem);
    color: var(--text);
}

 .sec-h em {
     font-style: normal;
     background: linear-gradient(120deg, var(--gold-soft), var(--gold-deep));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent
 }

 /* ---------- ABOUT ---------- */
 .about {
     display: grid;
     grid-template-columns: 1.05fr .95fr;
     gap: 70px;
     align-items: center
 }

 .about-vis {
     position: relative;
     height: 480px
 }

 .about-vis .frame {
     position: absolute;
     border-radius: 20px;
     border: 1px solid var(--line);
     overflow: hidden;
     box-shadow: 0 40px 90px -45px rgba(0, 0, 0, .9);
     background: #101113
 }

 .about-vis .frame-img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover
 }

 .about-vis .f1 {
     inset: 0 28% 24% 0;
 }

 .about-vis .f1:after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
     pointer-events: none;
     background: linear-gradient(120deg, transparent, rgba(0, 0, 0, .35))
 }

 .about-vis .f2 {
     width: 46%;
     height: 54%;
     right: 0;
     top: 14%;
 }

 .about-vis .f2:after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
     pointer-events: none;
     background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .28))
 }

.about-vis .f3 {
    width: 200px;
    bottom: 0;
    left: 14%;
    padding: 22px;
    background: rgba(46, 13, 92, .88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--text-light);
}

 .about-vis .f3 .num {
     font-family: var(--disp);
     font-weight: 700;
     font-size: 3rem;
     line-height: 1;
     color: var(--gold-soft)
 }

.about-vis .f3 .cap {
    font-size: .74rem;
    color: rgba(255, 255, 255, .78);
    letter-spacing: .08em;
    margin-top: 4px
}

 .about-copy p {
     color: var(--silver);
     font-size: 1.08rem;
     margin-top: 26px;
     max-width: 46ch
 }

.about-copy .lead {
    color: var(--text);
    font-size: 1.32rem;
    line-height: 1.5;
    margin-top: 30px;
    max-width: 40ch
}

 .sig {
     margin-top: 34px;
     display: flex;
     align-items: center;
     gap: 16px
 }

 .sig .ln {
     width: 46px;
     height: 1px;
     background: var(--gold)
 }

 .sig b {
     font-family: var(--disp);
     font-size: 1.1rem
 }

 .sig span {
     font-size: .78rem;
     color: var(--silver-dim);
     letter-spacing: .12em;
     text-transform: uppercase
 }

 .stat-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     margin-top: 50px;
     background: var(--line);
     border: 1px solid var(--line);
     border-radius: 16px;
     overflow: hidden
 }

.stat-row .s {
    background: var(--bg-card);
    padding: 26px 24px
}

 .stat-row .s b {
     font-family: var(--disp);
     font-weight: 700;
     font-size: 2.2rem;
     color: var(--gold-soft);
     display: block
 }

 .stat-row .s span {
     font-size: .8rem;
     color: var(--silver-dim);
     letter-spacing: .06em
 }

 /* ---------- SERVICE AREAS ---------- */
.areas {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-alt)
}

 .areas-layout {
     display: grid;
     grid-template-columns: minmax(280px, 360px) 1fr;
     gap: 28px;
     align-items: stretch
 }

.areas-hub {
    position: relative;
    overflow: hidden;
    padding: 38px 32px;
    border-radius: 20px;
    background: linear-gradient(155deg, var(--purple-700) 0%, var(--purple-900) 55%, #1a0a3d 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 40px 90px -45px rgba(46, 13, 92, .35);
    color: var(--text-light);
}

 .areas-hub:after {
     content: "";
     position: absolute;
     width: 220px;
     height: 220px;
     border-radius: 50%;
     top: -70px;
     right: -70px;
     pointer-events: none;
     background: radial-gradient(circle, rgba(168, 127, 232, .18), transparent 70%);
 }

 .areas-hub-badge {
     display: inline-block;
     font-size: .62rem;
     letter-spacing: .28em;
     text-transform: uppercase;
     color: var(--gold-soft);
     font-weight: 600;
     margin-bottom: 18px;
     position: relative;
     z-index: 1;
 }

 .areas-hub h3 {
     font-family: var(--disp);
     font-weight: 700;
     font-size: clamp(2.4rem, 5vw, 3.6rem);
     line-height: .95;
     letter-spacing: -.02em;
     color: var(--warm-white);
     margin-bottom: 8px;
     position: relative;
     z-index: 1;
 }

.areas-hub-region {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.areas-hub p:last-of-type {
    font-size: .95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 26px;
    max-width: 34ch;
    position: relative;
    z-index: 1;
}

.areas-hub-cta {
    display: inline-block;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
    color: var(--text-light);
     transition: .3s;
     position: relative;
     z-index: 1;
 }

 .areas-hub-cta:hover {
     transform: translateY(-2px);
     filter: brightness(1.06)
 }

.areas-panel {
    padding: 30px 32px 34px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

 .areas-panel-head {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 10px;
     font-size: .62rem;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--gold-soft);
     font-weight: 600;
     margin-bottom: 22px;
     padding-bottom: 14px;
     border-bottom: 1px solid var(--line);
 }

 .areas-dot {
     color: var(--gold)
 }

 .areas-grid {
     list-style: none;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 10px
 }

 .areas-grid a {
     display: block;
     padding: 12px 14px;
     font-size: .78rem;
     font-weight: 500;
     letter-spacing: .04em;
     color: var(--silver);
     background: var(--glass);
     border: 1px solid var(--line);
     border-radius: 12px;
     transition: .25s;
 }

.areas-grid a:hover {
    color: var(--text);
    border-color: rgba(107, 63, 168, .45);
    background: var(--glass-2)
}

 /* ---------- SERVICES (bento) ---------- */
 .svc-head {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 30px;
     flex-wrap: wrap;
     margin-bottom: 54px
 }

 .svc-head p {
     color: var(--silver);
     max-width: 40ch
 }

 .bento {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-auto-rows: minmax(190px, auto);
     gap: 18px
 }

.tile {
    position: relative;
    border-radius: 20px;
    border: 1px solid var(--line);
    padding: 30px;
    overflow: hidden;
    background: var(--bg-card);
    transition: .4s cubic-bezier(.2, .7, .3, 1);
}

.tile:hover {
    transform: translateY(-6px);
    border-color: rgba(107, 63, 168, .45)
}

 .tile:hover .ico {
     background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep))
 }

 .tile:hover .ico svg {
     color: var(--black)
 }

.tile .ico {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--glass);
    border: 1px solid var(--line);
    transition: .4s;
    margin-bottom: auto
}

 .tile .ico svg {
     width: 24px;
     height: 24px;
     color: var(--gold);
     transition: .4s
 }

.tile h3 {
    font-family: var(--disp);
    font-weight: 600;
    font-size: 1.4rem;
    margin-top: 26px;
    color: var(--text)
}

 .tile p {
     color: var(--silver);
     font-size: .92rem;
     margin-top: 10px
 }

 .tile .num {
     position: absolute;
     top: 24px;
     right: 28px;
     font-family: var(--disp);
     font-size: .9rem;
     color: var(--silver-dim);
     letter-spacing: .1em
 }

 .tile.wide {
     grid-column: span 4
 }

 .tile.mid {
     grid-column: span 3
 }

 .tile.std {
     grid-column: span 2
 }

 .tile.tall {
     grid-row: span 2
 }

 /* feature tile with metallic texture */
.tile.feature {
    grid-column: span 3;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--text-light);
    background: linear-gradient(180deg, rgba(46, 13, 92, .15), rgba(46, 13, 92, .92)),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 7px),
        linear-gradient(125deg, var(--brown-600), var(--brown-800) 35%, var(--brown-900) 60%, var(--brown-700))
}

 .tile.feature .ico {
     margin-bottom: 0
 }

.tile.feature h3 {
    font-size: 2rem;
    color: var(--text-light)
}

.tile.feature .link {
    color: var(--accent-soft)
}

.tile.feature p {
    max-width: 34ch;
    font-size: 1rem;
    color: rgba(255, 255, 255, .82)
}

 .tile .link {
     margin-top: 18px;
     font-size: .84rem;
     font-weight: 600;
     color: var(--gold-soft);
     display: inline-flex;
     align-items: center;
     gap: 8px
 }

 .tile .link svg {
     width: 15px;
     height: 15px;
     transition: .3s
 }

 .tile:hover .link svg {
     transform: translateX(5px)
 }

 /* ---------- ADDITIONAL / SPECIALTY ---------- */
.add {
    background: var(--bg-alt)
}

 .add-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
     margin-top: 50px
 }

.add-card {
    padding: 26px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: .35s
}

.add-card:hover {
    transform: translateY(-5px);
    border-color: rgba(107, 63, 168, .4);
    background: var(--cream-100)
}

 .add-card .k {
     font-family: var(--disp);
     font-size: .85rem;
     color: var(--gold);
     letter-spacing: .1em
 }

.add-card h4 {
    font-family: var(--disp);
    font-weight: 600;
    font-size: 1.18rem;
    margin-top: 14px;
    color: var(--text)
}

 .add-card p {
     font-size: .86rem;
     color: var(--silver);
     margin-top: 8px
 }

 /* ---------- PROCESS ---------- */
 .proc {
     display: grid;
     grid-template-columns: .85fr 1.15fr;
     gap: 64px;
     align-items: start
 }

 .steps {
     display: flex;
     flex-direction: column;
     gap: 2px
 }

 .step {
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 24px;
     padding: 28px 4px;
     border-bottom: 1px solid var(--line);
     transition: .35s
 }

 .step:hover {
     padding-left: 18px
 }

 .step .n {
     font-family: var(--disp);
     font-weight: 700;
     font-size: 1.05rem;
     color: var(--gold);
     width: 54px;
     height: 54px;
     border-radius: 14px;
     display: grid;
     place-items: center;
     border: 1px solid var(--line);
     background: var(--glass)
 }

.step h4 {
    font-family: var(--disp);
    font-weight: 600;
    font-size: 1.32rem;
    color: var(--text)
}

 .step p {
     color: var(--silver);
     font-size: .95rem;
     margin-top: 7px;
     max-width: 42ch
 }

 /* ---------- CTA banner ---------- */
 .cta-band {
     position: relative;
     z-index: 2;
     padding: 0;
     margin: 30px 0
 }

.cta-inner {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(168, 127, 232, .35);
    padding: 78px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    color: var(--text-light);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(168, 127, 232, .24), transparent 50%),
        linear-gradient(125deg, var(--brown-800), var(--brown-900));
}

.cta-inner:before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--brown-600), var(--brown-900), var(--brown-500), var(--brown-800), var(--brown-700), var(--brown-900));
    opacity: .45;
    filter: blur(2px)
}

 .cta-inner:after {
     content: "";
     position: absolute;
     inset: 0;
     background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
     background-size: 48px 48px;
     -webkit-mask-image: radial-gradient(circle at 20% 50%, #000, transparent 70%);
     mask-image: radial-gradient(circle at 20% 50%, #000, transparent 70%)
 }

 .cta-txt {
     position: relative;
     z-index: 2;
     max-width: 30ch
 }

 .cta-txt h2 {
     font-family: var(--disp);
     font-weight: 700;
     font-size: clamp(2rem, 4.5vw, 3.4rem);
     line-height: 1.02;
     letter-spacing: -.02em
 }

.cta-txt p {
    color: rgba(255, 255, 255, .78);
    margin-top: 16px;
    font-size: 1.05rem
}

 .cta-act {
     position: relative;
     z-index: 2;
     display: flex;
     flex-direction: column;
     gap: 14px;
     align-items: flex-start
 }

 .cta-phone {
     font-family: var(--disp);
     font-weight: 700;
     font-size: 2rem;
     color: var(--gold-soft);
     display: flex;
     align-items: center;
     gap: 14px
 }

 .cta-phone svg {
     width: 26px;
     height: 26px
 }

 /* ---------- FAQ ---------- */
 .faq-wrap {
     display: grid;
     grid-template-columns: .8fr 1.2fr;
     gap: 60px;
     align-items: start
 }

 .faq-list {
     display: flex;
     flex-direction: column;
     gap: 14px
 }

.faq {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg-card);
    overflow: hidden;
    transition: .3s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.faq.open {
    border-color: rgba(107, 63, 168, .4);
    background: var(--cream-100)
}

.faq button {
    width: 100%;
    text-align: left;
    padding: 24px 26px;
    background: none;
    border: none;
    color: var(--text);
     font-family: var(--disp);
     font-weight: 500;
     font-size: 1.12rem;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     gap: 20px;
     align-items: center
 }

 .faq .ic {
     flex: 0 0 auto;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     border: 1px solid var(--gold);
     position: relative;
     transition: .3s
 }

 .faq .ic:before,
 .faq .ic:after {
     content: "";
     position: absolute;
     background: var(--gold);
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     transition: .3s
 }

 .faq .ic:before {
     width: 11px;
     height: 1.5px
 }

 .faq .ic:after {
     width: 1.5px;
     height: 11px
 }

 .faq.open .ic {
     background: var(--gold)
 }

.faq.open .ic:before,
.faq.open .ic:after {
    background: var(--text-light)
}

 .faq.open .ic:after {
     transform: translate(-50%, -50%) scaleY(0)
 }

 .faq .ans {
     max-height: 0;
     overflow: hidden;
     transition: max-height .4s ease
 }

 .faq .ans p {
     padding: 0 26px 26px;
     color: var(--silver);
     font-size: .96rem
 }

 /* ---------- CONTACT ---------- */
 .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px
 }

.contact-card {
    border-radius: 22px;
    border: 1px solid var(--line);
    padding: 42px;
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px)
}

 .ci {
     display: flex;
     gap: 18px;
     align-items: flex-start;
     padding: 20px 0;
     border-bottom: 1px solid var(--line)
 }

 .ci:last-child {
     border-bottom: none
 }

.ci .ix {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--glass);
    border: 1px solid var(--line)
}

 .ci .ix svg {
     width: 21px;
     height: 21px;
     color: var(--gold)
 }

 .ci .lab {
     font-size: .72rem;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--silver-dim)
 }

 .ci .val {
     font-family: var(--disp);
     font-size: 1.18rem;
     margin-top: 3px
 }

 .ci a.val:hover {
     color: var(--gold-soft)
 }

 .contact-map {
     position: relative;
     min-height: 520px;
     border-radius: 22px;
     border: 1px solid var(--line);
     overflow: hidden;
     background: var(--graphite);
     filter: grayscale(.35) contrast(1.05);
 }

 .contact-map iframe {
     width: 100%;
     height: 100%;
     border: 0;
     position: absolute;
     inset: 0;
     display: block
 }

 .contact-map:after {
     content: "";
     position: absolute;
     inset: 0;
     pointer-events: none;
    background: linear-gradient(120deg, rgba(46, 13, 92, .18), transparent 55%);
}

/* ---------- FOOTER ---------- */
footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line);
    padding: 80px 0 36px;
    margin-top: 40px;
    background: linear-gradient(180deg, var(--bg-alt), var(--cream-400));
    color: var(--text);
}

 .foot-top {
     display: grid;
     grid-template-columns: 1.6fr 1fr 1fr 1fr;
     gap: 40px;
     padding-bottom: 50px;
     border-bottom: 1px solid var(--line)
 }

 .foot-brand .brand {
     margin-bottom: 18px
 }

 .foot-brand p {
     color: var(--silver);
     max-width: 34ch;
     font-size: .92rem
 }

 .foot-col h5 {
     font-family: var(--disp);
     font-size: .78rem;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--gold);
     margin-bottom: 18px
 }

 .foot-col a,
 .foot-col p {
     display: block;
     color: var(--silver);
     font-size: .9rem;
     margin-bottom: 11px;
     transition: .25s
 }

.foot-col a:hover {
    color: var(--accent-deep);
    padding-left: 5px
}

 .foot-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 16px;
     padding-top: 28px;
     font-size: .82rem;
     color: var(--silver-dim)
 }

 .foot-bottom .socials {
     display: flex;
     gap: 12px
 }

 .foot-bottom .socials a {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     display: grid;
     place-items: center;
     border: 1px solid var(--line);
     transition: .3s
 }

 .foot-bottom .socials a:hover {
     border-color: var(--gold);
     background: var(--glass)
 }

 .foot-bottom .socials svg {
     width: 16px;
     height: 16px;
     color: var(--silver)
 }

 /* reveal */
 .reveal {
     opacity: 0;
     transform: translateY(34px);
     transition: .9s cubic-bezier(.16, .8, .3, 1)
 }

 .reveal.in {
     opacity: 1;
     transform: none
 }

 /* ---------- RESPONSIVE ---------- */
 @media(max-width:1024px) {
     .hero-watermark {
         display: none;
     }

     .hero-salon {
         grid-template-columns: 1fr;
         grid-template-rows: auto auto auto;
         min-height: auto;
         row-gap: 0;
     }

     .hero-manifest {
         grid-column: 1;
         grid-row: 2;
         align-self: auto;
         max-width: none;
         padding: 32px 0 0;
     }

     .hero-focus {
         grid-column: 1;
         grid-row: 1;
         padding: 0 0 16px;
         justify-content: flex-start;
     }

     .hero-focus-stage {
         min-height: clamp(300px, 52vw, 420px);
         max-height: none;
         justify-content: center;
     }

     .hero-focus-visual {
         --hero-cut: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
         --hero-inset-l: 5%;
     }

     .hero-plaque {
         left: 0;
         bottom: 9%;
         width: min(100%, 300px);
     }

     .hero-signal {
         left: 6%;
         top: 7%;
     }

     .hero-ledger {
         grid-column: 1;
         grid-row: 3;
         grid-template-columns: 1fr;
         gap: 14px;
         padding-top: 24px;
     }

     .hero-ledger-cap {
         border-right: none;
         padding-right: 0;
     }

     .hero h1 .l2 {
         max-width: none;
     }

     .hero h1 .l3 {
         padding-left: 16px;
     }

     .scroll-hint--salon {
         left: 50%;
         right: auto;
         transform: translateX(-50%);
         align-items: center;
     }

     .about {
         grid-template-columns: 1fr;
         gap: 48px
     }

     .about-vis {
         height: 380px
     }

     .proc {
         grid-template-columns: 1fr;
         gap: 40px
     }

     .faq-wrap {
         grid-template-columns: 1fr;
         gap: 36px
     }

     .tile.feature {
         grid-column: span 6;
         grid-row: span 1;
         min-height: 280px
     }

     .tile.wide,
     .tile.mid {
         grid-column: span 6
     }

     .tile.std {
         grid-column: span 3
     }

     .add-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .areas-layout {
         grid-template-columns: 1fr
     }

     .areas-grid {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 @media(max-width:760px) {
     .wrap {
         padding: 0 20px
     }

     .nav-links {
         display: none
     }

     .nav-cta {
         display: none
     }

     .burger {
         display: flex
     }

     .nav-inner.exp {
         flex-wrap: wrap
     }

     .mobile-menu {
         display: none;
         width: 100%;
         flex-direction: column;
         gap: 4px;
         margin-top: 14px;
         padding-top: 14px;
         border-top: 1px solid var(--line)
     }

     .mobile-menu.show {
         display: flex
     }

     .mobile-menu a {
         padding: 12px 6px;
         color: var(--silver);
         font-weight: 500
     }

     .mobile-menu .nav-cta {
         display: inline-flex;
         margin-top: 8px
     }

     section {
         padding: 80px 0
     }

     .hero {
         padding: 132px 0 64px;
         min-height: auto;
     }

     .hero-focus-stage {
         min-height: 280px;
     }

     .hero-focus-visual {
         --hero-inset-l: 4%;
     }

     .hero-plaque {
         left: 0;
         bottom: 8%;
         width: calc(100% - 20px);
         max-width: 300px;
     }

     .hero-plaque-num {
         padding: 14px 16px;
     }

     .hero-signal {
         left: 5%;
         top: 6%;
         padding: 9px 14px 9px 9px;
     }

     .hero-signal-icon {
         width: 32px;
         height: 32px;
     }

     .stat-row {
         grid-template-columns: 1fr
     }

     .bento {
         grid-template-columns: 1fr
     }

     .tile,
     .tile.wide,
     .tile.mid,
     .tile.std,
     .tile.feature {
         grid-column: auto;
         grid-row: auto
     }

     .add-grid {
         grid-template-columns: 1fr
     }

     .areas-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .areas-panel,
     .areas-hub {
         padding: 26px 22px
     }

     .contact-grid {
         grid-template-columns: 1fr
     }

     .cta-inner {
         padding: 48px 28px
     }

     .foot-top {
         grid-template-columns: 1fr 1fr
     }

     .foot-brand {
         grid-column: span 2
     }

     .scroll-hint {
         display: none
     }
 }