/* =========================
   Home Intro Section
========================= */
section#home-intro.home-intro {
  position: relative;
  overflow: hidden;
  padding: 225px 0 100px;
}

section#home-intro .new-bg-pattern,
section#home-intro .img-wrapper,
section#home-intro .play-pause-btn {
  display: none;
}

section#home-intro .intro-container {
  max-width: 1440px;
  padding: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}

section#home-intro .col {
  width: 50%;
  padding: 0;
}

section#home-intro .content-wrapper {
  max-width: 100%;
}

section#home-intro .section-title {
  max-width: 640px;
  margin: 0 0 55px;
  letter-spacing: 0;
}

section#home-intro .section-subtitle {
  margin: 45px 0 30px;
    letter-spacing: 3px;
  text-transform: uppercase;
}

section#home-intro .section-content p {
  margin: 0 0 50px;
}

section#home-intro .section-content {
  max-width: 640px;
}
section#home-intro .section-buttons .btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  /* Must be at least the circle diameter, or the background ring is clipped
     to the text height and only its left/right edges show. */
  min-height: 70px;
  margin: 0 15px 10px 0;
  /* Room for the circle: --arrow-size + 25px gap. */
  padding: 0 0 0 95px;
  border: 0;
  border-radius: 0;
  /* The circle is a background ring rather than a pseudo-element, because the
     button also holds its label -- that frees ::before/::after to draw the
     shaft and head with borders, the same way .circle-arrow and the form
     submit do. */
  background-image: radial-gradient(circle at 35px 50%, transparent 0 33px, currentColor 33px 35px, transparent 35px);
  background-repeat: no-repeat;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Shaft. Live geometry, with the circle spanning 0-70px: at rest the arrow
   pokes out past the circle's left edge, and on hover it slides right, fully
   inside. */
section#home-intro .section-buttons .btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 50px;
  margin-top: -1px;
  border-top: 2px solid currentColor;
  transition: width .3s ease, left .3s ease;
}

/* Head -- at the shaft's tip, near the circle's centre. */
section#home-intro .section-buttons .btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 23px;
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: left .3s ease;
}


/* Hover: the arrow slides right and shortens, ending inside the circle. */
section#home-intro .section-buttons .btn:hover::before,
section#home-intro .section-buttons .btn:focus-visible::before {
  left: 15px;
  width: 40px;
}

section#home-intro .section-buttons .btn:hover::after,
section#home-intro .section-buttons .btn:focus-visible::after {
  left: 40px;
}

section#home-intro .section-buttons .btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* Building: two stacked .slide-bg layers, each holding an <img>, like live.
   The images carry width/height attributes, so width:100% + height:auto derives
   the ratio -- no aspect-ratio needed. The first layer sits in flow and sets the
   wrapper height; the photo is absolute over it, faded in on hover through a
   circular window that follows the pointer (JS sets --building-x/y on the
   wrapper; both layers inherit). */
section#home-intro .intro-building-wrapper {
  position: relative;
  /* 60% of the 720px column, centred, exactly as live sizes it. */
  width: 60%;
  /* Pulled up past the section top so the roof is clipped, as live does. Live
     also pulls -13vw off the bottom, but that only works with its much longer
     copy -- here it would cut the plate off mid-building, so the base is left
     to set the section height. */
  margin: -100px auto 0;
}

section#home-intro .slide-bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* Photo: over the line art, visible only inside the window. */
section#home-intro .slide-bg:last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle farthest-side at var(--building-x, 10%) var(--building-y, 20%), #000, transparent 50%);
  mask-image: radial-gradient(circle farthest-side at var(--building-x, 10%) var(--building-y, 20%), #000, transparent 50%);
}

section#home-intro .intro-building-wrapper:hover .slide-bg:last-child {
  opacity: 1;
}

/* Line art punched out inside the window while hovering, so the photo is not
   competing with it. Full again on mouse-out. */
