/* =============================================================
   Creative Space Interiors - front page
   Scoped under .csi-fp so nothing leaks into the theme or the
   other CSI plugins.
   ============================================================= */

.csi-fp {
  --csi-cream: #f6f4ef;
  --csi-cream-deep: #f1efe7;
  --csi-cream-card: #fbfaf6;
  --csi-cream-footer: #efede6;

  --csi-ink: #2e2a26;
  --csi-ink-80: #4a453e;
  --csi-ink-70: #55504a;
  --csi-ink-50: #6b6559;
  --csi-ink-40: #8b857a;

  --csi-dark: #24201b;
  --csi-dark-btn: #24210e;

  --csi-lime: #a0be18;
  --csi-olive: #7c9a16;
  --csi-sage: #c9d69a;
  --csi-sage-tint: #dce8a8;
  --csi-plum: #7a1550;
  --csi-magenta: #a31456;
  --csi-brass: #c79a2e;

  --csi-rule: #e3e0d6;
  --csi-rule-mid: #d8d4c8;
  --csi-rule-warm: #ddd9cd;

  --csi-pad: 48px;
  --csi-max: 1180px;
  --csi-max-wide: 1320px;

  --csi-display: "Philosopher", Georgia, "Times New Roman", serif;
  --csi-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --csi-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  box-sizing: border-box;
  background: var(--csi-cream);
  color: var(--csi-ink-80);
  font-family: var(--csi-ui);
  -webkit-font-smoothing: antialiased;

  /*
   * The design is full-width but a page builder drops this inside its own
   * narrow column. This breaks each section out to the viewport.
   */
  width: auto;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.csi-fp *,
.csi-fp *::before,
.csi-fp *::after {
  box-sizing: inherit;
}

.csi-fp ::selection {
  background: var(--csi-sage-tint);
}

.csi-fp p {
  text-wrap: pretty;
}

.csi-fp img {
  display: block;
  max-width: 100%;
  border: 0;
  border-radius: 0;
}

/* ---------- Shared ------------------------------------------------- */

.csi-fp-eyebrow {
  margin: 0;
  color: var(--csi-olive);
  font-family: var(--csi-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.csi-fp-eyebrow--wide {
  letter-spacing: 0.2em;
}

.csi-fp-eyebrow--nowrap {
  white-space: nowrap;
}

.csi-fp-eyebrow--light {
  color: var(--csi-sage);
}

.csi-fp-h2 {
  margin: 0;
  color: var(--csi-ink);
  font-family: var(--csi-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 1;
}

.csi-fp-kicker {
  margin: 0;
  color: var(--csi-magenta);
  font-family: var(--csi-display);
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

.csi-fp-kicker--sm {
  font-style: normal;
  font-size: 28px;
}

.csi-fp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--csi-ink);
  margin-bottom: 22px;
}

.csi-fp-2col {
  display: grid;
  gap: 60px;
}

/* ---------- Buttons ------------------------------------------------ */

.csi-fp-btn,
.csi-fp-pill {
  display: inline-block;
  border: 1px solid transparent;
  font-family: var(--csi-ui);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 400ms var(--csi-ease), color 400ms var(--csi-ease),
    border-color 400ms var(--csi-ease);
}

.csi-fp-btn {
  padding: 14px 28px;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.csi-fp-pill {
  padding: 16px 34px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.14em;
}

.csi-fp-pill--lime,
.csi-fp-btn--lime {
  background: var(--csi-lime);
  border-color: var(--csi-lime);
  color: var(--csi-dark-btn);
}

.csi-fp-pill--lime:hover,
.csi-fp-pill--lime:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--csi-dark-btn);
}

.csi-fp-btn--lime:hover,
.csi-fp-btn--lime:focus-visible {
  background: var(--csi-olive);
  border-color: var(--csi-olive);
  color: #ffffff;
}

.csi-fp-btn--outline-plum {
  background: transparent;
  border-color: var(--csi-plum);
  color: var(--csi-plum);
}

.csi-fp-btn--outline-plum:hover,
.csi-fp-btn--outline-plum:focus-visible {
  background: var(--csi-plum);
  color: #ffffff;
}

.csi-fp-btn--outline-light {
  padding: 15px 30px;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.csi-fp-btn--outline-light:hover,
.csi-fp-btn--outline-light:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.csi-fp-btn:focus-visible,
.csi-fp-pill:focus-visible {
  outline: 2px solid var(--csi-plum);
  outline-offset: 3px;
}

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

.csi-fp-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246, 244, 239, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--csi-rule);
}

.csi-fp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 12px 40px;
}

