@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap");
:root { --bg:#171615; --surface:#201e1d; --surface-2:#292625; --text:#f7f4f0; --muted:#bdb5ae; --line:#3b3734; --orange:#d7854b; --orange-light:#eda76f; --heading:"Barlow Condensed",Impact,sans-serif; --body:"DM Sans",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--body); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button,input,textarea { font:inherit; }
::selection { background:var(--orange); color:#171615; }
:focus-visible { outline:2px solid var(--orange-light); outline-offset:4px; }
.skip-link { position:absolute; top:-60px; left:12px; z-index:30; padding:12px 16px; background:var(--orange); color:#171615; }
.skip-link:focus { top:12px; }
.wrap { width:min(100% - 64px,1090px); margin-inline:auto; }
.section { padding-block:100px; }
.overline { margin:0 0 16px; color:var(--orange-light); font-size:12px; font-weight:700; letter-spacing:.29em; text-transform:uppercase; }
.ruled { display:flex; align-items:center; justify-content:center; gap:16px; }
.ruled::before,.ruled::after { content:""; width:46px; height:1px; background:currentColor; opacity:.6; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--heading); font-weight:600; text-transform:uppercase; }
h2 { font-size:clamp(42px,5vw,68px); line-height:1; letter-spacing:.01em; }
h1 span,h2 span { color:var(--orange); }
.site-header { position:relative; z-index:10; background:#1b1918; border-bottom:1px solid #302d2b; }
.header-inner { height:80px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:inline-flex; align-items:center; }
.brand img { display:block; width:120px; height:auto; filter:brightness(1.35); }
.main-nav { display:flex; align-items:center; gap:36px; }
.main-nav a { color:#aaa39d; font-size:13px; font-weight:600; letter-spacing:.15em; text-decoration:none; text-transform:uppercase; transition:color .2s; }
.main-nav a:hover,.main-nav .active { color:var(--orange-light); }
.home-hero { position:relative; min-height:min(760px,calc(100svh - 80px)); display:grid; place-items:center; overflow:hidden; background:#332e30; }
.hero-photo,.hero-shade { position:absolute; inset:0; }
.hero-photo { background:url("/assets/hairflash-original-portrait.jpg") center top / cover no-repeat; filter:sepia(.18) saturate(1.45) contrast(1.1); }
.hero-shade { background:linear-gradient(180deg,rgba(17,15,16,.28),rgba(17,15,16,.38) 44%,rgba(17,15,16,.8)); }
.hero-center { position:relative; z-index:1; padding-block:90px 110px; text-align:center; }
.home-hero h1 { margin:8px 0 -3px; font-size:clamp(76px,11vw,140px); font-weight:700; letter-spacing:.015em; line-height:.91; }
.hero-studio { margin:8px 0 38px; font-family:var(--heading); font-size:27px; font-weight:600; letter-spacing:.27em; text-transform:uppercase; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }
.button { min-width:156px; min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:13px 28px; font-size:13px; font-weight:700; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; transition:background .2s, border-color .2s, transform .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--orange); color:#fff; border:1px solid var(--orange); }
.button-primary:hover { background:#eb995e; border-color:#eb995e; }
.button-ghost { background:rgba(22,20,19,.24); border:1px solid rgba(255,255,255,.55); color:#fff; }
.button-ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.scroll-cue { position:absolute; z-index:1; left:50%; bottom:23px; width:21px; height:34px; border:1px solid rgba(255,255,255,.6); border-radius:20px; transform:translateX(-50%); }
.scroll-cue span { display:block; width:3px; height:7px; margin:8px auto; border-radius:3px; background:var(--orange); }
.welcome-section { background:#1b1918; }
.welcome-grid { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:90px; }
.welcome-grid h2 { margin:0; }
.welcome-copy p { max-width:500px; color:var(--muted); line-height:1.9; }
.text-arrow { display:inline-flex; gap:22px; padding-bottom:7px; border-bottom:1px solid var(--orange); color:var(--orange-light); font-size:13px; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.text-arrow:hover { color:#fff; }
.details-section { background:var(--surface); }
.details-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.detail-panel { min-height:430px; padding:42px; border:1px solid var(--line); background:#242120; }
.detail-panel h2 { margin-bottom:7px; }
.small-note { color:var(--muted); font-size:13px; }
.hours-list { margin:26px 0 0; }
.hours-list div { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; }
.hours-list dd { margin:0; color:var(--text); text-align:right; }
.visit-address { margin:34px 0 25px; color:var(--muted); line-height:1.8; }
.contact-line { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.contact-line:hover { color:var(--orange-light); }
.detail-panel .text-arrow { margin-top:32px; }
.closing-cta { text-align:center; background:linear-gradient(135deg,#221c1a,#151413); }
.closing-cta h2 { max-width:800px; margin:0 auto 16px; }
.closing-cta p:not(.overline) { color:var(--muted); line-height:1.7; }
.closing-cta .button { margin-top:20px; }
.page-banner { position:relative; min-height:305px; display:grid; place-items:center; overflow:hidden; text-align:center; background:#30282a; }
.page-banner::before,.page-banner::after { content:""; position:absolute; inset:0; }
.page-banner::before { background:url("/assets/hairflash-original-portrait.jpg") center 11% / cover no-repeat; filter:saturate(1.25) contrast(1.07); opacity:.55; }
.page-banner::after { background:linear-gradient(180deg,rgba(20,18,18,.36),rgba(20,18,18,.45) 45%,#171615); }
.page-banner.plain { background:linear-gradient(145deg,#211e1d,#151413); }
.page-banner.plain::before { display:none; }
.page-banner-inner { position:relative; z-index:1; padding-block:52px; }
.page-banner h1 { margin:0; font-size:clamp(60px,7vw,90px); line-height:.95; letter-spacing:.02em; }
.story-section { max-width:900px; text-align:center; }
.story-section p { color:var(--muted); font-size:17px; line-height:1.9; }
.highlights { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; }
.highlight { padding:25px 18px; border-top:2px solid var(--orange); background:var(--surface); }
.highlight h3 { margin:0 0 5px; color:var(--orange-light); font-size:29px; }
.highlight p { margin:0; font-size:12px; line-height:1.5; }
.pricing-main { max-width:860px; }
.pricing-group { margin-bottom:65px; }
.pricing-group > h2 { margin:0 0 34px; color:var(--orange); text-align:center; }
.price-item { padding:20px 0; border-bottom:1px solid var(--line); }
.price-item h3 { margin:0 0 10px; font-size:25px; text-transform:none; }
.price-row { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:4px 0; color:var(--muted); font-size:14px; }
.price-row::before { content:""; order:1; flex:1; border-bottom:1px dotted #393533; }
.price-row span:last-child { order:2; color:var(--orange-light); font-weight:700; white-space:nowrap; }
.pricing-note { margin:25px 0; color:var(--muted); line-height:1.8; text-align:center; }
.center-action { text-align:center; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:85px; }
.contact-grid h2 { margin-bottom:24px; }
.contact-grid > div > p { color:var(--muted); line-height:1.8; }
.contact-method { display:flex; gap:18px; align-items:center; margin:25px 0; text-decoration:none; }
.contact-icon { width:45px; height:45px; display:grid; place-items:center; flex:none; background:var(--surface-2); color:var(--orange-light); font-size:20px; }
.contact-method strong,.contact-method small { display:block; }
.contact-method small { color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.contact-method strong { font-size:15px; font-weight:600; }
.contact-method:hover strong { color:var(--orange-light); }
.contact-form { padding:32px; border:1px solid var(--line); background:var(--surface); }
.contact-form label { display:block; margin-bottom:20px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.contact-form input,.contact-form textarea { display:block; width:100%; margin-top:9px; padding:12px; border:1px solid var(--line); border-radius:4px; background:#292625; color:var(--text); outline:none; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--orange); }
.contact-form textarea { min-height:125px; resize:vertical; }
.contact-form .button { cursor:pointer; }
.contact-form .button:disabled { cursor:wait; opacity:.7; }
.spam-trap { position:absolute !important; left:-10000px; width:1px !important; height:1px; opacity:0; }
.form-status { margin:15px 0 0; font-size:13px; line-height:1.6; }
.form-status:empty { display:none; }
.form-status.success { color:#b7dfb0; }
.form-status.error { color:#f1a896; }
.form-note { margin:15px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.site-footer { padding-top:65px; background:#121110; border-top:1px solid #292625; }
.footer-grid { display:grid; grid-template-columns:2fr 1.5fr 1fr; gap:70px; padding-bottom:60px; }
.footer-grid .brand img { width:135px; }
.footer-grid h2 { margin:4px 0 17px; color:var(--orange-light); font-size:24px; }
.footer-grid p,.footer-grid a:not(.brand) { display:block; color:var(--muted); font-size:13px; line-height:1.8; text-decoration:none; }
.footer-grid a:hover { color:var(--orange-light); }
.footer-bottom { padding:20px 0; border-top:1px solid #2b2826; color:#8e8782; font-size:11px; }
@media (max-width:750px) { .wrap { width:min(100% - 36px,1090px); } .section { padding-block:72px; } .header-inner { height:auto; min-height:78px; flex-wrap:wrap; gap:0; padding-block:12px; } .brand img { width:105px; } .main-nav { width:100%; justify-content:space-between; gap:12px; padding:14px 0 3px; } .main-nav a { font-size:11px; } .home-hero { min-height:620px; } .hero-photo { background-position:center top; } .home-hero h1 { font-size:clamp(72px,18vw,110px); } .hero-studio { font-size:22px; } .welcome-grid,.details-grid,.contact-grid { grid-template-columns:1fr; gap:35px; } .welcome-grid h2 { margin-bottom:5px; } .detail-panel { min-height:0; padding:30px; } .highlights { grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:1fr 1fr; gap:35px; } .footer-grid > div:first-child { grid-column:1 / -1; } }
@media (max-width:440px) { .home-hero h1 { font-size:72px; } .hero-actions { gap:10px; } .button { min-width:135px; padding-inline:17px; font-size:11px; } .overline { font-size:10px; } .ruled { gap:10px; } .ruled::before,.ruled::after { width:25px; } .page-banner { min-height:245px; } .page-banner h1 { font-size:60px; } .highlights { gap:10px; } .highlight { padding:18px 12px; } .contact-form { padding:22px; } .footer-grid { grid-template-columns:1fr; } .footer-grid > div:first-child { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; } }