/* ========================================================================
   FCLA RESPONSIVE STYLES
   Load this file AFTER style.css.

   Existing HTML, CSS and JavaScript are not changed by this file.
   ======================================================================== */


/* ------------------------------------------------------------------------
   GENERAL SAFETY
   ------------------------------------------------------------------------ */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
}

picture,
iframe {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
p,
a {

}

#why-fcla {
  scroll-margin-top: 110px;
}


/* ------------------------------------------------------------------------
   MOBILE NAVIGATION TOGGLE
   Keep the primary menu closed until the hamburger is activated.
   ------------------------------------------------------------------------ */

@media (max-width: 991px) {

  .primary-menu {
    width: 100%;
  }

  body:not(.is-expanded-menu) .primary-menu > .menu-container {
    display: none !important;
  }

  body:not(.is-expanded-menu) .primary-menu > .menu-container.d-block {
    display: block !important;
  }

  body.is-expanded-menu .primary-menu > .menu-container {
    display: block !important;
  }

  .primary-menu > .menu-container {
    width: 100%;
    max-height: calc(100svh - 88px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .primary-menu .sub-menu-container {
    position: static;
    width: 100%;
    max-width: none;
  }

  .sectionScroll {
    height: auto !important;
    min-height: 0 !important;
  }

  .panel {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

}


/* ------------------------------------------------------------------------
   SMALLER DESKTOPS: 1280px–1439px
   ------------------------------------------------------------------------ */

@media (min-width: 1280px) and (max-width: 1439px) {

  #header .container {
    max-width: calc(100% - 50px);
  }

  #logo img {
    max-width: 170px;
  }

  .menu-container > .menu-item > .menu-link {
    --cnvs-primary-menu-padding-x: 4px;
    font-size: 16px;
  }

  h1 {
    font-size: clamp(44px, 3.6vw, 52px);
    line-height: 1.07;
  }

  h2,
  .bgGreen h2,
  .bgLOrange h2,
  .bgTurquise h2 {
    font-size: clamp(44px, 3.6vw, 52px);
    line-height: 1.07;
  }

  .fcla-alt-hero-copy h1 {
    font-size: clamp(62px, 5.2vw, 72px);
  }

  .col-pad {
    padding: 100px 6vw;
  }

  .col-padNT {
    padding: 0 6vw 100px;
  }

  .col-padNTB {
    padding: 25px 6vw 0;
  }

  .col-padding {
    padding: 70px 45px;
  }

  .col-padding-sm {
    padding: 45px 55px;
  }

  .lpadding {
    padding-left: 55px;
  }

  .rpadding {
    padding-right: 55px;
  }

  .service-card-row {
    gap: 40px;
  }

  .person {
    height: 520px;
  }
/*
  .profile-shape-content-bgOrange,
  .profile-shape-content-bgGreen,
  .profile-shape-content-bgLOrange,
  .profile-shape-content-bgTurquise {
    min-height: 620px;
    padding: 60px 75px;
  }

  .shape-content-inner h2 {
    font-size: 52px;
    margin-bottom: 45px;
  }
*/
}


/* ------------------------------------------------------------------------
   SMALL LAPTOPS: 1024px–1279px
   ------------------------------------------------------------------------ */

@media (min-width: 1024px) and (max-width: 1279px) {

  #header .container {
    max-width: calc(100% - 34px);
  }

  #logo {
    margin-right: 18px;
  }

  #logo img {
    max-width: 145px;
  }

  .menu-container > .menu-item > .menu-link {
    --cnvs-primary-menu-padding-x: 3px;
    --cnvs-primary-menu-padding-y: 12px;
    font-size: 14px;
    letter-spacing: 0;
  }

  .sub-menu-container {
    max-width: 320px;
  }

  h1 {
    font-size: clamp(46px, 4.8vw, 58px);
    line-height: 0.98;
  }

  h2,
  .bgGreen h2,
  .bgLOrange h2,
  .bgTurquise h2 {
    font-size: clamp(38px, 4vw, 50px);
    line-height: 1.06;
  }

  .col-pad {
    padding: 80px 5vw;
  }

  .col-padNT {
    padding: 0 5vw 80px;
  }

  .col-padNTB {
    padding: 20px 5vw 0;
  }

  .col-padLR {
    padding: 45px 55px;
  }

  .col-padding {
    padding: 55px 38px;
  }

  .col-padding-sm {
    padding: 42px 45px;
  }

  .toppadding-xlg {
    padding-top: 70px;
  }

  .bottompadding-xlg {
    padding-bottom: 70px;
  }

  .toppadding-lg {
    padding-top: 75px;
  }

  .bottompadding-lg {
    padding-bottom: 75px;
  }

  .lpadding {
    padding-left: 40px;
  }

  .rpadding {
    padding-right: 40px;
  }

  .service-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px;
  }

  .service-card,
  .service-card-m,
  .service-card-l {
    min-height: 330px;
  }

  .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px 20px;
  }

  .person {
    height: 560px;
  }

  .personProfile {
    height: 75vh;
    min-height: 650px;
  }

  .profile-shape-content-bgOrange,
  .profile-shape-content-bgGreen,
  .profile-shape-content-bgLOrange,
  .profile-shape-content-bgTurquise {
    min-height: 600px;
    padding: 55px 60px;
  }

  .shape-content-inner h2 {
    font-size: 48px;
    margin-bottom: 40px;
  }

  .feature-photo {
    height: 680px;
  }

  .fcla-alt-hero-copy {
    width: min(700px, 70%);
  }

  .fcla-alt-hero-copy h1 {
    font-size: clamp(50px, 6vw, 70px);
  }

  .panel .col-padding {
    padding: 55px 48px;
  }

  .equal-height-shapes > .col-md-6 {
    display: flex;
  }

  .equal-height-shapes > .col-md-6 > div {
    width: 100%;
    height: 100%;
  }

  .bg4 {
    height: 62vh;
    min-height: 500px;
  }

}


