depending on link field population.
───────────────────────────────────────────────────────────────────────────── */
.vision-section {
padding: 120px 0;
background: #141414;
border-top: 1px solid rgba(184, 184, 184, 0.08);
border-bottom: 1px solid rgba(184, 184, 184, 0.08);
}
.vision-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.vision-text .eyebrow {
margin-bottom: 24px;
}
.vision-text h2 {
font-size: clamp(32px, 4vw, 52px);
font-weight: 800;
margin-bottom: 24px;
line-height: 1.05;
}
.vision-text h2 em {
font-style: italic;
font-weight: 500;
color: var(--silver);
}
.vision-text p {
font-size: 17px;
color: var(--silver-light);
line-height: 1.8;
font-weight: 300;
margin-bottom: 20px;
}
.vision-text p:last-of-type {
margin-bottom: 0;
}
/* Pillar teaser strip — vertical stack with 1px gap borders */
.vision-pillars {
display: flex;
flex-direction: column;
gap: 1px;
background: #b0b0b0;
}
/* Both
and variants share the same base styles */
.vision-pillar {
background: #d4d4d4;
padding: 28px 32px;
display: flex;
align-items: flex-start;
gap: 20px;
transition: background 0.2s, box-shadow 0.2s;
text-decoration: none; /* for variant */
color: inherit; /* for variant */
}
.vision-pillar:hover {
background: #dcdcdc;
box-shadow: inset 3px 0 0 var(--black);
}
/* Per-pillar left-border accent — graduated tones */
.pillar-our-sword { border-left: 3px solid #0a0a0a; }
.pillar-our-shield { border-left: 3px solid #2a2a2a; }
.pillar-our-armor { border-left: 3px solid #4a4a4a; }
.pillar-our-steed { border-left: 3px solid #6a6a6a; }
.pillar-icon {
flex-shrink: 0;
margin-top: 6px;
width:30px;
height:30px;
}
/* If using inline SVG icons: */
.pillar-icon svg {
color: #666;
}
/* If using ![]()
tags (current implementation — global grayscale filter applies): */
.pillar-icon img {
width: 30px;
height: 30px;
object-fit: contain;
filter: none;
}
.pillar-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.pillar-weapon {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #888;
font-weight: 600;
}
.pillar-virtue {
font-family: var(--serif);
font-size: 20px;
font-weight: 700;
color: var(--black);
line-height: 1.1;
}
.pillar-desc {
font-size: 13px;
color: #555;
line-height: 1.6;
font-weight: 400;
margin-top: 6px;
}
/* ─────────────────────────────────────────────────────────────────────────────
8. RESPONSIVE — TABLET (1100px)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.editorial-grid {
grid-template-columns: 1fr 260px;
gap: 56px;
}
.beliefs-grid {
grid-template-columns: repeat(2, 1fr);
}
.vision-inner {
grid-template-columns: 1fr;
gap: 56px;
}
}
/* ─────────────────────────────────────────────────────────────────────────────
9. RESPONSIVE — MOBILE (900px)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
/* Anchor strip hidden on mobile — too narrow for horizontal pills */
.page-anchors {
display: none;
}
/* Hero */
.page-hero {
padding: 72px 0 60px;
}
.page-hero h1.seo-h1 {
font-size: 1px !important; /* re-assert at mobile breakpoint */
}
.motto-pill {
padding: 8px 16px;
}
/* Editorial */
.editorial {
padding: 56px 0;
}
.editorial-grid {
grid-template-columns: 1fr;
gap: 40px;
}
/* Sidebar unsticks on mobile and flows below the editorial body */
.editorial-sidebar {
position: static;
}
.editorial-body {
font-size: 16px;
}
.editorial-body .lead {
font-size: 18px;
}
.pull-quote {
padding: 24px;
}
/* Beliefs */
.beliefs-section {
padding: 0 0 56px;
}
.beliefs-header {
margin-bottom: 36px;
}
.beliefs-grid {
grid-template-columns: repeat(2, 1fr);
}
.belief-card {
padding: 32px 24px;
}
/* Vision */
.vision-section {
padding: 64px 0;
}
.vision-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.vision-pillars {
margin-top: 0;
}
.vision-pillar {
padding: 22px 24px;
}
}
/* ─────────────────────────────────────────────────────────────────────────────
10. RESPONSIVE — SMALL PHONE (600px)
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.beliefs-grid {
grid-template-columns: 1fr;
}
.belief-card {
padding: 28px 20px;
}
.motto-pill {
flex-direction: column;
text-align: center;
gap: 8px;
}
.vision-pillar {
padding: 18px 20px;
gap: 14px;
}
.editorial-body h2 {
font-size: 24px;
}
.vision-text h2 {
font-size: 28px;
}
}