/* Plain CSS: no framework or build step required. */
:root {
  --font-serif:"Cormorant Garamond";
  --font-sans:"Manrope"}

*,::before,::after {
  box-sizing:border-box}
body {
  margin:0}
button,input,select,textarea {
  font:inherit}
button {
  color:inherit}
svg {
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0}
img {
  display:block;
  max-width:100%}
button {
  cursor:pointer}
a {
  text-decoration:none}
h1,h2,h3 {
  font-size:inherit}
summary {
  display:list-item}


:root {
  --bg:#f7f4f0;
  --surface:#eee8e1;
  --ink:#252321;
  --muted:#68615b;
  --line:#ded3bb;
  --accent:#946b16}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans),Arial,sans-serif;
  font-size:16px;
  line-height:1.7}
a {
  color:inherit;
  text-decoration:none}
button,input,select,textarea {
  font:inherit}
button,a,input,select,textarea {
  touch-action:manipulation}
a,button {
  transition:background .2s,color .2s}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px}
h1,h2,h3,p,figure {
  margin:0}
h1,h2,h3 {
  font-family:var(--font-serif),Georgia,serif;
  font-weight:400;
  line-height:1.08}
h1 {
  font-size:clamp(3.5rem,5.6vw,6.6rem);
  letter-spacing:-.035em}
h2 {
  font-size:clamp(2.7rem,3.6vw,4.5rem);
  letter-spacing:-.025em}
h3 {
  font-size:2rem}
em {
  font-weight:400;
  color:var(--accent)}
p {
  color:var(--muted);
  max-width:42rem}
.eyebrow {
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.17em;
  line-height:1.6;
  margin-bottom:24px}
.header {
  height:106px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5.5%;
  border-bottom:1px solid var(--line);
  gap:32px}
.wordmark {
  font-family:var(--font-serif),Georgia,serif;
  font-size:3.5rem;
  line-height:.7;
  letter-spacing:-.07em;
  display:inline-flex;
  flex-direction:column;
  align-items:center}
.wordmark span {
  font-family:var(--font-sans),sans-serif;
  font-size:.63rem;
  letter-spacing:.38em;
  margin-top:15px;
  margin-left:5px}
.nav {
  display:flex;
  gap:38px;
  font-size:.875rem}
.nav a:hover,.text-link:hover {
  color:var(--accent)}
.header-cta {
  display:flex;
  align-items:center;
  gap:20px;
  border-bottom:1px solid var(--ink);
  padding:10px 0;
  font-size:.875rem}
.menu-toggle {
  display:none;
  border:0;
  background:none;
  padding:10px}
.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:690px}
.hero-copy {
  padding:65px 8% 25px 11%;
  display:flex;
  flex-direction:column;
  align-items:flex-start}
.hero h1 {
  margin-bottom:27px}
.hero-copy>p {
  font-size:.94rem;
  line-height:1.9}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:33px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:16px 25px;
  background:var(--ink);
  color:var(--bg);
  font-size:.875rem;
  border:1px solid var(--ink);
  cursor:pointer}
.button:hover {
  background:#51453b}
.button.light {
  background:var(--bg);
  color:var(--ink);
  border-color:var(--bg)}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  border-bottom:1px solid var(--line);
  padding:9px 0;
  font-size:.875rem}
.hero-bottom {
  margin-top:auto;
  padding-top:40px;
  display:flex;
  justify-content:space-between;
  width:100%;
  align-items:center;
  font-size:.65rem;
  letter-spacing:.16em}
.hero-bottom a {
  padding:10px}
.hero-image {
  position:relative;
  min-height:690px;
  background:var(--surface);
  overflow:hidden}
.hero-image img {
  object-fit:cover;
  object-position:center 38%}
