/*!
Theme Name: Theodore
Author: William Jeffree @ Design House Berkhamsted
Description: Description
Version: 2.2.1
Tested up to: 5.4
Requires PHP: 5.6

theodore 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
	- Branding
	- Posts and pages
	- Work Post Type
	- Shared Horizontal Scroll Styles (People CPT and Homepage)
	- Page Template with Extra Sections (Services)
	- Footer
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

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

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


@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');



/* 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%;

}

/* Theodre orange/red reference: #ee4d21
	 ========================================================================== */

@font-face {
font-family: "Americane Condensed Bold";
src: url("fonts/Americane-Condensed-Web-Bold.eot") format("eot"),
url("fonts/Americane-Condensed-Web-Bold.woff") format("woff"),
url("fonts/Americane-Condensed-Web-Bold.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}




/* 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: "Roboto Condensed", sans-serif;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-family: "Americane Condensed Bold", Verdana, sans-serif;
	line-height: 0.75em;
	font-weight: lighter;
}

h1 {
	text-transform: uppercase;
	letter-spacing: -0.025em;
	margin: 0.67em 0;
}

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: #f3f3e9;
}

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: #ee4d21;
}

a:visited {
	color: #ee4d21;
}

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

a:focus {
	outline: 0;
}

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%;
}

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

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

/* Navigation styles are now located in navigation.css
------------------------------------------------------------- */

/* Branding
--------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  z-index: 0;
}

/* Position Relative for People Page AND NOW SERVICES TOO */
.page-id-141 .site-header, .page-id-85 .site-header, .single-work .site-header {
  position: relative;
}

.site-branding {
  max-width: 485px;
  width: 100%;
}

.custom-logo {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 12px; 
}

.sub-logo-content {
  display: flex;
  justify-content: space-between;
	gap: 10px;
}

.sub-logo-column {
  width: auto;
}
.sub-logo-column a {
    text-decoration: none;
  }

.sub-logo-column p {
  margin: 0;
  font-size: 13px; 
  line-height: 1.3;
	color: #ee4d21
}

/* Default strong styling for all columns except the third */
.sub-logo-column strong {
  font-family: "Americane Condensed Bold", Verdana, sans-serif;
  font-size: 16px;
  line-height: 1em;
}

/* Specific styling for the third column's strong text */
.sub-logo-column-3 strong {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  font-size: 0.9em;
}

@media (max-width: 768px) {
	.site-header {
  		justify-content: left;
		position: fixed;
	}
	.site-branding {
  		max-width: 255px;
    	margin-left: 12px;
	}
	.sub-logo-content {
		display: none;
	}
}

/* Services Page Movile - sub branding visible
----------------------------------------------------------- */
.companyInfoMobile {
	display: none;
}

@media (max-width: 768px) {
	.companyInfoMobile {
		display: block;
	}
	.companyInfoMobile .site-branding {
  		max-width: 300px;
    	margin: 60px auto 0px;
    	text-align: center;
	}
	.companyInfoMobile .sub-logo-content {
		display: block;
	}
	.companyInfoMobile .sub-logo-column {
	  	margin: 20px 0 0px;
	}
}




/* BIG BACKGROUND TEXT
--------------------------------------------- */

/* Existing styles */
.background-text-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-text {
    width: 100%;
    pointer-events: none;
    text-align: center;
    color: #ee4d21;
    font-family: "Americane Condensed Bold", Verdana, sans-serif;
    font-size: 25vh;
    line-height: 0.7em;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    max-width: 1100px;
    margin: 160px 0 50px;
}

/* Updated mobile styles with fixed positioning */
@media (max-width: 768px) {
    .background-text-container {
        position: fixed;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    
    .background-text {
        position: fixed;
        top: 45vw;
        left: 0;
        width: 100%;
        font-size: 30vw; 
        margin-top: 0;
        padding: 0 20px;  
        box-sizing: border-box;
    }
}


/* Primary
--------------------------------------------- */

#primary {
	  max-width: 1000px;
	  margin: 80px auto;
	padding: 0 10px;
}


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

.post,
.page {
	margin: 0 0 1rem;
}

.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;
}





/* Work Custom Post Type
--------------------------------------------- */
.single-work #primary {
    max-width: 800px;
    margin: 40px auto 100px;
    padding: 0 20px;
}

