/* ---------------------------------------------------------------------------
   Styles for the 2026 restructure: branch pages, video section, WhatsApp
   button and the extra header/footer links.

   Kept in its own file on purpose - index.css/index-dist.css are generated by
   Prepros from the .scss sources, so anything written there gets overwritten
   on the next build.

   Brand palette (taken from index.css):
     #2d2424  dark      #5c3d2e  brown      #e0c097  gold
   --------------------------------------------------------------------------- */

:root {
  --st-dark: #2d2424;
  --st-brown: #5c3d2e;
  --st-gold: #e0c097;
}

/* -------------------------------------------------------- sticky navigation */
/* index.css pins the bar with "position: absolute !important" so it floats over
   the hero. Switching to fixed keeps it out of the document flow exactly the
   same way - so nothing below shifts - while keeping it on screen as the page
   scrolls. The selector carries an extra class to outrank that !important. */
nav.navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transition: background-color .25s ease, box-shadow .25s ease, height .25s ease,
              padding .25s ease;
}

/* Once scrolled away from the hero the gradient has nothing to sit on, so swap
   in a solid bar.

   Deliberately no height change here. On desktop the bar is 150px tall and
   .socail (phones + icons) is absolutely positioned at top:18px inside it, so
   shrinking the bar pulls the menu links up underneath that block and the two
   overlap. Only the background changes. */
nav.navbar.is-stuck {
  background-image: none;
  background-color: rgba(45, 36, 36, .97);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

/* Desktop header, laid out as two real rows instead of overlapping layers.

   index.css pins .socail (branch numbers + social icons) with
   "position: absolute; top: 18px" inside a 150px bar, while the menu links are
   centred in that same bar by Bootstrap. The two blocks therefore had nothing
   holding them apart, and once the bar shrank on scroll they slid into each
   other - the collision in the reported screenshot.

   Taking .socail out of absolute positioning and letting the container wrap
   gives row 1 (contact + icons) and row 2 (logo + menu) their own space, with
   a real gap between them that survives at any width or scroll position. */
@media (min-width: 992px) {
  nav.navbar > .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Hug the top rather than letting the two rows stretch apart, so the gap
       between them is the one set here. */
    align-content: flex-start;
    row-gap: 6px;
    padding-top: 8px;
  }

  /* Bootstrap pads .nav-link 8px top and bottom, which was the single biggest
     contributor to the bar's height. The extra class outranks Bootstrap's
     ".navbar-expand-lg .navbar-nav .nav-link". */
  nav.navbar.navbar-expand-lg .navbar-nav .nav-link {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* Row 1 is the badge and the social icons together at the right - badge
     first, then the icons immediately beside it - with the menu wrapping to
     row 2 on its own. margin-left: auto on the badge is what clusters the
     pair at the right edge: it eats all the free space on row 1, pushing
     itself and everything flex-ordered after it (the icons) over together,
     rather than the badge sitting at the row's start the way it used to. */
  nav .socail {
    position: static;
    order: 2;
    flex: 0 0 auto;
    justify-content: flex-end;
    top: auto;
    right: auto;
  }

  nav.navbar > .container-fluid > .st-header-badge {
    order: 1;
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* The logo spans both rows rather than sitting inside the second one.

     Inside the row it could never be taller than the menu links beside it
     (~38px) without setting the row height itself and growing the whole bar.
     Lifted out of the flow it can use the bar's full height instead, so it
     gets meaningfully bigger while the bar stays exactly as tall as it is.

     The space it occupies is reserved with padding-left on the container, so
     the two rows physically cannot reach into it - both are right-aligned
     anyway, which is what leaves this corner free in the first place. */
  nav.navbar > .container-fluid {
    position: relative;
    padding-left: 165px;
  }

  /* display:block is restated because index.css hides the brand up to and
     including 992px, which overlaps this block by exactly one pixel. */
  nav.navbar .logo.navbar-brand {
    display: block;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
  }

  /* The logo is a 4211x1361 image sized by index.css with "width: 50%;
     height: 100%". That only stayed small because .navbar-collapse claimed
     the full width and squeezed the brand to almost nothing; once the rows
     were separated the brand could take its natural width and the logo grew
     until it owned half the screen. Size it outright instead, so the bar's
     height is decided here rather than by whatever width is left over. */
  /* 50px tall on a 3.09:1 image is ~154px wide, inside the 165px gutter. */
  nav .logo.navbar-brand a img {
    width: auto;
    height: 50px;
    max-width: 150px;
  }

  nav .navbar-collapse {
    order: 3;
    flex: 0 0 100%;
  }

  /* index.css pins the bar at a flat 150px. The two rows only need about 100
     of that, and since they hug the top the remainder showed as a tall band of
     empty gradient under the menu. Let the bar take its content height in both
     states - it is fixed-position, so nothing below it moves. */
  nav.navbar,
  nav.navbar.is-stuck {
    height: auto;
    padding-bottom: 8px;
  }

  /* Scrolled state: tighten the spacing and shrink the logo so the solid bar
     takes noticeably less of the screen than the one floating over the hero.
     Only whitespace and the logo change - the branch numbers stay at 14px and
     the social icons at 18px, the sizes the brief specifies, so nothing jumps
     in size as you scroll. Roughly 82px becomes roughly 64px.

     Safe to shrink now in a way an earlier attempt was not: the two rows are
     laid out by flex, so there is no absolutely positioned block for the menu
     links to slide underneath. */
  nav.navbar.is-stuck > .container-fluid {
    padding-top: 4px;
    row-gap: 4px;
  }

  nav.navbar.is-stuck {
    padding-bottom: 4px;
  }

  nav.navbar.is-stuck .logo.navbar-brand a img {
    height: 40px;
  }

  nav.navbar.is-stuck.navbar-expand-lg .navbar-nav .nav-link {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

/* Smaller laptops: the reserved logo gutter plus six menu links at 20px with
   50px between them comes close to the full width around 992-1200px. Tighten
   the link spacing and the gutter a little so the menu can never wrap onto a
   second line - a wrap would grow the bar, which is the one thing this whole
   arrangement is meant to prevent. */
@media (min-width: 992px) and (max-width: 1199px) {
  nav.navbar > .container-fluid {
    padding-left: 140px;
  }

  nav .logo.navbar-brand a img {
    height: 44px;
    max-width: 128px;
  }

  nav.navbar.is-stuck .logo.navbar-brand a img {
    height: 36px;
  }

  nav #navbarTogglerDemo01 ul li {
    margin-left: 26px;
    font-size: 18px;
  }
}

/* --------------------------------------------- header: Google review badge */
/* Replaces the branch phone line. On desktop it sits at the left of the top
   row, beside the logo in its gutter; on phones it sits between the logo and
   the social icons. */
.st-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 30px;
  background-color: rgba(92, 61, 46, .45);
  border: 1px solid var(--st-brown);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

/* index.css sizes every anchor in this block as a social icon
   ("nav .socail a { font-size: clamp(20px,1.5vw,30px) }"); this outranks it. */
nav a.st-header-badge {
  font-size: 13px;
  margin: 0;
}

.st-header-badge:hover {
  background-color: var(--st-brown);
  border-color: var(--st-gold);
  color: #fff;
  text-decoration: none;
}

.st-header-badge strong {
  color: var(--st-gold);
}

.st-header-badge__sep {
  color: var(--st-brown);
}

/* --------------------------------------------------- header: branch phones */
.st-header-phones {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

.st-header-phones i {
  color: var(--st-gold);
  font-size: 14px;
}

.st-header-phones .dot {
  margin-left: -2px;
}

.st-header-phones .sep {
  color: var(--st-gold);
  opacity: .8;
}

/* index.css sets "nav .socail a { font-size: clamp(20px,1.5vw,30px); margin: 0
   10px }" to size the social ICONS - but it matches every anchor in the block,
   so the two phone-number links were rendering at 20-30px no matter what size
   the surrounding text was set to. That selector is (0,1,2); this one is
   (0,2,2), so the numbers now follow the line they sit in. */
nav .socail .st-header-phones a,
.st-header-phones a {
  font-size: inherit;
  margin: 0;
  color: var(--st-gold);
  text-decoration: none;
  font-weight: 700;
}

.st-header-phones a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ---------------------------------------------------- header: branches menu */
.navbar .nav-item.dropdown .dropdown-menu {
  background-color: var(--st-dark);
  border: 1px solid var(--st-brown);
  border-radius: 6px;
  padding: 6px 0;
  min-width: 265px;
}

/* index.css styles EVERY li under #navbarTogglerDemo01 at 20px with a 50px
   left margin and a hover zoom. That also caught the items inside this
   dropdown, so the text outgrew the card. These selectors carry one extra
   class over that rule, which is enough to win. */
nav #navbarTogglerDemo01 ul .dropdown-menu li {
  font-size: 15px;
  margin: 0;
  width: 100%;
}

nav #navbarTogglerDemo01 ul .dropdown-menu li:hover,
nav #navbarTogglerDemo01 ul .dropdown-menu li:active {
  transform: none;
  -webkit-transform: none;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.navbar .nav-item.dropdown .dropdown-menu .dropdown-item {
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  padding: 10px 18px;
  white-space: nowrap;
  width: 100%;
}

.navbar .nav-item.dropdown .dropdown-menu .dropdown-item:hover,
.navbar .nav-item.dropdown .dropdown-menu .dropdown-item:focus {
  background-color: var(--st-brown);
  color: var(--st-gold);
}

/* ------------------------------------------- review button, in the icon row */
/* Sits inline with the social icons, so it has to opt out of the big icon
   font-size that `nav .socail a` sets. */
nav .socail {
  display: flex;
  align-items: center;
  gap: 4px;
}

nav .socail a.st-review-btn,
.st-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--st-gold);
  color: var(--st-dark) !important;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  padding: 7px 13px;
  margin: 0 10px 0 0;
  border-radius: 30px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}

nav .socail a.st-review-btn i {
  font-size: 12px;
}

.st-review-btn:hover {
  background-color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 991px) {
  /* Phone layout, two rows, matching the reference site's structure:
       Row 1 - the rating badge at the left, the social icons at the right.
       Row 2 - the hamburger and the logo, left-aligned, beneath it.
     Both rows are produced with flex "order" on container-fluid's direct
     children plus one forced line-break between them (see the ::after
     below) - nothing is nested in extra wrapper markup.

     Row 1 has to hold a badge reading "4.7/5 Rating | 2,300+ Google Reviews"
     next to seven icons. At fixed sizes that pair measured wider than a
     390px phone, so the icons wrapped and the header silently became three
     rows instead of two. Both are sized in vw below so the row fits by
     construction rather than by luck. */
  nav.navbar > .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    padding-top: 10px;
    /* Bootstrap's 12px gutter each side is width row 1 cannot spare. */
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Badge at the row's start, icons pushed to its end: margin-left:auto on
     .socail eats the free space between the two. This is the arrangement the
     brief's reference screenshots show - the badge and the icon group at
     opposite ends of one row, not bunched together in a corner. */
  nav.navbar > .container-fluid > .st-header-badge {
    order: 1;
    flex: 0 1 auto;
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
  }

  nav .socail {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin-top: 0;
    margin-left: auto;
    min-width: 0;
  }

  /* Never let the icons break onto a second line. */
  nav .socail .socail__icons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(2.5px, 0.95vw, 6px);
    height: 20px;
    flex: 0 0 auto;
  }

  /* Sized against the viewport so seven icons plus the badge always clear the
     screen width: ~14.8px at 360px, ~16.4px at 400px, capped at 19px. A step
     up from 3.8vw/17px, but only a step - the icons share this row with the
     review badge, and overshooting is what wraps them onto a third line. */
  nav .socail .socail__icons a {
    margin: 0;
    font-size: clamp(13px, 4.1vw, 19px);
    line-height: 1;
  }

  nav.navbar > .container-fluid > a.st-header-badge {
    font-size: clamp(8.5px, 2.5vw, 11px);
    gap: clamp(2.5px, 0.9vw, 5px);
    padding: 4px clamp(5px, 1.8vw, 10px);
  }

  /* Forces everything after it - the hamburger and logo - onto row 2. A
     zero-height pseudo-element rather than a 100% basis on a real element:
     giving the badge itself that basis would stretch its own box edge to
     edge, dragging its border and background the width of the screen with
     the text stranded at one end. */
  nav.navbar > .container-fluid::after {
    content: "";
    order: 3;
    flex: 0 0 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }

  /* Row 2: logo first, hamburger after it, left-aligned - nothing pushes them
     right, so they sit at the row's start the way flex items do by default.
     The pair is ordered here rather than in the markup because the markup is
     Bootstrap's, where the toggler comes first. */
  nav .navbar-toggler {
    order: 5;
    flex: 0 0 auto;
    padding: 0;
    height: 21px;
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  /* index.css sets this to clamp(30px, 4vw, 40px), which left the hamburger
     towering over the 21px social icons beside it. Match them. */
  nav .navbar-toggler i {
    font-size: 21px;
    line-height: 1;
  }

  nav .navbar-collapse {
    order: 6;
    flex: 1 0 100%;
  }

  /* The logo was hidden on phones by index.css ("nav .navbar-brand { display:
     none }"), which left the corner empty. Show it there, sized to the same
     21px row the hamburger and the icons use. */
  nav.navbar .logo.navbar-brand {
    display: block;
    order: 4;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
  }

  nav.navbar .logo.navbar-brand a img {
    width: auto;
    height: 26px;
    max-width: 90px;
    filter: none;
  }
}

/* Desktop keeps the icons in a row with the phone numbers to their left.
   Declared after the shared "nav .socail" rule above so this gap wins. */
@media (min-width: 992px) {
  nav .socail {
    gap: 14px;
  }

  nav .socail .socail__icons {
    display: inline-flex;
    align-items: center;
    order: 2;
    gap: 4px;
  }

  /* index.css sizes these with clamp(20px, 1.5vw, 30px). 22px is a step up
     from the 18px they were, with room to spare on a desktop header. */
  nav .socail .socail__icons a {
    font-size: 22px;
    margin: 0 5px;
    line-height: 1;
  }

}

/* Very narrow phones: only the logo needs a nudge here. The badge and the
   icon row are sized in vw in the 991px block above, so they have already
   scaled themselves down by this width - restating fixed pixel sizes here is
   what used to push the pair back over the screen width and wrap the icons
   onto a third row. */
@media (max-width: 380px) {
  nav.navbar .logo.navbar-brand a img {
    height: 22px;
    max-width: 76px;
  }
}

/* ------------------------------------------- floating contact buttons + pop-ups */
/* Directions sits above WhatsApp in the bottom corner, 8px apart. Both are
   pills of the same size and shape; only the colour separates them - WhatsApp
   keeps its own brand green, Directions takes the brand gold. */
/* align-items: stretch, not flex-end, so every button in the column is the
   width of the widest - the brief asks for Call us and Directions to match
   exactly, and matching all four is what actually looks deliberate. With one
   padding and one border-radius shared across them, height matches too. */
.st-float-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.st-float-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  border: 0;
  border-radius: 30px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: transform .2s ease, background-color .2s ease;
}

