:root{--brown:#5b4030;--gold:#a97b59;--cream:#f8f3ed;--paper:#fffdf9;--line:#e7d9cd;--ink:#302720}
.about-page{background:#fff;color:var(--ink)}
.about-hero{background:linear-gradient(90deg,#f7efe7 0%,#fbf7f2 43%,#eee1d4 100%);overflow:hidden}
.about-hero-inner{
    width:100%;
    min-height:620px;
    display:grid;
    grid-template-columns:48% 52%;
    max-width:none;
    margin:0;
}.about-hero-copy{padding:78px 8% 55px 10%;display:flex;flex-direction:column;justify-content:center}
.about-kicker,.about-eyebrow{font:500 10px/1 "DM Sans",sans-serif;letter-spacing:4px;text-transform:uppercase;color:#9b6f50}
.about-hero h1{font:400 clamp(48px,5vw,76px)/.98 "Playfair Display",serif;margin:20px 0;color:#4b3427}
.about-hero-lead{font:400 14px/1.75 "DM Sans",sans-serif;color:#665a52;max-width:560px}
.about-script{font:400 42px/1 "Allura",cursive;color:#9d7152;margin-top:26px;transform:rotate(-3deg);width:max-content}
.about-hero-photo{
    position:relative;
    min-height:620px;
    overflow:hidden;
}.about-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.about-hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,243,237,.38),transparent 28%)}

.about-stats{background:#fffaf5;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-stats-inner{max-width:1350px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:28px 24px}
.about-stat{text-align:center;padding:14px 28px;position:relative}
.about-stat:not(:last-child):after{content:"";position:absolute;right:0;top:8%;height:84%;width:1px;background:var(--line)}
.about-stat svg{width:32px;height:32px;fill:none;stroke:#9a6d4c;stroke-width:1.3;margin-bottom:9px}
.about-stat strong{display:block;font:400 31px/1 "Playfair Display",serif;color:#654936}
.about-stat b{display:block;margin-top:8px;font:500 9px/1.4 "DM Sans",sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:#825f49}
.about-stat p{font:400 11px/1.5 "DM Sans",sans-serif;color:#80736b;margin:7px auto 0;max-width:210px}

.about-story{display:grid;grid-template-columns:1fr 1.05fr 1fr;max-width:1450px;margin:auto;min-height:520px}
.about-story-image{overflow:hidden;min-height:520px}
.about-story-image img{width:100%;height:100%;object-fit:cover;display:block}
.about-story-copy{padding:64px 9%;display:flex;flex-direction:column;justify-content:center;background:#fffdf9}
.about-story-copy h2{font:400 clamp(38px,4vw,57px)/.98 "Playfair Display",serif;color:#4d372a;margin:16px 0 24px}
.about-story-copy p{font:400 13px/1.75 "DM Sans",sans-serif;color:#71655d;margin:0 0 14px}
.about-story-copy .about-script{font-size:36px;margin-top:14px}

.about-proof{background:linear-gradient(135deg,#725039,#9a6f4e);color:#fff}
.about-proof-inner{max-width:1400px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:32px 28px}
.about-proof-item{padding:0 28px;display:flex;gap:15px;align-items:flex-start}
.about-proof-item svg{width:34px;height:34px;flex:0 0 auto;fill:none;stroke:#f3dfce;stroke-width:1.2}
.about-proof-item b{font:500 10px/1.3 "DM Sans",sans-serif;letter-spacing:1.6px;text-transform:uppercase}
.about-proof-item p{font:300 10px/1.5 "DM Sans",sans-serif;color:#f0e4da;margin:5px 0 0}

.about-cta{text-align:center;padding:68px 20px 74px;background:#faf6f1}
.about-cta .about-eyebrow{display:block}
.about-cta h2{font:400 clamp(38px,4vw,56px)/1.05 "Playfair Display",serif;margin:14px 0;color:#493428}
.about-cta p{font:400 13px/1.7 "DM Sans",sans-serif;color:#756960;margin:0 auto 25px;max-width:590px}
.about-cta a{display:inline-flex;align-items:center;gap:28px;padding:14px 25px;border-radius:40px;background:#986b47;color:#fff;font:500 11px "DM Sans",sans-serif;letter-spacing:1px}

.about-bottom-nav{display:none}

@media(max-width:700px){
body{padding-bottom:70px}
.about-hero-inner{display:flex;flex-direction:column;min-height:0}
.about-hero-photo{order:1;min-height:310px;height:310px}
.about-hero-photo img{object-position:54% center}
.about-hero-photo:after{background:linear-gradient(0deg,rgba(248,243,237,.22),transparent 35%)}
.about-hero-copy{order:2;padding:35px 22px 34px}
.about-hero h1{font-size:42px;margin:14px 0 16px}
.about-hero-lead{font-size:12px;line-height:1.7}
.about-script{font-size:34px;margin-top:19px}
.about-stats-inner{grid-template-columns:1fr;padding:6px 22px}
.about-stat{display:grid;grid-template-columns:48px 1fr;text-align:left;padding:18px 0;border-bottom:1px solid var(--line)}
.about-stat:last-child{border-bottom:0}
.about-stat:not(:last-child):after{display:none}
.about-stat svg{grid-row:1/4;margin:2px 0 0;width:29px;height:29px}
.about-stat strong{font-size:22px}
.about-stat b{font-size:8px;margin-top:4px}
.about-stat p{font-size:10px;margin:3px 0 0;max-width:none}
.about-story{display:flex;flex-direction:column;min-height:0}
.about-story-image{min-height:290px;height:290px}
.about-story-image:last-child{display:none}
.about-story-copy{padding:42px 22px}
.about-story-copy h2{font-size:39px}
.about-story-copy p{font-size:12px}
.about-proof-inner{grid-template-columns:1fr 1fr;padding:27px 16px;gap:25px 5px}
.about-proof-item{padding:0 9px;gap:10px}
.about-proof-item svg{width:27px;height:27px}
.about-proof-item b{font-size:8px}
.about-proof-item p{font-size:8px}
.about-cta{
    padding:48px 22px 105px;
}.about-cta h2{font-size:39px}
.about-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:68px;background:rgba(255,252,248,.98);border-top:1px solid #eadfd5;z-index:9998;display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 -5px 22px rgba(70,48,33,.06)}
.about-bottom-nav>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#6d5c51;font:500 8px "DM Sans",sans-serif}
.about-bottom-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.about-bottom-nav .book{position:relative;padding-top:3px}
.about-bottom-nav .book i{width:48px;height:48px;margin-top:-24px;border:5px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#986b47;color:#fff;box-shadow:0 6px 18px rgba(78,52,36,.18)}
.about-bottom-nav .book svg{width:22px;height:22px}
}

/* =========================================================
   SANTE BEAUTY — Luxury motion & finishing
   ========================================================= */
.about-page{
    overflow:hidden;
}

.about-hero-photo img{
    transform:none;
    animation:santeHeroFade 1.2s ease both;
}

@keyframes santeHeroFade{
    from{
        opacity:.7;
    }
    to{
        opacity:1;
    }
}
.about-hero-photo::before{
    content:"";
    position:absolute;
    inset:-30% auto -30% -25%;
    width:28%;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
    transform:skewX(-18deg);
    animation:santeGlow 6.5s ease-in-out 1.1s infinite;
}
@keyframes santeGlow{
    0%,58%{left:-35%;opacity:0}
    64%{opacity:.75}
    82%{left:120%;opacity:0}
    100%{left:120%;opacity:0}
}

.about-stat,
.about-proof-item{
    transition:transform .35s ease, opacity .35s ease;
}
.about-stat:hover{
    transform:translateY(-4px);
}
.about-proof-item:hover{
    transform:translateY(-3px);
}



.about-cta a{
    position:relative;
    overflow:hidden;
    transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
    box-shadow:0 10px 30px rgba(105,72,49,.13);
}
.about-cta a::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-45%;
    width:28%;
    height:200%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
    transform:skewX(-18deg);
    transition:left .65s ease;
}
.about-cta a:hover{
    transform:translateY(-2px);
    background:#865c3e;
    box-shadow:0 14px 36px rgba(105,72,49,.20);
}
.about-cta a:hover::before{left:125%}


.philosophy-title span{
    display:block;
}
/* ===== SANTE LUXURY SCROLL EFFECT ===== */

.sante-reveal{
    opacity:0;
    transform:translateY(30px);
    transition:
        opacity .9s cubic-bezier(.22,.61,.36,1),
        transform .9s cubic-bezier(.22,.61,.36,1);
}

.sante-reveal.sante-visible{
    opacity:1;
    transform:translateY(0);
}


/* Luxury image reveal */
.about-story-image{
    position:relative;
    overflow:hidden;
}

.about-story-image img{
    transform:scale(1.045);
    transition:
        transform 1.6s cubic-bezier(.22,.61,.36,1),
        filter 1.2s ease;
}

.about-story-image.sante-visible img{
    transform:scale(1);
}


/* Gold light passing over images */
.about-story-image::after{
    content:"";
    position:absolute;
    top:0;
    left:-80%;
    width:35%;
    height:100%;
    pointer-events:none;

    background:linear-gradient(
        105deg,
        transparent,
        rgba(255,245,225,.22),
        transparent
    );

    transform:skewX(-15deg);
}

.about-story-image.sante-visible::after{
    animation:santeImageLight 1.5s ease .35s forwards;
}

@keyframes santeImageLight{
    from{left:-80%}
    to{left:140%}
}


/* Elegant CTA button */
.about-cta a{
    box-shadow:
        0 12px 35px rgba(112,75,49,.16),
        inset 0 1px rgba(255,255,255,.18);
}

.about-cta a:hover{
    transform:translateY(-3px);
    box-shadow:
        0 18px 42px rgba(112,75,49,.25),
        inset 0 1px rgba(255,255,255,.22);
}


/* Very subtle luxury breathing on handwritten text */
.about-script{
    animation:santeScript 5s ease-in-out infinite;
}

@keyframes santeScript{
    0%,100%{
        opacity:.86;
        transform:rotate(-3deg) translateY(0);
    }
    50%{
        opacity:1;
        transform:rotate(-3deg) translateY(-2px);
    }
}


/* Mobile: effects softer */
@media(max-width:700px){
    .sante-reveal{
        transform:translateY(20px);
        transition-duration:.75s;
    }

    .about-story-image img{
        transform:scale(1.025);
    }

    .about-story-image.sante-visible img{
        transform:scale(1);
    }
}


/* Accessibility */
@media(prefers-reduced-motion:reduce){
    .sante-reveal{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
    }

    .about-story-image img,
    .about-script{
        transform:none!important;
        animation:none!important;
        transition:none!important;
    }

    .about-story-image::after{
        display:none;
    }
}