/* Hotel demo styles. Loaded only by that page family. */
.hotel-demo {
  --hotel-forest: #17372d;
  --hotel-forest-deep: #092019;
  --hotel-ivory: #f7f2e8;
  --hotel-stone: #d7d0c2;
  --hotel-gold: #c6a461;
  --hotel-ink: #17211d;
  --hotel-muted: #6d746e;
  --hotel-card: #fffaf0;
  min-height: 100vh;
  background: var(--hotel-ivory);
  color: var(--hotel-ink);
  font-family: "Instrument Sans", sans-serif;
}

.hotel-header {
  position: fixed;
  inset: 1rem 1rem auto;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 2rem), var(--max-width));
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(9, 32, 25, 0.68);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  padding: 0.75rem;
}

.hotel-logo,
.hotel-nav,
.hotel-footer a {
  color: #fff;
}

.hotel-logo {
  display: inline-flex;
  gap: 0.7rem;
  align-items: center;
}

.hotel-logo span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(198, 164, 97, 0.55);
  border-radius: 50%;
  color: var(--hotel-gold);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-weight: 700;
}

.hotel-logo strong,
.hotel-hero h1,
.hotel-section h2 {
  font-family: "Cormorant Garamond", serif;
}

.hotel-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.1rem;
  justify-content: flex-end;
  font-size: 0.92rem;
}

.hotel-nav a {
  color: rgba(255, 255, 255, 0.82);
}

.hotel-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--hotel-forest-deep);
  padding: 7rem 1rem 1rem;
}

.hotel-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotel-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 32, 25, 0.82), rgba(9, 32, 25, 0.42) 44%, rgba(9, 32, 25, 0.12)),
    linear-gradient(0deg, rgba(9, 32, 25, 0.82), transparent 58%);
}

.hotel-hero-copy,
.hotel-search {
  position: relative;
  z-index: 1;
  width: min(100%, var(--max-width));
  margin: 0 auto;
}

.hotel-hero-copy {
  color: #fff;
  padding-bottom: clamp(1.5rem, 6vw, 5rem);
}

.hotel-kicker {
  margin: 0 0 0.75rem;
  color: var(--hotel-gold);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hotel-hero h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(4rem, 9vw, 8.2rem);
  line-height: 0.88;
  letter-spacing: 0;
}

.hotel-hero p:not(.hotel-kicker) {
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.18rem;
  line-height: 1.7;
}

.hotel-actions,
.hotel-intro-notes,
.hotel-booking-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.hotel-button,
.hotel-search button,
.hotel-booking-form button,
.hotel-contact-form button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  padding: 0.85rem 1.15rem;
}

.hotel-button-gold,
.hotel-search button,
.hotel-booking-form button,
.hotel-contact-form button {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--hotel-gold);
  color: var(--hotel-forest-deep);
}

.hotel-button-glass {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.hotel-button-green {
  background: var(--hotel-forest);
  color: #fff;
}

.hotel-search {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.9);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  padding: 0.8rem;
}

.hotel-search label,
.hotel-booking-form label,
.hotel-contact-form label,
.hotel-mini-widget label {
  display: grid;
  gap: 0.35rem;
  color: var(--hotel-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.hotel-search input,
.hotel-search select,
.hotel-booking-form input,
.hotel-booking-form select,
.hotel-booking-form textarea,
.hotel-contact-form input,
.hotel-contact-form textarea,
.hotel-mini-widget input {
  width: 100%;
  border: 1px solid rgba(23, 55, 45, 0.18);
  border-radius: 8px;
  background: #fff;
  color: var(--hotel-ink);
  font: inherit;
  padding: 0.78rem 0.8rem;
}

.hotel-section {
  width: min(calc(100% - 2rem), var(--max-width));
  margin: clamp(3rem, 7vw, 5.75rem) auto 0;
  padding: 0;
}

.hotel-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2rem;
  align-items: end;
}

.hotel-section h2 {
  margin: 0;
  color: var(--hotel-forest-deep);
  font-size: clamp(2.6rem, 5.8vw, 5.4rem);
  line-height: 0.95;
}

.hotel-section p {
  color: var(--hotel-muted);
  line-height: 1.75;
}

.hotel-intro-notes span,
.hotel-tech-grid span,
.hotel-experience-grid article,
.hotel-booking-steps span {
  border: 1px solid rgba(23, 55, 45, 0.14);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.82);
  color: var(--hotel-forest);
  font-weight: 800;
  padding: 0.72rem 0.9rem;
}

