html,
body{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body.menu-open{
  overflow: hidden;
  height: 100dvh;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QTOptimum';
  src: url('../fonts/QTOptimum.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QTOptimum';
  src: url('../fonts/QTOptimum-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QTOptimum';
  src: url('../fonts/QTOptimum-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'QTOptimum';
  src: url('../fonts/QTOptimum-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root{
  --font-serif: 'QTOptimum', sans-serif; /* Headers & Big Text */
  --font-sans: 'Inter', sans-serif; /* Body & Small Font*/
  --rail-width: 92px;
  --desktop-breakpoint: 992px;
  --mobile-header-height: 55px;
  
}

body{
  font-family: var(--font-sans);
}


/* =========================
   Animations
========================= */


.reveal-up{
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
  transition: opacity 900ms ease, transform 900ms cubic-bezier(.22,.61,.36,1);
}

.reveal-up--delay{
  transition-delay: 140ms;
}

.reveal-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}

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

.site-header{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.849);
  min-height: var(--mobile-header-height);
}

.site-header__inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mobile-header-height);
  padding: 0;
}

.site-header__logo img{
  height: 40px;
  width: auto;
  display: block;
  padding: 12px 0;
}

@media (max-width: 768px){
  .site-header__logo img{
    height: 30px;
  }
}

@media (max-width: 480px){
  .site-header__logo img{
    height: 27px;
  }
}

@media (min-width: 992px){
  .site-header{
    display: none;
  }
}

/* Front page and the three service pages: the header sits in the flow as a solid black bar so
   the hero starts below it instead of being partly covered by it. Change the
   selector to .site-header to apply this everywhere. */
@media (max-width: 991px){
  body.home .site-header,
  body.page-template-page-home-remodeling .site-header,
  body.page-template-page-new-home-construction .site-header,
  body.page-template-page-build-on-your-land .site-header{
    position: relative;
    background: #000;
  }
}

/* =========================
   SHARED HAMBURGER
========================= */

.menu-toggle{
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-toggle{
  position: absolute;
  right: 15px;
  color: #fff;
  transform: translateY(-2px);
}

.burger{
  position: relative;
  display: block;
  width: 28px;
  height: 20px;
}

.burger span{
  position: absolute;
  left: 0;
  width: 28px;
  height: 2px;
  background: currentColor;
  transition: transform 240ms ease, opacity 240ms ease, top 240ms ease;
  transform-origin: center;
}

.burger span:nth-child(1){
  top: 0;
}

.burger span:nth-child(2){
  top: 9px;
}

.burger span:nth-child(3){
  top: 18px;
}

.menu-open .mobile-menu-toggle .burger span:nth-child(1),
body.desktop-menu-open .desktop-menu-toggle .burger span:nth-child(1){
  top: 9px;
  transform: rotate(45deg);
}

.menu-open .mobile-menu-toggle .burger span:nth-child(2),
body.desktop-menu-open .desktop-menu-toggle .burger span:nth-child(2){
  opacity: 0;
}

.menu-open .mobile-menu-toggle .burger span:nth-child(3),
body.desktop-menu-open .desktop-menu-toggle .burger span:nth-child(3){
  top: 9px;
  transform: rotate(-45deg);
}

@media (max-width: 768px){
  .mobile-menu-toggle{
    right: 5px;
  }
}

/* =========================
   DESKTOP LEFT RAIL
========================= */

.desktop-rail{
  display: none;
}

@media (min-width: 992px){
  .desktop-rail{
    position: fixed;
    top: 0;
    left: 0;
    width: var(--rail-width);
    height: 100vh;
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 2200;
  }

  .desktop-rail__top,
  .desktop-rail__middle,
  .desktop-rail__bottom{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .desktop-rail__top{
    padding-top: 100px;
    overflow: visible;
  }

  .desktop-rail__middle{
    flex: 1;
  }

  .desktop-rail__bottom{
    flex-direction: column;
    gap: 18px;
    padding-bottom: 24px;
  }

  .desktop-rail__logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .desktop-rail__logo img{
    width: 220px;
    height: auto;
    display: block;
    transform: rotate(-90deg);
    transform-origin: center;
  }

  .desktop-menu-toggle{
    color: #fff;
  }

  .rail-social{
    color: #fff;
    text-decoration: none;
    transition: opacity 200ms ease, transform 200ms ease;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.5px 0;
  }

  .rail-social__icon{
    width: 19px;
    height: 19px;
    display: block;
    color: currentColor;
    flex: 0 0 auto;
  }

  .rail-social:hover{
    opacity: 1;
    transform: translateY(-2px);
  }

  .rail-social__icon--phone{
    width: 22px;
    height: 22px;
  }

  .rail-social__icon--linkedin{
    width: 17px;
    height: 17px;
  }

  .rail-social__icon--pinterest{
    width: 23px;
    height: 23px;
  }

  .site-main,
  .site-footer{
    margin-left: var(--rail-width);
  }
}

/* Phone number slide out */

@media (min-width: 992px){

  .rail-phone-wrap{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: visible;
  }

  .rail-social--phone{
    position: relative;
    z-index: 3;
  }

  .rail-phone-drawer{
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    height: 52px;
    display: flex;
    align-items: center;
    background: #000;
    border-right: 0.5px solid #fff;
    padding: 0 16px 0 12px;
    white-space: nowrap;
    overflow: hidden;
    z-index: 2;
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
    transition: clip-path 520ms cubic-bezier(.22,.61,.36,1);
  }

  .rail-phone-drawer__link{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
  }

  .rail-phone-wrap:hover .rail-phone-drawer,
  .rail-phone-wrap:focus-within .rail-phone-drawer{
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }
}

/* =========================
   DESKTOP EXPANDED PANEL
========================= */

.desktop-nav-panel{
  display: none;
}

@media (min-width: 992px){
  .desktop-nav-panel{
    position: fixed;
    top: 0;
    left: var(--rail-width);
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 2100;
    display: block;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0s linear 520ms;
  }

  .desktop-nav-panel__inner{
    height: 100%;
    display: flex;
    flex-direction: row;
  }

  .desktop-nav-block{
    flex: 1;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
  }

  body.desktop-menu-open .desktop-rail{
    border-right: 0.5px solid #fff;
  }

  body.desktop-menu-open .desktop-nav-block + .desktop-nav-block{
    border-left: 0.5px solid #fff;
  }

  .desktop-nav-block__inner{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    transform: translateX(-100%);
    transition: transform 520ms cubic-bezier(.22,.61,.36,1);
    overflow: hidden;
  }

  .desktop-nav-block span{
    position: relative;
    z-index: 2;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    padding: 0 14px;
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.12em;
    font-size: clamp(16px, 1.8vw, 26px);
  }

  .desktop-nav-block__image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 240ms ease;
    z-index: 1;
  }

  .desktop-nav-block__inner::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 240ms ease;
    z-index: 1;
  }

  .desktop-nav-block:hover .desktop-nav-block__image,
  .desktop-nav-block:hover .desktop-nav-block__inner::after{
    opacity: 1;
  }

  body.desktop-menu-open .desktop-nav-panel{
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  body.desktop-menu-open .desktop-nav-block__inner{
    transform: translateX(0);
  }
}

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

.offcanvas{
  position: fixed;
  top: var(--mobile-header-height);
  right: 0;
  width: 100vw;
  height: calc(100dvh - var(--mobile-header-height));
  color: #fff;
  z-index: 1600;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s linear 520ms;
  background: transparent;
}

.menu-open .offcanvas{
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.offcanvas__top{
  display: none;
}

.offcanvas__nav{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mobile-nav-block{
  position: relative;
  flex: 1 1 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: transparent;
}

.mobile-nav-block__inner{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 24px;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 520ms cubic-bezier(.22,.61,.36,1);
  border-top: 0.5px solid #fff;
}

.mobile-nav-block__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Admin toggle fallback: no image rendered at all, so the dark overlay
   above needs something opaque underneath it instead of the image. */
.mobile-nav-block__inner--no-image{
  background: #000;
}

.mobile-nav-block:first-child .mobile-nav-block__inner{
  border-top: none;
}

.menu-open .mobile-nav-block__inner{
  clip-path: inset(0 0 0 0);
}

.mobile-nav-block__inner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.801);
  z-index: 1;
}

.mobile-nav-block__inner span{
  position: relative;
  z-index: 2;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(18px, 4vw, 28px);
}

@media (max-width: 575px){

  .mobile-nav-block__inner{
    padding: 18px 20px;
  }

  .mobile-nav-block__inner span{
    font-size: clamp(16px, 5vw, 22px);
    letter-spacing: 0.1em;
  }

}

@media (min-width: 992px){
  .offcanvas{
    display: none;
  }
}

/* =========================
   PAGE TEMPLATE
========================= */

.page-hero{
  padding-top: calc(var(--mobile-header-height) + 40px);
  padding-bottom: 40px;
  text-align: center;
}

@media (min-width: 992px){
  .page-hero{
    padding-top: 50px;
  }
}

.page-title{
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: 0.05em;
  margin: 0;
}

.page-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.page-content p{
  line-height: 1.7;
  margin-bottom: 1.2em;
}

.page-content h2,
.page-content h3{
  font-family: var(--font-serif);
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

/* =========================
   Shared CTA
========================= */

.home-cta{
  position: relative;
  background: #000;
  color: #fff;
  overflow: hidden;
  border-bottom: 2px solid #fff;
}

.home-cta__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.20;
  transform: scale(1.03);
  z-index: 0;
}

.home-cta::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 0;
}

.home-cta__inner{
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 88px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 40px;
  align-items: center;
}

.home-cta__content{
  max-width: 760px;
}

.home-cta__eyebrow{
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
}

.home-cta__title{
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.04;
  color: #fff;
}

.home-cta__text{
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.82);
  max-width: 680px;
}

