/* ---------- NAVIGATION BAR ---------- */
:root {
--copper: #b87333;
--copper-light: #c88b3c;
}
.nav-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0.8rem 1.5rem;
}

.nav-logo {
color: #ffffff;
font-weight: 700;
font-size: 1.2rem;
text-decoration: none;
}

.nav-links {
list-style: none;
display: flex;
gap: 1.5rem;
}

.nav-links a {
color: #ffffff;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}

.nav-links a:hover {
color: #00c389; /* coastal green accent */
}

.nav-btn {
background: #00c389;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 600;
}

.nav-btn:hover {
background: #00d698;
color: #fff;
}

/* Adjust hero padding to avoid nav overlap */
.hero {
padding-top: 5rem;
}
/* ---------- HERO SECTION ---------- */
.hero {
position: relative;
width: 100%;
height: 85vh;
overflow: hidden;
}

.hero-bg {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.hero-overlay {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
padding: 0 1rem;
background: rgba(0, 0, 0, 0.35);
}

.hero-title {
color: #fff;
font-size: 3rem;
letter-spacing: 1px;
margin-bottom: 1rem;
text-transform: uppercase;
}

.hero-subtitle {
color: #fff;
font-size: 2rem;
margin-bottom: 1rem;
font-weight: 600;
}

.hero-text {
color: #f5f5f5;
max-width: 900px;
font-size: 1.1rem;
line-height: 1.6;
}

/* =========================================================
Community Savings Solution — Main Stylesheet
Author: Timothy Murphy
========================================================= */

/* ---------- GLOBAL RESET ---------- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
color: #222;
background: #fafafa;
line-height: 1.6;
}

/* ---------- HEADER ---------- */
header {
background: #f3f3f3;
text-align: center;
padding: 2rem 1rem;
border-bottom: 3px solid #d9d9d9;
}

header h1 {
font-size: 2rem;
color: #222;
letter-spacing: 0.5px;
}

/* ---------- MAIN LAYOUT ---------- */
main {
padding-bottom: 4rem;
}

.container {
max-width: 1100px;
margin: 0 auto;
padding: 2rem;
}

/* ---------- FEATURE SECTION ---------- */
.feature-section {
background: #e8f0f3;
border-radius: 10px;
padding: 4rem 2rem;
margin: 2rem auto;
}

.feature-text h2 {
font-size: 1.8rem;
color: #00334e;
margin-bottom: 1rem;
}

.feature-text p {
font-size: 1rem;
color: #333;
max-width: 700px;
}

/* ---------- SERVICES SECTION ---------- */
.services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
margin-top: 3rem;
text-align: center;
}

.service img {
height: 64px;
width: auto;
object-fit: cover;
margin-bottom: 1rem;
}

.service h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: #00334e;
}

.service p {
font-size: 0.95rem;
color: #333;
}

/* ---------- TESTIMONIAL SECTIONS ---------- */
.testimonial.secondary {
background: #1d2935;
color: #fff;
padding: 4rem 2rem;
margin-top: 4rem;
}

.testimonial.tertiary {
background: #eef2f3;
padding: 4rem 2rem;
margin-top: 4rem;
border-radius: 10px;
}

.two-col {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2rem;
}

.two-col .col {
flex: 1 1 45%;
}

.two-col img {
width: 100%;
border-radius: 10px;
}

/* ---------- CORNWALL SECTION (SECONDARY) ---------- */
.testimonial.secondary h2 {
font-size: 1.6rem;
margin-bottom: 1rem;
}

.testimonial.secondary p {
color: #eee;
margin-bottom: 1.5rem;
}

.button-outline {
display: inline-block;
border: 2px solid #fff;
padding: 0.6rem 1.2rem;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s ease;
}

.button-outline:hover {
background: #fff;
color: #1d2935;
}

/* ---------- QUOTE SECTION (TERTIARY) ---------- */
.quote-icon {
width: 56px;
height: 56px;
margin-bottom: 1rem;
}

