/* =============================================================
   HENRIX BARBERSHOP — fashion-brand front door → Square booking
   Full-bleed imagery · huge type-scale contrast · persistent Book CTA
   Inter · off-white + near-black, monochrome (no color accent)
   ============================================================= */

:root{
  --paper:  #f4f2ee;   /* off-white, never pure white */
  --ink:    #121212;   /* near-black, never pure black */
  --muted:  #6f6b66;
  --accent: #121212;   /* monochrome — hover uses ink/paper contrast */
  --hair:   rgba(18,18,18,.13);
  --font:   "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --pad:    clamp(18px, 5vw, 56px);
  --ease:   cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* clear the fixed header when jumping to in-page anchors */
:target, .statement, .team, .visit, #events{ scroll-margin-top:90px; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:clamp(.95rem,.4vw+.85rem,1.05rem);
  line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* shared book button — clean solid pill, no border (avoids the fuzzy edge),
   arrow in a small contrasting circle that nudges on hover */
.btn-book{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.9rem; font-weight:600; letter-spacing:.01em;
  padding:.6rem .6rem .6rem 1.4rem; border-radius:100px;
  background:var(--ink); color:var(--paper);
  border:0;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.btn-book::after{
  content:"→"; font-size:1.02em; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--paper); color:var(--ink);
  transition:transform .35s var(--ease);
}
.btn-book:hover{ background:#000; }
.btn-book:hover::after{ transform:translateX(3px); }

/* =============================================================
   HEADER — transparent over hero, blur on scroll, persistent Book
   ============================================================= */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:2rem;
  padding:1rem var(--pad);
  color:var(--paper);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(252,252,251,.9); backdrop-filter:blur(18px) saturate(1.2);
  color:var(--ink); border-bottom:1px solid rgba(18,18,18,.05);
  box-shadow:0 1px 24px -14px rgba(18,18,18,.2);
  padding-top:.75rem; padding-bottom:.75rem;
}
/* menu open: header goes fully transparent so it blends into the paper overlay
   (no mismatched strip). The HENRIX brand shows, in dark, as the menu's anchor. */
.hdr.menu-open,
.hdr.menu-open.is-stuck{
  background:transparent; backdrop-filter:none; border-color:transparent; box-shadow:none;
  color:var(--ink);
}
.hdr.menu-open .hdr__brand{ opacity:1 !important; transform:none !important; pointer-events:auto; color:var(--ink); }
.hdr__brand{
  font-weight:700; font-size:1.2rem; letter-spacing:.14em;
  margin-right:auto;
  /* hidden while the giant hero wordmark is on screen (avoids the double HENRIX);
     fades in once scrolled past the hero, where it becomes the persistent brand anchor */
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.hdr.is-stuck .hdr__brand{ opacity:1; transform:none; pointer-events:auto; }
.hdr__nav{ display:flex; gap:2rem; margin-right:1.6rem; }
.hdr__nav a{
  font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  opacity:.7; transition:opacity .3s var(--ease);
}
.hdr__nav a:hover{ opacity:1; }
/* over the hero: light pill, ink arrow */
.hdr__book{ background:var(--paper); color:var(--ink); }
.hdr__book::after{ background:var(--ink); color:var(--paper); }
.hdr__book:hover{ background:#fff; }
/* scrolled: dark pill, paper arrow */
.hdr.is-stuck .hdr__book{ background:var(--ink); color:var(--paper); }
.hdr.is-stuck .hdr__book::after{ background:var(--paper); color:var(--ink); }
.hdr.is-stuck .hdr__book:hover{ background:#000; }

/* hamburger toggle — compact, refined, white so it reads over the hero image */
.hdr__toggle{
  display:none; flex-direction:column; align-items:flex-end; justify-content:center; gap:5px;
  width:26px; height:26px; padding:0; margin-left:.4rem;
  background:none; border:0; cursor:pointer;
  color:var(--paper);
}
.hdr__toggle span{
  display:block; width:20px; height:1.5px; border-radius:1px; background:currentColor;
  transition:transform .35s var(--ease), width .35s var(--ease), opacity .25s var(--ease);
}
/* second line slightly shorter for a lighter, more designed look */
.hdr__toggle span:nth-child(2){ width:13px; }
.hdr.is-stuck .hdr__toggle{ color:var(--ink); }
/* when the menu is open, the X sits on the paper overlay — force it dark so it's visible */
.hdr.menu-open .hdr__toggle{ color:var(--ink); }
.hdr__toggle[aria-expanded="true"] span{ width:20px; }
.hdr__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
.hdr__toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }

/* mobile menu overlay */
.mmenu{
  position:fixed; inset:0; z-index:55;
  display:flex; flex-direction:column; justify-content:center;
  gap:.5rem; padding:var(--pad);
  background:rgba(244,242,238,.98); backdrop-filter:blur(24px);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mmenu.is-open{ opacity:1; visibility:visible; transform:none; }
/* when the menu is open, hide the floating bottom Book bar (avoid a duplicate CTA) */
.mmenu.is-open ~ .mobile-book{ opacity:0; visibility:hidden; pointer-events:none; }
.mmenu__nav{ display:flex; flex-direction:column; }
.mmenu__nav a{
  font-family:var(--font); font-weight:700;
  font-size:clamp(2rem,10vw,3rem); letter-spacing:-.02em; line-height:1.25;
  color:var(--ink);
  padding:.35rem 0; border-bottom:1px solid var(--hair);
  transition:opacity .25s var(--ease);
}
.mmenu__nav a:active{ opacity:.5; }
.mmenu__book{
  display:inline-flex; align-items:center; gap:.6rem; width:fit-content;
  margin-top:2rem; padding:.9rem 1.6rem; border-radius:100px;
  background:var(--ink); color:var(--paper);
  font-size:1rem; font-weight:600; letter-spacing:.01em;
}
.mmenu__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--hair);
}
.mmenu__meta{
  margin:0; font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.mmenu__ig{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:0 0 auto;
  color:var(--ink); opacity:.7;
  transition:opacity .25s var(--ease);
}
.mmenu__ig:active{ opacity:1; }

/* =============================================================
   HERO — full-bleed 100vh, oversized wordmark, minimal text
   ============================================================= */
.hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; }
.hero__img{
  position:absolute; inset:0;
  background:#c9c0b2 url('images/hero.webp') center 62%/cover no-repeat;
  transform:scale(1.03);
}
/* scrim: vertical darkening top+bottom, plus a soft left wash so the
   bottom-left lockup stays crisp over the bright part of the photo */
.hero__img::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(18,16,14,.55) 0%, rgba(18,16,14,.12) 42%, transparent 70%),
    linear-gradient(180deg, rgba(18,16,14,.40) 0%, rgba(18,16,14,.05) 32%, rgba(18,16,14,.70) 100%);
}
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad); padding-bottom:clamp(2.6rem,5vw,4rem);
  color:var(--paper);
}
/* the name: HENRIX with "Barbershop" tied to it as a subordinate lockup line.
   ~19vw (not 23) leaves breathing room from the edges so it reads confident,
   not cramped. */
