/* {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}*/
*, *::before, *::after {
    box-sizing: border-box;
}
html { scrollbar-gutter: stable; }
body {
	display: -webkit-box;
	display: flex;
	color:var(--font-color);
	min-height: 100vh;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	font-family: "Albert Sans", sans-serif;
	font-size:16px;
	background:var(--blue);
}
hr{
	margin-top:70px;
	margin-bottom:70px;
}

/* COLOURS */
:root { 
	--font-color:#000000;
	--blue:#00116e;
	--light-blue:#63bce3;
	--navy:#0b0b33;
	--large-margin:70px;

    --oc-width: 300px;          /* panel width */
    --oc-bg: #0b0b33;           /* panel background */
    --oc-fg: #e8eaed;           /* panel text */
    --oc-accent: #5b8cff;       /* hover / focus accent */
    --oc-overlay: rgba(0,0,0,.5);
    --oc-speed: 260ms;
  }

  * { box-sizing: border-box; }

@media only screen and (min-width: 768px){
	:root { 
		--large-margin:140px;
		
	}
}
.blue{
	color:var(--blue);
}

.white-background{
	background:#fff;
}
img{
	max-width:100%;
	height:auto;
}
.container-fluid{
    padding-right: 15px;
    padding-left: 15px;
}
.container-wide{
	max-width:1520px;
}
.container-narrow{
	max-width:1000px;
}

@media only screen and (min-width: 768px){
	.container-fluid{
		padding-right: 30px;
		padding-left: 30px;
	}
}

p a{
	    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
}
p a:hover,
p a:focus,
p a:active{
	    color: var(--light-blue);
    font-weight: 600;
    text-decoration: none;
}
header{ 
	position: relative;
	z-index: 1;
	height:100px;
	color:#fff;
}
.menu{
	display:none;
}

.menu a{
	color:#fff;
	padding-right:40px;
	text-decoration:none;
	font-weight:600;
	font-size:1.2rem;
}
.menu a:hover,
.menu a:focus,
.menu a:active
{
	color:#ccc;
	
	
}
a {
	transition: color .2s ease-in-out, 
	            background-color .2s ease-in-out, 
	            border-color .2s ease-in-out,
				font-weight.2s ease-in-out;
}
.contact-us{
	background:var(--blue);
	padding:8px 20px;
	padding-right:20px!important;
}
.banner-section{
	height:100dvh;
	background:#eee;
}

.header-logo{
	height:40px;
	width:auto;
}



@media only screen and (min-width: 768px){
	header{ 
		height:120px;
	}
	.header-logo{
		height:60px;
		width:auto;
	}
}
@media only screen and (min-width: 1024px){
	.menu{
		display:block;
	}

}
 /* --- OFFcanvas / hamburger --------------------------------------------- */


  .menu-toggle {
	  
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;            /* 44px = comfortable tap target */
    height: 30px;
    padding: 0;
    padding-right: 40px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle:hover { background: #eef0f3; }
  .menu-toggle:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: 2px;
  }
  .menu-toggle span {
    display: block;
    width: 30px;
    height: 3px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
  }

@media only screen and (min-width: 768px){
	.menu-toggle {
		  display:none;
	}	  
}

  /* --- Off-canvas panel ----------------------------------------------- */
  .offcanvas {
    position: fixed;
    top: 0;
    right: 0;                          /* change to right:0 for a right-side menu */
    height: 100dvh;
    width: var(--oc-width);
    max-width: 85vw;
    background: var(--oc-bg);
    color: var(--oc-fg);
    transform: translateX(100%);     /* hidden off-screen; use +100% if anchored right */
    transition: transform var(--oc-speed) ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
  }
  .offcanvas.is-open { transform: translateX(0); }

  .offcanvas-head {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-bottom: 12px;
  }
  .offcanvas-head h2 { margin: 0; font-size: 1rem; font-weight: 600; }

  .offcanvas-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
  }
  .offcanvas-close:hover { background: rgba(255,255,255,.08); }
  .offcanvas-close:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: 2px;
  }

  .offcanvas nav { margin-top: 8px; }
  .offcanvas nav a {
    display: block;
    padding: 12px 10px;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.4rem;
	font-weight:500;
  }
  .offcanvas nav a:hover { background: rgba(255,255,255,.07); }
  .offcanvas nav a:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: 2px;
  }

  /* --- Overlay / backdrop --------------------------------------------- */
  .offcanvas-overlay {
    position: fixed;
    inset: 0;
    background: var(--oc-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--oc-speed) ease, visibility var(--oc-speed);
    z-index: 999;
  }
  .offcanvas-overlay.is-open { opacity: 1; visibility: visible; }

 

  /* Respect users who prefer no motion */
  @media (prefers-reduced-motion: reduce) {
    .offcanvas, .offcanvas-overlay { transition: none; }
  }