.work-content-wrapper {
    width: 100%;
}

.work-featured-image {
	margin-bottom: 10px;
}

.work-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Video Container Styles */
.work-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 10px;
}

.work-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.single-work .entry-header {
    padding: 0;
    margin: 18px 0 0;
    position: relative;
    left: -0.25em; /* Slight negative offset to align with content below */
}

.single-work .entry-title {
    font-size: 8rem;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    color: #ee4d21;
    line-height: 0.75em;
    position: relative;
    display: block;
}

.single-work .entry-title.entry-title-long {
    font-size: 6rem;
}

/* Maintain alignment in mobile view */
@media (max-width: 768px) {
    .single-work .entry-header {
        left: -0.25em;
    }
    
    .single-work .entry-title {
        font-size: 3rem;
        margin: 0;
        padding: 0;
    }
}

.work-company {
    font-size: 1.2rem;
    color: #ee4d21;
    margin: -20px 0 0px;
    font-family: "Americane Condensed Bold", Verdana, sans-serif;
}

.work-details-table {
    width: 100%;
}

.work-table-row {
    display: flex;
    gap: 0px;
}

.work-label {
    flex: 0 0 200px;
    font-family: "Americane Condensed Bold", Verdana, sans-serif;
    font-size: 1.2rem;
    color: #ee4d21;
}

.work-value {
    flex: 1;
    font-size: 1.1rem;
    color: #ee4d21;
}

.work-description {
    font-size: 1.8rem;
    font-family: "Americane Condensed Bold", Verdana, sans-serif;
	line-height: 1em;
	color: #ee4d21;
}
.work-description p {
  margin: 15px 0;
}

.spotify-link {
    color: #ee4d21;
    transition: opacity 0.3s ease;
}

.spotify-link:hover {
    opacity: 0.7;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .single-work #primary {
        margin: 20px auto;
    }

    .single-work .entry-title {
        font-size: 3rem;
    }

    .work-table-row {
        flex-direction: column;
    }

    .work-label {
        flex: none;
    }

    .work-value {
        flex: none;
		margin-bottom: 10px;
    }
}







/* People Custom Post Type
--------------------------------------------- */
.single-people #primary {
    margin: 10px auto 80px;
}

.person-header-wrapper {
    position: relative;
    z-index: 2;
    padding-bottom: 2rem;
}

.person-header {
    margin-bottom: 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
}

.person-title {
    font-size: 7.5em;
    margin: 0;
    text-transform: uppercase;
    line-height: 0.75;
    color: #ee4d21;
    text-align: center;
}

.person-content {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
}

.featured-image-container {
    height: 130px;
    overflow: hidden;
    position: relative;
    width: 130px;
}

.featured-image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-info {
    text-align: left;
}

.contact-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: -9px;
}

.contact-label {
    color: #ee4d21;
    text-transform: uppercase;
    font-family: "Americane Condensed Bold", Verdana, sans-serif;
    font-size: 1.15em;
}

.contact-link {
    color: #ee4d21;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.contact-link:hover {
    color: #ee4d21;
    opacity: 0.7;
    text-decoration: none;
}

