/* Winners Circle — ATX theme (Black/White with hint of platinum; Iron Ore base) */
:root{
  --iron-ore:#2c2d2f;
  --panel:#111214;
  --panel-2:#15161a;
  --line:#222327;
  --text:#f1f1f3;
  --muted:#cfcfd3;
  --platinum:#b9bcc2;
  --brand:#ffffff;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--iron-ore);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin:0 auto}
.section-pad{padding:84px 0} .section-pad-top{padding:120px 0 84px}
.narrow{max-width:760px;margin:0 auto}
.center{text-align:center}
.pad-top{padding-top:18px}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(17,18,20,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{font-weight:800;letter-spacing:.5px}
.menu a{margin:0 10px;opacity:.95;position:relative}
.menu a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--platinum);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.menu a:hover:after{transform:scaleX(1)}
.hamburger{display:none;background:none;border:0;padding:6px}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--line);font-weight:700}
.btn.primary{background:var(--brand);color:#111;border-color:transparent}
.btn.secondary{background:var(--panel)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn:hover{transform:translateY(-1px)}

/* Hero */
.hero{background:radial-gradient(1000px 600px at 0% 0%, #1d1f22 0%, rgba(17,17,17,0) 65%)}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
.hero-copy h1{font-size: clamp(2.4rem, 4.1vw, 3.8rem); line-height:1.06;margin:0 0 12px}
.lead{opacity:.92;max-width:56ch;margin-bottom:16px}
.badge-row{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--platinum);font-size:.92rem}
.hero-photo{width:100%;aspect-ratio:4/5;border-radius:18px;border:1px solid var(--line);object-fit:cover;filter:brightness(.78)}

/* Sections */
.section-head h2{font-size:clamp(1.8rem,3.2vw,2.2rem);margin:0 0 6px}
.section-head .sub{opacity:.85;margin:0 0 10px;color:var(--platinum)}
.alt{background:var(--panel-2)}

/* Cards */
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cards-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card.service .price{margin-top:10px;font-weight:800;color:var(--platinum)}
.card.barber .avatar{width:100%;aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,#2f3135,#16181c);margin-bottom:10px}

/* FAQ */
.faq-list details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0}
.faq-list summary{font-weight:700;cursor:pointer}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;align-items:start}
.contact-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.map-embed iframe{width:100%;height:280px;border:1px solid var(--line);border-radius:14px}

/* Footer */
.footer{border-top:1px solid var(--line);background:#0a0b0d;padding:20px 0}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;align-items:center}
.footer-links a{margin-right:14px;opacity:.85}
.credits{opacity:.6;font-size:.9rem}

/* Floating book button */
.floating-book{
  position:fixed;right:18px;bottom:18px;z-index:200;
  background:var(--brand);color:#111;padding:12px 16px;border-radius:999px;
  font-weight:800;border:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.floating-book:hover{transform:translateY(-1px)}
.walkins{margin:10px 0 0;color:var(--platinum);font-weight:700}
@media (max-width: 480px){ .floating-book{right:12px;bottom:12px;padding:12px 14px} }