.hero__word{
  font-weight:800; letter-spacing:-.03em; line-height:.84;
  font-size:clamp(3.4rem, 15.5vw, 13rem);
  margin:0;
  display:flex; flex-direction:column;
}
.hero__word-sub{
  font-size:clamp(.9rem,3.3vw,2.4rem); font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; line-height:1;
  margin-top:clamp(.5rem,1.4vw,1rem); padding-left:.14em;
  opacity:.92;
}
/* location — a separate, quieter provenance line */
.hero__signature{
  margin:1.6rem 0 0; padding-left:.16em;
  font-size:clamp(.68rem,1.3vw,.82rem); font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  opacity:.62;
}
/* subtle hero CTA — plain text + arrow, no underline (underline only on hover) */
.hero__cta{
  display:inline-flex; align-items:center; gap:.55rem; width:fit-content;
  margin-top:clamp(1.6rem,3vw,2.4rem); padding-left:.16em;
  font-size:clamp(.92rem,1.1vw,1.05rem); font-weight:500; letter-spacing:.01em;
  color:var(--paper);
  transition:opacity .3s var(--ease);
}
.hero__cta-arrow{ transition:transform .4s var(--ease); }
.hero__cta:hover{ opacity:.72; }
.hero__cta:hover .hero__cta-arrow{ transform:translateX(5px); }
/* accolade — real credential, understated. Plain inline text so it flows
   on one line on desktop and wraps as whole words on mobile. */
.hero__accolade{
  margin:.8rem 0 .3rem; padding-left:.16em; max-width:52ch;
  font-size:clamp(.64rem,1.05vw,.75rem); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; line-height:1.5;
  opacity:.82;
}
.hero__accolade em{ font-style:normal; font-weight:600; }
.hero__accolade-mark{ margin-right:.45em; }
@media (max-width:520px){
  .hero__signature{ letter-spacing:.18em; }
  .hero__accolade{ letter-spacing:.06em; }
}

/* =============================================================
   STATEMENT — oversized type-only break, left axis
   ============================================================= */