@media (max-width: 768px) {
    .person-header-wrapper {
        padding-bottom: 0rem;
    }
    
    .person-content {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .featured-image-container {
        flex: 0 0 125px;
        height: 125px;
    }

    .person-info {
        text-align: center;
    }

    .contact-details {
        align-items: center;
    }

    .person-title {
        font-size: 4em;
    }
}




/* Shared Horizontal Scroll Styles (People CPT and Homepage)
-------------------------------------------------------------- */
:root {
    --section-height: 50vh;
    --section-width: 75vh;
    --section-gap: 4rem;
    --edge-buffer: 50vw;
    --base-title-size: 24px;  /* Set a reasonable baseline font size */
    --card-aspect-ratio: 1.85;  /* Adjusted aspect ratio for balanced width */
}

/* Desktop viewport spacer */
.desktop-viewport-spacer {
    display: none;
}

@media (min-width: 769px) {
    .desktop-viewport-spacer {
        display: block;
        height: var(--spacer-height);
        pointer-events: none;
    }
}

/* Base styles for horizontal wrapper */
.horizontal-wrapper {
    position: relative;
    height: auto;
    width: 100%;
    z-index: 1;
}

.horizontal-scroll-section {
    position: fixed;
    top: 55%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    height: 50vh;
    width: 100%;
    overflow: visible;
}

.horizontal-container {
    height: 100%;
    display: flex;
    align-items: center;
    transform: translateX(0);
    will-change: transform;
    padding-left: 50vw;
}

.horizontal-sections-wrapper {
    display: flex;
    gap: 20px;
    height: 100%;
}

.work-card {
    position: relative;
    width: calc(50vh * var(--card-aspect-ratio)); /* Use height to calculate width with fixed aspect ratio */
    min-width: calc(50vh * var(--card-aspect-ratio)); /* Ensure minimum width matches */
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

.work-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.work-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.work-title {
    position: relative;
    color: #ee4d21;
    font-size: clamp(1.5em, calc(var(--wrapper-height) * 0.04), 2.5em);
    text-align: right;
    line-height: 1em;
    margin: 0;
}

.work-company {
}

.work-role {
    position: relative;
    color: #ee4d21;
    font-size: clamp(1em, calc(var(--wrapper-height) * 0.025), 1.5em);
    text-align: right;
}

.work-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Progress Bar & Scroll Indicator */
.progress-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background: none;
    border-radius: 2px;
    z-index: 1000;
}

.progress-indicator {
    height: 100%;
    width: 0;
    background: #ee4d21;
    border-radius: 2px;
    transition: width 0.1s ease;
}

.scroll-indicator-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 40px;
    z-index: 1000;
    pointer-events: none;
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

.scroll-indicator-container.initial {
    bottom: 3px;
}

.scroll-indicator-container.progress {
    bottom: -3px;
    opacity: 0;
}

.scroll-indicator-container svg {
    width: 100%;
    height: 100%;
}

.end-buffer {
    flex-shrink: 0;
    width: var(--edge-buffer);
    height: 100%;
}

/* Template Specific Adjustments */
.page-template-page-horizontal-posts-version-three .horizontal-container {
    padding-left: calc(100vw - 150px); /* Default right-aligned view */
}

/* Centered view when accessed through menu */
.page-template-page-horizontal-posts-version-three .horizontal-container.view-centered {
    padding-left: calc(50vw - (var(--section-width) / 2) - 55px); /* Center-aligned view, offset by half card width plus 55px (reduced from 70px) */
}

.page-template-page-horizontal-posts-version-three .horizontal-sections-wrapper {
    gap: 20px;
}

.page-template-page-horizontal-posts-version-three .end-buffer {
    width: 100vw;
}

.page-template-page-horizontal-posts-version-three .horizontal-scroll-section {
    top: 55%;
    overflow: hidden;
}



/* Hover Effects */
.work-card:hover .work-image {
    transform: scale(1.05);
}

.work-card:hover .work-overlay {
    opacity: 1;
}

/* Height-based optimizations for larger screens */
@media screen and (min-height: 800px) {
    :root {
        --wrapper-height: 75vh;
        --spacer-height: 30vh;
        --trigger-point: 30;
        --section-width: 75vh;
        --card-aspect-ratio: 1.85;  /* Adjusted aspect ratio for balanced width */
    }
}

/* Height-based optimizations for medium-height screens */
@media screen and (min-height: 600px) and (max-height: 799px) {
    :root {
        --wrapper-height: 80vh;
        --spacer-height: 30vh;
        --trigger-point: 30;
        --section-width: 80vh;
        --card-aspect-ratio: 1.85;  /* Adjusted aspect ratio for balanced width */
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .horizontal-wrapper {
        display: none;
    }

    .mobile-work-list {
        display: block;
    }
	
    .mobile-work-card.person-info-card {
        margin-bottom: 50px;
        height: auto;
    }
	
    .mobile-work-card h1 {
        text-align: center;
        color: #ee4d21;
        font-size: 5em;
        margin: 15px 0 3px;
    }

    .mobile-work-card .work-title {
        position: relative;
        bottom: auto;
        right: auto;
        padding: 0;
        font-size: 1.6em;
        line-height: 1;
        margin: 0;
    }

    .mobile-work-card .work-company {
        display: none;
    }

    body.scroll-locked {
        overflow: visible !important;
    }

    .desktop-viewport-spacer {
        display: none;
    }

    .scroll-indicator-container, .progress-bar {
        display: none;
    }
}



/* Person Card Addition
---------------------------------------------*/
:root {
    --section-height: 50vh;
    --section-width: 75vh;
    --section-gap: 4rem;
    --edge-buffer: 50vw;
    --wrapper-height: 75vh;      /* Default wrapper height */
    --spacer-height: 30vh;       /* Default spacer height */
    --trigger-point: 30;         /* Default trigger point (vh units) */
}

/* Person Card Container - Updated to match work cards */
.person-card-container {
    position: relative;
    height: 100%;
    overflow: visible;
    flex-shrink: 0;
    margin-right: 30px;
    padding: 0;
    width: var(--section-width); /* Match work card width */
}

/* Person Card */
.person-card {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Person Card Title */
.person-card-title {
    color: #ee4d21;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    position: absolute;
    z-index: 30;
    pointer-events: none;
    width: 100%; 
    overflow: hidden;
    left: -4px;
    font-size: 24px; /* Set a reasonable initial size */
    top: calc(var(--section-height) * -0.028);
}

.person-card-content {
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    gap: calc(var(--section-width) * 0.035);
    align-items: flex-end;
}

.person-card-image-container {
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    width: calc(var(--section-height) * 0.7);
    height: calc(var(--section-height) * 0.7);
}

.person-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info Section */
.person-card-info {
    text-align: left;
    color: #ee4d21;
    flex: 1;
    padding-bottom: calc(var(--section-height) * 0.02);
}

.person-role {
    font-size: 24px;
    margin: 0 0 20px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #ee4d21;
}

.person-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.contact-label {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 18px;
}

.contact-link {
    color: #ee4d21;
    text-decoration: none;
    font-size: 18px;
}

.social-icons {
    display: flex;
    gap: calc(var(--section-height) * 0.02);
    margin-top: calc(var(--section-height) * 0.03);
}

.social-link {
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.3s ease;
    fill: #ee4d21;
}

.social-link:hover {
    opacity: 0.7;
}

.social-icon {
    width: calc(var(--section-height) * 0.06);
    height: calc(var(--section-height) * 0.06);
    display: block;
}

/* Adjust work cards container */
.horizontal-sections-wrapper {
    display: flex;
    gap: 20px;
    height: 100%;
    margin-left: -10px; /* Pull work cards slightly closer */
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .single-people .site-header, .single-people .menu-toggle {
        position: relative;
    }
    
    .single-people .menu-toggle {
        position: absolute;
    }
    
    .person-card-container {
        min-width: 100% !important;
        padding: 0 1rem;
    }
    
    .person-card-title {
        font-size: 3.5em;
        position: relative;
        top: 0;
        text-align: center;
        margin: 2rem auto 2rem;
    }
    
    .person-card-content {
        position: relative;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 0;
        padding-top: 0;
        gap: 2rem;
    }
    
    .person-info-image {
        text-align: center;
    }
    
    .person-card-image {
        width: 40vw;
        height: 40vw;
        object-fit: cover;
        margin: 0 auto;
    }

    .person-card-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .person-role {
        text-align: center;
        margin-bottom: 1.5em;
        font-size: 24px;
    }

    .person-contact {
        align-items: center;
        gap: 1.5rem;
    }

    .contact-item {
        flex-direction: column;
        gap: 0rem;
        text-align: center;
    }
    
    .contact-label, .contact-link {
        font-size: 16px;
    }

    .social-icons {
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }
    
    .social-icon {
        width: 30px;
        height: 30px;
    }

    .mobile-work-list {
        margin-top: 2rem;
    }
}

/* Page Template with Extra Sections (Services)
--------------------------------------------- */

/* Specific styles for the Page with Extra Sections template */
.page-template-page-extra-sections .site-main {
    /* Base styles for the main content area */
    max-width: 1200px;
    margin: 0 auto;
}

/* Style both main content and extra sections content */
.page-template-page-extra-sections .entry-content,
.page-template-page-extra-sections .extra-section-content {
    font-size: 20px;
    color: #ee4d21;
}

/* Style all paragraphs within content areas */
.page-template-page-extra-sections .entry-content p,
.page-template-page-extra-sections .extra-section-content p {
    font-size: 20px;
    color: #ee4d21;
    max-width: 905px;
    margin: 0 auto 1em;
}

/* Extra section container styling */
.page-template-page-extra-sections .extra-section {
    margin: 0 0 25px;
    border-bottom: 0px;
}

/* Remove border from last section */
.page-template-page-extra-sections .extra-section:last-child {
    border-bottom: none;
}

/* Add spacing between main content and first extra section */
.page-template-page-extra-sections .entry-content {
    margin-bottom: 0rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #ee4d21;
}

/* Style the accordion toggle button */
.page-template-page-extra-sections .accordion-toggle {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.3s ease;
    z-index: 2;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-template-page-extra-sections .accordion-toggle svg {
    width: 120px;
    height: 120px;
    transition: transform 0.3s ease;
}

/* Desktop hover styles */
@media (min-width: 769px) {
    .page-template-page-extra-sections .accordion-toggle:hover svg {
        transform: rotate(180deg);
    }
    
    .page-template-page-extra-sections .accordion-toggle.active svg {
        transform: rotate(180deg);
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .page-template-page-extra-sections .accordion-toggle {
        width: 60px;
        height: 60px;
    }
    
    .page-template-page-extra-sections .accordion-toggle svg {
        width: 60px;
        height: 60px;
    }
    
    .page-template-page-extra-sections .accordion-toggle.active svg {
        transform: rotate(180deg);
    }
}

/* Style the section image container */
.page-template-page-extra-sections .extra-section-image {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

/* Style the inner image container */
.page-template-page-extra-sections .extra-section-image-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Style section titles */
.page-template-page-extra-sections .extra-section-title {
    text-align: center;
    color: #ee4d21;
    margin: 0;
    font-size: 8em;
    text-transform: uppercase;
    font-weight: lighter;
}

/* Only apply text shadow to titles within image containers */
.page-template-page-extra-sections .extra-section-image .extra-section-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Style the section content */
.page-template-page-extra-sections .extra-section-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 20px;
    opacity: 0;
    transform: translateY(-10px);
}

.page-template-page-extra-sections .extra-section-content.active {
    max-height: 2000px; /* Adjust based on your content */
    padding: 50px 20px 30px;
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Styles */
@media (max-width: 768px) {
    .page-template-page-extra-sections .extra-section-title {
        font-size: 4em;
    }
    
    .page-template-page-extra-sections .entry-content p,
    .page-template-page-extra-sections .extra-section-content p {
        font-size: 16px;
    }

    .page-template-page-extra-sections .extra-section-content.active {
        padding: 30px 20px 15px;
    }
}


/* Martin McAllister's Special Fringe Use case 

@media (max-height: 599px) {
	
	.site-header {
		position: relative;
	}
	.background-text-container {
    	position: absolute;
		height: calc(100vh + 85px);
        margin-top: 30px;
	}
	.background-text {
    	font-size: 32vh;
	}
	.horizontal-wrapper {
		height: 85vh;
	}
}

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


/* Splash Page Styles
--------------------------------------------- */
.page-template-page-splash #masthead,
.page-template-page-splash #colophon,
.page-template-page-splash-split #masthead,
.page-template-page-splash-split #colophon,
.page-template-page-splash-animated-buttons #masthead,
.page-template-page-splash-animated-buttons #colophon {
    display: none;
}

.page-template-page-splash,
.page-template-page-splash-split,
.page-template-page-splash-animated-buttons {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    background-color: #000; /* Fallback color */
}

/* Original Splash Page Styles */
.splash-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    overflow: hidden;
}

/* Slider Styles */
.splash-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.splash-swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-pagination {
	display: none;
}

.splash-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transition: opacity 0.5s ease;
}



/* Logo Styles */
.splash-logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 90%;
    max-width: 400px;
    text-align: center;
}

.splash-logo {
    width: 100%;
    height: auto;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
    animation-delay: 0.5s;
}

/* Full-screen Link */
.splash-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
}

/* Pagination Styles */
.swiper-pagination {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: auto !important;
    z-index: 4;
}

.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.6);
    margin: 0 6px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #ffffff;
    transform: scale(1.2);
}

