/**
 * Accessibility & readability overrides (WCAG-oriented)
 * Loaded after main.css / vendor.css
 */

/* Allow pinch-zoom (viewport also updated in HTML) */
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

/* Stronger default text on light surfaces */
body {
	color: #4a4a4a;
}

.grey-section p.lead,
#about p.lead,
#portfolio p.lead {
	color: #555555;
}

/* Portfolio: equal columns across available width */
#portfolio .portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.4rem;
	width: 94%;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	align-items: stretch;
	box-sizing: border-box;
}
#portfolio .portfolio-grid--two {
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 2.4rem;
}
#portfolio .portfolio-grid:before,
#portfolio .portfolio-grid:after {
	display: none !important;
	content: none !important;
}
#portfolio .portfolio-grid > .col-four,
#portfolio .portfolio-grid > .col-six,
#portfolio .portfolio-grid > .case-card {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	clear: none !important;
	margin: 0 !important;
}
#portfolio .case-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 2.8rem 3rem !important;
	background: #ffffff;
	border: 1px solid #e1e1e1;
	border-radius: 8px;
}
#portfolio .case-card h3 {
	margin-top: 0;
	margin-bottom: 1.4rem;
	font-size: 1.8rem;
	line-height: 1.3;
}
#portfolio .case-card p {
	font-size: 1.5rem;
	line-height: 1.55;
	margin-bottom: 1.1rem;
}
#portfolio .case-card p:last-child {
	margin-top: auto;
	margin-bottom: 0;
}
#portfolio .case-card .case-links {
	margin-top: auto;
	margin-bottom: 0;
	font-size: 1.45rem;
}
#portfolio .case-card .case-links a {
	color: #7c5295;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
#portfolio .case-card .case-links a:hover,
#portfolio .case-card .case-links a:focus {
	color: #5a3a6e;
}
@media only screen and (max-width: 900px) {
	#portfolio .portfolio-grid,
	#portfolio .portfolio-grid--two {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}
	#portfolio .case-card {
		padding: 2.4rem 2.4rem !important;
	}
}

#portfolio .portfolio-cta {
	width: 94%;
	max-width: none;
	margin: 3rem auto 0;
	text-align: center;
}
#portfolio .portfolio-cta .col-twelve {
	float: none;
	width: 100%;
	padding: 0;
}
#portfolio .portfolio-cta .lead {
	margin: 0 auto;
	text-align: center;
}

/* -------------------------------------------------------------------------- */
/* About: one type system, calmer hierarchy (content unchanged)               */
/* -------------------------------------------------------------------------- */
#about {
	padding-bottom: 10rem;
}
#about .section-intro {
	max-width: 820px;
	margin-bottom: 4rem;
}
#about .section-intro h1 {
	font-family: "poppins-medium", sans-serif;
	letter-spacing: -0.02em;
}
#about .intro-info {
	margin-top: 3rem;
	margin-left: 0;
	margin-right: 0;
	overflow: hidden;
}
#about .intro-info img {
	height: 12rem;
	width: 12rem;
	margin: 0 2.4rem 1.2rem 0;
}
#about .intro-info .lead,
#about .intro-info .lead span {
	font-family: "poppins-regular", sans-serif !important;
	font-size: 1.7rem !important;
	line-height: 1.65 !important;
	color: #4a4a4a !important;
	font-style: normal !important;
	font-weight: 400 !important;
	padding-left: 0;
	text-align: left;
}

#about .about-content {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}
#about .about-content h3 {
	font-family: "poppins-bold", sans-serif;
	font-size: 1.5rem;
	line-height: 1.4;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
	color: #313131;
	margin: 0 0 1.6rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid #e8e8e8;
}
#about .about-content > .col-six > h3:not(:first-child) {
	margin-top: 3.2rem;
}
#about .about-content p {
	font-family: "poppins-regular", sans-serif;
	font-size: 1.55rem;
	line-height: 1.6;
	color: #4a4a4a;
	margin: 0 0 1.2rem;
}
#about .about-content p em,
#about .about-content em {
	font-family: "poppins-regular", sans-serif !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-style: italic;
	color: #666666;
}

