/* =========================================================================
   Barber-Lou — brand layer
   Loaded after the Webflow stylesheet. The layout, spacing and motion of the
   original design are untouched; this only re-skins it to the Barber-Lou
   identity (black / white / #FF6600) and styles the pieces the barbershop
   content needs: the price tables, the clipper stage and the contact block.
   ========================================================================= */

:root {
  --bl-orange: #ff6600;
  --bl-orange-deep: #e25a00;
  --bl-ink: #0b0b0b;
  --bl-ink-2: #151515;
  --bl-ink-3: #242424;
  --bl-paper: #ffffff;
  --bl-stone: #ededed;
  --bl-mute: #838383;
  --bl-line: #dfdfdf;
  --bl-display: 'Alumni Sans', Impact, 'Arial Narrow', sans-serif;
}

/* ---------------------------------------------------------------- basics */
body { background-color: var(--bl-paper); color: var(--bl-ink); }

::selection { background: var(--bl-orange); color: #fff; }

*[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 0.125rem solid var(--bl-orange) !important;
  outline-offset: 0.125rem;
}

/* -------------------------------------------------- accents: blue → orange */
.button.is-small:hover,
.nav-button.is-icon:hover { background-color: var(--bl-orange); }

.text-style-link { color: var(--bl-orange); font-weight: 600; }
.text-style-link:hover { color: var(--bl-orange-deep); text-decoration: underline; }

.button { border-radius: 100px; letter-spacing: .04em; transition: background-color .25s, color .25s, transform .25s; }
.button:hover { transform: translateY(-1px); }
.button.is-orange { background-color: var(--bl-orange); }
.button.is-orange:hover { background-color: var(--bl-ink); }

.nav-button { font-weight: 600; letter-spacing: .06em; }
.nav-button.is-current { color: #fff; background-color: var(--bl-ink); }
.nav-wrapper { box-shadow: 0 10px 34px rgba(0, 0, 0, .12); }

/* ------------------------------------------------------------ brand marks */
.bl-logo { display: block; width: 100%; height: auto; }
.bl-logo.is-nav { width: 7.2rem; margin: 0 .55rem 0 .35rem; }

.nav-wrapper .bl-nav-mark {
  display: flex; align-items: center; padding: 0 .55rem 0 .5rem;
}
.nav-wrapper .bl-nav-mark img { width: 6.4rem; height: auto; display: block; }
@media screen and (max-width: 767px) { .nav-wrapper .bl-nav-mark { display: none; } }

/* --------------------------------------------------- the fixed shop panel */
.social-wrapper {
  flex-direction: column; gap: .6rem; box-shadow: 0 -6px 34px rgba(0, 0, 0, .10);
  transition: opacity .5s ease, transform .5s cubic-bezier(.165,.84,.44,1);
}
/* it belongs to the hero; once the price wall is in play it just covers copy */
.social-wrapper.is-tucked { opacity: 0; transform: translateY(1.5rem); pointer-events: none; }
.social-wrapper .bl-panel-word { width: 100%; }
.social-wrapper .bl-panel-word img { width: 100%; height: auto; display: block; }
.social-wrapper .bl-panel-meta {
  font-size: .68rem; line-height: 1.35; color: var(--bl-mute); letter-spacing: .02em;
}
.social-wrapper .bl-panel-meta strong { color: var(--bl-ink); font-weight: 700; }

.video {
  background-image: url("../img/shop-card.svg");
  background-color: var(--bl-ink);
  background-size: cover;
}
.video-butoon { background-color: var(--bl-orange); }
.video_button-icon { color: #fff; }

/* --------------------------------------------------- service tab switcher */
.tab-wrapper {
  background-color: var(--bl-ink-2);
  transition: transform .5s cubic-bezier(.165, .84, .44, 1), box-shadow .5s;
}
.tab-wrapper:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.tab-wrapper::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: 20px; box-shadow: inset 0 0 0 0 var(--bl-orange); transition: box-shadow .35s;
}
.tab-wrapper.is-active::after { box-shadow: inset 0 0 0 2px var(--bl-orange); }
.tab-wrapper.is-active .text-tab { color: var(--bl-orange); }

.text-tab {
  font-family: var(--bl-display);
  font-size: 1.5rem; font-weight: 700; line-height: .95;
  letter-spacing: .02em; text-transform: uppercase;
}
.tab-wrapper .bl-tab-price {
  z-index: 10; position: relative; margin-top: .2rem;
  font-size: .7rem; letter-spacing: .08em; color: rgba(255, 255, 255, .72);
}
.gradient-overlay { background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .72)); }

/* ------------------------------------------------------- rotating CTA disc */
.text-circle { background-image: url("../img/circle-text.svg"); animation: bl-spin 18s linear infinite; }
.button-circle { box-shadow: 0 14px 40px rgba(0, 0, 0, .18); }
.button-circle .arrow { color: var(--bl-orange); }
@keyframes bl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .text-circle { animation: none; } }

