:root{
    --green:      rgb(26, 25, 25); /*#4A5B4E*/
    --green-deep: #000000; /*#232E26*/
    --panel-green-light: #56685A;
    --panel-green-dark:  #2E3A31;
    --gold-rgb:   201,162,39;   /* same color as --gold, written as raw numbers for use inside rgba() */
    --gold:       #C9A227;
    --gold-light: #fcdd8f;
    --gold-text:  #8A6A18;
    --champagne:  #f8f2ec; /*#f8ede2*/
    --blush:      #f6ddce;
    --ink:        #201C17;
    --white:      #FFFFFF;
    --black:      rgb(26, 25, 25);
    --metal:      rgb(185, 176, 156);

    --display: 'Roboto', arial, serif;
    --body:    'Roboto', arial, sans-serif;

    /* ---------------------------------------------------------
       FONT SIZES — the "smaller text" scale
       ---------------------------------------------------------
       One variable per distinct small-text size used across the
       site, smallest to largest. Bump any of these up (or down)
       here and every place that uses it updates at once — no
       need to hunt through the file. Each comment lists exactly
       which elements use that size, so you know what you're
       affecting before you change a number.
    --------------------------------------------------------- */
    --fs-bottom-bar: .62rem;   /* bottom bar labels: Email / Call / Map / Hours */
    --fs-tiny-label: .7rem;    /* team member role labels (e.g. "Nail Artist") */
    --fs-label:      .72rem;   /* eyebrow labels, about-section stat labels, footer column headings */
    --fs-caption:    .75rem;   /* footer bottom bar (copyright line) */
    --fs-button:     .78rem;   /* button text, booking-page fallback links, hours popover rows */
    --fs-nav-drawer: .85rem;   /* mobile-style nav drawer links, the small "01/02/03" numbers on service cards */
    --fs-body-sm:    .9rem;    /* team member bios */
    --fs-body:       .92rem;   /* service card descriptions, footer paragraph text, footer links */
    --fs-body-lg:    .95rem;   /* hero intro paragraph, photo placeholder captions */
    --fs-md:         1rem;     /* section intro paragraphs (the text under each big section heading) */
    
    --ease: cubic-bezier(.4,0,.2,1);
}
/*    
    --display: 'Fraunces', serif;
    --body:    'Jost', sans-serif;
*/

/*
font sizes:
Eyebrow labels (.eyebrow) — .72rem (~11.5px)
Bottom bar labels (.bar-item) — .62rem (~10px)
Footer text/links — .92rem–.75rem
Service/team card descriptions — .9rem–.92rem
*/

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
    font-family:var(--body);
    background:var(--champagne); /*the backbround of the page*/
    color:var(--ink);
    line-height:1.75;
    font-weight:300;
    overflow-x:hidden;

    padding-top: 90px;   /* Height of the fixed nav */
    padding-bottom:76px;   /* reserves space for the fixed .bottom-bar, so it never covers the footer */
}

img{ width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }

::selection{ background:var(--gold-light); color:var(--ink); }

.eyebrow{
    font-family:var(--body);
    font-size:var(--fs-label); /*font-size:.72rem;*/
    font-weight:500;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--green-deep);
    display:inline-block;
    margin-bottom:18px;
}

a:focus-visible, button:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:4px;
}

.branch-divider{
    display:flex;
    justify-content:center;
    margin:0 auto;
    max-width:220px;
}
.branch-divider svg{ width:100%; height:auto; overflow:visible; }
.branch-divider path,
.branch-divider circle{
    stroke:var(--gold);
    fill:none;
    stroke-width:1.1;
}
.branch-divider circle{ fill:var(--gold); stroke:none; }

.reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

nav{
    position:fixed;
    width:100%;
    top:0; left:0;
    z-index:1000;
/* env(safe-area-inset-top, 0px) adds extra space on phones with a
       notch or "Dynamic Island" (like iPhones), so the logo/hamburger
       aren't tucked underneath it. The "0px" fallback keeps this
       harmless on browsers that don't support env(). */
    padding:calc(26px + env(safe-area-inset-top, 0px)) 6% 26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
    background: var(--white);   /* the stationary color of the top bar */
}

nav.scrolled{
    background:var(--white); /*background color of the top bar when scolling*/
    padding:14px 6%;
    box-shadow:0 8px 30px rgba(35,46,38,.08); /*shadow below bar*/
    backdrop-filter:blur(6px);
}

