:root {
    --ohg-navy: #071f3a;
    --ohg-navy-deep: #041426;
    --ohg-navy-mid: #0d365e;
    --ohg-navy-soft: #eaf0f5;
    --ohg-orange: #f5a915;
    --ohg-orange-deep: #e78b08;
    --ohg-orange-soft: #fff2cf;
    --ohg-canvas: #e9eff4;
    --ohg-paper: #ffffff;
    --ohg-ink: #10243a;
    --ohg-muted: #67788a;
    --ohg-line: #cfd9e3;
    --ohg-line-strong: #b8c7d4;
    --ohg-shell-gutter: clamp(2.5rem, 6vw, 7rem);
    --ohg-section-gap: clamp(1.35rem, 2.1vw, 2.4rem);
    --ohg-inner-gutter: clamp(1.6rem, 4vw, 4.75rem);
    --ohg-radius: clamp(24px, 2.2vw, 36px);
    --ohg-shadow: 0 28px 80px rgba(7, 31, 58, .13);
    --ohg-shadow-soft: 0 14px 42px rgba(7, 31, 58, .08);
    --ohg-ease: cubic-bezier(.22, .82, .24, 1);
}

html { scroll-behavior: smooth; }
body.ohg-site {
    min-width: 320px;
    overflow-x: hidden;
    color: var(--ohg-ink);
    background:
        radial-gradient(circle at 5% 7%, rgba(245,169,21,.14), transparent 24rem),
        radial-gradient(circle at 96% 14%, rgba(13,54,94,.11), transparent 30rem),
        linear-gradient(180deg, #f2f6f9 0%, var(--ohg-canvas) 100%);
}

/*
 * REAL PAGE FRAME
 * The public website is deliberately pulled away from both browser edges.
 * This is the main v5 responsiveness change.
 */
.ohg-site #main-content,
.ohg-site .ohg-navbar-shell,
.ohg-site .subscribe,
.ohg-site .footer,
.ohg-site .copyright {
    width: min(1600px, calc(100% - (var(--ohg-shell-gutter) * 2)));
    margin-left: auto !important;
    margin-right: auto !important;
}

.ohg-site #main-content {
    padding: var(--ohg-section-gap) 0 0;
}

.ohg-site #main-content > .ohg-hero,
.ohg-site #main-content > .ohg-section,
.ohg-site #main-content > .gallery,
.ohg-site #main-content > .blog,
.ohg-site #main-content > .testimonial,
.ohg-site #main-content > .contact,
.ohg-site #main-content > .ohg-workspace-page,
.ohg-site #main-content > .ohg-booking-wrap,
.ohg-site #main-content > .bg-breadcrumb,
.ohg-site #main-content > .container-fluid:not(.subscribe):not(.footer):not(.copyright) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0 0 var(--ohg-section-gap) !important;
    border: 1px solid var(--ohg-line) !important;
    border-radius: var(--ohg-radius) !important;
    background: var(--ohg-paper);
    box-shadow: var(--ohg-shadow-soft);
}

.ohg-site #main-content > [data-page-section]:not(.ohg-hero)::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: clamp(1.5rem, 4vw, 4.5rem);
    width: clamp(58px, 7vw, 105px);
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--ohg-orange), #ffc650);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .85s var(--ohg-ease);
}
.ohg-site #main-content > [data-page-section].is-section-inview:not(.ohg-hero)::before { transform: scaleX(1); }

.ohg-site #main-content > .ohg-section-soft,
.ohg-site #main-content > .gallery,
.ohg-site #main-content > .testimonial,
.ohg-site #main-content > .contact {
    background: linear-gradient(180deg, #fbfcfd 0%, #f4f7fa 100%);
}

/* Inner spacing is intentionally generous so cards/text never hug section edges. */
.ohg-site #main-content .container-xxl,
.ohg-site #main-content .container {
    max-width: 100%;
    padding-left: var(--ohg-inner-gutter) !important;
    padding-right: var(--ohg-inner-gutter) !important;
}

.ohg-site .ohg-section {
    padding-top: clamp(4rem, 7vw, 7rem);
    padding-bottom: clamp(4rem, 7vw, 7rem);
}

/* Topbar stays full bleed navy, but its contents align to the framed site. */
.ohg-topbar { background: var(--ohg-navy-deep) !important; }
.ohg-topbar .container-xxl {
    width: min(1600px, calc(100% - (var(--ohg-shell-gutter) * 2)));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0 !important;
}

