/*
 * TouchScreens Oman — CMS pages, Contact and the error page (owner: site agent).
 * Not designed this round (README §4): restyled with the tokens in the reading language of the Guide Article
 * design (centred header on the girih pattern, sticky rail, 760px measure, 17px/1.85 body).
 * Desktop-first; breakpoints 1020 / 900 / 640 as the rest of the theme.
 */

/* ---------- Reading progress (flag red → amber), CMS only ---------- */
.o-cms-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70; pointer-events: none; }
.o-cms-progress > span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--oman-red), var(--cta));
  transform: scaleX(0); transform-origin: left center;
}
[dir="rtl"] .o-cms-progress > span { transform-origin: right center; background: linear-gradient(270deg, var(--oman-red), var(--cta)); }

/* ---------- Page header (Guide Article header) ---------- */
.o-cms-head {
  position: relative; overflow: hidden;
  /* Guide Article header: 160px down at every width (clears the taller unscrolled desktop header too). */
  padding: max(160px, calc(var(--o-header-h) + 26px)) var(--gutter) 40px;
}
.o-cms-head__pattern { -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.o-cms-head__inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.o-cms-pill {
  margin-top: 20px; display: inline-flex; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  color: var(--copper); padding: 7px 14px; border-radius: var(--r-pill); background: rgba(233, 138, 44, .12);
}
[dir="rtl"] .o-cms-pill { letter-spacing: 0; }
.o-cms-title {
  margin: 18px 0 0; font-size: clamp(34px, 4.8vw, 64px); line-height: 1.08; letter-spacing: -.03em;
  font-weight: 800; color: var(--ink); text-wrap: balance;
}
[dir="rtl"] .o-cms-title { letter-spacing: 0; line-height: 1.3; }
.o-cms-dek { margin: 18px auto 0; max-width: 680px; color: var(--lede); font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.o-cms-meta {
  margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 26px; font-size: 13.5px; color: var(--lede);
}
.o-cms-meta > span { display: inline-flex; align-items: center; gap: 8px; }
/* "Updated 14 Sep 2026": the label and the date are one run of text, separated by a normal word space. */
.o-cms-meta > .o-cms-meta__upd { display: block; }
.o-cms-meta > span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--muted-4); margin-inline-end: 18px; }
.o-cms-meta__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cta); flex: none; }
.o-cms-meta__dot.is-open { background: var(--wa); }

@media (prefers-reduced-motion: no-preference) {
  .o-cms-head__inner { animation: o-cms-in .7s var(--ease) both; }
  @keyframes o-cms-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}

/* ---------- Body grid: rail + article ---------- */
.o-cms-body { padding: 30px var(--gutter) 80px; }
.o-cms-grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 48px; align-items: start;
}
.o-cms-rail {
  position: sticky; top: calc(var(--o-bar-bottom, var(--o-header-h)) + 22px);
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
/* No scroll box anywhere in the rail (design: plain sticky column). When the rail is taller than the window, js/cms.js
   moves its sticky `top` with the page instead: the rail scrolls along until its end (the Project brief CTA) is in view,
   and comes back down when the visitor scrolls up, so every TOC link and the whole brief card are reachable. */
.o-cms-rail > * { flex-shrink: 0; }
.o-cms-rail__label { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3); }
[dir="rtl"] .o-cms-rail__label { letter-spacing: 0; }
.o-cms-rail__note { margin: -4px 0 0; font-size: 12.5px; color: var(--muted-2); line-height: 1.5; }
.o-cms-rail__brief { margin-top: 10px; padding: 22px; border-radius: 24px; }
.o-cms-rail__brief .o-redpanel__title { font-size: 19px; line-height: 1.3; }
.o-cms-rail__cta { align-self: flex-start; padding: 12px 16px; font-size: 13px; font-weight: 800; }
.o-cms-rail__cta .o-icon { font-size: 14px; }

