:root {


  
  /* Brand Colors */

  --color-primary: rgb(215, 31, 39);
  --color-secondary: rgb(181, 158, 57);
  --color-tertiary: rgb(255, 255, 255); 


  /* Font Colors */
 
  --primary-font-color: rgb(215, 31, 39);
  --secondary-font-color: rgb(181, 158, 57);
  --tertiary-font-color:rgb(255, 255, 255); 


  /* Background Colors */

    --primary-bg-color: linear-gradient(161deg,rgba(97, 3, 4, 1) 1%, rgba(215, 31, 39, 1) 59%, rgba(122, 0, 6, 1) 92%);
    --secondary-bg-color: linear-gradient(152deg,rgba(181, 158, 57, 1) 18%, rgba(84, 69, 0, 1) 87%);
    --tertiary-bg-color: rgb(255, 255, 255); 
   
   
   
  /* CTA Font Colors */

  --cta-primary-font-color: rgb(215, 31, 39);
  --cta-secondary-font-color: rgb(181, 158, 57);
  --cta-tertiary-font-color:rgb(255, 255, 255); 

  /* CTA Backgrounds */

    --cta-primary-bg-color: linear-gradient(161deg,rgba(97, 3, 4, 1) 1%, rgba(215, 31, 39, 1) 59%, rgba(122, 0, 6, 1) 92%);  
    --cta-secondary-bg-color: rgb(255, 255, 255);
    --cta-tertiary-bg-color: linear-gradient(152deg,rgba(181, 158, 57, 1) 18%, rgba(84, 69, 0, 1) 87%);

  /* Border Colors */

    --border-primary-color: rgb(215, 31, 39);    
    --border-secondary-color:  rgb(181, 158, 57);
    --border-tertiary-color: rgb(255, 255, 255); 

    
    
    
 /* Font Sizes */

    --font-size-small: 0.875rem;  /* 14px */
    --font-size-medium: 1rem;     /* 16px */
    --font-size-large: 1.25rem;   /* 20px */
    --font-size-xlarge: 1.5rem;   /* 24px */
    --font-size-xxlarge: 2rem;    /* 32px */
    --font-size-special: 3rem;    /* 48px */
    

/* CTA padding */

 --cta-padding-y: 14px;
 --cta-padding-x: 28px;






  /* Fonts with Fallbacks */
  --font-heading: "Oswald", Georgia, "Times New Roman", serif;
  --font-body:"Finlandica", Arial, Helvetica, sans-serif;
  --font-cta:  "Roboto Condensed", Arial, Helvetica, sans-serif;


/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
   
}

::-webkit-scrollbar-track {
    background: var(--color-tertiary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-tertiary);
    width: 8px;
    
}

  



}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
  }




/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



a {
  text-decoration: none;
  color: inherit;
}



/* NAVBAR */
.nav {
  position: sticky;
  top: 0;
  background: var(--tertiary-bg-color);
  z-index: 1000;
  
}

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rem 1rem 0rem 3rem;
  border-bottom: 0.5px solid rgba(85, 50, 50, 0.2);
}


.nav__logo img{
    height: auto;
    width: 200px;

}



/* DESKTOP MENU */
.nav__menu {

  display: flex;
  gap: 1rem;
}

.nav__link {
  font-family: var(--font-heading);
  font-size: var(--font-size-large);
  
  color: rgb(0,0,10);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 6px 10px;
}

.nav__link:hover {
  
  background: none;
  color: var(--primary-font-color);
  transform: scale(1.1);
}

/* CTA */
.nav__cta {
  font-family: var(--font-heading);
  font-size: var(--font-size-medium);
  font-weight: 800;
  padding: var(--cta-padding-y) var(--cta-padding-x);
  background: var(--primary-bg-color);
  color: var(--cta-tertiary-font-color);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  border-radius: 3px;
}

.nav__cta:hover {
  background: var(--primary-bg-color);
  scale: 1.04;

  color: var(--cta-tertiary-font-color);
  
}


.nav__cta img{

    height: auto;
    width: 35px;
  
}



/* DROPDOWN */
.nav__dropdown {
  position: relative;
  
}

.nav__icon img{
  height:auto;
  width: 16px;

}



.dropdown {
  
  position: absolute;
  top: calc(100% + 10px);
  left: -50px;
  background: var(--tertiary-bg-color);
  border: 1px solid rgba(238, 39, 39, 0.2);
  display: none;
  grid-template-columns:  repeat(3, 1fr);
  
  white-space: nowrap;
  padding: 1rem 1rem;
  border-radius: 2px;
  min-width: 350px;
}

.nav__dropdown.active .dropdown {
  display: grid;
}



.dropdown a {
  
  font-size: var(--font-size-medium);
  font-family: var(--font-heading);
  color: rgb(0,0,10);
  border-right : 1px solid rgba(238, 39, 39, 0.2);
  border-bottom: 1px solid rgba(238, 39, 39, 0.2);
  padding: 15px;
  transition: background 0.2s;
  
}

.dropdown a:hover {
  
  
  
  color: var(--primary-font-color);
}



/*=============================
    HAMBURGER BUTTON
=============================*/

.nav__hamburger{
    display:none;
    align-items:center;
    justify-content:center;

    width:3rem;
    height:3rem;

    padding-left: 13px;

    border:none;
    background:transparent;

    cursor:pointer;

    transition:transform .3s ease;
}

.nav__hamburger:hover{
    transform:scale(1.05);
}

.nav__hamburger:focus-visible{
    outline:3px solid var(--primary);
    outline-offset:4px;
}

.nav__hamburger-icon{
    width:1.8rem;
    height:1.8rem;

    display:block;
}

/* MOBILE PANEL */
.mobile {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,0.0);
  z-index: 99999;
  
}

.mobile.active {
  display: block;
}



.mobile__panel {
  position: fixed;
  top: 0;   
  
  width: 100%;
  height: 100%;
  background: var(--tertiary-bg-color);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;

  text-align: center;
 
}



.mobile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -10px 0 0 0;
  padding: 15px 15px;
  background: var(--tertiary-bg-color);
  border-bottom: 1px solid #eee;
}





/*=============================
    CLOSE BUTTON
=============================*/

.mobile__close{
    display:flex;
    align-items:center;
    justify-content:center;

    width:3rem;
    height:3rem;

    padding: 50px 0px;

    border:none;
    background:transparent;

    cursor:pointer;

    transition:transform .3s ease;
}

.mobile__close:hover{
    transform:rotate(90deg);
}

.mobile__close:focus-visible{
    outline:3px solid var(--primary);
    outline-offset:4px;
}

.mobile__close-icon{
    width:1.7rem;
    height:1.7rem;

    display:block;
}





.mobile__body {
  flex: 1;
  overflow-y: auto;
 

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 130px 20px 20px;
  gap: 1.2rem;
}



.mobile__link {
  font-size: var(--font-size-large);
  font-family: var(--font-heading);
  color: rgb(0,0,10);
  border-bottom: 1px solid rgba(238, 39, 39, 0.6);
  padding: 6px 10px;

}

.mobile__link:hover {
   font-size: var(--font-size-xlarge);


}

/* MOBILE DROPDOWN */
.mobile__submenu {
    font-family: var(--font-heading);
    color: rgb(0,0,10);
  display: none;
  
  border-bottom: 1px solid rgba(238, 39, 39, 0.6);
  
  padding: 6px 10px;
  
}

.mobile__submenu:hover {
    font-family: var(--font-heading);
    
  display: none;
  padding-top: 20px;
  
}


.mobile__submenu a {
    
  padding: 6px 10px;

 
}
.mobile__submenu a:hover {
 color: var(--primary-font-color);
 
}

.mobile__toggle {
font-family: var(--font-heading);

 font-size: var(--font-size-large);
 color: rgb(0,0,10);
 cursor: pointer;

}

.mobile__toggle:hover {
 font-size: var(--font-size-xlarge);

}

.mobile__toggle img{
padding-left: 5px;
height: auto;
width: 25px;

}

.mobile__dropdown.active .mobile__submenu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile__link,
.mobile__toggle {
  font-size: var(--font-size-xlarge);
  
}

.mobile__cta {
 
  margin-top: auto;
  margin-bottom: 20px;
  
  display:flex;
  align-items:center;
  gap:4px;
  font-family: var(--font-cta);
  font-size: var(--font-size-large);
  padding: var(--cta-padding-y) var(--cta-padding-x);
  background: var(--primary-bg-color);
  color: var(--cta-tertiary-font-color);
  border-radius: 4px;

}

.mobile__cta:hover {
  background: var(--primary-bg-color);
  color: var(--cta-tertiary-font-color);
  scale: 1.04;
}

.mobile__cta img{
  height: auto;
  width: 34px;
}

/* HIDE CTA ON MOBILE */
@media(max-width:768px){
  .nav__cta {
    display: none;
  }
}

/* MOBILE HEADER */
.mobile__header{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:absolute;
  top:10px;
  left:0;
  padding:0 20px;
}

.mobile__logo{
  width:140px;
}

/* DROPDOWN ANIMATION */
.dropdown {
  transform-origin: top;
  transform: rotateX(-90deg);
  transition: transform 0.3s ease;
}

.nav__dropdown.active .dropdown {
  transform: rotateX(0);
}






/* RESPONSIVE */
@media(max-width: 768px) {

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
}

.nav__logo img{
    height: auto;
    width: 170px;

}

  .nav__menu {
    display: none;
  }

  .nav__hamburger {
    display: block;
  }

  .nav__cta {
    margin-right: auto;
    margin-left: 1rem;
  }
}






/*==================================================
                HERO CAROUSEL
==================================================*/


/*==================== Carousel Section Wrapper ================*/
.carousel-section {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  background-color: var(--color-primary);
  height: 90vh;
}

/*==================== Track ====================*/
.carousel-inner {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1000ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  touch-action: pan-y;
}

/*==================== Slides ====================*/
.carousel-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: clamp(10px, 10vw, 30px);
  min-height: 100vh;
  box-sizing: border-box;
}

.carousel-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.35) 100%
    );
  z-index: 1;
  pointer-events: none;
}

/*==================== Content ====================*/
.slide-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  padding-inline: clamp(24px, 5vw, 60px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  color: var(--color-tertiary);
}

/*==================== Eyebrow ====================*/
.slide-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 2px solid var(--color-tertiary);
  border-radius: 8px;
 
  padding: 12px 22px;
  margin-bottom: clamp(30px, 4vw, 50px);

  background: transparent;
}

.slide-eyebrow span {
  width: 5px;
  height: 5px;
  border: solid var(--color-tertiary);
  border-radius: 50%;
  background: var(--color-tertiary);
}

.slide-eyebrow p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(.8rem, 1vw, .95rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-tertiary);
}