.stays-put {
  position: sticky;
  top: 0;
  height: 100dvh;        /* fills the screen while pinned */
  z-index: 0;
  overflow: hidden;     /* keeps the slight movement tidy */

}
.stays-put__inner{
	
  background: url('../img/banner-image.jpg') center / cover no-repeat;
  height: 100dvh;        /* fills the screen while pinned */
}
@media only screen and (min-width: 768px){


}
.scrolls-over {
  position: relative;
  z-index: 1;           /* sits above the pinned section */
  background: #fff;     /* MUST be opaque, or you'll see through it */

   height:100dvh;
}

.banner-content{
	color:#fff;
	height:100%;
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
	margin-bottom:35px;
	margin-left:15px;
}
.banner-content h1{
	font-size: 5rem;
	line-height: .8;
	font-weight:600;
    margin-bottom: 0;
	opacity:0.8;
    margin-top: 0;

}
@media only screen and (min-width: 768px){
	.banner-content h1{
		font-size: 9rem;
	}	
	.banner-content{
		color:#fff;
		height:100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		margin-bottom:35px;
		margin-left:30px;
	}
}
@media only screen and (min-width: 1024px){
	.banner-content h1{
		font-size: 10rem;
	}	
}
@media only screen and (min-width: 1280px){
	.banner-content h1{
		font-size: 11rem;
	}	
}
@media only screen and (min-width: 1540px){
	.banner-content h1{
		font-size: 14rem;
	}	
}



/*Intro*/
.intro-section{
	background:var(--navy);
	color:#fff;
}

.home-intro{
	margin:var(--large-margin) 0;
}
.home-intro h1{
	font-weight:400;
	font-size:3rem;
}

