/* BARBA — Premium Visual Refinement v2
   Layered over the existing production build; no JS changes required.
*/
:root{
  --navy:#071624;
  --navy-soft:#0d2334;
  --navy-lift:#143249;
  --ink:#101d29;
  --cream:#f3f2ed;
  --warm-white:#fbfbf8;
  --amber:#c99a4a;
  --amber-light:#e6c47f;
  --muted-ink:#667482;
  --line:#d9dfe0;
  --radius:18px;
}
html{scroll-behavior:smooth}
body{background:var(--warm-white);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
.container{max-width:1240px!important;padding-left:28px;padding-right:28px}
.site-shell{overflow:hidden}
/* Header: quieter, more luxurious */
.site-header{height:84px;border-bottom:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(5,16,27,.72),rgba(5,16,27,.20));transition:all .28s ease}
.site-header.header-scrolled{background:rgba(7,22,36,.94);box-shadow:0 12px 40px rgba(0,0,0,.18);border-bottom-color:rgba(201,154,74,.22)}
.header-inner{height:84px}
.brand-lockup{gap:12px}
.brand-mark{width:34px;height:40px;border-radius:10px 10px 15px 15px;background:var(--navy);border-color:rgba(255,255,255,.95);box-shadow:0 5px 18px rgba(0,0,0,.18)}
.brand-mark:before{border-color:var(--amber-light)}
.brand-mark:after{font-size:19px}
.brand-lockup strong{font-size:18px;letter-spacing:.18em}
.brand-lockup small{letter-spacing:.22em;margin-top:6px}
.desktop-nav{gap:31px;margin-right:28px}
.desktop-nav a{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.desktop-nav a:after{height:1px;bottom:-11px;background:var(--amber-light)}
.header-link{letter-spacing:.08em}
/* Hero */
.hero-section{min-height:790px;background:#061523}
.hero-image{opacity:1;background-position:center center;transform:scale(1.015)}
.hero-section:after{background:linear-gradient(90deg,rgba(4,15,25,.98) 0%,rgba(4,15,25,.88) 30%,rgba(4,15,25,.38) 62%,rgba(4,15,25,.25) 100%),linear-gradient(0deg,rgba(4,15,25,.82) 0%,transparent 42%)}
.hero-grain{opacity:.07}
.hero-content{padding-top:88px}
.hero-copy{max-width:650px;padding-bottom:72px}
.eyebrow,.section-label{font-size:9px;letter-spacing:.28em;color:var(--amber-light);margin-bottom:22px}
.hero-copy h1{font-size:clamp(54px,6.4vw,92px);letter-spacing:-.045em;line-height:.91;text-wrap:balance}
.hero-copy h1 em{color:var(--amber-light)}
.hero-subtitle{max-width:470px;color:rgba(255,255,255,.72);font-size:15px;line-height:1.75;margin:31px 0 33px}
.hero-actions{gap:12px}
.button{border-radius:999px;min-height:46px;padding:0 22px;letter-spacing:.06em;box-shadow:0 8px 22px rgba(0,0,0,.10);transition:all .25s ease}
.button-amber{background:var(--amber);color:#071624}
.button-amber:hover{background:var(--amber-light);box-shadow:0 12px 28px rgba(201,154,74,.22)}
.button-ghost{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.05);backdrop-filter:blur(10px)}
.hero-note{margin-top:55px;font-size:13px;color:rgba(255,255,255,.62)}
.hero-stats{gap:0;margin-top:10px}
.hero-stats>div{padding:0 36px 0 0;margin-right:36px;border-right:1px solid rgba(255,255,255,.18)}
.hero-stats strong{font-size:28px}
.hero-stats small{font-size:9px;letter-spacing:.16em}
.hero-bottom{bottom:27px!important}
.scroll-cue{font-size:9px;letter-spacing:.18em;opacity:.72}
/* Shared sections */
.section-pad{padding:118px 0}
.section-heading{margin-bottom:55px}
.section-heading h2,.why-intro h2,.quote-container h2{font-size:clamp(39px,4.3vw,60px);letter-spacing:-.045em;line-height:.98}
.heading-aside{max-width:365px}
.heading-aside p,.why-intro>p{font-size:13px;line-height:1.8}
.text-link{color:var(--navy);letter-spacing:.04em}
/* Services: less cramped, more editorial */
.services-grid{grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{border:1px solid #e2e6e5;border-radius:var(--radius);overflow:hidden;box-shadow:0 7px 24px rgba(9,29,44,.035);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.service-card:hover{transform:translateY(-7px);box-shadow:0 20px 45px rgba(9,29,44,.11);border-color:rgba(201,154,74,.42)}
.service-visual{height:205px;padding:17px}
.service-visual:after{background:linear-gradient(180deg,rgba(3,14,24,.42),rgba(3,14,24,.02) 50%,rgba(3,14,24,.18))}
.service-info{min-height:160px;padding:21px 20px 18px}
.service-info h3{font-size:16px;letter-spacing:.01em}
.service-info p{font-size:11.5px;line-height:1.65}
.service-bottom{font-size:9px;letter-spacing:.1em}
.circle-arrow{width:34px;height:34px;display:grid}
.mobile-service-toggle{margin-top:22px;border-radius:999px}
/* Steps */
.steps-section{padding:116px 0 124px}
.steps-grid{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step-card{min-height:235px;padding:31px 30px 25px 0;margin-right:30px}
.step-number{font-size:9px;letter-spacing:.22em;color:var(--amber);margin-bottom:31px}
.step-card h3{font-size:17px}
.step-card p{font-size:11.5px;line-height:1.7}
.step-card>svg{margin-bottom:26px;stroke-width:1.35px}
.step-arrow{top:31px;right:30px;color:var(--amber)}
/* Ecosystem */
.ecosystem-section{background:linear-gradient(180deg,#f2f1ec,#eeede7)}
.ecosystem-grid{gap:18px}
.eco-card{min-height:390px;padding:25px 25px 27px;border-radius:var(--radius);box-shadow:0 14px 34px rgba(8,23,35,.08);transition:transform .35s ease,box-shadow .35s ease}
.eco-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(8,23,35,.15)}
.eco-card:after{background:linear-gradient(180deg,rgba(3,13,22,.12),rgba(3,13,22,.88))}
.eco-card h3{font-size:28px;letter-spacing:.10em}
.eco-card p{font-size:12px;line-height:1.65}
.eco-card a{font-size:9px;letter-spacing:.18em}
/* Why */
.why-section{background:var(--warm-white)}
.why-intro{margin-bottom:58px}
.why-grid{grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-item{min-height:205px;padding:31px 30px 25px 0;margin-right:30px}
.why-item:nth-child(n+4){border-top:1px solid var(--line)}
.why-item:nth-child(3n){border-right:0;margin-right:0}
.why-item h3{font-size:13px;letter-spacing:.01em}
.why-item p{font-size:11.5px;line-height:1.7}
/* Quotes */
.quote-section{background:#f2f1ec}
.quote-container>h2{margin-bottom:53px}
.quote-grid{gap:18px}
.quote-grid blockquote{min-height:225px;border:1px solid #e1e1dc;border-radius:var(--radius);padding:28px 28px 24px;box-shadow:0 8px 26px rgba(8,23,35,.035);transition:transform .3s ease,box-shadow .3s ease}
.quote-grid blockquote:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(8,23,35,.09)}
.quote-grid blockquote>p{font-size:16px;line-height:1.5}
.avatar{width:38px;height:38px}
/* Outlet */
.outlet-section{min-height:490px}
.outlet-overlay{background:linear-gradient(90deg,rgba(4,18,30,.97),rgba(4,18,30,.82) 45%,rgba(4,18,30,.30))}
.outlet-copy h2{font-size:clamp(40px,4.5vw,61px);letter-spacing:-.045em}
.outlet-copy p{font-size:13.5px;line-height:1.75}
.city-list{width:370px;padding-left:38px;border-left-color:rgba(255,255,255,.25)}
.city-list a{font-size:22px;padding:14px 0}
/* Club */
.club-section{background:linear-gradient(180deg,#f2f1ec,#fbfbf8)}
.club-grid{gap:100px}
.club-copy h2{font-size:clamp(42px,4.4vw,62px);letter-spacing:-.045em}
.club-copy>p{font-size:14px;line-height:1.8}
.club-checks span{font-size:12px}
.club-visual-wrap{min-height:490px;padding-right:50px}
.club-visual{height:500px;border-radius:var(--radius);box-shadow:20px 20px 0 var(--navy);overflow:hidden}
.club-float-card{border:1px solid #e5e6e1;border-radius:14px;box-shadow:0 18px 40px rgba(6,21,35,.14);bottom:31px;left:-34px}
/* Opportunities */
.opportunity-section{padding-bottom:118px!important}
.opportunity-grid{gap:18px}
.opportunity-card{min-height:350px;border-radius:var(--radius);padding:34px 38px;box-shadow:0 15px 35px rgba(8,23,35,.08)}
.opportunity-card:after{background:linear-gradient(90deg,rgba(3,15,26,.94),rgba(3,15,26,.30))}
.opportunity-card h2{font-size:41px;letter-spacing:-.035em}
.opportunity-card p{font-size:13px;line-height:1.7}
/* Final CTA */
.final-cta{min-height:540px}
.final-cta-overlay{background:linear-gradient(90deg,rgba(3,14,24,.98),rgba(3,14,24,.84) 45%,rgba(3,14,24,.24))}
.final-cta-content h2{font-size:clamp(44px,5.2vw,72px);letter-spacing:-.045em}
.final-cta-content p{font-size:14px;line-height:1.75;max-width:500px}
/* Footer */
.site-footer{padding-top:72px}
.footer-main{min-height:220px}
.footer-links{gap:105px}
.footer-links strong{font-size:9px;letter-spacing:.19em}
.footer-links a{font-size:10.5px}
.footer-bottom{min-height:72px}
/* Mobile */
@media (max-width:1020px){
  .container{padding-left:24px!important;padding-right:24px!important}
  .hero-section{min-height:720px}
  .hero-copy h1{font-size:clamp(50px,8vw,76px)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .eco-card{min-height:340px}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .why-item:nth-child(3n){border-right:1px solid var(--line);margin-right:30px}
  .why-item:nth-child(2n){border-right:0;margin-right:0}
  .why-item:nth-child(n+3){border-top:1px solid var(--line)}
  .club-grid{gap:60px}
}
@media (max-width:700px){
  .container{padding-left:20px!important;padding-right:20px!important}
  .site-header,.header-inner{height:70px}
  .hero-section{min-height:760px}
  .hero-image{background-position:62% center}
  .hero-section:after{background:linear-gradient(90deg,rgba(4,15,25,.93),rgba(4,15,25,.68)),linear-gradient(0deg,rgba(4,15,25,.92),transparent 65%)}
  .hero-content{padding-top:65px}
  .hero-copy{padding-bottom:52px}
  .hero-copy h1{font-size:clamp(45px,14vw,65px);line-height:.94}
  .hero-subtitle{font-size:13.5px;margin:25px 0 27px}
  .hero-actions .button{width:100%;justify-content:center}
  .hero-note{margin-top:39px;font-size:12px}
  .hero-stats{gap:0}
  .hero-stats>div{padding-right:15px;margin-right:15px}
  .hero-stats strong{font-size:22px}
  .hero-stats small{font-size:7.5px;letter-spacing:.10em}
  .section-pad{padding:78px 0}
  .section-heading{margin-bottom:38px}
  .heading-split,.why-intro,.outlet-content{align-items:flex-start;flex-direction:column;gap:24px}
  .section-heading h2,.why-intro h2,.quote-container h2{font-size:40px}
  .heading-aside{max-width:none}
  .services-grid{grid-template-columns:1fr;gap:15px}
  .service-hidden{display:block}
  .service-visual{height:190px}
  .service-info{min-height:150px}
  .steps-section{padding:78px 0 84px}
  .steps-grid{grid-template-columns:1fr 1fr}
  .step-card{min-height:215px;margin-right:18px;padding-right:18px}
  .step-card:nth-child(2){border-right:0;margin-right:0}
  .step-card:nth-child(n+3){border-top:1px solid var(--line);padding-top:26px}
  .step-arrow{display:none}
  .ecosystem-grid{grid-template-columns:1fr;gap:15px}
  .eco-card{min-height:330px}
  .why-grid{grid-template-columns:1fr 1fr}
  .why-item{min-height:185px;padding-right:18px;margin-right:18px}
  .quote-grid{grid-template-columns:1fr}
  .quote-grid blockquote{min-height:205px}
  .outlet-section{min-height:650px}
  .outlet-copy h2{font-size:43px}
  .city-list{width:100%;padding-left:24px}
  .club-grid{grid-template-columns:1fr;gap:58px}
  .club-visual-wrap{min-height:370px;padding-right:24px}
  .club-visual{height:390px;box-shadow:14px 14px 0 var(--navy)}
  .club-float-card{left:0;bottom:18px;width:230px}
  .opportunity-grid{grid-template-columns:1fr}
  .opportunity-card{min-height:290px;padding:27px}
  .opportunity-card h2{font-size:34px}
  .final-cta{min-height:540px}
  .final-cta-content h2{font-size:47px}
  .footer-main{flex-direction:column;gap:45px}
  .footer-links{gap:55px;flex-wrap:wrap}
  .footer-bottom{flex-direction:column;justify-content:center;gap:10px;padding:18px 0;text-align:center}
}

/* BARBA — Image Storytelling Layer
   User-supplied hero + BARBA GO facade + generated STYLE/RESERVE interiors.
*/
.hero-image{background-position:center 43%!important}
@media (max-width:700px){.hero-image{background-position:58% 42%!important}}
/* Service imagery — every card gets a distinct visual */
.service-image-1{background-image:url('/assets/service-go.webp')!important;background-position:center!important}
.service-image-2{background-image:url('/assets/service-haircut.webp')!important;background-position:center 42%!important}
.service-image-3{background-image:url('/assets/service-shave.webp')!important;background-position:center 48%!important}
.service-image-4{background-image:url('/assets/service-treatment.webp')!important;background-position:center 45%!important}
.service-image-5{background-image:url('/assets/service-styling.webp')!important;background-position:center 48%!important}
/* Ecosystem: make the three concepts visually unmistakable */
.eco-go{background-image:url('/assets/barba-go.webp')!important;background-position:center!important}
.eco-style{background-image:url('/assets/barba-style.webp')!important;background-position:center 50%!important}
.eco-reserve{background-image:url('/assets/barba-reserve.webp')!important;background-position:center 50%!important}
.eco-card{min-height:430px}
.eco-card:after{background:linear-gradient(180deg,rgba(3,13,22,.12),rgba(3,13,22,.90))}
/* More visual storytelling in business/career */
.opportunity-career:before{background:url('/assets/career-banner.webp') 50%/cover!important;opacity:.52;mix-blend-mode:normal}
.opportunity-business:before{background:url('/assets/business-banner.webp') 50%/cover!important;opacity:.52;mix-blend-mode:normal}
/* Keep the editorial rhythm: large imagery, quiet type, generous whitespace */
.service-card,.eco-card,.quote-grid blockquote,.opportunity-card{will-change:transform}
