.ix-hero {
  /* Equal gutter on all four sides — the card's own height (below) subtracts
     top + bottom directly, so this margin can never be swallowed by a tall
     viewport or lost to zoom/rounding. */
  padding: var(--edge-gutter);
}

.ix-hero__card {
  /* Same container formula as .header__inner (max-width: 1400px; margin: 0
     auto; padding-inline: var(--gutter)) so the heading/paragraph/button
     start at exactly the same left edge as the logo, at any viewport width
     or zoom — not just a matching margin picked by eye. Text itself still
     wraps at its own width (h1 uses manual <br>, p caps at 430px below), so
     visual sizing is unchanged; only the left inset is now shared. */
  position: relative;
  /* Sits right under the second paragraph (tight margin-top, no dead
     space) and starts past the horizontal midpoint of the content column
     — a percentage margin, so it scales with the column instead of a
     fixed px value — landing close to the gap before the photo, with the
     arrow reaching toward it. */
  display: flex;
  align-items: center;
  /* Height, not min-height: derived straight from the viewport minus the
     wrapper's own top+bottom padding, so top and bottom gutters always match
     exactly, at any resolution or browser zoom. No upper cap — capping the
     height would leave a bigger gap at the bottom than at the top on tall
     viewports, which is exactly the asymmetry this is meant to avoid. dvh
     (where supported) additionally accounts for mobile browser chrome
     showing/hiding. */
  height: max(520px, calc(100vh - 2 * var(--edge-gutter) - var(--header-height)));
  height: max(520px, calc(100dvh - 2 * var(--edge-gutter) - var(--header-height)));
  border-radius: var(--radius);
  overflow: hidden;
}

.ix-hero__media {
  position: absolute;
  inset: 0;
  background: var(--gray);
}

.ix-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}

.ix-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(20, 18, 18, 0.97) 0%,
    rgba(20, 18, 18, 0.93) 26%,
    rgba(20, 18, 18, 0.6) 48%,
    rgba(20, 18, 18, 0.2) 72%,
    rgba(20, 18, 18, 0.06) 100%
  );
}

.ix-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(44px, 5vw, 80px) var(--gutter);
  color: #fff;
}

.ix-hero__content h1 {
  margin: 0 0 clamp(18px, 2vw, 28px);
  font-size: clamp(34px, 4.1vw, 64px);
  font-weight: 600;
  line-height: 1.08;
}

.ix-hero__content h1 span {
  display: inline-block;
  color: var(--color-primary);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ix-hero__content h1 span.is-swapping {
  opacity: 0;
  transform: translateY(0.3em);
}

@media (prefers-reduced-motion: reduce) {
  .ix-card__media,
  .ix-hero__content h1 span {
    transition: none;
  }
}

.ix-hero__content p {
  margin: 0 0 clamp(26px, 2.8vw, 40px);
  max-width: 430px;
  font-size: clamp(14px, 0.92vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}

.ix-hero__pill {
  position: absolute;
  z-index: 2;
  right: clamp(14px, 1.6vw, 24px);
  bottom: clamp(14px, 1.6vw, 24px);
}

.ix-lines {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--section-gap) var(--gutter);
}

.ix-lines__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
  margin-bottom: clamp(32px, 4vw, 60px);
}

.ix-lines__heading h2 {
  margin: 0 0 clamp(14px, 1.6vw, 24px);
  font-size: clamp(26px, 2.9vw, 44px);
  font-weight: 600;
  line-height: 1.18;
  color: var(--color-text);
}

.ix-lines__heading p {
  /* .ix-about__content p (above) sets a muted color on every <p> in the
     column, including this one — override it back to the brand red instead
     of relying on inheritance, which that same-specificity rule wins over. */
  margin: 0;
  max-width: 520px;
  font-size: clamp(13px, 0.88vw, 16px);
  line-height: 1.65;
  color: var(--color-text-muted);
}

.ix-lines__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 30px);
}