/* ------------------------------------------------------------------------
   TABLETS: 768px–1023px
   ------------------------------------------------------------------------ */

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

  #header-wrap .container {
    max-width: calc(100% - 48px);
  }

  #logo img {
    max-width: 155px;
  }

  .content-wrap .row > [class*="col-md-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  h1, 
    .bgLGrey h1 {
    font-size: clamp(50px, 7vw, 66px);
    line-height: 1;
  }

  h2,
  .bgGreen h2,
  .bgLOrange h2,
  .bgTurquise h2,
    .bgLGrey h2 {
    font-size: clamp(42px, 6vw, 56px);
    line-height: 1;
  }

  .bgGreen h3,
  .bgLOrange h3,
  .bgTurquise h3 {
    font-size: 32px;
  }

  .w-65 {
    width: 100% !important;
    max-width: 100%;
  }

  .col-pad {
    padding: 25px 45px 70px;
  }

  .col-padNT {
    padding: 0 45px 70px;
  }

  .col-padNTB {
    padding: 20px 45px 0;
  }

  .col-padLR {
    padding: 40px 45px;
  }

  .col-padding {
    padding: 55px 45px;
  }

  .col-padding-sm {
    padding: 45px;
  }

  .toppadding-xlg {
    padding-top: 90px;
  }

  .bottompadding-xlg {
    padding-bottom: 90px;
  }

  .toppadding-lg {
    padding-top: 65px;
  }

  .bottompadding-lg {
    padding-bottom: 65px;
  }

  .lpadding {
    padding-left: 35px;
  }

  .rpadding {
    padding-right: 35px;
  }

  .service-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .service-card,
  .service-card-m,
  .service-card-l {
    min-height: 330px;
    padding: 45px 36px 55px;
  }

  .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px 18px;
    overflow: visible;
  }

  .person {
    height: 520px;
  }

  .personProfile {
    height: 70vh;
    min-height: 600px;
    max-height: 760px;
  }

  .people-grid-profile + .col-md-6,
  .personProfile + .col-md-6 {
    margin-top: 45px;
  }

  .profile-shape-content-bgOrange,
  .profile-shape-content-bgGreen,
  .profile-shape-content-bgLOrange,
  .profile-shape-content-bgTurquise {
    min-height: 0;
    margin-bottom: 35px;
    padding: 75px 70px;
  }

  .equal-height-shapes > .col-md-6 {
    display: block;
  }

  .equal-height-shapes > .col-md-6 > div {
    height: auto;
  }

  .profile-shape-content-inner h2 {
    font-size: 52px;
  }

  .shape-content-inner h2 {
    font-size: 48px;
    margin-bottom: 42px;
  }

  .feature-photo {
    height: 620px;
    margin-top: 45px;
  }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .fcla-alt-hero {
    height: calc(100vh - 80px);
    min-height: 680px;
  }

  .fcla-alt-hero-copy {
    top: auto;
    right: 40px;
    bottom: 115px;
    width: min(620px, 78%);
    transform: none;
  }

  .fcla-alt-hero-copy h1 {
    font-size: clamp(58px, 9vw, 80px);
  }

  .fcla-alt-hero-top-shape {
    height: 33%;
  }

  .fcla-alt-hero-side-shape {
    width: 17%;
  }

  .fcla-alt-hero-bottom-shape {
    width: 78%;
  }

  .fcla-full-video {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .fcla-full-video-2 {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .sectionScroll {
    height: auto;
  }

  .panel {
    position: relative;
    top: auto;
    height: auto;
    grid-template-columns: 1fr;
  }

  .panel .image {
    min-height: 480px;
  }

  .panel .text {
    min-height: 0;
  }

  .panel .row {
    width: 100%;
    margin: 0;
  }

  .grid-container .portfolio-item,
  #portfolio .portfolio-item {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }

  #footer .row > [class*="col-md-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  #footer h3 {
    margin-top: 25px;
  }

  .bg4 {
    height: 52vh;
    min-height: 420px;
  }

}