blockquote {
font-style: italic;
font-size: 1.1rem;
margin-bottom: 1rem;
color: #00334e;
}

.author {
font-weight: bold;
color: #222;
}

/* ---------- SUBSCRIBE SECTION ---------- */
.subscribe {
text-align: center;
margin-top: 4rem;
}

.subscribe h2 {
font-size: 2rem;
color: #00334e;
margin-bottom: 1rem;
}

.subscribe p {
max-width: 500px;
margin: 0 auto 2rem;
color: #333;
}

.subscribe-form {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}

.subscribe-form input {
padding: 0.8rem;
width: 260px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 1rem;
}

.subscribe-form button {
padding: 0.8rem 1.5rem;
border: none;
background: #00334e;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}

.subscribe-form button:hover {
background: #005f86;
}

/* ---------- FOOTER ---------- */
footer {
background: #f3f3f3;
text-align: center;
padding: 2rem 1rem;
border-top: 3px solid #d9d9d9;
font-size: 0.9rem;
color: #333;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
.two-col {
flex-direction: column;
}

.feature-section,
.testimonial.secondary,
.testimonial.tertiary {
padding: 2.5rem 1.2rem;
}

header h1 {
font-size: 1.6rem;
}

.feature-text h2 {
font-size: 1.4rem;
}
}
/* ---------- TYPOGRAPHIC QUOTE SYMBOL ---------- */
.quote-symbol {
font-size: 3rem;
color: #00334e;
margin-bottom: 0.5rem;
line-height: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Chair & The Beginning | Community Savings Solution</title>
<link rel="stylesheet" href="assets/css/style.css" />
</head>

<body>
<header class="page-header">
<a href="index.html" class="back-home">← Home</a>
</header>

<main id="chairperson" aria-label="The Chair and Incorporation">
<section class="intro">
<h1>Everything Begins With the Chair</h1>
<p>
A company can be incorporated on paper in a day.
But a living enterprise begins only when a Chairperson steps forward —
someone who carries purpose, steadiness, and the will to execute.
</p>
<p>
On <strong>14 August 2025</strong>, Community Savings Solution Ltd was incorporated.
That date marks not a registration, but a declaration:
the beginning of a new class of company whose capital exists to empower and restore.
</p>
</section>

<section class="story">
<h2>The Who and the What</h2>
<p>
Success depends on two simultaneous forces: <strong>the Who</strong> and <strong>the What</strong>.
The Who — our Chairperson — embodies moral clarity and determination.
The What — our architecture of CTINS, BAC, and CSS — turns that clarity into execution.
</p>
<figure>
<img
src="assets/img/who-is-our-chairperson-set.jpg"
alt="Who is our Chairperson?"
/>
<figcaption>Everything comes together with our Chairperson.</figcaption>
</figure>
</section>

<section class="reflection">
<h2>Breaking Is Remaking</h2>
<p>
Incorporation was fire and glass — a breaking and a remaking.
Like the Waterford craftsmen who heat the crystal before shaping it,
we endured the furnace so that what emerges holds light.
</p>
<p>
The act of incorporation completed the circle of intent that began
when one saver imagined dignity restored to saving.
</p>
</section>

<footer class="page-footer">
<p>
<small>
Community Savings Solution Ltd — Incorporated 14 Aug 2025 · Registered in England & Wales
</small>
</p>
</footer>
</main>
</body>
</html>
/* ---------- LAYOUT BALANCE: WIDE + CENTRED ---------- */

/* Keep the hero and Cornwall imagery full width */
.hero,
.alignfull,
.hero img {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}

/* Centre the main reading sections for balance */
main > section,
.wp-block-group.alignwide,
.wp-block-columns.alignwide,
.services,
.subscribe,
.testimonial,
.footer {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}

/* Maintain generous vertical rhythm */
section {
padding-top: 3rem;
padding-bottom: 3rem;
}

/* Hero text spacing tweak so nav doesn’t overlap */
.hero h1,
.hero p {
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* ---------- HORIZON & HEATHER REFINEMENT ---------- */
/* Lift the transparent nav header a bit higher and lighten opacity */
.nav-header {
top: 0;
background: rgba(0, 0, 0, 0.35); /* slightly lighter */
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
/* Ensure hero section starts a touch lower so horizon clears */
.hero {
padding-top: 6rem; /* previously 5rem */
display: flex;
flex-direction: column;
align-items: flex-start; /* text begins left side */
justify-content: center;
min-height: 90vh;
padding-left: 8%;
}
/* Shift hero text inland (left on desktop) and keep responsive */
.hero h1,
.hero p {
text-align: left;
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
max-width: 600px;
}
/* Add a soft fade at bottom to transition into white content area */
.hero::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 15vh;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #ffffff 100%);
pointer-events: none;
}
/* ---------- FREE THE HORIZON ---------- */

/* Lift the nav bar completely off the image area */
.nav-header {
position: relative; /* instead of fixed */
background: transparent; /* fully clear */
backdrop-filter: none;
box-shadow: none;
z-index: 10;
}

/* Give the hero its own breathing space above */
.hero {
margin-top: -2rem; /* pull image up slightly */
padding-top: 2rem; /* small inner top space */
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 95vh;
background-size: cover;
background-position: center;
position: relative;
}

/* Re-colour the text to keep contrast over bright sky */
.hero h1,
.hero p {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* ---------- LIFTED NAV, CLEAR HORIZON ---------- */

/* Float the nav high over the hero image */
.nav-header {
position: fixed;
top: 1rem; /* lift slightly from top edge */
left: 0;
width: 100%;
z-index: 1000;
background: rgba(0, 0, 0, 0.25); /* light transparent tint */
backdrop-filter: blur(4px);
padding: 0.6rem 0;
box-shadow: none;
}

/* Keep site name and tabs visible and balanced */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}

/* Create more vertical space so hero text doesn’t hide behind nav */
.hero {
padding-top: 8rem; /* gives breathing room under header */
min-height: 95vh;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background-size: cover;
background-position: center;
position: relative;
}

/* Keep hero text readable over sky */
.hero h1,
.hero p {
color: #ffffff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
max-width: 700px;
text-align: left;
}
/* ---------- LIFTED NAV, CLEAR HORIZON ---------- */

/* Float the nav high over the hero image */
.nav-header {
position: fixed;
top: 1rem; /* lift slightly from top edge */
left: 0;
width: 100%;
z-index: 1000;
background: rgba(0, 0, 0, 0.25); /* light transparent tint */
backdrop-filter: blur(4px);
padding: 0.6rem 0;
box-shadow: none;
}

/* Keep site name and tabs visible and balanced */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}

/* Create more vertical space so hero text doesn’t hide behind nav */
.hero {
padding-top: 8rem; /* gives breathing room under header */
min-height: 95vh;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background-size: cover;
background-position: center;
position: relative;
}

/* Keep hero text readable over sky */
.hero h1,
.hero p {
color: #ffffff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
max-width: 700px;
text-align: left;
}
/* ---------- RETURN TO MISSION LINK ---------- */
.return-footer {
text-align: center;
padding: 3rem 1rem;
background: #f7f7f7;
border-top: 1px solid #ddd;
}

.return-link {
color: #00334e;
font-weight: 600;
text-decoration: none;
font-size: 1.1rem;
transition: color 0.3s ease, transform 0.3s ease;
}

.return-link:hover {
color: #00c389; /* coastal green accent */
transform: translateX(-4px);
}
/* ---------- CHAIRPERSON PAGE HERO IMAGE ---------- */
.chair-hero {
margin: 0 0 2rem 0;
text-align: center;
}

.chair-hero img {
width: 100%;
max-width: 1100px;
border-radius: 10px;
object-fit: cover;
display: block;
margin: 0 auto;
}
/* ---------- INTENTION → EXISTENCE SECTION ---------- */
.reflection {
background-color: #faf7f2; /* soft ivory */
border-left: 6px solid #b87333; /* copper accent bar */
padding: 3rem 2rem;
margin: 3rem 0;
border-radius: 10px 0 0 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.reflection h2 {
color: #00334e; /* deep Cornish blue */
margin-top: 0;
margin-bottom: 1rem;
}
.reflection p {
line-height: 1.7;
color: #333;
margin-bottom: 1rem;
max-width: 850px;
}
/* ---------- OUR MISSION PAGE ---------- */
#mission-page {
padding: 3rem 1rem 4rem;
max-width: 900px;
margin: 0 auto;
}

.mission-intro {
background-color: #ffffff;
padding: 2.5rem 2rem;
border-left: 6px solid #b87333; /* copper accent */
border-radius: 10px 0 0 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.mission-intro h1 {
color: #00334e;
font-size: 2.2rem;
margin-bottom: 1rem;
text-align: center;
}

.mission-intro p {
line-height: 1.8;
color: #333;
margin-bottom: 1rem;
font-size: 1.05rem;
text-align: center;
}

.mission-intro strong {
color: #b87333;
}
/* ---------- MILESTONES PAGE ---------- */
#milestones-page {
padding: 3rem 1rem 5rem;
}

.milestones-hero img {
width: 100%;
border-radius: 10px;
margin-bottom: 1rem;
}

.milestones-hero h1 {
text-align: center;
color: #00334e;
margin-bottom: 0.5rem;
}

.milestones-hero p {
text-align: center;
color: #444;
max-width: 800px;
margin: 0 auto 2rem;
}

.milestones-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 1000px;
margin: 0 auto 3rem;
}

.milestones-grid article {
background: #fff;
padding: 1.5rem;
border-left: 6px solid #b87333;
border-radius: 8px 0 0 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.milestones-grid h2 {
color: #00334e;
margin-bottom: 0.5rem;
}

.milestones-grid p {
color: #333;
line-height: 1.6;
}

.milestones-cta {
text-align: center;
max-width: 900px;
margin: 0 auto;
}

.milestones-cta img {
width: 100%;
border-radius: 10px;
margin-bottom: 1rem;
}

.milestones-cta h2 {
color: #00334e;
}

.cta-button {
display: inline-block;
margin-top: 1rem;
background: #b87333;
color: #fff;
padding: 0.7rem 1.2rem;
border-radius: 6px;
text-decoration: none;
}
/* ---------- JOHN DOERR PAGE ---------- */
#john-doerr-page {
padding: 3rem 1rem 5rem;
max-width: 900px;
margin: 0 auto;
text-align: center;
}

.doerr-intro img {
width: 100%;
border-radius: 10px;
margin-bottom: 1rem;
}

.doerr-intro h1 {
color: #00334e;
margin-bottom: 1rem;
}

.doerr-intro p {
color: #444;
line-height: 1.8;
}

.doerr-gallery {
display: flex;
justify-content: center;
gap: 1rem;
margin: 2rem 0;
flex-wrap: wrap;
}

.doerr-gallery img {
width: 45%;
border-radius: 8px;
}

.doerr-core {
margin-top: 2rem;
}

.doerr-core h2 {
color: #00334e;
margin-bottom: 1rem;
}

.doerr-core figure {
margin: 2rem auto;
max-width: 700px;
}

.doerr-core img {
width: 100%;
border-radius: 8px;
}

.doerr-core figcaption {
font-size: 0.9rem;
color: #555;
margin-top: 0.5rem;
}

.doerr-quote {
margin: 3rem auto;
font-size: 1.4rem;
font-style: italic;
color: #00334e;
}

.doerr-quote footer {
font-size: 1rem;
font-weight: 600;
color: #b87333;
margin-top: 0.5rem;
}

.doerr-closing {
margin-top: 3rem;
line-height: 1.8;
}

.doerr-closing p {
color: #333;
}

.doerr-closing .cta-button {
display: inline-block;
margin-top: 1.5rem;
background: #b87333;
color: #fff;
padding: 0.8rem 1.5rem;
border-radius: 6px;
text-decoration: none;
}
/* ---------- JOHN DOERR PAGE (v1.8.2) ---------- */
#john-doerr-page {
padding: 3rem 1rem 5rem;
max-width: 900px;
margin: 0 auto;
text-align: center;
}