/* =============================================================
   STATEMENT — dark copy block + family image, side by side.
   Ties the "family-owned" line to the family photo so both read
   as one composed section (no empty void, no mismatched bg).
   ============================================================= */
.statement{
  background:var(--ink); color:var(--paper);
  display:grid; grid-template-columns:1fr;
}
.statement__copy{
  padding:clamp(3.5rem,8vw,6rem) var(--pad);
  display:flex; flex-direction:column; justify-content:center;
  max-width:36rem;
}
.statement__accolade{
  margin:0 0 clamp(1.6rem,3vw,2.2rem); max-width:44ch;
  font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.6; color:rgba(244,242,238,.6);
}
.statement__accolade em{ font-style:normal; font-weight:500; color:rgba(244,242,238,.9); }
/* gold star + gold award phrase, matched */
.statement__accolade-star{
  display:inline-block; vertical-align:baseline;
  margin-right:.6em; font-size:.95em;
  color:#c9a25a;
}
.statement__accolade-gold{ color:#c9a25a; }
.statement__line{
  font-weight:700; letter-spacing:-.025em; line-height:1.02;
  font-size:clamp(2.1rem, 5.5vw, 3.6rem);
  margin:0; max-width:16ch;
}
.statement__sub{
  margin:clamp(1.4rem,3vw,1.9rem) 0 0; max-width:42ch;
  font-size:clamp(.98rem,1.3vw,1.1rem); font-weight:400; line-height:1.55;
  color:rgba(244,242,238,.68);
}
.statement__img{
  min-height:clamp(300px, 46vw, 560px);
  background:#c9c0b2 url('images/interior.webp') center 28%/cover no-repeat;
  filter:grayscale(.08);
  transition:filter 1s var(--ease);
}
.statement:hover .statement__img{ filter:grayscale(0); }
@media (min-width:860px){
  .statement{ grid-template-columns:1fr 1.05fr; align-items:stretch; }
}

/* =============================================================
   TEAM — sparse, no cards, hairline only
   ============================================================= */
.team{ padding:clamp(4rem,10vw,8rem) var(--pad); }
.team__title{
  font-weight:600; letter-spacing:-.02em; line-height:1;
  font-size:clamp(2rem,6vw,4.5rem);
  margin:0 0 clamp(2rem,5vw,3.5rem);
}
.team__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,2.5vw,2rem);
}
.member{ display:flex; flex-direction:column; }
.member__photo{
  aspect-ratio:4/5; width:100%;
  position:relative; overflow:hidden;
}
/* image lives on a pseudo-element so it can zoom inside the clipped frame */
.member__photo::before{
  content:""; position:absolute; inset:0;
  background:#c9c0b2 var(--img) center top/cover no-repeat;
  filter:contrast(1.02);
  transition:transform .6s var(--ease);
}
.member:hover .member__photo::before{ transform:scale(1.04); }
.member__name{
  font-size:1.15rem; font-weight:600; letter-spacing:-.01em;
  margin-top:1rem;
}
.member__role{
  font-size:.76rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:#66625d; margin-top:.25rem; /* explicit: keeps 4.5:1 contrast on --paper */
}
@media (max-width:900px){ .team__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .team__grid{ grid-template-columns:1fr; max-width:360px; } }

/* =============================================================
   VISIT — asymmetric, terse, real map
   ============================================================= */