.hotel-section-head {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 1.3rem;
}

.hotel-room-grid,
.hotel-feature-list,
.hotel-experience-grid,
.hotel-offer-row,
.hotel-reviews,
.hotel-tech-grid {
  display: grid;
  gap: 1rem;
}

.hotel-room-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hotel-room-grid article,
.hotel-feature-list article,
.hotel-offer-row article,
.hotel-reviews article,
.hotel-faq details {
  border: 1px solid rgba(23, 55, 45, 0.14);
  border-radius: 8px;
  background: var(--hotel-card);
  box-shadow: 0 20px 50px rgba(23, 55, 45, 0.08);
  padding: 1.1rem;
}

.hotel-room-grid article {
  min-height: 330px;
  display: grid;
  align-content: end;
  background:
    linear-gradient(0deg, rgba(9, 32, 25, 0.78), rgba(9, 32, 25, 0.08)),
    url("/assets/rowan-house-hotel.png") center / cover;
  color: #fff;
}

.hotel-room-grid h3 {
  margin: 0.65rem 0 0.5rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  line-height: 1;
}

.hotel-room-grid p {
  color: rgba(255, 255, 255, 0.78);
}

.hotel-room-grid strong,
.hotel-room-grid a,
.hotel-reviews span {
  color: var(--hotel-gold);
}

.hotel-room-detail,
.hotel-split,
.hotel-offers,
.hotel-booking,
.hotel-contact,
.hotel-bonnet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  border-radius: 8px;
}

.hotel-room-gallery,
.hotel-image-panel,
.hotel-map {
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(0deg, rgba(9, 32, 25, 0.7), rgba(9, 32, 25, 0.2)),
    url("/assets/rowan-house-hotel.png") center / cover;
  color: #fff;
  font-weight: 900;
}

.hotel-room-gallery img {
  display: none;
}

.hotel-room-detail ul {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.1rem;
  color: var(--hotel-muted);
}

.hotel-mini-widget,
.hotel-booking-form,
.hotel-contact-form {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.hotel-mini-widget {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hotel-feature-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hotel-feature-list span {
  color: var(--hotel-gold);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  font-weight: 700;
}

.hotel-feature-list strong,
.hotel-offer-row strong {
  display: block;
  margin: 0.55rem 0 0.35rem;
  color: var(--hotel-forest-deep);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.55rem;
}

.hotel-split,
.hotel-offers,
.hotel-booking,
.hotel-contact,
.hotel-bonnet {
  border: 1px solid rgba(23, 55, 45, 0.14);
  background: rgba(255, 250, 240, 0.72);
  padding: clamp(1rem, 3vw, 1.35rem);
}

.hotel-split-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hotel-image-panel.spa {
  background:
    linear-gradient(0deg, rgba(9, 32, 25, 0.74), rgba(9, 32, 25, 0.12)),
    radial-gradient(circle at 20% 20%, rgba(198, 164, 97, 0.28), transparent 38%),
    var(--hotel-forest);
}

.hotel-experience-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hotel-offer-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hotel-offer-row span {
  color: var(--hotel-muted);
}

.hotel-reviews {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hotel-reviews p {
  color: var(--hotel-forest-deep);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.55rem;
  line-height: 1.15;
}

.hotel-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 170px;
  gap: 1rem;
}

.hotel-gallery .tile {
  display: grid;
  place-items: end start;
  border-radius: 8px;
  background:
    linear-gradient(0deg, rgba(9, 32, 25, 0.78), transparent),
    url("/assets/rowan-house-hotel.png") center / cover;
  color: #fff;
  font-weight: 900;
  padding: 1rem;
}

.hotel-gallery .large {
  grid-column: span 2;
  grid-row: span 2;
}

.hotel-gallery .tall {
  grid-row: span 2;
}

.hotel-gallery .wide {
  grid-column: span 2;
}

.hotel-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 1rem;
}

.hotel-faq-list {
  display: grid;
  gap: 0.75rem;
}

.hotel-faq summary {
  color: var(--hotel-forest-deep);
  cursor: pointer;
  font-weight: 900;
}

.hotel-booking-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.hotel-booking-form .wide,
.hotel-contact-form .wide,
.hotel-booking-form button.wide,
.hotel-contact-form button.wide {
  grid-column: 1 / -1;
}

.hotel-booking-steps {
  grid-column: 1 / -1;
}

.hotel-contact {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 0.92fr) minmax(260px, 0.8fr);
}