.logo{
    color:var(--green-deep); /*text in top bar stationary*/
    font-family:var(--display);
    /*font-style:italic;*/
    font-weight:500;
    font-size:2.1rem;
    letter-spacing:2px;
    transition:color .5s var(--ease);
}
.logo img{
    height:auto;      
    width: clamp(120px, 25vw, 220px); /* Adjust to desired size */
    display:block;
    transition:transform .3s ease;
}
.logo:hover img{
    transform:scale(1.03);
}



nav.scrolled .logo{ color:var(--green-deep); } /*--green-deep*/

/* This used to be a plain horizontal row of links on desktop,
   switching to a slide-out drawer only on mobile (via a
   @media query further down). Now it's ALWAYS the slide-out
   drawer, at every screen size — hidden off-screen to the
   right (translateX(100%)) until JavaScript adds the "open"
   class (see .nav-links.open below and the toggle-button
   click handler in the <script> at the bottom of the page). */
.nav-links{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw,340px);
    background:var(--green); /*--green-deep*/
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:60px 40px;
    gap:30px;
    transform:translateX(100%);
    transition:transform .5s var(--ease);
    z-index:1001;
}
.nav-links.open{ transform:translateX(0); }

.nav-links a{
    color:var(--champagne);   /* the drawer has a dark green background at every screen size now, so links are always light-colored, not just on mobile */
    font-size:var(--fs-nav-drawer); /*font-size:.85rem;*/
    letter-spacing:.22em;
    text-transform:uppercase;
    position:relative;
    padding-bottom:4px;
    transition:color .5s var(--ease);
}
nav.scrolled .nav-links a{ color:var(--champagne); }

.nav-links a::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:0; height:1px;
    background:var(--gold);
    transition:width .35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }

.nav-links a.nav-cta{
    border:1px solid var(--gold);
    padding:10px 22px;
    color:var(--champagne);
}
.nav-links a.nav-cta::after{ display:none; }
nav.scrolled .nav-links a.nav-cta{ color:var(--champagne); border-color:var(--gold); }

/* The hamburger button is now always visible (it used to be
   `display:none` until a mobile @media query turned it on) —
   it's the only way to open the nav at any screen size now. */
.nav-toggle{
    display:block;
    background:none;
    border:none;
    cursor:pointer;
    width:28px; height:20px;
    position:relative;
    z-index:1002;   /* stays above the drawer so it's still clickable to close it */
}
.nav-toggle span{
    position:absolute; left:0; width:100%; height:1px; background:var(--green-deep); /*color of the 3 lines when stationary --green-deep*/
    transition:background .4s;
}
nav.scrolled .nav-toggle span{ background:var(--green-deep); } /*green-deep 3 lines for links when scolling*/
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:18px; }

/* =========================================================
   TOP BANNER IMAGES
   ---------------------------------------------------------
   The two brand images, stacked full-width edge-to-edge at
   the very top of the page — outside of any padded/centered
   container, so nothing constrains their width. The global
   `img{width:100%;display:block;}` rule up top already makes
   any <img> fill its parent; since these images' parent is a
   plain, unpadded <section>, "fill their parent" means "fill
   the entire browser width."
   `line-height:0` on the wrapping section removes a few stray
   pixels of gap that browsers sometimes leave under images.
   margin-top:var(--nav-height, 0px)
========================================================= */
/* was --black for the original logo and -10px on margin-top*/
.top-banners{ background:var(--champagne); line-height:0; padding:0px; margin-top:0px; }
/* max width was 800px*/
.top-banners img{ max-width:1200px; margin:0 auto; }

/* =========================================================
   HERO CTA
   ---------------------------------------------------------
   The plain section directly below the two banner images:
   the "Santa Fe, New Mexico" caption, the services line, and
   the "Book Appointment" button.
========================================================= */
.hero-cta{
    text-align:center;
    padding:60px 8% 90px;
    background:var(--champagne); /*champagne color just below top png images*/
}
.hero-cta .eyebrow{ display:block; margin-bottom:16px; }
.hero-cta p{
    font-size:var(--fs-body-lg); /*font-size:.95rem;*/
    letter-spacing:.05em;
    color:rgba(32,28,23,.7);
    margin-bottom:34px;
}

/* Base button style, reused for every call-to-action on the
   page ("Book Appointment", "Book Online", etc). Variant classes
   below (.btn-solid, .btn-dark) tweak the coloring. */
