/* =========================================================
   RJ PAINTING & REMODELING SERVICES
   GALLERY.HTML
   03. GALLERY HERO
   ========================================================= */


/* =========================================================
   01. HERO
   ========================================================= */

.rj-gallery-hero {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 47%)
    minmax(0, 53%);

  width: 100%;

  height:
    min(
      clamp(
        440px,
        42vw,
        560px
      ),
      var(--rj-first-screen-height)
    );

  min-height: 430px;

  overflow: hidden;

  isolation: isolate;

  background:
    var(--rj-white);
}


/* =========================================================
   02. CONTENT
   ========================================================= */

.rj-gallery-hero__content {
  position: relative;

  z-index: 4;

  display: flex;

  align-items: center;

  min-width: 0;

  background:
    radial-gradient(
      circle at 14% 18%,
      rgba(36, 91, 155, 0.055),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 90%,
      rgba(162, 163, 167, 0.08),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #FBFBFA 0%,
      #F8F8F7 52%,
      #F1F3F4 100%
    );
}


.rj-gallery-hero__content::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.2;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.065'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    multiply;
}


/* =========================================================
   03. INNER
   ========================================================= */

.rj-gallery-hero__inner {
  position: relative;

  z-index: 2;

  width:
    min(
      100%,
      700px
    );

  margin-left:
    max(
      var(--rj-gutter),
      calc(
        (100vw - var(--rj-container)) / 2 +
        var(--rj-gutter)
      )
    );

  padding:
    30px
    clamp(
      55px,
      5vw,
      90px
    )
    30px
    0;
}


/* =========================================================
   04. BREADCRUMB
   ========================================================= */

.rj-gallery-hero__breadcrumb {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 18px;

  font-size: 0.8rem;
  font-weight: 600;

  color:
    var(--rj-text-soft);
}


.rj-gallery-hero__breadcrumb a {
  color:
    var(--rj-navy);

  transition:
    color
    var(--rj-normal)
    var(--rj-ease);
}


.rj-gallery-hero__breadcrumb a:hover {
  color:
    var(--rj-blue);
}


.rj-gallery-hero__breadcrumb > span:nth-child(2) {
  color:
    var(--rj-silver);
}


/* =========================================================
   05. KICKER
   ========================================================= */

.rj-gallery-hero__kicker {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 14px;

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color:
    var(--rj-steel-blue);
}


.rj-gallery-hero__kicker > span {
  width: 27px;
  height: 1px;

  background:
    var(--rj-navy);
}


/* =========================================================
   06. TITLE
   ========================================================= */

.rj-gallery-hero__title {
  max-width: 660px;

  margin:
    0
    0
    19px;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(
      3.4rem,
      5.2vw,
      5.7rem
    );

  font-weight: 400;

  line-height: 0.93;

  letter-spacing: -0.04em;

  color:
    var(--rj-navy-deep);
}


.rj-gallery-hero__title span {
  display: block;

  color:
    #596675;
}


/* =========================================================
   07. DESCRIPTION
   ========================================================= */

.rj-gallery-hero__description {
  max-width: 590px;

  margin:
    0
    0
    24px;

  font-size: 1rem;

  line-height: 1.66;

  color:
    var(--rj-text-soft);
}


/* =========================================================
   08. EXPLORE LINK
   ========================================================= */

.rj-gallery-hero__explore {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  width: fit-content;

  font-size: 0.87rem;
  font-weight: 800;

  color:
    var(--rj-navy);
}


.rj-gallery-hero__explore-icon {
  display: grid;

  place-items: center;

  width: 35px;
  height: 35px;

  border:
    1px solid
    rgba(7, 47, 107, 0.18);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.62);

  transition:
    color
    var(--rj-normal)
    var(--rj-ease),
    background-color
    var(--rj-normal)
    var(--rj-ease),
    border-color
    var(--rj-normal)
    var(--rj-ease),
    transform
    var(--rj-normal)
    var(--rj-ease);
}


.rj-gallery-hero__explore-icon svg {
  width: 16px;
  height: 16px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.rj-gallery-hero__explore:hover
.rj-gallery-hero__explore-icon {
  color:
    var(--rj-white);

  border-color:
    var(--rj-navy);

  background:
    var(--rj-navy);

  transform:
    translateY(3px);
}


/* =========================================================
   09. VISUAL
   ========================================================= */

.rj-gallery-hero__visual {
  --rj-gallery-main-x: 0px;
  --rj-gallery-main-y: 0px;

  --rj-gallery-top-x: 0px;
  --rj-gallery-top-y: 0px;

  --rj-gallery-bottom-x: 0px;
  --rj-gallery-bottom-y: 0px;

  position: relative;

  z-index: 2;

  min-width: 0;
  height: 100%;

  overflow: hidden;

  padding:
    30px
    clamp(
      28px,
      4vw,
      58px
    )
    30px
    clamp(
      42px,
      4vw,
      70px
    );

  background:
    linear-gradient(
      150deg,
      #E7E9EC,
      #F1F2F3 58%,
      #DDE1E5
    );
}


/* subtle mineral tone */

.rj-gallery-hero__visual::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(7, 47, 107, 0.09),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      transparent,
      rgba(255, 255, 255, 0.24)
    );
}


/* =========================================================
   10. COLLAGE GRID
   ========================================================= */

.rj-gallery-hero__image {
  position: absolute;

  overflow: hidden;

  margin: 0;

  border:
    5px solid
    rgba(255, 255, 255, 0.95);

  border-radius: 17px;

  background:
    var(--rj-gray);

  box-shadow:
    0 24px 55px
    rgba(6, 27, 56, 0.17);

  isolation: isolate;
}


/* MAIN */

.rj-gallery-hero__image--main {
  top: 8%;
  bottom: 8%;
  left: 8%;

  width: 54%;

  transform:
    translate3d(
      var(--rj-gallery-main-x),
      var(--rj-gallery-main-y),
      0
    )
    rotate(-1.7deg);
}


/* TOP */

.rj-gallery-hero__image--top {
  top: 7%;
  right: 6%;

  width: 39%;
  height: 41%;

  transform:
    translate3d(
      var(--rj-gallery-top-x),
      var(--rj-gallery-top-y),
      0
    )
    rotate(2.2deg);
}


/* BOTTOM */

.rj-gallery-hero__image--bottom {
  right: 4%;
  bottom: 7%;

  width: 42%;
  height: 43%;

  transform:
    translate3d(
      var(--rj-gallery-bottom-x),
      var(--rj-gallery-bottom-y),
      0
    )
    rotate(-2.1deg);
}


/* =========================================================
   11. COLLAGE IMAGES
   ========================================================= */

.rj-gallery-hero__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  transform:
    scale(1.025);

  transition:
    transform
    850ms
    var(--rj-ease);
}


.rj-gallery-hero__image:hover img {
  transform:
    scale(1.06);
}


/* =========================================================
   12. IMAGE SHADE
   ========================================================= */

.rj-gallery-hero__image-shade {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(6, 27, 56, 0.12) 66%,
      rgba(6, 27, 56, 0.67) 100%
    );
}


/* =========================================================
   13. FIGCAPTION
   ========================================================= */

.rj-gallery-hero__image figcaption {
  position: absolute;

  z-index: 2;

  right: 18px;
  bottom: 17px;
  left: 18px;

  display: flex;

  flex-direction: column;

  gap: 3px;

  color:
    var(--rj-white-pure);
}


.rj-gallery-hero__image figcaption span {
  font-size: 0.65rem;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    rgba(255, 255, 255, 0.65);
}


.rj-gallery-hero__image figcaption strong {
  font-family:
    var(--rj-font-display);

  font-size: 1.22rem;
  font-weight: 400;

  line-height: 1.1;
}


.rj-gallery-hero__image--main
figcaption strong {
  font-size:
    clamp(
      1.35rem,
      1.7vw,
      1.8rem
    );
}


/* =========================================================
   14. SWOOSH
   ========================================================= */

.rj-gallery-hero__swoosh {
  position: absolute;

  z-index: 5;

  right: -55px;
  bottom: 23px;

  width: 330px;

  opacity: 0.42;

  pointer-events: none;

  transform:
    rotate(-5deg);
}


.rj-gallery-hero__swoosh path {
  fill: none;

  stroke:
    var(--rj-navy);

  stroke-width: 1.5;

  stroke-linecap: round;

  stroke-dasharray: 520;
  stroke-dashoffset: 520;

  transition:
    stroke-dashoffset
    1500ms
    var(--rj-ease);
}


.rj-gallery-hero.is-visible
.rj-gallery-hero__swoosh path {
  stroke-dashoffset: 0;
}


/* =========================================================
   15. DIVIDER
   ========================================================= */

.rj-gallery-hero__divider {
  position: absolute;

  z-index: 6;

  top: -10%;
  bottom: -10%;

  left: 47%;

  width: 39px;

  pointer-events: none;

  transform:
    translateX(-50%)
    skewX(-12deg);

  background:
    var(--rj-white);
}


.rj-gallery-hero__divider::after {
  content: "";

  position: absolute;

  top: 0;
  right: -8px;

  width: 8px;
  height: 100%;

  opacity: 0.72;

  background:
    var(--rj-silver);
}


.rj-gallery-hero__divider span {
  position: absolute;

  top: 0;
  right: -13px;

  width: 2px;
  height: 100%;

  background:
    rgba(7, 47, 107, 0.48);
}


/* =========================================================
   16. DESKTOP
   >= 1200px
   ========================================================= */

@media (min-width: 1200px) {

  .rj-gallery-hero {
    grid-template-columns:
      47%
      53%;
  }


  .rj-gallery-hero__visual {
    clip-path:
      polygon(
        5% 0,
        100% 0,
        100% 100%,
        0 100%
      );
  }


  .rj-gallery-hero__inner {
    padding-right:
      clamp(
        60px,
        5vw,
        92px
      );
  }

}


/* =========================================================
   17. TABLET
   768px — 1199px
   ========================================================= */

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

  .rj-gallery-hero {
    grid-template-columns:
      48%
      52%;

    height:
      min(
        480px,
        var(--rj-first-screen-height)
      );
  }


  .rj-gallery-hero__inner {
    width: 100%;

    margin-left:
      var(--rj-gutter);

    padding:
      26px
      55px
      26px
      0;
  }


  .rj-gallery-hero__breadcrumb {
    margin-bottom: 14px;

    font-size: 0.73rem;
  }


  .rj-gallery-hero__kicker {
    margin-bottom: 10px;

    font-size: 0.7rem;
  }


  .rj-gallery-hero__title {
    margin-bottom: 15px;

    font-size:
      clamp(
        2.8rem,
        5.6vw,
        4.3rem
      );
  }


  .rj-gallery-hero__description {
    margin-bottom: 19px;

    font-size: 0.92rem;

    line-height: 1.56;
  }


  .rj-gallery-hero__divider {
    left: 48%;

    width: 31px;
  }


  .rj-gallery-hero__visual {
    clip-path:
      polygon(
        7% 0,
        100% 0,
        100% 100%,
        0 100%
      );
  }


  .rj-gallery-hero__image--main {
    left: 7%;

    width: 57%;
  }


  .rj-gallery-hero__image--top {
    right: 4%;

    width: 39%;
  }


  .rj-gallery-hero__image--bottom {
    right: 3%;

    width: 42%;
  }

}


/* =========================================================
   18. MOBILE
   481px — 767px
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .rj-gallery-hero {
    display: block;

    height:
      min(
        540px,
        var(--rj-first-screen-height)
      );

    min-height: 500px;

    background:
      var(--rj-navy-deep);
  }


  /* PHOTO COLLAGE */

  .rj-gallery-hero__visual {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    background:
      var(--rj-navy-deep);

    clip-path: none;
  }


  .rj-gallery-hero__visual::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    background:
      linear-gradient(
        180deg,
        rgba(6, 27, 56, 0.15) 0%,
        rgba(6, 27, 56, 0.28) 35%,
        rgba(6, 27, 56, 0.88) 78%,
        var(--rj-navy-deep) 100%
      );
  }


  .rj-gallery-hero__image {
    border-width: 4px;

    border-color:
      rgba(255, 255, 255, 0.78);

    border-radius: 15px;
  }


  .rj-gallery-hero__image--main {
    top: 22px;
    bottom: auto;
    left: 6%;

    width: 61%;
    height: 55%;
  }


  .rj-gallery-hero__image--top {
    top: 29px;
    right: 4%;

    width: 35%;
    height: 26%;
  }


  .rj-gallery-hero__image--bottom {
    top: 31%;
    right: 3%;
    bottom: auto;

    width: 38%;
    height: 27%;
  }


  .rj-gallery-hero__image figcaption {
    display: none;
  }


  /* CONTENT */

  .rj-gallery-hero__content {
    position: relative;

    z-index: 6;

    display: flex;

    align-items: flex-end;

    width: 100%;
    height: 100%;

    background:
      transparent;
  }


  .rj-gallery-hero__content::before {
    display: none;
  }


  .rj-gallery-hero__inner {
    width: 100%;

    margin: 0;

    padding:
      30px
      var(--rj-gutter)
      29px;
  }


  .rj-gallery-hero__breadcrumb {
    margin-bottom: 12px;

    color:
      rgba(255, 255, 255, 0.55);
  }


  .rj-gallery-hero__breadcrumb a {
    color:
      rgba(255, 255, 255, 0.84);
  }


  .rj-gallery-hero__kicker {
    color:
      rgba(255, 255, 255, 0.72);
  }


  .rj-gallery-hero__kicker > span {
    background:
      rgba(255, 255, 255, 0.72);
  }


  .rj-gallery-hero__title {
    max-width: 560px;

    margin-bottom: 13px;

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

    color:
      var(--rj-white-pure);
  }


  .rj-gallery-hero__title span {
    color:
      var(--rj-white-pure);
  }


  .rj-gallery-hero__description {
    max-width: 570px;

    margin-bottom: 17px;

    color:
      rgba(255, 255, 255, 0.78);
  }


  .rj-gallery-hero__explore {
    color:
      var(--rj-white-pure);
  }


  .rj-gallery-hero__explore-icon {
    color:
      var(--rj-white-pure);

    border-color:
      rgba(255, 255, 255, 0.34);

    background:
      rgba(6, 27, 56, 0.26);
  }


  .rj-gallery-hero__divider {
    display: none;
  }


  .rj-gallery-hero__swoosh {
    display: none;
  }

}


