.home-surface {
  --home-press: #56433d;
  --home-arrow-offset: 3px;
  --frame: min(1260px, calc(100% - 104px));
  background: var(--paper);
  color: var(--ink);
}

html[dir=rtl] .home-surface { --home-arrow-offset: -3px; }

.home-surface .navigation { gap: clamp(12px, 2.2vw, 26px); }
.home-surface .desktop-nav { gap: clamp(14px, 2.05vw, 28px); }
.home-surface .desktop-nav a { min-height: 44px; align-content: center; }
.home-surface .desktop-nav a::after { inset-block-end: 3px; height: 2px; background: var(--rose); }
.home-surface .btn.lang { color: var(--ink); }
.home-surface .btn.primary {
  border-radius: 5px;
  background: var(--ink);
  color: var(--paper);
  transition: background-color .18s var(--ease), transform .14s var(--ease);
}
.home-surface .btn.primary:hover { background: var(--home-press); }
.home-surface .btn.primary:active { transform: scale(.98); }

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(30px, 4.6vw, 76px);
  padding-block: clamp(24px, 3.1vw, 50px) clamp(32px, 4.1vw, 64px);
}

.home-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--wine);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .095em;
}
html[lang=ar] .home-kicker { letter-spacing: 0; }
.home-hero-copy > .home-kicker::before, .home-styling-copy > .home-kicker::before {
  content: "";
  inline-size: 14px;
  block-size: 8px;
  background: var(--rose);
}

.home-hero h1 {
  margin-block: 14px 18px;
  font: 400 clamp(42px, 4.9vw, 72px)/1.05 var(--headline);
  letter-spacing: -.053em;
  text-wrap: balance;
}
html[lang=ar] .home-hero h1 {
  font: 700 clamp(34px, 3.85vw, 60px)/1.24 var(--body);
  letter-spacing: 0;
  margin-block-end: 25px;
}
.home-lead {
  max-inline-size: 42ch;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
}
html[lang=ar] .home-lead { line-height: 1.82; }
.home-hero-actions, .home-guide-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px clamp(14px, 2vw, 28px);
  margin-block-start: 25px;
}
.home-page .btn.primary { min-height: 52px; padding-inline: 21px; gap: 12px; }
.home-page .btn.primary .icon { width: 17px; height: 17px; }

.home-cover {
  isolation: isolate;
  position: relative;
  display: grid;
  gap: 7px;
  margin: 0;
  padding-block: clamp(13px, 2vw, 29px) 9px;
  padding-inline-end: clamp(17px, 2.9vw, 41px);
}
.home-cover::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 30% 0;
  z-index: -1;
  background: var(--rose);
}
.home-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.39;
  object-fit: cover;
  object-position: 50% 56%;
  border-radius: var(--radius);
  background: var(--petal);
}
.home-cover figcaption { justify-self: end; color: var(--ink); font-size: 12px; }

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--wine);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-underline-offset: 5px;
}
.home-link .icon { width: 17px; height: 17px; transition: translate .18s var(--ease); }
.home-link:hover { text-decoration: underline; }
.home-link:hover .icon-arrow { translate: var(--home-arrow-offset) 0; }
.home-link:hover .icon-down { translate: 0 2px; }

.home-section { padding-block: clamp(43px, 6vw, 88px); }
.home-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 4px 20px;
  flex-wrap: wrap;
  margin-block-end: clamp(18px, 2.35vw, 32px);
}
.home-page h2 {
  font: 400 clamp(38px, 4.3vw, 62px)/1.08 var(--headline);
  letter-spacing: -.047em;
  text-wrap: balance;
}
html[lang=ar] .home-page h2 {
  font: 700 clamp(29px, 3.6vw, 51px)/1.3 var(--body);
  letter-spacing: 0;
}

.home-services { border-block-start: 1px solid var(--line); padding-block-start: clamp(35px, 4.5vw, 63px); }
.home-services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 42px); }
.home-service { display: block; border-block-end: 1px solid var(--line); padding-block-end: 14px; }
.home-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--petal); border-radius: var(--radius); }
.home-media img { width: 100%; height: 100%; object-fit: cover; }
.home-service-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block: 13px 5px;
}
.home-service-title h3 { font: 400 clamp(27px, 3.05vw, 42px)/1.12 var(--headline); letter-spacing: -.035em; }
html[lang=ar] .home-service-title h3 {
  font: 700 clamp(22px, 2.65vw, 36px)/1.35 var(--body);
  letter-spacing: 0;
}
.home-service p { color: var(--muted); }
.home-service .home-service-price { color: var(--wine); margin-block-start: 9px; font-size: 14px; }
.home-service-price strong { font-variant-numeric: tabular-nums; }
.home-circle-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--control);
  border-radius: 50%;
  transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.home-circle-arrow .icon { width: 18px; height: 18px; }