.st-float-btn i {
  font-size: 17px;
}

.st-float-btn:hover {
  transform: translateY(-2px);
}

/* Book your Table carries the WhatsApp icon and colour because that is what
   it actually does - both branch options in its pop-up send the visitor to
   WhatsApp. Sharing the selector with the floating WhatsApp trigger from the
   menu page's sticky bar keeps the two visually identical wherever they
   appear. */
.st-float-btn--book {
  background-color: #25d366;
  color: #fff;
}

.st-float-btn--book:hover {
  background-color: #1fbe5b;
  color: #fff;
}

/* Call us, Directions and Check Menu are deliberately identical - same fill,
   same metrics - so the tan pills read as one set distinct from the green
   WhatsApp-flavoured Book your Table. */
.st-float-btn--call,
.st-float-btn--directions,
.st-float-btn--menu {
  background-color: var(--st-gold);
  color: var(--st-dark);
}

.st-float-btn--call:hover,
.st-float-btn--directions:hover,
.st-float-btn--menu:hover {
  background-color: #fff;
  color: var(--st-dark);
}

/* Branch-choice pop-up, shared by both buttons. */
.st-choice-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1300;
}

.st-choice-modal.is-open {
  display: block;
}

body.st-modal-open {
  overflow: hidden;
}

.st-choice-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .72);
}

.st-choice-modal__body {
  position: relative;
  z-index: 1;
  width: min(92vw, 380px);
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--st-dark);
  border: 1px solid var(--st-brown);
  border-radius: 14px;
  padding: 24px 22px 20px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  text-align: left;
}

.st-choice-modal__title {
  color: var(--st-gold);
  font-size: 18px;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.st-choice-modal__hint {
  color: #cdbba6;
  font-size: 13px;
  margin: 0 0 16px;
}

.st-choice-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background-color: var(--st-brown);
  color: var(--st-gold);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}

.st-choice-option {
  display: block;
  padding: 12px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--st-brown);
  border-radius: 10px;
  background-color: rgba(92, 61, 46, .35);
  color: #fff;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.st-choice-option:last-child {
  margin-bottom: 0;
}

.st-choice-option:hover {
  background-color: var(--st-brown);
  border-color: var(--st-gold);
  color: #fff;
  text-decoration: none;
}

.st-choice-option__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--st-gold);
}

.st-choice-option__meta {
  display: block;
  font-size: 12px;
  color: #cdbba6;
  margin-top: 2px;
}

/* RTL pages read right to left, so the pop-up text should too. */
[dir="rtl"] .st-choice-modal__body,
html[lang="ar"] .st-choice-modal__body {
  text-align: right;
}

/* ------------------------------------------------------- hero slider title */
/* Mirrors the old "#carouselExampleControls .header h2" rules from index.css
   exactly - the element is now a <p> so it stays out of the heading outline,
   but it must keep looking the same. */
#carouselExampleControls .header .hero-title {
  color: #fff;
  display: inline-block;
  font-size: 86px;
  text-shadow: 2px 2px 5px #000;
  white-space: nowrap;
  margin: 0;
}

#carouselExampleControls .header .hero-title span {
  font-weight: 100;
  letter-spacing: -5px;
}

@media (max-width: 992px) {
  #carouselExampleControls .header .hero-title {
    display: none;
  }
}

/* Lets a plain #fragment anchor (the "Explore All Socials" link below, and
   any other in-page jump) ease into place instead of snapping there. */
html {
  scroll-behavior: smooth;
}

/* ------------------------------------------------- social proof / follower counts */
.st-social-proof {
  background-color: var(--st-dark);
  padding: 40px 0 36px;
  text-align: center;
}

.st-social-proof__title {
  color: var(--st-gold);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  margin: 0 0 28px;
}

.st-social-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.st-social-proof__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 14px;
  border: 1px solid var(--st-brown);
  border-radius: 14px;
  background-color: rgba(92, 61, 46, .28);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.st-social-proof__card:hover {
  border-color: var(--st-gold);
  background-color: rgba(92, 61, 46, .45);
  transform: translateY(-3px);
}

.st-social-proof__card i {
  font-size: 26px;
  color: var(--st-gold);
}

.st-social-proof__num {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.st-social-proof__label {
  font-size: 13px;
  color: #cdbba6;
  line-height: 1.4;
}

.st-social-proof__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 10px 22px;
  border-radius: 30px;
  background-color: transparent;
  border: 2px solid var(--st-gold);
  color: var(--st-gold);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.st-social-proof__cta:hover {
  background-color: var(--st-gold);
  color: var(--st-dark);
  text-decoration: none;
}

.st-social-proof__cta span {
  transition: transform .2s ease;
}

.st-social-proof__cta:hover span {
  transform: translateY(2px);
}

@media (max-width: 767px) {
  .st-social-proof {
    padding: 30px 0 26px;
  }

  .st-social-proof__title {
    padding: 0 16px;
    margin-bottom: 20px;
  }

  /* 4 cards in a row is too tight once each has an icon, a number, and a
     label - the brief calls for a 2x2 grid at this width instead. */
  .st-social-proof__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px;
  }

  .st-social-proof__card {
    padding: 16px 8px;
  }

  .st-social-proof__card i {
    font-size: 21px;
  }

  .st-social-proof__label {
    font-size: 11.5px;
  }

  .st-social-proof__cta {
    font-size: 13px;
    padding: 9px 18px;
  }
}

/* -------------------------------------------------- homepage SEO copy block */
.st-home-copy {
  padding: 50px 15px 10px;
}

.st-home-copy h2 {
  color: var(--st-gold);
  font-size: 26px;
  margin: 30px 0 12px;
}

.st-home-copy h2:first-child {
  margin-top: 0;
}

.st-home-copy p {
  font-size: 16px;
  line-height: 1.9;
  color: #f3ece4;
  margin-bottom: 8px;
}

.st-home-copy a {
  color: var(--st-gold);
  text-decoration: underline;
  font-weight: 600;
}

.st-home-copy a:hover {
  color: #fff;
}

/* Short intro line sitting between a section's H2 and its paragraph, in its
   own soft-shadow box - a lighter step against the dark page background
   rather than plain running text. Shared by the three sections that ask for
   one: Chef's Recommendations, Signature Burgers, and Steaks & Dishes. */
.st-home-copy__intro {
  display: inline-block;
  background-color: rgba(224, 192, 151, .1);
  border: 1px solid rgba(224, 192, 151, .3);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  padding: 10px 18px;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--st-gold);
  font-weight: 500;
}

/* Inside .menuoftheday the H2 already carries its own bottom margin, so the
   box needs a touch more room above it than the default. */
.st-home-copy__intro--dark {
  margin-top: 4px;
}

/* The paragraph under the burger cards' intro box - plain running text like
   the rest of .st-home-copy, just declared locally since .products is
   outside that container. */
.st-products-lead {
  color: #f3ece4;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 26px;
  max-width: 720px;
}

