/* Barber4Life - shared styles
   Brand: black + gold, B|$ logo, gold diagonals, hex lights.
   Change the colors here and the whole site follows. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@1,600&family=Cormorant+Garamond:wght@500;600&display=swap');

:root{
  --bg:#070707;        /* page background */
  --panel:#111111;     /* cards */
  --panel-2:#181818;
  --line:rgba(212,168,72,.22);  /* thin gold borders */
  --text:#f6f1e6;      /* main text */
  --muted:#b5aa93;     /* softer text */
  --gold:#d9a942;      /* buttons + accents */
  --gold-dark:#b8862b;
  --gold-hi:#fff0b8;
  --gold-grad:linear-gradient(180deg,#f6cf63 0%,#e8b443 30%,#c9922f 58%,#f0c768 82%,#a8761f 100%);
  --gold-btn:linear-gradient(135deg,#a8761f 0%,#f4d47f 35%,#d9a942 60%,#fff0b8 80%,#b8862b 100%);
  --radius:6px;
  --heading:'Oswald',sans-serif;
  --script:'Playfair Display',serif;
  --body:'DM Sans',sans-serif;
  /* thin gold diagonal lines, like the shop walls */
  --diagonals:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cg stroke='%23d9a942' stroke-opacity='.16' stroke-width='2' fill='none'%3E%3Cpath d='M0 620 L520 0'/%3E%3Cpath d='M380 800 L1200 120'/%3E%3Cpath d='M760 0 L1200 520'/%3E%3C/g%3E%3C/svg%3E");
  /* glowing hexagon ceiling lights */
  --hexes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='97' viewBox='0 0 168 97'%3E%3Cg fill='none' stroke='%23fff6dc' stroke-width='3'%3E%3Cpath d='M28 0 L56 48.5 L28 97 M56 48.5 H112 M112 48.5 L140 0 M112 48.5 L140 97 M0 0 H28 M140 0 H168 M0 97 H28 M140 97 H168'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg) var(--diagonals) center top/1400px auto fixed;color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,7,7,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8}
.header-inner{position:relative;max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{height:38px;width:auto;flex:none}
.brand-name{font-family:var(--heading);font-weight:700;font-size:24px;letter-spacing:3px;line-height:1;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text);padding:6px 0;position:relative;transition:color .15s}
.nav a:hover{color:var(--gold)}
.nav a.active{color:var(--gold)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold-btn)}
.cart-link{display:inline-flex;align-items:center;gap:6px}
.cart-link svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.cart-count{background:var(--gold-btn);color:#140e03;font-size:12px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:inline-grid;place-items:center;padding:0 6px;letter-spacing:0}
.menu-btn{display:none;background:var(--gold-btn);color:#140e03;border:0;border-radius:8px;width:46px;height:46px;font-size:24px;line-height:1;cursor:pointer;flex:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gold-btn);background-size:200% 100%;color:#140e03;font-family:var(--heading);font-weight:600;font-size:16px;letter-spacing:2px;text-transform:uppercase;
  padding:14px 28px;border-radius:4px;border:1px solid var(--gold);cursor:pointer;box-shadow:0 8px 24px rgba(217,169,66,.18),inset 0 1px 0 rgba(255,248,216,.7);transition:background-position .4s,transform .15s,box-shadow .2s}
.btn:hover{background-position:100% 0;box-shadow:0 10px 30px rgba(217,169,66,.35),inset 0 1px 0 rgba(255,248,216,.7)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.btn-outline{background:transparent;color:var(--gold-hi);box-shadow:none}
.btn-outline:hover{background:rgba(217,169,66,.12);color:var(--gold-hi);box-shadow:0 0 24px rgba(217,169,66,.2)}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Headings & sections ---------- */
.section{padding:90px 0}
.section-alt{background:linear-gradient(180deg,rgba(17,17,17,.9),rgba(7,7,7,.9));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-title{font-family:var(--heading);font-weight:700;font-size:clamp(42px,6.5vw,72px);letter-spacing:1px;line-height:1;text-align:center;text-transform:uppercase;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.section-sub{color:var(--muted);text-align:center;margin:14px auto 0;max-width:640px}
.kicker{display:block;text-align:center;font:700 12px var(--body);letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.script{font-family:var(--script);font-style:italic;color:var(--gold)}
.page-top{padding:80px 0 34px;text-align:center;position:relative}
.page-top h1{font-family:var(--heading);font-weight:700;font-size:clamp(50px,9vw,96px);letter-spacing:1px;line-height:1;text-transform:uppercase;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.6))}
.page-top p{color:var(--muted);max-width:640px;margin:14px auto 0;font-size:17px}

/* ---------- Home hero ---------- */
.hero{position:relative;min-height:calc(100vh - 63px);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.42) saturate(1.1)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,7,.92) 0%,rgba(7,7,7,.55) 55%,rgba(7,7,7,.2) 100%),linear-gradient(0deg,rgba(7,7,7,1),transparent 35%)}
.hex-lights{position:absolute;top:0;left:0;right:0;height:110px;background:var(--hexes) center top/168px 97px repeat-x;opacity:.85;filter:drop-shadow(0 0 6px #fff3d0) drop-shadow(0 0 16px rgba(255,236,180,.6));
  -webkit-mask:linear-gradient(180deg,#000 40%,transparent);mask:linear-gradient(180deg,#000 40%,transparent);pointer-events:none}
.hero-content{position:relative;max-width:1200px;margin:0 auto;padding:130px 24px 90px;width:100%}
.hero .eyebrow{display:inline-flex;align-items:center;gap:14px;font:700 13px var(--body);letter-spacing:5px;text-transform:uppercase;color:var(--gold)}
.hero .eyebrow::before{content:"";width:46px;height:1px;background:var(--gold)}
.hero h1{font-family:var(--heading);font-weight:700;font-size:clamp(72px,13vw,170px);letter-spacing:1px;line-height:.9;text-transform:uppercase;margin-top:18px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.65)) drop-shadow(0 0 28px rgba(217,169,66,.25))}
.hero .tagline{font-family:var(--heading);font-weight:500;font-size:clamp(22px,3vw,34px);letter-spacing:2px;color:var(--text);margin-top:14px}
.hero p{max-width:560px;color:var(--muted);font-size:clamp(16px,1.6vw,18px);margin-top:18px}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.badges{display:flex;flex-wrap:wrap;gap:26px;margin-top:38px;color:var(--muted);font-size:13px;letter-spacing:2px;text-transform:uppercase}
.badges span{display:inline-flex;align-items:center;gap:8px}
.badges svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:2}