/* Profile facts */
#about .info-list {
	margin-top: 2rem;
}
#about .info-list li {
	padding: 0 0 1.2rem;
	margin: 0 0 1.2rem;
	border-bottom: 1px solid #f0f0f0;
}
#about .info-list li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}
#about .info-list li strong {
	display: block;
	font-family: "poppins-bold", sans-serif !important;
	font-size: 1.2rem !important;
	line-height: 1.4 !important;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
	color: #7c5295 !important;
	font-weight: normal;
	margin-bottom: 0.4rem;
}
#about .info-list li > span {
	display: block;
	font-family: "poppins-regular", sans-serif !important;
	font-size: 1.55rem !important;
	line-height: 1.5 !important;
	color: #4a4a4a !important;
}

/* Languages */
#about .languages-list {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0;
}
#about .languages-list li {
	line-height: 1.55 !important;
	margin: 0 0 0.35rem;
	font-family: "poppins-regular", sans-serif;
	font-size: 1.5rem;
	color: #4a4a4a;
}
#about .languages-list li a {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: #4a4a4a !important;
	text-decoration: none;
	cursor: default;
}
#about .languages-list li em {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-style: normal;
	color: #666666;
}

/* Skills / how I work lists */
#about .soft-skills {
	list-style: none;
	margin: 0;
	padding: 0;
}
#about .soft-skills li {
	font-family: "poppins-regular", sans-serif;
	font-size: 1.5rem;
	line-height: 1.55;
	color: #4a4a4a;
	margin: 0 0 1.2rem;
	padding: 0;
}
#about .soft-skills li strong {
	font-family: "poppins-bold", sans-serif !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: #313131 !important;
	font-weight: normal;
}
#about .soft-skills li em {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-style: normal;
	color: #555555;
}

/* About CTAs */
#about .button-section {
	margin-top: 2rem;
}
#about .button-section .col-twelve {
	float: none;
	width: 100%;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.2rem;
}
#about .button-section .button,
#about .button-section .button:first-child {
	width: auto !important;
	min-width: 18rem;
	margin: 0 !important;
}
@media only screen and (max-width: 768px) {
	#about .intro-info img {
		float: none;
		display: block;
		margin: 0 auto 1.6rem;
	}
	#about .intro-info .lead,
	#about .intro-info .lead span {
		text-align: center !important;
	}
	#about .about-content h3 {
		text-align: left;
	}
	#about .button-section .button,
	#about .button-section .button:first-child {
		width: 100% !important;
		min-width: 0;
	}
}

/* Services CTA: long label needs room + true centering */
#services .button-section {
	text-align: center;
	margin-top: 1.2rem;
}
#services .button-section .col-twelve {
	float: none;
	width: 100%;
	padding: 0;
	display: flex;
	justify-content: center;
}
#services .button-section .button,
#services .button-section .button:first-child {
	width: auto !important;
	max-width: 100%;
	min-width: 28rem;
	height: auto !important;
	line-height: 1.35 !important;
	white-space: normal;
	padding: 1.6rem 3.2rem !important;
	margin: 0 auto !important;
	display: inline-block;
	text-align: center;
	background: #7c5295 !important;
	color: #ffffff !important;
	border: none;
	border-radius: 6px;
}
#services .button-section .button span {
	display: inline;
	white-space: normal;
}
#services .button-section .button:hover,
#services .button-section .button:focus {
	background: #5e3d74 !important;
	color: #ffffff !important;
}
@media only screen and (max-width: 600px) {
	#services .button-section .button,
	#services .button-section .button:first-child {
		min-width: 0;
		width: 100% !important;
		padding: 1.4rem 2rem !important;
	}
}

/* Dark sections: lighter body text */
#intro,
#services,
#contact,
footer {
	color: #d0d0d0;
}

#services .section-intro p,
#contact .section-intro p {
	color: rgba(255, 255, 255, 0.85);
}

/* Section eyebrows: readable purple on dark */
#services .section-intro h5,
#contact .section-intro h5,
.contact-info h5 {
	color: #c4a3d8;
}

