/* ============================================================
   AGNO & SHANNON — BRAZIL WEDDING WEBSITE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --forest:        #1E5C2F;
    --forest-mid:    #2D7A42;
    --forest-light:  #3A9455;
    --gold:          #E8226A;
    --gold-light:    #F06FA0;
    --gold-pale:     #F5B8CF;
    --cream:         #FEF6F8;
    --ivory:         #FDF0F4;
    --ivory-dark:    #FAE0E8;
    --charcoal:      #2C1A20;
    --text:          #3A1F28;
    --text-light:    #7A5060;

    --serif:  'Instrument Serif', Georgia, serif;
    --sans:   'Lato', system-ui, sans-serif;
    --script: 'Pinyon Script', cursive;

    --nav-h:      72px;
    /* Fluid between a 700px viewport (right before the banner hides entirely
       — see the max-width:700 media query) and 1100px (the site's container
       width, i.e. "full desktop size"). Keeps the banner, its images, plane
       and text all shrinking together instead of the frame staying fixed
       while its contents get squeezed. */
    --banner-h:   clamp(90px, calc(9.5px + 11.5vw), 136px);
    --pad-section: 110px;
    --container:  1100px;
    --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fluid root size: nearly everything on the site is sized in rem, so scaling
   this down smoothly as the viewport narrows shrinks headings, body text,
   padding and gaps together in proportion — the same "nice pattern" the
   desktop layout has, instead of text staying full-size and just wrapping
   more. Clamped between 14px (small phones) and 16px (desktop, unchanged). */
html { scroll-behavior: smooth; font-size: clamp(14px, calc(12.9px + 0.28vw), 16px); }

body {
    font-family: var(--sans);
    color: var(--text);
    background: var(--cream);
    overflow-x: hidden;
    line-height: 1.7;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ============================================================
   TRAVEL BANNER
   ============================================================ */
.travel-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 950;
    height: var(--banner-h);
    background: linear-gradient(180deg, rgba(254,246,248,0.72) 0%, rgba(250,224,232,0.72) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.banner-place {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.3rem, calc(-0.2px + 3vw), 2.05rem);
    color: var(--forest-mid);
    padding: 0 clamp(0.5rem, calc(-8.8px + 2.4vw), 1.1rem);
    white-space: nowrap;
    flex-shrink: 0;
}
.banner-place-left  { text-align: right; }
.banner-place-right { text-align: left; }

.banner-logo-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.6rem;
    min-width: 0;
    overflow: hidden;
}
.banner-logo-wrap-left {
    justify-content: flex-start;
    padding-left: 0.6rem;
    padding-right: 0;
}
.banner-logo {
    height: clamp(82px, calc(8.5px + 10.5vw), 124px);
    width: auto;
    object-fit: contain;
    border-radius: 12px;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 3px 10px rgba(60,20,35,0.18));
    transition: transform 0.4s var(--ease);
}
.banner-logo:hover { transform: scale(1.06); }

.banner-plane-wrap {
    position: absolute;  /* sits on top of banner content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}
.banner-plane {
    position: absolute;
    top: 50%;
    left: 0;
    /* Fluid width (same 700–1100px range as the rest of the banner). The SVG's
       viewBox is 64:32 (2:1), so its rendered height is always width/2 — margin-top
       recenters it vertically as that height changes, instead of a fixed offset
       that only lined up at the old fixed 110px size. */
    width: clamp(70px, 10vw, 110px);
    margin-top: calc(clamp(70px, 10vw, 110px) / -4);
    color: var(--forest-mid);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.28));
    animation: flyAcross 36s ease-in-out infinite;
    will-change: transform;
}
.banner-plane svg {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes flyAcross {
    /* ── Outbound: left → right ── */
    0%    { transform: translateX(-130px)           translateY(0px)   scaleX(1); }
    5%    { transform: translateX(10vw)             translateY(-6px)  scaleX(1); }
    45%   { transform: translateX(50vw)             translateY(-10px) scaleX(1); }
    85%   { transform: translateX(90vw)             translateY(-4px)  scaleX(1); }
    90%   { transform: translateX(calc(100vw + 10px)) translateY(0px) scaleX(1); }

    /* ── Pause off-screen right, flip to face left ── */
    91%   { transform: translateX(calc(100vw + 10px)) translateY(0px) scaleX(-1); }

    /* ── Return: right → left ── */
    95%   { transform: translateX(50vw)             translateY(-8px)  scaleX(-1); }
    99%   { transform: translateX(-120px)           translateY(0px)   scaleX(-1); }

    /* ── Snap back to face right for next loop ── */
    100%  { transform: translateX(-130px)           translateY(0px)   scaleX(1); }
}

/* Language toggle */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid rgba(232,34,106,0.4);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    transition: border-color 0.3s, background 0.3s;
}
.lang-toggle:hover { border-color: var(--gold); background: rgba(232,34,106,0.08); }
.lang-option {
    color: rgba(255,255,255,0.55);
    transition: color 0.3s;
}
.lang-option.active { color: var(--gold-light); font-weight: 700; }
.lang-sep { color: rgba(255,255,255,0.35); }