/* ---------- Cards (services, products, courses) ---------- */
.grid{display:grid;gap:22px;margin-top:44px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--gold)}
.card h3{font-family:var(--heading);font-size:28px;letter-spacing:.5px;line-height:1.05}
.card p{color:var(--muted);font-size:15px;margin-top:8px;flex:1}
.card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.card-top svg{width:24px;height:24px;stroke:var(--line);fill:none;stroke-width:2;flex:none}
.price-row{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 16px}
.price{font-size:24px;font-weight:700;color:var(--gold)}
.price-note{font-size:13px;color:var(--muted)}
.center{text-align:center;margin-top:40px}

/* ---------- Motto band ---------- */
.motto{text-align:center;padding:110px 24px;background:linear-gradient(180deg,#222,#1a1a1a)}
.motto h2{font-family:var(--heading);font-size:clamp(56px,10vw,110px);letter-spacing:2px;line-height:1}
.motto .script{font-size:clamp(20px,2.6vw,28px);display:block;margin-top:8px}
.motto p{max-width:720px;margin:22px auto 0;color:var(--muted)}
.divider{display:flex;align-items:center;gap:18px;justify-content:center;color:var(--gold);font-family:var(--heading);font-size:22px;letter-spacing:2px;padding:30px 24px 0}
.divider::before,.divider::after{content:"";height:1px;flex:1;max-width:420px;background:linear-gradient(90deg,transparent,var(--gold))}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent)}

/* ---------- Notice box ---------- */
.notice{background:rgba(209,159,71,.1);border:1px solid rgba(209,159,71,.4);border-radius:var(--radius);padding:16px 20px;color:var(--text);max-width:760px;margin:0 auto}
.notice strong{color:var(--gold)}

