:root{
    --bg:#e5e5e5;           /* light gray outside */
    --card:#faf7f3;
    --gold:#c9a46b;
    --accent:#c98867;
    --green:#506454;
    --border:#ddd0c2;
    --page:#f5f0ea;         /* cream page color */
	
	--ivory:#F8F4EC;
    --ivory-deep:#DCCEB4;   /*  #EEE7D8;  */
    --forest: #385E46;        /*    #1F4230 */
    --forest-soft:#4E6E5C;
    --cinnamon:#A65E2E;
    --cinnamon-deep:#8A4A20;
    --walnut:#3A3128;
    --stitch:#C2A37E;
	--ink-mid:#5A4A38;
    
}


*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:30px 15px 15px 15px;
    background:var(--bg);
    color:#2d2d2d;
    font-family:'Montserrat',sans-serif;
}

/* Main page container */
.page-wrapper{
   	width:100%;
    background:#f5f0ea;
    border-radius:24px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    overflow:hidden;
}

.container{
    width:100%;
    max-width:100%;
    padding:0 20px;
    margin:0 auto;
}

header{
    text-align:center;
    padding:60px 20px 30px;
}

.topline{
    color:#c99c80;
    letter-spacing:4px;
    font-size:12px;
    font-weight:600;
}

h1{
    font-family:'Cormorant Garamond',serif;
    font-size:72px;
    margin:15px 0;
}

.tagline{
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-size:28px;
    color:#8a7b70;
}

nav{
    margin-top:30px;
}

nav a{
    color:#333;
    text-decoration:none;
    margin:0 20px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:2px;
}

nav a:hover{
    color:var(--accent);
}



/* phone nav menu */
.menu-toggle{
    display:none;
}

@media (max-width:768px){

    .menu-toggle{
        display:block;
        margin:20px auto;
        padding:12px 20px;
        border:none;
        background:var(--accent);
        color:white;
        border-radius:8px;
    }

    #mainNav{
        display:none;
    }

    #mainNav.active{
        display:flex;
        flex-direction:column;
    }
}



/* content */

.divider{
    margin:35px auto;
    color:var(--gold);
    font-size:20px;
}

.card{
    background:var(--card);
    border:1px solid var(--border);
    padding:40px;
    margin-bottom:40px;
	margin-right:60px;
	margin-left:60px;
}

.section-title{
    color:var(--green);
    font-family:'Cormorant Garamond',serif;
    font-size:42px;
    margin-top:0;
}

.hero{
    text-align:center;
    padding:80px 30px;
}

.hero p{
    max-width:700px;
    margin:auto;
    line-height:1.8;
}

.btn{
    display:inline-block;
    background:var(--accent);
    color:white;
    padding:15px 35px;
    text-decoration:none;
    margin-top:25px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.btn:hover{
    opacity:.9;
}

.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:15px;
}

.gallery img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--border);
    transition:.3s;
}

.gallery img:hover{
    transform:scale(1.03);
}

footer{
    text-align:center;
    padding:40px;
    color:#777;
}

.contact-form{
    max-width:700px;
    margin:auto;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:15px;
    border:1px solid var(--border);
    margin-bottom:15px;
    background:white;
}

.contact-form button{
    background:var(--accent);
    color:white;
    border:none;
    padding:15px 35px;
    cursor:pointer;
}





/* for order form */
.top-label{
    text-align:center;
    letter-spacing:4px;
    color:#c6987b;
    font-size:12px;
    font-weight:600;
    margin-bottom:20px;
}

h1{
    text-align:center;
    font-family:'Cormorant Garamond',serif;
    font-size:64px;
    font-weight:500;
    margin:0;
}

.subtitle{
    text-align:center;
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-size:28px;
    color:#967f70;
    margin-top:10px;
}

.divider{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:40px auto;
    max-width:700px;
}

.divider::before,
.divider::after{
    content:'';
    flex:1;
    border-top:1px solid var(--border);
}

.divider span{
    margin:0 15px;
    color:var(--gold);
    font-size:20px;
}

.card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:4px;
    padding:30px;
    margin-bottom:30px;
}

.question-number{
    color:var(--gold);
    letter-spacing:3px;
    font-size:12px;
    font-weight:700;
    margin-bottom:10px;
}

.question-title{
    font-family:'Cormorant Garamond',serif;
    font-size:38px;
    color:var(--green);
    margin-bottom:15px;
}

