:root {
  --espresso: #24140f;
  --walnut: #4a2b20;
  --brown: #694334;
  --camel: #b18a67;
  --sand: #d8bea3;
  --cream: #f5eee4;
  --paper: #fbf8f2;
  --ink: #2a1a15;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Libre Franklin", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.75; }
body::before { content: ""; position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
a { color: inherit; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 12px; background: white; color: black; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.section { padding: 120px max(6vw, 30px); }
.eyebrow { margin-bottom: 14px; font-size: 10px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.eyebrow.brown { color: var(--brown); }
.eyebrow.tan { color: var(--sand); }

/* Header */
.site-header { position: absolute; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 90px; padding: 0 5vw; color: white; border-bottom: 1px solid #ffffff38; }
.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; padding: 4px; overflow: hidden; border: 1px solid var(--camel); border-radius: 50%; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand strong { display: block; font: 500 25px "Italiana", serif; letter-spacing: .06em; }
.brand small { display: block; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.site-header nav { display: flex; align-items: center; gap: 28px; }
.site-header nav a { color: inherit; font-size: 10px; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; transition: color .2s; }
.site-header nav a:hover { color: var(--sand); }
.nav-call { padding: 11px 16px; border: 1px solid #ffffff70; }
.menu-toggle { display: none; background: none; border: 0; }

/* Hero */
.hero { position: relative; display: grid; place-items: center; height: min(920px, 100vh); min-height: 680px; overflow: hidden; color: white; text-align: center; }
.hero-image, .hero-shade { position: absolute; inset: 0; }
.hero-image { background: url("images/nefertitifront.jpg") center 42% / cover no-repeat; transform: scale(1.015); }
.hero-shade { background: linear-gradient(90deg, #1b0d09dc, #2c1810a3 50%, #1a0c09cb), linear-gradient(0deg, #190b08a0, transparent 45%); }
.hero-content { position: relative; z-index: 1; margin-top: 58px; }
.hero h1 { margin: 28px 0 24px; font: 400 clamp(64px, 10vw, 135px) / .67 var(--serif); letter-spacing: -.04em; text-shadow: 0 4px 30px #0005; }
.hero h1 em { font-size: .52em; font-weight: 400; letter-spacing: .04em; }
.rule { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--sand); font-size: 10px; }
.rule::before, .rule::after { content: ""; width: 85px; height: 1px; background: #d8bea377; }
.slogan { margin: 13px 0 0; font: 500 23px var(--serif); letter-spacing: .3em; text-transform: uppercase; }
.for-whom { margin-bottom: 27px; font: italic 17px var(--serif); opacity: .85; }
.button { display: inline-block; padding: 14px 25px; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-decoration: none; text-transform: uppercase; transition: .25s; }
.button-light { color: white; background: #3d251a77; border: 1px solid var(--sand); }
.button:hover { color: var(--espresso); background: var(--sand); }
.scroll-cue { position: absolute; bottom: 22px; z-index: 2; color: white; font-size: 8px; letter-spacing: .25em; text-decoration: none; text-transform: uppercase; }
.scroll-cue span { display: block; font-size: 16px; }

/* Remembrance */
.memorial-notice { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; max-width: 1120px; margin: 42px auto 0; padding: 48px max(4vw, 32px); background: var(--cream); border: 1px solid #b18a6780; border-top: 5px solid var(--brown); box-shadow: 0 12px 30px #24140f24, 0 3px 8px #24140f12; }
.memorial-notice::after { content: ""; position: absolute; right: 28px; bottom: 22px; width: 84px; height: 84px; opacity: .06; background: url("nefertiticolor.png") center / contain no-repeat; }
.memorial-rule { padding-top: 34px; color: var(--camel); font-size: 18px; }
.news-meta { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.news-meta span { padding: 5px 9px; color: var(--cream); background: var(--brown); }
.news-meta time { color: var(--brown); }
.memorial-notice h2 { margin: 8px 0 15px; color: var(--brown); font: 500 clamp(34px, 4vw, 52px) / 1 var(--serif); }
.memorial-notice p:last-child { max-width: 900px; margin: 0; font: 19px / 1.55 var(--serif); }

/* Salon, details, and story */
.intro { padding-top: 46px; }
.salon-showcase { position: relative; max-width: 1200px; height: 610px; margin: 0 auto; }
.salon-photo { position: absolute; margin: 0; overflow: hidden; }
.salon-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.16) saturate(.82); }
.salon-photo-main { top: 0; left: 0; width: 72%; height: 88%; }
.salon-photo-side { right: 0; bottom: 0; width: 37%; height: 58%; border: 10px solid var(--paper); }
.salon-caption { position: absolute; bottom: 24px; left: 45px; min-width: 280px; padding: 22px 32px; color: var(--cream); background: var(--espresso); }
.salon-caption span { display: block; font: italic 24px var(--serif); }
.salon-caption small { color: var(--sand); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
.details-strip { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1200px; margin: 58px auto 0; border-top: 1px solid #b18a6755; border-bottom: 1px solid #b18a6755; }
.details-strip > div { display: flex; gap: 20px; padding: 30px; }
.details-strip > div + div { border-left: 1px solid #b18a6755; }
.detail-icon { color: var(--camel); font: italic 16px var(--serif); }
.details-strip p { margin: 0; font-size: 12px; line-height: 1.8; }
.details-strip strong { font: 600 18px var(--serif); }
.details-strip a { color: var(--brown); font-weight: 600; }
.location-map { max-width: 1200px; margin: 76px auto 0; }
.map-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.map-heading h2 { margin: 0; font: 500 clamp(38px, 5vw, 66px) / .95 var(--serif); letter-spacing: -.035em; }
.map-heading h2 em { color: var(--brown); font-weight: 400; }
.map-heading a { flex: 0 0 auto; margin-bottom: 7px; color: var(--brown); font-size: 9px; font-weight: 500; letter-spacing: .15em; text-underline-offset: 6px; text-transform: uppercase; }
.location-map iframe { display: block; width: 100%; height: 430px; border: 1px solid #b18a6755; filter: sepia(.22) saturate(.75) contrast(.96); }
.section-kicker { display: flex; align-items: center; gap: 20px; margin: 110px 0 72px; color: var(--brown); font: italic 18px var(--serif); text-align: center; }
.section-kicker::before, .section-kicker::after { content: ""; flex: 1; height: 1px; background: #b18a6750; }
.intro-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10vw; max-width: 1200px; margin: 0 auto; }
.intro h2, .services h2, .gallery h2, .testimonials h2, .final-cta h2 { font: 500 clamp(48px, 6vw, 83px) / .95 var(--serif); letter-spacing: -.035em; }
.intro h2 em, .services h2 em, .gallery h2 em, .testimonials h2 em, .final-cta h2 em { color: var(--brown); font-weight: 400; }
.intro-copy { font: 20px / 1.6 var(--serif); }
.intro-copy p:first-child::first-letter { float: left; padding: 8px 12px 0 0; color: var(--brown); font: 72px / .72 "Italiana", serif; }
.observer-badge { position: relative; display: inline-grid; min-width: 255px; margin-top: 22px; padding: 16px 44px 14px 17px; color: var(--brown); background: var(--cream); border: 1px solid var(--brown); text-decoration: none; transition: .25s; }
.observer-badge:hover { background: #eee0d1; transform: translateY(-2px); }
.observer-badge img { display: block; width: 190px; max-height: 48px; object-fit: contain; object-position: left center; }
.observer-badge span { margin-top: 9px; font: 500 8px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.observer-badge b { position: absolute; top: 26px; right: 15px; font-size: 18px; font-weight: 400; }

/* Offers */
.offers { display: grid; grid-template-columns: 1fr 1fr; color: white; background: var(--walnut); }
.offer { padding: 95px 30px; text-align: center; background: var(--walnut); }
.offer-light { color: var(--espresso); background: var(--sand); }
.ornament { font: 30px var(--serif); }
.offer > p { margin-top: 16px; font-size: 9px; letter-spacing: .25em; text-transform: uppercase; }
.offer h2 { font: 500 48px / 1.05 var(--serif); }
.offer a { font-size: 9px; letter-spacing: .18em; text-underline-offset: 6px; text-transform: uppercase; }

/* Gallery */
.gallery-heading { text-align: center; }
.gallery-heading h2 { margin-bottom: 55px; }
.gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 285px; gap: 14px; max-width: 1150px; margin: 0 auto; }
.gallery-grid figure { margin: 0; overflow: hidden; }
.gallery-grid figure { grid-column: span 2; }
.gallery-grid .tall { grid-column: span 2; grid-row: span 1; }
.gallery-grid .wide { grid-column: span 3; }
.gallery-grid figure:last-child { grid-column: span 3; }
.gallery-grid img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.1) saturate(.85); transition: transform .7s, filter .7s; }
.gallery-grid figure:hover img { transform: scale(1.045); filter: none; }

/* Testimonials */
.testimonials { display: grid; grid-template-columns: .75fr 2fr; gap: 7vw; color: var(--cream); background: var(--walnut); }
.testimonial-intro h2 em { color: var(--sand); }
.stars { color: var(--sand); letter-spacing: .35em; }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.quotes blockquote { margin: 0; padding: 37px; background: #f5eee40b; border: 1px solid #d8bea32e; }
.quotes blockquote:first-child { grid-column: span 2; }
.quotes blockquote > span { color: var(--sand); font: 75px / .5 var(--serif); }
.quotes blockquote p { font: 18px / 1.55 var(--serif); }
.quotes footer { display: flex; justify-content: space-between; padding-top: 15px; border-top: 1px solid #d8bea32e; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.quotes footer a { color: var(--sand); }

/* Services */
.services { padding-top: 140px; color: var(--cream); background: var(--espresso); }
.services-title { max-width: 660px; margin: 0 auto 65px; text-align: center; }
.services-title h2 { margin-bottom: 24px; }
.services-title h2 em { color: var(--sand); }
.services-title > p:last-child { color: #d8bea3cc; font: 18px var(--serif); }
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1250px; margin: 0 auto; }
.service-card { color: var(--ink); background: var(--cream); }
.service-card img { display: block; width: 100%; height: 300px; object-fit: cover; filter: sepia(.18) saturate(.8); }
.service-body { padding: 34px 36px 42px; }
.service-body > span { color: var(--camel); font: italic 14px var(--serif); }
.service-body h3 { margin: 0; padding-bottom: 15px; border-bottom: 1px solid #b18a6750; font: 500 37px var(--serif); }
.service-body ul { margin: 0; padding: 20px 0 0; list-style: none; }
.service-body li { padding: 6px 0; font-size: 12px; }
.service-body li::before { content: "◆"; margin-right: 11px; color: var(--camel); font-size: 6px; vertical-align: 2px; }

/* Closing and footer */
.final-cta { display: grid; place-items: center; min-height: 540px; padding: 80px 25px; color: white; text-align: center; background: linear-gradient(#26150fbf, #26150fd4), url("hair/hair10.jpg") center / cover fixed; }
.final-cta h2 { margin: 25px 0 35px; }
.final-cta h2 em { color: var(--sand); }
.footer { display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: center; gap: 30px; padding: 65px 6vw 40px; color: #e7d9cb; background: #160b08; }
.footer-brand { display: flex; align-items: center; gap: 20px; }
.footer-brand h2 { margin: 0; font: 500 22px var(--serif); letter-spacing: .08em; }
.footer-brand p, .footer-info p { margin: 3px 0; font-size: 10px; letter-spacing: .08em; }
.footer-info a { color: var(--sand); font: 24px var(--serif); }
.back-top { color: var(--sand); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-header { height: 76px; }
  .menu-toggle { z-index: 2; display: grid; gap: 5px; padding: 12px; }
  .menu-toggle span { display: block; width: 24px; height: 1px; background: white; }
  .site-header nav { position: fixed; top: 0; right: 0; flex-direction: column; align-items: flex-start; width: min(320px, 85vw); height: 100vh; padding: 100px 35px; background: var(--espresso); transform: translateX(100%); transition: .35s; }
  .site-header nav.open { transform: none; }
  .site-header nav a { font-size: 12px; }
  .intro-grid, .testimonials { grid-template-columns: 1fr; }
  .intro-grid { gap: 35px; }
  .details-strip { grid-template-columns: 1fr; }
  .details-strip > div + div { border-top: 1px solid #b18a6755; border-left: 0; }
  .service-cards { grid-template-columns: 1fr; max-width: 620px; }
  .service-card { display: grid; grid-template-columns: 1fr 1fr; }
  .service-card img { height: 100%; min-height: 310px; }
  .offers { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid figure, .gallery-grid .tall, .gallery-grid .wide { grid-column: span 1; grid-row: span 1; }
  .gallery-grid figure:last-child { grid-column: span 2; }
  .footer { grid-template-columns: 1fr 1fr; }
  .back-top { grid-column: span 2; }
  .final-cta { background-attachment: scroll; }
}

@media (max-width: 600px) {
  .section { padding: 80px 22px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand strong { font-size: 21px; }
  .brand small { font-size: 8px; }
  .hero { min-height: 650px; }
  .hero h1 { font-size: 70px; }
  .slogan { font-size: 17px; }
  .memorial-notice { grid-template-columns: 1fr; gap: 0; width: calc(100% - 28px); margin-top: 28px; padding: 36px 24px; }
  .memorial-rule { display: none; }
  .memorial-notice p:last-child { font-size: 18px; }
  .news-meta { flex-wrap: wrap; gap: 8px 12px; }
  .intro { padding-top: 28px; }
  .salon-showcase { height: 490px; }
  .salon-photo-main { width: 92%; height: 72%; }
  .salon-photo-side { width: 67%; height: 45%; border-width: 7px; }
  .salon-caption { right: 15px; bottom: 0; left: 0; z-index: 2; min-width: 0; padding: 18px 22px; }
  .details-strip { margin-top: 38px; }
  .details-strip > div { padding: 24px 12px; }
  .location-map { margin-top: 58px; }
  .map-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .map-heading h2 { font-size: 44px; }
  .location-map iframe { height: 360px; }
  .section-kicker { margin: 78px 0 48px; }
  .intro h2, .services h2, .gallery h2, .testimonials h2, .final-cta h2 { font-size: 48px; }
  .observer-badge { width: 100%; }
  .offer { padding: 70px 20px; }
  .offer h2 { font-size: 40px; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 330px; }
  .gallery-grid .wide, .gallery-grid figure:first-child, .gallery-grid figure:last-child { grid-column: auto; grid-row: auto; }
  .quotes { grid-template-columns: 1fr; }
  .quotes blockquote:first-child { grid-column: auto; }
  .quotes footer { gap: 15px; }
  .service-card { display: block; }
  .service-card img { height: 280px; min-height: 0; }
  .service-body { padding: 26px; }
  .footer { grid-template-columns: 1fr; }
  .back-top { grid-column: auto; }
  .footer-brand { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .gallery-grid img { transition: none; }
}