/* ==================== RESET & BASE ==================== */
@import url('base.css');
@import url('typography.css');
@import url('nav.css');
@import url('header.css'); /* to create*/
@import url('footer.css');
@import url('boxes.css');
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');

:root {

	--acOrange: #F37321;
	 --acBlue: #0d69ba;
	--border-color: #ffffff;
	--border-width: 3;
	--draw-time: 0.75s;

	--start-delay: 1s; 
	--start-delay2: 2s; 
	
	
	--brand-gap-h: 10%; 
	--brand-gap-v: 5%;
}

.no-scroll {
  overflow: hidden;
  height: 100vh; /* Prevent background scrolling */
}


body {
  margin: 0;
  font-style: normal;
  line-height: 1.6;
  scroll-behavior: smooth; 
}

#main.nohero {
	margin-top:130px;
	padding-bottom:0%;
}

.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}


.accent-lighter {opacity:0.7; font-family: inherit;}
.accent-blue {color: var( --acBlue); font-family: inherit;}
.f-brown {color: #864c2e; font-family: inherit;}



/* ==========================================
   Containers
   ========================================== */
.container {
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}



header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 0;
    z-index: 999;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    background: transparent;
}

header.transparent { background-color: transparent; box-shadow: none; }
header.scrolled { background-color: rgba(255,255,255,1); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logo { margin: 0; }
.logo { height: 100px; padding:10px 0; transition: opacity 0.3s ease; }
.white-logo { display: block; }
.color-logo { display: none; }

header.scrolled .white-logo { display: none; }
header.scrolled .color-logo { display: block; }


/* Responsive Navigation */



.hero {
	position: relative; 
	height: 100vh; 
	background: url('../images/hero-bg.jpg') center center / cover no-repeat; 
	background-attachment: fixed; 
	display: flex; 
	align-items: center; 
	justify-content: flex-start;
	overflow: hidden;
}

/* iOS / mobile fix */
@media (max-width: 768px) {
  .hero,
	.mask-layer{
    background-attachment: scroll !important; /* fallback for mobile */
		
				
  }
	
	
}

  .svg-container {
    position: absolute;
    top: 150px;
    bottom: 20%;
    left: 50%;
    right: 10%;
    opacity: 1;
    z-index: 2;
  }

  svg {
    width: 100%;
    height: 100%;
    display: block; 
    pointer-events: none;
    overflow: visible;
  }

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(13, 105, 186, 1), rgba(13, 105, 186, 0.2));


 
	
	display: flex;
  align-items: center; /* Vertically centers content */
	
	
}

.hero-overlay.nocutout {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(13, 105, 186, 1), rgba(13, 105, 186, 0.2));
	animation:none;
	animation-fill-mode: none;

  clip-path: none;
	
	display: flex;
  align-items: center; /* Vertically centers content */
	
	
}

.hero-overlay .container {
  width: 100%;
	 display: flex;
  align-items: center;
  justify-content: flex-start;
}



.cutout-border {
  position: absolute;
	z-index:2;
  top: 150px;
  bottom: 20%;
  left: 50%;
  width: 40%;
  border: 4px solid white;
  pointer-events: none;
  box-sizing: border-box;
clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* start collapsed */
  animation: drawPolygon 3s linear 6s forwards;
}

  .hero-content {
	   max-width: 45%;
    position: relative;
    z-index: 5;
    color: white;
    text-align: left;
    padding: 0rem 0 0 ;
  }

.hero-content h1,
main h1 {
  font-size: 3rem;
	line-height: 1em;
  margin-bottom: 1rem;
}

.hero-content p {
	font-family: "Source Sans Pro", sans-serif;  
  font-size: 2.2rem;
	line-height: 1em;
  margin-bottom: 2rem;
}

button.hero-btn {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: sans-serif;
  color: var(--border-color);
}

svg.boxbtn {
  display: block;
}

path.boxbtn {
 fill: none;
  stroke: var(--border-color);
  stroke-width: var(--border-width);
  stroke-linejoin: miter;
  stroke-linecap: square;
  shape-rendering: crispEdges;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawOutline var(--draw-time) linear forwards;
  animation-delay: var(--start-delay);
}

.hero-btn .label {
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.75em;
  font-size: 1.5em;
  color: transparent;
  opacity: 0;
  animation: showText 0.4s ease forwards;
  animation-delay: calc(var(--start-delay) + var(--draw-time));
	  white-space: nowrap;
}

.scroll-button-holder{
	position: absolute; bottom:7%;left:48%; right:48%; text-align:center;
	transition: transform 1s ease-out;
}


.scroll-button {
  cursor: pointer;
  
}


.scroll-button-holder:hover  {
  animation: arrowElastic 0.5s ease-out;
}



.hero-btn{
  margin-top:3%;
  transition: 0.3s;
}

.hero-btn:hover {
  background-color: #ffffff; 
}

.hero-btn:hover .label {
  color: #333333 !important;
}