.btn{
    display:inline-block;
    background:transparent;
    border:1px solid var(--gold);
    color:var(--white);
    padding:16px 44px;
    font-size:var(--fs-button); /*font-size:.78rem;*/
    letter-spacing:.22em;
    text-transform:uppercase;
    transition:.4s var(--ease);
    cursor:pointer;
}
.btn:hover{
    background:var(--gold);
    color:var(--green-deep);
    transform:translateY(-2px);
}
.btn-solid{
    background:var(--champagne); /*changes button color*/
    color:var(--green-deep); /*text color*/
    border-color:var(--gold);
}
.btn-solid:hover{
    background:var(--gold-light);
    border-color:var(--gold-light);
    color:var(--green-deep);
}
.btn-dark{ border-color:var(--green-deep); color:var(--green-deep); }
.btn-dark:hover{ background:var(--green-deep); color:var(--champagne); }

section{ padding:130px 8%; position:relative; }
.section-dark{ background:var(--green); color:var(--champagne); } /*--green-deep this is the text come sit with us*/
.section-dark .eyebrow{ color:var(--gold-light); }
.section-blush{ background:var(--blush); }

.section-title{ text-align:center; margin-bottom:78px; }
.section-title h2{
    font-family:var(--display);
    font-weight:500;
    font-size:clamp(2.4rem, 4.5vw, 3.6rem);
    margin:16px 0 22px;
}
.section-title p{
    max-width:600px;
    margin:0 auto;
    color:rgba(32,28,23,.65);
    font-size:var(--fs-md); /*font-size:1rem;*/
}
.section-dark .section-title p{ color:rgba(247,235,221,.68); }

.framed-panel{
    position:relative;
    border:1px solid var(--gold);
    padding:14px;
}
.framed-panel .panel-inner{
    aspect-ratio:4/5;
    background:
        radial-gradient(120% 100% at 20% 0%, rgba(var(--gold-rgb),.16), transparent 60%),
        linear-gradient(155deg, var(--panel-green-light) 0%, var(--panel-green-dark) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    box-shadow:inset 0 0 60px rgba(0,0,0,.28);
}
.framed-panel .panel-inner svg{ width:34%; opacity:.55; }
.framed-panel .panel-inner path,
.framed-panel .panel-inner circle{ stroke:var(--gold-light); fill:none; stroke-width:1; }
.panel-caption{
    text-align:center;
    font-family:var(--display);
    font-style:italic;
    font-size:var(--fs-body-lg); /*font-size:.95rem;*/
    color:rgba(32,28,23,.55);
    margin-top:16px;
}

.about{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:90px;
    align-items:center;
}

.about-text h3{
    font-family:var(--display);
    font-weight:500;
    font-style:italic;
    font-size:2.5rem;
    margin-bottom:24px;
    line-height:1.25;
}

.about-text p{
    margin-bottom:20px;
    color:rgba(32,28,23,.75);
    max-width:52ch;
}

.about-stats{
    display:flex;
    gap:50px;
    margin-top:40px;
    padding-top:36px;
    border-top:1px solid rgba(74,91,78,.25);
}
.about-stats div{ text-align:left; }
.about-stats strong{
    display:block;
    font-family:var(--display);
    font-size:2.2rem;
    color:var(--green);
}
.about-stats span{
    font-size:var(--fs-label); /*font-size:.72rem;*/
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(32,28,23,.55);
}

.services{ background:var(--champagne); } /*champagne behind service section*/

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1px;
    background:rgba(74,91,78,.22);
    border:1px solid rgba(74,91,78,.22);
}

.service-card{
    background:var(--white); /*champagne*/
    padding:52px 38px;
    text-align:left;
    transition:.45s var(--ease);
    position:relative;
}

.service-card:hover{
    background:var(--white); 
}

.service-icon{
    width:44px;
    height:44px;
    margin-bottom:26px;
}
.service-icon path,
.service-icon circle,
.service-icon ellipse,
.service-icon polygon {
    stroke:var(--gold);
    fill:none;
    stroke-width:1.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:stroke .4s;
}

.service-card h3{
    font-family:var(--display);
    font-style:italic;
    font-weight:500;
    font-size:1.7rem;
    margin-bottom:12px;
}

.service-card p{
    font-size:var(--fs-body); /*font-size:.92rem;*/
    color:rgba(32,28,23,.65);
}

