:root{
 --ivory:#fbf5ec; --cream:#f5eadc; --paper:#fffaf4; --ink:#321b13;
 --brown:#8b4f1d; --gold:#b77a35; --gold-light:#d9b27c; --muted:#76665b;
 --line:rgba(139,79,29,.20);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.65}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.navbar{background:rgba(255,250,244,.96);border-bottom:1px solid var(--line);padding:.85rem 0}
.navbar-brand{font-size:2rem;color:#542b13!important;letter-spacing:-1.2px}
.nav-link{font:500 .9rem Arial,sans-serif;color:#35251e!important;padding:.6rem .8rem!important}
.nav-link:hover,.nav-link.active{color:var(--brown)!important}
.btn-gold{background:var(--brown);color:white;border:1px solid var(--brown);border-radius:30px;padding:.82rem 1.45rem;font:600 .88rem Arial,sans-serif;letter-spacing:.01em}
.btn-gold:hover{background:#633812;color:white}
.btn-outline-gold{border:1px solid var(--brown);color:var(--brown);border-radius:30px;padding:.8rem 1.35rem;font:600 .88rem Arial,sans-serif}
.btn-outline-gold:hover{background:var(--brown);color:white}
.eyebrow{font:700 .68rem Arial,sans-serif;letter-spacing:.25em;text-transform:uppercase;color:var(--brown)}
.display-serif{font-size:clamp(2.5rem,5vw,5.2rem);line-height:.98;letter-spacing:-.045em}
.display-serif em{color:var(--brown);font-weight:400}
.section-title{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.05;letter-spacing:-.035em}
.lead-copy{font-size:1.18rem;line-height:1.65;color:#57473e}
.small-copy{font-size:1.05rem;line-height:1.7;color:#65574e}
.hero{min-height:690px;position:relative;display:flex;align-items:center;overflow:hidden;background:#6e4933}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,242,225,.96) 0%,rgba(255,242,225,.82) 32%,rgba(40,22,13,.05) 68%,rgba(24,15,10,.12) 100%),url("hero-wedding.jpg") center 42%/cover no-repeat}
.hero-content{position:relative;z-index:1;padding:6rem 0 7rem}
.hero-copy{max-width:570px}
.hero .lead-copy{max-width:470px}
.hero-bottom{position:absolute;left:0;right:0;bottom:0;padding:1.2rem 0;background:linear-gradient(0deg,rgba(33,20,13,.72),transparent);color:#fff}
.feature{display:flex;align-items:center;gap:.65rem;font-size:.88rem}
.feature .symbol{color:#e2b46f;font-size:1.4rem}
.watch-story{display:inline-flex;align-items:center;gap:.75rem;color:white;font:600 .88rem Arial,sans-serif}
.play-circle{width:52px;height:52px;border:2px solid white;border-radius:50%;display:grid;place-items:center;font-size:1.1rem}
.section-pad{padding:5.5rem 0}
.section-paper{background:var(--paper)}
.ornament{position:relative}
.ornament:after{content:"";position:absolute;right:2%;top:12%;width:130px;height:170px;border:1px solid rgba(183,122,53,.18);border-radius:70% 0 70% 0;transform:rotate(35deg);pointer-events:none}
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
.story-photo{position:relative;max-width:490px;margin:auto;border:1px solid var(--gold-light);padding:9px}
.story-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.signature{font-style:italic;font-size:2rem;color:var(--brown);transform:rotate(0deg);margin-top:1rem}
.service-card{background:#fffaf4;border:1px solid rgba(139,79,29,.12);height:100%;transition:transform .25s,box-shadow .25s}
.service-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px rgba(67,40,21,.10)}
.service-card img{width:100%;height:235px;object-fit:cover}
.service-card .card-body{padding:1.2rem}
.service-card h3{font-size:1.35rem;line-height:1.12}

/* DESTINATION WEDDING SECTION */

.destination {
    background:
        linear-gradient(
            90deg,
            rgba(255,248,239,1) 0%,
            rgba(255,248,239,.95) 35%,
            rgba(255,248,239,.45) 60%,
            rgba(255,248,239,0) 75%
        ),
        url("../assets/destination-wedding.jpg");

    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;

    min-height: 650px;
    padding: 5.5rem 0;
}

/* TABLET AND MOBILE RESPONSIVE */

@media (max-width: 768px) {

    .destination {
        background:
            linear-gradient(
                90deg,
                rgba(255,248,239,.90),
                rgba(255,248,239,.65)
            ),
            url("../assets/destination-wedding.jpg");

        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 100%;

        min-height: 650px;
        padding: 4rem 0;
    }

}
.process-step{padding:1rem .75rem}
.process-step img{width:118px;height:118px;border-radius:50%;object-fit:cover;border:1px solid var(--gold-light);padding:4px;margin:0 auto 1rem}
.step-number{font-size:1.5rem;color:var(--brown)}
.why-item{display:flex;gap:1rem;align-items:flex-start;padding:1.15rem;border-bottom:1px solid var(--line)}
.why-icon{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--brown);font-size:1.1rem}
.page-hero{padding:5rem 0 4rem;background:linear-gradient(120deg,#f9efe2,#f4e4d2)}
.contact-panel{background:#fffaf4;border:1px solid var(--line);padding:2rem;box-shadow:0 12px 35px rgba(60,35,20,.06)}
.form-control,.form-select{border:1px solid #e5d8c9;border-radius:5px;background:#fffdf9;padding:.8rem}
.form-control:focus,.form-select:focus{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(183,122,53,.12)}
footer{background:#2d1b14;color:#f8eee2;padding:3.5rem 0 1.5rem}
footer .brand{font-size:2rem;color:#f7dfbd}
footer a{color:#f4e2cd}
.footer-line{border-top:1px solid rgba(255,255,255,.18);margin-top:2rem;padding-top:1.2rem;color:#c9b7a7;font: .8rem Arial,sans-serif}
.video-frame{background:#1d1510;aspect-ratio:16/9;width:100%;border:0}
.modal-content{background:#211710;border:1px solid var(--gold-light)}
.modal-header{border-bottom:1px solid rgba(255,255,255,.15);color:white}
.modal-header .btn-close{filter:invert(1)}
@media(max-width:991px){
 .navbar-brand{font-size:1.65rem}.hero{min-height:650px}.hero:before{background:linear-gradient(90deg,rgba(255,242,225,.97),rgba(255,242,225,.80) 55%,rgba(40,22,13,.1)),url("hero-wedding.jpg") center/cover}
 .story-grid{grid-template-columns:1fr;gap:2rem}.story-photo{max-width:390px}
}
@media(max-width:575px){
 body{font-size:17px}.small-copy{font-size:1rem}.lead-copy{font-size:1.1rem}
 .hero{min-height:690px}.hero-content{padding:5rem 1rem 8rem}.display-serif{font-size:3rem}
 .section-pad{padding:3.8rem 0}.service-card img{height:220px}.page-hero{padding:3.5rem 0 2.5rem}
 .hero-bottom .row{row-gap:1rem}.feature{font-size:.78rem}
}

/* Make the story control reliably clickable above the hero artwork */
.hero-bottom {
    z-index: 5;
    pointer-events: auto;
}
.watch-story {
    position: relative;
    z-index: 6;
    pointer-events: auto;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
}
.watch-story:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 5px;
    border-radius: 30px;
}


/* =========================================================
   WINWEDDINGS - MOBILE HERO FEATURE OVERLAP FIX
   Keeps the desktop hero layout unchanged.
   ========================================================= */
@media (max-width: 575.98px) {

  /* Let the hero grow naturally so the features do not sit
     on top of the hero text or buttons. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
  }

  .hero-content {
    width: 100%;
    padding: 4.5rem 1rem 2rem;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero .display-serif {
    font-size: clamp(2.55rem, 10vw, 3rem);
    line-height: 1.02;
    overflow-wrap: normal;
  }

  .hero .lead-copy {
    max-width: 100%;
  }

  /* Features now occupy their own section below the hero copy. */
  .hero-bottom {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    z-index: 5;
    padding: 1.25rem 0 1.4rem;
    background: rgba(45, 27, 20, .82);
  }

  .hero-bottom .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 1.1rem .75rem !important;
    margin: 0;
  }

  .hero-bottom .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding-left: .35rem;
    padding-right: .35rem;
  }

  .hero-bottom .feature {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: .82rem;
    line-height: 1.35;
    white-space: normal;
  }

  .hero-bottom .feature .symbol {
    flex: 0 0 auto;
    font-size: 1.25rem;
  }

  /* Watch Our Story sits on its own row beneath the four features. */
  .hero-bottom .row > .col-12 {
    grid-column: 1 / -1;
    text-align: left !important;
    margin-top: .25rem;
  }

  .hero-bottom .watch-story {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-height: 48px;
  }

  .hero-bottom .play-circle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  /* Tablet portrait: retain two feature columns without overlaying copy. */
  .hero-bottom {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
  }

  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .hero-content {
    padding: 4rem 1rem 2rem;
  }
}


/* SERVICE CARD CTA: gradient button with single-line label */
.service-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-card .card-body .btn-service {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    margin-top: auto;
    padding: .72rem 1.05rem;
    border: 1px solid #8b4f1d;
    border-radius: 999px;
    background: linear-gradient(135deg, #a96b32 0%, #8b4f1d 52%, #633812 100%);
    color: #fffaf4;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(99, 56, 18, .16);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.service-card .card-body .btn-service:hover,
.service-card .card-body .btn-service:focus-visible {
    color: #fff;
    filter: brightness(1.07);
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(99, 56, 18, .24);
}

.service-card .card-body .btn-service:focus-visible {
    outline: 3px solid rgba(183, 122, 53, .35);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .service-card .card-body .btn-service {
        font-size: .8rem;
        padding: .68rem .9rem;
    }
}


    .welcome-video-popup {
            position: fixed;
            inset: 0;
            z-index: 20000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(0, 0, 0, .7);
            opacity: 1;
            visibility: visible;
            transition: opacity .35s ease, visibility .35s ease;
        }
        .welcome-video-popup.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .welcome-video-shell {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: min(90vh, 900px);
            max-width: 92vw;
            padding: 3px;
            border-radius: 5px;
            background: linear-gradient(135deg, #ff176b 0%, #d500ff 38%, #493bff 68%, #00c8ff 100%);
            box-shadow:
                0 0 7px rgba(255, 23, 107, .75),
                0 0 18px rgba(213, 0, 255, .55),
                0 0 30px rgba(0, 140, 255, .38),
                0 18px 70px rgba(0,0,0,.45);
        }
        .welcome-video-shell video {
            display: block;
            height: 100%;
            width: auto;
            max-width: 92vw;
            aspect-ratio: 9 / 16;
            object-fit: contain;
            background: #000;
            border-radius: 2px;
            box-shadow: none;
        }
        .welcome-video-close {
            position: absolute;
            top: 16px;
            right: 20px;
            z-index: 2;
            width: 44px;
            height: 44px;
            border: 1px solid rgba(255,255,255,.65);
            border-radius: 50%;
            background: rgba(35,24,18,.55);
            color: #fff;
            font-size: 30px;
            line-height: 1;
            cursor: pointer;
        }
        .welcome-video-sound-wrap {
            position: absolute;
            left: 50%;
            bottom: 42px;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            z-index: 6;
        }
        .welcome-video-hint {
            margin: 0;
            color: #fff;
            text-align: center;
            font: 600 12px "DM Sans", sans-serif;
            letter-spacing: .16em;
            text-transform: uppercase;
            text-shadow: 0 2px 8px rgba(0,0,0,.8);
            white-space: nowrap;
            animation: hintPulse 1.6s ease-in-out infinite;
        }
        @keyframes hintPulse {
            0%, 100% { opacity: .65; }
            50% { opacity: 1; }
        }
        .welcome-video-sound {
            position: relative;
            isolation: isolate;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 190px;
            border: 1px solid rgba(255,255,255,.45);
            border-radius: 999px;
            padding: 13px 30px;
            background: #050508;
            color: #fff;
            font: 600 13px "DM Sans", sans-serif;
            letter-spacing: .08em;
            text-transform: uppercase;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: none;
            transition: box-shadow .2s ease, border-color .2s ease, color .2s ease;
        }

        /* Normal state: simple black button, no glow. */
        .welcome-video-sound::before {
            content: "";
            position: absolute;
            z-index: -1;
            inset: -3px;
            border: 2px solid transparent;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0;
            box-shadow: 0 0 0 rgba(255, 0, 110, 0);
        }

        /* Hover state: neon border glow gently blinks; nothing rotates. */
        .welcome-video-sound:hover::before,
        .welcome-video-sound:focus-visible::before {
            opacity: 1;
            animation: soundGlowBlink 1.1s ease-in-out infinite;
        }

        .welcome-video-sound:hover,
        .welcome-video-sound:focus-visible {
            color: #fff;
            border-color: #ff35bd;
            outline: none;
        }

        @keyframes soundGlowBlink {
            0%, 100% {
                box-shadow:
                    0 0 5px 1px rgba(255, 0, 110, .45),
                    0 0 12px 3px rgba(170, 0, 255, .30),
                    0 0 20px 5px rgba(0, 120, 255, .20);
                border-color: rgba(255, 0, 110, .65);
            }
            50% {
                box-shadow:
                    0 0 9px 2px rgba(255, 0, 110, .95),
                    0 0 22px 6px rgba(170, 0, 255, .75),
                    0 0 34px 9px rgba(0, 120, 255, .55);
                border-color: rgba(0, 190, 255, 1);
            }
        }

        .welcome-video-sound span {
            position: relative;
            z-index: 1;
        }
        .welcome-video-popup.has-started .welcome-video-hint {
            display: none;
        }
        @media (max-width: 575.98px) {
            .welcome-video-popup { padding: 10px; }
            .welcome-video-shell { height: 88vh; max-width: 94vw; }
            .welcome-video-shell video { max-width: 94vw; }
            .welcome-video-close { top: 10px; right: 10px; }
        }



    /* WINWEDDINGS PHOTO GALLERY */
    .win-gallery-section {
        padding: 4.5rem 0 4rem;
        background: #fffaf4;
    }
    .win-gallery-heading {
        max-width: 760px;
        margin: 0 auto 2.2rem;
    }
    .win-gallery-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }
    .win-gallery-item {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(139,79,29,.18);
        border-radius: 3px;
        background: #f5eadc;
        cursor: zoom-in;
    }
    .win-gallery-item[hidden] {
        display: none !important;
    }
    .win-gallery-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .45s ease;
    }
    .win-gallery-item:hover img,
    .win-gallery-item:focus-visible img {
        transform: scale(1.045);
    }
    .win-gallery-item:focus-visible {
        outline: 2px solid #b77a35;
        outline-offset: 3px;
    }
    .win-gallery-actions {
        margin-top: 1.8rem;
    }
    .win-gallery-lightbox {
        position: fixed;
        inset: 0;
        z-index: 21000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 5vh 5vw;
        background: rgba(0,0,0,.7);
    }
    .win-gallery-lightbox.is-open {
        display: flex;
    }
    .win-gallery-lightbox > img {
        display: block;
        max-width: 75vw;
        max-height: 75vh;
        width: auto;
        height: auto;
        object-fit: contain;
        box-shadow: 0 16px 55px rgba(0,0,0,.35);
    }
    .win-gallery-close {
        position: absolute;
        top: 22px;
        right: 28px;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(255,255,255,.7);
        border-radius: 50%;
        color: #fff;
        background: rgba(0,0,0,.25);
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
    }
    .win-gallery-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255,255,255,.65);
        border-radius: 50%;
        color: #fff;
        background: rgba(0,0,0,.25);
        font-size: 20px;
        cursor: pointer;
    }
    .win-gallery-prev { left: 22px; }
    .win-gallery-next { right: 22px; }
    .win-gallery-counter {
        position: absolute;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font: 500 13px "DM Sans", sans-serif;
        letter-spacing: .08em;
    }
    body.win-gallery-no-scroll { overflow: hidden; }
    @media (max-width: 991.98px) {
        .win-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 575.98px) {
        .win-gallery-section { padding: 3.2rem 0; }
        .win-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
        .win-gallery-lightbox { padding: 7vh 4vw; }
        .win-gallery-lightbox > img { max-width: 75vw; max-height: 75vh; }
        .win-gallery-close { top: 12px; right: 12px; }
        .win-gallery-prev { left: 8px; }
        .win-gallery-next { right: 8px; }
    }



/* =========================================================
   WINWEDDINGS BRAND LOGO + CONTACT DETAILS (SITE-WIDE)
   ========================================================= */
.navbar {
    padding: .35rem 0;
    min-height: 88px;
}
.navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin-right: 1.5rem;
    line-height: 1;
}
.navbar .site-logo {
    display: block;
    width: clamp(220px, 22vw, 270px);
    height: 78px;
    object-fit: contain;
    object-position: left center;
}
footer .brand {
    display: inline-flex;
    align-items: center;
    font-size: 0;
}
footer .footer-site-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: 74px;
    padding: 5px 9px;
    object-fit: contain;
    object-position: left center;
    background: #fffaf4;
    border-radius: 4px;
}
.winweddings-contact-mini {
    color: #e8d9ca;
    font: 400 .88rem/1.75 Arial, sans-serif;
    overflow-wrap: anywhere;
}
.winweddings-contact-mini a {
    color: #f4e2cd;
    text-decoration: none;
}
.winweddings-contact-mini a:hover {
    color: #d9b27c;
    text-decoration: underline;
}
.winweddings-contact-mini address {
    color: #d8c8b8;
    font-style: normal;
    max-width: 360px;
}
.contact-mini-name {
    color: #d9b27c;
    font-weight: 700;
    margin-bottom: .2rem;
}
.contact-details-card {
    background: #fffaf4;
    border: 1px solid var(--line);
    padding: 1.5rem;
}
.contact-details-card h3 {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--ink);
    font-size: 1.45rem;
    margin-bottom: 1rem;
}
.contact-details-card p {
    margin-bottom: .8rem;
    overflow-wrap: anywhere;
}
.contact-details-card a {
    color: var(--brown);
}
.artist-management-section {
    background: linear-gradient(120deg, #f8eee2 0%, #fffaf4 55%, #f1e1cf 100%);
    border: 1px solid var(--line);
    padding: clamp(1.5rem, 4vw, 3rem);
}
.artist-management-section .artist-management-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}
@media (max-width: 767.98px) {
    .navbar {
        min-height: 70px;
        padding: .25rem 0;
    }
    .navbar .site-logo {
        width: 190px;
        height: 62px;
    }
    footer .footer-site-logo {
        width: 185px;
        height: 62px;
    }
}
@media (max-width: 380px) {
    .navbar .site-logo {
        width: 165px;
        height: 56px;
    }
}

/* Five service cards on desktop; responsive columns on smaller screens. */
.home-service-grid > [class*="col-"] {
    flex: 0 0 20%;
    max-width: 20%;
}
@media (max-width: 991.98px) {
    .home-service-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 575.98px) {
    .home-service-grid > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}