/* =========================================
ABOUT PAGE – PAGE-SPECIFIC STYLES ONLY
DOES NOT AFFECT HOME / INDEX / WELCOME
========================================= */

/* HERO */
.about-hero {
padding: 90px 60px 60px;
background: radial-gradient(
900px 500px at 20% 10%,
#1f1f1f 0%,
#121212 55%
);
}

.about-container {
max-width: 1100px;
margin: 0 auto;
}

.about-tagline {
color: #c9a24d;
letter-spacing: 2px;
font-size: 13px;
text-transform: uppercase;
margin-bottom: 18px;
}

.about-hero h1 {
font-size: 44px;
color: #ffffff;
margin-bottom: 16px;
}

.about-intro {
max-width: 700px;
font-size: 17px;
color: #d6d6d6;
line-height: 1.7;
}

/* SECTIONS */
.about-section {
padding: 80px 60px;
}

.about-section.soft {
background-color: #202020;
}

.about-section h2 {
color: #c9a24d;
font-size: 28px;
margin-bottom: 24px;
border-bottom: 1px solid #3a2f1b;
padding-bottom: 10px;
}

.about-section p {
max-width: 780px;
color: #d6d6d6;
line-height: 1.7;
margin-bottom: 16px;
}

/* ANATOMY */
.anatomy-line {
margin-top: 18px;
color: #c9a24d;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
}

.anatomy-tagline {
margin-top: 8px;
color: #aaa;
font-size: 14px;
}

.anatomy-image {
margin-top: 40px;
text-align: center;
}

.anatomy-image img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 4px;
border: 1px solid #3a2f1b;
}

/* RESPONSIVE */
@media (max-width: 900px) {

.about-hero {
padding: 60px 28px 40px;
}

.about-section {
padding: 60px 28px;
}

.about-hero h1 {
font-size: 36px;
}

}