/* Suite Inn public pages — burgundy, warm stone, readable type. */
:root {
    --primary-color:#8b2333;
    --primary-hover:#702030;
    --secondary-color:#ead4ae;
    --text-color:#38272b;
    --muted-color:#62504f;
    --bg-color:#faf7f2;
    --surface-color:#fff;
    --line-color:#dcd1c8;
    --footer-color:#43141d;
    --radius:14px;
    --shadow:0 12px 40px rgba(67,20,29,.06);
    --space:clamp(20px,4vw,64px);
    --font-body:'Jost',sans-serif
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:100px
}
body {
    margin:0;
    background:var(--bg-color);
    color:var(--text-color);
    font:400 16px/1.8 var(--font-body)
}
html[lang=ar] {
    --font-body:'Tajawal',sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
img {
    display:block;
    max-width:100%;
    height:auto
}
button,input,select,textarea {
    font:inherit
}
button,a,input,select,textarea,summary {
    -webkit-tap-highlight-color:transparent
}
a,button,input,select,textarea,summary {
    outline-offset:5px
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
    outline:3px solid #78551f
}
h1,h2,h3,p {
    margin-block:0 1rem
}
h1,h2,h3 {
    line-height:1.25;
    font-weight:500;
    color:var(--primary-color)
}
h1 {
    font-size:clamp(2.6rem,5.5vw,5rem);
    max-width:20ch
}
h2 {
    font-size:clamp(1.8rem,3vw,2.8rem)
}
h3 {
    font-size:1.45rem
}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3 {
    font-family:'Cormorant Garamond',serif;
    font-weight:500
}
p {
    overflow-wrap:anywhere
}
main {
    min-height:65vh
}
.pub-shell,.shell {
    width:min(1280px,100% - 2*var(--space));
    margin-inline:auto
}
.pub-skip {
    position:fixed;
    inset-block-start:-200px;
    inset-inline-start:1rem;
    z-index:100;
    background:#fff;
    padding:1rem
}
.pub-skip:focus {
    inset-block-start:1rem
}
.pub-header {
    position:sticky;
    inset-block-start:0;
    background:rgba(250,247,242,.98);
    border-bottom:1px solid var(--line-color);
    z-index:30
}
.pub-header-bar {
    min-height:100px;
    display:flex;
    gap:24px;
    align-items:center;
    justify-content:space-between
}
.pub-brand {
    display:grid;
    flex-shrink:0;
    line-height:1;
    text-align:center;
    color:var(--primary-color);
    gap:8px
}
.pub-brand strong {
    font:500 34px/1 'Cormorant Garamond',serif;
    letter-spacing:.01em
}
.pub-brand span {
    font-size:12px;
    letter-spacing:.14em
}
.pub-nav {
    display:flex;
    gap:clamp(12px,2vw,26px);
    font-size:15px
}
.pub-nav a:hover,.pub-language:hover {
    text-decoration:underline;
    text-underline-offset:6px
}
.pub-header-actions {
    display:flex;
    align-items:center;
    gap:18px
}
.pub-language {
    font-size:14px
}
.pub-button,.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    gap:10px;
    padding:12px 24px;
    border:1px solid var(--primary-color);
    border-radius:4px;
    background:var(--primary-color);
    color:#fff9f3;
    cursor:pointer;
    font-weight:500;
    line-height:1.5;
    text-align:center;
    transition:background-color .18s,border-color .18s
}
.pub-button:hover,.btn:hover {
    background:var(--primary-hover);
    border-color:var(--primary-hover)
}
.pub-button-small {
    font-size:14px;
    padding:10px 18px;
    min-height:44px
}
.pub-button-outline,.btn--outline {
    background:transparent;
    color:var(--primary-color)
}
.pub-button-outline:hover,.btn--outline:hover {
    color:#fff9f3
}
.pub-mobile-nav {
    display:none
}
.eyebrow {
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:13px;
    font-weight:700;
    color:#78551f;
    margin-bottom:18px
}
.page-intro {
    padding-block:clamp(50px,7vw,96px) 46px;
    border-bottom:1px solid var(--line-color)
}
.intro-copy {
    font-size:clamp(1.05rem,2vw,1.2rem);
    max-width:65ch;
    color:var(--muted-color);
    margin-bottom:0
}
.pub-section {
    padding-block:clamp(40px,6vw,80px)
}
.pub-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px
}
.pub-card {
    min-width:0;
    background:var(--surface-color);
    border:1px solid var(--line-color);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow)
}
.pub-card-image {
    aspect-ratio:4/3;
    object-fit:cover;
    width:100%
}
.pub-card-body {
    padding:clamp(20px,2.2vw,32px)
}
.pub-card-body p {
    color:var(--muted-color)
}
.pub-card-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    margin-top:22px
}
.pub-card-actions .pub-button {
    flex-grow:1
}
.pub-link {
    color:var(--primary-color);
    text-decoration:underline;
    text-underline-offset:5px
}
.pub-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    margin-block:18px;
    color:var(--muted-color);
    font-size:14px
}
.pub-chips {
    list-style:none;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px
}
.pub-chips li {
    border:1px solid var(--line-color);
    border-radius:30px;
    padding:4px 12px;
    font-size:14px
}
.pub-empty,.pub-message {
    padding:24px;
    border:1px solid var(--line-color);
    border-inline-start:4px solid var(--primary-color);
    background:#fff;
    line-height:1.8
}
.pub-message {
    margin-block:24px
}
.pub-split {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:clamp(28px,5vw,80px);
    align-items:start
}
.pub-split-image {
    width:100%;
    aspect-ratio:5/6;
    object-fit:cover;
    border-radius:var(--radius)
}
.pub-prose {
    white-space:pre-line;
    overflow-wrap:anywhere;
    font-size:1.1rem;
    line-height:2
}
.pub-prose:empty {
    display:none
}
.pub-policy {
    max-width:880px;
    margin-inline:0;
    background:#fff;
    border-top:3px solid var(--primary-color);
    padding:clamp(24px,5vw,64px);
    box-shadow:var(--shadow)
}
.pub-policy-note {
    font-size:.9rem;
    color:var(--muted-color);
    margin-top:28px
}
.pub-facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-block:30px
}
.pub-facts div {
    border-top:1px solid var(--line-color);
    padding-top:14px
}
.pub-facts dt {
    color:var(--muted-color);
    font-size:14px
}
.pub-facts dd {
    margin:4px 0;
    font-weight:500
}
.pub-gallery {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px
}
.pub-gallery figure {
    margin:0
}
.pub-gallery img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:var(--radius)
}
.pub-gallery figcaption {
    padding-block:14px;
    color:var(--muted-color)
}
.pub-gallery a {
    display:block
}
.pub-banner {
    background:var(--primary-color);
    color:#fff9f3;
    padding-block:46px
}
.pub-banner .pub-shell {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}
.pub-banner h2 {
    color:#fff9f3;
    margin:0
}
.pub-banner .pub-button {
    background:#fff9f3;
    color:var(--primary-color);
    border-color:#fff9f3
}
.pub-banner .pub-button:hover {
    background:var(--secondary-color)
}
.pub-stack {
    display:grid;
    gap:40px
}
.pub-footer {
    padding-block:60px 22px;
    background:var(--footer-color);
    color:#f1ddd8
}
.pub-footer-grid {
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1fr;
    gap:40px
}
.pub-footer h2 {
    font:700 1rem/1.6 var(--font-body)!important;
    color:#ead4ae
}
.pub-footer a {
    display:block;
    margin-bottom:9px;
    overflow-wrap:anywhere
}
.pub-footer a:hover {
    text-decoration:underline;
    text-underline-offset:4px
}
.pub-footer .pub-brand {
    display:grid;
    color:#fff9f3;
    text-align:start;
    max-width:max-content;
    margin-bottom:24px
}
.footer-copy {
    max-width:36ch;
    color:#f1ddd8
}
.pub-footer-bottom {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:16px;
    border-top:1px solid #80505a;
    margin-top:36px;
    padding-top:22px;
    font-size:13px
}
.pub-footer-bottom a {
    margin:0
}
.pub-form-grid,.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px
}
.pub-field,.field {
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0
}
.pub-field-wide,.field-wide {
    grid-column:1/-1
}
.pub-input,.form-control,.form-select {
    width:100%;
    min-height:48px;
    border:1px solid #a88c86;
    border-radius:4px;
    background:white;
    color:var(--text-color);
    padding:10px 14px
}
.pub-input::placeholder {
    color:var(--muted-color);
    opacity:1
}
.pub-input:disabled {
    background:#efe9e2;
    color:#62504f
}
.pub-check {
    display:flex;
    gap:10px;
    align-items:start
}
.pub-check input {
    width:20px;
    height:20px;
    accent-color:var(--primary-color)
}
.pub-table-wrap {
    overflow-x:auto
}
.pub-table {
    width:100%;
    border-collapse:collapse;
    background:#fff
}
.pub-table th,.pub-table td {
    padding:14px;
    text-align:start;
    border-bottom:1px solid var(--line-color)
}
.pub-table th {
    color:var(--primary-color);
    background:#f0e7df
}
.muted {
    color:var(--muted-color)
}
.pub-price {
    font-size:1.6rem;
    font-weight:700;
    color:var(--primary-color)
}
@media(min-width:1600px) {
    .pub-shell,.shell {
    width:min(1440px,100% - 2*var(--space))
}
}
@media(max-width:1100px) {
    .pub-nav {
    display:none
}
.pub-mobile-nav {
    display:block;
    position:relative
}
.pub-mobile-nav summary {
    cursor:pointer;
    min-height:44px;
    display:flex;
    align-items:center;
    font-weight:700;
    color:var(--primary-color)
}
.pub-mobile-nav nav {
    position:absolute;
    inset-inline-end:0;
    inset-block-start:100%;
    width:min(300px,calc(100vw - 40px));
    background:#fff;
    border:1px solid var(--line-color);
    border-radius:8px;
    box-shadow:var(--shadow);
    padding:14px;
    z-index:40
}
.pub-mobile-nav a {
    display:block;
    padding:10px 14px
}
.pub-mobile-nav a:hover {
    background:#f6ede8
}
.pub-header-actions {
    margin-inline-start:auto
}
.pub-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.pub-footer-grid {
    grid-template-columns:1fr 1fr
}
.pub-gallery {
    grid-template-columns:1fr 1fr
}
}
@media(max-width:700px) {
    .pub-header-bar {
    min-height:80px;
    gap:14px;
    flex-wrap:wrap;
    padding-block:12px
}
.pub-brand strong {
    font-size:30px
}
.pub-header-actions {
    gap:12px
}
.pub-header-actions .pub-button {
    font-size:12px;
    padding:8px 12px;
    min-height:44px
}
.pub-language {
    font-size:13px
}
.pub-mobile-nav summary {
    font-size:13px
}
.page-intro {
    padding-block:44px 32px
}
.pub-grid,.pub-split {
    grid-template-columns:minmax(0,1fr)
}
.pub-split {
    gap:28px
}
.pub-split-image {
    aspect-ratio:4/3
}
.pub-gallery {
    gap:16px
}
.pub-gallery figcaption {
    font-size:14px
}
.pub-footer-grid {
    gap:30px
}
.pub-footer-grid>div:first-child {
    grid-column:1/-1
}
.pub-banner .pub-shell {
    display:grid
}
.pub-form-grid,.form-grid {
    grid-template-columns:1fr
}
.pub-card-actions {
    gap:14px
}
.pub-facts {
    gap:16px
}
}
@media(max-width:390px) {
    .pub-header-bar {
    gap:12px
}
.pub-header-actions {
    gap:10px
}
.pub-brand strong {
    font-size:26px
}
.pub-header-actions .pub-button {
    font-size:11px;
    padding-inline:9px
}
.pub-gallery {
    grid-template-columns:1fr
}
.pub-footer-grid {
    grid-template-columns:1fr
}
.pub-footer-grid>div:first-child {
    grid-column:auto
}
}
@media(prefers-reduced-motion:reduce) {
    html {
    scroll-behavior:auto
}
* {
    transition:none!important
}
}

.booking-policy-heading {
    margin-block-start: 32px;
}

.contact-map {
    display: block;
    width: 100%;
    min-height: 440px;
    border: 0;
}