.question-divider{
    border:none;
    border-top:1px solid var(--border);
    margin-bottom:20px;
}

.option{
    display:block;
    border:1px solid var(--border);
    background:#fff;
    padding:18px;
    margin-bottom:14px;
    cursor:pointer;
    transition:.2s;
}

.option:hover{
    background:#fdfaf7;
}

.option input{
    margin-right:10px;
}

.option-title{
    font-weight:600;
}

.option-sub{
    display:block;
    /*margin-left:24px;*/
    margin-top:4px;
    color:#777;
    font-size:13px;
}
.option-price{
	color:var(--cinnamon);
}

.notice{
    border:1px solid #b8c3b9;
    border-left:4px solid #4f6858;
    background:#fbfcfb;
    padding:25px;
    margin-bottom:30px;
	margin-right:60px;
	margin-left:60px;
}

.notice h3{
    margin-top:0;
    font-family:'Cormorant Garamond',serif;
    font-size:32px;
    color:#4f6858;
}

.badge{
    display:inline-block;
    background:#4f6858;
    color:white;
    padding:6px 10px;
    font-size:13px;
    font-weight:700;
    margin-top:10px;
}

.submit-wrap{
    text-align:center;
    margin:40px 0;
}

.submit-btn{
    background:var(--accent);
    color:white;
    border:none;
    padding:18px 50px;
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    cursor:pointer;
}

.submit-btn:hover{
    opacity:.9;
}

.footer{
    text-align:center;
    color:#8a8a8a;
    letter-spacing:3px;
    font-size:12px;
    margin-top:40px;
}

.success{
    background:#e8f6ea;
    border:1px solid #94c39d;
    padding:15px;
    margin-bottom:20px;
}

@media (max-width:768px){

    h1{
        font-size:44px;
    }

    .question-title{
        font-size:28px;
    }

    .page{
        padding:5px;
    }
	.submit-btn{
    background:var(--accent);
    color:white;
    border:none;
    padding:4px 2px;
    font-size:8px;
    text-transform:uppercase;
    cursor:pointer;
}
}


/* ==========================================
   TABLETS
========================================== */

@media screen and (max-width: 992px) {



    h1{
        font-size:54px;
    }

    .tagline{
        font-size:22px;
    }

    .card{
        padding:30px;
		margin-bottom:12px;
		margin-right:12px;
		margin-left:12px;
    }

    .section-title{
        font-size:36px;
    }
}






/* ==========================================
   PHONES
========================================== */

@media screen and (max-width: 768px) {
	body{padding:0px;}

    .container{
        width:100%;
        padding:0 8px;
        margin:0;
    }

    .page-wrapper{
        margin:4px;
        border-radius:8px;
    }

    header{
        padding:30px 15px 20px;
    }

    h1{
        font-size:40px;
        line-height:1.1;
    }

    .tagline{
        font-size:20px;
    }

    .topline{
        letter-spacing:2px;
        font-size:11px;
    }

    nav{
        display:flex;
        flex-direction:column;
        gap:12px;
        margin-top:20px;
    }

    nav a{
        margin:0;
        padding:10px;
        border:1px solid var(--border);
        border-radius:8px;
        background:white;
    }

    .card{
        padding:12px;
        margin-bottom:12px;
		margin-right:12px;
		margin-left:12px;
    }

    .section-title{
        font-size:30px;
        line-height:1.2;
    }

    .hero{
        padding:20px 10px;
    }

    .hero p{
        font-size:15px;
        line-height:1.7;
    }

    .btn{
        display:block;
        width:100%;
        text-align:center;
    }

    .contact-form input,
    .contact-form textarea{
        font-size:16px;
        padding:14px;
    }

    .contact-form button{
        width:100%;
        font-size:16px;
        padding:16px;
    }
}

/* ==========================================
   SMALL PHONES
========================================== */

@media screen and (max-width: 480px) {
	
	body{padding:0px;}

    h1{
        font-size:32px;
    }

    .tagline{
        font-size:18px;
    }

    .section-title{
        font-size:26px;
    }

   .container{
        padding:0 4px;
    }

    .card{
        padding:10px;
    }

    .hero{
        padding:15px 8px;
    }

    footer{
        padding:25px 15px;
        font-size:14px;
    }
}
/*
.hero.card{
    margin-left:-4px;
    margin-right:-4px;
}
*/

