/* ============================================================
   InteriorMates — Landing (InteriorBuddy Landing.dc.html)
   Design converted from the Claude Design source to classes
   (page CSP blocks inline styles). Loaded after styles.css.
   Lead cards (.lc) are intentionally NOT styled here.
============================================================ */

:root {
  --ease-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1200px;
  --pad-x: clamp(16px, 4vw, 32px);
  --sect-y: clamp(3rem, 6vw, 5rem);
}

::selection { background: #171a17; color: #f6f4ed; }

/* ---------- Keyframes (from design) ---------- */
@keyframes ibWordUp { from { opacity: 0; transform: translateY(110%) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes ibFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ibMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ibPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.72); } }
@keyframes ibCardIn { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ibProgress { from { width: 0%; } to { width: 100%; } }
@keyframes ibFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(3deg); } }
@keyframes ibIntroOut { 0%, 55% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes ibDraw { to { stroke-dashoffset: 0; } }
@keyframes ibFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ibSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ib-landing *, .ib-landing *::before, .ib-landing *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.ib-wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.ib-eyebrow { margin: 0 0 12px; color: #47766e; font-size: 11px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
.ib-h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; margin: 0; }

/* ---------- Intro veil ---------- */
.ib-veil {
  position: fixed; inset: 0; z-index: 120;
  background: #faf7f0; display: grid; place-items: center;
  pointer-events: none;
  animation: ibIntroOut 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.75s both;
}

/* Pendulum logo loader (Logo Loader C): the lamp swings, the door breathes
   open and shut. One 2s cycle = Sweep 0.7s + Open 0.6s + Return 0.7s. */
.ib-veil__stack {
  /* Single source of truth: the logo and the wordmark both derive from this,
     so their proportions stay locked at every viewport size. */
  --ib-loader-w: clamp(190px, 34vmin, 330px);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--ib-loader-w) * 0.04);
}
.ib-veil__logo { width: var(--ib-loader-w); height: auto; display: block; }
.ib-veil__word {
  margin: 0; font-family: var(--font-serif); font-weight: 700;
  /* "InteriorMates" measures 7.365em in Georgia bold, so dividing the mark's
     width by that makes the wordmark span exactly the same width. */
  font-size: calc(var(--ib-loader-w) / 7.365);
  letter-spacing: 0.01em;
  color: var(--color-brand);
  animation: ibFadeUp 0.7s var(--ease-expo) 0.15s both;
}
.ib-veil__lamp {
  transform-box: view-box; transform-origin: 84.5px 50.5px;
  animation: ibLampSwing 2s ease-in-out infinite;
}
.ib-veil__door {
  transform-box: view-box; transform-origin: 270.5px 220px;
  animation: ibDoorSwing 2s infinite;
}
.ib-veil__knob { animation: ibKnobFade 2s infinite; }
.ib-veil__overlay { animation: ibDoorVeil 2s infinite; }