/* ---------- Shop ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:9px 18px;font:500 14px var(--body);cursor:pointer}
.chip:hover{border-color:var(--gold)}
.chip.active{background:var(--gold);border-color:var(--gold);color:#1c1c1c}
.search{display:block;width:100%;max-width:420px;margin:24px auto 0;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:12px 16px;font:15px var(--body)}
.product-img{aspect-ratio:4/3;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;margin:-8px -8px 18px;overflow:hidden}
.product-img img{width:100%;height:100%;object-fit:cover}
.product-img svg{width:44%;height:44%;stroke:var(--gold);fill:none;stroke-width:1.5}
.product-cat{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.product .card h3,.product h3{font-size:24px;margin-top:4px}
.sold-out{opacity:.5}
.added{background:#3a7d44!important;border-color:#3a7d44!important;color:#fff!important}
.empty{text-align:center;color:var(--muted);padding:40px 0}

/* ---------- Cart ---------- */
.cart-box{max-width:820px;margin:20px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.cart-row{display:grid;grid-template-columns:64px 1fr auto auto auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-thumb{width:64px;height:64px;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;overflow:hidden}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-thumb svg{width:30px;height:30px;stroke:var(--gold);fill:none;stroke-width:1.5}
.cart-name{font-weight:700}
.cart-each{color:var(--muted);font-size:14px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:18px;cursor:pointer}
.line-total{font-weight:700;min-width:80px;text-align:right}
.remove{background:none;border:0;color:var(--muted);cursor:pointer;font-size:20px}
.remove:hover{color:#e66}
.totals{margin-top:20px;display:grid;gap:8px}
.totals div{display:flex;justify-content:space-between;color:var(--muted)}
.totals .grand{color:var(--text);font-size:22px;font-weight:700;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.secure{text-align:center;color:var(--muted);font-size:14px;margin-top:14px}

/* ---------- Forms ---------- */
.form-card{max-width:760px;margin:30px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
[data-hours] p{margin:2px 0}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:500}
.field input,.field select,.field textarea{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:12px 14px;font:15px var(--body);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{min-height:120px;resize:vertical}
/* Booking day + time buttons */
.days{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.day{flex:none;width:72px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 0;color:var(--text);font:500 13px var(--body);cursor:pointer;text-align:center;line-height:1.3}
.day b{display:block;font-family:var(--heading);font-size:26px;font-weight:400;line-height:1.1}
.day:hover{border-color:var(--gold)}
.day.active{background:var(--gold);border-color:var(--gold);color:#1c1c1c}
.day[disabled]{opacity:.35;cursor:not-allowed;border-style:dashed}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.slot{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 0;color:var(--text);font:500 14px var(--body);cursor:pointer}
.slot:hover{border-color:var(--gold)}
.slot.active{background:var(--gold);border-color:var(--gold);color:#1c1c1c}
.slot[disabled]{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.slot-hint{color:var(--muted);font-size:14px;grid-column:1/-1}
.form-error{color:#ff8a80;font-size:14px;margin-top:12px;text-align:center;min-height:1em}
.deposit{display:flex;justify-content:space-between;align-items:center;background:var(--panel-2);border-radius:8px;padding:14px 18px;margin:22px 0}
.deposit b{color:var(--gold);font-size:22px}

/* ---------- Courses ---------- */
.bundle{max-width:760px;margin:40px auto 0;background:var(--panel);border:2px solid var(--gold);border-radius:var(--radius);padding:36px;position:relative}
.ribbon{position:absolute;top:-14px;left:36px;background:var(--gold);color:#1c1c1c;font-weight:700;font-size:13px;padding:4px 14px;border-radius:999px}
.bundle h2{font-family:var(--heading);font-size:44px;line-height:1}
.bundle p{color:var(--muted);margin-top:10px}
.perks{list-style:none;margin:22px 0;display:grid;gap:10px}
.perks li{display:flex;gap:10px;align-items:center}
.perks li::before{content:"✓";color:var(--gold);font-weight:700}
.bundle-price{display:flex;align-items:baseline;gap:14px;margin:6px 0 20px}
.bundle-price b{font-size:44px;color:var(--gold)}
.bundle-price s{color:var(--muted);font-size:22px}
.save{background:rgba(209,159,71,.15);color:var(--gold);font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center}
.about-text p{color:var(--muted);margin-top:16px;font-size:17px}
.about-text h2{font-family:var(--heading);font-size:48px;line-height:1}
.about-badge{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:40px;text-align:center}
.about-badge .big{font-family:var(--heading);font-size:72px;color:var(--gold);line-height:1}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pill{border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:6px 14px;font-size:14px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;margin-top:30px}
.contact-grid .form-card{margin:0;max-width:none}
.info-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:grid;gap:22px;align-content:start}
.info-card h3{font-family:var(--heading);font-size:24px;color:var(--gold);letter-spacing:.5px}
.info-card p{color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{background:#141414;border-top:1px solid var(--line);margin-top:0}
.footer-inner{max-width:1200px;margin:0 auto;padding:56px 24px 28px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.footer-cols h4{font-size:16px;margin-bottom:14px}
.footer-cols p{color:var(--muted);font-size:14px;margin-bottom:6px}
.footer-name{font-family:var(--heading);font-size:26px;letter-spacing:1px;margin-bottom:12px}
.footer-gold{color:var(--gold)!important;font-weight:700}
.socials{display:flex;gap:10px;margin-top:12px}
.socials a{width:40px;height:40px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center}
.socials a:hover{border-color:var(--gold)}
.socials svg{width:18px;height:18px;stroke:var(--text);fill:none;stroke-width:2}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);margin-top:40px;padding-top:22px;color:var(--muted);font-size:14px}
.footer-bottom nav{display:flex;gap:20px}
.footer-bottom a:hover{color:var(--gold)}

/* ---------- Simple text pages ---------- */
.text-page{max-width:800px;margin:0 auto;padding:0 24px 80px;color:var(--muted)}
.text-page h2{color:var(--text);font-family:var(--heading);font-size:30px;margin:28px 0 8px}

/* ---------- Tablet ---------- */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .about-grid,.contact-grid{grid-template-columns:1fr}
}

/* ---------- Phone (drop-down menu) ---------- */
@media (max-width:820px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;background:#1c1c1c;flex-direction:column;align-items:stretch;gap:0;padding:6px 0;border-bottom:2px solid var(--gold);box-shadow:0 14px 24px rgba(0,0,0,.5)}
  .nav.open{display:flex}
  .nav a{padding:14px 24px;font-size:18px;border-left:4px solid transparent}
  .nav a.active{border-left-color:var(--gold);background:#262626}
  .nav a.active::after{display:none}
  .section{padding:56px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:repeat(2,1fr)!important;gap:14px}
  .shop-grid .card{padding:16px}
  .shop-grid h3{font-size:20px!important}
  .shop-grid .price{font-size:19px}
  .form-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr;gap:28px}
  .cart-box{padding:18px}
  .cart-row{grid-template-columns:56px 1fr auto;gap:10px 14px}
  .qty{grid-column:2}
  .line-total{grid-column:3;grid-row:2}
  .remove{grid-column:3;grid-row:1;justify-self:end}
  .bundle{padding:28px 22px}
  .hero{min-height:auto}
}

/* =====================================================================
   BRAND LAYER - gold trim, photo tiles, Meet Relly, ticker
   ===================================================================== */
.card{background:linear-gradient(160deg,#141414,#0b0b0b);border:1px solid var(--line);border-radius:var(--radius);position:relative}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,240,184,.55),transparent 35%,transparent 65%,rgba(217,169,66,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.card:hover{border-color:var(--gold);box-shadow:0 0 30px rgba(217,169,66,.12)}
.card h3{font-family:var(--heading);font-weight:600;text-transform:uppercase;letter-spacing:1px}
.price{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--heading);font-weight:700;font-size:28px}
.product-img{background:radial-gradient(circle at 50% 30%,#1d1a12,#0c0b08)}
.chip{font-family:var(--heading);font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:13px}
.chip.active{background:var(--gold-btn);color:#140e03}
.notice{background:linear-gradient(135deg,rgba(217,169,66,.12),rgba(217,169,66,.04))}
.form-card,.cart-box,.info-card,.bundle{background:linear-gradient(160deg,#131313,#0a0a0a)}
.bundle{border:1px solid var(--gold);box-shadow:0 0 40px rgba(217,169,66,.12)}
.ribbon,.day.active,.slot.active{background:var(--gold-btn)}
.bundle h2,.about-text h2,.about-badge .big,.info-card h3{font-family:var(--heading);font-weight:700;text-transform:uppercase}

/* gold ticker */
.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);background:#0b0a07;padding:16px 0}
.ticker div{display:inline-block;animation:ticker 26s linear infinite}
.ticker span{font-family:var(--heading);font-weight:700;font-size:26px;letter-spacing:4px;text-transform:uppercase;margin:0 26px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ticker span.dot{color:var(--gold);background:none;-webkit-text-fill-color:var(--gold)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Meet Relly */
.meet{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.portrait{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:visible}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;border-radius:4px;position:relative;z-index:1;filter:contrast(1.05)}
.portrait::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:2px solid var(--gold);border-radius:4px;z-index:0}
.portrait::after{content:"";position:absolute;right:-26px;bottom:-26px;width:140px;height:140px;background:url(images/logo-black.svg) center/contain no-repeat;border:1px solid var(--gold);z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.meet h2{font-family:var(--heading);font-weight:700;font-size:clamp(44px,6vw,76px);line-height:.95;text-transform:uppercase}
.meet p{color:var(--muted);font-size:17px;margin-top:18px;max-width:540px}
.meet .sig{font-family:var(--script);font-style:italic;color:var(--gold);font-size:30px;margin-top:22px}
.meet .pill-row{margin-top:24px}

/* photo tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.tile{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;border:1px solid var(--line);display:flex;align-items:flex-end}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,7,7,.95) 10%,rgba(7,7,7,.2) 60%,transparent)}
.tile:hover img{transform:scale(1.06)}
.tile:hover{border-color:var(--gold)}
.tile-body{position:relative;z-index:1;padding:26px}
.tile-body h3{font-family:var(--heading);font-weight:700;font-size:34px;text-transform:uppercase;line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tile-body p{color:var(--muted);font-size:15px;margin:8px 0 14px}
.tile-body .more{font:700 12px var(--body);letter-spacing:3px;text-transform:uppercase;color:var(--gold-hi)}

/* step inside the shop */
.inside{display:grid;grid-template-columns:1fr 1fr;min-height:620px;border-block:1px solid var(--line)}
.inside-photo{background:url(images/shop.jpg) center/cover}
.inside-text{padding:80px 60px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#0a0a0a,#070707)}
.inside-text h2{font-family:var(--heading);font-weight:700;font-size:clamp(44px,5.5vw,70px);line-height:.95;text-transform:uppercase}
.inside-text p{color:var(--muted);margin-top:16px;max-width:460px}
.hours{margin-top:26px;display:grid;gap:8px;max-width:380px}
.hours div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px}
.hours b{color:var(--gold-hi);font-weight:500}

/* GO TO WORK band */
.motto{position:relative;background:radial-gradient(ellipse at center,rgba(217,169,66,.16),transparent 65%),#070707;border-top:1px solid var(--line)}
.motto h2{font-family:var(--heading);font-weight:700;text-transform:uppercase;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(217,169,66,.3))}
.motto .tag{font-family:var(--heading);font-weight:500;font-size:clamp(20px,2.6vw,30px);letter-spacing:3px;color:var(--text);margin-top:10px}
.divider{font-family:var(--heading);font-weight:700}

/* footer */
.site-footer{background:#050505;border-top:1px solid var(--gold)}
.footer-logo{height:54px;width:auto;margin-bottom:14px}
.footer-name{font-family:var(--heading);font-weight:700;letter-spacing:3px}
.footer-cols h4{font-family:var(--heading);font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}

@media (max-width:900px){
  .meet,.inside{grid-template-columns:1fr}
  .inside-photo{min-height:420px}
  .inside-text{padding:50px 24px}
  .tiles{grid-template-columns:1fr}
  .tile{aspect-ratio:16/11}
  .portrait{max-width:420px;margin:0 auto 20px}
  .portrait::after{width:100px;height:100px;right:-10px;bottom:-16px}
  .hero-content{padding:110px 24px 70px}
  .brand-name{font-size:20px;letter-spacing:2px}
  .brand-logo{height:32px}
}

/* glowing GO TO WORK sign on the shop wall */
.inside-photo{position:relative;background-position:center top}
.wall-sign{position:absolute;left:50%;top:40%;transform:translate(-40%,-50%);text-align:center;font-family:var(--heading);font-weight:700;text-transform:uppercase;
  font-size:clamp(46px,6vw,84px);line-height:.92;letter-spacing:2px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 6px rgba(255,214,120,.75)) drop-shadow(0 0 22px rgba(217,169,66,.55)) drop-shadow(0 0 48px rgba(217,169,66,.35));pointer-events:none}
@media (max-width:900px){.wall-sign{font-size:clamp(48px,13vw,80px)}}

/* =====================================================================
   GOLDEN TICKET (booking page)
   ===================================================================== */
.ticket-wrap{max-width:820px;margin:44px auto 0}
.ticket-note{text-align:center;color:var(--muted);font-size:13px;letter-spacing:3px;text-transform:uppercase;margin-bottom:16px}
.ticket{--cut:16px;display:grid;grid-template-columns:1fr 150px;color:#3a2504;position:relative;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(217,169,66,.25));
  /* notched corners + side bites like a real ticket */
  -webkit-mask:radial-gradient(circle var(--cut) at 0 0,#0000 98%,#000) top left,radial-gradient(circle var(--cut) at 100% 0,#0000 98%,#000) top right,
    radial-gradient(circle var(--cut) at 0 100%,#0000 98%,#000) bottom left,radial-gradient(circle var(--cut) at 100% 100%,#0000 98%,#000) bottom right;
  -webkit-mask-size:51% 51%;-webkit-mask-repeat:no-repeat;
  mask:radial-gradient(circle var(--cut) at 0 0,#0000 98%,#000) top left,radial-gradient(circle var(--cut) at 100% 0,#0000 98%,#000) top right,
    radial-gradient(circle var(--cut) at 0 100%,#0000 98%,#000) bottom left,radial-gradient(circle var(--cut) at 100% 100%,#0000 98%,#000) bottom right;
  mask-size:51% 51%;mask-repeat:no-repeat;transform:rotate(-1.2deg);transition:transform .3s}
.ticket:hover{transform:rotate(0) scale(1.01)}
.ticket-main,.ticket-stub{background:linear-gradient(115deg,#a8761f 0%,#f6d77e 14%,#d9a942 28%,#fff0b0 44%,#c9922f 58%,#f4d47f 74%,#b8862b 88%,#f6d77e 100%);background-size:220% 100%;animation:foil 7s linear infinite;position:relative}
@keyframes foil{to{background-position:220% 0}}
.ticket-main{padding:26px 34px 22px;border-right:3px dashed rgba(58,37,4,.45)}
.ticket-main::before,.ticket-stub::before{content:"";position:absolute;inset:10px;border:2px solid rgba(58,37,4,.55);outline:1px solid rgba(58,37,4,.35);outline-offset:-7px;pointer-events:none}
.ticket-top{display:flex;justify-content:space-between;align-items:center;font:700 12px 'Cinzel',serif;letter-spacing:3px;text-transform:uppercase}
.ticket-top img{height:34px;border-radius:2px}
.ticket-title{font-family:'Cinzel Decorative',serif;font-weight:900;font-size:clamp(34px,6vw,58px);line-height:1;text-align:center;margin-top:10px;letter-spacing:1px;
  color:#3a2504;text-shadow:0 1px 0 rgba(255,244,200,.8),0 -1px 0 rgba(90,55,5,.4)}
.ticket-sub{text-align:center;font:700 13px 'Cinzel',serif;letter-spacing:5px;text-transform:uppercase;margin-top:6px}
.ticket-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin-top:20px}
.ticket-rows div{border-bottom:1px solid rgba(58,37,4,.45);padding-bottom:6px;min-width:0}
.ticket-rows small{display:block;font:700 10px 'Cinzel',serif;letter-spacing:3px;text-transform:uppercase;opacity:.75}
.ticket-rows b{display:block;font:700 18px 'Cinzel',serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-fine{text-align:center;font:600 11px var(--body);letter-spacing:1px;margin-top:16px;opacity:.8}
.ticket-stub{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 10px}
.stub-text{writing-mode:vertical-rl;transform:rotate(180deg);font:700 12px 'Cinzel',serif;letter-spacing:4px;text-transform:uppercase}
.stub-seal{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:#1a1004;color:#f0c768;font:900 22px 'Cinzel',serif;border:3px double #f0c768;box-shadow:0 0 0 3px #1a1004}
.ticket.filled .ticket-title{animation:pop .5s}
@keyframes pop{50%{transform:scale(1.05)}}
@media (max-width:600px){
  .ticket{grid-template-columns:1fr;transform:none}
  .ticket-main{border-right:0;border-bottom:3px dashed rgba(58,37,4,.45);padding:24px 22px 20px}
  .ticket-stub{flex-direction:row;padding:14px 24px}
  .stub-text{writing-mode:horizontal-tb;transform:none;font-size:10px;letter-spacing:2px}
  .stub-seal{width:54px;height:54px;font-size:16px}
  .ticket-rows{grid-template-columns:1fr}
}
.ticket-btn{display:block;margin:20px auto 0;background:#1a1004;color:#f6d77e;border:2px solid #1a1004;outline:1px solid #f0c768;outline-offset:-5px;font:700 15px 'Cinzel',serif;letter-spacing:2px;text-transform:uppercase;
  padding:14px 26px;border-radius:4px;cursor:pointer;box-shadow:0 6px 18px rgba(26,16,4,.45);transition:transform .15s,background .15s;position:relative;z-index:1}
.ticket-btn:hover{transform:translateY(-2px);background:#2a1a06}
.ticket-btn[disabled]{opacity:.6;cursor:wait}
@media (max-width:600px){.ticket-btn{font-size:13px;letter-spacing:1px;padding:13px 16px;width:100%}}
/* ticket fields: name box + drop-downs printed right on the ticket */
.ticket-rows label{display:block;border-bottom:1px solid rgba(58,37,4,.5);padding-bottom:4px;min-width:0;position:relative;z-index:1}
.ticket-rows input,.ticket-rows select{width:100%;background:transparent;border:0;outline:0;color:#2a1a03;font:700 18px 'Cinzel',serif;padding:4px 0;-webkit-appearance:none;appearance:none;border-radius:0;cursor:pointer}
.ticket-rows input{cursor:text}
.ticket-rows input::placeholder{color:rgba(58,37,4,.55)}
.ticket-rows select{padding-right:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233a2504' stroke-width='2' fill='none'/%3E%3C/svg%3E") right 4px center no-repeat}
.ticket-rows select option{background:#f6e3a8;color:#2a1a03;font-family:var(--body);font-weight:500}
.ticket-rows label:focus-within{border-bottom-color:#2a1a03;box-shadow:0 2px 0 #2a1a03}
.ticket-rows .wide{grid-column:1/-1}
.ticket-error{text-align:center;color:#7a1406;font:700 14px var(--body);min-height:1em;margin-top:10px;position:relative;z-index:1}
@media (max-width:600px){.ticket-rows .wide{grid-column:auto}}
.stub-seal img{width:68%;height:auto;display:block}

/* =====================================================================
   THE MENU page
   ===================================================================== */
.menu-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:30px 50px;max-width:1100px;margin:0 auto 10px}
.menu-group{background:linear-gradient(160deg,#121212,#0a0a0a);border:1px solid var(--line);border-radius:6px;padding:34px 34px 20px;position:relative}
.menu-group::before{content:"";position:absolute;inset:8px;border:1px solid rgba(217,169,66,.18);border-radius:4px;pointer-events:none}
.menu-group h2{font-family:var(--heading);font-weight:700;text-transform:uppercase;font-size:34px;letter-spacing:2px;text-align:center;margin-bottom:18px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu-item{display:block;padding:14px 4px;border-bottom:1px solid rgba(217,169,66,.12);transition:background .2s}
.menu-item:last-child{border-bottom:0}
.menu-item:hover{background:rgba(217,169,66,.06)}
.menu-line{display:flex;align-items:baseline;gap:10px}
.menu-name{font-family:var(--heading);font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:1px}
.menu-dots{flex:1;border-bottom:2px dotted rgba(217,169,66,.5);transform:translateY(-5px)}
.menu-price{font-family:var(--heading);font-weight:700;font-size:24px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu-desc{color:var(--muted);font-size:14px;margin-top:4px;display:flex;justify-content:space-between;gap:12px}
.menu-book{color:var(--gold);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s}
.menu-item:hover .menu-book{opacity:1}
@media (max-width:600px){.menu-board{grid-template-columns:1fr}.menu-group{padding:28px 20px 14px}.menu-book{opacity:1}}

/* =====================================================================
   BIO page
   ===================================================================== */
.bio-hero{padding:80px 0 70px;border-bottom:1px solid var(--line)}
.bio-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
.bio-name{font-family:var(--heading);font-weight:700;font-size:clamp(80px,12vw,150px);line-height:.9;text-transform:uppercase;display:block}
.bio-title{font-family:var(--heading);font-weight:500;font-size:clamp(18px,2.2vw,24px);letter-spacing:3px;text-transform:uppercase;margin-top:8px}
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:34px 0 32px}
.cred{border:1px solid var(--line);border-radius:6px;padding:18px 10px;text-align:center;background:linear-gradient(160deg,#141414,#0a0a0a)}
.cred b{display:block;font-family:var(--heading);font-weight:700;font-size:44px;line-height:1}
.cred span{display:block;color:var(--muted);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-top:8px;line-height:1.4}
.bio-story{max-width:820px}
.bio-story p{color:var(--muted);font-size:18px;line-height:1.85;margin-top:22px}
.bio-story p b{color:var(--text);font-weight:700}
.bio-story .sig{font-family:var(--script);font-style:italic;color:var(--gold);font-size:34px;margin-top:26px}
.motto .center{margin-top:30px}
@media (max-width:900px){
  .bio-grid{grid-template-columns:1fr;gap:40px}
  .creds{grid-template-columns:repeat(2,1fr)}
  .bio-hero{padding:50px 0}
}

/* =====================================================================
   HAIR STORE page
   ===================================================================== */
.hair-hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hair-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:brightness(.55)}
.hair-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,7,.95) 0%,rgba(7,7,7,.6) 55%,rgba(7,7,7,.1)),linear-gradient(0deg,#070707,transparent 40%)}
.hair-hero-content{position:relative;padding:90px 24px}
.hair-hero h1{font-family:var(--heading);font-weight:700;font-size:clamp(54px,8.5vw,110px);line-height:.92;text-transform:uppercase}
.hair-hero p{color:var(--muted);max-width:520px;margin-top:20px;font-size:17px}
.hair-perks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font:700 12px var(--body);letter-spacing:2px;text-transform:uppercase;color:var(--gold-hi)}
.hair-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.hair-card{background:linear-gradient(160deg,#141414,#0a0a0a);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.hair-card:hover{border-color:var(--gold);box-shadow:0 0 34px rgba(217,169,66,.14)}
.hair-img{position:relative;aspect-ratio:4/5;background:#111;overflow:hidden}
.hair-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.hair-card:hover .hair-img img{transform:scale(1.05)}
.hair-img svg{width:40%;height:40%;margin:30% auto;display:block;stroke:var(--gold);fill:none}
.hair-tag{position:absolute;top:14px;left:14px;background:var(--gold-btn);color:#140e03;font:700 11px var(--body);letter-spacing:2px;text-transform:uppercase;padding:5px 10px;border-radius:3px}
.hair-body{padding:22px;display:flex;flex-direction:column;flex:1}
.hair-body h3{font-family:var(--heading);font-weight:600;font-size:24px;text-transform:uppercase;letter-spacing:1px;line-height:1.1}
.hair-body p{color:var(--muted);font-size:14px;margin-top:8px;flex:1}
.hair-len{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.hair-len span{font:700 11px var(--body);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.hair-len select{background:#070707;border:1px solid var(--line);color:var(--text);border-radius:4px;padding:11px 12px;font:15px var(--body)}
.hair-len select:focus{outline:none;border-color:var(--gold)}
.hair-foot{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0}
.hair-foot small{color:var(--muted);font-size:13px}
@media (max-width:1000px){.hair-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.hair-grid{grid-template-columns:1fr}.hair-hero{min-height:480px}}
/* 8 menu items - tighter on mid-size screens */
@media (max-width:1180px) and (min-width:821px){.nav{gap:18px}.nav a{font-size:12px;letter-spacing:1.5px}.brand-name{font-size:20px}}
.tiles.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.tiles.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tiles.four{grid-template-columns:1fr}}
.meet-creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.meet-creds span{border:1px solid var(--gold);color:var(--gold-hi);border-radius:999px;padding:6px 14px;font:700 12px var(--body);letter-spacing:1.5px;text-transform:uppercase}
/* The Menu - centered, professional menu style with gold descriptions */
.menu-item{text-align:center;padding:16px 6px}
.menu-line{justify-content:center;gap:14px}
.menu-dots{flex:0 0 36px;border-bottom:1px solid rgba(217,169,66,.6);transform:translateY(-6px)}
.menu-desc{display:block;color:var(--gold);font-size:12.5px;letter-spacing:1.2px;text-transform:capitalize;font-weight:500;margin-top:6px;line-height:1.6;max-width:360px;margin-left:auto;margin-right:auto}
.menu-book{display:block;margin-top:6px;opacity:.85}
/* upbeat gold italic descriptions on The Menu */
.menu-desc{font-family:var(--script);font-style:italic;font-weight:600;font-size:15px;letter-spacing:.3px;text-transform:none;color:var(--gold-hi);opacity:.92}
.menu-line{flex-wrap:wrap;row-gap:2px}
/* luxury menu descriptions - clean upright serif, gold */
.menu-desc{font-family:'Cormorant Garamond',serif;font-style:normal;font-weight:600;font-size:17px;letter-spacing:.6px;color:var(--gold);opacity:1;line-height:1.45}
.menu-book{font-family:var(--body);font-style:normal}
/* even lines: name + price always on one line; white names with a gold trim */
.menu-line{flex-wrap:nowrap;gap:12px}
.menu-name{white-space:nowrap;font-size:clamp(15px,1.55vw,19px);color:#fff;
  text-shadow:1px 0 0 #c9922f,-1px 0 0 #c9922f,0 1px 0 #c9922f,0 -1px 0 #c9922f,.7px .7px 0 #c9922f,-.7px -.7px 0 #c9922f,.7px -.7px 0 #c9922f,-.7px .7px 0 #c9922f,0 0 10px rgba(217,169,66,.35)}
.menu-dots{flex:0 0 22px}
.menu-price{white-space:nowrap;font-size:clamp(18px,1.8vw,22px)}
.menu-name{font-size:19px;letter-spacing:1.2px}
.menu-price{font-size:22px}
@media (max-width:420px){.menu-name{font-size:16px;letter-spacing:.8px}.menu-price{font-size:19px}}
.menu-line{gap:9px}.menu-dots{flex-basis:16px}
.menu-group{padding-left:26px;padding-right:26px}

/* =====================================================================
   COURSES - golden tickets
   ===================================================================== */
.course-tickets{display:grid;gap:40px;max-width:860px;margin:20px auto 0}
.course-ticket{transform:rotate(-1deg)}
.course-ticket:nth-child(even){transform:rotate(1deg)}
.course-title{font-size:clamp(28px,4.6vw,46px)}
.course-desc{text-align:center;font:600 15px var(--body);margin:14px auto 0;max-width:520px;position:relative;z-index:1}
.course-perks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;margin:16px 0 0;position:relative;z-index:1}
.course-perks li{font:700 13px 'Cinzel',serif;letter-spacing:.5px}
.course-perks li::before{content:"✦ "}
.course-price{display:flex;justify-content:center;align-items:baseline;gap:14px;margin-top:16px;position:relative;z-index:1}
.course-price b{font-family:'Cinzel Decorative',serif;font-size:44px;line-height:1}
.course-price s{font:700 20px 'Cinzel',serif;opacity:.6}
.course-price span{background:#1a1004;color:#f0c768;font:700 11px var(--body);letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.how-access{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px;margin:50px auto 0}
.how-access div{border:1px solid var(--line);border-radius:6px;padding:20px;text-align:center;background:linear-gradient(160deg,#141414,#0a0a0a)}
.how-access b{display:block;font-family:var(--heading);font-size:36px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.how-access span{color:var(--muted);font-size:14px}
@media (max-width:600px){.course-perks{grid-template-columns:1fr}.how-access{grid-template-columns:1fr}.course-ticket,.course-ticket:nth-child(even){transform:none}}