.home-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
  align-items: center;
}

.home-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 205px;
  min-height: 54px;
  padding: 14px 24px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  box-sizing: border-box;
  transition:
    transform 220ms ease,
    background 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}

.home-cta__btn:hover{
  transform: translateY(-2px);
}

.home-cta__btn--primary{
  background: #fff;
  color: #000;
  border: 1.5px solid #fff;
}

.home-cta__btn--primary:hover{
  background: transparent;
  color: #fff;
}

.home-cta__btn--secondary{
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.85);
}

.home-cta__btn--secondary:hover{
  background: #fff;
  color: #000;
  border-color: #fff;
}

@media (max-width: 991px){

  .home-cta__inner{
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 72px 22px;
  }

  .home-cta__actions{
    justify-content: flex-start;
  }

}

@media (max-width: 640px){

  .home-cta__inner{
    padding: 56px 18px;
  }

  .home-cta__title{
    font-size: clamp(26px, 8vw, 34px);
  }

  .home-cta__text{
    font-size: 15px;
    line-height: 1.68;
  }

  .home-cta__actions{
    flex-direction: column;
    align-items: stretch;
  }

  .home-cta__btn{
    width: 100%;
    min-width: 0;
  }

}

/* =========================
   COMPACT CTA (under hero)
========================= */

