:root {
    color-scheme: dark;
    --ink: #fbf7ef;
    --muted: #b8c4cf;
    --soft: #dee3e5;
    --deep: #0c2340;
    --night: #0d2742;
    --panel: rgba(13, 39, 66, .76);
    --panel-strong: rgba(12, 35, 64, .92);
    --line: rgba(217, 166, 71, .22);
    --violet: #e8b03d;
    --violet-deep: #102a44;
    --aqua: #d9a647;
    --ocean: #102a44;
    --gold: #e8b03d;
    --coral: #ff826d;
    --shadow: 0 26px 90px rgba(0, 0, 0, .42);
    --body-font: "Segoe UI", Arial, sans-serif;
    --display-font: "Segoe UI", Arial, sans-serif;
    --bg-photo-services: url("images/refresh/home-services-vivid.webp");
    --bg-photo-events: url("images/refresh/gallery-evento.webp");
    --bg-photo-blog: url("images/refresh/home-blog-vivid.webp");
    --bg-photo-team: url("images/refresh/home-testimonials-vivid.webp");
    --bg-photo-about: url("images/refresh/home-gallery-vivid.webp");
    --bg-photo-contact: url("images/refresh/home-contact-vivid.webp");
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 92% 2%, rgba(232, 176, 61, .13), transparent 28rem),
        radial-gradient(circle at 8% 30%, rgba(16, 42, 68, .68), transparent 24rem),
        linear-gradient(180deg, #102a44 0%, #0d2742 44%, #0c2340 100%);
    font-family: var(--body-font);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 14% 16%, rgba(255, 255, 255, .6) 0 1px, transparent 1.5px),
        radial-gradient(circle at 76% 12%, rgba(224, 210, 255, .65) 0 1px, transparent 1.5px),
        radial-gradient(circle at 54% 32%, rgba(160, 238, 255, .55) 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 62%, rgba(255, 232, 172, .58) 0 1px, transparent 1.5px);
    opacity: .5;
}

a {
    color: inherit;
}

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

h1, h2 {
    font-family: var(--display-font);
    font-weight: 400;
    letter-spacing: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .65rem;
    align-items: center;
    padding: .72rem clamp(.75rem, 2.4vw, 2rem);
    background: linear-gradient(90deg, rgba(12, 35, 64, .97), rgba(13, 39, 66, .92), rgba(16, 42, 68, .95));
    border-bottom: 1px solid rgba(217, 166, 71, .18);
    box-shadow: 0 14px 50px rgba(0, 0, 0, .28);
    backdrop-filter: blur(22px);
}

.brand {
    display: inline-flex;
    gap: .75rem;
    align-items: center;
    min-width: 218px;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: white;
    background:
        radial-gradient(circle at 35% 25%, #f7d98b, transparent 20%),
        radial-gradient(circle at 70% 18%, #e8b03d, transparent 22%),
        linear-gradient(145deg, #102a44, #0d2742 58%, #0c2340);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    box-shadow: 0 0 34px rgba(232, 176, 61, .25);
    font-weight: 900;
}

.brand-mark img {
    width: 34px;
    height: 34px;
}

.brand strong, .brand small {
    display: block;
}

.brand strong {
    font-family: var(--display-font);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
}

.brand small {
    color: var(--muted);
    font-size: .78rem;
}

.site-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: .05rem;
    justify-content: center;
}

.site-nav a {
    display: inline-flex;
    gap: .38rem;
    align-items: center;
    padding: .46rem .48rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #d8d0ec;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02rem;
    text-decoration: none;
}

.site-nav i {
    color: var(--gold);
    font-size: .86rem;
}

.site-nav a.active, .site-nav a:hover {
    color: white;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(232, 176, 61, .12);
}

.site-nav-group {
    position: relative;
    display: inline-flex;
}

.submenu-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.site-nav-parent {
    display: inline-flex;
    align-items: center;
}

.site-nav a.has-submenu {
    padding-right: .24rem;
}

.nav-submenu-toggle {
    display: inline-grid;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: -.14rem;
    place-items: center;
    color: var(--gold);
    background: rgba(232, 176, 61, .1);
    border: 1px solid rgba(232, 176, 61, .22);
    border-radius: 999px;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.nav-submenu-toggle i {
    color: currentColor;
    font-size: .58rem;
    line-height: 1;
}

.site-nav-group:hover .nav-submenu-toggle,
.site-nav-group:focus-within .nav-submenu-toggle {
    color: #fff5d4;
    background: rgba(232, 176, 61, .18);
    border-color: rgba(232, 176, 61, .42);
    transform: rotate(180deg);
}

.site-subnav {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    z-index: 30;
    display: grid;
    min-width: 220px;
    padding: .45rem;
    visibility: hidden;
    background: rgba(12, 35, 64, .98);
    border: 1px solid rgba(217, 166, 71, .2);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.site-nav-group:hover .site-subnav,
.site-nav-group:focus-within .site-subnav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.site-subnav a {
    justify-content: flex-start;
    width: 100%;
    border-radius: 7px;
    white-space: nowrap;
}

.language-switch {
    display: inline-flex;
    padding: .18rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.language-switch button {
    min-width: 42px;
    padding: .45rem .6rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-weight: 900;
}

.language-switch button.active {
    color: #170b31;
    background: linear-gradient(135deg, var(--gold), #f3df9b);
}

.nav-toggle, .nav-toggle-button {
    display: none;
}

.site-main {
    min-height: 100vh;
}

.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    min-height: calc(100vh - 74px);
    padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 6vw, 5rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 62% 16%, rgba(232, 176, 61, .16), transparent 26rem),
        linear-gradient(90deg, rgba(6, 8, 21, .9), rgba(6, 8, 21, .56) 52%, rgba(6, 8, 21, .74)),
        url("images/cosmic-ocean-hero.svg") center / cover no-repeat;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -22% -10%;
    z-index: -1;
    height: 42%;
    background: radial-gradient(ellipse at center, rgba(217, 166, 71, .14), transparent 68%);
}

.hero-copy {
    max-width: 780px;
}

.eyebrow, .panel-kicker {
    color: var(--gold);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 760px;
    margin-bottom: 1rem;
    font-size: clamp(3.4rem, 7vw, 6.2rem);
    font-weight: 300;
    line-height: .93;
    overflow-wrap: normal;
    word-break: normal;
    text-shadow: 0 18px 52px rgba(0, 0, 0, .55);
}

.hero-lead, .page-hero p, .content-band p {
    max-width: 720px;
    color: var(--soft);
    font-size: clamp(1.05rem, 2vw, 1.26rem);
    line-height: 1.7;
}

.hero-actions, .contact-methods {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.45rem;
}

.hero-notes span, .orbit-chip {
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    backdrop-filter: blur(14px);
}

.hero-notes span {
    padding: .48rem .72rem;
    font-size: .86rem;
    font-weight: 800;
}

.btn {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .88rem 1.22rem;
    border: 1px solid transparent;
    font-weight: 900;
    transition: transform .28s ease, background .28s ease, border-color .28s ease;
    text-decoration: none;
}

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

.btn-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 255, 255, .14);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: rgba(255, 255, 255, .32);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: rgba(255, 255, 255, .32);
    color: #15091f;
    background: linear-gradient(135deg, var(--gold), #f3df9b);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 16px 38px rgba(228, 188, 109, .22);
}

.btn-primary:hover {
    color: #10071a;
    background: linear-gradient(135deg, #ffd98a, #fff0bb);
    border-color: rgba(255, 255, 255, .3);
}

.btn-ghost, .btn-secondary {
    color: white;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    backdrop-filter: blur(16px);
}

.btn-ghost:hover, .btn-secondary:hover {
    color: white;
    background: rgba(232, 176, 61, .16);
    border-color: rgba(255, 255, 255, .34);
}

.hero-visual {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .36)),
        url("images/deep-constellation-panel.svg") center / cover no-repeat;
    box-shadow: var(--shadow), 0 0 80px rgba(232, 176, 61, .15);
}

.hero-visual::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    pointer-events: none;
}

.hero-visual::after {
    content: "";
    position: absolute;
    inset: 12% -10% auto;
    height: 46%;
    border: 1px solid rgba(255, 255, 255, .3);
    border-color: transparent transparent rgba(183, 221, 255, .38);
    border-radius: 50%;
}

.moon {
    position: absolute;
    top: 12%;
    right: 16%;
    width: 84px;
    height: 84px;
    background: #fff0b9;
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(255, 232, 172, .78), 0 0 110px rgba(232, 176, 61, .2);
}

.orbit-chip {
    position: absolute;
    z-index: 2;
    padding: .55rem .78rem;
    font-size: .82rem;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}

.orbit-chip-one {
    top: 30%;
    left: 1.4rem;
}

.orbit-chip-two {
    top: 48%;
    right: 1.4rem;
}

.camera-card {
    position: absolute;
    left: 1.3rem;
    right: 1.3rem;
    bottom: 1.3rem;
    padding: 1.25rem;
    color: white;
    background: rgba(5, 8, 19, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    backdrop-filter: blur(18px);
}

.camera-card span, .camera-card strong {
    display: block;
}

.camera-card span {
    color: var(--gold);
}

.section-grid, .cards-grid, .testimonials, .team-grid, .metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: clamp(1rem, 5vw, 4rem) clamp(1rem, 6vw, 5rem);
}

.feature-panel, .service-card, .blog-card, .testimonials article, .team-grid article, .metric-grid article, .admin-columns section {
    padding: clamp(1.2rem, 3vw, 2rem);
    color: var(--ink);
    background: linear-gradient(180deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .045));
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .24);
    backdrop-filter: blur(18px);
}

.feature-panel {
    min-height: 360px;
    color: white;
    background:
        linear-gradient(150deg, rgba(7, 9, 23, .38), rgba(7, 9, 23, .82)),
        url("images/deep-constellation-panel.svg") center / cover no-repeat;
}

.feature-panel.cabin {
    background:
        linear-gradient(150deg, rgba(7, 9, 23, .18), rgba(7, 9, 23, .82)),
        url("images/vinales-night-cabin.svg") center / cover no-repeat;
}

.feature-panel h2, .service-card h2, .blog-card h2, .team-grid h2 {
    color: white;
}

.service-card span, .blog-card span {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    margin-bottom: .7rem;
    color: var(--gold);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.service-card span i {
    font-size: 1rem;
}

.service-card h2, .blog-card h2, .team-grid h2, .split-text h2, .timeline h2 {
    font-family: var(--display-font);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
}

.feature-panel p, .service-card p, .blog-card p, .testimonials p, .team-grid p, .admin-columns p, .split-text p {
    color: var(--soft);
}

.feature-panel a, .service-card a, .blog-card a, .contact-methods a {
    color: var(--gold);
    font-weight: 900;
}

.content-band, .page-hero, .dashboard-heading {
    display: flex;
    gap: 1rem;
    align-items: end;
    justify-content: space-between;
    padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 6vw, 5rem);
}

.content-band {
    margin: 0 clamp(1rem, 6vw, 5rem);
    padding: clamp(1.4rem, 4vw, 2.4rem);
    background:
        linear-gradient(100deg, rgba(232, 176, 61, .14), rgba(217, 166, 71, .08)),
        rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.page-hero.compact {
    display: block;
    min-height: 360px;
    padding-bottom: 2rem;
    background:
        radial-gradient(circle at 78% 18%, rgba(232, 176, 61, .18), transparent 24rem),
        linear-gradient(90deg, rgba(6, 8, 21, .96), rgba(6, 8, 21, .64), rgba(6, 8, 21, .78)),
        url("images/deep-constellation-panel.svg") center / cover no-repeat;
}

.page-hero.compact::after {
    content: "";
    display: block;
    width: min(220px, 42vw);
    height: 1px;
    margin-top: 1.6rem;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.services-hero {
    background:
        radial-gradient(circle at 74% 18%, rgba(232, 176, 61, .16), transparent 24rem),
        linear-gradient(90deg, rgba(6, 8, 21, .68), rgba(6, 8, 21, .34), rgba(6, 8, 21, .48)),
        var(--bg-photo-services) center / cover no-repeat !important;
}

.events-hero {
    background:
        radial-gradient(circle at 74% 18%, rgba(228, 188, 109, .16), transparent 24rem),
        linear-gradient(90deg, rgba(6, 8, 21, .68), rgba(6, 8, 21, .32), rgba(6, 8, 21, .5)),
        var(--bg-photo-events) center / cover no-repeat !important;
}

.blog-hero {
    background:
        radial-gradient(circle at 72% 18%, rgba(217, 166, 71, .18), transparent 24rem),
        linear-gradient(90deg, rgba(6, 8, 21, .66), rgba(6, 8, 21, .3), rgba(6, 8, 21, .52)),
        var(--bg-photo-blog) center / cover no-repeat !important;
}

.team-hero {
    background:
        radial-gradient(circle at 74% 18%, rgba(255, 130, 109, .14), transparent 24rem),
        linear-gradient(90deg, rgba(6, 8, 21, .68), rgba(6, 8, 21, .34), rgba(6, 8, 21, .5)),
        var(--bg-photo-team) center / cover no-repeat !important;
}

.about-hero {
    background:
        radial-gradient(circle at 74% 18%, rgba(232, 176, 61, .16), transparent 24rem),
        linear-gradient(90deg, rgba(6, 8, 21, .68), rgba(6, 8, 21, .32), rgba(6, 8, 21, .5)),
        var(--bg-photo-about) center / cover no-repeat !important;
}

.page-hero h1, .dashboard-heading h1 {
    max-width: 920px;
    color: white;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: .98;
    text-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}

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

.booking-layout, .contact-layout, .dashboard {
    padding: clamp(1rem, 5vw, 4rem) clamp(1rem, 6vw, 5rem);
}

.contact-layout {
    min-height: calc(100vh - 74px);
    background:
        radial-gradient(circle at 70% 24%, rgba(232, 176, 61, .14), transparent 24rem),
        linear-gradient(90deg, rgba(6, 8, 21, .7), rgba(6, 8, 21, .4), rgba(6, 8, 21, .6)),
        var(--bg-photo-contact) center / cover no-repeat;
}

.booking-layout, .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 1.2rem;
    align-items: start;
}

.booking-layout {
    background:
        radial-gradient(circle at 72% 18%, rgba(228, 188, 109, .12), transparent 24rem),
        linear-gradient(90deg, rgba(6, 8, 21, .94), rgba(6, 8, 21, .72), rgba(6, 8, 21, .88)),
        url("images/vinales-night-cabin.svg") center / cover fixed no-repeat;
}

.cabin-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
}

.cabin-gallery div {
    display: grid;
    min-height: 170px;
    place-items: center;
    color: white;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background:
        linear-gradient(150deg, rgba(7, 9, 23, .16), rgba(7, 9, 23, .72)),
        url("images/deep-constellation-panel.svg") center / cover no-repeat;
    font-weight: 900;
}

.cabin-gallery .gallery-main {
    grid-column: span 3;
    min-height: 430px;
    font-size: clamp(2rem, 6vw, 5rem);
    background:
        linear-gradient(145deg, rgba(7, 9, 23, .04), rgba(7, 9, 23, .72)),
        url("images/vinales-night-cabin.svg") center / cover no-repeat;
}

.booking-card, .contact-form {
    position: sticky;
    top: 96px;
    padding: 1.4rem;
    color: var(--ink);
    background: var(--panel-strong);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.price-row strong {
    color: var(--gold);
    font-size: 2rem;
}

.amenities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    padding: 0;
    list-style: none;
}

.amenities li {
    padding: .7rem;
    color: var(--soft);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
}

.timeline, .blog-list, .split-text, .admin-columns {
    display: grid;
    gap: 1rem;
    padding: 1rem clamp(1rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
}

.timeline article {
    padding: 1.4rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid var(--line);
    border-radius: 10px;
}

.timeline .event-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(16rem, .95fr) minmax(24rem, 1.45fr);
    gap: clamp(1rem, 3vw, 2.4rem);
    align-items: stretch;
    overflow: hidden;
    padding: clamp(1.15rem, 2vw, 1.6rem);
    background:
        linear-gradient(120deg, rgba(8, 28, 52, .96), rgba(10, 45, 72, .86) 44%, rgba(21, 72, 91, .58)),
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
    border-color: rgba(228, 188, 109, .24);
    box-shadow: 0 24px 64px rgba(1, 13, 28, .34);
}

.timeline .event-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    content: "";
    background: linear-gradient(180deg, var(--gold), rgba(228, 188, 109, .12));
}