.csi-fp-header__logo-img {
  height: 56px;
  width: auto;
}

.csi-fp-header__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csi-fp-header__menu a {
  color: var(--csi-ink-80);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 400ms var(--csi-ease);
}

.csi-fp-header__menu a:hover,
.csi-fp-header__menu a:focus-visible {
  color: var(--csi-plum);
}

.csi-fp-header__cta {
  flex: none;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--csi-plum);
  color: #ffffff;
  font-family: var(--csi-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 400ms var(--csi-ease);
}

.csi-fp-header__cta:hover,
.csi-fp-header__cta:focus-visible {
  background: var(--csi-magenta);
}

/* Mobile menu - a real drawer, not a hidden nav. */
.csi-fp-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 1px solid var(--csi-rule-mid);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.csi-fp-burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--csi-ink-80);
  transition: transform 300ms var(--csi-ease), opacity 200ms ease;
}

.csi-fp-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.csi-fp-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.csi-fp-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.csi-fp-drawer {
  display: none;
  padding: 8px 40px 26px;
  border-top: 1px solid var(--csi-rule);
}

.csi-fp-drawer__menu {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.csi-fp-drawer__menu li + li {
  border-top: 1px solid var(--csi-rule);
}

.csi-fp-drawer__menu a {
  display: block;
  padding: 14px 0;
  color: var(--csi-ink-80);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.csi-fp-drawer__menu a:hover,
.csi-fp-drawer__menu a:focus-visible {
  color: var(--csi-plum);
}

/* ---------- Hero ----------------------------------------------------- */

.csi-fp-hero {
  position: relative;
  overflow: hidden;
}

.csi-fp-hero__img {
  width: 100%;
  height: var(--csi-fp-hero-h, 100vh);
  min-height: 520px;
  object-fit: cover;
  object-position: center 62%;
}

.csi-fp-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 17, 14, 0.5) 0%,
    rgba(20, 17, 14, 0.14) 52%,
    rgba(20, 17, 14, 0.42) 100%
  );
}

.csi-fp-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 0 8vw;
  text-align: center;
}

.csi-fp-hero__title {
  margin: 0;
  color: #ffffff;
  font-family: var(--csi-display);
  /* Matches the live home page: 100px, dropping to 57px on phones (below). */
  font-size: 100px;
  font-weight: 300;
  line-height: 0.98;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

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

.csi-fp-intro {
  padding: 88px var(--csi-pad) 20px;
}

.csi-fp-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.csi-fp-intro__lead {
  margin: 0;
  color: var(--csi-ink);
  font-family: var(--csi-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 300;
  line-height: 1.32;
}

.csi-fp-intro__body {
  margin: 0;
  color: var(--csi-ink-70);
  font-size: 16px;
  line-height: 1.9;
}

/* ---------- Rooms ---------------------------------------------------- */

.csi-fp-rooms {
  padding: 72px var(--csi-pad) 88px;
}

.csi-fp-rooms__inner {
  max-width: var(--csi-max-wide);
  margin: 0 auto;
}

.csi-fp-rooms__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.csi-fp-room {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.csi-fp-room__img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  transition: transform 900ms var(--csi-ease);
}

.csi-fp-room:hover .csi-fp-room__img,
.csi-fp-room:focus-visible .csi-fp-room__img {
  transform: scale(1.05);
}

/* Required for legibility - dark labels failed against these images. */
.csi-fp-room__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 17, 14, 0.1) 0%,
    rgba(20, 17, 14, 0.34) 45%,
    rgba(20, 17, 14, 0.68) 100%
  );
}

.csi-fp-room__label {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 22px 24px;
  color: #ffffff;
  font-family: var(--csi-ui);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

/* ---------- Process slider ------------------------------------------- */

.csi-fp-process {
  padding: 92px var(--csi-pad) 100px;
  background: var(--csi-cream-deep);
}

.csi-fp-process__inner {
  max-width: var(--csi-max);
  margin: 0 auto;
}

.csi-fp-process__head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.csi-fp-process__title {
  margin: 12px 0 14px;
  color: var(--csi-ink);
  font-family: var(--csi-display);
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 300;
  line-height: 1.05;
}

.csi-fp-process__body {
  margin: 0;
  color: var(--csi-ink-70);
  font-size: 16px;
  line-height: 1.9;
}

.csi-fp-ba {
  position: relative;
  overflow: hidden;
  background: var(--csi-dark);
  box-shadow: 0 30px 70px rgba(30, 26, 22, 0.18);
  user-select: none;
  -webkit-user-select: none;
}

/* Both halves are cropped to 5:3, so the wipe lines up as you drag. */
.csi-fp-ba img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}

