/* ═══════════════════════════════════════════════════════════
   CUT TO THE CHASE BARBERSHOP
   Port Orchard, WA
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────── */
:root{
  --ink:      #0b0b0c;
  --ink-2:    #121214;
  --ink-3:    #191919;
  --line:     #2a2a2c;
  --bone:     #f4efe6;
  --smoke:    #a09a91;
  --blood:    #b31217;
  --blood-hi: #d81f24;
  --brass:    #c9a227;

  --f-display: 'Alfa Slab One', Georgia, serif;
  --f-label:   'Oswald', Impact, sans-serif;
  --f-body:    'Barlow', system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --nav-h: 74px;
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.02; }
p{ margin:0 0 1rem; }
address{ font-style:normal; }
dl,dd{ margin:0; }

/* film grain */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--bone); color:var(--ink); padding:.75rem 1.25rem; font-family:var(--f-label);
}
.skip:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

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

/* ── Type helpers ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--f-label); font-weight:500;
  text-transform:uppercase; letter-spacing:.34em;
  font-size:.72rem; color:var(--blood-hi);
  margin:0 0 1.1rem;
}
.eyebrow::before{ content:'◆'; margin-right:.7em; color:var(--brass); letter-spacing:0; }

.h2{
  font-family:var(--f-display);
  font-size:clamp(2.1rem, 1.3rem + 3.6vw, 4rem);
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.lede{ color:var(--smoke); max-width:52ch; margin-top:1.35rem; font-size:1.06em; }
.note{
  margin-top:2.75rem; text-align:center; color:var(--smoke);
  font-size:.9rem; letter-spacing:.04em;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  --bg:var(--blood);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--bg); color:#fff; text-decoration:none;
  font-family:var(--f-label); font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; font-size:.86rem;
  padding:1rem 1.9rem; border:1px solid var(--bg);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .25s, border-color .25s, transform .18s;
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone); transform:translateY(101%);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.btn:hover{ color:var(--ink); border-color:var(--bone); }
.btn:hover::after{ transform:translateY(0); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ --bg:transparent; color:var(--bone); border-color:#4a4a4d; }
.btn--sm{ padding:.72rem 1.2rem; font-size:.76rem; letter-spacing:.11em; }
.btn--lg{ padding:1.2rem 2.6rem; font-size:.95rem; }

/* ── Nav ──────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,11,12,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  height:var(--nav-h); display:flex; align-items:center; gap:1.5rem;
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.nav__mark{ width:44px; height:44px; object-fit:cover; mix-blend-mode:screen; flex:none; }
.nav__word{
  font-family:var(--f-label); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.84rem; line-height:1.15; display:block;
}
.nav__word em{
  display:block; font-style:normal; font-weight:400;
  font-size:.62rem; letter-spacing:.4em; color:var(--smoke);
}
.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.16em;
  font-size:.78rem; text-decoration:none; color:var(--bone);
  position:relative; padding-block:.4rem; opacity:.85; transition:opacity .2s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--blood-hi); transition:width .28s;
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ width:100%; }

.nav__toggle{
  display:none; width:44px; height:44px; background:none; border:0; padding:10px;
  flex-direction:column; justify-content:space-between; cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; background:var(--bone); transition:transform .3s, opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

.mobile{
  background:rgba(11,11,12,.97); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); padding:.5rem var(--pad) 1.5rem;
}
.mobile a{
  display:block; padding:1rem 0; text-decoration:none;
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em; font-size:.9rem;
  border-bottom:1px solid var(--line);
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 3rem) 0 clamp(3.5rem, 9vh, 7rem);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:68% 34%;
  filter:grayscale(.35) contrast(1.08) brightness(.72);
  transform:scale(1.06);
  animation:drift 24s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:scale(1.14) translate3d(-1.5%,-1%,0); } }
.hero__grad{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(11,11,12,.72) 38%, rgba(11,11,12,.35) 70%, rgba(11,11,12,.75) 100%),
    radial-gradient(120% 80% at 20% 90%, rgba(179,18,23,.22), transparent 60%);
}
.hero__inner{
  position:relative; width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--pad);
}
.hero .eyebrow{ color:#efe3d2; text-shadow:0 2px 14px rgba(0,0,0,.9); }
.hero .eyebrow::before{ color:var(--blood-hi); }
.hero__title{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(2.4rem, .2rem + 10.2vw, 7.6rem);
  line-height:.86; letter-spacing:-.025em;
  text-shadow:0 18px 60px rgba(0,0,0,.6);
}
.hero__title span{ display:block; }
.hero__title span:nth-child(2){ color:var(--bone); text-indent:.06em; }
.hero__sub{
  font-family:var(--f-label); font-weight:400;
  text-transform:uppercase; letter-spacing:.62em;
  font-size:clamp(.8rem, .5rem + .8vw, 1.15rem);
  color:var(--brass); margin:1.1rem 0 0; padding-left:.3em;
}
.hero__line{
  margin:2.2rem 0 0; font-size:clamp(1.05rem, .95rem + .5vw, 1.35rem);
  color:var(--smoke); max-width:26ch; line-height:1.45;
}
.hero__line strong{ color:var(--bone); font-weight:600; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }
.hero__note{
  margin:1.5rem 0 0; font-family:var(--f-label); font-weight:400;
  text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:#6f6a64;
}

/* barber pole */
.pole{
  position:absolute; top:0; right:0; bottom:0; width:12px; overflow:hidden;
  border-left:1px solid rgba(244,239,230,.12);
}
.pole i{
  position:absolute; inset:-50% 0;
  background:repeating-linear-gradient(45deg,
    var(--blood) 0 10px, transparent 10px 20px,
    rgba(244,239,230,.55) 20px 30px, transparent 30px 40px);
  animation:pole 3.5s linear infinite;
  opacity:.85;
}
@keyframes pole{ to{ transform:translateY(56.6px); } }