/* =========================================================
   19. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

  .rj-gallery-hero {
    display: block;

    height:
      min(
        510px,
        var(--rj-first-screen-height)
      );

    min-height: 475px;

    background:
      var(--rj-navy-deep);
  }


  .rj-gallery-hero__visual {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    background:
      var(--rj-navy-deep);

    clip-path: none;
  }


  .rj-gallery-hero__visual::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    background:
      linear-gradient(
        180deg,
        rgba(6, 27, 56, 0.13) 0%,
        rgba(6, 27, 56, 0.26) 34%,
        rgba(6, 27, 56, 0.9) 72%,
        var(--rj-navy-deep) 100%
      );
  }


  /* COLLAGE */

  .rj-gallery-hero__image {
    border-width: 3px;

    border-radius: 13px;

    border-color:
      rgba(255, 255, 255, 0.77);
  }


  .rj-gallery-hero__image--main {
    top: 18px;
    bottom: auto;
    left: 5%;

    width: 64%;
    height: 51%;
  }


  .rj-gallery-hero__image--top {
    top: 24px;
    right: 3%;

    width: 34%;
    height: 24%;
  }


  .rj-gallery-hero__image--bottom {
    top: 29%;
    right: 2%;
    bottom: auto;

    width: 37%;
    height: 24%;
  }


  .rj-gallery-hero__image figcaption {
    display: none;
  }


  /* CONTENT */

  .rj-gallery-hero__content {
    position: relative;

    z-index: 6;

    display: flex;

    align-items: flex-end;

    width: 100%;
    height: 100%;

    background:
      transparent;
  }


  .rj-gallery-hero__content::before {
    display: none;
  }


  .rj-gallery-hero__inner {
    width: 100%;

    margin: 0;

    padding:
      25px
      var(--rj-gutter)
      23px;
  }


  .rj-gallery-hero__breadcrumb {
    margin-bottom: 10px;

    font-size: 0.68rem;

    color:
      rgba(255, 255, 255, 0.54);
  }


  .rj-gallery-hero__breadcrumb a {
    color:
      rgba(255, 255, 255, 0.83);
  }


  .rj-gallery-hero__kicker {
    margin-bottom: 8px;

    font-size: 0.65rem;

    color:
      rgba(255, 255, 255, 0.7);
  }


  .rj-gallery-hero__kicker > span {
    width: 21px;

    background:
      rgba(255, 255, 255, 0.7);
  }


  .rj-gallery-hero__title {
    margin-bottom: 11px;

    font-size:
      clamp(
        2.35rem,
        10.5vw,
        3.25rem
      );

    line-height: 0.95;

    color:
      var(--rj-white-pure);
  }


  .rj-gallery-hero__title span {
    color:
      var(--rj-white-pure);
  }


  .rj-gallery-hero__description {
    margin-bottom: 14px;

    font-size: 0.88rem;

    line-height: 1.5;

    color:
      rgba(255, 255, 255, 0.77);
  }


  .rj-gallery-hero__explore {
    font-size: 0.8rem;

    color:
      var(--rj-white-pure);
  }


  .rj-gallery-hero__explore-icon {
    width: 31px;
    height: 31px;

    color:
      var(--rj-white-pure);

    border-color:
      rgba(255, 255, 255, 0.33);

    background:
      rgba(6, 27, 56, 0.24);
  }


  .rj-gallery-hero__divider,
  .rj-gallery-hero__swoosh {
    display: none;
  }

}




















































/* =========================================================
   RJ PAINTING & REMODELING SERVICES
   GALLERY.HTML
   04. SERVICE NAVIGATION
   ========================================================= */


/* =========================================================
   01. ROOT VARIABLES
   ========================================================= */

:root {
  --rj-gallery-nav-height: 68px;
  --rj-gallery-nav-z: 7900;
}


/* =========================================================
   02. RESERVED SLOT

   El slot siempre conserva la altura de la navegación.
   Por eso al convertirse en fixed no existe layout shift.
   ========================================================= */

.rj-gallery-nav-slot {
  position: relative;

  z-index: 50;

  width: 100%;
  height: var(--rj-gallery-nav-height);

  background:
    var(--rj-white);
}


/* =========================================================
   03. NAVIGATION
   ========================================================= */

.rj-gallery-nav {
  position: relative;

  z-index: var(--rj-gallery-nav-z);

  width: 100%;
  height: var(--rj-gallery-nav-height);

  border-top:
    1px solid
    rgba(7, 47, 107, 0.08);

  border-bottom:
    1px solid
    rgba(7, 47, 107, 0.1);

  background:
    rgba(251, 251, 250, 0.96);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  transform:
    translateZ(0);

  transition:
    background-color
    var(--rj-normal)
    var(--rj-ease),
    box-shadow
    var(--rj-normal)
    var(--rj-ease),
    border-color
    var(--rj-normal)
    var(--rj-ease);
}


/* =========================================================
   04. FIXED STATE
   ========================================================= */

.rj-gallery-nav.is-fixed {
  position: fixed;

  top:
    var(
      --rj-gallery-nav-top,
      var(--rj-shell-height)
    );

  right: 0;
  left: 0;

  z-index:
    var(--rj-gallery-nav-z);

  border-top-color:
    rgba(7, 47, 107, 0.06);

  border-bottom-color:
    rgba(7, 47, 107, 0.12);

  background:
    rgba(251, 251, 250, 0.93);

  box-shadow:
    0 13px 34px
    rgba(6, 27, 56, 0.09);
}


/* =========================================================
   05. INNER
   ========================================================= */

.rj-gallery-nav__inner {
  position: relative;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: center;

  width:
    min(
      calc(
        100% - var(--rj-gutter) * 2
      ),
      var(--rj-container)
    );

  height: 100%;

  margin-inline: auto;

  min-width: 0;
}


/* =========================================================
   06. LABEL
   ========================================================= */

.rj-gallery-nav__label {
  display: flex;

  align-items: center;

  gap: 10px;

  flex:
    0
    0
    auto;

  padding-right: 27px;

  margin-right: 18px;

  border-right:
    1px solid
    rgba(7, 47, 107, 0.12);

  white-space: nowrap;
}


.rj-gallery-nav__label > span {
  display: block;

  width: 24px;
  height: 1px;

  background:
    var(--rj-navy);
}


.rj-gallery-nav__label strong {
  font-size: 0.71rem;
  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.13em;

  text-transform: uppercase;

  color:
    var(--rj-steel-blue);
}


/* =========================================================
   07. TRACK
   ========================================================= */

.rj-gallery-nav__track {
  position: relative;

  display: flex;

  align-items: center;

  gap: 3px;

  min-width: 0;
  height: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-inline:
    contain;

  scrollbar-width:
    none;

  scroll-behavior:
    smooth;

  -webkit-overflow-scrolling:
    touch;
}


.rj-gallery-nav__track::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   08. LINK
   ========================================================= */

.rj-gallery-nav__link {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  flex:
    0
    0
    auto;

  min-height: 44px;

  padding:
    0
    15px;

  border-radius: 9px;

  font-size: 0.82rem;
  font-weight: 700;

  white-space: nowrap;

  color:
    #5C6875;

  transition:
    color
    var(--rj-normal)
    var(--rj-ease),
    background-color
    var(--rj-normal)
    var(--rj-ease),
    transform
    var(--rj-normal)
    var(--rj-ease);
}


/* active indicator */

.rj-gallery-nav__link::after {
  content: "";

  position: absolute;

  right: 15px;
  bottom: 5px;
  left: 15px;

  height: 2px;

  border-radius: 999px;

  opacity: 0;

  transform:
    scaleX(0.3);

  background:
    var(--rj-navy);

  transition:
    opacity
    var(--rj-normal)
    var(--rj-ease),
    transform
    var(--rj-normal)
    var(--rj-ease);
}


/* =========================================================
   09. HOVER
   ========================================================= */

.rj-gallery-nav__link:hover {
  color:
    var(--rj-navy);

  background:
    rgba(7, 47, 107, 0.045);
}


/* =========================================================
   10. ACTIVE
   ========================================================= */

.rj-gallery-nav__link.is-active,
.rj-gallery-nav__link[aria-current="location"] {
  color:
    var(--rj-navy);

  background:
    rgba(7, 47, 107, 0.055);
}


.rj-gallery-nav__link.is-active::after,
.rj-gallery-nav__link[aria-current="location"]::after {
  opacity: 1;

  transform:
    scaleX(1);
}


/* =========================================================
   11. FOCUS
   ========================================================= */

.rj-gallery-nav__link:focus-visible {
  outline:
    2px solid
    var(--rj-blue);

  outline-offset: -2px;
}


/* =========================================================
   12. EDGE FADE

   Sugiere que el track puede desplazarse horizontalmente.
   ========================================================= */

.rj-gallery-nav__edge {
  position: absolute;

  z-index: 3;

  top: 0;
  right: 0;

  width: 38px;
  height: 100%;

  pointer-events: none;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(251, 251, 250, 0.97)
    );
}


/* =========================================================
   13. FIXED BODY STATE
   ========================================================= */

body.rj-gallery-nav-fixed
.rj-gallery-nav {
  will-change:
    transform;
}


/* =========================================================
   14. DESKTOP
   >= 1200px
   ========================================================= */

@media (min-width: 1200px) {

  :root {
    --rj-gallery-nav-height: 68px;
  }


  .rj-gallery-nav__link {
    padding-inline: 15px;

    font-size: 0.81rem;
  }


  .rj-gallery-nav__track {
    justify-content:
      flex-start;
  }

}


/* =========================================================
   15. TABLET
   768px — 1199px
   ========================================================= */

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

  :root {
    --rj-gallery-nav-height: 64px;
  }


  .rj-gallery-nav__inner {
    width:
      calc(
        100% - var(--rj-gutter) * 2
      );
  }


  .rj-gallery-nav__label {
    padding-right: 19px;

    margin-right: 10px;
  }


  .rj-gallery-nav__label > span {
    width: 20px;
  }


  .rj-gallery-nav__link {
    min-height: 42px;

    padding-inline: 13px;

    font-size: 0.78rem;
  }


  .rj-gallery-nav__edge {
    opacity: 1;
  }

}


/* =========================================================
   16. MOBILE
   481px — 767px
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  :root {
    --rj-gallery-nav-height: 60px;
  }


  .rj-gallery-nav {
    background:
      rgba(251, 251, 250, 0.95);
  }


  .rj-gallery-nav__inner {
    display: block;

    width: 100%;

    padding-left:
      var(--rj-gutter);
  }


  .rj-gallery-nav__label {
    display: none;
  }


  .rj-gallery-nav__track {
    width: 100%;

    padding-right:
      calc(
        var(--rj-gutter) + 28px
      );
  }


  .rj-gallery-nav__link {
    min-height: 40px;

    padding-inline: 14px;

    font-size: 0.76rem;
  }


  .rj-gallery-nav__link:first-child {
    margin-left: -7px;
  }


  .rj-gallery-nav__edge {
    opacity: 1;

    width:
      calc(
        var(--rj-gutter) + 20px
      );
  }

}


/* =========================================================
   17. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

  :root {
    --rj-gallery-nav-height: 58px;
  }


  .rj-gallery-nav__inner {
    display: block;

    width: 100%;

    padding-left:
      var(--rj-gutter);
  }


  .rj-gallery-nav__label {
    display: none;
  }


  .rj-gallery-nav__track {
    width: 100%;

    padding-right:
      calc(
        var(--rj-gutter) + 26px
      );
  }


  .rj-gallery-nav__link {
    min-height: 39px;

    padding-inline: 12px;

    border-radius: 8px;

    font-size: 0.72rem;
  }


  .rj-gallery-nav__link:first-child {
    margin-left: -6px;
  }


  .rj-gallery-nav__link::after {
    right: 12px;
    bottom: 4px;
    left: 12px;
  }


  .rj-gallery-nav__edge {
    opacity: 1;

    width:
      calc(
        var(--rj-gutter) + 18px
      );
  }

}



















































/* =========================================================
   RJ PAINTING & REMODELING SERVICES
   GALLERY.HTML
   05. GALLERY INTRO
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.rj-gallery-intro {
  position: relative;

  overflow: hidden;

  padding-top:
    clamp(
      92px,
      9vw,
      145px
    );

  padding-bottom:
    clamp(
      88px,
      9vw,
      140px
    );

  background:
    radial-gradient(
      circle at 89% 15%,
      rgba(36, 91, 155, 0.055),
      transparent 27%
    ),
    radial-gradient(
      circle at 8% 88%,
      rgba(162, 163, 167, 0.07),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #FBFBFA 0%,
      #F7F8F8 55%,
      #F2F4F5 100%
    );

  isolation: isolate;
}


.rj-gallery-intro::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.14;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    multiply;
}


.rj-gallery-intro > .rj-container {
  position: relative;

  z-index: 3;
}


/* =========================================================
   02. DECORATION
   ========================================================= */

.rj-gallery-intro__decor {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


.rj-gallery-intro__circle {
  position: absolute;

  top: -150px;
  right: -110px;

  width: 390px;
  height: 390px;

  border:
    1px solid
    rgba(7, 47, 107, 0.07);

  border-radius: 50%;
}


.rj-gallery-intro__vertical-line {
  position: absolute;

  top: 0;
  left: 12%;

  width: 1px;
  height: 125px;

  opacity: 0.3;

  background:
    linear-gradient(
      180deg,
      var(--rj-navy),
      transparent
    );
}


/* =========================================================
   03. RJ WATERMARK
   ========================================================= */

.rj-gallery-intro__watermark {
  position: absolute;

  right: -22px;
  bottom: -70px;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(
      13rem,
      23vw,
      24rem
    );

  line-height: 0.7;

  letter-spacing: -0.08em;

  color:
    transparent;

  -webkit-text-stroke:
    1px
    rgba(7, 47, 107, 0.055);

  opacity: 0.8;

  user-select: none;
}


/* =========================================================
   04. SWOOSH
   ========================================================= */

.rj-gallery-intro__swoosh {
  position: absolute;

  bottom: 24%;
  left: -250px;

  width: 720px;

  opacity: 0.14;

  transform:
    rotate(-5deg);
}


.rj-gallery-intro__swoosh path {
  fill: none;

  stroke:
    var(--rj-navy);

  stroke-width: 1.35;

  stroke-linecap: round;

  stroke-dasharray: 850;
  stroke-dashoffset: 850;

  transition:
    stroke-dashoffset
    1500ms
    var(--rj-ease);
}


.rj-gallery-intro.is-visible
.rj-gallery-intro__swoosh path {
  stroke-dashoffset: 0;
}


/* =========================================================
   05. LAYOUT
   ========================================================= */

.rj-gallery-intro__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(320px, 0.62fr);

  align-items: end;

  gap:
    clamp(
      60px,
      9vw,
      140px
    );
}


/* =========================================================
   06. HEADING
   ========================================================= */

.rj-gallery-intro__heading {
  max-width: 900px;
}


.rj-gallery-intro__title {
  max-width: 900px;

  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(
      3.3rem,
      5.7vw,
      6rem
    );

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.04em;

  color:
    var(--rj-navy-deep);
}


.rj-gallery-intro__title span {
  display: block;

  color:
    #596675;
}


/* =========================================================
   07. COPY
   ========================================================= */

.rj-gallery-intro__copy {
  position: relative;

  max-width: 480px;

  padding-left: 27px;

  border-left:
    1px solid
    rgba(7, 47, 107, 0.17);
}


.rj-gallery-intro__copy p {
  margin:
    0
    0
    17px;

  font-size: 1rem;

  line-height: 1.72;

  color:
    var(--rj-text-soft);
}


.rj-gallery-intro__copy p:last-of-type {
  margin-bottom: 25px;
}


/* =========================================================
   08. START LINK
   ========================================================= */