/*
 * The before layer is revealed with clip-path, never by changing its width -
 * resizing squeezes the image instead of wiping it.
 */
.csi-fp-ba__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--csi-fp-pos, 50) * 1%) 0 0);
}

.csi-fp-ba__chip {
  position: absolute;
  top: 18px;
  padding: 8px 16px;
  font-family: var(--csi-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.csi-fp-ba__chip--left {
  left: 20px;
  background: rgba(246, 244, 239, 0.92);
  color: var(--csi-dark);
}

.csi-fp-ba__chip--right {
  right: 20px;
  background: rgba(160, 190, 24, 0.94);
  color: var(--csi-dark-btn);
}

.csi-fp-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--csi-fp-pos, 50) * 1%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.csi-fp-ba__rule {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--csi-cream);
}

.csi-fp-ba__knob {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  border-radius: 50%;
  background: var(--csi-cream);
  color: var(--csi-plum);
  font-size: 20px;
  letter-spacing: 2px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

/* Invisible but real, so the control stays keyboard accessible. */
.csi-fp-ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.csi-fp-ba__range:focus-visible {
  outline: 2px solid var(--csi-plum);
  outline-offset: 3px;
}

/* ---------- Services + accordion -------------------------------------- */

.csi-fp-services {
  padding: 92px var(--csi-pad) 40px;
}

.csi-fp-services__inner {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  max-width: var(--csi-max);
  margin: 0 auto;
}

.csi-fp-services__title {
  margin: 0 0 18px;
  color: var(--csi-olive);
  font-family: var(--csi-display);
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.05;
}

.csi-fp-services__body {
  margin: 0 0 22px;
  color: var(--csi-ink-70);
  font-size: 15px;
  line-height: 1.9;
}

.csi-fp-services__lead .csi-fp-kicker {
  margin-bottom: 26px;
}

.csi-fp-acc {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--csi-rule-mid);
}

.csi-fp-acc__item {
  border-bottom: 1px solid var(--csi-rule-mid);
}

.csi-fp-acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 4px;
  border: 0;
  background: transparent;
  color: var(--csi-ink);
  text-align: left;
  cursor: pointer;
}

.csi-fp-acc__name {
  font-family: var(--csi-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  transition: color 300ms var(--csi-ease);
}

.csi-fp-acc__trigger:hover .csi-fp-acc__name,
.csi-fp-acc__trigger:focus-visible .csi-fp-acc__name {
  color: var(--csi-plum);
}

.csi-fp-acc__sign {
  flex: none;
  color: var(--csi-lime);
  font-size: 22px;
  line-height: 1;
}

/*
 * grid-template-rows 0fr -> 1fr animates open. The inner wrapper is required:
 * without it a 0fr row doesn't fully collapse and closed items keep height.
 */
.csi-fp-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 420ms var(--csi-ease), opacity 320ms ease;
}

.csi-fp-acc__item.is-open .csi-fp-acc__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.csi-fp-acc__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.csi-fp-acc__note {
  margin: 0 0 16px;
  max-width: 560px;
  padding: 0 4px;
  color: var(--csi-ink-70);
  font-size: 15px;
  line-height: 1.85;
}

/*
 * Spacing below an open item sits on its last child, never as padding on the
 * inner wrapper - padding can't be clipped, so a closed item would keep a gap.
 */
.csi-fp-acc__panel-inner > :last-child {
  margin-bottom: 28px;
}

