/*
* Theme Refresh: Dark / Cinematic
* Loaded after style.css — overrides colors, spacing, and transitions.
* Original style.css and template structure are left untouched.
*/

:root {
	--bg-void:        #0a0a0b;
	--bg-base:        #111113;
	--bg-raised:       rgba(255, 255, 255, .035);
	--bg-raised-hover: rgba(255, 255, 255, .06);
	--line:            rgba(255, 255, 255, .08);
	--line-soft:       rgba(255, 255, 255, .05);
	--text-primary:    #eeece6;
	--text-muted:      #a4a19b;
	--accent:          #e4a022;
	--accent-dim:      rgba(228, 160, 34, .12);
	--ease:            cubic-bezier(.22, 1, .36, 1);
}

/* Base
--------------------------------------------------*/

body {
	background: var(--bg-void);
	color: var(--text-muted);
}

body:before {
	box-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
	letter-spacing: .5px;
}

a, a:visited {
	color: var(--accent);
	transition: color .3s var(--ease);
}

a:hover, a:focus {
	color: var(--text-primary);
}

strong { color: var(--text-primary); }

::-moz-selection { background: var(--accent); color: #14100a; }
::selection { background: var(--accent); color: #14100a; }

/* Buttons
--------------------------------------------------*/

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	background-color: var(--accent);
	color: #16130b !important;
	border-radius: 3px;
	transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	background-color: #f4b73f;
	box-shadow: 0 6px 20px -6px var(--accent-dim);
	transform: translateY(-1px);
}

/* Header / Hero
--------------------------------------------------*/

#header-global[role="banner"] {
	background-color: transparent;
	padding-bottom: 0;
}

.header-background-image {
	height: 260px;
	filter: saturate(.85) brightness(.55);
}

.header-background-image:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.85) 88%, var(--bg-void) 100%);
}

#header-navigation[role="navigation"] {
	background: transparent;
	box-shadow: none;
}

#header-navigation[role="navigation"] li a,
#header-navigation[role="navigation"] li a:visited {
	letter-spacing: 1px;
	transition: color .3s var(--ease);
}

#header-navigation.is-sticky {
	background-color: rgba(10, 10, 11, .82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--line);
}

#header-global .container .row {
	margin-bottom: 0;
}

#uber-statement {
	background: none;
	color: var(--text-primary);
	font-size: 44px;
	font-weight: 300;
	letter-spacing: 4px;
	line-height: 1;
	padding: 0;
	margin-top: 60px;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .6);
}

#introduction {
	background-color: var(--bg-base);
	box-shadow: none;
	border-top: 1px solid var(--line-soft);
	padding: 40px 0;
}

/* Portfolio / Latest Work
--------------------------------------------------*/

#latest-work {
	background: var(--bg-void);
	box-shadow: none;
}

#filter {
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 4px;
	display: inline-flex;
}

#filter li {
	padding: 8px 18px;
}

#filter li a {
	letter-spacing: 1px;
	transition: color .3s var(--ease);
}

#filter li a:hover,
#filter li .current {
	color: var(--accent);
}

.project-item .project-image {
	border: 1px solid var(--line);
	border-radius: 4px;
	background-color: var(--bg-raised);
	transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}

.project-item .project-image img {
	transition: transform .8s var(--ease);
}

.project-item .project-image:hover {
	background-color: var(--bg-raised);
	border-color: var(--accent);
	box-shadow: 0 20px 45px -20px rgba(0, 0, 0, .7);
}

.project-item .project-image:hover img {
	transform: scale(1.06);
}

.project-item .project-details h2 {
	border-bottom: 1px solid var(--line);
	color: var(--text-primary);
	font-size: 20px;
}

.project-item .project-details p {
	color: var(--text-muted);
	margin-bottom: 0;
}

.project-image .overlay {
	background: rgba(8, 8, 9, .82) !important;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	transition: opacity .5s var(--ease) !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.project-image .overlay .details {
	margin-top: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.project-image .overlay [class^="icon-"] {
	color: var(--accent);
	transition: transform .5s var(--ease);
}

.project-image:hover .overlay [class^="icon-"] {
	transform: scale(1.1);
}

/* Section Dividers / Services / Quotes
--------------------------------------------------*/

#services {
	background-color: var(--bg-base);
	box-shadow: none;
	border-top: 1px solid var(--line-soft);
}

#services h2 {
	border-bottom: 1px solid var(--line);
}

#services .service {
	background-color: var(--bg-raised);
	border: 1px solid var(--line);
	border-radius: 4px;
	color: var(--text-muted);
	transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}

#services .service:hover {
	background-color: var(--bg-raised-hover);
	border-color: var(--accent);
	box-shadow: none;
	transform: translateY(-3px);
}

#section-divider-2,
#section-divider-3 {
	background-color: var(--bg-void);
}

#section-divider-2 .bg2,
#section-divider-3 .bg3 {
	filter: brightness(.4) saturate(.8);
}

.logos h2 {
	color: var(--text-primary);
}

#quotes blockquote,
#quotes blockquote p {
	color: var(--text-primary);
}

#quotes cite {
	color: var(--text-muted);
}

/* Footer
--------------------------------------------------*/

#footer-global[role="contentinfo"] {
	background: var(--bg-base);
	border-top: 1px solid var(--line-soft);
}

#footer-global[role="contentinfo"] a:hover {
	color: var(--accent);
}

#contact-details {
	color: var(--text-muted);
}

.social-icons.footer li {
	background-color: var(--bg-raised);
	border: 1px solid var(--line);
	transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.social-icons.footer li:hover {
	background-color: var(--accent-dim);
	border-color: var(--accent);
	transform: translateY(-2px);
}

#copyright-details {
	color: var(--text-muted);
	opacity: .7;
}

/* Fancybox (Lightbox) — darker, smoother
--------------------------------------------------*/

.fancybox-overlay {
	background: rgba(4, 4, 5, .94) !important;
}

.fancybox-wrap,
.fancybox-inner {
	transition: opacity .3s var(--ease);
}

/* Scrollbar polish (WebKit)
--------------------------------------------------*/

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--bg-void);
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .15);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent);
}