.event-main {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.event-date {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .45rem;
    padding: .38rem .62rem;
    color: #061324;
    background: linear-gradient(135deg, var(--gold), #f7d891);
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 950;
    line-height: 1;
}

.event-date i {
    font-size: .95rem;
}

.event-main h2 {
    margin-top: .85rem;
}

.event-main p {
    max-width: 42rem;
    margin-bottom: 0;
}

.event-details {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    align-self: stretch;
}

.event-details div {
    display: grid;
    align-content: start;
    gap: .45rem;
    min-width: 0;
    padding: 1rem;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.event-details dt {
    display: flex;
    align-items: center;
    gap: .42rem;
    color: var(--gold);
    font-size: .76rem;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
}

.event-details dt i {
    font-size: .98rem;
}

.event-details dd {
    margin: 0;
    color: var(--ink);
    font-weight: 750;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .timeline .event-card {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 720px) {
    .event-details {
        grid-template-columns: 1fr;
    }

}

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

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

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

.metric-grid span {
    display: block;
    color: var(--gold);
    font-size: 2.4rem;
    font-weight: 900;
}

.admin-columns, .split-text {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.avatar {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    margin-bottom: 1rem;
    color: white;
    background: linear-gradient(145deg, var(--violet), var(--ocean));
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(232, 176, 61, .18);
    font-weight: 900;
}

.contact-form {
    display: grid;
    gap: .9rem;
}

.contact-form label {
    display: grid;
    gap: .35rem;
    color: var(--muted);
    font-weight: 800;
}

.contact-form input, .contact-form textarea, .contact-form select {
    width: 100%;
    min-height: 46px;
    padding: .75rem .85rem;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 255, 255, .07);
}

.contact-form textarea {
    min-height: 130px;
}

.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
    outline: 2px solid rgba(228, 188, 109, .42);
    border-color: rgba(228, 188, 109, .48);
}

.form-success {
    padding: .8rem;
    color: #dfffee;
    background: rgba(31, 157, 98, .18);
    border: 1px solid rgba(91, 255, 177, .2);
    border-radius: 8px;
}

.whatsapp-float {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 30;
    padding: .85rem 1rem;
    color: white;
    background: linear-gradient(135deg, #1f9d62, #16c789);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    box-shadow: var(--shadow);
    font-weight: 900;
    text-decoration: none;
}

#blazor-error-ui {
    display: none;
}

@media (max-width: 980px) {
    .site-header {
        grid-template-columns: 1fr auto auto;
    }

    .nav-toggle-button {
        display: inline-flex;
        padding: .55rem .75rem;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 999px;
        color: white;
        font-weight: 850;
    }

    .site-nav {
        display: none;
        grid-column: 1 / -1;
        justify-content: start;
        padding-top: .8rem;
    }

    .nav-toggle:checked ~ .site-nav {
        display: flex;
    }

    .hero, .booking-layout, .contact-layout {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
    }

    .hero-visual {
        min-height: 420px;
    }

    .booking-card, .contact-form {
        position: static;
    }

    .testimonials, .blog-list, .team-grid, .metric-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .site-header {
        gap: .6rem;
    }

    .brand {
        min-width: 0;
    }

    .brand small {
        display: none;
    }

    .hero {
        padding-top: 2rem;
    }

    .hero h1 {
        font-size: 3.15rem;
    }

    .section-grid, .cards-grid, .testimonials, .blog-list, .team-grid, .metric-grid, .admin-columns, .split-text {
        grid-template-columns: 1fr;
    }

    .service-card h2 {
        line-height: 1.08;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .content-band, .dashboard-heading {
        display: block;
    }

    .cabin-gallery {
        grid-template-columns: 1fr;
    }

    .cabin-gallery .gallery-main {
        grid-column: auto;
        min-height: 300px;
    }
}

.site-footer {
    position: relative;
    overflow: hidden;
    padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1rem, 7vw, 9rem) 1.25rem;
    color: var(--soft);
    background:
        linear-gradient(135deg, rgba(232, 176, 61, .08), transparent 24rem),
        linear-gradient(180deg, #111 0%, #090909 100%);
    border-top: 1px solid rgba(232, 176, 61, .16);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: clamp(1rem, 7vw, 9rem);
    right: clamp(1rem, 7vw, 9rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 176, 61, .55), transparent);
    pointer-events: none;
}

.site-footer-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(220px, .95fr) repeat(4, minmax(130px, 1fr));
    gap: clamp(1.15rem, 3vw, 2.4rem);
    align-items: start;
    padding-bottom: clamp(1.8rem, 4vw, 2.9rem);
}

.footer-title {
    display: inline-flex;
    align-items: center;
    margin-bottom: .7rem;
    color: #f5f1ea;
    font-family: var(--display-font);
    font-size: clamp(1.35rem, 2vw, 1.72rem);
    font-weight: 650;
    line-height: 1.1;
    text-decoration: none;
}

.footer-title::first-letter {
    color: var(--gold);
}

.footer-brand p {
    max-width: 270px;
    margin-bottom: 1.1rem;
    color: rgba(222, 227, 229, .8);
    font-size: .88rem;
    line-height: 1.65;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.footer-social a {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: rgba(251, 247, 239, .86);
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.footer-social a:hover {
    color: #111;
    background: var(--gold);
    border-color: rgba(232, 176, 61, .85);
    transform: translateY(-2px);
}

.footer-contact-card {
    align-self: stretch;
    min-width: 0;
}

.footer-contact-link {
    display: flex;
    gap: .8rem;
    align-items: center;
    min-height: 100%;
    padding: .9rem;
    color: var(--ink);
    background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.footer-contact-link > i {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #15110a;
    background: var(--gold);
    border-radius: 50%;
    font-size: 1.05rem;
}

.footer-contact-link span {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.footer-contact-link strong {
    font-size: .9rem;
    line-height: 1.25;
}

.footer-contact-link small {
    color: rgba(222, 227, 229, .72);
    font-size: .74rem;
    line-height: 1.35;
}

.footer-contact-link:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(232, 176, 61, .055));
    border-color: rgba(232, 176, 61, .4);
    transform: translateY(-2px);
}

.footer-links {
    display: grid;
    align-content: start;
    gap: .58rem;
    min-width: 0;
}

.footer-links h2 {
    margin: .15rem 0 .38rem;
    color: var(--gold);
    font-family: var(--body-font);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14rem;
    line-height: 1.3;
    text-transform: uppercase;
}

.footer-links a {
    display: inline-flex;
    gap: .5rem;
    align-items: flex-start;
    width: fit-content;
    max-width: min(210px, 100%);
    color: rgba(222, 227, 229, .78);
    font-size: .82rem;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .2s ease, transform .2s ease;
}

.footer-links a i {
    flex: 0 0 auto;
    margin-top: .12rem;
    color: rgba(232, 176, 61, .72);
    font-size: .82rem;
}

.footer-links a:hover {
    color: var(--ink);
    transform: translateX(2px);
}

.site-footer-bottom {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, .075);
}

.site-footer-bottom small,
.site-footer-bottom a {
    color: rgba(222, 227, 229, .56);
    font-size: .72rem;
    line-height: 1.45;
    text-decoration: none;
}

.site-footer-bottom a:hover {
    color: var(--gold);
}

@media (max-width: 1180px) {
    .site-footer-shell {
        grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 820px) {
    .site-footer-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand,
    .footer-contact-card {
        grid-column: span 1;
    }
}

@media (max-width: 560px) {
    .site-footer {
        padding: 2.25rem 1rem 1.15rem;
    }

    .site-footer::before {
        left: 1rem;
        right: 1rem;
    }

    .site-footer-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.45rem;
    }

    .footer-brand,
    .footer-contact-card {
        grid-column: 1 / -1;
    }

    .site-footer-bottom {
        display: grid;
        gap: .45rem;
    }
}

@media (max-width: 340px) {
    .site-footer-shell {
        grid-template-columns: 1fr;
    }
}

/* Responsive navigation and administration additions */
.whatsapp-float {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    color: white;
    line-height: 1;
}

.whatsapp-float::before {
    display: none;
}

.whatsapp-float svg {
    display: block;
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.admin-topbar {
    justify-content: space-between;
}

.admin-topbar form {
    margin: 0;
}

.admin-topbar:not(:has(> a)) form {
    margin-left: auto;
}

.admin-topbar button {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    padding: .45rem .65rem;
    border: 0;
    color: var(--muted);
    background: transparent;
}

.requests-panel {
    margin-top: 2.2rem;
}

.requests-table {
    display: grid;
    gap: .75rem;
}

.requests-table article {
    padding: 1rem 1.15rem;
    background: #181818;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
}

.requests-table strong,
.requests-table span,
.requests-table small {
    display: block;
}

.requests-table span,
.requests-table small {
    color: var(--muted);
}

.requests-table p {
    margin: .55rem 0 0;
}

.settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 920px;
    margin-top: 1.7rem;
    padding: clamp(1rem, 3vw, 1.6rem);
    background: #181818;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
}

.settings-form label {
    display: grid;
    gap: .35rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

.settings-form label:nth-of-type(n+7),
.settings-form button,
.settings-form .form-success {
    grid-column: 1 / -1;
}

.settings-form input,
.settings-form textarea {
    width: 100%;
    min-height: 46px;
    padding: .75rem .85rem;
    color: var(--ink);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 6px;
}

.settings-form textarea {
    min-height: 88px;
}

.admin-login {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1rem;
    background: radial-gradient(circle at 50% 10%, rgba(232, 176, 61, .12), transparent 26rem), #0c2340;
}

.admin-login-card,
.admin-login.unauthorized {
    width: min(440px, 100%);
    padding: clamp(1.4rem, 5vw, 2rem);
    background: #151515;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
}

.admin-login-card h1 {
    font-size: clamp(2.4rem, 7vw, 3.2rem);
}

.admin-login-card form {
    display: grid;
    gap: .9rem;
    margin: 1.4rem 0;
}

.admin-login-card label {
    display: grid;
    gap: .35rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

.admin-login-card input {
    min-height: 46px;
    padding: .75rem .85rem;
    color: var(--ink);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 6px;
}

.form-error {
    padding: .75rem;
    color: #ffd9d9;
    background: rgba(188, 50, 50, .17);
    border: 1px solid rgba(255, 90, 90, .2);
    border-radius: 6px;
}

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

@media (max-width: 980px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: .55rem;
        padding: .75rem 1rem;
    }

    .nav-toggle-button {
        display: inline-flex;
        gap: .35rem;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        cursor: pointer;
    }

    .nav-toggle-button i {
        display: inline-block;
        font-size: 1.15rem;
    }

    .site-nav {
        grid-column: 1 / -1;
        order: 4;
        width: 100%;
        padding: .65rem 0 .25rem;
        border-top: 1px solid rgba(255, 255, 255, .09);
    }

    .nav-toggle:checked ~ .site-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25rem;
    }

    .site-nav a {
        display: flex;
        min-height: 46px;
        align-items: center;
        padding: .65rem .75rem;
        border-radius: 6px;
    }

    .site-nav i {
        display: inline-block;
    }
}

@media (max-width: 680px) {
    .brand strong {
        font-size: 1.1rem;
    }

    .language-switch button {
        min-width: 29px;
    }

    .nav-toggle-button span {
        display: none;
    }

    .nav-toggle:checked ~ .site-nav,
    .settings-form {
        grid-template-columns: 1fr;
    }

    .admin-content,
    .admin-topbar {
        padding-inline: 1rem;
    }

    .whatsapp-float {
        width: 54px;
        height: 54px;
    }
}

/* Visual refresh inspired by the supplied references */
:root {
    --ink: #f5f1ea;
    --muted: #b8c4cf;
    --soft: #dee3e5;
    --deep: #0c2340;
    --night: #0d2742;
    --panel: rgba(16, 42, 68, .84);
    --panel-strong: rgba(12, 35, 64, .94);
    --line: rgba(217, 166, 71, .2);
    --gold: #e8b03d;
    --green: #24d366;
    --shadow: 0 24px 70px rgba(0, 0, 0, .42);
    --bg-photo-services: url("images/refresh/home-services-vivid.webp");
    --bg-photo-events: url("images/refresh/gallery-evento.webp");
    --bg-photo-blog: url("images/refresh/home-blog-vivid.webp");
    --bg-photo-team: url("images/refresh/home-testimonials-vivid.webp");
    --bg-photo-about: url("images/refresh/home-gallery-vivid.webp");
    --bg-photo-contact: url("images/refresh/home-contact-vivid.webp");
}

body {
    background: #0c2340;
}

body::before {
    display: none;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    grid-template-columns: minmax(190px, auto) 1fr auto;
    padding: 1rem clamp(1rem, 8vw, 14rem);
    background: linear-gradient(180deg, rgba(12, 35, 64, .94), rgba(13, 39, 66, .42), transparent);
    border-bottom: 0;
    box-shadow: none;
}

.brand {
    min-width: 0;
}

.brand-mark,
.brand small,
.site-nav i {
    display: none;
}

.brand strong {
    font-size: 1.35rem;
    color: #f7f2eb;
}

.brand-name {
    color: #f7f2eb;
}

.brand-initial {
    color: var(--gold);
}

.brand strong::first-letter {
    letter-spacing: 0;
}

.site-nav {
    gap: 1.35rem;
}

.site-nav a {
    padding: .3rem 0;
    border: 0;
    border-radius: 0;
    color: rgba(245, 241, 234, .78);
    font-size: .72rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
}

.site-nav a.active,
.site-nav a:hover {
    color: #fff;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.language-switch {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .08);
}

.language-switch button {
    min-width: 30px;
    padding: .26rem .45rem;
    font-size: .72rem;
}

.language-switch button.active {
    color: #17120a;
    background: var(--gold);
}

.site-main {
    background: #0c2340;
}

.home-scroll {
    position: relative;
    --home-scroll-progress: 0;
    --home-bg-shift: 0px;
    --home-bg-active-shift: 0px;
    --home-bg-glow-shift: 0px;
    background: #0c2340;
    isolation: isolate;
}

.home-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 42%, rgba(232, 176, 61, .12), transparent 28rem),
        #06101d;
}

.home-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(90deg, rgba(2, 5, 10, .68), rgba(2, 5, 10, .16) 45%, rgba(2, 5, 10, .66)),
        linear-gradient(180deg, rgba(2, 5, 10, .74), rgba(2, 5, 10, .2) 24%, rgba(2, 5, 10, .24) 66%, rgba(2, 5, 10, .84)),
        radial-gradient(ellipse at 50% 45%, rgba(247, 242, 235, .14) 0 9rem, transparent 31rem);
}

.home-backdrop-layer {
    position: absolute;
    inset: -7vh -7vw;
    z-index: 1;
    opacity: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: saturate(1.08) contrast(1.06) brightness(.9);
    transform: scale(1.08) translate3d(0, var(--home-bg-shift), 0);
    transition:
        opacity 1.45s ease-in-out,
        filter 1.25s ease,
        transform 1.8s cubic-bezier(.2, .72, .18, 1);
    will-change: opacity, transform, filter;
}

.home-backdrop-layer.is-active {
    z-index: 2;
    opacity: 1;
    filter: saturate(1.2) contrast(1.08) brightness(.98);
    transform: scale(1.02) translate3d(0, var(--home-bg-active-shift), 0);
}

.home-backdrop-glow {
    position: absolute;
    inset: auto -10vw -16vh;
    z-index: 4;
    height: 42vh;
    opacity: .72;
    background:
        radial-gradient(ellipse at 46% 45%, rgba(232, 176, 61, .28) 0 8rem, rgba(12, 35, 64, .26) 24rem, transparent 54rem);
    filter: blur(8px);
    transform: translate3d(0, var(--home-bg-glow-shift), 0);
    transition: transform 1.2s ease;
}

.home-scroll::before,
.home-scroll::after {
    content: "";
    position: fixed;
    pointer-events: none;
}

.home-scroll::before {
    display: none;
}

.home-scroll::after {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    height: 3px;
    background: linear-gradient(90deg, rgba(232, 176, 61, .95), rgba(247, 242, 235, .82));
    box-shadow: 0 -8px 24px rgba(232, 176, 61, .24);
    transform: scaleX(var(--home-scroll-progress));
    transform-origin: left center;
}

.home-section-rail {
    position: fixed;
    top: 50%;
    right: clamp(.8rem, 2.6vw, 2rem);
    z-index: 8;
    display: grid;
    gap: .45rem;
    transform: translateY(-50%);
}

.home-section-rail a {
    display: grid;
    grid-template-columns: .42rem 0fr;
    align-items: center;
    gap: .65rem;
    width: .42rem;
    min-height: 2rem;
    overflow: hidden;
    color: rgba(247, 242, 235, .74);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .12rem;
    font-size: .66rem;
    font-weight: 800;
    transition: width .34s ease, grid-template-columns .34s ease, color .24s ease;
}

.home-section-rail a span {
    width: .42rem;
    height: .42rem;
    border: 1px solid rgba(247, 242, 235, .54);
    border-radius: 999px;
    background: rgba(247, 242, 235, .14);
    box-shadow: 0 0 0 0 rgba(232, 176, 61, 0);
    transition: height .28s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.home-section-rail a strong {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(.35rem);
    transition: opacity .24s ease, transform .24s ease;
}

.home-section-rail a.active,
.home-section-rail a:hover {
    grid-template-columns: .42rem 1fr;
    width: clamp(7.5rem, 11vw, 9.5rem);
    color: #fff;
}

.home-section-rail a.active span {
    height: 1.75rem;
    border-color: rgba(232, 176, 61, .96);
    background: var(--gold);
    box-shadow: 0 0 24px rgba(232, 176, 61, .44);
}

.home-section-rail a.active strong,
.home-section-rail a:hover strong {
    opacity: 1;
    transform: translateX(0);
}

.scroll-scene {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: grid;
    min-height: 100vh;
    align-items: center;
    padding: clamp(7rem, 12vw, 12rem) clamp(1rem, 8vw, 14rem);
    overflow: hidden;
    background: transparent;
    scroll-margin-top: 0;
}

.scroll-scene + .scroll-scene {
    margin-top: -1px;
}

.scroll-scene::before,
.scroll-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.scroll-scene::before {
    display: none;
}

.scroll-scene::after {
    display: none;
}

.scroll-scene > * {
    position: relative;
    z-index: 1;
}

.scroll-scene.is-visible::before {
    display: none;
}

.scene-hero {
    --scene-image: url("images/refresh/home-hero-vivid.webp");
    --scene-light-x: 34%;
}

.scene-services {
    --scene-image: url("images/refresh/home-services-vivid.webp");
    --scene-light-x: 56%;
    gap: clamp(1.6rem, 4vw, 3rem);
}

.scene-gallery {
    --scene-image: url("images/refresh/home-gallery-vivid.webp");
    --scene-light-x: 50%;
    align-content: center;
    gap: 2rem;
}

.scene-blog {
    --scene-image: url("images/refresh/home-blog-vivid.webp");
    --scene-light-x: 48%;
    gap: clamp(1.6rem, 4vw, 3rem);
}

.scene-testimonials {
    --scene-image: url("images/refresh/home-testimonials-vivid.webp");
    --scene-light-x: 52%;
    align-content: center;
    gap: 2rem;
}

.scene-contact {
    --scene-image: url("images/refresh/home-contact-vivid.webp");
    --scene-light-x: 40%;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: clamp(2rem, 8vw, 8rem);
}

.home-footer {
    position: relative;
    z-index: 1;
}

.home-footer .site-footer {
    background:
        linear-gradient(135deg, rgba(232, 176, 61, .08), transparent 24rem),
        linear-gradient(180deg, rgba(2, 5, 10, .2), rgba(8, 8, 8, .92) 34%, #090909 100%);
    border-top: 1px solid rgba(232, 176, 61, .16);
    box-shadow: inset 0 4rem 6rem -5rem rgba(247, 242, 235, .2), inset 0 1px rgba(255, 255, 255, .04);
    backdrop-filter: blur(16px);
}

.service-preview,
.blog-preview,
.trust-strip {
    width: min(1060px, 100%);
    margin-inline: auto;
}

.service-preview,
.blog-preview {
    display: grid;
    gap: .85rem;
    opacity: .34;
    transform: translateY(1.5rem);
    transition: opacity .85s ease .14s, transform .85s cubic-bezier(.2, .72, .18, 1) .14s;
}

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

.blog-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(880px, 100%);
}

.scroll-scene.is-visible .service-preview,
.scroll-scene.is-visible .blog-preview,
.scroll-scene.is-visible .trust-strip {
    opacity: 1;
    transform: translateY(0);
}

.home-preview-card {
    position: relative;
    min-height: 192px;
    padding: clamp(1.25rem, 2.4vw, 1.55rem);
    overflow: hidden;
    color: #f7f2eb;
    text-decoration: none;
    background:
        linear-gradient(145deg, rgba(247, 242, 235, .1), rgba(16, 42, 68, .78) 42%, rgba(6, 13, 24, .88));
    border: 1px solid rgba(247, 242, 235, .14);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 48px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px);
    opacity: .2;
    transform: translateY(1rem) scale(.985);
    transition:
        opacity .62s ease,
        transform .62s cubic-bezier(.2, .72, .18, 1),
        border-color .24s ease,
        background .24s ease;
}

.home-preview-card::before {
    content: "";
    position: absolute;
    inset: -40% -35%;
    opacity: 0;
    background: radial-gradient(circle at 30% 20%, rgba(232, 176, 61, .28), transparent 22rem);
    transform: translate3d(-10%, 10%, 0);
    transition: opacity .28s ease, transform .5s ease;
}

.home-preview-card:hover {
    border-color: rgba(232, 176, 61, .52);
    background:
        linear-gradient(145deg, rgba(247, 242, 235, .13), rgba(16, 42, 68, .84) 42%, rgba(6, 13, 24, .92));
    transform: translateY(-4px) scale(1.01);
}

.home-preview-card:hover::before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.scroll-scene.is-visible .home-preview-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.scroll-scene.is-visible .home-preview-card:nth-child(2) {
    transition-delay: .08s;
}

.scroll-scene.is-visible .home-preview-card:nth-child(3) {
    transition-delay: .16s;
}

.home-preview-card span,
.home-preview-card h3,
.home-preview-card p {
    position: relative;
    z-index: 1;
}

.home-preview-card span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    margin-bottom: .8rem;
    color: rgba(232, 176, 61, .95);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .11rem;
    text-transform: uppercase;
}

.home-preview-card h3 {
    margin: 0 0 .55rem;
    color: #fff8ef;
    font-family: var(--display-font);
    font-size: clamp(1.85rem, 2.55vw, 2.45rem);
    font-weight: 700;
    line-height: 1.04;
}

.home-preview-card p {
    margin: 0;
    color: rgba(247, 242, 235, .86);
    font-size: 1rem;
    line-height: 1.58;
}

.blog-preview-card {
    min-height: 198px;
}

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 1rem;
    opacity: .3;
    transform: translateY(1rem);
    transition: opacity .75s ease .22s, transform .75s cubic-bezier(.2, .72, .18, 1) .22s;
}

.trust-strip span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .58rem .82rem;
    color: rgba(247, 242, 235, .84);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1rem;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(247, 242, 235, .14);
    border-radius: 999px;
    backdrop-filter: blur(14px);
}

.trust-strip i {
    color: var(--gold);
}

.scene-copy {
    position: relative;
    max-width: 780px;
    opacity: .44;
    transform: translateY(1.4rem);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .72, .18, 1);
}

.scroll-scene.is-visible .scene-copy {
    opacity: 1;
    transform: translateY(0);
}

.scene-copy-center {
    justify-self: center;
    text-align: center;
}

.scene-copy-left {
    justify-self: start;
}

.scene-copy h1,
.scene-copy h2 {
    margin-bottom: 1rem;
    color: #f7f2eb;
    font-size: clamp(3.4rem, 7vw, 6.8rem);
    font-weight: 700;
    line-height: .98;
    text-shadow: 0 20px 50px rgba(0, 0, 0, .6);
    transform: translateY(.35rem);
    transition: transform .72s cubic-bezier(.2, .72, .18, 1);
}

.scroll-scene.is-visible .scene-copy h1,
.scroll-scene.is-visible .scene-copy h2 {
    transform: translateY(0);
}

.scene-copy h1 em {
    display: block;
    color: var(--gold);
    font-style: italic;
}

.scene-copy p {
    max-width: 580px;
    color: var(--soft);
    font-size: clamp(1.05rem, 1.55vw, 1.25rem);
    font-weight: 500;
}

.scene-copy-center p {
    margin-inline: auto;
}

.eyebrow,
.panel-kicker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: rgba(247, 242, 235, .76);
    letter-spacing: .16rem;
    text-shadow: 0 0 0 rgba(232, 176, 61, 0);
    transition: color .34s ease, text-shadow .52s ease;
}

.eyebrow::after {
    content: "";
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f7d891, var(--gold));
    box-shadow: 0 0 0 rgba(232, 176, 61, 0);
    opacity: .35;
    transform: translateX(-.32rem) scaleX(.72);
    transform-origin: left center;
    transition:
        width .68s cubic-bezier(.18, .82, .24, 1) .08s,
        opacity .28s ease .08s,
        transform .68s cubic-bezier(.18, .82, .24, 1) .08s,
        box-shadow .36s ease .52s;
}

.panel-kicker {
    color: var(--gold);
}

.scroll-scene.is-visible .eyebrow,
.scroll-scene.is-visible .scene-copy .eyebrow {
    color: var(--gold) !important;
    text-shadow: 0 0 18px rgba(232, 176, 61, .24) !important;
}

