a {
  text-decoration:none;
  cursor: pointer;
}




.hero-video-el {
  pointer-events: auto;
}

.hero-video-el::-webkit-media-controls {
  transition: opacity 200ms ease;
}


/* Ensure these are the layers you’re fading */
#heroBackdrop,
#heroOverlay {
  transition: opacity 350ms ease, transform 350ms ease, visibility 0s linear 350ms;
  opacity: 1;
  visibility: visible;
}

/* Optional: give the content a subtle lift when hidden */
#heroOverlay {
  transform: translateY(0);
}

/* Hidden state */
#heroBackdrop.is-hidden,
#heroOverlay.is-hidden {
  opacity: 0;
  visibility: hidden;          /* hide after fade completes */
  pointer-events: none;        /* don’t block clicks */
  transition: opacity 350ms ease, transform 350ms ease, visibility 0s linear 350ms;
}

/* Optional: only the content moves slightly */
#heroOverlay.is-hidden {
  transform: translateY(8px);
}


/* Fadeable overlay (content layer) */
.hero-overlay {
  position: absolute;         /* sits over the video */
  inset: 0;
  z-index: 10;
height:100%;
  display: flex;              /* allows easy centering of the play icon */
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  opacity: 1;
  transition: opacity 300ms ease;
  pointer-events: auto;       /* overlay clickable when visible */
}

/* When hidden: fade out and stop capturing clicks */
.hero-overlay.is-hidden, .is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;

}


/* Keep your “right” label pinned if you want it bottom-right */
.hero-overlay .right{
 position: absolute;
  right: 0px;
  bottom: 24px;
margin-top:10vh;
  margin: 0;         /* override your existing margin */
  width: auto;
  text-align: right;


}


/* Optional: push logo + headings a bit above the play icon */
.hero-overlay img {
  margin-bottom: 16px;
}

.hero-overlay h1,
.hero-overlay h2 {
  margin: 0;
}

.hero-overlay h2 {
  margin-top: 6px;
}

/* Center the play icon and match H1 color */
.hero-play {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin-top: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Make the icon use the same color as the H1 */
.hero-play .material-symbols-outlined {
  /* font-size: 64px; */
      font-size:7.5vh;
  line-height: 1;
  color: inherit; /* inherits from the button */
min-height:125px;
           color: transparent;
    background-clip: text;
      background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
}


.hero-play .material-symbols-outlined:hover{
    transform: scale(1.25);
    transition: all 0.2s;

}


/* Ensure the button inherits h1 color (computed) */
.hero-play {
  color: var(--hero-h1-color, currentColor);
}
.hero-video {
  position: relative;
  overflow: hidden; /* keeps layers tidy */
}





.video-card{
    position:relative;
    width:100%;
    border-radius:16px;
    overflow:hidden;
    background:#000;
    cursor:pointer;
    margin: 0px 0px 16px 0px;
    background-size: cover;
  }
  .video{
    width:100%;
    height:auto;
    display:block;
    border-radius:16px;
    object-fit:cover;
  }
  .overlay{
    position:absolute;
    border:0;
    background:rgba(0,0,0,.45);
    color:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .overlay-bl{ left:12px; bottom:12px; }
  .overlay-tr{ top:12px; right:12px; padding:10px; border-radius:10px; }
  .overlay-title{
    font:600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    white-space:nowrap;
  }
  .play-btn{
    width:36px;
    height:36px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.12);
  }
  .overlay svg{ fill:currentColor; }
  .is-hidden{ display:none; }



 /* Overlay */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: var(--overlay);
      display: none;             /* hidden by default */
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 999;
      backdrop-filter: blur(2px) brightness(50%) sepia(20%);
    }
    .modal-overlay.is-open { display: flex; }

    /* Modal */
    .modal {
      width: min(960px, 100%);
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 18px 60px rgba(0,0,0,0.35);
      overflow: hidden;
      transform: translateY(6px);
      opacity: 0;
      transition: opacity 160ms ease, transform 160ms ease;
    }
    .modal-overlay.is-open .modal {
      transform: translateY(0);
      opacity: 1;
    }

    /* Header */
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 16px;
      border-bottom: 1px solid #e9e9e9;
      background-color:#fff;
    }
    .modal-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
    }
    .modal-close {
      appearance: none;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
      padding: 6px 10px;
      border-radius: 10px;
    }
    .modal-close:hover { background: #f2f2f2; }

    /* Body / iframe container */
    .modal-body {
      padding: 0;
      margin:0;
      height: min(72vh, 720px); /* responsive height */
    }

    .modal-body iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      padding: 0;
      margin:0;
    }

    
    /* Optional: reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
      .modal { transition: none; }
    }


    /* =========================
       Page Defaults
       ========================= */

:root {
      --gap: 16px;
      --width: 100%;
    }