/* Navbar visibly floats inside the page rather than touching the viewport. */
.ohg-navbar-shell {
    position: sticky;
    top: .7rem;
    z-index: 1035;
    margin-top: .7rem !important;
    border: 1px solid rgba(7,31,58,.12) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 12px 35px rgba(7,31,58,.09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform .3s var(--ohg-ease), box-shadow .3s ease, background .3s ease;
    animation: ohgNavDrop .72s var(--ohg-ease) both;
}
.ohg-navbar-shell.is-scrolled {
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 22px 55px rgba(7,31,58,.16);
    transform: translateY(-.2rem);
}
.ohg-navbar-shell .container-xxl { padding-inline: clamp(1rem, 2.2vw, 2.2rem) !important; }
.ohg-navbar-shell::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -1px;
    height: 3px;
    transform: scaleX(var(--ohg-scroll-scale, 0));
    transform-origin: left center;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ohg-orange), #ffd66e);
    transition: transform .08s linear;
}

.ohg-site .ohg-nav-cta,
.ohg-site .ohg-btn-primary,
.ohg-site .btn-primary,
.ohg-site .back-to-top {
    border-color: var(--ohg-orange) !important;
    background: var(--ohg-orange) !important;
    color: #2b2109 !important;
    box-shadow: 0 10px 24px rgba(245,169,21,.20);
}
.ohg-site .ohg-nav-cta:hover,
.ohg-site .ohg-btn-primary:hover,
.ohg-site .btn-primary:hover,
.ohg-site .back-to-top:hover {
    border-color: var(--ohg-orange-deep) !important;
    background: var(--ohg-orange-deep) !important;
    color: #201704 !important;
    box-shadow: 0 14px 30px rgba(231,139,8,.28);
}
.ohg-site .text-primary,
.ohg-site .section-title,
.ohg-site .ohg-section-label,
.ohg-site .ohg-text-link { color: var(--ohg-navy-mid) !important; }

/* Hero: obvious load-in motion that is pure HTML/CSS and does not depend on React. */
.ohg-hero {
    min-height: min(780px, calc(100svh - 145px));
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 34px 90px rgba(7,31,58,.24) !important;
}
.ohg-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.055);
    animation: ohgHeroZoom 1.8s var(--ohg-ease) forwards, ohgHeroDrift 16s 1.8s ease-in-out infinite alternate;
}
.ohg-hero-overlay {
    background: linear-gradient(90deg, rgba(4,20,38,.96) 0%, rgba(7,31,58,.89) 43%, rgba(7,31,58,.48) 73%, rgba(4,20,38,.60) 100%) !important;
}
.ohg-hero::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: auto -8% -42% auto;
    width: 560px;
    aspect-ratio: 1;
    border: 1px solid rgba(245,169,21,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(245,169,21,.035), 0 0 0 86px rgba(255,255,255,.025);
    animation: ohgRingFloat 9s ease-in-out infinite;
    pointer-events: none;
}
.ohg-hero-enter {
    opacity: 0;
    transform: translateY(32px);
    animation: ohgHeroEnter .9s var(--ohg-ease) forwards;
    animation-delay: var(--hero-delay, 0ms);
}
.ohg-floating-card-main { animation: ohgFloatSmall 5.6s 1.1s ease-in-out infinite; }
.ohg-floating-image-card { animation: ohgFloatLarge 6.8s 1.4s ease-in-out infinite; }
.ohg-scroll-cue { animation: ohgCue 2.1s ease-in-out infinite; }

/* Visible card edges and motion. */
.ohg-service-card,
.ohg-package-card,
.ohg-site .blog-item,
.ohg-site .testimonial-comment,
.ohg-site .contact .bg-white,
.ohg-detail-public-card,
.ohg-empty-state {
    border: 1px solid var(--ohg-line) !important;
    box-shadow: 0 12px 32px rgba(7,31,58,.075);
}
.ohg-service-card,
.ohg-package-card,
.ohg-site .blog-item,
.ohg-site .testimonial-comment {
    transition: transform .38s var(--ohg-ease), box-shadow .38s ease, border-color .38s ease;
}
.ohg-service-card:hover,
.ohg-package-card:hover,
.ohg-site .blog-item:hover,
.ohg-site .testimonial-comment:hover {
    transform: translateY(-10px);
    border-color: rgba(245,169,21,.72) !important;
    box-shadow: 0 26px 58px rgba(7,31,58,.15);
}
.ohg-service-card::before,
.ohg-package-card::before {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 0 auto 0 0;
    width: 3px;
    transform: scaleY(0);
    transform-origin: bottom;
    border-radius: 999px;
    background: var(--ohg-orange);
    transition: transform .38s var(--ohg-ease);
}
.ohg-service-card:hover::before,
.ohg-package-card:hover::before { transform: scaleY(1); }
.ohg-service-card,
.ohg-package-card { position: relative; }