.scroll-scene.is-visible .eyebrow::after,
.scroll-scene.is-visible .scene-copy .eyebrow::after {
    width: clamp(2.2rem, 5vw, 4.8rem) !important;
    opacity: 1 !important;
    transform: translateX(0) scaleX(1) !important;
    box-shadow: 0 0 18px rgba(232, 176, 61, .48), 0 0 2px rgba(247, 216, 145, .82) !important;
}

.btn {
    position: relative;
    min-height: 44px;
    border-radius: 999px;
    padding: .78rem 1.25rem;
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}

.btn::after {
    content: "";
    position: absolute;
    inset: -30% -45%;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .42) 50%, transparent 66%);
    opacity: 0;
    transform: translateX(-55%) skewX(-16deg);
    transition: opacity .22s ease, transform .58s ease;
}

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

.btn:hover::after {
    opacity: .72;
    transform: translateX(55%) skewX(-16deg);
}

.hero-signature {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.3rem;
}

.hero-signature span {
    padding: .45rem .72rem;
    color: rgba(247, 242, 235, .86);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .11rem;
    text-transform: uppercase;
    border: 1px solid rgba(247, 242, 235, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .075);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(.6rem);
    transition: opacity .45s ease, transform .45s ease, border-color .22s ease, background .22s ease;
}

.scroll-scene.is-visible .hero-signature span {
    opacity: 1;
    transform: translateY(0);
}

.scroll-scene.is-visible .hero-signature span:nth-child(2) {
    transition-delay: .08s;
}

.scroll-scene.is-visible .hero-signature span:nth-child(3) {
    transition-delay: .16s;
}

.hero-signature span:hover {
    border-color: rgba(232, 176, 61, .58);
    background: rgba(232, 176, 61, .14);
}

.btn-primary {
    color: #16110a;
    background: var(--gold);
    box-shadow: none;
}

.btn-primary:hover {
    color: #16110a;
    background: #e7c782;
}

.btn-agency {
    color: #f5dcaa;
    background: rgba(216, 183, 116, .12);
    border-color: rgba(216, 183, 116, .55);
}

.btn-agency:hover {
    color: #16110a;
    background: var(--gold);
    border-color: var(--gold);
}

.btn-ghost,
.btn-secondary {
    color: #f7f2eb;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
}

.btn-whatsapp,
.btn-whatsapp:hover {
    color: #081008;
    background: var(--green);
}

body .btn.btn-whatsapp {
    color: #061208;
    background: linear-gradient(180deg, #36d46f, var(--green));
    border: 1px solid rgba(43, 203, 112, .62);
    box-shadow: 0 14px 28px rgba(21, 165, 82, .2), inset 0 1px 0 rgba(255, 255, 255, .28);
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

body .btn.btn-whatsapp i {
    color: inherit;
}

body .btn.btn-whatsapp:hover,
body .btn.btn-whatsapp:focus-visible {
    color: #061208;
    background: linear-gradient(180deg, #40ec82, #24c661);
    box-shadow: 0 18px 36px rgba(31, 210, 103, .34), 0 0 0 3px rgba(39, 213, 104, .16);
    filter: saturate(1.08);
    outline: none;
    transform: translateY(-1px);
}

.gallery-preview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 132px;
    gap: .35rem;
    width: min(1180px, 100%);
    margin-inline: auto;
    opacity: .48;
    transform: translateY(1.2rem);
    transition: opacity .8s ease .1s, transform .8s cubic-bezier(.2, .72, .18, 1) .1s;
}

.scroll-scene.is-visible .gallery-preview {
    opacity: 1;
    transform: translateY(0);
}

.gallery-tile {
    position: relative;
    display: flex;
    align-items: end;
    min-height: 120px;
    padding: 1rem;
    overflow: hidden;
    color: #f7f2eb;
    background:
        linear-gradient(180deg, rgba(12, 12, 12, .08), rgba(12, 12, 12, .54)),
        var(--tile-image) center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    text-decoration: none;
    transform: translateY(.6rem);
    opacity: .72;
    transition: opacity .42s ease, transform .42s cubic-bezier(.2, .72, .18, 1), border-color .24s ease, filter .24s ease;
}

.gallery-tile:hover {
    border-color: rgba(232, 176, 61, .58);
    filter: saturate(1.08);
    transform: translateY(0) scale(1.015);
}

.scroll-scene.is-visible .gallery-tile {
    opacity: 1;
    transform: translateY(0);
}

.scroll-scene.is-visible .gallery-tile:nth-child(2) {
    transition-delay: .05s;
}

.scroll-scene.is-visible .gallery-tile:nth-child(3) {
    transition-delay: .1s;
}

.scroll-scene.is-visible .gallery-tile:nth-child(4) {
    transition-delay: .15s;
}

.scroll-scene.is-visible .gallery-tile:nth-child(5) {
    transition-delay: .2s;
}

.scroll-scene.is-visible .gallery-tile:nth-child(6) {
    transition-delay: .25s;
}

.gallery-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 8%, rgba(232, 176, 61, .14), transparent 44%);
    opacity: 0;
    transition: opacity .24s ease;
}

.gallery-tile:hover::after {
    opacity: 1;
}

.gallery-tile span {
    position: relative;
    z-index: 1;
}

.gallery-tile:nth-child(3),
.gallery-tile:nth-child(6) {
    grid-row: span 2;
}

.gallery-tile span {
    font-weight: 800;
}

.quote-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: min(900px, 100%);
    margin-inline: auto;
    opacity: .48;
    transform: translateY(1.2rem);
    transition: opacity .8s ease .1s, transform .8s cubic-bezier(.2, .72, .18, 1) .1s;
}

.scroll-scene.is-visible .quote-row {
    opacity: 1;
    transform: translateY(0);
}

.quote-row article,
.home-contact-card,
.gallery-card,
.service-card,
.blog-card,
.timeline article,
.booking-card,
.contact-form,
.split-text > div,
.testimonials article {
    background: rgba(16, 42, 68, .86);
    border: 1px solid rgba(217, 166, 71, .2);
    border-radius: 8px;
    box-shadow: none;
    backdrop-filter: blur(18px);
}

.quote-row article {
    padding: 1.3rem;
    transform: translateY(.5rem);
    transition: transform .3s ease, border-color .24s ease, background .24s ease;
}

.scroll-scene.is-visible .quote-row article {
    transform: translateY(0);
}

.quote-row article:hover,
.home-contact-card:hover {
    border-color: rgba(232, 176, 61, .42);
    background: rgba(16, 42, 68, .92);
    transform: translateY(-3px);
}

.home-contact-card {
    display: grid;
    gap: .8rem;
    padding: 1.4rem;
    transform: translateY(.7rem);
    transition: transform .34s ease, border-color .24s ease, background .24s ease;
}

.scroll-scene.is-visible .home-contact-card {
    transform: translateY(0);
}

.home-contact-card label {
    display: grid;
    gap: .35rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.home-contact-card input,
.home-contact-card textarea {
    width: 100%;
    min-height: 46px;
    padding: .75rem .85rem;
    color: var(--ink);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 6px;
}

.home-contact-card textarea {
    min-height: 120px;
}

.whatsapp-float {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    right: 1.35rem;
    bottom: 1.35rem;
    padding: 0;
    overflow: hidden;
    color: white;
    background: var(--green);
    box-shadow: 0 0 34px rgba(36, 211, 102, .5);
}

.whatsapp-float::before {
    display: none;
}

.page-hero.compact {
    min-height: 470px;
    padding: 10rem clamp(1rem, 8vw, 14rem) 3rem;
    background:
        linear-gradient(90deg, rgba(8, 8, 8, .66), rgba(8, 8, 8, .3), rgba(8, 8, 8, .48)),
        var(--bg-photo-about) center / cover no-repeat;
}

.page-hero h1,
.dashboard-heading h1 {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    font-weight: 300;
}

.gallery-hero {
    background:
        linear-gradient(90deg, rgba(8, 8, 8, .64), rgba(8, 8, 8, .28), rgba(8, 8, 8, .46)),
        url("images/refresh/home-gallery-vivid.webp") center / cover no-repeat !important;
}

.gallery-page {
    padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1rem, 8vw, 14rem) 5rem;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.filter-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .45rem .9rem;
    color: var(--soft);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
}

.filter-pills a.active {
    color: #17120a;
    background: var(--gold);
}

.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 250px;
    gap: .75rem;
}

.gallery-card {
    display: flex;
    min-height: 250px;
    flex-direction: column;
    justify-content: end;
    padding: 1.2rem;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, .06), rgba(10, 10, 10, .58)),
        var(--tile-image) center / cover no-repeat;
}

.gallery-card:nth-child(2),
.gallery-card:nth-child(5) {
    grid-row: span 2;
}

.gallery-card span {
    color: var(--gold);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

.gallery-card h2 {
    margin: .25rem 0 0;
    font-size: 2rem;
}

.contact-layout,
.booking-layout {
    padding-top: 10rem;
}

.contact-layout h1,
.booking-card h1 {
    font-family: var(--display-font);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 300;
    line-height: 1;
}

.admin-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 260px 1fr;
    color: var(--ink);
    background: #0c2340;
}

.admin-shell + .whatsapp-float {
    display: none;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1.35rem 0;
    background: #111110;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.admin-brand {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: 0 1.25rem 1.6rem;
    color: var(--ink);
    text-decoration: none;
}

.admin-brand span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    box-shadow: 0 0 22px rgba(46, 148, 199, .16);
}

.admin-brand img {
    display: block;
    width: 40px;
    height: 40px;
}

.admin-brand strong {
    font-family: var(--admin-font, "Segoe UI", Arial, sans-serif);
    font-size: 1.1rem;
}

.admin-sidebar nav {
    display: grid;
    gap: .15rem;
}

.admin-sidebar a:not(.admin-brand) {
    display: flex;
    gap: .75rem;
    align-items: center;
    min-height: 48px;
    padding: .7rem 1.25rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: 800;
}

.admin-sidebar a.active,
.admin-sidebar a:not(.admin-brand):hover {
    color: var(--gold);
    background: rgba(216, 183, 116, .08);
    box-shadow: inset 3px 0 0 var(--gold);
}

.admin-main {
    min-width: 0;
    background: #090909;
}

.admin-topbar {
    min-height: 62px;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.admin-topbar a {
    color: var(--muted);
    text-decoration: none;
}

.admin-content {
    padding: 2rem;
}

.admin-content h1 {
    font-size: 2.2rem;
}

.admin-content h2 {
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    font-size: 1.7rem;
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.8rem;
}

.admin-metrics a,
.quick-actions a {
    background: #181818;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
}

.admin-metrics a {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: .8rem 1rem;
    align-items: center;
    padding: 1.25rem;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.admin-metrics a:hover {
    background: #1d1d1c;
    border-color: rgba(216, 183, 116, .38);
}

.admin-metrics i {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    grid-row: span 2;
    color: var(--gold);
    background: rgba(216, 183, 116, .1);
    border-radius: 12px;
}

.admin-metrics small {
    color: var(--muted);
    font-weight: 800;
}

.admin-metrics strong {
    font-size: 1.3rem;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .8rem;
}

.quick-actions a {
    display: flex;
    gap: .5rem;
    align-items: center;
    min-height: 58px;
    padding: .9rem 1rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 850;
}

.quick-actions i {
    color: var(--gold);
}

.content-admin {
    max-width: 1360px;
}

.admin-confirmation {
    position: fixed;
    top: 84px;
    right: clamp(1rem, 3vw, 2.7rem);
    z-index: 12;
    width: min(440px, calc(100vw - 2rem));
    margin: 0;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}

.content-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 1.7rem 0 2.2rem;
}

.content-tabs a {
    padding: .7rem 1.15rem;
    color: var(--ink);
    background: #181818;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
}

.manager-panel {
    margin-bottom: 2rem;
    padding: 1.4rem;
    background: #111110;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    scroll-margin-top: 1rem;
}

.manager-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.admin-content .manager-heading h2 {
    margin: 0;
}

.messages-manager .manager-heading {
    align-items: end;
}

.messages-manager .manager-heading p {
    max-width: 650px;
    margin: .35rem 0 0;
    color: var(--muted);
}

.message-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.message-filters a,
.message-filters button {
    min-height: 38px;
    padding: .45rem .75rem;
    color: var(--soft);
    background: #181818;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

.message-filters a.active,
.message-filters button.active {
    color: #17120a;
    background: var(--gold);
}

.message-filters span {
    min-width: 1.45rem;
    padding: .08rem .42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    text-align: center;
}

.message-list {
    display: grid;
    gap: .8rem;
}

.message-list article {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    padding: 1rem;
    background: #181818;
    border-radius: 8px;
}

.message-summary strong {
    margin-right: .55rem;
}

.message-summary small {
    display: block;
    margin-top: .35rem;
    color: var(--muted);
}

.message-summary p {
    margin: .7rem 0 0;
}

.message-status {
    display: inline-block;
    padding: .18rem .48rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.message-status.pending {
    color: #ead09a;
    background: rgba(216, 183, 116, .16);
}

.message-status.done {
    color: #a8dbbc;
    background: rgba(72, 160, 109, .18);
}

.message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-content: start;
    justify-content: end;
}

.message-actions .btn,
.message-actions button {
    min-height: 38px;
    padding: .5rem .7rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 5px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}

.message-actions .danger {
    color: #efb5ad;
}

.message-actions .danger.confirm {
    background: rgba(186, 60, 54, .16);
}

.manager-empty {
    margin: 0;
    padding: 1rem;
    color: var(--muted);
    background: #181818;
    border-radius: 8px;
}

.manager-layout {
    display: grid;
    grid-template-columns: minmax(270px, .88fr) minmax(350px, 1.12fr);
    gap: 1.25rem;
}

.manager-list {
    display: grid;
    align-content: start;
    gap: .55rem;
}

.manager-list article {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem;
    background: #181818;
    border-radius: 7px;
}

.manager-list img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 5px;
}

.manager-list div {
    min-width: 0;
    margin-right: auto;
}

.manager-list strong,
.manager-list small {
    display: block;
}

.manager-list small {
    margin-top: .22rem;
    color: var(--muted);
    font-size: .77rem;
}

.manager-list button {
    padding: .42rem .56rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 4px;
    cursor: pointer;
}

.manager-list button.danger {
    color: #efb5ad;
}

.manager-form {
    display: grid;
    gap: .8rem;
    padding: 1.15rem;
    background: #181818;
    border-radius: 8px;
}

.manager-form h3 {
    margin: 0 0 .25rem;
    font-size: 1.12rem;
}

.manager-form label {
    display: grid;
    gap: .3rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.manager-field {
    display: grid;
    align-content: start;
    gap: .38rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.manager-field > small {
    color: rgba(251, 247, 239, .7);
    font-size: .78rem;
    font-weight: 600;
}

.admin-star-picker {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    width: fit-content;
    min-height: 42px;
    padding: .35rem .45rem;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(217, 166, 71, .22);
    border-radius: 999px;
}

.admin-star-picker button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: rgba(251, 247, 239, .55);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.admin-star-picker button:hover,
.admin-star-picker button:focus-visible {
    color: #ffe1a0;
    background: rgba(232, 176, 61, .12);
    outline: none;
    transform: translateY(-1px);
}

.admin-star-picker button.selected {
    color: var(--admin-gold, #d9a647);
}

.admin-star-picker i {
    font-size: 1.08rem;
    line-height: 1;
}

.manager-form input:not([type=checkbox]),
.manager-form textarea,
.manager-form select {
    width: 100%;
    min-height: 42px;
    padding: .65rem .72rem;
    color: var(--ink);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 5px;
    font: inherit;
}

.manager-form textarea {
    min-height: 74px;
    overflow: hidden;
    resize: none;
    field-sizing: content;
}

.blocked-dates-manager {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.blocked-dates-manager .manager-heading h3 {
    margin: 0 0 .35rem;
}

.blocked-dates-manager .manager-heading p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
}

.period-list article {
    border-left: 3px solid #a14b45;
}

.period-list article.selected {
    background: rgba(216, 183, 116, .1);
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(216, 183, 116, .2);
}

.manager-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.manager-form .form-row.compact {
    align-items: end;
}

.icon-picker {
    display: grid;
    gap: .85rem;
}

.icon-picker-heading {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    color: var(--admin-muted);
    font: 750 .82rem var(--admin-font);
}

.icon-picker-heading > span {
    color: var(--admin-text);
}

.icon-picker-heading strong {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    color: var(--admin-gold);
    font-weight: 850;
}

.icon-picker-heading strong.empty {
    color: var(--admin-muted);
}

.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: .65rem;
}

.icon-picker-grid button {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: .65rem;
    align-items: center;
    min-height: 58px;
    padding: .75rem .85rem;
    color: var(--admin-text);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--admin-line);
    border-radius: 9px;
    font: 750 .84rem var(--admin-font);
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.icon-picker-grid button i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--admin-gold);
    background: rgba(216, 183, 116, .1);
    border-radius: 50%;
    font-size: 1rem;
}

.icon-picker-grid button:hover,
.icon-picker-grid button:focus-visible {
    background: rgba(216, 183, 116, .08);
    border-color: rgba(216, 183, 116, .52);
    outline: none;
    transform: translateY(-1px);
}

.icon-picker-grid button.selected {
    color: #061521;
    background: linear-gradient(135deg, #d9f8fb, #f2c86b);
    border-color: rgba(255, 255, 255, .32);
}

.icon-picker-grid button.selected i {
    color: #061521;
    background: rgba(255, 255, 255, .42);
}

.manager-form label.check {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
}

.manager-form .validation-message {
    color: #efb5ad;
}

@media (max-width: 1080px) {
    .site-header {
        padding-inline: 1rem;
    }

    .site-nav {
        gap: .8rem;
    }

    .scroll-scene,
    .scroll-scene::before {
        background-attachment: scroll;
    }

    .gallery-preview,
    .gallery-masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .admin-metrics,
    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manager-layout {
        grid-template-columns: 1fr;
    }

    .message-list article {
        grid-template-columns: 1fr;
    }

    .message-actions {
        justify-content: start;
    }
}

@media (max-width: 980px) {
    .site-header {
        background: rgba(8, 8, 8, .86);
        backdrop-filter: blur(18px);
    }

    .nav-toggle-button {
        color: var(--ink);
        background: rgba(255, 255, 255, .08);
    }

    .site-nav {
        padding: 1rem 0 0;
        gap: .9rem;
    }

    .home-section-rail {
        display: none;
    }

    .scene-contact {
        grid-template-columns: 1fr;
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: relative;
        height: auto;
    }

    .messages-manager .manager-heading {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .scroll-scene {
        min-height: 86vh;
        padding: 6rem 1rem 3rem;
    }

    .scene-copy h1,
    .scene-copy h2 {
        font-size: 3.1rem;
    }

    .gallery-preview,
    .gallery-masonry,
    .service-preview,
    .blog-preview,
    .quote-row,
    .admin-metrics,
    .quick-actions {
        grid-template-columns: 1fr;
    }

    .gallery-tile:nth-child(3),
    .gallery-tile:nth-child(6),
    .gallery-card:nth-child(2),
    .gallery-card:nth-child(5) {
        grid-row: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-section-rail a,
    .home-section-rail a span,
    .home-section-rail a strong,
    .home-backdrop-layer,
    .home-backdrop-glow,
    .scroll-scene::before,
    .scene-copy,
    .scene-copy h1,
    .scene-copy h2,
    .eyebrow::after,
    .btn,
    .btn::after,
    .hero-signature span,
    .gallery-preview,
    .service-preview,
    .blog-preview,
    .quote-row,
    .quote-row article,
    .home-preview-card,
    .trust-strip,
    .home-contact-card,
    .gallery-tile {
        transition: none;
    }

    .home-scroll::after {
        display: none;
    }

    .scroll-scene::before,
    .scene-copy,
    .scene-copy h1,
    .scene-copy h2,
    .btn,
    .btn::after,
    .hero-signature span,
    .gallery-preview,
    .service-preview,
    .blog-preview,
    .quote-row,
    .quote-row article,
    .home-preview-card,
    .trust-strip,
    .home-contact-card,
    .gallery-tile {
        transform: none;
    }
}

/* Administration workspace */
.admin-shell,
.admin-login {
    --admin-font: "Open Sans", "Segoe UI", Arial, sans-serif;
    --admin-bg: #0c2340;
    --admin-sidebar: #0d2742;
    --admin-panel: rgba(13, 39, 66, .88);
    --admin-card: rgba(16, 42, 68, .95);
    --admin-line: rgba(217, 166, 71, .21);
    --admin-text: #fbf7ef;
    --admin-muted: #bdc8d0;
    --admin-teal: #e8b03d;
    --admin-gold: #d9a647;
    color: var(--admin-text);
    font-family: var(--admin-font);
}

.admin-shell {
    grid-template-columns: 278px 1fr;
    background:
        radial-gradient(circle at 72% 0%, rgba(232, 176, 61, .12), transparent 31rem),
        linear-gradient(120deg, #0c2340, #0d2742 43%, #102a44);
}

.admin-sidebar {
    position: sticky;
    z-index: 2;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.35rem .85rem;
    background:
        linear-gradient(180deg, rgba(12, 35, 64, .95), rgba(10, 29, 54, .99)),
        url("images/deep-constellation-panel.svg") center bottom / cover no-repeat;
    border-right-color: var(--admin-line);
}

.admin-sidebar::after {
    position: absolute;
    right: -76px;
    bottom: 22px;
    width: 180px;
    height: 180px;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(232, 176, 61, .18), transparent 66%);
}

.admin-brand {
    gap: .8rem;
    margin: 0 .25rem 1.5rem;
    padding: .35rem .45rem 1.45rem;
    border-bottom: 1px solid var(--admin-line);
}

.admin-brand span {
    width: 48px;
    height: 48px;
    background: rgba(232, 176, 61, .08);
    border: 1px solid rgba(232, 176, 61, .18);
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.admin-brand img {
    width: 44px;
    height: 44px;
}

.admin-brand strong {
    display: block;
    color: var(--admin-text);
    font-family: var(--admin-font);
    font-size: .98rem;
    font-weight: 800;
}

.admin-brand small {
    display: block;
    margin-top: .12rem;
    color: var(--admin-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09rem;
    text-transform: uppercase;
}

.admin-sidebar nav {
    gap: .28rem;
    min-height: 0;
    padding-bottom: .8rem;
}

.admin-sidebar a:not(.admin-brand) {
    position: relative;
    gap: .8rem;
    min-height: 51px;
    padding: .75rem .85rem;
    color: var(--admin-muted);
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: .89rem;
    font-weight: 650;
    transition: .18s ease;
}

.admin-sidebar a:not(.admin-brand) i {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #7fa6b1;
    background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(232, 176, 61, .045));
    border: 1px solid rgba(127, 175, 193, .08);
    border-radius: 10px;
    font-size: 1rem;
}

.admin-sidebar a.active,
.admin-sidebar a:not(.admin-brand):hover {
    color: var(--admin-text);
    background: linear-gradient(90deg, rgba(232, 176, 61, .14), rgba(232, 176, 61, .03));
    border-color: rgba(232, 176, 61, .16);
    box-shadow: none;
}

.admin-sidebar a.active::before,
.admin-sidebar a:not(.admin-brand):hover::before {
    position: absolute;
    left: -.86rem;
    top: 11px;
    bottom: 11px;
    width: 3px;
    content: "";
    background: var(--admin-teal);
    border-radius: 999px;
}

.admin-sidebar a.active i,
.admin-sidebar a:not(.admin-brand):hover i {
    color: var(--admin-teal);
    background: rgba(232, 176, 61, .14);
    border-color: rgba(232, 176, 61, .18);
    box-shadow: 0 0 18px rgba(232, 176, 61, .12);
}

.admin-nav {
    display: grid;
    gap: .34rem;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.admin-nav-group {
    display: grid;
    gap: .22rem;
    padding: .2rem 0 .32rem;
}

.admin-nav-parent {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: .38rem;
    align-items: center;
}

.admin-nav-parent .admin-nav-link {
    min-width: 0;
    padding-right: .85rem;
}

.admin-nav-chevron {
    display: grid;
    justify-self: end;
    width: 26px;
    height: 26px;
    place-items: center;
    color: var(--admin-teal);
    background: rgba(232, 176, 61, .08);
    border: 1px solid rgba(232, 176, 61, .14);
    border-radius: 999px;
    font-size: .8rem;
    pointer-events: none;
}

.admin-subnav {
    display: grid;
    gap: .18rem;
    margin: .08rem 0 .2rem 1.15rem;
    padding: .16rem 0 .18rem .9rem;
    border-left: 1px solid rgba(232, 176, 61, .18);
}

.admin-sidebar .admin-subnav a {
    min-height: 38px;
    padding: .5rem .64rem;
    color: rgba(251, 247, 239, .72);
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 650;
}

.admin-sidebar .admin-subnav a i {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    font-size: .82rem;
}

.admin-nav-group-secondary {
    margin-top: .35rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(232, 176, 61, .14);
}

.admin-main {
    position: relative;
    min-width: 0;
    background:
        linear-gradient(180deg, rgba(12, 35, 64, .84), rgba(12, 35, 64, .97)),
        url("images/deep-constellation-panel.svg") right top / min(980px, 75vw) auto no-repeat,
        var(--admin-bg);
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 70px;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
    background: rgba(12, 35, 64, .9);
    border-bottom: 1px solid var(--admin-line);
    backdrop-filter: blur(18px);
}

.admin-topbar::before {
    color: var(--admin-muted);
    content: "Panel administrativo";
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

.admin-topbar a {
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    margin-left: auto;
    margin-right: 1.1rem;
    padding: .48rem .86rem;
    color: var(--admin-text);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--admin-line);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 650;
}

.admin-topbar button {
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    padding: .45rem .8rem;
    color: var(--admin-muted);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 650;
    cursor: pointer;
}

.admin-topbar a i,
.admin-topbar button i {
    flex: 0 0 auto;
    color: var(--admin-teal);
    font-size: .96rem;
    line-height: 1;
}

.admin-topbar button i {
    color: #86a7ae;
}

.admin-content {
    position: relative;
    max-width: 1420px;
    padding: clamp(1.4rem, 3vw, 2.7rem);
}

.admin-page-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 1.45rem;
    padding: clamp(1.35rem, 3vw, 2.2rem);
    background:
        linear-gradient(100deg, rgba(12, 32, 44, .96), rgba(10, 27, 38, .76)),
        url("images/ocean-moon-hero.webp") center 56% / cover no-repeat;
    border: 1px solid var(--admin-line);
    border-radius: 20px;
    box-shadow: 0 22px 56px rgba(0, 0, 0, .17);
}

.admin-page-intro::after {
    position: absolute;
    right: clamp(1rem, 5vw, 3.5rem);
    bottom: -54px;
    z-index: -1;
    width: 188px;
    height: 188px;
    content: "";
    background: radial-gradient(circle, rgba(220, 185, 110, .22), transparent 64%);
}

.admin-content .eyebrow {
    margin-bottom: .48rem;
    color: var(--admin-gold);
    font-family: inherit;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .2rem;
}

.admin-content h1,
.admin-content h2,
.admin-content h3 {
    color: var(--admin-text);
    font-family: var(--admin-font);
    font-weight: 750;
    letter-spacing: -.045em;
}

.admin-content h1 {
    margin-bottom: .45rem;
    font-size: clamp(1.75rem, 3vw, 2.45rem);
}

.admin-page-intro > p:not(.eyebrow):not(.form-success):not(.form-error) {
    max-width: 700px;
    margin-bottom: 0;
    color: #bad0d3;
    font-size: .94rem;
}

.dashboard-intro {
    display: grid;
    min-height: 162px;
    align-content: center;
}

.admin-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1.2rem;
}

.admin-metrics a,
.quick-actions a,
.requests-table article {
    background: var(--admin-card);
    border: 1px solid var(--admin-line);
    border-radius: 15px;
}

.admin-metrics a {
    grid-template-columns: 48px 1fr;
    padding: 1rem;
}

.admin-metrics a:hover,
.quick-actions a:hover {
    background: #163552;
    border-color: rgba(232, 176, 61, .4);
    transform: translateY(-1px);
}

.admin-metrics i {
    width: 44px;
    height: 44px;
    color: var(--admin-teal);
    background: rgba(232, 176, 61, .1);
    border-radius: 12px;
}

.admin-metrics small {
    color: var(--admin-muted);
    font-size: .72rem;
    font-weight: 700;
}

.admin-metrics strong {
    color: var(--admin-text);
    font-size: 1.45rem;
}

.dashboard-overview {
    margin-top: 1.15rem;
}

.dashboard-section-heading {
    display: flex;
    gap: 1rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.dashboard-section-heading h2 {
    margin: .1rem 0 0;
    color: var(--admin-text);
    font-size: 1.15rem;
    line-height: 1.15;
}

.dashboard-section-heading > span {
    max-width: 360px;
    color: var(--admin-muted);
    font-size: .78rem;
    font-weight: 650;
    text-align: right;
}

.dashboard-request-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .95rem;
}

.dashboard-request-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    overflow: hidden;
    min-height: 126px;
    padding: 1.05rem;
    color: var(--admin-text);
    text-decoration: none;
    background:
        linear-gradient(135deg, rgba(17, 55, 83, .94), rgba(14, 42, 69, .9)),
        var(--admin-card);
    border: 1px solid rgba(232, 176, 61, .24);
    border-radius: 16px;
    box-shadow: 0 18px 36px rgba(3, 14, 27, .18);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dashboard-request-card::after {
    position: absolute;
    right: -38px;
    bottom: -46px;
    width: 130px;
    height: 130px;
    content: "";
    background: radial-gradient(circle, rgba(45, 212, 191, .16), transparent 68%);
}

.dashboard-request-card:hover {
    border-color: rgba(45, 212, 191, .55);
    box-shadow: 0 22px 44px rgba(3, 14, 27, .25);
    transform: translateY(-2px);
}

.dashboard-request-card.urgent {
    border-color: rgba(232, 176, 61, .46);
}

.dashboard-request-card i {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: var(--admin-teal);
    background: rgba(232, 176, 61, .11);
    border: 1px solid rgba(232, 176, 61, .12);
    border-radius: 14px;
}

.dashboard-request-card small,
.dashboard-request-card em {
    display: block;
}

.dashboard-request-card small {
    color: #cde5e8;
    font-size: .78rem;
    font-weight: 800;
}

.dashboard-request-card strong {
    display: inline-block;
    margin: .25rem 0;
    color: #fff;
    font-family: var(--admin-font);
    font-size: 2.1rem;
    line-height: 1;
}

.dashboard-request-card em {
    color: var(--admin-teal);
    font-size: .76rem;
    font-style: normal;
    font-weight: 800;
}

.dashboard-status-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .7rem;
}

.dashboard-status-grid article {
    display: grid;
    gap: .45rem;
    align-content: center;
    min-height: 108px;
    padding: .9rem;
    background: rgba(14, 42, 69, .62);
    border: 1px solid rgba(139, 177, 184, .16);
    border-radius: 14px;
}

.dashboard-status-grid i {
    color: var(--admin-teal);
}

.dashboard-status-grid span {
    color: var(--admin-muted);
    font-size: .72rem;
    font-weight: 750;
}

.dashboard-status-grid strong {
    color: #f6fbfb;
    font-size: 1.45rem;
    line-height: 1;
}

.dashboard-menu-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .95rem;
}

.dashboard-menu-map article {
    display: grid;
    align-content: start;
    gap: .58rem;
    min-height: 184px;
    padding: 1rem;
    background:
        linear-gradient(150deg, rgba(16, 42, 68, .9), rgba(11, 31, 52, .86)),
        var(--admin-card);
    border: 1px solid rgba(232, 176, 61, .22);
    border-radius: 16px;
}

.dashboard-menu-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .2rem;
    color: var(--admin-text);
    font-weight: 800;
}

.dashboard-menu-title i {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--admin-teal);
    background: rgba(232, 176, 61, .12);
    border: 1px solid rgba(232, 176, 61, .16);
    border-radius: 11px;
}

