/* ==========================================================================
   Abyat Al Sharq — components.css
   Shell (header, menu sheet, footer, floating buttons) and the shared component library.
   Usage of every class: docs/frontend-notes.md § Components.
   Rule of thumb for motion: only opacity, transform, translate, scale, rotate are transitioned.
   ========================================================================== */

/* ================================================================ buttons */
.btn {
  --btn-bg: var(--navy-800); --btn-fg: var(--on-dark); --btn-border: transparent;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .3rem 1.7rem; border: 1px solid var(--btn-border); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn::before { /* sheen sweep on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .26) 50%, transparent 75%);
  translate: -120% 0; transition: translate .9s var(--ease-out);
}
@media (hover: hover) { .btn:hover::before { translate: 120% 0; } .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: scale(.98); }
.btn .icon { width: 1.25em; height: 1.25em; }
.btn--gold { --btn-bg: var(--gold-500); --btn-fg: var(--navy-950); }
.btn--navy, .btn--primary { --btn-bg: var(--navy-800); --btn-fg: var(--on-dark); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--line-strong); }
.btn--light { --btn-bg: var(--on-dark); --btn-fg: var(--navy-900); }
.btn--outline-light { --btn-bg: rgba(247, 240, 227, .04); --btn-fg: var(--on-dark); --btn-border: rgba(247, 240, 227, .5); }
.btn--ghost { --btn-bg: transparent; --btn-fg: inherit; padding-inline: .6rem; }
.btn--whatsapp { --btn-bg: var(--whatsapp); --btn-fg: #fff; }
/* the secondary WhatsApp action everywhere on light backgrounds (dark bands use .btn--outline-light) */
.btn--whatsapp-outline { --btn-bg: transparent; --btn-fg: var(--whatsapp-ink); --btn-border: rgba(21, 122, 64, .5); }
.btn--whatsapp-outline::before { background: linear-gradient(105deg, transparent 25%, rgba(21, 122, 64, .12) 50%, transparent 75%); }
.btn--outline::before, .btn--outline-light::before, .btn--ghost::before { background: linear-gradient(105deg, transparent 25%, rgba(194, 161, 95, .18) 50%, transparent 75%); }
.btn--sm { min-height: 42px; padding-inline: 1.15rem; font-size: .9375rem; }
.btn--lg { min-height: 60px; padding-inline: 2.1rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
/* a button never runs past its column: on small phones a long label wraps onto a second line inside the pill */
.btn { max-width: 100%; }
@media (max-width: 479px) { .btn:not(.btn--sm) { white-space: normal; text-align: center; } }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] > :not(.spinner) { opacity: 0; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: abyat-spin .8s linear infinite; }
.spinner { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: abyat-spin .8s linear infinite; }

/* round icon button */
.btn-icon {
  display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--btn-border, var(--line-strong)); border-radius: 50%; background: var(--btn-bg, transparent); color: inherit;
  transition: transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-icon:active { transform: scale(.94); }
.btn-icon:disabled { opacity: .35; cursor: default; }
.btn-icon .icon { width: 20px; height: 20px; }
.btn-icon--light { --btn-border: rgba(247, 240, 227, .35); color: var(--on-dark); }
.btn-icon--solid { --btn-bg: var(--navy-800); --btn-border: transparent; color: var(--on-dark); }

/* ================================================================ links */
.link { position: relative; color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .28em; }
.link:hover { text-decoration-color: currentColor; }
.link-arrow { display: inline-flex; align-items: center; gap: .55rem; padding-block: .45rem; margin-block: -.45rem; color: var(--accent-ink); font-weight: 600; text-decoration: none; } /* ≥44px tap height, same layout */
.link-arrow .icon { width: 1.15em; height: 1.15em; transition: translate .4s var(--ease-out); }
.link-arrow:hover .icon, .card--link:hover .link-arrow .icon { translate: calc(var(--dir) * 5px) 0; }
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ================================================================ eyebrow & section head */
.eyebrow { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--font-sans); font-size: .95rem; font-weight: 500; line-height: 1.5; color: var(--accent-ink); }
.eyebrow::before { content: ""; width: 2.25rem; height: 1px; flex: none; background: currentColor; opacity: .8; }
:lang(en) .eyebrow { font-size: .78rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.eyebrow--light { color: var(--gold-400); }
.eyebrow--center::after { content: ""; width: 2.25rem; height: 1px; flex: none; background: currentColor; opacity: .8; }
.eyebrow--plain::before { display: none; }

.section-head { display: grid; gap: var(--space-s); max-width: 48rem; margin-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 4rem); }
.section-head__title { font-size: var(--fs-h2); }
.section-head__sub { font-size: var(--fs-lead); color: var(--muted); line-height: 1.8; max-width: 40rem; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--center .section-head__sub { margin-inline: auto; }
.section-head--split { max-width: none; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-xl); } .section-head--split > .section-head__action { grid-row: 1 / span 3; grid-column: 2; align-self: end; } }

/* ================================================================ cards */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card__body { padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); display: grid; gap: .6rem; }
.card__title { font-size: var(--fs-h3); }
.card__text { color: var(--muted); font-size: var(--fs-small); line-height: 1.8; }
.card--plain { background: transparent; border: 0; }
.card--link { transition: transform .5s var(--ease-out); }
.card--link::before { /* hover shadow fades in (opacity only) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-2); opacity: 0; transition: opacity .5s var(--ease-out); pointer-events: none;
}
@media (hover: hover) { .card--link:hover { transform: translateY(-4px); } .card--link:hover::before { opacity: 1; } }
.card--link:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.card--link:focus-within :focus-visible { outline: none; }
.card--feature { padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); display: grid; gap: .7rem; align-content: start; }
.card--feature .card__title { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; line-height: 1.5; }

.icon-badge { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--gold-100); color: var(--gold-700); }
.icon-badge .icon { width: 25px; height: 25px; --icon-stroke: 1.45; }
.icon-badge--sm { width: 42px; height: 42px; } .icon-badge--sm .icon { width: 20px; height: 20px; }
.icon-badge--ring { background: transparent; border: 1px solid var(--gold-500); }
:is(.tone-navy, .tone-deep, .tone-walnut) .icon-badge { background: rgba(194, 161, 95, .12); color: var(--gold-400); }

/* room card — shared by the home teaser and the rooms page */
.room-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.room-card__media { border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.room-card__body { flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: 1.35rem 1.5rem 1.6rem; }
.room-card__title { font-size: var(--fs-h3); line-height: 1.35; }
.room-card__title a { color: inherit; text-decoration: none; }
.room-card__tagline { color: var(--muted); font-size: var(--fs-small); }
/* cards in a row share one height: the divider, facts and link sit on the same line in every card, however many
   lines its title takes (the facts row takes the free space above it) */
.room-card .facts { align-self: stretch; margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); }
.room-card__tagline { margin-bottom: .35rem; }
.room-card .link-arrow { margin-top: .5rem; }
.room-card__body:not(:has(> .facts)) > .link-arrow { margin-top: auto; }
@media (hover: hover) { .room-card:hover .frame img { transform: scale(1.045); } }

/* ================================================================ facts / chips / badges */
.facts { display: flex; flex-wrap: wrap; gap: .45rem 1.3rem; font-size: var(--fs-small); color: var(--ink-soft); }
.fact { display: inline-flex; align-items: center; gap: .45rem; }
.fact .icon { width: 1.15em; height: 1.15em; color: var(--gold-600); }
:is(.tone-navy, .tone-deep, .tone-walnut) .fact .icon { color: var(--gold-400); }
.facts--stacked { display: grid; gap: .9rem; }
.facts--stacked .fact { align-items: flex-start; }

.chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .3rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.3; text-decoration: none; }
.chip .icon { width: 1.1em; height: 1.1em; color: var(--gold-600); }
button.chip { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
button.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip.is-active { background: var(--navy-800); border-color: var(--navy-800); color: var(--on-dark); }
.chip[aria-pressed="true"] .icon, .chip.is-active .icon { color: var(--gold-400); }
.chip--gold { background: var(--gold-100); border-color: transparent; color: var(--gold-800); }
.chip--on-dark { background: rgba(247, 240, 227, .07); border-color: rgba(247, 240, 227, .22); color: var(--on-dark); }
.chip--on-dark .icon { color: var(--gold-400); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .7rem; border-radius: var(--r-pill); background: var(--navy-800); color: var(--on-dark); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; }
.badge--gold { background: var(--gold-500); color: var(--navy-950); }
.badge--soft { background: var(--gold-100); color: var(--gold-800); }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--outline { background: transparent; border: 1px solid currentColor; color: var(--accent-ink); }

/* ================================================================ photo frames */
.frame { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--r-md); background: var(--stone-200); }
.frame > picture, .frame > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-pos, 50% 50%); transition: transform .9s var(--ease-out); }
.frame--1x1 { --ratio: 1; } .frame--4x5 { --ratio: 4 / 5; } .frame--3x4 { --ratio: 3 / 4; } .frame--2x3 { --ratio: 2 / 3; }
.frame--3x2 { --ratio: 3 / 2; } .frame--16x9 { --ratio: 16 / 9; } .frame--21x9 { --ratio: 21 / 9; } .frame--fill { aspect-ratio: auto; height: 100%; }
.frame--arch { border-radius: var(--r-arch); }
.frame--round { border-radius: 50%; }
.frame--sharp { border-radius: 0; }
.frame--lg { border-radius: var(--r-lg); }
.frame__caption { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; padding: 2.5rem 1.1rem .9rem; color: #fff; font-size: var(--fs-small); line-height: 1.6; background: linear-gradient(to top, rgba(7, 21, 46, .78), transparent); }
/* gold hairline offset behind a frame: wrap the frame in .frame-outline */
.frame-outline { position: relative; isolation: isolate; }
.frame-outline::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--gold-500); border-radius: var(--outline-radius, var(--r-md)); translate: calc(var(--dir) * 14px) 14px; opacity: .8; }
.frame-outline--arch { --outline-radius: var(--r-arch); }
figure.figure { display: grid; gap: .7rem; }
figure.figure > figcaption { font-size: var(--fs-small); color: var(--muted); }