.rj-gallery-intro__start {
  display: inline-flex;

  align-items: center;

  gap: 11px;

  width: fit-content;

  font-size: 0.85rem;
  font-weight: 800;

  color:
    var(--rj-navy);
}


.rj-gallery-intro__start-icon {
  display: grid;

  place-items: center;

  width: 34px;
  height: 34px;

  border:
    1px solid
    rgba(7, 47, 107, 0.17);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.65);

  transition:
    color
    var(--rj-normal)
    var(--rj-ease),
    background-color
    var(--rj-normal)
    var(--rj-ease),
    border-color
    var(--rj-normal)
    var(--rj-ease),
    transform
    var(--rj-normal)
    var(--rj-ease);
}


.rj-gallery-intro__start-icon svg {
  width: 16px;
  height: 16px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.rj-gallery-intro__start:hover
.rj-gallery-intro__start-icon {
  color:
    var(--rj-white);

  border-color:
    var(--rj-navy);

  background:
    var(--rj-navy);

  transform:
    translateY(3px);
}


/* =========================================================
   09. SERVICE LANGUAGE
   ========================================================= */

.rj-gallery-intro__services {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    15px
    21px;

  margin-top:
    clamp(
      52px,
      6vw,
      82px
    );

  padding-top: 25px;

  border-top:
    1px solid
    rgba(7, 47, 107, 0.11);
}


.rj-gallery-intro__services span {
  font-size: 0.75rem;
  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    var(--rj-steel-blue);
}


.rj-gallery-intro__services i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    rgba(7, 47, 107, 0.35);
}


/* =========================================================
   10. DESKTOP
   >= 1200px
   ========================================================= */

@media (min-width: 1200px) {

  .rj-gallery-intro__layout {
    grid-template-columns:
      minmax(0, 1.34fr)
      minmax(340px, 0.6fr);
  }


  .rj-gallery-intro__copy {
    margin-bottom: 4px;
  }

}


/* =========================================================
   11. TABLET
   768px — 1199px
   ========================================================= */

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

  .rj-gallery-intro {
    padding-top:
      clamp(
        80px,
        9vw,
        115px
      );

    padding-bottom:
      clamp(
        80px,
        9vw,
        115px
      );
  }


  .rj-gallery-intro__layout {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(285px, 0.7fr);

    gap: 52px;
  }


  .rj-gallery-intro__title {
    font-size:
      clamp(
        2.9rem,
        5.8vw,
        4.6rem
      );
  }


  .rj-gallery-intro__copy {
    padding-left: 22px;
  }


  .rj-gallery-intro__copy p {
    font-size: 0.95rem;
  }


  .rj-gallery-intro__services {
    margin-top: 58px;
  }

}


/* =========================================================
   12. MOBILE
   481px — 767px
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .rj-gallery-intro {
    padding-top: 77px;
    padding-bottom: 78px;
  }


  .rj-gallery-intro__layout {
    grid-template-columns: 1fr;

    gap: 33px;
  }


  .rj-gallery-intro__title {
    max-width: 650px;

    font-size:
      clamp(
        2.7rem,
        8.4vw,
        4rem
      );
  }


  .rj-gallery-intro__copy {
    max-width: 590px;

    padding-left: 22px;
  }


  .rj-gallery-intro__services {
    gap:
      13px
      16px;

    margin-top: 48px;

    padding-top: 21px;
  }


  .rj-gallery-intro__services span {
    font-size: 0.7rem;
  }


  .rj-gallery-intro__watermark {
    right: -15px;
    bottom: -35px;

    font-size: 13rem;
  }


  .rj-gallery-intro__swoosh {
    left: -330px;

    opacity: 0.09;
  }

}


/* =========================================================
   13. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

  .rj-gallery-intro {
    padding-top: 68px;
    padding-bottom: 69px;
  }


  .rj-gallery-intro__layout {
    grid-template-columns: 1fr;

    gap: 29px;
  }


  .rj-gallery-intro__title {
    font-size:
      clamp(
        2.35rem,
        10.5vw,
        3.2rem
      );

    line-height: 0.98;
  }


  .rj-gallery-intro__copy {
    padding-left: 17px;
  }


  .rj-gallery-intro__copy p {
    font-size: 0.92rem;

    line-height: 1.67;
  }


  .rj-gallery-intro__start {
    font-size: 0.8rem;
  }


  .rj-gallery-intro__start-icon {
    width: 32px;
    height: 32px;
  }


  .rj-gallery-intro__services {
    display: grid;

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

    gap:
      16px
      22px;

    margin-top: 41px;

    padding-top: 20px;
  }


  .rj-gallery-intro__services i {
    display: none;
  }


  .rj-gallery-intro__services span {
    font-size: 0.66rem;

    line-height: 1.4;
  }


  .rj-gallery-intro__watermark {
    right: -25px;
    bottom: -20px;

    font-size: 9rem;
  }


  .rj-gallery-intro__circle {
    display: none;
  }


  .rj-gallery-intro__swoosh {
    left: -390px;

    opacity: 0.07;
  }

}
















































/* =========================================================
   RJ PAINTING & REMODELING SERVICES
   GALLERY.HTML
   06. INTERIOR & EXTERIOR PAINTING
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.rj-gallery-service--painting {
  position: relative;

  overflow: hidden;

  scroll-margin-top:
    var(--rj-scroll-offset);

  padding:
    clamp(90px, 9vw, 145px)
    0
    clamp(105px, 10vw, 165px);

  background:
    radial-gradient(
      circle at 91% 8%,
      rgba(36, 91, 155, 0.07),
      transparent 25%
    ),
    radial-gradient(
      circle at 6% 47%,
      rgba(162, 163, 167, 0.08),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #F8F8F7 0%,
      #F2F4F5 48%,
      #FAFAF9 100%
    );

  isolation: isolate;
}


.rj-gallery-service--painting::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.14;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.69' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.065'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    multiply;
}


.rj-gallery-service--painting
> .rj-container {
  position: relative;

  z-index: 3;
}


/* =========================================================
   02. DECORATION
   ========================================================= */

.rj-gallery-service__decor {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


.rj-gallery-service__watermark {
  position: absolute;

  top: 42px;
  right: -20px;

  font-family:
    var(--rj-font-display);

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

  line-height: 0.7;

  letter-spacing: -0.055em;

  color:
    transparent;

  -webkit-text-stroke:
    1px
    rgba(7, 47, 107, 0.055);

  user-select: none;
}


.rj-gallery-service__decor-circle {
  position: absolute;

  left: -175px;
  top: 390px;

  width: 440px;
  height: 440px;

  border:
    1px solid
    rgba(7, 47, 107, 0.055);

  border-radius: 50%;
}


.rj-gallery-service__brush-line {
  position: absolute;

  top: 230px;
  right: -250px;

  width: 760px;

  opacity: 0.11;

  transform:
    rotate(-7deg);
}


.rj-gallery-service__brush-line path {
  fill: none;

  stroke:
    var(--rj-navy);

  stroke-width: 1.45;

  stroke-linecap: round;
}


/* =========================================================
   03. HEADER
   ========================================================= */

.rj-gallery-service__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(55px, 8vw, 125px);

  margin-bottom:
    clamp(50px, 6vw, 82px);
}


.rj-gallery-service__heading {
  max-width: 850px;
}


.rj-gallery-service__title {
  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(3.2rem, 5.4vw, 5.6rem);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.04em;

  color:
    var(--rj-navy-deep);
}


.rj-gallery-service__title span {
  display: block;

  color:
    #596675;
}


/* =========================================================
   04. INTRO
   ========================================================= */

.rj-gallery-service__intro {
  max-width: 500px;

  justify-self: end;
}


.rj-gallery-service__intro > p {
  margin:
    0
    0
    22px;

  font-size: 1rem;

  line-height: 1.72;

  color:
    var(--rj-text-soft);
}


.rj-gallery-service__visual-note {
  display: flex;

  align-items: center;

  gap: 11px;
}


.rj-gallery-service__visual-note > span {
  flex:
    0
    0
    24px;

  width: 24px;
  height: 1px;

  background:
    var(--rj-navy);
}


.rj-gallery-service__visual-note p {
  margin: 0;

  font-size: 0.77rem;
  font-weight: 700;

  color:
    var(--rj-steel-blue);
}


/* =========================================================
   05. EDITORIAL FEATURE
   ========================================================= */

.rj-painting-feature {
  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  grid-auto-rows:
    clamp(145px, 13vw, 205px);

  grid-auto-flow:
    dense;

  gap:
    clamp(10px, 1.2vw, 18px);

  margin-bottom:
    clamp(80px, 9vw, 130px);
}


/* =========================================================
   06. GALLERY MEDIA BASE
   ========================================================= */

.rj-gallery-media {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;

  min-width: 0;

  padding: 0;

  overflow: hidden;

  border: 0;

  border-radius: 14px;

  background:
    #DDE1E4;

  cursor: zoom-in;

  box-shadow:
    0 16px 42px
    rgba(6, 27, 56, 0.09);

  isolation: isolate;

  transition:
    transform
    var(--rj-normal)
    var(--rj-ease),
    box-shadow
    var(--rj-normal)
    var(--rj-ease);
}


.rj-gallery-media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform:
    scale(1.002);

  transition:
    transform
    750ms
    var(--rj-ease);
}


.rj-gallery-media::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: 0;

  background:
    linear-gradient(
      180deg,
      transparent 52%,
      rgba(6, 27, 56, 0.38)
    );

  transition:
    opacity
    var(--rj-normal)
    var(--rj-ease);
}


.rj-gallery-media:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 24px 52px
    rgba(6, 27, 56, 0.14);
}


.rj-gallery-media:hover img {
  transform:
    scale(1.045);
}


.rj-gallery-media:hover::after {
  opacity: 1;
}


/* =========================================================
   07. VIEW INDICATOR
   ========================================================= */

.rj-gallery-media__view {
  position: absolute;

  z-index: 3;

  right: 13px;
  bottom: 13px;

  display: grid;

  place-items: center;

  width: 39px;
  height: 39px;

  border:
    1px solid
    rgba(255, 255, 255, 0.33);

  border-radius: 50%;

  color:
    var(--rj-white-pure);

  background:
    rgba(6, 27, 56, 0.68);

  opacity: 0;

  transform:
    translateY(5px);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  transition:
    opacity
    var(--rj-normal)
    var(--rj-ease),
    transform
    var(--rj-normal)
    var(--rj-ease);
}


.rj-gallery-media__view svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.rj-gallery-media:hover
.rj-gallery-media__view,
.rj-gallery-media:focus-visible
.rj-gallery-media__view {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   08. FEATURE IMAGE SIZES
   ========================================================= */

.rj-painting-feature
.rj-gallery-media--lead-1 {
  grid-column:
    span 7;

  grid-row:
    span 2;
}


.rj-painting-feature
.rj-gallery-media--lead-2 {
  grid-column:
    span 5;

  grid-row:
    span 1;
}


.rj-painting-feature
.rj-gallery-media--lead-3 {
  grid-column:
    span 3;

  grid-row:
    span 1;
}


.rj-painting-feature
.rj-gallery-media--lead-4 {
  grid-column:
    span 2;

  grid-row:
    span 1;
}


.rj-painting-feature
.rj-gallery-media--lead-5,
.rj-painting-feature
.rj-gallery-media--lead-6,
.rj-painting-feature
.rj-gallery-media--lead-7 {
  grid-column:
    span 4;

  grid-row:
    span 1;
}


/* =========================================================
   09. ARCHIVE HEADER
   ========================================================= */

.rj-painting-archive__header {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 45px;

  margin-bottom: 34px;

  padding-bottom: 25px;

  border-bottom:
    1px solid
    rgba(7, 47, 107, 0.12);
}


.rj-painting-archive__eyebrow {
  display: block;

  margin-bottom: 6px;

  font-size: 0.71rem;
  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;

  color:
    var(--rj-steel-blue);
}


.rj-painting-archive__header h3 {
  margin: 0;

  font-family:
    var(--rj-font-display);

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

  font-weight: 400;

  line-height: 1;

  color:
    var(--rj-navy-deep);
}


.rj-painting-archive__header > p {
  max-width: 420px;

  margin: 0;

  font-size: 0.91rem;

  line-height: 1.65;

  color:
    var(--rj-text-soft);
}


/* =========================================================
   10. LARGE IMAGE GRID
   ========================================================= */

.rj-painting-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-auto-rows:
    clamp(175px, 15vw, 235px);

  grid-auto-flow:
    dense;

  gap:
    clamp(9px, 1vw, 15px);
}


/* standard */

.rj-painting-grid
.rj-gallery-media {
  min-height: 0;
}


/* wide */

.rj-painting-grid
.rj-gallery-media--wide {
  grid-column:
    span 2;
}


/* tall */

.rj-painting-grid
.rj-gallery-media--tall {
  grid-row:
    span 2;
}


/* large */

.rj-painting-grid
.rj-gallery-media--large {
  grid-column:
    span 2;

  grid-row:
    span 2;
}


/* =========================================================
   11. FOCUS
   ========================================================= */

.rj-gallery-media:focus-visible {
  outline:
    3px solid
    var(--rj-blue);

  outline-offset: 4px;
}


/* =========================================================
   12. DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

  .rj-painting-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }


  .rj-painting-feature {
    grid-auto-rows:
      clamp(165px, 13vw, 215px);
  }

}


/* =========================================================
   13. TABLET
   ========================================================= */

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

  .rj-gallery-service--painting {
    padding:
      95px
      0
      115px;
  }


  .rj-gallery-service__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.72fr);

    gap: 48px;
  }


  .rj-gallery-service__title {
    font-size:
      clamp(2.8rem, 5.6vw, 4.3rem);
  }


  .rj-painting-feature {
    grid-auto-rows:
      155px;
  }


  .rj-painting-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    grid-auto-rows:
      190px;
  }


  .rj-painting-grid
  .rj-gallery-media--large {
    grid-column:
      span 2;
  }

}