.hero-cta{
  position: relative;
  background: #000;
  color: #fff;
  overflow: hidden;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

/* Only used when an 'image' arg is passed to the template part. Lighter than
   the main CTA on purpose: this band is short, so a photo needs more presence
   to read as texture rather than flat black. */
.hero-cta__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
  transform: scale(1.03);
  z-index: 0;
}

.hero-cta--has-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}

.hero-cta__inner{
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 26px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}

.hero-cta__title{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.08;
  color: #fff;
}

.hero-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}

.hero-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 48px;
  padding: 12px 22px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.2;
  box-sizing: border-box;
  transition:
    transform 220ms ease,
    background 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}

.hero-cta__btn:hover{
  transform: translateY(-2px);
}

.hero-cta__btn--primary{
  background: #fff;
  color: #000;
  border: 1.5px solid #fff;
}

.hero-cta__btn--primary:hover{
  background: transparent;
  color: #fff;
}

.hero-cta__btn--secondary{
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.85);
}

.hero-cta__btn--secondary:hover{
  background: #fff;
  color: #000;
  border-color: #fff;
}

.hero-cta__btn-icon{
  width: 15px;
  height: 15px;
  margin-right: 9px;
  color: currentColor;
  flex: 0 0 auto;
}

/* The desktop rail already has a click to call button */
@media (min-width: 992px){

  .hero-cta__btn--call{
    display: none;
  }

}

@media (max-width: 991px){

  .hero-cta__inner{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 36px 22px;
  }

  .hero-cta__actions{
    justify-content: flex-start;
  }

}