/* ================================================================ carousel (scroll-snap + buttons) */
/* Whole slides only — never a half card peeking at an edge:
   1 per view on phones, 2 from 700px, 3 from 1100px; the wide variant shows one full slide. */
.carousel { --slide: 100%; --gap: clamp(.9rem, .6rem + 1vw, 1.5rem); position: relative; }
@media (min-width: 700px) { .carousel { --slide: calc((100% - var(--gap)) / 2); } }
@media (min-width: 1100px) { .carousel { --slide: calc((100% - 2 * var(--gap)) / 3); } }
/* photo galleries: one whole photo per view on phones/tablets, two whole photos side by side from 900px, so a 3:2
   photo is never taller than the screen (a 1536×730 laptop shows a slide + its arrows below the header) */
.carousel--wide { --slide: 100%; }
@media (min-width: 900px) { .carousel--wide { --slide: calc((100% - var(--gap)) / 2); } }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--slide); gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-block: 4px 8px; margin-block: -4px -8px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -2px; }
.carousel__slide { min-width: 0; scroll-snap-align: start; }
/* (bleed used to run the track to the screen edge, which showed cut-off cards; it now stays inside the container) */
.carousel--bleed .carousel__track { scroll-padding-inline: 0; }
.carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: var(--space-m); }
.carousel__nav { display: flex; gap: .6rem; }
/* phones: the floating WhatsApp / motion buttons sit in the end-side column of the screen — the arrows stay clear of it */
@media (max-width: 699px) { .carousel__controls { padding-inline-end: 62px; } }
.carousel__status { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.carousel__progress { flex: 1; max-width: 220px; height: 2px; background: var(--line); position: relative; overflow: hidden; border-radius: 2px; }
.carousel__progress > i { position: absolute; inset: 0; background: var(--gold-500); transform-origin: var(--origin-start); scale: var(--p, 0) 1; transition: scale .5s var(--ease-out); }
html.no-js .carousel__controls { display: none; }

/* ================================================================ lightbox (built by site.js) */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--on-dark); overflow: hidden; }
.lightbox::backdrop { background: transparent; }
.lightbox__bg { position: absolute; inset: 0; background: rgba(4, 10, 22, .95); opacity: 0; transition: opacity .4s var(--ease-out); }
.lightbox.is-open .lightbox__bg { opacity: 1; }
.lightbox__stage { position: absolute; inset: 70px 0 110px; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; touch-action: pan-y pinch-zoom; }
.lightbox__img { grid-area: 1 / 1; max-width: min(94vw, 1700px); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); opacity: 0; scale: .97; translate: var(--lb-x, 0px) 0; transition: opacity .45s var(--ease-out), scale .6s var(--ease-expo), translate .6s var(--ease-expo); user-select: none; -webkit-user-drag: none; touch-action: pan-y pinch-zoom; }
html[data-motion="calm"] .lightbox__img { scale: 1; translate: none; transition: opacity .3s var(--ease-out); }
.lightbox.is-single :is(.lightbox__prev, .lightbox__next, .lightbox__count) { display: none; }
.lightbox__img.is-current { opacity: 1; scale: 1; }
.lightbox__img.is-dragging { transition: none; }
.lightbox__close { position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline-end: 14px; z-index: 2; }
/* physical sides: the element is direction:ltr (so "2 / 9" never flips), and logical insets would follow that */
.lightbox__count { position: absolute; top: max(24px, calc(env(safe-area-inset-top) + 10px)); left: 22px; font-size: var(--fs-small); color: var(--on-dark-soft); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .lightbox__count { left: auto; right: 22px; }
.lightbox__prev, .lightbox__next { position: absolute; top: 50%; z-index: 2; margin-top: -23px; }
.lightbox__prev { inset-inline-start: 14px; }
.lightbox__next { inset-inline-end: 14px; }
.lightbox__caption { position: absolute; inset-inline: 0; bottom: max(26px, env(safe-area-inset-bottom)); padding-inline: 24px; text-align: center; font-size: var(--fs-small); color: var(--on-dark-soft); }
.lightbox .btn-icon { --btn-border: rgba(247, 240, 227, .3); --btn-bg: rgba(7, 21, 46, .55); color: var(--on-dark); }
.lightbox__ui { opacity: 0; transition: opacity .4s var(--ease-out) .1s; }
.lightbox.is-open .lightbox__ui { opacity: 1; }
@media (max-width: 640px) { .lightbox__prev, .lightbox__next { top: auto; bottom: max(64px, calc(env(safe-area-inset-bottom) + 50px)); margin: 0; } .lightbox__stage { inset: 64px 0 130px; } }
[data-lightbox] { cursor: zoom-in; }

/* ================================================================ forms */
.form-grid { display: grid; gap: var(--space-m); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: .45rem; min-width: 0; align-content: start; }
.field__label { font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.5; }
.field__label .req { color: var(--danger); margin-inline-start: .2em; }
.field__label .opt { color: var(--muted); font-weight: 400; font-size: .85em; margin-inline-start: .3em; }
.field__hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.field__error { display: flex; align-items: flex-start; gap: .4rem; font-size: var(--fs-small); color: var(--danger); line-height: 1.6; }
.field__error:empty { display: none; }
.field__error .icon { width: 1.1em; height: 1.1em; margin-top: .25em; }
.input, .select, .textarea {
  width: 100%; min-height: 54px; padding: .8rem 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font-size: 1rem; line-height: 1.5; appearance: none; -webkit-appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #8a92a3; opacity: 1; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(194, 161, 95, .3); }
/* keyboard focus is always drawn on light fields: a 2px dark-gold ring (≥3:1) */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--gold-700); box-shadow: 0 0 0 2px var(--gold-700); }
.textarea { min-height: 136px; resize: vertical; }
.select { padding-inline-end: 2.8rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237f5f22' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 20px; background-position: right 1rem center; }
[dir="rtl"] .select { background-position: left 1rem center; }
.input[type="date"] { min-height: 54px; }
.input[type="date"]::-webkit-calendar-picker-indicator { opacity: .65; cursor: pointer; }
.input[type="tel"], .input[type="email"], .input--ltr { direction: ltr; }
[dir="rtl"] :is(.input[type="tel"], .input[type="email"], .input--ltr) { text-align: right; }
[dir="rtl"] :is(.input[type="tel"], .input[type="email"], .input--ltr)::placeholder { text-align: right; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"], .stepper[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(163, 57, 43, .12); }
:is(.tone-navy, .tone-deep) :is(.input, .select, .textarea) { background: rgba(247, 240, 227, .06); color: var(--on-dark); }
.check { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--fs-small); line-height: 1.7; color: var(--ink-soft); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: .2em 0 0; accent-color: var(--navy-800); }
.form-alert { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--danger-bg); color: var(--danger); font-size: var(--fs-small); line-height: 1.7; }
.form-alert .icon { margin-top: .2em; }
.form-alert--info { background: var(--stone-100); color: var(--ink-soft); }
.form-alert--success { background: var(--success-bg); color: var(--success); }
.form-alert[hidden] { display: none; }
.form-alert.is-shown { animation: abyat-fade-up .45s var(--ease-out); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); }
.honeypot { position: absolute !important; inset-inline-start: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* number stepper: [data-stepper] > button[data-step="-1"] + input[type=number] + button[data-step="1"] */
.stepper { display: grid; grid-template-columns: 50px minmax(3rem, 1fr) 50px; align-items: stretch; min-height: 54px; width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.stepper:focus-within { border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(194, 161, 95, .3); }
.stepper button { display: grid; place-items: center; border: 0; background: transparent; color: var(--navy-800); -webkit-tap-highlight-color: transparent; }
.stepper button .icon { width: 20px; height: 20px; transition: transform var(--dur-fast) var(--ease-out); }
.stepper button:active .icon { transform: scale(.82); }
.stepper button:disabled { color: var(--stone-300); cursor: default; }
.stepper input { width: 100%; min-width: 0; border: 0; background: transparent; text-align: center; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input:focus { outline: none; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper.is-bumped input { animation: abyat-bump .3s var(--ease-out); }
@keyframes abyat-bump { 40% { scale: 1.12; } }

/* file picker: label.file-field[data-file-field] > input[type=file] + .file-field__text */
.file-field { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; }
.file-field input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-field:focus-within { border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(194, 161, 95, .3); }
.file-field__text { display: grid; gap: .1rem; min-width: 0; }
.file-field__name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.file-field__meta { font-size: var(--fs-xs); color: var(--muted); }
.file-field.has-file { border-style: solid; border-color: var(--gold-500); background: color-mix(in srgb, var(--gold-100) 60%, var(--surface)); }
.file-field[aria-invalid="true"] { border-color: var(--danger); }

/* success panel + reference code */
.success-panel { display: grid; justify-items: center; gap: var(--space-s); padding: clamp(2rem, 1.4rem + 3vw, 3.5rem); text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.success-panel__mark { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--gold-100); color: var(--gold-700); }
.success-panel__mark .icon { width: 38px; height: 38px; --icon-stroke: 1.8; }
.success-panel.is-shown { animation: abyat-fade-up .6s var(--ease-out); }
.success-panel.is-shown .success-panel__mark { animation: abyat-pop .7s var(--ease-spring) .15s both; }
.success-panel__title { font-size: var(--fs-h3); }
.success-panel__text { color: var(--muted); max-width: 34rem; }
.ref-code { display: inline-flex; align-items: center; gap: .8rem; padding: .45rem .45rem .45rem 1.2rem; border-radius: var(--r-pill); background: var(--navy-900); color: var(--on-dark); direction: ltr; unicode-bidi: isolate; }
.ref-code__value { font-size: 1.35rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.ref-code .btn-icon { width: 40px; height: 40px; --btn-border: rgba(247, 240, 227, .3); color: var(--gold-400); }

/* ================================================================ tabs / disclosure / steps / quote / notice / table */
.tabs__list { position: relative; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { flex: none; padding: .95rem 1.25rem; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 1rem; white-space: nowrap; }
.tabs__tab[aria-selected="true"] { color: var(--ink); }
.tabs__indicator { position: absolute; bottom: -1px; left: 0; width: 100px; height: 2px; background: var(--gold-500); transform-origin: 0 0; transition: transform .5s var(--ease-expo); pointer-events: none; }
.tabs__panel { padding-top: var(--space-l); }
.tabs__panel:focus-visible { outline-offset: 6px; }
.tabs__panel.is-shown { animation: abyat-fade-up .5s var(--ease-out); }

.disclosure { border-bottom: 1px solid var(--line); }
.disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .icon { color: var(--gold-600); transition: transform .4s var(--ease-out); }
.disclosure[open] > summary .icon { transform: rotate(45deg); }
.disclosure__body { padding-bottom: 1.3rem; color: var(--ink-soft); }
.disclosure[open] .disclosure__body { animation: abyat-fade-up .45s var(--ease-out); }

.steps { display: grid; gap: var(--space-l); counter-reset: step; }
@media (min-width: 800px) { .steps--row { grid-template-columns: repeat(var(--steps, 3), 1fr); } }
.step { position: relative; display: grid; gap: .5rem; align-content: start; padding-top: 4.1rem; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 1px solid var(--gold-500); color: var(--accent-ink); font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; line-height: 1; }
.step__title { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.5; }
.step__text { color: var(--muted); font-size: var(--fs-small); }

.quote { position: relative; display: grid; gap: var(--space-m); }
.quote::before { content: ""; width: 46px; height: 46px; background: var(--gold-500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6.5c-3.6 1.1-6 4.2-6 8.3V19h6v-6H7.1c.3-2.3 1.6-3.9 3.6-4.7Zm10 0c-3.6 1.1-6 4.2-6 8.3V19h6v-6h-2.9c.3-2.3 1.6-3.9 3.6-4.7Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6.5c-3.6 1.1-6 4.2-6 8.3V19h6v-6H7.1c.3-2.3 1.6-3.9 3.6-4.7Zm10 0c-3.6 1.1-6 4.2-6 8.3V19h6v-6h-2.9c.3-2.3 1.6-3.9 3.6-4.7Z'/%3E%3C/svg%3E") center / contain no-repeat; }
[dir="ltr"] .quote::before { transform: scaleX(-1); }
.quote__text { font-family: var(--font-display); font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.2rem); line-height: 1.6; font-weight: 400; }
:lang(en) .quote__text { line-height: 1.35; font-style: italic; }
.quote__by { display: grid; gap: .1rem; font-size: var(--fs-small); color: var(--muted); }
.quote__by strong { color: var(--ink); font-size: 1rem; }
:is(.tone-navy, .tone-deep, .tone-walnut) .quote__by strong { color: var(--on-dark); }

.notice { display: flex; align-items: flex-start; gap: .85rem; padding: 1.1rem 1.25rem; border-radius: var(--r-md); background: var(--stone-100); color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.75; }
.notice .icon { color: var(--gold-600); margin-top: .2em; }
.notice--gold { background: var(--gold-100); }
:is(.tone-navy, .tone-deep) .notice { background: rgba(247, 240, 227, .06); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table th, .table td { padding: .9rem 1.1rem; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
.table thead th { background: var(--stone-50); font-weight: 600; color: var(--ink); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table caption { caption-side: top; text-align: start; padding: 0 0 .75rem; color: var(--muted); }

/* ================================================================ stat */
.stat { display: grid; gap: .25rem; }
.stat__value { font-family: var(--font-display); font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); line-height: 1.1; color: var(--accent-ink); font-weight: 600; font-variant-numeric: lining-nums; }
.stat__label { font-size: var(--fs-small); color: var(--muted); }

/* ================================================================ breadcrumbs */
.breadcrumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1px solid currentColor; border-inline-end: 1px solid currentColor; transform: rotate(calc(var(--dir) * 45deg)); opacity: .6; margin-inline-end: .3rem; }
/* 44px tap height without moving anything (padding taken back by the negative margin) */
.breadcrumbs a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-ink); }
.breadcrumbs [aria-current] { color: var(--ink); }
.page-hero .breadcrumbs ol { color: var(--on-dark-soft); }
.page-hero .breadcrumbs [aria-current] { color: var(--on-dark); }
.page-hero .breadcrumbs a:hover { color: var(--gold-400); }

/* ================================================================ page hero (partials/page-hero.html) */
/* scrim: dark where the text sits (bottom, reading-start side) so gold labels, breadcrumbs and the white title keep
   AA contrast over bright parts of any photo; the far side stays clear */
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to var(--end-side), rgba(7, 21, 46, .84) 0%, rgba(7, 21, 46, .62) 34%, rgba(7, 21, 46, .2) 64%, rgba(7, 21, 46, 0) 82%), linear-gradient(to top, rgba(7, 21, 46, .94) 0%, rgba(7, 21, 46, .66) 40%, rgba(7, 21, 46, .26) 70%, rgba(7, 21, 46, .5) 100%); }
.page-hero--center::after { background: linear-gradient(to top, rgba(7, 21, 46, .94) 0%, rgba(7, 21, 46, .7) 42%, rgba(7, 21, 46, .42) 72%, rgba(7, 21, 46, .55) 100%); }
.page-hero:not(.page-hero--plain) :is(.page-hero__title, .page-hero__sub, .page-hero__latin, .eyebrow, .breadcrumbs) { text-shadow: 0 1px 14px rgba(7, 21, 46, .55), 0 0 2px rgba(7, 21, 46, .35); }
.page-hero:not(.page-hero--plain) .eyebrow { color: var(--gold-300); }
.page-hero:not(.page-hero--plain) .breadcrumbs ol { color: #dfe4ec; }
.page-hero--plain { background: var(--navy-900); }
.page-hero--plain::after { background: radial-gradient(120% 90% at 50% 0%, rgba(194, 161, 95, .1), transparent 60%); }
.page-hero__latin { margin-top: -.35rem; font-family: var(--font-latin); font-size: clamp(.95rem, .85rem + .4vw, 1.2rem); font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-300); }
.page-hero--plain .page-hero__inner { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.page-hero--plain .page-hero__title { max-width: 10.3em; }
.page-hero__sub { max-width: 40rem; color: var(--on-dark-soft); font-size: var(--fs-lead); line-height: 1.8; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-s); }
.page-hero .eyebrow { color: var(--gold-400); }
.page-hero--center .page-hero__inner { justify-items: center; text-align: center; }
.page-hero--center .page-hero__title { margin-inline: auto; }
.scroll-hint { position: absolute; z-index: 1; bottom: clamp(1rem, 3vh, 2rem); inset-inline-start: 50%; translate: calc(var(--dir) * -50%) 0; display: grid; justify-items: center; gap: .5rem; color: var(--on-dark-soft); font-size: var(--fs-xs); text-decoration: none; }
.scroll-hint__line { position: relative; width: 1px; height: 46px; background: rgba(247, 240, 227, .25); overflow: hidden; }
.scroll-hint__line::after { content: ""; position: absolute; inset: 0; background: var(--gold-400); translate: 0 -100%; }
html[data-motion="full"] .scroll-hint__line::after { animation: abyat-scroll-hint 2.4s var(--ease-in-out) 1.2s infinite; }
@keyframes abyat-scroll-hint { 0% { translate: 0 -100%; } 55% { translate: 0 0; } 100% { translate: 0 100%; } }
@media (max-height: 640px) { .scroll-hint { display: none; } }

/* ---- framed variant (partials/page-hero.html framed=true): text on a navy lattice band, the photo in an arch beside
   it at no more than ~640px, so modest-resolution photos stay sharp; a blurred copy of the photo tints the band ---- */
.page-hero--framed { align-items: center; background: var(--navy-950); --pattern-opacity: .06; --pattern-size: 64px; }
.page-hero--framed::after { background: radial-gradient(70% 90% at 50% 40%, rgba(7, 21, 46, .35), rgba(7, 21, 46, .9)); }
.page-hero__backdrop { position: absolute; inset: -8%; z-index: -2; overflow: hidden; opacity: .5; pointer-events: none; }
.page-hero__backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(34px) saturate(1.15); transform: scale(1.08); }
.page-hero--framed.page-hero--lg { min-height: clamp(560px, 90svh, 880px); }
.page-hero--framed.page-hero--md { min-height: clamp(500px, 76svh, 760px); }
.page-hero--framed.page-hero--sm { min-height: clamp(460px, 62svh, 640px); }
.page-hero__inner--framed { align-items: center; }
.page-hero__copy { display: grid; gap: var(--space-s); justify-items: start; min-width: 0; }
.page-hero__copy .page-hero__title, .page-hero--framed.page-hero--lg .page-hero__title { font-size: var(--fs-h1); max-width: 7.5em; }
:lang(ar) .page-hero__copy .page-hero__title { line-height: 1.42; padding-bottom: .06em; }
.page-hero__copy .page-hero__latin { margin-top: .1rem; }
/* the arch never runs past the first screen: its width follows the space under the header */
.page-hero__figure { position: relative; isolation: isolate; width: min(100%, calc((100svh - var(--header-h) - 7rem) * 1.087)); max-width: 640px; justify-self: end; }
.page-hero__frame {
  --arch: 50% 50% var(--r-md) var(--r-md) / 24% 24% var(--r-md) var(--r-md);
  position: relative; overflow: hidden; overflow: clip; aspect-ratio: 5 / 4.6; border-radius: var(--arch);
  background: var(--navy-800); box-shadow: 0 40px 80px -42px rgba(0, 0, 0, .8);
}
.page-hero__frame > picture { position: absolute; inset: 0; }
.page-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-pos, 50% 50%); }
.page-hero__figure-outline { position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(194, 161, 95, .55); border-radius: 50% 50% var(--r-md) var(--r-md) / 24% 24% var(--r-md) var(--r-md); translate: calc(var(--dir) * -16px) 16px; pointer-events: none; }
html.js[data-motion="full"] .page-hero__figure-outline { transition: translate 1.4s var(--ease-expo) .5s, opacity .9s var(--ease-out) .5s; }
html.js[data-motion="full"] .page-hero__figure:not(.is-in) .page-hero__figure-outline { translate: 0 0; opacity: 0; }
/* the framed photo is painted at once (it is the page's largest image); only its scale settles */
html.js .page-hero__figure[data-reveal]:not(.is-in) { opacity: 1; }
html.js[data-motion="full"] .page-hero__figure[data-reveal="scale"]:not(.is-in) { scale: .965; }
@media (min-width: 960px) {
  .page-hero__inner--framed { grid-template-columns: minmax(0, 1fr) minmax(0, min(46vw, 640px)); column-gap: clamp(2.5rem, 1rem + 4vw, 5.5rem); padding-bottom: clamp(4rem, 2.5rem + 4vw, 7rem); }
  /* text and arch hang from the top of the row (not centred on each other): when the web fonts swap in on a first
     visit and the text block changes height, the breadcrumb and the photo stay exactly where they are */
  .page-hero__inner--framed { align-items: start; }
  .page-hero__inner--framed > .page-hero__copy { padding-top: clamp(1rem, 7svh, 4.25rem); }
}
@media (max-width: 959px) {
  .page-hero--framed { display: block; min-height: 0 !important; }
  .page-hero--framed .page-hero__inner--framed { padding-top: calc(var(--header-h) + 1rem); padding-bottom: clamp(2.5rem, 2rem + 3vw, 3.5rem); gap: var(--space-m); }
  .page-hero--framed .page-hero__figure { order: -1; justify-self: stretch; max-width: none; }
  .page-hero--framed .page-hero__frame { aspect-ratio: 4 / 3; --arch: 46% 46% var(--r-md) var(--r-md) / 16% 16% var(--r-md) var(--r-md); }
  .page-hero--framed .page-hero__figure-outline { display: none; }
}
@media (max-width: 699px) {
  .page-hero--framed .page-hero__inner--framed { padding-inline: 0; padding-top: 0; }
  .page-hero--framed .page-hero__figure { margin-inline: 0; }
  .page-hero--framed .page-hero__frame { border-radius: 0; aspect-ratio: 10 / 9; }
  .page-hero--framed .page-hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 12, 26, .82) 0%, rgba(5, 12, 26, .5) 18%, rgba(5, 12, 26, 0) 40%, rgba(7, 21, 46, 0) 62%, var(--navy-950) 100%); }
  .page-hero--framed .page-hero__copy { margin-top: -3.25rem; position: relative; padding-inline: var(--gutter); }
}

