/*
Luxury Hair Salon – styles.css
- Mobile-first, responsive
- System font stack (no external requests)
- Accessible focus outlines
- BEM-ish naming & logical properties
*/

:root {
--brand-primary: #7f224b; /* deep berry */
--brand-accent: #0f3a6b; /* marine blue */
--brand-gold: #b89b5e;
--text: #1b1b1b;
--muted: #666;
--bg: #fff;
--bg-alt: #f7f7f9;
--border: #e6e6ea;
--success: #107c41;
--danger: #b00020;

--radius: 16px;
--radius-sm: 10px;
--shadow: 0 8px 24px rgba(0,0,0,.08);

--space-1: .25rem;
--space-2: .5rem;
--space-3: .75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;

--maxw: 1100px;
}

/* CSS Reset (trimmed) */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:var(--bg);line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space-4)}
.section{padding-block:var(--space-7)}
.section--tight{padding-block:var(--space-5)}

/* Skip link */
.skip-link{position:absolute;inset-inline-start:var(--space-4);inset-block-start:-100px;background:#000;color:#fff;padding:.5rem .75rem;border-radius:8px;z-index:1000}
.skip-link:focus{inset-block-start:var(--space-4)}

/* Header */
.header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border);z-index:999}
.header__inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand__logo{inline-size:36px;block-size:36px}
.brand__name{font-weight:700;letter-spacing:.2px}

.nav{display:none}
.nav--open{display:block}
.nav__list{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);padding:0;margin:0}
.nav__link{padding:.5rem .75rem;border-radius:10px;text-decoration:none;color:var(--muted)}
.nav__link[aria-current="page"], .nav__link:hover{color:var(--brand-primary);background:var(--bg-alt)}

.nav-toggle{appearance:none;border:1px solid var(--border);background:var(--bg);border-radius:12px;padding:.5rem .75rem}

@media (min-width: 768px){
.nav{display:block}
.nav__list{flex-direction:row}
.nav-toggle{display:none}
}

/* Hero */
.hero{display:grid;gap:var(--space-5);align-items:center}
.hero__eyebrow{color:var(--brand-gold);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.hero__title{font-size:clamp(2rem, 1.6rem + 1.8vw, 3.2rem);line-height:1.15;margin:0}
.hero__text{color:var(--muted);max-inline-size:65ch}
.hero__cta{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:999px;border:1px solid transparent;text-decoration:none;font-weight:600;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.btn:focus-visible{outline:3px solid color-mix(in srgb, var(--brand-primary) 40%, transparent)}
.btn--primary{background:var(--brand-primary);color:#fff}
.btn--primary:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--text)}

/* Grid helpers */
.grid{display:grid;gap:var(--space-5)}
}