/*==================== Typography ====================*/
.slide-title {
  margin: 0;

  font-family: var(--font-cta);
  font-weight: 800;

  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: .85;

  color: var(--color-tertiary);

  opacity: 0;
  transform: translateY(30px);
}

.slide-title span {
  color: var(--color-tertiary);
}

.slide-paragraph {
  margin-top: clamp(20px, 3vw, 40px);

  max-width: 1350px;
  padding-bottom: 30px;

  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 200;
  line-height: 1.8;

  color: var(--color-tertiary);

  opacity: 0;
  transform: translateY(20px);
}

/*==================== CTA Buttons ====================*/
.slide-ctas {
  
  padding-bottom: clamp(20px, 6vw, 50px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 16px;

  opacity: 0;
  transform: translateY(20px);
}

button.cta-primary,
button.cta-secondary {
  font-family: var(--font-cta);
  

  font-size: clamp(1rem, 1vw, 1rem);
  font-weight: 800;
  padding: 16px 30px;

  border-radius: 4px;
  border: 2px solid var(--color-tertiary);

  cursor: pointer;

  text-transform: uppercase;
  letter-spacing: 1px;

  transition:
    transform var(--transition-medium),
    background-color var(--transition-medium),
    color var(--transition-medium);
}

button.cta-primary {
  background: var(--color-tertiary);
  color: var(--color-primary);
}

button.cta-primary:hover,
button.cta-primary:focus {
  background: transparent;
  color: var(--color-tertiary);
  transform: translateY(-4px);
}

button.cta-secondary {
  background: transparent;
  color: var(--color-tertiary);
}

button.cta-secondary:hover,
button.cta-secondary:focus {
  background: var(--color-tertiary);
  color: var(--color-primary);
  transform: translateY(-4px);
}

/*==================== Number Navigation ====================*/
.nav-dots {
  position: absolute;
  bottom: clamp(25px, 4vw, 40px);
  left: 90%;
  transform: translateX(-50%);
  z-index: 10;
  
  display: flex;
  align-items: center;
  gap: 14px;
}

.dot {
  width: clamp(55px, 5vw, 70px);
  height: clamp(55px, 5vw, 70px);

  border: 2px solid var(--color-primary);
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
 
  font-family: var(--font-cta);
  font-size: clamp(1.5rem, 1vw, 1.7rem);
  font-weight: 600;

  color: var(--color-primary);

  cursor: pointer;

  transition: all var(--transition-medium);
}

.dot:hover {
  transform: translateY(-3px);
}

.dot[aria-selected="true"] {
  border-color: var(--color-tertiary);
  color: var(--color-tertiary);
}

.dot[aria-selected="false"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/*==================== Accessibility ====================*/
.dot:focus,
.cta-primary:focus,
.cta-secondary:focus {
  outline: 3px solid rgba(255,255,255,.3);
  outline-offset: 4px;
}

/*==================== Animations ====================*/
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.carousel-slide.is-active .slide-title {
  animation: fadeUp 900ms cubic-bezier(.2,.9,.2,1) 100ms both;
}

.carousel-slide.is-active .slide-paragraph {
  animation: fadeUp 900ms cubic-bezier(.2,.9,.2,1) 250ms both;
}

.carousel-slide.is-active .slide-ctas {
  animation: fadeUp 900ms cubic-bezier(.2,.9,.2,1) 400ms both;
}

/*==================== Responsive ====================*/
@media (max-width: 1024px) {

  .slide-content {
    padding-inline: 24px;
  }

  .slide-title {
    font-size: clamp(3rem, 9vw, 5rem);
  }

  .slide-paragraph {
    font-size: clamp(1rem, 3vw, 1.1rem);
  }
}

@media (max-width: 767px) {

  .slide-content {
    text-align: center;
  }

  .slide-eyebrow {
    flex-direction: row;
    gap: 10px;
    padding: 10px 14px;
  }

  .slide-eyebrow p {
    font-size: .7rem;
    letter-spacing: 1px;
  }

  .slide-title {
    font-size: clamp(2.3rem, 12vw, 4rem);
  }

  .slide-paragraph {
    line-height: 1.7;
  }

  .slide-ctas {
    flex-direction: row;
    width: 100%;
  }

  button.cta-primary,
  button.cta-secondary {
    width: 100%;
  }

/*==================== Number Navigation ====================*/
.nav-dots {
  position: absolute;
  bottom: clamp(5px, 4vw, 20px);
  left: 80%;
  transform: translateX(-50%);
  z-index: 10;

  display: flex;
  align-items: center;
  gap: 14px;
}


  .dot {
    display:none;
    
  }
}







/*==================================================
            CLIENTS CAROUSEL SECTION
==================================================*/
.clients {
  background: var(--tertiary-bg-color); /* white */
  padding: 4rem 0;
  overflow: hidden;
}

.clients__container {
  width: min(92%, 1400px);
  margin: 0 auto;
}

.clients__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--primary-font-color);
  text-align: center;
  margin-bottom: 2.5rem;
  line-height: 1.2;
}

/* Carousel wrapper hides overflow */
.clients__carousel {
  overflow: hidden;
  width: 100%;
}

/* Track holds both original and duplicated items */
.clients__track {
  display: flex;
  align-items: center;
  gap: 3rem;              /* space between logos */
  width: max-content;
  animation: scrollClients 30s linear infinite;
}

/* Pause animation on hover / focus */
.clients__carousel:hover .clients__track,
.clients__carousel:focus-within .clients__track {
  animation-play-state: paused;
}

/* Each logo item */
.clients__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;           
  padding: 0 0.5rem;
}

.clients__item img {
  display: block;
  max-height: 100%;
  width: auto;
  object-fit: contain;
 
  
  transition: filter 0.3s, opacity 0.3s;
}

.clients__item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Infinite scroll keyframes */
@keyframes scrollClients {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Move exactly half the track width (because we duplicated content) */
    transform: translateX(-50%);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .clients__track {
    animation: none;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .clients {
    padding: 3rem 0;
  }

  .clients__title {
    margin-bottom: 2rem;
  }

  .clients__track {
    gap: 2rem;
    animation-duration: 20s; /* slightly faster on small screens */
  }

  .clients__item {
    height: 60px;
  }
}


















/*==================================================
                    ABOUT SECTION
==================================================*/

.about{

    position:relative;

    width:100%;

    padding:clamp(80px,8vw,140px) 0;

    background:var(--primary-bg-color);

    overflow:hidden;

}


/*==================================================
                    CONTAINER
==================================================*/

.about__container{

    width:min(1400px,92%);

    margin:0 auto;

}


/*==================================================
                    HEADER
==================================================*/

.about__header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:clamp(60px,7vw,90px);

}


/*==================================================
                    EYEBROW
==================================================*/

.about__eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    padding:14px 26px;

    border-radius:8px;

    border:2px solid var(--border-tertiary-color);

    margin-bottom:28px;

}





/*==================================================
                    EYEBROW TEXT
==================================================*/

.about__eyebrow p{

    font-family:var(--font-heading);

    font-size:.9rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--tertiary-font-color);

}


/*==================================================
                    EYEBROW ICON
==================================================*/

.about__eyebrow img{

    width:18px;

    height:18px;

    object-fit:contain;

}


/*==================================================
                    TITLE
==================================================*/

.about__title{

    max-width:800px;

    font-family:var(--font-heading);

    font-weight:700;

    font-size:clamp(2.8rem,5vw,5rem);

    line-height:1;

    text-transform:uppercase;

    color:var(--tertiary-font-color);

}


.about__title span{

    display:block;

    color:var(--color-secondary);

}


/*==================================================
                    CONTENT
==================================================*/

.about__content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:clamp(40px,5vw,90px);

    align-items:start;

}


/*==================================================
                    LEFT
==================================================*/

.about__left{

    display:flex;

    flex-direction:column;

    gap:35px;

}


/*==================================================
                    INTRO
==================================================*/

.about__intro{

    font-family:var(--font-body);

    font-size:1.08rem;

    line-height:1.9;

    color:var(--tertiary-font-color);

}


/*==================================================
                    GALLERY
==================================================*/

.about__gallery{

    position:relative;

    width:100%;

    max-height: 450px; ;

    aspect-ratio:3/5;

    overflow:hidden;

}


/*==================================================
                    IMAGE
==================================================*/

.about__image{

    position:absolute;

    inset:0;

    border-radius:8px;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    visibility:hidden;

    transform:translateX(40px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

}


/*==================================================
                ACTIVE IMAGE
==================================================*/

.about__image--active{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}


/*==================================================
                    RIGHT
==================================================*/

.about__right{

    display:flex;

    flex-direction:column;

    gap:26px;

}


/*==================================================
                    PARAGRAPHS
==================================================*/

.about__right p{

    font-family:var(--font-body);

    font-size:1.05rem;

    line-height:2;

    color:var(--tertiary-font-color);

}

/*==================================================
                READ MORE LINK
==================================================*/

.about__link{

    margin-top:20px;

    display:inline-flex;

    align-items:center;

    gap:12px;

    width:max-content;

    text-decoration:none;

    font-family:var(--font-cta);

    font-size:1rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    color:var(--tertiary-font-color);

    transition:
        color .35s ease;

}


.about__link img{

    width:18px;

    height:18px;

    object-fit:contain;

    transition:transform .35s ease;

}


.about__link:hover,
.about__link:focus-visible{

    color:var(--color-tertiary);

}


.about__link:hover img,
.about__link:focus-visible img{

    transform:translateX(3px);

}


/*==================================================
                IMAGE ANIMATION
==================================================*/

@keyframes aboutImageIn{

    from{

        opacity:0;

        transform:translateX(60px) scale(1.03);

    }

    to{

        opacity:1;

        transform:translateX(0) scale(1);

    }

}


.about__image--active{

    animation:aboutImageIn .8s ease both;

}


/*==================================================
                ACCESSIBILITY
==================================================*/

.about__link:focus-visible{

    outline:3px solid var(--color-secondary);

    outline-offset:6px;

}


/*==================================================
                TABLET
==================================================*/

@media (max-width:1024px){

.about{

    padding:80px 0;

}

.about__container{

    width:min(94%,1200px);

}

.about__content{

    gap:50px;

}

.about__title{

    font-size:clamp(2.4rem,6vw,4rem);

}

.about__intro{

    font-size:1rem;

}

.about__right p{

    font-size:1rem;

}

}


/*==================================================
                MOBILE
==================================================*/

@media (max-width:768px){

.about{

    padding:70px 0;

}

.about__container{

    width:92%;

}

.about__header{

    margin-bottom:50px;

}

.about__eyebrow{

    padding:12px 18px;

    gap:10px;

    flex-wrap:wrap;

}

.about__eyebrow-line{

    width:45px;

}

.about__eyebrow p{

    font-size:.72rem;

    letter-spacing:1.5px;

    text-align:center;

}

.about__eyebrow img{

    width:16px;

    height:16px;

}

.about__title{

    font-size:clamp(2rem,10vw,3.2rem);

}

.about__content{

    grid-template-columns:1fr;

    gap:45px;

}

.about__left{

    order:2;

}

.about__right{

    order:3;

}

.about__gallery{

    aspect-ratio:4/4.8;

}

.about__intro{

    font-size:1rem;

    line-height:1.8;

}

.about__right p{

    font-size:.98rem;

    line-height:1.9;

}

.about__link{

    font-size:.9rem;

}

}


/*==================================================
            SMALL DEVICES
==================================================*/

@media (max-width:480px){

.about{

    padding:60px 0;

}

.about__eyebrow{

    width:100%;

    justify-content:center;

}

.about__eyebrow-line{

    display:none;

}

.about__title{

    font-size:2rem;

}

.about__intro{

    font-size:.95rem;

}

.about__right p{

    font-size:.95rem;

}

.about__gallery{

    aspect-ratio:1/1.15;

}

.about__link{

    font-size:.85rem;

}

.about__link img{

    width:16px;

    height:16px;

}

}


/*==================================================
            REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

.about__image,
.about__image--active,
.about__link,
.about__link img{

    animation:none !important;

    transition:none !important;

}

}


/*==================================================
                    PRINT
==================================================*/

@media print{

.about{

    background:#ffffff !important;

    color:#000000 !important;

}

.about__eyebrow{

    border:2px solid #000;

}

.about__title,
.about__title span,
.about__intro,
.about__right p,
.about__link{

    color:#000 !important;

}

.about__gallery{

    display:none;

}

}





/*==================================================
                ACHIEVEMENTS SECTION
==================================================*/

.achievements{

    position:relative;

    width:100%;

    padding:clamp(90px,8vw,140px) 0;

    overflow:hidden;

    background-image:url("/assets/images/pexels-vadym-alyekseyenko-137433856-38520040.jpg");

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

    background-attachment:fixed;

}


/*==================================================
                    OVERLAY
==================================================*/

.achievements__overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
    linear-gradient(
        160deg,
        rgba(34, 33, 33, 0.9) 5%,
        rgba(85, 84, 84, 0.2) 55%,
        rgba(26, 24, 24, 0.9) 100%
    );

}


