/* =============================================================================
   ANDRE WELLS CUSTOM THEME — MAIN STYLESHEET
   =============================================================================

   Table of Contents:
   1.  CSS Custom Properties (Design Tokens)
   2.  Reset & Base
   3.  Typography
   4.  Layout Utilities
   5.  Buttons
   6.  Forms
   7.  Header
   8.  Mobile Navigation
   9.  Footer
   10. Page Hero
   11. Home Page
   12. About Page
   13. Contact Page
   14. Gallery Page
   15. Blog Archive
   16. Single Post
   17. 404 Page
   18. Responsive — Tablet (max 999px)
   19. Responsive — Mobile (max 689px)
   ============================================================================= */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================================= */
:root {
	--color-primary:      #8f9194;
	--color-primary-dark: #c9a84c;
	--color-text:         #70707e;
	--color-heading:      #030306;
	--color-border:       #DFDFE2;
	--color-bg-light:     #F4F4F5;
	--color-bg-lighter:   #FBFBFB;
	--color-white:        #ffffff;

	--font-base:          'Afacad Flux', sans-serif;

	--site-width:         1290px;
	--side-pad:           5vw;

	--header-height:      120px;
	--transition:         0.3s ease;
}


/* =============================================================================
   2. RESET & BASE
   ============================================================================= */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family:  var(--font-base);
	font-size:    16px;
	line-height:  1.65;
	color:        var(--color-text);
	background:   var(--color-white);
	-webkit-font-smoothing: antialiased;
	margin:  0;
	padding: 0;
	width:   100%;
}

#main-content {
	display: block;
	width:   100%;
}

img, svg {
	display: block;
	max-width: 100%;
}

ul, ol {
	list-style: none;
}

a {
	color:           var(--color-primary);
	text-decoration: none;
	transition:      color var(--transition);
}

a:hover {
	color: var(--color-primary-dark);
}

::selection {
	background: var(--color-primary);
	color:      var(--color-white);
}


/* =============================================================================
   3. TYPOGRAPHY
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family:  var(--font-base);
	color:        var(--color-heading);
	line-height:  1.5;
	font-weight:  400;
}

h1 { font-size: 40px; }
h2 { font-size: 35px; }
h3 { font-size: 30px; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; font-weight: 700; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }


/* =============================================================================
   4. LAYOUT UTILITIES
   ============================================================================= */
.container {
	max-width:     var(--site-width);
	margin-left:   auto;
	margin-right:  auto;
	padding-left:  clamp(16px, 2vw, 28px);
	padding-right: clamp(16px, 2vw, 28px);
}

.section {
	padding-top:    80px;
	padding-bottom: 80px;
	/* No horizontal padding — .container inside provides it */
}

.section--dark {
	background: var(--color-heading);
	color:      var(--color-white);
}

.section--light {
	background: var(--color-bg-light);
}

.section--lighter {
	background: var(--color-bg-lighter);
}

.text-center { text-align: center; }
.text-white  { color: var(--color-white); }

.section-label {
	display:        block;
	font-size:      12px;
	font-weight:    600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--color-primary);
	margin-bottom:  12px;
}

.section-title {
	margin-bottom: 16px;
}

.section-desc {
	max-width:     560px;
	margin-bottom: 40px;
}


/* =============================================================================
   4b. BLOCK CONTENT & ALIGNMENTS
   ============================================================================= */

/* Full-width page/post content wrapper */
.page-content,
.entry-content {
	width: 100%;
}

/* WordPress alignfull — break out to viewport width */
.page-content .alignfull,
.entry-content .alignfull,
.wp-block-stackable-columns.alignfull,
.wp-block-group.alignfull,
.wp-block-cover.alignfull {
	width:        100vw;
	max-width:    100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* WordPress alignwide */
.page-content .alignwide,
.entry-content .alignwide {
	width:        calc(100% + 10vw);
	max-width:    calc(100% + 10vw);
	margin-left:  -5vw;
	margin-right: -5vw;
}


/* =============================================================================
   5. BUTTONS
   ============================================================================= */
.btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	font-family:     var(--font-base);
	font-size:       15px;
	font-weight:     500;
	line-height:     1;
	padding:         14px 28px;
	min-height:      50px;
	border:          2px solid transparent;
	border-radius:   0;
	cursor:          pointer;
	transition:      background var(--transition), color var(--transition), border-color var(--transition);
	text-decoration: none;
}

.btn--primary {
	background: var(--color-primary);
	color:      var(--color-white);
	border-color: var(--color-primary);
}

.btn--primary:hover {
	background:   var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color:        var(--color-white);
}