.service-card .num{
    position:absolute;
    top:28px; right:30px;
    font-family:var(--display);
    font-size:var(--fs-nav-drawer); /*font-size:.85rem;*/
    color:rgba(74,91,78,.4);
}

.gallery-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}
.gallery-strip .framed-panel:nth-child(2){ margin-top:44px; }
.gallery-strip .framed-panel:nth-child(3){ margin-top:-44px; }



/* =========================================================
   TEAM PAGE
   ---------------------------------------------------------
   Styles specific to team.html: a simple header 
========================================================= */

.team{ background:var(--champagne); } 

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:60px;
}

.team-card{ text-align:center; }

.locket{
    width:190px;
    height:190px;
    border-radius:50%;
    margin:0 auto 26px;
    border:1px solid var(--gold);
    padding:8px;
}
.locket-inner{
    width:100%; height:100%;
    border-radius:50%;
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(var(--gold-rgb),.18), transparent 60%),
        linear-gradient(160deg, var(--panel-green-light), var(--panel-green-dark));
    display:flex;
    align-items:center;
    justify-content:center;
}
.locket-inner span{
    font-family:var(--display);
    font-style:italic;
    font-size:2rem;
    color:var(--gold-light);
}

.team-card h3{
    font-family:var(--display);
    font-weight:500;
    font-size:1.55rem;
}

.team-card .role{
    font-size:var(--fs-tiny-label); /*font-size:.7rem;*/
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--gold-text);
    display:block;
    margin:8px 0 14px;
}

.team-card p.bio{
    font-size:var(--fs-body-sm); /*font-size:.9rem;*/
    color:rgba(32,28,23,.6);
    max-width:32ch;
    margin:0 auto;
}

.cta{
    text-align:center;
}
.cta h2{
    font-family:var(--display);
    font-style:italic;
    font-weight:500;
    font-size:clamp(2.4rem, 5vw, 4rem);
    margin:18px 0 24px;
}
.cta p{
    max-width:560px;
    margin:0 auto 40px;
    color:rgba(247,235,221,.72);
}


/* =========================================================
   BOOKING PAGE
   ---------------------------------------------------------
   Styles specific to booking.html: a simple header (reusing the
   same .eyebrow look as the rest of the site), the box that
   holds the embedded Boulevard booking widget, and a fallback
   "call or email instead" card underneath it.
========================================================= */
.booking-header{
    text-align:center;
    padding:60px 8% 20px;
}
.booking-header h1{
    font-family:var(--display);
    /*font-style:italic;*/
    font-weight:500;
    font-size:clamp(2.6rem, 5vw, 4.2rem);
    margin:14px 0 18px;
}
.booking-header p{
    max-width:560px;
    margin:0 auto;
    color:rgba(32,28,23,.68);
}

.booking-embed-wrap{ padding:20px 8% 0; }
.booking-embed{
    max-width:900px;
    margin:0 auto;
    border:1px solid var(--gold);
    padding:6px;
    background:var(--white);
}
.booking-embed iframe{
    width:100%;
    min-height:760px;
    border:0;
    display:block;
}

.booking-fallback{
    max-width:640px;
    margin:50px auto 0;
    text-align:center;
    padding:34px 30px;
    border-top:1px solid rgba(74,91,78,.2);
}
.booking-fallback p{
    color:rgba(32,28,23,.65);
    margin-bottom:18px;
}
.booking-fallback .fallback-links{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}
.booking-fallback .fallback-links a{
    font-size:var(--fs-button); /*font-size:.78rem;*/
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--green-deep);
    border-bottom:1px solid var(--gold);
    padding-bottom:2px;
}



/* Footer */

footer{
    background:var(--champagne); 
    padding:70px 8% 40px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.2fr 1.2fr 0.7fr 0.7fr;
    gap:50px;
    padding-bottom:50px;
    border-bottom:1px solid rgba(74,91,78,.2);
}

.footer-logo{
    font-family:var(--display);
    /*font-style:italic;*/
    font-size:2.2rem;
    color:var(--green-deep); /*dark green-deep*/
    margin-bottom:14px;
}

.footer-grid p{ color:rgba(32,28,23,.62); font-size:.92rem; margin-bottom:6px; }

.footer-col h4{
    font-size:var(--fs-label); /*font-size:.72rem;*/
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold-text);
    margin-bottom:18px;
}