/*==================================================
                    CONTAINER
==================================================*/

.achievements__container{

    position:relative;

    z-index:2;

    width:min(1400px,92%);

    margin:0 auto;

}


/*==================================================
                    GRID
==================================================*/

.achievements__grid{

    list-style:none;

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:30px;

    padding:0;

    margin:0;

}


/*==================================================
                    ITEM
==================================================*/

.achievement{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:30px 10px;

}


/*==================================================
                    NUMBER
==================================================*/

.achievement__number{

    display:block;

    margin-bottom:18px;

    font-family:var(--font-heading);

    font-size:clamp(3.5rem,5vw,5.5rem);

    font-weight:700;

    line-height:1;

    color:var(--color-tertiary);

    opacity:0;

    transform:translateY(50px);

}


/*==================================================
                    TITLE
==================================================*/

.achievement__title{

    max-width:180px;

    font-family:var(--font-cta);

    font-size:1rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1.2px;

    line-height:1.6;

    color:var(--tertiary-font-color);

}


/*==================================================
                ITEM HOVER
==================================================*/

.achievement{

    transition:
        transform .35s ease,
        opacity .35s ease;

}


.achievement:hover{

    transform:translateY(-8px);

}


/*==================================================
            COUNTER ANIMATION
==================================================*/

@keyframes counterUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.achievement.is-visible
.achievement__number{

    animation:
        counterUp
        .8s
        cubic-bezier(.2,.85,.2,1)
        forwards;

}


.achievement.is-visible:nth-child(2)
.achievement__number{

    animation-delay:.1s;

}


.achievement.is-visible:nth-child(3)
.achievement__number{

    animation-delay:.2s;

}


.achievement.is-visible:nth-child(4)
.achievement__number{

    animation-delay:.3s;

}


.achievement.is-visible:nth-child(5)
.achievement__number{

    animation-delay:.4s;

}


.achievement.is-visible:nth-child(6)
.achievement__number{

    animation-delay:.5s;

}


/*==================================================
                TABLET
==================================================*/

@media (max-width:1200px){

.achievements__grid{

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.achievement{

    padding:25px 10px;

}

}


/*==================================================
                MOBILE
==================================================*/

@media (max-width:768px){

.achievements{

    padding:70px 0;

    background-attachment:scroll;

}

.achievements__container{

    width:92%;

}

.achievements__grid{

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

    gap:30px 20px;

}

.achievement{

    padding:18px 8px;

}

.achievement__number{

    font-size:clamp(2.4rem,10vw,3.6rem);

    margin-bottom:14px;

}

.achievement__title{

    font-size:.85rem;

    line-height:1.5;

    max-width:140px;

}

}


/*==================================================
            VERY SMALL DEVICES
==================================================*/

@media (max-width:480px){

.achievements{

    padding:60px 0;

}

.achievements__grid{

    gap:25px 16px;

}

.achievement__number{

    font-size:2.2rem;

}

.achievement__title{

    font-size:.75rem;

    letter-spacing:.8px;

}

}


/*==================================================
        REDUCED MOTION SUPPORT
==================================================*/

@media (prefers-reduced-motion:reduce){

.achievement,
.achievement__number{

    animation:none !important;

    transition:none !important;

    transform:none !important;

    opacity:1 !important;

}

}


/*==================================================
                PRINT
==================================================*/

@media print{

.achievements{

    background:#ffffff !important;

    color:#000000 !important;

    padding:40px 0;

}

.achievements__overlay{

    display:none;

}

.achievement__number{

    color:#000000 !important;

    opacity:1 !important;

    transform:none !important;

}

.achievement__title{

    color:#000000 !important;

}

}




/*==================================================
                SERVICES SECTION
==================================================*/

.services {
    position: relative;
    padding: 7rem 0;
    background: var(--primary-bg-color);
    overflow: hidden;
}

.services__container {
    width: min(92%, 1400px);
    margin: 0 auto;
}

/*==================================================
                    HEADER
==================================================*/

.services__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 3rem;
}

.services__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;

    padding: 10px 22px;

    border: 1px solid var(--border-tertiary-color);
    border-radius: 8px;

    font-family: var(--font-cta);
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;

    color: var(--tertiary-font-color);

    margin-bottom: 1.5rem;
}

.services__eyebrow-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.services__title {

    max-width: 900px;

    font-family: var(--font-heading);
    font-size: clamp(2.5rem,4vw,4rem);
    font-weight: 700;

    line-height: 1.1;

    color: var(--tertiary-font-color);

    margin-bottom: 1.25rem;

}

.services__description {

    max-width: 760px;

    font-size: 1.05rem;

    line-height: 1.8;

    font-family: var(--font-body);

    color: var(--tertiary-font-color);

}

/*==================================================
                  SWIPE HINT
==================================================*/

.services__hint{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:.75rem;

    margin-bottom:1.5rem;

}

.services__hint img{

    width:22px;

    height:22px;

}

.services__hint span{

    font-family:var(--font-cta);

    font-size:.9rem;

    font-weight:700;

    color:var(--tertiary-font-color);

    text-transform:uppercase;

    letter-spacing:1px;

}

/*==================================================
                 SLIDER WRAPPER
==================================================*/

.services__slider{

    position:relative;

    overflow:hidden;

    width:100%;

    outline:none;

}

.services__track{

    display:flex;

    align-items:stretch;

    gap:2rem;

    transition:transform .8s ease;

    will-change:transform;

}

/*==================================================
                  SERVICE CARD
==================================================*/

.service-card{

    position:relative;

    flex:0 0 calc((100% - 2rem)/2);

    display:grid;

    grid-template-columns:1fr 1fr;

    overflow:hidden;

    background:var(--color-tertiary);

    

    border-radius:16px;

    min-height:370px;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}

.service-card:hover{

    

    

    box-shadow:
    0 18px 45px rgba(0,0,0,.12);

}

.service-card:focus-within{

    transform:translateY(-8px);

    border-color:var(--border-primary-color);

    box-shadow:
    0 20px 50px rgba(0,0,0,.14);

}

/*==================================================
               CARD NUMBER
==================================================*/

.service-card__number{

    position:absolute;

    top:-18px;

    left:25px;

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:none;

    border:2px solid var(--border-tertiary-color);

    color:var(--tertiary-font-color);

    font-family:var(--font-heading);

    font-size:1.35rem;

    font-weight:700;

    border-radius: 0px 0px 8px 8px;

    z-index:20;

    box-shadow:
    0 10px 25px rgba(0,0,0,.18);

}

/*==================================================
                  IMAGE AREA
==================================================*/

.service-card__image{

    position:relative;

    overflow:hidden;

    height:100%;

}

.service-card__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
    transform .6s ease,
    filter .6s ease;

}

.service-card:hover
.service-card__image img{

    transform:scale(1.08);

}

.service-card:focus-within
.service-card__image img{

    transform:scale(1.08);

}

/*==================================================
                CARD CONTENT
==================================================*/

.service-card__content{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:3.5rem 2rem 2rem;

    background:var(--color-tertiary);

}

.service-card__content h3{

    margin:0 0 1rem;

    font-family:var(--font-heading);

    font-size:1.8rem;

    line-height:1.2;

    color:var(--primary-font-color);

}

.service-card__content p{

    flex:1;

    margin:0;

    font-size:1rem;

    line-height:1.8;

    color:#000000;

}

/*==================================================
                  LEARN MORE
==================================================*/

.service-card__content a{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    align-self:flex-end;

    margin-top:2rem;

    text-decoration:none;

    font-family:var(--font-cta);

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.6px;

    color:var(--primary-font-color);

    transition:
    color .3s ease,
    transform .3s ease;

}

.service-card__content a img{

    width:18px;

    height:18px;

    object-fit:contain;

    transition:
    transform .35s ease;

}

.service-card__content a:hover{

    color:var(--secondary-font-color);

}

.service-card__content a:hover img{

    transform:translateX(6px);

}


/*==================================================
              CARD DECORATION
==================================================*/

.service-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:var(--tertiary-bg-color);

    transition:width .45s ease;

}

.service-card:hover::after,

.service-card:focus-within::after{

    width:100%;

}

/*==================================================
               NAVIGATION
==================================================*/

.services__navigation{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:1rem;

    margin-top:2rem;

}

.services__navigation button{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    border: 2px solid var(--border-tertiary-color);

    border-radius:8px;

    background: none;

    transition:
    transform .3s ease,
    box-shadow .3s ease,
    opacity .3s ease;

}

.services__navigation button:hover{

    transform:translateY(-4px);

    box-shadow:0 14px 28px rgba(0,0,0,.18);

}

.services__navigation button:active{

    transform:scale(.95);

}