/* Links: keep high contrast; purple hover still ok on light */
a, a:visited {
	color: #1a1a1a;
}
#services a,
#contact a,
footer a,
#intro a {
	color: #e8d5f5;
}
a:hover, a:focus, a:active,
#services a:hover, #services a:focus,
#contact a:hover, #contact a:focus,
footer a:hover, footer a:focus {
	color: #7c5295;
}

/* Keyboard focus: never remove without replacement */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.menu-toggle:focus-visible {
	outline: 2px solid #b491c8;
	outline-offset: 3px;
}

.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
a.button:focus {
	outline: 2px solid #b491c8;
	outline-offset: 3px;
}

/* Stroke buttons on dark intro */
#intro .button.stroke {
	border-color: rgba(255, 255, 255, 0.85);
	color: #ffffff;
}
#intro .button.stroke:hover,
#intro .button.stroke:focus {
	border-color: #c4a3d8;
	color: #c4a3d8;
}

/* -------------------------------------------------------------------------- */
/* Contact — mailto / tel CTAs                                                */
/* -------------------------------------------------------------------------- */

#contact .contact-cta {
	max-width: 640px;
	margin: 0 auto 2rem;
	text-align: center;
}

#contact .contact-cta-copy {
	color: #d0d0d0;
	font-size: 1.6rem;
	line-height: 1.6;
	margin: 0 0 2.4rem;
}

#contact .contact-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.4rem;
}

#contact .contact-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(100%, 22rem);
	margin: 0;
}

/* Skip link for keyboard users */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 1rem 1.6rem;
	background: #7c5295;
	color: #fff;
	font-family: "poppins-bold", sans-serif;
	text-decoration: none;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Services cards on dark: ensure readable body */
#services .about-content h3 {
	color: #ffffff;
}
#services .about-content p {
	color: #d0d0d0;
}
#services .about-content em {
	color: #c4a3d8;
}

/* Services: even 2x2 grid (equal gaps, equal card stretch) */
#services .section-intro {
	max-width: 900px;
}
#services .services-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.4rem;
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
	align-items: stretch;
}
#services .services-grid:before,
#services .services-grid:after {
	display: none !important;
	content: none !important;
}
#services .services-grid > .col-six,
#services .services-grid > .service-card {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	clear: none !important;
}
#services .service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 2.8rem 3rem !important;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
}
#services .service-card h3 {
	margin-top: 0;
	margin-bottom: 1.4rem;
	font-size: 1.8rem;
	line-height: 1.3;
	letter-spacing: 0.06rem;
}
#services .service-card p {
	font-size: 1.55rem;
	line-height: 1.55;
	margin-bottom: 1.1rem;
}
#services .service-card p:last-child {
	margin-top: auto;
	margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
	#services .services-grid {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}
	#services .service-card {
		padding: 2.4rem 2.4rem !important;
	}
}

/* Hero: role + stack as two lines (not pipe-separated boxes) */
.intro-content .intro-position {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.2rem;
}
.intro-content .intro-position span::before,
.intro-content .intro-position span::after {
	content: none !important;
	display: none !important;
	padding: 0 !important;
}
.intro-content .intro-position .intro-role {
	display: block;
	color: #ffffff;
	font-family: "poppins-medium", sans-serif;
	font-size: 2rem;
	line-height: 1.35;
	letter-spacing: 0.12rem;
	text-transform: none;
}
.intro-content .intro-position .intro-stack {
	display: block;
	color: #c4a3d8;
	font-size: 1.4rem;
	line-height: 1.4;
	letter-spacing: 0.08rem;
	text-transform: none;
	opacity: 0.95;
}
@media only screen and (max-width: 768px) {
	.intro-content .intro-position .intro-role {
		font-size: 1.6rem;
	}
	.intro-content .intro-position .intro-stack {
		font-size: 1.2rem;
	}
}

