/* ═══════════════════════════════════════════════
   Style Barbers — demo site
   Carter Webb, 2026
   ═══════════════════════════════════════════════ */

:root {
  --canvas:   #e5e5e5;
  --card:     #ffffff;
  --ink:      #000000;
  --ash:      #8a8a8a;
  --mist:     #c9c9c9;
  --slate:    #4a4a4a;
  --accent:   #8b3fd9;
  --accent-d: #6f2fb4;
  --yellow:   #f4e04d;

  --r-sm: 16px;
  --r:    24px;
  --r-lg: 40px;
  --r-xl: 64px;
  --pill: 48px;

  --gap:  80px;
  --pad:  24px;
  --max:  1200px;

  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

/* Keyboard focus. Without this the only cue is the browser default, which gets
   lost on the pill buttons and against the dark sections. :focus-visible so it
   shows for keyboard users without ringing every mouse click. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible,
.book :focus-visible,
.footer :focus-visible {
  outline-color: var(--yellow);
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ─── Type ─── */
.h2 {
  font-family: var(--display);
  font-size: clamp(44px, 7vw, 96px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.h2--light { color: #fff; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow--light { color: var(--yellow); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--pill);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-d); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--slate); }
.btn--lg { padding: 17px 34px; font-size: 16px; }
.btn--block { display: flex; width: 100%; margin-top: 28px; }

/* ─── Nav ─── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px clamp(16px, 4vw, 40px);
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav--solid {
  background: rgba(229,229,229,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0,0,0,.09);
  padding-top: 12px;
  padding-bottom: 12px;
}
.nav__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.nav__logo { width: 38px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.nav__name {
  font-family: var(--display);
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #fff;
  transition: color .3s ease;
}
.nav__name em { font-style: normal; opacity: .72; }
.nav--solid .nav__name { color: var(--ink); }
.nav--solid .nav__logo { filter: none; }

.nav__links { display: flex; gap: 30px; }
.nav__links a {
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255,255,255,.9);
  transition: color .3s ease, opacity .2s ease;
}
.nav__links a:hover { opacity: .65; }
.nav--solid .nav__links a { color: var(--slate); }
.nav--solid .nav__links a:hover { color: var(--accent); opacity: 1; }
.nav__cta { padding: 11px 22px; font-size: 14.5px; }

@media (max-width: 860px) {
  .nav__links { display: none; }
}
@media (max-width: 520px) {
  .nav { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .nav__logo { width: 28px; flex: none; }
  .nav__name { font-size: 16px; }
  .nav__brand { gap: 8px; min-width: 0; overflow: hidden; }
  .nav__cta { padding: 10px 15px; font-size: 13px; flex: none; }
}

/* ─── Hero ─── */
/* Fills the viewport on anything landscape-ish — anything less looks unfinished.
   The shopfront photo is 16:9, so only genuinely portrait screens need the height
   capped against width; without that a phone would crop in to just the door. */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback: svh needs Safari 15.4+, and some in-app
                          WebViews are older. Without this the whole
                          declaration is dropped and the hero collapses. */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
/* Portrait screens crop a 16:9 photo horizontally, so the height is capped
   against width — at full height you'd get the doorway and nothing else.
   Framed on the lit door rather than the fascia: pulling the sign into view
   sounds better but puts its own lettering directly behind the headline. */
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
/* Their sign carries the name, so the type block sits bottom-left and the
   scrim is weighted that way to keep it off the illuminated fascia. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 26%, rgba(0,0,0,.12) 52%, rgba(0,0,0,0) 70%),
    linear-gradient(105deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,0) 62%);
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(48px, 7vh, 76px);
  color: #fff;
}
.hero__title {
  font-family: var(--display);
  font-size: clamp(32px, 6.2vw, 86px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.012em;
  max-width: 16ch;
  overflow-wrap: break-word;
  text-shadow: 0 4px 34px rgba(0,0,0,.45);
}
.hero__sub {
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-top: 20px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (max-width: 520px) {
  .hero__sub { font-size: 12px; letter-spacing: .14em; }
  .hero__actions { margin-top: 26px; }
  .hero__actions .btn--lg { padding: 15px 24px; font-size: 15px; }
}
.hero__rating {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 22px; font-size: 14px;
  color: rgba(255,255,255,.92);
}
.hero__rating strong { font-size: 17px; }
.hero__rating-count { color: rgba(255,255,255,.62); }
.stars { color: var(--yellow); letter-spacing: 2px; }

/* Portrait: stack instead of overlaying. A 16:9 photo inside a tall box can only
   ever show ~40% of its width, so the shopfront gets sliced whatever crop you
   pick. Showing it whole and putting the type underneath solves that, and also
   removes the collision between the headline and the sign's own lettering. */
@media (max-aspect-ratio: 4/5) {
  .hero {
    min-height: 0;
    display: block;
    background: var(--ink);
    /* Nav is fixed and transparent-until-scroll, so it floats directly over
       whatever's beneath it. On desktop that's fine — the scrim under the
       headline darkens the top of the photo. Here there's no scrim, so the
       photo starts clear of the nav instead: 79px nav height + a slim gap. */
    padding-top: 84px;
  }
  .hero__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-position: center;
  }
  .hero__scrim { display: none; }
  .hero__inner { position: static; padding: 26px var(--pad) 34px; }
  .hero__rating { margin-bottom: 16px; }
  .hero__title { max-width: none; }
}

/* The brand yellow is a dark-surface colour: 15.6:1 on black in the hero and
   footer, but only 1.07:1 on the light canvas — invisible, against a 3:1 floor.
   On light, outline the glyph instead of recolouring it. paint-order puts the
   stroke BEHIND the fill so the yellow stays whole and the points stay sharp;
   without it the stroke is centred and thickens them. Older browsers ignore
   paint-order and get the centred stroke, which is still perfectly legible. */
.stars--lg {
  font-size: 26px;
  letter-spacing: 4px;
  -webkit-text-stroke: 1.5px var(--ink);
          text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}


/* ─── Marquee ─── */
.marquee {
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding: 17px 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 52s linear infinite;
  font-family: var(--display);
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.marquee__group { display: flex; align-items: center; gap: 30px; padding-right: 30px; }
.marquee__track i { color: var(--accent); font-style: normal; font-size: 15px; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ─── Sections ─── */
.section { padding: clamp(64px, 10vw, 128px) 0; }
.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.section__lede {
  max-width: 340px;
  color: var(--slate);
  font-size: 16px;
}

/* ─── Cards ─── */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 40px);
}

/* ─── Services ─── */
.services {
  position: relative;
  padding: clamp(72px, 11vw, 140px) 0;
  overflow: hidden;
}
.services__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Weighted left so the heading stays legible while the room itself still
   reads on the right — the interior is the selling point, not a texture. */
.services__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.66) 30%,
    rgba(0,0,0,.34) 52%,
    rgba(0,0,0,.2) 100%);
}
@media (max-width: 900px) {
  .services__scrim { background: rgba(0,0,0,.62); }
}
.services__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.services__head { align-self: center; }
.services__note {
  color: rgba(255,255,255,.72);
  margin-top: 20px;
  max-width: 330px;
  font-size: 16px;
}
@media (max-width: 900px) {
  .services__inner { grid-template-columns: 1fr; }
}