.services__navigation button:focus-visible{

    outline:3px solid var(--border-secondary-color);

    outline-offset:5px;

}

.services__navigation button img{

    width:22px;

    height:22px;

    object-fit:contain;

}

/*==================================================
           ACCESSIBILITY STATES
==================================================*/

.services__slider:focus-visible{

    outline:3px solid var(--border-secondary-color);

    outline-offset:10px;

}

.service-card a:focus-visible{

    border-radius:4px;

}

/*==================================================
             SMOOTH ANIMATIONS
==================================================*/

.service-card,

.service-card__image img,

.service-card__content,

.services__track,

.services__navigation button{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}

/*==================================================
                RESPONSIVE DESIGN
==================================================*/

/*==============================
        Large Desktop
==============================*/

@media (max-width: 1400px){

    .services{
        padding:6rem 0;
    }

    .services__container{
        width:min(94%,1300px);
    }

}


/*==============================
          Laptop
==============================*/

@media (max-width:1200px){

    .service-card{

        min-height:340px;

    }

    .service-card__content{

        padding:3rem 1.75rem 1.75rem;

    }

    .service-card__content h3{

        font-size:1.6rem;

    }

}


/*==============================
            Tablet
==============================*/

@media (max-width:991px){

    .services{

        padding:5rem 0;

    }

    .services__header{

        margin-bottom:2.5rem;

    }

    .services__title{

        font-size:clamp(2rem,5vw,3rem);

    }

    .services__description{

        max-width:650px;

        font-size:1rem;

    }

    .services__hint{

        justify-content:center;

        margin-bottom:2rem;

    }

    .services__track{

        gap:1.5rem;

    }

    .service-card{

        flex:0 0 100%;

        min-height:340px;

    }

}


/*==============================
        Large Mobile
==============================*/

@media (max-width:768px){

    .services{

        padding:4.5rem 0;

    }

    .services__eyebrow{

        padding:9px 18px;

        font-size:.8rem;

        gap:.55rem;

    }

    .services__eyebrow-icon{

        width:16px;

        height:16px;

    }

    .services__title{

        font-size:2.2rem;

    }

    .services__description{

        font-size:.96rem;

        line-height:1.7;

    }

    .service-card{

        grid-template-columns:1fr;

        min-height:auto;

    }

    .service-card__image{

        height:260px;

    }

    .service-card__content{

        padding:2rem 1.5rem 1.5rem;

    }

    .service-card__content h3{

        font-size:1.45rem;

    }

    .service-card__content p{

        margin-top:.75rem;

        font-size:.95rem;

    }

    .service-card__content a{

        align-self:flex-start;

        margin-top:1.5rem;

    }

    .services__navigation{

        justify-content:center;

        margin-top:2rem;

    }

}


/*==============================
        Small Mobile
==============================*/

@media (max-width:576px){

    .services{

        padding:4rem 0;

    }

    .services__container{

        width:92%;

    }

    .services__eyebrow{

        width:100%;

        max-width:270px;

    }

    .services__title{

        font-size:2rem;

    }

    .services__description{

        font-size:.93rem;

    }

    .service-card__number{

        width:58px;

        height:58px;

        left:18px;

        top:-15px;

        font-size:1.1rem;

    }

    .service-card__image{

        height:220px;

    }

    .service-card__content{

        padding:1.75rem 1.35rem 1.35rem;

    }

    .service-card__content h3{

        font-size:1.3rem;

    }

    .services__navigation button{

        width:50px;

        height:50px;

    }

    .services__navigation button img{

        width:18px;

        height:18px;

    }

}


/*==============================
        Extra Small Devices
==============================*/

@media (max-width:400px){

    .services__title{

        font-size:1.75rem;

    }

    .services__description{

        font-size:.9rem;

    }

    .service-card__image{

        height:200px;

    }

    .service-card__content h3{

        font-size:1.2rem;

    }

    .service-card__content p{

        font-size:.9rem;

    }

}


/*==================================================
            REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion: reduce){

    .services *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==================================================
              HIGH CONTRAST
==================================================*/

@media (prefers-contrast: more){

    .service-card{

        border:2px solid var(--border-primary-color);

    }

    .services__navigation button{

        border:2px solid var(--border-tertiary-color);

    }

}


/*==================================================
              SELECTION
==================================================*/

.services ::selection{

    background:var(--color-primary);

    color:var(--color-tertiary);

}




/*==================================================
              INQUIRY CTA SECTION
==================================================*/

.inquiry-cta{

    position:relative;

    min-height:420px;

    display:flex;

    align-items:center;

    justify-content:center;

    background-image:url("/assets/images/scaffolding-services-by-rispo-construction-limited.webp");

    background-size:cover;

    background-position:center;

    overflow:hidden;

}



/*==================================================
                  OVERLAY
==================================================*/

.inquiry-cta__overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(22, 11, 11, 0.527),
        rgba(215, 31, 40, 0.068),
        rgba(0,0,0,.55)
    );

}



/*==================================================
                  CONTAINER
==================================================*/

.inquiry-cta__container{

    position:relative;

    z-index:2;

    width:min(92%,1200px);

    margin:0 auto;

}



/*==================================================
                  CONTENT
==================================================*/

.inquiry-cta__content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:3rem;

}



.inquiry-cta__message{

    max-width:650px;

    margin:0;

    color:var(--tertiary-font-color);

    font-family:var(--font-cta);

    font-weight:700;

    font-size:clamp(1.5rem,4vw,2.5rem);

    line-height:1;

    font-weight:300;

}



/*==================================================
                  BUTTONS
==================================================*/

.inquiry-cta__actions{

    display:flex;

    flex-direction:column;

    gap:1rem;

    min-width:280px;

}



.inquiry-cta__button{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1.5rem;

    padding:16px 24px;

    text-decoration:none;

    font-family:var(--font-cta);

    font-size:1rem;

    font-weight:700;

    letter-spacing:.5px;

    transition:

    transform .3s ease,

    box-shadow .3s ease,

    background .3s ease;

}



.inquiry-cta__button img{

    width:24px;

    height:24px;

    object-fit:contain;

}



/*==================================================
              WHATSAPP BUTTON
==================================================*/

.inquiry-cta__button--whatsapp{

    border-radius: 8px;

    background: none;

    border: 2px solid var(--border-tertiary-color);

    color:var(--color-tertiary);

}



.inquiry-cta__button--whatsapp:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 30px rgba(0,0,0,.25);

}



/*==================================================
                  CALL BUTTON
==================================================*/

.inquiry-cta__button--call{

    background:var(--primary-bg-color);

    border-radius: 8px;

    color:var(--color-tertiary);

}



.inquiry-cta__button--call:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 30px rgba(0,0,0,.25);

}



/*==================================================
              ACCESSIBILITY
==================================================*/

.inquiry-cta__button:focus-visible{

    outline:3px solid var(--tertiary-font-color);

    outline-offset:5px;

}



/*==================================================
                  TABLET
==================================================*/

@media(max-width:991px){


    .inquiry-cta{

        min-height:auto;

        padding:5rem 0;

    }


    .inquiry-cta__content{

        flex-direction:column;

        align-items:flex-start;

        gap:2.5rem;

    }


    .inquiry-cta__message{

        font-size:1.1rem;

    }


    .inquiry-cta__actions{

        width:100%;

        max-width:350px;

    }


}



/*==================================================
                  MOBILE
==================================================*/

@media(max-width:600px){


    .inquiry-cta{

        padding:4rem 0;

        background-position:center;

    }


    .inquiry-cta__message{

        font-size:1rem;

        line-height:1.7;

    }


    .inquiry-cta__button{

        padding:14px 18px;

        font-size:.9rem;

    }


    .inquiry-cta__button img{

        width:20px;

        height:20px;

    }


}


















/*==================================================
            OPERATING HOURS SECTION
==================================================*/

.operating-hours{

    position:relative;

    padding:7rem 0;

    background:var(--primary-bg-color);

    color:var(--tertiary-font-color);

    overflow:hidden;

}


.operating-hours__container{

    width:min(92%,1400px);

    margin:0 auto;

}


/*==================================================
                HEADER
==================================================*/


.operating-hours__header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    margin-bottom:4rem;

}


.operating-hours__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    padding:10px 22px;

    border:1px solid var(--border-tertiary-color);

    border-radius:8px;

    color:var(--tertiary-font-color);

    font-family:var(--font-cta);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:1.5rem;

}


.operating-hours__eyebrow img{

    width:20px;

    height:20px;

    object-fit:contain;

}



.operating-hours__header h2{

    max-width:850px;

    margin:0;

    font-family:var(--font-heading);

    font-size:clamp(2.4rem,4vw,4rem);

    line-height:1.1;

    color:var(--tertiary-font-color);

}



/*==================================================
                CONTENT SPLIT
==================================================*/


.operating-hours__content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:4rem;

    align-items:start;

}



/*==================================================
                LEFT SIDE
==================================================*/


.operating-hours__schedule{

    padding:2.5rem;

    background:none;

    border-radius:8px;

    border:1px solid var(--border-tertiary-color);

}



.operating-hours__intro{

    margin-bottom:2.5rem;

    font-size:1.05rem;

    line-height:1.8;

    color:var(--tertiary-font-color);

}



.operating-hours__list{

    display:flex;

    flex-direction:column;

    gap:0;

}



.operating-hours__day{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 0;

    border-bottom:1px solid rgba(255,255,255,.25);

    font-size:1rem;

}



.operating-hours__day:last-child{

    border-bottom:none;

}



.operating-hours__day span{

    font-family:var(--font-cta);

    font-weight:700;

    color:var(--tertiary-font-color);

}



.operating-hours__day time{

    font-weight:600;

    color:var(--tertiary-font-color);

}



.operating-hours__day--closed time{

     color:var(--tertiary-font-color);

    opacity:.75;

}



/*==================================================
                RIGHT SIDE
==================================================*/


.operating-hours__visit{

    display:flex;

    flex-direction:column;

    gap:2rem;

}



.operating-hours__visit-text{

    font-size:1.05rem;

    line-height:1.8;

    color:var(--tertiary-font-color);

}



.operating-hours__map{

    width:100%;

    overflow:hidden;

    border-radius: 8px;

    border:1px solid rgba(255,255,255,.25);

}



.operating-hours__map iframe{

    display:block;

    width:100%;

    height:450px;

    border:0;

}



/*==================================================
                HOVER DETAILS
==================================================*/


.operating-hours__day{

    transition:

    background .3s ease,

    padding-left .3s ease;

}


.operating-hours__day:hover{

    padding-left:.75rem;

    background: none;

}



/*==================================================
                TABLET
==================================================*/


@media(max-width:991px){


    .operating-hours{

        padding:5rem 0;

    }


    .operating-hours__content{

        grid-template-columns:1fr;

        gap:3rem;

    }


    .operating-hours__schedule{

        padding:2rem;

    }


}



