/* ============================================================
   FADE LDN — pixel-matched layout
   1rem = viewportWidth / 64  (set by script.js)
   so at 1024px wide, 1rem = 16px and the page matches the
   reference screenshot 1:1 in proportion.
   ============================================================ */

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

:root {
  --lime: #c8ff00;
  --black: #000;
  --panel: #0a0a0a;
  --hairline: rgba(255, 255, 255, .16);
}

html { font-size: 16px; }

body {
  background: #000;
  color: #fff;
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-variation-settings: 'wdth' 90, 'wght' 600;
  text-transform: uppercase;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
li { list-style: none; }

.lime { color: var(--lime); }

/* ultra-condensed display type (Druk-style) */
.big, .motto h3, .cta-title, .ldn, .brand-name, .hero-num {
  font-variation-settings: 'wdth' 62, 'wght' 900;
}

.arr {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: square;
  flex: none;
}

/* ================= NAV ================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 4rem;
  padding: 0 1.4rem;
  background: #000;
  display: flex;
  align-items: center;
}

.brand { display: flex; align-items: flex-start; gap: .5rem; }
.brand-name {
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -.01em;
  display: inline-block;
  transform: scaleX(.92);
  transform-origin: left center;
}
.brand-sub {
  font-size: .5rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .12em;
  line-height: 1.45;
  padding-top: .3rem;
  color: #eaeaea;
}

.menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2.6rem;
}
.menu a {
  font-size: .72rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .04em;
  transition: color .2s;
}
.menu a.active, .menu a:hover { color: var(--lime); }

/* burger — hidden until the mobile breakpoint */
.burger {
  display: none;
  margin-left: .8rem;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0 .55rem;
  flex-direction: column;
  justify-content: center;
  gap: .32rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: #fff;
  transition: transform .25s, opacity .25s;
}

.nav-cta {
  margin-left: auto;
  width: 8.6rem;
  height: 2.2rem;
  background: var(--lime);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .8rem 0 1rem;
  font-size: .74rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .03em;
  transition: background .2s;
}
.nav-cta .arr { font-size: 1.05rem; }
.nav-cta:hover { background: #dcff4d; }

/* ================= HERO ================= */
.hero {
  position: relative;
  height: 26.95rem;
  overflow: hidden;
  /* dark layer for mood/legibility, photo blended monochrome over the black base */
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url("https://images.pexels.com/photos/7781848/pexels-photo-7781848.jpeg?auto=compress&cs=tinysrgb&w=1600") right 38% / auto 360% no-repeat, #000;
  background-blend-mode: normal, luminosity;
}

/* darkening overlay: solid on the left for headline legibility, light on the right */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .93) 15%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, .15) 68%, rgba(0, 0, 0, .4) 100%);
  z-index: 1;
  pointer-events: none;
}

/* original SVG portrait kept as offline fallback — hidden while photo bg is active */
.hero-photo { display: none; }
.hero-photo svg { width: 100%; height: 100%; display: block; }
.photo-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 10%, transparent 26%);
}

.hero-copy {
  position: absolute;
  left: 1.75rem;
  top: 1.45rem;
  z-index: 3;
}

.big {
  font-size: 8.9rem;
  line-height: .885;
  letter-spacing: .005em;
  position: relative;
}
.big .line {
  display: block;
  transform: scaleX(.585);
  transform-origin: left center;
  white-space: nowrap;
}
.crown {
  position: absolute;
  left: 13.75rem;
  top: 4.4rem;
  width: 5.9rem;
  height: 4.7rem;
  transform: rotate(-8deg);
}

.tag {
  margin-top: 2rem;
  font-size: .82rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  color: var(--lime);
  letter-spacing: .045em;
  line-height: 1.35;
}