/* ─── Pricing ─── */
.pricing { border-radius: var(--r-xl); }
.pricing__list { list-style: none; }
.pricing__list > li { padding: 15px 0; border-bottom: 1px solid var(--mist); }
.pricing__list > li:last-child { border-bottom: 0; }
.pricing__row { display: flex; align-items: baseline; gap: 10px; }
.pricing__name { font-weight: 600; font-size: 17px; }
.pricing__dots {
  flex: 1;
  border-bottom: 1.5px dotted var(--mist);
  transform: translateY(-4px);
}
.pricing__price { font-family: var(--display); font-size: 26px; letter-spacing: .01em; }
.pricing__desc { font-size: 13.5px; color: var(--ash); margin-top: 3px; }
.pricing__featured {
  background: rgba(139,63,217,.055);
  border-radius: var(--r-sm);
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin: 4px -16px;
  border-bottom-color: transparent !important;
}
.tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  background: var(--accent); color: #fff;
  border-radius: var(--pill);
  padding: 3px 10px;
  margin-left: 7px;
  vertical-align: 2px;
}
.tag--quiet { background: var(--mist); color: var(--slate); }

/* ─── Work rows ───
   Two full-bleed rows of square tiles running opposite ways at offset speeds.
   No captions: the photographs are the argument. Tiles are 280px rather than
   the ~190px the reference uses — a fade has to be legible to be persuasive. */
