:root { --black:#11110f; --ink:#24221f; --cream:#eee7da; --paper:#f8f4eb; --gold:#b68b52; --gold-light:#d4b786; --green:#173a2c; --muted:#736e66; --line:rgba(36,34,31,.18); --serif:"Playfair Display",serif; --sans:"Manrope",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--sans); }
body::selection { background:var(--gold); color:white; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
img { display:block; width:100%; }
.vivid-header { height:78px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:0 clamp(1.2rem,4vw,4.5rem); position:absolute; inset:0 0 auto; z-index:20; color:var(--black); border-bottom:1px solid rgba(17,17,15,.2); }.vivid-logo { display:flex; flex-direction:column; line-height:1; }.vivid-logo strong { font:600 1.55rem var(--serif); letter-spacing:.18em; }.vivid-logo span { margin-top:.42rem; color:#625a50; font-size:.47rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; }.vivid-header nav { display:flex; justify-content:center; gap:2.2rem; }.vivid-header nav a { font-size:.61rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }.vivid-header nav a:hover { color:var(--gold); }.vivid-header-cta,.vivid-button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:1.4rem; padding:.8rem 1.1rem; border:1px solid currentColor; font-size:.59rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:background .25s,color .25s,transform .25s; }.vivid-header-cta:hover,.vivid-button:hover { transform:translateY(-2px); }.vivid-menu { display:none; }
.vivid-hero { min-height:900px; display:grid; grid-template-columns:58% 42%; background:var(--cream); }.hero-image { min-height:900px; position:relative; overflow:hidden; }.hero-image img { height:100%; object-fit:cover; object-position:center; animation:vividHero 1.3s ease both; }@keyframes vividHero { from{opacity:.6;transform:scale(1.05)}to{opacity:1;transform:scale(1)} }.hero-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(16,15,13,.46),transparent 42%); }.hero-image > span { position:absolute; left:2rem; bottom:2rem; z-index:2; color:white; font-size:.5rem; letter-spacing:.13em; text-transform:uppercase; }.hero-copy { align-self:center; padding:130px clamp(2rem,5vw,5.5rem) 60px; }.hero-brand { display:flex; align-items:baseline; gap:1rem; margin-bottom:5rem; }.hero-brand strong { font:600 1.7rem var(--serif); letter-spacing:.18em; }.hero-brand small { color:#71695e; font-size:.47rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }.hero-copy > p { color:#7a6a58; font-size:.56rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }.hero-copy > p i { margin:0 .5rem; color:var(--gold); font-style:normal; }.hero-copy h1 { margin:1.7rem 0; font:500 clamp(4.7rem,7vw,7.8rem)/.8 var(--serif); letter-spacing:-.055em; }.hero-copy h1 em { color:var(--gold); }.hero-copy > span { max-width:490px; display:block; color:#625e57; line-height:1.75; }.hero-copy > div:last-child { display:flex; align-items:center; gap:1.8rem; margin-top:2rem; }.vivid-button-dark { color:white; background:var(--black); border-color:var(--black); }.vivid-button-dark:hover { background:var(--green); border-color:var(--green); }.vivid-text-link { padding-bottom:.35rem; border-bottom:1px solid #837e75; font-size:.59rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.vivid-welcome { min-height:760px; display:grid; grid-template-columns:.42fr .58fr; background:var(--black); color:white; }.welcome-copy { align-self:center; padding:clamp(3rem,7vw,7rem); }.welcome-copy > span,.vivid-heading > span,.looks-top>div>span,.vivid-detail>div>span,.making-copy>span,.team-copy>span,.vivid-lifestyle>div>span,.booking-intro>span { color:var(--gold-light); font-size:.55rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.welcome-copy h2,.vivid-heading h2,.looks-top h2,.vivid-detail h2,.making-copy h2,.team-copy h2,.vivid-lifestyle h2,.booking-intro h2 { margin:1.2rem 0; font:500 clamp(4rem,7vw,7.5rem)/.8 var(--serif); letter-spacing:-.05em; }.welcome-copy h2 em,.vivid-heading h2 em,.looks-top h2 em,.vivid-detail h2 em,.making-copy h2 em,.team-copy h2 em,.vivid-lifestyle h2 em,.booking-intro h2 em { color:var(--gold-light); }.welcome-copy p { color:#c1bbb1; line-height:1.8; }.welcome-copy small { color:#7d776e; font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; }.vivid-welcome > img { height:100%; object-fit:cover; }
.vivid-mood { min-height:720px; position:relative; overflow:hidden; background:var(--green); }.vivid-mood img { height:100%; object-fit:cover; object-position:center; }.vivid-mood::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }.vivid-mood > span { position:absolute; right:4vw; bottom:4vw; color:rgba(255,255,255,.08); font:500 clamp(5rem,12vw,13rem)/.7 var(--serif); text-align:right; }
.vivid-services,.vivid-looks { padding:clamp(6rem,10vw,10rem) clamp(1.2rem,5vw,5rem); }.vivid-heading { display:grid; grid-template-columns:.25fr 1fr .55fr; gap:3rem; align-items:end; margin-bottom:5rem; }.vivid-heading > span { color:#8e6a3f; }.vivid-heading p { margin:0; color:var(--muted); line-height:1.8; }.service-scroll { display:grid; grid-template-columns:repeat(7,minmax(240px,1fr)); gap:1px; overflow-x:auto; background:var(--line); border:1px solid var(--line); scroll-snap-type:x mandatory; }.service-scroll article { min-height:390px; display:flex; flex-direction:column; padding:1.7rem; background:var(--paper); scroll-snap-align:start; }.service-scroll article:hover { color:white; background:var(--green); }.service-scroll article>span { color:var(--gold); font:500 1.5rem var(--serif); }.service-scroll h3 { margin:5rem 0 1rem; font:500 2rem/.95 var(--serif); }.service-scroll p { color:var(--muted); font-size:.72rem; line-height:1.65; }.service-scroll article:hover p { color:#cbd7d0; }.service-scroll a { margin-top:auto; color:#8e6a3f; font-size:.54rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.service-scroll article:hover a { color:var(--gold-light); }
.vivid-looks { color:white; background:var(--green); }.looks-top { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:4rem; }.look-filters { display:flex; flex-wrap:wrap; gap:.5rem; }.look-filters button { padding:.6rem .8rem; border:1px solid rgba(255,255,255,.22); background:transparent; color:#bac9c0; cursor:pointer; font-size:.5rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.look-filters button.active { border-color:var(--gold-light); color:var(--gold-light); }.looks-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; align-items:start; }.looks-grid figure { margin:0; transition:opacity .25s,transform .25s; }.looks-grid figure.hidden { display:none; }.looks-grid img { height:100%; object-fit:cover; }.looks-grid figcaption { margin-top:.65rem; color:#a9b7ae; font-size:.48rem; letter-spacing:.1em; text-transform:uppercase; }.look-dark { grid-column:1/5; }.look-dark img { aspect-ratio:3/4; }.look-blonde { grid-column:5/9; margin-top:6rem!important; }.look-blonde img { aspect-ratio:3/4; }.look-copper { grid-column:9/13; }.look-copper img { aspect-ratio:3/4; }.look-curls { grid-column:2/6; margin-top:4rem!important; }.look-curls img { aspect-ratio:3/4; }.look-stylist { grid-column:6/12; margin-top:9rem!important; }.look-stylist img { aspect-ratio:16/11; }
.vivid-detail { min-height:760px; display:grid; grid-template-columns:1.05fr .95fr; background:#d9c8b1; }.vivid-detail>img { height:100%; object-fit:cover; }.vivid-detail>div { align-self:center; padding:clamp(3rem,7vw,7rem); }.vivid-detail>div>span { color:#755533; }.vivid-detail p { color:#5e554b; line-height:1.8; }.vivid-detail a { display:inline-block; margin-top:1.5rem; color:#654820; font-size:.56rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.vivid-making { min-height:760px; display:grid; grid-template-columns:.45fr .55fr; color:white; background:var(--black); }.making-copy { align-self:center; padding:clamp(3rem,7vw,7rem); }.making-copy p { color:#c1bbb2; line-height:1.8; }.making-copy>div { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }.making-copy>div span { padding:.6rem .8rem; border:1px solid rgba(255,255,255,.18); color:#b9b2a8; font-size:.5rem; letter-spacing:.09em; text-transform:uppercase; }.vivid-making>img { height:100%; object-fit:cover; }
.vivid-team { min-height:820px; display:grid; grid-template-columns:1fr 1fr; background:var(--cream); }.team-image { position:relative; overflow:hidden; }.team-image img { height:100%; object-fit:cover; }.team-image span { position:absolute; left:1.5rem; bottom:1.5rem; padding:.6rem .8rem; background:rgba(17,17,15,.75); color:white; font-size:.48rem; letter-spacing:.1em; text-transform:uppercase; }.team-copy { align-self:center; padding:clamp(3rem,6vw,6rem); }.team-copy>span { color:#876239; }.team-copy>p { color:var(--muted); line-height:1.75; }.profile-demo { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:2.5rem; background:var(--line); border:1px solid var(--line); }.profile-demo article { padding:1.3rem; background:var(--paper); }.profile-demo article>span,.profile-demo small { color:#827b71; font-size:.48rem; letter-spacing:.08em; text-transform:uppercase; }.profile-demo strong { display:block; margin:2rem 0 .5rem; font:500 1.35rem var(--serif); }.profile-demo small { display:block; min-height:34px; }.profile-demo article>div { display:flex; gap:.8rem; margin-top:1.3rem; }.profile-demo a { color:#7b592e; font-size:.48rem; font-weight:700; text-transform:uppercase; }
.vivid-lifestyle { min-height:700px; display:grid; grid-template-columns:.55fr .45fr; color:white; background:var(--green); }.vivid-lifestyle>div { align-self:center; padding:clamp(3rem,7vw,7rem); }.vivid-lifestyle p { color:#c4d0c8; line-height:1.8; }.vivid-lifestyle>img { height:100%; object-fit:cover; }
.vivid-booking { display:grid; grid-template-columns:.65fr 1.35fr; gap:7vw; padding:clamp(6rem,10vw,10rem) clamp(1.2rem,5vw,5rem); background:#e5d8c5; }.booking-intro>span { color:#76552d; }.booking-intro p { color:#675f54; line-height:1.8; }.booking-demo { padding:clamp(1.5rem,3vw,2.7rem); border:1px solid rgba(36,34,31,.24); background:rgba(255,255,255,.4); }.booking-progress>span { color:#756c61; font-size:.5rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.booking-progress>div { height:2px; margin-top:.8rem; background:rgba(36,34,31,.14); }.booking-progress i { display:block; width:20%; height:100%; background:var(--gold); transition:width .3s; }.booking-demo section { padding:3rem 0 2rem; }.booking-demo section>span { color:#8b663b; font-size:.52rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.booking-demo h3 { margin:.8rem 0 2rem; font:500 clamp(2.5rem,4vw,4.4rem)/.9 var(--serif); }.booking-options { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }.booking-options button { min-height:72px; padding:1rem; border:0; background:var(--paper); color:var(--ink); cursor:pointer; font-size:.63rem; font-weight:600; text-align:left; }.booking-options button.active { color:white; background:var(--green); }.booking-fields { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }.booking-field { display:flex; flex-direction:column; gap:.6rem; }.booking-field span { color:#776f65; font-size:.5rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.booking-field input { width:100%; border:0; border-bottom:1px solid rgba(36,34,31,.3); padding:.8rem 0; background:transparent; outline:none; }.booking-notice { color:#756d62; font-size:.62rem; }.booking-controls { display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding-top:1.3rem; }.booking-controls>button:first-child { border:0; background:none; color:#6f685f; cursor:pointer; font-size:.56rem; text-transform:uppercase; }.booking-controls>button:first-child:disabled { opacity:.35; }.vivid-button-gold { color:white; background:var(--gold); border-color:var(--gold); }.vivid-button-gold:hover { background:var(--green); border-color:var(--green); }.booking-notice.success { padding:.8rem; border-left:2px solid var(--gold); background:rgba(182,139,82,.12); }
.vivid-sales { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:3rem clamp(1.2rem,5vw,5rem); color:white; background:var(--black); }.vivid-sales p { margin:0; font:500 clamp(1.6rem,2.8vw,3rem) var(--serif); }.vivid-sales a { padding:.9rem 1.1rem; border:1px solid var(--gold); color:var(--gold-light); font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.vivid-footer { min-height:190px; display:grid; grid-template-columns:1fr auto auto; gap:3rem; align-items:center; padding:3rem clamp(1.2rem,4vw,4.5rem); color:white; background:var(--green); }.vivid-footer .vivid-logo span { color:#b5c1b9; }.vivid-footer p,.vivid-footer>span { color:#8d9d92; font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; }.vivid-mobile-cta { display:none; }
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .75s,transform .75s cubic-bezier(.2,.7,.2,1)}[data-reveal].visible{opacity:1;transform:none}
@media(max-width:900px){.vivid-header{grid-template-columns:1fr auto}.vivid-header nav{display:none;position:absolute;top:78px;left:0;right:0;padding:2rem;background:var(--paper);flex-direction:column}.vivid-header nav.open{display:flex}.vivid-menu{display:block;justify-self:end;border:1px solid var(--line);background:rgba(255,255,255,.2)}.vivid-header-cta{display:none}.vivid-hero{grid-template-columns:1fr}.hero-image{min-height:650px}.hero-copy{padding-top:5rem}.vivid-welcome,.vivid-detail,.vivid-making,.vivid-team,.vivid-lifestyle,.vivid-booking{grid-template-columns:1fr}.vivid-heading{grid-template-columns:1fr}.profile-demo{grid-template-columns:1fr 1fr}.vivid-footer{grid-template-columns:1fr auto}.vivid-footer>span{display:none}}
@media(max-width:620px){body{padding-bottom:58px}.vivid-header{height:70px}.vivid-header nav{top:70px}.hero-image{min-height:610px}.hero-image img{object-position:54% center}.hero-copy{padding:4rem 1.2rem 5rem}.hero-brand{margin-bottom:3rem}.hero-copy h1{font-size:4.7rem}.hero-copy>div:last-child{align-items:flex-start;flex-direction:column}.vivid-welcome{display:flex;flex-direction:column}.vivid-welcome>img{min-height:400px}.vivid-mood{min-height:520px}.vivid-services,.vivid-looks{padding:5.5rem 1.2rem}.vivid-heading h2,.looks-top h2,.vivid-detail h2,.making-copy h2,.team-copy h2,.vivid-lifestyle h2,.booking-intro h2,.welcome-copy h2{font-size:4rem}.service-scroll{grid-template-columns:repeat(7,78vw)}.looks-top{align-items:flex-start;flex-direction:column}.looks-grid{display:block}.looks-grid figure{margin:0 0 3rem!important}.looks-grid img{aspect-ratio:3/4!important}.vivid-detail>img,.vivid-making>img,.vivid-lifestyle>img{min-height:500px}.vivid-making .making-copy{order:2}.vivid-making>img{order:1}.team-image{min-height:520px}.profile-demo{grid-template-columns:1fr}.vivid-booking{padding:5.5rem 1.2rem}.booking-options,.booking-fields{grid-template-columns:1fr}.vivid-sales{align-items:flex-start;flex-direction:column}.vivid-footer{grid-template-columns:1fr;gap:1.2rem}.vivid-mobile-cta{height:58px;display:flex;align-items:center;justify-content:center;gap:1rem;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--gold);color:var(--black);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 -8px 24px rgba(0,0,0,.22)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-image img{animation:none}[data-reveal]{opacity:1;transform:none;transition:none}}