.home-intro p{
	max-width:600px;
	font-size:1.2rem;
	line-height:1.4;
	
}
.home-feature-1{
	height:140px;
	font-size:3rem;
	color:var(--light-blue);
	display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.about-link{
	float:right;
}
.about-link a{
	color:#fff;
	text-decoration:none;
	font-size:1.2rem;
	
}
.about-link a:hover,
.about-link a:active,
.about-link a:focus
{
	color:var(--light-blue);
	text-decoration:none;
	font-size:1.2rem;
	
}
.home-image-2{
	margin-bottom:var(--large-margin);
}
.home-feature-2{
	height:140px;
	font-size:3rem;
	color:var(--light-blue);
}
.desktop{
	display:none;
}
.mobile{
	display:block;
}
@media only screen and (min-width: 768px){
	.desktop{
		display:flex;
	}
	.mobile{
		display:none;
	}
	.home-intro h1{
		font-weight:400;
		font-size:4rem;
	}
	.home-intro p{
		max-width:600px;
		font-size:1.4rem;
		line-height:1.4;
		
	}
}
@media only screen and (min-width: 1024px){

}
@media only screen and (min-width: 1280px){

}
@media only screen and (min-width: 1540px){

}

/*Services*/

.services-section{
	background:#fff;
	color:var(--font-color);
}

.services-content{
	margin:var(--large-margin) 0;
}
.services-content h1{
	    font-weight: 500;
    letter-spacing: -2px;
    font-size: 5rem;
    margin-bottom: 0px;
	color:var(--blue);
}

.services-content p{
	max-width:600px;
	font-size:1.2rem;
	line-height:1.4;
	text-wrap: pretty;
	
	
}
@media only screen and (min-width: 768px){
	.services-content h1{
			font-weight: 500;
		letter-spacing: -2px;
		font-size: 8rem;
		margin-bottom: 0px;
		color:var(--blue);
	}

	.services-content p{
		max-width:600px;
		font-size:1.4rem;
		line-height:1.4;
		text-wrap: pretty;
		
		
	}
}
@media only screen and (min-width: 1024px){

}
@media only screen and (min-width: 1280px){

}
@media only screen and (min-width: 1540px){

}
.single-service-line{
	border-top:1px solid #000;
	margin-bottom:50px;
}
.single-service{
	margin-bottom:60px;
}
.single-service-number{
	font-size:4rem;
	font-weight:500;
	color:var(--blue);
	min-width:160px;
}
.single-service h2{
	font-size:3rem;
	font-weight:500;
	margin-bottom:0;
    margin-top: 8px;

}
.single-service p{
	font-size:1.2rem;
	line-height:1.4;
	text-wrap: pretty;
	margin-top:5px;
}
.single-service ul {
	padding-left:0px;
	list-style-type:none;
	
}
.single-service ul li{
	font-size:1.4rem;
	line-height:1.4;
	text-wrap: pretty;
	
}
.single-service ul li::before {
  font: var(--fa-font-sharp-solid);
	content: '\f178';
	font-weight: 500;
	font-size: 1rem;
  color:var(--blue);
  padding-right:10px;
}
@media only screen and (min-width: 768px){
	.single-service-number{
		font-size:6rem;
		font-weight:500;
		color:var(--blue);
		min-width:160px;
	}
	.single-service h2{
		font-size:4rem;
		font-weight:500;
		margin-bottom:0;
		margin-top: 8px;

	}
	.single-service p{
		font-size:1.4rem;
		line-height:1.4;
		text-wrap: pretty;
		margin-top:5px;
	}
}
@media only screen and (min-width: 1024px){

}
@media only screen and (min-width: 1280px){

}
@media only screen and (min-width: 1540px){

}
.parallax-image-container{
	margin:70px 15px 0;
}
.parallax-frame {
  position: relative;   /* normal flow — scrolls with the page */
  overflow: hidden;     /* clips the image as it drifts */
  height: 50vh;         /* the visible window — make it whatever you like */
}

.parallax-frame img {
  position: absolute;
 
  left: 0;
  width: 100%;
  height: 130%;         /* ...image taller than its frame so it can move */
  object-fit: cover;
}
@media only screen and (min-width: 768px){
.parallax-image-container{
	margin:var(--large-margin)30px 0;
}
.parallax-frame {
  position: relative;   /* normal flow — scrolls with the page */
  overflow: hidden;     /* clips the image as it drifts */
  height: 80vh;         /* the visible window — make it whatever you like */
}

.parallax-frame img {
  position: absolute;
 
  left: 0;
  width: 100%;
  height: 130%;         /* ...image taller than its frame so it can move */
  object-fit: cover;
}
}
@media only screen and (min-width: 1024px){

}
@media only screen and (min-width: 1280px){

}
@media only screen and (min-width: 1540px){

}


/*About*/

.about-section{
	background:#fff;
	color:var(--font-color);
}

.about-content{
	margin:var(--large-margin) 0;
}
.about-content h1{
	    font-weight: 500;
    letter-spacing: -2px;
    font-size: 5rem;
    margin-bottom: 0px;
	color:var(--blue);
}

.about-content p{
	max-width:600px;
	font-size:1.2rem;
	line-height:1.4;
	text-wrap: pretty;
	
	
}
@media only screen and (min-width: 768px){
	.about-content h1{
			font-weight: 500;
		letter-spacing: -2px;
		font-size: 8rem;
		margin-bottom: 0px;
		color:var(--blue);
	}

	.about-content p{
		max-width:600px;
		font-size:1.4rem;
		line-height:1.4;
		text-wrap: pretty;
		
		
	}
}
@media only screen and (min-width: 1024px){

}
@media only screen and (min-width: 1280px){

}
@media only screen and (min-width: 1540px){

}
.collapsible-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem 0;
    text-align: left;
    color: var(--blue);
	font-size:1.2rem;
}
.collapsible {
    --collapsible-color: #333333;
	max-width:600px;
}


