:root{
  --bg-image:url('images/background.jpg');
  --cream:#F5F1EA;
  --ink:#2B2622;
  --gold:#C9A961;
  --gold-dark:#926400;
  --taupe:#9C8B6E;
  --sand:#DED4C0;
  --glass:rgba(250,247,242,0.72);
  --glass-border:rgba(201,169,97,0.35);
  --hairline:rgba(201,169,97,0.4);
  --ease:cubic-bezier(0.2,0.6,0.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'Jost',sans-serif;font-weight:300;overflow-x:hidden;
}
body.no-touch, body.no-touch a{cursor:none}
::selection{background:var(--gold);color:var(--cream)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* mono is seasoning: labels only */
.mono{font-family:'Courier Prime',monospace}

/* ---------- background: photo + grade ---------- */
.bg-photo{
  position:fixed;inset:-6%;z-index:-2;
  background-image:var(--bg-image);
  background-size:cover;background-position:center 58%;
  filter:saturate(.9) brightness(.92) contrast(1.04);
  animation:kenburns 38s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform:scale(1) translateY(0)}
  100%{transform:scale(1.1) translateY(-1.5%)}
}
.bg-grade{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201,169,97,.10), transparent 55%),
    linear-gradient(180deg, rgba(43,38,34,.46), rgba(43,38,34,.52));
}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:9000;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}
  30%{transform:translate(3%,-2%)}50%{transform:translate(-3%,2%)}
  70%{transform:translate(2%,3%)}90%{transform:translate(-1%,1%)}
}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;
  transition:opacity .9s var(--ease),visibility .9s;
}
.preloader.done{opacity:0;visibility:hidden}
.preloader .logo{
  width:min(300px,60vw);opacity:0;transform:scale(.94);
  animation:logoIn 1.3s var(--ease) .15s forwards;
}
@keyframes logoIn{to{opacity:1;transform:scale(1)}}