/* Fade Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .splash-logo-container {
        max-width: 300px;
    }

    .swiper-pagination {
        bottom: 20px !important;
    }

    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 4px;
    }
}

/* Split Splash Page Additional Styles */
.splash-split-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

.splash-split-side {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 769px) {
    .splash-split-side:hover {
        width: 52%;
    }

    .splash-split-side:hover + .splash-split-side {
        width: 48%;
    }
}

.splash-split-logo-container {
    position: relative;
    z-index: 2;
    max-width: 500px;
    width: 90%;
    padding: 15px;
    animation: fadeIn 1.5sease-out forwards;
    margin-top: -50px;
}

.splash-split-logo {
    max-width: 100%;
    height: auto;
    display: block;
}

.splash-split-entry {
    position: absolute;
    bottom: 40px;
    z-index: 2;
    text-align: center;
    animation: fadeIn 2s ease-out forwards;
}

.splash-split-text {
    color: #ee4d21;
    font-family: "Americane Condensed Bold", Verdana, sans-serif;
    font-size: 1.7rem;
    margin: 0;
    padding: 0 20px;
	text-transform: uppercase;
	cursor: pointer;
}

/* Different text color for left side entry text */
.splash-split-left .splash-split-text {
    color: #000000;
}

.splash-split-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Styles for Split Splash */
@media (max-width: 768px) {
    .splash-split-wrapper {
        flex-direction: column;
    }

    .splash-split-side {
        width: 100%;
        height: 50%;
    }

    .splash-split-logo-container {
        max-width: 300px;
    }

    .splash-split-text {
        font-size: 1.2rem;
    }
}