/* ------------------------------------------------------------------------
   MOBILE: up to 767px
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {

  #header-wrap .container {
    max-width: calc(100% - 30px);
  }

  #logo img {
    max-width: 132px; padding-top: 0px; padding-bottom: 0px
  }

  .primary-menu .menu-container {
    padding: 12px 0 20px;
  }

  .primary-menu > .menu-container {
    max-height: calc(100svh - 74px);
  }

  .primary-menu .menu-item {
    width: 100%;
  }

  .primary-menu .menu-link {
    white-space: normal;
  }

  .primary-menu .sub-menu-container .menu-link {
    padding-left: 0px;
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .content-wrap .row > [class*="col-md-"],
  #footer .row > [class*="col-md-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  h1,
    .bgLGrey h1 {
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.1;
    
  }

  h2,
  .bgGreen h2,
  .bgLOrange h2,
  .bgTurquise h2, 
    .bgLGrey h2 {
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1;
  }

  h3,
  .bgGreen h3,
  .bgLOrange h3,
  .bgTurquise h3,
	.bgLGrey h3 {
    font-size: clamp(22px, 7vw, 26px);
    line-height: 1;
      margin-bottom: 15px;
  }

  p,
  .lgF {
    font-size: 17px;
    line-height: 1.6;
  }

  .w-65 {
    width: 100% !important;
    max-width: 100%;
  }

  .col-pad {
    padding: 55px 24px;
  }

  .col-padNT {
    padding: 0 24px 55px;
  }

  .col-padNTB {
    padding: 16px 24px 0;
  }

  .col-padLR {
    padding: 35px 28px;
  }

  .col-padding {
    padding: 42px 28px 55px;
  }

  .col-padding-sm {
    padding: 40px 25px;
  }

  .toppadding-xlg {
    padding-top: 70px;
  }

  .bottompadding-xlg {
    padding-bottom: 70px;
  }

  .toppadding-lg {
    padding-top: 50px;
  }

  .bottompadding-lg {
    padding-bottom: 50px;
  }

  .toppadding {
    padding-top: 25px;
  }

  .bottompadding {
    padding-bottom: 25px;
  }

  .lpadding {
    padding-left: 20px;
  }

  .rpadding {
    padding-right: 20px;
  }

  .service-card-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .service-card,
  .service-card-m,
  .service-card-l {
    min-height: 0;
    padding: 50px 65px;
  }

  .people-grid {
    grid-template-columns: 1fr;
    gap: 45px;
    overflow: visible;
  }

  .people-grid h3,
  .people-grid p {
    margin-right: 12px;
  }

  .person {
    height: min(135vw, 610px);
  }

  .people-grid-profile {
    grid-template-columns: 1fr;
  }

  .personProfile {
    height: 68vh;
    min-height: 500px;
    max-height: 680px;
  }

  .profile-shape-content-bgOrange,
  .profile-shape-content-bgGreen,
  .profile-shape-content-bgLOrange,
  .profile-shape-content-bgTurquise {
    min-height: 0;
    margin-bottom: 0px;
    padding: 65px 42px;

    clip-path: polygon(
      7% 0,
      100% 0,
      93% 100%,
      0 100%
    );
  }

  .profile-shape-content-inner h2 {
    font-size: clamp(24px, 7vw, 30px); margin-bottom: 0px;
  }

  .profile-shape-content-inner p {
    font-size: 17px;
  }

  .shape-content-inner h2 {
   font-size: clamp(24px, 7vw, 30px);
    margin-bottom: 30px;
    text-transform: uppercase;
  }

  .shape-content-inner h3 {
    font-size: 27px;
  }

  .shape-content-inner p {
    font-size: 16px;
  }

  .equal-height-shapes > .col-md-6 {
    display: block;
  }

  .equal-height-shapes > .col-md-6 > div {
    height: auto;
  }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .feature-photo {
    height: 520px;
    margin-top: 35px;

    clip-path: polygon(
      8% 0,
      100% 0,
      92% 100%,
      0 100%
    );
  }

  .feature-photo blockquote {
    right: 28px;
    bottom: 6%;
    width: 72%;
    font-size: 1.55rem;
  }

  .fcla-alt-hero {
    height: calc(100svh - 70px);
    min-height: 620px;
    margin-top: 0 !important;
    background-position: center;
  }

  .fcla-alt-hero-copy {
    top: auto;
    right: 22px;
    bottom: 100px;
    width: calc(100% - 44px);
    transform: none;
  }

  .fcla-alt-hero-copy h1 {
    font-size: clamp(46px, 14vw, 64px);
    line-height: 0.91;
  }

  .fcla-alt-hero-copy p {
    max-width: 100%;
    font-size: 16px;
  }

  .fcla-alt-hero-top-shape {
    height: 25%;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 85%,
      76% 8%,
      0 100%
    );
  }

  .fcla-alt-hero-side-shape {
    width: 22%;
    height: 17%;
  }

  .fcla-alt-hero-bottom-shape {
    left: 8%;
    width: 90%;
    height: 10%;
  }

  .fcla-alt-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .fcla-alt-primary-button,
  .fcla-alt-outline-button,
  .fcla-LGreen-button,
  .fcla-LGreen-outline-button,
  .fcla-LOrange-button,
  .fcla-LOrange-outline-button {
    width: 100%;
  }

  .fcla-full-video,
  .fcla-full-video-2 {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .fcla-full-video video,
  .fcla-full-video-2 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fcla-full-video video[controls],
  .fcla-full-video-2 video[controls] {
    object-fit: contain;
    background: #000;
  }

  .fcla-video-play-button {
    width: 70px;
    height: 70px;
  }

  .sectionScroll {
    height: auto;
  }

  .panel {
    position: relative;
    top: auto;
    height: auto;
    grid-template-columns: 1fr;
  }

  .panel .image {
    height: 65vw;
    min-height: 300px;
    max-height: 480px;
  }

  .panel .text {
    min-height: 0;
  }

  .panel .row {
    width: 100%;
    margin: 0;
  }

  .result-grid > div,
  .result-grid strong {
    padding-right: 0;
    padding-left: 0;
  }

  .grid-container .portfolio-item,
  #portfolio .portfolio-item {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-bottom: 28px;
  }

  #footer {
    text-align: center;
  }

  #footer .container-fluid {
    padding-right: 24px;
    padding-left: 24px;
  }

  #footer h3 {
    margin-top: 28px;
    font-size: 28px;
    line-height: 1.05;
  }

  .bg4 {
    height: 46vh;
    min-height: 330px;
  }

  .form-control {
    width: 100%;
  }

  textarea.form-control {
    min-height: 150px;
  }

}


/* ------------------------------------------------------------------------
   SMALL MOBILES: up to 480px
   ------------------------------------------------------------------------ */