.hero-image figcaption {
  position:absolute;
  bottom:40px;
  left:35px;
  color:white;
  font-size:.7rem;
  letter-spacing:.19em;
  text-shadow:0 1px 6px #000}
.image-note {
  position:absolute;
  bottom:12px;
  right:16px;
  background:#f7f4f0dd;
  color:#51453b;
  padding:1px 7px;
  font-size:.75rem}
.section {
  padding:100px 5.5%}
.intro {
  display:grid;
  grid-template-columns:1fr 1.55fr 1.25fr;
  gap:35px;
  align-items:center;
  border-bottom:1px solid var(--line)}
.intro h2 {
  font-size:3rem}
.intro .eyebrow {
  align-self:start;
  margin-top:9px}
.intro p {
  font-size:.93rem;
  margin-bottom:18px}
.section-heading {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
  margin-bottom:50px}
.section-heading .eyebrow {
  margin-bottom:18px}
.section-heading>p {
  font-size:.9rem}
.featured-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line)}
.service-card {
  padding:32px 30px;
  border-bottom:1px solid var(--line);
  position:relative}
.featured-grid .service-card {
  border-right:1px solid var(--line)}
.featured-grid .service-card:first-child {
  padding-left:0}
.featured-grid .service-card:last-child {
  border-right:0}
.index {
  font-family:var(--font-serif),serif;
  font-size:1.25rem;
  color:var(--accent);
  display:block;
  margin-bottom:32px}
.service-card h3 {
  margin-bottom:15px}
.service-card p {
  font-size:.875rem;
  min-height:55px;
  max-width:29rem}
.service-card .text-link {
  margin-top:27px}
.editorial {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--surface)}
.editorial-photo {
  position:relative;
  min-height:630px}
.editorial-photo img {
  object-fit:cover}
.editorial-copy {
  padding:70px 11%}
.editorial-copy p {
  margin:25px 0 30px;
  font-size:.93rem}
.category-list a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  border-top:1px solid #d9c7a1;
  font-size:.93rem}
.category-list small {
  font-size:.75rem;
  margin-right:26px;
  color:var(--accent)}
.category-list a:last-child {
  border-bottom:1px solid #d9c7a1}
.value-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px}
.value-grid>div {
  border-top:1px solid var(--line);
  padding-top:25px}
.value-grid h3 {
  font-size:1.8rem;
  margin-bottom:16px}
.value-grid p {
  font-size:.9rem}
.appointment {
  text-align:center;
  background:var(--ink);
  padding:85px 24px;
  color:var(--bg)}
.appointment em {
  color:#dfba63}
.appointment p {
  margin:24px auto 30px;
  color:#d8cec4;
  font-size:.94rem}
.contact-strip {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:60px}
.contact-strip p {
  font-size:.875rem;
  margin-bottom:10px}
footer {
  border-top:1px solid var(--line);
  padding:65px 5.5% 25px}
.footer-top {
  display:grid;
  grid-template-columns:1fr 1fr .8fr 1.3fr;
  gap:35px;
  align-items:start}
.footer-top .wordmark {
  justify-self:start}
.footer-top p,.footer-top a:not(.wordmark) {
  font-size:.82rem}
.footer-top>div>a {
  display:block;
  margin-bottom:10px}
.footer-top>div>span {
  font-size:.7rem;
  letter-spacing:.14em}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:23px;
  margin-top:50px;
  font-size:.75rem;
  color:var(--muted)}
.mobile-booking {
  display:none}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:10px;
  z-index:100}
.skip-link:focus {
  top:10px}
.page-heading {
  padding:80px 5.5% 60px;
  border-bottom:1px solid var(--line)}
.page-heading p {
  margin-top:24px}
.category-nav {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:30px 5.5%}
.category-nav a {
  font-size:.875rem;
  border:1px solid var(--line);
  padding:9px 16px}
.category-nav a:hover {
  background:var(--surface)}
.catalog-section {
  padding-top:40px;
  padding-bottom:30px}
.catalog-section h2 {
  font-size:2.8rem;
  margin-bottom:25px}
.catalog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line)}
.catalog-grid .service-card {
  padding-left:0;
  margin-right:30px}
.breadcrumb {
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:35px;
  display:flex;
  gap:15px;
  flex-wrap:wrap}
.detail-hero {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:65px;
  align-items:center}
.detail-hero p {
  margin:25px 0}
