/* ─── TOKENS ─── */

:root {

	/* Backgrounds */
	--bg-base:        	#0a1628;
	--bg-raised:      	#1a2e4a;
	--bg-feature:     	#0d2244;
	--bg-hover:       	#2a4268;

	/* Text */
	--text-primary:   	#e8f0f8;
	--text-secondary: 	#a8b8c8;
	--white:          	#fff;

	/* Accent */
	--accent:         	#78b8f0;
	--link:           	#f8b060;
	--link-hover:     	#ffd090;

	/* Borders */
	--border:         	#000;

	/* Overlays */
	--overlay-heavy:  	rgba(10,22,40,0.97);
	--overlay-mid:    	rgba(10,22,40,0.55);
	--overlay-light:  	rgba(10,22,40,0.05);
	--overlay-dark-90:	rgba(10,22,40,0.90);
	--overlay-dark-20:	rgba(10,22,40,0.20);

	/* Typography */
	--ff-display: 'Spectral', Georgia, serif;
	--ff-body:    'Source Sans 3', sans-serif;
	--ff-mono:    'Source Code Pro', monospace;

	/* Spacing */
	--pad-xxsm: 0.5rem;
	--pad-xsm:  0.75rem;
	--pad-sm:   1rem;
	--pad-med:  1.5rem;
	--pad:      2rem;
	--pad-lg:   3rem;

	/* Type scale */
	--fs-sm:   0.9rem;
	--fs-body: 1.1rem;
	--fs-med:  1.4rem;
	--fs-lg:   1.8rem;
	--fs-xlg:  2.4rem;

	/* Letter Spacing */
	--ls-med: 0.15em;

	/* Component Sizes */
	--nav-height: 52px;
}


/* ─── RESET ─── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html  { font-size: 16px; }

body {
	background: var(--bg-base);
	color: var(--text-primary);
	font-family: var(--ff-body);
	line-height: 1.6;
	padding-top: var(--nav-height);
}

h1, h2, h3 {
	font-family: var(--ff-display);
	font-weight: 700; line-height: 1.35;
	color: var(--white);
}
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: var(--pad-sm); }
h2 { font-size: var(--fs-lg); margin-bottom: var(--pad-sm); }
h2 em { font-style: italic; color: var(--text-secondary); }
h3 { font-size: var(--fs-med); margin-bottom: var(--pad-xsm); }

p { font-size: var(--fs-body); margin-bottom: var(--pad-sm); }

img { width: 100%; height: 100%; object-fit: cover; display: block; }

a { color: var(--link); text-decoration: underline; transition: color 0.2s; }
a:hover { color: var(--link-hover); text-decoration: underline; }

.accent-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--ff-mono); font-size: var(--fs-sm); font-weight: 500;
	letter-spacing: var(--ls-med); text-transform: uppercase;
}
.accent-link-bottom { margin-top: auto; padding-top: var(--pad-sm); }




/* ─── NAV ─── */

.header-nav {
	position: fixed; top: 0; left: 0; right: 0;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 var(--pad); height: var(--nav-height);
	background: var(--bg-base);
	z-index: 100;
}
.header-nav h4 {
	font-family: var(--ff-display); text-transform: uppercase;
	font-size: var(--fs-lg); font-weight: 900; letter-spacing: var(--ls-med);
	color: var(--white); white-space: nowrap; margin: 0; padding: 0;
}
.header-nav a, footer a { color: var(--white); text-decoration: none; transition: color 0.2s; }
.header-nav a:hover, footer a:hover { color: var(--link-hover); text-decoration: none; }
.nav-responsive { display: flex; align-items: center; gap: var(--pad-lg); }
.nav-list { display: flex; gap: var(--pad); align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-list li { display: flex; }
.nav-list a {
	font-size: var(--fs-body); font-weight: 500;
	letter-spacing: var(--ls-med); text-transform: uppercase;
	display: flex; align-items: center; gap: var(--pad-xxsm);
}
.social-nav { gap: var(--pad-sm); }
.footer-nav a { font-size: var(--fs-sm); }
.nav-toggle {
	display: none; flex-direction: column; gap: 5px;
	background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text-secondary); }