/* Menu Toggle and Masthead settings - some pages absolute, some relative if you want to scroll
---------------------------------------------------------------------------------------------------------- */


.page-template-page-horizontal-posts-version-three .menu-toggle, .single-people .menu-toggle {
	position: fixed;
}


.page-template-page-splash-split .menu-toggle {
	display: none;
}




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

.site-footer .site-info {
    text-align: center;
}

/* 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;
}

/* Hide duplicate content */
.content-wrapper {
    display: none; /* Hide the old wrapper */
}

/* Show mobile list only on mobile */
.mobile-work-list {
    display: none;
}

@media (max-width: 768px) {
    .mobile-work-list {
        display: block;
        margin: 20px 10px; /* Reduced from 90vh */
    }
    .page-template-page-horizontal-posts-version-three .mobile-work-list {
        display: block;
        margin: 90vh 10px 20px; /* Reduced from 90vh */
    }
    

    .mobile-work-card.person-info-card {
        margin: 80px 0 50px;
        height: auto;
        padding: 0 20px;
    }

    .person-card-image-container {
        width: 200px; /* Fixed width for mobile */
        height: 200px; /* Fixed height for mobile */
        margin: 0 auto;
    }

    .mobile-work-card h1 {
        text-align: center;
        color: #ee4d21;
        font-size: 3.5em;
        margin: 20px 0 0px; /* Adjusted margin */
        line-height: 0.9;
    }
}