/*==================================================
                MOBILE
==================================================*/


@media(max-width:600px){


    .operating-hours{

        padding:4rem 0;

    }


    .operating-hours__header{

        margin-bottom:2.5rem;

    }


    .operating-hours__eyebrow{

        font-size:.75rem;

        padding:9px 16px;

    }


    .operating-hours__header h2{

        font-size:2rem;

    }


    .operating-hours__schedule{

        padding:1.5rem;

    }


    .operating-hours__day{

        flex-direction:column;

        align-items:flex-start;

        gap:.35rem;

    }


    .operating-hours__map iframe{

        height:350px;

    }


}


/*==================================================
           WHY CHOOSE US SECTION
==================================================*/
.why-choose-us {
  background: var(--tertiary-bg-color);
  padding: 5rem 0;
}

.why-choose-us__container {
  width: min(92%, 1200px);
  margin: 0 auto;
}

/* ---- Eyebrow wrapper centers the eyebrow ---- */
.why-choose-us__eyebrow-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.why-choose-us__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--border-primary-color);
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-cta);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-font-color);
}

.why-choose-us__eyebrow-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ---- Title ---- */
.why-choose-us__title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--primary-font-color);
  text-align: center;
  margin-bottom: 2.5rem;
  line-height: 1.2;
}

/* ---- List (grid: 2 columns, 3 rows) ---- */
.why-choose-us__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0; /* we use padding/border for separation */
}

/* ---- Each item ---- */
.why-choose-us__item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Remove bottom border from last two items (last row) */
.why-choose-us__item:nth-last-child(-n+2) {
  border-bottom: none;
}

/* ---- Icon ---- */
.why-choose-us__item-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(215, 31, 39, 0.05);
  border-radius: 8px;
}

.why-choose-us__item-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* ---- Text content ---- */
.why-choose-us__item-content {
  flex: 1;
}

.why-choose-us__item-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-font-color);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.why-choose-us__item-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
}

/* ---- Responsive (tablet/mobile) ---- */
@media (max-width: 768px) {
  .why-choose-us {
    padding: 3.5rem 0;
  }

  .why-choose-us__title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  /* Stack items in one column */
  .why-choose-us__list {
    grid-template-columns: 1fr;
  }

  /* Every item gets a border except the last */
  .why-choose-us__item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .why-choose-us__item {
    padding: 1.5rem 1rem;
  }

  .why-choose-us__item-icon {
    width: 44px;
    height: 44px;
  }

  .why-choose-us__item-icon img {
    width: 24px;
    height: 24px;
  }

  .why-choose-us__item-title {
    font-size: 1.15rem;
  }
}





/*==================================================
        CONSTRUCTION FAQ PREVIEW SECTION
==================================================*/


.construction-faq-preview{

    background:var(--primary-bg-color);

    padding:7rem 0;

    color:var(--tertiary-font-color);

}



.construction-faq-preview__container{

    width:min(92%,1400px);

    margin:0 auto;

}



/*==================================================
                    HEADER
==================================================*/


.construction-faq-preview__header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    margin-bottom:4rem;

}



.construction-faq-preview__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    padding:10px 22px;

    border:2px solid var(--border-tertiary-color);

    border-radius:8px;

    color:var(--tertiary-font-color);

    font-family:var(--font-cta);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:1.5rem;

}



.construction-faq-preview__eyebrow img{

    width:20px;

    height:20px;

    object-fit:contain;

}



.construction-faq-preview__header h2{

    max-width:850px;

    font-family:var(--font-heading);

    font-size:clamp(2.4rem,4vw,4rem);

    line-height:1.15;

    color:var(--tertiary-font-color);

}



/*==================================================
                TWO COLUMN LAYOUT
==================================================*/


.construction-faq-preview__content{

    display:grid;

    grid-template-columns:1.3fr .7fr;

    gap:4rem;

    align-items:start;

}



/*==================================================
                    FAQ LIST
==================================================*/


.construction-faq-preview__list{

    display:flex;

    flex-direction:column;

}



.construction-faq-preview__item{

    border-bottom:1px solid rgba(177, 173, 173, 0.18);

    padding:1.5rem 0;

}



.construction-faq-preview__item summary{

    display:flex;

    align-items:flex-start;

    gap:1.25rem;

    list-style:none;

    cursor:pointer;

    font-family:var(--font-heading);

    font-size:1.35rem;

    line-height:1.4;

    color:var(--tertiary-font-color);

}



.construction-faq-preview__item summary::-webkit-details-marker{

    display:none;

}



.faq-number{

    min-width:45px;

    color:var(--tertiary-font-color);

    font-family:var(--font-cta);

    font-size:1rem;

    font-weight:700;

}



.construction-faq-preview__item p{

    margin:1rem 0 0 4.2rem;

    max-width:720px;

    color: var(--tertiary-font-color);

    font-size:1rem;

    line-height:1.8;

}



/*==================================================
                    RIGHT SIDE
==================================================*/


.construction-faq-preview__aside{

    position:sticky;

    top:120px;

}



.construction-faq-preview__aside img{

    display:block;

    width:100%;

    height:500px;

    object-fit:cover;

}



/*==================================================
                    MORE LINK
==================================================*/


.construction-faq-preview__more{

    display:inline-flex;

    align-items:center;

    gap:.8rem;

    margin-top:1.5rem;

    text-decoration:none;

    color:var(--tertiary-font-color);

    font-family:var(--font-cta);

    font-weight:700;

    font-size:1rem;

}



.construction-faq-preview__more img{

    width:20px;

    height:20px;

    object-fit:contain;

    transition:transform .3s ease;

}



.construction-faq-preview__more:hover img,

.construction-faq-preview__more:focus-visible img{

    transform:translateX(3px);

}



/*==================================================
                    FOCUS STATES
==================================================*/


.construction-faq-preview__item summary:focus-visible,

.construction-faq-preview__more:focus-visible{

    outline:3px solid var(--border-secondary-color);

    outline-offset:5px;

}



/*==================================================
                    TABLET
==================================================*/


@media(max-width:1100px){


    .construction-faq-preview__content{

        grid-template-columns:1fr;

        gap:3rem;

    }


    .construction-faq-preview__aside{

        position:relative;

        top:auto;

    }


    .construction-faq-preview__aside img{

        height:450px;

    }


}



/*==================================================
                    MOBILE
==================================================*/


@media(max-width:600px){


    .construction-faq-preview{

        padding:4rem 0;

    }


    .construction-faq-preview__header{

        margin-bottom:2.5rem;

    }


    .construction-faq-preview__eyebrow{

        padding:9px 15px;

        font-size:.75rem;

    }


    .construction-faq-preview__header h2{

        font-size:2rem;

    }


    .construction-faq-preview__item{

        padding:1.25rem 0;

    }


    .construction-faq-preview__item summary{

        font-size:1.15rem;

        gap:.8rem;

    }


    .faq-number{

        min-width:35px;

        font-size:.9rem;

    }


    .construction-faq-preview__item p{

        margin-left:0;

        font-size:.95rem;

    }


    .construction-faq-preview__aside img{

        height:300px;

    }


}




/*==================================================
        CONSTRUCTION CONTACT PANEL SECTION
==================================================*/


.construction-contact-panel{

    background:var(--tertiary-bg-color);

    padding:7rem 0;

    color:#222;

}



.construction-contact-panel__container{

    width:min(92%,1400px);

    margin:0 auto;

}



/*==================================================
                    HEADER
==================================================*/


.construction-contact-panel__header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    margin-bottom:4rem;

}



.construction-contact-panel__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    padding:10px 22px;

    border:2px solid var(--border-primary-color);

    border-radius:8px;

    color:var(--primary-font-color);

    font-family:var(--font-cta);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:1.5rem;

}



.construction-contact-panel__eyebrow img{

    width:20px;

    height:20px;

    object-fit:contain;

}



.construction-contact-panel__header h2{

    max-width:850px;

    margin:0;

    font-family:var(--font-heading);

    font-size:clamp(2.4rem,4vw,4rem);

    line-height:1.15;

    color:var(--primary-font-color);

}



/*==================================================
                MAIN CONTENT
==================================================*/


.construction-contact-panel__content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:4rem;

    align-items:start;

}



/*==================================================
                    FORM
==================================================*/


.construction-contact-panel__form{

    display:flex;

    flex-direction:column;

    gap:1.25rem;

}



.construction-contact-panel__field{

    display:flex;

    flex-direction:column;

    gap:.5rem;

}



.construction-contact-panel__field label{

    font-family:var(--font-cta);

    font-size:.95rem;

    font-weight:700;

    color:#222;

}



.construction-contact-panel__field input,

.construction-contact-panel__field select,

.construction-contact-panel__field textarea{

    width:100%;

    padding:15px 18px;

    border:1px solid rgba(0,0,0,.25);

    background:#fff;

    font-family:var(--font-body);

    font-size:1rem;

    color:#222;

    outline:none;

    border-radius: 4px;

    transition:

    border-color .3s ease,

    box-shadow .3s ease;

}



.construction-contact-panel__field textarea{

    resize:vertical;

}



.construction-contact-panel__field input:focus,

.construction-contact-panel__field select:focus,

.construction-contact-panel__field textarea:focus{

    border-color:var(--border-primary-color);

    box-shadow:0 0 0 3px rgba(215,31,39,.12);

    border-radius: 4px;

}



/*==================================================
                SUBMIT BUTTON
==================================================*/


.construction-contact-panel__submit{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1rem;

    width:max-content;

    min-width:190px;

    padding:16px 24px;

    margin-top:.75rem;

    border:none;

    cursor:pointer;

    background:var(--cta-primary-bg-color);

    color:var(--cta-tertiary-font-color);

    font-family:var(--font-cta);

    font-size:1rem;

    font-weight:700;

    border-radius:8px;

    transition:

    transform .3s ease,

    box-shadow .3s ease;

}



.construction-contact-panel__submit img{

    width:22px;

    height:22px;

}



.construction-contact-panel__submit:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,0,0,.2);

}



/*==================================================
                    IMAGE
==================================================*/


.construction-contact-panel__image{

    height:100%;

}



.construction-contact-panel__image img{

    width:100%;

    height:100%;

    min-height:620px;

    max-height: 680px;

    object-fit:cover;

}



/*==================================================
              CONTACT DETAILS
==================================================*/


.construction-contact-panel__details{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:1.5rem;

    margin-top:4rem;

    padding-top:2rem;

    border-top:1px solid rgba(0,0,0,.15);

}



.construction-contact-panel__detail{

    display:flex;

    align-items:center;

    gap:.8rem;

    text-decoration:none;

    color:#222;

    font-family:var(--font-cta);

    font-weight:700;

    padding:12px 18px;

    transition:

    color .3s ease,

    transform .3s ease;

}