/* TOC */
.o-cms-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-inline-start: 2px solid var(--line-10); }
.o-cms-toc__list a {
  display: block; padding: 8px 14px; margin-inline-start: -2px; border-inline-start: 2px solid transparent;
  color: var(--muted-2); font-weight: 500; font-size: 13.5px; line-height: 1.4;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.o-cms-toc__list a:hover { color: var(--ink); }
.o-cms-toc__list a[aria-current="true"] { border-inline-start-color: var(--cta); color: var(--ink); font-weight: 800; }
.o-cms-toc__sub a { padding-inline-start: 26px; font-size: 13px; }
.o-cms-toc--rail { display: flex; flex-direction: column; gap: 14px; }
.o-cms-toc--inline { display: none; }

/* Talk-to-us link card (the design's Share card) */
.o-cms-links { display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-10); overflow: hidden; }
.o-cms-links a {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: var(--ink); font-weight: 700; font-size: 13px;
  min-width: 0; transition: background var(--t-hover) var(--ease);
}
.o-cms-links a + a { border-top: 1px solid var(--line); }
.o-cms-links a:hover { background: var(--bg); color: var(--ink); }
.o-cms-links a > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-cms-links__ic {
  width: 26px; height: 26px; border-radius: 8px; background: var(--sand); color: var(--copper);
  display: grid; place-items: center; font-size: 14px; flex: none;
}
.o-cms-links__ic--wa { background: var(--wa); color: var(--wa-ink); }

/* ---------- Article typography (Guide Article body) ---------- */
.o-cms-article { min-width: 0; max-width: 760px; }
.o-cms-prose { font-size: 17px; line-height: 1.85; color: var(--text); }
.o-cms-prose > * + * { margin-top: 18px; }
.o-cms-prose > :first-child { margin-top: 0; }
.o-cms-prose p { margin-bottom: 0; }
.o-cms-prose h2 {
  margin: 52px 0 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -.03em; font-weight: 800;
  color: var(--ink); text-wrap: balance;
}
.o-cms-prose h3 { margin: 36px 0 0; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.3; font-weight: 800; color: var(--ink); }
/* A TOC jump lands the heading 110px from the top (Guide Article). base.css already pads the scroll port by
   --o-header-h + 12px, and scroll-margin adds to it, so the margin is the difference (negative on desktop). */
.o-cms-prose h2, .o-cms-prose h3 { scroll-margin-top: calc(110px - var(--o-header-h) - 12px); }
.o-cms-prose h4 { margin: 28px 0 0; font-size: 17px; font-weight: 800; color: var(--ink); }
[dir="rtl"] .o-cms-prose h2, [dir="rtl"] .o-cms-prose h3 { letter-spacing: 0; line-height: 1.45; }
.o-cms-prose h2 + *, .o-cms-prose h3 + *, .o-cms-prose h4 + * { margin-top: 14px; }
.o-cms-prose strong, .o-cms-prose b { color: var(--ink); font-weight: 700; }
.o-cms-prose a { color: var(--copper); text-decoration: underline; text-decoration-color: var(--accent-line-strong); text-underline-offset: 3px; }
.o-cms-prose a:hover { color: var(--copper-hover); text-decoration-color: currentColor; }
.o-cms-prose a.o-cms-ltr { unicode-bidi: isolate; white-space: nowrap; font-weight: 700; }
.o-cms-prose ul, .o-cms-prose ol { margin: 16px 0 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }
.o-cms-prose ul { list-style: disc; }
.o-cms-prose ol { list-style: decimal; }
.o-cms-prose li { padding-inline-start: 4px; }
.o-cms-prose li::marker { color: var(--copper); }
.o-cms-prose ol > li::marker { font-weight: 800; font-size: .92em; }
.o-cms-prose ul ul, .o-cms-prose ol ol, .o-cms-prose ul ol, .o-cms-prose ol ul { margin-top: 8px; }
.o-cms-prose blockquote {
  margin: 26px 0 0; display: grid; grid-template-columns: 44px 1fr; gap: 14px; border-radius: 20px; background: var(--sand);
  padding: 20px; font-size: 15px; line-height: 1.7;
}
.o-cms-prose blockquote::before { content: "\2726"; font-family: var(--ruqaa); font-size: 30px; line-height: 1; color: var(--copper); }
.o-cms-prose hr { border: 0; border-top: 1px solid var(--line-10); margin: 40px 0 0; }
.o-cms-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.o-cms-prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.o-cms-prose dt { font-weight: 800; color: var(--ink); }
.o-cms-prose dd { margin: 0; }

/* Tables — the Guide Article table card */
.o-cms-table { margin-top: 26px; border-radius: 20px; border: 1px solid var(--line-10); background: var(--surface); overflow: auto; }
.o-cms-table:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.o-cms-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.o-cms-table th, .o-cms-table td { padding: 13px 16px; border-top: 1px solid var(--line-07); text-align: start; vertical-align: top; }
.o-cms-table thead th, .o-cms-table tr:first-child th {
  background: var(--bg); border-top: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3);
}
[dir="rtl"] .o-cms-table th { letter-spacing: 0; }
.o-cms-table caption { caption-side: bottom; padding: 10px 16px; font-size: 12.5px; color: var(--muted-2); text-align: start; }

/* Closing "Questions about this page?" card (the design's author-bio card) */
.o-cms-ask {
  position: relative; overflow: hidden; margin-top: 56px; border-radius: 22px; background: var(--surface);
  border: 1px solid var(--accent-line); padding: 26px 26px 24px;
}
.o-cms-ask__flag { position: absolute; inset: 0 0 auto 0; }
.o-cms-ask__h { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
[dir="rtl"] .o-cms-ask__h { letter-spacing: 0; line-height: 1.45; }
.o-cms-ask__p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: var(--lede); }
.o-cms-ask__actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.o-cms-ask__actions .o-icon { font-size: 16px; }

/* ---------- "Other policies" band (the design's "Keep reading") ---------- */
.o-cms-more { padding: 70px var(--gutter) 90px; background: var(--sand); border-top: 1px solid var(--line); }
.o-cms-more__inner { max-width: 1200px; margin: 0 auto; }
.o-cms-more__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.o-cms-more__h { margin: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.03em; font-weight: 800; color: var(--ink); line-height: 1.15; }
[dir="rtl"] .o-cms-more__h { letter-spacing: 0; }
.o-cms-more__all { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.o-cms-more__grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.o-cms-card {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px; border-radius: 22px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.o-cms-card:hover { border-color: var(--accent-line-strong); color: var(--ink); box-shadow: var(--sh-card); }
.o-cms-card__k { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
[dir="rtl"] .o-cms-card__k { letter-spacing: 0; }
.o-cms-card__h { font-weight: 800; font-size: 17px; line-height: 1.4; }
.o-cms-card__p { font-size: 14px; line-height: 1.6; color: var(--muted-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .o-cms-card:hover { transform: translateY(-2px); }
}

/* ---------- ≤900: stack; the rail drops below the article, the TOC becomes a collapsible block above it ---------- */
@media (max-width: 900px) {
  .o-cms-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .o-cms-rail { position: static; order: 2; max-height: none; overflow: visible; }
  .o-cms-toc--rail { display: none; }
  .o-cms-toc--inline {
    display: block; order: -1; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-10);
  }
  .o-cms-article { max-width: none; }
  .o-cms-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; align-items: start; }
  .o-cms-rail > .o-cms-rail__label, .o-cms-rail > .o-cms-rail__note { grid-column: 1; }
  .o-cms-rail > .o-cms-links { grid-column: 1; }
  .o-cms-rail > .o-cms-rail__brief { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}
@media (max-width: 640px) {
  .o-cms-rail { grid-template-columns: minmax(0, 1fr); }
  .o-cms-rail > .o-cms-rail__brief { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .o-cms-ask { padding: 22px 18px 20px; }
  .o-cms-ask__actions .o-btn { flex: 1 1 100%; justify-content: center; }
  .o-cms-more { padding: 56px var(--gutter) 70px; }
}
.o-cms-toc__sum {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
[dir="rtl"] .o-cms-toc__sum { letter-spacing: 0; }
.o-cms-toc__sum::-webkit-details-marker { display: none; }
.o-cms-toc__count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--sand); color: var(--copper); display: inline-grid; place-items: center; font-size: 11.5px; letter-spacing: 0; }
.o-cms-toc__chev { margin-inline-start: auto; font-size: 14px; color: var(--muted-3); transition: transform var(--t-hover) var(--ease); }
.o-cms-toc--inline[open] .o-cms-toc__chev { transform: rotate(180deg); }
.o-cms-toc--inline .o-cms-toc__list { margin: 0 16px 14px; }

/* ================================================================
   Contact page
   ================================================================ */
.o-contact-head .o-cms-head__inner { max-width: 960px; }
.o-contact-chips { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.o-contact-body { padding: 24px var(--gutter) 90px; }
.o-contact-grid {
  max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 44px); align-items: start;
}

/* Form card */
.o-contact-card {
  position: relative; overflow: hidden; border-radius: var(--r-card-lg); background: var(--surface);
  border: 1px solid var(--accent-line); padding: clamp(24px, 3vw, 36px); box-shadow: 0 30px 70px rgba(70, 45, 20, .06);
}
.o-contact-card__flag { position: absolute; inset: 0 0 auto 0; }
.o-contact-card__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
[dir="rtl"] .o-contact-card__eyebrow { letter-spacing: 0; }
.o-contact-card__h { margin: 10px 0 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
[dir="rtl"] .o-contact-card__h { letter-spacing: 0; line-height: 1.4; }
.o-contact-card__sub { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--lede); max-width: 560px; }
.o-contact-form { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
.o-contact-form label { font-size: 12.5px; font-weight: 700; color: var(--text-ui); }
.o-contact-form label .o-contact-opt { font-weight: 500; color: var(--muted-3); }
.o-contact-form textarea.o-input { min-height: 160px; resize: vertical; line-height: 1.6; font-family: inherit; }
.o-contact-form__hint { margin: 0; font-size: 12px; color: var(--muted-3); line-height: 1.5; }
.o-contact-form__formerr {
  grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff3f1; border: 1px solid rgba(214, 40, 46, .25);
  color: #b3261e; font-size: 13.5px; font-weight: 600; line-height: 1.5;
}
.o-contact-form__send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 4px; }
.o-contact-form__send .o-btn { min-width: 220px; justify-content: center; }
.o-contact-form__send .o-btn.is-busy { cursor: progress; }
.o-contact-form__foot { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }
.o-contact-form__foot a { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }

/* Sent state */
.o-contact-sent { text-align: center; padding: clamp(18px, 3vw, 36px) 0 8px; }
.o-contact-sent:focus { outline: none; }
.o-contact-sent__check {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: rgba(27, 138, 58, .12); color: var(--oman-green);
  display: grid; place-items: center; font-size: 30px;
}
.o-contact-sent__shukran { margin-top: 14px; font-family: var(--ruqaa); font-size: 56px; line-height: 1.1; color: var(--copper); }
.o-contact-sent__thanks { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--ink); }
.o-contact-sent__p { margin: 12px auto 0; max-width: 460px; font-size: 15.5px; line-height: 1.7; color: var(--lede); }
.o-contact-sent__ref {
  margin: 16px auto 0; display: inline-flex; gap: .4em; padding: 8px 14px; border-radius: 99px; background: var(--sand);
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .04em;
}
.o-contact-sent__actions { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .o-contact-sent:not([hidden]) .o-contact-sent__check { animation: o-contact-pop .6s var(--ease) both; }
  @keyframes o-contact-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Side rail */
.o-contact-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.o-contact-tile { border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); padding: 22px; }
.o-contact-tile__label { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3); }
[dir="rtl"] .o-contact-tile__label { letter-spacing: 0; }
.o-contact-tile__h { margin: 8px 0 0; font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--ink); }
.o-contact-tile__p { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: var(--lede); }
.o-contact-tile .o-btn { margin-top: 16px; }
.o-contact-tile .o-btn .o-icon { font-size: 18px; }
.o-contact-direct { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.o-contact-direct li + li { border-top: 1px solid var(--line); }
.o-contact-direct a { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--ink); font-weight: 700; font-size: 14.5px; min-width: 0; }
.o-contact-direct a:hover { color: var(--copper); }
.o-contact-direct small { display: block; font-size: 12px; font-weight: 600; color: var(--muted-3); }
.o-contact-direct .o-cms-links__ic { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.o-contact-hours { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-ui); font-weight: 600; }
.o-contact-hours__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cta); flex: none; box-shadow: 0 0 0 4px rgba(233, 138, 44, .16); }
.o-contact-hours__dot.is-open { background: var(--wa); box-shadow: 0 0 0 4px rgba(37, 211, 102, .18); }
.o-contact-side .o-redpanel { padding: 24px; border-radius: 24px; }

