/* ---------- tokens ---------- */
:root {
  /* lets a disclosure animate its height to auto rather than snapping open */
  interpolate-size: allow-keywords;

  --sand: #FCE5C4;
  --sand-deep: #F4D6AC;
  --cream: #FFF4E3;
  --card: #D2AF7F;             /* box surfaces: muddy tan */
  --card-deep: #C29E6E;        /* a step darker, for the expanded contact pills */
  --on-card: #3A2314;          /* text on those surfaces */
  --brown: #3A2314;
  --brown-soft: #5A3A1E;
  --terracotta: #C06A2A;
  --terracotta-deep: #A5571F;
  --amber: #D68A2E;
  --steel: #7E8593;
  --sadu-red: #9B2C22;
  --sadu-dark: #2A1810;
  --tan: #C8955A;

  --frame: 56px;               /* Sadu frame thickness (original strip is 73.94pt, motif every 50.95pt) */
  /* how wide the content runs — grows on bigger screens so nothing sits marooned in the middle */
  --page: 1120px;
  --page-narrow: 820px;
  --hero: 760px;
  --hero-logo: 620px;
  --topbar-h: 72px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(58, 35, 20, .10);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Montserrat", "Tajawal", system-ui, sans-serif;
}
html[dir="rtl"] { --font: "Tajawal", "Montserrat", system-ui, sans-serif; }