.construction-contact-panel__detail img{

    width:22px;

    height:22px;

    object-fit:contain;

}



.construction-contact-panel__detail:hover{

    color:var(--primary-font-color);

    transform:translateY(-3px);

}



/*==================================================
                FOCUS STATES
==================================================*/


.construction-contact-panel__submit:focus-visible,

.construction-contact-panel__detail:focus-visible{

    outline:3px solid var(--border-secondary-color);

    outline-offset:5px;

}



/*==================================================
                    TABLET
==================================================*/


@media(max-width:991px){


    .construction-contact-panel{

        padding:5rem 0;

    }


    .construction-contact-panel__content{

        grid-template-columns:1fr;

        gap:3rem;

    }


    .construction-contact-panel__image img{

        min-height:400px;

    }


}



/*==================================================
                    MOBILE
==================================================*/


@media(max-width:600px){


    .construction-contact-panel{

        padding:4rem 0;

    }


    .construction-contact-panel__header h2{

        font-size:2rem;

    }


    .construction-contact-panel__eyebrow{

        padding:9px 15px;

        font-size:.75rem;

    }


    .construction-contact-panel__submit{

        width:100%;

    }


    .construction-contact-panel__details{

        flex-direction:column;

        align-items:flex-start;

    }


    .construction-contact-panel__detail{

        padding-left:0;

    }


}



/*==================================================
              RISPO CONSTRUCTION FOOTER
==================================================*/


.rispo-footer{

    background:var(--primary-bg-color);

    color:var(--tertiary-font-color);

    padding:5rem 0 0;

}



.rispo-footer__container{

    width:min(92%,1400px);

    margin:0 auto;

    display:grid;

    grid-template-columns:1.2fr .8fr 1.5fr 1fr;

    gap:3rem;

    padding-bottom:4rem;

}



/*==================================================
                ALL COLUMNS
==================================================*/


.rispo-footer__column h3{

    position:relative;

    margin-bottom:1.8rem;

    font-family:var(--font-heading);

    font-size:1.5rem;

    color:var(--tertiary-font-color);

}



.rispo-footer__column h3::after{

    content:"";

    display:block;

    width:45px;

    height:2px;

    margin-top:.75rem;

    background:var(--secondary-font-color);

}



.rispo-footer__column ul{

    list-style:none;

    padding:0;

    margin:0;

}



.rispo-footer__column li{

    margin-bottom:.8rem;

}



/*==================================================
                COMPANY COLUMN
==================================================*/


.rispo-footer__logo{

    display:inline-block;

    margin-bottom:1.5rem;

}



.rispo-footer__logo img{

    width:190px;

    height:auto;

}



.rispo-footer__description{

    max-width:340px;

    font-size:.95rem;

    line-height:1.8;

    color:rgba(255,255,255,.85);

}



/*==================================================
                LINKS
==================================================*/


.rispo-footer__column a{

    display:inline-flex;

    align-items:center;

    text-decoration:none;

    color:rgba(255,255,255,.85);

    font-family:var(--font-cta);

    font-size:.95rem;

    line-height:1.6;

    transition:

    color .3s ease,

    transform .3s ease;

}



.rispo-footer__column a:hover{

    color:var(--secondary-font-color);

    transform:translateX(4px);

}



/*==================================================
                SERVICES COLUMN
==================================================*/


.rispo-footer__column:nth-child(3) ul{

    display:grid;

    grid-template-columns:1fr;

}



.rispo-footer__column:nth-child(3) li{

    margin-bottom:.65rem;

}



/*==================================================
                CONTACT COLUMN
==================================================*/


.rispo-footer__column address{

    font-style:normal;

}



.rispo-footer__column address ul{

    display:flex;

    flex-direction:column;

    gap:.5rem;

}



.rispo-footer__column address a{

    gap:.8rem;
    padding-left: 15px;
    

}



.rispo-footer__column address img{

    width:20px;

    height:20px;

    object-fit:contain;



    

}




.contact-img-footer{

    width:20px;

    height:20px;

    object-fit:contain;
  

}



/*==================================================
                FOOTER BOTTOM
==================================================*/


.rispo-footer__bottom{

    border-top:1px solid rgba(255,255,255,.25);

    margin: 0 80px 0 80px;

    padding:1.8rem 15%;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:.8rem;

    color:rgba(255,255,255,.85);

    font-size:.9rem;

}



.rispo-footer__legal{

    display:flex;

    align-items:center;

    gap:.8rem;

}



.rispo-footer__bottom a{

    color:var(--tertiary-font-color);

    text-decoration:none;

    font-size:.9rem;



    font-weight:400;

    font-family: var(--font-heading);

    transition:color .3s ease;

}



.rispo-footer__bottom a:hover{

    color:var(--tertiary-font-color);

}





/*==================================================
                FOCUS STATES
==================================================*/


.rispo-footer a:focus-visible{

    outline:3px solid var(--secondary-font-color);

    outline-offset:4px;

}



/*==================================================
                TABLET
==================================================*/


@media(max-width:1100px){


    .rispo-footer__container{

        grid-template-columns:1fr 1fr;

        gap:3rem;

    }


    .rispo-footer__company{

        grid-column:span 2;

    }


}





/*==================================================
                MOBILE
==================================================*/


@media(max-width:650px){


    .rispo-footer{

        padding-top:4rem;

    }



    .rispo-footer__container{

        grid-template-columns:1fr;

        gap:2.5rem;

    }



    .rispo-footer__company{

        grid-column:auto;

    }



    .rispo-footer__description{

        max-width:100%;

    }



    .rispo-footer__legal{

        flex-direction:column;

        gap:.5rem;

       

    }



    .rispo-footer__legal span{

        display:none;

    }


}









/*  ====================================

      About Us

=======================================  *\


/*==================================================
            DIRECTOR SECTION
==================================================*/

.director{

    position:relative;

    width:100%;

    padding:clamp(90px,8vw,140px) 0;

    background:var(--primary-bg-color);

    overflow:hidden;

}


/*==================================================
                CONTAINER
==================================================*/

.director__container{

    width:min(1400px,92%);

    margin:0 auto;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:clamp(50px,6vw,90px);

}


/*==================================================
                CONTENT
==================================================*/

.director__content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


/*==================================================
                EYEBROW
==================================================*/

.director__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:14px;

    border:2px solid var(--border-tertiary-color);

    border-radius: 8px;

    padding:14px 24px;

    margin-bottom:30px;

    background:transparent;



}






/*==================================================
            EYEBROW TEXT
==================================================*/

.director__eyebrow p{

    font-family:var(--font-body);

    font-size:.9rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

    color:var(--tertiary-font-color);

}


/*==================================================
                EYEBROW ICON
==================================================*/

.director__eyebrow img{

    width:20px;

    height:20px;

    object-fit:contain;

}


/*==================================================
                    TITLE
==================================================*/

.director__title{

    margin-bottom:35px;

    font-family:var(--font-heading);

    font-size:clamp(2.8rem,5vw,5rem);

    line-height:1;

    text-transform:uppercase;

    color:var(--tertiary-font-color);

    max-width:760px;

}


/*==================================================
                PARAGRAPHS
==================================================*/

.director__paragraph{

    margin-bottom:24px;

    font-family:var(--font-body);

    font-size:1.05rem;

    line-height:2;

    color:var(--tertiary-font-color);

    max-width:760px;

}


/*==================================================
                SIGNATURE
==================================================*/

.director__signature{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:8px;

}


.director__signature strong{

    font-family:var(--font-heading);

    font-size:1.4rem;

    font-weight:600;

    color:var(--color-secondary);

    text-transform:uppercase;

}


.director__signature span{

    font-family:var(--font-cta);

    font-size:2rem;

    color:var(--tertiary-font-color);

}


.director__signature small{

    font-family:var(--font-body);

    font-size:1rem;

    color:var(--color-secondary);

}


/*==================================================
                FIGURE
==================================================*/

.director__figure{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}


/*==================================================
                IMAGE
==================================================*/

.director__image{

    width:100%;

    max-width:520px;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

    border-radius: 4px;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

/*==================================================
            IMAGE HOVER EFFECT
==================================================*/

.director__figure:hover
.director__image{

    transform:scale(1.03);

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

}


/*==================================================
        DECORATIVE FRAME
==================================================*/

.director__figure::before{

    content:"";

    position:absolute;

    top:-22px;

    left:-22px;

    width:65%;

    height:65%;

    border:2px solid var(--color-secondary);

    z-index:-1;

}


.director__figure::after{

    content:"";

    position:absolute;

    right:-22px;

    bottom:-22px;

    width:65%;

    height:65%;

    border:2px solid rgba(255,255,255,.25);

    z-index:-1;

}


/*==================================================
        IMAGE ACCESSIBILITY
==================================================*/

.director__image:focus-visible{

    outline:3px solid var(--color-secondary);

    outline-offset:8px;

}


/*==================================================
            TABLET
==================================================*/

@media (max-width:1100px){

.director{

    padding:80px 0;

}

.director__container{

    grid-template-columns:1fr;

    gap:60px;

}

.director__content{

    order:2;

}

.director__figure{

    order:1;

}

.director__title{

    font-size:clamp(2.5rem,7vw,4rem);

}

.director__paragraph{

    font-size:1rem;

    line-height:1.9;

}

.director__image{

    max-width:600px;

}

}


/*==================================================
            MOBILE
==================================================*/

@media (max-width:768px){

.director{

    padding:70px 0;

}

.director__container{

    width:92%;

    gap:45px;

}

.director__eyebrow{

    padding:12px 18px;

    gap:10px;

    flex-wrap:wrap;

}

.director__line{

    width:45px;

}

.director__eyebrow p{

    font-size:.72rem;

    letter-spacing:1.2px;

}

.director__eyebrow img{

    width:18px;

    height:18px;

}

.director__title{

    font-size:clamp(2rem,10vw,3.2rem);

}

.director__paragraph{

    font-size:.95rem;

    line-height:1.9;

}

.director__signature strong{

    font-size:1.15rem;

}

.director__signature span{

    font-size:.95rem;

}

.director__signature small{

    font-size:.82rem;

}

.director__image{

    max-width:100%;

}

.director__figure::before{

    top:-14px;

    left:-14px;

}

.director__figure::after{

    bottom:-14px;

    right:-14px;

}

}


/*==================================================
            SMALL DEVICES
==================================================*/

@media (max-width:480px){

.director{

    padding:60px 0;

}

.director__container{

    width:94%;

}

.director__eyebrow{

    justify-content:center;

    width:100%;

}

.director__line{

    display:none;

}

.director__title{

    font-size:2rem;
    

}

.director__paragraph{

    font-size:.92rem;

    line-height:1.8;

}

.director__signature strong{

    font-size:1rem;

}

.director__signature span{

    font-size:.9rem;

}

.director__signature small{

    font-size:.8rem;

}

}


/*==================================================
        REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

.director__image,
.director__figure::before,
.director__figure::after{

    transition:none !important;

    animation:none !important;

}

.director__figure:hover
.director__image{

    transform:none;

    box-shadow:none;

}

}


/*==================================================
                PRINT
==================================================*/

@media print{

.director{

    background:#ffffff !important;

    color:#000000 !important;

    padding:40px 0;

}

.director__title,
.director__paragraph,
.director__signature span{

    color:#000000 !important;

}

.director__signature strong,
.director__signature small{

    color:#000000 !important;

}

.director__eyebrow{

    border-color:#000;

}

.director__eyebrow p{

    color:#000;

}

.director__figure::before,
.director__figure::after{

    display:none;

}

.director__image{

    border:2px solid #000;

    box-shadow:none;

}

}







/*==================================================
            MISSION & VISION SECTION
==================================================*/

.mission-vision{

    position:relative;

    width:100%;

    padding:clamp(90px,8vw,140px) 0;

    background:var(--tertiary-bg-color);

    overflow:hidden;

}


/*==================================================
                CONTAINER
==================================================*/

.mission-vision__container{

    width:min(1400px,92%);

    margin:0 auto;

}


/*==================================================
                HEADER
==================================================*/

.mission-vision__header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:clamp(60px,6vw,90px);

}