@media (max-width: 480px) {

  #header-wrap .container {
   max-width: calc(100% - 0px);
  }

  #logo img {
    max-width: 115px;
  }

  h1, .bgLGrey h1 {
    font-size: clamp(24px, 7vw, 30px); margin-bottom: 0px;
  }

  
    
  h2,
  .bgGreen h2,
  .bgLOrange h2,
  .bgTurquise h2,
    .bgLGrey h2 {
    font-size: clamp(24px, 7vw, 30px); margin-bottom: 0px;
  }

  .col-pad {
    padding: 25px 0px 45px;
  }

  .col-padNT {
    padding: 0 0 45px;
  }

  .col-padNTB {
    padding: 14px 18px 0;
  }

  .col-padLR {
    padding: 30px 22px;
  }

  .col-padding {
    padding: 38px 24px 52px;
  }

  .col-padding-sm {
    padding: 35px 20px;
  }

  .toppadding-xlg {
    padding-top: 55px;
  }

  .bottompadding-xlg {
    padding-bottom: 55px;
  }

  .lpadding {
    padding-left: 30px;
  }

  .rpadding {
    padding-right: 30px;
  }

  .service-card,
  .service-card-m,
  .service-card-l {
    padding: 50px 45px ;
  }

  .person {
    height: 125vw;
    max-height: 545px;
  }

  .personProfile {
    height: 62vh;
    min-height: 450px;
  }

  .profile-shape-content-bgOrange,
  .profile-shape-content-bgGreen,
  .profile-shape-content-bgLOrange,
  .profile-shape-content-bgTurquise {
    padding: 55px 30px;

    clip-path: polygon(
      5% 0,
      100% 0,
      95% 100%,
      0 100%
    );
	 
  }

  .shape-content-inner h2 {
    margin-bottom: 32px;
  }

  .feature-photo {
    height: 440px;
  }

  .feature-photo blockquote {
    right: 22px;
    width: 76%;
    font-size: 1.35rem;
  }

  .fcla-alt-hero {
    min-height: 580px;
  }

 /* .fcla-alt-hero-copy {
    right: 0px;
    bottom: 82px;
    width: calc(100% - 36px);
  }*/
	

  .fcla-alt-hero-copy h1 {
    font-size: clamp(42px, 13vw, 56px);
  }

  .fcla-alt-hero-copy {
    max-width: calc(100% - 36px);
  }

  .panel .image {
    min-height: 260px;
  }

  .linksS1 a,
  .linksS2 a,
  .linksS3 a {
    font-size: 14px;
  }

  .bg4 {
    height: 42vh;
    min-height: 280px;
  }

}


