/* L'ICÔNE, Kfarchima.
   Type and colour come from the salon itself:
   - Marcellus: flared roman capitals, close to the lettering on the storefront sign (wordmark only)
   - Bodoni Moda: high-contrast fashion serif for headings and prices
   - Alegreya Sans: humanist body text with a calligraphic hand, warmer than a geometric sans
   - Gold: the sign's lettering. Green: the brand colour (the sign itself is not green). Cream: the marble walls and the price card. */
:root {
  --green: #233a2c;
  --green-deep: #182a1f;
  --gold: #b48a46;
  --gold-text: #8a6630;
  --ink: #26231f;
  --muted: #5f584f;
  --cream: #f4ece1;
  --paper: #fcfaf6;
  --rule: #ddd0bc;

  --sign: "Marcellus", "Optima", Georgia, serif;
  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --body: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;

  --page: 1200px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.1875rem/1.55 var(--body); font-variant-numeric: lining-nums; }
/* Alegreya Sans defaults to old-style figures (digits of different heights). Force lining figures everywhere; tabular where numbers stack. */
.menu-group .price, .side li b, .glance dd, .facts dd { font-variant-numeric: lining-nums tabular-nums; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.08; letter-spacing: -.01em; }
/* Cap Bodoni optical size so hairlines (commas, thin strokes) survive at large sizes */
h1, h2, h3, .intro .statement, .intro .number, .menu-group .price, .side li b { font-variation-settings: "opsz" 28; }
.wrap { width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--green); color: #fff; padding: 8px 16px; }

/* Buttons: one solid style, everything else is a text link */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 0 24px; border-radius: 2px;
  background: var(--green); color: var(--cream);
  font: 500 1rem/1 var(--body); text-decoration: none;
  transition: background-color 160ms ease-out;
}
.btn:hover { background: var(--green-deep); }
.btn svg { width: 20px; height: 20px; }
.link { font-weight: 500; color: var(--green); }
.link:hover { color: var(--gold-text); }

/* Header */
.site-header { background: var(--paper); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: 40px; height: 72px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.brand img { width: 30px; height: 38px; }
.brand span { font: 400 1.5rem/1 var(--sign); letter-spacing: .06em; color: var(--green); }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a { text-decoration: none; font-size: .9375rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-text); }
.nav a[aria-current="page"] { text-decoration: underline; }
.nav .btn { min-height: 40px; padding: 0 16px; font-size: .9375rem; color: var(--cream); }
.nav-toggle { display: none; background: none; border: 0; min-width: 44px; min-height: 44px; cursor: pointer; color: var(--green); }
.nav-toggle svg { width: 24px; height: 24px; }
@media (max-width: 920px) {
  .nav-toggle { display: grid; place-items: center; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 24px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; }
  .nav .btn { margin-top: 16px; justify-content: center; min-height: 48px; border: 0; }
}

