/*!
Theme Name: House 120
Theme URI:
Author: Chek Creative
Author URI:
Description: Block theme for House 120.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: house-120
Tags: block-theme, full-site-editing
*/

.house120-principle-item {
  --house120-principle-inset: 1.25rem;
  display: flex;
  width: 100%;
  min-width: 0px;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 640px) {
  .house120-principle-item {
    --house120-principle-inset: 2rem;
  }
}

@media (min-width: 768px) {
  .house120-principle-item {
    --house120-principle-inset: 2.5rem;
  }
}

.house120-principle-item__number-wrap {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
}

.house120-principle-item__number {
  font-family: nocturne-serif-lights, serif;
  font-weight: 200;
  font-size: 1.25rem;
  line-height: 1.75rem;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .house120-principle-item__number {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.house120-principle-item__panel {
  position: relative;
  margin-left: var(--house120-principle-inset);
  width: calc(100% - var(--house120-principle-inset));
  /* L-shaped frame (top + left) that fades solid -> transparent, per Figma
	   node 121:280. Matches the apply-form question panels. */
  background-image:
		linear-gradient(90deg, #3a3d40 0%, rgba(58, 61, 64, 0.55) 32%, rgba(58, 61, 64, 0.16) 60%, rgba(58, 61, 64, 0) 100%),
		linear-gradient(180deg, #3a3d40 0%, rgba(58, 61, 64, 0.55) 32%, rgba(58, 61, 64, 0.16) 60%, rgba(58, 61, 64, 0) 100%),
		radial-gradient(circle at top left, rgba(216, 210, 200, 0.03), transparent 32%);
  background-position: left top, left top, left top;
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 100%, 100% 100%;
  min-width: 0px;
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .house120-principle-item__panel {
    padding: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-principle-item__panel {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .house120-principle-item__panel {
    padding: 2.5rem;
  }
}

.house120-principle-item__title {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 400;
  position: relative;
  z-index: 1;
  color: rgba(216, 210, 200, 0.92);
  font-synthesis: none;
  margin: 0px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.03em;
}

@media (min-width: 640px) {
  .house120-principle-item__title {
    font-size: 0.875rem;
  }
}

.house120-principle-item__body {
  font-family: sweet-sans-pro, sans-serif;
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  margin-bottom: 0px;
  max-width: 33rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(216 210 200 / 0.5);
}

@media (min-width: 640px) {
  .house120-principle-item__body {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 1.4;
  }
}

.house120-philosophy {
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .house120-philosophy {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 768px) {
  .house120-philosophy {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

@media (min-width: 1024px) {
  .house120-philosophy {
    padding-top: 8.5rem;
    padding-bottom: 8.5rem;
  }
}

.house120-philosophy__inner {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  max-width: 1376px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: stretch;
  gap: 2rem;
}

@media (min-width: 640px) {
  .house120-philosophy__inner {
    gap: 2.5rem;
  }
}

@media (min-width: 768px) {
  .house120-philosophy__inner {
    gap: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .house120-philosophy__inner {
    grid-template-columns: minmax(0,46%) minmax(0,1fr);
    gap: 3rem;
  }
}

@media (min-width: 1280px) {
  .house120-philosophy__inner {
    grid-template-columns: minmax(0,766px) minmax(0,1fr);
    gap: 2.5rem;
  }
}

.house120-philosophy__media {
  margin: 0px;
  overflow: hidden;
}

.house120-philosophy__media img {
  height: clamp(18rem, 60vw, 24rem);
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

@media (min-width: 768px) {
  .house120-philosophy__media img {
    height: clamp(28rem, 52vw, 36rem);
  }
}

@media (min-width: 1024px) {
  .house120-philosophy__media img {
    height: 100%;
    min-height: 36rem;
  }
}

.house120-philosophy__content {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 640px) {
  .house120-philosophy__content {
    gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .house120-philosophy__content {
    gap: 4rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1280px) {
  .house120-philosophy__content {
    gap: 5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.house120-philosophy__header {
  display: flex;
  width: 100%;
  max-width: 29.5625rem;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .house120-philosophy__header {
    gap: 1.25rem;
  }
}

.house120-philosophy__title {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 400;
  color: rgba(216, 210, 200, 0.92);
  font-synthesis: none;
  margin: 0px;
  font-size: 1.5rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.015em;
}

@media (min-width: 640px) {
  .house120-philosophy__title {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  .house120-philosophy__title {
    font-size: 2.25rem;
  }
}

@media (min-width: 1280px) {
  .house120-philosophy__title {
    font-size: 2.5rem;
  }
}

.house120-philosophy__kicker {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 400;
  color: rgba(216, 210, 200, 0.5);
  font-synthesis: none;
  margin: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.015em;
}

@media (min-width: 640px) {
  .house120-philosophy__kicker {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-philosophy__kicker {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .house120-philosophy__kicker {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.house120-philosophy__items {
  display: flex;
  min-width: 0px;
  flex-direction: column;
}

.house120-philosophy__items > .acf-innerblocks-container {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.house120-philosophy__items > .acf-innerblocks-container > * + * {
  margin-top: 0.75rem;
}

@media (min-width: 640px) {
  .house120-philosophy__items > .acf-innerblocks-container > * + * {
    margin-top: 0.5rem;
  }
}

@media (min-width: 768px) {
  .house120-philosophy__items > .acf-innerblocks-container > * + * {
    margin-top: 0px;
  }
}

/* =====================================================================
   House 120 — Hero
   Mobile-first. Desktop matches Figma "Desktop - 22" (1440 frame):
   content column ~466/1440, gallery ~906/1440, gallery offset 51px top.
   ===================================================================== */

.house120-hero {
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
}

.house120-hero__inner {
  display: flex;
  flex-direction: column;
}

/* ----- Content column ----- */

.house120-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 2.5rem;
  padding-top: 2.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .house120-hero__content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 3rem;
  }
}

.house120-hero__intro {
  display: flex;
  width: 100%;
  max-width: 29.125rem;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .house120-hero__intro {
    gap: 1.75rem;
  }
}

.house120-hero__key {
  display: block;
}

.house120-hero__key img {
  height: 1.75rem;
  width: auto;
}

.house120-hero__wordmark {
  margin: 0px;
  width: 100%;
  max-width: 22rem;
}

@media (min-width: 640px) {
  .house120-hero__wordmark {
    max-width: 29.125rem;
  }
}

.house120-hero__wordmark img {
  display: block;
  width: 100%;
  aspect-ratio: 466 / 75;
}

.house120-hero__eyebrow {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.04em;
  --tw-text-opacity: 1;
  color: rgb(139 106 67 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .house120-hero__eyebrow {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-hero__eyebrow {
    font-size: 1.1925rem;
  }
}

.house120-hero__divider {
  display: block;
  height: 1px;
  width: 3.5rem;
  background-color: rgb(139 106 67 / 0.6);
}

@media (min-width: 640px) {
  .house120-hero__divider {
    width: 4.9rem;
  }
}

.house120-hero__description {
  font-family: sweet-sans-pro, sans-serif;
  margin: 0px;
  max-width: 18.375rem;
  font-size: 0.8125rem;
  line-height: 1.49;
  color: rgb(216 210 200 / 0.5);
}

@media (min-width: 640px) {
  .house120-hero__description {
    max-width: 25.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.house120-hero__actions {
  display: flex;
  width: 100%;
  max-width: 18.125rem;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .house120-hero__actions {
    max-width: 16.375rem;
    gap: 0.75rem;
  }
}

.house120-hero__button {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  display: flex;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.625rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  --tw-text-opacity: 1;
  color: rgb(245 242 236 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 640px) {
  .house120-hero__button {
    height: 3.1875rem;
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

.house120-hero__button.is-solid {
  --tw-bg-opacity: 1;
  background-color: rgb(139 106 67 / var(--tw-bg-opacity, 1));
}

.house120-hero__button.is-solid:hover {
  background-color: rgb(139 106 67 / 0.85);
}

.house120-hero__button.is-outline {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(139 106 67 / var(--tw-border-opacity, 1));
  background-color: transparent;
}

.house120-hero__button.is-outline:hover {
  background-color: rgb(139 106 67 / 0.15);
}

.house120-hero__footnote {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.04em;
  --tw-text-opacity: 1;
  color: rgb(139 106 67 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .house120-hero__footnote {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-hero__footnote {
    font-size: 1.1925rem;
  }
}

/* Inline footnote belongs to the content column (desktop). Mobile footnote
   sits at the very bottom of the section. Toggle per breakpoint. */

.house120-hero__footnote--inline {
  display: none;
}

.house120-hero__footnote--mobile {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 2.5rem;
  text-align: center;
}

/* ----- Media (gallery + features) ----- */

.house120-hero__media {
  display: flex;
  flex-direction: column;
}

/* ----- Gallery ----- */

.house120-hero__gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 375 / 342;
  /* Allow vertical page scroll while we handle horizontal swipes in JS. */
  touch-action: pan-y;
}

/* Tablet: wider, less-tall gallery so it doesn't dominate the viewport. */

@media (min-width: 640px) and (max-width: 1023px) {
  .house120-hero__gallery {
    aspect-ratio: 16 / 9;
  }
}

.house120-hero__slides {
  position: absolute;
  inset: 0px;
}

.house120-hero__slide {
  position: absolute;
  inset: 0px;
  margin: 0px;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.house120-hero__slide.is-active {
  opacity: 1;
}

.house120-hero__slide img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.house120-hero__progress {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  z-index: 10;
  display: flex;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: center;
  gap: 0.875rem;
  opacity: 0.8;
}

@media (min-width: 640px) {
  .house120-hero__progress {
    bottom: 1.5rem;
  }
}

.house120-hero__pill {
  position: relative;
  display: block;
  height: 6px;
  width: 6px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 9999px;
  border-width: 0px;
  padding: 0px;
  background-color: rgba(216, 210, 200, 0.4);
  transition: width 0.4s ease, background-color 0.4s ease;
}

.house120-hero__pill.is-active {
  width: 1.5rem;
}

.house120-hero__pill-fill {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  display: block;
  border-radius: 9999px;
  width: 0;
  background-color: var(--house120-color-soft-stone);
}

.house120-hero__pill.is-active .house120-hero__pill-fill {
  width: calc(var(--house120-hero-progress, 0) * 100%);
}

.house120-hero__gallery[data-playing='true'] .house120-hero__pill.is-active .house120-hero__pill-fill {
  transition: width 0.12s linear;
}

/* ----- Feature row ----- */

.house120-hero__features {
  display: flex;
  flex-direction: column;
}

.house120-hero__feature {
  display: flex;
  align-items: center;
  gap: 1.6875rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.house120-hero__feature + .house120-hero__feature {
  border-top-width: 1px;
  border-color: rgb(139 106 67 / 0.3);
}

.house120-hero__feature-icon {
  display: flex;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .house120-hero__feature-icon {
    height: 3.75rem;
    width: 3.75rem;
  }
}

.house120-hero__feature-icon img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.house120-hero__feature-text {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.5rem;
}

.house120-hero__feature-title {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.03em;
  --tw-text-opacity: 1;
  color: rgb(139 106 67 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .house120-hero__feature-title {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-hero__feature-title {
    font-size: 1.1925rem;
  }
}

.house120-hero__feature-body {
  font-family: sweet-sans-pro, sans-serif;
  margin: 0px;
  max-width: 14.5rem;
  font-size: 0.8125rem;
  line-height: 1.49;
  color: rgb(216 210 200 / 0.5);
}

@media (min-width: 640px) {
  .house120-hero__feature-body {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.house120-hero__feature-chevron {
  margin-left: auto;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  --tw-text-opacity: 1;
  color: rgb(139 106 67 / var(--tw-text-opacity, 1));
}

/* Tablet: features become a 3-up row with vertical dividers, no chevrons. */

@media (min-width: 768px) and (max-width: 1023px) {
  .house120-hero__features {
    flex-direction: row;
  }

  .house120-hero__feature {
    flex: 1 1 0;
    gap: 1.25rem;
    padding: 1.75rem 1.25rem;
  }

  .house120-hero__feature + .house120-hero__feature {
    border-top: 0;
    border-left: 1px solid rgba(139, 106, 67, 0.3);
  }

  .house120-hero__feature-chevron {
    display: none;
  }

  .house120-hero__feature-icon {
    height: 3rem;
    width: 3rem;
  }

  .house120-hero__feature-body {
    max-width: none;
  }
}

/* =====================================================================
   Desktop (lg ≥ 1024): two columns. Content left, media right.
   Proportions mirror the 1440 Figma frame (466 / 906 ≈ 34% / 63%).
   ===================================================================== */

@media (min-width: 1024px) {
  .house120-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 466fr) minmax(0, 906fr);
    align-items: stretch;
    /* Match the 1440 × 1024 Figma frame ratio, capped so it never gets
		   unreasonably tall on very wide screens. */
    min-height: min(71.11vw, 60rem);
  }

  .house120-hero__content {
    /* Figma: the intro block is centred vertically in the column; the
		   footnote (when present) is pinned toward the bottom. */
    position: relative;
    justify-content: center;
    gap: 0;
    padding: 3.5rem clamp(1rem, 2.6vw, 2.5rem);
    min-height: 100%;
  }

  .house120-hero__intro {
    gap: 1.75rem;
  }

  .house120-hero__footnote--inline {
    display: block;
    /* Pin to the bottom without pulling the centred intro down with it. */
    position: absolute;
    left: clamp(1rem, 2.6vw, 2.5rem);
    right: clamp(1rem, 2.6vw, 2.5rem);
    bottom: 3.5rem;
  }

  .house120-hero__footnote--mobile {
    display: none;
  }

  /* Gallery occupies the upper portion of the right column; features sit
	   beneath it (matching Figma top:51 gallery / top:888 features). */

  .house120-hero__media {
    min-height: 100%;
  }

  .house120-hero__gallery {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  .house120-hero__features {
    flex-direction: row;
    flex: 0 0 auto;
  }

  .house120-hero__feature {
    flex: 1 1 0;
    /* Allow the flex items to shrink below their content width so the
		   3-up row never overflows the right column on mid-desktop widths
		   (1024–1375px). Without min-width:0 the default min-content floor
		   pushes the third feature past the viewport. */
    min-width: 0;
    gap: clamp(0.625rem, 1vw, 1.125rem);
    padding: 1.75rem clamp(0.5rem, 1.25vw, 1.125rem);
  }

  .house120-hero__feature + .house120-hero__feature {
    border-top: 0;
    border-left: 1px solid rgba(139, 106, 67, 0.4);
  }

  .house120-hero__feature-text {
    min-width: 0;
  }

  .house120-hero__feature-chevron {
    display: none;
  }

  .house120-hero__feature-body {
    max-width: none;
    font-size: clamp(0.875rem, 0.85vw, 1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .house120-hero__slide {
    transition-property: none;
  }

  .house120-hero__pill-fill {
    transition-property: none;
  }
}

.house120-why-house {
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .house120-why-house {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-why-house {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.house120-why-house__inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1376px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .house120-why-house__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .house120-why-house__inner {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.house120-why-house__inner {
  /* Match the philosophy principle card treatment (L-shaped gradient frame). */
  background-image:
		linear-gradient(90deg, #3a3d40 0%, rgba(58, 61, 64, 0.55) 32%, rgba(58, 61, 64, 0.16) 60%, rgba(58, 61, 64, 0) 100%),
		linear-gradient(180deg, #3a3d40 0%, rgba(58, 61, 64, 0.55) 32%, rgba(58, 61, 64, 0.16) 60%, rgba(58, 61, 64, 0) 100%),
		radial-gradient(circle at top left, rgba(216, 210, 200, 0.03), transparent 32%);
  background-position: left top, left top, left top;
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 100%, 100% 100%;
}

.house120-why-house__title {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .house120-why-house__title {
    font-size: 1.7rem;
  }
}

@media (min-width: 768px) {
  .house120-why-house__title {
    font-size: 2rem;
  }
}

.house120-why-house__copy {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .house120-why-house__copy {
    margin-top: 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

.house120-why-house__body {
  font-family: nocturne-serif-lights, serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  font-size: 1.2rem;
  line-height: 1.45;
  color: rgb(216 210 200 / 0.95);
}

@media (min-width: 768px) {
  .house120-why-house__body {
    font-size: 1.45rem;
  }
}

/* =====================================================================
   House 120 — Experience Grid
   Figma "the experience": header + 2×2 grid of disciplines.
   Images anchor to the four outer corners; the four text blocks meet in
   the centre, their shared borders forming a graphite cross.
   ===================================================================== */

.house120-experience {
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .house120-experience {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-experience {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1024px) {
  .house120-experience {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.house120-experience__inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 1376px;
  flex-direction: column;
  align-items: center;
}

/* ----- Header ----- */

.house120-experience__header {
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 640px) {
  .house120-experience__header {
    margin-bottom: 4rem;
  }
}

@media (min-width: 768px) {
  .house120-experience__header {
    margin-bottom: 6rem;
  }
}

.house120-experience__title {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  font-size: 1.75rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.015em;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .house120-experience__title {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  .house120-experience__title {
    font-size: 2.5rem;
  }
}

.house120-experience__subtitle {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  max-width: 22rem;
  font-size: 1rem;
  line-height: 1.5rem;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: 0.015em;
  color: rgb(216 210 200 / 0.5);
}

@media (min-width: 768px) {
  .house120-experience__subtitle {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/* ----- Grid (mobile: single column, stacked) ----- */

.house120-experience__grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  max-width: 53.375rem;
  /* 854px — Figma bordered box width */
}

.house120-experience__cell {
  display: flex;
  flex-direction: column;
}

.house120-experience__media {
  margin: 0px;
  overflow: hidden;
  aspect-ratio: 329 / 271;
}

.house120-experience__media img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.house120-experience__text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.house120-experience__item-title {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  margin: 0px;
  font-size: 0.875rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.03em;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
}

.house120-experience__item-body {
  font-family: sweet-sans-pro, sans-serif;
  margin: 0px;
  max-width: 17.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(216 210 200 / 0.5);
}

@media (min-width: 640px) {
  .house120-experience__item-body {
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 1.4;
  }
}

/* ----- ≥640: 2×2 layout with centre cross ----- */

@media (min-width: 640px) {
  .house120-experience__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    -moz-column-gap: 0;
         column-gap: 0;
    row-gap: 0;
  }

  .house120-experience__cell {
    position: relative;
    min-width: 0;
  }

  /* Top row: image above, text below. Bottom row: text above, image below. */

  .house120-experience__cell.is-tl,
	.house120-experience__cell.is-tr {
    flex-direction: column;
    justify-content: flex-start;
  }

  .house120-experience__cell.is-bl,
	.house120-experience__cell.is-br {
    flex-direction: column-reverse;
    justify-content: flex-start;
  }

  /* Images sit at the outer corners, narrower than the cell (Figma 329px). */

  .house120-experience__media {
    width: min(20.5625rem, 100%);
    flex: 0 0 auto;
  }

  .house120-experience__cell.is-tr .house120-experience__media,
	.house120-experience__cell.is-br .house120-experience__media {
    margin-left: auto;
  }

  /* Text blocks fill the central band; padding pushes copy toward centre. */

  .house120-experience__text {
    flex: 1 1 auto;
    padding: 2.5rem;
  }

  .house120-experience__cell.is-tl .house120-experience__text,
	.house120-experience__cell.is-bl .house120-experience__text {
    padding-left: clamp(2.5rem, 6vw, 3.75rem);
  }

  .house120-experience__cell.is-tr .house120-experience__text,
	.house120-experience__cell.is-br .house120-experience__text {
    padding-left: clamp(2.5rem, 6vw, 3.75rem);
  }

  /* Centre cross: right border on the left column, bottom border on the
	   top row, drawn on the text blocks so it spans the central band. */

  .house120-experience__cell.is-tl .house120-experience__text,
	.house120-experience__cell.is-bl .house120-experience__text {
    border-right: 1px solid #3a3d40;
  }

  .house120-experience__cell.is-tl .house120-experience__text,
	.house120-experience__cell.is-tr .house120-experience__text {
    border-bottom: 1px solid #3a3d40;
  }
}

/* ----- ≥1024: exact Figma proportions ----- */

@media (min-width: 1024px) {
  .house120-experience__media {
    aspect-ratio: 329 / 271;
  }

  .house120-experience__text {
    padding: 3.125rem 2.5rem;
    min-height: 12.1875rem;
    /* keeps the cross centred between images */
  }

  .house120-experience__item-body {
    max-width: 17.5625rem;
    /* 281px */
  }
}

.house120-care-team {
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .house120-care-team {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-care-team {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.house120-care-team__inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1376px;
  border-width: 1px;
  border-color: rgb(139 106 67 / 0.3);
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .house120-care-team__inner {
    padding: 2rem;
  }
}

@media (min-width: 768px) {
  .house120-care-team__inner {
    padding: 3rem;
  }
}

.house120-care-team__title {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .house120-care-team__title {
    font-size: 1.7rem;
  }
}

@media (min-width: 768px) {
  .house120-care-team__title {
    font-size: 2rem;
  }
}

.house120-care-team__intro {
  font-family: nocturne-serif-lights, serif;
  font-weight: 200;
  font-synthesis: none;
  margin-top: 1rem;
  margin-bottom: 0px;
  max-width: 45rem;
  font-size: 1.15rem;
  line-height: 1.45;
  color: rgb(216 210 200 / 0.95);
}

@media (min-width: 768px) {
  .house120-care-team__intro {
    font-size: 1.35rem;
  }
}

.house120-care-team__list {
  margin-top: 2rem;
  display: grid;
  list-style-type: none;
  gap: 0.75rem;
  padding: 0px;
}

@media (min-width: 768px) {
  .house120-care-team__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .house120-care-team__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.house120-care-team__item {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 300;
  font-synthesis: none;
  border-width: 1px;
  border-color: rgb(139 106 67 / 0.35);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
  background-color: rgba(216, 210, 200, 0.03);
}

/* =====================================================================
   House 120 — Members
   Figma "the members": left heading column + two founding-member quotes.
   ===================================================================== */

.house120-members {
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .house120-members {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-members {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1024px) {
  .house120-members {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.house120-members__inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 1376px;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 768px) {
  .house120-members__inner {
    gap: 4rem;
  }
}

@media (min-width: 1024px) {
  .house120-members__inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 2.5rem;
  }
}

/* ----- Heading column ----- */

.house120-members__header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .house120-members__header {
    min-width: 0px;
    flex: 0 0 28%;
    justify-content: space-between;
    gap: 0px;
  }
}

.house120-members__title {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  font-size: 1.75rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.015em;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .house120-members__title {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  .house120-members__title {
    font-size: 2.5rem;
  }
}

.house120-members__subtitle {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  max-width: 21.8125rem;
  font-size: 1rem;
  line-height: 1.5rem;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: 0.015em;
  color: rgb(216 210 200 / 0.5);
}

@media (min-width: 768px) {
  .house120-members__subtitle {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/* ----- Quotes ----- */

.house120-members__quotes {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .house120-members__quotes {
    flex-direction: row;
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .house120-members__quotes {
    flex: 1 1 0%;
    gap: 4.75rem;
  }
}

.house120-members__quote {
  margin: 0px;
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .house120-members__quote {
    gap: 2rem;
  }
}

.house120-members__quote-text {
  font-family: nocturne-serif-lights, serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  font-size: 1.25rem;
  line-height: 1.75rem;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .house120-members__quote-text {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.house120-members__quote-attr {
  font-family: sweet-sans-pro, sans-serif;
  margin: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.4;
  color: rgb(216 210 200 / 0.5);
}

/* On desktop the attribution pins to the bottom so both quotes align. */

@media (min-width: 1024px) {
  .house120-members__quote {
    justify-content: space-between;
    gap: 0;
  }

  .house120-members__quote-attr {
    margin-top: 2rem;
  }
}

/* =====================================================================
   House 120 — Invitation
   Figma "the invitation": deep mineral green panel (title + copy) above a
   bronze membership CTA bar. The whole unit is inset to the content width
   with an obsidian gutter on either side (not full-bleed).
   ===================================================================== */

.house120-invitation {
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .house120-invitation {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-invitation {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .house120-invitation {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* Centered wrapper holds the green panel + bronze bar at content width. */

.house120-invitation__panel,
.house120-invitation__cta {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1376px;
}

/* ----- Green panel ----- */

.house120-invitation__panel {
  background-color: var(--house120-color-deep-mineral-green);
  display: flex;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .house120-invitation__panel {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .house120-invitation__panel {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.house120-invitation__content {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .house120-invitation__content {
    grid-template-columns: minmax(18rem,1fr) minmax(0,1.45fr);
    align-items: flex-start;
    gap: 2.5rem;
  }
}

.house120-invitation__lead {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.house120-invitation__title {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  font-size: 1.75rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.015em;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .house120-invitation__title {
    font-size: 2rem;
  }
}

@media (min-width: 768px) {
  .house120-invitation__title {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .house120-invitation__title {
    flex-shrink: 0;
  }
}

.house120-invitation__intro {
  font-family: nocturne-serif-lights, serif;
  font-weight: 200;
  font-synthesis: none;
  margin: 0px;
  max-width: 30rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .house120-invitation__intro {
    font-size: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .house120-invitation__intro {
    font-size: 1.9rem;
  }
}

.house120-invitation__plans {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.house120-invitation__plan {
  background-color: rgba(216, 210, 200, 0.04);
  border: 1px solid rgba(216, 210, 200, 0.2);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .house120-invitation__plan {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

.house120-invitation__plan-title {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 300;
  font-synthesis: none;
  margin: 0px;
  font-size: 0.9rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.06em;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
}

.house120-invitation__plan-body {
  font-family: nocturne-serif-lights, serif;
  font-weight: 200;
  font-synthesis: none;
  margin-top: 0.75rem;
  margin-bottom: 0px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.38;
  color: rgb(216 210 200 / 0.95);
}

@media (min-width: 768px) {
  .house120-invitation__plan-body {
    font-size: 1.35rem;
  }
}

/* ----- Bronze CTA bar ----- */

.house120-invitation__cta {
  background-color: var(--house120-color-oxidized-bronze);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 640px) {
  .house120-invitation__cta {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .house120-invitation__cta {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.house120-invitation__cta:hover {
  background-color: #9a774d;
}

.house120-invitation__cta-label {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  --tw-text-opacity: 1;
  color: rgb(13 13 13 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .house120-invitation__cta-label {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.house120-invitation__cta-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(13 13 13 / var(--tw-text-opacity, 1));
}

/* ----- Desktop: fixed panel height; body offset toward the right third ----- */

@media (min-width: 1024px) {
  .house120-invitation__panel {
    min-height: 22.625rem;
    /* 362px green area above the bar (Figma) */
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .house120-invitation__content {
    -moz-column-gap: clamp(2.25rem, 4.5vw, 5rem);
         column-gap: clamp(2.25rem, 4.5vw, 5rem);
  }
}

.house120-closing {
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 640px) {
  .house120-closing {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-closing {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.house120-closing__inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1376px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-color: rgb(139 106 67 / 0.35);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .house120-closing__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .house120-closing__inner {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.house120-closing__line {
  font-family: nocturne-serif-lights, serif;
  font-weight: 200;
  font-synthesis: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  max-width: 57rem;
  font-size: 1.35rem;
  line-height: 1.4;
  color: rgb(216 210 200 / 0.95);
}

@media (min-width: 768px) {
  .house120-closing__line {
    font-size: 1.8rem;
  }
}

.house120-closing__line + .house120-closing__line {
  margin-top: 1.5rem;
}

.house120-closing__tagline {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 300;
  font-synthesis: none;
  margin-top: 2rem;
  margin-bottom: 0px;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  --tw-text-opacity: 1;
  color: rgb(139 106 67 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .house120-closing__tagline {
    margin-top: 2.5rem;
    font-size: 1.35rem;
  }
}

/* =====================================================================
   House 120 — Header
   Figma: logo left, nav links right, bronze membership block flush to the
   right edge. Mobile collapses the nav behind a toggle.
   ===================================================================== */

.house120-header {
  position: relative;
  z-index: 50;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
}

.house120-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 51px;
}

/* ----- Logo ----- */

/* Mobile mirrors the Figma comp: the hamburger leads, the bronze CTA trails,
   and the wordmark lives in the hero — so the bar logo is desktop-only. */

.house120-header__logo {
  display: none;
  flex-shrink: 0;
  align-items: center;
  padding-left: 1.25rem;
}

@media (min-width: 640px) {
  .house120-header__logo {
    padding-left: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-header__logo {
    padding-left: 2rem;
  }
}

@media (min-width: 1024px) {
  .house120-header__logo {
    display: flex;
  }
}

.house120-header__logo img {
  display: block;
  height: 1.5625rem;
  width: auto;
}

/* ----- Desktop nav ----- */

.house120-header__nav {
  display: none;
  align-items: center;
}

@media (min-width: 1024px) {
  .house120-header__nav {
    display: flex;
    flex: 1 1 0%;
    justify-content: flex-end;
    gap: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .house120-header__nav {
    gap: 3.5rem;
  }
}

.house120-header__link {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgb(245 242 236 / 0.5);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.house120-header__link:hover {
  --tw-text-opacity: 1;
  color: rgb(245 242 236 / var(--tw-text-opacity, 1));
}

/* ----- Actions (CTA + toggle) ----- */

.house120-header__actions {
  display: flex;
  flex: 1 1 0%;
  align-items: stretch;
  align-self: stretch;
}

@media (min-width: 1024px) {
  .house120-header__actions {
    flex: none;
  }
}

/* Mobile: hamburger leads (left), CTA trails (right edge). */

.house120-header__toggle {
  order: -1;
}

@media (min-width: 1024px) {
  .house120-header__toggle {
    order: 0;
  }
}

.house120-header__actions .house120-header__cta {
  margin-left: auto;
}

@media (min-width: 1024px) {
  .house120-header__actions .house120-header__cta {
    margin-left: 0px;
  }
}

.house120-header__cta {
  background-color: var(--house120-color-oxidized-bronze);
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.625rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  --tw-text-opacity: 1;
  color: rgb(245 242 236 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 640px) {
  .house120-header__cta {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

.house120-header__cta:hover {
  background-color: #9a774d;
}

/* ----- Mobile toggle ----- */

.house120-header__toggle {
  display: flex;
  height: 51px;
  width: 51px;
  flex-shrink: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
}

@media (min-width: 1024px) {
  .house120-header__toggle {
    display: none;
  }
}

.house120-header__toggle-bar {
  display: block;
  height: 1px;
  width: 1.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(245 242 236 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.house120-header[data-open='true'] .house120-header__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.house120-header[data-open='true'] .house120-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.house120-header[data-open='true'] .house120-header__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ----- Mobile panel ----- */

.house120-header__panel {
  width: 100%;
  border-top-width: 1px;
  border-color: rgb(58 61 64 / 0.6);
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
}

@media (min-width: 1024px) {
  .house120-header__panel {
    display: none;
  }
}

.house120-header__panel[hidden] {
  display: none;
}

.house120-header__panel-nav {
  display: flex;
  flex-direction: column;
}

.house120-header__panel-link {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  border-bottom-width: 1px;
  border-color: rgb(58 61 64 / 0.4);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgb(245 242 236 / 0.7);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.house120-header__panel-link:hover {
  --tw-text-opacity: 1;
  color: rgb(245 242 236 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .house120-header__panel-link {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.house120-header__panel-link:last-child {
  border-bottom-width: 0px;
}

/* =====================================================================
   House 120 — Footer
   Figma: large HOUSE 120 wordmark (key above), contact email + social
   squares with a hairline divider, then a copyright / legal row.
   ===================================================================== */

.house120-footer {
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 2rem;
  padding-top: 3rem;
}

@media (min-width: 640px) {
  .house120-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .house120-footer {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2.5rem;
    padding-top: 5rem;
  }
}

.house120-footer__inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 1376px;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .house120-footer__inner {
    gap: 2.5rem;
  }
}

/* ----- Wordmark ----- */

.house120-footer__wordmark {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 768px) {
  .house120-footer__wordmark {
    gap: 1.5rem;
  }
}

.house120-footer__key {
  display: block;
  width: 100%;
  max-width: 12rem;
}

@media (min-width: 768px) {
  .house120-footer__key {
    max-width: 16.7rem;
  }
}

.house120-footer__key img {
  display: block;
  width: 100%;
  aspect-ratio: 267 / 85;
}

.house120-footer__logo {
  display: block;
  width: 100%;
}

.house120-footer__logo img {
  display: block;
  width: 100%;
  aspect-ratio: 1377 / 213;
}

/* ----- Contact (email + socials) ----- */

.house120-footer__contact {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(168, 159, 149, 0.2);
}

.house120-footer__email {
  font-family: nocturne-serif-lights, serif;
  font-weight: 200;
  font-synthesis: none;
  font-size: 1.25rem;
  line-height: 1.75rem;
  line-height: 1.4;
  --tw-text-opacity: 1;
  color: rgb(216 210 200 / var(--tw-text-opacity, 1));
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.house120-footer__email:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .house120-footer__email {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.house120-footer__socials {
  margin: 0px;
  display: flex;
  list-style-type: none;
  gap: 0.75rem;
  padding: 0px;
}

.house120-footer__social-item {
  margin: 0px;
  padding: 0px;
}

.house120-footer__social-link {
  background-color: var(--house120-color-oxidized-bronze);
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(245 242 236 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.house120-footer__social-link:hover {
  background-color: #9a774d;
}

.house120-footer__social-link svg {
  height: 1rem;
  width: 1rem;
}

/* ----- Legal row ----- */

.house120-footer__legal {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .house120-footer__legal {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.house120-footer__copyright,
.house120-footer__link {
  font-family: sweet-sans-pro, sans-serif;
  margin: 0px;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: rgb(168 159 149 / 0.4);
}

@media (min-width: 640px) {
  .house120-footer__copyright,
.house120-footer__link {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* All footer links (Privacy, Terms, Member Login) share one treatment. */

.house120-footer__link {
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.house120-footer__link:hover {
  color: rgb(168 159 149 / 0.7);
}

.house120-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 0.25rem;
}

@media (min-width: 640px) {
  .house120-footer__links {
    justify-content: flex-end;
  }
}

/* Left-hand group: copyright + About. */

@media (min-width: 640px) {
  .house120-footer__links--start {
    justify-content: flex-start;
  }
}

/*
 * Apply for Membership page (post /apply) — restyles the embedded WPForms
 * "Membership Application" form to match the House 120 Figma (node 250:2).
 *
 * Strategy: WPForms emits its own markup, so we scope every override under
 * `.house120-apply` and target WPForms' stable classes. Text-style fields
 * become underline inputs; radio/checkbox questions become bordered panels;
 * inline radios render as bronze pill toggles.
 *
 * Fonts use the theme's Typekit slots (src/style.css): the "Monument Extended"
 * slot (Sweet Sans Pro) for labels, titles, captions and pills; the "PP Mori"
 * slot (also Sweet Sans Pro) for the lede and the option text. Resolved via
 * the --wp--custom--font-family-* vars so the apply page tracks the theme.
 */

:root {
  --house120-apply-bronze: var(--house120-color-oxidized-bronze);
  --house120-apply-line: rgba(168, 159, 149, 0.25);
  --house120-apply-panel-border: #3a3d40;
  --house120-apply-label-idle: #6d6a66;
  --house120-apply-label-active: #b1afad;
  /*
	 * Fonts follow the theme's Typekit slots (see src/style.css): the
	 * "Monument Extended" slot is Sweet Sans Pro, the "PP Mori" slot is also
	 * Sweet Sans Pro. Resolve through the theme vars so we track any change.
	 */
  --house120-apply-font-label: var(--wp--custom--font-family--monument-extended, sweet-sans-pro), sans-serif;
  --house120-apply-font-body: var(--wp--custom--font-family--pp-mori, sweet-sans-pro), sans-serif;
}

.house120-apply {
  position: relative;
  padding-top: 9.25rem;
  /* clear the fixed header */
  padding-bottom: 6rem;
}

/*
 * Top hero backdrop (Figma node 250:2): the entryway interior photo at 20%
 * opacity, pinned to the top behind the title and fading to obsidian-black.
 * Pointer-events none so it never intercepts form clicks.
 */

.house120-apply::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 575px;
  background:
		linear-gradient(
			180deg,
			rgba(13, 13, 13, 0) 0%,
			var(--house120-color-obsidian-black) 100%
		),
		url("./assets/images/hero-gallery-1.png") center top / cover no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.house120-apply > * {
  position: relative;
  z-index: 1;
}

/* ---------- Intro ---------- */

.house120-apply__intro {
  margin-bottom: 3.5rem;
}

.house120-apply__title {
  margin: 0 0 1.25rem;
  font-family: var(--house120-apply-font-label);
  font-weight: 300;
  font-synthesis: none;
  text-transform: uppercase;
  color: var(--house120-color-soft-stone);
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.house120-apply__subtitle {
  margin: 0;
  font-family: var(--house120-apply-font-label);
  font-weight: 300;
  font-synthesis: none;
  text-transform: uppercase;
  color: var(--house120-color-soft-stone);
  opacity: 0.5;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  line-height: 1.1;
}

.house120-apply__lede {
  margin-bottom: 6.25rem;
}

.house120-apply__rule.wp-block-separator {
  width: 78.5px;
  max-width: 78.5px;
  margin: 0 auto 1.75rem;
  border: 0;
  border-top: 1px solid var(--house120-apply-bronze);
  background: none;
  opacity: 1;
}

.house120-apply__intro-text {
  margin: 0;
  font-family: var(--house120-apply-font-body);
  color: var(--house120-color-soft-stone);
  opacity: 0.5;
  font-size: 1rem;
  line-height: 1.49;
}

/* ---------- WPForms reset within the page ---------- */

/* Drive WPForms' own (modern-markup) custom properties so its base rules
   render on-brand instead of fighting them with !important. */

.house120-apply .wpforms-container {
  margin: 0;
  --wpforms-field-background-color: transparent;
  --wpforms-field-border-color: var(--house120-apply-line);
  --wpforms-field-border-size: 0px;
  --wpforms-field-border-radius: 0px;
  --wpforms-field-text-color: var(--house120-color-soft-stone);
  --wpforms-label-color: var(--house120-apply-label-idle);
  --wpforms-label-sublabel-color: var(--house120-apply-label-idle);
  --wpforms-button-background-color: var(--house120-apply-bronze);
  --wpforms-button-text-color: var(--house120-color-bone-white);
  --wpforms-button-border-radius: 0px;
  --wpforms-field-size-large-height: auto;
}

.house120-apply .wpforms-form .wpforms-field {
  padding: 0;
  margin: 0 0 3rem;
}

.house120-apply .wpforms-form .wpforms-field-row {
  margin: 0;
}

/* Hide WPForms' default field labels for the text-style fields (the design
   uses the input's own label-as-placeholder treatment). Keep them for
   accessibility but visually present them as the field caption. */

.house120-apply .wpforms-field-label {
  margin: 0 0 0.25rem;
  font-family: var(--house120-apply-font-label);
  font-weight: 400;
  font-synthesis: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--house120-apply-label-idle);
}

.house120-apply .wpforms-required-label {
  color: var(--house120-apply-bronze);
  border: 0;
}

/* Sublabels (First/Last, Street/City/State/ZIP) are the per-input captions in
   the design — show them ABOVE each input as a small caption. */

.house120-apply .wpforms-field-sublabel.after {
  display: block;
  order: -1;
  /* render above the input within the flex column */
  margin: 0 0 0.25rem;
  font-family: var(--house120-apply-font-label);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--house120-apply-label-idle);
  opacity: 1;
}

/* The composite "Name"/"Address" parent labels duplicate the sublabels, so
   hide them (kept for screen readers). */

.house120-apply .wpforms-field-name > .wpforms-field-label,
.house120-apply .wpforms-field-address > .wpforms-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Make each sub-input a column so the caption (order:-1) sits above it. The
   Street address input has no .wpforms-field-row-block wrapper — it's a bare
   <div> that is the only child of the first address row — so target that too. */

.house120-apply .wpforms-field-name .wpforms-field-row-block,
.house120-apply .wpforms-field-address .wpforms-field-row-block,
.house120-apply .wpforms-field-address .wpforms-field-row:first-of-type > div {
  display: flex;
  flex-direction: column;
}

.house120-apply .wpforms-field-description {
  margin-top: 0.5rem;
  font-family: var(--house120-apply-font-label);
  font-size: 0.75rem;
  color: var(--house120-apply-label-idle);
}

/* ---------- Underline text inputs ---------- */

.house120-apply .wpforms-container .wpforms-field-text input[type="text"],
.house120-apply .wpforms-container .wpforms-field-email input[type="email"],
.house120-apply .wpforms-container .wpforms-field-phone input,
.house120-apply .wpforms-container .wpforms-field-name input,
.house120-apply .wpforms-container .wpforms-field-address input,
.house120-apply .wpforms-container .wpforms-field-address select,
.house120-apply .wpforms-container .wpforms-field-textarea textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--house120-apply-line) !important;
  border-radius: 0 !important;
  color: var(--house120-color-soft-stone);
  font-family: var(--house120-apply-font-label);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none !important;
  transition: border-color 0.25s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.house120-apply .wpforms-container .wpforms-field-text input:focus,
.house120-apply .wpforms-container .wpforms-field-email input:focus,
.house120-apply .wpforms-container .wpforms-field-phone input:focus,
.house120-apply .wpforms-container .wpforms-field-name input:focus,
.house120-apply .wpforms-container .wpforms-field-address input:focus,
.house120-apply .wpforms-container .wpforms-field-address select:focus,
.house120-apply .wpforms-container .wpforms-field-textarea textarea:focus {
  border-bottom-color: var(--house120-apply-bronze) !important;
}

.house120-apply .wpforms-field-textarea textarea {
  min-height: 3.25rem;
  resize: vertical;
}

.house120-apply .wpforms-field input::-moz-placeholder, .house120-apply .wpforms-field textarea::-moz-placeholder {
  color: var(--house120-apply-label-idle);
  opacity: 1;
}

.house120-apply .wpforms-field input::placeholder,
.house120-apply .wpforms-field textarea::placeholder {
  color: var(--house120-apply-label-idle);
  opacity: 1;
}

/* Bronze accent + active label on focus/hover */

.house120-apply .wpforms-field input:focus,
.house120-apply .wpforms-field select:focus,
.house120-apply .wpforms-field textarea:focus {
  outline: none;
  border-bottom-color: var(--house120-apply-bronze);
}

.house120-apply .wpforms-field-name .wpforms-field-row-block,
.house120-apply .wpforms-field-address .wpforms-field-row-block {
  padding: 0;
}

/* Two-up rows (name first/last) keep the Figma gap. */

.house120-apply .wpforms-field-name .wpforms-field-row.wpforms-field-large > .wpforms-field-row-block.wpforms-one-half {
  width: calc(50% - 1.5rem);
}

.house120-apply .wpforms-field-name .wpforms-field-row.wpforms-field-large > .wpforms-field-row-block.wpforms-one-half.wpforms-first {
  margin-right: 3rem;
}

/*
 * Address layout per Figma: Street (full) → City (full) → State + ZIP (two-up).
 * WPForms' US scheme groups City+State on one row and Postal alone, so we
 * flatten the row wrappers (display:contents) and re-place the four sub-fields
 * on a single flex-wrap grid with explicit order.
 */

.house120-apply .wpforms-field-address fieldset {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  row-gap: 0;
  /* spacing handled per-row via margin-top, so the legend is unaffected */
  border: 0;
  margin: 0;
  padding: 0;
}

.house120-apply .wpforms-field-address .wpforms-field-row {
  display: contents;
}

/* Legend keeps only its own caption gap (matches the Name group's 15px). */

.house120-apply .wpforms-field-address legend.wpforms-field-label {
  flex: 0 0 100%;
}

/* Street address — full width, first (sits directly under the legend). */

.house120-apply .wpforms-field-address .wpforms-field-row:first-of-type > div {
  order: 1;
  flex: 0 0 100%;
}

/* City — full width, second (the .wpforms-first block of the City/State row). */

.house120-apply .wpforms-field-address .wpforms-field-row-block.wpforms-first:has(.wpforms-field-address-city) {
  order: 2;
  flex: 0 0 100%;
  margin-top: 3rem;
}

/* State — half width, third. */

.house120-apply .wpforms-field-address .wpforms-field-row-block:has(.wpforms-field-address-state) {
  order: 3;
  flex: 1 1 0;
  min-width: 0;
  margin-top: 3rem;
}

/* ZIP — half width, fourth (sits beside State, so same top margin). */

.house120-apply .wpforms-field-address .wpforms-field-row-block:has(.wpforms-field-address-postal) {
  order: 4;
  flex: 1 1 0;
  min-width: 0;
  margin-top: 3rem;
}

/* Native select arrow tidy-up for the State dropdown. */

.house120-apply .wpforms-field-address select {
  background-image: linear-gradient(45deg, transparent 50%, var(--house120-apply-bronze) 50%),
		linear-gradient(135deg, var(--house120-apply-bronze) 50%, transparent 50%);
  background-position: calc(100% - 12px) center, calc(100% - 7px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}

/* ---------- Phone (smart intl) ---------- */

.house120-apply .wpforms-field-phone .iti {
  width: 100%;
}

.house120-apply .wpforms-field-phone .iti__flag-container {
  border: 1px solid #846540;
}

/* ---------- Radio / checkbox question panels ---------- */

/*
 * Question panels (Figma 250:72) have an L-shaped frame on the top + left
 * edges that FADES from solid at the shared top-left corner to transparent at
 * the far ends. A plain border can't fade, so we draw two gradient hairlines
 * with pseudo-elements: ::before = top edge (solid left -> transparent right),
 * ::after = left edge (solid top -> transparent bottom).
 */

.house120-apply .wpforms-field-radio,
.house120-apply .wpforms-field-checkbox,
.house120-apply .wpforms-field-textarea {
  position: relative;
  border: 0;
  padding: 2.5rem !important;
}

.house120-apply .wpforms-field-radio::before,
.house120-apply .wpforms-field-checkbox::before,
.house120-apply .wpforms-field-textarea::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
		90deg,
		var(--house120-apply-panel-border) 0%,
		rgba(58, 61, 64, 0.55) 32%,
		rgba(58, 61, 64, 0.16) 60%,
		transparent 100%
	);
  pointer-events: none;
}

.house120-apply .wpforms-field-radio::after,
.house120-apply .wpforms-field-checkbox::after,
.house120-apply .wpforms-field-textarea::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
		180deg,
		var(--house120-apply-panel-border) 0%,
		rgba(58, 61, 64, 0.55) 32%,
		rgba(58, 61, 64, 0.16) 60%,
		transparent 100%
	);
  pointer-events: none;
}

/*
 * Question labels. Non-inline radios/checkboxes expose the label as a direct
 * child; inline pill radios wrap their content in a <fieldset>, so the label
 * is a <legend> nested one level deeper — match both so every question label
 * is Monument Extended 14px uppercase soft-stone (Figma).
 */

.house120-apply .wpforms-field-radio > .wpforms-field-label,
.house120-apply .wpforms-field-checkbox > .wpforms-field-label,
.house120-apply .wpforms-field-textarea > .wpforms-field-label,
.house120-apply .wpforms-field-radio > fieldset > legend.wpforms-field-label,
.house120-apply .wpforms-field-checkbox > fieldset > legend.wpforms-field-label {
  margin: 0 0 2rem;
  font-family: var(--house120-apply-font-label);
  font-weight: 400;
  font-synthesis: none;
  font-size: 0.875rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--house120-color-soft-stone);
  opacity: 1;
}

.house120-apply .wpforms-field-radio ul,
.house120-apply .wpforms-field-checkbox ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.house120-apply .wpforms-field-radio li,
.house120-apply .wpforms-field-checkbox li {
  margin: 0;
}

/*
 * Custom checkbox / radio control (Figma node 250:76 et al.).
 * Both checkboxes AND the panel radios render as 32px OUTLINED SQUARES:
 *   - unchecked: 1px border #6D6A66, transparent fill
 *   - checked:   1px border white + white checkmark, still transparent fill
 * The option label (PP Mori 16px, white) is vertically centred to the box.
 */

.house120-apply .wpforms-field-checkbox .wpforms-field-label-inline,
.house120-apply .wpforms-field-radio:not(.wpforms-list-inline) .wpforms-field-label-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--house120-apply-font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: #ffffff;
  cursor: pointer;
}

.house120-apply .wpforms-field-checkbox input[type="checkbox"],
.house120-apply .wpforms-field-radio:not(.wpforms-list-inline) input[type="radio"] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 2rem;
  /* 32px */
  height: 2rem;
  margin: 0;
  border: 1px solid var(--house120-apply-label-idle);
  /* #6D6A66 */
  border-radius: 0;
  /* checkboxes are square */
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease;
}

/* Radios are perfect circles (box + outline + checked dot). */

.house120-apply .wpforms-field-radio:not(.wpforms-list-inline) input[type="radio"] {
  border-radius: 50%;
}

/*
 * WPForms draws its OWN checkbox/radio box on the input's ::before (with a
 * bronze border on :checked/:focus). Suppress it so only our custom box +
 * ::after checkmark remain — otherwise a doubled bronze box shows on focus.
 */

.house120-apply .wpforms-field-checkbox input[type="checkbox"]::before,
.house120-apply .wpforms-field-radio:not(.wpforms-list-inline) input[type="radio"]::before {
  display: none !important;
}

/* Checked: white outline + white checkmark, transparent fill */

.house120-apply .wpforms-field-checkbox input[type="checkbox"]:checked,
.house120-apply .wpforms-field-radio:not(.wpforms-list-inline) input[type="radio"]:checked {
  border-color: #ffffff;
  background: transparent;
}

/* Checkbox checked: white tick */

.house120-apply .wpforms-field-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.6875rem;
  top: 0.375rem;
  width: 0.4375rem;
  height: 0.75rem;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Radio checked: white centre dot, precisely centred regardless of border. */

.house120-apply .wpforms-field-radio:not(.wpforms-list-inline) input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.875rem;
  /* 14px */
  height: 0.875rem;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

/* Keyboard focus state: a soft glow that hugs the control's shape (a round
   outline-offset ring would read as a second concentric circle on radios). */

.house120-apply .wpforms-field-checkbox input[type="checkbox"]:focus-visible,
.house120-apply .wpforms-field-radio:not(.wpforms-list-inline) input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--house120-apply-bronze);
  box-shadow: 0 0 0 3px rgba(139, 106, 67, 0.25);
}

/* Two-column services list */

.house120-apply .wpforms-field-checkbox.wpforms-list-2-columns ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1rem;
}

/* ---------- Inline radios as bronze pill toggles ---------- */

.house120-apply .wpforms-field-radio.wpforms-list-inline ul {
  display: flex !important;
  width: 100%;
  flex-direction: row;
  gap: 0.75rem;
}

.house120-apply .wpforms-field-radio.wpforms-list-inline li {
  flex: 1 1 0;
}

.house120-apply .wpforms-field-radio.wpforms-list-inline .wpforms-field-label-inline {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  gap: 0;
  height: 3.1875rem;
  padding: 1rem;
  border: 1px solid var(--house120-apply-bronze);
  font-family: var(--house120-apply-font-label);
  font-weight: 400;
  font-synthesis: none;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--house120-color-bone-white);
  text-align: center;
  white-space: nowrap;
  transition: background 0.2s ease;
}

/* Hide the actual control for pill groups; the label is the pill */

.house120-apply .wpforms-field-radio.wpforms-list-inline input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.house120-apply .wpforms-field-radio.wpforms-list-inline input[type="radio"]:checked + .wpforms-field-label-inline {
  background: var(--house120-apply-bronze);
}

/* ---------- Submit ---------- */

.house120-apply .wpforms-submit-container {
  margin-top: 3rem;
  text-align: center;
}

.house120-apply .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.1875rem;
  padding: 1rem 2.5rem;
  background: var(--house120-apply-bronze);
  border: 0;
  border-radius: 0;
  color: var(--house120-color-bone-white);
  font-family: var(--house120-apply-font-label);
  font-synthesis: none;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.house120-apply .wpforms-submit:hover {
  opacity: 0.85;
}

/* Confirmation + errors on-brand */

.house120-apply .wpforms-container .wpforms-confirmation-container-full {
  background-color: rgba(139, 106, 67, 0.08) !important;
  border: 1px solid var(--house120-apply-bronze) !important;
  color: var(--house120-color-soft-stone) !important;
  font-family: var(--house120-apply-font-body);
  padding: 2rem;
}

.house120-apply .wpforms-container .wpforms-confirmation-container-full p {
  color: var(--house120-color-soft-stone);
  margin: 0;
}

.house120-apply .wpforms-error,
.house120-apply label.wpforms-error {
  color: #c9785f;
  font-family: var(--house120-apply-font-body);
  font-size: 0.75rem;
}

.house120-apply .wpforms-field input.wpforms-error,
.house120-apply .wpforms-field textarea.wpforms-error {
  border-bottom-color: #c9785f;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
  .house120-apply {
    padding-top: 7rem;
  }

  .house120-apply .wpforms-field-radio,
	.house120-apply .wpforms-field-checkbox {
    padding: 1.75rem !important;
  }

  .house120-apply .wpforms-field-checkbox.wpforms-list-2-columns ul {
    grid-template-columns: 1fr;
  }

  .house120-apply .wpforms-field-radio.wpforms-list-inline ul {
    flex-wrap: wrap;
  }

  .house120-apply .wpforms-field-radio.wpforms-list-inline li {
    flex: 1 1 40%;
  }

  /* Stack the two-up rows */

  .house120-apply .wpforms-field-row.wpforms-field-large > .wpforms-field-row-block.wpforms-one-half {
    width: 100%;
  }

  .house120-apply .wpforms-field-row.wpforms-field-large > .wpforms-field-row-block.wpforms-one-half.wpforms-first {
    margin-right: 0;
    margin-bottom: 3rem;
  }
}

/*
 * Legal pages (/privacy, /terms) — a lightweight, readable long-form document
 * shell for House 120's privacy policy and terms of use. Built from core
 * blocks wrapped in `.house120-legal`; header/footer render site-wide.
 *
 * Type follows the theme's Typekit slots (see src/style.css): Sweet Sans Pro
 * for headings/labels, and Sweet Sans Pro for body via the PP-Mori slot.
 */

:root {
  --house120-legal-font-label: var(--wp--custom--font-family--monument-extended, sweet-sans-pro), sans-serif;
  --house120-legal-font-body: var(--wp--custom--font-family--pp-mori, sweet-sans-pro), sans-serif;
  --house120-legal-rule: rgba(168, 159, 149, 0.2);
}

.house120-legal {
  padding-top: 9.25rem;
  /* clear the fixed header */
  padding-bottom: 6rem;
}

/* ---------- Intro ---------- */

.house120-legal__intro {
  margin-bottom: 3rem;
  text-align: center;
}

.house120-legal__title {
  margin: 0 0 1rem;
  font-family: var(--house120-legal-font-label);
  font-weight: 300;
  font-synthesis: none;
  text-transform: uppercase;
  color: var(--house120-color-soft-stone);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.house120-legal__rule.wp-block-separator {
  width: 78.5px;
  max-width: 78.5px;
  margin: 1.75rem auto;
  border: 0;
  border-top: 1px solid var(--house120-color-oxidized-bronze);
  background: none;
  opacity: 1;
}

.house120-legal__updated {
  margin: 0;
  font-family: var(--house120-legal-font-body);
  color: var(--house120-color-soft-stone);
  opacity: 0.5;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---------- Document body ---------- */

.house120-legal__body {
  font-family: var(--house120-legal-font-body);
  color: var(--house120-color-soft-stone);
  font-size: 1rem;
  line-height: 1.65;
}

.house120-legal__body p {
  margin: 0 0 1.25rem;
  color: rgba(216, 210, 200, 0.78);
}

/* Section headings */

.house120-legal__body h2 {
  margin: 2.75rem 0 1rem;
  font-family: var(--house120-legal-font-label);
  font-weight: 400;
  font-synthesis: none;
  font-size: 0.875rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--house120-color-soft-stone);
  scroll-margin-top: 7rem;
  /* clear header on TOC jump */
}

.house120-legal__body h2:first-child {
  margin-top: 0;
}

/* Table of contents (jump links) */

.house120-legal__toc {
  margin: 0 0 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--house120-legal-rule);
  border-bottom: 1px solid var(--house120-legal-rule);
  list-style: none;
  display: grid;
  gap: 0.625rem;
}

@media (min-width: 640px) {
  .house120-legal__toc {
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem 2rem;
  }
}

.house120-legal__toc li {
  margin: 0;
}

.house120-legal__body a,
.house120-legal__toc a {
  color: var(--house120-color-oxidized-bronze);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.house120-legal__body a:hover,
.house120-legal__toc a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* Lists within the body */

.house120-legal__body ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.house120-legal__body li {
  margin: 0 0 0.5rem;
  color: rgba(216, 210, 200, 0.78);
}

.house120-legal__body strong {
  color: var(--house120-color-soft-stone);
  font-weight: 600;
}

/* =====================================================================
   House 120 — Motion prep
   These rules ONLY apply when <html> has `.house120-motion`, added by a
   synchronous head script BEFORE first paint (and only when motion is
   supported and not reduced). The animation targets are hidden via CSS
   selectors here — not via JS-added classes — so there is no "loaded then
   unloads" flash. JS adds `.is-revealed` (or `.h120-anim`/`is-revealed`)
   once the entrance animation runs.

   Progressive enhancement: without JS the class is never added, so nothing
   is hidden. With reduced-motion the head script skips the class entirely.
   ===================================================================== */

/* The elements that animate in. Hidden up-front (gated on .house120-motion). */

.house120-motion :is(
	.house120-header__bar,
	.house120-hero__key,
	.house120-hero__wordmark,
	.house120-hero__eyebrow,
	.house120-hero__divider,
	.house120-hero__description,
	.house120-hero__actions,
	.house120-hero__footnote--inline,
	.house120-hero__footnote--mobile,
	.house120-hero__gallery,
	.house120-hero__feature,
	.house120-philosophy__media,
	.house120-philosophy__header,
	.house120-principle-item,
	.house120-experience__header,
	.house120-experience__cell,
	.house120-why-house__title,
	.house120-why-house__body,
	.house120-care-team__title,
	.house120-care-team__intro,
	.house120-care-team__item,
	.house120-members__header,
	.house120-members__quote,
	.house120-invitation__panel,
	.house120-invitation__title,
	.house120-invitation__intro,
	.house120-invitation__plan,
	.house120-invitation__cta,
	.house120-closing__line,
	.house120-closing__tagline,
	.house120-footer__key,
	.house120-footer__logo,
	.house120-footer__contact,
	.house120-footer__legal
) {
  opacity: 0;
  will-change: opacity, transform;
}

/* Reveal completion clears the prep state (JS adds .is-revealed). */

.house120-motion .is-revealed {
  opacity: 1 !important;
  will-change: auto;
}

/* If the module (or its CDN import) fails to load, the script tag's onerror
   and the module's own import-guard remove `.house120-motion` from <html>,
   so every rule above stops applying and content is revealed. No timers, so
   nothing can ever fight a scroll reveal. */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.relative {
  position: relative;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.outline {
  outline-style: solid;
}

/*
 * Fonts are loaded from Adobe Fonts (Typekit) via the kit enqueued in
 * functions.php (https://use.typekit.net/yke5jhu.css). Only two approved
 * families are used site-wide: Sweet Sans Pro (sans, headings/labels/body)
 * and Nocturne Serif (serif, quotes). The CSS custom properties below keep the
 * historical var names so theme.json and block CSS need no structural change —
 * they simply now resolve to the Typekit families.
 */

:root {
  --house120-color-obsidian-black: #0d0d0d;
  --house120-color-soft-stone: #d8d2c8;
  --house120-color-graphite: #3a3d40;
  --house120-color-deep-mineral-green: #1f4e46;
  --house120-color-oxidized-bronze: #8b6a43;
  --house120-color-bone-white: #f5f2ec;
  --house120-color-taupe-gray: #a89f95;
  --wp--custom--font-family--monument-extended: sweet-sans-pro;
  --wp--custom--font-family--pp-editorial-new: nocturne-serif-lights;
  --wp--custom--font-family--pp-mori: sweet-sans-pro;
}

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

html {
  background: var(--house120-color-obsidian-black);
  color: var(--house120-color-soft-stone);
  scroll-behavior: smooth;
}

/* In-page nav anchors clear the fixed header when jumped to. */

#philosophy,
#experience,
#membership,
#why-house-120,
#care-team,
#closing-vision {
  scroll-margin-top: 6rem;
}

body {
  margin: 0;
  background: var(--house120-color-obsidian-black);
  color: var(--house120-color-soft-stone);
  font-family: sweet-sans-pro, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

/* Site-wide grain overlay — matches Figma "Noise" (feTurbulence) effect. */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url('./assets/images/noise.svg');
  background-repeat: repeat;
  background-size: 160px 160px;
  opacity: 0.12;
  mix-blend-mode: screen;
}

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 1376px;
}

.wp-site-blocks {
  padding-left: 0;
  padding-right: 0;
}

.wp-block-post-content {
  margin-top: 0;
  margin-bottom: 0;
}