:root{
    --navy-deep:#0B1521;
    --navy: #2d4c72;
    --burgundy:#6E2430;
    --gold: #eac041;
    --gold-light:#E8CE7B;
    --cream: #f8f8f2;
    --ink:#1C1A15;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--cream); color:var(--ink); font-family:'Libre Baskerville', serif;}
h1,h2,h3{font-family:'Bebas Neue', sans-serif; letter-spacing:0.03em;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1060px; margin:0 auto; padding:0 24px;}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* refined heritage ribbon — signature element, thinner + richer than a plain barber pole */
.pole-stripe{
    height:9px;
    background:repeating-linear-gradient(
            -45deg,
            var(--burgundy) 0 16px,
            var(--cream) 16px 30px,
            var(--navy) 30px 46px,
            var(--gold) 46px 54px
    );
    box-shadow:inset 0 2px 3px rgba(0,0,0,0.25);

    background-size: 76.4px 76.4px;
    animation: poleScroll 2.5s linear infinite;
}
@keyframes poleScroll {
    from { background-position: 0 0; }
    to   { background-position: 76.4px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pole-stripe { animation: none; }
}


header{background:var(--navy-deep); border-bottom:1px solid rgba(201,162,39,0.25);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1060px; margin:0 auto; gap:16px;}
.logo-chip{background:var(--cream); padding:6px 12px; border-radius:6px; border:1px solid rgba(201,162,39,0.5); display:flex; align-items:center;}
.logo-nav{height:34px; width:auto; mix-blend-mode:multiply; display:block;}
.navlinks{display:flex; gap:26px; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em;}
.navlinks a{color:var(--cream); opacity:0.85; transition:opacity .2s, color .2s;}
.navlinks a:hover{opacity:1; color:var(--gold-light);}
.nav-right{display:flex; align-items:center; gap:14px;}
.lang-toggle{
    display:flex; border:1px solid rgba(201,162,39,0.5); border-radius:100px; overflow:hidden; font-size:0.72rem; letter-spacing:0.06em;
}
.lang-toggle button{
    background:transparent; border:none; color:rgba(244,239,227,0.6); padding:7px 13px; cursor:pointer; font-family:'Libre Baskerville',serif; font-weight:700; transition:background .2s, color .2s;
}
.lang-toggle button.active{background:var(--gold); color:var(--navy-deep);}
.call-btn{  position: relative;
    overflow: hidden; background:var(--burgundy); color:var(--cream); padding:10px 20px; font-family:'Bebas Neue',sans-serif; letter-spacing:0.05em; font-size:1rem; border:1px solid rgba(201,162,39,0.4); transition:background .2s;}
.call-btn::after{ content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease; }
.call-btn:hover{background:#832C39;}
@media (max-width:800px){.navlinks{display:none;}}
.call-btn:hover::after{
    left: 125%;
}
/* hero — the seal / medallion is the boldness budget for this design */
.hero{
    background:
            radial-gradient(ellipse at 50% -10%, rgba(201,162,39,0.14), transparent 55%),
            var(--navy-deep);
    color:var(--cream); text-align:center; padding:80px 24px 64px; position:relative;
}
.eyebrow{color:var(--gold-light); text-transform:uppercase; letter-spacing:0.26em; font-size:0.76rem; font-weight:700;}
.gold-rule{width:56px; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); margin:16px auto;}

.medallion{
    position:relative; width:220px; height:220px; border-radius:50%;
    background:var(--cream);
    border:3px solid var(--gold);
    box-shadow:0 0 0 6px rgba(201,162,39,0.15), 0 18px 40px rgba(0,0,0,0.45);
    display:flex; align-items:center; justify-content:center; padding:20px;
    overflow:hidden;
    opacity:0; transform:scale(0.9);
    animation:medallionIn 1s ease forwards .2s;
}
.medallion img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;}

.medallion-wrap{display:flex; justify-content:center; margin-top:8px; position:relative;}
.medallion-glow{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:280px; height:280px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,162,39,0.35), transparent 70%);
    animation:glowPulse 4.5s ease-in-out infinite;
}