/* Outlined button, matching "View package details" on the live home page. */
.csi-fp-acc__details {
  display: inline-block;
  margin: 6px 4px 28px;
  padding: 9px 16px;
  border: 1px solid var(--csi-ink);
  background: transparent;
  color: var(--csi-ink);
  font-family: var(--csi-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 300ms var(--csi-ease), color 300ms var(--csi-ease),
    border-color 300ms var(--csi-ease);
}

.csi-fp-acc__details:hover,
.csi-fp-acc__details:focus-visible {
  border-color: var(--csi-plum);
  background: var(--csi-plum);
  color: #ffffff;
}

.csi-fp-acc__details:focus-visible {
  outline: 2px solid var(--csi-plum);
  outline-offset: 3px;
}

/* ---------- Sticky room reveal ---------------------------------------- */

/*
 * Fixed-background parallax, matching the live home page: the photo is
 * painted into the viewport and the page scrolls over it. The home page uses
 * cover / 50% 50% / fixed with a 500px minimum, so this does the same.
 */
.csi-fp-sticky {
  position: relative;
  z-index: 0;
  min-height: var(--csi-fp-sticky-h, 500px);
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.csi-fp-sticky__inner {
  position: relative;
  min-height: var(--csi-fp-sticky-h, 500px);
  overflow: hidden;
}

.csi-fp-sticky__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 17, 14, 0.58) 0%,
    rgba(20, 17, 14, 0.2) 42%,
    rgba(20, 17, 14, 0.62) 100%
  );
}

.csi-fp-sticky__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 10vw;
  text-align: center;
}

.csi-fp-sticky__title {
  margin: 0;
  max-width: 900px;
  color: #ffffff;
  font-family: var(--csi-display);
  font-size: clamp(32px, 4.4vw, 58px);
  font-weight: 300;
  line-height: 1.15;
}

/* ---------- About Steve ------------------------------------------------ */

/* Opaque and above the pinned image so it slides cleanly over it. */
.csi-fp-about {
  position: relative;
  z-index: 2;
  padding: 96px var(--csi-pad) 100px;
  background: var(--csi-cream);
}

.csi-fp-about__inner {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 400px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

.csi-fp-about__title {
  margin: 0 0 20px;
  color: var(--csi-ink);
  font-family: var(--csi-display);
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 300;
  line-height: 1;
}

.csi-fp-about__body {
  margin: 0 0 22px;
  max-width: 620px;
  color: var(--csi-ink-80);
  font-size: 16px;
  line-height: 1.95;
}

.csi-fp-about__copy .csi-fp-kicker {
  margin-bottom: 26px;
}

.csi-fp-about__portrait {
  position: relative;
  overflow: hidden;
}

.csi-fp-about__play {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.csi-fp-about__img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center 20%;
  transition: opacity 400ms var(--csi-ease);
}

.csi-fp-about__portrait:hover .csi-fp-about__img {
  opacity: 0.94;
}

.csi-fp-about__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
  background: rgba(246, 244, 239, 0.94);
  color: var(--csi-dark);
  font-family: var(--csi-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Service tiles ---------------------------------------------- */

.csi-fp-tiles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.28fr);
  grid-auto-rows: 330px;
  gap: 2px;
}

.csi-fp-tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

/*
 * The tall tile is last in source order, so without explicit placement
 * auto-flow puts the wrong tile in column 3.
 */
.csi-fp-tile--tall {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.csi-fp-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--csi-ease);
}

.csi-fp-tile:hover .csi-fp-tile__img,
.csi-fp-tile:focus-visible .csi-fp-tile__img {
  transform: scale(1.05);
}

.csi-fp-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 17, 14, 0.04) 0%,
    rgba(20, 17, 14, 0.3) 48%,
    rgba(20, 17, 14, 0.72) 100%
  );
}

.csi-fp-tile--tall .csi-fp-tile__scrim {
  background: linear-gradient(
    180deg,
    rgba(20, 17, 14, 0.04) 0%,
    rgba(20, 17, 14, 0.3) 55%,
    rgba(20, 17, 14, 0.74) 100%
  );
}

.csi-fp-tile__label {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 26px 24px;
  color: #ffffff;
  font-family: var(--csi-ui);
  font-size: clamp(20px, 2.1vw, 31px);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.24;
  text-wrap: balance;
}

.csi-fp-tile--tall .csi-fp-tile__label {
  padding: 0 30px 28px;
  font-size: clamp(26px, 3.2vw, 46px);
}

/* ---------- Reviews ----------------------------------------------------- */

.csi-fp-reviews {
  padding: 100px var(--csi-pad) 108px;
  background: var(--csi-cream-deep);
  border-top: 1px solid var(--csi-rule);
}

.csi-fp-reviews__inner {
  max-width: var(--csi-max);
  margin: 0 auto;
}

.csi-fp-reviews .csi-fp-head {
  padding-bottom: 26px;
  border-bottom-color: var(--csi-rule-mid);
}

.csi-fp-stars {
  color: var(--csi-brass);
  font-size: 11px;
  letter-spacing: 2px;
}

.csi-fp-stars--lg {
  font-size: 14px;
  letter-spacing: 3px;
}