.btn--ghost {
	background:   transparent;
	color:        var(--color-white);
	border-color: var(--color-white);
}

.btn--ghost:hover {
	background: var(--color-white);
	color:      var(--color-heading);
}

.btn--ghost-dark {
	background:   transparent;
	color:        var(--color-heading);
	border-color: var(--color-heading);
}

.btn--ghost-dark:hover {
	background: var(--color-heading);
	color:      var(--color-white);
}


/* =============================================================================
   6. FORMS
   ============================================================================= */
.form-field {
	margin-bottom: 20px;
}

.form-field label {
	display:        block;
	font-size:      12px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom:  6px;
	color:          var(--color-heading);
}

.form-field input,
.form-field textarea,
.form-field select {
	width:         100%;
	height:        50px;
	padding:       0 16px;
	font-family:   var(--font-base);
	font-size:     16px;
	color:         var(--color-heading);
	background:    var(--color-white);
	border:        1px solid var(--color-border);
	border-radius: 0;
	outline:       none;
	transition:    border-color var(--transition);
}

.form-field textarea {
	height:     170px;
	padding:    14px 16px;
	resize:     vertical;
}

.form-field input:focus,
.form-field textarea:focus {
	border-color: var(--color-primary);
}

/* WPForms overrides */
.wpforms-container .wpforms-form .wpforms-field input,
.wpforms-container .wpforms-form .wpforms-field textarea,
.wpforms-container .wpforms-form .wpforms-field select {
	font-family:   var(--font-base) !important;
	border-radius: 0 !important;
	border-color:  var(--color-border) !important;
	height:        50px !important;
}

.wpforms-container .wpforms-form .wpforms-field textarea {
	height: 170px !important;
}

.wpforms-container .wpforms-form .wpforms-field input:focus,
.wpforms-container .wpforms-form .wpforms-field textarea:focus {
	border-color: var(--color-primary) !important;
}

.wpforms-container .wpforms-form .wpforms-submit-container .wpforms-submit {
	background:    var(--color-primary) !important;
	border-radius: 0 !important;
	font-family:   var(--font-base) !important;
	font-size:     15px !important;
	font-weight:   500 !important;
	padding:       14px 28px !important;
	height:        auto !important;
	min-height:    50px !important;
	border:        none !important;
	transition:    background var(--transition) !important;
}

.wpforms-container .wpforms-form .wpforms-submit-container .wpforms-submit:hover {
	background: var(--color-primary-dark) !important;
}


/* =============================================================================
   7. HEADER
   ============================================================================= */
.site-header {
	position:   fixed;
	top:        0;
	left:       0;
	right:      0;
	z-index:    1000;
	height:     var(--header-height);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
	transition: background var(--transition), box-shadow var(--transition), height var(--transition);
}

.site-header.is-solid {
	background: var(--color-white);
	box-shadow: 0 10px 20px rgba(43, 61, 79, 0.05);
}

.site-header.is-sticky {
	background: var(--color-heading);
	height:     80px;
}

.header-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	height:          100%;
}

.site-logo img {
	height:    48px;
	width:     auto;
	max-width: 250px;
	object-fit: contain;
	filter:    brightness(0) invert(1);
	transition: filter var(--transition);
}

.site-header.is-solid .site-logo img {
	filter: none;
}

.site-header.is-sticky .site-logo img {
	filter: brightness(0) invert(1);
}

/* Nav */
.site-nav .nav-menu {
	display: flex;
	gap:     40px;
}

.site-nav .nav-menu li a {
	font-size:   16px;
	font-weight: 500;
	color:       rgba(255, 255, 255, 0.85);
	transition:  color var(--transition);
	padding:     4px 0;
	position:    relative;
}

.site-nav .nav-menu li a::after {
	content:    '';
	position:   absolute;
	bottom:     0;
	left:       0;
	width:      0;
	height:     2px;
	background: var(--color-primary);
	transition: width var(--transition);
}

.site-nav .nav-menu li a:hover,
.site-nav .nav-menu li.current-menu-item a {
	color: var(--color-white);
}

.site-nav .nav-menu li a:hover::after,
.site-nav .nav-menu li.current-menu-item a::after {
	width: 100%;
}

.site-header.is-solid .site-nav .nav-menu li a {
	color: var(--color-text);
}

.site-header.is-solid .site-nav .nav-menu li a:hover,
.site-header.is-solid .site-nav .nav-menu li.current-menu-item a {
	color: var(--color-primary);
}

.site-header.is-sticky .site-nav .nav-menu li a {
	color: rgba(255, 255, 255, 0.75);
}

