:root {
    --orange: #ff5a1f;
    --orange-dark: #d9420c;
    --orange-soft: #fff0e8;
    --ink: #171614;
    --ink-soft: #302e2a;
    --ivory: #f5f1e9;
    --paper: #fffdf9;
    --white: #ffffff;
    --muted: #756f66;
    --line: #e9e2d7;
    --green: #198754;
    --green-soft: #e8f7ef;
    --amber: #b7791f;
    --amber-soft: #fff7db;
    --red: #c9362b;
    --red-soft: #fdeceb;
    --blue: #2463a8;
    --blue-soft: #eaf2fb;
    --sidebar-width: 215px;
    --sidebar-collapsed: 72px;
    --radius: 18px;
    --radius-sm: 11px;
    --shadow: 0 16px 38px rgba(39, 30, 20, .08);
    --shadow-sm: 0 8px 22px rgba(39, 30, 20, .07);
    --transition: 180ms ease;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--ivory);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--ivory);
    line-height: 1.5;
}

body::selection {
    color: #fff;
    background: var(--orange);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    letter-spacing: -.025em;
    line-height: 1.15;
}

.muted {
    color: var(--muted);
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-danger {
    color: var(--red);
}

.text-success {
    color: var(--green);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--orange-dark);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 20px;
    height: 3px;
    border-radius: 9px;
    background: var(--orange);
    content: "";
}

.btn {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 17px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    font-weight: 750;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

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

.btn:focus-visible,
.icon-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid rgba(255, 90, 31, .28);
    outline-offset: 2px;
}

.btn-primary {
    color: #fff;
    background: var(--orange);
    box-shadow: 0 9px 18px rgba(255, 90, 31, .2);
}

.btn-primary:hover {
    background: var(--orange-dark);
    box-shadow: 0 12px 24px rgba(255, 90, 31, .27);
}

.btn-dark {
    color: #fff;
    background: var(--ink);
}

.btn-outline {
    border-color: var(--line);
    background: var(--paper);
}

.btn-danger {
    color: #fff;
    background: var(--red);
}

.btn-success {
    color: #fff;
    background: var(--green);
}

.btn-sm {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: .82rem;
}

.btn-block {
    width: 100%;
}

.icon-btn {
    width: 42px;
    height: 42px;
    display: inline-grid;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: var(--paper);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.icon-btn:hover {
    transform: translateY(-1px);
    background: var(--orange-soft);
}

.field {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
}

.field > span,
.field-label {
    color: var(--ink-soft);
    font-size: .84rem;
    font-weight: 750;
}

.field small {
    color: var(--muted);
}

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}

textarea {
    min-height: 105px;
    resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #d4c9ba;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 90, 31, .09);
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    min-height: 18px;
    margin: 0;
    accent-color: var(--orange);
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink-soft);
    font-size: .88rem;
}

.form-grid {
    display: grid;
    gap: 16px;
}

.form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .9rem;
}

.alert-success {
    color: #12633e;
    border-color: #bfe8d0;
    background: var(--green-soft);
}

.alert-danger {
    color: #8c201a;
    border-color: #f1c4c0;
    background: var(--red-soft);
}

.alert-warning {
    color: #77500d;
    border-color: #f1df9e;
    background: var(--amber-soft);
}

.alert-info {
    color: #174d86;
    border-color: #c4d9ef;
    background: var(--blue-soft);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    text-transform: capitalize;
    white-space: nowrap;
}

.status-pill::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.status-pill.success {
    color: var(--green);
    background: var(--green-soft);
}

.status-pill.warning {
    color: var(--amber);
    background: var(--amber-soft);
}

.status-pill.danger {
    color: var(--red);
    background: var(--red-soft);
}

.status-pill.info {
    color: var(--blue);
    background: var(--blue-soft);
}

.badge {
    display: inline-flex;
    min-width: 22px;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 999px;
    color: #fff;
    background: var(--orange);
    font-size: .7rem;
    font-weight: 800;
}

/* Authentication */
.auth-page {
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 90, 31, .11), transparent 28%),
        linear-gradient(145deg, #f8f4ed 0%, #efe8dc 100%);
}

.auth-shell {
    width: min(1100px, calc(100% - 40px));
    min-height: min(700px, calc(100vh - 56px));
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);
    margin: 28px auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 28px;
    background: var(--paper);
    box-shadow: 0 30px 80px rgba(34, 28, 20, .15);
}

.auth-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    padding: 50px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(20, 19, 17, .97), rgba(37, 32, 26, .94)),
        var(--ink);
}

.auth-brand-panel::after {
    position: absolute;
    right: -70px;
    bottom: -100px;
    width: 330px;
    height: 330px;
    border: 58px solid rgba(255, 90, 31, .17);
    border-radius: 50%;
    content: "";
}

.auth-brand-panel img {
    position: relative;
    z-index: 1;
    width: 172px;
    height: 172px;
    object-fit: cover;
    border: 8px solid rgba(255, 255, 255, .08);
    border-radius: 28px;
}

.auth-brand-panel > div {
    position: relative;
    z-index: 1;
}

.auth-brand-panel .eyebrow {
    color: #ff9b73;
}

.auth-brand-panel h1 {
    max-width: 520px;
    margin-bottom: 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.35rem, 4.2vw, 4.35rem);
    font-weight: 500;
}

.auth-brand-panel p {
    max-width: 520px;
    color: rgba(255, 255, 255, .67);
    font-size: 1.02rem;
}

.auth-form-panel {
    display: grid;
    align-items: center;
    padding: 48px;
}

.auth-form-wrap {
    width: 100%;
    max-width: 420px;
    margin: auto;
}

.auth-form-wrap h2 {
    margin-bottom: 10px;
    font-size: 2rem;
}

.auth-form-wrap > p {
    margin-bottom: 25px;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.login-shell {
    width: min(980px, calc(100% - 28px));
    min-height: min(600px, calc(100vh - 28px));
    grid-template-columns: minmax(300px, .9fr) minmax(380px, 1.1fr);
    margin: 14px auto;
    border-radius: 22px;
}

.login-shell .auth-brand-panel {
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 34px;
    text-align: center;
}

.login-shell .auth-brand-panel img {
    width: 118px;
    height: 118px;
    border-width: 6px;
    border-radius: 22px;
}

.login-shell .auth-brand-panel h1,
.login-shell .auth-brand-panel p {
    margin-inline: auto;
}

.login-shell .auth-brand-panel h1 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 3.5vw, 3.1rem);
}

.login-shell .auth-brand-panel p {
    font-size: .9rem;
}

.login-shell .auth-form-panel {
    justify-items: center;
    padding: 32px;
}

.login-shell .auth-form-wrap {
    max-width: 410px;
    margin: auto;
}

.login-shell .auth-form-wrap > .eyebrow,
.login-shell .auth-form-wrap > h2,
.login-shell .auth-form-wrap > p {
    text-align: center;
}

.login-shell .auth-form-wrap > .eyebrow {
    width: fit-content;
    margin-inline: auto;
}

.login-shell .auth-form-wrap h2 {
    margin-bottom: 7px;
    font-size: 1.7rem;
}

.login-shell .auth-form-wrap > p {
    margin-bottom: 20px;
    font-size: .86rem;
}

.login-shell .field {
    gap: 6px;
    margin-bottom: 12px;
}

.login-shell input {
    min-height: 42px;
    padding: 8px 11px;
}

.login-shell .btn {
    min-height: 42px;
    padding: 9px 16px;
}

.login-help {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 2px 0 16px;
}

.login-help a {
    color: var(--orange-dark);
    font-size: .84rem;
    font-weight: 750;
}

.favicon-setting-layout {
    display: grid;
    grid-template-columns: 88px minmax(240px, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.favicon-setting-layout .field {
    margin-bottom: 0;
}

.favicon-preview {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        linear-gradient(45deg, #f1eee8 25%, transparent 25%),
        linear-gradient(-45deg, #f1eee8 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1eee8 75%),
        linear-gradient(-45deg, transparent 75%, #f1eee8 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.favicon-preview img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 10px;
}

.setup-shell {
    width: min(1040px, calc(100% - 28px));
    min-height: auto;
    max-height: calc(100vh - 28px);
    grid-template-columns: minmax(280px, .78fr) minmax(430px, 1.22fr);
    margin: 14px auto;
    border-radius: 22px;
}

.setup-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.setup-shell .auth-form-panel {
    align-items: center;
    justify-items: center;
    padding: 26px 32px;
    overflow-y: auto;
}

.setup-shell .auth-brand-panel {
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 30px;
    text-align: center;
}

.setup-shell .auth-brand-panel h1,
.setup-shell .auth-brand-panel p {
    margin-inline: auto;
}

.setup-shell .auth-brand-panel img {
    width: 112px;
    height: 112px;
    border-width: 6px;
    border-radius: 22px;
}

.setup-shell .auth-brand-panel h1 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 3.4vw, 3rem);
}

.setup-shell .auth-brand-panel p {
    margin-bottom: 0;
    font-size: .9rem;
}

.setup-shell .auth-form-wrap {
    max-width: 520px;
    margin: auto;
}

.setup-shell .auth-form-wrap > .eyebrow,
.setup-shell .auth-form-wrap > h2,
.setup-shell .auth-form-wrap > p,
.setup-shell .auth-form-wrap > .status-pill {
    text-align: center;
}

.setup-shell .auth-form-wrap > .eyebrow,
.setup-shell .auth-form-wrap > .status-pill {
    width: fit-content;
    margin-inline: auto;
}

.setup-shell .auth-form-wrap h2 {
    margin-bottom: 6px;
    font-size: 1.55rem;
}

.setup-shell .auth-form-wrap > p {
    margin-bottom: 14px;
    font-size: .82rem;
}

.setup-shell .eyebrow {
    margin-bottom: 6px;
}

.setup-shell .field {
    gap: 5px;
    margin-bottom: 10px;
}

.setup-shell .form-grid {
    gap: 10px;
}

.setup-shell input,
.setup-shell select,
.setup-shell textarea {
    min-height: 39px;
    padding: 7px 10px;
}

.setup-shell .btn {
    min-height: 40px;
    padding: 8px 15px;
}

/* Staff shell */
.app-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 12% 4%, rgba(255, 90, 31, .18), transparent 25%),
        linear-gradient(180deg, #171614 0%, #23201d 100%);
    transition: width var(--transition), transform var(--transition);
}

.sidebar-brand {
    min-height: 86px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-brand img {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    object-fit: cover;
    border-radius: 12px;
}

.sidebar-brand strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.07rem;
    white-space: nowrap;
}

.sidebar-brand small {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .54);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar-nav {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px 12px;
    scroll-behavior: smooth;
    scroll-padding-block: 24px;
    scrollbar-color: rgba(255,255,255,.18) transparent;
    scrollbar-width: thin;
}

.nav-section-label {
    height: 27px;
    margin: 12px 12px 4px;
    color: rgba(255, 255, 255, .38);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity var(--transition);
}

.nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 3px 0;
    padding: 9px 12px;
    border-radius: 11px;
    color: rgba(255, 255, 255, .69);
    font-size: .88rem;
    font-weight: 650;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition);
}

.nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.nav-link.active {
    color: #fff;
    background: linear-gradient(100deg, var(--orange), #ef6a36);
    box-shadow: 0 8px 20px rgba(255, 90, 31, .22);
}

.nav-icon {
    width: 25px;
    flex: 0 0 25px;
    text-align: center;
    font-size: 1.08rem;
}

.nav-text {
    transition: opacity var(--transition);
}

.sidebar-footer {
    padding: 14px 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-footer .nav-link {
    margin: 0;
}

.app-main {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition);
}

.topbar {
    position: sticky;
    z-index: 40;
    top: 0;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 28px;
    border-bottom: 1px solid rgba(220, 211, 199, .85);
    background: rgba(245, 241, 233, .9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.global-search {
    position: relative;
    width: min(380px, 38vw);
}

.global-search input {
    padding-left: 39px;
    border-color: transparent;
    background: rgba(255,255,255,.75);
    box-shadow: 0 5px 14px rgba(38, 30, 22, .04);
}

.global-search::before {
    position: absolute;
    z-index: 1;
    top: 11px;
    left: 14px;
    content: "⌕";
    color: var(--muted);
    font-size: 1.1rem;
}

.global-results {
    right: auto;
    left: 0;
    width: min(520px, calc(100vw - 34px));
    max-height: min(560px, 72vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.global-results a {
    align-items: flex-start;
}

.global-results a.active,
.global-results a:hover {
    background: var(--orange-soft);
}

.global-result-icon {
    width: 30px;
    height: 30px;
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 8px;
    color: var(--orange-dark);
    background: rgba(255,106,22,.12);
    font-size: .62rem;
    font-weight: 850;
}

.global-result-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.global-result-copy em {
    color: var(--orange-dark);
    font-size: .52rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.global-result-copy strong,
.global-result-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-result-copy small,
.dropdown-empty {
    color: var(--muted);
    font-size: .68rem;
}

.dropdown-empty {
    padding: 12px;
    text-align: center;
}

.business-date {
    display: grid;
    line-height: 1.15;
}

.business-date span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.business-date strong {
    margin-top: 4px;
    font-size: .84rem;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 9px 4px 5px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--paper);
    cursor: pointer;
}

.avatar {
    width: 36px;
    height: 36px;
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--orange), var(--orange-dark));
    font-size: .76rem;
    font-weight: 900;
}

.profile-trigger-info {
    display: grid;
    min-width: 105px;
    text-align: left;
    line-height: 1.15;
}

.profile-trigger-info strong {
    font-size: .8rem;
}

.profile-trigger-info small {
    max-width: 125px;
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted);
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown {
    position: absolute;
    z-index: 80;
    top: calc(100% + 9px);
    right: 0;
    width: 225px;
    display: none;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.dropdown.open {
    display: grid;
}

.dropdown a,
.dropdown button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 0;
    border-radius: 9px;
    color: var(--ink-soft);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: .84rem;
}

.dropdown a:hover,
.dropdown button:hover {
    background: var(--orange-soft);
}

.app-content {
    width: min(1600px, 100%);
    margin: 0 auto;
    padding: 27px 28px 55px;
}

body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed);
}

body.sidebar-collapsed .app-main {
    margin-left: var(--sidebar-collapsed);
}

body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
}

body.sidebar-collapsed .sidebar-brand > div,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-section-label {
    width: 0;
    overflow: hidden;
    opacity: 0;
}

body.sidebar-collapsed .nav-link {
    justify-content: center;
    padding-inline: 8px;
}

body.sidebar-collapsed .nav-icon {
    width: 30px;
    flex-basis: 30px;
}

.mobile-overlay {
    position: fixed;
    z-index: 45;
    inset: 0;
    display: none;
    background: rgba(17, 16, 14, .5);
}

/* Page structure */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.page-header h1 {
    margin-bottom: 7px;
    font-size: clamp(1.65rem, 3vw, 2.3rem);
}

.page-header p {
    max-width: 720px;
    margin-bottom: 0;
    color: var(--muted);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.quick-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.metric-card {
    position: relative;
    min-height: 138px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(228, 218, 204, .86);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.metric-card::after {
    position: absolute;
    right: -25px;
    bottom: -42px;
    width: 110px;
    height: 110px;
    border: 22px solid var(--orange-soft);
    border-radius: 50%;
    content: "";
}

.metric-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: .79rem;
    font-weight: 750;
}

.metric-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--orange-dark);
    background: var(--orange-soft);
}

.metric-value {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 13px;
    font-size: clamp(1.55rem, 2.5vw, 2.15rem);
    font-weight: 850;
    letter-spacing: -.045em;
}

.metric-foot {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .73rem;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: span 12; }

.card {
    border: 1px solid rgba(228, 218, 204, .86);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 21px;
    border-bottom: 1px solid var(--line);
}

.card-header h2,
.card-header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.card-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .78rem;
}

.card-body {
    padding: 21px;
}

.card-body.flush {
    padding: 0;
}

.card-footer {
    padding: 14px 21px;
    border-top: 1px solid var(--line);
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.62);
}

.toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.toolbar input,
.toolbar select {
    width: auto;
    min-width: 150px;
    min-height: 38px;
    padding-block: 7px;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.data-table th,
.data-table td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.data-table th {
    color: var(--muted);
    background: #fbf8f2;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.data-table tbody tr {
    transition: background var(--transition);
}

.data-table tbody tr:hover {
    background: #fffaf5;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.primary-cell {
    display: grid;
    gap: 2px;
}

.primary-cell strong {
    font-size: .86rem;
}

.primary-cell small {
    color: var(--muted);
    font-size: .7rem;
}

.empty-state {
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 35px;
    text-align: center;
}

.empty-state-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 22px;
    color: var(--orange);
    background:
        repeating-linear-gradient(135deg, transparent 0 7px, rgba(255,90,31,.08) 7px 13px),
        var(--orange-soft);
    font-size: 1.7rem;
}

.empty-state h3 {
    margin-bottom: 8px;
}

.empty-state p {
    max-width: 390px;
    margin-bottom: 18px;
    color: var(--muted);
    font-size: .88rem;
}

.tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #ebe5db;
}

.tab {
    min-height: 36px;
    padding: 8px 13px;
    border: 0;
    border-radius: 9px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 750;
    white-space: nowrap;
}

.tab.active {
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 3px 10px rgba(28, 23, 17, .07);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.list {
    display: grid;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.list-item:last-child {
    border-bottom: 0;
}

.list-item-main {
    display: flex;
    align-items: center;
    gap: 11px;
}

.list-icon {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    background: var(--orange-soft);
}

.list-item strong {
    display: block;
    font-size: .83rem;
}

.list-item small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .7rem;
}

.progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eee6db;
}

.progress > span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--orange);
}

/* Room board */
.room-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 13px;
}

.room-card {
    position: relative;
    min-height: 145px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-left: 5px solid var(--blue);
    border-radius: 14px;
    background: #fff;
}

.room-card.success { border-left-color: var(--green); }
.room-card.warning { border-left-color: var(--amber); }
.room-card.danger { border-left-color: var(--red); }
.room-card.info { border-left-color: var(--blue); }

.room-number {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.room-number strong {
    font-size: 1.25rem;
}

.room-card > small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
}

.room-card .status-pill {
    margin-top: 18px;
}

.room-card-actions {
    display: flex;
    gap: 5px;
    margin-top: 12px;
}

/* Calendar / timeline */
.calendar-strip {
    display: grid;
    grid-auto-columns: minmax(82px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
}

.calendar-day {
    padding: 11px 7px;
    border-right: 1px solid var(--line);
    text-align: center;
}

.calendar-day strong,
.calendar-day small {
    display: block;
}

.calendar-day small {
    color: var(--muted);
    font-size: .68rem;
}

.calendar-day.today {
    color: var(--orange-dark);
    background: var(--orange-soft);
}

/* POS */
.pos-layout {
    height: calc(100vh - 128px);
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 16px;
}

.pos-catalog,
.pos-ticket {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.pos-categories {
    display: flex;
    gap: 7px;
    padding: 14px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
}

.pos-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 11px;
    padding: 14px;
    overflow-y: auto;
}

.product-card {
    min-height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,248,239,.94)),
        #fff;
    cursor: pointer;
    text-align: left;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.product-card:hover {
    transform: translateY(-2px);
    border-color: #f0b397;
    box-shadow: 0 11px 22px rgba(56, 37, 20, .09);
}

.product-card strong {
    font-size: .91rem;
}

.product-card small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.product-card .price {
    color: var(--orange-dark);
    font-weight: 850;
}

.pos-ticket-head {
    padding: 16px;
    border-bottom: 1px solid var(--line);
}

.pos-ticket-items {
    flex: 1;
    overflow-y: auto;
    padding: 7px 15px;
}

.ticket-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.ticket-item strong {
    display: block;
    font-size: .84rem;
}

.ticket-item small {
    color: var(--muted);
}

.quantity-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
}

.quantity-control button {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}

.pos-ticket-total {
    padding: 16px;
    border-top: 1px solid var(--line);
    background: #fbf8f2;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin: 6px 0;
    color: var(--muted);
    font-size: .84rem;
}

.total-row.grand {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #c9bcaa;
    color: var(--ink);
    font-size: 1.12rem;
    font-weight: 850;
}

/* KDS */
.kds-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    gap: 14px;
    overflow-x: auto;
}