/* =========================================================
   14. MOBILE
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .rj-gallery-service--painting {
    padding:
      78px
      0
      93px;
  }


  .rj-gallery-service__header {
    grid-template-columns: 1fr;

    gap: 27px;

    margin-bottom: 46px;
  }


  .rj-gallery-service__intro {
    max-width: 570px;

    justify-self: initial;
  }


  .rj-gallery-service__title {
    font-size:
      clamp(2.6rem, 8vw, 3.7rem);
  }


  .rj-painting-feature {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows:
      190px;

    margin-bottom: 78px;
  }


  .rj-painting-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      span 2;

    grid-row:
      span 2;
  }


  .rj-painting-feature
  .rj-gallery-media--lead-2,
  .rj-painting-feature
  .rj-gallery-media--lead-3,
  .rj-painting-feature
  .rj-gallery-media--lead-4,
  .rj-painting-feature
  .rj-gallery-media--lead-5,
  .rj-painting-feature
  .rj-gallery-media--lead-6,
  .rj-painting-feature
  .rj-gallery-media--lead-7 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-painting-archive__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 13px;
  }


  .rj-painting-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows:
      180px;
  }


  .rj-painting-grid
  .rj-gallery-media--wide,
  .rj-painting-grid
  .rj-gallery-media--large {
    grid-column:
      span 2;
  }

}


/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .rj-gallery-service--painting {
    padding:
      68px
      0
      82px;
  }


  .rj-gallery-service__header {
    grid-template-columns: 1fr;

    gap: 24px;

    margin-bottom: 39px;
  }


  .rj-gallery-service__title {
    font-size:
      clamp(2.35rem, 10vw, 3.15rem);

    line-height: 0.98;
  }


  .rj-gallery-service__intro {
    justify-self: initial;
  }


  .rj-gallery-service__intro > p {
    font-size: 0.93rem;

    line-height: 1.67;
  }


  .rj-painting-feature {
    grid-template-columns: 1fr;

    grid-auto-rows:
      245px;

    gap: 9px;

    margin-bottom: 65px;
  }


  .rj-painting-feature
  .rj-gallery-media--lead-1,
  .rj-painting-feature
  .rj-gallery-media--lead-2,
  .rj-painting-feature
  .rj-gallery-media--lead-3,
  .rj-painting-feature
  .rj-gallery-media--lead-4,
  .rj-painting-feature
  .rj-gallery-media--lead-5,
  .rj-painting-feature
  .rj-gallery-media--lead-6,
  .rj-painting-feature
  .rj-gallery-media--lead-7 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-painting-archive__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 24px;
  }


  .rj-painting-archive__header h3 {
    font-size: 2rem;
  }


  .rj-painting-grid {
    grid-template-columns: 1fr;

    grid-auto-rows:
      275px;

    gap: 9px;
  }


  .rj-painting-grid
  .rj-gallery-media--wide,
  .rj-painting-grid
  .rj-gallery-media--tall,
  .rj-painting-grid
  .rj-gallery-media--large {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-gallery-media__view {
    width: 36px;
    height: 36px;

    opacity: 1;

    transform: none;
  }


  .rj-gallery-service__watermark {
    font-size: 8rem;
  }


  .rj-gallery-service__decor-circle {
    display: none;
  }

}





















































/* =========================================================
   GLOBAL GALLERY VIEWER
   ========================================================= */

.rj-viewer {
  position: fixed;

  inset: 0;

  z-index: 25000;

  display: grid;

  grid-template-columns:
    85px
    minmax(0, 1fr)
    85px;

  grid-template-rows:
    82px
    minmax(0, 1fr)
    55px;

  align-items: center;

  width: 100%;

  height:
    100dvh;

  padding:
    0
    18px;

  opacity: 0;

  visibility: hidden;

  color:
    var(--rj-white-pure);

  background:
    rgba(3, 14, 29, 0.96);

  transition:
    opacity
    260ms
    var(--rj-ease),
    visibility
    260ms
    var(--rj-ease);

  isolation: isolate;
}


.rj-viewer[hidden] {
  display: none;
}


.rj-viewer.is-open {
  opacity: 1;

  visibility: visible;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.rj-viewer__backdrop {
  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  padding: 0;

  border: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(36, 91, 155, 0.08),
      transparent 42%
    );

  cursor: default;
}


/* =========================================================
   TOP
   ========================================================= */

.rj-viewer__top {
  position: relative;

  z-index: 4;

  grid-column:
    1 / -1;

  grid-row: 1;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 25px;

  width: 100%;

  padding:
    0
    20px;
}


.rj-viewer__meta {
  display: flex;

  align-items: center;

  gap: 14px;
}


.rj-viewer__service {
  font-size: 0.75rem;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    rgba(255, 255, 255, 0.78);
}


.rj-viewer__counter {
  padding-left: 14px;

  border-left:
    1px solid
    rgba(255, 255, 255, 0.19);

  font-size: 0.76rem;
  font-weight: 650;

  color:
    rgba(255, 255, 255, 0.48);
}


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

.rj-viewer__close {
  position: relative;

  width: 46px;
  height: 46px;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius: 50%;

  color:
    var(--rj-white-pure);

  background:
    rgba(255, 255, 255, 0.06);

  cursor: pointer;

  transition:
    background-color
    var(--rj-normal)
    var(--rj-ease),
    transform
    var(--rj-normal)
    var(--rj-ease);
}


.rj-viewer__close:hover {
  background:
    rgba(255, 255, 255, 0.12);

  transform:
    rotate(5deg);
}


.rj-viewer__close span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 17px;
  height: 1.5px;

  border-radius: 999px;

  background:
    currentColor;
}


.rj-viewer__close span:first-child {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


.rj-viewer__close span:last-child {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}


/* =========================================================
   STAGE
   ========================================================= */

.rj-viewer__stage {
  position: relative;

  z-index: 2;

  grid-column: 2;

  grid-row: 2;

  display: grid;

  place-items: center;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  touch-action:
    pan-y;
}


.rj-viewer__image {
  display: block;

  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 5px;

  box-shadow:
    0 24px 75px
    rgba(0, 0, 0, 0.35);

  user-select: none;

  -webkit-user-drag:
    none;
}


/* =========================================================
   PREV / NEXT
   ========================================================= */

.rj-viewer__nav {
  position: relative;

  z-index: 4;

  display: grid;

  place-items: center;

  width: 52px;
  height: 52px;

  justify-self: center;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 50%;

  color:
    rgba(255, 255, 255, 0.88);

  background:
    rgba(255, 255, 255, 0.055);

  cursor: pointer;

  transition:
    color
    var(--rj-normal)
    var(--rj-ease),
    background-color
    var(--rj-normal)
    var(--rj-ease),
    transform
    var(--rj-normal)
    var(--rj-ease);
}


.rj-viewer__nav svg {
  width: 21px;
  height: 21px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.rj-viewer__nav:hover {
  color:
    var(--rj-navy-deep);

  background:
    var(--rj-white-pure);
}


.rj-viewer__nav--prev {
  grid-column: 1;

  grid-row: 2;
}


.rj-viewer__nav--next {
  grid-column: 3;

  grid-row: 2;
}


.rj-viewer__nav--prev:hover {
  transform:
    translateX(-3px);
}


.rj-viewer__nav--next:hover {
  transform:
    translateX(3px);
}


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

.rj-viewer__hint {
  position: relative;

  z-index: 3;

  grid-column:
    1 / -1;

  grid-row: 3;

  align-self: center;

  justify-self: center;

  font-size: 0.69rem;
  font-weight: 600;

  letter-spacing: 0.04em;

  color:
    rgba(255, 255, 255, 0.34);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

  .rj-viewer {
    grid-template-columns:
      90px
      minmax(0, 1fr)
      90px;
  }

}


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

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

  .rj-viewer {
    grid-template-columns:
      70px
      minmax(0, 1fr)
      70px;

    grid-template-rows:
      75px
      minmax(0, 1fr)
      48px;
  }


  .rj-viewer__nav {
    width: 47px;
    height: 47px;
  }

}


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

@media (min-width: 481px) and (max-width: 767px) {

  .rj-viewer {
    display: block;

    padding:
      72px
      18px
      48px;
  }


  .rj-viewer__top {
    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 67px;

    padding:
      0
      18px;
  }


  .rj-viewer__stage {
    width: 100%;
    height: 100%;
  }


  .rj-viewer__nav {
    position: absolute;

    top: 50%;

    width: 44px;
    height: 44px;

    transform:
      translateY(-50%);
  }


  .rj-viewer__nav--prev {
    left: 14px;
  }


  .rj-viewer__nav--next {
    right: 14px;
  }


  .rj-viewer__hint {
    position: absolute;

    right: 0;
    bottom: 17px;
    left: 0;

    text-align: center;
  }

}


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

@media (max-width: 480px) {

  .rj-viewer {
    display: block;

    padding:
      67px
      10px
      43px;
  }


  .rj-viewer__top {
    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 62px;

    padding:
      0
      13px;
  }


  .rj-viewer__meta {
    gap: 9px;
  }


  .rj-viewer__service {
    max-width: 190px;

    overflow: hidden;

    font-size: 0.64rem;

    white-space: nowrap;

    text-overflow: ellipsis;
  }


  .rj-viewer__counter {
    padding-left: 9px;

    font-size: 0.68rem;
  }


  .rj-viewer__close {
    width: 42px;
    height: 42px;
  }


  .rj-viewer__stage {
    width: 100%;
    height: 100%;
  }


  .rj-viewer__image {
    border-radius: 3px;
  }


  .rj-viewer__nav {
    position: absolute;

    top: 50%;

    width: 41px;
    height: 41px;

    transform:
      translateY(-50%);

    background:
      rgba(3, 14, 29, 0.58);

    backdrop-filter:
      blur(8px);

    -webkit-backdrop-filter:
      blur(8px);
  }


  .rj-viewer__nav--prev {
    left: 8px;
  }


  .rj-viewer__nav--next {
    right: 8px;
  }


  .rj-viewer__hint {
    position: absolute;

    right: 0;
    bottom: 14px;
    left: 0;

    font-size: 0.62rem;

    text-align: center;
  }

}














































/* =========================================================
   RJ PAINTING & REMODELING SERVICES
   GALLERY.HTML
   07. ROOFING
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.rj-gallery-service--roofing {
  position: relative;

  overflow: hidden;

  scroll-margin-top:
    var(--rj-scroll-offset);

  padding:
    clamp(90px, 9vw, 145px)
    0
    clamp(105px, 10vw, 160px);

  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(7, 47, 107, 0.09),
      transparent 26%
    ),
    linear-gradient(
      155deg,
      #EEF1F3 0%,
      #F8F8F7 50%,
      #ECEFF1 100%
    );

  isolation: isolate;
}


.rj-gallery-service--roofing::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.12;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    multiply;
}


.rj-gallery-service--roofing
> .rj-container {
  position: relative;

  z-index: 3;
}


/* =========================================================
   02. DECORATION
   ========================================================= */

.rj-roofing__decor {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


.rj-roofing__watermark {
  position: absolute;

  top: 45px;
  right: -30px;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(8rem, 16vw, 16rem);

  line-height: 0.72;

  letter-spacing: -0.055em;

  color:
    transparent;

  -webkit-text-stroke:
    1px
    rgba(7, 47, 107, 0.055);

  user-select: none;
}


.rj-roofing__roofline {
  position: absolute;

  top: 150px;
  right: -170px;

  width: 720px;

  opacity: 0.14;
}


.rj-roofing__roofline path {
  fill: none;

  stroke:
    var(--rj-navy);

  stroke-width: 1.5;

  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 980;
  stroke-dashoffset: 980;

  transition:
    stroke-dashoffset
    1500ms
    var(--rj-ease);
}


.rj-gallery-service--roofing.is-visible
.rj-roofing__roofline path {
  stroke-dashoffset: 0;
}


.rj-roofing__edge {
  position: absolute;

  left: 7%;
  bottom: 0;

  width: 1px;
  height: 150px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(7, 47, 107, 0.26)
    );
}


/* =========================================================
   03. HEADER
   ========================================================= */

.rj-roofing__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(300px, 0.65fr);

  align-items: end;

  gap:
    clamp(55px, 8vw, 120px);

  margin-bottom:
    clamp(48px, 6vw, 78px);
}


.rj-roofing__heading {
  max-width: 820px;
}


.rj-roofing__title {
  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(3.2rem, 5.3vw, 5.5rem);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.04em;

  color:
    var(--rj-navy-deep);
}


.rj-roofing__title span {
  display: block;

  color:
    #596675;
}


/* =========================================================
   04. INTRO
   ========================================================= */

.rj-roofing__intro {
  max-width: 500px;

  justify-self: end;
}


.rj-roofing__intro > p {
  margin:
    0
    0
    21px;

  font-size: 1rem;

  line-height: 1.72;

  color:
    var(--rj-text-soft);
}


.rj-roofing__note {
  display: flex;

  align-items: center;

  gap: 11px;
}


.rj-roofing__note > span {
  width: 25px;
  height: 1px;

  background:
    var(--rj-navy);
}


.rj-roofing__note p {
  margin: 0;

  font-size: 0.77rem;
  font-weight: 700;

  color:
    var(--rj-steel-blue);
}


/* =========================================================
   05. FEATURED COMPOSITION
   ========================================================= */

.rj-roofing-feature {
  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  grid-auto-rows:
    clamp(155px, 13vw, 215px);

  grid-auto-flow:
    dense;

  gap:
    clamp(10px, 1.1vw, 17px);

  margin-bottom:
    clamp(75px, 8vw, 115px);
}


/* main panoramic */

.rj-roofing-feature
.rj-gallery-media--lead-1 {
  grid-column:
    span 8;

  grid-row:
    span 2;
}


/* tall supporting */

.rj-roofing-feature
.rj-gallery-media--lead-2 {
  grid-column:
    span 4;

  grid-row:
    span 2;
}


/* lower strip */

.rj-roofing-feature
.rj-gallery-media--lead-3 {
  grid-column:
    span 5;

  grid-row:
    span 1;
}


.rj-roofing-feature
.rj-gallery-media--lead-4 {
  grid-column:
    span 4;

  grid-row:
    span 1;
}


.rj-roofing-feature
.rj-gallery-media--lead-5 {
  grid-column:
    span 3;

  grid-row:
    span 1;
}


/* =========================================================
   06. ROOFING MEDIA TREATMENT
   ========================================================= */

.rj-gallery-service--roofing
.rj-gallery-media {
  border-radius: 10px;

  box-shadow:
    0 16px 40px
    rgba(6, 27, 56, 0.1);
}


.rj-gallery-service--roofing
.rj-gallery-media::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: inherit;
}


/* =========================================================
   07. ARCHIVE HEADER
   ========================================================= */

.rj-roofing-archive__header {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 45px;

  margin-bottom: 32px;

  padding-bottom: 24px;

  border-bottom:
    1px solid
    rgba(7, 47, 107, 0.12);
}


.rj-roofing-archive__eyebrow {
  display: block;

  margin-bottom: 6px;

  font-size: 0.71rem;
  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;

  color:
    var(--rj-steel-blue);
}


.rj-roofing-archive__header h3 {
  margin: 0;

  font-family:
    var(--rj-font-display);

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

  font-weight: 400;

  line-height: 1;

  color:
    var(--rj-navy-deep);
}


.rj-roofing-archive__header > p {
  max-width: 420px;

  margin: 0;

  font-size: 0.91rem;

  line-height: 1.65;

  color:
    var(--rj-text-soft);
}


/* =========================================================
   08. SECONDARY GRID
   ========================================================= */

.rj-roofing-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-auto-rows:
    clamp(175px, 14vw, 225px);

  grid-auto-flow:
    dense;

  gap:
    clamp(10px, 1vw, 15px);
}


/*
  gallery-sections.js automatically adds:
  - image 7  = tall
  - image 11 = wide

  The other images remain standard.
*/


.rj-roofing-grid
.rj-gallery-media--wide {
  grid-column:
    span 2;
}


.rj-roofing-grid
.rj-gallery-media--tall {
  grid-row:
    span 2;
}


.rj-roofing-grid
.rj-gallery-media--large {
  grid-column:
    span 2;

  grid-row:
    span 2;
}


