@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap");

:root {
  --glam-sapphire: #168fea;
  --glam-sapphire-bright: #45b7ff;
  --glam-deep: #103b63;
  --glam-ink: #171a1e;
  --glam-white: #fff;
  --glam-cloud: #eef9ff;
  --glam-silver: #dce7ed;
  --glam-chrome: #f8fdff;
}

html { scroll-padding-top: 82px; }
body,
button,
input,
textarea,
select { font-family: "Montserrat", Arial, sans-serif !important; }
body {
  background:
    radial-gradient(circle at 50% 0, #fff 0 10%, transparent 35%),
    linear-gradient(180deg, #eaf8ff 0, #fff 38%, #d9f1ff 100%) !important;
  color: var(--glam-ink) !important;
}

.page-shell {
  max-width: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

header {
  min-height: 78px;
  background: rgba(255, 255, 255, .94) !important;
  color: var(--glam-deep) !important;
  border-bottom: 1px solid rgba(22, 143, 234, .2) !important;
  box-shadow: 0 12px 40px rgba(16, 59, 99, .09);
  backdrop-filter: blur(18px) saturate(1.4);
}
nav a { color: var(--glam-deep) !important; }
nav a:hover { border-color: var(--glam-sapphire) !important; }
.explore,
.hamb {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #43b8ff, var(--glam-sapphire)) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(22, 143, 234, .26);
}
aside {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(182,228,255,.96) 55%, rgba(22,143,234,.96)) !important;
  color: var(--glam-deep) !important;
  box-shadow: -25px 0 80px rgba(16,59,99,.2);
}

.mansion-interface {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #dff3ff;
  border-bottom: 1px solid rgba(22, 143, 234, .2);
}
.mansion-stage {
  position: relative;
  width: 100%;
  min-height: clamp(620px, 62vw, 960px);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #73b9ef, #dff5ff);
}
.mansion-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 58%, rgba(16,59,99,.1)),
    radial-gradient(ellipse at 50% 44%, transparent 25%, rgba(16,59,99,.08) 100%);
}
.mansion-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.1) contrast(1.02) brightness(1.04);
}
.mansion-brand {
  position: absolute;
  top: 4.2%;
  left: 50%;
  z-index: 4;
  width: min(700px, 68vw);
  padding: 18px 32px 20px;
  transform: translateX(-50%);
  text-align: center;
  color: var(--glam-deep);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 0 0 32px 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(223,246,255,.84));
  box-shadow: 0 18px 54px rgba(16,59,99,.16), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px) saturate(1.3);
}
.mansion-brand small,
.mansion-brand strong,
.mansion-brand span { display: block; }
.mansion-brand small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .32em;
}
.mansion-brand strong {
  margin: 6px 0;
  font-size: clamp(28px, 4.2vw, 68px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.04em;
  color: var(--glam-sapphire);
  text-shadow: 0 2px 0 #fff, 0 7px 20px rgba(22,143,234,.2);
}
.mansion-brand span {
  font-size: clamp(7px, .75vw, 11px);
  font-weight: 700;
  letter-spacing: .16em;
}
.mansion-hotspot {
  position: absolute;
  z-index: 4;
  display: flex;
  width: max-content;
  max-width: 190px;
  flex-direction: column;
  gap: 3px;
  padding: 10px 13px 9px;
  color: var(--glam-deep);
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(222,244,255,.82));
  box-shadow: 0 10px 34px rgba(16,59,99,.17), inset 0 1px 0 #fff;
  backdrop-filter: blur(11px) saturate(1.35);
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
  outline: none;
}
.mansion-hotspot::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--glam-sapphire);
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px rgba(22,143,234,.2), 0 0 24px var(--glam-sapphire);
}
.mansion-hotspot b {
  font-size: clamp(9px, .8vw, 12px);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mansion-hotspot span {
  font-size: clamp(6px, .54vw, 8px);
  font-weight: 700;
  color: #3f6e91;
  letter-spacing: .03em;
}
.mansion-hotspot:hover,
.mansion-hotspot:focus-visible {
  z-index: 8;
  color: #fff;
  background: linear-gradient(135deg, #47baff, var(--glam-sapphire));
  box-shadow: 0 14px 44px rgba(16,59,99,.28), 0 0 0 4px rgba(255,255,255,.7);
  transform: translateY(-6px) scale(1.04);
}
.mansion-hotspot:hover span,
.mansion-hotspot:focus-visible span { color: #fff; }

.room-freebies { left: 4%; top: 29%; }
.room-templates { left: 2.5%; top: 53%; }
.room-bestsellers { left: 17%; top: 69%; }
.room-shop { left: 38%; top: 44%; }
.room-creators { right: 25%; top: 24%; }
.room-support { right: 4%; top: 24%; }
.room-generators { right: 28%; top: 49%; }
.room-community { right: 5%; top: 48%; }
.room-facebook { right: 19%; top: 68%; }
.room-bundles { right: 3%; top: 70%; }
.room-pngs { left: 31%; top: 76%; }
.room-reviews { left: 55%; top: 77%; }
.mansion-entry-note {
  position: absolute;
  left: 50%;
  bottom: 2.2%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 10px 19px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(16,59,99,.72);
  box-shadow: 0 12px 35px rgba(16,59,99,.2);
  backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
}

.agency-hero {
  display: none !important;
  min-height: 610px !important;
  background:
    linear-gradient(98deg, rgba(22,143,234,.96), rgba(68,179,248,.89) 48%, rgba(255,255,255,.7)),
    url("images/reference-hero.png") center/cover !important;
  border-block: 14px solid #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), inset 0 -100px 120px rgba(16,59,99,.12);
}
.hero-text { width: min(720px, 70%) !important; }
.hero-text > small,
.hero-text h1,
.hero-text p { color: #fff !important; }
.hero-text h1,
.grid-lead h2,
.section-title h2,
.about-copy h2,
.community h2,
.workshops-page h1,
.workshops-page h2,
.one-on-one-page h1,
.one-on-one-page h2 {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 900 !important;
}
.hero-text h1 em { color: #fff !important; text-shadow: 0 5px 22px rgba(16,59,99,.22); }
.hero-text > a,
.grid-lead > a,
.about-copy > a,
.community a {
  border-radius: 999px;
  background: #fff !important;
  color: var(--glam-deep) !important;
  box-shadow: 0 12px 34px rgba(16,59,99,.19) !important;
}
.hero-stats p { border-color: #fff !important; }
.hero-stats b,
.hero-stats span { color: #fff !important; }

.creative-grid {
  grid-template-rows: repeat(2, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  padding: clamp(30px, 5vw, 90px) !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.96), transparent 38%),
    linear-gradient(135deg, #dff4ff, #fff 45%, #aeddff) !important;
  border-block: 1px solid rgba(22,143,234,.2);
}
.grid-lead {
  color: var(--glam-deep) !important;
  border: 1px solid rgba(255,255,255,.94) !important;
  border-radius: 100px 24px 24px 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(224,245,255,.88)) !important;
  box-shadow: 0 28px 80px rgba(16,59,99,.12), inset 0 1px 0 #fff;
}
.grid-lead > small,
.section-title > small,
.about-copy > small { color: var(--glam-sapphire) !important; }
.grid-lead h2 { color: var(--glam-deep); }
.grid-lead h2 em { color: var(--glam-sapphire) !important; }
.grid-lead p { color: #466b86 !important; }
.ad {
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(16,59,99,.15), inset 0 1px 0 #fff;
}
.ad::after { background: linear-gradient(90deg, rgba(16,59,99,.9), rgba(16,59,99,.16) 80%) !important; }

.phone-showcase {
  min-height: 670px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(173,224,255,.88)),
    url("images/sapphire-mansion-city.png") center/cover !important;
  border-block: 18px solid #fff;
}
.device {
  background: linear-gradient(135deg, #fff, #b8cbd7 18%, #fff 38%, var(--glam-sapphire)) !important;
  box-shadow: 0 34px 55px rgba(16,59,99,.27), 0 0 30px rgba(255,255,255,.8) !important;
}
.screen { background-color: var(--glam-deep) !important; }
.screen b { background: var(--glam-sapphire) !important; color: #fff !important; }
.modern-title span { color: #fff !important; -webkit-text-stroke: 1px rgba(16,59,99,.25) !important; text-shadow: 0 12px 36px rgba(16,59,99,.18); }
.modern-title strong { color: var(--glam-sapphire) !important; font-family: "Montserrat", Arial, sans-serif !important; font-style: normal !important; }

.marquee { background: var(--glam-sapphire) !important; color: #fff !important; }
.products,
.paths,
.about,
.reviews,
.community {
  color: var(--glam-ink) !important;
  background-color: #fff !important;
}

.section-title h2,
.about-copy h2 { color: var(--glam-deep) !important; }
.section-title h2 em,
.about-copy h2 em { color: var(--glam-sapphire) !important; }

.products {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden !important;

  padding: 42px 0 58px !important;

  box-sizing: border-box;
}


/* =========================================
   BEST SELLERS — LUXURY INFINITE CAROUSEL
   ========================================= */

.products {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden !important;

  padding: 42px 0 52px !important;

  box-sizing: border-box;

  background:
    linear-gradient(
      180deg,
      rgba(235,248,255,.96),
      rgba(255,255,255,.94)
    ),
    url("images/sapphire-mansion-city.png") center/cover !important;
}


/* SOFT FADE ON LEFT SIDE */
.products::before {
  content: "";
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: clamp(45px, 7vw, 130px);

  z-index: 10;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(238,248,255,1) 0%,
      rgba(238,248,255,.92) 25%,
      rgba(238,248,255,.50) 58%,
      rgba(238,248,255,0) 100%
    );
}


/* SOFT FADE ON RIGHT SIDE */
.products::after {
  content: "";
  position: absolute;

  top: 0;
  bottom: 0;
  right: 0;

  width: clamp(45px, 7vw, 130px);

  z-index: 10;
  pointer-events: none;

  background:
    linear-gradient(
      270deg,
      rgba(238,248,255,1) 0%,
      rgba(238,248,255,.92) 25%,
      rgba(238,248,255,.50) 58%,
      rgba(238,248,255,0) 100%
    );
}


/* THE MOVING TRACK */
.product-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;

  width: max-content !important;
  max-width: none !important;

  gap: 22px !important;

  padding: 10px 0 18px !important;
  margin: 0 !important;

  overflow: visible !important;

  box-sizing: border-box;

  will-change: transform;

  animation: glamProductLoop 42s linear infinite;
}


/* PAUSE WHEN HOVERING */
.product-row:hover {
  animation-play-state: paused;
}


/* CARDS */
.product {
  position: relative;

  flex: 0 0 310px !important;

  width: 310px !important;
  min-width: 310px !important;
  max-width: 310px !important;

  min-height: 430px !important;

  overflow: hidden;

  border-radius: 26px !important;

  border:
    1px solid rgba(255,255,255,.48) !important;

  background:
    linear-gradient(
      180deg,
      #0b3558 0%,
      #061f36 42%,
      #031522 100%
    ) !important;

  color: #fff !important;

  box-shadow:
    0 18px 45px rgba(9,49,83,.18),
    inset 0 1px 0 rgba(255,255,255,.18);

  box-sizing: border-box;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.product:hover {
  transform: translateY(-7px);

  box-shadow:
    0 28px 65px rgba(8,45,77,.27),
    0 0 25px rgba(22,143,234,.18);
}


.product::after {
  display: none !important;
}


/* PRODUCT IMAGE */
.product img {
  display: block;

  width: calc(100% - 28px) !important;
  height: 280px !important;

  margin: 14px 14px 0 !important;

  object-fit: cover;

  border-radius: 18px !important;

  background: #061b30;
}


/* PRODUCT NAME */
.product h3 {
  margin: 20px 20px 8px !important;

  color: #fff !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size: 19px !important;
  font-weight: 800 !important;

  line-height: 1.08;

  letter-spacing: -.025em;
}


/* SHOP LINK */
.product b {
  display: inline-block;

  margin: 10px 20px 22px !important;

  color: #57bbff !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif !important;

  font-size: 10px !important;
  font-weight: 800 !important;

  letter-spacing: .12em;

  text-transform: uppercase;
}


/* TRUE CONTINUOUS MOVEMENT */
@keyframes glamProductLoop {

  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(
      calc(-50% - 11px),
      0,
      0
    );
  }

}


/* TABLET */
@media (max-width: 900px) {

  .product {
    flex-basis: 280px !important;

    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
  }

  .product img {
    height: 250px !important;
  }

}


/* PHONE */
@media (max-width: 600px) {

  .products {
    padding: 30px 0 42px !important;
  }

  .products::before,
  .products::after {
    width: 42px;
  }

  .product-row {
    gap: 16px !important;

    animation-duration: 36s;
  }

  .product {
    flex-basis: 245px !important;

    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;

    min-height: 375px !important;
  }

  .product img {
    width: calc(100% - 22px) !important;

    height: 220px !important;

    margin: 11px 11px 0 !important;
  }

}
/* CHOOSE YOUR NEXT MOVE — LUXURY GLASS CARDS */

.paths {
  position: relative;

  background:
    linear-gradient(
      145deg,
      rgba(238,248,255,.88),
      rgba(181,224,250,.80)
    ),
    url("images/sapphire-mansion-city.png") center/cover !important;
}

.path-grid {
  gap: 24px !important;
}

.path {
  position: relative;
  min-height: 390px !important;

  color: var(--glam-deep) !important;

  border: 1px solid rgba(255,255,255,.70) !important;
  border-radius: 28px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.88),
      rgba(218,241,255,.76)
    ) !important;

  box-shadow:
    0 24px 60px rgba(16,59,99,.13),
    inset 0 1px 0 rgba(255,255,255,.85);

  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.path:hover {
  transform: translateY(-7px);

  border-color: rgba(22,143,234,.45) !important;

  box-shadow:
    0 32px 75px rgba(16,59,99,.18),
    0 0 28px rgba(22,143,234,.12);
}

.path:nth-child(2) {
  border-radius: 28px !important;
}

.path:nth-child(3) {
  color: #fff !important;

  background:
    linear-gradient(
      145deg,
      rgba(41,166,242,.94),
      rgba(10,91,157,.97)
    ) !important;

  border-color: rgba(255,255,255,.48) !important;

  box-shadow:
    0 28px 70px rgba(10,67,112,.25),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.about {
  background: linear-gradient(125deg, #dff3ff, #fff 48%, #c2e8ff) !important;
}
.about-image {
  border: 10px solid #fff;
  border-radius: 220px 220px 28px 28px;
  box-shadow: 25px 25px 0 var(--glam-sapphire), 0 30px 80px rgba(16,59,99,.2) !important;
}
.about-image img { border-radius: inherit; }
.about-copy p { color: #466b86 !important; }

.reviews {
  background:
    radial-gradient(circle at 50% 0, #fff 0 5%, transparent 35%),
    linear-gradient(180deg, #cbeaff, #f8fdff) !important;
}
.review-grid { gap: 28px !important; }
.review-grid article {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 24px !important;

  box-shadow:
    0 18px 45px rgba(16,59,99,.10);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.review-grid article::before { content: "★★★★★"; display: block; margin-bottom: 14px; color: var(--glam-sapphire); letter-spacing: .22em; }
.review-grid p { font-family: "Montserrat", Arial, sans-serif !important; font-style: normal !important; }
.review-buttons a { border-radius: 999px; background: var(--glam-sapphire) !important; color: #fff !important; }

.community {
  background:
    linear-gradient(115deg, rgba(22,143,234,.93), rgba(87,190,253,.88)),
    url("images/sapphire-mansion-city.png") center/cover !important;
}
.community > div {
  position: relative;

  width: min(1100px, 90%);
  margin: 0 auto;

  padding: 48px 40px !important;

  border-radius: 28px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.90),
      rgba(218,241,255,.82)
    ) !important;

  border: 1px solid rgba(255,255,255,.75) !important;

  box-shadow:
    0 24px 60px rgba(16,59,99,.12);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.community h2 { color: var(--glam-deep) !important; }
.community h2 em { color: var(--glam-sapphire) !important; }

footer {
  color: #fff !important;
  background: linear-gradient(135deg, var(--glam-sapphire), var(--glam-deep)) !important;
}
footer p { color: rgba(255,255,255,.7) !important; }

.workshops-page,
.one-on-one-page { background: var(--glam-cloud) !important; color: var(--glam-deep) !important; }
.workshops-page header,
.one-on-one-page nav { background: rgba(255,255,255,.96) !important; color: var(--glam-deep) !important; border-bottom-color: rgba(22,143,234,.22) !important; }
.workshops-page .workshops-hero,
.one-on-one-page .coaching-hero {
  background:
    linear-gradient(100deg, rgba(22,143,234,.96), rgba(80,188,253,.88) 54%, rgba(255,255,255,.44)),
    url("images/sapphire-mansion-city.png") center/cover !important;
  color: #fff !important;
}
.workshops-page section,
.one-on-one-page section { border-color: rgba(22,143,234,.18) !important; }
.workshops-page .workshop-feature,
.workshops-page .workshop-support,
.workshops-page .workshop-upcoming,
.workshops-page .workshop-portal-section,
.one-on-one-page .coaching-intro,
.one-on-one-page .coaching-booking-section,
.one-on-one-page .coaching-process-section,
.one-on-one-page .coaching-policy-section,
.one-on-one-page .coaching-final-cta { background: linear-gradient(145deg, #fff, #e6f6ff) !important; color: var(--glam-deep) !important; }

@media (max-width: 1100px) {
  .mansion-brand { top: 2.5%; padding: 12px 22px 14px; }
  .mansion-hotspot { max-width: 145px; padding: 8px 10px 7px; border-radius: 11px; }
  .room-freebies { left: 2%; }
  .room-support { right: 2%; }
}

@media (max-width: 900px) {
  .mansion-interface { overflow-x: auto; scroll-snap-type: x proximity; }
  .mansion-stage { width: 1180px; min-height: 680px; scroll-snap-align: center; }
  .mansion-brand { position: sticky; left: 50vw; width: 540px; }
  .mansion-entry-note { position: sticky; left: 50vw; top: 630px; bottom: auto; width: max-content; }
  .mansion-hotspot { max-width: 155px; }
  .creative-grid { padding: 40px 24px !important; }
 .community > div {
  border-radius: 28px !important;
}
}

@media (max-width: 560px) {
  .mansion-stage { width: 1040px; min-height: 600px; }
  .mansion-brand { left: 50vw; width: 430px; }
  .mansion-brand strong { font-size: 34px; }
  .mansion-brand span { font-size: 7px; }
  .mansion-hotspot { max-width: 135px; }
  .mansion-hotspot b { font-size: 9px; }
  .mansion-hotspot span { font-size: 7px; }
  .mansion-entry-note { left: 50vw; top: 555px; }
  .agency-hero { padding-inline: 22px !important; }
  .hero-text { width: 96% !important; }
  .creative-grid { gap: 8px !important; padding: 28px 10px !important; }
  .grid-lead { border-radius: 60px 18px 18px 18px; }
  .ad { border-radius: 18px; }
.product {
  border-radius: 26px !important;
}

.path {
  border-radius: 28px !important;
}

.review-grid article {
  border-radius: 24px !important;
}

.community > div {
  padding-inline: 20px !important;
  border-radius: 28px !important;
}
}

@media (prefers-reduced-motion: reduce) {
  .mansion-hotspot { transition: none; }
}

/* =========================================================
   MOBILE RESPONSIVE REPAIR
   Keep the full Glam City view visible, then turn the room
   hotspots into a touch-friendly directory below the mansion.
   ========================================================= */
@media (max-width: 900px) {
  html,
  body,
  main,
  .page-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  .mansion-interface {
    overflow: visible;
    background: linear-gradient(180deg, #dff3ff, #ffffff);
  }

  .mansion-stage {
    width: 100%;
    min-height: 0;
    padding: 0 12px 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    background: linear-gradient(180deg, #8dcef7 0, #eaf8ff 42%, #ffffff 100%);
  }

  .mansion-stage::before {
    display: none;
  }

  .mansion-stage > img {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    width: calc(100% + 24px);
    max-width: none;
    height: auto;
    margin-left: -12px;
    object-fit: contain;
    object-position: center top;
  }

  .mansion-hotspot,
  .room-freebies,
  .room-templates,
  .room-bestsellers,
  .room-shop,
  .room-creators,
  .room-support,
  .room-generators,
  .room-community,
  .room-facebook,
  .room-bundles,
  .room-pngs,
  .room-reviews {
    position: relative;
    inset: auto;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    min-height: 70px;
    justify-content: center;
    padding: 13px 11px 11px 15px;
    border-radius: 16px;
    transform: none;
  }

  .mansion-hotspot::before {
    left: 11px;
    top: -6px;
    width: 11px;
    height: 11px;
    border-width: 3px;
  }

  .mansion-hotspot b {
    font-size: 10px;
    line-height: 1.15;
  }

  .mansion-hotspot span {
    font-size: 8px;
    line-height: 1.25;
  }

  .mansion-hotspot:hover,
  .mansion-hotspot:focus-visible {
    transform: translateY(-2px);
  }

  .mansion-entry-note {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    bottom: auto;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
    transform: none;
    text-align: center;
  }

  .creative-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    padding: 24px 14px !important;
  }

  .grid-lead {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 360px;
  }

  .ad {
    min-height: 240px;
  }

  .phone-showcase {
    min-height: 0 !important;
    padding: 42px 14px 34px !important;
  }

  .phone-row {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    perspective: none;
  }

  .device,
  .d1,
  .d2,
  .d3,
  .d4 {
    width: 100%;
    min-width: 0;
    aspect-ratio: 9 / 14;
    transform: none;
    animation: none;
  }

  .products,
  .paths,
  .about,
  .reviews,
  .community {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .section-title h2,
  .about-copy h2,
  .community h2 {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  header {
    height: 66px !important;
    min-height: 68px;
    padding-inline: 12px !important;
  }

  .logo img {
    width: min(148px, 48vw) !important;
    height: auto;
  }

  .hamb {
    min-width: 46px;
    min-height: 46px;
  }

  .mansion-stage {
    width: 100%;
    min-height: 0;
    padding-inline: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
  }

  .mansion-stage > img {
    width: calc(100% + 20px);
    margin-left: -10px;
  }

  .mansion-hotspot {
    min-height: 58px;
    padding: 10px 7px 8px 11px;
    border-radius: 13px;
  }

  .mansion-hotspot b {
    font-size: 8px;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .mansion-hotspot span {
    font-size: 6.5px;
    line-height: 1.2;
  }

  .mansion-entry-note {
    padding: 10px 12px;
    font-size: 8px;
    letter-spacing: .12em;
  }

  .grid-lead {
    min-height: 0;
    padding: 34px 24px !important;
    border-radius: 42px 18px 18px 18px;
  }

  .grid-lead h2 {
    font-size: clamp(38px, 12vw, 54px) !important;
  }

  .ad {
    min-height: 225px;
  }

  .ad > div {
    max-width: 68%;
  }

  .phone-row {
    gap: 8px;
  }

  .device {
    border-radius: 19px;
  }

  .screen h3 {
    font-size: clamp(15px, 5.2vw, 23px) !important;
    overflow-wrap: anywhere;
  }

  .path,
  .review-grid article,
  .community > div {
    min-width: 0;
  }

  .path {
    min-height: 310px !important;
    padding: 26px 22px;
  }

  .review-grid article {
    padding: 26px 20px;
  }

  .about-image {
    width: calc(100% - 14px);
    margin-left: 0;
  }

  .workshops-hero,
  .coaching-hero {
    min-height: 0 !important;
    padding-inline: 20px !important;
  }

  .workshops-hero h1,
  .coaching-hero h1,
  .workshop-section-heading h2,
  .coaching-intro h2,
  .coaching-booking-section h2,
  .coaching-process-section h2,
  .coaching-policy-box h2,
  .coaching-final-box h2 {
    font-size: clamp(36px, 12vw, 58px) !important;
    overflow-wrap: anywhere;
  }

  .workshop-container,
  .coaching-container {
    width: min(100% - 28px, 1240px) !important;
  }

  .workshop-feature-copy,
  .coaching-booking-card,
  .coaching-policy-box,
  .coaching-final-box {
    min-width: 0;
    padding-inline: 20px !important;
  }

  footer div {
    gap: 14px;
    padding-inline: 6px;
  }
}

@media (max-width: 360px) {
  .mansion-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mansion-stage > img,
  .mansion-entry-note {
    grid-column: 1 / -1;
  }

  .phone-row {
    grid-template-columns: 1fr;
  }

  .device {
    max-width: 250px;
    margin-inline: auto;
  }
}