: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;
    }
}