@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Anton.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/Inter.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/JetBrainsMono.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* West End Barbers. Look matched to the original westendbarbers.ca design:
   obsidian #0d0d0d, surface #1a1a1a, paper #f4f4f4, steel #888, bronze #C5A377,
   Anton (display) / Inter (body) / JetBrains Mono (labels). */
:root{
  --obsidian:#0d0d0d;--surface:#1a1a1a;--paper:#f4f4f4;--steel:#888;--bronze:#C5A377;
  --line:rgba(136,136,136,.15);--line2:rgba(136,136,136,.2);
  --display:Anton,"Arial Narrow",Impact,ui-sans-serif,system-ui,sans-serif;
  --body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --px:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--obsidian);color:var(--paper);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
::selection{background:var(--bronze);color:var(--obsidian)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--bronze);color:var(--obsidian);padding:8px 12px;z-index:100;font-family:var(--mono)}
.skip:focus{left:8px}
.mono{font-family:var(--mono)}
.steel{color:var(--steel)}
.bronze{color:var(--bronze)}
.bg-obsidian{background:var(--obsidian)}
.bg-surface{background:var(--surface)}
.outline{color:transparent;-webkit-text-stroke:1.5px var(--bronze)}
.eyebrow{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze)}
.tag-mono{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* grain + shimmer (same recipes as the original) */
.grain{position:relative}
.grain::after{content:"";pointer-events:none;opacity:.06;mix-blend-mode:overlay;position:absolute;inset:0;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.shimmer{position:relative;overflow:hidden}
.shimmer::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(197,163,119,.25) 50%,transparent 70%);transform:translate(-100%);transition:transform .8s}
.shimmer:hover::before{transform:translate(100%)}

/* closure banner */
.notice{background:var(--bronze);color:var(--obsidian);text-align:center;padding:10px var(--px);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;position:relative;z-index:5}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--obsidian);display:flex;flex-direction:column}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-shade-v{position:absolute;inset:0;background:linear-gradient(to top,var(--obsidian),rgba(13,13,13,.4),rgba(13,13,13,.7))}
.hero-shade-h{position:absolute;inset:0;background:linear-gradient(to right,rgba(13,13,13,.8),transparent,rgba(13,13,13,.4))}
.hero-side{display:none}
.hero-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding:96px var(--px) 120px}
.hero-content .eyebrow{margin-bottom:24px}
.hero-title{font-family:var(--display);text-transform:uppercase;line-height:.85;letter-spacing:-.01em;font-size:18vw;color:var(--paper)}
.hero-title span{display:block}
.hero-lead{margin-top:32px;max-width:28rem;color:var(--steel);font-size:18px;line-height:1.625}
.hero-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px}
.btn-bronze,.btn-ghost{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:16px 32px;font-family:var(--mono);font-size:14px;line-height:20px;text-transform:uppercase;letter-spacing:.1em}
.btn-bronze{background:var(--bronze);color:var(--obsidian)}
.btn-bronze .btn-face{position:relative;z-index:1;display:flex;align-items:center;gap:8px}
.btn-bronze::after{content:"";position:absolute;inset:0;background:var(--paper);transform:translateY(100%);transition:transform .3s}
.btn-bronze .btn-hover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .3s}
.btn-bronze:hover::after,.btn-bronze:hover .btn-hover{transform:none}
.btn-ghost{border:1px solid rgba(136,136,136,.4);color:var(--paper);transition:color .15s,border-color .15s}
.btn-ghost:hover{border-color:var(--bronze);color:var(--bronze)}
.hero-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid var(--line2);background:rgba(13,13,13,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:16px var(--px);font-family:var(--mono);font-size:12px;line-height:16px;text-transform:uppercase;letter-spacing:.1em}
.bar-status{display:flex;align-items:center;gap:8px}
.bar-loc{display:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--steel);flex:none}
.dot.open{background:#22c55e;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.bar-rating{display:flex;align-items:center;gap:8px}
.star{color:var(--bronze)}
@keyframes pulse{50%{opacity:.5}}

/* entrance animation (CSS only) */
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.r1{animation-delay:.1s}.r2{animation-delay:.2s}.r3{animation-delay:.35s}.r4{animation-delay:.5s}.r5{animation-delay:.65s}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* MARQUEE */
.marquee{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--obsidian);padding:24px 0}
.marquee-track{display:flex;width:max-content;gap:48px;white-space:nowrap;animation:marquee 40s linear infinite}
.marquee span{display:flex;align-items:center;gap:48px;font-family:var(--display);text-transform:uppercase;font-size:36px;line-height:40px;color:rgba(244,244,244,.1);letter-spacing:-.01em}
.marquee i{font-style:normal;color:var(--bronze)}
@keyframes marquee{to{transform:translateX(calc(-50% - 24px))}}