.hotel-map {
  min-height: 300px;
  background:
    linear-gradient(135deg, rgba(198, 164, 97, 0.2), rgba(23, 55, 45, 0.08)),
    repeating-linear-gradient(45deg, rgba(23, 55, 45, 0.05), rgba(23, 55, 45, 0.05) 12px, transparent 12px, transparent 24px);
  color: var(--hotel-muted);
}

.hotel-tech-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hotel-footer {
  width: min(calc(100% - 2rem), var(--max-width));
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: clamp(3rem, 8vw, 6rem) auto 0;
  border-top: 1px solid rgba(23, 55, 45, 0.14);
  color: var(--hotel-muted);
  padding: 1.5rem 0 2rem;
}

.hotel-footer a {
  color: var(--hotel-forest);
}

.hotel-demo main {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.hotel-search {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.hotel-intro {
  margin-top: clamp(2.5rem, 6vw, 4.75rem);
  align-items: start;
  border-bottom: 1px solid rgba(23, 55, 45, 0.12);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.hotel-intro .hotel-kicker {
  grid-column: 1 / -1;
  margin-bottom: -1rem;
}

.hotel-section-head {
  max-width: 860px;
}

.hotel-room-detail,
.hotel-split,
.hotel-offers,
.hotel-booking,
.hotel-contact,
.hotel-bonnet {
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 3vw, 1.6rem);
}

.hotel-room-detail > div:not(.hotel-room-gallery),
.hotel-split > div:not(.hotel-image-panel),
.hotel-booking > div:first-child,
.hotel-contact > div:first-child,
.hotel-bonnet > .hotel-section-head {
  padding: clamp(0.35rem, 1.5vw, 0.75rem);
}

.hotel-feature-list,
.hotel-reviews,
.hotel-gallery {
  margin-top: clamp(3rem, 7vw, 5rem);
}

.hotel-room-grid article,
.hotel-feature-list article,
.hotel-offer-row article,
.hotel-reviews article,
.hotel-faq details {
  padding: clamp(1rem, 2vw, 1.25rem);
}

.hotel-room-grid p,
.hotel-feature-list p,
.hotel-reviews p,
.hotel-offer-row span {
  margin-bottom: 0;
}

.hotel-booking-steps {
  margin-top: 0.2rem;
}

.hotel-bonnet {
  align-items: start;
}

@media (max-width: 1080px) {
  .hero,
  .case-study-hero,
  .case-study-grid,
  .case-study-cta,
  .resource-card-grid,
  .resource-demo-link,
  .portfolio-overview-list,
  .showcase-page-hero,
  .showcase-proof-grid,
  .showcase-route,
  .count-card-grid,
  .live-system-demo,
  .platform-hero,
  .ux-hero,
  .platform-map,
  .module-grid,
  .proof-grid,
  .why-system,
  .platform-cta,
  .ux-workspace,
  .ux-report-download,
  .ux-final-cta,
  .deep-dive,
  .ux-score-summary,
  .ux-before-grid,
  .ux-principle-grid,
  .ux-modal-summary,
  .studio-grid,
  .section-heading,
  .signal-layout,
  .service-grid,
  .offer-grid,
  .labs-list,
  .showcase-stage,
  .page-link-grid,
  .seo-service-grid,
  .seo-store-card,
  .limited-offer-panel,
  .seo-static-list,
  .showcase-seo-list,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .store-hero,
  .service-card-body,
  .service-addons {
    grid-template-columns: 1fr;
  }

  .store-hero {
    grid-template-areas:
      "eyebrow"
      "title"
      "copy"
      "typewriter";
  }

  .store-hero h1,
  .store-hero .page-hero-copy {
    max-width: none;
  }

  .product-card {
    grid-template-columns: initial;
  }

  .product-card:nth-child(even) .product-card-media,
  .product-card:nth-child(even) .product-card-copy {
    order: initial;
  }

  .hero {
    padding-top: 2.4rem;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-showcase {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-showcase-grid {
    grid-template-columns: 1fr;
  }

  .product-meta {
    grid-template-columns: 1fr;
  }

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

  .case-study-results {
    grid-template-columns: 1fr;
  }

  .showcase-seo-list .panel {
    grid-template-columns: 1fr;
  }

  .showcase-proof-card,
  .showcase-proof-card-large {
    grid-row: auto;
    min-height: 360px;
  }

  .showcase-route::before {
    display: none;
  }

  .platform-node-grid,
  .why-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ux-overall-score {
    grid-column: auto;
  }

  .ux-sample-report-card {
    grid-template-columns: 1fr;
  }

  .cafe-intro-grid,
  .cafe-split,
  .cafe-booking,
  .cafe-contact-grid,
  .cafe-gift {
    grid-template-columns: 1fr;
  }

  .cafe-card-grid,
  .cafe-card-grid.three,
  .cafe-reviews,
  .cafe-tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cafe-gift .button {
    justify-self: start;
  }

  .retail-category-grid,
  .retail-product-grid,
  .retail-mini-products,
  .retail-tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .retail-seasonal,
  .retail-detail,
  .retail-why,
  .retail-collect,
  .retail-voucher,
  .retail-newsletter,
  .retail-contact {
    grid-template-columns: 1fr;
  }

  .retail-voucher .button {
    justify-self: start;
  }

  .trade-service-grid,
  .trade-gallery-grid,
  .trade-reviews,
  .trade-badges,
  .trade-area-list,
  .trade-tech-grid,
  .ma-gallery-grid,
  .ma-testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trade-trust,
  .trade-areas,
  .trade-quote,
  .trade-contact,
  .trade-callbar,
  .trade-site-diary,
  .trade-local-seo,
  .trade-hero-upgraded,
  .trade-services-feature,
  .trade-work-board,
  .trade-pricing {
    grid-template-columns: 1fr;
  }

  .trade-job-card {
    align-self: stretch;
    margin: 0 clamp(1rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem);
  }

  .trade-service-large {
    min-height: 320px;
  }

  .trade-pricing-grid {
    grid-template-columns: 1fr;
  }

  .trade-callbar .button {
    justify-self: start;
  }

  .trade-diary-list article {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .trade-diary-list p {
    grid-column: 2;
  }

  .hotel-search,
  .hotel-intro,
  .hotel-feature-list,
  .hotel-experience-grid,
  .hotel-offer-row,
  .hotel-reviews,
  .hotel-tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hotel-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hotel-room-detail,
  .hotel-split,
  .hotel-split-reverse,
  .hotel-faq,
  .hotel-booking,
  .hotel-contact,
  .hotel-bonnet {
    grid-template-columns: 1fr;
  }

  .hotel-search button,
  .hotel-offers,
  .hotel-bonnet {
    grid-column: 1 / -1;
  }

  .hotel-contact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .site-header {
    position: static;
    flex-direction: column;
    align-items: flex-start;
  }

  .site-nav {
    gap: 0.75rem 1rem;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .count-card-grid,
  .platform-node-grid,
  .why-card-grid,
  .proof-grid,
  .ux-before-grid,
  .ux-principle-grid {
    grid-template-columns: 1fr;
  }

  .platform-hero h1,
  .ux-hero h1 {
    font-size: clamp(2.7rem, 15vw, 4rem);
  }

  .ux-url-control,
  .ux-preview-summary,
  .ux-preview-finding,
  .ux-report-header {
    grid-template-columns: 1fr;
  }

  .ux-report-header {
    display: grid;
  }

  .ux-preview-impact,
  .ux-report-badge {
    width: fit-content;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-meta div {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 16vw, 4rem);
  }

  .hero-showcase {
    padding: 0.7rem;
  }

  .limited-offer-panel {
    padding: 1rem;
  }

  .limited-offer-list {
    display: grid;
  }

  .limited-offer-actions {
    justify-items: stretch;
  }

  .hero-showcase-media {
    aspect-ratio: 4 / 3;
  }

  .showcase-image-wrap {
    height: min(78vw, 380px);
    min-height: 260px;
  }

  .showcase-proof-card,
  .showcase-proof-card-large {
    min-height: 320px;
  }

  .showcase-hero-notes {
    padding: 0.85rem;
  }

  .showcase-route article {
    min-height: 0;
  }

  .hero-showcase-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .showcase-controls {
    flex-direction: column;
  }

  .showcase-copy {
    min-height: 0;
    grid-template-rows: none;
  }

  .showcase-summary,
  .showcase-metrics {
    min-height: 0;
  }

  .showcase-bullets {
    max-height: none;
  }

  .service-footer,
  .service-card-top,
  .planning-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-cta {
    width: 100%;
  }

  .service-footer-actions {
    width: 100%;
    justify-items: stretch;
  }

  .service-action-row {
    width: 100%;
    justify-content: stretch;
  }

  .service-action-row .button {
    flex: 1 1 220px;
  }

  .service-price,
  .service-price-note {
    text-align: left;
  }

  .service-deposit-note {
    text-align: left;
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .guide-panel-wide {
    grid-column: auto;
  }

  .guide-visual-panel,
  .guide-dashboard-demo {
    grid-template-columns: 1fr;
  }

  .guide-visual {
    min-height: 220px;
  }

  .guide-shop-demo,
  .guide-prototype-demo,
  .guide-resource-demo,
  .guide-before-after-demo {
    grid-template-columns: 1fr;
  }

  .guide-timeline-demo,
  .guide-journey-demo,
  .guide-integration-demo,
  .guide-phone-demo {
    align-items: stretch;
    flex-direction: column;
  }

  .guide-timeline-demo div,
  .guide-journey-demo div,
  .guide-integration-demo div,
  .guide-phone-demo div {
    width: 100%;
    min-width: 0;
  }

  .guide-timeline-demo div:not(:last-child)::after,
  .guide-journey-demo div:not(:last-child)::after,
  .guide-integration-demo div:not(:last-child)::after {
    display: none;
  }

  .example-detail-grid,
  .example-launch-split,
  .example-site-grid,
  .example-score-row,
  .example-system-demo,
  .example-hub-demo section,
  .example-workflow-demo {
    grid-template-columns: 1fr;
  }

  .example-app-demo {
    flex-direction: column;
  }

  .example-app-demo article {
    width: 100%;
    min-height: 220px;
  }

  .example-workflow-demo div:not(:last-child)::after {
    display: none;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-nav {
    justify-content: flex-start;
  }

  .cafe-hero {
    min-height: 640px;
  }

  .cafe-hero h1 {
    font-size: clamp(2.8rem, 15vw, 4.2rem);
  }

  .cafe-tabs {
    position: static;
  }

  .cafe-card-grid,
  .cafe-card-grid.three,
  .cafe-reviews,
  .cafe-tech-grid,
  .cafe-form {
    grid-template-columns: 1fr;
  }

  .cafe-map {
    min-height: 280px;
  }

  .retail-hero {
    min-height: 660px;
    align-items: end;
  }

  .retail-hero::after {
    background:
      linear-gradient(0deg, rgba(246, 241, 232, 0.96), rgba(246, 241, 232, 0.74) 56%, rgba(246, 241, 232, 0.18)),
      linear-gradient(90deg, rgba(246, 241, 232, 0.62), transparent);
  }

  .retail-hero h1 {
    font-size: clamp(2.9rem, 14vw, 4.2rem);
  }

  .retail-tabs {
    position: static;
  }

  .retail-category-grid,
  .retail-product-grid,
  .retail-mini-products,
  .retail-tech-grid,
  .retail-form,
  .retail-newsletter-form {
    grid-template-columns: 1fr;
  }

  .retail-thumb {
    min-height: 210px;
  }

  .retail-detail-media .retail-thumb {
    min-height: 300px;
  }

  .trade-hero {
    min-height: 660px;
    align-items: end;
  }

  .trade-hero-upgraded {
    min-height: auto;
    padding: 0;
    align-items: stretch;
  }

  .trade-hero::after {
    background:
      linear-gradient(0deg, rgba(17, 22, 22, 0.9), rgba(17, 22, 22, 0.62) 58%, rgba(17, 22, 22, 0.12)),
      linear-gradient(90deg, rgba(17, 22, 22, 0.52), transparent);
  }

  .trade-hero h1 {
    font-size: clamp(2.8rem, 14vw, 4.1rem);
  }

  .trade-hero-upgraded .trade-hero-copy {
    padding: 2rem 1rem 1rem;
  }

  .trade-job-card {
    margin: 0 1rem 1rem;
  }

  .trade-tabs {
    position: static;
  }

  .trade-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .trade-service-grid,
  .trade-service-list,
  .trade-services-feature,
  .trade-site-diary,
  .trade-local-list,
  .trade-local-seo,
  .trade-diary-list article,
  .trade-callbar,
  .trade-work-board,
  .trade-gallery-grid,
  .trade-work-list,
  .trade-reviews,
  .trade-badges,
  .trade-area-list,
  .trade-tech-grid,
  .trade-form,
  .trade-pricing,
  .trade-pricing-grid,
  .ma-gallery-grid,
  .ma-testimonial-grid {
    grid-template-columns: 1fr;
  }

  .ma-facebook-proof .trade-work-list article {
    grid-template-columns: 1fr;
  }

  .ma-facebook-proof .trade-work-list img,
  .ma-facebook-proof .trade-work-list span,
  .ma-facebook-proof .trade-work-list h3,
  .ma-facebook-proof .trade-work-list p {
    grid-column: auto;
  }

  .ma-facebook-proof .trade-work-list img {
    grid-row: auto;
    height: 220px;
  }

  .trade-service-large,
  .trade-work-main {
    min-height: 300px;
  }

  .trade-callbar .button {
    width: 100%;
  }

  .trade-diary-list p {
    grid-column: auto;
  }

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

  .hotel-header {
    position: absolute;
    align-items: flex-start;
    flex-direction: column;
  }

  .hotel-nav {
    justify-content: flex-start;
  }

  .hotel-hero {
    min-height: 760px;
    padding-bottom: 1rem;
  }

  .hotel-hero h1 {
    font-size: clamp(3.7rem, 18vw, 5.8rem);
  }

  .hotel-search,
  .hotel-intro,
  .hotel-room-grid,
  .hotel-room-detail,
  .hotel-feature-list,
  .hotel-split,
  .hotel-split-reverse,
  .hotel-experience-grid,
  .hotel-offer-row,
  .hotel-reviews,
  .hotel-gallery,
  .hotel-faq,
  .hotel-booking,
  .hotel-booking-form,
  .hotel-contact,
  .hotel-tech-grid,
  .hotel-mini-widget {
    grid-template-columns: 1fr;
  }

  .hotel-gallery .large,
  .hotel-gallery .tall,
  .hotel-gallery .wide {
    grid-column: auto;
    grid-row: auto;
  }

  .hotel-room-gallery,
  .hotel-image-panel {
    min-height: 260px;
  }

  .hotel-section {
    margin-top: clamp(2.4rem, 10vw, 3.8rem);
  }

  .hotel-intro {
    margin-top: 2.2rem;
    padding-bottom: 2.2rem;
  }

  .hotel-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}