/* ==========================================================================
   Miz Tapak Wedding — public site
   Palette taken from the Miz Tapak Wedding mark: forest green, gold, cream.
   ========================================================================== */

:root {
    --ink: #161e19;
    --ink-soft: #425249;
    --muted: #6b8074;
    --faint: #9cada3;

    --green: #1b5634;
    --green-deep: #113d24;
    --green-ink: #0e301d;
    --leaf: #2b6f48;
    --leaf-soft: #def2e6;

    /* Only a failed submission paints red; everything else follows the theme. */
    --bad-soft: #f6eaec;
    --bad-line: #e5c3c9;
    --bad-ink: #7a2634;

    --gold: #b99668;
    --gold-deep: #9a7b52;
    --gold-light: #e3d3b8;
    --gold-soft: #f7f0e4;

    --cream: #faf6f2;
    --sand: #f3ebe4;
    --line: #e8dcd4;
    --white: #fff;

    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    --shadow-sm: 0 1px 2px rgba(14, 49, 29, .06), 0 2px 8px rgba(14, 49, 29, .05);
    --shadow-md: 0 6px 20px rgba(14, 49, 29, .09), 0 2px 6px rgba(14, 49, 29, .05);
    --shadow-lg: 0 20px 52px rgba(14, 49, 29, .16), 0 4px 12px rgba(14, 49, 29, .07);

    --radius: 14px;
    --radius-lg: 22px;
    --gutter: clamp(18px, 5vw, 64px);
    --maxw: 1200px;
    --nav-h: 74px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p { margin: 0 0 1em; }

.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.center { text-align: center; }

/* ------------------------------------------------------------- typography */

.eyebrow {
    font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 700; margin: 0 0 14px;
}
.eyebrow.on-dark { color: var(--gold-light); }

.lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-soft); max-width: 60ch; }
.lead.center { margin-inline: auto; }

/* A hand-drawn gold rule under a heading, used between major sections. */
.rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 0; }
.rule::before, .rule::after {
    content: ""; height: 1px; width: clamp(38px, 8vw, 84px);
    background: linear-gradient(90deg, transparent, var(--gold));
}
.rule::after { background: linear-gradient(90deg, var(--gold), transparent); }
.rule span { color: var(--gold); font-size: 13px; letter-spacing: .2em; }

/* ----------------------------------------------------------------- buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
    font-family: var(--font-body); font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
    cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
    transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease, background .22s ease, color .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary { background: var(--green); color: var(--white); box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--green-deep); box-shadow: var(--shadow-lg); }

.btn-gold { background: var(--gold); color: #3a2a14; box-shadow: var(--shadow-md); }
.btn-gold:hover { background: var(--gold-deep); color: #fff; }

.btn-ghost { background: transparent; color: var(--green); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--green); background: var(--leaf-soft); }

.btn-ghost.on-dark { color: #fff; border-color: rgba(255, 255, 255, .42); }
.btn-ghost.on-dark:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn-lg { padding: 17px 34px; font-size: 15.5px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* A single slow sheen across a primary button, not a loop. */
.btn-primary::after, .btn-gold::after {
    content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: skewX(-18deg); transition: left .6s ease;
}
.btn-primary:hover::after, .btn-gold:hover::after { left: 120%; }

/* --------------------------------------------------------------------- nav */

.nav {
    position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 90;
    display: flex; align-items: center;
    transition: background .3s ease, box-shadow .3s ease, height .3s ease, border-color .3s ease;
    border-bottom: 1px solid transparent;
}
.nav.is-stuck {
    background: rgba(250, 246, 242, .88); backdrop-filter: saturate(150%) blur(14px);
    border-bottom-color: var(--line); box-shadow: 0 2px 20px rgba(14, 49, 29, .06); height: 64px;
}
.nav-inner { display: flex; align-items: center; gap: 22px; width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }

.logo { display: flex; align-items: center; gap: 11px; margin-right: auto; min-width: 0; }
.logo-mark {
    width: 38px; height: 38px; flex: none; border-radius: 50%;
    background: linear-gradient(140deg, var(--green), var(--leaf));
    display: grid; place-items: center; color: #fff;
    font-family: var(--font-display); font-size: 19px; font-weight: 700;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), var(--shadow-sm);
}
.logo-text { line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.logo-text b { display: block; font-family: var(--font-display); font-size: 18.5px; font-weight: 600; color: var(--green-ink); }
.logo-text span { font-size: 9.6px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a:not(.btn) {
    padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-soft);
    transition: color .2s ease, background .2s ease;
}
.nav-links a:not(.btn):hover, .nav-links a:not(.btn).active { color: var(--green); background: var(--leaf-soft); }

/* The dropdown's own call to action; the bar already has one on desktop. */
.nav-cta-mobile { display: none; }

/* Over a dark full-bleed hero the bar is transparent, so its text has to be
   light until the page scrolls and the bar gains its cream background. */
.has-hero .nav:not(.is-stuck) .logo-text b { color: #fff; }
.has-hero .nav:not(.is-stuck) .logo-text span { color: var(--gold-light); }
.has-hero .nav:not(.is-stuck) .nav-links > a:not(.btn) { color: rgba(255, 255, 255, .82); }
.has-hero .nav:not(.is-stuck) .nav-links > a:not(.btn):hover,
.has-hero .nav:not(.is-stuck) .nav-links > a:not(.btn).active { color: #fff; background: rgba(255, 255, 255, .15); }
.has-hero .nav:not(.is-stuck) .nav-toggle { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); }
.has-hero .nav:not(.is-stuck) .nav-toggle span,
.has-hero .nav:not(.is-stuck) .nav-toggle span::before,
.has-hero .nav:not(.is-stuck) .nav-toggle span::after { background: #fff; }
.has-hero .nav:not(.is-stuck) .nav-toggle[aria-expanded="true"] span { background: transparent; }

.nav-toggle {
    display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--white); cursor: pointer; padding: 0; place-items: center;
}
.nav-toggle span { display: block; width: 17px; height: 1.6px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 17px; height: 1.6px; background: var(--ink); border-radius: 2px;
    transition: transform .25s ease;
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after { top: 5.5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 940px) {
    .nav-toggle { display: grid; }
    .nav-cta { display: none; }
    .nav-links {
        position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--white); padding: 16px var(--gutter) 24px; border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg); transform: translateY(-14px); opacity: 0; pointer-events: none;
        transition: transform .26s ease, opacity .26s ease;
    }
    .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
    .nav-links a:not(.btn) { padding: 13px 14px; border-radius: 12px; font-size: 15.5px; }
    .nav-cta-mobile { display: inline-flex; margin-top: 10px; }
    /* The dropdown panel is white, so the links go back to their dark colour
       even while the bar itself is sitting over the hero. */
    .has-hero .nav:not(.is-stuck) .nav-links > a:not(.btn) { color: var(--ink-soft); }
    .has-hero .nav:not(.is-stuck) .nav-links > a:not(.btn):hover,
    .has-hero .nav:not(.is-stuck) .nav-links > a:not(.btn).active { color: var(--green); background: var(--leaf-soft); }
}

/* -------------------------------------------------------------------- hero */

.hero {
    position: relative; min-height: min(100svh, 940px); display: grid; align-items: center;
    padding: calc(var(--nav-h) + 48px) 0 72px; overflow: hidden; isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg img, .hero-bg .hero-fallback { width: 100%; height: 100%; object-fit: cover; }
.hero-fallback {
    background:
        radial-gradient(120% 90% at 78% 12%, rgba(185, 150, 104, .42), transparent 62%),
        radial-gradient(90% 80% at 12% 88%, rgba(160, 68, 85, .42), transparent 58%),
        linear-gradient(155deg, #18492e, #0c2918 70%);
}
/* A very slow drift so the hero is alive without pulling the eye off the copy. */
.hero-bg > * { animation: kenburns 26s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }

.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(7, 26, 15, .68), rgba(7, 26, 15, .46) 42%, rgba(7, 26, 15, .82));
}
/* Faint paper grain over the photograph. */
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.hero-inner { color: #fff; max-width: 860px; }
.hero h1 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .3); }
.hero h1 em { font-style: italic; color: var(--gold-light); }
.hero .lead { color: rgba(255, 255, 255, .88); font-size: clamp(1.05rem, 1.7vw, 1.28rem); margin-top: 20px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

.hero-stats {
    display: flex; gap: clamp(20px, 5vw, 56px); flex-wrap: wrap; margin-top: 54px;
    padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .2);
}
.hero-stats div b {
    display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    color: var(--gold-light); font-weight: 600; line-height: 1;
}
.hero-stats div span { font-size: 12.5px; color: rgba(255, 255, 255, .72); letter-spacing: .05em; }

.scroll-cue {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    width: 22px; height: 36px; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 12px;
}
.scroll-cue::after {
    content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px;
    background: var(--gold-light); transform: translateX(-50%); animation: cue 1.9s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%, 11px); } }

/* ------------------------------------------------------------ promo banner */

.promo-bar {
    background: linear-gradient(100deg, var(--green-deep), var(--green) 45%, var(--leaf));
    color: #fff; padding: 15px 0; position: relative; overflow: hidden;
}
.promo-bar::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .16), transparent 80%);
    animation: shimmer 5.5s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.promo-inner { display: flex; align-items: center; justify-content: center; gap: 10px 22px; flex-wrap: wrap; position: relative; z-index: 1; text-align: center; }