.acts {
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.btn-lime {
  background: var(--lime);
  color: #000;
  height: 2.6rem;
  padding: 0 1rem 0 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 1.7rem;
  font-size: .8rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .03em;
  transition: background .2s;
}
.btn-lime .arr { font-size: 1.05rem; }
.btn-lime:hover { background: #dcff4d; }

.walk {
  font-size: .72rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  line-height: 1.45;
  letter-spacing: .03em;
  color: #f2f2f2;
}

/* big outline 01 */
.hero-num {
  position: absolute;
  top: 1.1rem;
  right: 7rem;
  font-size: 21.8rem;
  line-height: .95;
  color: transparent;
  -webkit-text-stroke: .18rem var(--lime);
  transform: scaleX(.38);
  transform-origin: right top;
  opacity: .95;
  z-index: 2;
}

.hero-meta {
  position: absolute;
  right: 6.55rem;
  top: 18.1rem;
  z-index: 3;
  color: var(--lime);
}
.hero-meta .plus { font-size: .9rem; font-variation-settings: 'wdth' 92, 'wght' 700; }
.hero-meta .coords {
  margin-top: .55rem;
  font-size: .76rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .04em;
  line-height: 1.45;
}
.hero-meta .loc {
  margin-top: 1.9rem;
  color: #fff;
  font-size: .8rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .05em;
}

.badge {
  position: absolute;
  right: 1.2rem;
  bottom: .3rem;
  width: 5rem;
  height: 5rem;
  z-index: 3;
}
.badge svg { width: 100%; height: 100%; }

/* ================= INFO STRIP ================= */
.strip {
  height: 5rem;
  background: #fff;
  color: #000;
  display: grid;
  grid-template-columns: 24.4% 33.2% 21.5% 20.9%;
}
.cell { display: flex; align-items: center; }
.globe {
  width: 2.45rem; height: 2.45rem;
  fill: none;
  stroke: #000;
  stroke-width: 2;
  flex: none;
}
.c1 { padding: 0 1.1rem; gap: .9rem; }
.c1 p {
  font-size: .68rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  line-height: 1.35;
  letter-spacing: .03em;
}
.c2 { overflow: hidden; }
.c2 svg, .c2 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1) contrast(1.08);
}

.c3 {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 1.5rem;
  gap: .12rem;
}
.c3 .stars { font-size: 1rem; letter-spacing: .14rem; line-height: 1; }
.c3 p {
  font-size: .72rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  line-height: 1.25;
  letter-spacing: .02em;
}
.c3 a {
  margin-top: .3rem;
  font-size: .62rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .03em;
  border-bottom: 1px solid #000;
  padding-bottom: .1rem;
}

.c4 {
  background: var(--lime);
  justify-content: center;
  gap: 1rem;
}
.c4 .globe { stroke: #000; width: 2.7rem; height: 2.7rem; }
.ldn {
  font-size: 3.7rem;
  line-height: .8;
  letter-spacing: .01em;
  font-variation-settings: 'wdth' 85, 'wght' 900;
  display: inline-block;
}

/* ================= MAIN GRID ================= */
.grid {
  height: 21.55rem;
  margin-top: .6rem;
  display: grid;
  grid-template-columns: 25.7% 28.5% 21% 24.8%;
  border-top: 1px solid #101010;
  border-bottom: 1px solid #101010;
}
.panel { position: relative; overflow: hidden; }

/* --- services --- */
.services, .barbers {
  background: var(--panel);
  padding: 1.55rem 1.45rem 0;
}
.p-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.p-head h2 {
  font-size: .8rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .05em;
}
.p-head .arr { font-size: .95rem; }

.srv li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .66rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: .84rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .02em;
}
.srv li:last-child { border-bottom: none; }
.srv b { color: var(--lime); font-variation-settings: 'wdth' 92, 'wght' 800; }

.lnk {
  position: absolute;
  left: 1.45rem;
  bottom: 1.5rem;
  font-size: .62rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .04em;
  color: var(--lime);
  border-bottom: 1px solid var(--lime);
  padding-bottom: .12rem;
}

/* --- center image panel --- */
.center { background: #101010; }
.center .art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.04);
}
.c-logo {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2.15rem;
  height: 2.15rem;
  background: var(--lime);
  color: #000;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-variation-settings: 'wdth' 62, 'wght' 900;
  z-index: 2;
}
.c-cap {
  position: absolute;
  left: 1.05rem;
  bottom: 2.9rem;
  font-size: 1.75rem;
  font-variation-settings: 'wdth' 70, 'wght' 900;
  line-height: 1.14;
  letter-spacing: .01em;
  transform: scaleX(.8);
  transform-origin: left bottom;
  white-space: nowrap;
  z-index: 2;
}
.sig {
  position: absolute;
  right: .3rem;
  bottom: 1.75rem;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: none;
  color: var(--lime);
  transform: rotate(-6deg);
  z-index: 2;
}