.dashboard-menu-map a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 38px;
    padding: .52rem .62rem;
    color: rgba(251, 247, 239, .82);
    text-decoration: none;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.dashboard-menu-map a:hover {
    color: var(--admin-text);
    background: rgba(232, 176, 61, .1);
    border-color: rgba(232, 176, 61, .22);
    transform: translateY(-1px);
}

.dashboard-menu-map a span {
    min-width: 0;
    font-size: .82rem;
    font-weight: 700;
}

.dashboard-menu-map a strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    color: var(--admin-teal);
    font-size: .86rem;
    line-height: 1;
    text-align: right;
}

.admin-content > h2 {
    margin: 2rem 0 1rem;
    font-size: 1.22rem;
}

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

.quick-actions a {
    color: var(--admin-text);
    font-size: .86rem;
    font-weight: 650;
}

.quick-actions i {
    color: var(--admin-teal);
}

.requests-panel .btn,
.manager-heading .btn,
.message-actions .btn,
.message-actions button,
.manager-list button,
.manager-form .btn,
.settings-form .btn,
.message-filters a,
.message-filters button {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    justify-content: center;
}

.requests-panel .btn i,
.manager-heading .btn i,
.message-actions i,
.manager-list button i,
.manager-form .btn i,
.settings-form .btn i,
.message-filters a i,
.message-filters button i {
    font-size: .92rem;
    line-height: 1;
}

.manager-list button {
    min-height: 38px;
    padding-inline: .68rem;
}

.manager-list button:not(.danger),
.message-actions button:not(.danger) {
    color: #c8e5e5;
}

.manager-list button:not(.danger) i,
.message-actions button:not(.danger) i {
    color: var(--admin-teal);
}

.manager-list button.danger i,
.message-actions button.danger i {
    color: #ef978e;
}

.manager-heading .btn-secondary {
    color: var(--admin-text);
    background: rgba(8, 21, 29, .45);
    border-color: var(--admin-line);
}

.manager-heading .btn-secondary i,
.requests-panel .btn-secondary i {
    color: var(--admin-teal);
}

.manager-form .btn-primary i,
.settings-form .btn-primary i {
    font-size: 1rem;
}

.requests-panel,
.manager-panel {
    padding: clamp(1rem, 2vw, 1.45rem);
    background: var(--admin-panel);
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .12);
}

.requests-panel {
    margin-top: 2rem;
}

.requests-table article,
.message-list article,
.manager-list article,
.manager-form,
.manager-empty,
.settings-form {
    background: rgba(16, 34, 44, .88);
    border-color: var(--admin-line);
    border-radius: 12px;
}

.content-tabs {
    margin: 1.45rem 0 0;
}

.content-tabs a {
    color: #d6e1df;
    background: rgba(7, 20, 29, .48);
    border-color: var(--admin-line);
    font-size: .82rem;
    font-weight: 700;
}

.content-tabs a:hover {
    color: var(--admin-text);
    border-color: rgba(232, 176, 61, .45);
}

.agency-admin .content-tabs button,
.cabin-admin .content-tabs button {
    position: relative;
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    min-height: 46px;
    padding: .72rem 1rem;
    color: #f5efe4;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
        rgba(13, 28, 45, .72);
    border: 1px solid rgba(216, 183, 116, .32);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .16);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 750;
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.agency-admin .content-tabs button::after,
.cabin-admin .content-tabs button::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0;
    background: linear-gradient(115deg, transparent 12%, rgba(255, 228, 170, .2) 46%, transparent 78%);
    transform: translateX(-110%);
    transition: opacity .18s ease, transform .42s ease;
}

.agency-admin .content-tabs button i,
.cabin-admin .content-tabs button i {
    position: relative;
    z-index: 1;
    color: var(--admin-gold);
    font-size: .98rem;
}

.agency-admin .content-tabs button:hover,
.agency-admin .content-tabs button:focus-visible,
.cabin-admin .content-tabs button:hover,
.cabin-admin .content-tabs button:focus-visible {
    color: #1b1408;
    background: linear-gradient(180deg, #f0d28a, var(--admin-gold));
    border-color: rgba(245, 211, 132, .9);
    box-shadow: 0 14px 30px rgba(216, 183, 116, .2), 0 0 0 1px rgba(255, 235, 186, .12);
    outline: none;
    transform: translateY(-1px);
}

.agency-admin .content-tabs button:hover::after,
.agency-admin .content-tabs button:focus-visible::after,
.cabin-admin .content-tabs button:hover::after,
.cabin-admin .content-tabs button:focus-visible::after {
    opacity: 1;
    transform: translateX(110%);
}

.agency-admin .content-tabs button:hover i,
.agency-admin .content-tabs button:focus-visible i,
.cabin-admin .content-tabs button:hover i,
.cabin-admin .content-tabs button:focus-visible i {
    color: inherit;
}

.message-filters a,
.message-filters button {
    color: var(--admin-muted);
    background: rgba(8, 19, 27, .55);
    border-color: var(--admin-line);
}

.message-filters a.active,
.message-filters button.active {
    color: #0c2340;
    background: var(--admin-teal);
}

.message-status.pending {
    color: #efd898;
    background: rgba(220, 185, 110, .16);
}

.manager-form input:not([type=checkbox]),
.manager-form textarea,
.manager-form select,
.settings-form input,
.settings-form textarea {
    color: var(--admin-text);
    background: rgba(12, 35, 64, .62);
    border-color: rgba(217, 166, 71, .23);
    border-radius: 9px;
    font-family: inherit;
}

.manager-form input:focus,
.manager-form textarea:focus,
.manager-form select:focus,
.settings-form input:focus,
.settings-form textarea:focus {
    outline: 1px solid var(--admin-teal);
    border-color: var(--admin-teal);
}

.manager-form .btn-primary,
.settings-form .btn-primary {
    color: #0c2340;
    background: linear-gradient(130deg, var(--admin-teal), #d9a647);
}

.settings-form {
    max-width: 1040px;
    margin-top: 1.3rem;
    padding: clamp(1rem, 3vw, 1.55rem);
    border: 1px solid var(--admin-line);
}

.period-list article.selected {
    background: rgba(232, 176, 61, .1);
    border-color: var(--admin-teal);
    box-shadow: inset 0 0 0 1px rgba(232, 176, 61, .22);
}

.admin-login {
    display: grid;
    grid-template-columns: minmax(370px, 1.16fr) minmax(360px, .84fr);
    min-height: 100vh;
    padding: 0;
    background: #0c2340;
}

.admin-login-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(1.6rem, 4vw, 3rem);
    background:
        linear-gradient(0deg, rgba(4, 13, 20, .78), rgba(4, 15, 24, .22)),
        linear-gradient(90deg, rgba(5, 15, 22, .22), transparent),
        url("images/ocean-moon-hero.webp") center / cover no-repeat;
}

.admin-login-visual::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent 65%, #0c2340);
}

.admin-login-brand,
.admin-login-presentation {
    position: relative;
    z-index: 1;
}

.admin-login-brand {
    display: inline-flex;
    gap: .8rem;
    align-items: center;
    color: var(--admin-text);
    text-decoration: none;
}

.admin-login-brand img {
    width: 50px;
    height: 50px;
}

.admin-login-brand strong,
.admin-login-brand small {
    display: block;
}

.admin-login-brand strong {
    font-size: 1rem;
    font-weight: 800;
}

.admin-login-brand small {
    color: #b4c8ca;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .14rem;
    text-transform: uppercase;
}

.admin-login-presentation {
    max-width: 535px;
    margin-bottom: clamp(1.5rem, 5vw, 4rem);
}

.admin-login-presentation h2 {
    margin: .7rem 0 .85rem;
    color: #fff;
    font-family: var(--admin-font);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 750;
    letter-spacing: -.06em;
    line-height: 1.08;
}

.admin-login-presentation > p:not(.eyebrow) {
    max-width: 470px;
    color: #d3dfdf;
}

.admin-login-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.75rem;
}

.admin-login-highlights span {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    padding: .58rem .8rem;
    color: #e8f1f0;
    background: rgba(7, 20, 27, .36);
    border: 1px solid rgba(236, 245, 242, .17);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    font-size: .8rem;
    font-weight: 650;
}

.admin-login-highlights i {
    color: var(--admin-gold);
}

.admin-login-card {
    display: grid;
    align-content: center;
    width: 100%;
    max-width: none;
    padding: clamp(2rem, 7vw, 5.2rem);
    background:
        radial-gradient(circle at 80% 5%, rgba(232, 176, 61, .13), transparent 22rem),
        #0c2340;
    border: 0;
    border-radius: 0;
}