.detail-photo {
  position:relative;
  height:420px}
.detail-photo img {
  object-fit:cover}
.detail-content {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:90px}
.detail-content h2 {
  font-size:2.8rem;
  margin-bottom:22px}
.detail-content p {
  margin-bottom:25px}
.notice {
  background:var(--surface);
  border-left:2px solid var(--accent);
  padding:24px;
  font-size:.9rem}
.steps {
  margin-top:32px;
  padding:0;
  list-style:none;
  counter-reset:steps}
.steps li {
  padding:20px 0;
  border-top:1px solid var(--line);
  counter-increment:steps}
.steps li:before {
  content:'0' counter(steps);
  font-family:var(--font-serif);
  color:var(--accent);
  margin-right:20px}
details {
  border-bottom:1px solid var(--line);
  padding:20px 0}
summary {
  cursor:pointer;
  font-size:.95rem}
details p {
  padding-top:16px;
  font-size:.875rem}
.about-copy {
  max-width:800px}
.about-copy p {
  margin:28px 0}
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px}
.contact-grid h2 {
  font-size:3rem;
  margin-bottom:25px}
.contact-item {
  border-top:1px solid var(--line);
  padding:22px 0}
.contact-item h3 {
  font-family:var(--font-sans);
  font-size:.8rem;
  letter-spacing:.07em;
  margin-bottom:10px}
.contact-item p {
  font-size:.9rem}
.contact-item a {
  text-decoration:underline}
.booking-box {
  background:var(--surface);
  padding:40px}
.booking-box p {
  margin-bottom:22px}
.booking-box label {
  display:block;
  font-size:.85rem;
  margin-top:20px}
.booking-box input,.booking-box select,.booking-box textarea {
  width:100%;
  border:1px solid #b6aa9f;
  border-radius:0;
  background:var(--bg);
  padding:12px;
  color:var(--ink)}
.booking-box textarea {
  min-height:100px}
.booking-box .button {
  margin-top:24px}
.status {
  font-size:.85rem;
  padding:16px;
  background:var(--bg)}
.privacy {
  font-size:.78rem;
  margin-top:20px}
.map-placeholder {
  padding:30px;
  border:1px solid var(--line);
  background:var(--surface);
  margin-top:30px}
.map-placeholder p {
  font-size:.875rem}
.not-found {
  text-align:center;
  padding:130px 25px}
.not-found p {
  margin:20px auto 30px}

@media(min-width:1600px) {
  .hero-copy {
  padding-top:95px}
.hero,.hero-image {
  min-height:820px}
}

@media(max-width:1000px) {
  .header {
  gap:20px}
.nav {
  gap:22px}
.hero-actions {
  align-items:flex-start;
  flex-direction:column;
  gap:12px}
.hero-copy {
  padding-top:45px}
.intro {
  grid-template-columns:1fr 1fr}
.intro>.eyebrow {
  grid-column:1/-1}
.editorial-copy {
  padding:55px 8%}
.footer-top {
  grid-template-columns:1fr 1fr}
.detail-content {
  gap:40px}
}

