/* ==========================
   STATIC PAGES
========================== */

.page-shell{
max-width:900px;
margin:0 auto;
padding:40px 20px 100px;
background:#fff;
}



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

.page-header{

padding-bottom:28px;

margin-bottom:50px;

border-bottom:1px solid #ececec;

}

.page-eyebrow{

font-size:.78rem;

letter-spacing:.18em;

text-transform:uppercase;

font-weight:700;

color:#B70C01;

margin-bottom:12px;

}

.page-title{

font-size:clamp(2.3rem,5vw,4rem);

line-height:1.1;

font-weight:800;

color:#000;

margin-bottom:18px;

}

.page-intro{

font-size:1.15rem;

line-height:1.8;

color:#555;

max-width:700px;

}



/* ==========================
   CONTENT
========================== */

.page-content{

font-size:1.05rem;

line-height:2;

color:#000;

}

.page-content>*{

margin-bottom:1.7rem;

}

.page-content h2{

font-size:1.8rem;

margin-top:3rem;

margin-bottom:1rem;

color:#000;

position:relative;

padding-left:18px;

}

.page-content h2::before{

content:"";

position:absolute;

left:0;

top:.35em;

width:6px;

height:1em;

background:#B70C01;

border-radius:0 8px;

}

.page-content h3{

font-size:1.25rem;

color:#970c0c;

margin-top:2rem;

}

.page-content p{

color:#000;

}

.page-content a{

color:#B70C01;

text-decoration:none;

border-bottom:1px dotted;

}

.page-content a:hover{

opacity:.8;

}



/* ==========================
   LISTS
========================== */

.page-content ul{

padding-left:0;

}

.page-content li{

list-style:none;

position:relative;

padding-left:26px;

margin-bottom:14px;

}

.page-content li::before{

content:"";

width:8px;

height:8px;

border-radius:50%;

background:#B70C01;

position:absolute;

left:0;

top:14px;

}



/* ==========================
   PAGE NOTE
========================== */

.page-note{

background:#faf7f7;

border-left:4px solid #B70C01;

padding:22px;

margin:40px 0;

border-radius:12px 0;

}

.page-note strong{

display:block;

margin-bottom:10px;

}



/* ==========================
   CONTACT LAYOUT
========================== */

.contact-grid{

display:grid;

grid-template-columns:320px minmax(0,560px);

justify-content:space-between;

gap:60px;

margin-top:50px;

}

.contact-info{

min-width:0;

padding-right:20px;

}

.contact-item{

padding:22px 0;

border-bottom:1px solid #eee;

}

.contact-item h4{

margin-bottom:8px;

font-size:.9rem;

text-transform:uppercase;

color:#000;

}

.contact-item p{

margin:0;

font-size:1rem;

}



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

.page-form{

width:100%;

max-width:560px;

display:flex;

flex-direction:column;

gap:20px;

}

.page-form input,
.page-form textarea,
.page-form select{

width:100%;

border:none;

border-bottom:1px solid #ddd;

padding:16px 0;

font-size:1rem;

background:transparent;

outline:none;

transition:border-color .2s;

}

.page-form textarea{

min-height:180px;

resize:vertical;

}

.page-form input:focus,
.page-form textarea:focus,
.page-form select:focus{

border-color:#B70C01;

}

.page-btn{

width:fit-content;

padding:15px 30px;

background:#111;

color:#fff;

border:none;

border-radius:0 14px;

cursor:pointer;

transition:.25s;

}

.page-btn:hover{

background:#B70C01;

}



/* ==========================
   LEGAL
========================== */

.legal-box{

padding:30px;

background:#fafafa;

border:1px solid #eee;

border-radius:18px 0;

margin-top:40px;

}



/* ==========================
   ADVERTISE
========================== */

.media-card{

padding:32px;

border:1px solid #eee;

border-radius:18px 0;

margin-bottom:20px;

transition:.25s;

background:#fff;

}

.media-card:hover{

transform:translateY(-3px);

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

}

.media-card h3{

margin-bottom:10px;

}



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

@media(max-width:768px){

.page-shell{

padding:28px 18px 80px;

}

.page-header{

margin-bottom:40px;

}

.page-title{

font-size:2.3rem;

}

.page-intro{

font-size:1rem;

}

.page-content{

line-height:1.9;

font-size:1rem;

}

.page-content h2{

font-size:1.5rem;

}


/* FIX */

.contact-grid{

grid-template-columns:1fr;

justify-content:initial;

gap:40px;

}

.contact-info{

padding-right:0;

}

.page-form{

max-width:100%;

width:100%;

margin:0;

}

.page-form input,
.page-form textarea,
.page-form select{

width:100%;

padding:16px 0;

font-size:16px;

box-sizing:border-box;

}

.page-btn{

width:100%;

}

.media-card{

padding:24px;

}

.legal-box{

padding:22px;

}

}