@media (max-width: 720px) {
  :root { --frame: 22px; --topbar-h: 60px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 900px) and (hover: hover) {
  html { scroll-snap-type: y proximity; }
  .section { scroll-snap-align: start; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  color: var(--brown);
  background: var(--sand);
  padding-inline: var(--frame);
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.15; margin: 0; }
h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 800;
  color: var(--terracotta);
  letter-spacing: -.01em;
}
html[dir="rtl"] h2 { letter-spacing: 0; }
h3 { font-size: 1.2rem; font-weight: 800; }
p { margin: 0; }
a { color: inherit; }

.container { width: min(var(--page), 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.container--narrow { width: min(var(--page-narrow), 100%); }

/* Large monitors: scale the whole page up rather than leaving it small in a sea of sand. */
@media (min-width: 1500px) { :root { --page: 1320px; --page-narrow: 900px; --hero: 860px; --hero-logo: 700px; } }
@media (min-width: 1800px) { :root { --page: 1520px; --page-narrow: 960px; --hero: 980px; --hero-logo: 800px; } }
@media (min-width: 2200px) { :root { --page: 1760px; --page-narrow: 1040px; --hero: 1120px; --hero-logo: 900px; } }
@media (min-width: 1800px) { body { font-size: 1.06rem; } .nav__brand img { width: 152px; } }
@media (min-width: 2200px) { body { font-size: 1.12rem; } .nav__brand img { width: 168px; } }

.skip {
  position: absolute; inset-inline-start: 16px; top: -100px;
  background: var(--brown); color: var(--cream); padding: 10px 14px; border-radius: 8px; z-index: 100;
}
.skip:focus { top: 16px; }

/* ---------- Sadu frame ---------- */
.frame {
  position: fixed; top: 0; bottom: 0; width: var(--frame); z-index: 40;
  background: url("/assets/sadu-v.svg") 0 0 / var(--frame) auto repeat-y;
  pointer-events: none;
}
.frame--start { left: 0; }
.frame--end   { right: 0; transform: scaleX(-1); }

/* top and bottom runs of the frame, with the mitred corners from the original sheet */
.sadu-band {
  position: relative; height: var(--frame);
  background: url("/assets/sadu-h.svg") 0 0 / auto var(--frame) repeat-x;
}
.sadu-band::before, .sadu-band::after {
  content: ""; position: absolute; top: 0; width: var(--frame); height: var(--frame); z-index: 41;
  background-size: 100% 100%;
}
.sadu-band::before { left: calc(-1 * var(--frame)); }
.sadu-band::after  { right: calc(-1 * var(--frame)); }
.sadu-band--bottom::before { background-image: url("/assets/sadu-corner-bl.svg"); }
/* the right corner is the left one mirrored, so it reuses the same file */
.sadu-band--bottom::after  { background-image: url("/assets/sadu-corner-bl.svg"); transform: scaleX(-1); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--sand) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(58, 35, 20, .10);
  transition: box-shadow .4s var(--ease);
}
body.scrolled .topbar { box-shadow: 0 6px 24px rgba(58, 35, 20, .08); }
.nav {
  display: flex; align-items: center; gap: 20px;
  height: var(--topbar-h);
}
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-inline-end: auto; }
.nav__brand img { width: 132px; height: auto; }
.nav__links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: inline-block; padding: 8px 12px; border-radius: 999px;
  text-decoration: none; font-size: .9rem; font-weight: 700;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav__links a:hover { background: rgba(58, 35, 20, .07); }
.nav__links a.active { background: rgba(192, 106, 42, .14); color: var(--terracotta-deep); }
.nav__links a.nav__cta { background: var(--terracotta); color: var(--cream); }
.nav__links a.nav__contact { border: 2px solid var(--brown); padding: 6px 12px; }
.nav__links a.nav__contact:hover, .nav__links a.nav__contact.active { background: var(--brown); color: var(--cream); }
.nav__links a.nav__cta:hover, .nav__links a.nav__cta.active { background: var(--terracotta-deep); color: var(--cream); }
.lang {
  font: inherit; font-weight: 800; font-size: .9rem;
  background: transparent; color: var(--brown);
  border: 2px solid var(--brown); border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lang:hover { background: var(--brown); color: var(--cream); }

.nav__links a { white-space: nowrap; }
@media (max-width: 720px) {
  .nav { gap: 8px; }
  .nav .container, .nav { padding-inline: 12px; }
  .nav__brand img { width: 96px; }
  .nav__links { gap: 0; }
  .nav__links li:nth-child(-n+2) { display: none; }   /* brand mark links home; Who we are is a scroll away */
  .nav__links a { padding: 6px 8px; font-size: .78rem; }
  .lang { padding: 4px 9px; font-size: .78rem; border-width: 1.5px; }
}
@media (max-width: 360px) {
  .nav__links a.nav__contact { display: none; }
}

/* ---------- sections ---------- */
.section {
  min-height: calc(100svh - var(--topbar-h));
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  padding-block: clamp(72px, 10vh, 120px) clamp(110px, 14vh, 150px);
  scroll-margin-top: var(--topbar-h);
  position: relative;
}
.eyebrow {
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brown-soft); margin-bottom: 14px; font-weight: 700;
}
html[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: .95rem; }
.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--brown-soft);
  max-width: 62ch; margin-top: 18px;
}

.divider {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding-inline: clamp(16px, 8vw, 120px);
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(58,35,20,.35), transparent);
}
.divider i { width: 22px; height: 22px; background: url("/assets/diamond.svg") center / contain no-repeat; }

/* ---------- hero ---------- */
.hero { text-align: center; }
.hero__inner { width: min(var(--hero), 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.hero__logo { width: min(var(--hero-logo), 100%); margin-inline: auto; }
.hero__tagline {
  margin-top: 26px; font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--brown-soft); max-width: 46ch; margin-inline: auto; text-wrap: balance;
}
.hero__actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; border: 2px solid var(--terracotta);
  background: var(--terracotta); color: var(--cream); text-decoration: none;
  font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
  transition: transform .35s var(--ease), background .3s var(--ease), box-shadow .35s var(--ease), border-color .3s var(--ease);
  box-shadow: 0 8px 20px rgba(192, 106, 42, .25);
}
.btn:hover { transform: translateY(-2px); background: var(--terracotta-deep); border-color: var(--terracotta-deep); box-shadow: 0 14px 28px rgba(192,106,42,.3); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn--ghost { background: transparent; color: var(--brown); border-color: var(--brown); box-shadow: none; }
.btn--ghost:hover { background: var(--brown); color: var(--cream); border-color: var(--brown); box-shadow: none; }

.scroll-cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: .8; text-decoration: none;
  transition: opacity .3s var(--ease);
}
.scroll-cue:hover { opacity: 1; }
.scroll-cue__mouse {
  position: relative; width: 28px; height: 46px; border: 2px solid var(--brown-soft); border-radius: 16px;
}
.scroll-cue__mouse i {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  background: var(--terracotta); border-radius: 2px; animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(16px); opacity: 0 } 100% { opacity: 0 } }
/* when the cue sits in the upper half of the screen it points back up, and the dot runs the other way */
.scroll-cue.up .scroll-cue__mouse i { top: 24px; animation-name: cue-up; }
@keyframes cue-up { 0% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(-16px); opacity: 0 } 100% { opacity: 0 } }

