/* ══════════════════════════════════════════════════════════
   PACKAGE CARDS
   Rendered at runtime from the admin panel. Follows the same
   dark-cloth-and-gold language as the rest of the site.
   ══════════════════════════════════════════════════════════ */

.pk-grid {
  display: grid;
  grid-template-columns: repeat(var(--pk-cols, 3), minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

.pk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(232, 201, 122, .03);
  border: 1px solid rgba(200, 164, 63, .16);
  transition: border-color .35s, transform .35s, box-shadow .35s;
}

.pk-card:hover {
  border-color: rgba(200, 164, 63, .45);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .85);
}

.pk-media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.pk-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .8, .25, 1); }
.pk-card:hover .pk-media img { transform: scale(1.06); }
.pk-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7, 6, 3, .55)); pointer-events: none; }

.pk-badge {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  font-family: var(--body); font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--kiswah); background: linear-gradient(135deg, var(--gold-2), var(--gold));
  padding: .34rem .6rem; border-radius: 2px;
}

.pk-body { padding: 1.2rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }

.pk-body h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.3rem;
  color: var(--ivory); letter-spacing: -.01em; margin-bottom: .3rem;
}

.pk-sub { color: rgba(234, 216, 166, .58); font-size: .84rem; line-height: 1.5; margin-bottom: .8rem; }

/* Price */
.pk-price {
  display: block; font-family: var(--display); font-size: 1.55rem;
  color: var(--gold-2); letter-spacing: -.01em; margin-bottom: .9rem;
}
.pk-price .pk-cur { font-family: var(--body); font-size: .72rem; letter-spacing: .1em; color: var(--gold); vertical-align: .35em; }
.pk-price small { font-family: var(--body); font-size: .66rem; letter-spacing: .08em; color: rgba(234, 216, 166, .45); text-transform: uppercase; }
.pk-price-call { font-size: 1.05rem; font-style: italic; color: rgba(234, 216, 166, .8); }

/* Detail rows */
.pk-meta { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .42rem; }
.pk-meta li { display: flex; gap: .7rem; align-items: baseline; font-size: .78rem; line-height: 1.45; }
.pk-meta b {
  flex: 0 0 5.4rem; font-family: var(--body); font-weight: 500; font-size: .63rem;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(200, 164, 63, .72);
}
.pk-meta span { color: rgba(234, 216, 166, .68); }

/* Inclusions */
.pk-includes { margin-bottom: 1.15rem; padding-top: .9rem; border-top: 1px solid rgba(200, 164, 63, .13); }
.pk-includes h5 {
  font-family: var(--body); font-weight: 500; font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(200, 164, 63, .72); margin-bottom: .5rem;
}
.pk-includes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.pk-includes li { position: relative; padding-left: .95rem; font-size: .79rem; line-height: 1.5; color: rgba(234, 216, 166, .68); }
.pk-includes li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 4px; height: 4px; transform: rotate(45deg); background: var(--gold);
}

/* Call to action */
.pk-cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .74rem 1.1rem; border-radius: 3px;
  font-family: var(--body); font-size: .74rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  color: var(--kiswah); background: linear-gradient(135deg, var(--gold-2), var(--gold));
  transition: filter .3s, transform .3s;
}
.pk-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Nothing published yet */
.pk-empty {
  grid-column: 1 / -1; text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  border: 1px dashed rgba(200, 164, 63, .22); border-radius: 5px;
  color: rgba(234, 216, 166, .5); font-family: var(--display); font-size: 1.05rem; font-style: italic;
}

/* Category headings on the Packages page */
.pk-cat-head { margin: clamp(2.4rem, 5vw, 4rem) 0 clamp(1.1rem, 2vw, 1.6rem); }
.pk-cat-head:first-of-type { margin-top: 0; }
.pk-cat-head h2 {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--ivory); letter-spacing: -.015em;
}
.pk-cat-head h2 em { font-style: italic; font-weight: 400; color: var(--gold-2); }

/* ══════════════════════════════════════════════════════════
   ENQUIRY FORM
   ══════════════════════════════════════════════════════════ */

/* Honeypot: off screen for people, still fillable by bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin-top: .9rem; font-size: .84rem; line-height: 1.55;
  color: var(--gold-2); border-left: 2px solid var(--gold); padding-left: .8rem;
}
.form-status.bad { color: rgba(234, 216, 166, .8); border-left-color: #D9705E; }
.form-status a { color: var(--gold-2); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 980px) {
  .pk-grid { grid-template-columns: repeat(min(var(--pk-cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pk-grid { grid-template-columns: 1fr; }
  .pk-meta b { flex-basis: 4.6rem; }
}

/* ══════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
   Sits above everything, including the fixed navigation, and
   pushes both the bar and the page down by its own height so
   nothing is covered. The height is measured in JS because the
   message wraps on a narrow screen.
   ══════════════════════════════════════════════════════════ */

/* The four --ann-* variables are set on the element by the runtime from the
   look chosen in the panel. The values below are the gold default, so the bar
   is right even before any of them arrive. */