/* SECTIONS */
.sec{position:relative;border-top:1px solid var(--line);padding:96px var(--px)}
.sec-head{margin-bottom:64px}
.sec-head-split{display:flex;flex-direction:column;gap:24px}
.h2{margin-top:16px;font-family:var(--display);text-transform:uppercase;color:var(--paper);font-size:48px;line-height:1;letter-spacing:-.01em}
.side-note{font-size:12px;line-height:16px;text-transform:uppercase;letter-spacing:.1em;max-width:20rem}
.side-note a{color:var(--bronze);display:inline-block;margin-top:8px}
.side-note a:hover{color:var(--paper)}

/* reputation */
.rep-grid{display:grid;gap:48px}
.rep-score{margin-top:24px;display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-size:72px;line-height:1}
.rep-count{margin-top:12px;font-size:14px}
.rep-copy{margin-top:24px;max-width:20rem;line-height:1.625}
.rep-links{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.btn-tag{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--bronze);border:1px solid rgba(197,163,119,.4);padding:8px 16px;transition:background .15s,color .15s}
.btn-tag:hover{background:var(--bronze);color:var(--obsidian)}
.quotes{display:grid;gap:1px;background:var(--line)}
.quote{margin:0;background:var(--obsidian);padding:32px;display:flex;flex-direction:column;justify-content:space-between}
.qmark{margin-bottom:16px}
.quote blockquote{margin:0;flex:1;color:rgba(244,244,244,.9);font-size:14px;line-height:1.625}
.quote figcaption{margin-top:24px;border-top:1px solid var(--line2);padding-top:16px}
.who{display:block;font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.025em;color:var(--paper)}
.meta{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--steel)}

/* artisans */
.art-grid{display:grid;gap:40px;align-items:center}
.art-photo{margin:0;aspect-ratio:4/5;position:relative}
.art-photo img{width:100%;height:100%;object-fit:cover}
.art-shade{position:absolute;inset:0;background:linear-gradient(to top,var(--obsidian),transparent 50%)}
.art-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:2}
.art-name{display:block;margin-top:4px;font-family:var(--display);text-transform:uppercase;font-size:36px;line-height:40px}
.art-item{border-top:1px solid var(--line2);padding:24px 0}
.art-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.art-item summary::-webkit-details-marker{display:none}
.art-h{font-family:var(--display);text-transform:uppercase;font-size:30px;line-height:36px;color:rgba(244,244,244,.4);transition:color .2s}
.art-item[open] .art-h,.art-item summary:hover .art-h{color:var(--bronze)}
.num{font-family:var(--mono);font-size:12px;color:var(--steel)}
.art-body{margin-top:16px}
.chips{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;border:1px solid rgba(197,163,119,.4);color:var(--bronze);padding:4px 8px}
.art-body p{color:var(--steel);font-size:14px;line-height:1.625;max-width:28rem}

/* portfolio */
.work{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{margin:0;position:relative;overflow:hidden;background:var(--obsidian);aspect-ratio:4/5}
.tile.wide{grid-column:span 2;aspect-ratio:16/10}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.tile:hover img{transform:scale(1.1)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,13,.9),transparent 50%);opacity:.7;transition:opacity .15s;z-index:1}
.tile:hover::after{opacity:.9}
.tile figcaption{position:absolute;left:0;bottom:0;padding:16px;z-index:2}
.tile .tag-mono{letter-spacing:.25em}
.tile-name{display:block;margin-top:4px;font-family:var(--display);text-transform:uppercase;font-size:18px;line-height:1}
.tile i{position:absolute;width:0;height:0;border:0 solid rgba(197,163,119,0);transition:all .5s;z-index:2}
.tile .c1{top:0;left:0;border-left-width:1px;border-top-width:1px}
.tile .c2{bottom:0;right:0;border-right-width:1px;border-bottom-width:1px}
.tile:hover i{width:32px;height:32px;border-color:rgba(197,163,119,.6)}

/* atmosphere */
.atmos{position:relative;height:70vh;min-height:420px;overflow:hidden;border-top:1px solid var(--line)}
.atmos>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.atmos-shade{position:absolute;inset:0;background:rgba(13,13,13,.75)}
.atmos-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--px)}
.atmos-content .eyebrow{margin-bottom:16px}
.atmos-title{font-family:var(--display);text-transform:uppercase;font-size:48px;line-height:.9;max-width:56rem;text-wrap:balance}

