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

:root {
    --bg: #11100e;
    --surface: #191714;
    --surface-2: #211e1a;
    --cream: #eee5d6;
    --muted: #9d968b;
    --gold: #c7a66a;
    --gold-light: #e0c28a;
    --line: rgba(238,229,214,0.13);
}

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--cream);
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
}

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

.navbar {
    position: fixed;
    z-index: 100;
    top: 0;
    width: 100%;
    height: 80px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(17,16,14,0.84);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
}

.logo, .footer-logo {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.logo span, .footer-logo span, h1 span, h2 span { color: var(--gold-light); }

.navbar nav {
    display: flex;
    gap: 32px;
    margin-left: auto;
    margin-right: 32px;
}

.navbar nav a {
    color: #c4bdb2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.navbar nav a:hover { color: var(--cream); }

.nav-button {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    padding: 12px 19px;
    background: var(--gold);
    color: #17130d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    transition: .25s ease;
}

.nav-button:hover,
.button-primary:hover { background: var(--cream); transform: translateY(-2px); }

.hero {
    position: relative;
    min-height: 100vh;
    padding: 165px 5vw 45px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.hero-image {
    position: absolute;
    inset: 0;
    background:
        url("https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&w=1800&q=90")
        center / cover;
    filter: grayscale(65%) sepia(15%) contrast(1.08);
    opacity: .55;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #11100e 4%, rgba(17,16,14,.9) 38%, rgba(17,16,14,.25) 100%),
        linear-gradient(0deg, #11100e 0%, transparent 40%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(780px, 80vw);
}

.eyebrow {
    margin-bottom: 18px;
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}

h1, h2, h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(85px, 12vw, 175px);
    line-height: .78;
    font-weight: 600;
    letter-spacing: -.04em;
}

.hero-text {
    max-width: 510px;
    margin-top: 35px;
    color: #c7c0b6;
    font-size: 18px;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50px;
    padding: 0 21px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    transition: .25s ease;
}

.button-primary { background: var(--gold); color: #17130d; }
.button-ghost { border: 1px solid rgba(238,229,214,.35); }

.button-ghost:hover {
    background: var(--cream);
    color: #11100e;
}

.hero-label {
    position: absolute;
    z-index: 2;
    right: 5vw;
    top: 43%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: flex-end;
}

.hero-label span {
    color: #b6aea3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
}

.hero-bottom {
    position: absolute;
    z-index: 3;
    left: 5vw;
    right: 5vw;
    bottom: 40px;
    display: flex;
    gap: 65px;
    padding-top: 20px;
    border-top: 1px solid rgba(238,229,214,.22);
}

.hero-bottom div { display: flex; flex-direction: column; }
.hero-bottom strong { font-family: "Cormorant Garamond", serif; font-size: 33px; line-height: 1; }
.hero-bottom span {
    margin-top: 5px;
    color: #8f887f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.section {
    padding: 125px 5vw;
    border-bottom: 1px solid var(--line);
}

.section-top {
    display: grid;
    grid-template-columns: 1.15fr .7fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 60px;
}

h2 {
    font-size: clamp(65px, 8vw, 115px);
    line-height: .82;
    font-weight: 600;
    letter-spacing: -.035em;
}

.intro {
    max-width: 450px;
    margin-left: auto;
    color: var(--muted);
    font-size: 16px;
}

.service-list { border-top: 1px solid var(--line); }

.service-card {
    min-height: 125px;
    display: grid;
    grid-template-columns: .35fr 1.6fr .35fr .35fr;
    gap: 20px;
    align-items: center;
    padding: 22px 10px;
    border-bottom: 1px solid var(--line);
    transition: .25s ease;
}

.service-card:hover,
.service-card.featured { background: var(--surface); }

.service-card .number {
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.service-card h3 {
    font-size: 36px;
    font-weight: 600;
}

.service-card p {
    max-width: 470px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}

.service-card strong {
    font-family: "Cormorant Garamond", serif;
    font-size: 31px;
    text-align: right;
}

.service-card a {
    color: var(--gold-light);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-align: right;
}

.statement {
    padding: 120px 5vw;
    background: var(--gold);
    color: #19140c;
    overflow: hidden;
}

.statement p {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(55px, 9vw, 125px);
    line-height: .78;
    font-weight: 600;
    letter-spacing: -.04em;
}

.statement p:nth-child(2) { padding-left: 15vw; }
.statement p span { font-style: italic; }

.studio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
    align-items: center;
}

.studio-image {
    min-height: 620px;
    position: relative;
    background:
        linear-gradient(180deg, transparent 45%, rgba(0,0,0,.8)),
        url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=1200&q=85")
        center / cover;
    filter: grayscale(55%) sepia(18%);
}

.studio-tag {
    position: absolute;
    left: 25px;
    bottom: 25px;
    color: #ddd4c7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.studio-content { max-width: 590px; }
.studio-content h2 { margin-bottom: 35px; }
.studio-content > p:not(.eyebrow) { color: var(--muted); font-size: 16px; }
.studio-content .lead { color: var(--cream) !important; font-size: 19px !important; margin-bottom: 18px; }

.studio-points {
    margin: 35px 0;
    border-top: 1px solid var(--line);
}

.studio-points div {
    display: flex;
    gap: 30px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.studio-points strong { color: var(--gold); font-size: 10px; }
.studio-points span { font-size: 13px; }

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.barber-image {
    height: 520px;
    position: relative;
    background-size: cover;
    background-position: center;
    filter: grayscale(65%);
}

.barber-one { background-image: url("https://images.unsplash.com/photo-1621605815971-fbc98d665033?auto=format&fit=crop&w=900&q=85"); }
.barber-two { background-image: url("https://images.unsplash.com/photo-1599351431202-1e0f0137899a?auto=format&fit=crop&w=900&q=85"); }
.barber-three { background-image: url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=900&q=85"); }

.barber-image span {
    position: absolute;
    top: 18px;
    left: 18px;
    color: #eee5d6;
    font-size: 10px;
    font-weight: 800;
}

.barber-info {
    padding: 18px 2px;
    border-bottom: 1px solid var(--line);
}

.barber-info h3 { font-size: 31px; }
.barber-info p { color: var(--muted); font-size: 12px; margin-top: 3px; }

.booking {
    padding: 145px 5vw;
    text-align: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(199,166,106,.18), transparent 34%),
        #0f0e0c;
}

.booking-inner { max-width: 1000px; margin: auto; }
.booking h2 { margin-bottom: 25px; }
.booking-inner > p:not(.eyebrow) { color: var(--muted); font-size: 17px; margin-bottom: 30px; }

.booking .button { display: inline-flex; }

footer {
    padding: 35px 5vw 25px;
    background: #0b0a09;
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
}

.footer-links { display: flex; gap: 25px; }
.footer-links a {
    color: #928b82;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    color: #68625b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
}

@media (max-width: 900px) {
    .navbar nav { display: none; }
    .section-top, .studio { grid-template-columns: 1fr; }
    .intro { margin-left: 0; }
    .team-grid { grid-template-columns: 1fr; }
    .barber-image { height: 470px; }
}

@media (max-width: 600px) {
    .navbar { height: 70px; padding: 0 20px; }
    .logo { font-size: 30px; }
    .nav-button { padding: 10px 13px; font-size: 8px; }
    .hero { min-height: 850px; padding: 130px 20px 150px; }
    .hero-content { width: 90vw; }
    h1 { font-size: clamp(72px, 21vw, 120px); }
    .hero-label { display: none; }
    .hero-buttons { flex-direction: column; align-items: flex-start; }
    .hero-bottom { left: 20px; right: 20px; gap: 22px; }
    .hero-bottom strong { font-size: 26px; }
    .hero-bottom span { font-size: 7px; }
    .section { padding: 85px 20px; }
    h2 { font-size: clamp(57px, 17vw, 88px); }
    .section-top { gap: 30px; margin-bottom: 42px; }
    .service-card { grid-template-columns: .2fr 1fr .25fr; }
    .service-card a { grid-column: 2 / 4; text-align: left; }
    .service-card strong { font-size: 26px; }
    .statement { padding: 85px 20px; }
    .statement p:nth-child(2) { padding-left: 7vw; }
    .studio-image { min-height: 480px; }
    .booking { padding: 100px 20px; }
    .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
    .footer-links { flex-wrap: wrap; }
}