/* ---------- about ---------- */
.about__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px;
}
.card {
  background: var(--card); border: 1px solid rgba(58, 35, 20, .14); border-radius: var(--radius);
  padding: 28px 24px; box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(58,35,20,.14); }
.card h3 { color: var(--terracotta); margin-bottom: 8px; }
.card p { color: var(--brown-soft); font-size: .98rem; }
.card__gem {
  display: block; width: 22px; height: 22px; margin-bottom: 16px;
  background: url("/assets/diamond.svg") center / contain no-repeat;
}

/* ---------- services ---------- */
.services__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; margin-top: 44px;
}
.service { padding: 8px 12px; text-align: center; transition: transform .45s var(--ease); }
.service:hover { transform: translateY(-4px); }
.service__art { width: 100%; aspect-ratio: 2 / 1; }
.service__art img {
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  /* Each icon carries the room its drop shadow needs to finish fading, which is empty
     space on three sides. Sizing the image by that outer box would shrink the knife and
     lift it off the shelf line, so this scales the knife back to the width of the box and
     drops it back onto the bottom edge. The three numbers are the same for all six icons;
     tools/brand/README.md says where they come from. */
  transform-origin: center bottom;
  transform: translate(2.506%, 13.677%) scale(1.0868);
}
.service__name { color: var(--terracotta); margin-top: 6px; font-size: 1.15rem; }
.service__desc { color: var(--brown-soft); margin-top: 10px; font-size: .95rem; }

@media (max-width: 960px) {
  .about__grid, .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .about__grid, .services__grid { grid-template-columns: 1fr; }
}