/* --- barbers --- */
.team { margin-top: .25rem; }
.team li {
  display: flex;
  align-items: center;
  gap: .85rem;
  height: 3.25rem;
  margin-bottom: 2.4rem;
}
.ph { width: 3.25rem; height: 3.25rem; flex: none; display: block; }
.ph svg, .ph img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1) contrast(1.05);
}
.bi h4 {
  font-size: .88rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .03em;
  line-height: 1.2;
}
.bi .role {
  color: var(--lime);
  font-size: .66rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .03em;
  line-height: 1.3;
  margin-top: .18rem;
}
.bi .exp {
  color: #a3a3a3;
  font-size: .6rem;
  font-variation-settings: 'wdth' 92, 'wght' 600;
  letter-spacing: .03em;
  line-height: 1.3;
  margin-top: .12rem;
}

/* --- motto panel --- */
.motto {
  background: #101010 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .22 0 0 0 -.11'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  padding-left: 1.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #1c1c1c;
}
.motto h3 {
  font-size: 5.1rem;
  line-height: .95;
  letter-spacing: .005em;
}
.motto h3 span {
  display: block;
  transform: scaleX(.88);
  transform-origin: left center;
  white-space: nowrap;
}
.rule {
  margin-top: 1.35rem;
  width: 12.8rem;
  height: .3rem;
  background: var(--lime);
  transform: rotate(-2.5deg);
  position: relative;
}
.rule::after {
  content: '';
  position: absolute;
  top: .58rem;
  left: .75rem;
  width: 9.6rem;
  height: .16rem;
  background: var(--lime);
  transform: rotate(-1.2deg);
}

/* ================= CTA ================= */
.cta {
  margin-top: .6rem;
  height: 5.25rem;
  background: var(--lime);
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
}
.cta-title {
  font-size: 4.5rem;
  line-height: 1;
  letter-spacing: .005em;
  width: 29.2rem;
  flex: none;
  display: inline-block;
  transform: scaleX(.6);
  transform-origin: left center;
  white-space: nowrap;
}
.cta-btn {
  margin-left: 5.3rem;
  width: 17.4rem;
  height: 3.45rem;
  background: #000;
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem 0 1.6rem;
  font-size: 1.22rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .04em;
  flex: none;
  transition: opacity .2s;
}
.cta-btn .arr { font-size: 1.5rem; stroke-width: 2.2; }
.cta-btn:hover { opacity: .88; }
.cta-note { margin-left: auto; }
.cta-note p {
  font-size: .68rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .03em;
  line-height: 1.4;
}
.cta-note p + p { margin-top: .75rem; }

/* ================= FULL-PAGE SECTIONS ================= */
section[id], .panel[id] { scroll-margin-top: 4.5rem; }

.sec { padding: 4.8rem 1.75rem; }
.sec + .sec, .about + .sec, .sec + .reviews, .reviews + .sec, .sec + .visit { border-top: 1px solid #141414; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .72rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .14em;
  color: var(--lime);
}
.eyebrow::before { content: ''; width: 2rem; height: 2px; background: var(--lime); flex: none; }
.eyebrow.dark { color: #000; }
.eyebrow.dark::before { background: #000; }

.sec-title {
  font-variation-settings: 'wdth' 62, 'wght' 900;
  font-size: 5.2rem;
  line-height: .92;
  letter-spacing: .005em;
  margin-top: 1rem;
  transform: scaleX(.82);
  transform-origin: left top;
}

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.6rem;
}
.sec-head-col { display: block; }

.sec-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .7rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .05em;
  color: var(--lime);
  border-bottom: 1px solid var(--lime);
  padding-bottom: .2rem;
  flex: none;
  margin-bottom: .5rem;
  transition: gap .2s;
}
.sec-link:hover { gap: .9rem; }

.arr { transition: transform .2s; }