.admin-access-label {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    width: max-content;
    margin-bottom: 1rem;
    padding: .38rem .7rem;
    color: var(--admin-teal);
    background: rgba(232, 176, 61, .09);
    border: 1px solid rgba(232, 176, 61, .18);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

.admin-login-card h1 {
    color: var(--admin-text);
    font-family: var(--admin-font);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 750;
    letter-spacing: -.055em;
}

.admin-login-card > p:not(.admin-access-label):not(.form-error) {
    color: var(--admin-muted);
}

.admin-login-card form {
    gap: 1rem;
    margin: 1.7rem 0 1.4rem;
}

.admin-login-card label {
    color: var(--admin-muted);
    font-size: .73rem;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.admin-login-card input {
    min-height: 53px;
    color: var(--admin-text);
    background: rgba(13, 39, 66, .86);
    border-color: var(--admin-line);
    border-radius: 10px;
    font: 500 .92rem var(--admin-font);
}

.admin-login-card input:focus {
    outline: 1px solid var(--admin-teal);
    border-color: var(--admin-teal);
}

.admin-login-card .password-field {
    position: relative;
    display: block;
}

.admin-login-card .password-field input {
    width: 100%;
    padding-right: 3.4rem;
}

.admin-login-card .password-toggle {
    position: absolute;
    top: 50%;
    right: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    color: rgba(237, 245, 242, .78);
    background: transparent;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
}

.admin-login-card .password-toggle:hover,
.admin-login-card .password-toggle:focus-visible {
    color: var(--admin-teal);
    background: rgba(95, 214, 204, .12);
    outline: none;
}

.admin-login-card .btn {
    gap: .55rem;
    min-height: 53px;
    margin-top: .35rem;
    color: #06202a;
    background: linear-gradient(125deg, var(--admin-teal), #d9a647);
    border-radius: 10px;
    font-family: inherit;
    font-weight: 800;
}

.admin-login-card .back-link {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    color: var(--admin-muted);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
}

.admin-login-card .back-link:hover {
    color: var(--admin-teal);
}

.admin-login.unauthorized {
    display: grid;
    width: min(520px, calc(100% - 2rem));
    min-height: auto;
    margin: clamp(3rem, 14vh, 8rem) auto;
    padding: clamp(1.5rem, 4vw, 2.2rem);
    background: var(--admin-card);
    border: 1px solid var(--admin-line);
    border-radius: 18px;
}

@media (max-width: 1080px) {
    .admin-metrics,
    .dashboard-request-cards,
    .dashboard-menu-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 900px) {
    .admin-login {
        display: block;
        padding: 1rem;
        background:
            linear-gradient(180deg, rgba(12, 35, 64, .55), #0c2340 38%),
            url("images/ocean-moon-hero.webp") top center / auto 360px no-repeat,
            #0c2340;
    }

    .admin-login-visual {
        min-height: 0;
        gap: 2rem;
        padding: 1rem 1rem 2.25rem;
        background: transparent;
    }

    .admin-login-visual::after {
        display: none;
    }

    .admin-login-presentation h2 {
        font-size: 2.2rem;
    }

    .admin-login-presentation {
        margin-bottom: 0;
    }

    .admin-login-card {
        margin-top: 0;
        padding: clamp(1.4rem, 5vw, 2rem);
        border: 1px solid var(--admin-line);
        border-radius: 18px;
    }
}

@media (max-width: 980px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: relative;
        height: auto;
        max-height: none;
        overflow: visible;
        padding-bottom: .8rem;
    }

    .admin-sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .admin-subnav {
        margin-left: .72rem;
    }

    .admin-topbar::before {
        display: none;
    }
}

@media (max-width: 600px) {
    .admin-sidebar nav,
    .quick-actions,
    .admin-metrics,
    .dashboard-request-cards,
    .dashboard-menu-map,
    .dashboard-status-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-section-heading {
        align-items: start;
        flex-direction: column;
    }

    .dashboard-section-heading > span {
        text-align: left;
    }

    .requests-panel .manager-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .requests-panel .manager-heading .btn {
        width: 100%;
        white-space: normal;
    }

    .admin-page-intro {
        padding: 1.15rem;
    }
}

/* Institutional and contact pages */
.about-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.15rem, 2.4vw, 1.8rem);
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-top: clamp(2.2rem, 5vw, 4rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.about-pillar {
    display: grid;
    grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    background:
        radial-gradient(circle at 88% 18%, rgba(232, 176, 61, .12), transparent 18rem),
        linear-gradient(145deg, rgba(16, 42, 68, .94), rgba(10, 31, 56, .9));
    border: 1px solid rgba(217, 166, 71, .28);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(4, 16, 30, .26);
}

.about-pillar-reverse {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr);
}

.about-pillar-reverse .about-pillar-image {
    grid-column: 2;
}

.about-pillar-reverse .about-pillar-copy {
    grid-column: 1;
    grid-row: 1;
}

.about-pillar-image {
    position: relative;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
}

.about-pillar-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(6, 19, 36, .08), rgba(6, 19, 36, .58));
}

.about-pillar-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-pillar-copy {
    display: flex;
    min-height: 320px;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.65rem, 4vw, 3.4rem);
}

.about-pillar i {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    margin-bottom: 1rem;
    color: var(--gold);
    background: rgba(232, 176, 61, .12);
    border-radius: 50%;
    font-size: 1.25rem;
}

.about-pillar h2,
.contact-team h2 {
    color: var(--gold);
}

.about-pillar p {
    color: rgba(245, 241, 230, .84);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.8;
    max-width: 680px;
}

.photo-page {
    --page-background-image: var(--bg-photo-about);
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--page-background-image) center top / cover fixed no-repeat;
}

.photo-page::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(12, 35, 64, .18), rgba(12, 35, 64, .7) 29rem, rgba(12, 35, 64, .87) 58rem, rgba(9, 29, 53, .94) 100%);
}

.photo-page > * {
    position: relative;
    z-index: 1;
}

.gallery-background {
    --page-background-image: url("images/refresh/home-gallery-vivid.webp");
}

.events-background {
    --page-background-image: var(--bg-photo-events);
}

.blog-background {
    --page-background-image: var(--bg-photo-blog);
}

.about-background {
    --page-background-image: var(--bg-photo-about);
}

.photo-page .page-hero.compact {
    background:
        linear-gradient(90deg, rgba(6, 19, 36, .77), rgba(6, 19, 36, .34), rgba(6, 19, 36, .48)) !important;
}

.photo-page .gallery-page,
.photo-page .timeline,
.photo-page .blog-list,
.photo-page .about-pillars {
    background: transparent;
}

.contact-page {
    position: relative;
    overflow-x: hidden;
    background:
        var(--bg-photo-contact) center top / cover fixed no-repeat;
}

.contact-page::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(12, 35, 64, .16), rgba(12, 35, 64, .68) 29rem, rgba(12, 35, 64, .85) 58rem, rgba(9, 29, 53, .92) 100%);
}

.contact-hero,
.contact-team,
.contact-request {
    position: relative;
    z-index: 1;
}

.contact-hero {
    min-height: clamp(520px, 72vh, 680px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    justify-content: space-between;
    padding: clamp(7.5rem, 12vw, 10rem) clamp(1rem, 6vw, 5rem) clamp(3.5rem, 7vw, 5rem);
    background:
        radial-gradient(circle at 74% 22%, rgba(232, 176, 61, .18), transparent 25rem),
        linear-gradient(90deg, rgba(6, 19, 36, .78), rgba(6, 19, 36, .34), rgba(6, 19, 36, .46));
}

.contact-intro {
    max-width: 760px;
}

.contact-intro h1 {
    max-width: 680px;
    margin: .7rem 0 1.15rem;
    font-family: var(--display-font);
    font-size: clamp(2.8rem, 6vw, 4.8rem);
    font-weight: 300;
    line-height: 1;
}

.contact-intro > p:not(.eyebrow) {
    max-width: 650px;
    margin-bottom: 1.55rem;
    color: var(--soft);
    font-size: clamp(.98rem, 1.2vw, 1.08rem);
    line-height: 1.7;
}

.contact-methods a {
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    padding: .72rem 1rem;
    border: 1px solid rgba(217, 166, 71, .34);
    border-radius: 999px;
    background: rgba(12, 35, 64, .72);
    text-decoration: none;
}

.contact-methods i {
    color: var(--gold);
}

.contact-form h2 {
    margin-bottom: .2rem;
    color: var(--gold);
    font-size: 1.8rem;
}

.contact-hero .contact-form {
    width: 100%;
    padding: clamp(1.2rem, 2.2vw, 1.65rem);
    background: rgba(16, 42, 68, .94);
    border: 1px solid rgba(217, 166, 71, .25);
    border-radius: 8px;
    box-shadow: 0 22px 60px rgba(4, 16, 30, .28);
}

.contact-hero .contact-form textarea {
    min-height: 112px;
}

.contact-hero .contact-form .btn {
    min-height: 50px;
    margin-top: .2rem;
}

.contact-team {
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem) clamp(3.2rem, 6vw, 4.8rem);
    background: rgba(11, 36, 65, .96);
}

.contact-team header {
    width: min(100%, 1500px);
    max-width: 1500px;
    margin: 0 auto clamp(1.6rem, 3vw, 2.2rem);
    justify-self: center;
    text-align: left;
}

.contact-team header > p:not(.eyebrow) {
    max-width: 760px;
}

.contact-team header h2 {
    margin: .6rem 0 .65rem;
    font-size: clamp(2.1rem, 3.3vw, 2.8rem);
}

.team-directory {
    display: grid;
    width: min(100%, 1500px);
    margin: 0 auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .8rem;
}

.team-profile {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: .75rem;
    overflow: hidden;
    min-height: 178px;
    padding: .8rem;
    background: rgba(16, 42, 68, .78);
    border: 1px solid rgba(217, 166, 71, .18);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(4, 16, 30, .16);
}

.team-profile img {
    width: 82px;
    height: 122px;
    object-fit: cover;
    border-radius: 6px;
}

.team-profile .avatar {
    width: 82px;
    height: 82px;
    margin: 0;
}

.team-profile-copy h3 {
    margin: 0 0 .25rem;
    color: #fbf7ef;
    font-family: var(--display-font);
    font-size: clamp(1.1rem, 1.25vw, 1.42rem);
    line-height: 1.05;
}

.team-profile-copy strong {
    color: var(--gold);
    font-size: .85rem;
}

.team-profile-copy p {
    margin: .6rem 0 .75rem;
    color: var(--soft);
    font-size: .84rem;
    line-height: 1.45;
}

.contact-request {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(340px, 520px);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
    padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 9vw, 10rem);
    background:
        radial-gradient(circle at 18% 26%, rgba(232, 176, 61, .08), transparent 25rem),
        transparent;
}

.contact-request-copy {
    max-width: 530px;
    padding-top: .8rem;
}

.contact-request-copy h2 {
    margin: .65rem 0 1rem;
    color: var(--gold);
    font-family: var(--display-font);
    font-size: clamp(2.25rem, 4vw, 3.15rem);
    font-weight: 400;
    line-height: 1.06;
}

.contact-request-copy > p:not(.eyebrow) {
    margin: 0 0 1.8rem;
    color: var(--soft);
    line-height: 1.7;
}

.contact-request-detail {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.75rem;
    padding: 1rem 1.1rem;
    background: rgba(16, 42, 68, .72);
    border: 1px solid rgba(217, 166, 71, .22);
    border-radius: 14px;
}

.contact-request-detail i {
    display: grid;
    width: 42px;
    height: 42px;
    flex: none;
    place-items: center;
    color: var(--gold);
    background: rgba(232, 176, 61, .12);
    border-radius: 50%;
    font-size: 1.15rem;
}

.contact-request-detail strong,
.contact-request-detail span {
    display: block;
}

.contact-request-detail strong {
    margin-bottom: .3rem;
    color: #fbf7ef;
}

.contact-request-detail span {
    color: var(--soft);
    font-size: .9rem;
    line-height: 1.5;
}

.contact-request .contact-form {
    position: static;
    padding: clamp(1.25rem, 3vw, 1.7rem);
    background: rgba(16, 42, 68, .92);
    border-color: rgba(217, 166, 71, .25);
    border-radius: 18px;
}

.contact-request .contact-form .btn {
    min-height: 50px;
    margin-top: .3rem;
}

@media (max-width: 1120px) {
    .contact-hero {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    }
}

@media (max-width: 980px) {
    .team-directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-profile:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: calc(50% - .575rem);
        justify-self: center;
    }
}

@media (max-width: 880px) {
    .contact-hero {
        grid-template-columns: 1fr;
    }

    .contact-request {
        grid-template-columns: 1fr;
    }

    .contact-request-copy {
        max-width: none;
    }
}

@media (max-width: 620px) {
    .photo-page {
        background-attachment: scroll;
    }

    .contact-page {
        background-attachment: scroll;
    }

    .contact-hero {
        min-height: auto;
        padding: 6.5rem clamp(.85rem, 4vw, 1.1rem) 2.75rem;
        gap: 1.25rem;
        align-items: start;
    }

    .contact-intro h1 {
        font-size: clamp(2.35rem, 13vw, 3.15rem);
    }

    .contact-hero .contact-form {
        min-width: 0;
        padding: 1rem;
    }

    .contact-form {
        gap: .72rem;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        min-height: 42px;
        padding: .65rem .75rem;
    }

    .contact-hero .contact-form textarea {
        min-height: 96px;
    }

    .team-directory {
        grid-template-columns: 1fr;
    }

    .team-profile:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
    }

    .contact-methods {
        align-items: stretch;
    }

    .contact-methods a {
        justify-content: center;
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 980px) {
    .site-header {
        background:
            linear-gradient(180deg, rgba(12, 35, 64, .99), rgba(13, 39, 66, .96));
        border-bottom: 1px solid rgba(217, 166, 71, .16);
        box-shadow: 0 14px 36px rgba(4, 16, 30, .28);
    }

    .nav-toggle-button {
        background: rgba(16, 42, 68, .7);
        border-color: rgba(217, 166, 71, .22);
    }

    .nav-toggle:checked ~ .site-nav {
        background:
            linear-gradient(180deg, rgba(13, 39, 66, .18), rgba(12, 35, 64, .55));
    }
}

/* Dashboard forms */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
}

.manager-form .form-actions .btn-secondary,
.settings-form .form-actions .btn-secondary {
    color: var(--admin-muted);
    background: transparent;
    border-color: var(--admin-line);
}

.manager-form .form-actions .btn-secondary:hover,
.settings-form .form-actions .btn-secondary:hover {
    color: var(--admin-text);
    border-color: var(--admin-gold);
}

.page-copy-form {
    max-width: 100%;
}

.image-upload-field {
    display: grid;
    gap: .45rem;
}

.image-upload-label {
    color: var(--admin-muted);
    font-size: .78rem;
    font-weight: 700;
}

.image-upload-current {
    display: flex;
    gap: .7rem;
    align-items: center;
    min-width: 0;
    padding: .45rem;
    border: 1px solid var(--admin-line);
    border-radius: 9px;
    background: rgba(12, 35, 64, .38);
}

.image-upload-current img {
    width: 58px;
    height: 58px;
    flex: none;
    object-fit: cover;
    border-radius: 7px;
}

.image-upload-current code {
    overflow: hidden;
    color: var(--admin-muted);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-upload-field input[type=file] {
    padding: .42rem;
    cursor: pointer;
}

.image-upload-field input[type=file]::file-selector-button {
    margin-right: .7rem;
    padding: .45rem .75rem;
    color: #0c2340;
    background: var(--admin-teal);
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.image-upload-field small {
    color: var(--admin-muted);
    font-size: .75rem;
}

.team-manager-list img {
    object-fit: cover;
}

@media (max-width: 560px) {
    .team-profile {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .about-pillar,
    .about-pillar-reverse {
        grid-template-columns: 1fr;
    }

    .about-pillar-reverse .about-pillar-image,
    .about-pillar-reverse .about-pillar-copy {
        grid-column: auto;
        grid-row: auto;
    }

    .about-pillar-image,
    .about-pillar-copy {
        min-height: 0;
    }

    .about-pillar-image {
        height: clamp(280px, 52vw, 360px);
    }
}

/* Cabin booking page */
.cabin-page {
    position: relative;
    min-height: 100vh;
    padding: clamp(8.5rem, 12vw, 11.5rem) clamp(1rem, 8vw, 14rem) clamp(2rem, 4vw, 3.5rem);
    overflow-x: clip;
    overflow-y: visible;
    background: #0c2340;
    isolation: isolate;
}

.cabin-page::before {
    position: fixed;
    inset: 0;
    z-index: -2;
    content: "";
    background: var(--cabin-hero, url("images/cabin-seaside-hero.webp")) center top / cover no-repeat;
    transform: scale(1.02);
}

/* Golden navigation highlight and expanded administration controls */
.site-nav a {
    position: relative;
    overflow: hidden;
    transition: color .2s ease, text-shadow .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.site-nav a::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0;
    background: linear-gradient(115deg, transparent 10%, rgba(255, 222, 133, .24) 45%, transparent 74%);
    transform: translateX(-110%);
    transition: transform .42s ease, opacity .2s ease;
}

.site-nav i {
    display: inline-block;
    color: var(--gold);
    transition: transform .22s ease, filter .22s ease;
}

.site-nav a:hover,
.site-nav a.active {
    color: #ffe2a0;
    text-shadow: 0 0 12px rgba(232, 176, 61, .52);
}

.site-nav a:hover::before,
.site-nav a.active::before {
    opacity: 1;
    transform: translateX(110%);
}

.site-nav a:hover i,
.site-nav a.active i {
    transform: scale(1.15);
    filter: drop-shadow(0 0 7px rgba(232, 176, 61, .8));
}

.security-forms {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 1rem;
}

.security-forms .manager-form {
    display: flex;
    flex-direction: column;
}

.security-forms .manager-form .btn {
    width: 100%;
    margin-top: auto;
}

.account-security {
    margin-top: 2rem;
}

.dashboard-detail-panel {
    margin-top: 1.4rem;
    scroll-margin-top: 1.2rem;
}

.dashboard-request-details {
    display: grid;
    gap: .65rem;
}

.dashboard-request-details details {
    padding: .85rem 1rem;
    color: var(--admin-text);
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--admin-line);
    border-radius: 10px;
}

.dashboard-request-details summary {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.15rem;
    align-items: center;
    color: var(--admin-muted);
    cursor: pointer;
}

.dashboard-request-details summary strong {
    color: var(--admin-text);
}

.dashboard-request-details p {
    margin: .8rem 0 .55rem;
    color: var(--admin-text);
}

.request-status {
    display: inline-block;
    padding: .25rem .6rem;
    color: var(--admin-gold);
    background: rgba(216, 183, 116, .1);
    border-radius: 999px;
    font-size: .78rem;
}

.amenities-selector h4 {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    margin: 0 0 .6rem;
    color: var(--admin-text);
    font-size: .94rem;
    font-weight: 750;
}

.amenity-group + .amenity-group {
    margin-top: 1.05rem;
}

.amenities-selector h4 i {
    color: var(--admin-gold);
}

.amenities-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: .65rem;
}

.amenity-option {
    display: flex;
    gap: .65rem;
    align-items: center;
    min-height: 58px;
    padding: .75rem .9rem;
    color: var(--admin-text);
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--admin-line);
    border-radius: 9px;
    font: 650 .86rem var(--admin-font);
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.amenity-option > i:first-child {
    color: var(--admin-gold);
    font-size: 1rem;
}

.amenity-option:hover,
.amenity-option:focus-visible {
    background: rgba(232, 176, 61, .08);
    border-color: rgba(232, 176, 61, .48);
    outline: none;
}

.amenity-option.selected {
    color: #eef9f0;
    background: rgba(46, 153, 94, .23);
    border-color: rgba(67, 195, 119, .7);
}

.amenity-option.selected > i:first-child,
.amenity-option .selected-mark {
    color: #35c174;
}

.amenity-option .selected-mark {
    margin-left: auto;
}

.amenities-note {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: 1.2rem 0 0;
    padding: .72rem .85rem;
    color: #bce2ea;
    background: rgba(36, 153, 196, .12);
    border: 1px solid rgba(57, 180, 220, .28);
    border-radius: 8px;
    font-size: .82rem;
}

.cabin-admin-grid {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(320px, 1fr);
    gap: 1rem;
    align-items: start;
}

.cabin-admin-preview {
    position: sticky;
    top: 1rem;
    overflow: hidden;
    min-height: 380px;
    color: var(--admin-text);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--admin-line);
    border-radius: 12px;
}

.cabin-admin-preview img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.cabin-admin-preview div {
    display: grid;
    gap: .35rem;
    padding: 1rem;
}

.cabin-admin-preview span {
    color: var(--admin-gold);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cabin-admin-preview strong {
    font-size: 1.25rem;
}

.cabin-admin-preview small {
    color: var(--admin-muted);
}

.cabin-photo-list article {
    grid-template-columns: 86px 1fr auto auto;
}

.review-list article {
    grid-template-columns: 1fr auto auto;
}

.cabin-experience-list article {
    grid-template-columns: 92px 1fr auto auto;
}

.cabin-experience-list img {
    width: 92px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
}

.manager-checkbox {
    display: flex !important;
    flex-direction: row !important;
    gap: .65rem !important;
    align-items: center;
    min-height: 48px;
    margin-top: 1.35rem;
}

.manager-checkbox input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--admin-gold);
}

@media (max-width: 680px) {
    .cabin-experience-list article {
        grid-template-columns: 72px 1fr;
    }

    .cabin-experience-list img {
        width: 72px;
        height: 62px;
    }
}

/* Common button behavior: neutral at rest, gold only while interacting. */
body .btn:not(.btn-whatsapp) {
    color: #f7f2eb;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(217, 166, 71, .34);
    box-shadow: none;
}

body .btn:not(.btn-whatsapp):hover,
body .btn:not(.btn-whatsapp):focus-visible,
body .btn:not(.btn-whatsapp):active {
    color: #16110a;
    background: var(--gold);
    border-color: var(--gold);
}

body .btn:not(.btn-whatsapp):hover i,
body .btn:not(.btn-whatsapp):focus-visible i,
body .btn:not(.btn-whatsapp):active i {
    color: inherit;
}