/* -------------------------------------------------------------------------- */
/* Header menu: soft pill instead of black rectangle                          */
/* -------------------------------------------------------------------------- */
header .logo {
	display: none !important;
}
header .top-bar {
	background: transparent !important;
	min-width: 0 !important;
	min-height: 0 !important;
	left: 2rem !important;
	top: 1.6rem !important;
	right: auto;
	padding: 0;
}
header .menu-toggle {
	float: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0.95rem 1.55rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid rgba(255, 255, 255, 0.95) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	color: #1a1a1a !important;
	line-height: 1 !important;
	overflow: visible;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
header .menu-toggle:hover,
header .menu-toggle:focus {
	background: #ffffff !important;
	border-color: #c4a3d8 !important;
	color: #1a1a1a !important;
}

/* Label is <em>, not <span> — avoids theme .menu-toggle span hamburger rules */
header .menu-toggle-label {
	display: block !important;
	position: static !important;
	font-style: normal !important;
	font-family: "poppins-medium", sans-serif !important;
	font-size: 1.35rem !important;
	line-height: 1 !important;
	letter-spacing: 0.12rem !important;
	margin: 0 !important;
	/* letter-spacing adds space after the last glyph — pull it back */
	margin-inline-end: -0.12rem !important;
	padding: 0 !important;
	text-transform: uppercase !important;
	color: #1a1a1a !important;
	background: transparent !important;
	/* optical vertical center with caps + icon */
	transform: translateY(0.04em);
}
header .menu-toggle-label::before,
header .menu-toggle-label::after {
	content: none !important;
	display: none !important;
}

/* Full 18×14 icon box so flex centers icon with label on the same mid-line */
header .menu-toggle-bars {
	display: block !important;
	position: relative !important;
	right: auto !important;
	left: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: 18px !important;
	height: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 18px !important;
	align-self: center;
	/* middle bar */
	background: linear-gradient(#7c5295, #7c5295) center / 18px 2px no-repeat !important;
	border-radius: 0;
	font: inherit !important;
	color: transparent !important;
	text-shadow: none !important;
	transform: none !important;
	overflow: visible !important;
}
header .menu-toggle > .menu-toggle-bars::before,
header .menu-toggle > .menu-toggle-bars::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	width: 18px !important;
	height: 2px !important;
	background-color: #7c5295 !important;
	border-radius: 2px;
	transition: top 0.2s ease, bottom 0.2s ease, transform 0.2s ease;
}
header .menu-toggle > .menu-toggle-bars::before {
	top: 0 !important;
	bottom: auto !important;
	transform: none;
}
header .menu-toggle > .menu-toggle-bars::after {
	top: auto !important;
	bottom: 0 !important;
	transform: none;
}

/* Open: small X centered in the 14px box */
header .menu-toggle.is-clicked .menu-toggle-bars {
	background: none !important;
}
header .menu-toggle.is-clicked > .menu-toggle-bars::before {
	top: 6px !important;
	bottom: auto !important;
	transform: rotate(45deg);
}
header .menu-toggle.is-clicked > .menu-toggle-bars::after {
	top: 6px !important;
	bottom: auto !important;
	transform: rotate(-45deg);
}
header .menu-toggle.is-clicked .menu-toggle-label {
	color: #1a1a1a !important;
}

/* Dropdown panel under the pill */
header #main-nav-wrap {
	top: calc(100% + 0.8rem);
	left: 0;
	width: min(26rem, calc(100vw - 3rem));
}
header .main-navigation {
	background: rgba(21, 21, 21, 0.94) !important;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 1.2rem 1.6rem 1.6rem !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
header .main-navigation li a {
	padding: 1rem 0.4rem !important;
	border-radius: 6px;
	color: #ffffff !important;
}
header .main-navigation li a:hover {
	padding-left: 0.8rem !important;
	background: rgba(124, 82, 149, 0.18);
	color: #c4a3d8 !important;
}
header .main-navigation li.current > a {
	color: #c4a3d8 !important;
}

@media only screen and (max-width: 600px) {
	header .top-bar {
		left: 1.2rem !important;
		top: 1.2rem !important;
	}
	header .menu-toggle {
		padding: 0.9rem 1.35rem;
	}
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}