/* --- about --- */
.about-top {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: end;
}
.about-copy p {
  font-size: .84rem;
  line-height: 1.65;
  letter-spacing: .035em;
  color: #c4c4c4;
  font-variation-settings: 'wdth' 92, 'wght' 600;
  margin-bottom: 1.1rem;
  max-width: 36rem;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 3.4rem;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.stats li { padding: 1.5rem 0 0 1.5rem; border-left: 1px solid var(--hairline); }
.stats li:first-child { border-left: none; padding-left: 0; }
.stats b {
  display: block;
  font-variation-settings: 'wdth' 62, 'wght' 900;
  font-size: 3.3rem;
  line-height: 1;
  color: var(--lime);
}
.stats span {
  display: block;
  margin-top: .5rem;
  font-size: .66rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .11em;
  color: #b9b9b9;
}

/* --- signature services --- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.svc-card {
  background: #0a0a0a;
  padding: 1.8rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  transition: background .25s;
}
.svc-card:hover { background: #121212; }
.svc-card .idx {
  font-variation-settings: 'wdth' 62, 'wght' 900;
  font-size: 1.1rem;
  color: var(--lime);
}
.svc-card h3 {
  font-variation-settings: 'wdth' 62, 'wght' 900;
  font-size: 2.6rem;
  line-height: 1;
  margin: .9rem 0 .9rem;
  transform: scaleX(.85);
  transform-origin: left center;
}
.svc-card p {
  font-size: .74rem;
  line-height: 1.6;
  letter-spacing: .035em;
  color: #b5b5b5;
  font-variation-settings: 'wdth' 92, 'wght' 600;
  flex: 1;
}
.svc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.3rem 0 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: .76rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .04em;
}
.svc-meta b { color: var(--lime); font-size: 1.1rem; font-variation-settings: 'wdth' 92, 'wght' 800; }
.svc-card > a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--lime);
  font-size: .68rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .06em;
}
.svc-card > a:hover .arr { transform: translate(3px, -3px); }

/* --- gallery --- */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #1c1c1c;
  border: 1px solid #1c1c1c;
}
.gal-tile { position: relative; background: #0a0a0a; overflow: hidden; }
.gal-tile > svg, .gal-tile > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  transition: transform .45s ease;
}
.gal-tile:hover > svg, .gal-tile:hover > img { transform: scale(1.05); }
.gal-tile > img {
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.06);
}
.gal-tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 1rem .9rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .88));
  font-size: .78rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .05em;
}
.gal-tile figcaption .arr { color: var(--lime); font-size: .95rem; }
.gal-tile:hover figcaption .arr { transform: translate(3px, -3px); }