/*==================================================
                EYEBROW
==================================================*/

.mission-vision__eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    border:2px solid var(--border-primary-color);

    background:transparent;

    padding:14px 26px;

    margin-bottom:28px;

    border-radius:8px;

}





/*==================================================
                EYEBROW TEXT
==================================================*/

.mission-vision__eyebrow p{

    font-family:var(--font-body);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary-font-color);

}


/*==================================================
                EYEBROW ICON
==================================================*/

.mission-vision__eyebrow img{

    width:20px;

    height:20px;

    object-fit:contain;

}


/*==================================================
                    TITLE
==================================================*/

.mission-vision__title{

    max-width:900px;

    font-family:var(--font-heading);

    font-size:clamp(2.8rem,5vw,4.8rem);

    line-height:1;

    text-transform:uppercase;

    color:var(--primary-font-color);

}


/*==================================================
                GRID
==================================================*/

.mission-vision__grid{

    display:grid;

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

    gap:40px;

    align-items:stretch;

}


/*==================================================
                BOTH CARDS
==================================================*/

.mission-card,
.vision-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:45px;

    background:var(--color-tertiary);

    border:2px solid var(--border-primary-color);

    border-radius:8px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/*==================================================
                CARD HOVER
==================================================*/

.mission-card:hover,
.vision-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    

}


/*==================================================
                    ICON
==================================================*/

.mission-card__icon,
.vision-card__icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

}


.mission-card__icon img,
.vision-card__icon img{

    width:100%;

    height:100%;

    object-fit:contain;

}


/*==================================================
                CARD TITLES
==================================================*/

.mission-card__title,
.vision-card__title{

    margin-bottom:22px;

    font-family:var(--font-heading);

    font-size:clamp(2rem,3vw,2.7rem);

    line-height:1;

    text-transform:uppercase;

    color:var(--primary-font-color);

}


/*==================================================
                CARD TEXT
==================================================*/

.mission-card__text,
.vision-card__text{

    font-family:var(--font-body);

    font-size:1rem;

    line-height:2;

    color:rgb(70,70,70);

}

/*==================================================
            FOCUS STATES
==================================================*/



.mission-card__icon img,
.vision-card__icon img{

    transition:transform .35s ease;

}


.mission-card:hover .mission-card__icon img,
.vision-card:hover .vision-card__icon img{

    transform:scale(1.08);

}


/*==================================================
        DECORATIVE TOP BORDER
==================================================*/

.mission-card::before,
.vision-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .4s ease;

}


.mission-card:hover::before,
.vision-card:hover::before{

    transform:scaleX(1);

}


/*==================================================
            TABLET
==================================================*/

@media (max-width:1024px){

.mission-vision{

    padding:80px 0;

}

.mission-vision__grid{

    gap:30px;

}

.mission-card,
.vision-card{

    padding:35px;

}

.mission-card__title,
.vision-card__title{

    font-size:2rem;

}

}


/*==================================================
                MOBILE
==================================================*/

@media (max-width:768px){

.mission-vision{

    padding:70px 0;

}

.mission-vision__header{

    margin-bottom:50px;

}

.mission-vision__eyebrow{

    padding:12px 18px;

    gap:10px;

}

.mission-vision__line{

    width:40px;

}

.mission-vision__eyebrow p{

    font-size:.75rem;

    letter-spacing:1px;

}

.mission-vision__eyebrow img{

    width:18px;

    height:18px;

}

.mission-vision__title{

    font-size:clamp(2rem,9vw,3rem);

}

.mission-vision__grid{

    grid-template-columns:1fr;

    gap:24px;

}

.mission-card,
.vision-card{

    padding:30px 24px;

}

.mission-card__icon,
.vision-card__icon{

    width:60px;

    height:60px;

    margin-bottom:22px;

}

.mission-card__title,
.vision-card__title{

    font-size:1.8rem;

}

.mission-card__text,
.vision-card__text{

    font-size:.95rem;

    line-height:1.9;

}

}


/*==================================================
            SMALL DEVICES
==================================================*/

@media (max-width:480px){

.mission-vision{

    padding:60px 0;

}

.mission-vision__container{

    width:94%;

}

.mission-vision__eyebrow{

    width:100%;

    justify-content:center;

    flex-wrap:wrap;

}

.mission-vision__line{

    display:none;

}

.mission-vision__title{

    font-size:2rem;

}

.mission-card,
.vision-card{

    padding:24px 20px;

}

.mission-card__icon,
.vision-card__icon{

    width:52px;

    height:52px;

}

.mission-card__title,
.vision-card__title{

    font-size:1.6rem;

}

.mission-card__text,
.vision-card__text{

    font-size:.92rem;

    line-height:1.8;

}

}


/*==================================================
        REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

.mission-card,
.vision-card,
.mission-card__icon img,
.vision-card__icon img{

    transition:none !important;

    animation:none !important;

}

.mission-card:hover,
.vision-card:hover{

    transform:none;

}

.mission-card::before,
.vision-card::before{

    display:none;

}

}


/*==================================================
                PRINT
==================================================*/

@media print{

.mission-vision{

    background:#ffffff !important;

    padding:40px 0;

}

.mission-card,
.vision-card{

    border:2px solid #000;

    box-shadow:none;

    break-inside:avoid;

}

.mission-vision__title,
.mission-card__title,
.vision-card__title{

    color:#000;

}

.mission-card__text,
.vision-card__text{

    color:#000;

}

.mission-vision__eyebrow{

    border-color:#000;

}

.mission-vision__eyebrow p{

    color:#000;

}

.mission-card::before,
.vision-card::before{

    display:none;

}

}










/*==================================================
                VALUES SECTION
==================================================*/

.values{

    position:relative;

    width:100%;

    padding:clamp(90px,8vw,140px) 0;

    background:var(--primary-bg-color);

    overflow:hidden;

}


/*==================================================
                CONTAINER
==================================================*/

.values__container{

    width:min(1400px,92%);

    margin:0 auto;

}


/*==================================================
                HEADER
==================================================*/

.values__header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    margin-bottom:clamp(60px,6vw,90px);

}


/*==================================================
                EYEBROW
==================================================*/

.values__eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:14px 24px;

    margin-bottom:30px;

    border:2px solid var(--border-tertiary-color);

    border-radius:8px;

    background:transparent;

}





.values__eyebrow p{

    font-family:var(--font-body);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--tertiary-font-color);

}


.values__eyebrow img{

    width:20px;

    height:20px;

    object-fit:contain;

}


/*==================================================
                TITLE
==================================================*/

.values__title{

    max-width:900px;

    margin-bottom:25px;

    font-family:var(--font-heading);

    font-size:clamp(2.8rem,5vw,4.8rem);

    line-height:1;

    text-transform:uppercase;

    color:var(--tertiary-font-color);

}


/*==================================================
                INTRO
==================================================*/

.values__intro{

    max-width:900px;

    font-family:var(--font-body);

    font-size:1.05rem;

    line-height:2;

    color:rgba(255,255,255,.92);

}


/*==================================================
                VALUES LIST
==================================================*/

.values__list{

    list-style:none;

    counter-reset:values;

}


/*==================================================
                ITEM
==================================================*/

.values__item{

    display:grid;

    grid-template-columns:140px 1fr;

    gap:40px;

    align-items:flex-start;

    padding:42px 0;

    border-top:2px solid rgba(255,255,255,.18);

    transition:
        padding-left .35s ease,
        border-color .35s ease;

}


.values__item:last-child{

    border-bottom:2px solid rgba(255,255,255,.18);

}


/*==================================================
                NUMBER
==================================================*/

.values__number{

    font-family:var(--font-heading);

    font-size:clamp(3rem,5vw,5rem);

    font-weight:700;

    line-height:1;

    color:rgba(255,255,255,.18);

    transition:
        transform .35s ease,
        color .35s ease;

}


/*==================================================
                CONTENT
==================================================*/

.values__content{

    display:flex;

    flex-direction:column;

}


/*==================================================
                VALUE TITLE
==================================================*/

.values__name{

    margin-bottom:18px;

    font-family:var(--font-heading);

    font-size:clamp(1.8rem,3vw,2.6rem);

    line-height:1.1;

    text-transform:uppercase;

    color:var(--tertiary-font-color);

    transition:letter-spacing .35s ease;

}


/*==================================================
                DESCRIPTION
==================================================*/

.values__description{

    max-width:900px;

    font-family:var(--font-body);

    font-size:1rem;

    line-height:2;

    color:rgba(255,255,255,.92);

}


/*==================================================
                HOVER
==================================================*/

.values__item:hover{

    padding-left:18px;

    border-color:rgba(255,255,255,.55);

}


.values__item:hover .values__number{

    transform:scale(1.08);

    color:rgba(255,255,255,.35);

}


.values__item:hover .values__name{

    letter-spacing:1px;

}


/*==================================================
                ACCESSIBILITY
==================================================*/

.values__item:focus-within{

    outline:3px solid var(--border-tertiary-color);

    outline-offset:8px;

}


/*==================================================
                TABLET
==================================================*/

@media (max-width:1024px){

.values__item{

    grid-template-columns:90px 1fr;

    gap:28px;

}

.values__number{

    font-size:3.5rem;

}

}


/*==================================================
                MOBILE
==================================================*/