.csi-fp-reviews__label {
  margin: 6px 0 0;
  color: var(--csi-ink-50);
  font-size: 13px;
}

/* 1px gaps over a warm ground read as hairline rules. */
.csi-fp-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--csi-rule-warm);
}

.csi-fp-review {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 40px 34px 34px;
  background: var(--csi-cream-card);
  transition: background 500ms ease;
}

.csi-fp-review:hover {
  background: #ffffff;
}

.csi-fp-review__mark {
  display: block;
  color: var(--csi-sage);
  font-family: var(--csi-display);
  font-size: 56px;
  line-height: 0.6;
}

.csi-fp-review__quote {
  flex: 1;
  margin: 18px 0 0;
  color: var(--csi-ink);
  font-family: var(--csi-display);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.5;
}

.csi-fp-review__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--csi-rule);
}

.csi-fp-review__name {
  color: var(--csi-ink-80);
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Footer ------------------------------------------------------ */

.csi-fp-footer {
  padding: 72px var(--csi-pad) 40px;
  background: var(--csi-cream-footer);
  border-top: 1px solid var(--csi-rule);
}

.csi-fp-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 260px;
  gap: 48px;
  max-width: var(--csi-max);
  margin: 0 auto;
}

.csi-fp-footer__head {
  margin: 0 0 18px;
  color: var(--csi-ink-80);
  font-family: var(--csi-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.csi-fp-footer__col p {
  margin: 0 0 8px;
  color: var(--csi-ink-50);
  font-size: 14px;
}

.csi-fp-footer__col a {
  color: var(--csi-ink-50);
  text-decoration: none;
  transition: color 400ms var(--csi-ease);
}

.csi-fp-footer__col a:hover,
.csi-fp-footer__col a:focus-visible {
  color: var(--csi-magenta);
}

.csi-fp-footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--csi-ink-50);
  font-size: 14px;
}

.csi-fp-footer__col--logo {
  justify-self: end;
}

.csi-fp-footer__logo {
  width: 130px;
}

.csi-fp-footer__copy {
  margin: 56px 0 0;
  color: var(--csi-ink-40);
  font-size: 12px;
  text-align: center;
}

/* ---------- Video lightbox ---------------------------------------------- */

.csi-fp-video {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(12, 9, 11, 0.94);
}

.csi-fp-video.is-open {
  display: flex;
}