/* ---------- cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9500;border-radius:50%;display:none}
body.no-touch .cursor-dot,body.no-touch .cursor-ring{display:block}
.cursor-dot{width:6px;height:6px;background:var(--gold);transform:translate(-50%,-50%)}
.cursor-ring{
  width:32px;height:32px;border:1px solid var(--gold);transform:translate(-50%,-50%);opacity:.65;
  transition:width .3s var(--ease),height .3s var(--ease),opacity .3s;
}
.cursor-ring.hovering{width:56px;height:56px;opacity:1}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:32px 8vw;background:transparent;border-bottom:1px solid transparent;
  border-top:8px solid var(--gold);
  transition:all .4s var(--ease);
}
nav.scrolled{padding:20px 8vw;background:rgba(245,241,234,0.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--sand)}
nav .logo{display:block;position:relative;width:158px;line-height:0}
nav .logo img{width:100%;display:block;transition:opacity .4s var(--ease)}
nav .logo .lg-full{position:absolute;inset:0;opacity:0}
nav.scrolled .logo .lg-cream{opacity:0}
nav.scrolled .logo .lg-full{opacity:1}
nav .links{display:flex;align-items:center;gap:44px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-family:'Courier Prime',monospace}
nav .links a{color:#F5F1EA;text-decoration:none;transition:color .3s}
nav.scrolled .links a{color:var(--ink)}
nav .links a:hover{color:var(--gold)!important}
nav .links a.cta{border:1px solid #F5F1EA;padding:10px 22px;border-radius:2px;transition:all .3s}
nav.scrolled .links a.cta{border-color:var(--ink)}
nav .links a.cta:hover{color:#F5F1EA!important;background:var(--ink);border-color:var(--ink)}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.line{display:block;overflow:hidden}
.line span{display:block;transform:translateY(112%);transition:transform 1.15s var(--ease)}
.lines-in .line span{transform:translateY(0)}
.line:nth-child(2) span{transition-delay:.1s}
.line:nth-child(3) span{transition-delay:.2s}

/* ---------- shared ---------- */
.page{width:100%;overflow-x:hidden;position:relative}
.kicker{
  font-family:'Courier Prime',monospace;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin-bottom:24px;
}
h2.display{font-family:'Bodoni Moda',serif;font-weight:400;margin:0;color:var(--ink)}
/* solid cream bands — where the page rests */
.band{background:var(--cream)}
/* glass — kept for two moments only */
.glass{
  background:var(--glass);backdrop-filter:blur(18px);border-radius:4px;
  border:1px solid var(--glass-border);
}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;padding:140px 8vw 40px;position:relative;overflow:hidden}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,38,34,.22) 0%,rgba(43,38,34,.08) 45%,rgba(43,38,34,.38) 100%);z-index:1}
.hero .inner{
  max-width:820px;margin-left:6vw;flex:1;display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;animation:fadeUp 1.1s var(--ease) both;animation-delay:1.5s;
}
.hero .eyebrow{
  font-family:'Courier Prime',monospace;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#E4DAC4;margin-bottom:24px;
}
.hero h1{
  font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(40px,6.5vw,100px);
  line-height:1.05;margin:0;max-width:16ch;letter-spacing:-.01em;color:#F5F1EA;
}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .sub{max-width:520px;font-size:18px;line-height:1.65;color:#E9E2D3;margin:26px 0 0 0;font-weight:300}
.hero .actions{margin-top:36px;display:flex;gap:20px;align-items:center}
.hero .actions a{
  font-family:'Courier Prime',monospace;
  text-decoration:none;color:#F5F1EA;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid #F5F1EA;padding-bottom:6px;transition:color .3s,border-color .3s;
}
.hero .actions a:hover{color:var(--gold);border-color:var(--gold)}
.availability{margin-top:44px;display:inline-flex;flex-direction:column;gap:14px}
.availability .rule{width:56px;height:1px;background:var(--gold)}
.availability .text{
  font-family:'Courier Prime',monospace;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#E4DAC4;
  display:flex;align-items:center;gap:12px;
}
.availability .pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);position:relative;flex:none}
.availability .pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--gold);animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.5);opacity:0}}
.hero .foot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:8px;position:relative;z-index:2}
.hero .foot div{font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#D9D1C2}
.hero .foot .est{letter-spacing:.14em;text-transform:none}

/* ---------- about + services : first cream band ---------- */
.band-one{padding:0}
.about{padding:170px 8vw 120px;display:flex;justify-content:center}
.about .inner{max-width:720px}
.about h2{font-size:44px;line-height:1.25;margin:0 0 28px;max-width:16ch}
.about p{font-size:17px;line-height:1.85;color:#4A4238;max-width:560px;margin:0 0 20px}
.about p:last-child{margin:0}
.about .signoff{
  font-family:'Bodoni Moda',serif;font-style:italic;font-size:26px;color:var(--gold-dark);
  margin-top:36px;
}

.services{padding:60px 8vw 170px}
.services .head{
  display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px;
  flex-wrap:wrap;gap:20px;border-top:1px solid var(--hairline);padding-top:56px;
}
.services .head h2{font-size:48px;max-width:16ch}
.services .head p{max-width:380px;font-size:16px;color:#4A4238;line-height:1.7;margin:0}
.services .grid{display:grid;grid-template-columns:repeat(2,1fr)}
.service{padding:56px;border-top:1px solid var(--hairline);transition:background .4s}
.service:nth-child(odd){border-right:1px solid var(--hairline)}
.service:hover{background:rgba(201,169,97,.06)}
.service h3{font-family:'Bodoni Moda',serif;font-weight:400;font-size:28px;margin:0 0 16px;color:var(--gold-dark)}
.service p{font-size:16px;line-height:1.75;color:#4A4238;margin:0;max-width:400px}

/* ---------- portfolio : video window, one glass moment ---------- */
.portfolio{padding:160px 8vw}
.portfolio .head{margin:0 auto 40px;padding:40px 48px;display:block;text-align:center;max-width:640px}
.portfolio .head h2{font-size:48px;max-width:18ch;margin:0 auto}
.feature{
  text-decoration:none;color:inherit;display:block;position:relative;
  aspect-ratio:16/8;overflow:hidden;border-radius:4px;
}
.feature .bg{position:absolute;inset:0;background:url('images/barber1-site.jpg') center top/cover no-repeat #0F241D;transition:transform .7s ease}
.feature:hover .bg{transform:scale(1.04)}
.feature .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,36,29,0) 0%,rgba(15,36,29,.25) 65%,rgba(15,36,29,.75) 100%)}
.feature .info{position:absolute;left:40px;bottom:36px;color:#F5F1EA}
.feature .info .tag{font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.feature .info .name{font-family:'Bodoni Moda',serif;font-size:38px}
.feature .info .url{font-family:'Courier Prime',monospace;font-size:12px;margin-top:10px;color:#D9D1C2}

/* ---------- process : second cream band ---------- */
.process{padding:160px 8vw;color:var(--ink)}
.process .head{margin-bottom:80px}
.process .head h2{font-size:48px;max-width:18ch;text-align:left}
.process .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
.pstep{border-top:1px solid var(--hairline);padding-top:28px}
.pstep .num{font-family:'Bodoni Moda',serif;font-size:22px;color:var(--gold);margin-bottom:18px}
.pstep h3{font-family:'Bodoni Moda',serif;font-weight:400;font-size:24px;margin:0 0 12px}
.pstep p{font-size:15px;line-height:1.7;color:#4A4238;margin:0}

/* ---------- testimonial : the other glass moment ---------- */
.testimonials{padding:180px 8vw;display:flex;justify-content:center}
.testimonials .glass{padding:64px 72px;text-align:center;max-width:900px}
.testimonials .qmark{font-family:'Bodoni Moda',serif;font-style:italic;font-size:100px;color:var(--sand);line-height:0;position:relative;top:40px}
.testimonials blockquote{
  font-family:'Bodoni Moda',serif;font-weight:400;font-size:37px;line-height:1.5;
  margin:0 auto;color:var(--ink);
}
.testimonials .attr{
  font-family:'Courier Prime',monospace;
  margin-top:40px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--taupe);
}

/* ---------- investment + contact : final cream band ---------- */
.investment{padding:170px 8vw 60px;display:flex;justify-content:center}
.investment .inner{max-width:900px;width:100%;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:44px}
.investment h2{font-size:44px;line-height:1.2;max-width:14ch}
.investment .left p{font-size:16px;line-height:1.75;color:#4A4238;max-width:42ch;margin:24px 0 0}
.investment .figure{border-top:1px solid var(--hairline);padding-top:28px;min-width:260px}
.investment .figure .from{font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe)}
.investment .figure .list{font-family:'Bodoni Moda',serif;font-size:22px;line-height:1.85;color:var(--ink);margin-top:16px}
.investment .figure .note{font-size:14px;color:var(--taupe);margin-top:16px;max-width:30ch;line-height:1.6}

.contact{padding:140px 8vw 160px;display:flex;justify-content:center;text-align:center}
.contact .inner{max-width:760px}
.contact h2{font-size:clamp(42px,6vw,72px);margin:0 auto 40px;max-width:16ch;line-height:1.15}
.contact .btn{
  font-family:'Courier Prime',monospace;
  display:inline-block;text-decoration:none;color:#F5F1EA;background:var(--ink);
  padding:20px 48px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  border-radius:2px;transition:background .35s,color .35s;
}
.contact .btn:hover{background:var(--gold);color:var(--ink)}
.contact .booking{font-family:'Courier Prime',monospace;margin-top:28px;font-size:13px;color:var(--taupe)}

/* ---------- footer ---------- */
footer{background:var(--cream);padding:0 8vw}
footer .bar{
  border-top:1px solid var(--hairline);padding:36px 0 44px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;
  max-width:1280px;margin:0 auto;
}
footer .flogo{width:150px;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
footer .flogo:hover{transform:scaleX(1.06)}
footer .flinks{display:flex;gap:32px;align-items:center;flex-wrap:wrap;font-family:'Courier Prime',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
footer .flinks a{color:var(--ink);text-decoration:none;transition:color .3s}
footer .flinks a:hover{color:var(--gold-dark)}
footer .flinks span{color:var(--taupe)}
footer .fc{font-family:'Courier Prime',monospace;font-size:12px;color:var(--taupe)}

/* ---------- footer greeting cycle ---------- */
footer .greet-cycle{
  position:relative;height:20px;margin:0 0 6px;
  font-family:'Jost',sans-serif;font-weight:300;font-size:13px;color:var(--taupe);
  text-align:center;
}
footer .greet-cycle .greet{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;opacity:0;
  animation-duration:25.9s;animation-iteration-count:infinite;animation-timing-function:var(--ease);
}
footer .greet-cycle .greet:nth-child(1){animation-name:greet1}
footer .greet-cycle .greet:nth-child(2){animation-name:greet2}
footer .greet-cycle .greet:nth-child(3){animation-name:greet3}
footer .greet-cycle .greet:nth-child(4){animation-name:greet4}
footer .greet-cycle .greet:nth-child(5){animation-name:greet5}
footer .greet-cycle .greet:nth-child(6){animation-name:greet6}
footer .greet-cycle .greet:nth-child(7){animation-name:greet7}

@keyframes greet1{
  0%{opacity:0}
  2.317%{opacity:1}
  11.969%{opacity:1}
  14.286%{opacity:0}
  100%{opacity:0}
}
@keyframes greet2{
  0%{opacity:0}
  14.286%{opacity:0}
  16.602%{opacity:1}
  26.255%{opacity:1}
  28.571%{opacity:0}
  100%{opacity:0}
}
@keyframes greet3{
  0%{opacity:0}
  28.571%{opacity:0}
  30.888%{opacity:1}
  40.541%{opacity:1}
  42.857%{opacity:0}
  100%{opacity:0}
}
@keyframes greet4{
  0%{opacity:0}
  42.857%{opacity:0}
  45.174%{opacity:1}
  54.826%{opacity:1}
  57.143%{opacity:0}
  100%{opacity:0}
}
@keyframes greet5{
  0%{opacity:0}
  57.143%{opacity:0}
  59.459%{opacity:1}
  69.112%{opacity:1}
  71.429%{opacity:0}
  100%{opacity:0}
}
@keyframes greet6{
  0%{opacity:0}
  71.429%{opacity:0}
  73.745%{opacity:1}
  83.398%{opacity:1}
  85.714%{opacity:0}
  100%{opacity:0}
}
@keyframes greet7{
  0%{opacity:0}
  85.714%{opacity:0}
  88.031%{opacity:1}
  97.683%{opacity:1}
  100%{opacity:0}
}

footer .greet-static{
  display:none;margin:0 0 6px;
  font-family:'Jost',sans-serif;font-weight:300;font-size:13px;color:var(--taupe);
  text-align:center;
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .process .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  nav .links{gap:22px}
  nav .links a:not(.cta){display:none}
  nav .links a.cta{padding:15px 22px}
  .hero .inner{margin-left:0}
  .hero .actions a{padding:14px 0}
  .about{padding:100px 8vw 70px}
  .services{padding:50px 8vw 90px}
  .services .grid{grid-template-columns:1fr}
  .service{padding:40px 0}
  .service:nth-child(odd){border-right:none}
  .portfolio{padding:90px 8vw}
  .process{padding:90px 8vw}
  .process .grid{grid-template-columns:1fr;gap:40px}
  .feature{aspect-ratio:4/3}
  .feature .info{left:24px;bottom:24px}
  .testimonials{padding:90px 8vw}
  .testimonials .glass{padding:44px 28px}
  .testimonials blockquote{font-size:26px}
  .portfolio .head{padding:32px 24px}
  .investment{padding:100px 8vw 50px}
  .investment .figure .note{font-size:15px}
  .contact{padding:100px 8vw 90px}
  footer .bar{flex-direction:column;text-align:center}
  footer .flinks a{padding:15px 0}
}
@media (max-width:600px){
  .portfolio .head h2{font-size:28px}
  .feature .info .name{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .line span{transform:none}
  .reveal{opacity:1;transform:none}
  .hero .inner{animation:none;opacity:1}
  footer .greet-cycle{display:none}
  footer .greet-static{display:block}
}