/* ---------- booking form ---------- */
.book__start { margin-top: 34px; font-size: 1.1rem; padding: 16px 34px; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.book__start.gone { opacity: 0 !important; transform: scale(.94) !important; pointer-events: none; }   /* !important: outranks .reveal.in */
.form {
  margin-top: 40px; display: none;
  background: var(--card); border: 1px solid rgba(58, 35, 20, .14); border-radius: 22px;
  padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow);
}
.form.show { display: block; animation: unfold .7s var(--ease) both; transform-origin: top center; }
@keyframes unfold { from { opacity: 0; transform: translateY(-14px) scaleY(.9); } to { opacity: 1; transform: none; } }
.step { border: 0; padding: 0; margin: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .7s var(--ease), opacity .5s var(--ease), margin .5s var(--ease); }
.step.show { max-height: 2000px; opacity: 1; overflow: visible; }
.step + .step.show { margin-top: 34px; padding-top: 30px; border-top: 1px solid rgba(58, 35, 20, .18); }
.step__title { float: left; width: 100%; font-size: 1.25rem; font-weight: 800; color: var(--terracotta); padding: 0; margin-bottom: 14px; }   /* floated so the legend clips with its collapsed step */
.step::after { content: ""; display: block; clear: both; }
.step__title ~ * { clear: both; }   /* everything after the floated title starts below it */
.step__hint { color: var(--brown-soft); font-size: .92rem; margin: -6px 0 14px; }
.step__next { margin-top: 20px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper input { width: 92px; text-align: center; font: inherit; font-size: 1.2rem; font-weight: 800; -moz-appearance: textfield; color: var(--brown); background: var(--sand); border: 2px solid transparent; border-radius: 12px; padding: 8px 6px; outline: none; }
.stepper input:focus { border-color: var(--terracotta); box-shadow: 0 0 0 4px rgba(192,106,42,.18); }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__btn {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--terracotta); background: var(--terracotta);
  color: var(--cream); cursor: pointer; display: grid; place-items: center; padding: 0;
  box-shadow: 0 6px 14px rgba(192, 106, 42, .25);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.stepper__btn svg { width: 22px; height: 22px; }
.stepper__btn:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); transform: translateY(-1px); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px; margin: -6px; border-radius: 18px; }
.choice {
  display: inline-flex; align-items: center; cursor: pointer; padding: 10px 18px; border-radius: 999px;
  background: var(--sand); border: 2px solid transparent; font-weight: 700; color: var(--brown);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice:has(input:checked) { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(192,106,42,.3); }
.step.invalid .choices { outline: 2px solid var(--sadu-red); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: .85rem; font-weight: 700; color: var(--on-card); }
.field input, .field select, .field textarea {
  font: inherit; font-weight: 600; color: var(--brown);
  background: var(--sand); border: 2px solid transparent; border-radius: 12px; padding: 12px 14px;
  outline: none; transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--terracotta); background: var(--sand); box-shadow: 0 0 0 4px rgba(192,106,42,.18);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--sadu-red); }
.field__error { color: var(--sadu-red); font-size: .8rem; min-height: 1em; }
.field__error:empty { display: none; }
fieldset.segmented { border: 0; padding: 0; margin: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.segmented legend { padding: 0; margin-bottom: 8px; float: inline-start; width: 100%; }
.segmented .field__error { flex-basis: 100%; }
.segmented label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto;
  padding: 10px 16px; border-radius: 999px; background: var(--sand); border: 2px solid transparent;
  font-size: .95rem; font-weight: 700; color: var(--brown); transition: all .25s var(--ease);
}
.segmented label:has(input:checked) { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.segmented label { color: var(--brown); }
.segmented input { accent-color: var(--terracotta); margin: 0; width: auto; padding: 0; }
.segmented label span { white-space: nowrap; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form__actions { flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.form__status { font-size: .9rem; color: var(--brown-soft); }
.form__status.error { color: var(--sadu-red); }

.success {
  margin-top: 40px; background: var(--card); border: 1px solid rgba(58,35,20,.14); border-radius: 22px;
  padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow);
  animation: pop .6s var(--ease);
}
.success h3 { color: var(--terracotta); font-size: 1.5rem; margin-bottom: 10px; }
.success p { color: var(--brown-soft); }
.success__ref { margin-top: 14px; }
.success__ref strong { color: var(--on-card); font-weight: 800; letter-spacing: .06em; }
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(.98) } to { opacity: 1; transform: none } }