@media (max-width: 980px) {
    .site-nav a {
        border: 1px solid rgba(232, 176, 61, .15);
        border-radius: 12px;
        background: rgba(232, 176, 61, .025);
    }

    .site-nav a:hover,
    .site-nav a.active {
        color: #ffe2a0;
        background: rgba(232, 176, 61, .14);
        border-color: rgba(232, 176, 61, .48);
        box-shadow: inset 0 0 22px rgba(232, 176, 61, .12), 0 0 16px rgba(232, 176, 61, .12);
    }

    .security-forms {
        grid-template-columns: 1fr;
    }

    .amenities-options {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .cabin-admin-grid {
        grid-template-columns: 1fr;
    }

    .cabin-admin-preview {
        position: static;
    }
}

@media (max-width: 560px) {
    .amenities-options {
        grid-template-columns: 1fr;
    }
}

.cabin-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 22%, rgba(201, 160, 92, .16), transparent 30rem),
        linear-gradient(180deg, rgba(12, 35, 64, .42) 0%, rgba(12, 35, 64, .72) 34%, rgba(12, 35, 64, .78) 100%),
        rgba(12, 35, 64, .26);
}

.cabin-intro,
.cabin-stay {
    position: relative;
    z-index: 1;
}

.cabin-intro {
    max-width: 760px;
    margin: 0 auto clamp(3rem, 8vw, 8rem);
    text-align: center;
}

.cabin-intro h1 {
    margin: .5rem 0 1.2rem;
    font-family: var(--display-font);
    color: #f7f2eb;
    font-size: clamp(3.3rem, 7vw, 5.4rem);
    font-weight: 700;
    line-height: 1;
}

.cabin-facts {
    display: flex;
    justify-content: center;
    gap: clamp(.8rem, 3vw, 1.7rem);
    flex-wrap: wrap;
    color: #ddd6cb;
    font-size: 1rem;
    font-weight: 600;
}

.cabin-facts span {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
}

.cabin-facts i,
.cabin-features i {
    color: var(--gold);
}

.cabin-stay {
    display: grid;
    grid-template-columns: minmax(430px, 700px) minmax(380px, 440px);
    gap: clamp(1.5rem, 4vw, 3.2rem);
    align-items: start;
    justify-content: center;
    width: 100%;
    margin-bottom: 0;
}

.cabin-details,
.cabin-reservation {
    min-width: 0;
}

.cabin-page + .site-footer {
    position: relative;
    z-index: 2;
    margin-top: 0;
    background:
        linear-gradient(135deg, rgba(232, 176, 61, .08), transparent 24rem),
        linear-gradient(180deg, #111 0%, #090909 100%);
}

.cabin-photo {
    position: relative;
    margin: 0 0 1.4rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: #161514;
}

.cabin-photo img {
    display: block;
    width: 100%;
    min-height: 385px;
    aspect-ratio: 1.75;
    object-fit: cover;
}

.cabin-photo figcaption {
    position: absolute;
    inset: auto 1.35rem 1.15rem;
    padding: .45rem .7rem;
    color: #eee5d7;
    background: rgba(8, 8, 8, .62);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    font-size: .78rem;
    letter-spacing: .07rem;
    text-transform: uppercase;
}

.cabin-gallery {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    grid-auto-rows: minmax(220px, 1fr);
    gap: .85rem;
    margin: 1rem 0 1.4rem;
    align-items: stretch;
}

.cabin-gallery figure {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    margin: 0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
}

.cabin-gallery figure:first-child {
    grid-row: span 2;
}

.cabin-gallery figure:first-child:nth-last-child(2) {
    grid-row: auto;
}

.cabin-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.cabin-gallery figcaption {
    position: absolute;
    right: .8rem;
    bottom: .8rem;
    left: .8rem;
    padding: .5rem .65rem;
    color: #f7f2eb;
    background: rgba(7, 22, 41, .72);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    font-size: .82rem;
}

.availability-calendar {
    margin: 0 0 2rem;
    padding: clamp(1rem, 3vw, 1.45rem);
    color: var(--ink);
    background: rgba(21, 21, 20, .94);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
}

.calendar-heading {
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    align-items: start;
    margin-bottom: 1rem;
}

.calendar-heading h2 {
    margin: 0 0 .25rem;
    color: #f7f2eb;
    font-family: var(--display-font);
    font-size: 2.35rem;
    font-weight: 700;
}

.calendar-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}

.calendar-controls {
    display: flex;
    gap: .55rem;
    align-items: center;
}

.calendar-controls strong {
    min-width: 132px;
    color: #f1e8dc;
    text-align: center;
    text-transform: capitalize;
}

.calendar-controls button {
    width: 38px;
    height: 38px;
    color: var(--ink);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    cursor: pointer;
}

.calendar-legend {
    display: flex;
    gap: 1.1rem;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: .83rem;
}

.calendar-legend span {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
}

.calendar-legend span::before {
    width: 11px;
    height: 11px;
    content: "";
    border-radius: 50%;
}

.calendar-legend .available::before {
    background: #3c9562;
}

.calendar-legend .unavailable::before {
    background: #a14b45;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .45rem;
}

.calendar-weekdays {
    margin-bottom: .45rem;
    color: #8d857d;
    text-align: center;
    font-size: .84rem;
    font-weight: 800;
    text-transform: uppercase;
}

.calendar-days span {
    display: grid;
    min-height: 46px;
    place-items: center;
    color: #ecdfd1;
    border-radius: 7px;
    font-size: 1rem;
    font-weight: 800;
}

.calendar-days span.available {
    background: rgba(48, 136, 83, .24);
    border: 1px solid rgba(72, 160, 109, .36);
}

.calendar-days span.unavailable {
    color: #efd4d1;
    background: rgba(161, 75, 69, .28);
    border: 1px solid rgba(186, 85, 77, .4);
}

.calendar-days span.empty {
    background: transparent;
    border: 0;
}

.cabin-about {
    padding: .25rem 0;
}

.cabin-about h2,
.cabin-about h3 {
    margin: 0 0 .7rem;
    color: #f7f2eb;
    font-family: var(--display-font);
    font-size: clamp(2.1rem, 3.2vw, 2.65rem);
    font-weight: 700;
}

.cabin-about h3 {
    margin-top: 1.45rem;
    font-size: 1.75rem;
}

.cabin-about p {
    max-width: 670px;
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 500;
}

.cabin-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem 1rem;
    margin: 0;
    padding: 0;
    color: #dbd4ca;
    font-size: 1rem;
    font-weight: 600;
    list-style: none;
}

.cabin-features li {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
}

.cabin-experiences {
    margin-top: 2.2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.cabin-experiences-heading {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 1.2rem;
}

.cabin-experiences-heading h2 {
    max-width: 620px;
    margin: .2rem 0 .45rem;
    color: #f7f2eb;
    font-family: var(--display-font);
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
}

.cabin-experiences-heading > div > p:last-child {
    max-width: 600px;
    margin: 0;
    color: var(--muted);
}

.cabin-experiences-heading > a {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .5rem;
    align-items: center;
    min-height: 44px;
    padding: .7rem .9rem;
    color: #f2d78f;
    border: 1px solid rgba(232, 176, 61, .4);
    border-radius: 6px;
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
}

.cabin-experience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cabin-experience-grid article {
    overflow: hidden;
    background: rgba(19, 26, 32, .93);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
}

.cabin-experience-shell {
    position: relative;
    min-width: 0;
}

.cabin-experience-slider {
    --cabin-experience-gap: 1rem;
    display: flex;
    grid-template-columns: none;
    gap: var(--cabin-experience-gap);
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: .12rem;
    padding-bottom: .85rem;
    scroll-behavior: smooth;
    scroll-padding-inline: .12rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 183, 116, .65) rgba(255, 255, 255, .08);
}

.cabin-experience-slider::-webkit-scrollbar {
    height: 8px;
}

.cabin-experience-slider::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}

.cabin-experience-slider::-webkit-scrollbar-thumb {
    background: rgba(216, 183, 116, .75);
    border-radius: 999px;
}

.cabin-experience-slider article {
    flex: 0 0 calc((100% - var(--cabin-experience-gap)) / 2);
    scroll-snap-align: start;
}

.cabin-experience-slider-btn {
    position: absolute;
    top: 38%;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 58px;
    place-items: center;
    color: #f7e6bd;
    background: rgba(7, 19, 31, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    backdrop-filter: blur(14px);
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.cabin-experience-slider-btn:hover,
.cabin-experience-slider-btn:focus-visible {
    color: #fff7df;
    background: rgba(12, 35, 64, .88);
    border-color: rgba(232, 176, 61, .5);
    outline: 0;
    transform: translateY(-50%) scale(1.04);
}

.cabin-experience-slider-prev {
    left: .45rem;
}

.cabin-experience-slider-next {
    right: .45rem;
}

.cabin-experience-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.cabin-experience-copy {
    display: grid;
    gap: .7rem;
    padding: 1rem;
}

.cabin-experience-copy h3 {
    margin: 0;
    color: #f7f2eb;
    font-family: var(--display-font);
    font-size: 1.55rem;
    line-height: 1.15;
}

.cabin-experience-copy > p {
    margin: 0;
    color: #c5beb5;
    font-size: .94rem;
    line-height: 1.6;
}

.cabin-experience-meta {
    display: grid;
    gap: .45rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.cabin-experience-meta span {
    display: flex;
    gap: .5rem;
    align-items: start;
    color: #dfd7cc;
    font-size: .82rem;
}

.cabin-experience-meta i,
.cabin-experiences-note i {
    color: var(--gold);
}

.cabin-experiences-note {
    display: flex;
    gap: .5rem;
    align-items: start;
    margin: .9rem 0 0;
    color: #aaa39a;
    font-size: .78rem;
}

.cabin-map,
.cabin-reviews {
    margin-top: 1.2rem;
    padding: 1.25rem;
    color: #0c2340;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(12, 35, 64, .12);
    border-radius: 18px;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .18);
}

.cabin-map h2,
.cabin-reviews h2 {
    margin: .25rem 0 .35rem;
    color: #0c2340;
    font-family: var(--display-font);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
}

.cabin-map p,
.cabin-reviews p {
    color: #42516a;
}

.cabin-map iframe {
    width: 100%;
    height: 340px;
    margin: .85rem 0;
    border: 0;
    border-radius: 14px;
}

body .btn.cabin-map-link {
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .78rem 1.15rem;
    color: #0c2340;
    background: linear-gradient(180deg, #f1d48d, var(--gold));
    border: 1px solid rgba(166, 112, 22, .34);
    border-radius: 999px;
    box-shadow: 0 14px 28px rgba(12, 35, 64, .16), inset 0 1px 0 rgba(255, 255, 255, .42);
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

body .btn.cabin-map-link i {
    color: inherit;
    font-size: 1rem;
}

body .btn.cabin-map-link:hover,
body .btn.cabin-map-link:focus-visible {
    color: #0c2340;
    background: linear-gradient(180deg, #ffe3a4, #dca94a);
    box-shadow: 0 18px 34px rgba(12, 35, 64, .22), 0 0 0 3px rgba(216, 183, 116, .18);
    outline: none;
    transform: translateY(-1px);
}

.cabin-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: .85rem;
}

.cabin-review-grid article {
    display: grid;
    gap: .75rem;
    padding: 1rem;
    background: #f7f2eb;
    border: 1px solid rgba(12, 35, 64, .1);
    border-radius: 12px;
}

.review-stars {
    color: #b97818;
    letter-spacing: .08em;
}

.cabin-review-grid footer {
    display: grid;
    gap: .15rem;
}

.cabin-review-grid footer span {
    color: #6b7280;
    font-size: .84rem;
}

.cabin-reservation {
    position: sticky;
    top: 92px;
    padding: clamp(1.25rem, 3vw, 1.7rem);
    color: var(--ink);
    background: rgba(28, 27, 26, .92);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
    backdrop-filter: blur(18px);
}

.cabin-rate {
    display: flex;
    align-items: baseline;
    gap: .38rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: var(--muted);
}

.cabin-rate strong {
    color: var(--gold);
    font-family: var(--display-font);
    font-size: 3.1rem;
    font-weight: 700;
    line-height: 1;
}

.booking-note {
    margin: 0 0 1.1rem;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.6;
}

.cabin-booking-form {
    display: grid;
    gap: 1rem;
}

.cabin-booking-form label {
    display: grid;
    gap: .32rem;
    color: #a8a097;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .09rem;
    text-transform: uppercase;
}

.cabin-booking-form input,
.cabin-booking-form textarea,
.cabin-booking-form select {
    width: 100%;
    min-height: 48px;
    padding: .78rem .85rem;
    color: #ece6dc;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 5px;
    font: 600 1rem var(--body-font);
    letter-spacing: 0;
    text-transform: none;
}

.cabin-booking-form textarea {
    min-height: 88px;
    resize: vertical;
}

.cabin-booking-form input:focus,
.cabin-booking-form textarea:focus,
.cabin-booking-form select:focus {
    outline: 1px solid var(--gold);
    border-color: var(--gold);
}

.cabin-date-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.cabin-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .2rem;
    padding: .8rem .85rem;
    color: #c7c0b6;
    background: rgba(201, 160, 92, .06);
    border-radius: 5px;
    font-size: .86rem;
}

.cabin-total strong {
    color: var(--gold);
    font-size: 1.05rem;
}

.cabin-booking-form .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .48rem;
    min-height: 50px;
    font-size: .95rem;
    font-weight: 800;
}

.cabin-booking-form .form-success {
    margin: 0;
}

.cabin-booking-form .validation-message {
    color: #efb5ad;
    font-size: .76rem;
    letter-spacing: 0;
    text-transform: none;
}

.availability-result {
    margin: 0;
    padding: .75rem .85rem;
    border-radius: 6px;
    font-size: .84rem;
    line-height: 1.5;
}

.availability-result.success {
    color: #b8e5c9;
    background: rgba(48, 136, 83, .2);
}

.availability-result.error {
    color: #f1c6c1;
    background: rgba(161, 75, 69, .22);
}

@media (max-width: 1080px) {
    .cabin-page {
        padding-inline: clamp(1rem, 5vw, 4rem);
        background-attachment: scroll;
    }

    .cabin-stay {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

@media (max-width: 880px) {
    .cabin-intro {
        margin-bottom: 3rem;
    }

    .cabin-stay {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 700px;
        margin-inline: auto;
    }

    .cabin-gallery,
    .cabin-review-grid,
    .cabin-experience-grid {
        grid-template-columns: 1fr;
    }

    .cabin-experience-slider article {
        flex-basis: calc(100% - .25rem);
    }

    .cabin-reservation {
        position: static;
    }
}

@media (max-width: 620px) {
    .cabin-page {
        padding: 7.2rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
    }

    .cabin-intro,
    .cabin-stay,
    .availability-calendar,
    .cabin-about,
    .cabin-experiences {
        width: 100%;
        max-width: 100%;
    }

    .cabin-intro {
        text-align: left;
    }

    .cabin-intro h1 {
        font-size: clamp(2.65rem, 15vw, 3.45rem);
    }

    .cabin-facts {
        justify-content: flex-start;
    }

    .cabin-photo img {
        min-height: 250px;
    }

    .availability-calendar {
        padding: .95rem;
        border-radius: 10px;
    }

    .calendar-controls {
        justify-content: space-between;
        width: 100%;
    }

    .calendar-controls strong {
        min-width: 0;
        flex: 1 1 auto;
    }

    .calendar-grid {
        gap: .35rem;
    }

    .cabin-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem;
    }

    .cabin-experiences-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .cabin-experiences-heading > a {
        justify-content: center;
        width: 100%;
    }

    .cabin-experience-slider-btn {
        top: 31%;
        width: 32px;
        height: 54px;
    }

    .cabin-experience-slider-prev {
        left: .35rem;
    }

    .cabin-experience-slider-next {
        right: .35rem;
    }

    .cabin-date-row {
        grid-template-columns: 1fr;
    }

    .calendar-heading {
        flex-direction: column;
    }

    .calendar-days span {
        min-height: 38px;
    }
}

/* Creative agency landing */
.agency-page {
    position: relative;
    overflow: hidden;
    padding: clamp(6.5rem, 11vw, 9.2rem) clamp(1rem, 8vw, 14rem) clamp(3.5rem, 8vw, 6.5rem);
    background:
        url("images/agency/agency-hero.webp") center top / cover fixed no-repeat;
}

.agency-page::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 86% 4%, rgba(216, 183, 116, .14), transparent 25rem),
        radial-gradient(circle at 4% 48%, rgba(42, 128, 136, .13), transparent 24rem),
        linear-gradient(180deg, rgba(12, 35, 64, .2), rgba(12, 35, 64, .75) 32rem, rgba(12, 35, 64, .9) 78rem, rgba(9, 29, 53, .95) 100%);
}

.agency-page > * {
    position: relative;
    z-index: 1;
}

.agency-hero {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1240px;
    min-height: min(610px, 70vh);
    margin: 0 auto clamp(4rem, 8vw, 7rem);
    padding: clamp(2rem, 6vw, 4.5rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(4, 11, 18, .98) 0%, rgba(4, 11, 18, .91) 37%, rgba(4, 11, 18, .34) 63%, rgba(4, 11, 18, .16) 100%),
        url("images/agency/agency-hero.webp") center / cover no-repeat;
    box-shadow: var(--shadow);
}

.agency-hero-copy {
    position: relative;
    z-index: 1;
}

.agency-hero-copy h1 {
    max-width: 690px;
    margin: .65rem 0 1.2rem;
    color: #f7f2eb;
    font-size: clamp(3rem, 5.1vw, 4.8rem);
    font-weight: 700;
    line-height: 1;
}

.agency-hero-copy > p:not(.eyebrow) {
    max-width: 540px;
    color: var(--soft);
    font-size: clamp(1.06rem, 1.35vw, 1.22rem);
    font-weight: 500;
}

.agency-section,
.agency-quote {
    max-width: 1240px;
    margin: 0 auto clamp(4rem, 8vw, 6.5rem);
    scroll-margin-top: 90px;
}

.agency-heading {
    max-width: 650px;
    margin-bottom: clamp(1.5rem, 4vw, 2.4rem);
}

.agency-heading h2,
.agency-quote h2 {
    margin: .45rem 0 .75rem;
    color: #f7f2eb;
    font-size: clamp(2.55rem, 4.2vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
}

.agency-heading > p:not(.eyebrow),
.agency-quote > div > p:not(.eyebrow) {
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 500;
}

.agency-section-banner {
    display: flex;
    align-items: end;
    min-height: clamp(240px, 31vw, 350px);
    margin-bottom: clamp(1.5rem, 4vw, 2.4rem);
    padding: clamp(1.35rem, 4vw, 2.35rem);
    overflow: hidden;
    border-radius: 12px;
    background-position: center;
    background-size: cover;
    box-shadow: var(--shadow);
}

.agency-section-banner .agency-heading {
    margin-bottom: 0;
}

.agency-services-banner {
    background-image:
        linear-gradient(90deg, rgba(7, 7, 7, .94) 0%, rgba(7, 7, 7, .84) 38%, rgba(7, 7, 7, .22) 66%),
        url("images/agency/agency-services.webp");
}

.agency-podcast-banner {
    background-image:
        linear-gradient(90deg, rgba(7, 7, 7, .95) 0%, rgba(7, 7, 7, .82) 39%, rgba(7, 7, 7, .22) 68%),
        url("images/agency/agency-podcast.webp");
}

.agency-video-banner {
    background-image:
        linear-gradient(90deg, rgba(7, 7, 7, .94) 0%, rgba(7, 7, 7, .75) 40%, rgba(7, 7, 7, .16) 67%),
        url("images/agency/agency-video.webp");
}

.agency-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.agency-services article {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(1.3rem, 3vw, 1.75rem);
    background: rgba(12, 35, 64, .9);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.agency-services article > i {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 1.25rem;
    place-items: center;
    color: var(--gold);
    background: rgba(216, 183, 116, .09);
    border-radius: 50%;
    font-size: 1.25rem;
}

.agency-services h3,
.agency-media-grid h3 {
    margin: 0 0 .6rem;
    color: #f7f2eb;
    font-family: var(--display-font);
    font-size: clamp(1.85rem, 2.2vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
}

.agency-services p {
    color: var(--muted);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.65;
}

.agency-services strong {
    margin-top: .45rem;
    margin-bottom: 1rem;
    color: var(--gold);
    font-size: 1.05rem;
    font-weight: 800;
}

.agency-services .btn {
    width: max-content;
    min-height: 44px;
    padding-inline: 1.15rem;
    font-size: 1rem;
    font-weight: 800;
}

.agency-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.45rem);
}

.agency-media-grid article {
    min-width: 0;
}

.agency-slider-shell {
    position: relative;
    min-width: 0;
}

.agency-video-slider {
    --agency-video-gap: clamp(1rem, 2.5vw, 1.45rem);
    display: flex;
    grid-template-columns: none;
    gap: var(--agency-video-gap);
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: .12rem;
    padding-bottom: .85rem;
    scroll-behavior: smooth;
    scroll-padding-inline: .12rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 183, 116, .65) rgba(255, 255, 255, .08);
}

.agency-video-slider::-webkit-scrollbar {
    height: 8px;
}

.agency-video-slider::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}

.agency-video-slider::-webkit-scrollbar-thumb {
    background: rgba(216, 183, 116, .75);
    border-radius: 999px;
}

.agency-video-slider article {
    flex: 0 0 calc((100% - var(--agency-video-gap) - var(--agency-video-gap)) / 3);
    scroll-snap-align: start;
}

