/* ============================================================
   NEW YORK HAIR SALON — Budapest
   Design tokens pulled from the shop's real signage:
   navy board, amber skyline, red wordmark, barber-pole stripes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --navy-deep:   #10131a;
  --navy:        #161a24;
  --navy-raised: #1e2330;
  --cream:       #f1e2ae;
  --amber:       #dd8a34;
  --amber-soft:  #e9a75c;
  --red:         #c33b2f;
  --blue:        #2f5f8a;
  --off-white:   #e8e3d6;
  --off-white-dim: #b7b2a4;
  --line: rgba(241,226,174,0.14);

  --display: 'Bebas Neue', sans-serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 1140px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--navy-deep);
  color:var(--off-white);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); letter-spacing:0.02em; margin:0; }
p{ margin:0; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Barber pole signature element ---------- */
.pole{
  width:14px;
  border-radius:7px;
  background:repeating-linear-gradient(
    -45deg,
    var(--red) 0 10px,
    var(--off-white) 10px 20px,
    var(--blue) 20px 30px,
    var(--off-white) 30px 40px
  );
  background-size:56px 56px;
  animation: pole-spin 3.4s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
@keyframes pole-spin{
  from{ background-position:0 0; }
  to{ background-position:0 56px; }
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--amber); color:var(--navy-deep);
  padding:10px 16px; z-index:200; font-family:var(--body); font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Header / subway-style nav ---------- */
header.site{
  position:sticky; top:0; z-index:100;
  background:rgba(16,19,26,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:var(--max); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .pole{ height:34px; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text .b1{ font-family:var(--display); font-size:1.55rem; color:var(--cream); letter-spacing:0.04em; }
.brand-text .b2{ font-family:var(--display); font-size:1.55rem; color:var(--red); letter-spacing:0.04em; margin-top:-4px; }

nav.lines{ display:flex; gap:10px; flex-wrap:wrap; }
nav.lines a{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--off-white-dim);
  transition:border-color .2s, color .2s, background .2s;
}
nav.lines a:hover, nav.lines a:focus-visible{
  color:var(--navy-deep);
  background:var(--amber-soft);
  border-color:var(--amber-soft);
}
nav.lines a[aria-current="page"]{
  color:var(--navy-deep);
  background:var(--cream);
  border-color:var(--cream);
}
.nav-toggle{ display:none; }

@media (max-width: 720px){
  .nav-inner{ flex-wrap:wrap; gap:12px; }
  nav.lines{ width:100%; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:96px 0 220px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(221,138,52,0.16), transparent 60%),
    var(--navy);
}
.hero.compact{ padding:64px 0 200px; }
.skyline{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:180px;
  display:block;
  opacity:0.9;
}
.hero-content{ position:relative; z-index:2; text-align:center; }
.eyebrow{
  font-family:var(--mono); color:var(--amber-soft); letter-spacing:0.22em;
  text-transform:uppercase; font-size:0.78rem; margin-bottom:18px; display:inline-block;
}
.hero h1{
  font-size:clamp(3.2rem, 9vw, 6.4rem);
  color:var(--cream);
  line-height:0.92;
}
.hero h1 span{ color:var(--red); display:block; }
.hero .rule{
  width:120px; height:3px; background:var(--red); margin:22px auto;
}
.hero .sub{
  max-width:520px; margin:0 auto; color:var(--off-white-dim); font-size:1.05rem;
}
.hero .ctas{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn{
  font-family:var(--body); font-weight:600; font-size:0.95rem;
  padding:14px 26px; border-radius:4px; display:inline-block;
  border:1px solid transparent; transition:transform .15s ease, background .2s, color .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--red); color:var(--cream); }
.btn-primary:hover{ background:#a92f26; }
.btn-outline{ background:var(--cream); border-color:var(--cream); color:var(--navy-deep); }
.btn-outline:hover{ background:var(--amber-soft); border-color:var(--amber-soft); color:var(--navy-deep); }

/* ---------- Sections ---------- */
section{ padding:72px 0; }
.section-head{ margin-bottom:40px; }
.section-head .eyebrow{ margin-bottom:10px; }
.section-head h2{ font-size:clamp(2.2rem, 5vw, 3rem); color:var(--cream); }
.section-head p{ color:var(--off-white-dim); max-width:560px; margin-top:12px; }

.divider{
  height:10px; margin:0;
  background:repeating-linear-gradient(-45deg, var(--red) 0 10px, var(--off-white-dim) 10px 20px, var(--blue) 20px 30px, var(--off-white-dim) 30px 40px);
  background-size:56px 56px;
  animation: pole-spin 3.4s linear infinite;
  opacity:0.85;
}

/* ---------- Cards / grids ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; }
@media (max-width: 860px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
}

.card{
  background:var(--navy-raised);
  border:1px solid var(--line);
  border-radius:6px;
  padding:28px;
}
.card .num{ font-family:var(--mono); color:var(--amber); font-size:0.8rem; letter-spacing:0.1em; }
.card h3{ font-size:1.5rem; color:var(--cream); margin-top:10px; }
.card p{ color:var(--off-white-dim); margin-top:10px; font-size:0.95rem; }

/* ---------- Pricing table ---------- */
.price-block{ margin-bottom:48px; }
.price-block h3{
  font-size:1.6rem; color:var(--amber-soft);
  border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:6px;
}
table.prices{ width:100%; border-collapse:collapse; }
table.prices tr{ border-bottom:1px dashed var(--line); }
table.prices td{ padding:14px 4px; }
table.prices td.name{ color:var(--off-white); }
table.prices td.hu{ color:var(--off-white-dim); font-size:0.85rem; }
table.prices td.price{
  font-family:var(--mono); color:var(--cream); text-align:right; white-space:nowrap;
}
table.prices tr:hover td{ background:rgba(221,138,52,0.06); }
.price-note{
  font-family:var(--mono); font-size:0.8rem; color:var(--off-white-dim);
  margin-top:10px; border-left:2px solid var(--amber); padding-left:12px;
}

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width: 860px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns:1fr; } }
.g-item{
  aspect-ratio:4/5; border-radius:6px; overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--navy-raised);
}
.g-item img{ width:100%; height:100%; object-fit:cover; }
.g-item.wide{ aspect-ratio:8/5; grid-column:span 2; }
@media (max-width:560px){ .g-item.wide{ grid-column:span 1; } }
.g-placeholder{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--off-white-dim); text-align:center; padding:20px;
}
.g-placeholder svg{ width:38px; height:38px; opacity:0.6; }
.g-placeholder span{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.info-row{ display:flex; gap:28px; padding:18px 0; border-bottom:1px solid var(--line); }
.info-row .ico{ color:var(--amber-soft); font-family:var(--mono); font-size:0.8rem; padding-top:2px; width:110px; flex:none; text-transform:uppercase; letter-spacing:0.06em; }
.info-row .val a{ color:var(--cream); }
.info-row .val a:hover{ color:var(--amber-soft); }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table td{ padding:8px 0; border-bottom:1px dashed var(--line); }
.hours-table td.day{ color:var(--off-white); }
.hours-table td.time{ text-align:right; font-family:var(--mono); color:var(--cream); }
.hours-table tr.closed td.time{ color:var(--red); }
.hours-table tr.today td{ color:var(--amber-soft); font-weight:600; }

.map-frame{ border:1px solid var(--line); border-radius:6px; overflow:hidden; height:340px; }
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(0.3) invert(0.92) contrast(0.9); }