/* ------------------------------------------------ homepage: mobile typography */
@media (max-width: 767px) {
  /* "Best Steakhouse & Premium Beef Steak in Doha" ran to four lines at the
     inherited h1 size. This brings it to two balanced ones. */
  section.about .concept h1 {
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 10px;
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Both divider cards - "Our premium steaks are absolutely delicious..." and
     the "Enlightened hospitality..." one. index.css sizes them with
     clamp(23px, 2.5vw, 60px), which on a phone floors at 23px and overflowed
     the card. */
  .fixed h3 {
    font-size: 16px;
    line-height: 1.45;
    max-width: 90%;
    padding: 20px 16px;
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* ------------------------------------------------------------- menu page */
/* The H1 leads the page now that the image banner under it is gone. */
.menu-page .st-menu-title {
  color: var(--st-gold);
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 14px;
  text-wrap: balance;
}

/* Social proof cards: platform name, count, action button. Four across on
   desktop, 2x2 on phones - a slider or side-scroll is ruled out. Used on the
   menu page, where they replaced the single rating pill under the H1, and
   under the branch pages' hero heading.

   Close cousin of .st-social-proof on the homepage, kept separate because
   these cards carry a platform name and an action button that one does not. */
.st-social-cards {
  margin: 0 0 18px;
}

.st-social-cards__title {
  color: var(--st-gold);
  font-size: clamp(15px, 1.9vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 14px;
}

.st-social-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.st-social-cards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  border: 1px solid var(--st-brown);
  border-radius: 14px;
  background-color: rgba(92, 61, 46, .28);
  text-align: center;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.st-social-cards__card:hover {
  border-color: var(--st-gold);
  background-color: rgba(92, 61, 46, .45);
  transform: translateY(-3px);
}

.st-social-cards__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.st-social-cards__head i {
  font-size: 20px;
  color: var(--st-gold);
}

/* Grows to fill whatever height the tallest card needs, which is what keeps
   the four buttons on one line as a row rather than stepping up and down with
   the length of the text above them. */
.st-social-cards__stat {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #cdbba6;
}

.st-social-cards__stat strong {
  display: block;
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}

/* display:flex rather than inline-flex, with wrap: at two cards per row on a
   360px phone there is about 120px of usable width inside the button, and
   "CHECK ORGANIC REVIEWS" needs two lines to fit that. */
.st-social-cards__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 30px;
  background-color: var(--st-gold);
  color: var(--st-dark) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.st-social-cards__btn:hover {
  background-color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

@media (max-width: 767px) {
  /* 2x2, per the brief. */
  .st-social-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .st-social-cards {
    margin-bottom: 14px;
  }

  .st-social-cards__title {
    text-align: center;
    margin-bottom: 12px;
  }

  .st-social-cards__card {
    padding: 14px 10px;
    gap: 8px;
  }

  .st-social-cards__head {
    font-size: 11px;
    gap: 6px;
  }

  .st-social-cards__head i {
    font-size: 16px;
  }

  .st-social-cards__stat {
    font-size: 11.5px;
  }

  .st-social-cards__btn {
    font-size: 10px;
    padding: 8px;
    gap: 4px;
  }
}

/* Action bar. Sticks directly below the fixed site header, using the height
   _sticky_nav.html measures onto --st-header-h. z-index sits under the
   header's 5 so it slides beneath rather than over it. */
.st-menu-actions {
  position: sticky;
  top: var(--st-header-h, 80px);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  padding: 10px 12px;
  border-radius: 12px;
  background-color: rgba(45, 36, 36, .97);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}

/* The category list used to sit inside a <ul>, which index.css styled with
   "menu-page ul a { font-size: 20px; margin: 0 2vw }". Out of that wrapper the
   items fall back to bare Bootstrap, so they are themed here to match the
   dropdown in the site header. Capped in height because there are fourteen
   categories and the bar this hangs from is pinned near the top of the screen. */
.st-menu-actions .dropdown-menu {
  background-color: var(--st-dark);
  border: 1px solid var(--st-brown);
  border-radius: 8px;
  padding: 6px 0;
  max-height: 62vh;
  overflow-y: auto;
}

.st-menu-actions .dropdown-menu .dropdown-item {
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  padding: 9px 16px;
  white-space: nowrap;
}

.st-menu-actions .dropdown-menu .dropdown-item:hover,
.st-menu-actions .dropdown-menu .dropdown-item:focus {
  background-color: var(--st-brown);
  color: var(--st-gold);
}

/* Same pill shape and metrics as the floating buttons. */
.st-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  border: 0;
  border-radius: 30px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}

.st-action-btn:hover {
  transform: translateY(-1px);
}

.st-action-btn--book {
  background-color: var(--st-gold);
  color: var(--st-dark);
}

.st-action-btn--book:hover {
  background-color: #fff;
}

.st-action-btn--call,
.st-action-btn--directions {
  background-color: transparent;
  border: 2px solid var(--st-gold);
  color: var(--st-gold);
  padding: 8px 14px;
}

.st-action-btn--call:hover,
.st-action-btn--directions:hover {
  background-color: var(--st-gold);
  color: var(--st-dark);
}

/* index.css lays every .menu-page ul out as a centred flex row, which is for
   the category strip and the pagination. The FAQ's bullet list is neither. */
.menu-page .st-faq__list {
  display: block;
  list-style: disc;
  padding-left: 22px;
  margin: 10px 0 0;
}

.menu-page .st-faq__list li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* A third, quieter option in a branch pop-up. */
.st-choice-option--alt {
  background-color: transparent;
  border-style: dashed;
}

/* -------------------------------------------------------------- menu FAQ */
/* Card-per-question accordion: each item is its own raised panel with a
   circular +/- control on the right, all closed until asked for. <details>
   under it all, so it opens and closes with no JavaScript. */
.st-faq {
  margin: 44px 0 10px;
}

/* Sized so the longest of the three headings - "Frequently Asked Questions
   About Steak Town Airport Street (Avenue Mall)", 71 characters - finishes on
   one line at every desktop width. 44px needed about 1560px of room and wrapped
   it in two; the vw term is what keeps it on one line in the 960px container
   between 992 and 1199px, where the cap alone would not. */
.st-faq__title {
  color: var(--st-gold);
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1.25;
  font-weight: 800;
  text-align: center;
  margin-bottom: 34px;
}

.st-faq__item {
  /* Stated rather than assumed: these sit inside a footer that grids its
     children, so nothing should be left to the default. */
  display: block;
  width: 100%;
  border: 1px solid var(--st-brown);
  border-radius: 16px;
  background-color: rgba(92, 61, 46, .3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  margin-bottom: 14px;
  padding: 0 24px;
  transition: border-color .2s ease, background-color .2s ease;
}

.st-faq__item:hover,
.st-faq__item[open] {
  border-color: var(--st-gold);
  background-color: rgba(92, 61, 46, .42);
}

.st-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 56px 22px 0;
  position: relative;
}

/* Safari draws its own triangle without this. */
.st-faq__item summary::-webkit-details-marker {
  display: none;
}

/* The question is an H3 for search engines; inline so it reads as one row. */
.st-faq__item summary h3 {
  display: inline;
  color: var(--st-gold);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  margin: 0;
}

/* The round control. A plain + and - rather than an icon font, so it cannot
   arrive as a blank box if Font Awesome is slow. */
.st-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(224, 192, 151, .16);
  color: var(--st-gold);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}

.st-faq__item[open] summary::after {
  content: "\2212";                 /* minus */
  background-color: var(--st-gold);
  color: var(--st-dark);
}

.st-faq__item p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.8;
  color: #f3ece4;
}

.st-faq__item a {
  color: var(--st-gold);
  font-weight: 600;
}

/* The FAQ is a band of its own between the last page section and the footer.

   It used to be rendered inside <footer>, which put it below the logo and the
   contact columns and meant it had to fight "footer .container { display:
   grid }" to stop the heading and questions being dealt across three columns.
   Out here .container is Bootstrap's plain one, so none of that is needed -
   only the page's own background, which the section states rather than
   inherits so it never sits on a lighter strip if the body colour changes. */
.st-faq--home {
  background-color: var(--st-dark);
  margin: 0;
  padding: 10px 0 64px;
}

.st-faq--home .st-faq__title {
  text-align: center;
}

@media (max-width: 767px) {
  .st-faq--home {
    padding: 6px 0 40px;
  }
}

@media (max-width: 767px) {
  /* Two neat lines on a phone, per the brief:
       "Steak Town Restaurant Menu | Best Steakhouse"
       "in Doha, Qatar"
     .st-menu-title__tail forces where the break falls; this size is what makes
     the first of those two lines actually fit. Forty-three characters at
     roughly half the font size each needs about 15px on a 360px screen, so it
     tracks the viewport instead of sitting at a fixed 21px, which pushed the
     heading into three lines. */
  .menu-page .st-menu-title {
    font-size: clamp(13.5px, 4.2vw, 19px);
    line-height: 1.4;
    text-align: center;
    margin-bottom: 12px;
  }

  .menu-page .st-menu-title__tail {
    display: block;
  }

  /* Get Directions leaves the bar on phones, per the brief, so Categories,
     Call Us and Book Your Table have it to themselves. Nothing is lost by it:
     the floating button stack carries Directions on every page, and the
     desktop bar still shows all four.

     flex-grow on each of the three spreads whatever is left over across them,
     so the row ends flush at the right rather than trailing empty space.
     Growth only ever consumes free space, so it cannot push the last button
     off the line; nowrap holds them together and min-width: 0 stops any one of
     them forcing an overflow. */
  .st-menu-actions .st-action-btn--directions {
    display: none;
  }

  .st-menu-actions {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 9px 8px;
    margin-bottom: 20px;
  }

  .st-menu-actions__cats {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Three buttons rather than four give back the width the fourth was using,
     so the labels go up from 11px and the pills get taller - the brief asks
     for this bar to read as spacious, not merely to fit. */
  .st-menu-actions .btn.btn-lg {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
  }

  .st-action-btn {
    padding: 8px 10px;
    font-size: 12px;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  .st-action-btn--call {
    padding: 7px 9px;
  }

  /* The labels alone say what each button does, and a glyph plus its gap is
     width spent three times over. */
  .st-action-btn i {
    display: none;
  }

  /* Wraps rather than fits on a phone, so this only has to scale cleanly. */
  .st-faq__title {
    font-size: clamp(16px, 4.6vw, 22px);
    margin-bottom: 22px;
  }

  .st-faq__item {
    border-radius: 14px;
    padding: 0 16px;
    margin-bottom: 10px;
  }

  .st-faq__item summary {
    padding: 16px 44px 16px 0;
  }

  .st-faq__item summary h3 {
    font-size: 15px;
  }

  /* Smaller control, still a 30px target. */
  .st-faq__item summary::after {
    width: 30px;
    height: 30px;
    font-size: 19px;
  }

  .st-faq__item p {
    font-size: 14px;
    margin-bottom: 18px;
  }
}

/* Narrow phones: one more step down so the three still share the line. This
   used to start at 400px, when a fourth button had to fit too; with Directions
   gone the bar holds its full size down to about 360px, so the step only
   applies below that. */
@media (max-width: 360px) {
  .st-menu-actions {
    gap: 6px;
    padding: 7px 6px;
  }

  .st-menu-actions .btn.btn-lg {
    padding: 7px 8px;
    font-size: 10.5px;
  }

  .st-action-btn {
    padding: 7px 8px;
    font-size: 10.5px;
  }

  .st-action-btn--call {
    padding: 6px 7px;
  }
}

/* Menu page intro copy, with links back to the home and contact pages. */
.st-menu-copy {
  margin: 10px 0 22px;
}

.st-menu-copy h2 {
  color: var(--st-gold);
  font-size: 22px;
  margin: 20px 0 10px;
}

.st-menu-copy h3 {
  color: var(--st-gold);
  font-size: 18px;
  margin: 24px 0 8px;
}

.st-menu-copy p {
  font-size: 15px;
  line-height: 1.85;
  color: #f3ece4;
  margin-bottom: 8px;
}

.st-menu-copy a {
  color: var(--st-gold);
  text-decoration: underline;
  font-weight: 600;
}

@media (max-width: 767px) {
  .st-menu-copy h2 {
    font-size: 17px;
    text-align: center;
  }

  .st-menu-copy h3 {
    font-size: 15px;
    text-align: center;
  }

  .st-menu-copy p {
    font-size: 13px;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .st-home-copy {
    padding: 34px 18px 6px;
  }

  .st-home-copy h2 {
    font-size: 19px;
    margin: 22px 0 10px;
    text-align: center;
  }

  .st-home-copy p {
    font-size: 14px;
    line-height: 1.8;
  }

  .st-home-copy__intro {
    display: block;
    font-size: 13px;
    padding: 9px 14px;
    text-align: center;
  }

  .st-products-lead {
    font-size: 14px;
    text-align: center;
    margin: 0 auto 20px;
  }

  .st-menu-links {
    font-size: 13px;
    text-align: center;
  }

  /* index.css leaves this at Bootstrap's default 2rem (32px), which is fine
     on the old short heading but ran the new longer copy close to wrapping
     awkwardly on narrow phones. */
  section.products h2 {
    font-size: 22px;
    line-height: 1.35;
    padding: 0 8px;
  }

  .st-section-title {
    font-size: 19px;
    line-height: 1.35;
    padding: 0 8px;
  }
}

/* ------------------------------------------- homepage cards: "View More" */
/* index.css lays .card-body out as a flex column, so margin-top:auto pins the
   link to the bottom of the body however long the description runs - the three
   cards' buttons stay on one line with each other. */
/* A filled pill, not an underlined word: the old treatment read as body text
   and people did not know it was clickable. The arrow slides on hover. */
section.products .card .card-body .st-card-link,
a.see-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 30px;
  background-color: var(--st-gold);
  color: var(--st-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  width: fit-content;
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

section.products .card .card-body .st-card-link {
  align-self: flex-start;
  margin-top: auto;
}

/* index.css puts the chef link on a brown chip; this replaces that wholesale,
   so the margin it relied on is restated here. */
a.see-more {
  margin: 10px 0;
}

section.products .card .card-body .st-card-link:hover,
a.see-more:hover,
section.products .card .card-body .st-card-link:focus,
a.see-more:focus {
  background-color: #fff;
  color: var(--st-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  text-decoration: none;
}

.st-card-link__arrow {
  display: inline-block;
  transition: transform .2s ease;
}

.st-card-link:hover .st-card-link__arrow,
a.see-more:hover .st-card-link__arrow {
  transform: translateX(4px);
}

/* RTL: the arrow points the other way, so it should travel the other way. */
[dir="rtl"] .st-card-link:hover .st-card-link__arrow,
[dir="rtl"] a.see-more:hover .st-card-link__arrow,
html[lang="ar"] .st-card-link:hover .st-card-link__arrow,
html[lang="ar"] a.see-more:hover .st-card-link__arrow {
  transform: translateX(-4px);
}

@media (max-width: 767px) {
  /* index.css centres the card text on phones; the link follows it. Bigger
     touch target, too - 40px tall clears the usual minimum. */
  section.products .card .card-body .st-card-link {
    align-self: center;
  }

  section.products .card .card-body .st-card-link,
  a.see-more {
    padding: 11px 20px;
    font-size: 12px;
  }
}

/* Section heading promoted from <h4> to <h2>. Bootstrap renders h2 at 2rem
   against h4's 1.5rem, so this holds the size it has always had. */
.st-section-title {
  font-size: 1.5rem;
}

/* The chef-selection dish name used to be a <button>; index.css styles it by
   element name, so the same look is repeated here for the heading that
   replaced it. Both rules from index.css are folded into one - the later of
   the two won on the button as well. */
section.menuoftheday .menu .menu-items .menu-item .food-info h5.food-info__title {
  background: transparent;
  color: var(--st-gold);
  width: fit-content;
  font-size: clamp(17px, 1.5vw, 25px);
  font-weight: bold;
  padding: 0;
  border: none;
  float: left;
  margin: 0 0 5px;
}

/* ------------------------------------------------------------ video section */
.st-videos {
  background-color: var(--st-dark);
  padding: 60px 0;
}

.st-videos__title {
  color: var(--st-gold);
  text-align: center;
  margin-bottom: 34px;
  /* Scales with the viewport instead of sitting at a flat 28px. */
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.25;
}

/* Two per row on phones - a 2x2 grid for the usual four videos - and all four
   side by side from tablet up. Fixed column counts rather than auto-fill, so
   the row is exactly as specified instead of depending on the card width. */
.st-videos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .st-videos__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

@media (min-width: 992px) {
  .st-videos__grid {
    gap: 24px;
  }
}

.st-video-card {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  display: block;
  width: 100%;
}

.st-video-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.st-video-card:hover .st-video-card__thumb {
  transform: scale(1.06);
}

.st-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(224, 192, 151, .92);
  color: var(--st-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding-left: 4px;
}

.st-video-card__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 12px;
  color: #fff;
  font-size: 14px;
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
}

/* ------------------------------------------------------------- video modal */
.st-video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.st-video-modal.is-open {
  display: block;
}

.st-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .82);
}

/* Centred with equal gaps either side. The width is capped by whichever runs
   out first - the screen width, or the height a 16:9 frame would need - so the
   player grows to fill a laptop screen exactly the way it fills a phone. */
.st-video-modal__body {
  position: relative;
  z-index: 1;
  width: min(94vw, calc((88vh - 60px) * 16 / 9));
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.st-video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 991px) {
  /* Phones are width-bound long before they are height-bound. */
  .st-video-modal__body {
    width: 94vw;
  }

  .st-video-modal__close {
    top: -40px;
  }
}

.st-video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.st-video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background-color: var(--st-gold);
  color: var(--st-dark);
  font-size: 17px;
  cursor: pointer;
}

/* ---------------------------------------------- Instagram reels (home + branches) */
.st-reels {
  background-color: var(--st-dark);
  padding: 50px 0 44px;
}

.st-reels__title {
  color: var(--st-gold);
  text-align: center;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.3;
  margin: 0 auto 30px;
  max-width: 900px;
}

/* Four across on desktop, in a single row as specified. Reels are vertical
   (9:16), so the tiles follow that shape rather than the 16:9 box the YouTube
   grid uses elsewhere on the site. */
.st-reels__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

/* A poster tile, not a live embed - see the note in _reels.html for why.
   It is a <button> because it opens the modal, so the browser default button
   styling has to be unwound first. */
.st-reel-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--st-brown);
  border-radius: 12px;
  overflow: hidden;
  background-color: #000;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}

.st-reel-card:hover,
.st-reel-card:focus-visible {
  border-color: var(--st-gold);
  transform: translateY(-3px);
}

/* Covers the tile whatever shape the source cover happens to be - one of the
   four is 2:3 rather than 9:16. */
.st-reel-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.st-reel-card:hover .st-reel-card__thumb {
  transform: scale(1.04);
}

.st-reel-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .55);
  border: 2px solid rgba(255, 255, 255, .9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  /* Nudged right so the triangle looks centred rather than measuring centred. */
  padding-left: 4px;
  transition: background-color .2s ease, transform .2s ease;
}

.st-reel-card:hover .st-reel-card__play {
  background-color: var(--st-gold);
  color: var(--st-dark);
  transform: translate(-50%, -50%) scale(1.08);
}

.st-reel-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
}

