/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #1f1f1f;
    background: #f7f4ef;
    line-height: 1.6;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}


/* =========================================================
   VARIABLES
   CHANGE THESE TO YOUR BRAND COLOURS
========================================================= */

:root {

    --background: #f7f4ef;
    --surface: #ffffff;
    --text: #1f1f1f;
    --muted: #6d6d6d;
    --border: #d9d4cc;

    --accent: #333333;
    --accent-text: #ffffff;

    --max-width: 1100px;
}


/* =========================================================
   GENERAL
========================================================= */

.container {
    width: min(90%, var(--max-width));
    margin: 0 auto;
}

.section {
    padding: 100px 0;
}

.section-small {
    padding: 70px 0;
}

.eyebrow {
    margin: 0 0 15px;
    font-size: 13px;
    text-transform: uppercase;
}

h1,
h2,
h3 {
    margin-top: 0;
    line-height: 1.1;
}

h1 {
    font-size: 36px;
    font-weight: 500;
}

h2 {
    font-size: clamp(30px, 5vw, 65px);
    font-weight: 500;
}

h3 {
    font-size: 26px;
}

p {
    margin-top: 0;
}

.large-copy {
    font-size: clamp(20px, 2vw, 28px);
    max-width: 750px;
}


/* =========================================================
   PROGRESS BAR
========================================================= */