/* ---------- Language toggle ---------- */
.lang-toggle{ display:flex; gap:4px; border:1px solid var(--line); border-radius:999px; padding:3px; flex:none; }
.lang-btn{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; font-weight:500;
  padding:6px 12px; border-radius:999px; border:none; background:transparent; color:var(--off-white-dim);
  cursor:pointer; transition:background .2s, color .2s;
}
.lang-btn:hover{ color:var(--cream); }
.lang-btn.active{ background:var(--cream); color:var(--navy-deep); }

/* ---------- Staff page ---------- */
.staff-profile{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:44px; align-items:start;
  padding:44px 0; border-bottom:1px solid var(--line);
}
.staff-profile:last-child{ border-bottom:none; }
@media (max-width: 760px){
  .staff-profile{ grid-template-columns:1fr; gap:24px; }
}
.staff-photo{
  border-radius:6px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:4/5;
}
.staff-photo img{ width:100%; height:100%; object-fit:cover; }
.staff-role{
  font-family:var(--mono); color:var(--amber-soft); letter-spacing:0.1em; text-transform:uppercase;
  font-size:0.78rem; margin-bottom:8px; display:block;
}
.staff-name{ font-size:2.4rem; color:var(--cream); margin-bottom:14px; }
.staff-bio{ color:var(--off-white-dim); font-size:1.02rem; margin-bottom:18px; }
.staff-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.staff-tag{
  font-family:var(--mono); font-size:0.74rem; letter-spacing:0.03em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--off-white); padding:6px 12px; border-radius:999px;
}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:36px 0;
  background:var(--navy);
}
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-inner .eyebrow{ margin:0; }
.footer-links{ display:flex; gap:18px; }
.footer-links a{ color:var(--off-white-dim); font-family:var(--mono); font-size:0.8rem; }
.footer-links a:hover{ color:var(--amber-soft); }