@media(max-width:760px) {
  .header {
  height:85px;
  padding:0 6%;
  gap:15px}
.wordmark {
  font-size:2.8rem}
.wordmark span {
  font-size:.55rem;
  margin-top:12px}
.menu-toggle {
  display:block}
.header-cta {
  margin-left:auto;
  font-size:.75rem;
  gap:7px}
.nav {
  display:none;
  position:absolute;
  top:85px;
  left:0;
  right:0;
  background:var(--bg);
  padding:25px 6%;
  border-bottom:1px solid var(--line);
  z-index:20}
.nav.open {
  display:flex;
  flex-direction:column;
  gap:20px}
.hero {
  grid-template-columns:1fr}
.hero-copy {
  padding:43px 6% 25px}
.hero h1 {
  font-size:3.8rem}
.eyebrow {
  font-size:.69rem;
  margin-bottom:22px}
.hero-copy>p {
  font-size:.875rem}
.hero-actions {
  flex-direction:row;
  align-items:center;
  gap:20px;
  width:100%;
  margin-top:26px}
.button {
  padding:14px 19px;
  gap:18px;
  font-size:.82rem}
.hero-actions .text-link {
  font-size:.8rem}
.hero-bottom {
  padding-top:22px}
.hero-image {
  min-height:480px}
.hero-image img {
  object-position:center 35%}
.section {
  padding:62px 6%}
.intro {
  grid-template-columns:1fr;
  gap:24px}
.intro h2 {
  font-size:2.9rem}
.intro>.eyebrow {
  margin:0}
.section-heading {
  display:block;
  margin-bottom:30px}
.section-heading>.text-link,.section-heading>p {
  margin-top:20px}
.featured-grid,.value-grid,.catalog-grid {
  grid-template-columns:1fr}
.featured-grid .service-card {
  padding:26px 0;
  border-right:0}
.service-card .index {
  margin-bottom:17px}
.service-card p {
  min-height:0}
.service-card .text-link {
  margin-top:16px}
.editorial {
  grid-template-columns:1fr}
.editorial-photo {
  min-height:360px}
.editorial-copy {
  padding:50px 6%}
.value-grid {
  gap:27px}
.value-grid .index {
  margin-bottom:15px}
.appointment {
  padding:65px 6%}
.contact-strip,.contact-grid,.detail-content,.detail-hero {
  grid-template-columns:1fr;
  gap:35px}
.footer-top {
  grid-template-columns:1fr 1fr;
  gap:35px 20px}
.footer-bottom {
  gap:15px;
  flex-direction:column}
footer {
  padding:50px 6% 100px}
.mobile-booking {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:30;
  display:grid;
  grid-template-columns:1.6fr 1fr;
  background:var(--ink);
  color:var(--bg);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 12px #25232115}
.mobile-booking a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:15px;
  font-size:.8rem}
.mobile-booking a+a {
  border-left:1px solid #a48135;
  background:var(--surface);
  color:var(--ink)}
.page-heading {
  padding:50px 6% 40px}
.page-heading h1 {
  font-size:3.6rem}
.category-nav {
  padding:25px 6%}
.catalog-section {
  padding-top:30px;
  padding-bottom:20px}
.catalog-grid .service-card {
  margin-right:0}
.detail-photo {
  height:340px}
.booking-box {
  padding:26px}
.breadcrumb {
  font-size:.75rem;
  gap:9px}
.footer-top p {
  font-size:.78rem}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  transition:none!important;
  animation:none!important}
}


.catalog-grid .service-card {
  display:flex;
  flex-direction:column}
.catalog-grid .text-link {
  align-self:flex-start;
  margin-top:auto}
.service-category {
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:15px}
.catalog-grid .service-card p {
  margin-bottom:22px}
.booking-box .button {
  width:100%}
.contact-strip a[href^="tel:"] {
  text-decoration:underline}
.nav.open {
  z-index:40}


/* Supplied Aylin Beauty VIP logo and coordinated gold details. */
.wordmark { display:inline-flex; flex-direction:row; flex-shrink:0; line-height:1; letter-spacing:normal; }
.brand-logo { width:112px; height:84px; object-fit:contain; }
.footer-top .brand-logo { width:160px; height:120px; }
.header-cta { border-color:var(--accent); }
.header-cta svg,.text-link svg,.hero-bottom svg { color:var(--accent); }
.button { background:#8a6008; border-color:#8a6008; color:#fff; }
.button:hover { background:#6e4b05; border-color:#6e4b05; }
.button.light { background:#e7c16c; border-color:#e7c16c; color:#252321; }
.button.light:hover { background:#f0d18d; border-color:#f0d18d; }
.eyebrow { color:#805c13; }
.appointment .eyebrow { color:#dfba63; }
.mobile-booking { background:#8a6008; }
::selection { background:#edd8a8; color:#252321; }
@media(max-width:760px) {
 .brand-logo { width:88px; height:66px; }
 .footer-top .brand-logo { width:132px; height:99px; }
 .header { gap:12px; }
}