/* =========================================================
   09. DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

  .rj-roofing-feature {
    grid-auto-rows:
      clamp(165px, 13vw, 215px);
  }


  .rj-roofing-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

}


/* =========================================================
   10. TABLET
   ========================================================= */

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

  .rj-gallery-service--roofing {
    padding:
      95px
      0
      115px;
  }


  .rj-roofing__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.72fr);

    gap: 48px;
  }


  .rj-roofing__title {
    font-size:
      clamp(2.8rem, 5.6vw, 4.3rem);
  }


  .rj-roofing-feature {
    grid-auto-rows:
      155px;
  }


  .rj-roofing-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      span 7;
  }


  .rj-roofing-feature
  .rj-gallery-media--lead-2 {
    grid-column:
      span 5;
  }


  .rj-roofing-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    grid-auto-rows:
      190px;
  }

}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .rj-gallery-service--roofing {
    padding:
      78px
      0
      92px;
  }


  .rj-roofing__header {
    grid-template-columns: 1fr;

    gap: 27px;

    margin-bottom: 45px;
  }


  .rj-roofing__intro {
    max-width: 570px;

    justify-self: initial;
  }


  .rj-roofing__title {
    font-size:
      clamp(2.6rem, 8vw, 3.7rem);
  }


  .rj-roofing-feature {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows:
      190px;

    margin-bottom: 75px;
  }


  .rj-roofing-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      span 2;

    grid-row:
      span 2;
  }


  .rj-roofing-feature
  .rj-gallery-media--lead-2,
  .rj-roofing-feature
  .rj-gallery-media--lead-3,
  .rj-roofing-feature
  .rj-gallery-media--lead-4,
  .rj-roofing-feature
  .rj-gallery-media--lead-5 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-roofing-archive__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 13px;
  }


  .rj-roofing-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows:
      180px;
  }


  .rj-roofing-grid
  .rj-gallery-media--wide,
  .rj-roofing-grid
  .rj-gallery-media--large {
    grid-column:
      span 2;
  }

}


/* =========================================================
   12. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .rj-gallery-service--roofing {
    padding:
      68px
      0
      82px;
  }


  .rj-roofing__header {
    grid-template-columns: 1fr;

    gap: 24px;

    margin-bottom: 38px;
  }


  .rj-roofing__title {
    font-size:
      clamp(2.35rem, 10vw, 3.15rem);

    line-height: 0.98;
  }


  .rj-roofing__intro {
    justify-self: initial;
  }


  .rj-roofing__intro > p {
    font-size: 0.93rem;

    line-height: 1.67;
  }


  .rj-roofing-feature {
    grid-template-columns: 1fr;

    grid-auto-rows:
      255px;

    gap: 9px;

    margin-bottom: 63px;
  }


  .rj-roofing-feature
  .rj-gallery-media--lead-1,
  .rj-roofing-feature
  .rj-gallery-media--lead-2,
  .rj-roofing-feature
  .rj-gallery-media--lead-3,
  .rj-roofing-feature
  .rj-gallery-media--lead-4,
  .rj-roofing-feature
  .rj-gallery-media--lead-5 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-roofing-archive__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 24px;
  }


  .rj-roofing-archive__header h3 {
    font-size: 2rem;
  }


  .rj-roofing-grid {
    grid-template-columns: 1fr;

    grid-auto-rows:
      280px;

    gap: 9px;
  }


  .rj-roofing-grid
  .rj-gallery-media--wide,
  .rj-roofing-grid
  .rj-gallery-media--tall,
  .rj-roofing-grid
  .rj-gallery-media--large {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-roofing__watermark {
    font-size: 7.5rem;
  }

}




















































/* =========================================================
   RJ PAINTING & REMODELING SERVICES
   GALLERY.HTML
   KITCHEN & BATHROOM REMODELING
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.rj-gallery-service--remodeling {
  position: relative;

  overflow: hidden;

  scroll-margin-top:
    var(--rj-scroll-offset);

  padding:
    clamp(92px, 9vw, 148px)
    0
    clamp(108px, 10vw, 165px);

  background:
    radial-gradient(
      circle at 10% 14%,
      rgba(162, 163, 167, 0.09),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 39%,
      rgba(36, 91, 155, 0.055),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #FBFAF8 0%,
      #F4F5F5 48%,
      #F8F8F7 100%
    );

  isolation: isolate;
}


.rj-gallery-service--remodeling::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.12;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    multiply;
}


.rj-gallery-service--remodeling
> .rj-container {
  position: relative;

  z-index: 3;
}


/* =========================================================
   02. DECORATION
   ========================================================= */

.rj-remodeling__decor {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


.rj-remodeling__watermark {
  position: absolute;

  top: 48px;
  right: -32px;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(7.5rem, 14vw, 15rem);

  line-height: 0.72;

  letter-spacing: -0.055em;

  color:
    transparent;

  -webkit-text-stroke:
    1px
    rgba(7, 47, 107, 0.05);

  user-select: none;
}


/* architectural frames */

.rj-remodeling__frame {
  position: absolute;

  border:
    1px solid
    rgba(7, 47, 107, 0.065);

  border-radius: 18px;
}


.rj-remodeling__frame--one {
  top: 310px;
  left: -105px;

  width: 320px;
  height: 430px;

  transform:
    rotate(-5deg);
}


.rj-remodeling__frame--two {
  right: -110px;
  bottom: 190px;

  width: 310px;
  height: 390px;

  transform:
    rotate(6deg);
}


.rj-remodeling__line {
  position: absolute;

  top: 215px;
  right: -275px;

  width: 750px;

  opacity: 0.1;

  transform:
    rotate(-6deg);
}


.rj-remodeling__line path {
  fill: none;

  stroke:
    var(--rj-navy);

  stroke-width: 1.4;

  stroke-linecap: round;

  stroke-dasharray: 900;
  stroke-dashoffset: 900;

  transition:
    stroke-dashoffset
    1500ms
    var(--rj-ease);
}


.rj-gallery-service--remodeling.is-visible
.rj-remodeling__line path {
  stroke-dashoffset: 0;
}


/* =========================================================
   03. HEADER
   ========================================================= */

.rj-remodeling__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(55px, 8vw, 125px);

  margin-bottom:
    clamp(52px, 6vw, 82px);
}


.rj-remodeling__heading {
  max-width: 850px;
}


.rj-remodeling__title {
  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(3.2rem, 5.4vw, 5.6rem);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.04em;

  color:
    var(--rj-navy-deep);
}


.rj-remodeling__title span {
  display: block;

  color:
    #596675;
}


/* =========================================================
   04. INTRO
   ========================================================= */

.rj-remodeling__intro {
  max-width: 500px;

  justify-self: end;
}


.rj-remodeling__intro > p {
  margin:
    0
    0
    22px;

  font-size: 1rem;

  line-height: 1.72;

  color:
    var(--rj-text-soft);
}


.rj-remodeling__note {
  display: flex;

  align-items: center;

  gap: 11px;
}


.rj-remodeling__note > span {
  width: 25px;
  height: 1px;

  background:
    var(--rj-navy);
}


.rj-remodeling__note p {
  margin: 0;

  font-size: 0.77rem;
  font-weight: 700;

  color:
    var(--rj-steel-blue);
}


/* =========================================================
   05. FEATURED COMPOSITION
   ========================================================= */

.rj-remodeling-feature {
  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  grid-auto-rows:
    clamp(150px, 13vw, 210px);

  grid-auto-flow:
    dense;

  gap:
    clamp(10px, 1.15vw, 17px);

  margin-bottom:
    clamp(80px, 9vw, 125px);
}


/* large primary */

.rj-remodeling-feature
.rj-gallery-media--lead-1 {
  grid-column:
    span 7;

  grid-row:
    span 2;
}


/* tall vertical */

.rj-remodeling-feature
.rj-gallery-media--lead-2 {
  grid-column:
    span 5;

  grid-row:
    span 2;
}


/* lower rhythm */

.rj-remodeling-feature
.rj-gallery-media--lead-3 {
  grid-column:
    span 4;
}


.rj-remodeling-feature
.rj-gallery-media--lead-4 {
  grid-column:
    span 5;
}


.rj-remodeling-feature
.rj-gallery-media--lead-5 {
  grid-column:
    span 3;
}


.rj-remodeling-feature
.rj-gallery-media--lead-6 {
  grid-column:
    3 / span 8;

  min-height:
    clamp(230px, 25vw, 375px);
}


/* =========================================================
   06. REMODELING MEDIA IDENTITY
   ========================================================= */

.rj-gallery-service--remodeling
.rj-gallery-media {
  border-radius: 17px;

  background:
    #E2E4E5;

  box-shadow:
    0 18px 48px
    rgba(6, 27, 56, 0.1);
}


.rj-gallery-service--remodeling
.rj-gallery-media::before {
  content: "";

  position: absolute;

  inset: 8px;

  z-index: 2;

  pointer-events: none;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 11px;

  opacity: 0;

  transition:
    opacity
    var(--rj-normal)
    var(--rj-ease);
}


.rj-gallery-service--remodeling
.rj-gallery-media:hover::before {
  opacity: 1;
}


/* =========================================================
   07. ARCHIVE HEADER
   ========================================================= */

.rj-remodeling-archive__header {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 45px;

  margin-bottom: 33px;

  padding-bottom: 25px;

  border-bottom:
    1px solid
    rgba(7, 47, 107, 0.12);
}


.rj-remodeling-archive__eyebrow {
  display: block;

  margin-bottom: 6px;

  font-size: 0.71rem;
  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;

  color:
    var(--rj-steel-blue);
}


.rj-remodeling-archive__header h3 {
  margin: 0;

  font-family:
    var(--rj-font-display);

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

  font-weight: 400;

  line-height: 1;

  color:
    var(--rj-navy-deep);
}


.rj-remodeling-archive__header > p {
  max-width: 420px;

  margin: 0;

  font-size: 0.91rem;

  line-height: 1.65;

  color:
    var(--rj-text-soft);
}


/* =========================================================
   08. LARGE COLLECTION
   ========================================================= */

.rj-remodeling-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-auto-rows:
    clamp(175px, 15vw, 235px);

  grid-auto-flow:
    dense;

  gap:
    clamp(10px, 1vw, 15px);
}


/* classes assigned by gallery-sections.js */

.rj-remodeling-grid
.rj-gallery-media--wide {
  grid-column:
    span 2;
}


.rj-remodeling-grid
.rj-gallery-media--tall {
  grid-row:
    span 2;
}


.rj-remodeling-grid
.rj-gallery-media--large {
  grid-column:
    span 2;

  grid-row:
    span 2;
}


/*
  Remodeling gets a slightly softer treatment
  than Roofing when enlarged in the grid.
*/

.rj-remodeling-grid
.rj-gallery-media--large {
  border-radius: 20px;
}


/* =========================================================
   09. DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

  .rj-remodeling-feature {
    grid-auto-rows:
      clamp(165px, 13vw, 215px);
  }


  .rj-remodeling-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

}


/* =========================================================
   10. TABLET
   ========================================================= */

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

  .rj-gallery-service--remodeling {
    padding:
      95px
      0
      118px;
  }


  .rj-remodeling__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.72fr);

    gap: 48px;
  }


  .rj-remodeling__title {
    font-size:
      clamp(2.8rem, 5.6vw, 4.3rem);
  }


  .rj-remodeling-feature {
    grid-auto-rows:
      155px;
  }


  .rj-remodeling-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      span 7;
  }


  .rj-remodeling-feature
  .rj-gallery-media--lead-2 {
    grid-column:
      span 5;
  }


  .rj-remodeling-feature
  .rj-gallery-media--lead-6 {
    grid-column:
      2 / span 10;
  }


  .rj-remodeling-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    grid-auto-rows:
      190px;
  }

}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .rj-gallery-service--remodeling {
    padding:
      78px
      0
      94px;
  }


  .rj-remodeling__header {
    grid-template-columns: 1fr;

    gap: 27px;

    margin-bottom: 45px;
  }


  .rj-remodeling__intro {
    max-width: 570px;

    justify-self: initial;
  }


  .rj-remodeling__title {
    font-size:
      clamp(2.6rem, 8vw, 3.7rem);
  }


  .rj-remodeling-feature {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows:
      190px;

    margin-bottom: 76px;
  }


  .rj-remodeling-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      span 2;

    grid-row:
      span 2;
  }


  .rj-remodeling-feature
  .rj-gallery-media--lead-2 {
    grid-column:
      span 1;

    grid-row:
      span 2;
  }


  .rj-remodeling-feature
  .rj-gallery-media--lead-3,
  .rj-remodeling-feature
  .rj-gallery-media--lead-4,
  .rj-remodeling-feature
  .rj-gallery-media--lead-5 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-remodeling-feature
  .rj-gallery-media--lead-6 {
    grid-column:
      span 2;

    min-height: 240px;
  }


  .rj-remodeling-archive__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 13px;
  }


  .rj-remodeling-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows:
      180px;
  }


  .rj-remodeling-grid
  .rj-gallery-media--wide,
  .rj-remodeling-grid
  .rj-gallery-media--large {
    grid-column:
      span 2;
  }

}


/* =========================================================
   12. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .rj-gallery-service--remodeling {
    padding:
      68px
      0
      84px;
  }


  .rj-remodeling__header {
    grid-template-columns: 1fr;

    gap: 24px;

    margin-bottom: 39px;
  }


  .rj-remodeling__title {
    font-size:
      clamp(2.35rem, 10vw, 3.15rem);

    line-height: 0.98;
  }


  .rj-remodeling__intro {
    justify-self: initial;
  }


  .rj-remodeling__intro > p {
    font-size: 0.93rem;

    line-height: 1.67;
  }


  .rj-remodeling-feature {
    grid-template-columns: 1fr;

    grid-auto-rows:
      260px;

    gap: 9px;

    margin-bottom: 65px;
  }


  .rj-remodeling-feature
  .rj-gallery-media--lead-1,
  .rj-remodeling-feature
  .rj-gallery-media--lead-2,
  .rj-remodeling-feature
  .rj-gallery-media--lead-3,
  .rj-remodeling-feature
  .rj-gallery-media--lead-4,
  .rj-remodeling-feature
  .rj-gallery-media--lead-5,
  .rj-remodeling-feature
  .rj-gallery-media--lead-6 {
    grid-column:
      span 1;

    grid-row:
      span 1;

    min-height: 0;
  }


  .rj-remodeling-archive__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 24px;
  }


  .rj-remodeling-archive__header h3 {
    font-size: 2rem;
  }


  .rj-remodeling-grid {
    grid-template-columns: 1fr;

    grid-auto-rows:
      280px;

    gap: 9px;
  }


  .rj-remodeling-grid
  .rj-gallery-media--wide,
  .rj-remodeling-grid
  .rj-gallery-media--tall,
  .rj-remodeling-grid
  .rj-gallery-media--large {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-remodeling__watermark {
    font-size: 6.8rem;
  }


  .rj-remodeling__frame--one {
    display: none;
  }

}





















































/* =========================================================
   RJ PAINTING & REMODELING SERVICES
   GALLERY.HTML
   09. FLOORING
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.rj-gallery-service--flooring {
  position: relative;

  overflow: hidden;

  scroll-margin-top:
    var(--rj-scroll-offset);

  padding:
    clamp(90px, 9vw, 145px)
    0
    clamp(95px, 9vw, 145px);

  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(86, 113, 141, 0.08),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 84%,
      rgba(162, 163, 167, 0.07),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #F5F5F3 0%,
      #ECEFF0 52%,
      #F8F8F7 100%
    );

  isolation: isolate;
}


.rj-gallery-service--flooring::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.12;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.67' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    multiply;
}


.rj-gallery-service--flooring
> .rj-container {
  position: relative;

  z-index: 3;
}


/* =========================================================
   02. DECORATION
   ========================================================= */

.rj-flooring__decor {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


.rj-flooring__watermark {
  position: absolute;

  top: 45px;
  right: -25px;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(8rem, 16vw, 16rem);

  line-height: 0.72;

  letter-spacing: -0.055em;

  color:
    transparent;

  -webkit-text-stroke:
    1px
    rgba(7, 47, 107, 0.05);

  user-select: none;
}


/* long horizontal floor seams */

.rj-flooring__seam {
  position: absolute;

  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(7, 47, 107, 0.05) 18%,
      rgba(7, 47, 107, 0.09) 50%,
      rgba(7, 47, 107, 0.04) 82%,
      transparent 100%
    );
}


.rj-flooring__seam--one {
  top: 41%;
}


.rj-flooring__seam--two {
  top: 72%;
}


/* =========================================================
   03. PERSPECTIVE LINES
   ========================================================= */

.rj-flooring__perspective {
  position: absolute;

  right: -170px;
  bottom: 65px;

  width: 620px;

  opacity: 0.1;
}


.rj-flooring__perspective path {
  fill: none;

  stroke:
    var(--rj-navy);

  stroke-width: 1.2;

  stroke-linecap: round;

  stroke-dasharray: 420;
  stroke-dashoffset: 420;

  transition:
    stroke-dashoffset
    1350ms
    var(--rj-ease);
}


.rj-gallery-service--flooring.is-visible
.rj-flooring__perspective path {
  stroke-dashoffset: 0;
}


/* =========================================================
   04. HEADER
   ========================================================= */

.rj-flooring__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(300px, 0.64fr);

  align-items: end;

  gap:
    clamp(55px, 8vw, 120px);

  margin-bottom:
    clamp(50px, 6vw, 78px);
}


.rj-flooring__heading {
  max-width: 830px;
}


.rj-flooring__title {
  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(3.2rem, 5.3vw, 5.5rem);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.04em;

  color:
    var(--rj-navy-deep);
}


.rj-flooring__title span {
  display: block;

  color:
    #596675;
}


/* =========================================================
   05. INTRO
   ========================================================= */

.rj-flooring__intro {
  max-width: 500px;

  justify-self: end;
}


.rj-flooring__intro > p {
  margin:
    0
    0
    21px;

  font-size: 1rem;

  line-height: 1.72;

  color:
    var(--rj-text-soft);
}


.rj-flooring__note {
  display: flex;

  align-items: center;

  gap: 11px;
}


.rj-flooring__note > span {
  flex:
    0
    0
    25px;

  width: 25px;
  height: 1px;

  background:
    var(--rj-navy);
}


.rj-flooring__note p {
  margin: 0;

  font-size: 0.77rem;
  font-weight: 700;

  color:
    var(--rj-steel-blue);
}


/* =========================================================
   06. FIVE-IMAGE COMPOSITION
   ========================================================= */

.rj-flooring-feature {
  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  grid-template-rows:
    repeat(
      3,
      clamp(145px, 13vw, 205px)
    );

  gap:
    clamp(10px, 1.15vw, 17px);

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


/* =========================================================
   07. MAIN IMAGE
   ========================================================= */

.rj-flooring-feature
.rj-gallery-media--lead-1 {
  grid-column:
    1 / span 8;

  grid-row:
    1 / span 2;
}


/* =========================================================
   08. RIGHT STACK
   ========================================================= */

.rj-flooring-feature
.rj-gallery-media--lead-2 {
  grid-column:
    9 / span 4;

  grid-row: 1;
}


.rj-flooring-feature
.rj-gallery-media--lead-3 {
  grid-column:
    9 / span 4;

  grid-row: 2;
}


/* =========================================================
   09. LOWER STRIP
   ========================================================= */

.rj-flooring-feature
.rj-gallery-media--lead-4 {
  grid-column:
    1 / span 5;

  grid-row: 3;
}


.rj-flooring-feature
.rj-gallery-media--lead-5 {
  grid-column:
    6 / span 7;

  grid-row: 3;
}


/* =========================================================
   10. FLOORING MEDIA IDENTITY
   ========================================================= */

.rj-gallery-service--flooring
.rj-gallery-media {
  border-radius: 9px;

  background:
    #DBDEE0;

  box-shadow:
    0 17px 44px
    rgba(6, 27, 56, 0.105);
}


/*
  Thin architectural line inside each image,
  reinforcing the flooring theme without
  obscuring the photography.
*/

.rj-gallery-service--flooring
.rj-gallery-media::before {
  content: "";

  position: absolute;

  z-index: 2;

  right: 12px;
  bottom: 12px;
  left: 12px;

  height: 1px;

  pointer-events: none;

  opacity: 0;

  background:
    rgba(255, 255, 255, 0.52);

  transform:
    scaleX(0.7);

  transform-origin:
    left center;

  transition:
    opacity
    var(--rj-normal)
    var(--rj-ease),
    transform
    var(--rj-normal)
    var(--rj-ease);
}


.rj-gallery-service--flooring
.rj-gallery-media:hover::before {
  opacity: 1;

  transform:
    scaleX(1);
}


/* =========================================================
   11. CLOSING
   ========================================================= */

.rj-flooring__closing {
  display: grid;

  grid-template-columns:
    minmax(60px, 1fr)
    auto
    minmax(60px, 1fr);

  align-items: center;

  gap:
    clamp(20px, 3vw, 38px);

  max-width: 930px;

  margin-inline: auto;
}


.rj-flooring__closing-line {
  display: block;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(7, 47, 107, 0.17)
    );
}


.rj-flooring__closing-line:last-child {
  transform:
    scaleX(-1);
}


.rj-flooring__closing p {
  max-width: 510px;

  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(1.25rem, 1.7vw, 1.6rem);

  font-weight: 400;

  line-height: 1.25;

  text-align: center;

  color:
    #596675;
}


/* =========================================================
   12. DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

  .rj-flooring-feature {
    grid-template-rows:
      repeat(
        3,
        clamp(160px, 13vw, 215px)
      );
  }

}


/* =========================================================
   13. TABLET
   ========================================================= */

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

  .rj-gallery-service--flooring {
    padding:
      95px
      0
      112px;
  }


  .rj-flooring__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.72fr);

    gap: 48px;
  }


  .rj-flooring__title {
    font-size:
      clamp(2.8rem, 5.6vw, 4.3rem);
  }


  .rj-flooring-feature {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    grid-template-rows:
      repeat(3, 160px);
  }


  .rj-flooring-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      1 / span 4;

    grid-row:
      1 / span 2;
  }


  .rj-flooring-feature
  .rj-gallery-media--lead-2 {
    grid-column:
      5 / span 2;

    grid-row: 1;
  }


  .rj-flooring-feature
  .rj-gallery-media--lead-3 {
    grid-column:
      5 / span 2;

    grid-row: 2;
  }


  .rj-flooring-feature
  .rj-gallery-media--lead-4 {
    grid-column:
      1 / span 3;

    grid-row: 3;
  }


  .rj-flooring-feature
  .rj-gallery-media--lead-5 {
    grid-column:
      4 / span 3;

    grid-row: 3;
  }

}


/* =========================================================
   14. MOBILE
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .rj-gallery-service--flooring {
    padding:
      78px
      0
      91px;
  }


  .rj-flooring__header {
    grid-template-columns: 1fr;

    gap: 27px;

    margin-bottom: 44px;
  }


  .rj-flooring__intro {
    max-width: 570px;

    justify-self: initial;
  }


  .rj-flooring__title {
    font-size:
      clamp(2.6rem, 8vw, 3.7rem);
  }


  .rj-flooring-feature {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      210px
      190px
      190px
      190px;
  }


  .rj-flooring-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      span 2;

    grid-row:
      span 2;
  }


  .rj-flooring-feature
  .rj-gallery-media--lead-2,
  .rj-flooring-feature
  .rj-gallery-media--lead-3,
  .rj-flooring-feature
  .rj-gallery-media--lead-4,
  .rj-flooring-feature
  .rj-gallery-media--lead-5 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-flooring__closing {
    grid-template-columns:
      45px
      minmax(0, 1fr)
      45px;

    gap: 17px;
  }

}


/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .rj-gallery-service--flooring {
    padding:
      68px
      0
      80px;
  }


  .rj-flooring__header {
    grid-template-columns: 1fr;

    gap: 24px;

    margin-bottom: 38px;
  }


  .rj-flooring__title {
    font-size:
      clamp(2.35rem, 10vw, 3.15rem);

    line-height: 0.98;
  }


  .rj-flooring__intro {
    justify-self: initial;
  }


  .rj-flooring__intro > p {
    font-size: 0.93rem;

    line-height: 1.67;
  }


  .rj-flooring-feature {
    grid-template-columns: 1fr;

    grid-template-rows: none;

    grid-auto-rows:
      275px;

    gap: 9px;

    margin-bottom: 50px;
  }


  .rj-flooring-feature
  .rj-gallery-media--lead-1,
  .rj-flooring-feature
  .rj-gallery-media--lead-2,
  .rj-flooring-feature
  .rj-gallery-media--lead-3,
  .rj-flooring-feature
  .rj-gallery-media--lead-4,
  .rj-flooring-feature
  .rj-gallery-media--lead-5 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-flooring__closing {
    display: block;
  }


  .rj-flooring__closing-line {
    display: none;
  }


  .rj-flooring__closing p {
    max-width: 330px;

    margin-inline: auto;

    font-size: 1.25rem;
  }


  .rj-flooring__watermark {
    font-size: 7rem;
  }


  .rj-flooring__perspective {
    right: -330px;

    opacity: 0.065;
  }

}















































/* =========================================================
   RJ PAINTING & REMODELING SERVICES
   GALLERY.HTML
   10. DECK, PORCH & OUTDOOR CONSTRUCTION
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.rj-gallery-service--outdoor {
  position: relative;

  overflow: hidden;

  scroll-margin-top:
    var(--rj-scroll-offset);

  padding:
    clamp(90px, 9vw, 145px)
    0
    clamp(95px, 9vw, 145px);

  background:
    radial-gradient(
      circle at 84% 13%,
      rgba(36, 91, 155, 0.09),
      transparent 26%
    ),
    radial-gradient(
      circle at 12% 84%,
      rgba(86, 113, 141, 0.08),
      transparent 30%
    ),
    linear-gradient(
      150deg,
      #EDF0F1 0%,
      #F8F8F7 48%,
      #F2F3F3 100%
    );

  isolation: isolate;
}


.rj-gallery-service--outdoor::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.12;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    multiply;
}


.rj-gallery-service--outdoor
> .rj-container {
  position: relative;

  z-index: 3;
}


/* =========================================================
   02. DECORATION
   ========================================================= */

.rj-outdoor__decor {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


.rj-outdoor__watermark {
  position: absolute;

  top: 48px;
  right: -26px;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(8rem, 15vw, 15rem);

  line-height: 0.72;

  letter-spacing: -0.055em;

  color:
    transparent;

  -webkit-text-stroke:
    1px
    rgba(7, 47, 107, 0.05);

  user-select: none;
}


/* =========================================================
   03. STRUCTURAL BEAMS
   ========================================================= */

.rj-outdoor__beam {
  position: absolute;

  display: block;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(7, 47, 107, 0.1),
      transparent
    );
}


.rj-outdoor__beam--one {
  top: 20%;
  left: 8%;

  width: 1px;
  height: 310px;
}


.rj-outdoor__beam--two {
  top: 34%;
  right: 9%;

  width: 1px;
  height: 390px;
}


.rj-outdoor__beam--three {
  right: 0;
  bottom: 14%;

  width: 280px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(7, 47, 107, 0.12)
    );
}


/* =========================================================
   04. STRUCTURE DRAWING
   ========================================================= */

.rj-outdoor__structure {
  position: absolute;

  right: -215px;
  bottom: 60px;

  width: 560px;

  opacity: 0.1;
}


.rj-outdoor__structure path {
  fill: none;

  stroke:
    var(--rj-navy);

  stroke-width: 1.25;

  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 850;
  stroke-dashoffset: 850;

  transition:
    stroke-dashoffset
    1450ms
    var(--rj-ease);
}


.rj-gallery-service--outdoor.is-visible
.rj-outdoor__structure path {
  stroke-dashoffset: 0;
}


/* =========================================================
   05. HEADER
   ========================================================= */

.rj-outdoor__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(300px, 0.64fr);

  align-items: end;

  gap:
    clamp(55px, 8vw, 120px);

  margin-bottom:
    clamp(52px, 6vw, 80px);
}


.rj-outdoor__heading {
  max-width: 850px;
}


.rj-outdoor__title {
  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(3.2rem, 5.3vw, 5.5rem);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.04em;

  color:
    var(--rj-navy-deep);
}


.rj-outdoor__title span {
  display: block;

  color:
    #596675;
}


/* =========================================================
   06. INTRO
   ========================================================= */

.rj-outdoor__intro {
  max-width: 500px;

  justify-self: end;
}


.rj-outdoor__intro > p {
  margin:
    0
    0
    21px;

  font-size: 1rem;

  line-height: 1.72;

  color:
    var(--rj-text-soft);
}


.rj-outdoor__note {
  display: flex;

  align-items: center;

  gap: 11px;
}


.rj-outdoor__note > span {
  flex:
    0
    0
    25px;

  width: 25px;
  height: 1px;

  background:
    var(--rj-navy);
}


.rj-outdoor__note p {
  margin: 0;

  font-size: 0.77rem;
  font-weight: 700;

  color:
    var(--rj-steel-blue);
}


/* =========================================================
   07. TWO IMAGE COMPOSITION
   ========================================================= */

.rj-outdoor-feature {
  display: grid;

  grid-template-columns:
    minmax(0, 1.7fr)
    minmax(260px, 0.72fr);

  grid-template-rows:
    minmax(
      460px,
      38vw
    );

  align-items: center;

  gap:
    clamp(18px, 2.3vw, 34px);

  margin-bottom:
    clamp(62px, 7vw, 95px);
}


/* =========================================================
   08. PRIMARY IMAGE
   ========================================================= */

.rj-outdoor-feature
.rj-gallery-media--lead-1 {
  position: relative;

  width: 100%;
  height: 100%;

  border-radius: 14px;
}


/* =========================================================
   09. SECOND IMAGE
   ========================================================= */