@media (max-width: 640px){

  .hero-cta__inner{
    padding: 30px 18px;
    text-align: center;
  }

  .hero-cta__title{
    font-size: clamp(22px, 6.6vw, 28px);
  }

  .hero-cta__actions{
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
  }

  .hero-cta__btn{
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 14px;
    letter-spacing: 0.08em;
  }

}

@media (max-width: 380px){

  .hero-cta__btn{
    padding: 12px 10px;
    font-size: 11px;
  }

  .hero-cta__btn-icon{
    margin-right: 7px;
  }

}

.cta-call-mobile{
  display: none;
}

@media (max-width: 767px){

  .cta-call-desktop{
    display: none;
  }

  .cta-call-mobile{
    display: inline;
  }

}

/* =========================
   FOOTER BASE + BACKGROUND
========================= */

.site-footer{
  position: relative;
  background: #000;
  color: #fff;
  overflow: hidden;
}

.site-footer__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

.site-footer::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.33);
  z-index: 0;
}

.footer-main{
  position: relative;
  z-index: 1;
}

/* =========================
   MAIN FOOTER
========================= */

.footer-main__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 35px 24px 24px;
}

.footer-brand-top{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 35px;
}

.footer-brand-top__logo{
  display: block;
  width: 230px;
  max-width: 100%;
  height: auto;
  opacity: 0.96;
}

.footer-main__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.footer-col{
  min-width: 0;
}

.footer-col__toggle{
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: default;
}

.footer-col__toggle-inner{
  display: block;
}

.footer-col__title{
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.footer-col__chevron{
  display: none;
}

.footer-col__content{
  display: block;
}

.footer-col__content-inner{
  overflow: visible;
}

.footer-col__nav,
.footer-col__contact{
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footer-col__nav a{
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  transition: opacity 200ms ease;
}

.footer-col__nav a:hover{
  opacity: 0.72;
}

.footer-contact-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  transition: opacity 200ms ease;
}

.footer-contact-item:hover{
  opacity: 0.72;
}

.footer-icon{
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.72);
  transform: translateY(4px);
}

.footer-icon path{
  stroke: currentColor;
  fill: currentColor;
}

.footer-social__icon{
  width: 16px;
  height: 16px;
  color: #fff;
}

.footer-social__icon path{
  stroke: currentColor;
  fill: currentColor;
}

.footer-newsletter__icon{
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.8);
}

.footer-newsletter__icon path{
  stroke: currentColor;
  fill: currentColor;
}

.footer-contact-item span{
  display: block;
}

.footer-contact-item--static{
  cursor: default;
}

.footer-contact-item--static:hover{
  opacity: 1;
}

/* =========================
   UTILITY ROW
========================= */

.footer-utility{
  width: 100%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
}

.footer-socials{
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-social{
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.footer-social:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.55);
}

.footer-social__icon--pinterest{
  width: 23px;
  height: 23px;
}

.footer-inline-newsletter{
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  justify-content: flex-end;
  margin-left: auto;
}

.footer-inline-newsletter__label{
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  white-space: nowrap;
}



/* =========================
   FOOTER NEWSLETTER (321 Leads native form)
========================= */

.footer-newsletter{
  width:100%;
}

/* Breathing room when the page lands on #newsletter after a submission */
#newsletter{
  scroll-margin-top:24px;
}

.footer-newsletter__form{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
}

.footer-newsletter__field{
  position:relative;
  min-width:0;
  min-height:44px;
  padding:0 14px;
  margin:0;
  border:1.5px solid rgba(255,255,255,0.36);
  background:rgba(255,255,255,0.04);
  box-sizing:border-box;
  display:flex;
  align-items:center;
}

/* Hidden visually, still read by screen readers */
.footer-newsletter__label{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.footer-newsletter input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.2;
  padding:0 0 0 28px;
  margin:0;
  box-shadow:none;
  border-radius:0;
}

.footer-newsletter input::placeholder{
  color:rgba(255,255,255,0.56);
  opacity:1;
}