/* ============================================================
   NAVIGATION
   ============================================================ */
#navbar {
    position: fixed;
    top: var(--banner-h);
    left: 0; right: 0;
    z-index: 900;
    height: var(--nav-h);
    transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease), top 0.3s var(--ease);
}
.nav-transparent { background: transparent; }
.nav-solid       { background: rgba(30, 92, 47, 0.96); backdrop-filter: blur(10px); box-shadow: 0 2px 24px rgba(0,0,0,0.35); }

.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
}

.nav-brand {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--gold-light);
    transition: opacity 0.3s;
}
.nav-brand:hover { opacity: 0.75; }

.nav-menu {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.nav-link {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    position: relative;
    transition: color 0.3s;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 0; right: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}
.nav-link:hover { color: var(--gold-light); }
.nav-link:hover::after { transform: scaleX(1); }

.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.nav-hamburger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--gold-light);
    transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    height: 100vh;
    min-height: 680px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* Each photo layer — crossfades in sequence */
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    animation: heroSlide 35s infinite;
    will-change: opacity;
}
.hero-slide:nth-child(1) { animation-delay:  0s; }
.hero-slide:nth-child(2) { animation-delay:  5s; }
.hero-slide:nth-child(3) { animation-delay: 10s; }
.hero-slide:nth-child(4) { animation-delay: 15s; }
.hero-slide:nth-child(5) { animation-delay: 20s; }
.hero-slide:nth-child(6) { animation-delay: 25s; }
.hero-slide:nth-child(7) { animation-delay: 30s; }

@keyframes heroSlide {
    0%      { opacity: 0; }
    4%      { opacity: 1; }
    18%     { opacity: 1; }
    22%     { opacity: 0; }
    100%    { opacity: 0; }
}

/* Dark gradient overlay so text stays readable */
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.35) 50%,
            rgba(0,0,0,0.65) 100%
        ),
        radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
}

.botanical {
    position: absolute;
    top: 0;
    width: 340px;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.botanical svg { width: 100%; height: 100%; }
.botanical-left  { left: -30px; }
.botanical-right { right: -30px; transform: scaleX(-1); }

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 2rem;
    max-width: 720px;
}

.hero-pre {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 2.2rem;
    opacity: 0.9;
}

.hero-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 1.8rem;
}

.name-main {
    display: block;
    font-family: var(--serif);
    font-size: clamp(4.5rem, 11vw, 9rem);
    font-weight: 300;
    font-style: italic;
    color: #fff;
    line-height: 0.88;
    letter-spacing: 0.02em;
    text-shadow: 0 6px 40px rgba(0,0,0,0.55);
}

.name-amp {
    display: block;
    font-family: var(--script);
    font-size: clamp(3rem, 7vw, 5.5rem);
    color: var(--gold);
    line-height: 1.35;
}

.hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.orn-line {
    display: block;
    width: 90px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.orn-diamond {
    color: var(--gold);
    font-size: 0.45rem;
    letter-spacing: 0;
}

.hero-date-loc {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 2.8rem;
}

.hero-cta {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-light);
    border: 1px solid rgba(232,34,106,0.45);
    padding: 15px 44px;
    transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s;
}
.hero-cta:hover {
    background: var(--gold);
    color: var(--forest);
    border-color: var(--gold);
}

.hero-scroll {
    position: absolute;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.scroll-bar {
    width: 1px;
    height: 65px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollPulse 2.2s ease-in-out infinite;
    transform-origin: top;
}
@keyframes scrollPulse {
    0%   { opacity: 0; transform: scaleY(0); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: scaleY(1); }
}

/* ============================================================
   PHOTO STRIP
   ============================================================ */
.photo-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 320px;
    overflow: hidden;
}
.photo-placeholder {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: transform 0.6s var(--ease);
}
.photo-placeholder:hover { transform: scale(1.03); }