.visit{
  display:grid; grid-template-columns:1fr;
  border-top:1px solid var(--hair);
}
.visit__info{ padding:clamp(3.5rem,8vw,6rem) var(--pad); display:flex; flex-direction:column; }
.visit__title{
  font-weight:600; letter-spacing:-.02em; line-height:1;
  font-size:clamp(2rem,6vw,4.5rem); margin:0 0 2rem;
}
.visit__addr{ font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:500; line-height:1.25; letter-spacing:-.01em; margin-bottom:1.4rem; opacity:1; transition:opacity .3s var(--ease); }
.visit__addr:hover{ opacity:.55; }
.visit__phone{ font-size:1.15rem; font-weight:500; margin-bottom:1.4rem; width:fit-content; transition:opacity .3s var(--ease); }
.visit__phone:hover{ opacity:.55; }
/* booking line — clear CTA, not a muted label */
.visit__hours{ display:inline-flex; width:fit-content; font-size:1rem; font-weight:500; color:var(--ink); margin-bottom:2.4rem; border-bottom:1.5px solid var(--ink); padding-bottom:2px; transition:opacity .3s var(--ease); }
.visit__hours:hover{ opacity:.55; }
/* weddings & events — its own labelled block, email lives here */
.visit__events{ margin-top:auto; padding-top:2rem; border-top:1px solid var(--hair); font-size:.95rem; font-weight:400; line-height:1.55; color:var(--muted); max-width:40ch; }
.visit__events-label{ display:block; margin-bottom:.5rem; font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.visit__events a{ color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:1px; }
.visit__events a:hover{ opacity:.55; }

.visit__map{
  min-height:340px;
  border-radius:6px; overflow:hidden;
  border:1px solid var(--hair);
  /* mute the default Google clutter so it sits with the restrained palette,
     without going full grayscale */
  filter:saturate(.62) contrast(.97) brightness(1.02);
  transition:filter .5s var(--ease);
}
.visit__map:hover{ filter:saturate(.9) contrast(1) brightness(1); }
.visit__map iframe{ width:100%; height:100%; min-height:340px; border:0; }
@media (min-width:820px){
  .visit{ grid-template-columns:1fr 1.2fr; }
  .visit__map{ min-height:100%; }
}

/* =============================================================
   FINAL CTA BAND — full-bleed dark, oversized BOOK
   ============================================================= */
/* Final CTA — clean centered dark band. */
.cta{
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(4rem,12vw,9rem) var(--pad);
}
.cta__label{
  font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(244,242,238,.55); margin:0 0 1.1rem;
}
.cta__link{
  font-weight:700; letter-spacing:-.03em; line-height:1;
  font-size:clamp(3.5rem,16vw,13rem);
  display:inline-flex; align-items:flex-start;
  transition:opacity .4s var(--ease);
}
.cta__link span{ font-size:.28em; transition:transform .5s var(--ease); }
.cta__link:hover{ opacity:.6; }
.cta__link:hover span{ transform:translate(10px,-10px); }

/* =============================================================
   FOOTER — stacked tiers: brand+nav row · SEO line · legal line
   ============================================================= */
.ftr{
  padding:clamp(2.5rem,5vw,3.5rem) var(--pad) calc(2.5rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair);
}
/* tier 1 — brand left, nav right */
.ftr__top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 2rem;
  padding-bottom:clamp(1.6rem,3vw,2.2rem);
}
.ftr__brand{
  font-size:1.1rem; font-weight:700; letter-spacing:.14em;
  transition:opacity .3s var(--ease);
}
.ftr__brand:hover{ opacity:.6; }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.ftr__nav a{
  font-size:.76rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); transition:color .3s var(--ease);
}
.ftr__nav a:hover{ color:var(--ink); }
/* tier 2 — SEO line, quiet, full width above the rule */
.ftr__seo{
  margin:0; padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--hair);
  font-size:.78rem; font-weight:400; line-height:1.65;
  color:var(--muted); max-width:64ch;
}
/* tier 3 — legal */
.ftr__legal{
  margin:1.2rem 0 0;
  font-size:.72rem; font-weight:400; letter-spacing:.02em;
  color:#66625d; /* solid, no opacity: keeps 4.5:1 contrast on --paper */
}

/* =============================================================
   MOBILE STICKY BOOK BAR — persistent primary action
   ============================================================= */
.mobile-book{
  position:fixed; left:1rem; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:70;
  display:none;
  align-items:center; justify-content:center; gap:.7rem;
  padding:1.1rem 1rem; border-radius:100px;
  background:var(--ink); color:var(--paper);
  font-size:.95rem; font-weight:600; letter-spacing:.02em;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.6);
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.mobile-book::after{
  content:"→"; display:inline-flex; align-items:center; justify-content:center;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--paper); color:var(--ink); font-size:1.05rem;
}
@media (max-width:820px){
  .hdr__nav{ display:none; }
  /* bottom bar is the single mobile CTA — drop the header chip to avoid a cramped, cut-off duplicate */
  .hdr__book{ display:none; }
  .hdr__toggle{ display:flex; margin-left:auto; }
  .mobile-book{ display:inline-flex; }
  /* clear the floating book bar so hero copy isn't hidden behind it */
  .hero__overlay{ padding-bottom:6.5rem; }
  .ftr{ padding-bottom:calc(6.5rem + env(safe-area-inset-bottom)); }
  .visit__map{ min-height:300px; }
}

/* keep the oversized wordmark inside the viewport on phones */
@media (max-width:640px){
  .hero__word{ font-size:clamp(3.4rem, 19vw, 6rem); }
  .hero__word-sub{ letter-spacing:.28em; }
}

/* =============================================================
   MOTION
   ============================================================= */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__img{ transform:none; }
}