:root {
    --white: #FAF6EE;
    --ink: #2B2620;
    --muted: #8C8271;
    --line: #E5DDC9;
    --line-soft: #F1EBDC;
    --sage: #838C74;
    --sage-dark: #5F6650;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; min-width: 0; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--white);
    color: var(--ink);
    font-family: 'Archivo', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, .display {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.05;
  }

  .italic { font-style: italic; font-weight: 400; }

  a { color: inherit; text-decoration: none; }

  img, video, .ph { display: block; width: 100%; object-fit: cover; }

  .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* Photo tiles (hero, about, service, gallery images) */
  .ph {
    background: #EFE9DA;
  }

  /* ---------- NAV ---------- */
  .top-location-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 101;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
  }
  .top-location-bar a {
    color: var(--white);
    font-size: 12px;
    letter-spacing: 0.03em;
    opacity: 0.9;
    transition: opacity .2s ease;
  }
  .top-location-bar a:hover { opacity: 1; }

  header {
    position: fixed;
    top: 36px; left: 0; right: 0;
    z-index: 100;
    background: #FEFCF9;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease;
  }
  header.scrolled { border-bottom-color: var(--line); }

  nav.wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
  }

  .logo {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
  .logo .italic { font-size: 20px; }
  .logo-domain {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: 10px;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
  }

  .nav-links {
    display: flex;
    gap: 40px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .nav-links a { color: var(--muted); transition: color .2s ease; }
  .nav-links a:hover { color: var(--ink); }

  .nav-cta {
    font-size: 13px;
    letter-spacing: 0.04em;
    border: 1px solid var(--ink);
    padding: 10px 20px;
    border-radius: 2px;
    white-space: nowrap;
  }
  .nav-cta:hover { background: var(--ink); color: var(--white); }

  .menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
  .menu-toggle span { width: 22px; height: 1.5px; background: var(--ink); }

  /* ---------- HERO ---------- */
  .hero {
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding-top: 126px;
    position: relative;
  }
  .hero-vine-deco {
    display: none;
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 240px;
    height: auto;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
  }
  @media (min-width: 861px) {
    .hero-vine-deco { display: block; }
  }
  @media (min-width: 1300px) {
    .hero-vine-deco { left: -70px; width: 280px; }
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 64px;
    align-items: center;
    width: 100%;
    padding-bottom: 80px;
    position: relative;
    z-index: 1;
  }
  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--muted);
  }
  .hero h1 {
    font-size: clamp(48px, 6.4vw, 92px);
    margin-bottom: 28px;
  }
  .hero p.lead {
    font-size: 18px;
    color: var(--muted);
    max-width: 40ch;
    margin-bottom: 36px;
    line-height: 1.6;
  }
  .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

  .btn-primary {
    background: var(--ink);
    color: var(--white);
    padding: 16px 30px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: opacity .2s ease;
  }
  .btn-primary:hover { opacity: 0.78; }

  .btn-ghost {
    padding: 16px 30px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    border-radius: 2px;
    transition: border-color .2s ease;
  }
  .btn-ghost:hover { border-color: var(--ink); }

  .hero-photo { aspect-ratio: 4/5; border-radius: 2px; }

  /* ---------- SIGNATURE ROSE DIVIDER ---------- */
  .strand-divider {
    padding: 28px 0;
    display: flex;
    justify-content: center;
  }
  .rose-divider-img { height: 76px; width: auto; display: block; opacity: 1; }
  /* Visible by default, no JS or animation required for the rose to show up.
     Only when JS confirms it's ready do we hide it first and fade it in.
     If JS fails for any reason, this base rule keeps the rose fully visible.
     (Uses opacity, not clip-path/zero-size hiding: a fully clipped element can
     silently stop receiving IntersectionObserver updates in some browsers.) */
  .js-ready .rose-divider-img {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 2.1s ease, transform 2.1s ease;
  }
  .js-ready .rose-divider-img.in-view { opacity: 1; transform: translateY(0); }

  /* ---------- SECTION SHELL ---------- */
  section { padding: 120px 0; }
  .section-head { margin-bottom: 64px; }
  .section-head .eyebrow { margin-bottom: 20px; }
  .section-head h2 { font-size: clamp(32px, 4vw, 48px); }

  /* ---------- ABOUT ---------- */
  .about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 72px;
    align-items: center;
  }
  .about-photo { aspect-ratio: 3/4; border-radius: 2px; }
  .about-copy p { font-size: 17px; line-height: 1.75; color: var(--muted); margin-bottom: 20px; max-width: 52ch; }
  .about-copy p:first-of-type { color: var(--ink); font-size: 19px; }

  .experience-badge {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .experience-number {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 34px;
    color: var(--ink);
    line-height: 1;
  }
  .experience-label {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.4;
  }

  /* ---------- STYLIST TEASER (index page) ---------- */
  .stylist-teaser-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 64px;
    align-items: center;
  }
  .stylist-teaser-photo { aspect-ratio: 3/4; border-radius: 2px; }

  /* ---------- SERVICES ---------- */
  .price-disclaimer {
    font-size: 13px;
    font-style: italic;
    color: var(--muted);
    margin-bottom: 36px;
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
  }
  .service-card .ph { aspect-ratio: 4/3; border-radius: 2px; margin-bottom: 20px; }
  .service-card .name { font-family: 'Fraunces', serif; font-size: 21px; margin-bottom: 8px; }
  .service-card .desc { font-size: 14px; color: var(--muted); line-height: 1.45; margin-bottom: 14px; }
  .view-gallery-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sage-dark);
    margin-bottom: 14px;
    transition: opacity .2s ease;
  }
  .view-gallery-link:hover { opacity: 0.7; }
  .service-card .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .service-card .price-duration { font-size: 13px; color: var(--muted); }
  .service-card .price-duration strong { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink); font-size: 16px; }
  .service-card .book-link {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--ink);
    padding: 10px 20px;
    border-radius: 2px;
    transition: opacity .2s ease;
  }
  .service-card .book-link:hover { opacity: 0.8; }
  .services-note {
    margin-top: 40px;
    padding: 20px 24px;
    background: var(--line-soft);
    border-radius: 2px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
  }

  /* Empty placeholder square: treatments without a photo yet */
  .ph-empty {
    background: repeating-linear-gradient(135deg, #F1ECDD 0px, #F1ECDD 12px, #E8E0CB 12px, #E8E0CB 24px);
    border: 1px dashed #C7BC9E;
  }

  /* ---------- SERVICES TEASER (index page) ---------- */
  .services-teaser-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: center;
  }
  .teaser-photo-stack {
    position: relative;
    aspect-ratio: 1/1;
  }
  .teaser-photo {
    position: absolute;
    border-radius: 2px;
    box-shadow: 0 20px 40px -20px rgba(43,38,32,0.35);
  }
  .teaser-photo-1 {
    width: 68%;
    aspect-ratio: 4/5;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .teaser-photo-2 {
    width: 55%;
    aspect-ratio: 4/5;
    bottom: 0;
    right: 0;
    z-index: 2;
    border: 6px solid var(--white);
  }

  /* ---------- GALLERY ---------- */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 260px;
    gap: 4px;
  }
  .gallery-grid .ph:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery-grid .ph { border-radius: 0; height: 100%; }

  /* ---------- REVIEWS ---------- */
  .review-carousel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    max-width: 760px;
    margin: 0 auto;
  }
  .review-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    flex-shrink: 0;
  }
  .review-arrow:hover { border-color: var(--ink); background: var(--line-soft); }
  .review-card {
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity .18s ease;
  }
  .review-card.fading { opacity: 0; }
  .review-stars {
    color: var(--sage-dark);
    letter-spacing: 0.15em;
    font-size: 15px;
    margin-bottom: 20px;
  }
  .review-quote {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: clamp(18px, 2.4vw, 23px);
    line-height: 1.55;
    color: var(--ink);
    max-width: 56ch;
    margin-bottom: 20px;
  }
  .review-meta { font-size: 13px; color: var(--muted); }
  .review-author { font-weight: 600; color: var(--ink); }
  .review-source { margin-left: 8px; }
  .review-source::before { content: '·'; margin-right: 8px; }
  .review-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
  }
  .review-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .review-dot.active { background: var(--sage-dark); transform: scale(1.3); }

  /* ---------- BOOKING / LOCATION ---------- */
  .booking {
    background: var(--ink);
    color: var(--white);
  }
  .booking .section-head .eyebrow { color: #B8C0A8; }
  .booking .section-head .eyebrow::before { background: #B8C0A8; }
  .booking-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
  }
  .booking h2 { color: var(--white); }
  .booking-copy { font-size: 17px; line-height: 1.7; color: #DCD6C4; max-width: 44ch; margin-bottom: 32px; }
  .booking .btn-primary { background: var(--white); color: var(--ink); }
  .booking-contact-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .booking-contact-options .btn-primary { padding: 16px 24px; }

  .info-list { border-top: 1px solid #443E32; }
  .info-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid #443E32;
    font-size: 15px;
  }
  .info-row .label { color: #A79E88; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
  .info-row .value { text-align: right; }
  .map-link {
    text-decoration: underline;
    text-decoration-color: #6B6558;
    text-underline-offset: 3px;
    transition: opacity .2s ease;
  }
  .map-link:hover { opacity: 0.7; }
  .footer-social {
    color: var(--muted);
    transition: opacity .2s ease;
  }
  .footer-social:hover { opacity: 0.6; }
  .info-note {
    margin-top: 24px;
    font-size: 13px;
    color: #A79E88;
    line-height: 1.6;
  }
  .service-area {
    margin-top: 12px;
    font-size: 13px;
    color: #A79E88;
    line-height: 1.6;
  }
  .map-embed-wrap {
    max-width: 1120px;
    margin: 56px auto 0;
    padding: 0 32px;
  }
  .map-embed {
    display: block;
    width: 100%;
    height: 340px;
    border: 0;
    border-radius: 2px;
    filter: grayscale(0.3) contrast(1.05);
  }

  /* ---------- INSTAGRAM FOLLOW ---------- */
  .insta-follow {
    background: var(--ink);
    color: var(--white);
    text-align: center;
    padding-top: 140px;
    padding-bottom: 140px;
  }
  .insta-follow-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .insta-icon { color: var(--white); margin-bottom: 24px; width: 52px; height: 52px; }
  .insta-follow .eyebrow { justify-content: center; color: #B8C0A8; font-size: 14px; }
  .insta-follow .eyebrow::before { background: #B8C0A8; }
  .insta-follow h2 {
    font-size: clamp(40px, 5.5vw, 64px);
    margin-bottom: 20px;
  }
  .insta-follow .lead {
    color: var(--line-soft);
    max-width: 50ch;
    margin: 0 auto 40px;
    font-size: 18px;
  }
  .insta-follow-btn {
    background: var(--white);
    color: var(--ink);
    font-size: 16px;
    letter-spacing: 0.08em;
    padding: 20px 52px;
  }
  .insta-follow-btn:hover { opacity: 0.85; }

  /* ---------- FINAL CTA ---------- */
  .final-cta {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 100px;
  }
  .final-cta h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 28px; }

  /* ---------- FOOTER ---------- */
  footer.wrap {
    padding: 48px 32px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
  }
  footer .logo { font-size: 16px; }

  /* ---------- MOBILE ---------- */
  @media (max-width: 860px) {
    .nav-links { display: none; }
    .menu-toggle { display: flex; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero { align-items: flex-start; padding-top: 142px; }
    nav.wrap { height: 76px; }
    .top-location-bar { height: 32px; }
    .top-location-bar a { font-size: 10.5px; padding: 0 12px; text-align: center; }
    header { top: 32px; }
    .logo-domain { display: none; }
    .hero-photo { aspect-ratio: 4/3; order: -1; }
    .about-grid, .booking-grid { grid-template-columns: 1fr; gap: 40px; }
    .stylist-teaser-grid { grid-template-columns: 1fr; gap: 32px; }
    .stylist-teaser-photo { aspect-ratio: 4/3; }
    .services-teaser-grid { grid-template-columns: 1fr; gap: 40px; }
    .teaser-photo-stack { width: 100%; max-width: 320px; margin: 0 auto; }
    .about-photo { aspect-ratio: 4/3; }
    section { padding: 80px 0; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .gallery-grid .ph:nth-child(1) { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; }
    .services-grid { grid-template-columns: 1fr; gap: 36px; }
    .review-carousel { gap: 12px; }
    .review-arrow { width: 36px; height: 36px; }
    .review-card { min-height: 240px; }
    footer { flex-direction: column; gap: 12px; text-align: center; }
  }

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

  :focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }

/* Natural Look by Rose official gold logo */
.logo-image-link {
  display: flex !important;
  align-items: center;
  text-decoration: none;
  line-height: 1 !important;
  background: transparent;
  overflow: visible;
}
.brand-logo-img {
  display: block;
  width: 265px;
  max-width: 34vw;
  height: 82px;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

@media (max-width:700px){.brand-logo-img{width:180px;height:64px;max-width:48vw;}}


/* ---------- LIGHT / DARK THEME SWITCH ---------- */
.theme-toggle {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 400 21px/1 Georgia, serif;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--ink); }

html.dark-mode {
  --white: #151310;
  --ink: #F4EEDF;
  --muted: #BEB4A2;
  --line: #3A352D;
  --line-soft: #26221D;
  --sage: #A5AD95;
  --sage-dark: #C4CCB4;
  color-scheme: dark;
}
html.dark-mode body { background: #151310; color: var(--ink); }
html.dark-mode header { background: rgba(21,19,16,.96); }
html.dark-mode .top-location-bar { background: #0C0B09; }
html.dark-mode .ph { background: #24201B; }
html.dark-mode .review-card,
html.dark-mode .info-card,
html.dark-mode .service-card,
html.dark-mode .service-item,
html.dark-mode .instagram-card,
html.dark-mode .booking-card { background-color: #1C1915; }
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select { background:#1C1915; color:var(--ink); border-color:var(--line); }
html.dark-mode .btn-primary { background: #F4EEDF; color: #191612; }
html.dark-mode .btn-ghost { color: var(--ink); }
html.dark-mode .nav-cta { border-color: var(--ink); }
html.dark-mode .nav-cta:hover { background: var(--ink); color: #171410; }
html.dark-mode .brand-logo-img { filter: brightness(1.08) saturate(.95); }
html.dark-mode .theme-toggle { background:#F4EEDF; color:#191612; border-color:#F4EEDF; }
html.dark-mode img:not(.brand-logo-img),
html.dark-mode video { filter: brightness(.88) contrast(1.03); }
html.dark-mode .hero-photo { filter: brightness(.82) contrast(1.04); }

@media (max-width: 860px) {
  .theme-toggle { width: 36px; height: 36px; flex-basis: 36px; font-size: 18px; margin-left: auto; }
  nav.wrap { gap: 8px; }
  .nav-cta { padding: 9px 12px; font-size: 11px; }
}