.kds-column {
    min-height: 570px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(225, 217, 205, .65);
}

.kds-column-head {
    display: flex;
    justify-content: space-between;
    padding: 5px 4px 12px;
    font-size: .83rem;
    font-weight: 850;
    text-transform: uppercase;
}

.kds-ticket {
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.kds-ticket-head {
    display: flex;
    justify-content: space-between;
    gap: 9px;
    margin-bottom: 11px;
}

.kds-ticket ul {
    margin: 0;
    padding-left: 20px;
    color: var(--ink-soft);
    font-size: .82rem;
}

.kds-ticket .timer {
    color: var(--orange-dark);
    font-size: .72rem;
    font-weight: 850;
}

/* Charts */
.chart-bars {
    height: 220px;
    display: flex;
    align-items: end;
    gap: 12px;
    padding: 18px 4px 0;
}

.chart-bar-group {
    min-width: 24px;
    flex: 1;
    text-align: center;
}

.chart-bar {
    width: 100%;
    min-height: 3px;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient(180deg, var(--orange), #ff8a5e);
    transition: height .5s ease;
}

.chart-bar-group small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: .66rem;
}

/* Public booking portal */
.public-page {
    background: #f9f5ed;
}

.public-topbar {
    position: relative;
    z-index: 31;
    color: var(--ink-soft);
    background:
        radial-gradient(circle at 18% 50%, rgba(255,90,31,.07), transparent 24%),
        #e7e6e3;
    border-bottom: 1px solid #d8d5cf;
}

.public-topbar::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--orange), #ff8a50 45%, transparent 82%);
    content: "";
}

.public-topbar-inner {
    width: min(1180px, calc(100% - 48px));
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: auto;
    padding: 2px 0;
}

.public-socials,
.public-social-links,
.public-topbar-contact,
.public-topbar-contact a {
    display: flex;
    align-items: center;
}

.public-socials {
    gap: 12px;
}

.public-topbar-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #69645e;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.public-topbar-kicker i {
    width: 17px;
    height: 1px;
    display: block;
    background: var(--orange);
}

.public-social-links {
    gap: 5px;
}

.public-social-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid #cfcbc4;
    border-radius: 50%;
    color: #4e4a45;
    background: rgba(255,255,255,.7);
    font-family: Arial, sans-serif;
    font-size: .68rem;
    font-weight: 900;
    line-height: 1;
    transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
}

.public-social-icon:hover {
    border-color: var(--orange);
    color: #fff;
    background: var(--orange);
    transform: translateY(-1px);
}

.public-topbar-contact {
    gap: 0;
}

.public-topbar-contact a {
    gap: 7px;
    padding: 0 13px;
    color: #55514b;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.public-topbar-contact a + a {
    border-left: 1px solid #cbc7c0;
}

.public-topbar-contact a:last-child {
    padding-right: 0;
}

.public-topbar-contact a:hover {
    color: var(--orange-dark);
}

.public-contact-icon {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: var(--orange);
    background: rgba(255,90,31,.1);
    font-size: .69rem;
}

.public-nav {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    padding: 16px max(24px, calc((100% - 1180px) / 2));
    border-bottom: 1px solid #d8ccb9;
    background:
        linear-gradient(90deg, rgba(252,249,242,.98), rgba(243,236,224,.96)),
        var(--paper);
    box-shadow: 0 10px 28px rgba(46, 35, 24, .08);
    isolation: isolate;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.public-nav::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        repeating-linear-gradient(114deg, transparent 0 38px, rgba(30,25,19,.025) 39px 46px),
        radial-gradient(circle at 86% 20%, rgba(255,90,31,.11), transparent 26%);
    content: "";
}

.public-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.public-brand img {
    width: 72px;
    height: 72px;
    padding: 3px;
    object-fit: cover;
    border: 2px solid rgba(255,90,31,.48);
    border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
    background: rgba(255,255,255,.86);
    box-shadow: 0 8px 20px rgba(52,38,25,.13), 0 0 0 5px rgba(255,255,255,.48);
}

.public-brand strong {
    display: block;
    color: #28221b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.3rem;
    letter-spacing: .01em;
}

.public-brand small {
    display: block;
    margin-top: 2px;
    color: var(--orange-dark);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.public-links {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 22px;
}

.public-links a:not(.btn) {
    position: relative;
    padding: 10px 14px;
    border: 1px solid rgba(91, 75, 57, .28);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: .97rem;
    font-weight: 700;
    transition: border-color .24s ease, color .24s ease;
}

.public-links a:not(.btn)::after {
    position: absolute;
    right: 14px;
    bottom: 5px;
    left: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--orange);
    content: "";
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity .16s ease, transform .32s cubic-bezier(.2, .72, .28, 1);
}

.public-links a:not(.btn):hover,
.public-links a.active:not(.btn),
.public-links a:not(.btn):focus-visible {
    border-color: transparent;
    color: var(--ink-soft);
}

.public-links a:not(.btn):hover::after,
.public-links a.active:not(.btn)::after,
.public-links a:not(.btn):focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.public-nav .btn-sm {
    min-height: 46px;
    padding: 10px 19px;
    border-radius: 999px;
}

.public-nav .btn-primary {
    border-color: rgba(195,62,13,.2);
    background: linear-gradient(135deg, #ff6a2f, var(--orange-dark));
    box-shadow: 0 11px 23px rgba(212, 68, 17, .24);
}

.public-nav .btn-primary:hover {
    background: linear-gradient(135deg, var(--orange), #b9380d);
    box-shadow: 0 14px 28px rgba(192, 57, 10, .3);
}

.public-links a.active:not(.btn) {
    color: var(--orange-dark);
}

.hero {
    position: relative;
    min-height: 620px;
    display: grid;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--ink);
}

.hero::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 13, 12, .94) 0%, rgba(18, 17, 15, .82) 46%, rgba(18, 17, 15, .34) 100%),
        linear-gradient(0deg, rgba(18, 17, 15, .55), transparent 52%);
    content: "";
}

.hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        repeating-linear-gradient(125deg, transparent 0 58px, rgba(255,255,255,.02) 59px 65px),
        radial-gradient(circle at 78% 32%, rgba(255, 90, 31, .22), transparent 30%);
    content: "";
}

.hero-slides,
.hero-slide {
    position: absolute;
    inset: 0;
}

.hero-slides {
    z-index: 0;
    overflow: hidden;
}

.hero-slide {
    z-index: 0;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    transition:
        transform 1s cubic-bezier(.68, 0, .22, 1),
        opacity .72s ease,
        visibility 0s linear 1s;
    will-change: transform, opacity;
}

.hero-slide.is-active {
    z-index: 2;
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.hero-slide.is-entering-right,
.hero-slide.is-entering-left,
.hero-slide.is-leaving-left,
.hero-slide.is-leaving-right {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.hero-slide.is-entering-right {
    z-index: 2;
    transform: translate3d(100%, 0, 0);
    transition: none;
}

.hero-slide.is-entering-left {
    z-index: 2;
    transform: translate3d(-100%, 0, 0);
    transition: none;
}

.hero-slide.is-leaving-left {
    z-index: 1;
    transform: translate3d(-100%, 0, 0);
}

.hero-slide.is-leaving-right {
    z-index: 1;
    transform: translate3d(100%, 0, 0);
}

.hero-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 66%;
    transform: scale(1.02);
}

.hero-slide-lodge img {
    object-position: center 53%;
}

.hero-slide.is-active img {
    animation: hero-slide-zoom 7s ease-out both;
}

.hero-depth-scene {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    perspective: 900px;
}

.hero-depth-scene > span {
    position: absolute;
    display: block;
    transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0);
    transition: transform .9s cubic-bezier(.2, .72, .28, 1);
    will-change: transform;
}

.hero-depth-sun {
    top: 12%;
    right: 12%;
    width: clamp(170px, 20vw, 290px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 194, 133, .2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 155, 91, .27), rgba(255, 111, 48, .08) 44%, transparent 70%);
    box-shadow: 0 0 85px rgba(255, 106, 47, .13);
}

.hero-depth-dust {
    inset: 0;
    opacity: .55;
    background-image:
        radial-gradient(circle at 12% 28%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
        radial-gradient(circle at 36% 64%, rgba(255,210,167,.6) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 24%, rgba(255,255,255,.58) 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 72%, rgba(255,185,120,.62) 0 1px, transparent 1.5px);
    background-size: 190px 170px, 240px 220px, 280px 190px, 220px 260px;
    animation: safari-dust-drift 15s ease-in-out infinite alternate;
}

.hero-depth-grass {
    right: -4%;
    bottom: -18px;
    left: -4%;
    transform-origin: bottom;
}

.hero-depth-grass-back {
    height: 135px;
    opacity: .19;
    background: repeating-linear-gradient(102deg, transparent 0 15px, rgba(238, 205, 153, .72) 16px 18px, transparent 19px 30px);
    clip-path: polygon(0 100%, 0 71%, 6% 84%, 12% 55%, 17% 80%, 23% 47%, 28% 78%, 35% 58%, 42% 83%, 49% 51%, 56% 79%, 63% 43%, 70% 77%, 77% 55%, 84% 81%, 91% 48%, 100% 73%, 100% 100%);
}

.hero-depth-grass-front {
    bottom: -30px;
    height: 112px;
    opacity: .28;
    background: repeating-linear-gradient(96deg, transparent 0 20px, rgba(21, 20, 16, .92) 21px 25px, transparent 26px 42px);
    clip-path: polygon(0 100%, 0 74%, 5% 47%, 10% 81%, 16% 37%, 22% 76%, 29% 45%, 35% 82%, 42% 31%, 49% 75%, 56% 39%, 64% 79%, 72% 34%, 79% 77%, 87% 43%, 94% 80%, 100% 55%, 100% 100%);
}

@keyframes safari-dust-drift {
    from {
        opacity: .4;
        transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0) scale(1);
    }
    to {
        opacity: .68;
        transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0) scale(1.025);
    }
}

@keyframes hero-slide-zoom {
    from {
        transform: scale(1.02);
    }
    to {
        transform: scale(1.12);
    }
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 48px));
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 55px;
    margin: 0 auto;
    padding: 82px 0 125px;
}

.hero-copy-stage {
    min-width: 0;
    display: grid;
}

.hero-copy-stage .hero-copy {
    grid-area: 1 / 1;
    align-self: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(72px, 0, 0);
    transition:
        opacity .42s ease,
        transform .62s cubic-bezier(.2, .72, .28, 1),
        visibility 0s linear .62s;
    will-change: opacity, transform;
}

.hero-copy-stage .hero-copy.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.hero-copy-stage .hero-copy.is-leaving {
    visibility: visible;
    opacity: 0;
    transform: translate3d(-72px, 0, 0);
    transition-delay: 0s;
}

.hero-copy-stage .hero-copy.is-entering {
    visibility: visible;
    opacity: 0;
    transform: translate3d(72px, 0, 0);
    transition: none;
}

.hero-copy-stage.is-reverse .hero-copy {
    transform: translate3d(-72px, 0, 0);
}

.hero-copy-stage.is-reverse .hero-copy.is-active {
    transform: translate3d(0, 0, 0);
}

.hero-copy-stage.is-reverse .hero-copy.is-leaving {
    transform: translate3d(72px, 0, 0);
}

.hero-copy-stage.is-reverse .hero-copy.is-entering {
    transform: translate3d(-72px, 0, 0);
}

.hero-copy h1 {
    max-width: 690px;
    margin-bottom: 22px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.25rem, 7vw, 6.4rem);
    font-weight: 500;
    line-height: .97;
}

.hero-copy h1 em {
    color: var(--orange);
    font-weight: 500;
}

.hero-copy p {
    max-width: 580px;
    margin-bottom: 30px;
    color: rgba(255,255,255,.7);
    font-size: 1.06rem;
}

.hero-mark {
    position: relative;
    display: grid;
    place-items: center;
}

.hero-mark::before,
.hero-mark::after {
    position: absolute;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    content: "";
}

.hero-mark::after {
    width: 470px;
    height: 470px;
    border-style: dashed;
    border-color: rgba(255, 90, 31, .2);
}

.hero-mark img {
    position: relative;
    z-index: 2;
    width: 330px;
    height: 330px;
    object-fit: cover;
    border: 14px solid rgba(255,255,255,.07);
    border-radius: 46% 54% 48% 52% / 53% 43% 57% 47%;
    box-shadow: 0 30px 70px rgba(0,0,0,.28);
    transform: perspective(900px) rotateX(var(--hero-mark-x, 0deg)) rotateY(var(--hero-mark-y, 0deg)) translateZ(16px);
    transition: transform .85s cubic-bezier(.2, .72, .28, 1), box-shadow .5s ease;
    will-change: transform;
}

.hero-mark:hover img {
    box-shadow: 0 38px 82px rgba(0,0,0,.38);
}

.hero-slider-controls {
    position: absolute;
    z-index: 4;
    bottom: 82px;
    left: max(24px, calc((100% - 1180px) / 2));
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(18,17,15,.38);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

.hero-slider-dot {
    width: 42px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.hero-slider-dot span {
    width: 25px;
    height: 3px;
    display: block;
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    transition: width .35s ease, background .35s ease;
}

.hero-slider-dot:hover span {
    background: rgba(255,255,255,.72);
}

.hero-slider-dot.is-active span {
    width: 34px;
    background: var(--orange);
}

.hero-slider-dot:focus-visible {
    outline: 2px solid rgba(255,255,255,.9);
    outline-offset: 1px;
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
    }

    .hero-slide.is-active img {
        animation: none;
        transform: scale(1.02);
    }

    .hero-copy-stage .hero-copy,
    .hero-copy-stage .hero-copy.is-active,
    .hero-copy-stage .hero-copy.is-leaving,
    .hero-copy-stage .hero-copy.is-entering {
        transform: none;
        transition: none;
    }
}

.availability-box {
    position: relative;
    z-index: 5;
    width: min(1080px, calc(100% - 48px));
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin: -63px auto 0;
    padding: 18px;
    border: 1px solid rgba(226, 215, 200, .9);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 24px 55px rgba(34, 25, 17, .15);
}

.availability-box .field {
    margin: 0;
}

.lodge-introduction {
    position: relative;
    overflow: hidden;
    padding: 112px 24px 52px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 12%, rgba(255,90,31,.09), transparent 27%),
        linear-gradient(180deg, rgba(249,245,237,.88), rgba(249,245,237,.94)),
        url("../images/website/lodge-lounge.jpg") center 58% / cover;
    background-blend-mode: normal;
}

.lodge-introduction::before,
.lodge-introduction::after {
    position: absolute;
    border: 1px solid rgba(89,74,57,.08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.lodge-introduction::before {
    top: 60px;
    left: -115px;
    width: 270px;
    height: 270px;
}

.lodge-introduction::after {
    right: -90px;
    bottom: -125px;
    width: 310px;
    height: 310px;
    box-shadow: 0 0 0 38px rgba(255,90,31,.018);
}

.introduction-depth-scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.introduction-depth-scene > span {
    position: absolute;
    display: block;
    will-change: transform;
}

.introduction-depth-sun {
    top: 84px;
    left: 50%;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(210, 99, 44, .12);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 162, 100, .12), rgba(255, 174, 116, .035) 55%, transparent 70%);
    transform: translate3d(-50%, var(--introduction-back-y, 0), 0);
}

.introduction-depth-ridge {
    right: -7%;
    bottom: -85px;
    left: -7%;
    border-radius: 48% 52% 0 0 / 100% 100% 0 0;
    transform-origin: center bottom;
}

.introduction-depth-ridge-back {
    height: 245px;
    opacity: .12;
    background: #806f59;
    clip-path: polygon(0 56%, 11% 36%, 23% 61%, 36% 30%, 47% 55%, 61% 25%, 74% 59%, 88% 34%, 100% 53%, 100% 100%, 0 100%);
    transform: translate3d(0, var(--introduction-back-y, 0), 0);
}

.introduction-depth-ridge-front {
    bottom: -125px;
    height: 250px;
    opacity: .09;
    background: #d85a23;
    clip-path: polygon(0 50%, 14% 30%, 27% 57%, 43% 25%, 57% 52%, 72% 34%, 86% 59%, 100% 38%, 100% 100%, 0 100%);
    transform: translate3d(0, var(--introduction-front-y, 0), 0);
}

.introduction-depth-baobab {
    bottom: 30px;
    left: clamp(22px, 8vw, 125px);
    width: 38px;
    height: 205px;
    opacity: .11;
    border-radius: 55% 45% 14% 18% / 12% 18% 4% 5%;
    background: #302a23;
    transform: translate3d(0, var(--introduction-tree-y, 0), 0);
}

.introduction-depth-baobab::before {
    position: absolute;
    top: -46px;
    left: 50%;
    width: 148px;
    height: 92px;
    border-radius: 48% 52% 46% 54%;
    background: #302a23;
    box-shadow:
        -55px 18px 0 -18px #302a23,
        58px 13px 0 -16px #302a23,
        -24px -18px 0 -15px #302a23,
        29px -20px 0 -18px #302a23;
    content: "";
    transform: translateX(-50%);
}

.introduction-depth-baobab::after {
    position: absolute;
    top: -10px;
    left: -52px;
    width: 142px;
    height: 8px;
    border-radius: 50%;
    background: #302a23;
    box-shadow: 0 -24px 0 -2px #302a23;
    content: "";
    transform: rotate(-7deg);
}

.lodge-introduction-inner {
    position: relative;
    z-index: 2;
    width: min(900px, 100%);
    margin: auto;
}

.lodge-introduction-name {
    display: block;
    margin-bottom: 12px;
    color: var(--orange-dark);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.lodge-introduction .eyebrow {
    justify-content: center;
}

.lodge-introduction h2 {
    max-width: 790px;
    margin: 14px auto 20px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.25rem, 5vw, 4.35rem);
    font-weight: 500;
    line-height: 1.04;
}

.lodge-introduction-mark {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: 0 auto 24px;
    border: 1px solid rgba(255,90,31,.35);
    border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
    color: var(--orange-dark);
    background: rgba(255,255,255,.55);
    box-shadow: 0 0 0 7px rgba(255,90,31,.045);
}

.lodge-introduction-mark span {
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.lodge-introduction-copy {
    display: grid;
    gap: 14px;
}

.lodge-introduction-copy p {
    max-width: 830px;
    margin: auto;
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.85;
}

.lodge-introduction-values {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 27px;
}

.lodge-introduction-values span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    background: rgba(255,255,255,.56);
    font-size: .69rem;
    font-weight: 800;
}

.lodge-introduction-values span::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    content: "";
}

.lodge-introduction + .public-section {
    padding-top: 55px;
}

.scroll-reveal-ready .scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity .82s cubic-bezier(.2,.72,.28,1),
        transform .82s cubic-bezier(.2,.72,.28,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.scroll-reveal-ready .scroll-reveal.reveal-left {
    transform: translate3d(-34px, 0, 0);
}

.scroll-reveal-ready .scroll-reveal.reveal-right {
    transform: translate3d(34px, 0, 0);
}

.scroll-reveal-ready .scroll-reveal.reveal-scale {
    transform: scale(.94);
}

.scroll-reveal-ready .scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal-ready .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.public-section {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 90px 0;
}

.section-heading {
    max-width: 700px;
    margin-bottom: 35px;
}

.section-heading h2 {
    margin-bottom: 13px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
}

.section-heading p {
    color: var(--muted);
}

.room-types-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.public-room-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.room-image-placeholder {
    position: relative;
    height: 230px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(16,16,15,.88), rgba(58,42,28,.84)),
        var(--ink);
}

.room-image-placeholder::before {
    width: 160px;
    height: 160px;
    border: 30px solid rgba(255, 90, 31, .22);
    border-radius: 50%;
    content: "";
}

.room-image-placeholder span {
    position: absolute;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.1rem;
}

.room-media-gallery {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: var(--ink);
}

.room-media-main-wrap,
.room-media-main {
    width: 100%;
    height: 100%;
}

.room-media-main {
    display: block;
    object-fit: cover;
}