.promo-inner strong { font-size: 15px; }
.promo-inner span { font-size: 14px; color: rgba(255, 255, 255, .86); }
.promo-code {
    border: 1px dashed rgba(255, 255, 255, .6); border-radius: 8px; padding: 3px 11px;
    font-weight: 700; letter-spacing: .09em; font-size: 13px;
}
.countdown { display: flex; gap: 7px; }
.countdown b {
    background: rgba(0, 0, 0, .24); border-radius: 8px; padding: 5px 9px; min-width: 42px;
    font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.15; text-align: center;
}
.countdown b i { display: block; font-style: normal; font-size: 9px; font-weight: 500; opacity: .72; letter-spacing: .07em; }

/* ---------------------------------------------------------------- sections */

section { padding: clamp(64px, 9vw, 120px) 0; }
.section-head { max-width: 640px; margin: 0 auto clamp(38px, 5vw, 60px); text-align: center; }
.section-head .lead { margin: 16px auto 0; }

.bg-sand { background: var(--sand); }
.bg-dark { background: linear-gradient(165deg, var(--green-ink), #091e12); color: rgba(255, 255, 255, .82); }
.bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-dark .lead { color: rgba(255, 255, 255, .74); }

/* ------------------------------------------------------------------- value */

.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.value-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 32px 28px; transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold-light); }
.value-icon {
    width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px;
    background: var(--gold-soft); color: var(--gold-deep);
}
.value-icon svg { width: 24px; height: 24px; }
.value-card h3 { font-size: 1.28rem; margin-bottom: 8px; }
.value-card p { color: var(--ink-soft); font-size: 14.6px; margin: 0; }

/* ---------------------------------------------------------------- packages */

.filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.filter {
    border: 1px solid var(--line); background: var(--white); color: var(--ink-soft);
    padding: 9px 18px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 500;
    cursor: pointer; transition: all .2s ease;
}
.filter:hover { border-color: var(--gold); color: var(--green); }
.filter.active { background: var(--green); border-color: var(--green); color: #fff; }
.filter em { font-style: normal; opacity: .6; margin-left: 4px; font-size: 12px; }

.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: clamp(18px, 2.4vw, 28px); }

.pkg-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; display: flex; flex-direction: column; position: relative;
    transition: transform .32s cubic-bezier(.2, .8, .3, 1), box-shadow .32s ease, border-color .32s ease;
}
.pkg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold-light); }
.pkg-card.is-hidden { display: none; }

.pkg-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--sand); }
.pkg-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .3, 1); }
.pkg-card:hover .pkg-media img { transform: scale(1.07); }
.pkg-media::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
    background: linear-gradient(transparent, rgba(7, 26, 15, .58));
}
.pkg-place {
    position: absolute; left: 16px; bottom: 13px; z-index: 1; color: #fff;
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; gap: 6px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.pkg-place svg { width: 14px; height: 14px; }

.ribbon {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: var(--gold); color: #3a2a14; font-size: 11px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px;
    box-shadow: var(--shadow-sm);
}
.ribbon.promo { background: var(--green); color: #fff; }
.ribbon.right { left: auto; right: 14px; }

.pkg-body { padding: 22px 24px 6px; flex: 1; }
.pkg-body h3 { font-size: 1.36rem; line-height: 1.22; }
.pkg-body h3 a { color: inherit; }
.pkg-body h3 a:hover { color: var(--green); }
.pkg-sub { color: var(--muted); font-size: 13.6px; margin: 8px 0 0; }

.pkg-price { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.pkg-price .from { font-size: 11.5px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 5px; }
.pkg-price b { font-family: var(--font-display); font-size: 2rem; color: var(--green); line-height: 1; font-weight: 600; }
.pkg-price s { color: var(--faint); font-size: 14px; padding-bottom: 5px; }
.pkg-price .pax { font-size: 12.5px; color: var(--muted); padding-bottom: 5px; }

.pkg-foot { padding: 16px 24px 22px; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pkg-shots { margin-left: auto; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.pkg-shots svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ steps */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 26px; counter-reset: step; }
.step { position: relative; padding-top: 16px; }
.step::before {
    counter-increment: step; content: "0" counter(step);
    font-family: var(--font-display); font-size: 3.1rem; color: var(--gold-light);
    line-height: 1; display: block; margin-bottom: 10px; font-weight: 600;
}
.bg-dark .step::before { color: rgba(227, 211, 184, .38); }
.step h3 { font-size: 1.24rem; margin-bottom: 7px; }
.step p { font-size: 14.4px; color: var(--ink-soft); margin: 0; }
.bg-dark .step p { color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------------- gallery */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; cursor: zoom-in; background: var(--sand); }
.gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .3, 1); }
.gallery figure:hover img { transform: scale(1.08); }
.gallery figure::after {
    content: ""; position: absolute; inset: 0; background: rgba(14, 49, 29, .28);
    opacity: 0; transition: opacity .3s ease;
}
.gallery figure:hover::after { opacity: 1; }
/* Break the grid so the strip does not read as a spreadsheet. */
.gallery figure:nth-child(7n+1) { grid-column: span 2; }
.gallery figure:nth-child(7n+1) img { aspect-ratio: 2 / 1; }

/* ------------------------------------------------------------- testimonial */

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.quote {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-lg); padding: 30px 28px; position: relative;
}
.quote::before {
    content: "\201C"; font-family: var(--font-display); font-size: 5rem; color: var(--gold);
    position: absolute; top: 2px; left: 18px; opacity: .35; line-height: 1;
}
.quote p { font-size: 15px; position: relative; margin: 14px 0 18px; }
.quote-who { display: flex; align-items: center; gap: 11px; }
.quote-who b { font-size: 14px; color: #fff; display: block; }
.quote-who span { font-size: 12.4px; color: rgba(255, 255, 255, .6); }
.quote-av {
    width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--gold), var(--gold-deep)); color: #4a3418;
    font-family: var(--font-display); font-size: 17px; font-weight: 700;
}
.stars { color: var(--gold); letter-spacing: 2px; font-size: 13px; }