@media (max-width: 640px) {
  .form__grid { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
.footer { margin-top: clamp(40px, 8vh, 96px); }
.contact { text-align: center; padding-bottom: 36px; }
.contact .eyebrow { margin-bottom: 18px; }
.contact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; }
.contact__link {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 10px 18px; border-radius: 999px; background: var(--card);
  border: 1px solid rgba(58, 35, 20, .14); box-shadow: var(--shadow);
  font-weight: 700; color: var(--on-card); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.contact__link:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(58,35,20,.14); }
.contact__link img { width: 28px; height: 28px; flex: 0 0 auto; }
.contact__link { max-width: 100%; }
.contact__link span { overflow-wrap: anywhere; }
@media (max-width: 480px) { .contact__link { font-size: .9rem; padding: 9px 14px; } }
/* contacts: each is one element — a circle holding the icon — that widens into a pill on hover or click.
   The circle never moves; the text is revealed as the same shape grows out from it. */
.pull { position: relative; width: 52px; height: 52px; }
.pull__link {
  position: absolute; top: 0; inset-inline-start: 0; height: 52px; max-width: 52px;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  border-radius: 26px; background: var(--card); box-shadow: var(--shadow);
  color: var(--on-card); font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: max-width .6s cubic-bezier(.3, .7, .3, 1), background-color .6s ease;
}
.pull__icon { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; }
.pull__icon img { width: 28px; height: auto; display: block; }
.pull--left .pull__icon img { width: 30px; }   /* the WhatsApp bubble needs a touch more to match the Gmail mark optically */
.pull__text { padding: 0 22px; }   /* symmetric: the span is dir=ltr, so logical padding would flip in Arabic */
.pull:hover .pull__link, .pull.open .pull__link { max-width: 420px; background: var(--card-deep); }
/* the phone widens the other way, so the two never meet */
.pull--left .pull__link { inset-inline-start: auto; inset-inline-end: 0; flex-direction: row-reverse; }
/* narrower screens: contacts stack, both widening toward the inline end so the text has room */
@media (max-width: 900px) {
  .contact__list { flex-direction: column; align-items: flex-start; gap: 12px; padding-inline-start: 12px; }
  .pull--left .pull__link { inset-inline-start: 0; inset-inline-end: auto; flex-direction: row; }
  .pull__link { max-width: 52px; }
  .pull:hover .pull__link, .pull.open .pull__link { max-width: calc(100vw - 2 * var(--frame) - 24px); }
  .pull__text { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; }
}
.footer { overflow: clip; }
.footer__note { text-align: center; font-size: .82rem; color: var(--brown-soft); padding-bottom: 18px; }
.footer__skyline {
  width: 100%; min-height: 110px; object-fit: cover; object-position: bottom center;
}

/* ---------- scroll transitions ---------- */
.reveal {
  --reveal-y: 36px;
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
body[data-dir="up"] .reveal { --reveal-y: -36px; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue__mouse i { animation: none; }
  .pull__ribbon { transition: none; }
  .btn, .card, .service { transition: none; }
}

/* ---------- questions ---------- */
/* Dressed as the booking form is: a tan card holding sand-coloured rows, so the two
   sections at the foot of the page read as the same piece of furniture.

   Four tall cards in a row. Opening one lets it take most of the width and the others
   give theirs up, which is a flex-grow transition rather than anything measured in
   script. The name attribute on the four disclosures is what closes the rest. */
.faq__list {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 34px;
  /* a floor, not a cap: an expanding answer grows the row rather than scrolling inside it */
  min-height: 380px;
  text-align: start;
}

.faq__group {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid rgba(58, 35, 20, .14);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition:
    flex-grow .55s var(--ease),
    background-color .45s var(--ease),
    border-color .45s var(--ease);
}
.faq__group:hover { background: var(--card-deep); }
.faq__group[open] {
  flex-grow: 6;
  background: var(--card-deep);
  border-color: rgba(58, 35, 20, .22);
}

/* Closed, the summary is the whole card and its name sits centred. Open, it becomes an
   ordinary heading along the top, matching the form's step titles. */
.faq__group > summary {
  flex: 1 1 auto;
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 12px;
  transition: padding .45s var(--ease);
}
.faq__group > summary::-webkit-details-marker { display: none; }
.faq__group > summary:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -6px; }
.faq__group[open] > summary {
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  padding: 24px 24px 16px;
}

/* The banded motif from the heritage skyline at the foot of the page: two clusters of
   four dots either side of a small burst. Drawn rather than masked, so it keeps the two
   colours it has in the artwork. It shortens as the card opens and the emblem moves from
   sitting over the name to sitting beside it. */
.faq__group > summary::before {
  content: "";
  flex: none;
  width: 72px; height: 21px;
  background: url("/assets/motif-band.svg") center / contain no-repeat;
  transition: width .55s var(--ease), height .55s var(--ease);
}
.faq__group[open] > summary::before { width: 48px; height: 14px; }
/* A card squeezed down to make room for an open one has only about 90px of usable
   width, so the band comes in to match. */
.faq__list:has(.faq__group[open]) .faq__group:not([open]) > summary::before {
  width: 54px; height: 16px;
}

.faq__cat {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--terracotta);
  text-align: center;
  transition: font-size .45s var(--ease);
}
.faq__group[open] .faq__cat { font-size: 1.3rem; text-align: start; }