.rj-outdoor-feature
.rj-gallery-media--lead-2 {
  position: relative;

  width: 100%;
  height: 72%;

  align-self: end;

  margin-bottom:
    clamp(25px, 4vw, 65px);

  border-radius: 14px;

  transform:
    translateX(
      clamp(-10px, -1vw, -20px)
    );
}


.rj-outdoor-feature
.rj-gallery-media--lead-2:hover {
  transform:
    translateX(
      clamp(-10px, -1vw, -20px)
    )
    translateY(-3px);
}


/* =========================================================
   10. OUTDOOR IMAGE IDENTITY
   ========================================================= */

.rj-gallery-service--outdoor
.rj-gallery-media {
  background:
    #DDE1E2;

  box-shadow:
    0 20px 52px
    rgba(6, 27, 56, 0.12);
}


.rj-gallery-service--outdoor
.rj-gallery-media::before {
  content: "";

  position: absolute;

  inset: 9px;

  z-index: 2;

  border:
    1px solid
    rgba(255, 255, 255, 0.17);

  border-radius:
    8px;

  pointer-events: none;

  opacity: 0;

  transition:
    opacity
    var(--rj-normal)
    var(--rj-ease);
}


.rj-gallery-service--outdoor
.rj-gallery-media:hover::before {
  opacity: 1;
}


/* =========================================================
   11. CLOSING
   ========================================================= */

.rj-outdoor__closing {
  display: grid;

  grid-template-columns:
    85px
    minmax(0, 610px);

  align-items: start;

  gap: 24px;

  max-width: 750px;

  margin-left: auto;
}


.rj-outdoor__closing-line {
  display: block;

  width: 100%;
  height: 1px;

  margin-top: 11px;

  background:
    linear-gradient(
      90deg,
      var(--rj-navy),
      rgba(7, 47, 107, 0.08)
    );
}


.rj-outdoor__closing div {
  display: flex;

  flex-direction: column;

  gap: 7px;
}


.rj-outdoor__closing small {
  font-size: 0.69rem;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    var(--rj-steel-blue);
}


.rj-outdoor__closing p {
  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(1.25rem, 1.8vw, 1.65rem);

  font-weight: 400;

  line-height: 1.3;

  color:
    #596675;
}


/* =========================================================
   12. DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

  .rj-outdoor-feature {
    grid-template-columns:
      minmax(0, 1.72fr)
      minmax(300px, 0.7fr);

    grid-template-rows:
      minmax(
        500px,
        38vw
      );
  }

}


/* =========================================================
   13. TABLET
   ========================================================= */

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

  .rj-gallery-service--outdoor {
    padding:
      95px
      0
      112px;
  }


  .rj-outdoor__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.72fr);

    gap: 48px;
  }


  .rj-outdoor__title {
    font-size:
      clamp(2.8rem, 5.6vw, 4.3rem);
  }


  .rj-outdoor-feature {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(240px, 0.72fr);

    grid-template-rows:
      470px;

    gap: 20px;
  }


  .rj-outdoor-feature
  .rj-gallery-media--lead-2 {
    height: 68%;

    margin-bottom: 40px;
  }

}


/* =========================================================
   14. MOBILE
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .rj-gallery-service--outdoor {
    padding:
      78px
      0
      90px;
  }


  .rj-outdoor__header {
    grid-template-columns: 1fr;

    gap: 27px;

    margin-bottom: 44px;
  }


  .rj-outdoor__intro {
    max-width: 570px;

    justify-self: initial;
  }


  .rj-outdoor__title {
    font-size:
      clamp(2.6rem, 8vw, 3.7rem);
  }


  .rj-outdoor-feature {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      370px;

    gap: 12px;

    margin-bottom: 62px;
  }


  .rj-outdoor-feature
  .rj-gallery-media--lead-1 {
    height: 100%;
  }


  .rj-outdoor-feature
  .rj-gallery-media--lead-2 {
    height: 78%;

    align-self: end;

    margin: 0;

    transform: none;
  }


  .rj-outdoor-feature
  .rj-gallery-media--lead-2:hover {
    transform:
      translateY(-3px);
  }


  .rj-outdoor__closing {
    grid-template-columns:
      60px
      minmax(0, 1fr);

    max-width: 590px;

    margin-left: 0;
  }

}


/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .rj-gallery-service--outdoor {
    padding:
      68px
      0
      80px;
  }


  .rj-outdoor__header {
    grid-template-columns: 1fr;

    gap: 24px;

    margin-bottom: 38px;
  }


  .rj-outdoor__title {
    font-size:
      clamp(2.35rem, 10vw, 3.15rem);

    line-height: 0.98;
  }


  .rj-outdoor__intro {
    justify-self: initial;
  }


  .rj-outdoor__intro > p {
    font-size: 0.93rem;

    line-height: 1.67;
  }


  .rj-outdoor-feature {
    grid-template-columns: 1fr;

    grid-template-rows: none;

    grid-auto-rows:
      295px;

    gap: 10px;

    margin-bottom: 50px;
  }


  .rj-outdoor-feature
  .rj-gallery-media--lead-1,
  .rj-outdoor-feature
  .rj-gallery-media--lead-2 {
    width: 100%;
    height: 100%;

    margin: 0;

    transform: none;
  }


  .rj-outdoor-feature
  .rj-gallery-media--lead-2:hover {
    transform:
      translateY(-3px);
  }


  .rj-outdoor__closing {
    display: block;

    margin-left: 0;
  }


  .rj-outdoor__closing-line {
    width: 47px;

    margin-bottom: 15px;
  }


  .rj-outdoor__closing p {
    font-size: 1.24rem;
  }


  .rj-outdoor__watermark {
    font-size: 6.5rem;
  }


  .rj-outdoor__structure {
    right: -360px;

    opacity: 0.06;
  }


  .rj-outdoor__beam--one,
  .rj-outdoor__beam--two {
    display: none;
  }

}















































/* =========================================================
   RJ PAINTING & REMODELING SERVICES
   GALLERY.HTML
   11. POWER WASHING
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.rj-gallery-service--power {
  position: relative;

  overflow: hidden;

  scroll-margin-top:
    var(--rj-scroll-offset);

  padding:
    clamp(92px, 9vw, 148px)
    0
    clamp(108px, 10vw, 165px);

  background:
    radial-gradient(
      circle at 87% 9%,
      rgba(36, 91, 155, 0.09),
      transparent 26%
    ),
    radial-gradient(
      circle at 9% 80%,
      rgba(86, 113, 141, 0.07),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #F7F9FA 0%,
      #EFF3F5 46%,
      #F8F8F7 100%
    );

  isolation: isolate;
}


.rj-gallery-service--power::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.11;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    multiply;
}


.rj-gallery-service--power
> .rj-container {
  position: relative;

  z-index: 3;
}


/* =========================================================
   02. DECORATION
   ========================================================= */

.rj-power__decor {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


.rj-power__watermark {
  position: absolute;

  top: 43px;
  right: -12px;

  font-family:
    var(--rj-font-display);

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

  line-height: 0.72;

  letter-spacing: -0.055em;

  color:
    transparent;

  -webkit-text-stroke:
    1px
    rgba(7, 47, 107, 0.05);

  user-select: none;
}


/* =========================================================
   03. WASH BANDS
   ========================================================= */

.rj-power__wash {
  position: absolute;

  display: block;

  height: 180px;

  border-radius: 999px;

  transform:
    rotate(-8deg);

  filter:
    blur(0.2px);
}


.rj-power__wash--one {
  top: 28%;
  left: -18%;

  width: 78%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(36, 91, 155, 0.035),
      rgba(36, 91, 155, 0.075),
      transparent
    );
}


.rj-power__wash--two {
  right: -25%;
  bottom: 18%;

  width: 72%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(7, 47, 107, 0.045),
      rgba(86, 113, 141, 0.07),
      transparent
    );
}


/* =========================================================
   04. FLOW LINES
   ========================================================= */

.rj-power__flow {
  position: absolute;

  top: 210px;
  right: -310px;

  width: 800px;

  opacity: 0.12;

  transform:
    rotate(-5deg);
}


.rj-power__flow path {
  fill: none;

  stroke:
    var(--rj-navy);

  stroke-width: 1.35;

  stroke-linecap: round;

  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;

  transition:
    stroke-dashoffset
    1450ms
    var(--rj-ease);
}


.rj-power__flow path:last-child {
  transition-delay:
    100ms;
}


.rj-gallery-service--power.is-visible
.rj-power__flow path {
  stroke-dashoffset: 0;
}


/* =========================================================
   05. HEADER
   ========================================================= */

.rj-power__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(55px, 8vw, 125px);

  margin-bottom:
    clamp(52px, 6vw, 82px);
}


.rj-power__heading {
  max-width: 860px;
}


.rj-power__title {
  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(3.2rem, 5.4vw, 5.6rem);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.04em;

  color:
    var(--rj-navy-deep);
}


.rj-power__title span {
  display: block;

  color:
    #596675;
}


/* =========================================================
   06. INTRO
   ========================================================= */

.rj-power__intro {
  max-width: 500px;

  justify-self: end;
}


.rj-power__intro > p {
  margin:
    0
    0
    22px;

  font-size: 1rem;

  line-height: 1.72;

  color:
    var(--rj-text-soft);
}


.rj-power__note {
  display: flex;

  align-items: center;

  gap: 11px;
}


.rj-power__note > span {
  flex:
    0
    0
    25px;

  width: 25px;
  height: 1px;

  background:
    var(--rj-navy);
}


.rj-power__note p {
  margin: 0;

  font-size: 0.77rem;
  font-weight: 700;

  color:
    var(--rj-steel-blue);
}


/* =========================================================
   07. FEATURE STAGE
   ========================================================= */

.rj-power-feature {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  grid-template-rows:
    repeat(
      3,
      clamp(150px, 13vw, 205px)
    );

  grid-auto-flow:
    dense;

  gap:
    clamp(10px, 1.15vw, 17px);

  margin-bottom:
    clamp(82px, 9vw, 128px);

  padding:
    clamp(18px, 2vw, 30px);

  border-radius:
    24px;

  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(36, 91, 155, 0.28),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      var(--rj-navy-deep),
      #0B376D 58%,
      #123F73
    );

  box-shadow:
    0 30px 75px
    rgba(6, 27, 56, 0.16);

  isolation: isolate;
}


/* subtle inner line */

.rj-power-feature::before {
  content: "";

  position: absolute;

  inset: 12px;

  z-index: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    17px;

  pointer-events: none;
}


/* =========================================================
   08. FEATURE IMAGE POSITIONS
   ========================================================= */

.rj-power-feature
.rj-gallery-media {
  z-index: 2;
}


/* Main */

.rj-power-feature
.rj-gallery-media--lead-1 {
  grid-column:
    1 / span 7;

  grid-row:
    1 / span 2;
}


/* Tall / supporting */

.rj-power-feature
.rj-gallery-media--lead-2 {
  grid-column:
    8 / span 5;

  grid-row:
    1 / span 2;
}


/* Lower dynamic sequence */

.rj-power-feature
.rj-gallery-media--lead-3 {
  grid-column:
    1 / span 3;

  grid-row: 3;
}


.rj-power-feature
.rj-gallery-media--lead-4 {
  grid-column:
    4 / span 4;

  grid-row: 3;
}


.rj-power-feature
.rj-gallery-media--lead-5 {
  grid-column:
    8 / span 2;

  grid-row: 3;
}


.rj-power-feature
.rj-gallery-media--lead-6 {
  grid-column:
    10 / span 3;

  grid-row: 3;
}


/* =========================================================
   09. POWER WASHING MEDIA IDENTITY
   ========================================================= */

.rj-gallery-service--power
.rj-gallery-media {
  border-radius:
    12px;

  background:
    #D9E0E4;

  box-shadow:
    0 18px 44px
    rgba(6, 27, 56, 0.12);
}


.rj-power-feature
.rj-gallery-media {
  box-shadow:
    0 18px 44px
    rgba(0, 0, 0, 0.22);
}


/*
  Thin shine line gives the thumbnails a
  cleaner / washed visual treatment.
*/

.rj-gallery-service--power
.rj-gallery-media::before {
  content: "";

  position: absolute;

  z-index: 2;

  top: 0;
  bottom: 0;
  left: -60%;

  width: 34%;

  pointer-events: none;

  opacity: 0;

  transform:
    skewX(-16deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.17),
      transparent
    );

  transition:
    left
    650ms
    var(--rj-ease),
    opacity
    220ms
    var(--rj-ease);
}


.rj-gallery-service--power
.rj-gallery-media:hover::before {
  left: 125%;

  opacity: 1;
}


/* =========================================================
   10. ARCHIVE HEADER
   ========================================================= */

.rj-power-archive__header {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 45px;

  margin-bottom: 33px;

  padding-bottom: 25px;

  border-bottom:
    1px solid
    rgba(7, 47, 107, 0.12);
}


.rj-power-archive__eyebrow {
  display: block;

  margin-bottom: 6px;

  font-size: 0.71rem;
  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;

  color:
    var(--rj-steel-blue);
}


.rj-power-archive__header h3 {
  margin: 0;

  font-family:
    var(--rj-font-display);

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

  font-weight: 400;

  line-height: 1;

  color:
    var(--rj-navy-deep);
}


.rj-power-archive__header > p {
  max-width: 430px;

  margin: 0;

  font-size: 0.91rem;

  line-height: 1.65;

  color:
    var(--rj-text-soft);
}


/* =========================================================
   11. COLLECTION GRID
   ========================================================= */

.rj-power-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-auto-rows:
    clamp(175px, 14vw, 225px);

  grid-auto-flow:
    dense;

  gap:
    clamp(10px, 1vw, 15px);
}


.rj-power-grid
.rj-gallery-media--wide {
  grid-column:
    span 2;
}


.rj-power-grid
.rj-gallery-media--tall {
  grid-row:
    span 2;
}


.rj-power-grid
.rj-gallery-media--large {
  grid-column:
    span 2;

  grid-row:
    span 2;
}


/* =========================================================
   12. DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

  .rj-power-feature {
    grid-template-rows:
      repeat(
        3,
        clamp(160px, 13vw, 215px)
      );
  }


  .rj-power-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

}


/* =========================================================
   13. TABLET
   ========================================================= */

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

  .rj-gallery-service--power {
    padding:
      95px
      0
      118px;
  }


  .rj-power__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.72fr);

    gap: 48px;
  }


  .rj-power__title {
    font-size:
      clamp(2.8rem, 5.6vw, 4.3rem);
  }


  .rj-power-feature {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    grid-template-rows:
      repeat(3, 165px);

    padding:
      20px;
  }


  .rj-power-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      1 / span 4;

    grid-row:
      1 / span 2;
  }


  .rj-power-feature
  .rj-gallery-media--lead-2 {
    grid-column:
      5 / span 2;

    grid-row:
      1 / span 2;
  }


  .rj-power-feature
  .rj-gallery-media--lead-3 {
    grid-column:
      1 / span 2;

    grid-row: 3;
  }


  .rj-power-feature
  .rj-gallery-media--lead-4 {
    grid-column:
      3 / span 2;

    grid-row: 3;
  }


  .rj-power-feature
  .rj-gallery-media--lead-5 {
    grid-column:
      5 / span 1;

    grid-row: 3;
  }


  .rj-power-feature
  .rj-gallery-media--lead-6 {
    grid-column:
      6 / span 1;

    grid-row: 3;
  }


  .rj-power-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    grid-auto-rows:
      190px;
  }

}


/* =========================================================
   14. MOBILE
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .rj-gallery-service--power {
    padding:
      78px
      0
      94px;
  }


  .rj-power__header {
    grid-template-columns: 1fr;

    gap: 27px;

    margin-bottom: 45px;
  }


  .rj-power__intro {
    max-width: 570px;

    justify-self: initial;
  }


  .rj-power__title {
    font-size:
      clamp(2.6rem, 8vw, 3.7rem);
  }


  .rj-power-feature {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      210px
      190px
      190px
      190px;

    padding:
      14px;

    margin-bottom: 76px;
  }


  .rj-power-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      span 2;

    grid-row:
      span 2;
  }


  .rj-power-feature
  .rj-gallery-media--lead-2,
  .rj-power-feature
  .rj-gallery-media--lead-3,
  .rj-power-feature
  .rj-gallery-media--lead-4,
  .rj-power-feature
  .rj-gallery-media--lead-5,
  .rj-power-feature
  .rj-gallery-media--lead-6 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-power-archive__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 13px;
  }


  .rj-power-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows:
      180px;
  }


  .rj-power-grid
  .rj-gallery-media--wide,
  .rj-power-grid
  .rj-gallery-media--large {
    grid-column:
      span 2;
  }

}


/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .rj-gallery-service--power {
    padding:
      68px
      0
      84px;
  }


  .rj-power__header {
    grid-template-columns: 1fr;

    gap: 24px;

    margin-bottom: 39px;
  }


  .rj-power__title {
    font-size:
      clamp(2.35rem, 10vw, 3.15rem);

    line-height: 0.98;
  }


  .rj-power__intro {
    justify-self: initial;
  }


  .rj-power__intro > p {
    font-size: 0.93rem;

    line-height: 1.67;
  }


  .rj-power-feature {
    grid-template-columns: 1fr;

    grid-template-rows: none;

    grid-auto-rows:
      270px;

    gap: 9px;

    padding: 10px;

    border-radius: 18px;

    margin-bottom: 64px;
  }


  .rj-power-feature
  .rj-gallery-media--lead-1,
  .rj-power-feature
  .rj-gallery-media--lead-2,
  .rj-power-feature
  .rj-gallery-media--lead-3,
  .rj-power-feature
  .rj-gallery-media--lead-4,
  .rj-power-feature
  .rj-gallery-media--lead-5,
  .rj-power-feature
  .rj-gallery-media--lead-6 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-power-archive__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 24px;
  }


  .rj-power-archive__header h3 {
    font-size: 2rem;
  }


  .rj-power-grid {
    grid-template-columns: 1fr;

    grid-auto-rows:
      280px;

    gap: 9px;
  }


  .rj-power-grid
  .rj-gallery-media--wide,
  .rj-power-grid
  .rj-gallery-media--tall,
  .rj-power-grid
  .rj-gallery-media--large {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-power__watermark {
    font-size: 7rem;
  }


  .rj-power__flow {
    right: -420px;

    opacity: 0.06;
  }

}


















































/* =========================================================
   RJ PAINTING & REMODELING SERVICES
   GALLERY.HTML
   12. HANDYMAN SERVICES
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.rj-gallery-service--handyman {
  position: relative;

  overflow: hidden;

  scroll-margin-top:
    var(--rj-scroll-offset);

  padding:
    clamp(90px, 9vw, 145px)
    0
    clamp(108px, 10vw, 160px);

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(36, 91, 155, 0.07),
      transparent 26%
    ),
    radial-gradient(
      circle at 8% 82%,
      rgba(162, 163, 167, 0.08),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #F8F8F7 0%,
      #F0F2F3 52%,
      #F7F7F6 100%
    );

  isolation: isolate;
}


.rj-gallery-service--handyman::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.12;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    multiply;
}


.rj-gallery-service--handyman
> .rj-container {
  position: relative;

  z-index: 3;
}


/* =========================================================
   02. DECORATION
   ========================================================= */

.rj-handyman__decor {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


.rj-handyman__watermark {
  position: absolute;

  top: 44px;
  right: -26px;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(7.8rem, 15vw, 15rem);

  line-height: 0.72;

  letter-spacing: -0.055em;

  color:
    transparent;

  -webkit-text-stroke:
    1px
    rgba(7, 47, 107, 0.05);

  user-select: none;
}


/* modular outlines */

.rj-handyman__module {
  position: absolute;

  border:
    1px solid
    rgba(7, 47, 107, 0.06);

  border-radius: 14px;
}


.rj-handyman__module--one {
  top: 28%;
  left: -70px;

  width: 180px;
  height: 180px;

  transform:
    rotate(-7deg);
}


.rj-handyman__module--two {
  top: 47%;
  right: -90px;

  width: 210px;
  height: 130px;

  transform:
    rotate(8deg);
}


.rj-handyman__module--three {
  bottom: 8%;
  left: 9%;

  width: 120px;
  height: 120px;

  transform:
    rotate(5deg);
}


/* =========================================================
   03. ASSEMBLY LINE
   ========================================================= */

.rj-handyman__assembly-line {
  position: absolute;

  right: -260px;
  bottom: 120px;

  width: 720px;

  opacity: 0.1;
}


.rj-handyman__assembly-line path {
  fill: none;

  stroke:
    var(--rj-navy);

  stroke-width: 1.3;

  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;

  transition:
    stroke-dashoffset
    1500ms
    var(--rj-ease);
}


.rj-gallery-service--handyman.is-visible
.rj-handyman__assembly-line path {
  stroke-dashoffset: 0;
}


/* =========================================================
   04. HEADER
   ========================================================= */

.rj-handyman__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(300px, 0.64fr);

  align-items: end;

  gap:
    clamp(55px, 8vw, 120px);

  margin-bottom:
    clamp(50px, 6vw, 80px);
}


.rj-handyman__heading {
  max-width: 850px;
}


.rj-handyman__title {
  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(3.2rem, 5.3vw, 5.5rem);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.04em;

  color:
    var(--rj-navy-deep);
}


.rj-handyman__title span {
  display: block;

  color:
    #596675;
}


/* =========================================================
   05. INTRO
   ========================================================= */

.rj-handyman__intro {
  max-width: 500px;

  justify-self: end;
}


.rj-handyman__intro > p {
  margin:
    0
    0
    21px;

  font-size: 1rem;

  line-height: 1.72;

  color:
    var(--rj-text-soft);
}


.rj-handyman__note {
  display: flex;

  align-items: center;

  gap: 11px;
}


.rj-handyman__note > span {
  flex:
    0
    0
    25px;

  width: 25px;
  height: 1px;

  background:
    var(--rj-navy);
}


.rj-handyman__note p {
  margin: 0;

  font-size: 0.77rem;
  font-weight: 700;

  color:
    var(--rj-steel-blue);
}


/* =========================================================
   06. FEATURED MODULAR COMPOSITION
   ========================================================= */

.rj-handyman-feature {
  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  grid-template-rows:
    repeat(
      3,
      clamp(145px, 12vw, 195px)
    );

  gap:
    clamp(10px, 1.15vw, 17px);

  margin-bottom:
    clamp(78px, 8vw, 118px);
}


/* =========================================================
   07. FEATURE POSITIONS
   ========================================================= */

.rj-handyman-feature
.rj-gallery-media--lead-1 {
  grid-column:
    1 / span 6;

  grid-row:
    1 / span 2;
}


.rj-handyman-feature
.rj-gallery-media--lead-2 {
  grid-column:
    7 / span 3;

  grid-row:
    1 / span 1;
}


.rj-handyman-feature
.rj-gallery-media--lead-3 {
  grid-column:
    10 / span 3;

  grid-row:
    1 / span 2;
}


.rj-handyman-feature
.rj-gallery-media--lead-4 {
  grid-column:
    7 / span 3;

  grid-row:
    2 / span 1;
}


.rj-handyman-feature
.rj-gallery-media--lead-5 {
  grid-column:
    3 / span 8;

  grid-row:
    3;
}


/* =========================================================
   08. HANDYMAN MEDIA IDENTITY
   ========================================================= */

.rj-gallery-service--handyman
.rj-gallery-media {
  border-radius:
    11px;

  background:
    #DDE0E2;

  box-shadow:
    0 17px 44px
    rgba(6, 27, 56, 0.105);
}


/*
  Subtle internal frame reinforces the idea
  of pieces being assembled.
*/

.rj-gallery-service--handyman
.rj-gallery-media::before {
  content: "";

  position: absolute;

  inset: 8px;

  z-index: 2;

  pointer-events: none;

  border:
    1px solid
    rgba(255, 255, 255, 0.15);

  border-radius:
    7px;

  opacity: 0;

  transform:
    scale(0.985);

  transition:
    opacity
    var(--rj-normal)
    var(--rj-ease),
    transform
    var(--rj-normal)
    var(--rj-ease);
}


.rj-gallery-service--handyman
.rj-gallery-media:hover::before {
  opacity: 1;

  transform:
    scale(1);
}


/* =========================================================
   09. ARCHIVE HEADER
   ========================================================= */

.rj-handyman-archive__header {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 45px;

  margin-bottom: 32px;

  padding-bottom: 24px;

  border-bottom:
    1px solid
    rgba(7, 47, 107, 0.12);
}


.rj-handyman-archive__eyebrow {
  display: block;

  margin-bottom: 6px;

  font-size: 0.71rem;
  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;

  color:
    var(--rj-steel-blue);
}


.rj-handyman-archive__header h3 {
  margin: 0;

  font-family:
    var(--rj-font-display);

  font-size:
    clamp(2rem, 2.85vw, 2.95rem);

  font-weight: 400;

  line-height: 1;

  color:
    var(--rj-navy-deep);
}


.rj-handyman-archive__header > p {
  max-width: 420px;

  margin: 0;

  font-size: 0.91rem;

  line-height: 1.65;

  color:
    var(--rj-text-soft);
}


/* =========================================================
   10. SECONDARY GRID
   ========================================================= */

.rj-handyman-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-auto-rows:
    clamp(175px, 14vw, 225px);

  grid-auto-flow:
    dense;

  gap:
    clamp(10px, 1vw, 15px);
}


.rj-handyman-grid
.rj-gallery-media--wide {
  grid-column:
    span 2;
}


.rj-handyman-grid
.rj-gallery-media--tall {
  grid-row:
    span 2;
}


.rj-handyman-grid
.rj-gallery-media--large {
  grid-column:
    span 2;

  grid-row:
    span 2;
}


/* =========================================================
   11. DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

  .rj-handyman-feature {
    grid-template-rows:
      repeat(
        3,
        clamp(155px, 12vw, 205px)
      );
  }


  .rj-handyman-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

}


/* =========================================================
   12. TABLET
   ========================================================= */

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

  .rj-gallery-service--handyman {
    padding:
      95px
      0
      115px;
  }


  .rj-handyman__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.72fr);

    gap: 48px;
  }


  .rj-handyman__title {
    font-size:
      clamp(2.8rem, 5.6vw, 4.3rem);
  }


  .rj-handyman-feature {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    grid-template-rows:
      repeat(3, 160px);
  }


  .rj-handyman-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      1 / span 4;

    grid-row:
      1 / span 2;
  }


  .rj-handyman-feature
  .rj-gallery-media--lead-2 {
    grid-column:
      5 / span 2;

    grid-row: 1;
  }


  .rj-handyman-feature
  .rj-gallery-media--lead-3 {
    grid-column:
      5 / span 2;

    grid-row:
      2 / span 1;
  }


  .rj-handyman-feature
  .rj-gallery-media--lead-4 {
    grid-column:
      1 / span 2;

    grid-row: 3;
  }


  .rj-handyman-feature
  .rj-gallery-media--lead-5 {
    grid-column:
      3 / span 4;

    grid-row: 3;
  }


  .rj-handyman-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    grid-auto-rows:
      190px;
  }

}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

  .rj-gallery-service--handyman {
    padding:
      78px
      0
      92px;
  }


  .rj-handyman__header {
    grid-template-columns: 1fr;

    gap: 27px;

    margin-bottom: 44px;
  }


  .rj-handyman__intro {
    max-width: 570px;

    justify-self: initial;
  }


  .rj-handyman__title {
    font-size:
      clamp(2.6rem, 8vw, 3.7rem);
  }


  .rj-handyman-feature {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      205px
      190px
      190px;

    margin-bottom: 74px;
  }


  .rj-handyman-feature
  .rj-gallery-media--lead-1 {
    grid-column:
      span 2;

    grid-row:
      span 1;
  }


  .rj-handyman-feature
  .rj-gallery-media--lead-2,
  .rj-handyman-feature
  .rj-gallery-media--lead-3,
  .rj-handyman-feature
  .rj-gallery-media--lead-4,
  .rj-handyman-feature
  .rj-gallery-media--lead-5 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-handyman-archive__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 13px;
  }


  .rj-handyman-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows:
      180px;
  }


  .rj-handyman-grid
  .rj-gallery-media--wide,
  .rj-handyman-grid
  .rj-gallery-media--large {
    grid-column:
      span 2;
  }

}


/* =========================================================
   14. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .rj-gallery-service--handyman {
    padding:
      68px
      0
      82px;
  }


  .rj-handyman__header {
    grid-template-columns: 1fr;

    gap: 24px;

    margin-bottom: 38px;
  }


  .rj-handyman__title {
    font-size:
      clamp(2.35rem, 10vw, 3.15rem);

    line-height: 0.98;
  }


  .rj-handyman__intro {
    justify-self: initial;
  }


  .rj-handyman__intro > p {
    font-size: 0.93rem;

    line-height: 1.67;
  }


  .rj-handyman-feature {
    grid-template-columns: 1fr;

    grid-template-rows: none;

    grid-auto-rows:
      275px;

    gap: 9px;

    margin-bottom: 63px;
  }


  .rj-handyman-feature
  .rj-gallery-media--lead-1,
  .rj-handyman-feature
  .rj-gallery-media--lead-2,
  .rj-handyman-feature
  .rj-gallery-media--lead-3,
  .rj-handyman-feature
  .rj-gallery-media--lead-4,
  .rj-handyman-feature
  .rj-gallery-media--lead-5 {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-handyman-archive__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 24px;
  }


  .rj-handyman-archive__header h3 {
    font-size: 2rem;
  }


  .rj-handyman-grid {
    grid-template-columns: 1fr;

    grid-auto-rows:
      280px;

    gap: 9px;
  }


  .rj-handyman-grid
  .rj-gallery-media--wide,
  .rj-handyman-grid
  .rj-gallery-media--tall,
  .rj-handyman-grid
  .rj-gallery-media--large {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }


  .rj-handyman__watermark {
    font-size: 6.5rem;
  }


  .rj-handyman__module--one,
  .rj-handyman__module--three {
    display: none;
  }


  .rj-handyman__assembly-line {
    right: -430px;

    opacity: 0.055;
  }

}