.agency-slider-btn {
    position: absolute;
    top: 34%;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 58px;
    place-items: center;
    color: #f7e6bd;
    background: rgba(7, 19, 31, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    backdrop-filter: blur(14px);
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.agency-slider-btn:hover,
.agency-slider-btn:focus-visible {
    color: #fff7df;
    background: rgba(12, 35, 64, .88);
    border-color: rgba(232, 176, 61, .5);
    outline: 0;
    transform: translateY(-50%) scale(1.04);
}

.agency-slider-prev {
    left: .45rem;
}

.agency-slider-next {
    right: .45rem;
}

.agency-thumbnail {
    position: relative;
    display: block;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 9px;
    background: #161514;
}

.agency-thumbnail img {
    display: block;
    width: 100%;
    aspect-ratio: 1.62;
    object-fit: cover;
    transition: transform .3s ease, filter .3s ease;
}

.agency-thumbnail span {
    position: absolute;
    inset: auto auto 1rem 1rem;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #111;
    background: var(--gold);
    border-radius: 50%;
    font-size: 1.4rem;
}

.agency-thumbnail:hover img {
    transform: scale(1.035);
    filter: brightness(.86);
}

.agency-media-grid article > p {
    margin: -.2rem 0 .85rem;
    color: var(--muted);
}

.agency-platform-links {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}

.agency-platform-links a,
.agency-youtube-btn {
    display: inline-flex;
    gap: .42rem;
    align-items: center;
    padding: .43rem .72rem;
    color: #ddd6cd;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.agency-platform-links a:hover,
.agency-youtube-btn:hover {
    color: var(--gold);
    border-color: rgba(216, 183, 116, .42);
}

.agency-youtube-btn i {
    color: #db4c40;
}

.agency-quote {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(430px, 1fr);
    gap: clamp(2rem, 6vw, 4.5rem);
    padding: clamp(1.4rem, 4vw, 3rem);
    background:
        linear-gradient(90deg, rgba(8, 8, 8, .52), rgba(8, 8, 8, .92) 39%, rgba(8, 8, 8, .95)),
        url("images/agency/agency-quote.webp") left center / cover no-repeat;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.agency-quote-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.agency-quote-form label {
    display: grid;
    gap: .38rem;
    color: #aaa39a;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.agency-quote-form label.wide,
.agency-quote-form .btn,
.agency-quote-form .form-success {
    grid-column: 1 / -1;
}

.agency-quote-form input,
.agency-quote-form select,
.agency-quote-form textarea {
    width: 100%;
    min-height: 47px;
    padding: .7rem .8rem;
    color: #eee8df;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 5px;
    font: 500 .95rem var(--body-font);
    letter-spacing: 0;
    text-transform: none;
}

.agency-quote-form textarea {
    min-height: 100px;
    resize: vertical;
}

.agency-quote-form input:focus,
.agency-quote-form select:focus,
.agency-quote-form textarea:focus {
    outline: 1px solid var(--gold);
    border-color: var(--gold);
}

.agency-quote-form label {
    font-size: .78rem;
}

.agency-quote-form input,
.agency-quote-form select,
.agency-quote-form textarea {
    font: 600 1rem var(--body-font);
}

.agency-copy-form {
    max-width: none;
}

.agency-copy-form h3:not(:first-child) {
    margin-top: .8rem;
}

.agency-media-list img {
    aspect-ratio: 1.35;
    object-fit: cover;
}

.agency-media-list-heading {
    display: flex;
    gap: .55rem;
    align-items: center;
    margin: .25rem 0 .65rem;
    padding: .7rem .9rem;
    color: var(--gold);
    background: rgba(216, 183, 116, .08);
    border: 1px solid rgba(216, 183, 116, .22);
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 900;
    letter-spacing: .05rem;
    text-transform: uppercase;
}

.agency-media-list-heading:not(:first-child) {
    margin-top: 1rem;
}

@media (max-width: 980px) {
    .agency-quote {
        grid-template-columns: 1fr;
    }

    .agency-hero {
        min-height: 0;
        padding-block: clamp(2.5rem, 11vw, 4rem);
        background-position: 72% center;
    }

    .agency-services,
    .agency-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agency-video-slider {
        grid-template-columns: none;
    }

    .agency-video-slider article {
        flex-basis: calc((100% - var(--agency-video-gap)) / 2);
    }

    .agency-slider-prev {
        left: .4rem;
    }

    .agency-slider-next {
        right: .4rem;
    }
}

@media (max-width: 620px) {
    .agency-page {
        padding-top: 6.3rem;
        background-attachment: scroll;
    }

    .agency-hero {
        background-image:
            linear-gradient(90deg, rgba(4, 11, 18, .97), rgba(4, 11, 18, .72)),
            url("images/agency/agency-hero.webp");
    }

    .agency-services,
    .agency-media-grid,
    .agency-quote-form {
        grid-template-columns: 1fr;
    }

    .agency-video-slider {
        grid-template-columns: none;
        padding-inline: .05rem;
    }

    .agency-video-slider article {
        flex-basis: min(84vw, 100%);
    }

    .agency-slider-btn {
        width: 32px;
        height: 54px;
        top: 31%;
    }

    .agency-services article {
        min-height: 0;
    }
}

/* Final polish for navigation spacing and button label casing. */
.site-nav {
    gap: .28rem;
}

.site-nav a {
    gap: .58rem;
    padding: .58rem .82rem;
}

.site-nav a::before {
    inset: 5px 7px;
    border-radius: inherit;
}

.site-nav i {
    flex: 0 0 1.05rem;
    text-align: center;
}

body .btn,
.agency-youtube-btn,
.service-card > a,
.manager-list button,
.admin-topbar a,
.admin-topbar button {
    text-transform: none;
}

.language-switch button,
.calendar-controls button {
    text-transform: none;
}

@media (max-width: 980px) {
    .nav-toggle-button {
        gap: .55rem;
        padding: .58rem 1.05rem;
    }

    .nav-toggle-button i {
        min-width: 1.15rem;
        text-align: center;
    }

    .site-nav {
        padding: .8rem .18rem .25rem;
    }

    .nav-toggle:checked ~ .site-nav {
        gap: .34rem;
    }

    .site-nav a {
        gap: .66rem;
        min-height: 48px;
        padding: .68rem .95rem;
        border-radius: 10px;
    }

    .site-nav i {
        flex-basis: 1.12rem;
    }
}

@media (max-width: 680px) {
    .nav-toggle-button {
        padding-inline: 1rem;
    }
}

.site-header {
    grid-template-columns: minmax(185px, auto) minmax(0, 1fr) auto;
}

.site-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (min-width: 981px) {
    .site-nav {
        gap: clamp(.08rem, .18vw, .22rem);
    }

    .site-nav a {
        gap: .42rem;
        padding: .54rem clamp(.44rem, .58vw, .72rem);
        font-size: clamp(.66rem, .68vw, .74rem);
    }
}

@media (max-width: 980px) {
    .site-nav-group {
        display: grid;
        width: 100%;
    }

    .site-nav-parent {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .28rem;
        align-items: center;
    }

    .site-nav a.has-submenu {
        justify-content: flex-start;
        padding-right: .75rem;
    }

    .site-nav a.has-submenu > span {
        min-width: 0;
    }

    .nav-submenu-toggle {
        width: 38px;
        height: 38px;
        margin-left: 0;
        color: #f3df9b;
        background: rgba(232, 176, 61, .08);
        transform: none;
    }

    .site-nav-group:hover .nav-submenu-toggle,
    .site-nav-group:focus-within .nav-submenu-toggle {
        transform: none;
    }

    .submenu-toggle-input:checked + .site-nav-parent .nav-submenu-toggle {
        color: #fff7d8;
        background: rgba(232, 176, 61, .18);
        border-color: rgba(232, 176, 61, .46);
        transform: rotate(180deg);
    }

    .site-subnav {
        position: static;
        display: none;
        min-width: 0;
        margin: .18rem 0 .36rem .72rem;
        padding: .25rem;
        visibility: visible;
        background: rgba(255, 255, 255, .045);
        opacity: 1;
        transform: none;
    }

    .submenu-toggle-input:checked ~ .site-subnav {
        display: grid;
    }

    .site-subnav a {
        min-height: 38px;
        padding: .5rem .68rem;
        white-space: normal;
    }
}

/* Not found page */
.not-found-page {
    display: grid;
    min-height: calc(100vh - 92px);
    padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 6vw, 7rem);
    place-items: center;
    background:
        linear-gradient(180deg, rgba(12, 35, 64, .2), rgba(12, 35, 64, .78)),
        radial-gradient(circle at 50% 22%, rgba(232, 176, 61, .14), transparent 26rem);
}

.not-found-content {
    width: min(780px, 100%);
    color: white;
    text-align: center;
}

.not-found-content .eyebrow {
    justify-content: center;
    color: var(--gold);
}

.not-found-content h1 {
    margin: .2rem auto .9rem;
    color: white;
    font-size: clamp(2.8rem, 6vw, 5.8rem);
    line-height: .98;
    text-wrap: balance;
}

.not-found-content > p:not(.eyebrow) {
    max-width: 620px;
    margin-inline: auto;
    color: rgba(255, 255, 255, .84);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
    margin-top: 1.8rem;
}

.coming-soon-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: clamp(8rem, 12vw, 11rem) clamp(1rem, 8vw, 14rem) clamp(4rem, 8vw, 7rem);
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(5, 18, 34, .22), rgba(5, 18, 34, .82)),
        var(--coming-image) center / cover no-repeat;
}

.cafe-coming {
    --coming-image: url("images/coming-soon/oceano-cafe-bg.webp");
}

.magazine-coming {
    --coming-image: url("images/coming-soon/oceano-magazine-bg.webp");
}

.coming-soon-page::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        radial-gradient(circle at 18% 18%, rgba(232, 176, 61, .2), transparent 24rem),
        linear-gradient(90deg, rgba(5, 18, 34, .84), rgba(5, 18, 34, .38), rgba(5, 18, 34, .76));
}

.coming-soon-content {
    width: min(100%, 760px);
    text-align: center;
}

.coming-soon-mark,
.admin-coming-mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    color: #f6d27a;
    border: 1px solid rgba(246, 210, 122, .42);
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .18), transparent 34%),
        linear-gradient(145deg, rgba(6, 24, 38, .72), rgba(8, 38, 54, .44));
    box-shadow:
        0 1.5rem 3rem rgba(0, 0, 0, .32),
        inset 0 0 0 1px rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

.coming-soon-mark {
    width: clamp(5.5rem, 11vw, 7.4rem);
    aspect-ratio: 1;
    margin: 0 auto 1.25rem;
    font-size: clamp(2.15rem, 4.5vw, 3rem);
}

.admin-coming-mark {
    width: clamp(4.8rem, 9vw, 6.4rem);
    aspect-ratio: 1;
    margin-bottom: .35rem;
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
}

.coming-soon-mark span,
.admin-coming-mark span {
    position: absolute;
    right: -.3rem;
    bottom: .15rem;
    display: grid;
    width: 2.25rem;
    aspect-ratio: 1;
    place-items: center;
    color: #051624;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: linear-gradient(180deg, #f9e5a4, #dca94a);
    box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .28);
    font-size: .95rem;
}

.admin-coming-mark span {
    width: 1.95rem;
    font-size: .82rem;
}

.magazine-mark {
    color: #e9eef0;
}

.magazine-mark span {
    background: linear-gradient(180deg, #dde7e7, #93b8bd);
}

.coming-soon-content h1 {
    margin: .5rem 0 1rem;
    color: #f7f2eb;
    font-family: var(--display-font);
    font-size: clamp(3.2rem, 7vw, 6rem);
    font-weight: 850;
    line-height: 1;
}

.coming-soon-content p:not(.eyebrow) {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(247, 242, 235, .88);
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    font-weight: 600;
}

.admin-coming-panel {
    display: grid;
    min-height: 440px;
    gap: 1.5rem;
    align-content: center;
    justify-items: start;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    color: var(--admin-text);
    background:
        linear-gradient(90deg, rgba(6, 21, 33, .94), rgba(6, 21, 33, .72)),
        url("images/refresh/home-blog-vivid.webp") center / cover no-repeat;
    border: 1px solid var(--admin-line);
    border-radius: 14px;
    box-shadow: var(--admin-shadow);
}

.admin-coming-cafe {
    background:
        linear-gradient(90deg, rgba(6, 21, 33, .94), rgba(6, 21, 33, .72)),
        url("images/coming-soon/oceano-cafe-bg.webp") center / cover no-repeat;
}

.admin-coming-magazine {
    background:
        linear-gradient(90deg, rgba(6, 21, 33, .94), rgba(6, 21, 33, .72)),
        url("images/coming-soon/oceano-magazine-bg.webp") center / cover no-repeat;
}

.admin-coming-panel h1 {
    margin: .45rem 0 .7rem;
    color: var(--admin-text);
    font-family: var(--admin-display-font);
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 850;
    line-height: 1;
}

.admin-coming-panel p:not(.eyebrow) {
    max-width: 620px;
    margin: 0;
    color: var(--admin-muted);
    font-size: 1.05rem;
}

/* Elegant navigation refresh */
@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 75% 100%;
    font-display: swap;
}

:root {
    --display-font: "Segoe UI", Arial, sans-serif;
    --nav-font: "Segoe UI", Arial, sans-serif;
    --nav-selected-bg: linear-gradient(180deg, #ffe3a4, #dca94a);
    --nav-selected-bg-strong: linear-gradient(180deg, #f1d48d, #c8912e);
    --nav-selected-ink: #0c2340;
    --nav-selected-border: rgba(166, 112, 22, .48);
    --nav-selected-shadow: 0 14px 30px rgba(12, 35, 64, .26), 0 0 0 1px rgba(255, 236, 181, .2), 0 0 26px rgba(216, 183, 116, .28);
}

h1,
h2,
.hero h1,
.page-hero h1,
.dashboard-heading h1,
.agency-hero-copy h1,
.agency-heading h2,
.cabin-about h2,
.cabin-about h3 {
    font-family: var(--display-font);
    font-weight: 700;
}

.site-header {
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
    gap: clamp(.55rem, 1.4vw, 1rem);
    padding: .64rem clamp(.85rem, 2.3vw, 2.2rem);
    background:
        linear-gradient(90deg, rgba(5, 18, 34, .94), rgba(12, 35, 64, .88) 48%, rgba(5, 18, 34, .94)),
        radial-gradient(circle at 72% 0%, rgba(232, 176, 61, .16), transparent 22rem);
}

.brand strong {
    font-family: var(--display-font);
    font-size: 1.34rem;
    font-weight: 600;
    letter-spacing: 0;
}

.brand small {
    font-family: var(--nav-font);
    letter-spacing: 0;
}

.site-nav {
    gap: .32rem;
    align-items: center;
    font-family: var(--nav-font);
}

.site-nav a {
    min-height: 42px;
    gap: .48rem;
    padding: .55rem .78rem;
    overflow: hidden;
    color: rgba(251, 247, 239, .82);
    border-color: rgba(255, 255, 255, .08);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none;
    white-space: nowrap;
}

.site-nav a::before {
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 12%, rgba(255, 222, 133, .28) 45%, transparent 72%);
}

.site-nav i {
    flex: 0 0 1.05rem;
    color: var(--gold);
    font-size: .98rem;
    text-align: center;
}

.site-nav a.active,
.site-nav a:hover,
.site-nav-group > .submenu-toggle-input:checked + .site-nav-parent .has-submenu,
.site-nav-group:focus-within > .site-nav-parent .has-submenu {
    color: var(--nav-selected-ink);
    background: var(--nav-selected-bg);
    border-color: var(--nav-selected-border);
    box-shadow: var(--nav-selected-shadow);
    text-shadow: none;
}

.site-nav a.active i,
.site-nav a:hover i,
.site-nav-group > .submenu-toggle-input:checked + .site-nav-parent .has-submenu i,
.site-nav-group:focus-within > .site-nav-parent .has-submenu i {
    color: var(--nav-selected-ink);
    filter: none;
}

.site-nav a.active span,
.site-nav a:hover span,
.site-nav-group > .submenu-toggle-input:checked + .site-nav-parent .has-submenu span,
.site-nav-group:focus-within > .site-nav-parent .has-submenu span {
    font-weight: 850;
}

.site-nav-parent {
    gap: .22rem;
}

.site-nav a.has-submenu {
    padding-right: .68rem;
}

.nav-submenu-toggle {
    width: 30px;
    height: 30px;
    margin-left: 0;
    color: #ffe8a8;
    background: rgba(232, 176, 61, .1);
    border-color: rgba(232, 176, 61, .22);
    box-shadow: 0 0 18px rgba(232, 176, 61, .08);
}

.site-nav-group:focus-within .nav-submenu-toggle,
.site-nav-group > .submenu-toggle-input:checked + .site-nav-parent .nav-submenu-toggle,
.nav-submenu-toggle:hover {
    color: var(--nav-selected-ink);
    background: var(--nav-selected-bg-strong);
    border-color: var(--nav-selected-border);
    box-shadow: 0 10px 22px rgba(216, 183, 116, .24);
}

.site-nav-group:focus-within .nav-submenu-toggle i,
.site-nav-group > .submenu-toggle-input:checked + .site-nav-parent .nav-submenu-toggle i,
.nav-submenu-toggle:hover i {
    color: var(--nav-selected-ink);
    font-weight: 900;
    filter: none;
}

.site-subnav {
    min-width: 245px;
    padding: .42rem;
    background:
        linear-gradient(180deg, rgba(11, 31, 56, .98), rgba(7, 22, 42, .98)),
        radial-gradient(circle at 18% 0%, rgba(232, 176, 61, .14), transparent 12rem);
    border-color: rgba(232, 176, 61, .24);
    border-radius: 14px;
    box-shadow: 0 24px 58px rgba(0, 0, 0, .38), 0 0 28px rgba(232, 176, 61, .1);
}

.site-subnav a {
    min-height: 40px;
    justify-content: flex-start;
    border-radius: 10px;
    background: transparent;
    font-size: .8rem;
    white-space: nowrap;
}

.language-switch button {
    font-family: var(--nav-font);
    letter-spacing: 0;
}

.admin-shell,
.admin-login {
    --admin-font: var(--nav-font);
}

.admin-sidebar {
    padding: 1.2rem .9rem;
    background:
        linear-gradient(180deg, rgba(5, 18, 34, .98), rgba(12, 35, 64, .96) 54%, rgba(6, 21, 40, .99)),
        radial-gradient(circle at 18% 8%, rgba(232, 176, 61, .16), transparent 18rem),
        url("images/deep-constellation-panel.svg") center bottom / cover no-repeat;
}

.admin-brand strong {
    font-family: var(--display-font);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
}

.admin-brand small {
    letter-spacing: 0;
    text-transform: none;
}

.admin-nav {
    gap: .42rem;
}

.admin-nav-section-label {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .7rem .38rem .18rem;
    color: rgba(251, 247, 239, .46);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .04rem;
    line-height: 1;
    text-transform: uppercase;
}

.admin-nav-section-label::after {
    flex: 1;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, rgba(232, 176, 61, .18), transparent);
}

.admin-sidebar a:not(.admin-brand) {
    min-height: 48px;
    gap: .72rem;
    padding: .66rem .74rem;
    color: rgba(251, 247, 239, .78);
    border-color: rgba(255, 255, 255, .07);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.18;
    text-transform: none;
    isolation: isolate;
}

.admin-sidebar a:not(.admin-brand) i {
    width: 31px;
    height: 31px;
    color: var(--admin-gold);
    background: rgba(232, 176, 61, .08);
    border-color: rgba(232, 176, 61, .14);
    border-radius: 10px;
}

.admin-sidebar a.active,
.admin-sidebar a:not(.admin-brand):hover {
    color: var(--nav-selected-ink);
    background: var(--nav-selected-bg);
    border-color: var(--nav-selected-border);
    box-shadow: var(--nav-selected-shadow);
}

.admin-sidebar a.active i,
.admin-sidebar a:not(.admin-brand):hover i {
    color: var(--nav-selected-ink);
    background: rgba(255, 255, 255, .22);
    border-color: rgba(12, 35, 64, .16);
    box-shadow: none;
}

.admin-sidebar a:not(.admin-brand):focus-visible {
    outline: 2px solid rgba(232, 176, 61, .65);
    outline-offset: 2px;
}

.admin-sidebar .admin-subnav a.active,
.admin-sidebar .admin-subnav a:hover,
.admin-sidebar .admin-subnav-nested a.active,
.admin-sidebar .admin-subnav-nested a:hover {
    color: var(--nav-selected-ink);
    background: var(--nav-selected-bg-strong);
    border-color: var(--nav-selected-border);
    box-shadow: 0 10px 22px rgba(216, 183, 116, .2);
}

.admin-subnav {
    gap: .24rem;
    margin: .12rem 0 .18rem 1rem;
    padding: .22rem 0 .22rem .86rem;
    border-left-color: rgba(232, 176, 61, .26);
}

.admin-sidebar .admin-subnav a {
    min-height: 38px;
    padding: .48rem .58rem;
    color: rgba(251, 247, 239, .7);
    background: rgba(255, 255, 255, .025);
    font-size: .78rem;
    font-weight: 650;
}