/* ============================================================
   SECTION BASE
   ============================================================ */
.section { padding: var(--pad-section) 0; }

.section-dark {
    background: var(--forest);
    color: var(--cream);
}
.section-dark .section-pre  { color: var(--gold); }
.section-dark .section-title { color: #fff; }
.section-dark .section-divider { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.section-dark p,
.section-dark .card-desc,
.section-dark .card-list li { color: rgba(255,255,255,0.72); }
.section-dark .card-title { color: #fff; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 2.5rem;
}

.section-header {
    text-align: center;
    margin-bottom: 4.5rem;
}
.section-pre {
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.7rem;
    display: block;
}
.section-title {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 300;
    font-style: italic;
    color: var(--forest);
    margin-bottom: 1rem;
    line-height: 1;
}
.section-divider {
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 1rem auto 1.5rem;
}
.section-desc {
    max-width: 580px;
    margin: 0 auto;
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.85;
}
.section-desc a {
    color: var(--forest-mid);
    text-decoration: underline;
    text-decoration-color: var(--gold-pale);
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.section-desc a:hover { color: var(--gold); }
.section-dark .section-desc a {
    color: var(--gold-light);
    text-decoration-color: rgba(255,255,255,0.4);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.revealed {
    opacity: 1;
    transform: none;
}

/* ============================================================
   SCHEDULE / TIMELINE
   ============================================================ */
.timeline {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    padding-left: 0;
}
.timeline::before {
    display: none;
}

.timeline-item {
    position: relative;
    padding-bottom: 3rem;
    padding-left: 0;
    display: grid;
    grid-template-columns: 90px 20px 1fr;
    gap: 0 1rem;
    align-items: start;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-time {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-align: right;
    padding-top: 2px;
    position: static;
    width: auto;
}

.timeline-dot {
    position: static;
    margin: 8px auto 0;
}
.timeline-content {
    padding-left: 0;
}
.gold-dot {
    background: var(--gold);
    border-color: var(--gold);
}

.timeline-content h3 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--forest);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}
.timeline-content p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.75;
    margin-bottom: 0.6rem;
}
.timeline-loc {
    font-size: 0.8rem;
    color: var(--gold);
    font-style: italic;
}

/* ============================================================
   ITINERARY
   ============================================================ */
.itinerary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
}

.itinerary-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(232,34,106,0.18);
    padding: 2rem 1.75rem;
    min-width: 0;
    transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.itinerary-card:hover {
    transform: translateY(-5px);
    border-color: rgba(232,34,106,0.45);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.featured-card {
    border-color: rgba(232,34,106,0.55);
    background: rgba(232,34,106,0.07);
}

.card-day {
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.65rem;
}
.card-title {
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}
.card-desc {
    font-size: 0.87rem;
    line-height: 1.75;
    margin-bottom: 1.1rem;
}
.card-list {
    list-style: none;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 0.75rem;
}
.card-list li {
    font-size: 0.84rem;
    padding: 0.3rem 0 0.3rem 1.2rem;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.card-list li:last-child { border-bottom: none; }
.card-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 0.8rem;
}
@media (max-width: 700px) {
    /* Two-up instead of stacking all 5 day cards, with smaller type so
       each card needs less vertical room. */
    #itinerary .itinerary-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    #itinerary .itinerary-card { padding: 1.25rem 1rem; }
    #itinerary .card-day { font-size: 0.58rem; letter-spacing: 0.2em; }
    #itinerary .card-title { font-size: 1.15rem; }
    #itinerary .card-desc { font-size: 0.74rem; line-height: 1.55; }
    #itinerary .card-list li { font-size: 0.7rem; padding: 0.25rem 0 0.25rem 1rem; }
}

/* ============================================================
   CITY
   ============================================================ */
.city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2.5rem;
    margin-bottom: 4.5rem;
}
.city-feature {
    text-align: center;
    padding: 2.25rem 1.5rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.35s, transform 0.35s var(--ease);
}
.city-feature:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
}
.city-icon {
    font-size: 2.6rem;
    margin-bottom: 1.1rem;
    display: block;
}
.city-feature h3 {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--forest);
    margin-bottom: 0.75rem;
}
.city-feature p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.75;
}

.city-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    padding-top: 3.5rem;
    border-top: 1px solid rgba(232,34,106,0.2);
}
.section-dark .city-info-item {
    background: var(--cream);
    padding: 1.75rem;
    border-radius: 8px;
}
.city-info-item h4 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--forest);
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--gold-pale);
}
.city-info-item p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.8;
}