.ohg-package-image img,
.ohg-story-image-main img,
.ohg-story-image-small img,
.ohg-site .gallery img,
.ohg-site .blog-img img {
    transition: transform .8s var(--ohg-ease), filter .5s ease;
}
.ohg-package-card:hover .ohg-package-image img,
.ohg-story-visual:hover .ohg-story-image-main img,
.ohg-site .gallery-item:hover img,
.ohg-site .blog-item:hover .blog-img img {
    transform: scale(1.06);
}

/* Scroll-triggered animation engine. Content only hides after JS confirms it is active. */
.ohg-motion-ready [data-animate] {
    opacity: 0;
    will-change: transform, opacity;
    transition:
        opacity .78s ease var(--reveal-delay, 0ms),
        transform .85s var(--ohg-ease) var(--reveal-delay, 0ms),
        filter .78s ease var(--reveal-delay, 0ms);
}
.ohg-motion-ready [data-animate="fade-up"] { transform: translate3d(0, 42px, 0); }
.ohg-motion-ready [data-animate="slide-right"] { transform: translate3d(-52px, 0, 0); }
.ohg-motion-ready [data-animate="slide-left"] { transform: translate3d(52px, 0, 0); }
.ohg-motion-ready [data-animate="zoom"] { transform: scale(.94); filter: blur(2px); }
.ohg-motion-ready [data-animate].is-inview {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    filter: none;
}

/* Dynamic/legacy HTML also receives animations via vanilla JS. */
.ohg-motion-ready .gallery-item.ohg-auto-animate,
.ohg-motion-ready .testimonial-item.ohg-auto-animate {
    opacity: 0;
    transform: translateY(34px) scale(.985);
    transition: opacity .72s ease var(--reveal-delay, 0ms), transform .8s var(--ohg-ease) var(--reveal-delay, 0ms);
}
.ohg-motion-ready .gallery-item.ohg-auto-animate.is-inview,
.ohg-motion-ready .testimonial-item.ohg-auto-animate.is-inview {
    opacity: 1;
    transform: none;
}

/* Form fields keep visible boundaries instead of disappearing into white cards. */
.ohg-site .contact .form-control,
.ohg-site .ohg-booking-card .form-control,
.ohg-site .ohg-booking-card .form-select,
.ohg-site .subscribe .form-control {
    border: 1px solid var(--ohg-line) !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(7,31,58,.02);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.ohg-site .contact .form-control:focus,
.ohg-site .ohg-booking-card .form-control:focus,
.ohg-site .ohg-booking-card .form-select:focus,
.ohg-site .subscribe .form-control:focus {
    border-color: var(--ohg-orange) !important;
    box-shadow: 0 0 0 4px rgba(245,169,21,.13) !important;
}
.ohg-site .contact iframe {
    border: 1px solid var(--ohg-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--ohg-shadow-soft);
}

/* CTA shimmer is intentionally obvious enough to be noticed. */
.ohg-site .ohg-nav-cta,
.ohg-site .ohg-btn-primary,
.ohg-site .btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .25s var(--ohg-ease), box-shadow .25s ease, background .25s ease;
}
.ohg-site .ohg-nav-cta::before,
.ohg-site .ohg-btn-primary::before,
.ohg-site .btn-primary::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -70% auto -70% -35%;
    width: 34%;
    transform: translateX(-170%) rotate(16deg);
    background: rgba(255,255,255,.52);
}
.ohg-site .ohg-nav-cta:hover::before,
.ohg-site .ohg-btn-primary:hover::before,
.ohg-site .btn-primary:hover::before { animation: ohgShimmer .75s ease; }
.ohg-site .ohg-nav-cta:hover,
.ohg-site .ohg-btn:hover,
.ohg-site .btn:hover { transform: translateY(-2px); }
.ohg-site .ohg-nav-cta:active,
.ohg-site .ohg-btn:active,
.ohg-site .btn:active { transform: translateY(1px) scale(.985); }

/* Newsletter/footer align to the same strong outer frame. */
.ohg-site .subscribe {
    margin-top: var(--ohg-section-gap) !important;
    margin-bottom: var(--ohg-section-gap) !important;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--ohg-radius);
    background: linear-gradient(125deg, var(--ohg-navy-deep), var(--ohg-navy-mid)) !important;
    box-shadow: var(--ohg-shadow);
    overflow: hidden;
}
.ohg-site .footer {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--ohg-radius) var(--ohg-radius) 0 0;
    background: var(--ohg-navy-deep) !important;
    overflow: hidden;
}
.ohg-site .copyright { background: var(--ohg-navy-deep) !important; }