.admin-nav-chevron {
    color: #ffe8a8;
    background: rgba(232, 176, 61, .1);
    border-color: rgba(232, 176, 61, .22);
}

.admin-nav-group {
    position: relative;
    padding: .18rem;
    border: 1px solid transparent;
    border-radius: 16px;
}

.admin-nav-group.is-current,
.admin-nav-group:focus-within {
    background: rgba(216, 183, 116, .08);
    border-color: rgba(216, 183, 116, .2);
}

.admin-nav-group.is-current .admin-nav-chevron,
.admin-nav-parent:hover .admin-nav-chevron,
.admin-nav-parent:focus-within .admin-nav-chevron {
    color: #0c2340;
    background: linear-gradient(180deg, #ffe3a4, #d9a647);
    border-color: rgba(232, 176, 61, .42);
    transform: rotate(180deg);
}

.admin-topbar::before {
    letter-spacing: 0;
    text-transform: none;
}

.admin-topbar a,
.admin-topbar button {
    letter-spacing: 0;
    text-transform: none;
}

@media (min-width: 981px) {
    .site-nav a {
        padding-inline: clamp(.55rem, .72vw, .86rem);
        font-size: clamp(.75rem, .72vw, .83rem);
    }
}

@media (max-width: 980px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .nav-toggle-button {
        border-radius: 12px;
        font-family: var(--nav-font);
        text-transform: none;
    }

    .site-nav {
        gap: .42rem;
        padding: .8rem 0 .2rem;
    }

    .nav-toggle:checked ~ .site-nav {
        gap: .42rem;
    }

    .site-nav a {
        width: 100%;
        min-height: 48px;
        justify-content: flex-start;
        padding: .72rem .9rem;
        border-radius: 12px;
        font-size: .92rem;
        white-space: normal;
    }

    .site-nav-parent {
        grid-template-columns: minmax(0, 1fr) 42px;
        gap: .36rem;
    }

    .nav-submenu-toggle {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .site-subnav {
        margin: .2rem 0 .4rem 1rem;
        padding: .34rem;
        border-radius: 12px;
    }

    .site-subnav a {
        min-height: 39px;
        font-size: .84rem;
        white-space: normal;
    }

    .admin-sidebar {
        position: relative;
        max-height: none;
        padding: .95rem;
    }

    .admin-sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .admin-nav-group {
        min-width: 0;
    }

    .admin-nav-parent {
        grid-template-columns: minmax(0, 1fr) 34px;
    }

    .admin-subnav {
        margin-left: .55rem;
    }
}

@media (max-width: 640px) {
    .brand {
        min-width: 0;
    }

    .brand small,
    .language-switch {
        display: none;
    }

    .admin-sidebar nav {
        grid-template-columns: 1fr;
    }
}

/* DevExtreme / Syncfusion inspired multilevel menus */
.site-subnav-branch {
    position: relative;
    min-width: 0;
}

.site-subnav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    gap: .85rem;
    width: 100%;
    padding: .55rem .78rem;
    color: rgba(251, 247, 239, .82);
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--nav-font);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.site-subnav-trigger span {
    display: inline-flex;
    min-width: 0;
    gap: .48rem;
    align-items: center;
}

.site-subnav-trigger i {
    color: var(--gold);
    font-size: .92rem;
}

.site-subnav-trigger > i:last-child {
    margin-left: auto;
    font-size: .7rem;
    transition: transform .16s ease;
}

.site-subnav-branch:hover > .site-subnav-trigger,
.site-subnav-branch > .submenu-toggle-input:checked + .site-subnav-trigger,
.site-subnav-branch:focus-within > .site-subnav-trigger {
    color: var(--nav-selected-ink);
    background: var(--nav-selected-bg-strong);
    border-color: var(--nav-selected-border);
    box-shadow: 0 10px 22px rgba(216, 183, 116, .2);
}

.site-subnav-branch:hover > .site-subnav-trigger i,
.site-subnav-branch > .submenu-toggle-input:checked + .site-subnav-trigger i,
.site-subnav-branch:focus-within > .site-subnav-trigger i {
    color: var(--nav-selected-ink);
    font-weight: 900;
}

.site-subnav-branch:hover > .site-subnav-trigger span,
.site-subnav-branch > .submenu-toggle-input:checked + .site-subnav-trigger span,
.site-subnav-branch:focus-within > .site-subnav-trigger span {
    font-weight: 850;
}

.site-subnav-branch:hover > .site-subnav-trigger > i:last-child,
.site-subnav-branch:focus-within > .site-subnav-trigger > i:last-child {
    transform: translateX(2px);
}

.site-flyout {
    position: absolute;
    top: -.42rem;
    left: calc(100% + .55rem);
    z-index: 40;
    display: grid;
    min-width: 260px;
    padding: .42rem;
    visibility: hidden;
    background:
        linear-gradient(180deg, rgba(11, 31, 56, .98), rgba(7, 22, 42, .98)),
        radial-gradient(circle at 12% 0%, rgba(232, 176, 61, .12), transparent 11rem);
    border: 1px solid rgba(232, 176, 61, .24);
    border-radius: 14px;
    box-shadow: 0 24px 58px rgba(0, 0, 0, .38), 0 0 28px rgba(232, 176, 61, .1);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.site-flyout a {
    white-space: nowrap;
}

.site-subnav-branch:hover > .site-flyout,
.site-subnav-branch:focus-within > .site-flyout {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.site-nav-group > .submenu-toggle-input:checked ~ .site-subnav,
.site-subnav-branch > .submenu-toggle-input:checked ~ .site-flyout {
    visibility: visible;
    opacity: 1;
}

.site-nav-group > .submenu-toggle-input:checked ~ .site-subnav {
    transform: translateY(0);
}

.site-subnav-branch > .submenu-toggle-input:checked ~ .site-flyout {
    transform: translateX(0);
}

.admin-subnav-branch {
    display: grid;
    gap: .22rem;
}

.admin-subnav-label {
    display: flex;
    align-items: center;
    gap: .62rem;
    min-height: 38px;
    padding: .48rem .58rem;
    color: rgba(251, 247, 239, .82);
    background: rgba(232, 176, 61, .055);
    border: 1px solid rgba(232, 176, 61, .14);
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.15;
}

.admin-subnav-label:hover {
    color: var(--nav-selected-ink);
    background: var(--nav-selected-bg-strong);
    border-color: var(--nav-selected-border);
    box-shadow: 0 10px 22px rgba(216, 183, 116, .18);
}

.admin-subnav-label:hover i {
    color: var(--nav-selected-ink);
    background: rgba(255, 255, 255, .22);
    border-color: rgba(12, 35, 64, .16);
}

.admin-subnav-label i {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    color: var(--admin-gold);
    background: rgba(232, 176, 61, .08);
    border: 1px solid rgba(232, 176, 61, .12);
    border-radius: 8px;
    font-size: .82rem;
}

.admin-subnav-nested {
    display: grid;
    gap: .18rem;
    margin-left: 1rem;
    padding-left: .68rem;
    border-left: 1px solid rgba(232, 176, 61, .22);
}

.admin-sidebar .admin-subnav-nested a {
    min-height: 34px;
    padding-block: .38rem;
    font-size: .75rem;
}

@media (max-width: 980px) {
    .site-flyout {
        position: static;
        display: none;
        min-width: 0;
        margin: .16rem 0 .18rem 1rem;
        padding: .3rem;
        visibility: visible;
        border-radius: 12px;
        opacity: 1;
        transform: none;
        box-shadow: none;
    }

    .submenu-toggle-input:checked ~ .site-flyout {
        display: grid;
    }

    .site-subnav-trigger {
        min-height: 42px;
        font-size: .84rem;
    }

    .site-subnav-trigger > i:last-child {
        transform: rotate(90deg);
    }

    .site-subnav-branch:hover > .site-subnav-trigger > i:last-child,
    .site-subnav-branch:focus-within > .site-subnav-trigger > i:last-child,
    .submenu-toggle-input:checked + .site-subnav-trigger > i:last-child {
        transform: rotate(90deg);
    }

    .submenu-toggle-input:checked + .site-subnav-trigger {
        color: var(--nav-selected-ink);
        background: var(--nav-selected-bg-strong);
        border-color: var(--nav-selected-border);
    }
}

@media (min-width: 981px) {
    .site-nav-group:hover .site-subnav,
    .site-subnav-branch:hover > .site-flyout {
        visibility: hidden;
        opacity: 0;
    }

    .site-nav-group > .submenu-toggle-input:checked ~ .site-subnav,
    .site-nav-group:focus-within > .site-subnav,
    .site-subnav-branch > .submenu-toggle-input:checked ~ .site-flyout,
    .site-subnav-branch:focus-within > .site-flyout {
        visibility: visible;
        opacity: 1;
    }

    .site-nav-group > .submenu-toggle-input:checked ~ .site-subnav,
    .site-nav-group:focus-within > .site-subnav {
        transform: translateY(0);
    }

    .site-subnav-branch > .submenu-toggle-input:checked ~ .site-flyout,
    .site-subnav-branch:focus-within > .site-flyout {
        transform: translateX(0);
    }
}

/* Administration IA refresh */
.admin-shell,
.admin-login {
    --admin-font: "Open Sans", "Segoe UI", Arial, sans-serif;
    --admin-display-font: "Open Sans", "Segoe UI", Arial, sans-serif;
    --admin-bg: #091826;
    --admin-rail: #071421;
    --admin-rail-2: #0b1e2d;
    --admin-surface: rgba(255, 255, 255, .055);
    --admin-surface-strong: rgba(255, 255, 255, .095);
    --admin-line: rgba(157, 177, 188, .18);
    --admin-text: #f7fbfc;
    --admin-muted: rgba(223, 233, 237, .68);
    --admin-accent: #8bd3dd;
    --admin-warm: #f2c86b;
    color: var(--admin-text);
    font-family: var(--admin-font);
}

.admin-shell {
    grid-template-columns: 286px minmax(0, 1fr);
    background:
        linear-gradient(135deg, rgba(9, 24, 38, .98), rgba(14, 39, 55, .97)),
        radial-gradient(circle at 86% 0%, rgba(139, 211, 221, .13), transparent 30rem);
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    padding: 1rem .82rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    background:
        linear-gradient(180deg, var(--admin-rail), var(--admin-rail-2)),
        linear-gradient(90deg, rgba(139, 211, 221, .08), transparent);
    border-right: 1px solid var(--admin-line);
}

.admin-sidebar::after {
    display: none;
}

.admin-sidebar::-webkit-scrollbar {
    width: 9px;
}

.admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(139, 211, 221, .28);
    border: 2px solid var(--admin-rail);
    border-radius: 999px;
}

.admin-brand {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: .78rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: .78rem .72rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--admin-line);
}

.admin-brand span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #062331;
    background: transparent;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}

.admin-brand img {
    display: block;
    width: 46px;
    height: 46px;
}

.admin-brand strong {
    display: block;
    color: var(--admin-text);
    font-family: var(--admin-display-font);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
}

.admin-brand small {
    display: block;
    margin-top: .18rem;
    color: var(--admin-muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.admin-nav {
    display: grid;
    gap: .22rem;
    padding-bottom: 1.2rem;
}

.admin-nav-section-label {
    margin: 1rem .7rem .32rem;
    color: rgba(247, 251, 252, .44);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .075rem;
    text-transform: uppercase;
}

.admin-nav-section-label::after {
    display: none;
}

.admin-sidebar .admin-nav-link,
.admin-sidebar a:not(.admin-brand) {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .68rem;
    align-items: center;
    min-height: 46px;
    padding: .56rem .62rem;
    color: var(--admin-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.16;
    text-decoration: none;
}

.admin-sidebar .admin-nav-link span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-sidebar .admin-nav-link i,
.admin-sidebar a:not(.admin-brand) i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--admin-accent);
    background: rgba(139, 211, 221, .09);
    border: 1px solid rgba(139, 211, 221, .13);
    border-radius: 9px;
    font-size: 1rem;
}

.admin-sidebar .admin-nav-link.active,
.admin-sidebar .admin-nav-link:hover,
.admin-sidebar a:not(.admin-brand):hover {
    color: #061521;
    background: linear-gradient(135deg, #d9f8fb, #f2c86b);
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.admin-sidebar .admin-nav-link.active::before,
.admin-sidebar .admin-nav-link:hover::before,
.admin-sidebar a:not(.admin-brand):hover::before {
    display: none;
}

.admin-sidebar .admin-nav-link.active i,
.admin-sidebar .admin-nav-link:hover i,
.admin-sidebar a:not(.admin-brand):hover i {
    color: #061521;
    background: rgba(255, 255, 255, .34);
    border-color: rgba(6, 21, 33, .12);
    box-shadow: none;
}

.admin-topbar {
    background: rgba(9, 24, 38, .88);
    border-bottom-color: var(--admin-line);
}

.admin-topbar::before {
    color: var(--admin-muted);
    content: "Panel de Control";
    font-family: var(--admin-font);
    letter-spacing: 0;
    text-transform: none;
}

.admin-main {
    background:
        linear-gradient(180deg, rgba(9, 24, 38, .8), rgba(9, 24, 38, .98)),
        var(--admin-bg);
}

.admin-page-intro h1,
.dashboard-intro h1 {
    font-family: var(--admin-display-font);
    font-weight: 700;
}

.content-tabs {
    gap: .48rem;
}

.content-tabs a {
    display: inline-flex;
    gap: .48rem;
    align-items: center;
    border-radius: 10px;
    font-family: var(--admin-font);
    letter-spacing: 0;
    text-transform: none;
}

.content-tabs a.active {
    color: #061521;
    background: linear-gradient(135deg, #d9f8fb, #f2c86b);
    border-color: rgba(255, 255, 255, .32);
}

.manager-panel[hidden] {
    display: none;
}

@media (max-width: 980px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: relative;
        height: auto;
        max-height: none;
        padding: .85rem;
    }

    .admin-sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .28rem .42rem;
    }
}

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

.admin-nav-submenu-group {
    gap: .3rem;
    margin: .08rem 0 .18rem;
    padding: .18rem .18rem .22rem;
    background: rgba(139, 211, 221, .045);
    border: 1px solid rgba(139, 211, 221, .12);
    border-radius: 12px;
}

.admin-nav-parent-label {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .68rem;
    align-items: center;
    min-height: 44px;
    padding: .5rem .5rem;
    color: rgba(247, 251, 252, .82);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.15;
}

.admin-nav-parent-label i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--admin-warm);
    background: rgba(242, 200, 107, .1);
    border: 1px solid rgba(242, 200, 107, .16);
    border-radius: 9px;
}

.admin-nav-submenu {
    gap: .24rem;
    margin: 0 0 .06rem 1rem;
    padding: 0 0 0 .74rem;
    border-left: 1px solid rgba(139, 211, 221, .22);
}

.admin-sidebar .admin-nav-submenu a {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 38px;
    padding: .42rem .48rem;
    color: rgba(223, 233, 237, .74);
    background: transparent;
    border-radius: 9px;
    font-size: .82rem;
}

.admin-sidebar .admin-nav-submenu a i {
    width: 28px;
    height: 28px;
    font-size: .88rem;
    border-radius: 8px;
}

.admin-sidebar .admin-nav-submenu a.active,
.admin-sidebar .admin-nav-submenu a:hover {
    color: #061521;
    background: linear-gradient(135deg, #d9f8fb, #f2c86b);
    border-color: rgba(255, 255, 255, .28);
}

/* Identidad visual exclusiva del Panel de Control */
.admin-shell {
    --admin-font: "Open Sans", "Segoe UI", Arial, sans-serif;
    --admin-display-font: "Open Sans", "Segoe UI", Arial, sans-serif;
    min-height: 100vh;
    background-image:
        linear-gradient(115deg, rgba(3, 13, 24, .94) 0%, rgba(7, 28, 46, .82) 48%, rgba(8, 35, 55, .9) 100%),
        radial-gradient(circle at 80% 12%, rgba(139, 211, 221, .18), transparent 32rem),
        url("images/ocean-moon-hero.webp");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.admin-shell,
.admin-shell * {
    font-family: var(--admin-font) !important;
}

.admin-shell .bi::before,
.admin-shell [class^="bi-"]::before,
.admin-shell [class*=" bi-"]::before {
    font-family: bootstrap-icons !important;
}

.admin-shell .admin-sidebar {
    background:
        linear-gradient(180deg, rgba(4, 16, 28, .9), rgba(7, 27, 42, .84)),
        radial-gradient(circle at 30% 0%, rgba(139, 211, 221, .12), transparent 22rem);
    box-shadow: 18px 0 60px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px) saturate(115%);
}

.admin-shell .admin-main {
    background:
        linear-gradient(180deg, rgba(5, 20, 33, .48), rgba(5, 20, 33, .72)),
        radial-gradient(circle at 88% 4%, rgba(242, 200, 107, .08), transparent 28rem);
}

.admin-shell .admin-topbar {
    background: rgba(4, 17, 29, .76);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .2);
    backdrop-filter: blur(20px) saturate(125%);
}

.admin-shell .admin-content {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.admin-shell .admin-content h1,
.admin-shell .admin-content h2,
.admin-shell .admin-content h3,
.admin-shell .admin-brand strong {
    font-family: var(--admin-display-font);
    letter-spacing: -.025em;
}

.admin-shell .admin-sidebar a,
.admin-shell .admin-topbar a,
.admin-shell .admin-topbar button,
.admin-shell input,
.admin-shell textarea,
.admin-shell select,
.admin-shell button {
    font-family: var(--admin-font);
}

.admin-shell .manager-form label,
.admin-shell .manager-field,
.admin-shell .settings-form label {
    font-size: .88rem;
    line-height: 1.35;
}

.admin-shell .manager-form input:not([type="checkbox"]),
.admin-shell .manager-form textarea,
.admin-shell .manager-form select,
.admin-shell .settings-form input,
.admin-shell .settings-form textarea,
.admin-shell .settings-form select {
    min-height: 48px;
    padding: .76rem .84rem;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.45;
}

.admin-shell .manager-form textarea,
.admin-shell .settings-form textarea {
    min-height: 96px;
    overflow: hidden;
    resize: none;
    field-sizing: content;
}

.admin-shell .dashboard-request-card small,
.admin-shell .dashboard-request-card em,
.admin-shell .dashboard-menu-map a span,
.admin-shell .dashboard-menu-map a strong,
.admin-shell .dashboard-status-grid span {
    font-size: 1rem;
    line-height: 1.35;
}

.admin-shell .dashboard-request-card small,
.admin-shell .dashboard-request-card em,
.admin-shell .dashboard-menu-map a span {
    font-weight: 650;
}

.admin-shell button,
.admin-shell .btn,
.admin-shell a.btn,
.admin-shell .manager-list button,
.admin-shell .message-actions button,
.admin-shell .message-filters a {
    position: relative;
    cursor: pointer;
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        filter .18s ease,
        transform .18s ease;
}

.admin-shell .btn,
.admin-shell .manager-list button,
.admin-shell .message-actions button,
.admin-shell .message-filters button,
.admin-shell .message-filters a {
    font-size: 1rem;
    line-height: 1.25;
}

.admin-shell button:not(:disabled):hover,
.admin-shell .btn:not(:disabled):hover,
.admin-shell a.btn:hover,
.admin-shell .message-filters a:hover {
    border-color: rgba(139, 211, 221, .62);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28), 0 0 0 1px rgba(139, 211, 221, .12);
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.admin-shell button:not(:disabled):hover i,
.admin-shell .btn:not(:disabled):hover i,
.admin-shell a.btn:hover i,
.admin-shell .message-filters a:hover i {
    transform: scale(1.1);
}

.admin-shell button i,
.admin-shell .btn i,
.admin-shell a.btn i,
.admin-shell .message-filters a i {
    transition: color .18s ease, transform .18s ease;
}

.admin-shell button.danger:not(:disabled):hover,
.admin-shell .danger.btn:not(:disabled):hover {
    color: #ffe4e1;
    background: rgba(202, 62, 54, .2);
    border-color: rgba(255, 130, 119, .72);
    box-shadow: 0 10px 24px rgba(105, 20, 17, .32), 0 0 0 1px rgba(255, 130, 119, .12);
}

.admin-shell .btn-secondary:not(:disabled):hover,
.admin-shell a.btn-secondary:hover,
.admin-shell .manager-form .form-actions .btn-secondary:hover,
.admin-shell .settings-form .form-actions .btn-secondary:hover {
    color: #061521;
}

.admin-shell .btn-secondary:not(:disabled):hover i,
.admin-shell a.btn-secondary:hover i {
    color: #061521;
}

.admin-shell button:not(:disabled):active,
.admin-shell .btn:not(:disabled):active,
.admin-shell a.btn:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    transform: translateY(0) scale(.98);
}

.admin-shell button:focus-visible,
.admin-shell .btn:focus-visible,
.admin-shell a.btn:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .admin-shell button,
    .admin-shell .btn,
    .admin-shell a.btn,
    .admin-shell button i,
    .admin-shell .btn i {
        transition: none;
    }
}