.ix-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 8;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.ix-card__media {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  background: var(--gray);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.ix-card__frame:hover .ix-card__media {
  transform: scale(1.08);
}

.ix-card__label {
  position: absolute;
  left: clamp(10px, 1vw, 16px);
  top: clamp(10px, 1vw, 16px);
  padding: clamp(6px, 0.6vw, 9px) clamp(12px, 1.1vw, 18px);
  border-radius: 999px;
  background: #fff;
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.ix-card__frame:hover .ix-card__label {
  background: var(--color-primary-hover);
  color: #fff;
}

.ix-card__action {
  position: absolute;
  right: clamp(10px, 1vw, 16px);
  bottom: clamp(10px, 1vw, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 2.1vw, 38px);
  height: clamp(28px, 2.1vw, 38px);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  transition: background 0.2s ease;
}

.ix-card__action svg {
  width: 45%;
  height: 45%;
  transition: transform 0.25s ease;
}

.ix-card__frame:hover .ix-card__action {
  background: var(--color-primary-hover);
}

.ix-card__frame:hover .ix-card__action svg {
  transform: translateX(3px);
}

.ix-card > p {
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  font-size: clamp(12px, 0.84vw, 15px);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.ix-about {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4.5vw, 80px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--section-gap);
}

.ix-about__content h2 {
  margin: 0 0 clamp(20px, 2.2vw, 32px);
  font-size: clamp(26px, 2.9vw, 44px);
  font-weight: 600;
  line-height: 1.18;
  color: var(--color-text);
}

.ix-about__content p {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  max-width: 470px;
  font-size: clamp(14px, 0.88vw, 16px);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.ix-about__content p:last-of-type {
  margin-bottom: 0;
}

.ix-about__figure {
  position: relative;
}

.ix-about__media {
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-sm);
  background: var(--gray);
}

.ix-about__note {
  display: flex;
  width: fit-content;
  margin-left: auto;
  align-items: center;
  gap: 10px;
  margin-top: clamp(6px, 0.8vw, 12px);
  color: var(--color-primary);
}

.ix-about__note-icon {
  flex-shrink: 0;
  width: clamp(24px, 2vw, 32px);
  height: clamp(24px, 2vw, 32px);
}

.ix-about__note p {
  margin: 0;
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: clamp(15px, 1.15vw, 21px);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-primary);
}

.ix-about__note-arrow {
  flex-shrink: 0;
  width: clamp(32px, 3vw, 46px);
  height: clamp(32px, 3vw, 46px);
  transform: rotate(6deg);
}

.ix-about__pill {
  position: absolute;
  right: clamp(12px, 1.4vw, 22px);
  bottom: clamp(12px, 1.4vw, 22px);
}

.ix-highlights {
  padding: var(--section-gap) 0;
}

.ix-highlights__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 3vw, 60px);
  max-width: 1400px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  padding: 0 var(--gutter);
}

.ix-highlights__header h2 {
  margin: 0;
  font-size: clamp(26px, 2.9vw, 44px);
  font-weight: 600;
  line-height: 1.18;
  color: var(--color-text);
}

.ix-highlights__header > p {
  margin: 0;
  align-self: center;
  max-width: 520px;
  font-size: clamp(13px, 0.9vw, 17px);
  line-height: 1.65;
  color: var(--color-text-muted);
}

.ix-highlights__rows {
  gap: clamp(10px, 1.1vw, 18px);
}

.ix-highlights .gallery__tile {
  width: clamp(190px, 15vw, 270px);
  /* The product cover photos are portrait shots (~3:4); the base .gallery
     tile is a wide 4:3 box built for landscape crops, which was cropping
     out the furniture entirely and leaving only wall/curtain background. */
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  /* background-color, not the "background" shorthand — the shorthand
     silently resets background-position/size (set by .gallery__tile in
     style.css) to their initial values, which was the actual reason tiles
     were showing an unscaled, top-left-anchored sliver of each photo. */
  /* background-color, not the "background" shorthand — the shorthand
     resets background-position/size/repeat to their initial values, which
     would silently break the image below it. */
  background-color: var(--gray);
}

.ix-cta {
  /* Same edge gutter as .ix-hero on top/sides; 0 on the bottom so the card
     sits flush against .footer, which also has 0 on its matching top edge. */
  padding: var(--edge-gutter) var(--edge-gutter) 0;
}

.ix-cta__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(260px, 24vw, 380px);
  /* Square bottom corners — .footer__card's top corners are square too, so
     the two sit flush as one continuous shape instead of a rounded edge
     meeting a sharp one. */
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.ix-cta__media {
  position: absolute;
  inset: 0;
  background-color: var(--gray);
  background-size: cover;
  background-position: 50% 90%;
  background-repeat: no-repeat;
}

.ix-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 26, 0.45);
}

.ix-cta__content {
  position: relative;
  z-index: 1;
  max-width: 940px;
  padding: clamp(36px, 4vw, 64px) clamp(20px, 3vw, 48px);
  text-align: center;
  color: #fff;
}

.ix-cta__content h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 600;
  line-height: 1.2;
}

.ix-cta__content p {
  margin: 0 auto clamp(22px, 2.4vw, 34px);
  max-width: 460px;
  font-size: clamp(13px, 0.85vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 1024px) {
  .ix-lines__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ix-lines__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ix-about,
  .ix-highlights__header {
    grid-template-columns: 1fr;
  }

  .ix-about {
    gap: clamp(28px, 5vw, 48px);
  }

  .ix-about__note-arrow {
    transform: rotate(6deg) rotate(180deg);
  }
}

@media (max-width: 767px) {
  .ix-cta__content h2 br,
  .ix-cta__content p br {
    display: none;
  }

  .ix-lines__grid {
    grid-template-columns: 1fr;
  }

  .ix-card__label {
    font-size: 12px;
  }
}