/* The sign: home page hero, built like the board over their door */
.sign { background: var(--green); color: #d9b878; text-align: center; padding: 64px 0 56px; }
.sign h1 { display: flex; flex-direction: column; align-items: center; }
.sign .wordmark { font: 400 clamp(3.75rem, 12vw, 9rem)/.95 var(--sign); letter-spacing: .05em; margin-right: -.05em; color: #d9b878; }
.sign .sub {
  display: flex; align-items: center; gap: 16px; margin-top: 20px;
  font: 500 clamp(.8125rem, 1.4vw, 1rem)/1.2 var(--body);
  letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase;
}
.sign .sub::before, .sign .sub::after { content: ""; width: clamp(24px, 5vw, 64px); height: 1px; background: currentColor; opacity: .7; }

@media (max-width: 520px) {
  .sign .sub { flex-wrap: wrap; justify-content: center; row-gap: 12px; letter-spacing: .28em; margin-right: -.28em; }
  .sign .sub .dot { display: none; }
  .sign .sub::after { order: 2; }
  .sign .sub .place { order: 3; flex-basis: 100%; }
}
.sign .tagline { text-wrap: balance; font: 400 clamp(1.25rem, 2vw, 1.5rem)/1.3 var(--display); font-variation-settings: "opsz" 28; color: var(--cream); margin: 24px 0 0; }
.sign-cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 32px; }
.btn-gold { background: #d9b878; color: var(--green-deep); }
.btn-gold:hover { background: #e6c98f; }
.sign-link { color: var(--cream); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(217,184,120,.6); text-underline-offset: .3em; }
.sign-link:hover { color: #d9b878; }

.photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.photo-row img { width: 100%; height: clamp(280px, 32vw, 460px); object-fit: cover; }
@media (max-width: 720px) {
  .sign { padding: 48px 0 40px; }
  .photo-row { grid-template-columns: 1fr 1fr; }
  .photo-row img:last-child { display: none; }
  .photo-row img { height: 260px; }
}

/* Intro: what we do, and the three facts people look for */
.intro { padding: 72px 0; border-bottom: 1px solid var(--rule); }
.intro .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
.intro .statement { font: 400 clamp(1.625rem, 3vw, 2.375rem)/1.25 var(--display); margin: 0; max-width: 22em; }
.glance { margin: 0; border-left: 1px solid var(--gold); padding-left: 32px; display: grid; gap: 16px; }
.glance dt { font: 500 .8125rem/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 4px; }
.glance dd { margin: 0; font-size: 1.1875rem; }
@media (max-width: 820px) { .intro { padding: 48px 0; } .intro .wrap { grid-template-columns: 1fr; gap: 32px; } .glance { padding-left: 24px; } }

/* Price card: the printed price list, rebuilt */
.prices-home { padding: 96px 0; }
.card {
  background: var(--cream); padding: clamp(32px, 6vw, 80px);
  outline: 1px solid var(--gold); outline-offset: -12px;
}
.card-title { display: flex; align-items: center; justify-content: center; gap: 20px; font: 400 clamp(1.75rem, 3.4vw, 2.5rem)/1 var(--sign); letter-spacing: .22em; margin: 0 -.22em 48px 0; text-transform: uppercase; color: var(--green); text-align: center; }
.card-title::before, .card-title::after { content: ""; width: clamp(24px, 6vw, 72px); height: 1px; background: var(--gold); }
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; }
.menu-group { margin-bottom: 40px; }
.menu-group h2, .menu-group h3 { font: 500 .875rem/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 16px; }
.menu-group ul { list-style: none; margin: 0; padding: 0; }
.menu-group li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.menu-group .name small { display: block; color: var(--muted); font-size: .8125rem; }
.menu-group .dots { flex: 1; min-width: 16px; border-bottom: 1px dotted #b9a688; transform: translateY(-4px); }
.menu-group .price { font: 400 1.25rem/1 var(--display); white-space: nowrap; }
.menu-group .more { display: inline-block; margin-top: 12px; font-size: .9375rem; }
.card-foot { text-align: center; color: var(--muted); font-size: .9375rem; margin: 8px 0 0; }
@media (max-width: 820px) { .menu { grid-template-columns: 1fr; } .prices-home { padding: 48px 0; } }
@media (max-width: 480px) { .card-title { font-size: 1.5rem; gap: 12px; letter-spacing: .16em; margin-right: -.16em; white-space: nowrap; } .card-title::before, .card-title::after { width: 20px; } }
/* Bodoni dashes are hairlines; draw the range dash in the body font so it stays visible */
.dash { font-family: var(--body); padding: 0 .08em; }

/* Gallery: natural proportions, not a uniform grid */
.work { padding: 0 0 96px; }
.work-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.work-head h2 { font-size: clamp(2.25rem, 4.4vw, 3.25rem); color: var(--green); }
.masonry { columns: 3 280px; column-gap: 16px; }
.masonry figure { margin: 0 0 24px; break-inside: avoid; }
.masonry figcaption { font-size: .9375rem; padding-top: 8px; color: var(--muted); }
.masonry figcaption q { color: var(--ink); quotes: "\201C" "\201D"; }
@media (max-width: 720px) { .work { padding-bottom: 56px; } .masonry { columns: 2; column-gap: 8px; } .masonry figure { margin-bottom: 16px; } }

/* Visit */
.visit { background: var(--cream); padding: 96px 0; }
.visit .wrap { display: grid; grid-template-columns: 400px 1fr; gap: 80px; align-items: center; }
.oval { position: relative; margin: 0; }
.oval img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 50%; }
.oval::after { content: ""; position: absolute; inset: -12px; border: 1px solid var(--gold); border-radius: 50%; pointer-events: none; }
.visit h2 { font-size: clamp(2.25rem, 4.4vw, 3.25rem); color: var(--green); margin-bottom: 16px; }
.visit .opened { font-size: 1.125rem; max-width: 34em; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 12px 32px; margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
.arabic { font-size: 1.125rem; color: var(--muted); margin: 32px 0 0; }
@media (max-width: 900px) { .visit { padding: 56px 0; } .visit .wrap { grid-template-columns: 1fr; gap: 56px; } .oval { width: min(320px, 80%); margin-inline: auto; } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; gap: 4px; } .facts dd { margin-bottom: 12px; } }

/* FAQ */
.faq-section { padding: 96px 0; }
.faq-section .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.faq-section h2 { font-size: clamp(2.25rem, 4.4vw, 3.25rem); color: var(--green); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 500 1.25rem/1.4 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 28px; width: 10px; height: 10px; border-right: 1.5px solid var(--gold-text); border-bottom: 1.5px solid var(--gold-text); transform: rotate(45deg); transition: transform 160ms ease-out; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 32px; }
.faq details p { color: var(--muted); max-width: 40em; padding-bottom: 8px; }
@media (max-width: 820px) { .faq-section { padding: 56px 0; } .faq-section .wrap { grid-template-columns: 1fr; gap: 24px; } }

/* Inner pages */
.page-top { padding: 56px 0 48px; border-bottom: 1px solid var(--rule); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; font-size: .875rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-top h1 { font-size: clamp(2.75rem, 6.4vw, 5rem); color: var(--green); max-width: 12em; margin-bottom: 24px; }
.page-top .lede { font-size: 1.1875rem; color: var(--muted); max-width: 36em; margin: 0; }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; align-items: start; padding: 64px 0 96px; }
.prose { max-width: 65ch; }
.prose h2 { font-size: 2rem; color: var(--green); margin: 48px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 20px; margin: 0 0 24px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--gold); }
.pair { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; margin: 40px 0; align-items: start; }
.pair figure { margin: 0; }
.pair figcaption { font-size: .875rem; color: var(--muted); padding-top: 8px; }

.side { position: sticky; top: 104px; background: var(--cream); padding: 32px; outline: 1px solid var(--gold); outline-offset: -8px; }
.side h2 { font: 500 .875rem/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 16px; }
.side ul { list-style: none; padding: 0; margin: 0 0 24px; }
.side li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: .9375rem; }
.side li .dots { flex: 1; border-bottom: 1px dotted #b9a688; transform: translateY(-4px); }
.side li b { font: 400 1.125rem/1 var(--display); white-space: nowrap; }
.side .btn { width: 100%; justify-content: center; }
.side p { font-size: .875rem; color: var(--muted); margin: 16px 0 0; }
@media (max-width: 920px) { .article { grid-template-columns: 1fr; gap: 48px; padding: 40px 0 56px; } .side { position: static; } }

.prices-page { padding: 56px 0 96px; }
.prices-page .note { color: var(--muted); max-width: 44em; margin: 32px 0; }

.not-found { padding: 120px 0; }
.not-found h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); color: var(--green); margin-bottom: 16px; }
.not-found ul { list-style: none; padding: 0; margin: 32px 0 0; display: flex; gap: 24px; flex-wrap: wrap; }

/* Footer: the sign again, small */
.site-footer { background: var(--green); color: rgba(244,236,225,.8); padding: 56px 0 32px; font-size: .9375rem; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(217,184,120,.3); }
.foot-mark { font: 400 clamp(2.5rem, 6vw, 4rem)/1 var(--sign); letter-spacing: .04em; color: #d9b878; }
.foot-mark small { display: block; font: 500 .75rem/1 var(--body); letter-spacing: .32em; margin-top: 12px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: #d9b878; text-decoration: underline; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: .875rem; }
.foot-base p { margin: 0; }

/* Mobile booking bar */
.book-bar { display: none; }
@media (max-width: 720px) {
  .site-footer { padding-bottom: 88px; }
  .book-bar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 56px;
    background: var(--green); color: var(--cream); text-decoration: none; font-weight: 500;
    border-top: 1px solid rgba(217,184,120,.4);
  }
  .book-bar svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }