/* ==========================================================
   REMODELING HAWKS LLC
   GALLERY.HTML
   03. GALLERY HERO
   ========================================================== */


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

.hawks-gallery-hero {
  --gallery-strip-height: 92px;

  position: relative;

  width: 100%;

  height:
    calc(
      100vh -
      var(--hawks-shell-height)
    );

  height:
    calc(
      100svh -
      var(--hawks-shell-height)
    );

  min-height: 560px;

  overflow: hidden;

  color:
    var(--hawks-white);

  background:
    var(--hawks-black);

  isolation: isolate;
}


/* ==========================================================
   02. MEDIA
   ========================================================== */

.hawks-gallery-hero__media {
  position: absolute;
  inset: 0;

  z-index: -5;

  overflow: hidden;
}


.hawks-gallery-hero__media img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    66% center;

  transform:
    translate3d(
      0,
      var(--gallery-hero-parallax, 0px),
      0
    )
    scale(1.04);

  filter:
    saturate(0.88)
    contrast(1.04)
    brightness(0.94);

  will-change:
    transform;
}


/* ==========================================================
   03. CINEMATIC SHADE
   ========================================================== */

.hawks-gallery-hero__shade {
  position: absolute;
  inset: 0;

  z-index: -4;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,

      rgba(7, 9, 12, 0.99)
        0%,

      rgba(7, 9, 12, 0.96)
        27%,

      rgba(7, 9, 12, 0.76)
        48%,

      rgba(7, 9, 12, 0.35)
        70%,

      rgba(7, 9, 12, 0.1)
        100%
    ),

    linear-gradient(
      180deg,

      rgba(7, 9, 12, 0.2)
        0%,

      rgba(7, 9, 12, 0.02)
        43%,

      rgba(7, 9, 12, 0.52)
        100%
    );
}


/* ==========================================================
   04. TEXTURE
   ========================================================== */

.hawks-gallery-hero__texture {
  position: absolute;
  inset: 0;

  z-index: -3;

  pointer-events: none;

  opacity: 0.13;

  mix-blend-mode:
    soft-light;

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


/* ==========================================================
   05. BRAND ACCENTS
   ========================================================== */

.hawks-gallery-hero__accent {
  position: absolute;

  top:
    clamp(
      30px,
      5vw,
      68px
    );

  right: 0;

  z-index: 2;

  width: 190px;
  height: 120px;

  overflow: hidden;

  pointer-events: none;
}


.hawks-gallery-hero__accent span {
  position: absolute;

  right: -58px;

  width: 210px;
  height: 2px;

  transform:
    rotate(-38deg);

  transform-origin:
    center;
}


.hawks-gallery-hero__accent
span:nth-child(1) {
  top: 30px;

  background:
    var(--hawks-gold);
}


.hawks-gallery-hero__accent
span:nth-child(2) {
  top: 51px;

  opacity: 0.75;

  background:
    var(--hawks-blue);
}


.hawks-gallery-hero__accent
span:nth-child(3) {
  top: 72px;

  opacity: 0.34;

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


/* ==========================================================
   06. INNER
   ========================================================== */

.hawks-gallery-hero__inner {
  position: relative;

  z-index: 3;

  display: flex;
  align-items: center;

  height: 100%;

  padding-top:
    clamp(
      36px,
      5vh,
      64px
    );

  padding-bottom:
    calc(
      var(--gallery-strip-height)
      +
      clamp(
        30px,
        4vh,
        50px
      )
    );
}


/* ==========================================================
   07. CONTENT
   ========================================================== */

.hawks-gallery-hero__content {
  width:
    min(
      59%,
      790px
    );
}


/* ==========================================================
   08. EYEBROW
   ========================================================== */

.hawks-gallery-hero__eyebrow {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 21px;

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

  font-size: 0.84rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.hawks-gallery-hero__eyebrow-dot {
  flex:
    0
    0
    7px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--hawks-gold);

  box-shadow:
    0 0 0 5px
    rgba(242, 180, 14, 0.1);
}


.hawks-gallery-hero__eyebrow-line {
  width: 58px;
  height: 1px;

  margin-left: 3px;

  background:
    linear-gradient(
      90deg,
      rgba(242, 180, 14, 0.7),
      transparent
    );
}


/* ==========================================================
   09. TITLE
   ========================================================== */

.hawks-gallery-hero__title {
  max-width: 790px;

  margin:
    0
    0
    24px;

  color:
    var(--hawks-white);

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

  font-size:
    clamp(
      4rem,
      min(5.6vw, 8.2vh),
      6.6rem
    );

  font-weight: 700;

  line-height:
    0.88;

  letter-spacing:
    -0.027em;

  text-wrap:
    balance;
}


.hawks-gallery-hero__title > span {
  display: block;
}


.hawks-gallery-hero__title-gold {
  color:
    var(--hawks-gold);

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold-soft),
      var(--hawks-gold) 48%,
      var(--hawks-gold-dark)
    );

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color:
    transparent;
}


/* ==========================================================
   10. DESCRIPTION
   ========================================================== */

.hawks-gallery-hero__description {
  max-width: 650px;

  margin:
    0
    0
    30px;

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

  font-size:
    clamp(
      1rem,
      1.15vw,
      1.1rem
    );

  line-height:
    1.67;

  text-wrap:
    pretty;
}


/* ==========================================================
   11. ACTIONS
   ========================================================== */

.hawks-gallery-hero__actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;

  gap: 12px;
}


.hawks-gallery-hero__button {
  position: relative;

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

  gap: 11px;

  min-height: 56px;

  padding:
    11px
    18px;

  overflow: hidden;

  border-radius:
    var(--hawks-radius-sm);

  font-size: 0.91rem;

  font-weight: 800;

  line-height: 1.2;

  isolation: isolate;

  transition:
    transform
      280ms
      var(--hawks-ease),
    border-color
      220ms
      ease,
    background-color
      220ms
      ease,
    box-shadow
      280ms
      ease;
}


/* ==========================================================
   12. PRIMARY CTA
   ========================================================== */

.hawks-gallery-hero__button--primary {
  min-width: 210px;

  color:
    var(--hawks-black);

  border:
    1px solid
    var(--hawks-gold);

  background:
    linear-gradient(
      135deg,
      var(--hawks-gold-soft),
      var(--hawks-gold)
    );

  box-shadow:
    0 15px 34px
    rgba(242, 180, 14, 0.16);
}


.hawks-gallery-hero__button--primary::before {
  content: "";

  position: absolute;

  top: -50%;
  left: -60%;

  z-index: -1;

  width: 35%;
  height: 200%;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.38),
      transparent
    );

  transform:
    rotate(18deg);

  transition:
    left
      650ms
      var(--hawks-ease);
}


.hawks-gallery-hero__button--primary:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 19px 42px
    rgba(242, 180, 14, 0.23);
}


.hawks-gallery-hero__button--primary:hover::before {
  left: 125%;
}


/* ==========================================================
   13. SECONDARY CTA
   ========================================================== */

.hawks-gallery-hero__button--secondary {
  min-width: 205px;

  justify-content:
    flex-start;

  color:
    var(--hawks-white);

  border:
    1px solid
    rgba(59, 130, 232, 0.4);

  background:
    rgba(7, 9, 12, 0.58);

  backdrop-filter:
    blur(12px);

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


.hawks-gallery-hero__button--secondary:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(59, 130, 232, 0.75);

  background:
    rgba(4, 88, 204, 0.12);
}


/* ==========================================================
   14. BUTTON ICON
   ========================================================== */

.hawks-gallery-hero__button-icon {
  display: grid;
  place-items: center;

  flex:
    0
    0
    28px;

  width: 28px;
  height: 28px;
}


.hawks-gallery-hero__button-icon svg,
.hawks-gallery-hero__button-arrow {
  width: 19px;
  height: 19px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-gallery-hero__button-arrow {
  margin-left: 3px;

  transition:
    transform
      260ms
      var(--hawks-ease);
}


.hawks-gallery-hero__button--primary:hover
.hawks-gallery-hero__button-arrow {
  transform:
    translateY(4px);
}


/* ==========================================================
   15. BUTTON COPY
   ========================================================== */

.hawks-gallery-hero__button-copy {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.hawks-gallery-hero__button-copy small {
  color:
    rgba(255, 255, 255, 0.52);

  font-size: 0.63rem;

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.hawks-gallery-hero__button-copy strong {
  color:
    var(--hawks-white);

  font-size: 0.89rem;

  font-weight: 800;
}


/* ==========================================================
   16. SERVICE STRIP
   ========================================================== */

.hawks-gallery-hero__strip {
  position: absolute;

  z-index: 5;

  left: 0;
  bottom: 0;

  width: 100%;
  height:
    var(--gallery-strip-height);

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

  background:
    linear-gradient(
      90deg,
      rgba(7, 9, 12, 0.97),
      rgba(13, 17, 22, 0.9)
    );

  backdrop-filter:
    blur(15px);

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


.hawks-gallery-hero__strip::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 0;

  width: 29%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      transparent
    );
}


/* ==========================================================
   17. STRIP INNER
   ========================================================== */

.hawks-gallery-hero__strip-inner {
  display: grid;

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

  align-items: stretch;

  height: 100%;
}


/* ==========================================================
   18. SERVICE
   ========================================================== */

.hawks-gallery-hero__service {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 13px;

  min-width: 0;

  padding:
    13px
    20px;

  color:
    var(--hawks-white);

  transition:
    background-color
      220ms
      ease;
}


.hawks-gallery-hero__service:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 21%;
  right: 0;

  width: 1px;
  height: 58%;

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


.hawks-gallery-hero__service:hover {
  background:
    rgba(255, 255, 255, 0.045);
}


/* ==========================================================
   19. SERVICE ICON
   ========================================================== */

.hawks-gallery-hero__service-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  border:
    1px solid
    rgba(242, 180, 14, 0.22);

  border-radius: 11px;

  color:
    var(--hawks-gold);

  background:
    rgba(242, 180, 14, 0.055);

  transition:
    color
      220ms
      ease,
    border-color
      220ms
      ease,
    background-color
      220ms
      ease;
}


.hawks-gallery-hero__service:hover
.hawks-gallery-hero__service-icon {
  color:
    var(--hawks-black);

  border-color:
    var(--hawks-gold);

  background:
    var(--hawks-gold);
}


.hawks-gallery-hero__service-icon svg {
  width: 20px;
  height: 20px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   20. SERVICE COPY
   ========================================================== */

.hawks-gallery-hero__service-copy {
  min-width: 0;
}


.hawks-gallery-hero__service-copy strong {
  display: block;

  margin-bottom: 3px;

  overflow: hidden;

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

  font-size:
    clamp(
      0.78rem,
      1vw,
      0.9rem
    );

  font-weight: 700;

  line-height: 1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.hawks-gallery-hero__service-copy > span {
  display: block;

  overflow: hidden;

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

  font-size: 0.67rem;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing:
    0.045em;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


/* ==========================================================
   21. SERVICE ARROW
   ========================================================== */

.hawks-gallery-hero__service-arrow {
  width: 18px;
  height: 18px;

  fill: none;

  stroke:
    rgba(255, 255, 255, 0.38);

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  transition:
    stroke
      220ms
      ease,
    transform
      260ms
      var(--hawks-ease);
}


.hawks-gallery-hero__service:hover
.hawks-gallery-hero__service-arrow {
  stroke:
    var(--hawks-gold);

  transform:
    translateX(3px);
}


/* ==========================================================
   22. ENTRY MOTION
   Visible by default.
   ========================================================== */

[data-gallery-hero-step] {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);
}


.hawks-gallery-hero.is-gallery-motion-ready
[data-gallery-hero-step] {
  opacity: 0;

  transform:
    translate3d(0, 20px, 0);

  transition:
    opacity
      700ms
      var(--hawks-ease),
    transform
      700ms
      var(--hawks-ease);

  transition-delay:
    var(
      --gallery-delay,
      0ms
    );
}


.hawks-gallery-hero.is-gallery-motion-ready.is-ready
[data-gallery-hero-step] {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);
}


/* ==========================================================
   23. ACCESSIBILITY
   ========================================================== */

.hawks-gallery-hero a:focus-visible {
  outline:
    3px solid
    var(--hawks-gold);

  outline-offset:
    4px;
}


/* ==========================================================
   24. REDUCED MOTION
   ========================================================== */

html.reduce-motion
.hawks-gallery-hero
[data-gallery-hero-step] {
  opacity: 1 !important;

  transform: none !important;

  transition: none !important;
}


html.reduce-motion
.hawks-gallery-hero__media img {
  transform:
    scale(1.04) !important;
}


/* ==========================================================
   25. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-gallery-hero {
    --gallery-strip-height: 92px;
  }


  .hawks-gallery-hero__content {
    width:
      min(
        58%,
        790px
      );
  }


  .hawks-gallery-hero__media img {
    object-position:
      67% center;
  }

}


/* ==========================================================
   26. TABLET
   ========================================================== */

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

  .hawks-gallery-hero {
    --gallery-strip-height: 84px;

    min-height: 540px;
  }


  .hawks-gallery-hero__media img {
    object-position:
      65% center;
  }


  .hawks-gallery-hero__shade {
    background:

      linear-gradient(
        90deg,

        rgba(7, 9, 12, 0.99)
          0%,

        rgba(7, 9, 12, 0.93)
          36%,

        rgba(7, 9, 12, 0.63)
          64%,

        rgba(7, 9, 12, 0.17)
          100%
      ),

      linear-gradient(
        180deg,
        rgba(7, 9, 12, 0.18),
        rgba(7, 9, 12, 0.43)
      );
  }


  .hawks-gallery-hero__content {
    width:
      min(
        68%,
        680px
      );
  }


  .hawks-gallery-hero__title {
    font-size:
      clamp(
        3.55rem,
        min(7vw, 7.8vh),
        5.2rem
      );
  }


  .hawks-gallery-hero__service {
    grid-template-columns:
      35px
      minmax(0, 1fr);

    gap: 9px;

    padding:
      11px
      12px;
  }


  .hawks-gallery-hero__service-icon {
    width: 35px;
    height: 35px;
  }


  .hawks-gallery-hero__service-arrow {
    display: none;
  }

}


/* ==========================================================
   27. MOBILE
   ========================================================== */

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

  .hawks-gallery-hero {
    --gallery-strip-height: 74px;

    min-height:
      clamp(
        560px,
        76svh,
        680px
      );
  }


  .hawks-gallery-hero__media img {
    object-position:
      68% center;
  }


  .hawks-gallery-hero__shade {
    background:

      linear-gradient(
        90deg,

        rgba(7, 9, 12, 0.98)
          0%,

        rgba(7, 9, 12, 0.9)
          52%,

        rgba(7, 9, 12, 0.5)
          100%
      ),

      linear-gradient(
        180deg,

        rgba(7, 9, 12, 0.14)
          0%,

        rgba(7, 9, 12, 0.2)
          48%,

        rgba(7, 9, 12, 0.8)
          100%
      );
  }


  .hawks-gallery-hero__inner {
    align-items: center;

    padding-top: 37px;

    padding-bottom:
      calc(
        var(--gallery-strip-height)
        +
        31px
      );
  }


  .hawks-gallery-hero__content {
    width: 91%;
  }


  .hawks-gallery-hero__title {
    font-size:
      clamp(
        3rem,
        min(10vw, 7.5vh),
        4.25rem
      );
  }


  .hawks-gallery-hero__actions {
    display: grid;

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

    max-width: 520px;
  }


  .hawks-gallery-hero__button {
    width: 100%;
    min-width: 0;
  }


  /*
     Horizontal gallery navigation.
  */

  .hawks-gallery-hero__strip-inner {
    display: flex;

    overflow-x: auto;

    scrollbar-width: none;

    scroll-snap-type:
      x proximity;
  }


  .hawks-gallery-hero__strip-inner::-webkit-scrollbar {
    display: none;
  }


  .hawks-gallery-hero__service {
    flex:
      0
      0
      205px;

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

    scroll-snap-align:
      start;

    padding:
      9px
      14px;
  }


  .hawks-gallery-hero__service-arrow {
    display: none;
  }

}


/* ==========================================================
   28. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hawks-gallery-hero {
    --gallery-strip-height: 68px;

    min-height:
      clamp(
        550px,
        78svh,
        660px
      );
  }


  .hawks-gallery-hero__media img {
    object-position:
      70% center;
  }


  .hawks-gallery-hero__shade {
    background:

      linear-gradient(
        90deg,

        rgba(7, 9, 12, 0.98)
          0%,

        rgba(7, 9, 12, 0.9)
          64%,

        rgba(7, 9, 12, 0.56)
          100%
      ),

      linear-gradient(
        180deg,

        rgba(7, 9, 12, 0.14)
          0%,

        rgba(7, 9, 12, 0.25)
          47%,

        rgba(7, 9, 12, 0.84)
          100%
      );
  }


  .hawks-gallery-hero__accent {
    width: 130px;
    height: 90px;
  }


  .hawks-gallery-hero__inner {
    align-items: center;

    padding-top: 30px;

    padding-bottom:
      calc(
        var(--gallery-strip-height)
        +
        25px
      );
  }


  .hawks-gallery-hero__content {
    width: 100%;
  }


  .hawks-gallery-hero__eyebrow {
    margin-bottom: 16px;

    font-size: 0.75rem;
  }


  .hawks-gallery-hero__eyebrow-line {
    width: 34px;
  }


  .hawks-gallery-hero__title {
    margin-bottom: 19px;

    font-size:
      clamp(
        2.75rem,
        min(12.5vw, 7vh),
        3.7rem
      );

    line-height: 0.91;
  }


  .hawks-gallery-hero__description {
    margin-bottom: 23px;

    max-width: 390px;

    font-size: 0.93rem;

    line-height: 1.56;
  }


  .hawks-gallery-hero__actions {
    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;

    max-width: 330px;
  }


  .hawks-gallery-hero__button {
    width: 100%;

    min-width: 0;
    min-height: 51px;

    padding:
      9px
      14px;
  }


  .hawks-gallery-hero__button--secondary {
    justify-content:
      center;
  }


  .hawks-gallery-hero__strip-inner {
    display: flex;

    overflow-x: auto;

    scrollbar-width: none;

    scroll-snap-type:
      x proximity;
  }


  .hawks-gallery-hero__strip-inner::-webkit-scrollbar {
    display: none;
  }


  .hawks-gallery-hero__service {
    flex:
      0
      0
      174px;

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

    gap: 9px;

    padding:
      8px
      11px;

    scroll-snap-align:
      start;
  }


  .hawks-gallery-hero__service-icon {
    width: 31px;
    height: 31px;

    border-radius: 9px;
  }


  .hawks-gallery-hero__service-icon svg {
    width: 16px;
    height: 16px;
  }


  .hawks-gallery-hero__service-copy strong {
    font-size: 0.75rem;
  }


  .hawks-gallery-hero__service-copy > span {
    font-size: 0.59rem;
  }


  .hawks-gallery-hero__service-arrow {
    display: none;
  }

}

















































/* ==========================================================
   REMODELING HAWKS LLC
   04. SERVICE NAVIGATION
   ========================================================== */


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

.hawks-gallery-nav {
  position: relative;

  z-index: 20;

  width: 100%;

  padding:
    28px
    0;

  overflow: hidden;

  border-bottom:
    1px solid
    rgba(23, 27, 32, 0.09);

  color:
    var(--hawks-text);

  background:
    rgba(250, 248, 243, 0.98);

  isolation: isolate;
}


/* subtle mineral texture */

.hawks-gallery-nav::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  opacity: 0.1;

  pointer-events: none;

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


/* gold ambient detail */

.hawks-gallery-nav::after {
  content: "";

  position: absolute;

  top: -190px;
  right: -160px;

  z-index: -3;

  width: 390px;
  height: 390px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(242, 180, 14, 0.08),
      transparent 70%
    );
}


/* ==========================================================
   02. SHELL
   ========================================================== */

.hawks-gallery-nav__shell {
  display: grid;

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

  align-items: center;

  gap:
    clamp(
      30px,
      4vw,
      62px
    );
}


/* ==========================================================
   03. INTRO
   ========================================================== */

.hawks-gallery-nav__intro {
  min-width: 0;
}


.hawks-gallery-nav__eyebrow {
  display: block;

  margin-bottom: 5px;

  color:
    var(--hawks-gold-dark);

  font-size: 0.74rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.hawks-gallery-nav__intro p {
  margin: 0;

  color:
    var(--hawks-text);

  font-size: 0.94rem;

  font-weight: 700;

  line-height: 1.45;
}


/* ==========================================================
   04. LINKS GRID
   ========================================================== */

.hawks-gallery-nav__links {
  display: grid;

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

  align-items: stretch;

  border:
    1px solid
    rgba(23, 27, 32, 0.1);

  border-radius: 16px;

  overflow: hidden;

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

  box-shadow:
    0 12px 34px
    rgba(7, 9, 12, 0.045);
}


/* ==========================================================
   05. LINK
   ========================================================== */

.hawks-gallery-nav__link {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 11px;

  min-width: 0;
  min-height: 78px;

  padding:
    12px
    15px;

  color:
    var(--hawks-text);

  background:
    transparent;

  transition:
    color
      220ms
      ease,
    background-color
      220ms
      ease;
}


.hawks-gallery-nav__link:not(:last-child) {
  border-right:
    1px solid
    rgba(23, 27, 32, 0.08);
}


.hawks-gallery-nav__link:hover {
  background:
    rgba(242, 180, 14, 0.055);
}


/* ==========================================================
   06. ICON
   ========================================================== */

.hawks-gallery-nav__icon {
  display: grid;
  place-items: center;

  width: 39px;
  height: 39px;

  border:
    1px solid
    rgba(23, 27, 32, 0.1);

  border-radius: 11px;

  color:
    var(--hawks-gold-dark);

  background:
    var(--hawks-white);

  transition:
    color
      220ms
      ease,
    background-color
      220ms
      ease,
    border-color
      220ms
      ease,
    transform
      280ms
      var(--hawks-ease);
}


.hawks-gallery-nav__icon svg {
  width: 19px;
  height: 19px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-gallery-nav__link:hover
.hawks-gallery-nav__icon,
.hawks-gallery-nav__link.is-active
.hawks-gallery-nav__icon {
  color:
    var(--hawks-black);

  border-color:
    var(--hawks-gold);

  background:
    var(--hawks-gold);

  transform:
    translateY(-1px);
}


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

.hawks-gallery-nav__copy {
  min-width: 0;
}


.hawks-gallery-nav__copy strong {
  display: block;

  margin-bottom: 4px;

  overflow: hidden;

  color:
    var(--hawks-text);

  font-size: 0.83rem;

  font-weight: 700;

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.hawks-gallery-nav__copy small {
  display: block;

  overflow: hidden;

  color:
    var(--hawks-text-soft);

  font-size: 0.66rem;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing:
    0.045em;

  text-overflow: ellipsis;

  text-transform: uppercase;

  white-space: nowrap;
}


/* ==========================================================
   08. ARROW
   ========================================================== */

.hawks-gallery-nav__arrow {
  display: grid;
  place-items: center;

  width: 18px;
  height: 18px;

  color:
    rgba(23, 27, 32, 0.35);

  transition:
    color
      220ms
      ease,
    transform
      280ms
      var(--hawks-ease);
}


.hawks-gallery-nav__arrow svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-gallery-nav__link:hover
.hawks-gallery-nav__arrow,
.hawks-gallery-nav__link.is-active
.hawks-gallery-nav__arrow {
  color:
    var(--hawks-gold-dark);

  transform:
    translateX(3px);
}


/* ==========================================================
   09. ACTIVE INDICATOR
   ========================================================== */

.hawks-gallery-nav__indicator {
  position: absolute;

  left: 15px;
  right: 15px;
  bottom: 0;

  height: 3px;

  border-radius:
    999px
    999px
    0
    0;

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      var(--hawks-gold-soft)
    );

  transform:
    scaleX(0);

  transform-origin:
    left center;

  transition:
    transform
      320ms
      var(--hawks-ease);
}


.hawks-gallery-nav__link.is-active
.hawks-gallery-nav__indicator {
  transform:
    scaleX(1);
}


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

.hawks-gallery-nav__link.is-active {
  background:
    linear-gradient(
      180deg,
      rgba(242, 180, 14, 0.08),
      rgba(242, 180, 14, 0.025)
    );
}


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

.hawks-gallery-nav__link:focus-visible {
  z-index: 2;

  outline:
    3px solid
    rgba(242, 180, 14, 0.4);

  outline-offset:
    -3px;
}


/* ==========================================================
   12. TARGET SCROLL OFFSET
   ========================================================== */

#gallery-painting,
#gallery-drywall,
#gallery-remodeling,
#gallery-demolition {
  scroll-margin-top:
    calc(
      var(--hawks-shell-height)
      +
      24px
    );
}


/* ==========================================================
   13. REDUCED MOTION
   ========================================================== */

html.reduce-motion
.hawks-gallery-nav__link,
html.reduce-motion
.hawks-gallery-nav__icon,
html.reduce-motion
.hawks-gallery-nav__arrow,
html.reduce-motion
.hawks-gallery-nav__indicator {
  transition: none !important;
}


/* ==========================================================
   14. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-gallery-nav {
    padding:
      30px
      0;
  }


  .hawks-gallery-nav__link {
    min-height: 80px;
  }

}


/* ==========================================================
   15. TABLET
   ========================================================== */

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

  .hawks-gallery-nav__shell {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  .hawks-gallery-nav__intro {
    display: flex;
    align-items: baseline;

    gap: 14px;
  }


  .hawks-gallery-nav__eyebrow {
    margin-bottom: 0;
  }


  .hawks-gallery-nav__links {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }


  .hawks-gallery-nav__link {
    grid-template-columns:
      36px
      minmax(0, 1fr);

    gap: 9px;

    min-height: 75px;

    padding:
      11px
      10px;
  }


  .hawks-gallery-nav__icon {
    width: 36px;
    height: 36px;
  }


  .hawks-gallery-nav__arrow {
    display: none;
  }


  .hawks-gallery-nav__copy strong {
    font-size: 0.78rem;
  }


  .hawks-gallery-nav__copy small {
    font-size: 0.6rem;
  }

}


/* ==========================================================
   16. MOBILE
   ========================================================== */

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

  .hawks-gallery-nav {
    padding:
      24px
      0;
  }


  .hawks-gallery-nav__shell {
    grid-template-columns: 1fr;

    gap: 17px;
  }


  .hawks-gallery-nav__links {
    display: flex;

    overflow-x: auto;

    border-radius: 14px;

    scroll-snap-type:
      x proximity;

    scrollbar-width: none;
  }


  .hawks-gallery-nav__links::-webkit-scrollbar {
    display: none;
  }


  .hawks-gallery-nav__link {
    flex:
      0
      0
      215px;

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

    min-height: 76px;

    scroll-snap-align:
      start;
  }


  .hawks-gallery-nav__link:not(:last-child) {
    border-right:
      1px solid
      rgba(23, 27, 32, 0.08);
  }

}


/* ==========================================================
   17. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hawks-gallery-nav {
    padding:
      21px
      0;
  }


  .hawks-gallery-nav__shell {
    grid-template-columns: 1fr;

    gap: 15px;
  }


  .hawks-gallery-nav__eyebrow {
    font-size: 0.7rem;
  }


  .hawks-gallery-nav__intro p {
    font-size: 0.88rem;
  }


  .hawks-gallery-nav__links {
    display: flex;

    overflow-x: auto;

    border-radius: 13px;

    scroll-snap-type:
      x proximity;

    scrollbar-width: none;
  }


  .hawks-gallery-nav__links::-webkit-scrollbar {
    display: none;
  }


  .hawks-gallery-nav__link {
    flex:
      0
      0
      190px;

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

    gap: 9px;

    min-height: 72px;

    padding:
      10px
      12px;

    scroll-snap-align:
      start;
  }


  .hawks-gallery-nav__icon {
    width: 35px;
    height: 35px;

    border-radius: 10px;
  }


  .hawks-gallery-nav__icon svg {
    width: 17px;
    height: 17px;
  }


  .hawks-gallery-nav__copy strong {
    font-size: 0.77rem;
  }


  .hawks-gallery-nav__copy small {
    font-size: 0.59rem;
  }


  .hawks-gallery-nav__arrow {
    display: none;
  }


  .hawks-gallery-nav__indicator {
    left: 12px;
    right: 12px;
  }

}

















































/* ==========================================================
   REMODELING HAWKS LLC
   05. GALLERY INTRO
   ========================================================== */


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

.hawks-gallery-intro {
  position: relative;

  padding:
    clamp(
      90px,
      9vw,
      145px
    )
    0
    clamp(
      82px,
      8vw,
      125px
    );

  overflow: hidden;

  color:
    var(--hawks-text);

  background:
    var(--hawks-white);

  isolation: isolate;
}


/* subtle mineral texture */

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

  position: absolute;
  inset: 0;

  z-index: -3;

  opacity: 0.1;

  pointer-events: none;

  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='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}


/* ==========================================================
   02. AMBIENT DECOR
   ========================================================== */

.hawks-gallery-intro__ambient {
  position: absolute;

  z-index: -2;

  border-radius: 50%;

  pointer-events: none;
}


.hawks-gallery-intro__ambient--gold {
  top: -330px;
  left: -270px;

  width: 670px;
  height: 670px;

  background:
    radial-gradient(
      circle,
      rgba(242, 180, 14, 0.07),
      transparent 70%
    );
}


.hawks-gallery-intro__ambient--blue {
  right: -370px;
  bottom: -410px;

  width: 760px;
  height: 760px;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.045),
      transparent 70%
    );
}


/* ==========================================================
   03. LAYOUT
   ========================================================== */

.hawks-gallery-intro__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(330px, 0.58fr);

  align-items: end;

  gap:
    clamp(
      50px,
      8vw,
      120px
    );
}


/* ==========================================================
   04. EYEBROW
   ========================================================== */

.hawks-gallery-intro__eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 20px;
}


.hawks-gallery-intro__eyebrow > span {
  width: 38px;
  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      var(--hawks-gold-soft)
    );
}


.hawks-gallery-intro__eyebrow p {
  margin: 0;

  color:
    var(--hawks-gold-dark);

  font-size: 0.8rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


/* ==========================================================
   05. TITLE
   ========================================================== */

.hawks-gallery-intro__content h2 {
  max-width: 880px;

  margin: 0;

  color:
    var(--hawks-charcoal);

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

  font-size:
    clamp(
      3.6rem,
      5.5vw,
      6.2rem
    );

  font-weight: 700;

  line-height: 0.9;

  letter-spacing: -0.026em;

  text-wrap: balance;
}


.hawks-gallery-intro__content h2 span {
  display: block;

  color:
    var(--hawks-gold-dark);
}


/* ==========================================================
   06. SIDE
   ========================================================== */

.hawks-gallery-intro__side {
  max-width: 500px;

  margin-left: auto;
}


.hawks-gallery-intro__description {
  margin:
    0
    0
    28px;

  color:
    var(--hawks-text-soft);

  font-size:
    clamp(
      1rem,
      1.1vw,
      1.08rem
    );

  line-height: 1.75;

  text-wrap: pretty;
}


/* ==========================================================
   07. NOTE
   ========================================================== */

.hawks-gallery-intro__note {
  display: grid;

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

  align-items: start;

  gap: 15px;

  padding:
    18px
    19px;

  border:
    1px solid
    rgba(23, 27, 32, 0.09);

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(245, 243, 238, 0.82),
      rgba(255, 255, 255, 0.95)
    );
}


.hawks-gallery-intro__note-icon {
  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  border:
    1px solid
    rgba(242, 180, 14, 0.2);

  border-radius: 12px;

  color:
    var(--hawks-gold-dark);

  background:
    rgba(242, 180, 14, 0.08);
}


.hawks-gallery-intro__note-icon svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-gallery-intro__note strong {
  display: block;

  margin-bottom: 5px;

  color:
    var(--hawks-text);

  font-size: 0.9rem;

  font-weight: 700;

  line-height: 1.35;
}


.hawks-gallery-intro__note p {
  margin: 0;

  color:
    var(--hawks-text-soft);

  font-size: 0.82rem;

  line-height: 1.55;
}


/* ==========================================================
   08. DIVIDER
   ========================================================== */

.hawks-gallery-intro__divider {
  display: grid;

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

  align-items: center;

  gap: 10px;

  margin:
    clamp(
      48px,
      6vw,
      78px
    )
    0
    25px;
}


.hawks-gallery-intro__divider-gold {
  height: 3px;

  border-radius: 999px;

  background:
    var(--hawks-gold);
}


.hawks-gallery-intro__divider-line {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(23, 27, 32, 0.18),
      rgba(23, 27, 32, 0.06)
    );
}


.hawks-gallery-intro__divider-blue {
  height: 3px;

  border-radius: 999px;

  background:
    var(--hawks-blue);
}


/* ==========================================================
   09. CATEGORY PREVIEW
   ========================================================== */

.hawks-gallery-intro__categories {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    10px
    22px;
}


.hawks-gallery-intro__categories span {
  position: relative;

  color:
    var(--hawks-text-soft);

  font-size: 0.76rem;

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.hawks-gallery-intro__categories
span:not(:last-child)::after {
  content: "";

  display: inline-block;

  width: 4px;
  height: 4px;

  margin-left: 22px;

  vertical-align: middle;

  border-radius: 50%;

  background:
    var(--hawks-gold);
}


/* ==========================================================
   10. REDUCED MOTION
   ========================================================== */

html.reduce-motion
.hawks-gallery-intro *,
html.reduce-motion
.hawks-gallery-intro *::before,
html.reduce-motion
.hawks-gallery-intro *::after {
  transition: none !important;
}


/* ==========================================================
   11. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-gallery-intro__layout {
    grid-template-columns:
      minmax(600px, 1.08fr)
      minmax(380px, 0.56fr);
  }

}


/* ==========================================================
   12. TABLET
   ========================================================== */

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

  .hawks-gallery-intro {
    padding:
      90px
      0
      82px;
  }


  .hawks-gallery-intro__layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(290px, 0.62fr);

    gap: 45px;
  }


  .hawks-gallery-intro__content h2 {
    font-size:
      clamp(
        3.3rem,
        6vw,
        4.8rem
      );
  }


  .hawks-gallery-intro__description {
    font-size: 0.98rem;
  }

}


/* ==========================================================
   13. MOBILE
   ========================================================== */

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

  .hawks-gallery-intro {
    padding:
      76px
      0
      70px;
  }


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

    align-items: start;

    gap: 29px;
  }


  .hawks-gallery-intro__content h2 {
    max-width: 630px;

    font-size:
      clamp(
        3.1rem,
        10vw,
        4.3rem
      );
  }


  .hawks-gallery-intro__side {
    max-width: 580px;

    margin-left: 0;
  }


  .hawks-gallery-intro__divider {
    margin-top: 48px;
  }

}


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

@media (max-width: 480px) {

  .hawks-gallery-intro {
    padding:
      66px
      0
      60px;
  }


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

    align-items: start;

    gap: 25px;
  }


  .hawks-gallery-intro__eyebrow {
    margin-bottom: 16px;
  }


  .hawks-gallery-intro__eyebrow p {
    font-size: 0.74rem;
  }


  .hawks-gallery-intro__content h2 {
    font-size:
      clamp(
        2.7rem,
        12.5vw,
        3.6rem
      );

    line-height: 0.93;
  }


  .hawks-gallery-intro__side {
    margin-left: 0;
  }


  .hawks-gallery-intro__description {
    margin-bottom: 22px;

    font-size: 0.93rem;

    line-height: 1.64;
  }


  .hawks-gallery-intro__note {
    grid-template-columns:
      40px
      minmax(0, 1fr);

    gap: 12px;

    padding:
      16px;
  }


  .hawks-gallery-intro__note-icon {
    width: 40px;
    height: 40px;

    border-radius: 10px;
  }


  .hawks-gallery-intro__note-icon svg {
    width: 19px;
    height: 19px;
  }


  .hawks-gallery-intro__divider {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      12px;

    margin:
      39px
      0
      21px;
  }


  .hawks-gallery-intro__categories {
    gap:
      8px
      13px;
  }


  .hawks-gallery-intro__categories span {
    font-size: 0.66rem;
  }


  .hawks-gallery-intro__categories
  span:not(:last-child)::after {
    margin-left: 13px;
  }

}













































/* ==========================================================
   REMODELING HAWKS LLC
   06. PAINTING
   SHARED GALLERY SECTION FOUNDATION
   ========================================================== */


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

.hawks-gallery-section {
  position: relative;

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

  overflow: hidden;

  color:
    var(--hawks-text);

  isolation: isolate;
}


.hawks-gallery-section--painting {
  background:
    linear-gradient(
      180deg,
      #f5f2ea 0%,
      #f9f7f2 100%
    );
}


/* mineral texture */

.hawks-gallery-section::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -4;

  opacity: 0.11;

  pointer-events: none;

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


/* ==========================================================
   02. AMBIENT ELEMENTS
   ========================================================== */

.hawks-gallery-section__ambient {
  position: absolute;

  z-index: -3;

  border-radius: 50%;

  pointer-events: none;
}


.hawks-gallery-section__ambient--gold {
  top: -310px;
  right: -280px;

  width: 650px;
  height: 650px;

  background:
    radial-gradient(
      circle,
      rgba(242, 180, 14, 0.08),
      transparent 70%
    );
}


.hawks-gallery-section__ambient--blue {
  left: -340px;
  bottom: -370px;

  width: 720px;
  height: 720px;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.04),
      transparent 70%
    );
}


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

.hawks-gallery-section__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(330px, 0.55fr);

  align-items: end;

  gap:
    clamp(
      50px,
      8vw,
      115px
    );

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


/* ==========================================================
   04. EYEBROW
   ========================================================== */

.hawks-gallery-section__eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 18px;
}


.hawks-gallery-section__eyebrow > span {
  width: 38px;
  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      var(--hawks-gold-soft)
    );
}


.hawks-gallery-section__eyebrow p {
  margin: 0;

  color:
    var(--hawks-gold-dark);

  font-size: 0.79rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    0.14em;

  text-transform: uppercase;
}


/* ==========================================================
   05. HEADING
   ========================================================== */

.hawks-gallery-section__heading h2 {
  max-width: 850px;

  margin: 0;

  color:
    var(--hawks-charcoal);

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

  font-size:
    clamp(
      3.5rem,
      5.2vw,
      5.8rem
    );

  font-weight: 700;

  line-height: 0.91;

  letter-spacing:
    -0.026em;

  text-wrap:
    balance;
}


.hawks-gallery-section__heading h2 span {
  display: block;

  color:
    var(--hawks-gold-dark);
}


/* ==========================================================
   06. INTRO
   ========================================================== */

.hawks-gallery-section__intro {
  max-width: 490px;

  margin-left: auto;
}


.hawks-gallery-section__intro > p {
  margin:
    0
    0
    22px;

  color:
    var(--hawks-text-soft);

  font-size:
    clamp(
      1rem,
      1.08vw,
      1.07rem
    );

  line-height: 1.72;
}


/* ==========================================================
   07. TAGS
   ========================================================== */

.hawks-gallery-section__tags {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}


.hawks-gallery-section__tags span {
  display: inline-flex;
  align-items: center;

  min-height: 34px;

  padding:
    7px
    11px;

  border:
    1px solid
    rgba(23, 27, 32, 0.1);

  border-radius: 999px;

  color:
    var(--hawks-text-soft);

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

  font-size: 0.69rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.065em;

  text-transform: uppercase;
}


/* ==========================================================
   08. PROJECT GRID
   ========================================================== */

.hawks-project-grid {
  display: grid;

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

  grid-auto-flow:
    dense;

  grid-auto-rows:
    clamp(
      72px,
      6.3vw,
      96px
    );

  gap:
    clamp(
      14px,
      1.5vw,
      22px
    );
}


/*
   DEFAULT ITEM

   Any future image without an additional class
   automatically gets this size.
*/

.hawks-project-card {
  grid-column:
    span 4;

  grid-row:
    span 4;

  min-width: 0;

  margin: 0;
}


/* ==========================================================
   09. ADAPTIVE COMPOSITIONS
   ========================================================== */

/*
   One image only:
   it becomes a large editorial feature.
*/

.hawks-project-grid
.hawks-project-card:only-child {
  grid-column:
    1 / -1;

  grid-row:
    span 6;
}


/*
   Exactly 2 images:
   Painting currently uses this state.

   No empty cells.
*/

.hawks-project-grid
.hawks-project-card:first-child:nth-last-child(2) {
  grid-column:
    span 7;

  grid-row:
    span 6;
}


.hawks-project-grid
.hawks-project-card:first-child:nth-last-child(2)
+
.hawks-project-card {
  grid-column:
    span 5;

  grid-row:
    span 5;

  margin-top:
    clamp(
      35px,
      5vw,
      72px
    );
}


/*
   3 or more images:
   create an editorial rhythm without requiring
   an exact number of photographs.
*/

.hawks-project-grid
.hawks-project-card:first-child:nth-last-child(n + 3) {
  grid-column:
    span 7;

  grid-row:
    span 6;
}


.hawks-project-grid
.hawks-project-card:nth-child(2):nth-last-child(n + 2) {
  grid-column:
    span 5;

  grid-row:
    span 3;
}


.hawks-project-grid
.hawks-project-card:nth-child(3) {
  grid-column:
    span 5;

  grid-row:
    span 3;
}


/*
   Additional images continue naturally.
*/

.hawks-project-grid
.hawks-project-card:nth-child(n + 4) {
  grid-column:
    span 4;

  grid-row:
    span 4;
}


/*
   Every few photographs we introduce a wider image.

   This pattern keeps working even when the gallery
   grows beyond 5–7 photos.
*/

.hawks-project-grid
.hawks-project-card:nth-child(7n + 4) {
  grid-column:
    span 8;
}


.hawks-project-grid
.hawks-project-card:nth-child(7n + 5) {
  grid-column:
    span 4;
}


/*
   Prevent an isolated last item from appearing too small
   in many common gallery sizes.
*/

.hawks-project-grid
.hawks-project-card:last-child:nth-child(3n + 1) {
  grid-column:
    span 8;
}


/* ==========================================================
   10. CARD
   ========================================================== */

.hawks-project-card__button {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;

  min-height: 100%;

  padding: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(23, 27, 32, 0.08);

  border-radius:
    clamp(
      17px,
      1.8vw,
      25px
    );

  color:
    var(--hawks-white);

  background:
    var(--hawks-graphite);

  box-shadow:
    0 18px 50px
    rgba(7, 9, 12, 0.09);

  cursor: pointer;

  isolation: isolate;

  transition:
    transform
      420ms
      var(--hawks-ease),
    box-shadow
      420ms
      ease;
}


.hawks-project-card__button:hover {
  transform:
    translateY(-5px);

  box-shadow:
    0 27px 68px
    rgba(7, 9, 12, 0.16);
}


/* ==========================================================
   11. MEDIA
   ========================================================== */

.hawks-project-card__media {
  position: absolute;
  inset: 0;

  display: block;
}


.hawks-project-card__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform:
    scale(1.015);

  transition:
    transform
      850ms
      var(--hawks-ease),
    filter
      500ms
      ease;
}


.hawks-project-card__button:hover
.hawks-project-card__media img {
  transform:
    scale(1.055);
}


/* ==========================================================
   12. OVERLAY
   ========================================================== */

.hawks-project-card__overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding:
    clamp(
      18px,
      2vw,
      27px
    );

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(7, 9, 12, 0.09) 0%,
      rgba(7, 9, 12, 0.02) 42%,
      rgba(7, 9, 12, 0.66) 100%
    );

  transition:
    background
      350ms
      ease;
}


.hawks-project-card__button:hover
.hawks-project-card__overlay {
  background:
    linear-gradient(
      180deg,
      rgba(7, 9, 12, 0.12) 0%,
      rgba(7, 9, 12, 0.04) 36%,
      rgba(7, 9, 12, 0.73) 100%
    );
}


/* ==========================================================
   13. LABEL
   ========================================================== */

.hawks-project-card__label {
  align-self: flex-start;

  display: inline-flex;
  align-items: center;

  min-height: 30px;

  padding:
    6px
    10px;

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

  border-radius: 999px;

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

  background:
    rgba(7, 9, 12, 0.54);

  backdrop-filter:
    blur(10px);

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

  font-size: 0.67rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    0.08em;

  text-transform: uppercase;
}


/* ==========================================================
   14. VIEW PROJECT
   ========================================================== */

.hawks-project-card__view {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  align-self: flex-start;

  color:
    var(--hawks-white);

  font-size: 0.78rem;

  font-weight: 700;

  line-height: 1.2;

  opacity: 0.88;

  transform:
    translateY(5px);

  transition:
    opacity
      300ms
      ease,
    transform
      350ms
      var(--hawks-ease);
}


.hawks-project-card__view svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke:
    var(--hawks-gold);

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-project-card__button:hover
.hawks-project-card__view {
  opacity: 1;

  transform:
    translateY(0);
}


/* ==========================================================
   15. CORNER BUTTON
   ========================================================== */

.hawks-project-card__corner {
  position: absolute;

  top: 17px;
  right: 17px;

  z-index: 4;

  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

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

  border-radius: 50%;

  color:
    var(--hawks-white);

  background:
    rgba(7, 9, 12, 0.52);

  backdrop-filter:
    blur(10px);

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

  opacity: 0;

  transform:
    translate3d(
      5px,
      -5px,
      0
    );

  transition:
    opacity
      280ms
      ease,
    transform
      350ms
      var(--hawks-ease),
    background-color
      220ms
      ease;
}


.hawks-project-card__corner svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-project-card__button:hover
.hawks-project-card__corner {
  opacity: 1;

  transform:
    translate3d(
      0,
      0,
      0
    );
}


.hawks-project-card__corner:hover {
  color:
    var(--hawks-black);

  background:
    var(--hawks-gold);
}


/* ==========================================================
   16. SECTION FOOTER
   ========================================================== */

.hawks-gallery-section__footer {
  display: grid;

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

  align-items: center;

  gap:
    20px;

  margin-top:
    clamp(
      38px,
      5vw,
      62px
    );
}


.hawks-gallery-section__footer-line {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(23, 27, 32, 0.15),
      rgba(23, 27, 32, 0.035)
    );
}


.hawks-gallery-section__footer p {
  margin: 0;

  color:
    var(--hawks-text-soft);

  font-size: 0.8rem;

  font-weight: 600;
}


.hawks-gallery-section__footer a {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color:
    var(--hawks-text);

  font-size: 0.8rem;

  font-weight: 700;
}


.hawks-gallery-section__footer a svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke:
    var(--hawks-gold-dark);

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  transition:
    transform
      260ms
      var(--hawks-ease);
}


.hawks-gallery-section__footer a:hover svg {
  transform:
    translateX(4px);
}


/* ==========================================================
   17. FOCUS
   ========================================================== */

.hawks-project-card__button:focus-visible {
  outline:
    3px solid
    var(--hawks-gold);

  outline-offset: 4px;
}


/* ==========================================================
   18. REDUCED MOTION
   ========================================================== */

html.reduce-motion
.hawks-project-card__button,
html.reduce-motion
.hawks-project-card__media img,
html.reduce-motion
.hawks-project-card__corner,
html.reduce-motion
.hawks-project-card__view,
html.reduce-motion
.hawks-gallery-section__footer a svg {
  transition: none !important;
}


/* ==========================================================
   19. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-project-grid {
    grid-auto-rows:
      clamp(
        78px,
        6.1vw,
        98px
      );
  }

}


/* ==========================================================
   20. TABLET
   ========================================================== */

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

  .hawks-gallery-section {
    padding:
      90px
      0;
  }


  .hawks-gallery-section__header {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.62fr);

    gap: 42px;
  }


  .hawks-gallery-section__heading h2 {
    font-size:
      clamp(
        3.1rem,
        6vw,
        4.6rem
      );
  }


  .hawks-project-grid {
    grid-auto-rows:
      clamp(
        70px,
        8vw,
        88px
      );

    gap: 15px;
  }


  .hawks-project-card {
    grid-column:
      span 6;
  }


  .hawks-project-grid
  .hawks-project-card:first-child:nth-last-child(2) {
    grid-column:
      span 7;
  }


  .hawks-project-grid
  .hawks-project-card:first-child:nth-last-child(2)
  +
  .hawks-project-card {
    grid-column:
      span 5;
  }

}


/* ==========================================================
   21. MOBILE
   ========================================================== */

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

  .hawks-gallery-section {
    padding:
      76px
      0;
  }


  .hawks-gallery-section__header {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 27px;

    margin-bottom: 43px;
  }


  .hawks-gallery-section__heading h2 {
    font-size:
      clamp(
        3rem,
        10vw,
        4.2rem
      );
  }


  .hawks-gallery-section__intro {
    max-width: 580px;

    margin-left: 0;
  }


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

    grid-auto-rows:
      150px;

    gap: 14px;
  }


  .hawks-project-card,
  .hawks-project-grid
  .hawks-project-card:first-child:nth-last-child(2),
  .hawks-project-grid
  .hawks-project-card:first-child:nth-last-child(2)
  +
  .hawks-project-card,
  .hawks-project-grid
  .hawks-project-card:first-child:nth-last-child(n + 3),
  .hawks-project-grid
  .hawks-project-card:nth-child(2):nth-last-child(n + 2),
  .hawks-project-grid
  .hawks-project-card:nth-child(3),
  .hawks-project-grid
  .hawks-project-card:nth-child(n + 4),
  .hawks-project-grid
  .hawks-project-card:nth-child(7n + 4),
  .hawks-project-grid
  .hawks-project-card:nth-child(7n + 5),
  .hawks-project-grid
  .hawks-project-card:last-child:nth-child(3n + 1) {
    grid-column:
      span 1;

    grid-row:
      span 2;

    margin-top: 0;
  }


  .hawks-project-grid
  .hawks-project-card:first-child {
    grid-column:
      1 / -1;

    grid-row:
      span 3;
  }


  .hawks-project-grid
  .hawks-project-card:only-child {
    grid-column:
      1 / -1;

    grid-row:
      span 3;
  }


  .hawks-gallery-section__footer {
    grid-template-columns:
      minmax(30px, 1fr)
      auto;

    gap: 15px;
  }


  .hawks-gallery-section__footer p {
    display: none;
  }

}


/* ==========================================================
   22. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hawks-gallery-section {
    padding:
      66px
      0;
  }


  .hawks-gallery-section__header {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 23px;

    margin-bottom: 36px;
  }


  .hawks-gallery-section__eyebrow {
    margin-bottom: 15px;
  }


  .hawks-gallery-section__eyebrow p {
    font-size: 0.73rem;
  }


  .hawks-gallery-section__heading h2 {
    font-size:
      clamp(
        2.65rem,
        12vw,
        3.55rem
      );

    line-height: 0.93;
  }


  .hawks-gallery-section__intro {
    margin-left: 0;
  }


  .hawks-gallery-section__intro > p {
    font-size: 0.92rem;

    line-height: 1.64;
  }


  .hawks-gallery-section__tags {
    gap: 6px;
  }


  .hawks-gallery-section__tags span {
    min-height: 31px;

    padding:
      6px
      9px;

    font-size: 0.62rem;
  }


  .hawks-project-grid {
    display: grid;

    grid-template-columns: 1fr;

    grid-auto-rows: auto;

    gap: 12px;
  }


  .hawks-project-card,
  .hawks-project-grid
  .hawks-project-card:only-child,
  .hawks-project-grid
  .hawks-project-card:first-child:nth-last-child(2),
  .hawks-project-grid
  .hawks-project-card:first-child:nth-last-child(2)
  +
  .hawks-project-card,
  .hawks-project-grid
  .hawks-project-card:first-child:nth-last-child(n + 3),
  .hawks-project-grid
  .hawks-project-card:nth-child(2):nth-last-child(n + 2),
  .hawks-project-grid
  .hawks-project-card:nth-child(3),
  .hawks-project-grid
  .hawks-project-card:nth-child(n + 4),
  .hawks-project-grid
  .hawks-project-card:nth-child(7n + 4),
  .hawks-project-grid
  .hawks-project-card:nth-child(7n + 5),
  .hawks-project-grid
  .hawks-project-card:last-child:nth-child(3n + 1) {
    grid-column: auto;
    grid-row: auto;

    margin-top: 0;
  }


  .hawks-project-card__button {
    aspect-ratio:
      4 / 3;

    border-radius: 17px;
  }


  .hawks-project-card:first-child
  .hawks-project-card__button {
    aspect-ratio:
      4 / 3;
  }


  .hawks-project-card__overlay {
    padding: 17px;
  }


  .hawks-project-card__corner {
    top: 13px;
    right: 13px;

    width: 37px;
    height: 37px;

    opacity: 1;

    transform: none;
  }


  .hawks-project-card__view {
    transform: none;

    opacity: 1;
  }


  .hawks-gallery-section__footer {
    grid-template-columns: 1fr;

    gap: 14px;

    margin-top: 32px;
  }


  .hawks-gallery-section__footer-line {
    width: 100%;
  }


  .hawks-gallery-section__footer p {
    display: none;
  }

}


















































/* ==========================================================
   FULLSCREEN GALLERY VIEWER
   ========================================================== */

.hawks-gallery-viewer {
  position: fixed;
  inset: 0;

  z-index: 20000;

  display: none;

  width: 100%;
  height: 100%;

  color:
    var(--hawks-white);

  isolation: isolate;
}


.hawks-gallery-viewer.is-open {
  display: block;
}


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

