/* Local design draft. Add only the owner's approved photograph to this
   variable once its original file is available; no substitute image. */
:root {
  --salon-background-image: url("assets/blonde-hair.jpg");
  --paper: #faf8f4;
  --cream: #eee9e1;
  --ink: #302c26;
  --muted: #655e54;
  --line: #d5c9b5;
  --accent: #80622e;
  --display-font: "New York", "Noto Serif Hebrew", "Times New Roman", serif;
}
body { position: relative; isolation: isolate; background: var(--paper); }
.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(100deg, rgba(250,248,244,.94), rgba(248,245,238,.86)),
    var(--salon-background-image);
  background-position: center, center 38%;
  background-repeat: no-repeat;
  background-size: cover;
}
.header { background: rgba(250,248,244,.94); border-color: var(--line); }
.wordmark span, h1, h2, .service-list h3 { font-family: var(--display-font); }
.wordmark span { font-weight: 400; font-size: 30px; letter-spacing: 0; }
.wordmark small { color: var(--accent); letter-spacing: 1px; }
h1 { font-size: clamp(48px,5.2vw,80px); line-height: 1.16; letter-spacing: -.8px; }
h1 span { color: var(--accent); }
.hero-name { display: block; font-size: .35em; margin-bottom: 24px; color: var(--ink); letter-spacing: 0; }
h2 { letter-spacing: -.5px; line-height: 1.25; }
.eyebrow { color: var(--accent); line-height: 1.7; }
.hero-copy { background: rgba(250,248,244,.42); }
.hero-art { background: linear-gradient(140deg,rgba(255,255,255,.66),rgba(230,223,210,.52)); }
.hero-art:before { opacity: .42; }
.brand-plaque { border-radius: 160px 160px 4px 4px; transform: none; border: 1px solid #c9b98f; box-shadow: 0 24px 60px #77644318, inset 0 0 25px #ffffffaa; }
.orb { opacity: .3; }
.tile-line { opacity: .3; }
.button { color: #302719; border: 1px solid #b29a62; background: linear-gradient(115deg,#dbc991,#f1e5bf 48%,#d3bc7c); border-radius: 2px; box-shadow: inset 0 1px #ffffff99; font-weight: 600; }
.button:hover { background: #e7d6a5; color: #302719; }
.button.outline { background: rgba(250,248,244,.65); border-color: #9b814c; color: var(--ink); }
.button.outline:hover { background: #eee3ca; }
.text-link { border-color: #af9867; }
.ribbon { background: rgba(246,243,237,.68); color: var(--accent); font-size: 14px; }
.ribbon i { color: #96783a; }
.studio, .services, .inspiration, .contact { background: rgba(250,248,244,.36); }
.service-list>div { padding-block: 25px; }
.service-list h3 { font-size: 27px; }
.booking { background: linear-gradient(120deg,rgba(255,254,250,.93),rgba(237,230,215,.89)); }
.salon-photo { border: 1px solid #cebf9f; box-shadow: 0 18px 48px #5c4e3312; }
.salon-photo figcaption { background: #faf8f4f5; }
.intro, .studio-body p, .inspiration-copy p { line-height: 1.95; }
.header nav a { padding-block: 12px; }
.hero-copy, .hero-art, .studio>*, .services>*, .inspiration>*, .contact>* { min-width: 0; }
@media(max-width:900px) {
  h1 { font-size: clamp(40px,5.3vw,60px); }
  .service-list h3 { font-size: 24px; }
}
@media(max-width:600px) {
  .header { height: auto; min-height: 112px; flex-wrap: wrap; padding: 16px 6vw 8px; gap: 12px; }
  .header nav { display: flex; order: 3; width: 100%; justify-content: space-between; gap: 10px; font-size: 13px; }
  .wordmark span { font-size: 27px; }
  .hero-copy { padding: 42px 7vw; }
  h1 { font-size: clamp(38px,10.5vw,58px); letter-spacing: -.4px; line-height: 1.2; }
  .hero-name { font-size: 23px; margin-bottom: 18px; }
  h2 { letter-spacing: -.3px; }
  .hero-art { min-height: 390px; }
  .brand-plaque { width: 220px; }
  .site-backdrop { background-position: center, 54% center; }
  .mobile-book { background: #faf8f4f7; }
  .contact-links a { line-height: 1.7; }
}

.salon-time:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%, 380px); padding: 15px 0; margin: 0 0 25px; border-block: 1px solid var(--line); }
.salon-time strong { display: block; color: var(--accent); font-weight: 500; font-size: 18px; }
#salon-date { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.clock-face { text-align: center; flex-shrink: 0; }
.clock-face time { font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.clock-face small { display: block; font-size: 10px; margin-top: 5px; color: var(--muted); }

/* Approved left-panel photo treatment. Remains empty until the exact owner
   photograph is available; do not replace it with another salon image. */
:root { --hero-owner-photo: url("assets/blonde-hair.jpg"); }
.hero-art { isolation: isolate; }
.hero-photo-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-owner-photo);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 42%;
  opacity: .4;
  pointer-events: none;
}
.hero-photo-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg,rgba(255,253,248,.28),rgba(247,243,232,.12) 50%,rgba(237,229,210,.35));
  pointer-events: none;
}
.hero-art:before { z-index: 1; pointer-events: none; }
.brand-plaque {
  z-index: 2;
  background: linear-gradient(135deg,rgba(255,254,251,.94),rgba(244,239,226,.83));
  box-shadow: 0 28px 48px -15px #65533340,0 6px 14px #65533314,inset 0 1px 2px #fff;
}
.art-caption { z-index: 3; }
@media(max-width:600px) {
  .hero-photo-background { background-position: center 38%; }
  .brand-plaque { box-shadow: 0 20px 35px -12px #65533340,inset 0 1px 2px #fff; }
}

/* Verified against Salonino's public CSS and live-name React component. */
:root { --display-font: Heebo, Arial, sans-serif; }
body { font-family: Heebo, Arial, sans-serif; }
h1, h2, .service-list h3 { font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.wordmark span { font-weight: 600; }
.hero .salon-name-latin { font-family: Limelight, Georgia, serif; font-weight: 400; font-synthesis: none; letter-spacing: 0; font-size: clamp(24px,2.5vw,38px); line-height: 1.2; }
.salon-name-latin span, .salon-name-latin small { display: block; }
.salon-name-latin small { margin-top: 8px; font-size: .6em; line-height: 1.4; }
@media(max-width:600px) { .hero .salon-name-latin { font-size: 28px; letter-spacing: 0; } }

.hero-art .orb, .hero-art .tile-line { display: none; }

/* Header clock: same Israel time logic, only greeting and HH:mm visible. */
.header { gap: 24px; }
.header-time:not([hidden]) { width: auto; flex-shrink: 0; margin: 0; padding: 0; border: 0; gap: 16px; }
.header-time strong { font-size: 15px; white-space: nowrap; }
.header-time time { font-size: 22px; line-height: 1.3; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
@media (min-width:601px) and (max-width:1050px) {
  .header { padding-inline: 4vw; gap: 14px; }
  .header nav { gap: 16px; }
  .header-time:not([hidden]) { flex-direction: column; gap: 2px; }
  .header-time strong { font-size: 13px; }
  .header-time time { font-size: 19px; }
}
@media(max-width:600px) {
  .header { display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; }
  .header .wordmark { justify-self: start; }
  .header>.button.small { grid-column: 2; grid-row: 1; }
  .header nav { grid-column: 1; grid-row: 2; flex-wrap: wrap; justify-content: flex-start; gap: 5px 14px; }
  .header-time:not([hidden]) { grid-column: 2; grid-row: 2; align-items: flex-end; flex-direction: column; gap: 3px; }
  .header-time strong { font-size: 13px; }
  .header-time time { font-size: 19px; }
}

/* A small corner signature keeps the owner's hair work unobstructed. */
.hero-art .brand-plaque {
  position: absolute; top: 28px; left: 28px; width: 142px;
  aspect-ratio: .88; border-radius: 3px;
  background: rgba(252,249,241,.87);
  box-shadow: 0 8px 22px #6553331c,inset 0 1px 1px #fff;
}
@media(max-width:600px) {
  .hero-art .brand-plaque { top: 18px; left: 18px; width: 100px; }
}

/* Owner's original gold mark, without the white plaque. */
.hero-art .brand-plaque {
  width: 118px; aspect-ratio: auto; border: 0; border-radius: 50%;
  background: transparent; box-shadow: 0 5px 15px #65533324;
}
.hero-art .brand-crop { width: 100%; aspect-ratio: auto; mix-blend-mode: normal; border-radius: 50%; }
.hero-art .brand-crop img { position: static; display: block; width: 100%; height: auto; }
.hero-photo-background { opacity: .55; }
.hero-photo-light { background: linear-gradient(135deg,rgba(255,253,248,.2),rgba(247,243,232,.06) 50%,rgba(237,229,210,.25)); }
@media(max-width:600px) { .hero-art .brand-plaque { width: 88px; } }

/* Full-color hero photo; the separate page backdrop remains subdued. */
.hero-photo-background { opacity: 1; }
.hero-photo-light, .hero-art:before { display: none; }

/* Limelight's narrow capital-H strokes are part of the font. Strengthen
   only these two glyphs without substituting or changing brand spelling. */
.salon-name-latin .brand-capital-h { display: inline; -webkit-text-stroke: .65px currentColor; }
.ribbon { font-size: 20px; color: #735624; font-weight: 500; }
@media(max-width:600px) { .ribbon { font-size: 14px; letter-spacing: 2px; gap: 4vw; } }

/* Separate original logo, never layered on the owner's photograph. */
footer > .brand-plaque { position: static; width: 84px; height: auto; aspect-ratio: auto; margin: 0 0 22px auto; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: 0 4px 12px #65533320; }
footer .brand-crop { width: 100%; height: auto; aspect-ratio: auto; border-radius: 50%; overflow: hidden; mix-blend-mode: normal; }
footer .brand-crop img { position: static; display: block; width: 100%; height: auto; transform: none; }
/* A small viewport crop removes more of the left sink; original stays intact. */
.hero-photo-background { left: -7%; background-position: right top; }
/* Limelight H has a hairline right stem (3.76/100 em), while h has a
   21/100 em stem. This explicit capital preserves H and matches that stem. */
.salon-name-latin .brand-capital-h { display: inline-block; width: .76em; height: .70em; overflow: visible; vertical-align: -.005em; fill: currentColor; -webkit-text-stroke: 0; }
@media(max-width:600px) {
 footer > .brand-plaque { width: 66px; margin-bottom: 18px; }
 .hero-photo-background { background-position: right top; }
}

/* Portrait frame follows the original ratio after a 7% left-edge crop. */
.hero-art { aspect-ratio: .70; min-height: 0; }
.hero-photo-background { filter: none; opacity: 1; }
@media(max-width:600px) { .hero-art { width: 100%; min-height: 0; flex: none; } }

/* The owner mark closes the page on the physical left in normal flow. */
footer { gap: 24px; }
footer > .brand-plaque { flex: 0 0 84px; margin: 0; }
.hero .salon-name-latin { font-size: clamp(27px,2.8vw,42px); margin-bottom: 105px; }
@media(max-width:600px) {
 footer { display: grid; grid-template-columns: 1fr auto; }
 footer > .wordmark { grid-column: 1; grid-row: 1; }
 footer > a:not(.wordmark) { grid-column: 1; grid-row: 2; justify-self: start; }
 footer > span { grid-column: 1 / -1; grid-row: 3; }
 footer > .brand-plaque { grid-column: 2; grid-row: 1 / 3; width: 66px; margin: 0; }
 .hero .salon-name-latin { font-size: 31px; margin-bottom: 40px; }
}

footer > a:not(.wordmark) { font-size: 12px; white-space: nowrap; }

/* Shared upper-left signature: full original asset in a square gold frame. */
.header > .brand-plaque { position: static; flex: 0 0 68px; width: 68px; height: 68px; aspect-ratio: 1; padding: 3px; margin: 0; border: 1px solid #b79a54; border-radius: 0; background: #fffdf8; box-shadow: 0 2px 8px #65533312; }
.header .brand-crop { position: static; width: 100%; height: 100%; aspect-ratio: 1; border-radius: 0; overflow: visible; mix-blend-mode: normal; }
.header .brand-crop img { position: static; display: block; width: 100%; height: 100%; object-fit: contain; transform: none; }
@media(min-width:601px) and (max-width:1050px) { .header { gap: 12px; } .header > .brand-plaque { flex-basis: 54px; width: 54px; height: 54px; } }
@media(max-width:600px) {
 .header > .brand-plaque { grid-column: 2; grid-row: 1; width: 58px; height: 58px; justify-self: end; }
 .header > .button.small { grid-column: 1; grid-row: 2; justify-self: start; }
 .header-time:not([hidden]) { grid-column: 2; grid-row: 2; }
 .header nav { grid-column: 1 / -1; grid-row: 3; }
}

/* Larger approved English identity; mobile stays within its text column. */
.hero .salon-name-latin { font-size: clamp(32px,5.2vw,80px); }
@media(max-width:600px) { .hero .salon-name-latin { font-size: clamp(32px,9.5vw,40px); } }

/* Subtle photographic depth, with the source pixels untouched. */
.hero-art { z-index: 1; outline: 1px solid rgba(255,255,255,.65); outline-offset: -1px; box-shadow: 12px 16px 32px -19px rgba(65,48,31,.42), 0 3px 8px rgba(65,48,31,.08); }
@media(max-width:600px) { .hero-art { box-shadow: 0 12px 24px -15px rgba(65,48,31,.40), 0 2px 6px rgba(65,48,31,.07); } }

/* The white rim came from CSS padding/background, not the original logo. */
.header > .brand-plaque { padding: 0; background: #d9b654; position: relative; left: calc(16px - 6vw); top: -4px; }
@media(min-width:601px) and (max-width:1050px) { .header > .brand-plaque { left: calc(16px - 4vw); top: 0; } }
@media(max-width:600px) { .header > .brand-plaque { left: calc(12px - 6vw); top: -4px; } }

.contact-page { min-height: calc(100vh - 260px); display: grid; align-items: center; }
.contact-page .contact { width: 100%; }

/* A slightly raised print effect adds depth without altering the hair. */
.hero-art { box-shadow: 6px 7px 0 rgba(173,146,91,.16), 14px 19px 30px -12px rgba(65,48,31,.32); }
@media(max-width:600px) { .hero-art { box-shadow: 0 6px 0 rgba(173,146,91,.15), 0 17px 25px -11px rgba(65,48,31,.30); } }
.contact-page { align-items: start; }

/* A soft light sweep behind the identity and introduction, then a long pause. */
.hero-copy { position: relative; overflow: hidden; isolation: isolate; }
.hero-copy > * { position: relative; z-index: 1; }
.hero-copy::before { content: ""; position: absolute; inset: -15% -40%; pointer-events: none; background: linear-gradient(110deg,transparent 43%,rgba(255,253,240,.32) 49%,rgba(232,207,154,.09) 52%,transparent 58%); transform: translateX(-110%); animation: salon-sheen 12s ease-in-out infinite; }
@keyframes salon-sheen { 0%,72% { transform: translateX(-110%); } 92%,100% { transform: translateX(110%); } }
@media(prefers-reduced-motion:reduce) { .hero-copy::before { display: none; animation: none; } }

/* A quiet information block next to the salon services. */
.hair-donation { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 48px; background: rgba(246,242,233,.78); border-block: 1px solid var(--line); }
.hair-donation h2 { font-size: clamp(25px,2.5vw,36px); margin: 0 0 14px; color: var(--accent); }
.hair-donation p { margin: 0; line-height: 1.9; color: var(--muted); }
.hair-donation > .text-link { flex-shrink: 0; }
@media(max-width:600px) { .hair-donation { align-items: flex-start; flex-direction: column; gap: 20px; padding-block: 34px; } }

/* Media gallery stays in the approved portrait frame. */
.gallery-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.gallery-slide.is-active { opacity: 1; z-index: 1; }
.gallery-slide.is-outgoing { opacity: 1; z-index: 0; }
.gallery-slide img, .gallery-slide video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.gallery-slide:first-child img { width: 107%; max-width: none; margin-left: -7%; }
.gallery-slide video { object-fit: contain; background: #eee9e1; }
.gallery-controls { position: absolute; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px; background: rgba(250,248,244,.95); color: #493918; border: 1px solid #b79a54; box-shadow: 0 3px 12px #30271920; }
.gallery-controls[hidden], .gallery-play[hidden] { display: none; }
.gallery-controls button, .gallery-play { font: inherit; color: #493918; background: transparent; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; padding: 8px 12px; }
.gallery-controls button:hover { background: #eee3ca; }
.gallery-controls button:focus-visible, .gallery-play:focus-visible { outline: 2px solid #80622e; outline-offset: 1px; }
.gallery-status { font-size: 12px; min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.gallery-play { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #faf8f4f0; border: 1px solid #b79a54; white-space: nowrap; }
@media(prefers-reduced-motion:reduce) { .gallery-slide { transition: none; } }

/* A fine gold edge keeps the media unobstructed. */
.hero-gallery { outline: 1px solid #b59654; outline-offset: 0; }
html { scrollbar-gutter: stable; }
/* Shared navigation includes the separate portfolio page. */
.header nav { flex-wrap: wrap; }
.header nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
/* Fine double gold frame, with an open gap outside the photograph. */
.hero-gallery { border: 1px solid #b59654; outline: 1px solid rgba(181,150,84,.7); outline-offset: -6px; }
.hero .salon-name-latin, .hero #hero-title { text-shadow: 0 1px 0 #fffdf8, 1px 2px 0 rgba(114,87,44,.10), 0 6px 12px rgba(72,53,30,.13); }
.hero .brand-capital-h { filter: drop-shadow(1px 2px 1px rgba(72,53,30,.13)); }
/* Keep the full Hebrew name together above the salon descriptor. */
.header .wordmark { flex-shrink: 0; }
.header .wordmark span { white-space: nowrap; }
.header nav { min-width: 0; }
/* Three clear destinations in the shared navigation. */
.header nav { gap: 8px 18px; }
.header nav a { white-space: nowrap; border-bottom: 1px solid transparent; }
.header nav a:hover, .header nav a:focus-visible { border-bottom-color: #b59654; }
.header nav [aria-current="page"] { color: var(--accent); border-bottom-color: #b59654; text-decoration: none; }
@media(max-width:600px) { .header nav { justify-content: space-between; gap: 4px 12px; } }
@media(min-width:601px) and (max-width:1050px) { .header { flex-wrap: wrap; height: auto; min-height: 100px; padding-block: 12px; } .header nav { order: 3; flex-basis: 100%; justify-content: center; } }
/* Clear booking action with a quiet directional arrow. */
.header > .button.small { font-size: 16px; font-weight: 700; gap: 12px; min-height: 46px; }
.booking-arrow { flex-shrink: 0; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-gallery:focus-visible { outline: 2px solid #80622e; outline-offset: 5px; }
.gallery-controls { gap: 16px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.gallery-controls button { background: rgba(250,248,244,.95); border: 1px solid #b79a54; border-radius: 50%; width: 44px; height: 44px; padding: 0; font-size: 22px; }
/* Slightly larger original corner logo; retain its existing edge alignment. */
.header > .brand-plaque { flex-basis: 76px; width: 76px; height: 76px; }
@media(min-width:601px) and (max-width:1050px) { .header > .brand-plaque { flex-basis: 60px; width: 60px; height: 60px; } }
@media(max-width:600px) { .header > .brand-plaque { width: 65px; height: 65px; } }
@media(max-width:600px) { .ribbon { gap: clamp(2px,1vw,6px); } }
/* Four clear links replace the decorative ribbon words. */
.ribbon { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 24px 6vw; }
.ribbon a { display: flex; justify-content: center; align-items: center; min-height: 58px; padding: 12px 8px; border: 1px solid rgba(181,150,84,.55); background: rgba(250,248,244,.64); text-align: center; }
.ribbon a[lang="he"] { font-family: Heebo,Arial,sans-serif; letter-spacing: 0; }
.ribbon a:hover { background: #eee3ca; }
.ribbon a:focus-visible { outline: 2px solid #80622e; outline-offset: 3px; }
.contact-social { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; border-top: 1px solid var(--line); padding-block: 48px; }
.contact-social h2 { margin: 0; font-size: clamp(28px,3vw,40px); }
.social-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: start; }
#social,#contact { scroll-margin-top: 24px; }
@media(max-width:600px) { .ribbon { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 20px 6vw; } .ribbon a { min-height: 52px; } .contact-social { grid-template-columns: 1fr; gap: 24px; padding-block: 34px; } }
.contact-page { display: block; min-height: 0; }
/* Gold salon emblem on cream marble, feathered into the page. */
.header > .brand-plaque { border:0; background:transparent; box-shadow:none; }
.header .brand-crop { position:relative; }
.header .brand-crop img {
 -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent), radial-gradient(ellipse farthest-corner at center, #000 69%, transparent 100%);
 -webkit-mask-composite: source-in;
 mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent), radial-gradient(ellipse farthest-corner at center, #000 69%, transparent 100%);
 mask-composite: intersect;
}

/* Couture-inspired signature: local serif, champagne gold and fine rules. */
.hero .salon-name-latin { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; font-family: 'Salon Roman', Georgia, serif; font-size: clamp(44px,6.2vw,94px); line-height: 1.12; letter-spacing: 0; color: #80602e; text-shadow: none; }
.hero .salon-name-latin .salon-signature { display: block; white-space: nowrap; font-weight: 400; letter-spacing: -.045em; padding: .08em .05em .13em; color: #80602e; background: linear-gradient(115deg,#654720 0%,#a88749 28%,#705024 48%,#b08d4d 70%,#715026 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .salon-name-latin small { display: block; width: 100%; margin-top: 7px; padding: 14px 8px 12px; border-top: 1px solid #a98b535e; border-bottom: 1px solid #a98b533d; font-family: Heebo, Arial, sans-serif; font-size: clamp(10px,1vw,14px); font-weight: 400; line-height: 1.5; letter-spacing: .25em; text-transform: uppercase; color: #705b39; }
@media(max-width:600px) { .hero .salon-name-latin { font-size: clamp(44px,13vw,72px); margin-bottom: 40px; } .hero .salon-name-latin small { font-size: 10px; letter-spacing: .2em; padding-block: 11px; } }

/* English signature left, emblem right, with Hebrew identity in the hero. */
.header { display:grid; grid-template-columns:76px minmax(0,1fr) auto auto 230px; gap:24px; height:auto; min-height:112px; padding:12px 3vw; }
.header > .brand-plaque { grid-column:1; grid-row:1; position:static; justify-self:start; width:76px; height:76px; }
.header nav { grid-column:2; grid-row:1; justify-content:center; }
.header-time:not([hidden]) { grid-column:3; grid-row:1; flex-direction:column; gap:2px; }
.header > .button.small { grid-column:4; grid-row:1; }
.header .header-signature { grid-column:5; grid-row:1; justify-self:end; display:flex; flex-direction:column; align-items:center; width:230px; }
.header .header-signature span { font-family:'Salon Roman',Georgia,serif; font-size:46px; font-weight:400; line-height:1.1; letter-spacing:-.045em; color:#80602e; background:linear-gradient(115deg,#654720,#a88749 28%,#705024 48%,#b08d4d 70%,#715026); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.header .header-signature small { width:100%; text-align:center; font-family:Heebo,Arial,sans-serif; font-size:10px; line-height:1.5; letter-spacing:.18em; text-transform:uppercase; color:#705b39; margin-top:7px; padding:8px 0; border-block:1px solid #a98b535e; }
.hero .salon-name-hebrew { display:inline-flex; flex-direction:column; align-items:center; max-width:100%; margin:0 0 85px; color:#80602e; }
.salon-name-hebrew > span { font-family:Heebo,Arial,sans-serif; font-size:clamp(42px,4.8vw,72px); line-height:1.2; font-weight:400; }
.salon-name-hebrew small { width:100%; text-align:center; font-size:22px; line-height:1.5; margin-top:14px; padding:10px 20px; border-block:1px solid #a98b535e; }
@media(max-width:1100px) {
 .header { grid-template-columns:1fr 1fr; gap:12px 20px; padding:14px 5vw; }
 .header > .brand-plaque { grid-column:1; grid-row:1; width:76px; height:76px; }
 .header .header-signature { grid-column:2; grid-row:1; width:210px; }
 .header .header-signature span { font-size:42px; }
 .header > .button.small { grid-column:1; grid-row:2; justify-self:start; }
 .header-time:not([hidden]) { grid-column:2; grid-row:2; justify-self:end; }
 .header nav { grid-column:1 / -1; grid-row:3; justify-content:center; }
}
@media(max-width:600px) {
 .header { padding-inline:6vw; }
 .header > .brand-plaque { width:65px; height:65px; }
 .header .header-signature { width:190px; }
 .header .header-signature span { font-size:38px; }
 .header .header-signature small { font-size:8px; letter-spacing:.16em; padding-block:6px; }
 .header nav { justify-content:space-between; }
 .hero .salon-name-hebrew { margin-bottom:40px; }
 .salon-name-hebrew > span { font-size:clamp(40px,11vw,54px); }
 .salon-name-hebrew small { font-size:19px; }
}
@media(max-width:600px) {
 .header { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .header > .button.small { white-space:nowrap; font-size:14px; gap:8px; padding-inline:14px; width:max-content; }
}

/* One continuous marble header beneath the transparent gold emblem. */
.header { background:#faf7f0 url('assets/header-cream-marble.png') center / cover no-repeat; }
.header .brand-crop img { -webkit-mask-image:none; mask-image:none; }
.header .header-signature span { color:#94701e; background-image:linear-gradient(115deg,#785318 0%,#b68a29 24%,#d4ad50 39%,#a77a21 52%,#e5c574 65%,#8b601a 85%,#b48b34 100%); filter:drop-shadow(0 1px 0 #fff8d9); }
.header .header-signature small { color:#957126; border-color:#b99a5166; }
/* Pale marble veining: a quiet texture, with the hair photograph still visible. */
.header {
 background-image:linear-gradient(rgba(250,248,244,.86),rgba(250,248,244,.86)),url('assets/header-cream-marble.png');
 background-position:center;
 background-size:cover;
}
.hero-copy::after {
 content:"";
 position:absolute;
 inset:0;
 z-index:0;
 pointer-events:none;
 background:url('assets/header-cream-marble.png') center / cover no-repeat;
 opacity:.14;
 mix-blend-mode:multiply;
}
/* Carry the same restrained cream marble through every page. */
.site-backdrop::after {
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 background:url('assets/header-cream-marble.png') center / cover no-repeat;
 opacity:.24;
 mix-blend-mode:multiply;
}
.hero-copy::after { content:none; }
.header { background-image:linear-gradient(rgba(250,248,244,.73),rgba(250,248,244,.73)),url('assets/header-cream-marble.png'); }

/* Matching jewelry frames and booking calendar. */
.booking-calendar { flex-shrink:0; color:#94691e; filter:drop-shadow(0 1px 0 #fff4cb); }
.button.outline .booking-calendar { color:#987025; }
.ribbon { grid-auto-rows:1fr; align-items:stretch; }
.ribbon a { position:relative; isolation:isolate; overflow:hidden; width:100%; height:100%; min-width:0; min-height:52px; padding:8px; border:2px solid transparent; background:linear-gradient(125deg,#fffdf8,#f2ebdf) padding-box,linear-gradient(125deg,#9e742a 0%,#f8e5a5 19%,#b38a39 42%,#fff1bf 61%,#bb903e 79%,#f5daa0 100%) border-box; box-shadow:inset 0 0 0 1px #fffaf1,0 2px 7px #8263291c; letter-spacing:0; }
.ribbon a::after { content:""; pointer-events:none; position:absolute; inset:-50%; background:linear-gradient(115deg,transparent 43%,#ffffffa8 50%,transparent 57%); transform:translateX(-100%); transition:transform .9s ease; }
.ribbon a:hover,.ribbon a:focus-visible { background:linear-gradient(125deg,#fffdf8,#eee2cd) padding-box,linear-gradient(125deg,#a57d2d,#ffedb6,#b98a31,#fff3c5,#b58a36) border-box; }
.ribbon a:hover::after,.ribbon a:focus-visible::after { transform:translateX(100%); }
@media(max-width:600px) { .ribbon a { min-height:48px; } }
@media(prefers-reduced-motion:reduce) { .ribbon a::after { transition:none; } }

/* A quieter header emblem, preserving the original gold artwork. */
.header .brand-crop img { transform:scale(1.04); transform-origin:center; opacity:1; filter:none; }

/* A welcoming greeting, a quieter typographic clock, and compact primary links. */
.header-time strong { font-size:18px; line-height:1.4; font-weight:500; }
.header-time time { font-family:'Salon Roman',Georgia,serif; font-size:20px; font-weight:400; line-height:1.25; letter-spacing:.03em; font-variant-numeric:lining-nums tabular-nums; color:#80602e; min-width:5ch; text-align:center; }
.header-time:not([hidden]) { gap:3px; }
.ribbon { padding:18px 10vw; font-size:17px; }
.ribbon a { min-height:46px; padding:6px 8px; }
@media(max-width:600px) {
 .header-time strong { font-size:16px; }
 .header-time time { font-size:18px; }
 .ribbon { padding:14px 6vw; font-size:14px; }
 .ribbon a { min-height:44px; }
}

/* Service rows lead directly to the matching portfolio category. */
.service-list > a { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; min-height:72px; padding:23px 14px; border-bottom:1px solid var(--line); transition:background .25s,box-shadow .25s,color .25s; }
.service-list > a::after { content:""; position:absolute; pointer-events:none; inset:-60%; background:linear-gradient(115deg,transparent 43%,#fff9e8b3 50%,transparent 57%); transform:translateX(-100%); transition:transform .85s ease; }
.service-list > a:hover,.service-list > a:focus-visible { color:#80602e; background:linear-gradient(110deg,#f9f0ddcc,#e9d49d88); box-shadow:inset 0 0 0 1px #b99a5166,0 3px 12px #9e7b2220; }
.service-list > a:hover::after,.service-list > a:focus-visible::after { transform:translateX(100%); }
.service-list > a:focus-visible { outline:2px solid #987025; outline-offset:3px; }
.gallery-categories { scroll-margin-top:24px; }
@media(prefers-reduced-motion:reduce) { .service-list > a,.service-list > a::after { transition:none; } }

/* Five equal compact navigation links. */
.ribbon { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:700px) { .ribbon { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.contact-icon{display:inline-block;flex-shrink:0;vertical-align:middle}.contact-phone{display:inline-flex;align-items:center;gap:12px}.contact-phone .contact-icon{width:23px;height:23px;color:var(--accent)}.ribbon .gallery-nav{font-size:19px;font-weight:500}@media(max-width:600px){.ribbon .gallery-nav{font-size:16px}}

/* Three matching gold social links beneath the contact heading. */
.contact-brand-links{display:flex;gap:15px;flex-wrap:wrap;margin-top:28px;scroll-margin-top:150px}
.contact-brand-links a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:76px;min-height:80px;border:1px solid #c6aa6c;border-radius:14px;background:linear-gradient(135deg,#fffdf8cc,#f1e6cf99);color:#96702e;box-shadow:inset 0 1px 1px #fff;transition:transform .2s,box-shadow .2s}
.contact-brand-links svg{width:27px;height:27px}.contact-brand-links span{font-size:11px;letter-spacing:.03em}
.contact-brand-links a:hover,.contact-brand-links a:focus-visible{transform:translateY(-2px);box-shadow:0 5px 15px #ad89482b;outline:2px solid #d4b675;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.contact-brand-links a{transition:none}}

/* A brief light reflection on the gold, with a long quiet interval. */
.header .brand-crop::after{content:"";position:absolute;inset:0;pointer-events:none;transform:scale(1.04);-webkit-mask:url('assets/logo-gold-smooth.png') center/contain no-repeat;mask:url('assets/logo-gold-smooth.png') center/contain no-repeat;background:linear-gradient(110deg,transparent 44%,#fff9d9e0 50%,transparent 56%) 150% 0/300% 100%;animation:gold-glint 12s ease-in-out infinite}
.header-signature [data-shine]{position:relative}
.header .header-signature [data-shine]::after{content:attr(data-shine);position:absolute;inset:0;pointer-events:none;color:transparent;background:linear-gradient(110deg,transparent 44%,#fff9d9d9 50%,transparent 56%) 150% 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gold-glint 12s ease-in-out 1.5s infinite}
.header .header-signature small::after{padding:inherit}
@keyframes gold-glint{0%,78%{background-position:150% 0;opacity:0}79%{opacity:1}93%{background-position:-50% 0;opacity:1}94%,100%{background-position:-50% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){.header .brand-crop::after,.header .header-signature [data-shine]::after{animation:none;display:none}}

/* Keep the hero clean when a browser blocks automatic video playback. */
.hero-gallery .gallery-slide video{position:absolute;inset:0;visibility:hidden}
.hero-gallery .gallery-slide video.is-playing{visibility:visible}
.hero-gallery .gallery-video-poster{object-fit:contain;background:#eee9e1}
.hero-gallery video::-webkit-media-controls,.hero-gallery video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}

/* A shared on-page watermark automatically covers future gallery items. */
.branded-photo,.viewer-media{position:relative}
.work-card::after,.branded-photo::after,.viewer-media::after{content:"";position:absolute;left:12px;bottom:12px;width:clamp(32px,5vw,54px);aspect-ratio:1;background:url('assets/logo-gold-smooth.png') center/contain no-repeat;opacity:.76;filter:drop-shadow(0 1px 2px #fff9) drop-shadow(0 1px 2px #0008);pointer-events:none;z-index:3}

.work-card:has(video)::after{bottom:58px}
.viewer-media::after{left:22px;bottom:22px;width:58px}

#hero-title .hero-shine{position:relative;display:inline-block}
#hero-title .line-primary{color:inherit}
#hero-title .hero-shine::after{content:attr(data-shine);position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 44%,#efd8a69e 50%,transparent 56%) 150% 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gold-glint 14s ease-in-out 3s infinite}
@media(prefers-reduced-motion:reduce){#hero-title .hero-shine::after{animation:none;display:none}}
/* Translucent carousel arrows blend into the photograph. */
.hero-gallery .gallery-controls button{background:rgba(250,248,244,.34);border:1px solid rgba(255,248,223,.48);color:#54452e;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 1px 5px #30271914;transition:background .2s,border-color .2s}
.hero-gallery .gallery-controls button:hover,.hero-gallery .gallery-controls button:focus-visible{background:rgba(250,248,244,.78);border-color:#b79a54}

/* Fine gold scissors point toward the carousel's previous and next slides. */
.hero-gallery .gallery-controls button{display:grid;place-items:center;width:46px;height:46px;color:#80612a;background:rgba(255,251,242,.25);border-color:rgba(232,215,176,.45)}
.scissor-arrow{filter:drop-shadow(0 1px 1px #fff9);transition:transform .2s ease}
.gallery-controls button:hover .scissor-arrow{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){.scissor-arrow{transition:none}}

/* Ivory lettering carved into the cream marble surface. */
.hero #hero-title{color:#d6cbb7;text-shadow:none}
#hero-title .hero-shine,#hero-title .line-primary{color:#d6cbb7;background:linear-gradient(165deg,#fffdf5 5%,#e0d4bd 30%,#b9aa8c 72%,#eee6d7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 -1px 0 rgba(153,135,100,.55)) drop-shadow(0 1px 0 #fff) drop-shadow(0 3px 2px rgba(170,152,118,.32))}
#hero-title .hero-shine::after{background-image:linear-gradient(110deg,transparent 44%,rgba(255,255,250,.9) 50%,transparent 56%)}

/* Widely spaced, delicate carousel navigation. */
.hero-gallery .gallery-controls{left:50%;right:auto;width:180px;max-width:calc(100% - 32px);bottom:18px;transform:translateX(-50%);justify-content:space-between;pointer-events:none}
.hero-gallery .gallery-controls button{width:46px;height:46px;pointer-events:auto;background:rgba(255,251,242,.10);border-color:rgba(232,215,176,.22);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);box-shadow:none}
.hero-gallery .scissor-arrow{width:28px;height:28px;stroke-width:1.25}
.hero-gallery .gallery-controls button:hover,.hero-gallery .gallery-controls button:focus-visible{background:rgba(255,251,242,.28);border-color:rgba(232,215,176,.5)}
@media(max-width:600px){.hero-gallery .gallery-controls{left:50%;right:auto;bottom:14px}}

.header .header-signature > span{letter-spacing:-.02em}

/* A soft ivory highlight fades in, crosses the lettering and fades away. */
#hero-title .hero-shine::after{background-image:linear-gradient(110deg,transparent 32%,rgba(255,255,253,.55) 42%,#fffefa 50%,rgba(255,255,253,.55) 58%,transparent 68%);animation:ivory-title-fade 7s ease-in-out infinite}
@keyframes ivory-title-fade{0%,15%{background-position:150% 0;opacity:0}30%{opacity:1}62%{background-position:-50% 0;opacity:1}78%,100%{background-position:-50% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){#hero-title .hero-shine::after{animation:none;display:none}}

/* Clearer hero typography and tighter opening spacing. */
.hero #hero-title{color:#806538;text-shadow:0 1px 1px rgba(255,255,255,.55)}
#hero-title .hero-shine,#hero-title .line-primary{color:#806538;background:linear-gradient(165deg,#927443 0%,#76592f 65%,#8b6d3c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:none}
#hero-title .hero-shine::after{opacity:.24}
.hero{min-height:0}
.hero-copy{padding:56px 6vw 44px 4vw}
.hero .salon-name-hebrew{margin-bottom:42px}
.hero #hero-title{margin-bottom:22px}
@media(min-width:601px){.hero-art{aspect-ratio:.82}}
@media(max-width:600px){
 .hero-copy{padding:28px 7vw 30px}
 .hero .salon-name-hebrew{margin-bottom:24px}
 .salon-name-hebrew small{margin-top:8px;padding-block:7px}
 .hero #hero-title{margin-bottom:20px}
 .hero-copy>.text-link{margin-top:16px}
}

/* Compact booking frame below the RL mark. */
.header > .button.small{min-height:44px;padding:8px 14px;font-size:14px;gap:8px;width:max-content;justify-self:start}
.header > .button.small .booking-calendar{width:19px;height:19px}
@media(max-width:600px){.header > .button.small{font-size:13px;padding-inline:12px;gap:7px}}

.video-warm-tone{filter:saturate(1.05) sepia(.025) brightness(.99)}

.donation-heading{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.donation-heading h2{margin:0}
.donation-logo-link{display:block;flex-shrink:0}
.donation-logo{display:block;width:70px;height:auto}
@media(max-width:600px){.donation-heading{gap:14px}.donation-logo{width:58px}}

.header > .brand-plaque{transform:translateY(-7px)}
.donation-details-page{min-height:65vh;padding-block:56px}
.donation-details-card{max-width:850px;margin-inline:auto;padding:clamp(24px,4vw,48px);border:1px solid #c1a365;background:#faf8f2d9;box-shadow:0 16px 40px -30px #49391880}
.donation-details-title{display:flex;gap:24px;align-items:center;margin-bottom:28px}
.donation-details-title>img{width:80px;height:auto;flex-shrink:0}
.donation-details-title .eyebrow{margin-bottom:12px}
.donation-details-title h1{font-size:clamp(26px,3.2vw,40px);line-height:1.4;letter-spacing:0;margin:0;color:var(--accent)}
.donation-explanation p{font-size:17px;line-height:1.9;color:var(--muted);margin:0 0 14px}
.donation-explanation strong{color:var(--ink)}
.donation-details-actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:30px}
.donation-details-actions .button{gap:14px;flex-wrap:wrap}
.donation-source{display:inline-block;margin-top:28px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.donation-details-page{padding-block:32px}.donation-details-title{gap:16px}.donation-details-title>img{width:58px}.donation-explanation p{font-size:16px}}

/* Owner-confirmed opening hours, 14 October 2026. */
.opening-hours dl{margin:10px 0 0;display:grid;gap:10px}.opening-hours dl>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;max-width:420px}.opening-hours dt{font-weight:400}.opening-hours dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink,#292620)}