/* "What to include" band */
.o-contact-include { padding: 70px var(--gutter) 90px; background: var(--sand); border-top: 1px solid var(--line); }
.o-contact-include__inner { max-width: 1200px; margin: 0 auto; }
.o-contact-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: o-step; }
.o-contact-steps li { counter-increment: o-step; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); padding: 20px 18px; }
.o-contact-steps li::before {
  content: counter(o-step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cta-soft); color: var(--copper-hover); font-weight: 800; font-size: 13px;
}
.o-contact-steps b { display: block; margin-top: 12px; font-size: 15.5px; color: var(--ink); font-weight: 800; }
.o-contact-steps p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted-2); }

@media (max-width: 1020px) {
  .o-contact-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .o-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .o-contact-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 640px) {
  .o-contact-form { grid-template-columns: minmax(0, 1fr); }
  .o-contact-side { grid-template-columns: minmax(0, 1fr); }
  .o-contact-steps { grid-template-columns: minmax(0, 1fr); }
  .o-contact-form__send .o-btn { width: 100%; }
}

/* ================================================================
   Error page (404 and friends)
   ================================================================ */
.o-err-head { padding-bottom: 28px; }
.o-err-code {
  display: inline-flex; align-items: baseline; gap: 10px; margin-top: 20px; font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--copper); padding: 7px 14px; border-radius: var(--r-pill); background: rgba(233, 138, 44, .12);
}
[dir="rtl"] .o-err-code { letter-spacing: 0; }
.o-err-wm {
  position: absolute; inset-inline: 0; top: calc(var(--o-header-h) - 10px); text-align: center; pointer-events: none;
  font-family: var(--ruqaa); font-size: clamp(120px, 20vw, 280px); line-height: 1; color: rgba(180, 95, 20, .06);
}
/* Decorative: cms.js reveals it once Aref Ruqaa has loaded, so the font swap cannot shift it (CLS). */
.o-js .o-err-wm:not(.is-ready) { visibility: hidden; }
.o-err-search {
  margin: 28px auto 0; max-width: 620px; display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line-14); box-shadow: 0 18px 40px rgba(70, 45, 20, .08);
}
.o-err-search:focus-within { border-color: var(--cta); }
/* Keyboard focus in the search field: a copper ring (≥3:1 on the page and the card), since the input itself has no outline. */
.o-err-search:has(input:focus-visible) { outline: 2px solid var(--copper); outline-offset: 2px; }
.o-err-search .o-icon { font-size: 18px; color: var(--muted-3); margin-inline-start: 12px; flex: none; }
.o-err-search input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 10px 4px; font: 500 16px var(--font); color: var(--ink); outline: none;
}
.o-err-search input::placeholder { color: var(--muted-4); }
/* Chrome reserves room for the (invisible) clear button while the field is empty, clipping the placeholder early. */
.o-err-search input:placeholder-shown::-webkit-search-cancel-button { display: none; }
/* Narrow phones: drop the decorative magnifier (the button already says Search) so the placeholder is not clipped. */
@media (max-width: 380px) {
  .o-err-search .o-icon { display: none; }
  .o-err-search input { padding-inline-start: 6px; }
  .o-err-search .o-btn { padding-inline: 12px; }
}
.o-err-actions { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.o-err-actions .o-icon { font-size: 16px; }
.o-err-cats { padding: 26px var(--gutter) 90px; }
.o-err-cats__inner { max-width: 1200px; margin: 0 auto; }
.o-err-cats__h { margin: 0; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3); }
[dir="rtl"] .o-err-cats__h { letter-spacing: 0; }
.o-err-grid { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.o-err-tile {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; height: 100%;
  padding: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.o-err-tile:hover { border-color: var(--accent-line-strong); box-shadow: var(--sh-card); color: var(--ink); }
.o-err-tile__img { width: 88px; height: 66px; border-radius: 12px; background: #fff; border: 1px solid var(--line-06); overflow: hidden; display: grid; place-items: center; }
.o-err-tile__img img { width: 100%; height: 100%; object-fit: contain; }
.o-err-tile__name { display: block; font-weight: 800; font-size: 15px; line-height: 1.35; }
.o-err-tile__count { display: block; margin-top: 3px; font-size: 12.5px; color: var(--copper); font-weight: 700; }
.o-err-help { max-width: 1200px; margin: 34px auto 0; }
.o-err-help .o-redpanel { padding: clamp(24px, 3vw, 34px); border-radius: 28px; }
.o-err-help__row { display: flex; flex-wrap: wrap; gap: 10px; }
.o-err-help .o-redpanel__title { font-size: clamp(22px, 2.4vw, 30px); max-width: 720px; }
.o-err-help .o-icon { font-size: 16px; }

/* Minimal error page (no header / footer; used when the full page cannot render) */
.o-err-min { min-height: 100vh; display: grid; place-items: center; padding: 40px var(--gutter); text-align: center; }
.o-err-min__logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--ink); }
.o-err-min__logo img { width: 42px; height: 24px; border-radius: 4px; }
.o-err-min .o-cms-title { font-size: clamp(30px, 4vw, 48px); }

/* Contact — small bits */
.o-contact-chips { list-style: none; padding: 0; }
.o-contact-form__alt { font-size: 14px; font-weight: 700; color: var(--wa-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(37, 211, 102, .5); }
.o-contact-form__alt:hover { color: var(--wa-text); text-decoration-color: currentColor; }
.o-contact-hours__label { font-size: 12.5px; font-weight: 500; color: var(--muted-2); }
.o-contact-tile .o-btn--whatsapp { gap: 8px; }