footer{
          background: #B48A75; /* footer background colour */
          border-radius: 16px 16px 0 0;
          width:98vw;
          margin:0 auto;
          padding:48px;
          box-sizing:border-box;
                     background:linear-gradient(140deg, #000 0%, #0E071A 100%);  
          /* background:linear-gradient( 75deg, rgba(74, 64, 59, 1), rgba( 182, 190, 180 1) 100% ); */
          background-size: cover;
          background-position: top;
     text-align:center;
          color:#fff;
}

footer .col{
        color:#fff;
}

 .page, #app, html, body {
      max-width: var(--width);
      margin: 0px auto;
      padding: 0px;

    }

    hr{
        opacity:0.25;
    }


#branding-footer{
    display:none !important;
}

 .address{
        font-family: "Nunito Sans", sans-serif;
        font-size:0.8rem;
align-items: bottom;


}

.address .material-symbols-outlined{
    font-size:2rem;
    float:left;
    min-height:100px;
    display:block;
}

.legal, .legal a {

    text-align: center;
    color:#fff;
text-decoration: none;
font-size:0.75rem;
}

.legal a:hover{
    text-decoration: underline;
    color:#f2f2f2;
}



.material-symbols-outlined {
    text-align:center;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}


    body {
      margin: 0;
      font-family:  Lora, Nunito Sans,  Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;   /* Main font, custom fonts need to be loaded in html headers */
      font-size:18px;  /* Default font-size, changing this changes every other font size proportionally */
      line-height: 1.5;
      /* background: linear-gradient(135deg, #0A2F35 0%, #0E5A64 50%, #157A8C 100%);  Turquoise */
        /* background:linear-gradient(140deg, #160A26 0%, #2F124B 35%, #0E071A 100%); Purple */
         background:linear-gradient(140deg, #25051B 0%, #0E071A 100%);  
        /* background:linear-gradient(140deg, #6E6B60 0%, #878778 100%); Gold */
/* page background colour */
      color: #fff; /* Default font color, all text will be this colour unless otherwise specified */
             box-sizing:border-box;
               background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
    }

/* section:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-image: url(/img/back2.png);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}  */



    /* =========================
       Section + Background
       ========================= */

    .section {
    position: relative;
    overflow: hidden;
      margin:15vh 1vw ;

    width:98vw;
    box-sizing:border-box;
    border-radius:16px;

        background-size:cover;
background-position:center;
    }

           .section-hero {
        text-align:center;

          height:96vh;
            margin:2vh 1vw ;
        background-size:cover;
        background-position:center;
        background-attachment:scroll;
            padding: 24px; /* Sets the 'border' around each content section */
       }

          .section-header {
        text-align:center;
            min-height:100px;
            margin:2vh 1vw ;
        background-size:cover;
        background-position:center;
        background-attachment:scroll;
            padding: 24px; /* Sets the 'border' around each content section */
       }

.section-identity{
     max-width:1400px;
      margin:0 auto;
  text-align:left;
  opacity:0.5;
   
}

.section-identity span{
    font-family: "Nunito Sans", sans-serif;
    color: transparent;
    background-clip: text;
    text-transform:uppercase;
    letter-spacing:0.1rem;
    font-weight:400;
    background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
    line-height:1;
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
}

.right{
    margin:10vh 0px 24px auto;
    font-family: "Nunito Sans", sans-serif;
    color: transparent;
    background-clip: text;
    text-transform:uppercase;
    letter-spacing:0.1rem;
    font-weight:400;
    background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
    line-height:1;
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
       }



       .section-hero img{
        width:25vw;
        margin:10vh auto 5vh;
       }

       .section-hero h1 {
      font-family: "Nunito Sans", sans-serif;
        /* font-size:2.5rem; */
           font-size:5vh;
        text-transform:uppercase;
        letter-spacing:0.25rem;
          font-weight:400;
     color: transparent;
    background-clip: text;
             background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
             line-height:1;
             filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
        }

          .section-hero h2{
                 font-family: "Nunito Sans", sans-serif;
        /* font-size:1.5rem; */
            font-size:3vh;
            color: transparent;
    background-clip: text;
        text-transform:uppercase;
        letter-spacing:0.5rem;
        font-weight:400;
                 background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
                    line-height:1;
                     filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
             
        }


footer h1{
      font-family: "Lora",serif;
        font-size:2rem;
           color: transparent;
    background-clip: text;
 
        letter-spacing:0.25rem;
          font-weight:200;
          
             background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
             line-height:1;
             filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
             max-width:60%;
             margin:48px auto;
     
        }

        nav{
        z-index:999;
        } 

nav .logo{
       position:fixed;
    top:32px;
    left:32px;
    z-index:999;
    width: 200px;
}
nav .logo.is-compact {
  width: 75px;       /* compact width */
}

footer button{
     border:1px solid rgba(255,255,255,0.6);
    background:transparent;
    border-radius:8px;
    padding:12px 64px;
     transition: 0.2s;
}


nav button{
    position:fixed;
    top:32px;
    right:32px;
    z-index:999;
    border:1px solid rgba(255,255,255,0.6);
    background:#fff;
    border-radius:8px;
    padding:12px 64px;
     transition: 0.2s;
        }

nav button:hover, footer button:hover{
    transform:scale(0.95);
    transition: 0.2s;
    cursor:pointer;
    background-color:#f2f2f2;
}
footer button:hover{
     background:linear-gradient(140deg, #25051B 0%, #0E071A 100%);  
}

nav button span, footer button span    {
    display:block;

    color: transparent;
    background-clip: text;
    text-transform: uppercase;
    font-size:1rem;
    font-weight: 600;
    letter-spacing: 0.25rem;
     /* font-family: "Roboto", sans-serif; */
    }

.red{
        background-image: linear-gradient(blue, red);
}

.gold{
            background-image: linear-gradient(red, gold);
    }

    .grad{
       background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
    }

    .section-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .section-bg img,
    .section-bg video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .section-bg.colour,
    .section-bg.gradient {
      background-size: cover;
      background-position: center;
    }

    .section-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: rgba(0,0,0,0.4);
z-index:1;
    }

    .section-blur {
      position: absolute;
      inset: 0;
      backdrop-filter: blur(var(--blur-amount));
      -webkit-backdrop-filter: blur(var(--blur-amount));
    }

    .section-hero .section-content{
         padding:0px;
    }

    .section-content {
      position: relative;
    
      box-sizing: border-box;
      z-index: 10;
      max-width:1400px;
      margin:0 auto;
      /* padding:48px; */
    
    }


    p {
        max-width:90%;
    }

    .fullrow p{
        max-width:100%;
    }

    h3{
        font-family:"Lora", serif;
        font-weight:600;
        font-size:2.25rem;
        line-height:1;
     
        letter-spacing:0.15rem;
          color: transparent;
    background-clip: text;
             background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
             line-height:1;
                      margin:16px 0px 16px 0px;
    }


    .info p{
      font-size:1.25rem;
    }

em{
  font-family: 'Nunito Sans', sans-serif;
  font-style: italic;
}

h3 em{
   color: transparent;
    background-clip: text;
         background-image: linear-gradient(blue, red);
          font-family:"Lora", serif;
           font-style: italic;
           image-rendering: crisp-edges;
  
}
footer h3{
  font-size:1.25rem;
         font-style: italic; 
           line-height:150%;
}

        h4{

        font-family:"Lora", serif;
        font-weight:600;
        font-size:1.2rem;


        letter-spacing:0.15rem;
          color: transparent;
    background-clip: text;
             background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
      
    }

.client{
  height:60px;
  margin:0 16px 16px 0;
}


    /* =========================
       Layout
       ========================= */

    .row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--gap);
     text-align:left;