.room-media-count {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #fff;
    background: rgba(18, 17, 15, .72);
    font-size: .68rem;
    font-weight: 800;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.room-media-fallback-label {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    color: #fff;
    background: rgba(18, 17, 15, .62);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.room-media-thumbs {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 5px;
    border-radius: 10px;
    background: rgba(18, 17, 15, .66);
    scrollbar-width: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.room-media-thumbs::-webkit-scrollbar {
    display: none;
}

.room-media-thumb {
    width: 43px;
    height: 34px;
    flex: 0 0 43px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    opacity: .7;
}

.room-media-thumb.active {
    border-color: var(--orange);
    opacity: 1;
}

.room-media-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.room-media-gallery.compact,
.room-image-placeholder.compact {
    height: 175px;
    margin-bottom: 16px;
    border-radius: 12px;
}

.public-room-card-body {
    padding: 22px;
}

.public-room-card-body h3 {
    margin-bottom: 8px;
    font-size: 1.28rem;
}

.public-room-card-body p {
    min-height: 48px;
    color: var(--muted);
    font-size: .86rem;
}

.amenity-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 20px;
}

.amenity-chip {
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--ink-soft);
    background: var(--ivory);
    font-size: .7rem;
}

.room-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.room-price {
    display: grid;
}

.room-price strong {
    color: var(--orange-dark);
    font-size: 1.28rem;
}

.room-price small {
    color: var(--muted);
}

.activities-section {
    position: relative;
    scroll-margin-top: 24px;
    overflow: hidden;
    padding: 92px 24px 96px;
    color: #fff;
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 90, 31, .16), transparent 28%),
        radial-gradient(circle at 94% 90%, rgba(184, 143, 85, .14), transparent 30%),
        #171714;
}

.booking-page-hero {
    position: relative;
    min-height: 680px;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(450px, .72fr);
    align-items: center;
    gap: clamp(48px, 7vw, 95px);
    overflow: hidden;
    padding: 80px max(24px, calc((100% - 1180px) / 2)) 108px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(15,14,12,.95), rgba(20,18,15,.73) 52%, rgba(20,18,15,.36)),
        linear-gradient(0deg, rgba(18,17,14,.58), transparent 55%),
        url("../images/website/room-deluxe.jpg") center 58% / cover;
}

.booking-page-hero::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 82% 24%, rgba(255,105,45,.21), transparent 27%),
        repeating-linear-gradient(120deg, transparent 0 62px, rgba(255,255,255,.022) 63px 68px);
    content: "";
}

.booking-page-hero::after {
    position: absolute;
    right: -8%;
    bottom: -62px;
    left: -8%;
    height: 160px;
    opacity: .28;
    background: repeating-linear-gradient(99deg, transparent 0 21px, #171714 22px 26px, transparent 27px 44px);
    clip-path: polygon(0 100%, 0 70%, 7% 39%, 14% 79%, 21% 31%, 28% 75%, 36% 44%, 43% 82%, 51% 27%, 59% 77%, 67% 38%, 75% 83%, 83% 31%, 91% 75%, 100% 46%, 100% 100%);
    content: "";
}

.booking-page-copy,
.booking-start-card {
    position: relative;
    z-index: 2;
}

.booking-page-copy .eyebrow {
    color: #ff8d58;
}

.booking-page-copy h1 {
    max-width: 690px;
    margin: 12px 0 21px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.3rem, 6.6vw, 6.2rem);
    font-weight: 500;
    line-height: .94;
}

.booking-page-copy h1 em {
    color: var(--orange);
    font-weight: 500;
}

.booking-page-copy > p {
    max-width: 560px;
    color: rgba(255,255,255,.72);
    font-size: 1rem;
}

.booking-page-promises {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 27px;
}

.booking-page-promises span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.06);
    font-size: .66rem;
    font-weight: 750;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.booking-page-promises span::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--orange);
    content: "";
}

.booking-start-card {
    padding: clamp(25px, 3vw, 38px);
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 26px;
    color: var(--ink);
    background: rgba(255,253,249,.94);
    box-shadow: 0 32px 80px rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.booking-start-card::before {
    position: absolute;
    z-index: -1;
    top: 20px;
    right: -17px;
    bottom: -17px;
    left: 20px;
    border: 1px solid rgba(255,255,255,.19);
    border-radius: inherit;
    content: "";
}

.booking-start-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
}

.booking-start-card-head > span {
    width: 48px;
    height: 48px;
    display: grid;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    font-size: .7rem;
    font-weight: 900;
    box-shadow: 0 9px 20px rgba(216,76,25,.22);
}

.booking-start-card-head small {
    display: block;
    margin-bottom: 3px;
    color: var(--orange-dark);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.booking-start-card-head h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 500;
}

.booking-start-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.booking-room-preference {
    grid-column: 1 / -1;
}

.booking-start-card .field span small {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 500;
}

.booking-start-submit {
    width: 100%;
    margin-top: 17px;
}

.booking-start-submit span {
    margin-left: 7px;
    font-size: 1rem;
}

.booking-start-note {
    margin-top: 11px;
    color: var(--muted);
    font-size: .67rem;
    text-align: center;
}

.booking-journey-section {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 94px 0 102px;
}

.booking-journey-heading {
    max-width: 680px;
    margin: 0 auto 35px;
    text-align: center;
}

.booking-journey-heading .eyebrow {
    justify-content: center;
}

.booking-journey-heading h2 {
    margin-top: 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.3rem, 4.4vw, 3.85rem);
    font-weight: 500;
    line-height: 1.05;
}

.booking-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.booking-journey-grid article {
    display: flex;
    gap: 15px;
    padding: 27px 24px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: rgba(255,255,255,.78);
    box-shadow: var(--shadow-sm);
}

.booking-journey-grid article > span {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid rgba(255,90,31,.26);
    border-radius: 50%;
    color: var(--orange-dark);
    background: var(--paper);
    font-size: .62rem;
    font-weight: 900;
}

.booking-journey-grid h3 {
    margin: 3px 0 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.booking-journey-grid p {
    color: var(--muted);
    font-size: .76rem;
}

.booking-inspiration {
    width: min(1120px, calc(100% - 48px));
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: clamp(40px, 7vw, 84px);
    margin: 0 auto;
    padding: 0 0 106px;
}

.booking-inspiration-image {
    position: relative;
    height: 470px;
}

.booking-inspiration-image::before {
    position: absolute;
    top: 26px;
    right: -17px;
    bottom: -17px;
    left: 26px;
    border: 1px solid rgba(255,90,31,.2);
    border-radius: 25px;
    content: "";
}

.booking-inspiration-image img {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: 8px solid var(--paper);
    border-radius: 25px;
    box-shadow: 0 26px 62px rgba(44,32,21,.17);
}

.booking-inspiration-copy h2 {
    margin: 10px 0 16px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.3rem, 4vw, 3.7rem);
    font-weight: 500;
    line-height: 1.04;
}

.booking-inspiration-copy > p {
    color: var(--muted);
}

.booking-inspiration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.contact-page-hero {
    position: relative;
    min-height: 535px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 55px;
    overflow: hidden;
    padding: 82px max(24px, calc((100% - 1180px) / 2)) 118px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(15,14,12,.94), rgba(20,18,15,.7) 54%, rgba(20,18,15,.25)),
        linear-gradient(0deg, rgba(18,17,14,.62), transparent 56%),
        url("../images/website/lodge-lounge.jpg") center 55% / cover;
}

.contact-page-hero::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 83% 35%, rgba(255, 104, 45, .22), transparent 28%),
        repeating-linear-gradient(122deg, transparent 0 65px, rgba(255,255,255,.022) 66px 71px);
    content: "";
}

.contact-page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.contact-page-hero .eyebrow {
    color: #ff8e5a;
}

.contact-page-hero h1 {
    max-width: 790px;
    margin: 12px 0 21px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.2rem, 7vw, 6.35rem);
    font-weight: 500;
    line-height: .95;
}

.contact-page-hero h1 em {
    color: var(--orange);
    font-weight: 500;
}

.contact-page-hero p {
    max-width: 620px;
    color: rgba(255,255,255,.74);
    font-size: 1.04rem;
}

.contact-page-compass {
    position: relative;
    z-index: 2;
    width: 190px;
    height: 190px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.27);
    border-radius: 50%;
    color: #fff;
    background: rgba(21,19,15,.28);
    box-shadow: 0 0 0 22px rgba(255,255,255,.035), 0 24px 60px rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

.contact-page-compass::before,
.contact-page-compass::after {
    position: absolute;
    background: rgba(255,255,255,.18);
    content: "";
}

.contact-page-compass::before {
    width: 1px;
    height: 150px;
}

.contact-page-compass::after {
    width: 150px;
    height: 1px;
}

.contact-page-compass > span {
    position: absolute;
    top: 15px;
    color: #ff8e5a;
    font-size: .68rem;
    font-weight: 900;
}

.contact-page-compass > i {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 82px;
    background: linear-gradient(180deg, var(--orange) 0 48%, rgba(255,255,255,.84) 49% 100%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transform: rotate(24deg);
    animation: contact-compass-breathe 4.5s ease-in-out infinite alternate;
}

.contact-page-compass > small {
    position: absolute;
    bottom: 20px;
    color: rgba(255,255,255,.68);
    font-size: .55rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

@keyframes contact-compass-breathe {
    from {
        transform: rotate(19deg) scale(.96);
    }
    to {
        transform: rotate(29deg) scale(1.04);
    }
}

.contact-details-section {
    position: relative;
    z-index: 3;
    width: min(1120px, calc(100% - 48px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: -58px auto 0;
}

.contact-detail-card {
    min-width: 0;
    padding: 27px 26px;
    border: 1px solid rgba(220,210,195,.9);
    border-radius: 19px;
    background: rgba(255,253,249,.94);
    box-shadow: 0 22px 48px rgba(39,29,20,.13);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.contact-detail-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 17px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    box-shadow: 0 8px 18px rgba(216,76,25,.2);
}

.contact-detail-card > small {
    display: block;
    margin-bottom: 5px;
    color: var(--orange-dark);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-detail-card h2 {
    margin-bottom: 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 500;
}

.contact-detail-card a,
.contact-detail-card > span:last-child {
    display: block;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: .78rem;
}

.contact-detail-card a:hover {
    color: var(--orange-dark);
}

.contact-page-shell {
    width: min(1120px, calc(100% - 48px));
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(40px, 7vw, 88px);
    margin: 0 auto;
    padding: 100px 0 108px;
}

.contact-page-copy h2 {
    max-width: 520px;
    margin: 10px 0 17px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.35rem, 4.5vw, 4rem);
    font-weight: 500;
    line-height: 1.03;
}

.contact-page-copy > p {
    max-width: 520px;
    color: var(--muted);
}

.contact-assurance-list {
    display: grid;
    gap: 12px;
    margin: 28px 0;
}

.contact-assurance-list > span {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-soft);
    font-size: .8rem;
    font-weight: 700;
}

.contact-assurance-list i {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid rgba(255,90,31,.28);
    border-radius: 50%;
    color: var(--orange-dark);
    background: rgba(255,255,255,.7);
    font-size: .61rem;
    font-style: normal;
    font-weight: 900;
}

.contact-whatsapp-link {
    display: grid;
    gap: 4px;
    padding: 17px 19px;
    border: 1px solid rgba(46,143,82,.2);
    border-radius: 15px;
    color: #1d5632;
    background: rgba(58,174,99,.075);
}

.contact-whatsapp-link strong {
    font-size: .8rem;
}

.contact-whatsapp-link span {
    font-size: .72rem;
}

.contact-form-card {
    position: relative;
    padding: clamp(24px, 4vw, 39px);
    border: 1px solid rgba(220,210,195,.95);
    border-radius: 25px;
    background: rgba(255,253,249,.96);
    box-shadow: 0 28px 70px rgba(46,33,21,.15);
}

.contact-form-card::before {
    position: absolute;
    z-index: -1;
    top: 24px;
    right: -18px;
    bottom: -18px;
    left: 24px;
    border: 1px solid rgba(255,90,31,.16);
    border-radius: 25px;
    content: "";
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.contact-message-field {
    grid-column: 1 / -1;
}

.contact-form-card textarea {
    width: 100%;
    min-height: 140px;
    resize: vertical;
}

.contact-form-card .field span small {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 500;
}

.contact-submit {
    width: 100%;
    margin-top: 16px;
}

.contact-submit span {
    margin-left: 7px;
    font-size: 1rem;
}

.contact-form-note {
    margin-top: 12px;
    color: var(--muted);
    font-size: .67rem;
    text-align: center;
}

.contact-honeypot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.contact-location-band {
    position: relative;
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    overflow: hidden;
    padding: 72px max(24px, calc((100% - 1120px) / 2));
    color: #fff;
    background:
        linear-gradient(90deg, rgba(17,16,13,.94), rgba(17,16,13,.57)),
        url("../images/website/safari-wildlife.jpg") center 52% / cover;
}

.contact-location-band::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 78% 30%, rgba(255,90,31,.2), transparent 30%);
    content: "";
}

.contact-location-band > * {
    position: relative;
    z-index: 1;
}

.contact-location-band .eyebrow {
    color: #ff8d58;
}

.contact-location-band h2 {
    max-width: 680px;
    margin-top: 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    font-weight: 500;
    line-height: 1.04;
}

.activities-page-hero {
    position: relative;
    min-height: 570px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 50px;
    overflow: hidden;
    padding: 86px max(24px, calc((100% - 1180px) / 2)) 112px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(14, 14, 12, .94) 0%, rgba(17, 16, 13, .76) 50%, rgba(17, 16, 13, .32) 100%),
        linear-gradient(0deg, rgba(17,16,13,.58), transparent 55%),
        url("../images/website/activities/game-drive.jpg") center 56% / cover;
}

.activities-page-hero::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 30%, rgba(255, 102, 44, .24), transparent 29%),
        repeating-linear-gradient(118deg, transparent 0 62px, rgba(255,255,255,.022) 63px 68px);
    content: "";
}

.activities-page-hero::after {
    position: absolute;
    right: -6%;
    bottom: -50px;
    left: -6%;
    height: 155px;
    opacity: .26;
    background: repeating-linear-gradient(98deg, transparent 0 20px, #171714 21px 25px, transparent 26px 42px);
    clip-path: polygon(0 100%, 0 74%, 6% 42%, 13% 80%, 20% 35%, 27% 77%, 35% 46%, 42% 81%, 50% 29%, 58% 76%, 66% 41%, 74% 82%, 82% 34%, 90% 78%, 100% 47%, 100% 100%);
    content: "";
}

.activities-page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.activities-page-hero .eyebrow {
    color: #ff8a55;
}

.activities-page-hero h1 {
    max-width: 760px;
    margin: 12px 0 20px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.15rem, 7vw, 6.5rem);
    font-weight: 500;
    line-height: .94;
}

.activities-page-hero p {
    max-width: 610px;
    color: rgba(255,255,255,.73);
    font-size: 1.04rem;
}

.activities-page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 30px;
}

.btn-ghost-light {
    border: 1px solid rgba(255,255,255,.42);
    color: #fff;
    background: rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.btn-ghost-light:hover {
    border-color: rgba(255,255,255,.75);
    color: #fff;
    background: rgba(255,255,255,.14);
}

.activities-page-hero-mark {
    position: relative;
    z-index: 2;
    width: 190px;
    height: 190px;
    display: grid;
    place-content: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    text-align: center;
    background: rgba(20,18,15,.26);
    box-shadow: 0 0 0 22px rgba(255,255,255,.035), 0 24px 55px rgba(0,0,0,.24);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

.activities-page-hero-mark span {
    color: var(--orange);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.6rem;
    line-height: .8;
}

.activities-page-hero-mark small {
    margin-top: 12px;
    color: rgba(255,255,255,.8);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.activities-page-listing {
    padding-top: 78px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.activities-section::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(115deg, transparent 0 48%, rgba(255, 255, 255, .025) 48% 48.4%, transparent 48.4%),
        repeating-linear-gradient(0deg, transparent 0 48px, rgba(255, 255, 255, .018) 49px);
    content: "";
}

.activities-inner {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.activities-heading {
    max-width: 740px;
    margin: 0 auto 42px;
    text-align: center;
}

.activities-heading .eyebrow {
    color: #ff7a45;
}

.activities-heading h2 {
    margin: 10px 0 14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 4.5vw, 3.85rem);
    font-weight: 500;
    line-height: 1.04;
}

.activities-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .68);
}

.activities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    perspective: 1600px;
    transform-style: preserve-3d;
}

.activity-card {
    --activity-curve: 0deg;
    --activity-arc: 0px;
    --activity-z: 0px;
    position: relative;
    min-height: 440px;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 22px;
    background: #27251f;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .25);
    transform: perspective(1100px) translate3d(0, var(--activity-arc), var(--activity-z)) rotateX(var(--tilt-x, 0deg)) rotateY(calc(var(--activity-curve) + var(--tilt-y, 0deg)));
    transform-style: preserve-3d;
    transition: transform .38s cubic-bezier(.2, .72, .28, 1), border-color .35s ease, box-shadow .35s ease;
    will-change: transform;
}

.activity-card:nth-child(3n + 1) {
    --activity-curve: 4deg;
    --activity-arc: 10px;
}

.activity-card:nth-child(3n + 2) {
    --activity-z: 22px;
    --activity-arc: -6px;
}

.activity-card:nth-child(3n) {
    --activity-curve: -4deg;
    --activity-arc: 10px;
}

.activity-card::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(12, 12, 10, .04) 5%, rgba(12, 12, 10, .18) 38%, rgba(12, 12, 10, .94) 100%);
    content: "";
}

.activity-card > img {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: translate3d(var(--depth-image-x, 0), var(--depth-image-y, 0), 0) scale(1.035);
    transition: transform .75s cubic-bezier(.2, .65, .25, 1), filter .45s ease;
}

.activity-card:nth-child(1) > img {
    object-position: 52% center;
}

.activity-card:nth-child(4) > img {
    object-position: center 56%;
}

.activity-card-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px 28px 27px;
}

.activity-card-number {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .72);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.activity-card-number i {
    width: 26px;
    height: 1px;
    display: inline-block;
    background: var(--orange);
}

.activity-card h3 {
    margin-bottom: 9px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    font-weight: 500;
}

.activity-card p {
    max-width: 330px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .74);
    font-size: .79rem;
    line-height: 1.6;
}

.activity-card-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.activity-card-link span {
    color: var(--orange);
    font-size: 1.05rem;
    transition: transform .25s ease;
}

.activity-card:hover > img {
    filter: saturate(1.08);
    transform: translate3d(var(--depth-image-x, 0), var(--depth-image-y, 0), 0) scale(1.095);
}

.activity-card:hover .activity-card-link span {
    transform: translateX(5px);
}

.activity-card-link:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--orange);
    outline-offset: 6px;
}

.activities-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 34px;
}

.activities-cta > span {
    color: rgba(255, 255, 255, .67);
    font-size: .8rem;
}

.activities-section .btn-outline {
    border-color: rgba(255,255,255,.34);
    color: #fff;
    background: rgba(255,255,255,.055);
}

.activities-section .btn-outline:hover {
    border-color: rgba(255,255,255,.68);
    color: #fff;
    background: rgba(255,255,255,.11);
}

.activity-planning-section {
    width: min(1080px, calc(100% - 48px));
    margin: 0 auto;
    padding: 92px 0 98px;
    text-align: center;
}

.activity-planning-heading {
    max-width: 680px;
    margin: 0 auto 35px;
}

.activity-planning-heading .eyebrow {
    justify-content: center;
}

.activity-planning-heading h2 {
    margin: 10px 0 13px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 4.5vw, 3.75rem);
    font-weight: 500;
    line-height: 1.06;
}

.activity-planning-heading p {
    color: var(--muted);
}

.activity-planning-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.activity-planning-grid::before {
    position: absolute;
    top: 36px;
    right: 15%;
    left: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,90,31,.4), transparent);
    content: "";
}

.activity-planning-card {
    position: relative;
    z-index: 1;
    padding: 28px 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.78);
    box-shadow: var(--shadow-sm);
}

.activity-planning-card > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    border: 1px solid rgba(255,90,31,.3);
    border-radius: 50%;
    color: var(--orange-dark);
    background: var(--paper);
    font-size: .69rem;
    font-weight: 900;
    box-shadow: 0 0 0 7px rgba(255,90,31,.045);
}

.activity-planning-card h3 {
    margin-bottom: 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.3rem;
}