/* ------------------------------------------------------------------ booking */

.book-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(26px, 4vw, 54px); align-items: start; }
.book-layout > * { min-width: 0; }
@media (max-width: 900px) { .book-layout { grid-template-columns: 1fr; } }

.book-form {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow-md);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field label .req { color: var(--leaf); }
.field input, .field select, .field textarea {
    width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px;
    font: inherit; font-size: 15px; background: var(--cream); color: var(--ink);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--green); background: var(--white);
    box-shadow: 0 0 0 3px rgba(160, 68, 85, .12);
}
.field textarea { resize: vertical; min-height: 96px; }
.field .hint { font-size: 12.2px; color: var(--muted); margin: 6px 0 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Time slots read better as a set of chips than as a dropdown. */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr)); gap: 8px; }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot span {
    display: block; text-align: center; padding: 11px 6px; border: 1px solid var(--line);
    border-radius: 11px; font-size: 13.2px; cursor: pointer; background: var(--cream);
    transition: all .18s ease;
}
.slot:hover span { border-color: var(--gold); }
.slot input:checked + span { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.slot input:focus-visible + span { box-shadow: 0 0 0 3px rgba(160, 68, 85, .2); }

.steps-bar { display: flex; gap: 6px; margin-bottom: 26px; }
.steps-bar i {
    flex: 1; height: 4px; border-radius: 2px; background: var(--line);
    transition: background .35s ease;
}
.steps-bar i.done { background: var(--gold); }
.steps-bar i.now { background: var(--green); }

.step-pane[hidden] { display: none; }
.step-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 8px; }

.book-aside .tick { display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-start; }
.book-aside .tick svg { width: 21px; height: 21px; flex: none; color: var(--gold-deep); margin-top: 2px; }
.book-aside .tick b { display: block; font-size: 14.6px; }
.book-aside .tick p { font-size: 13.8px; color: var(--ink-soft); margin: 2px 0 0; }

.alert { border-radius: 12px; padding: 14px 16px; font-size: 14px; margin-bottom: 20px; }
.alert.ok { background: #e9f4ec; border: 1px solid #bfdfc8; color: #22543a; }
.alert.bad { background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--bad-ink); }

/* ---------------------------------------------------------------------- faq */

.faq { max-width: 780px; margin-inline: auto; }
.faq details {
    border-bottom: 1px solid var(--line); padding: 4px 0;
}
.faq summary {
    cursor: pointer; padding: 20px 40px 20px 0; position: relative; list-style: none;
    font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
    border-right: 1.8px solid var(--gold-deep); border-bottom: 1.8px solid var(--gold-deep);
    transform: translateY(-70%) rotate(45deg); transition: transform .28s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--ink-soft); font-size: 14.8px; padding-bottom: 18px; margin: 0; max-width: 66ch; }

/* ------------------------------------------------------------------ footer */