/* ------------------------------------------------------------------------
   SHORT LANDSCAPE SCREENS
   ------------------------------------------------------------------------ */

@media (max-height: 600px) and (orientation: landscape) {

  .fcla-alt-hero {
    height: auto;
    min-height: 560px;
  }

  .fcla-alt-hero-copy {
    top: auto;
    bottom: 70px;
    transform: none;
  }

  .personProfile {
    height: auto;
    min-height: 560px;
  }

  .fcla-full-video {
    height: auto;
    aspect-ratio: 16 / 9;
  }

}


/* ------------------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------------------ */

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}


/* Small desktop */
@media (min-width: 1024px) and (max-width: 1279px) {
  .fcla-alt-hero-copy {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(760px, 75%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .fcla-alt-hero-actions {
    justify-content: center;
  }
}


/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .fcla-alt-hero-copy {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(680px, 82%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .fcla-alt-hero-actions {
    justify-content: center;
  }
}


/* Mobile */
@media (max-width: 767px) {
  .fcla-alt-hero-copy {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: calc(100% - 40px);
    max-width: none;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .fcla-alt-hero-actions {
    align-items: center;
    justify-content: center;
  }
}
/* =========================================================
   TEAM PHOTOGRAPH — RESPONSIVE
   ========================================================= */

/* Tablet and mobile */
@media (max-width: 1023px) {

  .team-photo {
    min-height: 0;
  }

  .team-photo picture {
    display: block;
    width: 100%;
    height: auto;
  }

  .team-photo img {
    position: static;
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
    object-position: center;
  }

}