@keyframes ibLampSwing {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(7deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-7deg); }
  100% { transform: rotate(0deg); }
}
@keyframes ibDoorSwing {
  0%, 35%    { transform: scaleX(0.04); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  57.5%      { transform: scaleX(1); }
  66.75%     { transform: scaleX(1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  93%, 100%  { transform: scaleX(0.04); }
}
@keyframes ibKnobFade {
  0%, 35%       { opacity: 0; }
  45%, 78%      { opacity: 1; }
  88%, 100%     { opacity: 0; }
}
@keyframes ibDoorVeil {
  0%, 35%   { opacity: 1; }
  38%, 90%  { opacity: 0; }
  93%, 100% { opacity: 1; }
}

/* ---------- Navbar ---------- */
.ib-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 244, 237, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(23, 26, 23, 0.08);
}
.ib-nav__row {
  max-width: var(--wrap); margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ib-nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.ib-nav__mark {
  height: 38px; width: auto; display: block; flex-shrink: 0;
}
/* Sized against the 38px logo mark beside it. At 18px the wordmark was less
   than half the mark's height and read as a caption rather than half of a
   lockup. Fluid so it eases down on narrow screens, where the mark is the
   part that has to stay legible. */
.ib-nav__word {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-brand);
}
.ib-nav__chip {
  font-size: 10.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase;
  color: #47766e; background: #e9f2eb; padding: 3px 8px; border-radius: 999px; margin-left: 2px;
}
.ib-nav__links { display: flex; align-items: center; gap: 28px; }
.ib-nav__links a { text-decoration: none; font-size: 14px; color: #77766f; font-weight: 500; transition: color 0.2s ease; }
.ib-nav__links a:hover { color: #171a17; }
.ib-nav__actions { display: flex; align-items: center; gap: 12px; }
.ib-nav__login { text-decoration: none; font-size: 14px; font-weight: 700; color: #171a17; }
.ib-btn-ink {
  display: inline-block; text-decoration: none; font-size: 14px; font-weight: 700;
  color: #f6f4ed; background: #171a17; padding: 10px 18px; border-radius: 999px;
  transition: background 0.25s ease; border: 0; cursor: pointer; font-family: inherit;
}
.ib-btn-ink:hover { background: #2b2e28; color: #f6f4ed; }
.ib-nav__burger {
  display: none; flex-direction: column; gap: 5px; padding: 12px 10px;
  background: transparent; border: none; cursor: pointer;
}
.ib-nav__burger span {
  display: block; width: 22px; height: 2px; background: #171a17; border-radius: 2px;
  transition: transform 0.3s var(--ease-expo);
}
.ib-nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.ib-nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.ib-nav__menu {
  border-top: 1px solid #dfdbd1; background: #fbfaf6;
  padding: 12px var(--pad-x) 20px;
  display: flex; flex-direction: column; gap: 2px;
  animation: ibFadeUp 0.3s ease both;
}
.ib-nav__menu[hidden] { display: none; }
.ib-nav__menu a {
  text-decoration: none; font-size: 16px; color: #171a17; font-weight: 600;
  padding: 12px 4px; border-bottom: 1px solid #dfdbd1;
}
.ib-nav__menu-cta { display: flex; gap: 10px; margin-top: 16px; }
.ib-nav__menu-cta a {
  flex: 1; text-align: center; font-size: 15px; font-weight: 700;
  padding: 13px 18px; border-radius: 999px; border-bottom: 0;
}
.ib-nav__menu-cta a:first-child { color: #f6f4ed; background: #171a17; }
.ib-nav__menu-cta a:last-child { color: #171a17; border: 1px solid #dfdbd1; }
.ib-nav__progress { height: 2px; background: #47766e; transform: scaleX(0); transform-origin: left center; }
@media (max-width: 900px) {
  .ib-nav__links, .ib-nav__actions, .ib-nav__chip { display: none; }
  .ib-nav__burger { display: flex; }
}
@media (min-width: 901px) { .ib-nav__menu { display: none !important; } }

/* ---------- Hero ---------- */
.ib-hero { position: relative; overflow: hidden; }
.ib-hero__plan {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(105deg, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.7) 48%, #000 60%);
  mask-image: linear-gradient(105deg, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.7) 48%, #000 60%);
}
.ib-hero__plan svg {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-60%, -68%);
  width: min(32vw, 380px); height: auto;
}
@media (max-width: 900px) {
  .ib-hero__plan svg { width: min(62vw, 300px); transform: translate(-50%, -62%); opacity: 0.8; }
}
.ib-plan-walls   { animation: ibDraw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 1.2s both; }
.ib-plan-inner   { animation: ibDraw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 1.7s both; }
.ib-plan-doors   { animation: ibDraw 1.2s cubic-bezier(0.65, 0, 0.35, 1) 2.1s both; }
.ib-plan-sofa    { animation: ibDraw 1.3s cubic-bezier(0.65, 0, 0.35, 1) 2.3s both; }
.ib-plan-table   { animation: ibDraw 1s cubic-bezier(0.65, 0, 0.35, 1) 2.5s both; }
.ib-plan-rug     { animation: ibFadeIn 0.8s ease 2.7s both; }
.ib-plan-bed     { animation: ibDraw 1.3s cubic-bezier(0.65, 0, 0.35, 1) 2.4s both; }
.ib-plan-pillows { animation: ibDraw 1s cubic-bezier(0.65, 0, 0.35, 1) 2.65s both; }
.ib-plan-kitchen { animation: ibDraw 1.2s cubic-bezier(0.65, 0, 0.35, 1) 2.55s both; }
.ib-plan-hob1    { animation: ibDraw 0.8s ease 2.8s both; }
.ib-plan-hob2    { animation: ibDraw 0.8s ease 2.9s both; }
.ib-plan-dining  { animation: ibDraw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 2.6s both; }
.ib-plan-chairs  { animation: ibDraw 1.2s ease 2.8s both; }
.ib-plan-dim     { animation: ibDraw 1.2s cubic-bezier(0.65, 0, 0.35, 1) 3s both; }
.ib-plan-label   { font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.28em; fill: rgba(111, 112, 104, 0.6); animation: ibFadeIn 1s ease 3s both; }
.ib-plan-label--2 { animation-delay: 3.1s; }
.ib-plan-label--3 { animation-delay: 3.2s; }
.ib-plan-dimtext { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.22em; fill: rgba(71, 118, 110, 0.65); animation: ibFadeIn 1s ease 3.3s both; }

.ib-hero__blob {
  position: absolute; right: -120px; bottom: -140px;
  width: 460px; height: 460px; border-radius: 50%;
  background: #dfded5; opacity: 0.65; pointer-events: none;
  animation: ibFloat 11s ease-in-out infinite;
}
.ib-hero__ring {
  position: absolute; left: -160px; top: 10%;
  width: 400px; height: 400px; border-radius: 50%;
  border: 1px solid rgba(23, 26, 23, 0.09); pointer-events: none;
}
.ib-hero__grid {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--pad-x) clamp(4rem, 9vw, 6.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem); align-items: center;
}
/* Tighten the gap between the navbar and the kicker on mobile. */
@media (max-width: 768px) {
  .ib-hero__grid { padding-top: 1.5rem; }
}
.ib-hero__kickwrap { overflow: hidden; margin-bottom: 20px; }
/* ---------------------------------------------------------------------------
   Welcome-credit badge above the headline (design 1a)
   ---------------------------------------------------------------------------
   One pill: a gift mark, the offer, and the action. The whole thing is the
   link, so there is a single target rather than a label next to a button.

   min-height 44px is the tap target; the inner "Claim" pill is allowed to be
   shorter because it is decoration inside that target, not a second control.


/* The pill is wider than a phone once the amount is in it, so below 430px the
   text wraps to a second line and the row aligns to the top rather than
   centring a two-line block against a 28px circle.

   The gap stays the single spacing rule between all three parts. An earlier
   `margin-left: auto` on the action pushed it to the far edge whenever the
   badge filled its column, which left the text stranded against the icon with
   a hole before "Claim" — the three parts have to read as one group at every
   width, not spread to the corners. */
@media (max-width: 430px) {
}

@media (prefers-reduced-motion: reduce) {
}

.ib-hero__kicker {
  margin: 0; color: #47766e; font-size: 11.5px; font-weight: 750;
  letter-spacing: 0.14em; text-transform: uppercase;
  animation: ibWordUp 0.7s var(--ease-expo) 1.25s both;
}
.ib-hero__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.7rem, 6vw, 4.4rem); line-height: 1.12;
  letter-spacing: -0.01em; margin: 0 0 24px;
  color: #171a17;
}
.ib-hero__title em { font-style: italic; color: #47766e; }
/* Smaller headline on mobile (placed after the base rule so it wins the cascade). */
@media (max-width: 768px) {
  .ib-hero__title { font-size: clamp(1.95rem, 8vw, 2.5rem); line-height: 1.15; margin-bottom: 18px; }
}
.ib-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.ib-word > span { display: inline-block; animation: ibWordUp 0.9s var(--ease-expo) both; }
.ib-word--1 > span { animation-delay: 1.35s; }
.ib-word--2 > span { animation-delay: 1.45s; }
.ib-word--3 > span { animation-delay: 1.55s; }
.ib-hero__sub {
  font-size: clamp(16px, 2vw, 18px); color: #77766f;
  /* No bottom margin: whatever follows owns the gap. This used to be 32px,
     which collapsed against the credit block's 24px top margin and silently
     won, so the designed spacing was never what rendered. */
  margin: 0; max-width: 32rem;
  animation: ibFadeUp 0.9s var(--ease-expo) 1.75s both;
}
/* Short sub copy on mobile so the live lead cards surface sooner. */
.ib-hero__sub--short { display: none; }
@media (max-width: 768px) {
  .ib-hero__sub--full { display: none; }
  .ib-hero__sub--short { display: inline; }
  .ib-hero__sub { margin-bottom: 0; }
}
.ib-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; animation: ibFadeUp 0.9s var(--ease-expo) 1.9s both; }
.ib-btn-hero {
  display: inline-block; text-decoration: none; font-size: 15px; font-weight: 750;
  color: #f6f4ed; background: #171a17; padding: 15px 28px; border-radius: 999px;
  transition: background 0.25s ease;
}
.ib-btn-hero:hover { background: #2b2e28; color: #f6f4ed; }
.ib-btn-ghost {
  display: inline-block; text-decoration: none; font-size: 15px; font-weight: 750;
  color: #171a17; background: transparent; border: 1px solid rgba(23, 26, 23, 0.22);
  padding: 15px 28px; border-radius: 999px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ib-btn-ghost:hover { border-color: #171a17; background: rgba(253, 252, 248, 0.7); color: #171a17; }
.ib-hero__proof { display: flex; align-items: center; gap: 14px; margin-top: 34px; animation: ibFadeUp 0.9s var(--ease-expo) 2.05s both; }
.ib-hero__avatars { display: flex; padding: 0; margin: 0; list-style: none; }
.ib-hero__avatars li { margin-left: -10px; }
.ib-hero__avatars li:first-child { margin-left: 0; }
.ib-hero__avatars span {
  display: inline-grid; width: 38px; height: 38px; place-items: center;
  color: #171a17; background: #fdfcf8; border: 1px solid #dfdbd1;
  border-radius: 50%; font-size: 11px; font-weight: 750;
}
.ib-hero__proof p { margin: 0; color: #77766f; font-size: 14px; }
.ib-hero__proof strong { color: #171a17; }

/* Hero live-feed panel (frame around the existing lead card carousel) */
.ib-feedpanel { width: min(100%, 30rem); margin: 0 auto; animation: ibFadeUp 1s var(--ease-expo) 2s both; }
.ib-feedpanel__card {
  padding: 20px; color: #171a17;
  background: rgba(253, 252, 248, 0.88);
  border: 1px solid #dfdbd1; border-radius: 8px;
  box-shadow: 0 1.25rem 3.75rem rgba(38, 38, 31, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ib-feedpanel__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #dfdbd1;
}
.ib-feedpanel__head p {
  margin: 0; color: #77766f; font-size: 11px; font-weight: 750;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ib-live { display: inline-flex; align-items: center; gap: 6px; color: #47766e; font-size: 13px; font-weight: 700; }
.ib-live i { width: 7px; height: 7px; border-radius: 50%; background: #47766e; animation: ibPulse 1.8s ease-in-out infinite; }
.ib-feedpanel__progress { height: 3px; background: #dfdbd1; border-radius: 999px; margin-top: 14px; overflow: hidden; }
.ib-feedpanel__progress span { display: block; height: 100%; width: 0; background: #47766e; border-radius: 999px; }
/* Carousel is draggable */
.ib-feedpanel .lead-carousel__viewport { cursor: grab; touch-action: pan-y; }
.ib-feedpanel .lead-carousel.is-dragging .lead-carousel__viewport { cursor: grabbing; }
.ib-feedpanel .lead-carousel.is-dragging { user-select: none; }
.ib-feedpanel__stats {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px 2px; margin: 12px 0 0;
  border-top: 1px solid #dfdbd1; text-align: center;
}
.ib-feedpanel__stats > div { flex: 1; }
.ib-feedpanel__stats dt { font-family: var(--font-serif); font-size: 24px; }
.ib-feedpanel__stats dd { margin: 2px 0 0; color: #77766f; font-size: 12px; }
.ib-feedpanel .lead-carousel { margin: 0; }
.ib-feedpanel .lead-carousel__dots { margin-top: 10px; }

/* ---------- Marquee ---------- */
.ib-marquee {
  border-top: 1px solid #dfdbd1; border-bottom: 1px solid #dfdbd1;
  background: #fbfaf6; overflow: hidden; padding: 18px 0;
}
.ib-marquee__track { display: flex; width: max-content; animation: ibMarquee 30s linear infinite; }
.ib-marquee:hover .ib-marquee__track { animation-play-state: paused; }
.ib-marquee__set { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.ib-marquee__set span { font-family: var(--font-serif); font-size: 17px; color: #171a17; white-space: nowrap; }
.ib-marquee__set i { color: #47766e; font-style: normal; }

/* ---------- Stats ---------- */
.ib-stats { background: #fbfaf6; }
.ib-stats dl {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--pad-x) clamp(2.5rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px; text-align: center;
}
.ib-stats dt { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3rem); color: #171a17; font-variant-numeric: tabular-nums; }
.ib-stats dd { margin: 4px 0 0; color: #77766f; font-size: 13.5px; }

/* ---------- How it works ---------- */
.ib-how { background: #fbfaf6; border-top: 1px solid #dfdbd1; }
.ib-how__inner { max-width: var(--wrap); margin: 0 auto; padding: var(--sect-y) var(--pad-x) clamp(1.75rem, 3.5vw, 2.5rem); }
.ib-how__head { max-width: 44rem; margin: 0 auto clamp(2.5rem, 6vw, 4rem); text-align: center; }
.ib-how__steps-wrap { position: relative; }
.ib-how__connector {
  position: absolute; top: 54px; left: 18%; right: 18%; height: 2px;
  background: repeating-linear-gradient(to right, #cfcabd 0 7px, transparent 7px 15px);
  z-index: 0; transform-origin: left center;
}
@media (max-width: 900px) { .ib-how__connector { display: none; } }
.ib-how__steps {
  position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 32px;
}
.ib-how__step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; }
.ib-how__label { margin: 0 0 18px; color: #47766e; font-size: 11px; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
.ib-how__icon {
  position: relative; display: inline-grid; width: 88px; height: 88px; place-items: center;
  margin-bottom: 24px; color: #171a17; background: #fdfcf8;
  border: 1px solid #dfdbd1; border-radius: 50%;
  box-shadow: 0 1.25rem 3.75rem rgba(38, 38, 31, 0.08);
  outline: 8px solid #fbfaf6;
  transition: transform 0.32s var(--ease-expo), box-shadow 0.32s ease, color 0.32s ease;
}
.ib-how__step:hover .ib-how__icon {
  transform: translateY(-6px);
  box-shadow: 0 1.6rem 3rem rgba(38, 38, 31, 0.18);
  color: #47766e;
}
.ib-how__step h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: #171a17; max-width: 18rem; }
.ib-how__step p { font-size: 14.5px; color: #77766f; margin: 0; max-width: 20rem; }

/* ---------- Live requirements feed ---------- */
.ib-feed { border-top: 1px solid #dfdbd1; }
.ib-feed__inner { max-width: var(--wrap); margin: 0 auto; padding: var(--sect-y) var(--pad-x); }
.ib-feed__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.ib-feed__head > div { max-width: 40rem; }
.ib-feed__hint { margin: 0; font-size: 13.5px; color: #85847c; }
.ib-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.ib-chip {
  padding: 9px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 750;
  cursor: pointer; font-family: inherit;
  color: #77766f; background: transparent; border: 1px solid #dfdbd1;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ib-chip:hover { border-color: #171a17; color: #171a17; }
.ib-chip.is-on { color: #f6f4ed; background: #171a17; border-color: #171a17; }
.ib-feed__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .ib-feed__grid { grid-template-columns: 1fr; } }
.ib-feed__item.is-hidden { display: none; }
.ib-feed__item.is-in { animation: ibCardIn 0.5s var(--ease-expo) both; }
.ib-feed__banner {
  margin-top: 24px; background: #fbfaf6; border: 1px solid #dfdbd1; border-radius: 8px;
  padding: 18px 22px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.ib-feed__banner-left { display: flex; align-items: center; gap: 14px; }
.ib-feed__banner-icon {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  color: #f6f4ed; background: #171a17; border-radius: 8px; flex-shrink: 0;
}
.ib-feed__banner-title { font-weight: 700; font-size: 14.5px; color: #171a17; }
.ib-feed__banner-sub { font-size: 13px; color: #77766f; }
.ib-feed__banner .ib-btn-ink { white-space: nowrap; padding: 11px 20px; }

/* ---------- Top designers scroller ---------- */
.ib-designers { background: #fbfaf6; border-top: 1px solid #dfdbd1; overflow: hidden; }
.ib-designers__inner { max-width: var(--wrap); margin: 0 auto; padding: var(--sect-y) var(--pad-x); }
.ib-designers__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 36px;
}
.ib-designers__navbtns { display: flex; gap: 10px; }
.ib-designers__navbtns button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #dfdbd1;
  background: #fdfcf8; color: #171a17; font-size: 16px; cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.ib-designers__navbtns button:hover { background: #171a17; color: #f6f4ed; }
.ib-designers__navbtns button:first-child:hover { transform: translateX(-2px); }
.ib-designers__navbtns button:last-child:hover { transform: translateX(2px); }
.ib-designers__list {
  display: flex; gap: 16px; padding: 4px; margin: -4px;
  list-style: none; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth;
}
.ib-designers__list::-webkit-scrollbar { display: none; }
.ib-designers__list li { flex: 0 0 min(82vw, 21rem); scroll-snap-align: start; }
.ib-designer-card {
  height: 100%; background: #f6f4ed; border: 1px solid #dfdbd1; border-radius: 8px; padding: 24px;
  transition: transform 0.35s var(--ease-expo), box-shadow 0.35s ease;
}
.ib-designer-card:hover { transform: translateY(-5px); box-shadow: 0 1.25rem 3.75rem rgba(38, 38, 31, 0.1); }
.ib-designer-card__top { display: flex; align-items: center; gap: 14px; }
.ib-designer-card__avatar {
  width: 52px; height: 52px; border-radius: 50%; background: #171a17;
  display: flex; align-items: center; justify-content: center;
  color: #f6f4ed; font-family: var(--font-serif); font-size: 18px; flex-shrink: 0;
}
.ib-designer-card__name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; }
.ib-designer-card__name i { color: #47766e; font-size: 13px; font-style: normal; }
.ib-designer-card__meta { font-size: 12.5px; color: #85847c; }
.ib-designer-card__rating { display: flex; align-items: center; gap: 8px; margin: 16px 0; }
.ib-designer-card__rating strong { font-weight: 700; font-size: 14px; color: #171a17; }
.ib-designer-card__rating span { font-size: 12.5px; color: #85847c; }
.ib-designer-card__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ib-designer-card__tags span {
  font-size: 11px; font-weight: 750; color: #47766e; background: #e9f2eb;
  padding: 5px 11px; border-radius: 999px;
}

/* ---------- Pricing (dark forest) ---------- */
.ib-pricing { position: relative; overflow: hidden; color: #f6f4ed; background: #1b2222; }
.ib-pricing__ring1 {
  position: absolute; right: -8rem; top: -10rem; width: 34rem; height: 34rem;
  border: 1px solid rgba(246, 244, 237, 0.08); border-radius: 50%; pointer-events: none;
}
.ib-pricing__ring2 {
  position: absolute; left: -6rem; bottom: -12rem; width: 26rem; height: 26rem;
  border: 1px dashed rgba(246, 244, 237, 0.07); border-radius: 50%; pointer-events: none;
  animation: ibSpin 90s linear infinite;
}
.ib-pricing__inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: var(--sect-y) var(--pad-x); }
.ib-pricing__head { text-align: center; max-width: 42rem; margin: 0 auto 44px; }
.ib-pricing__head .ib-eyebrow { color: rgba(246, 244, 237, 0.62); }
.ib-pricing__head .ib-h2 { color: #f6f4ed; margin-bottom: 12px; }
.ib-pricing__head p { font-size: 16px; color: rgba(246, 244, 237, 0.68); margin: 0; }
.ib-pricing__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 16px; align-items: stretch;
}
.ib-price-calc {
  background: #252b2c; border: 1px solid rgba(246, 244, 237, 0.1); border-radius: 8px;
  padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column;
}
.ib-price-calc h3 {
  font-size: 13px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(246, 244, 237, 0.62); margin: 0 0 20px;
}
.ib-chip--dark { color: rgba(246, 244, 237, 0.72); border-color: rgba(246, 244, 237, 0.22); }
.ib-chip--dark:hover { color: #f6f4ed; border-color: rgba(246, 244, 237, 0.6); }
.ib-chip--dark.is-on { color: #171a17; background: #f6f4ed; border-color: #f6f4ed; }
.ib-price-calc__result { margin-top: 28px; }
.ib-price-calc__result.is-in { animation: ibCardIn 0.5s var(--ease-expo) both; }
.ib-price-calc__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ib-price-calc__big {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(3.4rem, 7vw, 5rem); line-height: 1; color: #f6f4ed;
}
.ib-price-calc__per { font-size: 14px; color: rgba(246, 244, 237, 0.62); }
.ib-price-calc__note { margin: 14px 0 0; font-size: 13.5px; color: rgba(246, 244, 237, 0.62); max-width: 26rem; }
.ib-price-calc__fine { font-size: 12.5px; color: rgba(246, 244, 237, 0.5); margin: auto 0 0; padding-top: 20px; }
.ib-pricing__cards { display: grid; gap: 16px; }
.ib-plan-kicker { font-size: 13px; font-weight: 750; color: rgba(246, 244, 237, 0.62); text-transform: uppercase; letter-spacing: 0.04em; }
.ib-plan-price { font-family: var(--font-serif); font-size: 28px; color: #f6f4ed; margin: 6px 0 8px; }
.ib-plan-solo {
  background: #6f7068; border: 1px solid rgba(246, 244, 237, 0.1); border-radius: 8px; padding: 26px;
  display: flex; flex-direction: column; height: 100%;
  transition: transform 0.35s var(--ease-expo), box-shadow 0.35s ease;
}
.ib-plan-solo:hover { transform: translateY(-4px); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.3); }
.ib-plan-solo__lead { font-size: 14px; color: rgba(246, 244, 237, 0.85); margin: 0 0 20px; line-height: 1.55; }
.ib-plan-solo__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.ib-plan-solo__list li {
  position: relative; padding-left: 24px;
  font-size: 14px; line-height: 1.4; color: rgba(246, 244, 237, 0.82);
}
.ib-plan-solo__list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  font-weight: 750; color: #f6f4ed;
}
.ib-plan-solo__cta {
  display: inline-block; align-self: flex-start; margin-top: auto;
  text-decoration: none; font-size: 14px; font-weight: 750;
  color: #171a17; background: #f6f4ed; padding: 11px 20px; border-radius: 999px;
}

/* ---------- Why InteriorMates (proof panel) ---------- */
.section.ib-why { padding: var(--sect-y) 0; }
.ib-why__head { max-width: 34rem; margin-bottom: 40px; }
.ib-why__head .eyebrow { color: var(--color-sage-ink); }
.ib-why__head h2 {
  margin: 0 0 18px; color: var(--color-ink);
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 2.875rem); line-height: 1.08;
}
.ib-why__head p { margin: 0; color: var(--color-muted); font-size: 16.5px; line-height: 1.6; }
.ib-why__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.ib-why__item { display: flex; gap: 16px; align-items: flex-start; }
.ib-why__icon {
  display: inline-grid; place-items: center; flex: 0 0 42px;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--color-sage); color: var(--color-sage-ink);
  box-shadow: 0 0.35rem 0.8rem rgba(38, 38, 31, 0.08);
}
.ib-why__body h3 { margin: 0 0 4px; color: var(--color-ink); font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.ib-why__body p { margin: 0; color: var(--color-muted); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 768px) {
  .ib-why__head { margin-bottom: 34px; }
  .ib-why__head h2 { font-size: 2rem; }
  .ib-why__list { grid-template-columns: 1fr; gap: 20px; }
  .ib-why__icon { flex-basis: 44px; width: 44px; height: 44px; }
}

/* ---------- FAQ ---------- */
.ib-faq { background: #fbfaf6; }
.ib-faq__inner { max-width: 820px; margin: 0 auto; padding: var(--sect-y) var(--pad-x); }
.ib-faq__head { text-align: center; margin-bottom: 40px; }
.ib-faq__list { display: grid; gap: 12px; }
.ib-faq__item {
  background: #f6f4ed; border: 1px solid #dfdbd1; border-radius: 8px;
  overflow: hidden; transition: border-color 0.3s ease;
}
.ib-faq__item:hover { border-color: #cfcabd; }
.ib-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; background: transparent; border: none; cursor: pointer;
  text-align: left; font-weight: 700; font-size: 16.5px; color: #171a17; font-family: inherit;
}
.ib-faq__plus {
  flex-shrink: 0; color: #47766e; font-size: 22px; font-weight: 400; line-height: 1;
  transition: transform 0.3s var(--ease-expo);
}
.ib-faq__item.is-open .ib-faq__plus { transform: rotate(45deg); }
.ib-faq__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-expo);
}
.ib-faq__item.is-open .ib-faq__panel { grid-template-rows: 1fr; }
.ib-faq__panel > div { overflow: hidden; }
.ib-faq__panel p { margin: 0; padding: 0 22px 20px; font-size: 14.5px; color: #77766f; }

/* ---------- Final CTA ---------- */
.ib-join { position: relative; overflow: hidden; background: #6f7068; color: #f6f4ed; text-align: center; }
.ib-join__ring {
  position: absolute; left: 50%; top: -14rem; width: 36rem; height: 36rem; margin-left: -18rem;
  border: 1px solid rgba(246, 244, 237, 0.14); border-radius: 50%; pointer-events: none;
}
.ib-join__inner { position: relative; max-width: 48rem; margin: 0 auto; padding: var(--sect-y) var(--pad-x); }
.ib-join h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.06; margin: 0; color: #f6f4ed;
}
.ib-join h2 em { font-style: italic; }
.ib-join__sub { margin: 18px 0 0; color: rgba(246, 244, 237, 0.72); font-size: 16px; }
.ib-join__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.ib-btn-paper {
  display: inline-block; text-decoration: none; font-size: 15.5px; font-weight: 750;
  color: #171a17; background: #f6f4ed; padding: 16px 32px; border-radius: 999px;
}
.ib-btn-outline-paper {
  display: inline-block; text-decoration: none; font-size: 15.5px; font-weight: 750;
  color: #f6f4ed; background: transparent; border: 1px solid rgba(246, 244, 237, 0.4);
  padding: 16px 32px; border-radius: 999px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ib-btn-outline-paper:hover { border-color: #f6f4ed; background: rgba(246, 244, 237, 0.08); color: #f6f4ed; }
.ib-join__note { margin: 24px 0 0; font-size: 13.5px; color: rgba(246, 244, 237, 0.7); }

/* ---------- Footer ---------- */
.ib-footer { background: #f6f4ed; border-top: 1px solid #dfdbd1; color: #171a17; }
.ib-footer__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 32px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ib-footer__links { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 0; margin: 0; list-style: none; }
.ib-footer__links a { color: #77766f; font-size: 13.5px; text-decoration: none; transition: color 0.2s ease; }
.ib-footer__links a:hover { color: #171a17; }
.ib-footer__copy { margin: 0; color: #85847c; font-size: 13px; }

/* ---------- Custom cursor (JS positions) ---------- */
/* Architect's drafting reticle — a measurement crosshair (interior/blueprint theme) */
.cursor-dot,
.cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  will-change: transform;
}
.cursor-dot {
  /* Pencil — the tip sits on the exact pointer position */
  width: 22px; height: 22px; margin: -20px 0 0 -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23fdfcf8' stroke='%2347766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
}
/* Trailing set square removed — pencil only */
.cursor-ring { display: none; }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* Reveal pre-state safety: if GSAP fails, everything stays visible */
[data-reveal], [data-reveal-group] > * { opacity: 1; }

/* ---------------------------------------------------------------------------
   Floating WhatsApp shortcut (home/partials/_whatsapp.blade.php)
   ---------------------------------------------------------------------------
   Collapsed it is a 56px circle; hover or keyboard focus expands it to reveal
   the label. The expansion animates max-width rather than toggling display, so
   the hit area grows outward from the anchored right edge and never jumps out
   from under the pointer.

   WhatsApp's own green rather than a site token: the whole value of this
   control is being recognised at a glance, which a sage-green circle would
   lose.
--------------------------------------------------------------------------- */
.ib-wa {
  --ib-wa-green: #25d366;
  --ib-wa-green-dark: #1da851;

  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  /* Above the sticky header (100), below the intro veil (.ib-veil, 120) so the
     button does not float over the loading animation. The custom cursor (200)
     and the skip link (1000) stay above it, which is right for both. */
  z-index: 110;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 56px;
  height: 56px;
  padding: 0 15px;
  box-sizing: border-box;
  overflow: hidden;

  background: var(--ib-wa-green);
  color: #fff;
  border-radius: var(--pill-radius, 999px);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.34), 0 2px 8px rgba(23, 26, 23, 0.16);
  text-decoration: none;
  transition: max-width 0.32s var(--ease-expo, cubic-bezier(0.22, 1, 0.36, 1)),
              background-color 0.2s ease,
              box-shadow 0.2s ease,
              transform 0.2s ease;
}

.ib-wa__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
}

.ib-wa__label {
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.005em;
  /* Fades slightly behind the width so the text is not stretched mid-reveal. */
  opacity: 0;
  transition: opacity 0.18s ease 0.08s;
}

.ib-wa:hover,
.ib-wa:focus-visible {
  max-width: 220px;
  background: var(--ib-wa-green-dark);
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.42), 0 2px 10px rgba(23, 26, 23, 0.2);
  transform: translateY(-1px);
}

.ib-wa:hover .ib-wa__label,
.ib-wa:focus-visible .ib-wa__label { opacity: 1; }

.ib-wa:focus-visible {
  outline: 3px solid var(--color-ink, #171a17);
  outline-offset: 3px;
}

/* Touch devices have no hover, so the label would never appear and the control
   would read as an unlabelled circle. Show it from the start instead. */
@media (hover: none) {
  .ib-wa { max-width: 220px; }
  .ib-wa__label { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ib-wa, .ib-wa__label { transition: none; }
  .ib-wa:hover, .ib-wa:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------------
   Hero typewriter (home/partials/_hero.blade.php)
   ---------------------------------------------------------------------------
   The second heading line types itself out and rotates between two phrases.
   It carries the same emphasis treatment the hero already uses for its
   changing phrases, so the line reads as the variable half of the headline.

   min-height holds the line's box while the text is mid-erase, or the hero
   below it would jump up and down on every cycle.
--------------------------------------------------------------------------- */
/* Scoped through .ib-word--2 to outrank `.ib-word > span` (0,1,1), which sets
   display:inline-block for the slide-up animation and would otherwise win on
   specificity and leave the sizers flowing one under another. */
.ib-word--2 .ib-type {
  /* Every child occupies the same cell, so the row is as tall as the tallest
     phrase at the current width — which is what keeps the page still when one
     phrase wraps to two lines and another does not. */
  display: grid;
}

.ib-word--2 .ib-type > * {
  grid-area: 1 / 1;
}

/* Hidden but still measured. display:none would defeat the whole point. */
.ib-type__sizer {
  visibility: hidden;
}

.ib-type__text {
  font-style: italic;
  color: #47766e;
}

/* The rotating line keeps its own line even while the text is empty
   mid-erase. As an inline-block it collapsed to zero width and tucked up onto
   line one, dropping the heading from two lines to one. Its height now comes
   from the sizers above rather than a one-line min-height, which was only ever
   right until a phrase wrapped. */
.ib-word--2 {
  display: block;
}

/* The caret is a pseudo-element on the emphasis rather than its own span.
   As a sibling element it could wrap onto a line by itself — which it did,
   leaving a bar blinking under the headline. Attached to the text it has
   nowhere else to go. */
.ib-type.is-typing .ib-type__live .ib-type__text::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.82em;
  margin-left: 0.06em;
  vertical-align: baseline;
  background: #47766e;
  /* steps(1) gives a hard on/off blink; a fade reads as a glow at this size. */
  animation: ibCaretBlink 1s steps(1, end) infinite;
}

@keyframes ibCaretBlink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ib-type .ib-type__text::after { content: none; }
}

/* The lead half of a rotating phrase keeps the heading's own ink and upright
   face; only the emphasis half takes the green italic. Same split the static
   headline used before it started rotating. */
.ib-type__lead {
  font-style: normal;
  color: var(--color-ink, #171a17);
}

/* On phones the emphasis takes its own line, so the headline reads
   "Get 100% / Qualified Leads" instead of breaking wherever it runs out of
   room and stranding a single word.

   :not(:empty) is what makes this safe to animate. While the lead is still
   typing the emphasis has no text, stays inline, and the caret sits at the end
   of the line being typed. The moment it has a character it becomes a block
   and takes the caret with it. A pseudo-element does not count as content, so
   the caret never keeps it out of :empty. */
@media (max-width: 768px) {
  /* Both the live line and the sizers: a sizer that stays inline measures one
     line while the live line takes two, and the height it is there to reserve
     is the wrong one. */
  .ib-type .ib-type__text:not(:empty) { display: block; }
}

/* ---- Hero signup credit (design 2c) ----
   The amount as a numeral between hairline rules, sitting directly above the
   Join free button. It replaced a pill above the headline: two small blocks
   competing over one headline read as a banner, and the offer belongs next to
   the action it justifies. Static text — the button below is the only target. */
.ib-hero__credit {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 420px;
  /* The entire gap to the subhead above, since that element contributes none.
     Tighter than the canvas's 24px by request — the hairline rule already
     separates the two, so the space was doing the job twice. */
  margin: 16px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.ib-hero__credit-num {
  flex: none;
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-sage-ink);
  /* Tabular figures so the amount does not reflow if the price changes. */
  font-variant-numeric: tabular-nums;
}

.ib-hero__credit-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ib-hero__credit-txt strong {
  font-size: 15px;
  font-weight: 750;
  color: var(--color-ink);
}

.ib-hero__credit-txt span {
  font-size: 13.5px;
  color: var(--color-muted);
}

.ib-hero__credit + .ib-hero__cta { margin-top: 20px; }

/* The design sizes this with a container query at 600px; the hero column is
   not a container, so the equivalent viewport breakpoint is used instead. */
@media (min-width: 600px) {
  .ib-hero__credit-num { font-size: 46px; }
}