/* How To Cut Hair: staging styles. Plain CSS, no external fonts. */
:root{--ink:#16181c;--text:#2c2f36;--muted:#5d636e;--cream:#f7f3ec;--paper:#fff;--line:#e4ded3;--red:#b3262d;--navy:#1f3a5f;--gold:#c9a24a;--max:1120px}
*{box-sizing:border-box}
html{background:#111}
body{margin:0;background:var(--paper);color:var(--text);font:16px/1.7 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
img,svg{max-width:100%}
a{color:var(--navy)}a:hover{color:var(--red)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--ink);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}h3{font-size:1.25rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99}
/* staging bar */
.staging{background:var(--gold);color:#1a1a1a;text-align:center;font-size:.8rem;font-weight:600;padding:6px 10px;letter-spacing:.03em}
/* header */
header{background:var(--ink);color:#fff;position:sticky;top:0;z-index:20;border-bottom:4px solid transparent;border-image:repeating-linear-gradient(135deg,var(--red) 0 12px,#fff 12px 24px,var(--navy) 24px 36px,#fff 36px 48px) 4}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 22px;max-width:var(--max);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand b{font-family:Georgia,serif;font-size:1.25rem;letter-spacing:.06em;font-weight:700}
.brand small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#c9c9c9;font-weight:400}
.pole{width:18px;height:40px;border-radius:9px;border:2px solid #fff;background:repeating-linear-gradient(135deg,var(--red) 0 6px,#fff 6px 12px,var(--navy) 12px 18px,#fff 18px 24px);flex:none}
nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
nav a{color:#e9e9e9;text-decoration:none;font-size:.92rem}
nav a:hover,nav a[aria-current]{color:#fff;text-decoration:underline;text-underline-offset:6px}
nav a.cta{background:var(--red);color:#fff;padding:8px 14px;border-radius:999px;font-weight:600}
nav a.cta:hover{background:#97151c;text-decoration:none}
/* hero */
.hero{background:var(--ink);color:#f3f3f3;padding:72px 0 80px}
.hero .grid2{align-items:center}
.hero h1{color:#fff}
.hero p.lead{font-size:1.15rem;color:#d9d9d9;max-width:560px}
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:10px}
.pagehead{background:var(--cream);padding:56px 0 40px;border-bottom:1px solid var(--line)}
.pagehead p{color:var(--muted);max-width:680px;font-size:1.08rem}
/* buttons */
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:600;padding:13px 24px;border-radius:6px;border:2px solid var(--red);margin:6px 10px 6px 0}
.btn:hover{background:#97151c;border-color:#97151c;color:#fff}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.hero .btn.ghost{color:#fff}
/* layout */
section{padding:64px 0}
.alt{background:var(--cream)}
.dark{background:var(--ink);color:#e6e6e6}.dark h2,.dark h3{color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px}
.card h3{margin-top:0}
.card .more{font-weight:600;text-decoration:none}
.checks{list-style:none;padding:0;margin:0 0 1em}
.checks li{padding-left:30px;position:relative;margin-bottom:8px}
.checks li:before{content:"";position:absolute;left:0;top:.45em;width:16px;height:9px;border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg)}
.muted{color:var(--muted)}.small{font-size:.86rem}
.note{border-left:4px solid var(--navy);background:#f1f4f8;padding:14px 18px;border-radius:0 8px 8px 0;font-size:.95rem;margin:1.2em 0}
.history{border-left:4px solid var(--gold);background:#fbf7ee;padding:14px 18px;border-radius:0 8px 8px 0;margin:1.2em 0}
/* photo placeholders */
.ph{position:relative;display:flex;align-items:flex-end;min-height:260px;border-radius:12px;overflow:hidden;border:2px dashed #9aa3af;background:#e9edf2 repeating-linear-gradient(135deg,rgba(179,38,45,.08) 0 18px,rgba(255,255,255,.0) 18px 36px,rgba(31,58,95,.08) 36px 54px,rgba(255,255,255,0) 54px 72px)}
.ph svg{position:absolute;top:50%;left:50%;width:70px;height:70px;transform:translate(-50%,-62%);opacity:.45}
.ph span{position:relative;display:block;width:100%;background:rgba(22,24,28,.86);color:#fff;font-size:.85rem;padding:10px 14px}
.ph.tall{min-height:380px}.ph.short{min-height:200px}
.dark .ph,.hero .ph{border-color:#5a616b;background-color:#2a2e35}
/* video */
.video{margin:0 0 1.5em}
.frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.frame iframe,.frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain}
/* anti-clip: .frame keeps 16:9 via aspect-ratio; media fills 100% w/h so overflow:hidden only rounds corners. Never use height:50%/50vh or object-fit:cover on decks/video. See /workspace/ops/NO-HALF-CLIP-VIEWERS.md */
.video figcaption{font-size:.9rem;color:var(--muted);margin-top:8px}
.dark .video figcaption{color:#bdbdbd}
/* tables */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--ink);color:#fff;font-weight:600}
.strike{text-decoration:line-through;color:#8a8a8a}
/* blog */
.post-list{display:grid;gap:18px}
.post-list article{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px}
.post-list h2{font-size:1.35rem;margin-bottom:.2em}
.post-list h2 a{color:var(--ink);text-decoration:none}.post-list h2 a:hover{color:var(--red)}
.meta{font-size:.85rem;color:var(--muted);margin-bottom:.8em}
.post{font-size:1.06rem}
.post blockquote{margin:1em 0;padding:0 0 0 18px;border-left:3px solid var(--line)}
.crumbs{font-size:.88rem;margin-bottom:10px}
/* form */
form{display:grid;gap:16px;max-width:640px}
label,legend{font-weight:600;color:var(--ink);font-size:.95rem}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;margin-top:6px;padding:12px;border:1px solid #bfc5cd;border-radius:6px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(31,58,95,.3);border-color:var(--navy)}
fieldset{border:1px solid #bfc5cd;border-radius:6px;padding:12px 16px}
.radio{display:flex;gap:22px;flex-wrap:wrap;font-weight:400}
.radio label{font-weight:400;display:flex;gap:8px;align-items:center}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400}.chk input{margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button.btn{cursor:pointer;font:inherit;font-weight:600;justify-self:start}
.req{color:var(--red)}
/* app */
.app{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.phone{width:120px;height:220px;border:6px solid #fff;border-radius:22px;background:linear-gradient(180deg,#2a2e35,#16181c);position:relative}
.phone:after{content:"Coming soon";position:absolute;left:0;right:0;top:45%;text-align:center;color:var(--gold);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
/* footer */
footer{background:#111;color:#bdbdbd;padding:44px 0 30px;font-size:.9rem}
footer a{color:#fff}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
footer h3{color:#fff;font-size:1rem;font-family:inherit;margin-bottom:.6em}
footer ul{list-style:none;padding:0;margin:0}footer li{margin-bottom:6px}
.fbottom{border-top:1px solid #2b2b2b;margin-top:28px;padding-top:18px;font-size:.82rem}
/* responsive */
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
 .hbar{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 18px}
 nav{gap:8px 16px;width:100%}
 nav a{font-size:.88rem}
 .grid2,.grid3,.fgrid,.app{grid-template-columns:1fr}
 .hero{padding:48px 0 56px}
 section{padding:48px 0}
 .ph.tall{min-height:280px}
 .phone{width:96px;height:176px}
 th,td{padding:10px}
}