.footer { background: var(--green-ink); color: rgba(255, 255, 255, .7); padding: clamp(54px, 7vw, 82px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 34px; }
.footer-grid > * { min-width: 0; }
@media (max-width: 1040px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; letter-spacing: .02em; }
.footer a { color: rgba(255, 255, 255, .7); font-size: 14.2px; }
.footer a:hover { color: var(--gold-light); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer .logo-text b { color: #fff; }
.footer p { font-size: 14.2px; }
.footer-base {
    margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .13);
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.8px;
}

/* A floating WhatsApp button, out of the way of the footer links. */
.wa-float {
    position: fixed; right: 18px; bottom: 18px; z-index: 80;
    width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
    display: grid; place-items: center; box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
    transition: transform .25s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 27px; height: 27px; }
.wa-float::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366;
    animation: ping 2.6s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

/* --------------------------------------------------------- package detail */

.pkg-hero { padding: calc(var(--nav-h) + 40px) 0 0; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--green); }

.detail-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: end; margin-bottom: 30px; }
@media (max-width: 860px) { .detail-head { grid-template-columns: 1fr; align-items: start; } }
.detail-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }

.price-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 24px 26px; box-shadow: var(--shadow-md);
}
.price-card .from { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.price-card .big { font-family: var(--font-display); font-size: 2.7rem; color: var(--green); line-height: 1.05; font-weight: 600; }
.price-card s { color: var(--faint); font-size: 15px; }
.price-card .save { color: var(--gold-deep); font-weight: 700; font-size: 13.6px; }

.shots { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: clamp(300px, 46vw, 500px); }
.shots figure { margin: 0; overflow: hidden; border-radius: var(--radius); cursor: zoom-in; position: relative; background: var(--sand); }
.shots figure:first-child { grid-row: span 2; }
.shots img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .3, 1); }
.shots figure:hover img { transform: scale(1.06); }
.shots .more {
    position: absolute; inset: 0; background: rgba(7, 26, 15, .62); color: #fff;
    display: grid; place-items: center; font-size: 15px; font-weight: 600;
}
@media (max-width: 720px) {
    .shots { grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr; height: 62vw; }
    .shots figure:first-child { grid-column: span 2; grid-row: auto; }
    .shots figure:nth-child(n+4) { display: none; }
}

.detail-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(26px, 4vw, 52px); align-items: start; }
.detail-layout > * { min-width: 0; }
@media (max-width: 980px) { .detail-layout { grid-template-columns: 1fr; } }

.tier-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.tier-table th, .tier-table td { padding: 14px 18px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--line); }
.tier-table th { background: var(--sand); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tier-table tr:last-child td { border-bottom: 0; }
.tier-table td.price { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--green); }
.tier-table td.price s { color: var(--faint); font-weight: 400; font-size: 13px; margin-right: 6px; }
.tier-table tr.popular { background: var(--gold-soft); }
.tier-table tr.popular td:first-child::after {
    content: "Paling dipilih"; margin-left: 9px; font-size: 10.5px; letter-spacing: .08em;
    text-transform: uppercase; background: var(--gold); color: #3a2a14; padding: 3px 8px; border-radius: 999px; font-weight: 800;
}