.site-header.is-sticky .site-nav .nav-menu li a:hover {
	color: var(--color-white);
}

/* Hamburger */
.nav-toggle {
	display:        none;
	flex-direction: column;
	gap:            5px;
	background:     none;
	border:         none;
	cursor:         pointer;
	padding:        6px;
}

.nav-toggle span {
	display:    block;
	width:      24px;
	height:     2px;
	background: var(--color-white);
	transition: all var(--transition);
}

.site-header.is-solid .nav-toggle span {
	background: var(--color-heading);
}

.nav-toggle.is-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
	opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}


/* =============================================================================
   8. MOBILE NAVIGATION
   ============================================================================= */
.mobile-nav-overlay {
	display:    none;
	position:   fixed;
	inset:      0;
	background: rgba(0, 0, 0, 0.5);
	z-index:    1100;
	opacity:    0;
	transition: opacity var(--transition);
}

.mobile-nav-overlay.is-visible {
	display: block;
	opacity: 1;
}

.mobile-nav {
	position:   fixed;
	top:        0;
	right:      -320px;
	width:      300px;
	height:     100vh;
	background: rgba(18, 21, 25, 0.98);
	z-index:    1200;
	padding:    80px 40px 40px;
	transition: right var(--transition);
	overflow-y: auto;
}

.mobile-nav.is-open {
	right: 0;
}

.mobile-nav-close {
	position:   absolute;
	top:        20px;
	right:      24px;
	background: none;
	border:     none;
	color:      var(--color-white);
	font-size:  28px;
	cursor:     pointer;
	line-height: 1;
}

.mobile-nav-menu li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav-menu li a {
	display:     block;
	padding:     14px 0;
	font-size:   20px;
	font-weight: 700;
	color:       var(--color-white);
}

.mobile-nav-menu li a:hover {
	color: var(--color-primary);
}


/* =============================================================================
   9. FOOTER
   ============================================================================= */
.site-footer {
	background: var(--color-heading);
	color:      rgba(255, 255, 255, 0.7);
}

.footer-top {
	padding:       70px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	/* .container inside provides horizontal padding */
}

.footer-columns {
	display:               grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap:                   80px;
}

.footer-logo img {
	height:    30px;
	width:     auto;
	filter:    brightness(0) invert(1);
	margin-bottom: 16px;
}

.footer-tagline {
	font-size:     15px;
	margin-bottom: 24px;
	color:         rgba(255, 255, 255, 0.6);
}

.footer-social {
	display: flex;
	gap:     12px;
}

.social-link {
	display:     flex;
	align-items: center;
	color:       rgba(255, 255, 255, 0.6);
	transition:  color var(--transition);
}

.social-link:hover {
	color: var(--color-primary);
}

.footer-col-title {
	color:          var(--color-white);
	font-size:      15px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom:  20px;
}

.footer-links li {
	margin-bottom: 10px;
}

.footer-links a {
	color:      rgba(255, 255, 255, 0.65);
	font-size:  15px;
	transition: color var(--transition);
}

.footer-links a:hover {
	color: var(--color-primary);
}

.footer-contact-list li {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	margin-bottom: 12px;
	font-size:     15px;
	color:         rgba(255, 255, 255, 0.65);
}

.footer-contact-list svg {
	flex-shrink:  0;
	margin-top:   3px;
	color:        var(--color-primary);
}

.footer-bottom {
	padding: 22px 0;
}

.footer-copyright {
	text-align: center;
	font-size:  15px;
	color:      rgba(255, 255, 255, 0.45);
}


/* =============================================================================
   10. PAGE HERO
   ============================================================================= */
.page-hero {
	position:              relative;
	display:               flex;
	align-items:           center;
	min-height:            540px;
	background-color:      var(--color-heading);
	background-size:       cover;
	background-position:   center;
	background-repeat:     no-repeat;
	padding-top:           180px;
	padding-bottom:        100px;
	overflow:              hidden;
}

.hero__bg {
	position:   absolute;
	top:        -40%;
	right:      0;
	bottom:     -40%;
	left:       0;
	background: center/cover no-repeat;
	will-change: transform;
}

/* Container inside hero aligns content with the rest of the page */
.page-hero > .container {
	width: 100%;
}

.page-hero::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(0deg, rgba(3, 3, 6, 0.55) 0%, rgba(3, 3, 6, 0.35) 100%);
}

.page-hero--tall {
	min-height:  860px;
	align-items: flex-start;
}

.page-hero__inner {
	position:   relative;
	z-index:    1;
	max-width:  720px;
}

