/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0
*/

  :root {
      --ink: #0e1720;
      --ink2: #152433;
      --cream: #f7f2ea;
      --muted: #6e756f;
      --bronze: #d7954c;
      --shadow: 0 24px 70px rgba(10, 20, 30, .15)
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--cream);
      line-height: 1.5
    }

    h1,
    h2,
    h3,
    p {
      margin: 0
    }

    h1,
    h2 {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 500;
      letter-spacing: -.045em;
      line-height: .98
    }

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

    .wrap {
      width: min(1180px, calc(100% - 40px));
      margin: auto
    }

    .eyebrow {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .22em;
      color: var(--bronze);
      font-weight: 800;
      margin-bottom: 14px
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 21px;
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 2px;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-weight: 800;
      font-size: 12px;
      transition: .2s ease;
      background: transparent
    }
.brand img{
    height: 60px;
    width: auto;
    display: block;
}
    .btn.primary {
      background: var(--bronze);
      border-color: var(--bronze);
      color: #fff
    }

    .btn.dark {
      border-color: rgba(14, 23, 32, .25);
      color: var(--ink)
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .12)
    }

    header {
      position: fixed;
      z-index: 10;
      top: 0;
      left: 0;
      right: 0;
      background: rgba(12, 22, 32, .82);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      color: #fff
    }

    .nav {
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px
    }
nav a:hover,
nav a:focus,
nav a:active {
    color: #fff !important;
}
    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-size: 15px
    }

    .mark {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255, 255, 255, .35);
      display: grid;
      place-items: center;
      font-family: Georgia, serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.08em
    }

    .brand span small {
      display: block;
      letter-spacing: .38em;
      font-size: 9px;
      font-weight: 600;
      color: #c9d0d4;
      margin-top: 2px
    }

    nav {
      display: flex;
      align-items: center;
      gap: 28px;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 800;
      color: rgba(255, 255, 255, .83)
    }

    nav a:hover {
      color: #fff
    }
.hero-section-slider{
	padding:0px !important;
}
    .hero {
      min-height: 760px;
      margin-top:80px;
      display: flex;
      align-items: center;
      position: relative;
      color: #fff;
      overflow: hidden;
      background: linear-gradient(90deg, rgba(7, 16, 25, .78), rgba(7, 16, 25, .35)), url('https://northfieldgroup.kinsta.cloud/wp-content/uploads/2026/07/hero.jpg') center/cover no-repeat;
      padding-top: 78px
    }

    .hero:after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 160px;
      background: linear-gradient(transparent, rgba(12, 22, 32, .85))
    }

    .hero-content {
      position: relative;
      z-index: 1;
      width: min(700px, 100%);
      padding: 120px 0 95px
    }

    .hero h1 {
      font-size: clamp(54px, 7vw, 94px);
      max-width: 760px
    }

    .hero p {
      max-width: 560px;
      color: rgba(255, 255, 255, .86);
      font-size: 19px;
      margin: 24px 0 32px
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    section {
      padding: 96px 0
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 34px
    }

    .section-head h2 {
      font-size: clamp(40px, 5vw, 66px)
    }

    .section-head p {
      max-width: 430px;
      color: var(--muted)
    }

    .properties {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px
    }

    .property-card {
      background: var(--ink2);
      color: #fff;
      box-shadow: var(--shadow);
      overflow: hidden;
      min-height: 440px;
      display: flex;
      flex-direction: column
    }

    .property-card img {
      width: 100%;
      height: 245px;
      object-fit: cover;
      display: block;
      filter: saturate(.95)
    }

    .property-card .info {
      padding: 24px;
      display: flex;
      flex-direction: column;
      min-height: 195px
    }

    .property-card h3 {
      font-size: 22px;
      letter-spacing: -.02em;
      margin-bottom: 7px
    }

    .property-card .address {
      color: rgba(255, 255, 255, .72);
      font-size: 13px;
      margin-bottom: 20px;
      line-height: 1.35
    }

    .meta {
      margin-top: auto;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .68);
      font-weight: 800
    }

    .view {
      margin-top: 16px;
      color: var(--bronze);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 900
    }