/* ---- phones: every photo hero stacks — photo on top (a landscape crop, never a tall portrait crop of a landscape
   photo, so it stays sharp), the text on navy below; the overlay header sits on the photo's darkened top ---- */
@media (max-width: 699px) {
  .page-hero--photo { display: block; min-height: 0; background: var(--navy-950); }
  .page-hero--photo::after { display: none; }
  .page-hero--photo .page-hero__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 10 / 9; }
  /* the top of the photo carries the transparent header (gold brand line, menu button): a navy scrim strong enough for
     them on the brightest ceilings (/welcome/, /gallery/, /careers/), fading out by mid-photo */
  .page-hero--photo .page-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 12, 26, .84) 0%, rgba(5, 12, 26, .55) 16%, rgba(5, 12, 26, 0) 40%, rgba(7, 21, 46, 0) 58%, var(--navy-950) 100%); }
  .page-hero--photo .page-hero__inner { margin-top: -3.25rem; padding-top: 0; padding-bottom: clamp(2.5rem, 2rem + 3vw, 3.5rem); }
}

/* ================================================================ CTA band (partials/cta-band.html) */
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: var(--space-2xs); }
.cta-band { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-block: clamp(5rem, 3.4rem + 6.5vw, 9.5rem); background: var(--navy-900); color: var(--on-dark); text-align: center; }
.cta-band__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* the band's photo is a backdrop under a dark veil: a soft focus reads as depth, and modest source sizes never look soft */
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px); transform: scale(1.04); }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(7, 21, 46, .74), rgba(7, 21, 46, .86)); }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-m); max-width: 46rem; margin-inline: auto; }
.cta-band__title { font-size: var(--fs-h2); color: #fff; }
.cta-band__text { font-size: var(--fs-lead); color: var(--on-dark-soft); line-height: 1.8; }
.cta-band .ornament { color: var(--gold-500); }

/* ================================================================ header (layout in critical.css) */
.site-header { transition: translate .55s var(--ease-expo); }
.site-header__bg, .site-header__scrim { transition: opacity .45s var(--ease-out); }
.site-header.is-hidden { translate: 0 -100%; }
html[data-motion="calm"] .site-header.is-hidden { translate: none; } /* calm mode: the header simply stays */
.site-header__progress { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--gold-gradient); transform-origin: var(--origin-start); transform: scaleX(0); opacity: .9; pointer-events: none; transition: opacity .45s var(--ease-out); }
.has-scroll-timeline .site-header__progress { animation: abyat-progress linear both; animation-timeline: scroll(root block); }
@keyframes abyat-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-header="overlay"] .site-header:not(.is-solid) .site-header__progress { opacity: 0; }
.brand__mark { transition: scale .5s var(--ease-out); transform-origin: center; }
@media (hover: hover) { .brand:hover .brand__mark { scale: 1.06; } }
.site-nav { margin-inline: auto; display: none; }
@media (min-width: 1280px) { .site-nav { display: block; } }
.site-nav__list { display: flex; align-items: center; gap: clamp(1rem, .2rem + 1.4vw, 2rem); }
.site-nav__link { position: relative; display: inline-block; padding-block: .6rem; color: var(--on-dark); font-size: .975rem; font-weight: 500; text-decoration: none; white-space: nowrap; opacity: .9; }
.site-nav__link::after { content: ""; position: absolute; inset-inline: 0; bottom: .2rem; height: 1px; background: var(--gold-400); transform-origin: var(--origin-start); scale: 0 1; transition: scale .45s var(--ease-out); }
.site-nav__link:hover { opacity: 1; }
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { scale: 1 1; }
.site-nav__link[aria-current="page"] { opacity: 1; color: var(--gold-300); }
.site-header__actions { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
@media (min-width: 1280px) { .site-header__actions { margin-inline-start: 0; } }
.lang-switch { display: none; align-items: center; gap: .4rem; min-height: 42px; padding-inline: .8rem; border-radius: var(--r-pill); color: var(--on-dark); text-decoration: none; font-size: .95rem; font-weight: 500; }
.lang-switch .icon { width: 18px; height: 18px; color: var(--gold-400); }
.lang-switch:hover { color: var(--gold-300); }
@media (min-width: 640px) { .site-header .lang-switch { display: inline-flex; } }
.site-header__book { display: inline-flex; }
@media (max-width: 479px) { .site-header__book { min-height: 40px; padding-inline: .95rem; font-size: .9rem; } }
/* narrow phones (English brand is the longest): tighter gaps, a smaller button; the brand name gives way last */
@media (max-width: 400px) {
  .site-header__bar { gap: .6rem; }
  .site-header__actions { gap: .4rem; }
  .brand { gap: .5rem; }
  .brand__mark { height: 34px; }
  .brand__name, :lang(en) .brand__name { font-size: 1.14rem; }
  .site-header__book { padding-inline: .8rem; font-size: .875rem; }
  .menu-toggle { width: 44px; height: 44px; }
}
/* desktop utility link: careers next to the language switch */
.site-header__careers { display: none; align-items: center; gap: .4rem; min-height: 42px; padding-inline: .6rem; color: var(--on-dark-soft); font-size: .9rem; text-decoration: none; white-space: nowrap; }
.site-header__careers:hover, .site-header__careers[aria-current="page"] { color: var(--gold-300); }
.site-header__careers .icon { width: 17px; height: 17px; color: var(--gold-400); }
@media (min-width: 1400px) { .site-header__careers { display: inline-flex; } }
.menu-toggle { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(247, 240, 227, .3); border-radius: 50%; background: transparent; color: var(--on-dark); transition: transform var(--dur-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.menu-toggle:active { transform: scale(.94); }
.menu-toggle__lines { display: grid; gap: 5px; width: 20px; }
.menu-toggle__lines i { display: block; height: 1.5px; border-radius: 2px; background: currentColor; transform-origin: var(--origin-start); transition: scale .45s var(--ease-out); }
.menu-toggle__lines i:nth-child(1) { scale: .62 1; background: var(--gold-400); }
.menu-toggle__lines i:nth-child(3) { scale: .82 1; }
@media (hover: hover) { .menu-toggle:hover .menu-toggle__lines i { scale: 1 1; } }
@media (max-width: 380px) { .brand__latin { display: none; } }
/* phones: «ABYAT AL SHARQ HOTELS» (Turki, 11 Oct) is longer than the Arabic name above it — tighter caps so it keeps clear of «احجز الآن» */
@media (max-width: 520px) { .brand__latin { font-size: .62rem; letter-spacing: .1em; } }
@media (max-width: 359px) { .site-header__book { display: none; } }

/* ================================================================ menu sheet (dialog#site-menu) */
.menu-sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--on-dark); overflow: hidden; }
.menu-sheet::backdrop { background: transparent; }.menu-sheet__scrim { position: absolute; inset: 0; background: rgba(4, 10, 22, .6); opacity: 0; transition: opacity .5s var(--ease-out); }
.menu-sheet__panel {
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(480px, 100%);
  display: flex; flex-direction: column; gap: var(--space-l);
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) max(24px, env(safe-area-inset-bottom));
  background: var(--navy-950); overflow-y: auto; overscroll-behavior: contain;
  translate: calc(var(--dir) * 100%) 0; transition: translate .65s var(--ease-expo);
  box-shadow: var(--shadow-3);
}
.menu-sheet.is-open .menu-sheet__scrim { opacity: 1; }
.menu-sheet.is-open .menu-sheet__panel { translate: 0 0; }
html[data-motion="calm"] .menu-sheet__panel { translate: 0 0; opacity: 0; transition: opacity .25s var(--ease-out); }
html[data-motion="calm"] .menu-sheet.is-open .menu-sheet__panel { opacity: 1; }
.menu-sheet__panel { --pattern-opacity: .05; --pattern-size: 64px; isolation: isolate; }
.menu-sheet__panel::after { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline-start: 0; width: 1px; background: linear-gradient(to bottom, transparent, rgba(194, 161, 95, .55), transparent); pointer-events: none; }
.menu-sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--header-h) - 14px); }
.menu-sheet__close .icon { transition: rotate .5s var(--ease-out); }
@media (hover: hover) { .menu-sheet__close:hover .icon { rotate: 90deg; } }
.menu-sheet__list { display: grid; gap: 0; }
.menu-sheet__list li, .menu-sheet__cta, .menu-sheet__contact, .menu-sheet__foot { opacity: 0; translate: calc(var(--dir) * 28px) 0; transition: opacity .5s var(--ease-out), translate .75s var(--ease-expo); transition-delay: calc(120ms + var(--i, 0) * 40ms); }
.menu-sheet__foot { --i: 12; }
.menu-sheet.is-open :is(.menu-sheet__list li, .menu-sheet__cta, .menu-sheet__contact, .menu-sheet__foot) { opacity: 1; translate: 0 0; }
html[data-motion="calm"] :is(.menu-sheet__list li, .menu-sheet__cta, .menu-sheet__contact, .menu-sheet__foot) { translate: 0 0; transition: opacity .3s var(--ease-out); transition-delay: 0ms; }
.menu-sheet__link { position: relative; display: flex; align-items: baseline; gap: 1rem; padding-block: .5rem; color: var(--on-dark); text-decoration: none; font-family: var(--font-display); font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.05rem); line-height: 1.35; font-weight: 700; }
:lang(en) .menu-sheet__link { font-weight: 600; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.2; }
.menu-sheet__label { position: relative; }
.menu-sheet__label::after { content: ""; position: absolute; inset-inline: 0; bottom: -.05em; height: 1px; background: var(--gold-400); transform-origin: var(--origin-start); scale: 0 1; transition: scale .5s var(--ease-out); }
.menu-sheet__link:hover .menu-sheet__label::after, .menu-sheet__link[aria-current="page"] .menu-sheet__label::after { scale: 1 1; }
.menu-sheet__num { font-family: var(--font-sans); font-size: .78rem; font-weight: 500; color: var(--gold-500); min-width: 1.6rem; direction: ltr; unicode-bidi: isolate; }
.menu-sheet__link:hover, .menu-sheet__link[aria-current="page"] { color: var(--gold-300); }
.menu-sheet__cta { padding-top: var(--space-2xs); }
.menu-sheet__contact { display: grid; gap: .7rem; padding-top: var(--space-m); border-top: 1px solid var(--line-on-dark); font-size: var(--fs-small); }
.menu-sheet__contact a { display: inline-flex; align-items: center; gap: .7rem; color: var(--on-dark-soft); text-decoration: none; }
.menu-sheet__contact a:hover { color: var(--on-dark); }
.menu-sheet__contact .icon { color: var(--gold-400); }
.menu-sheet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
.menu-sheet__foot .lang-switch { display: inline-flex; border: 1px solid var(--line-on-dark); }
html.menu-open { overflow: hidden; }