padding:48px 0px;
margin:0 auto 24px auto;
    }



        .rowWrap {
      display: grid;
      flex-wrap: wrap;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--gap);
      margin-bottom: 24px;
    }

            .clients {
      display: grid;
      flex-wrap: wrap;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      margin-bottom: 24px;
    }

    .col{
      min-width: 0;
    padding: 0px 48px 48px 48px ; 
    border-radius:16px;
    font-weight:400;
    /* border: 1px solid rgba(70,41,32,0.15); */
  color:#fff;
    /* display:flex; */
align-items: start;
}

  .fullrow{
text-align:center;
padding:48px 0px;
max-width:800px;
margin:0 auto 48px auto;
box-sizing:border-box;
}



.img-col {
      min-width: 0;
    padding: 0px ; 
    display:flex;

}

.img-col img{
    max-width:100%;
     border-radius:16px;
     max-height:600px;
}

    @media (max-width: 768px) {
      .row {
        grid-template-columns: 1fr;
      }
      .col {
        grid-column: auto !important;
      }
    }

    /* =========================
       Content styles
       ========================= */

    .h1 { font-size: 2.25rem; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.35rem;}
h2 { font-family: "Nunito Sans", sans-serif;
        font-size:1rem;
      
        text-transform:uppercase;
        letter-spacing:0.25rem;
          font-weight:400;
     color: transparent;
    background-clip: text;
             background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
       line-height:1;
        }
        
    .h3 { font-size: 1.5rem; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.35rem;}
    .p  { font-size: 1rem; margin: 0 0 12px; }

    img.responsive,
    video.responsive {
      max-width: 100%;
      border-radius: 12px;
      display: block;
    }

    /* =========================
       Social media
       ========================= */
    .social-media {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: flex-end;
      padding: 10px 0 18px;
    }
    .social-media a {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      text-decoration: none;
      border: 1px solid rgba(0,0,0,0.10);
      background: rgba(255,255,255,0.9);
      transition: transform 120ms ease;
    }
    .social-media a:hover { transform: translateY(-1px); }
    .social-media a:focus { outline: 2px solid rgba(0,0,0,0.45); outline-offset: 2px; }

    .social-media svg { width: 18px; height: 18px; display: block; };
    


    /* =========================
       Type classes
       ========================= */



    .hero .h1 { font-size: 2.6rem; }
    .card {
      background: rgba(255,255,255,0.9);
      border-radius: 14px;
      padding: 18px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }

    .intro{
        text-align:center;
        color:#fff;
    }

    .intro img{
        width:20%;
        margin:5% 40%; 
    }

    .info{
                font-family: "Nunito Sans", sans-serif;
color:#fff; 
background-size:cover; 
background-position: center;
border:0px;
font-weight:600;
  position: relative;
  padding:48px;
    }

    .info::before {
  content: "";
  position: absolute;
  width:100%;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0)
  );
  border-radius:16px;
  pointer-events: none; /* allows clicks through overlay */
}