/* Email icon */
.footer-newsletter .footer-newsletter-email::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.8);
  pointer-events:none;
  z-index:2;

  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;

  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;

  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L8.44992 11.6333C9.73295 12.4886 10.3745 12.9163 11.0678 13.0825C11.6806 13.2293 12.3194 13.2293 12.9322 13.0825C13.6255 12.9163 14.2671 12.4886 15.5501 11.6333L21 8M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");

  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L8.44992 11.6333C9.73295 12.4886 10.3745 12.9163 11.0678 13.0825C11.6806 13.2293 12.3194 13.2293 12.9322 13.0825C13.6255 12.9163 14.2671 12.4886 15.5501 11.6333L21 8M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.footer-newsletter button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:148px;
  min-height:44px;
  padding:0 18px;
  border:1.6px solid #fff;
  box-sizing: border-box;
  background:#fff;
  color:#000;
  font-family:var(--font-sans);
  font-weight:400;
  font-size:11px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 220ms ease, color 220ms ease, transform 220ms ease;
  border-radius:0;
}

.footer-newsletter button[type="submit"]:hover{
  background:transparent;
  color:#fff;
  transform:translateY(-2px);
}

/* Success and validation notices, output by the plugin */
.footer-newsletter .leads-form-success,
.footer-newsletter .leads-form-errors{
  margin:0 0 12px;
  font-family:var(--font-sans);
  font-size:13px;
  line-height:1.6;
}

.footer-newsletter .leads-form-success p,
.footer-newsletter .leads-form-errors p{
  margin:0;
  color:rgba(255,255,255,0.8);
}

.footer-newsletter .leads-form-errors p{
  color:#f0a5a5;
}

@media (max-width:640px){

  .footer-newsletter__form{
    grid-template-columns:1fr;
    gap:10px;
  }

  .footer-newsletter__field{
    min-height:46px;
  }

  .footer-newsletter button[type="submit"]{
    width:100%;
    min-width:0;
    min-height:46px;
    padding:13px 18px;
  }

}

.footer-newsletter input[type="email"]{
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.2;
  color:#fff;
  background:transparent;
  caret-color:#fff;
}

.footer-newsletter input[type="email"]::selection{
  background:rgba(255,255,255,.22);
  color:#fff;
}

.footer-newsletter input[type="email"]:-webkit-autofill,
.footer-newsletter input[type="email"]:-webkit-autofill:hover,
.footer-newsletter input[type="email"]:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 9999s ease-in-out 0s;
}

/* =========================
   DIVIDER / LEGAL / BOTTOM
========================= */

.footer-divider{
  width: 100%;
  height: 1px;
  margin: 28px 0 20px;
  background: rgba(255,255,255,0.14);
}

.footer-legal{
  display: flex;
  justify-content: center;
}

.footer-legal__nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.footer-legal__nav a{
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}

.footer-legal__nav a:hover{
  opacity: 0.72;
}

.footer-bottom{
  margin-top: 18px;
  text-align: center;
}

.footer-bottom p{
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.5);
}

.footer-bottom__license{
  margin-top: 6px;
  letter-spacing: 0.04em;
}

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

@media (max-width: 991px){

  .footer-main__inner{
    padding: 34px 22px 22px;
  }

  .footer-main__grid{
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-col{
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }

  .footer-col:last-child{
    border-bottom: 0;
  }

  .footer-col__toggle{
    cursor: pointer;
  }

  .footer-col__toggle-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0;
  }

  .footer-col__title{
    margin: 0;
  }

  .footer-col__chevron{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: rgba(255,255,255,0.78);
    transition: transform 220ms ease;
  }

  .footer-col.is-open .footer-col__chevron{
    transform: rotate(180deg);
  }

  .footer-col__content{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 260ms ease;
  }

  .footer-col__content-inner{
    overflow: hidden;
  }

  .footer-col.is-open .footer-col__content{
    grid-template-rows: 1fr;
  }

  .footer-col__nav,
  .footer-col__contact{
    padding: 0 0 18px;
  }

  .footer-utility{
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-top: 30px;
  }

  .footer-socials{
    justify-content: center;
  }

  .footer-inline-newsletter{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .footer-inline-newsletter__label{
    text-align: center;
  }

}

@media (max-width: 640px){

  .footer-main__inner{
    padding: 30px 18px 20px;
  }

  .footer-socials{
    gap: 14px;
  }

  .footer-legal__nav{
    gap: 14px 18px;
  }
}