.collapsible-arrow {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    s: var(--blue);
	
}

.collapsible-trigger[aria-expanded="true"] .collapsible-arrow {
    transform: rotate(180deg);
}

.collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.collapsible-trigger[aria-expanded="true"] + .collapsible-content {
    grid-template-rows: 1fr;
}

.collapsible-inner {
    overflow: hidden;
}

/*Team*/

.team-section{
	background:#f4f4f4;
	color:var(--font-color);
	padding-bottom:50px;
}

.team-content{
	margin:var(--large-margin) 0;
}
.team-content h1{
	    font-weight: 500;
    letter-spacing: -2px;
    font-size: 5rem;
    margin-bottom: 0px;
	color:var(--blue);
}

.team-content p{
	max-width:600px;
	font-size:1.2rem;
	line-height:1.4;
	text-wrap: pretty;
	
	
}
@media only screen and (min-width: 768px){
	.team-content h1{
			font-weight: 500;
		letter-spacing: -2px;
		font-size: 8rem;
		margin-bottom: 0px;
		color:var(--blue);
	}

	.team-content p{
		max-width:600px;
		font-size:1.4rem;
		line-height:1.4;
		text-wrap: pretty;
		
		
	}
}
.team-member-box{
	margin-bottom:80px;
}
.team-member-image{
	margin-bottom:20px;
}
.team-member-name h3{
	font-size:1.8rem;
	font-weight:500;
	margin-bottom:5px;
	margin-top:0;
}
.team-member-role{
	font-size:1.2rem;
	font-weight:400;
}


/*Project*/

.project-section{
	background:#eee;
	color:var(--font-color);
	padding-top:var(--large-margin);
	padding-bottom:var(--large-margin);
}

.project-content{

}
.project-content h1{
	    font-weight: 500;
    letter-spacing: -2px;
    font-size: 5rem;
    margin-bottom: 0px;
	color:var(--blue);
}
.project-header h1{
	    font-weight: 500;
    letter-spacing: -2px;
    font-size: 5rem;
    margin-bottom: 70px;
	color:var(--blue);
	margin-top:0;
}
.project-box{
	padding:15px;
	background:#fff;
	margin-bottom:var(--large-margin);
}
.project-content p{
	
	font-size:1.2rem;
	line-height:1.4;
	text-wrap: pretty;
	
	
}
.project-content h2{
	font-size:2rem;
}
.project-content table td{
	padding:5px 10px 5px 0;
	font-size:1.2rem;
}
.project-content .cell-1{
	font-weight:bold;
}


