/* Customer design variant 1. Dashboard styles and booking logic unchanged. */
html{background:#090c0d;color-scheme:dark}
body{margin:0;padding:0!important;background:#090c0d;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.wrap{width:100%;max-width:none;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;overflow:visible;position:relative}
.top{position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;max-width:none;padding:20px clamp(20px,4vw,64px);margin:0;border:0;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:10px;background:linear-gradient(180deg,#0009,transparent);z-index:4}
.customer-logo{display:block;width:clamp(148.75px,41.65vw,208.25px);flex:0 1 auto;text-decoration:none;line-height:0;mix-blend-mode:screen}
.customer-logo svg{display:block;width:100%;height:auto;overflow:hidden}
.customer-logo:focus-visible{outline:2px solid #e4cda3;outline-offset:5px;border-radius:4px}
.top-tools{flex:0 0 auto;margin-top:9px}
.top select{width:76px;min-height:38px;border:1px solid #ffffff35;border-radius:20px;background:#161918b3;color:#f6e9cc;font-size:13px;padding:8px}
.hero{height:100svh;min-height:640px;max-height:none;padding:0;display:block;position:relative;isolation:isolate;overflow:hidden}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-width:none;margin:0}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;border-radius:0}
.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0002 0%,transparent 27%,#0001 43%,#090c0d99 64%,#090c0def 94%,#090c0d 100%)}
.hero>div:first-child{position:absolute;z-index:2;inset-inline:clamp(20px,4vw,64px);bottom:max(25px,env(safe-area-inset-bottom));max-width:560px}
.hero h1{font-family:inherit;font-size:clamp(28px,7.2vw,42px);font-weight:750;line-height:1.12;letter-spacing:-.04em;max-width:none;margin:0 0 10px;color:#f7f4ed;text-wrap:initial}
.hero p{display:block;max-width:none;color:#bcb9b2;font-size:clamp(15px,3.9vw,20px);line-height:1.4;margin:0 0 22px}
.hero .cta{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;min-height:54px;padding:15px 20px;background:linear-gradient(110deg,#faeac5,#d8b373);border:1px solid #f4dab0;border-radius:12px;color:#17150f;font-size:17px;font-weight:650;text-decoration:none;box-shadow:0 8px 28px #0003}
.hero .cta:after{content:"→";font-size:25px;font-weight:400;line-height:1}
.hero .cta:hover{background:linear-gradient(110deg,#fff0d1,#e3c089)}
.hero .cta:focus-visible{outline:3px solid #fff;outline-offset:5px}
.hero-meta{display:flex;justify-content:center;gap:7px;color:#a8a59d;font-size:12px;line-height:1.4;margin-top:14px}
.hero-meta>span:nth-child(n+2){display:none}
body.booking-mode .wrap{max-width:480px;margin:auto}
body.booking-mode .top{position:relative;max-width:480px;padding:14px 18px;background:#090c0d}
body.booking-mode .customer-logo{width:157.25px}
body.booking-mode .top-tools{margin-top:9px}
body.booking-mode #customer{margin-top:0;margin-bottom:0}
@media(min-width:700px){.hero{min-height:720px}.top{padding-top:26px}.customer-logo{width:225.25px}.hero-photo img{object-position:60% 25%}.hero-photo:after{background:linear-gradient(90deg,#090c0de6,#090c0d55 50%,transparent 80%),linear-gradient(0deg,#090c0d 0%,transparent 60%)}.hero>div:first-child{bottom:65px}.hero h1{font-size:clamp(42px,4.5vw,64px)}.hero p{font-size:22px;margin-bottom:28px}.hero .cta{max-width:440px;min-height:60px;font-size:19px}.hero-meta{max-width:440px;font-size:13px}}
@media(max-width:360px){.top{padding:16px}.customer-logo{width:146.2px}.top select{width:70px}.hero>div:first-child{inset-inline:18px}.hero h1{font-size:28px}.hero p{font-size:15px}}
@media(max-height:700px) and (max-width:699px){.hero{min-height:600px}.hero h1{font-size:clamp(27px,7vw,35px)}.hero p{margin-bottom:15px}.hero>div:first-child{bottom:20px}.hero-meta{margin-top:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Visible access to the standalone staff dashboard. */
.top .top-tools{display:flex;flex-direction:column;align-items:flex-end;gap:9px;margin-top:3px}
.top .staff-entry{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 10px;border:1px solid #d4b47d70;border-radius:18px;background:#101615bd;color:#efdab1;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;line-height:1.3}
.top .staff-entry:hover{background:#343127;color:#fff0ce}
.top .staff-entry:focus-visible{outline:2px solid #f3d39a;outline-offset:4px}
.top .staff-entry{order:2}.top .top-tools select{order:1}
body.booking-mode .top .top-tools{margin-top:0;gap:6px}

/* Approved gold logo without the black source rectangle. */
.top .customer-logo{mix-blend-mode:normal}
.top .customer-logo img{display:block;width:100%;height:auto;object-fit:contain;border:0;background:transparent}
.top .staff-entry{min-height:44px;border-color:#d7b77b;border-radius:24px;color:#f0d49e}

/* 2026-10-06: Never flash the bundled legacy hero image before the saved studio image loads. */
.hero-photo{background:#090c0d;overflow:hidden}
.hero-photo img{transition:opacity .18s ease;}

/* Barber Flow template: every customer hero receives a restrained black/gold integration layer. */
.hero-photo:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 82% 18%,rgba(205,162,87,.20),transparent 36%),linear-gradient(105deg,rgba(4,6,6,.12),rgba(154,112,45,.07) 55%,rgba(4,6,6,.18));mix-blend-mode:screen}.hero-photo:after{z-index:1}.hero>div:first-child,.photo-label{z-index:2}