.view:hover{
	color:#fff;
}
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: #fff
    }

    .split .copy {
      padding: 86px min(7vw, 80px)
    }

    .split h2 {
      font-size: clamp(40px, 4.5vw, 64px);
      margin-bottom: 24px
    }

    .split p {
      color: var(--muted);
      font-size: 17px;
      max-width: 530px;
      margin-bottom: 28px
    }

    .stats {
      background: var(--ink);
      color: #fff;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      padding: 52px
    }

    .stat {
      padding: 34px;
      border: 1px solid rgba(255, 255, 255, .12)
    }

    .stat strong {
      display: block;
      font-family: Georgia, serif;
      font-size: 46px;
      font-weight: 400;
      line-height: 1;
      color: #fff
    }

    .stat span {
      display: block;
      margin-top: 10px;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: 11px;
      color: rgba(255, 255, 255, .68);
      font-weight: 800
    }

    .feature {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      background: #fff;
      align-items: center
    }

    .feature img {
      width: 100%;
      height: 520px;
      object-fit: cover;
      display: block
    }

    .feature .copy {
      padding: 72px min(7vw, 82px)
    }

    .feature h2 {
      font-size: clamp(42px, 4.8vw, 70px);
      margin-bottom: 18px
    }

    .feature p {
      color: var(--muted);
      font-size: 17px;
      margin-bottom: 28px;
      max-width: 480px
    }

    .dev-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-top: 30px
    }

    .dev-card {
      background: #fff;
      padding: 12px;
      box-shadow: 0 12px 40px rgba(10, 20, 30, .08)
    }

    .dev-card img {
      height: 160px;
      width: 100%;
      object-fit: cover;
      display: block;
      margin-bottom: 18px
    }

    .dev-card b {
      display: block;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: 11px;
      color: var(--bronze);
      margin-bottom: 4px
    }

    .dev-card h3 {
      font-size: 21px;
      letter-spacing: -.03em
    }

    .cta {
      position: relative;
      color: #fff;
      text-align: center;
      background: linear-gradient(rgba(10, 20, 30, .72), rgba(10, 20, 30, .82)), url('https://northfieldgroup.kinsta.cloud/wp-content/uploads/2026/07/richmond.jpg') center/cover no-repeat;
      padding: 120px 20px
    }

    .cta h2 {
      font-size: clamp(46px, 6vw, 78px);
      margin-bottom: 18px
    }

    .cta p {
      color: rgba(255, 255, 255, .8);
      max-width: 560px;
      margin: 0 auto 28px;
      font-size: 18px
    }

    footer {
      background: #08121d;
      color: #fff;
      padding: 70px 0 30px
    }

    .foot {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 50px;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      padding-bottom: 50px
    }

    .foot p,
    .foot a {
      color: rgba(255, 255, 255, .66);
      font-size: 14px;
      display: block;
      margin-top: 10px
    }

    .foot h4 {
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: 11px;
      margin: 0 0 16px;
      color: #fff
    }

    .copyright {
      color: rgba(255, 255, 255, .45);
      font-size: 12px;
      margin-top: 24px;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap
    }

    @media(max-width:980px) {
      nav a:not(.btn) {
        display: none
      }

      .properties,
      .dev-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .split,
      .feature {
        grid-template-columns: 1fr
      }

      .feature img {
        height: 380px
      }

      .foot {
        grid-template-columns: 1fr 1fr
      }

      .hero {
        min-height: 680px
      }

      .stats {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:768px) {
		.brand img {
    height: 40px;
		}
		.hero {
			    margin-top: 20px;
		}
		.pswp-dots {
			bottom: -15px !important;
		}
		.section-head{
			    flex-direction: column;
    justify-content: center;
		}
		.section-head div{
			    margin: 0 auto;
    text-align: center;
		}
		.section-head p{
			text-align: center;
                    margin: 10px auto;
		}
      .wrap {
        width: min(100% - 28px, 1180px)
      }

      .nav {
        height: 68px
      }

      .brand {
        font-size: 13px
      }

      .mark {
        width: 36px;
        height: 36px
      }

      .hero {
        padding-top: 68px;
        min-height: 650px
      }

      .hero-content {
        padding: 80px 0
      }

      .hero p {
        font-size: 17px
      }

      .properties,
      .dev-grid,
      .stats {
        grid-template-columns: 1fr
      }

      .section-head {
        display: block
      }

      .section-head p {
        margin-top: 14px
      }

      .property-card {
        min-height: 0
      }

      .split .copy,
      .feature .copy {
        padding: 54px 24px
      }

      .foot {
        grid-template-columns: 1fr
      }

      .btn {
        width: 100%;
        justify-content: center
      }

      .hero-actions {
        display: grid
      }
    }