:root{--bg:#0d0d0d;--bg2:#131313;--ink:#fff;--mute:#b4aea5;--gold:#c9a24a;--line:#2b2418;--err:#e07a7a;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.7 Raleway,system-ui,sans-serif}
h1,h2,h3{font-family:Italiana,Georgia,serif;font-weight:400;line-height:1.1;margin:0 0 .5em}
h2{font-size:clamp(2.1rem,5.5vw,3.2rem)}h3{font-size:1.5rem}
a{color:var(--gold)}section{padding:72px 22px;max-width:980px;margin:0 auto}
.hero{text-align:center;padding-top:56px;padding-bottom:40px}
.hero img{width:min(210px,52vw);height:auto;display:block;margin:0 auto 6px}
.hero p{max-width:520px;margin:18px auto 30px;color:var(--mute);font-size:1.05rem}
.btn{display:inline-block;background:var(--gold);color:#0d0d0d;border:0;padding:15px 32px;font:600 .8rem Raleway,sans-serif;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.1)}.btn.ghost{background:none;color:var(--gold);border:1px solid var(--gold);margin-left:10px}
.frame{border:1px solid var(--gold);outline:1px solid var(--line);outline-offset:6px;padding:48px 30px}
.note{text-align:center;max-width:640px;margin:0 auto}.note p{color:#e8e3da;font-size:1.05rem}.sign{font-family:Italiana,serif;font-size:1.6rem;color:var(--gold);margin-top:22px}
.divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 26px;max-width:200px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--gold)}.divider i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;align-items:start}
.two>div>p{color:var(--mute)}
.win{border:1px solid var(--gold);padding:14px 16px;margin-top:20px;color:var(--ink);font-size:.95rem}
form{background:var(--bg2);border:1px solid var(--line);padding:30px}
label,legend{display:block;font-size:.78rem;letter-spacing:.1em;color:var(--mute);margin:16px 0 6px;padding:0}
input[type=text],input[type=email],input[type=number],select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:13px;font:inherit}
input:focus,select:focus{outline:1px solid var(--gold)}
fieldset{border:0;padding:0;margin:0}.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{position:relative;margin:0}.opt input{position:absolute;opacity:0}
.opt span{display:block;border:1px solid var(--line);padding:12px;font-size:.85rem;letter-spacing:0;color:var(--ink);cursor:pointer;text-align:center;background:var(--bg)}
.opt input:checked+span{border-color:var(--gold);background:#1b160b;color:var(--gold)}
.opt input:focus-visible+span{outline:1px solid var(--gold)}
.chk{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:.9rem;color:var(--ink);letter-spacing:0}.chk input{margin-top:5px}
form .btn{width:100%;margin-top:22px}.msg{margin-top:14px;font-size:.9rem;min-height:1.4em}.ok{color:var(--gold)}.bad{color:var(--err)}
.req{list-style:none;padding:0;margin:20px 0 0}.req li{padding:11px 0;border-bottom:1px solid var(--line)}.req li:before{content:"✦  ";color:var(--gold)}
.ph{background:var(--bg2);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--mute);font-size:.85rem;text-align:center}
.ph b{font-size:1.8rem;color:var(--gold);font-weight:400}
.video{aspect-ratio:16/9;margin-bottom:14px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid .ph{aspect-ratio:4/5}
footer{text-align:center;padding:44px 22px 60px;border-top:1px solid var(--line);color:var(--mute);font-size:.85rem}
.hp{position:absolute;left:-9999px}
@media(max-width:640px){.btn.ghost{margin:12px 0 0}.grid{grid-template-columns:1fr 1fr}.frame{padding:36px 20px}}


/* Hair Noir launch form refinement */
form {
  border-radius: 8px;
  padding: clamp(22px, 4vw, 34px);
}

.opts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.opt span {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  border-radius: 5px;
  font-size: .95rem;
  line-height: 1.5;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}

.opt:hover span {
  border-color: #8f7540;
  background: #17140f;
}

.opt input:checked + span {
  border-color: var(--gold);
  background: #1b160b;
  color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.opt input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

fieldset legend {
  color: #e8e3da;
  font-size: .95rem;
  letter-spacing: .06em;
  line-height: 1.5;
  margin: 22px 0 14px;
}

input[type=email] {
  border-radius: 5px;
  padding: 15px 14px;
  transition: border-color .22s ease, background .22s ease;
}

input[type=email]:focus {
  border-color: var(--gold);
  outline: none;
}

.chk {
  line-height: 1.55;
}

form .btn {
  border-radius: 5px;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}

@media (max-width: 520px) {
  .opts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .opt span {
    min-height: 70px;
  }
}