section#home-intro .intro-building-wrapper:hover .slide-bg:first-child {
  -webkit-mask-image: radial-gradient(circle farthest-side at var(--building-x, 10%) var(--building-y, 20%), transparent, #000 50%);
  mask-image: radial-gradient(circle farthest-side at var(--building-x, 10%) var(--building-y, 20%), transparent, #000 50%);
}

@media screen and (max-width: 1440px) {
  section#home-intro .section-title {
    margin-bottom: 35px;
  }

  /* 50px circle here, so the ring, padding and arrow all step down. */
  section#home-intro .section-buttons .btn {
    padding-left: 70px;
    min-height: 50px;
    background-image: radial-gradient(circle at 25px 50%, transparent 0 23px, currentColor 23px 25px, transparent 25px);
  }

  section#home-intro .section-buttons .btn::before {
    left: -12px;
    width: 40px;
  }

  section#home-intro .section-buttons .btn::after {
    left: 15px;
    width: 12px;
    height: 12px;
  }

  section#home-intro .section-buttons .btn:hover::before,
  section#home-intro .section-buttons .btn:focus-visible::before {
    left: 5px;
    width: 35px;
  }

  section#home-intro .section-buttons .btn:hover::after,
  section#home-intro .section-buttons .btn:focus-visible::after {
    left: 27px;
  }
}

@media screen and (max-width: 1200px) {
  section#home-intro .intro-container {
    max-width: 100%;
    padding: 0 15px;
  }

  section#home-intro .col {
    padding: 0 15px;
  }

  section#home-intro .intro-building-wrapper {
    border-radius: 10vw 0 0 10vw;
  }
}

@media screen and (max-width: 992px) {
  section#home-intro .intro-container {
    flex-direction: column-reverse;
  }

  section#home-intro .col {
    width: 100%;
  }

  section#home-intro .right-col,
  section#home-intro .section-title,
  section#home-intro .section-subtitle,
  section#home-intro .section-content p {
    text-align: center;
  }

  section#home-intro .section-title,
  section#home-intro .section-subtitle {
    margin-bottom: 50px;
  }

  /* Centred once the columns stack. */
  section#home-intro .intro-building-wrapper {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 50px;
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  section#home-intro.home-intro {
    padding-top: 100px;
    padding-bottom: 50px;
  }

  section#home-intro .intro-building-wrapper {
    max-width: 300px;
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 480px) {
  section#home-intro .intro-building-wrapper {
    max-width: 260px;
  }
}

/* =========================
   Inner Intro Section (#inner-intro)
   thefirstokc.com/amenities: a 16:9 photo bleeds from the left edge of the
   viewport to just short of the centre; the copy sits beside it in the right
   half of the container, vertically centred, at a comfortable reading width.
========================= */
section#inner-intro.inner-intro {
  position: relative;
  overflow: hidden;
  background: var(--first-white);
}

/* The live page renders no pattern in this section. */
section#inner-intro .bg-pattern {
  display: none;
}

section#inner-intro .intro-container {
  display: flex;
  align-items: center;
  max-width: 1560px;
  padding: 0 15px;
}

section#inner-intro .col {
  width: 50%;
  padding: 0;
}

/* Bleed the photo out to the viewport's left edge. The column's left edge is
   the container's, which sits (100vw - 200%) / 2 in from the viewport, so a
   negative margin of that amount reaches the edge; the width then runs back
   to 30px short of the centre line. */
section#inner-intro .img-wrapper {
  position: relative;
  width: calc(50vw - 30px);
  max-width: none;
  margin-left: calc(100% - 50vw);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

section#inner-intro .img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

section#inner-intro .right-col {
  padding-left: 45px;
}

section#inner-intro .content-wrapper {
  max-width: 730px;
}

section#inner-intro .section-title {
  max-width: 600px;
  margin: 0 0 55px;
  line-height: 1.2;
  letter-spacing: 0;
}

section#inner-intro .section-subtitle {
  margin: 0 0 40px;
  line-height: 1.5;
  letter-spacing: 3px;
  text-transform: uppercase;
}

section#inner-intro .section-content,
section#inner-intro .section-content p {
  color: #333;
    line-height: 2;
}

section#inner-intro .section-content p {
  margin: 0 0 20px;
}

section#inner-intro .section-content p:last-child {
  margin-bottom: 0;
}