.work { padding-bottom: clamp(48px, 7vw, 88px); }
.wrows {
  --tile: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
}
.wrow { overflow: hidden; }
.wrow__track {
  display: flex;
  width: max-content;
  animation: slide var(--dur, 70s) linear infinite;
  will-change: transform;
}
.wrow--rev .wrow__track { animation-direction: reverse; }
.wrow:hover .wrow__track { animation-play-state: paused; }
.wrow__set { display: flex; gap: 16px; padding-right: 16px; }

.wrow__set img {
  width: var(--tile);
  height: var(--tile);
  flex: none;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--mist);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.wrow__set img:hover { transform: scale(1.03); }

@media (max-width: 900px) { .wrows { --tile: 220px; } }
@media (max-width: 560px) {
  .wrows {
    --tile: 180px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }
}

/* ─── Reviews ───
   Full top padding: this section used to follow the work grid (light on light,
   so they flowed together) but now follows the dark prices section and needs
   its own breathing room. */
.reviews__score { text-align: center; margin-bottom: 44px; }
.reviews__num {
  font-family: var(--display);
  font-size: 76px;
  line-height: .95;
  margin-top: 6px;
}
.reviews__meta { color: var(--ash); font-size: 14.5px; }
/* ─── Review columns ───
   Three columns on an infinite vertical loop, adjacent ones running opposite
   ways, faded top and bottom. Slow on purpose — these are for reading. Hovering
   a column pauses just that column so a quote can be finished. */
.rcols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  height: 620px;
  overflow: hidden;
}
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .rcols {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  }
}
.rcol { overflow: hidden; }
.rcol__track {
  display: flex;
  flex-direction: column;
  animation: rise var(--dur, 90s) linear infinite;
  will-change: transform;
}
.rcol--down .rcol__track { animation-direction: reverse; }
.rcol:hover .rcol__track { animation-play-state: paused; }
.rcol__set { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }

@keyframes rise { to { transform: translateY(-50%); } }

.rcard {
  background: var(--card);
  border-radius: var(--r);
  padding: 24px 22px;
}
.rcard p {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.rcard footer {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--canvas);
}
.rcard__mono {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(139, 63, 217, .1);
  color: var(--accent);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1;
  padding-top: 2px;
}
.rcard__who { min-width: 0; }
.rcard cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
}
.rcard__who span {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--ash);
}

@media (max-width: 900px) {
  .rcols { grid-template-columns: repeat(2, 1fr); height: 560px; }
  .rcols .rcol:nth-child(3) { display: none; }
}
/* Keep two columns on phones — one up, one down — rather than dropping to a
   single column, which read as lopsided. Cards shrink to suit the narrower
   measure. */