.csi-fp-video__frame {
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.csi-fp-video__close {
  position: absolute;
  top: clamp(14px, 3vw, 30px);
  right: clamp(14px, 3vw, 30px);
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.csi-fp-video__close:hover,
.csi-fp-video__close:focus-visible {
  border-color: var(--csi-lime);
  color: var(--csi-lime);
}

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

@media (max-width: 1000px) {
  .csi-fp-2col {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .csi-fp-header__nav {
    display: none;
  }

  .csi-fp-header__cta {
    display: none;
  }

  .csi-fp-burger {
    display: flex;
  }

  .csi-fp-drawer[data-open="true"] {
    display: block;
  }

  .csi-fp-tiles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .csi-fp-tile--tall {
    grid-column: 1 / span 2;
    grid-row: auto;
  }

  .csi-fp-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .csi-fp-footer__col--logo {
    justify-self: start;
  }
}

@media (max-width: 700px) {

    
  .csi-fp {
    --csi-pad: 24px;
  }

  .csi-fp-header__inner,
  .csi-fp-drawer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .csi-fp-rooms__grid,
  .csi-fp-reviews__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .csi-fp-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}



/*
 * iOS ignores background-attachment: fixed, so the photo would crop to the
 * element instead of scrolling. Scroll is the honest fallback there, and it is
 * what the live home page does on a phone too.
 */
@media (max-width: 767px) {
  .csi-fp-sticky {
    background-attachment: scroll;
    min-height: 360px;
  }

  .csi-fp-sticky__inner {
    min-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csi-fp *,
  .csi-fp *::before,
  .csi-fp *::after {
    transition: none !important;
    animation: none !important;
  }

  .csi-fp-room:hover .csi-fp-room__img,
  .csi-fp-tile:hover .csi-fp-tile__img {
    transform: none;
  }
}

/* =============================================================
   Overrides - keep last. The theme styles bare elements through
   higher-specificity selectors, which otherwise reintroduces
   margins and recolours headings on the dark sections.
   ============================================================= */

.csi-fp .csi-fp-review,
.csi-fp figure,
.csi-fp blockquote {
  margin: 0 !important;
}

.csi-fp .csi-fp-hero__title,
.csi-fp .csi-fp-sticky__title {
  color: #ffffff !important;
}

.csi-fp .csi-fp-room__label,
.csi-fp .csi-fp-tile__label,
.csi-fp .csi-fp-btn--outline-light {
  color: #ffffff !important;
}

.csi-fp .csi-fp-room__img,
.csi-fp .csi-fp-tile__img,
.csi-fp .csi-fp-about__img,
.csi-fp .csi-fp-hero__img {
  height: 100%;
}

.csi-fp .csi-fp-hero__img {
  height: var(--csi-fp-hero-h, 100vh);
  min-height: 520px;
}

.csi-fp .csi-fp-room__img {
  height: 340px;
}

.csi-fp .csi-fp-about__img {
  height: 460px;
}

.csi-fp .csi-fp-ba img {
  height: auto;
}

p.csi-fp-eyebrow.csi-fp-eyebrow--light {
    color: #fff !important;
}


#tcb_landing_page .tcb-style-wrap blockquote {
        color: rgb(74, 84, 85);
        --tcb-applied-color: rgb(74, 84, 85);
        font-family: Montserrat;
        --g-regular-weight: 400;
        --g-bold-weight: 500;
        font-weight: var(--g-regular-weight, normal);
        font-size: 18px;
        padding-top: 0px;
        padding-bottom: 0px;
        border-left: 2px solid var(--tcb-skin-color-1);
        margin-top: 0px;
        margin-bottom: 24px;
        --tcb-typography-color: rgb(74, 84, 85);
        --tve-applied-color: rgb(74, 84, 85);
        --tcb-typography-font-family: Montserrat;
        padding-top: 20px;
        padding-bottom: 20px;
}

@media only screen and (max-width: 767px){
    span.csi-fp-tile__label{
        font-size:16px!important;
    }
}

/* =============================================================
   Sitting inside the site's own header and footer

   The plugin no longer renders its own header/footer, so these
   sections now live inside the theme's content area. That area
   adds its own padding and width limit, which would otherwise
   show as gaps above the hero and below the reviews, and stop
   the sections reaching the full width.
   ============================================================= */

.csi-fp {
  /*
   * Height of the site header. Only needed if that header is sticky
   * and overlaps the pinned dining section - raise it to the header's
   * height (e.g. 81px) if the pinned image sits behind it.
   */
  --csi-fp-header-offset: 0px;
}

/*
 * Pull the hero up under the site header so there's no white band above it.
 *
 * The image is grown by the same amount, otherwise pulling up 178px would
 * leave only 100vh - 178px actually visible and the hero would stop short of
 * filling the screen. Change --csi-fp-pull alone and both stay in step.
 */
.csi-fp-hero {
  --csi-fp-pull: 178px;
  margin-top: calc(var(--csi-fp-pull) * -1);
  position: relative;
  z-index: 0;
}

.csi-fp .csi-fp-hero__img {
  height: calc(var(--csi-fp-hero-h, 100vh) + var(--csi-fp-pull, 178px));
  min-height: calc(520px + var(--csi-fp-pull, 178px));
}

/* The scrim and the headline have to cover the taller image too. */
.csi-fp-hero__scrim,
.csi-fp-hero__content {
  top: 0;
  bottom: 0;
}

/* Keep the headline centred in the part that's actually on screen. */
.csi-fp-hero__content {
  padding-top: var(--csi-fp-pull, 178px);
}

.csi-fp-reviews {
  margin-bottom: 0;
}

/* The theme wrapper's padding would otherwise break the full-bleed. */
.tve_wrap_all .csi-fp,
.tve_post_lp .csi-fp,
.entry-content .csi-fp,
.tve_editor .csi-fp {
  max-width: 100vw;
}


/* =============================================================
   Typography - matched to the live home page

   Every value here was measured off creativespaceinteriors.biz
   at 1440px and 375px wide, so these sections read as part of the
   same site: Philosopher for headings, Montserrat for everything
   else, in the site's own colours.

   The theme styles headings and paragraphs through selectors that
   outrank single classes, which had been turning these into
   Montserrat 32px grey. Hence the .csi-fp prefix and !important -
   deliberate, and confined to this block.
   ============================================================= */

.csi-fp {
  --csi-site-plum: #7e0045;
  --csi-site-plum-dark: #54203d;
  --csi-site-lime: #a0b819;
  --csi-site-body: #4a5455;
  --csi-site-dark: #2f3434;
  --csi-site-green: #193d05;
  --csi-site-head: "Philosopher", Georgia, serif;
  --csi-site-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

/* ---- Hero ---- */
.csi-fp .csi-fp-hero__title {
  font-family: var(--csi-site-head) !important;
  font-size: 100px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
}

.csi-fp.csi-fp-hero .csi-fp-pill {
  font-family: var(--csi-site-text) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--csi-site-plum-dark) !important;
}

/* ---- Section headings: Philosopher 42px plum ---- */
.csi-fp .csi-fp-h2,
.csi-fp .csi-fp-process__title {
  font-family: var(--csi-site-head) !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--csi-site-plum) !important;
}

/* ---- Body copy: Montserrat 18px ---- */
.csi-fp .csi-fp-services__body,
.csi-fp .csi-fp-process__body,
.csi-fp .csi-fp-about__body,
.csi-fp .csi-fp-acc__note {
  font-family: var(--csi-site-text) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--csi-site-body) !important;
}

/* ---- Intro ---- */
.csi-fp .csi-fp-intro__lead {
  font-family: var(--csi-site-head) !important;
  font-size: 31px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--csi-site-plum) !important;
}