/* The real embed, opened from a tile - which is where it lives rather than in
   the grid, because Instagram's embed carries its own white header and ground
   and cannot be restyled through a cross-origin iframe. Against the backdrop
   here that white chrome reads as a focused player; four of them in the dark
   grid read as four white boxes.

   400px wide: Instagram fits the 9:16 video inside its own side padding, so
   the video itself comes out around 325px across and the header and caption
   sit above and below it. */
.st-reel-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.st-reel-modal.is-open {
  display: flex;
}

.st-reel-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .82);
}

.st-reel-modal__body {
  position: relative;
  width: min(94vw, 400px);
  height: min(88vh, 780px);
  background-color: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}

.st-reel-modal__frame,
.st-reel-modal__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.st-reel-modal__close {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background-color: var(--st-gold);
  color: var(--st-dark);
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* Clear of the floating call/book/directions stack in the bottom corner. */
@media (max-width: 575px) {
  .st-reel-modal__close {
    top: 6px;
    right: 6px;
  }
}
.st-reels__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 30px auto 0;
  padding: 12px 28px;
  border-radius: 30px;
  background-color: var(--st-gold);
  color: var(--st-dark) !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.st-reels__cta i {
  font-size: 18px;
}

.st-reels__cta:hover {
  background-color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

@media (max-width: 767px) {
  .st-reels {
    padding: 36px 0 32px;
  }

  .st-reels__title {
    padding: 0 16px;
    margin-bottom: 20px;
  }

  /* 2x2 grid on phones, per the brief - two 9:16 posters per row read fine
     at half-width. */
  .st-reels__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px;
  }

  .st-reel-card__play {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  .st-reel-card__badge {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .st-reels__cta {
    font-size: 13px;
    padding: 10px 22px;
  }
}

/* --------------------------------------------------- social popularity grid */
.st-social-grid {
  background-color: var(--st-dark);
  padding: 10px 0 54px;
  /* Lands the "Explore All Socials" jump below the fixed header instead of
     flush against it, with a little breathing room past that. */
  scroll-margin-top: calc(var(--st-header-h, 80px) + 16px);
}

.st-social-grid__title {
  color: var(--st-gold);
  text-align: center;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.3;
  margin: 0 auto 30px;
  max-width: 800px;
}

/* 2 rows of 3 on desktop, as specified. */
.st-social-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}

.st-social-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 30px 20px;
  border: 1px solid var(--st-brown);
  border-radius: 14px;
  background-color: rgba(92, 61, 46, .22);
  transition: border-color .2s ease, background-color .2s ease;
}

.st-social-grid__card:hover {
  border-color: var(--st-gold);
  background-color: rgba(92, 61, 46, .38);
}

/* Icon + platform name, no subtitle, per the brief. */
.st-social-grid__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.st-social-grid__head i {
  font-size: 30px;
  color: var(--st-gold);
}

.st-social-grid__svg {
  width: 30px;
  height: 30px;
  color: var(--st-gold);
}

.st-social-grid__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 30px;
  background-color: var(--st-gold);
  color: var(--st-dark) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  text-align: center;
  transition: background-color .2s ease, transform .2s ease;
}

.st-social-grid__btn:hover {
  background-color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

@media (max-width: 767px) {
  .st-social-grid {
    padding: 6px 0 40px;
  }

  .st-social-grid__title {
    padding: 0 16px;
    margin-bottom: 20px;
  }

  /* 2-column grid on phones, per the brief - three rows of two rather than
     one column, so it does not run the page too long. */
  .st-social-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px;
  }

  .st-social-grid__card {
    padding: 20px 10px;
    gap: 14px;
  }

  .st-social-grid__head {
    font-size: 13px;
  }

  .st-social-grid__head i,
  .st-social-grid__svg {
    font-size: 24px;
    width: 24px;
    height: 24px;
  }

  /* Fills the card and wraps rather than sizing the card: at two per row on
     a 360px phone a card is about 158px wide, and the longest button copy
     does not fit that on one line. */
  .st-social-grid__btn {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 10.5px;
    line-height: 1.35;
    padding: 8px 10px;
    gap: 5px;
  }
}

/* Only genuinely narrow phones drop to one column. 420px used to be the
   cut-off, but 390-430px covers most handsets in use, so nearly every phone
   was getting six tall cards where the brief asks for three rows of two. What
   forced that width was the button copy - "SUBSCRIBE OUR CHANNEL" on a single
   line is wider than half a 360px screen - so the button above is now allowed
   to wrap onto two lines instead of setting the card's width. */
@media (max-width: 350px) {
  .st-social-grid__grid {
    grid-template-columns: 1fr;
    max-width: 300px;
  }

  .st-social-grid__card {
    padding: 18px 14px;
  }
}

/* ------------------------------------------------------------ branch pages */
.st-branch {
  background-color: var(--st-dark);
  color: #f3ece4;
  padding: 130px 0 70px;
}

/* The branch headings carry a location clause that the brief wants on one
   line on desktop and two below that. 28px is what lets the longest of them
   - "...Al Reem Street Near Lulu Center & Al Sadd", 71 characters - finish
   inside a 1140px container; the steps below keep that true as the container
   drops to 960 and then 720. */
.st-branch h1 {
  color: var(--st-gold);
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 10px;
}

.st-branch h2 {
  color: var(--st-gold);
  font-size: 24px;
  margin: 34px 0 12px;
}

.st-branch h3 {
  color: var(--st-gold);
  font-size: 20px;
  margin: 30px 0 12px;
}

.st-branch p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 14px;
}

.st-branch a {
  color: var(--st-gold);
}

.st-branch__lead {
  font-size: 18px;
  color: #fff;
}

/* ------------------------------------------------------ branch page hero */
/* The photograph is a real <img> so it can carry alt text, stretched behind
   the copy and dimmed by a gradient. The gradient is heaviest at the bottom,
   where the buttons sit, and the whole block still reads as brand dark if the
   image is slow or fails to load. */
.st-branch-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background-color: var(--st-dark);
  margin-bottom: 10px;
}

.st-branch-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Decorative behind text: keep it from stealing contrast. */
  opacity: .38;
}

.st-branch-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(45, 36, 36, .72) 0%,
              rgba(45, 36, 36, .84) 55%,
              rgba(45, 36, 36, .95) 100%);
}

.st-branch-hero__inner {
  position: relative;
  z-index: 1;
  padding: 34px 30px 30px;
}

.st-branch-hero__inner h1 {
  margin-top: 0;
}

@media (max-width: 767px) {
  .st-branch-hero {
    border-radius: 10px;
  }

  .st-branch-hero__inner {
    padding: 22px 16px 20px;
  }
}

/* Two columns on desktop (label | value), stacked rows on phones. */
.st-branch__details {
  background-color: rgba(92, 61, 46, .35);
  border: 1px solid var(--st-brown);
  border-radius: 10px;
  padding: 10px 26px;
  margin: 30px 0;
  list-style: none;
}

.st-branch__details li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 6px 18px;
  align-items: start;
  padding: 14px 0;
  font-size: 16px;
  border-bottom: 1px solid rgba(224, 192, 151, .15);
}

.st-branch__details li:last-child {
  border-bottom: 0;
}

.st-branch__details .label {
  color: var(--st-gold);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.st-branch__details .label i {
  width: 18px;
  text-align: center;
}

.st-branch__details .value {
  line-height: 1.6;
  word-break: break-word;
}

.st-branch__details a {
  font-weight: 700;
}

.st-branch__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 10px;
}

/* The pair sitting directly under the intro paragraph. */
.st-branch__cta--intro {
  margin: 18px 0 6px;
}

.st-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}

.st-btn:hover {
  transform: translateY(-2px);
}

.st-btn--primary {
  background-color: var(--st-gold);
  color: var(--st-dark) !important;
}

.st-btn--primary:hover {
  background-color: #fff;
}

.st-btn--whatsapp {
  background-color: #25d366;
  color: #fff !important;
}

.st-btn--outline {
  border: 2px solid var(--st-gold);
  color: var(--st-gold) !important;
}

.st-btn--outline:hover {
  background-color: var(--st-gold);
  color: var(--st-dark) !important;
}

.st-btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Map + "coming soon" placeholder */
.st-branch__map {
  margin: 26px 0;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}

.st-branch__map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

.st-branch__map-soon {
  border: 2px dashed var(--st-brown);
  border-radius: 10px;
  padding: 46px 24px;
  text-align: center;
  color: #cdbba6;
  line-height: 1.7;
}

.st-branch__map-soon i {
  font-size: 34px;
  color: var(--st-gold);
  margin-bottom: 12px;
  display: block;
}

/* ------------------------------------------------------ branch pages: RTL */
.st-branch--ar .st-branch__details .label {
  margin-right: 0;
}

.st-branch--ar .st-branch__details .label i {
  margin-left: 4px;
}

/* The bullet on the hours list and the details grid both assume LTR. */
.st-branch--ar .st-branch__details li {
  text-align: right;
}

.st-branch--ar .st-branch__map-soon,
.st-branch--ar .st-branch__switch {
  text-align: center;
}

[dir="rtl"] .wh-list li {
  padding-left: 0;
  padding-right: 12px;
}

[dir="rtl"] .wh-list li::before {
  left: auto;
  right: 0;
}

/* Branch switcher: heading on top, button centred underneath it, at every
   width. The two used to sit side by side on desktop, which read as a line of
   body text with a control after it rather than as the heading the brief asks
   for. */
.st-branch__switch {
  border-top: 1px solid var(--st-brown);
  margin-top: 44px;
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* ------------------------------------------------------------------ footer */
/* "Call us" and "Working hours" stay side by side at every width - index.css
   left them as flex items that the long hours text pushed apart. */
footer .container .footer-info .cw {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 14px 26px;
  align-items: start;
  justify-content: flex-start;
}

footer .container .footer-info .cw h4 {
  font-size: 15px;
  margin-bottom: 8px;
  white-space: nowrap;
}

footer .container .footer-info .cw .call a {
  font-size: 14px;
  line-height: 1.8;
  white-space: nowrap;
}

.wh-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wh-list li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 4px;
  line-height: 1.55;
  font-size: 13px;
}