/* ─── DROPDOWNS ─── */

.has-dropdown { position: relative; }
.has-dropdown > a .drop-arrow {
	font-size: var(--fs-sm); opacity: 0.6; margin-left: 2px;
	transition: transform 0.2s;
}
.has-dropdown.open > a .drop-arrow { transform: rotate(180deg); }
.dropdown {
	display: none;
	position: absolute; top: 100%; right: 0; z-index: 200;
	min-width: 180px;
	background: var(--bg-raised);
	border: 1px solid var(--border); border-top: 2px solid var(--link-hover);
	padding: var(--pad-xxsm) 0;
}
.has-dropdown.open .dropdown { display: block; }
.dropdown a {
	display: flex; align-items: center; gap: 8px; width: 100%;
	padding: var(--pad-xxsm) var(--pad-sm);
	font-size: var(--fs-sm); font-weight: 500;
	letter-spacing: var(--ls-med); text-transform: uppercase;
	color: var(--white); transition: color 0.2s, background 0.2s;
	white-space: nowrap; text-decoration: none;
}
.dropdown a:hover { color: var(--link-hover); background: var(--bg-hover); }
.dropdown-cols-2 { column-count: 2; min-width: 280px; }
.has-dropdown.open .dropdown-cols-2 { display: block; }
.page-nav-list .dropdown { left: 0; right: auto; border-top-color: var(--link-hover); }
.page-nav-list .dropdown a { text-decoration: none; }


/* ─── BUTTONS ─── */

.btn {
	font-family: var(--ff-mono); font-size: var(--fs-sm);
	letter-spacing: var(--ls-med); text-transform: uppercase;
	font-weight: 500; padding: var(--pad-xsm) var(--pad-med);
	display: inline-block; cursor: pointer;
	transition: background 0.2s, color 0.2s;
	text-decoration: none; border: none;
}
.btn-dark  { color: var(--link); background: var(--bg-base); }
.btn-dark:hover { background: var(--bg-hover); color: var(--link); text-decoration: none; }
.btn-light { color: var(--bg-base); background: var(--link); }
.btn-light:hover { background: var(--link-hover); color: var(--bg-base); text-decoration: none; }


/* ─── FOOTER ─── */

footer {
	background: var(--bg-base);
	border-top: 1px solid var(--border);
	padding: var(--pad);
	display: flex; flex-direction: column; gap: var(--pad-sm);
}
.footer-row   { display: flex; align-items: center; justify-content: space-between; }
.footer-copy { font-size: var(--fs-sm); color: var(--text-secondary); text-align: right; }


/* ─── SHARED COMPONENTS ─── */

.body-sm {
	font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary);
}
.ui-text {
	font-family: var(--ff-mono); font-size: var(--fs-sm);
	letter-spacing: var(--ls-med); text-transform: uppercase;
}
.label-row {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: var(--pad-med);
}
.label-row .label,
.label-row .section-label {
	display: flex; align-items: center; gap: 7px; margin-bottom: var(--pad-xxsm);
}
.label, .section-label {
	font-family: var(--ff-mono); font-size: var(--fs-sm); font-weight: 700;
	letter-spacing: var(--ls-med); text-transform: uppercase;
	color: var(--accent);
}
.section-label { color: var(--text-secondary); }


/* ─── SITE GRID ─── */

.site-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--border);
	width: 100%;
	border-top: 1px solid var(--border);
}

/* Column layout modifiers */
.site-grid-thirds      { grid-template-columns: repeat(3, 1fr); }
.site-grid-halves      { grid-template-columns: repeat(2, 1fr); }
.site-grid-wide-narrow { grid-template-columns: 2fr 1fr; }
.site-grid-narrow-wide { grid-template-columns: 1fr 2fr; }

/* Responsive span modifiers */
.site-grid-first-wide > :first-child { grid-column: span 2; }
.site-grid-last-wide  > :last-child  { grid-column: span 2; }