.activity-planning-card p {
    color: var(--muted);
    font-size: .8rem;
}

.activities-section::after {
    position: absolute;
    right: -12%;
    bottom: -180px;
    left: -12%;
    height: 300px;
    opacity: .12;
    pointer-events: none;
    background: repeating-linear-gradient(98deg, transparent 0 22px, #f5c28f 23px 25px, transparent 26px 44px);
    clip-path: polygon(0 100%, 0 74%, 7% 39%, 14% 81%, 21% 32%, 29% 75%, 37% 45%, 44% 82%, 52% 28%, 60% 78%, 68% 38%, 76% 84%, 84% 31%, 92% 77%, 100% 44%, 100% 100%);
    content: "";
    transform: translate3d(0, var(--activities-pattern-y, 0), 0);
    transition: transform .1s linear;
}

.public-room-card.depth-card {
    position: relative;
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
    transform-style: preserve-3d;
    transition: transform .34s cubic-bezier(.2, .72, .28, 1), box-shadow .34s ease, border-color .34s ease;
    will-change: transform;
}

.public-room-card.depth-card::after,
.activity-card::before {
    position: absolute;
    z-index: 5;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--depth-glow-x, 50%) var(--depth-glow-y, 50%), rgba(255,255,255,.25), transparent 32%);
    content: "";
    opacity: 0;
    transition: opacity .3s ease;
}

.public-room-card.depth-card.is-tilting,
.activity-card.is-tilting {
    border-color: rgba(255, 116, 61, .38);
    box-shadow: 0 28px 65px rgba(42, 30, 20, .22);
}

.activity-card.is-tilting {
    --activity-z: 38px;
    box-shadow: 0 32px 70px rgba(0, 0, 0, .38);
}

.public-room-card.depth-card.is-tilting::after,
.activity-card.is-tilting::before {
    opacity: .42;
}

.public-room-card.depth-card .room-media-main {
    transform: translate3d(var(--depth-image-x, 0), var(--depth-image-y, 0), 0) scale(1.055);
    transition: transform .55s cubic-bezier(.2, .72, .28, 1);
    will-change: transform;
}

.scroll-reveal-ready .public-room-card.depth-card.scroll-reveal {
    transform: perspective(1100px) translate3d(0, 28px, 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.scroll-reveal-ready .public-room-card.depth-card.scroll-reveal.is-visible {
    transform: perspective(1100px) translate3d(0, 0, 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.scroll-reveal-ready .activity-card.scroll-reveal {
    transform: perspective(1100px) translate3d(0, calc(var(--activity-arc) + 28px), var(--activity-z)) rotateX(var(--tilt-x, 0deg)) rotateY(calc(var(--activity-curve) + var(--tilt-y, 0deg)));
}

.scroll-reveal-ready .activity-card.scroll-reveal.is-visible {
    transform: perspective(1100px) translate3d(0, var(--activity-arc), var(--activity-z)) rotateX(var(--tilt-x, 0deg)) rotateY(calc(var(--activity-curve) + var(--tilt-y, 0deg)));
}

.safari-story {
    padding-top: 24px;
}

.safari-story-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(38px, 7vw, 90px);
}

.safari-story-copy h2 {
    max-width: 530px;
    margin: 8px 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.45rem);
    font-weight: 500;
    line-height: 1.08;
}

.safari-story-copy > p {
    max-width: 520px;
    color: var(--muted);
}

.safari-story-points {
    display: grid;
    gap: 9px;
    margin: 25px 0 28px;
}

.safari-story-points span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-soft);
    font-size: .84rem;
    font-weight: 700;
}

.safari-story-points span::before {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 5px rgba(255, 90, 31, .1);
    content: "";
}

.safari-story-gallery {
    position: relative;
    min-height: 530px;
    perspective: 1300px;
    transform-style: preserve-3d;
}

.safari-story-gallery figure {
    position: absolute;
    overflow: hidden;
    margin: 0;
    border: 8px solid var(--paper);
    border-radius: 24px;
    background: var(--ink);
    box-shadow: 0 24px 60px rgba(42, 30, 20, .18);
}

.safari-story-gallery img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .72, .28, 1), filter .5s ease;
}

.safari-story-gallery figcaption {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    padding: 9px 11px;
    border-radius: 10px;
    color: #fff;
    background: rgba(18, 17, 15, .67);
    font-size: .7rem;
    font-weight: 700;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.safari-story-main {
    inset: 0 105px 55px 0;
}

.safari-story-main img {
    transform: scale(1.035) translate3d(-5px, 0, 0);
}

.safari-story-secondary {
    right: 0;
    bottom: 0;
    width: 48%;
    height: 48%;
}

.safari-story-secondary img {
    transform: scale(1.075) translate3d(5px, -2px, 0);
}

.safari-story-gallery:hover .safari-story-main img {
    filter: saturate(1.06);
    transform: scale(1.075) translate3d(7px, -3px, 0);
}

.safari-story-gallery:hover .safari-story-secondary img {
    filter: saturate(1.1);
    transform: scale(1.12) translate3d(-7px, 4px, 0);
}

.feature-band {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 12% 40%, rgba(255,90,31,.2), transparent 28%),
        var(--ink);
}

.feature-band::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(18,17,15,.97), rgba(18,17,15,.82)),
        url("../images/website/safari-wildlife.jpg") center 58% / cover;
    content: "";
}

.feature-band-inner {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 48px));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin: auto;
    padding: 62px 0;
}

.public-feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
}

.public-feature-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--orange);
    background: rgba(255,255,255,.08);
    font-size: 1.2rem;
}

.public-feature h3 {
    margin-bottom: 5px;
    font-size: 1rem;
}

.public-feature p {
    margin: 0;
    color: rgba(255,255,255,.57);
    font-size: .8rem;
}

.public-footer {
    padding: 48px 24px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    text-align: center;
}

.public-room-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.section-footer-action {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.rooms-listing-hero {
    position: relative;
    min-height: 335px;
    display: grid;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(18,17,15,.91), rgba(18,17,15,.45)),
        url("../images/website/lodge-lounge.jpg") center 56% / cover;
}

.rooms-listing-hero::after {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(125deg, transparent 0 58px, rgba(255,255,255,.025) 59px 65px),
        radial-gradient(circle at 78% 30%, rgba(255,90,31,.2), transparent 30%);
    content: "";
}

.rooms-listing-hero-inner {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 48px));
    margin: auto;
    padding: 70px 0 92px;
}

.rooms-listing-hero h1 {
    max-width: 750px;
    margin: 8px 0 15px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.65rem, 6vw, 5rem);
    font-weight: 500;
    line-height: 1;
}

.rooms-listing-hero p {
    max-width: 640px;
    margin: 0;
    color: rgba(255,255,255,.74);
    font-size: 1rem;
}

.room-catalogue-shell {
    width: min(1180px, calc(100% - 48px));
    margin: -42px auto 90px;
}

.room-filter-panel {
    position: relative;
    z-index: 3;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 24px 55px rgba(34, 25, 17, .14);
}

.room-filter-heading,
.room-results-heading,
.room-listing-card-head,
.room-listing-actions,
.room-detail-heading,
.room-booking-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.room-filter-heading {
    margin-bottom: 14px;
}

.room-filter-heading h2,
.room-results-heading h2 {
    margin-top: 3px;
    font-size: 1.12rem;
}

.filter-reset {
    color: var(--orange-dark);
    font-size: .78rem;
    font-weight: 800;
}

.room-filter-grid {
    display: grid;
    grid-template-columns: minmax(190px, 1.55fr) repeat(2, minmax(125px, 1fr)) repeat(2, minmax(105px, .75fr)) minmax(145px, 1fr) auto;
    align-items: end;
    gap: 9px;
}

.room-filter-grid .field {
    margin: 0;
}

.room-filter-grid .field > span {
    font-size: .67rem;
}

.room-filter-grid input,
.room-filter-grid select {
    min-width: 0;
}

.room-filter-submit {
    white-space: nowrap;
}

.room-results-heading {
    align-items: end;
    margin: 38px 0 18px;
}

.room-results-heading h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.85rem;
    font-weight: 500;
}

.room-results-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .76rem;
}

.room-listing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.room-listing-card {
    display: flex;
    flex-direction: column;
}

.room-listing-card .room-media-gallery {
    height: 285px;
}

.room-listing-card .public-room-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.room-listing-card-head {
    align-items: flex-start;
}

.room-code {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--orange-dark);
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.room-listing-card-head h3 {
    margin: 0;
}

.room-price-right {
    flex: 0 0 auto;
    text-align: right;
}

.room-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 15px;
    color: var(--ink-soft);
    font-size: .73rem;
    font-weight: 700;
}

.room-facts span {
    position: relative;
    padding-left: 12px;
}

.room-facts span::before {
    position: absolute;
    top: .43em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--orange);
    content: "";
}

.room-listing-actions {
    align-items: stretch;
    margin-top: auto;
    padding-top: 4px;
}

.room-listing-actions .btn {
    flex: 1 1 auto;
}

.room-results-empty {
    margin-bottom: 0;
}

.public-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    color: var(--muted);
    font-size: .73rem;
    font-weight: 700;
}

.public-breadcrumbs a {
    color: var(--orange-dark);
}

.room-detail-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 34px auto 90px;
}

.room-detail-heading {
    align-items: flex-end;
    margin-bottom: 26px;
}

.room-detail-heading h1 {
    margin: 7px 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.65rem, 6vw, 5.2rem);
    font-weight: 500;
    line-height: 1;
}

.room-detail-heading p {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
}

.room-detail-rate {
    display: grid;
    flex: 0 0 auto;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--paper);
    text-align: right;
}

.room-detail-rate strong {
    color: var(--orange-dark);
    font-size: 1.55rem;
}

.room-detail-rate small {
    color: var(--muted);
    font-size: .66rem;
}

.room-detail-gallery .room-media-gallery {
    height: 560px;
    border-radius: 25px;
    box-shadow: 0 25px 65px rgba(42,30,20,.16);
}

.room-detail-gallery .room-media-thumbs {
    right: 14px;
    bottom: 14px;
    left: 14px;
    gap: 7px;
    padding: 7px;
}

.room-detail-gallery .room-media-thumb {
    width: 65px;
    height: 48px;
    flex-basis: 65px;
}

.room-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: clamp(30px, 6vw, 72px);
    margin-top: 50px;
}

.room-detail-content {
    min-width: 0;
}

.room-detail-section {
    padding: 0 0 42px;
}

.room-detail-section + .room-detail-section {
    padding-top: 38px;
    border-top: 1px solid var(--line);
}

.room-detail-section h2,
.room-booking-card h2 {
    margin: 7px 0 13px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    font-weight: 500;
    line-height: 1.1;
}

.room-detail-section > p,
.room-booking-card > p {
    color: var(--muted);
}

.room-detail-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.room-detail-facts article {
    min-height: 96px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
}

.room-detail-facts small {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.room-detail-facts strong {
    font-size: .85rem;
}

.room-detail-amenities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 23px;
}

.room-detail-amenities span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--ink-soft);
    background: rgba(255,255,255,.6);
    font-size: .8rem;
    font-weight: 700;
}

.room-detail-amenities i {
    width: 24px;
    height: 24px;
    display: grid;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--orange);
    font-size: .7rem;
    font-style: normal;
}

.room-booking-card {
    position: sticky;
    top: 20px;
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 22px 55px rgba(42,30,20,.13);
}

.room-booking-card form {
    margin-top: 20px;
}

.room-booking-card .field {
    margin-bottom: 14px;
}

.room-booking-price {
    margin: 5px 0 16px;
    padding: 13px 0;
    border-block: 1px solid var(--line);
    color: var(--muted);
    font-size: .75rem;
}

.room-booking-price strong {
    color: var(--orange-dark);
    font-size: 1.2rem;
}

.room-booking-note {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    text-align: center;
    font-size: .68rem;
}

.related-rooms-section {
    padding-top: 0;
}

.room-detail-not-found {
    width: min(680px, calc(100% - 40px));
    min-height: 65vh;
    display: grid;
    align-content: center;
    justify-items: start;
    margin: auto;
    padding: 70px 0;
}

.room-detail-not-found h1 {
    margin: 9px 0 13px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.3rem, 6vw, 4.6rem);
    font-weight: 500;
    line-height: 1.03;
}

.room-detail-not-found p {
    max-width: 570px;
    margin-bottom: 24px;
    color: var(--muted);
}

.booking-shell {
    width: min(1040px, calc(100% - 40px));
    margin: 42px auto 80px;
}

.booking-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 25px;
}

.booking-step {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
}

.booking-step::before {
    height: 5px;
    border-radius: 999px;
    background: #ddd3c5;
    content: "";
}

.booking-step.active,
.booking-step.done {
    color: var(--orange-dark);
}

.booking-step.active::before,
.booking-step.done::before {
    background: var(--orange);
}

.booking-summary {
    position: sticky;
    top: 94px;
}

.ticket {
    width: min(820px, calc(100% - 30px));
    margin: 35px auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow);
}

.ticket-accent {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 27px;
    color: #fff;
    background: var(--orange);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ticket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 27px;
    color: #fff;
    background-color: var(--ink);
    background-image: radial-gradient(circle at 82% 28%, rgba(245,102,29,.16) 0 2px, transparent 2.5px);
    background-size: 17px 17px;
}

.ticket-head img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 13px;
}

.ticket-head-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ticket-head h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
}

.ticket-head p {
    margin: 4px 0 0;
    color: rgba(255,255,255,.6);
    font-size: .75rem;
}

.ticket-reference {
    text-align: right;
}

.ticket-reference small {
    display: block;
    color: rgba(255,255,255,.55);
}

.ticket-reference strong {
    display: block;
    margin-top: 3px;
    color: var(--orange);
    font-size: 1.05rem;
}

.ticket-body {
    padding: 27px;
}

.ticket-welcome {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.ticket-welcome h2 {
    margin: 7px 0 5px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 4vw, 2rem);
}

.ticket-welcome p {
    margin: 0;
    color: var(--muted);
}

.ticket-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.ticket-field {
    display: grid;
    gap: 4px;
}

.ticket-field small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.barcode {
    min-height: 96px;
    display: grid;
    place-items: center;
    margin-top: 26px;
    padding: 12px;
    border: 1px dashed #cfc2b2;
    border-radius: 12px;
}

.barcode svg {
    max-width: 100%;
}

.ticket-note {
    margin-top: 20px;
    padding: 13px;
    border-left: 4px solid var(--orange);
    border-radius: 6px 10px 10px 6px;
    background: var(--orange-soft);
    font-size: .82rem;
}

.ticket-note strong,
.ticket-note span {
    display: block;
}

.ticket-note span {
    margin-top: 4px;
}

.ticket-arrival {
    display: grid;
    grid-template-columns: 110px 110px minmax(0, 1fr);
    gap: 1px;
    margin-top: 25px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--line);
}

.ticket-arrival > div {
    min-width: 0;
    padding: 13px 15px;
    background: #fbf8f3;
}

.ticket-arrival small,
.ticket-present small {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ticket-arrival strong {
    font-size: .83rem;
}

.ticket-validation {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(180px, .55fr);
    align-items: stretch;
    gap: 12px;
    margin-top: 18px;
}

.ticket-validation .barcode {
    margin-top: 0;
}

.ticket-present {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    border: 1px dashed #cfc2b2;
    border-radius: 12px;
    background: #faf7f2;
}

.ticket-present strong {
    font-size: .82rem;
}

.ticket-present span {
    margin-top: 6px;
    color: var(--orange-dark);
    font-size: .78rem;
    font-weight: 750;
}

.ticket-foot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .68rem;
}

.ticket-foot strong {
    color: var(--ink);
}