.wh-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--st-gold);
}

footer .cr {
  font-size: 13px;
}

@media (max-width: 767px) {
  footer .container .footer-info .cw {
    gap: 10px 16px;
  }

  footer .container .footer-info .cw h4 {
    font-size: 13px;
    margin-bottom: 6px;
  }

  footer .container .footer-info .cw h4 i {
    margin-right: 5px;
  }

  footer .container .footer-info .cw .call a {
    font-size: 13px;
    line-height: 1.7;
  }

  .wh-list li {
    font-size: 11.5px;
    padding-left: 10px;
    margin-bottom: 3px;
  }

  footer .container.st-footer .social {
    margin-top: 18px;
  }

  footer .cr {
    font-size: 11px;
  }
}

footer .social .footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Seven icons in this row. index.css centres it with "width: fit-content;
   margin: auto", so anything wider than its column gets clipped at the edges -
   Tripadvisor, being last, disappears first. Pin it to the full width instead
   and share the leftover room out evenly.

   These selectors follow the footer markup, so they move with it. */
@media (max-width: 767px) {
  /* The seven icons fill the row rather than sitting as small chips with the
     leftover width thrown between them: each one flexes to an equal share, so
     the row reads as one bar. At a 10px gap that is a chip about 39px square
     on a 375px screen, carrying a 22px glyph. */
  footer .container.st-footer .social {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 8px;
    flex-wrap: nowrap;
    gap: 10px;
  }

  /* Square, not a tall pill: the width comes from the flex share and
     aspect-ratio takes the height from it, so the chip cannot drift out of
     shape with the glyph metrics or the line box.

     Same metrics as the desktop row above - a 22px glyph on a 10px gap - so
     the icon strip reads identically in both views. The glyph grows inside the
     chip; the gap takes its width off the chip, so the two are set together. */
  footer .container.st-footer .social .footer__social {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    margin: 0;
  }
}

/* Narrow phones: a step down so the seven still hold one line - at 320px this
   is a 34px chip with a 19px glyph. */
@media (max-width: 400px) {
  footer .container.st-footer .social {
    padding: 0 6px;
    gap: 8px;
  }

  footer .container.st-footer .social .footer__social {
    font-size: 19px;
  }
}

/* Inline SVG icons (Tripadvisor) matched to the font-icon size around them. */
.st-icon-svg {
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
}

/* ------------------------------------------------------- phone refinements */
@media (max-width: 767px) {
  .st-branch {
    padding-top: 110px;
  }

  /* Sized against the viewport so the first of the two lines still fits:
     "Best Steakhouse in Bin Mahmoud Al Reem Street" is 45 characters, which
     needs roughly 13px inside a 360px screen once the container and hero
     padding are taken off. A flat 20px pushed it to three lines. */
  .st-branch h1 {
    font-size: clamp(12px, 3.5vw, 18px);
    line-height: 1.4;
    text-align: center;
    margin-bottom: 16px;
    text-wrap: balance;
  }

  .st-branch h1 .st-h1-brand {
    font-size: .92em;
    margin-top: 4px;
  }

  .st-branch h2 {
    font-size: 17px;
    margin: 26px 0 10px;
  }

  .st-branch h3 {
    font-size: 16px;
  }

  .st-branch p {
    font-size: 14px;
    line-height: 1.75;
  }

  .st-branch__lead {
    font-size: 15px;
  }

  .st-branch .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Label above value instead of a cramped two-column grid. */
  .st-branch__details {
    padding: 6px 16px;
  }

  .st-branch__details li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
    font-size: 14px;
  }

  .st-branch__details .value {
    font-size: 14px;
  }

  .st-branch__cta {
    gap: 10px;
  }

  .st-btn {
    padding: 11px 18px;
    font-size: 13px;
    flex: 1 1 100%;
    justify-content: center;
  }

  .st-branch__map iframe {
    height: 300px;
  }

  .st-branch__map-soon {
    padding: 30px 16px;
    font-size: 14px;
  }

  .st-videos {
    padding: 40px 0;
  }

  .st-videos__title {
    font-size: 20px;
  }

  /* Four stacked buttons is a lot of corner on a phone, so they shed their
     icons and run on the label alone - the words already say which is which,
     and dropping each glyph plus its gap gives most of that width back. */
  .st-float-stack {
    right: 10px;
    bottom: 12px;
    gap: 6px;
    max-width: 46vw;
  }

  .st-float-btn {
    padding: 7px 12px;
    font-size: 11px;
    gap: 0;
  }

  .st-float-btn i {
    display: none;
  }

  .st-choice-modal__body {
    padding: 20px 18px 16px;
  }

  .st-choice-modal__title {
    font-size: 16px;
  }
}

/* ------------------------------------------- branch pages: 2026 additions */
/* One line on desktop, two from tablet down. The break was previously tied to
   767px, which left 768-991px trying to fit the whole clause on one line in a
   720px container. */
@media (max-width: 991px) {
  .st-branch h1 .st-h1-brand {
    display: block;
    color: #f3ece4;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .st-branch h1 {
    font-size: 24px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .st-branch h1 {
    font-size: 22px;
  }
}

/* Social proof cards sit over the hero photograph here rather than a flat dark
   background, so the fill goes near-opaque to hold the text legible. */
.st-branch-hero__inner .st-social-cards {
  margin: 16px 0 22px;
}

.st-branch-hero__inner .st-social-cards__card {
  background-color: rgba(45, 36, 36, .82);
  border-color: rgba(224, 192, 151, .35);
}

.st-branch-hero__inner .st-social-cards__card:hover {
  background-color: rgba(45, 36, 36, .92);
}

/* The reels strip is a full-width band on the homepage. Inside a branch page
   it is one section among others and already sits in .st-branch's container,
   so the band background and the second container both come off - otherwise
   the gutters double up and a dark stripe cuts across the page. */
.st-branch .st-reels {
  background-color: transparent;
  padding: 6px 0 0;
}

.st-branch .st-reels > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.st-branch .st-reels__title {
  font-size: clamp(17px, 2.1vw, 26px);
  margin-bottom: 22px;
}

/* The Google reviews button above the map, centred on both views per the
   brief. Only this row - the button row under the intro is a left-aligned
   cluster and stays one. */
.st-branch__cta--center {
  justify-content: center;
}

/* The switcher label is a heading now rather than body text. Inside the
   switcher's flex row its heading margins have to come off, or it pushes the
   button onto its own line. */
.st-branch h3.st-branch__switch-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  color: var(--st-gold);
}

@media (max-width: 767px) {
  /* Four full-width rows become a 2x2 grid. The order is set here rather than
     in the markup so the desktop sequence is left exactly as it was: the grid
     runs Check Menu / Call Us across the first row and Book a Table / Get
     Directions across the second, which is the order the brief numbers them. */
  .st-branch__cta--intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .st-branch__cta--intro .st-btn {
    flex: initial;
    width: 100%;
    padding: 11px 8px;
    font-size: 12px;
    gap: 6px;
    justify-content: center;
    text-align: center;
  }

  .st-branch-act--menu {
    order: 1;
  }

  .st-branch-act--call {
    order: 2;
  }

  .st-branch-act--book {
    order: 3;
  }

  .st-branch-act--directions {
    order: 4;
  }

  /* Centred and free to wrap rather than stretched edge to edge: the label is
     long enough to overrun a 360px screen on one line. */
  .st-branch__cta--center .st-btn {
    flex: initial;
    max-width: 100%;
    font-size: 12.5px;
    padding: 10px 16px;
    text-align: center;
  }

  /* The label is 44 characters; sized against the viewport it stays on one
     line down to about 340px and wraps inside the pill below that rather than
     running off the screen. */
  .st-branch__switch .st-btn {
    flex: initial;
    max-width: 100%;
    font-size: clamp(11px, 3.2vw, 13px);
    padding: 10px 14px;
    text-align: center;
  }

  .st-branch h3.st-branch__switch-title {
    font-size: 17px;
  }
}

/* ============================================================================
   2026-09 content briefs: home page and menu page
   Alignment, one-line headings, spacing and button treatments asked for in
   "SteakTown Website ReStructure & Content (14)" and "(15)".
   ========================================================================= */

/* ---------------------------------------------- headings kept to one line */
/* --st-ch on the element is its character count. The size that holds a string
   on one line is (available width) / (characters x average glyph width);
   143 is 80% of the viewport - the narrowest of the gutters these headings sit
   in - divided by Cairo's ~0.56em average advance. min() rather than clamp():
   a floor would let the longest heading overflow on a very narrow phone, and
   shrinking is the safer way to fail.

   _fit_titles.html then measures each one and grows it to the real fit, so
   this is the no-JavaScript baseline rather than the final size. overflow +
   ellipsis means even a bad estimate clips inside the box instead of pushing
   the page sideways. */
@media (max-width: 767px) {
  .st-home-copy h2.st-fit-line,
  section.products h2.st-fit-line,
  .st-menu-copy h2.st-fit-line,
  .st-menu-copy h3.st-fit-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    font-weight: 800;
    letter-spacing: -.01em;
    font-size: min(calc(143vw / var(--st-ch, 40)), 22px);
  }
}

/* ------------------------------------------- home: the concept paragraph */
/* index.css centres .about .concept and leaves the paragraph at line-height
   1.2 with a stray 5px left margin, so it read as a cramped block sitting off
   its heading. Justified, with real leading and a measure that stops at a
   comfortable line length, it squares off against the H1 above it. */
.about .concept h1 {
  text-align: center;
}