@keyframes ohgNavDrop {
    from { opacity: 0; transform: translateY(-18px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ohgHeroEnter {
    0% { opacity: 0; transform: translateY(32px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes ohgHeroZoom {
    from { opacity: .6; transform: scale(1.13); filter: saturate(.8); }
    to { opacity: 1; transform: scale(1.055); filter: saturate(1); }
}
@keyframes ohgHeroDrift {
    from { transform: scale(1.055) translate3d(0,0,0); }
    to { transform: scale(1.095) translate3d(-.7%, -.5%, 0); }
}
@keyframes ohgFloatSmall {
    0%,100% { transform: translate3d(0,0,0) rotate(0); }
    50% { transform: translate3d(0,-12px,0) rotate(-.6deg); }
}
@keyframes ohgFloatLarge {
    0%,100% { transform: translate3d(0,0,0) rotate(0); }
    50% { transform: translate3d(0,-16px,0) rotate(.7deg); }
}
@keyframes ohgRingFloat {
    0%,100% { transform: translate3d(0,0,0) rotate(0deg); opacity: .75; }
    50% { transform: translate3d(-18px,-20px,0) rotate(8deg); opacity: 1; }
}
@keyframes ohgCue {
    0%,100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(245,169,21,.25); }
    50% { transform: translateY(7px); box-shadow: 0 0 0 12px rgba(245,169,21,0); }
}
@keyframes ohgShimmer {
    from { transform: translateX(-170%) rotate(16deg); }
    to { transform: translateX(430%) rotate(16deg); }
}

/* Laptop / tablet: retain obvious borders and breathing room. */
@media (max-width: 1199.98px) {
    :root {
        --ohg-shell-gutter: clamp(2rem, 4.5vw, 3.5rem);
        --ohg-inner-gutter: clamp(1.6rem, 3.8vw, 3.25rem);
    }
    .ohg-hero { min-height: 690px; }
}

@media (max-width: 991.98px) {
    :root {
        --ohg-shell-gutter: clamp(1.5rem, 4vw, 2.5rem);
        --ohg-section-gap: 1.15rem;
        --ohg-inner-gutter: clamp(1.35rem, 4.5vw, 2.5rem);
    }
    .ohg-navbar-shell { top: .45rem; margin-top: .45rem !important; }
    .ohg-navbar .navbar-collapse {
        margin-top: .8rem;
        padding: 1rem;
        border: 1px solid var(--ohg-line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 18px 46px rgba(7,31,58,.15);
    }
    .ohg-hero { min-height: 650px; }
    .ohg-hero::after { width: 400px; right: -24%; bottom: -30%; }
}

/* Phones still have a visible page frame: 14–18px each side, never 0. */
@media (max-width: 767.98px) {
    :root {
        --ohg-shell-gutter: clamp(.9rem, 4.5vw, 1.35rem);
        --ohg-section-gap: .9rem;
        --ohg-inner-gutter: clamp(1.15rem, 5.5vw, 1.75rem);
        --ohg-radius: 22px;
    }
    .ohg-topbar { display: none !important; }
    .ohg-navbar-shell {
        top: .35rem;
        margin-top: .35rem !important;
        border-radius: 18px !important;
    }
    .ohg-site #main-content { padding-top: .8rem; }
    .ohg-site .ohg-section { padding-top: 3.6rem; padding-bottom: 3.6rem; }
    .ohg-hero { min-height: 610px; }
    .ohg-hero .row { min-height: 590px !important; }
    .ohg-hero h1 { font-size: clamp(2.55rem, 12.2vw, 4rem); line-height: 1.02; }
    .ohg-hero-copy { line-height: 1.65; }
    .ohg-trust-row { margin-top: 1.7rem; }
    .ohg-service-card:hover,
    .ohg-package-card:hover,
    .ohg-site .blog-item:hover,
    .ohg-site .testimonial-comment:hover { transform: none; }
    .ohg-site #main-content > [data-page-section]:not(.ohg-hero)::before { left: 1.35rem; width: 62px; }
}

@media (max-width: 420px) {
    :root { --ohg-shell-gutter: .82rem; --ohg-inner-gutter: 1rem; }
    .ohg-site .ohg-btn,
    .ohg-site .btn { min-height: 47px; }
    .ohg-trust-row { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
    .ohg-motion-ready [data-animate],
    .ohg-motion-ready .ohg-auto-animate {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}