/* ── Ticker ───────────────────────────────────────────────── */
.ticker{
  background:var(--bone); color:var(--ink);
  overflow:hidden; padding:.85rem 0; border-block:1px solid var(--ink);
}
.ticker__track{
  display:flex; gap:2.2rem; width:max-content;
  animation:ticker 34s linear infinite;
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1rem, .8rem + .8vw, 1.5rem); letter-spacing:.02em;
  white-space:nowrap;
}
.ticker__track b{ color:var(--blood); font-weight:400; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ── Sections ─────────────────────────────────────────────── */
.section{ padding:clamp(4.5rem, 10vw, 8.5rem) 0; }
.section--crew{ background:var(--ink-2); border-block:1px solid var(--line); }
.head{ margin-bottom:clamp(2.5rem, 5vw, 4rem); }

.grid{ display:grid; gap:1.25rem; }
.grid--svc{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.grid--crew{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; }
.grid--shops{ grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:1.5rem; }

/* service card */
.card{
  background:var(--ink-2); border:1px solid var(--line);
  padding:2.2rem 1.75rem; position:relative;
  transition:border-color .3s, transform .3s, background .3s;
}
.section--crew .card{ background:var(--ink-3); }
.card::before{
  content:''; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--blood); transition:width .4s cubic-bezier(.2,.8,.3,1);
}
.card:hover{ border-color:#3d3d40; transform:translateY(-4px); }
.card:hover::before{ width:100%; }
.card__ico{ width:48px; height:48px; color:var(--brass); margin-bottom:1.4rem; }
.card__ico svg{ width:100%; height:100%; }
.card h3{
  font-family:var(--f-label); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:1.02rem; margin-bottom:.7rem;
}
.card p{ color:var(--smoke); font-size:.95rem; margin:0; }

/* ── Divider rule ─────────────────────────────────────────── */
.rule{ display:flex; justify-content:center; color:#38383b; padding:0 var(--pad); }
.rule svg{ width:min(320px, 70%); height:auto; }

/* ── Barber cards ─────────────────────────────────────────── */
.barber{
  background:var(--ink-3); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .3s, transform .3s;
}
.barber:hover{ border-color:#45373a; transform:translateY(-5px); }
.barber__pic{ aspect-ratio:4/5; overflow:hidden; position:relative; background:#000; }
.barber__pic::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,11,12,.85), transparent 45%);
}
.barber__pic img{
  width:100%; height:100%; object-fit:cover; object-position:50% 25%;
  filter:grayscale(.55) contrast(1.05);
  transition:filter .45s, transform .6s cubic-bezier(.2,.8,.3,1);
}
.barber:hover .barber__pic img{ filter:grayscale(0) contrast(1.02); transform:scale(1.05); }
.barber:nth-child(1) .barber__pic img{ object-position:56% 30%; }

.barber__body{ padding:1.5rem 1.5rem 1.75rem; display:flex; flex-direction:column; flex:1; }
.barber__tag{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.26em;
  font-size:.62rem; color:var(--brass); margin:0 0 .5rem;
}
.barber h3{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:1.85rem; letter-spacing:-.01em; margin-bottom:.6rem;
}
.barber__desc{ color:var(--smoke); font-size:.92rem; flex:1; }
.barber__links{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; margin-top:.6rem; }
.ig{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  color:var(--smoke); font-family:var(--f-label); font-size:.72rem;
  letter-spacing:.1em; text-transform:lowercase; transition:color .2s;
}
.ig svg{ width:16px; height:16px; flex:none; }
.ig:hover{ color:var(--bone); }

/* ── Creed ────────────────────────────────────────────────── */
.creed{
  position:relative; padding:clamp(5rem, 12vw, 9rem) 0;
  border-block:1px solid var(--line); overflow:hidden;
}
.creed__bg{ position:absolute; inset:0; }
.creed__bg img{
  width:100%; height:100%; object-fit:cover; object-position:22% 45%;
  filter:grayscale(1) brightness(.28) contrast(1.15);
}
.creed::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--ink) 12%, rgba(11,11,12,.82) 48%, rgba(11,11,12,.55));
}
.creed__inner{ position:relative; z-index:2; max-width:860px; }
.creed blockquote{ margin:0; }
.creed blockquote p{
  font-family:var(--f-display); text-transform:none;
  font-size:clamp(1.5rem, 1rem + 2.4vw, 2.85rem);
  line-height:1.18; letter-spacing:-.01em; margin:0;
}
.creed__body{ color:var(--smoke); margin-top:2rem; max-width:56ch; font-size:1.05em; }
.creed__sig{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em;
  font-size:.82rem; color:var(--brass); margin:1.75rem 0 0;
  padding-left:1rem; border-left:2px solid var(--blood);
}