.info > * {
  position: relative;
  z-index: 99;
}

    .info:hover{
  transform: scale(0.95);
  transition:0.2s;
}

    .info h3{
        font-family: "Nunito Sans", sans-serif;

        font-weight:400;
        text-transform: uppercase;
        margin:0px 0px 8px 0px;
letter-spacing: 0.25rem;

           color: transparent;
    background-clip: text;
      
             background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
 
           
    }


.support{
position:relative;
padding:0px;
    transition: 0.2s;
    background-color:#fff;
}


.support img{
    width:100%;
    height:auto;
    display:block;
    border-radius:16px;
    object-fit:cover;
}

.support span{
    position: absolute;
    font-family: "Nunito Sans", sans-serif;
  inset: auto auto 8px 8px; /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.5);
  z-index:99;
padding:8px 16px ;
border-radius: 8px;
}

.support a{
     position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

.support:hover{
        transform:scale(0.95);
    transition: 0.2s;
    cursor:pointer;
}

.statement{
   
    border-radius:16px;
    text-align:center;
    padding: 64px 48px;
  background:linear-gradient( 75deg, rgba(0,0,0, 0.4), rgba(0,0,0, 0.6) 100% ),  url(/img/footer.jpg);
 background-position: center;
    background-size:cover;
}

.statement h1{
       font-weight:200;
                   color: transparent;
    background-clip: text;
      background-image: linear-gradient(90deg,#fff7ad, #ffa9f9);
        letter-spacing:0.25rem;
             line-height:1;

             max-width:60%;
             margin:0 auto;
}

.social{
    border-top:1px solid rgba(255,255,255,0.25);
    margin:16px auto 16px auto;
    padding:16px 0px;
    width:300px;
}


.socialIcon{
    width:32;
    height:32px;
}

.socialIcon:hover{
    transform: scale(0.95);
    transition: all 0.2s;
    color:#f2f2f2;
}

.disco-embed{
    width:90%;
max-width:600px;
    height:235px;
    margin:32px 5%;
    opacity: 0.8;
    border-radius:8px;
}

@media screen and (max-width: 768px) {


    body{
        font-size: 12px;
    }

.section{      
  margin:0vh 1vw ;
  padding:24px;
  box-sizing: border-box;
}

.row{
    grid-template-columns: 1fr !important;
}
    
nav .logo {
    display:none;
} 

nav button{
     top:32px;
    right:32px;
    left:32px;
    padding: 12px 32px
}

   p {
        max-width:100%;
        font-size:1.2rem;
    }
.statement h3, .statement h1{
    font-size:1.25rem;
    max-width:100%;
    line-height:1.25rem;
}

h3{
  font-size:1.8rem;
  line-height: 125%;
}

.section-hero img{
margin: 10vh auto 5vh;
 display: block;
  max-width:50vw;
  max-height:40vh;
  width: auto;
  height: auto;
}


.hero-overlay .right {
    right: 0;
    left: 0;
    bottom: 24px;
    text-align: center;
    width: 100%;
  }

.modal{
width: 100vw;

}
.section-identity{
  width:96vw;
padding:0px 24px;
box-sizing:border-box;
      margin:0 auto;
   
}



.col {
  padding:0px 24px 48px 24px;
}



.support{
      padding: 0px; 
}
.info{
    padding:48px;
}

.disco-embed{
  width:100%;
  margin:16px 0px;
}

.img-col {
     text-align:center;
align-items: center;
justify-items: center;
}

.img-col img{
    max-width:80%;
     border-radius:16px;
     max-height:80vh;
     margin:0 auto;
}  

.client{
width:60%;
margin:0 20%;
}

          .clients {
      grid-template-columns: repeat(2, 1fr);

    }

}