.ticket-print-panel {
    width: min(820px, calc(100% - 30px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: -17px auto 38px;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.ticket-print-panel div {
    display: grid;
    gap: 3px;
}

.ticket-print-panel span {
    color: var(--muted);
    font-size: .75rem;
}

.kuwa-swal {
    border-radius: 20px;
    font-family: inherit;
}

.required-star {
    margin-left: 2px;
    color: #c9302c;
    font-size: .92em;
    font-weight: 900;
    line-height: 1;
}

.email-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.email-metric-card {
    position: relative;
    min-width: 0;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 10px 13px 10px 17px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.email-metric-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #c49a36;
    content: "";
}

.email-metric-card.sent::before {
    background: #2f855a;
}

.email-metric-card.failed::before {
    background: #c24132;
}

.email-metric-card.transport::before {
    background: var(--orange);
}

.email-metric-card > span,
.email-metric-card > strong,
.email-metric-card > small {
    position: relative;
    z-index: 1;
    display: block;
}

.email-metric-card > span {
    color: var(--muted);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.email-metric-card > strong {
    margin: 1px 0;
    color: var(--ink);
    font-size: 1.65rem;
    line-height: 1;
}

.email-metric-card > small {
    overflow: hidden;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .email-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .email-metric-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .email-metric-card {
        min-height: 92px;
    }

    .ticket-print-panel {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Room catalogue management */
.room-management-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.room-management-toolbar h2 {
    margin-bottom: 3px;
    font-size: 1.15rem;
}

.room-management-toolbar p {
    margin: 0;
    font-size: .8rem;
}

.room-manager-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.room-manager-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.room-manager-cover {
    position: relative;
    height: 175px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 75% 30%, rgba(255,90,31,.25), transparent 35%),
        var(--ink);
}

.room-manager-cover > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-manager-cover > span {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
}

.room-manager-cover-meta {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.room-image-count {
    padding: 5px 8px;
    border-radius: 999px;
    color: #fff;
    background: rgba(18,17,15,.72);
    font-size: .68rem;
    font-weight: 800;
}

.room-manager-card .card-body {
    flex: 1;
}

.room-manager-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.room-manager-title .eyebrow {
    margin-bottom: 4px;
    font-size: .61rem;
}

.room-manager-title h3 {
    margin: 0;
    font-size: 1.02rem;
}

.room-manager-title > strong {
    color: var(--orange-dark);
    font-size: .96rem;
    text-align: right;
    white-space: nowrap;
}

.room-manager-title > strong small {
    display: block;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 600;
}

.room-manager-description {
    min-height: 38px;
    margin: 10px 0;
    color: var(--muted);
    font-size: .76rem;
}

.room-manager-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.room-manager-facts span {
    padding: 4px 7px;
    border-radius: 7px;
    color: var(--ink-soft);
    background: var(--ivory);
    font-size: .67rem;
    font-weight: 700;
}

.room-manager-card .amenity-list {
    margin: 10px 0 0;
}

.room-manager-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.amenity-library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.amenity-library-item {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
}

.amenity-library-item strong {
    font-size: .76rem;
}

.amenity-library-item small {
    color: var(--muted);
    font-size: .64rem;
}

.amenity-selector {
    margin: 2px 0 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.amenity-selector legend {
    padding: 0 6px;
    color: var(--ink-soft);
    font-size: .75rem;
    font-weight: 800;
}

.amenity-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.room-image-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.room-image-admin-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}

.room-image-admin-card > img {
    width: 100%;
    height: 135px;
    display: block;
    object-fit: cover;
}

.room-image-admin-card > div {
    padding: 9px;
}

.room-image-admin-card small {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: var(--muted);
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-image-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 0 !important;
}

.room-image-admin-actions form {
    flex: 1;
}

.room-image-admin-actions .btn {
    width: 100%;
}

.room-gallery-upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, .55fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 14px;
    padding: 13px;
    border: 1px dashed #d7cbbb;
    border-radius: 11px;
    background: #fbf8f2;
}

.room-gallery-upload .field {
    margin-bottom: 0;
}

.gallery-empty {
    display: grid;
    gap: 3px;
    padding: 20px;
    border: 1px dashed #d7cbbb;
    border-radius: 11px;
    color: var(--muted);
    text-align: center;
}

.gallery-empty strong {
    color: var(--ink);
}

/* Modal */
.modal-backdrop {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(18, 17, 15, .64);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.modal-backdrop.open {
    display: flex;
}

.modal {
    width: min(680px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 28px 70px rgba(0,0,0,.25);
}

.modal-lg {
    width: min(920px, 100%);
}

.modal-head {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.modal-head h2 {
    margin: 0;
    font-size: 1.2rem;
}

.modal-body {
    padding: 22px;
}

.modal-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 15px 22px;
    border-top: 1px solid var(--line);
    background: var(--paper);
}

.close-modal {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--muted);
    background: var(--ivory);
    cursor: pointer;
    font-size: 1.25rem;
}

/* Compact staff workspace */
.app-shell {
    --radius: 14px;
    --radius-sm: 9px;
    font-size: .92rem;
}

.app-shell .sidebar-brand {
    min-height: 70px;
    gap: 10px;
    padding: 10px 14px;
}

.app-shell .sidebar-brand img {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 10px;
}

.app-shell .sidebar-brand strong {
    font-size: .98rem;
}

.app-shell .sidebar-brand small {
    font-size: .62rem;
}

.app-shell .sidebar-nav {
    padding: 8px 9px;
}

.app-shell .nav-section-label {
    height: 21px;
    margin: 8px 10px 2px;
    font-size: .59rem;
}

.app-shell .nav-link {
    min-height: 37px;
    gap: 10px;
    margin: 2px 0;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: .81rem;
}

.app-shell .nav-icon {
    width: 22px;
    flex-basis: 22px;
    font-size: .98rem;
}

.app-shell .sidebar-footer {
    padding: 8px 9px;
}

.app-shell .topbar {
    min-height: 60px;
    gap: 14px;
    padding: 8px 20px;
}

.app-shell .topbar-left,
.app-shell .topbar-right {
    gap: 9px;
}

.app-shell .global-search {
    width: min(330px, 35vw);
}

.app-shell .global-search input {
    min-height: 38px;
    padding: 7px 10px 7px 36px;
    font-size: .82rem;
}

.app-shell .global-search::before {
    top: 8px;
    left: 12px;
    font-size: 1rem;
}

.app-shell .icon-btn {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 10px;
}

.app-shell .profile-trigger {
    min-height: 40px;
    gap: 8px;
    padding: 3px 8px 3px 4px;
    border-radius: 11px;
}

.app-shell .avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 8px;
    font-size: .7rem;
}

.app-shell .profile-trigger-info {
    min-width: 94px;
}

.app-shell .business-date strong {
    margin-top: 2px;
    font-size: .79rem;
}

.app-shell .app-content {
    padding: 18px 20px 40px;
}

.app-shell .page-header {
    gap: 16px;
    margin-bottom: 16px;
}

.app-shell .page-header .eyebrow {
    margin-bottom: 6px;
    font-size: .66rem;
}

.app-shell .page-header h1 {
    margin-bottom: 5px;
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}

.app-shell .page-header p {
    max-width: 680px;
    font-size: .82rem;
    line-height: 1.42;
}

.app-shell .page-actions {
    gap: 7px;
}

.app-shell .btn {
    min-height: 37px;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 9px;
    font-size: .82rem;
}

.app-shell .btn-sm {
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: .75rem;
}

.app-shell .field {
    gap: 5px;
    margin-bottom: 12px;
}

.app-shell .field > span,
.app-shell .field-label {
    font-size: .78rem;
}

.app-shell .field small {
    font-size: .7rem;
}

.app-shell input,
.app-shell select,
.app-shell textarea {
    min-height: 39px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: .82rem;
}

.app-shell textarea {
    min-height: 82px;
}

.app-shell input[type="checkbox"],
.app-shell input[type="radio"] {
    width: 16px;
    min-height: 16px;
}

.app-shell .checkbox {
    gap: 7px;
    font-size: .81rem;
}

.app-shell .form-grid {
    gap: 12px;
}

.app-shell .form-actions {
    gap: 8px;
    padding-top: 5px;
}

.app-shell .alert {
    gap: 8px;
    margin-bottom: 12px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: .81rem;
}

.app-shell .status-pill {
    gap: 5px;
    padding: 4px 7px;
    font-size: .66rem;
}

.app-shell .badge {
    min-width: 18px;
    min-height: 18px;
    padding: 1px 5px;
    font-size: .62rem;
}

.app-shell .quick-strip {
    gap: 10px;
    margin-bottom: 16px;
}

.app-shell .metric-card {
    min-height: 92px;
    padding: 10px 13px;
    border-radius: 14px;
}

.app-shell .metric-head {
    font-size: .72rem;
}

.app-shell .metric-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
}

.app-shell .metric-value {
    margin-top: 3px;
    font-size: clamp(1.25rem, 1.8vw, 1.58rem);
}

.app-shell .metric-foot {
    margin-top: 0;
    font-size: .68rem;
}

.app-shell .module-compact-metrics {
    margin-bottom: 12px;
}

.app-shell .module-compact-metrics .metric-card {
    min-height: 76px;
    padding: 7px 11px;
}

.app-shell .module-compact-metrics .metric-head {
    font-size: .68rem;
    line-height: 1.05;
}

.app-shell .module-compact-metrics .metric-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: .7rem;
}

.app-shell .module-compact-metrics .metric-value {
    margin-top: 1px;
    font-size: clamp(1.08rem, 1.45vw, 1.32rem);
    line-height: 1.05;
}

.app-shell .module-compact-metrics .metric-foot {
    margin-top: 1px;
    font-size: .61rem;
    line-height: 1.1;
}

.app-shell .accounting-compact-metrics {
    gap: 7px;
    margin-bottom: 10px;
}

.app-shell .accounting-compact-metrics .metric-card {
    min-height: 64px;
    padding: 6px 9px;
    border-radius: 11px;
}

.app-shell .accounting-compact-metrics .metric-card::after {
    right: -40px;
    bottom: -54px;
    transform: scale(.65);
}

.app-shell .accounting-compact-metrics .metric-head {
    gap: 6px;
    font-size: .61rem;
    line-height: 1;
}

.app-shell .accounting-compact-metrics .metric-icon {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    font-size: .6rem;
}

.app-shell .accounting-compact-metrics .metric-value {
    margin-top: 0;
    font-size: clamp(.94rem, 1.18vw, 1.08rem);
    line-height: 1.02;
}

.app-shell .accounting-compact-metrics .metric-foot {
    margin-top: 1px;
    font-size: .54rem;
    line-height: 1.05;
}

.accounting-filterbar .toolbar-group,
.table-filterbar .toolbar-group {
    flex-wrap: wrap;
    align-items: flex-end;
}

.accounting-filterbar label,
.table-filterbar label {
    display: grid;
    gap: 3px;
    min-width: 118px;
}

.accounting-filterbar label > span,
.table-filterbar label > span {
    color: var(--muted);
    font-size: .61rem;
    font-weight: 750;
    letter-spacing: .025em;
}

.accounting-filterbar input,
.accounting-filterbar select,
.table-filterbar input,
.table-filterbar select {
    min-height: 32px;
    padding: 5px 8px;
    font-size: .72rem;
}

.accounting-filterbar .filter-check {
    display: inline-flex;
    min-width: 145px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-height: 32px;
}

.accounting-filterbar .filter-check input {
    min-height: auto;
}

.app-shell .hr-compact-metrics .metric-card {
    min-height: 66px;
    padding: 7px 10px;
    border-radius: 10px;
}

.app-shell .hr-compact-metrics .metric-head {
    font-size: .58rem;
    line-height: 1;
}

.app-shell .hr-compact-metrics .metric-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: .55rem;
}

.app-shell .hr-compact-metrics .metric-value {
    margin-top: 0;
    font-size: 1rem;
    line-height: 1;
}

.app-shell .hr-compact-metrics .metric-foot {
    margin-top: 1px;
    font-size: .52rem;
    line-height: 1.05;
}

.hr-control-strip,
.roster-coverage-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.hr-control-strip > span,
.roster-coverage-strip > span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,.72);
}

.hr-control-strip small,
.roster-coverage-strip small {
    color: var(--muted);
    font-size: .6rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.hr-control-strip strong,
.roster-coverage-strip strong {
    font-size: .88rem;
    line-height: 1.1;
}

.roster-coverage-strip em {
    overflow: hidden;
    color: var(--muted);
    font-size: .58rem;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.roster-coverage-strip > span.today {
    border-color: rgba(255,106,22,.55);
    box-shadow: inset 0 0 0 1px rgba(255,106,22,.12);
}

.app-shell .dashboard-metrics .metric-card {
    min-height: 92px;
    padding: 10px 13px;
}

.app-shell .dashboard-metrics .metric-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
}

.app-shell .dashboard-metrics .metric-value {
    margin-top: 3px;
    font-size: clamp(1.25rem, 1.8vw, 1.58rem);
}

.app-shell .dashboard-metrics .metric-foot {
    margin-top: 0;
}

.app-shell .content-grid {
    gap: 14px;
}

.app-shell .content-grid > * {
    min-width: 0;
}

.app-shell .card {
    border-radius: 14px;
}

.app-shell .card-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 13px 16px;
}

.app-shell .card-header h2,
.app-shell .card-header h3 {
    font-size: .96rem;
}

.app-shell .card-header p {
    margin-top: 3px;
    font-size: .72rem;
}

.app-shell .card-body {
    padding: 16px;
}

.app-shell .card-body.flush {
    padding: 0;
}

.app-shell .card-footer {
    padding: 10px 16px;
}

.app-shell .toolbar {
    gap: 9px;
    margin-bottom: 13px;
    padding: 10px;
    border-radius: 11px;
}

.app-shell .toolbar-group {
    gap: 7px;
}

.app-shell .toolbar input,
.app-shell .toolbar select {
    min-width: 130px;
    min-height: 34px;
    padding-block: 5px;
}

.app-shell .data-table {
    font-size: .77rem;
}

.app-shell .data-table th,
.app-shell .data-table td {
    padding: 9px 11px;
}

.app-shell .data-table th {
    font-size: .62rem;
}

.app-shell .primary-cell {
    gap: 1px;
}

.app-shell .primary-cell strong {
    font-size: .79rem;
}

.app-shell .primary-cell small {
    font-size: .65rem;
}

.app-shell .empty-state {
    min-height: 190px;
    padding: 24px;
}

.app-shell .empty-state-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 10px;
    border-radius: 16px;
    font-size: 1.35rem;
}

.app-shell .empty-state h3 {
    margin-bottom: 5px;
    font-size: .96rem;
}

.app-shell .empty-state p {
    margin-bottom: 13px;
    font-size: .79rem;
}

.app-shell .tabs {
    gap: 3px;
    padding: 4px;
    border-radius: 10px;
}

.app-shell .tab {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: .74rem;
}

.app-shell .list-item {
    gap: 10px;
    padding: 9px 0;
}

.app-shell .list-item-main {
    gap: 9px;
}

.app-shell .list-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px;
}

.app-shell .list-item strong {
    font-size: .77rem;
}

.app-shell .list-item small {
    font-size: .65rem;
}

.app-shell .progress {
    height: 6px;
}

.app-shell .room-board {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 9px;
}

.app-shell .room-card {
    min-height: 120px;
    padding: 12px;
    border-left-width: 4px;
    border-radius: 11px;
}

.app-shell .room-number strong {
    font-size: 1.08rem;
}

.app-shell .room-card > small {
    margin-top: 3px;
    font-size: .68rem;
}

.app-shell .room-card .status-pill {
    margin-top: 12px;
}

.app-shell .room-card-actions {
    margin-top: 8px;
}

.app-shell .calendar-strip {
    grid-auto-columns: minmax(72px, 1fr);
}

.app-shell .calendar-day {
    padding: 8px 6px;
}

.app-shell .pos-layout {
    height: calc(100vh - 96px);
    min-height: 560px;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 12px;
}

.app-shell .pos-catalog,
.app-shell .pos-ticket {
    border-radius: 14px;
}

.app-shell .pos-categories {
    gap: 5px;
    padding: 10px;
}

.app-shell .pos-products {
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 8px;
    padding: 10px;
}

.app-shell .product-card {
    min-height: 108px;
    gap: 8px;
    padding: 11px;
    border-radius: 11px;
}

.app-shell .product-card strong {
    font-size: .82rem;
}

.app-shell .product-card small {
    margin-top: 2px;
    font-size: .68rem;
}

.app-shell .pos-ticket-head,
.app-shell .pos-ticket-total {
    padding: 12px;
}

.app-shell .pos-ticket-items {
    padding: 5px 12px;
}

.app-shell .ticket-item {
    gap: 8px;
    padding: 9px 0;
}

.app-shell .total-row {
    margin: 4px 0;
    font-size: .77rem;
}

.app-shell .total-row.grand {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 1rem;
}

.app-shell .kds-board {
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 10px;
}

.app-shell .kds-column {
    min-height: 460px;
    padding: 9px;
    border-radius: 13px;
}

.app-shell .kds-column-head {
    padding: 4px 3px 9px;
    font-size: .75rem;
}

.app-shell .kds-ticket {
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 10px;
}

.app-shell .kds-ticket-head {
    margin-bottom: 8px;
}

.app-shell .kds-ticket ul {
    padding-left: 17px;
    font-size: .75rem;
}

.app-shell .chart-bars {
    height: 175px;
    gap: 8px;
    padding-top: 12px;
}

.app-shell .modal-backdrop {
    padding: 10px;
}

.app-shell .modal {
    max-height: calc(100vh - 20px);
    border-radius: 16px;
}

.app-shell .modal-head {
    gap: 12px;
    padding: 14px 16px;
}

.app-shell .modal-head h2 {
    font-size: 1.05rem;
}

.app-shell .modal-body {
    padding: 16px;
}

.app-shell .modal-foot {
    gap: 7px;
    padding: 11px 16px;
}

/* Public WhatsApp enquiry assistant */
.whatsapp-chat {
    position: fixed;
    z-index: 120;
    right: 24px;
    bottom: 24px;
    display: grid;
    justify-items: end;
    gap: 12px;
    pointer-events: none;
}

.whatsapp-chat > * {
    pointer-events: auto;
}

.whatsapp-chat-panel {
    width: min(390px, calc(100vw - 32px));
    max-height: min(620px, calc(100vh - 110px));
    overflow: hidden auto;
    border: 1px solid rgba(27, 117, 69, .18);
    border-radius: 22px;
    background: #f7f5ef;
    box-shadow: 0 26px 70px rgba(20, 42, 30, .25);
    transform-origin: right bottom;
    animation: whatsapp-panel-in .34s cubic-bezier(.2, .72, .28, 1) both;
}

.whatsapp-chat-head {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 16px 17px;
    color: #fff;
    background:
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(135deg, #177e4b, #21a967);
}

.whatsapp-chat-avatar,
.whatsapp-launch-icon {
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #15864f;
    background: #fff;
    font-family: Arial, sans-serif;
    font-weight: 900;
}

.whatsapp-chat-avatar svg,
.whatsapp-launch-icon svg {
    width: 63%;
    height: 63%;
    display: block;
}

.whatsapp-chat-avatar {
    width: 42px;
    height: 42px;
    box-shadow: 0 0 0 4px rgba(255,255,255,.13);
}

.whatsapp-chat-head strong,
.whatsapp-chat-head small {
    display: block;
}

.whatsapp-chat-head strong {
    font-size: .9rem;
}

.whatsapp-chat-head small {
    margin-top: 3px;
    color: rgba(255,255,255,.75);
    font-size: .66rem;
}

.whatsapp-chat-head small i {
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 50%;
    background: #a7f3d0;
    box-shadow: 0 0 0 3px rgba(167,243,208,.14);
}

.whatsapp-chat-head > button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.08);
    font-size: 1.2rem;
    cursor: pointer;
}

.whatsapp-chat-body {
    padding: 17px;
    background:
        radial-gradient(circle at 18% 8%, rgba(31,168,100,.07), transparent 22%),
        #f7f5ef;
}

.whatsapp-bot-message {
    width: fit-content;
    max-width: 84%;
    padding: 11px 13px;
    border-radius: 4px 15px 15px 15px;
    color: #26352d;
    background: #fff;
    box-shadow: 0 7px 18px rgba(28, 57, 40, .08);
}

.whatsapp-bot-message small {
    display: block;
    margin-bottom: 4px;
    color: #168551;
    font-size: .61rem;
    font-weight: 850;
}

.whatsapp-bot-message p {
    margin: 0;
    font-size: .79rem;
    line-height: 1.55;
}

.whatsapp-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0;
}