.page-hero__label {
	display:        block;
	font-size:      13px;
	font-weight:    600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--color-primary);
	margin-bottom:  14px;
}

.page-hero__title {
	font-size:     56px;
	font-weight:   400;
	color:         var(--color-white);
	line-height:   1.2;
	margin-bottom: 20px;
}

.page-hero__desc {
	font-size:     18px;
	color:         rgba(255, 255, 255, 0.85);
	max-width:     580px;
	margin-bottom: 36px;
}

.page-hero__actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       16px;
}

/* Two-column hero layout (home page) */
.page-hero__split {
	display:   flex;
	align-items: center;
	gap:         60px;
	width:       100%;
	position:    relative;
	z-index:     1;
}

.page-hero__split .page-hero__inner {
	flex:      1;
	min-width: 0;
}

.page-hero__logo-col {
	flex:            0 0 auto;
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
}

.page-hero__logo-img {
	width:     435px;
	max-width: 36vw;
	height:    auto;
	opacity:   0.92;
}


/* =============================================================================
   11. HOME PAGE
   ============================================================================= */

/* Works Row — overlaps the hero; transparent so hero image shows through */
.works-row {
	position:    relative;
	z-index:     5;
	margin-top:  -220px;
	padding-top: 30px;
}

/* Popular Works — white background, text header only */
.popular-works {
	padding:    60px 0;
	background: var(--color-white);
}

.popular-works__header {
	text-align: center;
}

.popular-works__header .section-label {
	color: var(--color-primary);
}

.popular-works__header h2 {
	color:         var(--color-heading);
	margin-bottom: 12px;
}

.popular-works__header p {
	color:     var(--color-text);
	max-width: 500px;
	margin:    0 auto;
}

.works-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
}

.work-card {
	position:    relative;
	overflow:    hidden;
	height:      520px;
	border:      6px solid #ffffff;
	cursor:      pointer;
}

.work-card__img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.6s ease, filter 0.6s ease;
}

.work-card:hover .work-card__img {
	transform: scale(1.08);
	filter:    brightness(0.65);
}

.work-card__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(0deg, rgba(3,3,6,0.75) 0%, transparent 50%);
	display:    flex;
	flex-direction: column;
	justify-content: flex-end;
	padding:    28px;
}

.work-card__label {
	font-size:      11px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--color-primary);
	margin-bottom:  6px;
}

.work-card__title {
	font-size:  20px;
	color:      var(--color-white);
	font-weight: 400;
}

/* Home Gallery */
.home-gallery {
	background:  #000;
	padding:     60px 0;
	line-height: 0;
}

.home-gallery__grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   5px;
	max-width:             var(--site-width);
	margin-left:           auto;
	margin-right:          auto;
	padding-left:          clamp(16px, 2vw, 28px);
	padding-right:         clamp(16px, 2vw, 28px);
}

.home-gallery__item {
	aspect-ratio: 1 / 1;
	overflow:     hidden;
}

.home-gallery__item img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.5s ease, filter 0.5s ease;
}

.home-gallery__item:hover img {
	transform: scale(1.1);
	filter:    brightness(0.7);
}

/* Features Section */
.features-section {
	padding: 100px 0;
}

.features-inner {
	display:     grid;
	grid-template-columns: 1fr 1fr;
	gap:         80px;
	align-items: center;
}

.features-content .section-label {
	color: var(--color-primary);
}

.features-content h2 {
	margin-bottom: 20px;
}

.features-content p {
	margin-bottom: 32px;
}

.features-list {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

.features-list li {
	display:     flex;
	align-items: flex-start;
	gap:         12px;
	font-size:   16px;
	color:       var(--color-text);
}

.features-list li::before {
	content:     '→';
	color:       var(--color-primary);
	font-weight: 700;
	flex-shrink: 0;
	margin-top:  1px;
}

.features-image img {
	width:           100%;
	height:          500px;
	object-fit:      cover;
	object-position: top;
}

/* CTA Strip */
.cta-strip {
	position:   relative;
	padding:    110px var(--side-pad);
	background: var(--color-heading) center/cover no-repeat;
	text-align: center;
	overflow:   hidden;
}

.cta-strip::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(0deg, rgba(3,3,6,0.82) 20%, transparent 100%);
}

.cta-strip__inner {
	position:  relative;
	z-index:   1;
	max-width: 580px;
	margin:    0 auto;
}

.cta-strip__eyebrow {
	display:        block;
	font-size:      12px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color:          var(--color-primary);
	margin-bottom:  14px;
}

.cta-strip h2 {
	color:         var(--color-white);
	font-size:     40px;
	margin-bottom: 14px;
}

.cta-strip p {
	color:         rgba(255, 255, 255, 0.72);
	margin-bottom: 36px;
}


/* =============================================================================
   12. ABOUT PAGE
   ============================================================================= */
/* Bio Section */
.bio-section__inner {
	display:               grid;
	grid-template-columns: 340px 1fr;
	gap:                   60px;
	align-items:           start;
}

.bio-section__image img {
	width:           100%;
	height:          480px;
	object-fit:      cover;
	object-position: top;
	display:         block;
}

.bio-section__text .section-title {
	margin-bottom: 28px;
	margin-top:    0;
}

.bio-section__text p {
	color:         var(--color-text);
	line-height:   1.8;
	margin-bottom: 18px;
}

.bio-section__text p:last-child {
	margin-bottom: 0;
}

/* WordPress image alignment inside page content */
.bio-section__text .alignleft {
	float:         left;
	margin-right:  32px;
	margin-bottom: 16px;
	margin-top:    6px;
	max-width:     45%;
	height:        auto;
}

.bio-section__text .alignright {
	float:         right;
	margin-left:   32px;
	margin-bottom: 16px;
	margin-top:    6px;
	max-width:     45%;
	height:        auto;
}

.bio-section__text .aligncenter {
	display:    block;
	margin:     24px auto;
	max-width:  100%;
	height:     auto;
}

.bio-section__text img {
	max-width: 100%;
	height:    auto;
}

@media (max-width: 689px) {
	.bio-section__text .alignleft,
	.bio-section__text .alignright {
		float:     none;
		max-width: 100%;
		margin:    0 0 24px 0;
	}
}

@media (max-width: 999px) {
	.bio-section__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.bio-section__image img { height: 380px; }
}

.team-section {
	padding: 100px 0;
}

.team-section__header {
	text-align:    center;
	margin-bottom: 60px;
}

.team-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   28px;
}

.team-card {
	text-align: center;
}

.team-card__photo {
	width:         100%;
	aspect-ratio:  3/4;
	object-fit:    cover;
	margin-bottom: 20px;
	filter:        grayscale(15%);
	transition:    filter var(--transition);
}

.team-card:hover .team-card__photo {
	filter: grayscale(0%);
}

.team-card__name {
	font-size:     18px;
	color:         var(--color-heading);
	margin-bottom: 4px;
}

.team-card__role {
	font-size:      12px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color:          var(--color-primary);
}

/* Partners Section */
.partners-section {
	padding:    60px 0;
	background: var(--color-bg-light);
}

.partners-section__title {
	text-align:    center;
	margin-bottom: 48px;
}

.partners-grid {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	align-items:     center;
	gap:             40px 60px;
}

.partners-grid img {
	height:  40px;
	width:   auto;
	opacity: 0.5;
	filter:  grayscale(100%);
	transition: opacity var(--transition), filter var(--transition);
}

.partners-grid img:hover {
	opacity: 1;
	filter:  grayscale(0%);
}

/* Recent News (About Page) */
.recent-news-section {
	padding: 100px 0;
}

.recent-news-section__header {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-end;
	margin-bottom:   48px;
}

.news-preview-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   36px;
}

.news-preview-card__img {
	width:         100%;
	aspect-ratio:  16/9;
	object-fit:    cover;
	margin-bottom: 20px;
}

.news-preview-card__meta {
	display:        flex;
	align-items:    center;
	gap:            12px;
	font-size:      12px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--color-text);
	margin-bottom:  10px;
}

.news-preview-card__cat {
	color: var(--color-primary);
}

.news-preview-card__title {
	font-size:     22px;
	color:         var(--color-heading);
	margin-bottom: 12px;
	transition:    color var(--transition);
}

.news-preview-card__title a:hover {
	color: var(--color-primary);
}

.news-preview-card__excerpt {
	font-size:     15px;
	margin-bottom: 16px;
}

/* Newsletter Section */
.newsletter-section {
	padding:    80px 0;
	background: var(--color-heading);
	text-align: center;
}

.newsletter-section h3 {
	color:         var(--color-white);
	margin-bottom: 12px;
}

.newsletter-section p {
	color:         rgba(255, 255, 255, 0.65);
	max-width:     480px;
	margin:        0 auto 36px;
}


/* =============================================================================
   13. CONTACT PAGE
   ============================================================================= */

/* Main contact section */
.contact-main {
	padding: 100px 0;
}

.contact-grid {
	display:               grid;
	grid-template-columns: 1.3fr 1fr;
	gap:                   80px;
	align-items:           start;
}

/* Form side */
.contact-form-wrap .section-label {
	margin-bottom: 8px;
}

.contact-form-wrap h2 {
	margin-bottom: 36px;
}

.form-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   20px;
}

.contact-form .form-field {
	margin-bottom: 20px;
}

.contact-form label span {
	color: var(--color-primary);
}

.form-notice {
	padding:       16px 20px;
	margin-bottom: 28px;
	font-size:     15px;
	font-weight:   500;
}

.form-notice--success {
	background:  rgba(34, 197, 94, 0.08);
	border-left: 3px solid #22c55e;
	color:       #166534;
}

.form-notice--error {
	background:  rgba(143, 145, 148, 0.08);
	border-left: 3px solid var(--color-primary);
	color:       var(--color-primary-dark);
}

/* Info sidebar */
.contact-sidebar .section-label {
	margin-bottom: 8px;
}

.contact-sidebar h2 {
	margin-bottom: 36px;
}

.contact-details {
	display:        flex;
	flex-direction: column;
	gap:            24px;
	margin-bottom:  40px;
}

.contact-detail {
	display:     flex;
	align-items: flex-start;
	gap:         16px;
}

.contact-detail__icon {
	flex-shrink:     0;
	width:           48px;
	height:          48px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      rgba(168, 168, 190, 0.08);
	border-radius:   50%;
	color:           var(--color-primary);
}

.contact-detail h6 {
	font-size:      13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--color-heading);
	margin-bottom:  4px;
}

.contact-detail p,
.contact-detail a {
	font-size: 15px;
	color:     var(--color-text);
	margin:    0;
}

.contact-detail a:hover {
	color: var(--color-primary);
}

/* Social links in sidebar */
.contact-social {
	padding-top:  32px;
	border-top:   1px solid var(--color-border);
}

.contact-social h6 {
	font-size:      13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--color-heading);
	margin-bottom:  16px;
}

.social-links-row {
	display: flex;
	gap:     10px;
}

.social-links-row .social-link {
	width:           40px;
	height:          40px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border:          1px solid var(--color-border);
	color:           var(--color-text);
	transition:      border-color var(--transition), color var(--transition), background var(--transition);
}

.social-links-row .social-link:hover {
	border-color: var(--color-primary);
	color:        var(--color-primary);
	background:   rgba(201, 168, 76, 0.06);
}

/* Process section */
.process-section {
	padding:    80px 0;
	background: var(--color-bg-light);
}

.process-header {
	margin-bottom: 56px;
}

.process-header h2 {
	margin-top: 8px;
}

.process-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   2px;
}

.process-card {
	background: var(--color-white);
	padding:    40px 32px;
}

.process-card__num {
	font-size:     52px;
	font-weight:   700;
	color:         rgba(168, 168, 190, 0.12);
	line-height:   1;
	margin-bottom: 20px;
}

.process-card h6 {
	font-size:      15px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--color-heading);
	margin-bottom:  10px;
}

.process-card p {
	font-size: 15px;
	color:     var(--color-text);
	margin:    0;
}


/* =============================================================================
   13b. FAQ PAGE
   ============================================================================= */
.faq-section {
	padding: 80px 0 100px;
}

.faq-groups {
	max-width: 860px;
	margin:    0 auto;
}

.faq-group {
	margin-bottom: 64px;
}

.faq-group:last-child {
	margin-bottom: 0;
}

.faq-group__title {
	font-size:     22px;
	font-weight:   600;
	color:         var(--color-heading);
	margin-bottom: 8px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--color-primary);
}

.faq-item {
	border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	padding:         20px 0;
	background:      none;
	border:          none;
	cursor:          pointer;
	text-align:      left;
	font-size:       17px;
	font-weight:     500;
	color:           var(--color-heading);
	font-family:     var(--font-base);
	gap:             16px;
	transition:      color var(--transition);
}

.faq-item__question:hover {
	color: var(--color-primary);
}

.faq-item__icon {
	flex-shrink:     0;
	width:           30px;
	height:          30px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border:          2px solid var(--color-primary);
	border-radius:   50%;
	color:           var(--color-primary);
	font-size:       20px;
	font-weight:     300;
	line-height:     1;
	transition:      transform var(--transition), background var(--transition), color var(--transition);
}

.faq-item.is-open .faq-item__icon {
	transform:  rotate(45deg);
	background: var(--color-primary);
	color:      #fff;
}

.faq-item__answer {
	overflow:   hidden;
	max-height: 0;
	transition: max-height 0.4s ease;
}

.faq-item.is-open .faq-item__answer {
	max-height: 600px;
}