.delayed {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.delayed.show {
  visibility: visible;
  opacity: 1;
}


svg.arrow-down {
    display: block;
    cursor: pointer;
    margin: 0px auto;
  }
  .arrow {
    stroke: #fff;     
    stroke-width: 8;     
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawArrow 1s ease forwards;
animation-delay: 3s; 
    
  }






@media (max-width: 1440px) {
	
	 .hero-content {
	   max-width: 80%;
	}
}

@media (max-width: 1023px) {
	
	 .hero-content {
	   max-width: 80%;
	}
}

@media (max-width: 767px) {
	.arrow { animation-delay: 5.5s; }
	.scroll-button-holder:hover  {  animation:none; }
	
	  .hero-content {
	   max-width: 90%;
	}
		  

}

@media (max-width: 767px) {
	header { padding:12px 0; }
	.logo {height:70px;}
	
	.container {max-width:86%; }
	.svg-container {display:none; }
	.hero-content  {max-width: 100%;   }
	.hero-content h1 { font-size: 9.2vw;}
	.hero-content p { font-size: 6.5vw;}
	.scroll-button-holder { bottom: 12%;    left: 40%;    right: 40%;}
	.hero-overlay {    background: linear-gradient(to right, rgba(13, 105, 186, 1), rgba(13, 105, 186, 0.2));    animation: none;    clip-path: none;    display: flex;}
	.hero-btn {    margin: 3% auto;    display: flex; }
		
}


/* SECOND LEVEL PAGE STUFF */

.hero.secondlevel {
	background: url(../images/pet-food-bg.png) center center / cover no-repeat fixed;
}

.hero.secondlevel.foodbeverage {	background: url(../images/food-beverage-sector.png) center center / cover no-repeat fixed;}
/*.hero.secondlevel.petfood {	background: url(../images/petfood-bg.jpg) center center / cover no-repeat fixed;}*/
.hero.secondlevel.petfood {	background: url(../images/petfood-bg2.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.retail {	background: url(../images/retail-backdrop.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.healthcare {	background: url(../images/1669281335.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.industrial {	background: url(../images/521131192.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.custom {	background: url(../images/custom-sector.png) center center / cover no-repeat fixed;}
.hero.secondlevel.textiles{	background: url(../images/49045731.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.funeral {	background: url(../images/129598045.jpg) center center / cover no-repeat fixed;}

.hero.secondlevel.ourhistory {	background: url(../images/history-spl3.png) center center / cover no-repeat fixed;}
.hero.secondlevel.ourfounder {	background: url(../images/rjs-cover.jpg) center center / cover no-repeat fixed;}

.hero.secondlevel.experience {	background: url(../images/IMG_1470.JPG) center center / cover no-repeat fixed;}
.hero.secondlevel.acquisition {	background: url(../images/hp-boardroom.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.acquisitions {	background: url("../images/manufacturing.jpg") center center / cover no-repeat fixed;}
.hero.secondlevel.contactus {	background: url(../images/stewart-house-large.jpg) center center / cover no-repeat fixed;}

.hero.secondlevel.commitments {	background: url(../images/rob-and-callum-tandem.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.qualitycommitments {	background: url(../images/quality-commitments.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.envirocommitments {	background: url(../images/fsc-box.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.communitycommitments {	background: url(../images/spl-culture.jpg) center center / cover no-repeat fixed;}

.hero.secondlevel.foodpartnership {	background: url(../images/food-partnership.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.awardwinning {	background: url(../images/award-winning-supplier.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.productinnovations {	background: url(../images/jack-bg.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.costsavings {	background: url(../images/max-sarah-bg.jpg) center center / cover no-repeat fixed;}
.hero.secondlevel.testimonials {	background: url(../images/testimonials2.jpg) center center / cover no-repeat fixed;}

.hero.secondlevel.joinus {	background: url("../images/join-us-bg.jpg") center center / cover no-repeat fixed;}

.hero.secondlevel .typewriter {
/*
		min-height: 1em;
		height: 1em;
*/
}
.hero.secondlevel p.typewriter {
/*		font-size: 1.9rem;*/
		min-height: 5rem;
	}
@media (max-width: 767px) {
	.hero.secondlevel .typewriter {
		
}
.hero.secondlevel p.typewriter {
	
		min-height: 11rem;
	}
}



.hero.secondlevel .hero-btn .label {
  animation-delay: calc(var(--start-delay2) + var(--draw-time));
}

.hero.secondlevel path.boxbtn {
  animation-delay: var(--start-delay2);
}

.rangecarousel { 
	background-color:#eeeeee !important;
	border-top:3px dotted var( --acBlue); 
	border-bottom:3px dotted var( --acBlue);
	
}
.dotsatbase,
.dotsatbasedark{ padding:6% 0 0 !important; }
.rangecarousel h2{ color:var( --acBlue) !important;}


.dotted-path { position: relative; width: 50%; height: 160px; margin: 0 auto; }
.vertical-line, .horizontal-line, .vertical-line-bottom { position: absolute; border-style: solid; border-color: black; border-width: 0; opacity: 0; }
.vertical-line { left: 0; top: 0; width: 0; height: 0; border-left: 3px dotted var( --acBlue); }
.horizontal-line { left: 0; top: 80px; width: 0; height: 0; border-top: 3px dotted var( --acBlue); }
.vertical-line-bottom { right: 0; top: 80px; width: 0; height: 0; border-left: 3px dotted var( --acBlue); }
.draw-vertical { animation: drawVertical 0.5s forwards; }
.draw-horizontal { animation: drawHorizontal 0.5s forwards 0.5s; }
.draw-vertical-bottom { animation: drawVerticalBottom 0.5s forwards 1s; }


.dotsatbasedark .vertical-line, 
.dotsatbasedark .horizontal-line, 
.dotsatbasedark .vertical-line-bottom{
	border-color: #ffffff;
}


.dot-reverse .vertical-line { left: auto; right: 0; top: 0; width: 0; height: 0;}
.dot-reverse .horizontal-line { left: auto; right:0; top: 80px; width: 0; height: 0;  }
.dot-reverse .vertical-line-bottom { left:0; auto: 0; top: 80px; width: 0; height: 0; }

.reveal-section.dotsatbasedark {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease 1s, transform 0.7s ease 1s;
	padding:6% 0
}

@keyframes drawVertical {
  from { height: 0; opacity: 1; }
  to { height: 80px; opacity: 1; }
}

@keyframes drawHorizontal {
  from { width: 0; opacity: 1; }
  to { width: 100%; opacity: 1; }
}

@keyframes drawVerticalBottom {
  from { height: 0; opacity: 1; }
  to { height: 80px; opacity: 1; }
}






/* COMPANY PAGE STUFF */

.hero.ourcompany {
/*	background: url(../images/company-bg.png) center center / cover no-repeat fixed;*/
	background: url(../images/hp-boardroom2.jpg) center center / cover no-repeat fixed;
}
.hero.ourcompany .typewriter {
/*
		min-height: 1em;
		height: 1em;
*/
}
.hero.ourcompany p.typewriter {
		font-size: 1.9rem;
		min-height: 5rem;
	}


@media (max-width: 767px) {
	.hero.ourcompany .typewriter {		min-height: 3em;	}
	.hero.ourcompany .typewriter br {		display: none;}
	.hero.ourcompany p.typewriter {		min-height: 11rem;	}
	
	.hero.twoonmob .typewriter {		min-height: 2em;	}
	.hero.twoonmob .typewriter br {		display: none;}
	.hero.twoonmob p.typewriter {		min-height: 6rem;	}
	
	.hero.threeonmob .typewriter {		min-height: 3em;	}
	.hero.threeonmob .typewriter br {		display: none;}
	.hero.threeonmob p.typewriter {		min-height: 11rem;	}
}



.hero.ourcompany .hero-btn .label {
  animation-delay: calc(var(--start-delay2) + var(--draw-time));
}

.hero.ourcompany path.boxbtn {
  animation-delay: var(--start-delay2);
}

/* COMPANY PAGE STUFF */







/* Carousel container border */



.testimonial-carousel,
.rob-carousel,
.product-carousel {
	display: flex;                  /* allow vertical centering inside */
	flex-direction: column;
	margin: 0 auto;            /* center in parent */
	border: 2px solid white;
	padding: 20px;
	background-color: #2b675d;
	overflow: visible;         /* allow arrows outside */
	max-width: none;
	box-sizing: border-box;
	height:100%;


}

.rob-carousel {
	border:0px solid white;
	font-size:2em;
	background-color: #ffffff;
}


/* Slick slides */
.testimonial-carousel .slick-slide,
.rob-carousel .slick-slide,
.product-carousel .slick-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
	 height: 100%;  
	cursor: pointer;
}
.testimonial-carousel .slick-list,
.rob-carousel .slick-list,
.product-carousel .slick-list {
	
	height: 100%; 
}

/* Testimonial box */
.testimonial-carousel .testimonial-item,
.rob-carousel .testimonial-item,
.product-carousel .product-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;    
  padding: 20px;
  text-align: center;
  color: #fff;
  background-color: transparent;
}
.rob-carousel .testimonial-item {

  color: #000;

}


.rob-carousel .slick-prev,
.rob-carousel .slick-next,
	.rob-carousel .slick-prev:hover,
.rob-carousel .slick-next:hover{
	background-color:transparent !important;

}
.rob-carousel .slick-prev:before,
.rob-carousel .slick-next:before{
	
	color: var( --acBlue);
}



/* Stars */
.testimonial-item i.fa-star {
  color: #ffffff;
  margin: 0 2px;
}

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: none;
  cursor: pointer;
  font-size: 18px;
  z-index: 3;
  border-radius: 50% !important;
  color: #fff;
  display: block;
    width: 20px;
    height: 20px;

		border:0px;
	padding: 0.5rem 1rem;
	
	
}


.slick-prev:before,
.slick-next:before{
	 font-family: "Font Awesome 6 Pro" !important;  
	font-weight: 900;  
	font-size: 36px !important;
}
	
.slick-prev:before {
	content: "\f323" !important;  /* fa-chevron-left */
}
.slick-next:before {
  content: "\f324" !important;  /* fa-chevron-right */
}

/* Remove Slick's default arrows */






.slick-prev { left: -21px; }
.slick-next { right: -21px; }

.slick-prev:hover,
.slick-next:hover { background-color: none !important; }


/* Responsive */
@media (max-width: 768px) {
  .testimonial-carousel { max-width: 100%; padding: 10px; }

  .testimonial-carousel .testimonial-item { height: auto; padding: 15px; }
  .product-carousel .product-item { height: auto; padding: 15px; }
	
	
	.slick-prev:before,
	.slick-next:before{
		 font-family: "Font Awesome 6 Pro" !important;  
		font-weight: 900;  
		font-size: 24px !important;
	}
	
	.slick-prev{ left: -20px!important;}
	.slick-next{ right: -20px!important;}
	
	
	
}
















   
.product-carousel {
	background-color:transparent !important;
	border: 0px !important;
	padding: 0px !important;;
	margin:0 0 0 -15px;
}
.product-item {
	background-color: #c7bce2 !important;
	
}
.product-item h3{
	background: #ffffff;
    color: var( --acBlue);
    padding: 10px;
    margin: 10% 0 0;
	width: 100%;
	box-sizing: border-box;
	font-size:1.4rem;
	
}

.product-carousel .slick-slide {
	margin: 0 15px 0 15px !important; /* horizontal spacing between slides */
  box-sizing: border-box!important;
	
}

.product-carousel .slick-prev,
.product-carousel .slick-next {
  background-color: transparent !important;
  border: none !important;
  padding: 0px !important;
  cursor: pointer;
  width: 40px!important;
  height: 40px!important;
  line-height: 1 !important;

}

.product-carousel .slick-prev:before,
.product-carousel .slick-next:before {color: #000000; font-size: 40px;}

.product-carousel .slick-prev { left: -40px; }
.product-carousel .slick-next { right: -40px; }


/* SECOND LEVEL PAGE STUFF */



@media (max-width: 768px) {
	.product-carousel {
		margin:0 5%;
		width:90%;
	}

	.product-carousel .slick-slide {
		margin: 0 0px 0 0px !important; /* horizontal spacing between slides */
		box-sizing: border-box!important;
	}
}





.contact-form {
  max-width: 100%;
  margin: 30px  auto 0;
  padding: 0px;
}

.form-row {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.form-row input,
.form-row textarea {
  flex: 1;
  padding: 12px;
	background:#ffffff;
  border: 1px solid #fff;
  font-size: 1.25rem;
/*  background: transparent;*/
  color: #000;
  border-radius: 0;
	border-radius:4px !important;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: #aaa; 
}


textarea {
  width: 100%;
  resize: vertical;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.form-header h3 {
  margin: 0;
   font-size: 1.25rem;
  font-weight: normal;
}

.time-select {
  display: flex;
  align-items: center;
  gap: 10px;
   font-size: 1.25rem;
}

.time-select input {
  padding: 6px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
   font-size: 1.25rem;
  border-radius: 0;
}

.preferences {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.preferences label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
   font-size: 1.25rem;
}

.preferences input[type="checkbox"] {
  display: none;
}

.preferences .icon {
   font-size: 1.75rem;
  opacity: 0.4;
  transition: opacity 0.2s ease-in-out;
}

/* when checked, brighten icon */
.preferences input[type="checkbox"]:checked + .icon {
  opacity: 1;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 15px;
}

.form-footer button {
  background: #000000!important;
  color: #fff;
  padding: 14px 28px;
  border: 0px solid #fff !important;
   font-size: 1.25rem;
  cursor: pointer;
	 white-space: nowrap; /* keep button text on one line */
	border-radius:8px !important;
}

.form-footer .alt-email {
  font-size: 1.30rem;
	line-height:1.1;
  color: #fff;
	text-align: right; /* aligns text to the right */
	
}

.form-footer .alt-email a {
  color: #fff;
  text-decoration: underline;
}



/* Contact form alerting */
.input-error {
    border: 1px solid #F37320 !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}
.form-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  color: #000;
  border: 1px solid #e74c3c;
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  font-size: 0.95rem;
  transition: opacity 0.3s ease;
}

.form-alert i {
  margin-right: 10px;
  font-size: 1.2rem;
  color: #e74c3c;
}

.form-alert ul {
  margin: 0;
  padding-left: 20px;
  flex-grow: 1;
}

.form-alert-close {
  position: absolute;
  top: 5px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.3rem;
  font-weight: bold;
  color: #e74c3c;
  cursor: pointer;
  line-height: 1;
}

.form-alert-close:hover {
  color: #c0392b;
}

.alert-error {
  border-color: #F37320;
}

.alert-success {
  border-color: #2ecc71;
}

.alert-success i {
  color: #2ecc71;
}









/* Responsive styles */
@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
    gap: 15px;
  }

  .form-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .preferences {
    flex-direction: column;
    gap: 10px;
  }

  .form-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}



















.section {
  position: relative;
  width: 100%;
  height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 2rem;
  background-size: cover;
  background-attachment: fixed; /* fixed background */
  background-position: center;
}

/* Mask via SVG */
.section svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  z-index: 1;
}
.section-content {
  position: relative;
  z-index: 2;
	
	margin-top: 10%;
	
}

.title { font-size: 3rem; margin: 0.5em 0 0.2em 0; }
.strapline { font-size: 1.5rem; margin: 0; }
.strapthick { font-size: 2rem;	 font-family: "Source Sans Pro", sans-serif;  font-weight: 400; }
	
.underhalf {width:45%}
.underhalfr {width:40%}
.underhalfr {    margin: 0 0 0 60%; text-align: right}


.two-column-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;  
  gap: 20px;
  align-items: stretch;        
}


.two-column-layout > .left-content,
.two-column-layout > .right-grid {
  width: auto;
  min-width: 0;
}



.right-grid.testimonial-carousel {
  width: 100%;
}



@media (max-width: 768px) {
	
	.underhalf,
	.underhalfr	{
		width:100% !important; 
		margin:0 !important;}

	
  .two-column-layout {
    grid-template-columns: 1fr; 
    gap: 20px; 
  }
}





.brands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--brand-gap-h);
  row-gap: var(--brand-gap-v);
  margin-top: 20px;
}
.brands img {
  width: 100%;
  height: 70px; /* set desired height */
  object-fit: contain; /* preserves aspect ratio without stretching */
  display: block;
  border-radius: 0px !important;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* When visible (fade-in) */
.brands img.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Row 2 container */
.row-2 {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: var(--brand-gap-h, 20px);
}

.row-2 img {
  width: calc((100% - (2 * var(--brand-gap-h, 20px))) / 3);
  height: 70px;
  object-fit: contain;
}

/* Tablet: 2 columns */
@media (max-width: 1023px) {
  .brands {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--brand-gap-h);
    row-gap: var(--brand-gap-v);
  }

  .row-2 img {
    width: 100%;
  }
}

/* Mobile: 1 column */

@media (max-width: 767px) {
	.strapthick  {font-size:6.5vw;line-height: 1.1; }
	.strapthick br {display:none; }
	
	
  .brands {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* 2 per row */
    justify-items: center; /* center images */
    row-gap: 40px;         /* vertical spacing */
    column-gap: 20px;      /* horizontal spacing */
  }

  /* Flatten row-2 images into grid layout */
  .row-2 {
    display: contents; /* children now participate in parent grid */
  }

  .brands img {
    width: 75%;
    height: auto;
    object-fit: contain;
    display: block;
  }
	
	.brands img:nth-child(6) {
    width: 42%;
  }
	
	
}
























  /* Section */
  .reveal-section {
    position: relative;
    width: 100%;
    color: #ffffff;
    background-color: #422b65;
    overflow: hidden;
  }











  .parallax-container {
    display: flex;
    width: 100%;
    height: 500px; /* adjust as needed */
  }

  /* Left Text Column */
  .text-column {
    width: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  .text-column h2 {
/*    font-size: 2.5rem;*/
    margin-bottom: 0rem;
  }

  .text-column p {
margin-bottom: 0rem;
/*    line-height: 1.6;*/
  }

  .text-column button {
    padding: 12px 24px;
    border: none;
    background-color: #2b675d;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    width: fit-content;
  }

  /* Right Image Column */
  .image-column {

	  position: absolute;
    overflow: hidden;
    left: 25%;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
   
	  
  }

  .parallax-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%; /* taller for parallax effect */
    background-image: url('images/your-image.jpg'); /* replace with your image */
    background-size: cover;
    background-position: center;
    transform: translateY(0);
/*    transition: transform 0.1s linear;*/
  }

  /* Responsive: stack on small screens */
  @media (max-width: 768px) {
    .parallax-container {
      flex-direction: column;
      height: auto;
    }
    .text-column,
    .image-column {
      width: 100%;
      height: auto;
		left:0;
    }
  }












.section1 {
		position: relative;
		width: 100%;
		aspect-ratio: 2.03 / 1;
		background-color: #e5e3d6; 
		color:#ffffff;
		overflow: hidden;
		box-sizing: content-box;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background-color 1s ease; 
}

.section1.foursections {

		aspect-ratio: 2.03 / 1;
}

.mask-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/IMG_2051.jpg');
  background-size: 110% auto;
  background-position: center;
  background-attachment: fixed;

  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1849.94 2732.68" xmlns="http://www.w3.org/2000/svg"><path d="M1849.94,1.71c-605.34-25.77-932.28,245.74-940.59,436.87-3.06,70.47,137.55,315.07,284.94,346.21,104.44,22.07,207.03-35.7,208.68-31.64,4.8,11.79-1382.13,537.17-1369.87,773.08.97,18.61,312.51,450.38,312.51,450.38,137.87,94.98,339.54-45.88,341.52-13.96,1.63,26.21-411.99,219.23-687.12,337.07v431.78c33.09,29.45,1218.79-506.72,1237.17-819.23,1.15-19.63-153.96-282.07-275.74-370.72-141.17-102.76-502.35,108.68-490.21,88.85,159.32-260.43,1243.91-579.06,1348.08-888.51,48.39-143.74-70.1-222.5-202.21-304.44-156.26-96.92-465.7,114.48-458.17,87.82,16.29-57.63,317.23-295.04,690.77-277.7" fill="white"/></svg>') no-repeat center / cover;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1849.94 2732.68" xmlns="http://www.w3.org/2000/svg"><path d="M1849.94,1.71c-605.34-25.77-932.28,245.74-940.59,436.87-3.06,70.47,137.55,315.07,284.94,346.21,104.44,22.07,207.03-35.7,208.68-31.64,4.8,11.79-1382.13,537.17-1369.87,773.08.97,18.61,312.51,450.38,312.51,450.38,137.87,94.98,339.54-45.88,341.52-13.96,1.63,26.21-411.99,219.23-687.12,337.07v431.78c33.09,29.45,1218.79-506.72,1237.17-819.23,1.15-19.63-153.96-282.07-275.74-370.72-141.17-102.76-502.35,108.68-490.21,88.85,159.32-260.43,1243.91-579.06,1348.08-888.51,48.39-143.74-70.1-222.5-202.21-304.44-156.26-96.92-465.7,114.48-458.17,87.82,16.29-57.63,317.23-295.04,690.77-277.7" fill="white"/></svg>') no-repeat center / cover;

   mask-repeat: no-repeat;
   mask-size: cover;
}

.mask-layer::after {
    content: ""; 
    width: 100%;
    height: 100%;
    position: absolute; 
    top: 0;
    left: 0;
    background-image:url('../images/swirl-outs.svg');
    background-size: 100%
    
}
.mask-layer.ml2::after {    background-position: center;    }
.mask-layer.ml3::after {    background-position: bottom;    }


.mask-layer-fade {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    currentColor 0%,
    rgba(0,0,0,0) 25%,
    rgba(0,0,0,0) 75%,
    currentColor 100%
  );

  color: #e5e3d6;
  transition: color 2s ease;
}

.mask-layer.history {
	background-image:url('../images/history-spl.png');
	mask-position: top left
}
.mask-layer.experience {
/*	background-image:url('../images/office-bg.jpg');*/
/*	background-image:url('../images/IMG_1494.jpg');*/
	background-image:url('../images/team-sofa.jpg');
	mask-position: center center
}

.mask-layer.values {
	background-image:none; 
	background-color:var( --acBlue); 
	mask-position: bottom left;
}
.mask-layer.commitments {
	background-image:url('../images/sct.jpg');
	background-image:url('../images/quality-commitment.jpg');
	mask-position:  right top;
}


@media (max-width: 768px) {
	.mask-layer {			mask-position: center top !important;		}
	.mask-layer.history {		background-image:url('../images/history-spl2.png');			}
	
	.mask-layer.commitments {		background-image:url('../images/quality-commitement2.jpg');			}
	
	.mask-layer::after {
    content: ""; 
    width: 100%;
    height: 100%;

    position: absolute; 
    top: 0;
    left: 0;
    background-image:url('../images/swirl-outs-mobile.svg');
    background-size: 100%;
		 background-position: center top  !important; 
		mask-position: center top !important;
    
}
	
	.mask-layer.ml2::after {    background-position: center top !important;     }
	.mask-layer.ml3::after {    background-position: center top !important;   }


	
	
	
}


.section1 button,
.section1 a.button{
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: white;
  text-decoration: none;
  border-radius: 0px;
  font-weight: bold;
	border:2px solid #ffffff;
  transition: background 0.3s ease !important;
/*	margin-top:3%;*/
	margin-top:1%;
	display: inline-block;
	font-size: 1.5em;
	cursor: pointer;

}

.section1 button:hover,
.section1 a.button:hover {
  background-color: #ffffff; color: #333;
}

.section1 button.dark,
.section1 a.button.dark {
	border:2px solid #333333;color: #000;
}
.section1 button.dark:hover,
.section1 a.button.dark:hover {
	color: #ffffff; background-color: #333;
}

.section-content {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.section-content.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px) {
	.thirtysix{
		width: 50%;
    	margin: 0 auto;
	}
	.section1 {
		position: relative;
		width: 100%;
		height:100vh;
		height:110vh;
		aspect-ratio:unset;
		align-items: normal;
		text-align: left !important
	}
	
	.section1 .section-content {
		text-align: left !important;
/*		padding-top:10%;*/
	}
	.section1 .section-content br{
		display:none;
	}
	.section1 button{
		font-size: 4.5vw;
		margin-top: 10%;
	}
		
	.section1 h2 {	font-size: 9vw;  margin:0}
	
	.section1 .strapline {
		font-size: 4.5vw;
        line-height: 1.3;	
	}

	.section1 .strapthick {  
/*		line-height: 1.1;*/
		line-height: 0.8;
		font-size: 6vw;
		padding-bottom: 1em;
	}


	
	
	

	.mask-layer {
		top:50%;
		height:50%;
		background-size: auto 110%;
		opacity:1;
	-webkit-mask: url('data:image/svg+xml,<svg viewBox="0 0 1378.2 1463.7" xmlns="http://www.w3.org/2000/svg"><path d="M1378.2,47.4C580-54.2,228.2,278.3,219.9,469.5c-3.1,70.5,137.5,315.1,284.9,346.2,104.4,22.1,207-35.7,208.7-31.6,3,7.3-258.7,135.3-713.5,279.8v375s1094.1-420.1,1129.9-666.1c48.4-143.7-70.1-222.5-202.2-304.4-156.3-96.9-465.7,114.5-458.2,87.8,16.3-57.6,354.1-358,908.7-258" fill="white"/></svg>') no-repeat center / cover;
    mask: url('data:image/svg+xml,<svg viewBox="0 0 1378.2 1463.7" xmlns="http://www.w3.org/2000/svg"><path d="M1378.2,47.4C580-54.2,228.2,278.3,219.9,469.5c-3.1,70.5,137.5,315.1,284.9,346.2,104.4,22.1,207-35.7,208.7-31.6,3,7.3-258.7,135.3-713.5,279.8v375s1094.1-420.1,1129.9-666.1c48.4-143.7-70.1-222.5-202.2-304.4-156.3-96.9-465.7,114.5-458.2,87.8,16.3-57.6,354.1-358,908.7-258" fill="white"/></svg>') no-repeat center / cover;
	}
	
	.mask-layer-fade {
    	display: none;
	}
}










/* --- Main Content Sections --- */
main.container {
  padding: 40px 0;
  position: relative;
  z-index: 10;
}

.reveal-section {
/*  margin-bottom: 80px;*/
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
	padding:6% 0
}

.reveal-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-section > div {

  padding: 0px;
}
.reveal-section img {
  max-width: 100%;
  border-radius: 0px;
}
.reveal-section h2 {
  margin-top: 0;

}

.reveal-section button:not(.slick-prev):not(.slick-next),
.reveal-section a.button{

  padding: 0.5rem 1rem;
  background-color: transparent;
  color: white;
  text-decoration: none;
  border-radius: 0px;
  font-weight: bold;
	border:2px solid #ffffff;
  transition: background 0.3s ease !important;
	margin-top:3%;
	display: inline-block;
	font-size: 1.5em;
	cursor: pointer;

}

.reveal-section button:hover,
.reveal-section a.button:hover {
  background-color: none; color: #333;
}

.reveal-section button.dark,
.reveal-section a.button.dark {
	border:2px solid var( --acBlue) !important;color: #000!important;
}
.reveal-section button.dark:hover,
.reveal-section a.button.dark:hover {
	color: #ffffff; background-color: #33!important;
}

/* Flexbox layout applied correctly */
.reveal-section .text-image-split {
  display: flex;
  align-items: center;
  gap: 30px;
}

.reveal-section .three-split {
  display: flex;
  align-items: center;
  gap: 30px;
}

.reveal-section .text-content-half,
.reveal-section .image-content-half {
 flex: 0 0 calc(50% - 15px); 
  max-width: calc(50% - 15px);
}

.reveal-section .image-content-half {
  text-align: right;
}



/* Each section takes 1/3 of the container minus gaps */
.reveal-section .text-content1,
.reveal-section .text-content2,
.reveal-section .text-content3 {
  flex: 1 1 0;             /* Grow and shrink equally */
  min-width: 250px;        /* Prevent sections from getting too small */
  box-sizing: border-box;
}

/* Optional text alignment */
.reveal-section .text-content1 {
  text-align: left;
}

.reveal-section .text-content2 {
  text-align: left;
}

.reveal-section .text-content3 {
  text-align: left;
}
.reveal-section .text-content1 div,
.reveal-section .text-content2 div,
.reveal-section .text-content3 div{
width:100%; padding:4% 5%; margin:0 0% 0 0;  box-sizing:border-box; background:white; color:var( --acBlue); text-align: left; font-size:1.5em;
}


.reveal-section .text-content1 div:nth-of-type(even),
.reveal-section .text-content2 div:nth-of-type(even),
.reveal-section .text-content3 div:nth-of-type(even){
width:100%; padding:4% 5%; margin:30px 0% 30px 0;  box-sizing:border-box; background:white; color:var( --acBlue); text-align: left; font-size:1.5em;
}

.reveal-section.onwhite .text-content1 div,
.reveal-section.onwhite .text-content2 div,
.reveal-section.onwhite .text-content3 div{
background:#eeeeee; color:var( --acBlue); text-align: left; line-height:1.3em;
}
.reveal-section.onwhite .text-content1 div:hover,
.reveal-section.onwhite .text-content2 div:hover,
.reveal-section.onwhite .text-content3  div:hover{
background:#dddddd; cursor: pointer
}
.reveal-section.onwhite .text-content1 div a,
.reveal-section.onwhite .text-content2 div a,
.reveal-section.onwhite .text-content3 div a{
color:var( --acBlue);  font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
}

.reveal-section.onwhite { background-color:#ffffff; color:#000000}
.fourboxes{  }

@media (max-width: 768px) {
  .reveal-section .text-content1,
  .reveal-section .text-content2,
  .reveal-section .text-content3 {
    flex: 1 1 100%;
    text-align: center; 
  }
	
	.fourboxes{  background-size: cover; }
	
	
	.reveal-section .three-split {
		display: flex;
		align-items: center;
		gap: 0px; 
	}
	
	.reveal-section .text-content1 div:nth-of-type(even), 
	.reveal-section .text-content2 div:nth-of-type(even), 
	.reveal-section .text-content3 div:nth-of-type(even) {

    margin: 30px 0% 30px 0;
	}
	
	.reveal-section .text-content1, .reveal-section .text-content2, .reveal-section .text-content3 {
 
    	min-width: 100%;
		margin-bottom: 30px;

	}
	
	

}

.image-content-half img.imgleft,
.image-content-half img.imgright {
	width: 90%;
    max-width: 90%;
	margin: 0 10% 0 0;
	border-radius:10px;
}

.image-content-half img.imgright {
	width: 90%;
    max-width: 90%;
	margin: 0 0% 0 10%;
}

.image-content-half .imgtitle {
	width: 90%;
    max-width: 90%;
	margin: 3% 10% 0 0;
}

.image-content-half .imgtitleright {
	width: 90%;
    max-width: 90%;
	margin: 3% 0 0 10%;
}

.image-content-half .imgtitle p ,
.image-content-half .imgtitleright p {
	text-align:center;
}

@media (max-width: 768px) {
	
	.image-content-half img.imgleft,
	.image-content-half img.imgright {
		width: 100%;
		max-width: 100%;
		margin: 0 0% 0 0;
	}
	.image-content-half .imgtitle,
	.image-content-half .imgtitleright {
		width: 100%;
		max-width: 100%;
		margin: 3% 0 0 0%;
	}
	
}




	
/* Stack on mobile */
@media (max-width: 768px) {
  .reveal-section .text-image-split,
  .reveal-section .three-split {
    flex-direction: column; 
  }

  .reveal-section .text-content-half ,
  .reveal-section .image-content-half  {
    flex: 0 0 100%;
    max-width: 100%;
/*    text-align: center;  */
  }
	
	 .reveal-section .image-content-half img {
    margin: 0 auto; 
  }
	
}



.reveal-section .with-image {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}

.reveal-section .text-content {
  flex: 1 1 75%;
}

.reveal-section .image-content {
  flex: 1 1 20%;
  text-align: right;
}

.reveal-section .image-content img {
  max-width: 100%;
  height: auto;
  display: block;
}



/* Responsive layout: stack on small screens, 2 columns on mobile */
@media (max-width: 768px) {
	

.reveal-section h2 {
/*    font-size: 9vw;	*/
    font-size: 7.5vw;	
}

.reveal-section .container:nth-of-type(2) h2 {
  margin-top: 40px; /* adjust value as needed */
}	
	
	
.reveal-section h3 {
    font-size: 6vw;	
}
	
	.reveal-section h4 {
    font-size: 5vw;	
}
  .reveal-section {
    flex-wrap: wrap;
	  padding: 7vw 0;
  }
  .reveal-section > div {
    flex: 0 0 50%;
  }
  .reveal-section > div:first-child {
    order: 1;
  }
  .reveal-section > div:last-child {
    order: 2;
  }
	
	
	
	
	.reveal-section .with-image {
    flex-direction: column;
  }

  .reveal-section .image-content {
    text-align: center;
  }
	
	
	
}

@media (max-width: 480px) {
  .reveal-section > div {
    flex: 0 0 100%;
  }
}



.reveal-section.white {
	background-color:#ffffff !important;
	color:#000000;
}














	.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 50px;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}

.grid-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 0px;
  overflow: hidden;
/*  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);*/
  transition: box-shadow 0.3s ease;
}

.grid-item:nth-child(7) {
  grid-column: 2; /* places it in the center column */
  justify-self: center; /* centers it in that column */
}

.grid-item:hover {
/*  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);*/
}

.image-wrapper {
  overflow: hidden;
  flex-shrink: 0;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
	  border-radius: 0px;
}

.grid-item:hover .image-wrapper img {
  transform: scale(1.1);
}

.grid-item h3 {
  margin: 15px 0 15px;
  font-size: 2rem;
  text-align: center;
}

/* Responsive: switch to 2 columns on smaller screens */
@media (max-width: 767px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
	  gap:20px;
  }
}

/* Single column on very small screens */
@media (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}





/* CONTACT FORM */
@media (max-width: 767px) {
#contact .image-content-half{	display:none; }
}
	
 .form-message {
  margin-top: 2em;
  font-size: 1.3rem;
  display: none;
  padding: 12px 15px;;
  border-radius: 5px;
	 font-weight:900;
}
.form-message.success {
  display: block;
  background-color: #e6f7e6;
  color: #2f662f;

}
.form-message.error {
  display: block;
  background-color: #fdecea;
  color: #F37320;

}


/* CONTACT FORM */