.incl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; margin-top: 26px; }
.incl {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.incl:hover { border-color: var(--gold-light); box-shadow: var(--shadow-sm); }
.incl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.incl-head svg { width: 21px; height: 21px; color: var(--gold-deep); flex: none; }
.incl-head h3 { font-size: 1.12rem; }
.incl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.incl li { font-size: 14.2px; color: var(--ink-soft); padding-left: 21px; position: relative; }
.incl li::before {
    content: ""; position: absolute; left: 2px; top: 8px; width: 9px; height: 5px;
    border-left: 1.8px solid var(--gold); border-bottom: 1.8px solid var(--gold); transform: rotate(-45deg);
}

.sticky-book { position: sticky; top: calc(var(--nav-h) + 20px); }

/* ---------------------------------------------------------------- lightbox */

.lightbox {
    position: fixed; inset: 0; z-index: 120; background: rgba(5, 17, 10, .93);
    display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none;
    transition: opacity .26s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox figcaption { color: rgba(255, 255, 255, .8); font-size: 14px; text-align: center; margin-top: 14px; }
.lb-btn {
    position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08);
    color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s ease;
}
.lb-btn:hover { background: rgba(255, 255, 255, .2); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-close { top: 18px; right: 18px; transform: none; }
.lb-btn svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- reveals */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.2, .8, .3, 1), transform .75s cubic-bezier(.2, .8, .3, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }

/* Venue names drifting past, as a quiet proof of reach. */
.marquee { overflow: hidden; padding: 26px 0; border-block: 1px solid var(--line); background: var(--white); }
.marquee-track { display: flex; gap: 46px; width: max-content; animation: drift 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
    font-family: var(--font-display); font-size: 1.3rem; color: var(--muted);
    white-space: nowrap; display: flex; align-items: center; gap: 46px;
}
.marquee span::after { content: "\2726"; color: var(--gold); font-size: .8rem; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-bg > *, .promo-bar::after, .marquee-track, .scroll-cue::after, .wa-float::before { animation: none; }
    .btn:hover, .pkg-card:hover, .value-card:hover { transform: none; }
    .pkg-card:hover .pkg-media img, .gallery figure:hover img, .shots figure:hover img { transform: none; }
}

/* ------------------------------------------------------- music control */
.music-toggle {
    position: fixed; right: 18px; bottom: 82px; z-index: 80;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line); background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(150%) blur(8px);
    display: grid; place-items: center; color: var(--green);
    box-shadow: var(--shadow-md); transition: transform .22s ease, background .22s ease, color .22s ease;
}
.music-toggle:hover { transform: scale(1.07); }
.music-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.music-toggle.is-playing { background: var(--green); color: #fff; border-color: var(--green); }

.music-off { width: 21px; height: 21px; }
.music-toggle.is-playing .music-off { display: none; }

/* Four bars that only move while something is actually playing. */
.music-bars { display: none; align-items: flex-end; gap: 2.5px; height: 17px; }
.music-toggle.is-playing .music-bars { display: flex; }
.music-bars i {
    width: 2.6px; border-radius: 2px; background: currentColor; height: 40%;
    animation: eq .9s ease-in-out infinite alternate;
}
.music-bars i:nth-child(2) { animation-delay: .18s; height: 85%; }
.music-bars i:nth-child(3) { animation-delay: .36s; height: 55%; }
.music-bars i:nth-child(4) { animation-delay: .1s; height: 70%; }
@keyframes eq { from { height: 22%; } to { height: 100%; } }

@media (max-width: 560px) {
    .music-toggle { width: 42px; height: 42px; bottom: 74px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .music-bars i { animation: none; }
    .music-toggle:hover { transform: none; }
}

/* --------------------------------------------------------- consent line */
.consent { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 20px; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--green); cursor: pointer; }
.consent span { font-size: 13.2px; color: var(--ink-soft); line-height: 1.6; }
.consent a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------- location map */
.map-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(20px, 3vw, 34px); align-items: stretch; }
.map-layout > * { min-width: 0; }
@media (max-width: 880px) { .map-layout { grid-template-columns: 1fr; } }

.map-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
}
.map-card h3 { font-size: 1.5rem; margin-bottom: 12px; }
.map-address { display: flex; gap: 9px; align-items: flex-start; font-size: 14.4px; color: var(--ink-soft); }
.map-address svg { flex: none; color: var(--gold-deep); margin-top: 3px; }

.map-info { margin: 20px 0 24px; display: grid; gap: 13px; }
.map-info div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: baseline; }
/* An e-mail or a Waze link is one long token, and a grid child at
   min-width:auto would rather push the page sideways than break it. */
.map-info dd { overflow-wrap: anywhere; }
.map-info dt { font-size: 11.4px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.map-info dd { margin: 0; font-size: 14.4px; color: var(--ink); }
.map-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: auto; }

.map-frame {
    border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
    min-height: 340px; background: var(--sand); box-shadow: var(--shadow-sm);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; filter: saturate(.92); }

/* ------------------------------------------------------------- policies */
.policy-page { padding: calc(var(--nav-h) + 44px) 0 clamp(60px, 8vw, 100px); }
.policy-layout { display: grid; grid-template-columns: 250px 1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
/* A grid child is min-width:auto, so it never shrinks below its widest
   content: the refund table's 460px minimum used to stretch its column, the
   page and the fixed bar on top of it. With the floor removed the table
   scrolls inside its own .table-wrap strip, which is what that wrapper is for. */
.policy-layout > * { min-width: 0; }
@media (max-width: 900px) { .policy-layout { grid-template-columns: 1fr; } }

.policy-nav { position: sticky; top: calc(var(--nav-h) + 20px); }
@media (max-width: 900px) { .policy-nav { position: static; } }
.policy-nav ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 2px; }
.policy-nav a {
    display: block; padding: 10px 14px; border-radius: 10px; font-size: 14px;
    color: var(--ink-soft); transition: background .18s ease, color .18s ease;
}
.policy-nav a:hover { background: var(--sand); color: var(--green); }
.policy-nav a.active { background: var(--green); color: #fff; font-weight: 600; }
.policy-contact {
    border-top: 1px solid var(--line); padding-top: 18px; font-size: 13.2px; color: var(--muted); line-height: 1.65;
}
.policy-contact p { margin: 0 0 10px; }

.policy-body { max-width: 74ch; }
.policy-body h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
.policy-date { font-size: 12.6px; color: var(--muted); margin: 10px 0 26px; }
.policy-body h3 {
    font-size: 1.22rem; margin: 34px 0 10px; color: var(--green-ink);
    padding-top: 22px; border-top: 1px solid var(--line);
}
.policy-body h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
.policy-body p { font-size: 15.2px; color: var(--ink-soft); }
/* The editor keeps no class attributes, so a plain <ul> inside a policy
   document gets the same treatment as the hand-written .policy-list did. */
.policy-list, .policy-body ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 9px; }
.policy-list li, .policy-body ul li { font-size: 14.8px; color: var(--ink-soft); padding-left: 22px; position: relative; }
.policy-list li::before, .policy-body ul li::before {
    content: ""; position: absolute; left: 3px; top: 9px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--gold);
}
.policy-note { font-size: 13.6px; color: var(--muted); font-style: italic; }

