/* NightLase — shared styles (used by index.html and consultation.html) */
:root{
--floral: #F8F2E7;
--floral-deep: #F1E8D6;
--olive-leaf: #475335;
--olive-leaf-2: #3C4A2C;
--olive-wood: #7A5E4A;
--atomic: #E8956F;
--ink: #2F3826;
--line: rgba(71, 83, 53, 0.14);
--shadow: 0 24px 50px -28px rgba(47, 56, 38, 0.45);
--maxw: 1680px;
}
*{box-sizing:border-box; margin:0; padding:0}
/* the [hidden] attribute must win over flex/inline-flex display rules */
[hidden]{ display:none !important }
html{scroll-behavior:smooth; scroll-padding-top:92px}
body{
background: var(--floral);
color: var(--ink);
font-family:'Reddit Sans', system-ui, sans-serif;
-webkit-font-smoothing:antialiased;
line-height:1.5;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
/* visually-hidden helper for accessible labels/landmarks */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--olive-leaf); outline-offset:2px; border-radius:6px}
.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 40px }
/* ---------- shared type ---------- */
.eyebrow{
font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
color: var(--olive-wood);
display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{
content:""; width:28px; height:2px; background:var(--atomic); border-radius:2px;
}
h1,h2,h3{ color: var(--olive-leaf); font-weight:700; letter-spacing:-.02em; line-height:1.05 }
.lead{ color: var(--olive-wood); font-size:19px; line-height:1.6 }
/* ---------- buttons ---------- */
.btn{
display:inline-flex; align-items:center; gap:10px;
font-weight:600; font-size:15px; letter-spacing:.01em;
padding:15px 26px; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn-primary{ background:var(--olive-leaf); color:var(--floral) }
.btn-primary:hover{ background:var(--olive-leaf-2) }
.btn-ghost{ background:transparent; color:var(--olive-leaf); border-color:var(--line) }
.btn-ghost:hover{ border-color:var(--olive-leaf) }
.btn-accent{ background:var(--atomic); color:#3a2417 }
.btn-accent:hover{ filter:brightness(1.03) }
.btn .arr{ width:16px; height:16px }
/* ---------- nav ---------- */
header.nav{
position:sticky; top:0; z-index:50;
background: rgba(248,242,231,.85);
backdrop-filter: blur(12px);
border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:78px }
.brand{ display:flex; align-items:center; gap:13px; min-width:0 }
.brand-primary{ height:30px; width:auto; flex:0 0 auto }
.partner-brand{ display:inline-flex; align-items:center; gap:12px; min-width:0 }
.brand-divider{ color:var(--olive-wood); font-size:22px; font-weight:400; opacity:.65 }
.partner-logo-window{ position:relative; display:block; width:142px; height:46px; overflow:hidden; flex:0 0 auto }
.partner-logo-window img{ position:absolute; width:142px; max-width:none; height:auto; left:0; top:-31px }
.nav-links{ display:flex; align-items:center; gap:36px }
.nav-links a{ font-size:15px; font-weight:500; color:var(--olive-leaf); opacity:.85 }
.nav-links a:hover{ opacity:1 }
.nav-cta{ display:flex; align-items:center; gap:18px }
/* hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px;
width:42px; height:42px; padding:0 9px; border:1px solid var(--line); border-radius:11px;
background:rgba(255,255,255,.5); cursor:pointer }
.nav-toggle-bar{ display:block; height:2px; width:100%; background:var(--olive-leaf); border-radius:2px;
transition:transform .25s ease, opacity .2s ease }
header.nav.menu-open .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg) }
header.nav.menu-open .nav-toggle-bar:nth-child(2){ opacity:0 }
header.nav.menu-open .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
@media (max-width: 860px){
.nav-toggle{ display:flex }
/* nav links collapse into a full-width dropdown under the sticky bar */
.nav-links{
position:absolute; top:100%; left:0; right:0;
flex-direction:column; align-items:stretch; gap:0;
background:#f8f2e7; border-bottom:1px solid var(--line);
box-shadow:0 18px 30px rgba(0,0,0,.12);
padding:4px 0 8px;
max-height:0; overflow:hidden; opacity:0; pointer-events:none;
transition:max-height .28s ease, opacity .2s ease;
}
header.nav.menu-open .nav-links{ max-height:80vh; opacity:1; pointer-events:auto }
.nav-links a{ padding:15px 24px; font-size:16px; opacity:1; border-top:1px solid rgba(0,0,0,.06) }
.nav-links a:first-child{ border-top:0 }
.partner-logo-window{ width:106px; height:38px }
.partner-logo-window img{ width:106px; top:-23px }
.brand-divider{ font-size:18px }
}
/* ---------- hero: rounded image card (left) + quiz (right) ----------
Matches LaserAway: a WIDE section that fills most of the screen. Two EQUAL
columns, both stretched to ~the full viewport height (minus the nav), so the
hero image and quiz dominate the first screen like theirs. --hero-h drives
the shared height of both boxes. */
.hero{ padding: 26px 0 56px }
.hero .wrap{ max-width: 1680px }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:stretch;
/* leave room below for the trust strip to show within the first screen */
--hero-h: clamp(520px, calc(100vh - 230px), 1120px) }
/* left: rounded image card with overlaid copy + Claim offer button */
.hero-card{ position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow);
min-height:var(--hero-h); display:flex; align-items:flex-start; background:var(--floral-deep) }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.hero-scrim{ position:absolute; inset:0;
background:linear-gradient(180deg, rgba(34,40,26,.82) 0%, rgba(34,40,26,.4) 45%, rgba(34,40,26,.06) 100%) }
.hero-overlay{ position:relative; padding:36px 36px 40px; width:100% }
.hero-overlay .eyebrow-light{ color:rgba(248,242,231,.9) }
.hero-overlay .eyebrow-light::before{ background:var(--atomic) }
.hero-overlay h1{ color:var(--floral); font-size:clamp(40px,5vw,68px); line-height:1.02; margin:16px 0 16px;
max-width:14ch; text-shadow:0 2px 18px rgba(20,24,14,.4) }
.hero-overlay .lead{ color:rgba(248,242,231,.92); max-width:40ch; font-size:17.5px }
.hero-cta{ margin-top:28px; min-height:64px; padding:0 44px; font-size:18.5px; font-weight:600; border-radius:99px;
box-shadow:0 16px 34px -16px rgba(232,149,111,.7) }
.hero-cta .arr{ width:22px; height:22px }
/* right quiz: fill the column height, rounded to match the card */
.hero-grid .quiz{ align-self:stretch; min-height:var(--hero-h) }
/* ---------- lead-form takeover (full-screen native