.hawks-gallery-viewer__backdrop {
  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    rgba(4, 6, 8, 0.96);

  backdrop-filter:
    blur(18px);

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


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

.hawks-gallery-viewer__stage {
  position: relative;

  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

  padding:
    clamp(
      65px,
      7vw,
      95px
    )
    clamp(
      65px,
      8vw,
      120px
    );
}


/* ==========================================================
   MEDIA
   ========================================================== */

.hawks-gallery-viewer__media {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

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


.hawks-gallery-viewer__media img {
  display: block;

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

  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 8px;

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, 0.34);

  opacity: 0;

  transform:
    scale(0.985);

  transition:
    opacity
      320ms
      ease,
    transform
      450ms
      var(--hawks-ease);
}


.hawks-gallery-viewer.is-image-ready
.hawks-gallery-viewer__media img {
  opacity: 1;

  transform:
    scale(1);
}


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

.hawks-gallery-viewer__close {
  position: absolute;

  top:
    clamp(
      18px,
      3vw,
      30px
    );

  right:
    clamp(
      18px,
      3vw,
      30px
    );

  z-index: 3;

  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  padding: 0;

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

  border-radius: 50%;

  color:
    var(--hawks-white);

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

  cursor: pointer;

  transition:
    color
      220ms
      ease,
    background-color
      220ms
      ease,
    transform
      280ms
      var(--hawks-ease);
}


.hawks-gallery-viewer__close:hover {
  color:
    var(--hawks-black);

  background:
    var(--hawks-gold);

  transform:
    rotate(4deg);
}


.hawks-gallery-viewer__close svg {
  width: 20px;
  height: 20px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;
}


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

.hawks-gallery-viewer__nav {
  position: absolute;

  top: 50%;

  z-index: 3;

  display: grid;
  place-items: center;

  width: 50px;
  height: 50px;

  padding: 0;

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

  border-radius: 50%;

  color:
    var(--hawks-white);

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

  cursor: pointer;

  transform:
    translateY(-50%);

  transition:
    color
      220ms
      ease,
    background-color
      220ms
      ease;
}


.hawks-gallery-viewer__nav:hover {
  color:
    var(--hawks-black);

  background:
    var(--hawks-gold);
}


.hawks-gallery-viewer__nav--previous {
  left:
    clamp(
      17px,
      3vw,
      34px
    );
}


.hawks-gallery-viewer__nav--next {
  right:
    clamp(
      17px,
      3vw,
      34px
    );
}


.hawks-gallery-viewer__nav svg {
  width: 23px;
  height: 23px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   INFORMATION
   ========================================================== */

.hawks-gallery-viewer__info {
  position: absolute;

  left:
    clamp(
      20px,
      4vw,
      54px
    );

  bottom:
    clamp(
      18px,
      3vw,
      30px
    );

  z-index: 3;
}


.hawks-gallery-viewer__info span {
  display: block;

  margin-bottom: 4px;

  color:
    var(--hawks-gold);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.hawks-gallery-viewer__info strong {
  display: block;

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

  font-size: 0.84rem;

  font-weight: 700;
}


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

.hawks-gallery-viewer button:focus-visible {
  outline:
    3px solid
    var(--hawks-gold);

  outline-offset: 3px;
}


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

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

  .hawks-gallery-viewer__stage {
    padding:
      68px
      80px;
  }

}


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

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

  .hawks-gallery-viewer__stage {
    padding:
      65px
      55px;
  }


  .hawks-gallery-viewer__nav {
    width: 44px;
    height: 44px;
  }

}


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

@media (max-width: 480px) {

  .hawks-gallery-viewer__stage {
    padding:
      65px
      13px
      80px;
  }


  .hawks-gallery-viewer__close {
    top: 15px;
    right: 15px;

    width: 42px;
    height: 42px;
  }


  .hawks-gallery-viewer__nav {
    top: auto;
    bottom: 18px;

    width: 42px;
    height: 42px;

    transform: none;
  }


  .hawks-gallery-viewer__nav--previous {
    left: auto;
    right: 68px;
  }


  .hawks-gallery-viewer__nav--next {
    right: 17px;
  }


  .hawks-gallery-viewer__info {
    left: 17px;
    bottom: 22px;

    max-width:
      calc(
        100% - 145px
      );
  }

}


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

html.reduce-motion
.hawks-gallery-viewer__media img,
html.reduce-motion
.hawks-gallery-viewer__close,
html.reduce-motion
.hawks-gallery-viewer__nav {
  transition: none !important;
}


















































/* ==========================================================
   REMODELING HAWKS LLC
   07. DRYWALL & FINISHING
   ========================================================== */


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

.hawks-gallery-section--drywall {
  color:
    var(--hawks-white);

  background:
    linear-gradient(
      145deg,
      #11161c 0%,
      #090c10 58%,
      #07090c 100%
    );
}


/* stronger texture */

.hawks-gallery-section--drywall::before {
  opacity: 0.13;

  mix-blend-mode:
    soft-light;
}


/* subtle architectural plane */

.hawks-gallery-section--drywall::after {
  content: "";

  position: absolute;

  top: 8%;
  right: -9%;

  z-index: -3;

  width: 43%;
  height: 58%;

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

  transform:
    skewY(-7deg);

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.018),
      transparent 70%
    );
}


/* ==========================================================
   02. AMBIENT ELEMENTS
   ========================================================== */

.hawks-gallery-section__ambient--drywall-gold {
  top: -340px;
  right: -300px;

  width: 690px;
  height: 690px;

  background:
    radial-gradient(
      circle,
      rgba(242, 180, 14, 0.095),
      rgba(242, 180, 14, 0.018) 48%,
      transparent 72%
    );
}


.hawks-gallery-section__ambient--drywall-blue {
  bottom: -390px;
  left: -340px;

  width: 760px;
  height: 760px;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.085),
      transparent 70%
    );
}


/* ==========================================================
   03. DARK HEADER OVERRIDES
   ========================================================== */

.hawks-gallery-section--drywall
.hawks-gallery-section__eyebrow p {
  color:
    var(--hawks-gold);
}


.hawks-gallery-section--drywall
.hawks-gallery-section__heading h2 {
  color:
    var(--hawks-white);
}


.hawks-gallery-section--drywall
.hawks-gallery-section__heading h2 span {
  color:
    var(--hawks-gold);
}


.hawks-gallery-section--drywall
.hawks-gallery-section__intro > p {
  color:
    rgba(255, 255, 255, 0.59);
}


/* ==========================================================
   04. DARK TAGS
   ========================================================== */

.hawks-gallery-section--drywall
.hawks-gallery-section__tags span {
  color:
    rgba(255, 255, 255, 0.66);

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

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


/* ==========================================================
   05. EMPTY STATE
   ========================================================== */

.hawks-gallery-empty {
  display: grid;

  grid-template-columns:
    minmax(0, 1.22fr)
    minmax(330px, 0.62fr);

  min-height:
    clamp(
      470px,
      42vw,
      610px
    );

  overflow: hidden;

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

  border-radius:
    var(--hawks-radius-xl);

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

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, 0.2);
}


/* ==========================================================
   06. VISUAL AREA
   ========================================================== */

.hawks-gallery-empty__visual {
  position: relative;

  min-height: 100%;

  overflow: hidden;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.075);

  background:

    radial-gradient(
      circle at 70% 30%,
      rgba(242, 180, 14, 0.065),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #1b222a 0%,
      #11161c 100%
    );

  isolation: isolate;
}


/* drywall-like subtle surface */

.hawks-gallery-empty__visual::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  opacity: 0.25;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.022) 38%,
      rgba(255, 255, 255, 0.045) 49%,
      rgba(255, 255, 255, 0.018) 58%,
      transparent 100%
    );
}


/* ==========================================================
   07. ARCHITECTURAL FRAME
   ========================================================== */

.hawks-gallery-empty__frame {
  position: absolute;

  inset:
    clamp(
      24px,
      3vw,
      42px
    );

  pointer-events: none;

  opacity: 0.38;
}


.hawks-gallery-empty__frame svg {
  display: block;

  width: 100%;
  height: 100%;
}


.hawks-gallery-empty__frame path {
  fill: none;

  stroke:
    rgba(255, 255, 255, 0.12);

  stroke-width: 1;

  vector-effect:
    non-scaling-stroke;
}


/* ==========================================================
   08. CENTER CONTENT
   ========================================================== */

.hawks-gallery-empty__center {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 3;

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

  width:
    min(
      78%,
      450px
    );

  text-align: center;

  transform:
    translate(
      -50%,
      -50%
    );
}


.hawks-gallery-empty__icon {
  display: grid;
  place-items: center;

  width: 72px;
  height: 72px;

  margin-bottom: 22px;

  border:
    1px solid
    rgba(242, 180, 14, 0.24);

  border-radius: 20px;

  color:
    var(--hawks-gold);

  background:
    rgba(242, 180, 14, 0.065);

  box-shadow:
    0 17px 40px
    rgba(0, 0, 0, 0.16);
}


.hawks-gallery-empty__icon svg {
  width: 32px;
  height: 32px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.5;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-gallery-empty__small {
  margin-bottom: 8px;

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

  font-size: 0.69rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.hawks-gallery-empty__center strong {
  color:
    var(--hawks-white);

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

  font-size:
    clamp(
      2.3rem,
      3.3vw,
      3.75rem
    );

  font-weight: 700;

  line-height: 0.96;

  letter-spacing:
    -0.02em;
}


/* ==========================================================
   09. DECORATIVE MARKS
   ========================================================== */

.hawks-gallery-empty__mark {
  position: absolute;

  z-index: 4;

  width: 145px;
  height: 3px;

  pointer-events: none;

  transform:
    rotate(-38deg);
}


.hawks-gallery-empty__mark--gold {
  top: 50px;
  left: -43px;

  background:
    var(--hawks-gold);
}


.hawks-gallery-empty__mark--blue {
  right: -44px;
  bottom: 53px;

  background:
    var(--hawks-blue);
}


/* ==========================================================
   10. CONTENT PANEL
   ========================================================== */

.hawks-gallery-empty__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;

  padding:
    clamp(
      32px,
      4vw,
      54px
    );
}


/* ==========================================================
   11. KICKER
   ========================================================== */

.hawks-gallery-empty__kicker {
  display: block;

  margin-bottom: 13px;

  color:
    var(--hawks-gold);

  font-size: 0.71rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* ==========================================================
   12. CONTENT TITLE
   ========================================================== */

.hawks-gallery-empty__content h3 {
  max-width: 420px;

  margin:
    0
    0
    17px;

  color:
    var(--hawks-white);

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

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

  font-weight: 700;

  line-height: 0.98;

  letter-spacing:
    -0.018em;
}


/* ==========================================================
   13. CONTENT COPY
   ========================================================== */

.hawks-gallery-empty__content > p {
  max-width: 430px;

  margin:
    0
    0
    27px;

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

  font-size: 0.9rem;

  line-height: 1.68;
}


/* ==========================================================
   14. SERVICES
   ========================================================== */

.hawks-gallery-empty__services {
  display: flex;
  flex-direction: column;

  margin-bottom: 30px;

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


.hawks-gallery-empty__services span {
  position: relative;

  padding:
    10px
    0
    10px
    18px;

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

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

  font-size: 0.78rem;

  font-weight: 600;

  line-height: 1.35;
}


.hawks-gallery-empty__services span::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 1px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--hawks-gold);

  transform:
    translateY(-50%);
}


/* ==========================================================
   15. CTA
   ========================================================== */

.hawks-gallery-empty__cta {
  display: inline-flex;
  align-items: center;

  align-self: flex-start;

  gap: 10px;

  min-height: 46px;

  padding:
    10px
    14px;

  border:
    1px solid
    rgba(242, 180, 14, 0.28);

  border-radius: 11px;

  color:
    var(--hawks-gold-soft);

  background:
    rgba(242, 180, 14, 0.055);

  font-size: 0.8rem;

  font-weight: 700;

  transition:
    color
      220ms
      ease,
    background-color
      220ms
      ease,
    border-color
      220ms
      ease,
    transform
      280ms
      var(--hawks-ease);
}


.hawks-gallery-empty__cta svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  transition:
    transform
      260ms
      var(--hawks-ease);
}


.hawks-gallery-empty__cta:hover {
  color:
    var(--hawks-black);

  border-color:
    var(--hawks-gold);

  background:
    var(--hawks-gold);

  transform:
    translateY(-2px);
}


.hawks-gallery-empty__cta:hover svg {
  transform:
    translateX(3px);
}


/* ==========================================================
   16. DARK SECTION FOOTER
   ========================================================== */

.hawks-gallery-section__footer--dark
.hawks-gallery-section__footer-line {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0.025)
    );
}


.hawks-gallery-section__footer--dark p {
  color:
    rgba(255, 255, 255, 0.45);
}


.hawks-gallery-section__footer--dark a {
  color:
    rgba(255, 255, 255, 0.86);
}


.hawks-gallery-section__footer--dark a svg {
  stroke:
    var(--hawks-gold);
}


/* ==========================================================
   17. REDUCED MOTION
   ========================================================== */

html.reduce-motion
.hawks-gallery-empty__cta,
html.reduce-motion
.hawks-gallery-empty__cta svg {
  transition: none !important;
}


/* ==========================================================
   18. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-gallery-empty {
    grid-template-columns:
      minmax(600px, 1.2fr)
      minmax(350px, 0.6fr);
  }

}


/* ==========================================================
   19. TABLET
   ========================================================== */

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

  .hawks-gallery-empty {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.68fr);

    min-height: 500px;
  }


  .hawks-gallery-empty__content {
    padding:
      34px
      29px;
  }


  .hawks-gallery-empty__center {
    width: 78%;
  }


  .hawks-gallery-empty__center strong {
    font-size:
      clamp(
        2.2rem,
        4vw,
        3.1rem
      );
  }

}


/* ==========================================================
   20. MOBILE
   ========================================================== */

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

  .hawks-gallery-empty {
    grid-template-columns: 1fr;

    min-height: auto;

    border-radius: 24px;
  }


  .hawks-gallery-empty__visual {
    min-height: 430px;

    border-right: 0;

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


  .hawks-gallery-empty__content {
    padding:
      34px
      30px;
  }

}