/* ── Shops ────────────────────────────────────────────────── */
.shop{
  background:var(--ink-2); border:1px solid var(--line);
  padding:2.1rem 1.85rem 1.85rem; display:flex; flex-direction:column;
  transition:border-color .3s;
}
.shop:hover{ border-color:#3d3d40; }
.shop__tag{
  display:inline-block; align-self:flex-start;
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em;
  font-size:.62rem; padding:.35rem .7rem; margin:0 0 1.1rem;
  background:var(--blood); color:#fff;
}
.shop__tag--alt{ background:transparent; color:var(--brass); border:1px solid var(--brass); }
.shop__tag--soon{ background:transparent; color:var(--smoke); border:1px dashed #4a4a4d; }
.shop h3{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:1.85rem; margin-bottom:.85rem;
}
.shop address{ color:var(--bone); font-size:1rem; line-height:1.55; }
.shop__hours{ margin:1.25rem 0; border-top:1px solid var(--line); padding-top:1.1rem; }
.shop__hours div{ display:flex; justify-content:space-between; gap:1rem; }
.shop__hours dt{
  font-family:var(--f-label); text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; color:var(--smoke);
}
.shop__hours dd{ font-family:var(--f-label); font-size:.85rem; letter-spacing:.04em; }
.shop__note{ color:var(--smoke); font-size:.9rem; flex:1; }
.shop__links{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.shop--soon{ background:transparent; border-style:dashed; }

/* ── Final CTA ────────────────────────────────────────────── */
.cta{ padding:clamp(4.5rem, 10vw, 8rem) 0; text-align:center; background:var(--ink-2); }
.cta__inner{ display:flex; flex-direction:column; align-items:center; }
.cta__mark{ width:clamp(110px, 18vw, 160px); height:auto; mix-blend-mode:screen; margin-bottom:1.5rem; }
.cta p{ color:var(--smoke); margin:1.1rem 0 2rem; }

/* ── Footer ───────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding-top:clamp(3rem, 6vw, 4.5rem); }
.foot__inner{
  display:grid; gap:2.5rem;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  padding-bottom:3rem;
}
.foot__brand{ display:flex; gap:1rem; align-items:flex-start; }
.foot__brand img{ width:72px; height:72px; object-fit:cover; mix-blend-mode:screen; flex:none; }
.foot__brand p{
  font-family:var(--f-label); text-transform:uppercase;
  letter-spacing:.12em; font-size:.82rem; line-height:1.5; margin:0;
}
.foot__brand span{ color:var(--smoke); letter-spacing:.2em; font-size:.7rem; }
.foot__col h4{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em;
  font-size:.7rem; color:var(--brass); margin-bottom:1rem; font-weight:500;
}
.foot__col p{ color:var(--smoke); font-size:.92rem; margin-bottom:.75rem; }
.foot__col a{ text-decoration:none; transition:color .2s; }
.foot__col a:hover{ color:var(--bone); }
.foot__base{
  border-top:1px solid var(--line); padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
}
.foot__base p{ margin:0; font-size:.78rem; color:#66625d; }
.foot__creed{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em;
}

/* ── Mobile book bar ──────────────────────────────────────── */
.bookbar{
  position:fixed; left:0; right:0; bottom:0; z-index:880;
  display:none; text-align:center; text-decoration:none;
  background:var(--blood); color:#fff;
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em;
  font-size:.82rem; padding:1.05rem 1rem calc(1.05rem + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.bookbar.is-on{ transform:translateY(0); }

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

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:900px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .nav{ background:rgba(11,11,12,.9); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
  .bookbar{ display:block; }
  .foot{ padding-bottom:70px; }
}
@media (max-width:560px){
  .hero{ min-height:92svh; }
  .eyebrow{ letter-spacing:.24em; }
  .hero__sub{ letter-spacing:.42em; }
  .hero__cta .btn{ flex:1 1 100%; }
  .pole{ width:8px; }
  .creed blockquote p{ line-height:1.25; }
}

/* ── Motion / print ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__bg img{ transform:scale(1.02); }
}
@media print{
  .nav,.bookbar,.pole,.ticker,body::after{ display:none !important; }
  body{ background:#fff; color:#000; }
}