/* Ensure horizontal scroll is visible on desktop */
@media (min-width: 769px) {
    .horizontal-wrapper {
        display: block;
    }
}

/* Mobile Work List - Work Cards */
@media (max-width: 768px) {
    .mobile-work-card {
        position: relative;
        margin-bottom: 20px;
    }

    .mobile-work-card .mobile-work-image {
        width: 100%;
        height: auto;
        display: block;
    }

    .mobile-work-card .mobile-work-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 1.5rem;
    }

    .mobile-work-card .work-title {
        color: #ee4d21;
        font-size: 1.8em;
        line-height: 1em;
        margin: 0;
        text-align: right;
    }

    .mobile-work-card .work-role {
        color: #ee4d21;
        font-size: 1.2em;
        text-align: right;
        margin-top: 0.5em;
    }

    /* Remove any hover states for mobile */
    .mobile-work-card:hover .mobile-work-overlay {
        opacity: 1;
    }

    .mobile-work-card:hover .mobile-work-image {
        transform: none;
    }
}

.back-to-start {
    position: relative;
    min-width: var(--section-width);
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #ee4d21;
    cursor: pointer;
}

.back-to-start-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
}

.back-to-start-text h3 {
    position: relative;
    color: white;
    font-size: clamp(1.5em, calc(var(--wrapper-height) * 0.04), 2.5em);
    text-align: right;
    line-height: 1em;
    margin: 0;
}

