/* ==========================================================
   REMODELING HAWKS LLC
   GLOBAL DESIGN SYSTEM
   ========================================================== */


/* ==========================================================
   01. ROOT / BRAND TOKENS
   ========================================================== */

:root {
  /* --------------------------------
     BRAND COLORS
  -------------------------------- */

  --hawks-black: #07090c;
  --hawks-charcoal: #11161c;
  --hawks-graphite: #1b222a;
  --hawks-panel: #222a33;

  --hawks-gold: #f2b40e;
  --hawks-gold-dark: #c98c00;
  --hawks-gold-soft: #ffd45a;

  --hawks-blue: #0458cc;
  --hawks-blue-dark: #073b82;
  --hawks-blue-soft: #3b82e8;

  --hawks-steel: #a9afb6;
  --hawks-silver: #d9dde1;

  --hawks-ivory: #f5f3ee;
  --hawks-white: #ffffff;

  --hawks-text: #171b20;
  --hawks-text-soft: #626a73;

  --hawks-border: rgba(23, 27, 32, 0.12);
  --hawks-border-light: rgba(255, 255, 255, 0.12);


  /* --------------------------------
     SEMANTIC COLORS
  -------------------------------- */

  --hawks-bg: var(--hawks-ivory);
  --hawks-surface: var(--hawks-white);
  --hawks-surface-dark: var(--hawks-charcoal);

  --hawks-accent: var(--hawks-gold);
  --hawks-accent-hover: var(--hawks-gold-soft);

  --hawks-link: var(--hawks-blue);
  --hawks-focus: rgba(242, 180, 14, 0.34);


  /* --------------------------------
     TYPOGRAPHY
  -------------------------------- */

  --hawks-font-body:
    "Manrope",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --hawks-font-display:
    "Barlow Condensed",
    "Arial Narrow",
    sans-serif;

  --hawks-body-size: 17px;

  --hawks-line-body: 1.65;
  --hawks-line-heading: 0.96;

  --hawks-weight-regular: 400;
  --hawks-weight-medium: 500;
  --hawks-weight-semibold: 600;
  --hawks-weight-bold: 700;
  --hawks-weight-black: 800;


  /* --------------------------------
     LAYOUT
  -------------------------------- */

  --hawks-container: 1440px;

  --hawks-page-gutter: 72px;

  --hawks-section-space:
    clamp(84px, 8vw, 138px);

  --hawks-section-space-small:
    clamp(58px, 6vw, 92px);

  --hawks-scroll-offset: 132px;


  /* --------------------------------
     RADII
  -------------------------------- */

  --hawks-radius-xs: 8px;
  --hawks-radius-sm: 12px;
  --hawks-radius-md: 18px;
  --hawks-radius-lg: 26px;
  --hawks-radius-xl: 34px;
  --hawks-radius-pill: 999px;


  /* --------------------------------
     SHADOWS
  -------------------------------- */

  --hawks-shadow-xs:
    0 4px 14px rgba(7, 9, 12, 0.05);

  --hawks-shadow-sm:
    0 10px 28px rgba(7, 9, 12, 0.08);

  --hawks-shadow-md:
    0 18px 48px rgba(7, 9, 12, 0.11);

  --hawks-shadow-lg:
    0 28px 72px rgba(7, 9, 12, 0.15);

  --hawks-shadow-dark:
    0 28px 72px rgba(0, 0, 0, 0.28);


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

  --hawks-ease:
    cubic-bezier(0.22, 1, 0.36, 1);

  --hawks-ease-soft:
    cubic-bezier(0.4, 0, 0.2, 1);

  --hawks-duration-fast: 180ms;
  --hawks-duration-medium: 420ms;
  --hawks-duration-slow: 720ms;

  --hawks-reveal-distance: 30px;
}


/* ==========================================================
   02. RESET
   ========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--hawks-scroll-offset);

  background: var(--hawks-bg);

  scrollbar-gutter: stable;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;

  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;

  margin: 0;

  overflow-x: clip;

  font-family: var(--hawks-font-body);
  font-size: var(--hawks-body-size);
  font-weight: var(--hawks-weight-regular);
  line-height: var(--hawks-line-body);

  color: var(--hawks-text);

  /*
    Mineral / plaster inspired background.

    No grid.
    No obvious pattern.
    Very subtle blue + warm gold influence.
  */
  background-color: var(--hawks-bg);

  background-image:
    radial-gradient(
      circle at 7% 10%,
      rgba(242, 180, 14, 0.065),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 20%,
      rgba(4, 88, 204, 0.045),
      transparent 27%
    ),
    radial-gradient(
      circle at 58% 88%,
      rgba(17, 22, 28, 0.035),
      transparent 31%
    ),
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(245, 243, 238, 0.28) 47%,
      rgba(234, 232, 226, 0.34) 100%
    );

  background-attachment: fixed;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   03. GLOBAL TEXTURE
   ========================================================== */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  opacity: 0.16;

  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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.085'/%3E%3C/svg%3E");

  background-repeat: repeat;
}


/* ==========================================================
   04. BASE ELEMENTS
   ========================================================== */

main {
  display: block;
  width: 100%;
}

section {
  position: relative;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

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

p {
  margin-top: 0;
}

ul,
ol {
  margin-top: 0;
}

[id] {
  scroll-margin-top: var(--hawks-scroll-offset);
}


/* ==========================================================
   05. TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;

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

  color: var(--hawks-text);

  text-wrap: balance;
}

h1 {
  margin-bottom: 24px;

  font-size:
    clamp(3.7rem, 6.4vw, 7rem);

  line-height: 0.92;

  letter-spacing: -0.025em;
}

h2 {
  margin-bottom: 22px;

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

  line-height: 0.96;

  letter-spacing: -0.022em;
}

h3 {
  margin-bottom: 16px;

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

  line-height: 1;
}

h4 {
  margin-bottom: 12px;

  font-size:
    clamp(1.35rem, 1.7vw, 1.75rem);

  line-height: 1.12;
}

p {
  font-size: 1rem;
  line-height: 1.68;
}

.hawks-lead {
  max-width: 720px;

  font-size:
    clamp(1.06rem, 1.3vw, 1.22rem);

  line-height: 1.7;

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

.hawks-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 18px;

  font-size: 0.94rem;
  font-weight: var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing: 0.15em;
  text-transform: uppercase;

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

.hawks-eyebrow::after {
  content: "";

  width: 42px;
  height: 2px;

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

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


/* ==========================================================
   06. CONTAINER / SECTION HELPERS
   ========================================================== */

.hawks-container {
  width: min(
    calc(100% - (var(--hawks-page-gutter) * 2)),
    var(--hawks-container)
  );

  margin-inline: auto;
}

.hawks-section {
  padding-block: var(--hawks-section-space);
}

.hawks-section--compact {
  padding-block: var(--hawks-section-space-small);
}

.hawks-surface {
  background: rgba(255, 255, 255, 0.82);

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

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

  box-shadow: var(--hawks-shadow-sm);

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

.hawks-surface--dark {
  color: var(--hawks-white);

  background:
    linear-gradient(
      145deg,
      var(--hawks-charcoal),
      var(--hawks-black)
    );

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

  box-shadow: var(--hawks-shadow-dark);
}


/* ==========================================================
   07. GLOBAL BUTTON SYSTEM
   ========================================================== */

.hawks-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 54px;

  padding:
    14px
    24px;

  overflow: hidden;

  border:
    1px solid transparent;

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

  font-family: var(--hawks-font-body);
  font-size: 1rem;
  font-weight: var(--hawks-weight-bold);

  line-height: 1.1;

  cursor: pointer;

  transition:
    transform var(--hawks-duration-fast) var(--hawks-ease),
    box-shadow var(--hawks-duration-medium) var(--hawks-ease),
    color var(--hawks-duration-fast) ease,
    background-color var(--hawks-duration-fast) ease,
    border-color var(--hawks-duration-fast) ease;
}

.hawks-btn::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0;

  background:
    linear-gradient(
      115deg,
      transparent 15%,
      rgba(255, 255, 255, 0.24) 48%,
      transparent 78%
    );

  transform: translateX(-115%);

  transition:
    transform 620ms var(--hawks-ease),
    opacity 200ms ease;
}

.hawks-btn:hover {
  transform: translateY(-2px);
}

.hawks-btn:hover::before {
  opacity: 1;
  transform: translateX(115%);
}

.hawks-btn:active {
  transform: translateY(0);
}

.hawks-btn--primary {
  color: var(--hawks-black);

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

  border-color:
    rgba(201, 140, 0, 0.35);

  box-shadow:
    0 12px 30px rgba(201, 140, 0, 0.18);
}

.hawks-btn--primary:hover {
  box-shadow:
    0 17px 38px rgba(201, 140, 0, 0.25);
}

.hawks-btn--dark {
  color: var(--hawks-white);

  background:
    var(--hawks-charcoal);

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

  box-shadow:
    0 12px 30px rgba(7, 9, 12, 0.14);
}

.hawks-btn--dark:hover {
  background:
    var(--hawks-graphite);

  border-color:
    rgba(242, 180, 14, 0.42);
}

.hawks-btn--outline {
  color: var(--hawks-text);

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

  border-color:
    rgba(23, 27, 32, 0.16);
}

.hawks-btn--outline:hover {
  background: var(--hawks-white);

  border-color:
    rgba(23, 27, 32, 0.26);

  box-shadow: var(--hawks-shadow-sm);
}


/* ==========================================================
   08. ACCESSIBILITY
   ========================================================== */

::selection {
  color: var(--hawks-black);
  background: var(--hawks-gold-soft);
}

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

  outline-offset: 4px;

  border-radius: 5px;
}

.hawks-skip-link {
  position: fixed;

  top: 14px;
  left: 14px;

  z-index: 100000;

  padding: 12px 18px;

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

  color: var(--hawks-black);
  background: var(--hawks-gold);

  font-weight: 700;

  transform: translateY(-160%);

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

.hawks-skip-link:focus {
  transform: translateY(0);
}


/* ==========================================================
   09. BODY SCROLLBAR
   ========================================================== */

html {
  scrollbar-width: thin;

  scrollbar-color:
    var(--hawks-gold)
    var(--hawks-charcoal);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background:
    var(--hawks-charcoal);
}

::-webkit-scrollbar-thumb {
  border:
    3px solid var(--hawks-charcoal);

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

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

::-webkit-scrollbar-thumb:hover {
  background:
    var(--hawks-gold-soft);
}

::-webkit-scrollbar-corner {
  background:
    var(--hawks-charcoal);
}


/* ==========================================================
   10. REVEAL SYSTEM
   ========================================================== */

/*
  Hidden states are only activated after JS adds
  .hawks-motion-ready.

  This prevents content from disappearing if JS
  ever fails to load.
*/

.hawks-motion-ready [data-reveal] {
  opacity: 0;

  transform:
    translate3d(
      0,
      var(--hawks-reveal-distance),
      0
    );

  transition:
    opacity
      var(--hawks-duration-slow)
      var(--hawks-ease),
    transform
      var(--hawks-duration-slow)
      var(--hawks-ease),
    clip-path
      var(--hawks-duration-slow)
      var(--hawks-ease);

  transition-delay:
    var(--reveal-delay, 0ms);

  will-change:
    opacity,
    transform,
    clip-path;
}

.hawks-motion-ready
[data-reveal="left"] {
  transform:
    translate3d(-32px, 0, 0);
}

.hawks-motion-ready
[data-reveal="right"] {
  transform:
    translate3d(32px, 0, 0);
}

.hawks-motion-ready
[data-reveal="scale"] {
  transform:
    scale(0.965);
}

.hawks-motion-ready
[data-reveal="clip"] {
  opacity: 1;

  transform: none;

  clip-path:
    inset(0 0 100% 0);
}

.hawks-motion-ready
[data-reveal].is-inview {
  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  clip-path:
    inset(0 0 0 0);
}


/* ==========================================================
   11. PAGE ENTRY
   ========================================================== */

html.is-page-entering main {
  animation:
    hawksPageEnter
    620ms
    var(--hawks-ease)
    both;
}

@keyframes hawksPageEnter {
  from {
    opacity: 0;
    transform:
      translate3d(0, 12px, 0);
  }

  to {
    opacity: 1;
    transform:
      translate3d(0, 0, 0);
  }
}


/* ==========================================================
   12. PAGE TRANSITION
   ========================================================== */

.hawks-page-transition {
  position: fixed;
  inset: 0;

  z-index: 99999;

  pointer-events: none;

  opacity: 0;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      var(--hawks-black) 0%,
      var(--hawks-charcoal) 58%,
      #151b22 100%
    );

  clip-path:
    inset(100% 0 0 0);

  transition:
    clip-path
      440ms
      var(--hawks-ease),
    opacity
      120ms
      linear;
}

.hawks-page-transition::before {
  content: "";

  position: absolute;

  width: 52vw;
  height: 52vw;

  top: -31vw;
  right: -17vw;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.17),
      transparent 66%
    );

  filter: blur(16px);
}

.hawks-page-transition::after {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 100%;
  height: 3px;

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

  transform:
    scaleX(0);

  transform-origin:
    left center;

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

html.is-leaving
.hawks-page-transition {
  opacity: 1;

  pointer-events: auto;

  clip-path:
    inset(0 0 0 0);
}

html.is-leaving
.hawks-page-transition::after {
  transform:
    scaleX(1);
}


/* ==========================================================
   13. REDUCED MOTION
   controlled with JS rather than an extra media query
   ========================================================== */

html.reduce-motion {
  scroll-behavior: auto;
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  scroll-behavior: auto !important;

  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;

  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}

html.reduce-motion
.hawks-motion-ready
[data-reveal] {
  opacity: 1;

  transform: none;

  clip-path: none;
}


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

@media (min-width: 1200px) {
  :root {
    --hawks-page-gutter:
      clamp(44px, 4.3vw, 76px);

    --hawks-body-size: 17px;

    --hawks-scroll-offset: 132px;
  }
}


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

@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --hawks-page-gutter: 34px;

    --hawks-body-size: 17px;

    --hawks-section-space:
      clamp(76px, 9vw, 110px);

    --hawks-scroll-offset: 118px;

    --hawks-reveal-distance: 26px;
  }

  h1 {
    font-size:
      clamp(3.7rem, 8vw, 5.8rem);
  }

  h2 {
    font-size:
      clamp(2.8rem, 6vw, 4.4rem);
  }
}


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

@media (min-width: 481px) and (max-width: 767px) {
  :root {
    --hawks-page-gutter: 24px;

    --hawks-body-size: 16.5px;

    --hawks-section-space: 78px;

    --hawks-section-space-small: 58px;

    --hawks-scroll-offset: 104px;

    --hawks-reveal-distance: 22px;
  }

  h1 {
    font-size:
      clamp(3.35rem, 12vw, 4.7rem);
  }

  h2 {
    font-size:
      clamp(2.65rem, 9vw, 3.8rem);
  }

  h3 {
    font-size:
      clamp(1.75rem, 6.4vw, 2.3rem);
  }

  .hawks-btn {
    min-height: 54px;

    padding:
      14px
      20px;
  }
}


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

@media (max-width: 480px) {
  :root {
    --hawks-page-gutter: 18px;

    --hawks-body-size: 16px;

    --hawks-section-space: 68px;

    --hawks-section-space-small: 52px;

    --hawks-scroll-offset: 96px;

    --hawks-reveal-distance: 18px;
  }

  h1 {
    font-size:
      clamp(3rem, 14vw, 4rem);
  }

  h2 {
    font-size:
      clamp(2.45rem, 11vw, 3.25rem);
  }

  h3 {
    font-size:
      clamp(1.7rem, 7.4vw, 2.15rem);
  }

  .hawks-btn {
    width: 100%;

    min-height: 54px;

    padding:
      14px
      18px;
  }
}
























































/* ==========================================================
   REMODELING HAWKS LLC
   01. TOPBAR + 02. HEADER
   ========================================================== */


/* ==========================================================
   01. STRUCTURAL VARIABLES
   ========================================================== */

:root {
  --hawks-topbar-height: 38px;
  --hawks-header-height: 84px;

  /*
    Initial fallback.

    JS replaces this with the exact measured height
    of Topbar + Header.
  */
  --hawks-shell-height:
    calc(
      var(--hawks-topbar-height) +
      var(--hawks-header-height)
    );

  --hawks-header-z: 5000;
  --hawks-mobile-menu-z: 4800;
}


/* ==========================================================
   02. FIXED SITE SHELL
   Never sticky.
   ========================================================== */

.hawks-site-shell {
  position: fixed;

  top: 0;
  left: 0;

  z-index: var(--hawks-header-z);

  width: 100%;

  isolation: isolate;

  transform: translateZ(0);
  backface-visibility: hidden;
}