/* ============================================================
   HOTELS
   ============================================================ */
.hotels-grid-single {
    grid-template-columns: minmax(300px, 480px);
    justify-content: center;
}

.hotel-card {
    background: var(--forest);
    border: 1px solid rgba(232,34,106,0.14);
    overflow: hidden;
    position: relative;
    transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.hotel-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.featured-hotel { border-color: rgba(232,34,106,0.55); }

.hotel-badge {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 2;
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--forest);
    padding: 5px 13px;
}

.hotel-visual {
    height: 390px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hotel-photo {
    width: 70%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hotel-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.35));
}
.hotel-visual-label {
    font-family: var(--serif);
    font-size: 0.9rem;
    font-style: italic;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.1em;
    z-index: 1;
    position: relative;
}

.hotel-body { padding: 1.75rem; }

.hotel-name {
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 400;
    font-style: ;
    color: #fff;
    margin-bottom: 0.3rem;
    line-height: 1.1;
}
.hotel-stars {
    color: var(--gold);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.85rem;
}
.hotel-desc {
    font-size: 0.87rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.1rem;
}
.hotel-details {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1.4rem;
}

.hotel-btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    border: 1px solid rgba(232,34,106,0.5);
    color: var(--gold-light);
    padding: 11px 26px;
    transition: background 0.3s var(--ease), color 0.3s, border-color 0.3s;
}
.hotel-btn:hover {
    background: var(--gold);
    color: var(--forest);
    border-color: var(--gold);
}

.hotels-note {
    text-align: center;
    font-family: var(--serif);
    font-style: ;
    font-size: 0.95rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(58,31,40,0.1);
}

/* ============================================================
   RIO TRIP
   ============================================================ */
.trip-photo-wrap {
    max-width: 760px;
    margin: 0 auto 4rem;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    --pan-end: -49.4%; /* image is a 3792×1080 panorama — pan reveals the parts a 16:9 crop would cut off */
}
.trip-photo {
    height: 100%;
    width: auto;
    max-width: none;
    display: block;
    animation: tripPhotoPan 22s ease-in-out infinite;
}
@keyframes tripPhotoPan {
    0%, 8%    { transform: translateX(0); }
    46%, 54%  { transform: translateX(var(--pan-end)); }
    92%, 100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .trip-photo { animation: none; }
}

.trip-itinerary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}
.trip-day-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(232,34,106,0.18);
    padding: 1.75rem 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.trip-day-card:hover {
    transform: translateY(-5px);
    border-color: rgba(232,34,106,0.45);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.trip-day-num {
    font-family: var(--serif);
    font-size: 1.9rem;
    font-style: italic;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.trip-day-date {
    font-family: var(--sans);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.9rem;
}
.trip-day-title {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.6rem;
    line-height: 1.25;
}
.trip-itinerary-grid .trip-day-desc {
    font-size: 0.78rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.65);
}

@media (max-width: 900px) {
    .trip-itinerary-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .trip-photo-wrap { aspect-ratio: 4 / 3; --pan-end: -62%; }
    .trip-itinerary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .trip-itinerary-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   INFO
   ============================================================ */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
    margin-bottom: 5rem;
}
.logistics-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 0;
}
@media (max-width: 700px) {
    /* Additional Info and Rio Logistics stay two-up on phones too — their cards
       are similar enough in length not to leave one column towering over the other.
       !important throughout: this block sits earlier in the file than the base
       .info-card rules it's meant to override, and since both sides are the
       same specificity, source order alone would let the later base rules win. */
    #info .info-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
    .logistics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
    .info-card { padding: 1.25rem 1rem !important; }
    /* Smaller type so each two-up card needs less vertical room. Shared by
       both Additional Info and Rio Logistics since both reuse .info-card. */
    .info-icon { font-size: 1.4rem !important; margin-bottom: 0.5rem !important; }
    .info-card h3 { font-size: 1.02rem !important; margin-bottom: 0.4rem !important; }
    .info-card p { font-size: 0.76rem !important; line-height: 1.55 !important; }
}

