/* Starblade v3: the Claude app's design (black, brass, Bebas Neue) as the base, plus the additions at the bottom. */
@font-face{font-family:"Bebas Neue";src:url(../fonts/bebas-neue-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant";src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant";src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --ink:#0d0c0b; --ink-2:#151311; --ink-3:#1d1a17; --line:#2c2722;
  --brass:#c9a35a; --brass-2:#e4c587; --cream:#efe6d6; --muted:#a99e8c;
  --blood:#8b2a24;
  --display:"Bebas Neue",Impact,sans-serif;
  --serif:"Cormorant",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass)}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--brass);vertical-align:middle;margin-right:14px}
h2.title{font-family:var(--display);font-weight:400;font-size:clamp(48px,7vw,92px);line-height:.92;letter-spacing:.01em;margin:18px 0 0}
h2.title em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--brass);letter-spacing:0;font-size:.82em}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--brass);transition:.25s ease;cursor:pointer;font-family:var(--sans)}
.btn-solid{background:var(--brass);color:var(--ink)}
.btn-solid:hover{background:var(--brass-2);border-color:var(--brass-2)}
.btn-ghost{color:var(--cream);border-color:#4a4239}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn svg{width:16px;height:16px}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:.3s ease;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(13,12,11,.88);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{display:flex;align-items:center;gap:12px}
.logo svg{width:34px;height:34px}
.logo b{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.08em;line-height:1}
.logo small{display:block;font-size:9px;letter-spacing:.42em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.links{display:flex;gap:36px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.links a{color:#cfc5b3;position:relative}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--brass);transition:.25s}
.links a:hover{color:var(--cream)}
.links a:hover::after{right:0}
.nav .btn{padding:12px 20px}
.burger{display:none;background:none;border:0;color:var(--cream);cursor:pointer}
.burger svg{width:28px;height:28px}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:120px 0 80px}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 600px at 78% 40%,rgba(201,163,90,.16),transparent 60%),
  radial-gradient(700px 500px at 10% 90%,rgba(139,42,36,.18),transparent 60%);}
.hero .grain{position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;width:100%}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(84px,13vw,190px);line-height:.84;letter-spacing:.005em;margin:26px 0 22px}
.hero h1 span{display:block}
.hero h1 .outline{color:transparent;-webkit-text-stroke:1.5px var(--brass)}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:.4em;color:var(--brass);letter-spacing:0;vertical-align:.95em;margin-left:.15em}
.hero p.lead{max-width:470px;color:#c9bfae;font-size:18px}
.hero .cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.stats{display:flex;gap:44px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line);max-width:520px}
.stats b{font-family:var(--display);font-weight:400;font-size:44px;line-height:1;color:var(--cream);display:block}
.stats span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.emblem{position:relative;aspect-ratio:1;max-width:480px;justify-self:end;width:100%}
.emblem .ring{position:absolute;inset:0;animation:spin 60s linear infinite}
.emblem .core{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a241d,#100e0c 70%);border:1px solid #3a322a;display:grid;place-items:center;box-shadow:0 40px 120px rgba(0,0,0,.6),inset 0 0 60px rgba(201,163,90,.08)}
.emblem .core svg{width:62%}
.emblem .pole{position:absolute;right:-72px;bottom:10%;width:46px;height:180px;border-radius:23px;overflow:hidden;border:3px solid var(--brass);background:repeating-linear-gradient(-35deg,var(--cream) 0 14px,var(--blood) 14px 28px,#1b2f52 28px 42px);background-size:100% 200%;animation:pole 3s linear infinite;box-shadow:0 20px 50px rgba(0,0,0,.5)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pole{to{background-position:0 -98px}}

/* MARQUEE */
.marquee{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding:22px 0}
.marquee .track{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:marq 38s linear infinite}
.marquee span{font-family:var(--display);font-size:34px;letter-spacing:.06em;color:#7f7565;display:flex;align-items:center;gap:56px}
.marquee span i{color:var(--brass);font-style:normal;font-size:22px}
@keyframes marq{to{transform:translateX(-50%)}}

section{padding:130px 0}

/* ABOUT */
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about p{color:#c3b9a8;font-size:17px;margin-top:22px}
.about .sig{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--brass);margin-top:28px}
.frames{position:relative;height:540px}
.frame{position:absolute;border:1px solid #3a3229;overflow:hidden}
.frame.a{inset:0 22% 18% 0;background:linear-gradient(160deg,#2a2018,#120f0c)}
.frame.b{inset:42% 0 0 40%;background:linear-gradient(200deg,#3b1512,#140d0b);border-color:var(--brass)}
.frame svg{position:absolute;inset:0;width:100%;height:100%}
.frame .tag{position:absolute;left:22px;top:20px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.badge{position:absolute;left:-28px;top:52%;width:132px;height:132px;border-radius:50%;background:var(--brass);color:var(--ink);display:grid;place-items:center;text-align:center;font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.3;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.badge b{font-family:var(--display);font-weight:400;font-size:46px;letter-spacing:0;display:block;line-height:.9}

/* SERVICES */
.services{background:var(--ink-2);position:relative}
.services .head{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap;margin-bottom:64px}
.services .head p{max-width:380px;color:var(--muted)}
.tabs{display:flex;gap:8px;margin-bottom:40px;flex-wrap:wrap}
.tab{background:none;border:1px solid var(--line);color:#cfc5b3;padding:11px 20px;font:600 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.2s}
.tab.active,.tab:hover{border-color:var(--brass);color:var(--ink);background:var(--brass)}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:0 72px}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.item[hidden]{display:none}
.item .n{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:18px}
.item h3{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.03em;line-height:1}
.item p{grid-column:2/3;color:var(--muted);font-size:14px;margin-top:-8px}
.item .price{font-family:var(--display);font-size:30px;color:var(--brass-2);white-space:nowrap}
.item .price small{font-family:var(--sans);font-size:11px;color:var(--muted);letter-spacing:.1em;margin-right:4px}

/* PACKAGES */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px}
.pack{border:1px solid var(--line);padding:40px 34px;position:relative;background:var(--ink);transition:.3s}
.pack:hover{border-color:#5a4d3c;transform:translateY(-4px)}
.pack.feat{border-color:var(--brass);background:linear-gradient(180deg,#1d1812,var(--ink))}
.pack .ribbon{position:absolute;top:-1px;right:24px;background:var(--brass);color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.2em;padding:7px 12px;text-transform:uppercase}
.pack h4{font-family:var(--display);font-weight:400;font-size:38px;letter-spacing:.03em}
.pack .p{font-family:var(--display);font-size:58px;color:var(--brass);line-height:1;margin:14px 0 6px}
.pack .p small{font-family:var(--sans);font-size:13px;color:var(--muted);letter-spacing:.08em}
.pack ul{list-style:none;margin:24px 0 30px;color:#c3b9a8;font-size:15px}
.pack li{padding:9px 0;border-bottom:1px dashed var(--line);display:flex;gap:12px}
.pack li::before{content:"✦";color:var(--brass);font-size:12px;margin-top:3px}
.pack .btn{width:100%;justify-content:center}

/* PROCESS */
.process .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:70px;border-top:1px solid var(--line)}
.step{padding:40px 30px 10px 0;border-right:1px solid var(--line);margin-right:30px}
.step:last-child{border-right:0}
.step .k{font-family:var(--display);font-size:80px;line-height:1;color:transparent;-webkit-text-stroke:1px #5b4f3f}
.step h5{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.04em;margin:18px 0 8px}
.step p{color:var(--muted);font-size:15px}

/* TEAM */
.team{background:var(--ink-2)}
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:64px}
.barber{position:relative}
.portrait{aspect-ratio:3/4;border:1px solid var(--line);position:relative;overflow:hidden;background:linear-gradient(170deg,#262019,#0f0d0b)}
.portrait svg{position:absolute;inset:auto 0 0 0;width:100%;height:88%}
.portrait .mono{position:absolute;top:18px;left:20px;font-family:var(--display);font-size:20px;letter-spacing:.2em;color:var(--brass)}
.barber:hover .portrait{border-color:var(--brass)}
.barber h6{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.04em;margin-top:18px;line-height:1}
.barber span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* REVIEWS */
.reviews .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.quote{position:relative}
.quote blockquote{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.2vw,40px);line-height:1.2;color:var(--cream)}
.quote blockquote::before{content:"“";display:block;font-size:120px;line-height:.6;color:var(--brass);font-style:italic}
.quote cite{display:block;margin-top:26px;font-style:normal;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.dots{display:flex;gap:10px;margin-top:34px}
.dots button{width:34px;height:3px;border:0;background:#3a3229;cursor:pointer}
.dots button.on{background:var(--brass)}
.score{font-family:var(--display);font-size:150px;line-height:.85;color:var(--brass)}
.stars{color:var(--brass);letter-spacing:.3em;font-size:20px;margin:10px 0}

/* VISIT */
.visit{background:var(--ink-2);padding-bottom:0}
.visit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.hours{margin-top:40px}
.hours div{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.hours div b{font-weight:600;color:var(--cream)}
.hours div span{color:var(--muted)}
.hours div.today{color:var(--brass)}
.hours div.today b,.hours div.today span{color:var(--brass)}
.info{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px}
.info h6{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:8px}
.info p{color:#c3b9a8;font-size:15px}
form.book{align-self:start;background:var(--ink);border:1px solid var(--line);padding:44px;position:relative}
form.book::before{content:"";position:absolute;top:-1px;left:44px;width:80px;height:3px;background:var(--brass)}
form.book h3{font-family:var(--display);font-weight:400;font-size:46px;letter-spacing:.03em;line-height:1}
form.book p.s{color:var(--muted);font-size:14px;margin:8px 0 28px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600}
.field input,.field select{width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--cream);padding:14px 16px;font:15px var(--sans);outline:none;transition:.2s;border-radius:0;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a35a' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field input:focus,.field select:focus{border-color:var(--brass)}
.field input::-webkit-calendar-picker-indicator{filter:invert(.7) sepia(1) hue-rotate(5deg)}
form.book .btn{width:100%;justify-content:center;margin-top:8px}
.ok{display:none;margin-top:18px;padding:14px 16px;border:1px solid var(--brass);color:var(--brass-2);font-size:14px}
.ok.show{display:block}
.mapband{margin-top:100px;height:300px;position:relative;border-top:1px solid var(--line);overflow:hidden;background:#11100e}
.mapband svg{width:100%;height:100%}
.pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-70%);text-align:center}
.pin .dot{width:22px;height:22px;border-radius:50%;background:var(--brass);margin:0 auto;box-shadow:0 0 0 10px rgba(201,163,90,.18),0 0 0 22px rgba(201,163,90,.08);animation:pulse 2.4s ease-out infinite}
.pin b{display:block;margin-top:22px;font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.08em}
.pin span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(201,163,90,.12),0 0 0 30px rgba(201,163,90,.04)}}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:70px 0 40px}
footer .top{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
footer .big{font-family:var(--display);font-size:clamp(70px,14vw,200px);line-height:.8;color:transparent;-webkit-text-stroke:1px #3e362d;letter-spacing:.02em}
footer .soc{display:flex;gap:12px}
footer .soc a{width:46px;height:46px;border:1px solid var(--line);display:grid;place-items:center;transition:.2s}
footer .soc a:hover{border-color:var(--brass);color:var(--brass)}
footer .soc svg{width:18px;height:18px}
footer .bot{display:flex;justify-content:space-between;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap;gap:10px}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}

/* RESPONSIVE */
@media (max-width:980px){
  .links,.nav .btn{display:none}
  .burger{display:block}
  .nav.open .links{display:flex;position:absolute;top:84px;left:0;right:0;flex-direction:column;gap:22px;padding:28px 24px;background:var(--ink);border-bottom:1px solid var(--line)}
  .hero .wrap,.about .wrap,.reviews .wrap,.visit .wrap{grid-template-columns:1fr}
  .emblem{max-width:300px;justify-self:center;order:-1}
  .emblem .pole{right:-30px;height:130px;width:34px}
  .menu{grid-template-columns:1fr}
  .packs{grid-template-columns:1fr}
  .process .grid{grid-template-columns:1fr 1fr}
  .step{border-right:0;margin-right:0;padding-right:0}
  .crew{grid-template-columns:1fr 1fr}
  .frames{height:420px}
  .badge{left:0}
  section{padding:90px 0}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .emblem{max-width:250px}
  .emblem .pole{display:none}
  .stats{gap:26px}
  .row,.info{grid-template-columns:1fr}
  form.book{padding:30px 22px}
  .process .grid{grid-template-columns:1fr}
}

/* ==========================================================================
   v3 additions: photos, Bangla, open-now pill, real map, mobile dock,
   and the motion layer (intro, line reveals, shine, wipes, tilt, counters).
   ========================================================================== */

@font-face{font-family:"Anek Bangla";src:url(../fonts/anek-bangla-bengali.woff2) format("woff2");font-weight:300 700;font-stretch:75% 125%;font-display:swap;unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+200C-200D,U+25CC}
:root{--bn:"Anek Bangla",var(--sans);--ease:cubic-bezier(.2,.8,.2,1)}
[lang="bn"]{font-family:var(--bn)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
main,section,header{position:relative}

/* Progress line */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:80;pointer-events:none}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-2));transform:scaleX(var(--p,0));transform-origin:left}

/* Gold duotone for every photo: black shadows, brass highlights */
.gold{position:relative;overflow:hidden;isolation:isolate;background:#d8b46e}
.gold img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.92);mix-blend-mode:multiply}
.gold::after{content:"";position:absolute;inset:0;background:#120f0c;mix-blend-mode:lighten;pointer-events:none;z-index:1}

/* Buttons: glint on hover */
.btn{position:relative;overflow:hidden}
.btn>span,.btn>svg{position:relative;z-index:1}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,244,214,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.btn:hover::after{transform:translateX(120%);transition:transform .8s var(--ease)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* Hero photo, cursor glow, open-now pill, Bangla line, scroll cue */
.hero .photo{position:absolute;inset:0;opacity:.42;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 35%,#000 75%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 35%,#000 75%)}
.hero .photo img{object-position:60% 40%}
.hero .glow{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:radial-gradient(circle,rgba(201,163,90,.16),transparent 62%);transform:translate(var(--mx,70vw),var(--my,40vh));pointer-events:none;transition:transform .5s var(--ease)}
.open-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:1px solid var(--line);background:rgba(13,12,11,.55);backdrop-filter:blur(6px);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--cream);margin-bottom:22px}
.mini-pole{width:10px;height:20px;border-radius:5px;border:1px solid var(--brass);background:repeating-linear-gradient(-35deg,var(--cream) 0 4px,var(--blood) 4px 8px,#1b2f52 8px 12px);background-size:100% 28px;animation:minipole 1.4s linear infinite}
.open-pill[data-state="closed"] .mini-pole{animation:none;filter:grayscale(1) brightness(.7)}
@keyframes minipole{to{background-position:0 28px}}
.bn-line{margin-top:14px;font-size:20px;font-weight:500;color:var(--brass)}
.bn-note{margin-top:18px !important;color:var(--brass-2) !important;font-size:17px}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:26px;height:42px;margin-left:-13px;border:1px solid #4a4239;border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--brass);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Hero headline: each line rises out of a mask */
.hero h1 .ln{display:block;overflow:hidden;padding:.04em .2em .02em 0;margin-right:-.2em}
.hero h1 .ln>span{display:inline-block}
.hero h1 .ln>span.outline{color:transparent;-webkit-text-stroke:1.5px var(--brass)}
.shine{background:linear-gradient(100deg,var(--cream) 0 44%,#fff4d6 50%,var(--cream) 56% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.sweep{background:linear-gradient(var(--brass),var(--brass)) no-repeat left/0 100%;-webkit-background-clip:text;background-clip:text}

/* Emblem: follows the cursor a little */
.emblem .core{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s var(--ease)}
.emblem .razor{transform-box:view-box}

/* Marquee: second row runs the other way, outlined */
.marquee{padding:18px 0}
.marquee .track--back{margin-top:10px;animation-direction:reverse;animation-duration:46s}
.marquee .track--back span{font-family:var(--bn);font-size:28px;font-weight:600;color:transparent;-webkit-text-stroke:1px #6b5f4c}
.marquee .track--back span i{-webkit-text-stroke:0;color:var(--brass)}
.marquee:hover .track{animation-play-state:paused}

/* About frames now hold photos */
.frame.gold{position:absolute;background:#d8b46e}
.frame img{position:absolute;inset:0}
.frame .tag{z-index:2;background:rgba(13,12,11,.65);padding:6px 10px}
.badge{z-index:3}

/* Services: Bangla names and a brass line on hover */
.item{position:relative}
.item .bn{grid-column:2/3;color:var(--brass);font-size:15px;margin-top:-10px}
.item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.item:hover::after{transform:scaleX(1)}
.item h3{transition:color .3s}
.item:hover h3{color:var(--brass-2)}
.item.out{opacity:0;transform:translateY(10px)}
.item{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pack-bn{color:var(--muted);font-size:15px;margin-top:4px}
.pack{transform-style:preserve-3d;will-change:transform}
.pack.feat::before{content:"";position:absolute;inset:-1px;padding:1px;background:conic-gradient(from var(--spin),transparent 0 70%,var(--brass-2) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:border-spin 5s linear infinite;pointer-events:none}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes border-spin{to{--spin:360deg}}

/* Process: numbers light up in turn */
.step .k{transition:-webkit-text-stroke-color .8s,color .8s;transition-delay:calc(var(--d,0s) + .3s)}
.step.in .k{-webkit-text-stroke-color:var(--brass)}
.step:hover .k{color:var(--brass)}

/* Gallery */
.gallery-sec{padding-top:0}
.gallery-sec .head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:48px}
.link{color:var(--brass);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--brass);padding-bottom:4px}
.link:hover{color:var(--brass-2)}
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(150px,17vw,250px);gap:14px}
.g{grid-column:span 2;margin:0;border:1px solid var(--line)}
.g.tall{grid-row:span 2}
.g.wide{grid-column:span 4}
.g img{transition:transform 1.4s var(--ease)}
.g:hover img{transform:scale(1.07)}
.g figcaption{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--display);font-size:24px;letter-spacing:.06em;color:var(--cream);opacity:0;transform:translateY(10px);transition:.4s var(--ease)}
.g::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(13,12,11,.75),transparent 50%);opacity:0;transition:opacity .4s}
.g:hover figcaption,.g:hover::before{opacity:1;transform:none}

/* Team */
.portrait svg{transition:transform .6s var(--ease)}
.barber:hover .portrait svg{transform:translateY(-6px) scale(1.03)}
.portrait::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(201,163,90,.22),transparent 60%);opacity:0;transition:opacity .5s}
.barber:hover .portrait::after{opacity:1}
.barber{transition:transform .5s var(--ease)}
.barber:hover{transform:translateY(-6px)}
.ask{display:block;margin-top:12px;background:none;border:0;border-bottom:1px solid var(--brass);padding:0 0 3px;color:var(--brass);font:600 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.ask:hover{color:var(--brass-2)}

/* Reviews */
.quote blockquote,.quote cite{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.quote.swap blockquote,.quote.swap cite{opacity:0;transform:translateY(12px)}
.dots button{position:relative;overflow:hidden;height:3px;padding:0}
.dots button i{position:absolute;inset:0;background:var(--brass);transform:scaleX(0);transform-origin:left}
.dots button.on{background:#3a3229}
.dots button.on i{animation:fillbar 7s linear forwards}
@keyframes fillbar{to{transform:scaleX(1)}}
.stars span{display:inline-block}
.reviews .rv.in .stars span{animation:pop .5s var(--ease) both}
.reviews .rv.in .stars span:nth-child(2){animation-delay:.1s}
.reviews .rv.in .stars span:nth-child(3){animation-delay:.2s}
.reviews .rv.in .stars span:nth-child(4){animation-delay:.3s}
.reviews .rv.in .stars span:nth-child(5){animation-delay:.4s}
@keyframes pop{from{opacity:0;transform:scale(.3) rotate(-30deg)}to{opacity:1;transform:none}}

/* Booking form errors */
.err{color:#e0806f;font-size:13px;margin-top:6px}
.field input[aria-invalid="true"]{border-color:#c0574a;animation:nudge .35s}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Real map, darkened to match */
.mapband{height:380px}
.mapband iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) grayscale(.55) sepia(.25) brightness(.85) contrast(.95)}
.mapband .pin{left:auto;right:6%;top:50%;transform:translateY(-50%);padding:28px 30px;background:rgba(13,12,11,.88);border:1px solid var(--line);backdrop-filter:blur(8px)}
.mapband .pin>span{display:block}
.mapband .pin .btn{display:flex;width:max-content;margin:18px auto 0;padding:12px 18px}
.mapband .pin .btn span{color:var(--ink);font-size:12px;letter-spacing:.18em}

/* Footer: the outline fills with brass on hover */
footer .big{background:linear-gradient(var(--brass),var(--brass)) no-repeat left/0 100%;-webkit-background-clip:text;background-clip:text;transition:background-size 1.2s var(--ease)}
footer .big:hover{background-size:100% 100%}

/* Mobile dock */
.dock{display:none}

/* Wipe reveal for photos (diagonal, like a blade) */
.js .wipe{clip-path:polygon(0 0,0 0,-30% 100%,0 100%);transition:clip-path 1.3s var(--ease);transition-delay:var(--d,0s)}
.js .wipe img{transform:scale(1.2);transition:transform 1.8s var(--ease);transition-delay:var(--d,0s)}
.js .wipe.in{clip-path:polygon(0 0,130% 0,100% 100%,0 100%)}
.js .wipe.in img{transform:none}
.js .g.wipe.in:hover img{transform:scale(1.07);transition-delay:0s}
.rv{transition-delay:var(--d,0s)}

/* ---------- Page-load motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--ink);transition:transform .9s cubic-bezier(.77,0,.18,1)}
  .intro{animation:intro-out .9s cubic-bezier(.77,0,.18,1) 3s forwards}
  .intro.done{transform:translateY(-100%)}
  @keyframes intro-out{to{transform:translateY(-100%)}}
  .intro svg{width:84px;height:84px;margin:0 auto}
  .intro path{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1s ease forwards}
  .intro b{display:block;margin-top:18px;font-family:var(--display);font-weight:400;font-size:42px;letter-spacing:.32em;text-align:center;color:var(--cream);clip-path:inset(0 100% 0 0);animation:wipe-in .8s .35s var(--ease) forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes wipe-in{to{clip-path:inset(0 0 0 0)}}

  .js .hero h1 .ln>span{transform:translateY(110%)}
  .js.ready .hero h1 .ln>span{animation:line-up 1.1s var(--ease) forwards;animation-delay:calc(var(--i) * .13s + .1s)}
  .js .hero .load{opacity:0;transform:translateY(22px)}
  .js.ready .hero .load{animation:fade-up .9s var(--ease) forwards;animation-delay:calc(var(--i) * .09s + .25s)}
  .js .hero .emblem{opacity:0;transform:scale(.7) rotate(-40deg)}
  .js.ready .hero .emblem{animation:seal-in 1.4s var(--ease) .35s forwards}
  .js.ready .hero .photo img{animation:settle 3s var(--ease) both}
  .js.ready .hero h1 .ln>.shine{animation:line-up 1.1s var(--ease) .1s forwards,shine 6s ease-in-out 2.6s infinite}
  .js.ready .hero h1 .ln>.sweep{animation:line-up 1.1s var(--ease) .23s forwards,sweep 8s ease-in-out 3.2s infinite}
  .js.ready .star-line{stroke-dasharray:700;stroke-dashoffset:700;animation:draw-star 2.2s .6s ease forwards}
  @keyframes draw-star{to{stroke-dashoffset:0}}
  @keyframes line-up{to{transform:none}}
  @keyframes fade-up{to{opacity:1;transform:none}}
  @keyframes seal-in{to{opacity:1;transform:none}}
  @keyframes settle{from{transform:scale(1.15)}to{transform:none}}
  @keyframes shine{0%{background-position:100% 0}35%,100%{background-position:0 0}}
  @keyframes sweep{0%{background-size:0 100%;background-position:left}22%,45%{background-size:100% 100%;background-position:left}46%{background-position:right}70%,100%{background-size:0 100%;background-position:right}}
}
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  .rv{opacity:1;transform:none;transition:none}
  .emblem .ring,.emblem .pole,.marquee .track,.mini-pole,.pin .dot,.scroll-cue span,.pack.feat::before{animation:none}
}
.no-js .intro{display:none}

/* ---------- Small screens ---------- */
@media (max-width:980px){
  .nav.open .links{display:flex}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .g,.g.tall{grid-column:span 1}
  .g.wide{grid-column:span 2}
  .g figcaption,.g::before{opacity:1;transform:none}
  .hero .photo{opacity:.3;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 60%,transparent 100%)}
  .hero .glow,.scroll-cue{display:none}
  .mapband .pin{right:auto;left:50%;top:auto;bottom:18px;transform:translateX(-50%);width:calc(100% - 32px);max-width:360px}
  footer{padding-bottom:110px}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(13,12,11,.94);border-top:1px solid var(--line);backdrop-filter:blur(10px)}
  .dock a{padding:13px;text-align:center;border:1px solid #4a4239;font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
  .dock a.wa{background:var(--brass);border-color:var(--brass);color:var(--ink)}
}
@media (max-width:560px){
  .marquee span{font-size:26px}
  .marquee .track--back span{font-size:22px}
  .bn-line{font-size:18px}
}