@media (max-width:768px){

.values{

    padding:70px 0;

}

.values__header{

    margin-bottom:55px;

}

.values__eyebrow{

    padding:12px 18px;

}

.values__line{

    width:40px;

}

.values__eyebrow p{

    font-size:.75rem;

    letter-spacing:1px;

}

.values__title{

    font-size:clamp(2rem,9vw,3rem);

}

.values__intro{

    font-size:.95rem;

    line-height:1.9;

}

.values__item{

    grid-template-columns:1fr;

    gap:18px;

    padding:30px 0;

}

.values__number{

    font-size:2.8rem;

}

.values__name{

    font-size:1.8rem;

}

.values__description{

    font-size:.95rem;

}

}


/*==================================================
        REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

.values__item,
.values__number,
.values__name{

    transition:none;

}

.values__item:hover{

    padding-left:0;

}

.values__item:hover .values__number{

    transform:none;

}

}














/* ==========================================
   CONSTRUCTION SERVICE PAGE
   UNIVERSAL SERVICE PAGE STYLES
========================================== */


.construction-service-page {

    width: 100%;

    background: var(--tertiary-bg-color);

    color: var(--primary-font-color);

}







/* ==========================================
   HERO SECTION
========================================== */


.construction-service-page__hero {


    width: 100%;

    position: relative;


}



.construction-service-page__hero-image {


    width: 100%;

    height: clamp(350px, 65vh, 650px);


    margin: 0;

    position: relative;


    overflow: hidden;


}



.construction-service-page__hero-image::after {


    content: "";

    position: absolute;

    inset: 0;


    background:
    linear-gradient(
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.65)
    );


}





.construction-service-page__hero-image img {


    width: 100%;

    height: 100%;

    object-fit: cover;


}






.construction-service-page__hero-image figcaption {


    position: absolute;

    bottom: 1rem;

    left: 50%;

    transform: translateX(-50%);


    width: 90%;


    text-align: center;


    color: var(--tertiary-font-color);


    font-size: var(--font-size-small);


}







/* ==========================================
   HERO TITLE
========================================== */


.construction-service-page__hero-content {


    position: absolute;

    inset: 0;


    display: flex;

    justify-content: center;

    align-items: center;


    text-align: center;


    padding: 1rem;


}




.construction-service-page__hero-content h1 {


    margin: 0;


    max-width: 900px;


    color: var(--tertiary-font-color);


    font-family: var(--font-heading);


    font-size:
    clamp(
        2.5rem,
        7vw,
        5rem
    );


    text-transform: uppercase;


    line-height: 1.1;


}







/* ==========================================
   COMMON CONTENT WIDTH
========================================== */


.construction-service-page__introduction,
.construction-service-page__details,
.construction-service-page__process,
.construction-service-page__importance {


    width: min(100% - 2rem, 1000px);


    margin-inline: auto;


}







/* ==========================================
   INTRODUCTION
========================================== */


.construction-service-page__introduction {


    padding-block:
    clamp(3rem,6vw,5rem);


    text-align: center;


}




.construction-service-page__introduction h2 {


    margin-bottom: 1.5rem;


    font-family: var(--font-heading);


    font-size:
    clamp(
        1.8rem,
        4vw,
        2.8rem
    );


    text-transform: uppercase;


    color: var(--primary-font-color);


}





.construction-service-page__introduction p {


    max-width: 800px;


    margin:

    0 auto 1rem;


    line-height: 1.8;


    color: #333;


}








/* ==========================================
   SERVICE DETAILS
========================================== */


.construction-service-page__details {


    padding-block: 3rem;


}



.construction-service-page__details > h2 {


    text-align: center;


    margin-bottom: 3rem;


    font-family: var(--font-heading);


    text-transform: uppercase;


    color: var(--primary-font-color);


    font-size:
    clamp(
        1.8rem,
        4vw,
        2.5rem
    );



}








/* ==========================================
   INDIVIDUAL SUB SERVICES
========================================== */


.construction-service-page__detail {


    padding-block: 2rem;


    border-bottom:

    1px solid rgba(215,31,39,0.25);


}



.construction-service-page__detail:first-of-type {


    border-top:

    1px solid rgba(215,31,39,0.25);


}





.construction-service-page__detail h3 {


    margin-bottom: 0.75rem;


    font-family: var(--font-heading);


    font-size: var(--font-size-xlarge);


    color: var(--primary-font-color);


}





.construction-service-page__detail p {


    margin: 0;


    max-width: 850px;


    line-height: 1.8;


    color:#333;


}









/* ==========================================
   PROCESS SECTION
========================================== */


.construction-service-page__process {


    padding-block:4rem;


}



.construction-service-page__process h2 {


    font-family: var(--font-heading);


    color: var(--primary-font-color);


    text-transform: uppercase;


}



.construction-service-page__process ol {


    margin-top:2rem;


    padding-left:1.5rem;


}



.construction-service-page__process li {


    padding-block:.75rem;


    line-height:1.7;


    color:#333;


}







/* ==========================================
   IMPORTANCE SECTION
========================================== */


.construction-service-page__importance {


    padding-bottom:5rem;


}



.construction-service-page__importance h2 {


    font-family:var(--font-heading);


    color:var(--primary-font-color);


    text-transform:uppercase;


}



.construction-service-page__importance p {


    line-height:1.8;


    color:#333;


}








/* ==========================================
   ACCESSIBILITY
========================================== */


.construction-service-page a:focus-visible {


    outline:

    3px solid var(--border-primary-color);


    outline-offset:5px;


}









/* ==========================================
   TABLET
========================================== */


@media(max-width:768px){



.construction-service-page__hero-image {


    height:450px;


}



.construction-service-page__hero-content h1 {


    font-size:2.5rem;


}



.construction-service-page__introduction,
.construction-service-page__details,
.construction-service-page__process,
.construction-service-page__importance {


    width:
    calc(100% - 2.5rem);


}



}








/* ==========================================
   MOBILE
========================================== */


@media(max-width:480px){



.construction-service-page__hero-image {


    height:380px;


}



.construction-service-page__hero-content h1 {


    font-size:2rem;


}



.construction-service-page__detail h3 {


    font-size:1.25rem;


}



}









































/* ==========================================
   CONSTRUCTION FAQ SECTION
========================================== */


.construction-faq {

    width: 100%;
    padding: clamp(4rem, 8vw, 7rem) 1rem;

    background: var(--primary-bg-color);

    color: var(--tertiary-font-color);

    overflow: hidden;

}





/* ==========================================
   CONTAINER
========================================== */


.construction-faq__container {

    width: min(100%, 900px);

    margin-inline: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

}





/* ==========================================
   EYEBROW
========================================== */


.construction-faq__eyebrow {


    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;


    padding: 0.45rem 1rem;


    border: 2px solid var(--border-tertiary-color);

    border-radius: 8px;


    margin-bottom: 1.5rem;


}



.construction-faq__eyebrow-text {


    font-family: var(--font-cta);

    font-size: var(--font-size-small);

    text-transform: uppercase;

    letter-spacing: 0.12em;

    color: var(--tertiary-font-color);

    font-weight: 600;


}




.construction-faq__eyebrow-icon {


    width: 22px;

    height: 22px;

    object-fit: contain;


}







/* ==========================================
   HEADER
========================================== */


.construction-faq__header {


    text-align: center;

    max-width: 750px;

    margin-bottom: 3rem;


}



.construction-faq__header h1 {


    margin: 0 0 1rem;


    font-family: var(--font-heading);

    font-size: clamp(
        2rem,
        5vw,
        3rem
    );


    line-height: 1.15;

    text-transform: uppercase;


    color: var(--tertiary-font-color);


}




.construction-faq__header p {


    margin: 0 auto;


    font-size: var(--font-size-medium);

    line-height: 1.7;


    color: var(--tertiary-font-color);


    max-width: 650px;


}








/* ==========================================
   FAQ LIST
========================================== */


.construction-faq__list {


    width: 100%;


    margin: 0;

    padding: 0;


    list-style-position: inside;


}





/* ==========================================
   FAQ ITEM
========================================== */


.construction-faq__item {


    width: 100%;


    padding-block: 1rem;


    border-bottom: 1px solid rgba(255,255,255,0.45);


}




.construction-faq__item:first-child {


    border-top: 1px solid rgba(255,255,255,0.45);


}








/* ==========================================
   QUESTION BUTTON
========================================== */


.construction-faq__question {


    width: 100%;


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 1.5rem;



    background: transparent;


    border: none;


    padding: 1rem 0;


    cursor: pointer;



    color: var(--tertiary-font-color);


    text-align: left;


    font-family: var(--font-body);


    font-size: var(--font-size-medium);


    font-weight: 600;



}







.construction-faq__question span:first-child {


    flex: 1;


}








/* ==========================================
   NUMBERING STYLE
========================================== */


.construction-faq__list {


    counter-reset: faq-counter;


}



.construction-faq__item {


    counter-increment: faq-counter;


}












/* ==========================================
   PLUS / CLOSE ICON
========================================== */


.construction-faq__icon {


    display: flex;


    align-items: center;


    justify-content: center;



    width: 34px;


    height: 34px;



    border: 2px solid var(--border-tertiary-color);


    border-radius: 50%;



    font-family: var(--font-heading);


    font-size: 1.5rem;


    line-height: 1;



    flex-shrink: 0;



    transition:


    transform .35s ease,

    background .35s ease,

    color .35s ease;


}





.construction-faq__question[aria-expanded="true"] 
.construction-faq__icon {


    transform: rotate(45deg);


}








/* ==========================================
   ANSWER
========================================== */


.construction-faq__answer {


    max-width: 760px;


    padding-left: calc(45px + 1.5rem);



    overflow: hidden;



    animation: faqOpen .35s ease forwards;


}





.construction-faq__answer p {


    margin: 0;


    padding-bottom: 1rem;


    line-height: 1.8;


    font-size: var(--font-size-medium);


    color: var(--tertiary-font-color);


}







/* ==========================================
   OPEN ANIMATION
========================================== */


@keyframes faqOpen {


from {


    opacity: 0;


    transform: translateY(-8px);


}


to {


    opacity: 1;


    transform: translateY(0);


}


}









/* ==========================================
   ACCESSIBILITY
========================================== */


.construction-faq__question:focus-visible {


    outline: 3px solid var(--border-tertiary-color);


    outline-offset: 6px;


    border-radius: 4px;


}







/* ==========================================
   TABLET
========================================== */


@media(max-width:768px){


.construction-faq {


    padding-inline: 1.25rem;


}



.construction-faq__answer {


    padding-left: 0;


}



.construction-faq__question {


    gap: .75rem;


}



.construction-faq__question::before {


    min-width: 35px;


}



}









/* ==========================================
   MOBILE
========================================== */


@media(max-width:480px){



.construction-faq__header h1 {


    font-size: 2rem;


}



.construction-faq__header p {


    font-size: .95rem;


}



.construction-faq__question {


    font-size: .95rem;


}



.construction-faq__icon {


    width: 30px;


    height: 30px;


}



}