/* ================================================================ motion switch («تشغيل الحركة») */
.motion-switch { display: inline-flex; align-items: center; gap: .7rem; min-height: 42px; padding: .35rem 1rem .35rem .5rem; border: 1px solid var(--line-on-dark); border-radius: var(--r-pill); background: transparent; color: inherit; font-size: var(--fs-small); font-weight: 500; line-height: 1.3; -webkit-tap-highlight-color: transparent; }
[dir="rtl"] .motion-switch { padding: .35rem .5rem .35rem 1rem; }
.motion-switch__track { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: rgba(154, 165, 184, .38); }
.motion-switch__track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gold-500); opacity: 0; transition: opacity .3s var(--ease-out); }
.motion-switch__knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: translate .35s var(--ease-spring); }
.motion-switch[aria-checked="true"] .motion-switch__track::before { opacity: 1; }
.motion-switch[aria-checked="true"] .motion-switch__knob { translate: calc(var(--dir) * 16px) 0; }
.motion-switch__text { display: grid; text-align: start; line-height: 1.3; }
.motion-switch__label { font-weight: 500; }
.motion-switch__state { font-size: var(--fs-xs); color: var(--on-dark-muted); font-weight: 400; }
.motion-switch:focus-visible { outline-offset: 2px; }
/* on light sections */
:is(.tone-ivory, .tone-sand, .tone-stone, .tone-surface) .motion-switch:not(.motion-switch--float) { border-color: var(--line-strong); }
:is(.tone-ivory, .tone-sand, .tone-stone, .tone-surface) .motion-switch:not(.motion-switch--float) .motion-switch__state { color: var(--muted); }
/* floating variant (reduced-motion devices only): a small round button beside the WhatsApp button on the same edge
   (the text-end side), so it never sits over the start of a line or a call to action. Gold = motion on. The label
   shows as a bubble on hover/focus and, once per visit, for a few seconds after the page opens (motion.js
   html.motion-hint); the bubble only fades/slides (opacity/transform). */
