@font-face { font-family: "Aime"; src: url("assets/aime-300.woff2") format("woff2"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Aime"; src: url("assets/aime-700.woff2") format("woff2"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Aime"; src: url("assets/aime-800.woff2") format("woff2"); font-weight: 800; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("assets/melange-grotesk-350.ttf") format("truetype"); font-weight: 350; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("assets/melange-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("assets/melange-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("assets/melange-grotesk-600.otf") format("opentype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Aime"; src: url("assets/aime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
:root{
    --ds-terracotta: #c95f5b;
    --ds-orange: #e36d42;
    --ds-ochre: #d8b76a;
    --ds-olive: #a8af6d;
    --ds-seafoam: #7f9c7d;
    --ds-mint: #c0e1dc;
    --ds-blue: #5c76ad;
    --ds-indigo: #706f9c;
    --ds-purple: #987fa0;
    --ds-salmon: #d99091;
    --ds-pink: #fac7c2;
    --ds-background-1: #ffffff;
    --ds-background-2: #fdfcfb;
    --ds-background-3: #dacbc0;
    --ds-foreground-1: #4d3533;
    --ds-foreground-2: rgb(77 53 51 / 0.7);
    --ds-foreground-3: rgb(77 53 51 / 0.5);
    --ds-foreground-4: rgb(77 53 51 / 0.2);
    --ds-foreground-5: rgb(77 53 51 / 0.05);
    --ds-border: var(--ds-foreground-4);
    --ds-hairline: rgb(77 53 51 / 0.1);
    --ds-muted: #f6f2ef;
    --ds-primary: var(--ds-foreground-1);
    --ds-on-primary: #fdfcfb;
    --ds-success: #73a89a;
    --ds-success-wash: rgb(115 168 154 / 0.1);
    --ds-danger: #ed313e;
    --ds-danger-wash: rgb(237 49 62 / 0.1);
    --ds-radius: 12px;
    --ds-radius-compact: 8px;
    --ds-control: 44px;
    --ds-control-compact: 32px;
    --ds-fg1: var(--ds-foreground-1);
    --ds-fg2: var(--ds-foreground-2);
    --ds-fg3: var(--ds-foreground-3);
    --ds-fg4: var(--ds-foreground-4);
    --ds-fg5: var(--ds-foreground-5);
    --ds-bg1: var(--ds-background-1);
    --ds-bg2: var(--ds-background-2);
    --ds-bg3: var(--ds-background-3);
    --ds-white: var(--ds-background-1);
    --ds-page: var(--ds-background-2);
    --ds-raised: var(--ds-muted);
    --ds-ink: var(--ds-foreground-1);
    --ds-ink-2: var(--ds-foreground-2);
    --ds-ink-3: var(--ds-foreground-3);
    --ds-ink-4: var(--ds-foreground-4);
    --ds-teal: var(--ds-success);
    --ds-red: var(--ds-danger);
    --ds-red-border: var(--ds-danger);
    --ds-hover: var(--ds-foreground-5);
    --ds-hover-strong: color-mix(in srgb, #4d3533 10%, transparent);
    --ds-hover-red: color-mix(in srgb, #ed313e 5%, transparent);
    --ds-scrim: rgb(77 53 51 / 0.4);
    --ds-shadow-control: 0 1px 2px color-mix(in srgb, #251f21 5%, transparent);
    --ds-ring: 0 0 0 1px rgb(77 53 51 / 0.05);
    --ds-elevation-0: 0 1px 2px rgb(77 53 51 / 0.05);
    --ds-elevation-1: 0 2px 5px rgb(77 53 51 / 0.075), 0 9px 10px rgb(77 53 51 / 0.064), 0 21px 13px rgb(77 53 51 / 0.038), 0 38px 16px rgb(77 53 51 / 0.011), 0 59px 16px rgb(77 53 51 / 0);
    --ds-elevation-2: var(--ds-ring), 0 6px 12px rgb(77 53 51 / 0.1), 0 22px 23px rgb(77 53 51 / 0.085), 0 50px 31px rgb(77 53 51 / 0.05), 0 88px 37px rgb(77 53 51 / 0.015), 0 138px 38px rgb(77 53 51 / 0);
    --ds-elevation-3: 0 11px 24px rgb(77 53 51 / 0.13), 0 44px 45px rgb(77 53 51 / 0.111), 0 99px 62px rgb(77 53 51 / 0.065), 0 176px 73px rgb(77 53 51 / 0.019), 0 275px 77px rgb(77 53 51 / 0);
    --ds-lift: var(--ds-elevation-0);
    --ds-shadow-modal: var(--ds-elevation-3);
    --ds-font-display: "Aime", Georgia, serif;
    --ds-font-text: "KMR Melange Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
:root{
    
    --site-font-scripts: "Noto Sans Hebrew", "Noto Sans Arabic", "Noto Naskh Arabic", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Color Emoji";
    --site-font-text: var(--ds-font-text), var(--site-font-scripts);
    --site-font-display: var(--ds-font-display), var(--site-font-scripts);
    --site-shadow: 0 1px 2px rgb(37 31 33 / 6%), 0 6px 18px rgb(37 31 33 / 5%);
    --site-pad-x: 24px;
    
    --site-col: 200px;
    
    --site-product-col: 300px;
    
    --site-text: 14px;
    --site-small: 12px;
    
    --site-button-roll: 320ms;
    
    --site-low-stock: #d59b53;
    --site-photo-max-height: 600px;
    
    --site-tracking: 1;
    
    --site-label-col: min(var(--site-col), 38%);
}
.site-card{
    box-sizing: border-box;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px var(--site-pad-x);
    background: var(--ds-page);
    color: var(--ds-ink);
    display: flex;
    flex-direction: column;
    gap: 48px;
    font-family: var(--site-font-text);
    font-size: var(--site-text);
    font-weight: 350;
    line-height: 24px;
    letter-spacing: calc(-0.01em * var(--site-tracking));
    
    overflow-wrap: break-word;
}
.site-card[data-width="phone"]{ max-width: 390px; }
.site-card > *{ min-width: 0; }
:where(.site-card) a{ color: var(--ds-ink); }
.site-card :focus-visible{ outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.site-strong{ font-weight: 600; }
.site-known{ color: var(--ds-teal); font-weight: 600; }
.site-group{ display: flex; flex-direction: column; gap: 24px; }
.site-group-label{ margin: 0; font: inherit; color: var(--ds-ink-2); }
.site-group-head{ display: flex; flex-direction: column; gap: 4px; margin: 0; }
.site-group-heading{
    margin: 0;
    font-family: var(--site-font-display);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: calc(-0.025em * var(--site-tracking));
}
.site-rows{ display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.site-row{ display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); }
.site-row:last-child{ border-bottom: 0; }
.site-row-body{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 16px; flex: 1; min-width: 0; }
.site-row-main{ display: flex; flex-direction: column; flex: 1 1 60%; min-width: 0; }
.site-row-detail{ color: var(--ds-ink-2); }
.site-row-value{ flex: 0 1 auto; min-width: 0; font-weight: 600; }
.site-facts{ display: flex; flex-direction: column; margin: 0; }
.site-facts > div{ display: grid; grid-template-columns: var(--site-label-col) minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); }
.site-facts > div:last-child{ border-bottom: 0; }
.site-facts dt{ padding-inline-end: 16px; }
.site-facts dt{ color: var(--ds-ink-2); }
.site-facts dd{ margin: 0; }
.site-text{ display: flex; flex-direction: column; gap: 32px; }
.site-p{ margin: 0; line-height: 24px; text-wrap: pretty; }
.site-bar{ position: relative; padding-inline-start: 16px; }
.site-bar::before{ content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2px; border-radius: 1px; background: var(--ds-hairline); }
.site-caption{ margin: 0; color: var(--ds-ink-2); font-size: var(--site-small); line-height: 20px; text-wrap: pretty; }
.site-photos + .site-caption{ margin-top: 12px; }
.site-link{ color: var(--ds-ink); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ds-ink-4); }
.site-link:hover{ text-decoration-color: currentColor; }
.site-callout{ display: flex; flex-direction: column; gap: 4px; text-wrap: pretty; }
.site-callout[data-tone="warning"]{ padding: 16px; border-radius: 8px; background: var(--ds-raised); color: var(--ds-ink); }
.site-callout[data-tone="warning"]::before{ display: none; }
.site-callout[data-tone="danger"]{ color: var(--ds-red); }
.site-callout[data-tone="danger"]::before{ background: var(--ds-red); }
.site-photos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; min-width: 0; }
.site-photos img{ display: block; width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--ds-raised); }
.site-photos[data-layout="strip"]{ display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.site-photos[data-layout="strip"]::-webkit-scrollbar{ display: none; }
.site-photos[data-layout="strip"] img{ flex: 0 0 auto; width: 85%; max-width: 480px; aspect-ratio: auto; scroll-snap-align: start; }
.site-photo-zoom{ all: unset; box-sizing: border-box; display: block; min-width: 0; border-radius: 8px; cursor: zoom-in; }
.site-photos[data-layout="strip"] > .site-photo-zoom{ flex: 0 0 auto; width: 85%; max-width: 480px; scroll-snap-align: start; }
.site-photos[data-layout="strip"] > .site-photo-zoom img{ width: 100%; max-width: none; }
.site-photos.is-single > .site-photo-zoom{ justify-self: stretch; width: auto; max-width: 100%; }
.site-photo-zoom:focus-visible{ outline: 2px solid var(--ds-ink); outline-offset: -2px; }
[data-can-drag] .site-photo-zoom{ cursor: grab; }
[data-dragging] .site-photo-zoom{ cursor: grabbing; }
.site-photos.is-single > .site-photo-zoom img{ width: auto; max-width: 100%; max-height: var(--site-photo-max-height); aspect-ratio: auto; }
@media  (min-width: 768px) {.site-card{ --site-pad-x: 36px; padding: 36px; }
.site-card[data-width="phone"]{ --site-pad-x: 24px; padding: 24px 24px; }
.site-p{ max-width: 72ch; }}
@media  print {.site-card{ box-shadow: none; max-width: none; border-radius: 0; }
.site-photos{ overflow: visible; }
.site-row,.site-facts > div,.site-callout{ break-inside: avoid; }
.site-group-label,.site-group-heading,.site-group-head{ break-after: avoid; }}
html, body, #root { margin: 0; min-height: 100%; }
body { background: var(--ds-page); }

/* Salon hero: echoes the dark, spaced-caps GlossGenius house style */
.salon-hero {
    position: relative;
    border-radius: var(--ds-radius, 12px);
    overflow: hidden;
    background-size: cover;
    background-position: 50% 35%;
    min-height: 420px;
    display: flex;
}
.salon-hero-overlay {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 24px 40px;
    background: linear-gradient(180deg, rgb(20 16 15 / 0.82) 0%, rgb(20 16 15 / 0.55) 45%, rgb(20 16 15 / 0.8) 100%);
    text-align: center;
}
.salon-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin-bottom: 26px;
}
.salon-nav a {
    color: #f5efe8;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 11px;
    padding: 10px 0;
}
.salon-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.salon-name {
    margin: 0;
    color: #f5efe8;
    font-family: "Aime", serif;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    line-height: 1.5;
}
.salon-name-initial { font-size: 40px; }
.salon-tagline {
    margin: 0;
    color: #e8dfd6;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    font-size: 11px;
}
.book-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 40px;
    margin-top: 18px;
    border: 1px solid #f5efe8;
    color: #f5efe8;
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 12px;
    text-decoration: none;
    border-radius: 2px;
}
.book-button:hover { background: rgb(245 239 232 / 0.12); }
.book-button.is-compact {
    min-height: 44px;
    margin-top: 4px;
    border-color: #1b7f63;
    background: #1b7f63;
    color: #f5efe8;
    align-self: flex-start;
}
.book-button.is-compact:hover { background: #156a53; }
.book-row { display: flex; justify-content: flex-start; margin-top: 8px; }

@media (max-width: 600px) {
    .salon-hero { min-height: 360px; }
    .salon-name { font-size: 22px; letter-spacing: 0.24em; }
    .salon-name-initial { font-size: 30px; }
    .salon-nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.portfolio-grid button { display: block; padding: 0; border: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 1; background: var(--ds-raised); cursor: pointer; }
.portfolio-grid img { display: block; width: 100%; height: 100%; object-fit: contain; }
.portfolio-grid button:focus-visible { outline: 2px solid var(--ds-teal); outline-offset: 3px; }
@media (min-width: 768px) { .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

.visit-grid { display: grid; gap: 24px; }
.visit-grid > div { min-width: 0; }
@media (min-width: 900px) { .visit-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 32px; } }

.social-follow { border-top: 1px solid var(--ds-border); padding: 28px 0 8px; }
.social-follow p { margin: 0 0 12px; }
.social-follow nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.social-follow nav a { display: inline-flex; align-items: center; min-height: 44px; }

.social-handle { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* The salon's warm, restrained house palette. */
.salon-theme { --ds-page: #faf6ef; --ds-ink: #3f322d; --ds-ink-2: #64534a; --ds-hairline: #d9cec3; --ds-teal: #246c56; --ds-raised: #eee5da; background: #faf6ef; }
.salon-panel { background: #eee5da; padding: 24px 20px; border-radius: 12px; }
.salon-panel > section { margin: 0; }
#reviews.salon-panel, #visit.salon-panel { margin-top: 32px; }
.salon-name { font-size: 36px; letter-spacing: 0.25em; max-width: 800px; }
.salon-name-initial { font-size: 46px; }
@media (max-width: 600px) {
    .salon-panel { padding: 22px 16px; }
    .salon-name { font-size: 26px; letter-spacing: 0.18em; line-height: 1.55; }
    .salon-name-initial { font-size: 34px; }
}

#about > section + section { margin-top: 40px; }

.social-heading { font-family: "Aime", serif; font-size: 21px; font-weight: 400; margin: 0 0 12px; }

/* Google review cards, inspired by Nicole's reference. */
.salon-reviews { margin-top: 36px; }
.review-summary { text-align: center; padding: 8px 0 22px; }
.review-stars { color: #ffc32a; letter-spacing: 2px; font-size: 24px; line-height: 1.3; }
.review-summary p { margin: 8px 0 0; font-size: 15px; }
.review-summary strong { font-size: 23px; margin-right: 5px; }
.review-summary p span { color: var(--ds-ink-2); }
.review-cards { display: grid; gap: 16px; }
.review-card { background: #1c1d1b; color: #faf7f1; border-radius: 18px; padding: 26px 24px 30px; min-width: 0; }
.review-card-header { display: flex; align-items: center; gap: 13px; margin-bottom: 19px; }
.review-avatar { display: grid; place-items: center; background: #725347; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; color: #fff8f0; font-size: 23px; }
.review-card:nth-child(2) .review-avatar { background: #44664f; }
.review-card:nth-child(3) .review-avatar { background: #7b6339; }
.review-card h3 { margin: 0; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.4; color: #faf7f1; }
.review-card-header p { margin: 3px 0 0; font-size: 13px; color: #bdbbb4; }
.review-card blockquote { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: #faf7f1; }
@media (min-width: 900px) { .review-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .review-card { padding: 24px 20px 28px; } }

/* Warm topic panels with ivory space between each one. */
#about > section,
#reviews.salon-reviews > section,
#portfolio > section,
#services > section,
.social-follow {
    background: #eee5da;
    padding: 28px 24px;
    border-radius: 12px;
}
#about > section + section { margin-top: 32px; }
#reviews.salon-reviews, #portfolio, #services { margin-top: 32px; }
.social-follow { border-top: 0; margin-top: 32px; }
.review-cards { gap: 14px; }
@media (max-width: 600px) {
    #about > section,
    #reviews.salon-reviews > section,
    #portfolio > section,
    #services > section,
    .social-follow { padding: 24px 16px; }
    .review-card { padding: 24px 18px 28px; }
}
@media (max-width: 360px) {
    #about .site-facts > div { grid-template-columns: 104px minmax(0, 1fr); }
}

.social-follow nav a { gap: 9px; }
.social-icon { width: 21px; height: 21px; flex: 0 0 21px; }

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-actions .book-button { box-sizing: border-box; min-width: 182px; margin-top: 12px; }

html{scroll-behavior:smooth;background:#faf6ef} body{width:auto;background:#faf6ef}.salon-name{font-weight:400} dialog{max-width:96vw;max-height:94vh;padding:0;border:0;background:#171716;color:white;border-radius:10px}dialog::backdrop{background:rgb(0 0 0/.85)}.lightbox-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px}.lightbox-inner img{max-width:85vw;max-height:76vh;object-fit:contain}.lightbox-tools{display:flex;align-items:center;gap:16px}.lightbox-tools button{min-width:44px;min-height:44px;background:none;border:1px solid #aaa;color:white;border-radius:4px;cursor:pointer}.lightbox-tools p{margin:0}.lightbox-close{align-self:flex-end} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}