.policy-table, .policy-body table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; }
.policy-table th, .policy-table td, .policy-body table th, .policy-body table td { padding: 12px 16px; text-align: left; font-size: 14.4px; border-bottom: 1px solid var(--line); }
.policy-table th, .policy-body table th { background: var(--sand); font-size: 11.4px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.policy-table td:last-child, .policy-body table td:last-child { font-weight: 600; color: var(--green); }

.policy-foot {
    margin-top: 44px; padding: 26px 28px; border-radius: var(--radius-lg);
    background: var(--sand); border: 1px solid var(--line);
}
.policy-foot p { margin: 0 0 16px; font-size: 14.8px; }
.policy-foot-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* The refund table has two wordy columns; on a phone it scrolls sideways
   inside its own box rather than pushing the whole page out. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 18px; }
.table-wrap .policy-table { min-width: 460px; margin: 0; }
/* The price table fits a phone as it stands, so it keeps its full width and
   only scrolls if a wordy tier label ever outgrows the strip. */
.table-wrap .tier-table { margin: 0; }

/* ==========================================================================
   Batik
   A drawn field of bunga, sulur and isen behind the whole site. It sits in
   fixed pseudo-elements so nothing in the markup has to change, and every
   layer stays under the text rather than fighting it.
   ========================================================================== */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/assets/img/batik.svg");
    background-size: 168px 168px;
    opacity: .045;
}
/* Everything the reader touches sits above the field. */
body > * { position: relative; z-index: 1; }

/* The package hero is a batik panel: gold lace on deep green, the way the
   cloth is printed, with the page resuming in cream underneath it. */
.pkg-hero {
    position: relative;
    background:
        radial-gradient(900px 420px at 82% -20%, rgba(185, 150, 104, .22), transparent 60%),
        linear-gradient(155deg, var(--green-ink) 0%, var(--green-deep) 48%, var(--green) 100%);
    padding-bottom: 46px;
    margin-bottom: 26px;
    color: #f6ece4;
}
.pkg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/img/batik-lace.svg");
    background-size: 300px 300px;
    opacity: .42;
    filter: brightness(1.3);
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, rgba(0, 0, 0, .55) 75%, rgba(0, 0, 0, .25) 100%);
    mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, rgba(0, 0, 0, .55) 75%, rgba(0, 0, 0, .25) 100%);
    pointer-events: none;
}
.pkg-hero > * { position: relative; z-index: 1; }

/* Text on the panel is cream, and the gold band finishes its lower edge the
   way a batik cloth is hemmed. */
.pkg-hero h1 { color: #fff; }
.pkg-hero .lead { color: rgba(246, 236, 228, .86); }
.pkg-hero .eyebrow { color: var(--gold-light); }
.pkg-hero .crumbs, .pkg-hero .crumbs a { color: rgba(246, 236, 228, .62); }
.pkg-hero .crumbs a:hover { color: #fff; }
.pkg-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 8px;
    background:
        repeating-linear-gradient(90deg,
            var(--gold) 0 12px,
            rgba(185, 150, 104, .25) 12px 15px,
            var(--gold) 15px 18px,
            transparent 18px 30px) 0 3px / 100% 3px repeat-x,
        linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep)) 0 0 / 100% 2px repeat-x;
    opacity: .9;
    pointer-events: none;
}

/* Sand sections read as a woven panel: pattern, plus a batik border top and
   bottom so the band has an edge instead of just changing colour. */
.bg-sand { position: relative; }
.bg-sand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/img/batik-lace.svg");
    background-size: 300px 300px;
    opacity: .08;
    pointer-events: none;
}
.bg-sand > * { position: relative; z-index: 1; }
.bg-sand::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background:
        repeating-linear-gradient(90deg, var(--gold) 0 7px, transparent 7px 14px) 0 0 / 100% 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(185, 150, 104, .5), transparent) 0 2px / 100% 1px no-repeat;
    opacity: .55;
}

/* The price card lifts off the pattern instead of letting it show through. */
.price-card { position: relative; backdrop-filter: saturate(1.05); }
.price-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(150deg, rgba(185, 150, 104, .75), rgba(185, 150, 104, 0) 45%, rgba(126, 50, 65, .3));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* On a phone the same tile covers far more of the screen behind the text, so
   the field is drawn finer and fainter there. */