.progress {
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.progress-inner {
    min-height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 45px;

    font-size: 12px;
    text-transform: uppercase;
}

.progress-item {
    opacity: .35;
}

.progress-item.active {
    opacity: 1;
    font-weight: bold;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    min-height: 72vh;

    display: flex;
    align-items: flex-end;

    padding: 100px 0;

    background: #e8e2d8;
}

.hero-content {
    max-width: 950px;
}

.hero p {
    font-size: 20px;
    max-width: 600px;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.introduction {
    background: var(--background);
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}


/* =========================================================
   PACKAGE
========================================================= */

.package-section {
    background: #fff;
}

.package-heading {
    max-width: 700px;
    margin-bottom: 50px;
}

.package-card {
    border: 1px solid var(--border);
    padding: clamp(30px, 5vw, 65px);
}

.package-top {
    display: flex;
    justify-content: space-between;
    gap: 40px;

    padding-bottom: 40px;
    margin-bottom: 40px;

    border-bottom: 1px solid var(--border);
}

.package-price {
    text-align: right;
    white-space: nowrap;
}

.package-price strong {
    display: block;
    font-size: 36px;
}

.package-price span {
    color: var(--muted);
}

.inclusions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 40px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.inclusions li {
    padding: 13px 0;
    border-bottom: 1px solid #eee;
}

.inclusions li::before {
    content: "✓";
    margin-right: 10px;
}


/* =========================================================
   ADD ON
========================================================= */

.addon-section {
    background: #ddd4c6;
}

.addon-card {
    background: #fff;
    padding: clamp(30px, 5vw, 60px);

    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px;

    align-items: center;
}

.addon-price {
    font-size: 30px;
    margin-bottom: 20px;
}

.addon-note {
    color: var(--muted);
    font-size: 14px;
}


/* =========================================================
   SELECT BUTTON
========================================================= */

.select-button {
    min-width: 180px;

    border: 1px solid var(--text);
    background: transparent;

    padding: 17px 28px;

    transition: .2s ease;
}

.select-button:hover {
    background: var(--text);
    color: #fff;
}

.select-button.selected {
    background: var(--text);
    color: #fff;
}

.select-button.selected::before {
    content: "✓ ";
}


/* =========================================================
   PAYMENT
========================================================= */

.payment-section {
    background: #fff;
}

.payment-box {
    max-width: 800px;
}

.payment-display {
    margin-top: 50px;

    padding: 35px 0;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.payment-number {
    font-size: clamp(35px, 5vw, 60px);
    line-height: 1;
}


/* =========================================================
   WHAT HAPPENS NEXT
========================================================= */

.next-steps {
    background: var(--background);
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;

    margin-top: 50px;
}

.step-number {
    font-size: 13px;
    margin-bottom: 20px;
}


/* =========================================================
   FORM
========================================================= */

.form-section {
    background: #fff;
    padding-bottom: 170px;
}

.form-wrapper {
    max-width: 850px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;

    margin-top: 50px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field.full {
    grid-column: 1 / -1;
}

label {
    font-size: 13px;
    font-weight: bold;
}

input[type="text"],
input[type="email"] {

    width: 100%;

    border: 0;
    border-bottom: 1px solid var(--text);

    background: transparent;

    padding: 14px 0;

    outline: none;
}

input:focus {
    border-bottom-width: 2px;
}


/* =========================================================
   ERROR / SUCCESS
========================================================= */

.alert {
    padding: 20px;
    margin-bottom: 30px;
}

.alert-error {
    background: #f7dede;
}

.alert-success {
    background: #e1eee1;
}

.alert ul {
    margin: 0;
}


/* =========================================================
   STICKY SUBMIT BAR
========================================================= */

.sticky-submit {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 100;

    background: #fff;

    border-top: 1px solid var(--border);

    box-shadow: 0 -10px 30px rgba(0,0,0,.05);
}

.sticky-inner {

    width: min(94%, var(--max-width));
    margin: 0 auto;

    min-height: 95px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.sticky-total {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sticky-label {
    font-size: 11px;
    text-transform: uppercase;
}

.sticky-price {
    font-size: 28px;
}

.submit-button {

    border: 0;

    background: var(--accent);
    color: var(--accent-text);

    padding: 19px 40px;

    min-width: 200px;

    transition: opacity .2s ease;
}

.submit-button:hover {
    opacity: .8;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .section {
        padding: 70px 0;
    }

    .intro-grid,
    .addon-card {
        grid-template-columns: 1fr;
    }

    .package-top {
        flex-direction: column;
    }

    .package-price {
        text-align: left;
    }

    .inclusions {
        grid-template-columns: 1fr;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }

    .progress-inner {
        gap: 20px;
    }

    .sticky-inner {
        min-height: 85px;
    }

    .sticky-total {
        display: block;
    }

    .sticky-price {
        font-size: 22px;
    }

    .submit-button {
        min-width: auto;
        padding: 16px 22px;
    }

}


/* EVERGREEN PROPOSAL DESIGN */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');
:root{--background:#f5f3f0;--surface:#fff;--text:#171914;--muted:#000;--border:#d8d5ce;--accent:#152313;--accent-text:#fff;--max-width:1440px}
body{background:#f8f7f5;color:#171914;font-family:Arial,Helvetica,sans-serif}
.ev-hero,.ev-section{width:100%;margin:0}
.ev-section{padding:76px max(3%,calc((100% - 1440px)/2))}
.ev-kicker{display:none}
.ev-section h2,.ev-hero h1,.ev-section h3{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:400}
.ev-section h2{font-size:36px;line-height:1.16;margin-bottom:25px}
.ev-section h3{font-size:28px;line-height:1.2}
.ev-section p,.ev-hero p{font-size:16px;line-height:1.8}
.ev-photo{overflow:hidden;background:#d7d3ca;min-height:320px}
.ev-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ev-hero{position:relative;min-height:680px;padding:0;background:#d7d3ca;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ev-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ev-hero:after{content:'';position:absolute;inset:0;background:rgba(21,35,19,.08)}
.ev-hero-card{position:relative;z-index:1;width:min(620px,calc(100% - 48px));background:#f5f3f0;color:#171914;padding:clamp(48px,5vw,76px) clamp(36px,6vw,82px);text-align:center}
.ev-hero-card .ev-kicker{margin-bottom:34px}
.ev-hero h1{font-size:48px;line-height:1.05;margin:0 0 32px}
.ev-hero-prepared{font-size:11px!important;text-transform:uppercase;margin:0 0 14px;line-height:1.4!important}
.ev-hero-price{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-size:31px;margin-top:34px;padding-top:28px;border-top:1px solid #c9c5bd}
.ev-hero-price span{display:block;font-family:Arial,sans-serif;font-size:12px;margin-top:5px;color:#65665e}
.ev-outline{display:inline-block;padding:12px 23px;border:1px solid #171914;color:inherit;text-decoration:none;margin-top:15px}
.ev-white{border-color:white}
.ev-intro{background:#f0ede8;text-align:center;display:block;padding-top:105px;padding-bottom:105px}
.ev-intro-text{max-width:790px;margin:0 auto}.ev-intro-text h2{max-width:760px;margin-left:auto;margin-right:auto;font-size:36px}
.ev-intro-text p{max-width:690px;margin-left:auto;margin-right:auto}.ev-intro-signoff{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px!important;font-style:italic;margin-top:30px!important}
.ev-inclusions{display:block;background:#f8f7f5;color:#171914;text-align:center;padding-top:105px;padding-bottom:105px}
.ev-inclusions-copy{max-width:820px;margin:0 auto;padding:0}
.ev-inclusions-copy h2{max-width:720px;margin-left:auto;margin-right:auto;font-size:36px}
.ev-inclusions-photo{display:none}
.ev-checks{padding:0;list-style:none;margin:38px auto 34px;max-width:760px;text-align:center}
.ev-checks li{padding:5px 0;line-height:1.55;font-size:17px}
.ev-checks li:before{content:'✓ ';position:static;margin-right:4px}
.ev-fine{max-width:650px;margin:34px auto 0;font-size:13px!important;color:#000;opacity:1}
.ev-process{background:#f8f7f5}.ev-center{text-align:center;max-width:800px;margin:0 auto 55px}
.ev-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ev-process-grid article{background:#f0ede8;padding:35px 30px;min-height:245px}
.ev-process-grid article span,.ev-schedule-grid span,.ev-next-grid span{font-size:12px;}
.ev-process-grid article h3{margin:18px 0 12px}
.ev-prep{background:#eeeae3;display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center}
.ev-prep-left{max-width:650px}.ev-prep-panel{background:#152313;color:white;padding:clamp(35px,5vw,80px)}
.ev-schedule{background:#f8f7f5;display:grid;grid-template-columns:minmax(220px,.72fr) 1.55fr;gap:70px;align-items:start}
.ev-schedule-intro{max-width:330px;text-align:left;margin:0}.ev-schedule-intro h2{margin-bottom:18px}.ev-schedule-intro p{color:#000}
.ev-schedule-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ev-schedule-grid>div{background:#eeeae3;padding:34px 32px;min-height:260px;border:0}
.ev-schedule-grid>div:last-child{grid-column:1/-1;min-height:auto}
.ev-schedule-grid span{display:block;padding-bottom:0;margin-bottom:22px;border-bottom:0;font-size:12px;text-transform:uppercase}
.ev-schedule-grid h3{margin:0 0 14px;font-size:28px}
.ev-schedule-grid p{margin:0}
@media(max-width:850px){.ev-schedule{grid-template-columns:1fr;gap:35px}.ev-schedule-intro{max-width:620px}.ev-schedule-grid{grid-template-columns:1fr 1fr}}
@media(max-width:550px){.ev-schedule-grid{grid-template-columns:1fr}.ev-schedule-grid>div:last-child{grid-column:auto}}
.ev-addon{position:relative;min-height:680px;padding:80px 24px;background:#d8d3ca;display:flex;align-items:center;justify-content:center}
.ev-addon-photo{display:none}
.ev-addon-copy{width:min(680px,calc(100% - 24px));padding:clamp(48px,6vw,82px);background:#f0ede8;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ev-addon-copy h2{max-width:560px;margin-left:auto;margin-right:auto}
.ev-addon-copy h3 span{display:block;margin-top:15px}
.ev-addon-copy>p:not(.ev-kicker):not(.ev-fine){max-width:560px;margin-left:auto;margin-right:auto}
.ev-addon-copy .ev-fine{max-width:560px}
.ev-addon-copy .select-button{margin-top:18px;align-self:center}
.ev-investment{background:#152313;color:white}.ev-pricing{max-width:1050px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ev-pricing>div{border:1px solid #728070;padding:35px 40px;text-align:center}
.ev-pricing small,.ev-pricing span{display:block;font-size:12px;}
.ev-pricing strong{display:block;font:400 36px 'Cormorant Garamond',Georgia,serif;margin:20px 0 8px}
.ev-next{background:#f0ede8}.ev-next-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.ev-next-grid>div{border-top:1px solid #aaa9a2;padding-top:25px}.ev-next-grid h3{margin:22px 0 10px}
.form-section{background:#152313;color:white;padding:85px 0 150px}.form-section h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:36px;}
.form-section input[type=text],.form-section input[type=email]{background:transparent;color:white;border-bottom:1px solid #a9b1a5}
.form-section label{color:white}.form-section input:focus{outline:1px solid white;outline-offset:5px}
.sticky-submit{background:#f0ede8;box-shadow:none}.sticky-inner{width:min(94%,1440px);min-height:72px}
.sticky-price{font:400 24px 'Cormorant Garamond',Georgia,serif}.submit-button{background:#152313;padding:15px 28px}
@media(max-width:850px){.ev-inclusions,.ev-prep{grid-template-columns:1fr}.ev-hero{min-height:600px}.ev-intro{padding-top:80px;padding-bottom:80px}.ev-inclusions-copy{padding:55px 6%}.ev-inclusions-photo{height:370px;min-height:0}.ev-process-grid,.ev-schedule-grid{grid-template-columns:1fr 1fr}.ev-addon-photo{height:360px;min-height:0}.ev-next-grid{grid-template-columns:1fr 1fr}.ev-section{padding:55px 5%}.ev-inclusions{padding:0}.ev-addon{min-height:600px;padding:55px 18px}.ev-addon-copy{padding:55px 5%}}
@media(max-width:550px){.ev-hero{min-height:540px}.ev-hero-card{width:calc(100% - 36px);padding:45px 25px}.ev-hero h1{font-size:42px}.ev-process-grid,.ev-schedule-grid,.ev-next-grid,.ev-pricing{grid-template-columns:1fr}.ev-pricing>div{padding:28px}.ev-hero-photo{height:260px;min-height:260px}.sticky-price{font-size:18px}.submit-button{font-size:13px;padding:12px 15px}}

.booking-shell{width:min(900px,90%);margin:70px auto 140px}
.booking-card{background:#fff;border:1px solid var(--border);padding:clamp(30px,6vw,70px)}
.booking-card h1{font-size:clamp(30px,6vw,64px);}
.contract-content{margin-top:45px}
.contract-content h3{margin-top:38px}
.signature-wrap{margin-top:55px;padding-top:40px;border-top:1px solid var(--border)}
#signaturePad{width:100%;height:220px;border:1px solid var(--border);background:#fff;touch-action:none;display:block}
.contract-actions{display:flex;gap:15px;margin-top:18px}
.contract-actions button{padding:16px 24px;border:1px solid var(--text);background:#fff}
.contract-actions .primary{background:var(--accent);color:var(--accent-text);flex:1}
.contract-actions .primary:disabled{opacity:.45;cursor:not-allowed}
.booking-summary{background:#f7f4ef;padding:25px;margin:30px 0}
.small-muted{color:var(--muted);font-size:14px}

.vip-payment-box{
    margin-top:38px;
    padding-top:38px;
    border-top:1px solid var(--border);
}
.vip-payment-intro{
    max-width:650px;
    margin-bottom:28px;
}
.vip-payment-intro h3{
    margin-bottom:10px;
}
.vip-payment-intro p{
    color:var(--muted);
    margin-bottom:0;
}
.stripe-checkout-shell{
    width:100%;
    min-height:430px;
}
#checkout{
    width:100%;
}
.payment-note{
    margin:22px 0 0;
    padding-top:20px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:13px;
}
.payment-loading{
    padding:35px;
    background:var(--background);
    color:var(--muted);
}
@media (max-width:750px){
    .booking-shell{width:min(94%,900px);margin:35px auto 90px}
    .booking-card{padding:28px 20px}
    .vip-payment-box{margin-top:30px;padding-top:30px}
}

.logo {
    width: 200px;
    height: auto;
    margin: 0 auto 40px auto;
    display: block;
}