.info-card {
    padding: 2rem 1.75rem;
    background: var(--ivory);
    border-left: 3px solid var(--gold-pale);
    transition: border-color 0.35s, transform 0.35s var(--ease), box-shadow 0.35s;
    /* Grid items default to min-width:auto, which lets long unbreakable text
       (URLs, emails) force the column wider than its track and overflow the
       viewport. This lets the card shrink and the rule below wrap it instead. */
    min-width: 0;
    overflow-wrap: break-word;
}
.info-card:hover {
    border-color: var(--gold);
    transform: translateX(5px);
    box-shadow: -4px 0 20px rgba(232,34,106,0.1);
}
.info-icon {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
    display: block;
}
.info-card h3 {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--forest);
    margin-bottom: 0.7rem;
}
.info-card p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.8;
}
.info-link {
    color: var(--forest-mid);
    text-decoration: underline;
    text-decoration-color: var(--gold-pale);
    text-underline-offset: 2px;
    transition: color 0.2s;
}
.info-link:hover { color: var(--gold); }

/* ============================================================
   RSVP
   ============================================================ */
.rsvp-box {
    background: var(--forest);
    color: var(--cream);
    padding: 4.5rem 3.5rem;
    text-align: center;
    max-width: 680px;
    margin: 0 auto 4.5rem;
    position: relative;
    overflow: hidden;
}
/* On a dark section, give the box its own shade so it doesn't blend into the section background */
.section-dark .rsvp-box { background: var(--forest-mid); }
.rsvp-leaf-left,
.rsvp-leaf-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
    pointer-events: none;
}
.rsvp-leaf-left  { left: -20px; }
.rsvp-leaf-right { right: -20px; transform: translateY(-50%) scaleX(-1); }

.rsvp-pre {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.4rem;
}
.rsvp-title {
    font-family: var(--serif);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 300;
    font-style: italic;
    color: var(--gold-light);
    margin-bottom: 0.75rem;
    line-height: 1;
}
.rsvp-sub {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    max-width: 440px;
    margin: 0 auto 2.5rem;
    line-height: 1.75;
}

.rsvp-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}
.rsvp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Honeypot anti-spam field: off-screen (not display:none) so simple bots still fill it in, invisible/unreachable for real visitors */
.rsvp-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.rsvp-input {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(232,34,106,0.25);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 0.9rem;
    outline: none;
    -webkit-appearance: none;
    transition: border-color 0.3s, background 0.3s;
    border-radius: 0;
}
.rsvp-input:focus {
    border-color: var(--gold);
    background: rgba(255,255,255,0.1);
}
.rsvp-input::placeholder { color: rgba(255,255,255,0.35); }
.rsvp-input option { background: var(--forest); color: var(--cream); }