/* ==========================================================
   21. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hawks-gallery-empty {
    grid-template-columns: 1fr;

    min-height: auto;

    border-radius: 20px;
  }


  .hawks-gallery-empty__visual {
    min-height: 330px;

    border-right: 0;

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


  .hawks-gallery-empty__frame {
    inset: 20px;
  }


  .hawks-gallery-empty__center {
    width: 80%;
  }


  .hawks-gallery-empty__icon {
    width: 58px;
    height: 58px;

    margin-bottom: 17px;

    border-radius: 16px;
  }


  .hawks-gallery-empty__icon svg {
    width: 26px;
    height: 26px;
  }


  .hawks-gallery-empty__center strong {
    font-size:
      clamp(
        2rem,
        10vw,
        2.7rem
      );
  }


  .hawks-gallery-empty__content {
    padding:
      29px
      21px;
  }


  .hawks-gallery-empty__content h3 {
    font-size:
      clamp(
        2rem,
        10vw,
        2.65rem
      );
  }


  .hawks-gallery-empty__content > p {
    font-size: 0.87rem;
  }


  .hawks-gallery-empty__cta {
    width: 100%;

    justify-content: center;
  }

}

/* ==========================================================
   REMODELING HAWKS LLC
   07. DRYWALL & FINISHING
   REAL GALLERY LAYOUT
   5 IMAGES + 1 VIDEO
   ========================================================== */


/* ==========================================================
   01. GRID
   ========================================================== */

.hawks-project-grid--drywall {
  position: relative;
}


/*
   Override the generic nth-child gallery composition
   so Drywall has its own intentional layout.
*/

.hawks-project-grid--drywall
.hawks-project-card {
  margin-top: 0;
}


/* ==========================================================
   02. FEATURED IMAGE
   ========================================================== */

.hawks-project-grid--drywall
.hawks-project-card--drywall-featured {
  grid-column:
    span 7;

  grid-row:
    span 6;
}


/* stronger presence */

.hawks-project-grid--drywall
.hawks-project-card--drywall-featured
.hawks-project-card__button {
  border-color:
    rgba(255, 255, 255, 0.12);

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, 0.28);
}


/* gold architectural accent */

.hawks-project-grid--drywall
.hawks-project-card--drywall-featured
.hawks-project-card__button::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  z-index: 5;

  width: 120px;
  height: 4px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      var(--hawks-gold-soft)
    );

  transition:
    width
      420ms
      var(--hawks-ease);
}


.hawks-project-grid--drywall
.hawks-project-card--drywall-featured
.hawks-project-card__button:hover::after {
  width: 200px;
}


/* ==========================================================
   03. SIDE IMAGES
   ========================================================== */

.hawks-project-grid--drywall
.hawks-project-card--drywall-side {
  grid-column:
    span 5;

  grid-row:
    span 3;
}


/* ==========================================================
   04. MIDDLE IMAGES
   ========================================================== */

.hawks-project-grid--drywall
.hawks-project-card--drywall-half {
  grid-column:
    span 6;

  grid-row:
    span 4;
}


/* ==========================================================
   05. VIDEO
   ========================================================== */

.hawks-project-grid--drywall
.hawks-project-card--drywall-video {
  grid-column:
    1 / -1;

  grid-row:
    span 5;
}


/*
   A wider aspect makes the video feel intentionally cinematic.
*/

.hawks-project-grid--drywall
.hawks-project-card--drywall-video
.hawks-project-card__button {
  border-color:
    rgba(242, 180, 14, 0.15);

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, 0.3);
}


/* stronger video shading */

.hawks-project-grid--drywall
.hawks-project-card--drywall-video
.hawks-project-card__overlay {
  background:
    linear-gradient(
      180deg,
      rgba(7, 9, 12, 0.13) 0%,
      rgba(7, 9, 12, 0.045) 38%,
      rgba(7, 9, 12, 0.75) 100%
    );
}


/* ==========================================================
   06. DARK SECTION CARDS
   ========================================================== */

.hawks-gallery-section--drywall
.hawks-project-card__button {
  border-color:
    rgba(255, 255, 255, 0.09);

  background:
    var(--hawks-graphite);

  box-shadow:
    0 20px 58px
    rgba(0, 0, 0, 0.23);
}


.hawks-gallery-section--drywall
.hawks-project-card__button:hover {
  border-color:
    rgba(242, 180, 14, 0.18);

  box-shadow:
    0 30px 78px
    rgba(0, 0, 0, 0.32);
}


/* ==========================================================
   07. IMAGE TREATMENT
   ========================================================== */

.hawks-gallery-section--drywall
.hawks-project-card__media img,
.hawks-gallery-section--drywall
.hawks-project-card__media video {
  filter:
    saturate(0.92)
    contrast(1.035);
}


.hawks-gallery-section--drywall
.hawks-project-card__button:hover
.hawks-project-card__media img,
.hawks-gallery-section--drywall
.hawks-project-card__button:hover
.hawks-project-card__media video {
  filter:
    saturate(1)
    contrast(1.045);
}


/* ==========================================================
   08. LABEL
   ========================================================== */

.hawks-gallery-section--drywall
.hawks-project-card__label {
  border-color:
    rgba(255, 255, 255, 0.13);

  background:
    rgba(7, 9, 12, 0.68);
}


/* ==========================================================
   09. TABLET
   ========================================================== */

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

  .hawks-project-grid--drywall
  .hawks-project-card--drywall-featured {
    grid-column:
      span 7;

    grid-row:
      span 6;
  }


  .hawks-project-grid--drywall
  .hawks-project-card--drywall-side {
    grid-column:
      span 5;

    grid-row:
      span 3;
  }


  .hawks-project-grid--drywall
  .hawks-project-card--drywall-half {
    grid-column:
      span 6;

    grid-row:
      span 4;
  }


  .hawks-project-grid--drywall
  .hawks-project-card--drywall-video {
    grid-column:
      1 / -1;

    grid-row:
      span 5;
  }

}


/* ==========================================================
   10. MOBILE
   ========================================================== */

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

  .hawks-project-grid--drywall
  .hawks-project-card--drywall-featured {
    grid-column:
      1 / -1;

    grid-row:
      span 3;
  }


  .hawks-project-grid--drywall
  .hawks-project-card--drywall-side,
  .hawks-project-grid--drywall
  .hawks-project-card--drywall-half {
    grid-column:
      span 1;

    grid-row:
      span 2;
  }


  .hawks-project-grid--drywall
  .hawks-project-card--drywall-video {
    grid-column:
      1 / -1;

    grid-row:
      span 3;
  }

}


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

@media (max-width: 480px) {

  .hawks-project-grid--drywall
  .hawks-project-card--drywall-featured,
  .hawks-project-grid--drywall
  .hawks-project-card--drywall-side,
  .hawks-project-grid--drywall
  .hawks-project-card--drywall-half,
  .hawks-project-grid--drywall
  .hawks-project-card--drywall-video {
    grid-column: auto;
    grid-row: auto;

    margin-top: 0;
  }


  .hawks-project-grid--drywall
  .hawks-project-card--drywall-featured
  .hawks-project-card__button,
  .hawks-project-grid--drywall
  .hawks-project-card--drywall-side
  .hawks-project-card__button,
  .hawks-project-grid--drywall
  .hawks-project-card--drywall-half
  .hawks-project-card__button {
    aspect-ratio:
      4 / 3;
  }


  .hawks-project-grid--drywall
  .hawks-project-card--drywall-video
  .hawks-project-card__button {
    aspect-ratio:
      16 / 10;
  }


  .hawks-project-grid--drywall
  .hawks-project-card--drywall-featured
  .hawks-project-card__button::after {
    width: 80px;
  }

}


















































/* ==========================================================
   REMODELING HAWKS LLC
   08. REMODELING & INTERIOR FINISHES
   ========================================================== */


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

.hawks-gallery-section--remodeling {
  color:
    var(--hawks-text);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #faf9f6 52%,
      #f6f3ed 100%
    );
}


/* subtle architectural plane */

.hawks-gallery-section--remodeling::after {
  content: "";

  position: absolute;

  top: 10%;
  right: -12%;

  z-index: -3;

  width: 48%;
  height: 56%;

  border:
    1px solid
    rgba(23, 27, 32, 0.035);

  pointer-events: none;

  transform:
    skewY(-7deg);

  background:
    linear-gradient(
      145deg,
      rgba(242, 180, 14, 0.025),
      rgba(255, 255, 255, 0)
    );
}


/* ==========================================================
   02. AMBIENT ELEMENTS
   ========================================================== */

.hawks-gallery-section__ambient--remodeling-gold {
  top: -330px;
  left: -300px;

  width: 700px;
  height: 700px;

  background:
    radial-gradient(
      circle,
      rgba(242, 180, 14, 0.08),
      transparent 70%
    );
}


.hawks-gallery-section__ambient--remodeling-blue {
  right: -380px;
  bottom: -400px;

  width: 780px;
  height: 780px;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.045),
      transparent 70%
    );
}


/* ==========================================================
   03. HEADING
   ========================================================== */

.hawks-gallery-section--remodeling
.hawks-gallery-section__heading h2 {
  max-width: 900px;
}


.hawks-gallery-section--remodeling
.hawks-gallery-section__heading h2 span {
  color:
    var(--hawks-gold-dark);
}


/* ==========================================================
   04. TAGS
   ========================================================== */

.hawks-gallery-section--remodeling
.hawks-gallery-section__tags span {
  border-color:
    rgba(23, 27, 32, 0.09);

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

  box-shadow:
    0 5px 16px
    rgba(7, 9, 12, 0.025);
}


/* ==========================================================
   05. REMODELING GRID
   ========================================================== */

.hawks-project-grid--remodeling {
  position: relative;
}


/*
   These classes provide a little more direction
   to the current eight-image composition.

   They do NOT make the grid dependent on having
   exactly eight images.
*/


.hawks-project-grid--remodeling
.hawks-project-card--remodeling-featured {
  grid-column:
    span 7;

  grid-row:
    span 6;
}


.hawks-project-grid--remodeling
.hawks-project-card--remodeling-wide {
  grid-column:
    span 8;

  grid-row:
    span 4;
}


/* ==========================================================
   06. FIRST IMAGE TREATMENT
   ========================================================== */

.hawks-project-grid--remodeling
.hawks-project-card--remodeling-featured
.hawks-project-card__button {
  box-shadow:
    0 25px 72px
    rgba(7, 9, 12, 0.14);
}


/* ==========================================================
   07. SUBTLE GOLD DETAIL
   ========================================================== */

.hawks-project-grid--remodeling
.hawks-project-card--remodeling-featured
.hawks-project-card__button::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  z-index: 5;

  width: 110px;
  height: 4px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      var(--hawks-gold-soft)
    );

  transform-origin:
    left center;

  transition:
    width
      420ms
      var(--hawks-ease);
}


.hawks-project-grid--remodeling
.hawks-project-card--remodeling-featured
.hawks-project-card__button:hover::after {
  width: 185px;
}


/* ==========================================================
   08. WIDE CARD
   ========================================================== */

.hawks-project-grid--remodeling
.hawks-project-card--remodeling-wide
.hawks-project-card__button {
  border-radius:
    clamp(
      18px,
      2vw,
      27px
    );
}


/* ==========================================================
   09. IMAGE TONING
   ========================================================== */

.hawks-gallery-section--remodeling
.hawks-project-card__media img {
  filter:
    saturate(0.96)
    contrast(1.015);
}


.hawks-gallery-section--remodeling
.hawks-project-card__button:hover
.hawks-project-card__media img {
  filter:
    saturate(1)
    contrast(1.025);
}


/* ==========================================================
   10. CARD LABEL
   ========================================================== */

.hawks-gallery-section--remodeling
.hawks-project-card__label {
  border-color:
    rgba(255, 255, 255, 0.18);

  background:
    rgba(7, 9, 12, 0.58);
}


/* ==========================================================
   11. VISUAL SECTION DIVIDER
   ========================================================== */

.hawks-gallery-section--remodeling
.hawks-gallery-section__footer-line {
  background:
    linear-gradient(
      90deg,
      rgba(23, 27, 32, 0.16),
      rgba(242, 180, 14, 0.18),
      rgba(23, 27, 32, 0.03)
    );
}


/* ==========================================================
   12. TABLET
   ========================================================== */

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

  .hawks-project-grid--remodeling
  .hawks-project-card--remodeling-featured {
    grid-column:
      span 7;

    grid-row:
      span 6;
  }


  .hawks-project-grid--remodeling
  .hawks-project-card--remodeling-wide {
    grid-column:
      span 7;

    grid-row:
      span 4;
  }

}


/* ==========================================================
   13. MOBILE
   ========================================================== */

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

  .hawks-project-grid--remodeling
  .hawks-project-card--remodeling-featured {
    grid-column:
      1 / -1;

    grid-row:
      span 3;
  }


  .hawks-project-grid--remodeling
  .hawks-project-card--remodeling-wide {
    grid-column:
      1 / -1;

    grid-row:
      span 2;
  }

}


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

@media (max-width: 480px) {

  .hawks-project-grid--remodeling
  .hawks-project-card--remodeling-featured,
  .hawks-project-grid--remodeling
  .hawks-project-card--remodeling-wide {
    grid-column: auto;
    grid-row: auto;
  }


  .hawks-project-grid--remodeling
  .hawks-project-card--remodeling-featured
  .hawks-project-card__button,
  .hawks-project-grid--remodeling
  .hawks-project-card--remodeling-wide
  .hawks-project-card__button {
    aspect-ratio:
      4 / 3;
  }


  .hawks-project-grid--remodeling
  .hawks-project-card--remodeling-featured
  .hawks-project-card__button::after {
    width: 78px;
  }

}


















































/* ==========================================================
   REMODELING HAWKS LLC
   09. DEMOLITION
   ========================================================== */


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

.hawks-gallery-section--demolition {
  color:
    var(--hawks-text);

  background:
    linear-gradient(
      145deg,
      #ececea 0%,
      #f4f2ed 52%,
      #e8e8e5 100%
    );
}


/*
   Large architectural plane.
*/