/* ------------------------------------------------------- the 3D clipper */
.apple-watch { pointer-events: none; }
.clipper-canvas { display: block; width: 100%; height: 100%; }
.apple-watch.is-fallback { display: flex; align-items: center; justify-content: center; }
.clipper-fallback img { width: min(42vw, 22rem); height: auto; opacity: .9; }

/* ----------------------------------------------------------------- hero */
.heading-style-h1 { letter-spacing: -.01em; }
[data-hero-title] { transition: opacity .18s ease, transform .18s ease; }
[data-hero-title].is-swapping { opacity: 0; transform: translateY(-.4rem); }

.heading-style-h1 .bl-brandline { display: block; color: var(--bl-orange); }

.infor-content { box-shadow: 0 8px 26px rgba(0, 0, 0, .08); }
.infor-content .text-style-number { color: var(--bl-ink); }
.infor-content .text-size-small { color: var(--bl-mute); max-width: 13rem; }

.bl-eyebrow {
  font-family: var(--bl-display);
  font-size: 1.05rem; font-weight: 700; letter-spacing: .32em;
  text-transform: uppercase; color: var(--bl-orange);
}

/* -------------------------------------------------------- story sections */
/* The export set section headings in the body font while everything with any
   character on this site - the hero, the numbers, the price tables - speaks in
   Alumni Sans. That mismatch is what made these blocks read flat. Same voice
   as the hero now, sized fluidly so it never wraps mid-word on a phone. */
.heading-style-h2 {
  font-family: var(--bl-display);
  font-size: clamp(3.1rem, 9vw, 5.75rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: -.5rem;
}

.heading-style-h4 {
  font-family: var(--bl-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bl-orange);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .35rem;
}
.heading-style-h4::before {
  content: ""; flex: none;
  width: 2.1rem; height: 3px;
  background-color: currentColor;
}
.top-half .heading-style-h4 { justify-content: center; }

.text-size-regular {
  font-size: 1.12rem;
  line-height: 1.62;
  color: #2f2f2f;
  max-width: 34rem;
}

.fullscreen.is-4 .heading-style-h4,
.fullscreen.is-6 .heading-style-h4 { color: var(--bl-orange); }
.fullscreen.is-4 .text-size-regular { color: rgba(255, 255, 255, .74); }

.bl-tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.bl-tag {
  border: 1px solid rgba(0, 0, 0, .16); border-radius: 100px;
  padding: .4rem .95rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.fullscreen.is-4 .bl-tag { border-color: rgba(255, 255, 255, .28); color: #fff; }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.165,.84,.44,1), transform .8s cubic-bezier(.165,.84,.44,1); }
[data-reveal].is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- marquee */
.marquee_inner { animation: bl-marquee 38s linear infinite; will-change: transform; }
@keyframes bl-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .marquee_inner { animation: none; } }

/* ------------------------------------------------------------ price wall */
/* The export fixes this section at 200vh, which was right for a three-row
   spec table. Barber-Lou's board is 24 services, so let it size to content. */
.fullscreen.is-5 {
  background-color: var(--bl-stone);
  height: auto; min-height: 100vh; padding-bottom: 6rem;
}
.compare-table { width: 88%; }
.table { box-shadow: 0 18px 50px rgba(0, 0, 0, .07); gap: 1rem; }
.table .image { mix-blend-mode: normal; border-radius: 14px; width: 100%; height: auto; }
.table .heading-style-h5 { font-size: 1.5rem; font-family: var(--bl-display); letter-spacing: .04em; text-transform: uppercase; }
.fullscreen.is-5 .heading-style-h2, .fullscreen.is-6 .heading-style-h2 { text-align: center; }

.color-dot.pole-white { background-color: #fff; box-shadow: inset 0 0 0 1px var(--bl-line); }
.color-dot.pole-orange { background-color: var(--bl-orange); }
.color-dot.pole-red { background-color: #d62828; }
.color-dot.pole-blue { background-color: #1d4ed8; }

.pricing-wrapper { display: flex; align-items: baseline; gap: .4rem; }
.pricing-wrapper .bl-from { color: var(--bl-mute); font-size: .78rem; }
.pricing-wrapper .bl-price {
  font-family: var(--bl-display); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--bl-ink);
}

.bl-price-list { width: 100%; display: flex; flex-direction: column; gap: .1rem; }
.bl-price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  text-align: left; padding: .5rem .25rem; border-bottom: 1px solid #f0f0f0;
}
.bl-price-row:last-child { border-bottom: 0; }
.bl-price-row .bl-svc { font-size: .84rem; line-height: 1.3; }
.bl-price-row .bl-svc small { display: block; color: var(--bl-mute); font-size: .72rem; margin-top: .1rem; }
.bl-price-row .bl-amt { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.bl-price-row .bl-code {
  display: inline-block; min-width: 2.1rem; color: var(--bl-orange);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
}

.bl-note { color: var(--bl-mute); font-size: .74rem; text-align: center; margin-top: .25rem; }

/* ------------------------------------------------------- contact / visit */
.fullscreen.is-6 {
  z-index: 100; position: relative;
  background-color: var(--bl-ink); color: #fff;
  height: auto; min-height: 100vh;
  justify-content: center; gap: 2.5rem;
  padding: 7rem 2rem 3rem;
}
.fullscreen.is-6 .heading-style-h2 { color: #fff; }

.bl-visit-grid {
  width: 88%; max-width: 78rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.bl-card {
  background-color: var(--bl-ink-2); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px; padding: 1.75rem;
  display: flex; flex-direction: column; gap: .7rem;
  transition: border-color .4s, transform .4s cubic-bezier(.165,.84,.44,1);
}
.bl-card:hover { border-color: var(--bl-orange); transform: translateY(-4px); }
.bl-card .bl-card-label {
  font-family: var(--bl-display); font-size: 1.4rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.bl-card .bl-card-kicker { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bl-orange); }
.bl-card p, .bl-card li { color: rgba(255, 255, 255, .72); font-size: .9rem; line-height: 1.6; margin: 0; }
.bl-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.bl-card .bl-hours-row { display: flex; justify-content: space-between; gap: 1rem; }
.bl-card .bl-hours-row span:last-child { color: #fff; font-weight: 600; }
.bl-card a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--bl-orange); align-self: flex-start; }
.bl-card a:hover { color: var(--bl-orange); }
.bl-card .bl-tel {
  font-family: var(--bl-display); font-size: 2.4rem; font-weight: 700; line-height: 1;
  color: #fff; border: 0; letter-spacing: .01em;
}
.bl-card .bl-tel:hover { color: var(--bl-orange); }

/* ---------------------------------------------------------------- footer */
.bl-footer {
  width: 100%; max-width: 78rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, .12);
}
.bl-footer img { height: 2.4rem; width: auto; }
.bl-footer .bl-foot-note { font-size: .74rem; color: rgba(255, 255, 255, .5); letter-spacing: .04em; }
.bl-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.bl-footer nav a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: .8rem; letter-spacing: .06em; }
.bl-footer nav a:hover { color: var(--bl-orange); }

/* ------------------------------------------------------------ responsive */
@media screen and (max-width: 991px) {
  .bl-visit-grid { grid-template-columns: 1fr 1fr; width: 92%; }
  .compare-table { width: 92%; margin-top: 48px; }
  .compare-main { flex-direction: column; align-items: center; gap: 1.5rem; }
  .table { max-width: 34rem; }

  /* The stage has to cover two jobs on a phone: on landing the clipper needs
     the empty band above the headline, and once pinned it needs to sit below
     full-width copy. So the box spans most of the screen and markAt() places
     the clipper at the top of it for the hero, the bottom of it after. */
  .apple-watch { height: 62vh; top: 24vh; }
  .tab-hero { height: 68vh; margin-top: -58vh; }
  .tab-menu.mobile .tab-wrapper { height: 8rem; }
  .tab-menu.mobile .menu-rapper { padding-top: 4.4rem; padding-bottom: 1rem; }
  .tab-menu.mobile .text-tab { font-size: 1.15rem; }
}
@media screen and (max-width: 767px) {
  /* the export's two smallest breakpoints jump 40px -> 120px, which wraps the
     wordmark mid-word; ramp it smoothly instead. */
  .heading-style-h1 { font-size: min(13vw, 6rem); }
  .tab-hero { padding-top: 4rem; }
  .bl-visit-grid { grid-template-columns: 1fr; }
  .fullscreen.is-6 { padding-top: 5rem; }
  .bl-card .bl-tel { font-size: 2rem; }
  .text-tab { font-size: 1.25rem; }
}
@media screen and (max-width: 479px) {
  .bl-price-row .bl-svc { font-size: .8rem; }
  .pricing-wrapper .bl-price { font-size: 1.8rem; }

  /* The export clips .home-wrapper at this breakpoint, which makes it the
     scroll container for everything inside it and so kills the clipper's
     position:sticky - on phones the hero scrolled away instead of travelling
     down the page. The horizontal overflow it was guarding against is the tab
     strip, so clip that instead of an ancestor of the sticky element. */
  .home-wrapper { overflow: visible; }
  .tab-menu.mobile { overflow: hidden; }
  .tab-menu.mobile .menu-rapper { width: 100%; }
}

/* Webflow's "Made in Webflow" badge is not part of the brand. */
.w-webflow-badge { display: none !important; }