/* service menu */
.menu{display:grid;gap:1px;background:var(--line)}
.svc{position:relative;background:var(--obsidian);padding:32px;transition:background .15s}
.svc:hover{background:var(--surface)}
.svc-top{display:flex;align-items:flex-start;justify-content:space-between}
.svc-top .num{font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.svc h3{margin-top:24px;font-family:var(--display);text-transform:uppercase;font-size:24px;line-height:32px;color:var(--paper)}
.svc-meta{margin-top:16px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel)}
.svc-price{margin-top:24px;display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line2);padding-top:16px}
.svc-price span{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--steel)}
.svc-price strong{font-family:var(--mono);font-weight:400;font-size:24px;line-height:32px;color:var(--bronze)}
.bar{position:absolute;bottom:0;left:0;height:2px;width:0;background:var(--bronze);transition:width .5s}
.svc:hover .bar{width:100%}
.foot-note{margin-top:32px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}

/* location */
.loc-grid{display:grid;gap:48px}
.loc-info{font-style:normal;margin-top:40px;font-family:var(--mono);font-size:14px;line-height:20px}
.loc-info p{display:flex;align-items:flex-start;gap:12px;margin-bottom:24px}
.loc-info svg{flex:none;margin-top:2px}
.loc-info a:hover{color:var(--bronze)}
.hours-wrap{display:flex;gap:12px;align-items:flex-start;font-family:var(--mono)}
.hours-wrap svg{flex:none;margin-top:2px}
.hours{margin:0;display:grid;grid-template-columns:1fr;gap:6px 32px;font-size:12px;line-height:16px;width:100%;max-width:22rem}
.hours div{display:flex;justify-content:space-between;gap:16px}
.hours dt{color:var(--steel)}
.hours dd{margin:0;color:var(--paper)}
.hours div.is-today dt,.hours div.is-today dd{color:var(--bronze)}
.closure-note{margin-top:24px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.small-note{margin-top:8px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.map{border:1px solid var(--line2);aspect-ratio:4/3;background:var(--surface);overflow:hidden}
.map iframe{display:block;width:100%;height:100%;border:0}
.big-cta{margin-top:64px;display:grid;gap:16px}
.big{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;padding:32px 16px;font-family:var(--display);text-transform:uppercase;font-size:30px;line-height:36px}
.big-ghost{border:1px solid rgba(197,163,119,.4);color:var(--paper)}
.big-bronze{background:var(--bronze);color:var(--obsidian)}
.big .bar{height:4px}
.big-bronze .bar{background:var(--obsidian)}
.big:hover .bar{width:100%}

.footer{border-top:1px solid var(--line);padding:24px var(--px) 104px;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:10px;line-height:1.7;text-transform:uppercase;letter-spacing:.1em;color:var(--steel)}
.footer a:hover{color:var(--bronze)}

/* floating call button (sits where the old "Assistant" button was) */
.fab{position:fixed;right:24px;bottom:24px;z-index:50;display:flex;align-items:center;gap:12px;background:var(--bronze);color:var(--obsidian);padding:16px 24px 16px 20px;box-shadow:0 25px 50px -12px rgba(197,163,119,.2);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;transition:background .15s}
.fab:hover{background:var(--paper)}
.fab-dot{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid var(--obsidian);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}

/* scroll reveal: only hidden when JS is running, so content is always visible without JS */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media (min-width:640px){
  :root{--px:48px}
  .hero-title{font-size:15vw}
  .marquee span{font-size:60px;line-height:1}
  .sec{padding-top:128px;padding-bottom:128px}
  .h2{font-size:72px}
  .sec-head-split{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .art-h{font-size:48px;line-height:1}
  .work{gap:16px}
  .tile figcaption{padding:20px}
  .tile-name{font-size:20px}
  .atmos-title{font-size:72px}
  .menu{grid-template-columns:repeat(2,1fr)}
  .big-cta{grid-template-columns:1fr 1fr}
  .big{font-size:36px;line-height:40px}
  .hours{grid-template-columns:1fr 1fr}
  .footer{flex-direction:row;justify-content:space-between;padding-bottom:24px}
}
@media (min-width:768px){.work{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){
  :root{--px:96px}
  .hero-title{font-size:11rem}
  .hero-side{display:flex;position:absolute;left:24px;top:50%;z-index:2;transform:translateY(-50%) rotate(-90deg);transform-origin:left}
  .hero-side span{font-family:var(--mono);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--steel);white-space:nowrap}
  .bar-loc{display:inline}
  .rep-grid{grid-template-columns:1fr 3fr;gap:32px}
  .quotes{grid-template-columns:repeat(3,1fr)}
  .art-grid{grid-template-columns:1fr 1fr}
  .work{grid-template-columns:repeat(4,1fr)}
  .atmos-title{font-size:96px}
  .menu{grid-template-columns:repeat(3,1fr)}
  .loc-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}
/* mobile: show three quotes like the original; the rest appear from 640px up (all stay in the HTML) */
@media (max-width:639px){.quote:nth-child(n+4){display:none}}