:root { --black:#000; --ink:#171717; --paper:#f5f3ef; --gold:#be8c4d; --button:#c4a56d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--paper); color:#000; font-family:Roboto,Arial,sans-serif; }
.rail { width:min(1170px, calc(100% - 110px)); margin:0 auto; }
.site-header { height:143px; background:#000; }
.nav-rail { height:100%; display:flex; align-items:flex-start; justify-content:space-between; padding:15px 20px 0; }
.brand-logo { display:block; width:140px; height:93px; object-fit:contain; }
nav { display:flex; gap:30px; padding-top:20px; font:400 12px/1 Barlow,sans-serif; }
nav a { color:#fff; text-decoration:none; }
.hero { position:relative; isolation:isolate; height:812px; background:#171717 url('assets/hero.jpg') center/cover fixed; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(15,13,12,.78); }
.hero-content { padding:150px 63px 0; color:white; }
.script { margin:0; color:var(--gold); font:400 85px/1.3 Petemoss,cursive; }
.hero-script { margin-bottom:-5px; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { margin:0; font:600 75px/.98 Oswald,sans-serif; letter-spacing:.5px; }
.eyebrow { margin:28px 0 22px; font:600 34px/1 Oswald,sans-serif; }
.hero-actions,.center-actions { display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.gold-button { display:inline-block; width:max-content; max-width:100%; padding:20px 32px; background:var(--button); border:1px solid rgba(255,255,255,.18); color:#fff; text-decoration:none; font:600 32px/1 Oswald,sans-serif; white-space:nowrap; }
.philosophy { height:756px; background:var(--paper); padding:50px 0; }
.center-copy { text-align:center; }
.philosophy-script { font-size:76px; line-height:.72; }
.philosophy h2,.rates h2 { margin:16px 0 35px; font:600 58px/1 Oswald,sans-serif; }
.philosophy-copy { color:var(--ink); font:400 22px/1.45 Montserrat,Roboto,sans-serif; }
.philosophy-copy p { margin:0 auto 25px; max-width:1130px; }
.center-actions { align-items:center; gap:12px; margin-top:18px; }
.center-actions .gold-button { padding:12px 32px; font-size:23px; }
.services { background:var(--paper); }
.service-head { height:344px; padding-top:35px; text-align:center; color:#fff; background:linear-gradient(120deg,#100e0c,#2a2018 55%,#100e0c); }
.service-head .script { font-size:67px; line-height:1; }
.service-head h2 { margin:8px 0 0; font:500 50px/1 Oswald,sans-serif; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:44px 30px; margin-top:-101px; }
.service-card { min-height:390px; border:1px solid rgba(255,255,255,.7); background:var(--paper); overflow:hidden; }
.service-card img { display:block; width:100%; height:232px; object-fit:cover; }
.service-card > div { padding:20px; }
.service-card h3 { margin:0 0 14px; color:#bf9f68; font:600 27px/1 Oswald,sans-serif; }
.service-card p { margin:0; color:var(--ink); font:400 18px/1.45 Montserrat,Roboto,sans-serif; }
.service-cta { padding:45px 0 40px; text-align:center; }
.service-cta .gold-button { padding:13px 30px; font-size:23px; }
.logo-break { height:190px; background:#000 center/cover fixed no-repeat; }
.break-one { background-image:url('assets/break-one.webp'); }
.break-two,.break-three { background-image:url('assets/break-two.webp'); }
.rates { height:913px; padding:87px 0 40px; background:var(--paper); }
.rates h2 { margin:0 0 9px 65px; text-align:left; font-size:56px; font-weight:500; }
.rates-grid { display:grid; grid-template-columns:657px 1fr; gap:0; height:524px; }
.rates-grid > img { width:450px; height:464px; object-fit:cover; justify-self:center; align-self:start; margin-top:25px; }
.price-list { padding:42px 55px 0 15px; font:24px/1.35 Arial,sans-serif; }
.price-list p { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:12px 0; margin:0; border-bottom:1px dashed #00000020; }
.price-list i { height:1px; background:repeating-linear-gradient(to right,#000 0 4px,transparent 4px 10px); }
.price-list b { white-space:nowrap; } .price-gold { color:#b99b61; }
.rates-actions { margin-top:0; }
.meet { height:662px; padding:50px 0 20px; background:var(--paper); }
.meet-grid { display:grid; grid-template-columns:592px 1fr; }
.meet-grid > img { width:562px; height:562px; object-fit:cover; }
.meet-copy { padding:15px 0 0 5px; }
.meet-copy h2 { margin:0 0 62px; color:#000; font:500 50px/1 Oswald,sans-serif; }
.meet-copy p { margin:0 0 28px; color:var(--ink); font:400 22px/1.45 Montserrat,Roboto,sans-serif; }
.contact { height:528px; padding:35px 0 40px; background:var(--paper); }
.contact-grid { display:grid; grid-template-columns:512px 1fr; }
.contact h2 { margin:0 0 31px; color:#000; font:400 25px/32.5px Oswald,sans-serif; }
.contact h3 { margin:0 0 8px; font:500 16px/20.8px Oswald,sans-serif; }
.contact p { margin:0 0 25px; color:var(--ink); font:400 20px/1.45 Montserrat,Roboto,sans-serif; }
.contact img { width:618px; height:337px; object-fit:cover; }
footer { height:181px; display:flex; align-items:center; justify-content:center; gap:24px; background:#000; color:#fff; }
footer img { width:120px; height:80px; object-fit:contain; }
footer p { margin:0; font:400 15px/1 Roboto,sans-serif; }
.solution-hero { position:relative; isolation:isolate; min-height:720px; background:#171717 url('assets/systems.jpg') center/cover fixed; }
.solution-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(15,13,12,.72); }
.solution-hero-content { padding:138px 63px 110px; color:#fff; }
.solution-script { margin-bottom:0; font-size:76px; }
.solution-hero h1 { margin:0; font:600 72px/.98 Oswald,sans-serif; }
.solution-eyebrow { margin:28px 0; font:600 30px/1 Oswald,sans-serif; }
.solution-story { padding:68px 0 76px; background:var(--paper); }
.solution-story-script { font-size:72px; line-height:.78; }
.solution-story h2,.solution-consultation h2 { margin:18px 0 28px; font:600 54px/1 Oswald,sans-serif; }
.solution-story-copy { max-width:1020px; margin:0 auto; font:300 23px/1.4 Roboto,sans-serif; }
.solution-story-copy p { margin:0 0 22px; }
.solution-benefits { padding-bottom:70px; background:var(--paper); }
.solution-benefits-head { padding:45px 0 115px; text-align:center; color:#fff; background:#111 url('assets/services-bg.webp') center/cover fixed; }
.solution-benefits-head .script { font-size:65px; line-height:1; }
.solution-benefits-head h2 { margin:8px 0 0; font:500 48px/1 Oswald,sans-serif; }
.solution-benefit-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:-66px; }
.solution-card { overflow:hidden; border:1px solid rgba(255,255,255,.7); background:var(--paper); }
.solution-card img { display:block; width:100%; height:230px; object-fit:cover; }
.solution-card > div { padding:22px; }
.solution-card h3 { margin:0 0 14px; color:#bf9f68; font:600 27px/1 Oswald,sans-serif; }
.solution-card p { margin:0; font:400 19px/1.4 Barlow,sans-serif; }
.solution-consultation { padding:78px 0; background:#171717 url('assets/break-two.webp') center/cover fixed; color:#fff; text-align:center; }
.solution-consultation-copy { max-width:700px; margin:0 auto 30px; font:300 22px/1.4 Roboto,sans-serif; }
@media (max-width:900px) { .rail { width:min(100% - 40px, 680px); } .site-header { height:86px; } .nav-rail { align-items:center; padding:8px 0; } .brand-logo { width:100px; height:65px; } nav { display:none; } .hero,.solution-hero { height:auto; min-height:700px; background-attachment:scroll; } .hero-content,.solution-hero-content { padding:100px 5px; } .script { font-size:63px; } .hero h1,.solution-hero h1 { font-size:57px; } .eyebrow,.solution-eyebrow { font-size:28px; } .gold-button { padding:16px 25px; font-size:23px; white-space:normal; } .philosophy,.rates,.meet,.contact { height:auto; } .philosophy { padding:60px 0; } .philosophy-script,.solution-story-script { font-size:58px; } .philosophy h2,.rates h2,.solution-story h2,.solution-consultation h2 { font-size:48px; } .philosophy-copy,.meet-copy p,.solution-story-copy,.solution-consultation-copy { font-size:20px; } .service-head,.solution-benefits-head,.solution-consultation { background-attachment:scroll; } .cards,.solution-benefit-cards { grid-template-columns:1fr; margin-top:-90px; } .service-card { min-height:0; } .service-card img { height:auto; aspect-ratio:1.55; } .logo-break { background-attachment:scroll; } .rates { padding:55px 0; } .rates-grid,.meet-grid,.contact-grid { grid-template-columns:1fr; height:auto; gap:30px; } .rates-grid > img,.meet-grid > img,.contact img { width:100%; height:auto; max-height:none; } .price-list { padding:0; font-size:19px; } .rates-actions { margin-top:35px; } .meet { padding:50px 0; } .meet-copy { padding:0; } footer { height:auto; padding:30px 20px; flex-direction:column; text-align:center; } }

.contact { height:auto; min-height:528px; }
.contact a { color:inherit; text-decoration:underline; text-decoration-color:#be8c4d; text-underline-offset:3px; }
.contact-hours { margin:0 0 25px; max-width:340px; color:var(--ink); font:400 17px/1.45 Montserrat,Roboto,sans-serif; }
.contact-hours div { display:flex; justify-content:space-between; gap:15px; padding:3px 0; }
.contact-hours dt { font-weight:500; }
.contact-hours dd { margin:0; text-align:right; }
.contact-map-link { display:block; width:618px; max-width:100%; align-self:start; }
.contact-map-link img { display:block; }
@media (max-width:900px) { .contact-map-link { width:100%; } }
.hero-business-name { max-width:1040px; margin-bottom:16px; font-size:clamp(42px,4vw,54px); line-height:1; }
.hero h1 { text-transform:uppercase; }
.brand-wordmark { width:260px; color:#fff; text-decoration:none; display:flex; flex-direction:column; justify-content:center; }
.brand-wordmark span { color:var(--button); font:400 46px/1 Petemoss,cursive; }
.brand-wordmark small { font:600 10px/1.3 Barlow,sans-serif; letter-spacing:1.5px; white-space:nowrap; }
.footer-wordmark { color:var(--button); font:400 29px/1 Petemoss,cursive; }
@media (max-width:900px) { .hero-business-name { font-size:42px; line-height:1.05; } .hero h1 { font-size:clamp(44px,10vw,57px); } }
@media (max-width:900px) { .brand-wordmark { width:210px; } .brand-wordmark span { font-size:38px; } .brand-wordmark small { font-size:8px; letter-spacing:1px; } .footer-wordmark { font-size:26px; } }
.site-header .nav-rail { align-items:center; padding:14px 20px 6px; }
.site-header nav { padding-top:0; }
.menu-toggle { display:none; }
.site-logo { display:block; flex:none; width:260px; height:117px; overflow:hidden; }
.site-logo img { display:block; width:260px; max-width:none; height:auto; transform:translateY(-18px); }
footer .footer-logo { width:260px; height:117px; }
footer .footer-logo img { width:260px; height:auto; }
@media (max-width:900px) {
  .site-header { height:105px; }
  .site-header .nav-rail { padding:12px 0 6px; }
  .site-logo { width:190px; height:86px; }
  .site-logo img { width:190px; transform:translateY(-13px); }
  footer .footer-logo { width:260px; height:117px; }
  footer .footer-logo img { width:260px; transform:translateY(-18px); }
}
@media (max-width:900px) {
  .site-header { position:relative; z-index:10; }
  .menu-toggle { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #be8c4d; border-radius:3px; background:transparent; color:#fff; font:600 14px/1 Barlow,sans-serif; cursor:pointer; }
  .menu-toggle span { color:#be8c4d; font-size:19px; line-height:1; }
  .site-header #home-page-menu { display:none; position:absolute; top:100%; right:20px; width:min(340px,calc(100% - 40px)); padding:8px 14px 14px; background:#000; box-shadow:0 12px 18px #0005; }
  .site-header #home-page-menu.is-open { display:flex; flex-direction:column; gap:0; }
  .site-header #home-page-menu a { display:block; padding:13px 12px; text-align:left; border-top:1px solid #ffffff26; font-size:15px; }
}

/* The Finest service menu and pricing cards. */
.rates { height:auto; padding:76px 0 86px; }
.rates > .rail { width:min(1480px,calc(100% - 100px)); }
.rates-script { font-size:72px; line-height:1; }
.rates h2 { margin:18px 0 44px; text-align:left; font:600 clamp(52px,5vw,76px)/1 Oswald,sans-serif; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; }
.pricing-card { display:grid; grid-template-columns:122px minmax(0,1fr); gap:24px; min-height:188px; padding:24px; background:#fff; border:1px solid #e2d4c3; }
.pricing-card > img { width:122px; height:122px; object-fit:cover; border-radius:3px; }
.pricing-card-copy { min-width:0; }
.pricing-card-top { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; }
.pricing-card h3 { margin:0; font:600 26px/1.08 Oswald,sans-serif; }
.pricing-card strong { color:var(--gold); font:600 29px/1 Oswald,sans-serif; white-space:nowrap; }
.pricing-card p { margin:10px 0 12px; color:var(--ink); font:400 18px/1.45 Montserrat,Roboto,sans-serif; }
.pricing-card a { color:#9c7140; font:700 16px/1.2 Barlow,sans-serif; text-decoration:none; }
.pricing-card a:hover,.pricing-card a:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.rates-actions { align-items:center; margin-top:38px; }
.rates-actions .gold-button { font-size:23px; }
@media (max-width:980px) { .pricing-grid { grid-template-columns:1fr; } }
@media (max-width:600px) {
  .rates { padding:55px 0 65px; }
  .rates > .rail { width:calc(100% - 40px); }
  .rates-script { font-size:62px; }
  .rates h2 { margin:16px 0 30px; font-size:clamp(43px,11vw,58px); }
  .pricing-grid { gap:14px; }
  .pricing-card { grid-template-columns:82px minmax(0,1fr); gap:14px; min-height:0; padding:15px; }
  .pricing-card > img { width:82px; height:92px; }
  .pricing-card-top { gap:6px; }
  .pricing-card h3 { font-size:20px; }
  .pricing-card strong { font-size:22px; }
  .pricing-card p { margin:8px 0; font-size:18px; }
  .pricing-card a { font-size:14px; }
  .rates-actions .gold-button { font-size:21px; }
}

/* Hair systems feature, adapted from Aster Wilburn's section. */
.hair-feature { padding:80px 0; background:#fff; color:var(--ink); }
.hair-feature > .rail { width:min(1620px,calc(100% - 110px)); }
.hair-feature-grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:48px; align-items:center; }
.hair-feature-gallery { min-width:0; }
.hair-feature-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hair-feature-images img { display:block; width:100%; height:240px; object-fit:cover; }
.hair-feature-images .hair-feature-main { grid-column:1/-1; height:455px; object-position:center; }
.hair-feature-kicker { margin:0 0 14px; color:var(--gold); letter-spacing:.2em; font:700 15px/1.2 Barlow,sans-serif; }
.hair-feature-copy h2 { margin:0; font:500 clamp(42px,4.1vw,68px)/1.03 Oswald,sans-serif; }
.hair-feature-rule { width:50px; height:2px; margin:28px 0 26px; background:var(--gold); }
.hair-feature-copy p:not(.hair-feature-kicker) { max-width:520px; margin:0 0 22px; color:var(--ink); font:400 22px/1.45 Montserrat,Roboto,sans-serif; }
.hair-feature-copy .gold-button { margin-top:10px; padding:17px 26px; font-size:22px; }
@media (max-width:900px) {
  .hair-feature { padding:65px 0; }
  .hair-feature > .rail { width:min(100% - 40px,680px); }
  .hair-feature-grid { grid-template-columns:1fr; gap:34px; }
  .hair-feature-images .hair-feature-main { height:380px; }
  .hair-feature-images img { height:210px; }
  .hair-feature-copy p:not(.hair-feature-kicker) { font-size:20px; }
}
@media (max-width:430px) {
  .hair-feature-images .hair-feature-main { height:270px; }
  .hair-feature-images img { height:150px; }
  .hair-feature-copy h2 { font-size:44px; }
  .hair-feature-copy p:not(.hair-feature-kicker) { font-size:20px; }
}

/* The Finest Hair Magic Youth Camp. */
.youth-camp { padding:86px 0; background:var(--paper); }
.youth-camp-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:68px; align-items:center; }
.youth-camp-copy { max-width:570px; }
.youth-camp-kicker { margin:0 0 18px; color:#5b3270; letter-spacing:.16em; font:700 15px/1.3 Barlow,sans-serif; }
.youth-camp h2 { margin:0; color:var(--ink); font:600 clamp(42px,4vw,64px)/1.04 Oswald,sans-serif; }
.youth-camp-rule { width:52px; height:2px; margin:28px 0; background:var(--gold); }
.youth-camp-copy p:not(.youth-camp-kicker) { margin:0 0 20px; color:var(--ink); font:400 22px/1.45 Montserrat,Roboto,sans-serif; }
.youth-camp-copy .youth-camp-lead { color:var(--ink); }
.youth-camp-logo { display:block; width:100%; max-width:556px; height:auto; justify-self:center; clip-path:circle(47% at 53% 50%); }
@media (max-width:900px) {
  .youth-camp { padding:65px 0; }
  .youth-camp-grid { grid-template-columns:1fr; gap:34px; }
  .youth-camp-logo { max-width:500px; }
  .youth-camp-copy p:not(.youth-camp-kicker) { font-size:20px; }
}
@media (max-width:600px) {
  .youth-camp-grid { gap:20px; }
  .youth-camp-logo { max-width:min(340px,78vw); }
}
@media (max-width:430px) {
  .youth-camp h2 { font-size:43px; }
  .youth-camp-copy p:not(.youth-camp-kicker) { font-size:20px; }
  .youth-camp-copy .youth-camp-lead { font-size:22px; }
}

/* Keep every gold call-to-action at the hero button scale. */
.gold-button { width:430px; max-width:100%; text-align:center; }
.center-actions .gold-button,
.service-cta .gold-button,
.rates-actions .gold-button,
.hair-feature-copy .gold-button { padding:20px 32px; font-size:32px; }
@media (max-width:900px) {
  .gold-button { width:min(350px,calc(100vw - 50px)); max-width:none; }
  .center-actions .gold-button,
  .service-cta .gold-button,
  .rates-actions .gold-button,
  .hair-feature-copy .gold-button { padding:16px 25px; font-size:23px; }
}
@media (max-width:380px) {
  .gold-button,
  .center-actions .gold-button,
  .service-cta .gold-button,
  .rates-actions .gold-button,
  .hair-feature-copy .gold-button { padding:14px 20px; font-size:20px; white-space:nowrap; }
}