.medallion-ring{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:246px; height:246px;
    border-radius:50%;
    background:repeating-conic-gradient(
            from 0deg,
            var(--burgundy) 0deg 90deg,
            var(--cream)    90deg 180deg,
            var(--navy)     180deg 270deg,
            var(--gold)     270deg 360deg
    );
    box-shadow: 0 0 20px rgba(0,0,0,0.35) inset;
    animation: ringSpin 16s linear infinite;
}
@keyframes ringSpin{
    from{ transform:translate(-50%,-50%) rotate(0deg); }
    to{   transform:translate(-50%,-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){ .medallion-ring{ animation:none; } }

@keyframes medallionIn{ to{opacity:1; transform:scale(1);} }

.barbershop-tag{
    margin-top:22px; font-size:0.82rem; letter-spacing:0.4em; text-transform:uppercase;
    color:rgba(244,239,227,0.55); font-family:'Libre Baskerville', serif;
}
.barbershop-tag::before, .barbershop-tag::after{content:"—"; color:var(--gold); margin:0 10px; letter-spacing:0;}
.hero p.lead{max-width:44ch; margin:18px auto 0; color:rgba(244,239,227,0.8); font-size:1.05rem;}
.hero-cta{margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.btn-primary{  position: relative;
    overflow: hidden; background:var(--burgundy); color:var(--cream); padding:14px 30px; font-family:'Bebas Neue',sans-serif; font-size:1.1rem; letter-spacing:0.04em; border:1px solid rgba(201,162,39,0.4); transition:transform .2s, background .2s; }
.btn-primary::after{
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}
.btn-primary:hover::after{
    left: 125%;
}

.btn-primary:hover{background:#832C39; transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--gold); color:var(--gold-light); padding:12px 28px; font-family:'Bebas Neue',sans-serif; font-size:1.1rem; letter-spacing:0.04em; transition:background .2s, transform .2s;}
.btn-ghost:hover{background:rgba(201,162,39,0.12); transform:translateY(-2px);}



.infostrip{background:var(--gold); color:var(--navy-deep);}
.infostrip .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 40px; padding:13px 24px; font-size:0.86rem; font-weight:700;}
.infostrip-left{display:flex; flex-wrap:wrap; gap:8px 40px;}
.google-chip{
    display:inline-flex; align-items:center; gap:7px;
    background:var(--navy-deep); color:var(--gold-light);
    padding:6px 15px; border-radius:100px; font-size:0.78rem; font-weight:700;
    transition:transform .2s ease, background .2s ease;
}
.google-chip:hover{transform:translateY(-1px); background:#1C2F49;}
.google-chip .stars{letter-spacing:1px; font-size:0.82rem;}

section{padding:80px 0;}
section h2{font-size:clamp(2.1rem,5vw,3rem); text-align:center;
    background:linear-gradient(180deg, var(--gold-light), var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-sub{text-align:center; color:rgba(28,26,21,0.6); max-width:48ch; margin:12px auto 0; font-size:0.95rem;}

.services-list{margin-top:48px; max-width:700px; margin-left:auto; margin-right:auto;}
.service-row{
    display:flex; justify-content:space-between; align-items:center; padding:20px 6px;
    border-bottom:1px solid rgba(201,162,39,0.3);
    transition:background .2s, padding-left .2s;
}
.service-row:hover{background:rgba(201,162,39,0.08); padding-left:14px;}
.service-row.reveal:nth-child(1){ transition-delay: 0s; }
.service-row.reveal:nth-child(2){ transition-delay: 0.08s; }
.service-row.reveal:nth-child(3){ transition-delay: 0.16s; }
.service-row.reveal:nth-child(4){ transition-delay: 0.24s; }
.service-row.reveal:nth-child(5){ transition-delay: 0.32s; }
.service-row .name{font-family:'Bebas Neue',sans-serif; font-size:1.3rem; letter-spacing:0.02em;}
.service-row .desc{font-size:0.82rem; color:rgba(28,26,21,0.55); margin-top:2px; font-family:'Libre Baskerville',serif; font-style:italic;}
.service-row .price{font-family:'Bebas Neue',sans-serif; font-size:1.3rem; color:var(--burgundy);}

.hours-wrap{background:var(--navy-deep); color:var(--cream);}
.hours-wrap h2{background:linear-gradient(180deg, var(--gold-light), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hours-card{max-width:480px; margin:44px auto 0; padding:30px 34px; border:1px solid rgba(201,162,39,0.35); border-radius:6px; position:relative;}
.hours-card::before, .hours-card::after{content:""; position:absolute; width:16px; height:16px; border:1px solid var(--gold);}
.hours-card::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.hours-card::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}
.hours-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(244,239,227,0.12); font-size:1rem;}
.hours-row.today{color:var(--gold-light); font-weight:700;}
.hours-row:last-child{border:none;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;}}
.contact-block p{margin-top:16px;}
.contact-block a.underline{border-bottom:1px solid var(--burgundy);}
iframe{width:100%; height:300px; border:1px solid rgba(201,162,39,0.35); filter:sepia(0.08) saturate(0.95);}

footer{background:var(--navy-deep); color:rgba(244,239,227,0.6); text-align:center; padding:30px 24px; font-size:0.82rem;}
footer strong{color:var(--cream);}