@media only screen and (min-width: 768px){
	.project-header h1{
	    font-weight: 500;
		letter-spacing: -2px;
		font-size: 8rem;
		margin-bottom: 140px;
		color:var(--blue);
	}
	.project-content h1{
			font-weight: 500;
		letter-spacing: -2px;
		font-size: 8rem;
		margin-bottom: 0px;
		color:var(--blue);
	}
	.project-box{
	padding:50px;
	background:#fff;
	margin-bottom:var(--large-margin);
}
	.project-content p,
	.project-content ul
	{
		
		font-size:1.2rem;
		line-height:1.4;
		text-wrap: pretty;
		
		
	}
	.project-content table td{
	padding:5px 10px 5px 0;
	font-size:1.2rem;
}
}
@media only screen and (min-width: 1024px){

}
@media only screen and (min-width: 1280px){

}
@media only screen and (min-width: 1540px){

}


 /* ============================================================
     GALLERY STYLES
     Tweak the variables below to fit your site.
     ============================================================ */
  .gallery {
    --gallery-width: 804px;   /* max width of the whole gallery   */
    --gutter: 15px;           /* gap between thumbs AND stage->row */
    --thumb-count: 6;         /* thumbnails per row on desktop     */
    --mobile-thumb-count: 3;  /* thumbnails shown at once on mobile*/
    --accent: #1a1a1a;        /* active-thumb ring + focus color   */
    --radius: 4px;            /* corner rounding (0 = square)      */

    width: 100%;
    max-width: var(--gallery-width);
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  /* ---- Main display: fixed 3:2 ---- */
  .gallery__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius);
    background: #efefef;
  }
  /* two stacked layers so swaps cross-fade instead of flashing */
  .gallery__stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s ease;
  }
  .gallery__stage img.is-visible { opacity: 1; }

  /* ---- Thumbnail row: 6 across, matches stage width ---- */
  .gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(var(--thumb-count), 1fr);
    gap: var(--gutter);
    margin-top: var(--gutter);   /* gap between stage and row */
  }
  .gallery__thumb {
    position: relative;
    padding: 0;
    border: 0;
    margin: 0;
    cursor: pointer;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius);
    background: #efefef;
    opacity: .55;
    transition: opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .gallery__thumb:hover { opacity: .8; }
  .gallery__thumb.is-active {
    opacity: 1;
    box-shadow: inset 0 0 0 3px var(--accent);  /* ring, no layout shift */
  }
  .gallery__thumb:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ---- Mobile: scrollable strip, 3 thumbs at a time ---- */
  @media (max-width: 600px) {
    .gallery__thumbs {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;          /* Firefox */
    }
    .gallery__thumbs::-webkit-scrollbar { display: none; }  /* WebKit */
    .gallery__thumb {
      /* fit exactly N thumbs across the width, gutters between them */
      flex: 0 0 calc(
        (100% - (var(--mobile-thumb-count) - 1) * var(--gutter))
        / var(--mobile-thumb-count)
      );
      scroll-snap-align: start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gallery__stage img,
    .gallery__thumb { transition: none; }
    .gallery__thumbs { scroll-behavior: auto; }
  }






.contact-section{
	background:#ffffff;
	color:var(--font-color);
	padding-top:var(--large-margin);
	padding-bottom:var(--large-margin);
}

.contact-content{

}
.contact-content h1{
	    font-weight: 500;
    letter-spacing: -2px;
    font-size: 5rem;
    margin-bottom: 0px;
	color:var(--blue);
	margin-top: 0;
}

.contact-content p{
	max-width:600px;
	font-size:1.2rem;
	line-height:1.4;
	text-wrap: pretty;
	
	
}



@media only screen and (min-width: 768px){
	.contact-content h1{
			font-weight: 500;
		letter-spacing: -2px;
		font-size: 8rem;
		margin-bottom: 0px;
		color:var(--blue);
	}

	.contact-content p{
		max-width:600px;
		font-size:1.4rem;
		line-height:1.4;
		text-wrap: pretty;
		
		
	}
}
@media only screen and (min-width: 1024px){

}
@media only screen and (min-width: 1280px){

}
@media only screen and (min-width: 1540px){

}





footer{
	background:var(--navy);
	padding-top:var(--large-margin);
	padding-bottom:40px;
	color:#fff;
	line-height:1.6;
}
footer h3{
	color:var(--light-blue);
}

footer a{
	text-decoration:none;
	color:#fff;
	
}
footer a:hover,
footer a:active,
footer a:focus
{
	text-decoration:none;
	color:var(--light-blue);
	
}
.footer-divider{
	border-top:var(--blue) 1px solid;
	margin-top:50px;
}