/* Orphan fix: thirds with 3 children, last spans full row at tablet */


/* ─── SITE CELL — raw layout cell for custom inner structures ─── */

.site-cell {
	background: var(--bg-base);
	padding: var(--pad);
	display: flex; flex-direction: column;
}

/* Cell appearance modifiers */
.site-cell-accent  { background: var(--bg-raised); }
.site-cell-feature { background: var(--bg-feature); }
.site-cell-nopad   { padding: 0; }

/* Cell span modifiers */
.site-cell-wide { grid-column: span 2; }
.site-cell-full { grid-column: span 3; }

/* Hero cell */
.site-cell-hero {
	position: relative; overflow: hidden;
	height: 52vh; min-height: 340px; max-height: 480px;
	display: flex; align-items: center; justify-content: center;
	padding: 0;
}


/* ─── SITE CARD — styled display cell ─── */

.site-card {
	position: relative; overflow: hidden;
	padding: var(--pad); min-height: 240px;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	text-align: center;
	/* background set by variant or jewel tone class */
}


/* ── FACT CARD VARIANT ── */

.site-card-fact::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(to top, var(--overlay-dark-90) 0%, var(--overlay-dark-20) 60%);
	z-index: -1;
}
.site-card-fact .card-text {
	font-family: var(--ff-display); font-size: var(--fs-med);
	font-weight: 400; line-height: 1.5; color: var(--white);
	position: relative; z-index: 1;
}
.site-card-fact .card-text:last-of-type { margin-bottom: 0; }


/* ── QUOTE CARD VARIANT ── */

.site-card-quote {
	background: var(--bg-feature);
}
.site-card-quote::before {
	content: ''; position: absolute; inset: 0;
	background:
		repeating-linear-gradient(90deg, rgba(91,159,212,0.04) 0, rgba(91,159,212,0.04) 1px, transparent 1px, transparent 60px),
		repeating-linear-gradient(0deg, rgba(91,159,212,0.04) 0, rgba(91,159,212,0.04) 1px, transparent 1px, transparent 60px);
	z-index: 0;
}
.site-card-quote::after {
	content: '\201C';
	font-family: var(--ff-display); font-size: clamp(6rem, 10vw, 10rem);
	font-weight: 900; line-height: 0.8;
	color: rgba(120,184,240,0.08);
	position: absolute; top: var(--pad-sm); left: var(--pad);
	z-index: 0; pointer-events: none;
}
.site-card-quote .card-quote-text p {
	font-family: var(--ff-display); font-size: var(--fs-lg);
	font-weight: 400; font-style: italic; line-height: 1.65;
	color: var(--white); position: relative; z-index: 1;
	max-width: 66.67%; margin: 0 auto var(--pad-sm);
}
.site-card-quote .card-quote-attr {
	font-family: var(--ff-mono); font-size: var(--fs-sm);
	letter-spacing: var(--ls-med); text-transform: uppercase;
	color: var(--text-secondary); position: relative; z-index: 1;
}


/* ── IMAGE CARD VARIANT ── */

.site-card-image {
	background-size: cover; background-position: center;
}
.site-card-image .card-inner {
	background: rgba(10,22,40,0.5);
	padding: var(--pad-lg);
	margin: var(--pad-lg);
	position: relative; z-index: 1;
	display: flex; flex-direction: column;
	align-items: center; gap: var(--pad-xsm);
}
.site-card-image .card-subheading {
	font-family: var(--ff-mono); font-size: var(--fs-sm);
	letter-spacing: var(--ls-med); text-transform: uppercase;
	color: var(--accent);
}
.site-card-image .card-heading {
	font-family: var(--ff-display); font-size: var(--fs-lg);
	font-weight: 700; color: var(--white);
}
.site-card-image .card-text {
	font-family: var(--ff-body); font-size: var(--fs-body);
	color: var(--text-primary);
}


/* ── CONTACT CARD VARIANT ── */

