[data-accordion] { 
  overflow-anchor: none; 
}

[data-accordion-item] {
  border-bottom: 1px solid #d3d3d3;
  transition: border-color 0.3s ease;
}

[data-accordion-item]:hover,
[data-accordion-item][data-open="true"] {
  border-bottom-color: #000000;
}

[data-accordion-button] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: 30px 0;
  gap: 12px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  font-weight: 700;
  font-size: 24px;
  transition: color 0.3s ease;
}

/* Icon (plus → cross) */
[data-accordion-icon] {
  color: #1d1d1d;
  transition:
    transform 0.26s cubic-bezier(.2,.7,.2,1),
    color 0.3s ease;
}

/* Hover + Active state for the icon (blue) */
[data-accordion-button]:hover [data-accordion-icon],
[data-accordion-item][data-open="true"] [data-accordion-icon] {
  color: #57C7C1;
}

/* Rotate the cross when active */
[data-accordion-item][data-open="true"] [data-accordion-icon] {
  transform: rotate(135deg);
}

/* Animated content container */
[data-accordion-panel] {
  height: 0;
	overflow: hidden;}





.company{
      display:grid;
      grid-template-columns: 56px 1fr;
      gap:16px;
      padding-block: 9px 4px;
      margin-bottom: 10px;
    }

.job {padding: 0 0 0 68px;}

.lo {width:56px; height:56px; border-radius:12px;display:grid; place-items:center; overflow: hidden; font-weight:700; font-size:28px;}

.company-name{font-size: 26px;font-weight: 900;line-height: 30px;margin-bottom: 340px;letter-spacing: -1px;}
.role{margin:18px 0 8px}
.years{font-size:14px;color:#1d1d1d;margin: 4px 0 18px 0;}
.pointed{margin: 0 0 0 0;padding-left: 1.8rem;}
.pointed li{margin:4px 0 6px}

/* Details/summary — “Full description” */
details{display:flex;flex-direction:column-reverse; /* flips order so summary is below .desc */border-radius:12px;margin: 0px 0 40px 0;}
    summary{
      list-style:none; display:inline-flex; align-items:center; gap:10px;
      cursor:pointer; user-select:none; color:var(--text); font-weight:500; padding:6px 0;
    }
    summary::-webkit-details-marker{ display:none }

    .plus{
      width: 18px;
      height: 18px;
      border: 1.5px solid #1d1d1d;
      border-radius: 100px;
      display:grid;
      place-items:center;
      position:relative;
      flex: 0 0 18px;
    }
    .plus::before,.plus::after{content:"";position:absolute;background: #1d1d1d;}
    .plus::before{width: 8px;height: 1.5px;}
    .plus::after{width: 1.5px;height: 8px;transition:transform .2s ease}
    details[open] .plus::after{ transform:scaleY(0) }

    .desc{
      overflow:hidden;
      height:0;
      color:var(--muted);
      transition:height .28s ease;
      order:1; /* ensures .desc is rendered above summary */
    }

    @media (prefers-reduced-motion: reduce){
      .desc{ transition:none }
    }

    .job + .job{margin-top:36px}


::marker {
    color: #57c7c1;
}


/* ---------- Case study ---------- */
.cs-hero{display:grid;gap:10px;padding: 30px 0 24px;}
.cs-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted)}
.cs-body{display:grid;grid-template-columns:2fr 1fr;gap: 8%;padding-top: 0;}
.cs-body .panel{padding: 0; border: none; box-shadow: none;}
.figure{border-radius:20px;overflow:hidden;background:#0f0f12}
.figure img{width:100%;height:auto;display:block;transition: transform .6s var(--ease)}



.project-img.cover {
 aspect-ratio: 3/2; object-fit: cover;  aspect-ratio: 3/2;  object-fit: cover;}

.grid-halves {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid}


.project-img-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex; border-radius: 12px;
    overflow: hidden;}


/* ---------- Background ---------- */

