:root { --accent:#ccaa67; --ink:#182433; --paper:#f7f5f0; --muted:#66717c}
* { box-sizing:border-box}
html { scroll-behavior:smooth; scroll-padding-top:24px}
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,sans-serif; line-height:1.7}
a { color:inherit; text-decoration:none}
img { display:block; max-width:100%}
svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
a:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px}
.container { width:min(1160px,calc(100% - 64px)); margin:auto}
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 5%; direction:ltr}
.brand { display:flex; align-items:center; gap:12px; font-family:Georgia,serif; font-size:32px; line-height:1.2}
.brand svg { width:42px; height:42px; color:var(--accent)}
.brand small { display:block; font-family:Arial,sans-serif; font-size:12px; letter-spacing:2px; text-align:center}
.site-nav { display:flex; gap:28px; direction:rtl; font-size:15px}
.site-nav a:hover { color:var(--accent)}
.cta-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:14px 28px; background:var(--accent); color:white; font-size:18px; font-weight:700; border-radius:50px; direction:rtl}
.cta-button svg { width:23px; height:23px}
.hero { display:grid; grid-template-columns:1fr 1fr; direction:ltr; position:relative; min-height:640px; overflow:hidden}
.hero-copy { position:relative; z-index:1; direction:rtl; text-align:center; padding:65px 9% 45px; display:flex; flex-direction:column; justify-content:center; align-items:center}
.hero h1 { font-size:clamp(40px,4.6vw,68px); line-height:1.15; margin:0 0 22px; letter-spacing:-1.8px}
.accent { color:var(--accent)}
.hero-description { font-size:21px; line-height:1.6; margin:0 0 30px; max-width:530px}
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-media { position:relative; min-width:0; min-height:570px}
.hero-media:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to right,var(--paper),transparent 30%)}
.eyebrow { display:inline-block; border-radius:30px; background:#ffffffaa; color:var(--accent); padding:5px 18px; margin:0 0 24px; font-size:17px}
.hand-note { position:absolute; bottom:13%; right:10%; color:white; font-size:27px; font-style:italic; line-height:1.4; text-align:center; transform:rotate(-8deg); text-shadow:0 2px 10px #0007; z-index:1}
.hero-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; width:100%; margin:0 0 32px}
.hero-benefits p { font-size:14px; line-height:1.4; margin:8px 0 0}
.hero-benefits svg { color:var(--accent)}
.section { padding:76px 0}
.section-heading { text-align:center; margin-bottom:38px}
.section-heading h2 { font-size:36px; line-height:1.2; margin:0 0 14px}
.section-heading p { color:var(--muted); margin:0; font-size:18px}
.card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.service-card { background:white; border:1px solid #18243312; padding:28px 22px; border-radius:16px; min-width:0}
.service-card svg { color:var(--accent); width:42px; height:42px}
.service-card h3 { font-size:21px; margin:14px 0 8px}
.service-card p { color:var(--muted); margin:0}
.split-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px}
.split-section h2 { font-size:38px; line-height:1.25; margin:12px 0 22px}
.split-section p { font-size:19px; color:var(--muted)}
.split-section img { width:100%; height:390px; object-fit:cover; border-radius:20px}
.testimonial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.testimonial { padding:30px; border-radius:16px; background:white; border:1px solid #18243312}
.testimonial p { font-size:18px}
.testimonial .stars { color:var(--accent); letter-spacing:3px}
.testimonial small { color:var(--muted)}
.contact-section { text-align:center; padding:70px 24px; background:var(--ink); color:white}
.contact-section h2 { font-size:38px; line-height:1.25; margin:0 0 18px}
.contact-section p { font-size:20px; margin:0 auto 26px; max-width:620px}
.contact-section .note { font-size:14px; opacity:.7; margin:20px auto 0}
.site-footer { padding:28px 5%; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:14px}
.site-footer p { margin:0}
.trust-strip { padding:28px 0; background:#edf0f3}
.trust-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); align-items:center; gap:24px}
.trust-grid p { margin:0}
.trust-grid strong { display:block; font-size:32px; color:var(--ink)}
.trust-item { text-align:center; font-size:14px}
.trust-item svg { color:var(--accent)}
.law { --paper:#101c2a; --ink:#152334; --muted:#647082}
.law .site-header { background:#101c2a; color:white}
.law .hero { color:white}
.law .hero-copy { grid-column:2; grid-row:1}
.law .hero-media { grid-column:1; grid-row:1}
.law .hero-media:after { background:linear-gradient(to left,#101c2a,transparent 30%)}
.law .hero-copy { padding-top:50px}
.law .hero-description { color:#d0d5db}
.law .cta-button { color:#152334; border-radius:4px}
.law .hero-benefits { margin-top:40px; margin-bottom:0}
.law .light-section { background:#f6f7f9}
.law .about-section { background:white}
.restaurant { --accent:#df702f; --ink:#352a25; --paper:#fffaf3; --muted:#796c61}
.restaurant .hero { grid-template-columns:1.1fr 1fr}
.restaurant .hero-copy { grid-column:2; grid-row:1; padding-inline:8%}
.restaurant .hero-media { grid-column:1; grid-row:1}
.restaurant .hero-media:after { background:linear-gradient(to left,var(--paper),transparent 30%)}
.restaurant .hero-benefits svg { color:#766254}
.restaurant .hero h1 { font-size:clamp(42px,4.8vw,72px)}
.menu-card { background:white; padding:30px; border-radius:18px; border:1px solid #e1d4c5}
.menu-card h3 { font-size:23px; margin:12px 0}
.menu-card .price { color:var(--accent); font-size:24px; font-weight:bold}
.menu-card p { color:var(--muted)}
.restaurant .card-grid { grid-template-columns:repeat(3,minmax(0,1fr))}
.salon { --accent:#e8468b; --ink:#34252d; --paper:#fff7f8; --muted:#897780}
.salon .hero-media:after { background:linear-gradient(to right,var(--paper),transparent 35%)}
.salon .service-strip { padding:34px 0; background:#ffedf2}
.salon .service-strip .card-grid { gap:0}
.salon .service-strip .service-card { text-align:center; background:transparent; border:0; border-inline-start:1px solid #e9cad5; border-radius:0; padding:12px 22px}
.salon .service-strip .service-card:first-child { border:0}
.salon .service-card h3 { font-size:17px}
.gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.gallery-card { margin:0; border-radius:16px; overflow:hidden; background:white}
.gallery-card img { width:100%; height:260px; object-fit:cover}
.gallery-card figcaption { padding:15px; text-align:center; font-size:17px}
.offer { margin-top:28px; background:#fde4ee; border-radius:16px; padding:30px; text-align:center}
.offer h3 { color:var(--accent); font-size:26px; margin:0 0 6px}
.offer p { margin:0 0 18px}

@media(max-width:950px){.site-header { gap:18px; flex-wrap:wrap}
.brand { font-size:26px}
.site-nav { order:3; justify-content:center; width:100%; gap:22px}
.site-header>.cta-button { font-size:15px; padding:10px 18px}
.hero { min-height:540px}
.hero-copy { padding:40px 6%}
.hero-media { min-height:520px}
.hero h1,.restaurant .hero h1 { font-size:46px}
.hero-description { font-size:18px}
.hero-benefits { gap:10px}
.hero-benefits p { font-size:12px}
.card-grid,.gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr))}
.trust-grid { grid-template-columns:repeat(3,minmax(0,1fr))}
.trust-grid>.trust-quote { grid-column:1/-1; text-align:center}
.split-section { gap:30px}
}

@media(max-width:640px){.container { width:calc(100% - 36px)}
.site-header { padding:18px}
.brand { font-size:22px}
.brand svg { width:32px; height:32px}
.brand small { font-size:10px}
.site-nav { gap:18px; font-size:13px; flex-wrap:wrap}
.hero,.restaurant .hero { display:flex; flex-direction:column}
.hero-copy,.restaurant .hero-copy { padding:40px 22px}
.hero h1,.restaurant .hero h1 { font-size:44px}
.hero-media { min-height:340px}
.hero-media:after,.law .hero-media:after,.salon .hero-media:after,.restaurant .hero-media:after { background:linear-gradient(to bottom,var(--paper),transparent 25%)}
.hero-benefits { max-width:440px}
.hero .cta-button { width:100%}
.hand-note { font-size:22px}
.section { padding:50px 0}
.section-heading h2 { font-size:30px}
.service-card { padding:22px 16px}
.service-card h3 { font-size:19px}
.service-card p { font-size:15px}
.split-section { grid-template-columns:1fr; gap:22px}
.split-section h2 { font-size:30px}
.split-section img { height:290px}
.testimonial-grid,.restaurant .card-grid { grid-template-columns:1fr}
.trust-grid { gap:14px}
.trust-grid strong { font-size:26px}
.trust-item { font-size:12px}
.gallery-card img { height:210px}
.gallery-card figcaption { font-size:15px}
.salon .service-strip .service-card:nth-child(3) { border:0}
.salon .service-strip .service-card { padding:15px}
.contact-section h2 { font-size:30px}
.contact-section p { font-size:18px}
.site-footer { flex-direction:column; text-align:center; padding:26px 18px}
.section-heading p { font-size:16px}
}

.law .hero-photo,.salon .hero-photo { object-position:right center}
.restaurant .hero-photo { object-position:left center}

.hero-media:has(.hero-photo[data-image-fit="contain"]):after{display:none}