.hawks-gallery-section--demolition::after {
  content: "";

  position: absolute;

  top: -14%;
  right: -10%;

  z-index: -3;

  width: 49%;
  height: 65%;

  border:
    1px solid
    rgba(23, 27, 32, 0.045);

  pointer-events: none;

  transform:
    rotate(-8deg);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0)
    );
}


/* ==========================================================
   02. AMBIENT ELEMENTS
   ========================================================== */

.hawks-gallery-section__ambient--demolition-gold {
  top: -350px;
  right: -300px;

  width: 700px;
  height: 700px;

  background:
    radial-gradient(
      circle,
      rgba(242, 180, 14, 0.085),
      transparent 70%
    );
}


.hawks-gallery-section__ambient--demolition-blue {
  left: -390px;
  bottom: -420px;

  width: 790px;
  height: 790px;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.04),
      transparent 70%
    );
}


/* ==========================================================
   03. STRUCTURAL DECORATION
   ========================================================== */

.hawks-gallery-demolition__structure {
  position: absolute;

  top: 8%;
  right: 0;

  z-index: -2;

  width:
    min(
      30vw,
      440px
    );

  height: 190px;

  overflow: hidden;

  pointer-events: none;

  opacity: 0.32;
}


.hawks-gallery-demolition__structure span {
  position: absolute;

  right: -70px;

  width: 390px;
  height: 2px;

  transform:
    rotate(-34deg);
}


.hawks-gallery-demolition__structure
span:nth-child(1) {
  top: 40px;

  background:
    var(--hawks-gold);
}


.hawks-gallery-demolition__structure
span:nth-child(2) {
  top: 74px;

  background:
    var(--hawks-blue);
}


.hawks-gallery-demolition__structure
span:nth-child(3) {
  top: 108px;

  background:
    rgba(23, 27, 32, 0.3);
}


/* ==========================================================
   04. HEADER
   ========================================================== */

.hawks-gallery-section--demolition
.hawks-gallery-section__heading h2 {
  color:
    var(--hawks-charcoal);
}


.hawks-gallery-section--demolition
.hawks-gallery-section__heading h2 span {
  color:
    var(--hawks-gold-dark);
}


.hawks-gallery-section--demolition
.hawks-gallery-section__intro > p {
  color:
    #5c646d;
}


/* ==========================================================
   05. TAGS
   ========================================================== */

.hawks-gallery-section--demolition
.hawks-gallery-section__tags span {
  border-color:
    rgba(23, 27, 32, 0.1);

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

  box-shadow:
    0 5px 18px
    rgba(7, 9, 12, 0.025);
}


/* ==========================================================
   06. GRID
   ========================================================== */

.hawks-project-grid--demolition {
  position: relative;
}


/*
   Featured opening image.

   This gives the current 6-image gallery a stronger
   beginning, but additional images continue normally.
*/

.hawks-project-grid--demolition
.hawks-project-card--demolition-featured {
  grid-column:
    span 7;

  grid-row:
    span 6;
}


/*
   Final wide image.

   With the current six photographs this creates a
   deliberate closing composition.

   If this image is removed, the regular adaptive grid
   simply fills the remaining space.
*/

.hawks-project-grid--demolition
.hawks-project-card--demolition-wide {
  grid-column:
    1 / -1;

  grid-row:
    span 4;
}


/* ==========================================================
   07. FEATURED CARD
   ========================================================== */

.hawks-project-grid--demolition
.hawks-project-card--demolition-featured
.hawks-project-card__button {
  box-shadow:
    0 26px 72px
    rgba(7, 9, 12, 0.16);
}


/*
   Industrial accent.
*/

.hawks-project-grid--demolition
.hawks-project-card--demolition-featured
.hawks-project-card__button::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  z-index: 5;

  width: 120px;
  height: 4px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      var(--hawks-blue)
    );

  transition:
    width
      420ms
      var(--hawks-ease);
}


.hawks-project-grid--demolition
.hawks-project-card--demolition-featured
.hawks-project-card__button:hover::after {
  width: 205px;
}


/* ==========================================================
   08. WIDE END IMAGE
   ========================================================== */

.hawks-project-grid--demolition
.hawks-project-card--demolition-wide
.hawks-project-card__button {
  border-radius:
    clamp(
      18px,
      2vw,
      27px
    );
}


/*
   Wide cards work particularly well with a slightly
   reduced overlay.
*/

.hawks-project-grid--demolition
.hawks-project-card--demolition-wide
.hawks-project-card__overlay {
  background:
    linear-gradient(
      180deg,
      rgba(7, 9, 12, 0.05),
      rgba(7, 9, 12, 0.02) 45%,
      rgba(7, 9, 12, 0.63) 100%
    );
}


/* ==========================================================
   09. IMAGE TREATMENT
   ========================================================== */

.hawks-gallery-section--demolition
.hawks-project-card__media img {
  filter:
    saturate(0.9)
    contrast(1.04);

  transition:
    transform
      850ms
      var(--hawks-ease),
    filter
      500ms
      ease;
}


.hawks-gallery-section--demolition
.hawks-project-card__button:hover
.hawks-project-card__media img {
  filter:
    saturate(0.98)
    contrast(1.06);
}


/* ==========================================================
   10. CARD BORDER
   ========================================================== */

.hawks-gallery-section--demolition
.hawks-project-card__button {
  border-color:
    rgba(23, 27, 32, 0.11);

  box-shadow:
    0 20px 54px
    rgba(7, 9, 12, 0.11);
}


.hawks-gallery-section--demolition
.hawks-project-card__button:hover {
  box-shadow:
    0 28px 72px
    rgba(7, 9, 12, 0.17);
}


/* ==========================================================
   11. LABEL
   ========================================================== */

.hawks-gallery-section--demolition
.hawks-project-card__label {
  border-color:
    rgba(255, 255, 255, 0.16);

  background:
    rgba(7, 9, 12, 0.64);
}


/* ==========================================================
   12. SECTION FOOTER
   ========================================================== */

.hawks-gallery-section--demolition
.hawks-gallery-section__footer-line {
  background:
    linear-gradient(
      90deg,
      rgba(23, 27, 32, 0.18),
      rgba(242, 180, 14, 0.2),
      rgba(4, 88, 204, 0.09),
      rgba(23, 27, 32, 0.025)
    );
}


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

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

  .hawks-gallery-demolition__structure {
    width: 310px;

    opacity: 0.24;
  }


  .hawks-project-grid--demolition
  .hawks-project-card--demolition-featured {
    grid-column:
      span 7;

    grid-row:
      span 6;
  }


  .hawks-project-grid--demolition
  .hawks-project-card--demolition-wide {
    grid-column:
      1 / -1;

    grid-row:
      span 4;
  }

}


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

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

  .hawks-gallery-demolition__structure {
    top: 4%;

    width: 240px;
    height: 130px;

    opacity: 0.2;
  }


  .hawks-project-grid--demolition
  .hawks-project-card--demolition-featured {
    grid-column:
      1 / -1;

    grid-row:
      span 3;
  }


  .hawks-project-grid--demolition
  .hawks-project-card--demolition-wide {
    grid-column:
      1 / -1;

    grid-row:
      span 2;
  }

}


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

@media (max-width: 480px) {

  .hawks-gallery-demolition__structure {
    display: none;
  }


  .hawks-project-grid--demolition
  .hawks-project-card--demolition-featured,
  .hawks-project-grid--demolition
  .hawks-project-card--demolition-wide {
    grid-column: auto;
    grid-row: auto;
  }


  .hawks-project-grid--demolition
  .hawks-project-card--demolition-featured
  .hawks-project-card__button,
  .hawks-project-grid--demolition
  .hawks-project-card--demolition-wide
  .hawks-project-card__button {
    aspect-ratio:
      4 / 3;
  }


  .hawks-project-grid--demolition
  .hawks-project-card--demolition-featured
  .hawks-project-card__button::after {
    width: 82px;
  }

}
















































/* ==========================================================
   REMODELING HAWKS LLC
   10. PROJECT CTA
   ========================================================== */


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

.hawks-project-cta {
  position: relative;

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

  overflow: hidden;

  color:
    var(--hawks-white);

  background:
    linear-gradient(
      135deg,
      #11161c 0%,
      #090c10 52%,
      #07090c 100%
    );

  isolation: isolate;
}


/* texture */

.hawks-project-cta::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -4;

  opacity: 0.14;

  pointer-events: none;

  mix-blend-mode:
    soft-light;

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


/* subtle architectural plane */

.hawks-project-cta::after {
  content: "";

  position: absolute;

  top: -25%;
  right: -10%;

  z-index: -3;

  width: 48%;
  height: 150%;

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

  pointer-events: none;

  transform:
    skewX(-8deg);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      transparent 70%
    );
}


/* ==========================================================
   02. AMBIENT LIGHT
   ========================================================== */

.hawks-project-cta__ambient {
  position: absolute;

  z-index: -2;

  border-radius: 50%;

  pointer-events: none;
}


.hawks-project-cta__ambient--gold {
  top: -340px;
  left: -290px;

  width: 700px;
  height: 700px;

  background:
    radial-gradient(
      circle,
      rgba(242, 180, 14, 0.11),
      rgba(242, 180, 14, 0.025) 45%,
      transparent 72%
    );
}


.hawks-project-cta__ambient--blue {
  right: -390px;
  bottom: -400px;

  width: 790px;
  height: 790px;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.1),
      transparent 70%
    );
}


/* ==========================================================
   03. DECORATIVE LINES
   ========================================================== */

.hawks-project-cta__lines {
  position: absolute;

  top: 9%;
  right: 0;

  z-index: 2;

  width: 230px;
  height: 145px;

  overflow: hidden;

  pointer-events: none;

  opacity: 0.75;
}


.hawks-project-cta__lines span {
  position: absolute;

  right: -65px;

  width: 260px;
  height: 2px;

  transform:
    rotate(-38deg);
}


.hawks-project-cta__lines
span:nth-child(1) {
  top: 35px;

  background:
    var(--hawks-gold);
}


.hawks-project-cta__lines
span:nth-child(2) {
  top: 60px;

  background:
    var(--hawks-blue);
}


.hawks-project-cta__lines
span:nth-child(3) {
  top: 85px;

  opacity: 0.36;

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


/* ==========================================================
   04. SHELL
   ========================================================== */

.hawks-project-cta__shell {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(450px, 0.82fr);

  align-items: center;

  gap:
    clamp(
      58px,
      8vw,
      125px
    );
}


/* ==========================================================
   05. CONTENT
   ========================================================== */

.hawks-project-cta__content {
  position: relative;

  z-index: 3;

  max-width: 760px;
}


/* ==========================================================
   06. EYEBROW
   ========================================================== */

.hawks-project-cta__eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 20px;
}


.hawks-project-cta__eyebrow > span {
  width: 39px;
  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      var(--hawks-gold-soft)
    );
}


.hawks-project-cta__eyebrow p {
  margin: 0;

  color:
    var(--hawks-gold);

  font-size: 0.79rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


/* ==========================================================
   07. TITLE
   ========================================================== */

.hawks-project-cta__content h2 {
  max-width: 790px;

  margin:
    0
    0
    25px;

  color:
    var(--hawks-white);

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

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

  font-weight: 700;

  line-height: 0.88;

  letter-spacing:
    -0.028em;

  text-wrap:
    balance;
}


.hawks-project-cta__content h2 span {
  display: block;

  color:
    var(--hawks-gold);
}


/* ==========================================================
   08. DESCRIPTION
   ========================================================== */

.hawks-project-cta__description {
  max-width: 620px;

  margin:
    0
    0
    32px;

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

  font-size:
    clamp(
      1rem,
      1.1vw,
      1.08rem
    );

  line-height: 1.72;

  text-wrap: pretty;
}


/* ==========================================================
   09. ACTIONS
   ========================================================== */

.hawks-project-cta__actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;

  gap: 11px;

  margin-bottom: 36px;
}


/* ==========================================================
   10. BUTTON
   ========================================================== */

.hawks-project-cta__button {
  position: relative;

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

  gap: 10px;

  min-height: 56px;

  padding:
    11px
    18px;

  overflow: hidden;

  border-radius: 12px;

  font-size: 0.88rem;

  font-weight: 800;

  line-height: 1.2;

  isolation: isolate;

  transition:
    transform
      280ms
      var(--hawks-ease),
    box-shadow
      280ms
      ease,
    border-color
      220ms
      ease,
    background-color
      220ms
      ease;
}


/* ==========================================================
   11. PRIMARY BUTTON
   ========================================================== */

.hawks-project-cta__button--primary {
  min-width: 220px;

  color:
    var(--hawks-black);

  border:
    1px solid
    var(--hawks-gold);

  background:
    linear-gradient(
      135deg,
      var(--hawks-gold-soft),
      var(--hawks-gold)
    );

  box-shadow:
    0 16px 36px
    rgba(242, 180, 14, 0.15);
}


.hawks-project-cta__button--primary::before {
  content: "";

  position: absolute;

  top: -55%;
  left: -65%;

  z-index: -1;

  width: 36%;
  height: 210%;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.38),
      transparent
    );

  transform:
    rotate(18deg);

  transition:
    left
      650ms
      var(--hawks-ease);
}


.hawks-project-cta__button--primary:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 21px 44px
    rgba(242, 180, 14, 0.23);
}


.hawks-project-cta__button--primary:hover::before {
  left: 125%;
}


/* ==========================================================
   12. SECONDARY BUTTON
   ========================================================== */

.hawks-project-cta__button--secondary {
  min-width: 190px;

  justify-content:
    flex-start;

  color:
    var(--hawks-white);

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

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


.hawks-project-cta__button--secondary:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(242, 180, 14, 0.28);

  background:
    rgba(242, 180, 14, 0.055);
}


.hawks-project-cta__button > svg {
  flex:
    0
    0
    19px;

  width: 19px;
  height: 19px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  transition:
    transform
      260ms
      var(--hawks-ease);
}