.rsvp-question {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.rsvp-label {
    font-family: var(--sans);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
}

.rsvp-submit {
    width: 100%;
    background: var(--gold);
    color: var(--forest);
    border: none;
    padding: 15px 32px;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s var(--ease), transform 0.2s;
}
.rsvp-submit:hover:not(:disabled) {
    background: var(--gold-light);
    transform: translateY(-2px);
}
.rsvp-submit:disabled { cursor: default; }

.contact-row {
    text-align: center;
    padding: 2.5rem 0;
}
.contact-row h3 {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 400;
    font-style: italic;
    color: var(--forest);
    margin-bottom: 0.6rem;
}
.contact-row p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 2;
}
.contact-link {
    color: var(--forest-mid);
    text-decoration: underline;
    text-decoration-color: var(--gold-pale);
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.section-dark .contact-row h3 { color: var(--gold-light); }
.section-dark .contact-row p { color: rgba(255,255,255,0.7); }
.section-dark .contact-link { color: var(--gold-light); text-decoration-color: rgba(255,255,255,0.4); }
.contact-link:hover { color: var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: #0A0F0A;
    color: var(--cream);
    padding: 0 2rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.footer-botanical {
    width: 100%;
    display: block;
    margin-bottom: -1px;
}
.footer-content { position: relative; padding-top: 2.5rem; }
.footer-names {
    font-family: var(--serif);
    font-size: clamp(2rem, 6vw, 3rem);
    font-style: italic;
    font-weight: 300;
    color: var(--gold-light);
    margin-bottom: 0.5rem;
}
.footer-date {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 1.5rem;
}
.footer .hero-ornament { margin: 0 auto 1.25rem; }
.footer .orn-line { width: 60px; }
.footer-love {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.08em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    :root { --pad-section: 80px; }
    .botanical { width: 220px; opacity: 0.6; }
}

@media (max-width: 700px) {
    /* Banner stays visible all the way down to phone width — only the two
       logo images drop out (they'd be too small to read anyway). Continues
       the same fluid shrink as the 700–1100px range above, down to 360px. */
    :root {
        --pad-section: 65px;
        /* 25% thinner than the plane/text would otherwise need — they stay
           full size (see .banner-place / .banner-plane below), just with
           less surrounding frame around them. */
        --banner-h: clamp(41.25px, calc(13.46px + 7.72vw), 67.5px);
    }

    .banner-logo-wrap img { display: none; }

    .banner-place {
        font-size: clamp(0.85rem, calc(6px + 2.12vw), 1.3rem);
        padding: 0 clamp(0.3rem, calc(1.41px + 0.94vw), 0.5rem);
    }
    .banner-plane {
        width: clamp(42px, calc(12.35px + 8.24vw), 70px);
        margin-top: calc(clamp(42px, calc(12.35px + 8.24vw), 70px) / -4);
    }

    /* backdrop-filter (like transform/filter) creates a new containing block for
       fixed-position descendants. #navbar picks up backdrop-filter once scrolled
       (.nav-solid), which was hijacking .nav-menu's fixed positioning — its "top"
       offset started being measured from the navbar instead of the viewport,
       opening a gap above the menu whenever it was opened while scrolled. */
    #navbar.nav-solid { backdrop-filter: none; -webkit-backdrop-filter: none; }

    .nav-menu {
        display: none;
        position: fixed;
        top: calc(var(--banner-h) + var(--nav-h));
        left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(20, 70, 35, 0.98);
        backdrop-filter: blur(12px);
        padding: 1rem 0 2rem;
        border-top: 1px solid rgba(232,34,106,0.15);
    }
    .nav-menu.nav-open { display: flex; }
    .nav-link {
        padding: 1rem 2.5rem;
        font-size: 0.75rem;
    }
    .nav-link::after { display: none; }
    .nav-hamburger { display: flex; }

    .botanical { display: none; }

    .name-main { font-size: clamp(3.5rem, 17vw, 5rem); }
    .name-amp  { font-size: clamp(2.5rem, 12vw, 4rem); }

    .photo-strip { height: 180px; }
    .photo-placeholder { font-size: 0.8rem; }

    .timeline { padding-left: 0; }
    .timeline::before { display: none; }
    .timeline-time { display: none; }
    .timeline-item { padding-left: 1.5rem; }
    .timeline-dot  { left: 0; }

    .rsvp-box  { padding: 2.5rem 1.5rem; }
    .rsvp-row  { grid-template-columns: 1fr; }
    .rsvp-leaf-left, .rsvp-leaf-right { display: none; }
}

@media (max-width: 480px) {
    .container { padding: 0 1.25rem; }
    .nav-inner  { padding: 0 1.25rem; }
    .hero-ornament .orn-line { width: 50px; }
}
/* ── DETAILS SECTION ── */
.section-eyebrow {
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 1.2rem;
}
.section-intro {
    text-align: center;
    font-family: var(--serif);
    font-size: 1.35rem;
    color: var(--forest);
    max-width: 680px;
    margin: 0 auto 3.5rem;
    line-height: 1.6;
}
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}
.details-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
.details-icon {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}
.details-card h3 {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--forest);
}
.details-card p {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.9;
}
.details-note {
    font-style: italic;
    color: var(--text-light) !important;
    font-size: 0.85rem !important;
}
@media (max-width: 600px) {
    .details-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    /* Details section specifically stays side-by-side on phones — its two cards
       are similar enough in length that this reads fine at narrow widths. */
    #details .details-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    /* One size down on the address blocks so they wrap less inside the
       narrower two-up columns at phone width. */
    #details .details-card p { font-size: 0.8rem; }
}
@media (max-width: 700px) {
    /* Getting There's heading/paragraph sizes are set via inline style
       attributes in the HTML, so !important is required to shrink them here. */
    #gettingthere .details-card h3 { font-size: 1.35rem !important; }
    #gettingthere .details-card p { font-size: 0.78rem !important; line-height: 1.6 !important; }
    #gettingthere .details-card { padding: 1.5rem !important; }
}

/* ── CITY PHOTO GRID ── */
.city-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.city-photo-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.city-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.city-photo-card:hover img {
    transform: scale(1.05);
}
.city-photo-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(20,50,20,0.92) 0%, transparent 100%);
    padding: 2rem 1.2rem 1.2rem;
    color: var(--white);
}
.city-photo-caption h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.3rem;
}
.city-photo-caption p {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.5;
}
@media (max-width: 700px) {
    .city-photo-grid {
        grid-template-columns: 1fr;
    }
}