.doerr-intro img {
width: 85%; /* reduced from 100% */
border-radius: 10px;
margin-bottom: 1rem;
box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

.doerr-intro h1 {
color: #00334e;
margin-bottom: 1rem;
font-size: 2rem;
}

.doerr-intro p {
color: #444;
line-height: 1.8;
font-size: 1.05rem;
}

.doerr-gallery {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 1rem;
margin: 2rem auto;
flex-wrap: wrap;
}

.doerr-gallery img {
width: 38%; /* smaller images, side-by-side */
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.doerr-core {
margin-top: 2.5rem;
}

.doerr-core h2 {
color: #00334e;
margin-bottom: 1rem;
}

.doerr-core figure {
margin: 2rem auto;
max-width: 550px; /* narrower chart */
}

.doerr-core img {
width: 100%;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.doerr-core figcaption {
font-size: 0.9rem;
color: #555;
margin-top: 0.5rem;
}

.doerr-quote {
margin: 3rem auto;
font-size: 1.4rem;
font-style: italic;
color: #00334e;
}

.doerr-quote footer {
font-size: 1rem;
font-weight: 600;
color: #b87333;
margin-top: 0.5rem;
}

.doerr-closing {
margin-top: 3rem;
line-height: 1.8;
}

.doerr-closing p {
color: #333;
}

.doerr-closing .cta-button {
display: inline-block;
margin-top: 1.5rem;
background: #b87333;
color: #fff;
padding: 0.8rem 1.5rem;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
}
/* ---------- JOHN DOERR PAGE (v1.8.3) ---------- */
#john-doerr-page {
padding: 3rem 1rem 5rem;
max-width: 900px;
margin: 0 auto;
text-align: center;
}

/* Intro image – slightly reduced from full */
.doerr-intro img {
width: 80%;
border-radius: 10px;
margin-bottom: 1rem;
box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

/* Main heading and intro paragraph */
.doerr-intro h1 {
color: #00334e;
margin-bottom: 1rem;
font-size: 2rem;
}

.doerr-intro p {
color: #444;
line-height: 1.8;
font-size: 1.05rem;
}

/* Gallery (portraits + book cover) */
.doerr-gallery {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 1rem;
margin: 2rem auto;
flex-wrap: wrap;
}

.doerr-gallery img {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Specific image sizing */
.doerr-gallery img:nth-child(1) {
width: 40%; /* John Doerr portrait */
}

.doerr-gallery img:nth-child(2) {
width: 25%; /* Book cover – much smaller now */
}

/* OKR chart section */
.doerr-core {
margin-top: 2.5rem;
}

.doerr-core h2 {
color: #00334e;
margin-bottom: 1rem;
}

.doerr-core figure {
margin: 2rem auto;
max-width: 400px; /* much smaller now */
}

.doerr-core img {
width: 100%;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.doerr-core figcaption {
font-size: 0.9rem;
color: #555;
margin-top: 0.5rem;
}

/* Quote block */
.doerr-quote {
margin: 3rem auto;
font-size: 1.4rem;
font-style: italic;
color: #00334e;
}

.doerr-quote footer {
font-size: 1rem;
font-weight: 600;
color: #b87333;
margin-top: 0.5rem;
}

/* Closing */
.doerr-closing {
margin-top: 3rem;
line-height: 1.8;
}

.doerr-closing p {
color: #333;
}

.doerr-closing .cta-button {
display: inline-block;
margin-top: 1.5rem;
background: #b87333;
color: #fff;
padding: 0.8rem 1.5rem;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
}
/* ---------- COPPER BAND QUOTE STYLE ---------- */
.doerr-quote {
margin: 4rem auto;
padding: 2rem 1rem;
background: linear-gradient(90deg, #b87333, #c5853c, #b87333);
color: #fff;
font-size: 1.5rem;
font-style: italic;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
max-width: 800px;
}

.doerr-quote footer {
display: block;
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
color: #fff;
opacity: 0.9;
}
/* ---------- COPPER & GOLD QUOTE (v1.8.5) ---------- */
.doerr-quote {
margin: 4rem auto;
padding: 2rem 1rem;
background: linear-gradient(90deg, #b87333, #c88b3c, #b87333);
color: #fff;
font-size: 1.5rem;
font-style: italic;
border-radius: 10px;
box-shadow:
0 0 20px rgba(255, 215, 0, 0.35), /* golden glow */
0 4px 15px rgba(0, 0, 0, 0.25); /* depth shadow */
max-width: 800px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.doerr-quote:hover {
transform: scale(1.02);
box-shadow:
0 0 25px rgba(255, 215, 0, 0.5),
0 6px 20px rgba(0, 0, 0, 0.3);
}

.doerr-quote footer {
display: block;
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
color: #fff;
opacity: 0.9;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* ---------- JOIN PAGE (v1.9-A) ---------- */
#join-page {
padding: 3rem 1rem 5rem;
max-width: 950px;
margin: 0 auto;
text-align: center;
}

.join-hero {
position: relative;
margin-bottom: 2rem;
}

.join-hero img {
width: 100%;
height: auto;
border-radius: 10px;
opacity: 0.85;
}

.join-hero-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-shadow: 0 2px 5px rgba(0,0,0,0.6);
width: 90%;
}

.join-hero-text h1 {
font-size: 2.4rem;
margin-bottom: 0.5rem;
}

.join-hero-text p {
font-size: 1.1rem;
max-width: 650px;
margin: 0 auto;
}

.join-page section {
margin-bottom: 3rem;
}

#join-page h2 {
color: #00334e;
margin-bottom: 0.8rem;
}

#join-page p {
color: #333;
line-height: 1.8;
font-size: 1.05rem;
margin-bottom: 1rem;
}

.join-closing {
background: linear-gradient(90deg, #b87333, #c88b3c, #b87333);
color: #fff;
padding: 2rem 1rem;
border-radius: 10px;
box-shadow:
0 0 20px rgba(255,215,0,0.35),
0 4px 15px rgba(0,0,0,0.25);
font-size: 1.2rem;
}

.join-closing p {
color: #fff;
margin: 0;
}
.join-hero-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff; /* <— ensure white text */
text-shadow: 0 2px 5px rgba(0,0,0,0.6);
width: 90%;
}
/* ============================================================
COPPER UNIFICATION SYSTEM — v1.0 MASTER-by-CHAT
============================================================ */

/* --- GLOBAL BUTTON STYLE --- */
a.back-home,
a.return-link,
.cta-button {
display: inline-block;
background: var(--copper);
color: #fff;
padding: 0.6rem 1.4rem;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
letter-spacing: 0.3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
transition: all 0.25s ease;
}

a.back-home:hover,
a.return-link:hover,
.cta-button:hover {
background: var(--copper-light);
box-shadow: 0 0 10px rgba(200,139,60,0.6);
transform: translateY(-1px);
}

/* --- TRANSPARENT VARIANT FOR HERO HEADERS --- */
header.page-header a.back-home {
background: rgba(184,115,51,0.75);
backdrop-filter: blur(4px);
}

/* --- FOOTER ACCENT LINE + SIGNATURE STYLE --- */
footer.return-footer {
text-align: center;
padding: 2rem 1rem 1rem;
border-top: 2px solid var(--copper);
color: #333;
font-size: 0.95rem;
}

footer.return-footer p.signature {
color: var(--copper);
font-style: italic;
margin-top: 0.5rem;
font-size: 0.9rem;
}
footer.return-footer p.signature a {
color: var(--copper);
text-decoration: none;
transition: color 0.3s ease;
}

footer.return-footer p.signature a:hover {
color: var(--copper-light);
text-decoration: underline;
}