/* ============================================================
DEATHBED MEMORIES — GLOBAL STYLESHEET (v2, redesign)
============================================================
HOW TO EDIT THIS FILE:
- Search this file for the SECTION label you want, e.g. "COLORS"
or "BUTTONS" (Ctrl/Cmd+F).
- Colors, fonts and sizes are set ONCE as variables in section 1.
Change a value there and it updates the whole site.
- The design concept: a "trail map" motif — thin topographic
contour lines, ridge-line dividers between sections, and a
waypoint trail as in-page navigation on the homepage. It's all
drawn with CSS/SVG, so nothing here depends on photos loading.
============================================================ */
/* ---------- 1. COLORS, FONTS & SPACING (edit these first) ---------- */
:root {
/* Brand colors — from your brand deck. Change a hex code here to
change that color everywhere on the site. */
--color-dark: #1C1C1A; /* near-black — dark sections, body text */
--color-cream: #F5EDD6; /* main background */
--color-cream-2: #EDE2C4; /* slightly deeper cream, for texture/cards */
--color-terracotta: #C85C38; /* primary accent — buttons, links, warmth */
--color-forest: #4A7C59; /* secondary accent — nature, values */
--color-yellow: #D4A843; /* highlight accent, used sparingly */
--color-white: #FFFFFF;
--color-line: rgba(28,28,26,0.12); /* hairline / contour line color on light bg */
--color-line-dark: rgba(245,237,214,0.16); /* contour line color on dark bg */
/* Fonts — headers stay Georgia (your brand deck spec, loads
instantly, no download). Body uses "Inter", a free Google Font.
To swap either, change the variable AND the tag in each
HTML file's . */
--font-header: Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Font sizes — change these to resize text across the whole site */
--size-hero: clamp(2.6rem, 7vw, 5rem);
--size-h1: clamp(2rem, 4vw, 2.8rem);
--size-h2: clamp(1.6rem, 3.2vw, 2.3rem);
--size-h3: 1.25rem;
--size-body: 1.05rem;
--size-small: 0.9rem;
/* Spacing + shape */
--radius: 10px;
--radius-pill: 999px;
--max-width: 1140px;
--gap: 1.75rem;
--section-padding: 6rem;
--ease: cubic-bezier(.22,.68,0,1);
}
/* ---------- 2. RESET & BASE ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
font-family: var(--font-body);
font-size: var(--size-body);
color: var(--color-dark);
background: var(--color-cream);
line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: var(--color-terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 {
font-family: var(--font-header);
line-height: 1.12;
font-weight: normal;
letter-spacing: -0.01em;
}
.wrap {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
section { padding: var(--section-padding) 0; position: relative; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 3px solid var(--color-forest);
outline-offset: 2px;
}
/* ---------- 3. SCROLL-REVEAL (one deliberate motion, not scattered) ---------- */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > * { transition-delay: calc(var(--i, 0) * 90ms); }
/* ---------- 4. TOPOGRAPHIC TEXTURE (background contour lines) ---------- */
.topo-bg {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.95;
overflow: hidden;
}
.topo-bg svg { width: 100%; height: 100%; }
/* Ridge-line divider between sections — an SVG silhouette that reads
as a distant mountain range. Placed at the bottom of a section. */
.ridge-divider {
display: block;
width: 100%;
height: auto;
line-height: 0;
}
.ridge-divider svg { width: 100%; height: 64px; display: block; }
/* ---------- 5. NAVIGATION ---------- */
.site-header {
background: var(--color-dark);
color: var(--color-cream);
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid var(--color-line-dark);
}
.site-header::before {
content: '';
display: block;
height: 3px;
width: 100%;
background: linear-gradient(90deg, #F6A5A5, #F8C99B, #F5E39B, #A8D8B9, #9AC7E0, #C7A8DB);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.5rem;
max-width: var(--max-width);
margin: 0 auto;
}
.nav-logo {
font-family: var(--font-header);
font-size: 1.35rem;
color: var(--color-cream);
letter-spacing: 0.01em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-logo:hover { text-decoration: none; opacity: 0.85; }
.nav-logo svg { flex-shrink: 0; }
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: var(--color-cream);
font-size: var(--size-small);
opacity: 0.85;
position: relative;
padding-bottom: 4px;
}
.nav-links a:hover { opacity: 1; text-decoration: none; }
.nav-links a.active { opacity: 1; }
.nav-links a.active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: var(--color-terracotta);
}
.nav-toggle {
display: none;
background: none;
border: none;
color: var(--color-cream);
font-size: 1.6rem;
cursor: pointer;
}
@media (max-width: 780px) {
.nav-toggle { display: block; }
.nav-links {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
width: 100%;
padding: 1.5rem 1.5rem 2rem;
}
.nav-links.open { display: flex; }
.nav { flex-wrap: wrap; }
}
/* ---------- 6. HERO ---------- */
.hero {
background: var(--color-dark);
color: var(--color-cream);
padding: 7rem 0 6rem;
text-align: center;
overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; }
.hero h1 {
font-size: var(--size-hero);
color: var(--color-cream);
max-width: 17ch;
margin: 0 auto 1.4rem;
}
.hero p {
max-width: 58ch;
margin: 0 auto 2.25rem;
font-size: 1.15rem;
color: var(--color-cream);
opacity: 0.82;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-header);
font-style: italic;
color: var(--color-yellow);
margin-bottom: 1.25rem;
font-size: 1.05rem;
}
.hero-tag::before, .hero-tag::after {
content: '';
width: 28px;
height: 1px;
background: var(--color-yellow);
opacity: 0.6;
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero .ridge-divider { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; }
/* Simple hero page variant (for interior pages — no big topo bg) */
.hero-simple { padding: 5.5rem 0 5rem; text-align: left; }
.hero-simple h1 { margin: 0 0 1rem; }
.hero-simple p { margin: 0; max-width: 60ch; }
.hero-simple .hero-tag { margin-bottom: 0.85rem; }
/* ---------- 7. BUTTONS ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1.7rem;
border-radius: var(--radius-pill);
font-size: var(--size-small);
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
border: 1.5px solid transparent;
transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary {
background: var(--color-terracotta);
color: var(--color-white);
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.btn-primary:hover { background: #b34f2c; box-shadow: 0 8px 20px -8px rgba(200,92,56,0.55); }
.btn-outline {
background: transparent;
border-color: currentColor;
color: var(--color-cream);
}
.btn-outline:hover { background: rgba(245,237,214,0.08); }
.btn-outline-dark {
background: transparent;
border-color: var(--color-dark);
color: var(--color-dark);
}
.btn-outline-dark:hover { background: rgba(28,28,26,0.05); }
.btn-dark {
background: var(--color-dark);
color: var(--color-cream);
}
/* ---------- 8. SECTION HEADINGS ---------- */
.section-head {
text-align: center;
max-width: 62ch;
margin: 0 auto 3rem;
}
.eyebrow {
display: inline-block;
font-family: var(--font-header);
font-style: italic;
color: var(--color-terracotta);
margin-bottom: 0.6rem;
font-size: 1rem;
}
.section-head h2 { font-size: var(--size-h2); margin-bottom: 0.85rem; }
.section-head p { color: #55524a; }
.section-alt { background: var(--color-white); }
.section-tint { background: var(--color-cream-2); }
/* ---------- 9. CARD GRIDS ---------- */
.grid {
display: grid;
gap: var(--gap);
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
background: var(--color-white);
border-radius: var(--radius);
padding: 2rem 1.85rem;
border: 1px solid var(--color-line);
display: flex;
flex-direction: column;
gap: 0.85rem;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px -20px rgba(28,28,26,0.25);
border-color: transparent;
}
.card-icon {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-cream-2);
color: var(--color-forest);
margin-bottom: 0.25rem;
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { font-size: var(--size-h3); }
.card .price {
font-family: var(--font-header);
font-size: 1.6rem;
color: var(--color-terracotta);
}
.tag {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--color-forest);
border: 1px solid var(--color-forest);
border-radius: var(--radius-pill);
padding: 0.2rem 0.75rem;
width: fit-content;
}
/* ---------- 10. VALUES LIST ---------- */
/* ---------- 10. VALUES LIST ---------- */
.values-list {
list-style: none;
display: grid;
gap: var(--gap);
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
margin-top: 2.5rem;
}
.values-list li {
background: var(--color-white);
border-radius: var(--radius);
padding: 1.75rem 1.5rem;
border: 1px solid var(--color-line);
}
.values-list .card-icon { margin-bottom: 0.9rem; }
.values-list strong { display: block; font-family: var(--font-header); font-size: 1.15rem; margin-bottom: 0.35rem; }
.who-block {
position: relative;
background: var(--color-forest);
color: var(--color-cream);
border-radius: var(--radius);
padding: 2.25rem 2rem 2rem;
overflow: hidden;
}
.who-block p { font-size: 1.05rem; line-height: 1.7; max-width: 68ch; position: relative; z-index: 2; }
.who-block strong { font-family: var(--font-header); font-style: italic; font-weight: normal; }
.who-block .pride-squiggle { width: 160px; margin-bottom: 1rem; opacity: 0.9; }
.who-block .pride-squiggle svg { width: 100%; height: 18px; display: block; }
.who-block .who-tree {
position: absolute;
right: 1rem; bottom: -0.5rem;
width: 70px; height: auto;
}
.who-block .who-lead {
font-family: var(--font-header);
font-style: italic;
font-size: 1.2rem;
margin-bottom: 1.25rem;
position: relative;
z-index: 2;
}
.who-block .who-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
/* ---------- 11. FORMS ---------- */
form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 520px; }
label { font-size: var(--size-small); font-weight: 600; }
input, textarea, select {
font-family: var(--font-body);
font-size: 1rem;
padding: 0.8rem 0.9rem;
border: 1.5px solid #d8cead;
border-radius: var(--radius);
background: var(--color-white);
width: 100%;
transition: border-color 0.2s var(--ease);
}
input:focus, textarea:focus, select:focus { border-color: var(--color-forest); }
textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: var(--size-small); color: #666; }
.form-status { font-size: var(--size-small); font-weight: 600; }
.form-status.success { color: var(--color-forest); }
.form-status.error { color: var(--color-terracotta); }
.inline-form {
flex-direction: row;
flex-wrap: wrap;
gap: 0.75rem;
max-width: none;
}
.inline-form input { flex: 1; min-width: 220px; }
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.6rem;
margin-top: 0.5rem;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.92rem;
font-weight: normal;
cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: var(--color-terracotta);
}
/* ---------- 12. BLOG ---------- */
.blog-list { display: flex; flex-direction: column; gap: 1.25rem; }
.blog-item {
background: var(--color-white);
border-radius: var(--radius);
padding: 1.85rem 2rem;
border: 1px solid var(--color-line);
cursor: pointer;
transition: border-color 0.2s var(--ease);
}
.blog-item:hover { border-color: var(--color-terracotta); }
.blog-item h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.blog-meta { font-size: var(--size-small); color: #777; margin-bottom: 0.75rem; }
.blog-body { margin-top: 1rem; display: none; }
.blog-body.open { display: block; }
.blog-body img { border-radius: var(--radius); margin: 1rem 0; }
.blog-body p { margin-bottom: 1rem; }
/* ---------- 13. SOCIAL / RECENT CONTENT ---------- */
.social-card {
background: var(--color-white);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--color-line);
display: flex;
flex-direction: column;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.social-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -20px rgba(28,28,26,0.25); }
.social-card .platform-label {
padding: 0.85rem 1.1rem;
font-size: var(--size-small);
font-weight: 600;
background: var(--color-dark);
color: var(--color-cream);
display: flex;
align-items: center;
justify-content: space-between;
}
.social-card .embed-wrap { padding: 0; }
.social-card .link-card {
padding: 2.75rem 1.5rem;
text-align: center;
}
/* ---------- 14. SHOP ---------- */
.product-image {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: calc(var(--radius) - 2px);
background: var(--color-cream-2);
}
.hat-swatches {
display: flex;
gap: 0.65rem;
margin-top: 0.5rem;
}
.hat-swatch {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--color-line);
padding: 0;
cursor: pointer;
transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.hat-swatch:hover { transform: scale(1.1); }
.hat-swatch.active {
border-color: var(--color-white);
box-shadow: 0 0 0 2px var(--color-terracotta);
}
.hat-specs {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.85rem;
color: #55524a;
}
.hat-specs li {
padding-left: 1rem;
position: relative;
}
.hat-specs li::before {
content: '';
position: absolute;
left: 0; top: 0.55em;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--color-terracotta);
}
.shop-layout {
display: grid;
gap: var(--gap);
grid-template-columns: 1fr 1.1fr;
align-items: start;
}
.contact-layout {
display: grid;
gap: var(--gap);
grid-template-columns: 1.3fr 1fr;
align-items: start;
}
@media (max-width: 780px) {
.shop-layout, .contact-layout { grid-template-columns: 1fr; }
}
/* ---------- 15. TRAIL NAV (homepage in-page navigation) ---------- */
.trail-nav {
position: sticky;
top: 5.5rem;
z-index: 30;
background: var(--color-white);
border-bottom: 1px solid var(--color-line);
}
.trail-nav .wrap {
display: flex;
align-items: center;
gap: 0.5rem;
overflow-x: auto;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
scrollbar-width: thin;
}
.trail-stop {
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
padding: 0.5rem 1rem;
border-radius: var(--radius-pill);
font-size: var(--size-small);
font-weight: 600;
color: var(--color-dark);
border: 1px solid var(--color-line);
transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.trail-stop:hover, .trail-stop:focus-visible { text-decoration: none; border-color: var(--color-terracotta); color: var(--color-terracotta); }
.trail-stop .num {
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--color-cream-2);
font-size: 0.7rem;
}
.trail-connector { color: var(--color-line); font-size: 0.9rem; }
.trail-stop.is-active { border-color: var(--color-terracotta); color: var(--color-terracotta); background: var(--color-cream-2); }
.trail-stop.is-active .num { background: var(--color-terracotta); color: var(--color-white); }
/* ---------- 16. FOOTER ---------- */
.site-footer {
background: var(--color-dark);
color: var(--color-cream);
padding: 4rem 0 2rem;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 90px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='90'%20viewBox='0%200%20400%2090'%3E%3Cdefs%3E%3ClinearGradient%20id='sg'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0%'%20stop-color='%23141a2e'/%3E%3Cstop%20offset='100%'%20stop-color='%231C1C1A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='400'%20height='90'%20fill='url(%23sg)'/%3E%3Cg%20fill='%23F5EDD6'%3E%3Ccircle%20cx='40'%20cy='16'%20r='1'/%3E%3Ccircle%20cx='120'%20cy='10'%20r='1.1'/%3E%3Ccircle%20cx='210'%20cy='20'%20r='0.9'/%3E%3Ccircle%20cx='290'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='360'%20cy='18'%20r='0.9'/%3E%3C/g%3E%3Cpath%20d='M0,57.1%20Q0,57.1%2010,57.4%20Q20,57.7%2030,54.9%20Q40,52.0%2050,50.7%20Q60,49.4%2070,48.3%20Q80,47.1%2090,44.8%20Q100,42.5%20110,43.4%20Q120,44.2%20130,49.8%20Q140,55.4%20150,58.7%20Q160,62.0%20170,58.0%20Q180,54.0%20190,48.4%20Q200,42.9%20210,42.6%20Q220,42.3%20230,45.1%20Q240,48.0%20250,49.3%20Q260,50.6%20270,51.7%20Q280,52.9%20290,55.2%20Q300,57.5%20310,56.6%20Q320,55.8%20330,50.2%20Q340,44.6%20350,41.3%20Q360,38.0%20370,42.0%20Q380,46.0%20390,51.6%20L400,57.1%20L400,90%20L0,90%20Z'%20fill='%232f4a3a'%20opacity='0.6'/%3E%3Cpath%20d='M0,86.0%20Q0,86.0%208,83.8%20Q16,81.7%2024,73.9%20Q32,66.1%2040,63.7%20Q48,61.3%2056,63.7%20Q64,66.1%2072,63.3%20Q80,60.6%2088,56.3%20Q96,52.1%20104,57.2%20Q112,62.3%20120,72.0%20Q128,81.7%20136,84.4%20Q144,87.1%20152,83.1%20Q160,79.1%20168,73.4%20Q176,67.6%20184,61.0%20Q192,54.4%20200,52.1%20Q208,49.7%20216,55.9%20Q224,62.1%20232,68.3%20Q240,74.5%20248,73.3%20Q256,72.1%20264,71.5%20Q272,70.9%20280,76.0%20Q288,81.0%20296,81.2%20Q304,81.5%20312,72.4%20Q320,63.4%20328,56.3%20Q336,49.3%20344,50.7%20Q352,52.0%20360,57.2%20Q368,62.4%20376,68.7%20Q384,75.1%20392,80.6%20L400,86.0%20L400,90%20L0,90%20Z'%20fill='%23141a13'/%3E%3Cg%20stroke='rgba(245,237,214,0.2)'%20stroke-width='1'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M110,46%20L104,30%20M104,30%20L96,22%20M104,30%20L112,20'/%3E%3Cpath%20d='M310,58%20L304,42%20M304,42%20L296,34%20M304,42%20L312,32'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: top left;
background-size: 400px 90px;
}
.footer-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
.footer-grid h4 {
font-family: var(--font-header);
margin-bottom: 0.85rem;
color: var(--color-yellow);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a { color: var(--color-cream); opacity: 0.85; }
.footer-bottom {
border-top: 2px solid transparent;
border-image: linear-gradient(90deg, #F6A5A5, #F8C99B, #F5E39B, #A8D8B9, #9AC7E0, #C7A8DB) 1;
padding-top: 1.5rem;
font-size: var(--size-small);
text-align: center;
}
.footer-bottom p { margin: 0; color: rgba(245,237,214,0.6); }
.footer-free {
margin-top: 0.6rem !important;
color: var(--color-cream) !important;
}
.footer-free a {
color: var(--color-yellow);
font-weight: 600;
}
/* ---------- 17. UTILITIES ---------- */
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ---------- 18. BACKGROUND PHOTOS (optional, any section) ----------
Add class="has-bg-photo" plus an inline style with the image, e.g.:
A dark gradient overlay is added automatically so text stays
readable over any photo — you don't need to darken the photo
yourself. See css-editor.html's "Background Photos" section for a
tool that writes this snippet for you. */
.has-bg-photo {
position: relative;
background-size: cover;
background-position: center;
z-index: 0;
}
.has-bg-photo::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(28,28,26,0.55), rgba(28,28,26,0.8));
z-index: 0;
}
.has-bg-photo > .wrap,
.has-bg-photo .hero-inner {
position: relative;
z-index: 1;
}
.has-bg-photo h1, .has-bg-photo h2, .has-bg-photo h3,
.has-bg-photo p, .has-bg-photo .eyebrow, .has-bg-photo .hero-tag {
color: var(--color-cream);
}
.has-bg-photo .section-head p { color: var(--color-cream); opacity: 0.85; }
/* But NOT the text inside opaque white cards sitting on top of the
photo — those should stay exactly as they normally look, since
there's no photo directly behind them, just a white card. */
.has-bg-photo .card h3,
.has-bg-photo .card p,
.has-bg-photo .values-list strong,
.has-bg-photo .values-list li,
.has-bg-photo .social-card .link-card p {
color: var(--color-dark);
}
.hero-simple .wrap { position: relative; z-index: 2; }