.site-card-contact {
	background: var(--bg-raised);
	align-items: stretch; justify-content: center;
}
.site-card-contact .card-heading {
	font-family: var(--ff-display); font-size: var(--fs-lg);
	font-weight: 700; color: var(--white);
	margin-bottom: var(--pad-med); text-align: center;
}
.contact-form { display: flex; flex-direction: column; gap: var(--pad-sm); width: 100%; }
.contact-form input,
.contact-form textarea {
	background: var(--bg-base); border: 1px solid var(--border);
	color: var(--text-primary); font-family: var(--ff-body); font-size: var(--fs-body);
	padding: var(--pad-xsm) var(--pad-sm);
	width: 100%; transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form button { align-self: flex-end; }


/* ─── HERO SLIDE SYSTEM ─── */

.slide {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity 0.8s ease;
}
.slide.active  { opacity: 1; z-index: 2; }
.slide-bg,
.slide-bg img  { position: absolute; inset: 0; }
.slide-content {
	position: relative; z-index: 1;
	display: flex; flex-direction: column;
	align-items: center; text-align: center;
	padding: 0 var(--pad);
}
.slide-title a { color: inherit; text-decoration: none; cursor: pointer; }
.slide-title {
	font-family: var(--ff-display);
	font-size: clamp(1.4rem, 3.5vw, 2.8rem);
	font-weight: 900; line-height: 1.2; color: var(--white);
	white-space: nowrap; margin-bottom: var(--pad-med);
}
.hero-footer {
	position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.7rem var(--pad);
	background: linear-gradient(to top, rgba(6,16,32,0.72) 0%, rgba(6,16,32,0.18) 100%);
}
.hero-dots  { display: flex; gap: 8px; align-items: center; }
.dot {
	width: 20px; height: 2px;
	background: rgba(255,255,255,0.2); cursor: pointer;
	transition: background 0.3s, width 0.3s;
}
.dot.active  { background: var(--link); width: 32px; }
.hero-cta    { display: none; }
.hero-cta.visible { display: inline-block; }


/* ─── PAGE HERO ─── */

.site-cell-heading { padding: 3rem var(--pad) 2.5rem; background: var(--bg-raised); }
.site-cell-heading h1 {
	font-family: var(--ff-display);
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 900; line-height: 1.15;
	color: var(--white); margin-bottom: var(--pad-xxsm);
}
.site-cell-heading p { font-size: var(--fs-med); color: var(--text-secondary); margin-bottom: 0; }


/* ─── NEWS ─── */

.news-list { list-style: none; margin: 0; padding: 0; }
.news-item {
	padding: var(--pad-sm) 0;
	border-bottom: 1px solid var(--border);
	display: grid; grid-template-columns: auto 1fr; gap: var(--pad-sm); align-items: start;
}
.news-item:last-child { border-bottom: none; }
.news-date {
	font-family: var(--ff-mono); font-size: var(--fs-sm);
	color: var(--text-secondary); letter-spacing: var(--ls-med);
	padding-top: 3px; white-space: nowrap;
	writing-mode: vertical-lr; transform: rotate(180deg);
	text-align: center; line-height: 1;
}


/* ─── FEATURED ─── */

.featured       { display: flex; flex-direction: column; height: 100%; }
.featured-body  { display: flex; gap: var(--pad); flex: 1; }
.featured-thumb { flex: 1; flex-shrink: 0; overflow: hidden; position: relative; }
.featured-excerpt { flex: 2; display: flex; flex-direction: column; flex-grow: 1; }
.featured .accent-link { padding-top: var(--pad-xsm); }


/* ─── PROJECTS ─── */

.project-card {
	background: var(--bg-raised);
	padding: var(--pad);
	position: relative; overflow: hidden;
	transition: background 0.25s;
	display: flex; flex-direction: column;
}
.project-card:hover { background: var(--bg-hover); }
.project-img {
	width: 100%; aspect-ratio: 16 / 9;
	margin-bottom: var(--pad-sm); overflow: hidden; position: relative;
}
.project-img img { position: absolute; inset: 0; }
.project-desc { flex-grow: 1; }


/* ─── BLOG CARDS ─── */

.card-grid { display: grid; grid-template-columns: repeat(12, 1fr); }
.card {
	position: relative; overflow: hidden;
	cursor: pointer; height: 360px;
}
.card::after {
	content: ''; pointer-events: none;
	position: absolute; left: 0; right: 0; bottom: 0;
	height: var(--pad-lg);
	background: linear-gradient(to bottom, transparent 0%, rgba(6,14,28,0.95) 100%);
	z-index: 3;
}
.card-bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	transition: transform 0.5s ease;
}
.card:hover .card-bg { transform: scale(1.03); }
.card-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top,
		var(--overlay-heavy) 0%,
		var(--overlay-mid)   50%,
		var(--overlay-light) 100%);
	transition: background 0.4s;
}
.card:hover .card-overlay {
	background: linear-gradient(to top,
		rgba(10,22,40,0.99) 0%,
		rgba(10,22,40,0.88) 70%,
		rgba(10,22,40,0.30) 100%);
}
.card-panel {
	position: absolute; overflow: hidden;
	left: 0; right: 0; bottom: 0;
	padding: var(--pad);
	z-index: 2;
	max-height: calc(100% - var(--pad));
}
.card-meta { display: flex; align-items: center; gap: var(--pad-sm); margin-bottom: var(--pad-xsm); }
.card-category { color: var(--accent); }
.card-date     { color: var(--text-secondary); }
.card-title {
	font-family: var(--ff-display); font-size: var(--fs-med); font-weight: 900;
	line-height: 1.15; color: var(--white); display: block;
	padding-bottom: var(--pad-lg);
	transition: color 0.2s, padding-bottom 0.4s ease;
}
.card:hover .card-title { color: var(--text-secondary); padding-bottom: 0; }
.card-title em { font-style: italic; color: var(--text-secondary); }
.card-excerpt {
	font-size: var(--fs-sm); line-height: 1.6; margin-top: 0;
	color: var(--text-secondary);
	max-height: 0; overflow: hidden; opacity: 0;
	transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.card:hover .card-excerpt { max-height: 240px; opacity: 1; margin-top: var(--pad-xsm); }
.card-wide   { grid-column: span 8; }
.card-narrow { grid-column: span 4; }
.card-half   { grid-column: span 6; }
.card-third  { grid-column: span 4; }


/* ─── PAGE NAV ─── */

.page-nav { background: var(--bg-feature); }
.page-nav-list {
	display: flex; align-items: center; flex-wrap: wrap;
	list-style: none; padding: 0 0 0 var(--pad); margin: 0;
}
.page-nav-item {
	position: relative; white-space: nowrap; cursor: pointer;
	color: var(--text-secondary);
}
.page-nav-item > a {
	display: block; padding: var(--pad-xsm) var(--pad-med);
	color: var(--text-secondary); text-decoration: none; transition: color 0.2s, background 0.2s;
}
.page-nav-item a:hover  { color: var(--bg-base); background: var(--link-hover); }
.page-nav-item.active a,
.page-nav-item.current a { color: var(--bg-base); background: var(--link-hover); }


/* ─── PAGINATION ─── */

.pagination {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--pad-xsm) var(--pad); background: var(--bg-feature);
}
.pagination .pagination-info { color: var(--text-secondary); }