.motion-switch--float {
  position: fixed; z-index: var(--z-float); bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)); right: max(22px, calc(env(safe-area-inset-right) + 6px));
  display: none; place-items: center; width: 46px; height: 46px; min-height: 0; padding: 0; gap: 0; border-radius: 50%;
  background: rgba(7, 21, 46, .94); color: var(--gold-400); border: 1px solid rgba(194, 161, 95, .55); box-shadow: var(--shadow-2);
}
[dir="rtl"] .motion-switch--float { right: auto; left: max(22px, calc(env(safe-area-inset-left) + 6px)); padding: 0; }
/* beside the WhatsApp button (same bottom band, so the first screen's reserve for the floating buttons still holds) */
.wa-float ~ .motion-switch--float { right: calc(max(16px, env(safe-area-inset-right)) + 70px); }
[dir="rtl"] .wa-float ~ .motion-switch--float { right: auto; left: calc(max(16px, env(safe-area-inset-left)) + 70px); }
/* phones: stacked above the WhatsApp button instead (a narrow screen has no spare bottom band) */
@media (max-width: 699px) {
  .wa-float ~ .motion-switch--float { right: max(22px, calc(env(safe-area-inset-right) + 6px)); bottom: max(88px, calc(env(safe-area-inset-bottom) + 80px)); }
  [dir="rtl"] .wa-float ~ .motion-switch--float { right: auto; left: max(22px, calc(env(safe-area-inset-left) + 6px)); }
}
html.os-reduced .motion-switch--float { display: grid; animation: abyat-fade-in .6s var(--ease-out) .8s both; }
.motion-switch--float .motion-switch__track { display: none; }
.motion-switch--float .motion-switch__icon { display: block; width: 20px; height: 20px; }
.motion-switch--float::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold-500); opacity: 0; transition: opacity .3s var(--ease-out); }
.motion-switch--float[aria-checked="true"]::before { opacity: 1; }
.motion-switch--float[aria-checked="true"] { color: var(--navy-950); }
.motion-switch--float .motion-switch__icon { position: relative; }
.motion-switch--float .motion-switch__text {
  position: absolute; top: 50%; right: calc(100% + 10px); display: grid; width: max-content; max-width: min(15rem, 62vw);
  padding: .45rem .85rem; border-radius: var(--r-md); background: var(--navy-950); color: var(--on-dark); box-shadow: var(--shadow-2);
  text-align: start; white-space: normal; pointer-events: none;
  opacity: 0; transform: translate3d(8px, -50%, 0); transition: opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
[dir="rtl"] .motion-switch--float .motion-switch__text { right: auto; left: calc(100% + 10px); transform: translate3d(-8px, -50%, 0); }
.motion-switch--float:is(:hover, :focus-visible) .motion-switch__text,
html.motion-hint .motion-switch--float .motion-switch__text { opacity: 1; transform: translate3d(0, -50%, 0); }
html.menu-open .motion-switch--float { opacity: 0; pointer-events: none; }
html.motion-float-hidden .motion-switch--float { display: none; }
/* phones: the once-per-visit label bubble would sit over the first lines of the hero text — it stays a small round
   button there (the switch with its label is in the menu and the footer; a long press / focus still shows the bubble) */
@media (max-width: 699px) { html.motion-hint .motion-switch--float:not(:focus-visible) .motion-switch__text { opacity: 0; } }
/* ================================================================ floating WhatsApp */
.wa-float {
  position: fixed; z-index: var(--z-float); bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)); right: max(16px, env(safe-area-inset-right));
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--whatsapp); color: #fff; text-decoration: none; box-shadow: 0 12px 28px -10px rgba(21, 122, 64, .7);
  transition: transform .35s var(--ease-out), opacity .3s var(--ease-out);
}
[dir="rtl"] .wa-float { right: auto; left: max(16px, env(safe-area-inset-left)); }
.wa-float .icon { width: 30px; height: 30px; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--whatsapp); opacity: 0; pointer-events: none; }
html[data-motion="full"] .wa-float::before { animation: abyat-ring 2.6s var(--ease-out) 2.5s 3; }
@keyframes abyat-ring { 0% { opacity: .7; scale: 1; } 100% { opacity: 0; scale: 1.55; } }
@media (hover: hover) { .wa-float:hover { transform: translateY(-3px) scale(1.04); } }
.wa-float__label { position: absolute; inset-inline-end: calc(100% + 12px); padding: .45rem .85rem; border-radius: var(--r-pill); background: var(--navy-950); color: var(--on-dark); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; opacity: 0; translate: calc(var(--dir) * 8px) 0; transition: opacity .3s, translate .4s var(--ease-out); pointer-events: none; }
@media (hover: hover) { .wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { opacity: 1; translate: 0 0; } }
html.menu-open .wa-float, html.lightbox-open .wa-float { opacity: 0; pointer-events: none; }
.motion-switch__icon { display: none; }