.home-service:is(:hover, :focus-visible) .home-circle-arrow {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.home-menu { background: var(--white); border-block: 1px solid var(--line); }
.home-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.5vw, 35px); }
.home-dish { display: block; color: var(--wine); border-block-end: 1px solid var(--line); }
.home-dish-text { position: relative; padding-block: 13px 14px; padding-inline-end: 28px; }
.home-dish-text h3 { font-size: clamp(16px, 1.65vw, 21px); line-height: 1.45; margin-block-start: 3px; }
.home-dish-arrow { position: absolute; inset-inline-end: 0; inset-block-start: 50%; translate: 0 -50%; color: var(--wine); }
.home-dish-arrow .icon { width: 17px; height: 17px; }
.home-dish:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.home-service .home-media img, .home-dish .home-media img { transition: transform .24s var(--ease); }
@media (hover: hover) {
  .home-service:hover .home-media img, .home-dish:hover .home-media img { transform: scale(1.028); }
}

.home-styling { background: var(--petal); }
.home-styling-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(24px, 6.5vw, 96px);
}
.home-styling-copy h2 { margin-block: 12px 14px; }
.home-styling-copy .home-link { margin-block-start: 11px; }
.home-styling-photos {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: end;
  gap: clamp(10px, 1.6vw, 22px);
}
.home-styling-photos figcaption { color: var(--muted); font-size: 12px; margin-block-start: 6px; }

.home-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px clamp(18px, 3vw, 40px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.home-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
}
.home-step-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--rose);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.home-steps h3 { font-size: clamp(16px, 1.65vw, 20px); line-height: 1.4; }
.home-steps p { color: var(--muted); font-size: 14px; margin-block-start: 6px; }
.home-guide-actions { margin-block-start: clamp(19px, 3vw, 36px); }

.home-surface .site-footer { background: var(--ink); color: var(--paper); }
.home-surface .footer-grid { padding-block: clamp(31px, 4vw, 57px); }
.home-surface .footer-brand img { width: 97px; }
.home-surface .footer-grid h2 { color: var(--rose); }
.home-surface :is(.footer-brand p, .footer-grid a, .footer-bottom) { color: var(--paper); }
.home-surface .footer-bottom { border-block-start-color: #72645d; }
.home-surface .site-footer :focus-visible { outline-color: var(--rose); }

@media (max-width: 1070px) {
  .home-surface { --frame: calc(100% - 64px); }
  .home-surface .mobile-menu > summary { color: var(--ink); border-color: var(--line); border-radius: 5px; }
  .home-surface .mobile-menu[open] > summary { background: var(--petal); }
  .home-surface .mobile-nav {
    transform-origin: top right;
    border-radius: 5px;
    box-shadow: 0 14px 35px #39383424;
  }
  html[dir=rtl] .home-surface .mobile-nav { transform-origin: top left; }
  .home-surface .mobile-menu[open] .mobile-nav { animation-name: home-menu-in; }
  @keyframes home-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(.97); }
  }
}

@media (max-width: 760px) {
  .home-surface { --frame: calc(100% - 36px); }
  .home-surface .navigation { gap: 8px; }
  .home-hero {
    grid-template-columns: 1fr;
    gap: 19px;
    padding-block: 16px 31px;
  }
  .home-cover { grid-row: 1; padding-block: 10px 6px; padding-inline-end: 15px; gap: 5px; }
  .home-cover img { aspect-ratio: 1.58; }
  .home-cover figcaption { font-size: 11px; }
  .home-hero h1 { font-size: clamp(36px, 8.2vw, 61px); margin-block: 9px 11px; }
  html[lang=ar] .home-hero h1 { font-size: clamp(31px, 7.9vw, 54px); margin-block-end: 12px; }
  .home-hero-actions { margin-block-start: 15px; }
  .home-page .btn.primary { min-height: 48px; padding-inline: 16px; }

  .home-services-grid { gap: 23px; }
  .home-service-title { margin-block: 10px 4px; }
  .home-circle-arrow { width: 38px; height: 38px; }
  .home-styling-layout { grid-template-columns: 1fr; }
  .home-styling-copy h2 { margin-block: 8px 10px; }
  .home-steps { grid-template-columns: 1fr; }
  .home-steps li { padding-block-start: 12px; }
  .home-steps p { margin-block-start: 3px; }
}

@media (max-width: 540px) {
  .home-services-grid, .home-menu-grid { grid-template-columns: 1fr; }
  .home-dish { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 13px; padding-block-end: 11px; }
  .home-dish-text { padding-block: 4px; padding-inline-end: 19px; }
  .home-surface .footer-brand { grid-column: 1 / -1; }
}