.about .concept p {
  margin: 14px auto 0;
  max-width: 62ch;
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

@media (max-width: 767px) {
  .about .concept {
    padding: 16px 4px 0;
  }

  .about .concept p {
    line-height: 1.7;
  }
}

/* --------------------------------- home: centred titles, justified copy */
@media (min-width: 768px) {
  /* text-align on the block centres the H2s and the inline-block intro box in
     one go; the paragraphs opt back out to justified just below. */
  .st-home-copy {
    text-align: center;
  }

  .st-home-copy p {
    max-width: 900px;
    margin-inline: auto;
    text-align: justify;
    text-justify: inter-word;
  }

  .st-home-copy .st-home-copy__intro {
    text-align: center;
  }

  section.products h2 {
    text-align: center;
  }

  /* The highlight box is gone from this section - one paragraph now, centred
     under the title and held to a measure that lands it on two balanced lines
     rather than one long one. */
  .st-products-lead {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }

  /* Chef's Recommendations: title and its line of copy centred directly above
     the food box. The intro is an inline-block card, so it needs its own
     centring rather than inheriting it from a section that also holds the
     left-aligned menu items. */
  .menuoftheday > .st-section-title {
    text-align: center;
  }

  .menuoftheday > .st-home-copy__intro--dark {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .st-products-lead {
    text-wrap: balance;
  }
}

/* --------------------------- home: social buttons match the menu page ones */
/* "WATCH MORE FOOD REELS" and "SUBSCRIBE OUR CHANNEL" were breaking out of
   their pills at two cards per row. These are the menu page's own button
   metrics, which fit the same copy in the same width. */
@media (max-width: 767px) {
  .st-social-grid__card {
    padding: 16px 10px;
    gap: 12px;
  }

  .st-social-grid__btn {
    font-size: 10px;
    padding: 8px;
    gap: 4px;
    line-height: 1.35;
  }
}

/* --------------------------------------------------- home: vertical rhythm */
/* index.css spaces these sections 80-100px apart, which is a lot of empty
   brown between them on a laptop and most of a screen on a phone. */
section.about {
  margin: 56px auto;
}

.fixed {
  margin-bottom: 56px;
}

.fixed2 {
  margin: 56px 0;
}

.menuoftheday {
  margin-top: 40px;
  margin-bottom: 64px;
}

.st-reels {
  padding: 40px 0 36px;
}

.st-social-proof {
  padding: 32px 0 30px;
}

.st-social-grid {
  padding: 10px 0 40px;
}

.st-home-copy {
  padding: 40px 15px 10px;
}

@media (max-width: 767px) {
  section.about {
    margin: 28px auto 22px;
  }

  .fixed {
    margin-bottom: 24px;
  }

  .fixed2 {
    margin: 24px 0;
  }

  .menuoftheday {
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .st-reels {
    padding: 24px 0 22px;
  }

  .st-social-proof {
    padding: 22px 0 18px;
  }

  .st-social-grid {
    padding: 6px 0 24px;
  }

  .st-home-copy {
    padding: 22px 18px 6px;
  }

  .st-faq--home {
    padding: 4px 0 36px;
  }
}

/* ------------------------------- floating buttons match the menu action bar */
/* Call us and Directions now carry the menu bar's treatment: gold hairline,
   gold label, the same padding and the same icons. The fill is the bar's own
   panel colour rather than "transparent", because these float over photography
   and a see-through pill drops out of the page. */
.st-float-btn--call,
.st-float-btn--directions {
  background-color: rgba(45, 36, 36, .97);
  border: 2px solid var(--st-gold);
  color: var(--st-gold);
  padding: 8px 14px;
}

.st-float-btn--call:hover,
.st-float-btn--directions:hover {
  background-color: var(--st-gold);
  color: var(--st-dark);
}

/* Black on the WhatsApp green, per the brief - it also takes the label from
   2.4:1 against that fill to 9.6:1. */
.st-float-btn--book,
.st-float-btn--book:hover {
  color: #111;
}

/* ------------------------------------------------------ menu page: layout */
@media (min-width: 768px) {
  .menu-page .st-menu-title,
  .st-social-cards__title {
    text-align: center;
  }

  /* The four action buttons sat flush left in a full-width bar. */
  .st-menu-actions {
    justify-content: center;
  }

  /* The copy block's headings lead their sections, so they carry a little more
     weight here than the body text around them. */
  .st-menu-copy h2 {
    font-size: 26px;
  }

  .st-menu-copy h3 {
    font-size: 21px;
  }
}

@media (max-width: 767px) {
  /* Centred, narrow paragraphs read as captions. These are body copy, so they
     take the same flush edge as the FAQ answers below them. text-align: start
     keeps that right-flush on the Arabic pages. */
  .st-menu-copy p {
    font-size: 14px;
    line-height: 1.85;
    text-align: start;
  }

  /* "Food Categories" is longer than "Categories" was, and this button shares
     a nowrap row with two others. */
  .st-menu-actions .btn.btn-lg {
    font-size: 11.5px;
    padding: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* "Developer Note: Menu Page Layout Updates": Food Categories is now the only
   button in the bar, so it grows into a large, easy target. The (min-width:
   768px) rule above already centres the bar's contents on desktop. The extra
   .menu-page / __cats in these selectors is what outranks the older
   three-button sizing earlier in this file. */
.menu-page .st-menu-actions .st-menu-actions__cats .btn.btn-lg {
  min-height: 58px;
  padding: 16px 44px;
  font-size: 19px;
  border-radius: 40px;
  gap: 12px;
}

@media (max-width: 767px) {
  /* Phones: centred as on desktop (client follow-up to the brief, which first
     asked for it on the leading side). */
  .menu-page .st-menu-actions {
    justify-content: center;
    padding: 10px 12px;
  }

  .menu-page .st-menu-actions__cats {
    flex: 0 1 auto;
    max-width: 100%;
  }

  .menu-page .st-menu-actions .st-menu-actions__cats .btn.btn-lg {
    width: auto;
    max-width: 100%;
    min-height: 52px;
    padding: 14px 30px;
    font-size: 16.5px;
  }
}

/* ============================================================================
   2026-09 content briefs: branch pages and contact page
   Asked for in "SteakTown Website ReStructure & Content (16)", "(17)" and
   "(18)".
   ========================================================================= */

/* --------------------------------------------------- branch pages: desktop */
@media (min-width: 768px) {
  /* Every title and every paragraph centred, per briefs (16) and (17). The
     copy keeps a measure so centred lines stay readable rather than running
     the full 1320px container. */
  .st-branch h1,
  .st-branch h2,
  .st-branch h3,
  .st-branch h4,
  .st-branch p {
    text-align: center;
  }

  .st-branch p {
    max-width: 980px;
    margin-inline: auto;
  }

  /* A step larger than the old fixed 28/24px, and fluid rather than stepped,
     so they scale smoothly from a 1024px laptop to a wide monitor. These
     replace the 24px/22px steps set for 768-991 and 992-1199 above. */
  .st-branch h1 {
    font-size: clamp(24px, 2.4vw, 32px);
  }

  .st-branch h2 {
    font-size: clamp(21px, 1.85vw, 27px);
  }

  /* The intro paragraph reads as one block under the heading. It takes the
     hero's full width and balances its lines instead of leaving a short
     orphan on the last one.

     Note: the brief asks for exactly three lines. At 550 characters that
     needs roughly 12px to hold three lines even on a wide monitor, which is
     too small for a lead paragraph, so this lands on three lines on a wide
     screen and four on a narrow one. Shortening the copy is the only way to
     make three lines hold everywhere. */
  .st-branch__lead {
    max-width: 100%;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.75;
    text-wrap: pretty;
  }

  /* Slim pills, matching the social cards' buttons above them, centred as a
     row rather than pushed against the left edge. */
  .st-branch__cta {
    justify-content: center;
  }

  .st-branch__cta--intro .st-btn {
    padding: 9px 20px;
    font-size: 13.5px;
    gap: 7px;
  }

  .st-branch__cta--intro .st-btn i {
    font-size: 13px;
  }
}

/* The details heading is an h4 now - "Bin Mahmoud Restaurant Info (Al Reem
   Street)" rather than "Branch Details" - so it needs the size the h2 it
   replaced used to get from the cascade. */
.st-branch h4.st-branch__details-title {
  color: var(--st-gold);
  font-size: 22px;
  font-weight: 700;
  margin: 34px 0 12px;
}

/* ---------------------------------------------------- branch pages: mobile */
@media (max-width: 767px) {
  /* The H1 takes the menu page's own mobile treatment, per brief (16). */
  .st-branch h1 {
    font-size: clamp(13.5px, 4.2vw, 19px);
    margin-bottom: 12px;
  }

  /* The social cards were breaking their labels and buttons here only because
     the hero's padding sat on top of the container's, leaving each card
     noticeably narrower than the same component gets on the menu page. Giving
     that width back is the whole fix - the cards' own metrics are shared. */
  .st-branch .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .st-branch-hero__inner {
    padding: 16px 8px 16px;
  }

  .st-branch-hero__inner .st-social-cards {
    margin: 12px 0 16px;
  }

  .st-branch h2,
  .st-branch h3,
  .st-branch h4.st-branch__details-title {
    text-align: center;
  }

  .st-branch h4.st-branch__details-title {
    font-size: 17px;
    font-weight: 800;
    margin: 24px 0 10px;
  }

  /* Branch details, per the screenshots in briefs (16) and (17): the icon and
     its label centred on their own line, the value centred on the line below
     - so the phone and WhatsApp numbers each sit under their label rather
     than beside it. */
  .st-branch__details {
    padding: 4px 14px;
  }

  .st-branch__details li {
    display: block;
    text-align: center;
    padding: 12px 0;
  }

  .st-branch__details .label {
    display: flex;
    justify-content: center;
  }

  .st-branch__details .value {
    display: block;
    margin-top: 6px;
  }
}

/* ------------------------------------------------------------ contact page */
/* Form on one side, a card per branch on the other; a single column on
   phones, ordered form -> Bin Mahmoud -> Airport Street. The map embed and the
   old single info panel are gone from the markup. */
.st-contact .contact.st-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* index.css sizes this form at 70% inside the old flex row; in the grid it
   fills its own column. */
.st-contact .contact .st-contact__form form.form-floating {
  width: 100%;
  text-align: start;
}

.st-contact__privacy {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #cdbba6;
}

.st-contact__branches {
  display: grid;
  gap: 18px;
}

.st-contact__branch {
  background-color: rgba(92, 61, 46, .35);
  border: 1px solid var(--st-brown);
  border-radius: 14px;
  padding: 20px 22px;
}

.st-contact .st-contact__branch-title {
  color: var(--st-gold);
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
}

.st-contact__branch-sub {
  margin: 4px 0 14px;
  font-size: 13px;
  color: #cdbba6;
}

.st-contact__facts {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.st-contact__facts li {
  padding: 9px 0;
  border-bottom: 1px solid rgba(224, 192, 151, .15);
}

.st-contact__facts li:last-child {
  border-bottom: 0;
}

.st-contact__fact-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--st-gold);
  font-size: 13px;
  font-weight: 700;
}

.st-contact__fact-label i {
  width: 16px;
  text-align: center;
}

.st-contact__fact-value {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.6;
  color: #f3ece4;
}

.st-contact__fact-value a {
  color: #f3ece4;
  font-weight: 700;
  text-decoration: none;
}

.st-contact__fact-value a:hover {
  color: var(--st-gold);
}

/* Same pill as the branch pages' outline buttons, so the two pages read as one
   design. */
.st-contact__map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 10px 18px;
  border: 2px solid var(--st-gold);
  border-radius: 30px;
  color: var(--st-gold);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.st-contact__map-btn:hover {
  background-color: var(--st-gold);
  color: var(--st-dark);
  transform: translateY(-2px);
  text-decoration: none;
}

@media (max-width: 991px) {
  .st-contact .contact.st-contact__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 767px) {
  .st-contact__branch {
    padding: 16px 16px;
  }

  .st-contact .st-contact__branch-title {
    font-size: 17px;
  }

  .st-contact__facts li {
    padding: 8px 0;
  }

  .st-contact__fact-value {
    font-size: 13.5px;
  }

  .st-contact__map-btn {
    font-size: 12.5px;
    padding: 10px 14px;
  }
}

/* Branch page headings that the briefs want on one line on phones - the
   switcher titles, the details h4, and Airport Street's two long section
   headings. Same mechanism as the block above; it sits at the end of the file
   because the branch rules just above set their own mobile sizes and would
   otherwise win on source order. */
@media (max-width: 767px) {
  .st-branch h2.st-fit-line,
  .st-branch h3.st-fit-line,
  .st-branch h4.st-fit-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    font-weight: 800;
    letter-spacing: -.01em;
    font-size: min(calc(143vw / var(--st-ch, 40)), 22px);
  }
}

/* ============================================================================
   2026-09 page-by-page briefs: home, Bin Mahmoud, Airport Street, contact
   ========================================================================= */

/* --------------------------------------------------- header stays on screen */
/* Reported as the sticky bar going missing while scrolling on phones. index.css
   gives nav z-index 5, which several positioned blocks further down the page
   can reach; 1100 puts it out of their range while staying under the pop-ups
   at 1200-1300. Its own layer stops the mobile repaint bug where a fixed bar
   blanks out while composited content (an iframe, a large image) scrolls
   beneath it - a transform on the element itself does not disturb its fixed
   positioning. */
nav.navbar {
  z-index: 1100;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* -------------------------------------------- home: divider text on 2 lines */
/* index.css caps this at 60% of the viewport, which broke the longer of the two
   divider lines - 111 characters - onto three. Both the width and the type
   scale with the viewport, so the line count holds steady across desktop
   sizes rather than only being right at one width. */
@media (min-width: 768px) {
  .fixed h3 {
    max-width: 80%;
    font-size: clamp(24px, 2.3vw, 52px);
    line-height: 1.25;
    text-wrap: balance;
  }
}

/* ------------------------ home: social buttons on one line, as the menu page */
/* The grid carried 16px of padding of its own on top of the container's, which
   left each card 17px narrower than the identical component on the menu page -
   just enough for "WATCH MORE FOOD REELS" and "SUBSCRIBE OUR CHANNEL" to wrap.
   With that padding gone the two grids are the same width and the labels hold
   one line. */
@media (max-width: 767px) {
  .st-social-grid__grid {
    padding: 0;
  }
}

/* ------------------------------------------------ branch pages: video heading */
@media (min-width: 768px) {
  .st-branch .st-reels__title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* -------------------------------- branch pages: social cards at menu width */
/* The hero's 8px of padding is the last of the difference between these cards
   and the menu page's; the cards reclaim it so the two match exactly. */
@media (max-width: 767px) {
  .st-branch-hero__inner .st-social-cards {
    margin-left: -8px;
    margin-right: -8px;
  }
}

/* -------------------------------------------------- reel modal: the way out */
/* A reload button for a frame that failed, and a link straight to the reel.

   The body has a fixed height and clips its overflow, so it becomes a column:
   the player takes the space that is left and the controls keep their own strip
   at the foot rather than being pushed out of sight. */
.st-reel-modal__body {
  display: flex;
  flex-direction: column;
}

.st-reel-modal__frame {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

/* Retry and open-out sit on one strip under the player. */
.st-reel-modal__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 10px;
}

.st-reel-modal__retry,
.st-reel-modal__out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--st-gold);
  border-radius: 30px;
  color: var(--st-gold);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.st-reel-modal__retry {
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
}

.st-reel-modal__retry:hover,
.st-reel-modal__out:hover {
  background-color: var(--st-gold);
  color: var(--st-dark);
  text-decoration: none;
}

/* ------------------------------------------- contact page: form leads, then
   the two branch cards side by side beneath it */
.st-contact .contact.st-contact__grid {
  display: block;
}

.st-contact__branches {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 26px;
}

@media (max-width: 991px) {
  .st-contact__branches {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  /* Centred heading, centred submit, and branch details centred inside their
     cards - the stacked column reads better down the middle than flush left. */
  .st-contact h1 {
    text-align: center;
  }

  .st-contact .contact .st-contact__form form.form-floating {
    text-align: center;
  }

  .st-contact__privacy,
  .st-contact__branch {
    text-align: center;
  }

  .st-contact__fact-label {
    justify-content: center;
  }
}

/* A fitted heading must never be able to outgrow the space it was measured
   against - see parts/_fit_titles.html. */
.st-fit-line {
  max-width: 100%;
  min-width: 0;
}

/* ============================================================================
   2026-09 follow-ups: uniform social buttons, contact page proportions
   ========================================================================= */

/* ------------------------------------- social buttons: one pill, one height */
/* "WATCH MORE FOOD REELS" and "SUBSCRIBE OUR CHANNEL" are half again as long
   as "FOLLOW US", so at two cards per row they wrapped onto a second line and
   their pills stood taller than the rest of the row. The brief asks for the
   label itself to change on phones, so each long one carries a short twin and
   the pills hold one line at a shared height - every button in the grid now
   reads as the same control. Desktop keeps the full wording. */
.st-btn-short {
  display: none;
}

@media (max-width: 767px) {
  .st-btn-long {
    display: none;
  }

  .st-btn-short {
    display: inline;
  }

  .st-social-grid__btn,
  .st-social-cards__btn {
    flex-wrap: nowrap;
    white-space: nowrap;
    min-height: 32px;
    font-size: 10.5px;
    padding: 8px 6px;
  }
}

/* ------------------------------------------------- contact page: proportions */
/* The form ran the full width of the page. Held to a measure and centred, it
   has the same gutter either side and stops reading as a wall of inputs. */
@media (min-width: 992px) {
  .st-contact .contact .st-contact__form {
    max-width: 720px;
    margin-inline: auto;
  }

  .st-contact .contact-disc p {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
  }

  .st-contact__branches {
    max-width: 1000px;
    margin-inline: auto;
  }
}

.st-contact h1 {
  text-align: center;
}

/* The inputs keep their own reading direction; only the submit centres. Doing
   it with a margin rather than text-align stops the centring being inherited
   by the fields themselves. */
.st-contact .contact .st-contact__form form.form-floating {
  text-align: start;
}

.st-contact .contact .st-contact__form form.form-floating input[type="submit"] {
  display: block;
  margin-inline: auto;
}

/* Two cards of equal height whatever their copy runs to, each with its button
   pinned to the foot so the pair line up. */
.st-contact__branch {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 18px;
  text-align: center;
}

.st-contact__facts {
  margin-bottom: 16px;
}

.st-contact__fact-label {
  justify-content: center;
}

.st-contact__map-btn {
  margin-top: auto;
}

/* The facts are placed rather than left to flow. The address is the longest
   line of the four and was being squeezed into half a card, so it takes the
   whole width - including the cell the phone used to sit in - and the two
   numbers stack in the first column with the hours beside them, landline
   first as in the footer (Nov 2026 brief):

       Address
       Phone (Landline)   Working hours
       Call / WhatsApp

   Placement rather than source order, so the single column on phones still
   reads Address, Phone, WhatsApp, Hours. */
@media (min-width: 576px) {
  .st-contact__facts {
    display: grid;
    /* Not even halves: the hours column carries "Saturday - Wednesday 12pm -
       12am", the longest unbreakable line on the card, while the column beside
       it only has to hold two phone numbers. */
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr);
    gap: 0 18px;
  }

  .st-contact__fact--address {
    grid-column: 1 / -1;
  }

  .st-contact__fact--phone {
    grid-column: 1;
    grid-row: 2;
  }

  .st-contact__fact--whatsapp {
    grid-column: 1;
    grid-row: 3;
  }

  .st-contact__fact--hours {
    grid-column: 2;
    grid-row: 2 / span 2;
  }

  /* Foot of each column, so no rule under them. */
  .st-contact__fact--whatsapp,
  .st-contact__fact--hours {
    border-bottom: 0;
  }

  .st-contact__fact--phone {
    border-bottom: 1px solid rgba(224, 192, 151, .15);
  }
}

.st-contact__facts li {
  min-width: 0;
}

/* ------------------------------------------------- offer pop-up: a way out */
/* index.css pins the close control 110% of its own height ABOVE the poster
   ("top: 0; right: 50%; transform: translate(50%, -110%)"). With the poster at
   80vh inside 50px of padding there is no room above it, so the control lands
   off the top of the screen and the pop-up cannot be dismissed. It sits inside
   the poster's top corner instead, over the artwork, where it is always
   reachable. */
.offer_img_container .cansle-offer {
  top: 10px;
  right: 10px;
  left: auto;
  transform: none;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--st-gold);
  border-radius: 50%;
  background-color: rgba(45, 36, 36, .85);
  color: var(--st-gold);
  font-size: 1.1rem;
  line-height: 1;
}

.offer_img_container .cansle-offer:hover {
  background-color: var(--st-gold);
  color: var(--st-dark);
}

/* index.css stretches the poster to the container width and caps the container
   at 80vh without capping the image, so a tall poster ran past the bottom of
   the screen and the container no longer hugged it - which is also what put
   the close control adrift. Sizing the image itself keeps the whole poster on
   screen and the corner where the corner is. */
.offer_img_container {
  max-height: min(86vh, 900px);
}

.offer img {
  width: auto;
  max-width: 100%;
  max-height: min(86vh, 900px);
}

/* RTL pages put it in the other corner, still inside the artwork. */
[dir="rtl"] .offer_img_container .cansle-offer,
html[lang="ar"] .offer_img_container .cansle-offer {
  right: auto;
  left: 10px;
}

/* Spacing from the top edge (client request, Nov 2026). index.css left the
   pop-up at z-index 1000, under the menu bar (1100), so the bar's logo, links
   and hamburger were drawn over the poster and crowded the close button; on
   iPhones the poster also ran right up under the status bar. It now sits with
   the other pop-ups (1200-1300) above the bar, and the poster starts below the
   bar so nothing crowds it, sized off the dynamic viewport so Safari's
   toolbars do not push it off screen. */
.offer {
  z-index: 1250;
  height: 100vh;
  height: 100dvh;
  /* Start just below the menu bar, whose height _sticky_nav.html measures
     onto --st-header-h (it differs between phone, tablet and desktop). */
  padding: calc(var(--st-header-h, 90px) + 16px) 50px
           calc(env(safe-area-inset-bottom, 0px) + 32px);
  align-items: flex-start;
}

.offer_img_container,
.offer img {
  max-height: calc(100vh - var(--st-header-h, 90px) - 48px - env(safe-area-inset-bottom, 0px));
  max-height: min(900px, calc(100dvh - var(--st-header-h, 90px) - 48px - env(safe-area-inset-bottom, 0px)));
}

/* Breathing room around the close control, so it is easy to hit. */
.offer_img_container .cansle-offer {
  top: 14px;
  right: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

[dir="rtl"] .offer_img_container .cansle-offer,
html[lang="ar"] .offer_img_container .cansle-offer {
  right: auto;
  left: 14px;
}

@media (max-width: 767px) {
  .offer {
    padding: calc(var(--st-header-h, 88px) + 12px) 16px
             calc(env(safe-area-inset-bottom, 0px) + 20px);
  }

  .offer_img_container,
  .offer img {
    max-height: calc(100vh - var(--st-header-h, 88px) - 32px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--st-header-h, 88px) - 32px - env(safe-area-inset-bottom, 0px));
  }

  .offer_img_container .cansle-offer {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    top: 12px;
    right: 12px;
  }

  [dir="rtl"] .offer_img_container .cansle-offer,
  html[lang="ar"] .offer_img_container .cansle-offer {
    right: auto;
    left: 12px;
  }
}

/* ------------------------------- floating buttons step aside for the footer */
/* Pinned bottom-right, the stack sat on top of the footer's last social icons
   once the page reached the end. It moves out while the footer is on screen -
   every action it offers is in the footer already. */
.st-float-stack {
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.st-float-stack.is-away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
}

/* --------------------------------------- contact page: privacy note centred */
.st-contact__privacy {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

/* ============================================================================
   Footer: four columns on desktop, five stacked blocks on phones
   Logo | Bin Mahmoud | Airport Street | working hours + social icons, and on
   phones the same five in that order.
   ========================================================================= */

/* A grid item's default minimum size is its min-content width, so the logo -
   a wide wordmark - would otherwise set a floor for its column that the four
   together cannot fit inside the container. footer{overflow:hidden} then cuts
   whatever hangs over the right edge: the end of "TOWN", and the last icon in
   the social row. minmax(0, 1fr) lets the columns shrink to the room there
   actually is, and the logo takes a real cap rather than a percentage of a
   column it was itself sizing. */
/* The four columns are not equal quarters: the last one carries the hours AND
   the seven social icons, which need a row of their own, so it gets the widest
   share and the logo - the narrowest content - gets the least. Equal quarters
   left column four too tight for the icons to hold one line, which is what
   made the footer read as bunched to the left. */
footer .container.st-footer {
  display: grid;
  grid-template-columns:
    minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, 1.4fr);
  gap: 1.6rem;
  align-items: start;
}

.st-footer__col {
  min-width: 0;
  overflow-wrap: break-word;
}

footer .container .st-footer__col--logo {
  width: 100%;
}

footer .container .st-footer__col--logo a img {
  width: auto;
  max-width: min(100%, 260px);
  height: auto;
}

.st-footer__col h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--st-gold);
}

.st-footer__addr {
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 10px;
}

.st-footer__tel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 2;
  color: #e0c097;
  text-decoration: none;
  white-space: nowrap;
}