section#inner-intro .section-content a {
  color: var(--first-secondary);
  text-decoration: none;
}

section#inner-intro .section-content a:hover,
section#inner-intro .section-content a:focus-visible {
  text-decoration: underline;
}

/* No photo (intro-type-2): centred copy across the container. */
section#inner-intro.intro-type-2 .right-col {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
}

section#inner-intro.intro-type-2 .content-wrapper,
section#inner-intro.intro-type-2 .section-title {
  max-width: none;
}
@media screen and (max-width: 1675px) {
    section#home-intro .intro-container {
        max-width: 1440px;
    }
}

@media screen and (max-width: 1440px) {
  section#inner-intro .intro-container {
    max-width: 1280px;
  }

  section#inner-intro .section-title {
    margin-bottom: 40px;
  }

  section#inner-intro .section-subtitle {
    margin-bottom: 30px;
  }

  section#inner-intro .right-col {
    padding-left: 35px;
  }
}

/* Stacked: full-bleed photo on top, centred copy below. */
@media screen and (max-width: 1200px) {
  

  section#inner-intro .intro-container {
    flex-direction: column;
    align-items: stretch;
  }

  section#inner-intro .col {
    width: 100%;
  }

  section#inner-intro .img-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  section#inner-intro .right-col {
    padding: 50px 0 0;
  }

  section#inner-intro .content-wrapper,
  section#inner-intro .section-title {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
  }

  section#inner-intro .section-title,
  section#inner-intro .section-subtitle,
  section#inner-intro .section-content p {
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  section#inner-intro .section-title {
    margin-bottom: 30px;
    font-size: 35px;
    line-height: 1.3;
  }

  section#inner-intro .section-subtitle {
    margin-bottom: 25px;
    letter-spacing: 2px;
  }
}

/* =========================
   Inner Intro — type 2 (.inner-intro-section.intro-type-2)
   The text-only variant (e.g. /neighborhood/, id="text-inner-intro"). The base
   rules in innerhero-9.css are built for the photo layout: they reserve the
   left grid column for .inner-intro-pattern, push the copy into column 2, and
   collapse .section-title to line-height 0 (which overlaps a wrapped heading).
   With no photo, reset that to one centred column.

   innerhero-9.css loads after this file, so each selector carries the extra
   .intro-type-2 class to win on specificity rather than order.
========================= */
section.inner-intro-section.intro-type-2 {
  min-height: 0;
}

/* No photo in this variant. */
section.inner-intro-section.intro-type-2 .inner-intro-pattern {
  display: none;
}

section.inner-intro-section.intro-type-2 .inner-intro-content {
  display: block;
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
}

/* Drop the column-2 placement and the space that was reserved for the photo. */
section.inner-intro-section.intro-type-2 .intro-heading-wrap,
section.inner-intro-section.intro-type-2 .intro-content-wrap {
  grid-column: auto;
  padding-top: 0;
}

section.inner-intro-section.intro-type-2 .section-title {
  margin: 0 0 25px;
  font-size: 38px;
  line-height: 1.2;
  text-align: center;
}

section.inner-intro-section.intro-type-2 .section-title::after {
  content: none;
  display: none;
}

/* The photo layout hides the subtitle; here it is the only supporting copy. */
section.inner-intro-section.intro-type-2 .section-subtitle {
  display: block;
  max-width: 860px;
  margin: 0 auto 30px;
  color: #000;
    font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

section.inner-intro-section.intro-type-2 .section-content,
section.inner-intro-section.intro-type-2 .section-content p {
  text-align: center;
}

section.inner-intro-section.intro-type-2 .section-content p::after {
  content: none;
  display: none;
}

@media screen and (max-width: 1200px) {
  section.inner-intro-section.intro-type-2 .section-title {
    font-size: 34px;
  }
}

@media screen and (max-width: 767px) {
  section.inner-intro-section.intro-type-2 .section-title {
    margin-bottom: 20px;
    font-size: 28px;
    line-height: 1.3;
  }

  section.inner-intro-section.intro-type-2 .section-subtitle {
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 28px;
  }
}