.hawks-header-slot {
  width: 100%;
  height: var(--hawks-shell-height);

  pointer-events: none;
}


/* ==========================================================
   03. TOPBAR
   ========================================================== */

.hawks-topbar {
  position: relative;

  width: 100%;
  height: var(--hawks-topbar-height);

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

  background:
    linear-gradient(
      105deg,
      #090c10 0%,
      var(--hawks-charcoal) 54%,
      #0c1219 100%
    );

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

.hawks-topbar::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(242, 180, 14, 0.28),
      rgba(4, 88, 204, 0.18),
      transparent
    );
}

.hawks-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 100%;
}

.hawks-topbar__group {
  display: flex;
  align-items: center;

  min-width: 0;
}

.hawks-topbar__group--left {
  gap: 28px;
}

.hawks-topbar__group--right {
  gap: 26px;
}

.hawks-topbar__item {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-width: 0;

  font-size: 0.82rem;
  font-weight: var(--hawks-weight-medium);

  line-height: 1;

  white-space: nowrap;

  color: inherit;

  transition:
    color
      var(--hawks-duration-fast)
      ease;
}

a.hawks-topbar__item:hover {
  color: var(--hawks-white);
}

.hawks-topbar__item svg {
  flex: 0 0 auto;

  width: 17px;
  height: 17px;

  fill: none;

  stroke: var(--hawks-gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hawks-topbar__item strong {
  font-weight: var(--hawks-weight-bold);

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

.hawks-topbar__group--right
.hawks-topbar__item +
.hawks-topbar__item {
  padding-left: 26px;
}

.hawks-topbar__group--right
.hawks-topbar__item +
.hawks-topbar__item::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 1px;
  height: 15px;

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

  transform:
    translateY(-50%);
}


/* ==========================================================
   04. HEADER
   ========================================================== */

.hawks-header {
  position: relative;

  width: 100%;
  height: var(--hawks-header-height);

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

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

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

.hawks-site-shell.is-scrolled
.hawks-header {
  background:
    rgba(255, 255, 255, 0.94);

  border-color:
    rgba(23, 27, 32, 0.1);

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

  backdrop-filter:
    blur(18px);

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

.hawks-header__inner {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(180px, 0.9fr)
    auto
    minmax(180px, 0.9fr);

  align-items: center;

  height: 100%;
}


/* ==========================================================
   05. LOGO
   ========================================================== */

.hawks-header__logo {
  position: relative;

  justify-self: start;

  display: flex;
  align-items: center;

  width: 196px;
  height: 70px;

  z-index: 2;
}

.hawks-header__logo img {
  width: 100%;
  height: 100%;

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

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

.hawks-header__logo:hover img {
  transform:
    translateY(-1px)
    scale(1.015);
}


/* ==========================================================
   06. DESKTOP NAVIGATION
   ========================================================== */

.hawks-desktop-nav {
  justify-self: center;

  display: flex;
  align-items: center;

  gap:
    clamp(18px, 1.75vw, 30px);

  height: 100%;
}

.hawks-desktop-nav a {
  position: relative;

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

  height: 100%;

  padding-inline: 2px;

  font-size: 0.93rem;
  font-weight: var(--hawks-weight-semibold);

  line-height: 1;

  color: #333940;

  transition:
    color
      var(--hawks-duration-fast)
      ease;
}

.hawks-desktop-nav a::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 19px;

  width: 100%;
  height: 2px;

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

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

  transform:
    scaleX(0);

  transform-origin:
    right center;

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

.hawks-desktop-nav a:hover,
.hawks-desktop-nav a.is-active {
  color: var(--hawks-black);
}

.hawks-desktop-nav a:hover::before,
.hawks-desktop-nav a.is-active::before {
  transform:
    scaleX(1);

  transform-origin:
    left center;
}


/* ==========================================================
   07. FREE ESTIMATE BUTTON
   ========================================================== */

.hawks-header__cta {
  position: relative;

  justify-self: end;

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

  gap: 11px;

  min-height: 50px;

  padding:
    11px
    18px;

  overflow: hidden;

  border:
    1px solid rgba(201, 140, 0, 0.27);

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

  color: var(--hawks-black);

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

  box-shadow:
    0 10px 24px rgba(201, 140, 0, 0.16);

  font-size: 0.94rem;
  font-weight: var(--hawks-weight-bold);

  line-height: 1;

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

.hawks-header__cta::before {
  content: "";

  position: absolute;

  top: -60%;
  left: -70%;

  width: 48%;
  height: 220%;

  opacity: 0;

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

  transform:
    rotate(18deg);

  transition:
    left
      620ms
      var(--hawks-ease),
    opacity
      200ms
      ease;
}

.hawks-header__cta:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 15px 32px rgba(201, 140, 0, 0.23);
}

.hawks-header__cta:hover::before {
  left: 130%;
  opacity: 1;
}

.hawks-header__cta-icon,
.hawks-header__cta-arrow {
  position: relative;
  z-index: 1;

  flex: 0 0 auto;
}

.hawks-header__cta-icon {
  width: 20px;
  height: 20px;
}

.hawks-header__cta-icon svg,
.hawks-header__cta-arrow {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;

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

.hawks-header__cta-text {
  position: relative;
  z-index: 1;
}

.hawks-header__cta-arrow {
  width: 18px;

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

.hawks-header__cta:hover
.hawks-header__cta-arrow {
  transform:
    translateX(3px);
}


/* ==========================================================
   08. HAMBURGER
   ========================================================== */

.hawks-menu-toggle {
  display: none;

  position: relative;

  width: 46px;
  height: 46px;

  padding: 0;

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

  border-radius:
    13px;

  color: var(--hawks-text);

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

  cursor: pointer;

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

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

.hawks-menu-toggle:hover {
  border-color:
    rgba(242, 180, 14, 0.42);

  background:
    var(--hawks-white);

  box-shadow:
    var(--hawks-shadow-xs);
}

.hawks-menu-toggle span {
  position: absolute;

  left: 50%;

  display: block;

  width: 20px;
  height: 2px;

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

  background:
    currentColor;

  transform-origin:
    center;

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

.hawks-menu-toggle span:nth-child(1) {
  top: 15px;

  transform:
    translateX(-50%);
}

.hawks-menu-toggle span:nth-child(2) {
  top: 22px;

  transform:
    translateX(-50%);
}

.hawks-menu-toggle span:nth-child(3) {
  top: 29px;

  transform:
    translateX(-50%);
}

html.hawks-menu-open
.hawks-menu-toggle span:nth-child(1) {
  top: 22px;

  transform:
    translateX(-50%)
    rotate(45deg);
}

html.hawks-menu-open
.hawks-menu-toggle span:nth-child(2) {
  opacity: 0;

  transform:
    translateX(-50%)
    scaleX(0);
}

html.hawks-menu-open
.hawks-menu-toggle span:nth-child(3) {
  top: 22px;

  transform:
    translateX(-50%)
    rotate(-45deg);
}


/* ==========================================================
   09. MOBILE MENU
   Fixed and independent from Header / Main / Hero
   ========================================================== */

.hawks-mobile-menu {
  position: fixed;

  top: var(--hawks-shell-height);
  left: 0;

  z-index:
    var(--hawks-mobile-menu-z);

  display: flex;
  flex-direction: column;

  width: 100%;

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

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

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

  overscroll-behavior: contain;

  visibility: hidden;
  opacity: 0;

  pointer-events: none;

  background:
    var(--hawks-ivory);

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

  transition:
    opacity
      260ms
      ease,
    visibility
      260ms
      ease,
    transform
      440ms
      var(--hawks-ease);
}

.hawks-mobile-menu__background {
  position: absolute;
  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 94% 4%,
      rgba(242, 180, 14, 0.12),
      transparent 25%
    ),
    radial-gradient(
      circle at 5% 92%,
      rgba(4, 88, 204, 0.085),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.75),
      rgba(245, 243, 238, 0.96)
    );
}

.hawks-mobile-menu__background::before {
  content: "";

  position: absolute;

  right: -90px;
  top: 10%;

  width: 260px;
  height: 2px;

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

  transform:
    rotate(-39deg);
}

.hawks-mobile-menu__background::after {
  content: "";

  position: absolute;

  right: -70px;
  top: 18%;

  width: 210px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(4, 88, 204, 0.6)
    );

  transform:
    rotate(-39deg);
}

html.hawks-menu-open
.hawks-mobile-menu {
  visibility: visible;
  opacity: 1;

  pointer-events: auto;

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


/* ==========================================================
   10. MOBILE NAVIGATION LINKS
   ========================================================== */

.hawks-mobile-menu__nav {
  width:
    min(
      calc(100% - 48px),
      660px
    );

  margin:
    auto
    auto
    0;

  padding:
    44px
    0
    24px;
}

.hawks-mobile-menu__nav a {
  position: relative;

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

  width: 100%;

  padding:
    17px
    4px;

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

  color:
    var(--hawks-text);

  opacity: 0;

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

  transition:
    color
      180ms
      ease,
    padding-left
      300ms
      var(--hawks-ease),
    opacity
      440ms
      var(--hawks-ease),
    transform
      440ms
      var(--hawks-ease);

  transition-delay:
    calc(
      var(--menu-index) *
      48ms
    );
}

html.hawks-menu-open
.hawks-mobile-menu__nav a {
  opacity: 1;

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

.hawks-mobile-menu__nav
a > span:first-child {
  font-family:
    var(--hawks-font-display);

  font-size:
    clamp(
      2rem,
      6vw,
      3.15rem
    );

  font-weight:
    var(--hawks-weight-semibold);

  line-height: 1;

  letter-spacing:
    -0.015em;
}

.hawks-mobile-menu__nav
a > span:last-child {
  font-family:
    var(--hawks-font-body);

  font-size: 0.78rem;
  font-weight:
    var(--hawks-weight-bold);

  letter-spacing:
    0.12em;

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

.hawks-mobile-menu__nav a:hover {
  padding-left: 8px;

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


/* ==========================================================
   11. MOBILE MENU FOOTER
   ========================================================== */

.hawks-mobile-menu__footer {
  width:
    min(
      calc(100% - 48px),
      660px
    );

  margin:
    0
    auto;

  padding:
    24px
    0
    32px;

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

.hawks-mobile-menu__footer p {
  margin:
    0
    0
    5px;

  font-size: 0.9rem;
  font-weight:
    var(--hawks-weight-semibold);

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

.hawks-mobile-menu__footer a {
  font-size: 1.05rem;
  font-weight:
    var(--hawks-weight-bold);

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


/* ==========================================================
   12. REDUCED MOTION
   Uses class created by global site.js.
   No additional media query required.
   ========================================================== */

html.reduce-motion
.hawks-header__logo img,
html.reduce-motion
.hawks-menu-toggle span,
html.reduce-motion
.hawks-mobile-menu,
html.reduce-motion
.hawks-mobile-menu__nav a,
html.reduce-motion
.hawks-header__cta,
html.reduce-motion
.hawks-header__cta::before,
html.reduce-motion
.hawks-header__cta-arrow {
  transition: none !important;
}


/* ==========================================================
   13. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  :root {
    --hawks-topbar-height: 38px;
    --hawks-header-height: 84px;
  }

  .hawks-menu-toggle {
    display: none;
  }

  .hawks-desktop-nav {
    display: flex;
  }

  .hawks-mobile-menu {
    display: none;
  }

}


/* ==========================================================
   14. TABLET
   ========================================================== */

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

  :root {
    --hawks-topbar-height: 34px;
    --hawks-header-height: 78px;
  }

  .hawks-topbar__hours,
  .hawks-topbar__text {
    display: none;
  }

  .hawks-header__inner {
    grid-template-columns:
      1fr
      auto
      1fr;
  }

  .hawks-menu-toggle {
    display: block;

    justify-self: start;
  }

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

  .hawks-header__logo {
    justify-self: center;

    width: 180px;
    height: 66px;
  }

  .hawks-header__cta {
    justify-self: end;

    min-height: 48px;

    padding:
      10px
      16px;
  }

}


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

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

  :root {
    --hawks-topbar-height: 32px;
    --hawks-header-height: 74px;
  }

  .hawks-topbar__inner {
    gap: 15px;
  }

  .hawks-topbar__group--left,
  .hawks-topbar__group--right {
    gap: 0;
  }

  .hawks-topbar__hours,
  .hawks-topbar__text {
    display: none;
  }

  .hawks-topbar__item {
    font-size: 0.78rem;
  }

  .hawks-topbar__label {
    display: none;
  }

  .hawks-header__inner {
    grid-template-columns:
      1fr
      auto
      1fr;
  }

  .hawks-menu-toggle {
    display: block;

    justify-self: start;

    width: 44px;
    height: 44px;
  }

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

  .hawks-header__logo {
    justify-self: center;

    width: 166px;
    height: 63px;
  }

  .hawks-header__cta {
    justify-self: end;

    min-width: 126px;
    min-height: 45px;

    gap: 8px;

    padding:
      9px
      12px;

    font-size: 0.84rem;
  }

  .hawks-header__cta-icon {
    width: 18px;
    height: 18px;
  }

  .hawks-header__cta-arrow {
    display: none;
  }

}


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

@media (max-width: 480px) {

  :root {
    --hawks-topbar-height: 30px;
    --hawks-header-height: 70px;
  }

  .hawks-topbar__inner {
    gap: 10px;
  }

  .hawks-topbar__group--left,
  .hawks-topbar__group--right {
    gap: 0;
  }

  .hawks-topbar__hours,
  .hawks-topbar__text {
    display: none;
  }

  .hawks-topbar__label {
    display: none;
  }

  .hawks-topbar__item {
    gap: 6px;

    font-size: 0.73rem;
  }

  .hawks-topbar__item svg {
    width: 14px;
    height: 14px;
  }

  .hawks-header__inner {
    grid-template-columns:
      1fr
      auto
      1fr;

    column-gap: 7px;
  }

  .hawks-menu-toggle {
    display: block;

    justify-self: start;

    width: 42px;
    height: 42px;

    border-radius: 11px;
  }

  .hawks-menu-toggle span {
    width: 18px;
  }

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

  /*
    Logo intentionally larger than surrounding
    hamburger and CTA, as requested.
  */

  .hawks-header__logo {
    justify-self: center;

    width:
      clamp(
        128px,
        37vw,
        154px
      );

    height: 60px;
  }

  .hawks-header__cta {
    justify-self: end;

    min-width: 98px;
    min-height: 42px;

    gap: 6px;

    padding:
      8px
      10px;

    border-radius: 10px;

    font-size: 0.73rem;
  }

  .hawks-header__cta-icon {
    width: 17px;
    height: 17px;
  }

  .hawks-header__cta-arrow {
    display: none;
  }

  .hawks-mobile-menu__nav,
  .hawks-mobile-menu__footer {
    width:
      calc(100% - 36px);
  }

  .hawks-mobile-menu__nav {
    padding-top: 30px;
  }

  .hawks-mobile-menu__nav a {
    padding:
      14px
      2px;
  }

  .hawks-mobile-menu__nav
  a > span:first-child {
    font-size:
      clamp(
        1.9rem,
        9vw,
        2.65rem
      );
  }

}






















































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


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

   Header Slot already occupies --hawks-shell-height.

   Therefore:

   shell + hero = exactly one viewport.
   ========================================================== */

.hawks-hero {
  --hawks-hero-services-height: 92px;

  position: relative;

  width: 100%;

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

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

  min-height: 0;

  overflow: hidden;

  color: var(--hawks-white);

  background:
    var(--hawks-black);

  isolation: isolate;
}


/* ==========================================================
   02. BACKGROUND IMAGE
   ========================================================== */

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

  z-index: -5;

  overflow: hidden;

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

.hawks-hero__media img {
  position: absolute;

  width: 100%;
  height: 100%;

  inset: 0;

  object-fit: cover;

  /*
    The approved concept keeps the strongest visual
    element toward the right side.
  */
  object-position: 68% center;

  transform:
    translate3d(
      0,
      var(--hawks-hero-parallax, 0px),
      0
    )
    scale(1.025);

  will-change: transform;

  transition:
    transform
      1600ms
      var(--hawks-ease),
    filter
      1000ms
      var(--hawks-ease);

  filter:
    saturate(0.93)
    contrast(1.025);
}


/* ==========================================================
   03. DARK CINEMATIC GRADIENT
   ========================================================== */

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

  z-index: -4;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,

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

      rgba(7, 9, 12, 0.965)
        20%,

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

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

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

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

    linear-gradient(
      180deg,

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

      transparent
        42%,

      rgba(7, 9, 12, 0.24)
        72%,

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


/* ==========================================================
   04. SUBTLE MINERAL TEXTURE
   ========================================================== */

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

  z-index: -3;

  pointer-events: none;

  opacity: 0.18;

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


/* ==========================================================
   05. BRAND DIAGONALS
   Inspired by logo wings, but deliberately subtle.
   ========================================================== */

.hawks-hero__accent {
  position: absolute;

  z-index: -2;

  top: 0;
  left: 0;

  width: 84px;
  height: 100%;

  pointer-events: none;

  overflow: hidden;
}

.hawks-hero__accent span {
  position: absolute;

  left: -130px;

  width: 260px;
  height: 2px;

  transform:
    rotate(-48deg);

  transform-origin:
    center;
}

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

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

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

  opacity: 0.68;

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

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

  opacity: 0.25;

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


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

.hawks-hero__inner {
  position: relative;

  z-index: 2;

  display: flex;
  align-items: center;

  height: 100%;

  padding-top:
    clamp(
      26px,
      4vh,
      52px
    );

  padding-bottom:
    calc(
      var(--hawks-hero-services-height) +
      clamp(20px, 3.2vh, 38px)
    );
}


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

.hawks-hero__content {
  width:
    min(
      52%,
      710px
    );

  max-width: 710px;
}


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

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

  gap: 12px;

  margin-bottom:
    clamp(
      13px,
      1.8vh,
      21px
    );

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

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

  font-weight:
    var(--hawks-weight-semibold);

  line-height: 1;

  letter-spacing:
    0.18em;

  text-transform: uppercase;
}

.hawks-hero__eyebrow-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 auto;

  border-radius:
    50%;

  background:
    var(--hawks-gold);

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

.hawks-hero__eyebrow-line {
  width: 42px;
  height: 2px;

  margin-left: 3px;

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

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      rgba(242, 180, 14, 0)
    );
}


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

.hawks-hero__title {
  display: flex;
  flex-direction: column;

  width: fit-content;

  margin:
    0
    0
    clamp(
      18px,
      2.5vh,
      28px
    );

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

  font-size:
    clamp(
      4rem,
      min(5.3vw, 8.2vh),
      6.45rem
    );

  font-weight:
    var(--hawks-weight-bold);

  line-height:
    0.84;

  letter-spacing:
    -0.025em;

  text-transform: none;

  color:
    var(--hawks-white);

  text-wrap: balance;
}

.hawks-hero__title-line {
  display: block;

  white-space: nowrap;

  text-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.18);
}

.hawks-hero__title-line--gold {
  position: relative;

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

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

      var(--hawks-gold)
        70%,

      #df9d00
        100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

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


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

.hawks-hero__description {
  max-width: 640px;

  margin:
    0
    0
    clamp(
      21px,
      3vh,
      32px
    );

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

  font-weight:
    var(--hawks-weight-regular);

  line-height:
    1.62;

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

  text-wrap: pretty;
}


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

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

  gap: 14px;
}

.hawks-hero__button {
  position: relative;

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

  gap: 11px;

  min-height: 55px;

  padding:
    12px
    20px;

  overflow: hidden;

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

  font-size:
    0.96rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

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

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

  position: absolute;

  top: -70%;
  left: -80%;

  width: 42%;
  height: 240%;

  opacity: 0;

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

  transform:
    rotate(19deg);

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

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

.hawks-hero__button:hover::before {
  left: 140%;

  opacity: 1;
}


/* PRIMARY */

.hawks-hero__button--primary {
  min-width: 190px;

  color:
    var(--hawks-black);

  border:
    1px solid
    rgba(201, 140, 0, 0.35);

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

  box-shadow:
    0 13px 32px
    rgba(201, 140, 0, 0.2);
}

.hawks-hero__button--primary:hover {
  box-shadow:
    0 18px 40px
    rgba(201, 140, 0, 0.28);
}


/* SECONDARY */

.hawks-hero__button--secondary {
  min-width: 212px;

  color:
    var(--hawks-white);

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

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

  box-shadow:
    inset 0 0 0 1px
    rgba(4, 88, 204, 0.08);

  backdrop-filter:
    blur(8px);

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

.hawks-hero__button--secondary:hover {
  border-color:
    rgba(59, 130, 232, 0.95);

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

  box-shadow:
    0 13px 30px
    rgba(4, 88, 204, 0.13);
}


/* BUTTON ICON */

.hawks-hero__button-icon {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 20px;
  height: 20px;
}

.hawks-hero__button-icon svg,
.hawks-hero__button-arrow {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.hawks-hero__button-arrow {
  position: relative;
  z-index: 1;

  width: 18px;
  height: 18px;

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

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

.hawks-hero__button-copy {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;

  gap: 3px;

  text-align: left;
}

.hawks-hero__button-copy small {
  font-size: 0.66rem;

  font-weight:
    var(--hawks-weight-semibold);

  line-height: 1;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

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

.hawks-hero__button-copy strong {
  font-size: 0.94rem;

  line-height: 1;
}


/* ==========================================================
   12. SERVICE STRIP
   ========================================================== */

.hawks-hero-services {
  position: absolute;

  z-index: 5;

  left: 0;
  bottom: 0;

  width: 100%;
  height:
    var(--hawks-hero-services-height);

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

  background:
    linear-gradient(
      90deg,
      rgba(7, 9, 12, 0.94),
      rgba(10, 13, 17, 0.84)
    );

  backdrop-filter:
    blur(15px);

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

  box-shadow:
    0 -16px 42px
    rgba(0, 0, 0, 0.11);
}

.hawks-hero-services::before {
  content: "";

  position: absolute;

  left: 0;
  top: -1px;

  width: 32%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      rgba(242, 180, 14, 0)
    );
}

.hawks-hero-services__inner {
  display: grid;

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

  align-items: center;

  height: 100%;
}


/* ==========================================================
   13. SERVICE ITEM
   ========================================================== */

.hawks-hero-service {
  position: relative;

  display: flex;
  align-items: center;

  gap: 14px;

  min-width: 0;

  height: 100%;

  padding:
    0
    clamp(
      12px,
      1.7vw,
      24px
    );

  color:
    var(--hawks-white);

  transition:
    background-color
      260ms
      ease;
}

.hawks-hero-service:first-child {
  padding-left: 0;
}

.hawks-hero-service:not(:first-child)::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 1px;
  height: 34px;

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

  transform:
    translateY(-50%);
}

.hawks-hero-service:hover {
  background:
    rgba(255, 255, 255, 0.035);
}


/* ICON */

.hawks-hero-service__icon {
  display: grid;
  place-items: center;

  flex:
    0
    0
    38px;

  width: 38px;
  height: 38px;

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

.hawks-hero-service__icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

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

.hawks-hero-service:hover
.hawks-hero-service__icon svg {
  transform:
    translateY(-2px);
}


/* TEXT */

.hawks-hero-service__text {
  display: flex;
  flex-direction: column;

  min-width: 0;

  gap: 2px;
}

.hawks-hero-service__text strong {
  font-size:
    0.86rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height:
    1.18;

  white-space:
    nowrap;
}

.hawks-hero-service__text span {
  font-size:
    0.77rem;

  font-weight:
    var(--hawks-weight-medium);

  line-height:
    1.2;

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

  white-space:
    nowrap;
}


/* ==========================================================
   14. HERO ENTRANCE MOTION

   Classes are activated by hero.js.
   Content is never hidden if JS fails.
   ========================================================== */

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

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

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

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

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

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

.hawks-hero--motion
.hawks-hero__media img {
  transform:
    translate3d(
      0,
      var(--hawks-hero-parallax, 0px),
      0
    )
    scale(1.065);
}

.hawks-hero--motion.is-ready
.hawks-hero__media img {
  transform:
    translate3d(
      0,
      var(--hawks-hero-parallax, 0px),
      0
    )
    scale(1.025);
}


/* ==========================================================
   15. REDUCED MOTION
   Uses global JS preference class.
   ========================================================== */

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

  transform: none;

  transition: none;
}

html.reduce-motion
.hawks-hero__media img {
  transform:
    scale(1.025);

  transition: none;
}


/* ==========================================================
   16. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-hero {
    --hawks-hero-services-height:
      92px;
  }

  .hawks-hero__content {
    width:
      min(
        52%,
        710px
      );
  }

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

}


/* ==========================================================
   17. TABLET
   ========================================================== */

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

  .hawks-hero {
    --hawks-hero-services-height:
      82px;
  }

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

  .hawks-hero__shade {
    background:

      linear-gradient(
        90deg,

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

        rgba(7, 9, 12, 0.94)
          28%,

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

        rgba(7, 9, 12, 0.31)
          72%,

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

      linear-gradient(
        180deg,
        rgba(7, 9, 12, 0.14),
        rgba(7, 9, 12, 0.58)
      );
  }

  .hawks-hero__content {
    width:
      min(
        61%,
        620px
      );
  }

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

  .hawks-hero__description {
    max-width:
      560px;

    font-size:
      1rem;
  }

  .hawks-hero-service {
    gap: 9px;

    padding:
      0
      12px;
  }

  .hawks-hero-service__icon {
    flex-basis:
      31px;

    width: 31px;
    height: 31px;
  }

  .hawks-hero-service__text strong {
    font-size:
      0.76rem;
  }

  .hawks-hero-service__text span {
    font-size:
      0.68rem;
  }

}


/* ==========================================================
   18. MOBILE
   ========================================================== */

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

  .hawks-hero {
    --hawks-hero-services-height:
      72px;
  }

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

  .hawks-hero__shade {
    background:

      linear-gradient(
        90deg,

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

        rgba(7, 9, 12, 0.91)
          56%,

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

      linear-gradient(
        180deg,

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

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

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

  .hawks-hero__inner {
    align-items:
      center;

    padding-top:
      20px;

    padding-bottom:
      calc(
        var(--hawks-hero-services-height) +
        16px
      );
  }

  .hawks-hero__content {
    width: 88%;
    max-width: 560px;
  }

  .hawks-hero__eyebrow {
    margin-bottom: 12px;

    font-size:
      0.73rem;
  }

  .hawks-hero__title {
    margin-bottom: 17px;

    font-size:
      clamp(
        3rem,
        min(10.3vw, 7.2vh),
        4.25rem
      );

    line-height:
      0.87;
  }

  .hawks-hero__description {
    max-width:
      500px;

    margin-bottom:
      20px;

    font-size:
      0.94rem;

    line-height:
      1.52;
  }

  .hawks-hero__actions {
    display: grid;

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

    width: 100%;
    max-width: 490px;

    gap: 10px;
  }

  .hawks-hero__button {
    min-width: 0;
    min-height: 50px;

    padding:
      10px
      13px;

    font-size:
      0.86rem;
  }

  .hawks-hero__button-copy small {
    display: none;
  }

  .hawks-hero__button-copy strong {
    font-size:
      0.82rem;
  }


  /* --------------------------------
     Horizontal service ribbon
  -------------------------------- */

  .hawks-hero-services__inner {
    display: flex;

    width: 100%;

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

    padding-inline:
      24px;

    scroll-snap-type:
      x proximity;

    scrollbar-width:
      none;
  }

  .hawks-hero-services__inner::-webkit-scrollbar {
    display: none;
  }

  .hawks-hero-service {
    flex:
      0
      0
      172px;

    gap: 10px;

    padding:
      0
      16px;

    scroll-snap-align:
      start;
  }

  .hawks-hero-service:first-child {
    padding-left: 0;
  }

  .hawks-hero-service__icon {
    flex-basis:
      30px;

    width: 30px;
    height: 30px;
  }

  .hawks-hero-service__text strong {
    font-size:
      0.76rem;
  }

  .hawks-hero-service__text span {
    font-size:
      0.68rem;
  }

}


/* ==========================================================
   19. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hawks-hero {
    --hawks-hero-services-height:
      64px;
  }

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

  .hawks-hero__shade {
    background:

      linear-gradient(
        90deg,

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

        rgba(7, 9, 12, 0.92)
          60%,

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

      linear-gradient(
        180deg,

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

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

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

  .hawks-hero__accent {
    width: 54px;
  }

  .hawks-hero__inner {
    align-items:
      center;

    padding-top:
      12px;

    padding-bottom:
      calc(
        var(--hawks-hero-services-height) +
        11px
      );
  }

  .hawks-hero__content {
    width: 100%;
  }

  .hawks-hero__eyebrow {
    gap: 8px;

    margin-bottom:
      10px;

    font-size:
      0.66rem;

    letter-spacing:
      0.13em;
  }

  .hawks-hero__eyebrow-line {
    width: 26px;
  }

  .hawks-hero__title {
    margin-bottom:
      14px;

    font-size:
      clamp(
        2.65rem,
        min(13vw, 7.1vh),
        3.65rem
      );

    line-height:
      0.87;
  }

  .hawks-hero__description {
    max-width:
      95%;

    margin-bottom:
      17px;

    font-size:
      0.86rem;

    line-height:
      1.48;
  }

  .hawks-hero__actions {
    display: grid;

    grid-template-columns:
      1fr
      1fr;

    gap: 8px;

    width: 100%;
  }

  .hawks-hero__button {
    width: 100%;

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

    gap: 7px;

    padding:
      8px
      10px;

    border-radius:
      10px;

    font-size:
      0.77rem;
  }

  .hawks-hero__button-icon {
    width: 17px;
    height: 17px;
  }

  .hawks-hero__button-arrow {
    display: none;
  }

  .hawks-hero__button-copy small {
    display: none;
  }

  .hawks-hero__button-copy strong {
    font-size:
      0.74rem;
  }


  /* SERVICE RIBBON */

  .hawks-hero-services__inner {
    display: flex;

    width: 100%;

    padding-inline:
      18px;

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

    scrollbar-width:
      none;

    scroll-snap-type:
      x proximity;
  }

  .hawks-hero-services__inner::-webkit-scrollbar {
    display: none;
  }

  .hawks-hero-service {
    flex:
      0
      0
      148px;

    gap: 8px;

    padding:
      0
      13px;

    scroll-snap-align:
      start;
  }

  .hawks-hero-service:first-child {
    padding-left: 0;
  }

  .hawks-hero-service__icon {
    flex-basis:
      27px;

    width: 27px;
    height: 27px;
  }

  .hawks-hero-service__text strong {
    font-size:
      0.7rem;
  }

  .hawks-hero-service__text span {
    font-size:
      0.62rem;
  }

}


/* ==========================================================
   REMODELING HAWKS LLC
   HERO SERVICES
   SUPPORT FOR 9 SERVICES

   Mobile keeps the existing horizontal swipe behavior.
   ========================================================== */


/* ==========================================================
   LARGE DESKTOP
   9 SERVICES VISIBLE IN ONE ROW
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-hero-services__inner {
    grid-template-columns:
      repeat(
        9,
        minmax(0, 1fr)
      );
  }


  .hawks-hero-service {
    gap: 7px;

    padding:
      0
      9px;
  }


  .hawks-hero-service:first-child {
    padding-left: 0;
  }


  .hawks-hero-service__icon {
    flex:
      0
      0
      27px;

    width: 27px;
    height: 27px;
  }


  .hawks-hero-service__text strong {
    font-size: 0.72rem;
  }


  .hawks-hero-service__text span {
    font-size: 0.62rem;
  }

}


/* ==========================================================
   TABLET
   Keep the same horizontal ribbon behavior used on mobile.
   This avoids squeezing nine services into a narrow grid.
   ========================================================== */

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

  .hawks-hero-services__inner {
    display: flex;

    width: 100%;

    padding-inline:
      24px;

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

    scroll-snap-type:
      x proximity;

    scrollbar-width:
      none;
  }


  .hawks-hero-services__inner::-webkit-scrollbar {
    display: none;
  }


  .hawks-hero-service {
    flex:
      0
      0
      166px;

    height: 100%;

    gap: 9px;

    padding:
      0
      14px;

    scroll-snap-align:
      start;
  }


  .hawks-hero-service:first-child {
    padding-left: 0;
  }


  .hawks-hero-service__icon {
    flex:
      0
      0
      29px;

    width: 29px;
    height: 29px;
  }


  .hawks-hero-service__text strong {
    font-size:
      0.74rem;
  }


  .hawks-hero-service__text span {
    font-size:
      0.65rem;
  }

}













































/* ==========================================================
   REMODELING HAWKS LLC
   04. SERVICES
   ========================================================== */


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

.hawks-services {
  position: relative;

  padding:
    var(--hawks-section-space)
    0;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(245, 243, 238, 0.2) 0%,
      rgba(255, 255, 255, 0.52) 48%,
      rgba(245, 243, 238, 0.32) 100%
    );
}


/*
  Soft ambient light.
  Not a visible decorative blob.
*/

.hawks-services::before {
  content: "";

  position: absolute;

  top: -280px;
  right: -240px;

  width: 620px;
  height: 620px;

  pointer-events: none;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(242, 180, 14, 0.075) 0%,
      rgba(242, 180, 14, 0.018) 46%,
      transparent 72%
    );

  filter:
    blur(10px);
}


.hawks-services::after {
  content: "";

  position: absolute;

  left: -260px;
  bottom: -300px;

  width: 640px;
  height: 640px;

  pointer-events: none;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.05) 0%,
      transparent 69%
    );

  filter:
    blur(14px);
}


/* ==========================================================
   02. SECTION HEADER
   ========================================================== */

.hawks-services__header {
  position: relative;

  z-index: 2;

  display: grid;

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

  align-items: end;

  gap:
    clamp(
      48px,
      7vw,
      108px
    );

  margin-bottom:
    clamp(
      44px,
      5.5vw,
      72px
    );
}


.hawks-services__heading {
  max-width: 780px;
}


/* ==========================================================
   03. EYEBROW
   ========================================================== */

.hawks-services__eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 18px;
}


.hawks-services__eyebrow > span {
  width: 34px;
  height: 2px;

  flex: 0 0 auto;

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

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


.hawks-services__eyebrow p {
  margin: 0;

  font-size: 0.91rem;
  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing: 0.15em;

  text-transform: uppercase;

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


/* ==========================================================
   04. TITLE
   ========================================================== */

.hawks-services__heading h2 {
  max-width: 820px;

  margin: 0;

  color:
    var(--hawks-text);

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

  line-height: 0.92;

  letter-spacing:
    -0.025em;
}


.hawks-services__heading h2 span {
  display: block;

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


/* ==========================================================
   05. INTRO
   ========================================================== */

.hawks-services__intro {
  max-width: 520px;

  margin:
    0
    0
    5px;

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

  line-height: 1.72;

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

  text-wrap: pretty;
}


/* ==========================================================
   06. GRID
   ========================================================== */

.hawks-services__grid {
  position: relative;

  z-index: 2;

  display: grid;

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

  gap:
    clamp(
      18px,
      2vw,
      28px
    );
}


/*
  Editorial proportion.

  Row 1:
  Painting 5 / Drywall 7

  Row 2:
  Remodeling 7 / Demolition 5
*/

.hawks-service-card--painting {
  grid-column:
    span 5;
}


.hawks-service-card--drywall {
  grid-column:
    span 7;
}


.hawks-service-card--remodeling {
  grid-column:
    span 7;
}


.hawks-service-card--demolition {
  grid-column:
    span 5;
}


/* ==========================================================
   07. CARD
   ========================================================== */

.hawks-service-card {
  --card-x: 50%;
  --card-y: 50%;

  --card-image-x: 0px;
  --card-image-y: 0px;

  position: relative;

  display: block;

  min-height:
    clamp(
      410px,
      34vw,
      520px
    );

  overflow: hidden;

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

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

  color:
    var(--hawks-white);

  background:
    var(--hawks-charcoal);

  box-shadow:
    0 18px 54px
    rgba(7, 9, 12, 0.13);

  isolation: isolate;

  transform:
    translateZ(0);

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


.hawks-service-card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(242, 180, 14, 0.32);

  box-shadow:
    0 28px 72px
    rgba(7, 9, 12, 0.2);
}


/* ==========================================================
   08. BACKGROUND IMAGE
   ========================================================== */

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

  z-index: -5;

  overflow: hidden;
}


.hawks-service-card__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform:
    translate3d(
      var(--card-image-x),
      var(--card-image-y),
      0
    )
    scale(1.035);

  transition:
    transform
      800ms
      var(--hawks-ease),
    filter
      600ms
      ease;

  will-change:
    transform;

  filter:
    saturate(0.9)
    contrast(1.02)
    brightness(0.94);
}


.hawks-service-card:hover
.hawks-service-card__media img {
  transform:
    translate3d(
      var(--card-image-x),
      var(--card-image-y),
      0
    )
    scale(1.075);

  filter:
    saturate(1)
    contrast(1.02)
    brightness(0.98);
}


/* ==========================================================
   09. IMAGE OVERLAY
   ========================================================== */

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

  z-index: -4;

  pointer-events: none;

  background:

    linear-gradient(
      180deg,

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

      rgba(7, 9, 12, 0.09)
        30%,

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

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

    linear-gradient(
      90deg,

      rgba(7, 9, 12, 0.3),
      transparent 60%
    );

  transition:
    background
      450ms
      ease;
}


/* ==========================================================
   10. SUBTLE INTERACTIVE GLOW
   ========================================================== */

.hawks-service-card__glow {
  position: absolute;
  inset: 0;

  z-index: -3;

  pointer-events: none;

  opacity: 0;

  background:
    radial-gradient(
      circle
      320px
      at
      var(--card-x)
      var(--card-y),

      rgba(242, 180, 14, 0.17),

      rgba(242, 180, 14, 0.045)
        35%,

      transparent
        68%
    );

  transition:
    opacity
      320ms
      ease;
}


.hawks-service-card:hover
.hawks-service-card__glow {
  opacity: 1;
}


/* ==========================================================
   11. CARD CONTENT
   ========================================================== */

.hawks-service-card__content {
  position: relative;

  z-index: 2;

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

  width: 100%;
  height: 100%;
  min-height: inherit;

  padding:
    clamp(
      24px,
      2.5vw,
      36px
    );
}


/* ==========================================================
   12. CARD TOP
   ========================================================== */

.hawks-service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


/* CATEGORY */

.hawks-service-card__category {
  display: inline-flex;
  align-items: center;

  min-height: 34px;

  padding:
    7px
    13px;

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

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

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

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

  backdrop-filter:
    blur(10px);

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

  font-size:
    0.83rem;

  font-weight:
    var(--hawks-weight-semibold);

  line-height: 1;

  letter-spacing:
    0.05em;
}


/* ==========================================================
   13. ARROW
   ========================================================== */

.hawks-service-card__arrow {
  display: grid;
  place-items: center;

  flex:
    0
    0
    46px;

  width: 46px;
  height: 46px;

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

  border-radius:
    50%;

  color:
    var(--hawks-white);

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

  backdrop-filter:
    blur(10px);

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

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


.hawks-service-card__arrow svg {
  width: 20px;
  height: 20px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-service-card:hover
.hawks-service-card__arrow {
  color:
    var(--hawks-black);

  background:
    var(--hawks-gold);

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

  transform:
    translate3d(
      3px,
      -3px,
      0
    );
}


/* ==========================================================
   14. CARD BOTTOM
   ========================================================== */

.hawks-service-card__bottom {
  max-width: 590px;
}


.hawks-service-card__bottom h3 {
  max-width: 560px;

  margin:
    0
    0
    13px;

  color:
    var(--hawks-white);

  font-size:
    clamp(
      2.25rem,
      3.25vw,
      3.65rem
    );

  font-weight:
    var(--hawks-weight-bold);

  line-height:
    0.96;

  letter-spacing:
    -0.018em;

  text-shadow:
    0 8px 26px
    rgba(0, 0, 0, 0.2);
}


.hawks-service-card__bottom p {
  max-width: 530px;

  margin:
    0
    0
    19px;

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

  font-size:
    0.96rem;

  line-height:
    1.56;
}


/* ==========================================================
   15. SERVICE TAGS
   ========================================================== */

.hawks-service-card__tags {
  display: flex;
  flex-wrap: wrap;

  gap:
    7px
    8px;
}


.hawks-service-card__tags span {
  display: inline-flex;
  align-items: center;

  min-height: 31px;

  padding:
    6px
    10px;

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

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

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

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

  backdrop-filter:
    blur(8px);

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

  font-size:
    0.79rem;

  font-weight:
    var(--hawks-weight-semibold);

  line-height: 1;
}


/* ==========================================================
   16. BRAND DETAIL
   Thin accent appears at bottom on hover.
   ========================================================== */

.hawks-service-card::after {
  content: "";

  position: absolute;

  z-index: 4;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--hawks-gold),
      var(--hawks-gold-soft) 44%,
      var(--hawks-blue) 100%
    );

  transform:
    scaleX(0);

  transform-origin:
    left center;

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


.hawks-service-card:hover::after,
.hawks-service-card:focus-visible::after {
  transform:
    scaleX(1);
}


/* ==========================================================
   17. ACCESSIBILITY
   ========================================================== */

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

  outline-offset:
    5px;
}


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

html.reduce-motion
.hawks-service-card,
html.reduce-motion
.hawks-service-card__media img,
html.reduce-motion
.hawks-service-card__arrow,
html.reduce-motion
.hawks-service-card::after,
html.reduce-motion
.hawks-service-card__glow {
  transition: none !important;
}


html.reduce-motion
.hawks-service-card:hover {
  transform: none;
}


html.reduce-motion
.hawks-service-card:hover
.hawks-service-card__media img {
  transform:
    scale(1.035);
}


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

@media (min-width: 1200px) {

  .hawks-service-card {
    min-height:
      clamp(
        430px,
        33vw,
        525px
      );
  }

}


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

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

  .hawks-services__header {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(280px, 0.7fr);

    gap: 44px;
  }


  .hawks-services__heading h2 {
    font-size:
      clamp(
        3rem,
        6vw,
        4.4rem
      );
  }


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

    gap: 20px;
  }


  .hawks-service-card--painting,
  .hawks-service-card--drywall,
  .hawks-service-card--remodeling,
  .hawks-service-card--demolition {
    grid-column:
      span 1;
  }


  .hawks-service-card {
    min-height:
      430px;
  }


  .hawks-service-card__content {
    padding: 27px;
  }


  .hawks-service-card__bottom h3 {
    font-size:
      clamp(
        2.25rem,
        4vw,
        3rem
      );
  }


  .hawks-service-card__tags span {
    font-size:
      0.76rem;
  }

}


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

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

  .hawks-services__header {
    grid-template-columns:
      1fr;

    align-items: start;

    gap: 24px;

    margin-bottom:
      38px;
  }


  .hawks-services__heading h2 {
    max-width: 600px;

    font-size:
      clamp(
        2.85rem,
        10vw,
        4rem
      );
  }


  .hawks-services__intro {
    max-width: 590px;

    font-size: 1rem;
  }


  .hawks-services__grid {
    grid-template-columns:
      1fr;

    gap: 18px;
  }


  .hawks-service-card--painting,
  .hawks-service-card--drywall,
  .hawks-service-card--remodeling,
  .hawks-service-card--demolition {
    grid-column:
      auto;
  }


  .hawks-service-card {
    min-height:
      430px;

    border-radius:
      22px;
  }


  .hawks-service-card__content {
    padding:
      26px;
  }


  .hawks-service-card__bottom {
    max-width:
      570px;
  }


  .hawks-service-card__bottom h3 {
    font-size:
      clamp(
        2.35rem,
        8vw,
        3.2rem
      );
  }


  .hawks-service-card__bottom p {
    font-size:
      0.95rem;
  }


  .hawks-service-card__tags span {
    font-size:
      0.76rem;
  }

}


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

@media (max-width: 480px) {

  .hawks-services__header {
    grid-template-columns:
      1fr;

    align-items: start;

    gap: 21px;

    margin-bottom:
      32px;
  }


  .hawks-services__eyebrow {
    margin-bottom:
      14px;
  }


  .hawks-services__eyebrow p {
    font-size:
      0.81rem;
  }


  .hawks-services__heading h2 {
    font-size:
      clamp(
        2.55rem,
        12vw,
        3.45rem
      );

    line-height:
      0.94;
  }


  .hawks-services__intro {
    font-size:
      0.96rem;

    line-height:
      1.62;
  }


  .hawks-services__grid {
    grid-template-columns:
      1fr;

    gap: 15px;
  }


  .hawks-service-card--painting,
  .hawks-service-card--drywall,
  .hawks-service-card--remodeling,
  .hawks-service-card--demolition {
    grid-column:
      auto;
  }


  .hawks-service-card {
    min-height:
      400px;

    border-radius:
      19px;
  }


  .hawks-service-card:hover {
    transform: none;
  }


  .hawks-service-card__content {
    padding:
      21px;
  }


  .hawks-service-card__category {
    min-height: 31px;

    padding:
      6px
      10px;

    font-size:
      0.77rem;
  }


  .hawks-service-card__arrow {
    flex-basis:
      41px;

    width: 41px;
    height: 41px;
  }


  .hawks-service-card__bottom h3 {
    margin-bottom:
      11px;

    font-size:
      clamp(
        2.2rem,
        11vw,
        2.9rem
      );
  }


  .hawks-service-card__bottom p {
    margin-bottom:
      16px;

    font-size:
      0.91rem;

    line-height:
      1.52;
  }


  .hawks-service-card__tags {
    gap: 6px;
  }


  .hawks-service-card__tags span {
    min-height: 29px;

    padding:
      5px
      9px;

    font-size:
      0.72rem;
  }

}
















































/* ==========================================================
   REMODELING HAWKS LLC
   05. WHY CHOOSE US
   ========================================================== */


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

.hawks-why {
  position: relative;

  padding:
    var(--hawks-section-space)
    0;

  overflow: hidden;

  color:
    var(--hawks-white);

  background:
    linear-gradient(
      135deg,
      var(--hawks-black) 0%,
      var(--hawks-charcoal) 54%,
      #151b22 100%
    );
}


/* mineral light */

.hawks-why::before {
  content: "";

  position: absolute;

  top: -300px;
  right: -260px;

  width: 700px;
  height: 700px;

  pointer-events: none;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.12),
      rgba(4, 88, 204, 0.025) 42%,
      transparent 70%
    );

  filter:
    blur(12px);
}


/* subtle texture */

.hawks-why::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.12;

  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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
}


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

.hawks-why__shell {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  align-items: stretch;

  gap:
    clamp(
      54px,
      7vw,
      110px
    );
}


/* ==========================================================
   03. VISUAL
   ========================================================== */

.hawks-why__visual {
  position: relative;

  min-height:
    clamp(
      650px,
      58vw,
      800px
    );

  overflow: hidden;

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

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

  background:
    var(--hawks-graphite);

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

  isolation: isolate;
}


/* ==========================================================
   04. IMAGE
   ========================================================== */

.hawks-why__image {
  position: absolute;
  inset: 0;

  z-index: -4;

  overflow: hidden;
}


.hawks-why__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center;

  transform:
    translate3d(
      0,
      var(--hawks-why-image-y, 0px),
      0
    )
    scale(1.045);

  filter:
    saturate(0.9)
    contrast(1.02);

  will-change:
    transform;

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


/* ==========================================================
   05. IMAGE SHADE
   ========================================================== */

.hawks-why__image-shade {
  position: absolute;
  inset: 0;

  z-index: -3;

  pointer-events: none;

  background:

    linear-gradient(
      180deg,
      rgba(7, 9, 12, 0.04) 0%,
      rgba(7, 9, 12, 0.05) 42%,
      rgba(7, 9, 12, 0.75) 78%,
      rgba(7, 9, 12, 0.96) 100%
    ),

    linear-gradient(
      90deg,
      rgba(7, 9, 12, 0.05),
      transparent 54%
    );
}


/* ==========================================================
   06. BRAND ACCENT
   ========================================================== */

.hawks-why__image-accent {
  position: absolute;

  z-index: 2;

  top: 28px;
  right: 0;

  width: 130px;
  height: 80px;

  overflow: hidden;

  pointer-events: none;
}


.hawks-why__image-accent span {
  position: absolute;

  right: -42px;

  width: 150px;
  height: 2px;

  transform:
    rotate(-34deg);
}


.hawks-why__image-accent
span:first-child {
  top: 25px;

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


.hawks-why__image-accent
span:last-child {
  top: 42px;

  opacity: 0.65;

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


/* ==========================================================
   07. VISUAL LABEL
   ========================================================== */

.hawks-why__visual-label {
  position: absolute;

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

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

  bottom:
    clamp(
      27px,
      3vw,
      42px
    );

  z-index: 3;

  display: flex;
  flex-direction: column;

  gap: 8px;
}


.hawks-why__visual-label span {
  font-size: 0.79rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing:
    0.14em;

  text-transform: uppercase;

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


.hawks-why__visual-label strong {
  max-width: 410px;

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

  font-size:
    clamp(
      2.15rem,
      3.1vw,
      3.45rem
    );

  font-weight:
    var(--hawks-weight-semibold);

  line-height:
    0.98;

  color:
    var(--hawks-white);

  text-wrap:
    balance;
}


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

.hawks-why__content {
  display: flex;
  flex-direction: column;

  justify-content: center;

  min-width: 0;

  padding-block:
    clamp(
      10px,
      2vw,
      24px
    );
}


/* ==========================================================
   09. EYEBROW
   ========================================================== */

.hawks-why__eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 18px;
}


.hawks-why__eyebrow span {
  width: 36px;
  height: 2px;

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

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


.hawks-why__eyebrow p {
  margin: 0;

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

  font-size:
    0.89rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing:
    0.15em;

  text-transform: uppercase;
}


/* ==========================================================
   10. TITLE
   ========================================================== */

.hawks-why__heading h2 {
  max-width: 680px;

  margin:
    0
    0
    24px;

  color:
    var(--hawks-white);

  font-size:
    clamp(
      3.2rem,
      5.2vw,
      5.55rem
    );

  line-height:
    0.91;

  letter-spacing:
    -0.024em;
}


.hawks-why__heading h2 span {
  display: block;

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


/* ==========================================================
   11. INTRO
   ========================================================== */

.hawks-why__intro {
  max-width: 650px;

  margin:
    0
    0
    clamp(
      36px,
      4vw,
      52px
    );

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

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

  line-height:
    1.72;
}


/* ==========================================================
   12. REASON LIST
   ========================================================== */

.hawks-why__reasons {
  position: relative;

  display: flex;
  flex-direction: column;

  margin-bottom:
    clamp(
      34px,
      4vw,
      46px
    );
}


/*
  Vertical gold line.
*/

.hawks-why__reasons::before {
  content: "";

  position: absolute;

  left: 25px;
  top: 26px;
  bottom: 26px;

  width: 1px;

  background:
    linear-gradient(
      180deg,
      rgba(242, 180, 14, 0),
      rgba(242, 180, 14, 0.3) 12%,
      rgba(242, 180, 14, 0.2) 88%,
      rgba(242, 180, 14, 0)
    );
}


/* ==========================================================
   13. REASON ITEM
   ========================================================== */

.hawks-why-item {
  position: relative;

  display: grid;

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

  gap: 22px;

  padding:
    23px
    0;

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

  transition:
    border-color
      260ms
      ease,
    transform
      340ms
      var(--hawks-ease);
}


.hawks-why-item:first-child {
  padding-top: 0;
}


.hawks-why-item:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}


.hawks-why-item:hover {
  transform:
    translateX(4px);

  border-color:
    rgba(242, 180, 14, 0.17);
}


/* ==========================================================
   14. ITEM ICON
   ========================================================== */

.hawks-why-item__icon {
  position: relative;

  z-index: 2;

  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

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

  border-radius: 15px;

  color:
    var(--hawks-gold);

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

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, 0.015);

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


.hawks-why-item__icon svg {
  width: 26px;
  height: 26px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-why-item:hover
.hawks-why-item__icon,
.hawks-why-item.is-active
.hawks-why-item__icon {
  color:
    var(--hawks-black);

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

  background:
    var(--hawks-gold);

  transform:
    translateY(-2px);
}


/* ==========================================================
   15. ITEM BODY
   ========================================================== */

.hawks-why-item__body {
  min-width: 0;
}


.hawks-why-item__body h3 {
  margin:
    0
    0
    8px;

  color:
    var(--hawks-white);

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

  font-size:
    clamp(
      1.05rem,
      1.35vw,
      1.22rem
    );

  font-weight:
    var(--hawks-weight-bold);

  line-height:
    1.25;

  letter-spacing: 0;
}


.hawks-why-item__body p {
  max-width: 600px;

  margin: 0;

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

  font-size: 0.93rem;

  line-height:
    1.62;
}


/* ==========================================================
   16. ACTIONS
   ========================================================== */

.hawks-why__actions {
  display: flex;
  align-items: center;

  gap: 26px;
}


.hawks-why__actions
.hawks-btn {
  width: auto;

  min-height: 55px;
}


.hawks-why__actions
.hawks-btn svg {
  width: 19px;
  height: 19px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

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


.hawks-why__actions
.hawks-btn:hover svg {
  transform:
    translateX(4px);
}


/* GALLERY LINK */

.hawks-why__gallery-link {
  position: relative;

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

  gap: 8px;

  padding:
    10px
    0;

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

  font-size: 0.96rem;

  font-weight:
    var(--hawks-weight-semibold);

  transition:
    color
      220ms
      ease;
}


.hawks-why__gallery-link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 3px;

  width: 100%;
  height: 1px;

  background:
    var(--hawks-gold);

  transform:
    scaleX(0);

  transform-origin:
    right center;

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


.hawks-why__gallery-link:hover {
  color:
    var(--hawks-white);
}


.hawks-why__gallery-link:hover::after {
  transform:
    scaleX(1);

  transform-origin:
    left center;
}


.hawks-why__gallery-link span {
  color:
    var(--hawks-gold);
}


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

html.reduce-motion
.hawks-why__image img,
html.reduce-motion
.hawks-why-item,
html.reduce-motion
.hawks-why-item__icon,
html.reduce-motion
.hawks-why__gallery-link::after {
  transition: none !important;
}


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

@media (min-width: 1200px) {

  .hawks-why__shell {
    grid-template-columns:
      minmax(430px, 0.9fr)
      minmax(560px, 1.1fr);
  }

}


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

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

  .hawks-why__shell {
    grid-template-columns:
      minmax(300px, 0.82fr)
      minmax(0, 1.18fr);

    gap: 46px;
  }


  .hawks-why__visual {
    min-height:
      650px;

    border-radius:
      26px;
  }


  .hawks-why__heading h2 {
    font-size:
      clamp(
        3rem,
        6vw,
        4.4rem
      );
  }


  .hawks-why-item {
    grid-template-columns:
      48px
      minmax(0, 1fr);

    gap: 17px;

    padding:
      20px
      0;
  }


  .hawks-why-item__icon {
    width: 48px;
    height: 48px;
  }


  .hawks-why__reasons::before {
    left: 23px;
  }

}


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

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

  .hawks-why__shell {
    grid-template-columns:
      1fr;

    gap: 48px;
  }


  .hawks-why__visual {
    min-height:
      530px;

    border-radius:
      23px;
  }


  .hawks-why__image img {
    object-position:
      center 42%;
  }


  .hawks-why__content {
    padding: 0;
  }


  .hawks-why__heading h2 {
    max-width: 600px;

    font-size:
      clamp(
        2.85rem,
        10vw,
        4rem
      );
  }


  .hawks-why__intro {
    max-width: 620px;

    margin-bottom:
      34px;
  }


  .hawks-why-item {
    gap: 19px;
  }


  .hawks-why-item__body p {
    font-size:
      0.95rem;
  }

}


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

@media (max-width: 480px) {

  .hawks-why__shell {
    grid-template-columns:
      1fr;

    gap: 39px;
  }


  .hawks-why__visual {
    min-height:
      430px;

    border-radius:
      20px;
  }


  .hawks-why__visual-label {
    left: 22px;
    right: 22px;
    bottom: 24px;
  }


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


  .hawks-why__content {
    padding: 0;
  }


  .hawks-why__eyebrow {
    margin-bottom:
      14px;
  }


  .hawks-why__eyebrow p {
    font-size:
      0.8rem;
  }


  .hawks-why__heading h2 {
    margin-bottom:
      20px;

    font-size:
      clamp(
        2.55rem,
        12vw,
        3.45rem
      );

    line-height:
      0.93;
  }


  .hawks-why__intro {
    margin-bottom:
      30px;

    font-size:
      0.95rem;

    line-height:
      1.62;
  }


  .hawks-why-item {
    grid-template-columns:
      45px
      minmax(0, 1fr);

    gap: 15px;

    padding:
      19px
      0;
  }


  .hawks-why-item__icon {
    width: 45px;
    height: 45px;

    border-radius:
      13px;
  }


  .hawks-why-item__icon svg {
    width: 23px;
    height: 23px;
  }


  .hawks-why__reasons::before {
    left: 22px;
  }


  .hawks-why-item__body h3 {
    font-size: 1rem;
  }


  .hawks-why-item__body p {
    font-size:
      0.89rem;

    line-height:
      1.56;
  }


  .hawks-why__actions {
    flex-direction: column;

    align-items: flex-start;

    gap: 17px;
  }


  .hawks-why__actions
  .hawks-btn {
    width: 100%;
  }

}



















































/* ==========================================================
   REMODELING HAWKS LLC
   06. REVIEWS
   ========================================================== */


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

.hawks-reviews {
  position: relative;

  padding:
    var(--hawks-section-space)
    0;

  overflow: hidden;

  color:
    var(--hawks-text);

  background:
    linear-gradient(
      180deg,
      rgba(245, 243, 238, 0.96) 0%,
      rgba(255, 255, 255, 0.96) 52%,
      rgba(244, 242, 236, 0.94) 100%
    );

  isolation: isolate;
}


/* warm ambient light */

.hawks-reviews::before {
  content: "";

  position: absolute;

  top: -260px;
  left: -220px;

  z-index: -3;

  width: 620px;
  height: 620px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(242, 180, 14, 0.085) 0%,
      rgba(242, 180, 14, 0.022) 44%,
      transparent 72%
    );

  filter:
    blur(12px);
}


/* subtle blue balance */

.hawks-reviews::after {
  content: "";

  position: absolute;

  right: -280px;
  bottom: -340px;

  z-index: -3;

  width: 720px;
  height: 720px;

  border-radius: 50%;

  pointer-events: none;

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

  filter:
    blur(14px);
}


/* ==========================================================
   02. LARGE DECORATIVE QUOTE
   ========================================================== */

.hawks-reviews__quote {
  position: absolute;

  top:
    clamp(
      60px,
      7vw,
      110px
    );

  right:
    clamp(
      3vw,
      7vw,
      140px
    );

  z-index: -1;

  pointer-events: none;

  user-select: none;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      12rem,
      22vw,
      26rem
    );

  font-weight: 700;

  line-height: 0.6;

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

  transform:
    translate3d(
      0,
      var(--hawks-reviews-quote-y, 0px),
      0
    );
}


/* ==========================================================
   03. BRAND LINES
   ========================================================== */

.hawks-reviews__lines {
  position: absolute;

  top: 0;
  right: 0;

  z-index: -1;

  width: 180px;
  height: 180px;

  overflow: hidden;

  pointer-events: none;
}


.hawks-reviews__lines span {
  position: absolute;

  right: -65px;

  width: 190px;
  height: 2px;

  transform:
    rotate(-42deg);
}


.hawks-reviews__lines
span:nth-child(1) {
  top: 42px;

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


.hawks-reviews__lines
span:nth-child(2) {
  top: 62px;

  opacity: 0.65;

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


.hawks-reviews__lines
span:nth-child(3) {
  top: 82px;

  opacity: 0.13;

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


/* ==========================================================
   04. SECTION HEADER
   ========================================================== */

.hawks-reviews__header {
  position: relative;

  z-index: 2;

  display: grid;

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

  align-items: end;

  gap:
    clamp(
      48px,
      7vw,
      110px
    );

  margin-bottom:
    clamp(
      46px,
      6vw,
      76px
    );
}


/* ==========================================================
   05. EYEBROW
   ========================================================== */

.hawks-reviews__eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 18px;
}


.hawks-reviews__eyebrow span {
  width: 35px;
  height: 2px;

  flex: 0 0 auto;

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

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


.hawks-reviews__eyebrow p {
  margin: 0;

  font-size: 0.9rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;

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


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

.hawks-reviews__heading h2 {
  max-width: 790px;

  margin: 0;

  color:
    var(--hawks-text);

  font-size:
    clamp(
      3.25rem,
      5.15vw,
      5.55rem
    );

  line-height:
    0.92;

  letter-spacing:
    -0.025em;
}


.hawks-reviews__heading h2 span {
  display: block;

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


/* ==========================================================
   07. INTRO
   ========================================================== */

.hawks-reviews__intro {
  max-width: 520px;

  padding-bottom: 4px;
}


.hawks-reviews__intro p {
  margin: 0;

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

  line-height: 1.72;

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


/* ==========================================================
   08. MAIN LAYOUT
   ========================================================== */

.hawks-reviews__layout {
  position: relative;

  z-index: 2;

  display: grid;

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

  align-items: stretch;

  gap:
    clamp(
      22px,
      2.5vw,
      36px
    );
}


/* ==========================================================
   09. EDITORIAL ASIDE
   ========================================================== */

.hawks-reviews__aside {
  position: relative;

  min-height: 530px;

  overflow: hidden;

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

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

  color:
    var(--hawks-white);

  background:
    linear-gradient(
      145deg,
      var(--hawks-charcoal),
      var(--hawks-black)
    );

  box-shadow:
    var(--hawks-shadow-lg);

  isolation: isolate;
}


/* subtle ambient glow */

.hawks-reviews__aside::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -120px;

  z-index: -1;

  width: 330px;
  height: 330px;

  border-radius: 50%;

  pointer-events: none;

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


/* mineral texture */

.hawks-reviews__aside::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  opacity: 0.12;

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


.hawks-reviews__aside-inner {
  display: flex;
  flex-direction: column;

  justify-content: center;

  height: 100%;

  padding:
    clamp(
      30px,
      3.4vw,
      48px
    );
}


/* ==========================================================
   10. ASIDE ICON
   ========================================================== */

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

  width: 58px;
  height: 58px;

  margin-bottom: 34px;

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

  border-radius: 17px;

  color:
    var(--hawks-gold);

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


.hawks-reviews__aside-icon svg {
  width: 29px;
  height: 29px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   11. ASIDE COPY
   ========================================================== */

.hawks-reviews__aside-label {
  margin:
    0
    0
    14px;

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

  font-size: 0.79rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.hawks-reviews__aside h3 {
  max-width: 390px;

  margin:
    0
    0
    21px;

  color:
    var(--hawks-white);

  font-size:
    clamp(
      2.35rem,
      3.35vw,
      3.8rem
    );

  line-height: 0.96;

  letter-spacing:
    -0.018em;
}


.hawks-reviews__aside-copy {
  max-width: 410px;

  margin:
    0
    0
    31px;

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

  font-size: 0.96rem;

  line-height: 1.68;
}


/* ==========================================================
   12. ASIDE LINK
   ========================================================== */

.hawks-reviews__aside-link {
  display: inline-flex;
  align-items: center;

  align-self: flex-start;

  gap: 10px;

  color:
    var(--hawks-white);

  font-size: 0.96rem;

  font-weight:
    var(--hawks-weight-bold);
}


.hawks-reviews__aside-link svg {
  width: 19px;
  height: 19px;

  fill: none;

  stroke:
    var(--hawks-gold);

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

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


.hawks-reviews__aside-link:hover svg {
  transform:
    translateX(4px);
}


/* ==========================================================
   13. ASIDE ACCENT
   ========================================================== */

.hawks-reviews__aside-accent {
  position: absolute;

  right: 0;
  bottom: 0;

  width: 150px;
  height: 110px;

  overflow: hidden;

  pointer-events: none;
}


.hawks-reviews__aside-accent span {
  position: absolute;

  right: -48px;

  width: 180px;
  height: 3px;

  transform:
    rotate(-38deg);
}


.hawks-reviews__aside-accent
span:first-child {
  bottom: 42px;

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


.hawks-reviews__aside-accent
span:last-child {
  bottom: 21px;

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


/* ==========================================================
   14. ELFSIGHT SHELL
   ========================================================== */

.hawks-reviews__widget-shell {
  position: relative;

  display: flex;
  flex-direction: column;

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

  overflow: hidden;

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

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

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

  box-shadow:
    0 24px 68px
    rgba(7, 9, 12, 0.11);

  backdrop-filter:
    blur(12px);

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


/* gold edge */

.hawks-reviews__widget-shell::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

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


/* ==========================================================
   15. WIDGET HEADER
   ========================================================== */

.hawks-reviews__widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;

  padding:
    27px
    clamp(
      26px,
      3vw,
      38px
    );

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


.hawks-reviews__widget-kicker {
  display: block;

  margin-bottom: 4px;

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

  font-size: 0.73rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.hawks-reviews__widget-header p {
  margin: 0;

  color:
    var(--hawks-text);

  font-size: 1.05rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1.3;
}


/* ==========================================================
   16. WIDGET MARK
   ========================================================== */

.hawks-reviews__widget-mark {
  display: flex;
  align-items: center;

  gap: 6px;
}


.hawks-reviews__widget-mark span {
  display: block;

  border-radius:
    var(--hawks-radius-pill);
}


.hawks-reviews__widget-mark
span:first-child {
  width: 32px;
  height: 3px;

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


.hawks-reviews__widget-mark
span:last-child {
  width: 11px;
  height: 3px;

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


/* ==========================================================
   17. ELFSIGHT AREA
   ========================================================== */

.hawks-reviews__elfsight {
  display: flex;

  flex: 1;

  min-height: 390px;

  padding:
    clamp(
      24px,
      3vw,
      38px
    );
}


/* ==========================================================
   18. STATIC PLACEHOLDER
   NO LOADER / NO SHIMMER / NO ANIMATION
   ========================================================== */

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

  gap: 18px;

  width: 100%;
  min-height: 310px;

  padding: 36px;

  border:
    1px dashed
    rgba(23, 27, 32, 0.17);

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

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


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

  flex:
    0
    0
    52px;

  width: 52px;
  height: 52px;

  border-radius: 15px;

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

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


.hawks-reviews__placeholder-icon svg {
  width: 26px;
  height: 26px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-reviews__placeholder strong {
  display: block;

  margin-bottom: 4px;

  color:
    var(--hawks-text);

  font-size: 1rem;

  font-weight:
    var(--hawks-weight-bold);
}


.hawks-reviews__placeholder p {
  margin: 0;

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

  font-size: 0.9rem;
}


/* ==========================================================
   19. WIDGET FOOTER DECORATION
   ========================================================== */

.hawks-reviews__widget-footer {
  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    0
    clamp(
      26px,
      3vw,
      38px
    )
    27px;
}


.hawks-reviews__widget-footer span {
  height: 2px;

  border-radius:
    var(--hawks-radius-pill);
}


.hawks-reviews__widget-footer
span:nth-child(1) {
  width: 38px;

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


.hawks-reviews__widget-footer
span:nth-child(2) {
  width: 14px;

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


.hawks-reviews__widget-footer
span:nth-child(3) {
  width: 7px;

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


/* ==========================================================
   20. REDUCED MOTION
   ========================================================== */

html.reduce-motion
.hawks-reviews__quote,
html.reduce-motion
.hawks-reviews__aside-link svg {
  transition: none !important;
}


/* ==========================================================
   21. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-reviews__layout {
    grid-template-columns:
      minmax(320px, 0.37fr)
      minmax(0, 1fr);
  }

}


/* ==========================================================
   22. TABLET
   ========================================================== */

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

  .hawks-reviews__header {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(280px, 0.72fr);

    gap: 42px;
  }


  .hawks-reviews__heading h2 {
    font-size:
      clamp(
        3rem,
        6vw,
        4.5rem
      );
  }


  .hawks-reviews__layout {
    grid-template-columns:
      minmax(280px, 0.43fr)
      minmax(0, 1fr);

    gap: 20px;
  }


  .hawks-reviews__aside,
  .hawks-reviews__widget-shell {
    min-height: 500px;
  }


  .hawks-reviews__aside-inner {
    padding: 30px;
  }

}


/* ==========================================================
   23. MOBILE
   ========================================================== */

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

  .hawks-reviews__header {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 24px;

    margin-bottom: 40px;
  }


  .hawks-reviews__heading h2 {
    max-width: 620px;

    font-size:
      clamp(
        2.85rem,
        10vw,
        4rem
      );
  }


  .hawks-reviews__intro {
    max-width: 600px;
  }


  .hawks-reviews__layout {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  .hawks-reviews__aside {
    min-height: 390px;
  }


  .hawks-reviews__widget-shell {
    min-height: 480px;
  }


  .hawks-reviews__elfsight {
    min-height: 350px;
  }


  .hawks-reviews__placeholder {
    min-height: 285px;
  }


  .hawks-reviews__quote {
    right: -30px;

    opacity: 0.65;
  }

}


/* ==========================================================
   24. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hawks-reviews__header {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 21px;

    margin-bottom: 34px;
  }


  .hawks-reviews__eyebrow {
    margin-bottom: 14px;
  }


  .hawks-reviews__eyebrow p {
    font-size: 0.8rem;
  }


  .hawks-reviews__heading h2 {
    font-size:
      clamp(
        2.55rem,
        12vw,
        3.45rem
      );

    line-height: 0.93;
  }


  .hawks-reviews__intro p {
    font-size: 0.95rem;

    line-height: 1.62;
  }


  .hawks-reviews__layout {
    grid-template-columns: 1fr;

    gap: 15px;
  }


  .hawks-reviews__aside {
    min-height: 360px;

    border-radius: 20px;
  }


  .hawks-reviews__aside-inner {
    padding: 25px 22px;
  }


  .hawks-reviews__aside-icon {
    width: 50px;
    height: 50px;

    margin-bottom: 27px;

    border-radius: 14px;
  }


  .hawks-reviews__aside h3 {
    font-size:
      clamp(
        2.15rem,
        10vw,
        2.9rem
      );
  }


  .hawks-reviews__aside-copy {
    font-size: 0.91rem;
  }


  .hawks-reviews__widget-shell {
    min-height: 440px;

    border-radius: 20px;
  }


  .hawks-reviews__widget-header {
    padding:
      22px
      20px;
  }


  .hawks-reviews__widget-header p {
    font-size: 0.96rem;
  }


  .hawks-reviews__elfsight {
    min-height: 320px;

    padding: 18px;
  }


  .hawks-reviews__placeholder {
    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    min-height: 270px;

    padding: 25px;

    text-align: left;
  }


  .hawks-reviews__widget-footer {
    padding:
      0
      20px
      22px;
  }


  .hawks-reviews__quote {
    top: 90px;
    right: -40px;

    font-size: 11rem;
  }

}


















































/* ==========================================================
   REMODELING HAWKS LLC
   08. SERVICE AREAS
   ========================================================== */


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

.hawks-areas {
  position: relative;

  padding:
    var(--hawks-section-space)
    0;

  overflow: hidden;

  color:
    var(--hawks-white);

  background:
    linear-gradient(
      138deg,
      var(--hawks-black) 0%,
      var(--hawks-charcoal) 54%,
      #151c24 100%
    );

  isolation: isolate;
}


.hawks-areas::before {
  content: "";

  position: absolute;

  top: -340px;
  right: -270px;

  z-index: -3;

  width: 760px;
  height: 760px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.15),
      rgba(4, 88, 204, 0.035) 42%,
      transparent 70%
    );

  filter:
    blur(12px);
}


.hawks-areas::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  pointer-events: none;

  opacity: 0.1;

  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='.1'/%3E%3C/svg%3E");
}


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

.hawks-areas__decoration {
  position: absolute;

  top: 0;
  right: 0;

  width: 220px;
  height: 170px;

  overflow: hidden;

  pointer-events: none;
}


.hawks-areas__decoration span {
  position: absolute;

  right: -70px;

  width: 230px;
  height: 2px;

  transform:
    rotate(-40deg);
}


.hawks-areas__decoration span:nth-child(1) {
  top: 46px;

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


.hawks-areas__decoration span:nth-child(2) {
  top: 68px;

  opacity: 0.72;

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


.hawks-areas__decoration span:nth-child(3) {
  top: 90px;

  opacity: 0.17;

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


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

.hawks-areas__header {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(320px, 0.64fr);

  align-items: end;

  gap:
    clamp(
      48px,
      7vw,
      108px
    );

  margin-bottom:
    clamp(
      46px,
      5vw,
      70px
    );
}


.hawks-areas__heading {
  max-width: 790px;
}


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

.hawks-areas__eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 18px;
}


.hawks-areas__eyebrow > span {
  width: 35px;
  height: 2px;

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

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


.hawks-areas__eyebrow p {
  margin: 0;

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

  font-size: 0.9rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


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

.hawks-areas__heading h2 {
  max-width: 780px;

  margin: 0;

  color:
    var(--hawks-white);

  font-size:
    clamp(
      3.25rem,
      5.15vw,
      5.55rem
    );

  line-height: 0.92;

  letter-spacing:
    -0.024em;
}


.hawks-areas__heading h2 span {
  display: block;

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


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

.hawks-areas__intro {
  max-width: 530px;
}


.hawks-areas__intro p {
  margin: 0;

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

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

  line-height: 1.72;
}


/* ==========================================================
   07. MAIN LAYOUT
   ========================================================== */

.hawks-areas__layout {
  position: relative;

  z-index: 2;

  display: grid;

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

  gap:
    clamp(
      20px,
      2.4vw,
      34px
    );

  align-items: stretch;
}


/* ==========================================================
   08. INFORMATION PANEL
   ========================================================== */

.hawks-areas-panel {
  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

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

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

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

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.18);

  backdrop-filter:
    blur(14px);

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


.hawks-areas-panel__top {
  padding:
    clamp(
      28px,
      3vw,
      40px
    )
    clamp(
      25px,
      3vw,
      38px
    )
    25px;

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


.hawks-areas-panel__kicker {
  display: block;

  margin-bottom: 10px;

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

  font-size: 0.78rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.hawks-areas-panel__top h3 {
  margin:
    0
    0
    13px;

  color:
    var(--hawks-white);

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

  line-height: 0.98;
}


.hawks-areas-panel__top p {
  margin: 0;

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

  font-size: 0.94rem;

  line-height: 1.62;
}


/* ==========================================================
   09. CITY LIST
   ========================================================== */

.hawks-areas-list {
  flex: 1;

  padding:
    8px
    14px;
}


.hawks-area-item {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 13px;

  width: 100%;

  min-height: 61px;

  padding:
    11px
    12px;

  border: 0;

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

  border-radius: 10px;

  color:
    var(--hawks-white);

  background:
    transparent;

  text-align: left;

  cursor: pointer;

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


.hawks-area-item:last-child {
  border-bottom-color:
    transparent;
}


.hawks-area-item:hover {
  background:
    rgba(255, 255, 255, 0.05);
}


.hawks-area-item.is-active {
  background:
    rgba(242, 180, 14, 0.09);
}


.hawks-area-item__marker {
  position: relative;

  display: block;

  width: 10px;
  height: 10px;

  border:
    2px solid
    rgba(255, 255, 255, 0.42);

  border-radius: 50%;

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


.hawks-area-item.is-active
.hawks-area-item__marker {
  border-color:
    var(--hawks-gold);

  background:
    var(--hawks-gold);

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


.hawks-area-item__content {
  display: flex;
  flex-direction: column;

  min-width: 0;

  gap: 2px;
}


.hawks-area-item__content strong {
  font-size: 0.96rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1.2;
}


.hawks-area-item__content small {
  color:
    rgba(255, 255, 255, 0.48);

  font-size: 0.78rem;

  line-height: 1.25;
}


.hawks-area-item__arrow {
  color:
    rgba(255, 255, 255, 0.37);

  font-size: 1.05rem;

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


.hawks-area-item:hover
.hawks-area-item__arrow,
.hawks-area-item.is-active
.hawks-area-item__arrow {
  color:
    var(--hawks-gold);

  transform:
    translateX(3px);
}


/* ==========================================================
   10. PANEL FOOTER
   ========================================================== */

.hawks-areas-panel__footer {
  padding:
    24px
    clamp(
      25px,
      3vw,
      38px
    )
    29px;

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


.hawks-areas-panel__radius {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 20px;
}


.hawks-areas-panel__radius-icon {
  display: grid;
  place-items: center;

  flex:
    0
    0
    43px;

  width: 43px;
  height: 43px;

  border-radius: 13px;

  color:
    var(--hawks-gold);

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


.hawks-areas-panel__radius-icon svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.6;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-areas-panel__radius > span:last-child {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.hawks-areas-panel__radius small {
  color:
    rgba(255, 255, 255, 0.48);

  font-size: 0.75rem;

  font-weight:
    var(--hawks-weight-semibold);

  line-height: 1;
}


.hawks-areas-panel__radius strong {
  color:
    var(--hawks-white);

  font-size: 0.92rem;

  line-height: 1.3;
}


.hawks-areas-panel__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  width: 100%;

  min-height: 51px;

  padding:
    13px
    17px;

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

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

  color:
    var(--hawks-black);

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

  font-size: 0.91rem;

  font-weight:
    var(--hawks-weight-bold);

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


.hawks-areas-panel__cta:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 15px 32px
    rgba(201, 140, 0, 0.2);
}


.hawks-areas-panel__cta svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   11. MAP CARD
   ========================================================== */

.hawks-map-card {
  position: relative;

  display: flex;
  flex-direction: column;

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

  overflow: hidden;

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

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

  background:
    var(--hawks-ivory);

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.24);
}


/* ==========================================================
   12. MAP TOP BAR
   ========================================================== */

.hawks-map-card__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  min-height: 79px;

  padding:
    17px
    22px
    17px
    26px;

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

  color:
    var(--hawks-text);

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


.hawks-map-card__topbar > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.hawks-map-card__topbar span {
  color:
    var(--hawks-text-soft);

  font-size: 0.75rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.hawks-map-card__topbar strong {
  font-size: 1rem;

  line-height: 1.3;
}


/* ==========================================================
   13. RESET BUTTON
   ========================================================== */

.hawks-map-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 42px;

  padding:
    9px
    13px;

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

  border-radius: 10px;

  color:
    var(--hawks-text);

  background:
    var(--hawks-white);

  cursor: pointer;

  font-size: 0.82rem;

  font-weight:
    var(--hawks-weight-bold);

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


.hawks-map-reset:hover {
  border-color:
    rgba(242, 180, 14, 0.42);

  background:
    #fffdf7;

  transform:
    translateY(-1px);
}


.hawks-map-reset svg {
  width: 18px;
  height: 18px;

  fill: none;

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

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   14. MAP
   Leaflet requires an explicit height.
   ========================================================== */

.hawks-service-map {
  position: relative;

  flex: 1;

  width: 100%;
  min-height: 570px;

  z-index: 1;

  background:
    #e9e9e6;
}


/*
  Slightly calm the default map colors so it works
  with the Remodeling Hawks palette.
*/

.hawks-service-map
.leaflet-tile-pane {
  filter:
    saturate(0.72)
    contrast(0.96)
    brightness(1.02);
}


/* ==========================================================
   15. MAP FALLBACK
   ========================================================== */

.hawks-service-map__fallback {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  padding: 30px;

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

  background:
    var(--hawks-ivory);

  font-size: 1rem;

  text-align: center;
}


/* ==========================================================
   16. LEAFLET CONTROLS
   ========================================================== */

.hawks-service-map
.leaflet-control-zoom {
  overflow: hidden;

  border: 0;

  border-radius: 12px;

  box-shadow:
    0 10px 28px
    rgba(7, 9, 12, 0.14);
}


.hawks-service-map
.leaflet-control-zoom a {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

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

  color:
    var(--hawks-text);

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

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

  font-size: 1.25rem;

  line-height: 1;
}


.hawks-service-map
.leaflet-control-zoom a:hover {
  color:
    var(--hawks-black);

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


.hawks-service-map
.leaflet-control-attribution {
  padding:
    4px 7px;

  color:
    #5f646b;

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

  font-size: 10px;
}


/* ==========================================================
   17. CUSTOM LEAFLET MARKER
   ========================================================== */

.hawks-leaflet-marker-wrap {
  background: transparent;
  border: 0;
}


.hawks-leaflet-marker {
  position: relative;

  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  border:
    3px solid
    var(--hawks-white);

  border-radius:
    50% 50% 50% 8px;

  background:
    var(--hawks-gold);

  box-shadow:
    0 8px 20px
    rgba(7, 9, 12, 0.28);

  transform:
    rotate(-45deg);

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


.hawks-leaflet-marker::after {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--hawks-black);

  transform:
    rotate(45deg);
}


.hawks-leaflet-marker.is-selected {
  background:
    var(--hawks-blue-soft);

  transform:
    rotate(-45deg)
    scale(1.14);
}


/* ==========================================================
   18. LEAFLET POPUP
   ========================================================== */

.hawks-service-map
.leaflet-popup-content-wrapper {
  border-radius: 14px;

  color:
    var(--hawks-text);

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

  box-shadow:
    0 18px 42px
    rgba(7, 9, 12, 0.18);
}


.hawks-service-map
.leaflet-popup-content {
  min-width: 180px;

  margin:
    16px
    18px;

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


.hawks-map-popup {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.hawks-map-popup strong {
  color:
    var(--hawks-text);

  font-size: 1rem;
}


.hawks-map-popup span {
  color:
    var(--hawks-text-soft);

  font-size: 0.8rem;

  line-height: 1.45;
}


.hawks-service-map
.leaflet-popup-tip {
  background:
    var(--hawks-white);
}


/* ==========================================================
   19. MAP LEGEND
   ========================================================== */

.hawks-map-legend {
  display: flex;
  align-items: center;

  gap: 28px;

  min-height: 67px;

  padding:
    15px
    24px;

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

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


.hawks-map-legend > div {
  display: flex;
  align-items: center;

  gap: 9px;
}


.hawks-map-legend p {
  margin: 0;

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

  font-size: 0.81rem;

  font-weight:
    var(--hawks-weight-semibold);
}


.hawks-map-legend__pin {
  width: 11px;
  height: 11px;

  border:
    2px solid
    var(--hawks-white);

  border-radius: 50%;

  background:
    var(--hawks-gold);

  box-shadow:
    0 0 0 1px
    var(--hawks-gold);
}


.hawks-map-legend__radius {
  width: 20px;
  height: 10px;

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

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

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


/* ==========================================================
   20. NOTE
   ========================================================== */

.hawks-areas__note {
  position: relative;

  z-index: 2;

  max-width: 900px;

  margin:
    24px
    auto
    0;

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

  font-size: 0.8rem;

  line-height: 1.55;

  text-align: center;
}


/* ==========================================================
   21. REDUCED MOTION
   ========================================================== */

html.reduce-motion
.hawks-area-item,
html.reduce-motion
.hawks-area-item__marker,
html.reduce-motion
.hawks-area-item__arrow,
html.reduce-motion
.hawks-map-reset,
html.reduce-motion
.hawks-leaflet-marker {
  transition: none !important;
}


/* ==========================================================
   22. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-areas__layout {
    grid-template-columns:
      minmax(350px, 0.38fr)
      minmax(0, 1fr);
  }


  .hawks-map-card {
    min-height: 720px;
  }

}


/* ==========================================================
   23. TABLET
   ========================================================== */

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

  .hawks-areas__header {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(280px, 0.72fr);

    gap: 42px;
  }


  .hawks-areas__heading h2 {
    font-size:
      clamp(
        3rem,
        6vw,
        4.45rem
      );
  }


  .hawks-areas__layout {
    grid-template-columns:
      310px
      minmax(0, 1fr);

    gap: 18px;
  }


  .hawks-areas-panel__top {
    padding:
      27px
      23px
      22px;
  }


  .hawks-areas-list {
    padding:
      7px
      10px;
  }


  .hawks-area-item {
    min-height: 57px;

    padding:
      9px
      10px;
  }


  .hawks-area-item__content small {
    font-size: 0.73rem;
  }


  .hawks-areas-panel__footer {
    padding:
      21px
      22px
      24px;
  }


  .hawks-map-card {
    min-height: 690px;
  }


  .hawks-service-map {
    min-height: 540px;
  }

}


/* ==========================================================
   24. MOBILE
   ========================================================== */

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

  .hawks-areas__header {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 24px;

    margin-bottom: 40px;
  }


  .hawks-areas__heading h2 {
    max-width: 630px;

    font-size:
      clamp(
        2.85rem,
        10vw,
        4rem
      );
  }


  .hawks-areas__intro {
    max-width: 610px;
  }


  .hawks-areas__layout {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  /*
    On mobile, map goes first visually without
    changing the accessible HTML reading order.
  */

  .hawks-map-card {
    grid-row: 1;

    min-height: 560px;
  }


  .hawks-areas-panel {
    grid-row: 2;
  }


  .hawks-service-map {
    min-height: 420px;
  }


  .hawks-areas-list {
    display: grid;

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

    gap: 4px 8px;

    padding: 13px;
  }


  .hawks-area-item {
    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.07);
  }

}


/* ==========================================================
   25. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hawks-areas__header {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 21px;

    margin-bottom: 34px;
  }


  .hawks-areas__eyebrow {
    margin-bottom: 14px;
  }


  .hawks-areas__eyebrow p {
    font-size: 0.8rem;
  }


  .hawks-areas__heading h2 {
    font-size:
      clamp(
        2.55rem,
        12vw,
        3.45rem
      );

    line-height: 0.93;
  }


  .hawks-areas__intro p {
    font-size: 0.95rem;

    line-height: 1.62;
  }


  .hawks-areas__layout {
    grid-template-columns: 1fr;

    gap: 15px;
  }


  .hawks-map-card {
    grid-row: 1;

    min-height: 510px;

    border-radius: 20px;
  }


  .hawks-areas-panel {
    grid-row: 2;

    border-radius: 20px;
  }


  .hawks-map-card__topbar {
    min-height: 68px;

    padding:
      13px
      15px;
  }


  .hawks-map-card__topbar strong {
    font-size: 0.91rem;
  }


  .hawks-map-reset {
    min-width: 42px;

    padding:
      9px;
  }


  .hawks-map-reset span {
    display: none;
  }


  .hawks-service-map {
    min-height: 380px;
  }


  .hawks-map-legend {
    gap: 16px;

    min-height: 61px;

    padding:
      12px
      15px;

    flex-wrap: wrap;
  }


  .hawks-map-legend p {
    font-size: 0.73rem;
  }


  .hawks-areas-panel__top {
    padding:
      25px
      21px
      21px;
  }


  .hawks-areas-list {
    padding:
      9px
      11px;
  }


  .hawks-area-item {
    min-height: 58px;

    padding:
      10px
      8px;
  }


  .hawks-area-item__content strong {
    font-size: 0.92rem;
  }


  .hawks-area-item__content small {
    font-size: 0.71rem;
  }


  .hawks-areas-panel__footer {
    padding:
      21px;
  }


  .hawks-areas__note {
    margin-top: 19px;

    font-size: 0.76rem;
  }

}
















































/* ==========================================================
   REMODELING HAWKS LLC
   08. SERVICE AREAS
   ========================================================== */


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

.hawks-areas {
  position: relative;

  padding:
    var(--hawks-section-space)
    0;

  overflow: hidden;

  color:
    var(--hawks-white);

  background:
    linear-gradient(
      135deg,
      var(--hawks-black) 0%,
      var(--hawks-charcoal) 54%,
      #151c24 100%
    );

  isolation: isolate;
}


/* SUBTLE GOLD LIGHT */

.hawks-areas::before {
  content: "";

  position: absolute;

  top: -340px;
  left: -280px;

  z-index: -2;

  width: 760px;
  height: 760px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(242, 180, 14, 0.11),
      rgba(242, 180, 14, 0.025) 44%,
      transparent 70%
    );

  filter:
    blur(18px);
}


/* TEXTURE */

.hawks-areas::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

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


/* ==========================================================
   02. HEADER
   ========================================================== */

.hawks-areas__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(320px, 0.64fr);

  align-items: end;

  gap:
    clamp(
      48px,
      7vw,
      110px
    );

  margin-bottom:
    clamp(
      44px,
      5vw,
      68px
    );
}


/* ==========================================================
   03. EYEBROW
   ========================================================== */

.hawks-areas__eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 18px;
}


.hawks-areas__eyebrow > span {
  display: block;

  width: 35px;
  height: 2px;

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

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


.hawks-areas__eyebrow p {
  margin: 0;

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

  font-size: 0.9rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


/* ==========================================================
   04. TITLE
   ========================================================== */

.hawks-areas__heading h2 {
  max-width: 820px;

  margin: 0;

  color:
    var(--hawks-white);

  font-size:
    clamp(
      3.3rem,
      5.15vw,
      5.55rem
    );

  line-height:
    0.92;

  letter-spacing:
    -0.025em;
}


.hawks-areas__heading h2 span {
  display: block;

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


/* ==========================================================
   05. INTRO
   ========================================================== */

.hawks-areas__intro {
  max-width: 540px;
}


.hawks-areas__intro > p {
  margin:
    0
    0
    14px;

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

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

  line-height:
    1.7;
}


.hawks-areas__coverage-note {
  position: relative;

  padding-left: 18px;

  font-size:
    0.9rem !important;

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


.hawks-areas__coverage-note::before {
  content: "";

  position: absolute;

  top: 0.46em;
  left: 0;

  width: 6px;
  height: 6px;

  border-radius: 50%;

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


/* ==========================================================
   06. LAYOUT
   ========================================================== */

.hawks-areas__layout {
  display: grid;

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

  gap:
    clamp(
      20px,
      2.4vw,
      34px
    );

  align-items: stretch;
}


/* ==========================================================
   07. PANEL
   ========================================================== */

.hawks-areas__panel {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;

  min-height: 640px;

  padding:
    clamp(
      27px,
      3vw,
      38px
    );

  overflow: hidden;

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

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

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    var(--hawks-shadow-dark);

  backdrop-filter:
    blur(12px);

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


/* GOLD TOP ACCENT */

.hawks-areas__panel::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 42%;
  height: 2px;

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


/* ==========================================================
   08. PANEL TOP
   ========================================================== */

.hawks-areas__panel-top {
  display: flex;
  align-items: center;

  gap: 17px;

  margin-bottom: 22px;
}


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

  flex:
    0
    0
    52px;

  width: 52px;
  height: 52px;

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

  border-radius: 15px;

  color:
    var(--hawks-gold);

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


.hawks-areas__coverage-icon svg {
  width: 27px;
  height: 27px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-areas__panel-kicker {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.72rem;

  font-weight:
    var(--hawks-weight-bold);

  letter-spacing:
    0.11em;

  line-height: 1;

  text-transform:
    uppercase;
}


.hawks-areas__panel h3 {
  margin: 0;

  color:
    var(--hawks-white);

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

  font-size:
    1.12rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height:
    1.25;
}


.hawks-areas__panel-copy {
  margin:
    0
    0
    25px;

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

  font-size: 0.91rem;

  line-height: 1.58;
}


/* ==========================================================
   09. CITY LIST
   ========================================================== */

.hawks-area-list {
  display: grid;

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

  gap: 8px;

  margin-bottom: 25px;
}


.hawks-area-city {
  position: relative;

  display: flex;
  align-items: center;

  gap: 9px;

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

  padding:
    10px
    11px;

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

  border-radius:
    11px;

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

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

  font-size:
    0.82rem;

  font-weight:
    var(--hawks-weight-semibold);

  text-align: left;

  cursor: pointer;

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


.hawks-area-city:hover {
  color:
    var(--hawks-white);

  border-color:
    rgba(242, 180, 14, 0.25);

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

  transform:
    translateY(-1px);
}


.hawks-area-city.is-active {
  color:
    var(--hawks-black);

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

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


.hawks-area-city__dot {
  flex:
    0
    0
    7px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--hawks-gold);

  box-shadow:
    0 0 0 4px
    rgba(242, 180, 14, 0.08);
}


.hawks-area-city.is-active
.hawks-area-city__dot {
  background:
    var(--hawks-black);

  box-shadow:
    0 0 0 4px
    rgba(7, 9, 12, 0.1);
}


/* ==========================================================
   10. RESET BUTTON
   ========================================================== */

.hawks-areas__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  width: 100%;
  min-height: 48px;

  margin-top: auto;

  padding:
    11px
    16px;

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

  border-radius:
    11px;

  color:
    var(--hawks-white);

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

  font-size:
    0.87rem;

  font-weight:
    var(--hawks-weight-bold);

  cursor: pointer;

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


.hawks-areas__reset:hover {
  border-color:
    rgba(242, 180, 14, 0.31);

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


.hawks-areas__reset svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke:
    var(--hawks-gold);

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   11. CONTACT
   ========================================================== */

.hawks-areas__contact {
  margin-top: 20px;

  padding-top: 20px;

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


.hawks-areas__contact > span {
  display: block;

  margin-bottom: 7px;

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

  font-size: 0.76rem;
}


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

  gap: 8px;

  color:
    var(--hawks-white);

  font-size: 0.86rem;

  font-weight:
    var(--hawks-weight-bold);
}


.hawks-areas__contact svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke:
    var(--hawks-gold);

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

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


.hawks-areas__contact a:hover svg {
  transform:
    translateX(3px);
}


/* ==========================================================
   12. MAP SHELL
   ========================================================== */

.hawks-areas__map-shell {
  position: relative;

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

  overflow: hidden;

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

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

  background:
    var(--hawks-panel);

  box-shadow:
    var(--hawks-shadow-dark);
}


/* ==========================================================
   13. MAP TOPBAR
   ========================================================== */

.hawks-areas__map-topbar {
  position: absolute;

  z-index: 700;

  top: 18px;
  left: 18px;
  right: 18px;

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

  gap: 20px;

  padding:
    13px
    15px;

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

  border-radius:
    13px;

  color:
    var(--hawks-white);

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

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

  backdrop-filter:
    blur(14px);

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

  pointer-events: none;
}


.hawks-areas__map-topbar span {
  display: block;

  margin-bottom: 3px;

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

  font-size: 0.7rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.hawks-areas__map-topbar strong {
  color:
    var(--hawks-white);

  font-size: 0.9rem;

  line-height: 1.2;
}


/* ==========================================================
   14. LEGEND
   ========================================================== */

.hawks-areas__map-legend {
  display: flex;
  align-items: center;

  gap: 8px;

  flex:
    0
    0
    auto;
}


.hawks-areas__map-legend span:last-child {
  margin: 0;

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

  letter-spacing: 0;

  text-transform: none;
}


.hawks-areas__legend-marker {
  width: 10px;
  height: 10px;

  border:
    2px solid
    var(--hawks-black);

  border-radius: 50%;

  background:
    var(--hawks-gold);

  box-shadow:
    0 0 0 3px
    rgba(242, 180, 14, 0.25);
}


/* ==========================================================
   15. MAP
   Defined height is mandatory for Leaflet.
   ========================================================== */

.hawks-areas__map {
  width: 100%;
  height: 640px;

  min-height: 640px;

  background:
    #dfe3e5;
}


/* ==========================================================
   16. MAP HELP
   ========================================================== */

.hawks-areas__map-help {
  position: absolute;

  z-index: 700;

  left: 18px;
  bottom: 18px;

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

  gap: 7px;

  padding:
    9px
    12px;

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

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

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

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

  backdrop-filter:
    blur(10px);

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

  font-size: 0.7rem;

  pointer-events: none;
}


/* ==========================================================
   17. LEAFLET MARKER
   ========================================================== */

.hawks-marker-wrapper {
  background: transparent !important;

  border: 0 !important;
}


.hawks-map-marker {
  position: relative;

  display: grid;
  place-items: center;

  width: 28px;
  height: 28px;

  border:
    3px solid
    var(--hawks-white);

  border-radius:
    50% 50% 50% 0;

  background:
    var(--hawks-gold);

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

  transform:
    rotate(-45deg);
}


.hawks-map-marker::before {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

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


.hawks-map-marker--primary {
  width: 34px;
  height: 34px;

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

  box-shadow:
    0 8px 22px
    rgba(7, 9, 12, 0.35),
    0 0 0 6px
    rgba(242, 180, 14, 0.19);
}


/* ==========================================================
   18. LEAFLET POPUP
   ========================================================== */

.hawks-areas
.leaflet-popup-content-wrapper {
  overflow: hidden;

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

  border-radius:
    14px;

  background:
    var(--hawks-white);

  box-shadow:
    0 18px 46px
    rgba(7, 9, 12, 0.19);
}


.hawks-areas
.leaflet-popup-content {
  min-width: 180px;

  margin: 0;

  padding:
    16px
    17px;
}


.hawks-map-popup__label {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.65rem;

  font-weight:
    var(--hawks-weight-bold);

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.hawks-map-popup__city {
  display: block;

  margin-bottom: 5px;

  color:
    var(--hawks-text);

  font-size: 1rem;

  font-weight:
    var(--hawks-weight-bold);
}


.hawks-map-popup__copy {
  margin: 0;

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

  font-size: 0.76rem;

  line-height: 1.45;
}


.hawks-areas
.leaflet-popup-tip {
  background:
    var(--hawks-white);
}


/* ==========================================================
   19. LEAFLET TOOLTIP
   ========================================================== */

.hawks-areas
.leaflet-tooltip {
  padding:
    7px
    10px;

  border:
    0;

  border-radius:
    8px;

  color:
    var(--hawks-white);

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

  box-shadow:
    0 8px 18px
    rgba(7, 9, 12, 0.17);

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

  font-size:
    0.72rem;

  font-weight:
    var(--hawks-weight-bold);
}


/* ==========================================================
   20. LEAFLET CONTROLS
   ========================================================== */

.hawks-areas
.leaflet-control-zoom {
  overflow: hidden;

  border:
    1px solid
    rgba(7, 9, 12, 0.12) !important;

  border-radius:
    11px !important;

  box-shadow:
    0 9px 24px
    rgba(7, 9, 12, 0.17) !important;
}


.hawks-areas
.leaflet-control-zoom a {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  color:
    var(--hawks-text);

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

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

  font-size: 1.15rem;

  line-height: 1;

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


.hawks-areas
.leaflet-control-zoom a:hover {
  color:
    var(--hawks-black);

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


.hawks-areas
.leaflet-control-attribution {
  padding:
    3px
    6px;

  color:
    #59616a;

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

  font-size:
    9px;
}


/* ==========================================================
   21. APPROXIMATE RADIUS
   ========================================================== */

.hawks-service-radius {
  filter:
    drop-shadow(
      0 0 5px
      rgba(242, 180, 14, 0.12)
    );
}


/* ==========================================================
   22. DISCLAIMER
   ========================================================== */

.hawks-areas__disclaimer {
  max-width: 840px;

  margin:
    22px
    auto
    0;

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

  font-size: 0.76rem;

  line-height: 1.55;

  text-align: center;
}


/* ==========================================================
   23. REDUCED MOTION
   ========================================================== */

html.reduce-motion
.hawks-area-city,
html.reduce-motion
.hawks-areas__contact svg {
  transition: none !important;
}


/* ==========================================================
   24. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-areas__layout {
    grid-template-columns:
      minmax(350px, 0.38fr)
      minmax(0, 1fr);
  }

}


/* ==========================================================
   25. TABLET
   ========================================================== */

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

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

    gap: 42px;
  }


  .hawks-areas__heading h2 {
    font-size:
      clamp(
        3rem,
        6vw,
        4.5rem
      );
  }


  .hawks-areas__layout {
    grid-template-columns:
      minmax(290px, 0.42fr)
      minmax(0, 1fr);

    gap: 18px;
  }


  .hawks-areas__panel,
  .hawks-areas__map-shell {
    min-height: 590px;
  }


  .hawks-areas__map {
    height: 590px;

    min-height: 590px;
  }


  .hawks-area-list {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   26. MOBILE
   ========================================================== */

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

  .hawks-areas__header {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 24px;

    margin-bottom: 40px;
  }


  .hawks-areas__heading h2 {
    font-size:
      clamp(
        2.85rem,
        10vw,
        4rem
      );
  }


  .hawks-areas__layout {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  .hawks-areas__panel {
    min-height: auto;
  }


  .hawks-area-list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .hawks-areas__map-shell {
    min-height: 520px;
  }


  .hawks-areas__map {
    height: 520px;

    min-height: 520px;
  }


  .hawks-areas__map-topbar {
    top: 14px;
    left: 14px;
    right: 14px;
  }

}


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

@media (max-width: 480px) {

  .hawks-areas__header {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 21px;

    margin-bottom: 34px;
  }


  .hawks-areas__eyebrow {
    margin-bottom: 14px;
  }


  .hawks-areas__eyebrow p {
    font-size: 0.8rem;
  }


  .hawks-areas__heading h2 {
    font-size:
      clamp(
        2.55rem,
        12vw,
        3.45rem
      );

    line-height: 0.93;
  }


  .hawks-areas__intro > p {
    font-size: 0.95rem;

    line-height: 1.62;
  }


  .hawks-areas__layout {
    grid-template-columns: 1fr;

    gap: 15px;
  }


  .hawks-areas__panel {
    min-height: auto;

    padding:
      23px
      19px;

    border-radius: 20px;
  }


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

    gap: 7px;
  }


  .hawks-area-city {
    min-height: 44px;

    padding:
      9px
      10px;

    font-size: 0.78rem;
  }


  .hawks-areas__map-shell {
    min-height: 470px;

    border-radius: 20px;
  }


  .hawks-areas__map {
    height: 470px;

    min-height: 470px;
  }


  .hawks-areas__map-topbar {
    top: 11px;
    left: 11px;
    right: 11px;

    padding:
      11px
      12px;
  }


  .hawks-areas__map-topbar strong {
    font-size: 0.8rem;
  }


  .hawks-areas__map-legend {
    display: none;
  }


  .hawks-areas__map-help {
    left: 11px;
    bottom: 11px;

    font-size: 0.64rem;
  }

}


/* ==========================================================
   LEAFLET — CRITICAL MAP SIZE FIX
   ========================================================== */

#hawks-service-map {
  position: relative;

  display: block;

  width: 100%;
  height: 640px;
  min-height: 640px;

  z-index: 1;

  overflow: hidden;

  background: #d9dde1;
}


#hawks-service-map.leaflet-container {
  width: 100%;
  height: 640px;
  min-height: 640px;
}


.hawks-areas__map-shell {
  position: relative;

  width: 100%;
  min-width: 0;

  height: 640px;
  min-height: 640px;

  overflow: hidden;
}


/* ==========================================================
   COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  #hawks-service-map,
  #hawks-service-map.leaflet-container,
  .hawks-areas__map-shell {
    height: 640px;
    min-height: 640px;
  }

}


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

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

  #hawks-service-map,
  #hawks-service-map.leaflet-container,
  .hawks-areas__map-shell {
    height: 590px;
    min-height: 590px;
  }

}


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

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

  #hawks-service-map,
  #hawks-service-map.leaflet-container,
  .hawks-areas__map-shell {
    height: 520px;
    min-height: 520px;
  }

}


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

@media (max-width: 480px) {

  #hawks-service-map,
  #hawks-service-map.leaflet-container,
  .hawks-areas__map-shell {
    height: 470px;
    min-height: 470px;
  }

}

















































/* ==========================================================
   REMODELING HAWKS LLC
   09. FOOTER
   ========================================================== */


/* ==========================================================
   01. FOOTER
   ========================================================== */

.hawks-footer {
  position: relative;

  overflow: hidden;

  color:
    var(--hawks-white);

  background:
    var(--hawks-black);

  isolation: isolate;
}


/* subtle mineral texture */

.hawks-footer::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  pointer-events: none;

  opacity: 0.12;

  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='.11'/%3E%3C/svg%3E");
}


/* subtle blue ambient light */

.hawks-footer::after {
  content: "";

  position: absolute;

  right: -320px;
  top: -350px;

  z-index: -3;

  width: 720px;
  height: 720px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(4, 88, 204, 0.1),
      rgba(4, 88, 204, 0.025) 44%,
      transparent 70%
    );

  filter:
    blur(16px);
}


/* ==========================================================
   02. TOP BRAND ACCENT
   ========================================================== */

.hawks-footer__accent {
  position: absolute;

  top: 0;
  left: 0;

  z-index: 4;

  display: flex;

  width: 100%;
  height: 3px;

  pointer-events: none;
}


.hawks-footer__accent span {
  display: block;

  height: 100%;
}


.hawks-footer__accent
span:nth-child(1) {
  width: 32%;

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


.hawks-footer__accent
span:nth-child(2) {
  width: 10%;

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


.hawks-footer__accent
span:nth-child(3) {
  flex: 1;

  background:
    linear-gradient(
      90deg,
      var(--hawks-blue),
      transparent 70%
    );
}


/* ==========================================================
   03. MAIN
   ========================================================== */

.hawks-footer__main {
  padding:
    clamp(
      72px,
      7vw,
      105px
    )
    0
    clamp(
      58px,
      6vw,
      84px
    );
}


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

.hawks-footer__grid {
  display: grid;

  grid-template-columns:
    minmax(300px, 1.3fr)
    minmax(170px, 0.55fr)
    minmax(230px, 0.7fr)
    minmax(230px, 0.72fr);

  gap:
    clamp(
      40px,
      5vw,
      78px
    );
}


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

.hawks-footer__brand {
  max-width: 390px;
}


.hawks-footer__logo {
  display: inline-flex;

  margin-bottom: 25px;
}


.hawks-footer__logo img {
  display: block;

  width: min(220px, 100%);
  height: auto;
}


.hawks-footer__description {
  max-width: 380px;

  margin:
    0
    0
    30px;

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

  font-size: 0.95rem;

  line-height: 1.68;
}


/* ==========================================================
   06. CONTACT
   ========================================================== */

.hawks-footer__contact {
  display: flex;
  flex-direction: column;

  gap: 11px;
}


.hawks-footer__contact-item {
  display: flex;
  align-items: center;

  gap: 12px;

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


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

  flex:
    0
    0
    38px;

  width: 38px;
  height: 38px;

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

  border-radius: 10px;

  color:
    var(--hawks-gold);

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

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


.hawks-footer__contact-item:hover
.hawks-footer__contact-icon {
  border-color:
    rgba(242, 180, 14, 0.25);

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


.hawks-footer__contact-icon svg {
  width: 19px;
  height: 19px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-footer__contact-item small {
  display: block;

  margin-bottom: 2px;

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

  font-size: 0.68rem;

  font-weight:
    var(--hawks-weight-semibold);

  line-height: 1;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.hawks-footer__contact-item strong {
  display: block;

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

  font-size: 0.84rem;

  line-height: 1.25;

  transition:
    color
      180ms
      ease;
}


.hawks-footer__contact-item:hover
strong {
  color:
    var(--hawks-white);
}


/* ==========================================================
   07. COLUMN TITLE
   ========================================================== */

.hawks-footer__title {
  position: relative;

  margin:
    5px
    0
    27px;

  padding-bottom: 15px;

  color:
    var(--hawks-white);

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

  font-size: 1rem;

  font-weight:
    var(--hawks-weight-bold);

  line-height: 1.2;
}


.hawks-footer__title::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 32px;
  height: 2px;

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

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


.hawks-footer__title::after {
  content: "";

  position: absolute;

  left: 37px;
  bottom: 0;

  width: 8px;
  height: 2px;

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


/* ==========================================================
   08. QUICK LINKS
   ========================================================== */

.hawks-footer__links {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 12px;
}


.hawks-footer__links a {
  position: relative;

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

  padding-left: 15px;

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

  font-size: 0.9rem;

  font-weight:
    var(--hawks-weight-medium);

  line-height: 1.4;

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


.hawks-footer__links a::before {
  content: "";

  position: absolute;

  left: 0;

  width: 5px;
  height: 5px;

  border-radius: 50%;

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

  transition:
    background-color
      200ms
      ease,
    transform
      260ms
      var(--hawks-ease);
}


.hawks-footer__links a:hover {
  color:
    var(--hawks-white);

  transform:
    translateX(3px);
}


.hawks-footer__links a:hover::before {
  background:
    var(--hawks-gold);

  transform:
    scale(1.35);
}


/* ==========================================================
   09. HOURS
   ========================================================== */

.hawks-footer__hours {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-bottom: 17px;
}


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

  flex:
    0
    0
    46px;

  width: 46px;
  height: 46px;

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

  border-radius: 13px;

  color:
    var(--hawks-gold);

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


.hawks-footer__hours-icon svg {
  width: 23px;
  height: 23px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.hawks-footer__hours span {
  display: block;

  margin-bottom: 4px;

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

  font-size: 0.71rem;

  font-weight:
    var(--hawks-weight-semibold);

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;
}


.hawks-footer__hours strong {
  display: block;

  color:
    var(--hawks-white);

  font-size: 0.98rem;

  line-height: 1.25;
}


.hawks-footer__hours-note {
  max-width: 260px;

  margin:
    0
    0
    23px;

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

  font-size: 0.87rem;

  line-height: 1.6;
}


/* ==========================================================
   10. ESTIMATE LINK
   ========================================================== */

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

  gap: 9px;

  min-height: 44px;

  padding:
    9px
    14px;

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

  border-radius: 10px;

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

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

  font-size: 0.84rem;

  font-weight:
    var(--hawks-weight-bold);

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


.hawks-footer__estimate 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-footer__estimate:hover {
  color:
    var(--hawks-black);

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

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


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


/* ==========================================================
   11. SOCIAL
   ========================================================== */

.hawks-footer__social-copy {
  max-width: 270px;

  margin:
    0
    0
    21px;

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

  font-size: 0.87rem;

  line-height: 1.6;
}


.hawks-footer__socials {
  display: flex;
  flex-direction: column;

  gap: 10px;
}


.hawks-footer-social {
  display: grid;

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

  align-items: center;

  gap: 12px;

  width: 100%;

  padding:
    11px
    13px;

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

  border-radius: 12px;

  color:
    var(--hawks-white);

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

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


.hawks-footer-social:hover {
  border-color:
    rgba(59, 130, 232, 0.38);

  background:
    rgba(4, 88, 204, 0.08);

  transform:
    translateY(-2px);
}


.hawks-footer-social__icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 11px;

  color:
    var(--hawks-white);

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


.hawks-footer-social__icon svg {
  width: 21px;
  height: 21px;

  fill:
    currentColor;

  stroke:
    none;
}


.hawks-footer-social small {
  display: block;

  margin-bottom: 3px;

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

  font-size: 0.67rem;

  font-weight:
    var(--hawks-weight-semibold);

  line-height: 1;

  text-transform:
    uppercase;

  letter-spacing:
    0.07em;
}


.hawks-footer-social strong {
  display: block;

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

  font-size: 0.88rem;
}


.hawks-footer-social__arrow {
  width: 18px;
  height: 18px;

  fill: none;

  stroke:
    var(--hawks-gold);

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

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


.hawks-footer-social:hover
.hawks-footer-social__arrow {
  transform:
    translate3d(
      2px,
      -2px,
      0
    );
}


/* ==========================================================
   12. FOOTER BOTTOM
   ========================================================== */

.hawks-footer__bottom {
  border-top:
    1px solid
    rgba(255, 255, 255, 0.075);

  background:
    rgba(0, 0, 0, 0.21);
}


.hawks-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  min-height: 78px;

  padding-top: 16px;
  padding-bottom: 16px;
}


/* COPYRIGHT */

.hawks-footer__copyright {
  margin: 0;

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

  font-size: 0.78rem;

  line-height: 1.5;
}


/* ==========================================================
   13. POWERED BY
   ========================================================== */

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

  gap: 6px;

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

  font-size: 0.76rem;

  line-height: 1.4;

  transition:
    color
      200ms
      ease;
}


.hawks-footer__powered strong {
  color:
    rgba(255, 255, 255, 0.75);

  font-weight:
    var(--hawks-weight-bold);

  transition:
    color
      200ms
      ease;
}


.hawks-footer__powered svg {
  width: 15px;
  height: 15px;

  margin-left: 2px;

  fill: none;

  stroke:
    var(--hawks-gold);

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

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


.hawks-footer__powered:hover {
  color:
    rgba(255, 255, 255, 0.7);
}


.hawks-footer__powered:hover
strong {
  color:
    var(--hawks-gold-soft);
}


.hawks-footer__powered:hover
svg {
  transform:
    translate3d(
      2px,
      -2px,
      0
    );
}


/* ==========================================================
   14. ACCESSIBILITY
   ========================================================== */

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

  outline-offset:
    4px;
}


/* ==========================================================
   15. REDUCED MOTION
   ========================================================== */

html.reduce-motion
.hawks-footer a,
html.reduce-motion
.hawks-footer svg,
html.reduce-motion
.hawks-footer__contact-icon {
  transition: none !important;
}


/* ==========================================================
   16. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

  .hawks-footer__grid {
    grid-template-columns:
      minmax(320px, 1.25fr)
      minmax(170px, 0.52fr)
      minmax(230px, 0.68fr)
      minmax(240px, 0.72fr);
  }

}


/* ==========================================================
   17. TABLET
   ========================================================== */

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

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

    gap:
      52px
      60px;
  }


  .hawks-footer__brand {
    max-width:
      430px;
  }


  .hawks-footer__logo img {
    width:
      205px;
  }

}


/* ==========================================================
   18. MOBILE
   ========================================================== */

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

  .hawks-footer__main {
    padding:
      68px
      0
      54px;
  }


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

    gap:
      46px
      35px;
  }


  .hawks-footer__brand {
    grid-column:
      1 / -1;

    max-width:
      540px;
  }


  .hawks-footer__bottom-inner {
    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 8px;

    min-height: 92px;
  }

}


/* ==========================================================
   19. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  .hawks-footer__main {
    padding:
      62px
      0
      48px;
  }


  .hawks-footer__grid {
    grid-template-columns:
      1fr;

    gap: 42px;
  }


  .hawks-footer__brand {
    max-width: none;
  }


  .hawks-footer__logo {
    margin-bottom: 21px;
  }


  .hawks-footer__logo img {
    width: 190px;
  }


  .hawks-footer__description {
    font-size: 0.92rem;

    line-height: 1.62;
  }


  .hawks-footer__title {
    margin-bottom: 22px;
  }


  .hawks-footer__social-copy,
  .hawks-footer__hours-note {
    max-width: none;
  }


  .hawks-footer-social {
    max-width: 100%;
  }


  .hawks-footer__bottom-inner {
    flex-direction: column;

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

    gap: 10px;

    min-height: 104px;

    padding-top: 20px;
    padding-bottom: 20px;
  }


  .hawks-footer__copyright,
  .hawks-footer__powered {
    font-size: 0.74rem;
  }


  .hawks-footer__powered {
    flex-wrap: wrap;
  }

}

/* ==========================================================
   REMODELING HAWKS LLC
   FOOTER — TIKTOK
   Add at the end of style.css
   ========================================================== */


/* ==========================================================
   SOCIAL LIST
   ========================================================== */

.hawks-footer__socials {
  display: flex;
  flex-direction: column;

  gap: 10px;
}


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

.hawks-footer-social__tiktok-icon {
  fill: none !important;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   TIKTOK HOVER ACCENT
   ========================================================== */

.hawks-footer-social--tiktok:hover
.hawks-footer-social__icon {
  color:
    var(--hawks-gold);
}


/* ==========================================================
   ACCESSIBLE KEYBOARD FOCUS
   ========================================================== */

.hawks-footer-social--tiktok:focus-visible {
  outline:
    2px solid
    var(--hawks-gold);

  outline-offset:
    4px;
}
/* ==========================================================
   FOOTER — TIKTOK ICON FIX
   ========================================================== */

.hawks-footer-social__tiktok-icon {
  display: block;

  width: 21px;
  height: 21px;

  fill:
    currentColor !important;

  stroke:
    none !important;
}


.hawks-footer-social__tiktok-icon path {
  fill:
    currentColor !important;

  stroke:
    none !important;
}


/* TikTok hover */

.hawks-footer-social--tiktok:hover
.hawks-footer-social__icon {
  color:
    var(--hawks-gold);
}