.footer-col a{
    display:block;
    color:rgba(32,28,23,.62);
    font-size:var(--fs-body); /*font-size:.92rem;*/
    margin-bottom:10px;
    transition:color .3s;
}

.footer-col a:hover{ color:var(--green-deep); }

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:28px;
    font-size:var(--fs-caption); /*font-size:.75rem;*/
    letter-spacing:.05em;
    color:rgba(32,28,23,.45);
    flex-wrap:wrap;
    gap:14px;
}

/* =========================================================
   BOTTOM CONTACT BAR
   ---------------------------------------------------------
   A slim bar fixed to the bottom of the browser window — like
   the tab bar in a phone app — that stays visible no matter how
   far someone scrolls (position:fixed + bottom:0). It holds four
   quick actions: email, call, map, and a "Hours" button that
   pops a small card open above itself instead of navigating
   anywhere. See the .hours-popover rules and the HTML/JS for
   how that popover works.
========================================================= */
.bottom-bar{
    position:fixed;
    top:auto;    /* explicit safeguard: without this, if a fixed element ever inherits both a top AND a bottom value with no set height, the browser stretches it to fill the whole gap between them */
    bottom:0; left:0;
    width:100%;
    z-index:1000;
    display:flex;
    background:var(--green);
    border-top:1px solid var(--green-deep); /*highlight line color above bar */
    box-shadow:0 -6px 24px rgba(35,46,38,.1);
    /* env(safe-area-inset-bottom) adds extra padding on phones with
       a home-indicator bar (like iPhones), so our bar's content
       doesn't sit underneath it. The "0px" fallback keeps this
       harmless on browsers that don't support env(). */
    padding:8px 4% calc(8px + env(safe-area-inset-bottom, 0px));
}

/* Shared look for all four bar entries — the three plain links
   AND the "Hours" button/wrapper all get this class, so they line
   up identically regardless of whether they're an <a> or a <div>. */
.bar-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:var(--champagne); /*text color under the phone, map, etc symbols*/
    font-size:var(--fs-bottom-bar); /*font-size:.62rem;*/
    letter-spacing:.09em;
    text-transform:uppercase;
    position:relative;    /* so the hours popover can anchor to this item */
}
.bar-item svg{ width:22px; height:22px; }
.bar-item svg *{
    stroke:var(--champagne); /* color of phone, map, etc symbols*/
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:stroke .3s;
}
.bar-item:hover svg *{ stroke:var(--gold-light); }

/* Resets the <button> for "Hours" to look and behave like the
   plain links next to it, since buttons come with browser default
   styling (borders, background, font) that <a> tags don't. */
.hours-wrap button{
    all:unset;               /* wipes default button styling */
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    cursor:pointer;
    color:inherit;
    font:inherit;
    letter-spacing:inherit;
    text-transform:inherit;
}

/* The small card that appears above the "Hours" button when
   clicked. Hidden by default (opacity:0 + pointer-events:none),
   and revealed by JavaScript adding the "open" class. */
.hours-popover{
    position:absolute;
    bottom:calc(100% + 14px);
    left:50%;
    transform:translateX(-50%) translateY(8px);
    background:var(--green);
    color:var(--champagne);
    padding:16px 22px;
    border-radius:3px;
    white-space:nowrap;
    text-align:left;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    opacity:0;
    pointer-events:none;   /* can't be clicked/read by screen readers while hidden */
    transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.hours-popover.open{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
/* The little triangle "pointer" underneath the popover, made from
   a rotated square border trick rather than an image. */
.hours-popover::after{
    content:'';
    position:absolute;
    top:100%; left:50%;
    transform:translateX(-50%);
    border:7px solid transparent;
    border-top-color:var(--green-deep);
}
.hours-popover .hours-row{
    display:flex;
    justify-content:space-between;
    gap:26px;
    font-size:var(--fs-button); /*font-size:.78rem;*/
    letter-spacing:.02em;
    text-transform:none;
    padding:3px 0;
}
.hours-popover .hours-row .day{ color:var(--gold-light); }


@media(max-width:900px){

    section{ padding:90px 7%; }
    .hero-cta{ padding:44px 7% 70px; }
    .about{ grid-template-columns:1fr; gap:50px; }
    .about-text{ order:2; }

    .gallery-strip{ grid-template-columns:1fr; }
    .gallery-strip .framed-panel{ margin-top:0 !important; }

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