/* ================================================================ phones: booking bar (partials/book-bar.html; site.js toggles .is-shown) */
.book-bar { display: none; }
@media (max-width: 699px) {
  .book-bar {
    position: fixed; z-index: var(--z-float); inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: .6rem;
    padding: .65rem max(var(--gutter), env(safe-area-inset-left)) calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(7, 21, 46, .96); box-shadow: 0 -12px 30px -16px rgba(0, 0, 0, .55); --focus: var(--focus-on-dark);
    opacity: 0; transform: translate3d(0, 110%, 0); transition: transform .45s var(--ease-expo), opacity .3s var(--ease-out); pointer-events: none;
  }
  .book-bar.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .book-bar__book { flex: 1; min-height: 50px; }
  .book-bar__wa { width: 50px; height: 50px; --btn-bg: var(--whatsapp); --btn-border: transparent; color: #fff; }
  .book-bar__wa .icon { width: 24px; height: 24px; }
  html[data-motion="calm"] .book-bar { transform: none; transition: opacity .25s var(--ease-out); }
  /* the bar carries WhatsApp itself: the floating buttons step aside while it shows */
  html.has-book-bar .wa-float, html.has-book-bar .motion-switch--float { opacity: 0; pointer-events: none; }
}

/* ================================================================ toast */
.toast-region { position: fixed; z-index: var(--z-toast); inset-inline: 0; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); display: grid; justify-items: center; gap: .5rem; padding-inline: 16px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: .65rem; max-width: 30rem; padding: .85rem 1.15rem; border-radius: var(--r-md); background: var(--navy-900); color: var(--on-dark); box-shadow: var(--shadow-3); font-size: var(--fs-small); line-height: 1.6; pointer-events: auto; opacity: 0; translate: 0 14px; transition: opacity .3s var(--ease-out), translate .45s var(--ease-expo); }
.toast.is-in { opacity: 1; translate: 0 0; }
.toast .icon { color: var(--gold-400); }
.toast--success .icon { color: #86d3a6; }
.toast--error .icon { color: #f2a497; }

/* ================================================================ visitor counter (footer) */
.visitors { display: inline-flex; flex-wrap: wrap; align-items: center; justify-self: start; gap: .4rem .9rem; min-height: 58px; padding: .55rem 1.25rem; border: 1px solid rgba(194, 161, 95, .35); border-radius: var(--r-pill); background: rgba(194, 161, 95, .06); color: var(--on-dark); transition: opacity .6s var(--ease-out); }
.visitors:not(.is-shown) { opacity: 0; }
.visitors__icon { color: var(--gold-400); }
.visitors__label { font-size: var(--fs-small); color: var(--on-dark-soft); }
.visitors__total { font-family: var(--font-latin); font-size: 1.75rem; font-weight: 600; line-height: 1.15; color: var(--gold-300); font-variant-numeric: lining-nums tabular-nums; }
.visitors__today { display: inline-flex; align-items: center; gap: .4rem; padding-inline-start: .9rem; border-inline-start: 1px solid var(--line-on-dark); font-size: var(--fs-xs); color: var(--on-dark-muted); }
.visitors__today b { color: var(--on-dark-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
/* on light sections */
:is(.tone-ivory, .tone-sand, .tone-stone, .tone-surface) .visitors { color: var(--ink); background: var(--gold-100); border-color: rgba(160, 122, 53, .35); }
:is(.tone-ivory, .tone-sand, .tone-stone, .tone-surface) .visitors__total { color: var(--gold-700); }
:is(.tone-ivory, .tone-sand, .tone-stone, .tone-surface) :is(.visitors__label, .visitors__today, .visitors__today b) { color: var(--ink-soft); }

/* ================================================================ footer */
.site-footer { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: var(--navy-950); color: var(--on-dark-soft); font-size: var(--fs-small); line-height: 1.8; --line: var(--line-on-dark); --pattern-opacity: .05; --pattern-size: 64px; }
.site-footer::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(to right, transparent, var(--gold-500), transparent); opacity: .6; }
.site-footer__glow { position: absolute; z-index: -1; top: -30%; inset-inline-start: -10%; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(194, 161, 95, .13), transparent); pointer-events: none; }
.site-footer__top { padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.site-footer__logo-link { display: inline-block; justify-self: start; }
.site-footer__logo-link picture { display: block; }
.site-footer__group { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 700; color: var(--gold-300); line-height: 1.5; }
:lang(en) .site-footer__group { font-weight: 600; font-style: italic; }
.site-footer__col { min-width: 0; }
.lang-switch--boxed { display: inline-flex; border: 1px solid var(--line-on-dark); }
.site-footer__top-link { --btn-border: rgba(247, 240, 227, .25); }
.site-footer__top-link .icon { transition: translate .4s var(--ease-out); }
@media (hover: hover) { .site-footer__top-link:hover .icon { translate: 0 -3px; } }
.site-footer__grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.35fr .8fr .8fr 1.2fr; } }
.site-footer__brand { display: grid; gap: 1.1rem; align-content: start; }
.site-footer__logo { width: 150px; height: auto; }
.site-footer__tagline { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.45; color: var(--on-dark); font-weight: 700; max-width: 22ch; }
:lang(en) .site-footer__tagline { font-weight: 600; font-size: 1.7rem; line-height: 1.2; }
.site-footer__about { max-width: 36ch; }
.site-footer__heading { font-family: var(--font-sans); font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--gold-400); margin-bottom: 1rem; }
:lang(en) .site-footer__heading { font-size: .78rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.site-footer__links { display: grid; gap: .55rem; }
.site-footer__links a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer__links a:hover { color: var(--on-dark); }
.contact-list { display: grid; gap: .85rem; }
.contact-list li { display: flex; align-items: flex-start; gap: .75rem; }
.contact-list .icon { margin-top: .25em; color: var(--gold-400); }
.contact-list a { color: var(--on-dark-soft); text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--on-dark); }
.contact-list__label { display: block; font-size: var(--fs-xs); color: var(--on-dark-muted); line-height: 1.5; }
.site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-block: 1.6rem; border-top: 1px solid var(--line-on-dark); }
.site-footer__meta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.4rem calc(1.4rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-on-dark); font-size: var(--fs-xs); color: var(--on-dark-muted); }
/* room under the last line for the floating WhatsApp button and motion pill (58px tall, 18px up), so at the very
   bottom of the page they never cover the copyright or the studio credit */