@media (max-width: 768px) {
    .mobile-work-card.back-to-start {
        background-color: #ee4d21;
        width: 100%;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
        aspect-ratio: 16/9;
    }
    
    .mobile-work-card .back-to-start-text {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 1.5rem;
    }
    
    .mobile-work-card .back-to-start-text h3 {
        position: relative;
        color: white;
        font-size: 1.6em;
        line-height: 1;
        margin: 0;
        text-align: right;
    }
}

/* Animated Text Container */
.animated-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 90%;
    max-width: 800px;
    height: 400px;
}

.animated-text-container svg {
    width: 100%;
    height: 100%;
}

/* Remove old button styles */
.animated-buttons-container,
.animated-button,
.button-text,
.button-icon {
    display: none;
}

/*--------------------------------------------------------------
# 404 Error Page
--------------------------------------------------------------*/

/* 404 Error Page Styling to match page-extra-sections spacing */
.error404 #primary {
    margin: 200px auto 160px;
    max-width: 1200px;
    padding: 0 20px;
    text-align: center;
}

.error404 .extra-section-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #333;
    font-weight: 600;
}

.error404 .entry-content {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}

.error404 .entry-content p {
    margin-bottom: 1.5rem;
}

.error404 .entry-content ul {
    margin: 1rem 0 1.5rem 2rem;
}

.error404 .entry-content li {
    margin-bottom: 0.5rem;
}

.error404 .entry-content a {
    color: #ee4d21;
    text-decoration: none;
    font-weight: 600;
}

.error404 .entry-content a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .error404 #primary {
        margin: 120px auto 80px;
        padding: 0 15px;
        text-align: center;
    }
    
    .error404 .extra-section-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .error404 .entry-content {
        font-size: 1rem;
    }
}