.whatsapp-quick-topics button {
    padding: 7px 10px;
    border: 1px solid rgba(26,139,83,.28);
    border-radius: 999px;
    color: #16653f;
    background: rgba(255,255,255,.72);
    font-size: .68rem;
    font-weight: 750;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.whatsapp-quick-topics button:hover,
.whatsapp-quick-topics button:focus-visible {
    color: #fff;
    background: #198e56;
    transform: translateY(-1px);
}

.whatsapp-topic-reply {
    margin: -3px 0 13px auto;
    padding: 9px 11px;
    border-radius: 14px 4px 14px 14px;
    color: #21583d;
    background: #dff5e8;
    font-size: .7rem;
    line-height: 1.5;
}

.whatsapp-chat-form {
    padding-top: 13px;
    border-top: 1px solid rgba(57, 87, 68, .12);
}

.whatsapp-chat-form label {
    display: block;
    margin-bottom: 6px;
    color: #405149;
    font-size: .69rem;
    font-weight: 800;
}

.whatsapp-chat-form textarea {
    width: 100%;
    min-height: 88px;
    resize: vertical;
    border-color: rgba(49, 101, 70, .2);
    background: #fff;
    font-size: .78rem;
}

.whatsapp-send-button {
    width: 100%;
    margin-top: 10px;
    border-color: #168551;
    color: #fff;
    background: linear-gradient(135deg, #1fab67, #168551);
    box-shadow: 0 10px 22px rgba(22,133,81,.2);
}

.whatsapp-send-button:hover {
    color: #fff;
    background: linear-gradient(135deg, #24b970, #137646);
}

.whatsapp-send-button span {
    width: 21px;
    height: 21px;
    display: inline-grid;
    place-items: center;
    margin-right: 5px;
    border-radius: 50%;
    color: #198e56;
    background: #fff;
    font-size: .66rem;
    font-weight: 900;
}

.whatsapp-send-button span svg {
    width: 14px;
    height: 14px;
    display: block;
}

.whatsapp-chat-form > small {
    display: block;
    margin-top: 8px;
    color: #777f79;
    font-size: .61rem;
    text-align: center;
}

.whatsapp-chat-launcher {
    position: relative;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 17px 7px 7px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #20ad68, #168551);
    box-shadow: 0 16px 34px rgba(18, 107, 64, .28);
    cursor: pointer;
    transition: transform .24s ease, box-shadow .24s ease;
}

.whatsapp-chat-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(18,107,64,.34);
}

.whatsapp-launch-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

.whatsapp-launch-label {
    font-size: .78rem;
    font-weight: 850;
}

.whatsapp-chat-launcher > i {
    position: absolute;
    top: 2px;
    left: 39px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #6ee7a8;
}

.whatsapp-chat.is-open .whatsapp-chat-launcher {
    transform: scale(.94);
}

@keyframes whatsapp-panel-in {
    from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.95); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 540px) {
    .whatsapp-chat {
        right: 14px;
        bottom: 14px;
        left: 14px;
    }

    .whatsapp-chat-panel {
        width: 100%;
        max-height: calc(100vh - 96px);
    }

    .whatsapp-chat-launcher {
        padding-right: 11px;
    }

    .whatsapp-launch-label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-chat-panel {
        animation: none;
    }

    .whatsapp-chat-launcher,
    .whatsapp-quick-topics button {
        transition: none;
    }
}

/* Large-screen public website scaling */
@media (min-width: 1440px) {
    .public-topbar-inner,
    .hero-inner,
    .public-section,
    .activities-inner,
    .feature-band-inner,
    .rooms-listing-hero-inner,
    .room-catalogue-shell,
    .room-detail-shell {
        width: min(1680px, calc(100% - 112px));
    }

    .public-nav {
        gap: 32px;
        padding: 18px max(56px, calc((100% - 1680px) / 2));
    }

    .public-brand {
        gap: 16px;
    }

    .public-brand img {
        width: 82px;
        height: 82px;
    }

    .public-brand strong {
        font-size: 1.48rem;
    }

    .public-brand small {
        font-size: .8rem;
    }

    .public-links {
        gap: clamp(24px, 2vw, 36px);
    }

    .public-links a:not(.btn) {
        font-size: 1.02rem;
    }

    .public-nav .btn-sm {
        min-height: 50px;
        padding-inline: 23px;
        font-size: .9rem;
    }

    .hero {
        min-height: clamp(690px, 68vh, 880px);
    }

    .hero-inner {
        grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
        gap: clamp(70px, 7vw, 130px);
        padding: 100px 0 145px;
    }

    .hero-copy h1 {
        max-width: 820px;
        font-size: clamp(5.7rem, 6.4vw, 7.4rem);
    }

    .hero-copy p {
        max-width: 680px;
        font-size: 1.16rem;
        line-height: 1.75;
    }

    .hero-mark::before,
    .hero-mark::after {
        width: 420px;
        height: 420px;
    }

    .hero-mark::after {
        width: 550px;
        height: 550px;
    }

    .hero-mark img {
        width: 390px;
        height: 390px;
    }

    .hero-slider-controls {
        bottom: 94px;
        left: max(56px, calc((100% - 1680px) / 2));
    }

    .availability-box {
        width: min(1460px, calc(100% - 180px));
        gap: 14px;
        margin-top: -68px;
        padding: 22px;
    }

    .availability-box input,
    .availability-box select,
    .availability-box .btn {
        min-height: 48px;
    }

    .lodge-introduction {
        padding: 132px 40px 72px;
    }

    .lodge-introduction-inner {
        width: min(1080px, 100%);
    }

    .lodge-introduction h2 {
        max-width: 950px;
        font-size: clamp(3.7rem, 4.2vw, 5.25rem);
    }

    .lodge-introduction-copy p {
        max-width: 1000px;
        font-size: 1.05rem;
    }

    .public-section {
        padding-block: 108px;
    }

    .section-heading {
        max-width: 820px;
        margin-bottom: 42px;
    }

    .section-heading h2 {
        font-size: clamp(3rem, 3.5vw, 4.3rem);
    }

    .section-heading p,
    .activities-heading p {
        font-size: 1.03rem;
        line-height: 1.7;
    }

    .room-types-grid {
        gap: 26px;
    }

    .room-media-gallery,
    .room-image-placeholder {
        height: 285px;
    }

    .public-room-card-body {
        padding: 27px;
    }

    .public-room-card-body h3 {
        font-size: 1.48rem;
    }

    .public-room-card-body p {
        font-size: .92rem;
        line-height: 1.65;
    }

    .activities-section {
        padding: 112px 56px 120px;
    }

    .activities-heading {
        max-width: 880px;
        margin-bottom: 52px;
    }

    .activities-heading h2 {
        font-size: clamp(3.1rem, 3.8vw, 4.65rem);
    }

    .activities-grid {
        gap: 25px;
    }

    .activity-card {
        min-height: 500px;
    }

    .activity-card-content {
        padding: 36px 34px 33px;
    }

    .activity-card h3 {
        font-size: 2.05rem;
    }

    .activity-card p {
        max-width: 410px;
        font-size: .88rem;
    }

    .safari-story-grid {
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
        gap: clamp(80px, 8vw, 150px);
    }

    .safari-story-copy h2 {
        max-width: 650px;
        font-size: clamp(3rem, 3.4vw, 4.25rem);
    }

    .safari-story-copy > p {
        max-width: 640px;
        font-size: 1rem;
        line-height: 1.75;
    }

    .safari-story-gallery {
        min-height: 620px;
    }

    .feature-band-inner {
        gap: 42px;
        padding: 78px 0;
    }

    .public-feature-icon {
        width: 56px;
        height: 56px;
    }

    .public-feature h3 {
        font-size: 1.12rem;
    }

    .public-feature p {
        font-size: .88rem;
    }

    .booking-page-hero,
    .contact-page-hero,
    .activities-page-hero {
        padding-inline: max(56px, calc((100% - 1680px) / 2));
    }

    .booking-page-hero {
        min-height: clamp(740px, 72vh, 920px);
        grid-template-columns: minmax(0, 1.04fr) minmax(510px, .72fr);
    }

    .booking-page-copy h1,
    .contact-page-hero h1,
    .activities-page-hero h1 {
        max-width: 900px;
        font-size: clamp(5.2rem, 5.8vw, 7.2rem);
    }

    .booking-page-copy > p,
    .contact-page-hero p,
    .activities-page-hero p {
        max-width: 700px;
        font-size: 1.12rem;
        line-height: 1.75;
    }

    .booking-start-card {
        padding: 42px;
    }

    .booking-journey-section,
    .booking-inspiration,
    .contact-details-section,
    .contact-page-shell {
        width: min(1500px, calc(100% - 160px));
    }

    .booking-journey-grid,
    .contact-details-section {
        gap: 22px;
    }

    .booking-journey-grid article,
    .contact-detail-card {
        padding: 32px 30px;
    }

    .booking-inspiration-image {
        height: 560px;
    }

    .contact-page-shell {
        grid-template-columns: minmax(0, .9fr) minmax(600px, 1.1fr);
    }

    .contact-form-card {
        padding: 44px;
    }

    .contact-location-band {
        min-height: 390px;
        padding-inline: max(70px, calc((100% - 1500px) / 2));
    }

    .activities-page-hero,
    .contact-page-hero {
        min-height: 640px;
    }

    .activities-page-hero-inner,
    .contact-page-hero-inner {
        max-width: 900px;
    }

    .activities-page-hero-mark,
    .contact-page-compass {
        width: 220px;
        height: 220px;
    }

    .activity-planning-section {
        width: min(1320px, calc(100% - 180px));
        padding-block: 110px;
    }

    .activity-planning-card {
        padding: 34px 28px;
    }

    .rooms-listing-hero {
        min-height: 410px;
    }

    .rooms-listing-hero-inner {
        padding: 88px 0 112px;
    }

    .rooms-listing-hero h1,
    .room-detail-heading h1 {
        max-width: 920px;
        font-size: clamp(4.3rem, 4.8vw, 6.2rem);
    }

    .rooms-listing-hero p,
    .room-detail-heading p {
        max-width: 780px;
        font-size: 1.08rem;
        line-height: 1.7;
    }

    .room-filter-panel {
        padding: 24px;
    }

    .room-listing-grid {
        gap: 26px;
    }

    .room-listing-card .room-media-gallery {
        height: 340px;
    }

    .room-detail-gallery .room-media-gallery {
        height: clamp(620px, 47vw, 760px);
    }

    .room-detail-layout {
        grid-template-columns: minmax(0, 1fr) 410px;
        gap: clamp(70px, 7vw, 130px);
    }

    .room-booking-card {
        padding: 29px;
    }

    .booking-shell {
        width: min(1280px, calc(100% - 120px));
    }
}

@media (min-width: 1700px) {
    .room-listing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .room-listing-card .room-media-gallery {
        height: 315px;
    }
}

.app-shell .close-modal {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 1180px) {
    .public-links {
        gap: 14px;
    }

    .public-links a:not(.btn) {
        padding: 8px 10px;
        font-size: .86rem;
    }

    .public-links a:not(.btn)::after {
        right: 10px;
        left: 10px;
    }

    .quick-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell .span-3 {
        grid-column: span 6;
    }

    .pos-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .room-manager-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .room-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .room-filter-search {
        grid-column: span 2;
    }

    .room-filter-submit {
        grid-column: span 2;
    }
}

@media (max-width: 980px) {
    .sidebar {
        width: var(--sidebar-width);
        transform: translateX(-100%);
    }

    .app-main,
    body.sidebar-collapsed .app-main {
        margin-left: 0;
    }

    body.sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-mobile-open .mobile-overlay {
        display: block;
    }

    .topbar {
        padding-inline: 18px;
    }

    .app-content {
        padding-inline: 18px;
    }

    .auth-shell,
    .setup-shell {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        min-height: 380px;
    }

    .auth-form-panel {
        padding: 42px 30px;
    }

    .setup-shell {
        width: min(680px, calc(100% - 24px));
        max-height: none;
        margin: 12px auto;
    }

    .setup-shell .auth-brand-panel {
        min-height: 210px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }

    .setup-shell .auth-brand-panel img {
        width: 82px;
        height: 82px;
    }

    .setup-shell .auth-brand-panel h1 {
        margin-bottom: 8px;
        font-size: 1.75rem;
    }

    .setup-shell .auth-brand-panel p {
        font-size: .8rem;
    }

    .setup-shell .auth-form-panel {
        padding: 24px;
    }

    .login-shell {
        width: min(620px, calc(100% - 24px));
        min-height: auto;
        margin: 12px auto;
    }

    .login-shell .auth-brand-panel {
        min-height: 200px;
        flex-direction: row;
        justify-content: center;
        padding: 24px;
    }

    .login-shell .auth-brand-panel img {
        width: 82px;
        height: 82px;
    }

    .login-shell .auth-brand-panel h1 {
        margin-bottom: 8px;
        font-size: 1.75rem;
    }

    .login-shell .auth-brand-panel p {
        font-size: .8rem;
    }

    .login-shell .auth-form-panel {
        padding: 24px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero::before {
        background: rgba(13, 13, 12, .74);
    }

    .hero-copy p {
        margin-inline: auto;
    }

    .hero-mark {
        display: none;
    }

    .hero-slider-controls {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .availability-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .availability-box .btn {
        grid-column: span 2;
    }

    .room-types-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activities-page-hero {
        grid-template-columns: 1fr;
    }

    .activities-page-hero-mark {
        display: none;
    }

    .contact-page-hero {
        grid-template-columns: 1fr;
    }

    .contact-page-compass {
        display: none;
    }

    .contact-page-shell {
        grid-template-columns: 1fr;
    }

    .contact-page-copy {
        max-width: 680px;
    }

    .booking-page-hero {
        grid-template-columns: 1fr;
    }

    .booking-page-copy {
        max-width: 740px;
        text-align: center;
    }

    .booking-page-copy > p,
    .booking-start-card {
        margin-inline: auto;
    }

    .booking-page-promises {
        justify-content: center;
    }

    .booking-start-card {
        width: min(100%, 620px);
    }

    .booking-inspiration {
        grid-template-columns: 1fr;
    }

    .booking-inspiration-image {
        height: 520px;
    }

    .booking-inspiration-copy {
        max-width: 680px;
    }

    .activities-grid .activity-card {
        --activity-curve: 0deg;
        --activity-arc: 0px;
        --activity-z: 0px;
    }

    .activities-grid .activity-card:nth-child(odd) {
        --activity-curve: 3deg;
        --activity-arc: 6px;
    }

    .activities-grid .activity-card:nth-child(even) {
        --activity-curve: -3deg;
        --activity-arc: 6px;
    }

    .safari-story-grid {
        grid-template-columns: 1fr;
    }

    .safari-story-copy {
        max-width: 680px;
    }

    .safari-story-gallery {
        min-height: 500px;
    }

    .room-listing-grid {
        grid-template-columns: 1fr;
    }

    .room-listing-card {
        display: grid;
        grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    }

    .room-listing-card .room-media-gallery {
        height: 100%;
        min-height: 330px;
    }

    .room-detail-layout {
        grid-template-columns: 1fr;
    }

    .room-booking-card {
        position: static;
    }

    .feature-band-inner {
        grid-template-columns: 1fr;
    }

    .pos-layout {
        height: auto;
        grid-template-columns: 1fr;
    }

    .pos-catalog {
        min-height: 500px;
    }

    .pos-ticket {
        min-height: 420px;
    }
}

@media (max-height: 760px) and (min-width: 981px) {
    .login-shell {
        min-height: calc(100vh - 24px);
        margin: 12px auto;
    }

    .login-shell .auth-brand-panel {
        padding: 24px;
    }

    .login-shell .auth-brand-panel img {
        width: 88px;
        height: 88px;
    }

    .login-shell .auth-brand-panel h1 {
        font-size: 1.9rem;
    }

    .login-shell .auth-form-panel {
        padding: 22px 28px;
    }

    .setup-shell .auth-brand-panel {
        padding: 24px;
    }

    .setup-shell .auth-brand-panel img {
        width: 88px;
        height: 88px;
    }

    .setup-shell .auth-brand-panel h1 {
        font-size: 1.85rem;
    }

    .setup-shell .auth-brand-panel p {
        font-size: .82rem;
    }

    .setup-shell .auth-form-panel {
        padding: 20px 28px;
    }
}

@media (max-width: 840px) {
    .app-shell .span-3,
    .app-shell .span-4,
    .app-shell .span-5,
    .app-shell .span-6 {
        grid-column: span 6;
    }

    .app-shell .span-7,
    .app-shell .span-8,
    .app-shell .span-9 {
        grid-column: span 12;
    }
}

@media (max-width: 720px) {
    .favicon-setting-layout {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .favicon-setting-layout .btn {
        grid-column: 1 / -1;
    }

    .favicon-preview {
        width: 72px;
        height: 72px;
    }

    .favicon-preview img {
        width: 52px;
        height: 52px;
    }

    .form-grid.two,
    .form-grid.three,
    .form-grid.four,
    .ticket-grid {
        grid-template-columns: 1fr;
    }

    .quick-strip {
        grid-template-columns: 1fr;
    }

    .span-3,
    .span-4,
    .span-5,
    .span-6,
    .span-7,
    .span-8,
    .span-9,
    .span-12 {
        grid-column: span 12;
    }

    .page-header {
        display: grid;
    }

    .app-shell .app-content {
        padding: 14px 12px 28px;
    }

    .app-shell .page-header {
        gap: 10px;
        margin-bottom: 12px;
    }

    .app-shell .page-header h1 {
        font-size: 1.38rem;
    }

    .page-actions {
        justify-content: flex-start;
    }

    .app-shell .page-actions {
        width: 100%;
    }

    .app-shell .page-actions .btn {
        flex: 1 1 auto;
    }

    .topbar {
        gap: 8px;
    }

    .app-shell .topbar {
        padding-inline: 12px;
    }

    .app-shell .content-grid {
        gap: 10px;
    }

    .app-shell .quick-strip {
        gap: 8px;
        margin-bottom: 12px;
    }

    .app-shell .metric-card {
        min-height: 92px;
        padding: 10px 12px;
    }

    .app-shell .card-header,
    .app-shell .card-body {
        padding: 12px;
    }

    .app-shell .card-body.flush {
        padding: 0;
    }

    .app-shell .data-table th,
    .app-shell .data-table td {
        padding: 8px 9px;
    }

    .app-shell .toolbar {
        align-items: stretch;
    }

    .app-shell .toolbar-group {
        width: 100%;
    }

    .app-shell .toolbar input,
    .app-shell .toolbar select {
        min-width: 0;
        flex: 1 1 140px;
    }

    .app-shell .pos-catalog {
        min-height: 440px;
    }

    .app-shell .pos-ticket {
        min-height: 360px;
    }

    .room-management-toolbar {
        display: grid;
    }

    .room-management-toolbar .page-actions {
        width: 100%;
    }

    .room-manager-grid,
    .room-image-admin-grid,
    .room-gallery-upload {
        grid-template-columns: 1fr;
    }

    .amenity-checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .global-search,
    .business-date,
    .profile-trigger-info {
        display: none;
    }

    .public-links a:not(.btn) {
        display: none;
    }

    .public-topbar-inner {
        width: calc(100% - 28px);
        gap: 12px;
    }

    .public-topbar-kicker {
        display: none;
    }

    .public-topbar-contact a {
        padding-inline: 9px;
        font-size: .64rem;
    }

    .hero {
        min-height: 535px;
    }

    .hero-inner {
        padding-top: 60px;
    }

    .hero-copy h1 {
        font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .availability-box {
        grid-template-columns: 1fr;
    }

    .availability-box .btn {
        grid-column: auto;
    }

    .lodge-introduction {
        padding: 88px 18px 40px;
    }

    .lodge-introduction h2 {
        margin-top: 12px;
    }

    .lodge-introduction-copy p {
        font-size: .88rem;
        line-height: 1.72;
    }

    .lodge-introduction + .public-section {
        padding-top: 42px;
    }

    .room-types-grid {
        grid-template-columns: 1fr;
    }

    .activities-section {
        padding: 72px 18px 76px;
    }

    .activities-heading {
        margin-bottom: 30px;
    }

    .activities-grid {
        grid-template-columns: 1fr;
    }

    .activities-page-hero {
        min-height: 500px;
        padding: 68px 22px 94px;
        text-align: center;
    }

    .activities-page-hero {
        background:
            linear-gradient(90deg, rgba(14,14,12,.84), rgba(17,16,13,.68)),
            linear-gradient(0deg, rgba(17,16,13,.64), transparent 55%),
            url("../images/website/activities/game-drive.jpg") center 56% / cover;
    }

    .activities-page-hero-inner,
    .activities-page-hero p {
        margin-inline: auto;
    }

    .activities-page-hero-actions {
        justify-content: center;
    }

    .contact-page-hero {
        min-height: 480px;
        padding: 66px 22px 100px;
        text-align: center;
        background:
            linear-gradient(90deg, rgba(15,14,12,.84), rgba(20,18,15,.64)),
            linear-gradient(0deg, rgba(18,17,14,.67), transparent 56%),
            url("../images/website/lodge-lounge.jpg") center 55% / cover;
    }

    .contact-page-hero-inner,
    .contact-page-hero p {
        margin-inline: auto;
    }

    .contact-details-section {
        width: min(100% - 28px, 620px);
        grid-template-columns: 1fr;
        margin-top: -48px;
    }

    .contact-detail-card {
        padding: 23px;
    }

    .contact-page-shell {
        width: min(100% - 28px, 620px);
        gap: 38px;
        padding: 76px 0 82px;
    }

    .contact-page-copy {
        text-align: center;
    }

    .contact-page-copy > p {
        margin-inline: auto;
    }

    .contact-assurance-list {
        width: min(100%, 470px);
        margin-inline: auto;
        text-align: left;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
    }

    .contact-message-field {
        grid-column: auto;
    }

    .contact-location-band {
        min-height: 360px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .contact-location-band > div,
    .contact-location-band h2 {
        margin-inline: auto;
    }

    .contact-location-band > .btn {
        margin-inline: auto;
    }

    .booking-page-hero {
        min-height: 0;
        padding: 68px 20px 92px;
    }

    .booking-page-copy h1 {
        font-size: clamp(3rem, 14vw, 4.7rem);
    }

    .booking-start-grid {
        grid-template-columns: 1fr;
    }

    .booking-room-preference {
        grid-column: auto;
    }

    .booking-journey-section,
    .booking-inspiration {
        width: min(100% - 28px, 620px);
    }

    .booking-journey-section {
        padding: 72px 0 80px;
    }

    .booking-journey-grid {
        grid-template-columns: 1fr;
    }

    .booking-inspiration {
        gap: 38px;
        padding-bottom: 80px;
    }

    .booking-inspiration-image {
        height: 390px;
    }

    .booking-inspiration-copy {
        text-align: center;
    }

    .booking-inspiration-actions {
        justify-content: center;
    }

    .activities-grid .activity-card,
    .activities-grid .activity-card:nth-child(odd),
    .activities-grid .activity-card:nth-child(even) {
        --activity-curve: 0deg;
        --activity-arc: 0px;
        --activity-z: 0px;
    }

    .activity-card {
        min-height: 405px;
    }

    .activities-cta {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }

    .activity-planning-section {
        width: min(100% - 28px, 620px);
        padding: 70px 0 76px;
    }

    .activity-planning-grid {
        grid-template-columns: 1fr;
    }

    .activity-planning-grid::before {
        top: 10%;
        right: auto;
        bottom: 10%;
        left: 50%;
        width: 1px;
        height: auto;
    }

    .rooms-listing-hero {
        min-height: 290px;
    }

    .rooms-listing-hero-inner {
        padding: 56px 0 75px;
    }

    .room-catalogue-shell,
    .room-detail-shell {
        width: min(100% - 28px, 680px);
    }

    .room-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .room-filter-search,
    .room-filter-submit {
        grid-column: span 2;
    }

    .room-filter-submit {
        width: 100%;
    }

    .room-results-heading,
    .room-detail-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .room-results-heading p {
        display: none;
    }

    .room-listing-card {
        display: flex;
    }

    .room-listing-card .room-media-gallery {
        height: 270px;
        min-height: 0;
    }

    .room-detail-rate {
        width: 100%;
        text-align: left;
    }

    .room-detail-gallery .room-media-gallery {
        height: 390px;
        border-radius: 18px;
    }

    .room-detail-layout {
        margin-top: 34px;
    }

    .room-detail-facts {
        grid-template-columns: 1fr;
    }

    .room-detail-facts article {
        min-height: 78px;
    }

    .safari-story {
        padding-top: 16px;
    }

    .safari-story-gallery {
        min-height: 390px;
    }

    .safari-story-main {
        inset: 0 50px 45px 0;
    }

    .safari-story-secondary {
        width: 52%;
        height: 45%;
    }

    .ticket-head {
        align-items: flex-start;
    }

    .ticket-reference {
        max-width: 130px;
    }

    .ticket-arrival,
    .ticket-validation {
        grid-template-columns: 1fr;
    }

    .ticket-arrival-location {
        grid-column: auto;
    }

    .ticket-foot {
        flex-direction: column;
        gap: 5px;
    }
}

/* Professional procurement workspace */
.line-editor { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.line-editor-head { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:#faf6f0; }
.procurement-line { display:grid; grid-template-columns:minmax(220px,2fr) repeat(3,minmax(120px,1fr)) 34px; gap:9px; align-items:end; padding:10px 12px; border-top:1px solid var(--line); }
.procurement-line.po-line { grid-template-columns:minmax(220px,2fr) repeat(3,minmax(115px,1fr)) 34px; }
.procurement-line .field { margin:0; }
.document-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:9px; margin-bottom:16px; }
.document-facts > span { padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:#fcfaf7; }
.document-facts small { display:block; color:var(--muted); text-transform:uppercase; font-size:.62rem; letter-spacing:.06em; }
.document-facts strong { display:block; margin-top:3px; font-size:.82rem; text-transform:capitalize; }
.document-total { display:flex; justify-content:flex-end; align-items:center; gap:24px; margin-top:14px; font-size:1rem; }
.document-total strong { color:var(--orange-dark); font-size:1.35rem; }
.procurement-actions { flex-wrap:wrap; }
.procurement-actions form { margin:0; }
.receiving-table input { min-width:92px; max-width:135px; }
.match-banner { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; margin-bottom:14px; border-radius:12px; }
.match-banner.matched { color:#166534; background:#dcfce7; }
.match-banner.exception { color:#991b1b; background:#fee2e2; }
.approval-panel { margin-top:16px; padding:14px; border:1px solid #bbdfc5; border-radius:12px; background:#f3fbf5; }
.procurement-workbench { margin-bottom:14px; }
.workbench-list { display:flex; flex-wrap:wrap; gap:8px; }
.workbench-list > span { display:flex; align-items:center; gap:7px; padding:7px 8px 7px 11px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.workbench-list small { color:var(--muted); }
@media(max-width:900px){.procurement-line,.procurement-line.po-line{grid-template-columns:1fr 1fr}.procurement-line .icon-btn{align-self:center}.receiving-table input{min-width:80px}}
@media(max-width:560px){.procurement-line,.procurement-line.po-line{grid-template-columns:1fr}.document-facts{grid-template-columns:1fr 1fr}}

/* Accounting statements */
.accounting-report .card-header {
    align-items: center;
}

.financial-table .number-cell {
    text-align: right;
    white-space: nowrap;
}

.financial-table tfoot th {
    border-top: 2px solid var(--border);
    background: #f6f3ec;
}

.balance-sheet-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.balance-sheet-summary article {
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: linear-gradient(145deg, #fff, #f8f5ee);
    box-shadow: 0 8px 20px rgba(40, 34, 24, .05);
}

.balance-sheet-summary span,
.balance-sheet-summary strong {
    display: block;
}

.balance-sheet-summary span {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.balance-sheet-summary strong {
    color: var(--ink);
    font-family: var(--display-font);
    font-size: clamp(1rem, 1.8vw, 1.32rem);
}

.financial-statement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.statement-column {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
}

.statement-heading,
.statement-row,
.statement-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 13px;
}

.statement-heading {
    color: #fff;
    background: linear-gradient(135deg, #28362d, #435541);
    font-weight: 800;
}

.statement-heading.equity-heading {
    margin-top: 12px;
    background: linear-gradient(135deg, #5b4027, #8a633c);
}

.statement-row {
    border-bottom: 1px solid #eee9de;
    color: var(--ink-soft);
    font-size: .8rem;
}

.statement-row span {
    min-width: 0;
}

.statement-row small {
    display: inline-block;
    min-width: 46px;
    margin-right: 8px;
    color: var(--muted);
    font-size: .67rem;
}

.statement-row strong,
.statement-total strong {
    white-space: nowrap;
}

.statement-total {
    border-top: 2px solid var(--ink);
    background: #f7f3ea;
    color: var(--ink);
    font-weight: 850;
}

.accounting-balance-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 15px;
    padding: 11px 14px;
    border-radius: 11px;
    font-size: .79rem;
}

.accounting-balance-check.is-balanced {
    border: 1px solid rgba(29, 122, 76, .22);
    color: #17653f;
    background: #eef9f2;
}

.accounting-balance-check.is-unbalanced {
    border: 1px solid rgba(190, 52, 52, .22);
    color: #9a2d2d;
    background: #fff1f1;
}

.amount-negative {
    color: #b63a3a !important;
}

@media (max-width: 980px) {
    .balance-sheet-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .financial-statement-grid,
    .balance-sheet-summary {
        grid-template-columns: 1fr;
    }

    .accounting-balance-check {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 540px) {
    .amenity-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .public-topbar-inner {
        width: calc(100% - 20px);
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 12px;
        padding: 5px 0;
    }

    .contact-form-card {
        padding: 22px 18px;
    }

    .contact-form-card::before {
        display: none;
    }

    .contact-page-hero h1 {
        font-size: clamp(2.85rem, 15vw, 4rem);
    }

    .booking-start-card {
        padding: 22px 18px;
    }

    .booking-start-card::before,
    .booking-inspiration-image::before {
        display: none;
    }

    .booking-start-card-head {
        align-items: flex-start;
    }

    .booking-inspiration-image {
        height: 310px;
    }

    .public-socials {
        justify-content: center;
    }

    .public-topbar-contact {
        width: 100%;
        justify-content: center;
        padding-top: 4px;
        border-top: 1px solid #d2cec7;
    }

    .public-topbar-contact a:first-child {
        padding-left: 0;
    }

    .public-topbar-contact a:last-child {
        padding-right: 0;
    }

    .rooms-listing-hero-inner {
        width: calc(100% - 28px);
    }

    .room-filter-grid {
        grid-template-columns: 1fr;
    }

    .room-filter-search,
    .room-filter-submit {
        grid-column: auto;
    }

    .room-filter-heading {
        align-items: flex-start;
    }

    .room-listing-card-head,
    .room-listing-actions,
    .room-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .room-price-right {
        text-align: left;
    }

    .room-listing-actions,
    .room-listing-actions .btn,
    .public-room-actions,
    .public-room-actions .btn {
        width: 100%;
    }

    .room-detail-gallery .room-media-gallery {
        height: 310px;
    }

    .room-detail-amenities {
        grid-template-columns: 1fr;
    }

    .room-booking-card {
        padding: 18px;
    }

    .activities-section {
        padding-inline: 14px;
    }

    .activity-card {
        min-height: 370px;
        border-radius: 18px;
    }

    .activity-card-content {
        padding: 26px 22px 23px;
    }

    .activity-card h3 {
        font-size: 1.6rem;
    }

    .hero-depth-sun {
        right: -55px;
        width: 190px;
    }

    .hero-depth-grass-back {
        height: 95px;
    }

    .hero-depth-grass-front {
        height: 78px;
    }

    .introduction-depth-baobab {
        left: -8px;
        opacity: .07;
        transform: translate3d(0, var(--introduction-tree-y, 0), 0) scale(.78);
        transform-origin: bottom left;
    }

    .login-shell .auth-brand-panel {
        min-height: 0;
        flex-direction: column;
        padding: 20px;
    }

    .login-shell .auth-brand-panel img {
        width: 68px;
        height: 68px;
    }

    .login-shell .auth-brand-panel h1 {
        font-size: 1.5rem;
    }

    .login-shell .auth-form-panel {
        padding: 22px 20px;
    }

    .setup-shell .auth-brand-panel {
        min-height: 0;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .setup-shell .auth-brand-panel img {
        width: 68px;
        height: 68px;
    }

    .setup-shell .auth-brand-panel h1 {
        font-size: 1.5rem;
    }

    .setup-shell .auth-form-panel {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-depth-scene > span,
    .hero-mark img,
    .introduction-depth-scene > span,
    .activities-section::after,
    .public-room-card.depth-card,
    .activity-card,
    .public-room-card.depth-card .room-media-main,
    .activity-card > img,
    .safari-story-gallery img {
        animation: none;
        transform: none !important;
        transition: none;
    }

    .hero-depth-dust {
        opacity: .48;
    }
}

.hr-tabs {
    margin-bottom: 14px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.hr-filter input[type="search"] {
    min-width: 230px;
}

.compact-actions {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.compact-actions .muted {
    max-width: 700px;
    margin: 0;
}

.inline-actions {
    display: flex;
    gap: 5px;
}

.shift-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 50%;
}

.hr-employee-form {
    display: grid;
    gap: 12px;
}

.hr-form-section {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--paper) 94%, var(--orange) 6%);
}

.hr-form-section h3 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: .88rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hr-form-section .field {
    margin-bottom: 0;
}

.hr-report-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.report-stat {
    display: grid;
    gap: 7px;
    padding: 17px;
}

.report-stat > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.report-stat > strong {
    color: var(--ink);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.report-stat > small {
    color: var(--muted);
    line-height: 1.45;
}

.hr-report-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hr-compliance-note {
    margin-top: 12px;
    border-left: 4px solid var(--orange);
}

.hr-compliance-note p,
.hr-payroll-disclaimer p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.hr-payroll-disclaimer {
    padding: 13px 14px;
    border: 1px solid rgba(234, 90, 20, .2);
    border-radius: 12px;
    background: var(--orange-soft);
}

@media (max-width: 980px) {
    .hr-report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .hr-filter .toolbar-group,
    .compact-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hr-filter input[type="search"] {
        min-width: 0;
        width: 100%;
    }

    .hr-report-grid,
    .hr-report-columns {
        grid-template-columns: 1fr;
    }

    .hr-form-section {
        padding: 11px;
    }
}

@media print {
    .no-print,
    .public-topbar,
    .public-nav,
    .sidebar,
    .topbar,
    .page-actions,
    .toolbar {
        display: none !important;
    }

    .whatsapp-chat,
    .swal2-container {
        display: none !important;
    }

    body,
    .public-page,
    .app-main,
    .app-content {
        margin: 0;
        padding: 0;
        background: #fff;
    }

    .ticket {
        width: 100%;
        margin: 0;
        border: 1px solid #222;
        border-radius: 14px;
        box-shadow: none;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @page {
        size: A4;
        margin: 12mm;
    }

    .card {
        box-shadow: none;
    }
}

/* Immersive POS workstation */
.app-shell .pos-workstation {
    --pos-bg: #080d16;
    --pos-panel: #101827;
    --pos-panel-soft: #151f30;
    --pos-border: #263247;
    --pos-text: #f4f7fb;
    --pos-muted: #8f9aae;
    height: calc(100vh - 154px);
    min-height: 590px;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid #1d293c;
    border-radius: 18px;
    color: var(--pos-text);
    background: var(--pos-bg);
    box-shadow: 0 24px 55px rgba(3, 7, 14, .28);
}

.pos-terminal-bar {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--pos-border);
}

.pos-terminal-brand,
.pos-terminal-context,
.pos-terminal-brand > span:last-child,
.pos-cashier,
.pos-clock {
    display: flex;
    align-items: center;
}

.pos-terminal-brand {
    gap: 10px;
}

.pos-terminal-brand > span:last-child,
.pos-cashier,
.pos-clock {
    align-items: flex-start;
    flex-direction: column;
}

.pos-terminal-brand strong {
    font-size: .9rem;
    letter-spacing: .03em;
}

.pos-terminal-brand small,
.pos-terminal-context small,
.pos-terminal-context label > span {
    color: var(--pos-muted);
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pos-live-dot {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(65, 211, 132, .25);
    border-radius: 50%;
    background: #41d384;
    box-shadow: 0 0 0 4px rgba(65, 211, 132, .11), 0 0 16px rgba(65, 211, 132, .55);
}

.pos-terminal-context {
    min-width: 0;
    justify-content: flex-end;
    gap: 10px;
}

.pos-terminal-context label {
    display: grid;
    gap: 3px;
}

.pos-terminal-context select {
    min-width: 150px;
    height: 33px;
    padding: 5px 30px 5px 9px;
    border-color: var(--pos-border);
    color: var(--pos-text);
    background-color: var(--pos-panel-soft);
    font-size: .75rem;
}

.pos-cashier,
.pos-clock {
    min-width: 80px;
    gap: 2px;
    padding: 0 9px;
    border-left: 1px solid var(--pos-border);
}

.pos-cashier strong,
.pos-clock strong {
    max-width: 130px;
    overflow: hidden;
    color: var(--pos-text);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-toolbar-action,
.pos-fullscreen-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--pos-border);
    border-radius: 9px;
    color: #dce4f0;
    background: #172235;
    font-size: .7rem;
    font-weight: 750;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.pos-toolbar-action:hover,
.pos-fullscreen-button:hover {
    transform: translateY(-1px);
    border-color: #52627b;
    color: #fff;
    background: #202d43;
}

.app-shell .pos-workstation .pos-catalog,
.app-shell .pos-workstation .pos-ticket {
    border-color: var(--pos-border);
    border-radius: 13px;
    color: var(--pos-text);
    background: var(--pos-panel);
    box-shadow: none;
}

.app-shell .pos-workstation .pos-categories {
    gap: 7px;
    padding: 11px;
    border-bottom-color: var(--pos-border);
    background: #0d1522;
}

.pos-workstation .pos-categories .tab {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid #2c3950;
    border-radius: 9px;
    color: #aeb8c9;
    background: #172235;
    font-size: .7rem;
}

.pos-workstation .pos-categories .tab:hover {
    color: #fff;
    border-color: #4a5a73;
}

.pos-workstation .pos-categories .tab.active {
    border-color: #ff7a2e;
    color: #fff;
    background: #d95713;
    box-shadow: 0 7px 18px rgba(229, 88, 14, .25);
}

.pos-workstation #pos-search,
.pos-workstation input,
.pos-workstation select {
    border-color: var(--pos-border);
    color: var(--pos-text);
    background-color: #0c1421;
}

.pos-workstation input::placeholder {
    color: #69758a;
}

.pos-workstation select option {
    color: #fff;
    background: #111a29;
}

.pos-workstation .field > span {
    color: var(--pos-muted);
}

.app-shell .pos-workstation .pos-products {
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 9px;
    padding: 11px;
}

.app-shell .pos-workstation .product-card {
    --product-color: #ff7a2e;
    position: relative;
    min-height: 118px;
    padding: 13px;
    overflow: hidden;
    border: 1px solid #2a374c;
    border-top: 3px solid var(--product-color);
    border-radius: 12px;
    color: var(--pos-text);
    background: #182235;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .14);
}

.app-shell .pos-workstation .product-card:nth-child(6n + 2) { --product-color: #2dc7b3; }
.app-shell .pos-workstation .product-card:nth-child(6n + 3) { --product-color: #f4bf4f; }
.app-shell .pos-workstation .product-card:nth-child(6n + 4) { --product-color: #8c7cf0; }
.app-shell .pos-workstation .product-card:nth-child(6n + 5) { --product-color: #e86783; }
.app-shell .pos-workstation .product-card:nth-child(6n + 6) { --product-color: #55a8f6; }

.app-shell .pos-workstation .product-card:hover {
    transform: translateY(-3px);
    border-color: var(--product-color);
    border-top-color: var(--product-color);
    background: #202d43;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .24);
}

.app-shell .pos-workstation .product-card strong {
    color: #f8fafc;
    font-size: .8rem;
    line-height: 1.3;
}

.app-shell .pos-workstation .product-card small {
    color: var(--pos-muted);
}

.app-shell .pos-workstation .product-card .price {
    align-self: flex-start;
    padding: 5px 7px;
    border-radius: 7px;
    color: #fff;
    background: color-mix(in srgb, var(--product-color) 28%, #111827);
    font-size: .76rem;
}

/* Inventory and production catalogue imagery */
.catalogue-item-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 210px;
}

.catalogue-thumb,
.production-thumb {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 11px;
    object-fit: cover;
    border: 1px solid var(--line);
    background: #f4ede3;
    box-shadow: 0 4px 10px rgba(48, 35, 21, .08);
}

.catalogue-placeholder {
    display: inline-grid;
    place-items: center;
    color: var(--orange-dark);
    background: linear-gradient(145deg, #f7efe4, #eadbc8);
}

.catalogue-placeholder.large { width: 88px; height: 88px; border-radius: 18px; font-size: 1.8rem; }
.catalogue-edit-image { display: grid; width: 180px; height: 150px; object-fit: cover; border-radius: 16px; margin-bottom: 12px; }
.catalogue-inactive { opacity: .62; }
.table-subtext { display: block; margin-top: 3px; color: var(--muted); }
.table-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.table-actions form { margin: 0; }

.inventory-form-layout {
    display: grid;
    grid-template-columns: minmax(160px, 190px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.image-upload-panel {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 16px;
    border: 1px dashed #d8b898;
    border-radius: 16px;
    background: #fffaf4;
    text-align: center;
}
.image-upload-panel small { color: var(--muted); }
.image-upload-panel input { width: 100%; font-size: .78rem; }
.compact-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: .82rem; }
.compact-checks label { display: inline-flex; align-items: center; gap: 6px; }

.production-item { display: flex; align-items: center; gap: 9px; }
.production-thumb { width: 38px; height: 38px; flex-basis: 38px; border-color: rgba(255,255,255,.12); }

.app-shell .pos-workstation .product-card { padding: 0; min-height: 190px; }
.app-shell .pos-workstation .product-card-media { display: block; height: 92px; overflow: hidden; background: #222d3e; }
.app-shell .pos-workstation .product-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.app-shell .pos-workstation .product-card:hover .product-card-media img { transform: scale(1.06); }
.app-shell .pos-workstation .product-card-placeholder { display: grid; height: 100%; place-items: center; color: var(--product-color); font-size: 1.6rem; }
.app-shell .pos-workstation .product-card-copy { padding: 0 11px; }
.app-shell .pos-workstation .product-card .price { margin: 0 11px 11px; }

@media (max-width: 720px) {
    .inventory-form-layout { grid-template-columns: 1fr; }
    .image-upload-panel { min-height: 150px; }
    .catalogue-edit-image { width: 100%; height: 180px; }
}

.app-shell .pos-workstation .pos-ticket-head {
    padding: 12px;
    border-bottom-color: var(--pos-border);
    background: #0d1522;
}

.app-shell .pos-workstation .pos-ticket-items {
    padding: 5px 12px;
    background: #111a29;
}

.pos-workstation .pos-ticket-items .empty-state {
    color: #d8e0ea;
}

.pos-workstation .pos-ticket-items .empty-state-icon {
    color: #ff8a49;
    background: rgba(255, 122, 46, .12);
}

.pos-workstation .pos-ticket-items .empty-state p,
.pos-workstation .ticket-item small {
    color: var(--pos-muted);
}

.app-shell .pos-workstation .ticket-item {
    border-bottom-color: var(--pos-border);
}

.pos-workstation .quantity-control button {
    border-color: #344158;
    color: #e7edf5;
    background: #1c283b;
}

.pos-workstation .quantity-control button:hover {
    border-color: #ff7a2e;
    background: #2a3446;
}

.app-shell .pos-workstation .pos-ticket-total {
    padding: 13px;
    border-top-color: var(--pos-border);
    background: #0b121e;
}

.pos-workstation .total-row {
    color: var(--pos-muted);
}

.pos-workstation .total-row.grand {
    border-top-color: #354158;
    color: #fff;
    font-size: 1.14rem;
}

.pos-workstation #pos-discount-btn {
    border-color: rgba(244, 191, 79, .45);
    color: #ffd779;
    background: rgba(244, 191, 79, .08);
}

.pos-workstation #pos-submit {
    min-height: 42px;
    border-color: #28a868;
    color: #06150e;
    background: #42d486;
    box-shadow: 0 9px 22px rgba(66, 212, 134, .19);
}

.pos-workstation #pos-submit:hover {
    background: #62e39e;
}

.pos-workstation .pos-products,
.pos-workstation .pos-ticket-items,
.pos-workstation .pos-categories {
    scrollbar-color: #3a475d #0d1522;
    scrollbar-width: thin;
}

.pos-workstation:fullscreen,
.pos-workstation.is-fullscreen {
    width: 100vw;
    height: 100vh !important;
    min-height: 100vh;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: var(--pos-bg);
}

.pos-workstation:fullscreen .pos-terminal-bar,
.pos-workstation.is-fullscreen .pos-terminal-bar {
    padding-inline: 12px;
}

@media (max-width: 980px) {
    .app-shell .pos-workstation {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(480px, auto) minmax(420px, auto);
    }

    .pos-terminal-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .pos-terminal-context {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .pos-workstation:fullscreen,
    .pos-workstation.is-fullscreen {
        height: 100vh !important;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-rows: auto minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .pos-terminal-context label,
    .pos-terminal-context select {
        width: 100%;
    }

    .pos-cashier {
        border-left: 0;
        padding-left: 0;
    }

    .pos-workstation:fullscreen,
    .pos-workstation.is-fullscreen {
        overflow-y: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(460px, auto) minmax(420px, auto);
    }
}

/* Reservation report paper */
.reservation-report-paper {
    width: min(100%, 1180px);
    min-height: 780px;
    margin: 0 auto 28px;
    padding: 28px 32px 20px;
    color: #20231f;
    background: #fff;
    box-shadow: 0 16px 45px rgba(36, 31, 24, .11);
}

.reservation-report-letterhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #222a22;
}

.reservation-report-brand,
.reservation-report-document {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reservation-report-brand img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 9px;
    background: #f2eee5;
}

.reservation-report-brand strong,
.reservation-report-brand span,
.reservation-report-document span,
.reservation-report-document strong,
.reservation-report-document small {
    display: block;
}

.reservation-report-brand strong {
    font-family: var(--display-font);
    font-size: 1.06rem;
    letter-spacing: .01em;
}

.reservation-report-brand span,
.reservation-report-document small {
    margin-top: 2px;
    color: #74786f;
    font-size: .67rem;
}

.reservation-report-document {
    align-items: flex-end;
    flex-direction: column;
    gap: 1px;
    text-align: right;
}

.reservation-report-document span {
    color: #7b5833;
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.reservation-report-document strong {
    font-size: .78rem;
    letter-spacing: .05em;
}

.reservation-report-title {
    padding: 22px 0 18px;
}

.reservation-report-title span {
    color: #6b4b2d;
    font-size: .69rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.reservation-report-title h2 {
    margin: 4px 0 3px;
    color: #20251f;
    font-family: var(--display-font);
    font-size: clamp(1.35rem, 3vw, 2rem);
}

.reservation-report-title p {
    margin: 0;
    color: #74786f;
    font-size: .7rem;
}

.reservation-report-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #e4e0d7;
    border-radius: 10px;
    background: #e4e0d7;
}

.reservation-report-kpis.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reservation-report-kpis > div {
    min-width: 0;
    padding: 11px 13px;
    background: #faf9f6;
}

.reservation-report-kpis span,
.reservation-report-kpis strong,
.reservation-report-kpis small {
    display: block;
}

.reservation-report-kpis span {
    color: #73786f;
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reservation-report-kpis strong {
    margin: 3px 0 1px;
    overflow: hidden;
    color: #20251f;
    font-size: 1.08rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reservation-report-kpis small {
    overflow: hidden;
    color: #7b7f77;
    font-size: .62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reservation-report-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.reservation-report-section {
    margin-bottom: 20px;
}

.reservation-report-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 7px;
    padding-bottom: 6px;
    border-bottom: 1px solid #31372f;
}

.reservation-report-section-head h3 {
    margin: 0;
    color: #272d26;
    font-family: var(--display-font);
    font-size: .89rem;
}

.reservation-report-section-head span {
    color: #7a7e75;
    font-size: .61rem;
}

.reservation-report-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.reservation-report-table {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #30352e;
    font-size: .67rem;
}

.reservation-report-table th,
.reservation-report-table td {
    padding: 7px 8px;
    border: 0 !important;
    text-align: left;
    vertical-align: top;
}

.reservation-report-table th {
    color: #6e736a;
    background: #f2f0e9;
    font-size: .56rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.reservation-report-table tbody tr:nth-child(even) td {
    background: #fcfbf8;
}

.reservation-report-table td strong,
.reservation-report-table td small {
    display: block;
}

.reservation-report-table td strong {
    color: #252a24;
    font-size: .68rem;
}

.reservation-report-table td small {
    margin-top: 2px;
    color: #7a7e75;
    font-size: .58rem;
    line-height: 1.35;
}

.reservation-report-table .num {
    text-align: right;
    white-space: nowrap;
}

.reservation-report-register {
    min-width: 900px;
}

.reservation-report-insights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 2px 0 20px;
    padding: 13px 15px;
    border-radius: 9px;
    color: #f6f2e9;
    background: #29332b;
}

.reservation-report-insights span,
.reservation-report-insights strong {
    display: block;
}

.reservation-report-insights span {
    color: #bfc8bc;
    font-size: .57rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.reservation-report-insights strong {
    margin-top: 3px;
    font-size: .78rem;
}

.reservation-report-empty {
    padding: 28px 16px;
    color: #777c73;
    background: #faf9f6;
    text-align: center;
    font-size: .72rem;
}

.reservation-report-footer {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 18px;
    margin-top: 28px;
    padding-top: 10px;
    border-top: 1px solid #d9d5cb;
    color: #858980;
    font-size: .57rem;
}

.reservation-report-footer strong {
    color: #4e554d;
}

@media (max-width: 900px) {
    .reservation-report-paper {
        padding: 20px;
    }

    .reservation-report-kpis,
    .reservation-report-kpis.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reservation-report-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 620px) {
    .reservation-report-paper {
        padding: 15px 13px;
        box-shadow: none;
    }

    .reservation-report-letterhead {
        align-items: flex-start;
        gap: 12px;
    }

    .reservation-report-brand img {
        width: 42px;
        height: 42px;
    }

    .reservation-report-brand strong {
        font-size: .86rem;
    }

    .reservation-report-document small,
    .reservation-report-brand span {
        font-size: .56rem;
    }

    .reservation-report-kpis,
    .reservation-report-kpis.compact,
    .reservation-report-insights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reservation-report-footer {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

@media print {
    @page {
        size: A4 landscape;
        margin: 9mm;
    }

    body {
        background: #fff !important;
    }

    body * {
        visibility: hidden;
    }

    .reservation-report-paper,
    .reservation-report-paper * {
        visibility: visible;
    }

    .reservation-report-paper {
        position: absolute;
        inset: 0;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .reservation-report-table-wrap {
        overflow: visible;
    }

    .reservation-report-section,
    .reservation-report-kpis,
    .reservation-report-insights {
        break-inside: avoid;
    }

    .reservation-report-table {
        font-size: 7pt;
    }

    .reservation-report-table th,
    .reservation-report-table td {
        padding: 4px 5px;
    }
}
/* Ku-Wa Intelligence assistant */
.ai-assistant{position:fixed;z-index:1300;inset:0;pointer-events:none}.ai-assistant-fab{pointer-events:auto;position:absolute;right:22px;bottom:22px;height:52px;border:0;border-radius:18px;padding:0 17px 0 8px;background:#15221a;color:#fff;display:flex;align-items:center;gap:10px;box-shadow:0 14px 35px rgba(16,32,22,.27);cursor:pointer;overflow:hidden;transition:.25s transform,.25s box-shadow}.ai-assistant-fab:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(16,32,22,.34)}.ai-fab-glow{position:absolute;inset:-30px auto auto -30px;width:80px;height:80px;background:rgba(255,101,24,.3);filter:blur(14px)}.ai-fab-icon{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:13px;background:linear-gradient(145deg,#ff7b31,#f14c05);font-weight:900;font-size:12px;letter-spacing:.04em}.ai-fab-label{font-weight:800;font-size:13px}.ai-assistant-backdrop{position:absolute;inset:0;background:rgba(8,15,11,.24);opacity:0;transition:opacity .26s;pointer-events:none;backdrop-filter:blur(2px)}.ai-assistant-drawer{pointer-events:auto;position:absolute;right:0;top:0;bottom:0;width:min(470px,100vw);background:#f6f5f0;box-shadow:-22px 0 55px rgba(10,20,14,.2);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;transform:translateX(104%);transition:transform .34s cubic-bezier(.2,.75,.25,1);overflow:hidden}.ai-assistant.is-open .ai-assistant-drawer{transform:none}.ai-assistant.is-open .ai-assistant-backdrop{opacity:1;pointer-events:auto}.ai-assistant.is-open .ai-assistant-fab{opacity:0;pointer-events:none}.ai-assistant-head{min-height:72px;padding:13px 15px;background:linear-gradient(135deg,#111d16,#203127);color:#fff;display:flex;align-items:center;gap:11px}.ai-assistant-head>div:nth-child(2){min-width:0;flex:1}.ai-assistant-head strong{display:block;font-size:15px}.ai-assistant-head small{display:flex;align-items:center;gap:6px;color:#bdc8c0;font-size:10px;margin-top:3px}.ai-assistant-head small i{width:6px;height:6px;border-radius:50%;background:#56d589;box-shadow:0 0 0 4px rgba(86,213,137,.12)}.ai-assistant-mark{width:43px;height:43px;border-radius:15px;display:grid;place-items:center;background:#ff6518;color:#fff;font-size:12px;font-weight:900;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}.ai-assistant-mark span{position:absolute;width:31px;height:31px;border:1px solid rgba(255,255,255,.35);border-radius:50%;animation:aiOrbit 5s linear infinite}.ai-assistant-icon-btn{border:1px solid rgba(255,255,255,.16);color:#fff;background:rgba(255,255,255,.07);width:32px;height:32px;border-radius:10px;font-size:18px;cursor:pointer}.ai-assistant-icon-btn:hover{background:rgba(255,255,255,.14)}.ai-assistant-context{padding:10px 16px;border-bottom:1px solid #e0ded6;background:#fff;display:grid;grid-template-columns:auto 1fr;gap:1px 8px;align-items:center}.ai-assistant-context span{text-transform:uppercase;letter-spacing:.12em;font-size:8px;font-weight:900;color:#f05a13}.ai-assistant-context strong{font-size:11px;color:#1d2a22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ai-assistant-context small{grid-column:2;color:#7d877f;font-size:9px}.ai-assistant-messages{overflow:auto;padding:19px 16px 24px;scrollbar-width:thin}.ai-welcome{text-align:center;padding:20px 3px}.ai-welcome-orbit{position:relative;margin:0 auto 17px;width:67px;height:67px;border-radius:24px;background:#15221a;display:grid;place-items:center}.ai-welcome-orbit:before{content:'AI';color:#fff;font-size:17px;font-weight:900}.ai-welcome-orbit i{position:absolute;inset:-7px;border:1px dashed rgba(240,90,19,.5);border-radius:27px;animation:aiOrbit 12s linear infinite}.ai-welcome h2{margin:0;color:#19271e;font:800 21px/1.2 inherit}.ai-welcome p{margin:8px auto 19px;color:#758078;font-size:12px;line-height:1.6;max-width:340px}.ai-prompt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}.ai-prompt-grid button,.ai-followups button{border:1px solid #dfddd5;background:#fff;color:#2e3d33;border-radius:13px;padding:11px;font-size:10px;font-weight:700;line-height:1.35;text-align:left;cursor:pointer;transition:.2s}.ai-prompt-grid button:hover,.ai-followups button:hover{border-color:#ff8b50;color:#d94805;transform:translateY(-1px)}.ai-message{margin:0 0 15px}.ai-message-user{margin-left:47px;background:#1a2a20;color:#fff;border-radius:17px 17px 4px 17px;padding:11px 13px;box-shadow:0 7px 16px rgba(20,35,25,.1)}.ai-message-user p{margin:0;font-size:12px;line-height:1.55}.ai-message-assistant{background:#fff;border:1px solid #e4e1d9;border-radius:4px 18px 18px 18px;padding:14px;box-shadow:0 8px 22px rgba(24,37,28,.06)}.ai-message-label{display:flex;align-items:center;gap:8px;margin-bottom:9px}.ai-message-label span{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#ff6518;color:#fff;font-size:8px;font-weight:900}.ai-message-label strong{font-size:11px;color:#25352b}.ai-answer p{font-size:11.5px;line-height:1.65;color:#4d5a52;margin:0 0 8px}.ai-insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:11px 0}.ai-insight-card{position:relative;padding:10px;border-radius:11px;background:#f6f6f2;border-left:3px solid #95a098}.ai-insight-card.tone-good{border-color:#3fab70;background:#f0faf4}.ai-insight-card.tone-warning{border-color:#e4a128;background:#fff9e9}.ai-insight-card.tone-danger{border-color:#d85246;background:#fff2f0}.ai-insight-card small{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#78827b;font-weight:800}.ai-insight-card strong{display:block;font-size:15px;color:#1c2b21;margin:3px 0}.ai-insight-card p{font-size:9px;line-height:1.4;color:#667168;margin:0}.ai-visual-card{border:1px solid #e5e2db;border-radius:13px;margin:11px 0;padding:11px;background:#fbfbf8}.ai-visual-card h3{font-size:10px;text-transform:uppercase;letter-spacing:.07em;margin:0 0 10px;color:#3c4b41}.ai-table-wrap{overflow:auto;max-height:260px}.ai-table-wrap table{width:100%;border-collapse:collapse;font-size:9px;white-space:nowrap}.ai-table-wrap th{position:sticky;top:0;background:#efeee9;color:#526057;text-align:left;padding:7px}.ai-table-wrap td{border-top:1px solid #ebe8e1;padding:7px;color:#536057}.ai-chart-row{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:8px;margin:7px 0}.ai-chart-label{font-size:8px;color:#647067;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ai-chart-bars{display:grid;gap:3px}.ai-chart-bar{height:15px;background:#ebeae4;border-radius:5px;overflow:visible}.ai-chart-bar i{display:block;width:var(--bar-width);height:100%;min-width:4px;background:var(--bar-color);border-radius:5px;position:relative;transition:width .65s}.ai-chart-bar b{position:absolute;left:calc(100% + 5px);top:1px;font-size:7px;color:#5d685f;white-space:nowrap}.ai-chart-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.ai-chart-legend span{font-size:8px;color:#667168}.ai-chart-legend span:before{content:'';display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--legend-color);margin-right:4px}.ai-line-chart{display:block;width:100%;height:155px;background:linear-gradient(#f5f4ef 1px,transparent 1px);background-size:100% 25%}.ai-line-labels{display:flex;justify-content:space-between;gap:4px}.ai-line-labels span{font-size:7px;color:#7b857d;white-space:nowrap;overflow:hidden}.ai-doughnut-layout{display:flex;align-items:center;gap:18px}.ai-doughnut{width:115px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;flex:none}.ai-doughnut>span{width:66px;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-content:center;text-align:center}.ai-doughnut strong{font-size:14px;color:#233329}.ai-doughnut small{font-size:7px;color:#778078}.ai-doughnut-legend{flex:1;min-width:0}.ai-doughnut-legend div{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;padding:4px 0}.ai-doughnut-legend i{width:7px;height:7px;border-radius:2px}.ai-doughnut-legend span,.ai-doughnut-legend strong{font-size:8px;color:#59665d}.ai-data-scope,.ai-model-note{display:block;color:#8a938c;font-size:8px;margin-top:8px}.ai-model-note{text-align:right}.ai-followups{display:grid;gap:6px;margin-top:10px}.ai-followups button{padding:8px 10px;font-size:9px}.ai-message-loading{display:flex;align-items:center;gap:5px;min-height:48px}.ai-message-loading span{width:6px;height:6px;border-radius:50%;background:#f36521;animation:aiPulse 1.1s infinite}.ai-message-loading span:nth-child(2){animation-delay:.15s}.ai-message-loading span:nth-child(3){animation-delay:.3s}.ai-message-loading small{margin-left:5px;font-size:9px;color:#78827b}.ai-message-error{border:1px solid #f0c9c4;background:#fff4f2;border-radius:13px;padding:11px;color:#973a31}.ai-message-error strong{font-size:11px}.ai-message-error p{font-size:10px;margin:4px 0 0;line-height:1.45}.ai-assistant-composer{padding:11px 14px 13px;background:#fff;border-top:1px solid #e2dfd7}.ai-composer-box{display:flex;align-items:flex-end;gap:8px;padding:7px 7px 7px 12px;border:1px solid #d8d6cf;border-radius:16px;background:#fafaf7;box-shadow:0 5px 15px rgba(23,36,27,.04)}.ai-composer-box:focus-within{border-color:#f47a3c;box-shadow:0 0 0 3px rgba(244,122,60,.1)}.ai-composer-box textarea{flex:1;resize:none;border:0!important;box-shadow:none!important;background:transparent!important;padding:6px 0!important;min-height:32px;max-height:120px;font-size:12px;line-height:1.45}.ai-composer-box button{border:0;border-radius:11px;background:#ff6518;color:#fff;min-width:53px;height:35px;font-size:11px;font-weight:800;cursor:pointer}.ai-composer-box button span{display:none}.ai-composer-box button:disabled{opacity:.5}.ai-assistant-composer>small{display:block;text-align:center;color:#9a9f9b;font-size:8px;margin-top:7px}.ai-drawer-open{overflow:hidden}@keyframes aiOrbit{to{transform:rotate(360deg)}}@keyframes aiPulse{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@media(max-width:600px){.ai-assistant-fab{right:13px;bottom:13px;height:48px}.ai-fab-label{display:none}.ai-assistant-fab{padding:0 6px}.ai-assistant-drawer{width:100vw}.ai-assistant-head{min-height:64px}.ai-assistant-messages{padding:14px 11px 20px}.ai-prompt-grid{grid-template-columns:1fr}.ai-insight-grid{grid-template-columns:1fr}.ai-doughnut-layout{align-items:flex-start}}
.ai-settings-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}.ai-settings-summary>div{padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(145deg,#fafaf7,#fff)}.ai-settings-summary small{display:block;text-transform:uppercase;letter-spacing:.07em;font-size:8px;font-weight:800;color:var(--muted);margin-bottom:4px}.ai-settings-summary strong{font-size:14px;color:var(--ink)}.ai-settings-summary strong span{font-size:9px;color:var(--muted)}.ai-provider-panel{border:1px solid var(--line);border-radius:13px;padding:13px;background:#fbfbf8}.ai-provider-panel .field+.field{margin-top:9px}.ai-provider-title{display:flex;justify-content:space-between;gap:8px;align-items:center;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--line)}.ai-provider-title strong{font-size:13px}.ai-provider-title span{font-size:8px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.ai-legacy-settings{border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin:13px 0}.ai-legacy-settings summary{cursor:pointer;font-size:10px;font-weight:800;color:var(--ink)}.ai-legacy-settings[open] summary{margin-bottom:12px}.ai-toggle-stack{display:grid;align-content:center;gap:9px}.ai-model-catalogue{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;border-radius:12px;background:#18271e;color:#fff;margin-top:13px}.ai-model-catalogue>div{margin-right:auto}.ai-model-catalogue>div strong,.ai-model-catalogue>div small{display:block}.ai-model-catalogue>div strong{font-size:11px}.ai-model-catalogue>div small{font-size:8px;color:#9daaa1}.ai-model-catalogue>span{padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.07);font-size:9px;font-weight:700;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1px 5px}.ai-model-catalogue>span i{width:6px;height:6px;border-radius:50%;background:#9baba0;grid-row:1/3}.ai-model-catalogue>span i.primary{background:#ff7028}.ai-model-catalogue>span i.fallback{background:#e8bb55}.ai-model-catalogue>span small{display:block;grid-column:2;font-size:7px;color:#a9b5ad;font-weight:500}.ai-privacy-note{margin:12px 0 0;font-size:9px}.ai-privacy-note strong{color:inherit}@media(max-width:900px){.ai-settings-summary{grid-template-columns:1fr 1fr}}@media(max-width:520px){.ai-settings-summary{grid-template-columns:1fr}.ai-model-catalogue{align-items:stretch}.ai-model-catalogue>div{width:100%}}