@charset "UTF-8";

/* ==========================================================================
   1. GLOBAL SITEPAGE BASELINE & CORE RESET
   ========================================================================== */
body {
	margin: 0;
	background-color: #FFF;
	font-family: "helvetica-lt-pro", sans-serif;
	font-size: 100%;
	height: 100%;
}
img { max-width: 100%; }

/* --- Brand Colour & Text Utility Tokens --- */
.grey         { color: #6F6F6E; }
.orange       { color: #FE5000; }
.white        { color: #FFF; }
.black        { color: #000; }
.regular      { font-weight: normal; }
.doublespace { margin-top: 3em; }

/* --- Global Typography Defaults --- */
p, ul, footer ul { margin: 0; padding: 0; list-style-type: none; line-height: 1.5em; }
p+p { margin-top: 1.5em; }
ul+p { margin-top: 1.5em; }
p ul li {
	-webkit-hyphens: none; -moz-moz-hyphens: none; -ms-hyphens: none; hyphens: none;
	line-height: 1.5em; letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6 { font-weight: bold; margin-top: 0; margin-bottom: 0; line-height: 110%; letter-spacing: -0.05em; }

.narrow40 p+ul {
	margin-top: 1em;
}
.narrow40 li+li {
	margin-top: 1em;
}
.narrow40 ul {
	padding-inline-start: 1lh;
	padding-left: 0.6lh;
}
.narrow40 ul li {
	list-style-type: disc;
}

.intro-text-dark { font-weight: bold; color: #000; font-size: 90%; line-height: 1.4em; margin-top: 0; padding-top: 0; margin-bottom: .75em; }

/* --- Interactive Elements & Links --- */
p a:link, p a:active, p a:visited { color: #000; text-decoration: underline; }
p a:hover { color: #FE5000; text-decoration: none; }
.phone { font-size: 80%; }
.phone a:link, .phone a:active, .phone a:visited { color: #000; text-decoration: none; }
.phone a:hover { color: #FE5000; text-decoration: none; }

/* --- Shared Global Element Layouts --- */
.menu button { border: 0px none; background-color: transparent; cursor: pointer; padding: 0; margin: 0; user-select: none; }
#Logo, #top { transition: 0.2s; }
#top { position: absolute; top: 0; display: none; }

/* --- Button Engines & Animation Systems --- */
.introbutton { display: inline-block; position: relative; font-size: 100%; font-weight: bold; padding: 15px; border: 1px solid #FFF; margin-top: 2em; float: left; transition: ease-in-out .2s; }
.introbutton:link, .introbutton:active, .introbutton:visited { color: #FFF; text-decoration: none; transition: ease-in-out .4s; }
.introbutton:hover { color: #FFF; text-decoration: none; padding: 15px; border-radius: 25px; transition: ease-in-out .4s; background-color: rgba(255, 255, 255, 0.1); }
.introbutton img { height: 14px; width: 14px; margin-left: -14px; opacity: 0.0; transition: ease-in-out .4s; }
.introbutton:hover img { margin-left: 10px; opacity: 1; transition: ease-in-out .4s; transform: rotate(90deg); }

.grow { display: inline-block; animation: grow cubic-bezier(0.390, 0.575, 0.565, 1.000) 4s infinite both; animation-direction: alternate; }
@keyframes grow { 0%, 50% { transform: scale(1.0); transform-origin: 0% 100%; } 100% { transform: scale(1.1); transform-origin: 0% 100%; } }

/* --- Section Animation State Toggles --- */
.come-in { transform: translateY(200px); animation: come-in 1.0s ease forwards; }
.come-in:nth-child(odd) { animation-duration: 0.8s; }
.come-down { transform: translateY(-200px); animation: come-in 1.0s ease forwards; }
.come-down:nth-child(odd) { animation-duration: 0.8s; }
.come-right { transform: translateX(-200px); animation: come-in 1.0s ease forwards; }
.come-right:nth-child(odd) { animation-duration: 0.8s; }
.come-left { transform: translateX(200px); animation: come-in 1.0s ease forwards; }
.come-left:nth-child(odd) { animation-duration: 0.8s; }
.already-visible { transform: translateY(0) !important; transform: translateX(0) !important; animation: none !important; }

@keyframes come-in { to { transform: translateY(0); } }
@keyframes come-down { to { transform: translateY(0); } }
@keyframes come-right { to { transform: translateX(0); } }
@keyframes come-left { to { transform: translateX(0); } }
@keyframes animateright { from{left:-100%; opacity:0} to{left:0; opacity:1} }
@keyframes animateclose { from{left:0; opacity:1} to{left:-100%; opacity:0} }

/* --- Slanted Structural Layout Elements --- */
.slanted-div, .slanted-div-opp, .slanted-div-bottom, .slanted-div-bottom-opp { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; }
.slanted-div:before, .slanted-div:after, .slanted-div-opp:before, .slanted-div-opp:after, .slanted-div-bottom:before, .slanted-div-bottom:after, .slanted-div-bottom-opp:before, .slanted-div-bottom-opp:after { content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; top: 0; }
.slanted-div:before { transform-origin: left top; transform: skewY(-3deg); }
.slanted-div:after { bottom: 0; transform-origin: left bottom; transform: skewY(3deg); }
.slanted-div-opp:before { transform-origin: right top; transform: skewY(-3deg); }
.slanted-div-opp:after { bottom: 0; transform-origin: right bottom; transform: skewY(3deg); }
.slanted-div-bottom:after { bottom: 0; transform-origin: left bottom; transform: skewY(3deg); }
.slanted-div-bottom-opp:after { bottom: 0; transform-origin: right bottom; transform: skewY(-3deg); }

/* --- Component Section Logic Links --- */
#clientsinner a:link, 
.casestudywhiteinner a:link { 
    transition: ease-in .2s; 
}
#clientsinner a:hover, 
.casestudywhiteinner a:hover, 
.rightarrow img:hover, 
.leftarrow img:hover, 
#portfolioimages img:hover { 
    transition: ease-out .2s; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
    cursor: pointer; 
}
#portfolioimages img { border: 0; transition: ease-in .2s; }
#portfoliointroinner, #portfoliosolutioninner p, #portfoliointroinner a:link, #portfoliointroinner a:active, #portfoliosolutioninner a:link, #portfoliosolutioninner a:active { color: #000; text-decoration: none; }
#portfoliointroinner a:hover, #portfoliointroinner a:visited, #portfoliosolutioninner a:hover, #portfoliosolutioninner a:visited, #portfoliosolutioninner .doublespace a:link, #portfoliosolutioninner .doublespace a:active, .doublespace a:active, .doublespace a:visited, .doublespace a:hover { text-decoration: none; color: #000; }
#portfoliosolutioninner p+h3 { margin-top: 5%; }
#wwdintro a:link, #wwdintro a:active, #wwdintro a:visited { text-decoration: none; color: #FFF; }
#wwdintro a:hover { text-decoration: underline; color: #000; }

.flex-grid-portfolio .col a:link, .flex-grid-portfolio .col a:active, .flex-grid-portfolio .col a:hover, .flex-grid-portfolio .col a:visited, .flex-grid-wwd .col a:link, .flex-grid-wwd .col a:active, .flex-grid-wwd .col a:hover, .flex-grid-wwd .col a:visited { color: #FFF; text-decoration: none; }
#portfoliointro p, h3, h1 { color: #FFF; }

/* Global default inner behaviors */
.inner { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-blend-mode: multiply; background-color: #888888; transition: ease-out .2s; text-align: center; }
.inner::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; }
.col:hover .inner, .col:focus .inner { transform: scale(1.15); text-shadow: 0px 0px 20px #000000; background-blend-mode: multiply; transition: ease-out .5s; background-color: #FFF; }
.col:hover .inner:before, .col:focus .inner:before { display: block; }

.linkbutton { padding: 2.5%; border: 1px solid #FE5000; display: inline-block; text-decoration: none; transition: 0.4s; }

.linkbutton:hover { color: #000; text-decoration: none; border-radius: 50px; transition: ease-out .5s; background-color: rgba(255, 255, 255, 0.75);
}

/* --- HTML5 Animation Container Layout --- */
.gdanim { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border: none; overflow: hidden; margin: 0 auto; }
.wwdsplit h3 { font-size: 115%; margin-top: 1.5em; margin-bottom: 0.5em; color: inherit; }

/* --- Shared Layout Anchors & Jumps --- */
.positionmarkerhi { position: absolute; top: -350px; left: 0; width: 20px; height: 20px; z-index: 9999; }
.positionmarkerlo { position: absolute; top: -250px; left: 0; width: 20px; height: 20px; z-index: 9999; }


/* ==========================================================================
   2. MOBILE VIEWPORT DEFAULTS (Portrait Baseline / Core Mobile Settings)
   ========================================================================== */
.wide { width: 100%; height: auto; display: flex; justify-content: center; }
.narrow { width: 90%; height: auto; position: relative; }
.narrow40, .narrow50, .narrow65 { width: 90%; height: auto; position: relative; }

.mobile-only { display: block; width: 100%; }
.desktop-only { display: none !important; }

header { background-color: #FFF; display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-end; padding-top: 10px; padding-bottom: 10px; position: fixed; z-index: 1000; width: 100%; top: 0; left: 0; box-sizing: border-box; }
#headerinner { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; width: 90%; }
header img { height: 60px; width: auto; flex-shrink: 0; -webkit-flex-shrink: 0; transition: 0.2s; }

/* RECALCULATED: Clear mobile header (60px img + 10px top + 10px bottom = 80px) + 20px cushion */
.anchor { position: absolute; top: -100px; height: 10px; width: 10px; }

#videoBG { display: none; }
#intro { height: auto; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; padding-top: 125px; padding-bottom: 50px; background: url(../images/background-sm.jpg) no-repeat fixed; background-size: 100% auto; background-position: 0 75px; }

#aboutintro { height: 50vh; background-image: url("../images/about-bg-sm.jpg"); background-size: cover; background-position: center bottom; }

#welcome { padding: 50px 0 75px 0; background: linear-gradient(270deg, #FE5000, #FD9115, #FE5000); background-size: 500% 500%; animation: aboutanim 20s ease infinite; }
#hww { padding: 50px 0 75px 0; }

#wwdwrapper {
	width: 100%;
	padding-top: 80px;
	height: calc(100vh - 80px);
	display: flex;
	flex-direction: row;
	align-items: center;
	background: linear-gradient(270deg, #FE5000, #FD9115, #FE5000);
	background-size: 500% 500%;
	animation: aboutanim 20s ease infinite;
}
#wwdintro { width: 90%; height: auto; padding: 5vh 5% 5vh 5%; text-align: center; display: flex; flex-direction: column; align-items: center; }
#wwdintro p { max-width: 675px; margin-left: auto !important; margin-right: auto !important; }

#wwdmobile { display: block; }
#wwdbuttons { display: none; }

#graphicdesignwrapper { background-color: #FE5000; padding: 5vh 0 7.5vh 0; }
#webdesignwrapper { background-color: #F8C630; padding: 7.5vh 0 7.5vh 0; }
#brandingwrapper { background-color: #B0DB43; padding: 7.5vh 0 7.5vh 0; }
#marketingwrapper { background-color: #12355B; padding: 7.5vh 0 7.5vh 0; }
#printwrapper { background-color: #525B76; padding: 7.5vh 0 7.5vh 0; }
#mailingwrapper { background-color: #94B9AF; padding: 7.5vh 0 7.5vh 0; }

.whatwedoinner { display: flex; flex-direction: column; }
.wwdinner { background-image: url("../images/arrow-background.png"); background-size: 100% 25%; background-repeat: no-repeat; background-position-y: 200%; font-size: 100%; text-align: center; }
.wwdinner:hover { background-image: url("../images/arrow-background.png"); background-size: 100% 25%; background-repeat: no-repeat; background-position: bottom; }

.wwdsplit { width: 100%; }
.wwdsplitimg { width: 60%; height: auto; margin-bottom: 5%; }
.arrows { max-width: 35px; height: auto; margin-bottom: 25px; }
.arrowsdown { max-width: 35px; height: auto; margin-top: 25px; }

#gdimg, #wdimg, #brndimg, #mktimg, #prntimg, #mailimg { order: 1; }
#gdtext, #wdtext, #brndtext, #mkttext, #prnttext, #mailtext { order: 2; }

#contact { padding: 15vh 0 7.5vh 0; background: linear-gradient(270deg, #FE5000, #FEB500, #FE5000); background-size: 500% 500%; animation: aboutanim 20s ease infinite; }
#contactdetails { margin-top: 2.5%; }

.casestudyorangetop {
	width: 100%;
	padding-top: 80px; /* Restored back to original baseline default */
	min-height: calc(100vh - 80px);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background: #FE5000;
}

.casestudyorangetop h1 {
	font-size: 2.2rem; 
	line-height: 1.2;
	margin: 0.25em 0 0.5em 0;
	
}

.casestudyorangeinner h3, 
.casestudywhiteinner h3 { 
    font-size: 2rem; 
    line-height: 1.0; 
    margin-bottom: 10px; 
	}

.casestudyorangetop h4 {
	font-size: 1em;
	color: #FFF;
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: 5px;
	border-bottom: thin;
	border-bottom-color: #FFF;
	border-bottom-style: solid;
	display: inline-block;
	padding-bottom: 0.25em;
}

.casestudyorange { padding: 7.5vh 0 7.5vh 0; background: #FE5000; }

.casestudywhite { display: flex; justify-content: center; align-items: center; padding: 75px 0 75px 0; background-color: #FFF; } 

.casestudywhitereduced { display: flex; justify-content: center; align-items: center; padding: 25px 0 75px 0; background-color: #FFF; } 

.casestudytestimonial {
	width: 100%;
	margin-top: 40px;
	background-image: url('../images/left-quote.svg'), url('../images/right-quote.svg');
	background-position: top 0 left 0, bottom 0 right 0;
	background-repeat: no-repeat, no-repeat;
	background-size: 20px auto, 20px auto; 
	padding: 0 30px 0 30px; 
	box-sizing: border-box;
	color: #6F6F6E;	
}

.contactmap { position: relative; width: 100%; padding-bottom: 50vh; height: 0; overflow: hidden; }
.contactmap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

#clients { display: flex; justify-content: center; align-items: center; padding: 75px 0 75px 0; background-color: #FFF; }
#clientsinner { display: flex; flex-wrap: wrap; }
#clientsinner img { width: 90%; margin-left: 5%; margin-right: 5%; }
#clients h2 { text-align: center; width: 100%; }

/* --- Footer Structuring --- */
footer { background-color: #6F6F6E; display: flex; justify-content: center; align-items: center; }
#footerinner { padding: 50px 0 25px 0; }
#connect img { width: 15%; height: auto; float: left; margin-top: 2.5%; }
#connect a+ a img { margin-left: 5%; }
#connect img:hover { opacity: 0.5; filter: alpha(opacity=50); }
#footerlogos { width: 100%; display: flex; flex-direction: column; }
#footerlogos img { width: 40%; height: auto; margin-top: 7.5%; }
.whitesmaller { color: #FFF; font-size: x-small; line-height: 120%; float: left; margin-top: 7.5%; }

/* --- Mobile Global Layout Grids (CSS Grid Refactor) --- */
.flex-grid,
.flex-grid-2-1,
.flex-grid-3-1,
.flex-grid-3,
.flex-grid-4-1,
.flex-grid-4,
.flex-grid-5-3,
.flex-grid-6-3,
.flex-grid-adapt {
	display: grid !important;
	gap: 1.5rem !important;
}

/* Fallback single columns for standard structural layouts */
.flex-grid { grid-template-columns: repeat(1, 1fr) !important; }

/* Desktop-Mobile convention configurations mapped to baseline mobile views */
.flex-grid-2-1 { grid-template-columns: repeat(1, 1fr) !important; }
.flex-grid-3-1 { grid-template-columns: repeat(1, 1fr) !important; gap: .75rem !important; }
.flex-grid-4-1 { grid-template-columns: repeat(1, 1fr) !important; margin-bottom: 2em; }

/* Multi-column configurations on small screens */
.flex-grid-3   { grid-template-columns: repeat(3, 1fr) !important; gap: 4% !important; }
.flex-grid-4   { grid-template-columns: repeat(4, 1fr) !important; gap: 3% !important; }
.flex-grid-5-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 1rem !important; }
.flex-grid-6-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 1rem !important; align-items: center; }
.flex-grid-adapt { grid-template-columns: repeat(3, 1fr) !important; }

/* Structural Child Reset Rule */
.flex-grid .col, .flex-grid .col2, .flex-grid .col3,
.flex-grid-2-1 .col, .flex-grid-3-1 .col, .flex-grid-3 .col,
.flex-grid-4-1 .col, .flex-grid-4 .col, .flex-grid-5-3 .col,
.flex-grid-6-3 .col, .flex-grid-adapt .col {
	width: auto !important;
	margin: 0 !important;
}

/* --- Mobile Text Class Definitions --- */
p, ul { font-size: 80%; }
h1 { font-size: 225%; line-height: 1em; margin-bottom: 1.25%; }
h2 { font-size: 225%; margin-bottom: 0.5em; } /* FIXED: Replaced fluid % with structural em cushion */
h3 { font-size: 200%; }
h4 { font-size: 120%; margin-bottom: .5em; }
.larger, .largerwhite { font-size: 85%; }
.largerwhite { color: #FFF; }
.muchlargerwhite { font-size: 90%; color: #FFF; line-height: 1.5em; }
p + h3 { margin-top: 1em; }

@keyframes aboutanim { 0%, 100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* --- Mobile Navigation Dropdown Overlay Engine --- */
.overlay { height: 100%; width: 0; position: fixed; z-index: 2000; top: 0; left: 0; background-color: rgba(254,80,0, 0.95); overflow-x: hidden; transition: 0.4s; }
.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; }
.overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #FFF; display: block; transition: 0.3s; }
.overlay a:hover, .overlay a:focus { color: #f1f1f1; }
.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; }


/* ==========================================================================
   3. PORTFOLIO GRID ENGINE & ASSETS
   ========================================================================== */
/* Wrapper sits neatly below mobile header (60px) */
#portfolio { 
	padding-top: 0 !important; 
	color: #FFF; 
	position: relative; 
	width: 100%; 
	display: block; 
	margin-top: 60px; 
}

.flex-grid-portfolio { 
	display: flex; 
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
}

.flex-grid-portfolio .col { 
	width: 33.333%; 
	height: 29.1666vh; 
	overflow: hidden; 
	display: inline-block;
	cursor: pointer;
	position: relative; 
	box-sizing: border-box;
}

.flex-grid-portfolio .inner { 
	width: 100%; 
	height: 100%; 
	padding: 0;
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	background-color: rgba(136, 136, 136, 2.5); 
	transition: transform 0.4s ease-out, background-color 0.4s ease-out; 
	text-align: center; 
}

.flex-grid-portfolio .col:hover .inner,
.flex-grid-portfolio .col:focus .inner {
	transform: scale(1.08);
	background-color: rgba(254, 80, 0, 0.15);
	text-shadow: 0px 2px 15px rgba(0,0,0,0.6);
}

.flex-grid-portfolio .inner h5 {
	margin-bottom: 0em !important;
}

.flex-grid-portfolio .inner p {
	margin-top: 0 !important;
	font-weight: 300 !important;
}

/* --- Shared background sizing/position for all portfolio image swaps below --- */
#martlet, #felixreport, #nuffieldmagazine, #fingersforks, #observatory,
#commonwealth, #postmaster, #imprint, #nuffieldlegacy, #felix, #queens,
#aularian, #oriel, #scofell, #merton, #sheldon, #miltonpark, #signalyard {
	background-size: cover;
	background-position: center;
}

/* --- Core Baseline Portfolio Images (Explicitly Fixed Paths to ../ folders) --- */
#martlet          { background-image: url("../images/portfolio/Univ-Martlet-Magazine-Cover-500.webp"); }
#felixreport      { background-image: url("../images/portfolio/Felix_Project_Annual_Report_Cover_500.webp"); }
#nuffieldmagazine { background-image: url("../images/portfolio/Nuffield_Magazine_Cover_500.webp"); }
#fingersforks     { background-image: url("../images/portfolio/Fingers_Forks_Tablet_Website_500.webp"); }
#observatory      { background-image: url("../images/portfolio/GTC_Observatory_Magazine_Cover_500.webp"); }
#commonwealth     { background-image: url("../images/portfolio/Lincoln_Commonwealth_Covers_500.webp"); }
#postmaster       { background-image: url("../images/portfolio/Merton_Record_Cover_500.webp"); }
#imprint          { background-image: url("../images/portfolio/Lincoln-Imprint-Magazine-Covers-500.webp"); }
#nuffieldlegacy   { background-image: url("../images/portfolio/Nuffield_Legacy_Brochure_Cover_500.webp"); }
#felix            { background-image: url("../images/portfolio/Felix_Project_Website_500.webp"); }
#queens           { background-image: url("../images/portfolio/Queens-Translation-Exchange-Brochure-Cover-500.webp"); }
#aularian         { background-image: url("../images/portfolio/Teddy-Hall-Aularian-Magazine-Covers-500.webp"); }
#oriel            { background-image: url("../images/portfolio/Oriel-Floreat-Magazine-Covers-500.webp"); }
#scofell          { background-image: url("../images/portfolio/Scofell-Website-500.webp"); }
#merton           { background-image: url("../images/portfolio/Merton_College_Donor_Report_Cover_500.webp"); }
#sheldon          { background-image: url("../images/portfolio/Sheldon-Medal-Invites-and-Sleeves-500.webp"); }
#miltonpark       { background-image: url("../images/portfolio/Milton-Park-Website-Laptop-500.webp"); }
#signalyard       { background-image: url("../images/portfolio/Milton-Park-Signal-Yard-Brochure-Cover-500.webp"); }


/* ==========================================================================
   4. SMALL SMARTPHONES (499px to 600px Micro-Bracket)
   ========================================================================== */
@media only screen and (min-width: 499px) and (max-width: 600px) {
	.narrow { width: 85%; }
	.narrow40 { width: 85%; }
	.narrow50 { width: 75%; }
	.narrow65 { width: 65%; }
	
	.wwdinner { font-size: 100%; }
	h1 { font-size: 250%; }
	h2 { font-size: 250%; margin-bottom: 0.5em; } /* FIXED: Replaced fluid % with structural em cushion */

	/* Grid scaling rules for Micro-Bracket viewports */
	.flex-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; }
	.flex-grid-4-1 { grid-template-columns: repeat(2, 1fr) !important; gap: 4% !important; }
	
	#footerlogos { display: flex; flex-direction: row; }
	#footerlogos img { width: 90px; margin-right: 20px; margin-top: 0; }
}


/* ==========================================================================
   5. MEDIUM SMARTPHONES & PORTRAIT TABLETS (601px to 768px Range)
   ========================================================================== */
@media only screen and (min-width: 601px) {
	.narrow, .narrow40, narrow50, .narrow65 { width: 85%; }

	header { padding-top: 15px !important; padding-bottom: 15px !important; }
	header img { height: 60px !important; }
	
	#intro { padding-top: 120px; padding-bottom: 12.5vh; background: url(../images/background-med.jpg) no-repeat center top fixed; background-size: 150%; }
	
	#aboutintro { background-image: url("../images/about-bg-med.jpg"); }
	#welcome, #hww, #contact { padding: 75px 0 75px 0; }
	.contactmap { padding-bottom: 50vh; }
	
	#clientsinner { padding: 100px 0 100px 0; }
	
	.casestudyorangeinner { padding: 0; }
	.casestudywhiteinner { padding: 50px 0 100px 0; }
	
	.casestudyorangetop h1 { font-size: 4rem; line-height: 1.2; }
	
	.casestudyorangeinner h3, 
	.casestudywhiteinner h3 { 
    font-size: 2.5rem; 
    line-height: 1.2; 
    margin-bottom: 20px; 
	}

	.casestudyorangetop h4 { font-size: 1.5rem; line-height: 1.2; }
	
	.casestudywhitereduced { display: flex; justify-content: center; align-items: center; padding: 0; background-color: #FFF; } 
	
	.casestudytestimonial {
		margin-top: 75px;
		background-size: 50px auto, 50px auto; 
		padding: 0 12.5% 0 12.5%; 
	}
	
	#footerlogos { flex-direction: row; padding-top: 5%; }
	#footerlogos img { width: 100px; margin-right: 20px; margin-top: 0; }
	
	/* RECALCULATED: Add missing anchor rule for mid-tier header clearance (60px img + 15px top + 15px bottom = 90px) + 20px cushion */
	.anchor { position: absolute; top: -110px; }

	/* Grid layout distributions across structural mid-tier responsive views */
	.flex-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; }
	.flex-grid-3-1 { grid-template-columns: repeat(1, 1fr) !important; }
	.flex-grid-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 3.5% !important; }
	.flex-grid-4-1 { grid-template-columns: repeat(2, 1fr) !important; gap: 4% !important; margin-bottom: 2em; }
	.flex-grid-5-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 3.5% !important; }

	.arrow:after { border-top-width: 50px; }
	
	/* Refactored mid-bracket container engine to allow safe portrait stacked layouts */
	.whatwedoinner { display: flex; flex-direction: column; justify-content: center; align-items: top; }
	.wwdinner { font-size: 140%; text-align: center; }
	.wwdsplit { width: 100%; max-width: 650px; text-align: left; margin-bottom: 2rem; }
	.wwdsplitimg { width: 30%; max-width: 350px; height: auto; margin: 0 auto; }

	p, ul, footer ul { font-size: 85%; }
	h1 { font-size: 250%; line-height: 1em; margin-bottom: 1.25%; }
	h2 { font-size: 250%; line-height: 1em; margin-bottom: 0.5em; } /* FIXED: Replaced fluid % with structural em cushion */
	h3 { font-size: 200%; }
	h4 { font-size: 120%; margin-bottom: .5em; }
	h5 { font-size: 95%; line-height: 1.5em; margin-bottom: .75em; }
	.larger, .largerwhite, .muchlargerwhite { font-size: 100%; }
	.intro-text-dark { font-size: 95%; line-height: 1.4em; margin-bottom: .75em; }
}


/* ==========================================================================
   6. LANDSCAPE TABLETS & MID-TIER SCREENS (769px to 1150px Breakpoints)
   ========================================================================== */
@media only screen and (min-width: 1025px) {
	.mobile-only { display: none !important; }
	.desktop-only { display: block !important; }
	
	.narrow { width: 90%; max-width: 1024px; }
	.narrow65 { width: 90%; }
	.narrow50 { width: 60%; }
	.narrow40 { width: 60%; }
	
	header { padding-top: 15px !important; padding-bottom: 15px !important; }
	header img { height: 60px !important; }

	.anchor { top: -110px; }
	
	#intro { height: 100vh; padding-top: 0; padding-bottom: 0; background: url(../images/background-lg.jpg) no-repeat fixed center; background-size: 100%; }
	#logo, #top { display: block; }
	
	#aboutintro { background-image: url("../images/about-bg-large.jpg"); }
	#welcome, #hww, #contact { padding: 110px 0 110px 0; }
	.contactmap { padding-bottom: 70vh; }
	
	#clientsinner { padding: 125px 0 125px 0; }
	
	.casestudywhiteinner { padding: 0; }
	
	.casestudywhitereduced { display: flex; justify-content: center; align-items: center; padding: 0; background-color: #FFF; } 
	
	.casestudyorangetop h1 { font-size: 4rem; line-height: 1.2; }
	
	.casestudyorangerinner h3, 
	.casestudywhiteinner h3 { 
    font-size: 2.5rem; 
    line-height: 1.2; 
    margin-bottom: 10px; 
	}

	.casestudyorangetop h4 { font-size: 1.5rem; line-height: 1.2; }
	
	#footerlogos { display: flex; flex-direction: column; }
	#footerlogos img { width: 40%; margin-top: 7.5%; }
	
	/* Core baseline grid targets for full desktop scales */
	.flex-grid { grid-template-columns: 1fr 2fr !important; gap: 5% !important; }
	.flex-grid-2-1 { grid-template-columns: repeat(2, 1fr) !important; gap: 4% !important; }
	.flex-grid-3-1 { grid-template-columns: repeat(3, 1fr) !important; gap: 3.5% !important; }
	.flex-grid-4-1 { grid-template-columns: repeat(4, 1fr) !important; gap: 2.6% !important; margin-bottom: 0; }
	.flex-grid-5-3 { grid-template-columns: repeat(5, 1fr) !important; gap: 2.5% !important; }
	.flex-grid-6-3 { grid-template-columns: repeat(6, 1fr) !important; gap: 2.5% !important; align-items: center; }
	
	#portfolio, #contact { margin-top: 90px !important; }

	.flex-grid-portfolio { 
		display: flex !important; 
		flex-direction: row !important; 
		flex-wrap: wrap !important;
		justify-content: space-between !important;
	}
	/* Resets columns back to native full height rule */
	.flex-grid-portfolio .col { 
		width: 33.333% !important; 
		height: 29.1666vh !important;
	}
	
	.flex-grid-wwd { display: flex; }
	.flex-grid-wwd .col { flex: 1; position: relative; overflow: hidden; }

	#wwdbuttons { display: flex !important; }
	#wwdmobile { display: none !important; }
	.arrow:after { border-top-width: 75px; }
	
	
	.whatwedoinner { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: top !important; max-width: 1200px !important; margin: 0 auto !important; width: 100% !important; }
	.wwdinner { font-size: 80%; text-align: left; }
	.wwdsplit { width: 55%; margin-bottom: 0; text-align: left; }
	.wwdsplitimg { width: 30%; height: auto; margin-bottom: 0; }
	
	#gdimg, #wdimg, #brndimg, #mktimg, #prntimg, #mailimg { order: initial; }
	#gdtext, #wdtext, #brndtext, #mkttext, #prnttext, #mailtext { order: initial; }
	
	p, ul { font-size: 90%; }
	h1 { font-size: 350%; line-height: 1em; margin-bottom: 1.25%; }
	h2 { font-size: 350%; margin-bottom: 0; }
	h3 { font-size: 275%; }
	h4 { font-size: 140%; margin-bottom: .5em; }
	h5 { font-size: 100%; line-height: 1.5em; }
	.larger, .largerwhite, .muchlargerwhite { font-size: 100%; }
	.intro-text-dark { font-size: 100%; line-height: 1.4em; margin-bottom: 0; }
	
	#footerinner .col p:not(.whitesmaller), 
	#footerinner .col ul li, 
	#footerinner .col ul li a {
		font-size: 14px !important;
		line-height: 1.6em;
	}
	
	#footerinner .col p.whitesmaller {
		font-size: 11px !important; 
		line-height: 1.4em;
	}
	
}


/* ==========================================================================
   7. MID DESKTOP SCREEN ENGINE (Switches Background Grid to -700px Optimized Assets)
   ========================================================================== */
@media only screen and (min-width: 901px) {
	.desktop-only { display: flex !important; }
	.narrow { width: 85%; }
	.narrow65 { width: 80%; }
	
	header { padding-top: 20px !important; padding-bottom: 20px !important; }
	header img { height: 75px !important; }
	
	#videoBG { display: block; position: fixed; z-index: -1; width: 100%; height: auto; }
	#intro { height: 100vh; padding: 0; background: none; }
	
	#hww { padding: 75px 0 75px 0; }
	#clientsinner, #casestudywhiteinner { padding: 125px 0 150px 0; }

	.casestudywhiteinner { padding: 50px 0 50px 0; }
	
	.casestudywhitereduced { display: flex; justify-content: center; align-items: center; padding: 0; background-color: #FFF; } 
	
	.casestudywhiteinner .portfolioimagesinner {
    margin-top: 20px; 
}
	.casestudywhiteinner .portfolioimagesinner + h5 {
    margin-top: 50px;
	}
	
	.casestudyorangetop h1 { font-size: 4rem; line-height: 1.2; }
	
	.casestudyorangeinner h3, 
	.casestudywhiteinner h3 { 
    font-size: 3rem; 
    line-height: 1.2; 
    margin-bottom: 10px; 
	}

	.casestudyorangetop h4 { font-size: 1.5rem; line-height: 1.2; }
	
	.casestudywhitereduced { display: flex; justify-content: center; align-items: center; padding: 25px 0 75px 0; background-color: #FFF; } 
	
	#footerinner { padding-top: 50px; padding-bottom: 50px; }
	#connect img { width: 15%; }
	#footerlogos { display: flex !important; flex-direction: row !important; padding-top: 15px !important; width: 100% !important; clear: both !important; margin-top: 7.5%; }
	#footerlogos img { width: 110px !important; height: auto !important; margin-right: 15px !important; margin-top: 0 !important; float: left !important; }
	
	.anchor { top: -135px; }
	
	.wwdinner { font-size: 85%; }
	
	p, ul { font-size: 90%; }
	h1, h2 { font-size: 350%; }
	h3 { font-size: 275%; }
	h4 { font-size: 140%; }
	.larger, .largerwhite { font-size: 100%; }
	.muchlargerwhite { font-size: 130%; }

	#portfolio { margin-top: 115px !important; }
	
	#martlet          { background-image: url("../images/portfolio/Univ-Martlet-Magazine-Cover-700.webp"); }
	#felixreport      { background-image: url("../images/portfolio/Felix_Project_Annual_Report_Cover_700.webp"); }
	#nuffieldmagazine { background-image: url("../images/portfolio/Nuffield_Magazine_Cover_700.webp"); }
	#fingersforks     { background-image: url("../images/portfolio/Fingers_Forks_Tablet_Website_700.webp"); }
	#observatory      { background-image: url("../images/portfolio/GTC_Observatory_Magazine_Cover_700.webp"); }
	#commonwealth     { background-image: url("../images/portfolio/Lincoln_Commonwealth_Covers_700.webp"); }
	#postmaster       { background-image: url("../images/portfolio/Merton_Record_Cover_700.webp"); }
	#imprint          { background-image: url("../images/portfolio/Lincoln-Imprint-Magazine-Covers-700.webp"); }
	#nuffieldlegacy   { background-image: url("../images/portfolio/Nuffield_Legacy_Brochure_Cover_700.webp"); }
	#felix            { background-image: url("../images/portfolio/Felix_Project_Website_700.webp"); }
	#queens           { background-image: url("../images/portfolio/Queens-Translation-Exchange-Brochure-Cover-700.webp"); }
	#aularian         { background-image: url("../images/portfolio/Teddy-Hall-Aularian-Magazine-Covers-700.webp"); }
	#oriel            { background-image: url("../images/portfolio/Oriel-Floreat-Magazine-Covers-700.webp"); }
	#scofell          { background-image: url("../images/portfolio/Scofell-Website-700.webp"); }
	#merton           { background-image: url("../images/portfolio/Merton_College_Donor_Report_Cover_700.webp"); }
	#sheldon          { background-image: url("../images/portfolio/Sheldon-Medal-Invites-and-Sleeves-700.webp"); }
	#miltonpark       { background-image: url("../images/portfolio/Milton-Park-Website-Laptop-700.webp"); }
	#signalyard       { background-image: url("../images/portfolio/Milton-Park-Signal-Yard-Brochure-Cover-700.webp"); }
}


/* ==========================================================================
   8. LAPTOPS & WORKSTATIONS (1151px to 1280px Scale Settings)
   ========================================================================== */
@media only screen and (min-width: 1151px) {
	.narrow { width: 80%; max-width: 1024px; }
	#welcome { padding: 75px 0 75px 0; }
	#clientsinner { padding: 25px 0 25px 0; }
	.casestudywhiteinner { padding: 25px 0 25px 0; }
	
	p, ul { font-size: 100%; }
	h1, h2 { font-size: 350%; }
	h3 { font-size: 275%; }
	h4 { font-size: 140%; }
	h5 { font-size: 110%; line-height: 1.5em; }
	.larger, .largerwhite { font-size: 100%; }
	.muchlargerwhite { font-size: 130%; }
	.intro-text-dark { font-size: 110%; line-height: 1.4em; }
}


/* ==========================================================================
   9. WIDESCREEN DISPLAYS (1281px to 1920px Bound)
   ========================================================================== */
@media only screen and (min-width: 1281px) {
	.narrow { max-width: 1280px; width: 80%; }
	#welcome, #hww, #contact { padding: 125px 0 125px 0; }
	#clientsinner { padding: 50px 0 50px 0; }
	.casestudywhiteinner { padding: 50px 0 50px 0; }
	#connect img { width: 10%; }
	
	header { padding-top: 20px !important; padding-bottom: 20px !important; }
	header img { height: 7.5vh !important; }

	/* RECALCULATED: Replaced uncalibrated vh setup with exact math: -(7.5vh + 20px top + 20px bottom + 20px cushion) */
	.anchor { top: calc(-7.5vh - 60px); }
	
	#wwdwrapper { height: calc(100vh - 115px); padding-top: 115px; }
	#wwdintro { padding: 5vh 12.5% 5vh 12.5%; }
	
	#graphicdesignwrapper, #brandingwrapper, #printwrapper { padding: 10vh 0 10vh 0; }
	#webdesignwrapper, #marketingwrapper, #mailingwrapper { padding: 15vh 0 15vh 0; }
	
	.wwdinner { font-size: 100%; }
	.arrows, .arrowsdown { max-width: 50px; }
	.arrows { margin-bottom: 50px; }
	.arrowsdown { margin-top: 50px; }
	
	h1, h2 { font-size: 375%; }
	h1 { margin-top: 2.5vh; margin-bottom: .5em; }
	h2 { margin-bottom: .5em; }
	h3 { font-size: 300%; margin-bottom: .25em; }
	h4 { font-size: 150%; margin-bottom: .5em; }
	h5 { font-size: 110%; line-height: 1.5em; margin-bottom: 0; }
	.larger, .largerwhite { font-size: 110%; }
	.muchlargerwhite { font-size: 150%; }
	.intro-text-dark { font-size: 110%; line-height: 1.4em; }
	.contactmap { padding-bottom: 30%; }

	/* Wrapper manages variable widescreen layout constraints */
	#portfolio { margin-top: calc(7.5vh + 40px) !important; }
}


/* ==========================================================================
   10. ULTRA-WIDE SCALES & ULTRA DESKTOP (1921px and Above)
   ========================================================================== */
@media only screen and (min-width: 1921px) {
	.narrow { max-width: 1400px; width: 80%; }
	.narrow40 { width: 40%; }
	.narrow50 { width: 60%; }
	.narrow65 { width: 65%; }
	#welcome, #hww, #contact { padding: 100px 0 100px 0; }
	#connect img { width: 12.5%; }
	
	h1, h2 { font-size: 375%; }
	h3 { font-size: 300%; }
	h4 { font-size: 150%; }
	h5 { font-size: 110%; line-height: 1.5em; }
	.larger { font-size: 110%; }
	.largerwhite { font-size: 130%; }
	.muchlargerwhite { font-size: 180%; }
	.intro-text-dark { font-weight: bold; font-size: 110%; line-height: 1.4em; margin: 0; padding: 0; }
	.contactmap { padding-bottom: 30%; }

	/* --- Ultimate High-Res Portfolio Injection Layer --- */
	#martlet          { background-image: url("../images/portfolio/Univ-Martlet-Magazine-Cover-900.webp"); }
	#felixreport      { background-image: url("../images/portfolio/Felix_Project_Annual_Report_Cover_900.webp"); }
	#nuffieldmagazine { background-image: url("../images/portfolio/Nuffield_Magazine_Cover_900.webp"); }
	#fingersforks     { background-image: url("../images/portfolio/Fingers_Forks_Tablet_Website_900.webp"); }
	#observatory      { background-image: url("../images/portfolio/GTC_Observatory_Magazine_Cover_900.webp"); }
	#commonwealth     { background-image: url("../images/portfolio/Lincoln_Commonwealth_Covers_900.webp"); }
	#postmaster       { background-image: url("../images/portfolio/Merton_Record_Cover_900.webp"); }
	#imprint          { background-image: url("../images/portfolio/Lincoln-Imprint-Magazine-Covers-900.webp"); }
	#nuffieldlegacy   { background-image: url("../images/portfolio/Nuffield_Legacy_Brochure_Cover_900.webp"); }
	#felix            { background-image: url("../images/portfolio/Felix_Project_Website_900.webp"); }
	#queens           { background-image: url("../images/portfolio/Queens-Translation-Exchange-Brochure-Cover-900.webp"); }
	#aularian         { background-image: url("../images/portfolio/Teddy-Hall-Aularian-Magazine-Covers-900.webp"); }
	#oriel            { background-image: url("../images/portfolio/Oriel-Floreat-Magazine-Covers-900.webp"); }
	#scofell          { background-image: url("../images/portfolio/Scofell-Website-900.webp"); }
	#merton           { background-image: url("../images/portfolio/Merton_College_Donor_Report_Cover_900.webp"); }
	#sheldon          { background-image: url("../images/portfolio/Sheldon-Medal-Invites-and-Sleeves-900.webp"); }
	#miltonpark       { background-image: url("../images/portfolio/Milton-Park-Website-Laptop-900.webp"); }
	#signalyard       { background-image: url("../images/portfolio/Milton-Park-Signal-Yard-Brochure-Cover-900.webp"); }
}


/* ==========================================================================
   11. CORE COMPONENT ASPECT RATIOS, HOVERS & NESTED LINK OVERRIDES
   ========================================================================== */
@media (min-aspect-ratio: 16/9) { #videoBG { width: 100%; height: auto; } }
@media (max-aspect-ratio: 16/9) { #videoBG { width: auto; height: 100%; } }

@media screen and (min-height: 768px) and (max-width: 1150px) {
	h1 { font-size: 350%; line-height: 1em; margin-bottom: 1.25%; }
	h2 { font-size: 350%; margin-bottom: 0.5em; } /* FIXED: Replaced fluid % with structural em cushion */
	h3 { font-size: 275%; }
	h4 { font-size: 140%; margin-bottom: .5em; }
	h5 { font-size: 120%; line-height: 1.2em; }
	.larger, .largerwhite { font-size: 90%; }
	.muchlargerwhite { font-size: 120%; }
	p, ul { font-size: 90%; }
}

#contact .col a:link, #contact .col a:visited { text-decoration: none; color: #000; margin-left: 0; transition: ease-in .2s; }
#contact .col a:active { text-decoration: none; color: #000; }
#contact .col a:hover { text-decoration: none; margin-left: 2.5%; transition: ease-out .2s; color: #FFF; }
#contact .col2 a:link, #contact .col2 a:active, #contact .col2 a:visited { text-decoration: underline; color: #000; transition: ease-in .2s; }
#contact .col2 a:hover { text-decoration: none; transition: ease-out .2s; color: #FFF; }

footer li+li { margin-top: .75em; }
footer a:link, footer a:visited, footer a:active { color: #FFF; text-decoration: none; margin-left: 0; transition: ease-in .2s; }
footer a:hover { color: #FFF; text-decoration: none; margin-left: 2.5%; transition: ease-out .2s; }


/* ==========================================================================
   12. MOBILE LANDSCAPE OVERRIDES
   ========================================================================== */
@media only screen and (max-width: 950px) and (orientation: landscape) {
	header img { height: 45px !important; }
	#intro { padding-top: 25vh; padding-bottom: 10vh; height: 60vh; background: url(../images/background-med.jpg) no-repeat center bottom fixed; background-size: cover; }
	
	#aboutintro { background-image: url("../images/about-bg-sm.jpg"); height: 50vh; }
	#welcome, #hww, #contact { padding: 75px 0 75px 0; }
	
	.wide { width: 100%; height: auto; }
	.narrow, .narrow50 { width: 90%; height: auto; }

	/* RECALCULATED: Refactored landscape rule to carry the full uniform 20px cushion (45px img + 20px padding = 65px header) + 20px cushion */
	.anchor { top: -85px; }
	
	#wwdwrapper { padding-top: 65px; height: calc(100vh - 65px); }
	#wwdintro { width: 90%; padding: 5vh 5% 5vh 5%; }
	
	/* Refactored inline safety configurations for Landscape small views */
	.whatwedoinner { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
	.wwdinner { background-size: 100% 25%; font-size: 85%; line-height: .9em; text-align: center; }
	.wwdinner:hover { background-size: 100% 25%; }
	
	.wwdsplit { width: 55%; margin-bottom: 0; text-align: left; }
	.wwdsplitimg { width: 38%; height: auto; margin: 0; }
	.arrows, .arrowsdown { max-width: 35px; }
	.arrows { margin-bottom: 25px; }
	.arrowsdown { margin-top: 25px; }
	
	p { font-size: 80%; }
	h1, h3 { font-size: 225%; }
	h1 { line-height: 1em; margin-bottom: 1.25%; }
	h2 { font-size: 225%; margin-bottom: 0.5em; } /* FIXED: Replaced fluid % with structural em cushion */
	h4 { font-size: 120%; margin-bottom: .5em; }
	h5 { font-size: 110%; line-height: 1.5em; margin-bottom: .75em; }
	.larger, .largerwhite { font-size: 85%; }

	.contactmap { padding-bottom: 70vh; }

	#connect img { width: 10%; margin-top: 0; }
	#connect a+ a img { margin-left: 2.5%; }
	.whitesmaller { margin-top: 5%; width: 100%; font-size: x-small; }
	#footerlogos { flex-direction: row; padding-top: 5%; width: 100%; display: flex; }
	
	/* Layout Track overrides for Landscape devices */
	.flex-grid-4-1 { grid-template-columns: repeat(4, 1fr) !important; gap: 4% !important; }

	#footerlogos img { 
		width: 100% !important; 
		max-width: 85px !important;
		height: auto !important; 
		margin-top: 0 !important;
	}

	.casestudyorangetop {
		padding-top: 130px !important;
		padding-bottom: 50px !important;
	}

	.casestudyorangetop h1 {
		font-size: 2.2rem !important;
	}
}


/* ==========================================================================
   13. SPECIFIC PORTRAIT TABLET & MOBILE VIEWPORT CORRECTIONS
   ========================================================================== */


#portfolio, #contact {
	margin-top: 90px !important;
}

#footerinner {
	padding: 120px 0 60px 0 !important; 
}

/* --- TABLET PORTRAIT (Catches screens between 601px and 1024px wide) --- */
@media screen and (min-width: 601px) and (max-width: 1024px) {
	#portfolio, #contact { 
		margin-top: 80px !important; 
	}
	
	.whatwedoinner {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: flex-start !important; 
		text-align: left !important;
	}
	
	.wwdsplit {
		width: 100% !important;
		max-width: 650px !important;
		margin-bottom: 2.5rem !important;
		text-align: left !important;
	}
	
	.wwdsplitimg {
		width: 60% !important;
		max-width: 350px !important;
		margin: 0 0 1.5rem 0 !important; 
		height: auto !important;
	}
	
	.flex-grid-portfolio { 
		display: flex !important; 
		flex-direction: row !important; 
		flex-wrap: wrap !important;
		justify-content: flex-start !important;  
		width: 100% !important;
	}
	
	.flex-grid-portfolio .col {
		width: 33.3333% !important;     
		flex: none !important;            
		height: auto !important;         
		aspect-ratio: 4 / 3 !important;  
		display: inline-block !important;
		margin: 0 !important;    
		padding: 0 !important;   
	}

	.flex-grid-portfolio .col:nth-of-type(3n) {
		margin-right: 0 !important;
	}

	/* Tablet Portrait Footer Layout Refinements */
	#footerinner {
		padding: 80px 0 40px 0 !important;
		width: 90% !important;
	}

	.flex-grid-4-1 { grid-template-columns: repeat(4, 1fr) !important; gap: 2.6% !important; }

	#footerlogos {
		display: flex !important;
		flex-direction: row !important; 
	}

	#footerlogos img { 
		width: 100% !important; 
		max-width: 85px !important; 
		height: auto !important; 
		margin-top: 0 !important;
	}
}


@media screen and (max-width: 600px) {
	#portfolio, #contact { 
		margin-top: 60px !important; 
	}
	
	.flex-grid-portfolio {
		display: flex !important;
		flex-direction: column !important; 
		justify-content: flex-start !important; 
	}

	/* Flawless stacked edge-to-edge single column layout */
	.flex-grid-portfolio .col {
		width: 100% !important;
		height: auto !important;         
		aspect-ratio: 4 / 3 !important;  
		display: block !important;
		margin: 0 !important;    
		padding: 0 !important;   
	}
	
	#footerinner {
		padding: 50px 0 25px 0 !important; /* Shorter mobile slant means less top padding is needed */
	}

	/* ISOLATED COMPONENT TRACK FIX: Only triggers the padding cushion on true portrait mobile phone views */
	.casestudyorangetop {
		padding-top: 130px !important;
		padding-bottom: 50px !important;
	}
}

/* ==========================================================================
   14. LANDSCAPE TABLET ADJUSTMENTS (Targeting 769px to 1024px wide)
   ========================================================================= */
@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    

    #clients #clientsinner { 
        padding: 40px 0 10px 0 !important; 
    }

    .flex-grid-5-3 { 
        padding-bottom: 325px; 
    }
}