.hawks-project-cta__button--primary:hover > svg {
  transform:
    translateX(4px);
}


/* ==========================================================
   13. BUTTON COPY
   ========================================================== */

.hawks-project-cta__button-copy {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.hawks-project-cta__button-copy small {
  color:
    rgba(255, 255, 255, 0.42);

  font-size: 0.61rem;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.hawks-project-cta__button-copy strong {
  color:
    rgba(255, 255, 255, 0.92);

  font-size: 0.86rem;

  font-weight: 800;
}


/* ==========================================================
   14. SERVICES
   ========================================================== */

.hawks-project-cta__services {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    9px
    18px;
}


.hawks-project-cta__services span {
  position: relative;

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

  font-size: 0.69rem;

  font-weight: 700;

  line-height: 1.3;

  letter-spacing:
    0.075em;

  text-transform: uppercase;
}


.hawks-project-cta__services
span:not(:last-child)::after {
  content: "";

  display: inline-block;

  width: 4px;
  height: 4px;

  margin-left: 18px;

  vertical-align: middle;

  border-radius: 50%;

  background:
    var(--hawks-gold);
}


/* ==========================================================
   15. VISUAL
   ========================================================== */

.hawks-project-cta__visual {
  position: relative;

  min-width: 0;

  padding:
    22px
    22px
    0
    0;
}


/* ==========================================================
   16. IMAGE
   ========================================================== */

.hawks-project-cta__image {
  position: relative;

  z-index: 2;

  min-height:
    clamp(
      440px,
      39vw,
      570px
    );

  overflow: hidden;

  border:
    6px solid
    rgba(255, 255, 255, 0.94);

  border-radius:
    28px
    28px
    10px
    28px;

  background:
    var(--hawks-graphite);

  box-shadow:
    0 35px 90px
    rgba(0, 0, 0, 0.3);
}


.hawks-project-cta__image img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center;

  transform:
    scale(1.02);

  transition:
    transform
      900ms
      var(--hawks-ease);
}


.hawks-project-cta__visual:hover
.hawks-project-cta__image img {
  transform:
    scale(1.055);
}


/* ==========================================================
   17. IMAGE SHADE
   ========================================================== */

.hawks-project-cta__image-shade {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(7, 9, 12, 0.03) 30%,
      rgba(7, 9, 12, 0.1) 55%,
      rgba(7, 9, 12, 0.73) 100%
    );
}


/* ==========================================================
   18. FLOATING VISUAL CARD
   ========================================================== */

.hawks-project-cta__visual-card {
  position: absolute;

  left:
    clamp(
      17px,
      2vw,
      28px
    );

  bottom:
    clamp(
      17px,
      2vw,
      28px
    );

  z-index: 4;

  display: grid;

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

  align-items: center;

  gap: 13px;

  width:
    min(
      78%,
      330px
    );

  padding:
    14px
    16px;

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

  border-radius: 14px;

  color:
    var(--hawks-white);

  background:
    rgba(7, 9, 12, 0.78);

  box-shadow:
    0 18px 42px
    rgba(0, 0, 0, 0.22);

  backdrop-filter:
    blur(14px);

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


/* ==========================================================
   19. VISUAL ICON
   ========================================================== */

.hawks-project-cta__visual-icon {
  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  border:
    1px solid
    rgba(242, 180, 14, 0.22);

  border-radius: 12px;

  color:
    var(--hawks-gold);

  background:
    rgba(242, 180, 14, 0.075);
}


.hawks-project-cta__visual-icon svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-project-cta__visual-card small {
  display: block;

  margin-bottom: 3px;

  color:
    var(--hawks-gold);

  font-size: 0.64rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    0.09em;

  text-transform: uppercase;
}


.hawks-project-cta__visual-card strong {
  display: block;

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

  font-size: 0.88rem;

  font-weight: 700;

  line-height: 1.35;
}


/* ==========================================================
   20. OFFSET FRAME
   ========================================================== */

.hawks-project-cta__frame {
  position: absolute;

  top: 0;
  right: 0;

  z-index: 1;

  width:
    calc(
      100% - 22px
    );

  height:
    calc(
      100% - 22px
    );

  border:
    1px solid
    rgba(242, 180, 14, 0.27);

  border-radius:
    28px
    28px
    10px
    28px;

  pointer-events: none;
}


/* ==========================================================
   21. FOCUS
   ========================================================== */

.hawks-project-cta a:focus-visible {
  outline:
    3px solid
    var(--hawks-gold);

  outline-offset:
    4px;
}


/* ==========================================================
   22. REDUCED MOTION
   ========================================================== */

html.reduce-motion
.hawks-project-cta__button,
html.reduce-motion
.hawks-project-cta__button::before,
html.reduce-motion
.hawks-project-cta__button > svg,
html.reduce-motion
.hawks-project-cta__image img {
  transition: none !important;
}


/* ==========================================================
   23. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-project-cta__shell {
    grid-template-columns:
      minmax(520px, 0.9fr)
      minmax(500px, 0.78fr);
  }

}


/* ==========================================================
   24. TABLET
   ========================================================== */

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

  .hawks-project-cta {
    padding:
      90px
      0;
  }


  .hawks-project-cta__shell {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(360px, 0.72fr);

    gap: 46px;
  }


  .hawks-project-cta__content h2 {
    font-size:
      clamp(
        3.5rem,
        6vw,
        4.9rem
      );
  }


  .hawks-project-cta__image {
    min-height: 440px;
  }


  .hawks-project-cta__actions {
    flex-direction: column;

    align-items:
      flex-start;
  }


  .hawks-project-cta__button {
    width: 100%;

    max-width: 260px;
  }

}


/* ==========================================================
   25. MOBILE
   ========================================================== */

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

  .hawks-project-cta {
    padding:
      78px
      0;
  }


  .hawks-project-cta__shell {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  .hawks-project-cta__content {
    max-width: 630px;
  }


  .hawks-project-cta__content h2 {
    font-size:
      clamp(
        3.15rem,
        10vw,
        4.5rem
      );
  }


  .hawks-project-cta__description {
    max-width: 560px;
  }


  .hawks-project-cta__visual {
    width: 92%;

    margin-left: auto;
  }


  .hawks-project-cta__image {
    min-height: 480px;
  }

}


/* ==========================================================
   26. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hawks-project-cta {
    padding:
      68px
      0;
  }


  .hawks-project-cta__lines {
    width: 145px;
    height: 100px;

    opacity: 0.5;
  }


  .hawks-project-cta__shell {
    grid-template-columns: 1fr;

    gap: 39px;
  }


  .hawks-project-cta__eyebrow {
    margin-bottom: 16px;
  }


  .hawks-project-cta__eyebrow p {
    font-size: 0.72rem;
  }


  .hawks-project-cta__content h2 {
    margin-bottom: 20px;

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

    line-height: 0.92;
  }


  .hawks-project-cta__description {
    margin-bottom: 25px;

    font-size: 0.92rem;

    line-height: 1.62;
  }


  .hawks-project-cta__actions {
    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;

    width: 100%;

    margin-bottom: 29px;
  }


  .hawks-project-cta__button {
    width: 100%;

    min-width: 0;
    min-height: 52px;
  }


  .hawks-project-cta__button--secondary {
    justify-content:
      center;
  }


  .hawks-project-cta__services {
    gap:
      8px
      13px;
  }


  .hawks-project-cta__services span {
    font-size: 0.63rem;
  }


  .hawks-project-cta__services
  span:not(:last-child)::after {
    margin-left: 13px;
  }


  .hawks-project-cta__visual {
    width: 94%;

    padding:
      14px
      14px
      0
      0;

    margin-left: auto;
  }


  .hawks-project-cta__image {
    min-height: 365px;

    border-width: 4px;

    border-radius:
      21px
      21px
      8px
      21px;
  }


  .hawks-project-cta__frame {
    width:
      calc(
        100% - 14px
      );

    height:
      calc(
        100% - 14px
      );

    border-radius:
      21px
      21px
      8px
      21px;
  }


  .hawks-project-cta__visual-card {
    left: 14px;
    bottom: 14px;

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

    width:
      calc(
        100% - 28px
      );

    padding:
      12px
      13px;
  }


  .hawks-project-cta__visual-icon {
    width: 40px;
    height: 40px;

    border-radius: 10px;
  }

}




















































/* ==========================================================
   PAINTING VIDEO CARD
   ========================================================== */


/* ==========================================================
   VIDEO MEDIA
   ========================================================== */

.hawks-project-card__media video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  pointer-events: none;

  transform:
    scale(1.015);

  transition:
    transform
      850ms
      var(--hawks-ease),
    filter
      500ms
      ease;
}


.hawks-project-card__button:hover
.hawks-project-card__media video {
  transform:
    scale(1.055);
}


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

.hawks-project-card__overlay--video {
  background:
    linear-gradient(
      180deg,
      rgba(7, 9, 12, 0.18) 0%,
      rgba(7, 9, 12, 0.08) 38%,
      rgba(7, 9, 12, 0.72) 100%
    );
}


/* ==========================================================
   PLAY BUTTON
   ========================================================== */

.hawks-project-card__play {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 4;

  display: grid;
  place-items: center;

  width:
    clamp(
      68px,
      7vw,
      88px
    );

  height:
    clamp(
      68px,
      7vw,
      88px
    );

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

  border-radius: 50%;

  background:
    rgba(7, 9, 12, 0.54);

  box-shadow:
    0 18px 48px
    rgba(0, 0, 0, 0.2);

  backdrop-filter:
    blur(12px);

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

  pointer-events: none;

  transform:
    translate(-50%, -50%);

  transition:
    transform
      360ms
      var(--hawks-ease),
    background-color
      260ms
      ease,
    border-color
      260ms
      ease;
}


.hawks-project-card__play > span {
  display: grid;
  place-items: center;

  width: 46%;
  height: 46%;

  border-radius: 50%;

  color:
    var(--hawks-black);

  background:
    var(--hawks-gold);
}


.hawks-project-card__play svg {
  width: 19px;
  height: 19px;

  margin-left: 2px;

  fill:
    currentColor;

  stroke: none;
}


.hawks-project-card__button:hover
.hawks-project-card__play {
  border-color:
    rgba(242, 180, 14, 0.45);

  background:
    rgba(7, 9, 12, 0.68);

  transform:
    translate(-50%, -50%)
    scale(1.08);
}


/* ==========================================================
   VIDEO TYPE BADGE
   ========================================================== */

.hawks-project-card__media-type {
  position: absolute;

  top:
    clamp(
      18px,
      2vw,
      27px
    );

  right:
    clamp(
      18px,
      2vw,
      27px
    );

  z-index: 4;

  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 30px;

  padding:
    6px
    10px;

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

  border-radius: 999px;

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

  background:
    rgba(7, 9, 12, 0.55);

  backdrop-filter:
    blur(10px);

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

  pointer-events: none;

  font-size: 0.65rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.hawks-project-card__media-type svg {
  width: 13px;
  height: 13px;

  fill:
    var(--hawks-gold);

  stroke: none;
}


/* ==========================================================
   PAINTING WITH 3 CURRENT ITEMS
   ========================================================== */

.hawks-project-grid--painting
.hawks-project-card--video {
  grid-column:
    span 5;

  grid-row:
    span 3;
}


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

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

  .hawks-project-grid--painting
  .hawks-project-card--video {
    grid-column:
      1 / -1;

    grid-row:
      span 2;
  }

}


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

@media (max-width: 480px) {

  .hawks-project-grid--painting
  .hawks-project-card--video {
    grid-column: auto;
    grid-row: auto;
  }


  .hawks-project-card--video
  .hawks-project-card__button {
    aspect-ratio:
      16 / 10;
  }


  .hawks-project-card__play {
    width: 62px;
    height: 62px;
  }


  .hawks-project-card__media-type {
    top: 13px;
    right: 13px;
  }

}


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

html.reduce-motion
.hawks-project-card__media video,
html.reduce-motion
.hawks-project-card__play {
  transition: none !important;
}














































/* ==========================================================
   VIEWER MEDIA
   IMAGE + VIDEO
   ========================================================== */

.hawks-gallery-viewer__media {
  position: relative;

  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

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


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

.hawks-gallery-viewer__image {
  display: block;

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

  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 8px;

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, 0.34);

  opacity: 0;

  transform:
    scale(0.985);

  transition:
    opacity
      320ms
      ease,
    transform
      450ms
      var(--hawks-ease);
}


.hawks-gallery-viewer__image[hidden] {
  display: none;
}


.hawks-gallery-viewer.is-media-ready
.hawks-gallery-viewer__image:not([hidden]) {
  opacity: 1;

  transform:
    scale(1);
}


/* ==========================================================
   VIDEO
   ========================================================== */

.hawks-gallery-viewer__video {
  display: block;

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

  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 8px;

  background:
    #000;

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, 0.4);

  opacity: 0;

  transform:
    scale(0.985);

  transition:
    opacity
      320ms
      ease,
    transform
      450ms
      var(--hawks-ease);
}


.hawks-gallery-viewer__video[hidden] {
  display: none;
}


.hawks-gallery-viewer.is-media-ready
.hawks-gallery-viewer__video:not([hidden]) {
  opacity: 1;

  transform:
    scale(1);
}


/* ==========================================================
   VIDEO CONTROLS SAFETY
   ========================================================== */

.hawks-gallery-viewer__video {
  touch-action: manipulation;
}


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

@media (max-width: 480px) {

  .hawks-gallery-viewer__video {
    max-width: 100%;
    max-height:
      calc(
        100svh - 150px
      );
  }

}


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

html.reduce-motion
.hawks-gallery-viewer__image,
html.reduce-motion
.hawks-gallery-viewer__video {
  transition: none !important;
}