@font-face {
  font-family: Sidon Arabic;
  src: url("assets/arabic-regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Sidon Arabic;
  src: url("assets/arabic-bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --white: #fff;
  --page: #fcfcf8;
  --ink: #172f2d;
  --muted: #526764;
  --deep: #084b4c;
  --teal: #0f6a69;
  --pale: #e9f2ed;
  --line: #dce7df;
  --orange: #ffa04e;
  --gutter: clamp(20px, 4.8vw, 68px);
  color: var(--ink);
  background: var(--page);
  font-family: Sidon Arabic, Tahoma, Arial, sans-serif;
  line-height: 1.75;
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
[hidden] { display: none !important; }
section[id], footer[id] { scroll-margin-block-start: 96px; }
:focus-visible { outline: 3px solid #d66e22; outline-offset: 4px; }
.shell { width: min(calc(100% - 2 * var(--gutter)), 1216px); margin-inline: auto; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; z-index: 10; inset: 12px 12px auto auto; padding: 9px 16px; background: var(--white); border-radius: 8px; }

.site-header { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid #e6ece7; background: var(--white); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 74px; }
.brand { position: relative; display: block; width: 148px; height: 50px; overflow: hidden; justify-self: start; }
.brand img { position: absolute; width: 236px; max-width: none; height: 236px; inset: 50% 50% auto auto; transform: translate(50%,-50%); }
.site-header nav { display: flex; gap: clamp(20px, 3vw, 42px); font-size: .9rem; font-weight: 700; }
.site-header nav a { padding-block: 10px; transition: color .18s ease; }
.site-header nav a:hover { color: var(--teal); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  min-height: 50px;
  padding: 10px 21px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 700;
  font-size: .91rem;
  line-height: 1.4;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding: 9px 15px; font-size: .82rem; }
.button-header { justify-self: end; color: var(--deep); background: var(--pale); }
.button-header:hover { background: #dcece5; }
.button-orange { background: var(--orange); color: #2d2018; }
.button-orange:hover { background: #ffb475; }
.button-ghost { color: #fff; border-color: #8eb2a7; }
.button-ghost:hover { background: #ffffff13; border-color: #d0e1d9; }
.button-teal { background: var(--deep); color: #fff; }
.button-teal:hover { background: #126664; }

.hero { color: #fffdf5; background: radial-gradient(ellipse at 20% 35%, #13615e 0%, #084b4c 56%, #073f41 100%); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(38px, 6vw, 95px); align-items: center; padding-block: 49px 56px; }
.hero-copy { position: relative; z-index: 1; padding-block: 14px; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: .81rem; font-weight: 700; }
.eyebrow > span, .menu-label > span { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #e47a2e; }
.hero-eyebrow { color: #d7e6dc; margin-block-end: 14px; }
.hero-eyebrow b { color: #92b3a6; }
.hero h1 { font-size: clamp(62px, 7vw, 104px); font-weight: 700; line-height: 1.12; }
.hero h1 em { font-style: normal; color: #ffc588; }
.hero-intro { max-width: 420px; margin-block-start: 19px; color: #dcece3; font-size: clamp(16px, 1.42vw, 19px); line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 25px; }
.hero-figure { width: min(100%, 474px); position: relative; isolation: isolate; justify-self: center; padding: 9px 9px 0; }
.hero-figure::before { content: ""; position: absolute; inset: 0 0 19px; z-index: -1; border: 1px solid #e0ebe45e; border-radius: 220px 220px 16px 16px; }
.hero-figure::after { content: ""; position: absolute; z-index: -2; width: 96px; height: 96px; border-radius: 50%; border: 1px solid #ffa04e8f; inset: 27px auto auto -14px; }
.plate-frame { overflow: hidden; border-radius: 213px 213px 12px 12px; background: #132e2d; box-shadow: 0 21px 60px #062c2f55; }
.plate-frame img { width: 100%; height: auto; aspect-ratio: 1.13; object-fit: cover; object-position: center 56%; }
.plate-caption { position: relative; width: fit-content; max-width: 98%; min-height: 48px; margin: -18px auto 0; padding: 7px 14px; display: flex; align-items: center; gap: 12px; color: var(--ink); background: #fffef8; border-radius: 8px; box-shadow: 0 10px 22px #062c2f3d; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.caption-dot { display: grid; place-items: center; color: #b85f18; }
.caption-dot .icon { width: 17px; height: 17px; }
.plate-caption b { color: var(--teal); border-inline-start: 1px solid var(--line); padding-inline-start: 12px; font: 700 17px/1.2 Arial,sans-serif; }

.facts { background: var(--pale); border-bottom: 1px solid #dce7df; }
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 91px; align-items: center; }
.fact { display: flex; gap: 13px; align-items: center; justify-content: center; padding: 12px 9px; }
.fact + .fact { border-inline-start: 1px solid #d1e1d8; }
.fact-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff9; color: var(--teal); }
.fact strong, .fact small { display: block; text-align: start; }
.fact strong { font-size: .91rem; line-height: 1.4; }
.fact small { font-size: .76rem; color: var(--muted); margin-block-start: 3px; }
a.fact:hover strong { color: var(--teal); }

.menu-section { padding-block: 68px 75px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.section-eyebrow { color: var(--teal); }
h2 { font-size: clamp(37px, 4.1vw, 57px); line-height: 1.3; font-weight: 700; color: var(--deep); margin-block: 5px 7px; }
.section-intro { color: var(--muted); font-size: 1rem; }
.menu-label { display: flex; gap: 8px; align-items: center; background: #eaf2eb; border: 1px solid #deebe3; color: var(--deep); padding: 6px 12px; border-radius: 30px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.menu-label > span { width: 6px; height: 6px; }
.menu-tools { margin-block: 22px 23px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter { min-height: 40px; background: var(--white); color: var(--deep); border: 1px solid #d6e4dd; border-radius: 40px; padding: 5px 13px; font-size: .79rem; font-weight: 700; white-space: nowrap; }
.filter:hover { border-color: var(--teal); background: var(--pale); }
.filter[aria-current="true"] { background: var(--deep); color: var(--white); border-color: var(--deep); }
.menu-search { display: flex; gap: 8px; align-items: center; border: 1px solid #d6e4dd; border-radius: 9px; min-width: 180px; padding-inline: 11px; background: #fff; color: var(--muted); }
.menu-search:focus-within { border-color: var(--teal); }
.menu-search input { width: 100%; min-width: 0; border: none; background: transparent; padding-block: 9px; color: var(--ink); outline: none; font-size: .81rem; }
.menu-search input::placeholder { color: #576d68; }
.menu-search .icon { width: 17px; height: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.feature-card { overflow: hidden; border-radius: 12px; background: var(--white); border: 1px solid var(--line); }
.feature-card img { aspect-ratio: 1.64; object-fit: cover; object-position: center 60%; width: 100%; height: auto; background: var(--deep); }
.feature-body { padding: 14px 16px 16px; }
.feature-kicker { color: var(--teal); font-size: .72rem; font-weight: 700; }
.feature-title { display: flex; align-items: start; gap: 8px; justify-content: space-between; margin-block-start: 4px; }
.feature-title h3 { font-size: 1rem; line-height: 1.5; font-weight: 700; }
.price { flex: none; color: var(--deep); background: #eef4ef; border-radius: 5px; padding: 5px 8px; font: 700 14px/1.15 Arial, sans-serif; white-space: nowrap; }
.menu-result-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: start; }
.menu-group { border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 13px 16px; }
.menu-group h3 { color: var(--deep); font-size: 1rem; padding-block-end: 6px; }
.menu-group ul { margin: 0; padding: 0; list-style: none; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding-block: 7px; border-top: 1px solid #e7eee8; font-size: .87rem; }
.menu-empty { color: var(--muted); background: var(--pale); border-radius: 10px; padding: 25px; text-align: center; }
.menu-foot { border-top: 1px solid var(--line); margin-block-start: 22px; padding-block-start: 14px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; color: var(--muted); font-size: .78rem; }
.menu-links { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 6px; }
.menu-links a { display: inline-flex; gap: 5px; align-items: center; color: var(--deep); font-weight: 700; }
.menu-links .icon { width: 14px; height: 14px; }
.menu-links a:hover { text-decoration: underline; }

.visit-section { background: #edf4ed; border-block: 1px solid var(--line); padding-block: 58px; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(26px, 6vw, 78px); }
.visit-copy .section-intro { max-width: 440px; }
.visit-details { display: grid; gap: 9px; margin-block: 17px 22px; }
.visit-details > div { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; gap: 12px; font-size: .88rem; }
.visit-details dt { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--deep); }
.visit-details .icon { width: 16px; height: 16px; }
.visit-details dd span { color: var(--muted); }
.visit-details a:hover { text-decoration: underline; }
.venue-photo { background: var(--white); padding: 8px; border: 1px solid #dbe8dd; border-radius: 13px; }
.venue-photo img { width: 100%; height: auto; aspect-ratio: 1.67; object-fit: cover; object-position: center 47%; border-radius: 8px; }
.venue-photo figcaption { font-size: .75rem; padding: 8px 9px 2px; color: var(--muted); }
.venue-photo figcaption span { color: #c26929; }

.footer { color: #f9fbf6; background: #073f41; padding-block: 31px 20px; }
.footer-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 19px; }
.footer-name { font-size: 1.45rem; font-weight: 700; }
.footer-latin { letter-spacing: .16em; color: #bfd5cc; font: 700 .67rem/1.5 Arial,sans-serif; }
.socials { display: flex; gap: 8px; flex-wrap: wrap; }
.socials a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 12px; border: 1px solid #6e9a93; border-radius: 7px; font-size: .79rem; }
.socials a:hover { background: #ffffff13; }
.socials .icon { width: 16px; height: 16px; }
.footer-meta { margin-block-start: 21px; padding-block-start: 12px; border-top: 1px solid #366b65; color: #c6dad1; font-size: .71rem; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.footer-meta a:hover { text-decoration: underline; }

@media (max-width: 1060px) {
  .menu-tools { align-items: start; flex-direction: column; }
  .menu-search { width: min(100%, 315px); }
  .hero-grid { gap: 30px; }
}
@media (max-width: 700px) {
  .header-inner { grid-template-columns: 1fr auto; min-height: 64px; }
  .site-header nav { display: none; }
  .brand { width: 133px; height: 43px; }
  .brand img { width: 212px; height: 212px; }
  section[id], footer[id] { scroll-margin-block-start: 77px; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; padding-block: 30px 30px; }
  .hero-copy { padding: 0; }
  .hero-eyebrow { margin-block-end: 10px; }
  .hero h1 { font-size: clamp(54px, 13.3vw, 73px); line-height: 1.1; }
  .hero-intro { margin-block-start: 12px; font-size: .94rem; }
  .hero-actions { margin-block-start: 17px; gap: 8px; }
  .hero-actions .button { min-height: 44px; padding-inline: 13px; }
  .hero-figure { width: min(100%, 390px); padding: 6px 6px 0; }
  .hero-figure::before { border-radius: 160px 160px 13px 13px; }
  .hero-figure::after { width: 62px; height: 62px; left: -7px; top: 16px; }
  .plate-frame { border-radius: 156px 156px 9px 9px; }
  .plate-frame img { aspect-ratio: 1.32; }
  .plate-caption { min-height: 39px; }
  .facts-grid { grid-template-columns: 1fr; padding-block: 6px; }
  .fact { justify-content: start; padding: 8px 0; gap: 11px; }
  .fact + .fact { border-inline-start: none; border-top: 1px solid #d1e1d8; }
  .fact-icon { width: 32px; height: 32px; }
  .fact .icon { width: 17px; height: 17px; }
  .fact strong { font-size: .85rem; }
  .fact small { font-size: .71rem; margin-block-start: 2px; }
  .menu-section { padding-block: 37px 43px; }
  .section-head { align-items: start; flex-direction: column; gap: 10px; }
  .menu-tools { margin-block: 16px; }
  .menu-search { width: 100%; }
  .feature-grid { grid-template-columns: 1fr; gap: 11px; }
  .feature-card { display: grid; grid-template-columns: 36% 1fr; }
  .feature-card img { height: 100%; min-height: 110px; aspect-ratio: auto; }
  .feature-body { padding: 11px 12px; align-self: center; }
  .feature-title h3 { font-size: .9rem; }
  .menu-result-groups { grid-template-columns: 1fr; }
  .visit-section { padding-block: 36px; }
  .visit-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.filter { display: inline-flex; align-items: center; }
.menu-search button { border: 0; padding: 7px; background: none; color: var(--teal); }