.st-footer__tel:hover {
  color: #fff;
  text-decoration: none;
}

.st-footer__tel i {
  width: 14px;
  text-align: center;
}

.st-footer__col--hours .social {
  margin-top: 16px;
}

/* All seven icons on one line, filling the column. index.css sizes the row
   "width: fit-content; margin: auto" and spaces it at 20px, which is wider
   than the column can carry; each chip takes an equal share of the width
   instead, so the row fills its column rather than sitting as small chips with
   the leftover thrown between them. */
@media (min-width: 768px) {
  footer .container.st-footer .social {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    column-gap: 10px;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  footer .container.st-footer .social .footer__social {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    font-size: 22px;
    line-height: 1;
    padding: 0;
  }
}

/* Tablets: two columns rather than four squeezed ones. */
@media (max-width: 991px) {
  footer .container.st-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  /* Logo and the hours-plus-icons block span both, so the two branches pair
     up on the row between them. */
  .st-footer__col--logo,
  .st-footer__col--hours {
    grid-column: 1 / -1;
  }
}

/* Phones: the logo across the top, the two branches side by side under it,
   then the hours and the icon row across the full width. Stacking all five
   full width made a very long footer and left every block hugging one edge;
   two columns for the branches - the only pair of like-for-like blocks - fills
   the width and halves the height.

   overflow-wrap on the columns matters here: a long address in a half-width
   column has nowhere to go otherwise, and index.css leaves footer .container
   as a flex row further down the file, so anything that cannot wrap runs into
   the block beside it. */
@media (max-width: 767px) {
  footer .container.st-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    text-align: center;
  }

  /* Logo, hours and the icons under them take the whole width; the two
     branches sit one per column between them, in the brief's order. */
  .st-footer__col--logo,
  .st-footer__col--hours {
    grid-column: 1 / -1;
  }

  footer .container .st-footer__col--logo a img {
    max-width: min(58%, 190px);
  }

  .st-footer__col h4 {
    justify-content: center;
    font-size: 12.5px;
    margin-bottom: 5px;
  }

  .st-footer__addr {
    font-size: 11.5px;
    line-height: 1.5;
    margin-bottom: 6px;
  }

  /* Free to wrap at this width - a nowrap number in a half column is exactly
     what pushes a block over its neighbour. */
  .st-footer__tel {
    justify-content: center;
    white-space: normal;
    font-size: 12.5px;
    line-height: 1.7;
  }

  .st-footer__col--hours .social {
    margin-top: 12px;
  }

  /* Centred blocks read better without the bullet hanging off the left. */
  .st-footer__col--hours .wh-list li {
    padding-left: 0;
  }

  .st-footer__col--hours .wh-list li::before {
    display: none;
  }
}

/* Working hours on the contact cards: a step up in size, and no bullets. The
   three lines are a short list of shifts, not points being enumerated - the
   dot in front of each was noise, and .wh-list carries it for the footer. */
.st-contact .wh-list li {
  padding-left: 0;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 2px;
}

.st-contact .wh-list li::before {
  display: none;
}

/* Each shift on one line. The size tracks the viewport between 576px and the
   width at which 15px fits the hours column outright, so the line is never
   forced to wrap on the way up - nowrap alone would push it out of the card
   instead. Phones keep a flat 15px: the card is one column there and the line
   has the whole width. */
@media (min-width: 576px) {
  .st-contact .wh-list li {
    white-space: nowrap;
    font-size: clamp(13.5px, 1.15vw, 15px);
  }
}

/* ------------------------------- chef cards: one text column, whatever the copy */
/* .food-info was sized by its own longest line, so the card with the shortest
   description came out narrower than the other two. In Arabic the row packs to
   the main end, so that missing width was collected on the right and pushed
   that card's title and text about 125px in from where the other two sit -
   "أجنحة الدجاج" was the one that showed it. Filling the row makes every card
   begin and end in the same place no matter how long the description is. */
section.menuoftheday .menu .menu-items .menu-item .food-info {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------------------------------------- footer: branch numbers on one line */
/* The two branch blocks are independent grid items, so each put its phone and
   WhatsApp rows directly under its own address - and the Airport Street
   address wraps a line further than Bin Mahmoud's, leaving the numbers a line
   apart. Two changes fix it for good:

   justify-self, because the container carries justify-items: center from
   index.css, which left each block centred at its own content width instead of
   filling its column - so the two branches were not even the same width. Only
   the branch columns are touched; the logo and the hours-and-icons column keep
   the centring the icon row is sized against.

   margin-bottom: auto on the address, so the slack from a shorter address
   collects above the numbers rather than below them. Both columns stretch to
   the row, so the numbers hang from the same baseline at every width - not
   only at the widths where the two addresses happen to wrap alike. */
.st-footer__col--branch {
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  align-self: stretch;
}

.st-footer__col--branch .st-footer__addr {
  margin-bottom: auto;
  /* Keeps the 10px it had when there is no slack to absorb. */
  padding-bottom: 10px;
}

/* ------------------------------ footer: Arabic branch numbers sit right */
/* Each number carries dir="ltr" so "+974 40337003" reads as a phone number
   rather than being reordered by the bidi algorithm. That also makes the flex
   row inside the link run left to right, so the icon and the digits packed
   against the LEFT edge while the Arabic address above them sat against the
   right - the two lines looked unrelated. Pushing the content to the flex end
   puts the digits back under the address, still in LTR order. Phones keep the
   centring set further up. */
@media (min-width: 768px) {
  footer[dir="rtl"] .st-footer__tel {
    justify-content: flex-end;
  }
}

/* --------------------- branch details: the two numbers keep their label inline */
/* Briefs (16) and (17) put the label centred above its value on phones, which
   suits the address and the other prose rows. It wastes a whole line on a
   phone number, though - the number is barely wider than the label above it -
   and the label and the digits stopped reading as one fact. These two rows go
   back to one line, label at the start edge and number at the end; every other
   row keeps the stacked treatment. */
@media (max-width: 767px) {
  .st-branch__details li.st-branch__detail--contact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    /* start, not left: the Arabic pages read right to left. */
    text-align: start;
  }

  .st-branch__details li.st-branch__detail--contact .label {
    justify-content: flex-start;
  }

  .st-branch__details li.st-branch__detail--contact .value {
    margin-top: 0;
    /* The number has a line of its own to sit on, so it never needs to break. */
    white-space: nowrap;
  }
}

/* --------------------- social buttons: the tablet band was left behind */
/* The short-label twins and the one-line pill were scoped to phones, but the
   band that needs them is wider than that. Between 768 and 991 the home grid
   still shows three cards per row and the branch pages still show four, on a
   page that has lost most of its width - so "WATCH MORE FOOD REELS" and
   "CHECK ORGANIC REVIEWS" wrapped and their pills stood 54px and 69px tall
   against 33px for "FOLLOW US", which is what made the row look ragged.

   Measured on both pages in both languages: ragged at 980px wide, clean again
   at 1070, so the band is exactly 768-991. Every long label already carries a
   short twin, which is what makes nowrap safe here. Desktop keeps the full
   wording and its shrink-to-fit pills, which is the state the brief approved;
   phones keep their own smaller metrics from further up the file. */
@media (min-width: 768px) and (max-width: 991px) {
  .st-btn-long {
    display: none;
  }

  .st-btn-short {
    display: inline;
  }

  /* Full width, so every pill in a row is the same box whatever its label. */
  .st-social-grid__btn,
  .st-social-cards__btn {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-height: 34px;
    padding: 8px;
    gap: 6px;
  }

  .st-social-grid__btn {
    font-size: 11.5px;
  }

  /* Four cards to the grid's three, so a step smaller to hold one line. */
  .st-social-cards__btn {
    font-size: 10.5px;
  }
}

/* ------------------------------------------------ live Google reviews section */
/* Wrapper only. The Elfsight widget draws inside its own shadow root, so the
   rating badge, the review slider and the "Review us on Google" button cannot
   be reached from here - their look belongs to the Elfsight dashboard. What
   this rule owns is the space the section sits in and the heading above it.

   The heading deliberately borrows .st-faq__title's metrics: on the home page
   this section sits directly above "Frequently Asked Questions About Steak
   Town Restaurant", and two gold centred headings a few hundred pixels apart
   should be the same size. */
.st-reviews {
  padding: 10px 0 8px;
}

.st-reviews__title {
  color: var(--st-gold);
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1.25;
  font-weight: 800;
  text-align: center;
  margin: 0 0 22px;
}

/* A third-party widget is the one thing on the page whose width we do not
   control, and the slider inside it is wider than its own container by design.
   Clipping the section rather than the page keeps a stray overflow from
   handing the whole document a horizontal scrollbar.

   The side padding is what keeps the carousel arrows off the review cards. The
   arrows are 32px wide and Elfsight pins them at left/right: -16px, so exactly
   half of each one sat over the first and last card. They are pushed further
   out in _google_reviews_css.html; this gutter is the room they move into. It
   has to be set here rather than inside the widget, because the widget is
   built to whatever width it finds and changing that later would leave the
   slider measuring stale slide widths. */
.st-reviews .container {
  max-width: min(100%, 1140px);
  overflow-x: clip;
  padding-left: 56px;
  padding-right: 56px;
}

/* Reserves roughly the height the widget settles at, so the FAQ below it does
   not jump up the page while the widget is still arriving. */
.st-reviews [class^="elfsight-app-"] {
  min-height: 420px;
}

@media (max-width: 767px) {
  .st-reviews {
    padding: 4px 0 6px;
  }

  .st-reviews__title {
    padding: 0 16px;
    margin-bottom: 16px;
  }

  .st-reviews [class^="elfsight-app-"] {
    min-height: 480px;
  }

  /* A narrower gutter on phones: the arrows are moved out less there, and the
     single card needs the width more than the arrows do. */
  .st-reviews .container {
    padding-left: 42px;
    padding-right: 42px;
  }
}

/* On the branch pages the widget stands where the map did, inside a section
   that already has its own gutters - so it needs less of the container's, but
   not none: the carousel arrows live in this padding. */
.st-branch .st-reviews .container {
  padding-left: 44px;
  padding-right: 44px;
}

.st-branch .st-reviews {
  margin: 26px 0 6px;
}

/* ============================================================================
   2026-09 SEO brief: menu, concept and contact pages
   ========================================================================= */

/* ------------------------------------------ menu: "Click to See the Food
   Categories". The label is twice the length of the old "Food Categories";
   on a phone it steps down a size so it holds one line inside a 360px screen,
   and may wrap rather than run off the edge on anything narrower. */
@media (max-width: 767px) {
  .menu-page .st-menu-actions .st-menu-actions__cats .btn.btn-lg {
    padding: 13px 20px;
    font-size: 15px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

/* --------------------------------------------------------- concept page */
.st-concept .st-concept__title {
  color: var(--st-gold);
  font-size: 34px;
  line-height: 1.25;
  margin: 0 auto 10px;
  max-width: 900px;
  text-align: center;
  text-wrap: balance;
}

section.aboutpage.st-concept .concept {
  margin-top: 30px;
}

.st-concept .p-concept h2 {
  color: var(--st-gold);
  font-size: 30px;
  margin-bottom: 14px;
}

.st-concept .p-concept p {
  margin: 0 auto;
  max-width: 62ch;
  line-height: 1.75;
}

.st-concept__serve h2 {
  color: var(--st-gold);
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 8px;
  text-align: center;
}

.st-concept__serve h3 {
  font-size: 22px;
  text-align: center;
  margin: 0;
}

.st-concept .staf h3 {
  text-align: center;
  margin-bottom: 30px;
}

/* In-copy internal links, dressed like the menu page's copy links. */
.st-concept .p-concept a,
.st-concept__serve a,
.st-concept__head-word a,
.st-contact .contact-disc a,
.st-contact__cta a:not(.st-action-btn) {
  color: var(--st-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.st-concept .p-concept a:hover,
.st-concept__serve a:hover,
.st-concept__head-word a:hover,
.st-contact .contact-disc a:hover,
.st-contact__cta a:not(.st-action-btn):hover {
  color: #fff;
}

/* Closing banner, shared by any page that ends on a booking prompt. */
.st-cta-banner {
  margin: 10px 0 60px;
  padding: 30px 24px;
  text-align: center;
  background-color: rgba(92, 61, 46, .35);
  border: 1px solid var(--st-brown);
  border-radius: 14px;
}

.st-cta-banner__title {
  color: var(--st-gold);
  font-size: 26px;
  line-height: 1.3;
  margin: 0 0 20px;
  text-wrap: balance;
}

.st-cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.st-cta-banner .st-action-btn {
  min-height: 48px;
  padding: 12px 26px;
  font-size: 16px;
}

.st-cta-banner .st-action-btn--call {
  padding: 10px 24px;
}

@media (max-width: 767px) {
  .st-concept .st-concept__title {
    font-size: 22px;
    line-height: 1.35;
    margin-top: 44px;
  }

  .st-concept .p-concept h2 {
    font-size: 21px;
  }

  .st-concept__serve h2 {
    font-size: 19px;
  }

  .st-concept__serve h3 {
    font-size: 17px;
  }

  .st-cta-banner {
    padding: 24px 16px;
    margin-bottom: 40px;
  }

  .st-cta-banner__title {
    font-size: 19px;
  }

  .st-cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .st-cta-banner .st-action-btn {
    justify-content: center;
    white-space: normal;
    font-size: 15px;
  }
}

/* --------------------------------------------------------- contact page */
.st-contact h1 {
  color: var(--st-gold);
  line-height: 1.25;
  text-wrap: balance;
}

section.contact-container .st-contact__subtitle {
  font-size: 21px;
  line-height: 1.4;
  margin: 6px 0 18px;
  text-align: center;
  text-wrap: balance;
}

.st-contact__cta {
  max-width: 760px;
  margin: 4px auto 28px;
  padding: 18px 22px;
  text-align: center;
  background-color: rgba(92, 61, 46, .35);
  border: 1px solid var(--st-brown);
  border-radius: 14px;
}

.st-contact__cta p {
  margin: 0 0 14px;
  line-height: 1.7;
}

.st-contact__cta .st-action-btn {
  min-height: 46px;
  padding: 12px 26px;
  font-size: 16px;
}

@media (max-width: 767px) {
  .st-contact h1 {
    font-size: 22px;
  }

  section.contact-container .st-contact__subtitle {
    font-size: 16px;
  }

  .st-contact__cta {
    padding: 16px;
  }

  .st-contact__cta .st-action-btn {
    width: 100%;
    justify-content: center;
    font-size: 15px;
  }
}

/* -------------------------------- home: featured dish cards, centred heads */
/* The dish name and the "View More" button sit on the card's centre line on
   every screen size (phones already centred them); the description keeps its
   left edge so longer text stays easy to read. */
section.products .card .card-body .card-title {
  text-align: center;
}

section.products .card .card-body .st-card-link {
  align-self: center;
}

/* ---------------------------- home: divider cards hug their text on desktop */
/* The bordered, blurred box ran to 80% of the screen while the two balanced
   lines inside took far less, leaving wide empty bands at both ends.
   parts/_fit_dividers_js.html sets the width to the widest line; this is the
   even breathing room around it. */
@media (min-width: 768px) {
  .fixed h3 {
    padding: 16px 32px;
  }
}

/* ============================================================================
   2026-11: branch maps under the Restaurant info box and the contact cards
   ========================================================================= */
/* Branch pages: the map runs the full width of the info box above it (both
   are block children of the same container), with clear air either side. */
.st-branch__details + .st-branch__map {
  margin: 30px 0 44px;
  border: 1px solid var(--st-brown);
}

/* Contact page: each card and its map form one grid column, so the map is
   exactly as wide as its card. The column is a flex stack: the cards still
   stretch to equal height (the grid row stretches both columns and the card
   takes up the slack), and the two maps line up beneath them. */
.st-contact__branch-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.st-contact__branch-col > .st-contact__branch {
  flex: 1 1 auto;
  height: auto;
}

.st-contact__map {
  margin: 0;
  border: 1px solid var(--st-brown);
  border-radius: 14px;
}

.st-contact__map iframe {
  height: 300px;
}

.st-contact__branches {
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .st-branch__details + .st-branch__map {
    margin: 22px 0 32px;
  }

  .st-contact__map iframe {
    height: 260px;
  }

  .st-contact__branches {
    margin-bottom: 28px;
  }
}