/* While every card is closed they are wide enough for their names to lie flat. The
   moment one opens the rest are too narrow for that, so those names stand up. */
.faq__list:has(.faq__group[open]) .faq__group:not([open]) .faq__cat {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
/* Arabic does not read rotated, so it stays level and wraps instead. */
html[dir="rtl"] .faq__list:has(.faq__group[open]) .faq__group:not([open]) .faq__cat {
  writing-mode: horizontal-tb;
  transform: none;
  white-space: normal;
  line-height: 1.5;
}

.faq__questions {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 18px;
  opacity: 0;
  transition: opacity .4s var(--ease) .15s;
}
.faq__group[open] .faq__questions { opacity: 1; }

/* Each question is a sand-coloured row, the same shape and colour as a form field. */
.faq__item {
  background: var(--sand);
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .25s var(--ease);
}
.faq__item[open] { border-color: rgba(192, 106, 42, .35); }
.faq__item > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-weight: 700;
  color: var(--brown);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -4px; }
/* A cross that becomes a minus, which reads the same in either writing direction. */
.faq__item > summary::after {
  content: "";
  flex: none; width: 13px; height: 13px;
  background:
    linear-gradient(var(--terracotta), var(--terracotta)) center / 100% 2px no-repeat,
    linear-gradient(var(--terracotta), var(--terracotta)) center / 2px 100% no-repeat;
  transition: transform .35s var(--ease), background-size .35s var(--ease);
}
.faq__item[open] > summary::after { transform: rotate(180deg); background-size: 100% 2px, 0 100%; }
.faq__item p {
  padding: 0 14px 14px;
  margin: 0;
  color: var(--brown-soft);
  font-size: .93rem;
  line-height: 1.75;
}

/* Height of a disclosure can only be animated where the browser exposes its contents as
   a box. Where it does not, the answer simply appears, which is the old behaviour. */
@supports selector(::details-content) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .38s var(--ease), content-visibility .38s var(--ease);
    transition-behavior: allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

@media (max-width: 860px) {
  /* A row of four narrow cards does not survive a phone, so they stack and read normally. */
  .faq__list { flex-direction: column; min-height: 0; gap: 10px; }
  .faq__group, .faq__group[open] { flex: none; }
  .faq__group > summary,
  .faq__group[open] > summary { flex-direction: row; justify-content: flex-start; padding: 18px 20px; gap: 12px; }
  .faq__list:has(.faq__group[open]) .faq__group:not([open]) .faq__cat {
    writing-mode: horizontal-tb; transform: none; white-space: normal;
  }
  .faq__cat, .faq__group[open] .faq__cat { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__group, .faq__group > summary, .faq__group > summary::before,
  .faq__cat, .faq__questions, .faq__item > summary::after { transition: none; }
}

/* The Saudi riyal sign, drawn rather than typed. U+20C1 was only encoded in late 2025 and
   neither of this page's fonts has it, nor do most system fonts, so a literal character
   would show as an empty box. Masked, so it takes the colour and size of the text it sits
   in exactly as a real glyph would. */
.riyal {
  display: inline-block;
  width: .78em;
  height: .84em;
  vertical-align: -.09em;
  margin-inline: .06em;
  background: currentColor;
  -webkit-mask: url("/assets/riyal.svg") center / contain no-repeat;
  mask: url("/assets/riyal.svg") center / contain no-repeat;
}