.csi-fp .csi-fp-intro__body {
  font-family: var(--csi-site-text) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--csi-site-body) !important;
}

/* Italic kickers follow the site's "Let's chat!" */
.csi-fp.csi-fp-intro .csi-fp-kicker,
.csi-fp.csi-fp-about .csi-fp-kicker {
  font-family: var(--csi-site-head) !important;
  font-size: 32px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--csi-site-plum) !important;
}

/* ---- Design Services ---- */
.csi-fp .csi-fp-services__title {
  font-family: var(--csi-site-head) !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--csi-site-lime) !important;
}

.csi-fp.csi-fp-services .csi-fp-kicker {
  font-family: var(--csi-site-text) !important;
  font-size: 27px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--csi-site-plum) !important;
}

.csi-fp .csi-fp-acc__name {
  font-family: var(--csi-site-text) !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: 2 !important;
  color: var(--csi-site-dark) !important;
}

/* The site sets this one button in Open Sans - matched as found. */
.csi-fp .csi-fp-acc__details {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  color: var(--csi-site-plum-dark) !important;
  border-color: var(--csi-site-plum-dark) !important;
  padding: 8px 14px !important;
}

.csi-fp .csi-fp-acc__details:hover,
.csi-fp .csi-fp-acc__details:focus-visible {
  background: var(--csi-site-plum-dark) !important;
  color: #ffffff !important;
}

/* ---- Buttons: Montserrat 16px, spaced capitals ---- */
.csi-fp .csi-fp-btn {
  font-family: var(--csi-site-text) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* ---- About Steve ---- */
.csi-fp .csi-fp-about__title {
  font-family: var(--csi-site-head) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--csi-site-green) !important;
}

/* ---- Pinned dining section ---- */
.csi-fp .csi-fp-sticky__title {
  font-family: var(--csi-site-head) !important;
  font-weight: 400 !important;
  color: #ffffff !important;
}

/* ---- Image labels and small UI text ---- */
.csi-fp .csi-fp-room__label,
.csi-fp .csi-fp-tile__label,
.csi-fp .csi-fp-ba__chip,
.csi-fp .csi-fp-about__caption,
.csi-fp .csi-fp-eyebrow,
.csi-fp .csi-fp-reviews__label {
  font-family: var(--csi-site-text) !important;
}

.csi-fp .csi-fp-room__label,
.csi-fp .csi-fp-tile__label {
  font-weight: 400 !important;
}

.csi-fp .csi-fp-eyebrow {
  color: var(--csi-site-lime) !important;
}

.csi-fp .csi-fp-eyebrow--light {
  color: #ffffff !important;
}

/* ---- Reviews ---- */
.csi-fp .csi-fp-review__quote {
  font-family: var(--csi-site-text) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--csi-site-body) !important;
}

.csi-fp .csi-fp-review__name {
  font-family: var(--csi-site-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  color: var(--csi-site-plum-dark) !important;
}

.csi-fp .csi-fp-review__mark {
  font-family: var(--csi-site-head) !important;
}

/* ---- Phones: the site's own 375px sizes ---- */
@media (max-width: 700px) {
  .csi-fp .csi-fp-hero__title {
    font-size: 57px !important;
    line-height: 1.05 !important;
  }

  .csi-fp.csi-fp-hero .csi-fp-pill {
    font-size: 15px !important;
  }

  .csi-fp .csi-fp-h2,
  .csi-fp .csi-fp-process__title {
    font-size: 34px !important;
  }

  .csi-fp .csi-fp-intro__lead {
    font-size: 27px !important;
  }

  .csi-fp .csi-fp-intro__body {
    font-size: 21px !important;
  }

  .csi-fp.csi-fp-services .csi-fp-kicker {
    font-size: 20px !important;
  }

  .csi-fp .csi-fp-acc__name {
    font-size: 21px !important;
    line-height: 1.5 !important;
  }

  .csi-fp .csi-fp-about__title {
    font-size: 22px !important;
  }

  .csi-fp .csi-fp-review__quote {
    font-size: 13px !important;
  }

  .csi-fp .csi-fp-review__name {
    font-size: 12px !important;
  }
}
/* =============================================================
   Site header on pages using this plugin - matched to the live
   home page header (translucent slate bar, plum Discovery Call
   pill, Montserrat 14px/500 nav, full-width bar).

   Scoped with body:has(.csi-fp), so every other page keeps the
   site's standard plum header untouched.
   ============================================================= */

body:has(.csi-fp) #thrive-header .thrv-columns {
  background-image: linear-gradient(rgba(74, 84, 85, 0.8), rgba(74, 84, 85, 0.8)) !important;
  transform: translateY(20px);
}

body:has(.csi-fp) #thrive-header .thrv_widget_menu .tve_w_menu > li.menu-item:has(> a[href*="discovery-call"]) {
  background-image: linear-gradient(#7e0045, #7e0045) !important;
  border-radius: 50px !important;
}

body:has(.csi-fp) #thrive-header .tve_w_menu > li > a,
body:has(.csi-fp) #thrive-header .tve_w_menu > li > a * {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
}

/* The header contents were capped at 1080px, making the bar a centred band. */
body:has(.csi-fp) #thrive-header .symbol-section-in {
  max-width: none !important;
}

@media (min-width: 1024px) {
  body:has(.csi-fp) #thrive-header .thrv-columns {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  body:has(.csi-fp) #thrive-header .tcb-logo {
    transform: translate(-3px, 0);
  }
  body:has(.csi-fp) #thrive-header .thrv_widget_menu .tve_w_menu > li.menu-item {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  body:has(.csi-fp) #thrive-header .thrv_widget_menu .tve_w_menu > li.menu-item:first-child {
    margin-left: 0 !important;
  }
  body:has(.csi-fp) #thrive-header .thrv_widget_menu .tve_w_menu > li.menu-item:last-child {
    margin-right: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body:has(.csi-fp) #thrive-header .thrv-columns {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  body:has(.csi-fp) #thrive-header .tcb-logo {
    transform: translate(-32px, -12px);
  }
  body:has(.csi-fp) #thrive-header .tve-m-trigger {
    transform: translate(30px, 0);
  }
}

@media (max-width: 767px) {
  body:has(.csi-fp) #thrive-header .thrv-columns {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  body:has(.csi-fp) #thrive-header .tcb-logo {
    transform: translate(-5px, -17px);
  }
  body:has(.csi-fp) #thrive-header .tcb-logo img {
    width: 150px !important;
    height: 150px !important;
    max-width: none !important;
  }
  body:has(.csi-fp) #thrive-header .tve-m-trigger {
    transform: translate(31px, 0);
  }
}

/* The home page headline capitalises every word. */
.csi-fp .csi-fp-hero__title {
  text-transform: capitalize !important;
}

/* ---------- Paired photos (the slider moved to the Portfolio page) ---- */

/*
 * Held well inside the page width, with a generous gap, so there is white
 * space around the pair and between the two photos.
 */
.csi-fp .csi-fp-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  /* Top-aligned, so an odd-shaped photo cannot stretch its neighbour. */
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

/*
 * Each room is shown whole - no fixed height and no cropping, so nothing is
 * cut off the top or bottom. Both photos are 4:3, so the columns stay level.
 */
.csi-fp .csi-fp-pair__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 54px rgba(30, 26, 22, 0.16);
}

@media (max-width: 767px) {
  .csi-fp .csi-fp-pair {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* The before and after slider, kept comfortably short of full width. */
.csi-fp .csi-fp-ba {
  max-width: 820px;
  margin: 0 auto;
}