@media (max-width: 560px) {
  .rcols { grid-template-columns: repeat(2, 1fr); gap: 10px; height: 440px; }
  .rcol__set { gap: 10px; padding-bottom: 10px; }
  .rcard { padding: 14px 13px; border-radius: var(--r-sm); }
  .rcard p { font-size: 12.5px; line-height: 1.45; }
  .rcard footer { margin-top: 12px; padding-top: 10px; gap: 8px; }
  .rcard__mono { width: 26px; height: 26px; font-size: 13px; }
  .rcard cite { font-size: 12px; }
  .rcard__who span { font-size: 10.5px; }
}

.reviews__all {
  display: block;
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: var(--slate);
  text-decoration: none;
}
.reviews__all u { color: var(--accent); text-decoration: none; border-bottom: 1.5px solid currentColor; }
.reviews__all:hover u { color: var(--accent-d); }

/* ─── Team ─── */
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.person { border-radius: var(--r); text-align: center; }
.person__photo {
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 1;
  margin-bottom: 20px;
  background: var(--canvas);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__photo--empty {
  display: grid;
  place-items: center;
  background: var(--canvas);
  border: 1.5px dashed var(--mist);
}
.person__photo--empty span { color: var(--ash); font-size: 13px; }
.person__photo--empty svg {
  width: 44%;
  height: auto;
  fill: none;
  stroke: var(--mist);
  stroke-width: 3.5;
  stroke-linecap: round;
}
.person__photo--empty svg circle { fill: var(--mist); stroke: none; }
.person h3 { font-family: var(--display); font-size: 27px; text-transform: uppercase; }
.person p { color: var(--ash); font-size: 14.5px; margin-top: 2px; }
.team__note {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--ash);
  text-align: center;
}
@media (max-width: 780px) { .team__grid { grid-template-columns: 1fr; } }

/* ─── Book ─── */
.book { background: var(--ink); }
.book__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.book__lede {
  color: rgba(255,255,255,.66);
  margin-top: 22px;
  max-width: 400px;
  font-size: 16px;
}
.widget { border-radius: var(--r-xl); }
.widget__placeholder {
  border: 1.5px dashed var(--mist);
  border-radius: var(--r);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}
.widget__label {
  font-family: var(--display);
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.widget__text {
  color: var(--slate);
  font-size: 15px;
  max-width: 330px;
  margin: 0 auto 24px;
}
.widget__note { margin-top: 16px; font-size: 12px; color: var(--ash); }
@media (max-width: 900px) { .book__inner { grid-template-columns: 1fr; } }

/* ─── Visit ─── */
.visit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.visit__addr { color: var(--ash); margin: 14px 0 28px; font-size: 17px; }
.hours { border-radius: var(--r-lg); }
.hours__title {
  font-family: var(--display);
  font-size: 23px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hours__list { list-style: none; }
.hours__list li {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--canvas);
  font-size: 15px;
}
.hours__list li:last-child { border-bottom: 0; }
.hours__list span:first-child { color: var(--slate); }
.hours__list span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 780px) { .visit__grid { grid-template-columns: 1fr; } }

/* ─── Footer ─── */
.footer { background: var(--ink); color: #fff; padding-top: 72px; }
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-bottom: 56px;
}
.footer__logo { width: 62px; margin-bottom: 16px; }
.footer__name { font-family: var(--display); font-size: 29px; text-transform: uppercase; }
.footer__tag { color: rgba(255,255,255,.5); font-size: 14px; letter-spacing: .05em; }
.footer__cols { display: flex; gap: 64px; }
.footer__cols h4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 12px;
}
.footer__cols p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; }
.footer__cols a { text-decoration: none; }
.footer__cols a:hover { color: var(--yellow); }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,.13);
  padding: 22px var(--pad);
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.42);
}

/* ─── Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }

  /* With the loop stopped, the clipped columns would show only the first two
     cards. Let them lay out as a plain static grid instead, and drop the
     duplicate set so nothing reads twice. */
  .rcols {
    height: auto;
    -webkit-mask-image: none;
            mask-image: none;
    align-items: start;
  }
  .rcol { overflow: visible; }
  .rcol__set + .rcol__set { display: none; }
}