@media (max-width: 700px) {
    body::before { background-size: 118px 118px; opacity: .03; }
    /* On a phone the title sits right on top of the cloth, so the pattern is
       held back where the words are and comes forward below them. */
    .pkg-hero::before {
        background-size: 200px 200px;
        opacity: .3;
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .3) 34%, #000 62%);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .3) 34%, #000 62%);
    }
    .bg-sand::before { background-size: 210px 210px; opacity: .06; }
}

@media print {
    body::before, .pkg-hero::before, .pkg-hero::after, .bg-sand::before, .bg-sand::after { display: none; }
}

/* ==========================================================================
   Packages section: a dressed heading, and the four services named
   ========================================================================== */
.section-head-lux { max-width: 760px; position: relative; }
.section-head-lux h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
/* The promise sits in gold, so the eye lands on it rather than on the venue. */
.section-head-lux h2 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--gold-deep), var(--gold) 45%, #d9bd8d 70%, var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Hairlines either side of the eyebrow, the way a card is ruled. */
.eyebrow-ruled { display: flex; align-items: center; justify-content: center; gap: 14px; }
.eyebrow-ruled::before, .eyebrow-ruled::after {
    content: "";
    height: 1px;
    width: clamp(26px, 7vw, 74px);
    background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow-ruled::after { background: linear-gradient(90deg, var(--gold), transparent); }

.incl-strip {
    position: relative;
    margin: 0 auto clamp(34px, 4.5vw, 54px);
    padding: clamp(26px, 3.4vw, 40px) clamp(18px, 3vw, 40px) clamp(22px, 3vw, 34px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
/* A gold hairline frame just inside the edge: the border of a batik panel. */
.incl-strip::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(185, 150, 104, .32);
    border-radius: calc(var(--radius-lg) - 6px);
    pointer-events: none;
}
.incl-strip-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0 14px;
    background: var(--sand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    white-space: nowrap;
}

.incl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 2vw, 26px);
}
.incl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 6px 10px;
    position: relative;
}
/* Hairline between the four, never after the last. */
.incl-item + .incl-item::before {
    content: "";
    position: absolute;
    left: calc(clamp(14px, 2vw, 26px) / -2);
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--line), transparent);
}
.incl-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--green);
    background:
        radial-gradient(circle at 50% 34%, #fff, var(--gold-soft) 70%);
    box-shadow: 0 0 0 1px rgba(185, 150, 104, .45), 0 6px 16px rgba(126, 50, 65, .09);
    transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, color .2s ease;
}
.incl-icon svg { width: 26px; height: 26px; }
.incl-item:hover .incl-icon {
    transform: translateY(-3px);
    color: var(--green-deep);
    box-shadow: 0 0 0 1px var(--gold), 0 12px 24px rgba(126, 50, 65, .14);
}
.incl-text { display: flex; flex-direction: column; gap: 5px; }
.incl-text strong {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.01em;
}
.incl-text span { font-size: 13.4px; line-height: 1.6; color: var(--muted); }

@media (max-width: 860px) {
    .incl-list { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
    .incl-item:nth-child(odd)::before { display: none; }
    .incl-item + .incl-item::before { top: 6%; bottom: 6%; }
}
@media (max-width: 520px) {
    .incl-list { grid-template-columns: 1fr; }
    .incl-item { flex-direction: row; text-align: left; gap: 14px; }
    .incl-item + .incl-item::before {
        left: 0; right: 0; top: -13px; bottom: auto; width: auto; height: 1px;
        background: linear-gradient(90deg, transparent, var(--line), transparent);
    }
    .incl-icon { width: 52px; height: 52px; flex: none; }
    .incl-icon svg { width: 22px; height: 22px; }
    .incl-strip-label { font-size: 10px; letter-spacing: .12em; }
}

/* The company logo from the portal, when one is set. */
.logo-mark.has-logo {
    background: none;
    box-shadow: none;
    overflow: hidden;
    width: 44px;
    height: 44px;
}
.logo-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; }
/* On the dark hero the mark needs its own footing, not the page behind it. */
.has-hero .nav:not(.is-stuck) .logo-mark.has-logo {
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
    padding: 3px;
}
.footer .logo-mark.has-logo { background: rgba(255, 255, 255, .92); padding: 3px; }

/* ------------------------------------------------- builder text block */
/* A section someone added themselves: just words, centred to the same
   measure as every other paragraph on the page. */
.rich-body { max-width: 68ch; margin-inline: auto; color: var(--ink-soft); }
.rich-body p { font-size: clamp(1rem, 1.4vw, 1.1rem); }
.rich-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }