/*!
Theme Name: Dominic-Francis
Theme URI: http://underscores.me/
Author: Dominic Francis
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dominic_francis
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Dominic-Francis is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

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

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

/* About Me page - Override blue links */
body.page-template-page-about-me-php .single-column a:not(.about-outline-btn):not(.about-toc-link),
body.page-template-page-about-me-php .case-content a:not(.about-outline-btn):not(.about-toc-link) {
	color: #8B5CF6;
	text-decoration: none;
	border-bottom: 1px solid rgba(139, 92, 246, 0.3);
	transition: all 0.2s ease;
}

body.page-template-page-about-me-php .single-column a:not(.about-outline-btn):not(.about-toc-link):visited,
body.page-template-page-about-me-php .case-content a:not(.about-outline-btn):not(.about-toc-link):visited {
	color: #8B5CF6;
}

body.page-template-page-about-me-php .single-column a:not(.about-outline-btn):not(.about-toc-link):hover,
body.page-template-page-about-me-php .case-content a:not(.about-outline-btn):not(.about-toc-link):hover {
	color: #A78BFA;
	border-bottom-color: #A78BFA;
}
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/* === ACCESSIBILITY === */

/* Screen reader only text */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* External link icon styling - darker indigo color for better contrast */
a[target="_blank"]:not(.no-external-icon)::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 0.25rem;
	/* Darker indigo icon for better contrast (#6366F1) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	opacity: 0.8;
}

a[target="_blank"]:not(.no-external-icon):hover::after {
	opacity: 1;
}

/* External icon on CTA buttons - pure white for visibility */
.cta-primary[target="_blank"]::after,
.cta-secondary[target="_blank"]::after,
a.cta-primary[target="_blank"]::after,
a.cta-secondary[target="_blank"]::after {
	/* Pure white icon (#FFFFFF) for buttons - using !important to ensure it overrides */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") !important;
	opacity: 1 !important;
	width: 18px !important;
	height: 18px !important;
	margin-left: 0.5rem !important;
}

.cta-primary[target="_blank"]:hover::after,
.cta-secondary[target="_blank"]:hover::after,
a.cta-primary[target="_blank"]:hover::after,
a.cta-secondary[target="_blank"]:hover::after {
	opacity: 1 !important;
}

/* === END ACCESSIBILITY === */

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

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

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

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

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

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Custom Dominic Francis Styling
--------------------------------------------------------------*/

/* === COLOR VARIABLES === */
:root {
	/* Primary colors from design */
	--color-dark-bg: #0A0A1B;
	--color-dark-secondary: #1a1a2e;
	--color-purple-light: #C4B5FD;
	--color-purple-medium: #A78BFA;
	--color-purple-dark: #8B5CF6;
	--color-text-primary: #F9FAFB;
	--color-text-secondary: #D1D5DB;
	
	/* Gradient colors - matching artifact */
	--gradient-start: #6366F1; /* Indigo from artifact */
	--gradient-end: #8B5CF6;   /* Purple */
	--gradient-hover-start: #818CF8; /* Lighter indigo for hover */
	--gradient-hover-end: #A78BFA;   /* Lighter purple for hover */
	
	/* Spacing */
	--header-height: 80px;
	--container-max-width: 1200px;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
}

/* === GLOBAL RESETS === */
* {
	box-sizing: border-box;
}

body {
	font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background-color: var(--color-dark-bg);
	color: var(--color-text-primary);
	margin: 0;
	padding: 0;
}

/* === CONTAINER UTILITY CLASS === */
/* 
 * GRID SYSTEM:
 * - All content uses max-width: 1200px (var(--container-max-width))
 * - Horizontal padding: 2rem (var(--spacing-md)) on all sides
 * - This ensures content aligns with:
 *   - Logo "Dominic Francis" on the left
 *   - Navigation menu on the right
 * 
 * Usage:
 * - Wrap content in .container or use classes like .site-main
 * - For custom sections, use .content-wrapper class
 * - All section content will align with header grid automatically
 */
.container,
.site-main,
#primary {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
	width: 100%;
}

/* Front page exception - allow full-width sections */
.page-template-front-page .site-main,
.home .site-main,
body.home #primary {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Portfolio page exception - allow full-width sections */
.portfolio-page.site-main,
.portfolio-page#primary {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Case study page exception - allow full-width sections */
.case-study-page.site-main,
.case-study-page#primary {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Content alignment - aligns with logo */
.content-wrapper {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

/* === HEADER STYLING === */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--color-dark-bg);
	z-index: 999;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Account for WordPress admin bar when logged in */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.header-container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
	display: flex;
	justify-content: space-between; /* This pushes logo left, nav right */
	align-items: center;
	height: var(--header-height);
	width: 100%;
}

/* Header scroll states */
.header-scrolled {
	box-shadow: 0 2px 20px rgba(167, 139, 250, 0.1);
}

.header-hidden {
	transform: translateY(-100%);
}

.header-sticky {
	position: fixed !important;
}

/* Add padding to body to account for fixed header */
body {
	padding-top: var(--header-height);
}

/* === LOGO GRADIENT TEXT === */
.site-branding {
	flex-shrink: 0;
}

.logo-link {
	text-decoration: none;
	display: inline-block;
}

.logo-text {
	font-family: 'Sora', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	background: linear-gradient(135deg, 
		var(--color-purple-medium) 0%, 
		var(--color-purple-light) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: -0.02em;
}

/* === NAVIGATION STYLING === */
/* Override Underscores defaults that break the layout */
.main-navigation {
	display: flex !important;
	align-items: center;
	margin-left: auto; /* Push to the right */
	width: auto !important; /* Override Underscores width: 100% */
}

.nav-menu-wrapper {
	display: block; /* Show by default */
	position: relative; /* Normal position on desktop */
}

.nav-menu,
#primary-menu {
	display: flex !important; /* Override Underscores display: none */
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	gap: 2.5rem;
}

.nav-menu li,
#primary-menu li {
	margin: 0;
	padding: 0;
	position: relative;
}

.nav-menu a,
#primary-menu a {
	font-family: 'Sora', sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--color-text-primary);
	text-decoration: none;
	padding-bottom: 0.5rem;
	position: relative;
	display: inline-block;
	transition: color 0.2s ease;
}

/* Hover state with underline */
.nav-menu a:hover,
#primary-menu a:hover {
	color: var(--color-purple-light);
}

.nav-menu a::after,
#primary-menu a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-purple-light);
	transition: width 0.3s ease;
}

.nav-menu a:hover::after,
#primary-menu a:hover::after {
	width: 100%;
}

/* Active state (current page) */
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
.nav-menu .current-menu-parent > a,
.nav-menu .current-menu-ancestor > a,
#primary-menu .current-menu-item > a,
#primary-menu .current_page_item > a,
#primary-menu .current-menu-parent > a,
#primary-menu .current-menu-ancestor > a {
	color: var(--color-purple-medium) !important;
}

.nav-menu .current-menu-item > a::after,
.nav-menu .current_page_item > a::after,
.nav-menu .current-menu-parent > a::after,
.nav-menu .current-menu-ancestor > a::after,
#primary-menu .current-menu-item > a::after,
#primary-menu .current_page_item > a::after,
#primary-menu .current-menu-parent > a::after,
#primary-menu .current-menu-ancestor > a::after {
	width: 100%;
	background: var(--color-purple-medium);
}

/* Keep active color even on hover */
.nav-menu .current-menu-item > a:hover,
.nav-menu .current_page_item > a:hover,
#primary-menu .current-menu-item > a:hover,
#primary-menu .current_page_item > a:hover {
	color: var(--color-purple-medium) !important;
}

/* Download CV button styling */
.nav-menu li.menu-item-cv a,
.nav-menu li:last-child a[href*="cv"],
.nav-menu li:last-child a[href*="CV"],
.nav-menu li a.btn-cv {
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	color: white !important;
	padding: 0.625rem 1.5rem;
	border-radius: 8px;
	font-weight: 600;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-menu li.menu-item-cv a:hover,
.nav-menu li:last-child a[href*="cv"]:hover,
.nav-menu li:last-child a[href*="CV"]:hover,
.nav-menu li a.btn-cv:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(167, 139, 250, 0.3);
}

.nav-menu li.menu-item-cv a::after,
.nav-menu li:last-child a[href*="cv"]::after,
.nav-menu li:last-child a[href*="CV"]::after,
.nav-menu li a.btn-cv::after {
	display: none; /* Remove underline from button */
}

/* === HAMBURGER MENU TOGGLE === */
.menu-toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.5rem; /* Reverted - sits flush on right edge */
	z-index: 1001;
	margin-left: auto; /* Push to the right on mobile */
}

.hamburger-icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 28px;
}

.hamburger-icon span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-text-primary);
	transition: all 0.3s ease;
}

/* Hamburger animation when menu is open */
.menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* === MOBILE MENU STYLES === */
@media (max-width: 767px) {
	.menu-toggle {
		display: block;
	}
	
	.nav-menu-wrapper {
		display: block;
		position: fixed;
		top: 0;
		right: -100%; /* Hidden off-screen initially */
		width: 80%;
		max-width: 400px;
		height: 100vh;
		background: var(--color-dark-secondary);
		padding: 6rem 0 2rem 0; /* Remove horizontal padding, add to menu items instead */
		transition: right 0.3s ease-in-out;
		overflow-y: auto;
		box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
		z-index: 999;
	}
	
	.menu-toggle[aria-expanded="true"] + .nav-menu-wrapper {
		right: 0;
	}
	
	.nav-menu,
	#primary-menu {
		flex-direction: column;
		align-items: stretch; /* Changed from flex-start for full width */
		gap: 0;
		margin: 0; /* Remove all margin including browser defaults */
		padding: 0; /* Remove all padding including browser defaults */
		/* margin-top removed - was causing extra purple spacing at top */
	}
	
	.nav-menu li,
	#primary-menu li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		margin: 0; /* Ensure no margin interference */
	}
	
	.nav-menu a,
	#primary-menu a {
		display: block;
		padding: 1.25rem 1.5rem; /* Increased vertical padding for better touch targets */
		font-size: 1.125rem;
		line-height: 1.4; /* Consistent line height */
		width: 100%; /* Ensure full width */
	}
	
	.nav-menu a::after,
	#primary-menu a::after {
		display: none; /* Remove underline in mobile menu */
	}
	
	/* Mobile Download CV button */
	.nav-menu li.menu-item-cv a,
	.nav-menu li:last-child a[href*="cv"],
	.nav-menu li:last-child a[href*="CV"],
	.nav-menu li a.btn-cv,
	#primary-menu li.menu-item-cv a,
	#primary-menu li:last-child a[href*="cv"],
	#primary-menu li:last-child a[href*="CV"],
	#primary-menu li a.btn-cv {
		margin: 0.5rem 1.5rem 1rem 1.5rem; /* Consistent horizontal margins */
		text-align: center;
		border-radius: 8px;
		padding: 1rem 1.5rem; /* Match other items */
	}
	
	/* Hide the desktop underline indicator on mobile */
	.nav-menu .current-menu-item > a::after,
	.nav-menu .current_page_item > a::after,
	.nav-menu .current-menu-parent > a::after,
	.nav-menu .current-menu-ancestor > a::after,
	#primary-menu .current-menu-item > a::after,
	#primary-menu .current_page_item > a::after,
	#primary-menu .current-menu-parent > a::after,
	#primary-menu .current-menu-ancestor > a::after {
		display: none !important; /* Hide underline on mobile */
	}
	
	/* Active state in mobile - FULL WIDTH BACKGROUND */
	.nav-menu .current-menu-item,
	.nav-menu .current_page_item,
	#primary-menu .current-menu-item,
	#primary-menu .current_page_item {
		background: rgba(167, 139, 250, 0.15);
		border-left: 3px solid var(--color-purple-medium);
		margin: 0; /* No margin on active items */
	}
	
	.nav-menu .current-menu-item > a,
	.nav-menu .current_page_item > a,
	#primary-menu .current-menu-item > a,
	#primary-menu .current_page_item > a {
		color: var(--color-purple-light);
		padding-left: calc(1.5rem - 3px); /* Account for 3px border */
		padding-right: 1.5rem;
		padding-top: 1.25rem; /* Match non-active vertical padding */
		padding-bottom: 1.25rem; /* Match non-active vertical padding */
	}
}

/* === DESKTOP NAVIGATION === */
@media (min-width: 768px) {
	.nav-menu-wrapper {
		display: block !important; /* Force visible on desktop */
		position: relative !important; /* Reset mobile positioning */
		right: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
		background: transparent !important;
		padding: 0 !important;
		box-shadow: none !important;
	}
	
	.nav-menu,
	#primary-menu {
		gap: 2.5rem; /* Desktop menu item spacing */
	}
	
	.menu-toggle {
		display: none !important; /* Hide hamburger on desktop */
	}
}

/* === FOOTER STYLING === */
.site-footer {
	background: var(--color-dark-secondary);
	padding: var(--spacing-md) 0;
	margin-top: 0; /* Removed - sits flush with content */
	border-top: 1px solid rgba(167, 139, 250, 0.1);
}

.footer-container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.footer-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.footer-left,
.footer-right {
	margin: 0;
}

.copyright,
.footer-tagline {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

@media (max-width: 767px) {
	.footer-content {
		flex-direction: column;
		text-align: center;
	}
}

/* === ACCESSIBILITY === */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}


/*--------------------------------------------------------------
# Homepage Hero Section
--------------------------------------------------------------*/

/* === HERO SECTION === */
.hero-section {
	/* Full viewport width - no constraints */
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 0; /* Reduced from var(--spacing-lg) for tighter spacing */
	position: relative;
	overflow: hidden;
	
	/* Layered background: diagonal pattern + radial gradients */
	background: 
		url('assets/diagonal-pattern-medium.svg'),
		radial-gradient(
			circle at 75% 25%,
			rgba(139, 92, 246, 0.12) 0%,
			rgba(139, 92, 246, 0.06) 25%,
			rgba(10, 10, 27, 0) 50%
		),
		radial-gradient(
			circle at 25% 75%,
			rgba(167, 139, 250, 0.08) 0%,
			rgba(167, 139, 250, 0.04) 25%,
			rgba(10, 10, 27, 0) 50%
		),
		var(--color-dark-bg);
	
	background-repeat: repeat, no-repeat, no-repeat, no-repeat;
	background-size: 60px 60px, auto, auto, auto;
	background-position: 0 0, center, center, center;
}

/* Hero content container - matches header and footer alignment */
.hero-container {
	max-width: var(--container-max-width); /* 1200px - same as header */
	margin: 0 auto;
	padding: 0 var(--spacing-md); /* 2rem - same as header */
	width: 100%;
	text-align: left; /* Left-align text on desktop */
}

/* === PILL BADGE === */
.hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	background: #1a1a2e; /* Solid dark background */
	border: 1px solid rgba(167, 139, 250, 0.4);
	border-radius: 50px;
	margin-bottom: 2rem;
	
	/* Enhanced shadow for solid background */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
	            0 0 20px rgba(167, 139, 250, 0.15);
	
	/* Smooth hover effect */
	transition: all 0.3s ease;
}

.hero-pill:hover {
	background: #252540; /* Slightly brighter on hover */
	border-color: rgba(167, 139, 250, 0.6);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
	            0 0 30px rgba(167, 139, 250, 0.25);
}

.pill-icon {
	font-size: 1rem;
	color: var(--color-purple-light);
}

.pill-text {
	font-family: 'Sora', sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-purple-light);
	letter-spacing: 0.01em;
}

/* === HERO HEADLINE === */
.hero-headline {
	font-family: 'Sora', sans-serif;
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 1.5rem 0;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	max-width: 1000px; /* Constrain width to force two lines on desktop */
}

/* Gradient on specific words */
.hero-headline .gradient-text {
	background: linear-gradient(135deg, 
		var(--color-purple-medium) 0%, 
		var(--color-purple-light) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* === HERO SUBHEADING === */
.hero-subheading {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0 0 2.5rem 0;
	max-width: 800px;
}

/* === CTA BUTTON === */
.hero-cta {
	display: inline-block;
	padding: 1rem 2.5rem;
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	color: white;
	text-decoration: none;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1.125rem;
	font-family: 'Sora', sans-serif;
	transition: background 0.3s ease;
	border: none;
}

.hero-cta:visited {
	color: white;
}

.hero-cta:hover {
	background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
	color: white; /* Text stays white */
}

.hero-cta:active {
	transform: scale(0.98);
}

/* === MOBILE OPTIMIZATION === */

/* iPhone SE and small devices (375px and below) */
@media (max-width: 375px) {
	.hero-section {
		min-height: auto;
		padding: 2rem 0 3rem;
	}
	
	.hero-container {
		text-align: center; /* Center on mobile */
	}
	
	.hero-pill {
		padding: 0.5rem 1rem;
		margin-bottom: 1.5rem;
	}
	
	.pill-text {
		font-size: 0.875rem;
	}
	
	.hero-headline {
		font-size: 2rem; /* Reduced from 3.5rem */
		margin-bottom: 1rem;
		max-width: 100%; /* Full width on mobile */
	}
	
	.hero-subheading {
		font-size: 1rem; /* Reduced from 1.25rem */
		margin-bottom: 2rem;
	}
	
	.hero-cta {
		padding: 0.875rem 1.75rem;
		font-size: 0.9375rem;
		width: 100%; /* Full width on very small screens */
		justify-content: center;
	}
}

/* Small phones (376px - 480px) */
@media (min-width: 376px) and (max-width: 480px) {
	.hero-section {
		min-height: auto;
		padding: 5rem 0 4rem;
	}
	
	.hero-container {
		text-align: center; /* Center on mobile */
	}
	
	.hero-headline {
		font-size: 2.5rem;
		max-width: 100%; /* Full width on mobile */
	}
	
	.hero-subheading {
		font-size: 1.125rem;
	}
}

/* Tablets (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
	.hero-container {
		text-align: center; /* Center on tablets */
	}
	
	.hero-headline {
		font-size: 3rem;
		max-width: 100%; /* Full width on tablets */
	}
}

/* Desktop (769px+) - Default styles apply */

/* === ACCESSIBILITY === */

/* Ensure focus states are visible */
.hero-pill:focus-visible,
.hero-cta:focus-visible {
	outline: 2px solid var(--color-purple-light);
	outline-offset: 4px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.hero-pill,
	.hero-cta,
	.cta-arrow {
		transition: none;
	}
	
	.hero-cta:hover {
		transform: none;
	}
	
	.hero-cta:hover .cta-arrow {
		transform: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.hero-pill {
		border-width: 2px;
	}
	
	.hero-cta {
		border: 2px solid white;
	}
}

/*--------------------------------------------------------------

/*--------------------------------------------------------------
# Trusted By Section - Optimized Layout
# Desktop: 2 rows (4 + 4 logos) - larger, more prominent
# Mobile: Single column - large, readable logos
--------------------------------------------------------------*/

/* === BASE TRUSTED BY STYLES === */
.trusted-by {
	padding: 5rem 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%);
	border-top: 1px solid rgba(167, 139, 250, 0.1);
	border-bottom: 1px solid rgba(167, 139, 250, 0.1);
}

.trusted-container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.trusted-heading {
	text-align: center;
	font-size: 1.125rem;
	font-weight: 400;
	margin-bottom: 4rem;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

/* === DESKTOP LAYOUT (769px+) === */
/* Two rows: 4 logos + 4 logos */
@media (min-width: 769px) {
	.logo-wall {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 3rem 4rem;
		align-items: center;
		justify-items: center;
	}
	
	.logo-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 1.5rem;
	}
	
	.client-logo {
		height: 50px; /* Larger on desktop */
		width: auto;
		max-width: 200px;
		object-fit: contain;
		filter: grayscale(100%) brightness(0) invert(1) opacity(0.6);
		transition: all 0.4s ease;
	}
	
	.govuk-logo {
		filter: grayscale(100%) brightness(1.2) opacity(0.7);
	}
	
	.logo-item:hover .client-logo {
		filter: grayscale(0%) brightness(1) opacity(1);
		transform: scale(1.08);
	}
	
	.logo-item:hover .govuk-logo {
		filter: grayscale(0%) brightness(1) opacity(1);
	}
}

/* === TABLET LAYOUT (481px - 768px) === */
/* 2 columns for better balance */
@media (min-width: 481px) and (max-width: 768px) {
	.logo-wall {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem 2.5rem;
		align-items: center;
		justify-items: center;
	}
	
	.logo-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 1.25rem;
	}
	
	.client-logo {
		height: 45px;
		width: auto;
		max-width: 180px;
		object-fit: contain;
		filter: grayscale(100%) brightness(0) invert(1) opacity(0.6);
		transition: all 0.4s ease;
	}
	
	.govuk-logo {
		filter: grayscale(100%) brightness(1.2) opacity(0.7);
	}
	
	.logo-item:hover .client-logo {
		filter: grayscale(0%) brightness(1) opacity(1);
		transform: scale(1.05);
	}
	
	.logo-item:hover .govuk-logo {
		filter: grayscale(0%) brightness(1) opacity(1);
	}
}

/* === MOBILE LAYOUT (480px and below) === */
/* Single column, large logos, clean presentation */
@media (max-width: 480px) {
	.trusted-by {
		padding: 3.5rem 0;
	}
	
	.trusted-heading {
		font-size: 0.9375rem;
		margin-bottom: 2.5rem;
		letter-spacing: 0.12em;
	}
	
	.logo-wall {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		align-items: center;
	}
	
	.logo-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 240px; /* Constrain width for better centering */
		padding: 1rem;
		background: rgba(255, 255, 255, 0.02);
		border-radius: 8px;
		transition: all 0.3s ease;
	}
	
	.logo-item:active {
		background: rgba(255, 255, 255, 0.04);
		transform: scale(0.98);
	}
	
	.client-logo {
		height: 38px; /* Larger, more readable on mobile */
		width: auto;
		max-width: 200px;
		object-fit: contain;
		filter: grayscale(100%) brightness(0) invert(1) opacity(0.7);
		transition: all 0.3s ease;
	}
	
	.govuk-logo {
		filter: grayscale(100%) brightness(1.2) opacity(0.8);
	}
	
	/* No hover on mobile, but active state for touch */
	.logo-item:active .client-logo {
		filter: grayscale(0%) brightness(1) opacity(1);
	}
	
	.logo-item:active .govuk-logo {
		filter: grayscale(0%) brightness(1) opacity(1);
	}
}

/* -------------------------------------------------------------------------
   About Me page only (page-about-me.php)
   ------------------------------------------------------------------------- */

.page-template-page-about-me .about-info-box {
	background: rgba(255, 255, 255, 0.04);
	border: 2px solid rgba(139, 92, 246, 0.35);
	border-radius: 12px;
	padding: 1.5rem 1.5rem;
	margin: 0 0 2rem;
}

.page-template-page-about-me .about-info-box__title {
	font-weight: 700;
	margin-bottom: 0.75rem;
	color: #C4B5FD;
	letter-spacing: 0.2px;
}

.page-template-page-about-me .about-info-box p {
	margin: 0;
	line-height: 1.75;
}

/* =========================================================
   About Me Page: Table of contents + Outline buttons
   Scoped to About Me template only
   ========================================================= */

body.page-template-page-about-me .about-toc-heading,
body.page-template-page-about-me-php .about-toc-heading {
	font-size: 1.6rem;
	margin-bottom: 1.5rem;
	margin-top: 2rem;
}

body.page-template-page-about-me .about-toc,
body.page-template-page-about-me-php .about-toc {
	background: rgba(255,255,255,0.03);
	border: 2px solid rgba(139, 92, 246, 0.30);
	border-radius: 12px;
	padding: 2rem;
	margin-bottom: 2rem;
	display: grid;
	gap: 0;
}

body.page-template-page-about-me .about-toc-link,
body.page-template-page-about-me-php .about-toc-link {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem 1rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	border-radius: 12px;
	transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

body.page-template-page-about-me .about-toc-link:last-child,
body.page-template-page-about-me-php .about-toc-link:last-child {
	border-bottom: none;
}

body.page-template-page-about-me .about-toc-num,
body.page-template-page-about-me-php .about-toc-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	flex-shrink: 0;
}

body.page-template-page-about-me .about-toc-title,
body.page-template-page-about-me-php .about-toc-title {
	color: #C4B5FD;
	font-size: 1.2rem;
	font-weight: 600;
}

body.page-template-page-about-me .about-toc-link:hover,
body.page-template-page-about-me-php .about-toc-link:hover,
body.page-template-page-about-me .about-toc-link:focus-visible,
body.page-template-page-about-me-php .about-toc-link:focus-visible {
	background: rgba(139, 92, 246, 0.12);
	transform: translateX(6px);
	box-shadow: 0 12px 26px rgba(139, 92, 246, 0.18);
}

body.page-template-page-about-me .about-toc-link:hover .about-toc-title,
body.page-template-page-about-me-php .about-toc-link:hover .about-toc-title,
body.page-template-page-about-me .about-toc-link:focus-visible .about-toc-title,
body.page-template-page-about-me-php .about-toc-link:focus-visible .about-toc-title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

body.page-template-page-about-me .about-toc-link:focus-visible,
body.page-template-page-about-me-php .about-toc-link:focus-visible {
	outline: 3px solid rgba(167, 139, 250, 0.55);
	outline-offset: 4px;
}

/* About Me: Outline button used for "See the full case study" links */
body.page-template-page-about-me .about-outline-btn,
body.page-template-page-about-me-php .about-outline-btn {
	--df-btn-fill: #ffffff;
	display: inline-flex !important;
	width: auto !important;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 1.7rem;
	border-radius: 14px;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 2px solid transparent;
	background:
		linear-gradient(var(--df-btn-fill), var(--df-btn-fill)) padding-box,
		linear-gradient(135deg, #EC4899 0%, #8B5CF6 55%, #7C3AED 100%) border-box;
	color: #7C3AED;
	box-shadow: 0 10px 24px rgba(124, 58, 237, 0.14);
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, background 0.25s ease;
}

body.page-template-page-about-me .about-outline-btn:visited,
body.page-template-page-about-me-php .about-outline-btn:visited {
	color: #7C3AED;
}

@keyframes df-about-btn-bounce {
	0% { transform: translateY(0); }
	60% { transform: translateY(-5px); }
	100% { transform: translateY(-3px); }
}

body.page-template-page-about-me .about-outline-btn:hover,
body.page-template-page-about-me-php .about-outline-btn:hover,
body.page-template-page-about-me .about-outline-btn:focus-visible,
body.page-template-page-about-me-php .about-outline-btn:focus-visible {
	--df-btn-fill: rgba(236, 72, 153, 0.08);
	box-shadow: 0 14px 32px rgba(124, 58, 237, 0.22);
	filter: saturate(1.05);
	animation: df-about-btn-bounce 0.35s ease-out forwards;
}

body.page-template-page-about-me .about-outline-btn:active,
body.page-template-page-about-me-php .about-outline-btn:active {
	animation: none;
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	body.page-template-page-about-me .about-outline-btn:hover,
	body.page-template-page-about-me-php .about-outline-btn:hover,
	body.page-template-page-about-me .about-outline-btn:focus-visible,
	body.page-template-page-about-me-php .about-outline-btn:focus-visible {
		animation: none;
		transform: translateY(-2px);
	}
}

@media (max-width: 600px) {
	body.page-template-page-about-me .about-outline-btn,
	body.page-template-page-about-me-php .about-outline-btn {
		display: inline-flex !important;
		width: auto !important;
	}
}


/* === EXTRA SMALL MOBILE (375px and below) === */
@media (max-width: 375px) {
	.logo-wall {
		gap: 1.75rem;
	}
	
	.logo-item {
		max-width: 220px;
		padding: 0.875rem;
	}
	
	.client-logo {
		height: 34px;
		max-width: 180px;
	}
}

/*--------------------------------------------------------------

/*--------------------------------------------------------------
# Value Propositions Section - Updated with White Cards
--------------------------------------------------------------*/

/* === BASE VALUE PROPS STYLES === */
.value-props {
	padding: 0;
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	position: relative;
}

.value-container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 5rem var(--spacing-md);
}

/* Hide variants by default */
.variant-a-content,
.variant-b-content,
.variant-c-content {
	display: none;
}

/* Show only active variant */
.value-props-variant-a .variant-a-content {
	display: grid;
}

.value-props-variant-b .variant-b-content {
	display: block;
}

.value-props-variant-c .variant-c-content {
	display: block;
}


/*--------------------------------------------------------------
# VARIANT A: 4-Column Value Cards - WHITE CARDS
--------------------------------------------------------------*/

.variant-a-content {
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.value-card {
	background: white; /* White cards that pop! */
	border-radius: 16px;
	padding: 2rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.value-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.value-title {
	font-family: 'Sora', sans-serif; /* Sora for headings */
	font-size: 1.25rem;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 1rem;
	line-height: 1.3;
}

.value-description {
	font-family: 'Inter', sans-serif; /* Inter for body text */
	font-size: 0.9375rem;
	color: #4a5568;
	line-height: 1.6;
}

/* Tablet */
@media (max-width: 768px) {
	.variant-a-content {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
	
	.value-card {
		padding: 1.5rem;
	}
	
	.value-title {
		font-size: 1.125rem;
	}
}

/* Mobile */
@media (max-width: 480px) {
	.value-container {
		padding: 3rem var(--spacing-md);
	}
	
	.variant-a-content {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	
	.value-card {
		padding: 1.5rem;
	}
	
	.value-title {
		font-size: 1.125rem;
	}
	
	.value-description {
		font-size: 0.875rem;
	}
}


/*--------------------------------------------------------------
# VARIANT B: 2-Row Credibility (keeping for switching)
--------------------------------------------------------------*/

.credibility-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
}

.cred-item {
	text-align: center;
}

.cred-item h3 {
	font-family: 'Sora', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: white;
	margin-bottom: 0.75rem;
}

.cred-item p {
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
}

@media (max-width: 768px) {
	.credibility-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
}

@media (max-width: 480px) {
	.credibility-row {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	.cred-item h3 {
		font-size: 1.25rem;
	}
}


/*--------------------------------------------------------------
# VARIANT C: Benefits Grid (keeping for switching)
--------------------------------------------------------------*/

.benefits-heading {
	font-family: 'Sora', sans-serif;
	text-align: center;
	font-size: 2rem;
	color: white;
	margin-bottom: 3rem;
	font-weight: 700;
}

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

.benefit-item {
	text-align: center;
	background: white;
	border-radius: 16px;
	padding: 2rem 1.5rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.benefit-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.benefit-icon {
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.benefit-item h3 {
	font-family: 'Sora', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 0.5rem;
}

.benefit-item p {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: #4a5568;
}

@media (max-width: 768px) {
	.benefits-heading {
		font-size: 1.5rem;
		margin-bottom: 2rem;
	}
	
	.benefits-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

@media (max-width: 480px) {
	.benefits-grid {
		grid-template-columns: 1fr;
	}
}


/*--------------------------------------------------------------

/*--------------------------------------------------------------
# Featured Case Study Section - Updated Layout
--------------------------------------------------------------*/

.featured-case-study {
	padding: 6rem 0;
	background: linear-gradient(135deg, #f0f4ff 0%, #e9e4ff 100%);
	position: relative;
}

.case-study-container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

/* Full Width Headline */
.case-study-headline {
	font-family: 'Sora', sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 3rem;
	line-height: 1.2;
	width: 100%;
}

/* Homepage Nectar case study content - 2 columns */
.featured-case-study .case-study-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: flex-start;
}

/* Left Column */
.case-study-left {
	color: var(--color-dark-secondary);
}

.problem-section {
	margin-bottom: 0; /* No margin since results moved to right */
}

.problem-text {
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	color: #4a5568;
	margin-bottom: 1.5rem;
	line-height: 1.7;
}

/* Process Bullet List - FIXED VERTICAL ALIGNMENT */
.process-list {
	font-family: 'Inter', sans-serif;
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
}

.process-list li {
	font-size: 1.0625rem;
	color: #4a5568;
	margin-bottom: 0.75rem;
	padding-left: 2rem;
	position: relative;
	line-height: 1.6;
	display: flex;
	align-items: center;
}

.process-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--gradient-start);
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 1.6;
	display: flex;
	align-items: center;
	height: 100%;
}

.solution-text {
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	color: #2d3748;
	font-weight: 500;
	line-height: 1.7;
	margin-top: 1.5rem;
}

/* Right Column - Results Box + CTA */
.case-study-right {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: flex-start; /* Prevents button stretching, allows content-hugging */
}

.results-box {
	background: white;
	width: 100%;
	padding: 2rem;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.results-heading {
	font-family: 'Sora', sans-serif;
	color: var(--gradient-start);
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 1.25rem;
}

.results-list {
	font-family: 'Inter', sans-serif;
	list-style: none;
	padding: 0;
	margin: 0;
}

.results-list li {
	padding: 0.75rem 0;
	padding-left: 2rem;
	position: relative;
	color: #4a5568;
	font-size: 1rem;
	line-height: 1.6;
}

.results-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.75rem;
	color: var(--gradient-start);
	font-weight: bold;
	font-size: 1.125rem;
}

.case-study-cta {
	display: inline-block;
	padding: 1rem 2rem;
	background: var(--color-dark-secondary);
	color: white;
	text-decoration: none;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1rem;
	font-family: 'Sora', sans-serif;
	transition: all 0.3s ease;
	text-align: center;
	width: auto; /* Content hugging on desktop */
}

.case-study-cta:visited {
	color: white;
}

.case-study-cta:hover {
	background: #363650;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Tablet */
@media (max-width: 968px) {
	.featured-case-study .case-study-content {
		gap: 3rem;
	}
	
	.case-study-headline {
		font-size: 2rem;
	}
}

/* Mobile - Only single column on small screens */
@media (max-width: 600px) {
	.featured-case-study {
		padding: 4rem 0;
	}
	
	.featured-case-study .case-study-content {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	
	.case-study-headline {
		font-size: 1.75rem;
		margin-bottom: 2rem;
	}
	
	.problem-text,
	.solution-text {
		font-size: 1rem;
	}
	
	.results-box {
		padding: 1.5rem;
	}
	
	/* Full width CTA on mobile */
	.case-study-cta {
		width: 100%;
		display: block;
	}
}

@media (max-width: 480px) {
	.featured-case-study {
		padding: 3rem 0;
	}
	
	.case-study-headline {
		font-size: 1.5rem;
	}
	
	.problem-text,
	.solution-text,
	.process-list li {
		font-size: 0.9375rem;
	}
	
	.results-list li {
		font-size: 0.9375rem;
	}
}

/*--------------------------------------------------------------

/*--------------------------------------------------------------

/*--------------------------------------------------------------
# Tools & Skills Section - Categorized with Color Logos
--------------------------------------------------------------*/

.tools-skills {
	padding: 6rem 0;
	background: var(--color-dark-secondary);
	position: relative;
}

.tools-container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.tools-heading {
	font-family: 'Sora', sans-serif;
	text-align: center;
	font-size: 2.5rem;
	font-weight: 700;
	color: white;
	margin-bottom: 1rem;
}

.tools-subheading {
	font-family: 'Inter', sans-serif;
	text-align: center;
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 4rem;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Category Sections */
.tools-category {
	margin-bottom: 4rem;
}

.tools-category:last-child {
	margin-bottom: 0;
}

.category-heading {
	font-family: 'Sora', sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 2rem;
	text-align: center;
}

/* Grid Layout */
.tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 2rem;
	max-width: 900px;
	margin: 0 auto;
}

/* Tool Items */
.tool-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 2rem 1.5rem;
	transition: all 0.3s ease;
	min-height: 140px;
}

.tool-item:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(167, 139, 250, 0.3);
	transform: translateY(-4px);
}

/* Tool Logo Styling - SEPARATE FROM CLIENT LOGOS */
/* Shows in color by default, becomes more vivid on hover */
.tool-logo {
	height: 48px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	opacity: 0.75; /* Slightly muted by default */
	filter: brightness(0.9) saturate(0.8); /* Slightly desaturated */
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.tool-item:hover .tool-logo {
	opacity: 1; /* Full opacity */
	filter: brightness(1.1) saturate(1.2); /* More vivid - brighter and more saturated */
	transform: scale(1.05);
}

/* Tool Name */
.tool-name {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 500;
	text-align: center;
	line-height: 1.3;
	transition: color 0.3s ease;
}

.tool-item:hover .tool-name {
	color: white;
}

/* ==================================================
   CASE STUDY TECH STACK GRIDS (900PX)
   ================================================== */

/* Tech Stack Container - 900px width NO internal padding */
.tech-stack-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 !important; /* No padding to achieve true 900px */
}

/* Tech Stack Grid */
.tech-stack-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	padding: 0 2rem; /* Padding applied HERE not on container */
}

/* Tech Stack Item */
.tech-stack-item {
	background: rgba(10, 10, 27, 0.65);
	border: 1px solid rgba(118, 154, 236, 0.2);
	border-radius: 12px;
	padding: 30px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 140px;
	transition: all 0.3s ease;
}

.tech-stack-item:hover {
	background: rgba(10, 10, 27, 0.85);
	border-color: rgba(118, 154, 236, 0.5);
	transform: translateY(-4px);
}

.tech-stack-item img {
	height: 48px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	transition: all 0.3s ease;
}

.tech-stack-item:hover img {
	transform: scale(1.05);
}

.tech-stack-item span {
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	color: white;
}

/* ==================================================
   PRICING CARDS WITH HOVER EFFECTS
   ================================================== */

/* Pricing Grid Container - 1200px width */
.pricing-grid-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 !important;
}

/* Pricing Grid */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	padding: 0 2rem;
}

/* Pricing Card */
.pricing-card {
	background: white;
	border-radius: 16px;
	padding: 2rem;
	border: 2px solid rgba(139, 92, 246, 0.3);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
}

.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.pricing-card.blue {
	border-color: rgba(59, 130, 246, 0.3);
}

.pricing-card.orange {
	border-color: rgba(251, 146, 60, 0.3);
}

/* Dubai Event Card */
.dubai-card {
	max-width: 700px;
	margin: 2rem auto;
}

.dubai-card-inner {
	background: rgba(255,255,255,0.05);
	border-radius: 16px;
	padding: 2.5rem;
	border: 2px solid rgba(59, 130, 246, 0.3);
	transition: all 0.3s ease;
}

.dubai-card-inner:hover {
	transform: translateY(-4px);
	border-color: rgba(59, 130, 246, 0.5);
	box-shadow: 0 8px 16px rgba(59, 130, 246, 0.1);
}

/* ==================================================
   RESPONSIVE BREAKPOINTS
   ================================================== */

/* Tech Stack Grid Responsive */
@media (max-width: 968px) {
	.tech-stack-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.tech-stack-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Pricing Grid Responsive */
@media (max-width: 968px) {
	.pricing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.pricing-grid {
		grid-template-columns: 1fr;
	}
}

/* Tablet */
@media (max-width: 968px) {
	.tools-grid {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 1.5rem;
	}
	
	.tools-heading {
		font-size: 2rem;
	}
	
	.tools-subheading {
		font-size: 1rem;
		margin-bottom: 3rem;
	}
	
	.category-heading {
		font-size: 1.125rem;
		margin-bottom: 1.5rem;
	}
	
	.tool-item {
		padding: 1.5rem 1rem;
		min-height: 120px;
	}
	
	.tool-logo {
		height: 40px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.tools-skills {
		padding: 4rem 0;
	}
	
	.tools-category {
		margin-bottom: 3rem;
	}
	
	.tools-grid {
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: 1.25rem;
	}
	
	.tools-heading {
		font-size: 1.75rem;
	}
	
	.category-heading {
		font-size: 1rem;
	}
	
	.tool-item {
		padding: 1.25rem 0.75rem;
		min-height: 100px;
		gap: 0.75rem;
	}
	
	.tool-logo {
		height: 36px;
	}
	
	.tool-name {
		font-size: 0.8125rem;
	}
}

@media (max-width: 480px) {
	.tools-skills {
		padding: 3rem 0;
	}
	
	.tools-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	
	.tools-heading {
		font-size: 1.5rem;
		margin-bottom: 0.75rem;
	}
	
	.tools-subheading {
		font-size: 0.9375rem;
		margin-bottom: 2rem;
	}
	
	.category-heading {
		font-size: 0.9375rem;
		margin-bottom: 1.25rem;
	}
	
	.tool-item {
		padding: 1rem 0.5rem;
		min-height: 90px;
	}
	
	.tool-logo {
		height: 32px;
	}
	
	.tool-name {
		font-size: 0.75rem;
	}
}
# Footer Position Fix - Remove admin bar gap
--------------------------------------------------------------*/

/* Remove any bottom spacing caused by WordPress admin bar */
html {
	margin-bottom: 0 !important;
}

body {
	margin-bottom: 0 !important;
}

/* Ensure footer sits flush at bottom */
.site-footer {
	margin-bottom: 0;
	position: relative;
}

/* Remove admin bar bottom compensation */
.admin-bar {
	margin-bottom: 0 !important;
}

.admin-bar body {
	margin-bottom: 0 !important;
}

/*--------------------------------------------------------------
# CTA Section - Final Call to Action
--------------------------------------------------------------*/

.cta-section {
	padding: 6rem 0;
	background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
	text-align: center;
	position: relative;
}

/* Subtle top border */
.cta-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.3), transparent);
}

.cta-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.cta-headline {
	font-family: 'Sora', sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: white;
	margin-bottom: 1.5rem;
	line-height: 1.2;
}

/* Gradient highlight for "who delivers results?" - MATCHES HERO */
.cta-headline .highlight-gradient {
	background: linear-gradient(135deg, 
		var(--color-purple-medium) 0%, 
		var(--color-purple-light) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Impact Section in CTA - Left Aligned */
.cta-impact {
	max-width: 700px;
	margin: 2rem auto 3rem;
	text-align: left;
}

.cta-impact-heading {
	font-family: 'Sora', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-purple-medium);
	margin-bottom: 1rem;
}

.cta-impact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cta-impact-list li {
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.9);
	padding: 0.75rem 0 0.75rem 2rem;
	position: relative;
	line-height: 1.6;
}

.cta-impact-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.75rem;
	color: var(--color-purple-medium);
	font-weight: bold;
	font-size: 1.125rem;
}

.cta-subheading {
	font-family: 'Inter', sans-serif;
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 3rem;
	line-height: 1.8;
	text-align: left;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.cta-subheading p {
	margin-bottom: 1.25rem;
}

.cta-subheading p:last-child {
	margin-bottom: 0;
}

/* CTA Buttons */
.cta-buttons {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

/* Primary CTA - Purple Gradient */
.cta-primary {
	font-family: 'Sora', sans-serif;
	display: inline-block;
	padding: 1.125rem 2.5rem;
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	color: white;
	text-decoration: none;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1.125rem;
	transition: background 0.3s ease;
	border: none;
}

.cta-primary:visited {
	color: white;
}

.cta-primary:hover {
	background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
	color: white; /* Text stays white */
}

/* Secondary CTA - Outline */
.cta-secondary {
	font-family: 'Sora', sans-serif;
	display: inline-block;
	padding: 1.125rem 2.5rem;
	background: transparent;
	color: white;
	text-decoration: none;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1.125rem;
	border: 2px solid rgba(167, 139, 250, 0.5);
	transition: background 0.3s ease, border-color 0.3s ease;
}

.cta-secondary:visited {
	color: white;
}

.cta-secondary:hover {
	background: rgba(167, 139, 250, 0.1);
	border-color: rgba(167, 139, 250, 0.8);
	color: white; /* Text stays white - no color change */
}

/* Tablet */
@media (max-width: 968px) {
	.cta-section {
		padding: 5rem 0;
	}
	
	.cta-headline {
		font-size: 2rem;
	}
	
	.cta-subheading {
		font-size: 1.125rem;
		margin-bottom: 2.5rem;
	}
	
	.cta-primary,
	.cta-secondary {
		font-size: 1rem;
		padding: 1rem 2rem;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.cta-section {
		padding: 4rem 0;
	}
	
	.cta-headline {
		font-size: 1.75rem;
		margin-bottom: 1.25rem;
	}
	
	.cta-subheading {
		font-size: 1rem;
		margin-bottom: 2rem;
		text-align: center; /* Center on mobile */
	}
	
	.cta-subheading p {
		margin-bottom: 1rem;
	}
	
	.cta-buttons {
		flex-direction: column;
		gap: 1rem;
	}
	
	.cta-primary,
	.cta-secondary {
		width: 100%;
		max-width: 300px;
	}
}

@media (max-width: 480px) {
	.cta-section {
		padding: 3rem 0;
	}
	
	.cta-headline {
		font-size: 1.5rem;
	}
	
	.cta-subheading {
		font-size: 0.9375rem;
	}
	
	.cta-primary,
	.cta-secondary {
		padding: 1rem 1.5rem;
		font-size: 0.9375rem;
	}
}

/*--------------------------------------------------------------
/*--------------------------------------------------------------
# Skills Breakdown Section - Purple Card Design
--------------------------------------------------------------*/

.skills-breakdown {
	padding: 6rem 0;
	background: linear-gradient(135deg, #0A0A1B 0%, #1a1a2e 100%);
	position: relative;
}

.skills-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

/* Column Styles - Cards with rounded corners */
.skills-column {
	padding: 3.5rem 3rem;
	border-radius: 24px;
	min-height: 500px;
}

/* Left Column - Dark Purple Card */
.research-skills {
	background: #2E2D45;
	color: white;
}

/* Right Column - Light Purple Gradient Card */
.design-skills {
	background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
	color: white;
}

/* Tagline */
.skills-tagline {
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	margin-bottom: 1rem;
	font-weight: 500;
	opacity: 0.9;
}

/* Section Heading */
.skills-heading {
	font-family: 'Sora', sans-serif;
	font-size: 2.25rem;
	font-weight: 700;
	margin-bottom: 2.5rem;
	line-height: 1.2;
}

/* Skills List */
.skills-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.skills-list li {
	display: flex;
	align-items: center; /* Perfect vertical alignment */
	gap: 1rem;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

/* Icon - Circle with Checkmark */
.skill-icon {
	font-size: 0.875rem;
	font-weight: bold;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

/* Left Column Icons - Lighter purple circles */
.research-skills .skill-icon {
	background: rgba(167, 139, 250, 0.3);
	color: white;
}

/* Right Column Icons - DARKER purple circles for contrast */
.design-skills .skill-icon {
	background: rgba(255, 255, 255, 0.25); /* White with transparency for better contrast */
	color: white;
	border: 2px solid rgba(255, 255, 255, 0.4); /* Add border for definition */
}

/* Skill Text */
.skill-text {
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.6;
}

/* Tablet */
@media (max-width: 968px) {
	.skills-breakdown {
		padding: 5rem 0;
	}
	
	.skills-container {
		gap: 2rem;
	}
	
	.skills-column {
		padding: 3rem 2.5rem;
	}
	
	.skills-heading {
		font-size: 2rem;
	}
	
	.skill-text {
		font-size: 1rem;
	}
}

/* Mobile - Stack Columns */
@media (max-width: 768px) {
	.skills-breakdown {
		padding: 4rem 0;
	}
	
	.skills-container {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	.skills-column {
		padding: 3rem 2rem;
		min-height: auto;
	}
	
	.skills-heading {
		font-size: 1.75rem;
		margin-bottom: 2rem;
	}
	
	.skill-text {
		font-size: 0.9375rem;
	}
	
	.skills-list li {
		margin-bottom: 1.25rem;
	}
}

@media (max-width: 480px) {
	.skills-breakdown {
		padding: 3rem 0;
	}
	
	.skills-column {
		padding: 2.5rem 1.5rem;
		border-radius: 16px;
	}
	
	.skills-heading {
		font-size: 1.5rem;
	}
	
	.skills-tagline {
		font-size: 0.9375rem;
	}
	
	.skill-text {
		font-size: 0.875rem;
	}
	
	.skill-icon {
		font-size: 0.75rem;
		width: 24px;
		height: 24px;
	}
}

/*--------------------------------------------------------------
# Portfolio Grid Page
--------------------------------------------------------------*/

.portfolio-page {
	background: var(--color-dark);
}

/* Portfolio Hero */
.portfolio-hero {
	padding: 8rem 0 6rem;
	text-align: center;
	position: relative;
	overflow: hidden;
	
	/* Layered background: diagonal pattern + radial gradients (same as hero section) */
	background: 
		url('assets/diagonal-pattern-medium.svg'),
		radial-gradient(
			circle at 75% 25%,
			rgba(139, 92, 246, 0.12) 0%,
			rgba(139, 92, 246, 0.06) 25%,
			rgba(10, 10, 27, 0) 50%
		),
		radial-gradient(
			circle at 25% 75%,
			rgba(167, 139, 250, 0.08) 0%,
			rgba(167, 139, 250, 0.04) 25%,
			rgba(10, 10, 27, 0) 50%
		),
		var(--color-dark-bg);
	
	background-repeat: repeat, no-repeat, no-repeat, no-repeat;
	background-size: 60px 60px, auto, auto, auto;
	background-position: 0 0, center, center, center;
}

.portfolio-hero-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.portfolio-title {
	font-family: 'Sora', sans-serif;
	font-size: 3.5rem;
	font-weight: 700;
	color: white;
	margin-bottom: 1.5rem;
	line-height: 1.1;
}

.portfolio-subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.6;
}

/* Portfolio Grid */
.portfolio-grid-section {
	padding: 6rem 0;
	background: linear-gradient(135deg, #0A0A1B 0%, #1a1a2e 100%);
}

.portfolio-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 3rem;
}

/* Case Study Card */
.case-study-card {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	overflow: hidden;
	transition: all 0.3s ease;
	border: 1px solid rgba(167, 139, 250, 0.1);
	display: flex;
	flex-direction: column;
}

.case-study-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 40px rgba(167, 139, 250, 0.2);
	border-color: rgba(167, 139, 250, 0.3);
}

/* Featured Card - Spans 2 Columns */
.case-study-card.featured {
	grid-column: span 2;
	flex-direction: row;
}

.case-study-image {
	position: relative;
	width: 100%;
	padding-bottom: 60%;
	background: linear-gradient(135deg, #2E2D45 0%, #1a1a2e 100%);
	overflow: hidden;
}

.case-study-card.featured .case-study-image {
	padding-bottom: 0;
	width: 50%;
	flex-shrink: 0;
}

.case-study-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.case-study-card:hover .case-study-image img {
	opacity: 1;
	transform: scale(1.05);
}

.case-study-overlay {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
}

.featured-badge {
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-family: 'Sora', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Portfolio card content - flex column layout */
.case-study-card .case-study-content {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.case-study-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	gap: 1rem;
}

.case-study-meta .company {
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	color: #A78BFA; /* Match additional-company color */
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.case-study-meta .category {
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}

.case-study-title {
	font-family: 'Sora', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: white;
	margin-bottom: 1rem;
	line-height: 1.3;
}

.case-study-description {
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
	margin-bottom: 1.5rem;
	flex-grow: 1;
}

.case-study-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.case-study-tags .tag {
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	padding: 0.375rem 0.875rem;
	background: rgba(167, 139, 250, 0.1);
	color: rgba(167, 139, 250, 1);
	border-radius: 20px;
	border: 1px solid rgba(167, 139, 250, 0.2);
}

.case-study-button {
	font-family: 'Sora', sans-serif;
	display: inline-block;
	padding: 0.875rem 1.75rem;
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	color: white;
	text-decoration: none;
	border-radius: 12px;
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background 0.3s ease;
	align-self: flex-start;
}

.case-study-button:visited {
	color: white;
}

.case-study-button:hover {
	background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
	color: white;
}

/* Portfolio CTA */
.portfolio-cta {
	padding: 6rem 0;
	background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
	text-align: center;
}

.portfolio-cta-container {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.portfolio-cta h2 {
	font-family: 'Sora', sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: white;
	margin-bottom: 1rem;
}

.portfolio-cta p {
	font-family: 'Inter', sans-serif;
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 2rem;
	line-height: 1.6;
}

/* Tablet */
@media (max-width: 968px) {
	.portfolio-title {
		font-size: 2.5rem;
	}
	
	.portfolio-container {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	.case-study-card.featured {
		grid-column: span 1;
		flex-direction: column;
	}
	
	.case-study-card.featured .case-study-image {
		width: 100%;
		padding-bottom: 60%;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.portfolio-hero {
		padding: 6rem 0 4rem;
	}
	
	.portfolio-title {
		font-size: 2rem;
	}
	
	.portfolio-subtitle {
		font-size: 1rem;
	}
	
	.portfolio-grid-section {
		padding: 4rem 0;
	}
	
	.case-study-title {
		font-size: 1.25rem;
	}
	
	.portfolio-cta h2 {
		font-size: 1.75rem;
	}
}

/*--------------------------------------------------------------
# Case Study Styling
--------------------------------------------------------------*/

/* Case Study Page Layout */
.case-study-page.site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Hero Section */
.case-hero {
	background: linear-gradient(135deg, var(--color-dark-bg) 0%, var(--color-dark-secondary) 100%);
	padding: 60px 2rem;
}

.hero-container {
	max-width: 1200px;
	margin: 0 auto;
}

.company-badge {
	display: inline-block;
	background: rgba(167, 139, 250, 0.1);
	border: 1px solid rgba(167, 139, 250, 0.2);
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-family: 'Sora', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 2rem;
	color: var(--color-purple-medium);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Brand-specific company badge colors */
.company-badge.meta,
.company-badge.facebook {
	background: #1877F2;
	border-color: #1877F2;
	color: white;
}

.company-badge.unibet {
	background: #34AC51;
	border-color: #34AC51;
	color: white;
}

.company-badge.natwest {
	background: #5D2A8F;
	border-color: #5D2A8F;
	color: white;
}

.company-badge.nationwide {
	background: #003D6A;
	border-color: #003D6A;
	color: white;
}

.company-badge.nectar,
.company-badge.sainsburys {
	background: #FDB71A;
	border-color: #F59E0B;
	color: #522B7F;
}

.company-badge.orange {
	background: #FF6600;
	border-color: #FF6600;
	color: white;
}

.company-badge.bt {
	background: #5514B4;
	border-color: #5514B4;
	color: white;
}

.company-badge.royal-mail {
	background: #E60000;
	border-color: #E60000;
	color: white;
}

.company-badge.santander {
	background: #EC0000;
	border-color: #EC0000;
	color: white;
}

.company-badge.financial-times {
	background: #FFF1E5;
	border-color: #D4B5A0;
	color: #33302E;
}

.company-badge.totaljobs {
	background: #00A9CE;
	border-color: #00A9CE;
	color: white;
}

.company-badge.bq {
	background: #FF6600;
	border-color: #FF6600;
	color: white;
}

.company-badge.westminster {
	background: #9B1D20;
	border-color: #9B1D20;
	color: white;
}

.company-badge.ahdb {
	background: #00693C;
	border-color: #00693C;
	color: white;
}

.company-badge.clicktools {
	background: #0066CC;
	border-color: #0066CC;
	color: white;
}

.company-badge.img {
	background: #000000;
	border-color: #000000;
	color: white;
}

.company-badge.mp-silva {
	background: #003B5C;
	border-color: #003B5C;
	color: white;
}

.company-badge.tara,
.company-badge.snooker-tv,
.company-badge.grippy,
.company-badge.juriosity,
.company-badge.digital-gurus,
.company-badge.amberlight {
	background: rgba(59, 130, 246, 0.15);
	border-color: rgba(59, 130, 246, 0.3);
	color: #60A5FA;
}

.case-hero h1 {
	font-family: 'Sora', sans-serif;
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: white;
	margin-bottom: 1.5rem;
	max-width: 900px;
}

.hero-subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
	max-width: 700px;
	margin-bottom: 3rem;
}

.hero-meta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(167, 139, 250, 0.1);
}

.meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.meta-label {
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.meta-value {
	font-family: 'Sora', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-purple-light);
}

/* Main Content Container */
.case-content {
	background: var(--color-dark-bg);
}

/* Section Spacing */
.content-section {
	padding: 5rem 2rem;
}

.content-section-alt {
	padding: 5rem 2rem;
	background: var(--color-dark-secondary);
}

/* Light background sections */
.content-section-light {
	padding: 5rem 2rem;
	background: #F8F7FF;
}

/* Light section text colors - WCAG AAA compliant */
.case-study-page .content-section-light h2,
.case-study-page .content-section-light h3,
.case-study-page .content-section-light h4 {
	color: var(--color-dark-bg);
}

.case-study-page .content-section-light p,
.case-study-page .content-section-light ul li {
	color: #1F2937 !important; /* Darker for better contrast - WCAG AAA */
}

.case-study-page .content-section-light strong {
	color: var(--color-dark-bg);
}

.case-study-page .content-section-light .callout {
	background: rgba(99, 102, 241, 0.08);
	border-left-color: var(--gradient-start);
}

.case-study-page .content-section-light .callout-title {
	color: var(--gradient-start);
}

.case-study-page .content-section-light .callout p {
	color: #1F2937; /* Darker for better contrast */
}

.case-study-page .content-section-light ul li::before {
	color: var(--gradient-start);
}

.case-study-page .content-section-light .research-card {
	background: white;
	border-color: rgba(99, 102, 241, 0.15);
}

.case-study-page .content-section-light .research-card h4 {
	color: var(--color-dark-bg);
}

.case-study-page .content-section-light .research-card p {
	color: #1F2937; /* Darker for better contrast */
}

.case-study-page .content-section-light .image-container {
	background: white;
	border-color: rgba(99, 102, 241, 0.15);
}

.case-study-page .content-section-light .image-caption {
	color: #1F2937; /* Darker for better contrast */
	background: rgba(0, 0, 0, 0.05);
}

/* Single Column Layout (836px) */
.single-column {
	max-width: 836px;
	margin: 0 auto;
}

/* Two Column Layout */
.two-column {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
}

/* Fix alignment - account for paragraph margins */
.two-column > div:first-child p:first-child {
	margin-top: 0;
}

.two-column > div:last-child {
	margin-top: 0;
}

.two-column .image-container {
	margin-top: 0;
}

/* Section Number Badge */
.section-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	color: white;
	border-radius: 50%;
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	margin-bottom: 1.5rem;
}

/* Case Study Typography */
.case-study-page h2 {
	font-family: 'Sora', sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: white;
	margin-bottom: 2rem;
	line-height: 1.2;
}

.case-study-page h3 {
	font-family: 'Sora', sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: white;
	margin: 2.5rem 0 1.5rem;
	line-height: 1.3;
}

/* Remove top margin in two-column layouts for alignment */
.two-column h3:first-child {
	margin-top: 0;
}

.case-study-page h4 {
	font-family: 'Sora', sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	color: white;
	margin: 1.5rem 0 1rem;
}

.case-study-page p {
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--color-text-secondary);
	margin-bottom: 1.5rem;
}

.case-study-page strong {
	color: var(--color-text-primary);
	font-weight: 600;
}

/* Lists - avoid affecting navigation */
.case-study-page .case-content ul {
	list-style: none;
	list-style-type: none !important;
	list-style-image: none !important;
	padding: 0;
	margin: 1.5rem 0;
}

/* Suppress default list markers in content sections */
.case-study-page .content-section-alt ul,
.case-study-page .content-section ul,
.content-section-alt ul,
.content-section ul {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	padding: 0;
	margin: 1.5rem 0;
}

.case-study-page .case-content ul li {
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	color: var(--color-text-secondary);
	padding: 0.75rem 0;
	padding-left: 2rem;
	position: relative;
	line-height: 1.7;
	list-style: none !important;
	list-style-type: none !important;
}

/* Suppress default markers in content sections */
.case-study-page .content-section-alt ul li,
.case-study-page .content-section ul li,
.content-section-alt ul li,
.content-section ul li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
}

/* Remove ::marker pseudo-element (modern browsers) */
.case-study-page .content-section-alt ul li::marker,
.case-study-page .content-section ul li::marker,
.content-section-alt ul li::marker,
.content-section ul li::marker,
.case-study-page .case-content ul li::marker {
	content: none !important;
	display: none !important;
}

.case-study-page .case-content ul li strong {
	/* Removed white-space: nowrap to allow proper text flow */
}

.case-study-page .case-content ul li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--color-purple-medium);
	font-weight: bold;
	font-size: 1.25rem;
	top: 0.75rem; /* Adjusted from 50% transform to fixed position */
}

/* Custom list styles - override default arrows */
.case-study-page .case-content ul.no-bullets li::before,
.case-study-page .content-section-light ul.no-bullets li::before,
.case-study-page .content-section-alt ul.no-bullets li::before {
	content: none !important;
}

.case-study-page .case-content ul.checkmark-list li::before,
.case-study-page .content-section-light ul.checkmark-list li::before,
.case-study-page .content-section-alt ul.checkmark-list li::before {
	content: "✓" !important;
	color: #10B981 !important;
	font-weight: bold;
	font-size: 1.25rem;
}

.case-study-page .case-content ul.xmark-list li::before,
.case-study-page .content-section-light ul.xmark-list li::before,
.case-study-page .content-section-alt ul.xmark-list li::before {
	content: "✗" !important;
	color: #EF4444 !important;
	font-weight: bold;
	font-size: 1.25rem;
}

/* Nested lists (sub-bullets) */
.case-study-page .case-content ul li ul {
	margin: 0.5rem 0 0 0;
}

.case-study-page .case-content ul li ul li {
	padding-left: 1.5rem;
	font-size: 1rem;
}

.case-study-page .case-content ul li ul li::before {
	content: "•";
	font-size: 1rem;
	top: 0.85rem;
}

/* Callout Box */
.callout {
	background: rgba(167, 139, 250, 0.05);
	border-left: 3px solid var(--color-purple-medium);
	padding: 2rem;
	margin: 2.5rem 0;
	border-radius: 0 8px 8px 0;
}

.callout-title {
	font-family: 'Sora', sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-purple-light);
	margin-bottom: 1rem;
}

.callout p {
	margin-bottom: 1rem;
}

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

/* Solution Box - Inner callout for emphasis */
.solution-box {
	background: rgba(99, 102, 241, 0.08);
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: 6px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
}

.solution-box p {
	margin: 0;
}

/* Hook Section Challenge Box */
.hook-challenge-box {
	background: linear-gradient(135deg, rgba(118,154,236,0.1) 0%, rgba(158,186,237,0.1) 100%);
	border: 2px solid rgba(118,154,236,0.3);
	padding: 2rem;
	border-radius: 8px;
	margin-bottom: 2rem;
}

.hook-challenge-box h3 {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 1.4rem;
}

.hook-challenge-box p {
	margin-bottom: 1rem;
}

.hook-challenge-box p:last-child {
	margin: 0;
	font-size: 1.1rem;
}

.hook-challenge-box p:first-of-type {
	font-size: 1.1rem;
}

.hook-challenge-box ul {
	margin: 0 0 1rem 0; /* Remove default left margin */
	padding-left: 1.5rem; /* 24px - just enough for bullets */
}

.hook-challenge-box ul li {
	margin-bottom: 0.5rem;
}

.solution-box ul {
	margin: 0;
}

.solution-box li {
	margin: 0;
}

.solution-title {
	margin-bottom: 0.75rem !important;
	color: var(--color-purple-light);
	font-size: 1.0625rem;
}

.solution-list {
	margin: 0;
	padding-left: 1.5rem;
	list-style: none;
}

.solution-list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
}

.solution-list li:last-child {
	margin-bottom: 0;
}

.solution-list li:before {
	content: "→";
	position: absolute;
	left: 0;
	color: #6366f1;
	font-weight: 700;
}

/* Insight Box for Research Findings */
.insight-box {
	background: rgba(167, 139, 250, 0.05);
	border: 1px solid rgba(167, 139, 250, 0.15);
	padding: 2rem;
	margin: 2rem 0;
	border-radius: 8px;
}

/* Remove margin when insight-box is inside a grid */
[style*="display: grid"] .insight-box,
[style*="display:grid"] .insight-box,
.hook-grid .insight-box {
	margin: 0;
}

.insight-box h4 {
	font-family: 'Sora', sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: white;
	margin-bottom: 1rem;
}

.insight-box p {
	margin-bottom: 0.75rem;
}

.insight-box p:last-of-type {
	margin-bottom: 0;
}

/* Hook Section Styles */
.hook-section-title {
	font-size: 2.2rem;
	margin-bottom: 1.5rem;
}

.hook-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 2rem 0;
}

.hook-box {
	background: rgba(167, 139, 250, 0.05);
	border: 1px solid rgba(167, 139, 250, 0.15);
	padding: 2rem;
	border-radius: 8px;
}

/* Remove margin when hook-box is inside hook-grid */
.hook-grid .hook-box {
	margin: 0;
}

.hook-box h4 {
	font-family: 'Sora', sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

/* Hook box heading colors for different themes */
.hook-box h4.hook-blue {
	color: #60A5FA;
}

.hook-box h4.hook-orange {
	color: #FB923C;
}

.hook-box h4.hook-purple {
	color: #A78BFA;
}

.hook-box p {
	margin: 0;
	font-size: 1.05rem;
}

.hook-demonstration {
	margin-top: 2rem;
}

.hook-demonstration strong {
	color: white;
}

/* Research Image Placeholder */
.research-image-placeholder {
	margin-top: 1.5rem;
	background: rgba(167, 139, 250, 0.03);
	border: 2px dashed rgba(167, 139, 250, 0.2);
	border-radius: 8px;
	padding: 3rem 2rem;
	text-align: center;
}

.placeholder-content {
	max-width: 400px;
	margin: 0 auto;
}

.placeholder-icon {
	font-size: 3rem;
	display: block;
	margin-bottom: 1rem;
}

.placeholder-text {
	font-family: 'Sora', sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-purple-light);
	margin-bottom: 0.5rem;
}

.placeholder-subtext {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* Image Container */
.image-container {
	margin: 3rem 0;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(167, 139, 250, 0.1);
}

/* Wide image container for flow diagrams - 1200px max-width */
.image-wide {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.image-container img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 7px;
}

.image-placeholder {
	background: rgba(167, 139, 250, 0.03);
	border: 2px dashed rgba(167, 139, 250, 0.2);
	border-radius: 8px;
	padding: 4px;
	text-align: center;
	color: var(--color-text-secondary);
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
}

.image-caption {
	padding: 1rem 1.5rem;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	font-style: italic;
	text-align: center;
	background: rgba(0, 0, 0, 0.2);
}

/* Research Cards Grid */
.research-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin: 3rem 0;
}

.research-card {
	background: rgba(167, 139, 250, 0.05);
	padding: 2rem;
	border-radius: 12px;
	border: 1px solid rgba(167, 139, 250, 0.1);
}

.research-icon {
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.research-card h4 {
	margin-top: 0;
}

.research-card p {
	font-size: 0.9375rem;
	margin: 0;
}

/* Impact Section */
.impact-section {
	background: linear-gradient(135deg, var(--color-dark-secondary) 0%, var(--color-dark-bg) 100%);
	padding: 6rem 2rem;
}

.impact-container {
	max-width: 1200px;
	margin: 0 auto;
}

.impact-section h2 {
	text-align: center;
	margin-bottom: 3rem;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-bottom: 3rem;
}

.stat-card {
	background: rgba(167, 139, 250, 0.08);
	padding: 2.5rem 1.5rem;
	border-radius: 12px;
	text-align: center;
	border: 1px solid rgba(167, 139, 250, 0.15);
	transition: all 0.3s ease;
}

.stat-card:hover {
	background: rgba(167, 139, 250, 0.12);
	border-color: rgba(167, 139, 250, 0.3);
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(99, 102, 241, 0.15);
}

.stat-number {
	font-family: 'Sora', sans-serif;
	font-size: 3rem;
	font-weight: 700;
	color: white;
	margin-bottom: 0.5rem;
	line-height: 1;
	background: linear-gradient(135deg, var(--color-purple-light) 0%, var(--color-purple-medium) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.stat-label {
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
	line-height: 1.4;
}

.impact-quote {
	max-width: 836px;
	margin: 0 auto;
	background: rgba(167, 139, 250, 0.05);
	padding: 2.5rem;
	border-left: 3px solid var(--color-purple-medium);
	font-family: 'Inter', sans-serif;
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--color-text-secondary);
}

.impact-quote p {
	margin-bottom: 1.5rem;
}

.impact-quote p:last-child {
	margin-bottom: 0;
}

/* Case Study CTA */
.case-cta {
	padding: 5rem 2rem;
	text-align: center;
	background: var(--color-dark-bg);
}

.case-cta .cta-container {
	max-width: 700px;
	margin: 0 auto;
}

.case-cta h2 {
	font-family: 'Sora', sans-serif;
	font-size: 2rem;
	margin-bottom: 1rem;
	color: white;
}

.case-cta p {
	font-size: 1.125rem;
	margin-bottom: 2rem;
	color: rgba(255, 255, 255, 0.9);
}

/* Footer CTA */
.footer-cta {
	padding: 5rem 2rem 8rem;
	text-align: center;
	background: var(--color-dark-bg);
}

.footer-cta-container {
	max-width: 700px;
	margin: 0 auto;
}

.footer-cta h3 {
	font-family: 'Sora', sans-serif;
	font-size: 2rem;
	margin-bottom: 1rem;
	color: white;
}

.footer-cta p {
	font-size: 1.125rem;
	margin-bottom: 2rem;
	color: white;
}

.cta-buttons {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	flex-wrap: wrap;
}

.btn {
	display: inline-block;
	padding: 1rem 2rem;
	border-radius: 8px;
	text-decoration: none;
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	transition: all 0.3s ease;
}

.btn-primary {
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	color: white;
	transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:visited,
.btn-primary:active,
.btn-primary:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
	color: white;
}

.btn-secondary {
	background: transparent;
	color: white;
	border: 2px solid var(--color-purple-medium);
	transition: all 0.3s ease;
}

.btn-secondary:hover,
.btn-secondary:visited,
.btn-secondary:active,
.btn-secondary:focus {
	transform: translateY(-2px);
	background: rgba(167, 139, 250, 0.1);
	border-color: var(--color-purple-light);
	color: white;
	box-shadow: 0 8px 16px rgba(99, 102, 241, 0.2);
}

/* Responsive - Tablet */
@media (max-width: 968px) {
	.hero-meta,
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.research-grid {
		grid-template-columns: 1fr;
	}
	
	.two-column {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* Responsive - Mobile */
@media (max-width: 768px) {
	.case-hero h1 {
		font-size: 2.5rem;
		line-height: 1.1;
	}
	
	.case-study-page h2 {
		font-size: 2rem;
	}
	
	.case-study-page h3 {
		font-size: 1.5rem;
	}
	
	.hero-meta,
	.stats-grid {
		grid-template-columns: 1fr;
	}
	
	.content-section,
	.content-section-alt,
	.content-section-light {
		padding: 3rem 1.5rem;
	}
	
	/* Mobile typography adjustments */
	.case-study-page p {
		font-size: 1rem;
	}
	
	.case-study-page .case-content ul li {
		font-size: 1rem;
	}
	
	/* Mobile spacing */
	.case-hero {
		padding: 40px 1.5rem;
	}
	
	.hero-subtitle {
		font-size: 1.125rem;
	}
	
	/* Ensure images don't overflow */
	.image-container {
		margin-left: 0;
		margin-right: 0;
	}
	
	/* Stack stat cards nicely */
	.stat-number {
		font-size: 2.5rem;
	}
	
	.stat-label {
		font-size: 0.875rem;
	}
	
	/* Callout boxes on mobile */
	.callout {
		padding: 1.5rem;
	}
	
	/* Research cards on mobile */
	.research-grid {
		gap: 1.5rem;
	}
	
	.cta-buttons {
		flex-direction: column;
	}
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
	.case-hero h1 {
		font-size: 2rem;
	}
	
	.case-study-page h2 {
		font-size: 1.75rem;
	}
	
	.case-hero {
		padding: 30px 1rem;
	}
	
	.content-section,
	.content-section-alt,
	.content-section-light {
		padding: 2.5rem 1rem;
	}
	
	.stat-number {
		font-size: 2rem;
	}
	
	.hero-meta {
		gap: 1.5rem;
	}
	
	.meta-label {
		font-size: 0.75rem;
	}
	
	.meta-value {
		font-size: 0.9375rem;
	}
}

/* Global gradient text highlight - can be used anywhere */
.gradient-text {
	background: linear-gradient(135deg, 
		var(--color-purple-medium) 0%, 
		var(--color-purple-light) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* === PROJECT CARDS (3-COLUMN GRID) === */
/* For Meta case study and similar layouts */

.projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin: 3rem 0;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.project-card {
	background: white;
	padding: 2rem;
	border-radius: 12px;
	border: 1px solid rgba(99, 102, 241, 0.15);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.project-card:hover {
	border-color: rgba(99, 102, 241, 0.3);
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(99, 102, 241, 0.15);
	background: rgba(255, 255, 255, 0.98);
}

.project-icon {
	font-size: 2.5rem;
	line-height: 1;
}

.project-card h4 {
	margin: 0;
	font-size: 1.125rem;
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	color: var(--color-dark-bg);
}

.project-card p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--color-light-text);
	flex-grow: 1;
}

/* Dark section project cards */
.content-section .project-card,
.content-section-alt .project-card {
	background: rgba(167, 139, 250, 0.05);
	border-color: rgba(167, 139, 250, 0.1);
}

.content-section .project-card:hover,
.content-section-alt .project-card:hover {
	background: rgba(167, 139, 250, 0.08);
	border-color: rgba(167, 139, 250, 0.3);
}

.content-section .project-card h4,
.content-section-alt .project-card h4 {
	color: white;
}

.content-section .project-card p,
.content-section-alt .project-card p {
	color: var(--color-text-secondary);
}

/* Tablet - 2 columns */
@media (max-width: 968px) {
	.projects-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

/* Mobile - 1 column */
@media (max-width: 768px) {
	.projects-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.project-card {
		padding: 1.5rem;
	}
	
	/* Mobile list adjustments for case studies */
	.case-study-page .case-content ul li {
		font-size: 1rem;
		padding-left: 1.75rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	
	.case-study-page .case-content ul li::before {
		font-size: 1.125rem;
		top: 0.5rem;
	}
	
	.case-study-page .case-content ul li ul li {
		padding-left: 1.25rem;
		font-size: 0.9375rem;
	}
}

/* Gradient text for light backgrounds - darker/more saturated */
.gradient-text-light {
	background: linear-gradient(135deg, 
		#6366F1 0%, 
		#8B5CF6 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* =============================================
   Additional Projects Section
   ============================================= */

/* Section Divider */
.portfolio-divider {
	padding: 3rem 0;
	background: var(--color-dark-bg);
}

.divider-line {
	height: 2px;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(167, 139, 250, 0.4) 50%, 
		transparent 100%
	);
}

/* Additional Projects Section - Matching main portfolio structure */
.additional-projects-section {
	background: #1a1a2e;
	padding: 5rem 0 7rem;
}

/* Wrapper for proper layout */
.additional-projects-wrapper {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.additional-projects-header {
	margin-bottom: 4rem;
}

/* Left-aligned title - 900px max-width */
.additional-projects-header .section-title {
	font-family: 'Sora', sans-serif;
	font-size: 2.25rem;
	font-weight: 700;
	color: white;
	margin-bottom: 1rem;
	letter-spacing: -0.02em;
	text-align: left;
	max-width: 900px;
}

/* Left-aligned subtitle - 700px max-width */
.additional-projects-header .section-subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
	text-align: left;
	max-width: 700px;
}

/* Project Groups - Full width container */
.project-group {
	max-width: 1400px;
	margin: 0 auto 4rem;
	padding: 0 var(--spacing-md);
}

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

.project-group .group-title {
	font-family: 'Sora', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: white;
	margin-bottom: 2rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(167, 139, 250, 0.15);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Archive Badge */
.archive-badge {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(167, 139, 250, 0.9);
	background: rgba(167, 139, 250, 0.15);
	padding: 0.25rem 0.625rem;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Additional Projects Grid - Force 3 columns */
.additional-projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	width: 100%;
}

/* Additional Case Card - Matching main portfolio structure */
.additional-case-card {
	background: #252541;
	border-radius: 16px;
	overflow: hidden;
	transition: all 0.3s ease;
	border: 1px solid rgba(167, 139, 250, 0.1);
	display: flex;
	flex-direction: column;
}

.additional-case-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2);
	border-color: rgba(167, 139, 250, 0.3);
}

.additional-case-image {
	position: relative;
	width: 100%;
	padding-bottom: 60%;
	overflow: hidden;
	background: #1a1a2e;
}

.additional-case-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease, opacity 0.3s ease;
	opacity: 0.85;
}

.additional-case-card:hover .additional-case-image img {
	transform: scale(1.05);
	opacity: 1;
}

/* Card content with better spacing */
.additional-case-content {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.additional-company {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: #A78BFA;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: block;
	margin-bottom: 0.625rem;
}

/* Larger, more readable title */
.additional-title {
	font-family: 'Sora', sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	color: white;
	margin-bottom: 0.875rem;
	line-height: 1.3;
}

/* Larger, more readable description */
.additional-description {
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 1.25rem;
	flex-grow: 1;
}

.additional-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

/* Slightly larger tags for readability */
.mini-tag {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(167, 139, 250, 0.9);
	background: rgba(167, 139, 250, 0.12);
	padding: 0.375rem 0.625rem;
	border-radius: 4px;
	line-height: 1;
}

/* Clearer link styling */
.additional-link {
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #A78BFA;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: color 0.2s ease;
	margin-top: auto;
}

.additional-link:visited {
	color: #A78BFA;
}

.additional-link:hover {
	color: #C4B5FD;
}

/* Tablet Responsive */
@media (max-width: 968px) {
	.additional-projects-header .section-title {
		font-size: 2rem;
	}
	
	.additional-projects-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.additional-projects-section {
		padding: 3rem 0 4rem;
	}
	
	.additional-projects-header {
		margin-bottom: 2.5rem;
		padding: 0 1rem;
	}
	
	.additional-projects-header .section-title {
		font-size: 1.75rem;
	}
	
	.additional-projects-header .section-subtitle {
		font-size: 0.9375rem;
	}
	
	.additional-projects-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	.additional-case-image {
		height: 180px;
	}
	
	.additional-case-content {
		padding: 1.5rem;
	}
	
	.additional-title {
		font-size: 1.25rem;
	}
	
	.additional-description {
		font-size: 0.9375rem;
	}
}

/* ====================================
   IMAGE MODAL / LIGHTBOX
   ==================================== */

.image-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.image-modal.active {
	opacity: 1;
}

/* Modal Content Container */
.modal-content {
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Modal Image */
#modalImage {
	max-width: 100%;
	max-height: calc(90vh - 120px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Modal Caption */
.modal-caption {
	margin-top: 1.5rem;
	text-align: center;
	max-width: 800px;
	color: white;
}

.modal-counter {
	display: inline-block;
	background: rgba(99, 102, 241, 0.2);
	color: var(--color-purple-light);
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.modal-description {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	margin: 0.5rem 0 0 0;
}

/* Navigation Buttons */
.modal-close,
.modal-prev,
.modal-next {
	position: fixed;
	background: rgba(99, 102, 241, 0.15);
	border: 1px solid rgba(99, 102, 241, 0.3);
	color: white;
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s ease;
	backdrop-filter: blur(10px);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-close:hover,
.modal-prev:hover,
.modal-next:hover {
	background: rgba(99, 102, 241, 0.3);
	border-color: rgba(99, 102, 241, 0.5);
	transform: scale(1.05);
}

.modal-close:active,
.modal-prev:active,
.modal-next:active {
	transform: scale(0.95);
}

/* Close Button */
.modal-close {
	top: 1.5rem;
	right: 1.5rem;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	font-size: 2rem;
	padding: 0;
}

/* Previous Button */
.modal-prev {
	left: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	padding: 0 0 0 4px;
}

.modal-prev:hover {
	transform: translateY(-50%) scale(1.05);
}

.modal-prev:active {
	transform: translateY(-50%) scale(0.95);
}

/* Next Button */
.modal-next {
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	padding: 0 4px 0 0;
}

.modal-next:hover {
	transform: translateY(-50%) scale(1.05);
}

.modal-next:active {
	transform: translateY(-50%) scale(0.95);
}

/* Loading State */
#modalImage.loading {
	opacity: 0.5;
}

/* Responsive */
@media (max-width: 768px) {
	.modal-content {
		max-width: 95vw;
		max-height: 95vh;
	}
	
	#modalImage {
		max-height: calc(95vh - 100px);
	}
	
	.modal-close {
		top: 1rem;
		right: 1rem;
		width: 48px;
		height: 48px;
		font-size: 1.75rem;
	}
	
	.modal-prev,
	.modal-next {
		width: 48px;
		height: 48px;
		font-size: 2rem;
	}
	
	.modal-prev {
		left: 0.5rem;
	}
	
	.modal-next {
		right: 0.5rem;
	}
	
	.modal-caption {
		padding: 0 1rem;
	}
	
	.modal-description {
		font-size: 0.9375rem;
	}
}

/* Cursor for clickable images */
.case-study-page .image-container img {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.case-study-page .image-container img:hover {
	opacity: 0.9;
}


/* Blue gradient for case study hooks - TRUE BLUE for informative/standout content */
/* Distinct from purple brand color - WCAG AAA compliant on #0a0a1b background */
.gradient-text-blue {
	background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: inline-block;
}

/* ===== NAVIGATION FIXES ===== */

/* COMPLETELY HIDE ALL SUBMENUS - User has flat menu structure only */
.main-navigation .sub-menu,
.main-navigation ul ul,
.nav-menu .sub-menu,
#primary-menu .sub-menu,
.menu-item-has-children .sub-menu,
.menu-item-has-children ul,
li.menu-item ul {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Remove dropdown indicators */
.main-navigation .menu-item-has-children > a::after,
.menu-item-has-children > a::after {
	display: none !important;
}

/* Removed global gap !important rule - was overriding mobile menu spacing */

/* Hide Orange Portal Homescreen from navigation */
.main-navigation a[href*="orange-portal-homescreen"],
.nav-menu a[href*="orange-portal-homescreen"],
#primary-menu a[href*="orange-portal-homescreen"],
li a[href*="orange-portal-homescreen"] {
	display: none !important;
}

/* Hide parent li if it only contains Orange Portal */
li:has(> a[href*="orange-portal-homescreen"]) {
	display: none !important;
}

/* Active state for Portfolio link when viewing case studies */
body.page-template-page-portfolio-php .main-navigation a[href*="portfolio"],
body.post-type-archive-portfolio .main-navigation a[href*="portfolio"],
body.tax-portfolio_category .main-navigation a[href*="portfolio"],
body.single-portfolio .main-navigation a[href*="portfolio"] {
	color: #A78BFA !important;
	position: relative !important;
}

body.page-template-page-portfolio-php .main-navigation a[href*="portfolio"]::after,
body.post-type-archive-portfolio .main-navigation a[href*="portfolio"]::after,
body.tax-portfolio_category .main-navigation a[href*="portfolio"]::after,
body.single-portfolio .main-navigation a[href*="portfolio"]::after {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 2px !important;
	background: #A78BFA !important;
	display: block !important;
}

/* Responsive two-column grids for case studies */
@media (max-width: 768px) {
	div[style*="grid-template-columns: 1fr 1fr"] {
		grid-template-columns: 1fr !important;
	}
}

/* ===== COMPARISON BOXES (Two-Column Layouts) ===== */
/* Used in IMG Models and other case studies for side-by-side comparisons */

/* Grid wrapper for two-column comparisons */
.case-study-page .comparison-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 2rem 0;
}

/* Red comparison box (problems, challenges) */
.case-study-page .comparison-box-red {
	background: rgba(239, 68, 68, 0.15);
	border: 2px solid rgba(239, 68, 68, 0.4);
	border-radius: 12px;
	padding: 2rem;
}

/* Green comparison box (solutions, workarounds) */
.case-study-page .comparison-box-green {
	background: rgba(16, 185, 129, 0.15);
	border: 2px solid rgba(16, 185, 129, 0.4);
	border-radius: 12px;
	padding: 2rem;
}

/* Blue comparison box (decisions, outcomes) */
.case-study-page .comparison-box-blue {
	background: rgba(59, 130, 246, 0.15);
	border: 2px solid rgba(59, 130, 246, 0.4);
	border-radius: 12px;
	padding: 2rem;
}

/* Titles in comparison boxes */
.case-study-page .comparison-box-red .comparison-box-title {
	color: #DC2626;
	margin: 0 0 1.5rem 0;
	font-size: 1.3rem;
	font-weight: 700;
}

.case-study-page .comparison-box-green .comparison-box-title {
	color: #059669;
	margin: 0 0 1.5rem 0;
	font-size: 1.3rem;
	font-weight: 700;
}

.case-study-page .comparison-box-blue .comparison-box-title {
	color: #2563EB;
	margin: 0 0 1.5rem 0;
	font-size: 1.3rem;
	font-weight: 700;
}

/* Paragraphs in comparison boxes */
.case-study-page .comparison-box-red p,
.case-study-page .comparison-box-green p,
.case-study-page .comparison-box-blue p {
	margin-bottom: 1rem;
}

.case-study-page .comparison-box-red p:last-of-type,
.case-study-page .comparison-box-green p:last-of-type,
.case-study-page .comparison-box-blue p:last-of-type {
	margin-bottom: 0.75rem;
}

/* Lists in comparison boxes */
.case-study-page .comparison-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* List items with bullet alignment */
.case-study-page .comparison-list li {
	padding: 0.75rem 0 0.75rem 2rem;
	position: relative;
	color: #1F2937;
}

/* Bullet icon positioning */
.case-study-page .comparison-list li span {
	position: absolute;
	left: 0;
}

/* Responsive: stack columns on mobile */
@media (max-width: 768px) {
	.case-study-page .comparison-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ------------------------------------------------------------
   Portfolio Access Gate (Light Background)
   Matches the intended two-column Figma layout
------------------------------------------------------------ */

.portfolio-access-page {
	/* Override global .site-main max-width so the light background spans full width */
	max-width: none !important;
	width: 100%;
	margin: 0 !important;
	padding: 0;
	background: #F9FAFB;
	min-height: calc(100vh - 140px);
}

.portfolio-access-wrapper {
	max-width: 1080px;
	margin: 0 auto;
	/* Match site spacing: ~60px between nav and content */
	padding: 60px 32px 60px;
}

.portfolio-access-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.portfolio-access-title {
	font-family: "Sora", sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 3vw, 44px);
	line-height: 1.15;
	margin: 0 0 14px;
	color: #0A0A1B;
}

.portfolio-access-intro {
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: #4A5568;
	margin: 0 0 28px;
}

.portfolio-access-form {
	background: #FFFFFF;
	border: 1px solid #D1D5DB;
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.portfolio-access-label {
	display: block;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #0A0A1B;
	margin: 0 0 8px;
}

.portfolio-access-input {
	width: 100%;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	padding: 14px 14px;
	border: 1px solid #D1D5DB;
	border-radius: 10px;
	outline: none;
	background: #FFFFFF;
	color: #0A0A1B;
}

.portfolio-access-input:focus {
	border-color: #6366F1;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.35);
}

.portfolio-access-button {
	width: 100%;
	margin-top: 14px;
	border: none;
	border-radius: 12px;
	padding: 14px 16px;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #FFFFFF;
	background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
	cursor: pointer;
	transition: transform 120ms ease, opacity 120ms ease;
}

.portfolio-access-button:hover {
	background: linear-gradient(90deg, #818CF8 0%, #A78BFA 100%);
}

.portfolio-access-form.is-loading .portfolio-access-button {
	opacity: 0.92;
}

.portfolio-access-button:disabled {
	cursor: not-allowed;
	transform: none;
}

.portfolio-gate-message {
	margin-top: 14px;
	border-radius: 10px;
	padding: 12px 12px;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.portfolio-gate-message.error {
	color: #DC2626;
	background: #FEF2F2;
	border: 1px solid rgba(220, 38, 38, 0.25);
}

.portfolio-gate-message.success {
	color: #16A34A;
	background: #F0FDF4;
	border: 1px solid rgba(22, 163, 74, 0.25);
}

.portfolio-nda-panel {
	margin-top: 18px;
	background: rgba(167, 139, 250, 0.08);
	border: 1px solid rgba(167, 139, 250, 0.22);
	border-radius: 14px;
	padding: 20px;
}

.portfolio-nda-title {
	font-family: "Sora", sans-serif;
	font-weight: 600;
	font-size: 18px;
	color: #0A0A1B;
	margin: 0 0 10px;
}

.portfolio-nda-text {
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: #4A5568;
	margin: 0;
}

.portfolio-access-card {
	background: #FFFFFF;
	border: 1px solid #D1D5DB;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

.portfolio-access-card-title {
	font-family: "Sora", sans-serif;
	font-weight: 700;
	font-size: 24px;
	margin: 0 0 10px;
	color: #0A0A1B;
}

.portfolio-access-card-intro {
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: #4A5568;
	margin: 0 0 18px;
}

.portfolio-contact-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	border: 1px solid #D1D5DB;
	border-radius: 12px;
	padding: 14px 14px;
	margin-bottom: 14px;
	background: #FFFFFF;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.portfolio-contact-row:hover {
	border-color: #6366F1;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.portfolio-contact-label {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: #4A5568;
}

.portfolio-contact-value {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #0A0A1B;
}

.portfolio-access-footnote {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: #4A5568;
	margin: 8px 0 0;
}

/* Spinner used in the "Verifying access…" button state */
.df-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 2px solid rgba(255,255,255,0.45);
	border-top-color: rgba(255,255,255,0.95);
	margin-right: 10px;
	vertical-align: -3px;
	animation: df-spin 900ms linear infinite;
}

@keyframes df-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
	.portfolio-access-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.portfolio-access-wrapper {
		padding: 48px 20px 48px;
	}
}

/* --------------------------------------------------------------------------
   Samsung Internet (Force Dark) fallbacks
   --------------------------------------------------------------------------
   Samsung Internet's "Force dark mode" can:
   - Remap colors (especially gradients and translucent backgrounds)
   - Break gradient text techniques (background-clip:text + transparent fill)
   - Double-apply inversion/filters on SVG/logo images

   The strategy here is:
   1) Only target Samsung Internet via the .is-samsung class
      (added by js/samsung-hook.js)
   2) Replace gradient/clipped text with solid, tested accent colors
   3) Replace gradient buttons with solid fills
   4) Remove logo filters that can get "double-inverted"

   Accent colors you validated as "working":
   - Lavender: #C4B5FD
   - Sky:      #60A5FA
-------------------------------------------------------------------------- */

html.is-samsung {
	/* Hint to the UA that the site supports dark UI; can reduce aggressive remapping. */
	color-scheme: dark;
}

/* 1) Header logo text (was clipped gradient) */
html.is-samsung .logo-text {
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	color: #C4B5FD !important;
	-webkit-text-fill-color: #C4B5FD !important;
}

/* 2) Any generic gradient/clipped text utility: force solid */
html.is-samsung .text-gradient,
html.is-samsung .highlight-gradient,
html.is-samsung .gradient-text,
html.is-samsung [style*="background-clip: text"],
html.is-samsung [style*="-webkit-background-clip: text"],
html.is-samsung [style*="-webkit-text-fill-color: transparent"] {
	background-image: none !important;
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	/* default to Sky for highlighted words */
	color: #60A5FA !important;
	-webkit-text-fill-color: #60A5FA !important;
}

/* 3) Primary CTA buttons (was gradient) */
html.is-samsung .btn,
html.is-samsung .btn-primary,
html.is-samsung a.btn,
html.is-samsung button.btn {
	background-image: none !important;
}

html.is-samsung .btn-primary {
	background-color: #60A5FA !important;
	border-color: rgba(96,165,250,0.65) !important;
	color: #0A0A1B !important;
	box-shadow: 0 10px 26px rgba(96,165,250,0.18) !important;
}

html.is-samsung .btn-primary:hover,
html.is-samsung .btn-primary:focus {
	background-color: #C4B5FD !important;
	border-color: rgba(196,181,253,0.70) !important;
	color: #0A0A1B !important;
}

html.is-samsung .btn-secondary {
	background: transparent !important;
	border-color: rgba(96,165,250,0.60) !important;
	color: #60A5FA !important;
}

html.is-samsung .btn-secondary:hover,
html.is-samsung .btn-secondary:focus {
	background-color: rgba(96,165,250,0.12) !important;
	color: #C4B5FD !important;
	border-color: rgba(196,181,253,0.65) !important;
}

/* 4) The small hero pill / badge-like elements */
html.is-samsung .hero-pill,
html.is-samsung .company-badge,
html.is-samsung .company-badge span {
	background-image: none !important;
	background-color: rgba(96,165,250,0.14) !important;
	border-color: rgba(96,165,250,0.30) !important;
	color: #C4B5FD !important;
}

/* 5) SVG / logo images: avoid double inversion */
html.is-samsung img[src$=".svg"],
html.is-samsung .client-logo,
html.is-samsung .skill-icon,
html.is-samsung .tool-icon {
	filter: none !important;
}

/* Some logos use the theme's invert filter for light-on-dark. On Samsung, prefer no filter + slightly higher opacity. */
html.is-samsung .client-logo {
	opacity: 0.95 !important;
}



/* ------------------------------------------------------------
   Subtle reveal-on-scroll animations (Homepage + Portfolio)
   - Avoids animating hero/header sections
   - Respects prefers-reduced-motion
------------------------------------------------------------ */

.reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-on-scroll.reveal-no-anim {
  transition: none !important;
}

.reveal-on-scroll.reveal-delay-0 { transition-delay: 0ms; }
.reveal-on-scroll.reveal-delay-1 { transition-delay: 60ms; }
.reveal-on-scroll.reveal-delay-2 { transition-delay: 120ms; }
.reveal-on-scroll.reveal-delay-3 { transition-delay: 180ms; }
.reveal-on-scroll.reveal-delay-4 { transition-delay: 240ms; }
.reveal-on-scroll.reveal-delay-5 { transition-delay: 300ms; }
.reveal-on-scroll.reveal-delay-6 { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}