.site-footer__bottom { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
@media (max-width: 699px) { .site-footer__bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
.site-footer__bottom a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer__bottom a:hover { color: var(--on-dark); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.site-footer__legal a, .credit a { display: inline-block; padding-block: .65rem; margin-block: -.65rem; }
.credit a { color: var(--gold-400); font-weight: 600; }
.credit a:hover { color: var(--gold-300); }

/* ================================================================ additions (round 2)
   frame zoom badge · carousel states · room-card kicker · form card · success ref · file drag · section-head ornament */
.frame { overflow: hidden; overflow: clip; }
.frame__zoom { position: absolute; z-index: 2; bottom: .8rem; inset-inline-end: .8rem; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(7, 21, 46, .62); color: #fff; opacity: 0; scale: .85; transition: opacity .35s var(--ease-out), scale .45s var(--ease-out); pointer-events: none; }
.frame__zoom .icon { width: 18px; height: 18px; }
@media (hover: hover) { a.frame:hover .frame__zoom, a.frame:focus-visible .frame__zoom { opacity: 1; scale: 1; } a.frame:hover img { transform: scale(1.04); } }
@media (hover: none) { .frame__zoom { opacity: .9; scale: 1; } }
a.frame { color: inherit; }
a.frame:focus-visible { outline-offset: 4px; }

.carousel.is-static .carousel__controls { display: none; }
.carousel__status { min-width: 3.5em; direction: ltr; unicode-bidi: isolate; text-align: center; }
.carousel--dark .carousel__progress { background: var(--line-on-dark); }
.carousel--dark .carousel__status { color: var(--on-dark-muted); }
.carousel__nav .btn-icon { transition: transform var(--dur-fast) var(--ease-out), opacity .3s var(--ease-out); }

.room-card__kicker { font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; color: var(--accent-ink); }
:lang(ar) .room-card__kicker { font-family: var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.room-card .frame { --ratio: 4 / 3; }

.form-card { display: grid; gap: var(--space-l); padding: clamp(1.4rem, .9rem + 2.4vw, 3rem); border-radius: var(--r-xl); }
.form-alert__body { display: grid; gap: .15rem; }
.form-alert__title { font-weight: 600; }
.form-actions--center { justify-content: center; }
.file-field__icon { transition: transform .4s var(--ease-out); }
.file-field.is-drag { border-color: var(--gold-600); background: var(--gold-100); }
.file-field.is-drag .file-field__icon { transform: translateY(-3px) scale(1.06); }
.success-panel__ref { display: grid; justify-items: center; gap: .4rem; }
.success-panel__ref-label { font-size: var(--fs-small); color: var(--muted); }
.success-panel:focus { outline: none; }
.field__error .icon { flex: none; }

.section-head .ornament { margin-top: .2rem; }
.section-head--center .ornament { margin-inline: auto; }
.cta-band__inner .ornament { margin-inline: auto; }

/* date field: native picker underneath, formatted value on top (partials/field.html type="date") */
.date-input { position: relative; }
.date-input .input { padding-inline-end: 3rem; cursor: pointer; }
.date-input__icon { position: absolute; top: 50%; inset-inline-end: 1rem; width: 20px; height: 20px; margin-top: -10px; color: var(--gold-700); pointer-events: none; }
.date-input__display { position: absolute; inset: 1px; display: none; align-items: center; padding-inline: 1rem 3rem; border-radius: var(--r-md); color: var(--muted); font-size: 1rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; font-variant-numeric: lining-nums; }
.date-input.has-value .date-input__display { color: var(--ink); font-weight: 500; }
.date-input.is-enhanced .date-input__display { display: flex; }
.date-input.is-enhanced .input { color: transparent; }
.date-input.is-enhanced .input::-webkit-datetime-edit { opacity: 0; }
.date-input .input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; }
/* typing a date with the keyboard: show the browser's own text while the field has keyboard focus */
.date-input.is-typing .input { color: var(--ink); }
.date-input.is-typing .input::-webkit-datetime-edit { opacity: 1; }
.date-input.is-typing .date-input__display { opacity: 0; }
/* the enhanced field has two tab stops (the date segments, then the picker button) and neither paints its own focus:
   the box shows it whenever focus is anywhere inside */
.date-input:focus-within .input { border-color: var(--gold-700); box-shadow: 0 0 0 2px var(--gold-700); }
.date-input .input::-webkit-calendar-picker-indicator:focus-visible { outline: none; }
.stack > .section-head { margin-bottom: 0; }

/* 3D facade host (public/js/facade3d.js fills it) — give it a size in the page: aspect-ratio or height */
.facade3d { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--navy-800); }
html.lightbox-open .motion-switch--float, html.menu-open .motion-switch--float { opacity: 0; pointer-events: none; }