/* --- reviews (white) --- */
.reviews { background: #fff; color: #000; padding: 4.8rem 1.75rem; }
.reviews .sec-title { color: #000; }
.rev-rate { text-align: right; flex: none; margin-bottom: .4rem; }
.rev-rate .stars { font-size: 1.05rem; letter-spacing: .16rem; }
.rev-rate b {
  display: block;
  font-variation-settings: 'wdth' 62, 'wght' 900;
  font-size: 2.3rem;
  line-height: 1.1;
}
.rev-rate span {
  font-size: .66rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .06em;
}
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.rev-card {
  background: #0a0a0a;
  color: #fff;
  padding: 1.7rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.rev-card .stars { color: var(--lime); font-size: .95rem; letter-spacing: .12rem; }
.rev-card p {
  font-size: .8rem;
  line-height: 1.6;
  letter-spacing: .03em;
  font-variation-settings: 'wdth' 92, 'wght' 600;
  margin: 1.1rem 0 1.5rem;
  flex: 1;
}
.rev-card footer b {
  display: block;
  font-size: .8rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .04em;
}
.rev-card footer span {
  display: block;
  margin-top: .25rem;
  font-size: .62rem;
  letter-spacing: .05em;
  color: #9a9a9a;
}

/* --- faq --- */
.faq-list { border-top: 1px solid var(--hairline); max-width: 56rem; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: .92rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .035em;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--lime); }
.pm { position: relative; width: 1rem; height: 1rem; flex: none; }
.pm::before, .pm::after {
  content: '';
  position: absolute;
  background: var(--lime);
  left: 0;
  top: calc(50% - 1px);
  width: 100%;
  height: 2px;
}
.pm::after { transform: rotate(90deg); transition: transform .25s; }
.faq-item[open] .pm::after { transform: rotate(0deg); }
.faq-item > p {
  font-size: .78rem;
  line-height: 1.65;
  letter-spacing: .035em;
  color: #b5b5b5;
  font-variation-settings: 'wdth' 92, 'wght' 600;
  padding: 0 6rem 1.5rem 0;
  margin-top: -.35rem;
}

/* --- visit --- */
.visit { display: grid; grid-template-columns: 1fr 1fr; }
.visit-info { padding: 4.8rem 1.75rem; }
.addr {
  margin-top: 1.6rem;
  font-size: .95rem;
  line-height: 1.6;
  letter-spacing: .04em;
  font-variation-settings: 'wdth' 92, 'wght' 700;
}
.hours { margin-top: 2.2rem; border-top: 1px solid var(--hairline); max-width: 27rem; }
.hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: .8rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .04em;
}
.hours li span { color: #9a9a9a; }
.hours li.today b, .hours li.today span { color: var(--lime); }
.hours .tag {
  background: var(--lime);
  color: #000;
  font-size: .52rem;
  padding: .15rem .45rem;
  margin-left: .7rem;
  letter-spacing: .08em;
}
.visit-contact { margin-top: 2.2rem; display: flex; flex-direction: column; gap: .7rem; }
.visit-contact a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--lime);
  font-size: .8rem;
  font-variation-settings: 'wdth' 92, 'wght' 700;
  letter-spacing: .04em;
}
.visit-contact a:hover .arr { transform: translate(3px, -3px); }
.visit-map { border-left: 1px solid #141414; min-height: 26rem; }
.visit-map svg { width: 100%; height: 100%; display: block; }

/* --- footer --- */
.footer { background: #000; padding: 3.4rem 1.75rem 0; border-top: 1px solid #141414; }
.foot-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.6rem;
}
.foot-brand .brand-name {
  font-variation-settings: 'wdth' 62, 'wght' 900;
  font-size: 2.1rem;
  line-height: 1;
  display: inline-block;
  transform: scaleX(.92);
  transform-origin: left center;
}
.foot-tag {
  margin-top: 1rem;
  font-size: .68rem;
  line-height: 1.55;
  letter-spacing: .06em;
  color: #9a9a9a;
  font-variation-settings: 'wdth' 92, 'wght' 700;
}
.socials { display: flex; gap: 1.3rem; margin-top: 1.3rem; flex-wrap: wrap; }
.socials a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .66rem;
  letter-spacing: .06em;
  color: #cfcfcf;
  font-variation-settings: 'wdth' 92, 'wght' 700;
}
.socials a:hover { color: var(--lime); }
.foot-col h4 {
  font-size: .68rem;
  font-variation-settings: 'wdth' 92, 'wght' 800;
  letter-spacing: .13em;
  color: var(--lime);
  margin-bottom: 1.1rem;
}
.foot-col a, .foot-col p {
  display: block;
  font-size: .72rem;
  line-height: 2;
  letter-spacing: .04em;
  color: #b5b5b5;
  font-variation-settings: 'wdth' 92, 'wght' 600;
}
.foot-col a:hover { color: #fff; }
.foot-bottom {
  border-top: 1px solid #141414;
  padding: 1.15rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .62rem;
  letter-spacing: .07em;
  color: #8a8a8a;
}

/* --- scroll reveal --- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .65s ease, transform .65s ease;
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* ================= RESPONSIVE =================
   Below ~700px the proportional scale gets too small,
   so switch to a natural stacked layout. */
@media (max-width: 640px) {
  html { font-size: 15px; }
  body { font-size: 14px; }

  .nav { padding: 0 1.2rem; height: 4.5rem; display: flex; align-items: center; gap: .8rem; justify-content: space-between; }
  .brand { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: .1rem; }
  .brand-name { font-size: 2.1rem; letter-spacing: -.04em; line-height: 1; position: relative; display: inline-flex; align-items: flex-end; }
  .brand-name .lime { display: inline-block; transform: rotate(90deg) translateX(.54rem) translateY(-3.0rem); transform-origin: left top; vertical-align: top; margin-top: -.2rem; }
  .brand-sub { display: block; font-size: .45rem; letter-spacing: .14em; color: #999; line-height: 1.2; }
  .strip .ldn { font-size: 37px !important; line-height: .85; }
  .nav-cta { height: 2.5rem; padding: 0 .75rem 0 .85rem; gap: .5rem; font-size: .68rem; flex: none; order: 1; }

  /* burger → animated X + slide-down panel */
  .burger { display: flex; width: 2.5rem; height: 2.5rem; padding: 0 .55rem; gap: .32rem; flex-direction: column; justify-content: center; align-items: center; background: var(--lime); color: #000; border: none; border-radius: 0; font-variation-settings: 'wdth' 92, 'wgt' 800; letter-spacing: .03em; flex: none; transition: background .2s; }
  .burger:hover { background: #dcff4d; }
  .burger { order: 2; background: transparent; border: 2px solid var(--lime); }
  .burger span { display: block; width: 1.1rem; height: 2px; background: var(--lime); flex-shrink: 0; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    transform: none;
    flex-direction: column;
    gap: 0;
    background: #0a0a0a;
    border-bottom: 2px solid var(--lime);
    padding: .5rem 0 max(.7rem, env(safe-area-inset-bottom));
    box-shadow: 0 20px 40px rgba(0, 0, 0, .8);
    z-index: 55;
  }
  .nav-open .menu { display: flex; }
  .menu a {
    display: flex;
    align-items: center;
    min-height: 3.2rem;
    padding: 0 1.4rem;
    font-size: .95rem;
    font-variation-settings: 'wdth' 92, 'wght' 700;
    letter-spacing: .06em;
    color: #fff;
    border-bottom: 1px solid #1a1a1a;
  }
  .menu a:hover, .menu a.active { color: var(--lime); background: #111; }
  .menu li:last-child a { border-bottom: none; }
  .nav-cta { width: auto; height: 2.5rem; padding: 0 .85rem; gap: .5rem; font-size: .7rem; }

  .hero { 
    height: 92dvh; min-height: 92dvh; 
    position: relative; 
    background: #000; 
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("https://images.pexels.com/photos/7781848/pexels-photo-7781848.jpeg?auto=compress&cs=tinysrgb&w=1200") 42% 12% / cover no-repeat;
    filter: grayscale(1) contrast(1.05);
    z-index: 1;
  }
  .hero::after { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.85) 25%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.7) 100%); 
    z-index: 2; 
    pointer-events: none; 
  }
  .hero-photo { display: none; }

  .hero-copy { 
    position: absolute; 
    top: auto;
    left: 1.45rem; right: 1.45rem; bottom: 3.5rem;
    z-index: 4; 
    background: transparent;
  }
  .big { font-size: 5.2rem; line-height: .85; letter-spacing: -.02em; margin-bottom: 1.4rem; position: relative; }
  .big .line { display: block; transform: scaleX(.75); transform-origin: left center; }
  .crown { width: 3.6rem; height: 3.2rem; top: -.4rem; left: 10.5rem; opacity: 1; filter: drop-shadow(0 0 6px var(--lime)); }
  .tag { font-size: .9rem; line-height: 1.4; color: var(--lime); letter-spacing: .05em; margin-bottom: 2rem; max-width: 16rem; }
  .acts { display: flex; flex-direction: column; align-items: stretch; gap: .8rem; }
  .btn-lime { height: 3.5rem; padding: 0 1.4rem; font-size: .9rem; display: flex; justify-content: space-between; align-items: center; border-radius: 0; }
  .walk { font-size: .68rem; line-height: 1.4; color: #777; text-align: center; margin-top: .4rem; letter-spacing: .03em; }
  
  .hero-num, .hero-meta, .badge { display: block; }
  .hero-num { font-size: 6rem; line-height: .9; top: 1.2rem; right: 1.2rem; opacity: .2; }
  .hero-meta { top: 2.5rem; bottom: auto; right: 1.2rem; text-align: right; }
  .hero-meta .plus { font-size: .8rem; }
  .hero-meta .coords { font-size: .75rem; line-height: 1.4; }
  .hero-meta .loc { font-size: 1rem; margin-top: .2rem; }
  .hero-meta .coords { font-size: .7rem; line-height: 1.4; margin-top: .3rem; color: #aaa; }
  .badge { width: 3.5rem; height: 3.5rem; right: 1.2rem; bottom: auto; top: 14rem; opacity: .8; }

  .strip { height: auto; grid-template-columns: 1fr 1fr; border-top: none; border-bottom: none; }
  .cell { padding: 1.25rem 1rem; justify-content: center; gap: .75rem; background: #fff; }
  .c1 { align-items: center; gap: .75rem; background: #fff; }
  .c1 p { font-size: .68rem; line-height: 1.35; }
  .c1 .globe { width: 2rem; height: 2rem; }
  .c2 { padding: 0; height: 10rem; }
  .c2 img { object-position: center 20%; filter: grayscale(1) contrast(1.08); }
  .c3 { padding: 1.25rem 1rem; align-items: flex-start; gap: .5rem; background: #fff; }
  .c3 .stars { font-size: 1rem; letter-spacing: .12rem; line-height: 1; }
  .c3 p { font-size: .78rem; letter-spacing: .03em; line-height: 1.25; }
  .c3 a { font-size: .68rem; border-bottom: 1px solid #000; padding-bottom: .1rem; }
  .c4 { justify-content: center; padding: 1.25rem 1rem; background: var(--lime); }
  .ldn { font-size: 37px !important; line-height: .85; }
  .c4 .ldn { font-size: 37px !important; }

  .grid { height: auto; grid-template-columns: 1fr 1fr; gap: 1px; background: #1c1c1c; border-top: 1px solid #101010; border-bottom: 1px solid #101010; }
  .services, .barbers { padding: 1.5rem 1.25rem; min-height: 24rem; }
  .services .lnk { margin-top: 2.8rem; }
  .barbers .lnk { margin-top: 2rem; }
  .center { display: none; }
  .barbers { grid-column: 1 / -1; }
  .services { grid-column: 1 / -1; }
  .motto { display: none; }

  .cta { height: auto; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.5rem; }
  .cta-title { width: auto; max-width: 100%; font-size: 2.6rem; transform: scaleX(.92); white-space: normal; }
  .cta-btn { margin-left: 0; width: 100%; }
  .cta-note { margin-left: 0; }

  .sec { padding: 3rem 1.2rem; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .sec-title { font-size: 3.1rem; transform: scaleX(.9); }
  .about { padding: 3rem 1.2rem; }
  .about-top { grid-template-columns: 1fr; gap: 1.6rem; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 1.4rem; margin-top: 2.2rem; text-align: center; }
  .stats li:nth-child(3) { border-left: none; padding-left: 0; }
  .stats b { font-size: 2.5rem; }

  .svc-grid { grid-template-columns: 1fr; }
  .svc-card h3 { font-size: 2.1rem; }

  .gal-grid { grid-template-columns: 1fr 1fr; }

  .reviews { padding: 3rem 1.2rem; }
  .rev-rate { text-align: left; }
  .rev-grid { grid-template-columns: 1fr; }

  .faq-item summary { font-size: .82rem; min-height: 3rem; padding: 1.1rem 0; }
  .faq-item > p { padding-right: 1rem; }

  .visit { grid-template-columns: 1fr; }
  .visit-info { padding: 3rem 1.2rem; }
  .visit-map { min-height: 15rem; border-left: none; border-top: 1px solid #141414; }

  .footer { padding: 2.6rem 1.2rem max(1.2rem, env(safe-area-inset-bottom)); }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .foot-bottom { flex-direction: column; gap: .5rem; }

  /* comfortable touch targets + iOS polish */
  a, button, summary { touch-action: manipulation; }
  body { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  .cta-btn { min-height: 3.2rem; }

  /* subtle nav elevation on scroll */
  .nav.scrolled {
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    transform: translateY(0);
  }
}






/* fade ldn header on mobile styling*/
@media (max-width: 640px) {
    .brand-name .lime {
              font-size: 37px;
              letter-spacing: -.04em;
              transform: rotate(90deg) translateX(.54rem) translateY(-2.5rem);
      }
    }


@media (max-width: 640px) {
    .brand-name {
              /*font-size: 2.3rem;*/
              letter-spacing: .02em; !important
              
      }
    }