/* ─── GEO SVG BACKGROUND SYSTEM ─── */

.geo-on-dark  {
	--geo-hi:  rgba(255,255,255,0.20);
	--geo-mid: rgba(255,255,255,0.15);
	--geo-lo:  rgba(255,255,255,0.10);
}
.geo-on-light {
	--geo-hi:  rgba(0,0,0,0.20);
	--geo-mid: rgba(0,0,0,0.15);
	--geo-lo:  rgba(0,0,0,0.10);
}
.geo-container { position: relative; }
.geo     { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.geo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.geo-content { position: relative; z-index: 1; }
.geo .hi  { stroke: var(--geo-hi);  }
.geo .mid { stroke: var(--geo-mid); }
.geo .lo  { stroke: var(--geo-lo);  }


/* ─── JEWEL TONE BG COLORS ─── */

.bg-amber      { background: radial-gradient(ellipse 70% 65% at 70% 35%, #c07808 0%, transparent 65%), linear-gradient(150deg, #201000 0%, #583800 100%); }
.bg-amethyst   { background: radial-gradient(ellipse 70% 65% at 30% 65%, #6015a0 0%, transparent 65%), linear-gradient(150deg, #1a0830 0%, #420e60 100%); }
.bg-chartreuse { background: radial-gradient(ellipse 70% 65% at 35% 70%, #709000 0%, transparent 65%), linear-gradient(150deg, #101400 0%, #304800 100%); }
.bg-cobalt     { background: radial-gradient(ellipse 70% 65% at 65% 35%, #2840c0 0%, transparent 65%), linear-gradient(150deg, #080c28 0%, #142850 100%); }
.bg-coral      { background: radial-gradient(ellipse 70% 65% at 70% 30%, #d05030 0%, transparent 65%), linear-gradient(150deg, #281008 0%, #602018 100%); }
.bg-crimson    { background: radial-gradient(ellipse 70% 65% at 30% 35%, #980820 0%, transparent 65%), linear-gradient(150deg, #280408 0%, #600818 100%); }
.bg-emerald    { background: radial-gradient(ellipse 70% 65% at 30% 65%, #0a9050 0%, transparent 65%), linear-gradient(150deg, #042814 0%, #0a6035 100%); }
.bg-forest     { background: radial-gradient(ellipse 70% 65% at 60% 40%, #286828 0%, transparent 65%), linear-gradient(150deg, #081408 0%, #204020 100%); }
.bg-hotpink    { background: radial-gradient(ellipse 70% 65% at 35% 65%, #d020a0 0%, transparent 65%), linear-gradient(150deg, #280420 0%, #601040 100%); }
.bg-indigo     { background: radial-gradient(ellipse 70% 65% at 65% 65%, #402898 0%, transparent 65%), linear-gradient(150deg, #100828 0%, #281050 100%); }
.bg-jade       { background: radial-gradient(ellipse 70% 65% at 30% 35%, #108858 0%, transparent 65%), linear-gradient(150deg, #041c10 0%, #085840 100%); }
.bg-lavender   { background: radial-gradient(ellipse 70% 65% at 60% 35%, #9060d0 0%, transparent 65%), linear-gradient(150deg, #180c28 0%, #381860 100%); }
.bg-onyx       { background: radial-gradient(ellipse 60% 60% at 60% 40%, #181028 0%, transparent 70%),  linear-gradient(150deg, #080810 0%, #100c20 100%); }
.bg-rose       { background: radial-gradient(ellipse 70% 65% at 65% 60%, #c03070 0%, transparent 65%), linear-gradient(150deg, #280818 0%, #601030 100%); }
.bg-ruby       { background: radial-gradient(ellipse 70% 65% at 70% 30%, #a01520 0%, transparent 65%), linear-gradient(150deg, #300808 0%, #600e12 100%); }
.bg-sapphire   { background: radial-gradient(ellipse 75% 65% at 25% 70%, #1535a0 0%, transparent 65%), linear-gradient(150deg, #091230 0%, #102060 100%); }
.bg-teal       { background: radial-gradient(ellipse 70% 65% at 25% 65%, #0a6068 0%, transparent 65%), linear-gradient(150deg, #041820 0%, #0a4048 100%); }
.bg-topaz      { background: radial-gradient(ellipse 70% 65% at 65% 35%, #a05010 0%, transparent 65%), linear-gradient(150deg, #281404 0%, #603010 100%); }
.bg-turquoise  { background: radial-gradient(ellipse 70% 65% at 30% 30%, #10a8a0 0%, transparent 65%), linear-gradient(150deg, #041818 0%, #085048 100%); }
.bg-violet     { background: radial-gradient(ellipse 70% 65% at 70% 65%, #7820a8 0%, transparent 65%), linear-gradient(150deg, #180828 0%, #380848 100%); }
.bg-yellow     { background: radial-gradient(ellipse 70% 65% at 60% 30%, #c0a000 0%, transparent 65%), linear-gradient(150deg, #201800 0%, #585000 100%); }


/* ─── RESPONSIVE: TABLET ≤ 900px ─── */

@media (max-width: 900px) {

	/* Grid column collapse */
	.site-grid-thirds,
	.site-grid-wide-narrow,
	.site-grid-narrow-wide { grid-template-columns: repeat(2, 1fr); }

	/* Span modifiers reset to full width */
	.site-grid-first-wide > :first-child { grid-column: span 2; }
	.site-grid-last-wide  > :last-child  { grid-column: span 2; }

	/* Thirds: 3rd child spans full row to avoid orphan */
	.site-grid-thirds > :nth-child(3) { grid-column: span 2; }

	/* Cell spans */
	.site-cell-wide,
	.site-cell-full { grid-column: span 1; }

	/* Breakout: force cell to full grid width */
	.site-cell-breakout { grid-column: 1 / -1; }

	/* Inner component adjustments */
	.featured-title { font-size: var(--fs-med); }
	.featured-thumb { max-height: 320px; }
	.card-wide, .card-narrow, .card-half { grid-column: span 12; }
	.card-third { grid-column: span 6; }

	/* Quote text full width in constrained context */
	.site-card-quote .card-quote-text { max-width: 100%; }
}


/* ─── RESPONSIVE: MOBILE ≤ 680px ─── */

@media (max-width: 680px) {
	.nav-responsive { display: none; }
	.nav-responsive.open {
		display: flex; flex-direction: column; gap: 0;
		position: absolute; top: var(--nav-height); left: 0; right: 0;
		background: var(--bg-base); border-bottom: 1px solid var(--border);
		padding: var(--pad-xxsm) 0; z-index: 200;
	}
	.nav-responsive.open .site-nav {
		display: flex; flex-direction: column; gap: 0; width: 100%; align-items: flex-start;
	}
	.nav-responsive.open .site-nav a { padding: var(--pad-xsm) var(--pad); }
	.nav-responsive.open .social-nav {
		display: flex; flex-direction: row; gap: var(--pad-sm);
		width: 100%; padding: var(--pad-xsm) var(--pad);
		border-top: 1px solid var(--border);
	}
	.nav-toggle { display: flex; }
	.dropdown {
		position: static; padding: 0; margin: 0 0 0 2rem;
		border: none; border-top: 1px solid var(--border); border-left: 2px solid var(--accent);
		background: transparent;
	}
	.nav-responsive.open .has-dropdown { width: 100%; flex-wrap: wrap; }
	.nav-responsive.open .site-nav li { display: block; }
	.dropdown a { padding: var(--pad-xxsm) var(--pad-med); }
	.has-dropdown.open .dropdown { display: block; }
}


/* ─── RESPONSIVE: MOBILE ≤ 600px ─── */

@media (max-width: 600px) {
	.site-grid-thirds,
	.site-grid-halves,
	.site-grid-wide-narrow,
	.site-grid-narrow-wide      { grid-template-columns: 1fr; }

	.site-grid-first-wide > :first-child,
	.site-grid-last-wide  > :last-child,
	.site-grid-thirds > :nth-child(3) { grid-column: span 1; }

	.site-cell { padding: var(--pad-med); }
	.site-card-quote .card-quote-text { max-width: 100%; }
	.featured-body  { flex-direction: column; }
	.featured-thumb { width: 100%; max-height: none; }
	.hero-footer    { padding: var(--pad-xsm) var(--pad-med); }
	.footer-row     { flex-wrap: wrap; gap: var(--pad-sm); }
	.footer-nav     { flex-wrap: wrap; gap: var(--pad-sm); }
	.footer-copy    { width: 100%; text-align: right; }
	.card-third     { grid-column: span 12; }
}