/* estimator ---------------------------------------------*/
h2 {
  text-align: center;
}
 .wrap{max-width:880px;margin:0 auto;padding:0 22px;
 }
   section{padding:46px 0;}
  .section-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--cinnamon);
    text-align:center;
  }
  .estimator{
    background:var(--forest);
    color:var(--ivory);
    border-radius:8px;
    padding:36px 30px 30px;
    margin-top:34px;
  }
  .estimator .section-label{color:var(--stitch);}
  .estimator h2{color:var(--ivory);}
  .est-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:26px;
  }
  @media (max-width:600px){.est-grid{grid-template-columns:1fr;}}
  .field label{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:.74rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--stitch);
    margin-bottom:6px;
  }
  .field input[type=number], .field select, .field textarea{
    width:100%;
    padding:11px 12px;
    border-radius:4px;
    border:1px solid var(--forest-soft);
    background:var(--card);
    color:var(--walnut);
    font-family:'Karla',sans-serif;
    font-size:1rem;
  }
  .field textarea{ 
  box-sizing: border-box;
  border-radius: 4px;
    min-height:15px;
    resize:vertical;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:3px solid var(--stitch);
    outline-offset:1px;
  }
  .field-note{
    margin:8px 0 0;
    font-size:.9rem;
  }
  .field-note a{
    color:var(--stitch);
    font-weight:600;
  }
  .checks{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 18px;
  }
  @media (max-width:600px){.checks{grid-template-columns:1fr;}}
  .checks label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:.95rem;
    cursor:pointer;
  }
  .checks input[type=checkbox]{margin-top:4px;accent-color:var(--cinnamon);width:17px;height:17px;}
  .checks select{
    width:100%;
    padding:9px;
    border-radius:4px;
    border:1px solid var(--forest-soft);
    font-family:'Karla',sans-serif;
    font-size:.95rem;
  }
  .est-total{
    margin-top:28px;
    border-top:3px dashed var(--stitch);
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px;
  }
  .est-total .label{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:1.05rem;
  }
  .est-total .amount{
    font-family:'IBM Plex Mono',monospace;
    font-size:2rem;
    color:var(--card);
  }
  .est-breakdown{
    margin-top:14px;
    font-family:'IBM Plex Mono',monospace;
    font-size:.8rem;
    color:var(--stitch);
    line-height:1.9;
  }
  .est-disclaimer{
    margin-top:16px;
    font-size:.85rem;
    color:#B9C6BD;
  }

  /* email-estimate form */
  .send-block{
    margin-top:26px;
    border-top:3px dashed var(--stitch);
    padding-top:24px;
  }
  .send-block h3{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1.2rem;
    color:var(--ivory);
  }
  .send-block .hint{font-size:.9rem;color:#B9C6BD;margin-top:4px;}
  .send-grid{
    display:inline;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:16px;
	 }
  @media (max-width:600px){.send-grid{grid-template-columns:1fr;}}
  .send-grid .full{grid-column:1 / -1;}
  .send-grid input, .send-grid textarea{
    width:100%;
    padding:11px 12px;
    border-radius:4px;
    border:1px solid var(--forest-soft);
    background:var(--card);
    color:var(--walnut);
    font-family:'Karla',sans-serif;
    font-size:1rem;
  }
  .send-grid textarea{min-height:80px; resize:vertical;}
  .send-grid input:focus, .send-grid textarea:focus{outline:3px solid var(--stitch);outline-offset:1px;}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .send-btn{
    margin-top:16px;
    background:var(--cinnamon);
    color:#fff;
    border:none;
    border-radius:4px;
    padding:13px 28px;
    font-family:'Karla',sans-serif;
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
  }
  .send-btn:hover{background:var(--cinnamon-deep);}
  .send-btn:focus-visible{outline:3px solid var(--stitch);outline-offset:2px;}
  .send-btn[disabled]{opacity:.6;cursor:wait;}
  .send-status{margin-top:12px;font-size:.95rem;min-height:1.4em;}
  .send-status.ok{color:#CDE3D2;}
  .send-status.err{color:#F2C4A8;}

  .fineprint{
    max-width:640px;
    margin:34px auto 0;
    font-size:.92rem;
  }
  .fineprint p{margin-bottom:12px;}
  .fineprint strong{color:var(--forest);}
  .ship-note{
    grid-column:1 / -1;
    background: var(--ivory-deep);
    border:1px solid rgba(74,94,79,.22);
    border-left:4px solid var(--cinnamon) ;
    border-radius:3px;
    padding:14px 18px;
    font-size:14.5px;
    color:var(--ink-mid);
  }
  .ship-note strong{ color:var(--sage); }
  
  
  .consent{
    grid-column:1 / -1;
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:4px;
    background:var(--ivory-deep);
    cursor:pointer;
    font-size:14.5px;
	color:var(--ink-mid);
  }
  .consent input{
    width:19px; height:19px; min-width:19px;
    margin-top:3px;
    accent-color:var(--rose);
    cursor:pointer;
  }
  .custState {
	  color:var(--ink-mid);
  }
    .fineprint{
    max-width:640px;
    margin:34px auto 0;
    font-size:.92rem;
  }
  .fineprint p{margin-bottom:12px;}
  .fineprint strong{color:var(--forest);}
  
  
  /* ADD ONS */
 
 
  .price{
    font-family:'IBM Plex Mono',monospace;
    font-weight:500;
    color:var(--cinnamon-deep);

  }
  .price small{
    font-size:.72rem;
    color:var(--forest-soft);
    letter-spacing:.04em;
  }

.red{
	color:var(--cinnamon);
	font-size:.72rem;
	margin-left: 14px;
}

 .logo{
    display:block;
    margin:0 auto;
    width:100%;
    max-width:350px;
    height:auto;
}

@media screen and (max-width:480px){
    .logo{
        max-width:180px;
    }
} 



/* Admin pages */
.admin-wrap{
    padding:30px 20px 50px;
}

.admin-card{
    max-width:520px;
    margin:40px auto;
}

.admin-form label,
.admin-fields label{
    /*display:block;*/
    margin:16px 0 6px;
    font-weight:600;
    color:var(--green);
}

.admin-form input,
.admin-fields input,
.admin-fields select,
.admin-fields textarea{
   /* width:90%;*/
    padding:12px;
    border:1px solid var(--border);
    background:#fff;
    font:inherit;
}

.admin-header,
.admin-detail-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

.admin-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.admin-table th,
.admin-table td{
    padding:12px;
    border:1px solid var(--border);
    text-align:left;
}

.admin-table th{
    background:#faf7f3;
}

.admin-table a{
    color:var(--green);
    font-weight:600;
}

.admin-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.admin-actions .submit-btn{
    padding:12px 18px;
}

.admin-secondary{
    background:var(--green);
}

.error{
    background:#fff1f1;
    border:1px solid #d98c8c;
    padding:12px;
    color:#7f1d1d;
}

@media print{
    body{
        background:#fff;
        padding:0;
    }

    .page-wrapper{
        box-shadow:none;
        border-radius:0;
    }

    .admin-actions{
        display:none;
    }
}

@media screen and (max-width:768px){
    .admin-header,
    .admin-detail-bar{
        align-items:flex-start;
        flex-direction:column;
		gap:4px;
		 margin-bottom:4px;
    }
	

	
	

    .admin-table{
        font-size:14px;
    }
}

.admin-upload-form{
    max-width:620px;
    background:#fff;
    border:1px solid var(--border);
    padding:24px;
}

.admin-upload-form label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
    color:var(--green);
}

.admin-upload-form input[type="text"],
.admin-upload-form input[type="file"]{
    /*display:block;
    width:90%;*/
    padding:14px;
    margin-bottom:18px;
    border:1px solid var(--border);
    background:#faf7f3;
}

/* image deletes */

.thumb-container{
    position:relative;
    width:140px;
    float:left;
    margin:8px;
}

.imgthumbs{
    width:140px;
    height:auto;
    display:block;
    border-radius:6px;
    cursor:pointer;
    border:1px solid #ccc;
}

.delete-form{
    margin:0;
}

.delete-icon{

    position:absolute;
    top:5px;
    right:5px;

    width:28px;
    height:28px;

    border:none;
    border-radius:50%;

    background:rgba(180,0,0,.85);
    color:white;

    cursor:pointer;

    font-size:16px;
    line-height:28px;
    text-align:center;

    transition:.2s;
}

.delete-icon:hover{
    background:#ff0000;
    transform:scale(1.15);
}

.delete-icon:focus{
    outline:none;
}