.faq-item__answer-inner {
	padding:     0 48px 24px 0;
	color:       var(--color-text);
	font-size:   16px;
	line-height: 1.75;
}


/* =============================================================================
   14. GALLERY PAGE
   ============================================================================= */
.gallery-section {
	padding: 80px 0;
}

.gallery-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   6px;
}

.gallery-item {
	position:     relative;
	aspect-ratio: 1;
	overflow:     hidden;
	cursor:       pointer;
}

.gallery-item img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.5s ease, filter 0.5s ease;
}

.gallery-item:hover img {
	transform: scale(1.06);
	filter:    brightness(0.75);
}

.gallery-item__overlay {
	position:    absolute;
	inset:       0;
	display:     flex;
	align-items: center;
	justify-content: center;
	opacity:     0;
	transition:  opacity var(--transition);
}

.gallery-item:hover .gallery-item__overlay {
	opacity: 1;
}

.gallery-item__zoom {
	width:         48px;
	height:        48px;
	border:        2px solid var(--color-white);
	border-radius: 50%;
	display:       flex;
	align-items:   center;
	justify-content: center;
	color:         var(--color-white);
}

/* Lightbox */
.aw-lightbox {
	display:         none;
	position:        fixed;
	inset:           0;
	background:      rgba(3, 3, 6, 0.95);
	z-index:         9999;
	align-items:     center;
	justify-content: center;
}

.aw-lightbox.is-open {
	display: flex;
}

.aw-lightbox__img {
	max-width:  90vw;
	max-height: 90vh;
	object-fit: contain;
}

.aw-lightbox__close {
	position:   absolute;
	top:        24px;
	right:      32px;
	background: none;
	border:     none;
	color:      var(--color-white);
	font-size:  36px;
	cursor:     pointer;
	line-height: 1;
}

.aw-lightbox__prev,
.aw-lightbox__next {
	position:   absolute;
	top:        50%;
	transform:  translateY(-50%);
	background: rgba(255,255,255,0.1);
	border:     none;
	color:      var(--color-white);
	font-size:  28px;
	padding:    14px 18px;
	cursor:     pointer;
	transition: background var(--transition);
}

.aw-lightbox__prev { left:  20px; }
.aw-lightbox__next { right: 20px; }

.aw-lightbox__prev:hover,
.aw-lightbox__next:hover {
	background: rgba(201, 168, 76, 0.7);
}


/* =============================================================================
   15. BLOG ARCHIVE
   ============================================================================= */
.blog-archive {
	padding: 80px 0;
}

.posts-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   40px;
}

.post-card {
	background: var(--color-bg-lighter);
}

.post-card__thumb {
	display: block;
	overflow: hidden;
}

.post-card__thumb img {
	width:      100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.post-card:hover .post-card__thumb img {
	transform: scale(1.04);
}

.post-card__body {
	padding: 28px;
}

.post-card__meta {
	display:        flex;
	align-items:    center;
	gap:            12px;
	font-size:      12px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--color-text);
	margin-bottom:  12px;
}

.post-card__cats a {
	color:      var(--color-primary);
	font-size:  12px;
	font-weight: 600;
	text-transform: uppercase;
}

.post-card__title {
	font-size:     22px;
	line-height:   1.35;
	margin-bottom: 12px;
}

.post-card__title a {
	color:      var(--color-heading);
	transition: color var(--transition);
}

.post-card__title a:hover {
	color: var(--color-primary);
}

.post-card__excerpt {
	font-size:     15px;
	margin-bottom: 20px;
}

.post-card__more {
	display:     inline-flex;
	align-items: center;
	gap:         6px;
	font-size:   14px;
	font-weight: 600;
	color:       var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.post-card__more:hover {
	color: var(--color-primary-dark);
	gap:   10px;
}


/* =============================================================================
   16. SINGLE POST
   ============================================================================= */
.single-post-hero {
	padding-top:    140px;
	padding-bottom: 60px;
	background:     var(--color-bg-light);
	/* No horizontal padding — .container inside provides it */
}

.single-post-hero .container {
	max-width: 860px;
}

.single-post-meta {
	display:        flex;
	align-items:    center;
	gap:            16px;
	font-size:      12px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--color-text);
	margin-bottom:  16px;
}

.single-post-cats a {
	color: var(--color-primary);
}

.single-post-title {
	font-size:     48px;
	line-height:   1.2;
	margin-bottom: 0;
}

.single-post-featured {
	width:      100%;
	aspect-ratio: 16/6;
	object-fit: cover;
}

.single-post-content {
	padding: 60px 0;
}

.single-post-content .entry-content {
	max-width:     780px;
	margin:        0 auto;
	font-size:     17px;
	line-height:   1.8;
}

.single-post-content .entry-content h2,
.single-post-content .entry-content h3 {
	margin-top:    40px;
	margin-bottom: 16px;
}

.single-post-content .entry-content p {
	margin-bottom: 1.4em;
}

.single-post-back {
	display:     inline-flex;
	align-items: center;
	gap:         8px;
	font-size:   14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:       var(--color-primary);
	margin-top:  40px;
}


/* =============================================================================
   17. 404 PAGE
   ============================================================================= */
.error-404 {
	padding:    160px var(--side-pad) 100px;
	text-align: center;
}

.error-404__code {
	font-size:   160px;
	font-weight: 700;
	color:       var(--color-bg-light);
	line-height: 1;
	margin-bottom: -30px;
}

.error-404 h1 {
	font-size:     40px;
	margin-bottom: 16px;
}

.error-404 p {
	max-width:     440px;
	margin:        0 auto 36px;
	color:         var(--color-text);
}


/* =============================================================================
   18. RESPONSIVE — TABLET (max-width: 999px)
   ============================================================================= */
@media (max-width: 999px) {
	:root {
		--header-height: 80px;
	}

	.site-nav { display: none; }
	.nav-toggle { display: flex; }

	h1 { font-size: 32px; }
	h2 { font-size: 28px; }
	h3 { font-size: 24px; }

	.page-hero__title  { font-size: 40px; }
	.page-hero { min-height: 420px; padding-top: 140px; }

	.section { padding-top: 60px; padding-bottom: 60px; }

	/* Hero split */
	.page-hero__split   { gap: 36px; }
	.page-hero__logo-img { width: 270px; max-width: 30vw; }

	/* Home */
	.works-row  { margin-top: 0; }
	.works-grid { grid-template-columns: 1fr; gap: 16px; }
	.work-card  { height: 320px; }
	.home-gallery__grid { grid-template-columns: repeat(3, 1fr); }
	.features-inner { grid-template-columns: 1fr; gap: 48px; }
	.features-image { display: none; }

	/* About */
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.news-preview-grid { grid-template-columns: 1fr; }
	.recent-news-section__header { flex-direction: column; align-items: flex-start; gap: 16px; }

	/* Contact */
	.contact-grid   { grid-template-columns: 1fr; gap: 56px; }
	.process-grid   { grid-template-columns: repeat(2, 1fr); }

	/* Gallery */
	.gallery-grid { grid-template-columns: repeat(3, 1fr); }

	/* Footer */
	.footer-columns { grid-template-columns: 1fr 1fr; gap: 40px; }
	.footer-col--brand { grid-column: 1 / -1; }

	/* Blog */
	.posts-grid { grid-template-columns: 1fr; }
	.single-post-title { font-size: 36px; }
}


/* =============================================================================
   19. RESPONSIVE — MOBILE (max-width: 689px)
   ============================================================================= */
@media (max-width: 689px) {
	:root {
		--side-pad: 6vw;
	}

	h1 { font-size: 26px; }
	h2 { font-size: 22px; }

	.page-hero { min-height: 340px; padding-top: 120px; padding-bottom: 60px; }
	.page-hero__title { font-size: 30px; }
	.page-hero__desc  { font-size: 16px; }
	.page-hero__actions { flex-direction: column; }

	.section { padding-top: 50px; padding-bottom: 50px; }

	/* Hero split — stack on mobile */
	.page-hero__split   { flex-direction: column-reverse; gap: 24px; }
	.page-hero__logo-img { width: 135px; max-width: 50vw; }

	/* Home */
	.works-row  { margin-top: 0; }
	.works-grid { gap: 12px; }
	.home-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.cta-strip     { padding: 70px var(--side-pad); }
	.cta-strip h2  { font-size: 28px; }

	/* About */
	.team-grid     { grid-template-columns: 1fr; }
	.partners-grid { gap: 24px 36px; }
	.partners-grid img { height: 30px; }

	/* Contact */
	.form-row     { grid-template-columns: 1fr; }
	.process-grid { grid-template-columns: 1fr; }

	/* Gallery */
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }

	/* Footer */
	.footer-columns { grid-template-columns: 1fr; gap: 36px; }
	.footer-col--brand { grid-column: auto; }
	.footer-top { padding: 50px 0; }

	/* Error */
	.error-404__code { font-size: 100px; }
	.error-404 h1    { font-size: 28px; }

	/* Single */
	.single-post-title { font-size: 26px; }
}