:root{--navy:#17283b;--burg:#7a2637;--gold:#b28a45;--cream:#f7f1e7;--ink:#20252b;--white:#fff}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
font:16px/1.5 Arial,sans-serif;
color:var(--ink);
background:#fff
}

h1,h2,h3{
font-family:Georgia,serif;
color:var(--navy);
margin:.2em 0
}

.wrap{
width:min(1160px,92%);
margin:auto
}

.header{
position:sticky;
top:0;
z-index:50;
background:#fff;
border-bottom:1px solid #e8dfd2
}

.head{
height:76px;
display:flex;
align-items:center;
gap:22px
}

.brand{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:var(--navy);
font-family:Georgia,serif;
font-weight:bold
}

.brand img{
width:60px;
height:52px;
object-fit:contain
}

.nav{
margin-left:auto;
display:flex;
gap:16px;
align-items:center
}

.nav a{
text-decoration:none;
color:var(--navy);
font-size:14px;
font-weight:700
}

.nav a:hover{
color:var(--burg)
}

.phone{
font-weight:700;
color:var(--burg);
white-space:nowrap
}

.ticker{
position:sticky;
top:76px;
z-index:45;
background:var(--navy);
color:#fff;
padding:7px 0;
text-align:center;
font-size:14px
}

.ticker span{
margin:0 16px
}

.hero{
background:var(--cream)
}

.hero picture{
display:block;
width:100%
}

.hero img{
width:100%;
height:auto;
display:block;
object-fit:contain
}

.hero-actions{
margin-top:-72px;
position:relative;
z-index:2;
padding-bottom:20px;
display:flex;
justify-content:center;
gap:12px
}

.btn{
display:inline-block;
background:var(--navy);
color:#fff;
text-decoration:none;
border:0;
border-radius:7px;
padding:12px 20px;
font-weight:700;
cursor:pointer
}

.btn.alt{
background:var(--burg)
}

.section{
padding:42px 0
}

.section.tinted{
background:var(--cream)
}

.center{
text-align:center
}

.lead{
font-size:18px;
max-width:820px;
margin:8px auto 20px
}

.trust{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
border-top:1px solid #d8c8ad;
border-bottom:1px solid #d8c8ad;
padding:16px 0;
color:var(--navy);
font-weight:700;
text-align:center
}

.grid2,.grid3,.grid4{
display:grid;
gap:18px
}

.grid2{
grid-template-columns:repeat(2,1fr)
}

.grid3{
grid-template-columns:repeat(3,1fr)
}

.grid4{
grid-template-columns:repeat(4,1fr)
}

.card{
background:#fff;
border:1px solid #e3d9ca;
border-radius:12px;
overflow:hidden;
box-shadow:0 5px 18px #18283b0d
}

.card img{
width:100%;
height:230px;
object-fit:cover
}

.pad{
padding:18px
}

.card h3{
font-size:22px
}

.product img{
width:100%;
height:245px;
object-fit:contain;
object-position:center;
background:#fff;
padding:8px
}

.details{
display:none;
border-top:1px solid #eee;
padding:16px
}

.product.open .details{
display:block
}

.details-grid{
display:grid;
grid-template-columns:1fr 1.3fr;
gap:18px
}

.specs{
margin:0;
padding-left:18px
}

.jump{
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap;
margin:18px 0
}

.jump a{
padding:8px 12px;
border:1px solid #d8c8ad;
border-radius:20px;
text-decoration:none;
color:var(--navy)
}

.media-placeholder{
height:260px;
border-radius:12px;
background:linear-gradient(135deg,#d8c8ad,#f7f1e7);
display:flex;
align-items:center;
justify-content:center;
color:var(--navy);
font-weight:bold
}

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

.step{
padding:18px;
background:#fff;
border:1px solid #e3d9ca;
border-radius:10px
}

.faq details{
border-bottom:1px solid #ddd;
padding:13px 0
}

.location{
padding:22px;
border:1px solid #e3d9ca;
border-radius:12px;
background:#fff
}

.map{
width:100%;
height:260px;
border:0;
border-radius:8px
}

.reviews{
display:flex;
overflow:auto;
gap:14px;
padding:6px 0
}

.review{
min-width:300px;
background:#fff;
border:1px solid #e3d9ca;
border-radius:10px;
padding:16px
}

.stars{
color:#b28a45
}

.footer{
background:var(--navy);
color:#fff;
padding:34px 0 80px
}

.footer h3{
color:#fff
}

.footer a{
color:#fff
}

.footgrid{
display:grid;
grid-template-columns:1.5fr 1fr 1.2fr;
gap:28px
}

.pagehero{
padding:52px 0 30px;
background:var(--cream);
text-align:center
}

.pagehero h1{
font-size:42px
}

.priceboxes{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px
}

.pricebox{
background:#fff;
border:1px solid #d8c8ad;
border-radius:12px;
padding:20px;
text-align:center
}

.pricebig{
font-size:32px;
font-weight:800;
color:var(--navy)
}

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

td,th{
padding:12px;
border-bottom:1px solid #ddd;
text-align:left
}

.fullscreen-board{
background:var(--cream);
min-height:100vh
}

.notice{
background:#fff8e8;
border:1px solid #e4c98c;
padding:12px;
border-radius:8px
}

.menuBtn{
display:none
}

/* TESTING PAGE IMAGES - DESKTOP */

#sigma-image,
#acid-image{
width:100%;
height:230px;
object-fit:contain;
object-position:center;
background:#fff;
padding:8px
}
@media(max-width:900px){

.nav{
display:none;
position:absolute;
top:76px;
left:0;
right:0;
background:#fff;
padding:18px;
flex-direction:column;
border-bottom:1px solid #ddd
}

.nav.show{
display:flex
}

.menuBtn{
display:block;
margin-left:auto
}

.phone{
display:none
}

.grid4,.grid3{
grid-template-columns:repeat(2,1fr)
}

.trust,.steps{
grid-template-columns:repeat(2,1fr)
}

.footgrid{
grid-template-columns:1fr
}

.priceboxes{
grid-template-columns:1fr
}

.ticker{
top:76px
}

.hero-actions{
margin-top:-20px
}

.details-grid{
grid-template-columns:1fr
}

}


@media(max-width:600px){

.grid2,.grid3,.grid4,.trust,.steps{
grid-template-columns:1fr
}

.section{
padding:30px 0
}

.pagehero h1{
font-size:34px
}

.ticker span{
margin:0 3px;
font-size:12px;
white-space:nowrap;
display:inline-flex;
align-items:center;
gap:3px;
}

.head{
height:70px
}

.ticker{
top:70px
}

.brand{
font-size:13px
}

.brand img{
width:52px
}

.hero img{
width:100%;
height:auto;
min-height:0;
object-fit:contain
}

.hero-actions{
margin-top:0;
padding-top:14px
}

.btn{
padding:11px 15px
}


/* PRODUCT MAIN IMAGE - PHONE */

.product > img{
width:100%;
height:300px;
object-fit:contain;
object-position:center;
background:#fff;
padding:10px
}


/* PRODUCT SECONDARY IMAGE - PHONE */

.product .details-grid img{
width:100%;
height:380px;
object-fit:contain;
object-position:center;
background:#fff;
padding:5px
}


/* PRODUCT DETAILS */

.product .details{
padding:14px
}

.product .details-grid{
gap:14px
}

.product .details-grid p{
font-size:16px;
line-height:1.55
}

.product .specs{
padding-left:22px
}

.product .product-call{
width:100%;
text-align:center
}

}