.button {
      cursor: pointer;
      background: #1d1d1d;
      border: none;
      padding: 2rem 3rem;
      font-family: inherit;
      font-size: inherit;
      position: relative;
      display: inline-block;
      overflow: hidden;
      min-width: 250px;
      border-radius: 100px;
      color: #fff;
    }

    .button span {
      position: relative;
      z-index: 2;
      color: #fff;font-weight: 900;
      transition: color 0.3s ease;
    }

    .button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      height: 100%;
      width: 100%;
      background-color: #57C7C1;
      z-index: 1;
      transform: translateX(-100%);
      transition: transform 0.4s ease;
    }

    .button:hover::before {
      transform: translateX(100%);
    }

    


/* Set span text to white on hover */
    .button:hover span {
      color: #1d1d1d;
    }





/* ---------- Background ---------- */
.colouring {
    background-image: linear-gradient(180deg, #1e1d1d 50%, white 50%);
    padding-top: 2%;
    color: #FFFFFF;}

.sep {border-top: 1px solid #dedede;margin: 2em 0 3em 0;display: block}

.intros {
    background: #1d1d1d;
    padding: 5em 0;
    margin-bottom: 1%;
    color: #FFFFFF;
    }


.Home {background:  #1e1d1d; padding-top: 3%; color: #FFFFFF; padding-bottom: 5em}

.break {background:  #1e1d1d; padding-top: 3%; color: #FFFFFF; padding-bottom: 5em}




/* ---------- Header / Nav ---------- */
.top-banner {margin-top:3.5em;  height: 50px;  overflow: hidden; display: flex; align-items: center; width: 100%}

.scrolling-logos {display: flex; white-space: nowrap;animation: scrollLeft 40s linear infinite;}

.scrolling-logos img {
height: 70px; margin: 0 40px; filter: brightness(0) invert(1); /* white logos on black */ transition: transform 0.3s ease;}



    @keyframes scrollLeft {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background: #1e1d1d;border-bottom:1px solid rgba(0,0,0,.08);height: 80px;border-top: #02bfbf 6px solid;}

header.site-header {}
  .site-header .header-inner{max-width: 1440px;margin:0 auto;padding: 6px 0;display:flex;align-items:center;gap:16px;}
  .site-header .brand{ display:inline-flex; align-items:center; gap: 2%; text-decoration:none; color:#02bfbf; font-weight:700;  margin: 0 auto 0 0; }
  .site-header .brand img{ display:block; height:28px; width:auto; }



.menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Animated underline */
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px; /* space between text and underline */
  height: 1.5px; /* underline thickness */
  background: #02bfbf;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(.22, .61, .36, 1);
}

/* Hover effect */
.menu a:hover {
  color: #02bfbf;
}

.menu a:hover::after {
  transform: scaleX(1);
}


.menu a.selected,
.menu a.active {
  color: #02bfbf;
}

.menu a.selected::after,
.menu a.active::after {
  transform: scaleX(1);
}


.overlay {
    display: none;
}

.thumb {
    aspect-ratio: 14 / 10;;
    position: relative;
	overflow: hidden; align-content: center; border-radius: 16px}


.jpg-centre {
  display: flex;
  align-items: center;       /* vertical center */
  justify-content: center;   /* remove if you don't want horizontal centering */
  }



/* ===== Added: Hover interactions (keep original rollover styles) ===== */
.module .thumb img {
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.module:hover .thumb img {
  transform: scale(1.06);
}



/* ===== Sync all animations on any hover within the module (image or text) ===== */
.module { position: relative; } /* ensure abs-pos children use this as reference */

.module:hover .thumb img,
.module .thumb:hover img,
.module:hover .title,
.module:hover .description {
  /* unified trigger scope */
}

.module .thumb img{
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.module:hover .thumb img{ transform: scale(1.06); }


.module:hover .upward-arrow{ transform: translateY(-10px); }

/* === Unified hover trigger on .module === */
.module{ position: relative; }

/* Make the title swipe happen when the module is hovered */
.module:hover .hvr-sweep-to-right:before{
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}



/* Ensure image zoom and arrow lift are driven by .module:hover */
.module .thumb img{
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.module:hover .thumb img{ transform: scale(1.06); }

.upward-arrow{
  position:absolute;
  right:1px;
  bottom:11px;
  width:50px;height:50px;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  z-index:1;
  transform: translateY(0);
}


/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;padding:10px 0;
  vertical-align: middle; text-decoration:none !important; font-weight:700;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: #FFFFFF;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


.role-date{
font-weight: 900; letter-spacing: -0.2px; color: #1d1d1d;
}

.float {
	position: fixed;top: 50%;right: 0;
	background: #DDDDDD;
	width: 66px;
	height: 6px;
	z-index: 9999;
	cursor: pointer;
	transition: all 200ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.float:hover, .next-project:hover #next-float {
	width: 68px;
	right: 30px; background-color:#57C7C1;
}
.float span.t {
	position: absolute;
	top: 2px;	right: -3px;
	background: #DDDDDD;
	width: 30px;	height: 6px;
	z-index: 999;	transform-origin: right center;
	transform: rotate(0deg);	opacity: 0;
}
.float:hover span.t, .next-project:hover #next-float span.t {
	animation-duration: 500ms;
	animation-name: t-next;
	animation-fill-mode: forwards; background-color:#57C7C1;
	transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
@keyframes t-next {
	40% { opacity: 0; }
	100% { opacity: 1; transform: rotate(45deg); }
}
.float span.b {
	position: absolute;
	top: -2px;
	right: -3px;
	background: #DDDDDD;
	width: 30px;
	height: 6px;
	z-index: 999;
	transform-origin: right center;
	transform: rotate(-0deg);
	opacity: 0;
}
.float:hover span.b, .next-project:hover #next-float span.b {
	animation-duration: 500ms;
	animation-name: b-next;
	animation-fill-mode: forwards; background-color:#57C7C1;
	transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
@keyframes b-next {
	40% { opacity: 0; }
	100% { opacity: 1; transform: rotate(-45deg); }
}



.col-l {
	padding-right: 55%;
	position: relative;
	margin-bottom: 30px;
}

.col-r {
	padding-left: 55%;
	margin-bottom: 30px;
	position: relative;
}
.col-r .row span {
	display: inline-block;
	vertical-align: top;
}
.col-r .row span.balls {
	width: 35%;
	opacity: 0.7;
}
.col-r .row span.value {
	width: 65%;
	font-weight: 700;
	color: #333;
}


#next-float {
	position: absolute;
	top:15px;
}
.next-project {
	display: block;
	padding-right: 30%;
	font-size: 1.35em;
	letter-spacing: -.5px;
	line-height: 1.5;
	font-weight: 900;
	text-align: center;
}



.balls {
    display: inline;
    padding:.8em 3em 0 0;
    font-size: 90%;
    font-weight: 300;
    line-height: 1;
    color: #A7A7A7;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}


.appleLinks a {color:#000000 !important;}

#myFooter  {line-height: 1.5;border-bottom:8px #57C7C1 solid;padding-top:50px;background: #1d1d1d;color: white;}
#myFooter ul { list-style-type: none; padding: 0 0 15px 0; line-height: 1.2;font-size: 17px;font-weight: 600; margin:0; letter-spacing:-1px}
.footer-copyright {text-align: right; padding: 30px 0 10px 0; font-size: 10px;}
#myFooter h4 {font-size: 15px;font-weight: 200;  color: #A7A7A7; margin:0 0 5px 0} 


body {
  animation: pagecrossfade 3s; -webkit-transition-timing-function: ease-in-out;  transition-timing-function: ease-in-out; }

@keyframe pagecrossfade {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes pagecrossfade {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }




.module {
  width: 48%;
  padding-left:0;
  padding-right:0;
  position: relative;
  float: left;
  margin-right: 0%;
  margin-bottom: 4%;
  opacity:1
  }


.module:nth-child(even) {
  margin-right: 4%;
  }



.module a {
	color: #1d1d1d;
	font-weight: 900; cursor:pointer;
	text-decoration: none;
}
.module a:hover {
	color: #57C7C1;
}
.module a.disabled {
	pointer-events: none;
	cursor: pointer;
}




#title {
	font-weight: 700;
	letter-spacing: -1px;
	z-index: 99;
}
#title .s {
	color: #333;
	font-size: 2.6em;
	position: relative;
	animation-duration: 1000ms;
	animation-name: red-text;
	animation-fill-mode: forwards;
	transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
@keyframes red-text {
	100% { color: #57C7C1; }
}
#title .w {
	color: #57C7C1;
	font-size: 2.6em;
	position: relative;
	animation-duration: 1000ms;
	animation-name: black-text;
	animation-fill-mode: forwards;
	transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}



@keyframes red-flash {
	0% { transform: scale3d(0, 1, 1); transform-origin: left center; }
	50% { transform-origin: left center; }
	51% { transform: scale3d(1, 1, 1); transform-origin: right center; }
	100% { transform: scale3d(0, 1, 1); transform-origin: right center; }
}



.module a:hover span.f {
width: 100%; height: 100%; background-color: #57C7C1; position: absolute;
	animation-duration: 800ms;	animation-name: red-flash; animation-fill-mode: forwards;}

.module span.title 
{
    display: block;
    font-size: 32px;
    letter-spacing: -1px;
    text-align: left;
    margin-top: 12px;
    line-height: 30px;
    margin-top: 5%;
}

.module span.title-mask {
	position: relative;
	overflow: hidden;
}
.module span.description 
{display: block; color: #3d3d3d; text-align: left;margin-top: 10px; margin-bottom: 10px;line-height: 1.3; font-weight: 200 !important;}





.come-in {
  transform: translateY(180px);
  animation: come-in 0.6s ease forwards; opacity:1}

.come-in:nth-child(odd) {
  animation-duration: 0.3s; }

.already-visible {
  transform: translateY(0);
  animation: come-in 0.6s ease;
}

@keyframes come-in {
  to {
    transform: translateY(0);
  }
}



.carousel-home__btn {
    z-index: 1; cursor:pointer;
    margin: 35px 0 0 0;
    width: 44px;
    height: 44px;
    border: 2px solid #000000;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
    background: url(../images/icon_arrow.svg) no-repeat;
    background-size: 60%;
    background-position: 50%;
}





.page-title
{overflow: hidden;  padding: 5% 0;background-size: 100% ;
	background-position: top center; text-align:center; background-repeat:no-repeat; }



.zoom{
	overflow: hidden;
   padding-bottom: 33rem;
	background-size: 100%;
	background-position: top center; margin-bottom:2vw
}


.title-zoom{
	position: absolute;
	top: 10%;
	width: 100%;}


.Logo{transition: .3s ease-out;/* background-image:url(../images/AO_logo-W.png); */background-size:100%;width: 12vw;width: 180px;height: 48px;background-repeat: no-repeat;}

.Logo.active {background-image:url(../images/AO_logo.png); transition: .3s ease-out !important;}



 .mobileSwiper { width: 100%; height:auto; display:block; overflow:hidden; margin:0 auto; position:relative}


.btn
{display: inline-block; padding: 6px 12px; text-align:center; white-space: nowrap; vertical-align: middle; background-color:#fc6467; color:#FFFFFF; text-decoration:none; margin-top:20px; transition:all .5s; border-radius:0}
.btn:hover
{background-color:#000000;color:#FFFFFF}

.prop-list
{padding:5px 15px 25px 15px;}

.prop-price
{ display:block; font-size:20px; margin: 10px 0;border-top: 1px solid #CCC; border-bottom: 1px solid #CCC;padding: 3px 0 6px 0; color:#fc6467}

.copy-block
{padding:5% 0}

.work_ex
{font-weight: 200;  color: #3d3d3d; letter-spacing: -.1px}



@media (max-width:1200px){
.mobileSwiper
{margin:100px auto 0 auto}
	
	
	.upward-arrow {
    position: absolute;
    right: 1px;
		bottom: 55px;}
	
.zoom
{overflow: hidden;  padding-bottom: 40%;}
	
.module {width: 50%; margin-right:0}

.pl
{margin-right:0%}

.footer-copyright {text-align: center; font-size: 10px;}
#myFooter {text-align:center}


}


@media (max-width:767px){

.figure {
	border-radius: 12px;}
	
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 10000;
    transition: all 0.8s;
    height: auto;    
    text-align: center;
    height: 65px;
}

.header.active {
	 transition: all 0.8s 
  /*  background: #fff;
    -webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.10);
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.10); */
}


.button_container {
  position: fixed;
  top: 35px;
  right: 4%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100000;
  -webkit-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF; 
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: #FFFFFF;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0; }
	}
	
	
	
	
	
	.upward-arrow{
  position:absolute;
  right:1px;
  bottom: 12%;
  }
	
	
.module span.title {
    font-size: 23px;}

.module span.description {
    margin-top: 5px;}

.col-r { padding-left: 0%;}
.col-r .row span.label {
    width: 30%;
    opacity: 1;
}



#myFooter 
{text-align: center}
#myFooter h4 {font-size: 10px;letter-spacing: 0px;}
#myFooter ul {font-size: 12px; letter-spacing:0} 
.footer-copyright { padding: 5px 0 8px 0;font-size: 8px; letter-spacing: -.01px}


.zoom{
   padding-bottom: 45%; background-repeat:no-repeat; margin-bottom:10px
	}



.button_container {width: 28px; top:28px}
.button_container.active .bottom {top:22px}

.button_container span:nth-of-type(2) {top: 9px;}
.button_container span:nth-of-type(3) {top: 18px;}

.title {top: 20%;}


	
.overlay {
	display:block;
  position: fixed; z-index:10000;
  background: #57C7C1;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: .95;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
          animation-delay: .50s;
}

.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .55s;
          animation-delay: .55s;
}

.overlay.open li:nth-of-type(6) {
  -webkit-animation-delay: .60s;
          animation-delay: .60s;
}


.overlay nav {
  position: relative;
  height: 40%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 50px; letter-spacing:-2px;
  font-family: Hauora-Light, Helvetica Neue, Arial, sans-serif;
  font-weight: 700;
  text-align: center; background-color: rgba(255,255,255,0);  bkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);  -moz-box-shadow: 0px 4px 5px -2px rgba(0,0,0,0); box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
.overlay ul {
  list-style: none;
  padding: 0;
  display: inline-block;
  position: relative;
  height: 100%;  margin: 0; float: none;
}
.overlay ul li {
  display: block;
  height: 30%;
    height: calc(60% / 5);
    min-height: 100px; margin:0;
  position: relative;
  opacity: 0;padding: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  -webkit-transition: .35s;
  transition: .35s;
}

.menu a {display: none}
	
	

.Logo
{opacity:1;margin: 9px auto 0 4%;width: 142px;/* min-width: 34px; */height: 50px;background-image:url(../images/AO_logo-mob.png)}

.module {
  width: 100%; padding:0 5%; margin-right:0}

.mobileSwiper
{margin:60px auto 0 auto}


 .selected  a
 {color:#FFFFFF !important; border-bottom: solid 3px #FFFFFF}

.copy-block
{padding:50px 0}

.btn
{display:block}

.page-title {padding:20% 0 15% 0; margin: 40px 0 0 0;}

.work_ex
{font-size: 13px; }


#next-float { top: 15px;}

.balls {padding: .8em 3em 0 4%;}

.carousel-home__btn {
    margin: 15px 0 0 0;
    width: 34px;
    height: 34px;
    border: 1.4px solid #000000;}

    .next-project {
        padding-right: 54%;
        text-align: center;
    }
	
	.nav{display:none}
	
	
	.intros {
        padding: 120px 0 60px 0;}
	
	.grid-halves {grid-template-columns: 1fr; grid-row-gap: 48px;}	
	
	
	.cs-body {
    display: grid; grid-template-columns: 1fr; gap: 0%;}
	
	.scrolling-logos img {
    height: 50px;
		margin: 0 20px;}
	
	.colouring {padding-top: 60px;}
	
	.sep {margin: 1em 0 0.3em 0;}
	
.Home {padding-top: 110px;padding-bottom: 30px;}

	
	.top-banner {margin-top: 2em;}

    .break {
        padding-top: 20px;
        padding-bottom: 30px;
    }	
.colouring {
	background-image: linear-gradient(180deg, #1e1d1d 40%, white 40%)}	
	
	.company {grid-template-columns: 38px 1fr;margin-bottom: 10px;}
	.job {padding: 0 46px;}
	
	.lo {width: 33px;height: 38px;font-size:24px;border-radius: 8px;}
      .company-name{font-size: 24px;margin-bottom: 14px;}
	
	
	[data-accordion-button] {
		padding: 24px 0; font-size: 20px;}
	
}