.hj-announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.6rem, 1.8vw, 1.2rem); flex-wrap: nowrap;
  min-height: 40px;
  padding: .3rem clamp(1rem, 4vw, 2rem);
  transition: transform .32s cubic-bezier(.2, .8, .3, 1);
  --ann-default-bg:
    radial-gradient(120% 180% at 50% 0%, rgba(255, 250, 235, .55), transparent 60%),
    linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 45%, var(--gold) 100%);
  background: var(--ann-bg, var(--ann-default-bg));
  border-bottom: 1px solid rgba(20, 17, 10, .22);
  box-shadow: 0 5px 18px -12px rgba(0, 0, 0, .7);
  text-align: center;
}

.hj-announce-text {
  font-family: var(--body);
  font-size: clamp(.74rem, 1.3vw, .84rem);
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.35;
  /* One line at every width: a long message is cut short, the bar never grows. */
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ann-fg, #171307);
}
.hj-announce-text strong,
.hj-announce-text b { font-weight: 600; }

.hj-announce-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  flex: 0 0 auto;
  padding: .24rem .8rem; border-radius: 99px;
  background: var(--ann-btn-bg, #14110A);
  color: var(--ann-btn-fg, var(--gold-2));
  font-family: var(--body); font-size: .69rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  transition: filter .25s, transform .25s;
}
.hj-announce-cta:hover { filter: brightness(1.25); transform: translateY(-1px); }
.hj-announce-cta svg { width: 13px; height: 13px; }

/* Reading down the page it steps out of the way, and the menu rises with
   it; scrolling back up brings both down again. The runtime sets the class. */
body.announce-away .hj-announce { transform: translateY(-100%); }
body.has-announce.announce-live header.nav {
  transition: background .5s, border-color .5s, top .32s cubic-bezier(.2, .8, .3, 1);
}
body.has-announce.announce-away header.nav { top: 0; }
@media (prefers-reduced-motion: reduce) {
  .hj-announce, body.has-announce.announce-live header.nav { transition: none; }
}

/* Everything below makes room for it. */
.has-announce .nav { top: var(--announce-h, 0px); }
.has-announce { padding-top: var(--announce-h, 0px); }
.has-announce .hero { margin-top: calc(var(--announce-h, 0px) * -1); }

@media (max-width: 560px) {
  .hj-announce { gap: .5rem; min-height: 36px; padding: .22rem .8rem; }
  .hj-announce-text { font-size: .72rem; }
  .hj-announce-cta { padding: .22rem .65rem; font-size: .62rem; letter-spacing: .07em; }
}

@media (prefers-reduced-motion: reduce) {
  .hj-announce-cta { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   ADDED SECTIONS
   Blocks inserted from the admin panel. They borrow the same
   classes as the hand built sections so they look native.
   ══════════════════════════════════════════════════════════ */

/* image-and-text: photo on the right instead of the left */
.svc-block-inner.flip { direction: rtl; }
.svc-block-inner.flip > * { direction: ltr; }

/* cards: column count comes from the section setting */
.svc-grid { --svc-cols: 3; }
@media (min-width: 981px) {
  .svc-grid { grid-template-columns: repeat(var(--svc-cols, 3), minmax(0, 1fr)); }
}

/* left aligned text block */
.page-section .wrap[style*="--sec-align:left"] .sec-head-ed { text-align: left; margin-inline: 0; }

/* gallery */
.hj-gallery {
  display: grid; grid-template-columns: repeat(var(--g-cols, 4), minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1rem);
}
.hj-gal-item { position: relative; margin: 0; border-radius: 4px; overflow: hidden; }
.hj-gal-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2, .8, .25, 1);
}
.hj-gal-item:hover img { transform: scale(1.05); }
.hj-gal-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .8rem .55rem;
  background: linear-gradient(180deg, transparent, rgba(7, 6, 3, .8));
  font-family: var(--body); font-size: .72rem; color: rgba(234, 216, 166, .88);
}
@media (max-width: 900px) { .hj-gallery { grid-template-columns: repeat(min(var(--g-cols, 4), 3), 1fr); } }
@media (max-width: 560px) { .hj-gallery { grid-template-columns: repeat(2, 1fr); } }

/* quote */
.hj-quote .wrap { max-width: 900px; text-align: center; }
.hj-quote blockquote {
  font-family: var(--display); font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  line-height: 1.4; color: var(--ivory); letter-spacing: -.015em; margin: 0;
}
.hj-quote blockquote em { font-style: italic; color: var(--gold-2); }
.hj-quote cite {
  display: block; margin-top: 1.1rem; font-family: var(--body); font-style: normal;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.hj-quote cite span { color: rgba(234, 216, 166, .45); }

/* spacer and hairline */
.hj-spacer { display: grid; place-items: center; }
.hj-rule {
  display: block; width: min(1180px, 88vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 164, 63, .35), transparent);
}

/* ══════════════════════════════════════════════════════════
   COLLECTIONS  (reviews, team, questions, awards, partners)
   ══════════════════════════════════════════════════════════ */

.hj-col-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.hj-review {
  border: 1px solid rgba(200, 164, 63, .16); border-radius: 5px; padding: 1.3rem 1.4rem;
  background: rgba(232, 201, 122, .03);
}
.hj-review p { font-family: var(--display); font-size: 1.06rem; line-height: 1.55; color: var(--ivory); }
.hj-review .stars { color: var(--gold); letter-spacing: .18em; font-size: .8rem; margin-bottom: .6rem; }
.hj-review .who { margin-top: .9rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.hj-review .who span { color: rgba(234, 216, 166, .45); text-transform: none; letter-spacing: 0; }

.hj-col-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem; }
.hj-person { text-align: center; }
.hj-person img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px;
  border: 1px solid rgba(200, 164, 63, .18); margin-bottom: .8rem;
}
.hj-person b { display: block; font-family: var(--display); font-size: 1.14rem; color: var(--ivory); }
.hj-person span { display: block; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-top: .2rem; }
.hj-person p { font-size: .82rem; line-height: 1.55; color: rgba(234, 216, 166, .6); margin-top: .5rem; }

.hj-col-faq { max-width: 800px; margin-inline: auto; }
.hj-faq { border-bottom: 1px solid rgba(200, 164, 63, .14); }
.hj-faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-family: var(--display); font-size: 1.1rem; color: var(--ivory);
}
.hj-faq summary::-webkit-details-marker { display: none; }
.hj-faq summary::after {
  content: '+'; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 1.3rem; font-family: var(--body); transition: transform .25s;
}
.hj-faq[open] summary::after { content: '−'; }
.hj-faq p { padding: 0 2rem 1.1rem 0; font-size: .88rem; line-height: 1.65; color: rgba(234, 216, 166, .66); }

.hj-col-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; }
.hj-award { border: 1px solid rgba(200, 164, 63, .16); border-radius: 5px; overflow: hidden; background: rgba(232, 201, 122, .03); }
.hj-award img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #0B0A07; padding: .8rem; display: block; }
.hj-award .cap { padding: .75rem .85rem 1rem; }
.hj-award b { display: block; font-family: var(--display); font-size: .98rem; color: var(--ivory); }
.hj-award span { display: block; font-size: .72rem; color: rgba(234, 216, 166, .45); margin-top: .2rem; }

.hj-col-partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .9rem; align-items: center; }
.hj-partner { background: #FBFAF6; border-radius: 4px; display: grid; place-items: center; padding: 1.1rem; }
.hj-partner img { max-height: 40px; max-width: 82%; object-fit: contain; }

.hj-col-empty {
  grid-column: 1 / -1; text-align: center; padding: 2.4rem 1.4rem;
  border: 1px dashed rgba(200, 164, 63, .2); border-radius: 5px;
  color: rgba(234, 216, 166, .45); font-family: var(--display); font-style: italic;
}

/* ══════════════════════════════════════════════════════════
   POSTER PACKAGES
   A package that is simply the poster the office designed.
   ══════════════════════════════════════════════════════════ */

.pk-poster {
  display: flex; flex-direction: column;
  border-radius: 6px; overflow: hidden;
  background: rgba(232, 201, 122, .03);
  border: 1px solid rgba(200, 164, 63, .18);
  transition: border-color .35s, transform .35s, box-shadow .35s;
}
.pk-poster:hover {
  border-color: rgba(200, 164, 63, .5);
  transform: translateY(-4px);
  box-shadow: 0 26px 54px -34px rgba(0, 0, 0, .9);
}

.pk-poster-img {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; background: #0B0A07; cursor: zoom-in; overflow: hidden;
}
.pk-poster-img img {
  width: 100%; height: auto; display: block;
  transition: transform .7s cubic-bezier(.2, .8, .25, 1);
}
.pk-poster:hover .pk-poster-img img { transform: scale(1.03); }

.pk-poster-zoom {
  position: absolute; inset: auto 0 0 0; padding: 2.4rem .9rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(7, 6, 3, .88));
  font-family: var(--body); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.pk-poster:hover .pk-poster-zoom { opacity: 1; transform: none; }

.pk-poster-foot {
  padding: .95rem 1.1rem .2rem; display: flex; align-items: baseline;
  justify-content: space-between; gap: .7rem; flex-wrap: wrap;
}
.pk-poster-foot b {
  font-family: var(--display); font-weight: 600; font-size: 1.12rem;
  color: var(--ivory); letter-spacing: -.01em;
}
.pk-poster-foot span {
  font-family: var(--display); font-size: 1.05rem; color: var(--gold-2);
}
.pk-poster .pk-cta { margin: 1rem 1.1rem 1.1rem; }

/* ── Poster lightbox ────────────────────────────────────── */

.hj-lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(4, 3, 1, .93); padding: clamp(1rem, 3vw, 2.5rem);
  overflow-y: auto;
}
.hj-lb.open { display: grid; place-items: start center; }
.hj-lb-inner { display: grid; gap: 1.1rem; justify-items: center; max-width: 720px; width: 100%; }
.hj-lb-inner img {
  width: 100%; height: auto; display: block; border-radius: 6px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.hj-lb-x {
  position: fixed; top: 1rem; right: 1.2rem; z-index: 2;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: var(--ivory);
  font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.hj-lb-x:hover { background: rgba(255, 255, 255, .16); }

@media (max-width: 620px) {
  .pk-poster-foot { padding-inline: .9rem; }
  .pk-poster .pk-cta { margin-inline: .9rem; }
}

/* ── Packages sitting under a category block on Services ── */

.svc-packages { padding-block: clamp(1.5rem, 3vw, 2.6rem) clamp(2.5rem, 5vw, 4rem); }
.svc-packages .pk-cat-head { margin-top: 0; }

/* ══════════════════════════════════════════════════════════
   NAVIGATION
   Once the bar leaves the hero it must be readable over
   whatever it happens to be passing: a dark band, the pale
   airline strip, a photograph. So it carries its own ground
   and its own text colour rather than borrowing either.
   ══════════════════════════════════════════════════════════ */

header.nav.solid {
  background: rgba(12, 10, 6, .94);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(200, 164, 63, .22);
}
header.nav.solid .brand b     { color: var(--ivory); }
header.nav.solid .brand span  { color: rgba(234, 216, 166, .66); }
header.nav.solid .nav-links a { color: rgba(248, 244, 230, .86); }
header.nav.solid .nav-links a:hover { color: var(--gold-2); }
header.nav.solid .burger      { color: var(--ivory); }

/* The bar fades its background over half a second; move the words with it,
   or for that half second they sit on the colour they are leaving. */
.nav .brand b, .nav .brand span, .nav .nav-links a { transition: color .5s; }

/* ── Reserve the poster's space so the card never looks empty ── */

.pk-poster-img { aspect-ratio: 3 / 4; background: rgba(232, 201, 122, .05); }
.pk-poster-img img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════════════════════════
   GOOGLE REVIEWS
   These cards were drawn for a pale frosted panel, so the
   quotes were set in near-black. Over the dark cloth that
   left them at about 1.08:1 against their own background:
   the words were there, and nobody could read them.
   ══════════════════════════════════════════════════════════ */

.voice-card blockquote,
.voice-feature blockquote {
  color: rgba(248, 244, 230, .94);
}

.voice-card figcaption {
  color: rgba(234, 216, 166, .55);
  border-top-color: rgba(200, 164, 63, .22);
}
.voice-card figcaption b,
.voice-feature figcaption b {
  color: var(--gold-2);
}
.voice-card figcaption span,
.voice-feature figcaption span {
  color: rgba(234, 216, 166, .5);
}

/* The card itself, so the words have something to sit on. */
.voice-card {
  background: rgba(232, 201, 122, .045);
  border-color: rgba(200, 164, 63, .22);
}

/* Browsers without backdrop-filter fell back to a pale card, which would have
   put pale text on pale ground. Keep that path dark to match. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .voice-card { background: rgba(232, 201, 122, .06); }
}

.voice-head span { color: rgba(234, 216, 166, .72); }
.voice-head b { color: var(--gold-2); }

/* ══════════════════════════════════════════════════════════
   PACKAGES STRIP
   Used under the contact form: the posters drift past while
   someone fills the form in, without taking the page over.
   ══════════════════════════════════════════════════════════ */

.pkg-strip .sec-head-ed { margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }

.pkg-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.pkg-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: max-content;
  padding-block: .4rem;
  animation: pkg-drift 64s linear infinite;
}
.pkg-marquee:hover .pkg-track,
.pkg-marquee:focus-within .pkg-track { animation-play-state: paused; }

/* One or two packages have nothing to loop through. */
.pkg-track.no-loop {
  animation: none;
  width: auto;
  justify-content: center;
  flex-wrap: wrap;
}

@keyframes pkg-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* The cards themselves keep a steady width inside the strip. */
.pkg-track .pk-poster,
.pkg-track .pk-card {
  flex: 0 0 clamp(230px, 22vw, 290px);
}

.pkg-strip .hint-line {
  font-size: .86rem; color: rgba(234, 216, 166, .6);
  margin-bottom: 1.1rem; line-height: 1.6;
}

/* Let people drag it on a touch screen rather than only waiting. */
@media (hover: none) {
  .pkg-marquee { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pkg-marquee::-webkit-scrollbar { display: none; }
  .pkg-track { animation: none; width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
  .pkg-track { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   REGISTRATION AND LICENCES, CONTACT PAGE
   The credentials existed only as photographs of certificates,
   which a crawler cannot read. The same details now sit here as
   selectable text, borrowing the working-hours table's styling
   so the block reads as part of the column it joins.
   ══════════════════════════════════════════════════════════ */

.contact-info-block .legal-name {
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--ivory);
  margin-bottom: .85rem;
}

.cred-table { width: 100%; border-collapse: collapse; }
.cred-table td {
  padding: .55rem 0;
  font-size: .92rem;
  border-bottom: 1px solid rgba(200, 164, 63, .14);
  color: rgba(234, 216, 166, .75);
  vertical-align: top;
}
.cred-table td:last-child {
  text-align: right;
  color: var(--gold-2);
  font-family: var(--display);
  white-space: nowrap;
}
.cred-table tr:last-child td { border-bottom: 0; }

.contact-info-block .cred-address {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: .92rem;
  line-height: 1.75;
  color: rgba(234, 216, 166, .7);
}

@media (max-width: 420px) {
  .cred-table td, .cred-table td:last-child { display: block; text-align: left; }
  .cred-table td { border-bottom: 0; padding: .15rem 0; }
  .cred-table tr { display: block; padding: .45rem 0;
    border-bottom: 1px solid rgba(200, 164, 63, .14); }
  .cred-table tr:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════
   POLICY PAGES
   Long-form reading on the same dark ground as the rest of the
   site. One measured column, headings in the display face, and
   nothing invented: it borrows the page sections' own scale.
   ══════════════════════════════════════════════════════════ */

.legal {
  max-width: 68ch;
  margin: 0 auto;
  color: rgba(234, 216, 166, .82);
  font-size: 1.02rem;
  line-height: 1.85;
}

.legal h2 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ivory);
  margin: 2.6rem 0 .9rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(200, 164, 63, .16);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal h3 {
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin: 1.8rem 0 .6rem;
}

.legal p { margin-bottom: 1.1rem; }
.legal strong { color: var(--ivory); font-weight: 600; }
.legal a { color: var(--gold-2); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal a:hover { color: var(--ivory); }

.legal ul { margin: 0 0 1.3rem; padding-left: 1.15rem; }
.legal li { margin-bottom: .55rem; }
.legal li::marker { color: rgba(200, 164, 63, .55); }

.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .95rem; }
.legal-table th {
  text-align: left; padding: .6rem .8rem .6rem 0;
  font-family: var(--body); font-size: .64rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2);
  border-bottom: 1px solid rgba(200, 164, 63, .28);
}
.legal-table td {
  padding: .65rem .8rem .65rem 0;
  border-bottom: 1px solid rgba(200, 164, 63, .14);
  vertical-align: top;
}
.legal-table td:last-child, .legal-table th:last-child {
  text-align: right; padding-right: 0; color: var(--ivory);
}
.legal-table tr:last-child td { border-bottom: 0; }

.legal-updated {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(200, 164, 63, .16);
  font-size: .84rem; color: rgba(234, 216, 166, .5);
}

/* The policy links in the footer's closing row. */
.foot-legal { display: flex; flex-wrap: wrap; gap: .2rem .95rem; }
.foot-legal a { color: rgba(234, 216, 166, .55); transition: color .3s; }
.foot-legal a:hover { color: var(--gold-2); }

@media (max-width: 640px) {
  .legal { font-size: .98rem; }
  .legal-table th, .legal-table td { font-size: .88rem; }
}


/* ══════════════════════════════════════════════════════════
   QUICK QUOTE, VARIABLE FIELDS
   Each journey draws its own fields. A typed city and a date use
   inputs rather than selects, so they are styled to match them.
   ══════════════════════════════════════════════════════════ */

.finder-tab[hidden] { display: none !important; }

.finder-field input {
  width: 100%;
  font-family: var(--body); font-size: .92rem; color: var(--ivory);
  background: rgba(6, 5, 3, .72);
  border: 1px solid rgba(200, 164, 63, .32); border-radius: 6px;
  padding: .9rem 1rem;
  color-scheme: dark;
  transition: border-color .3s, box-shadow .3s;
}
.finder-field input::placeholder { color: rgba(234, 216, 166, .45); }
.finder-field input:focus {
  outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(200, 164, 63, .14);
}
.finder-other { margin-top: .45rem; }


/* ══════════════════════════════════════════════════════════
   MOBILE
   Measured at 375px before this pass: the home page ran to 18.6
   screens, every section heading sat at its 32px floor, sections
   carried 96px of padding top and bottom, the trophy wall alone
   was 3,528px and the quote card 758px. None of this touches a
   screen wider than 640px.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* Rhythm. --movement is the chapter padding the home page is built on. */
  :root { --movement: 3.75rem; }
  .trophy-wall, .silence, .page-section, .page-cta, .leadership, .svc-block { padding-block: 3.5rem; }
  .svc-tier { padding-block: 2.8rem; }
  .page-hero { padding: 6.4rem 0 2.6rem; }

  /* Type. Headlines lead without shouting on a phone. */
  .hero h1 { font-size: clamp(1.8rem, 8.4vw, 2.15rem); margin-bottom: 1.6rem; }
  .page-hero h1 { font-size: clamp(1.7rem, 7.8vw, 2rem); }
  .page-hero .lede { font-size: .95rem; }
  .institution h2, .journeys h2, .trophy-head h2, .beyond h2, .invitation h2,
  .voice-title, .sec-head-ed h2, .silence-line, .foot-heritage h2 {
    font-size: clamp(1.5rem, 6.8vw, 1.75rem);
  }
  .journeys h2 { margin-bottom: 1.8rem; }
  .silence-line { margin-bottom: 1.8rem; }
  .trophy-subhead h3, .dest-info h3, .foot-news h3 { font-size: 1.3rem; }
  .voice blockquote { font-size: 1.25rem; }
  .founder-copy .name { font-size: 1.9rem; }
  .founder-copy .tagline { margin-bottom: 1.4rem; }
  .founder-copy p { font-size: .95rem; line-height: 1.72; }

  /* Menu bar. */
  .nav { height: 58px; }
  .brand img { width: 30px; height: 30px; }
  .brand b { font-size: .92rem; }

  /* Trophy wall: five rows stay, each one a third of its old height. */
  .trophy-head { margin-bottom: 1.8rem; padding-inline: 1.2rem; }
  .trophy-subhead { margin: 2.4rem auto 1rem; padding-inline: 1.2rem; }
  .trophy-subhead .kicker { margin-bottom: .6rem; }
  .trophy-subhead p { font-size: .85rem; }
  .trophy-track { gap: .9rem; }
  .trophy { width: 56vw; padding: .8rem .8rem .7rem; }
  .trophy.is-photo { width: 70vw; }
  .trophy-media { height: 150px; margin-bottom: .6rem; }
  .trophy.is-photo .trophy-media { height: 170px; }
  .trophy-marquee::before { display: none; }
  .trophy-marquee { padding-block: .5rem; }
  .trophy-head p { font-size: .88rem; line-height: 1.6; }
  .trophy-subhead { margin: 1.7rem auto .6rem; }
  .trophy-subhead .kicker { margin-bottom: .35rem; }
  .trophy-subhead h3 { font-size: 1.12rem; margin-bottom: .3rem; }
  .trophy-subhead p { font-size: .8rem; line-height: 1.45; }
  .trophy { padding: .6rem .6rem .55rem; }
  .trophy-media { height: 124px; margin-bottom: .45rem; }
  .trophy.is-photo .trophy-media { height: 150px; }
  .trophy-caption b { font-size: .8rem; line-height: 1.25; }
  .trophy-caption span {
    font-size: .64rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Founder panel: its own padding, and a portrait that does not fill the phone. */
  .founder-panel { padding-block: 3.5rem; }
  .founder-panel .wrap { gap: 1.6rem; }
  .founder-media img { aspect-ratio: 4 / 5; max-height: 340px; object-fit: cover; object-position: 50% 22%; }

  /* Journeys and tours. */
  .journey { aspect-ratio: 16 / 11; }
  .beyond-head { margin-bottom: 1.8rem; }
  .beyond-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .dest { aspect-ratio: 3 / 4; }
  .dest-info { padding: .8rem; }
  .dest-info h3 { font-size: 1.1rem; margin-bottom: .3rem; }
  .dest-info .sub { font-size: .55rem; letter-spacing: .14em; }
  .beyond-foot { margin-top: 2rem; }
  .beyond .act { padding: 1rem 1.6rem; }

  /* Contact form card. */
  .contact-form-card { padding: 1.4rem 1.2rem; }

  /* Quick Quote: two columns, one row of tabs. */
  .finder-card { padding: 1.2rem 1rem 1.1rem; }
  .finder-head { margin-bottom: 1rem; }
  .finder-head h2 { font-size: 1.45rem; }
  .finder-tabs { flex-wrap: nowrap; gap: .35rem; margin-bottom: 1.1rem; }
  .finder-tab {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: .55rem .3rem; font-size: .7rem; gap: .3rem;
  }
  .finder-tab svg { width: 14px; height: 14px; }
  .finder-fields { grid-template-columns: 1fr 1fr; gap: .7rem .6rem; }
  .finder-field { gap: .35rem; }
  .finder-field > span { font-size: .52rem; letter-spacing: .14em; }
  .finder-field select, .finder-field input {
    padding: .66rem 1.7rem .66rem .7rem; font-size: .82rem;
    background-position: right .55rem center;
  }
  .finder-field input { padding-right: .7rem; }
  .finder-field.has-other, .finder-field[data-field="date"] { grid-column: 1 / -1; }
  .finder-go { margin-top: .9rem; padding: .95rem 1rem; }
}

/* The WhatsApp pill keeps its icon on a phone; the words covered content. */
@media (max-width: 560px) {
  .wa-fab { padding: .32rem; gap: 0; }
  .wa-fab .wa-label { display: none; }
}


/* ══════════════════════════════════════════════════════════
   HAJJ OFFERS
   Packages laid out for comparing: a maktab filter, a room
   switch that moves the price, a comparison table, a details
   window. Same cloth-and-gold language as the other cards.
   ══════════════════════════════════════════════════════════ */

.offers-home {
  position: relative; background: var(--kiswah); color: var(--ivory);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.offers-head { text-align: center; max-width: 640px; margin: 0 auto clamp(1.8rem, 3.5vw, 2.6rem); }
.offers-kicker {
  font-family: var(--body); font-weight: 400; font-size: .66rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2);
}
.offers-head h2 {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  color: var(--ivory); letter-spacing: -.015em; line-height: 1.12; margin: .6rem 0 .8rem;
}
.offers-head h2 em { font-style: italic; font-weight: 400; color: var(--gold-2); }
.offers-head p { color: rgba(234, 216, 166, .68); font-size: 1rem; line-height: 1.7; }

.of-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: 1.3rem;
}
.of-chips, .of-views { display: flex; flex-wrap: wrap; gap: .45rem; }
.of-chips button, .of-views button {
  font-family: var(--body); font-size: .78rem; font-weight: 500;
  padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer;
  background: rgba(8, 7, 4, .5); border: 1px solid rgba(200, 164, 63, .3);
  color: rgba(234, 216, 166, .85);
  transition: background .25s, color .25s, border-color .25s;
}
.of-views button { border-radius: 6px; padding: .5rem .9rem; }
.of-chips button:hover, .of-views button:hover { border-color: rgba(200, 164, 63, .6); color: var(--ivory); }
.of-chips button.on, .of-views button.on {
  background: linear-gradient(180deg, #D2AE48, #C8A43F 60%, #B7942F);
  color: #14110A; border-color: transparent;
}

.of-card[hidden], .of-table tr[hidden], .of-grid[hidden], .of-compare[hidden] { display: none !important; }

.of-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem); align-items: start;
}
.of-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 8px;
  background: rgba(20, 17, 10, .62); border: 1px solid rgba(200, 164, 63, .22);
  transition: border-color .35s, transform .35s, box-shadow .35s;
}
.of-card:hover {
  border-color: rgba(200, 164, 63, .5); transform: translateY(-3px);
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .85);
}
.of-media {
  display: block; position: relative; width: 100%; padding: 0; border: 0;
  background: #0b0a07; cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden;
}
.of-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block;
  transition: transform .7s cubic-bezier(.2, .8, .25, 1);
}
.of-card:hover .of-media img { transform: scale(1.04); }
.of-media-tag {
  position: absolute; left: .7rem; bottom: .7rem;
  font-family: var(--body); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ivory); background: rgba(8, 7, 4, .8);
  border: 1px solid rgba(200, 164, 63, .35); padding: .35rem .6rem; border-radius: 4px;
}
.of-body { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.of-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.of-tag {
  font-family: var(--body); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: 4px;
  background: rgba(234, 216, 166, .08); color: rgba(234, 216, 166, .82);
}
.of-tag-gold { background: rgba(200, 164, 63, .18); color: var(--gold-2); }
.of-body h3, .of-lb-body h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.2;
  color: var(--ivory); letter-spacing: -.01em;
}
.of-code {
  margin-top: -.5rem; font-family: var(--body); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(234, 216, 166, .55);
}
.of-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.of-facts li {
  display: flex; justify-content: space-between; gap: 1rem; font-size: .84rem;
  padding-bottom: .35rem; border-bottom: 1px solid rgba(200, 164, 63, .1);
}
.of-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.of-facts span { color: rgba(234, 216, 166, .62); }
.of-facts b { color: var(--ivory); font-weight: 500; text-align: right; }
.of-rooms { display: flex; gap: .35rem; flex-wrap: wrap; }
.of-rooms button {
  flex: 1 1 0; min-width: 64px; cursor: pointer;
  font-family: var(--body); font-size: .78rem; font-weight: 500;
  padding: .58rem .4rem; border-radius: 6px;
  background: rgba(8, 7, 4, .55); border: 1px solid rgba(200, 164, 63, .28);
  color: rgba(234, 216, 166, .85); transition: background .2s, color .2s;
}
.of-rooms button.on { background: var(--gold-2); color: #14110A; border-color: transparent; }
.of-price small {
  display: block; margin-bottom: .15rem;
  font-family: var(--body); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(234, 216, 166, .55);
}
.of-price b {
  font-family: var(--display); font-weight: 600; font-size: 1.7rem;
  color: var(--gold-2); letter-spacing: -.01em; line-height: 1.1;
}
.of-price b.of-call { font-size: 1.25rem; font-style: italic; font-weight: 500; color: rgba(234, 216, 166, .88); }
.of-hl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.of-hl li {
  font-size: .72rem; padding: .28rem .55rem; border-radius: 4px;
  border: 1px solid rgba(200, 164, 63, .22); color: rgba(234, 216, 166, .78);
}
.of-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: .5rem; margin-top: auto; padding-top: .2rem; }
.of-more, .of-book {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .78rem .8rem; border-radius: 6px; cursor: pointer; text-decoration: none;
  font-family: var(--body); font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  transition: filter .25s, border-color .25s, color .25s;
}
.of-more { background: transparent; border: 1px solid rgba(200, 164, 63, .4); color: var(--ivory); }
.of-more:hover { border-color: var(--gold-2); color: var(--gold-2); }
.of-book { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--kiswah); border: 0; }
.of-book:hover { filter: brightness(1.08); }
.of-book svg { width: 15px; height: 15px; }
.of-book.sm { padding: .45rem .8rem; font-size: .66rem; }

/* Compare */
.of-table-wrap {
  overflow-x: auto; border-radius: 8px;
  border: 1px solid rgba(200, 164, 63, .22); background: rgba(20, 17, 10, .55);
}
.of-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .86rem; }
.of-table th, .of-table td {
  padding: .8rem .9rem; text-align: left; vertical-align: middle; white-space: nowrap;
  border-bottom: 1px solid rgba(200, 164, 63, .12); color: rgba(234, 216, 166, .82);
}
.of-table thead th {
  font-family: var(--body); font-size: .64rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); background: rgba(8, 7, 4, .5);
}
.of-table tbody th {
  font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ivory);
  white-space: normal; min-width: 180px;
}
.of-table tbody th small {
  display: block; margin-top: .15rem; font-family: var(--body); font-size: .64rem;
  font-weight: 400; letter-spacing: .08em; color: rgba(234, 216, 166, .5);
}
.of-table td.num { font-family: var(--display); font-size: 1rem; color: var(--ivory); }
.of-table .dim { color: rgba(234, 216, 166, .32); }
.of-table tbody tr:last-child th, .of-table tbody tr:last-child td { border-bottom: 0; }
.of-table tbody tr:hover { background: rgba(200, 164, 63, .05); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Details window. The poster window opens above it. */
#hj-poster-lb { z-index: 130; }
.of-lb {
  position: fixed; inset: 0; z-index: 95; padding: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 4, 2, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.of-lb.open { opacity: 1; visibility: visible; }
.of-lb-box {
  position: relative; width: min(620px, 100%); max-height: calc(100dvh - 2rem); overflow: auto;
  background: #110f09; border: 1px solid rgba(200, 164, 63, .3); border-radius: 10px;
  padding: 1.6rem 1.5rem 1.4rem; color: rgba(234, 216, 166, .84);
}
.of-lb-x {
  position: absolute; top: .6rem; right: .6rem; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(200, 164, 63, .3);
  color: var(--ivory); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.of-lb-body { display: grid; gap: 1rem; }
.of-lb-body h3 { font-size: 1.6rem; padding-right: 2.4rem; }
.of-lb-body h4 {
  font-family: var(--body); font-size: .64rem; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-2); margin-bottom: .45rem;
}
.of-lb-sub { color: rgba(234, 216, 166, .68); font-size: .92rem; line-height: 1.6; }
.of-lb-prices {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.of-lb-prices li { border: 1px solid rgba(200, 164, 63, .22); border-radius: 6px; padding: .55rem .7rem; }
.of-lb-prices span {
  display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(234, 216, 166, .58);
}
.of-lb-prices b { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--gold-2); }
.of-lb-hotels { width: 100%; border-collapse: collapse; font-size: .86rem; }
.of-lb-hotels th, .of-lb-hotels td {
  text-align: left; padding: .45rem .5rem .45rem 0; border-bottom: 1px solid rgba(200, 164, 63, .12);
}
.of-lb-hotels th { color: var(--ivory); font-weight: 500; }
.of-lb-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .88rem; }
.of-lb-inc li { position: relative; padding-left: 1rem; }
.of-lb-inc li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.of-lb-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.of-lb-actions > * { flex: 1 1 160px; }

@media (prefers-reduced-motion: reduce) {
  .of-card, .of-media img, .of-lb { transition: none; }
}

@media (max-width: 640px) {
  .offers-home { padding-block: 3rem; }
  .offers-head h2 { font-size: clamp(1.5rem, 6.8vw, 1.75rem); }
  .offers-head p { font-size: .92rem; }
  .of-bar { gap: .6rem; }
  .of-chips {
    flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none;
  }
  .of-chips::-webkit-scrollbar { display: none; }
  .of-chips button { flex: 0 0 auto; padding: .5rem .9rem; font-size: .72rem; }
  /* Cards swipe sideways on a phone rather than stacking into a long column. */
  .of-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: .8rem; padding-bottom: .4rem; scrollbar-width: none;
  }
  .of-grid::-webkit-scrollbar { display: none; }
  .of-card { flex: 0 0 86%; scroll-snap-align: center; }
  .of-body { padding: .95rem 1rem 1.05rem; gap: .65rem; }
  .of-body h3 { font-size: 1.2rem; }
  .of-price b { font-size: 1.5rem; }
  .of-rooms button { padding: .62rem .3rem; }
  .of-table { font-size: .8rem; }
  .of-lb-box { padding: 1.3rem 1.1rem 1.1rem; }
}